@cloudflare/kumo 1.15.0 → 1.16.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @cloudflare/kumo
 
+## 1.16.0
+
+### Minor Changes
+
+- c5f69b9: Make Chart components keyboard focusable with tabindex. Timeseries adds `ariaDescription` prop
+
+### Patch Changes
+
+- b3c44f1: Generate component-registry files at build time, remove from git
+
+  Eliminates contributor friction by generating component-registry.json,
+  component-registry.md, and schemas.ts during the build process instead of
+  tracking them in git. Contributors will no longer see stale diffs or need to
+  manually regenerate these files.
+  - Add ai/component-registry.json and ai/component-registry.md to .gitignore
+  - Convert ai/schemas.ts to a stub file for TypeScript compilation
+  - Add codegen:registry to build script for deterministic generation
+
+- 759f4e8: feat(code): add HCL (HashiCorp Configuration Language) as a supported syntax highlighting language
+- a67fac7: fix(flow): connector lines no longer misalign when the page scrolls or a sidebar shifts the layout
+
+  `getBoundingClientRect` values were stored in React state per node and later subtracted against a freshly-read container rect at connector-draw time. Any layout shift (sidebar open/close, page scroll, inner container scroll) between those two reads produced stale coordinates, causing connector lines to jump out of place or disappear entirely.
+
+  Fix: add `scroll` and `resize` listeners (capture phase) at the `FlowNode`, `FlowParallelNode`, and `FlowNodeList` levels so all rects are remeasured after any layout shift. Connector computation in `FlowNodeList` and `FlowParallelNode` is also moved from the render phase into `useLayoutEffect` so the container rect and node rects are always read in the same synchronous pass.
+
+- 15a344e: Add missing HCL language import to server-side Shiki bundle
+
+  The HCL language was added to SupportedLanguage type and the client-side
+  provider in a previous commit, but the server.tsx BUNDLED_LANGS object
+  was missed. This caused typecheck failures when building.
+
+- 5d8d3a9: Sidebar: polish animations, fix separator reflow bug, improve header spacing
+- 7e82920: Fix connector alignment and spacing between adjacent parallel nodes in Flow diagrams
+
 ## 1.15.0
 
 ### Minor Changes

package/ai/component-registry.json

@@ -1938,13 +1938,7 @@
           "description": "Additional CSS classes merged via `cn()`."
         }
       },
-      "examples": [
-        "<CodeBlock\n      lang=\"tsx\"\n      code={`const greeting = \"Hello, World!\";\nconsole.log(greeting);`}\n    />",
-        "<CodeBlock\n      lang=\"tsx\"\n      code={`interface User {\n  id: string;\n  name: string;\n  email: string;\n}\n\nconst user: User = {\n  id: \"1\",\n  name: \"John Doe\",\n  email: \"john@example.com\"\n};`}\n    />",
-        "<CodeBlock\n      lang=\"bash\"\n      code={`npm install @cloudflare/kumo\npnpm add @cloudflare/kumo`}\n    />",
-        "<CodeBlock\n      lang=\"jsonc\"\n      code={`{\n  \"name\": \"kumo\",\n  \"version\": \"1.0.0\",\n  \"dependencies\": {\n    \"react\": \"^19.0.0\"\n  }\n}`}\n    />",
-        "<Code\n      lang=\"bash\"\n      code=\"export API_KEY={{apiKey}}\"\n      values={{\n        apiKey: { value: \"sk_live_123\", highlight: true },\n      }}\n    />"
-      ],
+      "examples": [],
       "colors": [
         "bg-kumo-base",
         "border-kumo-fill",
@@ -3354,7 +3348,8 @@
       "examples": [
         "<Loader />",
         "<div className=\"flex items-center gap-4\">\n      <Loader size=\"sm\" />\n      <Loader size=\"base\" />\n      <Loader size=\"lg\" />\n    </div>",
-        "<Loader size={24} />"
+        "<Loader size={24} />",
+        "<Loader className=\"text-kumo-subtle\" />"
       ],
       "colors": []
     },
@@ -3387,9 +3382,9 @@
         }
       },
       "examples": [
-        "<MenuBar\n      isActive=\"bold\"\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => {},\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => {},\n        },\n      ]}\n    />",
-        "<MenuBar\n      isActive=\"bold\"\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => {},\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => {},\n        },\n      ]}\n    />",
-        "<MenuBar\n      isActive=\"\"\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => {},\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => {},\n        },\n      ]}\n    />"
+        "<MenuBar\n      isActive={active}\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => setActive(active === \"bold\" ? undefined : \"bold\"),\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => setActive(active === \"italic\" ? undefined : \"italic\"),\n        },\n      ]}\n    />",
+        "<MenuBar\n      isActive={active}\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => setActive(active === \"bold\" ? undefined : \"bold\"),\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => setActive(active === \"italic\" ? undefined : \"italic\"),\n        },\n      ]}\n    />",
+        "<MenuBar\n      isActive={active}\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => setActive(active === \"bold\" ? undefined : \"bold\"),\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => setActive(active === \"italic\" ? undefined : \"italic\"),\n        },\n      ]}\n    />"
       ],
       "colors": [
         "bg-kumo-base",
@@ -3461,7 +3456,7 @@
         "<Meter label=\"Progress\" value={40} showValue={false} />",
         "<Meter label=\"Quota reached\" value={100} />",
         "<Meter label=\"Memory usage\" value={15} />",
-        "<Meter\n      label=\"Upload progress\"\n      value={80}\n      indicatorClassName=\"from-green-500 via-green-500 to-green-500\"\n    />"
+        "<Meter\n      label=\"Upload progress\"\n      value={80}\n      indicatorClassName=\"from-kumo-success via-kumo-success to-kumo-success\"\n    />"
       ],
       "colors": [
         "bg-kumo-fill",
@@ -4154,6 +4149,298 @@
         "text-kumo-subtle"
       ]
     },
+    "Sidebar": {
+      "name": "Sidebar",
+      "type": "component",
+      "description": "Sidebar — responsive navigation panel with expand/collapse support.  Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`, `.Content`, `.Footer`, `.Group`, `.GroupLabel`, `.GroupContent`, `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuAction`, `.MenuBadge`, `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`, `.Input`, `.Trigger`, `.Rail`, `.MenuChevron`, `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.  Built on `@base-ui/react/collapsible` + `@base-ui/react/dialog`.",
+      "importPath": "@cloudflare/kumo",
+      "category": "Other",
+      "props": {
+        "defaultOpen": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Initial open state when uncontrolled."
+        },
+        "open": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Controlled open state."
+        },
+        "variant": {
+          "type": "enum",
+          "optional": true,
+          "description": "Sidebar layout variant.",
+          "values": [
+            "sidebar",
+            "floating",
+            "inset"
+          ],
+          "descriptions": {
+            "sidebar": "Standard sidebar with border separator",
+            "floating": "Floating sidebar with shadow and rounded corners",
+            "inset": "Inset sidebar within the content area"
+          },
+          "default": "sidebar"
+        },
+        "side": {
+          "type": "enum",
+          "optional": true,
+          "description": "Which side the sidebar is on.",
+          "values": [
+            "left",
+            "right"
+          ],
+          "descriptions": {
+            "left": "Left-aligned sidebar",
+            "right": "Right-aligned sidebar"
+          },
+          "default": "left"
+        },
+        "collapsible": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "icon",
+            "offcanvas",
+            "none"
+          ],
+          "descriptions": {
+            "icon": "Collapses to show icons only",
+            "offcanvas": "Slides off screen when collapsed",
+            "none": "Cannot be collapsed"
+          },
+          "default": "icon"
+        },
+        "resizable": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Enable drag-to-resize on the sidebar edge."
+        },
+        "defaultWidth": {
+          "type": "number",
+          "optional": true,
+          "description": "Initial width in pixels when resizable."
+        },
+        "minWidth": {
+          "type": "number",
+          "optional": true,
+          "description": "Minimum width in pixels when resizing."
+        },
+        "maxWidth": {
+          "type": "number",
+          "optional": true,
+          "description": "Maximum width in pixels when resizing."
+        },
+        "children": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Content — typically `<Sidebar>` + main content."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes for the wrapper div."
+        }
+      },
+      "examples": [
+        "<DemoContainer>\n      <Sidebar.Provider defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>\n                  Domains\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuItem>\n                  <Sidebar.Collapsible defaultOpen>\n                    <Sidebar.CollapsibleTrigger\n                      render={\n                        <Sidebar.MenuButton icon={CodeIcon}>\n                          Compute\n                          <Sidebar.MenuChevron />\n                        </Sidebar.MenuButton>\n                      }\n                    />\n                    <Sidebar.CollapsibleContent>\n                      <Sidebar.MenuSub>\n                        <Sidebar.MenuSubButton>\n                          Workers & Pages\n                        </Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>\n                          Durable Objects\n                        </Sidebar.MenuSubButton>\n                      </Sidebar.MenuSub>\n                    </Sidebar.CollapsibleContent>\n                  </Sidebar.Collapsible>\n                </Sidebar.MenuItem>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\n      <Sidebar.Provider defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Content>\n            {/* GroupContent is required for collapsible groups (provides grid-rows animation) */}\n            <Sidebar.Group collapsible defaultOpen>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.GroupContent>\n                <Sidebar.Menu>\n                  <Sidebar.MenuButton icon={HouseIcon} active>\n                    Home\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={ChartBarIcon}>\n                    Analytics\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={GlobeIcon}>\n                    Domains\n                  </Sidebar.MenuButton>\n                </Sidebar.Menu>\n              </Sidebar.GroupContent>\n            </Sidebar.Group>\n\n            <Sidebar.Group collapsible defaultOpen>\n              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n              <Sidebar.GroupContent>\n                <Sidebar.Menu>\n                  <Sidebar.MenuButton icon={CodeIcon}>\n                    Compute\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={DatabaseIcon}>\n                    Storage\n                  </Sidebar.MenuButton>\n                </Sidebar.Menu>\n              </Sidebar.GroupContent>\n            </Sidebar.Group>\n\n            <Sidebar.Group collapsible defaultOpen={false}>\n              <Sidebar.GroupLabel>Protect & Connect</Sidebar.GroupLabel>\n              <Sidebar.GroupContent>\n                <Sidebar.Menu>\n                  <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                    Security\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={LockIcon}>\n                    Zero Trust\n                  </Sidebar.MenuButton>\n                </Sidebar.Menu>\n              </Sidebar.GroupContent>\n            </Sidebar.Group>\n          </Sidebar.Content>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\n      <Sidebar.Provider defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} tooltip=\"Home\" active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon} tooltip=\"Analytics\">\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={CodeIcon} tooltip=\"Compute\">\n                  Compute\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon} tooltip=\"Storage\">\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain>\n          <ToggleButton />\n          <p className=\"text-sm\">\n            Click the button or the sidebar trigger to toggle\n          </p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\n      <Sidebar.Provider defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Header>\n            <AccountSwitcher />\n          </Sidebar.Header>\n\n          <Sidebar.Content>\n            <div className=\"px-1 pb-2\">\n              <Sidebar.Input placeholder=\"Quick search...\" shortcut=\"⌘K\" />\n            </div>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics & Logs\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>\n                  Domains\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Separator />\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuItem>\n                  <Sidebar.Collapsible defaultOpen>\n                    <Sidebar.CollapsibleTrigger\n                      render={\n                        <Sidebar.MenuButton icon={CodeIcon}>\n                          Compute\n                          <Sidebar.MenuChevron />\n                        </Sidebar.MenuButton>\n                      }\n                    />\n                    <Sidebar.CollapsibleContent>\n                      <Sidebar.MenuSub>\n                        <Sidebar.MenuSubButton>\n                          Workers & Pages\n                        </Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>\n                          Durable Objects\n                        </Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>\n                          Containers\n                          <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n                        </Sidebar.MenuSubButton>\n                      </Sidebar.MenuSub>\n                    </Sidebar.CollapsibleContent>\n                  </Sidebar.Collapsible>\n                </Sidebar.MenuItem>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Protect & Connect</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                  Security\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={LockIcon}>\n                  Zero Trust\n                  <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n\n          <Sidebar.Footer>\n            <Sidebar.MenuButton icon={GearIcon}>\n              Manage account\n            </Sidebar.MenuButton>\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\n      <Sidebar.Provider\n        defaultOpen\n        resizable\n        defaultWidth={240}\n        minWidth={180}\n        maxWidth={400}\n        className=\"min-h-0! h-full\"\n      >\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n          <Sidebar.ResizeHandle />\n        </Sidebar>\n        <DemoMain>\n          <p className=\"text-sm\">Drag the sidebar edge to resize</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\n      <Sidebar.Provider defaultOpen side=\"right\" className=\"min-h-0! h-full\">\n        <DemoMain />\n        <Sidebar>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Details</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={GearIcon} active>\n                  Properties\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Metrics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={BellIcon}>Alerts</Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n        </Sidebar>\n      </Sidebar.Provider>\n    </DemoContainer>"
+      ],
+      "colors": [
+        "bg-kumo-base",
+        "bg-kumo-brand",
+        "bg-kumo-line",
+        "bg-kumo-overlay",
+        "bg-kumo-recessed",
+        "bg-kumo-tint",
+        "border-kumo-line",
+        "ring-kumo-line",
+        "ring-kumo-ring",
+        "text-kumo-default",
+        "text-kumo-strong",
+        "text-kumo-subtle"
+      ],
+      "subComponents": {
+        "Provider": {
+          "name": "Provider",
+          "description": "Provider sub-component",
+          "props": {
+            "defaultOpen": {
+              "type": "boolean",
+              "optional": true
+            },
+            "open": {
+              "type": "boolean",
+              "optional": true
+            },
+            "variant": {
+              "type": "SidebarVariant",
+              "optional": true
+            },
+            "side": {
+              "type": "SidebarSide",
+              "optional": true
+            },
+            "collapsible": {
+              "type": "\"icon\" | \"offcanvas\" | \"none\"",
+              "optional": true
+            },
+            "resizable": {
+              "type": "boolean",
+              "optional": true
+            },
+            "defaultWidth": {
+              "type": "number",
+              "optional": true
+            },
+            "minWidth": {
+              "type": "number",
+              "optional": true
+            },
+            "maxWidth": {
+              "type": "number",
+              "optional": true
+            },
+            "children": {
+              "type": "ReactNode",
+              "required": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
+        },
+        "Header": {
+          "name": "Header",
+          "description": "Header sub-component",
+          "props": {}
+        },
+        "Content": {
+          "name": "Content",
+          "description": "Content sub-component",
+          "props": {}
+        },
+        "Footer": {
+          "name": "Footer",
+          "description": "Footer sub-component",
+          "props": {}
+        },
+        "Group": {
+          "name": "Group",
+          "description": "Group sub-component",
+          "props": {}
+        },
+        "GroupLabel": {
+          "name": "GroupLabel",
+          "description": "GroupLabel sub-component",
+          "props": {}
+        },
+        "GroupContent": {
+          "name": "GroupContent",
+          "description": "GroupContent sub-component",
+          "props": {}
+        },
+        "Menu": {
+          "name": "Menu",
+          "description": "Menu sub-component",
+          "props": {}
+        },
+        "MenuItem": {
+          "name": "MenuItem",
+          "description": "MenuItem sub-component",
+          "props": {}
+        },
+        "MenuButton": {
+          "name": "MenuButton",
+          "description": "MenuButton sub-component",
+          "props": {}
+        },
+        "MenuAction": {
+          "name": "MenuAction",
+          "description": "MenuAction sub-component",
+          "props": {}
+        },
+        "MenuBadge": {
+          "name": "MenuBadge",
+          "description": "MenuBadge sub-component",
+          "props": {}
+        },
+        "MenuSub": {
+          "name": "MenuSub",
+          "description": "MenuSub sub-component",
+          "props": {}
+        },
+        "MenuSubItem": {
+          "name": "MenuSubItem",
+          "description": "MenuSubItem sub-component",
+          "props": {}
+        },
+        "MenuSubButton": {
+          "name": "MenuSubButton",
+          "description": "MenuSubButton sub-component",
+          "props": {}
+        },
+        "Separator": {
+          "name": "Separator",
+          "description": "Separator sub-component",
+          "props": {}
+        },
+        "Input": {
+          "name": "Input",
+          "description": "Input sub-component",
+          "props": {}
+        },
+        "Trigger": {
+          "name": "Trigger",
+          "description": "Trigger sub-component",
+          "props": {}
+        },
+        "Rail": {
+          "name": "Rail",
+          "description": "Rail sub-component",
+          "props": {}
+        },
+        "ResizeHandle": {
+          "name": "ResizeHandle",
+          "description": "ResizeHandle sub-component",
+          "props": {}
+        },
+        "MenuChevron": {
+          "name": "MenuChevron",
+          "description": "MenuChevron sub-component",
+          "props": {}
+        },
+        "Collapsible": {
+          "name": "Collapsible",
+          "description": "Collapsible sub-component",
+          "props": {}
+        },
+        "CollapsibleTrigger": {
+          "name": "CollapsibleTrigger",
+          "description": "CollapsibleTrigger sub-component",
+          "props": {}
+        },
+        "CollapsibleContent": {
+          "name": "CollapsibleContent",
+          "description": "CollapsibleContent sub-component",
+          "props": {}
+        }
+      },
+      "styling": {
+        "width": {
+          "expanded": "16rem",
+          "icon": "3rem"
+        },
+        "mobile": {
+          "breakpoint": 768
+        }
+      }
+    },
     "Surface": {
       "name": "Surface",
       "type": "component",
@@ -4306,7 +4593,8 @@
         "<Switch label=\"Disabled\" checked={false} disabled />",
         "<Switch\n      label=\"Neutral switch\"\n      variant=\"neutral\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />",
         "<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Neutral off\"\n        variant=\"neutral\"\n        checked={false}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral on\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral disabled\"\n        variant=\"neutral\"\n        checked={false}\n        disabled\n      />\n    </div>",
-        "<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Default variant\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral variant\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n    </div>"
+        "<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Default variant\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral variant\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n    </div>",
+        "<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Small\"\n        size=\"sm\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Base (default)\"\n        size=\"base\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Large\"\n        size=\"lg\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n    </div>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -4375,6 +4663,9 @@
           "descriptions": {
             "auto": "Auto table layout - columns resize based on content",
             "fixed": "Fixed table layout - columns have equal width, controlled via colgroup"
+          },
+          "classes": {
+            "fixed": "table-fixed"
           }
         },
         "variant": {
@@ -4387,6 +4678,9 @@
           "descriptions": {
             "default": "Default row variant",
             "selected": "Selected row variant"
+          },
+          "classes": {
+            "selected": "bg-kumo-tint"
           }
         },
         "className": {
@@ -4712,6 +5006,13 @@
             "error": "Error toast for critical issues",
             "warning": "Warning toast for cautionary messages",
             "info": "Info toast for neutral informational messages"
+          },
+          "classes": {
+            "default": "border-kumo-fill bg-kumo-control",
+            "success": "border-kumo-success bg-kumo-control [&_[data-toast-icon]]:text-kumo-success [&_[data-toast-title]]:text-kumo-success",
+            "error": "border-kumo-danger bg-kumo-control [&_[data-toast-icon]]:text-kumo-danger [&_[data-toast-title]]:text-kumo-danger",
+            "warning": "border-kumo-warning bg-kumo-control [&_[data-toast-icon]]:text-kumo-warning [&_[data-toast-title]]:text-kumo-warning",
+            "info": "border-kumo-info bg-kumo-control [&_[data-toast-icon]]:text-kumo-info [&_[data-toast-title]]:text-kumo-info"
           }
         },
         "className": {
@@ -5109,6 +5410,7 @@
         "Label",
         "Link",
         "SensitiveInput",
+        "Sidebar",
         "Table",
         "DeleteResource"
       ],
@@ -5165,6 +5467,7 @@
       "ResourceListPage",
       "Select",
       "SensitiveInput",
+      "Sidebar",
       "Surface",
       "Switch",
       "Table",
@@ -5205,6 +5508,7 @@
         "Radio",
         "Select",
         "SensitiveInput",
+        "Sidebar",
         "Surface",
         "Switch",
         "Table",