Changelog

Add xFormat to LineChart and the dashboard line plot, with a daysOut format for comparing events by days to the event. Dashboard

Add an eventTime x format to LineChart and the dashboard line plot, for comparing events on their own clock.

Add toElasticsearch on @oztix/roadie-core/records/elasticsearch, which turns a records request into Elasticsearch query DSL (query, sort, from, and size) that means the same as matchesRecordQuery. Records model

Add mode, today and annotations to StackedArea and the dashboard stacked-area plot.

Add onRangeSelect to LineChart, BarChart, and StackedArea, so a drag across dated x, or Shift with an arrow key and then Enter, selects a range. LineChart

Add canonical-class, which fails a Tailwind class not in its canonical form, such as p-[16px], and fixes it to its canonical form, such as p-4.

Add the testing preset, which catches tests that can't be trusted: roadie/no-css-class-in-jsdom fails a calc(), container query, or breakpoint class in toHaveClass, roadie/no-css-source-in-jsdom fails a test that reads CSS source, roadie/no-layout-fake-in-jsdom fails a faked layout read, such as getBoundingClientRect, or a faked viewport media query, roadie/no-cva-output-assertion fails an assertion on the class string a variants function returns, and roadie/no-fixed-sleep fails a fixed wait, such as setTimeout inside a promise or page.waitForTimeout.

Add meta.docs.url to each rule, linking it to its section of the linting guide, so an editor can open the guide from a reported rule ID.

Update chart time ticks, tooltips, tables and spoken points to the date and time foundations. DateTime

Update CartContents to stable, so a breaking change to it only comes in a major version. CartContents

Update the README to lead with oxlint.

Fix an open Accordion item growing past its container when it holds wide content, such as a code block, so it no longer pushes a phone page sideways. Accordion

RecordTable and RecordGrid in a fill box centre their empty and error states in the space under the header, instead of showing them at the top.

Fix a ticked or indeterminate Checkbox that's invalid, which now fills with danger instead of the accent, so the error still shows. Checkbox

Fix pressing a later pinned DataTable cell in a linked or grouped row, which now follows the row's link or toggles its group like any other cell. DataTable

A List row with long text no longer widens the list past its container on a narrow screen; the title truncates and the trailing slot stays in view. List

Fix an is-interactive-within surface taking the hover, press and focus ring of a nested surface's target. Card

Fix the rows in a QueryField or Records.Search list jumping as the highlight moves. Query field

RadioGroup now dims a disabled group or item and ignores presses on its row, like Checkbox. Radio group

RecordTable puts the totals label in the title column, or with no title in the first column without a sum that isn't an image, as DataTable does, so the label no longer covers a summed column's total, and in the title column it no longer hides with a column's priority. DataTable

Fix a scrolling ToggleGroup jumping back to its pressed item when it resized while keyboard focus was on another item, which hid the focused item. Toggle group

BarChart with onRangeSelect now shades the selected bars whole, from the first bar's left edge to the last bar's right edge, instead of from centre to centre. BarChart

Clicking a chart no longer draws a focus ring around it in Chrome.

LineChart's today dot now sits on the highlighted series, as the forecast cone does, instead of always on the first series.

LineChart and StackedArea keep an annotation label clear of the today label.

listItemVariants gains an interactive variant, true by default. List

Logo takes every lockup through variant: normal (the default), mark, wordmark, tagline, and product. Logo

Pane publishes --pane-sticky-bottom, the height of its Pane.Footer, so sticky content at the bottom of a pane can clear the footer. Pane

Prose makes wide tables reachable and scrollable with the keyboard. Prose

Tables take a status column kind.

A nested ThemeProvider scopes its accent to its own subtree. Theming

@oztix/roadie-core/theme exports DEFAULT_ACCENT_COLOR, so components, widgets, and apps share one default accent.

Add each component's status to roadie.manifest.json even when another page documents it, such as CheckboxGroup on the Checkbox page or Records on Records model, and add docs and status to core's records subpaths. Checkbox

Add selection utilities, so a set of choices takes its label colours from the system rather than from each component.

Add colour variables that name the brand scales by hue, to match the brand intents.

Add isUnsafeHref to @oztix/roadie-core/utils.

Add link-normal, link-strong, and link-subtle, the text link styles Link uses, animated on hover and focus-visible with the motion tokens. Link

Add the .prose class, which typesets raw HTML from a CMS, Markdown, or MDX: headings, paragraphs, lists, tables, code, quotes, rules, figures, and keys.

Add date ranges and typed date phrases to @oztix/roadie-core/datetime.

Add is-focusable, the focus ring of is-interactive with no pointer cursor, press, or disabled state, for an element that takes focus but isn't clicked, such as a scroll region or a tabIndex={-1} landing target.

paletteScores() from @oztix/roadie-core/dataviz measures low-contrast slots with APCA.

The portfolio example dashboard has a period, the past 30 days compared with the previous period, so DashboardView shows a period toolbar above it. Dashboard design

Pressing Enter after typing in an Autocomplete or Combobox now takes the first suggestion, without moving to it with the arrows first. Autocomplete

useFieldControlError(message) is now public in @oztix/roadie-components/field. Field

Two components move onto Roadie's motion tokens, and each looks a little different:

Prose now renders the core .prose class instead of its own list of descendant classes. Prose

Each package now ships roadie.manifest.json, a machine-readable catalogue for coding agents and tools.

Select-style triggers now use a visible border instead of the raised look. Select

Update the Select, Combobox, and Autocomplete popups, the QueryField operator bar, the Popover arrow, and the Tooltip arrow to use --intent-bg-floating, so in dark mode they match the lifted fill of other floating surfaces. Select

Every focus ring now has the same shape: 4px wide with no gap, from the --focus-ring-width, --focus-ring-opacity, and --focus-ring-opacity-dark tokens.

Widgets now ship @oztix/roadie-widgets/roadie.manifest.json, with the same shape as the other packages' manifests. CartDrawer

getContrastColor from @oztix/roadie-core/colors now picks white or black text by APCA instead of the WCAG 2 contrast ratio, following decision 0010. Colors

Dark mode chart colours now meet APCA Lc 45 against the page, the minimum for non-text UI in decision 0010.

Dark mode delta text now meets APCA Lc 60 on a data card, the tier decision 0010 sets for delta text. Delta

Update dark mode so raised and floating surfaces, fields, and neutral borders stand out more, since shadows barely show on a dark page.

validatePalette now checks every pair of categorical slots for normal vision, not just neighbours, and fails any pair under ΔE 8 as allPairsNormal.

Shadows and the loading shimmer now tint by the nearest intent, as the Elevation and Skeleton docs describe.

Update --ts-chart-tooltip-background to --intent-bg-floating, so a tooltip drawn from it matches ChartTooltip and other floating surfaces in dark mode. ChartTooltip

Tapping the active tab of a collapsed Navigator bar on its own route now scrolls the page back to the top in browsers with the Navigation API, such as Chrome. Navigator

Buttons now follow their parent's alignment. Button

CalendarTile no longer puts its month or weekday in capitals, because the writing rule keeps all caps for acronyms. CalendarTile

Warn in development when a Card has no Card.Content. Card

A Carousel with autoPlay now moves to the next slide once the delay has passed. Carousel

An Autocomplete or Combobox input inside a Field keeps the Field.Label as its accessible name while its list is open. Autocomplete

Carousel runs on Embla 9.0.0-rc04. Carousel

Link components check for unsafe href protocols with isUnsafeHref from @oztix/roadie-core/utils, so they also refuse an unsafe protocol hidden with a tab, line break, or control character.

A DataTable whose rows link keeps its title column visible. DataTable

A link with download, such as <Button href='/files/lineup.pdf' download>, now renders a plain <a> instead of the provider's Link. Button

Large pages in Chromium no longer restyle every element when something small changes, such as opening a menu, ticking a row, hovering a list row, or typing in a search. Navigator

Example data uses invented venue, event and promoter names from the contributing guide's vetted list, so no example reads as a real Oztix client.

Menu radio and checkbox items keep their shortcuts lined up when one is checked.

Dialog's backdrop, Card's image, NumberField, Steps, and Switch time their transitions with Roadie's motion tokens in place of the Tailwind values they matched, so they follow a token change.

On a phone, Navigator no longer pulls its panes back while a navigation is pending for someone who prefers reduced motion. Navigator

Navigator's pending glow draws its spinning square small and scales it up.

Navigator no longer logs React's "Each child in a list should have a unique key" warning when a route's child streams in. Navigator

DateTime no longer reads the clock while rendering on the server, so it prerenders under Next's cacheComponents without a Suspense boundary, including as a Suspense fallback. DateTime

Pane.Footer has a little more room above its content and casts a soft shadow up over the body. Pane

A Pane now remembers its scroll for the history entry you're on, even after a push that keeps the same Navigator value, such as a change to the query alone. Pane

Autocomplete and Combobox now list the closest matches first as you type, so the highlighted first option, and Enter, take the likeliest one. Autocomplete

Switch renders a native <button>, so a bottom Drawer's swipe no longer swallows a tap on it, and its label's for now points at the switch itself. Switch

A horizontal ToggleGroup that runs out of room now scrolls sideways, as Tabs does, instead of squashing its items until the labels overflow. Toggle group

Autocomplete and Combobox options can be chosen with a tap on an iPhone. Autocomplete

cn() treats ease-spring-lively and every Roadie animate-* utility (animate-fade-in, -scale-in, -pop-in, -shake, -nudge, -pop, and -pop-tap) as one group each, so a later easing or animation class replaces an earlier one instead of both staying.

A raised or floating surface inside a field group, such as a toolbar in an editor, keeps its rim light while the field is hovered, focused, or invalid.

isUnsafeHref, and so every Roadie link component, now catches unsafe links hidden with a tab, line break, or control character, such as java\tscript: or a leading null character.

Requires zod 4.6.7, which fixes a denial-of-service issue in 4.6.5.

Date formatting reuses its Intl.DateTimeFormat instances, and formatValue reuses its Intl.NumberFormat instances.

text-subtle now meets APCA Lc 75 for body text on every intent, in light and dark mode, on the neutral surfaces and on the intent's own, including its subtle fill.

The token manifest lists the color-mix() strong fills that brand-secondary, success, and warning render, in both modes, instead of the plain steps meant only for browsers without color-mix().

The token manifest gives the chart ink tokens (--chart-grid, --chart-axis, --chart-label, --chart-value, and --chart-gap) a light value as well as a dark one, and lists --chart-highlight's oklch() value in light mode, with the hex as its fallback.

emphasis-overlay and emphasis-overlay-subtle now take a fixed white label, like their fixed dark fill.

em, i, and cite inside .prose (and so Prose) now show in Intermission's italic face. Prose

The reduced-motion reset now sets animation-delay and transition-delay to 0s on every element and its ::before and ::after, as well as shortening durations.

text-subtle on the neutral intent now meets APCA Lc 75 for body text.

A chart with no data now shows an EmptyState with an icon: small inside a Chart card and medium on its own. Empty state

Keep long category names inside the card on RankedBars, horizontal StackedBars and Funnel. RankedBars

Charts run on @tanstack/charts and @tanstack/react-charts 1.1.

LineChart's end label for the highlighted series, such as "Forecast 96%" on a pace chart, now uses the subtle text colour instead of --chart-highlight, so it meets body text contrast (APCA Lc 75) in light and dark.

The StackedBars examples label September "Sept", the house date format.

buildBrowseHref, and so CartDrawer's default "Browse events" target, now returns the collection route with the id in the path, /collection/{collectionId}, instead of /collection/?id={collectionId}. CartDrawer

Requires focus-trap 8.2.3, which keeps an input's caret and selection when a trap activates in an iframe.

The manifest gives CartDrawer and CartContents their usage code as an example, and describes CartExpiryDialogs. CartDrawer

The motion peer range now accepts ^14.0.0 alongside 12 and 13.

The class rules now also read tv() from tailwind-variants, and a const that a class attribute or class function names, one level deep, when it holds a string, array, or object.