@wizeworks/silicaui-mcp 0.28.0 → 0.30.0

package/dist/data/components.json

@@ -79,7 +79,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Button } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row, Stack } from \"../lib/Section\";\r\nimport { ColorVariantSizeGrid } from \"../lib/ColorGrid\";\r\nimport { PlusIcon } from \"../lib/icons\";\r\nimport { VARIANTS } from \"../lib/data\";\r\n\r\nexport function ButtonDemo() {\r\n    const [loading, setLoading] = useState(false);\r\n\r\n    function fakeSave() {\r\n        setLoading(true);\r\n        setTimeout(() => setLoading(false), 1800);\r\n    }\r\n\r\n    return (\r\n        <>\r\n            <ColorVariantSizeGrid\r\n                Component={Button}\r\n                variants={VARIANTS.filter((v) => v !== \"solid\")}\r\n            />\r\n\r\n            <Section title=\"Icon buttons (square / circle)\">\r\n                <Row>\r\n                    <Button color=\"primary\" shape=\"square\" aria-label=\"Add\">\r\n                        <PlusIcon />\r\n                    </Button>\r\n                    <Button color=\"secondary\" shape=\"circle\" aria-label=\"Add\">\r\n                        <PlusIcon />\r\n                    </Button>\r\n                    <Button color=\"accent\" variant=\"outline\" shape=\"circle\" aria-label=\"Add\">\r\n                        <PlusIcon />\r\n                    </Button>\r\n                    <Button color=\"brand\" iconStart={<PlusIcon />}>\r\n                        with icon\r\n                    </Button>\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"States\">\r\n                <Row>\r\n                    <Button color=\"primary\" loading={loading} onClick={fakeSave}>\r\n                        {loading ? \"Saving…\" : \"Click to load\"}\r\n                    </Button>\r\n                    <Button color=\"primary\" disabled>\r\n                        Disabled\r\n                    </Button>\r\n                    <Button color=\"primary\" variant=\"outline\" active>\r\n                        Active\r\n                    </Button>\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Polymorphism · render → a real <a href>\">\r\n                <Row>\r\n                    <Button\r\n                        color=\"brand\"\r\n                        variant=\"link\"\r\n                        render={<a href=\"https://example.com\" />}\r\n                    >\r\n                        Anchor · link style\r\n                    </Button>\r\n                    <Button color=\"brand\" render={<a href=\"https://example.com\" />}>\r\n                        Anchor · button style\r\n                    </Button>\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Layout\">\r\n                <Stack className=\"w-full\">\r\n                    <Button color=\"primary\" block>\r\n                        Block\r\n                    </Button>\r\n                    <Button color=\"neutral\" variant=\"outline\" wide>\r\n                        Wide\r\n                    </Button>\r\n                </Stack>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "DropdownMenu",
@@ -181,7 +181,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Swap } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nfunction MenuIcon() {\r\n    return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" width=\"28\" height=\"28\">\r\n            <path d=\"M4 6h16M4 12h16M4 18h16\" strokeLinecap=\"round\" />\r\n        </svg>\r\n    );\r\n}\r\nfunction CloseIcon() {\r\n    return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" width=\"28\" height=\"28\">\r\n            <path d=\"M6 6l12 12M18 6 6 18\" strokeLinecap=\"round\" />\r\n        </svg>\r\n    );\r\n}\r\nfunction SunIcon() {\r\n    return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" width=\"24\" height=\"24\">\r\n            <circle cx=\"12\" cy=\"12\" r=\"4\" />\r\n            <path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" strokeLinecap=\"round\" />\r\n        </svg>\r\n    );\r\n}\r\nfunction MoonIcon() {\r\n    return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"24\" height=\"24\">\r\n            <path d=\"M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8Z\" />\r\n        </svg>\r\n    );\r\n}\r\n\r\nexport function SwapDemo() {\r\n    const [menuOpen, setMenuOpen] = useState(false);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Transition variants\">\r\n                <Row>\r\n                    <Swap variant=\"fade\" on={<CloseIcon />} off={<MenuIcon />} label=\"Fade\" />\r\n                    <Swap variant=\"rotate\" on={<CloseIcon />} off={<MenuIcon />} label=\"Rotate\" />\r\n                    <Swap variant=\"flip\" on={<MoonIcon />} off={<SunIcon />} label=\"Flip\" />\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · controlled mobile menu toggle\">\r\n                <div className=\"flex items-center gap-3\">\r\n                    <Swap\r\n                        variant=\"rotate\"\r\n                        active={menuOpen}\r\n                        onActiveChange={setMenuOpen}\r\n                        on={<CloseIcon />}\r\n                        off={<MenuIcon />}\r\n                        label=\"Toggle menu\"\r\n                    />\r\n                    <span className=\"text-sm opacity-70\">\r\n                        Menu is {menuOpen ? \"open\" : \"closed\"}\r\n                    </span>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Accordion",
@@ -203,7 +203,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import {\r\n    Accordion,\r\n    AccordionItem,\r\n    AccordionTrigger,\r\n    AccordionPanel,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function AccordionDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · FAQ (single-open)\">\r\n                <Accordion defaultValue={[\"a\"]} className=\"max-w-md\">\r\n                    <AccordionItem value=\"a\">\r\n                        <AccordionTrigger>What is Silica?</AccordionTrigger>\r\n                        <AccordionPanel>\r\n                            A component library and design system built on one CSS-first\r\n                            token model.\r\n                        </AccordionPanel>\r\n                    </AccordionItem>\r\n                    <AccordionItem value=\"b\">\r\n                        <AccordionTrigger>Is it themeable?</AccordionTrigger>\r\n                        <AccordionPanel>\r\n                            Yes — every color, radius, and size is a CSS variable you can\r\n                            override per theme.\r\n                        </AccordionPanel>\r\n                    </AccordionItem>\r\n                    <AccordionItem value=\"c\">\r\n                        <AccordionTrigger>Does it work with any framework?</AccordionTrigger>\r\n                        <AccordionPanel>\r\n                            The core is a Tailwind plugin; React components are a thin\r\n                            typed layer on top.\r\n                        </AccordionPanel>\r\n                    </AccordionItem>\r\n                </Accordion>\r\n            </Section>\r\n\r\n            <Section title=\"Multiple open at once\">\r\n                <Accordion multiple defaultValue={[\"a\", \"b\"]} className=\"max-w-md\">\r\n                    <AccordionItem value=\"a\">\r\n                        <AccordionTrigger>Section one</AccordionTrigger>\r\n                        <AccordionPanel>Both of these can be open together.</AccordionPanel>\r\n                    </AccordionItem>\r\n                    <AccordionItem value=\"b\">\r\n                        <AccordionTrigger>Section two</AccordionTrigger>\r\n                        <AccordionPanel>Set the `multiple` prop to allow it.</AccordionPanel>\r\n                    </AccordionItem>\r\n                </Accordion>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Avatar",
@@ -261,7 +261,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Avatar, AvatarGroup } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\nimport { COLORS, SIZES } from \"../lib/data\";\r\n\r\n// A stand-in \"photo\" (data URI, always loads offline): a head-and-shoulders\r\n// silhouette on a gradient, so the image path — object-fit cover + rounding —\r\n// is demonstrated without a network request.\r\nconst PHOTO = `data:image/svg+xml,${encodeURIComponent(\r\n    `<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>` +\r\n        `<defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>` +\r\n        `<stop offset='0' stop-color='#6366f1'/><stop offset='1' stop-color='#ec4899'/>` +\r\n        `</linearGradient></defs>` +\r\n        `<rect width='100' height='100' fill='url(#g)'/>` +\r\n        `<circle cx='50' cy='40' r='18' fill='rgba(255,255,255,.92)'/>` +\r\n        `<rect x='22' y='62' width='56' height='38' rx='19' fill='rgba(255,255,255,.92)'/>` +\r\n        `</svg>`,\r\n)}`;\r\n\r\nexport function AvatarDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Colors (initials fallback)\">\r\n                <Row>\r\n                    {COLORS.map((color) => (\r\n                        <Avatar key={color} color={color} alt={color}>\r\n                            {color.slice(0, 2).toUpperCase()}\r\n                        </Avatar>\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Row>\r\n                    {SIZES.map((size) => (\r\n                        <Avatar key={size} color=\"primary\" size={size} alt={size}>\r\n                            {size.toUpperCase()}\r\n                        </Avatar>\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · team roster with presence\">\r\n                <Row>\r\n                    <Avatar src={PHOTO} alt=\"Ada Lovelace\" ring status=\"online\" />\r\n                    <Avatar color=\"secondary\" alt=\"Grace Hopper\" ring status=\"online\">\r\n                        GH\r\n                    </Avatar>\r\n                    <Avatar color=\"neutral\" alt=\"Alan Turing\" status=\"offline\">\r\n                        AT\r\n                    </Avatar>\r\n                    <Avatar shape=\"rounded\" color=\"brand\" alt=\"Katherine Johnson\">\r\n                        KJ\r\n                    </Avatar>\r\n                </Row>\r\n                <Row>\r\n                    <span className=\"text-xs opacity-60\">Overlapping group —</span>\r\n                    <AvatarGroup>\r\n                        <Avatar src={PHOTO} alt=\"Ada Lovelace\" />\r\n                        <Avatar color=\"secondary\" alt=\"Grace Hopper\">\r\n                            GH\r\n                        </Avatar>\r\n                        <Avatar color=\"accent\" alt=\"Alan Turing\">\r\n                            AT\r\n                        </Avatar>\r\n                        <Avatar color=\"neutral\" alt=\"+3 more\">\r\n                            +3\r\n                        </Avatar>\r\n                    </AvatarGroup>\r\n                </Row>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Badge",
@@ -301,7 +301,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Badge } from \"@wizeworks/silicaui-react\";\r\nimport { ColorVariantSizeGrid } from \"../lib/ColorGrid\";\r\n\r\nexport function BadgeDemo() {\r\n    return (\r\n        <ColorVariantSizeGrid\r\n            Component={Badge}\r\n            variants={[\"outline\", \"soft\", \"ghost\", \"dash\"]}\r\n        />\r\n    );\r\n}"
   },
   {
     "name": "Card",
@@ -339,7 +339,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import {\r\n    Card,\r\n    CardBody,\r\n    CardTitle,\r\n    CardActions,\r\n    ClickableCard,\r\n    SelectableCard,\r\n    Button,\r\n    Badge,\r\n    Input,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function CardDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Surfaces\">\r\n                <div className=\"grid gap-6 sm:grid-cols-2\">\r\n                    <Card>\r\n                        <CardBody>\r\n                            <div className=\"flex items-center justify-between\">\r\n                                <CardTitle>Project Silica</CardTitle>\r\n                                <Badge color=\"success\" variant=\"soft\">\r\n                                    Active\r\n                                </Badge>\r\n                            </div>\r\n                            <p className=\"opacity-70\">\r\n                                A card sits on the <code>base-100</code> surface, rounds\r\n                                with <code>--radius-box</code>, and lifts with{\" \"}\r\n                                <code>--depth</code>.\r\n                            </p>\r\n                            <CardActions>\r\n                                <Button variant=\"ghost\" color=\"neutral\">\r\n                                    Cancel\r\n                                </Button>\r\n                                <Button color=\"primary\">Deploy</Button>\r\n                            </CardActions>\r\n                        </CardBody>\r\n                    </Card>\r\n\r\n                    <Card>\r\n                        <CardBody>\r\n                            <CardTitle>Newsletter</CardTitle>\r\n                            <p className=\"opacity-70\">\r\n                                Inputs and buttons share the field tier, so they line up.\r\n                            </p>\r\n                            <div className=\"flex gap-2\">\r\n                                <Input placeholder=\"you@example.com\" />\r\n                                <Button color=\"primary\">Subscribe</Button>\r\n                            </div>\r\n                        </CardBody>\r\n                    </Card>\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"ClickableCard · whole surface is a button (or render as a link)\">\r\n                <div className=\"grid gap-4 sm:grid-cols-3\">\r\n                    <ClickableCard onClick={() => console.log(\"open repo\")}>\r\n                        <CardBody>\r\n                            <CardTitle>Repository</CardTitle>\r\n                            <p className=\"opacity-70\">Click anywhere on this card.</p>\r\n                        </CardBody>\r\n                    </ClickableCard>\r\n                    <ClickableCard render={<a href=\"#card\" />}>\r\n                        <CardBody>\r\n                            <CardTitle>As a link</CardTitle>\r\n                            <p className=\"opacity-70\">Renders an &lt;a&gt;, same styling.</p>\r\n                        </CardBody>\r\n                    </ClickableCard>\r\n                    <ClickableCard disabled>\r\n                        <CardBody>\r\n                            <CardTitle>Disabled</CardTitle>\r\n                            <p className=\"opacity-70\">Not interactive.</p>\r\n                        </CardBody>\r\n                    </ClickableCard>\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"SelectableCard · radio group and independent checkboxes\">\r\n                <div className=\"grid gap-4 sm:grid-cols-3\">\r\n                    {([\"Starter\", \"Pro\", \"Enterprise\"] as const).map((plan, i) => (\r\n                        <SelectableCard key={plan} name=\"selectable-plan\" defaultChecked={i === 1}>\r\n                            <CardBody>\r\n                                <CardTitle>{plan}</CardTitle>\r\n                                <p className=\"opacity-70\">\r\n                                    {i === 0 ? \"For side projects.\" : i === 1 ? \"For growing teams.\" : \"For scale.\"}\r\n                                </p>\r\n                            </CardBody>\r\n                        </SelectableCard>\r\n                    ))}\r\n                </div>\r\n                <div className=\"mt-4 grid gap-4 sm:grid-cols-3\">\r\n                    {([\"Email alerts\", \"SMS alerts\", \"Push alerts\"] as const).map((opt) => (\r\n                        <SelectableCard key={opt} type=\"checkbox\" defaultChecked={opt === \"Email alerts\"}>\r\n                            <CardBody>\r\n                                <CardTitle>{opt}</CardTitle>\r\n                            </CardBody>\r\n                        </SelectableCard>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Glass · Tier-0 frosted treatment (backdrop-filter blur + saturate, no SVG refraction)\">\r\n                <div\r\n                    className=\"rounded-box p-8\"\r\n                    style={{\r\n                        backgroundImage:\r\n                            \"linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))\",\r\n                    }}\r\n                >\r\n                    <div className=\"grid gap-6 sm:grid-cols-2\">\r\n                        <Card className=\"glass\">\r\n                            <CardBody>\r\n                                <CardTitle>Neutral frost</CardTitle>\r\n                                <p className=\"opacity-80\">\r\n                                    Plain <code>glass</code> — no color declared, so it\r\n                                    frosts the neutral <code>base-100</code> surface.\r\n                                </p>\r\n                            </CardBody>\r\n                        </Card>\r\n\r\n                        <Card className=\"bg-primary glass\">\r\n                            <CardBody>\r\n                                <CardTitle>Tinted frost</CardTitle>\r\n                                <p className=\"opacity-80\">\r\n                                    <code>bg-primary glass</code> — same{\" \"}\r\n                                    <code>--u-accent</code> hook <code>soft</code> uses,\r\n                                    so the frost picks up primary for colored depth.\r\n                                </p>\r\n                            </CardBody>\r\n                        </Card>\r\n                    </div>\r\n\r\n                    <div className=\"mt-6 grid gap-4 sm:grid-cols-3\">\r\n                        <ClickableCard\r\n                            className=\"glass\"\r\n                            onClick={() => console.log(\"open repo\")}\r\n                        >\r\n                            <CardBody>\r\n                                <CardTitle>Clickable + glass</CardTitle>\r\n                                <p className=\"opacity-80\">\r\n                                    Hover still lifts — the rim sheen lives on its own\r\n                                    pseudo-element, not the hover shadow.\r\n                                </p>\r\n                            </CardBody>\r\n                        </ClickableCard>\r\n\r\n                        {([\"Starter\", \"Pro\"] as const).map((plan, i) => (\r\n                            <SelectableCard\r\n                                key={plan}\r\n                                name=\"selectable-plan-glass\"\r\n                                defaultChecked={i === 0}\r\n                                className=\"glass\"\r\n                            >\r\n                                <CardBody>\r\n                                    <CardTitle>{plan}</CardTitle>\r\n                                    <p className=\"opacity-80\">\r\n                                        Checked ring still reads through the frost.\r\n                                    </p>\r\n                                </CardBody>\r\n                            </SelectableCard>\r\n                        ))}\r\n                    </div>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Carousel",
@@ -389,11 +389,17 @@
             "doc": "Auto-advance every N ms (pauses on hover/focus). Off by default."
           },
           {
-            "name": "onChange",
+            "name": "onValueChange",
             "optional": true,
             "type": "(index: number) => void",
             "doc": "Called with the active slide index whenever it changes."
           },
+          {
+            "name": "onChange",
+            "optional": true,
+            "type": "(index: number) => void",
+            "doc": "@deprecated Use `onValueChange`. `onChange` is reserved for the native DOM handler on components that wrap a real form element; still honored here so this isn't a breaking change."
+          },
           {
             "name": "className",
             "optional": true,
@@ -407,14 +413,14 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import type { CSSProperties } from \"react\";\r\nimport { Carousel, CarouselItem } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nconst SLIDES = [\"primary\", \"secondary\", \"accent\", \"info\", \"success\"] as const;\r\n\r\nfunction slideStyle(color: string): CSSProperties {\r\n    return {\r\n        backgroundColor: `var(--color-${color})`,\r\n        color: `var(--color-${color}-content, #fff)`,\r\n    };\r\n}\r\n\r\nexport function CarouselDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · loop + autoplay\">\r\n                <Carousel loop autoplay={3000} className=\"max-w-lg gap-4 rounded-box\">\r\n                    {SLIDES.map((color) => (\r\n                        <CarouselItem\r\n                            key={color}\r\n                            className=\"flex h-40 w-full shrink-0 items-center justify-center rounded-box font-semibold\"\r\n                            style={slideStyle(color)}\r\n                        >\r\n                            {color}\r\n                        </CarouselItem>\r\n                    ))}\r\n                </Carousel>\r\n            </Section>\r\n\r\n            <Section title=\"Numbered indicators, no loop\">\r\n                <Carousel indicators=\"numbers\" className=\"max-w-lg gap-4 rounded-box\">\r\n                    {SLIDES.slice(0, 3).map((color) => (\r\n                        <CarouselItem\r\n                            key={color}\r\n                            className=\"flex h-32 w-full shrink-0 items-center justify-center rounded-box font-semibold\"\r\n                            style={slideStyle(color)}\r\n                        >\r\n                            {color}\r\n                        </CarouselItem>\r\n                    ))}\r\n                </Carousel>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Chat",
     "package": "@wizeworks/silicaui-react",
     "category": "Data display",
     "sourceFile": "silicaui-react/src/chat.tsx",
-    "description": "Silica Chat — a message row: avatar, header, bubble, footer. <Chat side=\"start\"> <ChatImage><Avatar>OW</Avatar></ChatImage> <ChatHeader>Obi-Wan <time className=\"opacity-60\">12:45</time></ChatHeader> <ChatBubble>You were the chosen one!</ChatBubble> <ChatFooter>Seen</ChatFooter> </Chat> <Chat side=\"end\"> <ChatBubble color=\"primary\">I hate you!</ChatBubble> </Chat>",
+    "description": "Silica Chat — a message row: avatar, header, bubble, footer. <Chat side=\"start\"> <ChatImage><Avatar>OW</Avatar></ChatImage> <ChatHeader>Obi-Wan <time>12:45</time></ChatHeader> <ChatBubble>You were the chosen one!</ChatBubble> <ChatFooter>Seen</ChatFooter> </Chat> <Chat side=\"end\"> <ChatBubble color=\"primary\">I hate you!</ChatBubble> </Chat>",
     "props": [
       {
         "name": "ChatProps",
@@ -453,7 +459,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import {\r\n    Chat,\r\n    ChatImage,\r\n    ChatHeader,\r\n    ChatBubble,\r\n    ChatFooter,\r\n    Avatar,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\nimport { COLORS } from \"../lib/data\";\r\n\r\nexport function ChatDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Bubble colors\">\r\n                <div className=\"flex flex-col gap-3\">\r\n                    {COLORS.slice(0, 6).map((color) => (\r\n                        <Chat key={color} side=\"end\">\r\n                            <ChatBubble color={color}>{color} bubble</ChatBubble>\r\n                        </Chat>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · a short conversation\">\r\n                <div className=\"flex max-w-md flex-col gap-1\">\r\n                    <Chat side=\"start\">\r\n                        <ChatImage>\r\n                            <Avatar color=\"neutral\" alt=\"Obi-Wan\">\r\n                                OW\r\n                            </Avatar>\r\n                        </ChatImage>\r\n                        <ChatHeader>\r\n                            Obi-Wan <time className=\"opacity-60\">12:45</time>\r\n                        </ChatHeader>\r\n                        <ChatBubble>You were the chosen one!</ChatBubble>\r\n                    </Chat>\r\n                    <Chat side=\"start\">\r\n                        <ChatImage>\r\n                            <Avatar color=\"neutral\" alt=\"Obi-Wan\">\r\n                                OW\r\n                            </Avatar>\r\n                        </ChatImage>\r\n                        <ChatBubble>\r\n                            It was said that you would destroy the Sith, not join them.\r\n                        </ChatBubble>\r\n                    </Chat>\r\n                    <Chat side=\"end\">\r\n                        <ChatBubble color=\"primary\">I hate you!</ChatBubble>\r\n                        <ChatFooter>Delivered</ChatFooter>\r\n                    </Chat>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "ChatComposer",
@@ -1144,6 +1150,44 @@
     ],
     "usageExample": null
   },
+  {
+    "name": "ClickableCard",
+    "package": "@wizeworks/silicaui-react",
+    "category": "Data display",
+    "sourceFile": "silicaui-react/src/card.tsx",
+    "description": "A `Card` that's a whole clickable surface — a `<button>` by default, or any element via `render`.",
+    "props": [
+      {
+        "name": "CardProps",
+        "members": []
+      },
+      {
+        "name": "ClickableCardProps",
+        "extends": "extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\">",
+        "members": [
+          {
+            "name": "render",
+            "optional": true,
+            "type": "React.ReactElement",
+            "doc": "Render as a different element (e.g. an anchor) while keeping Card's classes and interaction styles. Mirrors Base UI's `render` composition. <ClickableCard render={<a href=\"/projects/silica\" />}>…</ClickableCard> CLIENT COMPONENTS ONLY — from a React Server Component the element loses its props crossing the `\"use client\"` boundary. Style the element directly instead: `clickableCardClasses()` from `@wizeworks/silicaui-react/server`."
+          }
+        ]
+      },
+      {
+        "name": "SelectableCardProps",
+        "extends": "extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\">",
+        "members": [
+          {
+            "name": "type",
+            "optional": true,
+            "type": "\"radio\" | \"checkbox\"",
+            "doc": "`\"radio\"` for a single-select group (shared `name`), `\"checkbox\"` for multi-select. Default `\"radio\"`."
+          }
+        ]
+      }
+    ],
+    "usageExample": null
+  },
   {
     "name": "Collapse",
     "package": "@wizeworks/silicaui-react",
@@ -1164,7 +1208,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Collapse, CollapseTitle, CollapseContent } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nconst FAQS = [\r\n    { q: \"Can I change plans later?\", a: \"Yes — upgrade or downgrade anytime from Settings.\" },\r\n    { q: \"Do you offer refunds?\", a: \"Full refund within 14 days, no questions asked.\" },\r\n    { q: \"Is there a free trial?\", a: \"14 days on every paid plan, no card required.\" },\r\n];\r\n\r\nexport function CollapseDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · FAQ (exclusive — one open at a time)\">\r\n                <div className=\"flex max-w-md flex-col gap-2\">\r\n                    {FAQS.map((f, i) => (\r\n                        <Collapse key={f.q} name=\"faq\" open={i === 0}>\r\n                            <CollapseTitle>{f.q}</CollapseTitle>\r\n                            <CollapseContent>{f.a}</CollapseContent>\r\n                        </Collapse>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Ghost (borderless)\">\r\n                <Collapse ghost className=\"max-w-md\">\r\n                    <CollapseTitle>Shipping details</CollapseTitle>\r\n                    <CollapseContent>Ships in 2–3 business days.</CollapseContent>\r\n                </Collapse>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Countdown",
@@ -1204,7 +1248,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Countdown } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function CountdownDemo() {\r\n    const [target] = useState(() => Date.now() + 90 * 1000);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · launch countdown (90s demo)\">\r\n                <Countdown to={target} />\r\n            </Section>\r\n\r\n            <Section title=\"Selected units, plain style\">\r\n                <Countdown to={target} units={[\"minutes\", \"seconds\"]} plain />\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Diff",
@@ -1250,7 +1294,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Diff } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nfunction Panel({ label, color }: { label: string; color: string }) {\r\n    return (\r\n        <div\r\n            className=\"flex h-full w-full items-center justify-center text-lg font-semibold text-white\"\r\n            style={{ backgroundColor: color }}\r\n        >\r\n            {label}\r\n        </div>\r\n    );\r\n}\r\n\r\nexport function DiffDemo() {\r\n    const [pos, setPos] = useState(50);\r\n\r\n    return (\r\n        <Section title=\"Real use · draggable before/after comparison\">\r\n            <Diff\r\n                className=\"max-w-lg\"\r\n                style={{ aspectRatio: \"16 / 9\" }}\r\n                position={pos}\r\n                onPositionChange={setPos}\r\n                before={<Panel label=\"Before\" color=\"#64748b\" />}\r\n                after={<Panel label=\"After\" color=\"#6366f1\" />}\r\n            />\r\n            <p className=\"pt-2 text-xs opacity-60\">\r\n                Split at {Math.round(pos)}% — drag the handle or use ←/→.\r\n            </p>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "Kbd",
@@ -1272,14 +1316,14 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Kbd } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\nimport { SIZES } from \"../lib/data\";\r\n\r\nexport function KbdDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Sizes\">\r\n                <Row>\r\n                    {SIZES.map((size) => (\r\n                        <Kbd key={size} size={size}>\r\n                            {size}\r\n                        </Kbd>\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · shortcuts inline\">\r\n                <div className=\"flex flex-col gap-2 text-sm\">\r\n                    <p>\r\n                        Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open the command palette.\r\n                    </p>\r\n                    <p>\r\n                        <Kbd>Ctrl</Kbd> + <Kbd>Shift</Kbd> + <Kbd>P</Kbd> on Windows.\r\n                    </p>\r\n                    <p>\r\n                        <Kbd>Esc</Kbd> to close any dialog.\r\n                    </p>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "List",
     "package": "@wizeworks/silicaui-react",
     "category": "Data display",
     "sourceFile": "silicaui-react/src/list.tsx",
-    "description": "Silica List — a vertical list of rows. <List hover> <ListTitle>Team</ListTitle> <ListRow> <Avatar size=\"sm\">AL</Avatar> <ListColGrow> <div className=\"font-medium\">Ada Lovelace</div> <div className=\"text-sm opacity-60\">Owner</div> </ListColGrow> <Button size=\"sm\" variant=\"ghost\">Manage</Button> </ListRow> </List>",
+    "description": "Silica List — a vertical list of rows. <List hover> <ListTitle>Team</ListTitle> <ListRow> <Avatar size=\"sm\">AL</Avatar> <ListColGrow> <div className=\"font-medium\">Ada Lovelace</div> <div className=\"text-sm\">Owner</div> </ListColGrow> <Button size=\"sm\" variant=\"ghost\">Manage</Button> </ListRow> </List>",
     "props": [
       {
         "name": "ListProps",
@@ -1306,7 +1350,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { List, ListRow, ListColGrow, ListTitle, Avatar, Button } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nconst MEMBERS = [\r\n    { initials: \"AL\", name: \"Ada Lovelace\", role: \"Owner\" },\r\n    { initials: \"GH\", name: \"Grace Hopper\", role: \"Admin\" },\r\n    { initials: \"AT\", name: \"Alan Turing\", role: \"Member\" },\r\n];\r\n\r\nexport function ListDemo() {\r\n    return (\r\n        <Section title=\"Real use · team member list\">\r\n            <List hover className=\"max-w-md\">\r\n                <ListTitle>Team</ListTitle>\r\n                {MEMBERS.map((m) => (\r\n                    <ListRow key={m.initials}>\r\n                        <Avatar color=\"primary\" size=\"sm\" alt={m.name}>\r\n                            {m.initials}\r\n                        </Avatar>\r\n                        <ListColGrow>\r\n                            <div className=\"font-medium\">{m.name}</div>\r\n                            <div className=\"text-sm opacity-60\">{m.role}</div>\r\n                        </ListColGrow>\r\n                        <Button size=\"sm\" variant=\"ghost\" color=\"neutral\">\r\n                            Manage\r\n                        </Button>\r\n                    </ListRow>\r\n                ))}\r\n            </List>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "MetadataList",
@@ -1357,7 +1401,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { MetadataList, MetadataItem, Badge, Avatar } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function MetadataListDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · project detail panel\">\r\n                <div className=\"max-w-sm rounded-box border border-base-300 p-4\">\r\n                    <MetadataList>\r\n                        <MetadataItem label=\"Status\">\r\n                            <Badge color=\"success\" variant=\"soft\">\r\n                                Active\r\n                            </Badge>\r\n                        </MetadataItem>\r\n                        <MetadataItem label=\"Owner\">\r\n                            <div className=\"flex items-center justify-end gap-2\">\r\n                                <Avatar size=\"xs\" alt=\"Ada Lovelace\" color=\"primary\">\r\n                                    AL\r\n                                </Avatar>\r\n                                Ada Lovelace\r\n                            </div>\r\n                        </MetadataItem>\r\n                        <MetadataItem label=\"Created\">Jan 1, 2026</MetadataItem>\r\n                        <MetadataItem label=\"Last updated\">2 hours ago</MetadataItem>\r\n                        <MetadataItem label=\"Repository\">wizeworks/silicaui</MetadataItem>\r\n                    </MetadataList>\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"layout=&quot;stack&quot; · label above value, for narrow cards\">\r\n                <Row>\r\n                    <div className=\"w-56 rounded-box border border-base-300 p-4\">\r\n                        <MetadataList layout=\"stack\">\r\n                            <MetadataItem label=\"Plan\">Pro</MetadataItem>\r\n                            <MetadataItem label=\"Seats\">12 / 20</MetadataItem>\r\n                            <MetadataItem label=\"Renews\">Aug 1, 2026</MetadataItem>\r\n                        </MetadataList>\r\n                    </div>\r\n                </Row>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Meter",
@@ -1421,7 +1465,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Meter } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\nimport { COLORS, SIZES } from \"../lib/data\";\r\n\r\nexport function MeterDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <div className=\"grid max-w-md gap-4\">\r\n                    {COLORS.slice(0, 6).map((color) => (\r\n                        <Meter key={color} color={color} value={65} label={color} showValue />\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <div className=\"flex max-w-md flex-col gap-3\">\r\n                    {SIZES.map((size) => (\r\n                        <Meter key={size} color=\"primary\" size={size} value={60} />\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · gauges\">\r\n                <div className=\"grid max-w-md gap-4\">\r\n                    <Meter color=\"warning\" value={92} label=\"Storage used\" showValue />\r\n                    <Meter color=\"success\" value={78} label=\"Battery\" showValue />\r\n                    <Meter color=\"error\" value={12} min={0} max={100} label=\"Credit score risk\" showValue />\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "MockupBrowser",
@@ -1768,6 +1812,44 @@
         ]
       }
     ],
+    "usageExample": "import { PreviewCard, Link, Avatar } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function PreviewCardDemo() {\r\n    return (\r\n        <Section title=\"Real use · hover a link to preview the profile\">\r\n            <p className=\"max-w-md text-sm\">\r\n                Reviewed by{\" \"}\r\n                <PreviewCard\r\n                    content={\r\n                        <div className=\"flex items-center gap-3\">\r\n                            <Avatar color=\"primary\" alt=\"Ada Lovelace\">\r\n                                AL\r\n                            </Avatar>\r\n                            <div>\r\n                                <div className=\"font-medium\">Ada Lovelace</div>\r\n                                <div className=\"text-xs opacity-60\">\r\n                                    Founding engineer · @ada\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    }\r\n                    arrow\r\n                >\r\n                    <Link href=\"#\" color=\"primary\">\r\n                        @ada\r\n                    </Link>\r\n                </PreviewCard>{\" \"}\r\n                on the pull request.\r\n            </p>\r\n        </Section>\r\n    );\r\n}"
+  },
+  {
+    "name": "SelectableCard",
+    "package": "@wizeworks/silicaui-react",
+    "category": "Data display",
+    "sourceFile": "silicaui-react/src/card.tsx",
+    "description": "A `Card` that's a selectable option tile — a real `<input type=\"radio\">` / `<input type=\"checkbox\">`, visually hidden, wrapped in a `<label>` so the whole card is the click target. Selection reads as a border + ring in the theme's primary color — no checkbox/radio glyph. Group several with the same `name` for single-select; use `type=\"checkbox\"` for multi-select. <SelectableCard name=\"plan\" value=\"pro\" defaultChecked> <CardTitle>Pro</CardTitle> <p>For growing teams.</p> </SelectableCard>",
+    "props": [
+      {
+        "name": "CardProps",
+        "members": []
+      },
+      {
+        "name": "ClickableCardProps",
+        "extends": "extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\">",
+        "members": [
+          {
+            "name": "render",
+            "optional": true,
+            "type": "React.ReactElement",
+            "doc": "Render as a different element (e.g. an anchor) while keeping Card's classes and interaction styles. Mirrors Base UI's `render` composition. <ClickableCard render={<a href=\"/projects/silica\" />}>…</ClickableCard> CLIENT COMPONENTS ONLY — from a React Server Component the element loses its props crossing the `\"use client\"` boundary. Style the element directly instead: `clickableCardClasses()` from `@wizeworks/silicaui-react/server`."
+          }
+        ]
+      },
+      {
+        "name": "SelectableCardProps",
+        "extends": "extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\">",
+        "members": [
+          {
+            "name": "type",
+            "optional": true,
+            "type": "\"radio\" | \"checkbox\"",
+            "doc": "`\"radio\"` for a single-select group (shared `name`), `\"checkbox\"` for multi-select. Default `\"radio\"`."
+          }
+        ]
+      }
+    ],
     "usageExample": null
   },
   {
@@ -1795,7 +1877,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import {\r\n    Stats,\r\n    Stat,\r\n    StatTitle,\r\n    StatValue,\r\n    StatDesc,\r\n    StatFigure,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\nimport { UserIcon } from \"../lib/icons\";\r\n\r\nexport function StatDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · dashboard KPIs\">\r\n                <Stats>\r\n                    <Stat>\r\n                        <StatFigure>\r\n                            <UserIcon />\r\n                        </StatFigure>\r\n                        <StatTitle>New users</StatTitle>\r\n                        <StatValue>1,204</StatValue>\r\n                        <StatDesc>↗︎ 3.2% this month</StatDesc>\r\n                    </Stat>\r\n                    <Stat>\r\n                        <StatTitle>Revenue</StatTitle>\r\n                        <StatValue>$14,300</StatValue>\r\n                        <StatDesc>↗︎ 12.4% this month</StatDesc>\r\n                    </Stat>\r\n                    <Stat>\r\n                        <StatTitle>Churn</StatTitle>\r\n                        <StatValue>1.8%</StatValue>\r\n                        <StatDesc>↘︎ 0.6% this month</StatDesc>\r\n                    </Stat>\r\n                </Stats>\r\n            </Section>\r\n\r\n            <Section title=\"Vertical layout\">\r\n                <Stats vertical className=\"max-w-xs\">\r\n                    <Stat>\r\n                        <StatTitle>Storage used</StatTitle>\r\n                        <StatValue>72 GB</StatValue>\r\n                        <StatDesc>of 100 GB</StatDesc>\r\n                    </Stat>\r\n                    <Stat>\r\n                        <StatTitle>Bandwidth</StatTitle>\r\n                        <StatValue>1.2 TB</StatValue>\r\n                        <StatDesc>this billing cycle</StatDesc>\r\n                    </Stat>\r\n                </Stats>\r\n            </Section>\r\n\r\n            <Section title=\"Glass · KPI band over a colored hero\">\r\n                <div\r\n                    className=\"rounded-box p-8\"\r\n                    style={{\r\n                        backgroundImage:\r\n                            \"linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))\",\r\n                    }}\r\n                >\r\n                    <Stats className=\"glass\">\r\n                        <Stat>\r\n                            <StatFigure>\r\n                                <UserIcon />\r\n                            </StatFigure>\r\n                            <StatTitle>New users</StatTitle>\r\n                            <StatValue>1,204</StatValue>\r\n                            <StatDesc>↗︎ 3.2% this month</StatDesc>\r\n                        </Stat>\r\n                        <Stat>\r\n                            <StatTitle>Revenue</StatTitle>\r\n                            <StatValue>$14,300</StatValue>\r\n                            <StatDesc>↗︎ 12.4% this month</StatDesc>\r\n                        </Stat>\r\n                        <Stat>\r\n                            <StatTitle>Churn</StatTitle>\r\n                            <StatValue>1.8%</StatValue>\r\n                            <StatDesc>↘︎ 0.6% this month</StatDesc>\r\n                        </Stat>\r\n                    </Stats>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Table",
@@ -1835,7 +1917,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Table, Badge } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nconst ROWS = [\r\n    { name: \"Ada Lovelace\", role: \"Engineer\", status: \"Active\" as const },\r\n    { name: \"Grace Hopper\", role: \"Admin\", status: \"Active\" as const },\r\n    { name: \"Alan Turing\", role: \"Engineer\", status: \"Away\" as const },\r\n];\r\n\r\nexport function TableDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · team table\">\r\n                <Table zebra hover className=\"max-w-xl\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>Name</th>\r\n                            <th>Role</th>\r\n                            <th>Status</th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        {ROWS.map((r) => (\r\n                            <tr key={r.name}>\r\n                                <td>{r.name}</td>\r\n                                <td>{r.role}</td>\r\n                                <td>\r\n                                    <Badge\r\n                                        color={r.status === \"Active\" ? \"success\" : \"warning\"}\r\n                                        variant=\"soft\"\r\n                                    >\r\n                                        {r.status}\r\n                                    </Badge>\r\n                                </td>\r\n                            </tr>\r\n                        ))}\r\n                    </tbody>\r\n                </Table>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <div className=\"flex max-w-xl flex-col gap-4\">\r\n                    {([\"xs\", \"sm\", \"md\", \"lg\"] as const).map((size) => (\r\n                        <Table key={size} size={size} zebra>\r\n                            <thead>\r\n                                <tr>\r\n                                    <th>Size</th>\r\n                                    <th>Value</th>\r\n                                </tr>\r\n                            </thead>\r\n                            <tbody>\r\n                                <tr>\r\n                                    <td>{size}</td>\r\n                                    <td>Row height scales with density</td>\r\n                                </tr>\r\n                            </tbody>\r\n                        </Table>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Timeline",
@@ -1881,7 +1963,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import {\r\n    Timeline,\r\n    TimelineItem,\r\n    TimelineStart,\r\n    TimelineMiddle,\r\n    TimelineEnd,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function TimelineDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · company milestones\">\r\n                <Timeline className=\"max-w-md\">\r\n                    <TimelineItem>\r\n                        <TimelineStart>2021</TimelineStart>\r\n                        <TimelineMiddle />\r\n                        <TimelineEnd box>Founded</TimelineEnd>\r\n                    </TimelineItem>\r\n                    <TimelineItem>\r\n                        <TimelineStart>2023</TimelineStart>\r\n                        <TimelineMiddle />\r\n                        <TimelineEnd box>Seed round closed</TimelineEnd>\r\n                    </TimelineItem>\r\n                    <TimelineItem>\r\n                        <TimelineStart>2026</TimelineStart>\r\n                        <TimelineMiddle />\r\n                        <TimelineEnd box>Shipped 1.0</TimelineEnd>\r\n                    </TimelineItem>\r\n                </Timeline>\r\n            </Section>\r\n\r\n            <Section title=\"Horizontal\">\r\n                <Timeline orientation=\"horizontal\" className=\"max-w-lg\">\r\n                    <TimelineItem>\r\n                        <TimelineStart>Cart</TimelineStart>\r\n                        <TimelineMiddle />\r\n                    </TimelineItem>\r\n                    <TimelineItem>\r\n                        <TimelineStart>Shipping</TimelineStart>\r\n                        <TimelineMiddle />\r\n                    </TimelineItem>\r\n                    <TimelineItem>\r\n                        <TimelineStart>Payment</TimelineStart>\r\n                        <TimelineMiddle />\r\n                    </TimelineItem>\r\n                </Timeline>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Timestamp",
@@ -1921,7 +2003,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Timestamp } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Stack } from \"../lib/Section\";\r\n\r\nconst now = Date.now();\r\nconst MIN = 60_000;\r\nconst HOUR = 60 * MIN;\r\nconst DAY = 24 * HOUR;\r\n\r\nexport function TimestampDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Auto (relative within 24h, absolute beyond)\">\r\n                <Stack>\r\n                    <p>\r\n                        Just now — <Timestamp value={now - 30_000} />\r\n                    </p>\r\n                    <p>\r\n                        5 minutes ago — <Timestamp value={now - 5 * MIN} />\r\n                    </p>\r\n                    <p>\r\n                        3 hours ago — <Timestamp value={now - 3 * HOUR} />\r\n                    </p>\r\n                    <p>\r\n                        2 days ago — <Timestamp value={now - 2 * DAY} />\r\n                    </p>\r\n                    <p>\r\n                        2 months ago — <Timestamp value={now - 60 * DAY} />\r\n                    </p>\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Forced format\">\r\n                <Stack>\r\n                    <p>\r\n                        Relative — <Timestamp value={now - 3 * DAY} format=\"relative\" />\r\n                    </p>\r\n                    <p>\r\n                        Absolute — <Timestamp value={now - 3 * DAY} format=\"absolute\" />\r\n                    </p>\r\n                </Stack>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Autocomplete",
@@ -2197,18 +2279,18 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport {\r\n    Calendar,\r\n    DatePicker,\r\n    DateRangePicker,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport type { DateRange } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\nimport { COLORS } from \"../lib/data\";\r\n\r\nexport function CalendarDemo() {\r\n    const [date, setDate] = useState<Date | null>(new Date(2026, 6, 14));\r\n    const [pickedDate, setPickedDate] = useState<Date | null>(null);\r\n    const [range, setRange] = useState<DateRange>({ start: null, end: null });\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors (inline)\">\r\n                <Row>\r\n                    {COLORS.slice(0, 3).map((color) => (\r\n                        <Calendar\r\n                            key={color}\r\n                            color={color}\r\n                            value={date}\r\n                            onValueChange={(v) => setDate(v as Date)}\r\n                        />\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · date + range pickers\">\r\n                <Row>\r\n                    <DatePicker\r\n                        color=\"primary\"\r\n                        value={pickedDate}\r\n                        onValueChange={setPickedDate}\r\n                        placeholder=\"Pick a date\"\r\n                    />\r\n                    <DateRangePicker\r\n                        color=\"primary\"\r\n                        value={range}\r\n                        onValueChange={setRange}\r\n                        placeholder=\"Pick a range\"\r\n                    />\r\n                </Row>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Checkbox",
     "package": "@wizeworks/silicaui-react",
     "category": "Data input",
     "sourceFile": "silicaui-react/src/checkbox.tsx",
-    "description": "Silica Checkbox — a restyled native `<input type=\"checkbox\">`. All native attributes (`checked`, `defaultChecked`, `onChange`, `disabled`, …) pass through. Pair it with your own `<label>` for a clickable caption.",
+    "description": "Silica Checkbox — a restyled native `<input type=\"checkbox\">`. All native attributes (`checked`, `defaultChecked`, `onChange`, `disabled`, …) pass through. <Checkbox /> // bare; pair with your own <label htmlFor> <Checkbox>Run tests</Checkbox> // captioned; the whole row is clickable",
     "props": [
       {
         "name": "CheckboxProps",
-        "extends": "extends Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    \"size\" | \"color\" | \"type\"\n  >",
+        "extends": "extends Omit<\r\n    React.InputHTMLAttributes<HTMLInputElement>,\r\n    \"size\" | \"color\" | \"type\"\r\n  >",
         "members": [
           {
             "name": "color",
@@ -2221,11 +2303,17 @@
             "optional": true,
             "type": "SilicaSize",
             "doc": "Default `md`."
+          },
+          {
+            "name": "children",
+            "optional": true,
+            "type": "React.ReactNode",
+            "doc": "Caption. Wraps the control in a `<label>` so the text is a click target."
           }
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Checkbox } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\nimport { ColorVariantSizeGrid } from \"../lib/ColorGrid\";\r\n\r\nconst TASKS = [\"Write the announcement\", \"Add screenshots\", \"Ping the design team\"];\r\n\r\nexport function CheckboxDemo() {\r\n    const [done, setDone] = useState<Record<string, boolean>>({\r\n        \"Write the announcement\": true,\r\n    });\r\n\r\n    return (\r\n        <>\r\n            <ColorVariantSizeGrid\r\n                Component={Checkbox}\r\n                render={({ color, size }) => (\r\n                    <label className=\"flex items-center gap-2 text-sm\">\r\n                        <Checkbox color={color} size={size} defaultChecked />\r\n                        {color ?? size}\r\n                    </label>\r\n                )}\r\n            />\r\n\r\n            <Section title=\"Real use · launch checklist\">\r\n                <div className=\"flex flex-col gap-2\">\r\n                    {TASKS.map((task) => (\r\n                        <label key={task} className=\"flex items-center gap-2 text-sm\">\r\n                            <Checkbox\r\n                                color=\"primary\"\r\n                                checked={!!done[task]}\r\n                                onChange={(e) =>\r\n                                    setDone((p) => ({ ...p, [task]: e.target.checked }))\r\n                                }\r\n                            />\r\n                            <span className={done[task] ? \"line-through opacity-50\" : \"\"}>\r\n                                {task}\r\n                            </span>\r\n                        </label>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "CheckboxGroup",
@@ -2313,6 +2401,94 @@
         ]
       }
     ],
+    "usageExample": "import { useState } from \"react\";\r\nimport { CheckboxGroup, CheckboxOption } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function CheckboxGroupDemo() {\r\n    const [channels, setChannels] = useState<string[]>([\"email\", \"push\"]);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · notification channels\">\r\n                <CheckboxGroup value={channels} onValueChange={setChannels} color=\"primary\">\r\n                    <CheckboxOption value=\"email\">Email</CheckboxOption>\r\n                    <CheckboxOption value=\"push\">Push</CheckboxOption>\r\n                    <CheckboxOption value=\"sms\">SMS</CheckboxOption>\r\n                </CheckboxGroup>\r\n                <p className=\"pt-2 text-xs opacity-60\">\r\n                    Selected: {channels.join(\", \") || \"none\"}\r\n                </p>\r\n            </Section>\r\n\r\n            <Section title=\"Horizontal\">\r\n                <CheckboxGroup defaultValue={[\"mon\", \"wed\", \"fri\"]} orientation=\"horizontal\" color=\"primary\">\r\n                    <CheckboxOption value=\"mon\">Mon</CheckboxOption>\r\n                    <CheckboxOption value=\"wed\">Wed</CheckboxOption>\r\n                    <CheckboxOption value=\"fri\">Fri</CheckboxOption>\r\n                </CheckboxGroup>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
+  },
+  {
+    "name": "CheckboxOption",
+    "package": "@wizeworks/silicaui-react",
+    "category": "Data input",
+    "sourceFile": "silicaui-react/src/checkbox-group.tsx",
+    "description": "One labeled checkbox within a CheckboxGroup.",
+    "props": [
+      {
+        "name": "CheckboxGroupProps",
+        "extends": "extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\">",
+        "members": [
+          {
+            "name": "value",
+            "optional": true,
+            "type": "string[]",
+            "doc": "Controlled array of checked values."
+          },
+          {
+            "name": "defaultValue",
+            "optional": true,
+            "type": "string[]",
+            "doc": "Uncontrolled initial checked values."
+          },
+          {
+            "name": "onValueChange",
+            "optional": true,
+            "type": "(value: string[]) => void",
+            "doc": "Fires with the new array of checked values."
+          },
+          {
+            "name": "orientation",
+            "optional": true,
+            "type": "CheckboxGroupOrientation",
+            "doc": "Stack (`vertical`, default) or row (`horizontal`)."
+          },
+          {
+            "name": "disabled",
+            "optional": true,
+            "type": "boolean",
+            "doc": "Disable every option."
+          },
+          {
+            "name": "color",
+            "optional": true,
+            "type": "SilicaColor",
+            "doc": "Default accent color for the options."
+          },
+          {
+            "name": "size",
+            "optional": true,
+            "type": "SilicaSize",
+            "doc": "Default size for the options."
+          }
+        ]
+      },
+      {
+        "name": "CheckboxOptionProps",
+        "extends": "extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, \"onChange\">",
+        "members": [
+          {
+            "name": "value",
+            "optional": false,
+            "type": "string",
+            "doc": "This option's value."
+          },
+          {
+            "name": "disabled",
+            "optional": true,
+            "type": "boolean",
+            "doc": ""
+          },
+          {
+            "name": "color",
+            "optional": true,
+            "type": "SilicaColor",
+            "doc": ""
+          },
+          {
+            "name": "size",
+            "optional": true,
+            "type": "SilicaSize",
+            "doc": ""
+          }
+        ]
+      }
+    ],
     "usageExample": null
   },
   {
@@ -2371,7 +2547,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { ColorPicker, Button } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function ColorPickerDemo() {\r\n    const [brand, setBrand] = useState(\"oklch(0.62 0.19 29)\");\r\n    const [accent, setAccent] = useState(\"#22c55e\");\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · brand color picker\">\r\n                <div className=\"flex flex-col items-start gap-3\">\r\n                    <ColorPicker value={brand} onValueChange={(v) => setBrand(v)} />\r\n                    <Button style={{ backgroundColor: brand, borderColor: brand, color: \"#fff\" }}>\r\n                        Preview button\r\n                    </Button>\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"variant=&quot;swatch&quot; · compact chip, opens the same panel in a popover\">\r\n                <Row>\r\n                    <ColorPicker\r\n                        variant=\"swatch\"\r\n                        value={accent}\r\n                        format=\"hex\"\r\n                        onValueChange={(v) => setAccent(v)}\r\n                    />\r\n                    <span\r\n                        className=\"text-sm\"\r\n                        style={{ color: \"var(--color-base-content)\" }}\r\n                    >\r\n                        {accent}\r\n                    </span>\r\n                    <ColorPicker variant=\"swatch\" disabled defaultValue=\"oklch(0.55 0.2 280)\" />\r\n                </Row>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Combobox",
@@ -2548,7 +2724,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Combobox } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nconst US_STATES = [\r\n    \"Alabama\", \"Alaska\", \"Arizona\", \"Arkansas\", \"California\", \"Colorado\",\r\n    \"Connecticut\", \"Delaware\", \"Florida\", \"Georgia\", \"Hawaii\", \"Idaho\",\r\n    \"Illinois\", \"Indiana\", \"Iowa\", \"Kansas\", \"Kentucky\", \"Louisiana\",\r\n];\r\n\r\nconst DOC_SUGGESTIONS = [\r\n    \"Getting started\", \"Installation\", \"Theming\", \"Color tokens\",\r\n    \"Dark mode\", \"Components\", \"Button\", \"Select\", \"Combobox\",\r\n    \"Form validation\", \"Accessibility\", \"Migration guide\",\r\n];\r\n\r\nexport function ComboboxDemo() {\r\n    const [usState, setUsState] = useState<string | null>(null);\r\n    const [docQuery, setDocQuery] = useState(\"\");\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · searchable state picker\">\r\n                <Combobox\r\n                    items={US_STATES}\r\n                    value={usState}\r\n                    onValueChange={(v) => setUsState(v as string | null)}\r\n                    placeholder=\"Search states…\"\r\n                    color=\"primary\"\r\n                />\r\n            </Section>\r\n\r\n            <Section title=\"Docs search (no clear button)\">\r\n                <Combobox\r\n                    items={DOC_SUGGESTIONS}\r\n                    value={docQuery || null}\r\n                    onValueChange={(v) => setDocQuery((v as string) ?? \"\")}\r\n                    placeholder=\"Search docs…\"\r\n                    clearable={false}\r\n                />\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Row>\r\n                    {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\r\n                        <Combobox key={size} items={[\"A\", \"B\", \"C\"]} size={size} placeholder={size} />\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "DateInput",
@@ -2706,7 +2882,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { DateInput, DateRangeInput } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function DateInputDemo() {\r\n    const [date, setDate] = useState<Date | null>(new Date(2026, 6, 8));\r\n    const [range, setRange] = useState<{ start: Date | null; end: Date | null }>({\r\n        start: null,\r\n        end: null,\r\n    });\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · typeable date field (type digits or paste)\">\r\n                <DateInput value={date} onValueChange={setDate} color=\"primary\" />\r\n                <p className=\"mt-2 text-sm opacity-70\">\r\n                    {date ? date.toDateString() : \"No date\"}\r\n                </p>\r\n            </Section>\r\n\r\n            <Section title=\"Locale-driven segment order (en-US vs en-GB vs de-DE)\">\r\n                <Row>\r\n                    <DateInput locale=\"en-US\" defaultValue={new Date(2026, 6, 8)} />\r\n                    <DateInput locale=\"en-GB\" defaultValue={new Date(2026, 6, 8)} />\r\n                    <DateInput locale=\"de-DE\" defaultValue={new Date(2026, 6, 8)} />\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"DateRangeInput\">\r\n                <DateRangeInput value={range} onValueChange={setRange} />\r\n                <p className=\"mt-2 text-sm opacity-70\">\r\n                    {range.start ? range.start.toDateString() : \"…\"} —{\" \"}\r\n                    {range.end ? range.end.toDateString() : \"…\"}\r\n                </p>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes / disabled\">\r\n                <Row>\r\n                    <DateInput size=\"sm\" defaultValue={new Date(2026, 6, 8)} />\r\n                    <DateInput size=\"md\" defaultValue={new Date(2026, 6, 8)} />\r\n                    <DateInput size=\"lg\" defaultValue={new Date(2026, 6, 8)} />\r\n                    <DateInput disabled defaultValue={new Date(2026, 6, 8)} />\r\n                </Row>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "DatePicker",
@@ -3133,20 +3309,20 @@
     "usageExample": null
   },
   {
-    "name": "DateTimeInput",
+    "name": "DateRangePicker",
     "package": "@wizeworks/silicaui-react",
     "category": "Data input",
-    "sourceFile": "silicaui-react/src/date-time-input.tsx",
-    "description": "Silica DateTimeInput — `DateInput` + `TimeInput` fused into one segmented field sharing a single `Date` value, for the common \"when exactly\" case (appointments, deadlines, scheduled posts) without stitching two widgets together yourself. <DateTimeInput value={when} onValueChange={setWhen} /> <DateTimeInput hourCycle={24} showSeconds min={new Date()} />",
+    "sourceFile": "silicaui-react/src/date-picker.tsx",
+    "description": "Silica DateRangePicker — an input that opens a two-month `Calendar` to pick a start/end range. Closes once both ends are chosen. <DateRangePicker value={range} onValueChange={setRange} />",
     "props": [
       {
-        "name": "DateTimeInputProps",
+        "name": "DatePickerProps",
         "members": [
           {
             "name": "value",
             "optional": true,
             "type": "Date | null",
-            "doc": "Controlled value — a full `Date` (date + time together). `null` clears the field."
+            "doc": ""
           },
           {
             "name": "defaultValue",
@@ -3158,30 +3334,42 @@
             "name": "onValueChange",
             "optional": true,
             "type": "(value: Date | null) => void",
-            "doc": "Fires once every segment (date + time, + AM/PM in 12h mode) is filled; `null` while incomplete/cleared."
+            "doc": ""
           },
           {
-            "name": "min",
+            "name": "placeholder",
             "optional": true,
-            "type": "Date",
+            "type": "React.ReactNode",
             "doc": ""
           },
           {
-            "name": "max",
+            "name": "disabled",
+            "optional": true,
+            "type": "boolean",
+            "doc": ""
+          },
+          {
+            "name": "weekStartsOn",
+            "optional": true,
+            "type": "Weekday",
+            "doc": ""
+          },
+          {
+            "name": "min",
             "optional": true,
             "type": "Date",
             "doc": ""
           },
           {
-            "name": "hourCycle",
+            "name": "max",
             "optional": true,
-            "type": "12 | 24",
-            "doc": "`12` or `24`. Default: derived from `locale`."
+            "type": "Date",
+            "doc": ""
           },
           {
-            "name": "showSeconds",
+            "name": "isDateDisabled",
             "optional": true,
-            "type": "boolean",
+            "type": "(date: Date) => boolean",
             "doc": ""
           },
           {
@@ -3191,46 +3379,300 @@
             "doc": ""
           },
           {
-            "name": "disabled",
+            "name": "formatOptions",
             "optional": true,
-            "type": "boolean",
-            "doc": ""
+            "type": "Intl.DateTimeFormatOptions",
+            "doc": "Intl options for the trigger label (default `{ dateStyle: \"medium\" }`)."
           },
           {
             "name": "color",
             "optional": true,
-            "type": "DateTimeInputColor",
+            "type": "DatePickerColor",
             "doc": ""
           },
           {
             "name": "size",
             "optional": true,
-            "type": "DateTimeInputSize",
+            "type": "DatePickerSize",
             "doc": ""
           },
           {
-            "name": "className",
+            "name": "side",
             "optional": true,
-            "type": "string",
+            "type": "DatePickerSide",
             "doc": ""
           },
           {
-            "name": "id",
+            "name": "align",
             "optional": true,
-            "type": "string",
+            "type": "DatePickerAlign",
             "doc": ""
           },
           {
-            "name": "\"aria-label\"",
+            "name": "sideOffset",
             "optional": true,
-            "type": "string",
+            "type": "number",
             "doc": ""
-          }
+          },
+          {
+            "name": "className",
+            "optional": true,
+            "type": "string",
+            "doc": ""
+          },
+          {
+            "name": "popupClassName",
+            "optional": true,
+            "type": "string",
+            "doc": ""
+          },
+          {
+            "name": "id",
+            "optional": true,
+            "type": "string",
+            "doc": ""
+          },
+          {
+            "name": "\"aria-label\"",
+            "optional": true,
+            "type": "string",
+            "doc": ""
+          }
+        ]
+      },
+      {
+        "name": "DateRangePickerProps",
+        "members": [
+          {
+            "name": "value",
+            "optional": true,
+            "type": "DateRange",
+            "doc": ""
+          },
+          {
+            "name": "defaultValue",
+            "optional": true,
+            "type": "DateRange",
+            "doc": ""
+          },
+          {
+            "name": "onValueChange",
+            "optional": true,
+            "type": "(value: DateRange) => void",
+            "doc": ""
+          },
+          {
+            "name": "placeholder",
+            "optional": true,
+            "type": "React.ReactNode",
+            "doc": ""
+          },
+          {
+            "name": "disabled",
+            "optional": true,
+            "type": "boolean",
+            "doc": ""
+          },
+          {
+            "name": "numberOfMonths",
+            "optional": true,
+            "type": "number",
+            "doc": ""
+          },
+          {
+            "name": "weekStartsOn",
+            "optional": true,
+            "type": "Weekday",
+            "doc": ""
+          },
+          {
+            "name": "min",
+            "optional": true,
+            "type": "Date",
+            "doc": ""
+          },
+          {
+            "name": "max",
+            "optional": true,
+            "type": "Date",
+            "doc": ""
+          },
+          {
+            "name": "isDateDisabled",
+            "optional": true,
+            "type": "(date: Date) => boolean",
+            "doc": ""
+          },
+          {
+            "name": "locale",
+            "optional": true,
+            "type": "string",
+            "doc": ""
+          },
+          {
+            "name": "formatOptions",
+            "optional": true,
+            "type": "Intl.DateTimeFormatOptions",
+            "doc": ""
+          },
+          {
+            "name": "color",
+            "optional": true,
+            "type": "DatePickerColor",
+            "doc": ""
+          },
+          {
+            "name": "size",
+            "optional": true,
+            "type": "DatePickerSize",
+            "doc": ""
+          },
+          {
+            "name": "side",
+            "optional": true,
+            "type": "DatePickerSide",
+            "doc": ""
+          },
+          {
+            "name": "align",
+            "optional": true,
+            "type": "DatePickerAlign",
+            "doc": ""
+          },
+          {
+            "name": "sideOffset",
+            "optional": true,
+            "type": "number",
+            "doc": ""
+          },
+          {
+            "name": "className",
+            "optional": true,
+            "type": "string",
+            "doc": ""
+          },
+          {
+            "name": "popupClassName",
+            "optional": true,
+            "type": "string",
+            "doc": ""
+          },
+          {
+            "name": "id",
+            "optional": true,
+            "type": "string",
+            "doc": ""
+          },
+          {
+            "name": "\"aria-label\"",
+            "optional": true,
+            "type": "string",
+            "doc": ""
+          }
         ]
       }
     ],
     "usageExample": null
   },
+  {
+    "name": "DateTimeInput",
+    "package": "@wizeworks/silicaui-react",
+    "category": "Data input",
+    "sourceFile": "silicaui-react/src/date-time-input.tsx",
+    "description": "Silica DateTimeInput — `DateInput` + `TimeInput` fused into one segmented field sharing a single `Date` value, for the common \"when exactly\" case (appointments, deadlines, scheduled posts) without stitching two widgets together yourself. <DateTimeInput value={when} onValueChange={setWhen} /> <DateTimeInput hourCycle={24} showSeconds min={new Date()} />",
+    "props": [
+      {
+        "name": "DateTimeInputProps",
+        "members": [
+          {
+            "name": "value",
+            "optional": true,
+            "type": "Date | null",
+            "doc": "Controlled value — a full `Date` (date + time together). `null` clears the field."
+          },
+          {
+            "name": "defaultValue",
+            "optional": true,
+            "type": "Date | null",
+            "doc": ""
+          },
+          {
+            "name": "onValueChange",
+            "optional": true,
+            "type": "(value: Date | null) => void",
+            "doc": "Fires once every segment (date + time, + AM/PM in 12h mode) is filled; `null` while incomplete/cleared."
+          },
+          {
+            "name": "min",
+            "optional": true,
+            "type": "Date",
+            "doc": ""
+          },
+          {
+            "name": "max",
+            "optional": true,
+            "type": "Date",
+            "doc": ""
+          },
+          {
+            "name": "hourCycle",
+            "optional": true,
+            "type": "12 | 24",
+            "doc": "`12` or `24`. Default: derived from `locale`."
+          },
+          {
+            "name": "showSeconds",
+            "optional": true,
+            "type": "boolean",
+            "doc": ""
+          },
+          {
+            "name": "locale",
+            "optional": true,
+            "type": "string",
+            "doc": ""
+          },
+          {
+            "name": "disabled",
+            "optional": true,
+            "type": "boolean",
+            "doc": ""
+          },
+          {
+            "name": "color",
+            "optional": true,
+            "type": "DateTimeInputColor",
+            "doc": ""
+          },
+          {
+            "name": "size",
+            "optional": true,
+            "type": "DateTimeInputSize",
+            "doc": ""
+          },
+          {
+            "name": "className",
+            "optional": true,
+            "type": "string",
+            "doc": ""
+          },
+          {
+            "name": "id",
+            "optional": true,
+            "type": "string",
+            "doc": ""
+          },
+          {
+            "name": "\"aria-label\"",
+            "optional": true,
+            "type": "string",
+            "doc": ""
+          }
+        ]
+      }
+    ],
+    "usageExample": "import { useState } from \"react\";\r\nimport { DateTimeInput } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function DateTimeInputDemo() {\r\n    const [when, setWhen] = useState<Date | null>(new Date(2026, 6, 8, 14, 30));\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · schedule a post (type or paste 'e.g. 7/8/2026 2:30 PM')\">\r\n                <DateTimeInput value={when} onValueChange={setWhen} color=\"primary\" />\r\n                <p className=\"mt-2 text-sm opacity-70\">\r\n                    {when ? when.toString() : \"No date/time\"}\r\n                </p>\r\n            </Section>\r\n\r\n            <Section title=\"24h + seconds, min bound to now\">\r\n                <DateTimeInput hourCycle={24} showSeconds min={new Date()} />\r\n            </Section>\r\n\r\n            <Section title=\"Sizes / disabled\">\r\n                <Row>\r\n                    <DateTimeInput size=\"sm\" defaultValue={new Date(2026, 6, 8, 9, 0)} />\r\n                    <DateTimeInput size=\"lg\" defaultValue={new Date(2026, 6, 8, 9, 0)} />\r\n                    <DateTimeInput disabled defaultValue={new Date(2026, 6, 8, 9, 0)} />\r\n                </Row>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
+  },
   {
     "name": "Field",
     "package": "@wizeworks/silicaui-react",
@@ -3323,7 +3765,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport {\r\n    Button,\r\n    Field,\r\n    FieldLabel,\r\n    FieldControl,\r\n    FieldDescription,\r\n    FieldError,\r\n    FieldStatus,\r\n    Textarea,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section, Stack } from \"../lib/Section\";\r\n\r\nexport function FieldDemo() {\r\n    const [floatingError, setFloatingError] = useState(false);\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · required field with description\">\r\n                <Field className=\"max-w-sm\">\r\n                    <FieldLabel required>Full name</FieldLabel>\r\n                    <FieldControl required placeholder=\"Ada Lovelace\" />\r\n                    <FieldDescription>As it appears on your ID.</FieldDescription>\r\n                    <FieldError />\r\n                </Field>\r\n            </Section>\r\n\r\n            <Section title=\"Non-input control via render (Textarea)\">\r\n                <Field className=\"max-w-sm\">\r\n                    <FieldLabel>Bio</FieldLabel>\r\n                    <FieldControl render={<Textarea rows={3} />} />\r\n                    <FieldDescription>Shown on your public profile.</FieldDescription>\r\n                </Field>\r\n            </Section>\r\n\r\n            <Section title=\"Disabled\">\r\n                <Stack className=\"max-w-sm\">\r\n                    <Field disabled>\r\n                        <FieldLabel>Organization</FieldLabel>\r\n                        <FieldControl defaultValue=\"Silica UI\" />\r\n                    </Field>\r\n                    <Field disabled disabledMessage=\"Contact your admin to change this.\">\r\n                        <FieldLabel>Billing plan</FieldLabel>\r\n                        <FieldControl defaultValue=\"Enterprise\" />\r\n                    </Field>\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"FieldStatus · attached (border+icon+message panel)\">\r\n                <Stack className=\"max-w-sm\">\r\n                    <Field status=\"error\" statusMessage=\"Please enter a valid email address.\">\r\n                        <FieldLabel>Email</FieldLabel>\r\n                        <FieldControl defaultValue=\"sarah@\" />\r\n                    </Field>\r\n                    <Field status=\"warning\" statusMessage=\"This username is already taken — try adding a number.\">\r\n                        <FieldLabel>Username</FieldLabel>\r\n                        <FieldControl defaultValue=\"sarah_chen\" />\r\n                    </Field>\r\n                    <Field status=\"success\" statusMessage=\"URL is valid and reachable.\">\r\n                        <FieldLabel>Website</FieldLabel>\r\n                        <FieldControl defaultValue=\"https://sarahchen.dev\" />\r\n                    </Field>\r\n                    <Field status=\"error\">\r\n                        <FieldLabel>Status without message</FieldLabel>\r\n                        <FieldControl defaultValue=\"test\" />\r\n                    </Field>\r\n                    <Field status=\"error\" statusMessage=\"Key is required.\">\r\n                        <FieldLabel required>Key</FieldLabel>\r\n                        <FieldControl placeholder=\"case_study\" />\r\n                        <FieldDescription>\r\n                            Immutable URL-safe identifier (lowercase, underscores).\r\n                        </FieldDescription>\r\n                    </Field>\r\n                    <Field loading>\r\n                        <FieldLabel>Loading field</FieldLabel>\r\n                        <FieldControl defaultValue=\"sarahc\" />\r\n                    </Field>\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"FieldStatus · floating (overlays instead of pushing sibling fields)\">\r\n                <Stack className=\"max-w-sm\">\r\n                    <Button size=\"sm\" onClick={() => setFloatingError((v) => !v)}>\r\n                        Toggle error\r\n                    </Button>\r\n                    <Field\r\n                        floating\r\n                        status={floatingError ? \"error\" : undefined}\r\n                        statusMessage={\r\n                            floatingError ? \"Please enter a valid email address.\" : undefined\r\n                        }\r\n                    >\r\n                        <FieldLabel>Email</FieldLabel>\r\n                        <FieldControl defaultValue=\"sarah@\" />\r\n                    </Field>\r\n                    <Field>\r\n                        <FieldLabel>Next field (stays put either way)</FieldLabel>\r\n                        <FieldControl defaultValue=\"unaffected\" />\r\n                    </Field>\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"FieldStatus · detached (for checkboxes/switches/custom controls)\">\r\n                <Stack className=\"max-w-sm\">\r\n                    <FieldStatus status=\"error\" attached={false}>\r\n                        This field is required\r\n                    </FieldStatus>\r\n                    <FieldStatus status=\"success\" attached={false}>\r\n                        Your changes have been saved\r\n                    </FieldStatus>\r\n                </Stack>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Fieldset",
@@ -3348,7 +3790,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Fieldset, FieldsetLegend, FieldsetLabel, Input } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function FieldsetDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · profile group\">\r\n                <Fieldset className=\"max-w-sm\">\r\n                    <FieldsetLegend>Profile</FieldsetLegend>\r\n                    <Input placeholder=\"Full name\" />\r\n                    <FieldsetLabel>Your full legal name.</FieldsetLabel>\r\n                </Fieldset>\r\n            </Section>\r\n\r\n            <Section title=\"Disabled cascades to every control\">\r\n                <Fieldset disabled className=\"max-w-sm\">\r\n                    <FieldsetLegend>Billing (locked)</FieldsetLegend>\r\n                    <Input placeholder=\"Card number\" />\r\n                    <FieldsetLabel>Contact support to change billing.</FieldsetLabel>\r\n                </Fieldset>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "FileInput",
@@ -3359,7 +3801,7 @@
     "props": [
       {
         "name": "FileInputProps",
-        "extends": "extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\">",
+        "extends": "extends VoidElementProps<\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\">\n  >",
         "members": [
           {
             "name": "size",
@@ -3370,7 +3812,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { FileInput } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function FileInputDemo() {\r\n    const [name, setName] = useState<string | null>(null);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Sizes\">\r\n                <Row>\r\n                    <FileInput size=\"sm\" />\r\n                    <FileInput />\r\n                    <FileInput size=\"lg\" />\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · avatar upload\">\r\n                <div className=\"flex flex-col gap-2\">\r\n                    <FileInput\r\n                        accept=\"image/*\"\r\n                        onChange={(e) => setName(e.target.files?.[0]?.name ?? null)}\r\n                    />\r\n                    <p className=\"text-xs opacity-60\">\r\n                        {name ? `Selected: ${name}` : \"PNG or JPG, up to 5MB.\"}\r\n                    </p>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "FileUpload",
@@ -3422,7 +3864,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { FileUpload } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function FileUploadDemo() {\r\n    return (\r\n        <Section title=\"Real use · attachments with previews, accept/maxSize filtering\">\r\n            <div className=\"max-w-md\">\r\n                <FileUpload\r\n                    accept=\"image/*,.pdf\"\r\n                    maxSize={2 * 1024 * 1024}\r\n                    hint=\"Images or PDF, up to 2MB each\"\r\n                />\r\n            </div>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "Filter",
@@ -3492,6 +3934,46 @@
         ]
       }
     ],
+    "usageExample": "import { useState } from \"react\";\r\nimport { Filter, FilterItem } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\nimport { COLORS } from \"../lib/data\";\r\n\r\nconst CATEGORIES = [\"All\", \"Apparel\", \"Footwear\", \"Accessories\", \"Sale\"];\r\n\r\nexport function FilterDemo() {\r\n    const [category, setCategory] = useState<string | undefined>(\"All\");\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <div className=\"flex flex-col gap-3\">\r\n                    {COLORS.slice(0, 6).map((color) => (\r\n                        <Filter key={color} color={color} defaultValue=\"all\">\r\n                            <FilterItem value=\"all\">All</FilterItem>\r\n                            <FilterItem value=\"new\">New</FilterItem>\r\n                            <FilterItem value=\"sale\">Sale</FilterItem>\r\n                        </Filter>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · category filter\">\r\n                <div className=\"flex flex-col gap-2\">\r\n                    <Filter color=\"primary\" value={category} onValueChange={setCategory}>\r\n                        {CATEGORIES.map((c) => (\r\n                            <FilterItem key={c} value={c}>\r\n                                {c}\r\n                            </FilterItem>\r\n                        ))}\r\n                    </Filter>\r\n                    <p className=\"text-sm opacity-60\">\r\n                        Showing: {category ?? \"nothing selected\"}\r\n                    </p>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
+  },
+  {
+    "name": "FloatingLabel",
+    "package": "@wizeworks/silicaui-react",
+    "category": "Data input",
+    "sourceFile": "silicaui-react/src/label.tsx",
+    "description": "Silica FloatingLabel — a caption that rests inside the field and floats up on focus or when the field has a value. <FloatingLabel label=\"Email\"> <Input type=\"email\" /> </FloatingLabel> The \"filled\" state relies on `:placeholder-shown`, so the control needs a placeholder — one (a single space) is injected automatically if you don't set your own.",
+    "props": [
+      {
+        "name": "LabelProps",
+        "extends": "extends React.LabelHTMLAttributes<HTMLLabelElement>",
+        "members": [
+          {
+            "name": "required",
+            "optional": true,
+            "type": "boolean",
+            "doc": "Appends a required-field asterisk after the label text."
+          }
+        ]
+      },
+      {
+        "name": "FloatingLabelProps",
+        "extends": "extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, \"children\">",
+        "members": [
+          {
+            "name": "label",
+            "optional": false,
+            "type": "React.ReactNode",
+            "doc": "Caption text that floats onto the border when the field is focused/filled."
+          },
+          {
+            "name": "children",
+            "optional": false,
+            "type": "React.ReactElement<{ placeholder?: string }>",
+            "doc": "The control (an `<Input>`, `<Textarea>`, `<select>`, …)."
+          }
+        ]
+      }
+    ],
     "usageExample": null
   },
   {
@@ -3517,7 +3999,7 @@
     "props": [
       {
         "name": "InputProps",
-        "extends": "extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"color\">",
+        "extends": "extends VoidElementProps<\r\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"color\">\r\n  >",
         "members": [
           {
             "name": "color",
@@ -3534,7 +4016,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport {\r\n    Input,\r\n    Field,\r\n    FieldLabel,\r\n    FieldControl,\r\n    FieldDescription,\r\n    FieldError,\r\n    FloatingLabel,\r\n    Button,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row, Stack } from \"../lib/Section\";\r\nimport { SIZES } from \"../lib/data\";\r\n\r\nexport function InputDemo() {\r\n    const [email, setEmail] = useState(\"not-an-email\");\r\n    const invalid = email.length > 0 && !email.includes(\"@\");\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <Stack className=\"max-w-md\">\r\n                    <Input placeholder=\"Default (focus for primary ring)\" />\r\n                    <Input color=\"primary\" placeholder=\"Primary\" />\r\n                    <Input color=\"success\" placeholder=\"Success\" />\r\n                    <Input color=\"error\" placeholder=\"Error\" defaultValue=\"not-an-email\" />\r\n                    <Input color=\"brand\" placeholder=\"SilicaUI\" />\r\n                    <Input disabled placeholder=\"Disabled\" />\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Stack className=\"max-w-md\">\r\n                    {SIZES.map((size) => (\r\n                        <Input key={size} size={size} placeholder={size} />\r\n                    ))}\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Real form · Field + validation\">\r\n                <div className=\"max-w-sm rounded-box border border-base-300 bg-base-100 p-5 shadow-sm\">\r\n                    <div className=\"flex flex-col gap-4\">\r\n                        <Field\r\n                            validationMode=\"onChange\"\r\n                            validate={() => (invalid ? \"Enter a valid email address\" : null)}\r\n                        >\r\n                            <FieldLabel>Work email</FieldLabel>\r\n                            <FieldControl\r\n                                type=\"email\"\r\n                                value={email}\r\n                                onChange={(e) => setEmail(e.target.value)}\r\n                                placeholder=\"you@company.com\"\r\n                            />\r\n                            <FieldDescription>\r\n                                We'll send a magic link to sign in.\r\n                            </FieldDescription>\r\n                            <FieldError />\r\n                        </Field>\r\n                        <FloatingLabel label=\"Company name\">\r\n                            <Input />\r\n                        </FloatingLabel>\r\n                        <Row>\r\n                            <Button color=\"primary\" block>\r\n                                Continue\r\n                            </Button>\r\n                        </Row>\r\n                    </div>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "InputGroup",
@@ -3566,7 +4048,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Input, InputGroup, InputGroupAddon } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Stack } from \"../lib/Section\";\r\n\r\nconst AtIcon = () => (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" aria-hidden=\"true\">\r\n        <circle cx=\"12\" cy=\"12\" r=\"4\" />\r\n        <path d=\"M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-5.5 8.28\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n    </svg>\r\n);\r\n\r\nexport function InputGroupDemo() {\r\n    return (\r\n        <Section title=\"Custom affix composition\">\r\n            <p className=\"max-w-sm text-xs opacity-60\">\r\n                The primitive behind PasswordInput/SearchInput/PhoneInput — compose your\r\n                own leading/trailing icon or text around any Input.\r\n            </p>\r\n            <Stack className=\"max-w-sm\">\r\n                <InputGroup>\r\n                    <InputGroupAddon placement=\"start\">\r\n                        <AtIcon />\r\n                    </InputGroupAddon>\r\n                    <Input className=\"input-affix-start\" placeholder=\"username\" />\r\n                </InputGroup>\r\n            </Stack>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "Join",
@@ -3588,7 +4070,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Join, Button, Input } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nconst RANGES = [\"Day\", \"Week\", \"Month\"];\r\n\r\nexport function JoinDemo() {\r\n    const [range, setRange] = useState(\"Week\");\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · segmented range picker\">\r\n                <Join>\r\n                    {RANGES.map((r) => (\r\n                        <Button\r\n                            key={r}\r\n                            variant={r === range ? \"solid\" : \"outline\"}\r\n                            color={r === range ? \"primary\" : \"neutral\"}\r\n                            onClick={() => setRange(r)}\r\n                        >\r\n                            {r}\r\n                        </Button>\r\n                    ))}\r\n                </Join>\r\n            </Section>\r\n\r\n            <Section title=\"Input + button\">\r\n                <Row>\r\n                    <Join>\r\n                        <Input placeholder=\"Search…\" />\r\n                        <Button color=\"primary\">Go</Button>\r\n                    </Join>\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Vertical\">\r\n                <Join orientation=\"vertical\" className=\"w-32\">\r\n                    <Button variant=\"outline\" color=\"neutral\">\r\n                        Top\r\n                    </Button>\r\n                    <Button variant=\"outline\" color=\"neutral\">\r\n                        Middle\r\n                    </Button>\r\n                    <Button variant=\"outline\" color=\"neutral\">\r\n                        Bottom\r\n                    </Button>\r\n                </Join>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Label",
@@ -3628,7 +4110,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Label, FloatingLabel, Input } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Stack } from \"../lib/Section\";\r\n\r\nexport function LabelDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Plain label\">\r\n                <div className=\"flex max-w-sm flex-col gap-1.5\">\r\n                    <Label htmlFor=\"email-plain\">Email</Label>\r\n                    <Input id=\"email-plain\" placeholder=\"you@example.com\" />\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · floating label form\">\r\n                <Stack className=\"max-w-sm\">\r\n                    <FloatingLabel label=\"Email\">\r\n                        <Input type=\"email\" />\r\n                    </FloatingLabel>\r\n                    <FloatingLabel label=\"Password\">\r\n                        <Input type=\"password\" />\r\n                    </FloatingLabel>\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Required\">\r\n                <div className=\"flex max-w-sm flex-col gap-1.5\">\r\n                    <Label htmlFor=\"email-required\" required>\r\n                        Email\r\n                    </Label>\r\n                    <Input id=\"email-required\" placeholder=\"you@example.com\" />\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "MultiSelect",
@@ -3799,7 +4281,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { MultiSelect } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nconst FRAMEWORKS = [\"React\", \"Vue\", \"Svelte\", \"Solid\", \"Angular\", \"Qwik\", \"Preact\"];\r\n\r\nconst COUNTRIES = [\r\n    { value: \"us\", label: \"United States\" },\r\n    { value: \"ca\", label: \"Canada\" },\r\n    { value: \"mx\", label: \"Mexico\" },\r\n    { value: \"gb\", label: \"United Kingdom\" },\r\n    { value: \"fr\", label: \"France\" },\r\n    { value: \"de\", label: \"Germany\" },\r\n];\r\n\r\nexport function MultiSelectDemo() {\r\n    const [frameworks, setFrameworks] = useState<string[]>([\"React\", \"Svelte\"]);\r\n    const [countries, setCountries] = useState<{ value: string; label: string }[]>([]);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · pick several frameworks (string items)\">\r\n                <MultiSelect\r\n                    items={FRAMEWORKS}\r\n                    value={frameworks}\r\n                    onValueChange={(v) => setFrameworks(v as string[])}\r\n                    placeholder=\"Add a framework…\"\r\n                    color=\"primary\"\r\n                />\r\n            </Section>\r\n\r\n            <Section title=\"Object items · label ≠ value\">\r\n                <MultiSelect\r\n                    items={COUNTRIES}\r\n                    value={countries}\r\n                    onValueChange={(v) => setCountries(v as { value: string; label: string }[])}\r\n                    placeholder=\"Add countries…\"\r\n                />\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Row>\r\n                    {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\r\n                        <MultiSelect\r\n                            key={size}\r\n                            items={[\"A\", \"B\", \"C\"]}\r\n                            defaultValue={[\"A\"]}\r\n                            size={size}\r\n                            placeholder={size}\r\n                        />\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Disabled\">\r\n                <MultiSelect items={FRAMEWORKS} defaultValue={[\"Vue\"]} disabled />\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "NativeSelect",
@@ -3849,7 +4331,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { NumberField } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function NumberFieldDemo() {\r\n    const [qty, setQty] = useState<number | null>(2);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · cart quantity\">\r\n                <Row>\r\n                    <NumberField\r\n                        label=\"Quantity\"\r\n                        value={qty}\r\n                        onValueChange={setQty}\r\n                        min={1}\r\n                        max={10}\r\n                    />\r\n                    <span className=\"text-sm opacity-60\">{qty ?? 0} in cart</span>\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Step + bounds\">\r\n                <Row>\r\n                    <NumberField label=\"Percent\" defaultValue={50} min={0} max={100} step={5} />\r\n                </Row>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "PasswordInput",
@@ -3860,7 +4342,7 @@
     "props": [
       {
         "name": "PasswordInputProps",
-        "extends": "extends Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    \"size\" | \"color\" | \"type\"\n  >",
+        "extends": "extends VoidElementProps<\r\n    Omit<\r\n      React.InputHTMLAttributes<HTMLInputElement>,\r\n      \"size\" | \"color\" | \"type\"\r\n    >\r\n  >",
         "members": [
           {
             "name": "color",
@@ -3889,7 +4371,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { PasswordInput } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Stack } from \"../lib/Section\";\r\nimport { SIZES } from \"../lib/data\";\r\n\r\nexport function PasswordInputDemo() {\r\n    const [value, setValue] = useState(\"hunter2\");\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <Stack className=\"max-w-sm\">\r\n                    <PasswordInput placeholder=\"Default\" />\r\n                    <PasswordInput color=\"primary\" placeholder=\"Primary\" />\r\n                    <PasswordInput color=\"error\" placeholder=\"Error\" defaultValue=\"tooshort\" />\r\n                    <PasswordInput disabled placeholder=\"Disabled\" defaultValue=\"secret123\" />\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Stack className=\"max-w-sm\">\r\n                    {SIZES.map((size) => (\r\n                        <PasswordInput key={size} size={size} placeholder={size} />\r\n                    ))}\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Controlled\">\r\n                <Stack className=\"max-w-sm\">\r\n                    <PasswordInput\r\n                        value={value}\r\n                        onChange={(e) => setValue(e.target.value)}\r\n                        placeholder=\"Password\"\r\n                    />\r\n                    <p className=\"text-xs opacity-60\">{value.length} characters</p>\r\n                </Stack>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "PhoneInput",
@@ -3994,7 +4476,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { PhoneInput } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Stack } from \"../lib/Section\";\r\nimport { SIZES } from \"../lib/data\";\r\n\r\nexport function PhoneInputDemo() {\r\n    const [national, setNational] = useState(\"\");\r\n    const [e164, setE164] = useState(\"\");\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <Stack className=\"max-w-sm\">\r\n                    <PhoneInput />\r\n                    <PhoneInput color=\"primary\" defaultCountry=\"GB\" defaultValue=\"7911123456\" />\r\n                    <PhoneInput disabled defaultCountry=\"DE\" defaultValue=\"15123456789\" />\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Stack className=\"max-w-sm\">\r\n                    {SIZES.map((size) => (\r\n                        <PhoneInput key={size} size={size} />\r\n                    ))}\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Controlled\">\r\n                <Stack className=\"max-w-sm\">\r\n                    <PhoneInput\r\n                        value={national}\r\n                        onValueChange={(nat, e164) => {\r\n                            setNational(nat);\r\n                            setE164(e164);\r\n                        }}\r\n                    />\r\n                    <p className=\"text-xs opacity-60\">E.164: {e164 || \"(empty)\"}</p>\r\n                </Stack>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "PinInput",
@@ -4029,37 +4511,171 @@
             "name": "onValueChange",
             "optional": true,
             "type": "(value: string) => void",
-            "doc": "Fires with the next value on every keystroke, paste, or deletion."
+            "doc": "Fires with the next value on every keystroke, paste, or deletion."
+          },
+          {
+            "name": "onComplete",
+            "optional": true,
+            "type": "(value: string) => void",
+            "doc": "Fires once the value reaches `length` characters."
+          },
+          {
+            "name": "mode",
+            "optional": true,
+            "type": "\"numeric\" | \"text\"",
+            "doc": "Restrict input to digits (`\"numeric\"`, default) or any single character (`\"text\"`)."
+          },
+          {
+            "name": "mask",
+            "optional": true,
+            "type": "boolean",
+            "doc": "Render each cell's character as a dot, like a password field. Default `false`."
+          },
+          {
+            "name": "color",
+            "optional": true,
+            "type": "PinInputColor",
+            "doc": "Accent color; maps to `pin-input-cell-<color>` (border + focus ring)."
+          },
+          {
+            "name": "size",
+            "optional": true,
+            "type": "PinInputSize",
+            "doc": "Default `md`. Matches same-size Input heights."
+          },
+          {
+            "name": "disabled",
+            "optional": true,
+            "type": "boolean",
+            "doc": ""
+          },
+          {
+            "name": "autoFocus",
+            "optional": true,
+            "type": "boolean",
+            "doc": "Focus the first cell on mount."
+          },
+          {
+            "name": "name",
+            "optional": true,
+            "type": "string",
+            "doc": "Field name for form submission (submits the joined value as one field)."
+          },
+          {
+            "name": "\"aria-label\"",
+            "optional": true,
+            "type": "string",
+            "doc": ""
+          }
+        ]
+      }
+    ],
+    "usageExample": "import { useState } from \"react\";\r\nimport { PinInput } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Stack, Row } from \"../lib/Section\";\r\nimport { SIZES } from \"../lib/data\";\r\n\r\nexport function PinInputDemo() {\r\n    const [code, setCode] = useState(\"\");\r\n    const [completed, setCompleted] = useState(\"\");\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <Stack>\r\n                    <PinInput length={4} />\r\n                    <PinInput length={4} color=\"primary\" />\r\n                    <PinInput length={4} color=\"error\" defaultValue=\"12\" />\r\n                    <PinInput length={4} disabled defaultValue=\"1234\" />\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Stack>\r\n                    {SIZES.map((size) => (\r\n                        <PinInput key={size} length={4} size={size} />\r\n                    ))}\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Masked (text mode)\">\r\n                <Row>\r\n                    <PinInput length={4} mode=\"text\" mask />\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Controlled + onComplete\">\r\n                <Stack>\r\n                    <PinInput\r\n                        length={6}\r\n                        value={code}\r\n                        onValueChange={setCode}\r\n                        onComplete={setCompleted}\r\n                    />\r\n                    <p className=\"text-xs opacity-60\">\r\n                        Value: {code || \"(empty)\"}\r\n                        {completed && ` — completed: ${completed}`}\r\n                    </p>\r\n                </Stack>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
+  },
+  {
+    "name": "Radio",
+    "package": "@wizeworks/silicaui-react",
+    "category": "Data input",
+    "sourceFile": "silicaui-react/src/radio.tsx",
+    "description": "Silica Radio — a restyled native `<input type=\"radio\">`. Group them by giving several the same `name`. All native attributes pass through. <Radio name=\"plan\" value=\"pro\">Pro</Radio>",
+    "props": [
+      {
+        "name": "RadioProps",
+        "extends": "extends Omit<\r\n    React.InputHTMLAttributes<HTMLInputElement>,\r\n    \"size\" | \"color\" | \"type\"\r\n  >",
+        "members": [
+          {
+            "name": "color",
+            "optional": true,
+            "type": "SilicaColor",
+            "doc": "Accent color; maps to `radio-<color>` (checked dot + focus ring)."
+          },
+          {
+            "name": "size",
+            "optional": true,
+            "type": "SilicaSize",
+            "doc": "Default `md`."
+          },
+          {
+            "name": "children",
+            "optional": true,
+            "type": "React.ReactNode",
+            "doc": "Caption. Wraps the control in a `<label>` so the text is a click target."
+          }
+        ]
+      }
+    ],
+    "usageExample": "import { useState } from \"react\";\r\nimport { Radio } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\nimport { ColorVariantSizeGrid } from \"../lib/ColorGrid\";\r\n\r\nconst PLANS = [\r\n    { id: \"starter\", label: \"Starter — $9/mo\" },\r\n    { id: \"pro\", label: \"Pro — $29/mo\" },\r\n    { id: \"enterprise\", label: \"Enterprise — custom\" },\r\n];\r\n\r\nexport function RadioDemo() {\r\n    const [plan, setPlan] = useState(\"pro\");\r\n\r\n    return (\r\n        <>\r\n            <ColorVariantSizeGrid\r\n                Component={Radio}\r\n                render={({ color, size }) => (\r\n                    <label className=\"flex items-center gap-2 text-sm\">\r\n                        <Radio name={`radio-${color ?? size}`} color={color} size={size} defaultChecked />\r\n                        {color ?? size}\r\n                    </label>\r\n                )}\r\n            />\r\n\r\n            <Section title=\"Real use · pick a plan\">\r\n                <div className=\"flex flex-col gap-2\">\r\n                    {PLANS.map((p) => (\r\n                        <label key={p.id} className=\"flex items-center gap-2 text-sm\">\r\n                            <Radio\r\n                                name=\"plan\"\r\n                                color=\"primary\"\r\n                                checked={plan === p.id}\r\n                                onChange={() => setPlan(p.id)}\r\n                            />\r\n                            {p.label}\r\n                        </label>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
+  },
+  {
+    "name": "RadioGroup",
+    "package": "@wizeworks/silicaui-react",
+    "category": "Data input",
+    "sourceFile": "silicaui-react/src/radio-group.tsx",
+    "description": "Silica RadioGroup — a managed set of radios (native inputs, so arrow-key navigation comes free). Pair with `RadioOption`s. <RadioGroup defaultValue=\"card\" name=\"pay\"> <RadioOption value=\"card\">Card</RadioOption> <RadioOption value=\"ach\">Bank transfer</RadioOption> </RadioGroup>",
+    "props": [
+      {
+        "name": "RadioGroupProps",
+        "extends": "extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\">",
+        "members": [
+          {
+            "name": "value",
+            "optional": true,
+            "type": "string",
+            "doc": "Controlled selected value."
+          },
+          {
+            "name": "defaultValue",
+            "optional": true,
+            "type": "string",
+            "doc": "Uncontrolled initial value."
+          },
+          {
+            "name": "onValueChange",
+            "optional": true,
+            "type": "(value: string) => void",
+            "doc": "Fires with the newly-selected value."
           },
           {
-            "name": "onComplete",
+            "name": "name",
             "optional": true,
-            "type": "(value: string) => void",
-            "doc": "Fires once the value reaches `length` characters."
+            "type": "string",
+            "doc": "Shared radio `name` (auto-generated if omitted)."
           },
           {
-            "name": "mode",
+            "name": "orientation",
             "optional": true,
-            "type": "\"numeric\" | \"text\"",
-            "doc": "Restrict input to digits (`\"numeric\"`, default) or any single character (`\"text\"`)."
+            "type": "RadioGroupOrientation",
+            "doc": "Stack (`vertical`, default) or row (`horizontal`)."
           },
           {
-            "name": "mask",
+            "name": "disabled",
             "optional": true,
             "type": "boolean",
-            "doc": "Render each cell's character as a dot, like a password field. Default `false`."
+            "doc": "Disable every option."
           },
           {
             "name": "color",
             "optional": true,
-            "type": "PinInputColor",
-            "doc": "Accent color; maps to `pin-input-cell-<color>` (border + focus ring)."
+            "type": "SilicaColor",
+            "doc": "Default accent color for the options."
           },
           {
             "name": "size",
             "optional": true,
-            "type": "PinInputSize",
-            "doc": "Default `md`. Matches same-size Input heights."
+            "type": "SilicaSize",
+            "doc": "Default size for the options."
+          }
+        ]
+      },
+      {
+        "name": "RadioOptionProps",
+        "extends": "extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, \"onChange\">",
+        "members": [
+          {
+            "name": "value",
+            "optional": false,
+            "type": "string",
+            "doc": "This option's value."
           },
           {
             "name": "disabled",
@@ -4067,63 +4683,29 @@
             "type": "boolean",
             "doc": ""
           },
-          {
-            "name": "autoFocus",
-            "optional": true,
-            "type": "boolean",
-            "doc": "Focus the first cell on mount."
-          },
-          {
-            "name": "name",
-            "optional": true,
-            "type": "string",
-            "doc": "Field name for form submission (submits the joined value as one field)."
-          },
-          {
-            "name": "\"aria-label\"",
-            "optional": true,
-            "type": "string",
-            "doc": ""
-          }
-        ]
-      }
-    ],
-    "usageExample": null
-  },
-  {
-    "name": "Radio",
-    "package": "@wizeworks/silicaui-react",
-    "category": "Data input",
-    "sourceFile": "silicaui-react/src/radio.tsx",
-    "description": "Silica Radio — a restyled native `<input type=\"radio\">`. Group them by giving several the same `name`. All native attributes pass through.",
-    "props": [
-      {
-        "name": "RadioProps",
-        "extends": "extends Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    \"size\" | \"color\" | \"type\"\n  >",
-        "members": [
           {
             "name": "color",
             "optional": true,
             "type": "SilicaColor",
-            "doc": "Accent color; maps to `radio-<color>` (checked dot + focus ring)."
+            "doc": ""
           },
           {
             "name": "size",
             "optional": true,
             "type": "SilicaSize",
-            "doc": "Default `md`."
+            "doc": ""
           }
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { RadioGroup, RadioOption } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function RadioGroupDemo() {\r\n    const [plan, setPlan] = useState(\"pro\");\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · billing plan\">\r\n                <RadioGroup value={plan} onValueChange={setPlan} color=\"primary\">\r\n                    <RadioOption value=\"starter\">Starter — $9/mo</RadioOption>\r\n                    <RadioOption value=\"pro\">Pro — $29/mo</RadioOption>\r\n                    <RadioOption value=\"enterprise\">Enterprise — custom</RadioOption>\r\n                </RadioGroup>\r\n            </Section>\r\n\r\n            <Section title=\"Horizontal\">\r\n                <RadioGroup defaultValue=\"md\" orientation=\"horizontal\" color=\"primary\">\r\n                    <RadioOption value=\"sm\">Small</RadioOption>\r\n                    <RadioOption value=\"md\">Medium</RadioOption>\r\n                    <RadioOption value=\"lg\">Large</RadioOption>\r\n                </RadioGroup>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
-    "name": "RadioGroup",
+    "name": "RadioOption",
     "package": "@wizeworks/silicaui-react",
     "category": "Data input",
     "sourceFile": "silicaui-react/src/radio-group.tsx",
-    "description": "Silica RadioGroup — a managed set of radios (native inputs, so arrow-key navigation comes free). Pair with `RadioOption`s. <RadioGroup defaultValue=\"card\" name=\"pay\"> <RadioOption value=\"card\">Card</RadioOption> <RadioOption value=\"ach\">Bank transfer</RadioOption> </RadioGroup>",
+    "description": "One labeled radio within a RadioGroup.",
     "props": [
       {
         "name": "RadioGroupProps",
@@ -4232,14 +4814,14 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Range } from \"@wizeworks/silicaui-react\";\r\nimport { Section, LabeledRow } from \"../lib/Section\";\r\nimport { COLORS } from \"../lib/data\";\r\n\r\nexport function RangeDemo() {\r\n    const [volume, setVolume] = useState(40);\r\n    const [priceRange, setPriceRange] = useState<number[]>([20, 70]);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <div className=\"flex max-w-md flex-col gap-4\">\r\n                    {COLORS.slice(0, 6).map((color) => (\r\n                        <Range key={color} color={color} defaultValue={55} />\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · volume + price range\">\r\n                <div className=\"flex max-w-md flex-col gap-5\">\r\n                    <LabeledRow label={`Volume · ${volume}%`}>\r\n                        <Range\r\n                            color=\"brand\"\r\n                            value={volume}\r\n                            onValueChange={(v) => setVolume(v as number)}\r\n                        />\r\n                    </LabeledRow>\r\n                    <LabeledRow label={`Price range · $${priceRange[0]} – $${priceRange[1]}`}>\r\n                        <Range\r\n                            color=\"success\"\r\n                            value={priceRange}\r\n                            onValueChange={(v) => setPriceRange(v as number[])}\r\n                        />\r\n                    </LabeledRow>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Rating",
     "package": "@wizeworks/silicaui-react",
     "category": "Data input",
     "sourceFile": "silicaui-react/src/rating.tsx",
-    "description": "Silica Rating — a row of star buttons. <Rating defaultValue={3} onChange={setStars} /> <Rating value={4.5 | 4} color=\"warning\" readOnly /> Keyboard: arrow keys change the value; Home/End jump to 1/max.",
+    "description": "Silica Rating — a row of star buttons. <Rating defaultValue={3} onValueChange={setStars} /> <Rating value={4.5 | 4} color=\"warning\" readOnly /> Keyboard: arrow keys change the value; Home/End jump to 1/max.",
     "props": [
       {
         "name": "RatingProps",
@@ -4257,11 +4839,17 @@
             "type": "number",
             "doc": "Initial value when uncontrolled."
           },
+          {
+            "name": "onValueChange",
+            "optional": true,
+            "type": "(value: number) => void",
+            "doc": "Called with the new rating whenever it changes."
+          },
           {
             "name": "onChange",
             "optional": true,
             "type": "(value: number) => void",
-            "doc": "Called when the rating changes."
+            "doc": "@deprecated Use `onValueChange`. `onChange` is reserved for the native DOM handler on components that wrap a real form element; still honored here so this isn't a breaking change."
           },
           {
             "name": "max",
@@ -4302,7 +4890,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Rating } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row, LabeledRow } from \"../lib/Section\";\r\nimport { COLORS, SIZES } from \"../lib/data\";\r\n\r\nexport function RatingDemo() {\r\n    const [stars, setStars] = useState(3);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors (read-only)\">\r\n                <Row>\r\n                    {COLORS.slice(0, 6).map((color) => (\r\n                        <Rating key={color} color={color} defaultValue={4} readOnly />\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <div className=\"flex flex-col gap-2\">\r\n                    {SIZES.map((size) => (\r\n                        <Rating key={size} color=\"warning\" size={size} defaultValue={3} readOnly />\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · rate this product\">\r\n                <LabeledRow label={`You rated this ${stars} of 5 stars`}>\r\n                    <Rating color=\"warning\" value={stars} onValueChange={setStars} />\r\n                </LabeledRow>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "SearchInput",
@@ -4313,7 +4901,7 @@
     "props": [
       {
         "name": "SearchInputProps",
-        "extends": "extends Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    \"size\" | \"color\" | \"type\"\n  >",
+        "extends": "extends VoidElementProps<\r\n    Omit<\r\n      React.InputHTMLAttributes<HTMLInputElement>,\r\n      \"size\" | \"color\" | \"type\"\r\n    >\r\n  >",
         "members": [
           {
             "name": "color",
@@ -4348,7 +4936,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { SearchInput } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Stack } from \"../lib/Section\";\r\nimport { SIZES } from \"../lib/data\";\r\n\r\nexport function SearchInputDemo() {\r\n    const [query, setQuery] = useState(\"\");\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <Stack className=\"max-w-sm\">\r\n                    <SearchInput placeholder=\"Search…\" />\r\n                    <SearchInput color=\"primary\" placeholder=\"Search…\" defaultValue=\"silica\" />\r\n                    <SearchInput disabled placeholder=\"Search…\" defaultValue=\"disabled\" />\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Stack className=\"max-w-sm\">\r\n                    {SIZES.map((size) => (\r\n                        <SearchInput key={size} size={size} placeholder={size} defaultValue={size} />\r\n                    ))}\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Controlled\">\r\n                <Stack className=\"max-w-sm\">\r\n                    <SearchInput\r\n                        value={query}\r\n                        onValueChange={setQuery}\r\n                        placeholder=\"Search components…\"\r\n                    />\r\n                    <p className=\"text-xs opacity-60\">\r\n                        {query ? `Searching for \"${query}\"` : \"Type to search, × to clear\"}\r\n                    </p>\r\n                </Stack>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Select",
@@ -4489,7 +5077,7 @@
           {
             "name": "popupProps",
             "optional": true,
-            "type": "React.ComponentProps<typeof BaseSelect.Popup> & {\n    [key: `data-${string}`]: string;\n  }",
+            "type": "React.ComponentProps<typeof BaseSelect.Popup> & {\r\n    [key: `data-${string}`]: string;\r\n  }",
             "doc": "Extra props spread onto the popup surface. The popup renders in a PORTAL at document.body, so when the Select lives inside a scoped `[data-theme]` island pass `popupProps={{ \"data-theme\": \"…\" }}` to re-establish the theme tokens (custom props inherit through the DOM, not the portal boundary)."
           },
           {
@@ -4519,7 +5107,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { NativeSelect } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row, Stack } from \"../lib/Section\";\r\nimport { SIZES } from \"../lib/data\";\r\n\r\nexport function SelectDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <Stack className=\"max-w-md\">\r\n                    <NativeSelect defaultValue=\"\">\r\n                        <option value=\"\" disabled>\r\n                            Pick a framework…\r\n                        </option>\r\n                        <option>React</option>\r\n                        <option>Svelte</option>\r\n                        <option>Vue</option>\r\n                        <option>Solid</option>\r\n                    </NativeSelect>\r\n                    <NativeSelect color=\"primary\" defaultValue=\"React\">\r\n                        <option>React</option>\r\n                        <option>Svelte</option>\r\n                        <option>Vue</option>\r\n                    </NativeSelect>\r\n                    <NativeSelect color=\"success\" defaultValue=\"React\">\r\n                        <option>React</option>\r\n                        <option>Svelte</option>\r\n                    </NativeSelect>\r\n                    <NativeSelect color=\"error\" defaultValue=\"React\">\r\n                        <option>React</option>\r\n                        <option>Svelte</option>\r\n                    </NativeSelect>\r\n                    <NativeSelect disabled defaultValue=\"React\">\r\n                        <option>React</option>\r\n                    </NativeSelect>\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Row>\r\n                    {SIZES.map((size) => (\r\n                        <NativeSelect key={size} size={size} defaultValue={size}>\r\n                            <option>{size}</option>\r\n                        </NativeSelect>\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · shipping region\">\r\n                <div className=\"grid max-w-sm gap-3 rounded-box border border-base-300 bg-base-100 p-5 shadow-sm\">\r\n                    <label className=\"flex flex-col gap-1.5 text-sm\">\r\n                        Country\r\n                        <NativeSelect color=\"primary\" defaultValue=\"US\">\r\n                            <option value=\"US\">United States</option>\r\n                            <option value=\"CA\">Canada</option>\r\n                            <option value=\"MX\">Mexico</option>\r\n                            <option value=\"UK\">United Kingdom</option>\r\n                        </NativeSelect>\r\n                    </label>\r\n                    <label className=\"flex flex-col gap-1.5 text-sm\">\r\n                        Shipping speed\r\n                        <NativeSelect defaultValue=\"standard\">\r\n                            <option value=\"standard\">Standard (5–7 days)</option>\r\n                            <option value=\"express\">Express (2–3 days)</option>\r\n                            <option value=\"overnight\">Overnight</option>\r\n                        </NativeSelect>\r\n                    </label>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "SelectionList",
@@ -4565,7 +5153,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { SelectionList } from \"@wizeworks/silicaui-react\";\r\nimport type { SelectionListItem } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nconst PlanIcon = (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n        <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\r\n        <path d=\"M3 9h18\" />\r\n    </svg>\r\n);\r\n\r\nconst PLANS: SelectionListItem[] = [\r\n    { id: \"free\", label: \"Free\", description: \"For trying things out\", icon: PlanIcon },\r\n    { id: \"pro\", label: \"Pro\", description: \"For growing teams\", icon: PlanIcon },\r\n    { id: \"enterprise\", label: \"Enterprise\", description: \"Custom limits & support\", icon: PlanIcon },\r\n];\r\n\r\nconst NOTIFICATIONS: SelectionListItem[] = [\r\n    { id: \"email\", label: \"Email\", description: \"Order + shipping updates\" },\r\n    { id: \"sms\", label: \"SMS\", description: \"Delivery alerts only\" },\r\n    { id: \"push\", label: \"Push\", description: \"Real-time on this device\" },\r\n    { id: \"digest\", label: \"Weekly digest\", description: \"Coming soon\", disabled: true },\r\n];\r\n\r\nexport function SelectionListDemo() {\r\n    const [plan, setPlan] = useState<string[]>([\"pro\"]);\r\n    const [channels, setChannels] = useState<string[]>([\"email\", \"push\"]);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · single-select plan picker\">\r\n                <Row>\r\n                    <SelectionList\r\n                        items={PLANS}\r\n                        value={plan}\r\n                        onValueChange={setPlan}\r\n                        className=\"w-72\"\r\n                    />\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Multi-select · notification channels\">\r\n                <Row>\r\n                    <SelectionList\r\n                        items={NOTIFICATIONS}\r\n                        multiple\r\n                        value={channels}\r\n                        onValueChange={setChannels}\r\n                        className=\"w-72\"\r\n                    />\r\n                </Row>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Slider",
@@ -4599,7 +5187,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Slider } from \"@wizeworks/silicaui-react\";\r\nimport { Section, LabeledRow } from \"../lib/Section\";\r\nimport { COLORS } from \"../lib/data\";\r\n\r\nexport function SliderDemo() {\r\n    const [brightness, setBrightness] = useState(65);\r\n    const [range, setRange] = useState<number[]>([25, 75]);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <div className=\"flex max-w-md flex-col gap-5\">\r\n                    {COLORS.slice(0, 6).map((color) => (\r\n                        <Slider key={color} color={color} defaultValue={55} />\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <div className=\"flex max-w-md flex-col gap-5\">\r\n                    {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\r\n                        <Slider key={size} color=\"primary\" size={size} defaultValue={55} />\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · brightness + a two-thumb range\">\r\n                <div className=\"flex max-w-md flex-col gap-6\">\r\n                    <LabeledRow label={`Brightness · ${brightness}%`}>\r\n                        <Slider\r\n                            color=\"brand\"\r\n                            value={brightness}\r\n                            onValueChange={(v) => setBrightness(v as number)}\r\n                            showValue={false}\r\n                        />\r\n                    </LabeledRow>\r\n                    <LabeledRow label={`Budget · $${range[0]} – $${range[1]}`}>\r\n                        <Slider\r\n                            color=\"success\"\r\n                            value={range}\r\n                            onValueChange={(v) => setRange(v as number[])}\r\n                        />\r\n                    </LabeledRow>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Switch",
@@ -4627,7 +5215,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Switch } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\nimport { SIZES } from \"../lib/data\";\r\n\r\nconst SETTINGS = [\r\n    { key: \"push\", label: \"Push notifications\", defaultOn: true },\r\n    { key: \"email\", label: \"Email digest\", defaultOn: true },\r\n    { key: \"sms\", label: \"SMS alerts\", defaultOn: false },\r\n];\r\n\r\nexport function SwitchDemo() {\r\n    const [on, setOn] = useState<Record<string, boolean>>({\r\n        push: true,\r\n        email: true,\r\n        sms: false,\r\n    });\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <Row>\r\n                    <Switch defaultChecked />\r\n                    <Switch color=\"primary\" defaultChecked />\r\n                    <Switch color=\"success\" defaultChecked />\r\n                    <Switch color=\"warning\" defaultChecked />\r\n                    <Switch color=\"error\" defaultChecked />\r\n                    <Switch color=\"brand\" defaultChecked />\r\n                    <Switch disabled />\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Row>\r\n                    {SIZES.filter((s) => s !== \"xl\").map((size) => (\r\n                        <Switch key={size} color=\"primary\" size={size} defaultChecked />\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · notification settings\">\r\n                <div className=\"flex max-w-sm flex-col gap-3 rounded-box border border-base-300 bg-base-100 p-4\">\r\n                    {SETTINGS.map((s) => (\r\n                        <label key={s.key} className=\"flex items-center justify-between gap-4 text-sm\">\r\n                            {s.label}\r\n                            <Switch\r\n                                color=\"primary\"\r\n                                checked={on[s.key]}\r\n                                onCheckedChange={(v) => setOn((p) => ({ ...p, [s.key]: v }))}\r\n                            />\r\n                        </label>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "TagInput",
@@ -4715,7 +5303,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { TagInput } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Stack } from \"../lib/Section\";\r\nimport { COLORS } from \"../lib/data\";\r\n\r\nexport function TagInputDemo() {\r\n    const [tags, setTags] = useState<string[]>([\"design\", \"ui\", \"tokens\"]);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <Stack className=\"max-w-md\">\r\n                    {COLORS.slice(0, 6).map((color) => (\r\n                        <TagInput\r\n                            key={color}\r\n                            color={color}\r\n                            defaultValue={[color]}\r\n                            placeholder=\"Add a tag…\"\r\n                        />\r\n                    ))}\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · post tags (max 6, dedupe on)\">\r\n                <div className=\"flex max-w-md flex-col gap-2\">\r\n                    <TagInput\r\n                        color=\"primary\"\r\n                        value={tags}\r\n                        onValueChange={setTags}\r\n                        placeholder=\"Press Enter or , to add\"\r\n                        max={6}\r\n                    />\r\n                    <p className=\"text-xs opacity-60\">\r\n                        {tags.length} / 6 tags — {tags.join(\", \") || \"none yet\"}\r\n                    </p>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Textarea",
@@ -4743,7 +5331,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Textarea } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row, Stack } from \"../lib/Section\";\r\nimport { SIZES } from \"../lib/data\";\r\n\r\nexport function TextareaDemo() {\r\n    const [note, setNote] = useState(\r\n        \"Shipping was fast and the packaging held up well.\",\r\n    );\r\n    const max = 200;\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <Stack className=\"max-w-md\">\r\n                    <Textarea placeholder=\"Default textarea — drag the corner to resize\" />\r\n                    <Textarea\r\n                        color=\"primary\"\r\n                        defaultValue=\"Primary accent — border and focus ring.\"\r\n                    />\r\n                    <Textarea color=\"success\" placeholder=\"Success\" />\r\n                    <Textarea color=\"error\" placeholder=\"Error\" />\r\n                    <Textarea color=\"brand\" placeholder=\"Brand accent\" rows={2} />\r\n                    <Textarea disabled defaultValue=\"Disabled\" />\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Row>\r\n                    {SIZES.map((size) => (\r\n                        <Textarea key={size} size={size} placeholder={size} rows={2} />\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · review with a live character count\">\r\n                <div className=\"max-w-sm rounded-box border border-base-300 bg-base-100 p-5 shadow-sm\">\r\n                    <div className=\"flex flex-col gap-1.5\">\r\n                        <label className=\"text-sm font-medium\">Your review</label>\r\n                        <Textarea\r\n                            color={note.length > max ? \"error\" : \"primary\"}\r\n                            value={note}\r\n                            onChange={(e) => setNote(e.target.value)}\r\n                            rows={3}\r\n                        />\r\n                        <span\r\n                            className={`self-end text-xs ${\r\n                                note.length > max ? \"text-error\" : \"opacity-60\"\r\n                            }`}\r\n                        >\r\n                            {note.length} / {max}\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "TimeInput",
@@ -4830,18 +5418,18 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { TimeInput, type TimeValue } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function TimeInputDemo() {\r\n    const [time, setTime] = useState<TimeValue | null>({ hour: 14, minute: 30 });\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · 12h field (type digits, arrows, or paste 'e.g. 2:30 PM')\">\r\n                <TimeInput value={time} onValueChange={setTime} color=\"primary\" />\r\n                <p className=\"mt-2 text-sm opacity-70\">\r\n                    {time ? `${String(time.hour).padStart(2, \"0\")}:${String(time.minute).padStart(2, \"0\")} (24h)` : \"No time\"}\r\n                </p>\r\n            </Section>\r\n\r\n            <Section title=\"24h + seconds\">\r\n                <TimeInput hourCycle={24} showSeconds defaultValue={{ hour: 14, minute: 30, second: 45 }} />\r\n            </Section>\r\n\r\n            <Section title=\"Sizes / disabled\">\r\n                <Row>\r\n                    <TimeInput size=\"sm\" defaultValue={{ hour: 9, minute: 0 }} />\r\n                    <TimeInput size=\"md\" defaultValue={{ hour: 9, minute: 0 }} />\r\n                    <TimeInput size=\"lg\" defaultValue={{ hour: 9, minute: 0 }} />\r\n                    <TimeInput disabled defaultValue={{ hour: 9, minute: 0 }} />\r\n                </Row>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Toggle",
     "package": "@wizeworks/silicaui-react",
     "category": "Data input",
     "sourceFile": "silicaui-react/src/toggle.tsx",
-    "description": "Silica Toggle — a restyled native `<input type=\"checkbox\">` presented as a switch. Adds `role=\"switch\"` for assistive tech; all native attributes (`checked`, `onChange`, `disabled`, …) pass through.",
+    "description": "Silica Toggle — a restyled native `<input type=\"checkbox\">` presented as a switch. Adds `role=\"switch\"` for assistive tech; all native attributes (`checked`, `onChange`, `disabled`, …) pass through. <Toggle defaultChecked>Email notifications</Toggle>",
     "props": [
       {
         "name": "ToggleProps",
-        "extends": "extends Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    \"size\" | \"color\" | \"type\"\n  >",
+        "extends": "extends Omit<\r\n    React.InputHTMLAttributes<HTMLInputElement>,\r\n    \"size\" | \"color\" | \"type\"\r\n  >",
         "members": [
           {
             "name": "color",
@@ -4854,11 +5442,17 @@
             "optional": true,
             "type": "SilicaSize",
             "doc": "Default `md`."
+          },
+          {
+            "name": "children",
+            "optional": true,
+            "type": "React.ReactNode",
+            "doc": "Caption. Wraps the control in a `<label>` so the text is a click target."
           }
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Toggle } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\nimport { ColorVariantSizeGrid } from \"../lib/ColorGrid\";\r\n\r\nexport function ToggleDemo() {\r\n    const [wifi, setWifi] = useState(true);\r\n\r\n    return (\r\n        <>\r\n            <ColorVariantSizeGrid\r\n                Component={Toggle}\r\n                render={({ color, size }) => (\r\n                    <label className=\"flex items-center gap-2 text-sm\">\r\n                        <Toggle color={color} size={size} defaultChecked />\r\n                        {color ?? size}\r\n                    </label>\r\n                )}\r\n            />\r\n\r\n            <Section title=\"Real use · Wi-Fi setting\">\r\n                <label className=\"flex items-center gap-2 text-sm\">\r\n                    <Toggle\r\n                        color=\"primary\"\r\n                        checked={wifi}\r\n                        onChange={(e) => setWifi(e.target.checked)}\r\n                    />\r\n                    Wi-Fi is {wifi ? \"on\" : \"off\"}\r\n                </label>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "ToggleGroup",
@@ -4876,7 +5470,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { ToggleGroup, ToggleGroupItem } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function ToggleGroupDemo() {\r\n    const [view, setView] = useState<string[]>([\"grid\"]);\r\n    const [format, setFormat] = useState<string[]>([\"bold\"]);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · single-select view switcher\">\r\n                <ToggleGroup value={view} onValueChange={setView}>\r\n                    <ToggleGroupItem value=\"list\">List</ToggleGroupItem>\r\n                    <ToggleGroupItem value=\"grid\">Grid</ToggleGroupItem>\r\n                    <ToggleGroupItem value=\"board\">Board</ToggleGroupItem>\r\n                </ToggleGroup>\r\n            </Section>\r\n\r\n            <Section title=\"Multi-select text formatting\">\r\n                <ToggleGroup multiple value={format} onValueChange={setFormat}>\r\n                    <ToggleGroupItem value=\"bold\">B</ToggleGroupItem>\r\n                    <ToggleGroupItem value=\"italic\">I</ToggleGroupItem>\r\n                    <ToggleGroupItem value=\"underline\">U</ToggleGroupItem>\r\n                </ToggleGroup>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <div className=\"flex flex-wrap items-center gap-4\">\r\n                    {([\"xs\", \"sm\", \"md\", \"lg\"] as const).map((size) => (\r\n                        <ToggleGroup key={size} size={size} defaultValue={[\"grid\"]}>\r\n                            <ToggleGroupItem value=\"list\">List</ToggleGroupItem>\r\n                            <ToggleGroupItem value=\"grid\">Grid</ToggleGroupItem>\r\n                        </ToggleGroup>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Colored active pill\">\r\n                <div className=\"flex flex-wrap items-center gap-4\">\r\n                    {([\"primary\", \"secondary\", \"accent\", \"success\"] as const).map((color) => (\r\n                        <ToggleGroup key={color} color={color} defaultValue={[\"grid\"]}>\r\n                            <ToggleGroupItem value=\"list\">List</ToggleGroupItem>\r\n                            <ToggleGroupItem value=\"grid\">Grid</ToggleGroupItem>\r\n                        </ToggleGroup>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Validator",
@@ -4902,7 +5496,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Validator, ValidatorHint, Input } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Stack } from \"../lib/Section\";\r\n\r\nexport function ValidatorDemo() {\r\n    return (\r\n        <Section title=\"Real use · native validity styling (type to see it flip)\">\r\n            <Stack className=\"max-w-sm\">\r\n                <Validator>\r\n                    <Input required type=\"email\" placeholder=\"you@example.com\" />\r\n                </Validator>\r\n                <ValidatorHint>Enter a valid email address.</ValidatorHint>\r\n\r\n                <Validator>\r\n                    <Input required minLength={8} type=\"password\" placeholder=\"Password (min 8 chars)\" />\r\n                </Validator>\r\n                <ValidatorHint>Must be at least 8 characters.</ValidatorHint>\r\n            </Stack>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "Breadcrumb",
@@ -4917,7 +5511,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Breadcrumb } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function BreadcrumbDemo() {\r\n    return (\r\n        <Section title=\"Real use · navigation trail\">\r\n            <Breadcrumb>\r\n                <li>\r\n                    <a href=\"#\">Home</a>\r\n                </li>\r\n                <li>\r\n                    <a href=\"#\">Projects</a>\r\n                </li>\r\n                <li>\r\n                    <a href=\"#\">Silica UI</a>\r\n                </li>\r\n                <li>\r\n                    <span aria-current=\"page\">Breadcrumb</span>\r\n                </li>\r\n            </Breadcrumb>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "Dock",
@@ -4955,7 +5549,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Dock, DockItem, DockLabel } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\nimport { COLORS } from \"../lib/data\";\r\n\r\nfunction HomeIcon() {\r\n    return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\r\n            <path d=\"m3 11 9-8 9 8M5 10v10h5v-6h4v6h5V10\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n        </svg>\r\n    );\r\n}\r\nfunction SearchIcon() {\r\n    return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\r\n            <circle cx=\"11\" cy=\"11\" r=\"7\" />\r\n            <path d=\"m21 21-4.3-4.3\" strokeLinecap=\"round\" />\r\n        </svg>\r\n    );\r\n}\r\nfunction UserIcon() {\r\n    return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n            <circle cx=\"12\" cy=\"8\" r=\"4\" />\r\n            <path d=\"M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7Z\" />\r\n        </svg>\r\n    );\r\n}\r\n\r\nexport function DockDemo() {\r\n    const [tab, setTab] = useState(\"home\");\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors (active item accent)\">\r\n                <div className=\"flex flex-col gap-4\">\r\n                    {COLORS.slice(0, 6).map((color) => (\r\n                        <Dock key={color} color={color} className=\"max-w-xs rounded-box\">\r\n                            <DockItem active>\r\n                                <HomeIcon />\r\n                                <DockLabel>Home</DockLabel>\r\n                            </DockItem>\r\n                            <DockItem>\r\n                                <SearchIcon />\r\n                                <DockLabel>Search</DockLabel>\r\n                            </DockItem>\r\n                            <DockItem>\r\n                                <UserIcon />\r\n                                <DockLabel>Profile</DockLabel>\r\n                            </DockItem>\r\n                        </Dock>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · interactive bottom nav\">\r\n                <Dock color=\"primary\" className=\"max-w-xs rounded-box\">\r\n                    <DockItem active={tab === \"home\"} onClick={() => setTab(\"home\")}>\r\n                        <HomeIcon />\r\n                        <DockLabel>Home</DockLabel>\r\n                    </DockItem>\r\n                    <DockItem active={tab === \"search\"} onClick={() => setTab(\"search\")}>\r\n                        <SearchIcon />\r\n                        <DockLabel>Search</DockLabel>\r\n                    </DockItem>\r\n                    <DockItem active={tab === \"profile\"} onClick={() => setTab(\"profile\")}>\r\n                        <UserIcon />\r\n                        <DockLabel>Profile</DockLabel>\r\n                    </DockItem>\r\n                </Dock>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Link",
@@ -4983,7 +5577,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Link } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\nimport { COLORS } from \"../lib/data\";\r\n\r\nexport function LinkDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <Row>\r\n                    {COLORS.map((color) => (\r\n                        <Link key={color} href=\"#\" color={color}>\r\n                            {color}\r\n                        </Link>\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Hover-only underline\">\r\n                <Row>\r\n                    <Link href=\"#\" color=\"primary\" hover>\r\n                        Underlines on hover\r\n                    </Link>\r\n                    <Link href=\"#\" color=\"brand\" hover>\r\n                        Also brand\r\n                    </Link>\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · inline in a sentence\">\r\n                <p className=\"max-w-md opacity-80\">\r\n                    By continuing you agree to our{\" \"}\r\n                    <Link href=\"#\" color=\"primary\">\r\n                        Terms of Service\r\n                    </Link>{\" \"}\r\n                    and{\" \"}\r\n                    <Link href=\"#\" color=\"primary\" hover>\r\n                        Privacy Policy\r\n                    </Link>\r\n                    .\r\n                </p>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Menu",
@@ -4998,7 +5592,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Menu, MenuItem, MenuTitle } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function MenuDemo() {\r\n    return (\r\n        <Section title=\"Real use · sidebar navigation\">\r\n            <Menu className=\"max-w-xs\">\r\n                <MenuTitle>Workspace</MenuTitle>\r\n                <MenuItem>\r\n                    <a href=\"#\" aria-current=\"page\">\r\n                        Overview\r\n                    </a>\r\n                </MenuItem>\r\n                <MenuItem>\r\n                    <a href=\"#\">Projects</a>\r\n                </MenuItem>\r\n                <MenuItem>\r\n                    <a href=\"#\">Team</a>\r\n                </MenuItem>\r\n                <MenuTitle>Account</MenuTitle>\r\n                <MenuItem>\r\n                    <a href=\"#\">Settings</a>\r\n                </MenuItem>\r\n                <MenuItem>\r\n                    <button type=\"button\">Sign out</button>\r\n                </MenuItem>\r\n            </Menu>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "Menubar",
@@ -5046,7 +5640,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import {\r\n    Menubar,\r\n    MenubarMenu,\r\n    MenubarTrigger,\r\n    MenubarContent,\r\n    MenubarItem,\r\n    MenubarSeparator,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function MenubarDemo() {\r\n    return (\r\n        <Section title=\"Real use · desktop-app style menu bar\">\r\n            <Menubar>\r\n                <MenubarMenu>\r\n                    <MenubarTrigger>File</MenubarTrigger>\r\n                    <MenubarContent>\r\n                        <MenubarItem>New</MenubarItem>\r\n                        <MenubarItem>Open…</MenubarItem>\r\n                        <MenubarSeparator />\r\n                        <MenubarItem>Exit</MenubarItem>\r\n                    </MenubarContent>\r\n                </MenubarMenu>\r\n                <MenubarMenu>\r\n                    <MenubarTrigger>Edit</MenubarTrigger>\r\n                    <MenubarContent>\r\n                        <MenubarItem>Undo</MenubarItem>\r\n                        <MenubarItem>Redo</MenubarItem>\r\n                        <MenubarSeparator />\r\n                        <MenubarItem>Cut</MenubarItem>\r\n                        <MenubarItem>Copy</MenubarItem>\r\n                        <MenubarItem>Paste</MenubarItem>\r\n                    </MenubarContent>\r\n                </MenubarMenu>\r\n                <MenubarMenu>\r\n                    <MenubarTrigger>View</MenubarTrigger>\r\n                    <MenubarContent>\r\n                        <MenubarItem>Zoom in</MenubarItem>\r\n                        <MenubarItem>Zoom out</MenubarItem>\r\n                    </MenubarContent>\r\n                </MenubarMenu>\r\n            </Menubar>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "Navbar",
@@ -5060,7 +5654,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Navbar, NavbarStart, NavbarCenter, NavbarEnd, Button } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function NavbarDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · site header\">\r\n                <Navbar className=\"rounded-box border border-base-300\">\r\n                    <NavbarStart>\r\n                        <span className=\"text-lg font-bold\">◆ Silica</span>\r\n                    </NavbarStart>\r\n                    <NavbarCenter className=\"hidden gap-4 text-sm sm:flex\">\r\n                        <a href=\"#\">Docs</a>\r\n                        <a href=\"#\">Components</a>\r\n                        <a href=\"#\">Pricing</a>\r\n                    </NavbarCenter>\r\n                    <NavbarEnd>\r\n                        <Button variant=\"ghost\" color=\"neutral\">\r\n                            Sign in\r\n                        </Button>\r\n                        <Button color=\"primary\">Get started</Button>\r\n                    </NavbarEnd>\r\n                </Navbar>\r\n            </Section>\r\n\r\n            <Section title=\"Glass · floating over a hero\">\r\n                <div\r\n                    className=\"flex flex-col gap-24 rounded-box p-4\"\r\n                    style={{\r\n                        backgroundImage:\r\n                            \"linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))\",\r\n                    }}\r\n                >\r\n                    <Navbar className=\"glass\">\r\n                        <NavbarStart>\r\n                            <span className=\"text-lg font-bold\">◆ Silica</span>\r\n                        </NavbarStart>\r\n                        <NavbarCenter className=\"hidden gap-4 text-sm sm:flex\">\r\n                            <a href=\"#\">Docs</a>\r\n                            <a href=\"#\">Components</a>\r\n                            <a href=\"#\">Pricing</a>\r\n                        </NavbarCenter>\r\n                        <NavbarEnd>\r\n                            <Button variant=\"ghost\" color=\"neutral\">\r\n                                Sign in\r\n                            </Button>\r\n                            <Button color=\"primary\">Get started</Button>\r\n                        </NavbarEnd>\r\n                    </Navbar>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "NavigationMenu",
@@ -5116,7 +5710,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import {\r\n    NavigationMenu,\r\n    NavigationMenuItem,\r\n    NavigationMenuTrigger,\r\n    NavigationMenuContent,\r\n    NavigationMenuLink,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function NavigationMenuDemo() {\r\n    return (\r\n        <Section title=\"Real use · site nav with a mega-menu panel\">\r\n            <NavigationMenu>\r\n                <NavigationMenuItem>\r\n                    <NavigationMenuTrigger>Products</NavigationMenuTrigger>\r\n                    <NavigationMenuContent>\r\n                        <ul className=\"grid w-80 gap-1 p-2\">\r\n                            <li>\r\n                                <a href=\"#\" className=\"block rounded-field p-2 hover:bg-base-200\">\r\n                                    <div className=\"font-medium\">Components</div>\r\n                                    <div className=\"text-xs opacity-60\">\r\n                                        95+ primitives on one token system.\r\n                                    </div>\r\n                                </a>\r\n                            </li>\r\n                            <li>\r\n                                <a href=\"#\" className=\"block rounded-field p-2 hover:bg-base-200\">\r\n                                    <div className=\"font-medium\">Builder</div>\r\n                                    <div className=\"text-xs opacity-60\">\r\n                                        Drag-and-drop pages, no code.\r\n                                    </div>\r\n                                </a>\r\n                            </li>\r\n                        </ul>\r\n                    </NavigationMenuContent>\r\n                </NavigationMenuItem>\r\n                <NavigationMenuItem>\r\n                    <NavigationMenuLink href=\"#\">Pricing</NavigationMenuLink>\r\n                </NavigationMenuItem>\r\n                <NavigationMenuItem>\r\n                    <NavigationMenuLink href=\"#\">Docs</NavigationMenuLink>\r\n                </NavigationMenuItem>\r\n            </NavigationMenu>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "Outline",
@@ -5156,7 +5750,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useRef } from \"react\";\r\nimport { Outline } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nconst SECTIONS = [\r\n    { id: \"outline-install\", label: \"Installation\", depth: 0 },\r\n    { id: \"outline-npm\", label: \"Via npm\", depth: 1 },\r\n    { id: \"outline-cdn\", label: \"Via CDN\", depth: 1 },\r\n    { id: \"outline-usage\", label: \"Usage\", depth: 0 },\r\n    { id: \"outline-theming\", label: \"Theming\", depth: 0 },\r\n    { id: \"outline-tokens\", label: \"Color tokens\", depth: 1 },\r\n    { id: \"outline-dark\", label: \"Dark mode\", depth: 1 },\r\n    { id: \"outline-faq\", label: \"FAQ\", depth: 0 },\r\n];\r\n\r\nexport function OutlineDemo() {\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n    return (\r\n        <Section title=\"Real use · scroll-spy docs page (scroll the panel below)\">\r\n            <div className=\"grid grid-cols-[1fr_12rem] gap-6\">\r\n                <div\r\n                    ref={containerRef}\r\n                    className=\"h-80 overflow-y-auto rounded-box border border-base-300 p-6\"\r\n                >\r\n                    {SECTIONS.map((s) => (\r\n                        <section key={s.id} id={s.id} className=\"mb-10 scroll-mt-4\">\r\n                            <h3 className=\"mb-2 text-base font-semibold\">{s.label}</h3>\r\n                            <p className=\"text-sm opacity-70\">\r\n                                Placeholder copy for the “{s.label}” section — long enough to\r\n                                make the panel actually scroll so the active link updates as\r\n                                you go.\r\n                            </p>\r\n                        </section>\r\n                    ))}\r\n                </div>\r\n\r\n                <Outline items={SECTIONS} container={containerRef} offset={24} />\r\n            </div>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "OverflowList",
@@ -5207,14 +5801,14 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { OverflowList, Avatar, Badge } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nconst PEOPLE = [\r\n    \"Ada Lovelace\",\r\n    \"Grace Hopper\",\r\n    \"Alan Turing\",\r\n    \"Katherine Johnson\",\r\n    \"Margaret Hamilton\",\r\n    \"Radia Perlman\",\r\n    \"Barbara Liskov\",\r\n    \"Tim Berners-Lee\",\r\n];\r\n\r\nconst TAGS = [\"design-system\", \"accessibility\", \"performance\", \"dark-mode\", \"tokens\", \"typography\", \"motion\"];\r\n\r\nexport function OverflowListDemo() {\r\n    const [width, setWidth] = useState(420);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · assignee avatars, resizable to see the fold point\">\r\n                <div className=\"flex flex-col gap-3\">\r\n                    <input\r\n                        type=\"range\"\r\n                        min={120}\r\n                        max={640}\r\n                        value={width}\r\n                        onChange={(e) => setWidth(Number(e.target.value))}\r\n                        className=\"max-w-md\"\r\n                    />\r\n                    <div style={{ width }} className=\"rounded-box border border-base-300 p-3\">\r\n                        <OverflowList\r\n                            items={PEOPLE}\r\n                            renderItem={(name) => (\r\n                                <Avatar key={name} alt={name} color=\"primary\" size=\"sm\">\r\n                                    {name\r\n                                        .split(\" \")\r\n                                        .map((w) => w[0])\r\n                                        .join(\"\")}\r\n                                </Avatar>\r\n                            )}\r\n                        />\r\n                    </div>\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Tags with custom overflow renderer\">\r\n                <div className=\"w-80 rounded-box border border-base-300 p-3\">\r\n                    <OverflowList\r\n                        items={TAGS}\r\n                        gap={6}\r\n                        renderItem={(tag) => (\r\n                            <Badge key={tag} color=\"neutral\" variant=\"soft\">\r\n                                {tag}\r\n                            </Badge>\r\n                        )}\r\n                        renderOverflow={(hidden) => (\r\n                            <Badge color=\"primary\" variant=\"soft\" title={hidden.join(\", \")}>\r\n                                +{hidden.length} more\r\n                            </Badge>\r\n                        )}\r\n                    />\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Pagination",
     "package": "@wizeworks/silicaui-react",
     "category": "Navigation",
     "sourceFile": "silicaui-react/src/pagination.tsx",
-    "description": "Silica Pagination — page controls with prev/next and ellipsis. <Pagination page={page} count={12} onChange={setPage} color=\"primary\" />",
+    "description": "Silica Pagination — page controls with prev/next and ellipsis. <Pagination page={page} count={12} onValueChange={setPage} color=\"primary\" />",
     "props": [
       {
         "name": "PaginationProps",
@@ -5233,11 +5827,17 @@
             "doc": "Total number of pages."
           },
           {
-            "name": "onChange",
+            "name": "onValueChange",
             "optional": true,
             "type": "(page: number) => void",
             "doc": "Called with the new page."
           },
+          {
+            "name": "onChange",
+            "optional": true,
+            "type": "(page: number) => void",
+            "doc": "@deprecated Use `onValueChange`. `onChange` is reserved for the native DOM handler on components that wrap a real form element; still honored here so this isn't a breaking change."
+          },
           {
             "name": "siblingCount",
             "optional": true,
@@ -5271,7 +5871,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Pagination } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\nimport { COLORS } from \"../lib/data\";\r\n\r\nexport function PaginationDemo() {\r\n    const [page, setPage] = useState(4);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <div className=\"flex flex-col gap-3\">\r\n                    {COLORS.slice(0, 6).map((color) => (\r\n                        <Pagination\r\n                            key={color}\r\n                            color={color}\r\n                            page={3}\r\n                            count={10}\r\n                            onValueChange={() => {}}\r\n                        />\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <div className=\"flex flex-col gap-3\">\r\n                    {([\"xs\", \"sm\", \"md\", \"lg\"] as const).map((size) => (\r\n                        <Pagination\r\n                            key={size}\r\n                            size={size}\r\n                            color=\"primary\"\r\n                            page={3}\r\n                            count={10}\r\n                            onValueChange={() => {}}\r\n                        />\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · interactive search results\">\r\n                <div className=\"flex max-w-lg flex-col gap-3\">\r\n                    <p className=\"text-sm opacity-70\">\r\n                        Showing page {page} of 12 — 118 results\r\n                    </p>\r\n                    <Pagination\r\n                        color=\"primary\"\r\n                        page={page}\r\n                        count={12}\r\n                        onValueChange={setPage}\r\n                    />\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Sidebar",
@@ -5399,7 +5999,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport {\r\n    SidebarProvider,\r\n    Sidebar,\r\n    SidebarHeader,\r\n    SidebarHeaderBrand,\r\n    SidebarContent,\r\n    SidebarFooter,\r\n    SidebarGroup,\r\n    SidebarGroupLabel,\r\n    SidebarItem,\r\n    SidebarTrigger,\r\n    Wordmark,\r\n    Avatar,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nconst HomeIcon = (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n        <path d=\"M3 12 12 3l9 9\" /> <path d=\"M5 10v10h14V10\" />\r\n    </svg>\r\n);\r\nconst SearchIcon = (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n        <circle cx=\"11\" cy=\"11\" r=\"8\" /> <path d=\"m21 21-4.3-4.3\" />\r\n    </svg>\r\n);\r\nconst UsersIcon = (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n        <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\" /> <circle cx=\"9\" cy=\"7\" r=\"4\" />\r\n        <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\" /> <path d=\"M16 3.13a4 4 0 0 1 0 7.75\" />\r\n    </svg>\r\n);\r\nconst SettingsIcon = (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n        <path d=\"M14 17H5\" /> <path d=\"M19 7h-9\" /> <circle cx=\"17\" cy=\"17\" r=\"3\" /> <circle cx=\"7\" cy=\"7\" r=\"3\" />\r\n    </svg>\r\n);\r\n\r\nfunction AppShell() {\r\n    const [active, setActive] = useState(\"dashboard\");\r\n\r\n    return (\r\n        <div className=\"flex h-[26rem] w-full max-w-2xl overflow-hidden rounded-box border border-base-200\">\r\n            <Sidebar>\r\n                <SidebarHeader>\r\n                    <SidebarHeaderBrand>\r\n                        <Wordmark size=\"sm\" color=\"primary\">Acme</Wordmark>\r\n                    </SidebarHeaderBrand>\r\n                    <SidebarTrigger />\r\n                </SidebarHeader>\r\n                <SidebarContent>\r\n                    <SidebarGroup>\r\n                        <SidebarGroupLabel>Workspace</SidebarGroupLabel>\r\n                        <SidebarItem\r\n                            icon={HomeIcon}\r\n                            active={active === \"dashboard\"}\r\n                            onClick={() => setActive(\"dashboard\")}\r\n                        >\r\n                            Dashboard\r\n                        </SidebarItem>\r\n                        <SidebarItem\r\n                            icon={SearchIcon}\r\n                            active={active === \"search\"}\r\n                            onClick={() => setActive(\"search\")}\r\n                        >\r\n                            Search\r\n                        </SidebarItem>\r\n                        <SidebarItem\r\n                            icon={UsersIcon}\r\n                            active={active === \"team\"}\r\n                            onClick={() => setActive(\"team\")}\r\n                            trailing={<span className=\"badge badge-primary badge-xs\">4</span>}\r\n                        >\r\n                            Team\r\n                        </SidebarItem>\r\n                    </SidebarGroup>\r\n                    <SidebarGroup>\r\n                        <SidebarGroupLabel>Account</SidebarGroupLabel>\r\n                        <SidebarItem\r\n                            icon={SettingsIcon}\r\n                            active={active === \"settings\"}\r\n                            onClick={() => setActive(\"settings\")}\r\n                        >\r\n                            Settings\r\n                        </SidebarItem>\r\n                    </SidebarGroup>\r\n                </SidebarContent>\r\n                <SidebarFooter>\r\n                    <SidebarItem icon={<Avatar size=\"xs\">AL</Avatar>}>Ada Lovelace</SidebarItem>\r\n                </SidebarFooter>\r\n            </Sidebar>\r\n\r\n            <div className=\"flex flex-1 flex-col gap-3 overflow-y-auto p-6\">\r\n                <div className=\"flex items-center gap-2\">\r\n                    <SidebarTrigger />\r\n                    <h4 className=\"text-sm font-semibold capitalize\">{active}</h4>\r\n                </div>\r\n                <p className=\"text-sm opacity-70\">\r\n                    The trigger above lives OUTSIDE the sidebar (in this main content\r\n                    area) yet still toggles it — both triggers share one\r\n                    SidebarProvider.\r\n                </p>\r\n            </div>\r\n        </div>\r\n    );\r\n}\r\n\r\nexport function SidebarDemo() {\r\n    return (\r\n        <Section title=\"Real use · app shell (collapsible, cross-tree trigger)\">\r\n            <SidebarProvider>\r\n                <AppShell />\r\n            </SidebarProvider>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "Steps",
@@ -5432,7 +6032,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Steps, Step, Button } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\nimport { COLORS } from \"../lib/data\";\r\n\r\nconst CHECKOUT = [\"Cart\", \"Shipping\", \"Payment\", \"Done\"];\r\n\r\nexport function StepsDemo() {\r\n    const [current, setCurrent] = useState(1);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors (completed steps)\">\r\n                <div className=\"flex flex-col gap-6\">\r\n                    {COLORS.slice(0, 6).map((color) => (\r\n                        <Steps key={color}>\r\n                            <Step color={color} data-content=\"✓\">\r\n                                Cart\r\n                            </Step>\r\n                            <Step color={color} data-content=\"✓\">\r\n                                Shipping\r\n                            </Step>\r\n                            <Step color={color}>Payment</Step>\r\n                            <Step>Done</Step>\r\n                        </Steps>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · interactive checkout\">\r\n                <div className=\"flex max-w-lg flex-col gap-4\">\r\n                    <Steps>\r\n                        {CHECKOUT.map((label, i) => (\r\n                            <Step\r\n                                key={label}\r\n                                color={i <= current ? \"primary\" : undefined}\r\n                                data-content={i < current ? \"✓\" : undefined}\r\n                            >\r\n                                {label}\r\n                            </Step>\r\n                        ))}\r\n                    </Steps>\r\n                    <Row>\r\n                        <Button\r\n                            variant=\"outline\"\r\n                            color=\"neutral\"\r\n                            disabled={current === 0}\r\n                            onClick={() => setCurrent((c) => Math.max(0, c - 1))}\r\n                        >\r\n                            Back\r\n                        </Button>\r\n                        <Button\r\n                            color=\"primary\"\r\n                            disabled={current === CHECKOUT.length - 1}\r\n                            onClick={() =>\r\n                                setCurrent((c) => Math.min(CHECKOUT.length - 1, c + 1))\r\n                            }\r\n                        >\r\n                            {current === CHECKOUT.length - 2 ? \"Place order\" : \"Next\"}\r\n                        </Button>\r\n                    </Row>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Tabs",
@@ -5478,7 +6078,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import {\r\n    Tabs,\r\n    TabsList,\r\n    TabsTab,\r\n    TabsPanel,\r\n    Input,\r\n    Button,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\nimport { COLORS } from \"../lib/data\";\r\n\r\nexport function TabsDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <Row>\r\n                    {COLORS.slice(0, 6).map((color) => (\r\n                        <Tabs key={color} color={color} defaultValue=\"a\" className=\"w-40\">\r\n                            <TabsList>\r\n                                <TabsTab value=\"a\">One</TabsTab>\r\n                                <TabsTab value=\"b\">Two</TabsTab>\r\n                            </TabsList>\r\n                        </Tabs>\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Variants\">\r\n                {([\"underline\", \"boxed\", \"pills\"] as const).map((variant) => (\r\n                    <Tabs key={variant} variant={variant} color=\"primary\" defaultValue=\"a\">\r\n                        <TabsList>\r\n                            <TabsTab value=\"a\">Account</TabsTab>\r\n                            <TabsTab value=\"b\">Password</TabsTab>\r\n                            <TabsTab value=\"c\">Team</TabsTab>\r\n                        </TabsList>\r\n                    </Tabs>\r\n                ))}\r\n            </Section>\r\n\r\n            <Section title=\"Real use · settings panels\">\r\n                <Tabs variant=\"boxed\" color=\"primary\" defaultValue=\"account\" className=\"max-w-md\">\r\n                    <TabsList>\r\n                        <TabsTab value=\"account\">Account</TabsTab>\r\n                        <TabsTab value=\"password\">Password</TabsTab>\r\n                        <TabsTab value=\"team\">Team</TabsTab>\r\n                    </TabsList>\r\n                    <TabsPanel value=\"account\">\r\n                        <div className=\"flex flex-col gap-3 pt-4\">\r\n                            <Input placeholder=\"Full name\" defaultValue=\"Ada Lovelace\" />\r\n                            <Input placeholder=\"Email\" defaultValue=\"ada@silica.dev\" />\r\n                            <Button color=\"primary\" className=\"w-fit\">\r\n                                Save\r\n                            </Button>\r\n                        </div>\r\n                    </TabsPanel>\r\n                    <TabsPanel value=\"password\">\r\n                        <div className=\"flex flex-col gap-3 pt-4\">\r\n                            <Input placeholder=\"Current password\" type=\"password\" />\r\n                            <Input placeholder=\"New password\" type=\"password\" />\r\n                            <Button color=\"primary\" className=\"w-fit\">\r\n                                Update password\r\n                            </Button>\r\n                        </div>\r\n                    </TabsPanel>\r\n                    <TabsPanel value=\"team\">\r\n                        <p className=\"pt-4 opacity-70\">4 members — 1 seat available.</p>\r\n                    </TabsPanel>\r\n                </Tabs>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Alert",
@@ -5548,7 +6148,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport {\r\n    Alert,\r\n    AlertContent,\r\n    AlertTitle,\r\n    AlertDescription,\r\n    AlertActions,\r\n    Collapsible,\r\n    CollapsibleTrigger,\r\n    CollapsiblePanel,\r\n    Button,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section, Stack } from \"../lib/Section\";\r\nimport { InfoIcon, CheckIcon, WarnIcon, XIcon } from \"../lib/icons\";\r\nimport { SIZES } from \"../lib/data\";\r\n\r\nexport function AlertDemo() {\r\n    const [dismissed, setDismissed] = useState(false);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"dismissible · animates away, then unmounts\">\r\n                <Stack>\r\n                    {!dismissed && (\r\n                        <Alert color=\"info\" dismissible onDismiss={() => setDismissed(true)}>\r\n                            <InfoIcon />A new software update is available.\r\n                        </Alert>\r\n                    )}\r\n                    {dismissed && (\r\n                        <Button size=\"sm\" variant=\"outline\" onClick={() => setDismissed(false)}>\r\n                            Reset\r\n                        </Button>\r\n                    )}\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"banner · full-bleed, edge to edge (no rounding)\">\r\n                <Alert color=\"warning\" banner dismissible variant=\"soft\">\r\n                    <WarnIcon />\r\n                    Scheduled maintenance tonight at 10pm PT — expect brief downtime.\r\n                </Alert>\r\n            </Section>\r\n\r\n            <Section title=\"collapsible detail · nests the existing Collapsible, not a bespoke prop\">\r\n                <Alert color=\"error\" variant=\"soft\">\r\n                    <XIcon />\r\n                    {/* `className=\"contents\"` (a utility, so it wins over the component's\r\n                        own flex-column) keeps AlertContent + AlertActions as direct row\r\n                        children of Alert — the Collapsible only supplies shared open-state\r\n                        context here, not a layout box. That's what lets the icon trigger\r\n                        sit top-right while the label trigger stays under the title, both\r\n                        toggling the one panel. */}\r\n                    <Collapsible className=\"contents\">\r\n                        <AlertContent>\r\n                            <AlertTitle>3 files failed to upload</AlertTitle>\r\n                            <CollapsibleTrigger chevron={false}>Show details</CollapsibleTrigger>\r\n                            <CollapsiblePanel>\r\n                                <ul className=\"list-disc pl-4 text-xs\">\r\n                                    <li>report-q3.pdf — exceeds 5 MB limit</li>\r\n                                    <li>archive.zip — unsupported type</li>\r\n                                    <li>notes.docx — network error</li>\r\n                                </ul>\r\n                            </CollapsiblePanel>\r\n                        </AlertContent>\r\n                        <AlertActions>\r\n                            <CollapsibleTrigger variant=\"icon\" aria-label=\"Toggle details\" />\r\n                        </AlertActions>\r\n                    </Collapsible>\r\n                </Alert>\r\n            </Section>\r\n\r\n            <Section title=\"Colors & structure\">\r\n                <Stack>\r\n                    {/* One-liner: leading icon + message */}\r\n                    <Alert color=\"info\">\r\n                        <InfoIcon />A new software update is available.\r\n                    </Alert>\r\n                    <Alert color=\"success\" variant=\"soft\">\r\n                        <CheckIcon />\r\n                        Your changes have been saved.\r\n                    </Alert>\r\n                    {/* Structured: title + description */}\r\n                    <Alert color=\"warning\" variant=\"soft\">\r\n                        <WarnIcon />\r\n                        <AlertContent>\r\n                            <AlertTitle>Storage almost full</AlertTitle>\r\n                            <AlertDescription>\r\n                                You've used 92% of your quota. Consider upgrading.\r\n                            </AlertDescription>\r\n                        </AlertContent>\r\n                    </Alert>\r\n                    {/* Structured + trailing actions (far right, centered) */}\r\n                    <Alert color=\"error\">\r\n                        <XIcon />\r\n                        <AlertContent>\r\n                            <AlertTitle>Upload failed</AlertTitle>\r\n                            <AlertDescription>\r\n                                The file exceeds the 5 MB limit.\r\n                            </AlertDescription>\r\n                        </AlertContent>\r\n                        <AlertActions>\r\n                            <Button size=\"sm\" color=\"error\" variant=\"soft\">\r\n                                Retry\r\n                            </Button>\r\n                        </AlertActions>\r\n                    </Alert>\r\n                    <Alert color=\"brand\" variant=\"outline\">\r\n                        <InfoIcon />\r\n                        The <code>brand</code> color flows through Alerts too.\r\n                    </Alert>\r\n                    <Alert>\r\n                        <InfoIcon />\r\n                        Neutral alert — no color prop, just the base surface.\r\n                    </Alert>\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Stack className=\"gap-2\">\r\n                    {SIZES.slice(0, 4).map((size) => (\r\n                        <Alert key={size} color=\"info\" size={size}>\r\n                            <InfoIcon />\r\n                            {size}\r\n                        </Alert>\r\n                    ))}\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Glass · notice floating over a colored background\">\r\n                <div\r\n                    className=\"rounded-box p-8\"\r\n                    style={{\r\n                        backgroundImage:\r\n                            \"linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))\",\r\n                    }}\r\n                >\r\n                    <Stack className=\"gap-3\">\r\n                        <Alert className=\"glass\">\r\n                            <InfoIcon />A new software update is available.\r\n                        </Alert>\r\n                        <Alert color=\"success\" className=\"glass\">\r\n                            <CheckIcon />\r\n                            Your changes have been saved.\r\n                        </Alert>\r\n                        <Alert color=\"error\" className=\"glass\">\r\n                            <XIcon />\r\n                            <AlertContent>\r\n                                <AlertTitle>Upload failed</AlertTitle>\r\n                                <AlertDescription>\r\n                                    The file exceeds the 5 MB limit — glass still reads clearly\r\n                                    at error severity.\r\n                                </AlertDescription>\r\n                            </AlertContent>\r\n                            <AlertActions>\r\n                                <Button size=\"sm\" color=\"error\" variant=\"soft\">\r\n                                    Retry\r\n                                </Button>\r\n                            </AlertActions>\r\n                        </Alert>\r\n                    </Stack>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "AlertDialog",
@@ -5585,7 +6185,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import {\r\n    AlertDialog,\r\n    AlertDialogTrigger,\r\n    AlertDialogContent,\r\n    AlertDialogTitle,\r\n    AlertDialogDescription,\r\n    AlertDialogHeader,\r\n    AlertDialogFooter,\r\n    AlertDialogCancel,\r\n    AlertDialogAction,\r\n    Button,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function AlertDialogDemo() {\r\n    return (\r\n        <Section title=\"Real use · Cancel/Action, header + footer\">\r\n            <Row>\r\n                <AlertDialog>\r\n                    <AlertDialogTrigger>\r\n                        <Button color=\"error\" variant=\"outline\">\r\n                            Delete account…\r\n                        </Button>\r\n                    </AlertDialogTrigger>\r\n                    <AlertDialogContent>\r\n                        <AlertDialogTitle>Delete account?</AlertDialogTitle>\r\n                        <AlertDialogDescription>\r\n                            This permanently removes your data. This can't be undone.\r\n                        </AlertDialogDescription>\r\n                        <div className=\"mt-4 flex justify-end gap-2\">\r\n                            <AlertDialogCancel>\r\n                                <Button variant=\"ghost\" color=\"neutral\">\r\n                                    Cancel\r\n                                </Button>\r\n                            </AlertDialogCancel>\r\n                            <AlertDialogAction\r\n                                color=\"error\"\r\n                                onClick={() => console.log(\"account deleted\")}\r\n                            >\r\n                                Delete\r\n                            </AlertDialogAction>\r\n                        </div>\r\n                    </AlertDialogContent>\r\n                </AlertDialog>\r\n\r\n                <AlertDialog>\r\n                    <AlertDialogTrigger>\r\n                        <Button variant=\"outline\">Header/Footer variant</Button>\r\n                    </AlertDialogTrigger>\r\n                    <AlertDialogContent>\r\n                        <AlertDialogHeader>\r\n                            <AlertDialogTitle>Discard changes?</AlertDialogTitle>\r\n                        </AlertDialogHeader>\r\n                        <AlertDialogDescription>\r\n                            You have unsaved changes that will be lost.\r\n                        </AlertDialogDescription>\r\n                        <AlertDialogFooter>\r\n                            <AlertDialogCancel>\r\n                                <Button variant=\"ghost\" color=\"neutral\">\r\n                                    Keep editing\r\n                                </Button>\r\n                            </AlertDialogCancel>\r\n                            <AlertDialogAction color=\"error\">Discard</AlertDialogAction>\r\n                        </AlertDialogFooter>\r\n                    </AlertDialogContent>\r\n                </AlertDialog>\r\n            </Row>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "ContextMenu",
@@ -5671,7 +6271,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import {\r\n    Dialog,\r\n    DialogTrigger,\r\n    DialogClose,\r\n    DialogContent,\r\n    DialogTitle,\r\n    DialogDescription,\r\n    DialogHeader,\r\n    DialogFooter,\r\n    Button,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function DialogDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · destructive-action confirmation\">\r\n                <Dialog>\r\n                    <DialogTrigger>\r\n                        <Button color=\"error\" variant=\"outline\">\r\n                            Delete project…\r\n                        </Button>\r\n                    </DialogTrigger>\r\n                    <DialogContent>\r\n                        <DialogTitle>Delete project?</DialogTitle>\r\n                        <DialogDescription>\r\n                            This will permanently delete the project and all its data. This\r\n                            can't be undone.\r\n                        </DialogDescription>\r\n                        <div className=\"mt-4 flex justify-end gap-2\">\r\n                            <DialogClose>\r\n                                <Button variant=\"ghost\" color=\"neutral\">\r\n                                    Cancel\r\n                                </Button>\r\n                            </DialogClose>\r\n                            <DialogClose>\r\n                                <Button color=\"error\">Delete</Button>\r\n                            </DialogClose>\r\n                        </div>\r\n                    </DialogContent>\r\n                </Dialog>\r\n            </Section>\r\n\r\n            <Section title=\"Header + Footer · placeable docking bars, sticky footer\">\r\n                <Row>\r\n                    <Dialog>\r\n                        <DialogTrigger>\r\n                            <Button variant=\"outline\">Header/Footer</Button>\r\n                        </DialogTrigger>\r\n                        <DialogContent>\r\n                            <DialogHeader>\r\n                                <DialogTitle>Invite teammates</DialogTitle>\r\n                                <DialogClose>\r\n                                    <Button variant=\"ghost\" shape=\"circle\" size=\"sm\">\r\n                                        ✕\r\n                                    </Button>\r\n                                </DialogClose>\r\n                            </DialogHeader>\r\n                            <DialogDescription>\r\n                                Send an invite by email — they'll get access once they accept.\r\n                            </DialogDescription>\r\n                            <DialogFooter>\r\n                                <DialogClose>\r\n                                    <Button variant=\"ghost\" color=\"neutral\">\r\n                                        Cancel\r\n                                    </Button>\r\n                                </DialogClose>\r\n                                <DialogClose>\r\n                                    <Button>Send invite</Button>\r\n                                </DialogClose>\r\n                            </DialogFooter>\r\n                        </DialogContent>\r\n                    </Dialog>\r\n\r\n                    <Dialog>\r\n                        <DialogTrigger>\r\n                            <Button variant=\"outline\">Sticky footer (scrolling content)</Button>\r\n                        </DialogTrigger>\r\n                        <DialogContent className=\"max-h-[70dvh]\">\r\n                            <DialogHeader sticky>\r\n                                <DialogTitle>Terms of service</DialogTitle>\r\n                            </DialogHeader>\r\n                            <DialogDescription>\r\n                                {Array.from({ length: 12 }, (_, i) => (\r\n                                    <p key={i} className=\"mb-3\">\r\n                                        Section {i + 1} — placeholder legal text to force this\r\n                                        dialog to scroll so the sticky footer below stays pinned.\r\n                                    </p>\r\n                                ))}\r\n                            </DialogDescription>\r\n                            <DialogFooter sticky>\r\n                                <DialogClose>\r\n                                    <Button variant=\"ghost\" color=\"neutral\">\r\n                                        Decline\r\n                                    </Button>\r\n                                </DialogClose>\r\n                                <DialogClose>\r\n                                    <Button>Accept</Button>\r\n                                </DialogClose>\r\n                            </DialogFooter>\r\n                        </DialogContent>\r\n                    </Dialog>\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Glass · frosted popup over the dimmed backdrop\">\r\n                <Dialog>\r\n                    <DialogTrigger>\r\n                        <Button variant=\"outline\">Glass dialog</Button>\r\n                    </DialogTrigger>\r\n                    <DialogContent className=\"glass\">\r\n                        <DialogTitle>Restart required</DialogTitle>\r\n                        <DialogDescription>\r\n                            <code>DialogContent className=&quot;glass&quot;</code> frosts the\r\n                            popup over the existing dimmed backdrop — same class, no new prop.\r\n                        </DialogDescription>\r\n                        <div className=\"mt-4 flex justify-end gap-2\">\r\n                            <DialogClose>\r\n                                <Button variant=\"ghost\" color=\"neutral\">\r\n                                    Later\r\n                                </Button>\r\n                            </DialogClose>\r\n                            <DialogClose>\r\n                                <Button>Restart now</Button>\r\n                            </DialogClose>\r\n                        </div>\r\n                    </DialogContent>\r\n                </Dialog>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Drawer",
@@ -5733,7 +6333,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import {\r\n    Drawer,\r\n    DrawerTrigger,\r\n    DrawerClose,\r\n    DrawerContent,\r\n    DrawerTitle,\r\n    DrawerDescription,\r\n    DrawerHeader,\r\n    DrawerFooter,\r\n    Button,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function DrawerDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · navigation drawer\">\r\n                <Row>\r\n                    {([\"left\", \"right\", \"top\", \"bottom\"] as const).map((side) => (\r\n                        <Drawer key={side}>\r\n                            <DrawerTrigger>\r\n                                <Button variant=\"outline\" color=\"neutral\">\r\n                                    {side}\r\n                                </Button>\r\n                            </DrawerTrigger>\r\n                            <DrawerContent side={side}>\r\n                                <DrawerTitle>Navigation</DrawerTitle>\r\n                                <DrawerDescription>\r\n                                    Slides in from the {side} edge.\r\n                                </DrawerDescription>\r\n                                <nav className=\"flex flex-col gap-2 py-4 text-sm\">\r\n                                    <a href=\"#\">Dashboard</a>\r\n                                    <a href=\"#\">Projects</a>\r\n                                    <a href=\"#\">Settings</a>\r\n                                </nav>\r\n                                <DrawerClose>\r\n                                    <Button variant=\"ghost\" color=\"neutral\">\r\n                                        Close\r\n                                    </Button>\r\n                                </DrawerClose>\r\n                            </DrawerContent>\r\n                        </Drawer>\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Header + Footer · sticky, scrolling content\">\r\n                <Drawer>\r\n                    <DrawerTrigger>\r\n                        <Button variant=\"outline\">Filters (sticky header/footer)</Button>\r\n                    </DrawerTrigger>\r\n                    <DrawerContent side=\"right\">\r\n                        <DrawerHeader sticky>\r\n                            <DrawerTitle>Filters</DrawerTitle>\r\n                            <DrawerClose>\r\n                                <Button variant=\"ghost\" shape=\"circle\" size=\"sm\">\r\n                                    ✕\r\n                                </Button>\r\n                            </DrawerClose>\r\n                        </DrawerHeader>\r\n                        <div className=\"flex flex-col gap-3 text-sm\">\r\n                            {Array.from({ length: 14 }, (_, i) => (\r\n                                <label key={i} className=\"flex items-center gap-2\">\r\n                                    <input type=\"checkbox\" /> Filter option {i + 1}\r\n                                </label>\r\n                            ))}\r\n                        </div>\r\n                        <DrawerFooter sticky>\r\n                            <DrawerClose>\r\n                                <Button variant=\"ghost\" color=\"neutral\">\r\n                                    Reset\r\n                                </Button>\r\n                            </DrawerClose>\r\n                            <DrawerClose>\r\n                                <Button>Apply</Button>\r\n                            </DrawerClose>\r\n                        </DrawerFooter>\r\n                    </DrawerContent>\r\n                </Drawer>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "ImperativeAlertDialogProvider",
@@ -5781,7 +6381,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Indicator, IndicatorItem, Badge, Button, Status } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function IndicatorDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Placements\">\r\n                <Row>\r\n                    {([\"top-end\", \"top-start\", \"bottom-end\", \"bottom-start\"] as const).map(\r\n                        (placement) => (\r\n                            <Indicator key={placement}>\r\n                                <IndicatorItem placement={placement}>\r\n                                    <Badge color=\"error\" size=\"xs\">\r\n                                        3\r\n                                    </Badge>\r\n                                </IndicatorItem>\r\n                                <Button variant=\"outline\" color=\"neutral\">\r\n                                    {placement}\r\n                                </Button>\r\n                            </Indicator>\r\n                        ),\r\n                    )}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · notification badge + presence dot\">\r\n                <Row>\r\n                    <Indicator>\r\n                        <IndicatorItem>\r\n                            <Badge color=\"error\" size=\"xs\">\r\n                                5\r\n                            </Badge>\r\n                        </IndicatorItem>\r\n                        <Button variant=\"outline\" color=\"neutral\">\r\n                            Inbox\r\n                        </Button>\r\n                    </Indicator>\r\n                    <Indicator>\r\n                        <IndicatorItem>\r\n                            <Status color=\"success\" ping />\r\n                        </IndicatorItem>\r\n                        <Button variant=\"outline\" color=\"neutral\">\r\n                            Ada Lovelace\r\n                        </Button>\r\n                    </Indicator>\r\n                </Row>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Lightbox",
@@ -5832,7 +6432,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Lightbox, type LightboxItem } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\n// Stand-in \"photos\" (data URIs, always load offline): a gradient tile with a\r\n// number, so the viewer/nav path is demonstrated without a network request.\r\nfunction placeholder(n: number, from: string, to: string): string {\r\n    return `data:image/svg+xml,${encodeURIComponent(\r\n        `<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'>` +\r\n            `<defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>` +\r\n            `<stop offset='0' stop-color='${from}'/><stop offset='1' stop-color='${to}'/>` +\r\n            `</linearGradient></defs>` +\r\n            `<rect width='800' height='600' fill='url(#g)'/>` +\r\n            `<text x='400' y='330' font-size='180' font-family='sans-serif' font-weight='700' fill='rgba(255,255,255,.85)' text-anchor='middle'>${n}</text>` +\r\n            `</svg>`,\r\n    )}`;\r\n}\r\n\r\nconst PHOTOS: LightboxItem[] = [\r\n    { src: placeholder(1, \"#6366f1\", \"#ec4899\"), caption: \"Photo 1\" },\r\n    { src: placeholder(2, \"#f97316\", \"#eab308\"), caption: \"Photo 2\" },\r\n    { src: placeholder(3, \"#10b981\", \"#06b6d4\"), caption: \"Photo 3\" },\r\n    { src: placeholder(4, \"#8b5cf6\", \"#ec4899\"), caption: \"Photo 4\" },\r\n];\r\n\r\nexport function LightboxDemo() {\r\n    const [index, setIndex] = useState<number | null>(null);\r\n\r\n    return (\r\n        <Section title=\"Real use · thumbnail grid opens a full-viewport viewer\">\r\n            <div className=\"grid grid-cols-4 gap-2\">\r\n                {PHOTOS.map((p, i) => (\r\n                    <button\r\n                        key={p.src}\r\n                        type=\"button\"\r\n                        className=\"overflow-hidden rounded-field\"\r\n                        onClick={() => setIndex(i)}\r\n                    >\r\n                        <img src={p.src} alt=\"\" className=\"block h-24 w-full object-cover\" />\r\n                    </button>\r\n                ))}\r\n            </div>\r\n            <Lightbox items={PHOTOS} index={index} onIndexChange={setIndex} />\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "Loading",
@@ -5860,7 +6460,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Loading, Button } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\nimport { SIZES } from \"../lib/data\";\r\n\r\nexport function LoadingDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Sizes\">\r\n                <Row>\r\n                    {SIZES.map((size) => (\r\n                        <Loading key={size} size={size} />\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · inline with text, and colored\">\r\n                <div className=\"flex flex-col gap-2 text-sm\">\r\n                    <span className=\"flex items-center gap-2\">\r\n                        <Loading size=\"sm\" />\r\n                        Loading your dashboard…\r\n                    </span>\r\n                    <span className=\"flex items-center gap-2 text-primary\">\r\n                        <Loading size=\"sm\" />\r\n                        Syncing changes…\r\n                    </span>\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Button's built-in spinner (for comparison)\">\r\n                <Row>\r\n                    <Button color=\"primary\" loading>\r\n                        Saving…\r\n                    </Button>\r\n                </Row>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Overlay",
@@ -5900,7 +6500,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Overlay, Badge, Button } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nfunction placeholder(label: string, from: string, to: string): string {\r\n    return `data:image/svg+xml,${encodeURIComponent(\r\n        `<svg xmlns='http://www.w3.org/2000/svg' width='400' height='260'>` +\r\n            `<defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>` +\r\n            `<stop offset='0' stop-color='${from}'/><stop offset='1' stop-color='${to}'/>` +\r\n            `</linearGradient></defs>` +\r\n            `<rect width='400' height='260' fill='url(#g)'/>` +\r\n            `</svg>`,\r\n    )}`;\r\n}\r\n\r\nexport function OverlayDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · caption scrim, always visible\">\r\n                <div className=\"max-w-sm\">\r\n                    <Overlay\r\n                        className=\"rounded-box\"\r\n                        overlay={\r\n                            <div>\r\n                                <h3 className=\"text-base font-semibold\">Mountain sunrise</h3>\r\n                                <p className=\"text-sm opacity-80\">Banff National Park</p>\r\n                            </div>\r\n                        }\r\n                    >\r\n                        <img src={placeholder(\"1\", \"#0ea5e9\", \"#1e3a8a\")} alt=\"\" />\r\n                    </Overlay>\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Placement · top / bottom / full\">\r\n                <Row>\r\n                    {([\"top\", \"bottom\", \"full\"] as const).map((placement) => (\r\n                        <div key={placement} className=\"w-48\">\r\n                            <Overlay\r\n                                className=\"rounded-box\"\r\n                                placement={placement}\r\n                                overlay={<Badge color=\"primary\">{placement}</Badge>}\r\n                            >\r\n                                <img src={placeholder(placement, \"#f97316\", \"#7c2d12\")} alt=\"\" />\r\n                            </Overlay>\r\n                        </div>\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"reveal=&quot;hover&quot; · gallery grid, scrim fades in on hover/focus\">\r\n                <div className=\"grid max-w-md grid-cols-3 gap-2\">\r\n                    {[\"10b981-06b6d4\", \"8b5cf6-ec4899\", \"f59e0b-ef4444\"].map((pair, i) => {\r\n                        const [from, to] = pair.split(\"-\").map((c) => `#${c}`);\r\n                        return (\r\n                            <Overlay\r\n                                key={pair}\r\n                                className=\"rounded-field\"\r\n                                reveal=\"hover\"\r\n                                placement=\"full\"\r\n                                overlay={\r\n                                    <Button size=\"sm\" color=\"primary\">\r\n                                        View\r\n                                    </Button>\r\n                                }\r\n                            >\r\n                                <img src={placeholder(`g${i}`, from!, to!)} alt=\"\" />\r\n                            </Overlay>\r\n                        );\r\n                    })}\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Popover",
@@ -5950,7 +6550,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import {\r\n    Popover,\r\n    PopoverTrigger,\r\n    PopoverContent,\r\n    PopoverTitle,\r\n    PopoverDescription,\r\n    Button,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function PopoverDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · click-triggered info panel\">\r\n                <Popover>\r\n                    <PopoverTrigger>\r\n                        <Button variant=\"outline\" color=\"neutral\">\r\n                            Storage details\r\n                        </Button>\r\n                    </PopoverTrigger>\r\n                    <PopoverContent arrow>\r\n                        <PopoverTitle>Storage</PopoverTitle>\r\n                        <PopoverDescription>\r\n                            92% of your 100 GB quota is used. Upgrade your plan for more\r\n                            space.\r\n                        </PopoverDescription>\r\n                    </PopoverContent>\r\n                </Popover>\r\n            </Section>\r\n\r\n            <Section title=\"Glass · frosted panel\">\r\n                <div\r\n                    className=\"flex justify-center rounded-box p-16\"\r\n                    style={{\r\n                        backgroundImage:\r\n                            \"linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))\",\r\n                    }}\r\n                >\r\n                    <Popover>\r\n                        <PopoverTrigger>\r\n                            <Button variant=\"outline\" color=\"neutral\">\r\n                                Storage details\r\n                            </Button>\r\n                        </PopoverTrigger>\r\n                        <PopoverContent className=\"glass\" arrow>\r\n                            <PopoverTitle>Storage</PopoverTitle>\r\n                            <PopoverDescription>\r\n                                <code>PopoverContent className=&quot;glass&quot;</code> — the\r\n                                gradient behind it shows through the blur.\r\n                            </PopoverDescription>\r\n                        </PopoverContent>\r\n                    </Popover>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Progress",
@@ -6008,14 +6608,14 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState, useEffect } from \"react\";\r\nimport { Progress, Button } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row, LabeledRow } from \"../lib/Section\";\r\nimport { COLORS, SIZES } from \"../lib/data\";\r\n\r\nexport function ProgressDemo() {\r\n    const [pct, setPct] = useState(40);\r\n    const [upload, setUpload] = useState(0);\r\n\r\n    useEffect(() => {\r\n        const id = setInterval(\r\n            () => setUpload((p) => (p >= 100 ? 0 : p + 4)),\r\n            180,\r\n        );\r\n        return () => clearInterval(id);\r\n    }, []);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <div className=\"grid max-w-md gap-4\">\r\n                    {COLORS.map((color) => (\r\n                        <LabeledRow key={color} label={color}>\r\n                            <Progress color={color} value={65} />\r\n                        </LabeledRow>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <div className=\"flex max-w-md flex-col gap-2\">\r\n                    {SIZES.map((size) => (\r\n                        <Progress key={size} color=\"primary\" size={size} value={60} />\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"showValue · built-in label row (replaces hand-rolled LabeledRow)\">\r\n                <div className=\"grid max-w-md gap-4\">\r\n                    <Progress color=\"brand\" value={upload} showValue label=\"Uploading photo.png\" />\r\n                    <Progress color=\"success\" value={3} max={4} showValue formatValue={(v, max) => `${v} of ${max} steps`} label=\"Onboarding\" />\r\n                    <Progress color=\"warning\" value={pct} showValue />\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · task + upload progress\">\r\n                <div className=\"grid max-w-md gap-4\">\r\n                    <LabeledRow label=\"Onboarding · 3 of 4 steps\">\r\n                        <Progress color=\"success\" value={3} max={4} />\r\n                    </LabeledRow>\r\n                    <LabeledRow label={`Uploading photo.png · ${upload}%`}>\r\n                        <Progress color=\"brand\" value={upload} />\r\n                    </LabeledRow>\r\n                    <LabeledRow label=\"Indeterminate (duration unknown)\">\r\n                        <Progress color=\"primary\" />\r\n                    </LabeledRow>\r\n                    <LabeledRow label={`Interactive · ${pct}%`}>\r\n                        <Progress color=\"warning\" value={pct} />\r\n                    </LabeledRow>\r\n                    <Row>\r\n                        <Button\r\n                            size=\"sm\"\r\n                            variant=\"outline\"\r\n                            color=\"neutral\"\r\n                            onClick={() => setPct((p) => Math.max(0, p - 10))}\r\n                        >\r\n                            −10\r\n                        </Button>\r\n                        <Button\r\n                            size=\"sm\"\r\n                            variant=\"outline\"\r\n                            color=\"neutral\"\r\n                            onClick={() => setPct((p) => Math.min(100, p + 10))}\r\n                        >\r\n                            +10\r\n                        </Button>\r\n                    </Row>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "RadialProgress",
     "package": "@wizeworks/silicaui-react",
     "category": "Feedback & overlay",
     "sourceFile": "silicaui-react/src/radial-progress.tsx",
-    "description": "Silica RadialProgress — a circular progress ring with a centered label. <RadialProgress value={70} color=\"success\" /> <RadialProgress value={40} size=\"7rem\" thickness=\"0.75rem\">40%</RadialProgress> Defaults the label to `{value}%`; pass children to override.",
+    "description": "Silica RadialProgress — a circular progress ring with a centered label. <RadialProgress value={70} color=\"success\" /> <RadialProgress value={40} diameter=\"7rem\" thickness=\"0.75rem\">40%</RadialProgress> Defaults the label to `{value}%`; pass children to override.",
     "props": [
       {
         "name": "RadialProgressProps",
@@ -6028,10 +6628,10 @@
             "doc": "Progress percentage, 0–100."
           },
           {
-            "name": "size",
+            "name": "diameter",
             "optional": true,
             "type": "string",
-            "doc": "Overall diameter (any CSS length). Default `5rem`."
+            "doc": "Overall diameter (any CSS length). Default `5rem`. Named `diameter`, not `size`, on purpose: everywhere else in Silica `size` is the `xs`–`xl` scale, so `size=\"lg\"` used to type-check here and emit `--size: lg` — an invalid length that silently collapsed the ring. Pairs with `thickness`, which is also a CSS length."
           },
           {
             "name": "thickness",
@@ -6048,7 +6648,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState, useEffect } from \"react\";\nimport { RadialProgress } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nexport function RadialProgressDemo() {\n    const [pct, setPct] = useState(0);\n\n    useEffect(() => {\n        const id = setInterval(() => setPct((p) => (p >= 100 ? 0 : p + 5)), 200);\n        return () => clearInterval(id);\n    }, []);\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <Row>\n                    {COLORS.slice(0, 6).map((color) => (\n                        <RadialProgress key={color} value={70} color={color} />\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Row>\n                    <RadialProgress value={60} color=\"primary\" diameter=\"3rem\" thickness=\"0.35rem\" />\n                    <RadialProgress value={60} color=\"primary\" diameter=\"5rem\" thickness=\"0.5rem\" />\n                    <RadialProgress value={60} color=\"primary\" diameter=\"8rem\" thickness=\"0.75rem\" />\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · animated upload progress\">\n                <RadialProgress value={pct} color=\"brand\" diameter=\"6rem\" />\n            </Section>\n        </>\n    );\n}"
   },
   {
     "name": "Skeleton",
@@ -6070,7 +6670,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Skeleton } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function SkeletonDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Shapes\">\r\n                <Row>\r\n                    <Skeleton className=\"h-6 w-32\" />\r\n                    <Skeleton shape=\"circle\" className=\"h-12 w-12\" />\r\n                    <Skeleton shape=\"text\" className=\"w-40\" />\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · loading card\">\r\n                <div className=\"flex max-w-sm flex-col gap-3 rounded-box border border-base-300 p-4\">\r\n                    <div className=\"flex items-center gap-3\">\r\n                        <Skeleton shape=\"circle\" className=\"h-10 w-10\" />\r\n                        <div className=\"flex flex-1 flex-col gap-2\">\r\n                            <Skeleton shape=\"text\" className=\"w-32\" />\r\n                            <Skeleton shape=\"text\" className=\"w-20\" />\r\n                        </div>\r\n                    </div>\r\n                    <Skeleton className=\"h-32 w-full\" />\r\n                    <Skeleton shape=\"text\" className=\"w-full\" />\r\n                    <Skeleton shape=\"text\" className=\"w-2/3\" />\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Status",
@@ -6110,7 +6710,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Status } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\nimport { COLORS, SIZES } from \"../lib/data\";\r\n\r\nexport function StatusDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <Row>\r\n                    {COLORS.map((color) => (\r\n                        <span key={color} className=\"flex items-center gap-1.5 text-sm\">\r\n                            <Status color={color} label={color} />\r\n                            {color}\r\n                        </span>\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Row>\r\n                    {SIZES.map((size) => (\r\n                        <span key={size} className=\"flex items-center gap-1.5 text-sm\">\r\n                            <Status color=\"primary\" size={size} />\r\n                            {size}\r\n                        </span>\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · team presence\">\r\n                <div className=\"flex flex-col gap-2 text-sm\">\r\n                    <span className=\"flex items-center gap-1.5\">\r\n                        <Status color=\"success\" ping label=\"Online\" />\r\n                        Ada Lovelace — active now\r\n                    </span>\r\n                    <span className=\"flex items-center gap-1.5\">\r\n                        <Status color=\"warning\" label=\"Away\" />\r\n                        Grace Hopper — away\r\n                    </span>\r\n                    <span className=\"flex items-center gap-1.5\">\r\n                        <Status color=\"neutral\" label=\"Offline\" />\r\n                        Alan Turing — offline\r\n                    </span>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "ToastProvider",
@@ -6221,7 +6821,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Tooltip, TooltipProvider, Button } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function TooltipDemo() {\r\n    return (\r\n        <TooltipProvider>\r\n            <Section title=\"Real use · sides (hover or focus a trigger)\">\r\n                <Row>\r\n                    {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\r\n                        <Tooltip key={side} content={`On the ${side}`} side={side}>\r\n                            <Button variant=\"outline\" color=\"neutral\">\r\n                                {side}\r\n                            </Button>\r\n                        </Tooltip>\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Grouped delay (adjacent tooltips open instantly)\">\r\n                <Row>\r\n                    <Tooltip content=\"Copy link\">\r\n                        <Button variant=\"ghost\" color=\"neutral\">\r\n                            Copy\r\n                        </Button>\r\n                    </Tooltip>\r\n                    <Tooltip content=\"Share\">\r\n                        <Button variant=\"ghost\" color=\"neutral\">\r\n                            Share\r\n                        </Button>\r\n                    </Tooltip>\r\n                    <Tooltip content=\"Delete\">\r\n                        <Button variant=\"ghost\" color=\"error\">\r\n                            Delete\r\n                        </Button>\r\n                    </Tooltip>\r\n                </Row>\r\n            </Section>\r\n        </TooltipProvider>\r\n    );\r\n}"
   },
   {
     "name": "AppShell",
@@ -6251,7 +6851,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport {\r\n    AppShell,\r\n    AppShellSidebar,\r\n    AppShellHeader,\r\n    AppShellMain,\r\n    AppShellFooter,\r\n    SidebarProvider,\r\n    Sidebar,\r\n    SidebarHeader,\r\n    SidebarHeaderBrand,\r\n    SidebarContent,\r\n    SidebarGroup,\r\n    SidebarGroupLabel,\r\n    SidebarItem,\r\n    SidebarTrigger,\r\n    Navbar,\r\n    NavbarStart,\r\n    NavbarEnd,\r\n    Footer,\r\n    Wordmark,\r\n    Button,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nconst HomeIcon = (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n        <path d=\"M3 12 12 3l9 9\" /> <path d=\"M5 10v10h14V10\" />\r\n    </svg>\r\n);\r\nconst SettingsIcon = (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n        <path d=\"M14 17H5\" /> <path d=\"M19 7h-9\" /> <circle cx=\"17\" cy=\"17\" r=\"3\" /> <circle cx=\"7\" cy=\"7\" r=\"3\" />\r\n    </svg>\r\n);\r\n\r\nexport function AppShellDemo() {\r\n    const [active, setActive] = useState(\"dashboard\");\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · sidebar + header + footer (same AppShell as below, different slots)\">\r\n                <div className=\"h-[26rem] w-full max-w-2xl overflow-hidden rounded-box border border-base-300\">\r\n                    <SidebarProvider>\r\n                        <AppShell>\r\n                            <AppShellSidebar>\r\n                                <Sidebar>\r\n                                    <SidebarHeader>\r\n                                        <SidebarHeaderBrand>\r\n                                            <Wordmark size=\"sm\" color=\"primary\">Acme</Wordmark>\r\n                                        </SidebarHeaderBrand>\r\n                                        <SidebarTrigger />\r\n                                    </SidebarHeader>\r\n                                    <SidebarContent>\r\n                                        <SidebarGroup>\r\n                                            <SidebarGroupLabel>Workspace</SidebarGroupLabel>\r\n                                            <SidebarItem\r\n                                                icon={HomeIcon}\r\n                                                active={active === \"dashboard\"}\r\n                                                onClick={() => setActive(\"dashboard\")}\r\n                                            >\r\n                                                Dashboard\r\n                                            </SidebarItem>\r\n                                            <SidebarItem\r\n                                                icon={SettingsIcon}\r\n                                                active={active === \"settings\"}\r\n                                                onClick={() => setActive(\"settings\")}\r\n                                            >\r\n                                                Settings\r\n                                            </SidebarItem>\r\n                                        </SidebarGroup>\r\n                                    </SidebarContent>\r\n                                </Sidebar>\r\n                            </AppShellSidebar>\r\n\r\n                            <AppShellHeader>\r\n                                <Navbar className=\"border-b border-base-300\">\r\n                                    <NavbarStart>\r\n                                        <span className=\"text-sm font-semibold capitalize\">{active}</span>\r\n                                    </NavbarStart>\r\n                                    <NavbarEnd>\r\n                                        <Button size=\"sm\" color=\"primary\">\r\n                                            New\r\n                                        </Button>\r\n                                    </NavbarEnd>\r\n                                </Navbar>\r\n                            </AppShellHeader>\r\n\r\n                            <AppShellMain className=\"p-6\">\r\n                                <p className=\"text-sm opacity-70\">\r\n                                    Content for “{active}” — this pane scrolls independently; try\r\n                                    collapsing the sidebar.\r\n                                </p>\r\n                                {Array.from({ length: 12 }, (_, i) => (\r\n                                    <p key={i} className=\"mt-3 text-sm opacity-60\">\r\n                                        Filler paragraph {i + 1} to make the main area scroll.\r\n                                    </p>\r\n                                ))}\r\n                            </AppShellMain>\r\n\r\n                            <AppShellFooter>\r\n                                <Footer center className=\"border-t border-base-300 py-3 text-xs\">\r\n                                    © 2026 Acme, Inc.\r\n                                </Footer>\r\n                            </AppShellFooter>\r\n                        </AppShell>\r\n                    </SidebarProvider>\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Same AppShell, no sidebar · header + footer only\">\r\n                <div className=\"h-64 w-full max-w-2xl overflow-hidden rounded-box border border-base-300\">\r\n                    <AppShell>\r\n                        <AppShellHeader>\r\n                            <Navbar className=\"border-b border-base-300\">\r\n                                <NavbarStart>\r\n                                    <span className=\"text-sm font-semibold\">Acme</span>\r\n                                </NavbarStart>\r\n                            </Navbar>\r\n                        </AppShellHeader>\r\n                        <AppShellMain className=\"p-6\">\r\n                            <p className=\"text-sm opacity-70\">\r\n                                No sidebar slot rendered — its grid column collapses to zero\r\n                                automatically.\r\n                            </p>\r\n                        </AppShellMain>\r\n                        <AppShellFooter>\r\n                            <Footer center className=\"border-t border-base-300 py-3 text-xs\">\r\n                                © 2026 Acme, Inc.\r\n                            </Footer>\r\n                        </AppShellFooter>\r\n                    </AppShell>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Divider",
@@ -6273,7 +6873,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Divider, Button } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function DividerDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Plain & labeled\">\r\n                <div className=\"flex max-w-sm flex-col\">\r\n                    <p className=\"text-sm opacity-70\">Continue with your account</p>\r\n                    <Divider />\r\n                    <p className=\"text-sm opacity-70\">Or use a different method</p>\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · sign-in split\">\r\n                <div className=\"flex max-w-sm flex-col gap-3\">\r\n                    <Button color=\"neutral\" variant=\"outline\">\r\n                        Continue with email\r\n                    </Button>\r\n                    <Divider>OR</Divider>\r\n                    <Button color=\"primary\">Continue with Google</Button>\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Vertical (in a row)\">\r\n                <div className=\"flex h-8 items-center text-sm\">\r\n                    <span>Docs</span>\r\n                    <Divider orientation=\"vertical\" />\r\n                    <span>Pricing</span>\r\n                    <Divider orientation=\"vertical\" />\r\n                    <span>Blog</span>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Footer",
@@ -6299,7 +6899,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Footer, FooterTitle, Link } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function FooterDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · multi-column site footer\">\r\n                <Footer className=\"rounded-box border border-base-300 p-6\">\r\n                    <nav>\r\n                        <FooterTitle>Product</FooterTitle>\r\n                        <Link href=\"#\">Features</Link>\r\n                        <Link href=\"#\">Pricing</Link>\r\n                        <Link href=\"#\">Changelog</Link>\r\n                    </nav>\r\n                    <nav>\r\n                        <FooterTitle>Company</FooterTitle>\r\n                        <Link href=\"#\">About</Link>\r\n                        <Link href=\"#\">Careers</Link>\r\n                        <Link href=\"#\">Contact</Link>\r\n                    </nav>\r\n                    <nav>\r\n                        <FooterTitle>Legal</FooterTitle>\r\n                        <Link href=\"#\">Terms</Link>\r\n                        <Link href=\"#\">Privacy</Link>\r\n                    </nav>\r\n                </Footer>\r\n            </Section>\r\n\r\n            <Section title=\"Centered\">\r\n                <Footer center className=\"rounded-box border border-base-300 p-6\">\r\n                    <div>\r\n                        <p>© 2026 Silica UI — all rights reserved.</p>\r\n                    </div>\r\n                </Footer>\r\n            </Section>\r\n\r\n            <Section title=\"Glass · footer over a colored page background\">\r\n                <div\r\n                    className=\"flex flex-col justify-end gap-24 rounded-box p-4\"\r\n                    style={{\r\n                        backgroundImage:\r\n                            \"linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))\",\r\n                    }}\r\n                >\r\n                    <Footer className=\"glass p-6\">\r\n                        <nav>\r\n                            <FooterTitle>Product</FooterTitle>\r\n                            <Link href=\"#\">Features</Link>\r\n                            <Link href=\"#\">Pricing</Link>\r\n                            <Link href=\"#\">Changelog</Link>\r\n                        </nav>\r\n                        <nav>\r\n                            <FooterTitle>Company</FooterTitle>\r\n                            <Link href=\"#\">About</Link>\r\n                            <Link href=\"#\">Careers</Link>\r\n                            <Link href=\"#\">Contact</Link>\r\n                        </nav>\r\n                        <nav>\r\n                            <FooterTitle>Legal</FooterTitle>\r\n                            <Link href=\"#\">Terms</Link>\r\n                            <Link href=\"#\">Privacy</Link>\r\n                        </nav>\r\n                    </Footer>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Hero",
@@ -6313,7 +6913,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Hero, HeroContent, HeroOverlay, Button } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function HeroDemo() {\r\n    return (\r\n        <Section title=\"Real use · landing banner\">\r\n            <Hero\r\n                className=\"rounded-box\"\r\n                style={{\r\n                    backgroundImage:\r\n                        \"linear-gradient(135deg, #6366f1, #ec4899)\",\r\n                }}\r\n            >\r\n                <HeroOverlay />\r\n                <HeroContent className=\"text-center text-white\">\r\n                    <div className=\"max-w-md\">\r\n                        <h1 className=\"text-4xl font-bold\">Ship faster with Silica</h1>\r\n                        <p className=\"py-4 opacity-90\">\r\n                            One token system, every component, zero lock-in.\r\n                        </p>\r\n                        <Button color=\"primary\">Get started</Button>\r\n                    </div>\r\n                </HeroContent>\r\n            </Hero>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "Mask",
@@ -6335,7 +6935,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Mask } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nconst PHOTO = `data:image/svg+xml,${encodeURIComponent(\r\n    `<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>` +\r\n        `<defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>` +\r\n        `<stop offset='0' stop-color='#6366f1'/><stop offset='1' stop-color='#ec4899'/>` +\r\n        `</linearGradient></defs>` +\r\n        `<rect width='100' height='100' fill='url(#g)'/>` +\r\n        `<circle cx='50' cy='40' r='18' fill='rgba(255,255,255,.92)'/>` +\r\n        `<rect x='22' y='62' width='56' height='38' rx='19' fill='rgba(255,255,255,.92)'/>` +\r\n        `</svg>`,\r\n)}`;\r\n\r\nconst SHAPES = [\r\n    \"squircle\",\r\n    \"circle\",\r\n    \"heart\",\r\n    \"hexagon\",\r\n    \"hexagon-2\",\r\n    \"pentagon\",\r\n    \"diamond\",\r\n    \"triangle\",\r\n    \"star\",\r\n    \"star-2\",\r\n    \"decagon\",\r\n    \"parallelogram\",\r\n] as const;\r\n\r\nexport function MaskDemo() {\r\n    return (\r\n        <Section title=\"Real use · avatar photo clipped to every shape\">\r\n            <Row>\r\n                {SHAPES.map((shape) => (\r\n                    <Mask key={shape} variant={shape} className=\"h-16 w-16\">\r\n                        <img src={PHOTO} alt=\"\" className=\"h-full w-full object-cover\" />\r\n                    </Mask>\r\n                ))}\r\n            </Row>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "ScrollArea",
@@ -6357,7 +6957,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { ScrollArea } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nconst ITEMS = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`);\r\n\r\nexport function ScrollAreaDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · scrollable list panel\">\r\n                <ScrollArea className=\"h-64 w-72 rounded-box border border-base-300\">\r\n                    <div className=\"flex flex-col gap-1 p-4\">\r\n                        {ITEMS.map((item) => (\r\n                            <div key={item} className=\"rounded-field px-2 py-1 text-sm\">\r\n                                {item}\r\n                            </div>\r\n                        ))}\r\n                    </div>\r\n                </ScrollArea>\r\n            </Section>\r\n\r\n            <Section title=\"Both axes\">\r\n                <Row>\r\n                    <ScrollArea\r\n                        orientation=\"both\"\r\n                        className=\"h-48 w-64 rounded-box border border-base-300\"\r\n                    >\r\n                        <div style={{ width: \"40rem\", height: \"24rem\" }} className=\"p-4\">\r\n                            Wide + tall content — scroll both directions.\r\n                        </div>\r\n                    </ScrollArea>\r\n                </Row>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Stack",
@@ -6385,7 +6985,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Stack, Card, CardBody } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nconst CARDS = [\r\n    { label: \"1\", color: \"primary\" },\r\n    { label: \"2\", color: \"secondary\" },\r\n    { label: \"3\", color: \"accent\" },\r\n];\r\n\r\nexport function StackDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · interactive peeking deck (click to cycle)\">\r\n                <Stack interactive className=\"h-32 w-48\">\r\n                    {CARDS.map((c) => (\r\n                        <Card\r\n                            key={c.label}\r\n                            style={{\r\n                                backgroundColor: `var(--color-${c.color})`,\r\n                                color: `var(--color-${c.color}-content, #fff)`,\r\n                            }}\r\n                        >\r\n                            <CardBody className=\"items-center justify-center text-2xl font-bold\">\r\n                                {c.label}\r\n                            </CardBody>\r\n                        </Card>\r\n                    ))}\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Peek direction\">\r\n                <div className=\"flex gap-8\">\r\n                    {([\"top\", \"bottom\", \"start\", \"end\"] as const).map((peek) => (\r\n                        <Stack key={peek} peek={peek} className=\"h-20 w-28\">\r\n                            {CARDS.map((c) => (\r\n                                <Card\r\n                                    key={c.label}\r\n                                    style={{\r\n                                        backgroundColor: `var(--color-${c.color})`,\r\n                                        color: `var(--color-${c.color}-content, #fff)`,\r\n                                    }}\r\n                                >\r\n                                    <CardBody className=\"items-center justify-center text-sm\">\r\n                                        {peek}\r\n                                    </CardBody>\r\n                                </Card>\r\n                            ))}\r\n                        </Stack>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Collapsible",
@@ -6429,7 +7029,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Collapsible, CollapsibleTrigger, CollapsiblePanel } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function CollapsibleDemo() {\r\n    return (\r\n        <Section title=\"Real use · single show/hide region\">\r\n            <Collapsible defaultOpen className=\"max-w-md\">\r\n                <CollapsibleTrigger>Shipping details</CollapsibleTrigger>\r\n                <CollapsiblePanel>\r\n                    Ships in 2–3 business days via standard shipping. Express options\r\n                    are available at checkout.\r\n                </CollapsiblePanel>\r\n            </Collapsible>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "CommandPalette",
@@ -6492,7 +7092,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { CommandPalette, Button } from \"@wizeworks/silicaui-react\";\r\nimport type { CommandItem } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function CommandPaletteDemo() {\r\n    const [open, setOpen] = useState(false);\r\n    const [lastCommand, setLastCommand] = useState<string | null>(null);\r\n\r\n    const items: CommandItem[] = [\r\n        {\r\n            id: \"new-page\",\r\n            label: \"Create new page\",\r\n            description: \"Add a blank page to this site\",\r\n            group: \"Actions\",\r\n            shortcut: \"⌘N\",\r\n            onSelect: () => setLastCommand(\"Create new page\"),\r\n        },\r\n        {\r\n            id: \"invite\",\r\n            label: \"Invite teammate\",\r\n            group: \"Actions\",\r\n            keywords: [\"member\", \"user\", \"collaborator\"],\r\n            onSelect: () => setLastCommand(\"Invite teammate\"),\r\n        },\r\n        {\r\n            id: \"theme-light\",\r\n            label: \"Switch to light theme\",\r\n            group: \"Preferences\",\r\n            onSelect: () => setLastCommand(\"Switch to light theme\"),\r\n        },\r\n        {\r\n            id: \"theme-dark\",\r\n            label: \"Switch to dark theme\",\r\n            group: \"Preferences\",\r\n            onSelect: () => setLastCommand(\"Switch to dark theme\"),\r\n        },\r\n        {\r\n            id: \"billing\",\r\n            label: \"Open billing settings\",\r\n            group: \"Preferences\",\r\n            disabled: true,\r\n            onSelect: () => setLastCommand(\"Open billing settings\"),\r\n        },\r\n    ];\r\n\r\n    return (\r\n        <Section title=\"Real use · ⌘K launcher (try the hotkey too)\">\r\n            <Row>\r\n                <Button color=\"primary\" onClick={() => setOpen(true)}>\r\n                    Open command palette\r\n                </Button>\r\n                {lastCommand && (\r\n                    <span className=\"text-sm opacity-70\">Ran: {lastCommand}</span>\r\n                )}\r\n            </Row>\r\n            <CommandPalette items={items} open={open} onOpenChange={setOpen} />\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "Dropzone",
@@ -6568,7 +7168,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Dropzone } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function DropzoneDemo() {\r\n    const [files, setFiles] = useState<string[]>([]);\r\n    const [rejected, setRejected] = useState<string[]>([]);\r\n\r\n    return (\r\n        <Section title=\"Real use · image upload with rejection reasons\">\r\n            <div className=\"flex max-w-md flex-col gap-3\">\r\n                <Dropzone\r\n                    accept=\"image/*\"\r\n                    maxSize={2 * 1024 * 1024}\r\n                    hint=\"PNG or JPG, up to 2MB\"\r\n                    onFiles={(fs) => setFiles(fs.map((f) => f.name))}\r\n                    onReject={(rs) =>\r\n                        setRejected(rs.map((r) => `${r.file.name} (${r.reason})`))\r\n                    }\r\n                />\r\n                {files.length > 0 && (\r\n                    <p className=\"text-xs text-success\">Accepted: {files.join(\", \")}</p>\r\n                )}\r\n                {rejected.length > 0 && (\r\n                    <p className=\"text-xs text-error\">Rejected: {rejected.join(\", \")}</p>\r\n                )}\r\n            </div>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "EmptyState",
@@ -6614,7 +7214,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { EmptyState, Button } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nfunction InboxIcon() {\r\n    return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" width=\"32\" height=\"32\">\r\n            <path d=\"M4 12h4l2 3h4l2-3h4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n            <path d=\"M5 6h14l1.5 6.5v6a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1v-6z\" strokeLinejoin=\"round\" />\r\n        </svg>\r\n    );\r\n}\r\n\r\nexport function EmptyStateDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · empty inbox\">\r\n                <EmptyState\r\n                    icon={<InboxIcon />}\r\n                    title=\"No messages yet\"\r\n                    description=\"When someone sends you a message, it'll show up here.\"\r\n                    actions={<Button color=\"primary\">Invite teammates</Button>}\r\n                    className=\"max-w-sm rounded-box border border-base-300\"\r\n                />\r\n            </Section>\r\n\r\n            <Section title=\"Compact (sm)\">\r\n                <EmptyState\r\n                    size=\"sm\"\r\n                    title=\"No results\"\r\n                    description=\"Try a different search term.\"\r\n                    className=\"max-w-sm rounded-box border border-base-300\"\r\n                />\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "PowerSearch",
@@ -6712,7 +7312,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { PowerSearch, usePowerSearchConfig, Button, type PowerSearchFieldDef } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nconst FIELDS: PowerSearchFieldDef[] = [\r\n    {\r\n        key: \"status\",\r\n        label: \"Status\",\r\n        type: \"select\",\r\n        options: [\r\n            { value: \"open\", label: \"Open\" },\r\n            { value: \"in-progress\", label: \"In progress\" },\r\n            { value: \"done\", label: \"Done\" },\r\n        ],\r\n    },\r\n    { key: \"assignee\", label: \"Assignee\", type: \"text\", placeholder: \"e.g. ada\" },\r\n    { key: \"due\", label: \"Due date\", type: \"date\" },\r\n    { key: \"starred\", label: \"Starred\", type: \"boolean\" },\r\n    {\r\n        key: \"priority\",\r\n        label: \"Priority\",\r\n        type: \"custom\",\r\n        formatValue: (v) => \"⭐\".repeat(Number(v) || 1),\r\n        render: ({ onCommit }) => (\r\n            <div className=\"flex gap-1\">\r\n                {[1, 2, 3].map((n) => (\r\n                    <Button key={n} size=\"sm\" variant=\"outline\" onClick={() => onCommit(String(n))}>\r\n                        {\"⭐\".repeat(n)}\r\n                    </Button>\r\n                ))}\r\n            </div>\r\n        ),\r\n    },\r\n];\r\n\r\nexport function PowerSearchDemo() {\r\n    const search = usePowerSearchConfig({\r\n        fields: FIELDS,\r\n        defaultValue: {\r\n            query: \"\",\r\n            terms: [{ id: \"seed-1\", field: \"status\", value: \"in-progress\" }],\r\n        },\r\n    });\r\n\r\n    return (\r\n        <Section title=\"Real use · issue search (select/text/date/boolean/custom fields)\">\r\n            <div className=\"max-w-xl\">\r\n                <PowerSearch {...search} placeholder=\"Search issues…\" />\r\n                <pre className=\"mt-3 rounded-field bg-base-200 p-3 text-xs\">\r\n                    {JSON.stringify(search.value, null, 2)}\r\n                </pre>\r\n            </div>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "ThemeController",
@@ -6743,11 +7343,17 @@
             "doc": "Uncontrolled initial theme (falls back to stored value, then the target's current `data-theme`, then the first theme)."
           },
           {
-            "name": "onChange",
+            "name": "onValueChange",
             "optional": true,
             "type": "(theme: string) => void",
             "doc": "Called with the new theme when it changes."
           },
+          {
+            "name": "onChange",
+            "optional": true,
+            "type": "(theme: string) => void",
+            "doc": "@deprecated Use `onValueChange`. `onChange` is reserved for the native DOM handler on components that wrap a real form element; still honored here so this isn't a breaking change."
+          },
           {
             "name": "target",
             "optional": true,
@@ -6827,7 +7433,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport {\r\n    Toolbar,\r\n    ToolbarButton,\r\n    ToolbarCenter,\r\n    ToolbarGroup,\r\n    ToolbarLink,\r\n    ToolbarSeparator,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section, Stack } from \"../lib/Section\";\r\n\r\nfunction BoldIcon() {\r\n    return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\r\n            <path d=\"M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z\" strokeLinejoin=\"round\" />\r\n        </svg>\r\n    );\r\n}\r\nfunction ItalicIcon() {\r\n    return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\r\n            <path d=\"M15 4h-5M14 20H9M14 4l-4 16\" strokeLinecap=\"round\" />\r\n        </svg>\r\n    );\r\n}\r\nfunction UnderlineIcon() {\r\n    return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\r\n            <path d=\"M7 4v6a5 5 0 0 0 10 0V4M6 21h12\" strokeLinecap=\"round\" />\r\n        </svg>\r\n    );\r\n}\r\nfunction PlusIcon() {\r\n    return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\r\n            <path d=\"M12 5v14M5 12h14\" strokeLinecap=\"round\" />\r\n        </svg>\r\n    );\r\n}\r\nfunction TrashIcon() {\r\n    return (\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\r\n            <path d=\"M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n        </svg>\r\n    );\r\n}\r\n\r\nexport function ToolbarDemo() {\r\n    const [format, setFormat] = useState<string[]>([\"bold\"]);\r\n\r\n    const toggle = (key: string) =>\r\n        setFormat((f) => (f.includes(key) ? f.filter((k) => k !== key) : [...f, key]));\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · text formatting toolbar\">\r\n                <Toolbar aria-label=\"Formatting\">\r\n                    <ToolbarGroup>\r\n                        <ToolbarButton\r\n                            aria-pressed={format.includes(\"bold\")}\r\n                            onClick={() => toggle(\"bold\")}\r\n                        >\r\n                            <BoldIcon />\r\n                        </ToolbarButton>\r\n                        <ToolbarButton\r\n                            aria-pressed={format.includes(\"italic\")}\r\n                            onClick={() => toggle(\"italic\")}\r\n                        >\r\n                            <ItalicIcon />\r\n                        </ToolbarButton>\r\n                        <ToolbarButton\r\n                            aria-pressed={format.includes(\"underline\")}\r\n                            onClick={() => toggle(\"underline\")}\r\n                        >\r\n                            <UnderlineIcon />\r\n                        </ToolbarButton>\r\n                    </ToolbarGroup>\r\n                    <ToolbarSeparator />\r\n                    <ToolbarLink href=\"#\">Help</ToolbarLink>\r\n                </Toolbar>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Stack className=\"items-start\">\r\n                    {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\r\n                        <Toolbar key={size} aria-label={`${size} toolbar`} size={size}>\r\n                            <ToolbarButton>\r\n                                <PlusIcon />\r\n                                Add\r\n                            </ToolbarButton>\r\n                            <ToolbarSeparator />\r\n                            <ToolbarLink href=\"#\">{size}</ToolbarLink>\r\n                        </Toolbar>\r\n                    ))}\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Variant + dividers · bulk-selection bar\">\r\n                <div className=\"w-full max-w-md rounded-box border border-base-300\">\r\n                    <Toolbar aria-label=\"Bulk actions\" size=\"sm\" variant=\"muted\" dividers=\"bottom\" className=\"w-full\">\r\n                        <ToolbarGroup>\r\n                            <span className=\"px-1 text-xs font-medium opacity-70\">3 selected</span>\r\n                        </ToolbarGroup>\r\n                        <ToolbarSeparator />\r\n                        <ToolbarGroup>\r\n                            <ToolbarButton>\r\n                                <TrashIcon />\r\n                            </ToolbarButton>\r\n                        </ToolbarGroup>\r\n                        <ToolbarLink href=\"#\" className=\"ml-auto\">\r\n                            Deselect all\r\n                        </ToolbarLink>\r\n                    </Toolbar>\r\n                    <div className=\"p-4 text-sm opacity-60\">…table content…</div>\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Dividers · card header\">\r\n                <div className=\"w-full max-w-md rounded-box border border-base-300\">\r\n                    <Toolbar aria-label=\"Card actions\" dividers=\"bottom\" className=\"w-full\">\r\n                        <span className=\"px-1 text-sm font-semibold\">Card title</span>\r\n                        <ToolbarButton className=\"ml-auto\">\r\n                            <PlusIcon />\r\n                        </ToolbarButton>\r\n                    </Toolbar>\r\n                    <div className=\"p-4 text-sm opacity-60\">…card content…</div>\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Glass · floating action bar\">\r\n                <div\r\n                    className=\"flex justify-center rounded-box p-16\"\r\n                    style={{\r\n                        backgroundImage:\r\n                            \"linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary))\",\r\n                    }}\r\n                >\r\n                    <Toolbar aria-label=\"Floating actions\" className=\"glass\">\r\n                        <ToolbarGroup>\r\n                            <ToolbarButton>\r\n                                <PlusIcon />\r\n                                Add\r\n                            </ToolbarButton>\r\n                            <ToolbarButton>\r\n                                <TrashIcon />\r\n                            </ToolbarButton>\r\n                        </ToolbarGroup>\r\n                        <ToolbarSeparator />\r\n                        <ToolbarLink href=\"#\">Help</ToolbarLink>\r\n                    </Toolbar>\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Center region · start / center / end\">\r\n                <div className=\"w-full max-w-md rounded-box border border-base-300\">\r\n                    <Toolbar aria-label=\"Section navigation\" dividers=\"bottom\" className=\"w-full\">\r\n                        <ToolbarGroup />\r\n                        <ToolbarCenter>\r\n                            <ToolbarGroup>\r\n                                <ToolbarButton aria-pressed={true}>Overview</ToolbarButton>\r\n                                <ToolbarButton aria-pressed={false}>Analytics</ToolbarButton>\r\n                                <ToolbarButton aria-pressed={false}>Settings</ToolbarButton>\r\n                            </ToolbarGroup>\r\n                        </ToolbarCenter>\r\n                        <ToolbarGroup>\r\n                            <ToolbarButton>\r\n                                <PlusIcon />\r\n                            </ToolbarButton>\r\n                        </ToolbarGroup>\r\n                    </Toolbar>\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "TreeView",
@@ -6897,7 +7503,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { TreeView } from \"@wizeworks/silicaui-react\";\r\nimport type { TreeDropEdge, TreeNode } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nconst FolderIcon = (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n        <path d=\"M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" />\r\n    </svg>\r\n);\r\nconst FileIcon = (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n        <path d=\"M14 3v4a1 1 0 0 0 1 1h4\" />\r\n        <path d=\"M5 3h9l5 5v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z\" />\r\n    </svg>\r\n);\r\n\r\nconst TREE_ITEMS: TreeNode[] = [\r\n    {\r\n        id: \"pages\",\r\n        label: \"Pages\",\r\n        icon: FolderIcon,\r\n        children: [\r\n            { id: \"home\", label: \"Home\", icon: FileIcon },\r\n            { id: \"about\", label: \"About\", icon: FileIcon },\r\n            { id: \"pricing\", label: \"Pricing\", icon: FileIcon },\r\n        ],\r\n    },\r\n    {\r\n        id: \"shop\",\r\n        label: \"Shop\",\r\n        icon: FolderIcon,\r\n        children: [\r\n            {\r\n                id: \"products\",\r\n                label: \"Products\",\r\n                icon: FolderIcon,\r\n                children: [\r\n                    { id: \"product-list\", label: \"All products\", icon: FileIcon },\r\n                    { id: \"product-new\", label: \"New product\", icon: FileIcon },\r\n                ],\r\n            },\r\n            { id: \"collections\", label: \"Collections\", icon: FileIcon },\r\n            { id: \"checkout\", label: \"Checkout (locked)\", icon: FileIcon, disabled: true },\r\n        ],\r\n    },\r\n    { id: \"blog\", label: \"Blog\", icon: FileIcon },\r\n    { id: \"settings\", label: \"Settings\", icon: FileIcon },\r\n];\r\n\r\n/** Remove `id` from the forest, returning the pruned tree + the removed node. */\r\nfunction removeById(nodes: TreeNode[], id: string): [TreeNode[], TreeNode | undefined] {\r\n    let removed: TreeNode | undefined;\r\n    const next = nodes.flatMap((n) => {\r\n        if (n.id === id) {\r\n            removed = n;\r\n            return [];\r\n        }\r\n        if (!n.children) return [n];\r\n        const [children, found] = removeById(n.children, id);\r\n        if (found) removed = found;\r\n        return [{ ...n, children }];\r\n    });\r\n    return [next, removed];\r\n}\r\n\r\n/** Insert `node` before/after/inside `targetId`, wherever it lives in the forest. */\r\nfunction insertRelative(nodes: TreeNode[], targetId: string, edge: TreeDropEdge, node: TreeNode): TreeNode[] {\r\n    const idx = nodes.findIndex((n) => n.id === targetId);\r\n    if (idx === -1) {\r\n        return nodes.map((n) => (n.children ? { ...n, children: insertRelative(n.children, targetId, edge, node) } : n));\r\n    }\r\n    if (edge === \"inside\") {\r\n        const target = nodes[idx]!;\r\n        const updated = { ...target, children: [...(target.children ?? []), node] };\r\n        return [...nodes.slice(0, idx), updated, ...nodes.slice(idx + 1)];\r\n    }\r\n    const at = edge === \"before\" ? idx : idx + 1;\r\n    return [...nodes.slice(0, at), node, ...nodes.slice(at)];\r\n}\r\n\r\nfunction moveNode(nodes: TreeNode[], id: string, targetId: string, edge: TreeDropEdge): TreeNode[] {\r\n    const [without, removed] = removeById(nodes, id);\r\n    return removed ? insertRelative(without, targetId, edge, removed) : nodes;\r\n}\r\n\r\nexport function TreeViewDemo() {\r\n    const [selected, setSelected] = useState(\"about\");\r\n    const [expanded, setExpanded] = useState<string[]>([\"pages\", \"shop\"]);\r\n    const [items, setItems] = useState(TREE_ITEMS);\r\n\r\n    return (\r\n        <Section title=\"Real use · site page tree — drag a row to reorder or reparent it\">\r\n            <TreeView\r\n                items={items}\r\n                selected={selected}\r\n                onSelectedChange={setSelected}\r\n                expanded={expanded}\r\n                onExpandedChange={setExpanded}\r\n                onMove={(id, targetId, edge) => setItems((prev) => moveNode(prev, id, targetId, edge))}\r\n                className=\"max-w-xs\"\r\n            />\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "Wizard",
@@ -6991,7 +7597,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Wizard, Input } from \"@wizeworks/silicaui-react\";\r\nimport type { WizardStep } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\nimport { COLORS } from \"../lib/data\";\r\n\r\nconst MINI_STEPS: WizardStep[] = [\r\n    { id: \"a\", title: \"Cart\" },\r\n    { id: \"b\", title: \"Shipping\" },\r\n    { id: \"c\", title: \"Payment\" },\r\n];\r\n\r\nconst STEPS: WizardStep[] = [\r\n    {\r\n        id: \"account\",\r\n        title: \"Account\",\r\n        content: (\r\n            <div className=\"flex max-w-sm flex-col gap-3\">\r\n                <Input placeholder=\"Work email\" type=\"email\" />\r\n                <Input placeholder=\"Choose a password\" type=\"password\" />\r\n            </div>\r\n        ),\r\n    },\r\n    {\r\n        id: \"profile\",\r\n        title: \"Profile\",\r\n        content: (\r\n            <div className=\"flex max-w-sm flex-col gap-3\">\r\n                <Input placeholder=\"Full name\" />\r\n                <Input placeholder=\"Company\" />\r\n            </div>\r\n        ),\r\n    },\r\n    {\r\n        id: \"billing\",\r\n        title: \"Billing\",\r\n        optional: true,\r\n        content: (\r\n            <div className=\"flex max-w-sm flex-col gap-3\">\r\n                <Input placeholder=\"Card number\" />\r\n                <span className=\"text-xs opacity-60\">\r\n                    Optional — you can add this later from Settings.\r\n                </span>\r\n            </div>\r\n        ),\r\n    },\r\n    {\r\n        id: \"review\",\r\n        title: \"Review\",\r\n        content: (\r\n            <p className=\"max-w-sm text-sm opacity-80\">\r\n                You're all set. Review your details and press Finish to create the\r\n                workspace.\r\n            </p>\r\n        ),\r\n    },\r\n];\r\n\r\nexport function WizardDemo() {\r\n    const [step, setStep] = useState(0);\r\n    const [done, setDone] = useState(false);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors (step markers)\">\r\n                <div className=\"flex flex-col gap-6\">\r\n                    {COLORS.slice(0, 3).map((color) => (\r\n                        <Wizard\r\n                            key={color}\r\n                            color={color}\r\n                            steps={MINI_STEPS}\r\n                            defaultStep={1}\r\n                            hideFooter\r\n                        />\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · workspace onboarding\">\r\n                <Wizard\r\n                    color=\"primary\"\r\n                    steps={STEPS}\r\n                    activeStep={step}\r\n                    onStepChange={setStep}\r\n                    onFinish={() => setDone(true)}\r\n                />\r\n                {done && (\r\n                    <p className=\"text-sm text-success\">\r\n                        🎉 Workspace created — you can close this wizard.\r\n                    </p>\r\n                )}\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Blockquote",
@@ -7011,10 +7617,10 @@
             "doc": "Semantic level → renders `<h1>`…`<h6>`. Default 2."
           },
           {
-            "name": "size",
+            "name": "visualLevel",
             "optional": true,
             "type": "HeadingLevel | \"display\"",
-            "doc": "Visual size override (`1`–`6` or `\"display\"`); omit to use the tag default."
+            "doc": "Visual heading scale (`1`–`6` or `\"display\"`), independent of the semantic `level`; omit to use the tag default. Named `visualLevel`, not `size`, on purpose: everywhere else in Silica `size` is the `xs`–`xl` token scale, and a prop that takes `3` in one component and `\"lg\"` in the next is a prop in name only."
           }
         ]
       },
@@ -7085,84 +7691,10 @@
             "doc": "Semantic level → renders `<h1>`…`<h6>`. Default 2."
           },
           {
-            "name": "size",
-            "optional": true,
-            "type": "HeadingLevel | \"display\"",
-            "doc": "Visual size override (`1`–`6` or `\"display\"`); omit to use the tag default."
-          }
-        ]
-      },
-      {
-        "name": "DisplayProps",
-        "extends": "extends React.HTMLAttributes<HTMLHeadingElement>",
-        "members": [
-          {
-            "name": "level",
-            "optional": true,
-            "type": "HeadingLevel",
-            "doc": "Semantic level for the outline (the look is always `.display`). Default 1."
-          }
-        ]
-      },
-      {
-        "name": "TextProps",
-        "extends": "extends React.HTMLAttributes<HTMLElement>",
-        "members": [
-          {
-            "name": "variant",
-            "optional": true,
-            "type": "TextVariant",
-            "doc": "`body` (default), `lead` (larger intro), or `caption` (small, muted)."
-          },
-          {
-            "name": "as",
-            "optional": true,
-            "type": "React.ElementType",
-            "doc": "Element to render. Default `p`."
-          }
-        ]
-      },
-      {
-        "name": "BlockquoteProps",
-        "members": []
-      },
-      {
-        "name": "BlockquoteCiteProps",
-        "extends": "extends React.HTMLAttributes<HTMLElement>",
-        "members": [
-          {
-            "name": "as",
-            "optional": true,
-            "type": "React.ElementType",
-            "doc": "Element to render. Default `footer`."
-          }
-        ]
-      }
-    ],
-    "usageExample": null
-  },
-  {
-    "name": "Heading",
-    "package": "@wizeworks/silicaui-react",
-    "category": "Typography",
-    "sourceFile": "silicaui-react/src/typography.tsx",
-    "description": "A heading whose semantic level and visual size are set independently.",
-    "props": [
-      {
-        "name": "HeadingProps",
-        "extends": "extends React.HTMLAttributes<HTMLHeadingElement>",
-        "members": [
-          {
-            "name": "level",
-            "optional": true,
-            "type": "HeadingLevel",
-            "doc": "Semantic level → renders `<h1>`…`<h6>`. Default 2."
-          },
-          {
-            "name": "size",
+            "name": "visualLevel",
             "optional": true,
             "type": "HeadingLevel | \"display\"",
-            "doc": "Visual size override (`1`–`6` or `\"display\"`); omit to use the tag default."
+            "doc": "Visual heading scale (`1`–`6` or `\"display\"`), independent of the semantic `level`; omit to use the tag default. Named `visualLevel`, not `size`, on purpose: everywhere else in Silica `size` is the `xs`–`xl` token scale, and a prop that takes `3` in one component and `\"lg\"` in the next is a prop in name only."
           }
         ]
       },
@@ -7216,33 +7748,11 @@
     "usageExample": null
   },
   {
-    "name": "Prose",
-    "package": "@wizeworks/silicaui-react",
-    "category": "Typography",
-    "sourceFile": "silicaui-react/src/prose.tsx",
-    "description": "Silica Prose — typographic defaults for a block of rich/markdown content. Wrap raw HTML (or a Markdown renderer's output) and it gets themed headings, lists, quotes, code, tables, and rhythm — scoped to this block only. <Prose> <h1>Title</h1> <p>Body copy with a <a href=\"#\">link</a> and <code>inline code</code>.</p> </Prose> <Prose dangerouslySetInnerHTML={{ __html: renderedMarkdown }} /> Caps width at 65ch for readability — add `max-w-none` to remove.",
-    "props": [
-      {
-        "name": "ProseProps",
-        "extends": "extends React.HTMLAttributes<HTMLDivElement>",
-        "members": [
-          {
-            "name": "size",
-            "optional": true,
-            "type": "ProseSize",
-            "doc": "Default `md`. Rescales the whole block by one root font-size."
-          }
-        ]
-      }
-    ],
-    "usageExample": null
-  },
-  {
-    "name": "Text",
+    "name": "Heading",
     "package": "@wizeworks/silicaui-react",
     "category": "Typography",
     "sourceFile": "silicaui-react/src/typography.tsx",
-    "description": "Body-copy text with a semantic variant. `body` carries no class (bare `<p>`).",
+    "description": "A heading whose semantic level and visual size are set independently.",
     "props": [
       {
         "name": "HeadingProps",
@@ -7255,10 +7765,10 @@
             "doc": "Semantic level → renders `<h1>`…`<h6>`. Default 2."
           },
           {
-            "name": "size",
+            "name": "visualLevel",
             "optional": true,
             "type": "HeadingLevel | \"display\"",
-            "doc": "Visual size override (`1`–`6` or `\"display\"`); omit to use the tag default."
+            "doc": "Visual heading scale (`1`–`6` or `\"display\"`), independent of the semantic `level`; omit to use the tag default. Named `visualLevel`, not `size`, on purpose: everywhere else in Silica `size` is the `xs`–`xl` token scale, and a prop that takes `3` in one component and `\"lg\"` in the next is a prop in name only."
           }
         ]
       },
@@ -7312,11 +7822,33 @@
     "usageExample": null
   },
   {
-    "name": "Typography",
+    "name": "Prose",
+    "package": "@wizeworks/silicaui-react",
+    "category": "Typography",
+    "sourceFile": "silicaui-react/src/prose.tsx",
+    "description": "Silica Prose — typographic defaults for a block of rich/markdown content. Wrap raw HTML (or a Markdown renderer's output) and it gets themed headings, lists, quotes, code, tables, and rhythm — scoped to this block only. <Prose> <h1>Title</h1> <p>Body copy with a <a href=\"#\">link</a> and <code>inline code</code>.</p> </Prose> <Prose dangerouslySetInnerHTML={{ __html: renderedMarkdown }} /> Caps width at 65ch for readability — add `max-w-none` to remove.",
+    "props": [
+      {
+        "name": "ProseProps",
+        "extends": "extends React.HTMLAttributes<HTMLDivElement>",
+        "members": [
+          {
+            "name": "size",
+            "optional": true,
+            "type": "ProseSize",
+            "doc": "Default `md`. Rescales the whole block by one root font-size."
+          }
+        ]
+      }
+    ],
+    "usageExample": "import { Prose } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function ProseDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · rendered article body\">\r\n                <Prose>\r\n                    <h2>Launch checklist</h2>\r\n                    <p>\r\n                        Draft the announcement in <strong>rich text</strong> — headings,\r\n                        lists, and links all export as clean HTML.\r\n                    </p>\r\n                    <ul>\r\n                        <li>Write the copy</li>\r\n                        <li>Add screenshots</li>\r\n                        <li>\r\n                            Link the <a href=\"#\">changelog</a>\r\n                        </li>\r\n                    </ul>\r\n                    <blockquote>Ship small, ship often.</blockquote>\r\n                    <p>\r\n                        Inline <code>code</code> and block code both pick up themed\r\n                        styling automatically.\r\n                    </p>\r\n                </Prose>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <div className=\"flex flex-col gap-6\">\r\n                    {([\"sm\", \"lg\"] as const).map((size) => (\r\n                        <Prose key={size} size={size}>\r\n                            <p>\r\n                                <code>size=&quot;{size}&quot;</code> rescales the whole block\r\n                                by one root font-size.\r\n                            </p>\r\n                        </Prose>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
+  },
+  {
+    "name": "Text",
     "package": "@wizeworks/silicaui-react",
     "category": "Typography",
     "sourceFile": "silicaui-react/src/typography.tsx",
-    "description": "",
+    "description": "Body-copy text with a semantic variant. `body` carries no class (bare `<p>`).",
     "props": [
       {
         "name": "HeadingProps",
@@ -7329,10 +7861,10 @@
             "doc": "Semantic level → renders `<h1>`…`<h6>`. Default 2."
           },
           {
-            "name": "size",
+            "name": "visualLevel",
             "optional": true,
             "type": "HeadingLevel | \"display\"",
-            "doc": "Visual size override (`1`–`6` or `\"display\"`); omit to use the tag default."
+            "doc": "Visual heading scale (`1`–`6` or `\"display\"`), independent of the semantic `level`; omit to use the tag default. Named `visualLevel`, not `size`, on purpose: everywhere else in Silica `size` is the `xs`–`xl` token scale, and a prop that takes `3` in one component and `\"lg\"` in the next is a prop in name only."
           }
         ]
       },
@@ -7394,7 +7926,7 @@
     "props": [
       {
         "name": "WordmarkProps",
-        "extends": "extends React.HTMLAttributes<HTMLElement>",
+        "extends": "extends Omit<React.AllHTMLAttributes<HTMLElement>, \"color\" | \"size\" | \"src\" | \"alt\" | \"as\">",
         "members": [
           {
             "name": "color",
@@ -7414,12 +7946,6 @@
             "type": "React.ElementType",
             "doc": "Render as a different element — typically `\"a\"` when the mark links home."
           },
-          {
-            "name": "href",
-            "optional": true,
-            "type": "string",
-            "doc": "Link target, when `as=\"a\"`."
-          },
           {
             "name": "src",
             "optional": true,
@@ -7439,7 +7965,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Wordmark, WordmarkAccent } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nconst Mark = (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\r\n        <path d=\"M12 2 2 7l10 5 10-5-10-5Z\" />\r\n        <path d=\"m2 17 10 5 10-5\" />\r\n        <path d=\"m2 12 10 5 10-5\" />\r\n    </svg>\r\n);\r\n\r\nexport function WordmarkDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · brand logotype\">\r\n                <Row>\r\n                    <Wordmark>\r\n                        Silica<WordmarkAccent>UI</WordmarkAccent>\r\n                    </Wordmark>\r\n                    <Wordmark as=\"a\" href=\"#\" color=\"primary\">\r\n                        {Mark}\r\n                        Acme\r\n                    </Wordmark>\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Row>\r\n                    <Wordmark size=\"xs\">Silica</Wordmark>\r\n                    <Wordmark size=\"sm\">Silica</Wordmark>\r\n                    <Wordmark size=\"md\">Silica</Wordmark>\r\n                    <Wordmark size=\"lg\">Silica</Wordmark>\r\n                    <Wordmark size=\"xl\">Silica</Wordmark>\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Colors\">\r\n                <Row>\r\n                    <Wordmark>Base</Wordmark>\r\n                    <Wordmark color=\"primary\">Primary</Wordmark>\r\n                    <Wordmark color=\"secondary\">Secondary</Wordmark>\r\n                    <Wordmark color=\"accent\">Accent</Wordmark>\r\n                </Row>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Chart",
@@ -7485,7 +8011,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { Chart, Sparkline } from \"@wizeworks/silicaui-charts\";\r\nimport type { EChartsOption } from \"@wizeworks/silicaui-charts\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nconst REVENUE_OPTION: EChartsOption = {\r\n    tooltip: { trigger: \"axis\" },\r\n    legend: { data: [\"Revenue\", \"Orders\"], top: 0 },\r\n    grid: { left: 4, right: 8, top: 34, bottom: 4, containLabel: true },\r\n    xAxis: {\r\n        type: \"category\",\r\n        data: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\"],\r\n    },\r\n    yAxis: [{ type: \"value\" }, { type: \"value\", splitLine: { show: false } }],\r\n    series: [\r\n        {\r\n            name: \"Revenue\",\r\n            type: \"line\",\r\n            yAxisIndex: 0,\r\n            smooth: true,\r\n            areaStyle: { opacity: 0.12 },\r\n            data: [8200, 9310, 9020, 11200, 12800, 12010, 14300],\r\n        },\r\n        {\r\n            name: \"Orders\",\r\n            type: \"bar\",\r\n            yAxisIndex: 1,\r\n            data: [120, 132, 128, 151, 168, 160, 184],\r\n        },\r\n    ],\r\n};\r\n\r\nconst CHANNEL_OPTION: EChartsOption = {\r\n    tooltip: { trigger: \"item\" },\r\n    legend: { bottom: 0 },\r\n    series: [\r\n        {\r\n            name: \"Channel\",\r\n            type: \"pie\",\r\n            radius: [\"45%\", \"72%\"],\r\n            itemStyle: { borderRadius: 6 },\r\n            label: { show: false },\r\n            data: [\r\n                { value: 4200, name: \"Direct\" },\r\n                { value: 3100, name: \"Organic\" },\r\n                { value: 2400, name: \"Referral\" },\r\n                { value: 1600, name: \"Social\" },\r\n            ],\r\n        },\r\n    ],\r\n};\r\n\r\nexport function ChartDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · revenue trend (auto-themed ECharts)\">\r\n                <Chart option={REVENUE_OPTION} style={{ maxWidth: 640 }} />\r\n            </Section>\r\n\r\n            <Section title=\"Channel split\">\r\n                <Chart option={CHANNEL_OPTION} style={{ maxWidth: 420, height: \"18rem\" }} />\r\n            </Section>\r\n\r\n            <Section title=\"Sparklines · inline trend indicators\">\r\n                <Row>\r\n                    <Sparkline\r\n                        data={[8, 9, 9, 11, 12, 12, 14]}\r\n                        area\r\n                        style={{ width: \"8rem\", height: \"2.5rem\" }}\r\n                    />\r\n                    <Sparkline\r\n                        data={[14, 12, 12, 11, 9, 9, 8]}\r\n                        style={{ width: \"8rem\", height: \"2.5rem\" }}\r\n                    />\r\n                </Row>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Sparkline",
@@ -7648,7 +8174,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { Badge } from \"@wizeworks/silicaui-react\";\r\nimport type { SilicaColor } from \"@wizeworks/silicaui-react\";\r\nimport { DataTable } from \"@wizeworks/silicaui-table\";\r\nimport type { DataTableColumn } from \"@wizeworks/silicaui-table\";\r\nimport { Sparkline } from \"@wizeworks/silicaui-charts\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\ninterface TeamRow {\r\n    name: string;\r\n    email: string;\r\n    role: string;\r\n    plan: string;\r\n    mrr: number;\r\n    trend: number[];\r\n    status: { label: string; color: SilicaColor };\r\n}\r\n\r\nconst TEAM: TeamRow[] = [\r\n    { name: \"Ada Lovelace\", email: \"ada@silica.dev\", role: \"Owner\", plan: \"Enterprise\", mrr: 2400, trend: [12, 18, 15, 22, 28, 26, 31], status: { label: \"Active\", color: \"success\" } },\r\n    { name: \"Grace Hopper\", email: \"grace@silica.dev\", role: \"Admin\", plan: \"Pro\", mrr: 990, trend: [8, 9, 11, 10, 13, 15, 14], status: { label: \"Active\", color: \"success\" } },\r\n    { name: \"Alan Turing\", email: \"alan@silica.dev\", role: \"Member\", plan: \"Pro\", mrr: 720, trend: [5, 6, 6, 8, 7, 9, 12], status: { label: \"Away\", color: \"warning\" } },\r\n    { name: \"Katherine Johnson\", email: \"kate@silica.dev\", role: \"Member\", plan: \"Starter\", mrr: 190, trend: [2, 3, 3, 4, 5, 5, 6], status: { label: \"Invited\", color: \"neutral\" } },\r\n    { name: \"Edsger Dijkstra\", email: \"edsger@silica.dev\", role: \"Admin\", plan: \"Enterprise\", mrr: 3100, trend: [20, 22, 25, 24, 29, 33, 38], status: { label: \"Active\", color: \"success\" } },\r\n    { name: \"Barbara Liskov\", email: \"barbara@silica.dev\", role: \"Member\", plan: \"Pro\", mrr: 880, trend: [9, 10, 12, 11, 14, 13, 16], status: { label: \"Active\", color: \"success\" } },\r\n    { name: \"Donald Knuth\", email: \"don@silica.dev\", role: \"Member\", plan: \"Starter\", mrr: 140, trend: [1, 2, 2, 3, 3, 4, 4], status: { label: \"Suspended\", color: \"error\" } },\r\n    { name: \"Margaret Hamilton\", email: \"maggie@silica.dev\", role: \"Admin\", plan: \"Enterprise\", mrr: 2750, trend: [18, 19, 21, 26, 30, 29, 34], status: { label: \"Active\", color: \"success\" } },\r\n];\r\n\r\nconst COLUMNS: DataTableColumn<TeamRow>[] = [\r\n    {\r\n        accessorKey: \"name\",\r\n        header: \"Member\",\r\n        cell: ({ row }) => (\r\n            <div className=\"flex flex-col\">\r\n                <span className=\"font-medium\">{row.original.name}</span>\r\n                <span className=\"text-xs opacity-60\">{row.original.email}</span>\r\n            </div>\r\n        ),\r\n    },\r\n    { accessorKey: \"role\", header: \"Role\" },\r\n    {\r\n        accessorKey: \"plan\",\r\n        header: \"Plan\",\r\n        cell: ({ row }) => <Badge>{row.original.plan}</Badge>,\r\n    },\r\n    {\r\n        accessorKey: \"mrr\",\r\n        header: \"MRR\",\r\n        cell: ({ row }) => (\r\n            <span className=\"tabular-nums\">${row.original.mrr.toLocaleString()}</span>\r\n        ),\r\n    },\r\n    {\r\n        id: \"trend\",\r\n        header: \"Trend\",\r\n        enableSorting: false,\r\n        cell: ({ row }) => (\r\n            <Sparkline\r\n                data={row.original.trend}\r\n                area\r\n                style={{ width: \"5rem\", height: \"1.75rem\" }}\r\n            />\r\n        ),\r\n    },\r\n    {\r\n        accessorKey: \"status\",\r\n        header: \"Status\",\r\n        enableSorting: false,\r\n        cell: ({ row }) => (\r\n            <Badge color={row.original.status.color}>{row.original.status.label}</Badge>\r\n        ),\r\n    },\r\n];\r\n\r\nexport function DataTableDemo() {\r\n    const [selected, setSelected] = useState<TeamRow[]>([]);\r\n    const [loading, setLoading] = useState(false);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · sortable, selectable, paginated team table\">\r\n                <div className=\"flex flex-col gap-2\">\r\n                    <DataTable\r\n                        data={TEAM}\r\n                        columns={COLUMNS}\r\n                        sortable\r\n                        selectable\r\n                        pagination={5}\r\n                        zebra\r\n                        color=\"primary\"\r\n                        onSelectionChange={setSelected}\r\n                    />\r\n                    <p className=\"text-xs opacity-60\">\r\n                        {selected.length} row{selected.length === 1 ? \"\" : \"s\"} selected\r\n                    </p>\r\n                </div>\r\n            </Section>\r\n\r\n            <Section title=\"Loading & empty states\">\r\n                <div className=\"flex flex-col gap-3\">\r\n                    <button\r\n                        className=\"w-fit text-xs underline opacity-70\"\r\n                        onClick={() => {\r\n                            setLoading(true);\r\n                            setTimeout(() => setLoading(false), 1500);\r\n                        }}\r\n                    >\r\n                        Simulate loading\r\n                    </button>\r\n                    <DataTable\r\n                        data={loading ? [] : TEAM.slice(0, 3)}\r\n                        columns={COLUMNS}\r\n                        loading={loading}\r\n                        loadingRows={3}\r\n                        emptyState={<span className=\"opacity-60\">No members found.</span>}\r\n                    />\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "RichTextEditor",
@@ -7711,7 +8237,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { RichTextEditor } from \"@wizeworks/silicaui-editor\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function RichTextEditorDemo() {\r\n    const [doc, setDoc] = useState(\r\n        \"<h2>Launch checklist</h2><p>Draft the announcement in <strong>rich text</strong> — headings, lists, and links all export as clean HTML.</p><ul><li>Write the copy</li><li>Add screenshots</li></ul>\",\r\n    );\r\n\r\n    return (\r\n        <Section title=\"Real use · a full formatting toolbar over TipTap\">\r\n            <RichTextEditor\r\n                value={doc}\r\n                onValueChange={setDoc}\r\n                className=\"max-w-xl\"\r\n            />\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "SortableList",
@@ -7766,7 +8292,7 @@
         ]
       }
     ],
-    "usageExample": null
+    "usageExample": "import { useState } from \"react\";\r\nimport { SortableList } from \"@wizeworks/silicaui-dnd\";\r\nimport { useSilicaClass } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\ninterface SectionBlock {\r\n    id: string;\r\n    label: string;\r\n}\r\n\r\nconst INITIAL: SectionBlock[] = [\r\n    { id: \"hero\", label: \"Hero banner\" },\r\n    { id: \"features\", label: \"Feature grid\" },\r\n    { id: \"pricing\", label: \"Pricing table\" },\r\n    { id: \"testimonials\", label: \"Testimonials\" },\r\n    { id: \"faq\", label: \"FAQ\" },\r\n];\r\n\r\nconst GripIcon = (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\">\r\n        <circle cx=\"9\" cy=\"6\" r=\"1.6\" />\r\n        <circle cx=\"15\" cy=\"6\" r=\"1.6\" />\r\n        <circle cx=\"9\" cy=\"12\" r=\"1.6\" />\r\n        <circle cx=\"15\" cy=\"12\" r=\"1.6\" />\r\n        <circle cx=\"9\" cy=\"18\" r=\"1.6\" />\r\n        <circle cx=\"15\" cy=\"18\" r=\"1.6\" />\r\n    </svg>\r\n);\r\n\r\nexport function SortableListDemo() {\r\n    const [blocks, setBlocks] = useState<SectionBlock[]>(INITIAL);\r\n    const sc = useSilicaClass();\r\n\r\n    return (\r\n        <Section title=\"Real use · reorder a page's sections (drag the handle)\">\r\n            <div className=\"max-w-sm\">\r\n                <SortableList\r\n                    items={blocks}\r\n                    getItemId={(b) => b.id}\r\n                    onReorder={setBlocks}\r\n                    handle\r\n                    renderItem={(block, ctx) => (\r\n                        <>\r\n                            <span\r\n                                {...ctx.handleProps}\r\n                                className={sc(\"sortable-handle\") as string}\r\n                                aria-label={`Drag ${block.label}`}\r\n                            >\r\n                                {GripIcon}\r\n                            </span>\r\n                            {block.label}\r\n                        </>\r\n                    )}\r\n                />\r\n            </div>\r\n        </Section>\r\n    );\r\n}"
   },
   {
     "name": "ResizablePanels",
@@ -7781,7 +8307,7 @@
         "members": []
       }
     ],
-    "usageExample": null
+    "usageExample": "import {\r\n    ResizablePanelGroup,\r\n    ResizablePanel,\r\n    ResizeHandle,\r\n} from \"@wizeworks/silicaui-panels\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nexport function ResizablePanelsDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · sidebar + editor + preview\">\r\n                <ResizablePanelGroup\r\n                    direction=\"horizontal\"\r\n                    className=\"h-64 max-w-2xl rounded-box border border-base-300\"\r\n                >\r\n                    <ResizablePanel defaultSize={20} minSize={15}>\r\n                        <div className=\"flex h-full items-center justify-center bg-base-200 text-sm\">\r\n                            Sidebar\r\n                        </div>\r\n                    </ResizablePanel>\r\n                    <ResizeHandle />\r\n                    <ResizablePanel defaultSize={50} minSize={30}>\r\n                        <div className=\"flex h-full items-center justify-center text-sm\">\r\n                            Editor\r\n                        </div>\r\n                    </ResizablePanel>\r\n                    <ResizeHandle />\r\n                    <ResizablePanel defaultSize={30} minSize={15}>\r\n                        <div className=\"flex h-full items-center justify-center bg-base-200 text-sm\">\r\n                            Preview\r\n                        </div>\r\n                    </ResizablePanel>\r\n                </ResizablePanelGroup>\r\n            </Section>\r\n\r\n            <Section title=\"Vertical stack\">\r\n                <ResizablePanelGroup\r\n                    direction=\"vertical\"\r\n                    className=\"h-64 max-w-md rounded-box border border-base-300\"\r\n                >\r\n                    <ResizablePanel defaultSize={50}>\r\n                        <div className=\"flex h-full items-center justify-center bg-base-200 text-sm\">\r\n                            Top\r\n                        </div>\r\n                    </ResizablePanel>\r\n                    <ResizeHandle />\r\n                    <ResizablePanel defaultSize={50}>\r\n                        <div className=\"flex h-full items-center justify-center text-sm\">\r\n                            Bottom\r\n                        </div>\r\n                    </ResizablePanel>\r\n                </ResizablePanelGroup>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Button",
@@ -7791,7 +8317,7 @@
     "icon": "button",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:600"
+    "sourceFile": "silicaui-html/src/component.ts:627"
   },
   {
     "name": "Image",
@@ -7801,7 +8327,7 @@
     "icon": "image",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:620"
+    "sourceFile": "silicaui-html/src/component.ts:647"
   },
   {
     "name": "Video",
@@ -7811,7 +8337,7 @@
     "icon": "video",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:643"
+    "sourceFile": "silicaui-html/src/component.ts:670"
   },
   {
     "name": "Embed",
@@ -7821,7 +8347,7 @@
     "icon": "video",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:685"
+    "sourceFile": "silicaui-html/src/component.ts:712"
   },
   {
     "name": "Heading",
@@ -7831,7 +8357,7 @@
     "icon": "heading",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:720"
+    "sourceFile": "silicaui-html/src/component.ts:747"
   },
   {
     "name": "Icon",
@@ -7841,7 +8367,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:732"
+    "sourceFile": "silicaui-html/src/component.ts:759"
   },
   {
     "name": "Divider",
@@ -7851,7 +8377,17 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:743"
+    "sourceFile": "silicaui-html/src/component.ts:770"
+  },
+  {
+    "name": "Link",
+    "package": "@wizeworks/silicaui-html",
+    "category": "nav",
+    "label": "Link",
+    "icon": "link",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts:774"
   },
   {
     "name": "Input",
@@ -7861,7 +8397,27 @@
     "icon": "input",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:750"
+    "sourceFile": "silicaui-html/src/component.ts:793"
+  },
+  {
+    "name": "FileInput",
+    "package": "@wizeworks/silicaui-html",
+    "category": "form",
+    "label": "File input",
+    "icon": "input",
+    "container": false,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts:805"
+  },
+  {
+    "name": "FloatingLabel",
+    "package": "@wizeworks/silicaui-html",
+    "category": "form",
+    "label": "Floating label",
+    "icon": "label",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts:818"
   },
   {
     "name": "Textarea",
@@ -7871,7 +8427,7 @@
     "icon": "textarea",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:761"
+    "sourceFile": "silicaui-html/src/component.ts:832"
   },
   {
     "name": "Select",
@@ -7881,7 +8437,7 @@
     "icon": "select",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:773"
+    "sourceFile": "silicaui-html/src/component.ts:844"
   },
   {
     "name": "Checkbox",
@@ -7889,9 +8445,9 @@
     "category": "form",
     "label": "Checkbox",
     "icon": "checkbox",
-    "container": false,
+    "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:790"
+    "sourceFile": "silicaui-html/src/component.ts:861"
   },
   {
     "name": "Radio",
@@ -7899,9 +8455,9 @@
     "category": "form",
     "label": "Radio",
     "icon": "radio",
-    "container": false,
+    "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:797"
+    "sourceFile": "silicaui-html/src/component.ts:869"
   },
   {
     "name": "Toggle",
@@ -7909,9 +8465,9 @@
     "category": "form",
     "label": "Toggle",
     "icon": "toggle",
-    "container": false,
+    "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:804"
+    "sourceFile": "silicaui-html/src/component.ts:877"
   },
   {
     "name": "Text",
@@ -7941,7 +8497,7 @@
     "icon": "wordmark",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:824"
+    "sourceFile": "silicaui-html/src/component.ts:898"
   },
   {
     "name": "Card",
@@ -7953,6 +8509,16 @@
     "behaviors": [],
     "sourceFile": "silicaui-html/src/component.ts"
   },
+  {
+    "name": "SelectableCard",
+    "package": "@wizeworks/silicaui-html",
+    "category": "form",
+    "label": "Selectable card",
+    "icon": "box",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts:933"
+  },
   {
     "name": "Section",
     "package": "@wizeworks/silicaui-html",
@@ -8073,7 +8639,7 @@
     "behaviors": [
       "form"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:874"
+    "sourceFile": "silicaui-html/src/component.ts:971"
   },
   {
     "name": "Sidebar",
@@ -8085,7 +8651,7 @@
     "behaviors": [
       "sidebar"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:893"
+    "sourceFile": "silicaui-html/src/component.ts:990"
   },
   {
     "name": "SidebarTrigger",
@@ -8095,7 +8661,7 @@
     "icon": "sidebarTrigger",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:914"
+    "sourceFile": "silicaui-html/src/component.ts:1011"
   },
   {
     "name": "SelectionList",
@@ -8107,7 +8673,7 @@
     "behaviors": [
       "selection-list"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:931"
+    "sourceFile": "silicaui-html/src/component.ts:1028"
   },
   {
     "name": "Breadcrumb",
@@ -8117,7 +8683,7 @@
     "icon": "breadcrumb",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:990"
+    "sourceFile": "silicaui-html/src/component.ts:1087"
   },
   {
     "name": "Menu",
@@ -8127,7 +8693,7 @@
     "icon": "nav",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1007"
+    "sourceFile": "silicaui-html/src/component.ts:1104"
   },
   {
     "name": "Steps",
@@ -8137,7 +8703,7 @@
     "icon": "steps",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1021"
+    "sourceFile": "silicaui-html/src/component.ts:1118"
   },
   {
     "name": "Pagination",
@@ -8147,7 +8713,7 @@
     "icon": "pagination",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1036"
+    "sourceFile": "silicaui-html/src/component.ts:1133"
   },
   {
     "name": "Alert",
@@ -8157,7 +8723,7 @@
     "icon": "warning",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1057"
+    "sourceFile": "silicaui-html/src/component.ts:1154"
   },
   {
     "name": "Progress",
@@ -8167,7 +8733,7 @@
     "icon": "progress",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1066"
+    "sourceFile": "silicaui-html/src/component.ts:1185"
   },
   {
     "name": "Stat",
@@ -8177,7 +8743,7 @@
     "icon": "stat",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1079"
+    "sourceFile": "silicaui-html/src/component.ts:1198"
   },
   {
     "name": "Avatar",
@@ -8187,7 +8753,7 @@
     "icon": "avatar",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1094"
+    "sourceFile": "silicaui-html/src/component.ts:1213"
   },
   {
     "name": "Collapse",
@@ -8197,7 +8763,7 @@
     "icon": "collapse",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1116"
+    "sourceFile": "silicaui-html/src/component.ts:1235"
   },
   {
     "name": "Timeline",
@@ -8207,7 +8773,7 @@
     "icon": "timeline",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1132"
+    "sourceFile": "silicaui-html/src/component.ts:1251"
   },
   {
     "name": "Label",
@@ -8247,7 +8813,7 @@
     "icon": "text",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1162"
+    "sourceFile": "silicaui-html/src/component.ts:1281"
   },
   {
     "name": "Hero",
@@ -8309,6 +8875,16 @@
     "behaviors": [],
     "sourceFile": "silicaui-html/src/component.ts"
   },
+  {
+    "name": "MockupCodeLine",
+    "package": "@wizeworks/silicaui-html",
+    "category": "media",
+    "label": "Code line",
+    "icon": "box",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts:1297"
+  },
   {
     "name": "MockupPhone",
     "package": "@wizeworks/silicaui-html",
@@ -8497,7 +9073,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1196"
+    "sourceFile": "silicaui-html/src/component.ts:1329"
   },
   {
     "name": "ToolbarCenter",
@@ -8517,7 +9093,7 @@
     "icon": "sidebarTrigger",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1217"
+    "sourceFile": "silicaui-html/src/component.ts:1350"
   },
   {
     "name": "InputGroupButton",
@@ -8527,7 +9103,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1225"
+    "sourceFile": "silicaui-html/src/component.ts:1358"
   },
   {
     "name": "ToolbarButton",
@@ -8537,7 +9113,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1233"
+    "sourceFile": "silicaui-html/src/component.ts:1366"
   },
   {
     "name": "ToolbarLink",
@@ -8547,7 +9123,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1241"
+    "sourceFile": "silicaui-html/src/component.ts:1374"
   },
   {
     "name": "ToolbarSeparator",
@@ -8557,7 +9133,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1249"
+    "sourceFile": "silicaui-html/src/component.ts:1382"
   },
   {
     "name": "ClickableCard",
@@ -8567,7 +9143,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1258"
+    "sourceFile": "silicaui-html/src/component.ts:1391"
   },
   {
     "name": "SearchInput",
@@ -8577,7 +9153,7 @@
     "icon": "input",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1274"
+    "sourceFile": "silicaui-html/src/component.ts:1407"
   },
   {
     "name": "PasswordInput",
@@ -8587,7 +9163,7 @@
     "icon": "input",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1281"
+    "sourceFile": "silicaui-html/src/component.ts:1414"
   },
   {
     "name": "CheckboxGroup",
@@ -8597,7 +9173,7 @@
     "icon": "checkbox",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1291"
+    "sourceFile": "silicaui-html/src/component.ts:1424"
   },
   {
     "name": "CheckboxOption",
@@ -8607,7 +9183,7 @@
     "icon": "checkbox",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1299"
+    "sourceFile": "silicaui-html/src/component.ts:1432"
   },
   {
     "name": "Swap",
@@ -8617,7 +9193,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1312"
+    "sourceFile": "silicaui-html/src/component.ts:1444"
   },
   {
     "name": "Display",
@@ -8627,7 +9203,7 @@
     "icon": "heading",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1326"
+    "sourceFile": "silicaui-html/src/component.ts:1458"
   },
   {
     "name": "Timestamp",
@@ -8637,7 +9213,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1341"
+    "sourceFile": "silicaui-html/src/component.ts:1473"
   },
   {
     "name": "EmptyState",
@@ -8647,7 +9223,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1375"
+    "sourceFile": "silicaui-html/src/component.ts:1507"
   },
   {
     "name": "RadioGroup",
@@ -8657,7 +9233,7 @@
     "icon": "radio",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1394"
+    "sourceFile": "silicaui-html/src/component.ts:1526"
   },
   {
     "name": "RadioOption",
@@ -8667,7 +9243,7 @@
     "icon": "radio",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1402"
+    "sourceFile": "silicaui-html/src/component.ts:1534"
   },
   {
     "name": "Stats",
@@ -8687,7 +9263,7 @@
     "icon": "progress",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1418"
+    "sourceFile": "silicaui-html/src/component.ts:1547"
   },
   {
     "name": "RadialProgress",
@@ -8697,7 +9273,7 @@
     "icon": "progress",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1432"
+    "sourceFile": "silicaui-html/src/component.ts:1561"
   },
   {
     "name": "Accordion",
@@ -8709,7 +9285,7 @@
     "behaviors": [
       "disclosure"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1465"
+    "sourceFile": "silicaui-html/src/component.ts:1594"
   },
   {
     "name": "AccordionItem",
@@ -8729,7 +9305,7 @@
     "icon": "collapse",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1481"
+    "sourceFile": "silicaui-html/src/component.ts:1610"
   },
   {
     "name": "AccordionPanel",
@@ -8739,7 +9315,7 @@
     "icon": "collapse",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1493"
+    "sourceFile": "silicaui-html/src/component.ts:1622"
   },
   {
     "name": "Collapsible",
@@ -8751,7 +9327,7 @@
     "behaviors": [
       "disclosure"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1509"
+    "sourceFile": "silicaui-html/src/component.ts:1638"
   },
   {
     "name": "CollapsibleTrigger",
@@ -8761,7 +9337,7 @@
     "icon": "collapse",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1521"
+    "sourceFile": "silicaui-html/src/component.ts:1650"
   },
   {
     "name": "CollapsiblePanel",
@@ -8771,7 +9347,199 @@
     "icon": "collapse",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1533"
+    "sourceFile": "silicaui-html/src/component.ts:1662"
+  },
+  {
+    "name": "ColorPicker",
+    "package": "@wizeworks/silicaui-html",
+    "category": "form",
+    "label": "Color picker",
+    "icon": "box",
+    "container": false,
+    "behaviors": [
+      "color-picker"
+    ],
+    "sourceFile": "silicaui-html/src/component.ts:1681"
+  },
+  {
+    "name": "TagInput",
+    "package": "@wizeworks/silicaui-html",
+    "category": "form",
+    "label": "Tag input",
+    "icon": "input",
+    "container": false,
+    "behaviors": [
+      "tag-input"
+    ],
+    "sourceFile": "silicaui-html/src/component.ts:1767"
+  },
+  {
+    "name": "Countdown",
+    "package": "@wizeworks/silicaui-html",
+    "category": "data",
+    "label": "Countdown",
+    "icon": "box",
+    "container": false,
+    "behaviors": [
+      "countdown"
+    ],
+    "sourceFile": "silicaui-html/src/component.ts:1840"
+  },
+  {
+    "name": "Filter",
+    "package": "@wizeworks/silicaui-html",
+    "category": "form",
+    "label": "Filter chips",
+    "icon": "box",
+    "container": true,
+    "behaviors": [
+      "toggle-group"
+    ],
+    "sourceFile": "silicaui-html/src/component.ts:1893"
+  },
+  {
+    "name": "FilterItem",
+    "package": "@wizeworks/silicaui-html",
+    "category": "form",
+    "label": "Filter chip",
+    "icon": "box",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts:1915"
+  },
+  {
+    "name": "ChatImage",
+    "package": "@wizeworks/silicaui-html",
+    "category": "data",
+    "label": "ChatImage",
+    "icon": "box",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts"
+  },
+  {
+    "name": "ChatHeader",
+    "package": "@wizeworks/silicaui-html",
+    "category": "data",
+    "label": "ChatHeader",
+    "icon": "box",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts"
+  },
+  {
+    "name": "ChatFooter",
+    "package": "@wizeworks/silicaui-html",
+    "category": "data",
+    "label": "ChatFooter",
+    "icon": "box",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts"
+  },
+  {
+    "name": "ChatBubble",
+    "package": "@wizeworks/silicaui-html",
+    "category": "data",
+    "label": "ChatBubble",
+    "icon": "box",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts"
+  },
+  {
+    "name": "ChatLayout",
+    "package": "@wizeworks/silicaui-html",
+    "category": "data",
+    "label": "ChatLayout",
+    "icon": "box",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts"
+  },
+  {
+    "name": "ChatLayoutMessages",
+    "package": "@wizeworks/silicaui-html",
+    "category": "data",
+    "label": "ChatLayoutMessages",
+    "icon": "box",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts"
+  },
+  {
+    "name": "ChatMessageMetadata",
+    "package": "@wizeworks/silicaui-html",
+    "category": "data",
+    "label": "ChatMessageMetadata",
+    "icon": "box",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts"
+  },
+  {
+    "name": "Chat",
+    "package": "@wizeworks/silicaui-html",
+    "category": "data",
+    "label": "Chat row",
+    "icon": "box",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts:1956"
+  },
+  {
+    "name": "ChatSystemMessage",
+    "package": "@wizeworks/silicaui-html",
+    "category": "data",
+    "label": "Chat system message",
+    "icon": "box",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts:1971"
+  },
+  {
+    "name": "ChatMessage",
+    "package": "@wizeworks/silicaui-html",
+    "category": "data",
+    "label": "Chat message",
+    "icon": "box",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts:1988"
+  },
+  {
+    "name": "ChatTypingIndicator",
+    "package": "@wizeworks/silicaui-html",
+    "category": "data",
+    "label": "Chat typing indicator",
+    "icon": "box",
+    "container": true,
+    "behaviors": [],
+    "sourceFile": "silicaui-html/src/component.ts:2021"
+  },
+  {
+    "name": "ChatToolCalls",
+    "package": "@wizeworks/silicaui-html",
+    "category": "data",
+    "label": "Chat tool calls",
+    "icon": "collapse",
+    "container": true,
+    "behaviors": [
+      "disclosure"
+    ],
+    "sourceFile": "silicaui-html/src/component.ts:2047"
+  },
+  {
+    "name": "ChatComposer",
+    "package": "@wizeworks/silicaui-html",
+    "category": "form",
+    "label": "Chat composer",
+    "icon": "textarea",
+    "container": true,
+    "behaviors": [
+      "form"
+    ],
+    "sourceFile": "silicaui-html/src/component.ts:2074"
   },
   {
     "name": "Carousel",
@@ -8783,7 +9551,7 @@
     "behaviors": [
       "carousel"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1551"
+    "sourceFile": "silicaui-html/src/component.ts:2109"
   },
   {
     "name": "CarouselItem",
@@ -8793,7 +9561,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1585"
+    "sourceFile": "silicaui-html/src/component.ts:2143"
   },
   {
     "name": "DropdownMenu",
@@ -8805,7 +9573,7 @@
     "behaviors": [
       "menu"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1602"
+    "sourceFile": "silicaui-html/src/component.ts:2160"
   },
   {
     "name": "DropdownMenuTrigger",
@@ -8815,7 +9583,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1614"
+    "sourceFile": "silicaui-html/src/component.ts:2172"
   },
   {
     "name": "DropdownMenuContent",
@@ -8825,7 +9593,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1626"
+    "sourceFile": "silicaui-html/src/component.ts:2184"
   },
   {
     "name": "DropdownMenuItem",
@@ -8835,7 +9603,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1640"
+    "sourceFile": "silicaui-html/src/component.ts:2198"
   },
   {
     "name": "Tabs",
@@ -8847,7 +9615,7 @@
     "behaviors": [
       "tabs"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1655"
+    "sourceFile": "silicaui-html/src/component.ts:2213"
   },
   {
     "name": "TabsList",
@@ -8857,7 +9625,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1671"
+    "sourceFile": "silicaui-html/src/component.ts:2229"
   },
   {
     "name": "TabsTab",
@@ -8867,7 +9635,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1679"
+    "sourceFile": "silicaui-html/src/component.ts:2237"
   },
   {
     "name": "TabsPanel",
@@ -8877,7 +9645,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1691"
+    "sourceFile": "silicaui-html/src/component.ts:2249"
   },
   {
     "name": "Outline",
@@ -8889,7 +9657,7 @@
     "behaviors": [
       "toc"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1708"
+    "sourceFile": "silicaui-html/src/component.ts:2266"
   },
   {
     "name": "Dialog",
@@ -8901,7 +9669,7 @@
     "behaviors": [
       "modal"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1741"
+    "sourceFile": "silicaui-html/src/component.ts:2299"
   },
   {
     "name": "DialogTrigger",
@@ -8911,7 +9679,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1753"
+    "sourceFile": "silicaui-html/src/component.ts:2311"
   },
   {
     "name": "DialogBackdrop",
@@ -8921,7 +9689,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1765"
+    "sourceFile": "silicaui-html/src/component.ts:2323"
   },
   {
     "name": "DialogContent",
@@ -8931,7 +9699,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1776"
+    "sourceFile": "silicaui-html/src/component.ts:2334"
   },
   {
     "name": "DialogClose",
@@ -8941,7 +9709,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1791"
+    "sourceFile": "silicaui-html/src/component.ts:2349"
   },
   {
     "name": "DialogTitle",
@@ -8973,7 +9741,7 @@
     "behaviors": [
       "modal"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1809"
+    "sourceFile": "silicaui-html/src/component.ts:2367"
   },
   {
     "name": "DrawerTrigger",
@@ -8983,7 +9751,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1821"
+    "sourceFile": "silicaui-html/src/component.ts:2379"
   },
   {
     "name": "DrawerBackdrop",
@@ -8993,7 +9761,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1833"
+    "sourceFile": "silicaui-html/src/component.ts:2391"
   },
   {
     "name": "DrawerContent",
@@ -9003,7 +9771,7 @@
     "icon": "sidebar",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1844"
+    "sourceFile": "silicaui-html/src/component.ts:2402"
   },
   {
     "name": "DrawerClose",
@@ -9013,7 +9781,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1860"
+    "sourceFile": "silicaui-html/src/component.ts:2418"
   },
   {
     "name": "DrawerTitle",
@@ -9045,7 +9813,7 @@
     "behaviors": [
       "modal"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1879"
+    "sourceFile": "silicaui-html/src/component.ts:2437"
   },
   {
     "name": "AlertDialogTrigger",
@@ -9055,7 +9823,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1891"
+    "sourceFile": "silicaui-html/src/component.ts:2449"
   },
   {
     "name": "AlertDialogBackdrop",
@@ -9065,7 +9833,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1903"
+    "sourceFile": "silicaui-html/src/component.ts:2461"
   },
   {
     "name": "AlertDialogContent",
@@ -9075,7 +9843,7 @@
     "icon": "warning",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1914"
+    "sourceFile": "silicaui-html/src/component.ts:2472"
   },
   {
     "name": "AlertDialogClose",
@@ -9085,7 +9853,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1929"
+    "sourceFile": "silicaui-html/src/component.ts:2487"
   },
   {
     "name": "AlertDialogCancel",
@@ -9095,7 +9863,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1941"
+    "sourceFile": "silicaui-html/src/component.ts:2499"
   },
   {
     "name": "AlertDialogAction",
@@ -9105,7 +9873,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1953"
+    "sourceFile": "silicaui-html/src/component.ts:2511"
   },
   {
     "name": "AlertDialogTitle",
@@ -9137,7 +9905,7 @@
     "behaviors": [
       "modal"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:1971"
+    "sourceFile": "silicaui-html/src/component.ts:2529"
   },
   {
     "name": "LightboxTrigger",
@@ -9147,7 +9915,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1983"
+    "sourceFile": "silicaui-html/src/component.ts:2541"
   },
   {
     "name": "LightboxBackdrop",
@@ -9157,7 +9925,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:1995"
+    "sourceFile": "silicaui-html/src/component.ts:2553"
   },
   {
     "name": "LightboxContent",
@@ -9167,7 +9935,7 @@
     "icon": "image",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2006"
+    "sourceFile": "silicaui-html/src/component.ts:2564"
   },
   {
     "name": "LightboxSlide",
@@ -9177,7 +9945,7 @@
     "icon": "image",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2021"
+    "sourceFile": "silicaui-html/src/component.ts:2579"
   },
   {
     "name": "LightboxPrev",
@@ -9187,7 +9955,7 @@
     "icon": "button",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2033"
+    "sourceFile": "silicaui-html/src/component.ts:2591"
   },
   {
     "name": "LightboxNext",
@@ -9197,7 +9965,7 @@
     "icon": "button",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2047"
+    "sourceFile": "silicaui-html/src/component.ts:2605"
   },
   {
     "name": "LightboxClose",
@@ -9207,7 +9975,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2061"
+    "sourceFile": "silicaui-html/src/component.ts:2619"
   },
   {
     "name": "LightboxCounter",
@@ -9217,7 +9985,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2076"
+    "sourceFile": "silicaui-html/src/component.ts:2634"
   },
   {
     "name": "CommandPalette",
@@ -9229,7 +9997,7 @@
     "behaviors": [
       "modal"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2091"
+    "sourceFile": "silicaui-html/src/component.ts:2649"
   },
   {
     "name": "CommandPaletteBackdrop",
@@ -9239,7 +10007,7 @@
     "icon": "box",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2106"
+    "sourceFile": "silicaui-html/src/component.ts:2664"
   },
   {
     "name": "CommandPaletteContent",
@@ -9249,7 +10017,7 @@
     "icon": "search",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2117"
+    "sourceFile": "silicaui-html/src/component.ts:2675"
   },
   {
     "name": "CommandPaletteInput",
@@ -9259,7 +10027,7 @@
     "icon": "input",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2132"
+    "sourceFile": "silicaui-html/src/component.ts:2690"
   },
   {
     "name": "CommandPaletteItem",
@@ -9269,7 +10037,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2145"
+    "sourceFile": "silicaui-html/src/component.ts:2703"
   },
   {
     "name": "Popover",
@@ -9281,7 +10049,7 @@
     "behaviors": [
       "popover"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2162"
+    "sourceFile": "silicaui-html/src/component.ts:2720"
   },
   {
     "name": "PopoverTrigger",
@@ -9291,7 +10059,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2174"
+    "sourceFile": "silicaui-html/src/component.ts:2732"
   },
   {
     "name": "PopoverContent",
@@ -9301,7 +10069,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2186"
+    "sourceFile": "silicaui-html/src/component.ts:2744"
   },
   {
     "name": "PopoverClose",
@@ -9311,7 +10079,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2198"
+    "sourceFile": "silicaui-html/src/component.ts:2756"
   },
   {
     "name": "PopoverTitle",
@@ -9343,7 +10111,7 @@
     "behaviors": [
       "popover"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2216"
+    "sourceFile": "silicaui-html/src/component.ts:2774"
   },
   {
     "name": "TooltipTrigger",
@@ -9353,7 +10121,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2228"
+    "sourceFile": "silicaui-html/src/component.ts:2786"
   },
   {
     "name": "TooltipContent",
@@ -9363,7 +10131,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2240"
+    "sourceFile": "silicaui-html/src/component.ts:2798"
   },
   {
     "name": "PreviewCard",
@@ -9375,7 +10143,7 @@
     "behaviors": [
       "popover"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2255"
+    "sourceFile": "silicaui-html/src/component.ts:2813"
   },
   {
     "name": "PreviewCardTrigger",
@@ -9385,7 +10153,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2267"
+    "sourceFile": "silicaui-html/src/component.ts:2825"
   },
   {
     "name": "PreviewCardContent",
@@ -9395,7 +10163,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2279"
+    "sourceFile": "silicaui-html/src/component.ts:2837"
   },
   {
     "name": "ContextMenu",
@@ -9407,7 +10175,7 @@
     "behaviors": [
       "menu"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2297"
+    "sourceFile": "silicaui-html/src/component.ts:2855"
   },
   {
     "name": "ContextMenuTrigger",
@@ -9417,7 +10185,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2309"
+    "sourceFile": "silicaui-html/src/component.ts:2867"
   },
   {
     "name": "ContextMenuContent",
@@ -9427,7 +10195,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2321"
+    "sourceFile": "silicaui-html/src/component.ts:2879"
   },
   {
     "name": "ContextMenuItem",
@@ -9437,7 +10205,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2333"
+    "sourceFile": "silicaui-html/src/component.ts:2891"
   },
   {
     "name": "Menubar",
@@ -9459,7 +10227,7 @@
     "behaviors": [
       "menu"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2351"
+    "sourceFile": "silicaui-html/src/component.ts:2909"
   },
   {
     "name": "MenubarTrigger",
@@ -9469,7 +10237,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2363"
+    "sourceFile": "silicaui-html/src/component.ts:2921"
   },
   {
     "name": "MenubarContent",
@@ -9479,7 +10247,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2375"
+    "sourceFile": "silicaui-html/src/component.ts:2933"
   },
   {
     "name": "MenubarItem",
@@ -9489,7 +10257,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2387"
+    "sourceFile": "silicaui-html/src/component.ts:2945"
   },
   {
     "name": "NavigationMenu",
@@ -9511,7 +10279,7 @@
     "behaviors": [
       "popover"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2405"
+    "sourceFile": "silicaui-html/src/component.ts:2963"
   },
   {
     "name": "NavigationMenuTrigger",
@@ -9521,7 +10289,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2417"
+    "sourceFile": "silicaui-html/src/component.ts:2975"
   },
   {
     "name": "NavigationMenuContent",
@@ -9531,7 +10299,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2429"
+    "sourceFile": "silicaui-html/src/component.ts:2987"
   },
   {
     "name": "NavigationMenuLink",
@@ -9541,7 +10309,7 @@
     "icon": "nav",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2441"
+    "sourceFile": "silicaui-html/src/component.ts:2999"
   },
   {
     "name": "Combobox",
@@ -9553,7 +10321,7 @@
     "behaviors": [
       "combobox"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2456"
+    "sourceFile": "silicaui-html/src/component.ts:3014"
   },
   {
     "name": "Autocomplete",
@@ -9565,7 +10333,7 @@
     "behaviors": [
       "combobox"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2463"
+    "sourceFile": "silicaui-html/src/component.ts:3021"
   },
   {
     "name": "MultiSelect",
@@ -9577,7 +10345,7 @@
     "behaviors": [
       "combobox"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2470"
+    "sourceFile": "silicaui-html/src/component.ts:3028"
   },
   {
     "name": "DateInput",
@@ -9589,7 +10357,7 @@
     "behaviors": [
       "date-segment"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2482"
+    "sourceFile": "silicaui-html/src/component.ts:3040"
   },
   {
     "name": "DateRangeInput",
@@ -9601,7 +10369,7 @@
     "behaviors": [
       "date-segment"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2500"
+    "sourceFile": "silicaui-html/src/component.ts:3058"
   },
   {
     "name": "DateTimeInput",
@@ -9613,7 +10381,7 @@
     "behaviors": [
       "date-segment"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2516"
+    "sourceFile": "silicaui-html/src/component.ts:3074"
   },
   {
     "name": "TimeInput",
@@ -9625,7 +10393,7 @@
     "behaviors": [
       "date-segment"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2542"
+    "sourceFile": "silicaui-html/src/component.ts:3100"
   },
   {
     "name": "PinInput",
@@ -9637,7 +10405,7 @@
     "behaviors": [
       "pin-input"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2568"
+    "sourceFile": "silicaui-html/src/component.ts:3126"
   },
   {
     "name": "Calendar",
@@ -9649,7 +10417,7 @@
     "behaviors": [
       "calendar"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2613"
+    "sourceFile": "silicaui-html/src/component.ts:3171"
   },
   {
     "name": "DatePicker",
@@ -9661,7 +10429,7 @@
     "behaviors": [
       "popover"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2625"
+    "sourceFile": "silicaui-html/src/component.ts:3183"
   },
   {
     "name": "DatePickerTrigger",
@@ -9671,7 +10439,7 @@
     "icon": "calendar",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2637"
+    "sourceFile": "silicaui-html/src/component.ts:3195"
   },
   {
     "name": "DatePickerContent",
@@ -9683,7 +10451,7 @@
     "behaviors": [
       "calendar"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2649"
+    "sourceFile": "silicaui-html/src/component.ts:3207"
   },
   {
     "name": "DateRangePicker",
@@ -9695,7 +10463,7 @@
     "behaviors": [
       "popover"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2663"
+    "sourceFile": "silicaui-html/src/component.ts:3221"
   },
   {
     "name": "DateRangePickerTrigger",
@@ -9705,7 +10473,7 @@
     "icon": "calendar",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2675"
+    "sourceFile": "silicaui-html/src/component.ts:3233"
   },
   {
     "name": "DateRangePickerContent",
@@ -9717,7 +10485,7 @@
     "behaviors": [
       "calendar"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2687"
+    "sourceFile": "silicaui-html/src/component.ts:3245"
   },
   {
     "name": "TreeView",
@@ -9729,7 +10497,7 @@
     "behaviors": [
       "tree"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2707"
+    "sourceFile": "silicaui-html/src/component.ts:3265"
   },
   {
     "name": "TreeNode",
@@ -9739,7 +10507,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2719"
+    "sourceFile": "silicaui-html/src/component.ts:3277"
   },
   {
     "name": "TreeToggle",
@@ -9749,7 +10517,7 @@
     "icon": "button",
     "container": false,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2731"
+    "sourceFile": "silicaui-html/src/component.ts:3289"
   },
   {
     "name": "TreeGroup",
@@ -9759,7 +10527,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2745"
+    "sourceFile": "silicaui-html/src/component.ts:3303"
   },
   {
     "name": "Wizard",
@@ -9771,7 +10539,7 @@
     "behaviors": [
       "wizard"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2759"
+    "sourceFile": "silicaui-html/src/component.ts:3317"
   },
   {
     "name": "WizardStep",
@@ -9781,7 +10549,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2771"
+    "sourceFile": "silicaui-html/src/component.ts:3329"
   },
   {
     "name": "WizardPanel",
@@ -9791,7 +10559,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2785"
+    "sourceFile": "silicaui-html/src/component.ts:3343"
   },
   {
     "name": "WizardBack",
@@ -9801,7 +10569,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2797"
+    "sourceFile": "silicaui-html/src/component.ts:3355"
   },
   {
     "name": "WizardNext",
@@ -9811,7 +10579,7 @@
     "icon": "button",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2809"
+    "sourceFile": "silicaui-html/src/component.ts:3367"
   },
   {
     "name": "NumberField",
@@ -9823,7 +10591,7 @@
     "behaviors": [
       "number-field"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2827"
+    "sourceFile": "silicaui-html/src/component.ts:3385"
   },
   {
     "name": "ToggleGroup",
@@ -9835,7 +10603,7 @@
     "behaviors": [
       "toggle-group"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2857"
+    "sourceFile": "silicaui-html/src/component.ts:3415"
   },
   {
     "name": "ToggleGroupItem",
@@ -9845,7 +10613,7 @@
     "icon": "toggle",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:2875"
+    "sourceFile": "silicaui-html/src/component.ts:3433"
   },
   {
     "name": "Range",
@@ -9857,7 +10625,7 @@
     "behaviors": [
       "slider"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2895"
+    "sourceFile": "silicaui-html/src/component.ts:3453"
   },
   {
     "name": "Slider",
@@ -9869,7 +10637,7 @@
     "behaviors": [
       "slider"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2896"
+    "sourceFile": "silicaui-html/src/component.ts:3454"
   },
   {
     "name": "Switch",
@@ -9881,7 +10649,7 @@
     "behaviors": [
       "switch"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2902"
+    "sourceFile": "silicaui-html/src/component.ts:3460"
   },
   {
     "name": "Rating",
@@ -9893,7 +10661,7 @@
     "behaviors": [
       "rating"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2926"
+    "sourceFile": "silicaui-html/src/component.ts:3484"
   },
   {
     "name": "ScrollArea",
@@ -9905,7 +10673,7 @@
     "behaviors": [
       "scroll-area"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2962"
+    "sourceFile": "silicaui-html/src/component.ts:3520"
   },
   {
     "name": "OverflowList",
@@ -9917,7 +10685,7 @@
     "behaviors": [
       "overflow-list"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:2982"
+    "sourceFile": "silicaui-html/src/component.ts:3540"
   },
   {
     "name": "OverflowListItem",
@@ -9927,7 +10695,7 @@
     "icon": "box",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:3010"
+    "sourceFile": "silicaui-html/src/component.ts:3568"
   },
   {
     "name": "Dropzone",
@@ -9939,7 +10707,7 @@
     "behaviors": [
       "dropzone"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:3027"
+    "sourceFile": "silicaui-html/src/component.ts:3585"
   },
   {
     "name": "FileUpload",
@@ -9951,7 +10719,7 @@
     "behaviors": [
       "dropzone"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:3028"
+    "sourceFile": "silicaui-html/src/component.ts:3586"
   },
   {
     "name": "PhoneInput",
@@ -9963,7 +10731,7 @@
     "behaviors": [
       "phone-input"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:3034"
+    "sourceFile": "silicaui-html/src/component.ts:3592"
   },
   {
     "name": "ThemeController",
@@ -9975,7 +10743,7 @@
     "behaviors": [
       "theme-toggle"
     ],
-    "sourceFile": "silicaui-html/src/component.ts:3073"
+    "sourceFile": "silicaui-html/src/component.ts:3631"
   },
   {
     "name": "Overlay",
@@ -9985,7 +10753,7 @@
     "icon": "image",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:3095"
+    "sourceFile": "silicaui-html/src/component.ts:3653"
   },
   {
     "name": "OverlayScrim",
@@ -9995,6 +10763,6 @@
     "icon": "image",
     "container": true,
     "behaviors": [],
-    "sourceFile": "silicaui-html/src/component.ts:3103"
+    "sourceFile": "silicaui-html/src/component.ts:3661"
   }
 ]