@cloudflare/kumo 1.16.0 → 1.18.0

package/ai/component-registry.md

@@ -17,12 +17,23 @@ Small status label for categorizing or highlighting content.
 **Props:**
 
 - `variant`: enum [default: primary]
-  - `"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
-  - `"outline"`: Bordered badge with transparent background
+  - `"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
+  - `"green"`: Green badge
+  - `"neutral"`: Neutral badge
+  - `"orange"`: Orange badge
+  - `"purple"`: Purple badge
+  - `"teal"`: Teal badge
+  - `"teal-subtle"`: Subtle teal badge
+  - `"blue"`: Blue badge
 - `className`: string
   Additional CSS classes merged via `cn()`.
 - `children`: ReactNode
@@ -30,7 +41,7 @@ Small status label for categorizing or highlighting content.
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-contrast`, `bg-kumo-danger`, `bg-kumo-fill`, `bg-kumo-success`, `border-kumo-brand`, `border-kumo-fill`, `text-kumo-default`, `text-kumo-inverse`, `text-kumo-link`
+`bg-kumo-badge-blue`, `bg-kumo-badge-green`, `bg-kumo-badge-inverted`, `bg-kumo-badge-neutral`, `bg-kumo-badge-orange`, `bg-kumo-badge-purple`, `bg-kumo-badge-red`, `bg-kumo-badge-teal`, `bg-kumo-badge-teal-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-inverted`, `text-kumo-badge-neutral-subtle`, `text-kumo-badge-teal-subtle`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-info`, `text-kumo-link`, `text-kumo-success`, `text-kumo-warning`
 
 **Examples:**
 
@@ -38,21 +49,31 @@ Small status label for categorizing or highlighting content.
 <div className="flex flex-wrap items-center gap-2">
       <Badge variant="primary">Primary</Badge>
       <Badge variant="secondary">Secondary</Badge>
-      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="error">Error</Badge>
       <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="info">Info</Badge>
       <Badge variant="outline">Outline</Badge>
       <Badge variant="beta">Beta</Badge>
     </div>
 ```
 
 ```tsx
-<Badge variant="primary">Primary</Badge>
+<div className="flex flex-wrap items-center gap-2">
+      <Badge variant="neutral">Neutral</Badge>
+      <Badge variant="red">Red</Badge>
+      <Badge variant="orange">Orange</Badge>
+      <Badge variant="green">Green</Badge>
+      <Badge variant="teal">Teal</Badge>
+      <Badge variant="blue">Blue</Badge>
+      <Badge variant="purple">Purple</Badge>
+    </div>
 ```
 
 ```tsx
 <p className="flex items-center gap-2">
       Workers
-      <Badge variant="beta">Beta</Badge>
+      <Badge variant="secondary">New</Badge>
     </p>
 ```
 
@@ -77,6 +98,8 @@ Full-width message bar for informational, warning, or error notices. Supports st
   Primary heading text for the banner. Use for i18n string injection.
 - `description`: ReactNode
   Secondary description text displayed below the title. Use for i18n string injection.
+- `action`: ReactNode
+  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`: string
 - `children`: ReactNode
 - `variant`: enum [default: default]
@@ -93,7 +116,7 @@ Full-width message bar for informational, warning, or error notices. Supports st
 **Examples:**
 
 ```tsx
-<div className="space-y-3">
+<div className="w-full space-y-3">
       <Banner
         icon={<Info weight="fill" />}
         title="Update available"
@@ -150,6 +173,48 @@ Full-width message bar for informational, warning, or error notices. Supports st
     />
 ```
 
+```tsx
+<div className="w-full space-y-3">
+      <Banner
+        icon={<Info weight="fill" />}
+        title="Update available"
+        description="A new version is ready to install."
+        action={<Button size="sm">Update now</Button>}
+      />
+      <Banner
+        icon={<Info weight="fill" />}
+        title="Update available"
+        description="A new version is ready to install."
+        action={
+          <Button
+            size="sm"
+            variant="ghost"
+            shape="square"
+            icon={X}
+            aria-label="Dismiss"
+          />
+        }
+      />
+    </div>
+```
+
+```tsx
+<Banner
+      icon={<Warning weight="fill" />}
+      variant="alert"
+      title="Session expiring"
+      description="Your session will expire in 5 minutes."
+      action={
+        <>
+          <Button size="sm" variant="secondary">
+            Dismiss
+          </Button>
+          <Button size="sm">Extend session</Button>
+        </>
+      }
+    />
+```
+
 ```tsx
 <Banner icon={<Info />}>This is a simple banner using children.</Banner>
 ```
@@ -308,9 +373,9 @@ Primary action trigger. Supports multiple variants, sizes, shapes, icons, and lo
   Icon from `@phosphor-icons/react` or a React element. Rendered before children.
 - `loading`: boolean
   Shows a loading spinner and disables interaction.
+- `title`: string
 - `id`: string
 - `lang`: string
-- `title`: string
 - `disabled`: boolean
 - `name`: string
 - `type`: enum
@@ -318,7 +383,7 @@ Primary action trigger. Supports multiple variants, sizes, shapes, icons, and lo
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-brand-hover`, `bg-kumo-danger`, `bg-kumo-tint`, `ring-kumo-line`, `ring-kumo-ring`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-brand-hover`, `bg-kumo-danger`, `bg-kumo-tint`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
 
 **Examples:**
 
@@ -378,6 +443,21 @@ Primary action trigger. Supports multiple variants, sizes, shapes, icons, and lo
     </div>
 ```
 
+```tsx
+<div className="flex flex-wrap items-center gap-3">
+      <Button variant="secondary" title="Create a new Worker">
+        Create Worker
+      </Button>
+      <Button
+        variant="secondary"
+        shape="square"
+        icon={PlusIcon}
+        aria-label="Add item"
+        title="Add item"
+      />
+    </div>
+```
+
 
 ---
 
@@ -399,8 +479,8 @@ Checkbox component
 
   **State Classes:**
   - `"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`
 - `label`: ReactNode
   Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node
 - `labelTooltip`: ReactNode
@@ -424,7 +504,7 @@ Checkbox component
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-contrast`, `border-kumo-line`, `ring-kumo-contrast`, `ring-kumo-danger`, `ring-kumo-line`, `ring-kumo-ring`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-inverse`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-contrast`, `ring-kumo-contrast`, `ring-kumo-danger`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-inverse`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -435,8 +515,8 @@ Checkbox component
   - `checked`: `bg-kumo-contrast`, `text-kumo-inverse`
   - `indeterminate`: `bg-kumo-contrast`, `text-kumo-inverse`
   - `error`: `ring-kumo-danger`
-  - `hover`: `ring-kumo-ring`
-  - `focus`: `ring-kumo-ring`
+  - `hover`: `ring-kumo-hairline`
+  - `focus`: `ring-kumo-hairline`
   - `disabled`: `opacity-50`, `cursor-not-allowed`
 - **Icons:**
   - `ph-check` (checked) size 12
@@ -547,6 +627,8 @@ Read-only text field with a one-click copy-to-clipboard button.
   - `"lg"`: Large clipboard text for prominent display
 - `text`: string (required)
   The text to display and copy to clipboard.
+- `textToCopy`: string
+  If provided, this text will be copied to clipboard instead of the `text` prop.
 - `className`: string
   Additional CSS classes merged via `cn()`.
 - `tooltip`: object
@@ -610,6 +692,13 @@ Read-only text field with a one-click copy-to-clipboard button.
 <ClipboardText text="0c239dd2" />
 ```
 
+```tsx
+<ClipboardText
+      text="sk_live_***********"
+      textToCopy="sk_live_51H8_abc123"
+    />
+```
+
 ```tsx
 <ClipboardText
       text="npx kumo add button"
@@ -1204,6 +1293,7 @@ Props:
 - `alignOffset`: ComboboxBase.Positioner.Props["alignOffset"]
 - `side`: ComboboxBase.Positioner.Props["side"]
 - `sideOffset`: ComboboxBase.Positioner.Props["sideOffset"]
+- `container`: PortalContainer
 
 #### Combobox.TriggerValue
 
@@ -1398,6 +1488,42 @@ Usage:
     </div>
 ```
 
+```tsx
+<div className="flex flex-wrap gap-4 items-start">
+      <Combobox value="Apple" items={fruits} disabled>
+        <Combobox.TriggerInput
+          className="w-[200px]"
+          placeholder="Select fruit"
+        />
+        <Combobox.Content>
+          <Combobox.Empty />
+          <Combobox.List>
+            {(item: string) => (
+              <Combobox.Item key={item} value={item}>
+                {item}
+              </Combobox.Item>
+            )}
+          </Combobox.List>
+        </Combobox.Content>
+      </Combobox>
+
+      <Combobox value={languages[0]} items={languages} disabled>
+        <Combobox.TriggerValue className="w-[200px]" />
+        <Combobox.Content>
+          <Combobox.Input placeholder="Search" />
+          <Combobox.Empty />
+          <Combobox.List>
+            {(item: Language) => (
+              <Combobox.Item key={item.value} value={item}>
+                {item.emoji} {item.label}
+              </Combobox.Item>
+            )}
+          </Combobox.List>
+        </Combobox.Content>
+      </Combobox>
+    </div>
+```
+
 ```tsx
 <div className="w-80">
       <Combobox
@@ -1525,6 +1651,8 @@ CommandPalette — accessible command palette / spotlight search overlay.  Compo
   Whether the dialog is open
 - `children`: ReactNode
   Child content - typically one or more Panel components
+- `container`: PortalContainer
+  Container element for the portal. Use this to render the command palette inside a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.
 
 **Colors (kumo tokens used):**
 
@@ -2006,6 +2134,8 @@ Dialog component
   Additional CSS classes merged via `cn()`.
 - `children`: ReactNode
   Dialog content (typically Title, Description, Close, and action buttons).
+- `container`: PortalContainer
+  Container element for the portal. Use this to render the dialog inside a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.
 - `size`: enum [default: base]
   - `"base"`: Default dialog width
   - `"sm"`: Small dialog for simple confirmations
@@ -2014,7 +2144,7 @@ Dialog component
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `text-kumo-default`
+`bg-kumo-base`, `bg-kumo-recessed`, `text-kumo-default`
 
 **Styling:**
 
@@ -2877,13 +3007,13 @@ Input component
 
   **State Classes:**
   - `"default"`:
-    - `focus`: `focus:ring-kumo-ring`
+    - `focus`: `focus:ring-kumo-hairline`
   - `"error"`:
     - `focus`: `focus:ring-kumo-danger`
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-control`, `ring-kumo-danger`, `ring-kumo-line`, `ring-kumo-ring`, `text-kumo-default`, `text-kumo-subtle`
+`bg-kumo-control`, `ring-kumo-danger`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-default`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -2904,7 +3034,6 @@ Input component
       label="Email"
       placeholder="you@example.com"
       value="invalid-email"
-      variant="error"
       error="Please enter a valid email address"
     />
 ```
@@ -2914,7 +3043,6 @@ Input component
       label="Password"
       type="password"
       value="short"
-      variant="error"
       error={{
         message: "Password must be at least 8 characters",
         match: "tooShort",
@@ -3079,7 +3207,7 @@ LayerCard component
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-elevated`, `bg-kumo-recessed`, `ring-kumo-fill`, `ring-kumo-line`, `text-kumo-strong`
+`bg-kumo-base`, `bg-kumo-elevated`, `ring-kumo-fill`, `ring-kumo-line`, `text-kumo-strong`
 
 **Styling:**
 
@@ -3325,7 +3453,7 @@ MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-fill`, `border-kumo-fill`
+`bg-kumo-base`, `bg-kumo-recessed`, `border-kumo-fill`, `border-kumo-recessed`
 
 **Styling:**
 
@@ -3445,7 +3573,7 @@ Pagination component
 
 **Colors (kumo tokens used):**
 
-`border-kumo-line`, `text-kumo-strong`
+`border-kumo-line`, `ring-kumo-line`, `text-kumo-strong`
 
 **Styling:**
 
@@ -3480,6 +3608,8 @@ Props:
 Controls sub-component
 
 Props:
+- `Note`: ** `"dropdown"` renders an option for every page (required)
+- `pageSelector`: "input" | "dropdown"
 - `className`: string
 
 #### Pagination.Separator
@@ -3559,6 +3689,26 @@ Props:
     </Pagination>
 ```
 
+```tsx
+<Pagination
+      page={page}
+      setPage={setPage}
+      perPage={perPage}
+      totalCount={500}
+    >
+      <Pagination.Info />
+      <Pagination.Separator />
+      <Pagination.PageSize
+        value={perPage}
+        onChange={(size) => {
+          setPerPage(size);
+          setPage(1);
+        }}
+      />
+      <Pagination.Controls pageSelector="dropdown" />
+    </Pagination>
+```
+
 ```tsx
 <Pagination
       page={page}
@@ -3822,7 +3972,7 @@ Radio — radio button group for single-select choices.  Compound component: `Ra
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-contrast`, `bg-kumo-tint`, `border-kumo-danger`, `border-kumo-interact`, `border-kumo-line`, `border-kumo-ring`, `ring-kumo-danger`, `ring-kumo-line`, `ring-kumo-ring`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-contrast`, `bg-kumo-tint`, `border-kumo-danger`, `border-kumo-hairline`, `border-kumo-interact`, `ring-kumo-danger`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
 
 **Sub-Components:**
 
@@ -4082,7 +4232,7 @@ Select component
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-tint`, `ring-kumo-ring`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-line`, `bg-kumo-tint`, `ring-kumo-hairline`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -4095,6 +4245,18 @@ This is a compound component. Use these sub-components:
 
 Option sub-component
 
+#### Select.Group
+
+Group sub-component
+
+#### Select.GroupLabel
+
+GroupLabel sub-component
+
+#### Select.Separator
+
+Separator sub-component
+
 
 **Examples:**
 
@@ -4251,7 +4413,7 @@ Option sub-component
         <span className="flex items-center gap-2">
           <span>Issue Types</span>
           {selected.length > 0 && (
-            <Badge variant="secondary">{selected.length}</Badge>
+            <Badge variant="neutral">{selected.length}</Badge>
           )}
         </span>
       )}
@@ -4289,6 +4451,93 @@ Option sub-component
     </Select>
 ```
 
+```tsx
+<Select
+      label="Deployment Region"
+      placeholder="Choose a region..."
+      className="w-[250px]"
+      value={value}
+      onValueChange={(v) => setValue(v as string | null)}
+    >
+      <Select.Option value="us-east">US East</Select.Option>
+      <Select.Option value="us-west">US West</Select.Option>
+      <Select.Option value="eu-west" disabled>
+        EU West
+      </Select.Option>
+      <Select.Option value="ap-south" disabled>
+        AP South
+      </Select.Option>
+    </Select>
+```
+
+```tsx
+<Select
+      label="Food"
+      placeholder="Pick a food..."
+      className="w-[220px]"
+      value={value}
+      onValueChange={(v) => setValue(v as string | null)}
+    >
+      <Select.Group>
+        <Select.GroupLabel>Fruits</Select.GroupLabel>
+        <Select.Option value="apple">Apple</Select.Option>
+        <Select.Option value="banana">Banana</Select.Option>
+        <Select.Option value="cherry">Cherry</Select.Option>
+      </Select.Group>
+      <Select.Separator />
+      <Select.Group>
+        <Select.GroupLabel>Vegetables</Select.GroupLabel>
+        <Select.Option value="carrot">Carrot</Select.Option>
+        <Select.Option value="broccoli">Broccoli</Select.Option>
+        <Select.Option value="spinach">Spinach</Select.Option>
+      </Select.Group>
+    </Select>
+```
+
+```tsx
+<Select
+      label="Server Region"
+      placeholder="Select a region..."
+      className="w-[260px]"
+      value={value}
+      onValueChange={(v) => setValue(v as string | null)}
+    >
+      <Select.Group>
+        <Select.GroupLabel>Available</Select.GroupLabel>
+        <Select.Option value="us-east-1">US East (N. Virginia)</Select.Option>
+        <Select.Option value="us-west-2">US West (Oregon)</Select.Option>
+        <Select.Option value="eu-west-1">EU West (Ireland)</Select.Option>
+      </Select.Group>
+      <Select.Separator />
+      <Select.Group>
+        <Select.GroupLabel>Unavailable</Select.GroupLabel>
+        <Select.Option value="ap-south-1" disabled>
+          AP South (Mumbai)
+        </Select.Option>
+        <Select.Option value="sa-east-1" disabled>
+          SA East (São Paulo)
+        </Select.Option>
+      </Select.Group>
+    </Select>
+```
+
+```tsx
+<Select
+      label="Long List Select"
+      description="Tests scrolling behavior with many options"
+      placeholder="Choose an option..."
+      className="w-[220px]"
+      value={value}
+      onValueChange={(v) => setValue(v as string | null)}
+    >
+      {longListItems.map((item) => (
+        <Select.Option key={item.value} value={item.value}>
+          {item.label}
+        </Select.Option>
+      ))}
+    </Select>
+```
+
 
 ---
 
@@ -4343,7 +4592,7 @@ Password/secret input that masks its value by default and reveals on click. Incl
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-brand`, `bg-kumo-control`, `outline-kumo-ring`, `ring-kumo-ring`, `text-kumo-default`, `text-kumo-subtle`
+`bg-kumo-brand`, `bg-kumo-control`, `outline-kumo-hairline`, `ring-kumo-hairline`, `text-kumo-default`, `text-kumo-subtle`
 
 **Examples:**
 
@@ -4460,7 +4709,7 @@ Sidebar — responsive navigation panel with expand/collapse support.  Compound
 
 **Colors (kumo tokens used):**
 
-`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`
+`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-line`, `bg-kumo-overlay`, `bg-kumo-recessed`, `bg-kumo-tint`, `border-kumo-line`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -4895,7 +5144,7 @@ CollapsibleContent sub-component
 
 ### Surface
 
-Surface component
+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> ```
 
 **Type:** component
 
@@ -4906,11 +5155,15 @@ Surface component
 **Props:**
 
 - `as`: React.ElementType
-  The HTML element type to render as (e.g. `"div"`, `"section"`, `"article"`).
-- `className`: string
-  Additional CSS classes merged via `cn()`.
+- `render`: ReactNode
+  Allows you to replace the component’s HTML element with a different tag, or compose it with another component.
+
+Accepts a `ReactElement` or a function that returns the element to render.
 - `children`: ReactNode
-  Content rendered inside the surface.
+- `className`: string
+- `id`: string
+- `lang`: string
+- `title`: string
 
 **Colors (kumo tokens used):**
 
@@ -4933,13 +5186,13 @@ Surface component
 
 ```tsx
 <div className="flex flex-col gap-4">
-      <Surface as="section" className="rounded-lg p-4">
+      <Surface render={<section />} className="rounded-lg p-4">
         <Text bold>As section element</Text>
       </Surface>
-      <Surface as="article" className="rounded-lg p-4">
+      <Surface render={<article />} className="rounded-lg p-4">
         <Text bold>As article element</Text>
       </Surface>
-      <Surface as="aside" className="rounded-lg p-4">
+      <Surface render={<aside />} className="rounded-lg p-4">
         <Text bold>As aside element</Text>
       </Surface>
     </div>
@@ -5066,14 +5319,17 @@ Props:
 ```
 
 ```tsx
-<div className="flex flex-col gap-4">
+<div className="grid grid-cols-2 gap-x-8 gap-y-4">
+      <Switch label="Default off" checked={false} onCheckedChange={() => {}} />
+      <Switch label="Default on" checked={true} onCheckedChange={() => {}} />
       <Switch
-        label="Default variant"
-        checked={true}
+        label="Neutral off"
+        variant="neutral"
+        checked={false}
         onCheckedChange={() => {}}
       />
       <Switch
-        label="Neutral variant"
+        label="Neutral on"
         variant="neutral"
         checked={true}
         onCheckedChange={() => {}}
@@ -5081,6 +5337,15 @@ Props:
     </div>
 ```
 
+```tsx
+<Switch
+      id="my-custom-switch"
+      label="Custom ID"
+      checked={checked}
+      onCheckedChange={setChecked}
+    />
+```
+
 ```tsx
 <div className="flex flex-col gap-4">
       <Switch
@@ -5125,6 +5390,9 @@ Table — semantic HTML table with styled rows, cells, and selection support.  C
 - `variant`: enum [default: default]
   - `"default"`: Default row variant
   - `"selected"`: Selected row variant
+- `sticky`: enum
+  - `"left"`: Pin column to the left edge of the scroll container
+  - `"right"`: Pin column to the right edge of the scroll container
 - `className`: string
   Additional CSS classes
 - `children`: ReactNode
@@ -5132,7 +5400,7 @@ Table — semantic HTML table with styled rows, cells, and selection support.  C
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-elevated`, `bg-kumo-ring`, `bg-kumo-tint`, `border-kumo-fill`, `text-kumo-default`, `text-kumo-strong`
+`bg-kumo-base`, `bg-kumo-elevated`, `bg-kumo-hairline`, `bg-kumo-tint`, `border-kumo-fill`, `text-kumo-default`, `text-kumo-strong`
 
 **Sub-Components:**
 
@@ -5336,6 +5604,78 @@ ResizeHandle sub-component
     </LayerCard>
 ```
 
+```tsx
+<LayerCard>
+      <LayerCard.Primary className="w-full max-w-md overflow-x-auto p-0">
+        <Table>
+          <Table.Header>
+            <Table.Row>
+              <Table.Head>Subject</Table.Head>
+              <Table.Head>From</Table.Head>
+              <Table.Head>Date</Table.Head>
+              <Table.Head>Tags</Table.Head>
+              <Table.Head sticky="right">
+                <span className="sr-only">Actions</span>
+              </Table.Head>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {emailData.map((row) => (
+              <Table.Row key={row.id}>
+                <Table.Cell className="whitespace-nowrap">
+                  {row.subject}
+                </Table.Cell>
+                <Table.Cell className="whitespace-nowrap">
+                  {row.from}
+                </Table.Cell>
+                <Table.Cell className="whitespace-nowrap">
+                  {row.date}
+                </Table.Cell>
+                <Table.Cell className="whitespace-nowrap">
+                  {row.tags ? (
+                    <div className="inline-flex gap-1">
+                      {row.tags.map((tag) => (
+                        <Badge key={tag}>{tag}</Badge>
+                      ))}
+                    </div>
+                  ) : (
+                    "—"
+                  )}
+                </Table.Cell>
+                <Table.Cell sticky="right" className="text-right">
+                  <DropdownMenu>
+                    <DropdownMenu.Trigger
+                      render={
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          shape="square"
+                          aria-label="More options"
+                        >
+                          <DotsThree weight="bold" size={16} />
+                        </Button>
+                      }
+                    />
+                    <DropdownMenu.Content>
+                      <DropdownMenu.Item icon={Eye}>View</DropdownMenu.Item>
+                      <DropdownMenu.Item icon={PencilSimple}>
+                        Edit
+                      </DropdownMenu.Item>
+                      <DropdownMenu.Separator />
+                      <DropdownMenu.Item icon={Trash} variant="danger">
+                        Delete
+                      </DropdownMenu.Item>
+                    </DropdownMenu.Content>
+                  </DropdownMenu>
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      </LayerCard.Primary>
+    </LayerCard>
+```
+
 ```tsx
 <LayerCard>
       <LayerCard.Primary className="w-full overflow-x-auto p-0">
@@ -5466,7 +5806,7 @@ Tab navigation component with segmented or underline style. Built on Base UI Tab
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-recessed`, `bg-kumo-surface`, `bg-kumo-tint`, `border-kumo-ring`, `ring-kumo-ring`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
+`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-recessed`, `bg-kumo-tint`, `border-kumo-hairline`, `ring-kumo-hairline`, `ring-kumo-line`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -5601,6 +5941,8 @@ Text component
   - `"lg"`: Large text
 - `bold`: boolean
   Whether to use bold font weight (only applies to body variants).
+- `truncate`: boolean
+  Whether to truncate overflowing text with an ellipsis. Adds `truncate min-w-0` classes.
 - `as`: React.ElementType
   The HTML element type to render as (e.g. `"span"`, `"p"`, `"h1"`). Auto-selected based on variant if omitted.
 - `children`: ReactNode
@@ -5678,6 +6020,15 @@ Text component
     </div>
 ```
 
+```tsx
+<div className="w-64 rounded-lg border border-kumo-line bg-kumo-base p-4">
+      <Text truncate>
+        This is a long piece of text that will be truncated with an ellipsis
+        when it overflows its container.
+      </Text>
+    </div>
+```
+
 
 ---
 
@@ -5706,7 +6057,7 @@ Toasty — toast notification provider and viewport.  Renders a `Toast.Provider`
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-contrast`, `bg-kumo-control`, `bg-kumo-danger-tint`, `bg-kumo-fill-hover`, `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`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-info`, `text-kumo-strong`, `text-kumo-subtle`, `text-kumo-success`, `text-kumo-warning`
+`bg-kumo-base`, `bg-kumo-contrast`, `bg-kumo-control`, `bg-kumo-danger`, `bg-kumo-fill-hover`, `bg-kumo-info`, `bg-kumo-success`, `bg-kumo-warning`, `border-kumo-fill`, `ring-kumo-danger`, `ring-kumo-hairline`, `ring-kumo-info`, `ring-kumo-success`, `ring-kumo-warning`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-info`, `text-kumo-strong`, `text-kumo-subtle`, `text-kumo-success`, `text-kumo-warning`
 
 **Styling:**
 
@@ -5780,6 +6131,31 @@ Accessible popup that shows additional information on hover/focus. Wrap your app
     </TooltipProvider>
 ```
 
+```tsx
+<TooltipProvider>
+      <div className="flex gap-4">
+        <Tooltip content="Opens after 1 second" delay={1000} asChild>
+          <Button variant="secondary">1s open delay</Button>
+        </Tooltip>
+        <Tooltip
+          content="Stays open 500ms after leaving"
+          closeDelay={500}
+          asChild
+        >
+          <Button variant="secondary">500ms close delay</Button>
+        </Tooltip>
+        <Tooltip
+          content="Instant open, stays 1s"
+          delay={0}
+          closeDelay={1000}
+          asChild
+        >
+          <Button variant="secondary">Instant + 1s close</Button>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+```
+
 
 ---