@cloudflare/kumo 1.4.1 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cloudflare/kumo
 
+## 1.5.0
+
+### Minor Changes
+
+- d7a6da3: fix(cli): resolve broken doc/docs/ls commands by fixing registry path from catalog/ to ai/
+  fix(dialog): wrap sub-components to isolate @base-ui/react type references from downstream consumers
+  fix(label): render as `<label>` element with htmlFor support instead of `<span>`
+  feat(input): add Textarea alias for InputArea
+  feat(toast): add ToastProvider alias for Toasty
+  feat(button): require aria-label on icon-only buttons (shape="square" | "circle") via discriminated union
+  fix(docs): add Tailwind 4 @source directive to usage example, add confirmation dialog recipe, update Select basic example, document icon-only button aria-label pattern
+
 ## 1.4.1
 
 ### Patch Changes

package/README.md

@@ -26,7 +26,7 @@ npx @cloudflare/kumo doc Button # Get component documentation
 npx @cloudflare/kumo docs       # Get all component docs
 ```
 
-The CLI reads from `catalog/component-registry.json` (generated from TypeScript types + Storybook examples).
+The CLI reads from `ai/component-registry.json` (generated from TypeScript types + demo examples).
 
 ## Usage
 
@@ -44,15 +44,23 @@ import { Button } from "@cloudflare/kumo/components/button";
 
 #### For Tailwind CSS Users
 
-```js
-// Explicit import (recommended)
-import "@cloudflare/kumo/styles/tailwind";
+**Important:** Tailwind CSS v4 does not scan `node_modules/` by default. You must add a `@source` directive so Tailwind can discover the utility classes used by Kumo components. Without this, components may render with missing styles (e.g. Dialogs not centered).
+
+In your main CSS file (e.g. `app.css`):
 
-// Or use the default export (same as above)
-import "@cloudflare/kumo/styles";
+```css
+@source "../node_modules/@cloudflare/kumo/dist/**/*.{js,jsx,ts,tsx}";
+@import "@cloudflare/kumo/styles/tailwind";
+@import "tailwindcss";
 ```
 
-This imports the raw CSS with Tailwind directives (`@theme`, `@layer`, etc.) that your Tailwind setup will process.
+> **Import order matters** — `@cloudflare/kumo/styles` must come **before** `@import "tailwindcss"` so Kumo's `@theme` tokens are registered first.
+
+> **Note:** The `@source` path is relative to your CSS file. Adjust it based on your project structure — e.g. if your CSS is in `src/styles/`, you may need `../../node_modules/@cloudflare/kumo/dist/**/*.{js,jsx,ts,tsx}`.
+
+Alternatively, you can use the default style export (`@cloudflare/kumo/styles`) which is equivalent to `styles/tailwind`.
+
+If you are **not** using Tailwind CSS, use the standalone build instead (see below) — no `@source` directive is needed.
 
 #### For Non-Tailwind Users (Standalone)
 

package/ai/component-registry.json

@@ -239,28 +239,9 @@
       "importPath": "@cloudflare/kumo",
       "category": "Action",
       "props": {
-        "children": {
-          "type": "ReactNode",
-          "optional": true
-        },
-        "className": {
-          "type": "string",
-          "optional": true
-        },
-        "icon": {
-          "type": "ReactNode",
-          "optional": true,
-          "description": "Icon from `@phosphor-icons/react` or a React element. Rendered before children."
-        },
-        "loading": {
-          "type": "boolean",
-          "optional": true,
-          "description": "Shows a loading spinner and disables interaction."
-        },
         "shape": {
           "type": "enum",
           "optional": true,
-          "description": "Button shape.\n- `\"base\"` — Default rectangular button\n- `\"square\"` — Square button for icon-only actions\n- `\"circle\"` — Circular button for icon-only actions",
           "values": [
             "base",
             "square",
@@ -280,7 +261,6 @@
         "size": {
           "type": "enum",
           "optional": true,
-          "description": "Button size.\n- `\"xs\"` — Extra small for compact UIs\n- `\"sm\"` — Small for secondary actions\n- `\"base\"` — Default size\n- `\"lg\"` — Large for primary CTAs",
           "values": [
             "xs",
             "sm",
@@ -304,7 +284,6 @@
         "variant": {
           "type": "enum",
           "optional": true,
-          "description": "Visual style of the button.\n- `\"primary\"` — High-emphasis, brand-colored for primary actions\n- `\"secondary\"` — Default style with border for most actions\n- `\"ghost\"` — Minimal, no background for tertiary actions\n- `\"destructive\"` — Danger button for destructive actions\n- `\"secondary-destructive\"` — Secondary style with destructive text\n- `\"outline\"` — Bordered with transparent background",
           "values": [
             "primary",
             "secondary",
@@ -354,6 +333,24 @@
           },
           "default": "secondary"
         },
+        "children": {
+          "type": "ReactNode",
+          "optional": true
+        },
+        "className": {
+          "type": "string",
+          "optional": true
+        },
+        "icon": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Icon from `@phosphor-icons/react` or a React element. Rendered before children."
+        },
+        "loading": {
+          "type": "boolean",
+          "optional": true,
+          "description": "Shows a loading spinner and disables interaction."
+        },
         "id": {
           "type": "string",
           "optional": true
@@ -389,7 +386,7 @@
         }
       },
       "examples": [
-        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Button variant=\"secondary\">Button</Button>\n      <Button variant=\"secondary\" shape=\"square\" icon={PlusIcon} />\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-2\">\n      <Button variant=\"secondary\">Button</Button>\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={PlusIcon}\n        aria-label=\"Add\"\n      />\n    </div>",
         "<Button variant=\"primary\">Primary</Button>",
         "<Button variant=\"secondary\">Secondary</Button>",
         "<Button variant=\"ghost\">Ghost</Button>",
@@ -398,7 +395,7 @@
         "<Button variant=\"secondary-destructive\">Secondary Destructive</Button>",
         "<div className=\"flex flex-wrap items-center gap-3\">\n      <Button size=\"xs\" variant=\"secondary\">\n        Extra Small\n      </Button>\n      <Button size=\"sm\" variant=\"secondary\">\n        Small\n      </Button>\n      <Button size=\"base\" variant=\"secondary\">\n        Base\n      </Button>\n      <Button size=\"lg\" variant=\"secondary\">\n        Large\n      </Button>\n    </div>",
         "<Button variant=\"secondary\" icon={PlusIcon}>\n      Create Worker\n    </Button>",
-        "<div className=\"flex flex-wrap items-center gap-3\">\n      <Button variant=\"secondary\" shape=\"square\" icon={PlusIcon} />\n      <Button variant=\"secondary\" shape=\"circle\" icon={PlusIcon} />\n    </div>",
+        "<div className=\"flex flex-wrap items-center gap-3\">\n      <Button\n        variant=\"secondary\"\n        shape=\"square\"\n        icon={PlusIcon}\n        aria-label=\"Add item\"\n      />\n      <Button\n        variant=\"secondary\"\n        shape=\"circle\"\n        icon={PlusIcon}\n        aria-label=\"Add item\"\n      />\n    </div>",
         "<Button variant=\"primary\" loading>\n      Loading...\n    </Button>",
         "<Button variant=\"secondary\" disabled>\n      Disabled\n    </Button>"
       ],
@@ -2409,8 +2406,9 @@
         }
       },
       "examples": [
-        "<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              />\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              />\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>\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>"
       ],
       "colors": [
         "bg-kumo-base",
@@ -2420,113 +2418,28 @@
       "subComponents": {
         "Root": {
           "name": "Root",
-          "description": "Controls the open state of the dialog. Doesn't render its own HTML element.",
-          "props": {
-            "open": {
-              "type": "boolean",
-              "description": "Whether the dialog is currently open (controlled mode)"
-            },
-            "defaultOpen": {
-              "type": "boolean",
-              "description": "Whether the dialog is initially open (uncontrolled mode)",
-              "default": "false"
-            },
-            "onOpenChange": {
-              "type": "(open: boolean, event: Event) => void",
-              "description": "Callback fired when the dialog opens or closes"
-            },
-            "modal": {
-              "type": "boolean | 'trap-focus'",
-              "description": "Whether the dialog is modal. When true, focus is trapped and page scroll is locked",
-              "default": "true"
-            },
-            "dismissible": {
-              "type": "boolean",
-              "description": "Whether clicking outside closes the dialog",
-              "default": "true"
-            }
-          },
-          "isPassThrough": true,
-          "baseComponent": "DialogBase.Root",
-          "usageExamples": [
-            "<Dialog.Root open={isOpen} onOpenChange={setIsOpen}>",
-            "<Dialog.Root defaultOpen={false}>"
-          ]
+          "description": "Root sub-component",
+          "props": {}
         },
         "Trigger": {
           "name": "Trigger",
-          "description": "A button that opens the dialog when clicked.",
-          "props": {
-            "render": {
-              "type": "ReactElement | ((props, state) => ReactElement)",
-              "description": "Custom element to render instead of the default button"
-            },
-            "disabled": {
-              "type": "boolean",
-              "description": "Whether the trigger is disabled"
-            }
-          },
-          "isPassThrough": true,
-          "baseComponent": "DialogBase.Trigger",
-          "usageExamples": [
-            "<Dialog.Trigger render={<Button>Open</Button>} />",
-            "<Dialog.Trigger>Open Dialog</Dialog.Trigger>"
-          ],
-          "renderElement": "<button>"
+          "description": "Trigger sub-component",
+          "props": {}
         },
         "Title": {
           "name": "Title",
-          "description": "A heading that labels the dialog for accessibility.",
-          "props": {
-            "render": {
-              "type": "ReactElement | ((props, state) => ReactElement)",
-              "description": "Custom element to render instead of the default h2"
-            }
-          },
-          "isPassThrough": true,
-          "baseComponent": "DialogBase.Title",
-          "usageExamples": [
-            "<Dialog.Title>Confirm Action</Dialog.Title>",
-            "<Dialog.Title render={<h3 />}>Custom Heading</Dialog.Title>"
-          ],
-          "renderElement": "<h2>"
+          "description": "Title sub-component",
+          "props": {}
         },
         "Description": {
           "name": "Description",
-          "description": "A paragraph providing additional context about the dialog.",
-          "props": {
-            "render": {
-              "type": "ReactElement | ((props, state) => ReactElement)",
-              "description": "Custom element to render instead of the default p"
-            }
-          },
-          "isPassThrough": true,
-          "baseComponent": "DialogBase.Description",
-          "usageExamples": [
-            "<Dialog.Description>Are you sure you want to proceed?</Dialog.Description>"
-          ],
-          "renderElement": "<p>"
+          "description": "Description sub-component",
+          "props": {}
         },
         "Close": {
           "name": "Close",
-          "description": "A button that closes the dialog when clicked.",
-          "props": {
-            "render": {
-              "type": "ReactElement | ((props, state) => ReactElement)",
-              "description": "Custom element to render instead of the default button"
-            },
-            "disabled": {
-              "type": "boolean",
-              "description": "Whether the close button is disabled"
-            }
-          },
-          "isPassThrough": true,
-          "baseComponent": "DialogBase.Close",
-          "usageExamples": [
-            "<Dialog.Close render={<Button>Cancel</Button>} />",
-            "<Dialog.Close>×</Dialog.Close>"
-          ],
-          "renderElement": "<button>"
+          "description": "Close sub-component",
+          "props": {}
         }
       },
       "styling": {
@@ -3137,10 +3050,15 @@
           "optional": true,
           "description": "Additional CSS classes merged via `cn()`."
         },
+        "htmlFor": {
+          "type": "string",
+          "optional": true,
+          "description": "The id of the form element this label is associated with"
+        },
         "asContent": {
           "type": "boolean",
           "optional": true,
-          "description": "When `true`, only renders the inline content (indicators, tooltip) without the outer span with font styling. Useful when composed inside another label element that already provides the text styling."
+          "description": "When true, only renders the inline content (indicators, tooltip) without the outer label element with font styling. Useful when composed inside another label element that already provides the text styling."
         }
       },
       "examples": [
@@ -3174,7 +3092,7 @@
         }
       },
       "examples": [
-        "<LayerCard>\n      <LayerCard.Secondary className=\"flex items-center justify-between\">\n        <div>Next Steps</div>\n        <Button variant=\"ghost\" size=\"sm\" shape=\"square\">\n          <ArrowRightIcon size={16} />\n        </Button>\n      </LayerCard.Secondary>\n\n      <LayerCard.Primary>Get started with Kumo</LayerCard.Primary>\n    </LayerCard>",
+        "<LayerCard>\n      <LayerCard.Secondary className=\"flex items-center justify-between\">\n        <div>Next Steps</div>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          shape=\"square\"\n          aria-label=\"Go to next steps\"\n        >\n          <ArrowRightIcon size={16} />\n        </Button>\n      </LayerCard.Secondary>\n\n      <LayerCard.Primary>Get started with Kumo</LayerCard.Primary>\n    </LayerCard>",
         "<LayerCard className=\"w-[250px]\">\n      <LayerCard.Secondary>Getting Started</LayerCard.Secondary>\n      <LayerCard.Primary>\n        <p className=\"text-sm text-kumo-subtle\">\n          Quick start guide for new users\n        </p>\n      </LayerCard.Primary>\n    </LayerCard>",
         "<div className=\"flex gap-4\">\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>Components</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">Browse all components</p>\n        </LayerCard.Primary>\n      </LayerCard>\n      <LayerCard className=\"w-[200px]\">\n        <LayerCard.Secondary>Examples</LayerCard.Secondary>\n        <LayerCard.Primary>\n          <p className=\"text-sm\">View code examples</p>\n        </LayerCard.Primary>\n      </LayerCard>\n    </div>"
       ],
@@ -3578,7 +3496,7 @@
         }
       },
       "examples": [
-        "<Popover>\n      <Popover.Trigger asChild>\n        <Button shape=\"square\" icon={BellIcon} />\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Notifications</Popover.Title>\n        <Popover.Description>\n          You are all caught up. Good job!\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
+        "<Popover>\n      <Popover.Trigger asChild>\n        <Button shape=\"square\" icon={BellIcon} aria-label=\"Notifications\" />\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Notifications</Popover.Title>\n        <Popover.Description>\n          You are all caught up. Good job!\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
         "<Popover>\n      <Popover.Trigger asChild>\n        <Button>Open Popover</Button>\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Popover Title</Popover.Title>\n        <Popover.Description>\n          This is a basic popover with a title and description.\n        </Popover.Description>\n      </Popover.Content>\n    </Popover>",
         "<Popover>\n      <Popover.Trigger asChild>\n        <Button>Open Settings</Button>\n      </Popover.Trigger>\n      <Popover.Content>\n        <Popover.Title>Settings</Popover.Title>\n        <Popover.Description>\n          Configure your preferences below.\n        </Popover.Description>\n        <div className=\"mt-3\">\n          <Popover.Close asChild>\n            <Button variant=\"secondary\" size=\"sm\">\n              Close\n            </Button>\n          </Popover.Close>\n        </div>\n      </Popover.Content>\n    </Popover>",
         "<div className=\"flex flex-wrap gap-4\">\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Bottom</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"bottom\">\n          <Popover.Title>Bottom</Popover.Title>\n          <Popover.Description>\n            Popover on bottom (default).\n          </Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Top</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"top\">\n          <Popover.Title>Top</Popover.Title>\n          <Popover.Description>Popover on top.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Left</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"left\">\n          <Popover.Title>Left</Popover.Title>\n          <Popover.Description>Popover on left.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n\n      <Popover>\n        <Popover.Trigger asChild>\n          <Button variant=\"secondary\">Right</Button>\n        </Popover.Trigger>\n        <Popover.Content side=\"right\">\n          <Popover.Title>Right</Popover.Title>\n          <Popover.Description>Popover on right.</Popover.Description>\n        </Popover.Content>\n      </Popover>\n    </div>",
@@ -3786,7 +3704,7 @@
         }
       },
       "examples": [
-        "<Select\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"Apple\")}\n      placeholder=\"Please select\"\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 ?? \"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>",
         "<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>",
@@ -4645,9 +4563,9 @@
         }
       },
       "examples": [
-        "<TooltipProvider>\n      <Tooltip content=\"Add new item\" asChild>\n        <Button shape=\"square\" icon={PlusIcon} />\n      </Tooltip>\n    </TooltipProvider>",
-        "<TooltipProvider>\n      <Tooltip content=\"Add\" asChild>\n        <Button shape=\"square\" icon={PlusIcon} />\n      </Tooltip>\n    </TooltipProvider>",
-        "<TooltipProvider>\n      <div className=\"flex gap-2\">\n        <Tooltip content=\"Add\" asChild>\n          <Button shape=\"square\" icon={PlusIcon} />\n        </Tooltip>\n        <Tooltip content=\"Change language\" asChild>\n          <Button shape=\"square\" icon={TranslateIcon} />\n        </Tooltip>\n      </div>\n    </TooltipProvider>"
+        "<TooltipProvider>\n      <Tooltip content=\"Add new item\" asChild>\n        <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add new item\" />\n      </Tooltip>\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <Tooltip content=\"Add\" asChild>\n        <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n      </Tooltip>\n    </TooltipProvider>",
+        "<TooltipProvider>\n      <div className=\"flex gap-2\">\n        <Tooltip content=\"Add\" asChild>\n          <Button shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n        </Tooltip>\n        <Tooltip content=\"Change language\" asChild>\n          <Button\n            shape=\"square\"\n            icon={TranslateIcon}\n            aria-label=\"Change language\"\n          />\n        </Tooltip>\n      </div>\n    </TooltipProvider>"
       ],
       "colors": [
         "bg-kumo-base",