From a7de86b926ac13e4870e39e91806ddc8650060a9 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 1 Dec 2025 13:40:40 +0000
Subject: [PATCH 1/2] feat: add documentation for Form, Frame, Paper, Select,
Skeleton, and Switch components
Added MDX documentation pages for several core components that were previously missing. Each page includes usage examples, variants, and API details.
---
packages/docs/pages/core/form.mdx | 59 ++++++++++
packages/docs/pages/core/frame.mdx | 120 ++++++++++++++++++++
packages/docs/pages/core/paper.mdx | 79 +++++++++++++
packages/docs/pages/core/select.mdx | 152 ++++++++++++++++++++++++++
packages/docs/pages/core/skeleton.mdx | 73 +++++++++++++
packages/docs/pages/core/switch.mdx | 128 ++++++++++++++++++++++
6 files changed, 611 insertions(+)
create mode 100644 packages/docs/pages/core/form.mdx
create mode 100644 packages/docs/pages/core/frame.mdx
create mode 100644 packages/docs/pages/core/paper.mdx
create mode 100644 packages/docs/pages/core/select.mdx
create mode 100644 packages/docs/pages/core/skeleton.mdx
create mode 100644 packages/docs/pages/core/switch.mdx
diff --git a/packages/docs/pages/core/form.mdx b/packages/docs/pages/core/form.mdx
new file mode 100644
index 0000000..7e8590c
--- /dev/null
+++ b/packages/docs/pages/core/form.mdx
@@ -0,0 +1,59 @@
+import Preview from '@/helper/preview.vue'
+import PreviewFrame from '@/helper/preview-frame.vue'
+import CodeHighlight from '@/helper/code-highlight.vue'
+import Form from '@vue-material/core/Form'
+import Input from '@vue-material/core/Input'
+import Button from '@vue-material/core/Button'
+import Flex from '@vue-material/core/Box/Flex'
+
+export const meta = {
+ title: 'Form',
+ description: 'A form component that provides form values to its children.',
+ source: 'packages/lib/src/components/Form',
+ inherits: []
+}
+
+## Usage
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+ ```
+
+
+
+
+## Props
+
+`modelValue?`: any
+
+- The form data object. It provides values to child components based on their `name` prop.
diff --git a/packages/docs/pages/core/frame.mdx b/packages/docs/pages/core/frame.mdx
new file mode 100644
index 0000000..566a37d
--- /dev/null
+++ b/packages/docs/pages/core/frame.mdx
@@ -0,0 +1,120 @@
+import Preview from '@/helper/preview.vue'
+import PreviewFrame from '@/helper/preview-frame.vue'
+import CodeHighlight from '@/helper/code-highlight.vue'
+import Frame from '@vue-material/core/Frame'
+import Flex from '@vue-material/core/Box/Flex'
+
+export const meta = {
+ title: 'Frame',
+ description: 'A shaped container component.',
+ source: 'packages/lib/src/components/Frame',
+ inherits: ['core/Box']
+}
+
+## Usage
+
+
+
+
+
+ Frame
+
+
+
+
+
+ ```vue
+
+
+
+
+ Frame
+
+
+ ```
+
+
+
+
+## Themes
+
+
+
+
+ Primary
+ Secondary
+ Tertiary
+ Error
+
+
+
+
+ ```vue
+
+
+
+
+ Primary
+ Secondary
+ Tertiary
+ Error
+
+
+ ```
+
+
+
+
+## Shapes
+
+
+
+
+ Circle
+ Flower
+ Clover
+ Hexagon
+
+
+
+
+ ```vue
+
+
+
+
+ Circle
+ Flower
+ Clover
+ Hexagon
+
+
+ ```
+
+
+
+
+## Props
+
+> #### Inherits `BoxProps`
+
+`size?`: SizesString
+
+- The size of the frame
+- Default: `96`
+
+`frame?`: 'circle' | 'flower' | 'clover' | 'hexagon' | 'none'
+
+- The shape of the frame
+- Default: `'none'`
+
+`theme?`: 'primary' | 'secondary' | 'tertiary' | 'error' | 'none'
+
+- The color theme of the frame
+- Default: `'none'`
diff --git a/packages/docs/pages/core/paper.mdx b/packages/docs/pages/core/paper.mdx
new file mode 100644
index 0000000..25e4389
--- /dev/null
+++ b/packages/docs/pages/core/paper.mdx
@@ -0,0 +1,79 @@
+import Preview from '@/helper/preview.vue'
+import PreviewFrame from '@/helper/preview-frame.vue'
+import CodeHighlight from '@/helper/code-highlight.vue'
+import Paper from '@vue-material/core/Paper'
+import Flex from '@vue-material/core/Box/Flex'
+
+export const meta = {
+ title: 'Paper',
+ description: 'A surface that displays content and actions on a single topic.',
+ source: 'packages/lib/src/components/Paper',
+ inherits: ['core/Box']
+}
+
+## Usage
+
+
+
+
+ Neutral (Default)
+
+
+
+
+ ```vue
+
+
+
+ Neutral (Default)
+
+ ```
+
+
+
+
+## Variants
+
+
+
+
+ Primary
+ Secondary
+ Tertiary
+ Error
+ Neutral
+ Outlined
+
+
+
+
+ ```vue
+
+
+
+
+ Primary
+ Secondary
+ Tertiary
+ Error
+ Neutral
+ Outlined
+
+
+ ```
+
+
+
+
+## Props
+
+> #### Inherits `BoxProps`
+
+`variant?`: 'primary' | 'secondary' | 'tertiary' | 'error' | 'neutral' | 'outlined'
+
+- The variant of the paper
+- Default: `"neutral"`
diff --git a/packages/docs/pages/core/select.mdx b/packages/docs/pages/core/select.mdx
new file mode 100644
index 0000000..babb4d8
--- /dev/null
+++ b/packages/docs/pages/core/select.mdx
@@ -0,0 +1,152 @@
+import Preview from '@/helper/preview.vue'
+import PreviewFrame from '@/helper/preview-frame.vue'
+import CodeHighlight from '@/helper/code-highlight.vue'
+import Select from '@vue-material/core/Select'
+import Flex from '@vue-material/core/Box/Flex'
+
+export const meta = {
+ title: 'Select',
+ description: 'Select component allow users to choose one or multiple values from a list of options.',
+ source: 'packages/lib/src/components/Select',
+ inherits: []
+}
+
+## Usage
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+ ```
+
+
+
+
+## Multiple Selection
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+ ```
+
+
+
+
+## Object Values
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+ ```
+
+
+
+
+## Props
+
+> #### Inherits `HTMLAttributes`
+
+`value?`: (string | number)[]
+
+- The selected values
+
+`defaultValue?`: (string | number)[]
+
+- The initial selected values
+
+`items?`: (string | number | { value: string | number, label: any })[]
+
+- The list of options to display. Can be an array of strings/numbers or objects with `value` and `label`.
+
+`placeholder?`: string
+
+- The placeholder text
+
+`multiple?`: boolean
+
+- Whether to allow multiple selection
+
+`required?`: boolean
+
+- Whether the selection is required
+
+`variant?`: 'filled' | 'outlined'
+
+- The visual variant of the select input
+- Default: `filled`
+
+`prefix?`: string
+
+- Prefix text
+
+`icon?`: string | Component
+
+- Icon component or name
+
+## Events
+
+`change`: (value: (string | number)[]) => void
+
+- Emitted when the selection changes
diff --git a/packages/docs/pages/core/skeleton.mdx b/packages/docs/pages/core/skeleton.mdx
new file mode 100644
index 0000000..aa23d1f
--- /dev/null
+++ b/packages/docs/pages/core/skeleton.mdx
@@ -0,0 +1,73 @@
+import Preview from '@/helper/preview.vue'
+import PreviewFrame from '@/helper/preview-frame.vue'
+import CodeHighlight from '@/helper/code-highlight.vue'
+import Skeleton from '@vue-material/core/Skeleton'
+import Flex from '@vue-material/core/Box/Flex'
+
+export const meta = {
+ title: 'Skeleton',
+ description: 'Display a placeholder for content that is loading.',
+ source: 'packages/lib/src/components/Skeleton',
+ inherits: ['core/Box']
+}
+
+## Usage
+
+
+
+
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+
+
+
+
+ ```
+
+
+
+
+## Wrapping Content
+
+Skeleton can wrap content to mimic its shape while loading.
+
+
+
+
+ Content Loaded
+
+
+
+
+ ```vue
+
+
+
+
+ Content Loaded
+
+
+ ```
+
+
+
+
+
+## Props
+
+> #### Inherits `BoxProps`
diff --git a/packages/docs/pages/core/switch.mdx b/packages/docs/pages/core/switch.mdx
new file mode 100644
index 0000000..7f1a18d
--- /dev/null
+++ b/packages/docs/pages/core/switch.mdx
@@ -0,0 +1,128 @@
+import Preview from '@/helper/preview.vue'
+import PreviewFrame from '@/helper/preview-frame.vue'
+import CodeHighlight from '@/helper/code-highlight.vue'
+import Switch from '@vue-material/core/Switch'
+import Flex from '@vue-material/core/Box/Flex'
+
+export const meta = {
+ title: 'Switch',
+ description: 'A toggle switch component.',
+ source: 'packages/lib/src/components/Switch',
+ inherits: []
+}
+
+## Usage
+
+
+
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+
+ ```
+
+
+
+
+## Variants
+
+
+
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+
+
+
+ ```
+
+
+
+
+## Sizes
+
+
+
+
+
+
+
+
+
+
+
+
+ ```vue
+
+
+
+
+
+
+
+
+
+
+ ```
+
+
+
+
+## Props
+
+> #### Inherits `InputHTMLAttributes`
+
+`variant?`: 'outline' | 'filled'
+
+- The variant of the switch
+- Default: `"outline"`
+
+`size?`: SizesString
+
+- The size of the switch
+- Default: `"#xs"`
+
+`length?`: number
+
+- The length multiplier of the switch relative to its height
+- Default: `1.9`
+
+`checked?`: boolean
+
+- Whether the switch is checked
+
+`defaultChecked?`: boolean
+
+- The initial checked state
+
+## Events
+
+`change`: (value: boolean) => void
+
+- Emitted when the switch state changes
From c1a6dda3c1e7226722025dda4640c986b7abbb39 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 3 Dec 2025 03:00:19 +0000
Subject: [PATCH 2/2] feat: add documentation for Form, Frame, Paper, Select,
Skeleton, and Switch components
Added MDX documentation pages for several core components that were previously missing.
Each page includes usage examples, variants, and API details.