Changelog
Mega menu breathes, hovers, and animates like a Motion mega menu
MegaMenu spacing opens up so columns and rows are no longer cramped. Interactive rows pick up motion.dev hover. MegaMenuTrigger opens panels from NavigationMenu, MegaMenuList slides a layoutId indicator between triggers, the shared viewport springs open and morphs between sections, and columns stagger in — with a reduced-motion colour-only fallback.
Added
- MegaMenuTrigger, a drop-in for NavigationMenuTrigger that opens MegaMenu panels from a NavigationMenuItem next to NavigationMenuContent.
- MegaMenuList, which scopes a shared layoutId pill that springs between the hovered or open MegaMenuTrigger.
- Spring-driven panel open (opacity, y, scale) on the NavigationMenu popup, staggered column reveals on MegaMenu, and row hover fills — all skipped when prefers-reduced-motion is set.
Changed
- Default padding and gaps on MegaMenu, MegaMenuColumn, MegaMenuGroup, MegaMenuGroupLabel, MegaMenuItem, MegaMenuLink, and MegaMenuMore so the panel has more room.
- Inside NavigationMenuContent, MegaMenu drops its own surface so it no longer double-paints over the positioner, and the content padding collapses around the panel. The existing shared viewport is the morphing panel: switching triggers resizes one popup instead of remounting a cold one.
- Column reveals stop queueing after the fourth zone and separators no longer take a place in the queue, so a wide panel finishes drawing instead of trickling in.
Fixed
- Reduced-motion fallbacks no longer break hydration. Motion resolves prefers-reduced-motion during the client's first render but leaves it unset on the server, so menu rows hydrated a different tree than was sent. The new useReducedMotionAfterMount hook pins the first render to the server's answer.
- MegaMenuTriggers outside a MegaMenuList each get their own indicator instead of sharing one hardcoded layoutId, which made every unscoped trigger on a page the same layout-projection target.
- The trigger indicator takes its corner radius from the radius token rather than a hardcoded 16px, so it no longer floats a rounded pill behind a square trigger.
Mega menu brings the navigation dropdowns into the system
MegaMenu ships the panel a nav dropdown opens — zones of columns, labelled groups, icon rows, and text links — with polymorphic rows and two new text tokens that reach WCAG AA where --muted-foreground does not.
Added
- MegaMenu, MegaMenuColumn, MegaMenuGroup, MegaMenuGroupLabel, MegaMenuItem, MegaMenuLink, MegaMenuMore, and MegaMenuSeparator, with rows polymorphic through render so a router Link or analytics wrapper drops straight in.
- splitIntoColumns for filling a fixed column count top-to-bottom, left-to-right so reading order matches the DOM order.
- --foreground-tertiary for secondary body copy, and --panel-ring and --panel-shadow for menu-panel elevation, all with light and dark values.
World Map Chart maps global vehicle activity
WorldMapChart turns ISO country values into a responsive CarsXE choropleth with bundled geometry, accessible inspection, and selectable markets.
Added
- WorldMapChart with ISO alpha-2, alpha-3, and numeric country-code normalization plus bundled 110m world geometry.
- CarsXE token-aware color scales, missing-data treatment, external value tooltips, persistent selected-country outlines, and live light/dark theme updates.
- Mouse selection and keyboard country navigation with live announcements, controlled and uncontrolled selection, empty states, docs, and Storybook examples.
Password Input learns to rate passwords
PasswordInput gains an optional strength meter: with feedback set, focusing the input opens a panel rating the value weak, medium, or strong as it is typed. The labels, the rating logic, the toggle icons, and the panel's header and footer are all replaceable.
Added
- A feedback prop that opens a strength panel below the focused input, with promptLabel, weakLabel, mediumLabel, and strongLabel captions and feedbackHeader/feedbackFooter slots for suggestions.
- getStrength to replace the rating logic; the default getPasswordStrength is exported and rates by character variety and length.
- toggleMask to hide the visibility toggle, and showIcon/hideIcon to swap its icons.
- aria-invalid styling matching Input, and a Password Input docs page and Storybook stories.
Selected tree rows read clearly
A selected TreeView row used primary-colored text on the accent background, which blended together in dark mode. Selection now uses the foreground color, so the label reads white on the dark accent and dark on the light one.
Fixed
- TreeView selected rows use text-foreground instead of text-primary, fixing the low-contrast teal-on-teal label in dark mode.
Steps connectors stay out of the titles
The line joining horizontal steps used to be drawn across the whole step, striking through its title. It now fills only the space between a step's label and the next indicator, and vertical steps get a proper rail below each indicator.
Fixed
- The horizontal Steps connector is a flex sibling of the label instead of an absolute overlay, so it can no longer cross the step titles.
- Vertical Steps render a connector rail from each indicator down to the next; previously the horizontal line was drawn there too.
Split Button pairs an action with its menu
SplitButton joins a primary Button to a dropdown of related actions in one component. The left half keeps every Button prop; the menu is described by data, so items, separators, links, and submenus need no markup.
Added
- SplitButton with an items prop of { id, label, icon, onSelect, href, disabled, destructive, separator, items }, covering separators, link items, destructive entries, and one level of submenu.
- A loading prop that shows a spinner and disables both halves, a menuLabel for the menu trigger's accessible name, and contentProps for positioning the menu.
- A Split Button docs page and Storybook stories.
Steps becomes a wizard
Steps can now drive panels. StepsRoot owns the active step, StepsPanel renders one step's content, and useSteps gives footer buttons their navigation. A standalone Steps indicator behaves exactly as before.
Added
- StepsRoot, StepsContent, and StepsPanel. Inactive panels stay mounted but hidden so form state survives navigation, and a panel's children may be a render prop receiving the navigation helpers.
- useSteps returning steps, index, value, isFirst, isLast, linear, next, prev, and goTo, which accepts a step index or id.
- A linear prop that blocks clicking a step ahead of the current one while still allowing earlier steps and programmatic navigation.
- A Steps docs page and Storybook stories.
Fixed
- Step indicators are now labelled by their visible title, so the completed ones no longer render as unnamed buttons for screen readers.
Tree view gains checkboxes, filtering, and drag and drop
The tree view now cascades checkboxes with a derived mixed state, filters with a debounced search field, loads children on demand, templates its rows, and reorders by dragging. Existing usage is unchanged: single and multiple selection behave exactly as before.
Added
- selectionMode of single, multiple, or checkbox. In checkbox mode value holds the fully checked ids and partial state is derived, reported as aria-checked="mixed".
- Filtering through filter, defaultFilter, and onFilterChange, an optional built-in search field via showFilter, a filterDelay debounce, lenient and strict filterMode, and an emptyMessage when nothing matches. Matches are revealed without touching the caller's expanded state.
- Lazy children: expanding a lazy node calls onExpand once and swaps its chevron for a spinner until the promise settles.
- A renderItem row template receiving the item and its selected, expanded, checked, indeterminate, level, and disabled state, plus a per-item icon.
- Drag and drop behind dragAndDrop, reporting the reordered tree through onItemsMove, with per-item draggable and droppable opt-outs and a guard against dropping a branch into its own subtree.
- Exported helpers collectTreeViewIds, findTreeViewItem, filterTreeViewItems, moveTreeViewItem, and toggleTreeViewChecked, and a Tree view docs page with Storybook stories.
Changed
- Home and End move focus to the first and last visible node.
Timeline for ordered events
A new Timeline component lays events out along a rail. Content, the opposite side, the marker, and the connector are render props receiving the item and its index, so an event can be a line of text or a full card.
Added
- Timeline with vertical and horizontal orientation, and align of start, end, or alternate so the rail can centre itself between sides.
- content, opposite, marker, and connector render props, a getKey override defaulting to the item id, and data-slot parts for the event, opposite side, separator, marker, connector, and content.
- A Timeline docs page and Storybook stories.
Rating group gains clearing, icons, and orientation
The rating group can now be cleared, use any icon pair, and stack vertically. Existing usage is unchanged: every new prop is opt-in.
Added
- allowClear: picking the current value again, or pressing Delete or Backspace, resets the rating to zero.
- icon and emptyIcon props so ratings can use hearts, thumbs, or any other icon for the filled and empty layers, with half values still clipping correctly.
- A vertical orientation, reported through aria-orientation and data-orientation, plus a data-fill attribute of empty, partial, or full on every item.
- A Rating group docs page and Storybook stories.
Knob dial for numeric input
A new Knob component enters a number by dragging around a 270° dial. It is fully keyboard operable, prints a templatable value in the centre, and exposes its arc colours as CSS variables.
Added
- Knob with pointer dragging, arrow-key stepping, Page Up and Page Down for ten steps, and Home and End for the ends of the range.
- Configurable size, stroke width, min, max, and step; a children render prop that replaces the printed value and feeds aria-valuetext; valueColor, rangeColor, and textColor overrides; read-only and disabled states; and a name prop for form submission.
Autocomplete with debounced suggestions
A new Autocomplete component suggests options as the user types. The delay prop debounces querying so a burst of keystrokes makes a single request, and passing onQueryChange hands filtering to the caller for server-backed search.
Added
- Autocomplete with a debounced delay prop, a minLength gate, and a loading state that renders a spinner in the input and a status row in the popup.
- Async mode: providing onQueryChange disables built-in filtering so the items you supply render verbatim.
- Dropdown trigger and clear button, multi-select chips, grouped and object suggestions, forceSelection, and inline completion modes.
Marquee pauses for manual scrolling
Hovering or focusing the marquee now stops the loop and lets the user scroll through the items themselves; the marquee resumes from wherever they left it.
Added
- Manual scrolling while the marquee is paused: wheel, trackpad, and touch all work, vertical wheel input is mapped onto the strip, and the loop wraps in both directions so there is never an edge.
- A dedicated Marquee docs page with reversed and always-running examples.
Fixed
- pauseOnHover previously had no effect because it targeted CSS animation state while the motion was JS-driven; hovering now actually pauses the marquee.
- With reduced motion enabled the marquee stays static but remains manually scrollable instead of being frozen.
Calendar heatmap
A GitHub-style calendar heatmap shows a value per day so quiet stretches and spikes are visible at a glance.
Added
- A Heatmap component with weeks as columns, month and weekday labels, keyboard-accessible cells with tooltips, and a Less-to-More legend with the formatted maximum.
- Five heatmap color tokens per theme, tuned so intensity steps stay distinguishable on light and dark surfaces and overridable through the colors prop.
Shiki code blocks with theme choice
Code examples now use the shared design-system viewer with opt-in syntax theme picking and built-in copying.
Added
- A public Code Block component with every bundled Shiki theme, all bundled languages, system-aware defaults, and accessible copy feedback.
- An opt-in showThemePicker control so viewers can change the syntax theme in the UI; themes stay code-only by default.
Changed
- Documentation code examples now use the exported Code Block instead of a private GitHub-theme-only renderer.
Primary hover colors restored
Primary hover states once again use the established CarsXE theme colors from the 0.0.4 release.
Fixed
- Restored primary-hover to #387990 in light mode and #4DCCEE in dark mode.
A much larger component library
CarsXE apps can now reach for a substantially broader set of production-ready primitives and composition recipes without copying local UI code.
Added
- More than 40 shadcn-style components and composition recipes, including Calendar, Carousel, Chart, Combobox, Command, Drawer, Sidebar, and data-table patterns.
- Matching component documentation and Storybook coverage for the expanded library.
- Complete chart-family recipes plus Sankey, force-directed, treemap, and sunburst visualizations.
- A composable, pressure-aware Signature Pad API with history, form submission, and export controls.
- A parity check that keeps the shipped component catalog aligned with the supported shadcn set.
Changed
- Existing primitives and examples were aligned with the expanded APIs, and hooks became available through package exports.
- Sidebar examples and interaction coverage now exercise desktop collapse, mobile sheets, controlled state, right-side placement, and RTL layouts.
Sharper type and interaction details
Code and token references now use an on-brand monospace face, while primary hover states stay closer to the core CarsXE palette.
Added
- DM Mono for code blocks, design tokens, and other technical content across the package and docs.
Changed
- The primary-hover token now uses #387990 in light and dark themes for more consistent interaction states.
Reliable installs and official brand assets
The published package became dependable in real consumer builds, and the docs gained downloadable CarsXE logo lockups.
Fixed
- Package exports now resolve to files that are actually present in the npm tarball.
- Tailwind source discovery, bundled shadcn CSS, and font assets now work from installed consumer projects.
- A packed-artifact verification script catches broken public entry points before publishing.
Added
- Brand asset documentation with horizontal and vertical lockups for light and dark surfaces, plus downloadable source files.
The CarsXE design system launched
The first release established a shared package, documentation, and migration path for consistent CarsXE product interfaces.
Added
- The @carsxe/design-system package with themed core components, semantic CSS tokens, dark mode, and sharp corners.
- Per-component Storybook stories and docs with live previews, API references, syntax highlighting, and Copy page support.
- Copy-pastable agent skills for installing the package and migrating consumer apps away from local UI copies.
- Search and social metadata, generated Open Graph images, CarsXE favicons, and links to Storybook and npm.
Changed
- Typography settled on DM Sans for headings and Manrope for UI, body copy, and inputs.