From b168f05b77133e9545a2d00a6103b642476c04af Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Wed, 17 Dec 2025 12:37:57 +0000
Subject: [PATCH 01/32] wip

---
 resources/js/stories/Button.stories.ts   | 90 ++++++++++++++++++++----
 resources/js/stories/Calendar.stories.ts | 82 +++++++++------------
 resources/js/stories/Card.stories.ts     | 10 ++-
 resources/js/stories/docs/Button.mdx     |  4 ++
 resources/js/stories/docs/Calendar.mdx   |  6 --
 resources/js/stories/icons.ts            | 12 ++++
 6 files changed, 135 insertions(+), 69 deletions(-)
 create mode 100644 resources/js/stories/icons.ts

diff --git a/resources/js/stories/Button.stories.ts b/resources/js/stories/Button.stories.ts
index 44c0985238f..50fc5dd4cc5 100644
--- a/resources/js/stories/Button.stories.ts
+++ b/resources/js/stories/Button.stories.ts
@@ -1,26 +1,62 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Button } from '@ui';
-import { computed } from 'vue';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Button, ButtonGroup} from '@ui';
+import {computed} from 'vue';
+import {icons} from './icons';
 
 const meta = {
     title: 'Components/Button',
     component: Button,
     argTypes: {
-        variant: {
+        as: {
+            control: 'text',
+            description: 'The element or component this component should render as.',
+        },
+        href: { control: 'text' },
+        target: {
+            control: 'text',
+            description: "When `href` is provided, this prop controls the link's `target` attribute.",
+        },
+        icon: {
             control: 'select',
-            options: ['default', 'primary', 'danger', 'filled', 'ghost', 'ghost-pressed', 'subtle', 'pressed'],
+            options: icons,
+            description: 'Icon name. [Browse available icons](/?path=/story/components-icon--all-icons)',
+        },
+        iconAppend: {
+            control: 'select',
+            options: icons,
+            description: 'Icon name. Will display after the label. [Browse available icons](/?path=/story/components-icon--all-icons)',
+        },
+        iconOnly: {
+            control: 'boolean',
+            description: "When `true`, the button's padding will be adjusted to account for no text",
+        },
+        inset: {
+            control: 'boolean',
+            description: 'When using `ghost` or `subtle` button variants, you can use the `inset` prop to remove any invisible padding for better alignment.',
+        },
+        loading: {
+            control: 'boolean',
+            description: 'When `true`, the button shows an animated loading icon.'
+        },
+        round: {
+            control: 'boolean',
+            description: 'When `true`, the button will be rounded.'
         },
         size: {
             control: 'select',
-            options: ['lg', 'base', 'sm', 'xs'],
+            description: 'Controls the size of the button. <br><br> Options: `2xs`, `xs`, `sm`, `base`, `lg`',
+            options: ['2xs', 'xs', 'sm', 'base', 'lg'],
         },
         text: { control: 'text' },
-        icon: { control: 'text' },
-        iconAppend: { control: 'text' },
-        loading: { control: 'boolean' },
-        disabled: { control: 'boolean' },
-        round: { control: 'boolean' },
-        iconOnly: { control: 'boolean' },
+        type: {
+            control: 'select',
+            description: "Unless `href` is provided, this component defaults to a `<button>`. This prop controls the button's `type` attribute.",
+        },
+        variant: {
+            control: 'select',
+            description: 'Controls the appearance of the button. <br><br> Options: `default`, `primary`, `danger`, `filled`, `ghost`, `ghost-pressed`, `subtle`, `pressed`',
+            options: ['default', 'primary', 'danger', 'filled', 'ghost', 'ghost-pressed', 'subtle', 'pressed'],
+        },
     },
 } satisfies Meta<typeof Button>;
 
@@ -269,3 +305,33 @@ export const Inset: Story = {
         `,
     }),
 };
+
+export const ButtonGroups: Story = {
+    args: {
+        text: 'Save & Continue',
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: `
+                    <ButtonGroup>
+                        <Button text="Apply" />
+                        <Button text="Save All" />
+                    </ButtonGroup>
+                `,
+            },
+        },
+    },
+    render: (args) => ({
+        components: { ButtonGroup, Button },
+        setup() {
+            return { args };
+        },
+        template: `
+            <ButtonGroup>
+                <Button text="Apply" />
+                <Button icon="save" text="Save All" />
+            </ButtonGroup>
+        `,
+    }),
+};
\ No newline at end of file
diff --git a/resources/js/stories/Calendar.stories.ts b/resources/js/stories/Calendar.stories.ts
index 1a0867f8461..48c73a6611a 100644
--- a/resources/js/stories/Calendar.stories.ts
+++ b/resources/js/stories/Calendar.stories.ts
@@ -1,32 +1,45 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Calendar, Card } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Calendar, Card} from '@ui';
 
 const meta = {
     title: 'Components/Calendar',
     component: Calendar,
     argTypes: {
-        min: { control: 'text' },
-        max: { control: 'text' },
-        numberOfMonths: { control: 'number' },
-        weekStartsOn: { control: 'number' },
-        weekdayFormat: {
-            control: 'select',
-            options: ['narrow', 'short', 'long'],
+        modelValue: {
+            control: 'text',
+            description: 'The controlled value of the Calendar. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
+        },
+        min: {
+            control: 'text',
+            description: 'The earliest date that can be selected. Dates before this will be disabled. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
+        },
+        max: {
+            control: 'text',
+            description: 'The latest date that can be selected. Dates after this will be disabled. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
+        },
+        components: {
+            control: 'object',
+            description: "If necessary, you can you swap out any of the internal Calendar components by passing an object to this prop.",
+        },
+        numberOfMonths: {
+            control: 'number',
+            description: 'The number of months to display at once.',
         },
-        preventDeselect: { control: 'boolean' },
-        disabled: { control: 'boolean' },
         inline: { control: 'boolean' },
+        'update:modelValue': {
+            description: 'Event handler called when a date is selected. Returns the date as an ISO 8601 date and time string.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' }
+            }
+        }
     },
 } satisfies Meta<typeof Calendar>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const defaultCode = `
-<Card>
-    <Calendar />
-</Card>
-`;
+const defaultCode = `<Calendar />`;
 
 export const _DocsIntro: Story = {
     tags: ['!dev'],
@@ -37,15 +50,11 @@ export const _DocsIntro: Story = {
     },
     render: () => ({
         components: { Calendar, Card },
-        template: defaultCode,
+        template: `<Card>${defaultCode}</Card>`,
     }),
 };
 
-const multipleMonthsCode = `
-<Card>
-    <Calendar :number-of-months="2" />
-</Card>
-`;
+const multipleMonthsCode = `<Calendar :number-of-months="2" />`;
 
 export const _MultipleMonths: Story = {
     tags: ['!dev'],
@@ -56,15 +65,11 @@ export const _MultipleMonths: Story = {
     },
     render: () => ({
         components: { Calendar, Card },
-        template: multipleMonthsCode,
+        template: `<Card>${multipleMonthsCode}</Card>`,
     }),
 };
 
-const weekStartsOnCode = `
-<Card>
-    <Calendar week-starts-on="1" />
-</Card>
-`;
+const weekStartsOnCode = `<Calendar week-starts-on="1" />`;
 
 export const _WeekStartsOn: Story = {
     tags: ['!dev'],
@@ -75,25 +80,6 @@ export const _WeekStartsOn: Story = {
     },
     render: () => ({
         components: { Calendar, Card },
-        template: weekStartsOnCode,
-    }),
-};
-
-const weekdayFormatCode = `
-<Card>
-    <Calendar weekday-format="short" />
-</Card>
-`;
-
-export const _WeekdayFormat: Story = {
-    tags: ['!dev'],
-    parameters: {
-        docs: {
-            source: { code: weekdayFormatCode }
-        }
-    },
-    render: () => ({
-        components: { Calendar, Card },
-        template: weekdayFormatCode,
+        template: `<Card>${weekStartsOnCode}</Card>`,
     }),
 };
diff --git a/resources/js/stories/Card.stories.ts b/resources/js/stories/Card.stories.ts
index de9ec035d6d..959b0182489 100644
--- a/resources/js/stories/Card.stories.ts
+++ b/resources/js/stories/Card.stories.ts
@@ -1,13 +1,17 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Card, CardPanel, Panel, PanelHeader, Heading, Subheading, Input, Button } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Button, Card, CardPanel, Heading, Input, Panel, PanelHeader, Subheading} from '@ui';
 
 const meta = {
     title: 'Components/Card',
     component: Card,
     argTypes: {
-        inset: { control: 'boolean' },
+        inset: {
+            control: 'boolean',
+            description: 'When `true`, the internal padding of the card is removed.',
+        },
         variant: {
             control: 'select',
+            description: 'Controls the appearance of the card. <br><br> Options: `default`, `flat`',
             options: ['default', 'flat'],
         },
     },
diff --git a/resources/js/stories/docs/Button.mdx b/resources/js/stories/docs/Button.mdx
index b9dca050713..e17fba0edc7 100644
--- a/resources/js/stories/docs/Button.mdx
+++ b/resources/js/stories/docs/Button.mdx
@@ -39,5 +39,9 @@ Buttons can be used as links by passing an `href` prop. They will use Inertia to
 When using `ghost` or `subtle` button variants, you can use the `inset` prop to remove any invisible padding for better alignment.
 <Canvas of={ButtonStories.Inset} sourceState={'shown'} />
 
+## Button Groups
+You can combine multiple buttons into a "button group".
+<Canvas of={ButtonStories.ButtonGroups} sourceState={'shown'} />
+
 ## Arguments
 <ArgTypes of={ButtonStories} />
diff --git a/resources/js/stories/docs/Calendar.mdx b/resources/js/stories/docs/Calendar.mdx
index 78c940f2a17..31a4cf7b85e 100644
--- a/resources/js/stories/docs/Calendar.mdx
+++ b/resources/js/stories/docs/Calendar.mdx
@@ -17,11 +17,5 @@ You can pass the `week-starts-on` prop to change the first day of the week.
 The default is `0` (Sunday). Monday is `1`, Tuesday is `2`, etc.
 <Canvas of={CalendarStories._WeekStartsOn} sourceState={'shown'} />
 
-## Weekday Format
-You can pass the `weekday-format` prop to change the format of the weekday names.
-
-The default is `narrow`, `short` is `Mon`, `long` is `Monday`.
-<Canvas of={CalendarStories._WeekdayFormat} sourceState={'shown'} />
-
 ## Arguments
 <ArgTypes of={CalendarStories} />
diff --git a/resources/js/stories/icons.ts b/resources/js/stories/icons.ts
new file mode 100644
index 00000000000..2a10b56603b
--- /dev/null
+++ b/resources/js/stories/icons.ts
@@ -0,0 +1,12 @@
+/**
+ * Storybook icon utilities
+ */
+
+// @ts-ignore - Vite's import.meta.glob is not recognized by TypeScript
+const iconFiles = import.meta.glob('../../svg/icons/*.svg');
+
+export const icons = Object.keys(iconFiles).map((path) => {
+    const parts = path.split('/');
+    const fileName = parts[parts.length - 1];
+    return fileName.replace('.svg', '');
+}).sort();
\ No newline at end of file

From 10d63ffb479650b9dc0f8edc620a541d5d128712 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Wed, 17 Dec 2025 15:32:02 +0000
Subject: [PATCH 02/32] wip

---
 .../js/components/ui/Dropdown/Footer.vue      |  1 +
 .../js/components/ui/Dropdown/Header.vue      |  2 +
 resources/js/components/ui/Dropdown/Item.vue  |  4 +
 resources/js/components/ui/Radio/Group.vue    |  1 +
 resources/js/stories/Badge.stories.ts         | 45 ++++++++--
 resources/js/stories/Button.stories.ts        |  2 +-
 resources/js/stories/Calendar.stories.ts      |  2 +-
 resources/js/stories/Dropdown.stories.ts      | 18 +++-
 resources/js/stories/Heading.stories.ts       | 30 +++++--
 resources/js/stories/Icon.stories.ts          | 25 +++---
 resources/js/stories/Input.stories.ts         | 85 +++++++++++++++----
 resources/js/stories/Popover.stories.ts       | 33 ++++++-
 resources/js/stories/Radio.stories.ts         | 10 +--
 resources/js/stories/Select.stories.ts        | 44 ++++++++--
 resources/js/stories/Separator.stories.ts     |  7 +-
 resources/js/stories/Splitter.stories.ts      |  5 +-
 resources/js/stories/Switch.stories.ts        | 22 +++--
 resources/js/stories/Table.stories.ts         | 11 ++-
 resources/js/stories/Tabs.stories.ts          | 25 +++++-
 resources/js/stories/Textarea.stories.ts      | 31 +++++--
 20 files changed, 320 insertions(+), 83 deletions(-)

diff --git a/resources/js/components/ui/Dropdown/Footer.vue b/resources/js/components/ui/Dropdown/Footer.vue
index 4dcd4d7c131..cb796f81444 100644
--- a/resources/js/components/ui/Dropdown/Footer.vue
+++ b/resources/js/components/ui/Dropdown/Footer.vue
@@ -5,6 +5,7 @@ import Icon from '../Icon/Icon.vue';
 
 defineProps({
     href: { type: String, default: null },
+	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
     text: { type: String, default: null },
 });
diff --git a/resources/js/components/ui/Dropdown/Header.vue b/resources/js/components/ui/Dropdown/Header.vue
index f583c47fdad..1e63d4eae4f 100644
--- a/resources/js/components/ui/Dropdown/Header.vue
+++ b/resources/js/components/ui/Dropdown/Header.vue
@@ -5,7 +5,9 @@ import Icon from '../Icon/Icon.vue';
 import Button from '../Button/Button.vue';
 
 defineProps({
+    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
+    /** Icon name. Will display after the text. [Browse available icons](/?path=/story/components-icon--all-icons) */
     appendIcon: { type: String, default: null },
     appendHref: { type: String, default: null },
     text: { type: String, default: null },
diff --git a/resources/js/components/ui/Dropdown/Item.vue b/resources/js/components/ui/Dropdown/Item.vue
index 9d561dfb4d6..51c8fb3b91e 100644
--- a/resources/js/components/ui/Dropdown/Item.vue
+++ b/resources/js/components/ui/Dropdown/Item.vue
@@ -6,11 +6,15 @@ import { cva } from 'cva';
 import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
+    /** The element or component this component should render as. */
     as: { type: String, default: null },
     href: { type: String, default: null },
+    /** When `href` is provided, this prop controls the link's `target` attribute. */
     target: { type: String, default: '_self' },
+    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
     text: { type: String, default: null },
+    /** Controls the appearance of the dropdown item. Options: `default`, `destructive` */
     variant: { type: String, default: 'default' },
 });
 
diff --git a/resources/js/components/ui/Radio/Group.vue b/resources/js/components/ui/Radio/Group.vue
index 8a98bc5d7ca..113233a1d06 100644
--- a/resources/js/components/ui/Radio/Group.vue
+++ b/resources/js/components/ui/Radio/Group.vue
@@ -4,6 +4,7 @@ import { RadioGroupRoot } from 'reka-ui';
 
 defineProps({
     inline: { type: Boolean, default: false },
+	/** The controlled value of the radio group. */
     modelValue: { type: [String, Number, Boolean], default: null },
     name: { type: String, default: () => useId() },
     required: { type: Boolean, default: false },
diff --git a/resources/js/stories/Badge.stories.ts b/resources/js/stories/Badge.stories.ts
index 8f815308342..b237a2234b0 100644
--- a/resources/js/stories/Badge.stories.ts
+++ b/resources/js/stories/Badge.stories.ts
@@ -1,25 +1,54 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Badge } from '@ui';
-import { computed } from 'vue';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Badge} from '@ui';
+import {computed} from 'vue';
+import {icons} from "@/stories/icons";
 
 const meta = {
     title: 'Components/Badge',
     component: Badge,
     argTypes: {
+        append: {
+            control: 'text',
+            description: 'Appended text'
+        },
+        as: {
+            control: 'text',
+            description: 'The element or component this component should render as.',
+        },
         color: {
             control: 'select',
+            description: 'Controls the color of the badge. <br><br> Options: `default`, `amber`, `black`, `blue`, `cyan`, `emerald`, `fuchsia`, `green`, `indigo`, `lime`, `orange`, `pink`, `purple`, `red`, `rose`, `sky`, `teal`, `violet`, `white`, `yellow`',
             options: ['default', 'amber', 'black', 'blue', 'cyan', 'emerald', 'fuchsia', 'green', 'indigo', 'lime', 'orange', 'pink', 'purple', 'red', 'rose', 'sky', 'teal', 'violet', 'white', 'yellow'],
         },
+        href: { control: 'text' },
+        target: {
+            control: 'text',
+            description: "When `href` is provided, this prop controls the link's `target` attribute.",
+        },
+        icon: {
+            control: 'select',
+            options: icons,
+            description: 'Icon name. [Browse available icons](/?path=/story/components-icon--all-icons)',
+        },
+        iconAppend: {
+            control: 'select',
+            options: icons,
+            description: 'Icon name. Will display after the text. [Browse available icons](/?path=/story/components-icon--all-icons)',
+        },
+        pill: {
+            control: 'boolean',
+            description: 'When `true`, the badge will be displayed as a pill.'
+        },
+        prepend: {
+            control: 'text',
+            description: 'Prepended text',
+        },
         size: {
             control: 'select',
+            description: 'Controls the size of the badge. <br><br> Options: `sm`, `default`, `lg`',
             options: ['sm', 'default', 'lg'],
         },
         text: { control: 'text' },
-        icon: { control: 'text' },
-        iconAppend: { control: 'text' },
-        prepend: { control: 'text' },
-        append: { control: 'text' },
-        pill: { control: 'boolean' },
     },
 } satisfies Meta<typeof Badge>;
 
diff --git a/resources/js/stories/Button.stories.ts b/resources/js/stories/Button.stories.ts
index 50fc5dd4cc5..9d4625b691a 100644
--- a/resources/js/stories/Button.stories.ts
+++ b/resources/js/stories/Button.stories.ts
@@ -24,7 +24,7 @@ const meta = {
         iconAppend: {
             control: 'select',
             options: icons,
-            description: 'Icon name. Will display after the label. [Browse available icons](/?path=/story/components-icon--all-icons)',
+            description: 'Icon name. Will display after the text. [Browse available icons](/?path=/story/components-icon--all-icons)',
         },
         iconOnly: {
             control: 'boolean',
diff --git a/resources/js/stories/Calendar.stories.ts b/resources/js/stories/Calendar.stories.ts
index 48c73a6611a..e376f56446d 100644
--- a/resources/js/stories/Calendar.stories.ts
+++ b/resources/js/stories/Calendar.stories.ts
@@ -7,7 +7,7 @@ const meta = {
     argTypes: {
         modelValue: {
             control: 'text',
-            description: 'The controlled value of the Calendar. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
+            description: 'The controlled value of the calendar. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
         },
         min: {
             control: 'text',
diff --git a/resources/js/stories/Dropdown.stories.ts b/resources/js/stories/Dropdown.stories.ts
index 9818c28fad4..fc12aec345d 100644
--- a/resources/js/stories/Dropdown.stories.ts
+++ b/resources/js/stories/Dropdown.stories.ts
@@ -1,19 +1,31 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Dropdown, DropdownMenu, DropdownItem, DropdownHeader, DropdownFooter, DropdownSeparator, Button } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Button, Dropdown, DropdownFooter, DropdownHeader, DropdownItem, DropdownMenu, DropdownSeparator} from '@ui';
 
 const meta = {
     title: 'Components/Dropdown',
     component: Dropdown,
+    subcomponents: {
+        DropdownMenu,
+        DropdownItem,
+        DropdownHeader,
+        DropdownFooter,
+        DropdownSeparator,
+    },
     argTypes: {
         align: {
             control: 'select',
             options: ['start', 'center', 'end'],
+            description: 'The preferred alignment against the trigger. May change when collisions occur. Options: `start`, `center`, `end`',
+        },
+        offset: {
+            control: 'number',
+            description: 'The distance in pixels from the trigger',
         },
         side: {
             control: 'select',
             options: ['top', 'bottom', 'left', 'right'],
+            description: 'The preferred side of the trigger to render against when open. Options: `top`, `bottom`, `left`, `right`',
         },
-        offset: { control: 'number' },
     },
 } satisfies Meta<typeof Dropdown>;
 
diff --git a/resources/js/stories/Heading.stories.ts b/resources/js/stories/Heading.stories.ts
index 71e29d72aeb..095dc53caa3 100644
--- a/resources/js/stories/Heading.stories.ts
+++ b/resources/js/stories/Heading.stories.ts
@@ -1,18 +1,34 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Heading, Subheading } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Heading, Subheading} from '@ui';
+import {icons} from "@/stories/icons";
 
 const meta = {
     title: 'Components/Heading',
     component: Heading,
+    subcomponents: {
+        Subheading,
+    },
     argTypes: {
-        text: { control: 'text' },
+        href: { control: 'text' },
+        target: {
+            control: 'text',
+            description: "When `href` is provided, this prop controls the link's `target` attribute.",
+        },
+        icon: {
+            control: 'select',
+            options: icons,
+            description: 'Icon name. [Browse available icons](/?path=/story/components-icon--all-icons)',
+        },
+        level: {
+            control: 'number',
+            description: 'Controls the heading level, `h1`, `h2`, etc'
+        },
         size: {
             control: 'select',
-            options: ['default', 'lg', 'xl'],
+            description: 'Controls the size of the heading. <br><br> Options: `base`, `lg`, `xl`, `2xl`',
+            options: ['base', 'lg', 'xl', '2xl'],
         },
-        level: { control: 'text' },
-        icon: { control: 'text' },
-        href: { control: 'text' },
+        text: { control: 'text' },
     },
 } satisfies Meta<typeof Heading>;
 
diff --git a/resources/js/stories/Icon.stories.ts b/resources/js/stories/Icon.stories.ts
index 47a79ae5170..59b51baa307 100644
--- a/resources/js/stories/Icon.stories.ts
+++ b/resources/js/stories/Icon.stories.ts
@@ -1,13 +1,21 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Icon, Input, CardPanel } from '@ui';
-import { ref, computed } from 'vue';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {CardPanel, Icon, Input} from '@ui';
+import {computed, ref} from 'vue';
+import {icons} from "@/stories/icons";
 
 const meta = {
     title: 'Components/Icon',
     component: Icon,
     argTypes: {
-        name: { control: 'text' },
-        set: { control: 'text' },
+        name: {
+            control: 'select',
+            description: 'Icon name',
+            options: icons,
+        },
+        set: {
+            control: 'text',
+            description: 'Name of the icon set.',
+        },
     },
 } satisfies Meta<typeof Icon>;
 
@@ -27,13 +35,6 @@ export const _DocsIntro: Story = {
     },
 };
 
-const iconFiles = import.meta.glob('../../svg/icons/*.svg');
-const icons = Object.keys(iconFiles).map((path) => {
-    const parts = path.split('/');
-    const fileName = parts[parts.length - 1];
-    return fileName.replace('.svg', '');
-}).sort();
-
 export const AllIcons: Story = {
     argTypes: {
         name: { control: { disable: true } },
diff --git a/resources/js/stories/Input.stories.ts b/resources/js/stories/Input.stories.ts
index ca16f006c76..facde1ec72a 100644
--- a/resources/js/stories/Input.stories.ts
+++ b/resources/js/stories/Input.stories.ts
@@ -1,28 +1,83 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Input, Field, Label, Description, Button } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Button, Description, Field, Input, Label} from '@ui';
+import {icons} from "@/stories/icons";
 
 const meta = {
     title: 'Components/Input',
     component: Input,
     argTypes: {
-        type: { control: 'text' },
-        label: { control: 'text' },
+        append: {
+            control: 'text',
+            description: 'Appended text'
+        },
+        badge: { control: 'text' },
+        clearable: { control: 'boolean' },
+        copyable: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        readOnly: { control: 'boolean' },
+        icon: {
+            control: 'select',
+            options: icons,
+            description: 'Icon name. [Browse available icons](/?path=/story/components-icon--all-icons)',
+        },
+        iconAppend: {
+            control: 'select',
+            options: icons,
+            description: 'Icon name. Will display after the text. [Browse available icons](/?path=/story/components-icon--all-icons)',
+        },
+        iconPrepend: {
+            control: 'select',
+            options: icons,
+            description: 'Icon name. Will display before the text. [Browse available icons](/?path=/story/components-icon--all-icons)',
+        },
+        id: { control: 'text' },
+        limit: {
+            control: 'number',
+            description: 'Specify a character limit',
+        },
+        loading: {
+            control: 'boolean',
+            description: 'When `true`, an animated loading indicator will show next to the input.'
+        },
+        modelValue: {
+            control: 'text',
+            description: 'The controlled value of the input.',
+        },
         placeholder: { control: 'text' },
-        icon: { control: 'text' },
-        iconAppend: { control: 'text' },
-        iconPrepend: { control: 'text' },
+        prepend: {
+            control: 'text',
+            description: 'Prepended text',
+        },
+        required: { control: 'boolean' },
         size: {
             control: 'select',
-            options: ['default', 'sm', 'xs'],
+            description: 'Controls the size of the input. <br><br> Options: `xs`, `sm`, `base`',
+            options: ['xs', 'sm', 'base'],
+        },
+        tabindex: { control: 'number' },
+        type: { control: 'text' },
+        variant: {
+            control: 'select',
+            description: 'Controls the appearance of the input. <br><br> Options: `default`, `light`, `ghost`',
+            options: ['default', 'light', 'ghost'],
         },
-        clearable: { control: 'boolean' },
-        copyable: { control: 'boolean' },
         viewable: { control: 'boolean' },
-        readonly: { control: 'boolean' },
-        disabled: { control: 'boolean' },
-        prepend: { control: 'text' },
-        append: { control: 'text' },
-        limit: { control: 'number' },
+        focus: { control: 'boolean' },
+        inputAttrs: {
+            control: 'object',
+            description: 'Object of HTML attributes to be applied to the underlying `<input>`'
+        },
+        inputClass: {
+            control: 'text',
+            description: 'Classes to be applied to the underlying `<input>`'
+        },
+        'update:modelValue': {
+            description: 'Event handler called when the input is updated.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' }
+            }
+        }
     },
 } satisfies Meta<typeof Input>;
 
diff --git a/resources/js/stories/Popover.stories.ts b/resources/js/stories/Popover.stories.ts
index 7d6376b4181..be312ae5e0c 100644
--- a/resources/js/stories/Popover.stories.ts
+++ b/resources/js/stories/Popover.stories.ts
@@ -1,14 +1,43 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Popover, Button, Heading, Textarea } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Button, Heading, Popover, Textarea} from '@ui';
 
 const meta = {
     title: 'Components/Popover',
     component: Popover,
     argTypes: {
+        align: {
+            control: 'select',
+            options: ['start', 'center', 'end'],
+            description: 'The preferred alignment against the trigger. May change when collisions occur. Options: `start`, `center`, `end`',
+        },
+        arrow: {
+            control: 'boolean',
+            description: 'When `true`, an arrow is displayed near the trigger.'
+        },
+        inset: {
+            control: 'boolean',
+            description: 'When `true`, the internal padding of the popover is removed.',
+        },
+        offset: {
+            control: 'number',
+            description: 'The distance in pixels from the trigger',
+        },
         side: {
             control: 'select',
             options: ['top', 'bottom', 'left', 'right'],
+            description: 'The preferred side of the trigger to render against when open. Options: `top`, `bottom`, `left`, `right`',
+        },
+        open: {
+            control: 'boolean',
+            description: 'The controlled open state of the popover.',
         },
+        'update:open': {
+            description: 'Event handler called when the open state of the popover changes.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' }
+            }
+        }
     },
 } satisfies Meta<typeof Popover>;
 
diff --git a/resources/js/stories/Radio.stories.ts b/resources/js/stories/Radio.stories.ts
index e1ff103cc1f..f7e4d8c59b9 100644
--- a/resources/js/stories/Radio.stories.ts
+++ b/resources/js/stories/Radio.stories.ts
@@ -1,15 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Radio, RadioGroup } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Radio, RadioGroup} from '@ui';
 
 const meta = {
     title: 'Components/Radio',
     component: Radio,
+    subcomponents: { RadioGroup },
     argTypes: {
-        label: { control: 'text' },
         description: { control: 'text' },
-        value: { control: 'text' },
+        label: { control: 'text' },
         disabled: { control: 'boolean' },
-        checked: { control: 'boolean' },
+        value: { control: 'text' },
     },
 } satisfies Meta<typeof Radio>;
 
diff --git a/resources/js/stories/Select.stories.ts b/resources/js/stories/Select.stories.ts
index 0c265705c24..8ce0cebcaca 100644
--- a/resources/js/stories/Select.stories.ts
+++ b/resources/js/stories/Select.stories.ts
@@ -1,22 +1,52 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Select } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Select} from '@ui';
+import {icons} from "@/stories/icons";
 
 const meta = {
     title: 'Components/Select',
     component: Select,
     argTypes: {
-        label: { control: 'text' },
+        clearable: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        icon: {
+            control: 'select',
+            options: icons,
+            description: 'Icon name. [Browse available icons](/?path=/story/components-icon--all-icons)',
+        },
+        modelValue: {
+            control: 'text',
+            description: 'The controlled value of the select.',
+        },
+        optionLabel: {
+            control: 'text',
+            description: "Key of the option's label in the option's object."
+        },
+        options: {
+            description: 'Array of option objects',
+        },
+        optionValue: {
+            control: 'text',
+            description: "Key of the option's value in the option's object."
+        },
+        placeholder: { control: 'text' },
+        readonly: { control: 'boolean' },
         size: {
             control: 'select',
-            options: ['default', 'sm', 'xs'],
+            description: 'Controls the size of the select. <br><br> Options: `xs`, `sm`, `base`, `lg`, `xl`',
+            options: ['xs', 'sm', 'base', 'lg', 'xl'],
         },
         variant: {
             control: 'select',
+            description: 'Controls the appearance of the select. <br><br> Options: `default`, `filled`, `ghost`, `subtle`',
             options: ['default', 'filled', 'ghost', 'subtle'],
         },
-        clearable: { control: 'boolean' },
-        icon: { control: 'text' },
-        disabled: { control: 'boolean' },
+        'update:modelValue': {
+            description: 'Event handler called when the selected option changes.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' }
+            }
+        }
     },
 } satisfies Meta<typeof Select>;
 
diff --git a/resources/js/stories/Separator.stories.ts b/resources/js/stories/Separator.stories.ts
index b57f8dc3f12..bb0435b2d8a 100644
--- a/resources/js/stories/Separator.stories.ts
+++ b/resources/js/stories/Separator.stories.ts
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Separator } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Separator} from '@ui';
 
 const meta = {
     title: 'Components/Separator',
@@ -8,7 +8,8 @@ const meta = {
         text: { control: 'text' },
         variant: {
             control: 'select',
-            options: ['default', 'dots'],
+            description: 'Controls the appearance of the separator. <br><br> Options: `line`, `dots`',
+            options: ['line', 'dots'],
         },
         vertical: { control: 'boolean' },
     },
diff --git a/resources/js/stories/Splitter.stories.ts b/resources/js/stories/Splitter.stories.ts
index 1ca3b4e13e6..97fd3e14c3d 100644
--- a/resources/js/stories/Splitter.stories.ts
+++ b/resources/js/stories/Splitter.stories.ts
@@ -1,9 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {SplitterGroup, SplitterPanel, SplitterResizeHandle} from '@ui';
 
 const meta = {
     title: 'Components/Splitter',
     component: SplitterGroup,
+    subcomponents: { SplitterPanel },
     argTypes: {
         direction: {
             control: 'select',
diff --git a/resources/js/stories/Switch.stories.ts b/resources/js/stories/Switch.stories.ts
index 4f8a07181e4..4d4e3d32a0f 100644
--- a/resources/js/stories/Switch.stories.ts
+++ b/resources/js/stories/Switch.stories.ts
@@ -1,16 +1,28 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Switch } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Switch} from '@ui';
 
 const meta = {
     title: 'Components/Switch',
     component: Switch,
     argTypes: {
+        required: { control: 'boolean' },
+        id: { control: 'text' },
+        modelValue: {
+            control: 'text',
+            description: 'The controlled value of the switch.',
+        },
         size: {
             control: 'select',
-            options: ['lg', 'default', 'sm', 'xs'],
+            description: 'Controls the size of the switch. <br><br> Options: `xs`, `sm`, `base`, `lg`',
+            options: ['xs', 'sm', 'base', 'lg'],
         },
-        disabled: { control: 'boolean' },
-        checked: { control: 'boolean' },
+        'update:modelValue': {
+            description: 'Event handler called when the value changes.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' }
+            }
+        }
     },
 } satisfies Meta<typeof Switch>;
 
diff --git a/resources/js/stories/Table.stories.ts b/resources/js/stories/Table.stories.ts
index 1788607ee1e..e333395619c 100644
--- a/resources/js/stories/Table.stories.ts
+++ b/resources/js/stories/Table.stories.ts
@@ -1,9 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Table, TableColumns, TableColumn, TableRows, TableRow, TableCell, Badge } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Badge, Table, TableCell, TableColumn, TableColumns, TableRow, TableRows} from '@ui';
 
 const meta = {
     title: 'Components/Table',
     component: Table,
+    subcomponents: {
+        TableColumns,
+        TableColumn,
+        TableRows,
+        TableRow,
+        TableCell,
+    },
     argTypes: {},
 } satisfies Meta<typeof Table>;
 
diff --git a/resources/js/stories/Tabs.stories.ts b/resources/js/stories/Tabs.stories.ts
index e45a777982e..7e513be6acd 100644
--- a/resources/js/stories/Tabs.stories.ts
+++ b/resources/js/stories/Tabs.stories.ts
@@ -1,11 +1,30 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Tabs, TabList, TabTrigger, TabContent } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {TabContent, TabList, Tabs, TabTrigger} from '@ui';
 
 const meta = {
     title: 'Components/Tabs',
     component: Tabs,
+    subcomponents: {
+        TabList,
+        TabTrigger,
+        TabContent,
+    },
     argTypes: {
-        defaultTab: { control: 'text' },
+        modelValue: {
+            control: 'text',
+            description: 'The controlled value of the tabs.',
+        },
+        unmountOnHide: {
+            control: 'boolean',
+            description: 'When `true`, the element will be unmounted on closed state.',
+        },
+        'update:modelValue': {
+            description: 'Event handler called when the tab changes.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' }
+            }
+        }
     },
 } satisfies Meta<typeof Tabs>;
 
diff --git a/resources/js/stories/Textarea.stories.ts b/resources/js/stories/Textarea.stories.ts
index 1ce17d77698..5ea4cf6d3a6 100644
--- a/resources/js/stories/Textarea.stories.ts
+++ b/resources/js/stories/Textarea.stories.ts
@@ -1,18 +1,35 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Textarea } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Textarea} from '@ui';
 
 const meta = {
     title: 'Components/Textarea',
     component: Textarea,
     argTypes: {
-        label: { control: 'text' },
-        placeholder: { control: 'text' },
-        disabled: { control: 'boolean' },
         elastic: { control: 'boolean' },
-        rows: { control: 'number' },
+        disabled: { control: 'boolean' },
+        id: { control: 'text' },
+        readOnly: { control: 'boolean' },
+        required: { control: 'boolean' },
         resize: {
             control: 'select',
-            options: ['none', 'vertical', 'horizontal', 'both'],
+            description: 'Determines how (and if) the textarea should be resized. <br><br> Options: `both`, `horizontal`, `vertical`, `none`',
+            options: ['both', 'horizontal', 'vertical', 'none'],
+        },
+        rows: { control: 'number' },
+        modelValue: {
+            control: 'text',
+            description: 'The controlled value of the textarea.',
+        },
+        limit: {
+            control: 'number',
+            description: 'Specify a character limit',
+        },
+        'update:modelValue': {
+            description: 'Event handler called when the textarea is updated.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' }
+            }
         },
     },
 } satisfies Meta<typeof Textarea>;

From 7e4ef1c0c269dfec92bbdb7c397acd8f1aa8f83a Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Wed, 17 Dec 2025 16:27:33 +0000
Subject: [PATCH 03/32] wip

---
 .storybook/preview.ts                       | 29 ++++++++---
 resources/js/stories/Avatar.stories.ts      | 40 +++++++++++++++
 resources/js/stories/DocsCallout.stories.ts | 54 +++++++++++++++++++++
 resources/js/stories/docs/Avatar.mdx        | 14 ++++++
 resources/js/stories/docs/DocsCallout.mdx   | 15 ++++++
 5 files changed, 146 insertions(+), 6 deletions(-)
 create mode 100644 resources/js/stories/Avatar.stories.ts
 create mode 100644 resources/js/stories/DocsCallout.stories.ts
 create mode 100644 resources/js/stories/docs/Avatar.mdx
 create mode 100644 resources/js/stories/docs/DocsCallout.mdx

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index e82412c2a70..9984da0f612 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,11 +1,11 @@
-import type { Preview } from '@storybook/vue3-vite';
-import { setup } from '@storybook/vue3';
-import { create as createTheme } from 'storybook/theming';
-import { router } from '@inertiajs/vue3';
-import { action } from 'storybook/actions';
+import type {Preview} from '@storybook/vue3-vite';
+import {setup} from '@storybook/vue3';
+import {create as createTheme} from 'storybook/theming';
+import {router} from '@inertiajs/vue3';
+import {action} from 'storybook/actions';
 import './storybook.css';
 import './theme.css';
-import { translate } from '@/translations/translator';
+import {translate} from '@/translations/translator';
 import registerUiComponents from '@/bootstrap/ui';
 import DateFormatter from '@/components/DateFormatter';
 import cleanCodeSnippet from './clean-code-snippet';
@@ -18,6 +18,22 @@ router.on('before', (event) => {
 
 setup(async (app) => {
   window.__ = translate;
+  window.Statamic = {
+      $config: {
+          get(key) {
+              const config = {
+                  linkToDocs: true,
+              };
+
+              return config[key] ?? null;
+          }
+      },
+      $commandPalette: {
+          add(command) {
+              //
+          }
+      }
+  };
   app.config.globalProperties.__ = translate;
   app.config.globalProperties.$date = new DateFormatter;
   await registerUiComponents(app);
@@ -55,6 +71,7 @@ const preview: Preview = {
                     '*',
                     'Components'
                 ],
+                method: 'alphabetical',
             },
         },
     },
diff --git a/resources/js/stories/Avatar.stories.ts b/resources/js/stories/Avatar.stories.ts
new file mode 100644
index 00000000000..4a1aae4d681
--- /dev/null
+++ b/resources/js/stories/Avatar.stories.ts
@@ -0,0 +1,40 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Avatar} from '@ui';
+
+const meta = {
+    title: 'Components/Avatar',
+    component: Avatar,
+    argTypes: {
+        user: {
+            control: 'object',
+            description: 'Object with optional properties: `name`, `initials`, `avatar`',
+        },
+    },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const introCode = `
+<Avatar :user="{ name: 'John Doe', avatar: 'https://i.pravatar.cc/150?img=1' }" />
+<Avatar :user="{ name: 'Jane Smith' }" />
+<Avatar :user="{ name: 'Bob Johnson' }" />
+<Avatar :user="{ name: 'David Michael Hasselhoff', initials: 'DMH' }" />
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: introCode }
+        }
+    },
+    render: () => ({
+        components: { Avatar },
+        template: `
+            <div class="flex gap-2">
+                ${introCode}
+            </div>
+        `,
+    }),
+};
\ No newline at end of file
diff --git a/resources/js/stories/DocsCallout.stories.ts b/resources/js/stories/DocsCallout.stories.ts
new file mode 100644
index 00000000000..27660c45143
--- /dev/null
+++ b/resources/js/stories/DocsCallout.stories.ts
@@ -0,0 +1,54 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {DocsCallout} from '@ui';
+
+const meta = {
+    title: 'Components/DocsCallout',
+    component: DocsCallout,
+    argTypes: {
+        topic: {
+            control: 'text',
+            description: 'Topic of the documentation you\'re linking to.'
+        },
+        url: {
+            control: 'text',
+            description: 'The URL to link to. Can be a full URL or a relative path that will be prepended with `https://statamic.dev/`',
+        },
+    },
+} satisfies Meta<typeof DocsCallout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<DocsCallout topic="Blueprints" url="content-modeling/blueprints" />
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { DocsCallout },
+        template: defaultCode,
+    }),
+};
+
+const thirdPartyCode = `
+<DocsCallout topic="SEO Pro" url="https://github.com/statamic/seo-pro" />
+`;
+
+export const _ThirdParty: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: thirdPartyCode }
+        }
+    },
+    render: () => ({
+        components: { DocsCallout },
+        template: thirdPartyCode,
+    }),
+};
diff --git a/resources/js/stories/docs/Avatar.mdx b/resources/js/stories/docs/Avatar.mdx
new file mode 100644
index 00000000000..eb828575b37
--- /dev/null
+++ b/resources/js/stories/docs/Avatar.mdx
@@ -0,0 +1,14 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as AvatarStories from '../Avatar.stories';
+
+<Meta of={AvatarStories} />
+
+# Avatar
+Avatars display user profile images or generated initials with beautiful mesh gradient backgrounds.
+
+<Canvas of={AvatarStories._DocsIntro} sourceState={'shown'} />
+
+The `Avatar` component will use whatever information you pass via the `user` prop to display the user's avatar.
+
+## Arguments
+<ArgTypes of={AvatarStories} />
diff --git a/resources/js/stories/docs/DocsCallout.mdx b/resources/js/stories/docs/DocsCallout.mdx
new file mode 100644
index 00000000000..171143c9082
--- /dev/null
+++ b/resources/js/stories/docs/DocsCallout.mdx
@@ -0,0 +1,15 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as DocsCalloutStories from '../DocsCallout.stories';
+
+<Meta of={DocsCalloutStories} />
+
+# DocsCallout
+A callout component linking to the Statamic Documentation. Displays as a badge encouraging users to learn more about a specific topic by visiting the relevant page on the docs.
+<Canvas of={DocsCalloutStories._DocsIntro} sourceState={'shown'} />
+
+## Third-party documentation
+The `DocsCallout` component will prepend `https://statamic.dev/` when you provide a relative URL. You can link to your own documentation site by providing an absolute URL:
+<Canvas of={DocsCalloutStories._ThirdParty} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={DocsCalloutStories} />

From d7d0d1f5487e35ebbbc7069fa3ca620df40968be Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Wed, 17 Dec 2025 17:37:32 +0000
Subject: [PATCH 04/32] wip

---
 .storybook/preview.ts                        |  23 ++-
 .storybook/theme.css                         |   1 +
 resources/js/stories/CodeEditor.stories.ts   | 187 +++++++++++++++++
 resources/js/stories/Editable.stories.ts     | 205 +++++++++++++++++++
 resources/js/stories/ErrorMessage.stories.ts |  52 +++++
 resources/js/stories/Modal.stories.ts        |   9 +-
 resources/js/stories/docs/CodeEditor.mdx     |  23 +++
 resources/js/stories/docs/Editable.mdx       |  27 +++
 resources/js/stories/docs/ErrorMessage.mdx   |  15 ++
 9 files changed, 537 insertions(+), 5 deletions(-)
 create mode 100644 resources/js/stories/CodeEditor.stories.ts
 create mode 100644 resources/js/stories/Editable.stories.ts
 create mode 100644 resources/js/stories/ErrorMessage.stories.ts
 create mode 100644 resources/js/stories/docs/CodeEditor.mdx
 create mode 100644 resources/js/stories/docs/Editable.mdx
 create mode 100644 resources/js/stories/docs/ErrorMessage.mdx

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 9984da0f612..2932e5de64d 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -9,6 +9,13 @@ import {translate} from '@/translations/translator';
 import registerUiComponents from '@/bootstrap/ui';
 import DateFormatter from '@/components/DateFormatter';
 import cleanCodeSnippet from './clean-code-snippet';
+import PortalVue from 'portal-vue';
+import FullscreenHeader from '@/components/publish/FullscreenHeader.vue';
+import Portals from '@/components/portals/Portals.js';
+import Portal from '@/components/portals/Portal.vue';
+import PortalTargets from '@/components/portals/PortalTargets.vue';
+import Stacks from '@/components/ui/Stack/Stacks.js';
+import {markRaw} from 'vue';
 
 // Intercept Inertia navigation and log to Actions tab.
 router.on('before', (event) => {
@@ -16,8 +23,12 @@ router.on('before', (event) => {
   return false;
 });
 
+const portals = markRaw(new Portals());
+const stacks = new Stacks(portals);
+
 setup(async (app) => {
   window.__ = translate;
+
   window.Statamic = {
       $config: {
           get(key) {
@@ -32,10 +43,20 @@ setup(async (app) => {
           add(command) {
               //
           }
-      }
+      },
   };
+
   app.config.globalProperties.__ = translate;
   app.config.globalProperties.$date = new DateFormatter;
+  app.config.globalProperties.$portals = portals;
+  app.config.globalProperties.$stacks = stacks;
+
+  app.use(PortalVue, { portalName: 'v-portal' });
+
+  app.component('portal', Portal);
+  app.component('PortalTargets', PortalTargets);
+  app.component('publish-field-fullscreen-header', FullscreenHeader);
+
   await registerUiComponents(app);
 });
 
diff --git a/.storybook/theme.css b/.storybook/theme.css
index 7ad25f68a0e..d3e3ab47cd9 100644
--- a/.storybook/theme.css
+++ b/.storybook/theme.css
@@ -40,3 +40,4 @@ manually copy them here.
         --theme-color-ui-accent-text: oklch(0.673 0.182 276.935);
     }
 }
+
diff --git a/resources/js/stories/CodeEditor.stories.ts b/resources/js/stories/CodeEditor.stories.ts
new file mode 100644
index 00000000000..20f9de37a87
--- /dev/null
+++ b/resources/js/stories/CodeEditor.stories.ts
@@ -0,0 +1,187 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {CodeEditor} from '@ui';
+import {ref} from 'vue';
+
+const meta = {
+    title: 'Components/CodeEditor',
+    component: CodeEditor,
+    argTypes: {
+        allowModeSelection: {
+            control: 'boolean',
+            description: 'When `true`, displays a mode selector dropdown.',
+        },
+        disabled: { control: 'boolean' },
+        indentType: {
+            control: 'select',
+            description: 'Controls whether to indent with tabs or spaces.',
+            options: ['tabs', 'spaces'],
+        },
+        keyMap: {
+            control: 'select',
+            description: 'Keyboard mapping for the editor.',
+            options: ['sublime', 'vim'],
+        },
+        lineNumbers: {
+            control: 'boolean',
+            description: 'When `true`, line numbers are displayed.',
+        },
+        lineWrapping: {
+            control: 'boolean',
+            description: 'When `true`, long lines will wrap.',
+        },
+        mode: {
+            control: 'select',
+            description: 'The syntax highlighting mode. <br><br> Options: `clike`, `css`, `diff`, `go`, `haml`, `handlebars`, `htmlmixed`, `less`, `markdown`, `gfm`, `nginx`, `text/x-java`, `javascript`, `jsx`, `text/x-objectivec`, `php`, `python`, `ruby`, `scss`, `shell`, `sql`, `twig`, `vue`, `xml`, `yaml-frontmatter`',
+            options: ['clike', 'css', 'diff', 'go', 'haml', 'handlebars', 'htmlmixed', 'less', 'markdown', 'gfm', 'nginx', 'text/x-java', 'javascript', 'jsx', 'text/x-objectivec', 'php', 'python', 'ruby', 'scss', 'shell', 'sql', 'twig', 'vue', 'xml', 'yaml-frontmatter'],
+        },
+        modelValue: {
+            control: 'text',
+            description: 'The controlled code editor value.',
+        },
+        readOnly: { control: 'boolean' },
+        showModeLabel: {
+            control: 'boolean',
+            description: 'When `true`, displays the current mode label.',
+        },
+        tabSize: {
+            control: 'number',
+            description: 'The width of a tab character.',
+        },
+        colorMode: {
+            control: 'select',
+            description: 'Theme of the code editor. Options: `system`, `light`, `dark`',
+            options: ['system', 'light', 'dark'],
+        },
+        title: {
+            control: 'text',
+            description: 'Title displayed in fullscreen mode.',
+        },
+        'update:mode': {
+            description: 'Event handler called when the syntax highlighting mode changes.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' }
+            }
+        },
+        'update:modelValue': {
+            description: 'Event handler called when the code editor value changes.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' }
+            }
+        },
+    },
+} satisfies Meta<typeof CodeEditor>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<CodeEditor
+    mode="javascript"
+    v-model="code"
+/>
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { CodeEditor },
+        setup() {
+            const code = ref('function hello() {\n    console.log("Hello, world!");\n}');
+            return { code };
+        },
+        template: `<CodeEditor mode="javascript" v-model="code" /><PortalTargets />`,
+    }),
+};
+
+const modesCode = `
+<div class="space-y-4">
+    <CodeEditor mode="javascript" v-model="jsCode" />
+    <CodeEditor mode="php" v-model="phpCode" />
+    <CodeEditor mode="yaml" v-model="yamlCode" />
+</div>
+`;
+
+export const _Modes: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: modesCode }
+        }
+    },
+    render: () => ({
+        components: { CodeEditor },
+        setup() {
+            const jsCode = ref('const greeting = "Hello";');
+            const phpCode = ref('<?php\n$greeting = "Hello";\necho $greeting;');
+            const yamlCode = ref('title: My Site\nurl: https://example.com');
+            return { jsCode, phpCode, yamlCode };
+        },
+        template: `
+            <div class="space-y-4">
+                <CodeEditor mode="javascript" v-model="jsCode" />
+                <CodeEditor mode="php" v-model="phpCode" />
+                <CodeEditor mode="yaml" v-model="yamlCode" />
+            </div>
+            <PortalTargets />
+        `,
+    }),
+};
+
+const modeSelectionCode = `
+<CodeEditor
+    v-model="code"
+    :mode="mode"
+    :allow-mode-selection="false"
+    @update:mode="mode = $event"
+/>
+`;
+
+export const _ModeSelection: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: modeSelectionCode }
+        }
+    },
+    render: () => ({
+        components: { CodeEditor },
+        setup() {
+            const code = ref('console.log("Hello");');
+            const mode = ref('javascript');
+            return { code, mode };
+        },
+        template: `<CodeEditor v-model="code" :mode="mode" allow-mode-selection @update:mode="mode = $event" /><PortalTargets />`,
+    }),
+};
+
+const noLineNumbersCode = `
+<CodeEditor
+    mode="markdown"
+    v-model="markdown"
+    :line-numbers="false"
+/>
+`;
+
+export const _NoLineNumbers: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: noLineNumbersCode }
+        }
+    },
+    render: () => ({
+        components: { CodeEditor },
+        setup() {
+            const markdown = ref('# Hello\n\nThis is a markdown editor without line numbers.');
+            return { markdown };
+        },
+        template: `<CodeEditor mode="markdown" v-model="markdown" :line-numbers="false" /><PortalTargets />`,
+    }),
+};
diff --git a/resources/js/stories/Editable.stories.ts b/resources/js/stories/Editable.stories.ts
new file mode 100644
index 00000000000..44c0702fe71
--- /dev/null
+++ b/resources/js/stories/Editable.stories.ts
@@ -0,0 +1,205 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Editable} from '@ui';
+import {ref} from 'vue';
+
+const meta = {
+    title: 'Components/Editable',
+    component: Editable,
+    argTypes: {
+        modelValue: {
+            control: 'text',
+            description: 'The controlled value of the editable text.',
+        },
+        startWithEditMode: {
+            control: 'boolean',
+            description: 'When `true`, the input will be automatically focused when the component mounts.',
+        },
+        submitMode: {
+            control: 'select',
+            description: 'Controls when the edit is submitted. Options: `blur`, `none` `enter`, `both`',
+            options: ['blur', 'none', 'enter', 'both'],
+        },
+        placeholder: { control: 'text' },
+        'update:modelValue': {
+            description: 'Event handler called when the text is updated.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' }
+            }
+        },
+        'cancel': {
+            description: 'Event handler called when the edit is cancelled.',
+            table: {
+                category: 'events',
+                type: { summary: '() => void' }
+            }
+        },
+        'submit': {
+            description: 'Event handler called when the edit is submitted.',
+            table: {
+                category: 'events',
+                type: { summary: '() => void' }
+            }
+        },
+        'edit': {
+            description: 'Event handler called when the user starts editing the text.',
+            table: {
+                category: 'events',
+                type: { summary: '() => void' }
+            }
+        },
+    },
+} satisfies Meta<typeof Editable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<Editable v-model="text" placeholder="Click to edit..." />
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { Editable },
+        setup() {
+            const text = ref('Click me to edit');
+            return { text };
+        },
+        template: `<Editable v-model="text" placeholder="Click to edit..." />`,
+    }),
+};
+
+const startWithEditModeCode = `
+<Editable
+    v-model="text"
+    start-with-edit-mode
+    placeholder="Start typing..."
+/>
+`;
+
+export const _StartWithEditMode: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: startWithEditModeCode }
+        }
+    },
+    render: () => ({
+        components: { Editable },
+        setup() {
+            const text = ref('');
+            return { text };
+        },
+        template: `<Editable v-model="text" start-with-edit-mode placeholder="Start typing..." />`,
+    }),
+};
+
+const submitModesCode = `
+<div class="space-y-4">
+    <div>
+        <div class="text-sm text-gray-600 mb-1">Submit on blur:</div>
+        <Editable v-model="text1" submit-mode="blur" />
+    </div>
+    <div>
+        <div class="text-sm text-gray-600 mb-1">Submit on enter:</div>
+        <Editable v-model="text2" submit-mode="enter" />
+    </div>
+    <div>
+        <div class="text-sm text-gray-600 mb-1">Submit on both:</div>
+        <Editable v-model="text3" submit-mode="both" />
+    </div>
+</div>
+`;
+
+export const _SubmitModes: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: submitModesCode }
+        }
+    },
+    render: () => ({
+        components: { Editable },
+        setup() {
+            const text1 = ref('Click away to save');
+            const text2 = ref('Press Enter to save');
+            const text3 = ref('Click away or press Enter');
+            return { text1, text2, text3 };
+        },
+        template: `
+            <div class="space-y-4">
+                <div>
+                    <div class="text-sm text-gray-600 mb-1">Submit on blur:</div>
+                    <Editable v-model="text1" submit-mode="blur" />
+                </div>
+                <div>
+                    <div class="text-sm text-gray-600 mb-1">Submit on enter:</div>
+                    <Editable v-model="text2" submit-mode="enter" />
+                </div>
+                <div>
+                    <div class="text-sm text-gray-600 mb-1">Submit on both:</div>
+                    <Editable v-model="text3" submit-mode="both" />
+                </div>
+            </div>
+        `,
+    }),
+};
+
+const eventsCode = `
+<Editable
+    v-model="text"
+    @submit="onSubmit"
+    @cancel="onCancel"
+    @edit="onEdit"
+/>
+`;
+
+export const _Events: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: eventsCode }
+        }
+    },
+    render: () => ({
+        components: { Editable },
+        setup() {
+            const text = ref('Edit me and watch the console');
+            const onSubmit = (value) => console.log('Submitted:', value);
+            const onCancel = () => console.log('Cancelled');
+            const onEdit = (value) => console.log('Edit started:', value);
+            return { text, onSubmit, onCancel, onEdit };
+        },
+        template: `<Editable v-model="text" @submit="onSubmit" @cancel="onCancel" @edit="onEdit" />`,
+    }),
+};
+
+const customPlaceholderCode = `
+<Editable
+    v-model="text"
+    placeholder="Enter your name..."
+/>
+`;
+
+export const _CustomPlaceholder: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: customPlaceholderCode }
+        }
+    },
+    render: () => ({
+        components: { Editable },
+        setup() {
+            const text = ref('');
+            return { text };
+        },
+        template: `<Editable v-model="text" placeholder="Enter your name..." />`,
+    }),
+};
diff --git a/resources/js/stories/ErrorMessage.stories.ts b/resources/js/stories/ErrorMessage.stories.ts
new file mode 100644
index 00000000000..27378e83984
--- /dev/null
+++ b/resources/js/stories/ErrorMessage.stories.ts
@@ -0,0 +1,52 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {ErrorMessage} from '@ui';
+
+const meta = {
+    title: 'Components/ErrorMessage',
+    component: ErrorMessage,
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'The error message to display.',
+        },
+    },
+} satisfies Meta<typeof ErrorMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<ErrorMessage text="This field is required." />
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { ErrorMessage },
+        template: defaultCode,
+    }),
+};
+
+const withSlotCode = `
+<ErrorMessage>
+    The file size exceeds the maximum allowed. <a href="#">Learn more</a>
+</ErrorMessage>
+`;
+
+export const _WithSlot: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withSlotCode }
+        }
+    },
+    render: () => ({
+        components: { ErrorMessage },
+        template: withSlotCode,
+    }),
+};
\ No newline at end of file
diff --git a/resources/js/stories/Modal.stories.ts b/resources/js/stories/Modal.stories.ts
index f4eca53718b..0567de7b51e 100644
--- a/resources/js/stories/Modal.stories.ts
+++ b/resources/js/stories/Modal.stories.ts
@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Modal, ModalClose, ModalTitle, Button, Field, Input } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Button, Field, Input, Modal, ModalClose, ModalTitle} from '@ui';
+import PortalTargets from "@/components/portals/PortalTargets.vue";
 
 const meta = {
     title: 'Components/Modal',
@@ -32,8 +33,8 @@ export const _DocsIntro: Story = {
         }
     },
     render: () => ({
-        components: { Modal, Button },
-        template: defaultCode,
+        components: { Modal, Button, PortalTargets },
+        template: `<div>${defaultCode}</div><PortalTargets />`,
     }),
 };
 
diff --git a/resources/js/stories/docs/CodeEditor.mdx b/resources/js/stories/docs/CodeEditor.mdx
new file mode 100644
index 00000000000..75cbfec8d3f
--- /dev/null
+++ b/resources/js/stories/docs/CodeEditor.mdx
@@ -0,0 +1,23 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as CodeEditorStories from '../CodeEditor.stories';
+
+<Meta of={CodeEditorStories} />
+
+# CodeEditor
+A powerful code editor component powered by CodeMirror. Supports syntax highlighting for multiple languages, line numbers, line wrapping, and keyboard shortcuts.
+<Canvas of={CodeEditorStories._DocsIntro} sourceState={'shown'} />
+
+## Modes
+The CodeEditor supports many programming languages and markup formats. Set the `mode` prop to enable syntax highlighting for different languages.
+<Canvas of={CodeEditorStories._Modes} sourceState={'shown'} />
+
+## Mode Selection
+Disable the `allow-mode-selection` prop to prevent users from switching between modes.
+<Canvas of={CodeEditorStories._ModeSelection} sourceState={'shown'} />
+
+## Without Line Numbers
+Disable line numbers by setting the `line-numbers` prop to `false`. This can be useful for simpler code snippets or when embedding code in constrained spaces.
+<Canvas of={CodeEditorStories._NoLineNumbers} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={CodeEditorStories} />
diff --git a/resources/js/stories/docs/Editable.mdx b/resources/js/stories/docs/Editable.mdx
new file mode 100644
index 00000000000..feaec480d4c
--- /dev/null
+++ b/resources/js/stories/docs/Editable.mdx
@@ -0,0 +1,27 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as EditableStories from '../Editable.stories';
+
+<Meta of={EditableStories} />
+
+# Editable
+An inline editable text component that allows users to click to edit text in place. Perfect for titles, labels, and other short text fields that need quick editing.
+<Canvas of={EditableStories._DocsIntro} sourceState={'shown'} />
+
+## Start With Edit Mode
+Set `start-with-edit-mode` to `true` to automatically focus the input when the component mounts.
+<Canvas of={EditableStories._StartWithEditMode} sourceState={'shown'} />
+
+## Submit Modes
+Control when edits are saved using the `submit-mode` prop. Choose from `blur` (save when clicking away), `enter` (save when pressing Enter), or `both`.
+<Canvas of={EditableStories._SubmitModes} sourceState={'shown'} />
+
+## Events
+Listen to `@submit`, `@cancel`, and `@edit` events to respond to user interactions.
+<Canvas of={EditableStories._Events} sourceState={'shown'} />
+
+## Custom Placeholder
+Provide helpful context with a custom placeholder that appears when the value is empty.
+<Canvas of={EditableStories._CustomPlaceholder} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={EditableStories} />
diff --git a/resources/js/stories/docs/ErrorMessage.mdx b/resources/js/stories/docs/ErrorMessage.mdx
new file mode 100644
index 00000000000..514c6c27915
--- /dev/null
+++ b/resources/js/stories/docs/ErrorMessage.mdx
@@ -0,0 +1,15 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as ErrorMessageStories from '../ErrorMessage.stories';
+
+<Meta of={ErrorMessageStories} />
+
+# ErrorMessage
+Display validation errors and other error messages with consistent styling. Error messages are styled in red with proper text formatting and support for links.
+<Canvas of={ErrorMessageStories._DocsIntro} sourceState={'shown'} />
+
+## With Slot
+Use the default slot to include HTML content, links, or formatted text in your error messages.
+<Canvas of={ErrorMessageStories._WithSlot} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={ErrorMessageStories} />

From 3c8fbe926397d1ae3dd3515c0862928d19041b4d Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Wed, 17 Dec 2025 17:38:03 +0000
Subject: [PATCH 05/32] wip

---
 .storybook/preview.ts | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 2932e5de64d..e239bcb2b73 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -11,11 +11,8 @@ import DateFormatter from '@/components/DateFormatter';
 import cleanCodeSnippet from './clean-code-snippet';
 import PortalVue from 'portal-vue';
 import FullscreenHeader from '@/components/publish/FullscreenHeader.vue';
-import Portals from '@/components/portals/Portals.js';
 import Portal from '@/components/portals/Portal.vue';
 import PortalTargets from '@/components/portals/PortalTargets.vue';
-import Stacks from '@/components/ui/Stack/Stacks.js';
-import {markRaw} from 'vue';
 
 // Intercept Inertia navigation and log to Actions tab.
 router.on('before', (event) => {
@@ -23,8 +20,8 @@ router.on('before', (event) => {
   return false;
 });
 
-const portals = markRaw(new Portals());
-const stacks = new Stacks(portals);
+// const portals = markRaw(new Portals());
+// const stacks = new Stacks(portals);
 
 setup(async (app) => {
   window.__ = translate;
@@ -48,8 +45,8 @@ setup(async (app) => {
 
   app.config.globalProperties.__ = translate;
   app.config.globalProperties.$date = new DateFormatter;
-  app.config.globalProperties.$portals = portals;
-  app.config.globalProperties.$stacks = stacks;
+  // app.config.globalProperties.$portals = portals;
+  // app.config.globalProperties.$stacks = stacks;
 
   app.use(PortalVue, { portalName: 'v-portal' });
 

From 054c4934a00155bbc9858bf8dc3c445ad582e498 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Wed, 17 Dec 2025 17:45:40 +0000
Subject: [PATCH 06/32] wip

---
 resources/js/components/ui/Description.vue  |   1 -
 resources/js/stories/Description.stories.ts |  52 +++++++++
 resources/js/stories/Label.stories.ts       | 123 ++++++++++++++++++++
 resources/js/stories/docs/Description.mdx   |  15 +++
 resources/js/stories/docs/Label.mdx         |  27 +++++
 5 files changed, 217 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/stories/Description.stories.ts
 create mode 100644 resources/js/stories/Label.stories.ts
 create mode 100644 resources/js/stories/docs/Description.mdx
 create mode 100644 resources/js/stories/docs/Label.mdx

diff --git a/resources/js/components/ui/Description.vue b/resources/js/components/ui/Description.vue
index 03fcb55c42a..5550a0ba34c 100644
--- a/resources/js/components/ui/Description.vue
+++ b/resources/js/components/ui/Description.vue
@@ -5,7 +5,6 @@ const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
 
 const props = defineProps({
-    required: { type: Boolean, default: false },
     text: { type: [String, Number, Boolean, null], default: null },
 });
 </script>
diff --git a/resources/js/stories/Description.stories.ts b/resources/js/stories/Description.stories.ts
new file mode 100644
index 00000000000..09e2e58911e
--- /dev/null
+++ b/resources/js/stories/Description.stories.ts
@@ -0,0 +1,52 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Description} from '@ui';
+
+const meta = {
+    title: 'Components/Description',
+    component: Description,
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'The description text to display.',
+        },
+    },
+} satisfies Meta<typeof Description>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<Description text="Enter your full name as it appears on your ID." />
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { Description },
+        template: defaultCode,
+    }),
+};
+
+const withSlotCode = `
+<Description>
+    This will be visible to all users. <a href="#">Learn more about privacy</a>
+</Description>
+`;
+
+export const _WithSlot: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withSlotCode }
+        }
+    },
+    render: () => ({
+        components: { Description },
+        template: withSlotCode,
+    }),
+};
diff --git a/resources/js/stories/Label.stories.ts b/resources/js/stories/Label.stories.ts
new file mode 100644
index 00000000000..0d59c46a0d5
--- /dev/null
+++ b/resources/js/stories/Label.stories.ts
@@ -0,0 +1,123 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Field, Input, Label} from '@ui';
+
+const meta = {
+    title: 'Components/Label',
+    component: Label,
+    argTypes: {
+        for: {
+            control: 'text',
+            description: 'The ID of the form element this label is for.',
+        },
+        badge: {
+            control: 'text',
+            description: 'Optional badge text to display on the right side of the label.',
+        },
+        required: {
+            control: 'boolean',
+            description: 'When `true`, displays a red asterisk indicating the field is required.',
+        },
+        text: {
+            control: 'text',
+            description: 'The label text to display.',
+        },
+    },
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<Label text="Email Address" />
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { Label },
+        template: defaultCode,
+    }),
+};
+
+const requiredCode = `
+<Label text="Email Address" required />
+`;
+
+export const _Required: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: requiredCode }
+        }
+    },
+    render: () => ({
+        components: { Label },
+        template: requiredCode,
+    }),
+};
+
+const withBadgeCode = `
+<div class="space-y-3">
+    <Label text="API Key" badge="Pro" />
+    <Label text="Theme Color" badge="New" />
+    <Label text="Advanced Settings" badge="Beta" />
+</div>
+`;
+
+export const _WithBadge: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withBadgeCode }
+        }
+    },
+    render: () => ({
+        components: { Label },
+        template: withBadgeCode,
+    }),
+};
+
+const withInputCode = `
+<Field>
+    <Label for="email" text="Email Address" required />
+    <Input id="email" type="email" placeholder="you@example.com" />
+</Field>
+`;
+
+export const _WithInput: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withInputCode }
+        }
+    },
+    render: () => ({
+        components: { Label, Input, Field },
+        template: withInputCode,
+    }),
+};
+
+const withSlotCode = `
+<Label>
+    <strong>Email Address</strong>
+    <span class="text-gray-500 ml-1 text-sm">(optional)</span>
+</Label>
+`;
+
+export const _WithSlot: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withSlotCode }
+        }
+    },
+    render: () => ({
+        components: { Label },
+        template: withSlotCode,
+    }),
+};
diff --git a/resources/js/stories/docs/Description.mdx b/resources/js/stories/docs/Description.mdx
new file mode 100644
index 00000000000..3b136129960
--- /dev/null
+++ b/resources/js/stories/docs/Description.mdx
@@ -0,0 +1,15 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as DescriptionStories from '../Description.stories';
+
+<Meta of={DescriptionStories} />
+
+# Description
+Display helpful description text below form labels to provide additional context and guidance to users. Descriptions are styled with a subdued color to differentiate them from labels.
+<Canvas of={DescriptionStories._DocsIntro} sourceState={'shown'} />
+
+## With Slot
+Use the default slot to include HTML content, links, or formatted text in your descriptions.
+<Canvas of={DescriptionStories._WithSlot} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={DescriptionStories} />
diff --git a/resources/js/stories/docs/Label.mdx b/resources/js/stories/docs/Label.mdx
new file mode 100644
index 00000000000..c1ff9b009ca
--- /dev/null
+++ b/resources/js/stories/docs/Label.mdx
@@ -0,0 +1,27 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as LabelStories from '../Label.stories';
+
+<Meta of={LabelStories} />
+
+# Label
+Display labels for form inputs with support for required indicators and badges. Labels are semantically correct `<label>` elements with consistent styling.
+<Canvas of={LabelStories._DocsIntro} sourceState={'shown'} />
+
+## Required
+Use the `required` prop to display a red asterisk indicating a required field.
+<Canvas of={LabelStories._Required} sourceState={'shown'} />
+
+## With Badge
+Add a badge to the right side of the label to indicate special features, statuses, or plan requirements.
+<Canvas of={LabelStories._WithBadge} sourceState={'shown'} />
+
+## With Input
+Connect labels to form inputs using the `for` prop to improve accessibility and usability.
+<Canvas of={LabelStories._WithInput} sourceState={'shown'} />
+
+## With Slot
+Use the default slot for more complex label content with custom formatting.
+<Canvas of={LabelStories._WithSlot} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={LabelStories} />

From d888ca2dd8a39defabca1fc1c3e0a759c5a49e93 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Wed, 17 Dec 2025 17:49:46 +0000
Subject: [PATCH 07/32] wip

---
 .../js/components/ui/CharacterCounter.vue     |   2 -
 .../js/stories/CharacterCounter.stories.ts    | 189 ++++++++++++++++++
 .../js/stories/docs/CharacterCounter.mdx      |  29 +++
 3 files changed, 218 insertions(+), 2 deletions(-)
 create mode 100644 resources/js/stories/CharacterCounter.stories.ts
 create mode 100644 resources/js/stories/docs/CharacterCounter.mdx

diff --git a/resources/js/components/ui/CharacterCounter.vue b/resources/js/components/ui/CharacterCounter.vue
index 3941e1fbfb2..ffd53b7bda1 100644
--- a/resources/js/components/ui/CharacterCounter.vue
+++ b/resources/js/components/ui/CharacterCounter.vue
@@ -2,8 +2,6 @@
 import { computed, ref, watch } from 'vue';
 import { cva } from 'cva';
 
-const emit = defineEmits(['update:text']);
-
 const props = defineProps({
     text: { type: String, default: '' },
     limit: { type: Number, default: null },
diff --git a/resources/js/stories/CharacterCounter.stories.ts b/resources/js/stories/CharacterCounter.stories.ts
new file mode 100644
index 00000000000..34af2dea619
--- /dev/null
+++ b/resources/js/stories/CharacterCounter.stories.ts
@@ -0,0 +1,189 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {CharacterCounter, Input} from '@ui';
+import {ref} from 'vue';
+
+const meta = {
+    title: 'Components/CharacterCounter',
+    component: CharacterCounter,
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'The text to count characters from.',
+        },
+        limit: {
+            control: 'number',
+            description: 'The maximum number of characters allowed.',
+        },
+        dangerZone: {
+            control: 'number',
+            description: 'Number of characters remaining before showing the countdown number (default: 20).',
+        },
+    },
+} satisfies Meta<typeof CharacterCounter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<CharacterCounter :text="text" :limit="100" />
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { CharacterCounter },
+        setup() {
+            const text = ref('This is some sample text.');
+            return { text };
+        },
+        template: `<CharacterCounter :text="text" :limit="100" />`,
+    }),
+};
+
+const withInputCode = `
+<Input
+    v-model="text"
+    :limit="140"
+    placeholder="What's happening?"
+/>
+`;
+
+export const _WithInput: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withInputCode }
+        }
+    },
+    render: () => ({
+        components: { Input },
+        setup() {
+            const text = ref('');
+            return { text };
+        },
+        template: `<Input v-model="text" :limit="140" placeholder="What's happening?" />`,
+    }),
+};
+
+const statesCode = `
+<div class="flex gap-4 items-center">
+    <div>
+        <div class="text-xs text-gray-600 mb-2">Under 70%</div>
+        <CharacterCounter :text="text1" :limit="100" />
+    </div>
+    <div>
+        <div class="text-xs text-gray-600 mb-2">70-90%</div>
+        <CharacterCounter :text="text2" :limit="100" />
+    </div>
+    <div>
+        <div class="text-xs text-gray-600 mb-2">90-100%</div>
+        <CharacterCounter :text="text3" :limit="100" />
+    </div>
+    <div>
+        <div class="text-xs text-gray-600 mb-2">At limit</div>
+        <CharacterCounter :text="text4" :limit="100" />
+    </div>
+    <div>
+        <div class="text-xs text-gray-600 mb-2">Over limit</div>
+        <CharacterCounter :text="text5" :limit="100" />
+    </div>
+</div>
+`;
+
+export const _States: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: statesCode }
+        }
+    },
+    render: () => ({
+        components: { CharacterCounter },
+        setup() {
+            const text1 = ref('Short text');
+            const text2 = ref('This is a medium length text that is around seventy percent of the limit.');
+            const text3 = ref('This is a longer text that is getting very close to the limit. We are now at about ninety perc');
+            const text4 = ref('This is exactly one hundred characters long for testing the limit animation when you hit it nice');
+            const text5 = ref('This text is way over the limit and should show a red circle with a strike through it to indicate the error state.');
+            return { text1, text2, text3, text4, text5 };
+        },
+        template: `
+            <div class="flex gap-4 items-center">
+                <div>
+                    <div class="text-xs text-gray-600 mb-2">Under 70%</div>
+                    <CharacterCounter :text="text1" :limit="100" />
+                </div>
+                <div>
+                    <div class="text-xs text-gray-600 mb-2">70-90%</div>
+                    <CharacterCounter :text="text2" :limit="100" />
+                </div>
+                <div>
+                    <div class="text-xs text-gray-600 mb-2">90-100%</div>
+                    <CharacterCounter :text="text3" :limit="100" />
+                </div>
+                <div>
+                    <div class="text-xs text-gray-600 mb-2">At limit</div>
+                    <CharacterCounter :text="text4" :limit="100" />
+                </div>
+                <div>
+                    <div class="text-xs text-gray-600 mb-2">Over limit</div>
+                    <CharacterCounter :text="text5" :limit="100" />
+                </div>
+            </div>
+        `,
+    }),
+};
+
+const dangerZoneCode = `
+<div class="flex gap-4 items-center">
+    <div>
+        <div class="text-xs text-gray-600 mb-2">Default (20)</div>
+        <CharacterCounter :text="text" :limit="100" />
+    </div>
+    <div>
+        <div class="text-xs text-gray-600 mb-2">Danger zone: 10</div>
+        <CharacterCounter :text="text" :limit="100" :danger-zone="10" />
+    </div>
+    <div>
+        <div class="text-xs text-gray-600 mb-2">Danger zone: 30</div>
+        <CharacterCounter :text="text" :limit="100" :danger-zone="30" />
+    </div>
+</div>
+`;
+
+export const _DangerZone: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: dangerZoneCode }
+        }
+    },
+    render: () => ({
+        components: { CharacterCounter },
+        setup() {
+            const text = ref('This text is 85 characters long so we can see when the danger zone countdown appears!');
+            return { text };
+        },
+        template: `
+            <div class="flex gap-4 items-center">
+                <div>
+                    <div class="text-xs text-gray-600 mb-2">Default (20)</div>
+                    <CharacterCounter :text="text" :limit="100" />
+                </div>
+                <div>
+                    <div class="text-xs text-gray-600 mb-2">Danger zone: 10</div>
+                    <CharacterCounter :text="text" :limit="100" :danger-zone="10" />
+                </div>
+                <div>
+                    <div class="text-xs text-gray-600 mb-2">Danger zone: 30</div>
+                    <CharacterCounter :text="text" :limit="100" :danger-zone="30" />
+                </div>
+            </div>
+        `,
+    }),
+};
diff --git a/resources/js/stories/docs/CharacterCounter.mdx b/resources/js/stories/docs/CharacterCounter.mdx
new file mode 100644
index 00000000000..4cc6faa9bf2
--- /dev/null
+++ b/resources/js/stories/docs/CharacterCounter.mdx
@@ -0,0 +1,29 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as CharacterCounterStories from '../CharacterCounter.stories';
+
+<Meta of={CharacterCounterStories} />
+
+# CharacterCounter
+A visual character counter that displays as a circular progress indicator. The counter changes color based on how close you are to the limit and shows a countdown when nearing the maximum. Typically used with text inputs and textareas.
+<Canvas of={CharacterCounterStories._DocsIntro} sourceState={'shown'} />
+
+## With Input
+The CharacterCounter is automatically displayed when you set a `limit` prop on Input or Textarea components. No need to manually add the CharacterCounter component.
+<Canvas of={CharacterCounterStories._WithInput} sourceState={'shown'} />
+
+## States
+The counter provides visual feedback with different colors based on character usage:
+- **Green**: Under 70% of the limit
+- **Amber**: Between 70-90% of the limit  
+- **Red**: Between 90-100% of the limit
+- **Red with strike**: Over the limit
+
+Hover over the counter to see the exact character count.
+<Canvas of={CharacterCounterStories._States} sourceState={'shown'} />
+
+## Danger Zone
+Use the `danger-zone` prop to control when the remaining character countdown appears. By default, it shows when 20 or fewer characters remain.
+<Canvas of={CharacterCounterStories._DangerZone} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={CharacterCounterStories} />

From 69256c708cb9af166c40a4f4898e21d378c12b5f Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 11:23:32 +0000
Subject: [PATCH 08/32] wip

---
 .storybook/preview.ts                         |   2 +
 .storybook/public/img/publish-form-dark.webp  | Bin 0 -> 86862 bytes
 .storybook/public/img/publish-form.webp       | Bin 0 -> 87046 bytes
 resources/js/components/ui/Panel/Header.vue   |   1 +
 resources/js/components/ui/Publish/Tabs.vue   |   6 +-
 resources/js/components/ui/Switch.vue         |   4 +
 resources/js/stories/Button.stories.ts        |   2 +-
 resources/js/stories/Pagination.stories.ts    | 231 ++++++++++++
 resources/js/stories/Panel.stories.ts         | 185 ++++++++++
 .../js/stories/PublishContainer.stories.ts    |  48 +++
 resources/js/stories/Separator.stories.ts     |   5 +-
 resources/js/stories/Skeleton.stories.ts      |  78 ++++
 resources/js/stories/Toggle.stories.ts        | 334 ++++++++++++++++++
 resources/js/stories/docs/Pagination.mdx      |  23 ++
 resources/js/stories/docs/Panel.mdx           |  31 ++
 .../js/stories/docs/PublishContainer.mdx      |  16 +
 resources/js/stories/docs/Skeleton.mdx        |  19 +
 resources/js/stories/docs/Toggle.mdx          |  35 ++
 18 files changed, 1015 insertions(+), 5 deletions(-)
 create mode 100644 .storybook/public/img/publish-form-dark.webp
 create mode 100644 .storybook/public/img/publish-form.webp
 create mode 100644 resources/js/stories/Pagination.stories.ts
 create mode 100644 resources/js/stories/Panel.stories.ts
 create mode 100644 resources/js/stories/PublishContainer.stories.ts
 create mode 100644 resources/js/stories/Skeleton.stories.ts
 create mode 100644 resources/js/stories/Toggle.stories.ts
 create mode 100644 resources/js/stories/docs/Pagination.mdx
 create mode 100644 resources/js/stories/docs/Panel.mdx
 create mode 100644 resources/js/stories/docs/PublishContainer.mdx
 create mode 100644 resources/js/stories/docs/Skeleton.mdx
 create mode 100644 resources/js/stories/docs/Toggle.mdx

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index e239bcb2b73..7185f6cfef6 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -31,6 +31,8 @@ setup(async (app) => {
           get(key) {
               const config = {
                   linkToDocs: true,
+                  paginationSize: 50,
+                  paginationSizeOptions: [10, 25, 50, 100, 500],
               };
 
               return config[key] ?? null;
diff --git a/.storybook/public/img/publish-form-dark.webp b/.storybook/public/img/publish-form-dark.webp
new file mode 100644
index 0000000000000000000000000000000000000000..00521eb55dc5eae3d5e574288407a4bbeb41eade
GIT binary patch
literal 86862
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
b8-W{v8-W{v{~duS-0b^?P4KQE!L9!SNgsq@

literal 0
HcmV?d00001

diff --git a/.storybook/public/img/publish-form.webp b/.storybook/public/img/publish-form.webp
new file mode 100644
index 0000000000000000000000000000000000000000..0a1968bdcc61edcfc16e664837c2eeb450834c8f
GIT binary patch
literal 87046
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
YKnb7(Py+u80`WKSmg!;SOx3gh0hMAzM*si-

literal 0
HcmV?d00001

diff --git a/resources/js/components/ui/Panel/Header.vue b/resources/js/components/ui/Panel/Header.vue
index 550560e9c51..390b47e1d60 100644
--- a/resources/js/components/ui/Panel/Header.vue
+++ b/resources/js/components/ui/Panel/Header.vue
@@ -2,6 +2,7 @@
 import Heading from '../Heading.vue';
 
 const props = defineProps({
+    /** Heading text for the panel */
     title: { type: String, default: null },
 });
 </script>
diff --git a/resources/js/components/ui/Publish/Tabs.vue b/resources/js/components/ui/Publish/Tabs.vue
index 5025daaf250..65fecca5a91 100644
--- a/resources/js/components/ui/Publish/Tabs.vue
+++ b/resources/js/components/ui/Publish/Tabs.vue
@@ -38,7 +38,7 @@ const visibleMainTabs = computed(() => {
     });
 });
 const hasMultipleVisibleMainTabs = computed(() => visibleMainTabs.value.length > 1);
-const shouldShowSidebar = computed(() => (slots.actions || sidebarTab.value) && width.value > 920);
+const shouldShowSidebar = computed(() => false);
 const activeTab = ref(visibleMainTabs.value[0].handle);
 
 onMounted(() => setActiveTabFromHash());
@@ -125,12 +125,12 @@ function tabHasError(tab) {
                                 <Sections />
                             </slot>
 
-                            <slot v-if="!shouldShowSidebar" name="actions" />
+<!--                            <slot v-if="!shouldShowSidebar" name="actions" />-->
                         </TabProvider>
                     </component>
 
                     <aside class="space-y-6 starting-style-transition-children" v-if="shouldShowSidebar">
-                        <slot name="actions" />
+<!--                        <slot name="actions" />-->
                         <TabProvider v-if="sidebarTab" :tab="sidebarTab">
                             <Sections />
                         </TabProvider>
diff --git a/resources/js/components/ui/Switch.vue b/resources/js/components/ui/Switch.vue
index 0ff22baa41b..f53c5c99a0b 100644
--- a/resources/js/components/ui/Switch.vue
+++ b/resources/js/components/ui/Switch.vue
@@ -4,9 +4,13 @@ import { SwitchRoot, SwitchThumb } from 'reka-ui';
 import { cva } from 'cva';
 
 const props = defineProps({
+    /** Whether the toggle is required */
     required: { type: Boolean, default: false },
+    /** The id attribute for the toggle */
     id: { type: String, default: () => useId() },
+    /** The checked state of the toggle */
     modelValue: { type: Boolean, default: false },
+    /** The size of the toggle */
     size: { type: String, default: 'base' },
 });
 
diff --git a/resources/js/stories/Button.stories.ts b/resources/js/stories/Button.stories.ts
index 9d4625b691a..6eff86fa6e5 100644
--- a/resources/js/stories/Button.stories.ts
+++ b/resources/js/stories/Button.stories.ts
@@ -316,7 +316,7 @@ export const ButtonGroups: Story = {
                 code: `
                     <ButtonGroup>
                         <Button text="Apply" />
-                        <Button text="Save All" />
+                        <Button icon="save" text="Save All" />
                     </ButtonGroup>
                 `,
             },
diff --git a/resources/js/stories/Pagination.stories.ts b/resources/js/stories/Pagination.stories.ts
new file mode 100644
index 00000000000..346f8717988
--- /dev/null
+++ b/resources/js/stories/Pagination.stories.ts
@@ -0,0 +1,231 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Pagination} from '@ui';
+import {ref} from 'vue';
+
+const meta = {
+    title: 'Components/Pagination',
+    component: Pagination,
+    argTypes: {
+        showTotals: {
+            control: 'boolean',
+            description: 'When `true`, shows the totals (eg. 1-10 of 50)',
+        },
+        perPage: {
+            control: 'number',
+            description: 'The number of items per page',
+        },
+        resourceMeta: {
+            control: 'object',
+            description: 'The `meta` object from a Laravel API resource',
+        },
+        scrollToTop: {
+            control: 'boolean',
+            description: 'When `true`, scrolls to the top when changing pages',
+        },
+        showPageLinks: {
+            control: 'boolean',
+            description: 'When `true`, shows individual page number buttons',
+        },
+        showPerPageSelector: {
+            control: 'boolean',
+            description: 'When `true`, shows the "per page" dropdown',
+        },
+    },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const createResourceMeta = (currentPage: number, total: number, perPage: number) => ({
+    current_page: currentPage,
+    from: (currentPage - 1) * perPage + 1,
+    to: Math.min(currentPage * perPage, total),
+    total,
+    last_page: Math.ceil(total / perPage),
+});
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    render: () => ({
+        components: { Pagination },
+        setup() {
+            const currentPage = ref(1);
+            const perPage = ref(25);
+            const resourceMeta = ref(createResourceMeta(currentPage.value, 100, perPage.value));
+
+            const handlePageSelected = (page: number) => {
+                currentPage.value = page;
+                resourceMeta.value = createResourceMeta(page, 100, perPage.value);
+            };
+
+            const handlePerPageChanged = (newPerPage: number) => {
+                perPage.value = newPerPage;
+                currentPage.value = 1;
+                resourceMeta.value = createResourceMeta(1, 100, newPerPage);
+            };
+
+            return { resourceMeta, perPage, handlePageSelected, handlePerPageChanged };
+        },
+        template: `
+            <Pagination
+                :resource-meta="resourceMeta"
+                :per-page="perPage"
+                @page-selected="handlePageSelected"
+                @per-page-changed="handlePerPageChanged"
+            />
+        `,
+    }),
+};
+
+export const Default: Story = {
+    tags: ['!dev'],
+    render: () => ({
+        components: { Pagination },
+        setup() {
+            const currentPage = ref(1);
+            const perPage = ref(25);
+            const resourceMeta = ref(createResourceMeta(currentPage.value, 100, perPage.value));
+
+            const handlePageSelected = (page: number) => {
+                currentPage.value = page;
+                resourceMeta.value = createResourceMeta(page, 100, perPage.value);
+            };
+
+            const handlePerPageChanged = (newPerPage: number) => {
+                perPage.value = newPerPage;
+                currentPage.value = 1;
+                resourceMeta.value = createResourceMeta(1, 100, newPerPage);
+            };
+
+            return { resourceMeta, perPage, handlePageSelected, handlePerPageChanged };
+        },
+        template: `
+            <Pagination
+                :resource-meta="resourceMeta"
+                :per-page="perPage"
+                @page-selected="handlePageSelected"
+                @per-page-changed="handlePerPageChanged"
+            />
+        `,
+    }),
+};
+
+export const ManyPages: Story = {
+    tags: ['!dev'],
+    render: () => ({
+        components: { Pagination },
+        setup() {
+            const currentPage = ref(5);
+            const perPage = ref(25);
+            const resourceMeta = ref(createResourceMeta(currentPage.value, 500, perPage.value));
+
+            const handlePageSelected = (page: number) => {
+                currentPage.value = page;
+                resourceMeta.value = createResourceMeta(page, 500, perPage.value);
+            };
+
+            const handlePerPageChanged = (newPerPage: number) => {
+                perPage.value = newPerPage;
+                currentPage.value = 1;
+                resourceMeta.value = createResourceMeta(1, 500, newPerPage);
+            };
+
+            return { resourceMeta, perPage, handlePageSelected, handlePerPageChanged };
+        },
+        template: `
+            <Pagination
+                :resource-meta="resourceMeta"
+                :per-page="perPage"
+                @page-selected="handlePageSelected"
+                @per-page-changed="handlePerPageChanged"
+            />
+        `,
+    }),
+};
+
+export const WithoutPageLinks: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: {
+                code: `
+                    <Pagination
+                        :resource-meta="resourceMeta"
+                        :per-page="perPage"
+                        :show-page-links="false"
+                        @page-selected="handlePageSelected"
+                        @per-page-changed="handlePerPageChanged"
+                    />
+                `,
+            },
+        },
+    },
+    render: () => ({
+        components: { Pagination },
+        setup() {
+            const currentPage = ref(1);
+            const perPage = ref(25);
+            const resourceMeta = ref(createResourceMeta(currentPage.value, 100, perPage.value));
+
+            const handlePageSelected = (page: number) => {
+                currentPage.value = page;
+                resourceMeta.value = createResourceMeta(page, 100, perPage.value);
+            };
+
+            const handlePerPageChanged = (newPerPage: number) => {
+                perPage.value = newPerPage;
+                currentPage.value = 1;
+                resourceMeta.value = createResourceMeta(1, 100, newPerPage);
+            };
+
+            return { resourceMeta, perPage, handlePageSelected, handlePerPageChanged };
+        },
+        template: `
+            <Pagination
+                :resource-meta="resourceMeta"
+                :per-page="perPage"
+                :show-page-links="false"
+                @page-selected="handlePageSelected"
+                @per-page-changed="handlePerPageChanged"
+            />
+        `,
+    }),
+};
+
+export const WithoutPerPageSelector: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: {
+                code: `
+                    <Pagination
+                        :resource-meta="resourceMeta"
+                        :show-per-page-selector="false"
+                        @page-selected="handlePageSelected"
+                    />
+                `,
+            },
+        },
+    },
+    render: () => ({
+        components: { Pagination },
+        setup() {
+            const currentPage = ref(1);
+            const resourceMeta = ref(createResourceMeta(currentPage.value, 100, 25));
+
+            const handlePageSelected = (page: number) => {
+                currentPage.value = page;
+                resourceMeta.value = createResourceMeta(page, 100, 25);
+            };
+
+            return { resourceMeta, handlePageSelected };
+        },
+        template: `
+            <Pagination
+                :resource-meta="resourceMeta"
+                :show-per-page-selector="false"
+                @page-selected="handlePageSelected"
+            />
+        `,
+    }),
+};
diff --git a/resources/js/stories/Panel.stories.ts b/resources/js/stories/Panel.stories.ts
new file mode 100644
index 00000000000..276d5d65b57
--- /dev/null
+++ b/resources/js/stories/Panel.stories.ts
@@ -0,0 +1,185 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Button, Card, Description, Heading, Panel, PanelFooter, PanelHeader} from '@ui';
+
+const meta = {
+    title: 'Components/Panel',
+    component: Panel,
+    subcomponents: {
+        PanelHeader,
+        PanelFooter,
+    },
+    argTypes: {
+        heading: {
+            control: 'text',
+            description: 'Heading text for the panel',
+        },
+        subheading: {
+            control: 'text',
+            description: 'Subheading text below the heading',
+        },
+    },
+} satisfies Meta<typeof Panel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    args: {
+        heading: 'Panel Title',
+        subheading: 'This is a description of what this panel does',
+    },
+    render: (args) => ({
+        components: { Panel, Card },
+        setup() {
+            return { args };
+        },
+        template: `
+            <Panel v-bind="args">
+                <Card>
+                    Panel content goes here
+                </Card>
+            </Panel>
+        `,
+    }),
+};
+
+export const Default: Story = {
+    tags: ['!dev'],
+    args: {
+        heading: 'Panel Title',
+    },
+    render: (args) => ({
+        components: { Panel, Card },
+        setup() {
+            return { args };
+        },
+        template: `
+            <Panel v-bind="args">
+                <Card>
+                    Panel content goes here
+                </Card>
+            </Panel>
+        `,
+    }),
+};
+
+const withSubheadingCode = `
+    <Panel heading="Panel Title" subheading="This is a description of what this panel does">
+        <Card>
+            Panel content goes here
+        </Card>
+    </Panel>
+`;
+
+export const WithSubheading: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withSubheadingCode },
+        },
+    },
+    render: () => ({
+        components: { Panel, Card },
+        template: withSubheadingCode,
+    }),
+};
+
+const withHeaderActionsCode = `
+    <Panel heading="Panel Title">
+        <template #header-actions>
+            <Button size="sm" variant="primary">Save</Button>
+        </template>
+        <Card>
+            Panel content goes here
+        </Card>
+    </Panel>
+`;
+
+export const WithHeaderActions: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withHeaderActionsCode },
+        },
+    },
+    render: () => ({
+        components: { Panel, Card, Button },
+        template: withHeaderActionsCode,
+    }),
+};
+
+const customHeaderCode = `
+    <Panel>
+        <PanelHeader>
+            <Heading>Custom Header</Heading>
+            <Description>This example is using a custom header. You can <a href="#">link to things</a> in here, unlike a prop.</Description>
+        </PanelHeader>
+        <Card>
+            Panel content goes here
+        </Card>
+    </Panel>
+`;
+
+export const CustomHeader: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: customHeaderCode },
+        },
+    },
+    render: () => ({
+        components: { Panel, PanelHeader, Card, Heading, Description },
+        template: customHeaderCode,
+    }),
+};
+
+const footerCode = `
+    <Panel heading="Panel Title">
+        <Card>
+            Panel content goes here
+        </Card>
+        <PanelFooter>
+            <div class="flex justify-end gap-2">
+                <Button text="Cancel" variant="ghost" />
+                <Button text="Save" variant="primary" />
+            </div>
+        </PanelFooter>
+    </Panel>
+`;
+
+export const WithFooter: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: footerCode },
+        },
+    },
+    render: () => ({
+        components: { Panel, PanelFooter, Card, Button },
+        template: footerCode,
+    }),
+};
+
+const noHeaderCode = `
+    <Panel>
+        <Card>
+            <div>
+                Panel content without a header
+            </div>
+        </Card>
+    </Panel>
+`;
+
+export const NoHeader: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: noHeaderCode },
+        },
+    },
+    render: () => ({
+        components: { Panel, Card },
+        template: noHeaderCode,
+    }),
+};
diff --git a/resources/js/stories/PublishContainer.stories.ts b/resources/js/stories/PublishContainer.stories.ts
new file mode 100644
index 00000000000..a53be93a1f1
--- /dev/null
+++ b/resources/js/stories/PublishContainer.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { PublishContainer } from '@ui';
+
+const meta = {
+    title: 'Components/PublishContainer',
+    component: PublishContainer,
+    parameters: {
+        docs: {
+            description: {
+                component: 'The PublishContainer component is used to create publish forms in the Control Panel. For full documentation including backend setup, visit the [Publish Forms documentation](https://v6.statamic.dev/control-panel/publish-forms).',
+            },
+        },
+    },
+} satisfies Meta<typeof PublishContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: {
+                code: 'For complete documentation and examples, please visit:\nhttps://v6.statamic.dev/control-panel/publish-forms',
+            },
+        },
+    },
+    render: () => ({
+        template: `
+            <div class="rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center">
+                <h3 class="text-lg font-semibold mb-2">Publish Container Documentation</h3>
+                <p class="text-gray-600 dark:text-gray-400 mb-4">
+                    The PublishContainer component requires backend configuration and blueprint setup.
+                </p>
+                <a 
+                    href="https://v6.statamic.dev/control-panel/publish-forms" 
+                    target="_blank"
+                    class="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
+                >
+                    View Full Documentation
+                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                    </svg>
+                </a>
+            </div>
+        `,
+    }),
+};
diff --git a/resources/js/stories/Separator.stories.ts b/resources/js/stories/Separator.stories.ts
index bb0435b2d8a..da761906670 100644
--- a/resources/js/stories/Separator.stories.ts
+++ b/resources/js/stories/Separator.stories.ts
@@ -11,7 +11,10 @@ const meta = {
             description: 'Controls the appearance of the separator. <br><br> Options: `line`, `dots`',
             options: ['line', 'dots'],
         },
-        vertical: { control: 'boolean' },
+        vertical: {
+            control: 'boolean',
+            description: 'When `true`, it will render as a vertical separator.'
+        },
     },
 } satisfies Meta<typeof Separator>;
 
diff --git a/resources/js/stories/Skeleton.stories.ts b/resources/js/stories/Skeleton.stories.ts
new file mode 100644
index 00000000000..a52f573eb4a
--- /dev/null
+++ b/resources/js/stories/Skeleton.stories.ts
@@ -0,0 +1,78 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Card, Skeleton} from '@ui';
+
+const meta = {
+    title: 'Components/Skeleton',
+    component: Skeleton,
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    render: () => ({
+        components: { Skeleton },
+        template: `
+            <div class="space-y-4">
+                <Skeleton class="h-12 w-full" />
+                <Skeleton class="h-12 w-full" />
+                <Skeleton class="h-12 w-3/4" />
+            </div>
+        `,
+    }),
+};
+
+export const Default: Story = {
+    tags: ['!dev'],
+    render: () => ({
+        components: { Skeleton },
+        template: `<Skeleton class="h-12 w-64" />`,
+    }),
+};
+
+const sizesCode = `
+    <div class="space-y-4">
+        <Skeleton class="h-8 w-64" />
+        <Skeleton class="h-12 w-64" />
+        <Skeleton class="h-16 w-64" />
+    </div>
+`;
+
+export const Sizes: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: sizesCode },
+        },
+    },
+    render: () => ({
+        components: { Skeleton },
+        template: sizesCode,
+    }),
+};
+
+const cardExampleCode = `
+    <Card>
+        <div class="flex items-center gap-4">
+            <Skeleton class="size-12 rounded-full" />
+            <div class="flex-1 space-y-2">
+                <Skeleton class="h-4 w-1/2" />
+                <Skeleton class="h-4 w-1/3" />
+            </div>
+        </div>
+    </Card>
+`;
+
+export const CardExample: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: cardExampleCode },
+        },
+    },
+    render: () => ({
+        components: { Skeleton, Card },
+        template: cardExampleCode,
+    }),
+};
diff --git a/resources/js/stories/Toggle.stories.ts b/resources/js/stories/Toggle.stories.ts
new file mode 100644
index 00000000000..cf6cd282456
--- /dev/null
+++ b/resources/js/stories/Toggle.stories.ts
@@ -0,0 +1,334 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {ToggleGroup, ToggleItem} from '@ui';
+import {ref} from 'vue';
+
+const meta = {
+    title: 'Components/Toggle',
+    component: ToggleGroup,
+    subcomponents: {
+        ToggleItem,
+    },
+    argTypes: {
+        modelValue: {
+            control: 'text',
+            description: 'The controlled value of the toggle group.',
+            table: {
+                type: { summary: 'string | string[]' }
+            }
+        },
+        size: {
+            control: 'select',
+            description: 'Controls the size of the toggle items. <br><br> Options: `xs`, `sm`, `base`',
+            options: ['xs', 'sm', 'base'],
+        },
+        variant: {
+            control: 'select',
+            description: 'Controls the appearance of the toggle items. <br><br> Options: `default`, `primary`, `filled`, `ghost`',
+            options: ['default', 'primary', 'filled', 'ghost'],
+        },
+        multiple: {
+            control: 'boolean',
+            description: 'When `true`, multiple items can be selected',
+        },
+        required: { control: 'boolean' },
+        'update:modelValue': {
+            description: 'Event handler called when the selected options change.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string | string[]) => void' }
+            }
+        }
+    },
+} satisfies Meta<typeof ToggleGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const introCode = `
+<ToggleGroup v-model="selected">
+    <ToggleItem value="grid" icon="view-grid" label="Grid" />
+    <ToggleItem value="list" icon="view-list" label="List" />
+    <ToggleItem value="table" icon="view-table" label="Table" />
+</ToggleGroup>
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: introCode },
+        },
+    },
+    render: () => ({
+        components: { ToggleGroup, ToggleItem },
+        setup() {
+            const selected = ref('list');
+            return { selected };
+        },
+        template: introCode,
+    }),
+};
+
+const defaultCode = `
+<ToggleGroup v-model="selected">
+    <ToggleItem value="option1" label="Option 1" />
+    <ToggleItem value="option2" label="Option 2" />
+    <ToggleItem value="option3" label="Option 3" />
+</ToggleGroup>
+`;
+
+export const Default: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode },
+        },
+    },
+    render: () => ({
+        components: { ToggleGroup, ToggleItem },
+        setup() {
+            const selected = ref('option1');
+            return { selected };
+        },
+        template: defaultCode,
+    }),
+};
+
+const variantsCode = `
+<ToggleGroup v-model="selected" variant="default">
+    <ToggleItem value="option1" label="Default" />
+    <ToggleItem value="option2" label="Option 2" />
+    <ToggleItem value="option3" label="Option 3" />
+</ToggleGroup>
+
+<ToggleGroup v-model="selected" variant="primary">
+    <ToggleItem value="option1" label="Primary" />
+    <ToggleItem value="option2" label="Option 2" />
+    <ToggleItem value="option3" label="Option 3" />
+</ToggleGroup>
+
+<ToggleGroup v-model="selected" variant="filled">
+    <ToggleItem value="option1" label="Filled" />
+    <ToggleItem value="option2" label="Option 2" />
+    <ToggleItem value="option3" label="Option 3" />
+</ToggleGroup>
+
+<ToggleGroup v-model="selected" variant="ghost">
+    <ToggleItem value="option1" label="Ghost" />
+    <ToggleItem value="option2" label="Option 2" />
+    <ToggleItem value="option3" label="Option 3" />
+</ToggleGroup>
+`;
+
+export const Variants: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: variantsCode },
+        },
+    },
+    render: () => ({
+        components: { ToggleGroup, ToggleItem },
+        setup() {
+            const selected1 = ref('option1');
+            const selected2 = ref('option1');
+            const selected3 = ref('option1');
+            const selected4 = ref('option1');
+            return { selected1, selected2, selected3, selected4 };
+        },
+        template: `
+            <div class="space-y-4">
+                <ToggleGroup v-model="selected1" variant="default">
+                    <ToggleItem value="option1" label="Default" />
+                    <ToggleItem value="option2" label="Option 2" />
+                    <ToggleItem value="option3" label="Option 3" />
+                </ToggleGroup>
+                
+                <ToggleGroup v-model="selected2" variant="primary">
+                    <ToggleItem value="option1" label="Primary" />
+                    <ToggleItem value="option2" label="Option 2" />
+                    <ToggleItem value="option3" label="Option 3" />
+                </ToggleGroup>
+                
+                <ToggleGroup v-model="selected3" variant="filled">
+                    <ToggleItem value="option1" label="Filled" />
+                    <ToggleItem value="option2" label="Option 2" />
+                    <ToggleItem value="option3" label="Option 3" />
+                </ToggleGroup>
+                
+                <ToggleGroup v-model="selected4" variant="ghost">
+                    <ToggleItem value="option1" label="Ghost" />
+                    <ToggleItem value="option2" label="Option 2" />
+                    <ToggleItem value="option3" label="Option 3" />
+                </ToggleGroup>
+            </div>
+        `,
+    }),
+};
+
+const sizesCode = `
+<ToggleGroup v-model="selected" size="base">
+    <ToggleItem value="option1" label="Base" />
+    <ToggleItem value="option2" label="Option 2" />
+    <ToggleItem value="option3" label="Option 3" />
+</ToggleGroup>
+
+<ToggleGroup v-model="selected" size="sm">
+    <ToggleItem value="option1" label="Small" />
+    <ToggleItem value="option2" label="Option 2" />
+    <ToggleItem value="option3" label="Option 3" />
+</ToggleGroup>
+
+<ToggleGroup v-model="selected" size="xs">
+    <ToggleItem value="option1" label="Extra Small" />
+    <ToggleItem value="option2" label="Option 2" />
+    <ToggleItem value="option3" label="Option 3" />
+</ToggleGroup>
+`;
+
+export const Sizes: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: sizesCode },
+        },
+    },
+    render: () => ({
+        components: { ToggleGroup, ToggleItem },
+        setup() {
+            const selected1 = ref('option1');
+            const selected2 = ref('option1');
+            const selected3 = ref('option1');
+            return { selected1, selected2, selected3 };
+        },
+        template: `
+            <div class="space-y-4">
+                <ToggleGroup v-model="selected1" size="base">
+                    <ToggleItem value="option1" label="Base" />
+                    <ToggleItem value="option2" label="Option 2" />
+                    <ToggleItem value="option3" label="Option 3" />
+                </ToggleGroup>
+                
+                <ToggleGroup v-model="selected2" size="sm">
+                    <ToggleItem value="option1" label="Small" />
+                    <ToggleItem value="option2" label="Option 2" />
+                    <ToggleItem value="option3" label="Option 3" />
+                </ToggleGroup>
+                
+                <ToggleGroup v-model="selected3" size="xs">
+                    <ToggleItem value="option1" label="Extra Small" />
+                    <ToggleItem value="option2" label="Option 2" />
+                    <ToggleItem value="option3" label="Option 3" />
+                </ToggleGroup>
+            </div>
+        `,
+    }),
+};
+
+const withIconsCode = `
+<ToggleGroup v-model="selected">
+    <ToggleItem value="tree" icon="navigation" label="Tree" />
+    <ToggleItem value="list" icon="layout-list" label="List" />
+    <ToggleItem value="calendar" icon="calendar" label="Calendar" />
+</ToggleGroup>
+`;
+
+export const WithIcons: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withIconsCode },
+        },
+    },
+    render: () => ({
+        components: { ToggleGroup, ToggleItem },
+        setup() {
+            const selected = ref('tree');
+            return { selected };
+        },
+        template: withIconsCode,
+    }),
+};
+
+const iconOnlyCode = `
+<ToggleGroup v-model="selected">
+    <ToggleItem value="bold" icon="text-bold" />
+    <ToggleItem value="italic" icon="text-italic" />
+    <ToggleItem value="underline" icon="text-underline" />
+</ToggleGroup>
+`;
+
+export const IconOnly: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: iconOnlyCode },
+        },
+    },
+    render: () => ({
+        components: { ToggleGroup, ToggleItem },
+        setup() {
+            const selected = ref('bold');
+            return { selected };
+        },
+        template: iconOnlyCode,
+    }),
+};
+
+const multipleCode = `
+<ToggleGroup v-model="selected" multiple>
+    <ToggleItem value="bold" icon="text-bold" label="Bold" />
+    <ToggleItem value="italic" icon="text-italic" label="Italic" />
+    <ToggleItem value="underline" icon="text-underline" label="Underline" />
+</ToggleGroup>
+`;
+
+export const Multiple: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { 
+                code: `${multipleCode}
+<div class="text-sm text-gray-600">Selected: {{ selected.join(', ') || 'none' }}</div>`
+            },
+        },
+    },
+    render: () => ({
+        components: { ToggleGroup, ToggleItem },
+        setup() {
+            const selected = ref(['bold', 'italic']);
+            return { selected };
+        },
+        template: `
+            <div class="space-y-4">
+                ${multipleCode}
+                <div class="text-sm text-gray-600">Selected: {{ selected.join(', ') || 'none' }}</div>
+            </div>
+        `,
+    }),
+};
+
+const disabledCode = `
+<ToggleGroup v-model="selected">
+    <ToggleItem value="option1" label="Option 1" />
+    <ToggleItem value="option2" label="Option 2" disabled />
+    <ToggleItem value="option3" label="Option 3" />
+</ToggleGroup>
+`;
+
+export const Disabled: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: disabledCode },
+        },
+    },
+    render: () => ({
+        components: { ToggleGroup, ToggleItem },
+        setup() {
+            const selected = ref('option1');
+            return { selected };
+        },
+        template: disabledCode,
+    }),
+};
diff --git a/resources/js/stories/docs/Pagination.mdx b/resources/js/stories/docs/Pagination.mdx
new file mode 100644
index 00000000000..a2af644f0fd
--- /dev/null
+++ b/resources/js/stories/docs/Pagination.mdx
@@ -0,0 +1,23 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as PaginationStories from '../Pagination.stories';
+
+<Meta of={PaginationStories} />
+
+# Pagination
+Navigate through pages of content with page numbers and per-page controls.
+<Canvas of={PaginationStories._DocsIntro} sourceState={'shown'} />
+
+## Many Pages
+When there are many pages, pagination automatically shows ellipsis and limits visible page numbers.
+<Canvas of={PaginationStories.ManyPages} sourceState={'shown'} />
+
+## Without Page Links
+Hide individual page number buttons and show only prev/next controls.
+<Canvas of={PaginationStories.WithoutPageLinks} sourceState={'shown'} />
+
+## Without Per Page Selector
+Hide the per-page dropdown selector.
+<Canvas of={PaginationStories.WithoutPerPageSelector} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={PaginationStories} />
diff --git a/resources/js/stories/docs/Panel.mdx b/resources/js/stories/docs/Panel.mdx
new file mode 100644
index 00000000000..f5f9335e336
--- /dev/null
+++ b/resources/js/stories/docs/Panel.mdx
@@ -0,0 +1,31 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as PanelStories from '../Panel.stories';
+
+<Meta of={PanelStories} />
+
+# Panel
+Panels are content containers with optional headers and footers, commonly used for forms and settings. Panels are typically combined with Cards to structure content.
+<Canvas of={PanelStories._DocsIntro} sourceState={'shown'} />
+
+## With Subheading
+Add a subheading below the panel title for additional context.
+<Canvas of={PanelStories.WithSubheading} sourceState={'shown'} />
+
+## With Header Actions
+Add action buttons to the panel header using the `header-actions` slot.
+<Canvas of={PanelStories.WithHeaderActions} sourceState={'shown'} />
+
+## Custom Header
+Use the PanelHeader component directly for more control over the header content.
+<Canvas of={PanelStories.CustomHeader} sourceState={'shown'} />
+
+## With Footer
+Add a footer to the panel using the PanelFooter component.
+<Canvas of={PanelStories.WithFooter} sourceState={'shown'} />
+
+## No Header
+Panels can be used without a header for simpler layouts.
+<Canvas of={PanelStories.NoHeader} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={PanelStories} />
diff --git a/resources/js/stories/docs/PublishContainer.mdx b/resources/js/stories/docs/PublishContainer.mdx
new file mode 100644
index 00000000000..2a51a70c339
--- /dev/null
+++ b/resources/js/stories/docs/PublishContainer.mdx
@@ -0,0 +1,16 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as PublishContainerStories from '../PublishContainer.stories';
+
+<Meta of={PublishContainerStories} />
+
+# Publish Container
+The `PublishContainer` component is used to create Publish Forms in the Control Panel. It handles field rendering, validation, localization and state management.
+
+<figure>
+    <picture>
+        <source srcset="/img/publish-form-dark.webp" media="(prefers-color-scheme: dark)" />
+        <img src="/img/publish-form.webp" alt="Screenshot of a custom Publish Form" />
+    </picture>
+</figure>
+
+To learn more about the `PublishContainer` component (and publish forms in general), visit the ["Publish Forms"](https://statamic.dev/control-panel/publish-forms) page on our main documentation site.
\ No newline at end of file
diff --git a/resources/js/stories/docs/Skeleton.mdx b/resources/js/stories/docs/Skeleton.mdx
new file mode 100644
index 00000000000..a8beb798c17
--- /dev/null
+++ b/resources/js/stories/docs/Skeleton.mdx
@@ -0,0 +1,19 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as SkeletonStories from '../Skeleton.stories';
+
+<Meta of={SkeletonStories} />
+
+# Skeleton
+Skeleton loaders provide a visual placeholder while content is loading, improving perceived performance.
+<Canvas of={SkeletonStories._DocsIntro} sourceState={'shown'} />
+
+## Sizes
+Control the height and width of skeleton loaders using Tailwind classes.
+<Canvas of={SkeletonStories.Sizes} sourceState={'shown'} />
+
+## Card Example
+Combine multiple skeletons to create placeholder layouts.
+<Canvas of={SkeletonStories.CardExample} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={SkeletonStories} />
diff --git a/resources/js/stories/docs/Toggle.mdx b/resources/js/stories/docs/Toggle.mdx
new file mode 100644
index 00000000000..5f845c6cd6a
--- /dev/null
+++ b/resources/js/stories/docs/Toggle.mdx
@@ -0,0 +1,35 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as ToggleStories from '../Toggle.stories';
+
+<Meta of={ToggleStories} />
+
+# Toggle
+A group of buttons that allow users to select one or multiple options. Similar to segmented controls or button-styled radio groups.
+<Canvas of={ToggleStories._DocsIntro} sourceState={'shown'} />
+
+## Variants
+Use the `variant` prop to change the appearance of the toggle group.
+<Canvas of={ToggleStories.Variants} sourceState={'shown'} />
+
+## Sizes
+Use the `size` prop to change the size of the toggle items.
+<Canvas of={ToggleStories.Sizes} sourceState={'shown'} />
+
+## With Icons
+Add icons to toggle items for better visual recognition.
+<Canvas of={ToggleStories.WithIcons} sourceState={'shown'} />
+
+## Icon Only
+Use icons without labels for a more compact layout.
+<Canvas of={ToggleStories.IconOnly} sourceState={'shown'} />
+
+## Multiple Selection
+Set the `multiple` prop to allow selecting multiple items at once.
+<Canvas of={ToggleStories.Multiple} sourceState={'shown'} />
+
+## Disabled Items
+Individual toggle items can be disabled.
+<Canvas of={ToggleStories.Disabled} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={ToggleStories} />

From 29be2004aa0fcccd06242a9fc5cb96f6673b733d Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 11:47:28 +0000
Subject: [PATCH 09/32] wip

---
 storybook-docs.md | 68 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 storybook-docs.md

diff --git a/storybook-docs.md b/storybook-docs.md
new file mode 100644
index 00000000000..03ab792d4fb
--- /dev/null
+++ b/storybook-docs.md
@@ -0,0 +1,68 @@
+I'm currently in the process of adding our remaining UI Components to our Storybook documentation site, so third-party developers can easily use our components.
+
+When I ask you to add documentation for a page, please keep these things in mind:
+
+* I want you to add docs for the component, not "canvas" stuff. That means you need to create an `.mdx` file.
+* Code snippets should *mostly* live in variables, to avoid duplicating it between the code snippet and the example.
+    * If you want to display something in the example that's not in the code snippet, then use backticks to add in the snippet with whatever you need to add.
+* Some components live by themselves, some have "child" / "related" components. In this case, the child/related components should be listed as
+  `subcomponents`.
+* I want you to document the props and events for each component.
+* Please document them inside the `argTypes` object, rather than JSDoc in the component's code.
+    * Although, don't do this for subcomponents as they can't be documented the same way.
+    * When the prop has multiple options, it should look like the below code snippet. A
+      `select` control, with a description describing what it does, and `<br><br> Options: ...`, as well as an
+      `options` array
+
+```ts
+      size: {
+    control: 'select',
+        description
+:
+    'Controls the size of the toggle items. <br><br> Options: `xs`, `sm`, `base`',
+        options
+:
+    ['xs', 'sm', 'base'],
+}
+,
+```
+
+    * When dealing with `size` or `variant` props, please use this description format: `Controls the size of the ...` / `Controls the appearance of the ...`
+    * When dealing with `disabled`, `required` or `read-only` props, don't add a description or anything. It's fairly self-explanatory.
+    * When dealing with a `boolean` prop, please use this description format: "When `true`, ..."
+    * When dealing with an `icon` prop (or similar), the argument should look like the below code snippet. Make sure to import the `icons` file from `./icons`:
+
+```ts
+      icon: {
+    control: 'select',
+        options
+:
+    icons,
+        description
+:
+    'Icon name. [Browse available icons](/?path=/story/components-icon--all-icons)',
+}
+,
+```
+
+    * When the component has events (like `update:modelValue`), you should add them to the `argTypes` object like the below code snippet. The description should be something along the lines of `Event handler called when the ... is changed`
+
+```ts
+      'update:modelValue'
+:
+{
+    description: 'Event handler called when the input is updated.',
+        table
+:
+    {
+        category: 'events',
+            type
+    :
+        {
+            summary: '(value: string) => void'
+        }
+    }
+}
+```
+
+If you have any doubts about convention, please look at other documented components or ask me.
\ No newline at end of file

From 6ebcedc13bb36fabcf1199a1a74d9e2def97c2c1 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 12:59:08 +0000
Subject: [PATCH 10/32] wip

---
 .storybook/preview.ts                         |   1 +
 .storybook/storybook.css                      |  22 +-
 resources/js/components/ui/Context/Footer.vue |   1 +
 resources/js/components/ui/Context/Header.vue |   2 +
 resources/js/components/ui/Context/Item.vue   |   3 +
 resources/js/components/ui/Dropdown/Item.vue  |   2 +-
 .../js/components/ui/EmptyState/Item.vue      |   4 +
 resources/js/components/ui/index.js           |   1 +
 resources/js/stories/Context.stories.ts       | 212 +++++++++++++++++
 resources/js/stories/Dropdown.stories.ts      |   6 +-
 resources/js/stories/EmptyState.stories.ts    | 128 ++++++++++
 resources/js/stories/Field.stories.ts         | 225 ++++++++++++++++++
 resources/js/stories/Header.stories.ts        |  84 +++++++
 resources/js/stories/HoverCard.stories.ts     | 170 +++++++++++++
 resources/js/stories/Slider.stories.ts        | 137 +++++++++++
 resources/js/stories/docs/Context.mdx         |  33 +++
 resources/js/stories/docs/EmptyState.mdx      |  27 +++
 resources/js/stories/docs/Field.mdx           |  39 +++
 resources/js/stories/docs/Header.mdx          |  19 ++
 resources/js/stories/docs/HoverCard.mdx       |  26 ++
 resources/js/stories/docs/Slider.mdx          |  18 ++
 storybook-docs.md                             |   8 +-
 22 files changed, 1151 insertions(+), 17 deletions(-)
 create mode 100644 resources/js/stories/Context.stories.ts
 create mode 100644 resources/js/stories/EmptyState.stories.ts
 create mode 100644 resources/js/stories/Field.stories.ts
 create mode 100644 resources/js/stories/Header.stories.ts
 create mode 100644 resources/js/stories/HoverCard.stories.ts
 create mode 100644 resources/js/stories/Slider.stories.ts
 create mode 100644 resources/js/stories/docs/Context.mdx
 create mode 100644 resources/js/stories/docs/EmptyState.mdx
 create mode 100644 resources/js/stories/docs/Field.mdx
 create mode 100644 resources/js/stories/docs/Header.mdx
 create mode 100644 resources/js/stories/docs/HoverCard.mdx
 create mode 100644 resources/js/stories/docs/Slider.mdx

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 7185f6cfef6..86e7d1a1b25 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -47,6 +47,7 @@ setup(async (app) => {
 
   app.config.globalProperties.__ = translate;
   app.config.globalProperties.$date = new DateFormatter;
+  app.config.globalProperties.cp_url = (url) => url;
   // app.config.globalProperties.$portals = portals;
   // app.config.globalProperties.$stacks = stacks;
 
diff --git a/.storybook/storybook.css b/.storybook/storybook.css
index 727a89f0678..1671dda93de 100644
--- a/.storybook/storybook.css
+++ b/.storybook/storybook.css
@@ -2,30 +2,30 @@
 @import '../resources/css/ui.css';
 @custom-variant dark (&:where(.dark, .dark *));
 
-.sbdocs h1,
-.sbdocs h2,
-.sbdocs h3,
-.sbdocs h4,
-.sbdocs h5,
-.sbdocs h6 {
+.sbdocs h1:not(.sbdocs-preview *, .sbdocs-preview h1),
+.sbdocs h2:not(.sbdocs-preview *, .sbdocs-preview h2),
+.sbdocs h3:not(.sbdocs-preview *, .sbdocs-preview h3),
+.sbdocs h4:not(.sbdocs-preview *, .sbdocs-preview h4),
+.sbdocs h5:not(.sbdocs-preview *, .sbdocs-preview h5),
+.sbdocs h6:not(.sbdocs-preview *, .sbdocs-preview h6) {
     font-family: p22-mackinac-pro, serif;
 }
 
-.sbdocs h1 {
+.sbdocs h1:not(.sbdocs-preview *, .sbdocs-preview h1) {
     font-size: 2.5rem;
 }
 
-.sbdocs h2 {
+.sbdocs h2:not(.sbdocs-preview *, .sbdocs-preview h2) {
     font-size: 1.75rem;
     font-weight: 600;
 }
 
-.sbdocs h3 {
+.sbdocs h3:not(.sbdocs-preview *, .sbdocs-preview h3) {
     font-size: 1.25rem;
 }
 
-.sbdocs p,
-.sbdocs li {
+.sbdocs p:not(.sbdocs-preview *, .sbdocs-preview p),
+.sbdocs li:not(.sbdocs-preview *, .sbdocs-preview li) {
     font-size: 1rem;
     line-height: 1.6;
     font-weight: 350;
diff --git a/resources/js/components/ui/Context/Footer.vue b/resources/js/components/ui/Context/Footer.vue
index fdc8dbf1a0a..e73b8570755 100644
--- a/resources/js/components/ui/Context/Footer.vue
+++ b/resources/js/components/ui/Context/Footer.vue
@@ -5,6 +5,7 @@ import Icon from '../Icon/Icon.vue';
 
 defineProps({
     href: { type: String, default: null },
+	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
     text: { type: String, default: null },
 });
diff --git a/resources/js/components/ui/Context/Header.vue b/resources/js/components/ui/Context/Header.vue
index 4b11c6afb5d..f15ee46ed92 100644
--- a/resources/js/components/ui/Context/Header.vue
+++ b/resources/js/components/ui/Context/Header.vue
@@ -5,7 +5,9 @@ import Icon from '../Icon/Icon.vue';
 import Button from '../Button/Button.vue';
 
 defineProps({
+	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
+	/** Icon name. Will display after the text. [Browse available icons](/?path=/story/components-icon--all-icons) */
     appendIcon: { type: String, default: null },
     appendHref: { type: String, default: null },
     text: { type: String, default: null },
diff --git a/resources/js/components/ui/Context/Item.vue b/resources/js/components/ui/Context/Item.vue
index 66ba698e92d..82aca0dcf15 100644
--- a/resources/js/components/ui/Context/Item.vue
+++ b/resources/js/components/ui/Context/Item.vue
@@ -6,9 +6,12 @@ import { cva } from 'cva';
 
 const props = defineProps({
     href: { type: String, default: null },
+	/** When `href` is provided, this prop controls the link's `target` attribute. */
     target: { type: String, default: '_self' },
+	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
     text: { type: String, default: null },
+	/** Controls the appearance of the dropdown item. <br><br> Options: `default`, `destructive` */
     variant: { type: String, default: 'default' },
 });
 
diff --git a/resources/js/components/ui/Dropdown/Item.vue b/resources/js/components/ui/Dropdown/Item.vue
index 51c8fb3b91e..646517f0eb2 100644
--- a/resources/js/components/ui/Dropdown/Item.vue
+++ b/resources/js/components/ui/Dropdown/Item.vue
@@ -14,7 +14,7 @@ const props = defineProps({
     /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
     text: { type: String, default: null },
-    /** Controls the appearance of the dropdown item. Options: `default`, `destructive` */
+    /** Controls the appearance of the dropdown item. <br><br> Options: `default`, `destructive` */
     variant: { type: String, default: 'default' },
 });
 
diff --git a/resources/js/components/ui/EmptyState/Item.vue b/resources/js/components/ui/EmptyState/Item.vue
index ee4178e566d..67d6fa85a8f 100644
--- a/resources/js/components/ui/EmptyState/Item.vue
+++ b/resources/js/components/ui/EmptyState/Item.vue
@@ -4,18 +4,22 @@ import Icon from '../Icon/Icon.vue';
 import { useSlots } from 'vue';
 
 const props = defineProps({
+	/** Optional link */
     href: {
         type: String,
         default: null,
     },
+	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: {
         type: String,
         required: true,
     },
+	/** Heading text for the empty state item */
     heading: {
         type: String,
         required: true,
     },
+	/** Optional description text below the heading. */
     description: {
         type: String,
         default: '',
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index b970d3b6a21..b94ec2d4a50 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -14,6 +14,7 @@ export { default as CodeEditor } from './CodeEditor.vue';
 export { default as Combobox } from './Combobox/Combobox.vue';
 export { default as Context } from './Context/Context.vue';
 export { default as ContextFooter } from './Context/Footer.vue';
+export { default as ContextHeader } from './Context/Header.vue';
 export { default as ContextItem } from './Context/Item.vue';
 export { default as ContextLabel } from './Context/Label.vue';
 export { default as ContextMenu } from './Context/Menu.vue';
diff --git a/resources/js/stories/Context.stories.ts b/resources/js/stories/Context.stories.ts
new file mode 100644
index 00000000000..c3317f14ea2
--- /dev/null
+++ b/resources/js/stories/Context.stories.ts
@@ -0,0 +1,212 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {
+    Button,
+    Context,
+    ContextFooter,
+    ContextHeader,
+    ContextItem,
+    ContextLabel,
+    ContextMenu,
+    ContextSeparator
+} from '@ui';
+
+const meta = {
+    title: 'Components/Context',
+    component: Context,
+    subcomponents: {
+        ContextMenu,
+        ContextItem,
+        ContextHeader,
+        ContextFooter,
+        ContextLabel,
+        ContextSeparator,
+    },
+    argTypes: {
+        align: {
+            control: 'select',
+            options: ['start', 'center', 'end'],
+            description: 'The preferred alignment against the trigger. May change when collisions occur. <br><br> Options: `start`, `center`, `end`',
+        },
+        offset: {
+            control: 'number',
+            description: 'The distance in pixels from the trigger.',
+        },
+        side: {
+            control: 'select',
+            options: ['top', 'bottom', 'left', 'right'],
+            description: 'The preferred side of the trigger to render against when open. <br><br> Options: `top`, `bottom`, `left`, `right`',
+        },
+    },
+} satisfies Meta<typeof Context>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<Context>
+    <template #trigger>
+        <Button text="Right Click Me" />
+    </template>
+    <ContextMenu>
+        <ContextItem text="Edit" />
+        <ContextItem text="Duplicate" />
+        <ContextItem text="Archive" />
+        <ContextSeparator />
+        <ContextItem text="Delete" variant="destructive" />
+    </ContextMenu>
+</Context>
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { Context, ContextMenu, ContextItem, ContextSeparator, Button },
+        template: defaultCode,
+    }),
+};
+
+const iconsCode = `
+<Context>
+    <template #trigger>
+        <Button text="Actions" />
+    </template>
+    <ContextMenu>
+        <ContextItem text="Edit" icon="pencil" />
+        <ContextItem text="Duplicate" icon="duplicate" />
+        <ContextItem text="Download" icon="arrow-down" />
+        <ContextSeparator />
+        <ContextItem text="Delete" icon="trash" variant="destructive" />
+    </ContextMenu>
+</Context>
+`;
+
+export const _Icons: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: iconsCode }
+        }
+    },
+    render: () => ({
+        components: { Context, ContextMenu, ContextItem, ContextSeparator, Button },
+        template: iconsCode,
+    }),
+};
+
+const withHeaderFooterCode = `
+<Context>
+    <template #trigger>
+        <Button text="File Options" />
+    </template>
+    <ContextHeader text="document.pdf" icon="file" />
+    <ContextMenu>
+        <ContextItem text="Open" icon="arrow-right" />
+        <ContextItem text="Rename" icon="pencil" />
+        <ContextItem text="Move" icon="folder" />
+        <ContextSeparator />
+        <ContextItem text="Delete" icon="trash" variant="destructive" />
+    </ContextMenu>
+    <ContextFooter text="View in Finder" icon="folder" />
+</Context>
+`;
+
+export const _WithHeaderFooter: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withHeaderFooterCode }
+        }
+    },
+    render: () => ({
+        components: { Context, ContextMenu, ContextItem, ContextHeader, ContextFooter, ContextSeparator, Button },
+        template: withHeaderFooterCode,
+    }),
+};
+
+const withLabelsCode = `
+<Context>
+    <template #trigger>
+        <Button text="Edit Text" />
+    </template>
+    <ContextMenu>
+        <ContextLabel text="Format" />
+        <ContextItem text="Bold" icon="text-bold" />
+        <ContextItem text="Italic" icon="text-italic" />
+        <ContextSeparator />
+        <ContextLabel text="Alignment" />
+        <ContextItem text="Align Left" icon="paragraph-align-left" />
+        <ContextItem text="Align Center" icon="paragraph-align-center" />
+        <ContextItem text="Align Right" icon="paragraph-align-right" />
+    </ContextMenu>
+</Context>
+`;
+
+export const _WithLabels: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withLabelsCode }
+        }
+    },
+    render: () => ({
+        components: { Context, ContextMenu, ContextItem, ContextLabel, ContextSeparator, Button },
+        template: withLabelsCode,
+    }),
+};
+
+const withLinksCode = `
+<Context>
+    <template #trigger>
+        <Button text="Quick Links" />
+    </template>
+    <ContextMenu>
+        <ContextItem text="Documentation" icon="book-next-page" href="https://statamic.dev" target="_blank" />
+        <ContextItem text="GitHub" icon="social-github-logo" href="https://github.com/statamic" target="_blank" />
+        <ContextItem text="Discord" icon="social-discord-logo" href="https://statamic.com/discord" target="_blank" />
+    </ContextMenu>
+</Context>
+`;
+
+export const _WithLinks: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withLinksCode }
+        }
+    },
+    render: () => ({
+        components: { Context, ContextMenu, ContextItem, Button },
+        template: withLinksCode,
+    }),
+};
+
+const disabledCode = `
+<Context>
+    <template #trigger>
+        <Button text="Go To..." />
+    </template>
+    <ContextMenu>
+        <ContextItem text="Collections" icon="collections" />
+        <ContextItem text="Taxonomies" icon="taxonomies" disabled />
+        <ContextItem text="Globals" icon="globals" />
+    </ContextMenu>
+</Context>
+`;
+
+export const _Disabled: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: disabledCode }
+        }
+    },
+    render: () => ({
+        components: { Context, ContextMenu, ContextItem, Button },
+        template: disabledCode,
+    }),
+};
diff --git a/resources/js/stories/Dropdown.stories.ts b/resources/js/stories/Dropdown.stories.ts
index fc12aec345d..e343502933c 100644
--- a/resources/js/stories/Dropdown.stories.ts
+++ b/resources/js/stories/Dropdown.stories.ts
@@ -15,16 +15,16 @@ const meta = {
         align: {
             control: 'select',
             options: ['start', 'center', 'end'],
-            description: 'The preferred alignment against the trigger. May change when collisions occur. Options: `start`, `center`, `end`',
+            description: 'The preferred alignment against the trigger. May change when collisions occur. <br><br> Options: `start`, `center`, `end`',
         },
         offset: {
             control: 'number',
-            description: 'The distance in pixels from the trigger',
+            description: 'The distance in pixels from the trigger.',
         },
         side: {
             control: 'select',
             options: ['top', 'bottom', 'left', 'right'],
-            description: 'The preferred side of the trigger to render against when open. Options: `top`, `bottom`, `left`, `right`',
+            description: 'The preferred side of the trigger to render against when open. <br><br> Options: `top`, `bottom`, `left`, `right`',
         },
     },
 } satisfies Meta<typeof Dropdown>;
diff --git a/resources/js/stories/EmptyState.stories.ts b/resources/js/stories/EmptyState.stories.ts
new file mode 100644
index 00000000000..6bc856474d7
--- /dev/null
+++ b/resources/js/stories/EmptyState.stories.ts
@@ -0,0 +1,128 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {EmptyStateItem, EmptyStateMenu} from '@ui';
+
+const meta = {
+    title: 'Components/EmptyState',
+    component: EmptyStateMenu,
+    subcomponents: {
+        EmptyStateItem,
+    },
+    argTypes: {
+        heading: {
+            control: 'text',
+            description: 'Heading text for the empty state menu.',
+        },
+        description: {
+            control: 'text',
+            description: 'Optional description text below the heading.',
+        },
+    },
+} satisfies Meta<typeof EmptyStateMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<EmptyStateMenu heading="Start designing your collection with these steps">
+    <EmptyStateItem
+        icon="configure"
+        heading="Configure Collection"
+        description="Configure URLs and routes, define blueprints, date behaviors, ordering and other options."
+        :href="cp_url('collections/blog/edit')"
+    />
+    <EmptyStateItem
+        icon="fieldtype-entries"
+        heading="Create Entry"
+        description="Create the first entry or stub out a handful of placeholder entries—whatever suits your needs."
+        :href="cp_url('collections/blog/create')"
+    />
+    <EmptyStateItem
+        icon="blueprints"
+        heading="Configure Blueprints"
+        description="Manage the blueprints and fields available for this collection. Keep organized with fieldsets."
+        :href="cp_url('collections/blog/blueprints')"
+    />
+    <EmptyStateItem
+        icon="scaffold"
+        heading="Scaffold Views"
+        description="Generate index and detail views from the collection name at the click of a button."
+        :href="cp_url('collections/blog/scaffold')"
+    />
+</EmptyStateMenu>
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { EmptyStateMenu, EmptyStateItem },
+        // todo: architecutal background
+        template: defaultCode,
+    }),
+};
+
+const withSlotCode = `
+<EmptyStateMenu heading="Start designing your collection with these steps">
+    <EmptyStateItem
+        icon="fieldtype-entries"
+        heading="Create Entry"
+        description="Create the first entry or stub out a handful of placeholder entries—whatever suits your needs."
+    >
+        <a href="#" class="text-blue-600 text-sm rtl:ml-2 ltr:mr-2">Post</a>
+        <a href="#" class="text-blue-600 text-sm rtl:ml-2 ltr:mr-2">Link</a>
+        <a href="#" class="text-blue-600 text-sm rtl:ml-2 ltr:mr-2">Video</a>
+    </EmptyStateItem>
+    <EmptyStateItem
+        icon="blueprints"
+        heading="Configure Blueprints"
+        description="Manage the blueprints and fields available for this collection. Keep organized with fieldsets."
+        :href="cp_url('collections/blog/blueprints')"
+    />
+</EmptyStateMenu>
+`;
+
+export const _WithSlot: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withSlotCode }
+        }
+    },
+    render: () => ({
+        components: { EmptyStateMenu, EmptyStateItem },
+        template: withSlotCode,
+    }),
+};
+
+const noLinksCode = `
+<EmptyStateMenu heading="Start designing your collection with these steps">
+    <EmptyStateItem
+        icon="fieldtype-entries"
+        heading="Create Entry"
+        description="Create the first entry or stub out a handful of placeholder entries—whatever suits your needs."
+        @click="createEntry"
+    />
+</EmptyStateMenu>
+`;
+
+export const _NoLinks: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: noLinksCode }
+        }
+    },
+    render: () => ({
+        components: { EmptyStateMenu, EmptyStateItem },
+        methods: {
+            createEntry() {
+                //
+            }
+        },
+        template: noLinksCode,
+    }),
+};
diff --git a/resources/js/stories/Field.stories.ts b/resources/js/stories/Field.stories.ts
new file mode 100644
index 00000000000..c7761ab3136
--- /dev/null
+++ b/resources/js/stories/Field.stories.ts
@@ -0,0 +1,225 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {ref} from 'vue';
+import {Button, Field, Input, Switch, Textarea} from '@ui';
+
+const meta = {
+    title: 'Components/Field',
+    component: Field,
+    argTypes: {
+        asConfig: {
+            control: 'boolean',
+            description: 'When `true`, styles the field as a configuration field with a two-column grid layout.',
+        },
+        badge: {
+            control: 'text',
+            description: 'Badge text to display next to the label.',
+        },
+        disabled: { control: 'boolean' },
+        error: {
+            control: 'text',
+            description: 'Error message to display below the field.',
+        },
+        errors: {
+            control: 'object',
+            description: 'Object or array of error messages to display below the field.',
+        },
+        fullWidthSetting: {
+            control: 'boolean',
+            description: 'When `true`, forces the field to use full width even when `asConfig` is enabled.',
+        },
+        id: { control: 'text' },
+        instructions: {
+            control: 'text',
+            description: 'Instructions text to display above or below the label. Supports Markdown.',
+        },
+        instructionsBelow: {
+            control: 'boolean',
+            description: 'When `true`, displays instructions below the control instead of below the label.',
+        },
+        label: {
+            control: 'text',
+            description: 'Label text for the field.',
+        },
+        readOnly: { control: 'boolean' },
+        required: { control: 'boolean' },
+        variant: {
+            control: 'select',
+            description: 'Controls the layout of the field. <br><br> Options: `block`, `inline`',
+            options: ['block', 'inline'],
+        },
+    },
+} satisfies Meta<typeof Field>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<Field label="Email" instructions="Your primary email address">
+    <Input placeholder="jim@bob.com" />
+</Field>
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { Field, Input },
+        template: defaultCode,
+    }),
+};
+
+const requiredCode = `
+<Field label="Email" required instructions="We need this to contact you">
+    <Input placeholder="jim@bob.com" />
+</Field>
+`;
+
+export const _Required: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: requiredCode }
+        }
+    },
+    render: () => ({
+        components: { Field, Input },
+        template: requiredCode,
+    }),
+};
+
+const withBadgeCode = `
+<Field label="Theme Color" badge="New" instructions="Customize your site's color scheme">
+    <Input placeholder="#3490dc" />
+</Field>
+`;
+
+export const _WithBadge: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withBadgeCode }
+        }
+    },
+    render: () => ({
+        components: { Field, Input },
+        template: withBadgeCode,
+    }),
+};
+
+const withErrorCode = `
+<Field label="Email" error="This email is already taken" required>
+    <Input placeholder="jim@bob.com" />
+</Field>
+`;
+
+export const _WithError: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withErrorCode }
+        }
+    },
+    render: () => ({
+        components: { Field, Input },
+        template: withErrorCode,
+    }),
+};
+
+const inlineVariantCode = `
+<Field label="Enable notifications" variant="inline">
+    <Switch v-model="enabled" />
+</Field>
+`;
+
+export const _InlineVariant: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: inlineVariantCode }
+        }
+    },
+    render: () => ({
+        components: { Field, Switch },
+        setup() {
+            const enabled = ref(false);
+            return { enabled };
+        },
+        template: inlineVariantCode,
+    }),
+};
+
+const instructionsBelowCode = `
+<Field 
+    label="Bio" 
+    instructions="Tell us a bit about yourself. Markdown is supported."
+    instructions-below
+>
+    <Textarea placeholder="I love building websites..." />
+</Field>
+`;
+
+export const _InstructionsBelow: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: instructionsBelowCode }
+        }
+    },
+    render: () => ({
+        components: { Field, Textarea },
+        template: instructionsBelowCode,
+    }),
+};
+
+const withActionsSlotCode = `
+<Field label="Title">
+    <template #actions>
+        <Button text="Clear" size="xs" variant="ghost" />
+    </template>
+    <Input placeholder="Enter a title..." />
+</Field>
+`;
+
+export const _WithActionsSlot: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withActionsSlotCode }
+        }
+    },
+    render: () => ({
+        components: { Field, Input, Button },
+        template: withActionsSlotCode,
+    }),
+};
+
+const asConfigCode = `
+<div class="bg-white dark:bg-gray-900 rounded-lg divide-y divide-gray-200 dark:divide-gray-800">
+    <Field label="Site Name" as-config>
+        <Input value="My Awesome Site" />
+    </Field>
+    <Field label="Tagline" as-config>
+        <Input value="Just another Statamic site" />
+    </Field>
+    <Field label="Description" as-config full-width-setting>
+        <Textarea value="A brief description of my site" />
+    </Field>
+</div>
+`;
+
+export const _AsConfig: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: asConfigCode }
+        }
+    },
+    render: () => ({
+        components: { Field, Input, Textarea },
+        template: asConfigCode,
+    }),
+};
diff --git a/resources/js/stories/Header.stories.ts b/resources/js/stories/Header.stories.ts
new file mode 100644
index 00000000000..8b4da00f39a
--- /dev/null
+++ b/resources/js/stories/Header.stories.ts
@@ -0,0 +1,84 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Badge, Button, Header} from '@ui';
+import {icons} from "@/stories/icons";
+
+const meta = {
+    title: 'Components/Header',
+    component: Header,
+    argTypes: {
+        icon: {
+            control: 'select',
+            options: icons,
+            description: 'Icon name. [Browse available icons](/?path=/story/components-icon--all-icons)',
+        },
+        title: {
+            control: 'text',
+            description: 'The title text displayed in the header.',
+            table: {
+                category: 'props'
+            }
+        },
+    },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<Header icon="collections" title="Collections" />
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { Header },
+        template: defaultCode,
+    }),
+};
+
+const withActionsCode = `
+<Header icon="collections" title="Collections">
+    <Button icon="dots" variant="ghost" />
+    <Button text="Create Collection" variant="primary" />
+</Header>
+`;
+
+export const _WithActions: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withActionsCode }
+        }
+    },
+    render: () => ({
+        components: { Header, Button },
+        template: withActionsCode,
+    }),
+};
+
+const withTitleSlotCode = `
+<Header icon="collections">
+    <template #title>
+        Collections <Badge text="12" color="blue" />
+    </template>
+    <Button text="Create Collection" variant="primary" />
+</Header>
+`;
+
+export const _WithTitleSlot: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withTitleSlotCode }
+        }
+    },
+    render: () => ({
+        components: { Header, Button, Badge },
+        template: withTitleSlotCode,
+    }),
+};
diff --git a/resources/js/stories/HoverCard.stories.ts b/resources/js/stories/HoverCard.stories.ts
new file mode 100644
index 00000000000..875799bacf2
--- /dev/null
+++ b/resources/js/stories/HoverCard.stories.ts
@@ -0,0 +1,170 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Button, Description, Heading, HoverCard} from '@ui';
+
+const meta = {
+    title: 'Components/HoverCard',
+    component: HoverCard,
+    argTypes: {
+        align: {
+            control: 'select',
+            options: ['start', 'center', 'end'],
+            description: 'The preferred alignment against the trigger. May change when collisions occur. <br><br> Options: `start`, `center`, `end`',
+        },
+        arrow: {
+            control: 'boolean',
+            description: 'When `true`, an arrow is displayed near the trigger.'
+        },
+        delay: {
+            control: 'number',
+            description: 'The delay in milliseconds before the hover card opens.',
+        },
+        inset: {
+            control: 'boolean',
+            description: 'When `true`, the internal padding of the hover card is removed.',
+        },
+        offset: {
+            control: 'number',
+            description: 'The distance in pixels from the trigger.',
+        },
+        side: {
+            control: 'select',
+            options: ['top', 'bottom', 'left', 'right'],
+            description: 'The preferred side of the trigger to render against when open. <br><br> Options: `top`, `bottom`, `left`, `right`',
+        },
+        open: {
+            control: 'boolean',
+            description: 'The controlled open state of the hover card.',
+        },
+        'update:open': {
+            description: 'Event handler called when the open state of the hover card changes.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: boolean) => void' }
+            }
+        }
+    },
+} satisfies Meta<typeof HoverCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<HoverCard>
+    <template #trigger>
+        <Button text="Hover over me" variant="ghost" />
+    </template>
+    <Heading text="Quick Info" />
+    <Description text="This is some helpful information that appears on hover." />
+</HoverCard>
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { HoverCard, Button, Heading, Description },
+        template: defaultCode,
+    }),
+};
+
+const directionCode = `
+<div class="flex space-x-6 justify-center">
+    <HoverCard side="top">
+        <template #trigger>
+            <Button text="↑ Top" size="sm" />
+        </template>
+        <Description text="Opens to the top" />
+    </HoverCard>
+
+    <HoverCard side="bottom">
+        <template #trigger>
+            <Button text="↓ Bottom" size="sm" />
+        </template>
+        <Description text="Opens to the bottom" />
+    </HoverCard>
+
+    <HoverCard side="left">
+        <template #trigger>
+            <Button text="← Left" size="sm" />
+        </template>
+        <Description text="Opens to the left" />
+    </HoverCard>
+
+    <HoverCard side="right">
+        <template #trigger>
+            <Button text="→ Right" size="sm" />
+        </template>
+        <Description text="Opens to the right" />
+    </HoverCard>
+</div>
+`;
+
+export const _Direction: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: directionCode }
+        }
+    },
+    render: () => ({
+        components: { HoverCard, Button, Description },
+        template: directionCode,
+    }),
+};
+
+const noArrowCode = `
+<HoverCard :arrow="false">
+    <template #trigger>
+        <Button text="Hover over me" variant="ghost" />
+    </template>
+    <Description text="This hover card has no arrow pointing to the trigger." />
+</HoverCard>
+`;
+
+export const _NoArrow: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: noArrowCode }
+        }
+    },
+    render: () => ({
+        components: { HoverCard, Button, Description },
+        template: noArrowCode,
+    }),
+};
+
+const customDelayCode = `
+<div class="flex space-x-4">
+    <HoverCard :delay="0">
+        <template #trigger>
+            <Button text="Instant" size="sm" variant="ghost" />
+        </template>
+        <Description text="Opens immediately" />
+    </HoverCard>
+
+    <HoverCard :delay="1000">
+        <template #trigger>
+            <Button text="Delayed" size="sm" variant="ghost" />
+        </template>
+        <Description text="Opens after 1 second" />
+    </HoverCard>
+</div>
+`;
+
+export const _CustomDelay: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: customDelayCode }
+        }
+    },
+    render: () => ({
+        components: { HoverCard, Button, Description },
+        template: customDelayCode,
+    }),
+};
diff --git a/resources/js/stories/Slider.stories.ts b/resources/js/stories/Slider.stories.ts
new file mode 100644
index 00000000000..d02dc037be4
--- /dev/null
+++ b/resources/js/stories/Slider.stories.ts
@@ -0,0 +1,137 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {ref} from 'vue';
+import {Field, Slider} from '@ui';
+
+const meta = {
+    title: 'Components/Slider',
+    component: Slider,
+    argTypes: {
+        description: {
+            control: 'text',
+            description: 'Description text for the slider.',
+        },
+        id: {
+            control: 'text',
+            description: 'ID attribute for the slider.',
+        },
+        label: {
+            control: 'text',
+            description: 'Label text for the slider.',
+        },
+        modelValue: {
+            control: 'number',
+            description: 'The controlled value of the slider.',
+        },
+        min: {
+            control: 'number',
+            description: 'The minimum value of the slider.',
+        },
+        max: {
+            control: 'number',
+            description: 'The maximum value of the slider.',
+        },
+        step: {
+            control: 'number',
+            description: 'The step increment for the slider.',
+        },
+        size: {
+            control: 'select',
+            description: 'Controls the size of the slider. <br><br> Options: `sm`, `base`',
+            options: ['sm', 'base'],
+        },
+        variant: {
+            control: 'select',
+            description: 'Controls the appearance of the slider. <br><br> Options: `default`',
+            options: ['default'],
+        },
+        'update:modelValue': {
+            description: 'Event handler called when the slider value changes.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: number) => void' }
+            }
+        }
+    },
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<Slider v-model="value" />
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { Slider },
+        setup() {
+            const value = ref(50);
+            return { value };
+        },
+        template: defaultCode,
+    }),
+};
+
+const rangeCode = `
+<div class="space-y-6">
+    <Field label="Opacity">
+        <Slider v-model="opacity" :min="0" :max="1" :step="0.1" />
+    </Field>
+    <Field label="Items per page">
+        <Slider v-model="perPage" :min="10" :max="100" :step="10" />
+    </Field>
+</div>
+`;
+
+export const _CustomRange: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: rangeCode }
+        }
+    },
+    render: () => ({
+        components: { Field, Slider },
+        setup() {
+            const opacity = ref(0.8);
+            const perPage = ref(20);
+            return { opacity, perPage };
+        },
+        template: rangeCode,
+    }),
+};
+
+const sizesCode = `
+<div class="space-y-6">
+    <Field label="Base size">
+        <Slider v-model="baseValue" />
+    </Field>
+    <Field label="Small size">
+        <Slider v-model="smallValue" size="sm" />
+    </Field>
+</div>
+`;
+
+export const _Sizes: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: sizesCode }
+        }
+    },
+    render: () => ({
+        components: { Field, Slider },
+        setup() {
+            const baseValue = ref(50);
+            const smallValue = ref(50);
+            return { baseValue, smallValue };
+        },
+        template: sizesCode,
+    }),
+};
diff --git a/resources/js/stories/docs/Context.mdx b/resources/js/stories/docs/Context.mdx
new file mode 100644
index 00000000000..e912de517fd
--- /dev/null
+++ b/resources/js/stories/docs/Context.mdx
@@ -0,0 +1,33 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as ContextStories from '../Context.stories';
+
+<Meta of={ContextStories} />
+
+# Context
+Displays a contextual menu triggered by right-clicking an element, with full keyboard navigation support.
+
+## Overview
+The context component has a `<template #trigger>` slot to contain the element that will trigger the context menu on right-click.
+<Canvas of={ContextStories._DocsIntro} sourceState={'shown'} />
+
+## Icons
+<Canvas of={ContextStories._Icons} sourceState={'shown'} />
+
+## Headers and Footers
+Headers and footers can be added to the context menu by using the `ContextHeader` and `ContextFooter` components.
+<Canvas of={ContextStories._WithHeaderFooter} sourceState={'shown'} />
+
+## Labels
+Labels can be used to group related items by using the `ContextLabel` component.
+<Canvas of={ContextStories._WithLabels} sourceState={'shown'} />
+
+## Links
+Items can be rendered as links by providing an `href` prop.
+<Canvas of={ContextStories._WithLinks} sourceState={'shown'} />
+
+## Disabled Items
+Items can be disabled by using the `disabled` prop.
+<Canvas of={ContextStories._Disabled} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={ContextStories} />
diff --git a/resources/js/stories/docs/EmptyState.mdx b/resources/js/stories/docs/EmptyState.mdx
new file mode 100644
index 00000000000..0b1c6a035f0
--- /dev/null
+++ b/resources/js/stories/docs/EmptyState.mdx
@@ -0,0 +1,27 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as EmptyStateStories from '../EmptyState.stories';
+
+<Meta of={EmptyStateStories} />
+
+# Empty State
+Display helpful options and actions when a section has no content yet. Empty states guide users toward creating their first items with descriptive cards that explain each option.
+<Canvas of={EmptyStateStories._DocsIntro} sourceState={'shown'} />
+
+We recommend using the empty state components alongside the `useArchitecturalBackground()` composable:
+
+```js
+import { useArchitecturalBackground } from '@statamic/cms/inertia';
+
+useArchitecturalBackground();
+```
+
+## With Slot
+Use the default slot in `EmptyStateItem` for custom content instead of the description prop.
+<Canvas of={EmptyStateStories._WithSlot} sourceState={'shown'} />
+
+## No Links
+Items can be rendered as buttons instead of links by omitting the `href` prop. When using the default slot, items are rendered as non-interactive divs.
+<Canvas of={EmptyStateStories._NoLinks} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={EmptyStateStories} />
diff --git a/resources/js/stories/docs/Field.mdx b/resources/js/stories/docs/Field.mdx
new file mode 100644
index 00000000000..c372266cd63
--- /dev/null
+++ b/resources/js/stories/docs/Field.mdx
@@ -0,0 +1,39 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as FieldStories from '../Field.stories';
+
+<Meta of={FieldStories} />
+
+# Field
+A wrapper component for form controls that provides consistent labels, descriptions, error messaging, and layout options. The `Field` component handles all the common patterns for form inputs including required indicators, badges, and validation states.
+<Canvas of={FieldStories._DocsIntro} sourceState={'shown'} />
+
+## Required
+Use the `required` prop to display a red asterisk indicating a required field.
+<Canvas of={FieldStories._Required} sourceState={'shown'} />
+
+## With Badge
+Add a badge to the label to indicate special features, statuses, or plan requirements. (TODO don't like this example)
+<Canvas of={FieldStories._WithBadge} sourceState={'shown'} />
+
+## With Error
+Display validation errors below the field using the `error` prop for a single error or `errors` for multiple messages.
+<Canvas of={FieldStories._WithError} sourceState={'shown'} />
+
+## Inline Variant
+Use the `inline` variant to display the label and control side-by-side rather than stacked. (use diff example here too - maybe keep email or use a switch?)
+<Canvas of={FieldStories._InlineVariant} sourceState={'shown'} />
+
+## Instructions Below
+Position instructions below the control instead of below the label for better visual flow with large inputs.
+<Canvas of={FieldStories._InstructionsBelow} sourceState={'shown'} />
+
+## With Actions Slot
+Add action buttons or controls next to the label using the `actions` slot.
+<Canvas of={FieldStories._WithActionsSlot} sourceState={'shown'} />
+
+## As Config
+Use the `asConfig` prop to style fields as configuration settings with a two-column layout. Use `fullWidthSetting` to override the two-column layout for specific fields.
+<Canvas of={FieldStories._AsConfig} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={FieldStories} />
diff --git a/resources/js/stories/docs/Header.mdx b/resources/js/stories/docs/Header.mdx
new file mode 100644
index 00000000000..5eafe1ddd6c
--- /dev/null
+++ b/resources/js/stories/docs/Header.mdx
@@ -0,0 +1,19 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as HeaderStories from '../Header.stories';
+
+<Meta of={HeaderStories} />
+
+# Header
+Displays a page header with an optional icon, title, and action buttons. The Header component provides consistent styling and layout for page headers throughout the Control Panel.
+<Canvas of={HeaderStories._DocsIntro} sourceState={'shown'} />
+
+## With Actions
+Add action buttons to the right side of the header using the default slot.
+<Canvas of={HeaderStories._WithActions} sourceState={'shown'} />
+
+## With Title Slot
+Use the `title` slot for custom title content with custom formatting.
+<Canvas of={HeaderStories._WithTitleSlot} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={HeaderStories} />
diff --git a/resources/js/stories/docs/HoverCard.mdx b/resources/js/stories/docs/HoverCard.mdx
new file mode 100644
index 00000000000..adf6632db39
--- /dev/null
+++ b/resources/js/stories/docs/HoverCard.mdx
@@ -0,0 +1,26 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as HoverCardStories from '../HoverCard.stories';
+
+<Meta of={HoverCardStories} />
+
+# Hover Card
+Displays rich content in a floating card when hovering over a trigger element. Hover Cards are perfect for showing additional context or user information without cluttering the interface.
+
+## Overview
+The hover card component has a `<template #trigger>` slot to contain the element that will trigger the card on hover.
+<Canvas of={HoverCardStories._DocsIntro} sourceState={'shown'} />
+
+## Direction
+Control which side of the trigger the card appears on.
+<Canvas of={HoverCardStories._Direction} sourceState={'shown'} />
+
+## No Arrow
+Remove the arrow pointer by setting `arrow` to `false`.
+<Canvas of={HoverCardStories._NoArrow} sourceState={'shown'} />
+
+## Custom Delay
+Adjust the delay before the card appears using the `delay` prop.
+<Canvas of={HoverCardStories._CustomDelay} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={HoverCardStories} />
diff --git a/resources/js/stories/docs/Slider.mdx b/resources/js/stories/docs/Slider.mdx
new file mode 100644
index 00000000000..2a3c14cfa39
--- /dev/null
+++ b/resources/js/stories/docs/Slider.mdx
@@ -0,0 +1,18 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as SliderStories from '../Slider.stories';
+
+<Meta of={SliderStories} />
+
+# Slider
+A draggable slider input for selecting numeric values within a range.
+<Canvas of={SliderStories._DocsIntro} sourceState={'shown'} />
+
+## Custom Range
+Customize the minimum, maximum, and step values for different use cases.
+<Canvas of={SliderStories._CustomRange} sourceState={'shown'} />
+
+## Sizes
+<Canvas of={SliderStories._Sizes} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={SliderStories} />
diff --git a/storybook-docs.md b/storybook-docs.md
index 03ab792d4fb..97fc5788170 100644
--- a/storybook-docs.md
+++ b/storybook-docs.md
@@ -28,7 +28,7 @@ When I ask you to add documentation for a page, please keep these things in mind
 ```
 
     * When dealing with `size` or `variant` props, please use this description format: `Controls the size of the ...` / `Controls the appearance of the ...`
-    * When dealing with `disabled`, `required` or `read-only` props, don't add a description or anything. It's fairly self-explanatory.
+    * When dealing with `disabled`, `required`, `id` or `read-only` props, don't add a description or anything. It's fairly self-explanatory.
     * When dealing with a `boolean` prop, please use this description format: "When `true`, ..."
     * When dealing with an `icon` prop (or similar), the argument should look like the below code snippet. Make sure to import the `icons` file from `./icons`:
 
@@ -65,4 +65,8 @@ When I ask you to add documentation for a page, please keep these things in mind
 }
 ```
 
-If you have any doubts about convention, please look at other documented components or ask me.
\ No newline at end of file
+* Please don't list out the props/events (eg. bullet points) outside of the
+  `argTypes` thing. Storybook will do that for us.
+* You also don't need to list all the child/related components
+
+If you have any doubts about convention, please look at other documented components or ask me. When I follow-up on something, please bear in mind that I might have edited the files so take care before updating them.
\ No newline at end of file

From 76bf2411d5ea7587a671c179ca25ca65b06bf470 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 14:30:51 +0000
Subject: [PATCH 11/32] wip

---
 .../components/ui/DatePicker/DatePicker.vue   |   1 -
 .../ui/DateRangePicker/DateRangePicker.vue    |   1 -
 resources/js/stories/DatePicker.stories.ts    | 167 ++++++++++++++++++
 .../js/stories/DateRangePicker.stories.ts     | 121 +++++++++++++
 resources/js/stories/TimePicker.stories.ts    |  80 +++++++++
 resources/js/stories/docs/DatePicker.mdx      |  27 +++
 resources/js/stories/docs/DateRangePicker.mdx |  19 ++
 resources/js/stories/docs/TimePicker.mdx      |  15 ++
 storybook-docs.md                             |   1 +
 9 files changed, 430 insertions(+), 2 deletions(-)
 create mode 100644 resources/js/stories/DatePicker.stories.ts
 create mode 100644 resources/js/stories/DateRangePicker.stories.ts
 create mode 100644 resources/js/stories/TimePicker.stories.ts
 create mode 100644 resources/js/stories/docs/DatePicker.mdx
 create mode 100644 resources/js/stories/docs/DateRangePicker.mdx
 create mode 100644 resources/js/stories/docs/TimePicker.mdx

diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index f6f9d5ebdaf..1e69ea315e2 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -28,7 +28,6 @@ import Icon from '../Icon/Icon.vue';
 const emit = defineEmits(['update:modelValue']);
 
 const props = defineProps({
-    date: { type: String, default: null },
     badge: { type: String, default: null },
     required: { type: Boolean, default: false },
     modelValue: { type: [Object, String], default: null },
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index fd22b8a47b0..c3f2f077f08 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -28,7 +28,6 @@ import { parseAbsoluteToLocal } from '@internationalized/date';
 const emit = defineEmits(['update:modelValue']);
 
 const props = defineProps({
-    date: { type: String, default: null },
     badge: { type: String, default: null },
     required: { type: Boolean, default: false },
     modelValue: { type: [Object, String], default: null },
diff --git a/resources/js/stories/DatePicker.stories.ts b/resources/js/stories/DatePicker.stories.ts
new file mode 100644
index 00000000000..e1882d533cd
--- /dev/null
+++ b/resources/js/stories/DatePicker.stories.ts
@@ -0,0 +1,167 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {ref} from 'vue';
+import {DatePicker} from '@ui';
+import {parseDate} from '@internationalized/date';
+
+const meta = {
+    title: 'Components/DatePicker',
+    component: DatePicker,
+    argTypes: {
+        modelValue: {
+            control: 'object',
+            description: 'The controlled date value. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
+        },
+        badge: {
+            control: 'text',
+            description: 'Badge text to display.',
+        },
+        required: { control: 'boolean' },
+        min: {
+            control: 'object',
+            description: 'The minimum selectable date. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
+        },
+        max: {
+            control: 'object',
+            description: 'The maximum selectable date. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
+        },
+        granularity: {
+            control: 'select',
+            description: 'The granularity of the date picker. <br><br> Options: `day`, `hour`, `minute`, `second`',
+            options: ['day', 'hour', 'minute', 'second'],
+        },
+        inline: {
+            control: 'boolean',
+            description: 'When `true`, the calendar is always visible instead of appearing in a popover.',
+        },
+        numberOfMonths: {
+            control: 'number',
+            description: 'The number of months to display in the calendar.',
+        },
+        clearable: {
+            control: 'boolean',
+            description: 'When `true`, a clear button is displayed to reset the date.',
+        },
+        disabled: { control: 'boolean' },
+        readOnly: { control: 'boolean' },
+        'update:modelValue': {
+            description: 'Event handler called when the date value changes. Returns the date as an ISO 8601 date and time string.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' }
+            }
+        }
+    },
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<DatePicker v-model="date" />
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { DatePicker },
+        setup() {
+            const date = ref(null);
+            return { date };
+        },
+        template: defaultCode,
+    }),
+};
+
+const withTimeCode = `
+<DatePicker v-model="appointment" granularity="minute" />
+`;
+
+export const _WithTime: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withTimeCode }
+        }
+    },
+    render: () => ({
+        components: { DatePicker },
+        setup() {
+            const appointment = ref(null);
+            return { appointment };
+        },
+        template: withTimeCode,
+    }),
+};
+
+const minMaxCode = `
+<DatePicker v-model="deadline" :min="minDate" :max="maxDate" />
+`;
+
+export const _MinMax: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: minMaxCode }
+        }
+    },
+    render: () => ({
+        components: { DatePicker },
+        setup() {
+            const deadline = ref(null);
+            const today = new Date();
+            const minDate = parseDate(today.toISOString().split('T')[0]);
+            const futureDate = new Date(today);
+            futureDate.setDate(today.getDate() + 30);
+            const maxDate = parseDate(futureDate.toISOString().split('T')[0]);
+            return { deadline, minDate, maxDate };
+        },
+        template: minMaxCode,
+    }),
+};
+
+const inlineCode = `
+<DatePicker v-model="selectedDate" inline />
+`;
+
+export const _Inline: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: inlineCode }
+        }
+    },
+    render: () => ({
+        components: { DatePicker },
+        setup() {
+            const selectedDate = ref(null);
+            return { selectedDate };
+        },
+        template: inlineCode,
+    }),
+};
+
+const multipleMonthsCode = `
+<DatePicker v-model="date" :number-of-months="2" />
+`;
+
+export const _MultipleMonths: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: multipleMonthsCode }
+        }
+    },
+    render: () => ({
+        components: { DatePicker },
+        setup() {
+            const date = ref(null);
+            return { date };
+        },
+        template: multipleMonthsCode,
+    }),
+};
diff --git a/resources/js/stories/DateRangePicker.stories.ts b/resources/js/stories/DateRangePicker.stories.ts
new file mode 100644
index 00000000000..3cfc75f6b81
--- /dev/null
+++ b/resources/js/stories/DateRangePicker.stories.ts
@@ -0,0 +1,121 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {ref} from 'vue';
+import {DateRangePicker} from '@ui';
+import {parseDate} from '@internationalized/date';
+
+const meta = {
+    title: 'Components/DateRangePicker',
+    component: DateRangePicker,
+    argTypes: {
+        modelValue: {
+            control: 'object',
+            description: 'The controlled date range value with `start` and `end` properties. <br><br> Each should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
+        },
+        badge: {
+            control: 'text',
+            description: 'Badge text to display.',
+        },
+        required: { control: 'boolean' },
+        min: {
+            control: 'object',
+            description: 'The minimum selectable date. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
+        },
+        max: {
+            control: 'object',
+            description: 'The maximum selectable date. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
+        },
+        granularity: {
+            control: 'select',
+            description: 'The granularity of the date range picker. <br><br> Options: `day`, `hour`, `minute`, `second`',
+            options: ['day', 'hour', 'minute', 'second'],
+        },
+        inline: {
+            control: 'boolean',
+            description: 'When `true`, the calendar is always visible instead of appearing in a popover.',
+        },
+        clearable: {
+            control: 'boolean',
+            description: 'When `true`, a clear button is displayed to reset the date range.',
+        },
+        disabled: { control: 'boolean' },
+        readOnly: { control: 'boolean' },
+        'update:modelValue': {
+            description: 'Event handler called when the date range value changes. <br><br> Returns an object with `start` and `end` properties, each as an ISO 8601 date and time string.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: { start: string, end: string }) => void' }
+            }
+        }
+    },
+} satisfies Meta<typeof DateRangePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<DateRangePicker v-model="dateRange" />
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { DateRangePicker },
+        setup() {
+            const dateRange = ref(null);
+            return { dateRange };
+        },
+        template: defaultCode,
+    }),
+};
+
+const minMaxCode = `
+<DateRangePicker v-model="vacation" :min="minDate" :max="maxDate" />
+`;
+
+export const _MinMax: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: minMaxCode }
+        }
+    },
+    render: () => ({
+        components: { DateRangePicker },
+        setup() {
+            const vacation = ref(null);
+            const today = new Date();
+            const minDate = parseDate(today.toISOString().split('T')[0]);
+            const futureDate = new Date(today);
+            futureDate.setDate(today.getDate() + 90);
+            const maxDate = parseDate(futureDate.toISOString().split('T')[0]);
+            return { vacation, minDate, maxDate };
+        },
+        template: minMaxCode,
+    }),
+};
+
+const inlineCode = `
+<DateRangePicker v-model="range" inline />
+`;
+
+export const _Inline: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: inlineCode }
+        }
+    },
+    render: () => ({
+        components: { DateRangePicker },
+        setup() {
+            const range = ref(null);
+            return { range };
+        },
+        template: inlineCode,
+    }),
+};
diff --git a/resources/js/stories/TimePicker.stories.ts b/resources/js/stories/TimePicker.stories.ts
new file mode 100644
index 00000000000..1144cd51d7c
--- /dev/null
+++ b/resources/js/stories/TimePicker.stories.ts
@@ -0,0 +1,80 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {ref} from 'vue';
+import {TimePicker} from '@ui';
+
+const meta = {
+    title: 'Components/TimePicker',
+    component: TimePicker,
+    argTypes: {
+        modelValue: {
+            control: 'object',
+            description: 'The controlled time value.',
+        },
+        badge: {
+            control: 'text',
+            description: 'Badge text to display.',
+        },
+        required: { control: 'boolean' },
+        granularity: {
+            control: 'select',
+            description: 'The granularity of the time picker. <br><br> Options: `hour`, `minute`, `second`',
+            options: ['hour', 'minute', 'second'],
+        },
+        clearable: {
+            control: 'boolean',
+            description: 'When `true`, clear and "set to now" buttons are displayed.',
+        },
+        'update:modelValue': {
+            description: 'Event handler called when the time value changes.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: TimeValue) => void' }
+            }
+        }
+    },
+} satisfies Meta<typeof TimePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<TimePicker v-model="time" />
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { TimePicker },
+        setup() {
+            const time = ref(null);
+            return { time };
+        },
+        template: defaultCode,
+    }),
+};
+
+const withSecondsCode = `
+<TimePicker v-model="time" granularity="second" />
+`;
+
+export const _WithSeconds: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withSecondsCode }
+        }
+    },
+    render: () => ({
+        components: { TimePicker },
+        setup() {
+            const time = ref(null);
+            return { preciseTime: time };
+        },
+        template: withSecondsCode,
+    }),
+};
diff --git a/resources/js/stories/docs/DatePicker.mdx b/resources/js/stories/docs/DatePicker.mdx
new file mode 100644
index 00000000000..f3fc909d17c
--- /dev/null
+++ b/resources/js/stories/docs/DatePicker.mdx
@@ -0,0 +1,27 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as DatePickerStories from '../DatePicker.stories';
+
+<Meta of={DatePickerStories} />
+
+# DatePicker
+A date picker component with calendar popover for selecting dates and optionally times. Supports keyboard navigation and localization.
+<Canvas of={DatePickerStories._DocsIntro} sourceState={'shown'} />
+
+## With Time
+Set the `granularity` prop to `minute` or `hour` to include time selection.
+<Canvas of={DatePickerStories._WithTime} sourceState={'shown'} />
+
+## Min and Max Dates
+Restrict selectable dates using the `min` and `max` props.
+<Canvas of={DatePickerStories._MinMax} sourceState={'shown'} />
+
+## Inline
+Display the calendar inline instead of in a popover.
+<Canvas of={DatePickerStories._Inline} sourceState={'shown'} />
+
+## Multiple Months
+Show multiple months side-by-side for easier date selection across month boundaries.
+<Canvas of={DatePickerStories._MultipleMonths} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={DatePickerStories} />
diff --git a/resources/js/stories/docs/DateRangePicker.mdx b/resources/js/stories/docs/DateRangePicker.mdx
new file mode 100644
index 00000000000..230fafeb32f
--- /dev/null
+++ b/resources/js/stories/docs/DateRangePicker.mdx
@@ -0,0 +1,19 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as DateRangePickerStories from '../DateRangePicker.stories';
+
+<Meta of={DateRangePickerStories} />
+
+# DateRangePicker
+A date range picker component for selecting a start and end date. Perfect for campaigns, bookings, and time-based filters.
+<Canvas of={DateRangePickerStories._DocsIntro} sourceState={'shown'} />
+
+## Min and Max Dates
+Restrict selectable dates using the `min` and `max` props.
+<Canvas of={DateRangePickerStories._MinMax} sourceState={'shown'} />
+
+## Inline
+Display the calendar inline instead of in a popover.
+<Canvas of={DateRangePickerStories._Inline} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={DateRangePickerStories} />
diff --git a/resources/js/stories/docs/TimePicker.mdx b/resources/js/stories/docs/TimePicker.mdx
new file mode 100644
index 00000000000..6e8f684f0ae
--- /dev/null
+++ b/resources/js/stories/docs/TimePicker.mdx
@@ -0,0 +1,15 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as TimePickerStories from '../TimePicker.stories';
+
+<Meta of={TimePickerStories} />
+
+# TimePicker
+A time picker component for selecting hours and minutes, with optional seconds. Includes convenient "set to now" and clear buttons.
+<Canvas of={TimePickerStories._DocsIntro} sourceState={'shown'} />
+
+## With Seconds
+Set the `granularity` prop to `second` to include seconds in the time selection.
+<Canvas of={TimePickerStories._WithSeconds} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={TimePickerStories} />
diff --git a/storybook-docs.md b/storybook-docs.md
index 97fc5788170..4f4b9184b6c 100644
--- a/storybook-docs.md
+++ b/storybook-docs.md
@@ -68,5 +68,6 @@ When I ask you to add documentation for a page, please keep these things in mind
 * Please don't list out the props/events (eg. bullet points) outside of the
   `argTypes` thing. Storybook will do that for us.
 * You also don't need to list all the child/related components
+* Component titles shouldn't include spaces
 
 If you have any doubts about convention, please look at other documented components or ask me. When I follow-up on something, please bear in mind that I might have edited the files so take care before updating them.
\ No newline at end of file

From 24d1ef73d2e76cd7d25932d40c9dd253882a4d44 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 14:52:54 +0000
Subject: [PATCH 12/32] wip

---
 resources/js/components/ui/Publish/Tabs.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/ui/Publish/Tabs.vue b/resources/js/components/ui/Publish/Tabs.vue
index 65fecca5a91..5025daaf250 100644
--- a/resources/js/components/ui/Publish/Tabs.vue
+++ b/resources/js/components/ui/Publish/Tabs.vue
@@ -38,7 +38,7 @@ const visibleMainTabs = computed(() => {
     });
 });
 const hasMultipleVisibleMainTabs = computed(() => visibleMainTabs.value.length > 1);
-const shouldShowSidebar = computed(() => false);
+const shouldShowSidebar = computed(() => (slots.actions || sidebarTab.value) && width.value > 920);
 const activeTab = ref(visibleMainTabs.value[0].handle);
 
 onMounted(() => setActiveTabFromHash());
@@ -125,12 +125,12 @@ function tabHasError(tab) {
                                 <Sections />
                             </slot>
 
-<!--                            <slot v-if="!shouldShowSidebar" name="actions" />-->
+                            <slot v-if="!shouldShowSidebar" name="actions" />
                         </TabProvider>
                     </component>
 
                     <aside class="space-y-6 starting-style-transition-children" v-if="shouldShowSidebar">
-<!--                        <slot name="actions" />-->
+                        <slot name="actions" />
                         <TabProvider v-if="sidebarTab" :tab="sidebarTab">
                             <Sections />
                         </TabProvider>

From 3a495e11572c69145713eea1faf6c07a486a0429 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 15:00:29 +0000
Subject: [PATCH 13/32] wip

---
 resources/js/components/ui/DataTable/Cell.vue |   1 +
 .../js/components/ui/DataTable/Column.vue     |   2 +
 resources/js/components/ui/DataTable/Row.vue  |   2 +
 .../js/components/ui/StatusIndicator.vue      |   1 -
 resources/js/components/ui/index.js           |   4 +
 resources/js/stories/CreateForm.stories.ts    | 119 +++++++++++
 resources/js/stories/DataTable.stories.ts     | 201 ++++++++++++++++++
 .../js/stories/StatusIndicator.stories.ts     | 113 ++++++++++
 resources/js/stories/docs/CreateForm.mdx      |  19 ++
 resources/js/stories/docs/DataTable.mdx       |  19 ++
 resources/js/stories/docs/StatusIndicator.mdx |  23 ++
 11 files changed, 503 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/stories/CreateForm.stories.ts
 create mode 100644 resources/js/stories/DataTable.stories.ts
 create mode 100644 resources/js/stories/StatusIndicator.stories.ts
 create mode 100644 resources/js/stories/docs/CreateForm.mdx
 create mode 100644 resources/js/stories/docs/DataTable.mdx
 create mode 100644 resources/js/stories/docs/StatusIndicator.mdx

diff --git a/resources/js/components/ui/DataTable/Cell.vue b/resources/js/components/ui/DataTable/Cell.vue
index 18767814179..a3438169289 100644
--- a/resources/js/components/ui/DataTable/Cell.vue
+++ b/resources/js/components/ui/DataTable/Cell.vue
@@ -5,6 +5,7 @@ import { cva } from 'cva';
 const variant = inject('dataTableVariant', 'normal');
 
 const props = defineProps({
+	/** Text alignment <br><br> Options: `left`, `center`, `right` */
     align: { type: String, default: 'left' },
     position: { type: Function, required: true },
     rightPosition: { type: Function, required: true },
diff --git a/resources/js/components/ui/DataTable/Column.vue b/resources/js/components/ui/DataTable/Column.vue
index 909b9713359..1d6f355f59c 100644
--- a/resources/js/components/ui/DataTable/Column.vue
+++ b/resources/js/components/ui/DataTable/Column.vue
@@ -5,7 +5,9 @@ import { cva } from 'cva';
 const variant = inject('dataTableVariant', 'normal');
 
 const props = defineProps({
+	/** Text alignment <br><br> Options: `left`, `center`, `right` */
     align: { type: String, default: 'left' },
+	/** Column width */
     width: { type: String, default: null },
 });
 
diff --git a/resources/js/components/ui/DataTable/Row.vue b/resources/js/components/ui/DataTable/Row.vue
index dad118b634f..24a0ddca708 100644
--- a/resources/js/components/ui/DataTable/Row.vue
+++ b/resources/js/components/ui/DataTable/Row.vue
@@ -2,7 +2,9 @@
 import { cva } from 'cva';
 
 const props = defineProps({
+	/** Row index */
     index: { type: Number, required: true },
+	/** Total number of rows */
     total: { type: Number, required: true },
 });
 
diff --git a/resources/js/components/ui/StatusIndicator.vue b/resources/js/components/ui/StatusIndicator.vue
index 240df443aab..0c6c8db9746 100644
--- a/resources/js/components/ui/StatusIndicator.vue
+++ b/resources/js/components/ui/StatusIndicator.vue
@@ -8,7 +8,6 @@ const props = defineProps({
         default: 'published',
         validator: (value) => ['published', 'scheduled', 'expired', 'draft', 'hidden'].includes(value),
     },
-    date: { type: String, default: null },
     showDot: { type: Boolean, default: true },
     showLabel: { type: Boolean, default: false },
     private: { type: Boolean, default: false },
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index b94ec2d4a50..91a10373b3d 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -21,6 +21,10 @@ export { default as ContextMenu } from './Context/Menu.vue';
 export { default as ContextSeparator } from './Context/Separator.vue';
 export { default as DatePicker } from './DatePicker/DatePicker.vue';
 export { default as DateRangePicker } from './DateRangePicker/DateRangePicker.vue';
+export { default as DataTable } from './DataTable/DataTable.vue';
+export { default as DataTableCell } from './DataTable/Cell.vue';
+export { default as DataTableColumn } from './DataTable/Column.vue';
+export { default as DataTableRow } from './DataTable/Row.vue';
 export { default as Description } from './Description.vue';
 export { default as DragHandle } from './DragHandle.vue';
 export { default as Dropdown } from './Dropdown/Dropdown.vue';
diff --git a/resources/js/stories/CreateForm.stories.ts b/resources/js/stories/CreateForm.stories.ts
new file mode 100644
index 00000000000..0b6153cecdd
--- /dev/null
+++ b/resources/js/stories/CreateForm.stories.ts
@@ -0,0 +1,119 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {CreateForm} from '@ui';
+import {icons} from "@/stories/icons";
+
+const meta = {
+    title: 'Components/CreateForm',
+    component: CreateForm,
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'The title displayed at the top of the form.',
+        },
+        subtitle: {
+            control: 'text',
+            description: 'Optional subtitle displayed below the title.',
+        },
+        icon: {
+            control: 'select',
+            options: icons,
+            description: 'Icon name to display next to the title. [Browse available icons](/?path=/story/components-icon--all-icons)',
+        },
+        submitText: {
+            control: 'text',
+            description: 'Text for the submit button. Defaults to the title if not provided.',
+        },
+        loading: {
+            control: 'boolean',
+            description: 'When `true`, the submit button shows a loading state.',
+        },
+        route: {
+            control: 'text',
+            description: 'The URL for form data to be submitted to.',
+        },
+        titleInstructions: {
+            control: 'text',
+            description: 'Instructions for the title field.',
+        },
+        handleInstructions: {
+            control: 'text',
+            description: 'Instructions for the handle field.',
+        },
+        withoutHandle: {
+            control: 'boolean',
+            description: 'When `true`, the handle field is not displayed.',
+        },
+    },
+} satisfies Meta<typeof CreateForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<CreateForm 
+    title="Create Collection"
+    subtitle="Collections are containers that hold entries"
+    icon="collections"
+    :route="cp_url('collections/create')"
+/>
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { CreateForm },
+        template: defaultCode,
+    }),
+};
+
+const withoutHandleCode = `
+<CreateForm 
+    without-handle
+    title="Create Blueprint"
+    subtitle="Blueprints define and organize fields into content models"
+    icon="blueprints"
+    :route="cp_url('blueprints/create')"
+/>
+`;
+
+export const _WithoutHandle: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withoutHandleCode }
+        }
+    },
+    render: () => ({
+        components: { CreateForm },
+        template: withoutHandleCode,
+    }),
+};
+
+const withInstructionsCode = `
+<CreateForm 
+    title="Create Collection"
+    subtitle="Collections are containers that hold entries"
+    icon="collections"
+    :route="cp_url('collections/create')"
+    title-instructions="The display name for this collection"
+    handle-instructions="Used in URLs and code. Can only contain letters, numbers, and underscores"
+/>
+`;
+
+export const _WithInstructions: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withInstructionsCode }
+        }
+    },
+    render: () => ({
+        components: { CreateForm },
+        template: withInstructionsCode,
+    }),
+};
diff --git a/resources/js/stories/DataTable.stories.ts b/resources/js/stories/DataTable.stories.ts
new file mode 100644
index 00000000000..bbd58c276a1
--- /dev/null
+++ b/resources/js/stories/DataTable.stories.ts
@@ -0,0 +1,201 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {DataTable, DataTableCell, DataTableColumn, DataTableRow} from '@ui';
+
+const meta = {
+    title: 'Components/DataTable',
+    component: DataTable,
+    subcomponents: {
+        DataTableColumn,
+        DataTableRow,
+        DataTableCell,
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            description: 'Controls the size and spacing of the table. <br><br> Options: `normal`, `compact`',
+            options: ['normal', 'compact'],
+        },
+    },
+} satisfies Meta<typeof DataTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<DataTable>
+    <template #columns>
+        <DataTableColumn>Name</DataTableColumn>
+        <DataTableColumn>GitHub</DataTableColumn>
+        <DataTableColumn align="right">Role</DataTableColumn>
+    </template>
+    <template #rows>
+        <DataTableRow :index="0" :total="3">
+            <template #default="{ position, rightPosition }">
+                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
+                    Jack McDade
+                </DataTableCell>
+                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
+                    @jackmcdade
+                </DataTableCell>
+                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
+                    Founder
+                </DataTableCell>
+            </template>
+        </DataTableRow>
+        <DataTableRow :index="1" :total="3">
+            <template #default="{ position, rightPosition }">
+                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
+                    Jason Varga
+                </DataTableCell>
+                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
+                    @jasonvarga
+                </DataTableCell>
+                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
+                    Lead Developer
+                </DataTableCell>
+            </template>
+        </DataTableRow>
+        <DataTableRow :index="2" :total="3">
+            <template #default="{ position, rightPosition }">
+                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
+                    Duncan McClean
+                </DataTableCell>
+                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
+                    @duncanmcclean
+                </DataTableCell>
+                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
+                    Developer
+                </DataTableCell>
+            </template>
+        </DataTableRow>
+    </template>
+</DataTable>
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { DataTable, DataTableColumn, DataTableRow, DataTableCell },
+        template: defaultCode,
+    }),
+};
+
+const compactCode = `
+<DataTable variant="compact">
+    <template #columns>
+        <DataTableColumn>Product</DataTableColumn>
+        <DataTableColumn>SKU</DataTableColumn>
+        <DataTableColumn align="right">Stock</DataTableColumn>
+    </template>
+    <template #rows>
+        <DataTableRow :index="0" :total="2">
+            <template #default="{ position, rightPosition }">
+                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
+                    T-Shirt
+                </DataTableCell>
+                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
+                    TSH-001
+                </DataTableCell>
+                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
+                    42
+                </DataTableCell>
+            </template>
+        </DataTableRow>
+        <DataTableRow :index="1" :total="2">
+            <template #default="{ position, rightPosition }">
+                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
+                    Hoodie
+                </DataTableCell>
+                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
+                    HOD-002
+                </DataTableCell>
+                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
+                    18
+                </DataTableCell>
+            </template>
+        </DataTableRow>
+    </template>
+</DataTable>
+`;
+
+export const _Compact: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: compactCode }
+        }
+    },
+    render: () => ({
+        components: { DataTable, DataTableColumn, DataTableRow, DataTableCell },
+        template: compactCode,
+    }),
+};
+
+const columnWidthCode = `
+<DataTable>
+    <template #columns>
+        <DataTableColumn width="60%">Title</DataTableColumn>
+        <DataTableColumn width="20%">Status</DataTableColumn>
+        <DataTableColumn width="20%" align="right">Date</DataTableColumn>
+    </template>
+    <template #rows>
+        <DataTableRow :index="0" :total="2">
+            <template #default="{ position, rightPosition }">
+                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
+                    Statamic 6 is Out!
+                </DataTableCell>
+                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
+                    Draft
+                </DataTableCell>
+                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
+                    January 5th, 2026
+                </DataTableCell>
+            </template>
+        </DataTableRow>
+        <DataTableRow :index="0" :total="2">
+            <template #default="{ position, rightPosition }">
+                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
+                    Statamic 6 Sneak Peek
+                </DataTableCell>
+                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
+                    Published
+                </DataTableCell>
+                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
+                    July 14th, 2025
+                </DataTableCell>
+            </template>
+        </DataTableRow>
+        <DataTableRow :index="1" :total="2">
+            <template #default="{ position, rightPosition }">
+                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
+                    The Brand New Statamic Experience
+                </DataTableCell>
+                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
+                    Published
+                </DataTableCell>
+                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
+                    December 10th, 2024
+                </DataTableCell>
+            </template>
+        </DataTableRow>
+    </template>
+</DataTable>
+`;
+
+export const _ColumnWidth: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: columnWidthCode }
+        }
+    },
+    render: () => ({
+        components: { DataTable, DataTableColumn, DataTableRow, DataTableCell },
+        template: columnWidthCode,
+    }),
+};
diff --git a/resources/js/stories/StatusIndicator.stories.ts b/resources/js/stories/StatusIndicator.stories.ts
new file mode 100644
index 00000000000..88f7c4cca25
--- /dev/null
+++ b/resources/js/stories/StatusIndicator.stories.ts
@@ -0,0 +1,113 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {StatusIndicator} from '@ui';
+
+const meta = {
+    title: 'Components/StatusIndicator',
+    component: StatusIndicator,
+    argTypes: {
+        status: {
+            control: 'select',
+            description: 'The status to display. <br><br> Options: `published`, `scheduled`, `expired`, `draft`, `hidden`',
+            options: ['published', 'scheduled', 'expired', 'draft', 'hidden'],
+        },
+        showDot: {
+            control: 'boolean',
+            description: 'When `true`, displays a colored dot indicator.',
+        },
+        showLabel: {
+            control: 'boolean',
+            description: 'When `true`, displays the status label text.',
+        },
+        private: {
+            control: 'boolean',
+            description: 'When `true`, changes the appearance of published status to indicate private content.',
+        },
+    },
+} satisfies Meta<typeof StatusIndicator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<div class="flex items-center gap-4">
+    <StatusIndicator status="published" />
+    <StatusIndicator status="scheduled" />
+    <StatusIndicator status="expired" />
+    <StatusIndicator status="draft" />
+</div>
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { StatusIndicator },
+        template: defaultCode,
+    }),
+};
+
+const withLabelCode = `
+<div class="flex items-center gap-4">
+    <StatusIndicator status="published" show-label />
+    <StatusIndicator status="scheduled" show-label />
+    <StatusIndicator status="expired" show-label />
+    <StatusIndicator status="draft" show-label />
+</div>
+`;
+
+export const _WithLabel: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withLabelCode }
+        }
+    },
+    render: () => ({
+        components: { StatusIndicator },
+        template: withLabelCode,
+    }),
+};
+
+const privateCode = `
+<div class="flex items-center gap-4">
+    <StatusIndicator status="published" private />
+    <StatusIndicator status="published" private show-label />
+</div>
+`;
+
+export const _Private: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: privateCode }
+        }
+    },
+    render: () => ({
+        components: { StatusIndicator },
+        template: privateCode,
+    }),
+};
+
+const withoutDotCode = `
+<div class="flex items-center gap-4">
+    <StatusIndicator status="published" :show-dot="false" show-label />
+    <StatusIndicator status="draft" :show-dot="false" show-label />
+</div>
+`;
+
+export const _WithoutDot: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: withoutDotCode }
+        }
+    },
+    render: () => ({
+        components: { StatusIndicator },
+        template: withoutDotCode,
+    }),
+};
diff --git a/resources/js/stories/docs/CreateForm.mdx b/resources/js/stories/docs/CreateForm.mdx
new file mode 100644
index 00000000000..6d4802caf3c
--- /dev/null
+++ b/resources/js/stories/docs/CreateForm.mdx
@@ -0,0 +1,19 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as CreateFormStories from '../CreateForm.stories';
+
+<Meta of={CreateFormStories} />
+
+# CreateForm
+A pre-built form component for creating new resources with automatic slug generation. Includes title and handle fields with customizable instructions and automatic form submission.
+<Canvas of={CreateFormStories._DocsIntro} sourceState={'shown'} />
+
+## Without Handle
+Use the `withoutHandle` prop to hide the handle field for resources that don't need slugs.
+<Canvas of={CreateFormStories._WithoutHandle} sourceState={'shown'} />
+
+## With Instructions
+Add helpful instructions to guide users when filling out the form.
+<Canvas of={CreateFormStories._WithInstructions} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={CreateFormStories} />
diff --git a/resources/js/stories/docs/DataTable.mdx b/resources/js/stories/docs/DataTable.mdx
new file mode 100644
index 00000000000..7fc2c3b4cf5
--- /dev/null
+++ b/resources/js/stories/docs/DataTable.mdx
@@ -0,0 +1,19 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as DataTableStories from '../DataTable.stories';
+
+<Meta of={DataTableStories} />
+
+# DataTable
+A styled data table component with rounded corners and proper borders. Uses a slot-based API for defining columns and rows with automatic border positioning.
+<Canvas of={DataTableStories._DocsIntro} sourceState={'shown'} />
+
+## Compact Variant
+Use the `compact` variant for denser tables with reduced padding.
+<Canvas of={DataTableStories._Compact} sourceState={'shown'} />
+
+## Column Width
+Control column widths using the `width` prop on DataTableColumn.
+<Canvas of={DataTableStories._ColumnWidth} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={DataTableStories} />
diff --git a/resources/js/stories/docs/StatusIndicator.mdx b/resources/js/stories/docs/StatusIndicator.mdx
new file mode 100644
index 00000000000..26ace21944f
--- /dev/null
+++ b/resources/js/stories/docs/StatusIndicator.mdx
@@ -0,0 +1,23 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as StatusIndicatorStories from '../StatusIndicator.stories';
+
+<Meta of={StatusIndicatorStories} />
+
+# StatusIndicator
+Display the publication status of entries with a colored dot indicator and optional label. Supports different statuses with automatic color coding.
+<Canvas of={StatusIndicatorStories._DocsIntro} sourceState={'shown'} />
+
+## With Label
+Show the status label alongside the dot indicator.
+<Canvas of={StatusIndicatorStories._WithLabel} sourceState={'shown'} />
+
+## Private Status
+Indicate private or hidden content with a special appearance.
+<Canvas of={StatusIndicatorStories._Private} sourceState={'shown'} />
+
+## Without Dot
+Display only the label without the colored dot.
+<Canvas of={StatusIndicatorStories._WithoutDot} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={StatusIndicatorStories} />

From 438be2e0173b6eca6581e1e95d85bf78c6f7185e Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 16:58:49 +0000
Subject: [PATCH 14/32] wip

---
 .storybook/preview.ts                         |   5 +
 .storybook/public/img/publish-form-dark.webp  | Bin 86862 -> 0 bytes
 .storybook/public/img/publish-form.webp       | Bin 87046 -> 0 bytes
 .storybook/storybook.css                      |   2 +
 .../js/components/ui/Publish/Container.vue    |  16 +
 resources/js/stories/Dropdown.stories.ts      |  28 +-
 resources/js/stories/Listing.stories.ts       | 312 ++++++++++++++++++
 .../js/stories/PublishContainer.stories.ts    |  47 ++-
 resources/js/stories/docs/Listing.mdx         |  22 ++
 .../js/stories/docs/PublishContainer.mdx      |  13 +-
 10 files changed, 421 insertions(+), 24 deletions(-)
 delete mode 100644 .storybook/public/img/publish-form-dark.webp
 delete mode 100644 .storybook/public/img/publish-form.webp
 create mode 100644 resources/js/stories/Listing.stories.ts
 create mode 100644 resources/js/stories/docs/Listing.mdx

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 86e7d1a1b25..6da54bc1e07 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -43,6 +43,11 @@ setup(async (app) => {
               //
           }
       },
+      $progress: {
+          loading(name, loading) {
+              //
+          }
+      }
   };
 
   app.config.globalProperties.__ = translate;
diff --git a/.storybook/public/img/publish-form-dark.webp b/.storybook/public/img/publish-form-dark.webp
deleted file mode 100644
index 00521eb55dc5eae3d5e574288407a4bbeb41eade..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 86862
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
b8-W{v8-W{v{~duS-0b^?P4KQE!L9!SNgsq@

diff --git a/.storybook/public/img/publish-form.webp b/.storybook/public/img/publish-form.webp
deleted file mode 100644
index 0a1968bdcc61edcfc16e664837c2eeb450834c8f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 87046
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
YKnb7(Py+u80`WKSmg!;SOx3gh0hMAzM*si-

diff --git a/.storybook/storybook.css b/.storybook/storybook.css
index 1671dda93de..53ca043986f 100644
--- a/.storybook/storybook.css
+++ b/.storybook/storybook.css
@@ -1,5 +1,7 @@
 @import 'tailwindcss';
 @import '../resources/css/ui.css';
+@import '../resources/css/core/utilities.css';
+@import '../resources/css/elements/tables.css';
 @custom-variant dark (&:where(.dark, .dark *));
 
 .sbdocs h1:not(.sbdocs-preview *, .sbdocs-preview h1),
diff --git a/resources/js/components/ui/Publish/Container.vue b/resources/js/components/ui/Publish/Container.vue
index d851cefcbdb..45563e1d6f0 100644
--- a/resources/js/components/ui/Publish/Container.vue
+++ b/resources/js/components/ui/Publish/Container.vue
@@ -19,56 +19,72 @@ const props = defineProps({
         type: String,
         default: () => uniqid(),
     },
+	/** Reference of the item being edited. eg. entry::the-entry-id */
     reference: {
         type: String,
     },
+	/** The blueprint's publish array. */
     blueprint: {
         type: Object,
+		required: true,
     },
+	/** The controlled publish form values. */
     modelValue: {
         type: Object,
         default: () => ({}),
     },
+	/** Extra values to be made available to field conditions. */
     extraValues: {
         type: Object,
         default: () => ({}),
     },
+	/** Fieldtype metadata. */
     meta: {
         type: Object,
         default: () => ({}),
     },
+	/** Publish form values from the origin localization. */
     originValues: {
         type: Object,
     },
+	/** Fieldtype metadata from the origin localization. */
     originMeta: {
         type: Object,
     },
+	/** Validation errors. */
     errors: {
         type: Object,
         default: () => ({}),
     },
+	/** The site handle of the active localization. */
     site: {
         type: String,
     },
+	/** Array of field handles, indicating which fields have changed. */
     modifiedFields: {
         type: Array,
     },
+	/** Determines whether dirty state tracking is enabled. */
     trackDirtyState: {
         type: Boolean,
         default: true,
     },
+	/** Confirmation text when syncing a localized field with the origin value. */
     syncFieldConfirmationText: {
         type: String,
         default: () => __('Are you sure?'),
     },
+	/** Marks the publish form as read-only. */
     readOnly: {
         type: Boolean,
         default: false,
     },
+	/** Marks it as a "config" form, which renders slightly differently. */
     asConfig: {
         type: Boolean,
         default: false,
     },
+	/** Determines whether the active tab is remembered in the URL hash. */
     rememberTab: {
         type: Boolean,
         default: false,
diff --git a/resources/js/stories/Dropdown.stories.ts b/resources/js/stories/Dropdown.stories.ts
index e343502933c..27e1a119ee4 100644
--- a/resources/js/stories/Dropdown.stories.ts
+++ b/resources/js/stories/Dropdown.stories.ts
@@ -12,20 +12,20 @@ const meta = {
         DropdownSeparator,
     },
     argTypes: {
-        align: {
-            control: 'select',
-            options: ['start', 'center', 'end'],
-            description: 'The preferred alignment against the trigger. May change when collisions occur. <br><br> Options: `start`, `center`, `end`',
-        },
-        offset: {
-            control: 'number',
-            description: 'The distance in pixels from the trigger.',
-        },
-        side: {
-            control: 'select',
-            options: ['top', 'bottom', 'left', 'right'],
-            description: 'The preferred side of the trigger to render against when open. <br><br> Options: `top`, `bottom`, `left`, `right`',
-        },
+        // align: {
+        //     control: 'select',
+        //     options: ['start', 'center', 'end'],
+        //     description: 'The preferred alignment against the trigger. May change when collisions occur. <br><br> Options: `start`, `center`, `end`',
+        // },
+        // offset: {
+        //     control: 'number',
+        //     description: 'The distance in pixels from the trigger.',
+        // },
+        // side: {
+        //     control: 'select',
+        //     options: ['top', 'bottom', 'left', 'right'],
+        //     description: 'The preferred side of the trigger to render against when open. <br><br> Options: `top`, `bottom`, `left`, `right`',
+        // },
     },
 } satisfies Meta<typeof Dropdown>;
 
diff --git a/resources/js/stories/Listing.stories.ts b/resources/js/stories/Listing.stories.ts
new file mode 100644
index 00000000000..82a00b55589
--- /dev/null
+++ b/resources/js/stories/Listing.stories.ts
@@ -0,0 +1,312 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {
+    Badge,
+    DropdownItem,
+    Listing,
+    ListingCustomizeColumns,
+    ListingFilters,
+    ListingHeaderCell,
+    ListingPagination,
+    ListingPresets,
+    ListingPresetTrigger,
+    ListingRowActions,
+    ListingSearch,
+    ListingTable,
+    ListingTableBody,
+    ListingTableHead,
+    ListingToggleAll
+} from '@ui';
+
+const meta = {
+    title: 'Components/Listing',
+    component: Listing,
+    subcomponents: {
+        ListingCustomizeColumns,
+        ListingFilters,
+        ListingHeaderCell,
+        ListingPagination,
+        ListingPresets,
+        ListingPresetTrigger,
+        ListingRowActions,
+        ListingSearch,
+        ListingTable,
+        ListingTableBody,
+        ListingTableHead,
+        ListingToggleAll,
+    },
+    argTypes: {
+        url: {
+            control: 'text',
+            description: 'The URL from which to retrieve results. Either use this or `items`.',
+        },
+        items: {
+            control: 'object',
+            description: 'Array of items to display in the listing. When provided, sorting and filtering is done client-side. Either use this or `url`.',
+        },
+        columns: {
+            control: 'object',
+            description: 'The columns to display. Can be array of strings or column definitions.',
+        },
+        allowPresets: {
+            control: 'boolean',
+            description: 'When `true`, allows users to save and load column/filter presets.',
+        },
+        allowBulkActions: {
+            control: 'boolean',
+            description: 'When `true`, bulk actions are available when items are selected.',
+        },
+        actionUrl: {
+            control: 'text',
+            description: 'The URL from which to retrieve actions.',
+        },
+        actionContext: {
+            control: 'object',
+            description: 'Extra data to pass to the server when using actions.',
+        },
+        allowActionsWhileReordering: {
+            control: 'boolean',
+            description: 'When `true`, enables the action dropdown while reordering is enabled.',
+        },
+        reorderable: {
+            control: 'boolean',
+            description: 'When `true`, adds drag handles to the rows.',
+        },
+        preferencesPrefix: {
+            control: 'text',
+            description: 'Any preferences (preferred columns, etc) will be saved nested under this.',
+        },
+        allowCustomizingColumns: {
+            control: 'boolean',
+            description: 'When `true`, users can show/hide columns.',
+        },
+        sortColumn: {
+            control: 'text',
+            description: 'Defines the sort column.',
+        },
+        sortDirection: {
+            control: 'select',
+            description: 'Defines the sort direction. Defaults to `asc` for most fields, `desc` for dates. <br><br> Options: `asc`, `desc`',
+            options: ['asc', 'desc'],
+        },
+        sortable: {
+            control: 'boolean',
+            description: 'When `true`, columns can be sorted by clicking on headers.',
+        },
+        selections: {
+            control: 'object',
+            description: 'Array of checked item IDs.',
+        },
+        maxSelections: {
+            control: 'number',
+            description: 'Maximum number of items that can be selected.',
+        },
+        pushQuery: {
+            control: 'boolean',
+            description: 'When `true`, adds the parameters to the current URL.',
+        },
+        additionalParameters: {
+            control: 'object',
+            description: 'Extra data to send to the AJAX URL.',
+        },
+        allowSearch: {
+            control: 'boolean',
+            description: 'When `true`, displays a search input for filtering items.',
+        },
+        searchQuery: {
+            control: 'text',
+            description: 'The search query value.',
+        },
+        filters: {
+            control: 'object',
+            description: 'Array of filter definitions. You can get this by doing `Scope::filters($name, $context)`',
+        },
+        filtersForReordering: {
+            control: 'object',
+            description: 'A function that returns array of filter values to be activated when reordering is enabled.',
+        },
+        perPage: {
+            control: 'number',
+            description: 'Number of items to display per page.',
+        },
+        showPaginationTotals: {
+            control: 'boolean',
+            description: 'When `true`, shows the totals in the paginator. e.g. "1-5 of 10"',
+        },
+        showPaginationPageLinks: {
+            control: 'boolean',
+            description: 'When `true`, shows the page links. e.g. 1,2,3,4. With this disabled you\'ll just get the prev/next arrows.',
+        },
+        showPaginationPerPageSelector: {
+            control: 'boolean',
+            description: 'When `true`, shows the per page dropdown.',
+        },
+        'update:columns': {
+            description: 'Event handler called when the column customizer is used.',
+            table: {
+                category: 'events',
+                type: { summary: '(columns: Array) => void' }
+            }
+        },
+        'update:sortColumn': {
+            description: 'Event handler called when a table header is clicked.',
+            table: {
+                category: 'events',
+                type: { summary: '(column: string) => void' }
+            }
+        },
+        'update:sortDirection': {
+            description: 'Event handler called when a table header is clicked.',
+            table: {
+                category: 'events',
+                type: { summary: '(direction: string) => void' }
+            }
+        },
+        'update:selections': {
+            description: 'Event handler called when checkboxes are used.',
+            table: {
+                category: 'events',
+                type: { summary: '(selections: Array) => void' }
+            }
+        },
+        'update:searchQuery': {
+            description: 'Event handler called when the search input is used.',
+            table: {
+                category: 'events',
+                type: { summary: '(query: string) => void' }
+            }
+        },
+        requestCompleted: {
+            description: 'Event handler called when the AJAX request is completed.',
+            table: {
+                category: 'events',
+                type: { summary: '(response) => void' }
+            }
+        },
+        reordered: {
+            description: 'Event handler called after a row has been moved. Emits an array of IDs.',
+            table: {
+                category: 'events',
+                type: { summary: '(order: Array) => void' }
+            }
+        },
+        refreshing: {
+            description: 'Event handler called when the listing should refresh, for example when an action is completed. Useful when using the `items` prop.',
+            table: {
+                category: 'events',
+                type: { summary: '() => void' }
+            }
+        },
+    },
+} satisfies Meta<typeof Listing>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<Listing 
+    :items="[
+        { id: 1, name: 'Jack McDade', location: 'USA 🇺🇸', role: 'Founder' },
+        { id: 2, name: 'Jason Varga', location: 'USA 🇺🇸', role: 'Lead Developer' },
+        { id: 3, name: 'Joshua Blum', location: 'Germany 🇩🇪', role: 'Support' },
+        { id: 4, name: 'Duncan McClean', location: 'Scotland 🏴󠁧󠁢󠁳󠁣󠁴󠁿', role: 'Developer' },
+        { id: 5, name: 'Jay George', location: 'England 🏴󠁧󠁢󠁥󠁮󠁧󠁿️', role: 'Developer' },
+        { id: 6, name: 'David Hasselhoff', location: 'USA 🇺🇸', role: 'The Hoff' },
+    ]"
+    :columns="[
+        { field: 'name', label: 'Name', sortable: true },
+        { field: 'location', label: 'Location', sortable: true },
+        { field: 'role', label: 'Role', sortable: true },
+    ]"
+/>
+`;
+
+// passing dropdown actions
+// using a json url
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { Listing },
+        template: defaultCode,
+    }),
+};
+
+const customCellsCode = `
+<Listing 
+    :items="[
+        { id: 1, name: 'Jack McDade', location: 'USA 🇺🇸', role: 'Founder' },
+        { id: 2, name: 'Jason Varga', location: 'USA 🇺🇸', role: 'Lead Developer' },
+        { id: 3, name: 'Joshua Blum', location: 'Germany 🇩🇪', role: 'Support' },
+        { id: 4, name: 'Duncan McClean', location: 'Scotland 🏴󠁧󠁢󠁳󠁣󠁴󠁿', role: 'Developer' },
+        { id: 5, name: 'Jay George', location: 'England 🏴󠁧󠁢󠁥󠁮󠁧󠁿️', role: 'Developer' },
+        { id: 6, name: 'David Hasselhoff', location: 'USA 🇺🇸', role: 'The Hoff' },
+    ]"
+    :columns="[
+        { field: 'name', label: 'Name', sortable: true },
+        { field: 'location', label: 'Location', sortable: true },
+        { field: 'role', label: 'Role', sortable: true },
+    ]"
+>
+    <template #cell-name="{ row, value }">
+        <a class="title-index-field" href="#" v-html="value" />
+    </template>
+
+    <template #cell-role="{ row, value }">
+        <Badge :text="value" pill />
+    </template>
+</Listing>
+`;
+
+export const _CustomCells: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: customCellsCode }
+        }
+    },
+    render: () => ({
+        components: { Listing, Badge },
+        template: customCellsCode,
+    }),
+};
+
+const actionsCode = `
+<Listing 
+    :items="[
+        { id: 1, name: 'Jack McDade', location: 'USA 🇺🇸', role: 'Founder' },
+        { id: 2, name: 'Jason Varga', location: 'USA 🇺🇸', role: 'Lead Developer' },
+        { id: 3, name: 'Joshua Blum', location: 'Germany 🇩🇪', role: 'Support' },
+        { id: 4, name: 'Duncan McClean', location: 'Scotland 🏴󠁧󠁢󠁳󠁣󠁴󠁿', role: 'Developer' },
+        { id: 5, name: 'Jay George', location: 'England 🏴󠁧󠁢󠁥󠁮󠁧󠁿️', role: 'Developer' },
+        { id: 6, name: 'David Hasselhoff', location: 'USA 🇺🇸', role: 'The Hoff' },
+    ]"
+    :columns="[
+        { field: 'name', label: 'Name', sortable: true },
+        { field: 'location', label: 'Location', sortable: true },
+        { field: 'role', label: 'Role', sortable: true },
+    ]"
+>
+    <template #prepended-row-actions="{ row: entry }">
+        <DropdownItem text="Visit Profile" href="#" icon="eye" target="_blank" />
+        <DropdownItem text="Edit" href="#" icon="edit" />
+    </template>
+</Listing>
+`;
+
+export const _WithActions: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: actionsCode }
+        }
+    },
+    render: () => ({
+        components: { Listing, Badge, DropdownItem },
+        template: actionsCode,
+    }),
+};
\ No newline at end of file
diff --git a/resources/js/stories/PublishContainer.stories.ts b/resources/js/stories/PublishContainer.stories.ts
index a53be93a1f1..d92dbc6f8e5 100644
--- a/resources/js/stories/PublishContainer.stories.ts
+++ b/resources/js/stories/PublishContainer.stories.ts
@@ -1,9 +1,29 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { PublishContainer } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {
+    PublishComponents,
+    PublishContainer,
+    PublishField,
+    PublishFields,
+    PublishFieldsProvider,
+    PublishLocalizations,
+    PublishSections,
+    PublishTabs,
+    TabProvider,
+} from '@ui';
 
 const meta = {
     title: 'Components/PublishContainer',
     component: PublishContainer,
+    subcomponents: {
+        PublishComponents,
+        PublishFields,
+        PublishField,
+        PublishFieldsProvider,
+        PublishLocalizations,
+        PublishSections,
+        TabProvider,
+        PublishTabs,
+    },
     parameters: {
         docs: {
             description: {
@@ -11,6 +31,29 @@ const meta = {
             },
         },
     },
+    argTypes: {
+        'update:modelValue': {
+            description: 'Event handler called when publish form values change.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' },
+            },
+        },
+        'update:modifiedFields': {
+            description: "Event handler called when the form's `modifiedFields` state changes (eg. a field's value is updated for the first time).",
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' },
+            },
+        },
+        'update:visibleFields': {
+            description: `Event handler called when the form's "visible values" state changes (eg. values from fields _not_ hidden by conditions).`,
+            table: {
+                category: 'events',
+                type: { summary: '(value: string) => void' },
+            },
+        },
+    },
 } satisfies Meta<typeof PublishContainer>;
 
 export default meta;
diff --git a/resources/js/stories/docs/Listing.mdx b/resources/js/stories/docs/Listing.mdx
new file mode 100644
index 00000000000..dd2fe0d3c1f
--- /dev/null
+++ b/resources/js/stories/docs/Listing.mdx
@@ -0,0 +1,22 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as ListingStories from '../Listing.stories';
+
+<Meta of={ListingStories} />
+
+# Listing
+A full-featured data listing component with sorting, searching, pagination, column customization, and bulk actions. Data can either come from the `items` prop or from a JSON endpoint.
+<Canvas of={ListingStories._DocsIntro} sourceState={'shown'} />
+
+## Customizing the cells
+Customize how individual cells are rendered using cell slots. Use the pattern `#cell-{fieldName}` to target specific columns.
+<Canvas of={ListingStories._CustomCells} sourceState={'shown'} />
+
+## With Actions
+You can add your own dropdown items via the `prepended-row-actions` slot.
+<Canvas of={ListingStories._WithActions} sourceState={'shown'} />
+
+## Using a JSON endpoint
+The `Listing` component can pull data from a JSON endpoint. Simply specify a `url` and return an [API Resource](https://laravel.com/docs/12.x/eloquent-resources#main-content) from your controller.
+
+## Arguments
+<ArgTypes of={ListingStories} />
diff --git a/resources/js/stories/docs/PublishContainer.mdx b/resources/js/stories/docs/PublishContainer.mdx
index 2a51a70c339..565800e53db 100644
--- a/resources/js/stories/docs/PublishContainer.mdx
+++ b/resources/js/stories/docs/PublishContainer.mdx
@@ -3,14 +3,11 @@ import * as PublishContainerStories from '../PublishContainer.stories';
 
 <Meta of={PublishContainerStories} />
 
-# Publish Container
+# PublishContainer
 The `PublishContainer` component is used to create Publish Forms in the Control Panel. It handles field rendering, validation, localization and state management.
 
-<figure>
-    <picture>
-        <source srcset="/img/publish-form-dark.webp" media="(prefers-color-scheme: dark)" />
-        <img src="/img/publish-form.webp" alt="Screenshot of a custom Publish Form" />
-    </picture>
-</figure>
+## Learn more
+To learn more about the `PublishContainer` component (and publish forms in general), please visit the ["Publish Forms"](https://statamic.dev/control-panel/publish-forms) page on our main documentation site.
 
-To learn more about the `PublishContainer` component (and publish forms in general), visit the ["Publish Forms"](https://statamic.dev/control-panel/publish-forms) page on our main documentation site.
\ No newline at end of file
+## Arguments
+<ArgTypes of={PublishContainerStories} />
\ No newline at end of file

From 91b3f603e09f0062a337dd35bf5e5c9972ee3165 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 17:15:14 +0000
Subject: [PATCH 15/32] wip

---
 resources/js/stories/Checkbox.stories.ts   | 283 +++++++++++++++++++++
 resources/js/stories/DragHandle.stories.ts |  26 ++
 resources/js/stories/docs/Checkbox.mdx     |  32 +++
 resources/js/stories/docs/DragHandle.mdx   |  12 +
 4 files changed, 353 insertions(+)
 create mode 100644 resources/js/stories/Checkbox.stories.ts
 create mode 100644 resources/js/stories/DragHandle.stories.ts
 create mode 100644 resources/js/stories/docs/Checkbox.mdx
 create mode 100644 resources/js/stories/docs/DragHandle.mdx

diff --git a/resources/js/stories/Checkbox.stories.ts b/resources/js/stories/Checkbox.stories.ts
new file mode 100644
index 00000000000..fa54b07c962
--- /dev/null
+++ b/resources/js/stories/Checkbox.stories.ts
@@ -0,0 +1,283 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { Checkbox, CheckboxGroup } from '@ui';
+import { ref } from 'vue';
+
+const meta = {
+    title: 'Components/Checkbox',
+    component: Checkbox,
+    subcomponents: { CheckboxGroup },
+    argTypes: {
+        modelValue: {
+            control: 'boolean',
+            description: 'The checked state of the checkbox.',
+        },
+        label: {
+            control: 'text',
+            description: 'Label text to display next to the checkbox.',
+        },
+        description: {
+            control: 'text',
+            description: 'Description text to display below the label.',
+        },
+        value: {
+            control: 'text',
+            description: 'Value of the checkbox when used in a group.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'When `true`, disables the checkbox.',
+        },
+        readOnly: {
+            control: 'boolean',
+            description: 'When `true`, makes the checkbox read-only.',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'base'],
+            description: 'Controls the size of the checkbox.',
+        },
+        align: {
+            control: 'select',
+            options: ['start', 'center'],
+            description: 'Controls the vertical alignment of the checkbox with its label.',
+        },
+        solo: {
+            control: 'boolean',
+            description: 'When `true`, hides the label and description. Use this when the checkbox is used in a context where the label is provided elsewhere, like in a table cell.',
+        },
+        name: {
+            control: 'text',
+            description: 'Name attribute for the checkbox input.',
+        },
+        'update:modelValue': {
+            description: 'Event handler called when the checkbox is checked or unchecked.',
+            table: {
+                category: 'events',
+                type: { summary: '(checked: boolean) => void' },
+            },
+        },
+        default: {
+            control: false,
+            description: 'Content to display as the label.',
+            table: { category: 'slots' },
+        },
+    },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const basicCode = `<script setup>
+import { ref } from 'vue';
+const checked = ref(false);
+</script>
+
+<template>
+    <Checkbox v-model="checked" label="Accept terms and conditions" />
+</template>`;
+
+export const Basic: Story = {
+    render: () => ({
+        components: { Checkbox },
+        setup() {
+            const checked = ref(false);
+            return { checked };
+        },
+        template: `<Checkbox v-model="checked" label="Accept terms and conditions" />`,
+    }),
+    parameters: {
+        docs: {
+            source: { code: basicCode },
+        },
+    },
+};
+
+const withDescriptionCode = `<script setup>
+import { ref } from 'vue';
+const checked = ref(false);
+</script>
+
+<template>
+    <Checkbox 
+        v-model="checked" 
+        label="Subscribe to newsletter"
+        description="Receive weekly updates about new features and content"
+    />
+</template>`;
+
+export const WithDescription: Story = {
+    render: () => ({
+        components: { Checkbox },
+        setup() {
+            const checked = ref(false);
+            return { checked };
+        },
+        template: `<Checkbox 
+            v-model="checked" 
+            label="Subscribe to newsletter"
+            description="Receive weekly updates about new features and content"
+        />`,
+    }),
+    parameters: {
+        docs: {
+            source: { code: withDescriptionCode },
+        },
+    },
+};
+
+const sizesCode = `<script setup>
+import { ref } from 'vue';
+const checked = ref(false);
+</script>
+
+<template>
+    <div class="space-y-3">
+        <Checkbox v-model="checked" label="Small checkbox" size="sm" />
+        <Checkbox v-model="checked" label="Base checkbox" size="base" />
+    </div>
+</template>`;
+
+export const Sizes: Story = {
+    render: () => ({
+        components: { Checkbox },
+        setup() {
+            const checked = ref(false);
+            return { checked };
+        },
+        template: `<div class="space-y-3">
+            <Checkbox v-model="checked" label="Small checkbox" size="sm" />
+            <Checkbox v-model="checked" label="Base checkbox" size="base" />
+        </div>`,
+    }),
+    parameters: {
+        docs: {
+            source: { code: sizesCode },
+        },
+    },
+};
+
+const disabledCode = `<script setup>
+import { ref } from 'vue';
+const checked = ref(true);
+</script>
+
+<template>
+    <Checkbox v-model="checked" label="Disabled checkbox" disabled />
+</template>`;
+
+export const Disabled: Story = {
+    render: () => ({
+        components: { Checkbox },
+        setup() {
+            const checked = ref(true);
+            return { checked };
+        },
+        template: `<Checkbox v-model="checked" label="Disabled checkbox" disabled />`,
+    }),
+    parameters: {
+        docs: {
+            source: { code: disabledCode },
+        },
+    },
+};
+
+const soloCode = `<script setup>
+import { ref } from 'vue';
+const checked = ref(false);
+</script>
+
+<template>
+    <Checkbox 
+        v-model="checked" 
+        label="Hidden label for accessibility"
+        solo
+    />
+</template>`;
+
+export const Solo: Story = {
+    render: () => ({
+        components: { Checkbox },
+        setup() {
+            const checked = ref(false);
+            return { checked };
+        },
+        template: `<Checkbox 
+            v-model="checked" 
+            label="Hidden label for accessibility"
+            solo
+        />`,
+    }),
+    parameters: {
+        docs: {
+            source: { code: soloCode },
+        },
+    },
+};
+
+const groupCode = `<script setup>
+import { ref } from 'vue';
+const selected = ref(['html', 'css']);
+</script>
+
+<template>
+    <CheckboxGroup v-model="selected">
+        <Checkbox value="html" label="HTML" />
+        <Checkbox value="css" label="CSS" />
+        <Checkbox value="javascript" label="JavaScript" />
+        <Checkbox value="vue" label="Vue.js" />
+    </CheckboxGroup>
+</template>`;
+
+export const Group: Story = {
+    render: () => ({
+        components: { Checkbox, CheckboxGroup },
+        setup() {
+            const selected = ref(['html', 'css']);
+            return { selected };
+        },
+        template: `<CheckboxGroup v-model="selected">
+            <Checkbox value="html" label="HTML" />
+            <Checkbox value="css" label="CSS" />
+            <Checkbox value="javascript" label="JavaScript" />
+            <Checkbox value="vue" label="Vue.js" />
+        </CheckboxGroup>`,
+    }),
+    parameters: {
+        docs: {
+            source: { code: groupCode },
+        },
+    },
+};
+
+const inlineGroupCode = `<script setup>
+import { ref } from 'vue';
+const selected = ref(['red']);
+</script>
+
+<template>
+    <CheckboxGroup v-model="selected" inline>
+        <Checkbox value="red" label="Red" />
+        <Checkbox value="green" label="Green" />
+        <Checkbox value="blue" label="Blue" />
+    </CheckboxGroup>
+</template>`;
+
+export const InlineGroup: Story = {
+    render: () => ({
+        components: { Checkbox, CheckboxGroup },
+        setup() {
+            const selected = ref(['red']);
+            return { selected };
+        },
+        template: `<CheckboxGroup v-model="selected" inline>
+            <Checkbox value="red" label="Red" />
+            <Checkbox value="green" label="Green" />
+            <Checkbox value="blue" label="Blue" />
+        </CheckboxGroup>`,
+    }),
+    parameters: {
+        docs: {
+            source: { code: inlineGroupCode },
+        },
+    },
+};
diff --git a/resources/js/stories/DragHandle.stories.ts b/resources/js/stories/DragHandle.stories.ts
new file mode 100644
index 00000000000..0662d0ced75
--- /dev/null
+++ b/resources/js/stories/DragHandle.stories.ts
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { DragHandle } from '@ui';
+
+const meta = {
+    title: 'Components/DragHandle',
+    component: DragHandle,
+    argTypes: {},
+} satisfies Meta<typeof DragHandle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const basicCode = `<DragHandle />`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: basicCode }
+        }
+    },
+    render: () => ({
+        components: { DragHandle },
+        template: basicCode,
+    }),
+};
diff --git a/resources/js/stories/docs/Checkbox.mdx b/resources/js/stories/docs/Checkbox.mdx
new file mode 100644
index 00000000000..76e25ad1b83
--- /dev/null
+++ b/resources/js/stories/docs/Checkbox.mdx
@@ -0,0 +1,32 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as CheckboxStories from '../Checkbox.stories';
+
+<Meta of={CheckboxStories} />
+
+# Checkbox
+A checkbox input component with label and description support. Can be used individually or as part of a checkbox group.
+<Canvas of={CheckboxStories.Basic} />
+
+## With Description
+<Canvas of={CheckboxStories.WithDescription} />
+
+## Sizes
+<Canvas of={CheckboxStories.Sizes} />
+
+## Disabled
+<Canvas of={CheckboxStories.Disabled} />
+
+## Solo Mode
+Use `solo` when the checkbox is used in a context where the label is provided elsewhere, like in a table cell. The label is still required for accessibility but won't be visually displayed:
+<Canvas of={CheckboxStories.Solo} />
+
+## Checkbox Group
+Group multiple checkboxes together with `CheckboxGroup`. The group manages the selected values as an array:
+<Canvas of={CheckboxStories.Group} />
+
+## Inline Group
+Use the `inline` prop to display checkboxes horizontally:
+<Canvas of={CheckboxStories.InlineGroup} />
+
+## Arguments
+<ArgTypes of={CheckboxStories} />
diff --git a/resources/js/stories/docs/DragHandle.mdx b/resources/js/stories/docs/DragHandle.mdx
new file mode 100644
index 00000000000..2ae2c3c1b4b
--- /dev/null
+++ b/resources/js/stories/docs/DragHandle.mdx
@@ -0,0 +1,12 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as DragHandleStories from '../DragHandle.stories';
+
+<Meta of={DragHandleStories} />
+
+# DragHandle
+
+A button component that displays a drag handle icon for reorderable lists. Uses the `data-drag-handle` attribute for integration with drag-and-drop libraries.
+<Canvas of={DragHandleStories._DocsIntro} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={DragHandleStories} />

From 2abd7ef1f5e6bf32c629fedf729e1f84b6822186 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 17:19:29 +0000
Subject: [PATCH 16/32] wip

---
 .storybook/preview.ts                      |  7 ++--
 resources/js/pages/Playground.vue          |  2 +-
 resources/js/stories/EmptyState.stories.ts |  6 +--
 resources/js/stories/Overview.mdx          | 48 ++++++++++++++++++++++
 resources/js/stories/docs/Button.mdx       |  2 +-
 resources/js/stories/docs/Dropdown.mdx     |  2 +-
 resources/js/stories/docs/Heading.mdx      |  2 +-
 resources/js/stories/docs/Select.mdx       |  2 +-
 8 files changed, 59 insertions(+), 12 deletions(-)
 create mode 100644 resources/js/stories/Overview.mdx

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 6da54bc1e07..30a91ad2a55 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -92,10 +92,9 @@ const preview: Preview = {
         options: {
             storySort: {
                 order: [
-                    // 'Getting Started',
-                    // 'Installation',
-                    '*',
-                    'Components'
+                    'Overview',
+                    'Components',
+                    '*'
                 ],
                 method: 'alphabetical',
             },
diff --git a/resources/js/pages/Playground.vue b/resources/js/pages/Playground.vue
index 0fa2b388e98..d55727a1649 100644
--- a/resources/js/pages/Playground.vue
+++ b/resources/js/pages/Playground.vue
@@ -81,7 +81,7 @@ defineProps(['icons']);
             <blockquote>
                 <p>This is a blockquote with multiple paragraphs. The first paragraph introduces the quote.</p>
                 <p>The second paragraph continues the quoted content and shows how multiple paragraphs are handled within blockquotes.</p>
-                <cite>— Author Name, Source Title</cite>
+                <cite> -  Author Name, Source Title</cite>
             </blockquote>
             <h2>Code Examples</h2>
             <p>Inline code can be written using <code>console.log('Hello, World!')</code> for JavaScript or <code>printf("Hello, World!")</code> for C.</p>
diff --git a/resources/js/stories/EmptyState.stories.ts b/resources/js/stories/EmptyState.stories.ts
index 6bc856474d7..6bb0ce74974 100644
--- a/resources/js/stories/EmptyState.stories.ts
+++ b/resources/js/stories/EmptyState.stories.ts
@@ -33,7 +33,7 @@ const defaultCode = `
     <EmptyStateItem
         icon="fieldtype-entries"
         heading="Create Entry"
-        description="Create the first entry or stub out a handful of placeholder entries—whatever suits your needs."
+        description="Create the first entry or stub out a handful of placeholder entries - whatever suits your needs."
         :href="cp_url('collections/blog/create')"
     />
     <EmptyStateItem
@@ -70,7 +70,7 @@ const withSlotCode = `
     <EmptyStateItem
         icon="fieldtype-entries"
         heading="Create Entry"
-        description="Create the first entry or stub out a handful of placeholder entries—whatever suits your needs."
+        description="Create the first entry or stub out a handful of placeholder entries - whatever suits your needs."
     >
         <a href="#" class="text-blue-600 text-sm rtl:ml-2 ltr:mr-2">Post</a>
         <a href="#" class="text-blue-600 text-sm rtl:ml-2 ltr:mr-2">Link</a>
@@ -103,7 +103,7 @@ const noLinksCode = `
     <EmptyStateItem
         icon="fieldtype-entries"
         heading="Create Entry"
-        description="Create the first entry or stub out a handful of placeholder entries—whatever suits your needs."
+        description="Create the first entry or stub out a handful of placeholder entries - whatever suits your needs."
         @click="createEntry"
     />
 </EmptyStateMenu>
diff --git a/resources/js/stories/Overview.mdx b/resources/js/stories/Overview.mdx
new file mode 100644
index 00000000000..19865f869b7
--- /dev/null
+++ b/resources/js/stories/Overview.mdx
@@ -0,0 +1,48 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Overview" />
+
+# Statamic UI Components
+When building custom areas of the Control Panel, you should aim to use the UI components as much as possible.
+
+These will allow you to write UIs that match the design of Statamic without needing to worry about styles or Tailwind classes. It also allows you to keep your UIs in sync with our design system without having to do any additional work. In short, they're here to make your life easier.
+
+You can treat these components like an extension of HTML itself. They should *just work*.
+
+For example, if you need a card, don't use `<div class="bg-white p-4 rounded border shadow-sm">`, use the `<ui-card>` component!
+
+## Syntax
+
+All of the components are available with their kebab-cased name prefixed with `ui-`. For example:
+
+```blade
+<ui-card>
+    <ui-heading text="A lovely card" />
+    <ui-button @click="doSomething" text="Click me" />
+</ui-card>
+```
+
+This syntax works in Blade _and_ Vue, which is especially handy for those times when you're bouncing back and forth between them.
+
+## Importing
+
+You can optionally import the UI components and namespace them, which gives your IDE the ability to autocomplete, link to the original components, and other useful dev-centric workflows. You import them from `@statamic/cms/ui`.
+
+```vue
+<script setup>
+import { Card, Heading, Button } from '@statamic/cms/ui';
+</script>
+
+<template>
+    <Card>
+        <Heading text="A lovely card" />
+        <Button @click="doSomething" text="Click me" />
+    </Card>
+</template>
+```
+
+## Anatomy of a Component
+
+Most of our components use [Reka](https://reka-ui.com/) under the hood, and are built with Vue.js's [composition API](https://vuejs.org/api/composition-api-setup).
+
+We utilize [Class Variariance Authority](https://cva.style/docs) to dynamically assemble our classes and styles based on variants and props.
\ No newline at end of file
diff --git a/resources/js/stories/docs/Button.mdx b/resources/js/stories/docs/Button.mdx
index e17fba0edc7..23ef5910382 100644
--- a/resources/js/stories/docs/Button.mdx
+++ b/resources/js/stories/docs/Button.mdx
@@ -20,7 +20,7 @@ Automatically sized and styled icons are available for your buttons using the `i
 <Canvas of={ButtonStories.Icons} sourceState={'shown'} />
 
 ## Round
-Round buttons have their place too — like Bard set pickers. Just set the `round` prop.
+Round buttons have their place too  -  like Bard set pickers. Just set the `round` prop.
 <Canvas of={ButtonStories.Round} sourceState={'shown'} />
 
 ## Loading
diff --git a/resources/js/stories/docs/Dropdown.mdx b/resources/js/stories/docs/Dropdown.mdx
index 575b303fa88..15d60c4b07f 100644
--- a/resources/js/stories/docs/Dropdown.mdx
+++ b/resources/js/stories/docs/Dropdown.mdx
@@ -4,7 +4,7 @@ import * as DropdownStories from '../Dropdown.stories';
 <Meta of={DropdownStories} />
 
 # Dropdown
-Displays a menu to the user—such as a set of actions or functions—triggered by a button, with full keyboard navigation support.
+Displays a menu to the user - such as a set of actions or functions - triggered by a button, with full keyboard navigation support.
 
 ## Overview
 The dropdown component has a `<template #trigger>` slot to contain the button that will trigger the dropdown.
diff --git a/resources/js/stories/docs/Heading.mdx b/resources/js/stories/docs/Heading.mdx
index fdf9dd247ef..ca4e7f9c77f 100644
--- a/resources/js/stories/docs/Heading.mdx
+++ b/resources/js/stories/docs/Heading.mdx
@@ -8,7 +8,7 @@ Clean and consistent headings and subheadings.
 <Canvas of={HeadingStories._DocsIntro} sourceState={'shown'} />
 
 ## Sizes
-Headings come in three sizes. If that feels too restrictive, that's okay — you'll get used to it. Less is more. Trust us.
+Headings come in three sizes. If that feels too restrictive, that's okay  -  you'll get used to it. Less is more. Trust us.
 <Canvas of={HeadingStories._Sizes} sourceState={'shown'} />
 
 ## Heading Level
diff --git a/resources/js/stories/docs/Select.mdx b/resources/js/stories/docs/Select.mdx
index fb95bd1e4b9..09d0a2ba85a 100644
--- a/resources/js/stories/docs/Select.mdx
+++ b/resources/js/stories/docs/Select.mdx
@@ -4,7 +4,7 @@ import * as SelectStories from '../Select.stories';
 <Meta of={SelectStories} />
 
 # Select
-Displays a list of options for the user to pick from—triggered by an input style button.
+Displays a list of options for the user to pick from - triggered by an input style button.
 <Canvas of={SelectStories._DocsIntro} sourceState={'shown'} />
 
 ## Data Format

From c2d94e438c0244868d1f949dd05942480e6dcca9 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 17:52:18 +0000
Subject: [PATCH 17/32] wip

---
 resources/js/components/ui/Avatar.vue         |  4 ++
 resources/js/components/ui/Badge.vue          | 11 +++++
 resources/js/components/ui/Button/Button.vue  | 13 ++++++
 .../js/components/ui/CharacterCounter.vue     |  3 ++
 resources/js/components/ui/Checkbox/Item.vue  | 11 +++++
 resources/js/components/ui/Description.vue    |  1 +
 resources/js/components/ui/DocsCallout.vue    |  2 +
 resources/js/components/ui/ErrorMessage.vue   |  1 +
 resources/js/components/ui/Heading.vue        |  6 +++
 resources/js/components/ui/Icon/Icon.vue      |  2 +
 resources/js/components/ui/Input/Input.vue    | 24 ++++++++++
 resources/js/components/ui/Label.vue          |  4 ++
 resources/js/components/ui/Separator.vue      |  3 ++
 .../js/components/ui/StatusIndicator.vue      |  4 ++
 resources/js/components/ui/Textarea.vue       |  9 ++++
 resources/js/stories/Avatar.stories.ts        |  7 +--
 resources/js/stories/Badge.stories.ts         | 26 -----------
 resources/js/stories/Button.stories.ts        | 34 --------------
 .../js/stories/CharacterCounter.stories.ts    | 15 +------
 resources/js/stories/Checkbox.stories.ts      | 34 --------------
 resources/js/stories/Description.stories.ts   |  7 +--
 resources/js/stories/DocsCallout.stories.ts   | 11 +----
 resources/js/stories/ErrorMessage.stories.ts  |  7 +--
 resources/js/stories/Heading.stories.ts       | 12 -----
 resources/js/stories/Icon.stories.ts          |  5 ---
 resources/js/stories/Input.stories.ts         | 45 -------------------
 resources/js/stories/Label.stories.ts         | 19 +-------
 resources/js/stories/Separator.stories.ts     |  6 ---
 .../js/stories/StatusIndicator.stories.ts     | 13 ------
 resources/js/stories/Textarea.stories.ts      | 15 -------
 storybook-props.md                            | 36 +++++++++++++++
 31 files changed, 140 insertions(+), 250 deletions(-)
 create mode 100644 storybook-props.md

diff --git a/resources/js/components/ui/Avatar.vue b/resources/js/components/ui/Avatar.vue
index 3f4712cb359..4fb8384c736 100644
--- a/resources/js/components/ui/Avatar.vue
+++ b/resources/js/components/ui/Avatar.vue
@@ -8,12 +8,16 @@ interface Asset {
 }
 
 interface User {
+    /** Custom initials to display */
     initials?: string;
+    /** Avatar URL or Asset object */
     avatar?: string | Asset;
+    /** User's name (used to generate initials if not provided) */
     name?: string;
 }
 
 interface Props {
+    /** Object with optional properties: `name`, `initials`, `avatar` */
     user: User;
 }
 
diff --git a/resources/js/components/ui/Badge.vue b/resources/js/components/ui/Badge.vue
index cf2a7694761..963ba1a7bed 100644
--- a/resources/js/components/ui/Badge.vue
+++ b/resources/js/components/ui/Badge.vue
@@ -6,16 +6,27 @@ import Icon from './Icon/Icon.vue';
 import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
+    /** Appended text */
     append: { type: [String, Number, Boolean, null], default: null },
+    /** The element or component this component should render as */
     as: { type: String, default: 'div' },
+    /** Controls the color of the badge. Options: `default`, `amber`, `black`, `blue`, `cyan`, `emerald`, `fuchsia`, `green`, `indigo`, `lime`, `orange`, `pink`, `purple`, `red`, `rose`, `sky`, `teal`, `violet`, `white`, `yellow` */
     color: { type: String, default: 'default' },
+    /** URL to link to */
     href: { type: String, default: null },
+    /** When `href` is provided, this prop controls the link's `target` attribute */
     target: { type: String, default: null },
+    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
+    /** Icon name. Will display after the text. [Browse available icons](/?path=/story/components-icon--all-icons) */
     iconAppend: { type: String, default: null },
+    /** When `true`, the badge will be displayed as a pill */
     pill: { type: Boolean, default: false },
+    /** Prepended text */
     prepend: { type: [String, Number, Boolean, null], default: null },
+    /** Controls the size of the badge. Options: `sm`, `default`, `lg` */
     size: { type: String, default: 'default' },
+    /** Text to display in the badge */
     text: { type: [String, Number, Boolean, null], default: null },
 });
 
diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index c42dbc9dec5..106cd8f5443 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -6,18 +6,31 @@ import Icon from '../Icon/Icon.vue';
 import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
+    /** The element or component this component should render as */
     as: { type: String, default: null },
+    /** URL to link to */
     href: { type: String, default: null },
+    /** When `href` is provided, this prop controls the link's `target` attribute */
     target: { type: String, default: null },
+    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
+    /** Icon name. Will display after the text. [Browse available icons](/?path=/story/components-icon--all-icons) */
     iconAppend: { type: String, default: null },
+    /** When `true`, the button's padding will be adjusted to account for no text */
     iconOnly: { type: Boolean, default: false },
+    /** When using `ghost` or `subtle` button variants, you can use the `inset` prop to remove any invisible padding for better alignment */
     inset: { type: Boolean, default: false },
+    /** When `true`, the button shows an animated loading icon */
     loading: { type: Boolean, default: false },
+    /** When `true`, the button will be rounded */
     round: { type: Boolean, default: false },
+    /** Controls the size of the button. Options: `2xs`, `xs`, `sm`, `base`, `lg` */
     size: { type: String, default: 'base' },
+    /** Text to display in the button */
     text: { type: [String, Number, Boolean, null], default: null },
+    /** Unless `href` is provided, this component defaults to a `<button>`. This prop controls the button's `type` attribute */
     type: { type: String, default: 'button' },
+    /** Controls the appearance of the button. Options: `default`, `primary`, `danger`, `filled`, `ghost`, `ghost-pressed`, `subtle`, `pressed` */
     variant: { type: String, default: 'default' },
 });
 
diff --git a/resources/js/components/ui/CharacterCounter.vue b/resources/js/components/ui/CharacterCounter.vue
index ffd53b7bda1..7a3a924b8ef 100644
--- a/resources/js/components/ui/CharacterCounter.vue
+++ b/resources/js/components/ui/CharacterCounter.vue
@@ -3,8 +3,11 @@ import { computed, ref, watch } from 'vue';
 import { cva } from 'cva';
 
 const props = defineProps({
+    /** The text to count characters from */
     text: { type: String, default: '' },
+    /** The maximum number of characters allowed */
     limit: { type: Number, default: null },
+    /** Number of characters remaining before showing the countdown number (default: 20) */
     dangerZone: { type: Number, default: 20 },
 });
 
diff --git a/resources/js/components/ui/Checkbox/Item.vue b/resources/js/components/ui/Checkbox/Item.vue
index 478a0f0e3d8..47b8781e56a 100644
--- a/resources/js/components/ui/Checkbox/Item.vue
+++ b/resources/js/components/ui/Checkbox/Item.vue
@@ -4,16 +4,27 @@ import { computed } from 'vue';
 import { cva } from 'cva';
 
 const props = defineProps({
+    /** Controls the vertical alignment of the checkbox with its label. Options: `start`, `center` */
     align: { type: String, default: 'start', validator: (value) => ['start', 'center'].includes(value) },
+    /** Description text to display below the label */
     description: { type: String, default: null },
+    /** When `true`, disables the checkbox */
     disabled: { type: Boolean, default: false },
+    /** Label text to display next to the checkbox */
     label: { type: String, default: null },
+    /** The checked state of the checkbox */
     modelValue: { type: [Boolean, null], default: null },
+    /** Name attribute for the checkbox input */
     name: { type: String, default: null },
+    /** When `true`, makes the checkbox read-only */
     readOnly: { type: Boolean, default: false },
+    /** Controls the size of the checkbox. Options: `sm`, `base` */
     size: { type: String, default: 'base' },
+    /** When `true`, hides the label and description. Use this when the checkbox is used in a context where the label is provided elsewhere, like in a table cell */
     solo: { type: Boolean, default: false },
+    /** Tab index for keyboard navigation */
     tabindex: { type: Number, default: null },
+    /** Value of the checkbox when used in a group */
     value: { type: [String, Number, Boolean] },
 });
 
diff --git a/resources/js/components/ui/Description.vue b/resources/js/components/ui/Description.vue
index 5550a0ba34c..b7b9c67b00a 100644
--- a/resources/js/components/ui/Description.vue
+++ b/resources/js/components/ui/Description.vue
@@ -5,6 +5,7 @@ const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
 
 const props = defineProps({
+    /** The description text to display */
     text: { type: [String, Number, Boolean, null], default: null },
 });
 </script>
diff --git a/resources/js/components/ui/DocsCallout.vue b/resources/js/components/ui/DocsCallout.vue
index 828ec3b871e..988b6300c6e 100644
--- a/resources/js/components/ui/DocsCallout.vue
+++ b/resources/js/components/ui/DocsCallout.vue
@@ -3,7 +3,9 @@ import { CommandPaletteItem, Badge } from '@ui';
 import { computed } from 'vue';
 
 const props = defineProps({
+    /** Topic of the documentation you're linking to */
     topic: { type: String, required: true },
+    /** The URL to link to. Can be a full URL or a relative path that will be prepended with `https://statamic.dev/` */
     url: { type: String, required: true },
 });
 
diff --git a/resources/js/components/ui/ErrorMessage.vue b/resources/js/components/ui/ErrorMessage.vue
index 09aaf28f717..292735ad65c 100644
--- a/resources/js/components/ui/ErrorMessage.vue
+++ b/resources/js/components/ui/ErrorMessage.vue
@@ -5,6 +5,7 @@ const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
 
 const props = defineProps({
+    /** The error message to display */
     text: { type: [String, Number, Boolean, null], default: null },
 });
 </script>
diff --git a/resources/js/components/ui/Heading.vue b/resources/js/components/ui/Heading.vue
index 5017e7812da..8cb21ffc2e1 100644
--- a/resources/js/components/ui/Heading.vue
+++ b/resources/js/components/ui/Heading.vue
@@ -5,11 +5,17 @@ import Icon from './Icon/Icon.vue';
 import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
+    /** URL to link to */
     href: { type: [String, null], default: null },
+    /** When `href` is provided, this prop controls the link's `target` attribute */
     target: { type: String, default: null },
+    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: [String, null], default: null },
+    /** Controls the heading level, `h1`, `h2`, etc */
     level: { type: [Number, null], default: null },
+    /** Controls the size of the heading. Options: `base`, `lg`, `xl`, `2xl` */
     size: { type: String, default: 'base' },
+    /** The heading text to display */
     text: { type: [String, Number, Boolean, null], default: null },
 });
 
diff --git a/resources/js/components/ui/Icon/Icon.vue b/resources/js/components/ui/Icon/Icon.vue
index 9a6799b3678..e2e3370f5bb 100644
--- a/resources/js/components/ui/Icon/Icon.vue
+++ b/resources/js/components/ui/Icon/Icon.vue
@@ -3,7 +3,9 @@ import { computed, ref, watch } from 'vue';
 import { getIconSet } from './registry.js';
 
 const props = defineProps({
+    /** Icon name */
     name: { type: String, required: true },
+    /** Name of the icon set */
     set: { type: String, default: 'default' },
 });
 
diff --git a/resources/js/components/ui/Input/Input.vue b/resources/js/components/ui/Input/Input.vue
index 0ee203fb8e2..3fb8148b99f 100644
--- a/resources/js/components/ui/Input/Input.vue
+++ b/resources/js/components/ui/Input/Input.vue
@@ -12,29 +12,53 @@ const slots = useSlots();
 const attrs = useAttrs();
 
 const props = defineProps({
+    /** Appended text */
     append: { type: String, default: null },
+    /** Badge text to display on the right side */
     badge: { type: String, default: null },
+    /** When `true`, shows a clear button to empty the input */
     clearable: { type: Boolean, default: false },
+    /** When `true`, shows a copy button to copy the value to clipboard */
     copyable: { type: Boolean, default: false },
+    /** When `true`, disables the input */
     disabled: { type: Boolean, default: false },
+    /** When `true`, makes the input read-only */
     readOnly: { type: Boolean, default: false },
+    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
+    /** Icon name. Will display after the text. [Browse available icons](/?path=/story/components-icon--all-icons) */
     iconAppend: { type: String, default: null },
+    /** Icon name. Will display before the text. [Browse available icons](/?path=/story/components-icon--all-icons) */
     iconPrepend: { type: String, default: null },
+    /** ID attribute for the input element */
     id: { type: String, default: () => useId() },
+    /** Specify a character limit */
     limit: { type: Number, default: null },
+    /** When `true`, an animated loading indicator will show next to the input */
     loading: { type: Boolean, default: false },
+    /** The controlled value of the input */
     modelValue: { type: [String, Number], default: null },
+    /** Placeholder text */
     placeholder: { type: String, default: null },
+    /** Prepended text */
     prepend: { type: String, default: null },
+    /** When `true`, marks the field as required */
     required: { type: Boolean, default: false },
+    /** Controls the size of the input. Options: `xs`, `sm`, `base`, `lg` */
     size: { type: String, default: 'base' },
+    /** Tab index for keyboard navigation */
     tabindex: { type: Number, default: null },
+    /** Input type attribute */
     type: { type: String, default: 'text' },
+    /** Controls the appearance of the input. Options: `default`, `filled` */
     variant: { type: String, default: 'default' },
+    /** When `true`, shows an eye icon to toggle password visibility */
     viewable: { type: Boolean, default: false },
+    /** When `true`, autofocuses the input on mount */
     focus: { type: Boolean, default: false },
+    /** Additional attributes to apply to the input element */
     inputAttrs: { type: [Object, String], default: () => ({}) },
+    /** Additional CSS classes for the input element */
     inputClass: { type: String, default: '' },
 });
 
diff --git a/resources/js/components/ui/Label.vue b/resources/js/components/ui/Label.vue
index 597a6356fd0..99862c0e32f 100644
--- a/resources/js/components/ui/Label.vue
+++ b/resources/js/components/ui/Label.vue
@@ -6,9 +6,13 @@ const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
 
 const props = defineProps({
+    /** The ID of the form element this label is for */
     for: { type: String, default: null },
+    /** Optional badge text to display on the right side of the label */
     badge: { type: String, default: '' },
+    /** When `true`, displays a red asterisk indicating the field is required */
     required: { type: Boolean, default: false },
+    /** The label text to display */
     text: { type: [String, Number, Boolean, null], default: null },
 });
 </script>
diff --git a/resources/js/components/ui/Separator.vue b/resources/js/components/ui/Separator.vue
index 4a0a2b578f5..6bdf89191c4 100644
--- a/resources/js/components/ui/Separator.vue
+++ b/resources/js/components/ui/Separator.vue
@@ -2,8 +2,11 @@
 import { cva } from 'cva';
 
 const props = defineProps({
+    /** Text to display in the center of the separator */
     text: { type: String, default: null },
+    /** Controls the appearance of the separator. Options: `line`, `dots` */
     variant: { type: String, default: 'line' },
+    /** When `true`, it will render as a vertical separator */
     vertical: { type: Boolean, default: false },
 });
 
diff --git a/resources/js/components/ui/StatusIndicator.vue b/resources/js/components/ui/StatusIndicator.vue
index 0c6c8db9746..9f40c105240 100644
--- a/resources/js/components/ui/StatusIndicator.vue
+++ b/resources/js/components/ui/StatusIndicator.vue
@@ -2,14 +2,18 @@
 import { computed } from 'vue';
 
 const props = defineProps({
+    /** The status to display. Options: `published`, `scheduled`, `expired`, `draft`, `hidden` */
     status: {
         type: String,
         required: false,
         default: 'published',
         validator: (value) => ['published', 'scheduled', 'expired', 'draft', 'hidden'].includes(value),
     },
+    /** When `true`, displays a colored dot indicator */
     showDot: { type: Boolean, default: true },
+    /** When `true`, displays the status label text */
     showLabel: { type: Boolean, default: false },
+    /** When `true`, indicates the entry is private */
     private: { type: Boolean, default: false },
 });
 
diff --git a/resources/js/components/ui/Textarea.vue b/resources/js/components/ui/Textarea.vue
index 29e0dabccf5..3ac165a6ceb 100644
--- a/resources/js/components/ui/Textarea.vue
+++ b/resources/js/components/ui/Textarea.vue
@@ -7,14 +7,23 @@ import { nextTick, onBeforeUnmount, onMounted, useTemplateRef } from 'vue';
 defineEmits(['update:modelValue']);
 
 const props = defineProps({
+    /** When `true`, the textarea will automatically grow/shrink to fit content */
     elastic: { type: Boolean, default: false },
+    /** When `true`, disables the textarea */
     disabled: { type: Boolean, default: false },
+    /** ID attribute for the textarea element */
     id: { type: String, default: null },
+    /** When `true`, makes the textarea read-only */
     readOnly: { type: Boolean, default: false },
+    /** When `true`, marks the field as required */
     required: { type: Boolean, default: false },
+    /** Controls resize behavior. Options: `both`, `horizontal`, `vertical`, `none` */
     resize: { type: String, default: 'vertical' },
+    /** Number of visible text rows */
     rows: { type: [Number, String], default: 4 },
+    /** The controlled value of the textarea */
     modelValue: { type: String, default: null },
+    /** Specify a character limit */
     limit: { type: Number, default: null },
 });
 
diff --git a/resources/js/stories/Avatar.stories.ts b/resources/js/stories/Avatar.stories.ts
index 4a1aae4d681..b04edb8321b 100644
--- a/resources/js/stories/Avatar.stories.ts
+++ b/resources/js/stories/Avatar.stories.ts
@@ -4,12 +4,7 @@ import {Avatar} from '@ui';
 const meta = {
     title: 'Components/Avatar',
     component: Avatar,
-    argTypes: {
-        user: {
-            control: 'object',
-            description: 'Object with optional properties: `name`, `initials`, `avatar`',
-        },
-    },
+    argTypes: {},
 } satisfies Meta<typeof Avatar>;
 
 export default meta;
diff --git a/resources/js/stories/Badge.stories.ts b/resources/js/stories/Badge.stories.ts
index b237a2234b0..48c97edd413 100644
--- a/resources/js/stories/Badge.stories.ts
+++ b/resources/js/stories/Badge.stories.ts
@@ -7,48 +7,22 @@ const meta = {
     title: 'Components/Badge',
     component: Badge,
     argTypes: {
-        append: {
-            control: 'text',
-            description: 'Appended text'
-        },
-        as: {
-            control: 'text',
-            description: 'The element or component this component should render as.',
-        },
         color: {
             control: 'select',
-            description: 'Controls the color of the badge. <br><br> Options: `default`, `amber`, `black`, `blue`, `cyan`, `emerald`, `fuchsia`, `green`, `indigo`, `lime`, `orange`, `pink`, `purple`, `red`, `rose`, `sky`, `teal`, `violet`, `white`, `yellow`',
             options: ['default', 'amber', 'black', 'blue', 'cyan', 'emerald', 'fuchsia', 'green', 'indigo', 'lime', 'orange', 'pink', 'purple', 'red', 'rose', 'sky', 'teal', 'violet', 'white', 'yellow'],
         },
-        href: { control: 'text' },
-        target: {
-            control: 'text',
-            description: "When `href` is provided, this prop controls the link's `target` attribute.",
-        },
         icon: {
             control: 'select',
             options: icons,
-            description: 'Icon name. [Browse available icons](/?path=/story/components-icon--all-icons)',
         },
         iconAppend: {
             control: 'select',
             options: icons,
-            description: 'Icon name. Will display after the text. [Browse available icons](/?path=/story/components-icon--all-icons)',
-        },
-        pill: {
-            control: 'boolean',
-            description: 'When `true`, the badge will be displayed as a pill.'
-        },
-        prepend: {
-            control: 'text',
-            description: 'Prepended text',
         },
         size: {
             control: 'select',
-            description: 'Controls the size of the badge. <br><br> Options: `sm`, `default`, `lg`',
             options: ['sm', 'default', 'lg'],
         },
-        text: { control: 'text' },
     },
 } satisfies Meta<typeof Badge>;
 
diff --git a/resources/js/stories/Button.stories.ts b/resources/js/stories/Button.stories.ts
index 6eff86fa6e5..eed31cf13cb 100644
--- a/resources/js/stories/Button.stories.ts
+++ b/resources/js/stories/Button.stories.ts
@@ -7,54 +7,20 @@ const meta = {
     title: 'Components/Button',
     component: Button,
     argTypes: {
-        as: {
-            control: 'text',
-            description: 'The element or component this component should render as.',
-        },
-        href: { control: 'text' },
-        target: {
-            control: 'text',
-            description: "When `href` is provided, this prop controls the link's `target` attribute.",
-        },
         icon: {
             control: 'select',
             options: icons,
-            description: 'Icon name. [Browse available icons](/?path=/story/components-icon--all-icons)',
         },
         iconAppend: {
             control: 'select',
             options: icons,
-            description: 'Icon name. Will display after the text. [Browse available icons](/?path=/story/components-icon--all-icons)',
-        },
-        iconOnly: {
-            control: 'boolean',
-            description: "When `true`, the button's padding will be adjusted to account for no text",
-        },
-        inset: {
-            control: 'boolean',
-            description: 'When using `ghost` or `subtle` button variants, you can use the `inset` prop to remove any invisible padding for better alignment.',
-        },
-        loading: {
-            control: 'boolean',
-            description: 'When `true`, the button shows an animated loading icon.'
-        },
-        round: {
-            control: 'boolean',
-            description: 'When `true`, the button will be rounded.'
         },
         size: {
             control: 'select',
-            description: 'Controls the size of the button. <br><br> Options: `2xs`, `xs`, `sm`, `base`, `lg`',
             options: ['2xs', 'xs', 'sm', 'base', 'lg'],
         },
-        text: { control: 'text' },
-        type: {
-            control: 'select',
-            description: "Unless `href` is provided, this component defaults to a `<button>`. This prop controls the button's `type` attribute.",
-        },
         variant: {
             control: 'select',
-            description: 'Controls the appearance of the button. <br><br> Options: `default`, `primary`, `danger`, `filled`, `ghost`, `ghost-pressed`, `subtle`, `pressed`',
             options: ['default', 'primary', 'danger', 'filled', 'ghost', 'ghost-pressed', 'subtle', 'pressed'],
         },
     },
diff --git a/resources/js/stories/CharacterCounter.stories.ts b/resources/js/stories/CharacterCounter.stories.ts
index 34af2dea619..0992e5c0728 100644
--- a/resources/js/stories/CharacterCounter.stories.ts
+++ b/resources/js/stories/CharacterCounter.stories.ts
@@ -5,20 +5,7 @@ import {ref} from 'vue';
 const meta = {
     title: 'Components/CharacterCounter',
     component: CharacterCounter,
-    argTypes: {
-        text: {
-            control: 'text',
-            description: 'The text to count characters from.',
-        },
-        limit: {
-            control: 'number',
-            description: 'The maximum number of characters allowed.',
-        },
-        dangerZone: {
-            control: 'number',
-            description: 'Number of characters remaining before showing the countdown number (default: 20).',
-        },
-    },
+    argTypes: {},
 } satisfies Meta<typeof CharacterCounter>;
 
 export default meta;
diff --git a/resources/js/stories/Checkbox.stories.ts b/resources/js/stories/Checkbox.stories.ts
index fa54b07c962..1b9944fa57c 100644
--- a/resources/js/stories/Checkbox.stories.ts
+++ b/resources/js/stories/Checkbox.stories.ts
@@ -7,47 +7,13 @@ const meta = {
     component: Checkbox,
     subcomponents: { CheckboxGroup },
     argTypes: {
-        modelValue: {
-            control: 'boolean',
-            description: 'The checked state of the checkbox.',
-        },
-        label: {
-            control: 'text',
-            description: 'Label text to display next to the checkbox.',
-        },
-        description: {
-            control: 'text',
-            description: 'Description text to display below the label.',
-        },
-        value: {
-            control: 'text',
-            description: 'Value of the checkbox when used in a group.',
-        },
-        disabled: {
-            control: 'boolean',
-            description: 'When `true`, disables the checkbox.',
-        },
-        readOnly: {
-            control: 'boolean',
-            description: 'When `true`, makes the checkbox read-only.',
-        },
         size: {
             control: 'select',
             options: ['sm', 'base'],
-            description: 'Controls the size of the checkbox.',
         },
         align: {
             control: 'select',
             options: ['start', 'center'],
-            description: 'Controls the vertical alignment of the checkbox with its label.',
-        },
-        solo: {
-            control: 'boolean',
-            description: 'When `true`, hides the label and description. Use this when the checkbox is used in a context where the label is provided elsewhere, like in a table cell.',
-        },
-        name: {
-            control: 'text',
-            description: 'Name attribute for the checkbox input.',
         },
         'update:modelValue': {
             description: 'Event handler called when the checkbox is checked or unchecked.',
diff --git a/resources/js/stories/Description.stories.ts b/resources/js/stories/Description.stories.ts
index 09e2e58911e..53d6bed43b6 100644
--- a/resources/js/stories/Description.stories.ts
+++ b/resources/js/stories/Description.stories.ts
@@ -4,12 +4,7 @@ import {Description} from '@ui';
 const meta = {
     title: 'Components/Description',
     component: Description,
-    argTypes: {
-        text: {
-            control: 'text',
-            description: 'The description text to display.',
-        },
-    },
+    argTypes: {},
 } satisfies Meta<typeof Description>;
 
 export default meta;
diff --git a/resources/js/stories/DocsCallout.stories.ts b/resources/js/stories/DocsCallout.stories.ts
index 27660c45143..30a760ef67a 100644
--- a/resources/js/stories/DocsCallout.stories.ts
+++ b/resources/js/stories/DocsCallout.stories.ts
@@ -4,16 +4,7 @@ import {DocsCallout} from '@ui';
 const meta = {
     title: 'Components/DocsCallout',
     component: DocsCallout,
-    argTypes: {
-        topic: {
-            control: 'text',
-            description: 'Topic of the documentation you\'re linking to.'
-        },
-        url: {
-            control: 'text',
-            description: 'The URL to link to. Can be a full URL or a relative path that will be prepended with `https://statamic.dev/`',
-        },
-    },
+    argTypes: {},
 } satisfies Meta<typeof DocsCallout>;
 
 export default meta;
diff --git a/resources/js/stories/ErrorMessage.stories.ts b/resources/js/stories/ErrorMessage.stories.ts
index 27378e83984..d99f3e0f519 100644
--- a/resources/js/stories/ErrorMessage.stories.ts
+++ b/resources/js/stories/ErrorMessage.stories.ts
@@ -4,12 +4,7 @@ import {ErrorMessage} from '@ui';
 const meta = {
     title: 'Components/ErrorMessage',
     component: ErrorMessage,
-    argTypes: {
-        text: {
-            control: 'text',
-            description: 'The error message to display.',
-        },
-    },
+    argTypes: {},
 } satisfies Meta<typeof ErrorMessage>;
 
 export default meta;
diff --git a/resources/js/stories/Heading.stories.ts b/resources/js/stories/Heading.stories.ts
index 095dc53caa3..0e77481b89b 100644
--- a/resources/js/stories/Heading.stories.ts
+++ b/resources/js/stories/Heading.stories.ts
@@ -9,26 +9,14 @@ const meta = {
         Subheading,
     },
     argTypes: {
-        href: { control: 'text' },
-        target: {
-            control: 'text',
-            description: "When `href` is provided, this prop controls the link's `target` attribute.",
-        },
         icon: {
             control: 'select',
             options: icons,
-            description: 'Icon name. [Browse available icons](/?path=/story/components-icon--all-icons)',
-        },
-        level: {
-            control: 'number',
-            description: 'Controls the heading level, `h1`, `h2`, etc'
         },
         size: {
             control: 'select',
-            description: 'Controls the size of the heading. <br><br> Options: `base`, `lg`, `xl`, `2xl`',
             options: ['base', 'lg', 'xl', '2xl'],
         },
-        text: { control: 'text' },
     },
 } satisfies Meta<typeof Heading>;
 
diff --git a/resources/js/stories/Icon.stories.ts b/resources/js/stories/Icon.stories.ts
index 59b51baa307..d1410103556 100644
--- a/resources/js/stories/Icon.stories.ts
+++ b/resources/js/stories/Icon.stories.ts
@@ -9,13 +9,8 @@ const meta = {
     argTypes: {
         name: {
             control: 'select',
-            description: 'Icon name',
             options: icons,
         },
-        set: {
-            control: 'text',
-            description: 'Name of the icon set.',
-        },
     },
 } satisfies Meta<typeof Icon>;
 
diff --git a/resources/js/stories/Input.stories.ts b/resources/js/stories/Input.stories.ts
index facde1ec72a..a69d8f8fd51 100644
--- a/resources/js/stories/Input.stories.ts
+++ b/resources/js/stories/Input.stories.ts
@@ -6,71 +6,26 @@ const meta = {
     title: 'Components/Input',
     component: Input,
     argTypes: {
-        append: {
-            control: 'text',
-            description: 'Appended text'
-        },
-        badge: { control: 'text' },
-        clearable: { control: 'boolean' },
-        copyable: { control: 'boolean' },
-        disabled: { control: 'boolean' },
-        readOnly: { control: 'boolean' },
         icon: {
             control: 'select',
             options: icons,
-            description: 'Icon name. [Browse available icons](/?path=/story/components-icon--all-icons)',
         },
         iconAppend: {
             control: 'select',
             options: icons,
-            description: 'Icon name. Will display after the text. [Browse available icons](/?path=/story/components-icon--all-icons)',
         },
         iconPrepend: {
             control: 'select',
             options: icons,
-            description: 'Icon name. Will display before the text. [Browse available icons](/?path=/story/components-icon--all-icons)',
-        },
-        id: { control: 'text' },
-        limit: {
-            control: 'number',
-            description: 'Specify a character limit',
-        },
-        loading: {
-            control: 'boolean',
-            description: 'When `true`, an animated loading indicator will show next to the input.'
-        },
-        modelValue: {
-            control: 'text',
-            description: 'The controlled value of the input.',
         },
-        placeholder: { control: 'text' },
-        prepend: {
-            control: 'text',
-            description: 'Prepended text',
-        },
-        required: { control: 'boolean' },
         size: {
             control: 'select',
-            description: 'Controls the size of the input. <br><br> Options: `xs`, `sm`, `base`',
             options: ['xs', 'sm', 'base'],
         },
-        tabindex: { control: 'number' },
-        type: { control: 'text' },
         variant: {
             control: 'select',
-            description: 'Controls the appearance of the input. <br><br> Options: `default`, `light`, `ghost`',
             options: ['default', 'light', 'ghost'],
         },
-        viewable: { control: 'boolean' },
-        focus: { control: 'boolean' },
-        inputAttrs: {
-            control: 'object',
-            description: 'Object of HTML attributes to be applied to the underlying `<input>`'
-        },
-        inputClass: {
-            control: 'text',
-            description: 'Classes to be applied to the underlying `<input>`'
-        },
         'update:modelValue': {
             description: 'Event handler called when the input is updated.',
             table: {
diff --git a/resources/js/stories/Label.stories.ts b/resources/js/stories/Label.stories.ts
index 0d59c46a0d5..33d7125488d 100644
--- a/resources/js/stories/Label.stories.ts
+++ b/resources/js/stories/Label.stories.ts
@@ -4,24 +4,7 @@ import {Field, Input, Label} from '@ui';
 const meta = {
     title: 'Components/Label',
     component: Label,
-    argTypes: {
-        for: {
-            control: 'text',
-            description: 'The ID of the form element this label is for.',
-        },
-        badge: {
-            control: 'text',
-            description: 'Optional badge text to display on the right side of the label.',
-        },
-        required: {
-            control: 'boolean',
-            description: 'When `true`, displays a red asterisk indicating the field is required.',
-        },
-        text: {
-            control: 'text',
-            description: 'The label text to display.',
-        },
-    },
+    argTypes: {},
 } satisfies Meta<typeof Label>;
 
 export default meta;
diff --git a/resources/js/stories/Separator.stories.ts b/resources/js/stories/Separator.stories.ts
index da761906670..f0cc6190364 100644
--- a/resources/js/stories/Separator.stories.ts
+++ b/resources/js/stories/Separator.stories.ts
@@ -5,16 +5,10 @@ const meta = {
     title: 'Components/Separator',
     component: Separator,
     argTypes: {
-        text: { control: 'text' },
         variant: {
             control: 'select',
-            description: 'Controls the appearance of the separator. <br><br> Options: `line`, `dots`',
             options: ['line', 'dots'],
         },
-        vertical: {
-            control: 'boolean',
-            description: 'When `true`, it will render as a vertical separator.'
-        },
     },
 } satisfies Meta<typeof Separator>;
 
diff --git a/resources/js/stories/StatusIndicator.stories.ts b/resources/js/stories/StatusIndicator.stories.ts
index 88f7c4cca25..39d987fd677 100644
--- a/resources/js/stories/StatusIndicator.stories.ts
+++ b/resources/js/stories/StatusIndicator.stories.ts
@@ -7,21 +7,8 @@ const meta = {
     argTypes: {
         status: {
             control: 'select',
-            description: 'The status to display. <br><br> Options: `published`, `scheduled`, `expired`, `draft`, `hidden`',
             options: ['published', 'scheduled', 'expired', 'draft', 'hidden'],
         },
-        showDot: {
-            control: 'boolean',
-            description: 'When `true`, displays a colored dot indicator.',
-        },
-        showLabel: {
-            control: 'boolean',
-            description: 'When `true`, displays the status label text.',
-        },
-        private: {
-            control: 'boolean',
-            description: 'When `true`, changes the appearance of published status to indicate private content.',
-        },
     },
 } satisfies Meta<typeof StatusIndicator>;
 
diff --git a/resources/js/stories/Textarea.stories.ts b/resources/js/stories/Textarea.stories.ts
index 5ea4cf6d3a6..ff9c81c9fee 100644
--- a/resources/js/stories/Textarea.stories.ts
+++ b/resources/js/stories/Textarea.stories.ts
@@ -5,25 +5,10 @@ const meta = {
     title: 'Components/Textarea',
     component: Textarea,
     argTypes: {
-        elastic: { control: 'boolean' },
-        disabled: { control: 'boolean' },
-        id: { control: 'text' },
-        readOnly: { control: 'boolean' },
-        required: { control: 'boolean' },
         resize: {
             control: 'select',
-            description: 'Determines how (and if) the textarea should be resized. <br><br> Options: `both`, `horizontal`, `vertical`, `none`',
             options: ['both', 'horizontal', 'vertical', 'none'],
         },
-        rows: { control: 'number' },
-        modelValue: {
-            control: 'text',
-            description: 'The controlled value of the textarea.',
-        },
-        limit: {
-            control: 'number',
-            description: 'Specify a character limit',
-        },
         'update:modelValue': {
             description: 'Event handler called when the textarea is updated.',
             table: {
diff --git a/storybook-props.md b/storybook-props.md
new file mode 100644
index 00000000000..4f5d8db4683
--- /dev/null
+++ b/storybook-props.md
@@ -0,0 +1,36 @@
+I'm currently working on our Storybook documentation for our UI Components.
+
+Up until now, we've stored the descriptions for props and events inside the `argTypes` object in component stories.
+
+This
+_works_ most of the time, but not for subcomponents. To keep everything consistent, I want to move the prop descriptions into JSDoc comments inside the components themselves.
+
+So, this:
+
+```js
+limit: {
+    control: 'number',
+        description
+:
+    'Specify a character limit',
+}
+,
+```
+
+Would turn into this:
+
+```js
+defineProps({
+    /** Specify a character limit */
+    limit: {type: Number},
+});
+```
+
+You can then remove the prop/arg from the
+`argTypes` array as it'll be picked up automatically from Storybook. However, DO NOT remove them in the following cases:
+
+* `control: 'select'` - the `description` should be removed, but the control and options should remain
+* If it's an event (you can check the component's
+  `defineEmits()` to confirm if smth is an event), then keep it in the array WITH its description.
+
+* If you're unsure of anything, let me know.
\ No newline at end of file

From ec516d87e47322b89d56a299e8552230252fd98e Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 18:29:42 +0000
Subject: [PATCH 18/32] wip

---
 resources/js/components/ui/Badge.vue          |  4 +-
 resources/js/components/ui/Button/Button.vue  |  2 +-
 resources/js/components/ui/Checkbox/Group.vue |  3 ++
 resources/js/components/ui/Checkbox/Item.vue  |  3 +-
 resources/js/components/ui/CodeEditor.vue     | 12 ++++++
 resources/js/components/ui/Context/Footer.vue |  4 +-
 resources/js/components/ui/Context/Header.vue |  6 ++-
 resources/js/components/ui/Context/Item.vue   |  8 ++--
 resources/js/components/ui/Context/Label.vue  |  1 +
 resources/js/components/ui/DataTable/Cell.vue |  5 ++-
 .../js/components/ui/DataTable/Column.vue     |  4 +-
 .../js/components/ui/Dropdown/Dropdown.vue    |  3 ++
 .../js/components/ui/Dropdown/Footer.vue      |  4 +-
 .../js/components/ui/Dropdown/Header.vue      |  2 +
 resources/js/components/ui/Dropdown/Item.vue  |  6 ++-
 resources/js/components/ui/Dropdown/Label.vue |  1 +
 resources/js/components/ui/Editable.vue       |  3 ++
 .../js/components/ui/EmptyState/Item.vue      |  8 ++--
 resources/js/components/ui/Heading.vue        |  2 +-
 resources/js/components/ui/Input/Input.vue    |  4 --
 resources/js/components/ui/Label.vue          |  1 -
 resources/js/components/ui/Pagination.vue     |  6 +++
 .../js/components/ui/Publish/Container.vue    | 17 ++++----
 resources/js/components/ui/Radio/Group.vue    |  6 ++-
 resources/js/components/ui/Splitter/Panel.vue |  3 ++
 resources/js/components/ui/Subheading.vue     |  3 ++
 resources/js/components/ui/Switch.vue         |  3 +-
 resources/js/components/ui/Tabs/Content.vue   |  1 +
 resources/js/components/ui/Tabs/Trigger.vue   |  2 +
 resources/js/components/ui/Textarea.vue       |  3 --
 resources/js/components/ui/Toggle/Item.vue    |  5 +++
 resources/js/stories/CodeEditor.stories.ts    | 39 +------------------
 resources/js/stories/Dropdown.stories.ts      | 22 ++++-------
 resources/js/stories/Editable.stories.ts      | 10 -----
 resources/js/stories/Pagination.stories.ts    | 34 ++++++----------
 35 files changed, 113 insertions(+), 127 deletions(-)

diff --git a/resources/js/components/ui/Badge.vue b/resources/js/components/ui/Badge.vue
index 963ba1a7bed..7a7d131f516 100644
--- a/resources/js/components/ui/Badge.vue
+++ b/resources/js/components/ui/Badge.vue
@@ -10,9 +10,9 @@ const props = defineProps({
     append: { type: [String, Number, Boolean, null], default: null },
     /** The element or component this component should render as */
     as: { type: String, default: 'div' },
-    /** Controls the color of the badge. Options: `default`, `amber`, `black`, `blue`, `cyan`, `emerald`, `fuchsia`, `green`, `indigo`, `lime`, `orange`, `pink`, `purple`, `red`, `rose`, `sky`, `teal`, `violet`, `white`, `yellow` */
+    /** Controls the color of the badge. <br><br> Options: `default`, `amber`, `black`, `blue`, `cyan`, `emerald`, `fuchsia`, `green`, `indigo`, `lime`, `orange`, `pink`, `purple`, `red`, `rose`, `sky`, `teal`, `violet`, `white`, `yellow` */
     color: { type: String, default: 'default' },
-    /** URL to link to */
+    /** The URL to link to */
     href: { type: String, default: null },
     /** When `href` is provided, this prop controls the link's `target` attribute */
     target: { type: String, default: null },
diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index 106cd8f5443..43eb77ee407 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -8,7 +8,7 @@ import { Link } from '@inertiajs/vue3';
 const props = defineProps({
     /** The element or component this component should render as */
     as: { type: String, default: null },
-    /** URL to link to */
+    /** The URL to link to */
     href: { type: String, default: null },
     /** When `href` is provided, this prop controls the link's `target` attribute */
     target: { type: String, default: null },
diff --git a/resources/js/components/ui/Checkbox/Group.vue b/resources/js/components/ui/Checkbox/Group.vue
index 3a1d5d553ab..69dfda6b733 100644
--- a/resources/js/components/ui/Checkbox/Group.vue
+++ b/resources/js/components/ui/Checkbox/Group.vue
@@ -3,8 +3,11 @@ import { useId } from 'vue';
 import { CheckboxGroupRoot } from 'reka-ui';
 
 defineProps({
+    /** When `true`, displays checkboxes horizontally */
     inline: { type: Boolean, default: false },
+    /** The controlled value of the checkbox group */
     modelValue: { type: Array, default: () => [] },
+    /** Name attribute for the checkbox group */
     name: { type: String, default: () => useId() },
     required: { type: Boolean, default: false },
 });
diff --git a/resources/js/components/ui/Checkbox/Item.vue b/resources/js/components/ui/Checkbox/Item.vue
index 47b8781e56a..76434951acb 100644
--- a/resources/js/components/ui/Checkbox/Item.vue
+++ b/resources/js/components/ui/Checkbox/Item.vue
@@ -12,11 +12,10 @@ const props = defineProps({
     disabled: { type: Boolean, default: false },
     /** Label text to display next to the checkbox */
     label: { type: String, default: null },
-    /** The checked state of the checkbox */
+    /** The controlled value of the checkbox */
     modelValue: { type: [Boolean, null], default: null },
     /** Name attribute for the checkbox input */
     name: { type: String, default: null },
-    /** When `true`, makes the checkbox read-only */
     readOnly: { type: Boolean, default: false },
     /** Controls the size of the checkbox. Options: `sm`, `base` */
     size: { type: String, default: 'base' },
diff --git a/resources/js/components/ui/CodeEditor.vue b/resources/js/components/ui/CodeEditor.vue
index eba962df364..15b6a6bde41 100644
--- a/resources/js/components/ui/CodeEditor.vue
+++ b/resources/js/components/ui/CodeEditor.vue
@@ -39,20 +39,32 @@ import 'codemirror/mode/yaml-frontmatter/yaml-frontmatter';
 const emit = defineEmits(['update:mode', 'update:model-value', 'focus', 'blur']);
 
 const props = defineProps({
+    /** When `true`, displays a mode selector dropdown */
     allowModeSelection: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
     fieldActions: { type: Array, default: () => [] },
+    /** Controls whether to indent with tabs or spaces. Options: `tabs`, `spaces` */
     indentType: { type: String, default: 'tabs' },
+    /** Keyboard mapping for the editor. Options: `sublime`, `vim` */
     keyMap: { type: String, default: 'sublime' },
+    /** When `true`, line numbers are displayed */
     lineNumbers: { type: Boolean, default: true },
+    /** When `true`, long lines will wrap */
     lineWrapping: { type: Boolean, default: true },
+    /** The syntax highlighting mode. Options: `clike`, `css`, `diff`, `go`, `haml`, `handlebars`, `htmlmixed`, `less`, `markdown`, `gfm`, `nginx`, `text/x-java`, `javascript`, `jsx`, `text/x-objectivec`, `php`, `python`, `ruby`, `scss`, `shell`, `sql`, `twig`, `vue`, `xml`, `yaml-frontmatter` */
     mode: { type: String, default: 'javascript' },
+    /** The controlled value of the code editor */
     modelValue: { type: String, default: '' },
     readOnly: { type: Boolean, default: false },
+    /** Rulers configuration */
     rulers: { type: Object, default: () => {} },
+    /** When `true`, displays the current mode label */
     showModeLabel: { type: Boolean, default: true },
+    /** The width of a tab character */
     tabSize: { type: Number, required: false },
+    /** Theme of the code editor. Options: `system`, `light`, `dark` */
     colorMode: { type: String, default: 'system' },
+    /** Title displayed in fullscreen mode */
     title: { type: String, default: () => __('Code Editor') },
 });
 
diff --git a/resources/js/components/ui/Context/Footer.vue b/resources/js/components/ui/Context/Footer.vue
index e73b8570755..b255e8c164f 100644
--- a/resources/js/components/ui/Context/Footer.vue
+++ b/resources/js/components/ui/Context/Footer.vue
@@ -4,9 +4,11 @@ import { cva } from 'cva';
 import Icon from '../Icon/Icon.vue';
 
 defineProps({
+    /** The URL to link to */
     href: { type: String, default: null },
-	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
+    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
+    /** Text to display in the footer */
     text: { type: String, default: null },
 });
 
diff --git a/resources/js/components/ui/Context/Header.vue b/resources/js/components/ui/Context/Header.vue
index f15ee46ed92..60f605ed403 100644
--- a/resources/js/components/ui/Context/Header.vue
+++ b/resources/js/components/ui/Context/Header.vue
@@ -5,11 +5,13 @@ import Icon from '../Icon/Icon.vue';
 import Button from '../Button/Button.vue';
 
 defineProps({
-	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
+    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
-	/** Icon name. Will display after the text. [Browse available icons](/?path=/story/components-icon--all-icons) */
+    /** Icon name. Will display after the text. [Browse available icons](/?path=/story/components-icon--all-icons) */
     appendIcon: { type: String, default: null },
+    /** URL for the append icon button to link to */
     appendHref: { type: String, default: null },
+    /** Text to display in the header */
     text: { type: String, default: null },
 });
 
diff --git a/resources/js/components/ui/Context/Item.vue b/resources/js/components/ui/Context/Item.vue
index 82aca0dcf15..ba8997b0104 100644
--- a/resources/js/components/ui/Context/Item.vue
+++ b/resources/js/components/ui/Context/Item.vue
@@ -5,13 +5,15 @@ import Icon from '../Icon/Icon.vue';
 import { cva } from 'cva';
 
 const props = defineProps({
+    /** The URL to link to */
     href: { type: String, default: null },
-	/** When `href` is provided, this prop controls the link's `target` attribute. */
+    /** When `href` is provided, this prop controls the link's `target` attribute */
     target: { type: String, default: '_self' },
-	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
+    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
+    /** Text to display in the item */
     text: { type: String, default: null },
-	/** Controls the appearance of the dropdown item. <br><br> Options: `default`, `destructive` */
+    /** Controls the appearance of the context item. Options: `default`, `destructive` */
     variant: { type: String, default: 'default' },
 });
 
diff --git a/resources/js/components/ui/Context/Label.vue b/resources/js/components/ui/Context/Label.vue
index f1dc86d95ed..033c71e50ad 100644
--- a/resources/js/components/ui/Context/Label.vue
+++ b/resources/js/components/ui/Context/Label.vue
@@ -3,6 +3,7 @@ import { ContextMenuLabel } from 'reka-ui';
 import { useSlots } from 'vue';
 
 defineProps({
+    /** Label text to display */
     text: { type: String, default: null },
 });
 
diff --git a/resources/js/components/ui/DataTable/Cell.vue b/resources/js/components/ui/DataTable/Cell.vue
index a3438169289..82f6a7ead47 100644
--- a/resources/js/components/ui/DataTable/Cell.vue
+++ b/resources/js/components/ui/DataTable/Cell.vue
@@ -5,10 +5,13 @@ import { cva } from 'cva';
 const variant = inject('dataTableVariant', 'normal');
 
 const props = defineProps({
-	/** Text alignment <br><br> Options: `left`, `center`, `right` */
+    /** Text alignment. <br><br> Options: `left`, `center`, `right` */
     align: { type: String, default: 'left' },
+    /** Function to calculate position for left side rounding */
     position: { type: Function, required: true },
+    /** Function to calculate position for right side rounding */
     rightPosition: { type: Function, required: true },
+    /** Cell index */
     index: { type: Number, required: true },
 });
 
diff --git a/resources/js/components/ui/DataTable/Column.vue b/resources/js/components/ui/DataTable/Column.vue
index 1d6f355f59c..f15ea81fab3 100644
--- a/resources/js/components/ui/DataTable/Column.vue
+++ b/resources/js/components/ui/DataTable/Column.vue
@@ -5,9 +5,9 @@ import { cva } from 'cva';
 const variant = inject('dataTableVariant', 'normal');
 
 const props = defineProps({
-	/** Text alignment <br><br> Options: `left`, `center`, `right` */
+    /** Text alignment. <br><br> Options: `left`, `center`, `right` */
     align: { type: String, default: 'left' },
-	/** Column width */
+    /** Column width */
     width: { type: String, default: null },
 });
 
diff --git a/resources/js/components/ui/Dropdown/Dropdown.vue b/resources/js/components/ui/Dropdown/Dropdown.vue
index 2194989f5d7..3c9f038239e 100644
--- a/resources/js/components/ui/Dropdown/Dropdown.vue
+++ b/resources/js/components/ui/Dropdown/Dropdown.vue
@@ -11,8 +11,11 @@ defineOptions({
 const attrs = useAttrs();
 
 const props = defineProps({
+    /** The preferred alignment against the trigger. May change when collisions occur. <br><br> Options: `start`, `center`, `end` */
     align: { type: String, default: 'start' },
+    /** The distance in pixels from the trigger */
     offset: { type: Number, default: 5 },
+    /** The preferred side of the trigger to render against when open. <br><br> Options: `top`, `bottom`, `left`, `right` */
     side: { type: String, default: 'bottom' },
 });
 
diff --git a/resources/js/components/ui/Dropdown/Footer.vue b/resources/js/components/ui/Dropdown/Footer.vue
index cb796f81444..3d3c677447b 100644
--- a/resources/js/components/ui/Dropdown/Footer.vue
+++ b/resources/js/components/ui/Dropdown/Footer.vue
@@ -4,9 +4,11 @@ import { cva } from 'cva';
 import Icon from '../Icon/Icon.vue';
 
 defineProps({
+    /** The URL to link to */
     href: { type: String, default: null },
-	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
+    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
+    /** Text to display in the footer */
     text: { type: String, default: null },
 });
 
diff --git a/resources/js/components/ui/Dropdown/Header.vue b/resources/js/components/ui/Dropdown/Header.vue
index 1e63d4eae4f..26eacb3dd45 100644
--- a/resources/js/components/ui/Dropdown/Header.vue
+++ b/resources/js/components/ui/Dropdown/Header.vue
@@ -9,7 +9,9 @@ defineProps({
     icon: { type: String, default: null },
     /** Icon name. Will display after the text. [Browse available icons](/?path=/story/components-icon--all-icons) */
     appendIcon: { type: String, default: null },
+    /** URL for the append icon button to link to */
     appendHref: { type: String, default: null },
+    /** Text to display in the header */
     text: { type: String, default: null },
 });
 
diff --git a/resources/js/components/ui/Dropdown/Item.vue b/resources/js/components/ui/Dropdown/Item.vue
index 646517f0eb2..a0d7742b005 100644
--- a/resources/js/components/ui/Dropdown/Item.vue
+++ b/resources/js/components/ui/Dropdown/Item.vue
@@ -6,13 +6,15 @@ import { cva } from 'cva';
 import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
-    /** The element or component this component should render as. */
+    /** The element or component this component should render as */
     as: { type: String, default: null },
+    /** The URL to link to */
     href: { type: String, default: null },
-    /** When `href` is provided, this prop controls the link's `target` attribute. */
+    /** When `href` is provided, this prop controls the link's `target` attribute */
     target: { type: String, default: '_self' },
     /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
+    /** Text to display in the item */
     text: { type: String, default: null },
     /** Controls the appearance of the dropdown item. <br><br> Options: `default`, `destructive` */
     variant: { type: String, default: 'default' },
diff --git a/resources/js/components/ui/Dropdown/Label.vue b/resources/js/components/ui/Dropdown/Label.vue
index 0a9bd2d24dd..4ef417f1412 100644
--- a/resources/js/components/ui/Dropdown/Label.vue
+++ b/resources/js/components/ui/Dropdown/Label.vue
@@ -3,6 +3,7 @@ import { DropdownMenuLabel } from 'reka-ui';
 import { useSlots } from 'vue';
 
 defineProps({
+    /** Label text to display */
     text: { type: String, default: null },
 });
 
diff --git a/resources/js/components/ui/Editable.vue b/resources/js/components/ui/Editable.vue
index e7b8b91fbb8..b922a0ee26a 100644
--- a/resources/js/components/ui/Editable.vue
+++ b/resources/js/components/ui/Editable.vue
@@ -5,8 +5,11 @@ import { useAttrs, useTemplateRef } from 'vue';
 const emit = defineEmits(['update:modelValue', 'cancel', 'submit', 'edit']);
 
 const props = defineProps({
+    /** The controlled value of the editable text */
     modelValue: { type: String, default: null },
+    /** When `true`, the input will be automatically focused when the component mounts */
     startWithEditMode: { type: Boolean, default: false },
+    /** Controls when the edit is submitted. <br><br> Options: `blur`, `none`, `enter`, `both` */
     submitMode: { type: String, default: 'blur' },
     placeholder: { type: String, default: () => __('Enter text...') },
 });
diff --git a/resources/js/components/ui/EmptyState/Item.vue b/resources/js/components/ui/EmptyState/Item.vue
index 67d6fa85a8f..d1af7702998 100644
--- a/resources/js/components/ui/EmptyState/Item.vue
+++ b/resources/js/components/ui/EmptyState/Item.vue
@@ -4,22 +4,22 @@ import Icon from '../Icon/Icon.vue';
 import { useSlots } from 'vue';
 
 const props = defineProps({
-	/** Optional link */
+    /** Optional link */
     href: {
         type: String,
         default: null,
     },
-	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
+    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: {
         type: String,
         required: true,
     },
-	/** Heading text for the empty state item */
+    /** Heading text for the empty state item */
     heading: {
         type: String,
         required: true,
     },
-	/** Optional description text below the heading. */
+    /** Optional description text below the heading */
     description: {
         type: String,
         default: '',
diff --git a/resources/js/components/ui/Heading.vue b/resources/js/components/ui/Heading.vue
index 8cb21ffc2e1..c80da5d58f9 100644
--- a/resources/js/components/ui/Heading.vue
+++ b/resources/js/components/ui/Heading.vue
@@ -5,7 +5,7 @@ import Icon from './Icon/Icon.vue';
 import { Link } from '@inertiajs/vue3';
 
 const props = defineProps({
-    /** URL to link to */
+    /** The URL to link to */
     href: { type: [String, null], default: null },
     /** When `href` is provided, this prop controls the link's `target` attribute */
     target: { type: String, default: null },
diff --git a/resources/js/components/ui/Input/Input.vue b/resources/js/components/ui/Input/Input.vue
index 3fb8148b99f..2d5b813efa4 100644
--- a/resources/js/components/ui/Input/Input.vue
+++ b/resources/js/components/ui/Input/Input.vue
@@ -20,9 +20,7 @@ const props = defineProps({
     clearable: { type: Boolean, default: false },
     /** When `true`, shows a copy button to copy the value to clipboard */
     copyable: { type: Boolean, default: false },
-    /** When `true`, disables the input */
     disabled: { type: Boolean, default: false },
-    /** When `true`, makes the input read-only */
     readOnly: { type: Boolean, default: false },
     /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
@@ -38,11 +36,9 @@ const props = defineProps({
     loading: { type: Boolean, default: false },
     /** The controlled value of the input */
     modelValue: { type: [String, Number], default: null },
-    /** Placeholder text */
     placeholder: { type: String, default: null },
     /** Prepended text */
     prepend: { type: String, default: null },
-    /** When `true`, marks the field as required */
     required: { type: Boolean, default: false },
     /** Controls the size of the input. Options: `xs`, `sm`, `base`, `lg` */
     size: { type: String, default: 'base' },
diff --git a/resources/js/components/ui/Label.vue b/resources/js/components/ui/Label.vue
index 99862c0e32f..306721e3b41 100644
--- a/resources/js/components/ui/Label.vue
+++ b/resources/js/components/ui/Label.vue
@@ -10,7 +10,6 @@ const props = defineProps({
     for: { type: String, default: null },
     /** Optional badge text to display on the right side of the label */
     badge: { type: String, default: '' },
-    /** When `true`, displays a red asterisk indicating the field is required */
     required: { type: Boolean, default: false },
     /** The label text to display */
     text: { type: [String, Number, Boolean, null], default: null },
diff --git a/resources/js/components/ui/Pagination.vue b/resources/js/components/ui/Pagination.vue
index 63beb529d9d..f5f1f323ac1 100644
--- a/resources/js/components/ui/Pagination.vue
+++ b/resources/js/components/ui/Pagination.vue
@@ -9,11 +9,17 @@ import { computed } from 'vue';
 const emit = defineEmits(['page-selected', 'per-page-changed']);
 
 const props = defineProps({
+    /** When `true`, shows the totals (eg. 1-10 of 50) */
     showTotals: { type: Boolean, default: true },
+    /** The number of items per page */
     perPage: { type: Number },
+    /** The `meta` object from a Laravel API resource */
     resourceMeta: { type: Object, required: true },
+    /** When `true`, scrolls to the top when changing pages */
     scrollToTop: { type: Boolean, default: true },
+    /** When `true`, shows individual page number buttons */
     showPageLinks: { type: Boolean, default: true },
+    /** When `true`, shows the "per page" dropdown */
     showPerPageSelector: { type: Boolean, default: true },
 });
 
diff --git a/resources/js/components/ui/Publish/Container.vue b/resources/js/components/ui/Publish/Container.vue
index 45563e1d6f0..aa2abc938e2 100644
--- a/resources/js/components/ui/Publish/Container.vue
+++ b/resources/js/components/ui/Publish/Container.vue
@@ -70,15 +70,14 @@ const props = defineProps({
         default: true,
     },
 	/** Confirmation text when syncing a localized field with the origin value. */
-    syncFieldConfirmationText: {
-        type: String,
-        default: () => __('Are you sure?'),
-    },
-	/** Marks the publish form as read-only. */
-    readOnly: {
-        type: Boolean,
-        default: false,
-    },
+	syncFieldConfirmationText: {
+		type: String,
+		default: () => __('Are you sure?'),
+	},
+	readOnly: {
+		type: Boolean,
+		default: false,
+	},
 	/** Marks it as a "config" form, which renders slightly differently. */
     asConfig: {
         type: Boolean,
diff --git a/resources/js/components/ui/Radio/Group.vue b/resources/js/components/ui/Radio/Group.vue
index 113233a1d06..0fbe8a97146 100644
--- a/resources/js/components/ui/Radio/Group.vue
+++ b/resources/js/components/ui/Radio/Group.vue
@@ -3,9 +3,11 @@ import { useId } from 'vue';
 import { RadioGroupRoot } from 'reka-ui';
 
 defineProps({
+    /** When `true`, displays radio buttons horizontally */
     inline: { type: Boolean, default: false },
-	/** The controlled value of the radio group. */
-    modelValue: { type: [String, Number, Boolean], default: null },
+    /** The controlled value of the radio group */
+    modelValue: { type: String, default: null },
+    /** Name attribute for the radio group */
     name: { type: String, default: () => useId() },
     required: { type: Boolean, default: false },
 });
diff --git a/resources/js/components/ui/Splitter/Panel.vue b/resources/js/components/ui/Splitter/Panel.vue
index 17b4a112ca4..452fe1db8f9 100644
--- a/resources/js/components/ui/Splitter/Panel.vue
+++ b/resources/js/components/ui/Splitter/Panel.vue
@@ -2,8 +2,11 @@
 import { SplitterPanel } from 'reka-ui';
 
 defineProps({
+    /** When `true`, allows the panel to be collapsed */
     collapsible: { type: Boolean, default: false },
+    /** Size of the panel when collapsed (percentage) */
     collapsedSize: { type: Number, default: 10 },
+    /** Minimum size of the panel (percentage) */
     minSize: { type: Number, default: 20 },
 });
 </script>
diff --git a/resources/js/components/ui/Subheading.vue b/resources/js/components/ui/Subheading.vue
index b8986e83797..3a717726d05 100644
--- a/resources/js/components/ui/Subheading.vue
+++ b/resources/js/components/ui/Subheading.vue
@@ -2,8 +2,11 @@
 import { cva } from 'cva';
 
 const props = defineProps({
+    /** Controls the size of the subheading. Options: `sm`, `base`, `lg`, `xl` */
     size: { type: String, default: 'base' },
+    /** Text to display in the subheading */
     text: { type: [String, Number, Boolean, null], default: null },
+    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
 });
 
diff --git a/resources/js/components/ui/Switch.vue b/resources/js/components/ui/Switch.vue
index f53c5c99a0b..853bd2db526 100644
--- a/resources/js/components/ui/Switch.vue
+++ b/resources/js/components/ui/Switch.vue
@@ -4,11 +4,10 @@ import { SwitchRoot, SwitchThumb } from 'reka-ui';
 import { cva } from 'cva';
 
 const props = defineProps({
-    /** Whether the toggle is required */
     required: { type: Boolean, default: false },
     /** The id attribute for the toggle */
     id: { type: String, default: () => useId() },
-    /** The checked state of the toggle */
+    /** The controlled value of the switch */
     modelValue: { type: Boolean, default: false },
     /** The size of the toggle */
     size: { type: String, default: 'base' },
diff --git a/resources/js/components/ui/Tabs/Content.vue b/resources/js/components/ui/Tabs/Content.vue
index b441aaead2c..dac9eae3351 100644
--- a/resources/js/components/ui/Tabs/Content.vue
+++ b/resources/js/components/ui/Tabs/Content.vue
@@ -2,6 +2,7 @@
 import { TabsContent } from 'reka-ui';
 
 defineProps({
+	/** Unique tab name. Should match the name of a `TabTrigger` component. */
     name: { type: String, default: null },
 });
 </script>
diff --git a/resources/js/components/ui/Tabs/Trigger.vue b/resources/js/components/ui/Tabs/Trigger.vue
index c5170e01fc7..5ecda195a74 100644
--- a/resources/js/components/ui/Tabs/Trigger.vue
+++ b/resources/js/components/ui/Tabs/Trigger.vue
@@ -6,7 +6,9 @@ const slots = useSlots();
 const hasSlot = !!slots.default;
 
 defineProps({
+    /** Display text for the tab */
     text: { type: String, default: null },
+	/** Unique tab name. Should match the name of a `TabContent` component. */
     name: { type: String, default: null },
 });
 </script>
diff --git a/resources/js/components/ui/Textarea.vue b/resources/js/components/ui/Textarea.vue
index 3ac165a6ceb..f72c4af6ef8 100644
--- a/resources/js/components/ui/Textarea.vue
+++ b/resources/js/components/ui/Textarea.vue
@@ -9,13 +9,10 @@ defineEmits(['update:modelValue']);
 const props = defineProps({
     /** When `true`, the textarea will automatically grow/shrink to fit content */
     elastic: { type: Boolean, default: false },
-    /** When `true`, disables the textarea */
     disabled: { type: Boolean, default: false },
     /** ID attribute for the textarea element */
     id: { type: String, default: null },
-    /** When `true`, makes the textarea read-only */
     readOnly: { type: Boolean, default: false },
-    /** When `true`, marks the field as required */
     required: { type: Boolean, default: false },
     /** Controls resize behavior. Options: `both`, `horizontal`, `vertical`, `none` */
     resize: { type: String, default: 'vertical' },
diff --git a/resources/js/components/ui/Toggle/Item.vue b/resources/js/components/ui/Toggle/Item.vue
index 0db1f1c84d4..af57ff22088 100644
--- a/resources/js/components/ui/Toggle/Item.vue
+++ b/resources/js/components/ui/Toggle/Item.vue
@@ -6,10 +6,15 @@ import { ToggleGroupItem } from 'reka-ui';
 import Icon from '../Icon/Icon.vue';
 
 const props = defineProps({
+    /** Value of the toggle item */
     value: { type: String, required: true },
+    /** Label text to display in the toggle item */
     label: { type: String, default: null },
+    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
+    /** When `true`, disables the toggle item */
     disabled: { type: Boolean, default: false },
+    /** ID of element that describes this toggle item */
     ariaDescribedby: { type: String, default: null },
 });
 
diff --git a/resources/js/stories/CodeEditor.stories.ts b/resources/js/stories/CodeEditor.stories.ts
index 20f9de37a87..41ab66be73b 100644
--- a/resources/js/stories/CodeEditor.stories.ts
+++ b/resources/js/stories/CodeEditor.stories.ts
@@ -6,56 +6,22 @@ const meta = {
     title: 'Components/CodeEditor',
     component: CodeEditor,
     argTypes: {
-        allowModeSelection: {
-            control: 'boolean',
-            description: 'When `true`, displays a mode selector dropdown.',
-        },
-        disabled: { control: 'boolean' },
         indentType: {
             control: 'select',
-            description: 'Controls whether to indent with tabs or spaces.',
             options: ['tabs', 'spaces'],
         },
         keyMap: {
             control: 'select',
-            description: 'Keyboard mapping for the editor.',
             options: ['sublime', 'vim'],
         },
-        lineNumbers: {
-            control: 'boolean',
-            description: 'When `true`, line numbers are displayed.',
-        },
-        lineWrapping: {
-            control: 'boolean',
-            description: 'When `true`, long lines will wrap.',
-        },
         mode: {
             control: 'select',
-            description: 'The syntax highlighting mode. <br><br> Options: `clike`, `css`, `diff`, `go`, `haml`, `handlebars`, `htmlmixed`, `less`, `markdown`, `gfm`, `nginx`, `text/x-java`, `javascript`, `jsx`, `text/x-objectivec`, `php`, `python`, `ruby`, `scss`, `shell`, `sql`, `twig`, `vue`, `xml`, `yaml-frontmatter`',
             options: ['clike', 'css', 'diff', 'go', 'haml', 'handlebars', 'htmlmixed', 'less', 'markdown', 'gfm', 'nginx', 'text/x-java', 'javascript', 'jsx', 'text/x-objectivec', 'php', 'python', 'ruby', 'scss', 'shell', 'sql', 'twig', 'vue', 'xml', 'yaml-frontmatter'],
         },
-        modelValue: {
-            control: 'text',
-            description: 'The controlled code editor value.',
-        },
-        readOnly: { control: 'boolean' },
-        showModeLabel: {
-            control: 'boolean',
-            description: 'When `true`, displays the current mode label.',
-        },
-        tabSize: {
-            control: 'number',
-            description: 'The width of a tab character.',
-        },
         colorMode: {
             control: 'select',
-            description: 'Theme of the code editor. Options: `system`, `light`, `dark`',
             options: ['system', 'light', 'dark'],
         },
-        title: {
-            control: 'text',
-            description: 'Title displayed in fullscreen mode.',
-        },
         'update:mode': {
             description: 'Event handler called when the syntax highlighting mode changes.',
             table: {
@@ -77,10 +43,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const defaultCode = `
-<CodeEditor
-    mode="javascript"
-    v-model="code"
-/>
+<CodeEditor mode="javascript" v-model="code" />
 `;
 
 export const _DocsIntro: Story = {
diff --git a/resources/js/stories/Dropdown.stories.ts b/resources/js/stories/Dropdown.stories.ts
index 27e1a119ee4..75cf84cdba7 100644
--- a/resources/js/stories/Dropdown.stories.ts
+++ b/resources/js/stories/Dropdown.stories.ts
@@ -12,20 +12,14 @@ const meta = {
         DropdownSeparator,
     },
     argTypes: {
-        // align: {
-        //     control: 'select',
-        //     options: ['start', 'center', 'end'],
-        //     description: 'The preferred alignment against the trigger. May change when collisions occur. <br><br> Options: `start`, `center`, `end`',
-        // },
-        // offset: {
-        //     control: 'number',
-        //     description: 'The distance in pixels from the trigger.',
-        // },
-        // side: {
-        //     control: 'select',
-        //     options: ['top', 'bottom', 'left', 'right'],
-        //     description: 'The preferred side of the trigger to render against when open. <br><br> Options: `top`, `bottom`, `left`, `right`',
-        // },
+        align: {
+            control: 'select',
+            options: ['start', 'center', 'end'],
+        },
+        side: {
+            control: 'select',
+            options: ['top', 'bottom', 'left', 'right'],
+        },
     },
 } satisfies Meta<typeof Dropdown>;
 
diff --git a/resources/js/stories/Editable.stories.ts b/resources/js/stories/Editable.stories.ts
index 44c0702fe71..f1dfbdbdbfe 100644
--- a/resources/js/stories/Editable.stories.ts
+++ b/resources/js/stories/Editable.stories.ts
@@ -6,20 +6,10 @@ const meta = {
     title: 'Components/Editable',
     component: Editable,
     argTypes: {
-        modelValue: {
-            control: 'text',
-            description: 'The controlled value of the editable text.',
-        },
-        startWithEditMode: {
-            control: 'boolean',
-            description: 'When `true`, the input will be automatically focused when the component mounts.',
-        },
         submitMode: {
             control: 'select',
-            description: 'Controls when the edit is submitted. Options: `blur`, `none` `enter`, `both`',
             options: ['blur', 'none', 'enter', 'both'],
         },
-        placeholder: { control: 'text' },
         'update:modelValue': {
             description: 'Event handler called when the text is updated.',
             table: {
diff --git a/resources/js/stories/Pagination.stories.ts b/resources/js/stories/Pagination.stories.ts
index 346f8717988..16df2fb1790 100644
--- a/resources/js/stories/Pagination.stories.ts
+++ b/resources/js/stories/Pagination.stories.ts
@@ -6,29 +6,19 @@ const meta = {
     title: 'Components/Pagination',
     component: Pagination,
     argTypes: {
-        showTotals: {
-            control: 'boolean',
-            description: 'When `true`, shows the totals (eg. 1-10 of 50)',
+        'page-selected': {
+            description: 'Event handler called when a page is selected.',
+            table: {
+                category: 'events',
+                type: { summary: '(page: number) => void' }
+            }
         },
-        perPage: {
-            control: 'number',
-            description: 'The number of items per page',
-        },
-        resourceMeta: {
-            control: 'object',
-            description: 'The `meta` object from a Laravel API resource',
-        },
-        scrollToTop: {
-            control: 'boolean',
-            description: 'When `true`, scrolls to the top when changing pages',
-        },
-        showPageLinks: {
-            control: 'boolean',
-            description: 'When `true`, shows individual page number buttons',
-        },
-        showPerPageSelector: {
-            control: 'boolean',
-            description: 'When `true`, shows the "per page" dropdown',
+        'per-page-changed': {
+            description: 'Event handler called when the per page value is changed.',
+            table: {
+                category: 'events',
+                type: { summary: '(perPage: number) => void' }
+            }
         },
     },
 } satisfies Meta<typeof Pagination>;

From 3706329e1b8e04c17dfbe14cd8fb9f5b7a404318 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 18:33:16 +0000
Subject: [PATCH 19/32] wip

---
 resources/js/components/ui/Radio/Item.vue |  3 +++
 resources/js/components/ui/Switch.vue     |  2 +-
 resources/js/components/ui/Tabs/Tabs.vue  |  2 ++
 resources/js/stories/Switch.stories.ts    | 31 ++++++++++++---------
 resources/js/stories/Tabs.stories.ts      | 33 +++++++++++------------
 5 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/resources/js/components/ui/Radio/Item.vue b/resources/js/components/ui/Radio/Item.vue
index 6c80eb2a7bd..9d2ae006ed3 100644
--- a/resources/js/components/ui/Radio/Item.vue
+++ b/resources/js/components/ui/Radio/Item.vue
@@ -2,9 +2,12 @@
 import { RadioGroupIndicator, RadioGroupItem, useId } from 'reka-ui';
 
 const props = defineProps({
+    /** Description text to display below the label */
     description: { type: String, default: null },
     disabled: { type: Boolean, default: false },
+    /** Label text to display next to the radio button */
     label: { type: String, default: null },
+    /** Value of the radio button */
     value: { type: [String, Number, Boolean], required: true },
 });
 
diff --git a/resources/js/components/ui/Switch.vue b/resources/js/components/ui/Switch.vue
index 853bd2db526..56a16a96e03 100644
--- a/resources/js/components/ui/Switch.vue
+++ b/resources/js/components/ui/Switch.vue
@@ -9,7 +9,7 @@ const props = defineProps({
     id: { type: String, default: () => useId() },
     /** The controlled value of the switch */
     modelValue: { type: Boolean, default: false },
-    /** The size of the toggle */
+    /** Controls the size of the switch. <br><br> Options: `xs`, `sm`, `base`, `lg` */
     size: { type: String, default: 'base' },
 });
 
diff --git a/resources/js/components/ui/Tabs/Tabs.vue b/resources/js/components/ui/Tabs/Tabs.vue
index 2e56ed2790f..447ba1998cd 100644
--- a/resources/js/components/ui/Tabs/Tabs.vue
+++ b/resources/js/components/ui/Tabs/Tabs.vue
@@ -4,7 +4,9 @@ import { TabsRoot } from 'reka-ui';
 const emit = defineEmits(['update:modelValue']);
 
 defineProps({
+    /** The controlled value of the tabs */
     modelValue: { type: String, default: null },
+    /** When `true`, the element will be unmounted on closed state */
     unmountOnHide: { type: Boolean, default: true },
 });
 </script>
diff --git a/resources/js/stories/Switch.stories.ts b/resources/js/stories/Switch.stories.ts
index 4d4e3d32a0f..15726b0377f 100644
--- a/resources/js/stories/Switch.stories.ts
+++ b/resources/js/stories/Switch.stories.ts
@@ -1,19 +1,13 @@
 import type {Meta, StoryObj} from '@storybook/vue3';
 import {Switch} from '@ui';
+import {ref} from 'vue';
 
 const meta = {
     title: 'Components/Switch',
     component: Switch,
     argTypes: {
-        required: { control: 'boolean' },
-        id: { control: 'text' },
-        modelValue: {
-            control: 'text',
-            description: 'The controlled value of the switch.',
-        },
         size: {
             control: 'select',
-            description: 'Controls the size of the switch. <br><br> Options: `xs`, `sm`, `base`, `lg`',
             options: ['xs', 'sm', 'base', 'lg'],
         },
         'update:modelValue': {
@@ -30,7 +24,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const defaultCode = `
-<Switch />
+<Switch v-model="enabled" />
 `;
 
 export const _DocsIntro: Story = {
@@ -42,16 +36,20 @@ export const _DocsIntro: Story = {
     },
     render: () => ({
         components: { Switch },
+        setup() {
+            const enabled = ref(false);
+            return { enabled };
+        },
         template: defaultCode,
     }),
 };
 
 const sizesCode = `
-<div class="flex items-center">
-    <Switch size="lg" />
-    <Switch />
-    <Switch size="sm" />
-    <Switch size="xs" />
+<div class="flex items-center gap-2">
+    <Switch v-model="lg" size="lg" />
+    <Switch v-model="base" />
+    <Switch v-model="sm" size="sm" />
+    <Switch v-model="xs" size="xs" />
 </div>
 `;
 
@@ -64,6 +62,13 @@ export const _Sizes: Story = {
     },
     render: () => ({
         components: { Switch },
+        setup() {
+            const lg = ref(false);
+            const base = ref(false);
+            const sm = ref(false);
+            const xs = ref(false);
+            return { lg, base, sm, xs };
+        },
         template: sizesCode,
     }),
 };
diff --git a/resources/js/stories/Tabs.stories.ts b/resources/js/stories/Tabs.stories.ts
index 7e513be6acd..148e002fc37 100644
--- a/resources/js/stories/Tabs.stories.ts
+++ b/resources/js/stories/Tabs.stories.ts
@@ -1,5 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/vue3';
 import {TabContent, TabList, Tabs, TabTrigger} from '@ui';
+import {ref} from 'vue';
 
 const meta = {
     title: 'Components/Tabs',
@@ -10,14 +11,6 @@ const meta = {
         TabContent,
     },
     argTypes: {
-        modelValue: {
-            control: 'text',
-            description: 'The controlled value of the tabs.',
-        },
-        unmountOnHide: {
-            control: 'boolean',
-            description: 'When `true`, the element will be unmounted on closed state.',
-        },
         'update:modelValue': {
             description: 'Event handler called when the tab changes.',
             table: {
@@ -32,20 +25,20 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const defaultCode = `
-<Tabs default-tab="tab1" class="w-full">
+<Tabs v-model="activeTab" class="w-full">
     <TabList>
-        <TabTrigger text="Shiny" name="tab1" />
-        <TabTrigger text="Happy" name="tab2" />
-        <TabTrigger text="People" name="tab3" />
+        <TabTrigger text="Shiny" name="one" />
+        <TabTrigger text="Happy" name="two" />
+        <TabTrigger text="People" name="three" />
     </TabList>
-    <TabContent name="tab1">
-        <p class="py-8">Tab 1 content</p>
+    <TabContent name="one">
+        <p class="py-8">Content of Tab 1</p>
     </TabContent>
-    <TabContent name="tab2">
-        <p class="py-8">Tab 2 content</p>
+    <TabContent name="two">
+        <p class="py-8">Content of Tab 2</p>
     </TabContent>
-    <TabContent name="tab3">
-        <p class="py-8">Tab 3 content</p>
+    <TabContent name="three">
+        <p class="py-8">Content of Tab 3</p>
     </TabContent>
 </Tabs>
 `;
@@ -59,6 +52,10 @@ export const _DocsIntro: Story = {
     },
     render: () => ({
         components: { Tabs, TabList, TabTrigger, TabContent },
+        setup() {
+            const activeTab = ref('tab1');
+            return { activeTab };
+        },
         template: defaultCode,
     }),
 };

From 215c5523d8aeac810e41fe157ed025a975ee08fa Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 18:38:43 +0000
Subject: [PATCH 20/32] wip

---
 resources/js/stories/Checkbox.stories.ts | 126 +++++++++--------------
 resources/js/stories/docs/Checkbox.mdx   |  14 +--
 2 files changed, 56 insertions(+), 84 deletions(-)

diff --git a/resources/js/stories/Checkbox.stories.ts b/resources/js/stories/Checkbox.stories.ts
index 1b9944fa57c..e00351b8c7a 100644
--- a/resources/js/stories/Checkbox.stories.ts
+++ b/resources/js/stories/Checkbox.stories.ts
@@ -33,16 +33,12 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const basicCode = `<script setup>
-import { ref } from 'vue';
-const checked = ref(false);
-</script>
-
-<template>
-    <Checkbox v-model="checked" label="Accept terms and conditions" />
-</template>`;
+const basicCode = `
+<Checkbox v-model="checked" label="Accept terms and conditions" />
+`;
 
-export const Basic: Story = {
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
     render: () => ({
         components: { Checkbox },
         setup() {
@@ -58,20 +54,16 @@ export const Basic: Story = {
     },
 };
 
-const withDescriptionCode = `<script setup>
-import { ref } from 'vue';
-const checked = ref(false);
-</script>
-
-<template>
-    <Checkbox 
-        v-model="checked" 
-        label="Subscribe to newsletter"
-        description="Receive weekly updates about new features and content"
-    />
-</template>`;
+const withDescriptionCode = `
+<Checkbox 
+    v-model="checked" 
+    label="Subscribe to newsletter"
+    description="Receive weekly updates about new features and content"
+/>
+`;
 
 export const WithDescription: Story = {
+    tags: ['!dev'],
     render: () => ({
         components: { Checkbox },
         setup() {
@@ -91,19 +83,15 @@ export const WithDescription: Story = {
     },
 };
 
-const sizesCode = `<script setup>
-import { ref } from 'vue';
-const checked = ref(false);
-</script>
-
-<template>
-    <div class="space-y-3">
-        <Checkbox v-model="checked" label="Small checkbox" size="sm" />
-        <Checkbox v-model="checked" label="Base checkbox" size="base" />
-    </div>
-</template>`;
+const sizesCode = `
+<div class="space-y-3">
+    <Checkbox v-model="checked" label="Small checkbox" size="sm" />
+    <Checkbox v-model="checked" label="Base checkbox" size="base" />
+</div>
+`;
 
 export const Sizes: Story = {
+    tags: ['!dev'],
     render: () => ({
         components: { Checkbox },
         setup() {
@@ -122,16 +110,12 @@ export const Sizes: Story = {
     },
 };
 
-const disabledCode = `<script setup>
-import { ref } from 'vue';
-const checked = ref(true);
-</script>
-
-<template>
-    <Checkbox v-model="checked" label="Disabled checkbox" disabled />
-</template>`;
+const disabledCode = `
+<Checkbox v-model="checked" label="Disabled checkbox" disabled />
+`;
 
 export const Disabled: Story = {
+    tags: ['!dev'],
     render: () => ({
         components: { Checkbox },
         setup() {
@@ -147,20 +131,16 @@ export const Disabled: Story = {
     },
 };
 
-const soloCode = `<script setup>
-import { ref } from 'vue';
-const checked = ref(false);
-</script>
-
-<template>
-    <Checkbox 
-        v-model="checked" 
-        label="Hidden label for accessibility"
-        solo
-    />
-</template>`;
+const soloCode = `
+<Checkbox 
+    v-model="checked" 
+    label="Hidden label for accessibility"
+    solo
+/>
+`;
 
 export const Solo: Story = {
+    tags: ['!dev'],
     render: () => ({
         components: { Checkbox },
         setup() {
@@ -180,21 +160,17 @@ export const Solo: Story = {
     },
 };
 
-const groupCode = `<script setup>
-import { ref } from 'vue';
-const selected = ref(['html', 'css']);
-</script>
-
-<template>
-    <CheckboxGroup v-model="selected">
-        <Checkbox value="html" label="HTML" />
-        <Checkbox value="css" label="CSS" />
-        <Checkbox value="javascript" label="JavaScript" />
-        <Checkbox value="vue" label="Vue.js" />
-    </CheckboxGroup>
-</template>`;
+const groupCode = `
+<CheckboxGroup v-model="selected">
+    <Checkbox value="html" label="HTML" />
+    <Checkbox value="css" label="CSS" />
+    <Checkbox value="javascript" label="JavaScript" />
+    <Checkbox value="vue" label="Vue.js" />
+</CheckboxGroup>
+`;
 
 export const Group: Story = {
+    tags: ['!dev'],
     render: () => ({
         components: { Checkbox, CheckboxGroup },
         setup() {
@@ -215,20 +191,16 @@ export const Group: Story = {
     },
 };
 
-const inlineGroupCode = `<script setup>
-import { ref } from 'vue';
-const selected = ref(['red']);
-</script>
-
-<template>
-    <CheckboxGroup v-model="selected" inline>
-        <Checkbox value="red" label="Red" />
-        <Checkbox value="green" label="Green" />
-        <Checkbox value="blue" label="Blue" />
-    </CheckboxGroup>
-</template>`;
+const inlineGroupCode = `
+<CheckboxGroup v-model="selected" inline>
+    <Checkbox value="red" label="Red" />
+    <Checkbox value="green" label="Green" />
+    <Checkbox value="blue" label="Blue" />
+</CheckboxGroup>
+`;
 
 export const InlineGroup: Story = {
+    tags: ['!dev'],
     render: () => ({
         components: { Checkbox, CheckboxGroup },
         setup() {
diff --git a/resources/js/stories/docs/Checkbox.mdx b/resources/js/stories/docs/Checkbox.mdx
index 76e25ad1b83..1a53d84c77f 100644
--- a/resources/js/stories/docs/Checkbox.mdx
+++ b/resources/js/stories/docs/Checkbox.mdx
@@ -5,28 +5,28 @@ import * as CheckboxStories from '../Checkbox.stories';
 
 # Checkbox
 A checkbox input component with label and description support. Can be used individually or as part of a checkbox group.
-<Canvas of={CheckboxStories.Basic} />
+<Canvas of={CheckboxStories._DocsIntro} sourceState={'shown'} />
 
 ## With Description
-<Canvas of={CheckboxStories.WithDescription} />
+<Canvas of={CheckboxStories.WithDescription} sourceState={'shown'} />
 
 ## Sizes
-<Canvas of={CheckboxStories.Sizes} />
+<Canvas of={CheckboxStories.Sizes} sourceState={'shown'} />
 
 ## Disabled
-<Canvas of={CheckboxStories.Disabled} />
+<Canvas of={CheckboxStories.Disabled} sourceState={'shown'} />
 
 ## Solo Mode
 Use `solo` when the checkbox is used in a context where the label is provided elsewhere, like in a table cell. The label is still required for accessibility but won't be visually displayed:
-<Canvas of={CheckboxStories.Solo} />
+<Canvas of={CheckboxStories.Solo} sourceState={'shown'} />
 
 ## Checkbox Group
 Group multiple checkboxes together with `CheckboxGroup`. The group manages the selected values as an array:
-<Canvas of={CheckboxStories.Group} />
+<Canvas of={CheckboxStories.Group} sourceState={'shown'} />
 
 ## Inline Group
 Use the `inline` prop to display checkboxes horizontally:
-<Canvas of={CheckboxStories.InlineGroup} />
+<Canvas of={CheckboxStories.InlineGroup} sourceState={'shown'} />
 
 ## Arguments
 <ArgTypes of={CheckboxStories} />

From 978a3dc4e03147ddd0b3592a31fd1b1b45036354 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 18:47:56 +0000
Subject: [PATCH 21/32] wip

---
 resources/js/stories/Button.stories.ts           | 2 +-
 resources/js/stories/Calendar.stories.ts         | 2 +-
 resources/js/stories/Card.stories.ts             | 2 +-
 resources/js/stories/CharacterCounter.stories.ts | 2 +-
 resources/js/stories/Checkbox.stories.ts         | 2 +-
 resources/js/stories/Context.stories.ts          | 2 +-
 resources/js/stories/DataTable.stories.ts        | 2 +-
 resources/js/stories/DatePicker.stories.ts       | 2 +-
 resources/js/stories/DateRangePicker.stories.ts  | 2 +-
 resources/js/stories/Description.stories.ts      | 2 +-
 resources/js/stories/Dropdown.stories.ts         | 2 +-
 resources/js/stories/EmptyState.stories.ts       | 2 +-
 resources/js/stories/ErrorMessage.stories.ts     | 2 +-
 resources/js/stories/Field.stories.ts            | 2 +-
 resources/js/stories/Header.stories.ts           | 2 +-
 resources/js/stories/HoverCard.stories.ts        | 2 +-
 resources/js/stories/Input.stories.ts            | 2 +-
 resources/js/stories/Label.stories.ts            | 2 +-
 resources/js/stories/Listing.stories.ts          | 2 +-
 resources/js/stories/Modal.stories.ts            | 2 +-
 resources/js/stories/Pagination.stories.ts       | 2 +-
 resources/js/stories/Panel.stories.ts            | 2 +-
 resources/js/stories/Popover.stories.ts          | 2 +-
 resources/js/stories/Radio.stories.ts            | 2 +-
 resources/js/stories/Select.stories.ts           | 2 +-
 resources/js/stories/Separator.stories.ts        | 2 +-
 resources/js/stories/Slider.stories.ts           | 2 +-
 resources/js/stories/Splitter.stories.ts         | 2 +-
 resources/js/stories/Switch.stories.ts           | 2 +-
 resources/js/stories/Table.stories.ts            | 2 +-
 resources/js/stories/Tabs.stories.ts             | 2 +-
 resources/js/stories/Textarea.stories.ts         | 2 +-
 resources/js/stories/TimePicker.stories.ts       | 2 +-
 resources/js/stories/Toggle.stories.ts           | 2 +-
 34 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/resources/js/stories/Button.stories.ts b/resources/js/stories/Button.stories.ts
index eed31cf13cb..bbf0c8f6f59 100644
--- a/resources/js/stories/Button.stories.ts
+++ b/resources/js/stories/Button.stories.ts
@@ -4,7 +4,7 @@ import {computed} from 'vue';
 import {icons} from './icons';
 
 const meta = {
-    title: 'Components/Button',
+    title: 'Forms/Button',
     component: Button,
     argTypes: {
         icon: {
diff --git a/resources/js/stories/Calendar.stories.ts b/resources/js/stories/Calendar.stories.ts
index e376f56446d..19eb936bb5f 100644
--- a/resources/js/stories/Calendar.stories.ts
+++ b/resources/js/stories/Calendar.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {Calendar, Card} from '@ui';
 
 const meta = {
-    title: 'Components/Calendar',
+    title: 'Forms/Calendar',
     component: Calendar,
     argTypes: {
         modelValue: {
diff --git a/resources/js/stories/Card.stories.ts b/resources/js/stories/Card.stories.ts
index 959b0182489..59ea7e136f1 100644
--- a/resources/js/stories/Card.stories.ts
+++ b/resources/js/stories/Card.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {Button, Card, CardPanel, Heading, Input, Panel, PanelHeader, Subheading} from '@ui';
 
 const meta = {
-    title: 'Components/Card',
+    title: 'Layout/Card',
     component: Card,
     argTypes: {
         inset: {
diff --git a/resources/js/stories/CharacterCounter.stories.ts b/resources/js/stories/CharacterCounter.stories.ts
index 0992e5c0728..2b3dea14435 100644
--- a/resources/js/stories/CharacterCounter.stories.ts
+++ b/resources/js/stories/CharacterCounter.stories.ts
@@ -3,7 +3,7 @@ import {CharacterCounter, Input} from '@ui';
 import {ref} from 'vue';
 
 const meta = {
-    title: 'Components/CharacterCounter',
+    title: 'Forms/CharacterCounter',
     component: CharacterCounter,
     argTypes: {},
 } satisfies Meta<typeof CharacterCounter>;
diff --git a/resources/js/stories/Checkbox.stories.ts b/resources/js/stories/Checkbox.stories.ts
index e00351b8c7a..c4c8b44ca05 100644
--- a/resources/js/stories/Checkbox.stories.ts
+++ b/resources/js/stories/Checkbox.stories.ts
@@ -3,7 +3,7 @@ import { Checkbox, CheckboxGroup } from '@ui';
 import { ref } from 'vue';
 
 const meta = {
-    title: 'Components/Checkbox',
+    title: 'Forms/Checkbox',
     component: Checkbox,
     subcomponents: { CheckboxGroup },
     argTypes: {
diff --git a/resources/js/stories/Context.stories.ts b/resources/js/stories/Context.stories.ts
index c3317f14ea2..a0c594d7089 100644
--- a/resources/js/stories/Context.stories.ts
+++ b/resources/js/stories/Context.stories.ts
@@ -11,7 +11,7 @@ import {
 } from '@ui';
 
 const meta = {
-    title: 'Components/Context',
+    title: 'Overlays/Context',
     component: Context,
     subcomponents: {
         ContextMenu,
diff --git a/resources/js/stories/DataTable.stories.ts b/resources/js/stories/DataTable.stories.ts
index bbd58c276a1..4bcd8a38a20 100644
--- a/resources/js/stories/DataTable.stories.ts
+++ b/resources/js/stories/DataTable.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {DataTable, DataTableCell, DataTableColumn, DataTableRow} from '@ui';
 
 const meta = {
-    title: 'Components/DataTable',
+    title: 'Layout/DataTable',
     component: DataTable,
     subcomponents: {
         DataTableColumn,
diff --git a/resources/js/stories/DatePicker.stories.ts b/resources/js/stories/DatePicker.stories.ts
index e1882d533cd..4db4bb1c552 100644
--- a/resources/js/stories/DatePicker.stories.ts
+++ b/resources/js/stories/DatePicker.stories.ts
@@ -4,7 +4,7 @@ import {DatePicker} from '@ui';
 import {parseDate} from '@internationalized/date';
 
 const meta = {
-    title: 'Components/DatePicker',
+    title: 'Forms/DatePicker',
     component: DatePicker,
     argTypes: {
         modelValue: {
diff --git a/resources/js/stories/DateRangePicker.stories.ts b/resources/js/stories/DateRangePicker.stories.ts
index 3cfc75f6b81..d60d024739c 100644
--- a/resources/js/stories/DateRangePicker.stories.ts
+++ b/resources/js/stories/DateRangePicker.stories.ts
@@ -4,7 +4,7 @@ import {DateRangePicker} from '@ui';
 import {parseDate} from '@internationalized/date';
 
 const meta = {
-    title: 'Components/DateRangePicker',
+    title: 'Forms/DateRangePicker',
     component: DateRangePicker,
     argTypes: {
         modelValue: {
diff --git a/resources/js/stories/Description.stories.ts b/resources/js/stories/Description.stories.ts
index 53d6bed43b6..23c2ced8c34 100644
--- a/resources/js/stories/Description.stories.ts
+++ b/resources/js/stories/Description.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {Description} from '@ui';
 
 const meta = {
-    title: 'Components/Description',
+    title: 'Forms/Description',
     component: Description,
     argTypes: {},
 } satisfies Meta<typeof Description>;
diff --git a/resources/js/stories/Dropdown.stories.ts b/resources/js/stories/Dropdown.stories.ts
index 75cf84cdba7..9d8ed036342 100644
--- a/resources/js/stories/Dropdown.stories.ts
+++ b/resources/js/stories/Dropdown.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {Button, Dropdown, DropdownFooter, DropdownHeader, DropdownItem, DropdownMenu, DropdownSeparator} from '@ui';
 
 const meta = {
-    title: 'Components/Dropdown',
+    title: 'Overlays/Dropdown',
     component: Dropdown,
     subcomponents: {
         DropdownMenu,
diff --git a/resources/js/stories/EmptyState.stories.ts b/resources/js/stories/EmptyState.stories.ts
index 6bb0ce74974..4182f257c6a 100644
--- a/resources/js/stories/EmptyState.stories.ts
+++ b/resources/js/stories/EmptyState.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {EmptyStateItem, EmptyStateMenu} from '@ui';
 
 const meta = {
-    title: 'Components/EmptyState',
+    title: 'Layout/EmptyState',
     component: EmptyStateMenu,
     subcomponents: {
         EmptyStateItem,
diff --git a/resources/js/stories/ErrorMessage.stories.ts b/resources/js/stories/ErrorMessage.stories.ts
index d99f3e0f519..304a59e7e81 100644
--- a/resources/js/stories/ErrorMessage.stories.ts
+++ b/resources/js/stories/ErrorMessage.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {ErrorMessage} from '@ui';
 
 const meta = {
-    title: 'Components/ErrorMessage',
+    title: 'Forms/ErrorMessage',
     component: ErrorMessage,
     argTypes: {},
 } satisfies Meta<typeof ErrorMessage>;
diff --git a/resources/js/stories/Field.stories.ts b/resources/js/stories/Field.stories.ts
index c7761ab3136..dd344513e51 100644
--- a/resources/js/stories/Field.stories.ts
+++ b/resources/js/stories/Field.stories.ts
@@ -3,7 +3,7 @@ import {ref} from 'vue';
 import {Button, Field, Input, Switch, Textarea} from '@ui';
 
 const meta = {
-    title: 'Components/Field',
+    title: 'Forms/Field',
     component: Field,
     argTypes: {
         asConfig: {
diff --git a/resources/js/stories/Header.stories.ts b/resources/js/stories/Header.stories.ts
index 8b4da00f39a..aba0f64a043 100644
--- a/resources/js/stories/Header.stories.ts
+++ b/resources/js/stories/Header.stories.ts
@@ -3,7 +3,7 @@ import {Badge, Button, Header} from '@ui';
 import {icons} from "@/stories/icons";
 
 const meta = {
-    title: 'Components/Header',
+    title: 'Layout/Header',
     component: Header,
     argTypes: {
         icon: {
diff --git a/resources/js/stories/HoverCard.stories.ts b/resources/js/stories/HoverCard.stories.ts
index 875799bacf2..b4494dc4214 100644
--- a/resources/js/stories/HoverCard.stories.ts
+++ b/resources/js/stories/HoverCard.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {Button, Description, Heading, HoverCard} from '@ui';
 
 const meta = {
-    title: 'Components/HoverCard',
+    title: 'Overlays/HoverCard',
     component: HoverCard,
     argTypes: {
         align: {
diff --git a/resources/js/stories/Input.stories.ts b/resources/js/stories/Input.stories.ts
index a69d8f8fd51..4d96527a97f 100644
--- a/resources/js/stories/Input.stories.ts
+++ b/resources/js/stories/Input.stories.ts
@@ -3,7 +3,7 @@ import {Button, Description, Field, Input, Label} from '@ui';
 import {icons} from "@/stories/icons";
 
 const meta = {
-    title: 'Components/Input',
+    title: 'Forms/Input',
     component: Input,
     argTypes: {
         icon: {
diff --git a/resources/js/stories/Label.stories.ts b/resources/js/stories/Label.stories.ts
index 33d7125488d..f231f21b471 100644
--- a/resources/js/stories/Label.stories.ts
+++ b/resources/js/stories/Label.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {Field, Input, Label} from '@ui';
 
 const meta = {
-    title: 'Components/Label',
+    title: 'Forms/Label',
     component: Label,
     argTypes: {},
 } satisfies Meta<typeof Label>;
diff --git a/resources/js/stories/Listing.stories.ts b/resources/js/stories/Listing.stories.ts
index 82a00b55589..c5f139ad484 100644
--- a/resources/js/stories/Listing.stories.ts
+++ b/resources/js/stories/Listing.stories.ts
@@ -18,7 +18,7 @@ import {
 } from '@ui';
 
 const meta = {
-    title: 'Components/Listing',
+    title: 'Layout/Listing',
     component: Listing,
     subcomponents: {
         ListingCustomizeColumns,
diff --git a/resources/js/stories/Modal.stories.ts b/resources/js/stories/Modal.stories.ts
index 0567de7b51e..bc3fbf7e14b 100644
--- a/resources/js/stories/Modal.stories.ts
+++ b/resources/js/stories/Modal.stories.ts
@@ -3,7 +3,7 @@ import {Button, Field, Input, Modal, ModalClose, ModalTitle} from '@ui';
 import PortalTargets from "@/components/portals/PortalTargets.vue";
 
 const meta = {
-    title: 'Components/Modal',
+    title: 'Overlays/Modal',
     component: Modal,
     argTypes: {
         title: { control: 'text' },
diff --git a/resources/js/stories/Pagination.stories.ts b/resources/js/stories/Pagination.stories.ts
index 16df2fb1790..da60391d25b 100644
--- a/resources/js/stories/Pagination.stories.ts
+++ b/resources/js/stories/Pagination.stories.ts
@@ -3,7 +3,7 @@ import {Pagination} from '@ui';
 import {ref} from 'vue';
 
 const meta = {
-    title: 'Components/Pagination',
+    title: 'Layout/Pagination',
     component: Pagination,
     argTypes: {
         'page-selected': {
diff --git a/resources/js/stories/Panel.stories.ts b/resources/js/stories/Panel.stories.ts
index 276d5d65b57..42e3350f909 100644
--- a/resources/js/stories/Panel.stories.ts
+++ b/resources/js/stories/Panel.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {Button, Card, Description, Heading, Panel, PanelFooter, PanelHeader} from '@ui';
 
 const meta = {
-    title: 'Components/Panel',
+    title: 'Layout/Panel',
     component: Panel,
     subcomponents: {
         PanelHeader,
diff --git a/resources/js/stories/Popover.stories.ts b/resources/js/stories/Popover.stories.ts
index be312ae5e0c..a90626d552b 100644
--- a/resources/js/stories/Popover.stories.ts
+++ b/resources/js/stories/Popover.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {Button, Heading, Popover, Textarea} from '@ui';
 
 const meta = {
-    title: 'Components/Popover',
+    title: 'Overlays/Popover',
     component: Popover,
     argTypes: {
         align: {
diff --git a/resources/js/stories/Radio.stories.ts b/resources/js/stories/Radio.stories.ts
index f7e4d8c59b9..39f1d9bb429 100644
--- a/resources/js/stories/Radio.stories.ts
+++ b/resources/js/stories/Radio.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {Radio, RadioGroup} from '@ui';
 
 const meta = {
-    title: 'Components/Radio',
+    title: 'Forms/Radio',
     component: Radio,
     subcomponents: { RadioGroup },
     argTypes: {
diff --git a/resources/js/stories/Select.stories.ts b/resources/js/stories/Select.stories.ts
index 8ce0cebcaca..ff7ab911cb7 100644
--- a/resources/js/stories/Select.stories.ts
+++ b/resources/js/stories/Select.stories.ts
@@ -3,7 +3,7 @@ import {Select} from '@ui';
 import {icons} from "@/stories/icons";
 
 const meta = {
-    title: 'Components/Select',
+    title: 'Forms/Select',
     component: Select,
     argTypes: {
         clearable: { control: 'boolean' },
diff --git a/resources/js/stories/Separator.stories.ts b/resources/js/stories/Separator.stories.ts
index f0cc6190364..8a52a9288b8 100644
--- a/resources/js/stories/Separator.stories.ts
+++ b/resources/js/stories/Separator.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {Separator} from '@ui';
 
 const meta = {
-    title: 'Components/Separator',
+    title: 'Layout/Separator',
     component: Separator,
     argTypes: {
         variant: {
diff --git a/resources/js/stories/Slider.stories.ts b/resources/js/stories/Slider.stories.ts
index d02dc037be4..df70f0fa369 100644
--- a/resources/js/stories/Slider.stories.ts
+++ b/resources/js/stories/Slider.stories.ts
@@ -3,7 +3,7 @@ import {ref} from 'vue';
 import {Field, Slider} from '@ui';
 
 const meta = {
-    title: 'Components/Slider',
+    title: 'Forms/Slider',
     component: Slider,
     argTypes: {
         description: {
diff --git a/resources/js/stories/Splitter.stories.ts b/resources/js/stories/Splitter.stories.ts
index 97fd3e14c3d..f46c83f606e 100644
--- a/resources/js/stories/Splitter.stories.ts
+++ b/resources/js/stories/Splitter.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {SplitterGroup, SplitterPanel, SplitterResizeHandle} from '@ui';
 
 const meta = {
-    title: 'Components/Splitter',
+    title: 'Layout/Splitter',
     component: SplitterGroup,
     subcomponents: { SplitterPanel },
     argTypes: {
diff --git a/resources/js/stories/Switch.stories.ts b/resources/js/stories/Switch.stories.ts
index 15726b0377f..f1885d99837 100644
--- a/resources/js/stories/Switch.stories.ts
+++ b/resources/js/stories/Switch.stories.ts
@@ -3,7 +3,7 @@ import {Switch} from '@ui';
 import {ref} from 'vue';
 
 const meta = {
-    title: 'Components/Switch',
+    title: 'Forms/Switch',
     component: Switch,
     argTypes: {
         size: {
diff --git a/resources/js/stories/Table.stories.ts b/resources/js/stories/Table.stories.ts
index e333395619c..cbef35a1baa 100644
--- a/resources/js/stories/Table.stories.ts
+++ b/resources/js/stories/Table.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {Badge, Table, TableCell, TableColumn, TableColumns, TableRow, TableRows} from '@ui';
 
 const meta = {
-    title: 'Components/Table',
+    title: 'Layout/Table',
     component: Table,
     subcomponents: {
         TableColumns,
diff --git a/resources/js/stories/Tabs.stories.ts b/resources/js/stories/Tabs.stories.ts
index 148e002fc37..7b68239c332 100644
--- a/resources/js/stories/Tabs.stories.ts
+++ b/resources/js/stories/Tabs.stories.ts
@@ -3,7 +3,7 @@ import {TabContent, TabList, Tabs, TabTrigger} from '@ui';
 import {ref} from 'vue';
 
 const meta = {
-    title: 'Components/Tabs',
+    title: 'Layout/Tabs',
     component: Tabs,
     subcomponents: {
         TabList,
diff --git a/resources/js/stories/Textarea.stories.ts b/resources/js/stories/Textarea.stories.ts
index ff9c81c9fee..e42297f0137 100644
--- a/resources/js/stories/Textarea.stories.ts
+++ b/resources/js/stories/Textarea.stories.ts
@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {Textarea} from '@ui';
 
 const meta = {
-    title: 'Components/Textarea',
+    title: 'Forms/Textarea',
     component: Textarea,
     argTypes: {
         resize: {
diff --git a/resources/js/stories/TimePicker.stories.ts b/resources/js/stories/TimePicker.stories.ts
index 1144cd51d7c..fac7b82e2e8 100644
--- a/resources/js/stories/TimePicker.stories.ts
+++ b/resources/js/stories/TimePicker.stories.ts
@@ -3,7 +3,7 @@ import {ref} from 'vue';
 import {TimePicker} from '@ui';
 
 const meta = {
-    title: 'Components/TimePicker',
+    title: 'Forms/TimePicker',
     component: TimePicker,
     argTypes: {
         modelValue: {
diff --git a/resources/js/stories/Toggle.stories.ts b/resources/js/stories/Toggle.stories.ts
index cf6cd282456..b86082fcee1 100644
--- a/resources/js/stories/Toggle.stories.ts
+++ b/resources/js/stories/Toggle.stories.ts
@@ -3,7 +3,7 @@ import {ToggleGroup, ToggleItem} from '@ui';
 import {ref} from 'vue';
 
 const meta = {
-    title: 'Components/Toggle',
+    title: 'Forms/Toggle',
     component: ToggleGroup,
     subcomponents: {
         ToggleItem,

From 38b0c0bf1e720a50b250a8325bc0962cd687e7f4 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 19:41:12 +0000
Subject: [PATCH 22/32] wip

---
 .storybook/manager-head.html           |   5 +++++
 .storybook/preview-head.html           |   5 +++++
 .storybook/public/apple-touch-icon.png | Bin 0 -> 12256 bytes
 .storybook/public/favicon-16x16.png    | Bin 0 -> 633 bytes
 .storybook/public/favicon-32x32.png    | Bin 0 -> 1159 bytes
 .storybook/public/favicon.ico          | Bin 0 -> 15406 bytes
 6 files changed, 10 insertions(+)
 create mode 100644 .storybook/public/apple-touch-icon.png
 create mode 100644 .storybook/public/favicon-16x16.png
 create mode 100644 .storybook/public/favicon-32x32.png
 create mode 100644 .storybook/public/favicon.ico

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index bd449a2b929..4c8add49e4f 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -1,3 +1,8 @@
+<link rel="icon" type="image/x-icon" href="favicon.ico">
+<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
+
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 1d628bd10f2..c9452f63a7b 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,3 +1,8 @@
+<link rel="icon" type="image/x-icon" href="favicon.ico">
+<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
+
 <link rel="preconnect" href="https://use.typekit.net" crossorigin>
 <link rel="preconnect" href="https://p.typekit.net" crossorigin>
 <link rel="stylesheet" href="https://use.typekit.net/wyy0pka.css"/>
diff --git a/.storybook/public/apple-touch-icon.png b/.storybook/public/apple-touch-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..366b78c6f5653d85ad84288f9cd6f6764b19d402
GIT binary patch
literal 12256
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

literal 0
HcmV?d00001

diff --git a/.storybook/public/favicon-16x16.png b/.storybook/public/favicon-16x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..24a535d32cce59362252884f279ed72cd95ba26a
GIT binary patch
literal 633
zcmV-<0*3vGP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0uD(;K~#7FrBh94
z6G0UICP`D4By~$|yJa^xRXk|HrqqH#p`joiQ>52oK=G>8gBQUHUW#JvMUPS9&4bO&
zOSQ#{qM%iX2f=2gYuy}#)UF1k*>Pu*9XHjU`oZpd%)Ix#pLq}1C5W#WhLK^6QLejy
zN*Gc9F(%AxNMc%+waE1d|LMA(%bxAdpFY<ujeCt~i*v>LEu^zi$GvM7T-Uh1zHUv2
z8WBlq@{%T;{BJw_^8*74CNKAa5sb<V_Vz^7ct=<oZ&tTZm|Mlu`3e$h1Y_eG#?K^$
z&Y|%D&2mKsF*Up|7;R>%guBz9q{Ga`5?(KUm-n$fe}f5&p%V!jB=~Cn67ohq1)VA)
zBcF_eXR9Tnv^`4I(2=8bcH(?b3&B`c6Y^C50w#u@W1(ncJ8nHX2qnQDhY8~8J|mhr
zG#rzcgU33N%_Y&%*@h3Vswm!H6AwO;>5?{u+u!i^g|j5)VEFj{@`L5W)W3W<S4LcI
z^BQM(<<vwb+&TX&EeTHQ@4(!8zbH&mLMxu2!5$RulyNn;A|0~cEBL6aiJ35M+cpKk
z>c`qfu)Zs^1ELRamKvQO8SQFG-}zCOx*%YLRNudJFqn?Z3+@nf3gUCA#^>1#5Mci1
z)Rzk>kD%9R$4+oIxA4;&<>e<{!fw6D&*U;`-ZIJQVub#Wz-=xQk8U@YY1jAz-`1wy
T>a%uL00000NkvXXu0mjfINu<8

literal 0
HcmV?d00001

diff --git a/.storybook/public/favicon-32x32.png b/.storybook/public/favicon-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..5aba603484e4094ded1d95c6414b43cc6f80ec5a
GIT binary patch
literal 1159
zcmV;21bF+2P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1RP03K~#7F?N>`^
z6I~QOlf-A6asHOyrg_l$k^hBa6%<qit3q&R5ntegD7a8JzC{$O(2XEeH*OSd(3SXT
zcUDlViz+D63W`;<BTbr7Q74aDwQa8F++?ORab_xF(S;v`+{es4-#y<s=iUMMjh_sm
zbRZas)I&bMoG~VWAV|PK0>HNUCBY-{dCQofF_zb?s|$+Bkb=Kk$z-zGkw7pQY+xW9
zj;^kRne)q`e2N#!#o`a!--=v%7;>3m-d1}*!^1l{=(wsC##nx5DwR5JOQ1R!>e;xv
zTHdfL06!XCNMg^*XVlbEeaS!cagW{z1OhVt$qS-WU@TBe9u>J4B{U^}MZo9t@xf^`
zCc#)?+VsNOUhkk0KR)vVRgv*98nW6Dw8VR%yED!EerY`XJ4=MQiz*=`yOR$@CU7Y*
zfMx7<S_sf!AUwf!fmSqpbjM@JXoI%%^|1)-Z<>yze75st1qm=YyoLu13Gx6ExFD$v
zz`<CTqj5q@b1z(PRUPMxF<^l~RbYY?aFO8ri5HeW?RE~jJ&T08yE5E(NS@54aDpyz
zQ35LgWKdHTb|%n=9?(IC8qd~R=C?Nd1EMs}(fwuuNTEg_;}T$2$c#Z<bWMfh%YIy3
zM^gC!CyzYkvW$?L<Z7HisYqUC=s+~dCFi2}%gP$|Hq|Vn2iyp>#uG;WUi({=r3dca
zdP`Bo=S34qXA*w6-=3M6)&?i$ve`CobufHo#g?hDwcD#)UnIA4!(`9|lIBK>%E@HY
zL$Gk!pRVgvOdW^yU@~00@NS+cin6!dFaH1JL4O_9<k|&(*O%wkRl;%%z8o5&dXO#2
zh=+IIL*L5*SW@p?%AY?PfCKBE!{8?rf<c_01=XR@4(v1?yZAS_$xw>!&J3Kxos$R5
z>3OYZ2?UECE5-VGkKh#^P<ZGaQTq~yc@U<O$>VgKc3e%n8hnBV&4EW1kg}n%*_sjN
zXUyp8$Z_Kcg^W|fC`9Oxcz^K-wF5={%GtMJ^Wr;LiW7zrl7fht;dcneSBcMsh5)Vl
zn5htfM(4N_x{F3A1rNnK9iO9M{SQ53OQ5iODtgAn#qfY2Fhxy#a#|PmVT}(t=&FO#
z@XXEmFdDEDeocUobCG}wO&bPR<Jnm}8_b}9+lG~}t!Jt0iKt89@pudZBc~w__Pa=+
zqdpeqzwd$CTk!BOdRreGk-+O!$OA^8i~&@ewG9HpA3t)pTt4+0#sXORj39&|pQ4Xj
zZ^fbTd%A8%S64uERVC=hGu?>G#BaY96Le#gSsiT}Tsr**ifOLkrSvab0(wOpWo=HT
z^qOw$ZWJ&9HmRm>1KST1me1GW)JS<VT_B2(!5)ga!#`H=8jhRNsGS#BTumg};WvII
Zd;yx@q3z)o5E1|Y002ovPDHLkV1gl!7jOUo

literal 0
HcmV?d00001

diff --git a/.storybook/public/favicon.ico b/.storybook/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..6eefee54763492fed71bdfab6b03554c510d9abd
GIT binary patch
literal 15406
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
J1HVoK{{cy7J|6%8

literal 0
HcmV?d00001


From 3df0f6e62c85a86f6a0bac678f1ecc4284def510 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 20:01:47 +0000
Subject: [PATCH 23/32] no one wants to read my notes for claude

---
 storybook-docs.md  | 73 ----------------------------------------------
 storybook-props.md | 36 -----------------------
 2 files changed, 109 deletions(-)
 delete mode 100644 storybook-docs.md
 delete mode 100644 storybook-props.md

diff --git a/storybook-docs.md b/storybook-docs.md
deleted file mode 100644
index 4f4b9184b6c..00000000000
--- a/storybook-docs.md
+++ /dev/null
@@ -1,73 +0,0 @@
-I'm currently in the process of adding our remaining UI Components to our Storybook documentation site, so third-party developers can easily use our components.
-
-When I ask you to add documentation for a page, please keep these things in mind:
-
-* I want you to add docs for the component, not "canvas" stuff. That means you need to create an `.mdx` file.
-* Code snippets should *mostly* live in variables, to avoid duplicating it between the code snippet and the example.
-    * If you want to display something in the example that's not in the code snippet, then use backticks to add in the snippet with whatever you need to add.
-* Some components live by themselves, some have "child" / "related" components. In this case, the child/related components should be listed as
-  `subcomponents`.
-* I want you to document the props and events for each component.
-* Please document them inside the `argTypes` object, rather than JSDoc in the component's code.
-    * Although, don't do this for subcomponents as they can't be documented the same way.
-    * When the prop has multiple options, it should look like the below code snippet. A
-      `select` control, with a description describing what it does, and `<br><br> Options: ...`, as well as an
-      `options` array
-
-```ts
-      size: {
-    control: 'select',
-        description
-:
-    'Controls the size of the toggle items. <br><br> Options: `xs`, `sm`, `base`',
-        options
-:
-    ['xs', 'sm', 'base'],
-}
-,
-```
-
-    * When dealing with `size` or `variant` props, please use this description format: `Controls the size of the ...` / `Controls the appearance of the ...`
-    * When dealing with `disabled`, `required`, `id` or `read-only` props, don't add a description or anything. It's fairly self-explanatory.
-    * When dealing with a `boolean` prop, please use this description format: "When `true`, ..."
-    * When dealing with an `icon` prop (or similar), the argument should look like the below code snippet. Make sure to import the `icons` file from `./icons`:
-
-```ts
-      icon: {
-    control: 'select',
-        options
-:
-    icons,
-        description
-:
-    'Icon name. [Browse available icons](/?path=/story/components-icon--all-icons)',
-}
-,
-```
-
-    * When the component has events (like `update:modelValue`), you should add them to the `argTypes` object like the below code snippet. The description should be something along the lines of `Event handler called when the ... is changed`
-
-```ts
-      'update:modelValue'
-:
-{
-    description: 'Event handler called when the input is updated.',
-        table
-:
-    {
-        category: 'events',
-            type
-    :
-        {
-            summary: '(value: string) => void'
-        }
-    }
-}
-```
-
-* Please don't list out the props/events (eg. bullet points) outside of the
-  `argTypes` thing. Storybook will do that for us.
-* You also don't need to list all the child/related components
-* Component titles shouldn't include spaces
-
-If you have any doubts about convention, please look at other documented components or ask me. When I follow-up on something, please bear in mind that I might have edited the files so take care before updating them.
\ No newline at end of file
diff --git a/storybook-props.md b/storybook-props.md
deleted file mode 100644
index 4f5d8db4683..00000000000
--- a/storybook-props.md
+++ /dev/null
@@ -1,36 +0,0 @@
-I'm currently working on our Storybook documentation for our UI Components.
-
-Up until now, we've stored the descriptions for props and events inside the `argTypes` object in component stories.
-
-This
-_works_ most of the time, but not for subcomponents. To keep everything consistent, I want to move the prop descriptions into JSDoc comments inside the components themselves.
-
-So, this:
-
-```js
-limit: {
-    control: 'number',
-        description
-:
-    'Specify a character limit',
-}
-,
-```
-
-Would turn into this:
-
-```js
-defineProps({
-    /** Specify a character limit */
-    limit: {type: Number},
-});
-```
-
-You can then remove the prop/arg from the
-`argTypes` array as it'll be picked up automatically from Storybook. However, DO NOT remove them in the following cases:
-
-* `control: 'select'` - the `description` should be removed, but the control and options should remain
-* If it's an event (you can check the component's
-  `defineEmits()` to confirm if smth is an event), then keep it in the array WITH its description.
-
-* If you're unsure of anything, let me know.
\ No newline at end of file

From cc37735d8df401f0df416c2040a1828a92d85dc1 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 20:10:15 +0000
Subject: [PATCH 24/32] update assertion. we added a few missing exports

---
 resources/js/tests/Package.test.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
index 4ad26cf7b84..e072887b787 100644
--- a/resources/js/tests/Package.test.js
+++ b/resources/js/tests/Package.test.js
@@ -123,6 +123,7 @@ it('exports ui', async () => {
         'Combobox',
         'Context',
         'ContextFooter',
+        'ContextHeader',
         'ContextItem',
         'ContextLabel',
         'ContextMenu',
@@ -191,6 +192,10 @@ it('exports ui', async () => {
         'Avatar',
         'CommandPaletteItem',
         'CreateForm',
+        'DataTable',
+        'DataTableCell',
+        'DataTableColumn',
+        'DataTableRow',
         'DocsCallout',
         'Listing',
         'ListingCustomizeColumns',

From 05b26a693a8069e92a20dfd7cab3fc26a8eda099 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 18 Dec 2025 20:16:43 +0000
Subject: [PATCH 25/32] knew i'd miss a spot or two

---
 packages/cms/src/ui.js           | 5 +++++
 resources/js/bootstrap/cms/ui.js | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
index 79cc9f3dab0..ee63ef9391a 100644
--- a/packages/cms/src/ui.js
+++ b/packages/cms/src/ui.js
@@ -17,6 +17,7 @@ export const {
     CommandPaletteItem,
     Context,
     ContextFooter,
+    ContextHeader,
     ContextItem,
     ContextLabel,
     ContextMenu,
@@ -25,6 +26,10 @@ export const {
     DatePicker,
     DateRangePicker,
     Description,
+    DataTable,
+    DataTableCell,
+    DataTableColumn,
+    DataTableRow,
     DocsCallout,
     DragHandle,
     Dropdown,
diff --git a/resources/js/bootstrap/cms/ui.js b/resources/js/bootstrap/cms/ui.js
index a7f761a726a..9f0f790d4b4 100644
--- a/resources/js/bootstrap/cms/ui.js
+++ b/resources/js/bootstrap/cms/ui.js
@@ -17,6 +17,7 @@ export {
     CommandPaletteItem,
     Context,
     ContextFooter,
+    ContextHeader,
     ContextItem,
     ContextLabel,
     ContextMenu,
@@ -25,6 +26,10 @@ export {
     DatePicker,
     DateRangePicker,
     Description,
+    DataTable,
+    DataTableCell,
+    DataTableColumn,
+    DataTableRow,
     DocsCallout,
     DragHandle,
     Dropdown,

From 134712823b028631c525b44d5c4c7e7954b949a1 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Fri, 19 Dec 2025 14:13:20 +0000
Subject: [PATCH 26/32] fix icon in example

---
 resources/js/stories/Context.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/stories/Context.stories.ts b/resources/js/stories/Context.stories.ts
index a0c594d7089..7118545931f 100644
--- a/resources/js/stories/Context.stories.ts
+++ b/resources/js/stories/Context.stories.ts
@@ -103,7 +103,7 @@ const withHeaderFooterCode = `
     <template #trigger>
         <Button text="File Options" />
     </template>
-    <ContextHeader text="document.pdf" icon="file" />
+    <ContextHeader text="document.pdf" icon="pdf" />
     <ContextMenu>
         <ContextItem text="Open" icon="arrow-right" />
         <ContextItem text="Rename" icon="pencil" />

From 8b431ccfbec58b005abb172ffbc7e48c8f8d94af Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Fri, 19 Dec 2025 14:52:23 +0000
Subject: [PATCH 27/32] wip

---
 .../js/components/ui/Calendar/Calendar.vue    |   5 +
 resources/js/components/ui/Card/Card.vue      |   2 +
 .../js/components/ui/Context/Context.vue      |   3 +
 resources/js/components/ui/CreateForm.vue     |   9 ++
 .../js/components/ui/DataTable/DataTable.vue  |   1 +
 .../components/ui/DatePicker/DatePicker.vue   |   8 ++
 .../ui/DateRangePicker/DateRangePicker.vue    |   7 ++
 .../js/components/ui/EmptyState/Menu.vue      |   2 +
 resources/js/components/ui/Field.vue          |   9 ++
 resources/js/components/ui/Header.vue         |   2 +
 resources/js/components/ui/HoverCard.vue      |   7 ++
 .../js/components/ui/Listing/Listing.vue      |  26 +++++
 resources/js/components/ui/Modal/Modal.vue    |   5 +
 resources/js/components/ui/Panel/Panel.vue    |   2 +
 resources/js/components/ui/Popover.vue        |   6 ++
 resources/js/components/ui/Select/Select.vue  |   7 ++
 resources/js/components/ui/Slider/Slider.vue  |   9 ++
 .../components/ui/TimePicker/TimePicker.vue   |   4 +
 resources/js/components/ui/Toggle/Group.vue   |   4 +
 resources/js/stories/Calendar.stories.ts      |  21 ----
 resources/js/stories/Card.stories.ts          |   5 -
 resources/js/stories/Context.stories.ts       |   6 --
 resources/js/stories/CreateForm.stories.ts    |  33 ------
 resources/js/stories/DataTable.stories.ts     |   1 -
 resources/js/stories/DatePicker.stories.ts    |  32 ------
 .../js/stories/DateRangePicker.stories.ts     |  28 -----
 resources/js/stories/EmptyState.stories.ts    |  11 +-
 resources/js/stories/Field.stories.ts         |  37 -------
 resources/js/stories/Header.stories.ts        |   8 --
 resources/js/stories/HoverCard.stories.ts     |  22 ----
 resources/js/stories/Listing.stories.ts       | 101 ------------------
 resources/js/stories/Modal.stories.ts         |  19 +++-
 resources/js/stories/Panel.stories.ts         |  11 +-
 resources/js/stories/Popover.stories.ts       |  18 ----
 resources/js/stories/Select.stories.ts        |  22 ----
 resources/js/stories/Slider.stories.ts        |  30 ------
 resources/js/stories/TimePicker.stories.ts    |  14 ---
 resources/js/stories/Toggle.stories.ts        |  14 ---
 38 files changed, 134 insertions(+), 417 deletions(-)

diff --git a/resources/js/components/ui/Calendar/Calendar.vue b/resources/js/components/ui/Calendar/Calendar.vue
index c6b2614189a..72a1efe4f8e 100644
--- a/resources/js/components/ui/Calendar/Calendar.vue
+++ b/resources/js/components/ui/Calendar/Calendar.vue
@@ -20,10 +20,15 @@ import Icon from '../Icon/Icon.vue';
 defineOptions({ name: 'Calendar' });
 
 const props = defineProps({
+    /** The controlled value of the calendar. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`) */
     modelValue: { type: [String, Object], default: null },
+    /** The earliest date that can be selected. Dates before this will be disabled. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`) */
     min: { type: [String, Object], default: null },
+    /** The latest date that can be selected. Dates after this will be disabled. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`) */
     max: { type: [String, Object], default: null },
+    /** If necessary, you can you swap out any of the internal Calendar components by passing an object to this prop. */
     components: { type: Object, default: () => ({}) },
+    /** The number of months to display at once. */
     numberOfMonths: { type: Number, default: 1 },
     inline: { type: Boolean, default: false },
 });
diff --git a/resources/js/components/ui/Card/Card.vue b/resources/js/components/ui/Card/Card.vue
index b31f3d21f5f..88bc2039553 100644
--- a/resources/js/components/ui/Card/Card.vue
+++ b/resources/js/components/ui/Card/Card.vue
@@ -2,7 +2,9 @@
 import { cva } from 'cva';
 
 const props = defineProps({
+    /** When `true`, the internal padding of the card is removed. */
     inset: { type: Boolean, default: false },
+    /** Controls the appearance of the card. <br><br> Options: `default`, `flat` */
     variant: { type: String, default: 'default' },
 });
 
diff --git a/resources/js/components/ui/Context/Context.vue b/resources/js/components/ui/Context/Context.vue
index b64096b13e3..a9e756f694b 100644
--- a/resources/js/components/ui/Context/Context.vue
+++ b/resources/js/components/ui/Context/Context.vue
@@ -11,8 +11,11 @@ defineOptions({
 const attrs = useAttrs();
 
 const props = defineProps({
+    /** The preferred alignment against the trigger. May change when collisions occur. <br><br> Options: `start`, `center`, `end` */
     align: { type: String, default: 'start' },
+    /** The distance in pixels from the trigger. */
     offset: { type: Number, default: 5 },
+    /** The preferred side of the trigger to render against when open. <br><br> Options: `top`, `bottom`, `left`, `right` */
     side: { type: String, default: 'bottom' },
 });
 
diff --git a/resources/js/components/ui/CreateForm.vue b/resources/js/components/ui/CreateForm.vue
index e310eca0a0a..c71f7c157e3 100644
--- a/resources/js/components/ui/CreateForm.vue
+++ b/resources/js/components/ui/CreateForm.vue
@@ -3,14 +3,23 @@ import { ref, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance }
 import { router } from '@inertiajs/vue3';
 
 const props = defineProps({
+    /** The title displayed at the top of the form. */
     title: { type: String, required: true },
+    /** Optional subtitle displayed below the title. */
     subtitle: { type: String, default: null },
+    /** Icon name to display next to the title. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
+    /** Text for the submit button. Defaults to the title if not provided. */
     submitText: { type: String, default: null },
+    /** When `true`, the submit button shows a loading state. */
     loading: { type: Boolean, default: false },
+    /** The URL for form data to be submitted to. */
     route: { type: String, required: true },
+    /** Instructions for the title field. */
     titleInstructions: { type: String, default: null },
+    /** Instructions for the handle field. */
     handleInstructions: { type: String, default: null },
+    /** When `true`, the handle field is not displayed. */
     withoutHandle: { type: Boolean, default: false },
 });
 
diff --git a/resources/js/components/ui/DataTable/DataTable.vue b/resources/js/components/ui/DataTable/DataTable.vue
index c8aa55f1c91..6d88f21dd75 100644
--- a/resources/js/components/ui/DataTable/DataTable.vue
+++ b/resources/js/components/ui/DataTable/DataTable.vue
@@ -6,6 +6,7 @@ import DataTableRows from './Rows.vue';
 import { Panel } from '@ui';
 
 const props = defineProps({
+    /** Controls the size and spacing of the table. <br><br> Options: `normal`, `compact` */
     variant: { type: String, default: 'normal' },
 });
 
diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index 1e69ea315e2..79c13d917d7 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -28,14 +28,22 @@ import Icon from '../Icon/Icon.vue';
 const emit = defineEmits(['update:modelValue']);
 
 const props = defineProps({
+    /** Badge text to display. */
     badge: { type: String, default: null },
     required: { type: Boolean, default: false },
+    /** The controlled date value. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`) */
     modelValue: { type: [Object, String], default: null },
+    /** The minimum selectable date. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`) */
     min: { type: [String, Object], default: null },
+    /** The maximum selectable date. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`) */
     max: { type: [String, Object], default: null },
+    /** The granularity of the date picker. <br><br> Options: `day`, `hour`, `minute`, `second` */
     granularity: { type: String, default: null },
+    /** When `true`, the calendar is always visible instead of appearing in a popover. */
     inline: { type: Boolean, default: false },
+    /** The number of months to display in the calendar. */
     numberOfMonths: { type: Number, default: 1 },
+    /** When `true`, a clear button is displayed to reset the date. */
     clearable: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
     readOnly: { type: Boolean, default: false },
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index c3f2f077f08..8d46ff6d983 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -28,13 +28,20 @@ import { parseAbsoluteToLocal } from '@internationalized/date';
 const emit = defineEmits(['update:modelValue']);
 
 const props = defineProps({
+    /** Badge text to display. */
     badge: { type: String, default: null },
     required: { type: Boolean, default: false },
+    /** The controlled date range value with `start` and `end` properties. <br><br> Each should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`) */
     modelValue: { type: [Object, String], default: null },
+    /** The minimum selectable date. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`) */
     min: { type: [String, Object], default: null },
+    /** The maximum selectable date. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`) */
     max: { type: [String, Object], default: null },
+    /** The granularity of the date range picker. <br><br> Options: `day`, `hour`, `minute`, `second` */
     granularity: { type: String, default: null },
+    /** When `true`, the calendar is always visible instead of appearing in a popover. */
     inline: { type: Boolean, default: false },
+    /** When `true`, a clear button is displayed to reset the date range. */
     clearable: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
     readOnly: { type: Boolean, default: false },
diff --git a/resources/js/components/ui/EmptyState/Menu.vue b/resources/js/components/ui/EmptyState/Menu.vue
index a29b6ba9f57..0364d41066a 100644
--- a/resources/js/components/ui/EmptyState/Menu.vue
+++ b/resources/js/components/ui/EmptyState/Menu.vue
@@ -2,10 +2,12 @@
 import CardPanel from '../Card/Panel.vue';
 
 const props = defineProps({
+    /** Heading text for the empty state menu. */
     heading: {
         type: String,
         required: true,
     },
+    /** Optional description text below the heading. */
     description: {
         type: String,
         default: null,
diff --git a/resources/js/components/ui/Field.vue b/resources/js/components/ui/Field.vue
index ab531ae0061..1ed18ec7a74 100644
--- a/resources/js/components/ui/Field.vue
+++ b/resources/js/components/ui/Field.vue
@@ -11,18 +11,27 @@ defineOptions({
 });
 
 const props = defineProps({
+    /** When `true`, styles the field as a configuration field with a two-column grid layout. */
     asConfig: { type: Boolean, default: false },
+    /** Badge text to display next to the label. */
     badge: { type: String, default: '' },
     disabled: { type: Boolean, default: false },
+    /** Error message to display below the field. */
     error: { type: String },
+    /** Object or array of error messages to display below the field. */
     errors: { type: Object },
+    /** When `true`, forces the field to use full width even when `asConfig` is enabled. */
     fullWidthSetting: { type: Boolean, default: false },
     id: { type: String },
+    /** Instructions text to display above or below the label. Supports Markdown. */
     instructions: { type: String, default: '' },
+    /** When `true`, displays instructions below the control instead of below the label. */
     instructionsBelow: { type: Boolean, default: false },
+    /** Label text for the field. */
     label: { type: String },
     readOnly: { type: Boolean, default: false },
     required: { type: Boolean, default: false },
+    /** Controls the layout of the field. <br><br> Options: `block`, `inline` */
     variant: { type: String, default: 'block' },
 });
 
diff --git a/resources/js/components/ui/Header.vue b/resources/js/components/ui/Header.vue
index 20d09ece691..fe0d19aa907 100644
--- a/resources/js/components/ui/Header.vue
+++ b/resources/js/components/ui/Header.vue
@@ -2,7 +2,9 @@
 import Icon from './Icon/Icon.vue';
 
 const props = defineProps({
+    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
+    /** The title text displayed in the header. */
     title: { type: String, default: null },
 });
 </script>
diff --git a/resources/js/components/ui/HoverCard.vue b/resources/js/components/ui/HoverCard.vue
index 082fbc6ac3b..cdd3837e656 100644
--- a/resources/js/components/ui/HoverCard.vue
+++ b/resources/js/components/ui/HoverCard.vue
@@ -10,12 +10,19 @@ defineOptions({
 const emit = defineEmits(['update:open']);
 
 const props = defineProps({
+    /** The preferred alignment against the trigger. May change when collisions occur. <br><br> Options: `start`, `center`, `end` */
     align: { type: String, default: 'center' },
+    /** When `true`, an arrow is displayed near the trigger. */
     arrow: { type: Boolean, default: true },
+    /** The delay in milliseconds before the hover card opens. */
     delay: { type: Number, default: 200 },
+    /** When `true`, the internal padding of the hover card is removed. */
     inset: { type: Boolean, default: false },
+    /** The distance in pixels from the trigger. */
     offset: { type: Number, default: 25 },
+    /** The preferred side of the trigger to render against when open. <br><br> Options: `top`, `bottom`, `left`, `right` */
     side: { type: String, default: 'left' },
+    /** The controlled open state of the hover card. */
     open: { type: Boolean, default: false },
 });
 
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 172aa043a0c..b73ac1d553c 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -36,100 +36,126 @@ const emit = defineEmits([
 ]);
 
 const props = defineProps({
+    /** The URL from which to retrieve results. Either use this or `items`. */
     url: {
         type: String,
     },
+    /** Array of items to display in the listing. When provided, sorting and filtering is done client-side. Either use this or `url`. */
     items: {
         type: Array,
     },
+    /** When `true`, allows users to save and load column/filter presets. */
     allowPresets: {
         type: Boolean,
         default: true,
     },
+    /** When `true`, bulk actions are available when items are selected. */
     allowBulkActions: {
         type: Boolean,
         default: true,
     },
+    /** The URL from which to retrieve actions. */
     actionUrl: {
         type: String,
     },
+    /** Extra data to pass to the server when using actions. */
     actionContext: {
         type: Object,
         default: () => ({}),
     },
+    /** When `true`, enables the action dropdown while reordering is enabled. */
     allowActionsWhileReordering: {
         type: Boolean,
         default: false,
     },
+    /** When `true`, adds drag handles to the rows. */
     reorderable: {
         type: Boolean,
         default: false,
     },
+    /** Any preferences (preferred columns, etc) will be saved nested under this. */
     preferencesPrefix: {
         type: String,
     },
+    /** The columns to display. Can be array of strings or column definitions. */
     columns: {
         type: Array,
     },
+    /** When `true`, users can show/hide columns. */
     allowCustomizingColumns: {
         type: Boolean,
         default: true,
     },
+    /** Defines the sort column. */
     sortColumn: {
         type: String,
         default: '',
     },
+    /** Defines the sort direction. Defaults to `asc` for most fields, `desc` for dates. <br><br> Options: `asc`, `desc` */
     sortDirection: {
         type: String,
         default: 'asc',
     },
+    /** When `true`, columns can be sorted by clicking on headers. */
     sortable: {
         type: Boolean,
         default: true,
     },
+    /** Array of checked item IDs. */
     selections: {
         type: Array,
     },
+    /** Maximum number of items that can be selected. */
     maxSelections: {
         type: Number,
         default: Infinity,
     },
+    /** When `true`, adds the parameters to the current URL. */
     pushQuery: {
         type: Boolean,
         default: false,
     },
+    /** Extra data to send to the AJAX URL. */
     additionalParameters: {
         type: Object,
         default: () => ({}),
     },
+    /** When `true`, displays a search input for filtering items. */
     allowSearch: {
         type: Boolean,
         default: true,
     },
+    /** The search query value. */
     searchQuery: {
         type: String,
         default: null,
     },
+    /** Array of filter definitions. You can get this by doing `Scope::filters($name, $context)` */
     filters: {
         type: Array,
         default: () => [],
     },
+    /** A function that returns array of filter values to be activated when reordering is enabled. */
     filtersForReordering: {
         type: Function,
         default: null,
     },
+    /** Number of items to display per page. */
     perPage: {
         type: Number,
         default: 15,
     },
+    /** When `true`, shows the totals in the paginator. e.g. "1-5 of 10" */
     showPaginationTotals: {
         type: Boolean,
         default: true,
     },
+    /** When `true`, shows the page links. e.g. 1,2,3,4. With this disabled you'll just get the prev/next arrows. */
     showPaginationPageLinks: {
         type: Boolean,
         default: true,
     },
+    /** When `true`, shows the per page dropdown. */
     showPaginationPerPageSelector: {
         type: Boolean,
         default: true,
diff --git a/resources/js/components/ui/Modal/Modal.vue b/resources/js/components/ui/Modal/Modal.vue
index a41225154e8..86fe445fe6c 100644
--- a/resources/js/components/ui/Modal/Modal.vue
+++ b/resources/js/components/ui/Modal/Modal.vue
@@ -16,10 +16,15 @@ const slots = useSlots();
 const emit = defineEmits(['update:open', 'dismissed']);
 
 const props = defineProps({
+	/** When `true`, the modal's backdrop will be blurred */
     blur: { type: Boolean, default: true },
+	/** Title displayed at the top of the modal */
     title: { type: String, default: '' },
+	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: [String, null], default: null },
+	/** The controlled open state of the modal. */
     open: { type: Boolean, default: false },
+	/** When `true`, clicking outside the modal will dismiss it. */
     dismissible: { type: Boolean, default: true },
 });
 
diff --git a/resources/js/components/ui/Panel/Panel.vue b/resources/js/components/ui/Panel/Panel.vue
index bce1ecff954..df0ccda484a 100644
--- a/resources/js/components/ui/Panel/Panel.vue
+++ b/resources/js/components/ui/Panel/Panel.vue
@@ -4,7 +4,9 @@ import Heading from '../Heading.vue';
 import Subheading from '../Subheading.vue';
 
 const props = defineProps({
+    /** Heading text for the panel */
     heading: { type: String, default: null },
+    /** Subheading text below the heading */
     subheading: { type: String, default: null },
 });
 </script>
diff --git a/resources/js/components/ui/Popover.vue b/resources/js/components/ui/Popover.vue
index a42acc465f3..6ca04cc9aa1 100644
--- a/resources/js/components/ui/Popover.vue
+++ b/resources/js/components/ui/Popover.vue
@@ -10,11 +10,17 @@ defineOptions({
 const emit = defineEmits(['update:open']);
 
 const props = defineProps({
+    /** The preferred alignment against the trigger. May change when collisions occur. Options: `start`, `center`, `end` */
     align: { type: String, default: 'center' },
+    /** When `true`, an arrow is displayed near the trigger. */
     arrow: { type: Boolean, default: false },
+    /** When `true`, the internal padding of the popover is removed. */
     inset: { type: Boolean, default: false },
+    /** The distance in pixels from the trigger */
     offset: { type: Number, default: 5 },
+    /** The preferred side of the trigger to render against when open. Options: `top`, `bottom`, `left`, `right` */
     side: { type: String, default: 'bottom' },
+    /** The controlled open state of the popover. */
     open: { type: Boolean, default: false },
 });
 
diff --git a/resources/js/components/ui/Select/Select.vue b/resources/js/components/ui/Select/Select.vue
index b54468f8f78..e5c5b2c5875 100644
--- a/resources/js/components/ui/Select/Select.vue
+++ b/resources/js/components/ui/Select/Select.vue
@@ -7,14 +7,21 @@ const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
     clearable: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
+    /** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: String, default: null },
+    /** The controlled value of the select. */
     modelValue: { type: [Object, String, Number], default: null },
+    /** Key of the option's label in the option's object. */
     optionLabel: { type: String, default: 'label' },
+    /** Array of option objects */
     options: { type: Array, default: null },
+    /** Key of the option's value in the option's object. */
     optionValue: { type: String, default: 'value' },
     placeholder: { type: String, default: () => __('Select...') },
     readOnly: { type: Boolean, default: false },
+    /** Controls the size of the select. <br><br> Options: `xs`, `sm`, `base`, `lg`, `xl` */
     size: { type: String, default: 'base' },
+    /** Controls the appearance of the select. <br><br> Options: `default`, `filled`, `ghost`, `subtle` */
     variant: { type: String, default: 'default' },
 });
 
diff --git a/resources/js/components/ui/Slider/Slider.vue b/resources/js/components/ui/Slider/Slider.vue
index ae11b1c622d..e86336c36f7 100644
--- a/resources/js/components/ui/Slider/Slider.vue
+++ b/resources/js/components/ui/Slider/Slider.vue
@@ -4,14 +4,23 @@ import { cva } from 'cva';
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui';
 
 const props = defineProps({
+    /** Description text for the slider. */
     description: { type: String, default: null },
+    /** ID attribute for the slider. */
     id: { type: String, default: () => useId() },
+    /** Label text for the slider. */
     label: { type: String, default: null },
+    /** The controlled value of the slider. */
     modelValue: { type: Number, default: 0 },
+    /** The minimum value of the slider. */
     min: { type: Number, default: 0 },
+    /** The maximum value of the slider. */
     max: { type: Number, default: 100 },
+    /** The step increment for the slider. */
     step: { type: Number, default: 1 },
+    /** Controls the size of the slider. <br><br> Options: `sm`, `base` */
     size: { type: String, default: 'base' },
+    /** Controls the appearance of the slider. <br><br> Options: `default` */
     variant: { type: String, default: 'default' },
 });
 
diff --git a/resources/js/components/ui/TimePicker/TimePicker.vue b/resources/js/components/ui/TimePicker/TimePicker.vue
index ad773cab7ba..190097c6757 100644
--- a/resources/js/components/ui/TimePicker/TimePicker.vue
+++ b/resources/js/components/ui/TimePicker/TimePicker.vue
@@ -5,10 +5,14 @@ import Button from '../Button/Button.vue';
 const emit = defineEmits(['update:modelValue']);
 
 const props = defineProps({
+    /** Badge text to display. */
     badge: { type: String, default: null },
     required: { type: Boolean, default: false },
+    /** The controlled time value. */
     modelValue: { type: Object, default: null },
+    /** The granularity of the time picker. <br><br> Options: `hour`, `minute`, `second` */
     granularity: { type: String, default: null },
+    /** When `true`, clear and "set to now" buttons are displayed. */
     clearable: { type: Boolean, default: true },
 });
 
diff --git a/resources/js/components/ui/Toggle/Group.vue b/resources/js/components/ui/Toggle/Group.vue
index 2b95978d0df..2e217ced7e3 100644
--- a/resources/js/components/ui/Toggle/Group.vue
+++ b/resources/js/components/ui/Toggle/Group.vue
@@ -5,9 +5,13 @@ import { cva } from 'cva';
 
 const props = defineProps({
     required: { type: Boolean, default: false },
+    /** The controlled value of the toggle group. */
     modelValue: { type: [String, Array], default: null },
+    /** Controls the size of the toggle items. <br><br> Options: `xs`, `sm`, `base` */
     size: { type: String, default: 'base' },
+    /** Controls the appearance of the toggle items. <br><br> Options: `default`, `primary`, `filled`, `ghost` */
     variant: { type: String, default: 'default' },
+    /** When `true`, multiple items can be selected */
     multiple: { type: Boolean, default: false },
 });
 
diff --git a/resources/js/stories/Calendar.stories.ts b/resources/js/stories/Calendar.stories.ts
index 19eb936bb5f..ed1e35a20f8 100644
--- a/resources/js/stories/Calendar.stories.ts
+++ b/resources/js/stories/Calendar.stories.ts
@@ -5,27 +5,6 @@ const meta = {
     title: 'Forms/Calendar',
     component: Calendar,
     argTypes: {
-        modelValue: {
-            control: 'text',
-            description: 'The controlled value of the calendar. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
-        },
-        min: {
-            control: 'text',
-            description: 'The earliest date that can be selected. Dates before this will be disabled. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
-        },
-        max: {
-            control: 'text',
-            description: 'The latest date that can be selected. Dates after this will be disabled. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
-        },
-        components: {
-            control: 'object',
-            description: "If necessary, you can you swap out any of the internal Calendar components by passing an object to this prop.",
-        },
-        numberOfMonths: {
-            control: 'number',
-            description: 'The number of months to display at once.',
-        },
-        inline: { control: 'boolean' },
         'update:modelValue': {
             description: 'Event handler called when a date is selected. Returns the date as an ISO 8601 date and time string.',
             table: {
diff --git a/resources/js/stories/Card.stories.ts b/resources/js/stories/Card.stories.ts
index 59ea7e136f1..4d0d2609c1e 100644
--- a/resources/js/stories/Card.stories.ts
+++ b/resources/js/stories/Card.stories.ts
@@ -5,13 +5,8 @@ const meta = {
     title: 'Layout/Card',
     component: Card,
     argTypes: {
-        inset: {
-            control: 'boolean',
-            description: 'When `true`, the internal padding of the card is removed.',
-        },
         variant: {
             control: 'select',
-            description: 'Controls the appearance of the card. <br><br> Options: `default`, `flat`',
             options: ['default', 'flat'],
         },
     },
diff --git a/resources/js/stories/Context.stories.ts b/resources/js/stories/Context.stories.ts
index 7118545931f..dd74efbeb92 100644
--- a/resources/js/stories/Context.stories.ts
+++ b/resources/js/stories/Context.stories.ts
@@ -25,16 +25,10 @@ const meta = {
         align: {
             control: 'select',
             options: ['start', 'center', 'end'],
-            description: 'The preferred alignment against the trigger. May change when collisions occur. <br><br> Options: `start`, `center`, `end`',
-        },
-        offset: {
-            control: 'number',
-            description: 'The distance in pixels from the trigger.',
         },
         side: {
             control: 'select',
             options: ['top', 'bottom', 'left', 'right'],
-            description: 'The preferred side of the trigger to render against when open. <br><br> Options: `top`, `bottom`, `left`, `right`',
         },
     },
 } satisfies Meta<typeof Context>;
diff --git a/resources/js/stories/CreateForm.stories.ts b/resources/js/stories/CreateForm.stories.ts
index 0b6153cecdd..b1460621986 100644
--- a/resources/js/stories/CreateForm.stories.ts
+++ b/resources/js/stories/CreateForm.stories.ts
@@ -6,42 +6,9 @@ const meta = {
     title: 'Components/CreateForm',
     component: CreateForm,
     argTypes: {
-        title: {
-            control: 'text',
-            description: 'The title displayed at the top of the form.',
-        },
-        subtitle: {
-            control: 'text',
-            description: 'Optional subtitle displayed below the title.',
-        },
         icon: {
             control: 'select',
             options: icons,
-            description: 'Icon name to display next to the title. [Browse available icons](/?path=/story/components-icon--all-icons)',
-        },
-        submitText: {
-            control: 'text',
-            description: 'Text for the submit button. Defaults to the title if not provided.',
-        },
-        loading: {
-            control: 'boolean',
-            description: 'When `true`, the submit button shows a loading state.',
-        },
-        route: {
-            control: 'text',
-            description: 'The URL for form data to be submitted to.',
-        },
-        titleInstructions: {
-            control: 'text',
-            description: 'Instructions for the title field.',
-        },
-        handleInstructions: {
-            control: 'text',
-            description: 'Instructions for the handle field.',
-        },
-        withoutHandle: {
-            control: 'boolean',
-            description: 'When `true`, the handle field is not displayed.',
         },
     },
 } satisfies Meta<typeof CreateForm>;
diff --git a/resources/js/stories/DataTable.stories.ts b/resources/js/stories/DataTable.stories.ts
index 4bcd8a38a20..6104b0bffec 100644
--- a/resources/js/stories/DataTable.stories.ts
+++ b/resources/js/stories/DataTable.stories.ts
@@ -12,7 +12,6 @@ const meta = {
     argTypes: {
         variant: {
             control: 'select',
-            description: 'Controls the size and spacing of the table. <br><br> Options: `normal`, `compact`',
             options: ['normal', 'compact'],
         },
     },
diff --git a/resources/js/stories/DatePicker.stories.ts b/resources/js/stories/DatePicker.stories.ts
index 4db4bb1c552..3a48c4073a7 100644
--- a/resources/js/stories/DatePicker.stories.ts
+++ b/resources/js/stories/DatePicker.stories.ts
@@ -7,42 +7,10 @@ const meta = {
     title: 'Forms/DatePicker',
     component: DatePicker,
     argTypes: {
-        modelValue: {
-            control: 'object',
-            description: 'The controlled date value. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
-        },
-        badge: {
-            control: 'text',
-            description: 'Badge text to display.',
-        },
-        required: { control: 'boolean' },
-        min: {
-            control: 'object',
-            description: 'The minimum selectable date. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
-        },
-        max: {
-            control: 'object',
-            description: 'The maximum selectable date. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
-        },
         granularity: {
             control: 'select',
-            description: 'The granularity of the date picker. <br><br> Options: `day`, `hour`, `minute`, `second`',
             options: ['day', 'hour', 'minute', 'second'],
         },
-        inline: {
-            control: 'boolean',
-            description: 'When `true`, the calendar is always visible instead of appearing in a popover.',
-        },
-        numberOfMonths: {
-            control: 'number',
-            description: 'The number of months to display in the calendar.',
-        },
-        clearable: {
-            control: 'boolean',
-            description: 'When `true`, a clear button is displayed to reset the date.',
-        },
-        disabled: { control: 'boolean' },
-        readOnly: { control: 'boolean' },
         'update:modelValue': {
             description: 'Event handler called when the date value changes. Returns the date as an ISO 8601 date and time string.',
             table: {
diff --git a/resources/js/stories/DateRangePicker.stories.ts b/resources/js/stories/DateRangePicker.stories.ts
index d60d024739c..cf0179a4b34 100644
--- a/resources/js/stories/DateRangePicker.stories.ts
+++ b/resources/js/stories/DateRangePicker.stories.ts
@@ -7,38 +7,10 @@ const meta = {
     title: 'Forms/DateRangePicker',
     component: DateRangePicker,
     argTypes: {
-        modelValue: {
-            control: 'object',
-            description: 'The controlled date range value with `start` and `end` properties. <br><br> Each should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
-        },
-        badge: {
-            control: 'text',
-            description: 'Badge text to display.',
-        },
-        required: { control: 'boolean' },
-        min: {
-            control: 'object',
-            description: 'The minimum selectable date. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
-        },
-        max: {
-            control: 'object',
-            description: 'The maximum selectable date. <br><br> Should be an ISO 8601 date and time string with a UTC offset (eg. `2021-11-07T07:45:00Z` or `2021-11-07T07:45:00-07:00`)',
-        },
         granularity: {
             control: 'select',
-            description: 'The granularity of the date range picker. <br><br> Options: `day`, `hour`, `minute`, `second`',
             options: ['day', 'hour', 'minute', 'second'],
         },
-        inline: {
-            control: 'boolean',
-            description: 'When `true`, the calendar is always visible instead of appearing in a popover.',
-        },
-        clearable: {
-            control: 'boolean',
-            description: 'When `true`, a clear button is displayed to reset the date range.',
-        },
-        disabled: { control: 'boolean' },
-        readOnly: { control: 'boolean' },
         'update:modelValue': {
             description: 'Event handler called when the date range value changes. <br><br> Returns an object with `start` and `end` properties, each as an ISO 8601 date and time string.',
             table: {
diff --git a/resources/js/stories/EmptyState.stories.ts b/resources/js/stories/EmptyState.stories.ts
index 4182f257c6a..c01b0ee6095 100644
--- a/resources/js/stories/EmptyState.stories.ts
+++ b/resources/js/stories/EmptyState.stories.ts
@@ -7,16 +7,7 @@ const meta = {
     subcomponents: {
         EmptyStateItem,
     },
-    argTypes: {
-        heading: {
-            control: 'text',
-            description: 'Heading text for the empty state menu.',
-        },
-        description: {
-            control: 'text',
-            description: 'Optional description text below the heading.',
-        },
-    },
+    argTypes: {},
 } satisfies Meta<typeof EmptyStateMenu>;
 
 export default meta;
diff --git a/resources/js/stories/Field.stories.ts b/resources/js/stories/Field.stories.ts
index dd344513e51..a4c48ce7a91 100644
--- a/resources/js/stories/Field.stories.ts
+++ b/resources/js/stories/Field.stories.ts
@@ -6,45 +6,8 @@ const meta = {
     title: 'Forms/Field',
     component: Field,
     argTypes: {
-        asConfig: {
-            control: 'boolean',
-            description: 'When `true`, styles the field as a configuration field with a two-column grid layout.',
-        },
-        badge: {
-            control: 'text',
-            description: 'Badge text to display next to the label.',
-        },
-        disabled: { control: 'boolean' },
-        error: {
-            control: 'text',
-            description: 'Error message to display below the field.',
-        },
-        errors: {
-            control: 'object',
-            description: 'Object or array of error messages to display below the field.',
-        },
-        fullWidthSetting: {
-            control: 'boolean',
-            description: 'When `true`, forces the field to use full width even when `asConfig` is enabled.',
-        },
-        id: { control: 'text' },
-        instructions: {
-            control: 'text',
-            description: 'Instructions text to display above or below the label. Supports Markdown.',
-        },
-        instructionsBelow: {
-            control: 'boolean',
-            description: 'When `true`, displays instructions below the control instead of below the label.',
-        },
-        label: {
-            control: 'text',
-            description: 'Label text for the field.',
-        },
-        readOnly: { control: 'boolean' },
-        required: { control: 'boolean' },
         variant: {
             control: 'select',
-            description: 'Controls the layout of the field. <br><br> Options: `block`, `inline`',
             options: ['block', 'inline'],
         },
     },
diff --git a/resources/js/stories/Header.stories.ts b/resources/js/stories/Header.stories.ts
index aba0f64a043..6688d6ee0bf 100644
--- a/resources/js/stories/Header.stories.ts
+++ b/resources/js/stories/Header.stories.ts
@@ -9,14 +9,6 @@ const meta = {
         icon: {
             control: 'select',
             options: icons,
-            description: 'Icon name. [Browse available icons](/?path=/story/components-icon--all-icons)',
-        },
-        title: {
-            control: 'text',
-            description: 'The title text displayed in the header.',
-            table: {
-                category: 'props'
-            }
         },
     },
 } satisfies Meta<typeof Header>;
diff --git a/resources/js/stories/HoverCard.stories.ts b/resources/js/stories/HoverCard.stories.ts
index b4494dc4214..543fd974dca 100644
--- a/resources/js/stories/HoverCard.stories.ts
+++ b/resources/js/stories/HoverCard.stories.ts
@@ -8,32 +8,10 @@ const meta = {
         align: {
             control: 'select',
             options: ['start', 'center', 'end'],
-            description: 'The preferred alignment against the trigger. May change when collisions occur. <br><br> Options: `start`, `center`, `end`',
-        },
-        arrow: {
-            control: 'boolean',
-            description: 'When `true`, an arrow is displayed near the trigger.'
-        },
-        delay: {
-            control: 'number',
-            description: 'The delay in milliseconds before the hover card opens.',
-        },
-        inset: {
-            control: 'boolean',
-            description: 'When `true`, the internal padding of the hover card is removed.',
-        },
-        offset: {
-            control: 'number',
-            description: 'The distance in pixels from the trigger.',
         },
         side: {
             control: 'select',
             options: ['top', 'bottom', 'left', 'right'],
-            description: 'The preferred side of the trigger to render against when open. <br><br> Options: `top`, `bottom`, `left`, `right`',
-        },
-        open: {
-            control: 'boolean',
-            description: 'The controlled open state of the hover card.',
         },
         'update:open': {
             description: 'Event handler called when the open state of the hover card changes.',
diff --git a/resources/js/stories/Listing.stories.ts b/resources/js/stories/Listing.stories.ts
index c5f139ad484..81cec4d0130 100644
--- a/resources/js/stories/Listing.stories.ts
+++ b/resources/js/stories/Listing.stories.ts
@@ -35,111 +35,10 @@ const meta = {
         ListingToggleAll,
     },
     argTypes: {
-        url: {
-            control: 'text',
-            description: 'The URL from which to retrieve results. Either use this or `items`.',
-        },
-        items: {
-            control: 'object',
-            description: 'Array of items to display in the listing. When provided, sorting and filtering is done client-side. Either use this or `url`.',
-        },
-        columns: {
-            control: 'object',
-            description: 'The columns to display. Can be array of strings or column definitions.',
-        },
-        allowPresets: {
-            control: 'boolean',
-            description: 'When `true`, allows users to save and load column/filter presets.',
-        },
-        allowBulkActions: {
-            control: 'boolean',
-            description: 'When `true`, bulk actions are available when items are selected.',
-        },
-        actionUrl: {
-            control: 'text',
-            description: 'The URL from which to retrieve actions.',
-        },
-        actionContext: {
-            control: 'object',
-            description: 'Extra data to pass to the server when using actions.',
-        },
-        allowActionsWhileReordering: {
-            control: 'boolean',
-            description: 'When `true`, enables the action dropdown while reordering is enabled.',
-        },
-        reorderable: {
-            control: 'boolean',
-            description: 'When `true`, adds drag handles to the rows.',
-        },
-        preferencesPrefix: {
-            control: 'text',
-            description: 'Any preferences (preferred columns, etc) will be saved nested under this.',
-        },
-        allowCustomizingColumns: {
-            control: 'boolean',
-            description: 'When `true`, users can show/hide columns.',
-        },
-        sortColumn: {
-            control: 'text',
-            description: 'Defines the sort column.',
-        },
         sortDirection: {
             control: 'select',
-            description: 'Defines the sort direction. Defaults to `asc` for most fields, `desc` for dates. <br><br> Options: `asc`, `desc`',
             options: ['asc', 'desc'],
         },
-        sortable: {
-            control: 'boolean',
-            description: 'When `true`, columns can be sorted by clicking on headers.',
-        },
-        selections: {
-            control: 'object',
-            description: 'Array of checked item IDs.',
-        },
-        maxSelections: {
-            control: 'number',
-            description: 'Maximum number of items that can be selected.',
-        },
-        pushQuery: {
-            control: 'boolean',
-            description: 'When `true`, adds the parameters to the current URL.',
-        },
-        additionalParameters: {
-            control: 'object',
-            description: 'Extra data to send to the AJAX URL.',
-        },
-        allowSearch: {
-            control: 'boolean',
-            description: 'When `true`, displays a search input for filtering items.',
-        },
-        searchQuery: {
-            control: 'text',
-            description: 'The search query value.',
-        },
-        filters: {
-            control: 'object',
-            description: 'Array of filter definitions. You can get this by doing `Scope::filters($name, $context)`',
-        },
-        filtersForReordering: {
-            control: 'object',
-            description: 'A function that returns array of filter values to be activated when reordering is enabled.',
-        },
-        perPage: {
-            control: 'number',
-            description: 'Number of items to display per page.',
-        },
-        showPaginationTotals: {
-            control: 'boolean',
-            description: 'When `true`, shows the totals in the paginator. e.g. "1-5 of 10"',
-        },
-        showPaginationPageLinks: {
-            control: 'boolean',
-            description: 'When `true`, shows the page links. e.g. 1,2,3,4. With this disabled you\'ll just get the prev/next arrows.',
-        },
-        showPaginationPerPageSelector: {
-            control: 'boolean',
-            description: 'When `true`, shows the per page dropdown.',
-        },
         'update:columns': {
             description: 'Event handler called when the column customizer is used.',
             table: {
diff --git a/resources/js/stories/Modal.stories.ts b/resources/js/stories/Modal.stories.ts
index bc3fbf7e14b..46db3a86aae 100644
--- a/resources/js/stories/Modal.stories.ts
+++ b/resources/js/stories/Modal.stories.ts
@@ -6,11 +6,20 @@ const meta = {
     title: 'Overlays/Modal',
     component: Modal,
     argTypes: {
-        title: { control: 'text' },
-        icon: { control: 'text' },
-        blur: { control: 'boolean' },
-        dismissible: { control: 'boolean' },
-        open: { control: 'boolean' },
+        'dismissed': {
+            description: 'Event handler called when the modal is dismissed.',
+            table: {
+                category: 'events',
+                type: { summary: '() => void' },
+            },
+        },
+        'update:open': {
+            description: 'Event handler called when the open state of the modal changes.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: boolean) => void' },
+            },
+        },
     },
 } satisfies Meta<typeof Modal>;
 
diff --git a/resources/js/stories/Panel.stories.ts b/resources/js/stories/Panel.stories.ts
index 42e3350f909..e0466c1d1f0 100644
--- a/resources/js/stories/Panel.stories.ts
+++ b/resources/js/stories/Panel.stories.ts
@@ -8,16 +8,7 @@ const meta = {
         PanelHeader,
         PanelFooter,
     },
-    argTypes: {
-        heading: {
-            control: 'text',
-            description: 'Heading text for the panel',
-        },
-        subheading: {
-            control: 'text',
-            description: 'Subheading text below the heading',
-        },
-    },
+    argTypes: {},
 } satisfies Meta<typeof Panel>;
 
 export default meta;
diff --git a/resources/js/stories/Popover.stories.ts b/resources/js/stories/Popover.stories.ts
index a90626d552b..26db5feb361 100644
--- a/resources/js/stories/Popover.stories.ts
+++ b/resources/js/stories/Popover.stories.ts
@@ -8,28 +8,10 @@ const meta = {
         align: {
             control: 'select',
             options: ['start', 'center', 'end'],
-            description: 'The preferred alignment against the trigger. May change when collisions occur. Options: `start`, `center`, `end`',
-        },
-        arrow: {
-            control: 'boolean',
-            description: 'When `true`, an arrow is displayed near the trigger.'
-        },
-        inset: {
-            control: 'boolean',
-            description: 'When `true`, the internal padding of the popover is removed.',
-        },
-        offset: {
-            control: 'number',
-            description: 'The distance in pixels from the trigger',
         },
         side: {
             control: 'select',
             options: ['top', 'bottom', 'left', 'right'],
-            description: 'The preferred side of the trigger to render against when open. Options: `top`, `bottom`, `left`, `right`',
-        },
-        open: {
-            control: 'boolean',
-            description: 'The controlled open state of the popover.',
         },
         'update:open': {
             description: 'Event handler called when the open state of the popover changes.',
diff --git a/resources/js/stories/Select.stories.ts b/resources/js/stories/Select.stories.ts
index ff7ab911cb7..146b569b850 100644
--- a/resources/js/stories/Select.stories.ts
+++ b/resources/js/stories/Select.stories.ts
@@ -6,38 +6,16 @@ const meta = {
     title: 'Forms/Select',
     component: Select,
     argTypes: {
-        clearable: { control: 'boolean' },
-        disabled: { control: 'boolean' },
         icon: {
             control: 'select',
             options: icons,
-            description: 'Icon name. [Browse available icons](/?path=/story/components-icon--all-icons)',
         },
-        modelValue: {
-            control: 'text',
-            description: 'The controlled value of the select.',
-        },
-        optionLabel: {
-            control: 'text',
-            description: "Key of the option's label in the option's object."
-        },
-        options: {
-            description: 'Array of option objects',
-        },
-        optionValue: {
-            control: 'text',
-            description: "Key of the option's value in the option's object."
-        },
-        placeholder: { control: 'text' },
-        readonly: { control: 'boolean' },
         size: {
             control: 'select',
-            description: 'Controls the size of the select. <br><br> Options: `xs`, `sm`, `base`, `lg`, `xl`',
             options: ['xs', 'sm', 'base', 'lg', 'xl'],
         },
         variant: {
             control: 'select',
-            description: 'Controls the appearance of the select. <br><br> Options: `default`, `filled`, `ghost`, `subtle`',
             options: ['default', 'filled', 'ghost', 'subtle'],
         },
         'update:modelValue': {
diff --git a/resources/js/stories/Slider.stories.ts b/resources/js/stories/Slider.stories.ts
index df70f0fa369..0fe96d12b9c 100644
--- a/resources/js/stories/Slider.stories.ts
+++ b/resources/js/stories/Slider.stories.ts
@@ -6,42 +6,12 @@ const meta = {
     title: 'Forms/Slider',
     component: Slider,
     argTypes: {
-        description: {
-            control: 'text',
-            description: 'Description text for the slider.',
-        },
-        id: {
-            control: 'text',
-            description: 'ID attribute for the slider.',
-        },
-        label: {
-            control: 'text',
-            description: 'Label text for the slider.',
-        },
-        modelValue: {
-            control: 'number',
-            description: 'The controlled value of the slider.',
-        },
-        min: {
-            control: 'number',
-            description: 'The minimum value of the slider.',
-        },
-        max: {
-            control: 'number',
-            description: 'The maximum value of the slider.',
-        },
-        step: {
-            control: 'number',
-            description: 'The step increment for the slider.',
-        },
         size: {
             control: 'select',
-            description: 'Controls the size of the slider. <br><br> Options: `sm`, `base`',
             options: ['sm', 'base'],
         },
         variant: {
             control: 'select',
-            description: 'Controls the appearance of the slider. <br><br> Options: `default`',
             options: ['default'],
         },
         'update:modelValue': {
diff --git a/resources/js/stories/TimePicker.stories.ts b/resources/js/stories/TimePicker.stories.ts
index fac7b82e2e8..56c029a3d2f 100644
--- a/resources/js/stories/TimePicker.stories.ts
+++ b/resources/js/stories/TimePicker.stories.ts
@@ -6,24 +6,10 @@ const meta = {
     title: 'Forms/TimePicker',
     component: TimePicker,
     argTypes: {
-        modelValue: {
-            control: 'object',
-            description: 'The controlled time value.',
-        },
-        badge: {
-            control: 'text',
-            description: 'Badge text to display.',
-        },
-        required: { control: 'boolean' },
         granularity: {
             control: 'select',
-            description: 'The granularity of the time picker. <br><br> Options: `hour`, `minute`, `second`',
             options: ['hour', 'minute', 'second'],
         },
-        clearable: {
-            control: 'boolean',
-            description: 'When `true`, clear and "set to now" buttons are displayed.',
-        },
         'update:modelValue': {
             description: 'Event handler called when the time value changes.',
             table: {
diff --git a/resources/js/stories/Toggle.stories.ts b/resources/js/stories/Toggle.stories.ts
index b86082fcee1..d855c925a85 100644
--- a/resources/js/stories/Toggle.stories.ts
+++ b/resources/js/stories/Toggle.stories.ts
@@ -9,28 +9,14 @@ const meta = {
         ToggleItem,
     },
     argTypes: {
-        modelValue: {
-            control: 'text',
-            description: 'The controlled value of the toggle group.',
-            table: {
-                type: { summary: 'string | string[]' }
-            }
-        },
         size: {
             control: 'select',
-            description: 'Controls the size of the toggle items. <br><br> Options: `xs`, `sm`, `base`',
             options: ['xs', 'sm', 'base'],
         },
         variant: {
             control: 'select',
-            description: 'Controls the appearance of the toggle items. <br><br> Options: `default`, `primary`, `filled`, `ghost`',
             options: ['default', 'primary', 'filled', 'ghost'],
         },
-        multiple: {
-            control: 'boolean',
-            description: 'When `true`, multiple items can be selected',
-        },
-        required: { control: 'boolean' },
         'update:modelValue': {
             description: 'Event handler called when the selected options change.',
             table: {

From 42e6ce387a11a64a8f93edc5761a61168468e5f0 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Fri, 19 Dec 2025 14:56:02 +0000
Subject: [PATCH 28/32] wip

---
 resources/js/stories/Modal.stories.ts | 29 ++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/resources/js/stories/Modal.stories.ts b/resources/js/stories/Modal.stories.ts
index 46db3a86aae..4d1cdc2f012 100644
--- a/resources/js/stories/Modal.stories.ts
+++ b/resources/js/stories/Modal.stories.ts
@@ -5,6 +5,10 @@ import PortalTargets from "@/components/portals/PortalTargets.vue";
 const meta = {
     title: 'Overlays/Modal',
     component: Modal,
+    subcomponents: {
+        ModalTitle,
+        ModalClose,
+    },
     argTypes: {
         'dismissed': {
             description: 'Event handler called when the modal is dismissed.',
@@ -27,7 +31,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const defaultCode = `
-<Modal title="That's Pretty Neat">
+<Modal v-model:open="isOpen" title="That's Pretty Neat">
     <template #trigger>
         <Button text="How neat is that?" />
     </template>
@@ -43,12 +47,15 @@ export const _DocsIntro: Story = {
     },
     render: () => ({
         components: { Modal, Button, PortalTargets },
+        data: () => {
+            return { isOpen: false };
+        },
         template: `<div>${defaultCode}</div><PortalTargets />`,
     }),
 };
 
 const customTitleCode = `
-<Modal>
+<Modal v-model:open="isOpen">
     <template #trigger>
         <Button text="How neat is that?" />
     </template>
@@ -69,12 +76,15 @@ export const _CustomTitle: Story = {
     },
     render: () => ({
         components: { Modal, ModalTitle, Button },
+        data: () => {
+            return { isOpen: false };
+        },
         template: customTitleCode,
     }),
 };
 
 const closeButtonCode = `
-<Modal title="Hey look a close button" class="text-center">
+<Modal v-model:open="isOpen" title="Hey look a close button" class="text-center">
     <template #trigger>
         <Button text="Open Says Me" />
     </template>
@@ -93,12 +103,15 @@ export const _CloseButton: Story = {
     },
     render: () => ({
         components: { Modal, ModalClose, Button },
+        data: () => {
+            return { isOpen: false };
+        },
         template: closeButtonCode,
     }),
 };
 
 const iconCode = `
-<Modal title="That's Pretty Neat" icon="fire-flame-burn-hot">
+<Modal v-model:open="isOpen" title="That's Pretty Neat" icon="fire-flame-burn-hot">
     <template #trigger>
         <Button text="How neat is that?" />
     </template>
@@ -114,12 +127,15 @@ export const _WithIcon: Story = {
     },
     render: () => ({
         components: { Modal, Button },
+        data: () => {
+            return { isOpen: false };
+        },
         template: iconCode,
     }),
 };
 
 const footerCode = `
-<Modal title="Create new user">
+<Modal v-model:open="isOpen" title="Create new user">
     <template #trigger>
         <Button text="Create User" variant="primary" />
     </template>
@@ -159,6 +175,9 @@ export const _WithFooter: Story = {
     },
     render: () => ({
         components: { Modal, ModalClose, Button, Field, Input },
+        data: () => {
+            return { isOpen: false };
+        },
         template: footerCode,
     }),
 };

From a9dd8d5b10394e65d335edf7b2d326a09679d912 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Fri, 19 Dec 2025 15:37:12 +0000
Subject: [PATCH 29/32] add jsdoc comments to combobox component

---
 .../js/components/ui/Combobox/Combobox.vue    | 56 ++++++++++++-------
 1 file changed, 36 insertions(+), 20 deletions(-)

diff --git a/resources/js/components/ui/Combobox/Combobox.vue b/resources/js/components/ui/Combobox/Combobox.vue
index bc469a99d36..3674f036e00 100644
--- a/resources/js/components/ui/Combobox/Combobox.vue
+++ b/resources/js/components/ui/Combobox/Combobox.vue
@@ -25,26 +25,42 @@ import Scrollbar from "@ui/Combobox/Scrollbar.vue";
 const emit = defineEmits(['update:modelValue', 'search', 'selected', 'added']);
 
 const props = defineProps({
-    id: { type: String },
-    clearable: { type: Boolean, default: false },
-    closeOnSelect: { type: Boolean, default: undefined },
-    disabled: { type: Boolean, default: false },
-    discreteFocusOutline: { type: Boolean, default: false },
-    icon: { type: String, default: null },
-    ignoreFilter: { type: Boolean, default: false },
-    labelHtml: { type: Boolean, default: false },
-    maxSelections: { type: Number, default: null },
-    modelValue: { type: [Object, String, Number], default: null },
-    multiple: { type: Boolean, default: false },
-    optionLabel: { type: String, default: 'label' },
-    options: { type: Array, default: () => [] },
-    optionValue: { type: String, default: 'value' },
-    placeholder: { type: String, default: () => __('Select...') },
-    readOnly: { type: Boolean, default: false },
-    searchable: { type: Boolean, default: true },
-    size: { type: String, default: 'base' },
-    taggable: { type: Boolean, default: false },
-    variant: { type: String, default: 'default' },
+	id: { type: String },
+	/** When `true`, the selected value will be clearable. */
+	clearable: { type: Boolean, default: false },
+	/** When `true`, the options dropdown will close after selecting an option. */
+	closeOnSelect: { type: Boolean, default: undefined },
+	disabled: { type: Boolean, default: false },
+	/** When `true`, the focus outline will be more discrete. */
+	discreteFocusOutline: { type: Boolean, default: false },
+	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
+	icon: { type: String, default: null },
+	/** When `true`, the Combobox will avoid filtering options, allowing you to handle filtering yourself by listening to the `search` event and updating the `options` prop. */
+	ignoreFilter: { type: Boolean, default: false },
+	/** When `true`, the option labels will be rendered with `v-html` instead of `v-text`. */
+	labelHtml: { type: Boolean, default: false },
+	/** The maximum number of selectable options. */
+	maxSelections: { type: Number, default: null },
+	/** The controlled value of the select. */
+	modelValue: { type: [Object, String, Number], default: null },
+	/** When `true`, multiple options are allowed. */
+	multiple: { type: Boolean, default: false },
+	/** Key of the option's label in the option's object. */
+	optionLabel: { type: String, default: 'label' },
+	/** Array of option objects */
+	options: { type: Array, default: () => [] },
+	/** Key of the option's value in the option's object. */
+	optionValue: { type: String, default: 'value' },
+	placeholder: { type: String, default: () => __('Select...') },
+	readOnly: { type: Boolean, default: false },
+	/** When `true`, the options will be searchable. */
+	searchable: { type: Boolean, default: true },
+	/** Controls the size of the select. <br><br> Options: `xs`, `sm`, `base`, `lg`, `xl` */
+	size: { type: String, default: 'base' },
+	/** When `true`, additional options can be added by typing in the search input and pressing enter. */
+	taggable: { type: Boolean, default: false },
+	/** Controls the appearance of the select. <br><br> Options: `default`, `filled`, `ghost`, `subtle` */
+	variant: { type: String, default: 'default' },
 });
 
 defineOptions({

From 0c1b4be70f7872440d6b5bd07387869c33f3c7d5 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 19 Dec 2025 11:01:28 -0500
Subject: [PATCH 30/32] dont export or document data table just yet. its
 clearly quite broken (and unused)

---
 packages/cms/src/ui.js                    |   4 -
 resources/js/bootstrap/cms/ui.js          |   4 -
 resources/js/components/ui/index.js       |   4 -
 resources/js/stories/DataTable.stories.ts | 200 ----------------------
 resources/js/stories/docs/DataTable.mdx   |  19 --
 resources/js/tests/Package.test.js        |   4 -
 6 files changed, 235 deletions(-)
 delete mode 100644 resources/js/stories/DataTable.stories.ts
 delete mode 100644 resources/js/stories/docs/DataTable.mdx

diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
index ee63ef9391a..926f3b2446e 100644
--- a/packages/cms/src/ui.js
+++ b/packages/cms/src/ui.js
@@ -26,10 +26,6 @@ export const {
     DatePicker,
     DateRangePicker,
     Description,
-    DataTable,
-    DataTableCell,
-    DataTableColumn,
-    DataTableRow,
     DocsCallout,
     DragHandle,
     Dropdown,
diff --git a/resources/js/bootstrap/cms/ui.js b/resources/js/bootstrap/cms/ui.js
index 9f0f790d4b4..84c0483c152 100644
--- a/resources/js/bootstrap/cms/ui.js
+++ b/resources/js/bootstrap/cms/ui.js
@@ -26,10 +26,6 @@ export {
     DatePicker,
     DateRangePicker,
     Description,
-    DataTable,
-    DataTableCell,
-    DataTableColumn,
-    DataTableRow,
     DocsCallout,
     DragHandle,
     Dropdown,
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index 91a10373b3d..b94ec2d4a50 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -21,10 +21,6 @@ export { default as ContextMenu } from './Context/Menu.vue';
 export { default as ContextSeparator } from './Context/Separator.vue';
 export { default as DatePicker } from './DatePicker/DatePicker.vue';
 export { default as DateRangePicker } from './DateRangePicker/DateRangePicker.vue';
-export { default as DataTable } from './DataTable/DataTable.vue';
-export { default as DataTableCell } from './DataTable/Cell.vue';
-export { default as DataTableColumn } from './DataTable/Column.vue';
-export { default as DataTableRow } from './DataTable/Row.vue';
 export { default as Description } from './Description.vue';
 export { default as DragHandle } from './DragHandle.vue';
 export { default as Dropdown } from './Dropdown/Dropdown.vue';
diff --git a/resources/js/stories/DataTable.stories.ts b/resources/js/stories/DataTable.stories.ts
deleted file mode 100644
index 6104b0bffec..00000000000
--- a/resources/js/stories/DataTable.stories.ts
+++ /dev/null
@@ -1,200 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/vue3';
-import {DataTable, DataTableCell, DataTableColumn, DataTableRow} from '@ui';
-
-const meta = {
-    title: 'Layout/DataTable',
-    component: DataTable,
-    subcomponents: {
-        DataTableColumn,
-        DataTableRow,
-        DataTableCell,
-    },
-    argTypes: {
-        variant: {
-            control: 'select',
-            options: ['normal', 'compact'],
-        },
-    },
-} satisfies Meta<typeof DataTable>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const defaultCode = `
-<DataTable>
-    <template #columns>
-        <DataTableColumn>Name</DataTableColumn>
-        <DataTableColumn>GitHub</DataTableColumn>
-        <DataTableColumn align="right">Role</DataTableColumn>
-    </template>
-    <template #rows>
-        <DataTableRow :index="0" :total="3">
-            <template #default="{ position, rightPosition }">
-                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
-                    Jack McDade
-                </DataTableCell>
-                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
-                    @jackmcdade
-                </DataTableCell>
-                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
-                    Founder
-                </DataTableCell>
-            </template>
-        </DataTableRow>
-        <DataTableRow :index="1" :total="3">
-            <template #default="{ position, rightPosition }">
-                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
-                    Jason Varga
-                </DataTableCell>
-                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
-                    @jasonvarga
-                </DataTableCell>
-                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
-                    Lead Developer
-                </DataTableCell>
-            </template>
-        </DataTableRow>
-        <DataTableRow :index="2" :total="3">
-            <template #default="{ position, rightPosition }">
-                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
-                    Duncan McClean
-                </DataTableCell>
-                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
-                    @duncanmcclean
-                </DataTableCell>
-                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
-                    Developer
-                </DataTableCell>
-            </template>
-        </DataTableRow>
-    </template>
-</DataTable>
-`;
-
-export const _DocsIntro: Story = {
-    tags: ['!dev'],
-    parameters: {
-        docs: {
-            source: { code: defaultCode }
-        }
-    },
-    render: () => ({
-        components: { DataTable, DataTableColumn, DataTableRow, DataTableCell },
-        template: defaultCode,
-    }),
-};
-
-const compactCode = `
-<DataTable variant="compact">
-    <template #columns>
-        <DataTableColumn>Product</DataTableColumn>
-        <DataTableColumn>SKU</DataTableColumn>
-        <DataTableColumn align="right">Stock</DataTableColumn>
-    </template>
-    <template #rows>
-        <DataTableRow :index="0" :total="2">
-            <template #default="{ position, rightPosition }">
-                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
-                    T-Shirt
-                </DataTableCell>
-                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
-                    TSH-001
-                </DataTableCell>
-                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
-                    42
-                </DataTableCell>
-            </template>
-        </DataTableRow>
-        <DataTableRow :index="1" :total="2">
-            <template #default="{ position, rightPosition }">
-                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
-                    Hoodie
-                </DataTableCell>
-                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
-                    HOD-002
-                </DataTableCell>
-                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
-                    18
-                </DataTableCell>
-            </template>
-        </DataTableRow>
-    </template>
-</DataTable>
-`;
-
-export const _Compact: Story = {
-    tags: ['!dev'],
-    parameters: {
-        docs: {
-            source: { code: compactCode }
-        }
-    },
-    render: () => ({
-        components: { DataTable, DataTableColumn, DataTableRow, DataTableCell },
-        template: compactCode,
-    }),
-};
-
-const columnWidthCode = `
-<DataTable>
-    <template #columns>
-        <DataTableColumn width="60%">Title</DataTableColumn>
-        <DataTableColumn width="20%">Status</DataTableColumn>
-        <DataTableColumn width="20%" align="right">Date</DataTableColumn>
-    </template>
-    <template #rows>
-        <DataTableRow :index="0" :total="2">
-            <template #default="{ position, rightPosition }">
-                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
-                    Statamic 6 is Out!
-                </DataTableCell>
-                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
-                    Draft
-                </DataTableCell>
-                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
-                    January 5th, 2026
-                </DataTableCell>
-            </template>
-        </DataTableRow>
-        <DataTableRow :index="0" :total="2">
-            <template #default="{ position, rightPosition }">
-                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
-                    Statamic 6 Sneak Peek
-                </DataTableCell>
-                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
-                    Published
-                </DataTableCell>
-                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
-                    July 14th, 2025
-                </DataTableCell>
-            </template>
-        </DataTableRow>
-        <DataTableRow :index="1" :total="2">
-            <template #default="{ position, rightPosition }">
-                <DataTableCell :index="0" :position="position" :rightPosition="rightPosition">
-                    The Brand New Statamic Experience
-                </DataTableCell>
-                <DataTableCell :index="1" :position="position" :rightPosition="rightPosition">
-                    Published
-                </DataTableCell>
-                <DataTableCell :index="2" :position="position" :rightPosition="rightPosition" align="right">
-                    December 10th, 2024
-                </DataTableCell>
-            </template>
-        </DataTableRow>
-    </template>
-</DataTable>
-`;
-
-export const _ColumnWidth: Story = {
-    tags: ['!dev'],
-    parameters: {
-        docs: {
-            source: { code: columnWidthCode }
-        }
-    },
-    render: () => ({
-        components: { DataTable, DataTableColumn, DataTableRow, DataTableCell },
-        template: columnWidthCode,
-    }),
-};
diff --git a/resources/js/stories/docs/DataTable.mdx b/resources/js/stories/docs/DataTable.mdx
deleted file mode 100644
index 7fc2c3b4cf5..00000000000
--- a/resources/js/stories/docs/DataTable.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
-import * as DataTableStories from '../DataTable.stories';
-
-<Meta of={DataTableStories} />
-
-# DataTable
-A styled data table component with rounded corners and proper borders. Uses a slot-based API for defining columns and rows with automatic border positioning.
-<Canvas of={DataTableStories._DocsIntro} sourceState={'shown'} />
-
-## Compact Variant
-Use the `compact` variant for denser tables with reduced padding.
-<Canvas of={DataTableStories._Compact} sourceState={'shown'} />
-
-## Column Width
-Control column widths using the `width` prop on DataTableColumn.
-<Canvas of={DataTableStories._ColumnWidth} sourceState={'shown'} />
-
-## Arguments
-<ArgTypes of={DataTableStories} />
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
index e072887b787..af3717f07fe 100644
--- a/resources/js/tests/Package.test.js
+++ b/resources/js/tests/Package.test.js
@@ -192,10 +192,6 @@ it('exports ui', async () => {
         'Avatar',
         'CommandPaletteItem',
         'CreateForm',
-        'DataTable',
-        'DataTableCell',
-        'DataTableColumn',
-        'DataTableRow',
         'DocsCallout',
         'Listing',
         'ListingCustomizeColumns',

From c6610c914ac2162cbf6ffb7fee11034301191abf Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 19 Dec 2025 11:07:05 -0500
Subject: [PATCH 31/32] comment out these quite broken ones

---
 resources/js/stories/docs/CodeEditor.mdx | 7 +++++++
 resources/js/stories/docs/CreateForm.mdx | 5 +++++
 2 files changed, 12 insertions(+)

diff --git a/resources/js/stories/docs/CodeEditor.mdx b/resources/js/stories/docs/CodeEditor.mdx
index 75cbfec8d3f..234de1c4b41 100644
--- a/resources/js/stories/docs/CodeEditor.mdx
+++ b/resources/js/stories/docs/CodeEditor.mdx
@@ -5,6 +5,11 @@ import * as CodeEditorStories from '../CodeEditor.stories';
 
 # CodeEditor
 A powerful code editor component powered by CodeMirror. Supports syntax highlighting for multiple languages, line numbers, line wrapping, and keyboard shortcuts.
+
+Docs coming soon.
+
+{/* Todo
+
 <Canvas of={CodeEditorStories._DocsIntro} sourceState={'shown'} />
 
 ## Modes
@@ -21,3 +26,5 @@ Disable line numbers by setting the `line-numbers` prop to `false`. This can be
 
 ## Arguments
 <ArgTypes of={CodeEditorStories} />
+
+*/}
diff --git a/resources/js/stories/docs/CreateForm.mdx b/resources/js/stories/docs/CreateForm.mdx
index 6d4802caf3c..7e36ad218aa 100644
--- a/resources/js/stories/docs/CreateForm.mdx
+++ b/resources/js/stories/docs/CreateForm.mdx
@@ -5,6 +5,10 @@ import * as CreateFormStories from '../CreateForm.stories';
 
 # CreateForm
 A pre-built form component for creating new resources with automatic slug generation. Includes title and handle fields with customizable instructions and automatic form submission.
+
+Docs coming soon.
+
+{/* Todo
 <Canvas of={CreateFormStories._DocsIntro} sourceState={'shown'} />
 
 ## Without Handle
@@ -17,3 +21,4 @@ Add helpful instructions to guide users when filling out the form.
 
 ## Arguments
 <ArgTypes of={CreateFormStories} />
+*/}

From bcfc7b1769dc9ee72987c22fa702ca90a2f6898b Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 19 Dec 2025 11:08:20 -0500
Subject: [PATCH 32/32] this too

---
 resources/js/stories/docs/Modal.mdx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/resources/js/stories/docs/Modal.mdx b/resources/js/stories/docs/Modal.mdx
index b91245b1d4b..0c999013830 100644
--- a/resources/js/stories/docs/Modal.mdx
+++ b/resources/js/stories/docs/Modal.mdx
@@ -5,6 +5,10 @@ import * as ModalStories from '../Modal.stories';
 
 # Modal
 Display content in a layer above the main page. Ideal for confirmations, alerts, and forms.
+
+Docs coming soon.
+
+{/* Todo
 <Canvas of={ModalStories._DocsIntro} sourceState={'shown'} />
 
 ## Title
@@ -25,3 +29,4 @@ You can use a custom footer by using the `#footer` slot.
 
 ## Arguments
 <ArgTypes of={ModalStories} />
+*/}