@ciridae/ui 1.0.4 → 1.0.9

package/dist/components/data-display.js

@@ -6,11 +6,7 @@ import { Fragment } from "react";
 import { css, cva, cx } from "#primitives/css";
 import { CopyButton } from "./copyable-id.js";
 import { Skeleton } from "./skeleton.js";
-// The neutral avatar is a person or the agent on the raised glass gradient inside its gradient
-// hairline, an organization the text-colored tile the workspace switcher shows. A colored one
-// derives its fill, text, and border from one `--avatar-hue`, mixed toward the opaque surface or
-// the text color so it holds in both themes. The hues are brighter than the accent tokens so
-// avatars read apart.
+// A colored avatar derives its fill, text, and border from one `--avatar-hue`, mixed toward the opaque surface or the text color so it holds in both themes. The hues are brighter than the accent tokens so avatars read apart.
 const avatar = css({
     display: "inline-grid",
     placeItems: "center",
@@ -23,8 +19,7 @@ const avatar = css({
     fontWeight: "medium",
     lineHeight: "tight",
     position: "relative",
-    // Each hue is the palette's: an accent, or the mix of two for the hues a palette has no accent
-    // for, so avatars follow whichever palette the product picked.
+    // Each hue is the palette's: an accent, or the mix of two for the hues it has no accent for.
     "&[data-color=blue]": { "--avatar-hue": "token(colors.accent.blue)" },
     "&[data-color=violet]": {
         "--avatar-hue": "color-mix(in oklch, token(colors.accent.blue) 55%, token(colors.accent.red))",
@@ -42,41 +37,41 @@ const avatar = css({
     // A person, or the agent: a circle on the glass face, or a pale circle in its hue.
     "&[data-kind=user], &[data-kind=agent]": {
         borderRadius: "round",
-        background: "token(gradients.raised)",
+        background: "[token(gradients.raised)]",
         color: "fg.primary",
     },
     "--edge": "token(gradients.border.raised)",
     "&[data-kind=agent], &[data-icon]": { color: "fg.secondary" },
     // An icon fills the same share of every size, so marks match whatever avatar they sit beside.
-    "&:is([data-kind=agent], [data-icon]) svg": { width: "58%", height: "58%" },
+    "&:is([data-kind=agent], [data-icon]) svg": { width: "[58%]", height: "[58%]" },
     // An icon stands on its own, with no circle or ring, so it fills most of its box.
-    "&[data-icon]": { background: "transparent", "& svg": { width: "80%", height: "80%" } },
+    "&[data-icon]": { background: "transparent", "& svg": { width: "[80%]", height: "[80%]" } },
     "&:is([data-kind=user], [data-kind=agent]):not([data-color=neutral])": {
-        borderColor: "color-mix(in srgb, var(--avatar-hue) 30%, token(colors.bg.surface))",
-        background: "color-mix(in srgb, var(--avatar-hue) 16%, token(colors.bg.surface))",
-        color: "color-mix(in srgb, var(--avatar-hue) 70%, token(colors.fg.primary))",
+        borderColor: "[color-mix(in srgb, var(--avatar-hue) 30%, token(colors.bg.surface))]",
+        background: "[color-mix(in srgb, var(--avatar-hue) 16%, token(colors.bg.surface))]",
+        color: "[color-mix(in srgb, var(--avatar-hue) 70%, token(colors.fg.primary))]",
     },
     // A project: a pale tile edged and lettered in the hue's strong shade.
     "&[data-kind=project]": {
-        borderRadius: "20%",
-        borderColor: "color-mix(in srgb, var(--avatar-hue) 70%, token(colors.bg.surface))",
-        background: "color-mix(in srgb, var(--avatar-hue) 14%, token(colors.bg.surface))",
-        color: "color-mix(in srgb, var(--avatar-hue) 75%, token(colors.fg.primary))",
+        borderRadius: "[20%]",
+        borderColor: "[color-mix(in srgb, var(--avatar-hue) 70%, token(colors.bg.surface))]",
+        background: "[color-mix(in srgb, var(--avatar-hue) 14%, token(colors.bg.surface))]",
+        color: "[color-mix(in srgb, var(--avatar-hue) 75%, token(colors.fg.primary))]",
         fontWeight: "semibold",
     },
     "&[data-kind=project][data-color=neutral]": { "--avatar-hue": "token(colors.fg.muted)" },
     // An organization's logo: a squircle tile, in the text color or in its hue, bold enough to anchor
     // a person or project. Its radius scales with the box, so even a micro badge never turns round.
     "&[data-kind=organization]": {
-        borderRadius: "28%",
+        borderRadius: "[28%]",
         background: "fg.primary",
         color: "bg.canvas",
         fontWeight: "semibold",
     },
     "&[data-kind=organization]:not([data-color=neutral])": {
-        borderColor: "color-mix(in srgb, var(--avatar-hue) 75%, black)",
+        borderColor: "[color-mix(in srgb, var(--avatar-hue) 75%, black)]",
         background: "var(--avatar-hue)",
-        color: "white",
+        color: "[white]",
     },
     // A photo fills the whole box: the fill and edge behind it would show as a ring around it.
     "&[data-kind]:has(img)": { border: "0", background: "transparent" },
@@ -85,13 +80,11 @@ const avatar = css({
         height: "avatar.large",
         fontSize: "body",
     },
-    // A list row's owner, and the workspace switcher's mark.
+    // A list row's owner.
     "&[data-size=row]": { width: "avatar.row", height: "avatar.row" },
-    // A record's owner, and the empty slot where one goes.
     "&[data-size=owner]": { width: "avatar.owner", height: "avatar.owner" },
     // A menu item's leading avatar.
     "&[data-size=menu]": { width: "avatar.menu", height: "avatar.menu" },
-    // The agent standing on its own, the kit's Agent avatar.
     "&[data-size=agent]": { width: "avatar.agent", height: "avatar.agent" },
     "&[data-size=small]": { width: "avatar.small", height: "avatar.small", fontSize: "avatar.small" },
     // The inline mark's size, so a project's tile lines up with icons and provider logos.
@@ -103,20 +96,20 @@ const avatar = css({
 const avatarFallback = css({
     display: "grid",
     placeItems: "center",
-    width: "100%",
-    height: "100%",
+    width: "full",
+    height: "full",
 });
 const avatarImage = css({
-    width: "100%",
-    height: "100%",
-    borderRadius: "inherit",
+    width: "full",
+    height: "full",
+    borderRadius: "[inherit]",
     objectFit: "cover",
 });
 const avatarBadge = css({
     position: "absolute",
     // Inside the circle: an overhang is clipped by scroll containers such as the compact header.
-    insetInlineEnd: "-1px",
-    bottom: "-1px",
+    insetInlineEnd: "[-1px]",
+    bottom: "[-1px]",
     display: "inline-flex",
     // The badge separates with its own edge: a ring would have to match every surface the
     // avatar sits on, and its corners never matched the badge's.
@@ -133,7 +126,6 @@ export function Avatar({ label, src, size = "medium", kind = "user", icon, badge
     const glass = !icon && color === "neutral" && (kind === "user" || kind === "agent");
     return (_jsxs(BaseAvatar.Root, { ...props, "aria-label": label, "data-ciridae-ui": "", "data-size": size, "data-kind": kind, "data-color": color, "data-icon": icon ? "" : undefined, "data-edge": glass ? "gradient" : undefined, className: cx(avatar, className), children: [src && _jsx(BaseAvatar.Image, { src: src, alt: "", className: avatarImage }), _jsx(BaseAvatar.Fallback, { className: avatarFallback, children: icon ?? (kind === "agent" ? _jsx(SparkleIcon, { weight: "fill" }) : initials) }), badge && _jsx("span", { className: avatarBadge, children: badge })] }));
 }
-// No owner yet: the avatar's circle as a dashed ring, empty.
 const unassignedAvatar = css({
     display: "inline-block",
     flexShrink: "0",
@@ -144,7 +136,6 @@ const unassignedAvatar = css({
     "&[data-size=small]": { width: "avatar.small", height: "avatar.small" },
     "&[data-size=row]": { width: "avatar.row", height: "avatar.row" },
 });
-/** The slot where an owner's avatar goes, before anyone owns the record. */
 export function UnassignedAvatar({ size = "owner", className, ...props }) {
     return (_jsx("span", { ...props, className: cx(unassignedAvatar, className), "data-ciridae-ui": "", "data-size": size }));
 }
@@ -158,12 +149,10 @@ function labelInitials(label, count) {
         .toUpperCase();
 }
 const divider = cva({
-    base: { width: "100%", height: "border.hairline", border: "0", background: "border.subtle" },
+    base: { width: "full", height: "border.hairline", border: "0", background: "border.subtle" },
     variants: {
         inset: {
             none: {},
-            // Between a menu's or a popover's groups, as the glass menu's divider: inset to its rows'
-            // text, a little room above and below.
             menu: {
                 width: "auto",
                 marginBlock: "layout.tightGap",
@@ -176,11 +165,6 @@ const divider = cva({
 export function Divider({ inset = "none", className, ...props }) {
     return (_jsx(BaseSeparator, { ...props, "data-ciridae-ui": "", className: cx(divider({ inset }), className) }));
 }
-/*
- * Labels are the muted grey, values the text color. `facts` sets each label against its value at
- * the far edge, a hairline under every row but the last; `compact` is the key-value pair, its
- * labels a 120px column of 12px type.
- */
 const descriptionList = cva({
     base: {
         display: "grid",
@@ -188,7 +172,7 @@ const descriptionList = cva({
         margin: "none",
         "& dt": { color: "fg.label" },
         "& dd": { margin: "none", overflowWrap: "anywhere" },
-        "& a": { color: "inherit" },
+        "& a": { color: "[inherit]" },
     },
     variants: {
         density: {
@@ -206,7 +190,7 @@ const descriptionList = cva({
             facts: {
                 gridTemplateColumns: "minmax(0, 1fr) auto",
                 alignItems: "center",
-                rowGap: "0",
+                rowGap: "none",
                 columnGap: "layout.contentGap",
                 "& dt, & dd": {
                     paddingBlock: "panel.default",
@@ -250,7 +234,7 @@ const codeBlockFrame = css({
     position: "relative",
     minWidth: "0",
     "& > pre": {
-        paddingInlineEnd: "calc(token(sizes.control.compact) + token(spacing.panel.default) * 2)",
+        paddingInlineEnd: "[calc(token(sizes.control.compact) + token(spacing.panel.default) * 2)]",
     },
 });
 const codeBlockCopy = css({
@@ -269,13 +253,7 @@ export function CodeBlock({ className, copy, copyLabel = "text", ...props }) {
         return block;
     return (_jsxs("div", { className: codeBlockFrame, children: [block, _jsx("span", { className: codeBlockCopy, children: _jsx(CopyButton, { value: copy, label: copyLabel }) })] }));
 }
-/*
- * Detail field: one field of a record as a row, the kit's Detail field. A 150px label column of
- * 12px grey beside the 14px value and, under it, where the value came from and who vouches for it,
- * or a description when a badge rides beside the value. `selected` is the open field; `inset`
- * sets it in the selected glass between hairlines; `highlighted` is the warm band for a field that
- * needs a look, such as two sources that disagree.
- */
+/* `highlighted` is the warm band for a field that needs a look, such as two sources that disagree. */
 const detailField = css({
     display: "flex",
     alignItems: "flex-start",
@@ -287,11 +265,11 @@ const detailField = css({
     lineHeight: "tight",
     "&[data-divider]": { borderBottom: "1px solid token(colors.border.divider)" },
     "&[data-state=default]:hover": { background: "bg.rowHover" },
-    "&[data-state=selected]": { background: "token(gradients.selected)" },
+    "&[data-state=selected]": { background: "[token(gradients.selected)]" },
     "&:is([data-state=inset], [data-state=highlighted])": {
         borderBlock: "1px solid token(colors.border.divider)",
     },
-    "&[data-state=inset]": { background: "token(gradients.selected)" },
+    "&[data-state=inset]": { background: "[token(gradients.selected)]" },
     "&[data-state=highlighted]": { background: "bg.warningTint" },
 });
 // The label sits on the value's first line: 14px of text, or the badge's 24.
@@ -299,14 +277,13 @@ const detailFieldLabel = css({
     display: "flex",
     alignItems: "center",
     flexShrink: "0",
-    width: "150px",
-    minHeight: "token(fontSizes.body)",
+    width: "[150px]",
+    minHeight: "[token(fontSizes.body)]",
     color: "fg.label",
     fontSize: "code",
     "[data-badge] > &": { minHeight: "control.shortcut" },
 });
 const detailFieldValue = css({ display: "grid", gap: "control.iconGap", flex: "1", minWidth: "0" });
-// A badge that does not fit beside the value drops under it.
 const detailFieldValueLine = css({
     display: "flex",
     alignItems: "center",

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

@@ -83,7 +83,7 @@ export type DataGridProps<Row extends RowData> = Omit<ComponentProps<"div">, "ch
     data: readonly Row[];
     columns: TableColumns<Row>;
     getRowId: (row: Row) => string;
-    /** `framed` draws the list as a card with sentence-case heads; `plain` sits flush, heads in caps. */
+    /** `framed` draws the list as a card; `plain` sits flush with its section. */
     variant?: "framed" | "plain";
     density?: "default" | "compact";
     sorting?: SortingState;
@@ -91,10 +91,7 @@ export type DataGridProps<Row extends RowData> = Omit<ComponentProps<"div">, "ch
     onSortingChange?: (sorting: SortingState) => void;
     /** The rows arrive in the order `sorting` asks for, such as from a server. */
     manualSorting?: boolean;
-    /**
-     * Shows one page of the sorted rows, `number` counting from 1, for a list paged in the browser
-     * under a `Pagination`. Leave it out when `data` is already the page.
-     */
+    /** `number` counts from 1. Leave it out when `data` is already the page. */
     page?: {
         number: number;
         rowsPerPage: number;
@@ -176,7 +173,7 @@ export type TableProps<Row extends RowData> = Omit<DataGridProps<Row>, "defaultS
     emptyMessage?: ReactNode;
 };
 /**
- * `DataGrid` with the plain look: flush with its section, heads in caps, rows that light on hover
- * when they lead somewhere.
+ * `DataGrid` with the plain look: flush with its section, rows that light on hover when they lead
+ * somewhere.
  */
 export declare function Table<Row extends RowData>({ variant, initialSorting, emptyMessage, ...props }: TableProps<Row>): import("react").JSX.Element;

package/dist/components/data-grid.js

@@ -336,50 +336,57 @@ export function DataGrid({ data, columns, getRowId, variant = "framed", density
         setSelected(range.filter((id) => selectableIds.includes(id)), true);
         anchorRowId.current = rowIds[end] ?? null;
     };
-    useHotkeys([
-        {
-            hotkey: "J",
-            callback: () => moveCursor(1),
-            options: {
-                meta: { group: localeLabels.keyboard.list, name: localeLabels.keyboard.nextRow },
+    // Only a grid that takes the page's list keys registers them: a row's own `enabled` overrides
+    // a shared one, and a disabled hotkey still registers, so two grids would clash.
+    useHotkeys(keyboardNavigation
+        ? [
+            {
+                hotkey: "J",
+                callback: () => moveCursor(1),
+                options: {
+                    meta: { group: localeLabels.keyboard.list, name: localeLabels.keyboard.nextRow },
+                },
             },
-        },
-        {
-            hotkey: "K",
-            callback: () => moveCursor(-1),
-            options: {
-                meta: { group: localeLabels.keyboard.list, name: localeLabels.keyboard.previousRow },
+            {
+                hotkey: "K",
+                callback: () => moveCursor(-1),
+                options: {
+                    meta: { group: localeLabels.keyboard.list, name: localeLabels.keyboard.previousRow },
+                },
             },
-        },
-        {
-            hotkey: "X",
-            callback: toggleCursorRow,
-            options: {
-                enabled: selectable,
-                meta: { group: localeLabels.keyboard.list, name: localeLabels.keyboard.selectRow },
+            {
+                hotkey: "X",
+                callback: toggleCursorRow,
+                options: {
+                    enabled: selectable,
+                    meta: { group: localeLabels.keyboard.list, name: localeLabels.keyboard.selectRow },
+                },
             },
-        },
-        {
-            hotkey: "Shift+X",
-            callback: selectToCursor,
-            options: {
-                enabled: selectable,
-                meta: { group: localeLabels.keyboard.list, name: localeLabels.keyboard.selectRange },
+            {
+                hotkey: "Shift+X",
+                callback: selectToCursor,
+                options: {
+                    enabled: selectable,
+                    meta: { group: localeLabels.keyboard.list, name: localeLabels.keyboard.selectRange },
+                },
             },
-        },
-        {
-            hotkey: "Escape",
-            callback: () => setRowSelection({}),
-            options: {
-                enabled: Object.values(rowSelection).some(Boolean),
-                // Escape in a field is the field's, such as clearing a search.
-                ignoreInputs: true,
-                // The shell's Escape closes its phone menu, which covers the list.
-                conflictBehavior: "allow",
-                meta: { group: localeLabels.keyboard.list, name: localeLabels.keyboard.clearSelection },
+            {
+                hotkey: "Escape",
+                callback: () => setRowSelection({}),
+                options: {
+                    enabled: Object.values(rowSelection).some(Boolean),
+                    // Escape in a field is the field's, such as clearing a search.
+                    ignoreInputs: true,
+                    // The shell's Escape closes its phone menu, which covers the list.
+                    conflictBehavior: "allow",
+                    meta: {
+                        group: localeLabels.keyboard.list,
+                        name: localeLabels.keyboard.clearSelection,
+                    },
+                },
             },
-        },
-    ], { enabled: keyboardNavigation });
+        ]
+        : []);
     const cellClass = (column) => cx(cell, column.columnDef.meta?.truncate && truncateCell, column.id === stickyColumnId && pinnedCell);
     const renderCellContent = (tableRow, column) => {
         const cells = tableRow.getAllCells();
@@ -495,14 +502,14 @@ export function DataGrid({ data, columns, getRowId, variant = "framed", density
     const showEmpty = !loading && rows.length === 0;
     const isFiltered = filtered ?? (filters !== undefined && filters.length > 0);
     const emptyContent = isFiltered && noResults !== undefined ? noResults : (empty ?? labels.nothingToShow);
-    return (_jsxs("div", { ref: frameRef, className: cx(frame, frameClassName), "data-ciridae-ui": "", "data-variant": variant, "data-density": density, "data-fill": fill || undefined, "data-stacked": narrowScreenLayout === "stacked" || undefined, children: [_jsxs("div", { ...props, ref: gridRef, role: "table", "aria-busy": loading || undefined, className: cx(grid, className), style: { ...style, gridTemplateColumns: template }, children: [!hideHeader && (_jsxs("div", { role: "row", className: headRow, children: [selectable && (_jsx("div", { ref: selectHeadRef, role: "columnheader", className: cx(headCell, selectCell, stickySelectColumn && pinnedCell), children: _jsx(Checkbox, { "aria-label": labels.selectAll, checked: allSelected === "all" && selectableIds.length > 0, indeterminate: allSelected === "some", disabled: loading || selectableIds.length === 0, onCheckedChange: (checked) => setSelected(selectableIds, checked) }) })), shownColumns.map(headerCell), rowActions && (_jsx("div", { role: "columnheader", className: headCell, children: _jsx("span", { className: visuallyHidden, children: labels.actions }) }))] })), loading ? (skeletonRows.map((rowIndex) => (_jsxs("div", { role: "row", className: bodyRow, "data-skeleton": "", style: { opacity: 1 - rowIndex * skeletonRowFade }, children: [selectable && (_jsx("div", { role: "cell", className: cx(cell, selectCell), children: _jsx(Skeleton, { shape: "square", className: skeletonCheckbox }) })), shownColumns.map((column, columnIndex) => (_jsx("div", { role: "cell", className: cellClass(column), "data-align": column.columnDef.meta?.align, children: _jsx(SkeletonCell, { shape: column.columnDef.meta?.skeleton, width: skeletonWidths[(rowIndex + columnIndex) % skeletonWidths.length] }) }, column.id))), rowActions && _jsx("div", { role: "cell", className: cell })] }, rowIndex)))) : showEmpty ? (_jsx("div", { role: "row", className: emptyRow, children: _jsx("div", { role: "cell", "aria-colspan": columnCount, className: emptyCell, children: emptyContent }) })) : (drawBody())] }), footer, filterColumn && filterField && onFiltersChange && (_jsx(Popover, { open: true, onOpenChange: (open) => {
+    return (_jsxs("div", { ref: frameRef, className: cx(frame, frameClassName), "data-ciridae-ui": "", "data-variant": variant, "data-density": density, "data-fill": fill || undefined, "data-stacked": narrowScreenLayout === "stacked" || undefined, children: [_jsxs("div", { ...props, ref: gridRef, role: "table", "aria-busy": loading || undefined, className: cx(grid, className), style: { ...style, gridTemplateColumns: template }, children: [!hideHeader && (_jsxs("div", { role: "row", className: headRow, children: [selectable && (_jsx("div", { ref: selectHeadRef, role: "columnheader", className: cx(headCell, selectCell, stickySelectColumn && pinnedCell), children: _jsx(Checkbox, { "aria-label": labels.selectAll, checked: allSelected === "all" && selectableIds.length > 0, indeterminate: allSelected === "some", disabled: loading || selectableIds.length === 0, onCheckedChange: (checked) => setSelected(selectableIds, checked) }) })), shownColumns.map(headerCell), rowActions && (_jsx("div", { role: "columnheader", className: headCell, children: _jsx("span", { className: visuallyHidden, children: labels.actions }) }))] })), loading ? (skeletonRows.map((rowIndex) => (_jsxs("div", { role: "row", className: bodyRow, "data-skeleton": "", style: { opacity: 1 - rowIndex * skeletonRowFade }, children: [selectable && (_jsx("div", { role: "cell", className: cx(cell, selectCell), children: _jsx(Skeleton, { shape: "square" }) })), shownColumns.map((column, columnIndex) => (_jsx("div", { role: "cell", className: cellClass(column), "data-align": column.columnDef.meta?.align, children: _jsx(SkeletonCell, { shape: column.columnDef.meta?.skeleton, width: skeletonWidths[(rowIndex + columnIndex) % skeletonWidths.length] }) }, column.id))), rowActions && _jsx("div", { role: "cell", className: cell })] }, rowIndex)))) : showEmpty ? (_jsx("div", { role: "row", className: emptyRow, children: _jsx("div", { role: "cell", "aria-colspan": columnCount, className: emptyCell, children: emptyContent }) })) : (drawBody())] }), footer, filterColumn && filterField && onFiltersChange && (_jsx(Popover, { open: true, onOpenChange: (open) => {
                     if (!open)
                         setFilterColumnId(null);
                 }, anchor: headRefs.current.get(filterColumn.id) ?? null, density: "compact", children: _jsx("div", { className: columnFilter, children: _jsx(FilterValueEditor, { field: filterField, value: filters?.find((filter) => filter.field === filterField.key), onChange: (filter) => onFiltersChange(replaceFilter(filters ?? [], filter)) }) }) }))] }));
 }
 /**
- * `DataGrid` with the plain look: flush with its section, heads in caps, rows that light on hover
- * when they lead somewhere.
+ * `DataGrid` with the plain look: flush with its section, rows that light on hover when they lead
+ * somewhere.
  */
 export function Table({ variant = "plain", initialSorting, emptyMessage, ...props }) {
     return (_jsx(DataGrid, { variant: variant, defaultSorting: initialSorting, empty: emptyMessage, ...props }));
@@ -512,7 +519,6 @@ const emptySelection = {};
 const emptyVisibility = {};
 const emptyOrder = [];
 const skeletonRows = [0, 1, 2, 3, 4];
-// Each loading row a little fainter than the one above, so the list reads as fading out.
 const skeletonRowFade = 0.08;
 const skeletonWidths = ["70%", "45%", "85%", "55%"];
 /** What takes a click of its own inside a row, so pressing it leaves the row alone. */
@@ -579,14 +585,14 @@ const frame = css({
     position: "relative",
     display: "flex",
     flexDirection: "column",
-    width: "100%",
+    width: "full",
     minWidth: "0",
     overflowX: "auto",
     overflowY: "hidden",
     "&[data-variant=framed]": {
         border: "1px solid token(colors.border.panel)",
         borderRadius: "action",
-        background: "token(gradients.card)",
+        background: "[token(gradients.card)]",
         boxShadow: "card",
         _light: {
             "--pinned-background": "token(colors.bg.card)",
@@ -614,8 +620,8 @@ const grid = css({
     alignContent: "start",
     columnGap: "var(--row-gap-inline)",
     // As wide as the frame, or as its columns' least widths when those outgrow it, so it scrolls.
-    width: "100%",
-    minWidth: "min-content",
+    width: "full",
+    minWidth: "[min-content]",
     color: "fg.primary",
     fontSize: "body",
     letterSpacing: "compact",
@@ -636,8 +642,8 @@ const grid = css({
                 rowGap: "layout.tightGap",
             },
             "& > [role=row]:first-child:has([role=columnheader])": { srOnly: true },
-            "& [role=cell]": { display: "block", padding: "0", minWidth: "0" },
-            "& [role=cell]:first-child": { flexBasis: "100%" },
+            "& [role=cell]": { display: "block", padding: "none", minWidth: "0" },
+            "& [role=cell]:first-child": { flexBasis: "full" },
             "& [role=cell][data-truncate]": { whiteSpace: "normal", overflowWrap: "anywhere" },
             "& [role=cell][data-align=end]": { marginInlineStart: "auto" },
         },
@@ -661,8 +667,8 @@ const headRow = css(rowBase, {
     lineHeight: "tight",
     "[data-fill] &": {
         position: "sticky",
-        top: "0",
-        zIndex: "3",
+        top: "none",
+        zIndex: "[3]",
         background: "var(--pinned-background)",
         boxShadow: "var(--pinned-layers)",
     },
@@ -671,18 +677,18 @@ const headRow = css(rowBase, {
 const spacerRow = css({ gridColumn: "1 / -1" });
 const bodyRow = css(rowBase, {
     position: "relative",
-    outline: "none",
+    outline: "0",
     "&:last-child": { borderBottom: "0" },
     // 56px: a 32px avatar or two-line cell inside the padding, the bottom hairline inside that.
     "[data-variant=framed][data-density=default] &": {
-        minHeight: "calc(token(sizes.control.compact) + var(--row-pad-block) * 2)",
+        minHeight: "[calc(token(sizes.control.compact) + var(--row-pad-block) * 2)]",
     },
     // The row's wash is one layer over every cell, the pinned ones included, so they tint together.
     _after: {
         content: '""',
         position: "absolute",
-        inset: "0",
-        zIndex: "2",
+        inset: "none",
+        zIndex: "[2]",
         background: "var(--row-wash, transparent)",
         pointerEvents: "none",
         transitionProperty: "background",
@@ -692,26 +698,36 @@ const bodyRow = css(rowBase, {
     // glass, and keeps it under the pointer.
     "&[data-pressable]": { cursor: "pointer" },
     "&[data-pressable]:not([data-active]):hover": { "--row-wash": "token(colors.bg.rowHover)" },
-    "&[data-active]": { "--row-wash": "token(gradients.selected)" },
+    // The open row wears the selected glass. In dark it is a 10% wash over the cells, tinting the
+    // pinned ones with the rest; in light it is a near-opaque face, so it goes under the cells,
+    // where it would otherwise fade their text, and pinned cells lay it over their own surface.
+    "&[data-active]": {
+        "--row-wash": "token(gradients.selected)",
+        _light: {
+            "--row-wash": "transparent",
+            "--row-glass": "token(gradients.selected)",
+            background: "[var(--row-glass), var(--pinned-background)]",
+        },
+    },
     _focusVisible: { focusRing: "inset", "--row-wash": "token(colors.bg.rowHover)" },
     // Its anchor stands for the row and sits in a cell that may clip, so the row draws the ring.
     "&:has(a[data-row-link]:focus-visible)": {
         focusRing: "inset",
         "--row-wash": "token(colors.bg.rowHover)",
     },
-    "& a[data-row-link]:focus-visible": { outline: "none" },
+    "& a[data-row-link]:focus-visible": { outline: "0" },
     "& a[data-row-link]:hover": { textDecoration: "none" },
     // Row actions show while the row is pointed at, focused, ticked or open, and always on touch.
     "& [data-row-actions] > *": {
-        opacity: "0",
-        transitionProperty: "opacity",
+        opacity: "[0]",
+        transitionProperty: "[opacity]",
         transitionDuration: "fast",
     },
-    "&:is(:hover, :focus-within, [data-selected], [data-active]) [data-row-actions] > *, & [data-row-actions]:has([data-popup-open]) > *": { opacity: "1" },
-    "@media (hover: none)": { "& [data-row-actions] > *": { opacity: "1" } },
+    "&:is(:hover, :focus-within, [data-selected], [data-active]) [data-row-actions] > *, & [data-row-actions]:has([data-popup-open]) > *": { opacity: "[1]" },
+    "@media (hover: none)": { "& [data-row-actions] > *": { opacity: "[1]" } },
 });
 const groupRow = css(rowBase, {
-    minHeight: "40px",
+    minHeight: "[40px]",
     background: "bg.field",
     "&:last-child": { borderBottom: "0" },
 });
@@ -725,10 +741,10 @@ const cellBase = {
 };
 // The row's hairline sits inside its bottom padding, as the kit's 56px row draws it.
 const cell = css(cellBase, {
-    paddingBottom: "calc(var(--row-pad-block) - token(sizes.border.hairline))",
+    paddingBottom: "[calc(var(--row-pad-block) - token(sizes.border.hairline))]",
     fontWeight: "medium",
-    "[data-variant=plain] &": { fontWeight: "normal" },
-    "& a": { color: "inherit", textDecoration: "none" },
+    "[data-variant=plain] &": { fontWeight: "[normal]" },
+    "& a": { color: "[inherit]", textDecoration: "none" },
     "& a:hover": { textDecoration: "underline" },
 });
 const headCell = css(cellBase, {
@@ -754,23 +770,23 @@ const selectCell = css({
 // the list's surface on the solid canvas.
 const pinnedCell = css({
     position: "sticky",
-    zIndex: "1",
-    insetInlineStart: "0",
+    zIndex: "[1]",
+    insetInlineStart: "none",
     alignSelf: "stretch",
     display: "flex",
     alignItems: "center",
-    marginInlineStart: "calc(var(--row-pad-inline) * -1)",
-    marginInlineEnd: "calc(var(--row-gap-inline) * -1)",
+    marginInlineStart: "[calc(var(--row-pad-inline) * -1)]",
+    marginInlineEnd: "[calc(var(--row-gap-inline) * -1)]",
     paddingInlineStart: "var(--row-pad-inline)",
     paddingInlineEnd: "var(--row-gap-inline)",
-    background: "var(--pinned-background)",
+    background: "[var(--row-glass, none), var(--pinned-background)]",
     boxShadow: "var(--pinned-layers)",
     "[role=row] > & + &": {
         insetInlineStart: "var(--data-grid-sticky-offset)",
-        marginInlineStart: "0",
-        paddingInlineStart: "0",
+        marginInlineStart: "none",
+        paddingInlineStart: "none",
     },
-    "[role=columnheader]&": { zIndex: "4" },
+    "[role=columnheader]&": { zIndex: "[4]" },
 });
 const actionsCell = css({
     display: "flex",
@@ -787,7 +803,7 @@ const groupCell = css({
 const detailCell = css({
     gridColumn: "1 / -1",
     minWidth: "0",
-    marginTop: "calc(var(--row-pad-block) * -1)",
+    marginTop: "[calc(var(--row-pad-block) * -1)]",
     paddingBottom: "var(--row-pad-block)",
 });
 const emptyCell = css({
@@ -812,53 +828,53 @@ const headButton = css({
     display: "inline-flex",
     alignItems: "center",
     gap: "control.iconGap",
-    maxWidth: "100%",
+    maxWidth: "full",
     padding: "none",
     border: "0",
     background: "transparent",
-    color: "inherit",
+    color: "[inherit]",
     font: "inherit",
-    letterSpacing: "inherit",
+    letterSpacing: "[inherit]",
     textTransform: "inherit",
     cursor: "pointer",
     borderRadius: "control",
     _focusVisible: { focusRing: "outer" },
-    // The sort caret shows only while the column is sorted, pointed at, focused or its menu open.
-    "& svg": { flexShrink: "0", color: "fg.muted", opacity: "0", transition: "opacity .15s" },
+    "& svg": { flexShrink: "0", color: "fg.muted", opacity: "[0]", transition: "[opacity .15s]" },
     "&[data-sorted] svg": { color: "fg.primary" },
-    "&:is(:hover, :focus-visible, [data-sorted], [data-popup-open]) svg": { opacity: "1" },
+    "&:is(:hover, :focus-visible, [data-sorted], [data-popup-open]) svg": { opacity: "[1]" },
     "[data-align=end] > &": { marginInlineStart: "auto" },
 });
-// Past the skeleton's own shape sizes, which match on its `data-shape` too.
-const skeletonCheckbox = css({
-    "&[data-shape][data-ciridae-ui]": { width: "control.checkbox", borderRadius: "control" },
-});
 // A loading cell in its column's shape: the kit's skeleton row draws two lines for the primary
 // column, a 20px pill for a badge and a 24px circle beside a line for a person.
 const skeletonLines = css({
     display: "grid",
     gap: "layout.controlGap",
-    width: "100%",
+    width: "full",
     lineHeight: "tight",
 });
+// The kit's 80px badge pill, narrower than the skeleton's own; matching `data-shape` too puts this
+// rule past the skeleton's shape rules.
 const skeletonPill = css({
-    "&[data-shape][data-ciridae-ui]": { width: "80px", height: "control.mark", borderRadius: "pill" },
+    "&[data-shape][data-ciridae-ui]": {
+        width: "[80px]",
+        height: "control.mark",
+        borderRadius: "pill",
+    },
 });
 const skeletonPerson = css({
     display: "flex",
     alignItems: "center",
     gap: "layout.controlGap",
-    width: "100%",
+    width: "full",
 });
-const skeletonAvatar = css({ "&[data-shape][data-ciridae-ui]": { width: "avatar.menu" } });
 function SkeletonCell({ shape, width, }) {
     if (shape === "lines")
         return (_jsxs("span", { className: skeletonLines, children: [_jsx(Skeleton, { shape: "text", width: width }), _jsx(Skeleton, { shape: "text", height: "caption", width: "45%" })] }));
     if (shape === "pill")
         return _jsx(Skeleton, { className: skeletonPill });
     if (shape === "person")
-        return (_jsxs("span", { className: skeletonPerson, children: [_jsx(Skeleton, { shape: "circle", className: skeletonAvatar }), _jsx(Skeleton, { shape: "text", width: width })] }));
+        return (_jsxs("span", { className: skeletonPerson, children: [_jsx(Skeleton, { shape: "circle" }), _jsx(Skeleton, { shape: "text", width: width })] }));
     return shape ?? _jsx(Skeleton, { shape: "text", width: width });
 }
-const columnFilter = css({ display: "flex", flexDirection: "column", width: "260px" });
+const columnFilter = css({ display: "flex", flexDirection: "column", width: "[260px]" });
 const visuallyHidden = css({ srOnly: true });