Badge: add color-based variants and deprecate semantic variants

• Add color variants: red, orange, yellow, green, teal, blue, neutral, inverted
• Add subtle variants for each color (red-subtle, orange-subtle, etc.) with lighter backgrounds and darker text
• Retain outline and beta variants unchanged
• Deprecate primary (use inverted), secondary (use neutral), destructive (use red), success (use green)
• Dark mode support: subtle variants flip to dark backgrounds with light text, regular color variants darken slightly, inverted flips to white bg with black text
• Default variant changed from primary to neutral

Add action prop to Banner for rendering CTA buttons alongside structured title/description content without resorting to the children prop.

Refresh semantic surface color tokens and component surface usage.

• Add and adopt kumo-canvas as the page-level surface token in theme output and docs usage.
• Rebalance neutral token values in kumo-binding.css and generated theme variables for improved light/dark surface hierarchy.
• Update surface-related component styling (LayerCard, MenuBar, Tabs) to align with the refreshed canvas/elevated/recessed layering model.
• Update token usage guidance in ai/USAGE.md to reflect page vs component background roles.

Make timeseries' highlighted on hovering a data point

Add Shadow DOM support via KumoPortalProvider and container prop on all portal-based components

All overlay components (Dialog, DropdownMenu, Combobox, Select, Tooltip, Popover, CommandPalette, Toast) now support rendering inside Shadow DOM or custom containers.

New exports:

• KumoPortalProvider - Context provider to set default portal container for all overlays
• PortalContainer - Type for portal container (HTMLElement, ShadowRoot, or ref)

Component updates: All portal-based components now accept an optional container prop:

• Dialog - container prop on Dialog component
• DropdownMenu.Content - container prop
• Combobox.Content - container prop
• Select - container prop
• Tooltip - container prop
• Popover.Content - container prop
• CommandPalette.Root and CommandPalette.Dialog - container prop
• Toasty (Toast provider) - container prop

Usage:

Set once at the app level:

<KumoPortalProvider container={shadowRoot}>
  <App />
</KumoPortalProvider>

Or override per component:

<Dialog container={customContainer}>
  <Dialog.Title>Modal inside shadow DOM</Dialog.Title>
</Dialog>

When no provider or prop is set, components default to document.body (existing behavior).

SkeletonLine: add blockHeight prop to set a container height and vertically center the skeleton line within it

Table: add sticky prop to Table.Head and Table.Cell for pinning columns to left/right edges, and sticky prop to Table.Header for sticky header rows. Uses isolate stacking context with z-0/z-1/z-2 layering.

Add toml as a supported language for syntax highlighting in the Code component

Add title prop to Button — wraps the button in a Tooltip when provided.

Checkbox.Group & Radio.Group: remove fieldset border box and simplify styling

• Remove rounded-lg border border-kumo-line p-4 wrapper from both group fieldsets
• Downsize legend from text-lg to text-base with inline-flex layout
• Drop font-medium from Checkbox.Item and Radio.Item labels

Fix missing disabled styling on Combobox triggers. TriggerValue and TriggerMultipleWithInput now apply opacity-50 and cursor-not-allowed when disabled, matching the behaviour of the Select component.

Update dialog backdrop overlay to use bg-kumo-recessed token

Remove ai/schemas.ts from version control (now fully generated at build time)

Fix LayerCard.Primary stacking order when sandwiched between LayerCard.Secondary elements

Fix SensitiveInput focus ring and global CSS pollution

• Fix focus ring not showing on container when inner input is focused (focus-within:outline)
• Add defensive styles to eye toggle and copy buttons to prevent global CSS pollution
• Fix inputVariants parentFocusIndicator using wrong selector ([&:has(:focus-within)] → focus-within:)

SkeletonLine: move .skeleton-line styles into @layer base so Tailwind utility classes (e.g. className="h-6") can override the default height

Tabs indicator now uses translate-x for its transition animation, replacing the CSS left transition with a GPU-accelerated transform.

fix flow component not reflecting padding prop

Surface: replace as prop with Base UI render prop for polymorphism

The as prop used a hand-rolled generic forwardRef pattern (with as any casts) that conflicted with how the rest of the library handles polymorphism via Base UI's useRender hook.

Surface now accepts a render prop, consistent with Link and other components. The old as prop is kept as a deprecated alias and continues to work unchanged — no migration required.

// Still works (deprecated)
<Surface as="section">...</Surface>

// Preferred going forward
<Surface render={<section />}>...</Surface>

Switch: polish squircle styling

• Use ring-inset on thumb to prevent border protruding beyond the track
• Make thumb ring transparent to remove visible border outline
• Switch focus indicator from ring to outline with outline-offset-2 to avoid clashing with the track's own ring border

fix(Tabs): update segmented tab spacing and track styling

• Adjust segmented Tabs list styling colour to bg-kumo-recessed and added ring to make the Tabs background more visible
• Remove extra edge spacing and keep the segmented track/indicator alignment consistent

update toast styling to use a subtle ring and background that reflect each state.

update status text token values for info and danger to improve a11y contrast ratio on banners.

Add truncate prop to Text component. When true, applies truncate min-w-0 classes to clip overflowing text with an ellipsis.

Make Chart components keyboard focusable with tabindex. Timeseries adds ariaDescription prop

Generate component-registry files at build time, remove from git

Eliminates contributor friction by generating component-registry.json, component-registry.md, and schemas.ts during the build process instead of tracking them in git. Contributors will no longer see stale diffs or need to manually regenerate these files.

• Add ai/component-registry.json and ai/component-registry.md to .gitignore
• Convert ai/schemas.ts to a stub file for TypeScript compilation
• Add codegen:registry to build script for deterministic generation

feat(code): add HCL (HashiCorp Configuration Language) as a supported syntax highlighting language

fix(flow): connector lines no longer misalign when the page scrolls or a sidebar shifts the layout

getBoundingClientRect values were stored in React state per node and later subtracted against a freshly-read container rect at connector-draw time. Any layout shift (sidebar open/close, page scroll, inner container scroll) between those two reads produced stale coordinates, causing connector lines to jump out of place or disappear entirely.

Fix: add scroll and resize listeners (capture phase) at the FlowNode, FlowParallelNode, and FlowNodeList levels so all rects are remeasured after any layout shift. Connector computation in FlowNodeList and FlowParallelNode is also moved from the render phase into useLayoutEffect so the container rect and node rects are always read in the same synchronous pass.

Add missing HCL language import to server-side Shiki bundle

The HCL language was added to SupportedLanguage type and the client-side provider in a previous commit, but the server.tsx BUNDLED_LANGS object was missed. This caused typecheck failures when building.

Sidebar: polish animations, fix separator reflow bug, improve header spacing

Fix connector alignment and spacing between adjacent parallel nodes in Flow diagrams

Add success and info toast variants with semantic token styling. Migrate error/warning variants from raw CSS to semantic tokens for consistent theming.

Fix Radio compound component to use Object.assign pattern, enabling sub-component detection (Radio.Group, Radio.Item) in the component registry.

Revert outline button variant ring width from ring-2 (2px) back to ring (1px) to restore visual consistency with existing dashboard usage.

fix: update styling for mostly-used components with new greyscale tokens (combobox, dialog, input, layerCard, select & tabs) as well as homegrid and component preview backgrounds.

Remove es2022 build target that caused Jest/babel-jest test failures in stratus

Add radio card appearance via appearance="card" prop on Radio.Group and Radio.Item. Cards display a bordered, selectable container with title and description. Also adds description prop to Radio.Item for helper text. Supports vertical and horizontal orientations, error state, and disabled state.

Expose Chart optionUpdateBehavior to control how ECharts applies option updates; notMerge now defaults to false.

Add neutral variant to Switch component and improve accessibility

• New variant="neutral" option: monochrome switch with squircle shape, matching the design from stratus
• Improved off-state visibility for default variant with darker background/ring colors
• Removed error variant (not useful for toggle switches)
• Added defensive fallback so invalid variant values don't cause runtime crashes

removed outline-none to bring back focus states on all buttons

Fix flaky vitest "Closing rpc while fetch was pending" error in deep-imports test

Fix InputArea label click not focusing textarea. Use FieldBase.Control with render callback to properly associate the label with the textarea element.

Fix TypeScript return types for ShikiProvider and CodeHighlighted components.

Changed return type from ReactNode to React.JSX.Element to resolve JSX compatibility errors. This fixes issues when consuming these components in projects with stricter TypeScript configurations (e.g., skipLibCheck: false), where ReactNode was incorrectly inferred as a valid JSX element return type.

Fix table header font size to ensure consistent rendering across dashboards with different default font sizes

Add dedicated kumo-placeholder text color token and use it for Input, InputArea, SensitiveInput, and CommandPalette placeholder text. The new token provides better visual distinction between placeholder and active text in both light and dark modes.

Replace the package-level ESLint pass with Oxlint JS plugin coverage for the remaining jsx-a11y rules, and pin the library build to es2022 with a post-build browser-compat test that blocks newer runtime APIs from shipping in dist.

fix(Select): prevent chevron overflow with long multi-select values

Added min-w-0 truncate to the value element and shrink-0 to the chevron icon so that long option names truncate gracefully instead of pushing the chevron outside the select bounds.

Fix combobox caret icon to use text-kumo-subtle with fill-current instead of invalid fill-kumo-subtle token

fix TimeseriesChart brush cursor not activating when loading prop transitions from true to false

add xAxisTickFormat, yAxisTickFormat, and tooltipValueFormat props to TimeseriesChart; deprecate yAxisTickLabelFormat

Deprecation: yAxisTickLabelFormat is deprecated

If you were using yAxisTickLabelFormat to customize tooltip output, switch to tooltipValueFormat.

Before:

<TimeseriesChart yAxisTickLabelFormat={(v) => `${v} req/s`} />

After:

<TimeseriesChart tooltipValueFormat={(v) => `${v} req/s`} />

Fix combobox caret icon visibility by using fill-kumo-subtle instead of fill-kumo-ring

reorganize greyscale tokens and update color preferences

updated button styles for outline and secondary

Fix Jest module resolution failures and reduce Shiki bundle size

Jest Fix:

• Add chunkFileNames config to prevent double-dash filenames (e.g., combobox--ec3iibR.js) that Jest cannot resolve
• Move chunks to dist/chunks/ subdirectory for cleaner structure

Bundle Size Reduction:

• Switch from full Shiki bundle to fine-grained imports via shiki/core
• Reduce from ~300 language/theme chunks to ~16 bundled languages
• Total JS files reduced from 358 to ~163 (54% reduction)

Supported Languages: javascript, typescript, jsx, tsx, json, jsonc, html, css, python, yaml, markdown, graphql, sql, bash, shell, diff

Breaking Change:

• BundledLanguage type is now deprecated, use SupportedLanguage instead
• Only the languages listed above are bundled; other Shiki languages are no longer available out of the box

Fix npm publish failure by removing cross-package dependency from prepublish hook

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:

// 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

Add optional id prop to Flow.Node for stable node identification and connector test IDs

Avoid adding multiple toasts with the same ID. Use a subtle bump animation when a toast with an existing ID is added.

Fix theme token flicker by generating stable light/dark fallback variables with safer scope and layer precedence.

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.

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.

Fix Field error message line height by adding leading-snug for consistent text spacing

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.

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.

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.

chore(toast): replace inline XIcon with Phosphor icon

Prevent password managers autofilling Pagination input field

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

fix(Tabs): pass TabItem render prop through to Base UI for custom tab rendering (e.g., link-based tabs)