@cloudflare/kumo 2.5.2 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @cloudflare/kumo
 
+## 2.6.0
+
+### Minor Changes
+
+- 1b04ee9: Add Toolbar for composing explicit toolbar controls into a shared grouped card.
+- 116e0de: feat(chart): add `enableLegendSelection` prop to `TimeseriesChart`
+
+  Opt-in (default `false`) hidden ECharts legend that lets consumers drive series
+  visibility imperatively via the `legendSelect` / `legendUnSelect` /
+  `legendToggleSelect` actions — useful for building a custom interactive legend
+  with `ChartLegend`. Series toggled off via the legend are also excluded from the
+  tooltip. Requires registering ECharts' `LegendComponent`
+  (`echarts.use([LegendComponent])`). When disabled, behaviour is unchanged.
+
+- 815628f: Extend LegendItems to take pointer events & timeseries merges forwardref to support those events
+
+### Patch Changes
+
+- 430689b: Update the Button primary and destructive variants with token-derived gradient treatments.
+- 539e5bf: Fix horizontal scroll in `Sidebar.Content`: always apply `overflow-x: hidden` on the scroll viewport, not just when collapsed. Base UI's `ScrollArea.Viewport` sets `overflow: scroll` as an inline style, which allowed ~14px of horizontal overflow when consumer content (e.g. search buttons with keyboard shortcuts) exceeded the sidebar width.
+- 4378067: feat(radio): add generic value type support to Radio.Group and Radio.Item
+- fb5fed1: Fix the green Badge variant missing its background color token.
+- bdd890c: Keep generated component registry descriptions to JSDoc summaries before markdown sections or code examples.
+
 ## 2.5.2
 
 ### Patch Changes

package/ai/component-registry.json

@@ -4,7 +4,7 @@
     "Autocomplete": {
       "name": "Autocomplete",
       "type": "component",
-      "description": "Autocomplete — free-form text input with an optional filtered suggestion list.  Unlike Combobox, the input value is not restricted to items in the list. Use Combobox when the selected value must come from the list.  Compound component: `Autocomplete` (Root), `.InputGroup`, `.Content`, `.Item`, `.GroupLabel`, `.Group`, `.Separator`, `.List`, `.Collection`.  `InputGroup` renders the text input with Input component styling. Pass a `size` prop to `InputGroup` to match the Input component sizes.",
+      "description": "Autocomplete — free-form text input with an optional filtered suggestion list.",
       "importPath": "@cloudflare/kumo",
       "category": "Other",
       "props": {
@@ -266,12 +266,13 @@
       },
       "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=\"error\">Error</Badge>\n      <Badge variant=\"success\">Success</Badge>\n      <Badge variant=\"warning\">Warning</Badge>\n      <Badge variant=\"info\">Info</Badge>\n      <Badge variant=\"outline\">Outline</Badge>\n      <Badge variant=\"beta\">Beta</Badge>\n    </div>",
-        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"neutral\">Neutral</Badge>\n      <Badge variant=\"red\">Red</Badge>\n      <Badge variant=\"orange\">Orange</Badge>\n      <Badge variant=\"teal\">Teal</Badge>\n      <Badge variant=\"blue\">Blue</Badge>\n      <Badge variant=\"purple\">Purple</Badge>\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"neutral\">Neutral</Badge>\n      <Badge variant=\"red\">Red</Badge>\n      <Badge variant=\"green\">Green</Badge>\n      <Badge variant=\"orange\">Orange</Badge>\n      <Badge variant=\"teal\">Teal</Badge>\n      <Badge variant=\"blue\">Blue</Badge>\n      <Badge variant=\"purple\">Purple</Badge>\n    </div>",
         "<p className=\"flex items-center gap-2\">\n      Workers\n      <Badge variant=\"secondary\">New</Badge>\n    </p>",
         "<div className=\"flex flex-wrap items-center gap-2\">\n      <Badge variant=\"success\" appearance=\"dot\">Healthy</Badge>\n      <Badge variant=\"warning\" appearance=\"dot\">Warning</Badge>\n      <Badge variant=\"error\" appearance=\"dot\">Error</Badge>\n      <Badge variant=\"neutral\" appearance=\"dot\">Neutral</Badge>\n    </div>"
       ],
       "colors": [
         "bg-kumo-badge-blue",
+        "bg-kumo-badge-green",
         "bg-kumo-badge-inverted",
         "bg-kumo-badge-neutral",
         "bg-kumo-badge-orange",
@@ -560,17 +561,16 @@
             "outline": "Bordered button with transparent background"
           },
           "classes": {
-            "primary": "bg-kumo-brand !text-white hover:bg-kumo-brand-hover disabled:bg-kumo-brand/50",
+            "primary": "relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) disabled:opacity-50",
             "secondary": "bg-kumo-base !text-kumo-default ring not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-line data-[state=open]:bg-kumo-base",
             "ghost": "text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit",
-            "destructive": "bg-kumo-danger !text-white hover:bg-kumo-danger/70",
+            "destructive": "relative overflow-hidden bg-(--kumo-button-emphasis-bg) !text-white ring ring-(--kumo-button-emphasis-ring) disabled:opacity-50",
             "secondary-destructive": "bg-kumo-base !text-kumo-danger ring not-disabled:hover:!text-kumo-danger not-disabled:hover:ring-kumo-danger/30 disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-line data-[state=open]:bg-kumo-base",
             "outline": "bg-transparent text-kumo-default ring ring-kumo-line transition-colors not-disabled:hover:text-kumo-strong not-disabled:hover:ring-kumo-focus/25"
           },
           "stateClasses": {
             "primary": {
-              "hover": "hover:bg-kumo-brand-hover",
-              "disabled": "disabled:bg-kumo-brand/50"
+              "disabled": "disabled:opacity-50"
             },
             "secondary": {
               "not-disabled": "not-disabled:hover:bg-kumo-tint",
@@ -581,7 +581,7 @@
               "hover": "hover:bg-kumo-tint"
             },
             "destructive": {
-              "hover": "hover:bg-kumo-danger/70"
+              "disabled": "disabled:opacity-50"
             },
             "secondary-destructive": {
               "not-disabled": "not-disabled:hover:!text-kumo-danger not-disabled:hover:ring-kumo-danger/30",
@@ -665,9 +665,6 @@
       ],
       "colors": [
         "bg-kumo-base",
-        "bg-kumo-brand",
-        "bg-kumo-brand-hover",
-        "bg-kumo-danger",
         "bg-kumo-tint",
         "ring-kumo-brand",
         "ring-kumo-danger",
@@ -2255,7 +2252,7 @@
     "Collapsible": {
       "name": "Collapsible",
       "type": "component",
-      "description": "Collapsible — a composable disclosure component for showing/hiding content.  Built on Base UI's Collapsible with full composition support.  ## Basic Usage  ```tsx const [open, setOpen] = useState(false);  <Collapsible.Root open={open} onOpenChange={setOpen}> <Collapsible.Trigger render={<Button variant=\"ghost\" />}> Show details </Collapsible.Trigger> <Collapsible.Panel className=\"mt-2\"> <Text>Hidden content revealed when expanded.</Text> </Collapsible.Panel> </Collapsible.Root> ```  ## With Default Styling  Use `DefaultTrigger` and `DefaultPanel` for the classic Kumo style:  ```tsx <Collapsible.Root> <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger> <Collapsible.DefaultPanel> <Text>Content with border-left accent</Text> </Collapsible.DefaultPanel> </Collapsible.Root> ```  ## Controlled Accordion Pattern  ```tsx const [activeIndex, setActiveIndex] = useState<number | null>(null);  {items.map((item, i) => ( <Collapsible.Root key={i} open={activeIndex === i} onOpenChange={(open) => setActiveIndex(open ? i : null)} > <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger> <Collapsible.DefaultPanel>{item.content}</Collapsible.DefaultPanel> </Collapsible.Root> ))} ```",
+      "description": "Collapsible — a composable disclosure component for showing/hiding content.",
       "importPath": "@cloudflare/kumo",
       "category": "Display",
       "props": {
@@ -2345,7 +2342,7 @@
     "Combobox": {
       "name": "Combobox",
       "type": "component",
-      "description": "Combobox — autocomplete input with filterable dropdown list.  Compound component: `Combobox` (Root), `.TriggerInput`, `.TriggerValue`, `.TriggerMultipleWithInput`, `.Content`, `.Item`, `.Chip`, `.Input`, `.Empty`, `.GroupLabel`, `.Group`, `.List`, `.Collection`.",
+      "description": "Combobox — autocomplete input with filterable dropdown list.",
       "importPath": "@cloudflare/kumo",
       "category": "Input",
       "props": {
@@ -2582,7 +2579,7 @@
     "CommandPalette": {
       "name": "CommandPalette",
       "type": "component",
-      "description": "CommandPalette — accessible command palette / spotlight search overlay.  Compound component: `CommandPalette.Root` (or `.Dialog` + `.Panel`), `.Input`, `.List`, `.Results`, `.Items`, `.Group`, `.GroupLabel`, `.Item`, `.ResultItem`, `.HighlightedText`, `.Empty`, `.Loading`, `.Footer`.  Built on `@base-ui/react/autocomplete` + `@base-ui/react/dialog`.",
+      "description": "CommandPalette — accessible command palette / spotlight search overlay.",
       "importPath": "@cloudflare/kumo",
       "category": "Navigation",
       "props": {
@@ -2623,7 +2620,7 @@
     "DatePicker": {
       "name": "DatePicker",
       "type": "component",
-      "description": "DatePicker — a date selection calendar.  Built on [react-day-picker](https://daypicker.dev) with Kumo styling. Supports three selection modes: single, multiple, and range.",
+      "description": "DatePicker — a date selection calendar.",
       "importPath": "@cloudflare/kumo",
       "category": "Other",
       "props": {
@@ -2653,7 +2650,7 @@
     "DateRangePicker": {
       "name": "DateRangePicker",
       "type": "component",
-      "description": "DateRangePicker — dual-calendar date range selector.  Renders two side-by-side month calendars with click-to-select start/end dates, hover preview of the range, a timezone footer, and a reset button.",
+      "description": "DateRangePicker — dual-calendar date range selector.",
       "importPath": "@cloudflare/kumo",
       "category": "Input",
       "props": {
@@ -2936,7 +2933,7 @@
     "DropdownMenu": {
       "name": "DropdownMenu",
       "type": "component",
-      "description": "DropdownMenu — accessible dropdown menu anchored to a trigger.  Compound component: `DropdownMenu` (Root), `.Trigger`, `.Content`, `.Item`, `.LinkItem`, `.CheckboxItem`, `.RadioGroup`, `.RadioItem`, `.RadioItemIndicator`, `.Sub`, `.SubTrigger`, `.SubContent`, `.Label`, `.Separator`, `.Shortcut`, `.Group`.  Built on `@base-ui/react/menu`.",
+      "description": "DropdownMenu — accessible dropdown menu anchored to a trigger.",
       "importPath": "@cloudflare/kumo",
       "category": "Overlay",
       "props": {
@@ -3784,7 +3781,7 @@
     "Label": {
       "name": "Label",
       "type": "component",
-      "description": "Label component for form fields.  Provides a standardized way to display labels with optional indicators: - Optional indicator: gray \"(optional)\" text when `showOptional={true}` - Tooltip: info icon with hover tooltip for additional context",
+      "description": "Label component for form fields.",
       "importPath": "@cloudflare/kumo",
       "category": "Other",
       "props": {
@@ -4072,7 +4069,7 @@
     "MenuBar": {
       "name": "MenuBar",
       "type": "component",
-      "description": "MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.  Each option renders as a `<button>` with a Tooltip. The active option is visually highlighted with an elevated background.",
+      "description": "MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.",
       "importPath": "@cloudflare/kumo",
       "category": "Navigation",
       "props": {
@@ -4430,37 +4427,33 @@
     "Radio": {
       "name": "Radio",
       "type": "component",
-      "description": "Radio — radio button group for single-select choices.  Compound component: `Radio.Group` (with built-in Fieldset), `Radio.Item`, and `Radio.Legend`. Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.",
+      "description": "Radio — radio button group for single-select choices.",
       "importPath": "@cloudflare/kumo",
       "category": "Input",
       "props": {
-        "legend": {
-          "type": "string",
-          "optional": true,
-          "description": "Legend text for the group (required for accessibility). For more control over legend styling, omit this prop and use `<Radio.Legend>` as a child instead."
-        },
-        "children": {
-          "type": "ReactNode",
-          "optional": true,
-          "description": "Child Radio.Item components (and optionally a Radio.Legend)"
-        },
-        "orientation": {
+        "variant": {
           "type": "enum",
-          "optional": true,
-          "description": "Layout direction of the radio items",
           "values": [
-            "vertical",
-            "horizontal"
-          ]
+            "default",
+            "error"
+          ],
+          "default": "default",
+          "descriptions": {
+            "default": "Default radio appearance",
+            "error": "Error state for validation failures"
+          },
+          "classes": {
+            "default": "ring-kumo-hairline",
+            "error": "ring-kumo-danger"
+          }
         },
         "appearance": {
           "type": "enum",
-          "optional": true,
-          "description": "Visual appearance applied to all Radio.Item children.\n- `\"default\"` — Standard inline radio items\n- `\"card\"` — Choice card with border, padding, and highlighted selection state\n\nIndividual items can override this with their own `appearance` prop.",
           "values": [
             "default",
             "card"
           ],
+          "default": "default",
           "descriptions": {
             "default": "Standard inline radio item",
             "card": "Choice card appearance with border, padding, and highlighted selection state"
@@ -4472,47 +4465,27 @@
             "card": {
               "hover": "hover:bg-kumo-tint"
             }
-          },
-          "default": "default"
+          }
         },
-        "error": {
+        "className": {
           "type": "string",
-          "optional": true,
-          "description": "Error message for the group"
+          "description": "Additional CSS classes"
         },
-        "description": {
+        "children": {
           "type": "ReactNode",
-          "optional": true,
-          "description": "Helper text for the group"
+          "description": "Child elements"
         },
         "value": {
-          "type": "string",
-          "optional": true,
-          "description": "Value of the radio that should be selected (controlled)"
-        },
-        "disabled": {
-          "type": "boolean",
-          "optional": true,
-          "description": "Whether all radios in the group are disabled"
-        },
-        "controlPosition": {
-          "type": "enum",
-          "optional": true,
-          "description": "Position of radio control relative to label: \"start\" puts radio before label, \"end\" puts label before radio. Defaults to \"start\" for default appearance and \"end\" for card appearance.",
-          "values": [
-            "start",
-            "end"
-          ]
+          "type": "T",
+          "description": "The controlled value of the selected radio item."
         },
-        "name": {
-          "type": "string",
-          "optional": true,
-          "description": "Form submission name for the radio group"
+        "defaultValue": {
+          "type": "T",
+          "description": "The uncontrolled initial value of the selected radio item."
         },
-        "className": {
-          "type": "string",
-          "optional": true,
-          "description": "Additional CSS classes"
+        "onValueChange": {
+          "type": "(value: T, eventDetails: RadioGroupChangeEventDetails) => void",
+          "description": "Callback fired when the selected value changes. The second argument carries native event details about the interaction."
         }
       },
       "examples": [
@@ -4527,6 +4500,7 @@
         "<Radio.Group defaultValue=\"all\" value={value} onValueChange={setValue}>\n      <Radio.Legend className=\"sr-only\">Paths</Radio.Legend>\n      <Radio.Item label=\"Allow all paths\" value=\"all\" />\n      <Radio.Item label=\"Restrict to specific paths\" value=\"specific\" />\n    </Radio.Group>",
         "<Radio.Group value={value} onValueChange={setValue}>\n      <Radio.Legend className=\"text-sm font-normal text-kumo-subtle\">\n        Notification preference\n      </Radio.Legend>\n      <Radio.Item label=\"Email\" value=\"email\" />\n      <Radio.Item label=\"SMS\" value=\"sms\" />\n      <Radio.Item label=\"Push notification\" value=\"push\" />\n    </Radio.Group>",
         "<Radio.Group\n      legend=\"Choose a plan\"\n      appearance=\"card\"\n      controlPosition=\"start\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item\n        label=\"Free\"\n        description=\"For personal or hobby projects that aren't business-critical.\"\n        value=\"free\"\n      />\n      <Radio.Item\n        label=\"Pro\"\n        description=\"For professional websites that aren't business-critical.\"\n        value=\"pro\"\n      />\n    </Radio.Group>",
+        "<div className=\"grid grid-cols-2 gap-6\">\n      <Radio.Group<number>\n        legend=\"Items per page\"\n        value={pageSize}\n        onValueChange={setPageSize}\n      >\n        <Radio.Item<number> label=\"10\" value={10} />\n        <Radio.Item<number> label=\"25\" value={25} />\n        <Radio.Item<number> label=\"50\" value={50} />\n      </Radio.Group>\n      <Radio.Group<ThemeType>\n        legend=\"Theme\"\n        value={theme}\n        onValueChange={setTheme}\n      >\n        <Radio.Item<ThemeType> label=\"Light\" value={ThemeType.light} />\n        <Radio.Item<ThemeType> label=\"Dark\" value={ThemeType.dark} />\n        <Radio.Item<ThemeType> label=\"System\" value={ThemeType.system} />\n      </Radio.Group>\n    </div>",
         "<Radio.Group\n      legend=\"Choose a plan\"\n      appearance=\"card\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item\n        label={\n          <span className=\"flex items-center gap-2\">\n            Free\n            <Badge variant=\"neutral\">$0</Badge>\n          </span>\n        }\n        description=\"For personal or hobby projects.\"\n        value=\"free\"\n      />\n      <Radio.Item\n        label={\n          <span className=\"flex items-center gap-2\">\n            Pro\n            <Badge variant=\"primary\">Popular</Badge>\n          </span>\n        }\n        description=\"For professional websites.\"\n        value=\"pro\"\n      />\n    </Radio.Group>",
         "<Radio.Group\n      legend=\"Choose a plan\"\n      appearance=\"card\"\n      orientation=\"horizontal\"\n      value={value}\n      onValueChange={setValue}\n    >\n      <Radio.Item\n        label=\"Free\"\n        description=\"For personal or hobby projects that aren't business-critical.\"\n        value=\"free\"\n      />\n      <Radio.Item\n        label=\"Pro\"\n        description=\"For professional websites that aren't business-critical.\"\n        value=\"pro\"\n      />\n      <Radio.Item\n        label=\"Business\"\n        description=\"For small businesses operating online.\"\n        value=\"business\"\n      />\n      <Radio.Item\n        label=\"Contract\"\n        description=\"For mission-critical applications that are core to your business.\"\n        value=\"contract\"\n      />\n    </Radio.Group>"
       ],
@@ -4556,53 +4530,17 @@
           "name": "Group",
           "description": "Group sub-component",
           "props": {
-            "legend": {
-              "type": "string",
-              "optional": true
-            },
-            "children": {
-              "type": "ReactNode",
-              "required": true
-            },
-            "orientation": {
-              "type": "\"vertical\" | \"horizontal\"",
-              "optional": true
-            },
-            "appearance": {
-              "type": "KumoRadioAppearance",
-              "optional": true
-            },
-            "error": {
-              "type": "string",
-              "optional": true
-            },
-            "description": {
-              "type": "ReactNode",
-              "optional": true
-            },
             "value": {
-              "type": "string",
-              "optional": true
+              "type": "T",
+              "description": "The controlled value of the selected radio item."
             },
-            "disabled": {
-              "type": "boolean",
-              "optional": true
-            },
-            "label": {
-              "type": "\"start\" puts radio before label",
-              "required": true
-            },
-            "controlPosition": {
-              "type": "RadioControlPosition",
-              "optional": true
-            },
-            "name": {
-              "type": "string",
-              "optional": true
+            "defaultValue": {
+              "type": "T",
+              "description": "The uncontrolled initial value of the selected radio item."
             },
-            "className": {
-              "type": "string",
-              "optional": true
+            "onValueChange": {
+              "type": "(value: T, eventDetails: RadioGroupChangeEventDetails) => void",
+              "description": "Callback fired when the selected value changes. The second argument carries native event details about the interaction."
             }
           }
         },
@@ -4961,7 +4899,7 @@
     "Sidebar": {
       "name": "Sidebar",
       "type": "component",
-      "description": "Sidebar — responsive navigation panel with expand/collapse support.  Compound component: `Sidebar` (root `<aside>`), `.Provider`, `.Header`, `.Content`, `.Footer`, `.Group`, `.GroupLabel`, `.Menu`, `.MenuItem`, `.MenuButton`, `.MenuBadge`, `.MenuSub`, `.MenuSubItem`, `.MenuSubButton`, `.Separator`, `.Trigger`, `.Rail`, `.MenuChevron`, `.Collapsible`, `.CollapsibleTrigger`, `.CollapsibleContent`.",
+      "description": "Sidebar — responsive navigation panel with expand/collapse support.",
       "importPath": "@cloudflare/kumo",
       "category": "Other",
       "props": {
@@ -5689,7 +5627,7 @@
     "Table": {
       "name": "Table",
       "type": "component",
-      "description": "Table — semantic HTML table with styled rows, cells, and selection support.  Compound component: `Table` (Root), `.Header`, `.Head`, `.Body`, `.Row`, `.Cell`, `.Footer`, `.CheckCell`, `.CheckHead`, `.ResizeHandle`.",
+      "description": "Table — semantic HTML table with styled rows, cells, and selection support.",
       "importPath": "@cloudflare/kumo",
       "category": "Other",
       "props": {
@@ -5818,7 +5756,7 @@
     "TableOfContents": {
       "name": "TableOfContents",
       "type": "component",
-      "description": "TableOfContents — presentational compound component for section navigation.  Purely visual; all interaction logic (scroll tracking, active state management) is left to the consumer.",
+      "description": "TableOfContents — presentational compound component for section navigation.",
       "importPath": "@cloudflare/kumo",
       "category": "Other",
       "props": {
@@ -6169,7 +6107,7 @@
     "Toasty": {
       "name": "Toasty",
       "type": "component",
-      "description": "Toasty — toast notification provider and viewport.  Renders a `Toast.Provider` with a fixed-position viewport in the bottom-right corner. Toasts stack with smooth enter/exit animations, swipe-to-dismiss, and expand-on-hover.  Built on `@base-ui/react/toast`.",
+      "description": "Toasty — toast notification provider and viewport.",
       "importPath": "@cloudflare/kumo",
       "category": "Feedback",
       "props": {
@@ -6274,6 +6212,112 @@
         }
       }
     },
+    "Toolbar": {
+      "name": "Toolbar",
+      "type": "component",
+      "description": "Toolbar component",
+      "importPath": "@cloudflare/kumo",
+      "category": "Other",
+      "props": {
+        "disabled": {
+          "type": "boolean",
+          "optional": true
+        },
+        "orientation": {
+          "type": "ToolbarRoot.Orientation",
+          "optional": true,
+          "description": "The orientation of the toolbar."
+        },
+        "loopFocus": {
+          "type": "boolean",
+          "optional": true,
+          "description": "If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached."
+        },
+        "id": {
+          "type": "string",
+          "optional": true
+        },
+        "lang": {
+          "type": "string",
+          "optional": true
+        },
+        "title": {
+          "type": "string",
+          "optional": true
+        },
+        "className": {
+          "type": "string | object",
+          "optional": true,
+          "description": "CSS class applied to the element, or a function that returns a class based on the component's state."
+        },
+        "render": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Allows you to replace the component's HTML element with a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+        },
+        "children": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Toolbar controls rendered as one grouped card."
+        },
+        "size": {
+          "type": "enum",
+          "optional": true,
+          "description": "Locks every toolbar item to this size.",
+          "values": [
+            "xs",
+            "sm",
+            "base",
+            "lg"
+          ],
+          "descriptions": {
+            "xs": "Extra small toolbar for compact UIs",
+            "sm": "Small toolbar for secondary controls",
+            "base": "Default toolbar size",
+            "lg": "Large toolbar for prominent controls"
+          },
+          "classes": {
+            "xs": "text-xs",
+            "sm": "text-xs",
+            "base": "text-base",
+            "lg": "text-base"
+          },
+          "default": "base"
+        }
+      },
+      "examples": [
+        "<Toolbar className=\"w-full max-w-md\">\n      <Toolbar.InputGroup aria-label=\"Search DNS records\" className=\"flex-1\">\n        <InputGroup.Addon>\n          <MagnifyingGlassIcon />\n        </InputGroup.Addon>\n        <InputGroup.Input placeholder=\"Search DNS records\" />\n      </Toolbar.InputGroup>\n      <Toolbar.Button icon={FunnelSimpleIcon} aria-label=\"Filter\" />\n      <Toolbar.Button icon={GearSixIcon} aria-label=\"Settings\" />\n    </Toolbar>",
+        "<div className=\"grid gap-3\">\n      {([\"xs\", \"sm\", \"base\", \"lg\"] as const).map((size) => (\n        <div key={size} className=\"flex items-center gap-3\">\n          <span className=\"w-10 text-sm text-kumo-subtle\">{size}</span>\n          <Toolbar size={size} className=\"w-fit\">\n            <Toolbar.Input aria-label={`${size} search`} placeholder=\"Search...\" />\n            <Toolbar.Button>Apply</Toolbar.Button>\n          </Toolbar>\n        </div>\n      ))}\n    </div>",
+        "<Toolbar className=\"w-full max-w-md\">\n      <Toolbar.Input\n        aria-label=\"Search DNS records\"\n        placeholder=\"Search DNS records\"\n        className=\"flex-1\"\n      />\n      <Toolbar.Button icon={FunnelSimpleIcon} aria-label=\"Filter\" />\n      <Toolbar.Button icon={GearSixIcon} aria-label=\"Settings\" />\n    </Toolbar>",
+        "<Toolbar className=\"w-full max-w-lg\">\n      <Toolbar.InputGroup aria-label=\"Worker subdomain\" className=\"flex-1\">\n        <InputGroup.Input placeholder=\"my-worker\" />\n        <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n      </Toolbar.InputGroup>\n      <Toolbar.Button>Visit</Toolbar.Button>\n    </Toolbar>",
+        "<Toolbar>\n      <Toolbar.Button icon={UploadSimpleIcon}>Upload</Toolbar.Button>\n      <Toolbar.Button icon={DownloadSimpleIcon}>Download</Toolbar.Button>\n    </Toolbar>",
+        "<Toolbar className=\"w-full max-w-lg\">\n      <Toolbar.Input aria-label=\"Search records\" className=\"flex-1\" placeholder=\"Search\" />\n      <Toolbar.Button icon={MagnifyingGlassIcon} aria-label=\"Search\" />\n    </Toolbar>"
+      ],
+      "colors": [
+        "bg-kumo-control",
+        "border-kumo-line",
+        "ring-kumo-brand",
+        "ring-kumo-focus",
+        "ring-kumo-line"
+      ],
+      "subComponents": {
+        "Button": {
+          "name": "Button",
+          "description": "Button sub-component",
+          "props": {}
+        },
+        "Input": {
+          "name": "Input",
+          "description": "Input sub-component",
+          "props": {}
+        },
+        "InputGroup": {
+          "name": "InputGroup",
+          "description": "InputGroup sub-component",
+          "props": {}
+        }
+      }
+    },
     "Tooltip": {
       "name": "Tooltip",
       "type": "component",
@@ -6555,7 +6599,7 @@
     "ResourceListPage": {
       "name": "ResourceListPage",
       "type": "block",
-      "description": "ResourceListPage - A layout component for resource list pages  Layouts are page-level components that provide consistent structure for common page patterns like resource lists, dashboards, and settings.",
+      "description": "ResourceListPage - A layout component for resource list pages",
       "importPath": "@cloudflare/kumo",
       "category": "Layout",
       "props": {
@@ -6616,6 +6660,7 @@
         "Sidebar",
         "Table",
         "TableOfContents",
+        "Toolbar",
         "DeleteResource"
       ],
       "Display": [
@@ -6711,6 +6756,7 @@
       "Tabs",
       "Text",
       "Toasty",
+      "Toolbar",
       "Tooltip"
     ],
     "byType": {
@@ -6755,6 +6801,7 @@
         "Tabs",
         "Text",
         "Toasty",
+        "Toolbar",
         "Tooltip"
       ],
       "block": [