@cloudflare/kumo 1.16.0 → 1.17.0

package/ai/component-registry.md

@@ -16,13 +16,28 @@ 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
+- `variant`: enum [default: neutral]
+  - `"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
+  - `"primary"`: Deprecated. Use inverted instead.
+  - `"secondary"`: Deprecated. Use neutral instead.
+  - `"destructive"`: Deprecated. Use red instead.
+  - `"success"`: Deprecated. Use green instead.
 - `className`: string
   Additional CSS classes merged via `cn()`.
 - `children`: ReactNode
@@ -30,29 +45,40 @@ 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-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`, `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-link`
 
 **Examples:**
 
 ```tsx
 <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="success">Success</Badge>
+      <Badge variant="red">Red</Badge>
+      <Badge variant="orange">Orange</Badge>
+      <Badge variant="yellow">Yellow</Badge>
+      <Badge variant="green">Green</Badge>
+      <Badge variant="teal">Teal</Badge>
+      <Badge variant="blue">Blue</Badge>
+      <Badge variant="neutral">Neutral</Badge>
+      <Badge variant="inverted">Inverted</Badge>
       <Badge variant="outline">Outline</Badge>
       <Badge variant="beta">Beta</Badge>
+      <Badge variant="red-subtle">Red subtle</Badge>
+      <Badge variant="orange-subtle">Orange subtle</Badge>
+      <Badge variant="yellow-subtle">Yellow subtle</Badge>
+      <Badge variant="green-subtle">Green subtle</Badge>
+      <Badge variant="teal-subtle">Teal subtle</Badge>
+      <Badge variant="blue-subtle">Blue subtle</Badge>
+      <Badge variant="neutral-subtle">Neutral subtle</Badge>
     </div>
 ```
 
 ```tsx
-<Badge variant="primary">Primary</Badge>
+<Badge variant="red">Red</Badge>
 ```
 
 ```tsx
 <p className="flex items-center gap-2">
       Workers
-      <Badge variant="beta">Beta</Badge>
+      <Badge variant="blue">New</Badge>
     </p>
 ```
 
@@ -77,6 +103,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 +121,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 +178,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 +378,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
@@ -378,6 +448,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>
+```
+
 
 ---
 
@@ -424,7 +509,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-line`, `ring-kumo-ring`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-inverse`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -547,6 +632,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 +697,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 +1298,7 @@ Props:
 - `alignOffset`: ComboboxBase.Positioner.Props["alignOffset"]
 - `side`: ComboboxBase.Positioner.Props["side"]
 - `sideOffset`: ComboboxBase.Positioner.Props["sideOffset"]
+- `container`: PortalContainer
 
 #### Combobox.TriggerValue
 
@@ -1398,6 +1493,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 +1656,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 +2139,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 +2149,7 @@ Dialog component
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-base`, `text-kumo-default`
+`bg-kumo-base`, `bg-kumo-recessed`, `text-kumo-default`
 
 **Styling:**
 
@@ -3079,7 +3214,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 +3460,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:**
 
@@ -3822,7 +3957,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-interact`, `border-kumo-ring`, `ring-kumo-danger`, `ring-kumo-line`, `ring-kumo-ring`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
 
 **Sub-Components:**
 
@@ -4251,7 +4386,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>
       )}
@@ -4895,7 +5030,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 +5041,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 +5072,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 +5205,25 @@ 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 variant"
+        label="Default on"
         checked={true}
         onCheckedChange={() => {}}
       />
       <Switch
-        label="Neutral variant"
+        label="Neutral off"
+        variant="neutral"
+        checked={false}
+        onCheckedChange={() => {}}
+      />
+      <Switch
+        label="Neutral on"
         variant="neutral"
         checked={true}
         onCheckedChange={() => {}}
@@ -5125,6 +5275,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
@@ -5336,6 +5489,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 +5691,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-ring`, `ring-kumo-line`, `ring-kumo-ring`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -5601,6 +5826,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 +5905,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 +5942,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-tint`, `bg-kumo-fill-hover`, `bg-kumo-info-tint`, `bg-kumo-success-tint`, `bg-kumo-warning-tint`, `border-kumo-fill`, `ring-kumo-danger`, `ring-kumo-info`, `ring-kumo-ring`, `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:**
 

package/ai/schemas.ts

@@ -111,7 +111,7 @@ export type Action = z.infer<typeof ActionSchema>;
 // =============================================================================
 
 export const BadgePropsSchema = z.object({
-  variant: z.enum(["primary", "secondary", "destructive", "success", "outline", "beta"]).optional(), // Visual style of the badge. - `"primary"` — High-emphasis badge for important labels - `"secondary"` — Subtle badge for secondary information - `"destructive"` — Error or danger state indicator - `"outline"` — Bordered badge with transparent background - `"beta"` — Dashed-border badge for beta/experimental features
+  variant: z.enum(["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"]).optional(), // Color variant of the badge. - `"red"` / `"red-subtle"` — Red badge - `"orange"` / `"orange-subtle"` — Orange badge - `"yellow"` / `"yellow-subtle"` — Yellow badge - `"green"` / `"green-subtle"` — Green badge (emerald scale) - `"teal"` / `"teal-subtle"` — Teal badge - `"blue"` / `"blue-subtle"` — Blue badge - `"neutral"` / `"neutral-subtle"` — Neutral badge - `"inverted"` — Inverted badge (near-black, white in dark mode) - `"outline"` — Bordered badge with transparent background - `"beta"` — Dashed-border badge for beta/experimental features - `"primary"` — **Deprecated.** Use `"inverted"` instead. - `"secondary"` — **Deprecated.** Use `"neutral"` instead. - `"destructive"` — **Deprecated.** Use `"red"` instead. - `"success"` — **Deprecated.** Use `"green"` instead.
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Content rendered inside the badge.
 });
@@ -120,6 +120,7 @@ export const BannerPropsSchema = z.object({
   icon: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Icon element rendered before the banner content (e.g. from `@phosphor-icons/react`).
   title: z.string().optional(), // Primary heading text for the banner. Use for i18n string injection.
   description: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Secondary description text displayed below the title. Use for i18n string injection.
+  action: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // 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: z.string().optional(),
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
   variant: z.enum(["default", "alert", "error"]).optional(), // Visual style of the banner. - `"default"` — Informational blue banner for general messages - `"alert"` — Warning yellow banner for cautionary messages - `"error"` — Error red banner for critical issues
@@ -140,9 +141,9 @@ export const ButtonPropsSchema = z.object({
   className: z.string().optional(),
   icon: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Icon from `@phosphor-icons/react` or a React element. Rendered before children.
   loading: z.boolean().optional(), // Shows a loading spinner and disables interaction.
+  title: z.string().optional(),
   id: z.string().optional(),
   lang: z.string().optional(),
-  title: z.string().optional(),
   disabled: z.boolean().optional(),
   name: z.string().optional(),
   type: z.enum(["submit", "reset", "button"]).optional(),
@@ -166,6 +167,7 @@ export const CheckboxPropsSchema = z.object({
 export const ClipboardTextPropsSchema = z.object({
   size: z.enum(["sm", "base", "lg"]).optional(), // Size of the clipboard text field. - `"sm"` — Small clipboard text for compact UIs - `"base"` — Default clipboard text size - `"lg"` — Large clipboard text for prominent display
   text: z.string(), // The text to display and copy to clipboard.
+  textToCopy: z.string().optional(), // If provided, this text will be copied to clipboard instead of the `text` prop.
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
   tooltip: z.unknown().optional(), // Tooltip config. Shows tooltip on hover, anchored toast on click.
   labels: z.unknown().optional(), // Accessible labels for i18n.
@@ -463,6 +465,7 @@ export const ComboboxPropsSchema = z.object({
 export const CommandPalettePropsSchema = z.object({
   open: z.boolean(), // Whether the dialog is open
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child content - typically one or more Panel components
+  container: z.unknown().optional(), // Container element for the portal. Use this to render the command palette inside a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.
 });
 
 export const DatePickerPropsSchema = z.object({
@@ -482,6 +485,7 @@ export const DateRangePickerPropsSchema = z.object({
 export const DialogPropsSchema = z.object({
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Dialog content (typically Title, Description, Close, and action buttons).
+  container: z.unknown().optional(), // Container element for the portal. Use this to render the dialog inside a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.
   size: z.enum(["base", "sm", "lg", "xl"]).optional(), // Dialog width. - `"sm"` — Small (min 288px) for simple confirmations - `"base"` — Default (min 384px) - `"lg"` — Large (min 512px) for complex content - `"xl"` — Extra large (min 768px) for detailed views
 });
 
@@ -674,9 +678,13 @@ export const SidebarPropsSchema = z.object({
 });
 
 export const SurfacePropsSchema = z.object({
-  as: z.unknown().optional(), // The HTML element type to render as (e.g. `"div"`, `"section"`, `"article"`).
-  className: z.string().optional(), // Additional CSS classes merged via `cn()`.
-  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Content rendered inside the surface.
+  as: z.unknown().optional(),
+  render: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // 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: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(),
+  className: z.string().optional(),
+  id: z.string().optional(),
+  lang: z.string().optional(),
+  title: z.string().optional(),
 });
 
 export const SwitchPropsSchema = z.object({
@@ -702,6 +710,7 @@ export const SwitchPropsSchema = z.object({
 export const TablePropsSchema = z.object({
   layout: z.enum(["auto", "fixed"]).optional(),
   variant: z.enum(["default", "selected"]).optional(),
+  sticky: z.enum(["left", "right"]).optional(),
   className: z.string().optional(), // Additional CSS classes
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
 });
@@ -722,6 +731,7 @@ export const TextPropsSchema = z.object({
   variant: z.enum(["heading1", "heading2", "heading3", "body", "secondary", "success", "error", "mono", "mono-secondary"]).optional(), // Text style variant. Determines color, font, and weight. - `"heading1"` — Large page title (30px, semibold) - `"heading2"` — Section title (24px, semibold) - `"heading3"` — Subsection title (18px, semibold) - `"body"` — Default body text - `"secondary"` — Muted text for secondary information - `"success"` — Success state text - `"error"` — Error state text - `"mono"` — Monospace text for code - `"mono-secondary"` — Muted monospace text
   size: z.enum(["xs", "sm", "base", "lg"]).optional(), // Text size (only applies to body/secondary/success/error variants). - `"xs"` — 12px - `"sm"` — 14px - `"base"` — 16px - `"lg"` — 18px
   bold: z.boolean().optional(), // Whether to use bold font weight (only applies to body variants).
+  truncate: z.boolean().optional(), // Whether to truncate overflowing text with an ellipsis. Adds `truncate min-w-0` classes.
   as: z.unknown().optional(), // The HTML element type to render as (e.g. `"span"`, `"p"`, `"h1"`). Auto-selected based on variant if omitted.
   children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Text content.
 });

package/dist/.build-complete

@@ -1 +1 @@
-1774299075389
+1775226904078