@cloudflare/kumo 1.17.0 → 1.19.0

package/ai/component-registry.json

@@ -11,77 +11,65 @@
         "variant": {
           "type": "enum",
           "optional": true,
-          "description": "Color variant of the badge.\n- `\"red\"` / `\"red-subtle\"` — Red badge\n- `\"orange\"` / `\"orange-subtle\"` — Orange badge\n- `\"yellow\"` / `\"yellow-subtle\"` — Yellow badge\n- `\"green\"` / `\"green-subtle\"` — Green badge (emerald scale)\n- `\"teal\"` / `\"teal-subtle\"` — Teal badge\n- `\"blue\"` / `\"blue-subtle\"` — Blue badge\n- `\"neutral\"` / `\"neutral-subtle\"` — Neutral badge\n- `\"inverted\"` — Inverted badge (near-black, white in dark mode)\n- `\"outline\"` — Bordered badge with transparent background\n- `\"beta\"` — Dashed-border badge for beta/experimental features\n- `\"primary\"` — **Deprecated.** Use `\"inverted\"` instead.\n- `\"secondary\"` — **Deprecated.** Use `\"neutral\"` instead.\n- `\"destructive\"` — **Deprecated.** Use `\"red\"` instead.\n- `\"success\"` — **Deprecated.** Use `\"green\"` instead.",
+          "description": "Color variant of the badge. Recommended semantic variants:\n- `\"primary\"` — Primary badge\n- `\"secondary\"` — Secondary badge\n- `\"error\"` — Error badge\n- `\"warning\"` — Warning badge\n- `\"success\"` — Success badge\n- `\"info\"` — Info badge\n\nAdditional token variants:\n- `\"red\"`, `\"orange\"`, `\"green\"`, `\"teal\"`, `\"blue\"`, `\"purple\"`, `\"neutral\"`\n- `\"teal-subtle\"`, `\"neutral-subtle\"`\n- `\"inverted\"`\n- `\"outline\"` — Bordered badge with transparent background\n- `\"beta\"` — Dashed-border badge for beta/experimental features",
           "values": [
+            "primary",
+            "secondary",
+            "error",
+            "warning",
+            "success",
+            "destructive",
+            "info",
+            "beta",
+            "outline",
             "red",
-            "red-subtle",
-            "orange",
-            "orange-subtle",
-            "yellow",
-            "yellow-subtle",
             "green",
-            "green-subtle",
+            "neutral",
+            "orange",
+            "purple",
             "teal",
             "teal-subtle",
-            "blue",
-            "blue-subtle",
-            "neutral",
-            "neutral-subtle",
-            "inverted",
-            "outline",
-            "beta",
-            "primary",
-            "secondary",
-            "destructive",
-            "success"
+            "blue"
           ],
           "descriptions": {
+            "primary": "Primary badge",
+            "secondary": "Secondary badge",
+            "error": "Error badge",
+            "warning": "Warning badge",
+            "success": "Success badge",
+            "destructive": "Deprecated. Use red instead.",
+            "info": "Info badge",
+            "beta": "Indicates beta or experimental features",
+            "outline": "Bordered badge with transparent background",
             "red": "Red badge",
-            "red-subtle": "Subtle red badge",
-            "orange": "Orange badge",
-            "orange-subtle": "Subtle orange badge",
-            "yellow": "Yellow badge",
-            "yellow-subtle": "Subtle yellow badge",
             "green": "Green badge",
-            "green-subtle": "Subtle green badge",
+            "neutral": "Neutral badge",
+            "orange": "Orange badge",
+            "purple": "Purple badge",
             "teal": "Teal badge",
             "teal-subtle": "Subtle teal badge",
-            "blue": "Blue badge",
-            "blue-subtle": "Subtle blue badge",
-            "neutral": "Neutral badge",
-            "neutral-subtle": "Subtle neutral badge",
-            "inverted": "Inverted badge",
-            "outline": "Bordered badge with transparent background",
-            "beta": "Indicates beta or experimental features",
-            "primary": "Deprecated. Use inverted instead.",
-            "secondary": "Deprecated. Use neutral instead.",
-            "destructive": "Deprecated. Use red instead.",
-            "success": "Deprecated. Use green instead."
+            "blue": "Blue badge"
           },
           "classes": {
+            "primary": "bg-kumo-badge-inverted text-kumo-badge-inverted",
+            "secondary": "bg-kumo-fill text-kumo-badge-neutral-subtle",
+            "error": "bg-kumo-danger-tint/60 text-kumo-danger",
+            "warning": "bg-kumo-warning-tint/70 text-kumo-warning",
+            "success": "bg-kumo-success-tint/70 text-kumo-success",
+            "destructive": "bg-kumo-badge-red text-white",
+            "info": "bg-kumo-info-tint/70 text-kumo-info",
+            "beta": "border border-dashed border-kumo-brand bg-transparent text-kumo-link",
+            "outline": "border border-kumo-fill bg-transparent text-kumo-default",
             "red": "bg-kumo-badge-red text-white",
-            "red-subtle": "bg-kumo-badge-red-subtle text-kumo-badge-red-subtle",
-            "orange": "bg-kumo-badge-orange text-white",
-            "orange-subtle": "bg-kumo-badge-orange-subtle text-kumo-badge-orange-subtle",
-            "yellow": "bg-kumo-badge-yellow text-white",
-            "yellow-subtle": "bg-kumo-badge-yellow-subtle text-kumo-badge-yellow-subtle",
             "green": "bg-kumo-badge-green text-white",
-            "green-subtle": "bg-kumo-badge-green-subtle text-kumo-badge-green-subtle",
+            "neutral": "bg-kumo-badge-neutral text-white",
+            "orange": "bg-kumo-badge-orange text-black",
+            "purple": "bg-kumo-badge-purple text-white",
             "teal": "bg-kumo-badge-teal text-white",
             "teal-subtle": "bg-kumo-badge-teal-subtle text-kumo-badge-teal-subtle",
-            "blue": "bg-kumo-badge-blue text-white",
-            "blue-subtle": "bg-kumo-badge-blue-subtle text-kumo-badge-blue-subtle",
-            "neutral": "bg-kumo-badge-neutral text-white",
-            "neutral-subtle": "bg-kumo-fill text-kumo-badge-neutral-subtle",
-            "inverted": "bg-kumo-badge-inverted text-kumo-badge-inverted",
-            "outline": "border border-kumo-fill bg-transparent text-kumo-default",
-            "beta": "border border-dashed border-kumo-brand bg-transparent text-kumo-link",
-            "primary": "bg-kumo-badge-inverted text-kumo-badge-inverted",
-            "secondary": "bg-kumo-badge-neutral text-white",
-            "destructive": "bg-kumo-badge-red text-white",
-            "success": "bg-kumo-badge-green text-white"
+            "blue": "bg-kumo-badge-blue text-white"
           },
-          "default": "neutral"
+          "default": "primary"
         },
         "className": {
           "type": "string",
@@ -95,54 +83,36 @@
         }
       },
       "examples": [
-        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"red\">Red</Badge>\n      <Badge variant=\"orange\">Orange</Badge>\n      <Badge variant=\"yellow\">Yellow</Badge>\n      <Badge variant=\"green\">Green</Badge>\n      <Badge variant=\"teal\">Teal</Badge>\n      <Badge variant=\"blue\">Blue</Badge>\n      <Badge variant=\"neutral\">Neutral</Badge>\n      <Badge variant=\"inverted\">Inverted</Badge>\n      <Badge variant=\"outline\">Outline</Badge>\n      <Badge variant=\"beta\">Beta</Badge>\n      <Badge variant=\"red-subtle\">Red subtle</Badge>\n      <Badge variant=\"orange-subtle\">Orange subtle</Badge>\n      <Badge variant=\"yellow-subtle\">Yellow subtle</Badge>\n      <Badge variant=\"green-subtle\">Green subtle</Badge>\n      <Badge variant=\"teal-subtle\">Teal subtle</Badge>\n      <Badge variant=\"blue-subtle\">Blue subtle</Badge>\n      <Badge variant=\"neutral-subtle\">Neutral subtle</Badge>\n    </div>",
-        "<Badge variant=\"red\">Red</Badge>",
-        "<Badge variant=\"red-subtle\">Red subtle</Badge>",
-        "<Badge variant=\"orange\">Orange</Badge>",
-        "<Badge variant=\"orange-subtle\">Orange subtle</Badge>",
-        "<Badge variant=\"yellow\">Yellow</Badge>",
-        "<Badge variant=\"yellow-subtle\">Yellow subtle</Badge>",
-        "<Badge variant=\"green\">Green</Badge>",
-        "<Badge variant=\"green-subtle\">Green subtle</Badge>",
-        "<Badge variant=\"teal\">Teal</Badge>",
-        "<Badge variant=\"teal-subtle\">Teal subtle</Badge>",
-        "<Badge variant=\"blue\">Blue</Badge>",
-        "<Badge variant=\"blue-subtle\">Blue subtle</Badge>",
-        "<Badge variant=\"neutral\">Neutral</Badge>",
-        "<Badge variant=\"neutral-subtle\">Neutral subtle</Badge>",
-        "<Badge variant=\"inverted\">Inverted</Badge>",
-        "<Badge variant=\"outline\">Outline</Badge>",
-        "<Badge variant=\"beta\">Beta</Badge>",
-        "<p className=\"flex items-center gap-2\">\n      Workers\n      <Badge variant=\"blue\">New</Badge>\n    </p>"
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"primary\">Primary</Badge>\n      <Badge variant=\"secondary\">Secondary</Badge>\n      <Badge variant=\"error\">Error</Badge>\n      <Badge variant=\"success\">Success</Badge>\n      <Badge variant=\"warning\">Warning</Badge>\n      <Badge variant=\"info\">Info</Badge>\n      <Badge variant=\"outline\">Outline</Badge>\n      <Badge variant=\"beta\">Beta</Badge>\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"neutral\">Neutral</Badge>\n      <Badge variant=\"red\">Red</Badge>\n      <Badge variant=\"orange\">Orange</Badge>\n      <Badge variant=\"green\">Green</Badge>\n      <Badge variant=\"teal\">Teal</Badge>\n      <Badge variant=\"blue\">Blue</Badge>\n      <Badge variant=\"purple\">Purple</Badge>\n    </div>",
+        "<p className=\"flex items-center gap-2\">\n      Workers\n      <Badge variant=\"secondary\">New</Badge>\n    </p>"
       ],
       "colors": [
         "bg-kumo-badge-blue",
-        "bg-kumo-badge-blue-subtle",
         "bg-kumo-badge-green",
-        "bg-kumo-badge-green-subtle",
         "bg-kumo-badge-inverted",
         "bg-kumo-badge-neutral",
         "bg-kumo-badge-orange",
-        "bg-kumo-badge-orange-subtle",
+        "bg-kumo-badge-purple",
         "bg-kumo-badge-red",
-        "bg-kumo-badge-red-subtle",
         "bg-kumo-badge-teal",
         "bg-kumo-badge-teal-subtle",
-        "bg-kumo-badge-yellow",
-        "bg-kumo-badge-yellow-subtle",
+        "bg-kumo-danger-tint",
         "bg-kumo-fill",
+        "bg-kumo-info-tint",
+        "bg-kumo-success-tint",
+        "bg-kumo-warning-tint",
         "border-kumo-brand",
         "border-kumo-fill",
-        "text-kumo-badge-blue-subtle",
-        "text-kumo-badge-green-subtle",
         "text-kumo-badge-inverted",
         "text-kumo-badge-neutral-subtle",
-        "text-kumo-badge-orange-subtle",
-        "text-kumo-badge-red-subtle",
         "text-kumo-badge-teal-subtle",
-        "text-kumo-badge-yellow-subtle",
+        "text-kumo-danger",
         "text-kumo-default",
-        "text-kumo-link"
+        "text-kumo-info",
+        "text-kumo-link",
+        "text-kumo-success",
+        "text-kumo-warning"
       ],
       "baseStyles": "inline-flex w-fit flex-none shrink-0 items-center justify-self-start rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap"
     },
@@ -196,9 +166,9 @@
             "error": "Error banner for critical issues"
           },
           "classes": {
-            "default": "bg-kumo-info/10 border-kumo-info/30 text-kumo-info selection:bg-kumo-info-tint",
-            "alert": "bg-kumo-warning/10 border-kumo-warning/30 text-kumo-warning selection:bg-kumo-warning-tint",
-            "error": "bg-kumo-danger/10 border-kumo-danger/30 text-kumo-danger selection:bg-kumo-danger-tint"
+            "default": "bg-kumo-info-tint/30 border-kumo-info/50 text-kumo-info selection:bg-kumo-info",
+            "alert": "bg-kumo-warning-tint/15 border-kumo-warning/50 text-kumo-warning selection:bg-kumo-warning",
+            "error": "bg-kumo-danger-tint/15 border-kumo-danger/50 text-kumo-danger selection:bg-kumo-danger"
           },
           "default": "default"
         },
@@ -399,11 +369,11 @@
           },
           "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-ring data-[state=open]:bg-kumo-base",
+            "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",
             "ghost": "text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit",
             "destructive": "bg-kumo-danger !text-white hover:bg-kumo-danger/70",
-            "secondary-destructive": "bg-kumo-base !text-kumo-danger ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-line data-[state=open]:bg-kumo-base",
-            "outline": "bg-transparent text-kumo-default ring ring-kumo-ring"
+            "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",
+            "outline": "bg-transparent text-kumo-default ring ring-kumo-hairline"
           },
           "stateClasses": {
             "primary": {
@@ -504,8 +474,7 @@
         "bg-kumo-brand-hover",
         "bg-kumo-danger",
         "bg-kumo-tint",
-        "ring-kumo-line",
-        "ring-kumo-ring",
+        "ring-kumo-hairline",
         "text-kumo-danger",
         "text-kumo-default",
         "text-kumo-subtle"
@@ -531,13 +500,13 @@
             "error": "Error state for validation failures"
           },
           "classes": {
-            "default": "[&:focus-within>span]:ring-kumo-ring [&:hover>span]:ring-kumo-ring",
+            "default": "[&:focus-within>span]:ring-kumo-hairline [&:hover>span]:ring-kumo-hairline",
             "error": "[&>span]:ring-kumo-danger"
           },
           "stateClasses": {
             "default": {
-              "focus": "[&:focus-within>span]:ring-kumo-ring",
-              "hover": "[&:hover>span]:ring-kumo-ring"
+              "focus": "[&:focus-within>span]:ring-kumo-hairline",
+              "hover": "[&:hover>span]:ring-kumo-hairline"
             }
           },
           "default": "default"
@@ -608,8 +577,7 @@
         "bg-kumo-contrast",
         "ring-kumo-contrast",
         "ring-kumo-danger",
-        "ring-kumo-line",
-        "ring-kumo-ring",
+        "ring-kumo-hairline",
         "text-kumo-danger",
         "text-kumo-default",
         "text-kumo-inverse",
@@ -684,10 +652,10 @@
             "ring-kumo-danger"
           ],
           "hover": [
-            "ring-kumo-ring"
+            "ring-kumo-hairline"
           ],
           "focus": [
-            "ring-kumo-ring"
+            "ring-kumo-hairline"
           ],
           "disabled": [
             "opacity-50",
@@ -772,7 +740,7 @@
       ],
       "colors": [
         "bg-kumo-base",
-        "border-kumo-line",
+        "border-kumo-hairline",
         "outline-kumo-fill",
         "text-kumo-default"
       ],
@@ -1975,11 +1943,11 @@
         "<div className=\"flex items-center gap-4\">\n      <DropdownMenu>\n        <DropdownMenu.Trigger>\n          <button\n            type=\"button\"\n            className=\"flex items-center gap-2 rounded-lg bg-black px-4 py-3 text-white transition-opacity hover:opacity-80\"\n          >\n            <CloudflareLogo variant=\"glyph\" color=\"white\" className=\"w-8\" />\n            <span className=\"font-medium\">Logo</span>\n          </button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content>\n          <DropdownMenu.Item\n            icon={CloudIcon}\n            onSelect={() =>\n              copyToClipboard(\n                generateCloudflareLogoSvg({ variant: \"glyph\" }),\n                \"glyph\",\n              )\n            }\n          >\n            {copied === \"glyph\" ? \"Copied!\" : \"Copy logo as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={CodeIcon}\n            onSelect={() =>\n              copyToClipboard(\n                generateCloudflareLogoSvg({ variant: \"full\" }),\n                \"full\",\n              )\n            }\n          >\n            {copied === \"full\" ? \"Copied!\" : \"Copy full logo as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={DownloadSimpleIcon}\n            onSelect={() =>\n              window.open(\n                \"https://www.cloudflare.com/press-kit/\",\n                \"_blank\",\n                \"noopener\",\n              )\n            }\n          >\n            Download brand assets\n          </DropdownMenu.Item>\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item\n            icon={ArrowSquareOutIcon}\n            onSelect={() =>\n              window.open(\n                \"https://www.cloudflare.com/brand-assets/\",\n                \"_blank\",\n                \"noopener\",\n              )\n            }\n          >\n            Visit brand guidelines\n          </DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      <span className=\"text-sm text-kumo-subtle\">\n        Click to open the brand assets menu\n      </span>\n    </div>",
         "<PoweredByCloudflare />",
         "<div className=\"flex flex-wrap items-center gap-4\">\n      <PoweredByCloudflare />\n      <PoweredByCloudflare color=\"black\" />\n      <div className=\"rounded-lg bg-black p-3\">\n        <PoweredByCloudflare color=\"white\" />\n      </div>\n    </div>",
-        "<footer className=\"flex w-full items-center justify-between rounded-lg border border-kumo-line bg-kumo-elevated px-6 py-4\">\n      <span className=\"text-sm text-kumo-subtle\">\n        &copy; 2026 Your Company. All rights reserved.\n      </span>\n      <PoweredByCloudflare />\n    </footer>"
+        "<footer className=\"flex w-full items-center justify-between rounded-lg border border-kumo-hairline bg-kumo-elevated px-6 py-4\">\n      <span className=\"text-sm text-kumo-subtle\">\n        &copy; 2026 Your Company. All rights reserved.\n      </span>\n      <PoweredByCloudflare />\n    </footer>"
       ],
       "colors": [
         "bg-kumo-base",
-        "ring-kumo-line",
+        "ring-kumo-hairline",
         "text-kumo-default"
       ]
     },
@@ -2217,7 +2185,8 @@
         "bg-kumo-fill-hover",
         "bg-kumo-overlay",
         "bg-kumo-tint",
-        "border-kumo-line",
+        "border-kumo-hairline",
+        "ring-kumo-hairline",
         "ring-kumo-line",
         "text-kumo-default",
         "text-kumo-strong",
@@ -2346,17 +2315,17 @@
         }
       },
       "examples": [
-        "<div className=\"flex flex-col items-start gap-4\">\n      <Button onClick={() => setOpen(true)}>Open Command Palette</Button>\n      {selectedItem && (\n        <p className=\"text-sm text-kumo-subtle\">\n          Last selected:{\" \"}\n          <span className=\"text-kumo-default\">{selectedItem}</span>\n        </p>\n      )}\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={filteredGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        onSelect={(item, { newTab }) => {\n          console.log(\"Selected:\", item.title, newTab ? \"(new tab)\" : \"\");\n          handleSelect(item);\n        }}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"Type a command or search...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(group: CommandGroup) => (\n              <CommandPalette.Group key={group.id} items={group.items}>\n                <CommandPalette.GroupLabel>\n                  {group.label}\n                </CommandPalette.GroupLabel>\n                <CommandPalette.Items>\n                  {(item: CommandItem) => (\n                    <CommandPalette.Item\n                      key={item.id}\n                      value={item}\n                      onClick={() => handleSelect(item)}\n                    >\n                      <span className=\"flex items-center gap-3\">\n                        {item.icon && (\n                          <span className=\"text-kumo-subtle\">{item.icon}</span>\n                        )}\n                        <span>{item.title}</span>\n                      </span>\n                    </CommandPalette.Item>\n                  )}\n                </CommandPalette.Items>\n              </CommandPalette.Group>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No commands found</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>Navigate</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↵\n            </kbd>\n            <span>Select</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>",
+        "<div className=\"flex flex-col items-start gap-4\">\n      <Button onClick={() => setOpen(true)}>Open Command Palette</Button>\n      {selectedItem && (\n        <p className=\"text-sm text-kumo-subtle\">\n          Last selected:{\" \"}\n          <span className=\"text-kumo-default\">{selectedItem}</span>\n        </p>\n      )}\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={filteredGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        onSelect={(item, { newTab }) => {\n          console.log(\"Selected:\", item.title, newTab ? \"(new tab)\" : \"\");\n          handleSelect(item);\n        }}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"Type a command or search...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(group: CommandGroup) => (\n              <CommandPalette.Group key={group.id} items={group.items}>\n                <CommandPalette.GroupLabel>\n                  {group.label}\n                </CommandPalette.GroupLabel>\n                <CommandPalette.Items>\n                  {(item: CommandItem) => (\n                    <CommandPalette.Item\n                      key={item.id}\n                      value={item}\n                      onClick={() => handleSelect(item)}\n                    >\n                      <span className=\"flex items-center gap-3\">\n                        {item.icon && (\n                          <span className=\"text-kumo-subtle\">{item.icon}</span>\n                        )}\n                        <span>{item.title}</span>\n                      </span>\n                    </CommandPalette.Item>\n                  )}\n                </CommandPalette.Items>\n              </CommandPalette.Group>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No commands found</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>Navigate</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↵\n            </kbd>\n            <span>Select</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>",
         "<div>\n      <Button onClick={() => setOpen(true)}>Open Simple Palette</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={simpleItems}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(item) => item.title}\n        onSelect={(item) => {\n          console.log(\"Selected:\", item.title);\n          setOpen(false);\n        }}\n        getSelectableItems={(items) => items}\n      >\n        <CommandPalette.Input placeholder=\"Search actions...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(item: SimpleItem) => (\n              <CommandPalette.Item\n                key={item.id}\n                value={item}\n                onClick={() => {\n                  console.log(\"Clicked:\", item.title);\n                  setOpen(false);\n                }}\n              >\n                {item.title}\n              </CommandPalette.Item>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No actions found</CommandPalette.Empty>\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>",
         "<div>\n      <Button onClick={handleOpen}>Open with Loading</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={loading ? [] : filteredGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"Search...\" />\n        <CommandPalette.List>\n          {loading ? (\n            <CommandPalette.Loading />\n          ) : (\n            <>\n              <CommandPalette.Results>\n                {(group: CommandGroup) => (\n                  <CommandPalette.Group key={group.id} items={group.items}>\n                    <CommandPalette.GroupLabel>\n                      {group.label}\n                    </CommandPalette.GroupLabel>\n                    <CommandPalette.Items>\n                      {(item: CommandItem) => (\n                        <CommandPalette.Item\n                          key={item.id}\n                          value={item}\n                          onClick={() => setOpen(false)}\n                        >\n                          <span className=\"flex items-center gap-3\">\n                            {item.icon && (\n                              <span className=\"text-kumo-subtle\">\n                                {item.icon}\n                              </span>\n                            )}\n                            <span>{item.title}</span>\n                          </span>\n                        </CommandPalette.Item>\n                      )}\n                    </CommandPalette.Items>\n                  </CommandPalette.Group>\n                )}\n              </CommandPalette.Results>\n              <CommandPalette.Empty>No results found</CommandPalette.Empty>\n            </>\n          )}\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>",
-        "<div>\n      <Button onClick={() => setOpen(true)}>Open with ResultItem</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={searchResults}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(item) => item.title}\n        getSelectableItems={(items) => items}\n      >\n        <CommandPalette.Input placeholder=\"Search documentation...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(item: SearchResult) => (\n              <CommandPalette.ResultItem\n                key={item.id}\n                value={item}\n                title={item.title}\n                breadcrumbs={item.breadcrumbs}\n                icon={item.icon}\n                onClick={() => {\n                  console.log(\"Navigate to:\", item.title);\n                  setOpen(false);\n                }}\n              />\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No pages found</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>Navigate</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ⌘↵\n            </kbd>\n            <span>Open in new tab</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>"
+        "<div>\n      <Button onClick={() => setOpen(true)}>Open with ResultItem</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={searchResults}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(item) => item.title}\n        getSelectableItems={(items) => items}\n      >\n        <CommandPalette.Input placeholder=\"Search documentation...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(item: SearchResult) => (\n              <CommandPalette.ResultItem\n                key={item.id}\n                value={item}\n                title={item.title}\n                breadcrumbs={item.breadcrumbs}\n                icon={item.icon}\n                onClick={() => {\n                  console.log(\"Navigate to:\", item.title);\n                  setOpen(false);\n                }}\n              />\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No pages found</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>Navigate</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-hairline bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ⌘↵\n            </kbd>\n            <span>Open in new tab</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>"
       ],
       "colors": [
         "bg-kumo-base",
         "bg-kumo-elevated",
         "bg-kumo-overlay",
         "bg-kumo-warning",
-        "ring-kumo-line",
+        "ring-kumo-hairline",
         "text-kumo-default",
         "text-kumo-strong",
         "text-kumo-subtle"
@@ -2379,13 +2348,13 @@
         }
       },
       "examples": [
-        "<div className=\"flex flex-col gap-4\">\n      <DatePicker mode=\"single\" selected={date} onChange={d => {\n        if (d) {\n          setDate(d);\n        }\n      }} />\n      <p className=\"text-sm text-kumo-subtle\">\n        Selected: {date ? date.toLocaleDateString() : \"None\"}\n      </p>\n    </div>",
+        "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"single\"\n        selected={date}\n        onChange={(d) => {\n          if (d) {\n            setDate(d);\n          }\n        }}\n      />\n      <p className=\"text-sm text-kumo-subtle\">\n        Selected: {date ? date.toLocaleDateString() : \"None\"}\n      </p>\n    </div>",
         "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"multiple\"\n        selected={dates}\n        onChange={setDates}\n        max={5}\n      />\n      <p className=\"text-sm text-kumo-subtle\">\n        Selected: {dates?.length ?? 0} date(s)\n      </p>\n    </div>",
         "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"range\"\n        selected={range}\n        onChange={setRange}\n        numberOfMonths={2}\n      />\n      <p className=\"text-sm text-kumo-subtle\">\n        Range:{\" \"}\n        {range?.from\n          ? `${range.from.toLocaleDateString()} - ${range.to?.toLocaleDateString() ?? \"...\"}`\n          : \"None\"}\n      </p>\n    </div>",
         "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"range\"\n        selected={range}\n        onChange={setRange}\n        min={3}\n        max={7}\n        footer={\n          <span className=\"text-xs text-kumo-subtle\">Select 3-7 nights</span>\n        }\n      />\n    </div>",
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\" icon={CalendarDotsIcon}>\n          {date ? date.toLocaleDateString() : \"Pick a date\"}\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker mode=\"single\" selected={date} onChange={setDate} />\n      </Popover.Content>\n    </Popover>",
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\" icon={CalendarDotsIcon}>\n          {formatRange()}\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker\n          mode=\"range\"\n          selected={range}\n          onChange={setRange}\n          numberOfMonths={2}\n        />\n      </Popover.Content>\n    </Popover>",
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button variant=\"outline\" icon={CalendarDotsIcon}>\n          {formatRange()}\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"p-0\">\n        <div className=\"flex\">\n          <div className=\"flex flex-col gap-1 border-r border-kumo-line p-2 text-sm\">\n            {presets.map((preset) => {\n              const isActive = isPresetActive(preset);\n              return (\n                <button\n                  key={preset.label}\n                  type=\"button\"\n                  onClick={() => handlePresetClick(preset)}\n                  className={`rounded-md px-3 py-1.5 text-left whitespace-nowrap ${isActive\n                    ? \"bg-kumo-bg-inverse text-kumo-text-inverse\"\n                    : \"text-kumo-strong hover:bg-kumo-control\"\n                    }`}\n                >\n                  {preset.label}\n                </button>\n              );\n            })}\n          </div>\n          <div className=\"p-3\">\n            <DatePicker\n              mode=\"range\"\n              selected={range}\n              onChange={setRange}\n              month={month}\n              onMonthChange={setMonth}\n              numberOfMonths={2}\n            />\n          </div>\n        </div>\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {date ? date.toLocaleDateString() : \"Pick a date\"}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker mode=\"single\" selected={date} onChange={setDate} />\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {formatRange()}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker\n          mode=\"range\"\n          selected={range}\n          onChange={setRange}\n          numberOfMonths={2}\n        />\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {formatRange()}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-0\">\n        <div className=\"flex\">\n          <div className=\"flex flex-col gap-1 border-r border-kumo-hairline p-2 text-sm\">\n            {presets.map((preset) => {\n              const isActive = isPresetActive(preset);\n              return (\n                <button\n                  key={preset.label}\n                  type=\"button\"\n                  onClick={() => handlePresetClick(preset)}\n                  className={`rounded-md px-3 py-1.5 text-left whitespace-nowrap ${\n                    isActive\n                      ? \"bg-kumo-bg-inverse text-kumo-text-inverse\"\n                      : \"text-kumo-strong hover:bg-kumo-control\"\n                  }`}\n                >\n                  {preset.label}\n                </button>\n              );\n            })}\n          </div>\n          <div className=\"p-3\">\n            <DatePicker\n              mode=\"range\"\n              selected={range}\n              onChange={setRange}\n              month={month}\n              onMonthChange={setMonth}\n              numberOfMonths={2}\n            />\n          </div>\n        </div>\n      </Popover.Content>\n    </Popover>",
         "<DatePicker\n      mode=\"multiple\"\n      selected={dates}\n      onChange={setDates}\n      max={maxDays}\n      disabled={unavailableDates}\n      fixedWeeks\n      footer={\n        <p className=\"text-xs text-kumo-subtle pt-2 w-full\">\n          {selectedCount}/{maxDays} days selected. Grayed dates are unavailable.\n        </p>\n      }\n    />"
       ],
       "colors": [
@@ -2572,6 +2541,7 @@
       "colors": [
         "bg-kumo-base",
         "bg-kumo-recessed",
+        "ring-kumo-line",
         "text-kumo-default"
       ],
       "subComponents": {
@@ -2702,7 +2672,7 @@
       "colors": [
         "bg-kumo-control",
         "bg-kumo-danger",
-        "bg-kumo-line",
+        "bg-kumo-hairline",
         "bg-kumo-overlay",
         "bg-kumo-tint",
         "ring-kumo-line",
@@ -3034,7 +3004,7 @@
         "<Grid variant=\"4up\" gap=\"base\" mobileDivider>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>Item 1</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">Has divider on mobile</Text>\n          </div>\n        </Surface>\n      </GridItem>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>Item 2</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">Has divider on mobile</Text>\n          </div>\n        </Surface>\n      </GridItem>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>Item 3</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">Has divider on mobile</Text>\n          </div>\n        </Surface>\n      </GridItem>\n      <GridItem>\n        <Surface className=\"rounded-lg p-4\">\n          <Text bold>Item 4</Text>\n          <div className=\"mt-1\">\n            <Text variant=\"secondary\">Has divider on mobile</Text>\n          </div>\n        </Surface>\n      </GridItem>\n    </Grid>"
       ],
       "colors": [
-        "border-kumo-line"
+        "border-kumo-hairline"
       ]
     },
     "Input": {
@@ -3101,12 +3071,12 @@
             "error": "Error state for validation failures"
           },
           "classes": {
-            "default": "focus:ring-kumo-ring",
+            "default": "focus:ring-kumo-hairline",
             "error": "!ring-kumo-danger focus:ring-kumo-danger"
           },
           "stateClasses": {
             "default": {
-              "focus": "focus:ring-kumo-ring"
+              "focus": "focus:ring-kumo-hairline"
             },
             "error": {
               "focus": "focus:ring-kumo-danger"
@@ -3118,21 +3088,22 @@
       "examples": [
         "<Input\n      label=\"Email\"\n      placeholder=\"you@example.com\"\n      description=\"We'll never share your email\"\n    />",
         "<Input\n      label=\"Username\"\n      placeholder=\"Choose a username\"\n      description=\"3-20 characters, alphanumeric only\"\n    />",
-        "<Input\n      label=\"Email\"\n      placeholder=\"you@example.com\"\n      value=\"invalid-email\"\n      variant=\"error\"\n      error=\"Please enter a valid email address\"\n    />",
-        "<Input\n      label=\"Password\"\n      type=\"password\"\n      value=\"short\"\n      variant=\"error\"\n      error={{\n        message: \"Password must be at least 8 characters\",\n        match: \"tooShort\",\n      }}\n      minLength={8}\n    />",
+        "<Input\n      label=\"Email\"\n      placeholder=\"you@example.com\"\n      value=\"invalid-email\"\n      error=\"Please enter a valid email address\"\n    />",
+        "<Input\n      label=\"Password\"\n      type=\"password\"\n      value=\"short\"\n      error={{\n        message: \"Password must be at least 8 characters\",\n        match: \"tooShort\",\n      }}\n      minLength={8}\n    />",
         "<div className=\"flex flex-col gap-4\">\n      <Input size=\"xs\" label=\"Extra Small\" placeholder=\"Extra small input\" />\n      <Input size=\"sm\" label=\"Small\" placeholder=\"Small input\" />\n      <Input label=\"Base\" placeholder=\"Base input (default)\" />\n      <Input size=\"lg\" label=\"Large\" placeholder=\"Large input\" />\n    </div>",
         "<Input label=\"Disabled field\" placeholder=\"Cannot edit\" disabled />",
         "<Input placeholder=\"Search...\" aria-label=\"Search products\" />",
         "<div className=\"flex flex-col gap-4\">\n      <Input type=\"email\" label=\"Email\" placeholder=\"you@example.com\" />\n      <Input type=\"password\" label=\"Password\" placeholder=\"••••••••\" />\n      <Input type=\"number\" label=\"Age\" placeholder=\"18\" />\n      <Input type=\"tel\" label=\"Phone\" placeholder=\"+1 (555) 000-0000\" />\n    </div>",
         "<Input\n      label=\"Phone Number\"\n      required={false}\n      placeholder=\"+1 (555) 000-0000\"\n    />",
         "<Input\n      label=\"API Key\"\n      labelTooltip=\"Find this in your dashboard under Settings > API Keys\"\n      placeholder=\"sk_live_...\"\n    />",
-        "<Input\n      label={\n        <span>\n          Email for <strong>billing</strong>\n        </span>\n      }\n      required\n      placeholder=\"billing@company.com\"\n      type=\"email\"\n    />"
+        "<Input\n      label={\n        <span>\n          Email for <strong>billing</strong>\n        </span>\n      }\n      required\n      placeholder=\"billing@company.com\"\n      type=\"email\"\n    />",
+        "<Input\n      label=\"With onChange\"\n      placeholder=\"Type something...\"\n      description={value ? `Value: ${value}` : \"Uses e.target.value\"}\n      value={value}\n      onChange={(e) => setValue(e.target.value)}\n    />",
+        "<Input\n      label=\"With onValueChange\"\n      placeholder=\"Type something...\"\n      description={value ? `Value: ${value}` : \"Receives the value directly\"}\n      value={value}\n      onValueChange={(v) => setValue(v)}\n    />"
       ],
       "colors": [
         "bg-kumo-control",
         "ring-kumo-danger",
-        "ring-kumo-line",
-        "ring-kumo-ring",
+        "ring-kumo-hairline",
         "text-kumo-default",
         "text-kumo-subtle"
       ],
@@ -3245,25 +3216,43 @@
       "importPath": "@cloudflare/kumo",
       "category": "Display",
       "props": {
+        "render": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Allows you to replace the component’s HTML element with a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+        },
         "children": {
           "type": "ReactNode",
           "optional": true
         },
         "className": {
           "type": "string",
-          "optional": true,
-          "description": "Additional CSS classes merged via `cn()`."
+          "optional": true
+        },
+        "id": {
+          "type": "string",
+          "optional": true
+        },
+        "lang": {
+          "type": "string",
+          "optional": true
+        },
+        "title": {
+          "type": "string",
+          "optional": true
         }
       },
       "examples": [
         "<LayerCard>\n      <LayerCard.Secondary className=\"flex items-center justify-between\">\n        <div>Next Steps</div>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          shape=\"square\"\n          aria-label=\"Go to next steps\"\n        >\n          <ArrowRightIcon size={16} />\n        </Button>\n      </LayerCard.Secondary>\n\n      <LayerCard.Primary>Get started with Kumo</LayerCard.Primary>\n    </LayerCard>",
         "<LayerCard className=\"w-[250px]\">\n      <LayerCard.Secondary>Getting Started</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <p className=\"text-sm text-kumo-subtle\">\n          Quick start guide for new users\n        </p>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard className=\"w-[250px] p-4\">\n      <p className=\"text-sm text-kumo-subtle\">Quick start guide for new users</p>\n    </LayerCard>",
         "<div className=\"flex gap-4\">\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>Components</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">Browse all components</p>\n        </LayerCard.Primary>\n      </LayerCard>\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>Examples</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">View code examples</p>\n        </LayerCard.Primary>\n      </LayerCard>\n    </div>"
       ],
       "colors": [
         "bg-kumo-base",
         "bg-kumo-elevated",
         "ring-kumo-fill",
+        "ring-kumo-hairline",
         "ring-kumo-line",
         "text-kumo-strong"
       ],
@@ -3491,9 +3480,10 @@
       ],
       "colors": [
         "bg-kumo-base",
+        "bg-kumo-elevated",
         "bg-kumo-recessed",
-        "border-kumo-fill",
-        "border-kumo-recessed"
+        "border-kumo-recessed",
+        "ring-kumo-line"
       ],
       "styling": {
         "container": {
@@ -3600,6 +3590,11 @@
           "optional": true,
           "description": "Additional CSS classes for the container"
         },
+        "labels": {
+          "type": "PaginationLabels",
+          "optional": true,
+          "description": "Labels for internationalization of aria-labels. All labels have English defaults.\n\nFor visible text like \"Showing X of Y\", use render props on sub-components:\n- `Pagination.Info` children for the info text\n- `Pagination.PageSize` label prop for the \"Per page:\" text"
+        },
         "children": {
           "type": "ReactNode",
           "optional": true,
@@ -3633,10 +3628,13 @@
         "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n      />\n      <Pagination.Controls />\n    </Pagination>",
         "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={200}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n        options={[10, 20, 50]}\n      />\n      <Pagination.Controls />\n    </Pagination>",
         "<Pagination page={page} setPage={setPage} perPage={25} totalCount={100}>\n      <Pagination.Info>\n        {({ page, totalCount }) =>\n          `Page ${page} of ${Math.ceil((totalCount ?? 1) / 25)}`\n        }\n      </Pagination.Info>\n      <Pagination.Controls />\n    </Pagination>",
-        "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <div className=\"flex items-center gap-2\">\n        <Pagination.Controls />\n        <Pagination.Separator />\n        <Pagination.PageSize\n          value={perPage}\n          onChange={(size) => {\n            setPerPage(size);\n            setPage(1);\n          }}\n        />\n      </div>\n    </Pagination>"
+        "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n      />\n      <Pagination.Controls pageSelector=\"dropdown\" />\n    </Pagination>",
+        "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <div className=\"flex items-center gap-2\">\n        <Pagination.Controls />\n        <Pagination.Separator />\n        <Pagination.PageSize\n          value={perPage}\n          onChange={(size) => {\n            setPerPage(size);\n            setPage(1);\n          }}\n        />\n      </div>\n    </Pagination>",
+        "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={10}\n      totalCount={100}\n      labels={{\n        firstPage: \"Première page\",\n        previousPage: \"Page précédente\",\n        nextPage: \"Page suivante\",\n        lastPage: \"Dernière page\",\n        pageNumber: \"Numéro de page\",\n        pageSize: \"Taille de page\",\n      }}\n    >\n      <Pagination.Info>\n        {({ pageShowingRange, totalCount }) => (\n          <>\n            Affichage de{\" \"}\n            <span className=\"tabular-nums\">{pageShowingRange}</span> sur{\" \"}\n            <span className=\"tabular-nums\">{totalCount}</span>\n          </>\n        )}\n      </Pagination.Info>\n      <Pagination.Controls />\n    </Pagination>"
       ],
       "colors": [
-        "border-kumo-line",
+        "border-kumo-hairline",
+        "ring-kumo-hairline",
         "text-kumo-strong"
       ],
       "subComponents": {
@@ -3678,6 +3676,10 @@
               "type": "number[]",
               "optional": true
             },
+            "page": {
+              "type": "\"",
+              "required": true
+            },
             "label": {
               "type": "ReactNode",
               "optional": true
@@ -3692,6 +3694,14 @@
           "name": "Controls",
           "description": "Controls sub-component",
           "props": {
+            "Note": {
+              "type": "** `\"dropdown\"` renders an option for every page",
+              "required": true
+            },
+            "pageSelector": {
+              "type": "\"input\" | \"dropdown\"",
+              "optional": true
+            },
             "className": {
               "type": "string",
               "optional": true
@@ -3747,12 +3757,13 @@
         }
       },
       "examples": [
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button shape=\"square\" icon={BellIcon} aria-label=\"Notifications\" />\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Notifications</Popover.Title>\n        <Popover.Description>\n          You are all caught up. Good job!\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button>Open Popover</Button>\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Popover Title</Popover.Title>\n        <Popover.Description>\n          This is a basic popover with a title and description.\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button>Open Settings</Button>\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Settings</Popover.Title>\n        <Popover.Description>\n          Configure your preferences below.\n        </Popover.Description>\n        <div className=\"mt-3\">\n          <Popover.Close asChild>\n            <Button variant=\"secondary\" size=\"sm\">\n              Close\n            </Button>\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>",
-        "<div className=\"flex flex-wrap gap-4\">\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Bottom</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"bottom\">\n          <Popover.Title>Bottom</Popover.Title>\n          <Popover.Description>\n            Popover on bottom (default).\n          </Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Top</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"top\">\n          <Popover.Title>Top</Popover.Title>\n          <Popover.Description>Popover on top.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Left</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"left\">\n          <Popover.Title>Left</Popover.Title>\n          <Popover.Description>Popover on left.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Right</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"right\">\n          <Popover.Title>Right</Popover.Title>\n          <Popover.Description>Popover on right.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n    </div>",
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button>User Profile</Button>\n      </Popover.Trigger>\n      <Popover.Content className=\"w-64\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"size-10 rounded-full bg-kumo-recessed\" />\n          <div>\n            <Popover.Title>Jane Doe</Popover.Title>\n            <p className=\"text-sm text-kumo-subtle\">jane@example.com</p>\n          </div>\n        </div>\n        <div className=\"mt-3 flex gap-2 border-t border-kumo-line pt-3\">\n          <Button variant=\"secondary\" size=\"sm\" className=\"flex-1\">\n            Profile\n          </Button>\n          <Popover.Close asChild>\n            <Button variant=\"ghost\" size=\"sm\" className=\"flex-1\">\n              Sign Out\n            </Button>\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>",
-        "<Popover>\n      <Popover.Trigger openOnHover delay={200} asChild>\n        <Button variant=\"secondary\">Hover Me</Button>\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Hover Triggered</Popover.Title>\n        <Popover.Description>\n          This popover opens on hover with a 200ms delay. It can still contain\n          interactive content like buttons and links.\n        </Popover.Description>\n        <div className=\"mt-3\">\n          <Popover.Close asChild>\n            <Button variant=\"secondary\" size=\"sm\">\n              Got it\n            </Button>\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>"
+        "<Popover>\n      <Popover.Trigger\n        render={\n          <Button shape=\"square\" icon={BellIcon} aria-label=\"Notifications\" />\n        }\n      />\n      <Popover.Content>\n        <Popover.Title>Notifications</Popover.Title>\n        <Popover.Description>\n          You are all caught up. Good job!\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger render={<Button />}>Open Popover</Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Popover Title</Popover.Title>\n        <Popover.Description>\n          This is a basic popover with a title and description.\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger render={<Button />}>Open Settings</Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Settings</Popover.Title>\n        <Popover.Description>\n          Configure your preferences below.\n        </Popover.Description>\n        <div className=\"mt-3\">\n          <Popover.Close render={<Button variant=\"secondary\" size=\"sm\" />}>\n            Close\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>",
+        "<div className=\"flex flex-wrap gap-4\">\n      <Popover>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          Bottom\n        </Popover.Trigger>\n        <Popover.Content side=\"bottom\">\n          <Popover.Title>Bottom</Popover.Title>\n          <Popover.Description>\n            Popover on bottom (default).\n          </Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          Top\n        </Popover.Trigger>\n        <Popover.Content side=\"top\">\n          <Popover.Title>Top</Popover.Title>\n          <Popover.Description>Popover on top.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          Left\n        </Popover.Trigger>\n        <Popover.Content side=\"left\">\n          <Popover.Title>Left</Popover.Title>\n          <Popover.Description>Popover on left.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger render={<Button variant=\"secondary\" />}>\n          Right\n        </Popover.Trigger>\n        <Popover.Content side=\"right\">\n          <Popover.Title>Right</Popover.Title>\n          <Popover.Description>Popover on right.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n    </div>",
+        "<Popover>\n      <Popover.Trigger render={<Button />}>User Profile</Popover.Trigger>\n      <Popover.Content className=\"w-64\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"size-10 rounded-full bg-kumo-recessed\" />\n          <div>\n            <Popover.Title>Jane Doe</Popover.Title>\n            <p className=\"text-sm text-kumo-subtle\">jane@example.com</p>\n          </div>\n        </div>\n        <div className=\"mt-3 flex gap-2 border-t border-kumo-hairline pt-3\">\n          <Button variant=\"secondary\" size=\"sm\" className=\"flex-1\">\n            Profile\n          </Button>\n          <Popover.Close\n            render={<Button variant=\"ghost\" size=\"sm\" className=\"flex-1\" />}\n          >\n            Sign Out\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger\n        openOnHover\n        delay={200}\n        render={<Button variant=\"secondary\" />}\n      >\n        Hover Me\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Hover Triggered</Popover.Title>\n        <Popover.Description>\n          This popover opens on hover with a 200ms delay. It can still contain\n          interactive content like buttons and links.\n        </Popover.Description>\n        <div className=\"mt-3\">\n          <Popover.Close render={<Button variant=\"secondary\" size=\"sm\" />}>\n            Got it\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>",
+        "<div className=\"w-full\">\n      <div className=\"overflow-hidden rounded-lg border border-kumo-hairline\">\n        <table className=\"w-full text-sm\">\n          <thead className=\"bg-kumo-elevated\">\n            <tr>\n              <th className=\"px-4 py-2 text-left font-medium\">Name</th>\n              <th className=\"px-4 py-2 text-left font-medium\">Status</th>\n              <th className=\"w-12 px-4 py-2\"></th>\n            </tr>\n          </thead>\n          <tbody className=\"divide-y divide-kumo-hairline\">\n            {rows.map((row) => (\n              <tr\n                key={row.id}\n                ref={(el) => {\n                  if (el) rowRefs.current.set(row.id, el);\n                }}\n                className={\n                  selectedRow === row.id ? \"bg-kumo-recessed\" : \"bg-kumo-base\"\n                }\n              >\n                <td className=\"px-4 py-2 font-mono\">{row.name}</td>\n                <td className=\"px-4 py-2 text-kumo-subtle\">{row.status}</td>\n                <td className=\"px-4 py-2\">\n                  <Button\n                    size=\"xs\"\n                    variant=\"ghost\"\n                    shape=\"square\"\n                    icon={DotsThree}\n                    aria-label={`Actions for ${row.name}`}\n                    onClick={() => handleEdit(row.id)}\n                  />\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      <Popover\n        open={!!selectedRow}\n        onOpenChange={(open) => !open && setSelectedRow(null)}\n      >\n        <Popover.Content\n          side=\"left\"\n          anchor={\n            anchorRect ? { getBoundingClientRect: () => anchorRect } : undefined\n          }\n        >\n          <Popover.Title>\n            Edit {rows.find((r) => r.id === selectedRow)?.name}\n          </Popover.Title>\n          <Popover.Description>\n            The popover anchors to the selected row, not the icon button.\n          </Popover.Description>\n          <div className=\"mt-3\">\n            <Popover.Close render={<Button size=\"sm\" variant=\"secondary\" />}>\n              Close\n            </Popover.Close>\n          </div>\n        </Popover.Content>\n      </Popover>\n    </div>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -3830,7 +3841,7 @@
             "card": "Choice card appearance with border, padding, and highlighted selection state"
           },
           "classes": {
-            "card": "rounded-lg border border-kumo-ring bg-kumo-base p-3 transition-colors hover:bg-kumo-tint has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint"
+            "card": "rounded-lg border border-kumo-hairline bg-kumo-base p-3 transition-colors hover:bg-kumo-tint has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint"
           },
           "stateClasses": {
             "card": {
@@ -3895,11 +3906,10 @@
         "bg-kumo-contrast",
         "bg-kumo-tint",
         "border-kumo-danger",
+        "border-kumo-hairline",
         "border-kumo-interact",
-        "border-kumo-ring",
         "ring-kumo-danger",
-        "ring-kumo-line",
-        "ring-kumo-ring",
+        "ring-kumo-hairline",
         "text-kumo-danger",
         "text-kumo-default",
         "text-kumo-subtle"
@@ -3982,6 +3992,18 @@
           "optional": true,
           "description": "Additional CSS classes merged via `cn()`."
         },
+        "size": {
+          "type": "enum",
+          "optional": true,
+          "description": "Size of the select trigger. Matches Input component sizes.",
+          "values": [
+            "xs",
+            "sm",
+            "base",
+            "lg"
+          ],
+          "default": "base"
+        },
         "label": {
           "type": "ReactNode",
           "optional": true,
@@ -4047,6 +4069,7 @@
       },
       "examples": [
         "<Select\n      label=\"Favorite Fruit\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"apple\")}\n      items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n    />",
+        "<div className=\"grid gap-4\">\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">xs</span>\n        <Select\n          aria-label=\"Select size xs\"\n          size=\"xs\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">sm</span>\n        <Select\n          aria-label=\"Select size sm\"\n          size=\"sm\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">base</span>\n        <Select\n          aria-label=\"Select size base\"\n          size=\"base\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"w-10 text-sm text-kumo-subtle\">lg</span>\n        <Select\n          aria-label=\"Select size lg\"\n          size=\"lg\"\n          className=\"w-[200px]\"\n          placeholder=\"Choose...\"\n          items={{ a: \"Option A\", b: \"Option B\" }}\n        />\n      </div>\n    </div>",
         "<Select\n      aria-label=\"Select a fruit\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"apple\")}\n      items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n    />",
         "<Select\n      label=\"Issue Type\"\n      description=\"Choose the category that best describes your issue\"\n      error={!value ? \"Please select an issue type\" : undefined}\n      className=\"w-[280px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    />",
         "<Select\n      label=\"Category\"\n      placeholder=\"Choose a category...\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    />",
@@ -4057,14 +4080,22 @@
         "<Select\n      label=\"Visible Columns\"\n      className=\"w-[250px]\"\n      multiple\n      renderValue={(value) => {\n        if (value.length > 3) {\n          return (\n            <span className=\"line-clamp-1\">\n              {value.slice(0, 2).join(\", \") + ` and ${value.length - 2} more`}\n            </span>\n          );\n        }\n        return <span>{value.join(\", \")}</span>;\n      }}\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      <Select.Option value=\"Name\">Name</Select.Option>\n      <Select.Option value=\"Location\">Location</Select.Option>\n      <Select.Option value=\"Size\">Size</Select.Option>\n      <Select.Option value=\"Read\">Read</Select.Option>\n      <Select.Option value=\"Write\">Write</Select.Option>\n      <Select.Option value=\"CreatedAt\">Created At</Select.Option>\n    </Select>",
         "<Select\n      label=\"Compliance Frameworks\"\n      className=\"w-[280px]\"\n      multiple\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      <Select.Option value=\"European Union Privacy Regulation\">\n        European Union Privacy Regulation\n      </Select.Option>\n      <Select.Option value=\"California Consumer Protection Act\">\n        California Consumer Protection Act\n      </Select.Option>\n      <Select.Option value=\"Health Insurance Portability Act\">\n        Health Insurance Portability Act\n      </Select.Option>\n      <Select.Option value=\"Payment Card Industry Standard\">\n        Payment Card Industry Standard\n      </Select.Option>\n    </Select>",
         "<Select\n      label=\"Issue Types\"\n      className=\"w-[220px]\"\n      multiple\n      renderValue={(selected) => (\n        <span className=\"flex items-center gap-2\">\n          <span>Issue Types</span>\n          {selected.length > 0 && (\n            <Badge variant=\"neutral\">{selected.length}</Badge>\n          )}\n        </span>\n      )}\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      {allOptions.map((option) => (\n        <Select.Option key={option.value} value={option.value}>\n          {option.label}\n        </Select.Option>\n      ))}\n    </Select>",
-        "<Select\n      label=\"Author\"\n      description=\"Select the primary author for this document\"\n      className=\"w-[200px]\"\n      onValueChange={(v) => setValue(v as (typeof authors)[0] | null)}\n      value={value}\n      isItemEqualToValue={(item, value) => item?.id === value?.id}\n      renderValue={(author) => {\n        return author?.name ?? \"Select an author\";\n      }}\n    >\n      {authors.map((author) => (\n        <Select.Option key={author.id} value={author}>\n          <div className=\"flex w-[300px] items-center justify-between gap-2\">\n            <Text>{author.name}</Text>\n            <Text variant=\"secondary\">{author.title}</Text>\n          </div>\n        </Select.Option>\n      ))}\n    </Select>"
+        "<Select\n      label=\"Author\"\n      description=\"Select the primary author for this document\"\n      placeholder=\"Select an author\"\n      className=\"w-[200px]\"\n      onValueChange={(v) => setValue(v as (typeof authors)[0] | null)}\n      value={value}\n      isItemEqualToValue={(item, value) => item?.id === value?.id}\n      renderValue={(author) => author.name}\n    >\n      {authors.map((author) => (\n        <Select.Option key={author.id} value={author}>\n          <div className=\"flex w-[300px] items-center justify-between gap-2\">\n            <Text>{author.name}</Text>\n            <Text variant=\"secondary\">{author.title}</Text>\n          </div>\n        </Select.Option>\n      ))}\n    </Select>",
+        "<Select\n      label=\"Deployment Region\"\n      placeholder=\"Choose a region...\"\n      className=\"w-[250px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as Region | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      {regions.map((region) => (\n        <Select.Option\n          key={region.value}\n          value={region}\n          disabled={region.disabled}\n        >\n          {region.label}\n        </Select.Option>\n      ))}\n    </Select>",
+        "<Select\n      label=\"Plan\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        free: \"Free\",\n        pro: \"Pro\",\n        business: { label: \"Business\", disabled: true },\n        enterprise: { label: \"Enterprise\", disabled: true },\n      }}\n    />",
+        "<Select\n      label=\"Food\"\n      placeholder=\"Pick a food...\"\n      className=\"w-[220px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as Food | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      <Select.Group>\n        <Select.GroupLabel>Fruits</Select.GroupLabel>\n        {foods.fruits.map((food) => (\n          <Select.Option key={food.value} value={food}>\n            {food.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n      <Select.Separator />\n      <Select.Group>\n        <Select.GroupLabel>Vegetables</Select.GroupLabel>\n        {foods.vegetables.map((food) => (\n          <Select.Option key={food.value} value={food}>\n            {food.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n    </Select>",
+        "<Select\n      label=\"Server Region\"\n      placeholder=\"Select a region...\"\n      className=\"w-[260px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as ServerRegion | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      <Select.Group>\n        <Select.GroupLabel>Available</Select.GroupLabel>\n        {serverRegions.available.map((region) => (\n          <Select.Option key={region.value} value={region}>\n            {region.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n      <Select.Separator />\n      <Select.Group>\n        <Select.GroupLabel>Unavailable</Select.GroupLabel>\n        {serverRegions.unavailable.map((region) => (\n          <Select.Option key={region.value} value={region} disabled>\n            {region.label}\n          </Select.Option>\n        ))}\n      </Select.Group>\n    </Select>",
+        "<Select\n      label=\"Long List Select\"\n      description=\"Tests scrolling behavior with many options\"\n      placeholder=\"Choose an option...\"\n      className=\"w-[220px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as LongListItem | null)}\n      isItemEqualToValue={(item, val) => item.value === val.value}\n    >\n      {longListItems.map((item) => (\n        <Select.Option key={item.value} value={item}>\n          {item.label}\n        </Select.Option>\n      ))}\n    </Select>"
       ],
       "colors": [
         "bg-kumo-base",
+        "bg-kumo-hairline",
         "bg-kumo-tint",
-        "ring-kumo-ring",
+        "ring-kumo-hairline",
+        "ring-kumo-line",
         "text-kumo-danger",
         "text-kumo-default",
+        "text-kumo-placeholder",
         "text-kumo-subtle"
       ],
       "subComponents": {
@@ -4072,6 +4103,21 @@
           "name": "Option",
           "description": "Option sub-component",
           "props": {}
+        },
+        "Group": {
+          "name": "Group",
+          "description": "Group sub-component",
+          "props": {}
+        },
+        "GroupLabel": {
+          "name": "GroupLabel",
+          "description": "GroupLabel sub-component",
+          "props": {}
+        },
+        "Separator": {
+          "name": "Separator",
+          "description": "Separator sub-component",
+          "props": {}
         }
       },
       "styling": {
@@ -4246,8 +4292,8 @@
       "colors": [
         "bg-kumo-brand",
         "bg-kumo-control",
-        "outline-kumo-ring",
-        "ring-kumo-ring",
+        "outline-kumo-hairline",
+        "ring-kumo-hairline",
         "text-kumo-default",
         "text-kumo-subtle"
       ]
@@ -4356,13 +4402,12 @@
       "colors": [
         "bg-kumo-base",
         "bg-kumo-brand",
-        "bg-kumo-line",
+        "bg-kumo-hairline",
         "bg-kumo-overlay",
         "bg-kumo-recessed",
         "bg-kumo-tint",
-        "border-kumo-line",
-        "ring-kumo-line",
-        "ring-kumo-ring",
+        "border-kumo-hairline",
+        "ring-kumo-hairline",
         "text-kumo-default",
         "text-kumo-strong",
         "text-kumo-subtle"
@@ -4547,7 +4592,7 @@
     "Surface": {
       "name": "Surface",
       "type": "component",
-      "description": "Polymorphic container with consistent background, shadow, and border styling.  Use the `render` prop to change the underlying element: ```tsx <Surface render={<section />} className=\"rounded-lg p-4\">Card content</Surface> ```",
+      "description": "Surface component",
       "importPath": "@cloudflare/kumo",
       "category": "Layout",
       "props": {
@@ -4581,15 +4626,8 @@
           "optional": true
         }
       },
-      "examples": [
-        "<Surface className=\"rounded-lg p-6\">\n      <Text size=\"lg\" bold>\n        Surface Component\n      </Text>\n      <div className=\"mt-2\">\n        <Text variant=\"secondary\">\n          A container with consistent elevation and border styling.\n        </Text>\n      </div>\n    </Surface>",
-        "<div className=\"flex flex-col gap-4\">\n      <Surface render={<section />} className=\"rounded-lg p-4\">\n        <Text bold>As section element</Text>\n      </Surface>\n      <Surface render={<article />} className=\"rounded-lg p-4\">\n        <Text bold>As article element</Text>\n      </Surface>\n      <Surface render={<aside />} className=\"rounded-lg p-4\">\n        <Text bold>As aside element</Text>\n      </Surface>\n    </div>",
-        "<Surface className=\"rounded-lg p-6\">\n      <Text bold>Outer Surface</Text>\n      <Surface className=\"mt-4 rounded-md bg-kumo-elevated p-4\">\n        <Text variant=\"secondary\">Nested Surface</Text>\n      </Surface>\n    </Surface>"
-      ],
-      "colors": [
-        "bg-kumo-base",
-        "ring-kumo-line"
-      ]
+      "examples": [],
+      "colors": []
     },
     "Switch": {
       "name": "Switch",
@@ -4710,13 +4748,14 @@
         "<Switch label=\"Disabled\" checked={false} disabled />",
         "<Switch\n      label=\"Neutral switch\"\n      variant=\"neutral\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />",
         "<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Neutral off\"\n        variant=\"neutral\"\n        checked={false}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral on\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral disabled\"\n        variant=\"neutral\"\n        checked={false}\n        disabled\n      />\n    </div>",
-        "<div className=\"grid grid-cols-2 gap-x-8 gap-y-4\">\n      <Switch\n        label=\"Default off\"\n        checked={false}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Default on\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\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>",
+        "<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    />",
         "<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Small\"\n        size=\"sm\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Base (default)\"\n        size=\"base\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Large\"\n        size=\"lg\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n    </div>"
       ],
       "colors": [
         "bg-kumo-base",
-        "border-kumo-line",
-        "ring-kumo-line",
+        "border-kumo-hairline",
+        "ring-kumo-hairline",
         "text-kumo-danger",
         "text-kumo-default",
         "text-kumo-subtle"
@@ -4825,18 +4864,19 @@
         }
       },
       "examples": [
-        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.slice(0, 3).map((row) => (\n              <Table.Row key={row.id}>\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
-        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead\n                checked={selectedIds.size === rows.length}\n                indeterminate={\n                  selectedIds.size > 0 && selectedIds.size < rows.length\n                }\n                onValueChange={toggleAll}\n                aria-label=\"Select all rows\"\n              />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {rows.map((row) => (\n              <Table.Row key={row.id}>\n                <Table.CheckCell\n                  checked={selectedIds.has(row.id)}\n                  onValueChange={() => toggleRow(row.id)}\n                  aria-label={`Select ${row.subject}`}\n                />\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
-        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header variant=\"compact\">\n            <Table.Row>\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.slice(0, 3).map((row) => (\n              <Table.Row key={row.id}>\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
-        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead\n                checked={selectedIds.size === rows.length}\n                indeterminate={\n                  selectedIds.size > 0 && selectedIds.size < rows.length\n                }\n                onValueChange={toggleAll}\n                aria-label=\"Select all rows\"\n              />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {rows.map((row) => (\n              <Table.Row\n                key={row.id}\n                variant={selectedIds.has(row.id) ? \"selected\" : \"default\"}\n              >\n                <Table.CheckCell\n                  checked={selectedIds.has(row.id)}\n                  onValueChange={() => toggleRow(row.id)}\n                  aria-label={`Select ${row.subject}`}\n                />\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
-        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table layout=\"fixed\">\n          <colgroup>\n            <col />\n            <col className=\"w-[150px]\" />\n            <col className=\"w-[150px]\" />\n          </colgroup>\n          <Table.Header>\n            <Table.Row>\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.map((row) => (\n              <Table.Row key={row.id}>\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
-        "<LayerCard>\n      <LayerCard.Primary className=\"w-full max-w-md overflow-x-auto p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n              <Table.Head>Tags</Table.Head>\n              <Table.Head sticky=\"right\">\n                <span className=\"sr-only\">Actions</span>\n              </Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.map((row) => (\n              <Table.Row key={row.id}>\n                <Table.Cell className=\"whitespace-nowrap\">\n                  {row.subject}\n                </Table.Cell>\n                <Table.Cell className=\"whitespace-nowrap\">\n                  {row.from}\n                </Table.Cell>\n                <Table.Cell className=\"whitespace-nowrap\">\n                  {row.date}\n                </Table.Cell>\n                <Table.Cell className=\"whitespace-nowrap\">\n                  {row.tags ? (\n                    <div className=\"inline-flex gap-1\">\n                      {row.tags.map((tag) => (\n                        <Badge key={tag}>{tag}</Badge>\n                      ))}\n                    </div>\n                  ) : (\n                    \"—\"\n                  )}\n                </Table.Cell>\n                <Table.Cell sticky=\"right\" className=\"text-right\">\n                  <DropdownMenu>\n                    <DropdownMenu.Trigger\n                      render={\n                        <Button\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          shape=\"square\"\n                          aria-label=\"More options\"\n                        >\n                          <DotsThree weight=\"bold\" size={16} />\n                        </Button>\n                      }\n                    />\n                    <DropdownMenu.Content>\n                      <DropdownMenu.Item icon={Eye}>View</DropdownMenu.Item>\n                      <DropdownMenu.Item icon={PencilSimple}>\n                        Edit\n                      </DropdownMenu.Item>\n                      <DropdownMenu.Separator />\n                      <DropdownMenu.Item icon={Trash} variant=\"danger\">\n                        Delete\n                      </DropdownMenu.Item>\n                    </DropdownMenu.Content>\n                  </DropdownMenu>\n                </Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
-        "<LayerCard>\n      <LayerCard.Primary className=\"w-full overflow-x-auto p-0\">\n        <Table layout=\"fixed\">\n          <colgroup>\n            <col />{\" \"}\n            {/* Checkbox column - width handled by Table.CheckHead/CheckCell */}\n            <col />\n            <col style={{ width: \"150px\" }} />\n            <col style={{ width: \"120px\" }} />\n            <col style={{ width: \"50px\" }} />\n          </colgroup>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead\n                checked={selectedIds.size === emailData.length}\n                indeterminate={\n                  selectedIds.size > 0 && selectedIds.size < emailData.length\n                }\n                onValueChange={toggleAll}\n                aria-label=\"Select all rows\"\n              />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n              <Table.Head></Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.map((row) => (\n              <Table.Row\n                key={row.id}\n                variant={selectedIds.has(row.id) ? \"selected\" : \"default\"}\n              >\n                <Table.CheckCell\n                  checked={selectedIds.has(row.id)}\n                  onValueChange={() => toggleRow(row.id)}\n                  aria-label={`Select ${row.subject}`}\n                />\n                <Table.Cell>\n                  <div className=\"flex items-center gap-2\">\n                    <EnvelopeSimple size={16} />\n                    <span className=\"truncate\">{row.subject}</span>\n                    {row.tags && (\n                      <div className=\"ml-2 inline-flex gap-1\">\n                        {row.tags.map((tag) => (\n                          <Badge key={tag}>{tag}</Badge>\n                        ))}\n                      </div>\n                    )}\n                  </div>\n                </Table.Cell>\n                <Table.Cell>\n                  <span className=\"truncate\">{row.from}</span>\n                </Table.Cell>\n                <Table.Cell>\n                  <span className=\"truncate\">{row.date}</span>\n                </Table.Cell>\n                <Table.Cell className=\"text-right\">\n                  <DropdownMenu>\n                    <DropdownMenu.Trigger\n                      render={\n                        <Button\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          shape=\"square\"\n                          aria-label=\"More options\"\n                        >\n                          <DotsThree weight=\"bold\" size={16} />\n                        </Button>\n                      }\n                    />\n                    <DropdownMenu.Content>\n                      <DropdownMenu.Item icon={Eye}>View</DropdownMenu.Item>\n                      <DropdownMenu.Item icon={PencilSimple}>\n                        Edit\n                      </DropdownMenu.Item>\n                      <DropdownMenu.Separator />\n                      <DropdownMenu.Item icon={Trash} variant=\"danger\">\n                        Delete\n                      </DropdownMenu.Item>\n                    </DropdownMenu.Content>\n                  </DropdownMenu>\n                </Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>"
+        "<LayerCard className=\"p-0\">\n      <Table>\n        <Table.Header>\n          <Table.Row>\n            <Table.Head>Subject</Table.Head>\n            <Table.Head>From</Table.Head>\n            <Table.Head>Date</Table.Head>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {emailData.slice(0, 3).map((row) => (\n            <Table.Row key={row.id}>\n              <Table.Cell>{row.subject}</Table.Cell>\n              <Table.Cell>{row.from}</Table.Cell>\n              <Table.Cell>{row.date}</Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table>\n    </LayerCard>",
+        "<LayerCard className=\"p-0\">\n      <Table>\n        <Table.Header>\n          <Table.Row>\n            <Table.CheckHead\n              checked={selectedIds.size === rows.length}\n              indeterminate={\n                selectedIds.size > 0 && selectedIds.size < rows.length\n              }\n              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 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 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>"
       ],
       "colors": [
         "bg-kumo-base",
         "bg-kumo-elevated",
-        "bg-kumo-ring",
+        "bg-kumo-hairline",
         "bg-kumo-tint",
         "border-kumo-fill",
         "text-kumo-default",
@@ -4890,6 +4930,72 @@
         }
       }
     },
+    "TableOfContents": {
+      "name": "TableOfContents",
+      "type": "component",
+      "description": "TableOfContents — presentational compound component for section navigation.  Purely visual; all interaction logic (scroll tracking, active state management) is left to the consumer.",
+      "importPath": "@cloudflare/kumo",
+      "category": "Other",
+      "props": {
+        "children": {
+          "type": "ReactNode",
+          "optional": true
+        },
+        "className": {
+          "type": "string",
+          "optional": true
+        },
+        "id": {
+          "type": "string",
+          "optional": true
+        },
+        "lang": {
+          "type": "string",
+          "optional": true
+        },
+        "title": {
+          "type": "string",
+          "optional": true
+        }
+      },
+      "examples": [
+        "<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>On this page</TableOfContents.Title>\n        <TableOfContents.List>\n          {headings.map((heading) => (\n            <TableOfContents.Item\n              key={heading.text}\n              active={heading.text === \"Usage\"}\n              className=\"cursor-pointer\"\n            >\n              {heading.text}\n            </TableOfContents.Item>\n          ))}\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>",
+        "<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>On this page</TableOfContents.Title>\n        <TableOfContents.List>\n          {headings.map((heading) => (\n            <TableOfContents.Item\n              key={heading.text}\n              active={heading.text === active}\n              onClick={() => setActive(heading.text)}\n              className=\"cursor-pointer\"\n            >\n              {heading.text}\n            </TableOfContents.Item>\n          ))}\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>",
+        "<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>On this page</TableOfContents.Title>\n        <TableOfContents.List>\n          {headings.map((heading) => (\n            <TableOfContents.Item key={heading.text} className=\"cursor-pointer\">\n              {heading.text}\n            </TableOfContents.Item>\n          ))}\n        </TableOfContents.List>\n      </TableOfContents>\n    </DemoWrapper>",
+        "<DemoWrapper>\n      <TableOfContents>\n        <TableOfContents.Title>On this page</TableOfContents.Title>\n        <TableOfContents.List>\n          <TableOfContents.Item active className=\"cursor-pointer\">\n            Overview\n          </TableOfContents.Item>\n          <TableOfContents.Group label=\"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.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",
+        "text-kumo-default",
+        "text-kumo-subtle"
+      ],
+      "subComponents": {
+        "Title": {
+          "name": "Title",
+          "description": "Title sub-component",
+          "props": {}
+        },
+        "List": {
+          "name": "List",
+          "description": "List sub-component",
+          "props": {}
+        },
+        "Item": {
+          "name": "Item",
+          "description": "Item sub-component",
+          "props": {}
+        },
+        "Group": {
+          "name": "Group",
+          "description": "Group sub-component",
+          "props": {}
+        }
+      }
+    },
     "Tabs": {
       "name": "Tabs",
       "type": "component",
@@ -4960,9 +5066,9 @@
         "bg-kumo-brand",
         "bg-kumo-recessed",
         "bg-kumo-tint",
-        "border-kumo-ring",
+        "border-kumo-hairline",
+        "ring-kumo-hairline",
         "ring-kumo-line",
-        "ring-kumo-ring",
         "text-kumo-default",
         "text-kumo-strong",
         "text-kumo-subtle"
@@ -5083,8 +5189,8 @@
         }
       },
       "examples": [
-        "<div className=\"grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"heading1\">Heading 1</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-3xl (30px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"heading2\">Heading 2</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-2xl (24px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"heading3\">Heading 3</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-lg (16px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text>Body</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-base (14px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text bold>Body bold</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-base (14px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text size=\"lg\">Body lg</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-lg (16px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text size=\"sm\">Body sm</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-sm (13px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text size=\"xs\">Body xs</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-xs (12px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"secondary\">Body secondary</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-base (14px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"mono\">Monospace</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-sm (13px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"mono\" size=\"lg\">\n          Monospace lg\n        </Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-base (14px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"mono-secondary\">Monospace secondary</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-sm (13px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"success\">Success</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-base (14px)</p>\n      </div>\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n        <Text variant=\"error\">Error</Text>\n        <p className=\"font-mono text-xs text-kumo-subtle\">text-base (14px)</p>\n      </div>\n    </div>",
-        "<div className=\"w-64 rounded-lg border border-kumo-line bg-kumo-base p-4\">\n      <Text truncate>\n        This is a long piece of text that will be truncated with an ellipsis\n        when it overflows its container.\n      </Text>\n    </div>"
+        "<div className=\"grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3\">\n      <div className=\"flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n        <Text variant=\"heading1\">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=\"w-64 rounded-lg border border-kumo-hairline bg-kumo-base p-4\">\n      <Text truncate>\n        This is a long piece of text that will be truncated with an ellipsis\n        when it overflows its container.\n      </Text>\n    </div>"
       ],
       "colors": [
         "text-kumo-danger",
@@ -5168,15 +5274,16 @@
         "bg-kumo-base",
         "bg-kumo-contrast",
         "bg-kumo-control",
-        "bg-kumo-danger-tint",
+        "bg-kumo-danger",
         "bg-kumo-fill-hover",
-        "bg-kumo-info-tint",
-        "bg-kumo-success-tint",
-        "bg-kumo-warning-tint",
+        "bg-kumo-info",
+        "bg-kumo-success",
+        "bg-kumo-warning",
         "border-kumo-fill",
         "ring-kumo-danger",
+        "ring-kumo-hairline",
         "ring-kumo-info",
-        "ring-kumo-ring",
+        "ring-kumo-line",
         "ring-kumo-success",
         "ring-kumo-warning",
         "text-kumo-danger",
@@ -5193,7 +5300,7 @@
           "padding": 16,
           "borderRadius": 8,
           "background": "bg-kumo-base",
-          "border": "ring-[0.3px] ring-kumo-ring",
+          "border": "ring-[0.3px] ring-kumo-hairline",
           "shadow": "shadow-lg",
           "gap": 4
         },
@@ -5256,10 +5363,11 @@
         }
       },
       "examples": [
-        "<TooltipProvider>\n      <Tooltip content=\"Add new item\" asChild>\n        <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add new item\" />\n      </Tooltip>\n    </TooltipProvider>",
-        "<TooltipProvider>\n      <Tooltip content=\"Add\" asChild>\n        <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n      </Tooltip>\n    </TooltipProvider>",
-        "<TooltipProvider>\n      <div className=\"flex gap-2\">\n        <Tooltip content=\"Add\" asChild>\n          <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n        </Tooltip>\n        <Tooltip content=\"Change language\" asChild>\n          <Button\n            shape=\"square\"\n            icon={TranslateIcon}\n            aria-label=\"Change language\"\n          />\n        </Tooltip>\n      </div>\n    </TooltipProvider>",
-        "<TooltipProvider>\n      <Tooltip\n        content=\"Click to learn more\"\n        className=\"inline-flex items-center gap-1.5 rounded-full bg-kumo-brand px-3 py-1.5 text-sm font-medium text-white shadow-md transition-transform hover:scale-105 active:scale-95\"\n      >\n        <Info className=\"size-4\" />\n        <span>Help</span>\n      </Tooltip>\n    </TooltipProvider>"
+        "<TooltipProvider>\n      <Tooltip\n        content=\"Add new item\"\n        render={\n          <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add new item\" />\n        }\n      />\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <Tooltip\n        content=\"Add\"\n        render={<Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />}\n      />\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <div className=\"flex gap-2\">\n        <Tooltip\n          content=\"Add\"\n          render={<Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />}\n        />\n        <Tooltip\n          content=\"Change language\"\n          render={\n            <Button\n              shape=\"square\"\n              icon={TranslateIcon}\n              aria-label=\"Change language\"\n            />\n          }\n        />\n      </div>\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <Tooltip\n        content=\"Click to learn more\"\n        className=\"inline-flex items-center gap-1.5 rounded-full bg-kumo-brand px-3 py-1.5 text-sm font-medium text-white shadow-md transition-transform hover:scale-105 active:scale-95\"\n      >\n        <Info className=\"size-4\" />\n        <span>Help</span>\n      </Tooltip>\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <div className=\"flex gap-4\">\n        <Tooltip\n          content=\"Opens after 1 second\"\n          delay={1000}\n          render={<Button variant=\"secondary\" />}\n        >\n          1s open delay\n        </Tooltip>\n        <Tooltip\n          content=\"Stays open 500ms after leaving\"\n          closeDelay={500}\n          render={<Button variant=\"secondary\" />}\n        >\n          500ms close delay\n        </Tooltip>\n        <Tooltip\n          content=\"Instant open, stays 1s\"\n          delay={0}\n          closeDelay={1000}\n          render={<Button variant=\"secondary\" />}\n        >\n          Instant + 1s close\n        </Tooltip>\n      </div>\n    </TooltipProvider>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -5553,6 +5661,7 @@
         "SensitiveInput",
         "Sidebar",
         "Table",
+        "TableOfContents",
         "DeleteResource"
       ],
       "Navigation": [
@@ -5612,6 +5721,7 @@
       "Surface",
       "Switch",
       "Table",
+      "TableOfContents",
       "Tabs",
       "Text",
       "Toasty",
@@ -5653,6 +5763,7 @@
         "Surface",
         "Switch",
         "Table",
+        "TableOfContents",
         "Tabs",
         "Text",
         "Toasty",