@cloudflare/kumo 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -1,5 +1,102 @@
 # @cloudflare/kumo
 
+## 1.11.0
+
+### Minor Changes
+
+- 140f4ab: **Select: Improved label API to match Input component pattern**
+  - `hideLabel` is now deprecated. When `label` is provided, the label is **visible by default** (previously hidden by default).
+    - For visible labels: `<Select label="Country" />` (no changes needed if you were using `hideLabel={false}`)
+    - For hidden labels: Use `<Select aria-label="Select a country" />` instead of `<Select label="Country" hideLabel={true} />`
+  - **Bug fix**: Placeholder text now displays correctly when using object map `items` format (e.g., `items={{ a: "Option A" }}`). Previously, placeholders only worked with array format items.
+
+  **Backward compatibility**: `hideLabel={true}` still works but shows a deprecation warning in development. Existing code using `hideLabel={false}` requires no changes.
+
+  **Migration guide:**
+
+  ```tsx
+  // Before (label hidden by default)
+  <Select label="Country" />                    // label was sr-only
+  <Select label="Country" hideLabel={false} />  // label was visible
+
+  // After (label visible by default, matching Input)
+  <Select label="Country" />                    // label is now visible
+  <Select aria-label="Country" />               // use aria-label for hidden labels
+  ```
+
+- f1c6392: Add optional `id` prop to `Flow.Node` for stable node identification and connector test IDs
+- da03394: Avoid adding multiple toasts with the same ID. Use a subtle bump animation when a toast with an existing ID is added.
+
+### Patch Changes
+
+- a53ec1b: Fix theme token flicker by generating stable light/dark fallback variables with safer scope and layer precedence.
+- cb121bc: fix: add defensive styles to prevent global CSS pollution
+
+  ## Problem
+
+  When Kumo components are used in applications with aggressive global styles (e.g., Stratus's `cfBaseStyles` layer), certain elements get polluted:
+  - `label { margin-bottom: 1rem }` adds unwanted margins to all labels
+  - `button { background: gray }` affects unstyled button wrappers (e.g., tooltip triggers)
+  - `a { color: var(--text-color-primary) }` can override link colors if the consuming app defines `--text-color-primary` differently
+
+  ## Solution
+
+  Add defensive Tailwind utility classes directly to components. These:
+  1. Reset commonly-polluted properties to safe defaults
+  2. Use `cn()` (tailwind-merge) so consumer styles via `className` still override them
+  3. Are no-ops in clean CSS environments (no visual change in Kumo docs)
+
+  ## Changes
+
+  ### Label margins (`m-0`)
+  - **Label**: `labelVariants()` now includes `m-0`
+  - **Field**: `FieldBase.Label` gets `m-0`
+  - **Checkbox**: label wrapper gets `m-0`
+  - **Radio**: label wrapper gets `m-0`
+  - **Switch**: label wrapper gets `m-0`
+
+  ### Button trigger resets
+  - **Tooltip trigger** (when `!asChild`): `bg-transparent border-none shadow-none p-0 m-0 h-auto min-h-0 leading-[0] inline-flex items-center`
+  - **Collapsible trigger**: `bg-transparent border-none shadow-none p-0 m-0`
+
+  ### Link color namespace fix
+  - **Link**: Changed from `text-primary` to `text-kumo-link` to avoid collision with consuming apps that define `--text-color-primary` differently
+
+  ### Label tooltip composition
+  - **Label**: Tooltip trigger now uses `<Button variant="ghost" size="xs" shape="square">` with `asChild`, leveraging composition instead of relying on defensive resets
+
+  ## Docs
+
+  Added "Custom Trigger" section to Tooltip docs demonstrating that `className` can fully override defensive styles when not using `asChild`.
+
+- c6a3fb3: fix(dropdown): use Base UI CheckboxItemIndicator for proper accessibility
+
+  Replace custom Checkbox component with Base UI's CheckboxItemIndicator in DropdownMenuCheckboxItem. The previous implementation nested an interactive Checkbox inside the menuitemcheckbox role, causing duplicate accessibility labels. CheckboxItemIndicator is automatically aria-hidden and only renders when checked, following the standard Base UI pattern.
+
+- 1bfffaa: Fix Field error message line height by adding `leading-snug` for consistent text spacing
+- 5d16fdb: Improve info banner dark mode contrast for WCAG AA compliance. Changes `kumo-info` from `blue-700` (L=48.8%) to `blue-400` (L=70.7%), achieving 7.97:1 contrast ratio against the banner background.
+- 8b964f5: Fix Combobox.TriggerValue icon misalignment caused by inherited line-height
+
+  The caret icon span was inheriting `line-height` from the parent button's `text-base` class, causing the span's height to exceed the icon's height (e.g., 21.5px vs 16px). The icon sits at the top of the span by default, so when the span is centered via `top-1/2 -translate-y-1/2`, the icon appears offset.
+
+  Added `flex items-center` to the icon wrapper to ensure proper vertical centering regardless of inherited styles. This matches the pattern used in TriggerInput.
+
+- 529274d: fix(Pagination): use aria-label instead of label for PageSize select
+
+  The Select component now shows visible labels by default. Since Pagination.PageSize
+  already displays "Per page:" text next to the select, the internal Select should use
+  `aria-label` for accessibility without showing a duplicate visible label.
+
+- 2f0e572: chore(toast): replace inline XIcon with Phosphor icon
+- ee1099d: Prevent password managers autofilling Pagination input field
+- 6dc952f: fix(tabs): improve focus ring and hover styling
+  - Fixed focus ring to use proper `ring-kumo-ring` token instead of browser default blue
+  - Segmented variant: inset focus ring to avoid overlap with adjacent tabs, hidden on active tab
+  - Underline variant: added padding for better focus ring spacing around text
+  - Added subtle hover states for both variants
+
+- 2352344: fix(Tabs): pass TabItem render prop through to Base UI for custom tab rendering (e.g., link-based tabs)
+
 ## 1.10.0
 
 ### Minor Changes

package/ai/component-registry.json

@@ -1939,13 +1939,7 @@
           "description": "Additional CSS classes merged via `cn()`."
         }
       },
-      "examples": [
-        "<CodeBlock\n      lang=\"tsx\"\n      code={`const greeting = \"Hello, World!\";\nconsole.log(greeting);`}\n    />",
-        "<CodeBlock\n      lang=\"tsx\"\n      code={`interface User {\n  id: string;\n  name: string;\n  email: string;\n}\n\nconst user: User = {\n  id: \"1\",\n  name: \"John Doe\",\n  email: \"john@example.com\"\n};`}\n    />",
-        "<CodeBlock\n      lang=\"bash\"\n      code={`npm install @cloudflare/kumo\npnpm add @cloudflare/kumo`}\n    />",
-        "<CodeBlock\n      lang=\"jsonc\"\n      code={`{\n  \"name\": \"kumo\",\n  \"version\": \"1.0.0\",\n  \"dependencies\": {\n    \"react\": \"^19.0.0\"\n  }\n}`}\n    />",
-        "<Code\n      lang=\"bash\"\n      code=\"export API_KEY={{apiKey}}\"\n      values={{\n        apiKey: { value: \"sk_live_123\", highlight: true },\n      }}\n    />"
-      ],
+      "examples": [],
       "colors": [
         "bg-kumo-base",
         "border-kumo-fill",
@@ -3134,7 +3128,7 @@
         "<Input label=\"Phone Number\" required={false} placeholder=\"+1 555-0000\" />",
         "<Input\n      label=\"API Key\"\n      labelTooltip=\"Find this in your dashboard settings under API > Keys\"\n      placeholder=\"sk_live_...\"\n    />",
         "<Checkbox\n      label={\n        <span>\n          I agree to the <strong>Terms of Service</strong>\n        </span>\n      }\n    />",
-        "<div className=\"flex max-w-md flex-col gap-4\">\n      <Input label=\"Full Name\" placeholder=\"John Doe\" />\n      <Input\n        label=\"Email\"\n        labelTooltip=\"We'll send your receipt here\"\n        placeholder=\"john@example.com\"\n        type=\"email\"\n      />\n      <Input label=\"Company\" required={false} placeholder=\"Acme Inc.\" />\n      <Select label=\"Country\" hideLabel={false} placeholder=\"Select a country\">\n        <Select.Option value=\"us\">United States</Select.Option>\n        <Select.Option value=\"uk\">United Kingdom</Select.Option>\n        <Select.Option value=\"ca\">Canada</Select.Option>\n      </Select>\n    </div>",
+        "<div className=\"flex max-w-md flex-col gap-4\">\n      <Input label=\"Full Name\" placeholder=\"John Doe\" />\n      <Input\n        label=\"Email\"\n        labelTooltip=\"We'll send your receipt here\"\n        placeholder=\"john@example.com\"\n        type=\"email\"\n      />\n      <Input label=\"Company\" required={false} placeholder=\"Acme Inc.\" />\n      <Select label=\"Country\" placeholder=\"Select a country\">\n        <Select.Option value=\"us\">United States</Select.Option>\n        <Select.Option value=\"uk\">United Kingdom</Select.Option>\n        <Select.Option value=\"ca\">Canada</Select.Option>\n      </Select>\n    </div>",
         "<div className=\"flex flex-col gap-3\">\n      <Label>Default</Label>\n      <Label showOptional>Optional</Label>\n      <Label tooltip=\"Important field\">With Tooltip</Label>\n    </div>"
       ],
       "colors": [
@@ -3228,14 +3222,7 @@
             "plain": "Link without underline decoration"
           },
           "classes": {
-            "inline": "text-primary underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors",
-            "current": "text-current underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors",
-            "plain": "text-primary hover:text-primary/70 transition-colors"
-          },
-          "stateClasses": {
-            "plain": {
-              "hover": "hover:text-primary/70"
-            }
+            "current": "text-current underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors"
           },
           "default": "inline"
         },
@@ -3319,7 +3306,9 @@
         "<p className=\"text-base text-kumo-danger\">\n      This error message contains a{\" \"}\n      <Link href=\"#\" variant=\"current\">\n        link\n      </Link>{\" \"}\n      that inherits the red color from its parent.\n    </p>",
         "<div className=\"flex flex-col gap-x-6 gap-y-4 text-base md:flex-row\">\n      <Link render={<CustomRouterLink href=\"/dashboard\" />} variant=\"inline\">\n        Dashboard (via render)\n      </Link>\n      <Link\n        render={\n          <CustomRouterLink\n            href=\"https://developers.cloudflare.com\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n          />\n        }\n        variant=\"inline\"\n      >\n        Cloudflare Docs <Link.ExternalIcon />\n      </Link>\n    </div>"
       ],
-      "colors": [],
+      "colors": [
+        "text-kumo-link"
+      ],
       "subComponents": {
         "ExternalIcon": {
           "name": "ExternalIcon",
@@ -3800,12 +3789,11 @@
         "label": {
           "type": "ReactNode",
           "optional": true,
-          "description": "Label content for the select (enables Field wrapper) — can be a string or any React node."
+          "description": "Label content for the select. When provided, enables the Field wrapper with a visible label above the select. For accessibility without a visible label, use `aria-label` instead."
         },
         "hideLabel": {
           "type": "boolean",
-          "optional": true,
-          "description": "Visually hide the label while keeping it accessible to screen readers. Set to `false` to show a visible label above the select via the Field wrapper."
+          "optional": true
         },
         "placeholder": {
           "type": "string",
@@ -3862,15 +3850,16 @@
         }
       },
       "examples": [
-        "<div className=\"flex gap-2\">\n      <Select\n        className=\"w-[200px]\"\n        value={value}\n        onValueChange={(v) => setValue(v ?? \"apple\")}\n        items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n      />\n\n      <Select\n        value={value}\n        className=\"w-[200px]\"\n        onValueChange={(v) => setValue(v ?? \"apple\")}\n        items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n      >\n        <Select.Option value=\"apple\">Apple</Select.Option>\n        <Select.Option value=\"banana\">Banana</Select.Option>\n        <Select.Option value=\"cherry\">Cherry</Select.Option>\n      </Select>\n    </div>",
-        "<Select\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    />",
-        "<Select\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={[\n        { value: null, label: \"Please select\" },\n        { value: \"bug\", label: \"Bug\" },\n        { value: \"documentation\", label: \"Documentation\" },\n        { value: \"feature\", label: \"Feature\" },\n      ]}\n    />",
-        "<Select\n      className=\"w-[200px]\"\n      value={value}\n      placeholder=\"Please select\"\n      onValueChange={(v) => setValue(v as string | null)}\n      items={[\n        { value: \"bug\", label: \"Bug\" },\n        { value: \"documentation\", label: \"Documentation\" },\n        { value: \"feature\", label: \"Feature\" },\n      ]}\n    />",
-        "<Select\n      className=\"w-[200px]\"\n      renderValue={(v) => (\n        <span>\n          {v.emoji} {v.label}\n        </span>\n      )}\n      value={value}\n      onValueChange={(v) => setValue(v as (typeof languages)[0])}\n    >\n      {languages.map((language) => (\n        <Select.Option key={language.value} value={language}>\n          {language.emoji} {language.label}\n        </Select.Option>\n      ))}\n    </Select>",
-        "<Select className=\"w-[200px]\" loading />",
-        "<Select\n      className=\"w-[200px]\"\n      loading={loading}\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      placeholder=\"Please select\"\n      items={items}\n    />",
-        "<Select\n      className=\"w-[250px]\"\n      multiple\n      renderValue={(value) => {\n        if (value.length > 3) {\n          return (\n            <span className=\"line-clamp-1\">\n              {value.slice(2).join(\", \") + ` and ${value.length - 2} more`}\n            </span>\n          );\n        }\n        return <span>{value.join(\", \")}</span>;\n      }}\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      <Select.Option value=\"Name\">Name</Select.Option>\n      <Select.Option value=\"Location\">Location</Select.Option>\n      <Select.Option value=\"Size\">Size</Select.Option>\n      <Select.Option value=\"Read\">Read</Select.Option>\n      <Select.Option value=\"Write\">Write</Select.Option>\n      <Select.Option value=\"CreatedAt\">Created At</Select.Option>\n    </Select>",
-        "<Select\n      className=\"w-[200px]\"\n      onValueChange={(v) => setValue(v as (typeof authors)[0] | null)}\n      value={value}\n      isItemEqualToValue={(item, value) => item?.id === value?.id}\n      renderValue={(author) => {\n        return author?.name ?? \"Please select author\";\n      }}\n    >\n      {authors.map((author) => (\n        <Select.Option key={author.id} value={author}>\n          <div className=\"flex w-[300px] items-center justify-between gap-2\">\n            <Text>{author.name}</Text>\n            <Text variant=\"secondary\">{author.title}</Text>\n          </div>\n        </Select.Option>\n      ))}\n    </Select>"
+        "<Select\n      label=\"Favorite Fruit\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"apple\")}\n      items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n    />",
+        "<Select\n      aria-label=\"Select a fruit\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v ?? \"apple\")}\n      items={{ apple: \"Apple\", banana: \"Banana\", cherry: \"Cherry\" }}\n    />",
+        "<Select\n      label=\"Issue Type\"\n      description=\"Choose the category that best describes your issue\"\n      error={!value ? \"Please select an issue type\" : undefined}\n      className=\"w-[280px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    />",
+        "<Select\n      label=\"Category\"\n      placeholder=\"Choose a category...\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        bug: \"Bug\",\n        documentation: \"Documentation\",\n        feature: \"Feature\",\n      }}\n    />",
+        "<Select\n      label=\"Priority\"\n      labelTooltip=\"Higher priority issues are addressed first\"\n      placeholder=\"Select priority\"\n      className=\"w-[200px]\"\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      items={{\n        low: \"Low\",\n        medium: \"Medium\",\n        high: \"High\",\n        critical: \"Critical\",\n      }}\n    />",
+        "<Select\n      label=\"Language\"\n      className=\"w-[200px]\"\n      renderValue={(v) => (\n        <span>\n          {v.emoji} {v.label}\n        </span>\n      )}\n      value={value}\n      onValueChange={(v) => setValue(v as (typeof languages)[0])}\n    >\n      {languages.map((language) => (\n        <Select.Option key={language.value} value={language}>\n          {language.emoji} {language.label}\n        </Select.Option>\n      ))}\n    </Select>",
+        "<Select aria-label=\"Loading select\" className=\"w-[200px]\" loading />",
+        "<Select\n      label=\"Assignee\"\n      className=\"w-[200px]\"\n      loading={loading}\n      value={value}\n      onValueChange={(v) => setValue(v as string | null)}\n      placeholder=\"Select assignee\"\n      items={items}\n    />",
+        "<Select\n      label=\"Visible Columns\"\n      className=\"w-[250px]\"\n      multiple\n      renderValue={(value) => {\n        if (value.length > 3) {\n          return (\n            <span className=\"line-clamp-1\">\n              {value.slice(0, 2).join(\", \") + ` and ${value.length - 2} more`}\n            </span>\n          );\n        }\n        return <span>{value.join(\", \")}</span>;\n      }}\n      value={value}\n      onValueChange={(v) => setValue(v as string[])}\n    >\n      <Select.Option value=\"Name\">Name</Select.Option>\n      <Select.Option value=\"Location\">Location</Select.Option>\n      <Select.Option value=\"Size\">Size</Select.Option>\n      <Select.Option value=\"Read\">Read</Select.Option>\n      <Select.Option value=\"Write\">Write</Select.Option>\n      <Select.Option value=\"CreatedAt\">Created At</Select.Option>\n    </Select>",
+        "<Select\n      label=\"Author\"\n      description=\"Select the primary author for this document\"\n      className=\"w-[200px]\"\n      onValueChange={(v) => setValue(v as (typeof authors)[0] | null)}\n      value={value}\n      isItemEqualToValue={(item, value) => item?.id === value?.id}\n      renderValue={(author) => {\n        return author?.name ?? \"Select an author\";\n      }}\n    >\n      {authors.map((author) => (\n        <Select.Option key={author.id} value={author}>\n          <div className=\"flex w-[300px] items-center justify-between gap-2\">\n            <Text>{author.name}</Text>\n            <Text variant=\"secondary\">{author.title}</Text>\n          </div>\n        </Select.Option>\n      ))}\n    </Select>"
       ],
       "colors": [
         "bg-kumo-control",
@@ -4441,14 +4430,13 @@
         "<Tabs\n      variant=\"underline\"\n      tabs={[\n        { value: \"tab1\", label: \"Tab 1\" },\n        { value: \"tab2\", label: \"Tab 2\" },\n        { value: \"tab3\", label: \"Tab 3\" },\n      ]}\n      selectedValue=\"tab1\"\n    />",
         "<div className=\"space-y-4\">\n      <Tabs\n        tabs={[\n          { value: \"tab1\", label: \"Tab 1\" },\n          { value: \"tab2\", label: \"Tab 2\" },\n          { value: \"tab3\", label: \"Tab 3\" },\n        ]}\n        value={activeTab}\n        onValueChange={setActiveTab}\n      />\n      <p className=\"text-sm text-kumo-subtle\">\n        Active tab: <code className=\"text-sm\">{activeTab}</code>\n      </p>\n    </div>",
         "<Tabs\n      tabs={[\n        { value: \"overview\", label: \"Overview\" },\n        { value: \"analytics\", label: \"Analytics\" },\n        { value: \"reports\", label: \"Reports\" },\n        { value: \"notifications\", label: \"Notifications\" },\n        { value: \"settings\", label: \"Settings\" },\n        { value: \"billing\", label: \"Billing\" },\n      ]}\n      selectedValue=\"overview\"\n    />",
-        "<Tabs\n      tabs={[\n        {\n          value: \"tab1\",\n          label: \"Regular Tab\",\n        },\n        {\n          value: \"tab2\",\n          label: \"Link Tab\",\n          render: (props) => <a {...props} href=\"#tab2\" />,\n        },\n        {\n          value: \"tab3\",\n          label: \"Another Link\",\n          render: (props) => <a {...props} href=\"#tab3\" />,\n        },\n      ]}\n      selectedValue=\"tab1\"\n    />"
+        "<Tabs\n      tabs={[\n        {\n          value: \"tab1\",\n          label: \"Regular Tab\",\n        },\n        {\n          value: \"tab2\",\n          label: \"Link Tab\",\n          render: (props) => <a {...props} href=\"#tab2\" />,\n        },\n        {\n          value: \"tab3\",\n          label: \"Cloudflare\",\n          render: (props) => (\n            <a {...props} href=\"https://cloudflare.com\" target=\"_blank\" />\n          ),\n        },\n      ]}\n      selectedValue=\"tab1\"\n    />"
       ],
       "colors": [
         "bg-kumo-brand",
         "bg-kumo-overlay",
         "bg-kumo-tint",
         "border-kumo-line",
-        "border-kumo-tint",
         "ring-kumo-fill-hover",
         "ring-kumo-ring",
         "text-kumo-default",
@@ -4715,7 +4703,8 @@
       "examples": [
         "<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>"
+        "<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>",
+        "<TooltipProvider>\n      <Tooltip\n        content=\"Click to learn more\"\n        className=\"inline-flex items-center gap-1.5 rounded-full bg-kumo-brand px-3 py-1.5 text-sm font-medium text-white shadow-md transition-transform hover:scale-105 active:scale-95\"\n      >\n        <Info className=\"size-4\" />\n        <span>Help</span>\n      </Tooltip>\n    </TooltipProvider>"
       ],
       "colors": [
         "bg-kumo-base",

package/ai/component-registry.md

@@ -1077,27 +1077,6 @@ Props:
 - `lang`: CodeLang
 
 
-**Examples:**
-
-```tsx
-<CodeBlock
-      lang="tsx"
-      code={`const greeting = "Hello, World!";
-console.log(greeting);`}
-    />
-```
-
-```tsx
-<Code
-      lang="bash"
-      code="export API_KEY={{apiKey}}"
-      values={{
-        apiKey: { value: "sk_live_123", highlight: true },
-      }}
-    />
-```
-
-
 ---
 
 ### Collapsible
@@ -3071,7 +3050,7 @@ Label component for form fields.  Provides a standardized way to display labels
         type="email"
       />
       <Input label="Company" required={false} placeholder="Acme Inc." />
-      <Select label="Country" hideLabel={false} placeholder="Select a country">
+      <Select label="Country" placeholder="Select a country">
         <Select.Option value="us">United States</Select.Option>
         <Select.Option value="uk">United Kingdom</Select.Option>
         <Select.Option value="ca">Canada</Select.Option>
@@ -3185,10 +3164,6 @@ Link component
   - `"inline"`: Inline text link that flows with content
   - `"current"`: Link that inherits color from parent text
   - `"plain"`: Link without underline decoration
-
-  **State Classes:**
-  - `"plain"`:
-    - `hover`: `hover:text-primary/70`
 - `to`: string
 - `children`: ReactNode
 - `className`: string
@@ -3208,6 +3183,10 @@ Link component
 
 Accepts a `ReactElement` or a function that returns the element to render.
 
+**Colors (kumo tokens used):**
+
+`text-kumo-link`
+
 **Sub-Components:**
 
 This is a compound component. Use these sub-components:
@@ -3923,9 +3902,8 @@ Select component
 - `className`: string
   Additional CSS classes merged via `cn()`.
 - `label`: ReactNode
-  Label content for the select (enables Field wrapper) — can be a string or any React node.
+  Label content for the select. When provided, enables the Field wrapper with a visible label above the select. For accessibility without a visible label, use `aria-label` instead.
 - `hideLabel`: boolean
-  Visually hide the label while keeping it accessible to screen readers. Set to `false` to show a visible label above the select via the Field wrapper.
 - `placeholder`: string
   Placeholder text shown when no value is selected.
 - `loading`: boolean
@@ -3968,32 +3946,38 @@ Option sub-component
 **Examples:**
 
 ```tsx
-<div className="flex gap-2">
-      <Select
-        className="w-[200px]"
-        value={value}
-        onValueChange={(v) => setValue(v ?? "apple")}
-        items={{ apple: "Apple", banana: "Banana", cherry: "Cherry" }}
-      />
+<Select
+      label="Favorite Fruit"
+      className="w-[200px]"
+      value={value}
+      onValueChange={(v) => setValue(v ?? "apple")}
+      items={{ apple: "Apple", banana: "Banana", cherry: "Cherry" }}
+    />
+```
 
-      <Select
-        value={value}
-        className="w-[200px]"
-        onValueChange={(v) => setValue(v ?? "apple")}
-        items={{ apple: "Apple", banana: "Banana", cherry: "Cherry" }}
-      >
-        <Select.Option value="apple">Apple</Select.Option>
-        <Select.Option value="banana">Banana</Select.Option>
-        <Select.Option value="cherry">Cherry</Select.Option>
-      </Select>
-    </div>
+```tsx
+<Select
+      label="Issue Type"
+      description="Choose the category that best describes your issue"
+      error={!value ? "Please select an issue type" : undefined}
+      className="w-[280px]"
+      value={value}
+      onValueChange={(v) => setValue(v as string | null)}
+      items={{
+        bug: "Bug",
+        documentation: "Documentation",
+        feature: "Feature",
+      }}
+    />
 ```
 
 ```tsx
 <Select
+      label="Category"
+      placeholder="Choose a category..."
       className="w-[200px]"
       value={value}
-      onValueChange={(v) => setValue(v as string)}
+      onValueChange={(v) => setValue(v as string | null)}
       items={{
         bug: "Bug",
         documentation: "Documentation",
@@ -4004,20 +3988,24 @@ Option sub-component
 
 ```tsx
 <Select
+      label="Priority"
+      labelTooltip="Higher priority issues are addressed first"
+      placeholder="Select priority"
       className="w-[200px]"
       value={value}
-      placeholder="Please select"
       onValueChange={(v) => setValue(v as string | null)}
-      items={[
-        { value: "bug", label: "Bug" },
-        { value: "documentation", label: "Documentation" },
-        { value: "feature", label: "Feature" },
-      ]}
+      items={{
+        low: "Low",
+        medium: "Medium",
+        high: "High",
+        critical: "Critical",
+      }}
     />
 ```
 
 ```tsx
 <Select
+      label="Language"
       className="w-[200px]"
       renderValue={(v) => (
         <span>
@@ -4036,29 +4024,31 @@ Option sub-component
 ```
 
 ```tsx
-<Select className="w-[200px]" loading />
+<Select aria-label="Loading select" className="w-[200px]" loading />
 ```
 
 ```tsx
 <Select
+      label="Assignee"
       className="w-[200px]"
       loading={loading}
       value={value}
       onValueChange={(v) => setValue(v as string | null)}
-      placeholder="Please select"
+      placeholder="Select assignee"
       items={items}
     />
 ```
 
 ```tsx
 <Select
+      label="Visible Columns"
       className="w-[250px]"
       multiple
       renderValue={(value) => {
         if (value.length > 3) {
           return (
             <span className="line-clamp-1">
-              {value.slice(2).join(", ") + ` and ${value.length - 2} more`}
+              {value.slice(0, 2).join(", ") + ` and ${value.length - 2} more`}
             </span>
           );
         }
@@ -4078,12 +4068,14 @@ Option sub-component
 
 ```tsx
 <Select
+      label="Author"
+      description="Select the primary author for this document"
       className="w-[200px]"
       onValueChange={(v) => setValue(v as (typeof authors)[0] | null)}
       value={value}
       isItemEqualToValue={(item, value) => item?.id === value?.id}
       renderValue={(author) => {
-        return author?.name ?? "Please select author";
+        return author?.name ?? "Select an author";
       }}
     >
       {authors.map((author) => (
@@ -4728,7 +4720,7 @@ Tab navigation component with segmented or underline style. Built on Base UI Tab
 
 **Colors (kumo tokens used):**
 
-`bg-kumo-brand`, `bg-kumo-overlay`, `bg-kumo-tint`, `border-kumo-line`, `border-kumo-tint`, `ring-kumo-fill-hover`, `ring-kumo-ring`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
+`bg-kumo-brand`, `bg-kumo-overlay`, `bg-kumo-tint`, `border-kumo-line`, `ring-kumo-fill-hover`, `ring-kumo-ring`, `text-kumo-default`, `text-kumo-strong`, `text-kumo-subtle`
 
 **Styling:**
 
@@ -4821,8 +4813,10 @@ Tab navigation component with segmented or underline style. Built on Base UI Tab
         },
         {
           value: "tab3",
-          label: "Another Link",
-          render: (props) => <a {...props} href="#tab3" />,
+          label: "Cloudflare",
+          render: (props) => (
+            <a {...props} href="https://cloudflare.com" target="_blank" />
+          ),
         },
       ]}
       selectedValue="tab1"
@@ -5026,6 +5020,18 @@ Accessible popup that shows additional information on hover/focus. Wrap your app
     </TooltipProvider>
 ```
 
+```tsx
+<TooltipProvider>
+      <Tooltip
+        content="Click to learn more"
+        className="inline-flex items-center gap-1.5 rounded-full bg-kumo-brand px-3 py-1.5 text-sm font-medium text-white shadow-md transition-transform hover:scale-105 active:scale-95"
+      >
+        <Info className="size-4" />
+        <span>Help</span>
+      </Tooltip>
+    </TooltipProvider>
+```
+
 
 ---
 

package/ai/schemas.ts

@@ -617,8 +617,8 @@ export const RadioPropsSchema = z.object({
 
 export const SelectPropsSchema = z.object({
   className: z.string().optional(), // Additional CSS classes merged via `cn()`.
-  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content for the select (enables Field wrapper) — can be a string or any React node.
-  hideLabel: z.boolean().optional(), // Visually hide the label while keeping it accessible to screen readers. Set to `false` to show a visible label above the select via the Field wrapper.
+  label: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Label content for the select. When provided, enables the Field wrapper with a visible label above the select. For accessibility without a visible label, use `aria-label` instead.
+  hideLabel: z.boolean().optional(),
   placeholder: z.string().optional(), // Placeholder text shown when no value is selected.
   loading: z.boolean().optional(), // When `true`, shows a skeleton loader in place of the selected value.
   disabled: z.boolean().optional(), // Whether the select is disabled.

package/dist/.build-complete

@@ -1 +1 @@
-1772718260106
+1773409393878

package/dist/ai/schemas.js

@@ -3587,9 +3587,8 @@ const g = z([
   className: c().optional(),
   // Additional CSS classes merged via `cn()`.
   label: z([c(), _(), h(), w(), g]).optional(),
-  // Label content for the select (enables Field wrapper) — can be a string or any React node.
+  // Label content for the select. When provided, enables the Field wrapper with a visible label above the select. For accessibility without a visible label, use `aria-label` instead.
   hideLabel: h().optional(),
-  // Visually hide the label while keeping it accessible to screen readers. Set to `false` to show a visible label above the select via the Field wrapper.
   placeholder: c().optional(),
   // Placeholder text shown when no value is selected.
   loading: h().optional(),