@ciridae/ui 1.0.4 → 1.0.9

package/dist/components/app-navigation.js

@@ -1,25 +1,24 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /*
  * The app's sidebar from data. `AppNavigation` draws its sections twice from the same list: as the
- * expanded sidebar, and as the icon rail the shell shows under 1000px or while `collapsed`. A
+ * expanded sidebar, and as the icon rail the shell shows under 1000px or while `collapsed`, where
+ * each icon shows its label in a tooltip beside it on hover and keyboard focus. A
  * section can fold past `maxVisible` behind a More row, and unfolds on its own while the item it
  * holds is open or, with `autoUnfold`, while the sidebar has room for every row. Pinned and recent
  * records are sections like any other, which the caller builds from its own state.
- * `WorkspaceSwitcher` heads the sidebar: the current workspace's mark and name, opening a menu of
- * the others.
  */
 import { CaretDownIcon, CaretLineRightIcon, CaretUpDownIcon, CaretUpIcon, } from "@phosphor-icons/react";
 import { Fragment, useLayoutEffect, useRef, useState, } from "react";
 import { css, cx } from "#primitives/css";
 import { IconButton } from "./button.js";
-import { icon } from "./icon.js";
+import { directional, icon } from "./icon.js";
 import { useCiridaeLocale } from "./locale.js";
 import { Menu } from "./menu.js";
+import { Tooltip } from "./overlays.js";
 import { AppSidebar, AppSidebarFooter, AppSidebarNav, AppSidebarRail } from "./shell.js";
 import { SidebarItem, SidebarPanel, SidebarRailRule, SidebarSection } from "./sidebar.js";
 import { singleLineTextClass } from "./single-line-text.js";
 const navCount = css({ color: "fg.subtle", fontSize: "code", fontVariantNumeric: "tabular-nums" });
-// The rail's items, a section at a time: the sections stand apart by the rail's gap.
 const railSection = css({
     display: "flex",
     flexDirection: "column",
@@ -35,17 +34,21 @@ const sectionFooter = css({
 const foldScroll = css({
     display: "grid",
     gap: "control.trackInset",
-    maxHeight: "200px",
+    maxHeight: "[200px]",
     overflowY: "auto",
 });
-/** The tallest row, so an estimate of the folded rows' height never overshoots. */
-const SIDEBAR_ROW_HEIGHT = 32;
+// The kit draws the collapsed sidebar's expand button as its 32px round button, a step under
+// the rail's other round buttons; the child selector outranks the button's own size.
+const expandButtonRail = css({
+    "& > button": { width: "control.roundRail", height: "control.roundRail" },
+});
 /**
- * Whether the sidebar has room to list `foldedRows` more rows: the free space between its
- * navigation and its footer covers them. Once it has, it loses it only when the navigation runs
- * out of room, so it does not flicker at the threshold.
+ * Whether the sidebar has room to unfold every section: the free space between its navigation and
+ * its footer covers the `hiddenRows` its folds hide, less the More rows unfolding removes. Once it
+ * has, it loses it only when the navigation runs out of room, so it does not flicker at the
+ * threshold.
  */
-export function useSidebarRoom(foldedRows) {
+export function useSidebarRoom(hiddenRows) {
     const navRef = useRef(null);
     const footerRef = useRef(null);
     const [roomy, setRoomy] = useState(false);
@@ -58,28 +61,56 @@ export function useSidebarRoom(foldedRows) {
             const free = footer.getBoundingClientRect().top - nav.getBoundingClientRect().bottom;
             setRoomy((current) => current
                 ? free >= 0 && nav.scrollHeight <= nav.clientHeight + 1
-                : free >= foldedRows * SIDEBAR_ROW_HEIGHT);
+                : free >= measureHeightUnfoldingAdds(nav, hiddenRows));
         };
         measure();
         const observer = new ResizeObserver(measure);
         observer.observe(nav);
         observer.observe(document.documentElement);
         return () => observer.disconnect();
-    }, [foldedRows]);
+    }, [hiddenRows]);
     return { navRef, footerRef, roomy };
 }
+/**
+ * How much taller unfolding every section makes the navigation, from the rows it renders: each
+ * hidden row as tall as the tallest row shown, with the gap a section leaves between rows, less
+ * the More rows that unfolding removes.
+ */
+function measureHeightUnfoldingAdds(nav, hiddenRows) {
+    const moreRows = Array.from(nav.querySelectorAll("[data-navigation-more]"));
+    const moreRowSection = moreRows[0]?.parentElement;
+    // Without a More row, every section already shows all of its rows.
+    if (!moreRowSection)
+        return 0;
+    const rowGap = parseFloat(getComputedStyle(moreRowSection).rowGap);
+    const tallestRowHeight = Math.max(...Array.from(nav.querySelectorAll("[data-sidebar-row]"), (row) => row.getBoundingClientRect().height));
+    const moreRowsHeight = moreRows.reduce((total, row) => total + row.getBoundingClientRect().height + rowGap, 0);
+    return hiddenRows * (tallestRowHeight + rowGap) - moreRowsHeight;
+}
 function NavRow({ item, activeIds, renderLink, }) {
     return (_jsx(SidebarItem, { size: item.size, icon: item.icon, active: activeIds.includes(item.id), trailing: item.count !== undefined && _jsx("span", { className: navCount, children: item.count }), href: item.href, render: item.render ?? renderLink?.(item), onClick: item.onSelect, action: item.action, children: item.label }));
 }
-function SectionItems({ section, activeIds, renderLink, roomy, labels, }) {
-    const [expanded, setExpanded] = useState(false);
+/**
+ * How many of a section's rows its fold hides: none when it has no fold, or when it is unfolded
+ * because it was expanded or holds the active item past `maxVisible`.
+ */
+function countRowsHiddenByFold(section, activeIds, expanded) {
+    const { items, maxVisible } = section;
+    if (maxVisible === undefined || items.length <= maxVisible)
+        return 0;
+    const unfolded = expanded || items.slice(maxVisible).some((item) => activeIds.includes(item.id));
+    return unfolded ? 0 : items.length - maxVisible;
+}
+function SectionItems({ section, activeIds, renderLink, roomy, labels, expanded, onExpandedChange, }) {
     const { items, maxVisible } = section;
     const rows = (shown) => shown.map((item) => (_jsx(NavRow, { item: item, activeIds: activeIds, renderLink: renderLink }, item.id)));
     if (maxVisible === undefined || items.length <= maxVisible || roomy)
         return rows(items);
-    const unfolded = expanded || items.slice(maxVisible).some((item) => activeIds.includes(item.id));
+    const unfolded = countRowsHiddenByFold(section, activeIds, expanded) === 0;
+    // The open page keeps its section unfolded, so a Less row could not fold it.
+    const holdsActiveItem = items.slice(maxVisible).some((item) => activeIds.includes(item.id));
     const Caret = unfolded ? CaretUpIcon : CaretDownIcon;
-    return (_jsxs(_Fragment, { children: [!unfolded ? (rows(items.slice(0, maxVisible))) : section.scrollWhenUnfolded ? (_jsx("div", { className: foldScroll, children: rows(items) })) : (rows(items)), _jsx(SidebarItem, { size: "compact", icon: _jsx(Caret, { className: icon({ size: "small" }) }), "aria-expanded": unfolded, onClick: () => setExpanded(!unfolded), children: unfolded ? labels.less : labels.more })] }));
+    return (_jsxs(_Fragment, { children: [!unfolded ? (rows(items.slice(0, maxVisible))) : section.scrollWhenUnfolded ? (_jsx("div", { className: foldScroll, children: rows(items) })) : (rows(items)), !holdsActiveItem && (_jsx(SidebarItem, { size: "compact", icon: _jsx(Caret, { className: icon({ size: "small" }) }), "aria-expanded": unfolded, onClick: () => onExpandedChange(!unfolded), "data-navigation-more": "", "data-sidebar-action": "", children: unfolded ? labels.less : labels.more }))] }));
 }
 /** Runs of sections: each main section alone, consecutive panel sections together. */
 function sectionRuns(sections) {
@@ -100,23 +131,26 @@ export function AppNavigation({ sections, activeId: ownActiveId = null, renderLi
     const locale = useCiridaeLocale();
     const labels = { ...locale.labels.navigation, ...ownLabels };
     const activeIds = ownActiveId === null ? [] : typeof ownActiveId === "string" ? [ownActiveId] : ownActiveId;
-    // Every row a fold hides, less the More row it trades them for.
-    const foldedRows = sections.reduce((rows, section) => rows +
-        (section.maxVisible === undefined
-            ? 0
-            : Math.max(0, section.items.length - section.maxVisible - 1)), 0);
-    const room = useSidebarRoom(foldedRows);
+    // The navigation owns which sections were expanded, so the room estimate counts only the rows
+    // that are still folded away.
+    const [expandedSectionIds, setExpandedSectionIds] = useState(() => new Set());
+    const setSectionExpanded = (sectionId, expanded) => setExpandedSectionIds((current) => {
+        const next = new Set(current);
+        if (expanded)
+            next.add(sectionId);
+        else
+            next.delete(sectionId);
+        return next;
+    });
+    const hiddenRows = sections.reduce((rows, section) => rows + countRowsHiddenByFold(section, activeIds, expandedSectionIds.has(section.id)), 0);
+    const room = useSidebarRoom(hiddenRows);
     const roomy = autoUnfold && room.roomy;
-    const sectionBlock = (section) => (_jsxs(SidebarSection, { label: section.label, children: [_jsx(SectionItems, { section: section, activeIds: activeIds, renderLink: renderLink, roomy: roomy, labels: labels }), section.footer && _jsx("div", { className: sectionFooter, children: section.footer })] }, section.id));
+    const sectionBlock = (section) => (_jsxs(SidebarSection, { label: section.label, children: [_jsx(SectionItems, { section: section, activeIds: activeIds, renderLink: renderLink, roomy: roomy, labels: labels, expanded: expandedSectionIds.has(section.id), onExpandedChange: (expanded) => setSectionExpanded(section.id, expanded) }), section.footer && _jsx("div", { className: sectionFooter, children: section.footer })] }, section.id));
     return (_jsxs(AppSidebar, { "aria-label": labels.navigation, collapsed: collapsed, ...props, children: [_jsxs(AppSidebarNav, { ref: room.navRef, children: [header, sectionRuns(sections).map((run) => run.panel ? (_jsx(SidebarPanel, { children: run.sections.map(sectionBlock) }, run.sections[0].id)) : (_jsx(Fragment, { children: run.sections.map(sectionBlock) }, run.sections[0].id)))] }), _jsxs(AppSidebarRail, { children: [railHeader, sections
                         .filter((section) => section.rail !== false && section.items.length > 0)
-                        .map((section) => (_jsxs("div", { className: railSection, children: [section.label && _jsx(SidebarRailRule, {}), section.items.map((item) => (_jsx(SidebarItem, { "aria-label": item.label, icon: item.icon, active: activeIds.includes(item.id), href: item.href, render: item.render ?? renderLink?.(item), onClick: item.onSelect }, item.id)))] }, section.id)))] }), _jsxs(AppSidebarFooter, { ref: room.footerRef, children: [collapsed && onExpand && (_jsx(AppSidebarRail, { children: _jsx(IconButton, { "aria-label": locale.labels.common.expand, size: "medium", onClick: onExpand, children: _jsx(CaretLineRightIcon, { className: cx(icon({ size: "small" }), css({ _rtl: { transform: "scaleX(-1)" } })) }) }) })), footer] })] }));
+                        .map((section) => (_jsxs("div", { className: railSection, children: [section.label && _jsx(SidebarRailRule, {}), section.items.map((item) => (_jsx(Tooltip, { content: item.label, side: "inline-end", children: _jsx(SidebarItem, { "aria-label": item.label, icon: item.icon, active: activeIds.includes(item.id), href: item.href, render: item.render ?? renderLink?.(item), onClick: item.onSelect }) }, item.id)))] }, section.id)))] }), _jsxs(AppSidebarFooter, { ref: room.footerRef, children: [collapsed && onExpand && (_jsx(AppSidebarRail, { className: expandButtonRail, children: _jsx(Tooltip, { content: locale.labels.common.expand, side: "inline-end", children: _jsx(IconButton, { "aria-label": locale.labels.common.expand, size: "medium", onClick: onExpand, children: _jsx(CaretLineRightIcon, { className: cx(icon({ size: "small" }), directional) }) }) }) })), footer] })] }));
 }
-/*
- * A workspace's square mark with its initial: the primary face for the current one, the raised
- * face with a quieter initial for the others. Its edge is a gradient, so it is drawn under the face
- * through a transparent border.
- */
+/* A workspace's mark: its edge is a gradient, so it is drawn under the face through a transparent border. */
 const workspaceMark = css({
     display: "inline-grid",
     placeItems: "center",
@@ -125,29 +159,27 @@ const workspaceMark = css({
     height: "workspace.mark",
     border: "1px solid transparent",
     borderRadius: "keycap",
-    background: "token(gradients.raised) padding-box, token(gradients.border.otherWorkspaceMark) border-box",
+    background: "[token(gradients.raised) padding-box, token(gradients.border.otherWorkspaceMark) border-box]",
     color: "fg.label",
     fontSize: "code",
     fontWeight: "medium",
     letterSpacing: "compact",
     lineHeight: "tight",
     "&[data-current]": {
-        background: "token(gradients.primary) padding-box, token(gradients.border.primary) border-box",
+        background: "[token(gradients.primary) padding-box, token(gradients.border.primary) border-box]",
         color: "bg.canvas",
         _light: { color: "fg.onAccent" },
     },
     "&[data-size=small]": { width: "control.mark", height: "control.mark", borderRadius: "control" },
 });
-/** A workspace's mark: its name's first letter on a square tile. */
 export function WorkspaceMark({ name, current = false, size = "regular", className, }) {
     return (_jsx("span", { "aria-hidden": "true", className: cx(workspaceMark, className), "data-ciridae-ui": "", "data-current": current || undefined, "data-size": size, children: name.trim().charAt(0).toLocaleUpperCase() }));
 }
-// The sidebar's first row: hovered it takes the nav row's wash, open a grey well in the canvas's edge.
 const workspaceSwitcher = css({
     display: "flex",
     alignItems: "center",
     gap: "layout.controlGap",
-    width: "100%",
+    width: "full",
     height: "control.default",
     padding: "control.compactBlock",
     border: "0",
@@ -163,12 +195,11 @@ const workspaceSwitcher = css({
     cursor: "pointer",
     transitionProperty: "background",
     transitionDuration: "fast",
-    _hover: { background: "token(gradients.selected)", _light: { background: "bg.rowHover" } },
-    // Open, it keeps its open face under the pointer too.
+    _hover: { background: "[token(gradients.selected)]", _light: { background: "bg.rowHover" } },
     "&[data-popup-open], &[data-popup-open]:hover": {
         background: "bg.openTrigger",
         _light: { background: "bg.openTrigger" },
-        boxShadow: "inset 0 0 0 1px token(colors.border.canvas)",
+        boxShadow: "[inset 0 0 0 1px token(colors.border.canvas)]",
     },
     _focusVisible: { focusRing: "outer" },
     "& > [data-name]": { flex: "1" },
@@ -180,7 +211,6 @@ const workspaceSwitcher = css({
         padding: "none",
     },
 });
-/** The current workspace, opening a menu of every workspace the reader belongs to, current checked. */
 export function WorkspaceSwitcher({ workspaces, currentId, onSelect, compact = false, }) {
     const current = workspaces.find((workspace) => workspace.id === currentId);
     const name = current?.name ?? "";

package/dist/components/badge.d.ts

@@ -21,19 +21,15 @@ export type BadgeGlyphKind = "notReached" | "hereNow" | "terminal" | "contested"
 export type BadgeGlyphProps = Omit<ComponentProps<"svg">, "children"> & {
     kind: BadgeGlyphKind;
 };
-/** A badge's drawn glyph: a lifecycle position, a contested verdict, an unchanged outcome. */
 export declare function BadgeGlyph({ kind, className, ...props }: BadgeGlyphProps): import("react").JSX.Element;
 /** How strongly a value has been checked: none, by a model, by a person, against the world. */
 export type AssuranceLevel = 0 | 1 | 2 | 3;
 export type AssuranceGlyphProps = Omit<ComponentProps<"svg">, "children"> & {
     level: AssuranceLevel;
 };
-/** A three-bar meter, lit to the level, so a value's assurance reads without color. */
 export declare function AssuranceGlyph({ level, className, ...props }: AssuranceGlyphProps): import("react").JSX.Element;
-/** Where a record sits in its stages. The glyph is fixed per position; the words name the stage. */
 export type LifecycleState = "notReached" | "hereNow" | "done" | "blocked" | "agentWaiting" | "expired" | "terminal" | "awaiting";
 export type LifecycleBadgeProps = Omit<BadgeProps, "tone" | "shape" | "appearance" | "icon"> & {
     state: LifecycleState;
 };
-/** A lifecycle pill: the state picks the glyph and the hue; the words are the stage's name. */
 export declare function LifecycleBadge({ state, ...props }: LifecycleBadgeProps): import("react").JSX.Element;

package/dist/components/badge.js

@@ -11,11 +11,7 @@ import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-run
 import { useRender } from "@base-ui/react/use-render";
 import { CheckIcon, ClockIcon, HourglassIcon, SparkleIcon, StopIcon } from "@phosphor-icons/react";
 import { css, cva, cx } from "#primitives/css";
-/*
- * A tinted pill is its hue's glass, falling from light to its hue, inside that hue's gradient
- * hairline, which the `[data-edge="gradient"]` ring draws from `--edge`. Neutral is the raised
- * glass, warning the tinted button's warm glass, and ink the primary face.
- */
+/* The `[data-edge="gradient"]` ring draws the hairline from `--edge`. */
 const badge = cva({
     base: {
         display: "inline-flex",
@@ -47,11 +43,6 @@ const badge = cva({
                 _light: { background: "bg.card" },
             },
         },
-        /*
-         * `filled` is the tone's glass; `outline` the card's face inside the tone's edge, as an
-         * outcome that changed nothing; `bare` a fact told in passing: the icon and the words, muted,
-         * with no box, the tone on the icon alone.
-         */
         appearance: {
             filled: {},
             outline: {},
@@ -60,7 +51,7 @@ const badge = cva({
                 gap: "layout.tightGap",
                 paddingInline: "none",
                 border: "0",
-                borderRadius: "0",
+                borderRadius: "none",
                 background: "transparent",
                 flexShrink: "0",
                 _light: { background: "transparent" },
@@ -81,7 +72,7 @@ const badge = cva({
             shape: "pill",
             tone: "neutral",
             css: {
-                background: "token(gradients.raised)",
+                background: "[token(gradients.raised)]",
                 color: "fg.label",
                 "--edge": "token(gradients.border.raised)",
             },
@@ -91,7 +82,7 @@ const badge = cva({
             shape: "pill",
             tone: "info",
             css: {
-                background: "token(gradients.infoGlass)",
+                background: "[token(gradients.infoGlass)]",
                 "--edge": "token(gradients.border.infoGlass)",
             },
         },
@@ -100,7 +91,7 @@ const badge = cva({
             shape: "pill",
             tone: "success",
             css: {
-                background: "token(gradients.successGlass)",
+                background: "[token(gradients.successGlass)]",
                 "--edge": "token(gradients.border.successGlass)",
             },
         },
@@ -109,7 +100,7 @@ const badge = cva({
             shape: "pill",
             tone: "warning",
             css: {
-                background: "token(gradients.tinted)",
+                background: "[token(gradients.tinted)]",
                 "--edge": "token(gradients.border.raised)",
                 _light: { "--edge": "token(gradients.border.tinted)" },
             },
@@ -119,7 +110,7 @@ const badge = cva({
             shape: "pill",
             tone: "danger",
             css: {
-                background: "token(gradients.dangerGlass)",
+                background: "[token(gradients.dangerGlass)]",
                 "--edge": "token(gradients.border.dangerGlass)",
             },
         },
@@ -128,7 +119,7 @@ const badge = cva({
             shape: "pill",
             tone: "ink",
             css: {
-                background: "token(gradients.primary)",
+                background: "[token(gradients.primary)]",
                 color: "bg.canvas",
                 "--edge": "token(gradients.border.primary)",
                 _light: { color: "fg.onAccent" },
@@ -138,7 +129,7 @@ const badge = cva({
             appearance: "outline",
             shape: "pill",
             css: {
-                background: "token(gradients.raised)",
+                background: "[token(gradients.raised)]",
                 color: "fg.primary",
                 "--edge": "token(gradients.border.raised)",
                 _light: { background: "bg.card", "--edge": "token(gradients.border.primary)" },
@@ -180,13 +171,14 @@ export function Badge({ tone = "neutral", shape = "pill", appearance = "filled",
         },
     });
 }
-/*
- * The glyphs the kit draws itself, in a 14px box (12px for the progress step's check and stop),
- * in the color of the badge's or field's label.
- */
-const glyph = css({ flexShrink: "0", width: "1em", height: "1em", fontSize: "icon.small" });
-const smallGlyph = css({ flexShrink: "0", width: "1em", height: "1em", fontSize: "icon.compact" });
-/** A badge's drawn glyph: a lifecycle position, a contested verdict, an unchanged outcome. */
+/* The glyphs are drawn in a 14px box (12px for the progress step's check and stop). */
+const glyph = css({ flexShrink: "0", width: "[1em]", height: "[1em]", fontSize: "icon.small" });
+const smallGlyph = css({
+    flexShrink: "0",
+    width: "[1em]",
+    height: "[1em]",
+    fontSize: "icon.compact",
+});
 export function BadgeGlyph({ kind, className, ...props }) {
     const small = kind === "check" || kind === "stop";
     return (_jsxs("svg", { "aria-hidden": "true", viewBox: small ? "0 0 12 12" : "0 0 14 14", fill: "none", ...props, className: cx(small ? smallGlyph : glyph, className), children: [kind === "notReached" && (_jsx("circle", { cx: "7", cy: "7", r: "3.875", stroke: "currentColor", strokeWidth: "1.25", strokeDasharray: "2 1.6" })), kind === "hereNow" && _jsx("circle", { cx: "7", cy: "7", r: "3", fill: "currentColor" }), kind === "terminal" && (_jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1.5", fill: "currentColor" })), kind === "contested" && (_jsx("circle", { cx: "7", cy: "7", r: "3.875", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" })), kind === "noChange" && (_jsx("circle", { cx: "7", cy: "7", r: "3.375", stroke: "currentColor", strokeWidth: "1.25" })), kind === "check" && (_jsx("path", { d: "M2.4 6.2 4.6 8.5 9.7 3.4", stroke: "currentColor", strokeWidth: "0.857", strokeLinecap: "round", strokeLinejoin: "round" })), kind === "stop" && (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "6", cy: "6", r: "3.95", stroke: "currentColor", strokeWidth: "0.857" }), _jsx("path", { d: "M4.1 6h3.8", stroke: "currentColor", strokeWidth: "0.857", strokeLinecap: "round" })] }))] }));
@@ -196,7 +188,6 @@ const ASSURANCE_BARS = [
     { x: 5.8, y: 4.5, height: 8 },
     { x: 9.5, y: 1.5, height: 11 },
 ];
-/** A three-bar meter, lit to the level, so a value's assurance reads without color. */
 export function AssuranceGlyph({ level, className, ...props }) {
     return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "currentColor", ...props, className: cx(glyph, className), children: ASSURANCE_BARS.map((bar, index) => (_jsx("rect", { x: bar.x, y: bar.y, width: "2.5", height: bar.height, rx: "0.75", opacity: index < level ? 1 : 0.28 }, bar.x))) }));
 }
@@ -220,7 +211,6 @@ const LIFECYCLE_GLYPHS = {
     terminal: _jsx(BadgeGlyph, { kind: "terminal" }),
     awaiting: _jsx(HourglassIcon, { weight: "bold" }),
 };
-/** A lifecycle pill: the state picks the glyph and the hue; the words are the stage's name. */
 export function LifecycleBadge({ state, ...props }) {
     return _jsx(Badge, { ...props, tone: LIFECYCLE_TONES[state], icon: LIFECYCLE_GLYPHS[state] });
 }

package/dist/components/bulk-action-bar.js

@@ -10,13 +10,13 @@ const bar = css({
     justifyContent: "space-between",
     flexWrap: "wrap",
     gap: "layout.contentGap",
-    minHeight: "56px",
+    minHeight: "[56px]",
     paddingBlock: "panel.compact",
     paddingInlineStart: "panel.comfortable",
     paddingInlineEnd: "panel.compact",
     border: "1px solid token(colors.border.divider)",
     borderRadius: "action",
-    background: "token(gradients.card)",
+    background: "[token(gradients.card)]",
     fontSize: "body",
     fontWeight: "medium",
     letterSpacing: "compact",

package/dist/components/button.js

@@ -8,9 +8,8 @@ import { formatForDisplay } from "./hotkeys.js";
 import { icon as iconStyle, Spinner } from "./icon.js";
 import { ShortcutHint } from "./keycap.js";
 import { useCiridaeLocale } from "./locale.js";
-/* The hover wash laid over a gradient face, as the design's state layer sits over it. */
-const raisedHoverLight = "linear-gradient(token(colors.bg.hover), token(colors.bg.hover)), token(gradients.raised)";
-const tintedHover = "linear-gradient(token(colors.bg.hover), token(colors.bg.hover)), token(gradients.tinted)";
+const raisedHoverLight = "[linear-gradient(token(colors.bg.hover), token(colors.bg.hover)), token(gradients.raised)]";
+const tintedHover = "[linear-gradient(token(colors.bg.hover), token(colors.bg.hover)), token(gradients.tinted)]";
 const action = cva({
     base: {
         display: "inline-flex",
@@ -20,7 +19,6 @@ const action = cva({
         gap: "control.iconGap",
         // The design lays a button's edge over its padding rather than inside it, so no border.
         border: "0",
-        // Buttons are pills at both heights.
         borderRadius: "pill",
         height: "control.default",
         paddingInline: "control.inline",
@@ -30,44 +28,41 @@ const action = cva({
         letterSpacing: "compact",
         lineHeight: "tight",
         cursor: "pointer",
-        transitionProperty: "translate, background, color",
+        transitionProperty: "[translate, background, color]",
         transitionDuration: "fast",
         _focusVisible: { focusRing: "outer" },
         "&:disabled, &[data-disabled]": {
             opacity: "disabled",
             cursor: "not-allowed",
             // A control that cannot be pressed should not look like it is waiting to be.
-            translate: "none",
+            translate: "[none]",
         },
     },
     variants: {
         variant: {
             /*
              * Buttons cast no shadow: each face is told apart by its gradient fill and its gradient
-             * edge alone. Light has no hover on the primary face; dark lets a little of the surface
-             * through. A raised face takes the hover wash over its gradient in light, and thins in dark.
+             * edge alone. The primary face's hover lets a little of the surface through in both
+             * themes.
              */
             primary: {
-                background: "token(gradients.primary)",
+                background: "[token(gradients.primary)]",
                 color: "bg.canvas",
                 _light: { color: "fg.onAccent" },
-                _hover: {
-                    background: "bg.primaryHover",
-                    _light: { background: "token(gradients.primary)" },
-                },
-                _active: { translate: "0 1px" },
+                _hover: { background: "[token(gradients.primaryHover)]" },
+                _active: { translate: "[0 1px]" },
             },
             secondary: {
-                background: "token(gradients.raised)",
+                background: "[token(gradients.raised)]",
                 color: "fg.primary",
                 _hover: { background: "bg.raisedHover", _light: { background: raisedHoverLight } },
-                _active: { translate: "0 1px" },
+                _active: { translate: "[0 1px]" },
             },
             subtle: {
                 background: "bg.fill",
                 color: "fg.muted",
                 _hover: { color: "fg.primary" },
-                _active: { translate: "0 1px" },
+                _active: { translate: "[0 1px]" },
             },
             // White in dark, the secondary grey in light: the one face whose text follows the theme
             // differently.
@@ -79,41 +74,41 @@ const action = cva({
             },
             // Warm glass with an amber edge and the warm accent for its text.
             tinted: {
-                background: "token(gradients.tinted)",
+                background: "[token(gradients.tinted)]",
                 color: "accent.yellow",
                 _light: { color: "accent.bronze" },
                 _hover: { background: tintedHover },
-                _active: { translate: "0 1px" },
+                _active: { translate: "[0 1px]" },
             },
             // The secondary face with red text, for a destructive action that asks for confirmation:
             // it names the risk without being the loudest thing on the page. The confirmation's own
             // button is `danger`.
             secondaryDanger: {
-                background: "token(gradients.raised)",
+                background: "[token(gradients.raised)]",
                 color: "accent.red",
                 _hover: { background: "bg.raisedHover", _light: { background: raisedHoverLight } },
-                _active: { translate: "0 1px" },
+                _active: { translate: "[0 1px]" },
             },
             danger: {
-                background: "token(gradients.danger)",
+                background: "[token(gradients.danger)]",
                 color: "fg.onAccent",
-                _hover: { filter: "brightness(1.05)" },
-                _active: { translate: "0 1px" },
+                _hover: { filter: "[brightness(1.05)]" },
+                _active: { translate: "[0 1px]" },
             },
             success: {
                 background: "accent.green",
                 color: "bg.canvas",
-                _hover: { filter: "brightness(1.05)" },
-                _active: { translate: "0 1px" },
+                _hover: { filter: "[brightness(1.05)]" },
+                _active: { translate: "[0 1px]" },
             },
             // Words only, in the text around it: no face, no height, underlined on hover.
             link: {
                 background: "transparent",
                 color: "fg.primary",
-                fontFamily: "inherit",
-                fontWeight: "inherit",
-                letterSpacing: "inherit",
-                lineHeight: "inherit",
+                fontFamily: "[inherit]",
+                fontWeight: "[inherit]",
+                letterSpacing: "[inherit]",
+                lineHeight: "[inherit]",
                 _hover: { textDecoration: "underline" },
             },
         },
@@ -126,19 +121,18 @@ const action = cva({
             medium: {},
             large: { height: "control.field", paddingInline: "control.largeInline", fontSize: "heading" },
         },
-        fullWidth: { true: { width: "100%" } },
+        fullWidth: { true: { width: "full" } },
     },
     compoundVariants: [
         {
             variant: "link",
             size: ["small", "medium", "large"],
-            css: { height: "auto", paddingInline: "none", fontSize: "inherit", flexShrink: "0" },
+            css: { height: "auto", paddingInline: "none", fontSize: "[inherit]", flexShrink: "0" },
         },
     ],
     // Small is the everyday button; medium and large are for a page's one main action.
     defaultVariants: { variant: "primary", size: "small" },
 });
-// Each gradient face draws its own gradient edge; the flat faces draw a hairline or none.
 const buttonEdges = {
     primary: "primary",
     secondary: "raised",
@@ -151,7 +145,7 @@ const buttonEdges = {
     link: undefined,
 };
 // In the button's own color, quieter than its label.
-const buttonHint = css({ color: "inherit", opacity: "0.6" });
+const buttonHint = css({ color: "[inherit]", opacity: "[0.6]" });
 /**
  * The size a `Button` takes where it does not set its own, so the container decides: a dialog's
  * footer holds the default 38px buttons, where everywhere else the small one is the everyday.
@@ -199,42 +193,40 @@ const round = cva({
         border: "1px solid transparent",
         borderRadius: "pill",
         color: "fg.muted",
-        background: "token(gradients.raised)",
+        background: "[token(gradients.raised)]",
         cursor: "pointer",
         flexShrink: "0",
-        transitionProperty: "translate, background, color",
+        transitionProperty: "[translate, background, color]",
         transitionDuration: "fast",
-        // Hover keeps the face in light and thins it in dark; the icon takes the primary ink.
-        _hover: { color: "fg.primary", background: "token(gradients.raisedHover)" },
-        _active: { translate: "0 1px" },
+        _hover: { color: "fg.primary", background: "[token(gradients.raisedHover)]" },
+        _active: { translate: "[0 1px]" },
         _focusVisible: { focusRing: "outer" },
         // A round face fades further than other controls when it cannot be pressed.
         "&:disabled, &[data-disabled]": {
             opacity: "disabledRound",
             cursor: "not-allowed",
-            translate: "none",
+            translate: "[none]",
         },
     },
     variants: {
         variant: {
             raised: {},
-            // The bare icon button: no face until hovered, and disabled it fades as other controls do.
             ghost: {
                 border: "0",
                 background: "transparent",
-                _hover: { background: "bg.hover", _light: { background: "bg.hover" } },
-                _active: { translate: "none" },
+                _hover: { background: "bg.hover" },
+                _active: { translate: "[none]" },
                 "&:disabled, &[data-disabled]": { opacity: "disabled" },
             },
             // The primary face as a round button: a composer's send.
             primary: {
-                background: "token(gradients.primary)",
+                background: "[token(gradients.primary)]",
                 color: "bg.canvas",
                 _light: { color: "fg.onAccent" },
                 _hover: {
                     color: "bg.canvas",
-                    background: "bg.primaryHover",
-                    _light: { color: "fg.onAccent", background: "token(gradients.primary)" },
+                    background: "[token(gradients.primaryHover)]",
+                    _light: { color: "fg.onAccent" },
                 },
             },
         },
@@ -247,7 +239,6 @@ const round = cva({
             medium: { width: "control.round", height: "control.round" },
             large: { width: "control.default", height: "control.default" },
         },
-        // A page's leading icon button is a rounded square rather than a circle.
         shape: { round: {}, square: { borderRadius: "action" } },
     },
     compoundVariants: [
@@ -271,8 +262,8 @@ const badgeDot = css({
 /* A count sits on the button's corner, where the dot alone would not say how many. */
 const badgeCount = css({
     position: "absolute",
-    top: "calc(token(spacing.layout.tightGap) * -1)",
-    insetInlineEnd: "calc(token(spacing.layout.tightGap) * -1)",
+    top: "[calc(token(spacing.layout.tightGap) * -1)]",
+    insetInlineEnd: "[calc(token(spacing.layout.tightGap) * -1)]",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -286,7 +277,7 @@ const badgeCount = css({
     color: "bg.canvas",
     fontSize: "avatar.small",
     fontWeight: "medium",
-    lineHeight: "1",
+    lineHeight: "tight",
     fontVariantNumeric: "tabular-nums",
 });
 /**