Changelog

@misoto22/design is now @misoto22/folio, and classes, data- attributes and custom properties move from m22- to folio-.

CommandDialog takes shouldFilter, inputLabel and its dialog's focus and Escape handlers, and SearchPalette is now built on it instead of beside it.

styles.css no longer carries the website compositions: import website.css for them, and the new website-base.css for a whole site's document defaults.

CommandItem's active-row accent bar now clips to the row's own corner radius, so it no longer pokes past a rounded highlight.

SiteNavigation takes its width from its containing block, so a transformed or contained frame keeps the whole masthead inside it.

StepSequence now draws the core Steps rail, and ClipboardButton shares CodeBlock's copy state, including what a refused clipboard write does.

Heatmap lays its grid out as a fixed table now, so its cells keep a real width instead of collapsing to 0px.

data-accent is a shipped theme axis now — ink, clay, forest, cobalt, moss and plum, each re-pointing one token the whole system reads.

CalendarHeatmap — a year of daily readings as a week-by-week grid, built from the dates rather than from the order of the array.

Metric — the stat tile that sits four across on a console: a label, a monospaced figure, a status tone and a free slot under the number.

PageHeader — a page opening, with the order of its parts fixed: the trail, the kicker, the title, the controls that qualify it, and the sentence under them.

The warm and cool surfaces keep their rules dark now — both set --rule and --rule-2 once, so every border on a dark page rendered near-white.

Restore the collection filter hit area and the chart's two-pixel focus ring on public websites.

Media-detail return controls now retain a 44px touch target after browser subpixel rounding.

Media-detail return controls now retain a 44px touch target after browser subpixel rounding.

Media-detail return controls now keep a 44px touch target.

Website fields retain a 16px type size on phones, and keyboard-focused charts now show the system focus ring.

Sheet close actions provide a 44px target across every edge.

Question cards expose their heading as a named region and restore a 44px submit target.

Add reusable website compositions for navigation, portfolios, archives, reading, media, forms, search, metrics and conversations.

Every icon in the package is a Remix Icon glyph now, and the brand marks lucide dropped come back with them.

A chart's empty state stays where its plot was, instead of pinning to the top of a taller figure.

The chart palette gains a third value, and forced colours gets its ramp back.

A chart with a brush gets its plot back.

--control-lh: every control is now the height its token claims.

Example headings reach the Chinese site.

An example's own knobs move out of the specimen and into the canvas toolbar.

--bar-h: the band across the top of an application, as one number.

Hovering a rail no longer emboldens the section under the pointer.

AreaChart 面积图 becomes AreaChart - 面积图.

Sidebar is a drawer where a column will not fit, and a page has a side to sit on.

SidebarBranch — a row that opens onto more rows — plus a badge slot on SidebarGroup, and a 16rem rail.

Sidebar — a navigation rail down the side of an application, with the control that hides it living on the thing it hides.

Every theme axis default now has a name, so a subtree can opt OUT of an ancestor's theme rather than only into a different one.

Two controls the forms group was missing, and the way out of the one a slider cannot do: ColorPicker, NumberField, and editable on Slider.

RadarChart.Radar fills again instead of handing the SVG NaN.

The rail stops looking like a terminal listing.

BulletChart draws its target where the target is.

Named axis defaults reach one more call site, and the argument for them is now on the page.

Diagram edges go straight when straight is available.

A floating panel now reads as floating, and a list draws one highlight rather than two.

TabsList no longer grows a vertical scrollbar beside a row of tabs.

Three things that did not line up.

The package tells an agent when it gets a component wrong, and reaches agents that are not Claude Code.

Sixteen charts that drew a readable, plausible, wrong picture.

Nine places where what was drawn and what was announced were two different things.

Five content primitives: Text, Heading, Code, CodeBlock and Markdown.

Twelve fields in @misoto22/design/diagrams that typechecked and drew something else — and the half of every figure a screen reader was never given.

The form controls now announce what they draw.

Overlays now clear the surface that opened them, and reach the container that asked for them.

Four record-and-settings primitives — DescriptionList, Toolbar, Timestamp and AspectRatio — and three props that made a fourth and fifth component unnecessary.

Eight components that rendered correctly and described something else.

EmptyState and ErrorState take a level, and stop deciding the document outline for the caller.

Tag owns the filter case, and Markdown finishes the link boundary.

{@link} survives extraction, and the article cascade is documented the way it actually runs.

prefers-reduced-motion is now honoured by everything, instead of by whatever remembered to ask.

Add @misoto22/design/diagrams: five diagram figures and the chrome to explore one.

Fold the chart PNG export onto the shared SVG export.

Fix the Import: line the offline documentation prints for a chart.

The package documents itself for agents, offline: a misoto22-design CLI, a skill, and a README.

Add twenty data-visualisation primitives.

AppShell takes sidebarLabel, navLabel, openLabel and closeLabel.

One radius ladder driven by one factor, a calendar that picks a month in place of the grid, a reading surface for long-form content, and a numbered rail for the sequences a diagram should not be drawing.

ToggleGroup's sliding pill lands on its segment inside a scaled container.

Restore the table's column gutter, which a unitless zero had been silently eating.

Ten fixes from a walk over the published site.

Configurable Table, a searchable action menu, and calendar/date-picker repairs.

Command rows carry a glyph and a note, and the palette says which keys do what.

Fix the interactions that were drawn but not wired, and give selection something that moves.

Route every chosen-state surface through the accent pointer.

Overlays and the fluid scale can be re-based onto a bounded frame.

Published to npmjs, publicly, instead of to GitHub Packages.

New themes.css: theming beyond the accent.

Add eleven components and make the table do what a table is for.

Add a density axis, make every component direction-independent, and ship the tokens in a machine-readable form.

Ship the package with a licence, a publish target and a changelog. It is MIT licensed, published to GitHub Packages under the @misoto22 scope, and versioned by changesets — so a consumer can install it, and can tell what changed between two versions without reading the commit log.

Add a size and tree-shaking budget to the build (pnpm check:size).

Fix three defects a browser found that a jsdom suite could not see.

Re-ported the token layer to the White Reset. The package had been shipping the retired warm-cream theme — oklch surfaces, an 8/12/18px radius scale, a blurred elevation ramp. Anything built against it was off-brand by construction.

Split tokens from semantics. tokens.css holds primitives, semantic.css holds roles, and a component reads only roles — which is what makes dark mode a value swap rather than a second palette.

Swapped the faces to Hanken Grotesk, Newsreader and IBM Plex Mono, vendored by a script that owns the weight list.

Fourteen primitives: Skeleton, Progress, Alert, Tooltip, Table, Breadcrumb, Pagination, Accordion, RadioGroup, Avatar, Separator, Kbd, LinkArrow, FigureBand.

cn — the class merger every component now ends its class list with.

CONTROL_BASE / CONTROL_BORDER / isInvalid — the shared text-control look.

A documentation site at [ui.misoto22.com](https://ui.misoto22.com), generated from the package's own source.

Font stacks collapsed to the system font outside a `next/font` host. var(--font-hanken) with no fallback is invalid at computed-value time, and IACVT discards the whole declaration rather than the one term.

Every `hover:shadow-(--shadow)` was inert. The token resolves to none, so those hover states had been invisible while still costing a transition.

A caller's `className` did not reliably override. clsx emits both sides of a conflict and lets stylesheet order decide; cn merges by utility group.

`Field` announced nothing without an explicit `htmlFor`. The message id was derived from it, so the hint rendered and was never read aloud.

`NavItem asChild` rendered nothing when `icon` was omitted — two children reached a Slot that permits one.

Input, Textarea and Select had drifted apart on focus and disabled treatment, each carrying its own copy of the control class string.

Spinner was an accent ring on a system whose accent is ink.