@imfusion/web-ui 0.11.1-dev.7.gf073da2b → 0.11.1-dev.71.g25428988

package/CHANGELOG.md

@@ -4,31 +4,226 @@
 
 ### Added
 
+- `Table.SelectCell` and `Table.SelectAllCell` put a row checkbox and a counted select-all checkbox in action columns,
+  `Table.Row` takes `disabled` to lock a row (its checkbox, `Table.RowLink` and `Table.RowButton` stop responding), and
+  `Table.EmptyRow` spans one muted cell across all columns. Selection state and the counter stay the app's.
+  [Table](src/components/table/table.mdx) ([WEBSDK-306](https://imfusion.atlassian.net/browse/WEBSDK-306)) — Nikolaus Brunner
+  <brunner@imfusion.com>
+- `Image` is a new picture box over native `<picture>` and `<img>`, with an AVIF and a WebP source and a fallback `<img>`.
+  `width` and `height` are required and reserve the box before the image loads. It loads lazily and decodes asynchronously;
+  `priority` loads it eagerly with high fetch priority. A soft pulse shows while it loads and a glyph when it fails.
+  `radius`, `fit`, `border`, `borderWidth` and `aspectRatio` shape the box. [Image](src/components/image/image.mdx)
+  ([WEBSDK-250](https://imfusion.atlassian.net/browse/WEBSDK-250)) — Nikolaus Brunner <brunner@imfusion.com>
+- `Menu` is a new action menu adapted from Base UI, with every upstream part. Items take `icon`, `description`, and `badge`;
+  `CheckboxItem` and `RadioItem` draw their check in the trailing cell; `Popup` has a `size` of `sm` (dense, the default) or
+  `md`. A menu where no item has an icon drops the icon gutter. [Menu](src/components/menu/menu.mdx)
+  ([WEBSDK-248](https://imfusion.atlassian.net/browse/WEBSDK-248)) — Nikolaus Brunner <brunner@imfusion.com>
+- `Dialog.Alert` composes a confirmation from props like `Dialog.Simple`, on Base UI's Alert Dialog: screen readers announce
+  it as an `alertdialog`, it is always modal, and a click on the overlay leaves it open. `actions` is required, the header has
+  no close button, and `status` takes any variant. It replaces a `Dialog.Simple` or a hand-composed `Dialog.Root` that asks
+  the user to confirm a step, such as removing a member or discarding changes. [Dialog](src/components/dialog/dialog.mdx)
+  ([WEBSDK-247](https://imfusion.atlassian.net/browse/WEBSDK-247)) — Nikolaus Brunner <brunner@imfusion.com>
+- `Progress` is a new bar for the completion of a running task, adapted from Base UI. `size` runs from `xs` (a 2px hairline) to
+  `lg`, `layout` is `stacked` or `inline`, `value={null}` sweeps while the amount is unknown, and the fill turns positive at the
+  maximum. [Progress](src/components/progress/progress.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `FileDropZone` is a new zone that collects files or whole folders by drop or through its `Trigger` buttons, in sizes `sm`,
+  `md` and `lg`. It reports accepted and rejected files through `onFilesAdded`, scans folders recursively, and reads the
+  result out to screen readers. `FileDropZone.Upload` composes the zone with a file list, a skipped-files note, per-file and
+  overall `Progress`, and an upload button; the app owns the items and the upload, and `onRetry` adds a Retry button to
+  failed rows. A single-file zone shows its file with `FileDropZone.File` and `FileDropZone.Remove`, and the glyph changes to a
+  page.
+  [FileDropZone](src/components/file-drop-zone/file-drop-zone.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `@imfusion/web-ui/integrations/view-tools` adds `ViewTools`: Pan, Zoom, and Windowing toggles that limit the left mouse
+  button in the ImFusion main 2D and MPR views to one action, and a button that resets the view group. `orientation` lays
+  the tools out in a row (`"horizontal"`, the default) or a column (`"vertical"`). It needs `@imfusion/sdk` 1.3.0 or later. [ViewTools](src/integrations/view-tools/view-tools.mdx)
+  ([WEBSDK-290](https://imfusion.atlassian.net/browse/WEBSDK-290)) — Stephan Wenninger <wenninger@imfusion.com>
+- `useViewInteraction` from `@imfusion/web-ui/integrations/view-tools` reads and sets the active `ViewTools` tool, so the
+  app and the toolbar share one value. `setViewInteraction("Default")` releases the tool. [ViewTools](src/integrations/view-tools/view-tools.mdx)
+  ([WEBSDK-290](https://imfusion.atlassian.net/browse/WEBSDK-290)) — Nikolaus Brunner <brunner@imfusion.com>
+- `TabNav` is a new row of links to routes with a bar under the current one, in the underline look of `Tabs`. `TabNav.Item`
+  renders an `<a>`, takes a router link as `render`, and sets `aria-current="page"` from `current`.
+  [TabNav](src/components/tab-nav/tab-nav.stories.tsx#InAProjectHeader) — Nikolaus Brunner <brunner@imfusion.com>
+- `Tabs.Root` takes `appearance`: `"boxed"` (the default, unchanged) or `"underline"`, with mono labels, a 2px bar under the
+  active tab on a hairline rule, and an unframed panel. Underline is horizontal only; a vertical Tabs stays boxed.
+  [Tabs](src/components/tabs/tabs.stories.tsx#Underline) — Nikolaus Brunner <brunner@imfusion.com>
+- `Textarea` is a new multi-line input adapted from Base UI, with the `Input` variants and sizes, a drag-to-resize corner, and
+  validation state from `Field`. [Textarea](src/components/textarea/textarea.mdx)
+  ([WEBSDK-244](https://imfusion.atlassian.net/browse/WEBSDK-244)) — Nikolaus Brunner <brunner@imfusion.com>
+- `Table.RowButton` is a button that stands for its whole row, like `Table.RowLink`, for rows that open a drawer or run an
+  action instead of navigating. [Table](src/components/table/table.stories.tsx#RowButton) — Nikolaus Brunner
+  <brunner@imfusion.com>
+- `Combobox` and `Autocomplete` are new inputs adapted from Base UI: a text field with a filterable list, for choosing one or
+  several options (`Combobox`) or suggesting options while keeping free text (`Autocomplete`). Multi-select lists show a
+  checkbox on every row. [Combobox](src/components/combobox/combobox.mdx),
+  [Autocomplete](src/components/autocomplete/autocomplete.mdx) ([WEBSDK-245](https://imfusion.atlassian.net/browse/WEBSDK-245))
+  — Nikolaus Brunner <brunner@imfusion.com>
 - `minWidth` and the `BreakpointName` type are exported, so `useMediaQuery(minWidth("md"))` works as the `styling` topic
   shows. — Nikolaus Brunner <brunner@imfusion.com>
 - `@imfusion/web-ui/icons` adds four viewport layout icons in the Layout category: `LayoutAuto`, `LayoutRows`,
   `LayoutFocusPlusStack`, and `LayoutFocusPlusRows`. [Iconography](src/icons/iconography.stories.tsx#Iconography)
   — Stephan Wenninger <wenninger@imfusion.com>
+- `@imfusion/web-ui/icons` adds `LabelMap` in the Medical Imaging category: the outline of a lumbar vertebra, seen from the
+  side. The drawing is a draft for design review. [Iconography](src/icons/iconography.stories.tsx#Iconography) —
+  Nikolaus Brunner <brunner@imfusion.com>
+- `LayoutMode` is new, from `@imfusion/web-ui/integrations/layout-mode`. It switches the ImFusion Web SDK viewer between
+  Auto, Rows, Focus + stack, and Focus + rows through `useLayoutMode`. `variant="compact"` is a row of icon toggles and
+  `variant="labeled"` a vertical list with each mode's name beside its icon; every name can be replaced through its label
+  prop. [LayoutMode](src/integrations/layout-mode/layout-mode.mdx)
+  ([WEBSDK-292](https://imfusion.atlassian.net/browse/WEBSDK-292)) — Stephan Wenninger <wenninger@imfusion.com>
+- `Typo.UnorderedList` takes `markerVariant` to colour its dash apart from the text, such as the brand dash on main text.
+  [Typo](src/components/typo/typo.stories.tsx#MarkerVariant) — Nikolaus Brunner <brunner@imfusion.com>
+- Focus ring tokens: `--imf-ui-focus-ring-width`, `--imf-ui-focus-ring-color`, and two offsets for a ring outside the
+  element or inside it (`-offset`, `-offset-inset`).
+  ([WEBSDK-274](https://imfusion.atlassian.net/browse/WEBSDK-274)) — Nikolaus Brunner <brunner@imfusion.com>
+- `initialsFromName` gives one or two initials from a display name for `Avatar.Fallback`: `Mona Keller` gives `MK`, a single
+  word gives its first two letters, and an empty name gives `?`. [Avatar](src/components/avatar/avatar.mdx) — Nikolaus
+  Brunner <brunner@imfusion.com>
 
 ### Changed
 
+- In dark mode, primary fills are lighter and primary text darker, so a primary heading and a primary button read as one
+  blue: `--imf-ui-color-primary-bg-luma-dark` defaults to 0.66 and `--imf-ui-color-primary-fg-luma-dark` to 0.72.
+  [Color system](docs/color-system.md) — Nikolaus Brunner <brunner@imfusion.com>
+- `Button`'s `shortcut` key sits inline after the label and before an end icon, and the button grows to fit it, so a long key such as `Ctrl Enter` fits
+  beside a short label. `IconButton` keeps it in the top-right corner. [Button](src/components/button/button.mdx)
+  — Nikolaus Brunner <brunner@imfusion.com>
+- `Button`, `IconButton`, and `CopyButton` keep their hover look while the popup, menu, or drawer they open is shown
+  (`data-popup-open` with `aria-expanded`). A tooltip does not trigger it. This includes a `Button` passed as `render` to a
+  `Popover.Trigger`, `Menu.Trigger`, or `Drawer.Trigger`.
+  [Button](src/components/button/button.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- An action cell that is not the last in its row drops its end padding, so a select gutter sits next to the column after it.
+  [Table](src/components/table/table.mdx) ([WEBSDK-306](https://imfusion.atlassian.net/browse/WEBSDK-306)) — Nikolaus Brunner
+  <brunner@imfusion.com>
+- `Dialog.Simple` and `Dialog.Inline` without children render no `Dialog.Body`, so the header sits directly on the footer
+  without the body's padding between them. [Dialog](src/components/dialog/dialog.mdx)
+  ([WEBSDK-247](https://imfusion.atlassian.net/browse/WEBSDK-247)) — Nikolaus Brunner <brunner@imfusion.com>
+- `initialsFromEmail` gives the first two letters of a single-segment local part, `jkeller@…` gives `JK`, and `?` for an
+  empty one, the same rule as `initialsFromName`. [Avatar](src/components/avatar/avatar.mdx) — Nikolaus Brunner
+  <brunner@imfusion.com>
+- `Input`, `Field.Control`, `NumberField`, `Select`, `Combobox`, and `Autocomplete` show focus by turning their 1px border
+  primary, with no outline. [Input](src/components/input/input.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- `Drawer` draws no border by default; `borderColor` adds one, such as `borderColor="primary"` for the previous look.
+  [Drawer](src/components/drawer/drawer.mdx) — Nikolaus Brunner <brunner@imfusion.com>
+- Focus ring ([WEBSDK-274](https://imfusion.atlassian.net/browse/WEBSDK-274)) — Nikolaus Brunner <brunner@imfusion.com>
+  - Every component draws the same focus ring from the focus ring tokens, and popups draw none.
+  - Navigation items and toasts draw the ring fully inside the item.
+  - A focused `Toggle` draws no box: its icon turns bolder and its label underlined, in primary unless pressed.
+  - An open `Select` trigger keeps its surface and turns its border primary instead of filling with primary.
+  - A focused `Tabs.Tab` underlines its label instead of drawing a box that looks like the active indicator. A focused
+    `Tabs.Panel` tints together with the active tab instead of drawing a second line inside its border.
+  - The branded `AppShell` header and navbar draw a light ring. A focused `AppShell.NavItem` shows its active underline at
+    double thickness instead of an outline.
+  - A light ring shows on blue fills: an active or open `NavigationMenu` link or trigger, and the `oncolor` context of
+    `Button`, `AccountCard`, and `Typo`.
+  - `AppShell.Burger` draws the primary ring on default surfaces, where it used the text colour.
+  - A focused chamfered `Button` shows its hover state, and `Code.Block`'s copy button colours its icon; a ring cannot
+    show through their clip-path.
+  - `Code`'s inline copy button shows the ring in place of the browser default.
+- `Typo.UnorderedList` draws its dash in the text colour by default; `markerVariant="primary"` gives the brand dash.
+  — Nikolaus Brunner <brunner@imfusion.com>
+- `Callout.Root` defaults to `maxWidth="lg"`, keeps a minimum width of 15rem, and spaces its title, description, and list
+  items more evenly. [Callout](src/components/callout/callout.stories.tsx#WithList) — Nikolaus Brunner <brunner@imfusion.com>
+- `Select` items have more room: 1rem padding at the sides and 0.75rem above, below, and between the indicator and text.
+  The trigger's focus ring sits on its border. [Select](src/components/select/select.mdx)
+  ([WEBSDK-245](https://imfusion.atlassian.net/browse/WEBSDK-245)) — Nikolaus Brunner <brunner@imfusion.com>
 - Agent skills — Nikolaus Brunner <brunner@imfusion.com>
   - `imf-web-ui-conventions` exempts React components from the explicit return type on exported functions.
+  - The `imf-web-ui-conventions` `npm-project` topic sets `engines.node` to Web UI's own range, and `imf-web-ui-audit`
+    reports an app whose range admits a Node outside it.
+  - The `imf-web-ui-conventions` `assets` topic points to `Image` for content images.
+  - `web-ui-dev-new-component` adds a review step before handover: conventions and plan checklist against the code, a token
+    showcase entry, the docs audit, and an `implementation-reviewer` pass.
+  - `web-ui-dev-new-component` and the design-system doc require rendering every published drafts-canvas board and looking
+    at it, by the session that owns the work, using a local copy of the board.
   - The `project-structure` topic keeps a route's only view, such as a form, in the route file and moves views to the `-`
     folder only when the page composes several. `imf-web-ui-audit` reports by views, not line counts.
-  - The `imf-web-ui-conventions` audit checklist names the assets box "Photographs: WebP", like its topic heading.
+  - The `imf-web-ui-conventions` `assets` topic encodes photographs as AVIF and WebP at 800 and 1600px and renders them
+    through `<picture>` with `srcSet` and `sizes`. Every `<img>` has `width` and `height`, below-the-fold images load
+    lazily, and only the largest paint gets `fetchpriority="high"`.
+  - The `imf-web-ui-conventions` `components` topic names the landmarks `AppShell` renders and asks for one `Typo.H1` per
+    page, `Button` for actions, and `Link` for destinations.
+  - The `imf-web-ui-conventions` `library-boundary` topic reports a native element or local function that duplicates a Web
+    UI component, part, or helper such as `initialsFromName`.
+  - Forms use TanStack Form: `imf-web-ui-ux` names it for every form, the `imf-web-ui-conventions` `validation` topic
+    validates user input in the form's validators with the Zod schema, and `imf-web-ui-audit` reports a form whose state and
+    validation are written by hand.
+  - The `imf-web-ui-conventions` `react` topic splits into `composition`, `state`, and `effects`, and each rule names the
+    React version it needs. New rules from react.dev: pure render, no component defined inside another, no `ref.current`
+    during render, `ref` as a prop, `useId` for accessibility ids, error boundaries around UI units, one `status` over
+    exclusive booleans, pure reducers, no object or function effect dependencies, and `useEffectEvent` for values an effect
+    should not react to. React's `<form action>`, `useActionState`, and `useOptimistic` are the fallbacks without TanStack.
   - `web-ui-dev-new-component`, `web-ui-dev-update-component`, and `web-ui-dev-design-component` draft on the shared
     Web UI Component Drafts canvas: a block per component on its Storybook group's page, one row per fidelity rung.
+  - `web-ui-dev-new-component` and `web-ui-dev-update-component` wait for the user to approve the design on the canvas
+    before writing the plan.
+  - Agents verify visual work on their own Storybook, started with `npm run dev`, against the approved canvas design.
+  - `web-ui-dev-teardown-worktree` lands local base-branch commits together with the worktree branch, and a branch with
+    an open Bitbucket pull request merges in Bitbucket with `bkt pr merge`.
+  - `web-ui-dev-new-component` and `web-ui-dev-update-component` open a drafts-canvas block with an API table and short
+    usage snippets.
+  - `web-ui-dev-design-system-sync` leaves every story exported from `renderAll` out of the sync on its own, so a new
+    component's `All` story no longer breaks the next sync. Until 2026-12-14 every sync also uploads the same build to the
+    standalone Claude Design project.
+  - The `imf-web-ui-conventions` `styling` topic shows a container setting a custom property that its child reads with
+    its own default as the fallback.
+  - `web-ui-dev-release` syncs the Claude Design system once npm serves the stable version.
+  - `web-ui-dev-record-clip` records every clip in light and dark, and release highlights list both files of each pair.
 - Documentation — Nikolaus Brunner <brunner@imfusion.com>
+  - The Changelog page's screenshot carousel shows one file of each `-light`/`-dark` pair, the one for the page's color
+    scheme, and switches with the Storybook toolbar.
   - `docs/design-system.md` describes the Web UI Component Drafts canvas, and `AGENTS.md` links it. A shipped component
     keeps its block under an "Implemented" note that names its story.
+  - `docs/conventions.md` shows how a component declares its default as a custom-property fallback that a container
+    overrides.
+  - `design/DESIGN.md` says focus turns a field's hairline border primary: one line, same width, nothing outside it.
+- Storybook — Nikolaus Brunner <brunner@imfusion.com>
+  - The Controls table lists a component's own props first, then the props it inherits from Base UI or React.
+  - `withFrame` draws its border only with `bordered: true`. Layout stories such as Stack and Row use it to show their bounds.
+  - Interaction tests live in hidden `Test-only:` stories, and default-open popups open only in the single-story view,
+    as `docs/story-conventions.md` describes.
+  - Combobox and Autocomplete stories start at the same top-left corner, so clicking through them does not shift the
+    layout. A story resizes its frame with `parameters.frame`, which `withFrame` reads.
+  - The Autocomplete interaction test reads the popup's height after it reopens, so it passes on every run.
+- `engines.node` is `^24.14 || >=26`. Node 22 and Node 24 before 24.14 reject `#/` subpath imports, so Storybook did not
+  start there. CI builds on Node 24.14.0, and `.nvmrc` selects Node 24. — Nikolaus Brunner <brunner@imfusion.com>
+- `RichLink` sets every label in the strong weight, with or without a `description`. [RichLink](src/components/rich-link/rich-link.mdx) — Nikolaus Brunner <brunner@imfusion.com>
 
 ### Fixed
 
+- `Drawer.Title` wraps a long title instead of running past the panel edge.
+  [Drawer](src/components/drawer/drawer.stories.tsx#LongTitle) — Nikolaus Brunner <brunner@imfusion.com>
+- `Card` describes its coloured fills correctly: they set the background, and their content takes `oncolor` variants. —
+  Nikolaus Brunner <brunner@imfusion.com>
+- Typo inside `Callout.Description`, such as `Typo.UnorderedList` or `Typo.P`, matches the description's size and takes
+  the variant's colour. [Callout](src/components/callout/callout.stories.tsx#WithList) — Nikolaus Brunner <brunner@imfusion.com>
+- A `Select` option with `Select.ItemDescription` is named by its text alone and reads the description as its accessible
+  description. ([WEBSDK-245](https://imfusion.atlassian.net/browse/WEBSDK-245)) — Nikolaus Brunner <brunner@imfusion.com>
+- Generated CSS module types skip `:global()` selectors instead of listing their names as classes. — Nikolaus Brunner
+  <brunner@imfusion.com>
 - `Table.RowLink` covers its whole row: a click anywhere in the row follows the link, while buttons, checkboxes, switches,
   links, and form fields in the row keep their own click. — Nikolaus Brunner <brunner@imfusion.com>
 - `npm run dev` starts Storybook on the next free port again while another checkout's Storybook runs. — Nikolaus Brunner
   <brunner@imfusion.com>
+- A Storybook sidebar row's status icon stays in place on hover. — Nikolaus Brunner <brunner@imfusion.com>
+- A docs page's `Uses` links open the linked component's page on the hosted Storybook too. — Nikolaus Brunner
+  <brunner@imfusion.com>
+- `npm run ci:status` lists queued and running builds beside finished ones. — Nikolaus Brunner <brunner@imfusion.com>
+- Components — Nikolaus Brunner <brunner@imfusion.com>
+  - A `Drawer.Close` or `Popover.Close` rendered as another component, such as a `Button`, keeps that component's styles.
+  - A `Popover.Trigger` rendered as another component keeps that component's styles, so `render={<Button />}` looks like a Button.
+  - `ScrollArea` keeps scrolling inside only along a direction it overflows. Along the other one, the wheel scrolls the
+    page. [ScrollArea](src/components/scroll-area/scroll-area.mdx)
+  - A ghost `Button` or `IconButton` fades all its content on hover, an `Icon` with its own colour included, such as
+    `iconProps={{ variant: "negative" }}`. [Button](src/components/button/button.mdx)
+- Components — Ehsan Shafiei <shafiei@imfusion.com>
+  - `Code.Block` passes scrolling to the page when the code cannot scroll farther in that direction. [Code](src/components/code/code.mdx)
+- `dist/style.css` opens with the layer order statement (`imf-ui.tokens`, `imf-ui.base`, `imf-ui.components`), so each
+  component's own focus style beats the base focus ring and a focused field shows only its primary border.
+  ([WEBSDK-274](https://imfusion.atlassian.net/browse/WEBSDK-274)) — Nikolaus Brunner <brunner@imfusion.com>
+- `Popover.Positioner` sets the popup 4px away from its trigger by default, as `Select` does, on whichever side it opens.
+  — Nikolaus Brunner <brunner@imfusion.com>
+- `Button variant="primary"` hovers to a blue outline on any surface. Its hover fill was the `main` background, which showed as a
+  white box on a `support` card. [Button](src/components/button/button.stories.tsx#OnSupportCard) — Nikolaus Brunner <brunner@imfusion.com>
 
 ---
 

package/dist/{code-Cl9AzRyF.js → code-72NzL5Cp.js}

@@ -1,12 +1,12 @@
-import { r as e } from "./resolve-state-props-DQf9WiGv.js";
-import { Xo as t, _M as n, ja as r } from "./icons-vc1WZCxX.js";
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { Xo as t, ja as n, vM as r } from "./icons-CMetKl2x.js";
 import { t as i } from "./meta-V_KyLeGn.js";
-import { a, i as o, n as s, o as c, s as l } from "./scroll-area-z9Lf9uIk.js";
+import { a, i as o, n as s, o as c, s as l } from "./scroll-area-CXQ_SxPX.js";
 import { cx as u } from "class-variance-authority";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 import { useCallback as m, useEffect as h, useRef as g, useState as _ } from "react";
-import { mergeProps as v } from "@base-ui/react/merge-props";
-import { useRender as y } from "@base-ui/react/use-render";
+import { useRender as v } from "@base-ui/react/use-render";
+import { mergeProps as y } from "@base-ui/react/merge-props";
 //#region src/hooks/use-clipboard.ts
 function b({ timeout: e = 1500 } = {}) {
 	let [t, n] = _(!1), r = g(void 0);
@@ -34,12 +34,12 @@ var x = {
 	InlineLink: () => w
 });
 function C({ copyable: e = !1, children: i, render: a, ...o }) {
-	let { copied: s, copy: c } = b(), l = g(null), u = s ? r : t;
-	return y({
+	let { copied: s, copy: c } = b(), l = g(null), u = s ? n : t;
+	return v({
 		defaultTagName: "code",
 		render: a,
 		props: {
-			...v(o, {
+			...y(o, {
 				className: x.inline,
 				children: /* @__PURE__ */ p(d, { children: [
 					/* @__PURE__ */ f("span", {
@@ -53,7 +53,7 @@ function C({ copyable: e = !1, children: i, render: a, ...o }) {
 						"data-copied": s || void 0,
 						"aria-label": s ? "Copied" : "Copy",
 						onClick: () => c(l.current?.textContent ?? ""),
-						children: /* @__PURE__ */ f(n, {
+						children: /* @__PURE__ */ f(r, {
 							glyph: u,
 							size: 12,
 							strokeWidth: 2,
@@ -72,11 +72,11 @@ function w({ kind: e = "external", ...t }) {
 		target: "_blank",
 		rel: "noreferrer"
 	} : {};
-	return y({
+	return v({
 		defaultTagName: "a",
 		render: t.render,
 		props: {
-			...v(n, t, {
+			...y(n, t, {
 				className: u(x.inline, x.inlineLink, t.className),
 				children: t.children
 			}),
@@ -87,7 +87,7 @@ function w({ kind: e = "external", ...t }) {
 }
 w.displayName = "Code.InlineLink";
 function T({ className: e, language: i, hideCopy: d = !1, children: m, ...h }) {
-	let { copied: _, copy: v } = b(), y = g(null), S = _ ? r : t;
+	let { copied: _, copy: v } = b(), y = g(null), S = _ ? n : t;
 	return /* @__PURE__ */ p("div", {
 		"data-imf-ui-component": "Code.Block",
 		className: u(x.block, e),
@@ -102,7 +102,7 @@ function T({ className: e, language: i, hideCopy: d = !1, children: m, ...h }) {
 				"data-copied": _ || void 0,
 				"aria-label": _ ? "Copied" : "Copy",
 				onClick: () => v(y.current?.textContent ?? ""),
-				children: /* @__PURE__ */ f(n, {
+				children: /* @__PURE__ */ f(r, {
 					glyph: S,
 					size: 12,
 					strokeWidth: 2,

package/dist/components/autocomplete/autocomplete.d.ts

@@ -0,0 +1,144 @@
+import { Autocomplete as AutocompletePrimitive } from '@base-ui/react/autocomplete';
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+import { VariantProps } from 'class-variance-authority';
+import { comboboxRoot } from '../combobox/combobox.cva';
+type UpstreamItem = React.ComponentProps<typeof AutocompletePrimitive.Item>;
+type RootProps<ItemValue> = Omit<AutocompletePrimitive.Root.Props<ItemValue>, "items"> & {
+    items?: readonly ItemValue[] | undefined;
+    /** Field width: `auto` keeps the compact minimum; `wide` raises it; `full` fills the parent. @default "auto" */
+    width?: VariantProps<typeof comboboxRoot>["width"];
+};
+/**
+ * Autocomplete.Root — text input that suggests options as you type and keeps free text.
+ *
+ * Wraps children in a div so the field and its label stack regardless of the parent's layout.
+ * Autocomplete.Portal is unaffected (it renders to document.body).
+ *
+ * @doc https://base-ui.com/react/components/autocomplete
+ * @llm https://base-ui.com/react/components/autocomplete.md
+ */
+export declare function Root<ItemValue = unknown>({ width, className, style, ...props }: RootProps<ItemValue> & {
+    className?: string;
+    style?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+/** Autocomplete.InputGroup — the field box that holds the input, clear button, and trigger. */
+export declare function InputGroup(props: React.ComponentProps<typeof AutocompletePrimitive.InputGroup>): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputGroup {
+    var displayName: string;
+}
+/** Autocomplete.Input — the text input. Its text is the value. */
+export declare function Input(props: React.ComponentProps<typeof AutocompletePrimitive.Input>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Input {
+    var displayName: string;
+}
+/** Autocomplete.Trigger — button that opens the popup. Without children it draws a chevron. */
+export declare function Trigger({ children, ...props }: React.ComponentProps<typeof AutocompletePrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Trigger {
+    var displayName: string;
+}
+/** Autocomplete.Icon — visual indicator (chevron) inside the trigger. */
+export declare function Icon(props: React.ComponentProps<typeof AutocompletePrimitive.Icon>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Icon {
+    var displayName: string;
+}
+/** Autocomplete.Clear — button that clears the text. Without children it draws a cross. */
+export declare function Clear({ children, ...props }: React.ComponentProps<typeof AutocompletePrimitive.Clear>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Clear {
+    var displayName: string;
+}
+/** Autocomplete.Value — renders the input text. */
+export declare function Value(props: React.ComponentProps<typeof AutocompletePrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Value {
+    var displayName: string;
+}
+/** Autocomplete.Portal — portals the popup tree to document.body (or a custom container). */
+export declare function Portal(props: React.ComponentProps<typeof AutocompletePrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Portal {
+    var displayName: string;
+}
+/** Autocomplete.Backdrop — overlay behind the popup (visible only in modal mode). */
+export declare function Backdrop(props: React.ComponentProps<typeof AutocompletePrimitive.Backdrop>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Backdrop {
+    var displayName: string;
+}
+/** Autocomplete.Positioner — positions the popup relative to the field. */
+export declare function Positioner({ align, sideOffset, ...props }: React.ComponentProps<typeof AutocompletePrimitive.Positioner>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Positioner {
+    var displayName: string;
+}
+/** Autocomplete.Popup — dropdown surface. It keeps the height it had when it opened while the list filters. */
+export declare function Popup(props: React.ComponentProps<typeof AutocompletePrimitive.Popup>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Popup {
+    var displayName: string;
+}
+/** Autocomplete.Arrow — pointer arrow attached to the popup. */
+export declare function Arrow(props: React.ComponentProps<typeof AutocompletePrimitive.Arrow>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Arrow {
+    var displayName: string;
+}
+/** Autocomplete.Status — live-region line for loading and result counts, announced to screen readers. */
+export declare function Status(props: React.ComponentProps<typeof AutocompletePrimitive.Status>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Status {
+    var displayName: string;
+}
+/** Autocomplete.Empty — message shown while no item matches. */
+export declare function Empty(props: React.ComponentProps<typeof AutocompletePrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Empty {
+    var displayName: string;
+}
+/** Autocomplete.List — items container. An `inline` list keeps the height it had when it mounted while it filters. */
+export declare function List(props: React.ComponentProps<typeof AutocompletePrimitive.List>): import("react/jsx-runtime").JSX.Element;
+export declare namespace List {
+    var displayName: string;
+}
+/** Autocomplete.Row — one row of a `grid` list. */
+export declare function Row(props: React.ComponentProps<typeof AutocompletePrimitive.Row>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Row {
+    var displayName: string;
+}
+/** Autocomplete.Collection — renders a list of items inside a group. */
+export declare function Collection(props: React.ComponentProps<typeof AutocompletePrimitive.Collection>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Collection {
+    var displayName: string;
+}
+interface ItemProps extends Omit<UpstreamItem, "value"> {
+    value: UpstreamItem["value"];
+}
+/** Autocomplete.Item — individual suggestion. It carries no selection state, so it has no indicator column. */
+export declare function Item(props: ItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Item {
+    var displayName: string;
+}
+/** Autocomplete.ItemText — text label for an item. */
+export declare function ItemText(props: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export declare namespace ItemText {
+    var displayName: string;
+}
+/** Autocomplete.ItemDescription — a muted second line under an item's text. */
+export declare function ItemDescription(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare namespace ItemDescription {
+    var displayName: string;
+}
+/** Autocomplete.Group — wrapper around a grouped set of items. */
+export declare function Group(props: React.ComponentProps<typeof AutocompletePrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Group {
+    var displayName: string;
+}
+/** Autocomplete.GroupLabel — heading for an Autocomplete.Group. */
+export declare function GroupLabel(props: React.ComponentProps<typeof AutocompletePrimitive.GroupLabel>): import("react/jsx-runtime").JSX.Element;
+export declare namespace GroupLabel {
+    var displayName: string;
+}
+/** Autocomplete.Separator — thin divider between items. */
+export declare function Separator(props: React.ComponentProps<typeof SeparatorPrimitive>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Separator {
+    var displayName: string;
+}
+/** The upstream hook that builds a `filter` function from locale and match options. */
+export declare const useFilter: typeof import('@base-ui/react/internals/filter').getFilter;
+/** Reads the filtered items inside an autocomplete, for a custom list renderer. */
+export declare const useFilteredItems: typeof AutocompletePrimitive.useFilteredItems;
+export {};

package/dist/components/autocomplete/autocomplete.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const autocompleteMeta: ComponentMeta;

package/dist/components/autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export * as Autocomplete from './autocomplete';
+export { autocompleteMeta } from './autocomplete.meta';

package/dist/components/avatar/avatar.d.ts

@@ -23,7 +23,7 @@ declare namespace Root {
 }
 /**
  * Avatar.Fallback — the initials the consumer passes, one or two letters. Without children it shows a person glyph.
- * It derives nothing from a name or email.
+ * It derives nothing from a name or email; `initialsFromName` and `initialsFromEmail` do.
  */
 declare function Fallback({ children, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
 declare namespace Fallback {

package/dist/components/card/card.d.ts

@@ -17,8 +17,9 @@ type RootProps = React.ComponentProps<"div"> & VariantProps<typeof root> & {
  * `Card.Footer`. `density` sets one scale that drives both each slot's padding
  * and the gap between slots. `variant` picks the look — neutral tonal surfaces
  * (`main`/`support`/`minor`) carry a hairline border; coloured intent fills
- * (`primary`/`brand`) flip to contrast text and drop the border. `shadow` and
- * `radius` layer on top. Also called a panel, tile, or paper.
+ * (`primary`/`brand`) set the background only and are borderless. Put `oncolor`
+ * content inside them, e.g. `Typo variant="oncolor"` and `Button context="oncolor"`.
+ * `shadow` and `radius` layer on top. Also called a panel, tile, or paper.
  *
  * The image is always the first entry in the stack, so `orientation` just
  * switches the stack between a column and a row without reordering slots.

package/dist/components/checkbox/checkbox.cva.d.ts

@@ -0,0 +1,3 @@
+/** Checkbox's box and mark styles, shared with primitives that draw the same visual on another element. */
+export declare const checkboxRoot: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const checkboxIndicator: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/combobox/combobox.cva.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Class recipes for every Combobox part, shared with Autocomplete, which renders the same field and list.
+ * Popup, list, and item styles compose Select's.
+ */
+export declare const comboboxRoot: (props?: ({
+    width?: "auto" | "wide" | "full" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const comboboxLabel: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxInputGroup: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxChips: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxInput: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxTrigger: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxIcon: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxClear: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxChip: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxChipRemove: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxBackdrop: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxPositioner: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxPopup: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxArrow: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxList: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxRow: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxStatus: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxEmpty: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxGroup: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxGroupLabel: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxSeparator: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxItem: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxItemIndicator: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxItemIndicatorBox: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxItemMark: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxItemText: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const comboboxItemDescription: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/** Autocomplete items have no indicator column, so text and description start in the first one. */
+export declare const autocompleteItem: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const autocompleteItemText: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const autocompleteItemDescription: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;