@cloudflare/kumo 1.19.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-hairline 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,6 +639,8 @@
         "bg-kumo-brand-hover",
         "bg-kumo-danger",
         "bg-kumo-tint",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
         "ring-kumo-hairline",
         "text-kumo-danger",
         "text-kumo-default",
@@ -500,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"
             }
           },
@@ -555,10 +722,6 @@
           "type": "string",
           "optional": true,
           "description": "Additional class name"
-        },
-        "onValueChange": {
-          "type": "(checked: boolean) => void",
-          "description": "Callback when checkbox value changes"
         }
       },
       "examples": [
@@ -570,13 +733,17 @@
         "<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",
         "text-kumo-danger",
         "text-kumo-default",
@@ -595,7 +762,7 @@
           "props": {
             "legend": {
               "type": "string",
-              "required": true
+              "optional": true
             },
             "children": {
               "type": "ReactNode",
@@ -630,6 +797,20 @@
               "optional": true
             }
           }
+        },
+        "Legend": {
+          "name": "Legend",
+          "description": "Legend sub-component",
+          "props": {
+            "children": {
+              "type": "ReactNode",
+              "required": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
         }
       },
       "styling": {
@@ -740,8 +921,10 @@
       ],
       "colors": [
         "bg-kumo-base",
-        "border-kumo-hairline",
+        "border-kumo-line",
         "outline-kumo-fill",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
         "text-kumo-default"
       ],
       "styling": {
@@ -2040,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",
@@ -2069,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",
@@ -2176,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>"
@@ -2318,6 +2550,7 @@
         "<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 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": [
@@ -2325,6 +2558,7 @@
         "bg-kumo-elevated",
         "bg-kumo-overlay",
         "bg-kumo-warning",
+        "ring-kumo-brand",
         "ring-kumo-hairline",
         "text-kumo-default",
         "text-kumo-strong",
@@ -2433,6 +2667,7 @@
         "bg-kumo-fill",
         "bg-kumo-interact",
         "bg-kumo-overlay",
+        "ring-kumo-focus",
         "text-kumo-default",
         "text-kumo-inverse",
         "text-kumo-strong",
@@ -2675,6 +2910,8 @@
         "bg-kumo-hairline",
         "bg-kumo-overlay",
         "bg-kumo-tint",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
         "ring-kumo-line",
         "text-kumo-danger",
         "text-kumo-default"
@@ -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"
@@ -3103,7 +3340,8 @@
       "colors": [
         "bg-kumo-control",
         "ring-kumo-danger",
-        "ring-kumo-hairline",
+        "ring-kumo-focus",
+        "ring-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"
       ],
@@ -3158,40 +3396,206 @@
         }
       }
     },
-    "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,
-          "description": "Additional CSS classes merged via `cn()`."
+          "optional": true
         },
-        "htmlFor": {
+        "id": {
           "type": "string",
-          "optional": true,
-          "description": "The id of the form element this label is associated with"
+          "optional": true
         },
-        "asContent": {
-          "type": "boolean",
+        "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": {
+          "type": "string",
+          "optional": true,
+          "description": "The id of the form element this label is associated with"
+        },
+        "asContent": {
+          "type": "boolean",
           "optional": true,
           "description": "When true, only renders the inline content (indicators, tooltip) without the outer label element with font styling. Useful when composed inside another label element that already provides the text styling."
         }
@@ -3219,7 +3623,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",
@@ -3387,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": [
@@ -3480,9 +3884,10 @@
       ],
       "colors": [
         "bg-kumo-base",
-        "bg-kumo-elevated",
         "bg-kumo-recessed",
         "border-kumo-recessed",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
         "ring-kumo-line"
       ],
       "styling": {
@@ -3805,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",
@@ -3873,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"
@@ -3899,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": [
@@ -3908,8 +4317,11 @@
         "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",
         "text-kumo-default",
         "text-kumo-subtle"
@@ -3926,7 +4338,7 @@
           "props": {
             "legend": {
               "type": "string",
-              "required": true
+              "optional": true
             },
             "children": {
               "type": "ReactNode",
@@ -3957,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": {
@@ -3977,6 +4385,20 @@
               "optional": true
             }
           }
+        },
+        "Legend": {
+          "name": "Legend",
+          "description": "Legend sub-component",
+          "props": {
+            "children": {
+              "type": "ReactNode",
+              "required": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
         }
       }
     },
@@ -4089,9 +4511,12 @@
       ],
       "colors": [
         "bg-kumo-base",
+        "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",
@@ -4125,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,
@@ -4150,8 +4575,8 @@
           }
         },
         "popup": {
-          "background": "color-secondary",
-          "ring": "color-border",
+          "background": "bg-kumo-elevated",
+          "ring": "border-kumo-line",
           "borderRadius": 8,
           "padding": 6
         },
@@ -4292,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"
       ]
@@ -4407,6 +4833,7 @@
         "bg-kumo-recessed",
         "bg-kumo-tint",
         "border-kumo-hairline",
+        "ring-kumo-brand",
         "ring-kumo-hairline",
         "text-kumo-default",
         "text-kumo-strong",
@@ -4466,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",
@@ -4561,7 +5128,12 @@
         "MenuChevron": {
           "name": "MenuChevron",
           "description": "MenuChevron sub-component",
-          "props": {}
+          "props": {
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
         },
         "Collapsible": {
           "name": "Collapsible",
@@ -4603,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",
@@ -4750,11 +5322,15 @@
         "<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-hairline",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
         "ring-kumo-hairline",
         "text-kumo-danger",
         "text-kumo-default",
@@ -4772,7 +5348,7 @@
           "props": {
             "legend": {
               "type": "string",
-              "required": true
+              "optional": true
             },
             "children": {
               "type": "ReactNode",
@@ -4799,6 +5375,20 @@
               "optional": true
             }
           }
+        },
+        "Legend": {
+          "name": "Legend",
+          "description": "Legend sub-component",
+          "props": {
+            "children": {
+              "type": "ReactNode",
+              "required": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
         }
       }
     },
@@ -4865,13 +5455,13 @@
       },
       "examples": [
         "<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              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>",
+        "<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              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>",
+        "<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              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>"
+        "<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",
@@ -4879,6 +5469,7 @@
         "bg-kumo-hairline",
         "bg-kumo-tint",
         "border-kumo-fill",
+        "ring-kumo-brand",
         "text-kumo-default",
         "text-kumo-strong"
       ],
@@ -4962,14 +5553,14 @@
         "<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=\"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\">\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.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": [
-        "bg-kumo-brand",
-        "bg-kumo-line",
-        "bg-kumo-tint",
+        "border-kumo-brand",
+        "border-kumo-hairline",
+        "border-kumo-line",
         "text-kumo-default",
         "text-kumo-subtle"
       ],
@@ -4987,12 +5578,30 @@
         "Item": {
           "name": "Item",
           "description": "Item sub-component",
-          "props": {}
+          "props": {
+            "active": {
+              "type": "boolean",
+              "optional": true
+            }
+          }
         },
         "Group": {
           "name": "Group",
           "description": "Group sub-component",
-          "props": {}
+          "props": {
+            "label": {
+              "type": "string",
+              "required": true
+            },
+            "href": {
+              "type": "string",
+              "optional": true
+            },
+            "active": {
+              "type": "boolean",
+              "optional": true
+            }
+          }
         }
       }
     },
@@ -5067,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",
@@ -5178,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",
@@ -5189,7 +5823,7 @@
         }
       },
       "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-hairline bg-kumo-base p-4\">\n        <Text variant=\"heading1\">Heading 1</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\">Heading 2</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\">Heading 3</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=\"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": [
@@ -5624,6 +6258,18 @@
   },
   "search": {
     "byCategory": {
+      "Other": [
+        "Autocomplete",
+        "CloudflareLogo",
+        "DatePicker",
+        "Label",
+        "Link",
+        "SensitiveInput",
+        "Sidebar",
+        "Table",
+        "TableOfContents",
+        "DeleteResource"
+      ],
       "Display": [
         "Badge",
         "Breadcrumbs",
@@ -5649,21 +6295,11 @@
         "DateRangePicker",
         "Field",
         "Input",
+        "InputGroup",
         "Radio",
         "Select",
         "Switch"
       ],
-      "Other": [
-        "CloudflareLogo",
-        "DatePicker",
-        "Label",
-        "Link",
-        "SensitiveInput",
-        "Sidebar",
-        "Table",
-        "TableOfContents",
-        "DeleteResource"
-      ],
       "Navigation": [
         "CommandPalette",
         "MenuBar",
@@ -5684,6 +6320,7 @@
       ]
     },
     "byName": [
+      "Autocomplete",
       "Badge",
       "Banner",
       "Breadcrumbs",
@@ -5704,6 +6341,7 @@
       "Field",
       "Grid",
       "Input",
+      "InputGroup",
       "Label",
       "LayerCard",
       "Link",
@@ -5729,6 +6367,7 @@
     ],
     "byType": {
       "component": [
+        "Autocomplete",
         "Badge",
         "Banner",
         "Breadcrumbs",
@@ -5748,6 +6387,7 @@
         "Field",
         "Grid",
         "Input",
+        "InputGroup",
         "Label",
         "LayerCard",
         "Link",