cloudflare/kumo @cloudflare/kumo@2.4.0

@cloudflare/kumo@2.4.0

Repository: cloudflare/kumo

Tag: @cloudflare/kumo@2.4.0

Published: 2026-05-29T16:29:16Z

Prerelease: no

Release notes:

Minor Changes

• b93d881: Update Banner to use borderless tinted styling by default and add a secondary variant.

• a9a1526: Re-export useFilter from Combobox and Autocomplete namespaces. Use it to write custom filter props that preserve Base UI's default case- and accent-insensitive matching via Intl.Collator.

• 3db8294: Sidebar: comprehensive modernization

Breaking changes:

• Removed Sidebar.Input — build custom search triggers inline
• Removed Sidebar.MenuAction — unused in practice
• Removed Sidebar.GroupContent and group-level collapsible props (collapsible, defaultOpen, open, onOpenChange) from Sidebar.Group — use Sidebar.Collapsible at the item level instead
• Replaced Base UI Collapsible dependency with custom CSS grid-rows implementation
• SidebarState type is now "expanded" | "collapsed" | "peeking" (was "expanded" | "collapsed")

New features:

• contained prop on Provider — absolute positioning for embedded/demo sidebars
• peekable prop on Provider — hover/focus collapsed sidebar to temporarily expand
• animationDuration prop on Provider — configurable animation timing
• Sidebar.SlidingViews + Sidebar.SlidingView — animated horizontal transitions between navigation surfaces
• Animated SidebarPanelIcon replacing Phosphor SidebarSimpleIcon
• Enhanced Sidebar.Trigger with aria-expanded and dynamic aria-label
• Keyboard-accessible resize handle (arrow keys, Home, End)
• Custom Sidebar.Collapsible with keyboard auto-expand on focus

Token/styling fixes:

• border-kumo-hairline → border-kumo-line throughout
• Hardcoded duration-250 → --sidebar-animation-duration CSS custom property
• bg-kumo-base → bg-(--sidebar-bg) for theme overridability
• Focus styles: ring-2/ring-kumo-brand → outline-none/text-kumo-strong/bg-kumo-tint
• Icon opacity-50, updated spacing (header h-58px, footer h-12, menu gap-y-px)
• isolate on sidebar root with low z-index (z-1, z-2) instead of z-20/z-50
• Mobile sidebar now has correct data-state/data-side/data-variant/data-collapsible attributes

• 18f5e42: TimeseriesChart: React tooltip with Base UI positioning

Replaces ECharts' HTML-string tooltip with a React component positioned by Base UI's Tooltip primitive:

• Tooltip rendered as a React component with correct theme tokens — no more inline styles or getComputedStyle hacks
• Positioning handled by Base UI Tooltip (Floating UI), with automatic collision avoidance and viewport flipping
• New tooltipFollowCursor prop: "both" (default, free-following) or "x" (axis-locked, Recharts-style)
• New tooltipMode prop: "all" (default) or "single" (nearest series to cursor)
• New tooltipMaxItems prop: caps rows in "all" mode with +N more footer (default 10)
• Date formatted with Intl.DateTimeFormat (locale-aware) instead of ISO string
• Values sorted descending; fallback formatter avoids scientific notation

Patch Changes

• ab273fe: Banner: replace dark: Tailwind variants with new kumo-banner-info and kumo-banner-warning semantic tokens so dark-mode opacity is baked into the design system. No visual change.

• 351fac9: fix(styles): show pointer cursor on clickable Kumo elements by default

Adds a global cursor: pointer rule scoped to elements rendered by Kumo components, identified by the new data-kumo-component and data-kumo-part attributes. Interactive component roots and parts now opt into the rule by setting these attributes, which gives the library a stable scoping primitive that doesn't couple to Tailwind class names.

Components updated to set data-kumo-component / data-kumo-part: Button, LinkButton, Link, Checkbox, Radio, Switch, Select (trigger, option), DropdownMenu (item, link-item, checkbox-item, radio-item, submenu-trigger), Combobox (trigger, item, clear, chip-remove), Autocomplete (item), Dialog (trigger, close), Popover (trigger), Tabs (tab), Collapsible (trigger, default-trigger), Breadcrumbs (link), TableOfContents (item, group-link), Sidebar (menu-button, menu-sub-button, trigger, rail), MenuBar (option), Toast (close), SensitiveInput (toggle-visibility, copy, masked-container).

• 3db8294: fix(sidebar): collapsed state styling, transitions, and sliding views

• 6d5d9f0: Add flex items-center to ComboboxBase.Icon in TriggerInput for consistency with TriggerValue and Select

• 5081d35: Fix Select placeholder not showing when renderValue is provided and the value is empty.

• 9d4a2ff: Update semantic color tokens to better represent status icons and indicators:
• Adjust status token values in the theme generator and refresh generated theme output
• Update toast and badge status background treatments
• Update docs to reflect new tint token usage

• 1585bfe: Adjust toast visual styling for improved readability and emphasis: increase background tint intensity for success/warning/info variants, refine description text contrast, and update close-button icon contrast.

• 6e9b524: Fixed vertical alignment of checkbox and radio indicators with multi-line labels.

When label text wrapped to multiple lines, the indicators were vertically centered against the entire text block. They now align to the top, sitting next to the first line of text.

• 729caa3: echarts is now an optional peer dependency. If you don't use Chart components (Chart, TimeseriesChart, SankeyChart), it will no longer be installed automatically. If you do use them, run npm install echarts (as documented).