@cloudflare/kumo 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,105 @@
 # @cloudflare/kumo
 
+## 1.10.0
+
+### Minor Changes
+
+- 5505610: Add Shiki-powered `CodeHighlighted` component for syntax highlighting
+  - **New entry point**: `@cloudflare/kumo/code` - keeps Shiki out of main bundle
+  - **ShikiProvider**: Lazy-loads Shiki on first render, shares instance across all children
+  - **CodeHighlighted**: Syntax highlighting with line numbers, line highlighting, copy button
+  - **Server utilities**: `@cloudflare/kumo/code/server` for SSR/static highlighting
+  - **Themes**: Ships with `github-light` and `vesper` defaults, supports any Shiki theme
+  - **i18n**: Customizable labels via provider or per-component
+  - **CSS customization**: `--kumo-code-highlight-bg` variable for highlight color
+  - **Deprecates**: Legacy `Code` and `CodeBlock` components (will be removed in v2)
+
+- 003128b: feat(combobox): add size prop with xs, sm, base, lg variants matching Input component
+- 1cad157: feat(flow): make nested lists work inside parallel nodes
+- 9d89256: Add `role` prop to Dialog component supporting both `"dialog"` (default) and `"alertdialog"` ARIA roles
+
+  **New Feature:**
+  - `Dialog.Root` now accepts a `role` prop to specify the dialog's ARIA semantics
+  - When `role="alertdialog"` is used, the dialog uses Base UI's AlertDialog primitives for proper accessibility
+  - This provides correct screen reader announcements for confirmation and destructive action dialogs
+
+  **When to use `role="alertdialog"`:**
+  - Destructive actions (delete, discard, remove)
+  - Confirmation flows requiring explicit user acknowledgment
+  - Actions that cannot be undone
+  - Critical warnings or errors
+
+  **Example:**
+
+  ```tsx
+  // Standard dialog (default)
+  <Dialog.Root>
+    <Dialog.Trigger render={(p) => <Button {...p}>Edit</Button>} />
+    <Dialog>...</Dialog>
+  </Dialog.Root>
+
+  // Alert dialog for destructive actions
+  <Dialog.Root role="alertdialog">
+    <Dialog.Trigger render={(p) => <Button variant="destructive" {...p}>Delete</Button>} />
+    <Dialog>...</Dialog>
+  </Dialog.Root>
+  ```
+
+- e6218d2: Add TimeseriesChart component with ECharts integration, supporting legends, gradient fills, custom axis formatting, loading skeleton state, and configurable color palettes.
+- a7eb061: feat(select): auto-render options from items prop when children omitted
+
+  The Select component now automatically renders Select.Option elements from the items prop when children are not explicitly provided.
+
+### Patch Changes
+
+- 5943e77: Add missing `success` background and tint semantic color tokens (`bg-kumo-success`, `bg-kumo-success-tint`) for parity with `info`, `warning`, and `danger`. Fix `text-kumo-success` dark mode contrast by using `green-400` instead of `green-500`. Add new `success` Badge variant for positive state indicators.
+- 35d5c42: fix(breadcrumbs): improve mobile breadcrumb readability
+
+  breadcrumbs now render a compact mobile trail for deeper hierarchies by collapsing early levels to `...` and keeping the trailing path visible. labels in breadcrumb links and the current page now truncate correctly to prevent stacking or overlap on narrow viewports.
+
+- 02d0d65: fix(badge): prevent crash when unknown variant is passed
+
+  Add defensive fallback to primary variant when an unrecognized variant string is provided to Badge component. This prevents "Cannot read properties of undefined (reading 'classes')" errors when consumers use a variant that doesn't exist in their installed version.
+
+- 3170d65: fix(code): Fix CodeHighlighted dark mode, layout, and SSR issues
+  - Fix dark mode: Make `<pre>` background transparent so container's `bg-kumo-base` handles theming and border-radius is respected
+  - Fix layout: Wrap Shiki output in overflow container to prevent line highlight negative margins from being clipped
+  - Fix width: Add `w-full` to container for proper full-width display
+  - Fix SSR: Remove `"use client"` directive from `@cloudflare/kumo/code/server` entry point so server utilities work in RSC/SSR contexts
+
+- 31ce577: fix(CommandPalette): add explicit text-base class to Item component for consistent 14px font size
+- ee5a632: Fix Select to render description and error when hideLabel is true
+
+  Previously, the `description` and `error` props were silently ignored when
+  `hideLabel` was `true` (the default). Now, helper text and error messages
+  display correctly even when the label is visually hidden.
+
+- 409d32b: Fix TypeScript errors when consumers type-check their projects with kumo installed.
+
+  Previously, TypeScript would attempt to type-check raw `.tsx` and `.ts` source files
+  shipped in the package (block sources in `dist/src/blocks/`, `ai/schemas.ts`, and
+  `scripts/theme-generator/*.ts`), causing build failures in downstream projects.
+
+  This change:
+  - Moves block source files to a separate `dist/blocks-source/` directory
+  - Compiles `ai/schemas.ts` and `scripts/theme-generator/*.ts` to JavaScript
+  - Updates package exports to point to compiled `.js` files with proper `.d.ts` types
+
+- 7816318: fix(inputs): expand small control hit areas
+- e7f0c80: Fix pagination component to properly wrap numbers in `tabular-nums` class for consistent number alignment. Both the page range and total count now use tabular numerals.
+- c0341b4: Simplify Select placeholder implementation by using Base UI's native placeholder prop on SelectBase.Value instead of manually injecting placeholder items into the items array. This provides a cleaner, more intuitive API that aligns with standard HTML select behavior while maintaining backward compatibility with the null-value placeholder pattern.
+- 35d5c42: fix(breadcrumbs): enhance mobile breadcrumb display for better readability
+- abb7f8c: Add `variant="compact"` prop to Table.Header for a more condensed header style
+- 8972cc4: Fix Combobox group label styling to use semantic token and correct padding
+- bb49d4b: Standardize z-index usage with isolation containment
+  - Add `isolation: isolate` to components with internal stacking (Tabs, MenuBar, InputGroup, Flow/Parallel)
+  - Simplify internal z-index values to `z-0`/`z-1`/`z-2` instead of arbitrary values like `z-10`/`z-20`
+  - Remove superfluous `z-10` from CommandPalette List
+  - Update Toast viewport to `z-1` (matching Base UI's documented pattern)
+  - Update ClipboardText viewport to use `isolate` instead of `z-50`
+
+  This prevents z-index values from leaking outside component boundaries.
+
 ## 1.9.0
 
 ### Minor Changes

package/ai/component-registry.json

@@ -16,6 +16,7 @@
             "primary",
             "secondary",
             "destructive",
+            "success",
             "outline",
             "beta"
           ],
@@ -23,6 +24,7 @@
             "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",
             "beta": "Indicates beta or experimental features"
           },
@@ -30,6 +32,7 @@
             "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",
             "outline": "border border-kumo-fill bg-transparent text-kumo-default",
             "beta": "border border-dashed border-kumo-brand bg-transparent text-kumo-link"
           },
@@ -47,10 +50,11 @@
         }
       },
       "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=\"outline\">Outline</Badge>\n      <Badge variant=\"beta\">Beta</Badge>\n    </div>",
+        "<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>",
         "<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>"
@@ -59,6 +63,7 @@
         "bg-kumo-contrast",
         "bg-kumo-danger",
         "bg-kumo-fill",
+        "bg-kumo-success",
         "border-kumo-brand",
         "border-kumo-fill",
         "text-kumo-default",
@@ -2031,6 +2036,18 @@
       "importPath": "@cloudflare/kumo",
       "category": "Input",
       "props": {
+        "size": {
+          "type": "enum",
+          "optional": true,
+          "description": "Size of the combobox trigger. Matches Input component sizes.\n- `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n- `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n- `\"base\"` — Default size (h-9 / 36px)\n- `\"lg\"` — Large for prominent fields (h-10 / 40px)",
+          "values": [
+            "xs",
+            "sm",
+            "base",
+            "lg"
+          ],
+          "default": "base"
+        },
         "inputSide": {
           "type": "enum",
           "optional": true,
@@ -2109,15 +2126,19 @@
         "<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=\"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=\"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>"
       ],
       "colors": [
         "bg-kumo-control",
         "bg-kumo-fill-hover",
         "bg-kumo-overlay",
+        "border-kumo-line",
         "fill-kumo-ring",
         "ring-kumo-line",
         "text-kumo-default",
+        "text-kumo-strong",
         "text-kumo-subtle"
       ],
       "subComponents": {
@@ -2234,9 +2255,9 @@
         }
       },
       "examples": [
-        "<div className=\"flex flex-col items-start gap-4\">\n      <Button onClick={() => setOpen(true)}>Open Command Palette</Button>\n      {selectedItem && (\n        <p className=\"text-sm text-kumo-subtle\">\n          Last selected:{\" \"}\n          <span className=\"text-kumo-default\">{selectedItem}</span>\n        </p>\n      )}\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={sampleGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        onSelect={(item, { newTab }) => {\n          console.log(\"Selected:\", item.title, newTab ? \"(new tab)\" : \"\");\n          handleSelect(item);\n        }}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"Type a command or search...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(group: CommandGroup) => (\n              <CommandPalette.Group key={group.id}>\n                <CommandPalette.GroupLabel>\n                  {group.label}\n                </CommandPalette.GroupLabel>\n                <CommandPalette.Items>\n                  {(item: CommandItem) => (\n                    <CommandPalette.Item\n                      key={item.id}\n                      value={item}\n                      onClick={() => handleSelect(item)}\n                    >\n                      <span className=\"flex items-center gap-3\">\n                        {item.icon && (\n                          <span className=\"text-kumo-subtle\">{item.icon}</span>\n                        )}\n                        <span>{item.title}</span>\n                      </span>\n                    </CommandPalette.Item>\n                  )}\n                </CommandPalette.Items>\n              </CommandPalette.Group>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No commands found</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>Navigate</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↵\n            </kbd>\n            <span>Select</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>",
+        "<div className=\"flex flex-col items-start gap-4\">\n      <Button onClick={() => setOpen(true)}>Open Command Palette</Button>\n      {selectedItem && (\n        <p className=\"text-sm text-kumo-subtle\">\n          Last selected:{\" \"}\n          <span className=\"text-kumo-default\">{selectedItem}</span>\n        </p>\n      )}\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={filteredGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        onSelect={(item, { newTab }) => {\n          console.log(\"Selected:\", item.title, newTab ? \"(new tab)\" : \"\");\n          handleSelect(item);\n        }}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"Type a command or search...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(group: CommandGroup) => (\n              <CommandPalette.Group key={group.id} items={group.items}>\n                <CommandPalette.GroupLabel>\n                  {group.label}\n                </CommandPalette.GroupLabel>\n                <CommandPalette.Items>\n                  {(item: CommandItem) => (\n                    <CommandPalette.Item\n                      key={item.id}\n                      value={item}\n                      onClick={() => handleSelect(item)}\n                    >\n                      <span className=\"flex items-center gap-3\">\n                        {item.icon && (\n                          <span className=\"text-kumo-subtle\">{item.icon}</span>\n                        )}\n                        <span>{item.title}</span>\n                      </span>\n                    </CommandPalette.Item>\n                  )}\n                </CommandPalette.Items>\n              </CommandPalette.Group>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No commands found</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>Navigate</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↵\n            </kbd>\n            <span>Select</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>",
         "<div>\n      <Button onClick={() => setOpen(true)}>Open Simple Palette</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={simpleItems}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(item) => item.title}\n        onSelect={(item) => {\n          console.log(\"Selected:\", item.title);\n          setOpen(false);\n        }}\n        getSelectableItems={(items) => items}\n      >\n        <CommandPalette.Input placeholder=\"Search actions...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(item: SimpleItem) => (\n              <CommandPalette.Item\n                key={item.id}\n                value={item}\n                onClick={() => {\n                  console.log(\"Clicked:\", item.title);\n                  setOpen(false);\n                }}\n              >\n                {item.title}\n              </CommandPalette.Item>\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No actions found</CommandPalette.Empty>\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>",
-        "<div>\n      <Button onClick={handleOpen}>Open with Loading</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={loading ? [] : sampleGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"Search...\" />\n        <CommandPalette.List>\n          {loading ? (\n            <CommandPalette.Loading />\n          ) : (\n            <>\n              <CommandPalette.Results>\n                {(group: CommandGroup) => (\n                  <CommandPalette.Group key={group.id}>\n                    <CommandPalette.GroupLabel>\n                      {group.label}\n                    </CommandPalette.GroupLabel>\n                    <CommandPalette.Items>\n                      {(item: CommandItem) => (\n                        <CommandPalette.Item\n                          key={item.id}\n                          value={item}\n                          onClick={() => setOpen(false)}\n                        >\n                          <span className=\"flex items-center gap-3\">\n                            {item.icon && (\n                              <span className=\"text-kumo-subtle\">\n                                {item.icon}\n                              </span>\n                            )}\n                            <span>{item.title}</span>\n                          </span>\n                        </CommandPalette.Item>\n                      )}\n                    </CommandPalette.Items>\n                  </CommandPalette.Group>\n                )}\n              </CommandPalette.Results>\n              <CommandPalette.Empty>No results found</CommandPalette.Empty>\n            </>\n          )}\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>",
+        "<div>\n      <Button onClick={handleOpen}>Open with Loading</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={loading ? [] : filteredGroups}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(group) => group.label}\n        getSelectableItems={getSelectableItems}\n      >\n        <CommandPalette.Input placeholder=\"Search...\" />\n        <CommandPalette.List>\n          {loading ? (\n            <CommandPalette.Loading />\n          ) : (\n            <>\n              <CommandPalette.Results>\n                {(group: CommandGroup) => (\n                  <CommandPalette.Group key={group.id} items={group.items}>\n                    <CommandPalette.GroupLabel>\n                      {group.label}\n                    </CommandPalette.GroupLabel>\n                    <CommandPalette.Items>\n                      {(item: CommandItem) => (\n                        <CommandPalette.Item\n                          key={item.id}\n                          value={item}\n                          onClick={() => setOpen(false)}\n                        >\n                          <span className=\"flex items-center gap-3\">\n                            {item.icon && (\n                              <span className=\"text-kumo-subtle\">\n                                {item.icon}\n                              </span>\n                            )}\n                            <span>{item.title}</span>\n                          </span>\n                        </CommandPalette.Item>\n                      )}\n                    </CommandPalette.Items>\n                  </CommandPalette.Group>\n                )}\n              </CommandPalette.Results>\n              <CommandPalette.Empty>No results found</CommandPalette.Empty>\n            </>\n          )}\n        </CommandPalette.List>\n      </CommandPalette.Root>\n    </div>",
         "<div>\n      <Button onClick={() => setOpen(true)}>Open with ResultItem</Button>\n\n      <CommandPalette.Root\n        open={open}\n        onOpenChange={setOpen}\n        items={searchResults}\n        value={search}\n        onValueChange={setSearch}\n        itemToStringValue={(item) => item.title}\n        getSelectableItems={(items) => items}\n      >\n        <CommandPalette.Input placeholder=\"Search documentation...\" />\n        <CommandPalette.List>\n          <CommandPalette.Results>\n            {(item: SearchResult) => (\n              <CommandPalette.ResultItem\n                key={item.id}\n                value={item}\n                title={item.title}\n                breadcrumbs={item.breadcrumbs}\n                icon={item.icon}\n                onClick={() => {\n                  console.log(\"Navigate to:\", item.title);\n                  setOpen(false);\n                }}\n              />\n            )}\n          </CommandPalette.Results>\n          <CommandPalette.Empty>No pages found</CommandPalette.Empty>\n        </CommandPalette.List>\n        <CommandPalette.Footer>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ↑↓\n            </kbd>\n            <span>Navigate</span>\n          </span>\n          <span className=\"flex items-center gap-2\">\n            <kbd className=\"rounded border border-kumo-line bg-kumo-base px-1.5 py-0.5 text-[10px]\">\n              ⌘↵\n            </kbd>\n            <span>Open in new tab</span>\n          </span>\n        </CommandPalette.Footer>\n      </CommandPalette.Root>\n    </div>"
       ],
       "colors": [
@@ -2447,6 +2468,7 @@
         "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Click me</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Modal Title\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </Dialog.Description>\n      </Dialog>\n    </Dialog.Root>",
         "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Modal Title\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n          eiusmod tempor incididunt ut labore et dolore magna aliqua.\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>",
         "<Dialog.Root disablePointerDismissal>\n      <Dialog.Trigger\n        render={(p) => (\n          <Button {...p} variant=\"destructive\">\n            Delete Project\n          </Button>\n        )}\n      />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-center gap-3\">\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-kumo-danger/20\">\n            <Warning size={20} className=\"text-kumo-danger\" />\n          </div>\n          <Dialog.Title className=\"text-xl font-semibold\">\n            Delete Project?\n          </Dialog.Title>\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          This action cannot be undone. This will permanently delete the project\n          and all associated data.\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>",
+        "<Dialog.Root role=\"alertdialog\">\n      <Dialog.Trigger\n        render={(p) => (\n          <Button {...p} variant=\"destructive\">\n            Delete Account\n          </Button>\n        )}\n      />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-center gap-3\">\n          <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-kumo-danger/20\">\n            <Warning size={20} className=\"text-kumo-danger\" weight=\"fill\" />\n          </div>\n          <Dialog.Title className=\"text-xl font-semibold\">\n            Delete Account?\n          </Dialog.Title>\n        </div>\n        <Dialog.Description className=\"text-kumo-subtle\">\n          This action cannot be undone. All your data will be permanently\n          removed from our servers. Are you sure you want to proceed?\n        </Dialog.Description>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"destructive\" {...props}>\n                Delete Account\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>",
         "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Create Resource\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Select a region for your new resource.\n        </Dialog.Description>\n        <Select\n          className=\"w-full\"\n          renderValue={(v) =>\n            regions.find((r) => r.value === v)?.label ?? \"Select region...\"\n          }\n        >\n          {regions.map((region) => (\n            <Select.Option key={region.value} value={region.value}>\n              {region.label}\n            </Select.Option>\n          ))}\n        </Select>\n        <div className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Button variant=\"primary\">Create</Button>\n        </div>\n      </Dialog>\n    </Dialog.Root>",
         "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Create Resource\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Search and select a region for your new resource.\n        </Dialog.Description>\n        <Combobox value={value} onValueChange={setValue} items={regions}>\n          <Combobox.TriggerInput\n            className=\"w-full\"\n            placeholder=\"Search regions...\"\n          />\n          <Combobox.Content>\n            <Combobox.Empty>No regions found</Combobox.Empty>\n            <Combobox.List>\n              {(item: { value: string; label: string }) => (\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 className=\"mt-8 flex justify-end gap-2\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Cancel\n              </Button>\n            )}\n          />\n          <Button variant=\"primary\">Create</Button>\n        </div>\n      </Dialog>\n    </Dialog.Root>",
         "<Dialog.Root>\n      <Dialog.Trigger render={(p) => <Button {...p}>Open Form</Button>} />\n      <Dialog className=\"p-8\">\n        <div className=\"mb-4 flex items-start justify-between gap-4\">\n          <Dialog.Title className=\"text-2xl font-semibold\">\n            Resource Actions\n          </Dialog.Title>\n          <Dialog.Close\n            aria-label=\"Close\"\n            render={(props) => (\n              <Button\n                {...props}\n                variant=\"secondary\"\n                shape=\"square\"\n                icon={<X />}\n                aria-label=\"Close\"\n              />\n            )}\n          />\n        </div>\n        <Dialog.Description className=\"mb-4 text-kumo-subtle\">\n          Choose an action for the selected resource.\n        </Dialog.Description>\n        <DropdownMenu>\n          <DropdownMenu.Trigger render={<Button>Actions</Button>} />\n          <DropdownMenu.Content>\n            <DropdownMenu.Item>Edit</DropdownMenu.Item>\n            <DropdownMenu.Item>Duplicate</DropdownMenu.Item>\n            <DropdownMenu.Separator />\n            <DropdownMenu.Item variant=\"danger\">Delete</DropdownMenu.Item>\n          </DropdownMenu.Content>\n        </DropdownMenu>\n        <div className=\"mt-8 flex justify-end\">\n          <Dialog.Close\n            render={(props) => (\n              <Button variant=\"secondary\" {...props}>\n                Close\n              </Button>\n            )}\n          />\n        </div>\n      </Dialog>\n    </Dialog.Root>"
@@ -3445,7 +3467,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",
@@ -3840,12 +3862,13 @@
         }
       },
       "examples": [
-        "<Select\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"apple\")}\n      items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n    >\n      <Select.Option value=\"apple\">Apple</Select.Option>\n      <Select.Option value=\"banana\">Banana</Select.Option>\n      <Select.Option value=\"cherry\">Cherry</Select.Option>\n    </Select>",
-        "<Select\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    >\n      <Select.Option value=\"bug\">Bug</Select.Option>\n      <Select.Option value=\"documentation\">Documentation</Select.Option>\n      <Select.Option value=\"feature\">Feature</Select.Option>\n    </Select>",
-        "<Select\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={[\n        { value: null, label: \"Please select\" },\n        { value: \"bug\", label: \"Bug\" },\n        { value: \"documentation\", label: \"Documentation\" },\n        { value: \"feature\", label: \"Feature\" },\n      ]}\n    >\n      <Select.Option value=\"bug\">Bug</Select.Option>\n      <Select.Option value=\"documentation\">Documentation</Select.Option>\n      <Select.Option value=\"feature\">Feature</Select.Option>\n    </Select>",
+        "<div className=\"flex gap-2\">\n      <Select\n        className=\"w-[200px]\"\n        value={value}\n        onValueChange={(v) => setValue(v ?? \"apple\")}\n        items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n      />\n\n      <Select\n        value={value}\n        className=\"w-[200px]\"\n        onValueChange={(v) => setValue(v ?? \"apple\")}\n        items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n      >\n        <Select.Option value=\"apple\">Apple</Select.Option>\n        <Select.Option value=\"banana\">Banana</Select.Option>\n        <Select.Option value=\"cherry\">Cherry</Select.Option>\n      </Select>\n    </div>",
+        "<Select\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    />",
+        "<Select\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={[\n        { value: null, label: \"Please select\" },\n        { value: \"bug\", label: \"Bug\" },\n        { value: \"documentation\", label: \"Documentation\" },\n        { value: \"feature\", label: \"Feature\" },\n      ]}\n    />",
+        "<Select\n      className=\"w-[200px]\"\n      value={value}\n      placeholder=\"Please select\"\n      onValueChange={(v) => setValue(v as string | null)}\n      items={[\n        { value: \"bug\", label: \"Bug\" },\n        { value: \"documentation\", label: \"Documentation\" },\n        { value: \"feature\", label: \"Feature\" },\n      ]}\n    />",
         "<Select\n      className=\"w-[200px]\"\n      renderValue={(v) => (\n        <span>\n          {v.emoji} {v.label}\n        </span>\n      )}\n      value={value}\n      onValueChange={(v) => setValue(v as (typeof languages)[0])}\n    >\n      {languages.map((language) => (\n        <Select.Option key={language.value} value={language}>\n          {language.emoji} {language.label}\n        </Select.Option>\n      ))}\n    </Select>",
         "<Select className=\"w-[200px]\" loading />",
-        "<Select\n      className=\"w-[200px]\"\n      loading={loading}\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      placeholder=\"Please select\"\n    >\n      {data?.map((item) => (\n        <Select.Option key={item} value={item}>\n          {item}\n        </Select.Option>\n      ))}\n    </Select>",
+        "<Select\n      className=\"w-[200px]\"\n      loading={loading}\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      placeholder=\"Please select\"\n      items={items}\n    />",
         "<Select\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(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      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 ?? \"Please select 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>"
       ],
@@ -3854,7 +3877,9 @@
         "bg-kumo-overlay",
         "ring-kumo-line",
         "ring-kumo-ring",
-        "text-kumo-default"
+        "text-kumo-danger",
+        "text-kumo-default",
+        "text-kumo-subtle"
       ],
       "subComponents": {
         "Option": {
@@ -4291,16 +4316,19 @@
       "examples": [
         "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.slice(0, 3).map((row) => (\n              <Table.Row key={row.id}>\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
         "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead\n                checked={selectedIds.size === rows.length}\n                indeterminate={\n                  selectedIds.size > 0 && selectedIds.size < rows.length\n                }\n                onValueChange={toggleAll}\n                aria-label=\"Select all rows\"\n              />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {rows.map((row) => (\n              <Table.Row key={row.id}>\n                <Table.CheckCell\n                  checked={selectedIds.has(row.id)}\n                  onValueChange={() => toggleRow(row.id)}\n                  aria-label={`Select ${row.subject}`}\n                />\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header variant=\"compact\">\n            <Table.Row>\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.slice(0, 3).map((row) => (\n              <Table.Row key={row.id}>\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
         "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table>\n          <Table.Header>\n            <Table.Row>\n              <Table.CheckHead\n                checked={selectedIds.size === rows.length}\n                indeterminate={\n                  selectedIds.size > 0 && selectedIds.size < rows.length\n                }\n                onValueChange={toggleAll}\n                aria-label=\"Select all rows\"\n              />\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {rows.map((row) => (\n              <Table.Row\n                key={row.id}\n                variant={selectedIds.has(row.id) ? \"selected\" : \"default\"}\n              >\n                <Table.CheckCell\n                  checked={selectedIds.has(row.id)}\n                  onValueChange={() => toggleRow(row.id)}\n                  aria-label={`Select ${row.subject}`}\n                />\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
         "<LayerCard>\n      <LayerCard.Primary className=\"p-0\">\n        <Table layout=\"fixed\">\n          <colgroup>\n            <col />\n            <col className=\"w-[150px]\" />\n            <col className=\"w-[150px]\" />\n          </colgroup>\n          <Table.Header>\n            <Table.Row>\n              <Table.Head>Subject</Table.Head>\n              <Table.Head>From</Table.Head>\n              <Table.Head>Date</Table.Head>\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {emailData.map((row) => (\n              <Table.Row key={row.id}>\n                <Table.Cell>{row.subject}</Table.Cell>\n                <Table.Cell>{row.from}</Table.Cell>\n                <Table.Cell>{row.date}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </LayerCard.Primary>\n    </LayerCard>",
         "<LayerCard>\n      <LayerCard.Primary className=\"w-full 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": [
         "bg-kumo-base",
+        "bg-kumo-elevated",
         "bg-kumo-ring",
         "bg-kumo-tint",
         "border-kumo-fill",
-        "text-kumo-default"
+        "text-kumo-default",
+        "text-kumo-strong"
       ],
       "subComponents": {
         "Header": {