@crisp-ui-kit/crisp 0.33.0 → 0.33.2

package/dist/cjs/components/button/button.recipe.js

@@ -1,26 +1,99 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonRecipe = void 0;
+exports.spec = exports.buttonRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
-const config = (0, core_1.defineRecipe)({
+const spec = (0, core_1.defineSpec)({
     name: "button",
-    base: `display: inline-flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1.5"]}; font-family: ${tokens_1.contract.font.sans}; font-weight: ${tokens_1.contract.weight.medium}; letter-spacing: -0.14px; line-height: 20px; white-space: nowrap; border: none; cursor: pointer; transition: background-color .2s, box-shadow .2s, color .2s; &:disabled { opacity: 0.5; cursor: not-allowed; }`,
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: tokens_1.contract.space["1.5"],
+        fontFamily: tokens_1.contract.font.sans,
+        fontWeight: tokens_1.contract.weight.medium,
+        letterSpacing: "-0.14px",
+        lineHeight: "20px",
+        whiteSpace: "nowrap",
+        border: "none",
+        cursor: "pointer",
+        transition: "background-color .2s, box-shadow .2s, color .2s",
+    },
+    parts: [
+        { selector: "&:disabled", decls: { opacity: 0.5, cursor: "not-allowed" } },
+    ],
     variants: {
         intent: {
-            primary: `background: ${tokens_1.contract.bgBrandSolid}; color: ${tokens_1.contract.fgOnBrand}; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); &:hover { background: ${tokens_1.contract.bgBrandSolidPressed}; } &:active { background: ${tokens_1.contract.bgBrandSolidPressed}; }`,
-            neutral: `background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgPrimary}; box-shadow: ${tokens_1.elevation.field}; &:hover { background: ${tokens_1.contract.bgRaised}; }`,
-            danger: `background: ${tokens_1.contract.bgDangerSolid}; color: ${tokens_1.contract.fgOnBrand}; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12); &:hover { filter: brightness(0.96); } &:active { filter: brightness(0.92); }`,
-            ghost: `background: transparent; color: ${tokens_1.contract.fgMuted}; box-shadow: none; &:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }`,
+            primary: {
+                decls: {
+                    background: tokens_1.contract.bgBrandSolid,
+                    color: tokens_1.contract.fgOnBrand,
+                    boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08)",
+                },
+                parts: [
+                    { selector: "&:hover", decls: { background: tokens_1.contract.bgBrandSolidPressed } },
+                    {
+                        selector: "&:active",
+                        decls: { background: tokens_1.contract.bgBrandSolidPressed },
+                    },
+                ],
+            },
+            neutral: {
+                decls: {
+                    background: tokens_1.contract.bgSurface,
+                    color: tokens_1.contract.fgPrimary,
+                    boxShadow: tokens_1.elevation.field,
+                },
+                parts: [{ selector: "&:hover", decls: { background: tokens_1.contract.bgRaised } }],
+            },
+            danger: {
+                decls: {
+                    background: tokens_1.contract.bgDangerSolid,
+                    color: tokens_1.contract.fgOnBrand,
+                    boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12)",
+                },
+                parts: [
+                    { selector: "&:hover", decls: { filter: "brightness(0.96)" } },
+                    { selector: "&:active", decls: { filter: "brightness(0.92)" } },
+                ],
+            },
+            ghost: {
+                decls: {
+                    background: "transparent",
+                    color: tokens_1.contract.fgMuted,
+                    boxShadow: "none",
+                },
+                parts: [
+                    {
+                        selector: "&:hover",
+                        decls: { background: tokens_1.contract.bgRaised, color: tokens_1.contract.fgPrimary },
+                    },
+                ],
+            },
         },
         size: {
-            sm: `height: 24px; padding-inline: ${tokens_1.contract.space["1.5"]}; font-size: ${tokens_1.contract.text.md}; border-radius: ${tokens_1.contract.radius.md};`,
-            md: `height: 28px; padding-inline: ${tokens_1.contract.space["2"]}; font-size: ${tokens_1.contract.text.lg}; border-radius: ${tokens_1.contract.radius.md};`,
-            lg: `height: 40px; padding-inline: 14px; font-size: ${tokens_1.contract.text.lg}; border-radius: 10px;`,
+            sm: {
+                height: "24px",
+                paddingInline: tokens_1.contract.space["1.5"],
+                fontSize: tokens_1.contract.text.md,
+                borderRadius: tokens_1.contract.radius.md,
+            },
+            md: {
+                height: "28px",
+                paddingInline: tokens_1.contract.space["2"],
+                fontSize: tokens_1.contract.text.lg,
+                borderRadius: tokens_1.contract.radius.md,
+            },
+            lg: {
+                height: "40px",
+                paddingInline: "14px",
+                fontSize: tokens_1.contract.text.lg,
+                borderRadius: "10px",
+            },
         },
         shape: {
-            text: ``,
-            icon: `padding-inline: 0; aspect-ratio: 1 / 1;`,
+            text: {},
+            icon: { paddingInline: 0, aspectRatio: "1 / 1" },
         },
         // Opt-in hit-area expansion (crisp/#62): none of sm/md/lg reaches the
         // 44x44 touch-target minimum (Apple HIG / Material), and enlarging the
@@ -30,8 +103,27 @@ const config = (0, core_1.defineRecipe)({
         // Opt-in rather than always-on: an always-on overlay would swallow
         // clicks meant for a neighbour in a toolbar packed tighter than 44px.
         touchTarget: {
-            true: `position: relative; &::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-width: 44px; min-height: 44px; }`,
-            false: ``,
+            true: {
+                decls: { position: "relative" },
+                parts: [
+                    {
+                        slot: "hitArea",
+                        selector: "&::after",
+                        decls: {
+                            content: '""',
+                            position: "absolute",
+                            top: "50%",
+                            left: "50%",
+                            transform: "translate(-50%, -50%)",
+                            width: "100%",
+                            height: "100%",
+                            minWidth: "44px",
+                            minHeight: "44px",
+                        },
+                    },
+                ],
+            },
+            false: {},
         },
     },
     defaultVariants: {
@@ -40,9 +132,8 @@ const config = (0, core_1.defineRecipe)({
         shape: "text",
         touchTarget: false,
     },
-    compoundVariants: [],
-});
-exports.buttonRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
-    config,
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.buttonRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
 exports.default = config;

package/dist/cjs/components/datatable/datatable.js

@@ -155,7 +155,7 @@ function renderTyped(col, value, avatarTone, display) {
     }
 }
 const CHECK_W = 40;
-function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
+function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement = (count) => count === 0 ? "Selection cleared" : `${count} selected`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
     ? `${total} ${total === 1 ? "row" : "rows"}`
     : `${shown} of ${total}`, toolbar, className, reorderRowLabel = "Reorder row", ...rest }) {
     const [query, setQuery] = React.useState("");
@@ -234,6 +234,18 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
         if (!selectedIds)
             setInternalSel(next);
     }, [onSelectionChange, selectedIds]);
+    // The selection is announced from a region that is part of the table and
+    // outlives every selection, because a consumer's own bulk bar (mounted only
+    // once something is picked) cannot announce its own arrival (#234).
+    // Derived by adjusting state during render rather than in an effect: it
+    // must not fire on mount — nobody has selected anything yet — and it has to
+    // cover a `selectedIds` change the consumer makes as well as a click here.
+    const prevSelectedCount = React.useRef(selected.size);
+    const [selectionText, setSelectionText] = React.useState("");
+    if (prevSelectedCount.current !== selected.size) {
+        prevSelectedCount.current = selected.size;
+        setSelectionText(selectionAnnouncement(selected.size));
+    }
     const [editing, setEditing] = React.useState(null);
     const [scrolledX, setScrolledX] = React.useState(false);
     // column widths (drag-to-resize) + fixed-layout sizing
@@ -464,7 +476,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             return dir === "asc" ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
         return ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: gridRef, className: (0, datatable_recipe_1.datatableRecipe)({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(filterable || showCount || toolbar || columnMenu) && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-datatable-toolbar", children: [columnMenu && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-viewsettings", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-group-label", children: "Columns" }), allColumns.map((c) => ((0, jsx_runtime_1.jsxs)(menu_1.MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), (0, jsx_runtime_1.jsxs)(table_1.Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: gridRef, className: (0, datatable_recipe_1.datatableRecipe)({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), (filterable || showCount || toolbar || columnMenu) && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-datatable-toolbar", children: [columnMenu && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "start", trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-viewsettings", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), "View settings"] }), children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-datatable-group-label", children: "Columns" }), allColumns.map((c) => ((0, jsx_runtime_1.jsxs)(menu_1.MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-count", children: countLabel(rows.length, data.length) })), toolbar] })), (0, jsx_runtime_1.jsxs)(table_1.Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
                     onScroll: (e) => setScrolledX(e.currentTarget.scrollLeft > 0),
                     ...(scrolledX ? { "data-scrolled-x": "" } : {}),
                 }, children: [(0, jsx_runtime_1.jsxs)("colgroup", { children: [showGrip && (0, jsx_runtime_1.jsx)("col", { style: { width: GRIP_W } }), selectable && (0, jsx_runtime_1.jsx)("col", { style: { width: CHECK_W } }), columns.map((col) => ((0, jsx_runtime_1.jsx)("col", { style: { width: colWidth(col) } }, col.key)))] }), (0, jsx_runtime_1.jsx)(table_1.TableHeader, { children: (0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "crisp-datatable-col-grip", ...stickyCol(-2) })), selectable && ((0, jsx_runtime_1.jsx)(table_1.TableHead, { className: "crisp-datatable-col-check", ...stickyCol(-1), children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-check", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": selectAllLabel, checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) })), columns.map((col, i) => {

package/dist/cjs/components/datatable/datatable.recipe.js

@@ -18,6 +18,11 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
     & .crisp-datatable-count { margin-inline-start: auto; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
 /* The header cell has no padding of its own -- the button owns the
+    /* announced, never drawn */
+    & .crisp-datatable-live {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
        full cell so the whole header is clickable (its own inset is 12px).
        Mirrors the summary-row fix. */
     & th { padding: 0; }

package/dist/cjs/components/switch/switch.recipe.js

@@ -1,28 +1,58 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.switchRecipe = void 0;
+exports.spec = exports.switchRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
 // A settings toggle, measured from the live app: a 24×16 pill track that
 // flips from a muted grey to brand blue (#266df0), with a 12px white thumb
 // (2px inset) that slides 8px across. background + transform both animate .2s.
-const config = (0, core_1.defineRecipe)({
+const spec = (0, core_1.defineSpec)({
     name: "switch",
-    base: `
-    display: inline-flex; align-items: center; flex-shrink: 0; width: 24px; height: 16px; padding: 0; margin: 0;
-    border: none; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent);
-    cursor: pointer; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent;
-    & .crisp-switch-thumb { width: 12px; height: 12px; margin: 0 2px; border-radius: ${tokens_1.contract.radius.full}; background: #fff; transition: transform .2s ease; }
-    &[data-checked] { background: ${tokens_1.contract.bgBrandSolid}; }
-    &[data-checked] .crisp-switch-thumb { transform: translateX(8px); }
-    &:focus-visible { outline: 2px solid ${tokens_1.contract.bgBrandSolid}; outline-offset: 2px; }
-    &:disabled { opacity: 0.5; cursor: not-allowed; }
-  `,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
-});
-exports.switchRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
-    config,
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        flexShrink: 0,
+        width: "24px",
+        height: "16px",
+        padding: 0,
+        margin: 0,
+        border: "none",
+        borderRadius: tokens_1.contract.radius.full,
+        background: `color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent)`,
+        cursor: "pointer",
+        transition: "background-color .2s ease",
+        WebkitTapHighlightColor: "transparent",
+    },
+    parts: [
+        {
+            slot: "thumb",
+            selector: "& .crisp-switch-thumb",
+            decls: {
+                width: "12px",
+                height: "12px",
+                margin: "0 2px",
+                borderRadius: tokens_1.contract.radius.full,
+                background: "#fff",
+                transition: "transform .2s ease",
+            },
+        },
+        { selector: "&[data-checked]", decls: { background: tokens_1.contract.bgBrandSolid } },
+        {
+            slot: "thumb",
+            selector: "&[data-checked] .crisp-switch-thumb",
+            decls: { transform: "translateX(8px)" },
+        },
+        {
+            selector: "&:focus-visible",
+            decls: {
+                outline: `2px solid ${tokens_1.contract.bgBrandSolid}`,
+                outlineOffset: "2px",
+            },
+        },
+        { selector: "&:disabled", decls: { opacity: 0.5, cursor: "not-allowed" } },
+    ],
 });
+exports.spec = spec;
+const config = (0, core_1.specToRecipe)(spec);
+exports.switchRecipe = Object.assign((0, core_1.resolveRecipe)(config), { config });
 exports.default = config;

package/dist/columncalc.css

@@ -1,11 +1,7 @@
 .crisp-columncalc {
-  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans);
-/* Menu wraps its trigger in a flex div that sizes to content, which would
-       shrink the button back to its text. Make the wrapper fill too, so the
-       whole cell stays clickable. */
+  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would shrink the button back to its text. Make the wrapper fill too, so the whole cell stays clickable. */
     & .crisp-menu { width: 100%; height: 100%; }
-        /* No radius: the trigger fills the cell, so rounding its own corners
-       leaves the cell's background showing through at the four corners as
+    /* No radius: the trigger fills the cell, so rounding its own corners leaves the cell's background showing through at the four corners as
        soon as the hover tint paints. Everything else that fills a grid cell
        agrees -- recordstable-sum-btn, the same summary trigger, declares no
        radius, and datatable-grip and the embedded pickers zero theirs. An 8px

package/dist/columncalc.layered.css

@@ -1,12 +1,8 @@
 @layer crisp-components {
 .crisp-columncalc {
-  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans);
-/* Menu wraps its trigger in a flex div that sizes to content, which would
-       shrink the button back to its text. Make the wrapper fill too, so the
-       whole cell stays clickable. */
+  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would shrink the button back to its text. Make the wrapper fill too, so the whole cell stays clickable. */
     & .crisp-menu { width: 100%; height: 100%; }
-        /* No radius: the trigger fills the cell, so rounding its own corners
-       leaves the cell's background showing through at the four corners as
+    /* No radius: the trigger fills the cell, so rounding its own corners leaves the cell's background showing through at the four corners as
        soon as the hover tint paints. Everything else that fills a grid cell
        agrees -- recordstable-sum-btn, the same summary trigger, declares no
        radius, and datatable-grip and the embedded pickers zero theirs. An 8px

package/dist/command.css

@@ -1,14 +1,13 @@
 .crisp-command {
-  display: contents; font-family: var(--crisp-font-sans)
-  ; & .crisp-command-content, & .crisp-command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
-  & .crisp-command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }
-  & .crisp-command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--crisp-space-4) var(--crisp-space-4); }
-  & .crisp-command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-2xl); background: color-mix(in srgb, var(--crisp-bg-overlay-frost) 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px var(--crisp-shadow-overlay1), 0 18px 88px -4px var(--crisp-shadow-overlay2), 0 0 1px var(--crisp-shadow-overlay3); opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
-  & .crisp-command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
-  & .crisp-command-control { display: flex; align-items: center; gap: var(--crisp-space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
-  & .crisp-command-control svg { flex-shrink: 0; }
-  /* The palette's label element. It exists for the assistive tree only: zag's
-     combobox names the input through it and points the listbox's
+  display: contents; font-family: var(--crisp-font-sans) ;
+    & .crisp-command-content, & .crisp-command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+    & .crisp-command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }
+    & .crisp-command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--crisp-space-4) var(--crisp-space-4); }
+    & .crisp-command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-2xl); background: color-mix(in srgb, var(--crisp-bg-overlay-frost) 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px var(--crisp-shadow-overlay1), 0 18px 88px -4px var(--crisp-shadow-overlay2), 0 0 1px var(--crisp-shadow-overlay3); opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .crisp-command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
+    & .crisp-command-control { display: flex; align-items: center; gap: var(--crisp-space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
+    & .crisp-command-control svg { flex-shrink: 0; }
+    /* The palette's label element. It exists for the assistive tree only: zag's combobox names the input through it and points the listbox's
      aria-labelledby at it, and without it both were unnamed and the reference
      resolved to nothing (#225). Clipped rather than display:none, which would
      take it out of the tree it exists for. */
@@ -30,7 +29,6 @@
   & .crisp-command-footer-action:disabled { opacity: 0.5; cursor: default; }
   & .crisp-command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   & .crisp-command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: rgba(255,255,255,0.22); font-size: var(--crisp-text-xs); }
-  
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/command.layered.css

@@ -1,15 +1,14 @@
 @layer crisp-components {
 .crisp-command {
-  display: contents; font-family: var(--crisp-font-sans)
-  ; & .crisp-command-content, & .crisp-command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
-  & .crisp-command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }
-  & .crisp-command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--crisp-space-4) var(--crisp-space-4); }
-  & .crisp-command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-2xl); background: color-mix(in srgb, var(--crisp-bg-overlay-frost) 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px var(--crisp-shadow-overlay1), 0 18px 88px -4px var(--crisp-shadow-overlay2), 0 0 1px var(--crisp-shadow-overlay3); opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
-  & .crisp-command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
-  & .crisp-command-control { display: flex; align-items: center; gap: var(--crisp-space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
-  & .crisp-command-control svg { flex-shrink: 0; }
-  /* The palette's label element. It exists for the assistive tree only: zag's
-     combobox names the input through it and points the listbox's
+  display: contents; font-family: var(--crisp-font-sans) ;
+    & .crisp-command-content, & .crisp-command-card { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+    & .crisp-command-backdrop { position: fixed; inset: 0; z-index: 50; background: transparent; }
+    & .crisp-command-positioner { position: fixed; inset: 0; z-index: 51; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--crisp-space-4) var(--crisp-space-4); }
+    & .crisp-command-content { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-width: 748px; max-height: 70vh; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-2xl); background: color-mix(in srgb, var(--crisp-bg-overlay-frost) 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px var(--crisp-shadow-overlay1), 0 18px 88px -4px var(--crisp-shadow-overlay2), 0 0 1px var(--crisp-shadow-overlay3); opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .crisp-command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
+    & .crisp-command-control { display: flex; align-items: center; gap: var(--crisp-space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
+    & .crisp-command-control svg { flex-shrink: 0; }
+    /* The palette's label element. It exists for the assistive tree only: zag's combobox names the input through it and points the listbox's
      aria-labelledby at it, and without it both were unnamed and the reference
      resolved to nothing (#225). Clipped rather than display:none, which would
      take it out of the tree it exists for. */
@@ -31,7 +30,6 @@
   & .crisp-command-footer-action:disabled { opacity: 0.5; cursor: default; }
   & .crisp-command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   & .crisp-command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: rgba(255,255,255,0.22); font-size: var(--crisp-text-xs); }
-  
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/datatable.css

@@ -7,30 +7,26 @@
     & .crisp-datatable-search input::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-datatable-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-/* The header cell has no padding of its own -- the button owns the
-       full cell so the whole header is clickable (its own inset is 12px).
-       Mirrors the summary-row fix. */
+    /* The header cell has no padding of its own -- the button owns the /* announced, never drawn */
+    & .crisp-datatable-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    full cell so the whole header is clickable (its own inset is 12px). Mirrors the summary-row fix. */
     & th { padding: 0; }
-/* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger):
+    /* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger):
        Menu wraps its trigger in a flex div that sizes to its content, so a
        long header grew past the column instead of filling it -- with nothing
-       left to squeeze, the label's own ellipsis CSS (below) had no properly
-       -sized box to truncate against, and the th's own overflow hard-clipped
-       it with no "...". Fill the wrapper, scoped to th so Menu's default
-       (correct everywhere else) is untouched. */
+       left to squeeze, the label's own ellipsis CSS (below) had no properly -sized box to truncate against, and the th's own overflow hard-clipped
+       it with no "...". Fill the wrapper, scoped to th so Menu's default (correct everywhere else) is untouched. */
     & th .crisp-menu { width: 100%; height: 100%; }
     & .crisp-datatable-th-inner { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; min-width: 0; height: 100%; }
     & .crisp-datatable-th-inner > svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-/* The summary cell has NO padding of its own -- the calculation trigger
-       owns the whole 246x37 area so a click anywhere in the cell opens the
-       menu. Zero the cell's inset and let ColumnCalc supply the 12px. */
+    /* The summary cell has NO padding of its own -- the calculation trigger owns the whole 246x37 area so a click anywhere in the cell opens the menu. Zero the cell's inset and let ColumnCalc supply the 12px. */
     & tfoot td { padding: 0; }
 /* Group heading row -- a view is grouped under a subtle label with the
        bucket's count beside it. */
-& .crisp-datatable-viewsettings { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-datatable-viewsettings { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-datatable-viewsettings:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-datatable-group-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
-        & .crisp-datatable-group { height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-3); background: var(--crisp-bg-subtle); border-bottom: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-datatable-group { height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-3); background: var(--crisp-bg-subtle); border-bottom: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-datatable-group-count { margin-inline-start: var(--crisp-space-1-5); color: var(--crisp-fg-muted); font-variant-numeric: tabular-nums; }
     & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-1); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); outline: none; }
     & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
@@ -84,13 +80,9 @@
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
     /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
-       a leading 20px grip column, a 16px grip icon, and the row's own
-       hairline doubling as the drop indicator (it tints toward the brand
-       colour as the active drop target). The affordance + geometry are
-       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
+       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
        draggable + dataTransfer, the same one column reorder already uses
-       (RecordsTable's reorderColumn) -- not a proprietary
-       pointer-events implementation. */
+       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }

package/dist/datatable.layered.css

@@ -8,30 +8,26 @@
     & .crisp-datatable-search input::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-datatable-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-/* The header cell has no padding of its own -- the button owns the
-       full cell so the whole header is clickable (its own inset is 12px).
-       Mirrors the summary-row fix. */
+    /* The header cell has no padding of its own -- the button owns the /* announced, never drawn */
+    & .crisp-datatable-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+    full cell so the whole header is clickable (its own inset is 12px). Mirrors the summary-row fix. */
     & th { padding: 0; }
-/* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger):
+    /* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger):
        Menu wraps its trigger in a flex div that sizes to its content, so a
        long header grew past the column instead of filling it -- with nothing
-       left to squeeze, the label's own ellipsis CSS (below) had no properly
-       -sized box to truncate against, and the th's own overflow hard-clipped
-       it with no "...". Fill the wrapper, scoped to th so Menu's default
-       (correct everywhere else) is untouched. */
+       left to squeeze, the label's own ellipsis CSS (below) had no properly -sized box to truncate against, and the th's own overflow hard-clipped
+       it with no "...". Fill the wrapper, scoped to th so Menu's default (correct everywhere else) is untouched. */
     & th .crisp-menu { width: 100%; height: 100%; }
     & .crisp-datatable-th-inner { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; min-width: 0; height: 100%; }
     & .crisp-datatable-th-inner > svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-/* The summary cell has NO padding of its own -- the calculation trigger
-       owns the whole 246x37 area so a click anywhere in the cell opens the
-       menu. Zero the cell's inset and let ColumnCalc supply the 12px. */
+    /* The summary cell has NO padding of its own -- the calculation trigger owns the whole 246x37 area so a click anywhere in the cell opens the menu. Zero the cell's inset and let ColumnCalc supply the 12px. */
     & tfoot td { padding: 0; }
 /* Group heading row -- a view is grouped under a subtle label with the
        bucket's count beside it. */
-& .crisp-datatable-viewsettings { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-datatable-viewsettings { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-datatable-viewsettings:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-datatable-group-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
-        & .crisp-datatable-group { height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-3); background: var(--crisp-bg-subtle); border-bottom: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-datatable-group { height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-3); background: var(--crisp-bg-subtle); border-bottom: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-datatable-group-count { margin-inline-start: var(--crisp-space-1-5); color: var(--crisp-fg-muted); font-variant-numeric: tabular-nums; }
     & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-1); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); outline: none; }
     & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
@@ -85,13 +81,9 @@
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
     /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
-       a leading 20px grip column, a 16px grip icon, and the row's own
-       hairline doubling as the drop indicator (it tints toward the brand
-       colour as the active drop target). The affordance + geometry are
-       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
+       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
        draggable + dataTransfer, the same one column reorder already uses
-       (RecordsTable's reorderColumn) -- not a proprietary
-       pointer-events implementation. */
+       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }