@kennycorrea/ui 1.8.4 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # 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.
+
+- **`icon` on `SelectOption`**: an optional `ReactNode` drawn before the label, in the list item and on the trigger once that option is chosen. It is `aria-hidden`, so the option is named by `label` alone, which stays a required `string`. An option without an icon renders exactly as before.
+- **Themes' `Select` is re-exported from primitives as `RadixSelect`**, the same way `DropdownMenu` is. It is aliased, like `RadixSegmentedControl`, because the `Select` atom already uses the name.
+- Tests in `test/Select-icon.test.tsx`. A combobox is never named from its content, so the trigger keeps its field label's name whatever the icon is (a titled SVG included). The tests also check that the icon is hidden and comes before the label text.
+
 ## 1.8.4 — 2026-10-30
 
 A `MentionTextarea` molecule.

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/Select/Select.d.ts

@@ -1,6 +1,13 @@
+import { type ReactNode } from 'react';
 export interface SelectOption {
     value: string;
+    /** The option's text, and its accessible name — in the list and on the trigger. */
     label: string;
+    /**
+     * Drawn before the label, in the item and on the trigger once chosen. Decorative: it is
+     * hidden from assistive tech, so `label` alone names the option.
+     */
+    icon?: ReactNode;
 }
 export interface SelectProps {
     value?: string;

package/dist/atoms/Select/Select.js

@@ -12,5 +12,5 @@ import { cn } from '../../utils/cn.js';
  */
 export const Select = forwardRef(function Select({ value, onValueChange, options, placeholder, invalid = false, disabled, required, id, name, className, ...props }, ref) {
     const strings = useUiStrings();
-    return (_jsxs(ThemedSelect.Root, { value: value, onValueChange: onValueChange, disabled: disabled, required: required, name: name, children: [_jsx(ThemedSelect.Trigger, { ref: ref, id: id, placeholder: placeholder ?? strings.select, color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('ui-select-trigger w-full', className), ...props }), _jsx(ThemedSelect.Content, { position: "popper", children: options.map((option) => (_jsx(ThemedSelect.Item, { value: option.value, children: option.label }, option.value))) })] }));
+    return (_jsxs(ThemedSelect.Root, { value: value, onValueChange: onValueChange, disabled: disabled, required: required, name: name, children: [_jsx(ThemedSelect.Trigger, { ref: ref, id: id, placeholder: placeholder ?? strings.select, color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('ui-select-trigger w-full', className), ...props }), _jsx(ThemedSelect.Content, { position: "popper", children: options.map((option) => (_jsx(ThemedSelect.Item, { value: option.value, children: option.icon == null ? (option.label) : (_jsxs("span", { className: "ui-select-option inline-flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0", children: option.icon }), _jsx("span", { children: option.label })] })) }, option.value))) })] }));
 });

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/primitives/index.d.ts

@@ -6,4 +6,4 @@
  * reaches for a `Table` or `Tabs` through this package rather than importing Themes beside it
  * and drifting from the version the atoms were built against.
  */
-export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl as RadixSegmentedControl, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';
+export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl as RadixSegmentedControl, Select as RadixSelect, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';

package/dist/primitives/index.js

@@ -6,4 +6,4 @@
  * reaches for a `Table` or `Tabs` through this package rather than importing Themes beside it
  * and drifting from the version the atoms were built against.
  */
-export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl as RadixSegmentedControl, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';
+export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl as RadixSegmentedControl, Select as RadixSelect, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';

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.4",
+  "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; }