@cloudflare/kumo 1.18.0 → 2.0.0

package/ai/component-registry.json

@@ -1,6 +1,171 @@
 {
   "version": "1.0.0",
   "components": {
+    "Autocomplete": {
+      "name": "Autocomplete",
+      "type": "component",
+      "description": "Autocomplete — free-form text input with an optional filtered suggestion list.  Unlike Combobox, the input value is not restricted to items in the list. Use Combobox when the selected value must come from the list.  Compound component: `Autocomplete` (Root), `.InputGroup`, `.Content`, `.Item`, `.GroupLabel`, `.Group`, `.Separator`, `.List`, `.Collection`.  `InputGroup` renders the text input with Input component styling. Pass a `size` prop to `InputGroup` to match the Input component sizes.",
+      "importPath": "@cloudflare/kumo",
+      "category": "Other",
+      "props": {
+        "items": {
+          "type": "unknown[]",
+          "required": true,
+          "description": "Array of items to display in the dropdown"
+        },
+        "value": {
+          "type": "string | number | string[]",
+          "optional": true,
+          "description": "The controlled input value"
+        },
+        "open": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Whether the popup is open (controlled)"
+        },
+        "children": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Autocomplete content (input group, popup content)"
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes"
+        },
+        "label": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Label content (enables Field wrapper)"
+        },
+        "required": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Whether the field is required"
+        },
+        "labelTooltip": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Tooltip content to display next to the label"
+        },
+        "description": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Helper text displayed below the field"
+        },
+        "error": {
+          "type": "string | object",
+          "optional": true,
+          "description": "Error message or validation error object"
+        }
+      },
+      "examples": [
+        "<Autocomplete items={fruits}>\n      <Autocomplete.InputGroup placeholder=\"Search fruits…\" />\n      <Autocomplete.Content>\n        <Autocomplete.List>\n          {(item: string) => (\n            <Autocomplete.Item key={item} value={item}>\n              {item}\n            </Autocomplete.Item>\n          )}\n        </Autocomplete.List>\n      </Autocomplete.Content>\n    </Autocomplete>",
+        "<div className=\"w-80\">\n      <Autocomplete\n        items={countries}\n        label=\"Country\"\n        description=\"Start typing to filter countries\"\n        filter={(item: Country, query: string) =>\n          item.label.toLowerCase().includes(query.toLowerCase())\n        }\n      >\n        <Autocomplete.InputGroup placeholder=\"Search countries…\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: Country) => (\n              <Autocomplete.Item key={item.code} value={item}>\n                {item.label}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n    </div>",
+        "<div className=\"w-80\">\n      <Autocomplete\n        items={countries}\n        label=\"Country\"\n        error={{ message: \"Please enter a valid country\", match: true }}\n        filter={(item: Country, query: string) =>\n          item.label.toLowerCase().includes(query.toLowerCase())\n        }\n      >\n        <Autocomplete.InputGroup placeholder=\"Search countries…\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: Country) => (\n              <Autocomplete.Item key={item.code} value={item}>\n                {item.label}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n    </div>",
+        "<Autocomplete items={servers}>\n      <Autocomplete.InputGroup placeholder=\"Select region…\" />\n      <Autocomplete.Content>\n        <Autocomplete.List>\n          {(group: ServerGroup) => (\n            <Autocomplete.Group key={group.value} items={group.items}>\n              <Autocomplete.GroupLabel>{group.value}</Autocomplete.GroupLabel>\n              <Autocomplete.Collection>\n                {(item: ServerLocation) => (\n                  <Autocomplete.Item key={item.value} value={item}>\n                    {item.label}\n                  </Autocomplete.Item>\n                )}\n              </Autocomplete.Collection>\n            </Autocomplete.Group>\n          )}\n        </Autocomplete.List>\n      </Autocomplete.Content>\n    </Autocomplete>",
+        "<div className=\"flex flex-wrap items-center gap-4\">\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"xs\" placeholder=\"xs\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"sm\" placeholder=\"sm\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"base\" placeholder=\"base (default)\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      <Autocomplete items={fruits.slice(0, 10)}>\n        <Autocomplete.InputGroup size=\"lg\" placeholder=\"lg\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n    </div>",
+        "<div className=\"flex flex-col gap-3 w-80\">\n      <Autocomplete\n        items={fruits}\n        value={value}\n        onValueChange={(v) => setValue(v)}\n      >\n        <Autocomplete.InputGroup placeholder=\"Type a fruit…\" />\n        <Autocomplete.Content>\n          <Autocomplete.List>\n            {(item: string) => (\n              <Autocomplete.Item key={item} value={item}>\n                {item}\n              </Autocomplete.Item>\n            )}\n          </Autocomplete.List>\n        </Autocomplete.Content>\n      </Autocomplete>\n      {value && (\n        <p className=\"text-sm text-kumo-subtle\">\n          Value: <span className=\"text-kumo-default font-medium\">{value}</span>\n        </p>\n      )}\n    </div>"
+      ],
+      "colors": [
+        "bg-kumo-control",
+        "bg-kumo-line",
+        "bg-kumo-overlay",
+        "border-kumo-line",
+        "ring-kumo-line",
+        "text-kumo-default",
+        "text-kumo-strong"
+      ],
+      "subComponents": {
+        "InputGroup": {
+          "name": "InputGroup",
+          "description": "InputGroup sub-component",
+          "props": {
+            "className": {
+              "type": "string",
+              "optional": true
+            },
+            "size": {
+              "type": "KumoAutocompleteSize",
+              "optional": true
+            },
+            "placeholder": {
+              "type": "string",
+              "optional": true
+            }
+          }
+        },
+        "Content": {
+          "name": "Content",
+          "description": "Content sub-component",
+          "props": {
+            "children": {
+              "type": "ReactNode",
+              "optional": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            },
+            "align": {
+              "type": "AutocompleteBase.Positioner.Props[\"align\"]",
+              "optional": true
+            },
+            "alignOffset": {
+              "type": "AutocompleteBase.Positioner.Props[\"alignOffset\"]",
+              "optional": true
+            },
+            "side": {
+              "type": "AutocompleteBase.Positioner.Props[\"side\"]",
+              "optional": true
+            },
+            "sideOffset": {
+              "type": "AutocompleteBase.Positioner.Props[\"sideOffset\"]",
+              "optional": true
+            }
+          }
+        },
+        "Item": {
+          "name": "Item",
+          "description": "Item sub-component",
+          "props": {}
+        },
+        "GroupLabel": {
+          "name": "GroupLabel",
+          "description": "GroupLabel sub-component",
+          "props": {}
+        },
+        "Group": {
+          "name": "Group",
+          "description": "Group sub-component",
+          "props": {}
+        },
+        "Separator": {
+          "name": "Separator",
+          "description": "Separator sub-component",
+          "props": {}
+        },
+        "List": {
+          "name": "List",
+          "description": "List sub-component",
+          "props": {}
+        },
+        "Empty": {
+          "name": "Empty",
+          "description": "Empty sub-component (wraps AutocompleteBase)",
+          "props": {},
+          "isPassThrough": true,
+          "baseComponent": "AutocompleteBase.Empty"
+        },
+        "Collection": {
+          "name": "Collection",
+          "description": "Collection sub-component (wraps AutocompleteBase)",
+          "props": {},
+          "isPassThrough": true,
+          "baseComponent": "AutocompleteBase.Collection"
+        }
+      }
+    },
     "Badge": {
       "name": "Badge",
       "type": "component",
@@ -368,21 +533,20 @@
             "outline": "Bordered button with transparent background"
           },
           "classes": {
-            "primary": "bg-kumo-brand !text-white hover:bg-kumo-brand-hover focus:bg-kumo-brand-hover disabled:bg-kumo-brand/50",
-            "secondary": "bg-kumo-base !text-kumo-default ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-hairline data-[state=open]:bg-kumo-base",
+            "primary": "bg-kumo-brand !text-white hover:bg-kumo-brand-hover disabled:bg-kumo-brand/50",
+            "secondary": "bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-hairline data-[state=open]:bg-kumo-base",
             "ghost": "text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit",
             "destructive": "bg-kumo-danger !text-white hover:bg-kumo-danger/70",
-            "secondary-destructive": "bg-kumo-base !text-kumo-danger ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-line data-[state=open]:bg-kumo-base",
+            "secondary-destructive": "bg-kumo-base !text-kumo-danger ring not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-hairline data-[state=open]:bg-kumo-base",
             "outline": "bg-transparent text-kumo-default ring ring-kumo-hairline"
           },
           "stateClasses": {
             "primary": {
               "hover": "hover:bg-kumo-brand-hover",
-              "focus": "focus:bg-kumo-brand-hover",
               "disabled": "disabled:bg-kumo-brand/50"
             },
             "secondary": {
-              "not-disabled": "not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-tint",
+              "not-disabled": "not-disabled:hover:bg-kumo-tint",
               "disabled": "disabled:bg-kumo-base/50 disabled:!text-kumo-default/70",
               "data-state": "data-[state=open]:bg-kumo-base"
             },
@@ -393,7 +557,7 @@
               "hover": "hover:bg-kumo-danger/70"
             },
             "secondary-destructive": {
-              "not-disabled": "not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-base",
+              "not-disabled": "not-disabled:hover:bg-kumo-base",
               "disabled": "disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70",
               "data-state": "data-[state=open]:bg-kumo-base"
             }
@@ -466,7 +630,8 @@
         "<Button variant=\"primary\" loading>\n      Loading...\n    </Button>",
         "<Button variant=\"secondary\" disabled>\n      Disabled\n    </Button>",
         "<Button variant=\"secondary\">Click me</Button>",
-        "<div className=\"flex flex-wrap items-center gap-3\">\n      <Button variant=\"secondary\" title=\"Create a new Worker\">\n        Create Worker\n      </Button>\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={PlusIcon}\n        aria-label=\"Add item\"\n        title=\"Add item\"\n      />\n    </div>"
+        "<div className=\"flex flex-wrap items-center gap-3\">\n      <Button variant=\"secondary\" title=\"Create a new Worker\">\n        Create Worker\n      </Button>\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={PlusIcon}\n        aria-label=\"Add item\"\n        title=\"Add item\"\n      />\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-3\">\n      <LinkButton href=\"/components/link\" variant=\"secondary\">\n        Read Link docs\n      </LinkButton>\n      <LinkButton\n        href=\"https://developers.cloudflare.com\"\n        variant=\"ghost\"\n        icon={ArrowSquareOutIcon}\n        external\n      >\n        Cloudflare Docs\n      </LinkButton>\n    </div>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -474,8 +639,9 @@
         "bg-kumo-brand-hover",
         "bg-kumo-danger",
         "bg-kumo-tint",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
         "ring-kumo-hairline",
-        "ring-kumo-line",
         "text-kumo-danger",
         "text-kumo-default",
         "text-kumo-subtle"
@@ -501,12 +667,12 @@
             "error": "Error state for validation failures"
           },
           "classes": {
-            "default": "[&:focus-within>span]:ring-kumo-hairline [&:hover>span]:ring-kumo-hairline",
+            "default": "[&:focus-within>span]:ring-kumo-focus [&:hover>span]:ring-kumo-hairline",
             "error": "[&>span]:ring-kumo-danger"
           },
           "stateClasses": {
             "default": {
-              "focus": "[&:focus-within>span]:ring-kumo-hairline",
+              "focus": "[&:focus-within>span]:ring-kumo-focus",
               "hover": "[&:hover>span]:ring-kumo-hairline"
             }
           },
@@ -556,10 +722,6 @@
           "type": "string",
           "optional": true,
           "description": "Additional class name"
-        },
-        "onValueChange": {
-          "type": "(checked: boolean) => void",
-          "description": "Callback when checkbox value changes"
         }
       },
       "examples": [
@@ -571,15 +733,18 @@
         "<Checkbox label=\"Disabled option\" disabled />",
         "<Checkbox label=\"Invalid option\" variant=\"error\" />",
         "<Checkbox.Group\n      legend=\"Email preferences\"\n      description=\"Choose how you'd like to receive updates\"\n      value={preferences}\n      onValueChange={setPreferences}\n    >\n      <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n      <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n      <Checkbox.Item value=\"push\" label=\"Push notifications\" />\n    </Checkbox.Group>",
+        "<Checkbox.Group value={preferences} onValueChange={setPreferences}>\n      <Checkbox.Legend className=\"sr-only\">\n        Notification preferences\n      </Checkbox.Legend>\n      <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n      <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n      <Checkbox.Item value=\"push\" label=\"Push notifications\" />\n    </Checkbox.Group>",
+        "<Checkbox.Group value={preferences} onValueChange={setPreferences}>\n      <Checkbox.Legend className=\"text-sm font-normal text-kumo-subtle\">\n        Notification preferences\n      </Checkbox.Legend>\n      <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n      <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n      <Checkbox.Item value=\"push\" label=\"Push notifications\" />\n    </Checkbox.Group>",
         "<Checkbox.Group\n      legend=\"Required preferences\"\n      error=\"Please select at least one notification method\"\n      value={[]}\n      onValueChange={() => {}}\n    >\n      <Checkbox.Item value=\"email\" label=\"Email\" variant=\"error\" />\n      <Checkbox.Item value=\"sms\" label=\"SMS\" variant=\"error\" />\n    </Checkbox.Group>"
       ],
       "colors": [
         "bg-kumo-base",
         "bg-kumo-contrast",
+        "ring-kumo-brand",
         "ring-kumo-contrast",
         "ring-kumo-danger",
+        "ring-kumo-focus",
         "ring-kumo-hairline",
-        "ring-kumo-line",
         "text-kumo-danger",
         "text-kumo-default",
         "text-kumo-inverse",
@@ -597,7 +762,7 @@
           "props": {
             "legend": {
               "type": "string",
-              "required": true
+              "optional": true
             },
             "children": {
               "type": "ReactNode",
@@ -632,6 +797,20 @@
               "optional": true
             }
           }
+        },
+        "Legend": {
+          "name": "Legend",
+          "description": "Legend sub-component",
+          "props": {
+            "children": {
+              "type": "ReactNode",
+              "required": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
         }
       },
       "styling": {
@@ -744,6 +923,8 @@
         "bg-kumo-base",
         "border-kumo-line",
         "outline-kumo-fill",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
         "text-kumo-default"
       ],
       "styling": {
@@ -1945,11 +2126,11 @@
         "<div className=\"flex items-center gap-4\">\n      <DropdownMenu>\n        <DropdownMenu.Trigger>\n          <button\n            type=\"button\"\n            className=\"flex items-center gap-2 rounded-lg bg-black px-4 py-3 text-white transition-opacity hover:opacity-80\"\n          >\n            <CloudflareLogo variant=\"glyph\" color=\"white\" className=\"w-8\" />\n            <span className=\"font-medium\">Logo</span>\n          </button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content>\n          <DropdownMenu.Item\n            icon={CloudIcon}\n            onSelect={() =>\n              copyToClipboard(\n                generateCloudflareLogoSvg({ variant: \"glyph\" }),\n                \"glyph\",\n              )\n            }\n          >\n            {copied === \"glyph\" ? \"Copied!\" : \"Copy logo as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={CodeIcon}\n            onSelect={() =>\n              copyToClipboard(\n                generateCloudflareLogoSvg({ variant: \"full\" }),\n                \"full\",\n              )\n            }\n          >\n            {copied === \"full\" ? \"Copied!\" : \"Copy full logo as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={DownloadSimpleIcon}\n            onSelect={() =>\n              window.open(\n                \"https://www.cloudflare.com/press-kit/\",\n                \"_blank\",\n                \"noopener\",\n              )\n            }\n          >\n            Download brand assets\n          </DropdownMenu.Item>\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item\n            icon={ArrowSquareOutIcon}\n            onSelect={() =>\n              window.open(\n                \"https://www.cloudflare.com/brand-assets/\",\n                \"_blank\",\n                \"noopener\",\n              )\n            }\n          >\n            Visit brand guidelines\n          </DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      <span className=\"text-sm text-kumo-subtle\">\n        Click to open the brand assets menu\n      </span>\n    </div>",
         "<PoweredByCloudflare />",
         "<div className=\"flex flex-wrap items-center gap-4\">\n      <PoweredByCloudflare />\n      <PoweredByCloudflare color=\"black\" />\n      <div className=\"rounded-lg bg-black p-3\">\n        <PoweredByCloudflare color=\"white\" />\n      </div>\n    </div>",
-        "<footer className=\"flex w-full items-center justify-between rounded-lg border border-kumo-line bg-kumo-elevated px-6 py-4\">\n      <span className=\"text-sm text-kumo-subtle\">\n        &copy; 2026 Your Company. All rights reserved.\n      </span>\n      <PoweredByCloudflare />\n    </footer>"
+        "<footer className=\"flex w-full items-center justify-between rounded-lg border border-kumo-hairline bg-kumo-elevated px-6 py-4\">\n      <span className=\"text-sm text-kumo-subtle\">\n        &copy; 2026 Your Company. All rights reserved.\n      </span>\n      <PoweredByCloudflare />\n    </footer>"
       ],
       "colors": [
         "bg-kumo-base",
-        "ring-kumo-line",
+        "ring-kumo-hairline",
         "text-kumo-default"
       ]
     },
@@ -2042,28 +2223,14 @@
     "Collapsible": {
       "name": "Collapsible",
       "type": "component",
-      "description": "Collapsible component for showing/hiding content.  Features: - Animated chevron indicator (rotates 180° when open) - Accessible with aria-expanded and aria-controls - Content panel with left border accent",
+      "description": "Collapsible — a composable disclosure component for showing/hiding content.  Built on Base UI's Collapsible with full composition support.  ## Basic Usage  ```tsx const [open, setOpen] = useState(false);  <Collapsible.Root open={open} onOpenChange={setOpen}> <Collapsible.Trigger render={<Button variant=\"ghost\" />}> Show details </Collapsible.Trigger> <Collapsible.Panel className=\"mt-2\"> <Text>Hidden content revealed when expanded.</Text> </Collapsible.Panel> </Collapsible.Root> ```  ## With Default Styling  Use `DefaultTrigger` and `DefaultPanel` for the classic Kumo style:  ```tsx <Collapsible.Root> <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger> <Collapsible.DefaultPanel> <Text>Content with border-left accent</Text> </Collapsible.DefaultPanel> </Collapsible.Root> ```  ## Controlled Accordion Pattern  ```tsx const [activeIndex, setActiveIndex] = useState<number | null>(null);  {items.map((item, i) => ( <Collapsible.Root key={i} open={activeIndex === i} onOpenChange={(open) => setActiveIndex(open ? i : null)} > <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger> <Collapsible.DefaultPanel>{item.content}</Collapsible.DefaultPanel> </Collapsible.Root> ))} ```",
       "importPath": "@cloudflare/kumo",
       "category": "Display",
       "props": {
-        "children": {
-          "type": "ReactNode",
-          "optional": true
-        },
-        "label": {
-          "type": "string",
-          "required": true,
-          "description": "Text label displayed in the trigger button"
-        },
-        "open": {
-          "type": "boolean",
-          "optional": true,
-          "description": "Whether the collapsible content is visible"
-        },
         "className": {
           "type": "string",
           "optional": true,
-          "description": "Additional CSS classes for the content panel"
+          "description": "Additional CSS classes"
         },
         "onOpenChange": {
           "type": "(open: boolean) => void",
@@ -2071,14 +2238,76 @@
         }
       },
       "examples": [
-        "<div className=\"w-full\">\n      <Collapsible label=\"What is Kumo?\" open={isOpen} onOpenChange={setIsOpen}>\n        Kumo is Cloudflare's new design system.\n      </Collapsible>\n    </div>",
-        "<div className=\"w-full\">\n      <Collapsible label=\"What is Kumo?\" open={isOpen} onOpenChange={setIsOpen}>\n        Kumo is Cloudflare's new design system.\n      </Collapsible>\n    </div>",
-        "<div className=\"w-full space-y-2\">\n      <Collapsible label=\"What is Kumo?\" open={open1} onOpenChange={setOpen1}>\n        Kumo is Cloudflare's new design system.\n      </Collapsible>\n      <Collapsible\n        label=\"How do I use it?\"\n        open={open2}\n        onOpenChange={setOpen2}\n      >\n        Install the components and import them into your project.\n      </Collapsible>\n      <Collapsible\n        label=\"Is it open source?\"\n        open={open3}\n        onOpenChange={setOpen3}\n      >\n        Check the repository for license information.\n      </Collapsible>\n    </div>"
+        "<div className=\"w-full\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Kumo is Cloudflare's new design system.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>",
+        "<div className=\"w-full\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Kumo is Cloudflare's new design system.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>",
+        "<div className=\"w-full space-y-2\">\n      <Collapsible.Root open={open1} onOpenChange={setOpen1}>\n        <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Kumo is Cloudflare's new design system.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n      <Collapsible.Root open={open2} onOpenChange={setOpen2}>\n        <Collapsible.DefaultTrigger>How do I use it?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Install the components and import them into your project.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n      <Collapsible.Root open={open3} onOpenChange={setOpen3}>\n        <Collapsible.DefaultTrigger>Is it open source?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Check the repository for license information.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>",
+        "<div className=\"w-full\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.Trigger\n          render={<Button variant=\"secondary\" size=\"sm\" />}\n        >\n          {isOpen ? \"Hide details\" : \"Show details\"}\n        </Collapsible.Trigger>\n        <Collapsible.Panel className=\"mt-3 rounded-lg bg-kumo-tint p-4\">\n          <Text>\n            This panel uses custom styling instead of the default border-left accent.\n          </Text>\n        </Collapsible.Panel>\n      </Collapsible.Root>\n    </div>",
+        "<div className=\"w-full space-y-2\">\n      {items.map((item, i) => (\n        <Collapsible.Root\n          key={i}\n          open={activeIndex === i}\n          onOpenChange={(open) => setActiveIndex(open ? i : null)}\n        >\n          <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger>\n          <Collapsible.DefaultPanel>\n            <Text>{item.content}</Text>\n          </Collapsible.DefaultPanel>\n        </Collapsible.Root>\n      ))}\n    </div>"
       ],
       "colors": [
         "border-kumo-fill",
         "text-kumo-link"
-      ]
+      ],
+      "subComponents": {
+        "Root": {
+          "name": "Root",
+          "description": "Root sub-component",
+          "props": {
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
+        },
+        "Trigger": {
+          "name": "Trigger",
+          "description": "Trigger sub-component",
+          "props": {
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
+        },
+        "Panel": {
+          "name": "Panel",
+          "description": "Panel sub-component",
+          "props": {
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
+        },
+        "DefaultTrigger": {
+          "name": "DefaultTrigger",
+          "description": "DefaultTrigger sub-component",
+          "props": {
+            "children": {
+              "type": "ReactNode",
+              "required": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
+        },
+        "DefaultPanel": {
+          "name": "DefaultPanel",
+          "description": "DefaultPanel sub-component",
+          "props": {
+            "children": {
+              "type": "ReactNode",
+              "required": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
+        }
+      }
     },
     "Combobox": {
       "name": "Combobox",
@@ -2178,6 +2407,7 @@
         "<div className=\"flex gap-2\">\n      <Combobox\n        value={value}\n        onValueChange={setValue}\n        items={bots}\n        isItemEqualToValue={(bot: BotItem, selected: BotItem) =>\n          bot.value === selected.value\n        }\n        multiple\n      >\n        <Combobox.TriggerMultipleWithInput\n          className=\"w-[400px]\"\n          placeholder=\"Select bots\"\n          renderItem={(selected: BotItem) => (\n            <Combobox.Chip key={selected.value}>{selected.label}</Combobox.Chip>\n          )}\n          inputSide=\"right\"\n        />\n        <Combobox.Content className=\"max-h-[200px] min-w-auto overflow-y-auto\">\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: BotItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                <div className=\"flex gap-2\">\n                  <Text>{item.label}</Text>\n                  <Text variant=\"secondary\">{item.author}</Text>\n                </div>\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n      <Button variant=\"primary\">Submit</Button>\n    </div>",
         "<div className=\"w-80\">\n      <Combobox\n        items={databases}\n        value={value}\n        onValueChange={setValue}\n        label=\"Database\"\n        description=\"Select your preferred database\"\n      >\n        <Combobox.TriggerInput placeholder=\"Select database\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: DatabaseItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>",
         "<div className=\"flex flex-wrap gap-4 items-start\">\n      <Combobox value=\"Apple\" items={fruits} disabled>\n        <Combobox.TriggerInput\n          className=\"w-[200px]\"\n          placeholder=\"Select fruit\"\n        />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: string) => (\n              <Combobox.Item key={item} value={item}>\n                {item}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n\n      <Combobox value={languages[0]} items={languages} disabled>\n        <Combobox.TriggerValue className=\"w-[200px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"Search\" />\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: Language) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>",
+        "<div className=\"w-80\">\n      <Combobox value={value} onValueChange={setValue} items={items}>\n        <Combobox.TriggerInput placeholder=\"Select database\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: DatabaseItemWithDisabled) => (\n              <Combobox.Item\n                key={item.value}\n                value={item}\n                disabled={item.disabled}\n              >\n                <span>\n                  {item.label}\n                  {item.reason && (\n                    <Text variant=\"secondary\" size=\"xs\" as=\"span\">\n                      {\" — \"}\n                      {item.reason}\n                    </Text>\n                  )}\n                </span>\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>",
         "<div className=\"w-80\">\n      <Combobox\n        items={databases}\n        value={value}\n        onValueChange={setValue}\n        label=\"Database\"\n        error={{ message: \"Please select a database\", match: true }}\n      >\n        <Combobox.TriggerInput placeholder=\"Select database\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: DatabaseItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>",
         "<div className=\"flex flex-wrap items-center gap-4\">\n      <Combobox\n        size=\"sm\"\n        value={smValue}\n        onValueChange={(v) => setSmValue(v as string | null)}\n        items={fruits.slice(0, 8)}\n      >\n        <Combobox.TriggerInput placeholder=\"Small (sm)\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: string) => (\n              <Combobox.Item key={item} value={item}>\n                {item}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n      <Combobox\n        size=\"base\"\n        value={baseValue}\n        onValueChange={(v) => setBaseValue(v as string | null)}\n        items={fruits.slice(0, 8)}\n      >\n        <Combobox.TriggerInput placeholder=\"Base (default)\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: string) => (\n              <Combobox.Item key={item} value={item}>\n                {item}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>",
         "<div className=\"flex flex-wrap items-center gap-4\">\n      <Combobox\n        size=\"sm\"\n        value={smValue}\n        onValueChange={(v) => setSmValue(v as Language)}\n        items={languages}\n      >\n        <Combobox.TriggerValue className=\"w-[160px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"Search\" />\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: Language) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n      <Combobox\n        size=\"base\"\n        value={baseValue}\n        onValueChange={(v) => setBaseValue(v as Language)}\n        items={languages}\n      >\n        <Combobox.TriggerValue className=\"w-[180px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"Search\" />\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: Language) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>"
@@ -2187,7 +2417,8 @@
         "bg-kumo-fill-hover",
         "bg-kumo-overlay",
         "bg-kumo-tint",
-        "border-kumo-line",
+        "border-kumo-hairline",
+        "ring-kumo-hairline",
         "ring-kumo-line",
         "text-kumo-default",
         "text-kumo-strong",
@@ -2316,17 +2547,19 @@
         }
       },
       "examples": [
-        "<div className=\"flex flex-col items-start gap-4\">\n      <Button onClick={() => setOpen(true)}>Open Command Palette</Button>\n      {selectedItem && (\n        <p className=\"text-sm text-kumo-subtle\">\n          Last selected:{\" \"}\n          <span className=\"text-kumo-default\">{selectedItem}</span>\n        </p>\n      )}\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={filteredGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        onSelect={(item, { newTab }) => {\n          console.log(\"Selected:\", item.title, newTab ? \"(new tab)\" : \"\");\n          handleSelect(item);\n        }}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"Type a command or search...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(group: CommandGroup) => (\n              <CommandPalette.Group key={group.id} items={group.items}>\n                <CommandPalette.GroupLabel>\n                  {group.label}\n                </CommandPalette.GroupLabel>\n                <CommandPalette.Items>\n                  {(item: CommandItem) => (\n                    <CommandPalette.Item\n                      key={item.id}\n                      value={item}\n                      onClick={() => handleSelect(item)}\n                    >\n                      <span className=\"flex items-center gap-3\">\n                        {item.icon && (\n                          <span className=\"text-kumo-subtle\">{item.icon}</span>\n                        )}\n                        <span>{item.title}</span>\n                      </span>\n                    </CommandPalette.Item>\n                  )}\n                </CommandPalette.Items>\n              </CommandPalette.Group>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No commands found</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>Navigate</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↵\n            </kbd>\n            <span>Select</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>",
+        "<div className=\"flex flex-col items-start gap-4\">\n      <Button onClick={() => setOpen(true)}>Open Command Palette</Button>\n      {selectedItem && (\n        <p className=\"text-sm text-kumo-subtle\">\n          Last selected:{\" \"}\n          <span className=\"text-kumo-default\">{selectedItem}</span>\n        </p>\n      )}\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={filteredGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        onSelect={(item, { newTab }) => {\n          console.log(\"Selected:\", item.title, newTab ? \"(new tab)\" : \"\");\n          handleSelect(item);\n        }}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"Type a command or search...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(group: CommandGroup) => (\n              <CommandPalette.Group key={group.id} items={group.items}>\n                <CommandPalette.GroupLabel>\n                  {group.label}\n                </CommandPalette.GroupLabel>\n                <CommandPalette.Items>\n                  {(item: CommandItem) => (\n                    <CommandPalette.Item\n                      key={item.id}\n                      value={item}\n                      onClick={() => handleSelect(item)}\n                    >\n                      <span className=\"flex items-center gap-3\">\n                        {item.icon && (\n                          <span className=\"text-kumo-subtle\">{item.icon}</span>\n                        )}\n                        <span>{item.title}</span>\n                      </span>\n                    </CommandPalette.Item>\n                  )}\n                </CommandPalette.Items>\n              </CommandPalette.Group>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No commands found</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>Navigate</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↵\n            </kbd>\n            <span>Select</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>",
         "<div>\n      <Button onClick={() => setOpen(true)}>Open Simple Palette</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={simpleItems}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(item) => item.title}\n        onSelect={(item) => {\n          console.log(\"Selected:\", item.title);\n          setOpen(false);\n        }}\n        getSelectableItems={(items) => items}\n      >\n        <CommandPalette.Input placeholder=\"Search actions...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(item: SimpleItem) => (\n              <CommandPalette.Item\n                key={item.id}\n                value={item}\n                onClick={() => {\n                  console.log(\"Clicked:\", item.title);\n                  setOpen(false);\n                }}\n              >\n                {item.title}\n              </CommandPalette.Item>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No actions found</CommandPalette.Empty>\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>",
         "<div>\n      <Button onClick={handleOpen}>Open with Loading</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={loading ? [] : filteredGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"Search...\" />\n        <CommandPalette.List>\n          {loading ? (\n            <CommandPalette.Loading />\n          ) : (\n            <>\n              <CommandPalette.Results>\n                {(group: CommandGroup) => (\n                  <CommandPalette.Group key={group.id} items={group.items}>\n                    <CommandPalette.GroupLabel>\n                      {group.label}\n                    </CommandPalette.GroupLabel>\n                    <CommandPalette.Items>\n                      {(item: CommandItem) => (\n                        <CommandPalette.Item\n                          key={item.id}\n                          value={item}\n                          onClick={() => setOpen(false)}\n                        >\n                          <span className=\"flex items-center gap-3\">\n                            {item.icon && (\n                              <span className=\"text-kumo-subtle\">\n                                {item.icon}\n                              </span>\n                            )}\n                            <span>{item.title}</span>\n                          </span>\n                        </CommandPalette.Item>\n                      )}\n                    </CommandPalette.Items>\n                  </CommandPalette.Group>\n                )}\n              </CommandPalette.Results>\n              <CommandPalette.Empty>No results found</CommandPalette.Empty>\n            </>\n          )}\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>",
-        "<div>\n      <Button onClick={() => setOpen(true)}>Open with ResultItem</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={searchResults}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(item) => item.title}\n        getSelectableItems={(items) => items}\n      >\n        <CommandPalette.Input placeholder=\"Search documentation...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(item: SearchResult) => (\n              <CommandPalette.ResultItem\n                key={item.id}\n                value={item}\n                title={item.title}\n                breadcrumbs={item.breadcrumbs}\n                icon={item.icon}\n                onClick={() => {\n                  console.log(\"Navigate to:\", item.title);\n                  setOpen(false);\n                }}\n              />\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No pages found</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>Navigate</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ⌘↵\n            </kbd>\n            <span>Open in new tab</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>"
+        "<div className=\"flex flex-col items-start gap-4\">\n      <Button onClick={() => setOpen(true)}>\n        Open Palette (No Autocomplete)\n      </Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={filteredGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        onSelect={(item) => {\n          console.log(\"Selected:\", item.title);\n          setOpen(false);\n          setSearch(\"\");\n        }}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input\n          placeholder=\"Search commands...\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoCapitalize=\"none\"\n          spellCheck={false}\n          data-1p-ignore=\"true\"\n          data-lpignore=\"true\"\n        />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(group: CommandGroup) => (\n              <CommandPalette.Group key={group.id} items={group.items}>\n                <CommandPalette.GroupLabel>\n                  {group.label}\n                </CommandPalette.GroupLabel>\n                <CommandPalette.Items>\n                  {(item: CommandItem) => (\n                    <CommandPalette.Item\n                      key={item.id}\n                      value={item}\n                      onClick={() => {\n                        setOpen(false);\n                        setSearch(\"\");\n                      }}\n                    >\n                      <span className=\"flex items-center gap-3\">\n                        {item.icon && (\n                          <span className=\"text-kumo-subtle\">{item.icon}</span>\n                        )}\n                        <span>{item.title}</span>\n                      </span>\n                    </CommandPalette.Item>\n                  )}\n                </CommandPalette.Items>\n              </CommandPalette.Group>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No commands found</CommandPalette.Empty>\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>",
+        "<div>\n      <Button onClick={() => setOpen(true)}>Open with ResultItem</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={searchResults}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(item) => item.title}\n        getSelectableItems={(items) => items}\n      >\n        <CommandPalette.Input placeholder=\"Search documentation...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(item: SearchResult) => (\n              <CommandPalette.ResultItem\n                key={item.id}\n                value={item}\n                title={item.title}\n                breadcrumbs={item.breadcrumbs}\n                icon={item.icon}\n                onClick={() => {\n                  console.log(\"Navigate to:\", item.title);\n                  setOpen(false);\n                }}\n              />\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No pages found</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>Navigate</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ⌘↵\n            </kbd>\n            <span>Open in new tab</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>"
       ],
       "colors": [
         "bg-kumo-base",
         "bg-kumo-elevated",
         "bg-kumo-overlay",
         "bg-kumo-warning",
-        "ring-kumo-line",
+        "ring-kumo-brand",
+        "ring-kumo-hairline",
         "text-kumo-default",
         "text-kumo-strong",
         "text-kumo-subtle"
@@ -2349,13 +2582,13 @@
         }
       },
       "examples": [
-        "<div className=\"flex flex-col gap-4\">\n      <DatePicker mode=\"single\" selected={date} onChange={d => {\n        if (d) {\n          setDate(d);\n        }\n      }} />\n      <p className=\"text-sm text-kumo-subtle\">\n        Selected: {date ? date.toLocaleDateString() : \"None\"}\n      </p>\n    </div>",
+        "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"single\"\n        selected={date}\n        onChange={(d) => {\n          if (d) {\n            setDate(d);\n          }\n        }}\n      />\n      <p className=\"text-sm text-kumo-subtle\">\n        Selected: {date ? date.toLocaleDateString() : \"None\"}\n      </p>\n    </div>",
         "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"multiple\"\n        selected={dates}\n        onChange={setDates}\n        max={5}\n      />\n      <p className=\"text-sm text-kumo-subtle\">\n        Selected: {dates?.length ?? 0} date(s)\n      </p>\n    </div>",
         "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"range\"\n        selected={range}\n        onChange={setRange}\n        numberOfMonths={2}\n      />\n      <p className=\"text-sm text-kumo-subtle\">\n        Range:{\" \"}\n        {range?.from\n          ? `${range.from.toLocaleDateString()} - ${range.to?.toLocaleDateString() ?? \"...\"}`\n          : \"None\"}\n      </p>\n    </div>",
         "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"range\"\n        selected={range}\n        onChange={setRange}\n        min={3}\n        max={7}\n        footer={\n          <span className=\"text-xs text-kumo-subtle\">Select 3-7 nights</span>\n        }\n      />\n    </div>",
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\" icon={CalendarDotsIcon}>\n          {date ? date.toLocaleDateString() : \"Pick a date\"}\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker mode=\"single\" selected={date} onChange={setDate} />\n      </Popover.Content>\n    </Popover>",
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\" icon={CalendarDotsIcon}>\n          {formatRange()}\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker\n          mode=\"range\"\n          selected={range}\n          onChange={setRange}\n          numberOfMonths={2}\n        />\n      </Popover.Content>\n    </Popover>",
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\" icon={CalendarDotsIcon}>\n          {formatRange()}\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"p-0\">\n        <div className=\"flex\">\n          <div className=\"flex flex-col gap-1 border-r border-kumo-line p-2 text-sm\">\n            {presets.map((preset) => {\n              const isActive = isPresetActive(preset);\n              return (\n                <button\n                  key={preset.label}\n                  type=\"button\"\n                  onClick={() => handlePresetClick(preset)}\n                  className={`rounded-md px-3 py-1.5 text-left whitespace-nowrap ${isActive\n                    ? \"bg-kumo-bg-inverse text-kumo-text-inverse\"\n                    : \"text-kumo-strong hover:bg-kumo-control\"\n                    }`}\n                >\n                  {preset.label}\n                </button>\n              );\n            })}\n          </div>\n          <div className=\"p-3\">\n            <DatePicker\n              mode=\"range\"\n              selected={range}\n              onChange={setRange}\n              month={month}\n              onMonthChange={setMonth}\n              numberOfMonths={2}\n            />\n          </div>\n        </div>\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {date ? date.toLocaleDateString() : \"Pick a date\"}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker mode=\"single\" selected={date} onChange={setDate} />\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {formatRange()}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker\n          mode=\"range\"\n          selected={range}\n          onChange={setRange}\n          numberOfMonths={2}\n        />\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {formatRange()}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-0\">\n        <div className=\"flex\">\n          <div className=\"flex flex-col gap-1 border-r border-kumo-hairline p-2 text-sm\">\n            {presets.map((preset) => {\n              const isActive = isPresetActive(preset);\n              return (\n                <button\n                  key={preset.label}\n                  type=\"button\"\n                  onClick={() => handlePresetClick(preset)}\n                  className={`rounded-md px-3 py-1.5 text-left whitespace-nowrap ${\n                    isActive\n                      ? \"bg-kumo-bg-inverse text-kumo-text-inverse\"\n                      : \"text-kumo-strong hover:bg-kumo-control\"\n                  }`}\n                >\n                  {preset.label}\n                </button>\n              );\n            })}\n          </div>\n          <div className=\"p-3\">\n            <DatePicker\n              mode=\"range\"\n              selected={range}\n              onChange={setRange}\n              month={month}\n              onMonthChange={setMonth}\n              numberOfMonths={2}\n            />\n          </div>\n        </div>\n      </Popover.Content>\n    </Popover>",
         "<DatePicker\n      mode=\"multiple\"\n      selected={dates}\n      onChange={setDates}\n      max={maxDays}\n      disabled={unavailableDates}\n      fixedWeeks\n      footer={\n        <p className=\"text-xs text-kumo-subtle pt-2 w-full\">\n          {selectedCount}/{maxDays} days selected. Grayed dates are unavailable.\n        </p>\n      }\n    />"
       ],
       "colors": [
@@ -2434,6 +2667,7 @@
         "bg-kumo-fill",
         "bg-kumo-interact",
         "bg-kumo-overlay",
+        "ring-kumo-focus",
         "text-kumo-default",
         "text-kumo-inverse",
         "text-kumo-strong",
@@ -2542,6 +2776,7 @@
       "colors": [
         "bg-kumo-base",
         "bg-kumo-recessed",
+        "ring-kumo-line",
         "text-kumo-default"
       ],
       "subComponents": {
@@ -2672,9 +2907,11 @@
       "colors": [
         "bg-kumo-control",
         "bg-kumo-danger",
-        "bg-kumo-line",
+        "bg-kumo-hairline",
         "bg-kumo-overlay",
         "bg-kumo-tint",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
         "ring-kumo-line",
         "text-kumo-danger",
         "text-kumo-default"
@@ -3004,7 +3241,7 @@
         "<Grid variant=\"4up\" gap=\"base\" mobileDivider>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>Item 1</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">Has divider on mobile</Text>\n          </div>\n        </Surface>\n      </GridItem>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>Item 2</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">Has divider on mobile</Text>\n          </div>\n        </Surface>\n      </GridItem>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>Item 3</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">Has divider on mobile</Text>\n          </div>\n        </Surface>\n      </GridItem>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>Item 4</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">Has divider on mobile</Text>\n          </div>\n        </Surface>\n      </GridItem>\n    </Grid>"
       ],
       "colors": [
-        "border-kumo-line"
+        "border-kumo-hairline"
       ]
     },
     "Input": {
@@ -3071,15 +3308,15 @@
             "error": "Error state for validation failures"
           },
           "classes": {
-            "default": "focus:ring-kumo-hairline",
-            "error": "!ring-kumo-danger focus:ring-kumo-danger"
+            "default": "focus:ring-kumo-focus/50 focus:ring-[1.5px]",
+            "error": "!ring-kumo-danger focus:ring-kumo-danger/50 focus:ring-[1.5px]"
           },
           "stateClasses": {
             "default": {
-              "focus": "focus:ring-kumo-hairline"
+              "focus": "focus:ring-kumo-focus/50 focus:ring-[1.5px]"
             },
             "error": {
-              "focus": "focus:ring-kumo-danger"
+              "focus": "focus:ring-kumo-danger/50 focus:ring-[1.5px]"
             }
           },
           "default": "default"
@@ -3096,12 +3333,14 @@
         "<div className=\"flex flex-col gap-4\">\n      <Input type=\"email\" label=\"Email\" placeholder=\"you@example.com\" />\n      <Input type=\"password\" label=\"Password\" placeholder=\"••••••••\" />\n      <Input type=\"number\" label=\"Age\" placeholder=\"18\" />\n      <Input type=\"tel\" label=\"Phone\" placeholder=\"+1 (555) 000-0000\" />\n    </div>",
         "<Input\n      label=\"Phone Number\"\n      required={false}\n      placeholder=\"+1 (555) 000-0000\"\n    />",
         "<Input\n      label=\"API Key\"\n      labelTooltip=\"Find this in your dashboard under Settings > API Keys\"\n      placeholder=\"sk_live_...\"\n    />",
-        "<Input\n      label={\n        <span>\n          Email for <strong>billing</strong>\n        </span>\n      }\n      required\n      placeholder=\"billing@company.com\"\n      type=\"email\"\n    />"
+        "<Input\n      label={\n        <span>\n          Email for <strong>billing</strong>\n        </span>\n      }\n      required\n      placeholder=\"billing@company.com\"\n      type=\"email\"\n    />",
+        "<Input\n      label=\"With onChange\"\n      placeholder=\"Type something...\"\n      description={value ? `Value: ${value}` : \"Uses e.target.value\"}\n      value={value}\n      onChange={(e) => setValue(e.target.value)}\n    />",
+        "<Input\n      label=\"With onValueChange\"\n      placeholder=\"Type something...\"\n      description={value ? `Value: ${value}` : \"Receives the value directly\"}\n      value={value}\n      onValueChange={(v) => setValue(v)}\n    />"
       ],
       "colors": [
         "bg-kumo-control",
         "ring-kumo-danger",
-        "ring-kumo-hairline",
+        "ring-kumo-focus",
         "ring-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"
@@ -3157,31 +3396,197 @@
         }
       }
     },
-    "Label": {
-      "name": "Label",
+    "InputGroup": {
+      "name": "InputGroup",
       "type": "component",
-      "description": "Label component for form fields.  Provides a standardized way to display labels with optional indicators: - Optional indicator: gray \"(optional)\" text when `showOptional={true}` - Tooltip: info icon with hover tooltip for additional context",
+      "description": "InputGroup component",
       "importPath": "@cloudflare/kumo",
-      "category": "Other",
+      "category": "Input",
       "props": {
-        "children": {
+        "label": {
           "type": "ReactNode",
           "optional": true,
           "description": "The label content — can be a string or any React node."
         },
-        "showOptional": {
+        "description": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Helper text displayed below the control (hidden when `error` is present)."
+        },
+        "error": {
+          "type": "object",
+          "optional": true,
+          "description": "Validation error with a message and a browser `ValidityState` match key."
+        },
+        "required": {
           "type": "boolean",
           "optional": true,
-          "description": "When `true`, shows gray \"(optional)\" text after the label."
+          "description": "When explicitly `false`, shows gray \"(optional)\" text after the label. When `true` or `undefined`, no indicator is shown."
         },
-        "tooltip": {
+        "labelTooltip": {
           "type": "ReactNode",
           "optional": true,
           "description": "Tooltip content displayed next to the label via an info icon."
         },
+        "children": {
+          "type": "ReactNode",
+          "optional": true
+        },
         "className": {
           "type": "string",
-          "optional": true,
+          "optional": true
+        },
+        "id": {
+          "type": "string",
+          "optional": true
+        },
+        "lang": {
+          "type": "string",
+          "optional": true
+        },
+        "title": {
+          "type": "string",
+          "optional": true
+        },
+        "size": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "xs",
+            "sm",
+            "base",
+            "lg"
+          ],
+          "descriptions": {
+            "xs": "Extra small size.",
+            "sm": "Small size.",
+            "base": "Default size.",
+            "lg": "Large size."
+          },
+          "classes": {
+            "xs": "h-6 text-xs",
+            "sm": "h-7 text-xs",
+            "base": "h-9 text-base",
+            "lg": "h-11 text-base"
+          },
+          "default": "base"
+        },
+        "disabled": {
+          "type": "boolean",
+          "optional": true
+        }
+      },
+      "examples": [
+        "<div className=\"w-full max-w-2xs\">\n      <InputGroup>\n        <InputGroup.Input\n          maxLength={20}\n          onChange={handleChange}\n          value={value}\n        />\n        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n        {status !== \"idle\" && (\n          <InputGroup.Addon align=\"end\">\n            {status === \"loading\" ? (\n              <Loader />\n            ) : (\n              <CheckCircleIcon weight=\"duotone\" className=\"text-kumo-success\" />\n            )}\n          </InputGroup.Addon>\n        )}\n      </InputGroup>\n    </div>",
+        "<InputGroup className=\"w-full max-w-3xs\">\n      <InputGroup.Addon>\n        <LinkIcon />\n      </InputGroup.Addon>\n      <InputGroup.Input placeholder=\"Paste a link...\" aria-label=\"Link\" />\n    </InputGroup>",
+        "<div className=\"flex flex-col gap-4\">\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Addon>@</InputGroup.Addon>\n        <InputGroup.Input placeholder=\"username\" aria-label=\"Username\" />\n      </InputGroup>\n\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Input placeholder=\"email\" aria-label=\"Email\" />\n        <InputGroup.Addon align=\"end\">@example.com</InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Addon>/api/</InputGroup.Addon>\n        <InputGroup.Input placeholder=\"endpoint\" aria-label=\"API path\" />\n        <InputGroup.Addon align=\"end\">.json</InputGroup.Addon>\n      </InputGroup>\n    </div>",
+        "<div className=\"flex flex-col gap-4\">\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Input\n          type={show ? \"text\" : \"password\"}\n          defaultValue=\"password\"\n          aria-label=\"Password\"\n        />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={show ? EyeSlashIcon : EyeIcon}\n            aria-label={show ? \"Hide password\" : \"Show password\"}\n            onClick={() => setShow(!show)}\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup className=\"w-full max-w-3xs\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input\n          value={searchValue}\n          placeholder=\"Search\"\n          aria-label=\"Search\"\n          onChange={(e) => setSearchValue(e.target.value)}\n        />\n        {searchValue && (\n          <InputGroup.Addon align=\"end\" className=\"pr-1\">\n            <InputGroup.Button\n              aria-label=\"Clear search\"\n              onClick={() => setSearchValue(\"\")}\n            >\n              <XIcon />\n            </InputGroup.Button>\n          </InputGroup.Addon>\n        )}\n        <InputGroup.Button variant=\"secondary\" onClick={() => {}}>\n          Search\n        </InputGroup.Button>\n      </InputGroup>\n    </div>",
+        "<InputGroup className=\"w-full max-w-2xs\">\n      <InputGroup.Addon>\n        <MagnifyingGlassIcon />\n      </InputGroup.Addon>\n      <InputGroup.Input\n        placeholder=\"Search with query language...\"\n        aria-label=\"Search\"\n      />\n      <InputGroup.Addon align=\"end\">\n        <InputGroup.Button\n          className=\"text-kumo-subtle\"\n          icon={QuestionIcon}\n          tooltip=\"Query language help\"\n          onClick={() => {}}\n        />\n      </InputGroup.Addon>\n    </InputGroup>",
+        "<InputGroup className=\"w-full max-w-3xs\">\n      <InputGroup.Addon>\n        <MagnifyingGlassIcon />\n      </InputGroup.Addon>\n      <InputGroup.Input placeholder=\"Search...\" aria-label=\"Search\" />\n      <InputGroup.Addon align=\"end\">\n        <kbd className=\"bg-none! border-none!\">⌘K</kbd>\n      </InputGroup.Addon>\n    </InputGroup>",
+        "<InputGroup className=\"w-full max-w-3xs\">\n      <InputGroup.Input defaultValue=\"kumo\" aria-label=\"kumo\" />\n      <InputGroup.Addon align=\"end\">\n        <Loader />\n      </InputGroup.Addon>\n    </InputGroup>",
+        "<div className=\"flex w-full max-w-2xs flex-col gap-4\">\n      <InputGroup label=\"Subdomain\">\n        <InputGroup.Input\n          aria-label=\"Subdomain\"\n          defaultValue=\"kumo\"\n          maxLength={20}\n        />\n        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n        <InputGroup.Addon align=\"end\">\n          <CheckCircleIcon weight=\"duotone\" className=\"text-kumo-success\" />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup\n        label=\"Subdomain\"\n        error={{ message: \"This subdomain is unavailable\", match: true }}\n      >\n        <InputGroup.Input\n          aria-label=\"Subdomain\"\n          defaultValue=\"kumo\"\n          maxLength={20}\n        />\n        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n        <InputGroup.Addon align=\"end\">\n          <XCircleIcon weight=\"duotone\" className=\"text-kumo-danger\" />\n        </InputGroup.Addon>\n      </InputGroup>\n    </div>",
+        "<div className=\"flex w-full max-w-3xs flex-col gap-4\">\n      <InputGroup size=\"xs\" label=\"Extra Small\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Extra small input\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"Help\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup size=\"sm\" label=\"Small\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Small input\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"Help\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup label=\"Base (default)\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Base input\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"Help\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup size=\"lg\" label=\"Large\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Large input\" />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={QuestionIcon}\n            shape=\"square\"\n            aria-label=\"Help\"\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n    </div>",
+        "<div className=\"flex w-full max-w-3xs flex-col gap-4\">\n      <InputGroup\n        label=\"Error State\"\n        error={{ message: \"Please enter a valid email address\", match: true }}\n      >\n        <InputGroup.Input type=\"email\" defaultValue=\"invalid-email\" />\n        <InputGroup.Addon align=\"end\">@example.com</InputGroup.Addon>\n      </InputGroup>\n\n      <InputGroup label=\"Disabled\" disabled>\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Search...\" />\n      </InputGroup>\n\n      <InputGroup label=\"Optional Field\" required={false}>\n        <InputGroup.Addon>$</InputGroup.Addon>\n        <InputGroup.Input placeholder=\"0.00\" />\n      </InputGroup>\n\n      <InputGroup\n        label=\"With Description\"\n        description=\"Must be at least 8 characters\"\n        labelTooltip=\"Your password is stored securely\"\n      >\n        <InputGroup.Input\n          type={show ? \"text\" : \"password\"}\n          placeholder=\"Password\"\n        />\n        <InputGroup.Addon align=\"end\">\n          <InputGroup.Button\n            className=\"text-kumo-subtle\"\n            icon={show ? EyeSlashIcon : EyeIcon}\n            aria-label={show ? \"Hide password\" : \"Show password\"}\n            onClick={() => setShow(!show)}\n          />\n        </InputGroup.Addon>\n      </InputGroup>\n    </div>"
+      ],
+      "colors": [
+        "border-kumo-line",
+        "ring-kumo-danger",
+        "ring-kumo-focus",
+        "ring-kumo-line"
+      ],
+      "subComponents": {
+        "Input": {
+          "name": "Input",
+          "description": "Input sub-component",
+          "props": {}
+        },
+        "Button": {
+          "name": "Button",
+          "description": "Button sub-component",
+          "props": {
+            "tooltip": {
+              "type": "ReactNode",
+              "description": "When provided, wraps the button in a Tooltip. Automatically sets aria-label from a string value."
+            },
+            "tooltipSide": {
+              "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
+              "description": "Preferred side for the tooltip popup.",
+              "default": "\"bottom\""
+            },
+            "variant": {
+              "type": "\"primary\" | \"secondary\" | \"ghost\" | \"destructive\" | \"secondary-destructive\" | \"outline\"",
+              "description": "Button visual style. Defaults to ghost.",
+              "default": "\"ghost\""
+            },
+            "size": {
+              "type": "\"xs\" | \"sm\" | \"base\" | \"lg\"",
+              "description": "Button size.",
+              "default": "\"sm\""
+            }
+          }
+        },
+        "Addon": {
+          "name": "Addon",
+          "description": "Addon sub-component",
+          "props": {
+            "align": {
+              "type": "\"start\" | \"end\"",
+              "description": "Position relative to the input.",
+              "default": "\"start\""
+            },
+            "className": {
+              "type": "string",
+              "description": "Additional CSS classes."
+            }
+          }
+        },
+        "Suffix": {
+          "name": "Suffix",
+          "description": "Suffix sub-component",
+          "props": {
+            "className": {
+              "type": "string",
+              "description": "Additional CSS classes."
+            }
+          }
+        },
+        "Label": {
+          "name": "Label",
+          "description": "Label sub-component",
+          "props": {}
+        },
+        "Description": {
+          "name": "Description",
+          "description": "Description sub-component",
+          "props": {}
+        }
+      }
+    },
+    "Label": {
+      "name": "Label",
+      "type": "component",
+      "description": "Label component for form fields.  Provides a standardized way to display labels with optional indicators: - Optional indicator: gray \"(optional)\" text when `showOptional={true}` - Tooltip: info icon with hover tooltip for additional context",
+      "importPath": "@cloudflare/kumo",
+      "category": "Other",
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "The label content — can be a string or any React node."
+        },
+        "showOptional": {
+          "type": "boolean",
+          "optional": true,
+          "description": "When `true`, shows gray \"(optional)\" text after the label."
+        },
+        "tooltip": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Tooltip content displayed next to the label via an info icon."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
           "description": "Additional CSS classes merged via `cn()`."
         },
         "htmlFor": {
@@ -3215,25 +3620,43 @@
       "importPath": "@cloudflare/kumo",
       "category": "Display",
       "props": {
+        "render": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Allows you to replace the component's HTML element with a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+        },
         "children": {
           "type": "ReactNode",
           "optional": true
         },
         "className": {
           "type": "string",
-          "optional": true,
-          "description": "Additional CSS classes merged via `cn()`."
+          "optional": true
+        },
+        "id": {
+          "type": "string",
+          "optional": true
+        },
+        "lang": {
+          "type": "string",
+          "optional": true
+        },
+        "title": {
+          "type": "string",
+          "optional": true
         }
       },
       "examples": [
         "<LayerCard>\n      <LayerCard.Secondary className=\"flex items-center justify-between\">\n        <div>Next Steps</div>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          shape=\"square\"\n          aria-label=\"Go to next steps\"\n        >\n          <ArrowRightIcon size={16} />\n        </Button>\n      </LayerCard.Secondary>\n\n      <LayerCard.Primary>Get started with Kumo</LayerCard.Primary>\n    </LayerCard>",
         "<LayerCard className=\"w-[250px]\">\n      <LayerCard.Secondary>Getting Started</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <p className=\"text-sm text-kumo-subtle\">\n          Quick start guide for new users\n        </p>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard className=\"w-[250px] p-4\">\n      <p className=\"text-sm text-kumo-subtle\">Quick start guide for new users</p>\n    </LayerCard>",
         "<div className=\"flex gap-4\">\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>Components</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">Browse all components</p>\n        </LayerCard.Primary>\n      </LayerCard>\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>Examples</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">View code examples</p>\n        </LayerCard.Primary>\n      </LayerCard>\n    </div>"
       ],
       "colors": [
         "bg-kumo-base",
         "bg-kumo-elevated",
         "ring-kumo-fill",
+        "ring-kumo-hairline",
         "ring-kumo-line",
         "text-kumo-strong"
       ],
@@ -3368,7 +3791,7 @@
         "render": {
           "type": "ReactNode",
           "optional": true,
-          "description": "Allows you to replace the component’s HTML element with a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          "description": "Allows you to replace the component's HTML element with a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
         }
       },
       "examples": [
@@ -3462,8 +3885,10 @@
       "colors": [
         "bg-kumo-base",
         "bg-kumo-recessed",
-        "border-kumo-fill",
-        "border-kumo-recessed"
+        "border-kumo-recessed",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
+        "ring-kumo-line"
       ],
       "styling": {
         "container": {
@@ -3570,6 +3995,11 @@
           "optional": true,
           "description": "Additional CSS classes for the container"
         },
+        "labels": {
+          "type": "PaginationLabels",
+          "optional": true,
+          "description": "Labels for internationalization of aria-labels. All labels have English defaults.\n\nFor visible text like \"Showing X of Y\", use render props on sub-components:\n- `Pagination.Info` children for the info text\n- `Pagination.PageSize` label prop for the \"Per page:\" text"
+        },
         "children": {
           "type": "ReactNode",
           "optional": true,
@@ -3604,11 +4034,12 @@
         "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={200}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n        options={[10, 20, 50]}\n      />\n      <Pagination.Controls />\n    </Pagination>",
         "<Pagination page={page} setPage={setPage} perPage={25} totalCount={100}>\n      <Pagination.Info>\n        {({ page, totalCount }) =>\n          `Page ${page} of ${Math.ceil((totalCount ?? 1) / 25)}`\n        }\n      </Pagination.Info>\n      <Pagination.Controls />\n    </Pagination>",
         "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n      />\n      <Pagination.Controls pageSelector=\"dropdown\" />\n    </Pagination>",
-        "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <div className=\"flex items-center gap-2\">\n        <Pagination.Controls />\n        <Pagination.Separator />\n        <Pagination.PageSize\n          value={perPage}\n          onChange={(size) => {\n            setPerPage(size);\n            setPage(1);\n          }}\n        />\n      </div>\n    </Pagination>"
+        "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <div className=\"flex items-center gap-2\">\n        <Pagination.Controls />\n        <Pagination.Separator />\n        <Pagination.PageSize\n          value={perPage}\n          onChange={(size) => {\n            setPerPage(size);\n            setPage(1);\n          }}\n        />\n      </div>\n    </Pagination>",
+        "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={10}\n      totalCount={100}\n      labels={{\n        firstPage: \"Première page\",\n        previousPage: \"Page précédente\",\n        nextPage: \"Page suivante\",\n        lastPage: \"Dernière page\",\n        pageNumber: \"Numéro de page\",\n        pageSize: \"Taille de page\",\n      }}\n    >\n      <Pagination.Info>\n        {({ pageShowingRange, totalCount }) => (\n          <>\n            Affichage de{\" \"}\n            <span className=\"tabular-nums\">{pageShowingRange}</span> sur{\" \"}\n            <span className=\"tabular-nums\">{totalCount}</span>\n          </>\n        )}\n      </Pagination.Info>\n      <Pagination.Controls />\n    </Pagination>"
       ],
       "colors": [
-        "border-kumo-line",
-        "ring-kumo-line",
+        "border-kumo-hairline",
+        "ring-kumo-hairline",
         "text-kumo-strong"
       ],
       "subComponents": {
@@ -3650,6 +4081,10 @@
               "type": "number[]",
               "optional": true
             },
+            "page": {
+              "type": "\"",
+              "required": true
+            },
             "label": {
               "type": "ReactNode",
               "optional": true
@@ -3727,12 +4162,13 @@
         }
       },
       "examples": [
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button shape=\"square\" icon={BellIcon} aria-label=\"Notifications\" />\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Notifications</Popover.Title>\n        <Popover.Description>\n          You are all caught up. Good job!\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button>Open Popover</Button>\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Popover Title</Popover.Title>\n        <Popover.Description>\n          This is a basic popover with a title and description.\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button>Open Settings</Button>\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Settings</Popover.Title>\n        <Popover.Description>\n          Configure your preferences below.\n        </Popover.Description>\n        <div className=\"mt-3\">\n          <Popover.Close asChild>\n            <Button variant=\"secondary\" size=\"sm\">\n              Close\n            </Button>\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>",
-        "<div className=\"flex flex-wrap gap-4\">\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Bottom</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"bottom\">\n          <Popover.Title>Bottom</Popover.Title>\n          <Popover.Description>\n            Popover on bottom (default).\n          </Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Top</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"top\">\n          <Popover.Title>Top</Popover.Title>\n          <Popover.Description>Popover on top.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Left</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"left\">\n          <Popover.Title>Left</Popover.Title>\n          <Popover.Description>Popover on left.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Right</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"right\">\n          <Popover.Title>Right</Popover.Title>\n          <Popover.Description>Popover on right.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n    </div>",
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button>User Profile</Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"w-64\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"size-10 rounded-full bg-kumo-recessed\" />\n          <div>\n            <Popover.Title>Jane Doe</Popover.Title>\n            <p className=\"text-sm text-kumo-subtle\">jane@example.com</p>\n          </div>\n        </div>\n        <div className=\"mt-3 flex gap-2 border-t border-kumo-line pt-3\">\n          <Button variant=\"secondary\" size=\"sm\" className=\"flex-1\">\n            Profile\n          </Button>\n          <Popover.Close asChild>\n            <Button variant=\"ghost\" size=\"sm\" className=\"flex-1\">\n              Sign Out\n            </Button>\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>",
-        "<Popover>\n      <Popover.Trigger openOnHover delay={200} asChild>\n        <Button variant=\"secondary\">Hover Me</Button>\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Hover Triggered</Popover.Title>\n        <Popover.Description>\n          This popover opens on hover with a 200ms delay. It can still contain\n          interactive content like buttons and links.\n        </Popover.Description>\n        <div className=\"mt-3\">\n          <Popover.Close asChild>\n            <Button variant=\"secondary\" size=\"sm\">\n              Got it\n            </Button>\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>"
+        "<Popover>\n      <Popover.Trigger\n        render={\n          <Button shape=\"square\" icon={BellIcon} aria-label=\"Notifications\" />\n        }\n      />\n      <Popover.Content>\n        <Popover.Title>Notifications</Popover.Title>\n        <Popover.Description>\n          You are all caught up. Good job!\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger render={<Button />}>Open Popover</Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Popover Title</Popover.Title>\n        <Popover.Description>\n          This is a basic popover with a title and description.\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger render={<Button />}>Open Settings</Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Settings</Popover.Title>\n        <Popover.Description>\n          Configure your preferences below.\n        </Popover.Description>\n        <div className=\"mt-3\">\n          <Popover.Close render={<Button variant=\"secondary\" size=\"sm\" />}>\n            Close\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>",
+        "<div className=\"flex flex-wrap gap-4\">\n      <Popover>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          Bottom\n        </Popover.Trigger>\n        <Popover.Content side=\"bottom\">\n          <Popover.Title>Bottom</Popover.Title>\n          <Popover.Description>\n            Popover on bottom (default).\n          </Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          Top\n        </Popover.Trigger>\n        <Popover.Content side=\"top\">\n          <Popover.Title>Top</Popover.Title>\n          <Popover.Description>Popover on top.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          Left\n        </Popover.Trigger>\n        <Popover.Content side=\"left\">\n          <Popover.Title>Left</Popover.Title>\n          <Popover.Description>Popover on left.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          Right\n        </Popover.Trigger>\n        <Popover.Content side=\"right\">\n          <Popover.Title>Right</Popover.Title>\n          <Popover.Description>Popover on right.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n    </div>",
+        "<Popover>\n      <Popover.Trigger render={<Button />}>User Profile</Popover.Trigger>\n      <Popover.Content className=\"w-64\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"size-10 rounded-full bg-kumo-recessed\" />\n          <div>\n            <Popover.Title>Jane Doe</Popover.Title>\n            <p className=\"text-sm text-kumo-subtle\">jane@example.com</p>\n          </div>\n        </div>\n        <div className=\"mt-3 flex gap-2 border-t border-kumo-hairline pt-3\">\n          <Button variant=\"secondary\" size=\"sm\" className=\"flex-1\">\n            Profile\n          </Button>\n          <Popover.Close\n            render={<Button variant=\"ghost\" size=\"sm\" className=\"flex-1\" />}\n          >\n            Sign Out\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger\n        openOnHover\n        delay={200}\n        render={<Button variant=\"secondary\" />}\n      >\n        Hover Me\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Hover Triggered</Popover.Title>\n        <Popover.Description>\n          This popover opens on hover with a 200ms delay. It can still contain\n          interactive content like buttons and links.\n        </Popover.Description>\n        <div className=\"mt-3\">\n          <Popover.Close render={<Button variant=\"secondary\" size=\"sm\" />}>\n            Got it\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>",
+        "<div className=\"w-full\">\n      <div className=\"overflow-hidden rounded-lg border border-kumo-hairline\">\n        <table className=\"w-full text-sm\">\n          <thead className=\"bg-kumo-elevated\">\n            <tr>\n              <th className=\"px-4 py-2 text-left font-medium\">Name</th>\n              <th className=\"px-4 py-2 text-left font-medium\">Status</th>\n              <th className=\"w-12 px-4 py-2\"></th>\n            </tr>\n          </thead>\n          <tbody className=\"divide-y divide-kumo-hairline\">\n            {rows.map((row) => (\n              <tr\n                key={row.id}\n                ref={(el) => {\n                  if (el) rowRefs.current.set(row.id, el);\n                }}\n                className={\n                  selectedRow === row.id ? \"bg-kumo-recessed\" : \"bg-kumo-base\"\n                }\n              >\n                <td className=\"px-4 py-2 font-mono\">{row.name}</td>\n                <td className=\"px-4 py-2 text-kumo-subtle\">{row.status}</td>\n                <td className=\"px-4 py-2\">\n                  <Button\n                    size=\"xs\"\n                    variant=\"ghost\"\n                    shape=\"square\"\n                    icon={DotsThree}\n                    aria-label={`Actions for ${row.name}`}\n                    onClick={() => handleEdit(row.id)}\n                  />\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      <Popover\n        open={!!selectedRow}\n        onOpenChange={(open) => !open && setSelectedRow(null)}\n      >\n        <Popover.Content\n          side=\"left\"\n          anchor={\n            anchorRect ? { getBoundingClientRect: () => anchorRect } : undefined\n          }\n        >\n          <Popover.Title>\n            Edit {rows.find((r) => r.id === selectedRow)?.name}\n          </Popover.Title>\n          <Popover.Description>\n            The popover anchors to the selected row, not the icon button.\n          </Popover.Description>\n          <div className=\"mt-3\">\n            <Popover.Close render={<Button size=\"sm\" variant=\"secondary\" />}>\n              Close\n            </Popover.Close>\n          </div>\n        </Popover.Content>\n      </Popover>\n    </div>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -3774,19 +4210,19 @@
     "Radio": {
       "name": "Radio",
       "type": "component",
-      "description": "Radio — radio button group for single-select choices.  Compound component: `Radio.Group` (with built-in Fieldset) and `Radio.Item`. Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.",
+      "description": "Radio — radio button group for single-select choices.  Compound component: `Radio.Group` (with built-in Fieldset), `Radio.Item`, and `Radio.Legend`. Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.",
       "importPath": "@cloudflare/kumo",
       "category": "Input",
       "props": {
         "legend": {
           "type": "string",
-          "required": true,
-          "description": "Legend text for the group (required for accessibility)"
+          "optional": true,
+          "description": "Legend text for the group (required for accessibility). For more control over legend styling, omit this prop and use `<Radio.Legend>` as a child instead."
         },
         "children": {
           "type": "ReactNode",
           "optional": true,
-          "description": "Child Radio.Item components"
+          "description": "Child Radio.Item components (and optionally a Radio.Legend)"
         },
         "orientation": {
           "type": "enum",
@@ -3842,7 +4278,7 @@
         "controlPosition": {
           "type": "enum",
           "optional": true,
-          "description": "Position of radio control relative to label: \"start\" (default) puts radio before label, \"end\" puts label before radio. Note: In card appearance, the control is always positioned at the end.",
+          "description": "Position of radio control relative to label: \"start\" puts radio before label, \"end\" puts label before radio. Defaults to \"start\" for default appearance and \"end\" for card appearance.",
           "values": [
             "start",
             "end"
@@ -3868,6 +4304,10 @@
         "<div className=\"grid grid-cols-2 gap-6\">\n      <Radio.Group legend=\"Disabled group\" disabled defaultValue=\"a\">\n        <Radio.Item label=\"Option A\" value=\"a\" />\n        <Radio.Item label=\"Option B\" value=\"b\" />\n      </Radio.Group>\n      <Radio.Group legend=\"Individual disabled\" defaultValue=\"available\">\n        <Radio.Item label=\"Available\" value=\"available\" />\n        <Radio.Item label=\"Unavailable\" value=\"unavailable\" disabled />\n      </Radio.Group>\n      <Radio.Group\n        legend=\"Disabled card group\"\n        appearance=\"card\"\n        disabled\n        defaultValue=\"a\"\n      >\n        <Radio.Item\n          label=\"Option A\"\n          description=\"This option is disabled.\"\n          value=\"a\"\n        />\n        <Radio.Item\n          label=\"Option B\"\n          description=\"This option is disabled.\"\n          value=\"b\"\n        />\n      </Radio.Group>\n      <Radio.Group\n        legend=\"Individual disabled card\"\n        appearance=\"card\"\n        defaultValue=\"available\"\n      >\n        <Radio.Item\n          label=\"Available\"\n          description=\"This option can be selected.\"\n          value=\"available\"\n        />\n        <Radio.Item\n          label=\"Unavailable\"\n          description=\"This option is not available.\"\n          value=\"unavailable\"\n          disabled\n        />\n      </Radio.Group>\n    </div>",
         "<Radio.Group legend=\"Preferences\" controlPosition=\"end\" defaultValue=\"a\">\n      <Radio.Item label=\"Label before radio\" value=\"a\" />\n      <Radio.Item label=\"Another option\" value=\"b\" />\n    </Radio.Group>",
         "<Radio.Group\n      legend=\"Choose a plan\"\n      appearance=\"card\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item\n        label=\"Free\"\n        description=\"For personal or hobby projects that aren't business-critical.\"\n        value=\"free\"\n      />\n      <Radio.Item\n        label=\"Pro\"\n        description=\"For professional websites that aren't business-critical.\"\n        value=\"pro\"\n      />\n      <Radio.Item\n        label=\"Business\"\n        description=\"For small businesses operating online.\"\n        value=\"business\"\n      />\n      <Radio.Item\n        label=\"Contract\"\n        description=\"For mission-critical applications that are core to your business.\"\n        value=\"contract\"\n      />\n    </Radio.Group>",
+        "<Radio.Group defaultValue=\"all\" value={value} onValueChange={setValue}>\n      <Radio.Legend className=\"sr-only\">Paths</Radio.Legend>\n      <Radio.Item label=\"Allow all paths\" value=\"all\" />\n      <Radio.Item label=\"Restrict to specific paths\" value=\"specific\" />\n    </Radio.Group>",
+        "<Radio.Group value={value} onValueChange={setValue}>\n      <Radio.Legend className=\"text-sm font-normal text-kumo-subtle\">\n        Notification preference\n      </Radio.Legend>\n      <Radio.Item label=\"Email\" value=\"email\" />\n      <Radio.Item label=\"SMS\" value=\"sms\" />\n      <Radio.Item label=\"Push notification\" value=\"push\" />\n    </Radio.Group>",
+        "<Radio.Group\n      legend=\"Choose a plan\"\n      appearance=\"card\"\n      controlPosition=\"start\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item\n        label=\"Free\"\n        description=\"For personal or hobby projects that aren't business-critical.\"\n        value=\"free\"\n      />\n      <Radio.Item\n        label=\"Pro\"\n        description=\"For professional websites that aren't business-critical.\"\n        value=\"pro\"\n      />\n    </Radio.Group>",
+        "<Radio.Group\n      legend=\"Choose a plan\"\n      appearance=\"card\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item\n        label={\n          <span className=\"flex items-center gap-2\">\n            Free\n            <Badge variant=\"neutral\">$0</Badge>\n          </span>\n        }\n        description=\"For personal or hobby projects.\"\n        value=\"free\"\n      />\n      <Radio.Item\n        label={\n          <span className=\"flex items-center gap-2\">\n            Pro\n            <Badge variant=\"primary\">Popular</Badge>\n          </span>\n        }\n        description=\"For professional websites.\"\n        value=\"pro\"\n      />\n    </Radio.Group>",
         "<Radio.Group\n      legend=\"Choose a plan\"\n      appearance=\"card\"\n      orientation=\"horizontal\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item\n        label=\"Free\"\n        description=\"For personal or hobby projects that aren't business-critical.\"\n        value=\"free\"\n      />\n      <Radio.Item\n        label=\"Pro\"\n        description=\"For professional websites that aren't business-critical.\"\n        value=\"pro\"\n      />\n      <Radio.Item\n        label=\"Business\"\n        description=\"For small businesses operating online.\"\n        value=\"business\"\n      />\n      <Radio.Item\n        label=\"Contract\"\n        description=\"For mission-critical applications that are core to your business.\"\n        value=\"contract\"\n      />\n    </Radio.Group>"
       ],
       "colors": [
@@ -3877,7 +4317,9 @@
         "border-kumo-danger",
         "border-kumo-hairline",
         "border-kumo-interact",
+        "ring-kumo-brand",
         "ring-kumo-danger",
+        "ring-kumo-focus",
         "ring-kumo-hairline",
         "ring-kumo-line",
         "text-kumo-danger",
@@ -3896,7 +4338,7 @@
           "props": {
             "legend": {
               "type": "string",
-              "required": true
+              "optional": true
             },
             "children": {
               "type": "ReactNode",
@@ -3927,11 +4369,7 @@
               "optional": true
             },
             "label": {
-              "type": "\"start\" (default) puts radio before label",
-              "required": true
-            },
-            "Note": {
-              "type": "In card appearance",
+              "type": "\"start\" puts radio before label",
               "required": true
             },
             "controlPosition": {
@@ -3947,6 +4385,20 @@
               "optional": true
             }
           }
+        },
+        "Legend": {
+          "name": "Legend",
+          "description": "Legend sub-component",
+          "props": {
+            "children": {
+              "type": "ReactNode",
+              "required": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
         }
       }
     },
@@ -3962,6 +4414,18 @@
           "optional": true,
           "description": "Additional CSS classes merged via `cn()`."
         },
+        "size": {
+          "type": "enum",
+          "optional": true,
+          "description": "Size of the select trigger. Matches Input component sizes.",
+          "values": [
+            "xs",
+            "sm",
+            "base",
+            "lg"
+          ],
+          "default": "base"
+        },
         "label": {
           "type": "ReactNode",
           "optional": true,
@@ -4027,6 +4491,7 @@
       },
       "examples": [
         "<Select\n      label=\"Favorite Fruit\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"apple\")}\n      items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n    />",
+        "<div className=\"grid gap-4\">\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">xs</span>\n        <Select\n          aria-label=\"Select size xs\"\n          size=\"xs\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">sm</span>\n        <Select\n          aria-label=\"Select size sm\"\n          size=\"sm\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">base</span>\n        <Select\n          aria-label=\"Select size base\"\n          size=\"base\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">lg</span>\n        <Select\n          aria-label=\"Select size lg\"\n          size=\"lg\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n    </div>",
         "<Select\n      aria-label=\"Select a fruit\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"apple\")}\n      items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n    />",
         "<Select\n      label=\"Issue Type\"\n      description=\"Choose the category that best describes your issue\"\n      error={!value ? \"Please select an issue type\" : undefined}\n      className=\"w-[280px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    />",
         "<Select\n      label=\"Category\"\n      placeholder=\"Choose a category...\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    />",
@@ -4037,20 +4502,25 @@
         "<Select\n      label=\"Visible Columns\"\n      className=\"w-[250px]\"\n      multiple\n      renderValue={(value) => {\n        if (value.length > 3) {\n          return (\n            <span className=\"line-clamp-1\">\n              {value.slice(0, 2).join(\", \") + ` and ${value.length - 2} more`}\n            </span>\n          );\n        }\n        return <span>{value.join(\", \")}</span>;\n      }}\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      <Select.Option value=\"Name\">Name</Select.Option>\n      <Select.Option value=\"Location\">Location</Select.Option>\n      <Select.Option value=\"Size\">Size</Select.Option>\n      <Select.Option value=\"Read\">Read</Select.Option>\n      <Select.Option value=\"Write\">Write</Select.Option>\n      <Select.Option value=\"CreatedAt\">Created At</Select.Option>\n    </Select>",
         "<Select\n      label=\"Compliance Frameworks\"\n      className=\"w-[280px]\"\n      multiple\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      <Select.Option value=\"European Union Privacy Regulation\">\n        European Union Privacy Regulation\n      </Select.Option>\n      <Select.Option value=\"California Consumer Protection Act\">\n        California Consumer Protection Act\n      </Select.Option>\n      <Select.Option value=\"Health Insurance Portability Act\">\n        Health Insurance Portability Act\n      </Select.Option>\n      <Select.Option value=\"Payment Card Industry Standard\">\n        Payment Card Industry Standard\n      </Select.Option>\n    </Select>",
         "<Select\n      label=\"Issue Types\"\n      className=\"w-[220px]\"\n      multiple\n      renderValue={(selected) => (\n        <span className=\"flex items-center gap-2\">\n          <span>Issue Types</span>\n          {selected.length > 0 && (\n            <Badge variant=\"neutral\">{selected.length}</Badge>\n          )}\n        </span>\n      )}\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      {allOptions.map((option) => (\n        <Select.Option key={option.value} value={option.value}>\n          {option.label}\n        </Select.Option>\n      ))}\n    </Select>",
-        "<Select\n      label=\"Author\"\n      description=\"Select the primary author for this document\"\n      className=\"w-[200px]\"\n      onValueChange={(v) => setValue(v as (typeof authors)[0] | null)}\n      value={value}\n      isItemEqualToValue={(item, value) => item?.id === value?.id}\n      renderValue={(author) => {\n        return author?.name ?? \"Select an author\";\n      }}\n    >\n      {authors.map((author) => (\n        <Select.Option key={author.id} value={author}>\n          <div className=\"flex w-[300px] items-center justify-between gap-2\">\n            <Text>{author.name}</Text>\n            <Text variant=\"secondary\">{author.title}</Text>\n          </div>\n        </Select.Option>\n      ))}\n    </Select>",
-        "<Select\n      label=\"Deployment Region\"\n      placeholder=\"Choose a region...\"\n      className=\"w-[250px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n    >\n      <Select.Option value=\"us-east\">US East</Select.Option>\n      <Select.Option value=\"us-west\">US West</Select.Option>\n      <Select.Option value=\"eu-west\" disabled>\n        EU West\n      </Select.Option>\n      <Select.Option value=\"ap-south\" disabled>\n        AP South\n      </Select.Option>\n    </Select>",
+        "<Select\n      label=\"Author\"\n      description=\"Select the primary author for this document\"\n      placeholder=\"Select an author\"\n      className=\"w-[200px]\"\n      onValueChange={(v) => setValue(v as (typeof authors)[0] | null)}\n      value={value}\n      isItemEqualToValue={(item, value) => item?.id === value?.id}\n      renderValue={(author) => author.name}\n    >\n      {authors.map((author) => (\n        <Select.Option key={author.id} value={author}>\n          <div className=\"flex w-[300px] items-center justify-between gap-2\">\n            <Text>{author.name}</Text>\n            <Text variant=\"secondary\">{author.title}</Text>\n          </div>\n        </Select.Option>\n      ))}\n    </Select>",
+        "<Select\n      label=\"Deployment Region\"\n      placeholder=\"Choose a region...\"\n      className=\"w-[250px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as Region | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      {regions.map((region) => (\n        <Select.Option\n          key={region.value}\n          value={region}\n          disabled={region.disabled}\n        >\n          {region.label}\n        </Select.Option>\n      ))}\n    </Select>",
         "<Select\n      label=\"Plan\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        free: \"Free\",\n        pro: \"Pro\",\n        business: { label: \"Business\", disabled: true },\n        enterprise: { label: \"Enterprise\", disabled: true },\n      }}\n    />",
-        "<Select\n      label=\"Food\"\n      placeholder=\"Pick a food...\"\n      className=\"w-[220px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n    >\n      <Select.Group>\n        <Select.GroupLabel>Fruits</Select.GroupLabel>\n        <Select.Option value=\"apple\">Apple</Select.Option>\n        <Select.Option value=\"banana\">Banana</Select.Option>\n        <Select.Option value=\"cherry\">Cherry</Select.Option>\n      </Select.Group>\n      <Select.Separator />\n      <Select.Group>\n        <Select.GroupLabel>Vegetables</Select.GroupLabel>\n        <Select.Option value=\"carrot\">Carrot</Select.Option>\n        <Select.Option value=\"broccoli\">Broccoli</Select.Option>\n        <Select.Option value=\"spinach\">Spinach</Select.Option>\n      </Select.Group>\n    </Select>",
-        "<Select\n      label=\"Server Region\"\n      placeholder=\"Select a region...\"\n      className=\"w-[260px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n    >\n      <Select.Group>\n        <Select.GroupLabel>Available</Select.GroupLabel>\n        <Select.Option value=\"us-east-1\">US East (N. Virginia)</Select.Option>\n        <Select.Option value=\"us-west-2\">US West (Oregon)</Select.Option>\n        <Select.Option value=\"eu-west-1\">EU West (Ireland)</Select.Option>\n      </Select.Group>\n      <Select.Separator />\n      <Select.Group>\n        <Select.GroupLabel>Unavailable</Select.GroupLabel>\n        <Select.Option value=\"ap-south-1\" disabled>\n          AP South (Mumbai)\n        </Select.Option>\n        <Select.Option value=\"sa-east-1\" disabled>\n          SA East (São Paulo)\n        </Select.Option>\n      </Select.Group>\n    </Select>",
-        "<Select\n      label=\"Long List Select\"\n      description=\"Tests scrolling behavior with many options\"\n      placeholder=\"Choose an option...\"\n      className=\"w-[220px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n    >\n      {longListItems.map((item) => (\n        <Select.Option key={item.value} value={item.value}>\n          {item.label}\n        </Select.Option>\n      ))}\n    </Select>"
+        "<Select\n      label=\"Food\"\n      placeholder=\"Pick a food...\"\n      className=\"w-[220px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as Food | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      <Select.Group>\n        <Select.GroupLabel>Fruits</Select.GroupLabel>\n        {foods.fruits.map((food) => (\n          <Select.Option key={food.value} value={food}>\n            {food.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n      <Select.Separator />\n      <Select.Group>\n        <Select.GroupLabel>Vegetables</Select.GroupLabel>\n        {foods.vegetables.map((food) => (\n          <Select.Option key={food.value} value={food}>\n            {food.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n    </Select>",
+        "<Select\n      label=\"Server Region\"\n      placeholder=\"Select a region...\"\n      className=\"w-[260px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as ServerRegion | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      <Select.Group>\n        <Select.GroupLabel>Available</Select.GroupLabel>\n        {serverRegions.available.map((region) => (\n          <Select.Option key={region.value} value={region}>\n            {region.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n      <Select.Separator />\n      <Select.Group>\n        <Select.GroupLabel>Unavailable</Select.GroupLabel>\n        {serverRegions.unavailable.map((region) => (\n          <Select.Option key={region.value} value={region} disabled>\n            {region.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n    </Select>",
+        "<Select\n      label=\"Long List Select\"\n      description=\"Tests scrolling behavior with many options\"\n      placeholder=\"Choose an option...\"\n      className=\"w-[220px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as LongListItem | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      {longListItems.map((item) => (\n        <Select.Option key={item.value} value={item}>\n          {item.label}\n        </Select.Option>\n      ))}\n    </Select>"
       ],
       "colors": [
         "bg-kumo-base",
-        "bg-kumo-line",
+        "bg-kumo-elevated",
+        "bg-kumo-hairline",
         "bg-kumo-tint",
-        "ring-kumo-hairline",
+        "border-kumo-line",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
+        "ring-kumo-line",
         "text-kumo-danger",
         "text-kumo-default",
+        "text-kumo-placeholder",
         "text-kumo-subtle"
       ],
       "subComponents": {
@@ -4080,7 +4550,7 @@
           "height": 36,
           "paddingX": 12,
           "borderRadius": 8,
-          "background": "color-secondary",
+          "background": "bg-kumo-elevated",
           "text": "text-color-surface",
           "ring": "color-border",
           "fontSize": 16,
@@ -4105,8 +4575,8 @@
           }
         },
         "popup": {
-          "background": "color-secondary",
-          "ring": "color-border",
+          "background": "bg-kumo-elevated",
+          "ring": "border-kumo-line",
           "borderRadius": 8,
           "padding": 6
         },
@@ -4247,8 +4717,9 @@
       "colors": [
         "bg-kumo-brand",
         "bg-kumo-control",
-        "outline-kumo-hairline",
-        "ring-kumo-hairline",
+        "outline-kumo-focus",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
         "text-kumo-default",
         "text-kumo-subtle"
       ]
@@ -4357,13 +4828,13 @@
       "colors": [
         "bg-kumo-base",
         "bg-kumo-brand",
-        "bg-kumo-line",
+        "bg-kumo-hairline",
         "bg-kumo-overlay",
         "bg-kumo-recessed",
         "bg-kumo-tint",
-        "border-kumo-line",
+        "border-kumo-hairline",
+        "ring-kumo-brand",
         "ring-kumo-hairline",
-        "ring-kumo-line",
         "text-kumo-default",
         "text-kumo-strong",
         "text-kumo-subtle"
@@ -4422,82 +4893,222 @@
         "Header": {
           "name": "Header",
           "description": "Header sub-component",
-          "props": {}
+          "props": {
+            "collapsible": {
+              "type": "boolean",
+              "optional": true
+            },
+            "defaultOpen": {
+              "type": "boolean",
+              "optional": true
+            },
+            "open": {
+              "type": "boolean",
+              "optional": true
+            }
+          }
         },
         "Content": {
           "name": "Content",
           "description": "Content sub-component",
-          "props": {}
+          "props": {
+            "collapsible": {
+              "type": "boolean",
+              "optional": true
+            },
+            "defaultOpen": {
+              "type": "boolean",
+              "optional": true
+            },
+            "open": {
+              "type": "boolean",
+              "optional": true
+            }
+          }
         },
         "Footer": {
           "name": "Footer",
           "description": "Footer sub-component",
-          "props": {}
+          "props": {
+            "collapsible": {
+              "type": "boolean",
+              "optional": true
+            },
+            "defaultOpen": {
+              "type": "boolean",
+              "optional": true
+            },
+            "open": {
+              "type": "boolean",
+              "optional": true
+            }
+          }
         },
         "Group": {
           "name": "Group",
           "description": "Group sub-component",
-          "props": {}
+          "props": {
+            "collapsible": {
+              "type": "boolean",
+              "optional": true
+            },
+            "defaultOpen": {
+              "type": "boolean",
+              "optional": true
+            },
+            "open": {
+              "type": "boolean",
+              "optional": true
+            }
+          }
         },
         "GroupLabel": {
           "name": "GroupLabel",
           "description": "GroupLabel sub-component",
-          "props": {}
+          "props": {
+            "icon": {
+              "type": "React.ComponentType<{ className?: string",
+              "optional": true
+            }
+          }
         },
         "GroupContent": {
           "name": "GroupContent",
           "description": "GroupContent sub-component",
-          "props": {}
+          "props": {
+            "icon": {
+              "type": "React.ComponentType<{ className?: string",
+              "optional": true
+            }
+          }
         },
         "Menu": {
           "name": "Menu",
           "description": "Menu sub-component",
-          "props": {}
+          "props": {
+            "icon": {
+              "type": "React.ComponentType<{ className?: string",
+              "optional": true
+            }
+          }
         },
         "MenuItem": {
           "name": "MenuItem",
           "description": "MenuItem sub-component",
-          "props": {}
+          "props": {
+            "icon": {
+              "type": "React.ComponentType<{ className?: string",
+              "optional": true
+            }
+          }
         },
         "MenuButton": {
           "name": "MenuButton",
           "description": "MenuButton sub-component",
-          "props": {}
+          "props": {
+            "icon": {
+              "type": "React.ComponentType<{ className?: string",
+              "optional": true
+            }
+          }
         },
         "MenuAction": {
           "name": "MenuAction",
           "description": "MenuAction sub-component",
-          "props": {}
+          "props": {
+            "active": {
+              "type": "boolean",
+              "optional": true
+            },
+            "href": {
+              "type": "string",
+              "optional": true
+            }
+          }
         },
         "MenuBadge": {
           "name": "MenuBadge",
           "description": "MenuBadge sub-component",
-          "props": {}
+          "props": {
+            "active": {
+              "type": "boolean",
+              "optional": true
+            },
+            "href": {
+              "type": "string",
+              "optional": true
+            }
+          }
         },
         "MenuSub": {
           "name": "MenuSub",
           "description": "MenuSub sub-component",
-          "props": {}
+          "props": {
+            "active": {
+              "type": "boolean",
+              "optional": true
+            },
+            "href": {
+              "type": "string",
+              "optional": true
+            }
+          }
         },
         "MenuSubItem": {
           "name": "MenuSubItem",
           "description": "MenuSubItem sub-component",
-          "props": {}
+          "props": {
+            "active": {
+              "type": "boolean",
+              "optional": true
+            },
+            "href": {
+              "type": "string",
+              "optional": true
+            }
+          }
         },
         "MenuSubButton": {
           "name": "MenuSubButton",
           "description": "MenuSubButton sub-component",
-          "props": {}
+          "props": {
+            "active": {
+              "type": "boolean",
+              "optional": true
+            },
+            "href": {
+              "type": "string",
+              "optional": true
+            }
+          }
         },
         "Separator": {
           "name": "Separator",
           "description": "Separator sub-component",
-          "props": {}
+          "props": {
+            "placeholder": {
+              "type": "string",
+              "optional": true
+            },
+            "shortcut": {
+              "type": "string",
+              "optional": true
+            }
+          }
         },
         "Input": {
           "name": "Input",
           "description": "Input sub-component",
-          "props": {}
+          "props": {
+            "placeholder": {
+              "type": "string",
+              "optional": true
+            },
+            "shortcut": {
+              "type": "string",
+              "optional": true
+            }
+          }
         },
         "Trigger": {
           "name": "Trigger",
@@ -4517,7 +5128,12 @@
         "MenuChevron": {
           "name": "MenuChevron",
           "description": "MenuChevron sub-component",
-          "props": {}
+          "props": {
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
         },
         "Collapsible": {
           "name": "Collapsible",
@@ -4548,7 +5164,7 @@
     "Surface": {
       "name": "Surface",
       "type": "component",
-      "description": "Polymorphic container with consistent background, shadow, and border styling.  Use the `render` prop to change the underlying element: ```tsx <Surface render={<section />} className=\"rounded-lg p-4\">Card content</Surface> ```",
+      "description": "Surface component",
       "importPath": "@cloudflare/kumo",
       "category": "Layout",
       "props": {
@@ -4559,7 +5175,7 @@
         "render": {
           "type": "ReactNode",
           "optional": true,
-          "description": "Allows you to replace the component’s HTML element with a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+          "description": "Allows you to replace the component's HTML element with a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
         },
         "children": {
           "type": "ReactNode",
@@ -4582,15 +5198,8 @@
           "optional": true
         }
       },
-      "examples": [
-        "<Surface className=\"rounded-lg p-6\">\n      <Text size=\"lg\" bold>\n        Surface Component\n      </Text>\n      <div className=\"mt-2\">\n        <Text variant=\"secondary\">\n          A container with consistent elevation and border styling.\n        </Text>\n      </div>\n    </Surface>",
-        "<div className=\"flex flex-col gap-4\">\n      <Surface render={<section />} className=\"rounded-lg p-4\">\n        <Text bold>As section element</Text>\n      </Surface>\n      <Surface render={<article />} className=\"rounded-lg p-4\">\n        <Text bold>As article element</Text>\n      </Surface>\n      <Surface render={<aside />} className=\"rounded-lg p-4\">\n        <Text bold>As aside element</Text>\n      </Surface>\n    </div>",
-        "<Surface className=\"rounded-lg p-6\">\n      <Text bold>Outer Surface</Text>\n      <Surface className=\"mt-4 rounded-md bg-kumo-elevated p-4\">\n        <Text variant=\"secondary\">Nested Surface</Text>\n      </Surface>\n    </Surface>"
-      ],
-      "colors": [
-        "bg-kumo-base",
-        "ring-kumo-line"
-      ]
+      "examples": [],
+      "colors": []
     },
     "Switch": {
       "name": "Switch",
@@ -4713,12 +5322,16 @@
         "<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=\"grid grid-cols-2 gap-x-8 gap-y-4\">\n      <Switch label=\"Default off\" checked={false} onCheckedChange={() => {}} />\n      <Switch label=\"Default on\" checked={true} onCheckedChange={() => {}} />\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    </div>",
         "<Switch\n      id=\"my-custom-switch\"\n      label=\"Custom ID\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />",
+        "<Switch.Group legend=\"Notification settings\">\n      <Switch.Item label=\"Email notifications\" />\n      <Switch.Item label=\"SMS notifications\" />\n      <Switch.Item label=\"Push notifications\" />\n    </Switch.Group>",
+        "<Switch.Group>\n      <Switch.Legend className=\"sr-only\">Notification settings</Switch.Legend>\n      <Switch.Item label=\"Email notifications\" />\n      <Switch.Item label=\"SMS notifications\" />\n      <Switch.Item label=\"Push notifications\" />\n    </Switch.Group>",
+        "<Switch.Group>\n      <Switch.Legend className=\"text-sm font-normal text-kumo-subtle\">\n        Notification settings\n      </Switch.Legend>\n      <Switch.Item label=\"Email notifications\" />\n      <Switch.Item label=\"SMS notifications\" />\n      <Switch.Item label=\"Push notifications\" />\n    </Switch.Group>",
         "<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",
-        "border-kumo-line",
-        "ring-kumo-line",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
+        "ring-kumo-hairline",
         "text-kumo-danger",
         "text-kumo-default",
         "text-kumo-subtle"
@@ -4735,7 +5348,7 @@
           "props": {
             "legend": {
               "type": "string",
-              "required": true
+              "optional": true
             },
             "children": {
               "type": "ReactNode",
@@ -4762,6 +5375,20 @@
               "optional": true
             }
           }
+        },
+        "Legend": {
+          "name": "Legend",
+          "description": "Legend sub-component",
+          "props": {
+            "children": {
+              "type": "ReactNode",
+              "required": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
         }
       }
     },
@@ -4827,13 +5454,14 @@
         }
       },
       "examples": [
-        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.slice(0, 3).map((row) => (\n              <Table.Row key={row.id}>\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
-        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead\n                checked={selectedIds.size === rows.length}\n                indeterminate={\n                  selectedIds.size > 0 && selectedIds.size < rows.length\n                }\n                onValueChange={toggleAll}\n                aria-label=\"Select all rows\"\n              />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {rows.map((row) => (\n              <Table.Row key={row.id}>\n                <Table.CheckCell\n                  checked={selectedIds.has(row.id)}\n                  onValueChange={() => toggleRow(row.id)}\n                  aria-label={`Select ${row.subject}`}\n                />\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
-        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header variant=\"compact\">\n            <Table.Row>\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.slice(0, 3).map((row) => (\n              <Table.Row key={row.id}>\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
-        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead\n                checked={selectedIds.size === rows.length}\n                indeterminate={\n                  selectedIds.size > 0 && selectedIds.size < rows.length\n                }\n                onValueChange={toggleAll}\n                aria-label=\"Select all rows\"\n              />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {rows.map((row) => (\n              <Table.Row\n                key={row.id}\n                variant={selectedIds.has(row.id) ? \"selected\" : \"default\"}\n              >\n                <Table.CheckCell\n                  checked={selectedIds.has(row.id)}\n                  onValueChange={() => toggleRow(row.id)}\n                  aria-label={`Select ${row.subject}`}\n                />\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
-        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table layout=\"fixed\">\n          <colgroup>\n            <col />\n            <col className=\"w-[150px]\" />\n            <col className=\"w-[150px]\" />\n          </colgroup>\n          <Table.Header>\n            <Table.Row>\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.map((row) => (\n              <Table.Row key={row.id}>\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
-        "<LayerCard>\n      <LayerCard.Primary className=\"w-full max-w-md overflow-x-auto p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n              <Table.Head>Tags</Table.Head>\n              <Table.Head sticky=\"right\">\n                <span className=\"sr-only\">Actions</span>\n              </Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.map((row) => (\n              <Table.Row key={row.id}>\n                <Table.Cell className=\"whitespace-nowrap\">\n                  {row.subject}\n                </Table.Cell>\n                <Table.Cell className=\"whitespace-nowrap\">\n                  {row.from}\n                </Table.Cell>\n                <Table.Cell className=\"whitespace-nowrap\">\n                  {row.date}\n                </Table.Cell>\n                <Table.Cell className=\"whitespace-nowrap\">\n                  {row.tags ? (\n                    <div className=\"inline-flex gap-1\">\n                      {row.tags.map((tag) => (\n                        <Badge key={tag}>{tag}</Badge>\n                      ))}\n                    </div>\n                  ) : (\n                    \"—\"\n                  )}\n                </Table.Cell>\n                <Table.Cell sticky=\"right\" className=\"text-right\">\n                  <DropdownMenu>\n                    <DropdownMenu.Trigger\n                      render={\n                        <Button\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          shape=\"square\"\n                          aria-label=\"More options\"\n                        >\n                          <DotsThree weight=\"bold\" size={16} />\n                        </Button>\n                      }\n                    />\n                    <DropdownMenu.Content>\n                      <DropdownMenu.Item icon={Eye}>View</DropdownMenu.Item>\n                      <DropdownMenu.Item icon={PencilSimple}>\n                        Edit\n                      </DropdownMenu.Item>\n                      <DropdownMenu.Separator />\n                      <DropdownMenu.Item icon={Trash} variant=\"danger\">\n                        Delete\n                      </DropdownMenu.Item>\n                    </DropdownMenu.Content>\n                  </DropdownMenu>\n                </Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
-        "<LayerCard>\n      <LayerCard.Primary className=\"w-full overflow-x-auto p-0\">\n        <Table layout=\"fixed\">\n          <colgroup>\n            <col />{\" \"}\n            {/* Checkbox column - width handled by Table.CheckHead/CheckCell */}\n            <col />\n            <col style={{ width: \"150px\" }} />\n            <col style={{ width: \"120px\" }} />\n            <col style={{ width: \"50px\" }} />\n          </colgroup>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead\n                checked={selectedIds.size === emailData.length}\n                indeterminate={\n                  selectedIds.size > 0 && selectedIds.size < emailData.length\n                }\n                onValueChange={toggleAll}\n                aria-label=\"Select all rows\"\n              />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n              <Table.Head></Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.map((row) => (\n              <Table.Row\n                key={row.id}\n                variant={selectedIds.has(row.id) ? \"selected\" : \"default\"}\n              >\n                <Table.CheckCell\n                  checked={selectedIds.has(row.id)}\n                  onValueChange={() => toggleRow(row.id)}\n                  aria-label={`Select ${row.subject}`}\n                />\n                <Table.Cell>\n                  <div className=\"flex items-center gap-2\">\n                    <EnvelopeSimple size={16} />\n                    <span className=\"truncate\">{row.subject}</span>\n                    {row.tags && (\n                      <div className=\"ml-2 inline-flex gap-1\">\n                        {row.tags.map((tag) => (\n                          <Badge key={tag}>{tag}</Badge>\n                        ))}\n                      </div>\n                    )}\n                  </div>\n                </Table.Cell>\n                <Table.Cell>\n                  <span className=\"truncate\">{row.from}</span>\n                </Table.Cell>\n                <Table.Cell>\n                  <span className=\"truncate\">{row.date}</span>\n                </Table.Cell>\n                <Table.Cell className=\"text-right\">\n                  <DropdownMenu>\n                    <DropdownMenu.Trigger\n                      render={\n                        <Button\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          shape=\"square\"\n                          aria-label=\"More options\"\n                        >\n                          <DotsThree weight=\"bold\" size={16} />\n                        </Button>\n                      }\n                    />\n                    <DropdownMenu.Content>\n                      <DropdownMenu.Item icon={Eye}>View</DropdownMenu.Item>\n                      <DropdownMenu.Item icon={PencilSimple}>\n                        Edit\n                      </DropdownMenu.Item>\n                      <DropdownMenu.Separator />\n                      <DropdownMenu.Item icon={Trash} variant=\"danger\">\n                        Delete\n                      </DropdownMenu.Item>\n                    </DropdownMenu.Content>\n                  </DropdownMenu>\n                </Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>"
+        "<LayerCard className=\"p-0\">\n      <Table>\n        <Table.Header>\n          <Table.Row>\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.slice(0, 3).map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>",
+        "<LayerCard className=\"p-0\">\n      <Table>\n        <Table.Header>\n          <Table.Row>\n            <Table.CheckHead\n              checked={selectedIds.size === rows.length}\n              indeterminate={\n                selectedIds.size > 0 && selectedIds.size < rows.length\n              }\n              onCheckedChange={toggleAll}\n              aria-label=\"Select all rows\"\n            />\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {rows.map((row) => (\n            <Table.Row key={row.id}>\n              <Table.CheckCell\n                checked={selectedIds.has(row.id)}\n                onCheckedChange={() => toggleRow(row.id)}\n                aria-label={`Select ${row.subject}`}\n              />\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>",
+        "<LayerCard className=\"p-0\">\n      <Table>\n        <Table.Header variant=\"compact\">\n          <Table.Row>\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.slice(0, 3).map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>",
+        "<LayerCard className=\"p-0\">\n      <Table>\n        <Table.Header>\n          <Table.Row>\n            <Table.CheckHead\n              checked={selectedIds.size === rows.length}\n              indeterminate={\n                selectedIds.size > 0 && selectedIds.size < rows.length\n              }\n              onCheckedChange={toggleAll}\n              aria-label=\"Select all rows\"\n            />\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {rows.map((row) => (\n            <Table.Row\n              key={row.id}\n              variant={selectedIds.has(row.id) ? \"selected\" : \"default\"}\n            >\n              <Table.CheckCell\n                checked={selectedIds.has(row.id)}\n                onCheckedChange={() => toggleRow(row.id)}\n                aria-label={`Select ${row.subject}`}\n              />\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>",
+        "<LayerCard className=\"p-0\">\n      <Table layout=\"fixed\">\n        <colgroup>\n          <col />\n          <col className=\"w-[150px]\" />\n          <col className=\"w-[150px]\" />\n        </colgroup>\n        <Table.Header>\n          <Table.Row>\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>",
+        "<LayerCard className=\"w-full max-w-md overflow-x-auto p-0\">\n      <Table>\n        <Table.Header variant=\"compact\">\n          <Table.Row>\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n            <Table.Head>Tags</Table.Head>\n            <Table.Head sticky=\"right\">\n              <span className=\"sr-only\">Actions</span>\n            </Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.subject}\n              </Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.from}\n              </Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.date}\n              </Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.tags ? (\n                  <div className=\"inline-flex gap-1\">\n                    {row.tags.map((tag) => (\n                      <Badge key={tag}>{tag}</Badge>\n                    ))}\n                  </div>\n                ) : (\n                  \"—\"\n                )}\n              </Table.Cell>\n              <Table.Cell sticky=\"right\" className=\"text-right\">\n                <DropdownMenu>\n                  <DropdownMenu.Trigger\n                    render={\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        shape=\"square\"\n                        aria-label=\"More options\"\n                      >\n                        <DotsThree weight=\"bold\" size={16} />\n                      </Button>\n                    }\n                  />\n                  <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={Eye}>View</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={PencilSimple}>\n                      Edit\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Separator />\n                    <DropdownMenu.Item icon={Trash} variant=\"danger\">\n                      Delete\n                    </DropdownMenu.Item>\n                  </DropdownMenu.Content>\n                </DropdownMenu>\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>",
+        "<LayerCard className=\"w-full max-w-md overflow-x-auto p-0\">\n      <Table>\n        <Table.Header>\n          <Table.Row>\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n            <Table.Head>Tags</Table.Head>\n            <Table.Head sticky=\"right\">\n              <span className=\"sr-only\">Actions</span>\n            </Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.subject}\n              </Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.from}\n              </Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.date}\n              </Table.Cell>\n              <Table.Cell className=\"whitespace-nowrap\">\n                {row.tags ? (\n                  <div className=\"inline-flex gap-1\">\n                    {row.tags.map((tag) => (\n                      <Badge key={tag}>{tag}</Badge>\n                    ))}\n                  </div>\n                ) : (\n                  \"—\"\n                )}\n              </Table.Cell>\n              <Table.Cell sticky=\"right\" className=\"text-right\">\n                <DropdownMenu>\n                  <DropdownMenu.Trigger\n                    render={\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        shape=\"square\"\n                        aria-label=\"More options\"\n                      >\n                        <DotsThree weight=\"bold\" size={16} />\n                      </Button>\n                    }\n                  />\n                  <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={Eye}>View</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={PencilSimple}>\n                      Edit\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Separator />\n                    <DropdownMenu.Item icon={Trash} variant=\"danger\">\n                      Delete\n                    </DropdownMenu.Item>\n                  </DropdownMenu.Content>\n                </DropdownMenu>\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>",
+        "<LayerCard className=\"w-full overflow-x-auto p-0\">\n      <Table layout=\"fixed\">\n        <colgroup>\n          <col />{\" \"}\n          {/* Checkbox column - width handled by Table.CheckHead/CheckCell */}\n          <col />\n          <col style={{ width: \"150px\" }} />\n          <col style={{ width: \"120px\" }} />\n          <col style={{ width: \"50px\" }} />\n        </colgroup>\n        <Table.Header>\n          <Table.Row>\n            <Table.CheckHead\n              checked={selectedIds.size === emailData.length}\n              indeterminate={\n                selectedIds.size > 0 && selectedIds.size < emailData.length\n              }\n              onCheckedChange={toggleAll}\n              aria-label=\"Select all rows\"\n            />\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n            <Table.Head></Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.map((row) => (\n            <Table.Row\n              key={row.id}\n              variant={selectedIds.has(row.id) ? \"selected\" : \"default\"}\n            >\n              <Table.CheckCell\n                checked={selectedIds.has(row.id)}\n                onCheckedChange={() => toggleRow(row.id)}\n                aria-label={`Select ${row.subject}`}\n              />\n              <Table.Cell>\n                <div className=\"flex items-center gap-2\">\n                  <EnvelopeSimple size={16} />\n                  <span className=\"truncate\">{row.subject}</span>\n                  {row.tags && (\n                    <div className=\"ml-2 inline-flex gap-1\">\n                      {row.tags.map((tag) => (\n                        <Badge key={tag}>{tag}</Badge>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              </Table.Cell>\n              <Table.Cell>\n                <span className=\"truncate\">{row.from}</span>\n              </Table.Cell>\n              <Table.Cell>\n                <span className=\"truncate\">{row.date}</span>\n              </Table.Cell>\n              <Table.Cell className=\"text-right\">\n                <DropdownMenu>\n                  <DropdownMenu.Trigger\n                    render={\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        shape=\"square\"\n                        aria-label=\"More options\"\n                      >\n                        <DotsThree weight=\"bold\" size={16} />\n                      </Button>\n                    }\n                  />\n                  <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={Eye}>View</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={PencilSimple}>\n                      Edit\n                    </DropdownMenu.Item>\n                    <DropdownMenu.Separator />\n                    <DropdownMenu.Item icon={Trash} variant=\"danger\">\n                      Delete\n                    </DropdownMenu.Item>\n                  </DropdownMenu.Content>\n                </DropdownMenu>\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -4841,6 +5469,7 @@
         "bg-kumo-hairline",
         "bg-kumo-tint",
         "border-kumo-fill",
+        "ring-kumo-brand",
         "text-kumo-default",
         "text-kumo-strong"
       ],
@@ -4892,6 +5521,90 @@
         }
       }
     },
+    "TableOfContents": {
+      "name": "TableOfContents",
+      "type": "component",
+      "description": "TableOfContents — presentational compound component for section navigation.  Purely visual; all interaction logic (scroll tracking, active state management) is left to the consumer.",
+      "importPath": "@cloudflare/kumo",
+      "category": "Other",
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "optional": true
+        },
+        "className": {
+          "type": "string",
+          "optional": true
+        },
+        "id": {
+          "type": "string",
+          "optional": true
+        },
+        "lang": {
+          "type": "string",
+          "optional": true
+        },
+        "title": {
+          "type": "string",
+          "optional": true
+        }
+      },
+      "examples": [
+        "<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>On this page</TableOfContents.Title>\n        <TableOfContents.List>\n          {headings.map((heading) => (\n            <TableOfContents.Item\n              key={heading.text}\n              active={heading.text === \"Usage\"}\n              className=\"cursor-pointer\"\n            >\n              {heading.text}\n            </TableOfContents.Item>\n          ))}\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>",
+        "<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>On this page</TableOfContents.Title>\n        <TableOfContents.List>\n          {headings.map((heading) => (\n            <TableOfContents.Item\n              key={heading.text}\n              active={heading.text === active}\n              onClick={() => setActive(heading.text)}\n              className=\"cursor-pointer\"\n            >\n              {heading.text}\n            </TableOfContents.Item>\n          ))}\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>",
+        "<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>On this page</TableOfContents.Title>\n        <TableOfContents.List>\n          {headings.map((heading) => (\n            <TableOfContents.Item key={heading.text} className=\"cursor-pointer\">\n              {heading.text}\n            </TableOfContents.Item>\n          ))}\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>",
+        "<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>On this page</TableOfContents.Title>\n        <TableOfContents.List>\n          <TableOfContents.Item active className=\"cursor-pointer\">\n            Overview\n          </TableOfContents.Item>\n          <TableOfContents.Group label=\"Examples\" href=\"#examples-demo\">\n            <TableOfContents.Item className=\"cursor-pointer\">\n              Basic example\n            </TableOfContents.Item>\n            <TableOfContents.Item className=\"cursor-pointer\">\n              Advanced example\n            </TableOfContents.Item>\n          </TableOfContents.Group>\n          <TableOfContents.Group label=\"Getting Started\">\n            <TableOfContents.Item className=\"cursor-pointer\">\n              Installation\n            </TableOfContents.Item>\n            <TableOfContents.Item className=\"cursor-pointer\">\n              Configuration\n            </TableOfContents.Item>\n          </TableOfContents.Group>\n          <TableOfContents.Group label=\"API\" href=\"#api-demo\">\n            <TableOfContents.Item className=\"cursor-pointer\">\n              Props\n            </TableOfContents.Item>\n            <TableOfContents.Item className=\"cursor-pointer\">\n              Events\n            </TableOfContents.Item>\n          </TableOfContents.Group>\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>",
+        "<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.List>\n          {headings.slice(0, 3).map((heading) => (\n            <TableOfContents.Item\n              key={heading.text}\n              active={heading.text === \"Introduction\"}\n              className=\"cursor-pointer\"\n            >\n              {heading.text}\n            </TableOfContents.Item>\n          ))}\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>",
+        "<DemoWrapper>\n      <div className=\"space-y-3\">\n        <TableOfContents>\n          <TableOfContents.List>\n            {[\"Introduction\", \"Installation\", \"Usage\"].map((text) => (\n              <TableOfContents.Item\n                key={text}\n                render={<button type=\"button\" />}\n                onClick={() => setClicked(text)}\n                active={text === \"Introduction\"}\n              >\n                {text}\n              </TableOfContents.Item>\n            ))}\n          </TableOfContents.List>\n        </TableOfContents>\n        {clicked && (\n          <p className=\"text-xs text-kumo-subtle\">Clicked: {clicked}</p>\n        )}\n      </div>\n    </DemoWrapper>"
+      ],
+      "colors": [
+        "border-kumo-brand",
+        "border-kumo-hairline",
+        "border-kumo-line",
+        "text-kumo-default",
+        "text-kumo-subtle"
+      ],
+      "subComponents": {
+        "Title": {
+          "name": "Title",
+          "description": "Title sub-component",
+          "props": {}
+        },
+        "List": {
+          "name": "List",
+          "description": "List sub-component",
+          "props": {}
+        },
+        "Item": {
+          "name": "Item",
+          "description": "Item sub-component",
+          "props": {
+            "active": {
+              "type": "boolean",
+              "optional": true
+            }
+          }
+        },
+        "Group": {
+          "name": "Group",
+          "description": "Group sub-component",
+          "props": {
+            "label": {
+              "type": "string",
+              "required": true
+            },
+            "href": {
+              "type": "string",
+              "optional": true
+            },
+            "active": {
+              "type": "boolean",
+              "optional": true
+            }
+          }
+        }
+      }
+    },
     "Tabs": {
       "name": "Tabs",
       "type": "component",
@@ -4963,6 +5676,8 @@
         "bg-kumo-recessed",
         "bg-kumo-tint",
         "border-kumo-hairline",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
         "ring-kumo-hairline",
         "ring-kumo-line",
         "text-kumo-default",
@@ -5074,9 +5789,32 @@
           "description": "Whether to truncate overflowing text with an ellipsis. Adds `truncate min-w-0` classes."
         },
         "as": {
-          "type": "React.ElementType",
+          "type": "enum",
           "optional": true,
-          "description": "The HTML element type to render as (e.g. `\"span\"`, `\"p\"`, `\"h1\"`). Auto-selected based on variant if omitted."
+          "description": "The HTML element to render. Accepts headings (`\"h1\"`–`\"h6\"`), block text (`\"p\"`, `\"pre\"`), inline text (`\"span\"`, `\"code\"`, `\"em\"`, `\"strong\"`, `\"small\"`, `\"abbr\"`, `\"time\"`), form-related (`\"label\"`, `\"legend\"`), list/definition (`\"dt\"`, `\"dd\"`, `\"li\"`), and `\"figcaption\"`.\n\n- **Required** for heading variants (`\"heading1\"`, `\"heading2\"`,   `\"heading3\"`) — pick the element that reflects this text's place in   the document outline, or `\"span\"` for decorative heading-styled text   that is not a section heading.\n- **Optional** for body variants (defaults to `\"p\"`) and monospace   variants (defaults to `\"span\"`).",
+          "values": [
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "p",
+            "span",
+            "label",
+            "dt",
+            "dd",
+            "li",
+            "figcaption",
+            "legend",
+            "pre",
+            "code",
+            "em",
+            "strong",
+            "small",
+            "abbr",
+            "time"
+          ]
         },
         "children": {
           "type": "ReactNode",
@@ -5085,8 +5823,8 @@
         }
       },
       "examples": [
-        "<div className=\"grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"heading1\">Heading 1</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-3xl (30px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"heading2\">Heading 2</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-2xl (24px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"heading3\">Heading 3</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-lg (16px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text>Body</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-base (14px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text bold>Body bold</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-base (14px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text size=\"lg\">Body lg</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-lg (16px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text size=\"sm\">Body sm</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-sm (13px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text size=\"xs\">Body xs</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-xs (12px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"secondary\">Body secondary</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-base (14px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"mono\">Monospace</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-sm (13px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"mono\" size=\"lg\">\n          Monospace lg\n        </Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-base (14px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"mono-secondary\">Monospace secondary</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-sm (13px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"success\">Success</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-base (14px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"error\">Error</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-base (14px)</p>\n      </div>\n    </div>",
-        "<div className=\"w-64 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n      <Text truncate>\n        This is a long piece of text that will be truncated with an ellipsis\n        when it overflows its container.\n      </Text>\n    </div>"
+        "<div className=\"grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"heading1\" as=\"h1\">\n          Heading 1\n        </Text>\n        <Text variant=\"mono-secondary\">text-3xl (30px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"heading2\" as=\"h2\">\n          Heading 2\n        </Text>\n        <Text variant=\"mono-secondary\">text-2xl (24px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"heading3\" as=\"h3\">\n          Heading 3\n        </Text>\n        <Text variant=\"mono-secondary\">text-lg (16px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text>Body</Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text bold>Body bold</Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text size=\"lg\">Body lg</Text>\n        <Text variant=\"mono-secondary\">text-lg (16px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text size=\"sm\">Body sm</Text>\n        <Text variant=\"mono-secondary\">text-sm (13px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text size=\"xs\">Body xs</Text>\n        <Text variant=\"mono-secondary\">text-xs (12px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"secondary\">Body secondary</Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"mono\">Monospace</Text>\n        <Text variant=\"mono-secondary\">text-sm (13px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"mono\" size=\"lg\">\n          Monospace lg\n        </Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"mono-secondary\">Monospace secondary</Text>\n        <Text variant=\"mono-secondary\">text-sm (13px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"success\">Success</Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"error\">Error</Text>\n        <Text variant=\"mono-secondary\">text-base (14px)</Text>\n      </div>\n    </div>",
+        "<div className=\"w-64 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n      <Text truncate>\n        This is a long piece of text that will be truncated with an ellipsis\n        when it overflows its container.\n      </Text>\n    </div>"
       ],
       "colors": [
         "text-kumo-danger",
@@ -5179,6 +5917,7 @@
         "ring-kumo-danger",
         "ring-kumo-hairline",
         "ring-kumo-info",
+        "ring-kumo-line",
         "ring-kumo-success",
         "ring-kumo-warning",
         "text-kumo-danger",
@@ -5258,11 +5997,11 @@
         }
       },
       "examples": [
-        "<TooltipProvider>\n      <Tooltip content=\"Add new item\" asChild>\n        <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add new item\" />\n      </Tooltip>\n    </TooltipProvider>",
-        "<TooltipProvider>\n      <Tooltip content=\"Add\" asChild>\n        <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n      </Tooltip>\n    </TooltipProvider>",
-        "<TooltipProvider>\n      <div className=\"flex gap-2\">\n        <Tooltip content=\"Add\" asChild>\n          <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n        </Tooltip>\n        <Tooltip content=\"Change language\" asChild>\n          <Button\n            shape=\"square\"\n            icon={TranslateIcon}\n            aria-label=\"Change language\"\n          />\n        </Tooltip>\n      </div>\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <Tooltip\n        content=\"Add new item\"\n        render={\n          <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add new item\" />\n        }\n      />\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <Tooltip\n        content=\"Add\"\n        render={<Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />}\n      />\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <div className=\"flex gap-2\">\n        <Tooltip\n          content=\"Add\"\n          render={<Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />}\n        />\n        <Tooltip\n          content=\"Change language\"\n          render={\n            <Button\n              shape=\"square\"\n              icon={TranslateIcon}\n              aria-label=\"Change language\"\n            />\n          }\n        />\n      </div>\n    </TooltipProvider>",
         "<TooltipProvider>\n      <Tooltip\n        content=\"Click to learn more\"\n        className=\"inline-flex items-center gap-1.5 rounded-full bg-kumo-brand px-3 py-1.5 text-sm font-medium text-white shadow-md transition-transform hover:scale-105 active:scale-95\"\n      >\n        <Info className=\"size-4\" />\n        <span>Help</span>\n      </Tooltip>\n    </TooltipProvider>",
-        "<TooltipProvider>\n      <div className=\"flex gap-4\">\n        <Tooltip content=\"Opens after 1 second\" delay={1000} asChild>\n          <Button variant=\"secondary\">1s open delay</Button>\n        </Tooltip>\n        <Tooltip\n          content=\"Stays open 500ms after leaving\"\n          closeDelay={500}\n          asChild\n        >\n          <Button variant=\"secondary\">500ms close delay</Button>\n        </Tooltip>\n        <Tooltip\n          content=\"Instant open, stays 1s\"\n          delay={0}\n          closeDelay={1000}\n          asChild\n        >\n          <Button variant=\"secondary\">Instant + 1s close</Button>\n        </Tooltip>\n      </div>\n    </TooltipProvider>"
+        "<TooltipProvider>\n      <div className=\"flex gap-4\">\n        <Tooltip\n          content=\"Opens after 1 second\"\n          delay={1000}\n          render={<Button variant=\"secondary\" />}\n        >\n          1s open delay\n        </Tooltip>\n        <Tooltip\n          content=\"Stays open 500ms after leaving\"\n          closeDelay={500}\n          render={<Button variant=\"secondary\" />}\n        >\n          500ms close delay\n        </Tooltip>\n        <Tooltip\n          content=\"Instant open, stays 1s\"\n          delay={0}\n          closeDelay={1000}\n          render={<Button variant=\"secondary\" />}\n        >\n          Instant + 1s close\n        </Tooltip>\n      </div>\n    </TooltipProvider>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -5519,6 +6258,18 @@
   },
   "search": {
     "byCategory": {
+      "Other": [
+        "Autocomplete",
+        "CloudflareLogo",
+        "DatePicker",
+        "Label",
+        "Link",
+        "SensitiveInput",
+        "Sidebar",
+        "Table",
+        "TableOfContents",
+        "DeleteResource"
+      ],
       "Display": [
         "Badge",
         "Breadcrumbs",
@@ -5544,20 +6295,11 @@
         "DateRangePicker",
         "Field",
         "Input",
+        "InputGroup",
         "Radio",
         "Select",
         "Switch"
       ],
-      "Other": [
-        "CloudflareLogo",
-        "DatePicker",
-        "Label",
-        "Link",
-        "SensitiveInput",
-        "Sidebar",
-        "Table",
-        "DeleteResource"
-      ],
       "Navigation": [
         "CommandPalette",
         "MenuBar",
@@ -5578,6 +6320,7 @@
       ]
     },
     "byName": [
+      "Autocomplete",
       "Badge",
       "Banner",
       "Breadcrumbs",
@@ -5598,6 +6341,7 @@
       "Field",
       "Grid",
       "Input",
+      "InputGroup",
       "Label",
       "LayerCard",
       "Link",
@@ -5615,6 +6359,7 @@
       "Surface",
       "Switch",
       "Table",
+      "TableOfContents",
       "Tabs",
       "Text",
       "Toasty",
@@ -5622,6 +6367,7 @@
     ],
     "byType": {
       "component": [
+        "Autocomplete",
         "Badge",
         "Banner",
         "Breadcrumbs",
@@ -5641,6 +6387,7 @@
         "Field",
         "Grid",
         "Input",
+        "InputGroup",
         "Label",
         "LayerCard",
         "Link",
@@ -5656,6 +6403,7 @@
         "Surface",
         "Switch",
         "Table",
+        "TableOfContents",
         "Tabs",
         "Text",
         "Toasty",