@ciridae/ui 1.0.4 → 1.0.9

package/dist/components/mention-input.js

@@ -35,14 +35,14 @@ export function openMentionPicker(input, char) {
  */
 export const mentionChip = css({
     display: "inline",
-    paddingBlock: "1px",
+    paddingBlock: "[1px]",
     paddingInline: "control.trackInset",
-    marginInline: "1px",
+    marginInline: "[1px]",
     // Tinted from the text it sits in, so it reads on the field and on either side's bubble.
     border: "1px solid color-mix(in srgb, currentColor 16%, transparent)",
     borderRadius: "control",
-    background: "color-mix(in srgb, currentColor 7%, transparent)",
-    color: "inherit",
+    background: "[color-mix(in srgb, currentColor 7%, transparent)]",
+    color: "[inherit]",
     fontWeight: "medium",
     textDecoration: "none",
     whiteSpace: "nowrap",
@@ -53,13 +53,13 @@ export const mentionChip = css({
         display: "inline-flex",
         verticalAlign: "-0.125em",
         marginInlineEnd: "control.trackInset",
-        opacity: "0.7",
+        opacity: "[0.7]",
         "& > svg": { fontSize: "icon.compact" },
     },
     "& > [data-mark]:empty": { display: "none" },
     "&[href]": {
         cursor: "pointer",
-        _hover: { background: "color-mix(in srgb, currentColor 12%, transparent)" },
+        _hover: { background: "[color-mix(in srgb, currentColor 12%, transparent)]" },
     },
     _focusVisible: { focusRing: "outer" },
 });
@@ -234,31 +234,30 @@ const field = css({
     "&[data-empty]::before": {
         content: "attr(aria-placeholder)",
         position: "absolute",
-        inset: "0",
-        padding: "inherit",
+        inset: "none",
+        padding: "[inherit]",
         overflow: "hidden",
         color: "fg.muted",
         whiteSpace: "nowrap",
         textOverflow: "ellipsis",
         pointerEvents: "none",
     },
-    "&[aria-disabled=true]": { cursor: "default", opacity: "0.5" },
+    "&[aria-disabled=true]": { cursor: "default", opacity: "[0.5]" },
 });
-/* The picker: a flush menu over the caret on the popovers' glass, its rows edge to edge. */
 const picker = css({
     zIndex: "popover",
     display: "grid",
     minWidth: "overlay.menu",
-    maxWidth: "min(token(sizes.overlay.popover), calc(100vw - 2 * token(spacing.layout.controlGap)))",
+    maxWidth: "[min(token(sizes.overlay.popover), calc(100vw - 2 * token(spacing.layout.controlGap)))]",
     maxHeight: "search.dropdownPreview",
     overflowY: "auto",
-    border: "1px solid token(colors.border.control)",
+    border: "1px solid token(colors.border.popover)",
     borderRadius: "action",
     background: "bg.popover",
-    backdropFilter: "blur(token(blurs.popover))",
+    backdropFilter: "[blur(token(blurs.popover))]",
     color: "fg.primary",
     boxShadow: "soft",
-    outline: "none",
+    outline: "0",
 });
 const pickerRow = css({
     display: "flex",

package/dist/components/menu.d.ts

@@ -12,12 +12,14 @@ export type MenuItem = {
     variant?: "default" | "danger";
     /** Shows a check mark, for the active choice in a set. */
     checked?: boolean;
-    /** Muted at the row's end, such as what a choice covers. */
     meta?: string;
     /** The hotkey that does what the item does, at the row's end; the host binds it. */
     shortcut?: Hotkey;
     onSelect?: () => void;
-    /** Makes the item a link to this address; it closes the menu as it navigates. */
+    /**
+     * Makes the item a link to this address; it closes the menu as it navigates. Disabled or
+     * loading, it goes nowhere.
+     */
     href?: string;
     /**
      * The link element, such as a router's `<Link to="...">`; the item's content and
@@ -59,12 +61,13 @@ export type MenuProps = Omit<ComponentProps<typeof BaseMenu.Root>, "children"> &
     items: readonly MenuItem[];
     /** Which edge of the trigger the menu lines up with; `end` keeps a right-hand menu inside its container. */
     align?: "start" | "end";
-    /** How far the menu floats from its trigger, in px. Defaults to the kit's 4. */
     sideOffset?: number;
     /** Makes the menu exactly as wide as its trigger rather than at least `overlay.menu`. */
     matchTriggerWidth?: boolean;
+    /** A tooltip on an icon-only trigger, beside it where the line ends. */
+    triggerTooltip?: string;
 };
-export declare function Menu({ trigger, items, align, sideOffset, matchTriggerWidth, ...rootProps }: MenuProps): import("react").JSX.Element;
+export declare function Menu({ trigger, items, align, sideOffset, matchTriggerWidth, triggerTooltip, ...rootProps }: MenuProps): import("react").JSX.Element;
 export type OverflowMenuProps = Omit<MenuProps, "trigger" | "align"> & {
     /** The button's accessible name, such as "Record actions" or "More for INV-4821". */
     label: string;

package/dist/components/menu.js

@@ -1,20 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { CaretRightIcon, CheckIcon, DotsThreeIcon } from "@phosphor-icons/react";
 import { css, cx } from "#primitives/css";
 import { IconButton } from "./button.js";
-import { glassMenuDivider, glassMenuRow, glassMenuSurface } from "./glass-menu.js";
+import { glassMenuDivider, glassMenuOffsetFromTrigger, glassMenuRow, glassMenuSurface, } from "./glass-menu.js";
 import { HotkeyLayer } from "./hotkeys.js";
 import { directional, icon, Spinner } from "./icon.js";
 import { ShortcutHint } from "./keycap.js";
+import { TooltipChip } from "./overlays.js";
 import { singleLineTextClass } from "./single-line-text.js";
 const popup = css(glassMenuSurface, { minWidth: "overlay.menu" });
 // As wide as its trigger, such as a switcher whose menu hangs under a full-width button.
 const triggerWidthPopup = css(glassMenuSurface, { width: "var(--anchor-width)" });
 // A submenu joins its parent: the corner it opens from goes square, so the two read as one panel.
 const submenuPopup = css({
-    "&:is([data-side=right], [data-side=inline-end])": { borderStartStartRadius: "0" },
-    "&:is([data-side=left], [data-side=inline-start])": { borderStartEndRadius: "0" },
+    "&:is([data-side=right], [data-side=inline-end])": { borderStartStartRadius: "none" },
+    "&:is([data-side=left], [data-side=inline-start])": { borderStartEndRadius: "none" },
 });
 /** The positioner is the positioned element, so it carries the stacking order. */
 const positioner = css({ zIndex: "popover" });
@@ -23,7 +25,7 @@ const positioner = css({ zIndex: "popover" });
 const itemStyle = css.raw(glassMenuRow, {
     "&[data-popup-open]": {
         background: "bg.hover",
-        boxShadow: "inset 0 0 0 1px token(colors.border.menuHover)",
+        boxShadow: "[inset 0 0 0 1px token(colors.border.menuHover)]",
     },
     "& > [data-label]": { flex: "1", minWidth: "0" },
     "& > [data-trailing]": { color: "fg.muted" },
@@ -79,13 +81,16 @@ const itemMeta = css({
     fontSize: "caption",
 });
 const separator = css(glassMenuDivider);
-export function Menu({ trigger, items, align = "start", sideOffset = 4, matchTriggerWidth = false, ...rootProps }) {
-    return (_jsxs(BaseMenu.Root, { ...rootProps, children: [_jsx(BaseMenu.Trigger, { render: trigger }), _jsx(BaseMenu.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseMenu.Positioner, { className: positioner, sideOffset: sideOffset, align: align, children: _jsx(BaseMenu.Popup, { className: matchTriggerWidth ? triggerWidthPopup : popup, "data-ciridae-ui": "", children: _jsx(MenuItems, { items: items }) }) }) }) })] }));
+export function Menu({ trigger, items, align = "start", sideOffset = glassMenuOffsetFromTrigger, matchTriggerWidth = false, triggerTooltip, ...rootProps }) {
+    const menuTrigger = _jsx(BaseMenu.Trigger, { render: trigger });
+    return (_jsxs(BaseMenu.Root, { ...rootProps, children: [triggerTooltip === undefined ? (menuTrigger) : (_jsx(BaseTooltip.Provider, { children: _jsxs(BaseTooltip.Root, { children: [_jsx(BaseTooltip.Trigger, { render: menuTrigger }), _jsx(TooltipChip, { content: triggerTooltip, side: "inline-end" })] }) })), _jsx(BaseMenu.Portal, { children: _jsx(HotkeyLayer, { children: _jsx(BaseMenu.Positioner, { className: positioner, sideOffset: sideOffset, align: align, children: _jsx(BaseMenu.Popup, { className: matchTriggerWidth ? triggerWidthPopup : popup, "data-ciridae-ui": "", children: _jsx(MenuItems, { items: items }) }) }) }) })] }));
 }
 /** The "more" button: an `IconButton` with three dots that opens a `Menu` of `items`. */
 export function OverflowMenu({ label, size = "medium", variant = "raised", align = "end", disabled, ref, ...props }) {
     return (_jsx(Menu, { ...props, align: align, trigger: _jsx(IconButton, { ref: ref, "aria-label": label, size: size, variant: variant, disabled: disabled, children: _jsx(DotsThreeIcon, { className: icon({ size: size === "large" ? "medium" : "small" }), weight: "bold" }) }) }));
 }
+/** Pulls a submenu up by the sheet's padding and border, so its first row meets the row that opened it. */
+const submenuAlignOffsetToFirstRow = -5;
 function MenuItems({ items }) {
     return items.map((menuItem, index) => {
         if ("separator" in menuItem)
@@ -97,13 +102,21 @@ function MenuItems({ items }) {
             return (_jsxs("div", { className: header, role: "presentation", children: [menuItem.icon, _jsxs("span", { className: headerCopy, children: [_jsx("span", { children: menuItem.label }), menuItem.detail && _jsx("span", { children: menuItem.detail })] })] }, index));
         }
         if (menuItem.items) {
-            return (_jsxs(BaseMenu.SubmenuRoot, { children: [_jsxs(BaseMenu.SubmenuTrigger, { className: item, disabled: menuItem.disabled, children: [menuItem.icon && _jsx("span", { className: iconSlot, children: menuItem.icon }), _jsx("span", { "data-label": "", className: singleLineTextClass, children: menuItem.label }), _jsx(CaretRightIcon, { "data-trailing": "", className: cx(icon({ size: "small" }), directional) })] }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { className: positioner, sideOffset: 0, align: "start", alignOffset: -5, children: _jsx(BaseMenu.Popup, { className: cx(popup, submenuPopup), "data-ciridae-ui": "", children: _jsx(MenuItems, { items: menuItem.items }) }) }) })] }, menuItem.label));
+            return (_jsxs(BaseMenu.SubmenuRoot, { children: [_jsxs(BaseMenu.SubmenuTrigger, { className: item, disabled: menuItem.disabled, children: [menuItem.icon && _jsx("span", { className: iconSlot, children: menuItem.icon }), _jsx("span", { "data-label": "", className: singleLineTextClass, children: menuItem.label }), _jsx(CaretRightIcon, { "data-trailing": "", className: cx(icon({ size: "small" }), directional) })] }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { className: positioner, sideOffset: 0, align: "start", alignOffset: submenuAlignOffsetToFirstRow, children: _jsx(BaseMenu.Popup, { className: cx(popup, submenuPopup), "data-ciridae-ui": "", children: _jsx(MenuItems, { items: menuItem.items }) }) }) })] }, index));
         }
         const content = (_jsxs(_Fragment, { children: [(menuItem.loading || menuItem.icon) && (_jsx("span", { className: iconSlot, children: menuItem.loading ? _jsx(Spinner, { "aria-hidden": "true" }) : menuItem.icon })), _jsx("span", { "data-label": "", className: singleLineTextClass, children: menuItem.label }), menuItem.meta !== undefined && (_jsx("span", { "data-trailing": "", className: itemMeta, children: menuItem.meta })), menuItem.shortcut && _jsx(ShortcutHint, { "data-trailing": "", boxed: true, hotkey: menuItem.shortcut }), menuItem.checked && _jsx(CheckIcon, { "data-trailing": "", className: icon({ size: "small" }) })] }));
         const className = menuItem.variant === "danger" ? dangerItem : item;
-        if (menuItem.href !== undefined || menuItem.render !== undefined) {
-            return (_jsx(BaseMenu.LinkItem, { className: className, href: menuItem.href, render: menuItem.render, closeOnClick: true, onClick: menuItem.onSelect, children: content }, menuItem.label));
+        const disabledOrLoading = menuItem.disabled || menuItem.loading;
+        // Base UI's link item has no disabled state, so a disabled or loading link draws as a
+        // disabled item, which goes nowhere.
+        if (!disabledOrLoading && (menuItem.href !== undefined || menuItem.render !== undefined)) {
+            return (_jsx(BaseMenu.LinkItem, { className: className, href: menuItem.href, render: menuItem.render, closeOnClick: true, onClick: menuItem.onSelect, children: content }, index));
         }
-        return (_jsx(BaseMenu.Item, { className: className, disabled: menuItem.disabled || menuItem.loading, onClick: menuItem.onSelect, children: content }, menuItem.label));
+        // A checked item marks the one chosen among its siblings, as the stage and workspace menus
+        // use it, so assistive tech hears it as a radio item and whether it is the chosen one.
+        const choice = menuItem.checked === undefined
+            ? {}
+            : { role: "menuitemradio", "aria-checked": menuItem.checked };
+        return (_jsx(BaseMenu.Item, { className: className, disabled: disabledOrLoading, onClick: menuItem.onSelect, ...choice, children: content }, index));
     });
 }

package/dist/components/meter.d.ts

@@ -1,8 +1,9 @@
 import type { Tone } from "./badge.js";
 import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
 export type MeterProps = Omit<ComponentProps<"span">, "children"> & {
+    /** Held between 0 and `max`, for the track and for assistive tech alike. */
     value: number;
-    /** 1 by default, so a share can be passed as is. */
+    /** 1 by default, so a share can be passed as is. Must be above 0. */
     max?: number;
     /** `info` by default; `warning` once it nears the limit, say. */
     tone?: Tone;
@@ -12,11 +13,9 @@ export type MeterProps = Omit<ComponentProps<"span">, "children"> & {
     valueLabel?: ReactNode;
 };
 export declare function Meter({ value, max, tone, label, valueLabel, className, ...props }: MeterProps): import("react").JSX.Element;
-/** A button with `onClick`, otherwise a plain row; either way it takes the caller's attributes. */
 export type BudgetRowProps = Omit<HTMLAttributes<HTMLElement>, "children"> & Pick<MeterProps, "value" | "max" | "tone" | "valueLabel"> & {
     icon: ReactNode;
     name: string;
-    /** Under the name, such as "$184K of $200K of approved budget". */
     detail: ReactNode;
 };
 export declare function BudgetRow({ icon, name, detail, value, max, tone, valueLabel, className, ...props }: BudgetRowProps): import("react").JSX.Element;

package/dist/components/meter.js

@@ -2,8 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /*
  * A measured amount against its limit, such as a budget spent: a thin track filled to
  * `value / max`, with the figure above it at the end. Past the limit the track stays full. It is
- * phrasing content, so it can sit inside a row's button. On track (`info`) and at risk (`warning`)
- * fill as the chart's progress bar does, a gradient over the hue's track.
+ * phrasing content, so it can sit inside a row's button.
  */
 import { css, cva, cx } from "#primitives/css";
 const meter = css({
@@ -16,7 +15,7 @@ const meter = css({
     fontVariantNumeric: "tabular-nums",
 });
 const track = cva({
-    base: { width: "100%", height: "6px", borderRadius: "control", overflow: "hidden" },
+    base: { width: "full", height: "[6px]", borderRadius: "control", overflow: "hidden" },
     variants: {
         tone: {
             neutral: { background: "bg.hover" },
@@ -28,32 +27,29 @@ const track = cva({
     },
 });
 const fill = cva({
-    base: { display: "block", height: "100%", borderRadius: "control" },
+    base: { display: "block", height: "full", borderRadius: "control" },
     variants: {
         tone: {
             neutral: { background: "fg.subtle" },
-            info: { background: "token(gradients.chart.progress)" },
+            info: { background: "[token(gradients.chart.progress)]" },
             success: { background: "accent.green" },
-            warning: { background: "token(gradients.chart.atRisk)" },
+            warning: { background: "[token(gradients.chart.atRisk)]" },
             danger: { background: "accent.red" },
         },
     },
 });
 export function Meter({ value, max = 1, tone = "info", label, valueLabel, className, ...props }) {
-    const share = max > 0 ? Math.min(Math.max(value / max, 0), 1) : 0;
-    return (_jsxs("span", { role: "meter", "aria-label": label, "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuetext": typeof valueLabel === "string" ? valueLabel : undefined, ...props, className: cx(meter, className), "data-ciridae-ui": "", children: [valueLabel, _jsx("span", { className: track({ tone }), children: _jsx("span", { className: fill({ tone }), style: { width: `${share * 100}%` } }) })] }));
+    if (max <= 0)
+        throw new Error(`Meter needs a max above 0, got ${max}`);
+    const valueWithinRange = Math.min(Math.max(value, 0), max);
+    return (_jsxs("span", { role: "meter", "aria-label": label, "aria-valuenow": valueWithinRange, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuetext": typeof valueLabel === "string" ? valueLabel : undefined, ...props, className: cx(meter, className), "data-ciridae-ui": "", children: [valueLabel, _jsx("span", { className: track({ tone }), children: _jsx("span", { className: fill({ tone }), style: { width: `${(valueWithinRange / max) * 100}%` } }) })] }));
 }
-/*
- * Budget row: a job's spend against its budget as a row, the kit's Budget row: the icon on the
- * raised tile, the name over what is spent of what, and a 170px meter at the end. A row with
- * `onClick` is a button that opens the job. Rows in a list part with a hairline above each.
- */
 const budgetRow = css({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     gap: "meter.rowGap",
-    width: "100%",
+    width: "full",
     paddingBlock: "panel.default",
     paddingInline: "panel.comfortable",
     border: "0",
@@ -87,7 +83,7 @@ const budgetTile = css({
     height: "tile.icon",
     border: "1px solid transparent",
     borderRadius: "action",
-    background: "token(gradients.raised)",
+    background: "[token(gradients.raised)]",
     fontSize: "icon.medium",
     "--edge": "token(gradients.border.raised)",
 });
@@ -95,7 +91,7 @@ const budgetCopy = css({ display: "grid", gap: "layout.tightGap", minWidth: "0"
 const budgetName = css({ fontSize: "body" });
 const budgetDetail = css({ color: "fg.secondary", fontSize: "code" });
 // Fluid under 170px, so the job's name keeps a readable line on a phone.
-const budgetMeter = css({ width: "min(170px, 40%)", flexShrink: "0" });
+const budgetMeter = css({ width: "[min(170px, 40%)]", flexShrink: "0" });
 export function BudgetRow({ icon, name, detail, value, max, tone, valueLabel, className, ...props }) {
     const content = (_jsxs(_Fragment, { children: [_jsxs("span", { className: budgetLeading, children: [_jsx("span", { className: budgetTile, "data-ciridae-ui": "", "data-edge": "gradient", children: icon }), _jsxs("span", { className: budgetCopy, children: [_jsx("span", { className: budgetName, children: name }), _jsx("span", { className: budgetDetail, children: detail })] })] }), _jsx(Meter, { className: budgetMeter, value: value, max: max, tone: tone, label: name, valueLabel: valueLabel })] }));
     return props.onClick ? (_jsx("button", { type: "button", ...props, className: cx(budgetRow, className), "data-ciridae-ui": "", children: content })) : (_jsx("div", { ...props, className: cx(budgetRow, className), "data-ciridae-ui": "", children: content }));

package/dist/components/navigation.d.ts

@@ -4,11 +4,8 @@ export type PaginationProps = Omit<ComponentProps<"nav">, "children"> & {
     page: number;
     pages: number;
     onPageChange: (page: number) => void;
-    /** At the bar's start, such as a `Select` of how many rows a page shows. */
     pageSizeSelect?: ReactNode;
-    /** Before the pager, such as "Showing 1 to 25 of 1,284". */
     summary?: ReactNode;
-    /** A button per page between Previous and Next, for a short run of pages. */
     numbered?: boolean;
     labels?: Partial<CiridaeLabels["pagination"]>;
 };
@@ -19,7 +16,6 @@ export type EmptyStateProps = Omit<ComponentProps<"section">, "title"> & {
     description?: ReactNode;
     /** The main way forward: a primary medium button on a page, a secondary small one in a card. */
     action?: ReactNode;
-    /** A second way forward before `action`, such as a secondary medium button on a page. */
     secondaryAction?: ReactNode;
     /**
      * `block` is a page's or panel's empty state; `bare` the same, tighter, for a table or card
@@ -29,10 +25,7 @@ export type EmptyStateProps = Omit<ComponentProps<"section">, "title"> & {
 };
 export declare function EmptyState({ icon, title, description, action, secondaryAction, variant, className, ...props }: EmptyStateProps): import("react").JSX.Element;
 export type EmptyTileProps = Omit<ComponentProps<"div">, "children"> & {
-    /** What the tile would count, as its stat tile names it. */
     label: ReactNode;
-    /** Why there is no figure, such as "No invoices this period". */
     note?: ReactNode;
 };
-/** A stat tile with no figure: its label, a dash in the figure's place, and why. */
 export declare function EmptyTile({ label, note, className, ...props }: EmptyTileProps): import("react").JSX.Element;

package/dist/components/navigation.js

@@ -6,11 +6,7 @@ import { icon } from "./icon.js";
 import { Heading } from "./layout.js";
 import { useCiridaeLocale } from "./locale.js";
 import { cardSurface } from "./panel.js";
-/*
- * The bar under a table, the kit's Pagination. Full: the page size at the start, then the summary
- * and the pager at the end, inset 12px. Simple, with no page size: the summary at the start, the
- * pager at the end, flush.
- */
+/* Full is inset 12px; simple, with no page size, is flush. */
 const pagination = css({
     display: "flex",
     alignItems: "center",
@@ -19,7 +15,7 @@ const pagination = css({
     minHeight: "control.row",
     paddingInline: "panel.default",
     lineHeight: "tight",
-    "&[data-type=simple]": { paddingInline: "0" },
+    "&[data-type=simple]": { paddingInline: "none" },
 });
 const paginationEnd = css({
     display: "flex",
@@ -34,7 +30,6 @@ const paginationSummary = css({
     letterSpacing: "compact",
     fontVariantNumeric: "tabular-nums",
 });
-// Simple: the summary and the pager are the bar's own ends.
 const summaryAndPagerAsBarEnds = css({ display: "contents" });
 const pager = css({ display: "flex", alignItems: "center", gap: "layout.tightGap" });
 const pagerAlone = css({ marginInlineStart: "auto" });
@@ -50,14 +45,12 @@ const emptyState = cva({
     base: { display: "grid", placeItems: "center", textAlign: "center" },
     variants: {
         variant: {
-            // A page or panel with nothing in it yet: no frame, with room around it.
             block: {
                 justifyItems: "center",
                 gap: "layout.clusterGap",
                 paddingBlock: "emptyState.pageBlock",
                 paddingInline: "panel.roomy",
             },
-            // Inside a table or a card that frames it already: tighter, its copy wrapping to the card.
             bare: {
                 justifyItems: "center",
                 gap: "layout.contentGap",
@@ -117,7 +110,6 @@ export function EmptyState({ icon, title, description, action, secondaryAction,
     }
     return (_jsxs("section", { ...props, "data-ciridae-ui": "", "data-variant": variant, className: cx(emptyState({ variant }), className), children: [icon && (_jsx("span", { className: emptyRing, "aria-hidden": "true", children: icon })), _jsxs("div", { className: emptyCopy, children: [_jsx(Heading, { level: 2, size: "small", className: emptyTitle, children: title }), description && _jsx("p", { className: emptyDescription, children: description })] }), (action || secondaryAction) && (_jsxs("div", { className: emptyActions, children: [secondaryAction, action] }))] }));
 }
-// A dashboard tile with nothing to count, worn like the stat tile it stands in for.
 const emptyTile = css(cardSurface, {
     display: "grid",
     alignContent: "start",
@@ -131,10 +123,9 @@ const emptyTile = css(cardSurface, {
     letterSpacing: "compact",
     lineHeight: "tight",
 });
-const emptyTileLabel = css({ color: "fg.label" });
+const emptyTileLabel = css({ color: "fg.primary" });
 const emptyTileValue = css({ color: "fg.primary", fontSize: "body" });
 const emptyTileNote = css({ color: "fg.subtle" });
-/** A stat tile with no figure: its label, a dash in the figure's place, and why. */
 export function EmptyTile({ label, note, className, ...props }) {
     return (_jsxs("div", { ...props, className: cx(emptyTile, className), "data-ciridae-ui": "", children: [_jsx("span", { className: emptyTileLabel, children: label }), _jsx("span", { className: emptyTileValue, children: "\u2014" }), note && _jsx("span", { className: emptyTileNote, children: note })] }));
 }

package/dist/components/notification-tray.js

@@ -42,17 +42,17 @@ const popup = css({
     display: "flex",
     flexDirection: "column",
     width: "overlay.tray",
-    maxWidth: "calc(100vw - token(spacing.layout.pageGap) * 2)",
+    maxWidth: "[calc(100vw - token(spacing.layout.pageGap) * 2)]",
     padding: "none",
     overflow: "hidden",
-    border: "1px solid token(colors.border.divider)",
+    border: "1px solid token(colors.border.popover)",
     borderRadius: "action",
     background: "bg.popover",
-    backdropFilter: "blur(token(blurs.popover))",
+    backdropFilter: "[blur(token(blurs.popover))]",
     color: "fg.primary",
     textStyle: "body",
     boxShadow: "soft",
-    outline: "none",
+    outline: "0",
 });
 const header = css({
     display: "flex",
@@ -109,7 +109,7 @@ const openButton = css({
     border: "0",
     background: "transparent",
     cursor: "pointer",
-    outline: "none",
+    outline: "0",
     _focusVisible: { focusRing: "inset" },
 });
 const rowBody = css({
@@ -117,7 +117,7 @@ const rowBody = css({
     display: "grid",
     flex: "1",
     minWidth: "0",
-    gap: "2px",
+    gap: "[2px]",
     pointerEvents: "none",
     "& button": { pointerEvents: "auto" },
 });
@@ -168,7 +168,7 @@ const footer = css({
     letterSpacing: "compact",
     textAlign: "start",
     cursor: "pointer",
-    outline: "none",
+    outline: "0",
     _hover: { background: "bg.rowHover", color: "fg.primary" },
     _focusVisible: { focusRing: "inset" },
 });

package/dist/components/overlays.d.ts

@@ -103,7 +103,10 @@ export declare function Popover({ trigger, anchor, children, density, width, ali
 export type TooltipProps = Omit<ComponentProps<typeof BaseTooltip.Root>, "children"> & {
     children: ReactElement;
     content: ReactNode;
-    /** A count or shortcut after the content, quieter than it. */
     meta?: ReactNode;
+    /** Where it sits against its trigger; above it by default. `inline-end` follows the direction. */
+    side?: ComponentProps<typeof BaseTooltip.Positioner>["side"];
 };
-export declare function Tooltip({ children, content, meta, ...rootProps }: TooltipProps): import("react").JSX.Element;
+/** The tooltip's floating chip, for a tooltip trigger composed by hand, such as a menu's. */
+export declare function TooltipChip({ content, meta, side, }: Pick<TooltipProps, "content" | "meta" | "side">): import("react").JSX.Element;
+export declare function Tooltip({ children, content, meta, side, ...rootProps }: TooltipProps): import("react").JSX.Element;

package/dist/components/overlays.js

@@ -8,7 +8,7 @@ import { useCallback, useRef, useState, } from "react";
 import { css, cx } from "#primitives/css";
 import { Button, ButtonSizeContext, IconButton } from "./button.js";
 import { DialogHeightResetContext } from "./dialog-height-context.js";
-import { glassMenuSurface } from "./glass-menu.js";
+import { glassMenuOffsetFromTrigger, glassMenuSurface } from "./glass-menu.js";
 import { HotkeyLayer } from "./hotkeys.js";
 import { icon } from "./icon.js";
 import { heading } from "./layout.js";
@@ -32,33 +32,30 @@ const dialogLayout = css.raw({
     // A dialog's own inset, not the page margin, so page density changes leave it alone.
     padding: "panel.comfortable",
 });
-/*
- * A dialog is a glass shell, 4px round its sheet, holding the sheet itself. `--dialog-sheet` is
- * the sheet's width; the shell adds its inset and edge. Dark blurs the shell and light the sheet.
- */
+/* `--dialog-sheet` is the sheet's width; the shell adds its inset and edge. Dark blurs the shell and light the sheet. */
 const dialogShell = css.raw({
     "--dialog-sheet": "token(sizes.overlay.dialog)",
     zIndex: "dialog",
     position: "fixed",
-    top: "50%",
-    left: "50%",
+    top: "[50%]",
+    left: "[50%]",
     display: "grid",
     gridTemplateRows: "minmax(0, 1fr)",
-    width: "calc(100vw - token(spacing.layout.pageGap) * 2)",
-    maxWidth: "calc(var(--dialog-sheet) + 2 * (token(spacing.layout.tightGap) + token(sizes.border.hairline)))",
-    maxHeight: "calc(100dvh - token(spacing.layout.pageGap) * 2)",
+    width: "[calc(100vw - token(spacing.layout.pageGap) * 2)]",
+    maxWidth: "[calc(var(--dialog-sheet) + 2 * (token(spacing.layout.tightGap) + token(sizes.border.hairline)))]",
+    maxHeight: "[calc(100dvh - token(spacing.layout.pageGap) * 2)]",
     padding: "layout.tightGap",
     border: "1px solid token(colors.border.control)",
     borderRadius: "shell",
     background: "bg.modalShell",
-    backdropFilter: "blur(token(blurs.modalShell))",
-    outline: "none",
+    backdropFilter: "[blur(token(blurs.modalShell))]",
+    outline: "0",
     transform: "translate(-50%, -50%)",
-    transitionProperty: "opacity, transform",
+    transitionProperty: "[opacity, transform]",
     transitionDuration: "fast",
-    _motionReduce: { transition: "none" },
+    _motionReduce: { transition: "[none]" },
     "&[data-starting-style], &[data-ending-style]": {
-        opacity: "0",
+        opacity: "[0]",
         transform: "translate(-50%, calc(-50% + token(spacing.control.block)))",
     },
 });
@@ -67,7 +64,7 @@ const dialogSheetStyle = css.raw(dialogLayout, {
     border: "1px solid token(colors.border.control)",
     borderRadius: "inset",
     background: "bg.modalSheet",
-    backdropFilter: "blur(token(blurs.modalSheet))",
+    backdropFilter: "[blur(token(blurs.modalSheet))]",
     boxShadow: "soft",
     color: "fg.primary",
     textStyle: "body",
@@ -107,7 +104,7 @@ const dialogBody = css({
     "&:has(> [data-wizard-state=result])": { alignContent: "center" },
     gap: "layout.contentGap",
     overflowY: "auto",
-    margin: "calc(token(spacing.control.block) * -1)",
+    margin: "[calc(token(spacing.control.block) * -1)]",
     padding: "control.block",
 });
 const dialogLeadingActions = css({
@@ -115,7 +112,6 @@ const dialogLeadingActions = css({
     gap: "layout.controlGap",
     marginInlineEnd: "auto",
 });
-// Under a divider, its buttons at the default height and close together.
 const dialogFooter = css({
     display: "flex",
     justifyContent: "flex-end",
@@ -242,7 +238,7 @@ const popoverWidths = {
 const hoverOpenDelayMs = 300;
 const hoverCloseDelayMs = 150;
 export function Popover({ trigger, anchor, children, density = "regular", width, align, openOnHover = false, ...rootProps }) {
-    return (_jsxs(BasePopover.Root, { ...rootProps, children: [trigger && (_jsx(BasePopover.Trigger, { render: trigger, openOnHover: openOnHover, delay: hoverOpenDelayMs, closeDelay: hoverCloseDelayMs })), _jsx(BasePopover.Portal, { children: _jsx(HotkeyLayer, { enabled: !openOnHover, children: _jsx(BasePopover.Positioner, { className: positioner, sideOffset: 4, align: align, anchor: anchor, children: _jsx(BasePopover.Popup, { className: cx(popoverPopups[density], width && popoverWidths[width]), "data-ciridae-ui": "", initialFocus: openOnHover ? (openType) => openType === "keyboard" : undefined, children: children }) }) }) })] }));
+    return (_jsxs(BasePopover.Root, { ...rootProps, children: [trigger && (_jsx(BasePopover.Trigger, { render: trigger, openOnHover: openOnHover, delay: hoverOpenDelayMs, closeDelay: hoverCloseDelayMs })), _jsx(BasePopover.Portal, { children: _jsx(HotkeyLayer, { enabled: !openOnHover, children: _jsx(BasePopover.Positioner, { className: positioner, sideOffset: glassMenuOffsetFromTrigger, align: align, anchor: anchor, children: _jsx(BasePopover.Popup, { className: cx(popoverPopups[density], width && popoverWidths[width]), "data-ciridae-ui": "", initialFocus: openOnHover ? (openType) => openType === "keyboard" : undefined, children: children }) }) }) })] }));
 }
 /* An inverted chip: the primary face, ink in light and white in dark, with the text in the canvas's. */
 const tooltipPopup = css({
@@ -255,15 +251,19 @@ const tooltipPopup = css({
     borderRadius: "keycap",
     background: "fg.primary",
     color: "bg.canvas",
-    _light: { background: "token(gradients.primary)", color: "fg.onAccent" },
+    _light: { background: "[token(gradients.primary)]", color: "fg.onAccent" },
     fontSize: "code",
     fontWeight: "medium",
     lineHeight: "tight",
     letterSpacing: "compact",
     maxWidth: "overlay.tooltip",
-    textWrap: "pretty",
+    textWrap: "[pretty]",
 });
-const tooltipMeta = css({ flexShrink: "0", opacity: "0.6" });
-export function Tooltip({ children, content, meta, ...rootProps }) {
-    return (_jsx(BaseTooltip.Provider, { children: _jsxs(BaseTooltip.Root, { ...rootProps, children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { className: tooltipPositioner, sideOffset: 8, children: _jsxs(BaseTooltip.Popup, { className: tooltipPopup, "data-ciridae-ui": "", children: [content, meta !== undefined && _jsx("span", { className: tooltipMeta, children: meta })] }) }) })] }) }));
+const tooltipMeta = css({ flexShrink: "0", opacity: "[0.6]" });
+/** The tooltip's floating chip, for a tooltip trigger composed by hand, such as a menu's. */
+export function TooltipChip({ content, meta, side, }) {
+    return (_jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { className: tooltipPositioner, side: side, sideOffset: 8, children: _jsxs(BaseTooltip.Popup, { className: tooltipPopup, "data-ciridae-ui": "", children: [content, meta !== undefined && _jsx("span", { className: tooltipMeta, children: meta })] }) }) }));
+}
+export function Tooltip({ children, content, meta, side, ...rootProps }) {
+    return (_jsx(BaseTooltip.Provider, { children: _jsxs(BaseTooltip.Root, { ...rootProps, children: [_jsx(BaseTooltip.Trigger, { render: children }), _jsx(TooltipChip, { content: content, meta: meta, side: side })] }) }));
 }

package/dist/components/panel.js

@@ -15,7 +15,7 @@ export const cardSurface = css.raw({
     minWidth: "0",
     border: "1px solid token(colors.border.card)",
     borderRadius: "action",
-    background: "token(gradients.card)",
+    background: "[token(gradients.card)]",
 });
 const card = css(cardSurface);
 const panel = cva({
@@ -39,7 +39,7 @@ const panel = cva({
             default: { gap: "layout.contentGap", padding: "panel.default" },
         },
         tone: {
-            panel: { borderColor: "border.panel", background: "token(gradients.panel)" },
+            panel: { borderColor: "border.panel", background: "[token(gradients.panel)]" },
             outline: { borderColor: "border.control" },
         },
     },
@@ -65,7 +65,7 @@ const panelHeader = css({
         gap: "layout.controlGap",
         paddingInline: "none",
         paddingBottom: "panel.comfortable",
-        marginBottom: "calc(token(spacing.layout.contentGap) * -1)",
+        marginBottom: "[calc(token(spacing.layout.contentGap) * -1)]",
     },
 });
 const panelHeaderTitle = css(singleLineText, {

package/dist/components/progress.js

@@ -10,9 +10,9 @@ export function Progress({ value, label }) {
                     background: "border.control",
                     overflow: "hidden",
                 }), children: _jsx(BaseProgress.Indicator, { className: css({
-                        height: "100%",
+                        height: "full",
                         background: "accent.green",
-                        transitionProperty: "width",
+                        transitionProperty: "[width]",
                         transitionDuration: "default",
                     }) }) })] }));
 }

package/dist/components/radio-card.d.ts

@@ -10,7 +10,7 @@ export type RadioCardGroupProps = Omit<ComponentProps<typeof BaseRadioGroup>, "d
     onValueChange?: (value: string) => void;
 };
 export declare function RadioCardGroup({ name, label, defaultValue, value, onValueChange, className, ...props }: RadioCardGroupProps): import("react").JSX.Element;
-export type RadioCardProps = Omit<ComponentProps<typeof BaseRadio.Root>, "children" | "className"> & {
+export type RadioCardProps = Omit<ComponentProps<typeof BaseRadio.Root>, "children" | "className" | "title"> & {
     value: string;
     title: ReactNode;
     detail?: ReactNode;