@cloudflare/kumo 1.15.0 → 1.17.0

package/ai/component-registry.json

@@ -11,32 +11,77 @@
         "variant": {
           "type": "enum",
           "optional": true,
-          "description": "Visual style of the badge.\n- `\"primary\"` — High-emphasis badge for important labels\n- `\"secondary\"` — Subtle badge for secondary information\n- `\"destructive\"` — Error or danger state indicator\n- `\"outline\"` — Bordered badge with transparent background\n- `\"beta\"` — Dashed-border badge for beta/experimental features",
+          "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.",
           "values": [
+            "red",
+            "red-subtle",
+            "orange",
+            "orange-subtle",
+            "yellow",
+            "yellow-subtle",
+            "green",
+            "green-subtle",
+            "teal",
+            "teal-subtle",
+            "blue",
+            "blue-subtle",
+            "neutral",
+            "neutral-subtle",
+            "inverted",
+            "outline",
+            "beta",
             "primary",
             "secondary",
             "destructive",
-            "success",
-            "outline",
-            "beta"
+            "success"
           ],
           "descriptions": {
-            "primary": "Default high-emphasis badge for important labels",
-            "secondary": "Subtle badge for secondary information",
-            "destructive": "Error or danger state indicator",
-            "success": "Success or positive state indicator",
+            "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",
+            "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"
+            "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."
           },
           "classes": {
-            "primary": "bg-kumo-contrast text-kumo-inverse",
-            "secondary": "bg-kumo-fill text-kumo-default",
-            "destructive": "bg-kumo-danger text-white",
-            "success": "bg-kumo-success text-white",
+            "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",
+            "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"
+            "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"
           },
-          "default": "primary"
+          "default": "neutral"
         },
         "className": {
           "type": "string",
@@ -50,24 +95,53 @@
         }
       },
       "examples": [
-        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"primary\">Primary</Badge>\n      <Badge variant=\"secondary\">Secondary</Badge>\n      <Badge variant=\"destructive\">Destructive</Badge>\n      <Badge variant=\"success\">Success</Badge>\n      <Badge variant=\"outline\">Outline</Badge>\n      <Badge variant=\"beta\">Beta</Badge>\n    </div>",
-        "<Badge variant=\"primary\">Primary</Badge>",
-        "<Badge variant=\"secondary\">Secondary</Badge>",
-        "<Badge variant=\"destructive\">Destructive</Badge>",
-        "<Badge variant=\"success\">Success</Badge>",
+        "<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=\"beta\">Beta</Badge>\n    </p>"
+        "<p className=\"flex items-center gap-2\">\n      Workers\n      <Badge variant=\"blue\">New</Badge>\n    </p>"
       ],
       "colors": [
-        "bg-kumo-contrast",
-        "bg-kumo-danger",
+        "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-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-fill",
-        "bg-kumo-success",
         "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-default",
-        "text-kumo-inverse",
         "text-kumo-link"
       ],
       "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"
@@ -94,6 +168,11 @@
           "optional": true,
           "description": "Secondary description text displayed below the title. Use for i18n string injection."
         },
+        "action": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Action slot rendered at the trailing end of the banner (e.g. a CTA button or link). Only used in structured mode (with `title` or `description`)."
+        },
         "text": {
           "type": "string",
           "optional": true
@@ -130,13 +209,15 @@
         }
       },
       "examples": [
-        "<div className=\"space-y-3\">\n      <Banner\n        icon={<Info weight=\"fill\" />}\n        title=\"Update available\"\n        description=\"A new version is ready to install.\"\n      />\n      <Banner\n        icon={<Warning weight=\"fill\" />}\n        variant=\"alert\"\n        title=\"Session expiring\"\n        description=\"Your session will expire in 5 minutes.\"\n      />\n      <Banner\n        icon={<WarningCircle weight=\"fill\" />}\n        variant=\"error\"\n        title=\"Save failed\"\n        description=\"We couldn't save your changes. Please try again.\"\n      />\n    </div>",
+        "<div className=\"w-full space-y-3\">\n      <Banner\n        icon={<Info weight=\"fill\" />}\n        title=\"Update available\"\n        description=\"A new version is ready to install.\"\n      />\n      <Banner\n        icon={<Warning weight=\"fill\" />}\n        variant=\"alert\"\n        title=\"Session expiring\"\n        description=\"Your session will expire in 5 minutes.\"\n      />\n      <Banner\n        icon={<WarningCircle weight=\"fill\" />}\n        variant=\"error\"\n        title=\"Save failed\"\n        description=\"We couldn't save your changes. Please try again.\"\n      />\n    </div>",
         "<Banner\n      icon={<Info weight=\"fill\" />}\n      title=\"Update available\"\n      description=\"A new version is ready to install.\"\n    />",
         "<Banner\n      icon={<Warning weight=\"fill\" />}\n      variant=\"alert\"\n      title=\"Session expiring\"\n      description=\"Your session will expire in 5 minutes.\"\n    />",
         "<Banner\n      icon={<WarningCircle weight=\"fill\" />}\n      variant=\"error\"\n      title=\"Save failed\"\n      description=\"We couldn't save your changes. Please try again.\"\n    />",
         "<Banner\n      icon={<Info weight=\"fill\" />}\n      title=\"Your changes have been saved.\"\n    />",
         "<Banner\n      icon={<Warning weight=\"fill\" />}\n      variant=\"alert\"\n      title=\"Review required\"\n      description=\"Please review your billing information before proceeding.\"\n    />",
         "<Banner\n      icon={<Info weight=\"fill\" />}\n      title=\"Custom content supported\"\n      description={\n        <Text DANGEROUS_className=\"text-inherit\">\n          This banner supports <strong>custom content</strong> with Text.\n        </Text>\n      }\n    />",
+        "<div className=\"w-full space-y-3\">\n      <Banner\n        icon={<Info weight=\"fill\" />}\n        title=\"Update available\"\n        description=\"A new version is ready to install.\"\n        action={<Button size=\"sm\">Update now</Button>}\n      />\n      <Banner\n        icon={<Info weight=\"fill\" />}\n        title=\"Update available\"\n        description=\"A new version is ready to install.\"\n        action={\n          <Button\n            size=\"sm\"\n            variant=\"ghost\"\n            shape=\"square\"\n            icon={X}\n            aria-label=\"Dismiss\"\n          />\n        }\n      />\n    </div>",
+        "<Banner\n      icon={<Warning weight=\"fill\" />}\n      variant=\"alert\"\n      title=\"Session expiring\"\n      description=\"Your session will expire in 5 minutes.\"\n      action={\n        <>\n          <Button size=\"sm\" variant=\"secondary\">\n            Dismiss\n          </Button>\n          <Button size=\"sm\">Extend session</Button>\n        </>\n      }\n    />",
         "<Banner icon={<Info />}>This is a simple banner using children.</Banner>"
       ],
       "colors": [
@@ -367,15 +448,15 @@
           "optional": true,
           "description": "Shows a loading spinner and disables interaction."
         },
-        "id": {
+        "title": {
           "type": "string",
           "optional": true
         },
-        "lang": {
+        "id": {
           "type": "string",
           "optional": true
         },
-        "title": {
+        "lang": {
           "type": "string",
           "optional": true
         },
@@ -413,7 +494,9 @@
         "<Button variant=\"secondary\" icon={PlusIcon}>\n      Create Worker\n    </Button>",
         "<div className=\"flex flex-wrap items-center gap-3\">\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={PlusIcon}\n        aria-label=\"Add item\"\n      />\n      <Button\n        variant=\"secondary\"\n        shape=\"circle\"\n        icon={PlusIcon}\n        aria-label=\"Add item\"\n      />\n    </div>",
         "<Button variant=\"primary\" loading>\n      Loading...\n    </Button>",
-        "<Button variant=\"secondary\" disabled>\n      Disabled\n    </Button>"
+        "<Button variant=\"secondary\" disabled>\n      Disabled\n    </Button>",
+        "<Button variant=\"secondary\">Click me</Button>",
+        "<div className=\"flex flex-wrap items-center gap-3\">\n      <Button variant=\"secondary\" title=\"Create a new Worker\">\n        Create Worker\n      </Button>\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={PlusIcon}\n        aria-label=\"Add item\"\n        title=\"Add item\"\n      />\n    </div>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -523,7 +606,6 @@
       "colors": [
         "bg-kumo-base",
         "bg-kumo-contrast",
-        "border-kumo-line",
         "ring-kumo-contrast",
         "ring-kumo-danger",
         "ring-kumo-line",
@@ -659,6 +741,11 @@
           "required": true,
           "description": "The text to display and copy to clipboard."
         },
+        "textToCopy": {
+          "type": "string",
+          "optional": true,
+          "description": "If provided, this text will be copied to clipboard instead of the `text` prop."
+        },
         "className": {
           "type": "string",
           "optional": true,
@@ -679,6 +766,7 @@
         "<ClipboardText text=\"0c239dd2\" />",
         "<ClipboardText text=\"abc123\" />",
         "<ClipboardText text=\"sk_live_51H8...\" />",
+        "<ClipboardText\n      text=\"sk_live_***********\"\n      textToCopy=\"sk_live_51H8_abc123\"\n    />",
         "<ClipboardText text=\"https://example.com/very/long/url/path\" />",
         "<ClipboardText\n      text=\"npx kumo add button\"\n      tooltip={{ text: \"Copy\", copiedText: \"Copied!\", side: \"top\" }}\n    />"
       ],
@@ -1938,13 +2026,7 @@
           "description": "Additional CSS classes merged via `cn()`."
         }
       },
-      "examples": [
-        "<CodeBlock\n      lang=\"tsx\"\n      code={`const greeting = \"Hello, World!\";\nconsole.log(greeting);`}\n    />",
-        "<CodeBlock\n      lang=\"tsx\"\n      code={`interface User {\n  id: string;\n  name: string;\n  email: string;\n}\n\nconst user: User = {\n  id: \"1\",\n  name: \"John Doe\",\n  email: \"john@example.com\"\n};`}\n    />",
-        "<CodeBlock\n      lang=\"bash\"\n      code={`npm install @cloudflare/kumo\npnpm add @cloudflare/kumo`}\n    />",
-        "<CodeBlock\n      lang=\"jsonc\"\n      code={`{\n  \"name\": \"kumo\",\n  \"version\": \"1.0.0\",\n  \"dependencies\": {\n    \"react\": \"^19.0.0\"\n  }\n}`}\n    />",
-        "<Code\n      lang=\"bash\"\n      code=\"export API_KEY={{apiKey}}\"\n      values={{\n        apiKey: { value: \"sk_live_123\", highlight: true },\n      }}\n    />"
-      ],
+      "examples": [],
       "colors": [
         "bg-kumo-base",
         "border-kumo-fill",
@@ -2125,6 +2207,7 @@
         "<Combobox\n      value={value}\n      onValueChange={(v) => setValue(v as ServerLocation | null)}\n      items={servers}\n    >\n      <Combobox.TriggerInput\n        className=\"w-[200px]\"\n        placeholder=\"Select server\"\n      />\n      <Combobox.Content>\n        <Combobox.Empty />\n        <Combobox.List>\n          {(group: ServerLocationGroup) => (\n            <Combobox.Group key={group.value} items={group.items}>\n              <Combobox.GroupLabel>{group.value}</Combobox.GroupLabel>\n              <Combobox.Collection>\n                {(item: ServerLocation) => (\n                  <Combobox.Item key={item.value} value={item}>\n                    {item.label}\n                  </Combobox.Item>\n                )}\n              </Combobox.Collection>\n            </Combobox.Group>\n          )}\n        </Combobox.List>\n      </Combobox.Content>\n    </Combobox>",
         "<div className=\"flex gap-2\">\n      <Combobox\n        value={value}\n        onValueChange={setValue}\n        items={bots}\n        isItemEqualToValue={(bot: BotItem, selected: BotItem) =>\n          bot.value === selected.value\n        }\n        multiple\n      >\n        <Combobox.TriggerMultipleWithInput\n          className=\"w-[400px]\"\n          placeholder=\"Select bots\"\n          renderItem={(selected: BotItem) => (\n            <Combobox.Chip key={selected.value}>{selected.label}</Combobox.Chip>\n          )}\n          inputSide=\"right\"\n        />\n        <Combobox.Content className=\"max-h-[200px] min-w-auto overflow-y-auto\">\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: BotItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                <div className=\"flex gap-2\">\n                  <Text>{item.label}</Text>\n                  <Text variant=\"secondary\">{item.author}</Text>\n                </div>\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n      <Button variant=\"primary\">Submit</Button>\n    </div>",
         "<div className=\"w-80\">\n      <Combobox\n        items={databases}\n        value={value}\n        onValueChange={setValue}\n        label=\"Database\"\n        description=\"Select your preferred database\"\n      >\n        <Combobox.TriggerInput placeholder=\"Select database\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: DatabaseItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>",
+        "<div className=\"flex flex-wrap gap-4 items-start\">\n      <Combobox value=\"Apple\" items={fruits} disabled>\n        <Combobox.TriggerInput\n          className=\"w-[200px]\"\n          placeholder=\"Select fruit\"\n        />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: string) => (\n              <Combobox.Item key={item} value={item}>\n                {item}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n\n      <Combobox value={languages[0]} items={languages} disabled>\n        <Combobox.TriggerValue className=\"w-[200px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"Search\" />\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: Language) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>",
         "<div className=\"w-80\">\n      <Combobox\n        items={databases}\n        value={value}\n        onValueChange={setValue}\n        label=\"Database\"\n        error={{ message: \"Please select a database\", match: true }}\n      >\n        <Combobox.TriggerInput placeholder=\"Select database\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: DatabaseItem) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>",
         "<div className=\"flex flex-wrap items-center gap-4\">\n      <Combobox\n        size=\"sm\"\n        value={smValue}\n        onValueChange={(v) => setSmValue(v as string | null)}\n        items={fruits.slice(0, 8)}\n      >\n        <Combobox.TriggerInput placeholder=\"Small (sm)\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: string) => (\n              <Combobox.Item key={item} value={item}>\n                {item}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n      <Combobox\n        size=\"base\"\n        value={baseValue}\n        onValueChange={(v) => setBaseValue(v as string | null)}\n        items={fruits.slice(0, 8)}\n      >\n        <Combobox.TriggerInput placeholder=\"Base (default)\" />\n        <Combobox.Content>\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: string) => (\n              <Combobox.Item key={item} value={item}>\n                {item}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>",
         "<div className=\"flex flex-wrap items-center gap-4\">\n      <Combobox\n        size=\"sm\"\n        value={smValue}\n        onValueChange={(v) => setSmValue(v as Language)}\n        items={languages}\n      >\n        <Combobox.TriggerValue className=\"w-[160px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"Search\" />\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: Language) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n      <Combobox\n        size=\"base\"\n        value={baseValue}\n        onValueChange={(v) => setBaseValue(v as Language)}\n        items={languages}\n      >\n        <Combobox.TriggerValue className=\"w-[180px]\" />\n        <Combobox.Content>\n          <Combobox.Input placeholder=\"Search\" />\n          <Combobox.Empty />\n          <Combobox.List>\n            {(item: Language) => (\n              <Combobox.Item key={item.value} value={item}>\n                {item.emoji} {item.label}\n              </Combobox.Item>\n            )}\n          </Combobox.List>\n        </Combobox.Content>\n      </Combobox>\n    </div>"
@@ -2164,6 +2247,10 @@
             "sideOffset": {
               "type": "ComboboxBase.Positioner.Props[\"sideOffset\"]",
               "optional": true
+            },
+            "container": {
+              "type": "PortalContainer",
+              "optional": true
             }
           }
         },
@@ -2251,6 +2338,11 @@
           "type": "ReactNode",
           "optional": true,
           "description": "Child content - typically one or more Panel components"
+        },
+        "container": {
+          "type": "PortalContainer",
+          "optional": true,
+          "description": "Container element for the portal. Use this to render the command palette inside a Shadow DOM or custom container. Overrides `KumoPortalProvider` context."
         }
       },
       "examples": [
@@ -2438,6 +2530,11 @@
           "optional": true,
           "description": "Dialog content (typically Title, Description, Close, and action buttons)."
         },
+        "container": {
+          "type": "PortalContainer",
+          "optional": true,
+          "description": "Container element for the portal. Use this to render the dialog inside a Shadow DOM or custom container. Overrides `KumoPortalProvider` context."
+        },
         "size": {
           "type": "enum",
           "optional": true,
@@ -2474,6 +2571,7 @@
       ],
       "colors": [
         "bg-kumo-base",
+        "bg-kumo-recessed",
         "text-kumo-default"
       ],
       "subComponents": {
@@ -3165,7 +3263,6 @@
       "colors": [
         "bg-kumo-base",
         "bg-kumo-elevated",
-        "bg-kumo-recessed",
         "ring-kumo-fill",
         "ring-kumo-line",
         "text-kumo-strong"
@@ -3354,7 +3451,8 @@
       "examples": [
         "<Loader />",
         "<div className=\"flex items-center gap-4\">\n      <Loader size=\"sm\" />\n      <Loader size=\"base\" />\n      <Loader size=\"lg\" />\n    </div>",
-        "<Loader size={24} />"
+        "<Loader size={24} />",
+        "<Loader className=\"text-kumo-subtle\" />"
       ],
       "colors": []
     },
@@ -3387,14 +3485,15 @@
         }
       },
       "examples": [
-        "<MenuBar\n      isActive=\"bold\"\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => {},\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => {},\n        },\n      ]}\n    />",
-        "<MenuBar\n      isActive=\"bold\"\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => {},\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => {},\n        },\n      ]}\n    />",
-        "<MenuBar\n      isActive=\"\"\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => {},\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => {},\n        },\n      ]}\n    />"
+        "<MenuBar\n      isActive={active}\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => setActive(active === \"bold\" ? undefined : \"bold\"),\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => setActive(active === \"italic\" ? undefined : \"italic\"),\n        },\n      ]}\n    />",
+        "<MenuBar\n      isActive={active}\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => setActive(active === \"bold\" ? undefined : \"bold\"),\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => setActive(active === \"italic\" ? undefined : \"italic\"),\n        },\n      ]}\n    />",
+        "<MenuBar\n      isActive={active}\n      optionIds\n      options={[\n        {\n          icon: <TextBolderIcon />,\n          id: \"bold\",\n          tooltip: \"Bold\",\n          onClick: () => setActive(active === \"bold\" ? undefined : \"bold\"),\n        },\n        {\n          icon: <TextItalicIcon />,\n          id: \"italic\",\n          tooltip: \"Italic\",\n          onClick: () => setActive(active === \"italic\" ? undefined : \"italic\"),\n        },\n      ]}\n    />"
       ],
       "colors": [
         "bg-kumo-base",
-        "bg-kumo-fill",
-        "border-kumo-fill"
+        "bg-kumo-recessed",
+        "border-kumo-fill",
+        "border-kumo-recessed"
       ],
       "styling": {
         "container": {
@@ -3461,7 +3560,7 @@
         "<Meter label=\"Progress\" value={40} showValue={false} />",
         "<Meter label=\"Quota reached\" value={100} />",
         "<Meter label=\"Memory usage\" value={15} />",
-        "<Meter\n      label=\"Upload progress\"\n      value={80}\n      indicatorClassName=\"from-green-500 via-green-500 to-green-500\"\n    />"
+        "<Meter\n      label=\"Upload progress\"\n      value={80}\n      indicatorClassName=\"from-kumo-success via-kumo-success to-kumo-success\"\n    />"
       ],
       "colors": [
         "bg-kumo-fill",
@@ -3797,7 +3896,6 @@
         "bg-kumo-tint",
         "border-kumo-danger",
         "border-kumo-interact",
-        "border-kumo-line",
         "border-kumo-ring",
         "ring-kumo-danger",
         "ring-kumo-line",
@@ -3958,7 +4056,7 @@
         "<Select\n      label=\"Assignee\"\n      className=\"w-[200px]\"\n      loading={loading}\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      placeholder=\"Select assignee\"\n      items={items}\n    />",
         "<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=\"secondary\">{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=\"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>"
       ],
       "colors": [
@@ -4154,32 +4252,338 @@
         "text-kumo-subtle"
       ]
     },
+    "Sidebar": {
+      "name": "Sidebar",
+      "type": "component",
+      "description": "Sidebar — responsive navigation panel with expand/collapse support.  Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`, `.Content`, `.Footer`, `.Group`, `.GroupLabel`, `.GroupContent`, `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuAction`, `.MenuBadge`, `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`, `.Input`, `.Trigger`, `.Rail`, `.MenuChevron`, `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.  Built on `@base-ui/react/collapsible` + `@base-ui/react/dialog`.",
+      "importPath": "@cloudflare/kumo",
+      "category": "Other",
+      "props": {
+        "defaultOpen": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Initial open state when uncontrolled."
+        },
+        "open": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Controlled open state."
+        },
+        "variant": {
+          "type": "enum",
+          "optional": true,
+          "description": "Sidebar layout variant.",
+          "values": [
+            "sidebar",
+            "floating",
+            "inset"
+          ],
+          "descriptions": {
+            "sidebar": "Standard sidebar with border separator",
+            "floating": "Floating sidebar with shadow and rounded corners",
+            "inset": "Inset sidebar within the content area"
+          },
+          "default": "sidebar"
+        },
+        "side": {
+          "type": "enum",
+          "optional": true,
+          "description": "Which side the sidebar is on.",
+          "values": [
+            "left",
+            "right"
+          ],
+          "descriptions": {
+            "left": "Left-aligned sidebar",
+            "right": "Right-aligned sidebar"
+          },
+          "default": "left"
+        },
+        "collapsible": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "icon",
+            "offcanvas",
+            "none"
+          ],
+          "descriptions": {
+            "icon": "Collapses to show icons only",
+            "offcanvas": "Slides off screen when collapsed",
+            "none": "Cannot be collapsed"
+          },
+          "default": "icon"
+        },
+        "resizable": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Enable drag-to-resize on the sidebar edge."
+        },
+        "defaultWidth": {
+          "type": "number",
+          "optional": true,
+          "description": "Initial width in pixels when resizable."
+        },
+        "minWidth": {
+          "type": "number",
+          "optional": true,
+          "description": "Minimum width in pixels when resizing."
+        },
+        "maxWidth": {
+          "type": "number",
+          "optional": true,
+          "description": "Maximum width in pixels when resizing."
+        },
+        "children": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Content — typically `<Sidebar>` + main content."
+        },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes for the wrapper div."
+        }
+      },
+      "examples": [
+        "<DemoContainer>\n      <Sidebar.Provider defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>\n                  Domains\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuItem>\n                  <Sidebar.Collapsible defaultOpen>\n                    <Sidebar.CollapsibleTrigger\n                      render={\n                        <Sidebar.MenuButton icon={CodeIcon}>\n                          Compute\n                          <Sidebar.MenuChevron />\n                        </Sidebar.MenuButton>\n                      }\n                    />\n                    <Sidebar.CollapsibleContent>\n                      <Sidebar.MenuSub>\n                        <Sidebar.MenuSubButton>\n                          Workers & Pages\n                        </Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>\n                          Durable Objects\n                        </Sidebar.MenuSubButton>\n                      </Sidebar.MenuSub>\n                    </Sidebar.CollapsibleContent>\n                  </Sidebar.Collapsible>\n                </Sidebar.MenuItem>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\n      <Sidebar.Provider defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Content>\n            {/* GroupContent is required for collapsible groups (provides grid-rows animation) */}\n            <Sidebar.Group collapsible defaultOpen>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.GroupContent>\n                <Sidebar.Menu>\n                  <Sidebar.MenuButton icon={HouseIcon} active>\n                    Home\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={ChartBarIcon}>\n                    Analytics\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={GlobeIcon}>\n                    Domains\n                  </Sidebar.MenuButton>\n                </Sidebar.Menu>\n              </Sidebar.GroupContent>\n            </Sidebar.Group>\n\n            <Sidebar.Group collapsible defaultOpen>\n              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n              <Sidebar.GroupContent>\n                <Sidebar.Menu>\n                  <Sidebar.MenuButton icon={CodeIcon}>\n                    Compute\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={DatabaseIcon}>\n                    Storage\n                  </Sidebar.MenuButton>\n                </Sidebar.Menu>\n              </Sidebar.GroupContent>\n            </Sidebar.Group>\n\n            <Sidebar.Group collapsible defaultOpen={false}>\n              <Sidebar.GroupLabel>Protect & Connect</Sidebar.GroupLabel>\n              <Sidebar.GroupContent>\n                <Sidebar.Menu>\n                  <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                    Security\n                  </Sidebar.MenuButton>\n                  <Sidebar.MenuButton icon={LockIcon}>\n                    Zero Trust\n                  </Sidebar.MenuButton>\n                </Sidebar.Menu>\n              </Sidebar.GroupContent>\n            </Sidebar.Group>\n          </Sidebar.Content>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\n      <Sidebar.Provider defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} tooltip=\"Home\" active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon} tooltip=\"Analytics\">\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={CodeIcon} tooltip=\"Compute\">\n                  Compute\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon} tooltip=\"Storage\">\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain>\n          <ToggleButton />\n          <p className=\"text-sm\">\n            Click the button or the sidebar trigger to toggle\n          </p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\n      <Sidebar.Provider defaultOpen className=\"min-h-0! h-full\">\n        <Sidebar>\n          <Sidebar.Header>\n            <AccountSwitcher />\n          </Sidebar.Header>\n\n          <Sidebar.Content>\n            <div className=\"px-1 pb-2\">\n              <Sidebar.Input placeholder=\"Quick search...\" shortcut=\"⌘K\" />\n            </div>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics & Logs\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={GlobeIcon}>\n                  Domains\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Separator />\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Build</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuItem>\n                  <Sidebar.Collapsible defaultOpen>\n                    <Sidebar.CollapsibleTrigger\n                      render={\n                        <Sidebar.MenuButton icon={CodeIcon}>\n                          Compute\n                          <Sidebar.MenuChevron />\n                        </Sidebar.MenuButton>\n                      }\n                    />\n                    <Sidebar.CollapsibleContent>\n                      <Sidebar.MenuSub>\n                        <Sidebar.MenuSubButton>\n                          Workers & Pages\n                        </Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>\n                          Durable Objects\n                        </Sidebar.MenuSubButton>\n                        <Sidebar.MenuSubButton>\n                          Containers\n                          <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n                        </Sidebar.MenuSubButton>\n                      </Sidebar.MenuSub>\n                    </Sidebar.CollapsibleContent>\n                  </Sidebar.Collapsible>\n                </Sidebar.MenuItem>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Protect & Connect</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={ShieldCheckIcon}>\n                  Security\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={LockIcon}>\n                  Zero Trust\n                  <Sidebar.MenuBadge>Beta</Sidebar.MenuBadge>\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n\n          <Sidebar.Footer>\n            <Sidebar.MenuButton icon={GearIcon}>\n              Manage account\n            </Sidebar.MenuButton>\n          </Sidebar.Footer>\n        </Sidebar>\n        <DemoMain />\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\n      <Sidebar.Provider\n        defaultOpen\n        resizable\n        defaultWidth={240}\n        minWidth={180}\n        maxWidth={400}\n        className=\"min-h-0! h-full\"\n      >\n        <Sidebar>\n          <Sidebar.Header>\n            <BrandLogo />\n          </Sidebar.Header>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Overview</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={HouseIcon} active>\n                  Home\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Analytics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={DatabaseIcon}>\n                  Storage\n                </Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n          <Sidebar.Footer>\n            <Sidebar.Trigger />\n          </Sidebar.Footer>\n          <Sidebar.ResizeHandle />\n        </Sidebar>\n        <DemoMain>\n          <p className=\"text-sm\">Drag the sidebar edge to resize</p>\n        </DemoMain>\n      </Sidebar.Provider>\n    </DemoContainer>",
+        "<DemoContainer>\n      <Sidebar.Provider defaultOpen side=\"right\" className=\"min-h-0! h-full\">\n        <DemoMain />\n        <Sidebar>\n          <Sidebar.Content>\n            <Sidebar.Group>\n              <Sidebar.GroupLabel>Details</Sidebar.GroupLabel>\n              <Sidebar.Menu>\n                <Sidebar.MenuButton icon={GearIcon} active>\n                  Properties\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={ChartBarIcon}>\n                  Metrics\n                </Sidebar.MenuButton>\n                <Sidebar.MenuButton icon={BellIcon}>Alerts</Sidebar.MenuButton>\n              </Sidebar.Menu>\n            </Sidebar.Group>\n          </Sidebar.Content>\n        </Sidebar>\n      </Sidebar.Provider>\n    </DemoContainer>"
+      ],
+      "colors": [
+        "bg-kumo-base",
+        "bg-kumo-brand",
+        "bg-kumo-line",
+        "bg-kumo-overlay",
+        "bg-kumo-recessed",
+        "bg-kumo-tint",
+        "border-kumo-line",
+        "ring-kumo-line",
+        "ring-kumo-ring",
+        "text-kumo-default",
+        "text-kumo-strong",
+        "text-kumo-subtle"
+      ],
+      "subComponents": {
+        "Provider": {
+          "name": "Provider",
+          "description": "Provider sub-component",
+          "props": {
+            "defaultOpen": {
+              "type": "boolean",
+              "optional": true
+            },
+            "open": {
+              "type": "boolean",
+              "optional": true
+            },
+            "variant": {
+              "type": "SidebarVariant",
+              "optional": true
+            },
+            "side": {
+              "type": "SidebarSide",
+              "optional": true
+            },
+            "collapsible": {
+              "type": "\"icon\" | \"offcanvas\" | \"none\"",
+              "optional": true
+            },
+            "resizable": {
+              "type": "boolean",
+              "optional": true
+            },
+            "defaultWidth": {
+              "type": "number",
+              "optional": true
+            },
+            "minWidth": {
+              "type": "number",
+              "optional": true
+            },
+            "maxWidth": {
+              "type": "number",
+              "optional": true
+            },
+            "children": {
+              "type": "ReactNode",
+              "required": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
+        },
+        "Header": {
+          "name": "Header",
+          "description": "Header sub-component",
+          "props": {}
+        },
+        "Content": {
+          "name": "Content",
+          "description": "Content sub-component",
+          "props": {}
+        },
+        "Footer": {
+          "name": "Footer",
+          "description": "Footer sub-component",
+          "props": {}
+        },
+        "Group": {
+          "name": "Group",
+          "description": "Group sub-component",
+          "props": {}
+        },
+        "GroupLabel": {
+          "name": "GroupLabel",
+          "description": "GroupLabel sub-component",
+          "props": {}
+        },
+        "GroupContent": {
+          "name": "GroupContent",
+          "description": "GroupContent sub-component",
+          "props": {}
+        },
+        "Menu": {
+          "name": "Menu",
+          "description": "Menu sub-component",
+          "props": {}
+        },
+        "MenuItem": {
+          "name": "MenuItem",
+          "description": "MenuItem sub-component",
+          "props": {}
+        },
+        "MenuButton": {
+          "name": "MenuButton",
+          "description": "MenuButton sub-component",
+          "props": {}
+        },
+        "MenuAction": {
+          "name": "MenuAction",
+          "description": "MenuAction sub-component",
+          "props": {}
+        },
+        "MenuBadge": {
+          "name": "MenuBadge",
+          "description": "MenuBadge sub-component",
+          "props": {}
+        },
+        "MenuSub": {
+          "name": "MenuSub",
+          "description": "MenuSub sub-component",
+          "props": {}
+        },
+        "MenuSubItem": {
+          "name": "MenuSubItem",
+          "description": "MenuSubItem sub-component",
+          "props": {}
+        },
+        "MenuSubButton": {
+          "name": "MenuSubButton",
+          "description": "MenuSubButton sub-component",
+          "props": {}
+        },
+        "Separator": {
+          "name": "Separator",
+          "description": "Separator sub-component",
+          "props": {}
+        },
+        "Input": {
+          "name": "Input",
+          "description": "Input sub-component",
+          "props": {}
+        },
+        "Trigger": {
+          "name": "Trigger",
+          "description": "Trigger sub-component",
+          "props": {}
+        },
+        "Rail": {
+          "name": "Rail",
+          "description": "Rail sub-component",
+          "props": {}
+        },
+        "ResizeHandle": {
+          "name": "ResizeHandle",
+          "description": "ResizeHandle sub-component",
+          "props": {}
+        },
+        "MenuChevron": {
+          "name": "MenuChevron",
+          "description": "MenuChevron sub-component",
+          "props": {}
+        },
+        "Collapsible": {
+          "name": "Collapsible",
+          "description": "Collapsible sub-component",
+          "props": {}
+        },
+        "CollapsibleTrigger": {
+          "name": "CollapsibleTrigger",
+          "description": "CollapsibleTrigger sub-component",
+          "props": {}
+        },
+        "CollapsibleContent": {
+          "name": "CollapsibleContent",
+          "description": "CollapsibleContent sub-component",
+          "props": {}
+        }
+      },
+      "styling": {
+        "width": {
+          "expanded": "16rem",
+          "icon": "3rem"
+        },
+        "mobile": {
+          "breakpoint": 768
+        }
+      }
+    },
     "Surface": {
       "name": "Surface",
       "type": "component",
-      "description": "Surface 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> ```",
       "importPath": "@cloudflare/kumo",
       "category": "Layout",
       "props": {
         "as": {
           "type": "React.ElementType",
-          "optional": true,
-          "description": "The HTML element type to render as (e.g. `\"div\"`, `\"section\"`, `\"article\"`)."
+          "optional": true
         },
-        "className": {
-          "type": "string",
+        "render": {
+          "type": "ReactNode",
           "optional": true,
-          "description": "Additional CSS classes merged via `cn()`."
+          "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,
-          "description": "Content rendered inside the surface."
+          "optional": true
+        },
+        "className": {
+          "type": "string",
+          "optional": true
+        },
+        "id": {
+          "type": "string",
+          "optional": true
+        },
+        "lang": {
+          "type": "string",
+          "optional": true
+        },
+        "title": {
+          "type": "string",
+          "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 as=\"section\" className=\"rounded-lg p-4\">\n        <Text bold>As section element</Text>\n      </Surface>\n      <Surface as=\"article\" className=\"rounded-lg p-4\">\n        <Text bold>As article element</Text>\n      </Surface>\n      <Surface as=\"aside\" className=\"rounded-lg p-4\">\n        <Text bold>As aside element</Text>\n      </Surface>\n    </div>",
+        "<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": [
@@ -4306,7 +4710,8 @@
         "<Switch label=\"Disabled\" checked={false} disabled />",
         "<Switch\n      label=\"Neutral switch\"\n      variant=\"neutral\"\n      checked={checked}\n      onCheckedChange={setChecked}\n    />",
         "<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Neutral off\"\n        variant=\"neutral\"\n        checked={false}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral on\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral disabled\"\n        variant=\"neutral\"\n        checked={false}\n        disabled\n      />\n    </div>",
-        "<div className=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Default variant\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Neutral variant\"\n        variant=\"neutral\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n    </div>"
+        "<div className=\"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=\"flex flex-col gap-4\">\n      <Switch\n        label=\"Small\"\n        size=\"sm\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Base (default)\"\n        size=\"base\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n      <Switch\n        label=\"Large\"\n        size=\"lg\"\n        checked={true}\n        onCheckedChange={() => {}}\n      />\n    </div>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -4375,6 +4780,9 @@
           "descriptions": {
             "auto": "Auto table layout - columns resize based on content",
             "fixed": "Fixed table layout - columns have equal width, controlled via colgroup"
+          },
+          "classes": {
+            "fixed": "table-fixed"
           }
         },
         "variant": {
@@ -4387,6 +4795,24 @@
           "descriptions": {
             "default": "Default row variant",
             "selected": "Selected row variant"
+          },
+          "classes": {
+            "selected": "bg-kumo-tint"
+          }
+        },
+        "sticky": {
+          "type": "enum",
+          "values": [
+            "left",
+            "right"
+          ],
+          "descriptions": {
+            "left": "Pin column to the left edge of the scroll container",
+            "right": "Pin column to the right edge of the scroll container"
+          },
+          "classes": {
+            "left": "sticky left-0",
+            "right": "sticky right-0"
           }
         },
         "className": {
@@ -4404,6 +4830,7 @@
         "<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>"
       ],
       "colors": [
@@ -4532,9 +4959,9 @@
         "bg-kumo-base",
         "bg-kumo-brand",
         "bg-kumo-recessed",
-        "bg-kumo-surface",
         "bg-kumo-tint",
         "border-kumo-ring",
+        "ring-kumo-line",
         "ring-kumo-ring",
         "text-kumo-default",
         "text-kumo-strong",
@@ -4639,6 +5066,11 @@
           "optional": true,
           "description": "Whether to use bold font weight (only applies to body variants)."
         },
+        "truncate": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Whether to truncate overflowing text with an ellipsis. Adds `truncate min-w-0` classes."
+        },
         "as": {
           "type": "React.ElementType",
           "optional": true,
@@ -4651,7 +5083,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=\"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>"
       ],
       "colors": [
         "text-kumo-danger",
@@ -4712,6 +5145,13 @@
             "error": "Error toast for critical issues",
             "warning": "Warning toast for cautionary messages",
             "info": "Info toast for neutral informational messages"
+          },
+          "classes": {
+            "default": "border-kumo-fill bg-kumo-base",
+            "success": "ring-[0.3px] ring-kumo-success bg-kumo-base [&_[data-toast-icon]]:text-kumo-success [&_[data-toast-title]]:text-kumo-success",
+            "error": "ring-[0.3px] ring-kumo-danger bg-kumo-base [&_[data-toast-icon]]:text-kumo-danger [&_[data-toast-title]]:text-kumo-danger",
+            "warning": "ring-[0.3px] ring-kumo-warning bg-kumo-base [&_[data-toast-icon]]:text-kumo-warning [&_[data-toast-title]]:text-kumo-warning",
+            "info": "ring-[0.3px] ring-kumo-info bg-kumo-control [&_[data-toast-icon]]:text-kumo-info [&_[data-toast-title]]:text-kumo-info"
           }
         },
         "className": {
@@ -4725,6 +5165,7 @@
       },
       "examples": [],
       "colors": [
+        "bg-kumo-base",
         "bg-kumo-contrast",
         "bg-kumo-control",
         "bg-kumo-danger-tint",
@@ -4732,11 +5173,12 @@
         "bg-kumo-info-tint",
         "bg-kumo-success-tint",
         "bg-kumo-warning-tint",
-        "border-kumo-danger",
         "border-kumo-fill",
-        "border-kumo-info",
-        "border-kumo-success",
-        "border-kumo-warning",
+        "ring-kumo-danger",
+        "ring-kumo-info",
+        "ring-kumo-ring",
+        "ring-kumo-success",
+        "ring-kumo-warning",
         "text-kumo-danger",
         "text-kumo-default",
         "text-kumo-info",
@@ -4750,8 +5192,8 @@
           "width": 300,
           "padding": 16,
           "borderRadius": 8,
-          "background": "color-secondary",
-          "border": "color-color",
+          "background": "bg-kumo-base",
+          "border": "ring-[0.3px] ring-kumo-ring",
           "shadow": "shadow-lg",
           "gap": 4
         },
@@ -5109,6 +5551,7 @@
         "Label",
         "Link",
         "SensitiveInput",
+        "Sidebar",
         "Table",
         "DeleteResource"
       ],
@@ -5165,6 +5608,7 @@
       "ResourceListPage",
       "Select",
       "SensitiveInput",
+      "Sidebar",
       "Surface",
       "Switch",
       "Table",
@@ -5205,6 +5649,7 @@
         "Radio",
         "Select",
         "SensitiveInput",
+        "Sidebar",
         "Surface",
         "Switch",
         "Table",