@ciridae/ui 1.0.3 → 1.0.4

package/dist/components/segmented-bar.js

@@ -11,14 +11,16 @@ 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" });
+// The chart's data marks, so a segment and its swatch match the series in a chart.
 const toneColor = cva({
     variants: {
         tone: {
-            neutral: { background: "fg.subtle" },
-            info: { background: "accent.blue" },
-            success: { background: "accent.green" },
-            warning: { background: "accent.yellow" },
-            danger: { background: "accent.red" },
+            neutral: { background: "chart.neutral" },
+            info: { background: "chart.trend" },
+            success: { background: "chart.category2" },
+            warning: { background: "chart.category1" },
+            indigo: { background: "chart.category3" },
+            danger: { background: "chart.category4" },
         },
     },
 });
@@ -42,7 +44,15 @@ const legendRow = css({
     paddingTop: "panel.comfortable",
     borderTop: "1px solid token(colors.border.panel)",
 });
-const legendItem = css({ display: "inline-flex", alignItems: "center", gap: "layout.contentGap" });
+const legendItem = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.contentGap",
+    color: "fg.primary",
+    fontSize: "body",
+    fontWeight: "medium",
+    lineHeight: "tight",
+});
 const legendKey = css({
     display: "inline-flex",
     alignItems: "center",

package/dist/components/select.d.ts

@@ -18,8 +18,11 @@ 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. */
-    variant?: "field" | "raised";
+    /**
+     * 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`.
+     */
+    variant?: "field" | "raised" | "underline";
     /** Submits the value with an enclosing form under this name. */
     name?: string;
     /** Blocks the enclosing form's submission until a value is chosen. */

package/dist/components/select.js

@@ -1,51 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 import { Select as BaseSelect } from "@base-ui/react/select";
-import { CaretDownIcon, CaretUpIcon, CheckIcon, FunnelSimpleIcon } from "@phosphor-icons/react";
+import { CaretDownIcon, CheckIcon, FunnelSimpleIcon } from "@phosphor-icons/react";
 import { useDebouncedCallback } from "@tanstack/react-pacer";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useCallback, useEffect, useRef, useState } from "react";
+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 { 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";
-/*
- * Open, a trigger and its menu read as one control: the menu sits flush on the trigger's edge, and
- * the corners and border where they meet go square and quiet, on whichever side the menu opened.
- */
-const attachedTrigger = {
-    "&[data-popup-open][data-popup-side=bottom]": {
-        borderBottomLeftRadius: "0",
-        borderBottomRightRadius: "0",
-        borderBottomColor: "border.subtle",
-    },
-    "&[data-popup-open][data-popup-side=top]": {
-        borderTopLeftRadius: "0",
-        borderTopRightRadius: "0",
-        borderTopColor: "border.subtle",
-    },
-};
-/** Which side of its trigger the open popup sits on, read from the popup's own `data-side`. */
-function usePopupSide() {
-    const [side, setSide] = useState(null);
-    const popupRef = useCallback((popup) => {
-        if (!popup)
-            return;
-        const read = () => setSide(popup.getAttribute("data-side"));
-        read();
-        const observer = new MutationObserver(read);
-        observer.observe(popup, { attributes: true, attributeFilter: ["data-side"] });
-        return () => observer.disconnect();
-    }, []);
-    return { side: side ?? undefined, popupRef };
-}
 /*
  * 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. Open, every one takes the
- * control border its menu continues.
+ * 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.
  */
 const trigger = cva({
     base: {
@@ -64,19 +37,40 @@ const trigger = cva({
         cursor: "pointer",
         transitionProperty: "background, border-color",
         transitionDuration: "fast",
-        "&[data-popup-open]": { borderColor: "border.control" },
-        ...attachedTrigger,
+        "&[data-popup-open]": { borderColor: "fg.primary" },
         _focusVisible: { focusRing: "outer" },
         "&:disabled, &[data-disabled]": { opacity: "disabled", cursor: "not-allowed" },
     },
     variants: {
         variant: {
-            field: { background: "bg.field", borderColor: "border.control" },
-            // The gradient edge is `data-edge="toolbar"` on the trigger; the border stays clear for it.
+            // Hovered, the well darkens by the control hover layer, in light only.
+            field: {
+                background: "bg.formField",
+                borderColor: "border.control",
+                _hover: {
+                    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.
+             */
             raised: {
-                background: "bg.glass",
+                background: "token(gradients.selected)",
                 borderColor: "transparent",
-                _hover: { background: "bg.glassHover" },
+                _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)" },
+            },
+            // The caret takes the secondary ink beside the value.
+            underline: {
+                borderWidth: "0 0 1px",
+                borderColor: "border.control",
+                borderRadius: "0",
+                background: "transparent",
+                "& svg": { color: "fg.muted" },
             },
         },
         size: {
@@ -90,83 +84,69 @@ const trigger = cva({
         },
     },
     compoundVariants: [
-        { variant: "raised", size: "compact", css: { borderRadius: "action" } },
+        { 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",
+            css: {
+                minWidth: "auto",
+                height: "control.row",
+                paddingInline: "layout.tightGap",
+                gap: "layout.controlGap",
+            },
+        },
     ],
     defaultVariants: { variant: "field", size: "regular" },
 });
+const toolbarEdge = faceEdge("toolbar");
 /** The positioner is the positioned element, so it carries the stacking order. */
 const positioner = css({ zIndex: "popover" });
-/* Flush: the menu is the trigger's width and continues its open border, its rows run edge to edge,
-   and their text lines up under the trigger's own. The trigger's edge is the seam between them. A
+/** 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. */
-const popup = cva({
-    base: {
-        display: "flex",
-        flexDirection: "column",
-        width: "var(--anchor-width)",
-        maxHeight: "min(token(sizes.overlay.menuList), var(--available-height))",
-        padding: "none",
-        overflow: "hidden",
-        border: "1px solid token(colors.border.control)",
-        background: "bg.card",
-        boxShadow: "card",
-        "&[data-side=bottom]": { borderTop: "0", borderTopLeftRadius: "0", borderTopRightRadius: "0" },
-        "&[data-side=top]": {
-            borderBottom: "0",
-            borderBottomLeftRadius: "0",
-            borderBottomRightRadius: "0",
-        },
-    },
-    // The trigger's own corners: a field's near-square ones, a compact pill's rounder ones. A compact
-    // trigger is sized to its value, so its menu may run wider to keep every option whole.
-    variants: {
-        size: {
-            regular: { borderRadius: "control" },
-            compact: { borderRadius: "action", width: "max-content", minWidth: "var(--anchor-width)" },
-        },
-    },
-    defaultVariants: { size: "regular" },
+const popupStyle = css.raw(glassMenuSurface, {
+    display: "flex",
+    flexDirection: "column",
+    width: "var(--anchor-width)",
+    maxHeight: "min(token(sizes.overlay.menuList), var(--available-height))",
 });
-const item = cva({
-    base: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: "layout.contentGap",
-        height: "menu.item",
-        paddingInline: "control.compactInline",
-        color: "fg.muted",
-        fontSize: "caption",
-        cursor: "pointer",
-        _highlighted: { background: "bg.rowHover", color: "fg.primary" },
-        "&[data-selected]": { color: "fg.primary" },
-        // The menu is only as wide as its trigger, so a long option truncates rather than widening it.
-        "& > :first-child": { minWidth: "0", overflow: "hidden", textOverflow: "ellipsis" },
-        whiteSpace: "nowrap",
-    },
-    // A compact trigger's menu reads at the trigger's own text size.
-    variants: {
-        size: { regular: {}, compact: { height: "select.compactItem" } },
-    },
-    defaultVariants: { size: "compact" },
+const compactPopupStyle = css.raw({ width: "max-content", minWidth: "var(--anchor-width)" });
+const popup = {
+    regular: css(popupStyle),
+    compact: css(popupStyle, compactPopupStyle),
+};
+const itemStyle = css.raw(glassMenuRow, {
+    justifyContent: "space-between",
+    // The menu is only as wide as its trigger, so a long option truncates rather than widening it.
+    "& > :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" }),
+};
 const itemIndicator = css({ display: "inline-flex", flexShrink: "0" });
 /** Scrolls inside the capped popup; opening scrolls the chosen option into view. */
-const list = css({ overflowY: "auto", overscrollBehavior: "contain" });
+const list = css({ overflowY: "auto", overscrollBehavior: "contain", ringRoom: true });
 function density(size) {
     return size === "small" ? "compact" : "regular";
 }
-function SelectMenu({ options, size, popupRef, }) {
-    return (_jsx(BaseSelect.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseSelect.Positioner, { className: positioner, sideOffset: 0, align: "start", alignItemWithTrigger: false, children: _jsx(BaseSelect.Popup, { ref: popupRef, className: popup({ size }), "data-ciridae-ui": "", children: _jsx(BaseSelect.List, { className: list, children: options.map((option) => (_jsxs(BaseSelect.Item, { className: item({ size }), value: option.value, children: [_jsx(BaseSelect.ItemText, { children: option.label }), _jsx(BaseSelect.ItemIndicator, { className: itemIndicator, children: _jsx(CheckIcon, { className: icon({ size: "small" }) }) })] }, option.value))) }) }) }) }) }));
+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))) }) }) }) }) }));
 }
 export function Select({ options, value, onValueChange, placeholder, label, size: controlSize = "small", variant = controlSize === "small" ? "raised" : "field", name, required, disabled, }) {
-    const { side, popupRef } = usePopupSide();
     const { labels } = useCiridaeLocale();
     const fieldIds = useFieldControl({});
     const inField = useInField();
-    const size = density(controlSize);
-    return (_jsxs(BaseSelect.Root, { items: options, value: value, onValueChange: onValueChange, name: name, required: required, disabled: disabled, children: [_jsxs(BaseSelect.Trigger, { ...fieldIds, className: trigger({ variant, size }), "aria-label": label ?? (inField ? undefined : labels.select.label), "data-ciridae-ui": "", "data-edge": variant === "raised" ? "toolbar" : undefined, "data-popup-side": side, children: [_jsx(BaseSelect.Value, { placeholder: placeholder ?? labels.select.placeholder }), _jsx(BaseSelect.Icon, { children: _jsx(CaretUpIcon, { className: icon({ size: "compact" }) }) })] }), _jsx(SelectMenu, { options: options, size: size, popupRef: popupRef })] }));
+    const underline = variant === "underline";
+    // An underline trigger is sized to its value, so its menu may run wider, at its body text.
+    const size = underline ? "regular" : density(controlSize);
+    return (_jsxs(BaseSelect.Root, { items: options, value: value, onValueChange: onValueChange, name: name, required: required, disabled: disabled, children: [_jsxs(BaseSelect.Trigger, { ...fieldIds, className: cx(trigger({ variant, size }), variant === "raised" && toolbarEdge.className), "aria-label": label ?? (inField ? undefined : labels.select.label), "data-ciridae-ui": "", "data-edge": variant === "raised" ? toolbarEdge["data-edge"] : undefined, children: [_jsx(BaseSelect.Value, { placeholder: placeholder ?? labels.select.placeholder }), _jsx(BaseSelect.Icon, { children: _jsx(CaretDownIcon, { className: icon({ size: "small" }) }) })] }), _jsx(SelectMenu, { options: options, popupClassName: underline ? popup.compact : popup[size], itemClassName: item[size] })] }));
 }
 /*
  * A slicer is a filter's pill: the dimension it cuts by, then the value chosen, then the caret.
@@ -174,11 +154,10 @@ export function Select({ options, value, onValueChange, placeholder, label, size
  */
 const slicerTrigger = css({
     height: "control.compact",
-    borderRadius: "action",
     fontSize: "caption",
     justifyContent: "flex-start",
 });
-const slicerLabel = css({ color: "fg.muted" });
+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) {
@@ -186,12 +165,11 @@ function slicerName(label, options, value) {
     return chosen ? `${label}: ${chosen.label}` : label;
 }
 export function Slicer({ options, value, onValueChange, label, name, required, disabled, }) {
-    const { side, popupRef } = usePopupSide();
-    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), "aria-label": slicerName(label, options, value), "data-ciridae-ui": "", "data-edge": "toolbar", "data-popup-side": side, 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, size: "compact", popupRef: popupRef })] }));
+    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 })] }));
 }
-/* A regular combobox is a field: the well holds the typed query and a caret, and open, it joins
-   its menu exactly as a `Select` does. The ring shows only while closed, since open the menu is
-   the focus. */
+/* 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. */
 const comboboxField = css({
     display: "flex",
     alignItems: "center",
@@ -200,8 +178,8 @@ const comboboxField = css({
     height: "control.default",
     border: "1px solid token(colors.border.control)",
     borderRadius: "control",
-    background: "bg.field",
-    ...attachedTrigger,
+    background: "bg.formField",
+    "&[data-popup-open]": { borderColor: "fg.primary" },
     "&:has(input:focus-visible):not([data-popup-open])": { focusRing: "outer" },
     "&[data-disabled]": { opacity: "disabled", cursor: "not-allowed" },
 });
@@ -234,22 +212,19 @@ const comboboxCaret = css({
     "&: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. The menu keeps one width while typing narrows it. */
-const comboboxPopup = cva({
-    variants: {
-        size: {
-            regular: {},
-            compact: { width: "max(var(--anchor-width), token(sizes.overlay.menu))" },
-        },
-    },
-});
+   the top of its menu over a divider. 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))",
+    }),
+};
 const comboboxSearch = css({
     flexShrink: "0",
     width: "100%",
-    height: "select.compactItem",
-    paddingInline: "control.compactInline",
+    height: "control.compact",
+    paddingInline: "search.inline",
     border: "0",
-    borderBottom: "1px solid token(colors.border.subtle)",
     background: "transparent",
     color: "fg.primary",
     fontFamily: "sans",
@@ -268,9 +243,10 @@ const optionContent = css({
     overflow: "hidden",
     textOverflow: "ellipsis",
 });
+const searchDivider = css(glassMenuDivider);
 const emptyMessageStyle = css({
     paddingBlock: "control.compactBlock",
-    paddingInline: "control.compactInline",
+    paddingInline: "menu.itemInline",
     color: "fg.muted",
     fontSize: "caption",
     // Base UI keeps the empty slot mounted while options are listed.
@@ -313,12 +289,12 @@ 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), "aria-label": slicerName(label, options, value), "data-ciridae-ui": "", "data-edge": "toolbar", 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(CaretUpIcon, { className: icon({ size: "compact" }) }) })] })), _jsx(BaseCombobox.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseCombobox.Positioner, { className: positioner, sideOffset: 0, align: "start", children: _jsxs(BaseCombobox.Popup, { className: css(popup.raw({ size }), comboboxPopup.raw({ size })), "data-ciridae-ui": "", children: [size === "compact" && (_jsx(BaseCombobox.Input, { className: comboboxSearch, "aria-label": label, placeholder: placeholder })), 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, 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)) }))] }) }) }) })] }));
 }
 /** Past this many options a combobox draws only those near the view. */
 const virtualizeOptionsPast = 50;
-/** An option row's height before it is measured. */
-const optionHeights = { regular: 38, compact: 30 };
+/** 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",
@@ -331,7 +307,7 @@ function VirtualOptions({ size, renderOption, scrollToOption, }) {
     const virtualizer = useVirtualizer({
         count: shown.length,
         getScrollElement: () => listElement,
-        estimateSize: () => optionHeights[size],
+        estimateSize: () => optionHeight,
         getItemKey: (index) => shown[index]?.value ?? index,
         overscan: 8,
     });
@@ -343,7 +319,7 @@ function VirtualOptions({ size, renderOption, scrollToOption, }) {
     }, [scrollToOption, virtualizer]);
     return (_jsx(BaseCombobox.List, { ref: setListElement, className: list, children: _jsx("div", { className: virtualOptions, style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((virtualItem) => {
                 const option = shown[virtualItem.index];
-                return (option && (_jsxs(BaseCombobox.Item, { ref: virtualizer.measureElement, "data-index": virtualItem.index, index: virtualItem.index, value: option, className: item({ size }), style: { transform: `translateY(${virtualItem.start}px)` }, 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)));
+                return (option && (_jsxs(BaseCombobox.Item, { ref: virtualizer.measureElement, "data-index": virtualItem.index, index: virtualItem.index, value: option, className: item[size], style: { transform: `translateY(${virtualItem.start}px)` }, 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)));
             }) }) }));
 }
 /*
@@ -370,5 +346,5 @@ const filterStack = css({
 });
 export function FilterPopover({ label, count = 0, open, onOpenChange, onClear, children, }) {
     const { labels } = useCiridaeLocale();
-    return (_jsx(Popover, { open: open, onOpenChange: onOpenChange && ((next) => onOpenChange(next)), density: "compact", trigger: _jsxs("button", { type: "button", className: cx(trigger({ variant: "raised", size: "compact" }), slicerTrigger), "data-ciridae-ui": "", "data-edge": "toolbar", children: [_jsx(FunnelSimpleIcon, { className: icon({ size: "small" }) }), label ?? labels.select.filters, count > 0 && _jsx("span", { className: filterCount, children: count })] }), children: _jsxs("div", { className: filterStack, children: [children, onClear && count > 0 && (_jsx(Button, { variant: "ghost", className: css({ justifySelf: "start" }), onClick: onClear, children: labels.filters.clearAll }))] }) }));
+    return (_jsx(Popover, { open: open, onOpenChange: onOpenChange && ((next) => onOpenChange(next)), density: "compact", trigger: _jsxs("button", { type: "button", className: cx(trigger({ variant: "raised", size: "compact" }), slicerTrigger, toolbarEdge.className), "data-ciridae-ui": "", "data-edge": toolbarEdge["data-edge"], children: [_jsx(FunnelSimpleIcon, { className: icon({ size: "small" }) }), label ?? labels.select.filters, count > 0 && _jsx("span", { className: filterCount, children: count })] }), children: _jsxs("div", { className: filterStack, children: [children, onClear && count > 0 && (_jsx(Button, { variant: "ghost", className: css({ justifySelf: "start" }), onClick: onClear, children: labels.filters.clearAll }))] }) }));
 }

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" }), _jsx(Skeleton, { shape: "circle" })] }), _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: 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 }) })] })] }));
 }

package/dist/components/shell.d.ts

@@ -50,8 +50,8 @@ export type AppBreadcrumbButtonProps = useRender.ComponentProps<"button"> & {
  */
 export declare function AppBreadcrumbButton({ className, render, href, ...props }: AppBreadcrumbButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /**
- * The signed-in account as a menu trigger: avatar, name, and a detail line, or with `compact` the
- * avatar alone.
+ * The signed-in account as a menu trigger: avatar, name, and a detail line if given, or with
+ * `compact` the avatar alone.
  */
 export declare function AppAccountButton({ avatar, name, detail, trailing, compact, className, ...props }: ComponentProps<"button"> & {
     avatar: ReactNode;