@ciridae/ui 1.0.5 → 1.0.9

package/dist/components/radio-card.js

@@ -13,7 +13,7 @@ const card = css({
     display: "flex",
     alignItems: "flex-start",
     gap: "layout.contentGap",
-    width: "100%",
+    width: "full",
     padding: "panel.default",
     border: "1px solid token(colors.border.control)",
     borderRadius: "action",
@@ -26,11 +26,11 @@ const card = css({
     lineHeight: "tight",
     textAlign: "start",
     cursor: "pointer",
-    transitionProperty: "background, border-color",
+    transitionProperty: "[background, border-color]",
     transitionDuration: "fast",
-    _hover: { background: "token(gradients.raisedHover)" },
+    _hover: { background: "[token(gradients.raisedHover)]" },
     "&[data-checked]": {
-        background: "token(gradients.selected)",
+        background: "[token(gradients.selected)]",
         borderColor: "fg.primary",
     },
     _focusVisible: { focusRing: "outer" },
@@ -40,13 +40,13 @@ const card = css({
 const mark = css({
     // Centered on the title's first line, which is one `em` tall, so a detail line below it can't pull
     // the mark down.
-    marginTop: "calc((1em - token(sizes.control.radio)) / 2)",
+    marginTop: "[calc((1em - token(sizes.control.radio)) / 2)]",
     "[data-checked] > &": {
-        background: "token(gradients.primary)",
-        _light: { background: "token(gradients.primary)" },
-        _before: { background: "token(gradients.border.primary)" },
+        background: "[token(gradients.primary)]",
+        _light: { background: "[token(gradients.primary)]" },
+        _before: { background: "[token(gradients.border.primary)]" },
     },
-    "[data-checked]:hover > &": { opacity: "checkedHover", _light: { opacity: "1" } },
+    "[data-checked]:hover > &": { opacity: "checkedHover", _light: { opacity: "[1]" } },
 });
 const copy = css({ flex: "1", minWidth: "0", display: "grid", gap: "layout.tightGap" });
 const detailText = css({ color: "fg.muted", fontSize: "code" });

package/dist/components/record.d.ts

@@ -48,7 +48,6 @@ export type ItemCardField = {
 };
 export type ItemCardProps = Omit<useRender.ComponentProps<"button">, "children" | "onSelect"> & {
     title: ReactNode;
-    /** One dot per stage, in its status. */
     progress?: readonly StepStatus[];
     fields: readonly ItemCardField[];
     /** The footer's start: the stage the item is at. */
@@ -63,16 +62,15 @@ export type ItemCardProps = Omit<useRender.ComponentProps<"button">, "children"
     onSelect?: () => void;
     href?: string;
 };
-export declare function ItemCard({ title, progress, fields, status, footer, selected, onSelect, href, render, className, style, ...props }: ItemCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function ItemCard({ title, progress, fields, status, footer, selected, onSelect, onClick, href, render, className, style, ...props }: ItemCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type PartRowProps = Omit<ComponentProps<"div">, "children" | "onSelect"> & {
     /** `wide` is one line, as in a table; `compact` stacks for a narrow column. */
     layout?: "wide" | "compact";
     name: ReactNode;
     /** Under the name, such as the part's phase and amount. */
     detail?: ReactNode;
-    /** One dot per step, in its status; the kit draws at most four. */
+    /** One dot per step, in its status. */
     progress: readonly StepStatus[];
-    /** The stage the part is at. */
     stage: ReactNode;
     /** Whose move it is: `yourMove` sets the next step in the ink, the others in grey. */
     state: "yourMove" | "waiting" | "done" | "notStarted";

package/dist/components/record.js

@@ -2,9 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /*
  * The pieces a record's page is laid out with. `DetailLayout` splits it into the work and a side
  * column; `PageHeading` (also exported here) is the record's title row; `RelatedTabs` is the tabbed card of what the
- * record holds; `ItemCard` is one of a record's parts, such as a shipment or a draw, as a card and `PartRow` as
- * a row; `RelatedList`
- * lists the records and documents it points at.
+ * record holds; `ItemCard` is one of a record's parts, such as a shipment or a draw, as a card and
+ * `PartRow` as a row; `RelatedList` lists the records and documents it points at.
  */
 import { useRender } from "@base-ui/react/use-render";
 import { CaretRightIcon } from "@phosphor-icons/react";
@@ -47,9 +46,9 @@ const detailAside = css({
     _notWide: {
         "[data-sticky-aside]:not([data-stacked]) > &": {
             position: "sticky",
-            top: "0",
+            top: "none",
             alignSelf: "start",
-            height: "calc(100dvh - token(spacing.panel.compact) * 2 - token(sizes.shell.header) - var(--app-content-inset) * 2 - 3px)",
+            height: "[calc(100dvh - token(spacing.panel.compact) * 2 - token(sizes.shell.header) - var(--app-content-inset) * 2 - 3px)]",
         },
     },
 });
@@ -101,7 +100,7 @@ const relatedHeader = css({
     gap: "layout.controlGap",
     minHeight: "control.field",
     paddingInlineEnd: "panel.default",
-    "& > :first-child": { minWidth: "0", maxWidth: "100%" },
+    "& > :first-child": { minWidth: "0", maxWidth: "full" },
 });
 // Wrapped under the tabs, the meta keeps the rows' inset.
 const relatedMeta = css({ paddingInlineStart: "control.block", fontSize: "code" });
@@ -112,10 +111,6 @@ export function RelatedTabs({ tabs, value, defaultValue, onValueChange, classNam
         return null;
     return (_jsxs(TabsRoot, { value: open.value, onValueChange: (next) => setChosen(String(next)), ...props, className: cx(relatedCard, className), "data-ciridae-ui": "", children: [_jsxs("div", { className: relatedHeader, children: [_jsx(TabsList, { variant: "contained", children: tabs.map((tab) => (_jsx(TabsTab, { value: tab.value, count: tab.count, children: tab.label }, tab.value))) }), open.meta !== undefined && _jsx(MutedText, { className: relatedMeta, children: open.meta })] }), tabs.map((tab) => (_jsx(TabsPanel, { value: tab.value, children: tab.content }, tab.value)))] }));
 }
-/*
- * Item card: one of a record's parts, the kit's Part card, with its progress as a mini strip of
- * step dots. The chosen one lifts onto the solid card inside a green edge.
- */
 const itemCard = css(cardSurface, {
     display: "grid",
     gap: "layout.clusterGap",
@@ -149,15 +144,13 @@ const progressStrip = css({
     alignItems: "center",
     gap: "layout.tightGap",
 });
-// 16px between dots, green out of a finished step as the stage strip's connectors are.
 const progressConnector = css({
-    width: "token(spacing.layout.clusterGap)",
+    width: "[token(spacing.layout.clusterGap)]",
     height: "border.hairline",
     borderRadius: "round",
     background: "border.divider",
     "&[data-after=done]": { background: "accent.green" },
 });
-/** A part's progress: one 12px dot a step, joined by 16px connectors. */
 function MiniStrip({ progress }) {
     return (_jsx("span", { className: progressStrip, "aria-hidden": "true", children: progress.map((step, index) => (_jsxs(Fragment, { children: [index > 0 && (_jsx("span", { className: progressConnector, "data-after": progress[index - 1] === "done" ? "done" : undefined })), _jsx(StepDot, { status: step, size: "chip" })] }, index))) }));
 }
@@ -173,7 +166,7 @@ const itemFieldLabel = css({
     marginBottom: "layout.controlGap",
     color: "fg.subtle",
     fontWeight: "regular",
-    letterSpacing: "normal",
+    letterSpacing: "[normal]",
 });
 const itemFooter = css({
     display: "flex",
@@ -187,7 +180,7 @@ const itemFooter = css({
     fontWeight: "medium",
 });
 const itemStatus = css({ display: "inline-flex", alignItems: "center", gap: "layout.tightGap" });
-export function ItemCard({ title, progress, fields, status, footer, selected = false, onSelect, href, render, className, style, ...props }) {
+export function ItemCard({ title, progress, fields, status, footer, selected = false, onSelect, onClick, href, render, className, style, ...props }) {
     const interactive = onSelect !== undefined || href !== undefined || render !== undefined;
     const columns = {
         gridTemplateColumns: fields.map((field) => `minmax(0, ${field.weight ?? 1}fr)`).join(" "),
@@ -199,7 +192,10 @@ export function ItemCard({ title, progress, fields, status, footer, selected = f
             ...(href !== undefined ? { href } : interactive ? { type: "button" } : {}),
             ...props,
             style,
-            onClick: onSelect,
+            onClick: (event) => {
+                onClick?.(event);
+                onSelect?.();
+            },
             className: cx(itemCard, className),
             "data-ciridae-ui": "",
             "data-selected": selected || undefined,
@@ -208,18 +204,12 @@ export function ItemCard({ title, progress, fields, status, footer, selected = f
         },
     });
 }
-/*
- * Part row: one of a record's parts as a table-like row, the kit's Part in its Wide and Compact
- * layouts: name over detail, the mini strip, the stage, a badge for the reader's move, the next
- * step and at most one action. Wide keeps it on one 56px line, wrapping the detail and next step
- * only when the row is narrow; compact stacks the name and strip over the rest. The whole row chooses the part through its name; the action stays its own button.
- */
 const partRow = css({
     position: "relative",
     display: "flex",
     alignItems: "center",
     gap: "layout.clusterGap",
-    minHeight: "calc(token(sizes.control.compact) + token(spacing.panel.default) * 2)",
+    minHeight: "[calc(token(sizes.control.compact) + token(spacing.panel.default) * 2)]",
     paddingBlock: "panel.default",
     paddingInline: "panel.comfortable",
     borderBottom: "1px solid token(colors.border.divider)",
@@ -227,7 +217,7 @@ const partRow = css({
     letterSpacing: "compact",
     lineHeight: "tight",
     "&:has([data-part-name]:hover)": { background: "bg.rowHover" },
-    "&[data-selected]": { background: "token(gradients.selected)" },
+    "&[data-selected]": { background: "[token(gradients.selected)]" },
     // Wide is a grid, so the strips and stages of a list of parts line up. The name and the next
     // step share what the strip, stage and action leave, two parts to three, close to the kit's
     // 240 and 488 in its 1092 row, so a narrow row narrows both rather than starving one.
@@ -251,7 +241,7 @@ const partLine = css({
 const partName = css({
     display: "grid",
     gap: "control.trackInset",
-    flex: "1 1 0",
+    flex: "[1 1 0]",
     minWidth: "0",
     textAlign: "start",
     "& > *": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
@@ -266,8 +256,8 @@ const partNameButton = css({
     fontSize: "body",
     textAlign: "start",
     cursor: "pointer",
-    _after: { content: '""', position: "absolute", inset: "0" },
-    _focusVisible: { outline: "none", _after: { focusRing: "inset" } },
+    _after: { content: '""', position: "absolute", inset: "none" },
+    _focusVisible: { outline: "0", _after: { focusRing: "inset" } },
 });
 // A narrow wide row wraps the detail rather than cut off its amount.
 const partDetail = css({
@@ -289,7 +279,6 @@ const partStatus = css({
     flexShrink: "0",
     "[data-layout=wide] > * > &": { display: "contents" },
 });
-// Wide sets the badge after the stage, in the next step's cell; compact leads the status with it.
 const partNextCell = css({
     display: "flex",
     alignItems: "center",
@@ -302,7 +291,6 @@ const partBadge = css({
     flexShrink: "0",
     "[data-layout=compact] &": { order: "-1" },
 });
-// The step the reader acts on wraps in a narrow row, never cut short.
 const partNext = css({
     minWidth: "0",
     color: "fg.secondary",
@@ -310,7 +298,6 @@ const partNext = css({
     lineHeight: "compact",
     "[data-state=yourMove] &": { color: "fg.primary" },
 });
-// The action sits over the stretched name, so it stays its own button.
 const partAction = css({ position: "relative", flexShrink: "0" });
 export function PartRow({ layout = "wide", name, detail, progress, stage, state, badge, next, action, selected = false, onSelect, className, ...props }) {
     return (_jsxs("div", { ...props, className: cx(partRow, className), "data-ciridae-ui": "", "data-layout": layout, "data-state": state, "data-selected": selected || undefined, children: [_jsxs("span", { className: partLine, children: [_jsxs("span", { className: partName, children: [onSelect ? (_jsx("button", { type: "button", className: partNameButton, "data-part-name": "", "aria-pressed": selected, onClick: onSelect, children: name })) : (_jsx("span", { className: css({ fontSize: "body" }), children: name })), layout === "wide" && detail !== undefined && (_jsx("span", { className: partDetail, children: detail }))] }), _jsx(MiniStrip, { progress: progress })] }), _jsxs("span", { className: partLine, children: [layout === "compact" && _jsx("span", { className: cx(partName, partDetail), children: detail }), _jsxs("span", { className: partStatus, children: [_jsx("span", { className: partStage, children: stage }), _jsxs("span", { className: partNextCell, children: [badge !== undefined && _jsx("span", { className: partBadge, children: badge }), _jsx("span", { className: partNext, children: next })] }), action && (_jsx(Button, { variant: "secondary", className: partAction, onClick: action.onClick, children: action.label }))] })] })] }));
@@ -335,7 +322,7 @@ const relatedRow = css({
     display: "flex",
     alignItems: "center",
     gap: "layout.contentGap",
-    width: "100%",
+    width: "full",
     padding: "panel.default",
     border: "0",
     borderRadius: "action",
@@ -347,7 +334,7 @@ const relatedRow = css({
     // The kit's Linked record hovers to the selected glass in dark and the row wash in light.
     "&:is(button, a)": {
         cursor: "pointer",
-        _hover: { background: "token(gradients.selected)", _light: { background: "bg.rowHover" } },
+        _hover: { background: "[token(gradients.selected)]", _light: { background: "bg.rowHover" } },
     },
     _focusVisible: { focusRing: "outer" },
 });

package/dist/components/scroll-area.js

@@ -18,28 +18,28 @@ const viewport = css({
 const scrollbar = css({
     zIndex: "scrollbar",
     display: "flex",
-    padding: "1px",
-    opacity: "0.7",
-    transitionProperty: "opacity",
+    padding: "[1px]",
+    opacity: "[0.7]",
+    transitionProperty: "[opacity]",
     transitionDuration: "fast",
     "&[data-orientation=vertical]": {
         width: "scroll.bar",
-        marginBlock: "2px",
-        marginInlineEnd: "1px",
+        marginBlock: "[2px]",
+        marginInlineEnd: "[1px]",
     },
     "&[data-orientation=horizontal]": {
         height: "scroll.bar",
-        marginInline: "2px",
-        marginBottom: "1px",
+        marginInline: "[2px]",
+        marginBottom: "[1px]",
     },
-    "&[data-hovering], &[data-scrolling]": { opacity: "1" },
+    "&[data-hovering], &[data-scrolling]": { opacity: "[1]" },
 });
 // Base UI sizes the thumb along its track; it fills the track's other axis.
 const thumb = css({
     borderRadius: "round",
     background: "border.control",
-    "&[data-orientation=vertical]": { width: "100%" },
-    "&[data-orientation=horizontal]": { height: "100%" },
+    "&[data-orientation=vertical]": { width: "full" },
+    "&[data-orientation=horizontal]": { height: "full" },
 });
 /**
  * A region that scrolls inside its own bounds and shows a slim scrollbar while it overflows. Size

package/dist/components/segmented-bar.js

@@ -10,7 +10,7 @@ import { css, cva, cx } from "#primitives/css";
 import { useCiridaeLocale } from "./locale.js";
 import { Popover } from "./overlays.js";
 const root = css({ display: "flex", flexDirection: "column", gap: "layout.sectionGap" });
-const bar = css({ display: "flex", gap: "layout.tightGap", height: "8px" });
+const bar = css({ display: "flex", gap: "layout.tightGap", height: "[8px]" });
 // The chart's data marks, so a segment and its swatch match the series in a chart.
 const toneColor = cva({
     variants: {
@@ -25,15 +25,15 @@ const toneColor = cva({
     },
 });
 const segmentButton = css({
-    minWidth: "8px",
-    height: "100%",
-    padding: "0",
+    minWidth: "[8px]",
+    height: "full",
+    padding: "none",
     border: "0",
     borderRadius: "round",
     cursor: "pointer",
-    transitionProperty: "opacity",
+    transitionProperty: "[opacity]",
     transitionDuration: "fast",
-    "&[data-dimmed]": { opacity: "0.5" },
+    "&[data-dimmed]": { opacity: "[0.5]" },
     _focusVisible: { focusRing: "outer" },
 });
 const legendRow = css({
@@ -60,9 +60,9 @@ const legendKey = css({
     color: "fg.secondary",
     fontSize: "code",
 });
-const swatch = css({ width: "6px", height: "12px", borderRadius: "control" });
+const swatch = css({ width: "[6px]", height: "[12px]", borderRadius: "control" });
 export function SegmentedBar({ segments, legend = true, renderDetail, onSegmentSelect, formatValue, className, ...props }) {
-    const { formatNumber } = useCiridaeLocale();
+    const { formatNumber, labels } = useCiridaeLocale();
     const format = formatValue ?? ((value) => formatNumber(value));
     const [markedId, setMarkedId] = useState(null);
     const mark = (id, marked) => setMarkedId((current) => (marked ? id : current === id ? null : current));
@@ -74,7 +74,7 @@ export function SegmentedBar({ segments, legend = true, renderDetail, onSegmentS
                     .filter((segment) => segment.value > 0)
                     .map((segment) => {
                     const color = colorOf(segment);
-                    const button = (_jsx("button", { type: "button", className: cx(segmentButton, color.className), style: { ...color.style, flexGrow: segment.value, flexBasis: 0 }, "aria-label": `${segment.label}, ${format(segment.value)}`, "data-dimmed": markedId !== null && markedId !== segment.id ? "" : undefined, onClick: onSegmentSelect && (() => onSegmentSelect(segment)), onMouseEnter: renderDetail ? undefined : () => mark(segment.id, true), onMouseLeave: renderDetail ? undefined : () => mark(segment.id, false) }));
+                    const button = (_jsx("button", { type: "button", className: cx(segmentButton, color.className), style: { ...color.style, flexGrow: segment.value, flexBasis: 0 }, "aria-label": labels.common.labelWithValue(segment.label, format(segment.value)), "data-dimmed": markedId !== null && markedId !== segment.id ? "" : undefined, onClick: onSegmentSelect && (() => onSegmentSelect(segment)), onMouseEnter: renderDetail ? undefined : () => mark(segment.id, true), onMouseLeave: renderDetail ? undefined : () => mark(segment.id, false) }));
                     if (!renderDetail)
                         return _jsx(Fragment, { children: button }, segment.id);
                     return (_jsx(Popover, { openOnHover: true, density: "compact", width: "narrow", onOpenChange: (open) => mark(segment.id, open), trigger: button, children: renderDetail(segment) }, segment.id));

package/dist/components/select.d.ts

@@ -18,10 +18,7 @@ export type SelectProps = {
     label?: string;
     /** `medium` is the Round 2 field height; `small` is the pill beside other filters. */
     size?: ControlSize;
-    /**
-     * Defaults to the flat `field` at medium and the glass `raised` face when small. `underline` is
-     * a 34px row control at the body size, such as a table footer's rows per page, whatever `size`.
-     */
+    /** `underline` is a 34px row control at the body size, whatever `size`. */
     variant?: "field" | "raised" | "underline";
     /** Submits the value with an enclosing form under this name. */
     name?: string;
@@ -37,7 +34,8 @@ export type SlicerProps = Omit<SelectProps, "size" | "variant" | "placeholder">
 export declare function Slicer({ options, value, onValueChange, label, name, required, disabled, }: SlicerProps): import("react").JSX.Element;
 export type ComboboxProps<Option extends SelectOption> = {
     options: readonly Option[];
-    value?: string;
+    /** The chosen option's value; `undefined` for none. A combobox is controlled: set it from `onValueChange`. */
+    value: string | undefined;
     onValueChange?: (value: string | null) => void;
     /** The locale's "Search…" by default. */
     placeholder?: string;

package/dist/components/select.js

@@ -8,18 +8,13 @@ import { useEffect, useRef, useState } from "react";
 import { css, cva, cx } from "#primitives/css";
 import { Button } from "./button.js";
 import { useFieldControl, useInField } from "./field-context.js";
-import { glassMenuDivider, glassMenuRow, glassMenuSurface } from "./glass-menu.js";
+import { glassMenuDivider, glassMenuOffsetFromTrigger, glassMenuRow, glassMenuSurface, } from "./glass-menu.js";
 import { faceEdge } from "./gradient-edge.js";
 import { HotkeyLayer } from "./hotkeys.js";
 import { icon, Spinner } from "./icon.js";
 import { useCiridaeLocale } from "./locale.js";
 import { Popover } from "./overlays.js";
-/*
- * Round 2 draws three select triggers. `field` is the input's flat well, for a form. `raised` is
- * the glass face of a toolbar control; at the compact size it is a pill. `underline` has no face,
- * only a bottom hairline, for a control set in a row such as a table footer. Open, every one draws
- * its edge in the text color, and its menu floats just below it.
- */
+/* Open, every one of the three triggers draws its edge in the text color. */
 const trigger = cva({
     base: {
         display: "inline-flex",
@@ -35,7 +30,7 @@ const trigger = cva({
         letterSpacing: "compact",
         whiteSpace: "nowrap",
         cursor: "pointer",
-        transitionProperty: "background, border-color",
+        transitionProperty: "[background, border-color]",
         transitionDuration: "fast",
         "&[data-popup-open]": { borderColor: "fg.primary" },
         _focusVisible: { focusRing: "outer" },
@@ -48,27 +43,23 @@ const trigger = cva({
                 background: "bg.formField",
                 borderColor: "border.control",
                 _hover: {
-                    background: "linear-gradient(token(colors.bg.controlHover), token(colors.bg.controlHover)), token(colors.bg.formField)",
+                    background: "[linear-gradient(token(colors.bg.controlHover), token(colors.bg.controlHover)), token(colors.bg.formField)]",
                 },
                 // Open, the well rests under the pointer too; only the edge changes.
                 "&[data-popup-open]:hover": { background: "bg.formField" },
             },
-            /*
-             * The hairline is `toolbarEdge` on the trigger; the border stays clear for it. The face is
-             * the selected tint, and hovers to the raised face.
-             */
+            // The hairline is `toolbarEdge` on the trigger; the border stays clear for it.
             raised: {
-                background: "token(gradients.selected)",
+                background: "[token(gradients.selected)]",
                 borderColor: "transparent",
-                _hover: { background: "token(gradients.raisedHover)" },
+                _hover: { background: "[token(gradients.raisedHover)]" },
                 // Open, the face rests under the pointer too; only the edge changes.
-                "&[data-popup-open]:hover": { background: "token(gradients.selected)" },
+                "&[data-popup-open]:hover": { background: "[token(gradients.selected)]" },
             },
-            // The caret takes the secondary ink beside the value.
             underline: {
                 borderWidth: "0 0 1px",
                 borderColor: "border.control",
-                borderRadius: "0",
+                borderRadius: "none",
                 background: "transparent",
                 "& svg": { color: "fg.muted" },
             },
@@ -86,7 +77,6 @@ const trigger = cva({
     compoundVariants: [
         { variant: "raised", size: "compact", css: { borderRadius: "pill" } },
         { variant: "raised", size: "regular", css: { gap: "layout.controlGap" } },
-        // A row's height at the body size, sized to its value.
         {
             variant: "underline",
             size: "regular",
@@ -103,8 +93,6 @@ const trigger = cva({
 const toolbarEdge = faceEdge("toolbar");
 /** The positioner is the positioned element, so it carries the stacking order. */
 const positioner = css({ zIndex: "popover" });
-/** How far a menu floats from its trigger, in px. */
-const menuGap = 4;
 /* The menu floats on the glass sheet just below its trigger, at least the trigger's width. A
    compact trigger is sized to its value, so its menu may run wider to keep every option whole. A
    long list stops at `overlay.menuList`, or the room left in the viewport, and scrolls inside. */
@@ -112,9 +100,9 @@ const popupStyle = css.raw(glassMenuSurface, {
     display: "flex",
     flexDirection: "column",
     width: "var(--anchor-width)",
-    maxHeight: "min(token(sizes.overlay.menuList), var(--available-height))",
+    maxHeight: "[min(token(sizes.overlay.menuList), var(--available-height))]",
 });
-const compactPopupStyle = css.raw({ width: "max-content", minWidth: "var(--anchor-width)" });
+const compactPopupStyle = css.raw({ width: "[max-content]", minWidth: "var(--anchor-width)" });
 const popup = {
     regular: css(popupStyle),
     compact: css(popupStyle, compactPopupStyle),
@@ -125,7 +113,6 @@ const itemStyle = css.raw(glassMenuRow, {
     "& > :first-child": { minWidth: "0", overflow: "hidden", textOverflow: "ellipsis" },
     whiteSpace: "nowrap",
 });
-// A compact trigger's menu reads at the trigger's own text size.
 const item = {
     regular: css(itemStyle),
     compact: css(itemStyle, { fontSize: "caption" }),
@@ -137,7 +124,7 @@ function density(size) {
     return size === "small" ? "compact" : "regular";
 }
 function SelectMenu({ options, popupClassName, itemClassName, }) {
-    return (_jsx(BaseSelect.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseSelect.Positioner, { className: positioner, sideOffset: menuGap, align: "start", alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: popupClassName, "data-ciridae-ui": "", children: _jsx(BaseSelect.List, { className: list, children: options.map((option) => (_jsxs(BaseSelect.Item, { className: itemClassName, value: option.value, children: [_jsx(BaseSelect.ItemText, { children: option.label }), _jsx(BaseSelect.ItemIndicator, { className: itemIndicator, children: _jsx(CheckIcon, { className: icon({ size: "small" }) }) })] }, option.value))) }) }) }) }) }));
+    return (_jsx(BaseSelect.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseSelect.Positioner, { className: positioner, sideOffset: glassMenuOffsetFromTrigger, align: "start", alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { className: popupClassName, "data-ciridae-ui": "", children: _jsx(BaseSelect.List, { className: list, children: options.map((option) => (_jsxs(BaseSelect.Item, { className: itemClassName, value: option.value, children: [_jsx(BaseSelect.ItemText, { children: option.label }), _jsx(BaseSelect.ItemIndicator, { className: itemIndicator, children: _jsx(CheckIcon, { className: icon({ size: "small" }) }) })] }, option.value))) }) }) }) }) }));
 }
 export function Select({ options, value, onValueChange, placeholder, label, size: controlSize = "small", variant = controlSize === "small" ? "raised" : "field", name, required, disabled, }) {
     const { labels } = useCiridaeLocale();
@@ -160,20 +147,17 @@ const slicerTrigger = css({
 const slicerLabel = css({ color: "fg.muted", _light: { color: "fg.secondary" } });
 const slicerValue = css({ flex: "1", textAlign: "start" });
 /** A combobox role takes no name from its content, so a slicer names its dimension and value. */
-function slicerName(label, options, value) {
-    const chosen = options.find((option) => option.value === value);
+function slicerName(label, chosen) {
     return chosen ? `${label}: ${chosen.label}` : label;
 }
 export function Slicer({ options, value, onValueChange, label, name, required, disabled, }) {
-    return (_jsxs(BaseSelect.Root, { items: options, value: value, onValueChange: onValueChange, name: name, required: required, disabled: disabled, children: [_jsxs(BaseSelect.Trigger, { className: cx(trigger({ variant: "raised", size: "compact" }), slicerTrigger, toolbarEdge.className), "aria-label": slicerName(label, options, value), "data-ciridae-ui": "", "data-edge": toolbarEdge["data-edge"], children: [_jsx("span", { className: slicerLabel, "data-slicer-label": "", children: label }), _jsx(BaseSelect.Value, { className: slicerValue }), _jsx(BaseSelect.Icon, { children: _jsx(CaretDownIcon, { className: icon({ size: "small" }) }) })] }), _jsx(SelectMenu, { options: options, popupClassName: popup.compact, itemClassName: item.compact })] }));
+    return (_jsxs(BaseSelect.Root, { items: options, value: value, onValueChange: onValueChange, name: name, required: required, disabled: disabled, children: [_jsxs(BaseSelect.Trigger, { className: cx(trigger({ variant: "raised", size: "compact" }), slicerTrigger, toolbarEdge.className), "aria-label": slicerName(label, options.find((option) => option.value === value)), "data-ciridae-ui": "", "data-edge": toolbarEdge["data-edge"], children: [_jsx("span", { className: slicerLabel, "data-slicer-label": "", children: label }), _jsx(BaseSelect.Value, { className: slicerValue }), _jsx(BaseSelect.Icon, { children: _jsx(CaretDownIcon, { className: icon({ size: "small" }) }) })] }), _jsx(SelectMenu, { options: options, popupClassName: popup.compact, itemClassName: item.compact })] }));
 }
-/* A regular combobox is a field: the well holds the typed query and a caret, and open, its edge
-   goes to the text color as a `Select`'s does. The ring shows only while closed, since open the
-   menu is the focus. */
+/* The ring shows only while closed, since open the menu is the focus. */
 const comboboxField = css({
     display: "flex",
     alignItems: "center",
-    width: "100%",
+    width: "full",
     minWidth: "overlay.menu",
     height: "control.default",
     border: "1px solid token(colors.border.control)",
@@ -186,7 +170,7 @@ const comboboxField = css({
 const comboboxInput = css({
     flex: "1",
     minWidth: "0",
-    height: "100%",
+    height: "full",
     paddingInline: "control.compactInline",
     border: "0",
     background: "transparent",
@@ -195,7 +179,7 @@ const comboboxInput = css({
     fontSize: "body",
     fontWeight: "medium",
     letterSpacing: "compact",
-    outline: "none",
+    outline: "0",
     "&::placeholder": { color: "fg.subtle" },
     "&:disabled": { cursor: "not-allowed" },
 });
@@ -208,20 +192,19 @@ const comboboxCaret = css({
     background: "transparent",
     color: "fg.primary",
     cursor: "pointer",
-    outline: "none",
+    outline: "0",
     "&:disabled": { cursor: "not-allowed" },
 });
-/* A compact combobox is a slicer that searches: the same pill, with the query typed in a row at
-   the top of its menu over a divider. The menu keeps one width while typing narrows it. */
+/* The menu keeps one width while typing narrows it. */
 const comboboxPopup = {
     regular: popup.regular,
     compact: css(popupStyle, compactPopupStyle, {
-        width: "max(var(--anchor-width), token(sizes.overlay.menu))",
+        width: "[max(var(--anchor-width), token(sizes.overlay.menu))]",
     }),
 };
 const comboboxSearch = css({
     flexShrink: "0",
-    width: "100%",
+    width: "full",
     height: "control.compact",
     paddingInline: "search.inline",
     border: "0",
@@ -231,7 +214,7 @@ const comboboxSearch = css({
     fontSize: "caption",
     fontWeight: "medium",
     letterSpacing: "compact",
-    outline: "none",
+    outline: "0",
     "&::placeholder": { color: "fg.subtle" },
 });
 const optionContent = css({
@@ -289,16 +272,15 @@ export function Combobox({ options, value, onValueChange, placeholder: ownPlaceh
                 if (details.reason === "input-change" || details.reason === "input-clear")
                     search(input);
             },
-        }), children: [size === "compact" ? (_jsxs(BaseCombobox.Trigger, { className: cx(trigger({ variant: "raised", size: "compact" }), slicerTrigger, toolbarEdge.className), "aria-label": slicerName(label, options, value), "data-ciridae-ui": "", "data-edge": toolbarEdge["data-edge"], children: [_jsx("span", { className: slicerLabel, "data-slicer-label": "", children: label }), _jsx("span", { className: slicerValue, children: selected?.label }), _jsx(CaretDownIcon, { className: icon({ size: "small" }) })] })) : (_jsxs(BaseCombobox.InputGroup, { className: comboboxField, "data-ciridae-ui": "", children: [_jsx(BaseCombobox.Input, { ...fieldIds, className: comboboxInput, "aria-label": inputLabel, placeholder: placeholder, autoFocus: autoFocus }), _jsx(BaseCombobox.Trigger, { className: comboboxCaret, "aria-label": label, tabIndex: -1, children: _jsx(CaretDownIcon, { className: icon({ size: "small" }) }) })] })), _jsx(BaseCombobox.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseCombobox.Positioner, { className: positioner, sideOffset: menuGap, align: "start", children: _jsxs(BaseCombobox.Popup, { className: comboboxPopup[size], "data-ciridae-ui": "", children: [size === "compact" && (_jsxs(_Fragment, { children: [_jsx(BaseCombobox.Input, { className: comboboxSearch, "aria-label": label, placeholder: placeholder }), _jsx("div", { className: searchDivider })] })), loading ? (_jsx("div", { className: emptyMessageStyle, children: _jsx(Spinner, { size: "compact" }) })) : (_jsx(BaseCombobox.Empty, { className: emptyMessageStyle, children: emptyMessage ?? labels.common.noResults })), virtualized ? (_jsx(VirtualOptions, { size: size, renderOption: renderOption, scrollToOption: scrollToOption })) : (_jsx(BaseCombobox.List, { className: list, children: (option) => (_jsxs(BaseCombobox.Item, { className: item[size], value: option, children: [_jsx("span", { className: optionContent, children: renderOption ? renderOption(option) : option.label }), _jsx(BaseCombobox.ItemIndicator, { className: itemIndicator, children: _jsx(CheckIcon, { className: icon({ size: "small" }) }) })] }, option.value)) }))] }) }) }) })] }));
+        }), children: [size === "compact" ? (_jsxs(BaseCombobox.Trigger, { className: cx(trigger({ variant: "raised", size: "compact" }), slicerTrigger, toolbarEdge.className), "aria-label": slicerName(label, selected), "data-ciridae-ui": "", "data-edge": toolbarEdge["data-edge"], children: [_jsx("span", { className: slicerLabel, "data-slicer-label": "", children: label }), _jsx("span", { className: slicerValue, children: selected?.label }), _jsx(CaretDownIcon, { className: icon({ size: "small" }) })] })) : (_jsxs(BaseCombobox.InputGroup, { className: comboboxField, "data-ciridae-ui": "", children: [_jsx(BaseCombobox.Input, { ...fieldIds, className: comboboxInput, "aria-label": inputLabel, placeholder: placeholder, autoFocus: autoFocus }), _jsx(BaseCombobox.Trigger, { className: comboboxCaret, "aria-label": label, tabIndex: -1, children: _jsx(CaretDownIcon, { className: icon({ size: "small" }) }) })] })), _jsx(BaseCombobox.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseCombobox.Positioner, { className: positioner, sideOffset: glassMenuOffsetFromTrigger, align: "start", children: _jsxs(BaseCombobox.Popup, { className: comboboxPopup[size], "data-ciridae-ui": "", children: [size === "compact" && (_jsxs(_Fragment, { children: [_jsx(BaseCombobox.Input, { className: comboboxSearch, "aria-label": label, placeholder: placeholder }), _jsx("div", { className: searchDivider })] })), loading ? (_jsx("div", { className: emptyMessageStyle, children: _jsx(Spinner, { size: "compact" }) })) : (_jsx(BaseCombobox.Empty, { className: emptyMessageStyle, children: emptyMessage ?? labels.common.noResults })), virtualized ? (_jsx(VirtualOptions, { size: size, renderOption: renderOption, scrollToOption: scrollToOption })) : (_jsx(BaseCombobox.List, { className: list, children: (option) => (_jsxs(BaseCombobox.Item, { className: item[size], value: option, children: [_jsx("span", { className: optionContent, children: renderOption ? renderOption(option) : option.label }), _jsx(BaseCombobox.ItemIndicator, { className: itemIndicator, children: _jsx(CheckIcon, { className: icon({ size: "small" }) }) })] }, option.value)) }))] }) }) }) })] }));
 }
 /** Past this many options a combobox draws only those near the view. */
 const virtualizeOptionsPast = 50;
-/** An option row's height before it is measured, in px. */
 const optionHeight = 32;
 // The options lie over a box as tall as all of them, each moved down to its place.
 const virtualOptions = css({
     position: "relative",
-    "& > *": { position: "absolute", top: "0", insetInline: "0" },
+    "& > *": { position: "absolute", top: "none", insetInline: "none" },
 });
 /** The filtered options near the view, inside the combobox's list, which scrolls them. */
 function VirtualOptions({ size, renderOption, scrollToOption, }) {
@@ -342,7 +324,7 @@ const filterStack = css({
     display: "grid",
     gap: "layout.controlGap",
     width: "overlay.tooltip",
-    maxWidth: "100%",
+    maxWidth: "full",
 });
 export function FilterPopover({ label, count = 0, open, onOpenChange, onClear, children, }) {
     const { labels } = useCiridaeLocale();

package/dist/components/settings.js

@@ -18,7 +18,7 @@ const layout = css({
     gap: "layout.sectionGap",
     _phone: { gridTemplateColumns: "minmax(0, 1fr)", gap: "layout.clusterGap" },
 });
-const sectionColumn = css({ position: "sticky", top: "0", _phone: { display: "none" } });
+const sectionColumn = css({ position: "sticky", top: "none", _phone: { display: "none" } });
 const sectionTabs = css({ display: "none", minWidth: "0", _phone: { display: "block" } });
 const content = css({ minWidth: "0" });
 const column = css({

package/dist/components/shell-skeleton.js

@@ -11,5 +11,5 @@ import { PanelSkeleton, SidebarRowsSkeleton } from "./skeletons.js";
 /** Names itself for assistive tech with the locale's "Loading" unless given an `aria-label`. */
 export function ShellSkeleton({ children, ...props }) {
     const { labels } = useCiridaeLocale();
-    return (_jsxs(AppShell, { "aria-busy": "true", "aria-label": labels.common.loading, ...props, children: [_jsxs(AppSidebar, { children: [_jsxs(AppSidebarGroup, { children: [_jsx(Skeleton, { height: "control" }), _jsx(Skeleton, { height: "control" })] }), _jsxs(AppSidebarRail, { children: [_jsx(Skeleton, { shape: "circle", style: { width: 32 } }), _jsx(Skeleton, { shape: "circle", style: { width: 32 } })] }), _jsx(AppSidebarNav, { children: _jsx(SidebarRowsSkeleton, {}) }), _jsx(AppSidebarFooter, { children: _jsx(Skeleton, { shape: "text", width: "70%" }) })] }), _jsxs(AppMain, { children: [_jsx(AppHeader, { children: _jsx(Skeleton, { shape: "text", width: "medium" }) }), _jsx(AppContent, { children: children ?? _jsx(PanelSkeleton, { rows: 6 }) })] })] }));
+    return (_jsxs(AppShell, { "aria-busy": "true", "aria-label": labels.common.loading, ...props, children: [_jsxs(AppSidebar, { children: [_jsxs(AppSidebarGroup, { children: [_jsx(Skeleton, { height: "control" }), _jsx(Skeleton, { height: "control" })] }), _jsxs(AppSidebarRail, { children: [_jsx(Skeleton, { shape: "circle", style: { width: "var(--sizes-control\\.round-rail)" } }), _jsx(Skeleton, { shape: "circle", style: { width: "var(--sizes-control\\.round-rail)" } })] }), _jsx(AppSidebarNav, { children: _jsx(SidebarRowsSkeleton, {}) }), _jsx(AppSidebarFooter, { children: _jsx(Skeleton, { shape: "text", width: "70%" }) })] }), _jsxs(AppMain, { children: [_jsx(AppHeader, { children: _jsx(Skeleton, { shape: "text", width: "medium" }) }), _jsx(AppContent, { children: children ?? _jsx(PanelSkeleton, { rows: 6 }) })] })] }));
 }

package/dist/components/shell.d.ts

@@ -1,7 +1,7 @@
 import { useRender } from "@base-ui/react/use-render";
 import type { ComponentProps, ReactNode } from "react";
 export declare function AppShell({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
-export declare function AppSidebar({ className, collapsed, onClickCapture, ...props }: ComponentProps<"aside"> & {
+export declare function AppSidebar({ className, collapsed, onClickCapture, onKeyDown, ...props }: Omit<ComponentProps<"aside">, "ref"> & {
     collapsed?: boolean;
 }): import("react").JSX.Element;
 export declare function AppMain({ className, ...props }: ComponentProps<"main">): import("react").JSX.Element;