Version Packages

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@cloudflare/kumo@2.0.0

Major Changes

• bf68ac0: BREAKING: Checkbox onCheckedChange now receives event details as second argument

  The onCheckedChange callback signature now matches Base UI, providing access to the underlying event:

  // Before
  onCheckedChange={(checked) => console.log(checked)}
  
  // After (event details available as optional second arg)
  onCheckedChange={(checked, eventDetails) => {
    console.log(checked);
    console.log(eventDetails.event); // native event
  }}

  Removed deprecated props:

  • onChange - use onCheckedChange instead
  • onValueChange on individual checkboxes - use onCheckedChange instead
  • onClick - was redundant, use standard React event handling via spread props

  Migration:

  // Before (deprecated)
  <Checkbox onChange={(e) => console.log(e.target.checked)} />
  <Checkbox onValueChange={(checked) => setChecked(checked)} />
  
  // After
  <Checkbox onCheckedChange={(checked) => setChecked(checked)} />

  Note: Checkbox.Group's onValueChange prop is unchanged - it still accepts (values: string[]) => void.

• f9ba3f9: feat(Collapsible)!: refactor to compound component API

  Breaking change: Collapsible now uses a compound component pattern matching other Kumo components like Popover and Dialog.

  Before

  <Collapsible label="Show details" open={open} onOpenChange={setOpen}>
    Content here
  </Collapsible>

  After

  <Collapsible.Root open={open} onOpenChange={setOpen}>
    <Collapsible.Trigger>Show details</Collapsible.Trigger>
    <Collapsible.Panel>Content here</Collapsible.Panel>
  </Collapsible.Root>

  Migration

  For the quickest migration, use the new DefaultTrigger and DefaultPanel components which preserve the previous styling:

  <Collapsible.Root open={open} onOpenChange={setOpen}>
    <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>
    <Collapsible.DefaultPanel>Content here</Collapsible.DefaultPanel>
  </Collapsible.Root>

  New Sub-components

  Component	Description
  Collapsible.Root	Manages open state
  Collapsible.Trigger	Composable trigger with render prop support
  Collapsible.Panel	Content container
  Collapsible.DefaultTrigger	Pre-styled trigger with caret icon (migration helper)
  Collapsible.DefaultPanel	Pre-styled panel with border-left accent (migration helper)

• 3256a7b: feat(Text): decouple visual heading variants from semantic HTML elements

  Breaking change: heading1, heading2, heading3 variants no longer auto-render <h1>, <h2>, <h3> tags. They now render as <span> by default. Use the as prop to set the appropriate semantic heading level for your document outline.

  Before:

  <Text variant="heading1">Title</Text> // rendered <h1>

  After:

  <Text variant="heading1" as="h1">
    Title
  </Text> // explicit semantic element

  The as prop is now restricted to valid text elements: "h1" through "h6", "p", and "span".

• 267ba7a: BREAKING (v2): Text requires an explicit as prop when variant is a heading ("heading1", "heading2", "heading3").

  The previous major bump (#393) decoupled heading variants from semantic HTML — heading variants render as <span> unless an as prop is provided. That made the library more flexible but introduced a silent accessibility footgun: forgetting as on a real section heading produced a <span>, excluding it from the document outline without any type-level feedback.

  This change makes as required for heading variants via a discriminated union. Body and monospace variants are unchanged (as remains optional; defaults to <p> and <span> respectively).

  Migration

  Every <Text variant="heading1">, <Text variant="heading2">, <Text variant="heading3"> must now pass as. TypeScript will flag each call site:

  // Before (compiled, silently produced a <span>)
  <Text variant="heading1">Page Title</Text>
  
  // After (required)
  <Text variant="heading1" as="h1">Page Title</Text>
  
  // Still allowed — decorative heading-styled text that is NOT a section heading:
  <Text variant="heading1" as="span">Big bold card label</Text>

  For each heading call site, decide whether it's a real section heading (use as="h1"/"h2"/etc.) or decorative (use as="span"). Codemod cannot make this choice mechanically — it is a semantic judgment per usage.

  Body and monospace variants: no changes required.

Minor Changes

• 1954aa8: feat(radio, checkbox, switch): add composable Legend sub-component for group components

  • Add Radio.Legend, Checkbox.Legend, and Switch.Legend sub-components
  • Accepts className for full styling control (e.g. className="sr-only" to visually hide)
  • Make legend string prop optional when using the sub-component instead
  • Useful when a parent Field already provides a visible label and the legend would be redundant
  • Breaking: Switch.Group no longer renders a visible border/padding/rounded container — now consistent with Radio.Group and Checkbox.Group. Use className to add a border if needed.

• 1eee41a: Add InputGroup compound component for composing decorated inputs

  Compound structure: InputGroup, InputGroup.Input, InputGroup.Addon, InputGroup.Suffix, InputGroup.Button.

  • Field integration — pass label, description, error, required, and labelTooltip directly to InputGroup
  • Size variants (xs, sm, base, lg) propagate to all sub-components via context, including icon sizing in addons
  • InputGroup.Addon — positions icons, text, or buttons at align="start" (default) or align="end" of the input
  • InputGroup.Suffix — inline text suffix (e.g. .workers.dev)
  • InputGroup.Button — ghost button for secondary actions with tooltip support
  • Deprecated InputGroup.Label — use InputGroup.Addon instead
  • Deprecated InputGroup.Description — use InputGroup.Suffix instead

  {
    /* Reveal / hide password */
  }
  <InputGroup>
    <InputGroup.Input
      type={show ? "text" : "password"}
      defaultValue="password"
      aria-label="Password"
    />
    <InputGroup.Addon align="end" className="pr-1">
      <InputGroup.Button
        size="sm"
        aria-label={show ? "Hide password" : "Show password"}
        onClick={() => setShow(!show)}
      >
        {show ? <EyeSlashIcon size={16} /> : <EyeIcon size={16} />}
      </InputGroup.Button>
    </InputGroup.Addon>
  </InputGroup>;

  {
    /* Search input */
  }
  <InputGroup>
    <InputGroup.Addon>
      <MagnifyingGlassIcon className="text-kumo-subtle" />
    </InputGroup.Addon>
    <InputGroup.Input placeholder="Search..." />
  </InputGroup>;

• 353faea: Adds Autocomplete component. A free-form text input with an optional filtered suggestion list. Unlike Combobox, the value is not constrained to the items list.

• 431de04: feat(radio): accept ReactNode for Radio.Item label and honor controlPosition on card appearance

  • Radio.Item's label prop now accepts ReactNode, allowing icons, badges, or other markup alongside text.
  • Radio.Group's controlPosition prop now takes effect on appearance="card". Card appearance continues to default to "end" (radio on the right); pass controlPosition="start" to render the radio on the left of the label and description.

• f9d8b76: Polish TableOfContents indicator and semantic HTML

  • Replace pill/background-tint hover with left-border indicator pattern
  • Switch to semantic ul/li HTML structure
  • Add href and active props to TableOfContents.Group for clickable labels

• 07426f6: feat(table): add onCheckedChange prop to Table.CheckCell and Table.CheckHead, aligning with the Checkbox component's signature.

  The new prop exposes an optional second argument with event details, matching Base UI's idiom:

  <Table.CheckCell
    checked={selected.has(row.id)}
    onCheckedChange={(checked, eventDetails) => {
      toggle(row.id);
      eventDetails?.event.stopPropagation();
    }}
  />

  The existing onValueChange prop still works but is now deprecated and flagged by the no-deprecated-props lint rule. It will be removed in a future major version. Migrate by renaming the prop — the single-argument callback shape is preserved.

  This change is additive and does not require consumer code changes at this time.

Patch Changes

• ec73bc5: Update chart color docs and demos, including sequential heatmap/CVD coverage and improved chart demo behavior.

• 69bfc53: Improve focus ring consistency and clipping behavior across inputs and related controls.

  • Move the command palette focus ring to the input header container with focus-within and remove duplicate input-level ring styles.
  • Update Select trigger and option focus styles to use inset focus rings to prevent clipping in rounded/overflow contexts.
  • Fix clipboard copy button focus ring clipping by using inset focus-visible ring, matching border-radius inheritance, and isolated stacking.
  • Align InputGroup and InputGroup.Button focus ring color to ring-kumo-focus, including hybrid container-zone focus ring classes.
  • Update InputGroup tests to match inline focus ring class changes.
  • Set DatePicker (react-day-picker) focus ring token to var(--color-kumo-brand).
  • Update InputGroup container and hybrid keyboard outlines in kumo-binding.css to use var(--color-kumo-focus) at 1px weight.

• b923281: Fix InputGroup hover state incorrectly propagating to the first child button (e.g. in Pagination.Controls). Root now renders as <div> instead of <label> when it contains multiple labelable controls.

• c019b41: Improved focus and keyboard accessibility styles across Kumo components and docs navigation.

  • Added the kumo-focus semantic token to the theme generator config and generated theme-kumo.css output.
  • Updated focus ring behavior across interactive components (including Button, Input, InputGroup, Select, Checkbox, Radio, Switch, Sidebar, Tabs, Menubar, and related controls) for more consistent and visible keyboard focus visibility.
  • Text-entry controls use a lighter opacity kumo-focus ring to keep pointer and keyboard focus visually consistent where browsers apply :focus-visible heuristics to typed-input controls.
  • Refined Select and Input styling/state combinations to align focus visuals with current semantic token usage.
  • Updated docs SidebarNav keyboard-focus affordances (links, section toggles, search trigger) and adjusted collapsible list overflow so focus rings remain visible.
  • Replace raw colors in Select with kumo semantic tokens.

• 6765526: chore: update @base-ui/react to v1.4.0

  Bugfix release with improvements to Popover hover state, Checkbox/Switch readOnly mode, Select touch handling, Tabs activation direction, Toast timers, and various other fixes. No breaking changes.

@cloudflare/kumo-docs-astro@1.4.0

Minor Changes

• 353faea: Adds Autocomplete component. A free-form text input with an optional filtered suggestion list. Unlike Combobox, the value is not constrained to the items list.

Patch Changes

• ec73bc5: Update chart color docs and demos, including sequential heatmap/CVD coverage and improved chart demo behavior.

• 8cc65bf: Clean up the Contributing page: remove the "Questions?" section that referenced an internal channel, and fix the "Related Docs" links to point to absolute GitHub URLs instead of relative paths that 404'd.

• 1eee41a: Add InputGroup compound component for composing decorated inputs

  Compound structure: InputGroup, InputGroup.Input, InputGroup.Addon, InputGroup.Suffix, InputGroup.Button.

  • Field integration — pass label, description, error, required, and labelTooltip directly to InputGroup
  • Size variants (xs, sm, base, lg) propagate to all sub-components via context, including icon sizing in addons
  • InputGroup.Addon — positions icons, text, or buttons at align="start" (default) or align="end" of the input
  • InputGroup.Suffix — inline text suffix (e.g. .workers.dev)
  • InputGroup.Button — ghost button for secondary actions with tooltip support
  • Deprecated InputGroup.Label — use InputGroup.Addon instead
  • Deprecated InputGroup.Description — use InputGroup.Suffix instead

  {
    /* Reveal / hide password */
  }
  <InputGroup>
    <InputGroup.Input
      type={show ? "text" : "password"}
      defaultValue="password"
      aria-label="Password"
    />
    <InputGroup.Addon align="end" className="pr-1">
      <InputGroup.Button
        size="sm"
        aria-label={show ? "Hide password" : "Show password"}
        onClick={() => setShow(!show)}
      >
        {show ? <EyeSlashIcon size={16} /> : <EyeIcon size={16} />}
      </InputGroup.Button>
    </InputGroup.Addon>
  </InputGroup>;

  {
    /* Search input */
  }
  <InputGroup>
    <InputGroup.Addon>
      <MagnifyingGlassIcon className="text-kumo-subtle" />
    </InputGroup.Addon>
    <InputGroup.Input placeholder="Search..." />
  </InputGroup>;

• f774e84: Fix copy code button z-index so it no longer appears above the sticky header when scrolling

• c019b41: Improved focus and keyboard accessibility styles across Kumo components and docs navigation.

  • Added the kumo-focus semantic token to the theme generator config and generated theme-kumo.css output.
  • Updated focus ring behavior across interactive components (including Button, Input, InputGroup, Select, Checkbox, Radio, Switch, Sidebar, Tabs, Menubar, and related controls) for more consistent and visible keyboard focus visibility.
  • Text-entry controls use a lighter opacity kumo-focus ring to keep pointer and keyboard focus visually consistent where browsers apply :focus-visible heuristics to typed-input controls.
  • Refined Select and Input styling/state combinations to align focus visuals with current semantic token usage.
  • Updated docs SidebarNav keyboard-focus affordances (links, section toggles, search trigger) and adjusted collapsible list overflow so focus rings remain visible.
  • Replace raw colors in Select with kumo semantic tokens.

• 87432f8: Add global letter-spacing and typography defaults

  • Set global letter-spacing: -0.01em, line-height: 1.5, and OpenType font features (cv02, cv03, cv04, calt) on html
  • Reset letter-spacing: normal on pre, code, kbd, and .font-mono elements
  • Replace hardcoded tracking-[-0.02em] with tracking-tight utility across headings
  • Switch prose paragraphs and lists from leading-relaxed to leading-normal

• Updated dependencies [ec73bc5]

• Updated dependencies [bf68ac0]

• Updated dependencies [f9ba3f9]

• Updated dependencies [69bfc53]

• Updated dependencies [1954aa8]

• Updated dependencies [3256a7b]

• Updated dependencies [1eee41a]

• Updated dependencies [b923281]

• Updated dependencies [c019b41]

• Updated dependencies [353faea]

• Updated dependencies [431de04]

• Updated dependencies [f9d8b76]

• Updated dependencies [07426f6]

• Updated dependencies [267ba7a]

• Updated dependencies [6765526]

  • @cloudflare/kumo@2.0.0

@cloudflare/kumo-figma@0.3.24

Patch Changes

• Updated dependencies [ec73bc5]
• Updated dependencies [bf68ac0]
• Updated dependencies [f9ba3f9]
• Updated dependencies [69bfc53]
• Updated dependencies [1954aa8]
• Updated dependencies [3256a7b]
• Updated dependencies [1eee41a]
• Updated dependencies [b923281]
• Updated dependencies [c019b41]
• Updated dependencies [353faea]
• Updated dependencies [431de04]
• Updated dependencies [f9d8b76]
• Updated dependencies [07426f6]
• Updated dependencies [267ba7a]
• Updated dependencies [6765526]
  • @cloudflare/kumo@2.0.0

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@428

commit: becb75c

[github-actions]

Docs Preview

View docs preview

Commit: b25599e

[github-actions]

Visual Regression Report — 10 changed, 27 unchanged

10 screenshot(s) with visual changes:

Button / Loading State

1 px (0%) changed

Before	After	Diff

Select / Select Basic

299 px (0.29%) changed

Before	After	Diff

Select / Select Without Label

160 px (0.16%) changed

Before	After	Diff

Select / Select Placeholder

418 px (0.41%) changed

Before	After	Diff

Select / Select With Tooltip

294 px (0.29%) changed

Before	After	Diff

Select / Select Loading

0 px (0%) changed

Before	After	Diff

Select / Select Disabled Options

765 px (0.75%) changed

Before	After	Diff

Select / Select Grouped

194 px (0.19%) changed

Before	After	Diff

Select / Select Long List

898 px (0.76%) changed

Before	After	Diff

Select (Open)

1,292 px (0.01%) changed

Before	After	Diff

27 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Button / Title
• Dialog / Dialog With Actions
• Dialog / Dialog Basic
• Dialog / Dialog Alert
• Dialog / Dialog Confirmation
• Dialog / Dialog With Select
• Dialog / Dialog With Combobox
• Dialog / Dialog With Dropdown
• Dialog (Open)
• Select / Select Sizes
• Select / Select With Field
• Select / Select Custom Rendering
• Select / Select Multiple
• Select / Select Complex
• Select / Select Disabled Items
• Select / Select Grouped With Disabled

---

Generated by Kumo Visual Regression