Patch changes
- 36fc155
Add
scrollItemIntoView()to preserve the position of visible sidebar items while honoring alignment for offscreen items.
Latest updates and features. See what changed in each release.
Add scrollItemIntoView() to preserve the position of visible sidebar items while honoring alignment for offscreen items.
Allow default Tooltip trigger children to control their line height, preventing inherited text from being clipped.
Position dialogs near the top of the viewport instead of vertically centering them.
Use the elevated surface color for even rows in the default Table variant.
fix(select): align the trigger surface with form controls
Select triggers now use bg-kumo-control, including their open and disabled
states, so they match Input, Combobox, and the rest of the form-control family.
Consumer background classes can still override the default without using
!important. The popup remains on the floating bg-kumo-base surface.
fix(select): anchor the popup below the trigger and expose placement props
Select.Positioner relied on Base UI's alignItemWithTrigger default (true),
which overlays the popup on the trigger so the selected option's text lands on
the trigger's value text, emulating a native <select>. Options always render at
text-base, so on xs/sm triggers the popup was much taller than its anchor,
and Base UI's compensating shift detached it from the trigger — on xs it
overhung by 12.5px above and 45.5px below and sat 8px to the left, covering
adjacent content.
The popup now prefers bottom placement and is offset from the trigger, with
Base UI's collision avoidance still flipping it automatically when the preferred
side lacks space. Placement is configurable:
| prop | default | notes |
|---|---|---|
side | "bottom" | preferred side; still flips automatically on collision |
sideOffset | 4 | gap between trigger and popup, matching Combobox/Autocomplete |
align | "start" | alignment along the trigger edge |
alignOffset | — | additional offset along the alignment axis |
alignItemWithTrigger | false | opt back in to the native <select> overlay |
The remaining Base UI Positioner controls are also forwarded unchanged:
anchor, arrowPadding, positionMethod, collisionAvoidance,
collisionBoundary, collisionPadding, sticky, and
disableAnchorTracking.
The popup also now tracks the trigger width via min-w-(--anchor-width) instead
of min-w-[calc(var(--anchor-width)+3px)], which existed to visually offset the
old item-alignment shift.
Allow non-heading Text variants to inherit line height from their surrounding context.
Make Combobox.Input sit flush with the top and sides of Combobox.Content and remove its bottom corner rounding.
Reduce the trailing inset for buttons inside large InputGroup addons.
Add the Text heading variant with a 16px semibold default and a 20px
size="lg" option. The variant defaults to a span, so callers choose heading
semantics explicitly with as. Deprecate the numbered heading1, heading2,
and heading3 variants.
Collapsible.DefaultTrigger now uses text-kumo-default (neutral) with font-medium instead of the blue text-kumo-link color.
deprecate MenuBar in favor of segmented Tabs
MenuBar component (and its exports) as @deprecated; it will be removed in a future releaseTabs with variant="segmented" (the default Tabs variant)MenuBar is unchanged for existing consumersMenuBar documentation page and demos from the docs siteFix 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.
Restore disabled and loading state handling for Toolbar.Button so disabled
controls expose the correct semantics and cannot be activated.
Normalize shadows and outlines on tip-style overlays (Popover, Tooltip, ClipboardText, Chart tooltip).
shadow-kumo-tip-shadow color override so shadows use Tailwind's default translucent black instead of an opaque light-gray in light mode.shadow-md; ClipboardText's "Copied" toast keeps shadow-lg to match the Toast component.outline-kumo-fill to outline-kumo-line, matching every other floating surface (Dropdown, Select, Combobox, Dialog, etc.).kumo-tip-shadow → kumo-arrow-edge and kumo-tip-stroke → kumo-arrow-stroke. The tokens draw the border on Popover/Tooltip arrow SVGs, not a box shadow. Both now resolve to kumo-line, so the arrow border aligns with the popup outline in both modes.Add scrollToItem(id, options?) to useSidebar() for imperatively scrolling
a nav item into the sidebar viewport. Tag items with the new itemId prop on
Sidebar.MenuButton or Sidebar.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-motion forces "auto".Scrolls only the sidebar viewport (never the document) and works with
Sidebar.SlidingViews: items register with the provider via an internal
map, so scrollToItem walks up from the target to find its owning viewport
rather than querying the DOM.
Add icon support to filled Badge variants through the icon prop, add linked-badge hover styles, and use the base surface background for outline badges.
Allow users to select and copy LinkButton text while preserving Button text selection behavior.
Update Table rows to use borderless, alternating background styling.
Fix hydration mismatch in the Sidebar's useIsMobile hook on SSR frameworks like Next.js. The hook now uses useSyncExternalStore with a desktop getServerSnapshot, so the server-rendered HTML (desktop <aside>) hydrates cleanly on mobile viewports before switching to the mobile overlay.
Allow Select and Combobox triggers to compose directly with Toolbar.Button and Toolbar.Input through their render props, adding grouped styling and arrow-key focus management while preserving regular Select.* and Combobox.* APIs.
Deprecate Toolbar's configurable size prop and size metadata exports. They remain functional for compatibility; omitting size continues to use the base size.
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.
Expose all positioner props on Combobox.Content (anchor, positionMethod, collisionAvoidance, collisionBoundary, collisionPadding, sticky, disableAnchorTracking).
Populate InputArea props in component registry so the docs API reference table renders correctly
Fix Sidebar peeking state during SlidingViews transitions.
Fix Tabs overflow controls when tabs are removed and the remaining tabs fit.
Update the default collapsible trigger and panel styling.
Collapsible.DefaultPanel now 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 to DefaultPanel may need to move those styles to their content, or use Collapsible.Panel for a fully custom layout.
Fix initCatalog so 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 while hasComponent, componentNames, and the other synchronous catalog APIs still reported no components. It now awaits loadSchemas() directly.
A failed schema load is also no longer cached: retrying initCatalog (or loadSchemas) after a transient failure now re-attempts the import instead of returning the stale rejection.
Fix Shiki highlighter lifecycle in ShikiProvider and CodeHighlighted.
ShikiProvider no longer re-creates the highlighter when a parent rerender passes an equivalent inline languages array — 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. CodeHighlighted memoizes 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.
Reset the Tabs overflow control background so host button styles do not show through the scrim gradient.
Improves Banner contrast and CTA colors, adds compact sizing, and keeps components that consume the updated status tokens visually balanced.
Banner.Action CTA compound that builds on Button with banner-specific accent styling. It supports primary (filled), secondary (accent-hued outline on a transparent background), and ghost variants.size prop to Banner ("base" | "sm"); the compact "sm" size suits dialogs and other tight spaces and sets its Banner.Action children to the xs size.Improve chart loading states with a static, reduced-motion-aware TimeseriesChart skeleton (line and bar variants matching type) and a new loading prop for ChartLegend.SmallItem and ChartLegend.LargeItem.
Add a disabled prop to LinkButton. When disabled, it renders a real disabled <button> (dropping anchor-only attributes and event handlers) and supports title tooltips explaining why the action is unavailable.
Also removes stale Storybook references from the README and drops .stories.tsx generation from the component scaffolder, since Storybook is no longer set up in this repo.
LinkButton now wraps in a Kumo Tooltip when a title is provided, matching Button's behavior. Previously an enabled LinkButton only set a native title attribute; it now surfaces the same styled tooltip on hover and focus.
Add fullScreenOnMobile prop to Sidebar. 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
to false.
Also adds Sidebar.Close, a ghost button that dismisses the mobile sheet. It is
intended for Sidebar.Header in full-screen mobile layouts where the backdrop is
hidden and there is no adjacent page content to tap.
Also fixes Breadcrumbs.Link shrinking 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.
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 from SkeletonLine and matching the Sidebar.MenuButton box model so there's no layout shift when the real nav swaps in. Collapse-aware (icon squares only when collapsed) and exposes role="status" with a configurable label.
Add useTableOfContentsActiveId hook for TableOfContents scroll tracking.
The TableOfContents component 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 a selectSection action for click handling.
const { activeId, selectSection } = useTableOfContentsActiveId({
ids: headings.map((h) => h.slug),
offset: HEADER_HEIGHT,
});
IntersectionObserver), offset by an optional fixed-header offset; supports custom scroll containers via root.location.hash deep links on load and hashchange automatically (opt out with trackHash: false).selectSection pins a clicked section until scrolling settles, so short sections stay highlighted after a jump. Works on browsers without scrollend support.activeId is null on the server).The docs site "On this page" table of contents now consumes this hook instead of its own bespoke observer.
Ship unminified dist output without sourcemaps or declaration maps
Consumers' 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 in node_modules is now
readable. No API or behavior changes; final application bundle sizes are
effectively unchanged.
Use a string or numeric Button title as the fallback accessible label when the button has no text children.
Bump Prettier 3.6.2 → 3.9.5 and reformat (Prettier changed e.g. interface heritage-clause wrapping). No functional changes.
Prevent TimeseriesChart tooltips from following the cursor outside the chart after a browser context menu interaction.
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.
Render Kumo Link actions inline in compact Banners while keeping CTA actions trailing.
Fix purple badge token fallback colors to use purple OKLCH values.
Add a lint rule that verifies custom components used with Flow.Node's render prop forward refs and spread received props.
Keep TimeseriesChart brush-to-zoom active after replacing ECharts options.
Remove the subtle shadow-xs drop shadow from InputGroup Root and from nested InputGroup.Button, so the component matches the flat appearance of the standalone Input and other form controls (previously non-ghost button variants still had the base Button's shadow-xs).
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
Use muted chart colors for timeseries axes and horizontal gridlines.
One-time repo-wide format with the repo's own Prettier 3.6.2 (formatting was never enforced; drift accumulated). No functional changes.
Set default text-base and text-lg line heights to 1.5.
Remove inert Tailwind classes surfaced by class sorting: ring alongside ring-2 (overridden — later stylesheet rule wins) and bare outline in three places (no such utility in Tailwind v4; outline-1 already applies the default solid style). No visual changes.
Split Base UI across fine-grained chunks instead of one vendor-base-ui chunk
Components 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.
Add clearer edge affordances when Tabs overflow horizontally.
Show Button title tooltips when the button is disabled or loading.
Fix command palette match highlight contrast in dark mode.
Normalize Tailwind class strings via Oxfmt class sorting (sortTailwindcss, canonical Tailwind order, duplicates removed). No functional changes.
Migrate the toolchain to Vite+ (vp): the library now builds with Vite 8 on Rolldown, tests run through vp test (Vitest), and linting/formatting run through vp 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, and use-sync-external-store is now an explicit dependency instead of being bundled (bundling it left CJS require("react") calls that broke importing the package directly in Node).
Enable full type-checking in vp check / vp lint (typeAware + typeCheck) and fix the type issues it surfaced in files tsc --noEmit never covered. Only runtime-visible change: the CLI entrypoint explicitly voids its main() promise.
Rewrite Flow to use computed layout over relying on DOM layout.
Flow now 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.
Add target prop to Sidebar.MenuSubButton for parity with Sidebar.MenuButton — forwarded to the link when href is set, so link sub-items can control where they open (e.g. same-tab cross-origin navigation).
Add auto-resize support to InputArea and Textarea.
Add vertical reference markers to TimeseriesChart.
Add horizontal threshold lines to TimeseriesChart.
Include chart components exported from multi-component barrel directories in the generated component registry, with complete props metadata for generic interfaces.
Keep the mobile Sidebar open when focus moves to portaled interactive content.
Disable Sidebar.MenuButton tooltips while the sidebar is expanded or peeking.