@ciridae/ui 1.0.5 → 1.0.9

package/dist/components/checkbox-item.js

@@ -25,7 +25,7 @@ const row = css({
     transitionDuration: "fast",
     // The selected tint in dark and the row wash in light, as a menu row hovers; focus rings the row
     // inside its own edge.
-    _hover: { background: "token(gradients.selected)", _light: { background: "bg.rowHover" } },
+    _hover: { background: "[token(gradients.selected)]", _light: { background: "bg.rowHover" } },
     "&:has(:focus-visible)": { focusRing: "inset" },
     "&:has([data-disabled])": { opacity: "disabled", cursor: "not-allowed" },
 });
@@ -35,10 +35,10 @@ const grip = css({
     flexShrink: "0",
     color: "fg.muted",
     cursor: "grab",
-    opacity: "0",
-    transitionProperty: "opacity",
+    opacity: "[0]",
+    transitionProperty: "[opacity]",
     transitionDuration: "fast",
-    "label:hover > &, label:focus-within > &": { opacity: "1" },
+    "label:hover > &, label:focus-within > &": { opacity: "[1]" },
     // A locked row keeps the grip's room, so its label lines up with the rows that move.
     "&[data-locked]": { visibility: "hidden" },
 });

package/dist/components/checkbox-list.js

@@ -17,7 +17,7 @@ const list = css({
     gridTemplateColumns: "minmax(0, 1fr)",
     gap: "layout.tightGap",
     paddingBottom: "layout.controlGap",
-    paddingInlineEnd: "calc(token(sizes.scroll.bar) + token(spacing.layout.tightGap))",
+    paddingInlineEnd: "[calc(token(sizes.scroll.bar) + token(spacing.layout.tightGap))]",
 });
 const itemStack = css({
     display: "grid",
@@ -31,7 +31,7 @@ const itemRowEnd = css({ paddingInlineEnd: "panel.compact" });
 const flushRow = css({ paddingInlineStart: "panel.compact" });
 // Grouped rows sit under their group's label, so their boxes line up with its text.
 const groupedRow = css({
-    paddingInlineStart: "calc(token(spacing.panel.compact) + token(sizes.control.checkbox) + token(spacing.layout.controlGap))",
+    paddingInlineStart: "[calc(token(spacing.panel.compact) + token(sizes.control.checkbox) + token(spacing.layout.controlGap))]",
 });
 const groupBlock = css({
     display: "grid",
@@ -55,7 +55,7 @@ const groupLabel = css({ flex: "1", minWidth: "0", fontSize: "caption", fontWeig
 const label = css({ flex: "1", minWidth: "0", fontSize: "caption" });
 // A description lines up with its label's text, past the checkbox.
 const description = css({
-    paddingInlineStart: "calc(token(sizes.control.checkbox) + token(spacing.layout.controlGap))",
+    paddingInlineStart: "[calc(token(sizes.control.checkbox) + token(spacing.layout.controlGap))]",
     minWidth: "0",
 });
 const box = css({ flexShrink: "0" });
@@ -129,7 +129,7 @@ function SearchableCheckboxes({ items, emptyMessage, selectedKeys, onChange, dis
         }
         onChange(next);
     };
-    const listed = shown.length === 0 ? (_jsx("div", { className: cx(list, muted), children: searching ? labels.noMatches(search.trim()) : emptyMessage })) : (_jsx(ListedCheckboxes, { items: shown, selectedKeys: selectedKeys, onChange: onChange, disabled: disabled }));
+    const listed = shown.length === 0 ? (_jsx("div", { className: cx(list, muted), children: searching ? labels.noMatches(search.trim()) : emptyMessage })) : (_jsx(ListedCheckboxes, { items: shown, selectedKeys: selectedKeys, onChange: onChange, disabled: disabled, labels: labels }));
     if (items.length === 0 || (!offerSearch && !offerBulkActions))
         return listed;
     return (_jsxs("div", { className: withToolbar, "data-ciridae-ui": "", children: [_jsxs(Toolbar, { children: [offerSearch && (_jsx(SearchInput, { "aria-label": labels.search, placeholder: labels.search, value: search, onChange: (event) => setSearch(event.target.value), 
@@ -139,7 +139,7 @@ function SearchableCheckboxes({ items, emptyMessage, selectedKeys, onChange, dis
                                 event.preventDefault();
                         } })), offerBulkActions && (_jsxs("div", { className: toolbarActions, children: [_jsxs("div", { className: bulkActions, role: "group", "aria-label": labels.bulkActions, children: [_jsx(Button, { variant: "secondary", size: "small", focusableWhenDisabled: true, disabled: disabled || shownKeys.every((key) => selectedKeys.has(key)), onClick: () => setShown(true), children: searching ? labels.selectMatches : labels.selectAll }), _jsx(Button, { variant: "secondary", size: "small", focusableWhenDisabled: true, disabled: disabled || !shownKeys.some((key) => selectedKeys.has(key)), onClick: () => setShown(false), children: searching ? labels.clearMatches : labels.clear })] }), _jsx("span", { className: selectedCount, "aria-live": "polite", children: labels.selectedCount(items.filter((item) => selectedKeys.has(item.key)).length, items.length) })] }))] }), listed] }));
 }
-function ListedCheckboxes({ items, selectedKeys, onChange, disabled, }) {
+function ListedCheckboxes({ items, selectedKeys, onChange, disabled, labels, }) {
     const toggle = (keys, checked) => {
         const next = new Set(selectedKeys);
         for (const key of keys) {
@@ -162,6 +162,6 @@ function ListedCheckboxes({ items, selectedKeys, onChange, disabled, }) {
     return (_jsx(ScrollArea, { viewportClassName: listViewport, children: _jsxs("div", { className: list, "data-ciridae-ui": "", children: [items.filter((item) => item.group === undefined).map((item) => itemRow(item, "flush")), [...groups].map(([groupKey, { label: group, members }]) => {
                     const keys = members.map((item) => item.key);
                     const selectedCount = keys.filter((key) => selectedKeys.has(key)).length;
-                    return (_jsxs("div", { role: "group", "aria-label": group, className: groupBlock, children: [_jsxs("div", { className: groupHeading, children: [_jsx(Checkbox, { disabled: disabled, wrapperClassName: groupLabel, className: box, checked: selectedCount === keys.length, indeterminate: selectedCount > 0 && selectedCount < keys.length, onCheckedChange: (checked) => toggle(keys, checked), children: group }), _jsx("span", { className: muted, children: `${selectedCount}/${keys.length}` })] }), members.map((item) => itemRow(item, "under-group"))] }, groupKey));
+                    return (_jsxs("div", { role: "group", "aria-label": group, className: groupBlock, children: [_jsxs("div", { className: groupHeading, children: [_jsx(Checkbox, { disabled: disabled, wrapperClassName: groupLabel, className: box, checked: selectedCount === keys.length, indeterminate: selectedCount > 0 && selectedCount < keys.length, onCheckedChange: (checked) => toggle(keys, checked), children: group }), _jsx("span", { className: muted, children: labels.groupSelectedCount(selectedCount, keys.length) })] }), members.map((item) => itemRow(item, "under-group"))] }, groupKey));
                 })] }) }));
 }

package/dist/components/chip.js

@@ -7,7 +7,7 @@ import { icon as iconStyle } from "./icon.js";
 import { useCiridaeLocale } from "./locale.js";
 const chip = css({
     display: "inline-flex",
-    maxWidth: "100%",
+    maxWidth: "full",
     overflowWrap: "anywhere",
     alignItems: "center",
     gap: "control.iconGap",
@@ -47,7 +47,7 @@ const tag = css({
     paddingInlineEnd: "layout.controlGap",
     border: "1px solid transparent",
     borderRadius: "round",
-    background: "token(gradients.raised)",
+    background: "[token(gradients.raised)]",
     color: "fg.label",
     fontFamily: "sans",
     fontSize: "code",

package/dist/components/collapsible.js

@@ -10,7 +10,7 @@ const trigger = css({
     gap: "control.iconGap",
     padding: "none",
     border: "none",
-    background: "none",
+    background: "[none]",
     color: "fg.primary",
     font: "inherit",
     textAlign: "start",
@@ -21,7 +21,7 @@ const trigger = css({
 const caret = css({
     flexShrink: "0",
     color: "fg.muted",
-    transitionProperty: "transform",
+    transitionProperty: "[transform]",
     transitionDuration: "fast",
     "[data-panel-open] > &": { transform: "rotate(180deg)" },
 });
@@ -32,7 +32,7 @@ const panel = css({
     overflow: "hidden",
     // Clips for the height animation, with room for the focus rings of the fields inside.
     ringRoom: true,
-    transitionProperty: "height",
+    transitionProperty: "[height]",
     transitionDuration: "fast",
     "&[data-starting-style], &[data-ending-style]": { height: "0" },
 });

package/dist/components/color-theme.d.ts

@@ -1,6 +1,5 @@
 import { type ReactNode } from "react";
 import type { Brand, CiridaeTheme, ColorTheme } from "../theme/options.js";
-import type { PaletteName } from "../theme/palettes.js";
 export type { Brand, ColorTheme } from "../theme/options.js";
 /** What the reader chose: a theme, or to follow the operating system's. */
 export type ColorThemePreference = ColorTheme | "system";
@@ -20,11 +19,9 @@ export type ThemeProviderProps = {
     /** What the product calls itself, for `useBrand`. */
     brand?: Brand;
     /**
-     * A palette to show over the one the stylesheet was built with, switchable at runtime, such as
-     * a customer's choice or a preview. Leave it and `fonts` out to keep the built tokens.
+     * Faces to show over the ones the stylesheet was built with, switchable at runtime, such as a
+     * preview. Leave it out to keep the built faces.
      */
-    palette?: PaletteName;
-    /** Faces to show over the built ones, at runtime, as `palette` does for colors. */
     fonts?: CiridaeTheme["fonts"];
 };
 /**
@@ -33,7 +30,7 @@ export type ThemeProviderProps = {
  * `_light` values resolve through, so every component follows without
  * threading a prop.
  */
-export declare function ThemeProvider({ children, defaultColorTheme, storageKey, brand, palette, fonts, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function ThemeProvider({ children, defaultColorTheme, storageKey, brand, fonts, }: ThemeProviderProps): import("react").JSX.Element;
 /** Throws outside a `ThemeProvider`, where there is no theme to report or change. */
 export declare function useColorTheme(): ColorThemeContextValue;
 /** Throws outside a `ThemeProvider` given a `brand`, where there is no name to show. */

package/dist/components/color-theme.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
-import { themeStylesheet } from "../theme/tokens.js";
+import { fontStylesheet } from "../theme/tokens.js";
 /** The attribute the `light` Panda condition and `ciridae.css` both select on. */
 const THEME_ATTRIBUTE = "data-ciridae-theme";
 const DEFAULT_STORAGE_KEY = "ciridae-ui-color-theme";
@@ -33,23 +33,22 @@ function readSystemTheme() {
 }
 const ColorThemeContext = createContext(null);
 const BrandContext = createContext(null);
-const RUNTIME_THEME_ELEMENT_ID = "ciridae-runtime-theme";
-/** Writes the palette's and fonts' token variables onto the document while either is set. */
-function useRuntimeTheme(palette, fonts) {
+const RUNTIME_FONTS_ELEMENT_ID = "ciridae-runtime-fonts";
+function useRuntimeFonts(fonts) {
     const display = fonts?.display;
     const sans = fonts?.sans;
     const mono = fonts?.mono;
     useEffect(() => {
         const document = globalThis.document;
-        if (!document || (palette === undefined && !display && !sans && !mono))
+        if (!document || (!display && !sans && !mono))
             return;
-        const existing = document.getElementById(RUNTIME_THEME_ELEMENT_ID);
+        const existing = document.getElementById(RUNTIME_FONTS_ELEMENT_ID);
         const style = existing instanceof HTMLStyleElement ? existing : document.createElement("style");
-        style.id = RUNTIME_THEME_ELEMENT_ID;
-        style.textContent = themeStylesheet({ palette, fonts: { display, sans, mono } });
+        style.id = RUNTIME_FONTS_ELEMENT_ID;
+        style.textContent = fontStylesheet({ display, sans, mono });
         document.head.append(style);
         return () => style.remove();
-    }, [palette, display, sans, mono]);
+    }, [display, sans, mono]);
 }
 /**
  * Owns the document's color theme. The chosen theme is written to
@@ -57,8 +56,8 @@ function useRuntimeTheme(palette, fonts) {
  * `_light` values resolve through, so every component follows without
  * threading a prop.
  */
-export function ThemeProvider({ children, defaultColorTheme = "dark", storageKey = DEFAULT_STORAGE_KEY, brand, palette, fonts, }) {
-    useRuntimeTheme(palette, fonts);
+export function ThemeProvider({ children, defaultColorTheme = "dark", storageKey = DEFAULT_STORAGE_KEY, brand, fonts, }) {
+    useRuntimeFonts(fonts);
     const [preference, setPreferenceState] = useState(() => readStoredPreference(storageKey) ?? defaultColorTheme);
     const [systemTheme, setSystemTheme] = useState(readSystemTheme);
     // Only a `system` preference follows the operating system as it changes.

package/dist/components/column-settings.js

@@ -16,7 +16,7 @@ import { SegmentedControl, SegmentedOption } from "./form-layout.js";
 import { icon } from "./icon.js";
 import { useCiridaeLocale } from "./locale.js";
 import { Popover } from "./overlays.js";
-const panel = css({ display: "grid", width: "260px", maxWidth: "100%" });
+const panel = css({ display: "grid", width: "[260px]", maxWidth: "full" });
 const heading = css({
     display: "flex",
     alignItems: "center",
@@ -39,7 +39,7 @@ const dropSlot = css({
     paddingInline: "layout.tightGap",
     "& > span": {
         display: "block",
-        height: "100%",
+        height: "full",
         border: "1px solid token(colors.border.focus)",
         borderRadius: "keycap",
     },
@@ -52,7 +52,7 @@ const hint = css({
     fontSize: "code",
     letterSpacing: "compact",
 });
-const densityControl = css({ display: "flex!", width: "100%", "& > *": { flex: "1" } });
+const densityControl = css({ display: "flex!", width: "full", "& > *": { flex: "1" } });
 export function ColumnSettings({ columns, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, onReset, density, onDensityChange, trigger, open, onOpenChange, labels: ownLabels, }) {
     const { labels: localeLabels } = useCiridaeLocale();
     const labels = { ...localeLabels.table, ...ownLabels };

package/dist/components/command-menu.d.ts

@@ -6,7 +6,6 @@ export type CommandMenuItem = {
     icon?: ReactNode;
     /** Muted text after the label, such as a record's title. */
     detail?: string;
-    /** What the row is, at its end, such as "Invoice" or "Job". */
     kind?: string;
     /** The hotkey that runs it while the menu is open, such as "Mod+J", shown at the row's end. */
     shortcut?: HotkeyChord;
@@ -41,7 +40,7 @@ export type CommandMenuProps = {
     placeholder?: string;
     /** Shown when no row matches, above any `unfiltered` row; the locale's "No results" by default. */
     empty?: ReactNode;
-    /** What the menu searches, at the end of its footer, such as "Records, people and actions". */
+    /** Drawn under the footer's key hints, such as what the search covers. */
     searchScope?: ReactNode;
 };
 export declare function CommandMenu({ open, onOpenChange, query, onQueryChange, groups, title: ownTitle, placeholder: ownPlaceholder, empty: ownEmpty, searchScope, }: CommandMenuProps): import("react").JSX.Element;

package/dist/components/command-menu.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /*
  * A keyboard-first command palette: a search field over grouped rows in a dialog near the top of
  * the window. Arrows move, Enter runs the highlighted row, Escape closes. `cmdk` owns the list's
- * keyboard and selection; the menu matches rows itself, so their order stays the caller's.
+ * keyboard; the menu matches rows itself, so their order stays the caller's, and holds which row
+ * is highlighted, so the field names it to a screen reader from the first result on.
  */
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import { useRender } from "@base-ui/react/use-render";
@@ -21,34 +22,34 @@ const backdrop = css({
     inset: "none",
     zIndex: "dialog",
     background: "bg.backdrop",
-    transitionProperty: "opacity",
+    transitionProperty: "[opacity]",
     transitionDuration: "fast",
-    "&[data-starting-style], &[data-ending-style]": { opacity: "0" },
-    _motionReduce: { transition: "none" },
+    "&[data-starting-style], &[data-ending-style]": { opacity: "[0]" },
+    _motionReduce: { transition: "[none]" },
 });
 // The palette is a sheet in a glass shell, as a modal is: the shell blurs the page in dark, the
 // sheet blurs it in light.
 const popup = css({
     zIndex: "dialog",
     position: "fixed",
-    top: "18dvh",
-    left: "50%",
+    top: "[18dvh]",
+    left: "[50%]",
     display: "flex",
-    width: "calc(100vw - token(spacing.layout.pageGap) * 2)",
-    maxWidth: "calc(token(sizes.overlay.palette) + token(spacing.menu.inset) * 2 + 2px)",
+    width: "[calc(100vw - token(spacing.layout.pageGap) * 2)]",
+    maxWidth: "[calc(token(sizes.overlay.palette) + token(spacing.menu.inset) * 2 + 2px)]",
     padding: "menu.inset",
     border: "1px solid token(colors.border.divider)",
     borderRadius: "shell",
     background: "bg.modalShell",
-    backdropFilter: "blur(token(blurs.modalShell))",
+    backdropFilter: "[blur(token(blurs.modalShell))]",
     color: "fg.primary",
     textStyle: "body",
-    outline: "none",
+    outline: "0",
     transform: "translateX(-50%)",
-    transitionProperty: "opacity",
+    transitionProperty: "[opacity]",
     transitionDuration: "fast",
-    "&[data-starting-style], &[data-ending-style]": { opacity: "0" },
-    _motionReduce: { transition: "none" },
+    "&[data-starting-style], &[data-ending-style]": { opacity: "[0]" },
+    _motionReduce: { transition: "[none]" },
     _phone: { top: "layout.pageGap" },
     "& > [cmdk-root]": {
         display: "flex",
@@ -59,21 +60,11 @@ const popup = css({
         border: "1px solid token(colors.border.divider)",
         borderRadius: "inset",
         background: "bg.modalSheet",
-        backdropFilter: "blur(token(blurs.modalSheet))",
+        backdropFilter: "[blur(token(blurs.modalSheet))]",
         boxShadow: "soft",
     },
 });
-const visuallyHidden = css({
-    position: "absolute",
-    width: "1px",
-    height: "1px",
-    padding: "none",
-    margin: "-1px",
-    overflow: "hidden",
-    clip: "rect(0, 0, 0, 0)",
-    whiteSpace: "nowrap",
-    border: "0",
-});
+const visuallyHidden = css({ srOnly: true });
 const field = css({
     display: "flex",
     alignItems: "center",
@@ -85,7 +76,7 @@ const field = css({
     "& > input": {
         flex: "1",
         minWidth: "0",
-        height: "100%",
+        height: "full",
         border: "0",
         outline: "0",
         background: "transparent",
@@ -104,7 +95,7 @@ const divider = css({
     background: "border.divider",
 });
 const list = css({
-    maxHeight: "min(60dvh, 420px)",
+    maxHeight: "[min(60dvh, 420px)]",
     overflowY: "auto",
     overscrollBehavior: "contain",
     padding: "panel.compact",
@@ -134,18 +125,19 @@ const row = css({
     lineHeight: "tight",
     cursor: "pointer",
     "&[data-selected=true]": {
-        background: "token(gradients.selected)",
-        boxShadow: "inset 0 0 0 1px token(colors.border.divider)",
+        background: "[token(gradients.selected)]",
+        boxShadow: "[inset 0 0 0 1px token(colors.border.divider)]",
     },
-    "& > svg": { flexShrink: "0", color: "fg.muted" },
-    "& > [data-label]": {
+    // A link row's content sits in its anchor and lays out as a plain row's does.
+    "& > svg, & > [data-row-link] > svg": { flexShrink: "0", color: "fg.muted" },
+    "& > [data-label], & > [data-row-link] > [data-label]": {
         flexShrink: "0",
-        maxWidth: "60%",
+        maxWidth: "[60%]",
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
     },
-    "& > [data-detail]": {
+    "& > [data-detail], & > [data-row-link] > [data-detail]": {
         flex: "1",
         minWidth: "0",
         overflow: "hidden",
@@ -154,48 +146,25 @@ const row = css({
         color: "fg.subtle",
         fontSize: "code",
     },
-    "& > [data-kind]": {
+    "& > [data-kind], & > [data-row-link] > [data-kind]": {
         flexShrink: "0",
         marginInlineStart: "auto",
         color: "fg.subtle",
         fontSize: "code",
     },
     "& > [data-shortcut]": { marginInlineStart: "auto" },
-    // A link row's anchor fills the row, so its content lays out as a plain row's does. Choosing
-    // the row clicks it, so it takes no pointer of its own and never navigates twice.
+    // The anchor fills the row. Choosing the row clicks it, so it takes no pointer of its own and
+    // never navigates twice.
     "& > [data-row-link]": {
         pointerEvents: "none",
         display: "flex",
         alignItems: "center",
-        gap: "inherit",
+        gap: "[inherit]",
         flex: "1",
         minWidth: "0",
         alignSelf: "stretch",
-        color: "inherit",
+        color: "[inherit]",
         textDecoration: "none",
-        "& > svg": { flexShrink: "0", color: "fg.muted" },
-        "& > [data-label]": {
-            flexShrink: "0",
-            maxWidth: "60%",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-        },
-        "& > [data-detail]": {
-            flex: "1",
-            minWidth: "0",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            color: "fg.subtle",
-            fontSize: "code",
-        },
-        "& > [data-kind]": {
-            flexShrink: "0",
-            marginInlineStart: "auto",
-            color: "fg.subtle",
-            fontSize: "code",
-        },
     },
 });
 const emptyRow = css({
@@ -204,7 +173,6 @@ const emptyRow = css({
     color: "fg.muted",
     fontSize: "caption",
 });
-// How to drive the palette from the keyboard, and what it searches.
 const footer = css({
     display: "flex",
     alignItems: "center",
@@ -238,7 +206,6 @@ function CommandMenuShortcuts({ items, run, }) {
         : []));
     return null;
 }
-/** The keys the palette's footer names, as its keycaps write them. */
 const escapeKey = formatForDisplay("Escape");
 const moveKeys = [formatForDisplay("ArrowUp"), formatForDisplay("ArrowDown")];
 const openKey = formatForDisplay("Enter");
@@ -249,7 +216,7 @@ const menuRowHeight = 40;
 // The rows lie over a box as tall as all of them, each moved down to its place.
 const virtualLines = css({
     position: "relative",
-    "& > *": { position: "absolute", top: "0", insetInline: "0" },
+    "& > *": { position: "absolute", top: "none", insetInline: "none" },
 });
 /** Every word of the query matches the row's label, detail or keywords (`scoreCommandMatch`). */
 function matchesQuery(item, query) {
@@ -289,15 +256,10 @@ export function CommandMenu({ open, onOpenChange, query, onQueryChange, groups,
         const before = focusedBeforeOpen.current;
         return before?.isConnected ? before : true;
     };
-    const setOpen = (next) => {
-        if (!next)
-            onQueryChange("");
-        onOpenChange(next);
-    };
     const links = useRef(new Map());
     const run = (item) => {
         ranItem.current = true;
-        setOpen(false);
+        onOpenChange(false);
         // A link row navigates through its anchor, so a router's link handles it as a click.
         const link = links.current.get(item.id);
         if (link)
@@ -330,12 +292,24 @@ export function CommandMenu({ open, onOpenChange, query, onQueryChange, groups,
         overscan: 8,
         enabled: virtualized,
     });
-    const [chosenId, setChosenId] = useState("");
-    const selectedId = shownItems.some((item) => item.id === chosenId)
-        ? chosenId
+    // The row the reader moved to for this query; the first row until they do, and again once they
+    // type.
+    const [chosen, setChosen] = useState({ id: "", query: "" });
+    const chooseRow = (id) => setChosen({ id, query });
+    const selectedId = chosen.query === query && shownItems.some((item) => item.id === chosen.id)
+        ? chosen.id
         : (shownItems[0]?.id ?? "");
+    // cmdk names the highlighted row on the field only once an arrow has moved it, so the field
+    // takes the row's id from the drawn list instead, again whenever the rows are drawn anew.
+    const [highlightedRowElementId, setHighlightedRowElementId] = useState();
+    const drawnVirtualRows = virtualizer.getVirtualItems();
+    useLayoutEffect(() => {
+        const row = listElement?.querySelector(`[data-command-item-id="${CSS.escape(selectedId)}"]`);
+        setHighlightedRowElementId(row?.id || undefined);
+    }, [listElement, selectedId, query, groups, drawnVirtualRows]);
     const moveSelection = (event) => {
-        if (!virtualized)
+        // While an input method composes, its keys pick a candidate, not a row.
+        if (!virtualized || event.nativeEvent.isComposing)
             return;
         const index = shownItems.findIndex((item) => item.id === selectedId);
         const last = shownItems.length - 1;
@@ -364,16 +338,21 @@ export function CommandMenu({ open, onOpenChange, query, onQueryChange, groups,
         if (!item)
             return;
         event.preventDefault();
-        setChosenId(item.id);
+        chooseRow(item.id);
         virtualizer.scrollToIndex(lines.findIndex((line) => line.key === item.id), { align: "auto" });
     };
-    const drawItem = (item, measured) => (_jsxs(Command.Item, { ref: measured?.ref, "data-index": measured?.index, style: measured?.style, value: item.id, className: row, onSelect: () => run(item), children: [item.href !== undefined || item.render !== undefined ? (_jsx(CommandMenuLink, { item: item, register: (element) => {
+    const drawItem = (item, measured) => (_jsxs(Command.Item, { ref: measured?.ref, "data-index": measured?.index, style: measured?.style, value: item.id, className: row, "data-command-item-id": item.id, onSelect: () => run(item), children: [item.href !== undefined || item.render !== undefined ? (_jsx(CommandMenuLink, { item: item, register: (element) => {
                     if (element)
                         links.current.set(item.id, element);
                     else
                         links.current.delete(item.id);
                 } })) : (_jsx(CommandMenuRowContent, { item: item })), item.shortcut && _jsx(ShortcutHint, { boxed: true, "data-shortcut": "", hotkey: item.shortcut })] }, item.id));
-    return (_jsx(BaseDialog.Root, { open: open, onOpenChange: setOpen, children: _jsx(BaseDialog.Portal, { children: _jsxs(HotkeyLayer, { children: [_jsx(CommandMenuShortcuts, { items: shownGroups.flatMap((group) => group.items), run: run }), _jsx(BaseDialog.Backdrop, { className: backdrop, "data-ciridae-ui": "" }), _jsxs(BaseDialog.Popup, { className: popup, "data-ciridae-ui": "", ref: popupRef, finalFocus: restoreFocus, children: [_jsx(BaseDialog.Title, { className: visuallyHidden, children: title }), _jsxs(Command, { label: title, shouldFilter: false, loop: true, ...(virtualized ? { value: selectedId, onValueChange: setChosenId } : {}), onKeyDown: moveSelection, children: [_jsxs("div", { className: field, children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), _jsx(Command.Input, { autoFocus: true, placeholder: placeholder, value: query, onValueChange: onQueryChange }), _jsx(Keycap, { "aria-hidden": "true", children: escapeKey })] }), _jsx("div", { className: divider }), _jsxs(Command.List, { ref: setListElement, className: list, children: [!matched && (_jsx("div", { className: emptyRow, role: "presentation", children: empty })), virtualized ? (_jsx("div", { className: virtualLines, style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((virtualItem) => {
+    return (_jsx(BaseDialog.Root, { open: open, onOpenChange: onOpenChange, 
+        // However it closes, by its own keys or by the host's toggle, the next open starts empty.
+        onOpenChangeComplete: (isOpen) => {
+            if (!isOpen)
+                onQueryChange("");
+        }, children: _jsx(BaseDialog.Portal, { children: _jsxs(HotkeyLayer, { children: [_jsx(CommandMenuShortcuts, { items: shownGroups.flatMap((group) => group.items), run: run }), _jsx(BaseDialog.Backdrop, { className: backdrop, "data-ciridae-ui": "" }), _jsxs(BaseDialog.Popup, { className: popup, "data-ciridae-ui": "", ref: popupRef, finalFocus: restoreFocus, children: [_jsx(BaseDialog.Title, { className: visuallyHidden, children: title }), _jsxs(Command, { label: title, shouldFilter: false, loop: true, value: selectedId, onValueChange: chooseRow, onKeyDown: moveSelection, children: [_jsxs("div", { className: field, children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), _jsx(Command.Input, { asChild: true, autoFocus: true, placeholder: placeholder, value: query, onValueChange: onQueryChange, children: _jsx("input", { "aria-activedescendant": highlightedRowElementId }) }), _jsx(Keycap, { "aria-hidden": "true", children: escapeKey })] }), _jsx("div", { className: divider }), _jsxs(Command.List, { ref: setListElement, className: list, children: [!matched && (_jsx("div", { className: emptyRow, role: "presentation", children: empty })), virtualized ? (_jsx("div", { className: virtualLines, style: { height: virtualizer.getTotalSize() }, children: drawnVirtualRows.map((virtualItem) => {
                                                     const line = lines[virtualItem.index];
                                                     if (!line)
                                                         return null;

package/dist/components/command-palette.js

@@ -15,6 +15,7 @@ import { useHotkey } from "./hotkeys.js";
 import { icon } from "./icon.js";
 import { ShortcutHint } from "./keycap.js";
 import { useCiridaeLocale } from "./locale.js";
+import { Tooltip } from "./overlays.js";
 /** Whether the palette is open; `hotkey` (Cmd/Ctrl+K by default) toggles it from anywhere. */
 export function useCommandPalette({ hotkey = "Mod+K" } = {}) {
     const { labels } = useCiridaeLocale();
@@ -54,7 +55,7 @@ const trigger = css({
     display: "flex",
     alignItems: "center",
     gap: "control.iconGap",
-    width: "100%",
+    width: "full",
     height: "control.sidebarSearch",
     paddingInlineStart: "control.compactInline",
     paddingInlineEnd: "control.block",
@@ -82,5 +83,7 @@ const trigger = css({
 /** A search field's face, as a button that opens the palette; reads "Search" unless given text. */
 export function CommandPaletteTrigger({ hotkey = "Mod+K", compact = false, className, children, ...props }) {
     const { labels } = useCiridaeLocale();
-    return (_jsxs("button", { type: "button", "aria-haspopup": "dialog", "aria-label": compact ? labels.common.search : undefined, ...props, className: cx(trigger, className), "data-ciridae-ui": "", "data-compact": compact || undefined, children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), !compact && (_jsxs(_Fragment, { children: [children ?? labels.common.search, _jsx(ShortcutHint, { boxed: true, "data-shortcut": "", hotkey: hotkey })] }))] }));
+    const button = (_jsxs("button", { type: "button", "aria-haspopup": "dialog", "aria-label": compact ? labels.common.search : undefined, ...props, className: cx(trigger, className), "data-ciridae-ui": "", "data-compact": compact || undefined, children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), !compact && (_jsxs(_Fragment, { children: [children ?? labels.common.search, _jsx(ShortcutHint, { boxed: true, "data-shortcut": "", hotkey: hotkey })] }))] }));
+    // The rail's icon-only search names itself on hover and focus, as the rail's other icons do.
+    return compact ? (_jsx(Tooltip, { content: labels.common.search, side: "inline-end", children: button })) : (button);
 }

package/dist/components/copyable-id.js

@@ -69,7 +69,7 @@ const inlineCopy = css({
     padding: "none",
     border: "0",
     background: "transparent",
-    color: "inherit",
+    color: "[inherit]",
     cursor: "pointer",
     _hover: { color: "fg.primary" },
     _focusVisible: { focusRing: "outer", borderRadius: "control" },
@@ -108,7 +108,7 @@ const copyableText = css({
     "&:hover > button, &:focus-within > button, & > button[data-copied]": {
         width: "auto",
         marginInlineStart: "control.iconGap",
-        opacity: "1",
+        opacity: "[1]",
     },
     "&:hover > span > span": {
         transform: "translateX(calc(var(--marquee-shift, 0px) * -1))",
@@ -121,11 +121,11 @@ const marqueeBox = css({
     whiteSpace: "nowrap",
     "& > span": {
         display: "inline-block",
-        transitionProperty: "transform",
+        transitionProperty: "[transform]",
         transitionTimingFunction: "linear",
         transitionDuration: "var(--marquee-duration, 0s)",
     },
-    _motionReduce: { "& > span": { transitionDuration: "0s" } },
+    _motionReduce: { "& > span": { transitionDuration: "[0s]" } },
 });
 const copyTextButton = css({
     display: "inline-flex",
@@ -137,7 +137,7 @@ const copyTextButton = css({
     cursor: "pointer",
     width: "0",
     overflow: "hidden",
-    opacity: "0",
+    opacity: "[0]",
     _hover: { color: "fg.primary" },
     _focusVisible: { focusRing: "outer" },
 });

package/dist/components/data-display.d.ts

@@ -23,7 +23,6 @@ export declare function Avatar({ label, src, size, kind, icon, badge, color, cla
     badge?: ReactNode;
     color?: AvatarColor;
 }): import("react").JSX.Element;
-/** The slot where an owner's avatar goes, before anyone owns the record. */
 export declare function UnassignedAvatar({ size, className, ...props }: ComponentProps<"span"> & {
     size?: "small" | "owner" | "row";
 }): import("react").JSX.Element;
@@ -54,7 +53,6 @@ export declare function CodeBlock({ className, copy, copyLabel, ...props }: Comp
     copy?: string;
     copyLabel?: string;
 }): import("react").JSX.Element;
-/** Where a field's value came from, or who vouches for it: a 14px icon and a line. */
 export type DetailFieldNote = {
     icon?: ReactNode;
     label: ReactNode;
@@ -62,17 +60,13 @@ export type DetailFieldNote = {
 export type DetailFieldProps = Omit<ComponentProps<"div">, "children"> & {
     label: ReactNode;
     value: ReactNode;
-    /** Where the value came from, such as "Net 30 from Aug 22". */
     source?: DetailFieldNote;
-    /** Who or what vouches for it, such as "Checked by Dana R.". */
     assurance?: DetailFieldNote;
-    /** Beside the value, such as a Contested badge; its line under the value is `description`. */
     badge?: ReactNode;
     description?: ReactNode;
-    /** A trailing button, such as Resolve. */
     action?: ReactNode;
     state?: "default" | "selected" | "inset" | "highlighted";
-    /** A hairline under the row; the last row of a list leaves it out. Defaults to true. */
+    /** A hairline under the row; the last row of a list leaves it out. */
     divider?: boolean;
 };
 export declare function DetailField({ label, value, source, assurance, badge, description, action, state, divider, className, ...props }: DetailFieldProps): import("react").JSX.Element;