@kennycorrea/ui 1.8.5 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 1.9.0 — 2026-11-06
+
+A searchable `Combobox`, sorting on a phone, table rows that are real links, loading tiles, and form controls with a real touch target.
+
+- **`Combobox`**: a selection field with search, for lists too long to scan. One value, or several with `multiple`, shown as removable `Pill`s inside the field. Filtering ignores case and accents ("sao" finds "São"), or `onSearch` hands the text to a server and shows `options` as given; a chosen item keeps its label when a search replaces them. The ARIA combobox pattern: focus stays on the input and `aria-activedescendant` reports the active option, with arrows, Home, End, Enter, Escape, and Backspace on an empty field to remove the last pill. The list is in a portal, so a card's `overflow` cannot clip it, and it works inside a modal `Dialog`, where Escape closes the list first. Below 768px (`sheetBelow`) it is a bottom sheet with the search on top. Takes its label, error and `aria-describedby` from `FormField`. `icon` is decorative, as on `Select`. Built from Themes' own text field classes rather than `TextField.Root`, which has to put the input before the pills, so it matches `Input` at every size. Tests in `test/Combobox.test.tsx`; example in `examples/Comboboxes.tsx`.
+- **`DataTable` sorting in the stacked layout.** The sort buttons live in the `thead`, which the stacked layout hides, so a phone had no way to sort. A compact "Sort by: Customer ↑" control now sits above the cards, beside the select-all. It lists the sortable columns by `header` and follows the headers' three states: a new column is ascending, the same one reverses, and once more clears the sort. Whether it exists is a container query, like the rest of the layout; only how its list opens depends on the viewport (a bottom sheet below 768px). The wide layout is unchanged. New UI strings `sortBy`, `ascending` and `descending`. Tests in `test/DataTable-sort.test.tsx`.
+- **`DataTable` `getRowHref` and `renderLink`**, for lists that open a detail page. The row-header cell becomes a real link (the first cell, with no `isRowHeader` column), so a new tab, copying the address and the URL on hover all work. A plain click on the rest of the row goes through that link, so `renderLink` navigates without a reload; a modifier key or the middle button opens a new tab, at the address the link rendered, so a router's basename comes along. Links and buttons in other cells keep priority, and a drag that selects text does not navigate. `onRowClick` is unchanged, and `getRowHref` wins if both are given. Tests in `test/DataTable-links.test.tsx`.
+- **`loading` on `StatTile` and `StatGroup`.** The value becomes a `Skeleton` on its own element, so it has that element's height at either density and nothing moves when the data comes (measured at 360px: the same group height and the same strip in both states). A known label stays visible; an unknown one is a skeleton too. `loadingCount` draws that many tiles while `items` is empty. The tiles announce nothing; the group has one `role="status"`. A tile that will have a sparkline has to say so while loading, by passing `sparkline`, or the group grows by its 36px. Tests in `test/StatTile-loading.test.tsx`.
+- **Form controls are 44px tall on `pointer: coarse`.** `Input`, `Select`, `Textarea` (one line), `SearchField`, `PasswordInput`, `DateInput`, `DateRangePicker` and `Combobox`, at `md` and `lg`; `sm` fields stay as they are. `Button` at `sm` follows, and so does `md`, which was 40px and would have sat 4px short of the field beside it, as the "Filters" button does in `FilterBar`. Ghost buttons count their padding in that height, which Themes leaves out of it. Icon-only buttons keep their shape. Nothing changes with a mouse. Tests in `test/touch-fields.test.tsx`.
+- **Fixed: choosing a row action also fired `onRowClick`.** The click reached the row by bubbling through React from the menu's portal. `getRowHref` would have inherited it and left the page.
+- **Fixed: `Sheet` and `ActionSheet` dropped focus on `<body>` when they closed.** Radix returns focus to a `Dialog.Trigger` and neither has one, so a keyboard or screen-reader user went back to the top of the page. Focus now returns to whatever opened them, which also fixes `FilterPopover`, `DateInput`, `ActionMenu` and row actions on a phone.
+- **Fixed: `StatGroup`'s scrollable region had no name.** It passed `aria-label={undefined}`, which overrode `ScrollStrip`'s default.
+- **`StatTileProps` and `StatGroupItem` are type aliases now**, because `label` and `value` are only optional on a tile that is loading, and leaving `value` out of any other tile stays a compile error. `interface X extends StatTileProps` no longer compiles; `type X = StatTileProps & { … }` does.
+
 ## 1.8.5 — 2026-11-04
 
 Icons on `Select` options.

package/README.md

@@ -239,7 +239,23 @@ const table = useClientTable(orders, columns, { sort, page, pageSize }); // or y
 - **`DataTable`** is fully controlled: it never sorts, pages or selects by itself. It responds to
   its own width. `low`-priority columns hide below 640px of table width and `medium` ones below
   480px. Below `stackBelow` (`sm` 480 / `md` 640, the default / `lg` 800 / `false`) each row
-  becomes a labelled card. `state` covers `loading`, `empty` and `error` inside the table.
+  becomes a labelled card, and a compact "Sort by" control above the cards stands in for the
+  hidden headers, with the same three states: ascending, descending, none. That is a container
+  query too; the list inside it opens as a dropdown, or a bottom sheet below 768px of viewport.
+  `state` covers `loading`, `empty` and `error` inside the table.
+- **Rows that open a page:** give `DataTable` `getRowHref`, and `renderLink` for your router. The
+  row-header cell becomes a real link, so a new tab, copying the address and the URL on hover all
+  work, and clicking the rest of the row follows that link. A modifier key or the middle button
+  anywhere on the row opens a new tab; links and buttons in other cells keep their own click.
+  `onRowClick` stays for rows that do something else, and `getRowHref` wins if both are set.
+
+  ```tsx
+  <DataTable
+    getRowHref={(order) => `/orders/${order.id}`}
+    renderLink={(p) => <RouterLink to={p.href} {...p} />}
+    {...table}
+  />
+  ```
 - **`useClientTable`** / **`sortRows`**: sorting with `Intl.Collator` (numeric, in the provider's
   `locale`, empty values last) and paging, for data already in the browser.
 - **`Pagination`**: numbered pages, or "Page 2 of 10" when narrow; range text and rows-per-page.
@@ -248,7 +264,11 @@ const table = useClientTable(orders, columns, { sort, page, pageSize }); // or y
 - **`EmptyState`**, **`ErrorState`** (`role="alert"`, retry, details) and **`LoadingState`**
   (`spinner`, `rows`, `cards`).
 - **`StatGroup`** (StatTiles in a ScrollStrip), **`KeyValueList`** (Radix `DataList`),
-  **`StatusIndicator`** (a dot and a word) and **`Pill`** (a removable token).
+  **`StatusIndicator`** (a dot and a word) and **`Pill`** (a removable token). `loading` on a
+  `StatTile` or a `StatGroup` draws the value as a skeleton at its final height, with one
+  `role="status"` for the group; `loadingCount` draws that many tiles while `items` is still empty.
+  A tile that will have a sparkline needs `sparkline` set while loading, or the group grows by its
+  36px when the data comes: pass the items with `sparkline: true`.
 - **Templates:** `ListPage`, `DetailPage` (the aside sits beside the main content from 960px and
   comes after it in the DOM) and `StatusPage` (404/500, outside the shell).
 
@@ -281,6 +301,22 @@ Full example with 500 rows: [examples/admin/Orders.tsx](examples/admin/Orders.ts
   (`noValidate`, so only your messages show).
 - **`SearchField`**: magnifier, clear button, Escape, optional `debounceMs` and a page-wide
   `shortcut` key.
+- **`Combobox`**: a selection field with search, one value or several (`multiple`, as removable
+  pills inside the field). Typing ignores case and accents, so "sao" finds "São". The list is in a
+  portal and no card's `overflow` clips it; below 768px it is a bottom sheet with the search on top
+  (`sheetBelow`, as on `DateInput`). It takes its label and error from `FormField`.
+
+  ```tsx
+  <FormField label="Markets">
+    <Combobox multiple options={countries} value={markets} onValueChange={setMarkets} />
+  </FormField>
+  ```
+
+  Options are `{ value, label, detail?, icon? }`. With `onSearch` the options are shown as given,
+  for a server search; debounce it yourself, and pass `loading` meanwhile. Arrows, Home, End, Enter
+  and Escape work the list and focus never leaves the input; Backspace on an empty field removes
+  the last pill. One value is cleared by emptying the text, or by tapping the chosen row in the
+  sheet, unless `required`. Example: [examples/Comboboxes.tsx](examples/Comboboxes.tsx).
 - **`FilterPopover`**: a "Filters (n)" button opening a popover, or a bottom sheet below `sm`.
   With `onApply` the controls are a draft. **`FilterChips`** is a ChipGroup plus clear-all.
   **`FilterBar`** lays out search, filters and actions, with active filters as removable pills.
@@ -426,6 +462,9 @@ the stack can clear a bar: `<Toaster position="top-center" offset="var(--navbar-
   `prefers-reduced-motion`. Our hover styles are inside `@media (hover: hover)`.
 - `<Button size="touch">` has a 44px minimum height. `<Button iconOnly variant="ghost">` keeps its
   visual size but gets a 44px hit area on coarse pointers.
+- On coarse pointers `Input`, `Select`, `Textarea`, `SearchField`, `PasswordInput`, `DateInput` and
+  `Combobox` are at least 44px tall, and `Button` at `sm` and `md` follows, so a field and a button
+  side by side still line up. The `sm` size of a field stays as it is. Nothing changes with a mouse.
 - `Input`, `Textarea` and `Select` render at 16px on coarse pointers so iOS does not zoom on focus.
   `inputMode` and `enterKeyHint` on `Input` / `Textarea` pass through to the native element:
   `<Input type="text" inputMode="decimal" enterKeyHint="done" />`.

package/dist/atoms/ActionSheet/ActionSheet.js

@@ -3,6 +3,7 @@ import * as AlertDialog from '@radix-ui/react-alert-dialog';
 import { Theme } from '@radix-ui/themes';
 import { minWidth } from '../../hooks/breakpoints.js';
 import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { useReturnFocus } from '../../hooks/useReturnFocus.js';
 import { useUiStrings } from '../../strings.js';
 import { cn } from '../../utils/cn.js';
 import { useThemePortalTarget } from '../../utils/themePortal.js';
@@ -23,11 +24,12 @@ export function ActionSheet({ open, onOpenChange, actions, title, message, cance
     const strings = useUiStrings();
     const mdUp = useMediaQuery(minWidth(breakpoint));
     const { anchorRef, target, resolved } = useThemePortalTarget(container);
+    const returnFocus = useReturnFocus(open);
     const cancel = cancelLabel ?? strings.cancel;
     const hasHeader = title != null || message != null;
     const header = hasHeader ? (_jsxs("div", { className: "px-4 py-3 text-center", children: [title != null ? (_jsx(AlertDialog.Title, { className: "m-0 text-sm font-medium text-ink", children: title })) : (_jsx(AlertDialog.Title, { className: "sr-only", children: cancel })), message != null ? (_jsx(AlertDialog.Description, { className: "m-0 mt-0.5 text-sm text-ink-muted", children: message })) : null] })) : null;
     const rows = actions.map((a) => (_jsxs(AlertDialog.Action, { onClick: a.onSelect, "data-tone": a.tone ?? 'neutral', className: cn('flex min-h-[var(--tap-min,44px)] w-full items-center justify-center gap-2 border-t border-hairline px-4 text-base', 'outline-none hover:bg-[var(--gray-a3)] focus-visible:bg-[var(--gray-a3)] active:bg-[var(--gray-a4)]', TONE[a.tone ?? 'neutral']), children: [a.icon ? _jsx("span", { "aria-hidden": "true", children: a.icon }) : null, a.label] }, a.label)));
     const cancelButton = (_jsx(AlertDialog.Cancel, { className: cn('flex min-h-[var(--tap-min,44px)] w-full items-center justify-center px-4 text-base font-medium text-ink', 'outline-none hover:bg-[var(--gray-a3)] focus-visible:bg-[var(--gray-a3)] active:bg-[var(--gray-a4)]'), children: cancel }));
-    const body = mdUp ? (_jsxs(AlertDialog.Content, { "data-presentation": "dialog", ...(message == null ? { 'aria-describedby': undefined } : {}), className: "ui-sheet-dialog fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-2xl bg-sheet text-ink shadow-2xl outline-none ring-1 ring-hairline", children: [header, _jsx("div", { className: cn(!hasHeader && '[&>*:first-child]:border-t-0'), children: rows }), _jsx("div", { className: "border-t border-hairline", children: cancelButton })] })) : (_jsxs(AlertDialog.Content, { "data-presentation": "sheet", ...(message == null ? { 'aria-describedby': undefined } : {}), className: "ui-sheet fixed inset-x-0 bottom-0 z-50 mx-auto flex w-full max-w-lg flex-col gap-2 px-2 pb-[max(0.5rem,var(--safe-bottom,0px))] outline-none", children: [_jsxs("div", { className: "overflow-hidden rounded-xl bg-grouped", children: [header, _jsx("div", { className: cn(!hasHeader && '[&>*:first-child]:border-t-0'), children: rows })] }), _jsx("div", { className: "overflow-hidden rounded-xl bg-grouped", children: cancelButton })] }));
+    const body = mdUp ? (_jsxs(AlertDialog.Content, { "data-presentation": "dialog", onCloseAutoFocus: returnFocus, ...(message == null ? { 'aria-describedby': undefined } : {}), className: "ui-sheet-dialog fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-2xl bg-sheet text-ink shadow-2xl outline-none ring-1 ring-hairline", children: [header, _jsx("div", { className: cn(!hasHeader && '[&>*:first-child]:border-t-0'), children: rows }), _jsx("div", { className: "border-t border-hairline", children: cancelButton })] })) : (_jsxs(AlertDialog.Content, { "data-presentation": "sheet", onCloseAutoFocus: returnFocus, ...(message == null ? { 'aria-describedby': undefined } : {}), className: "ui-sheet fixed inset-x-0 bottom-0 z-50 mx-auto flex w-full max-w-lg flex-col gap-2 px-2 pb-[max(0.5rem,var(--safe-bottom,0px))] outline-none", children: [_jsxs("div", { className: "overflow-hidden rounded-xl bg-grouped", children: [header, _jsx("div", { className: cn(!hasHeader && '[&>*:first-child]:border-t-0'), children: rows })] }), _jsx("div", { className: "overflow-hidden rounded-xl bg-grouped", children: cancelButton })] }));
     return (_jsxs(_Fragment, { children: [_jsx("span", { ref: anchorRef, hidden: true }), resolved ? (_jsx(AlertDialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsx(AlertDialog.Portal, { container: target ?? undefined, children: _jsxs(Theme, { hasBackground: false, children: [_jsx(AlertDialog.Overlay, { className: "ui-sheet-scrim fixed inset-0 z-40 bg-scrim" }), body] }) }) })) : null] }));
 }

package/dist/atoms/Input/Input.js

@@ -6,7 +6,8 @@ import { cn } from '../../utils/cn.js';
  * `inputMode` and `enterKeyHint` pass straight through to the `<input>` (they are native
  * attributes), and are worth setting on mobile: `inputMode="numeric"` / `"decimal"` / `"tel"` /
  * `"email"` pick the keyboard, `enterKeyHint="next" | "search" | "send" | "done"` labels the
- * return key. On coarse pointers the text is never below 16px, or iOS zooms the page on focus.
+ * return key. On coarse pointers the text is never below 16px, or iOS zooms the page on focus,
+ * and every size but `sm` is at least 44px tall.
  */
 const SIZES = { sm: '1', md: '2', lg: '3' };
 export const Input = forwardRef(function Input({ size = 'md', invalid = false, className, ...props }, ref) {

package/dist/atoms/Sheet/Sheet.d.ts

@@ -52,9 +52,9 @@ export interface SheetProps {
 /**
  * A native-feeling bottom sheet on Radix Dialog.
  *
- * Radix owns what must not be reimplemented: the focus trap and its return on close, Escape,
- * the scrim, `aria-modal`, and the page behind being hidden from assistive technology. This adds
- * the sheet: a drag handle, detents, velocity-based dismissal, a body that scrolls until it is at
+ * Radix owns what must not be reimplemented: the focus trap, Escape, the scrim, `aria-modal`, and
+ * the page behind being hidden from assistive technology. Focus returns to whatever opened the
+ * sheet, which Radix only does for a `Dialog.Trigger` and this has none. This adds the sheet: a drag handle, detents, velocity-based dismissal, a body that scrolls until it is at
  * its top and only then hands the gesture to the sheet, a footer that stays above the safe area
  * and the keyboard, and an optional iOS-style scaled page behind the `large` detent.
  *

package/dist/atoms/Sheet/Sheet.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { Theme } from '@radix-ui/themes';
 import { useCallback, useEffect, useRef, useState, } from 'react';
+import { useReturnFocus } from '../../hooks/useReturnFocus.js';
 import { useUiStrings } from '../../strings.js';
 import { cn } from '../../utils/cn.js';
 import { useThemePortalTarget } from '../../utils/themePortal.js';
@@ -60,9 +61,9 @@ function useVisibleViewport(active, contentRef) {
 /**
  * A native-feeling bottom sheet on Radix Dialog.
  *
- * Radix owns what must not be reimplemented: the focus trap and its return on close, Escape,
- * the scrim, `aria-modal`, and the page behind being hidden from assistive technology. This adds
- * the sheet: a drag handle, detents, velocity-based dismissal, a body that scrolls until it is at
+ * Radix owns what must not be reimplemented: the focus trap, Escape, the scrim, `aria-modal`, and
+ * the page behind being hidden from assistive technology. Focus returns to whatever opened the
+ * sheet, which Radix only does for a `Dialog.Trigger` and this has none. This adds the sheet: a drag handle, detents, velocity-based dismissal, a body that scrolls until it is at
  * its top and only then hands the gesture to the sheet, a footer that stays above the safe area
  * and the keyboard, and an optional iOS-style scaled page behind the `large` detent.
  *
@@ -80,6 +81,7 @@ export function Sheet({ open, onOpenChange, title, description, children, footer
     const rootRef = useRef(null);
     const { anchorRef, target, resolved } = useThemePortalTarget(container);
     const vv = useVisibleViewport(open, contentRef);
+    const returnFocus = useReturnFocus(open);
     const ladder = [...new Set([...(detents ?? []), detent])].sort((a, b) => RANK[a] - RANK[b]);
     const index = ladder.indexOf(detent);
     const higher = ladder[index + 1];
@@ -245,7 +247,7 @@ export function Sheet({ open, onOpenChange, title, description, children, footer
         : (e) => {
             e.preventDefault();
         };
-    const content = (_jsxs("div", { ref: rootRef, "data-sheet-root": "", className: "contents", children: [_jsx(RadixDialog.Overlay, { "data-testid": "sheet-scrim", className: "ui-sheet-scrim fixed inset-0 z-40 bg-scrim" }), _jsxs(RadixDialog.Content, { ref: contentRef, "data-detent": detent, "data-dragging": dragging ? '' : undefined, ...(description ? {} : { 'aria-describedby': undefined }), onEscapeKeyDown: dismissGuard, onPointerDownOutside: dismissGuard, onInteractOutside: dismissGuard, 
+    const content = (_jsxs("div", { ref: rootRef, "data-sheet-root": "", className: "contents", children: [_jsx(RadixDialog.Overlay, { "data-testid": "sheet-scrim", className: "ui-sheet-scrim fixed inset-0 z-40 bg-scrim" }), _jsxs(RadixDialog.Content, { ref: contentRef, "data-detent": detent, "data-dragging": dragging ? '' : undefined, ...(description ? {} : { 'aria-describedby': undefined }), onEscapeKeyDown: dismissGuard, onPointerDownOutside: dismissGuard, onInteractOutside: dismissGuard, onCloseAutoFocus: returnFocus, 
                 // The sheet moves focus to its first control; for a sheet that is the handle or close
                 // button, which is correct, so Radix's default is kept.
                 style: style, className: cn('ui-sheet fixed inset-x-0 bottom-0 z-50 mx-auto flex w-full flex-col overflow-hidden', 'rounded-t-2xl bg-sheet text-ink shadow-2xl outline-none', maxWidthClassName, className), children: [_jsxs("div", { className: "touch-none select-none px-5 pt-2", onPointerDown: (e) => begin(e, false), ...dragHandlers, children: [cycles ? (_jsx("button", { type: "button", "aria-label": raising ? (expandLabel ?? strings.expand) : (collapseLabel ?? strings.collapse), onClick: onHandleClick, className: "mx-auto flex h-6 w-16 cursor-grab items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-brand-700 active:cursor-grabbing", children: _jsx("span", { "aria-hidden": "true", className: "h-1.5 w-10 rounded-full bg-hairline" }) })) : (_jsx("div", { "aria-hidden": "true", className: "mx-auto flex h-6 w-16 items-center justify-center", children: _jsx("span", { className: "h-1.5 w-10 rounded-full bg-hairline" }) })), _jsxs("div", { className: "flex items-start gap-3 pb-3 pt-1", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(RadixDialog.Title, { className: "m-0 text-base font-medium text-brand-900", children: title }), description ? (_jsx(RadixDialog.Description, { className: "m-0 mt-1 text-sm text-ink-muted", children: description })) : null] }), showCloseButton && dismissible ? (_jsx(RadixDialog.Close, { "aria-label": closeLabel ?? strings.close, className: "-mr-1 flex size-8 shrink-0 items-center justify-center rounded-full text-ink-muted hover:bg-brand-700/8 focus-visible:outline-2 focus-visible:outline-brand-700", children: _jsx("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M3.5 3.5l8 8m0-8l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })) : null] })] }), _jsx("div", { ref: bodyRef, "data-sheet-body": "", className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 pb-4", onPointerDown: (e) => begin(e, true), ...dragHandlers, children: children }), footer ? (_jsx("div", { "data-sheet-footer": "", className: "flex shrink-0 justify-end gap-2 border-t border-hairline px-5 pt-3", 

package/dist/atoms/StatTile/StatTile.d.ts

@@ -12,10 +12,7 @@ export interface StatDelta {
     /** Spoken context for the change, e.g. "versus last month". Visually hidden. */
     label?: string;
 }
-export interface StatTileProps {
-    label: ReactNode;
-    /** Already formatted; rendered with tabular numerals so a row of tiles lines up. */
-    value: ReactNode;
+interface StatTileOptions {
     delta?: StatDelta;
     /** A small chart, rendered under the value in a fixed-height slot. */
     sparkline?: ReactNode;
@@ -28,9 +25,26 @@ export interface StatTileProps {
     density?: Responsive<CardDensity>;
     className?: string;
 }
+/** `label` and `value` may only be missing from a tile that says it is loading. */
+export type StatTileProps = StatTileOptions & ({
+    label: ReactNode;
+    /** Already formatted; rendered with tabular numerals so a row of tiles lines up. */
+    value: ReactNode;
+    loading?: false;
+} | {
+    /** Shown while loading if already known, otherwise a skeleton of its height. */
+    label?: ReactNode;
+    value?: ReactNode;
+    /**
+     * Draws the value as a skeleton at its final height, so nothing moves when it arrives.
+     * Silent on its own: `StatGroup` announces once for the group.
+     */
+    loading: boolean;
+});
 /**
  * A compact KPI tile: label, value, optional delta and sparkline. Built on `Card`, so `variant`
  * and `density` mean what they mean there. With `href` or `onClick` the whole tile is the target
  * and a chevron says so.
  */
-export declare function StatTile({ label, value, delta, sparkline, href, linkProps, onClick, variant, density, className, }: StatTileProps): import("react").JSX.Element;
+export declare function StatTile({ label, value, delta, sparkline, href, linkProps, onClick, variant, density, loading, className, }: StatTileProps): import("react").JSX.Element;
+export {};

package/dist/atoms/StatTile/StatTile.js

@@ -2,16 +2,22 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ArrowDownIcon, ArrowUpIcon, ChevronRightIcon } from '@radix-ui/react-icons';
 import { cn } from '../../utils/cn.js';
 import { Card } from '../Card/index.js';
+import { Skeleton } from '../Skeleton/Skeleton.js';
 const ARROWS = { up: ArrowUpIcon, down: ArrowDownIcon };
+/** The real element under a skeleton: same class, same line box, so the same height. */
+function Placeholder({ className }) {
+    return (_jsx(Skeleton, { children: _jsx("span", { className: className, children: '\u00A0' }) }));
+}
 /**
  * A compact KPI tile: label, value, optional delta and sparkline. Built on `Card`, so `variant`
  * and `density` mean what they mean there. With `href` or `onClick` the whole tile is the target
  * and a chevron says so.
  */
-export function StatTile({ label, value, delta, sparkline, href, linkProps, onClick, variant, density, className, }) {
+export function StatTile({ label, value, delta, sparkline, href, linkProps, onClick, variant, density, loading = false, className, }) {
     const interactive = href !== undefined || onClick !== undefined;
     const direction = delta?.direction ?? 'flat';
     const Arrow = direction === 'flat' ? null : ARROWS[direction];
-    const body = (_jsxs(_Fragment, { children: [_jsx("span", { className: "ui-stat-label", children: label }), _jsxs("span", { className: "ui-stat-row", children: [_jsx("span", { className: "ui-stat-value", children: value }), delta && (_jsxs("span", { className: "ui-stat-delta", "data-tone": delta.tone ?? 'neutral', children: [Arrow && _jsx(Arrow, { "aria-hidden": true }), delta.value, delta.label && _jsxs("span", { className: "sr-only", children: [" ", delta.label] })] }))] }), sparkline && (_jsx("span", { className: "ui-stat-spark", "aria-hidden": true, children: sparkline })), interactive && _jsx(ChevronRightIcon, { className: "ui-stat-chevron", "aria-hidden": true })] }));
+    const body = (_jsxs(_Fragment, { children: [loading && label == null ? (_jsx(Placeholder, { className: "ui-stat-label" })) : (_jsx("span", { className: "ui-stat-label", children: label })), _jsxs("span", { className: "ui-stat-row", children: [loading ? (_jsx(Placeholder, { className: "ui-stat-value" })) : (_jsx("span", { className: "ui-stat-value", children: value })), delta && !loading && (_jsxs("span", { className: "ui-stat-delta", "data-tone": delta.tone ?? 'neutral', children: [Arrow && _jsx(Arrow, { "aria-hidden": true }), delta.value, delta.label && _jsxs("span", { className: "sr-only", children: [" ", delta.label] })] }))] }), sparkline &&
+                (loading ? (_jsx(Placeholder, { className: "ui-stat-spark" })) : (_jsx("span", { className: "ui-stat-spark", "aria-hidden": true, children: sparkline }))), interactive && _jsx(ChevronRightIcon, { className: "ui-stat-chevron", "aria-hidden": true })] }));
     return (_jsx(Card, { variant: variant, density: density, className: cn('ui-stat-card', className), children: href !== undefined ? (_jsx("a", { ...linkProps, href: href, className: "ui-stat", "data-interactive": true, onClick: onClick, children: body })) : onClick ? (_jsx("button", { type: "button", className: "ui-stat", "data-interactive": true, onClick: onClick, children: body })) : (_jsx("div", { className: "ui-stat", children: body })) }));
 }

package/dist/atoms/TextLink/TextLink.d.ts

@@ -3,8 +3,8 @@ import type { AnchorHTMLAttributes, MouseEventHandler, ReactElement, ReactNode }
  * What a `render` function receives to build a router link. Spread it onto the element you
  * return, e.g. `render={(p) => <RouterLink to={p.href} {...p} />}`.
  *
- * Every component in this library that navigates (TextLink, NavItem, Breadcrumbs, PageTabs)
- * takes the same `render`, so the library never imports a router.
+ * Every component in this library that navigates (TextLink, NavItem, Breadcrumbs, PageTabs,
+ * and DataTable as `renderLink`) takes the same function, so the library never imports a router.
  */
 export interface LinkRenderProps {
     href: string;

package/dist/atoms/Textarea/Textarea.d.ts

@@ -2,7 +2,7 @@ import { TextArea } from '@radix-ui/themes';
 import { type ComponentPropsWithoutRef } from 'react';
 /**
  * `inputMode` and `enterKeyHint` pass through to the `<textarea>`. On coarse pointers the text is
- * never below 16px, or iOS zooms the page on focus.
+ * never below 16px, or iOS zooms the page on focus, and `rows={1}` is at least 44px tall.
  */
 export interface TextareaProps extends Omit<ComponentPropsWithoutRef<typeof TextArea>, 'size' | 'color'> {
     invalid?: boolean;

package/dist/hooks/useReturnFocus.d.ts

@@ -0,0 +1,10 @@
+/**
+ * An `onCloseAutoFocus` that puts focus back on whatever had it when `open` went true.
+ *
+ * Radix hands focus back to a `Dialog.Trigger` and to nothing else, so a dialog opened by state
+ * leaves focus on `<body>`, which for a keyboard or screen-reader user is the top of the page.
+ *
+ * It reads the element during render because that is the last moment it is still the opener:
+ * content mounting in the same commit can take focus before any effect here would run.
+ */
+export declare function useReturnFocus(open: boolean): (event: Event) => void;

package/dist/hooks/useReturnFocus.js

@@ -0,0 +1,22 @@
+import { useCallback, useRef } from 'react';
+/**
+ * An `onCloseAutoFocus` that puts focus back on whatever had it when `open` went true.
+ *
+ * Radix hands focus back to a `Dialog.Trigger` and to nothing else, so a dialog opened by state
+ * leaves focus on `<body>`, which for a keyboard or screen-reader user is the top of the page.
+ *
+ * It reads the element during render because that is the last moment it is still the opener:
+ * content mounting in the same commit can take focus before any effect here would run.
+ */
+export function useReturnFocus(open) {
+    const opener = useRef(null);
+    const wasOpen = useRef(false);
+    if (open && !wasOpen.current && typeof document !== 'undefined') {
+        opener.current = document.activeElement;
+    }
+    wasOpen.current = open;
+    return useCallback((event) => {
+        event.preventDefault();
+        opener.current?.focus();
+    }, []);
+}

package/dist/molecules/Combobox/Combobox.d.ts

@@ -0,0 +1,72 @@
+import { type ReactNode } from 'react';
+import { type InputSize } from '../../atoms/Input/Input.js';
+import { type Breakpoint } from '../../hooks/breakpoints.js';
+export interface ComboboxOption {
+    value: string;
+    /** The option's text, its accessible name, and what typing is matched against. */
+    label: string;
+    /** Secondary text, shown muted beside the label. */
+    detail?: ReactNode;
+    /**
+     * Drawn before the label, in the list and once chosen. Decorative: it is hidden from assistive
+     * tech, so `label` alone names the option.
+     */
+    icon?: ReactNode;
+}
+interface ComboboxOptions {
+    options: ComboboxOption[];
+    /** Shown while nothing is chosen, and the sheet's title. Default: the `select` UI string. */
+    placeholder?: string;
+    /** Shown when nothing matches. Default: the `noResults` UI string. */
+    emptyText?: ReactNode;
+    /** A spinner in the field, and the `loading` UI string in place of an empty list. */
+    loading?: boolean;
+    /**
+     * For a server search: called as the text changes, and `options` are shown as given rather
+     * than filtered here, since the server may match on more than the label. Called with `''` when
+     * a search ends without a choice, so the next opening does not show its leftovers.
+     */
+    onSearch?: (query: string) => void;
+    invalid?: boolean;
+    /** Below this the list is a bottom Sheet with the search on top. Default `sm` (768px). */
+    sheetBelow?: Breakpoint | false;
+    size?: InputSize;
+    disabled?: boolean;
+    required?: boolean;
+    id?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+}
+export interface ComboboxSingleProps extends ComboboxOptions {
+    multiple?: false;
+    /** `null` is nothing chosen. Leaving it out makes the component hold its own value. */
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+}
+export interface ComboboxMultipleProps extends ComboboxOptions {
+    /** Chosen items become removable pills, and the list stays open between choices. */
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+}
+export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
+/**
+ * A selection field with search: one value or several, from a list long enough that scanning it
+ * is the problem. The ARIA combobox pattern, with focus staying on the input and the active option
+ * reported through `aria-activedescendant`.
+ *
+ * The list is in a portal, so a card's `overflow` cannot clip it, and floats under the field. Below
+ * `sheetBelow` the field is a button that opens a bottom sheet with the search on top, because a
+ * list floating over the keyboard on a phone leaves no room for the list. Works inside `FormField`,
+ * which names it.
+ *
+ * With one value, emptying the text and leaving clears the choice, as does tapping the chosen row
+ * in the sheet. A `required` field keeps its value in both cases.
+ */
+export declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/molecules/Combobox/Combobox.js

@@ -0,0 +1,260 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { TextField, Popover as ThemedPopover, Spinner as ThemedSpinner } from '@radix-ui/themes';
+import { forwardRef, useCallback, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { Input } from '../../atoms/Input/Input.js';
+import { Pill } from '../../atoms/Pill/Pill.js';
+import { Sheet } from '../../atoms/Sheet/Sheet.js';
+import { minWidth } from '../../hooks/breakpoints.js';
+import { useControllableState } from '../../hooks/useControllableState.js';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { useUiStrings } from '../../strings.js';
+import { cn } from '../../utils/cn.js';
+const SIZES = { sm: '1', md: '2', lg: '3' };
+/** Case and accents fold away, so "sao" finds "São". */
+function folded(text) {
+    return text.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase();
+}
+function asList(value) {
+    if (value === null || value === undefined)
+        return [];
+    return typeof value === 'string' ? [value] : [...value];
+}
+/**
+ * A selection field with search: one value or several, from a list long enough that scanning it
+ * is the problem. The ARIA combobox pattern, with focus staying on the input and the active option
+ * reported through `aria-activedescendant`.
+ *
+ * The list is in a portal, so a card's `overflow` cannot clip it, and floats under the field. Below
+ * `sheetBelow` the field is a button that opens a bottom sheet with the search on top, because a
+ * list floating over the keyboard on a phone leaves no room for the list. Works inside `FormField`,
+ * which names it.
+ *
+ * With one value, emptying the text and leaving clears the choice, as does tapping the chosen row
+ * in the sheet. A `required` field keeps its value in both cases.
+ */
+export const Combobox = forwardRef(function Combobox(props, ref) {
+    const { options, multiple = false, placeholder, emptyText, loading = false, onSearch, invalid, sheetBelow = 'sm', size = 'md', disabled = false, required, id, 'aria-describedby': describedBy, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': labelledBy, className, } = props;
+    const strings = useUiStrings();
+    const wide = useMediaQuery(minWidth(sheetBelow || 'xs'));
+    const sheet = sheetBelow !== false && !wide;
+    const isInvalid = invalid || ariaInvalid === true || ariaInvalid === 'true';
+    const autoId = useId();
+    const listId = `${id ?? autoId}-listbox`;
+    const optionId = (index) => `${listId}-${index}`;
+    const placeholderText = placeholder ?? strings.select;
+    const fieldRef = useRef(null);
+    const inputRef = useRef(null);
+    const triggerRef = useRef(null);
+    useImperativeHandle(ref, () => (sheet ? triggerRef.current : inputRef.current), [
+        sheet,
+    ]);
+    const [selected, setSelected] = useControllableState({
+        value: props.value === undefined ? undefined : asList(props.value),
+        defaultValue: asList(props.defaultValue),
+        onChange: (next) => {
+            if (props.multiple)
+                props.onValueChange?.(next);
+            else
+                props.onValueChange?.(next[0] ?? null);
+        },
+    });
+    // A server search replaces `options`, and a chosen item must not lose its label when it does.
+    const seen = useRef(new Map());
+    for (const option of options)
+        seen.current.set(option.value, option);
+    const optionFor = (value) => seen.current.get(value) ?? { value, label: value };
+    /** With one value, what the field shows while nothing is being typed. */
+    const chosen = !multiple && selected.length > 0 ? optionFor(selected[0]) : undefined;
+    const [open, setOpen] = useState(false);
+    /** `null` until something is typed: the field shows the choice and the list is unfiltered. */
+    const [query, setQuery] = useState(null);
+    const [active, setActive] = useState(0);
+    const [announcement, setAnnouncement] = useState('');
+    const needle = folded(query ?? '');
+    const shown = useMemo(() => (onSearch || !needle ? options : options.filter((o) => folded(o.label).includes(needle))), [options, needle, onSearch]);
+    // Hovering must not scroll the list under the pointer, so only the keyboard asks for this.
+    const reveal = useRef(false);
+    const revealActive = useCallback((el) => {
+        if (!el || !reveal.current)
+            return;
+        reveal.current = false;
+        el.scrollIntoView?.({ block: 'nearest' });
+    }, []);
+    const moveTo = (index) => {
+        reveal.current = true;
+        setActive(index);
+    };
+    const openList = (at) => {
+        if (disabled)
+            return;
+        const current = multiple ? -1 : shown.findIndex((o) => o.value === selected[0]);
+        moveTo(at ?? Math.max(current, 0));
+        setOpen(true);
+    };
+    const endSearch = () => {
+        if (query)
+            onSearch?.('');
+        setQuery(null);
+    };
+    const close = ({ clearIfEmptied = false } = {}) => {
+        setOpen(false);
+        if (clearIfEmptied && !multiple && !required && query === '' && selected.length > 0) {
+            setSelected([]);
+        }
+        endSearch();
+    };
+    const pick = (option) => {
+        const already = selected.includes(option.value);
+        if (multiple) {
+            if (query)
+                setActive(0);
+            setSelected(already ? selected.filter((v) => v !== option.value) : [...selected, option.value]);
+        }
+        else {
+            setOpen(false);
+            if (!already)
+                setSelected([option.value]);
+            else if (sheet && !required)
+                setSelected([]);
+        }
+        endSearch();
+    };
+    const remove = (value) => {
+        const next = selected.filter((v) => v !== value);
+        setSelected(next);
+        setAnnouncement(strings.selectedCount(next.length));
+        // The button that was just used is about to go, and focus must not go with it.
+        if (!open)
+            (sheet ? triggerRef : inputRef).current?.focus();
+    };
+    const handleChange = (event) => {
+        const text = event.target.value;
+        // After a pick the caret sits behind the label, and what comes next is a new search.
+        const shownLabel = query === null ? chosen?.label : undefined;
+        const next = shownLabel && text.startsWith(shownLabel) ? text.slice(shownLabel.length) : text;
+        setQuery(next);
+        moveTo(0);
+        setOpen(true);
+        onSearch?.(next);
+    };
+    const handleKeyDown = (event) => {
+        const last = shown.length - 1;
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                event.preventDefault();
+                const down = event.key === 'ArrowDown';
+                if (!open)
+                    openList(down ? undefined : last);
+                else if (shown.length > 0)
+                    moveTo((active + (down ? 1 : -1) + shown.length) % shown.length);
+                break;
+            }
+            case 'Home':
+            case 'End':
+                if (!open || last < 0 || event.shiftKey)
+                    return;
+                event.preventDefault();
+                moveTo(event.key === 'Home' ? 0 : last);
+                break;
+            case 'Enter':
+                // Closed, it belongs to the form.
+                if (!open)
+                    return;
+                event.preventDefault();
+                if (shown[active])
+                    pick(shown[active]);
+                break;
+            case 'Escape':
+                // The sheet is a dialog and already answers Escape itself.
+                if (!open || sheet)
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                close();
+                break;
+            case 'Backspace':
+                if (multiple && !event.currentTarget.value && selected.length > 0) {
+                    remove(selected[selected.length - 1]);
+                }
+                break;
+            default:
+        }
+    };
+    const handleFieldMouseDown = (event) => {
+        // Keeps focus in the input while a pill or the chevron is pressed.
+        if (!sheet && event.target !== inputRef.current)
+            event.preventDefault();
+    };
+    const handleFieldClick = (event) => {
+        if (disabled)
+            return;
+        const target = event.target;
+        const button = target.closest('button');
+        if (button && button !== triggerRef.current)
+            return;
+        if (sheet) {
+            // Safari does not focus a tapped button, and the sheet returns focus to what had it.
+            triggerRef.current?.focus();
+        }
+        else {
+            inputRef.current?.focus();
+            if (open && target.closest('[data-side="right"]')) {
+                close();
+                return;
+            }
+            if (!open)
+                inputRef.current?.select();
+        }
+        if (!open)
+            openList();
+    };
+    const comboboxProps = {
+        role: 'combobox',
+        'aria-autocomplete': 'list',
+        'aria-haspopup': 'listbox',
+        'aria-expanded': open,
+        'aria-controls': open ? listId : undefined,
+        'aria-activedescendant': open && shown[active] ? optionId(active) : undefined,
+        autoComplete: 'off',
+        autoCorrect: 'off',
+        spellCheck: false,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+    };
+    const field = (_jsxs("div", { ref: fieldRef, "data-accent-color": isInvalid ? 'red' : undefined, className: `rt-TextFieldRoot rt-r-size-${SIZES[size]} rt-variant-surface ui-input ui-combobox__field`, onMouseDown: handleFieldMouseDown, onClick: handleFieldClick, children: [_jsxs("div", { className: "ui-combobox__values", "data-pills": multiple && selected.length > 0 ? '' : null, children: [multiple
+                        ? selected.map((value) => {
+                            const option = optionFor(value);
+                            return (_jsx(Pill, { removeLabel: strings.remove(option.label), onRemove: disabled ? undefined : () => remove(value), children: _jsxs("span", { className: "ui-combobox__pill", children: [option.icon == null ? null : _jsx("span", { "aria-hidden": "true", children: option.icon }), option.label] }) }, value));
+                        })
+                        : null, chosen?.icon == null ? null : (_jsx("span", { "aria-hidden": "true", className: "ui-combobox__icon", children: chosen.icon })), sheet ? (_jsx("button", { ref: triggerRef, type: "button", role: "combobox", id: id, disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? listId : undefined, "aria-required": required || undefined, "aria-invalid": isInvalid || undefined, "aria-describedby": describedBy, "aria-label": ariaLabel, "aria-labelledby": labelledBy, className: "ui-combobox__trigger", "data-empty": selected.length === 0 ? '' : undefined, onKeyDown: (event) => {
+                            if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
+                                return;
+                            event.preventDefault();
+                            event.currentTarget.click();
+                        }, children: multiple && selected.length > 0 ? (_jsx("span", { className: "ui-sr-only", children: strings.selectedCount(selected.length) })) : ((chosen?.label ?? placeholderText)) })) : (_jsx("input", { ...comboboxProps, ref: inputRef, id: id, className: "rt-reset rt-TextFieldInput", value: query ?? chosen?.label ?? '', placeholder: selected.length > 0 ? undefined : placeholderText, disabled: disabled, "aria-required": required || undefined, "aria-invalid": isInvalid || undefined, "aria-describedby": describedBy, "aria-label": ariaLabel, "aria-labelledby": labelledBy, onBlur: () => {
+                            if (open)
+                                close({ clearIfEmptied: true });
+                        } }))] }), _jsx(TextField.Slot, { side: "right", className: "ui-combobox__end", children: loading ? _jsx(ThemedSpinner, { size: "1" }) : _jsx(ChevronDownIcon, { "aria-hidden": "true" }) })] }));
+    const list = (_jsxs(_Fragment, { children: [_jsx("div", { id: listId, role: "listbox", tabIndex: -1, "aria-label": strings.suggestions, "aria-multiselectable": multiple || undefined, "aria-busy": loading || undefined, className: "ui-combobox__list", "data-presentation": sheet ? 'sheet' : 'popover', children: shown.map((option, index) => (_jsxs("div", { ref: index === active ? revealActive : undefined, id: optionId(index), role: "option", tabIndex: -1, "aria-selected": selected.includes(option.value), "data-active": index === active ? '' : undefined, className: "ui-combobox__option", onMouseMove: () => setActive(index), onClick: () => pick(option), children: [option.icon == null ? null : (_jsx("span", { "aria-hidden": "true", className: "ui-combobox__option-icon", children: option.icon })), _jsx("span", { className: "ui-combobox__option-label", children: option.label }), ' ', option.detail == null ? null : (_jsx("span", { className: "ui-combobox__option-detail", children: option.detail })), _jsx(CheckIcon, { "aria-hidden": "true", className: "ui-combobox__option-check" })] }, option.value))) }), shown.length === 0 ? (_jsx("div", { role: "status", className: "ui-combobox__message", children: loading ? strings.loading : (emptyText ?? strings.noResults) })) : null] }));
+    return (_jsxs("div", { className: cn('ui-combobox', className), children: [sheet ? (_jsxs(_Fragment, { children: [field, _jsxs(Sheet, { open: open, onOpenChange: (next) => {
+                            if (!next)
+                                close();
+                        }, title: ariaLabel ?? placeholderText, defaultDetent: "large", showCloseButton: true, children: [_jsx("div", { className: "ui-combobox__search", children: _jsx(Input, { ...comboboxProps, 
+                                    // The sheet exists to be typed into, and Radix leaves focus alone when it finds
+                                    // some already inside.
+                                    autoFocus: true, value: query ?? '', placeholder: strings.search, "aria-label": strings.search, enterKeyHint: "search", children: _jsx(TextField.Slot, { children: _jsx(MagnifyingGlassIcon, { "aria-hidden": "true" }) }) }) }), list] })] })) : (_jsxs(ThemedPopover.Root, { open: open, onOpenChange: (next) => {
+                    if (!next)
+                        close({ clearIfEmptied: true });
+                }, children: [_jsx(ThemedPopover.Anchor, { virtualRef: fieldRef }), field, _jsx(ThemedPopover.Content
+                    // Not a dialog: focus stays on the input, and what the popup holds is the listbox.
+                    , { 
+                        // Not a dialog: focus stays on the input, and what the popup holds is the listbox.
+                        role: "presentation", sideOffset: 4, collisionPadding: 8, className: "ui-combobox__popup", onOpenAutoFocus: (event) => event.preventDefault(), onCloseAutoFocus: (event) => event.preventDefault(), 
+                        // Escape belongs to the input, which also stops it reaching an enclosing dialog.
+                        onEscapeKeyDown: (event) => event.preventDefault(), onInteractOutside: (event) => {
+                            if (fieldRef.current?.contains(event.target))
+                                event.preventDefault();
+                        }, onMouseDown: (event) => event.preventDefault(), children: list })] })), multiple ? (_jsx("span", { role: "status", className: "ui-sr-only", children: announcement })) : null] }));
+});

package/dist/molecules/Combobox/index.d.ts

@@ -0,0 +1 @@
+export * from './Combobox.js';

package/dist/molecules/Combobox/index.js

@@ -0,0 +1 @@
+export * from './Combobox.js';

package/dist/molecules/StatGroup/StatGroup.d.ts

@@ -1,11 +1,18 @@
 import { type ScrollStripBreakpoint } from '../../atoms/ScrollStrip/ScrollStrip.js';
 import { type StatTileProps } from '../../atoms/StatTile/StatTile.js';
-export interface StatGroupItem extends StatTileProps {
+export type StatGroupItem = StatTileProps & {
     /** React key. Defaults to the label when it is a string, else the index. */
     id?: string;
-}
+};
 export interface StatGroupProps {
     items: StatGroupItem[];
+    /** Every tile shows a skeleton in place of its value, and the group says so once. */
+    loading?: boolean;
+    /**
+     * How many tiles to draw while `loading` and `items` is still empty. They hold a label and a
+     * value; a sparkline needs the item, because nothing else says the tile will have one.
+     */
+    loadingCount?: number;
     /** Grid columns from `gridFrom`. Default: the number of items, at most 4. */
     columns?: number;
     /** Below this the tiles scroll sideways; from it they are a grid. Default `md`. */
@@ -17,5 +24,8 @@ export interface StatGroupProps {
 /**
  * A row of KPI tiles: a swipeable strip on a phone, a grid from `gridFrom`. A `ScrollStrip` of
  * `StatTile`s, so both keep their own behaviour and accessibility.
+ *
+ * While `loading` it is the same strip with the same tiles, so nothing moves when the data comes.
+ * The tiles say nothing; the group's one `role="status"` does.
  */
-export declare function StatGroup({ items, columns, gridFrom, 'aria-label': ariaLabel, className, }: StatGroupProps): import("react").JSX.Element;
+export declare function StatGroup({ items, loading, loadingCount, columns, gridFrom, 'aria-label': ariaLabel, className, }: StatGroupProps): import("react").JSX.Element;

package/dist/molecules/StatGroup/StatGroup.js

@@ -1,10 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ScrollStrip } from '../../atoms/ScrollStrip/ScrollStrip.js';
 import { StatTile } from '../../atoms/StatTile/StatTile.js';
+import { useUiStrings } from '../../strings.js';
 /**
  * A row of KPI tiles: a swipeable strip on a phone, a grid from `gridFrom`. A `ScrollStrip` of
  * `StatTile`s, so both keep their own behaviour and accessibility.
+ *
+ * While `loading` it is the same strip with the same tiles, so nothing moves when the data comes.
+ * The tiles say nothing; the group's one `role="status"` does.
  */
-export function StatGroup({ items, columns, gridFrom = 'md', 'aria-label': ariaLabel, className, }) {
-    return (_jsx(ScrollStrip, { gridFrom: gridFrom, columns: columns ?? Math.min(items.length, 4), "aria-label": ariaLabel, className: className, children: items.map(({ id, ...tile }, i) => (_jsx(StatTile, { ...tile }, id ?? (typeof tile.label === 'string' ? tile.label : `stat-${i}`)))) }));
+export function StatGroup({ items, loading, loadingCount = 0, columns, gridFrom = 'md', 'aria-label': ariaLabel, className, }) {
+    const strings = useUiStrings();
+    const placeholders = loading && items.length === 0 ? loadingCount : 0;
+    return (_jsxs(_Fragment, { children: [_jsxs(ScrollStrip, { gridFrom: gridFrom, columns: columns ?? Math.min(items.length + placeholders, 4), "aria-label": ariaLabel ?? strings.scrollableRegion, "aria-busy": loading || undefined, className: className, children: [items.map(({ id, ...tile }, i) => (_jsx(StatTile, { ...tile, loading: loading || tile.loading === true }, id ?? (typeof tile.label === 'string' ? tile.label : `stat-${i}`)))), Array.from({ length: placeholders }, (_, i) => `loading-${i}`).map((key) => (_jsx(StatTile, { loading: true }, key)))] }), loading === undefined ? null : (_jsx("span", { role: "status", className: "ui-sr-only", children: loading ? strings.loading : null }))] }));
 }

package/dist/molecules/index.d.ts

@@ -1,6 +1,7 @@
 export * from './AccentPicker/index.js';
 export * from './Breadcrumbs/index.js';
 export * from './Calendar/index.js';
+export * from './Combobox/index.js';
 export * from './DateInput/index.js';
 export * from './EmptyState/index.js';
 export * from './ErrorState/index.js';

package/dist/molecules/index.js

@@ -1,6 +1,7 @@
 export * from './AccentPicker/index.js';
 export * from './Breadcrumbs/index.js';
 export * from './Calendar/index.js';
+export * from './Combobox/index.js';
 export * from './DateInput/index.js';
 export * from './EmptyState/index.js';
 export * from './ErrorState/index.js';

package/dist/organisms/DataTable/DataTable.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { type ActionMenuItem } from '../../atoms/ActionMenu/ActionMenu.js';
+import type { RenderLink } from '../../atoms/TextLink/TextLink.js';
 import { type PaginationProps } from '../../molecules/Pagination/Pagination.js';
 import type { DataTableColumn, SortState } from './types.js';
 export type DataTableState = 'ready' | 'loading' | 'empty' | 'error';
@@ -28,6 +29,15 @@ export interface DataTableProps<Row> {
      * keyboard and screen-reader users, so the action has a real control.
      */
     onRowClick?: (row: Row) => void;
+    /**
+     * Makes the row a real link: the row-header cell (the first cell, with no `isRowHeader`
+     * column) becomes an `<a>`, so a new tab, the address and the URL on hover all work. Clicking
+     * the rest of the row follows that link; with a modifier key or the middle button it opens a
+     * new tab. Links and buttons in other cells keep their own click. Wins over `onRowClick`.
+     */
+    getRowHref?: (row: Row) => string;
+    /** Builds that link with the app's router. Receives {@link LinkRenderProps}. */
+    renderLink?: RenderLink;
     /** Default `ready`; `empty` is also inferred from zero rows. */
     state?: DataTableState;
     /** Replaces the default EmptyState ("No results"). */
@@ -56,8 +66,9 @@ export interface DataTableProps<Row> {
  * come from a server as easily as from `useClientTable`.
  *
  * It responds to its own width (a container query), not the viewport's. Narrow, it drops
- * low-priority columns and then stacks each row into a labelled card. Explicit table roles
- * keep it a table to screen readers in the stacked layout, where `display: block` would
- * otherwise erase that in some browsers.
+ * low-priority columns and then stacks each row into a labelled card, with a sort control above
+ * the cards in place of the hidden headers. Explicit table roles keep it a table to screen
+ * readers in the stacked layout, where `display: block` would otherwise erase that in some
+ * browsers.
  */
-export declare function DataTable<Row>({ columns, rows, getRowId, caption, showCaption, getRowLabel, sort, onSortChange, selection, onSelectionChange, rowActions, onRowAction, onRowClick, state, empty, error, loadingRows, pagination, density, stackBelow, stickyFirstColumn, maxHeight, className, }: DataTableProps<Row>): import("react").JSX.Element;
+export declare function DataTable<Row>({ columns, rows, getRowId, caption, showCaption, getRowLabel, sort, onSortChange, selection, onSelectionChange, rowActions, onRowAction, onRowClick, getRowHref, renderLink, state, empty, error, loadingRows, pagination, density, stackBelow, stickyFirstColumn, maxHeight, className, }: DataTableProps<Row>): import("react").JSX.Element;

package/dist/organisms/DataTable/DataTable.js

@@ -4,23 +4,77 @@ import { ArrowDownIcon, ArrowUpIcon, CaretSortIcon, DotsHorizontalIcon, } from '
 import { IconButton, Skeleton as ThemedSkeleton } from '@radix-ui/themes';
 import { useId } from 'react';
 import { ActionMenu } from '../../atoms/ActionMenu/ActionMenu.js';
+import { Button } from '../../atoms/Button/Button.js';
 import { Checkbox } from '../../atoms/Checkbox/Checkbox.js';
 import { EmptyState } from '../../molecules/EmptyState/EmptyState.js';
 import { ErrorState } from '../../molecules/ErrorState/ErrorState.js';
 import { Pagination } from '../../molecules/Pagination/Pagination.js';
 import { useUiStrings } from '../../strings.js';
-const INTERACTIVE = 'a, button, input, select, textarea, [role="checkbox"], [role="menuitem"]';
+const INTERACTIVE = 'a, button, input, select, textarea, [role="button"], [role="link"], [role="checkbox"], [role="menuitem"]';
+/**
+ * Whether a click belongs to the row: not to a control inside it, and not to a portal (the
+ * row-actions menu) whose click reached the row by bubbling through React rather than the DOM.
+ */
+function hitsRow(e) {
+    const target = e.target;
+    if (!e.currentTarget.contains(target))
+        return false;
+    const hit = target.closest(INTERACTIVE);
+    return !(hit && e.currentTarget.contains(hit));
+}
+/** The click that ends a drag to select text in the row is not a request to leave the page. */
+function isSelectingText(row) {
+    const selection = window.getSelection();
+    return !!selection && !selection.isCollapsed && row.contains(selection.anchorNode);
+}
+const rowLinkOf = (row) => row.querySelector('[data-row-link] a');
+/** The address as the link rendered it, so a router's basename comes along. */
+const openInNewTab = (link) => window.open(link.href, '_blank', 'noopener');
+/**
+ * The rest of the row goes through the link itself, so a plain click takes the router's path and
+ * a modified one opens what the link would have.
+ */
+function followRowLink(e) {
+    if (!hitsRow(e) || isSelectingText(e.currentTarget))
+        return;
+    const link = rowLinkOf(e.currentTarget);
+    if (!link)
+        return;
+    if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey)
+        openInNewTab(link);
+    else
+        link.click();
+}
+/** Pressing the wheel over plain content would otherwise start autoscroll, not a click. */
+function holdMiddleClick(e) {
+    if (e.button === 1 && hitsRow(e))
+        e.preventDefault();
+}
+function middleClickRowLink(e) {
+    const link = rowLinkOf(e.currentTarget);
+    if (e.button === 1 && link && hitsRow(e))
+        openInNewTab(link);
+}
+function isSortable(col) {
+    return col.sortable ?? !!col.sortValue;
+}
+function sortIcon(direction) {
+    if (direction === 'asc')
+        return ArrowUpIcon;
+    return direction === 'desc' ? ArrowDownIcon : CaretSortIcon;
+}
 /**
  * A data table: sortable headers, row selection, row actions, loading/empty/error states and
  * pagination. Fully controlled: it never sorts, pages or selects on its own, so the data can
  * come from a server as easily as from `useClientTable`.
  *
  * It responds to its own width (a container query), not the viewport's. Narrow, it drops
- * low-priority columns and then stacks each row into a labelled card. Explicit table roles
- * keep it a table to screen readers in the stacked layout, where `display: block` would
- * otherwise erase that in some browsers.
+ * low-priority columns and then stacks each row into a labelled card, with a sort control above
+ * the cards in place of the hidden headers. Explicit table roles keep it a table to screen
+ * readers in the stacked layout, where `display: block` would otherwise erase that in some
+ * browsers.
  */
-export function DataTable({ columns, rows, getRowId, caption, showCaption = false, getRowLabel, sort = null, onSortChange, selection, onSelectionChange, rowActions, onRowAction, onRowClick, state = 'ready', empty, error, loadingRows = 5, pagination, density = 'comfortable', stackBelow = 'md', stickyFirstColumn = false, maxHeight, className, }) {
+export function DataTable({ columns, rows, getRowId, caption, showCaption = false, getRowLabel, sort = null, onSortChange, selection, onSelectionChange, rowActions, onRowAction, onRowClick, getRowHref, renderLink, state = 'ready', empty, error, loadingRows = 5, pagination, density = 'comfortable', stackBelow = 'md', stickyFirstColumn = false, maxHeight, className, }) {
     const strings = useUiStrings();
     const captionId = useId();
     const selectAllId = useId();
@@ -28,6 +82,9 @@ export function DataTable({ columns, rows, getRowId, caption, showCaption = fals
     const hasActions = !!rowActions;
     const span = columns.length + (selectable ? 1 : 0) + (hasActions ? 1 : 0);
     const headerColumn = columns.find((c) => c.isRowHeader);
+    const linkColumn = getRowHref ? (headerColumn ?? columns[0]) : undefined;
+    const sortableColumns = onSortChange ? columns.filter(isSortable) : [];
+    const sortedColumn = sortableColumns.find((c) => c.id === sort?.id);
     const labelOf = (row) => {
         if (getRowLabel)
             return getRowLabel(row);
@@ -67,10 +124,24 @@ export function DataTable({ columns, rows, getRowId, caption, showCaption = fals
             return { id, direction: 'desc' };
         return null;
     };
+    const directionName = (direction) => direction === 'asc' ? strings.ascending : strings.descending;
+    const sortDirection = sortedColumn ? sort?.direction : undefined;
+    const SortMenuIcon = sortIcon(sortDirection);
+    // Rendered in every layout and hidden by a container query outside the stacked one, which is
+    // what keeps it a question of the table's width and not the viewport's.
+    const sortControl = sortableColumns.length > 0 && stackBelow ? (_jsx(ActionMenu, { title: strings.sortBy, align: "start", items: sortableColumns.map((col) => {
+            const direction = sort?.id === col.id ? sort.direction : undefined;
+            const Icon = sortIcon(direction);
+            return {
+                id: col.id,
+                label: direction ? `${col.header}, ${directionName(direction)}` : col.header,
+                icon: _jsx(Icon, {}),
+            };
+        }), onSelect: (id) => onSortChange?.(nextSort(id)), trigger: _jsxs(Button, { variant: "outline", size: "sm", className: "ui-table__sortmenu", children: [_jsxs("span", { className: "ui-table__sortlabel", children: [strings.sortBy, sortedColumn ? `: ${sortedColumn.header}` : null] }), sortDirection ? (_jsxs("span", { className: "ui-sr-only", children: [", ", directionName(sortDirection)] })) : null, _jsx(SortMenuIcon, { "aria-hidden": "true" })] }) })) : null;
     const header = (_jsx("thead", { role: "rowgroup", children: _jsxs("tr", { role: "row", children: [selectable ? (_jsx("th", { role: "columnheader", scope: "col", "data-col": "select", children: _jsx(Checkbox, { "aria-label": strings.selectAll, checked: allChecked, disabled: ids.length === 0, onCheckedChange: toggleAll }) })) : null, columns.map((col) => {
-                    const sortable = (col.sortable ?? !!col.sortValue) && !!onSortChange;
+                    const sortable = isSortable(col) && !!onSortChange;
                     const sorted = sort?.id === col.id ? sort.direction : undefined;
-                    const Icon = sorted === 'asc' ? ArrowUpIcon : sorted === 'desc' ? ArrowDownIcon : CaretSortIcon;
+                    const Icon = sortIcon(sorted);
                     return (_jsx("th", { role: "columnheader", scope: "col", "data-align": col.align, "data-priority": col.priority, style: col.width ? { inlineSize: col.width } : undefined, "aria-sort": sorted === 'asc' ? 'ascending' : sorted === 'desc' ? 'descending' : undefined, children: sortable ? (_jsxs("button", { type: "button", className: "ui-table__sort", "data-sorted": sorted ? '' : undefined, onClick: () => onSortChange?.(nextSort(col.id)), children: [col.header, _jsx(Icon, { "aria-hidden": "true" })] })) : (col.header) }, col.id));
                 }), hasActions ? (_jsx("th", { role: "columnheader", scope: "col", "data-col": "actions", children: _jsx("span", { className: "ui-sr-only", children: strings.moreActions }) })) : null] }) }));
     let body;
@@ -87,15 +158,27 @@ export function DataTable({ columns, rows, getRowId, caption, showCaption = fals
             const id = getRowId(row);
             const label = labelOf(row);
             const selected = selection?.has(id) ?? false;
+            const href = getRowHref?.(row);
+            const rowCell = (content) => {
+                if (href !== undefined) {
+                    const link = {
+                        href,
+                        className: 'ui-table__rowlink',
+                        children: content,
+                    };
+                    return renderLink ? renderLink(link) : _jsx("a", { ...link });
+                }
+                if (!onRowClick)
+                    return content;
+                return (_jsx("button", { type: "button", className: "ui-table__rowbutton", onClick: () => onRowClick(row), children: content }));
+            };
             const onClick = onRowClick
                 ? (e) => {
-                    const hit = e.target.closest(INTERACTIVE);
-                    if (hit && e.currentTarget.contains(hit))
-                        return;
-                    onRowClick(row);
+                    if (hitsRow(e))
+                        onRowClick(row);
                 }
                 : undefined;
-            return (_jsxs("tr", { role: "row", "data-selected": selected ? '' : undefined, "data-clickable": onRowClick ? '' : undefined, onClick: onClick, children: [selectable ? (_jsx("td", { role: "cell", "data-col": "select", children: _jsx(Checkbox, { "aria-label": strings.selectRow(label), checked: selected, onCheckedChange: () => toggleOne(id) }) })) : null, columns.map((col) => {
+            return (_jsxs("tr", { role: "row", "data-selected": selected ? '' : undefined, "data-clickable": href !== undefined || onRowClick ? '' : undefined, onClick: href !== undefined ? followRowLink : onClick, onMouseDown: href !== undefined ? holdMiddleClick : undefined, onAuxClick: href !== undefined ? middleClickRowLink : undefined, children: [selectable ? (_jsx("td", { role: "cell", "data-col": "select", children: _jsx(Checkbox, { "aria-label": strings.selectRow(label), checked: selected, onCheckedChange: () => toggleOne(id) }) })) : null, columns.map((col) => {
                         const content = col.cell(row);
                         const common = {
                             'data-align': col.align,
@@ -105,16 +188,16 @@ export function DataTable({ columns, rows, getRowId, caption, showCaption = fals
                                 : (col.mobileLabel ?? col.header),
                         };
                         if (col.isRowHeader) {
-                            return (_jsx("th", { role: "rowheader", scope: "row", ...common, children: onRowClick ? (_jsx("button", { type: "button", className: "ui-table__rowbutton", onClick: () => onRowClick(row), children: content })) : (content) }, col.id));
+                            return (_jsx("th", { role: "rowheader", scope: "row", "data-row-link": col === linkColumn ? '' : undefined, ...common, children: rowCell(content) }, col.id));
                         }
-                        return (_jsx("td", { role: "cell", ...common, children: content }, col.id));
+                        return (_jsx("td", { role: "cell", "data-row-link": col === linkColumn ? '' : undefined, ...common, children: col === linkColumn ? rowCell(content) : content }, col.id));
                     }), hasActions ? (_jsx("td", { role: "cell", "data-col": "actions", children: _jsx(ActionMenu, { items: rowActions(row), onSelect: (actionId) => onRowAction?.(actionId, row), title: label, trigger: _jsx(IconButton, { variant: "ghost", color: "gray", "aria-label": strings.actionsFor(label), children: _jsx(DotsHorizontalIcon, {}) }) }) })) : null] }, id));
         });
     }
     const regionStyle = maxHeight
         ? { maxBlockSize: maxHeight }
         : undefined;
-    return (_jsxs("div", { className: ['ui-table', className].filter(Boolean).join(' '), "data-density": density, "data-stack": stackBelow || undefined, "data-sticky-first": stickyFirstColumn ? '' : undefined, children: [effective === 'loading' ? (_jsx("span", { role: "status", className: "ui-sr-only", children: strings.loading })) : null, selectable && effective === 'ready' ? (_jsxs("label", { className: "ui-table__selectall", htmlFor: selectAllId, children: [_jsx(Checkbox, { id: selectAllId, checked: allChecked, onCheckedChange: toggleAll }), strings.selectAll] })) : null, _jsx("section", { className: "ui-table__region", "aria-labelledby": captionId, 
+    return (_jsxs("div", { className: ['ui-table', className].filter(Boolean).join(' '), "data-density": density, "data-stack": stackBelow || undefined, "data-sticky-first": stickyFirstColumn ? '' : undefined, children: [effective === 'loading' ? (_jsx("span", { role: "status", className: "ui-sr-only", children: strings.loading })) : null, sortControl || (selectable && effective === 'ready') ? (_jsxs("div", { className: "ui-table__stacktools", children: [selectable && effective === 'ready' ? (_jsxs("label", { className: "ui-table__selectall", htmlFor: selectAllId, children: [_jsx(Checkbox, { id: selectAllId, checked: allChecked, onCheckedChange: toggleAll }), strings.selectAll] })) : null, sortControl] })) : null, _jsx("section", { className: "ui-table__region", "aria-labelledby": captionId, 
                 // biome-ignore lint/a11y/noNoninteractiveTabindex: a scrolling region must be reachable by keyboard to be scrolled.
                 tabIndex: 0, style: regionStyle, children: _jsxs("table", { className: "ui-table__table", role: "table", "aria-busy": effective === 'loading' || undefined, children: [_jsx("caption", { id: captionId, className: showCaption ? 'ui-table__caption' : 'ui-sr-only', children: caption }), header, _jsx("tbody", { role: "rowgroup", children: body })] }) }), pagination && effective !== 'loading' ? _jsx(Pagination, { ...pagination }) : null] }));
 }

package/dist/strings.d.ts

@@ -97,6 +97,10 @@ export interface UiStrings {
     selectRow: (row: string) => string;
     /** DataTable: the row-actions menu button's name. */
     actionsFor: (row: string) => string;
+    /** DataTable: the sort control that stands in for the header in the stacked layout. */
+    sortBy: string;
+    ascending: string;
+    descending: string;
     /** BulkActionBar: the toolbar's name, the selection count, and the clear button. */
     bulkActions: string;
     selectedCount: (count: number) => string;

package/dist/strings.js

@@ -50,6 +50,9 @@ const DEFAULTS = {
     selectAll: 'Select all rows',
     selectRow: (row) => `Select ${row}`,
     actionsFor: (row) => `Actions for ${row}`,
+    sortBy: 'Sort by',
+    ascending: 'Ascending',
+    descending: 'Descending',
     bulkActions: 'Bulk actions',
     selectedCount: (count) => `${count} selected`,
     clearSelection: 'Clear selection',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "1.8.5",
+  "version": "1.9.0",
   "description": "A React + TypeScript component library built on Radix Themes: atoms, a Tailwind token bridge and theming.",
   "private": false,
   "type": "module",

package/tokens.css

@@ -925,6 +925,9 @@
 .ui-stat-delta[data-tone="negative"] { color: var(--color-danger-ink); }
 .ui-stat-spark { display: block; height: 32px; margin-top: 4px; }
 .ui-stat-chevron { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); color: var(--color-ink-muted); }
+/* Loading. The heights come from the classes above; only these widths are invented. */
+.ui-stat-label.rt-Skeleton { inline-size: 60%; }
+.ui-stat-value.rt-Skeleton { inline-size: 5ch; }
 
 /* ---- ScrollStrip ---- */
 .ui-strip { --strip-item: 78%; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-inline: var(--page-gutter, 16px); scroll-padding-inline: var(--page-gutter, 16px); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
@@ -953,6 +956,15 @@
   .ui-button[data-icon-only]::before { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, var(--tap-min)); height: max(100%, var(--tap-min)); transform: translate(-50%, -50%); }
   /* iOS Safari zooms the page when a focused field is under 16px. */
   .ui-input, .ui-input input, .ui-textarea, .ui-textarea textarea, .ui-select-trigger { font-size: 16px; }
+  /*
+   * In a form on a phone the field is the main target. `sm` fields keep their size: choosing one
+   * is asking for density. Buttons follow so that one beside a field still lines up with it, and
+   * an icon-only button keeps its shape and has the ::before above instead.
+   */
+  .ui-input:not(.rt-r-size-1), .ui-textarea, .ui-select-trigger, .ui-date-input,
+  .ui-button:is([data-size='sm'], [data-size='md']):not([data-icon-only]) { min-block-size: var(--tap-min); }
+  /* Themes makes a ghost button content-box, so that minimum would land on top of its padding. */
+  .ui-button[data-variant='ghost'] { box-sizing: border-box; }
 }
 @media (prefers-reduced-motion: reduce) {
   .ui-button, .ui-list-row[data-interactive], .ui-tabbar__item, .ui-stat[data-interactive] { transition: none; }
@@ -1200,10 +1212,15 @@
   background: linear-gradient(var(--row-tint), var(--row-tint)), var(--color-panel-solid); }
 .ui-table__sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
 .ui-table__sort[data-sorted] { color: var(--color-ink); }
-.ui-table__sort:focus-visible, .ui-table__rowbutton:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 2px; border-radius: var(--radius-1); }
+.ui-table__sort:focus-visible, .ui-table__rowbutton:focus-visible, .ui-table__rowlink:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 2px; border-radius: var(--radius-1); }
 .ui-table__rowbutton { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
-@media (hover: hover) { .ui-table__rowbutton:hover { text-decoration: underline; } }
+.ui-table__rowlink { color: inherit; text-decoration: none; }
+@media (hover: hover) { .ui-table__rowbutton:hover, .ui-table__rowlink:hover { text-decoration: underline; } }
 .ui-table__selectall { display: none; align-items: center; gap: 8px; padding-inline: 12px; font-size: 14px; font-weight: 500; cursor: pointer; }
+/* What the header row offers, for the layout that hides it. Only the @container blocks below show this. */
+.ui-table__stacktools { display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
+.ui-table__sortmenu { max-inline-size: 100%; }
+.ui-table__sortlabel { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ui-table__empty { padding: 0; }
 .ui-table__table .ui-table__empty { block-size: auto; }
 .ui-table__empty > * { flex: 1; }
@@ -1214,7 +1231,7 @@
 @container (width < 480px) {
   .ui-table[data-stack="sm"] :is(.ui-table__table, tbody, tr, th, td) { display: block; }
   .ui-table[data-stack="sm"] thead { display: none; }
-  .ui-table[data-stack="sm"] .ui-table__selectall { display: flex; }
+  .ui-table[data-stack="sm"] :is(.ui-table__stacktools, .ui-table__selectall) { display: flex; }
   .ui-table[data-stack="sm"] .ui-table__region { border: 0; background: none; overflow: visible; }
   .ui-table[data-stack="sm"] tbody tr { position: relative; margin-block-end: 12px; padding: 8px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-4); background: var(--color-panel-solid); }
   .ui-table[data-stack="sm"] .ui-table__table tbody :is(th, td) { display: flex; justify-content: space-between; gap: 12px; block-size: auto; min-block-size: 32px; align-items: center; padding: 4px 0; border: 0; text-align: end; }
@@ -1226,7 +1243,7 @@
 @container (width < 640px) {
   .ui-table[data-stack="md"] :is(.ui-table__table, tbody, tr, th, td) { display: block; }
   .ui-table[data-stack="md"] thead { display: none; }
-  .ui-table[data-stack="md"] .ui-table__selectall { display: flex; }
+  .ui-table[data-stack="md"] :is(.ui-table__stacktools, .ui-table__selectall) { display: flex; }
   .ui-table[data-stack="md"] .ui-table__region { border: 0; background: none; overflow: visible; }
   .ui-table[data-stack="md"] tbody tr { position: relative; margin-block-end: 12px; padding: 8px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-4); background: var(--color-panel-solid); }
   .ui-table[data-stack="md"] .ui-table__table tbody :is(th, td) { display: flex; justify-content: space-between; gap: 12px; block-size: auto; min-block-size: 32px; align-items: center; padding: 4px 0; border: 0; text-align: end; }
@@ -1238,7 +1255,7 @@
 @container (width < 800px) {
   .ui-table[data-stack="lg"] :is(.ui-table__table, tbody, tr, th, td) { display: block; }
   .ui-table[data-stack="lg"] thead { display: none; }
-  .ui-table[data-stack="lg"] .ui-table__selectall { display: flex; }
+  .ui-table[data-stack="lg"] :is(.ui-table__stacktools, .ui-table__selectall) { display: flex; }
   .ui-table[data-stack="lg"] .ui-table__region { border: 0; background: none; overflow: visible; }
   .ui-table[data-stack="lg"] tbody tr { position: relative; margin-block-end: 12px; padding: 8px 12px; border: 1px solid var(--color-hairline); border-radius: var(--radius-4); background: var(--color-panel-solid); }
   .ui-table[data-stack="lg"] .ui-table__table tbody :is(th, td) { display: flex; justify-content: space-between; gap: 12px; block-size: auto; min-block-size: 32px; align-items: center; padding: 4px 0; border: 0; text-align: end; }
@@ -1432,7 +1449,46 @@
 .rt-TextFieldRoot:has(> input[aria-invalid="true"]),
 .rt-TextAreaRoot:has(> textarea[aria-invalid="true"]),
 .rt-SelectTrigger[aria-invalid="true"],
-.ui-date-input.rt-Button[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--red-8); }
+.ui-date-input.rt-Button[aria-invalid="true"],
+.ui-combobox__field:has([role="combobox"][aria-invalid="true"]) { box-shadow: inset 0 0 0 1px var(--red-8); }
+
+/*
+ * Combobox. The field wears Themes' own text field classes on our markup, because the chips have
+ * to come before the input and TextField.Root puts the input first. So size, focus ring and
+ * disabled state are Input's, and only the wrapping is ours.
+ */
+.ui-combobox { inline-size: 100%; min-inline-size: 0; }
+.ui-combobox__field.rt-TextFieldRoot { block-size: auto; min-block-size: var(--text-field-height); cursor: text; }
+.ui-combobox__field:has(.ui-combobox__trigger) { cursor: pointer; }
+.ui-combobox__values { display: flex; flex: 1 1 0; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-inline-size: 0; }
+.ui-combobox__values[data-pills] { padding-block: 2px; padding-inline-start: 3px; }
+.ui-combobox__values .rt-TextFieldInput, .ui-combobox__trigger { flex: 1 1 4rem; align-self: stretch; min-inline-size: 0; }
+.ui-combobox__values .rt-TextFieldInput { inline-size: auto; }
+.ui-combobox__icon { display: inline-flex; flex: none; margin-inline-start: var(--text-field-padding); }
+.ui-combobox__icon + .rt-TextFieldInput { text-indent: 0; padding-inline-start: 6px; }
+.ui-combobox__values .ui-pill { max-inline-size: 100%; min-inline-size: 0; }
+.ui-combobox__pill { display: inline-flex; align-items: center; gap: 4px; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ui-combobox__trigger { box-sizing: border-box; padding: 0 var(--text-field-padding); overflow: hidden; border: 0; outline: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; text-overflow: ellipsis; white-space: nowrap; cursor: inherit; }
+.ui-combobox__trigger[data-empty] { color: var(--gray-a10); }
+.ui-combobox__icon + .ui-combobox__trigger { padding-inline-start: 6px; }
+/* Not .rt-TextFieldInput: a button matches :read-only, which would grey it as if it were disabled. */
+.ui-combobox__field:has(.ui-combobox__trigger:focus-visible) { outline: 2px solid var(--text-field-focus-color); outline-offset: -1px; }
+.ui-combobox__field:has(.ui-combobox__trigger:disabled) { background-image: linear-gradient(var(--gray-a2), var(--gray-a2)); box-shadow: inset 0 0 0 var(--text-field-border-width) var(--gray-a6); cursor: var(--cursor-disabled); }
+.ui-combobox__trigger:disabled { color: var(--gray-a11); }
+.ui-combobox__end { color: var(--gray-a11); }
+.ui-combobox__popup.rt-PopoverContent { box-sizing: border-box; inline-size: var(--radix-popover-trigger-width); max-block-size: min(20rem, var(--radix-popover-content-available-height, 20rem)); padding: 4px; overflow-y: auto; }
+.ui-combobox__search { position: sticky; inset-block-start: 0; z-index: 1; padding-block-end: 8px; background: var(--color-sheet); }
+.ui-combobox__option { display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-block-size: 32px; padding: 6px 8px; border-radius: var(--radius-2); color: var(--gray-12); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; cursor: pointer; }
+.ui-combobox__option[data-active] { background: var(--accent-a4); color: var(--accent-12); }
+.ui-combobox__option-icon { display: inline-flex; flex: none; }
+.ui-combobox__option-label { min-inline-size: 0; }
+.ui-combobox__option-detail { min-inline-size: 0; color: var(--gray-11); font-size: 12px; }
+.ui-combobox__option[data-active] .ui-combobox__option-detail { color: var(--accent-11); }
+.ui-combobox__option-check { flex: none; margin-inline-start: auto; visibility: hidden; }
+.ui-combobox__option[aria-selected="true"] .ui-combobox__option-check { visibility: visible; }
+.ui-combobox__message { padding: 12px 8px; color: var(--color-ink-muted); font-size: 14px; text-align: center; }
+.ui-combobox__list[data-presentation="sheet"] .ui-combobox__option { min-block-size: var(--tap-min); }
+@media (pointer: coarse) { .ui-combobox__option { min-block-size: var(--tap-min); } }
 
 /* Accordion: native <details>, its marker replaced by a chevron that turns when open. */
 .ui-accordion { display: flex; flex-direction: column; gap: 8px; }