Releases: cloudflare/kumo
Release list
@cloudflare/kumo@2.12.0
Minor Changes
- 716e5b8: Add the
Textheadingvariant with a 16px semibold default and a 20px
size="lg"option. The variant defaults to aspan, so callers choose heading
semantics explicitly withas. Deprecate the numberedheading1,heading2,
andheading3variants.
Patch Changes
-
d7a7a35:
Collapsible.DefaultTriggernow usestext-kumo-default(neutral) withfont-mediuminstead of the bluetext-kumo-linkcolor. -
0db4f66: deprecate
MenuBarin favor of segmentedTabs- mark the
MenuBarcomponent (and its exports) as@deprecated; it will be removed in a future release - new usage should prefer
Tabswithvariant="segmented"(the defaultTabsvariant) - the runtime behaviour of
MenuBaris unchanged for existing consumers - remove the
MenuBardocumentation page and demos from the docs site
- mark the
-
c64183b: Fix Toast background clipping the ring outline at the corners — the inner background layer's radius (11px) was smaller than the root's
rounded-xl(12px), painting over the ring at the corners. Matched them up. -
ef13cb4: Restore disabled and loading state handling for
Toolbar.Buttonso disabled
controls expose the correct semantics and cannot be activated. -
51d0f03: Normalize shadows and outlines on tip-style overlays (Popover, Tooltip, ClipboardText, Chart tooltip).
- Drop the
shadow-kumo-tip-shadowcolor override so shadows use Tailwind's default translucent black instead of an opaque light-gray in light mode. - Tune shadow sizes: Popover, Tooltip, ClipboardText tooltip, and Chart tooltip use
shadow-md; ClipboardText's "Copied" toast keepsshadow-lgto match the Toast component. - Switch these overlays from
outline-kumo-filltooutline-kumo-line, matching every other floating surface (Dropdown, Select, Combobox, Dialog, etc.). - Rename
kumo-tip-shadow→kumo-arrow-edgeandkumo-tip-stroke→kumo-arrow-stroke. The tokens draw the border on Popover/Tooltip arrow SVGs, not a box shadow. Both now resolve tokumo-line, so the arrow border aligns with the popup outline in both modes.
- Drop the
-
d586bf3: Add
scrollToItem(id, options?)touseSidebar()for imperatively scrolling
a nav item into the sidebar viewport. Tag items with the newitemIdprop on
Sidebar.MenuButtonorSidebar.MenuItem.Options:
align:"start" | "center" | "end" | "auto"(default"auto"— no-op if
the item is already visible; otherwise scroll the minimum distance).behavior:"auto" | "smooth"(default"auto"— instant, best for
cross-app landings so users don't watch the sidebar animate on entry).
prefers-reduced-motionforces"auto".
Scrolls only the sidebar viewport (never the document) and works with
Sidebar.SlidingViews: items register with the provider via an internal
map, soscrollToItemwalks up from the target to find its owning viewport
rather than querying the DOM.
@cloudflare/kumo@2.11.0
Minor Changes
- aa6edff: Add icon support to filled Badge variants through the
iconprop, add linked-badge hover styles, and use the base surface background for outline badges.
Patch Changes
- bba0f5e: Allow users to select and copy LinkButton text while preserving Button text selection behavior.
- c2c8d42: Update Table rows to use borderless, alternating background styling.
- 0ad1926: Fix hydration mismatch in the Sidebar's
useIsMobilehook on SSR frameworks like Next.js. The hook now usesuseSyncExternalStorewith a desktopgetServerSnapshot, so the server-rendered HTML (desktop<aside>) hydrates cleanly on mobile viewports before switching to the mobile overlay.
@cloudflare/kumo@2.10.0
Minor Changes
-
4b9a4dc: Allow Select and Combobox triggers to compose directly with
Toolbar.ButtonandToolbar.Inputthrough theirrenderprops, adding grouped styling and arrow-key focus management while preserving regularSelect.*andCombobox.*APIs.Deprecate Toolbar's configurable
sizeprop and size metadata exports. They remain functional for compatibility; omittingsizecontinues to use the base size.
Patch Changes
- 65db2e6: Forward link-specific props in Tabs and Sidebar so link-rendered tabs can opt out of native button semantics, and Sidebar link buttons preserve attributes like
aria-current. - 0c58325: Expose all positioner props on Combobox.Content (
anchor,positionMethod,collisionAvoidance,collisionBoundary,collisionPadding,sticky,disableAnchorTracking). - 528d5ff: Populate InputArea props in component registry so the docs API reference table renders correctly
- 75c3b14: Fix Sidebar peeking state during SlidingViews transitions.
- 1d9b588: Fix Tabs overflow controls when tabs are removed and the remaining tabs fit.
@cloudflare/kumo@2.9.2
@cloudflare/kumo@2.9.1
Patch Changes
-
ff76f30: Update the default collapsible trigger and panel styling.
Collapsible.DefaultPanelnow uses an inner content wrapper so the outer panel can animate height smoothly while clipping overflow during the transition. Consumers applying custom layout or spacing classes directly toDefaultPanelmay need to move those styles to their content, or useCollapsible.Panelfor a fully custom layout. -
7468623: Fix
initCatalogso it actually loads the validation schemas.Previously it triggered a synchronous validation whose "schemas not loaded" error was swallowed, so
await initCatalog(catalog)could resolve whilehasComponent,componentNames, and the other synchronous catalog APIs still reported no components. It now awaitsloadSchemas()directly.A failed schema load is also no longer cached: retrying
initCatalog(orloadSchemas) after a transient failure now re-attempts the import instead of returning the stale rejection. -
d7639f2: Fix Shiki highlighter lifecycle in
ShikiProviderandCodeHighlighted.ShikiProviderno longer re-creates the highlighter when a parent rerender passes an equivalent inlinelanguagesarray — initialization is keyed on the normalized language set. Highlighters are now disposed on unmount and when the engine or language set changes, instead of leaking.CodeHighlightedmemoizes the highlighted HTML so unrelated rerenders (such as copy-button state changes) no longer re-highlight unchanged code, and initialization errors are logged once instead of on every render. Reinitializing after a failed initialization now clears the stale error state instead of showing it during the retry. -
c599590: Reset the Tabs overflow control background so host button styles do not show through the scrim gradient.
@cloudflare/kumo@2.9.0
Minor Changes
-
ff8ad54: Improves Banner contrast and CTA colors, adds compact sizing, and keeps components that consume the updated status tokens visually balanced.
- Updated status tokens to improve contrast between Banner backgrounds, text, and CTAs.
- Rebalanced Badge status tints, Toast backgrounds, and Command Palette search highlights to correspond with the updated tokens.
- Added a new
Banner.ActionCTA compound that builds onButtonwith banner-specific accent styling. It supportsprimary(filled),secondary(accent-hued outline on a transparent background), andghostvariants. - Added a
sizeprop toBanner("base"|"sm"); the compact"sm"size suits dialogs and other tight spaces and sets itsBanner.Actionchildren to thexssize.
-
f919182: Improve chart loading states with a static, reduced-motion-aware
TimeseriesChartskeleton (line and bar variants matchingtype) and a newloadingprop forChartLegend.SmallItemandChartLegend.LargeItem. -
535d579: Add a
disabledprop toLinkButton. When disabled, it renders a real disabled<button>(dropping anchor-only attributes and event handlers) and supportstitletooltips explaining why the action is unavailable.Also removes stale Storybook references from the README and drops
.stories.tsxgeneration from the component scaffolder, since Storybook is no longer set up in this repo. -
aae94f1:
LinkButtonnow wraps in a KumoTooltipwhen atitleis provided, matchingButton's behavior. Previously an enabledLinkButtononly set a nativetitleattribute; it now surfaces the same styled tooltip on hover and focus. -
9e083d2: Add
fullScreenOnMobileprop toSidebar. When set, the mobile navigation
sheet expands to the full viewport instead of leaving a sliver of the page
visible, giving nav items comfortable touch targets. The backdrop is suppressed
and the divider border dropped, since neither has anything to separate. Defaults
tofalse.Also adds
Sidebar.Close, a ghost button that dismisses the mobile sheet. It is
intended forSidebar.Headerin full-screen mobile layouts where the backdrop is
hidden and there is no adjacent page content to tap.Also fixes
Breadcrumbs.Linkshrinking alongside the current crumb. Flexbox
distributed truncation across every crumb, turning the trail into unreadable
stubs; ancestors now hold their width so only the current page truncates. -
51aa44c: Add
Sidebar.Loading, a nav loading skeleton so apps stop hand-rolling their own. It renders nav-item-shaped placeholder rows (icon + label) grouped like the real nav, composed fromSkeletonLineand matching theSidebar.MenuButtonbox model so there's no layout shift when the real nav swaps in. Collapse-aware (icon squares only when collapsed) and exposesrole="status"with a configurablelabel. -
86ee08c: Add
useTableOfContentsActiveIdhook forTableOfContentsscroll tracking.The
TableOfContentscomponent is presentational, so consumers had to wire up their own scroll-position tracking. This adds a shared hook: pass the section ids (in document order) and it returns the active section id plus aselectSectionaction for click handling.const { activeId, selectSection } = useTableOfContentsActiveId({ ids: headings.map((h) => h.slug), offset: HEADER_HEIGHT, });
- Highlights the topmost section actually in view (via
IntersectionObserver), offset by an optional fixed-headeroffset; supports custom scroll containers viaroot. - Handles
location.hashdeep links on load andhashchangeautomatically (opt out withtrackHash: false). selectSectionpins a clicked section until scrolling settles, so short sections stay highlighted after a jump. Works on browsers withoutscrollendsupport.- SSR-safe: all DOM access happens in effects, so it renders under Astro/Next SSR (
activeIdisnullon the server).
The docs site "On this page" table of contents now consumes this hook instead of its own bespoke observer.
- Highlights the topmost section actually in view (via
-
87d1ebc: Ship unminified
distoutput without sourcemaps or declaration mapsConsumers' bundlers minify (and tree-shake) the library code anyway, so
pre-minifying only obscured the shipped modules, and the declaration maps
pointed at source files that aren't published. The package shrinks from
~13.9 MB to ~6.5 MB unpacked, and the code innode_modulesis now
readable. No API or behavior changes; final application bundle sizes are
effectively unchanged.
Patch Changes
-
fc5e222: Use a string or numeric Button title as the fallback accessible label when the button has no text children.
-
8e71b38: Bump Prettier 3.6.2 → 3.9.5 and reformat (Prettier changed e.g. interface heritage-clause wrapping). No functional changes.
-
2a463f7: Prevent TimeseriesChart tooltips from following the cursor outside the chart after a browser context menu interaction.
-
0f0c44d: ClipboardText: keep the check icon until the last copy click settles, and bump the anchored "Copied" toast (without stacking) when the button is pressed again while it's open.
-
b171c71: Render Kumo Link actions inline in compact Banners while keeping CTA actions trailing.
-
4f0ed75: Fix purple badge token fallback colors to use purple OKLCH values.
-
5efe6dd: Add a lint rule that verifies custom components used with
Flow.Node'srenderprop forward refs and spread received props. -
32b2168: Keep TimeseriesChart brush-to-zoom active after replacing ECharts options.
-
b0870e1: Remove the subtle
shadow-xsdrop shadow fromInputGroupRootand from nestedInputGroup.Button, so the component matches the flat appearance of the standaloneInputand other form controls (previously non-ghost button variants still had the base Button'sshadow-xs). -
34e1672: Bundle the library with vp pack (tsdown) instead of Vite lib mode; declarations are now bundled per entry and export types paths follow the import paths
-
2575f9c: Use muted chart colors for timeseries axes and horizontal gridlines.
-
7c33107: One-time repo-wide format with the repo's own Prettier 3.6.2 (formatting was never enforced; drift accumulated). No functional changes.
-
ee6e569: Set default
text-baseandtext-lgline heights to 1.5. -
927d19f: Remove inert Tailwind classes surfaced by class sorting:
ringalongsidering-2(overridden — later stylesheet rule wins) and bareoutlinein three places (no such utility in Tailwind v4;outline-1already applies the default solid style). No visual changes. -
924f07a: Split Base UI across fine-grained chunks instead of one
vendor-base-uichunkComponents now pull in only the Base UI modules they actually use, improving
consumer tree-shaking: a single-Button app bundle drops from ~173 KB to
~129 KB minified (~57 KB to ~44 KB gzipped) compared to 2.8.0. -
7ef8c46: Add clearer edge affordances when Tabs overflow horizontally.
-
86afc2b: Show Button title tooltips when the button is disabled or loading.
-
5516c22: Fix command palette match highlight contrast in dark mode.
-
24149b9: Normalize Tailwind class strings via Oxfmt class sorting (
sortTailwindcss, canonical Tailwind order, duplicates removed). No functional changes. -
8de0551: Migrate the toolchain to Vite+ (
vp): the library now builds with Vite 8 on Rolldown, tests run throughvp test(Vitest), and linting/formatting run throughvp lint(Oxlint) /vp fmt(Oxfmt, replacing Prettier). No API changes; published output is functionally identical, though entry files are now re-export facades whose source maps live in the shared chunks, anduse-sync-external-storeis now an explicit dependency instead of being bundled (bundling it left CJSrequire("react")calls that broke importing the package directly in Node). -
60f5bfa: Enable full type-checking in
vp check/vp lint(typeAware + typeCheck) and fix the type issues it surfaced in filestsc --noEmitnever covered. Only runtime-visible change: the CLI entrypoint explicitly voids itsmain()promise.
@cloudflare/kumo@2.8.0
Minor Changes
-
8f2c40b: Rewrite
Flowto use computed layout over relying on DOM layout.Flownow measures node sizes, reconstructs the flow tree, and computes node positions and connector paths from that derived state instead of chaining DOM rect reads. This keeps connectors aligned through resize and scroll changes, supports nested flow structures more predictably, and makes anchor-based connector placement follow the anchor midpoint. -
fdeeb74: Add
targetprop toSidebar.MenuSubButtonfor parity withSidebar.MenuButton— forwarded to the link whenhrefis set, so link sub-items can control where they open (e.g. same-tab cross-origin navigation). -
b05ea3f: Add auto-resize support to InputArea and Textarea.
-
33cb988: Add vertical reference markers to TimeseriesChart.
-
0562dd1: Add horizontal threshold lines to TimeseriesChart.
Patch Changes
- a90dc83: Include chart components exported from multi-component barrel directories in the generated component registry, with complete props metadata for generic interfaces.
- 0e440d4: Keep the mobile Sidebar open when focus moves to portaled interactive content.
- 67061e1: Disable Sidebar.MenuButton tooltips while the sidebar is expanded or peeking.
@cloudflare/kumo@2.7.0
Minor Changes
-
8f8f898: Add
ChoroplethMap, a GeoJSON region choropleth chart component that joins data rows to features byname/namePropertyand shades regions with a continuousvisualMapscale. Includes Kumo light/dark map colours, tooltip formatting, optional legend, hover/click callbacks, roam controls, docs, and demos.Both
BubbleMapandChoroplethMapnow apply a d3-geoprojection(latitude-clamped Mercator by default; pass another d3-geo projection ornullfor raw plotting) and size byaspectRatioso the map fills its container without letterboxing. The container height now derives from the projected window's aspect ratio by default; pass an explicitheightto opt back into a fixed pixel height.Update
BubbleMapviewport behavior to avoid resetting user pan and zoom while refreshing bubble data.BubbleMapnow defaultsroamtofalseto avoid accidental pan and zoom interactions. Consumers that want drag-to-pan or scroll-to-zoom can passroam={true}. -
6d366d9: Add
orientation="vertical"support toFlowfor laying out nodes top-to-bottom. Thealignprop now controls cross-axis alignment in both orientations. -
ebc5cf8: feat(chart): add
BubbleMapchart componentNew
BubbleMapcomponent renders proportional bubbles over a registered
geographic map using ECharts' scatter series. Includes value-based radius
scaling, amapColorspalette addition toChartPalette, and supporting
types. Also extractsescapeHtml/defaultValueFormattooltip helpers into a
sharedtooltip-utilsmodule reused bySankeyChart.
Patch Changes
-
dd1a0b5: Keep primary and destructive button active/focus rings matched to their variant color.
-
8463c38: Use the Button component for Toast close controls and match the hover tint to the toast variant.
-
3aa0d9a: Limit Dropdown content height to available viewport space to prevent overflow.
-
25b2ab1: Replace the internal class merging implementation with cnfast.
-
6232d34: fix(button): resolve Firefox rendering artifact when Turnstile is present
Replace
translate-y-pxwithbox-shadow: inset 0 1px 0 0 var(--kumo-button-emphasis-bg)on the primary/destructive button emphasis overlay span. The transform triggered a rendering bug in Firefox on pages with Turnstile'scontain: strictCSS. The box-shadow achieves the same visual depth effect without the rendering issue. -
a74bd9c: Fix Dialog
sizeprop to set a fixed width instead of only a minimum width. Previously, dialog content could stretch the dialog beyond its intended size. -
4dd1398: Update Base UI to 1.6.0.
@cloudflare/kumo@2.6.0
Minor Changes
-
1b04ee9: Add Toolbar for composing explicit toolbar controls into a shared grouped card.
-
116e0de: feat(chart): add
enableLegendSelectionprop toTimeseriesChartOpt-in (default
false) hidden ECharts legend that lets consumers drive series
visibility imperatively via thelegendSelect/legendUnSelect/
legendToggleSelectactions — useful for building a custom interactive legend
withChartLegend. Series toggled off via the legend are also excluded from the
tooltip. Requires registering ECharts'LegendComponent
(echarts.use([LegendComponent])). When disabled, behaviour is unchanged. -
815628f: Extend LegendItems to take pointer events & timeseries merges forwardref to support those events
Patch Changes
- 430689b: Update the Button primary and destructive variants with token-derived gradient treatments.
- 539e5bf: Fix horizontal scroll in
Sidebar.Content: always applyoverflow-x: hiddenon the scroll viewport, not just when collapsed. Base UI'sScrollArea.Viewportsetsoverflow: scrollas an inline style, which allowed ~14px of horizontal overflow when consumer content (e.g. search buttons with keyboard shortcuts) exceeded the sidebar width. - 4378067: feat(radio): add generic value type support to Radio.Group and Radio.Item
- fb5fed1: Fix the green Badge variant missing its background color token.
- bdd890c: Keep generated component registry descriptions to JSDoc summaries before markdown sections or code examples.