@ciridae/ui 1.0.4 → 1.0.9

package/dist/components/date-range-picker.js

@@ -82,7 +82,7 @@ const trigger = css({
     paddingInline: "control.compactInline",
     border: "1px solid transparent",
     borderRadius: "action",
-    background: "token(gradients.selected)",
+    background: "[token(gradients.selected)]",
     color: "fg.primary",
     fontFamily: "sans",
     fontSize: "body",
@@ -90,16 +90,15 @@ const trigger = css({
     letterSpacing: "compact",
     whiteSpace: "nowrap",
     cursor: "pointer",
-    _hover: { background: "token(gradients.raisedHover)" },
+    _hover: { background: "[token(gradients.raisedHover)]" },
     "&[data-popup-open]": { borderColor: "fg.primary" },
     _focusVisible: { focusRing: "outer" },
 });
-const options = css({ display: "grid", width: "222px" });
-// A menu row on the popover's glass sheet.
+const options = css({ display: "grid", width: "[222px]" });
 const option = css(glassMenuRow, {
     border: "0",
     background: "transparent",
-    fontFamily: "inherit",
+    fontFamily: "[inherit]",
     textAlign: "start",
 });
 const optionsDivider = css(glassMenuDivider);

package/dist/components/document-viewer.js

@@ -38,8 +38,8 @@ const viewer = css(cardSurface, {
     gridTemplateRows: "auto minmax(0, 1fr)",
     minWidth: "0",
     overflow: "hidden",
-    outline: "none",
-    "&:fullscreen": { borderRadius: "0", height: "100dvh" },
+    outline: "0",
+    "&:fullscreen": { borderRadius: "none", height: "[100dvh]" },
 });
 const toolbar = css({
     display: "flex",
@@ -77,10 +77,10 @@ const zoomPill = css({
         cursor: "pointer",
         _hover: { background: "bg.hover" },
         _focusVisible: { focusRing: "outer" },
-        _disabled: { opacity: "0.5", cursor: "default" },
+        _disabled: { opacity: "[0.5]", cursor: "default" },
     },
     "& > output": {
-        minWidth: "52px",
+        minWidth: "[52px]",
         textAlign: "center",
         fontSize: "body",
         fontWeight: "medium",
@@ -90,7 +90,7 @@ const zoomPill = css({
 const body = css({
     display: "grid",
     gridTemplateColumns: "104px minmax(0, 1fr)",
-    height: "min(693px, 80dvh)",
+    height: "[min(693px, 80dvh)]",
     minHeight: "0",
     _phone: { gridTemplateColumns: "minmax(0, 1fr)" },
     "[data-full-screen] > &": { height: "auto" },
@@ -118,11 +118,11 @@ const thumbnail = css({
     fontWeight: "medium",
     cursor: "pointer",
     "&[aria-current=page]": { color: "fg.primary" },
-    _focusVisible: { outline: "none", "& > span": { focusRing: "outer" } },
+    _focusVisible: { outline: "0", "& > span": { focusRing: "outer" } },
     "& > span": {
         position: "relative",
         overflow: "hidden",
-        borderRadius: "2px",
+        borderRadius: "[2px]",
         outline: "1px solid token(colors.border.control)",
         pointerEvents: "none",
     },
@@ -130,28 +130,28 @@ const thumbnail = css({
 });
 const well = css({
     display: "flex",
-    justifyContent: "safe center",
-    alignItems: "safe center",
-    padding: "24px",
+    justifyContent: "[safe center]",
+    alignItems: "[safe center]",
+    padding: "[24px]",
     background: "bg.canvas",
     overflow: "auto",
-    outline: "none",
+    outline: "0",
     _focusVisible: { focusRing: "inset" },
 });
 const pageBox = css({ position: "relative", flexShrink: "0", boxShadow: "card" });
-const pageLayer = css({ position: "absolute", top: "0", left: "0", transformOrigin: "0 0" });
+const pageLayer = css({ position: "absolute", top: "none", left: "none", transformOrigin: "0 0" });
 const pageContent = css({
     position: "absolute",
-    top: "0",
-    left: "0",
+    top: "none",
+    left: "none",
     transformOrigin: "0 0",
-    "& > img": { display: "block", width: "100%", height: "100%" },
+    "& > img": { display: "block", width: "full", height: "full" },
 });
 const regionButton = css({
     position: "absolute",
     padding: "none",
     border: "1.5px solid transparent",
-    borderRadius: "3px",
+    borderRadius: "[3px]",
     background: "transparent",
     cursor: "pointer",
     "--region-ink": "token(colors.accent.blue)",
@@ -175,16 +175,16 @@ const regionButton = css({
     "&[data-marked], &:focus-visible": {
         borderColor: "var(--region-ink)",
         background: "var(--region-wash)",
-        outline: "none",
+        outline: "0",
     },
     "& > span": {
         position: "absolute",
-        insetInlineStart: "-1.5px",
-        bottom: "calc(100% + 4px)",
+        insetInlineStart: "[-1.5px]",
+        bottom: "[calc(100% + 4px)]",
         display: "none",
         alignItems: "center",
-        height: "22px",
-        paddingInline: "6px",
+        height: "[22px]",
+        paddingInline: "[6px]",
         borderRadius: "control",
         background: "var(--region-ink)",
         color: "fg.onAccent",
@@ -194,11 +194,11 @@ const regionButton = css({
         whiteSpace: "nowrap",
         pointerEvents: "none",
     },
-    "&[data-near-top] > span": { bottom: "auto", top: "calc(100% + 4px)" },
+    "&[data-near-top] > span": { bottom: "[auto]", top: "[calc(100% + 4px)]" },
     "&[data-marked] > span, &:focus-visible > span": { display: "inline-flex" },
 });
 const field = css({
-    width: "100%",
+    width: "full",
     padding: "none",
     border: "0",
     borderRadius: "keycap",

package/dist/components/drawer.d.ts

@@ -17,7 +17,8 @@ export type DrawerProps = Omit<ComponentProps<typeof BaseDrawer.Root>, "children
 /**
  * A sheet docked at the window's right edge beside the page, which stays usable: it is not modal
  * and a click outside leaves it open, so Escape or its close button closes it. Pass `modal` or
- * `disablePointerDismissal` to change either.
+ * `disablePointerDismissal` to change either. Closing gives the focus back to what had it when
+ * `open` turned on, such as a button outside the drawer or the page link a hotkey opened it from.
  */
 export declare function Drawer({ title, icon: titleIcon, eyebrow, subtitle, titleAccessory, actions, size, children, ...rootProps }: DrawerProps): import("react").JSX.Element;
 export declare function DrawerBody({ flush, className, ...props }: ComponentProps<"div"> & {

package/dist/components/drawer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
 import { XIcon } from "@phosphor-icons/react";
-import { useId, useMemo } from "react";
+import { useId, useLayoutEffect, useMemo, useRef } from "react";
 import { css, cva, cx } from "#primitives/css";
 import { IconButton } from "./button.js";
 import { FieldControlContext } from "./field-context.js";
@@ -11,9 +11,9 @@ import { Eyebrow, heading } from "./layout.js";
 import { useCiridaeLocale } from "./locale.js";
 const viewport = css({ position: "fixed", inset: "none", zIndex: "drawer", pointerEvents: "none" });
 /*
- * A drawer sits beside the page, which stays usable: no scrim, docked to the window's right edge
- * at full height, a glass shell holding the sheet. The shell's padding is what keeps the sheet off
- * the window's edges, level with the main panel; a phone takes the sheet to the edges.
+ * A drawer sits beside the page, which stays usable: no scrim. The shell's padding is what keeps
+ * the sheet off the window's edges, level with the main panel; a phone takes the sheet to the
+ * edges.
  */
 const popup = cva({
     base: {
@@ -23,41 +23,48 @@ const popup = cva({
         display: "flex",
         padding: "panel.compact",
         pointerEvents: "auto",
-        outline: "none",
+        outline: "0",
         textStyle: "body",
         border: "1px solid token(colors.border.divider)",
         borderRadius: "shell",
         background: "bg.drawerShell",
-        backdropFilter: "blur(token(blurs.drawerShell))",
+        backdropFilter: "[blur(token(blurs.drawerShell))]",
         boxShadow: "drawerShell",
-        _phone: { padding: "none", border: "0", borderRadius: "0" },
+        // A phone's drawer covers the page, so it is opaque there rather than glass the page shows through.
+        _phone: {
+            padding: "none",
+            border: "0",
+            borderRadius: "none",
+            background: "bg.canvas",
+            backdropFilter: "[none]",
+        },
         // Base UI drives live swipe drag through this custom property; the resting
         // transform must reference it or dragging won't visually track the pointer.
         transform: "translateX(var(--drawer-swipe-movement-x, 0px))",
-        transitionProperty: "transform",
+        transitionProperty: "[transform]",
         transitionDuration: "default",
         "&[data-starting-style], &[data-ending-style]": {
             transform: "translateX(100%)",
             _rtl: { transform: "translateX(-100%)" },
         },
-        "&[data-swiping]": { transitionDuration: "0ms" },
-        _motionReduce: { transitionDuration: "0ms" },
+        "&[data-swiping]": { transitionDuration: "[0ms]" },
+        _motionReduce: { transitionDuration: "[0ms]" },
     },
     // The sheet's width, plus the shell's padding and its 1px edge on each side.
     variants: {
         size: {
             // The assistant and a preview.
             narrow: {
-                width: "min(100vw, calc(token(sizes.overlay.sheetNarrow) + token(spacing.panel.compact) * 2 + 2px))",
-                _phone: { width: "100vw" },
+                width: "[min(100vw, calc(token(sizes.overlay.sheetNarrow) + token(spacing.panel.compact) * 2 + 2px))]",
+                _phone: { width: "[100vw]" },
             },
             // Create, edit and act.
             regular: {
-                width: "min(100vw, calc(token(sizes.overlay.sheet) + token(spacing.panel.compact) * 2 + 2px))",
-                _phone: { width: "100vw" },
+                width: "[min(100vw, calc(token(sizes.overlay.sheet) + token(spacing.panel.compact) * 2 + 2px))]",
+                _phone: { width: "[100vw]" },
             },
             // Near the full viewport, for content such as logs that needs the room.
-            large: { width: "calc(100vw - token(spacing.layout.pageGap) * 2)" },
+            large: { width: "[calc(100vw - token(spacing.layout.pageGap) * 2)]" },
         },
     },
     defaultVariants: { size: "regular" },
@@ -74,7 +81,7 @@ const panel = css({
     background: "bg.drawerSheet",
     boxShadow: "soft",
     color: "fg.primary",
-    _phone: { border: "0", borderRadius: "0" },
+    _phone: { border: "0", borderRadius: "none" },
 });
 // At least the app header's height, so on a desktop a title-only sheet's header rule lines up with
 // the main panel's beside it: both start one shell gap from the window's top. Under a subtitle it
@@ -137,8 +144,7 @@ const subtitleStyle = css({
     letterSpacing: "compact",
     lineHeight: "tight",
 });
-// The sheet's mark before its title, muted like the agent sheet's sparkle. A flex row of its own,
-// so the heading stays the title's line high rather than an inline box's.
+// The sheet's mark is a flex row of its own, so the heading stays the title's line high rather than an inline box's.
 const titleMark = css({
     display: "flex",
     alignItems: "center",
@@ -199,16 +205,35 @@ const footerActions = css({ display: "flex", alignItems: "center", gap: "layout.
 /**
  * A sheet docked at the window's right edge beside the page, which stays usable: it is not modal
  * and a click outside leaves it open, so Escape or its close button closes it. Pass `modal` or
- * `disablePointerDismissal` to change either.
+ * `disablePointerDismissal` to change either. Closing gives the focus back to what had it when
+ * `open` turned on, such as a button outside the drawer or the page link a hotkey opened it from.
  */
 export function Drawer({ title, icon: titleIcon, eyebrow, subtitle, titleAccessory, actions, size = "regular", children, ...rootProps }) {
     const { labels, dir } = useCiridaeLocale();
+    const popupRef = useRef(null);
+    const focusedBeforeOpen = useRef(null);
+    useLayoutEffect(() => {
+        if (!rootProps.open)
+            return;
+        const active = document.activeElement;
+        focusedBeforeOpen.current =
+            active instanceof HTMLElement && !popupRef.current?.contains(active) ? active : null;
+    }, [rootProps.open]);
+    // Back where it was, unless something outside has taken it since, such as a field on the page.
+    const returnFocus = () => {
+        const active = document.activeElement;
+        const takenOver = active instanceof HTMLElement &&
+            active !== document.body &&
+            !popupRef.current?.contains(active);
+        const before = focusedBeforeOpen.current;
+        return !takenOver && before?.isConnected ? before : true;
+    };
     // The narrow sheet's title is body size, as the app header's is, beside a 34px close.
     const narrow = size === "narrow";
     const titleClassName = cx(heading({ size: narrow ? "small" : "medium" }), titleStyle);
     const close = (_jsx(BaseDrawer.Close, { render: _jsx(IconButton, { "aria-label": labels.common.close, size: narrow ? "medium" : "small" }), children: _jsx(XIcon, { className: icon({ size: "small" }) }) }));
     const titleContent = titleIcon ? (_jsxs("span", { className: titleMark, children: [titleIcon, title] })) : (title);
-    return (_jsx(BaseDrawer.Root, { modal: false, disablePointerDismissal: true, ...rootProps, swipeDirection: dir === "rtl" ? "left" : "right", children: _jsx(BaseDrawer.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseDrawer.Viewport, { className: viewport, children: _jsx(BaseDrawer.Popup, { className: popup({ size }), "data-ciridae-ui": "", children: _jsxs("div", { className: panel, children: [_jsx("header", { className: header({ size }), children: eyebrow ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: eyebrowLine, children: [eyebrow, _jsxs("div", { className: headerActions, children: [actions, close] })] }), _jsxs("div", { className: css({ display: "grid", gap: "layout.controlGap" }), children: [_jsx(BaseDrawer.Title, { className: displayTitle, children: title }), subtitle && _jsx("p", { className: displaySubtitle, children: subtitle })] })] })) : (_jsxs("div", { className: headerLine({ size }), "data-header-line": "", children: [_jsxs("div", { className: titleBlock, children: [titleAccessory ? (_jsxs("div", { className: titleLine, children: [_jsx(BaseDrawer.Title, { className: titleClassName, children: titleContent }), titleAccessory] })) : (_jsx(BaseDrawer.Title, { className: titleClassName, children: titleContent })), subtitle && (_jsx("p", { className: subtitleStyle, "data-sheet-subtitle": "", children: subtitle }))] }), _jsxs("div", { className: headerActions, children: [actions, close] })] })) }), children] }) }) }) }) }) }));
+    return (_jsx(BaseDrawer.Root, { modal: false, disablePointerDismissal: true, ...rootProps, swipeDirection: dir === "rtl" ? "left" : "right", children: _jsx(BaseDrawer.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseDrawer.Viewport, { className: viewport, children: _jsx(BaseDrawer.Popup, { ref: popupRef, className: popup({ size }), "data-ciridae-ui": "", finalFocus: returnFocus, children: _jsxs("div", { className: panel, children: [_jsx("header", { className: header({ size }), children: eyebrow ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: eyebrowLine, children: [eyebrow, _jsxs("div", { className: headerActions, children: [actions, close] })] }), _jsxs("div", { className: css({ display: "grid", gap: "layout.controlGap" }), children: [titleAccessory ? (_jsxs("div", { className: titleLine, children: [_jsx(BaseDrawer.Title, { className: displayTitle, children: titleContent }), titleAccessory] })) : (_jsx(BaseDrawer.Title, { className: displayTitle, children: titleContent })), subtitle && _jsx("p", { className: displaySubtitle, children: subtitle })] })] })) : (_jsxs("div", { className: headerLine({ size }), "data-header-line": "", children: [_jsxs("div", { className: titleBlock, children: [titleAccessory ? (_jsxs("div", { className: titleLine, children: [_jsx(BaseDrawer.Title, { className: titleClassName, children: titleContent }), titleAccessory] })) : (_jsx(BaseDrawer.Title, { className: titleClassName, children: titleContent })), subtitle && (_jsx("p", { className: subtitleStyle, "data-sheet-subtitle": "", children: subtitle }))] }), _jsxs("div", { className: headerActions, children: [actions, close] })] })) }), children] }) }) }) }) }) }));
 }
 export function DrawerBody({ flush = false, className, ...props }) {
     return (_jsx(BaseDrawer.Content, { ...props, className: cx(body({ flush }), className), "data-ciridae-ui": "" }));

package/dist/components/dropzone.js

@@ -16,12 +16,12 @@ const zone = css({ position: "relative" });
 // While files are over it, the zone dims under a dashed frame that names what a drop does.
 const dropOverlay = css({
     position: "absolute",
-    inset: "0",
+    inset: "none",
     zIndex: "raised",
     display: "grid",
     placeItems: "center",
     padding: "layout.controlGap",
-    background: "color-mix(in srgb, token(colors.bg.surface) 88%, transparent)",
+    background: "[color-mix(in srgb, token(colors.bg.surface) 88%, transparent)]",
     pointerEvents: "none",
     "& > span": {
         display: "flex",
@@ -29,8 +29,8 @@ const dropOverlay = css({
         alignItems: "center",
         justifyContent: "center",
         gap: "layout.controlGap",
-        width: "100%",
-        height: "100%",
+        width: "full",
+        height: "full",
         border: "1px dashed token(colors.border.selected)",
         borderRadius: "action",
         background: "bg.selected",
@@ -56,7 +56,7 @@ const pad = css({
     fontSize: "caption",
     fontWeight: "medium",
     letterSpacing: "compact",
-    transitionProperty: "border-color, color",
+    transitionProperty: "[border-color, color]",
     transitionDuration: "fast",
     "& > svg": { flexShrink: "0" },
     _hover: { borderColor: "border.selected", color: "fg.secondary" },
@@ -99,8 +99,8 @@ const fileMark = css({
     height: "control.mark",
     color: "fg.muted",
     "& img": {
-        width: "100%",
-        height: "100%",
+        width: "full",
+        height: "full",
         objectFit: "cover",
         borderRadius: "control",
     },
@@ -140,10 +140,10 @@ export const fileSquare = css({
     fontSize: "avatar.small",
     lineHeight: "compact",
     textAlign: "center",
-    "& > img": { display: "block", width: "100%", height: "100%", objectFit: "cover" },
+    "& > img": { display: "block", width: "full", height: "full", objectFit: "cover" },
     "&[data-image]": { padding: "none", background: "bg.fill" },
     "& > span": {
-        maxWidth: "100%",
+        maxWidth: "full",
         overflow: "hidden",
         textOverflow: "ellipsis",
         whiteSpace: "nowrap",
@@ -185,10 +185,10 @@ const fileChip = css({
     display: "inline-flex",
     alignItems: "center",
     gap: "layout.tightGap",
-    maxWidth: "100%",
+    maxWidth: "full",
     height: "control.shortcut",
     paddingInlineStart: "control.trackInset",
-    paddingInlineEnd: "1px",
+    paddingInlineEnd: "[1px]",
     border: "1px solid token(colors.border.subtle)",
     borderRadius: "control",
     background: "bg.card",
@@ -206,8 +206,8 @@ const fileChip = css({
     },
     "& > [data-mark] > svg": { fontSize: "icon.compact" },
     "& > [data-mark] > img": {
-        width: "100%",
-        height: "100%",
+        width: "full",
+        height: "full",
         objectFit: "cover",
         borderRadius: "control",
     },

package/dist/components/editable-field.d.ts

@@ -65,18 +65,14 @@ export type EditableFieldProps = Omit<ComponentProps<"div">, "children"> & {
     badge?: ReactNode;
     /** Under the value while the row is idle. */
     note?: ReactNode;
-    /** The field needs the reader: the row lifts on the selected glass and this button sits at its end. */
+    /** With `emphasis="highlighted"` the row keeps the yellow band. */
     action?: {
         label: ReactNode;
         onClick: () => void;
         disabled?: boolean;
     };
-    /** `bottom` by default; `none` for the last row of a list whose container draws its own edge. */
     divider?: "bottom" | "none";
-    /**
-     * `selected` washes the row with the selected glass, such as the field a side panel is
-     * showing; `inset` sets it into the list between hairlines, such as a field set apart.
-     */
+    /** `highlighted` is the yellow band while the agent points at the field. */
     emphasis?: "selected" | "inset" | "highlighted";
     edit?: FieldEdit;
     labels?: Partial<CiridaeLabels["editableField"]>;
@@ -99,7 +95,6 @@ export type SourceConflictProps = Omit<ComponentProps<"div">, "children"> & {
     };
     /** At the effective row's end, such as a Resolve button. */
     action?: ReactNode;
-    /** `highlighted` while the agent points at the field; `neutral` by default. */
     tone?: "highlighted" | "neutral";
     labels?: Partial<{
         effectiveValue: string;

package/dist/components/editable-field.js

@@ -19,12 +19,6 @@ import { Tooltip } from "./overlays.js";
 import { Combobox } from "./select.js";
 /* The row stacks its label over the value in a narrow box, so each field is its own container. */
 const fieldBox = css({ containerType: "inline-size" });
-/*
- * The kit's Detail field: 12 · 16 padding, a hairline under it. A field that needs the reader
- * (the inline edit's Needs confirm) and an inset row wear the selected glass between the selected
- * edge's hairlines; a selected row wears the glass alone; a highlighted row, while the agent points
- * at it, is the flat yellow band between hairlines.
- */
 const fieldRow = css({
     position: "relative",
     display: "grid",
@@ -39,28 +33,27 @@ const fieldRow = css({
     letterSpacing: "compact",
     "& > :last-child": { alignSelf: "center" },
     "&[data-needs]": {
-        background: "token(gradients.selected)",
+        background: "[token(gradients.selected)]",
         borderBlock: "1px solid",
         borderImage: "token(gradients.border.selected) 1",
     },
     // After the band's hairlines, so a last highlighted row keeps only its top one, as the kit's.
     "&[data-divider=none]": { borderBottom: "0" },
-    "&[data-emphasis=selected]": { background: "token(gradients.selected)" },
+    "&[data-emphasis=selected]": { background: "[token(gradients.selected)]" },
     "&[data-emphasis=inset]": {
-        background: "token(gradients.selected)",
+        background: "[token(gradients.selected)]",
         borderBlock: "1px solid",
         borderImage: "token(gradients.border.selected) 1",
     },
-    // The kit's Highlighted detail field: the yellow band while the agent points at the field.
     "&[data-emphasis=highlighted]": {
         background: "bg.warningTint",
         borderBlock: "1px solid token(colors.border.divider)",
     },
     "&[data-editable]": {
         cursor: "pointer",
-        _hover: { background: "token(gradients.card)", _light: { background: "bg.rowHover" } },
+        _hover: { background: "[token(gradients.card)]", _light: { background: "bg.rowHover" } },
     },
-    "&[data-editable]:is(:hover, :focus-within) [data-affordance], &[data-editing] [data-affordance]": { opacity: "1" },
+    "&[data-editable]:is(:hover, :focus-within) [data-affordance], &[data-editing] [data-affordance]": { opacity: "[1]" },
     "@container (max-width: 520px)": {
         gridTemplateColumns: "minmax(0, 1fr) auto",
         rowGap: "layout.tightGap",
@@ -91,7 +84,7 @@ const valueButton = css({
     border: "0",
     borderRadius: "control",
     background: "transparent",
-    color: "inherit",
+    color: "[inherit]",
     font: "inherit",
     textAlign: "start",
     cursor: "pointer",
@@ -99,8 +92,8 @@ const valueButton = css({
 });
 const affordance = css({
     color: "fg.muted",
-    opacity: "0",
-    transitionProperty: "opacity",
+    opacity: "[0]",
+    transitionProperty: "[opacity]",
     transitionDuration: "fast",
 });
 const lockMark = css({ display: "inline-flex", color: "fg.muted" });
@@ -143,7 +136,7 @@ const sourceLink = css({
     padding: "none",
     border: "0",
     background: "transparent",
-    color: "inherit",
+    color: "[inherit]",
     font: "inherit",
     cursor: "pointer",
     textAlign: "start",
@@ -161,20 +154,19 @@ const fieldNote = css({
     fontWeight: "medium",
     lineHeight: "tight",
 });
-const editor = css({ width: "200px", maxWidth: "100%" });
+const editor = css({ width: "[200px]", maxWidth: "full" });
 const editorValue = css({ position: "relative", display: "flex", alignItems: "center" });
 const tooltipTitle = css({ display: "block", fontWeight: "medium" });
-const tooltipDetail = css({ display: "block", fontSize: "code", opacity: "0.8" });
+const tooltipDetail = css({ display: "block", fontSize: "code", opacity: "[0.8]" });
 const trailingActions = css({ display: "inline-flex", gap: "layout.tightGap" });
 /* The calendar opens above the date editor, on the menus' glass sheet. */
 const calendarPicker = css(glassMenuSurface, {
     position: "absolute",
-    bottom: "calc(100% + token(spacing.control.iconGap))",
-    insetInlineStart: "0",
+    bottom: "[calc(100% + token(spacing.control.iconGap))]",
+    insetInlineStart: "none",
     zIndex: "popover",
     cursor: "default",
 });
-// Under the days, inset as the calendar is, such as the value it had before.
 const calendarFooter = css({
     paddingInline: "panel.compact",
     paddingBottom: "panel.compact",
@@ -388,13 +380,8 @@ export function EditableField({ label, value, provenance, badge, note, action, d
         }
         return _jsx("span", {});
     };
-    return (_jsx("div", { ...props, className: cx(fieldBox, className), "data-ciridae-ui": "", children: _jsxs("div", { ref: rowRef, className: fieldRow, "data-needs": action && !editing ? "" : undefined, "data-divider": divider, "data-emphasis": emphasis, "data-editable": editable && !editing ? "" : undefined, "data-editing": editing ? "" : undefined, onClick: begin, children: [_jsx("span", { className: fieldLabel, id: labelId, "data-label": "", children: label }), _jsxs("span", { className: css({ minWidth: "0" }), children: [valueLine(), _jsx("span", { role: "status", children: statusLine() }), note !== undefined && status.mode === "idle" && (_jsx("span", { className: fieldNote, children: note }))] }), trailing()] }) }));
+    return (_jsx("div", { ...props, className: cx(fieldBox, className), "data-ciridae-ui": "", children: _jsxs("div", { ref: rowRef, className: fieldRow, "data-needs": action && !editing && emphasis !== "highlighted" ? "" : undefined, "data-divider": divider, "data-emphasis": emphasis, "data-editable": editable && !editing ? "" : undefined, "data-editing": editing ? "" : undefined, onClick: begin, children: [_jsx("span", { className: fieldLabel, id: labelId, "data-label": "", children: label }), _jsxs("span", { className: css({ minWidth: "0" }), children: [valueLine(), _jsx("span", { role: "status", children: statusLine() }), note !== undefined && status.mode === "idle" && (_jsx("span", { className: fieldNote, children: note }))] }), trailing()] }) }));
 }
-/*
- * Source conflict: each source's value under a disputed field, then the value in effect. The
- * kit's Contested sources: flat and square between hairlines, the yellow band while the agent
- * points at the field, the panel's face otherwise (the grey well in light).
- */
 const conflictBlock = css({
     display: "grid",
     gap: "layout.controlGap",

package/dist/components/email-input.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { css, cx } from "#primitives/css";
 import { Chip } from "./chip.js";
 import { useFieldControl } from "./field-context.js";
-// The field face `Input` wears, holding chips that wrap onto more lines as they fill it.
 const emailField = css({
     display: "flex",
     flexWrap: "wrap",
@@ -28,9 +27,9 @@ const draftInput = css({
     fontSize: "caption",
     height: "control.shortcut",
     paddingInline: "control.compactInline",
-    outline: "none",
+    outline: "0",
     _placeholder: { color: "fg.subtle" },
-    _focusVisible: { outline: "none", boxShadow: "none" },
+    _focusVisible: { outline: "0", boxShadow: "[none]" },
 });
 /** Comma, semicolon, whitespace, Enter, Tab, or blur commits addresses; duplicates are ignored. */
 export function EmailInput({ value, onValueChange, inputValue, onInputValueChange, invalidEmails = [], disabled, className, onKeyDown, onBlur, onPaste, ...props }) {

package/dist/components/environment-frame.js

@@ -6,31 +6,31 @@ import { SiteBanner } from "./site-banner.js";
 const frame = css({
     display: "flex",
     flexDirection: "column",
-    height: "100dvh",
-    width: "100%",
+    height: "[100dvh]",
+    width: "full",
 });
 const environmentBanner = css({
     // Align with the outer edges of the sidebar controls, not their inset labels.
-    paddingInlineStart: "calc(token(spacing.panel.compact) + token(spacing.panel.default))",
+    paddingInlineStart: "[calc(token(spacing.panel.compact) + token(spacing.panel.default))]",
     _phone: { paddingInlineStart: "panel.default" },
 });
 const viewport = css({
     flex: "1",
     minHeight: "0",
     overflow: "hidden",
-    background: "token(gradients.canvas)",
+    background: "[token(gradients.canvas)]",
     // Only under the environment strip does the app read as inset below it.
     "&[data-under-banner]": {
         borderTopRadius: "field",
-        boxShadow: "inset 0 2px 4px rgba(0, 0, 0, 0.18)",
+        boxShadow: "[inset 0 2px 4px rgba(0, 0, 0, 0.18)]",
     },
     // Keep the shell and its phone layout within the space below the site banner. On a desktop the
     // shell's row sizes the main panel inside its block margins, so a full height would push it past
     // them; a phone's main panel is a full window tall, so there it takes the space under the strip.
-    "& > [data-ciridae-ui]": { height: "100%", background: "transparent" },
+    "& > [data-ciridae-ui]": { height: "full", background: "transparent" },
     "& > [data-ciridae-ui] > main": {
         borderRadius: "inset",
-        _phone: { borderRadius: "0", height: "100%" },
+        _phone: { borderRadius: "none", height: "full" },
     },
     "& > [data-ciridae-ui] > main > header": {
         paddingInlineStart: "page.inline",

package/dist/components/expandable-text.js

@@ -12,10 +12,10 @@ const collapsedWrapper = css({
 const expandedWrapper = css({ display: "grid", justifyItems: "start", minWidth: "0" });
 const clamped = css({ lineClamp: "2", minWidth: "0" });
 const toggle = css({
-    padding: "0",
+    padding: "none",
     border: "0",
     background: "transparent",
-    color: "inherit",
+    color: "[inherit]",
     font: "inherit",
     textDecoration: "underline",
     whiteSpace: "nowrap",