@cloudflare/kumo 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @cloudflare/kumo
 
+## 2.0.2
+
+### Patch Changes
+
+- fbf3eef: Forward all Base UI Panel props (including `keepMounted` and `hiddenUntilFound`) through `Collapsible.DefaultPanel`. Previously these were silently dropped because `DefaultPanel` used a standalone props interface instead of extending `BasePanelProps`.
+- 40491c2: Fix registry codegen to match demo examples when component export name differs from directory name (e.g. DropdownMenu vs dropdown). This restores missing examples for DropdownMenu and other affected components.
+- 3427221: TooltipProvider props (`delay`, `closeDelay`, `timeout`) are now shown in the Tooltip component's API Reference on the docs site.
+
+## 2.0.1
+
+### Patch Changes
+
+- e53bd68: Rebalanced semantic text token usage to improve hierarchy and consistency across components, docs, and generated Figma output.
+  - Updated theme token definitions so `text-kumo-strong` represents high-emphasis text and `text-kumo-inactive` is lighter/inactive in both light and dark modes.
+  - Migrated affected UI surfaces from `text-kumo-strong` to `text-kumo-subtle` where content is supportive metadata, labels, or secondary text.
+  - Synced token usage in docs and Figma code generators with the updated semantic text mapping.
+
 ## 2.0.0
 
 ### Major Changes

package/ai/component-registry.json

@@ -2123,7 +2123,7 @@
         "<div className=\"flex flex-wrap items-center gap-8\">\n      <CloudflareLogo className=\"w-28\" color=\"color\" />\n      <div className=\"rounded-lg bg-white p-4\">\n        <CloudflareLogo className=\"w-28\" color=\"black\" />\n      </div>\n      <div className=\"rounded-lg bg-black p-4\">\n        <CloudflareLogo className=\"w-28\" color=\"white\" />\n      </div>\n    </div>",
         "<div className=\"flex flex-wrap items-center gap-8\">\n      <CloudflareLogo variant=\"glyph\" className=\"w-12\" color=\"color\" />\n      <div className=\"rounded-lg bg-white p-4\">\n        <CloudflareLogo variant=\"glyph\" className=\"w-12\" color=\"black\" />\n      </div>\n      <div className=\"rounded-lg bg-black p-4\">\n        <CloudflareLogo variant=\"glyph\" className=\"w-12\" color=\"white\" />\n      </div>\n    </div>",
         "<div className=\"flex flex-wrap items-end gap-6\">\n      <CloudflareLogo className=\"w-20\" />\n      <CloudflareLogo className=\"w-28\" />\n      <CloudflareLogo className=\"w-44\" />\n    </div>",
-        "<div className=\"flex items-center gap-4\">\n      <DropdownMenu>\n        <DropdownMenu.Trigger>\n          <button\n            type=\"button\"\n            className=\"flex items-center gap-2 rounded-lg bg-black px-4 py-3 text-white transition-opacity hover:opacity-80\"\n          >\n            <CloudflareLogo variant=\"glyph\" color=\"white\" className=\"w-8\" />\n            <span className=\"font-medium\">Logo</span>\n          </button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content>\n          <DropdownMenu.Item\n            icon={CloudIcon}\n            onSelect={() =>\n              copyToClipboard(\n                generateCloudflareLogoSvg({ variant: \"glyph\" }),\n                \"glyph\",\n              )\n            }\n          >\n            {copied === \"glyph\" ? \"Copied!\" : \"Copy logo as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={CodeIcon}\n            onSelect={() =>\n              copyToClipboard(\n                generateCloudflareLogoSvg({ variant: \"full\" }),\n                \"full\",\n              )\n            }\n          >\n            {copied === \"full\" ? \"Copied!\" : \"Copy full logo as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={DownloadSimpleIcon}\n            onSelect={() =>\n              window.open(\n                \"https://www.cloudflare.com/press-kit/\",\n                \"_blank\",\n                \"noopener\",\n              )\n            }\n          >\n            Download brand assets\n          </DropdownMenu.Item>\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item\n            icon={ArrowSquareOutIcon}\n            onSelect={() =>\n              window.open(\n                \"https://www.cloudflare.com/brand-assets/\",\n                \"_blank\",\n                \"noopener\",\n              )\n            }\n          >\n            Visit brand guidelines\n          </DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      <span className=\"text-sm text-kumo-subtle\">\n        Click to open the brand assets menu\n      </span>\n    </div>",
+        "<div className=\"flex items-center gap-4\">\n      <DropdownMenu>\n        <DropdownMenu.Trigger>\n          <button\n            type=\"button\"\n            className=\"flex items-center gap-2 rounded-lg bg-black px-4 py-3 text-white transition-opacity hover:opacity-80\"\n          >\n            <CloudflareLogo variant=\"glyph\" color=\"white\" className=\"w-8\" />\n            <span className=\"font-medium\">Logo</span>\n          </button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Content>\n          <DropdownMenu.Item\n            icon={CloudIcon}\n            onClick={() =>\n              copyToClipboard(\n                generateCloudflareLogoSvg({ variant: \"glyph\" }),\n                \"glyph\",\n              )\n            }\n          >\n            {copied === \"glyph\" ? \"Copied!\" : \"Copy logo as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={CodeIcon}\n            onClick={() =>\n              copyToClipboard(\n                generateCloudflareLogoSvg({ variant: \"full\" }),\n                \"full\",\n              )\n            }\n          >\n            {copied === \"full\" ? \"Copied!\" : \"Copy full logo as SVG\"}\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={DownloadSimpleIcon}\n            onClick={() =>\n              window.open(\n                \"https://www.cloudflare.com/press-kit/\",\n                \"_blank\",\n                \"noopener\",\n              )\n            }\n          >\n            Download brand assets\n          </DropdownMenu.Item>\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item\n            icon={ArrowSquareOutIcon}\n            onClick={() =>\n              window.open(\n                \"https://www.cloudflare.com/brand-assets/\",\n                \"_blank\",\n                \"noopener\",\n              )\n            }\n          >\n            Visit brand guidelines\n          </DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n\n      <span className=\"text-sm text-kumo-subtle\">\n        Click to open the brand assets menu\n      </span>\n    </div>",
         "<PoweredByCloudflare />",
         "<div className=\"flex flex-wrap items-center gap-4\">\n      <PoweredByCloudflare />\n      <PoweredByCloudflare color=\"black\" />\n      <div className=\"rounded-lg bg-black p-3\">\n        <PoweredByCloudflare color=\"white\" />\n      </div>\n    </div>",
         "<footer className=\"flex w-full items-center justify-between rounded-lg border border-kumo-hairline bg-kumo-elevated px-6 py-4\">\n      <span className=\"text-sm text-kumo-subtle\">\n        &copy; 2026 Your Company. All rights reserved.\n      </span>\n      <PoweredByCloudflare />\n    </footer>"
@@ -2181,7 +2181,7 @@
       "colors": [
         "bg-kumo-base",
         "border-kumo-fill",
-        "text-kumo-strong"
+        "text-kumo-subtle"
       ],
       "subComponents": {
         "Block": {
@@ -2201,7 +2201,7 @@
       },
       "styling": {
         "baseTokens": [
-          "text-kumo-strong"
+          "text-kumo-subtle"
         ],
         "typography": {
           "fontFamily": "font-mono",
@@ -2242,6 +2242,7 @@
         "<div className=\"w-full\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Kumo is Cloudflare's new design system.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>",
         "<div className=\"w-full space-y-2\">\n      <Collapsible.Root open={open1} onOpenChange={setOpen1}>\n        <Collapsible.DefaultTrigger>What is Kumo?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Kumo is Cloudflare's new design system.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n      <Collapsible.Root open={open2} onOpenChange={setOpen2}>\n        <Collapsible.DefaultTrigger>How do I use it?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Install the components and import them into your project.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n      <Collapsible.Root open={open3} onOpenChange={setOpen3}>\n        <Collapsible.DefaultTrigger>Is it open source?</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel>\n          <Text>Check the repository for license information.</Text>\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>",
         "<div className=\"w-full\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.Trigger\n          render={<Button variant=\"secondary\" size=\"sm\" />}\n        >\n          {isOpen ? \"Hide details\" : \"Show details\"}\n        </Collapsible.Trigger>\n        <Collapsible.Panel className=\"mt-3 rounded-lg bg-kumo-tint p-4\">\n          <Text>\n            This panel uses custom styling instead of the default border-left accent.\n          </Text>\n        </Collapsible.Panel>\n      </Collapsible.Root>\n    </div>",
+        "<div className=\"w-full space-y-4\">\n      <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>\n        <Collapsible.DefaultTrigger>Edit details</Collapsible.DefaultTrigger>\n        <Collapsible.DefaultPanel keepMounted>\n          <Text>\n            Type something below, then collapse and re-open — your input is\n            preserved because the panel stays mounted.\n          </Text>\n          <Input label=\"Name\" placeholder=\"Type here…\" />\n        </Collapsible.DefaultPanel>\n      </Collapsible.Root>\n    </div>",
         "<div className=\"w-full space-y-2\">\n      {items.map((item, i) => (\n        <Collapsible.Root\n          key={i}\n          open={activeIndex === i}\n          onOpenChange={(open) => setActiveIndex(open ? i : null)}\n        >\n          <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger>\n          <Collapsible.DefaultPanel>\n            <Text>{item.content}</Text>\n          </Collapsible.DefaultPanel>\n        </Collapsible.Root>\n      ))}\n    </div>"
       ],
       "colors": [
@@ -2421,7 +2422,6 @@
         "ring-kumo-hairline",
         "ring-kumo-line",
         "text-kumo-default",
-        "text-kumo-strong",
         "text-kumo-subtle"
       ],
       "subComponents": {
@@ -2561,7 +2561,6 @@
         "ring-kumo-brand",
         "ring-kumo-hairline",
         "text-kumo-default",
-        "text-kumo-strong",
         "text-kumo-subtle"
       ]
     },
@@ -2588,7 +2587,7 @@
         "<div className=\"flex flex-col gap-4\">\n      <DatePicker\n        mode=\"range\"\n        selected={range}\n        onChange={setRange}\n        min={3}\n        max={7}\n        footer={\n          <span className=\"text-xs text-kumo-subtle\">Select 3-7 nights</span>\n        }\n      />\n    </div>",
         "<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {date ? date.toLocaleDateString() : \"Pick a date\"}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker mode=\"single\" selected={date} onChange={setDate} />\n      </Popover.Content>\n    </Popover>",
         "<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {formatRange()}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-3\">\n        <DatePicker\n          mode=\"range\"\n          selected={range}\n          onChange={setRange}\n          numberOfMonths={2}\n        />\n      </Popover.Content>\n    </Popover>",
-        "<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {formatRange()}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-0\">\n        <div className=\"flex\">\n          <div className=\"flex flex-col gap-1 border-r border-kumo-hairline p-2 text-sm\">\n            {presets.map((preset) => {\n              const isActive = isPresetActive(preset);\n              return (\n                <button\n                  key={preset.label}\n                  type=\"button\"\n                  onClick={() => handlePresetClick(preset)}\n                  className={`rounded-md px-3 py-1.5 text-left whitespace-nowrap ${\n                    isActive\n                      ? \"bg-kumo-bg-inverse text-kumo-text-inverse\"\n                      : \"text-kumo-strong hover:bg-kumo-control\"\n                  }`}\n                >\n                  {preset.label}\n                </button>\n              );\n            })}\n          </div>\n          <div className=\"p-3\">\n            <DatePicker\n              mode=\"range\"\n              selected={range}\n              onChange={setRange}\n              month={month}\n              onMonthChange={setMonth}\n              numberOfMonths={2}\n            />\n          </div>\n        </div>\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger\n        render={<Button variant=\"outline\" icon={CalendarDotsIcon} />}\n      >\n        {formatRange()}\n      </Popover.Trigger>\n      <Popover.Content className=\"p-0\">\n        <div className=\"flex\">\n          <div className=\"flex flex-col gap-1 border-r border-kumo-hairline p-2 text-sm\">\n            {presets.map((preset) => {\n              const isActive = isPresetActive(preset);\n              return (\n                <button\n                  key={preset.label}\n                  type=\"button\"\n                  onClick={() => handlePresetClick(preset)}\n                  className={`rounded-md px-3 py-1.5 text-left whitespace-nowrap ${\n                    isActive\n                      ? \"bg-kumo-bg-inverse text-kumo-text-inverse\"\n                      : \"text-kumo-subtle hover:bg-kumo-control\"\n                  }`}\n                >\n                  {preset.label}\n                </button>\n              );\n            })}\n          </div>\n          <div className=\"p-3\">\n            <DatePicker\n              mode=\"range\"\n              selected={range}\n              onChange={setRange}\n              month={month}\n              onMonthChange={setMonth}\n              numberOfMonths={2}\n            />\n          </div>\n        </div>\n      </Popover.Content>\n    </Popover>",
         "<DatePicker\n      mode=\"multiple\"\n      selected={dates}\n      onChange={setDates}\n      max={maxDays}\n      disabled={unavailableDates}\n      fixedWeeks\n      footer={\n        <p className=\"text-xs text-kumo-subtle pt-2 w-full\">\n          {selectedCount}/{maxDays} days selected. Grayed dates are unavailable.\n        </p>\n      }\n    />"
       ],
       "colors": [
@@ -2670,7 +2669,6 @@
         "ring-kumo-focus",
         "text-kumo-default",
         "text-kumo-inverse",
-        "text-kumo-strong",
         "text-kumo-subtle"
       ],
       "styling": {
@@ -2903,7 +2901,15 @@
           "default": "default"
         }
       },
-      "examples": [],
+      "examples": [
+        "<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button icon={PlusIcon}>Add</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Item>Worker</DropdownMenu.Item>\n        <DropdownMenu.Item>Pages</DropdownMenu.Item>\n        <DropdownMenu.Item>KV Namespace</DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>",
+        "<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button>View Options</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Group>\n          <DropdownMenu.Label>Display</DropdownMenu.Label>\n          <DropdownMenu.CheckboxItem\n            checked={showSidebar}\n            onCheckedChange={setShowSidebar}\n          >\n            Show sidebar\n          </DropdownMenu.CheckboxItem>\n          <DropdownMenu.CheckboxItem\n            checked={showLineNumbers}\n            onCheckedChange={setShowLineNumbers}\n          >\n            Show line numbers\n          </DropdownMenu.CheckboxItem>\n          <DropdownMenu.CheckboxItem\n            checked={wordWrap}\n            onCheckedChange={setWordWrap}\n          >\n            Word wrap\n          </DropdownMenu.CheckboxItem>\n        </DropdownMenu.Group>\n      </DropdownMenu.Content>\n    </DropdownMenu>",
+        "<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button icon={UserIcon}>Account</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Item icon={UserIcon}>Profile</DropdownMenu.Item>\n        <DropdownMenu.Item icon={CreditCardIcon}>Billing</DropdownMenu.Item>\n        <DropdownMenu.Item icon={MoonIcon}>Dark mode</DropdownMenu.Item>\n\n        {/* Language submenu with RadioGroup */}\n        <DropdownMenu.Sub>\n          <DropdownMenu.SubTrigger>Language</DropdownMenu.SubTrigger>\n          <DropdownMenu.SubContent>\n            <DropdownMenu.Group>\n              <DropdownMenu.RadioGroup\n                value={language}\n                onValueChange={setLanguage}\n              >\n                {languages.map((lang) => (\n                  <DropdownMenu.RadioItem key={lang.code} value={lang.code}>\n                    {lang.label}\n                    <DropdownMenu.RadioItemIndicator />\n                  </DropdownMenu.RadioItem>\n                ))}\n              </DropdownMenu.RadioGroup>\n            </DropdownMenu.Group>\n          </DropdownMenu.SubContent>\n        </DropdownMenu.Sub>\n\n        {/* Timezone submenu with RadioGroup */}\n        <DropdownMenu.Sub>\n          <DropdownMenu.SubTrigger>Set Timezone</DropdownMenu.SubTrigger>\n          <DropdownMenu.SubContent>\n            <DropdownMenu.Group>\n              <DropdownMenu.RadioGroup\n                value={timezone}\n                onValueChange={setTimezone}\n              >\n                {timezones.map((tz) => (\n                  <DropdownMenu.RadioItem key={tz.value} value={tz.value}>\n                    {tz.label}\n                    <DropdownMenu.RadioItemIndicator />\n                  </DropdownMenu.RadioItem>\n                ))}\n              </DropdownMenu.RadioGroup>\n            </DropdownMenu.Group>\n          </DropdownMenu.SubContent>\n        </DropdownMenu.Sub>\n\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item icon={SignOutIcon} variant=\"danger\">\n          Log out\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>",
+        "<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button>Edit</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.Item icon={PencilSimpleIcon}>Rename</DropdownMenu.Item>\n        <DropdownMenu.Item icon={CopyIcon}>Duplicate</DropdownMenu.Item>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item inset>Move to folder</DropdownMenu.Item>\n        <DropdownMenu.Item inset>Add to favorites</DropdownMenu.Item>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item icon={TrashIcon} variant=\"danger\">\n          Delete\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>",
+        "<div className=\"flex flex-col items-start gap-2\">\n      <DropdownMenu>\n        <DropdownMenu.Trigger render={<Button>Actions</Button>} />\n        <DropdownMenu.Content>\n          <DropdownMenu.Item\n            icon={CopyIcon}\n            onClick={() => setLastAction(\"Duplicated\")}\n          >\n            Duplicate\n          </DropdownMenu.Item>\n          <DropdownMenu.Item\n            icon={PencilSimpleIcon}\n            onClick={() => setLastAction(\"Renamed\")}\n          >\n            Rename\n          </DropdownMenu.Item>\n          <DropdownMenu.Separator />\n          <DropdownMenu.Item\n            icon={TrashIcon}\n            variant=\"danger\"\n            onClick={() => setLastAction(\"Deleted\")}\n          >\n            Delete\n          </DropdownMenu.Item>\n        </DropdownMenu.Content>\n      </DropdownMenu>\n      {lastAction && (\n        <p className=\"text-sm text-kumo-subtle\">\n          Last action: <span className=\"text-kumo-default\">{lastAction}</span>\n        </p>\n      )}\n    </div>",
+        "<DropdownMenu>\n      <DropdownMenu.Trigger\n        render={<button type=\"button\" className=\"rounded-full\" />}\n      >\n        <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-kumo-brand text-sm font-medium text-white\">\n          MR\n        </span>\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        <DropdownMenu.Item icon={UserIcon}>Profile</DropdownMenu.Item>\n        <DropdownMenu.Item icon={GearIcon}>Settings</DropdownMenu.Item>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item icon={SignOutIcon} variant=\"danger\">\n          Log out\n        </DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu>",
+        "<DropdownMenu>\n      <DropdownMenu.Trigger render={<Button>Resources</Button>} />\n      <DropdownMenu.Content>\n        <DropdownMenu.LinkItem href=\"/settings\" icon={GearIcon}>\n          Settings\n        </DropdownMenu.LinkItem>\n        <DropdownMenu.LinkItem href=\"/docs\" icon={BookOpenIcon}>\n          Documentation\n        </DropdownMenu.LinkItem>\n        <DropdownMenu.Separator />\n        <DropdownMenu.LinkItem\n          href=\"https://developers.cloudflare.com\"\n          target=\"_blank\"\n          icon={ArrowSquareOutIcon}\n        >\n          Developer Docs\n        </DropdownMenu.LinkItem>\n      </DropdownMenu.Content>\n    </DropdownMenu>"
+      ],
       "colors": [
         "bg-kumo-control",
         "bg-kumo-danger",
@@ -2939,7 +2945,16 @@
         "SubTrigger": {
           "name": "SubTrigger",
           "description": "SubTrigger sub-component",
-          "props": {}
+          "props": {
+            "icon": {
+              "type": "Icon",
+              "description": "Icon displayed before the label."
+            },
+            "inset": {
+              "type": "boolean",
+              "description": "Adds left padding to align with items that have icons."
+            }
+          }
         },
         "SubContent": {
           "name": "SubContent",
@@ -2949,34 +2964,164 @@
         "Content": {
           "name": "Content",
           "description": "Content sub-component",
-          "props": {}
+          "props": {
+            "sideOffset": {
+              "type": "number",
+              "description": "Distance in pixels from the trigger.",
+              "default": "8"
+            },
+            "container": {
+              "type": "PortalContainer",
+              "description": "Container element for the portal. Use this to render inside a Shadow DOM or custom container."
+            }
+          }
         },
         "Item": {
           "name": "Item",
           "description": "Item sub-component",
-          "props": {}
+          "props": {
+            "icon": {
+              "type": "Icon | ReactNode",
+              "description": "Icon displayed before the label."
+            },
+            "variant": {
+              "type": "\"default\" | \"danger\"",
+              "description": "Visual style of the item.",
+              "default": "\"default\""
+            },
+            "selected": {
+              "type": "boolean",
+              "description": "Shows a check mark indicator when true."
+            },
+            "inset": {
+              "type": "boolean",
+              "description": "Adds left padding to align with items that have icons."
+            },
+            "onClick": {
+              "type": "(event: React.MouseEvent) => void",
+              "description": "Callback when the item is clicked."
+            },
+            "closeOnClick": {
+              "type": "boolean",
+              "description": "Whether the menu closes after clicking this item.",
+              "default": "true"
+            },
+            "disabled": {
+              "type": "boolean",
+              "description": "When true, the item cannot be interacted with."
+            }
+          }
         },
         "LinkItem": {
           "name": "LinkItem",
           "description": "LinkItem sub-component",
-          "props": {}
+          "props": {
+            "href": {
+              "type": "string",
+              "description": "URL to navigate to when clicked."
+            },
+            "icon": {
+              "type": "Icon | ReactNode",
+              "description": "Icon displayed before the label."
+            },
+            "variant": {
+              "type": "\"default\" | \"danger\"",
+              "description": "Visual style of the item.",
+              "default": "\"default\""
+            },
+            "inset": {
+              "type": "boolean",
+              "description": "Adds left padding to align with items that have icons."
+            },
+            "target": {
+              "type": "string",
+              "description": "Link target attribute (e.g. \"_blank\" for new tab)."
+            },
+            "render": {
+              "type": "ReactElement | ((props, state) => ReactElement)",
+              "description": "Custom element to render as the link. Use to integrate with framework routers (e.g. Next.js Link)."
+            }
+          }
         },
         "CheckboxItem": {
           "name": "CheckboxItem",
           "description": "CheckboxItem sub-component",
-          "props": {}
+          "props": {
+            "checked": {
+              "type": "boolean",
+              "description": "Whether the item is checked."
+            },
+            "defaultChecked": {
+              "type": "boolean",
+              "description": "Whether the item is initially checked (uncontrolled).",
+              "default": "false"
+            },
+            "onCheckedChange": {
+              "type": "(checked: boolean, event: ChangeEventDetails) => void",
+              "description": "Callback when the checked state changes."
+            },
+            "closeOnClick": {
+              "type": "boolean",
+              "description": "Whether the menu closes after clicking this item.",
+              "default": "false"
+            },
+            "disabled": {
+              "type": "boolean",
+              "description": "When true, the item cannot be interacted with."
+            }
+          }
         },
         "RadioGroup": {
           "name": "RadioGroup",
           "description": "RadioGroup sub-component (wraps DropdownMenuPrimitive)",
-          "props": {},
+          "props": {
+            "value": {
+              "type": "any",
+              "description": "The controlled value of the currently selected radio item."
+            },
+            "defaultValue": {
+              "type": "any",
+              "description": "The initially selected value (uncontrolled)."
+            },
+            "onValueChange": {
+              "type": "(value: any, event: ChangeEventDetails) => void",
+              "description": "Callback when the selected value changes."
+            },
+            "disabled": {
+              "type": "boolean",
+              "description": "When true, all radio items in the group are disabled."
+            }
+          },
           "isPassThrough": true,
           "baseComponent": "DropdownMenuPrimitive.RadioGroup"
         },
         "RadioItem": {
           "name": "RadioItem",
           "description": "RadioItem sub-component",
-          "props": {}
+          "props": {
+            "value": {
+              "type": "any",
+              "required": true,
+              "description": "The value of this radio item."
+            },
+            "icon": {
+              "type": "Icon | ReactNode",
+              "description": "Icon displayed before the label."
+            },
+            "inset": {
+              "type": "boolean",
+              "description": "Adds left padding to align with items that have icons."
+            },
+            "closeOnClick": {
+              "type": "boolean",
+              "description": "Whether the menu closes after clicking this item.",
+              "default": "false"
+            },
+            "disabled": {
+              "type": "boolean",
+              "description": "When true, the item cannot be interacted with."
+            }
+          }
         },
         "RadioItemIndicator": {
           "name": "RadioItemIndicator",
@@ -2986,7 +3131,12 @@
         "Label": {
           "name": "Label",
           "description": "Label sub-component",
-          "props": {}
+          "props": {
+            "inset": {
+              "type": "boolean",
+              "description": "Adds left padding to align with items that have icons."
+            }
+          }
         },
         "Separator": {
           "name": "Separator",
@@ -3082,7 +3232,7 @@
         "text-kumo-brand",
         "text-kumo-default",
         "text-kumo-inactive",
-        "text-kumo-strong",
+        "text-kumo-subtle",
         "text-kumo-success"
       ]
     },
@@ -3342,8 +3492,7 @@
         "ring-kumo-danger",
         "ring-kumo-focus",
         "ring-kumo-line",
-        "text-kumo-default",
-        "text-kumo-subtle"
+        "text-kumo-default"
       ],
       "styling": {
         "dimensions": {
@@ -3610,7 +3759,7 @@
       ],
       "colors": [
         "text-kumo-default",
-        "text-kumo-strong"
+        "text-kumo-subtle"
       ]
     },
     "LayerCard": {
@@ -3658,7 +3807,7 @@
         "ring-kumo-fill",
         "ring-kumo-hairline",
         "ring-kumo-line",
-        "text-kumo-strong"
+        "text-kumo-subtle"
       ],
       "subComponents": {
         "Primary": {
@@ -3960,7 +4109,7 @@
       "colors": [
         "bg-kumo-fill",
         "text-kumo-default",
-        "text-kumo-strong"
+        "text-kumo-subtle"
       ]
     },
     "Pagination": {
@@ -4040,7 +4189,7 @@
       "colors": [
         "border-kumo-hairline",
         "ring-kumo-hairline",
-        "text-kumo-strong"
+        "text-kumo-subtle"
       ],
       "subComponents": {
         "Info": {
@@ -4836,7 +4985,6 @@
         "ring-kumo-brand",
         "ring-kumo-hairline",
         "text-kumo-default",
-        "text-kumo-strong",
         "text-kumo-subtle"
       ],
       "subComponents": {
@@ -5681,7 +5829,6 @@
         "ring-kumo-hairline",
         "ring-kumo-line",
         "text-kumo-default",
-        "text-kumo-strong",
         "text-kumo-subtle"
       ],
       "styling": {
@@ -5903,7 +6050,19 @@
           "description": "Child elements"
         }
       },
-      "examples": [],
+      "examples": [
+        "<Toasty>\n      <ToastTriggerButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastTitleOnlyButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastDescriptionOnlyButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastSuccessButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastMultipleButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastErrorButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastWarningButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastInfoButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastCustomContentButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastActionsButton />\n    </Toasty>",
+        "<Toasty>\n      <ToastPromiseButton />\n    </Toasty>"
+      ],
       "colors": [
         "bg-kumo-base",
         "bg-kumo-contrast",
@@ -5923,7 +6082,6 @@
         "text-kumo-danger",
         "text-kumo-default",
         "text-kumo-info",
-        "text-kumo-strong",
         "text-kumo-subtle",
         "text-kumo-success",
         "text-kumo-warning"
@@ -6010,7 +6168,35 @@
         "fill-kumo-tip-stroke",
         "outline-kumo-fill",
         "text-kumo-default"
-      ]
+      ],
+      "subComponents": {
+        "Provider": {
+          "name": "Provider",
+          "description": "Groups multiple tooltips so that after the first tooltip is shown, switching to another skips the open delay. Place once at your app root or layout.",
+          "props": {
+            "delay": {
+              "type": "number",
+              "description": "How long to wait (ms) before opening a tooltip once the pointer enters the trigger.",
+              "default": "600"
+            },
+            "closeDelay": {
+              "type": "number",
+              "description": "How long to wait (ms) before closing a tooltip.",
+              "default": "0"
+            },
+            "timeout": {
+              "type": "number",
+              "description": "Grace period (ms) during which a just-closed tooltip's delay is skipped when another tooltip opens.",
+              "default": "400"
+            }
+          },
+          "isPassThrough": true,
+          "baseComponent": "TooltipBase.Provider",
+          "usageExamples": [
+            "<TooltipProvider>\n  <App />\n</TooltipProvider>"
+          ]
+        }
+      }
     },
     "InputArea": {
       "name": "InputArea",
@@ -6244,10 +6430,14 @@
           "optional": true
         }
       },
-      "examples": [],
+      "examples": [
+        "<ResourceListPage\n      title=\"Databases\"\n      description=\"Manage your database instances and configurations\"\n      icon={<DatabaseIcon size={32} className=\"text-kumo-subtle\" />}\n    >\n      <Surface className=\"p-6\">\n        <p>Main content area - your resource list would go here</p>\n      </Surface>\n    </ResourceListPage>",
+        "<ResourceListPage\n      title=\"API Keys\"\n      description=\"Create and manage API keys for your applications\"\n      usage={\n        <Surface className=\"p-4\">\n          <h3 className=\"mb-2 font-semibold\">Quick Start</h3>\n          <p className=\"mb-3 text-sm text-kumo-subtle\">\n            Generate an API key to authenticate your requests\n          </p>\n          <Code\n            lang=\"bash\"\n            code='curl -H \"Authorization: Bearer YOUR_API_KEY\" https://api.example.com'\n          />\n        </Surface>\n      }\n    >\n      <Surface className=\"p-6\">\n        <p>API keys list would appear here</p>\n      </Surface>\n    </ResourceListPage>",
+        "<ResourceListPage\n      title=\"KV Namespaces\"\n      description=\"Store key-value data globally with low-latency access\"\n      icon={<DatabaseIcon size={32} className=\"text-kumo-subtle\" />}\n      usage={\n        <Surface className=\"p-4\">\n          <h3 className=\"mb-2 font-semibold\">Usage Example</h3>\n          <Code\n            lang=\"ts\"\n            code={`// Read from KV\nconst value = await KV.get('key');\n\n// Write to KV\nawait KV.put('key', 'value');`}\n          />\n        </Surface>\n      }\n      additionalContent={\n        <Surface className=\"p-4\">\n          <h3 className=\"mb-2 font-semibold\">Learn More</h3>\n          <p className=\"text-sm text-kumo-subtle\">\n            Check out our documentation to learn more about KV storage.\n          </p>\n        </Surface>\n      }\n    >\n      <div className=\"space-y-4\">\n        <Surface className=\"p-6\">\n          <h4 className=\"mb-2 font-semibold\">production-kv</h4>\n          <p className=\"text-sm text-kumo-subtle\">Created 2 days ago</p>\n        </Surface>\n        <Surface className=\"p-6\">\n          <h4 className=\"mb-2 font-semibold\">staging-kv</h4>\n          <p className=\"text-sm text-kumo-subtle\">Created 1 week ago</p>\n        </Surface>\n      </div>\n    </ResourceListPage>"
+      ],
       "colors": [
         "bg-kumo-overlay",
-        "text-kumo-strong"
+        "text-kumo-subtle"
       ],
       "files": [
         "resource-list/resource-list.tsx",