@ciridae/ui 1.0.3 → 1.0.5

package/dist/components/menu.js

@@ -3,21 +3,14 @@ import { Menu as BaseMenu } from "@base-ui/react/menu";
 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 { HotkeyLayer } from "./hotkeys.js";
 import { directional, icon, Spinner } from "./icon.js";
 import { ShortcutHint } from "./keycap.js";
-/* Flush, like the select menu: rows run edge to edge and the popup's corners clip them. */
-const popup = css({
-    minWidth: "overlay.menu",
-    padding: "none",
-    overflow: "hidden",
-    border: "1px solid token(colors.border.control)",
-    borderRadius: "action",
-    background: "bg.card",
-    color: "fg.primary",
-    textStyle: "body",
-    boxShadow: "card",
-});
+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" },
@@ -25,28 +18,34 @@ const submenuPopup = css({
 });
 /** The positioner is the positioned element, so it carries the stacking order. */
 const positioner = css({ zIndex: "popover" });
-const item = css({
-    display: "flex",
-    alignItems: "center",
-    gap: "layout.controlGap",
-    minHeight: "menu.item",
-    paddingInline: "control.compactInline",
-    fontSize: "caption",
-    lineHeight: "body",
-    cursor: "pointer",
-    outline: "none",
-    "&[data-highlighted], &[data-popup-open]": { background: "bg.rowHover" },
-    "&[data-disabled]": { opacity: "disabled", cursor: "not-allowed" },
+// A submenu's row stays lit while its submenu is open. A label stays on the row's one line, as the
+// design's 32px rows set it, and ends in an ellipsis in a menu held to its trigger's width.
+const itemStyle = css.raw(glassMenuRow, {
+    "&[data-popup-open]": {
+        background: "bg.hover",
+        boxShadow: "inset 0 0 0 1px token(colors.border.menuHover)",
+    },
     "& > [data-label]": { flex: "1", minWidth: "0" },
     "& > [data-trailing]": { color: "fg.muted" },
 });
-const danger = css({ color: "accent.red" });
+const item = css(itemStyle);
+const dangerItem = css(itemStyle, { color: "accent.red" });
+// Every icon sits in one 14px slot, so labels line up whatever the icon's own size. A wider mark,
+// such as an avatar, widens its slot instead of spilling into the gap before the label.
+const iconSlot = css({
+    display: "inline-grid",
+    placeItems: "center",
+    flexShrink: "0",
+    minWidth: "mark.inline",
+    minHeight: "mark.inline",
+    fontSize: "icon.small",
+});
 /* Not an item: a row that names what the menu belongs to, such as the signed-in account. */
 const header = css({
     display: "flex",
     alignItems: "center",
     gap: "layout.controlGap",
-    paddingInline: "control.compactInline",
+    paddingInline: "menu.itemInline",
     paddingBlock: "control.compactBlock",
     fontSize: "caption",
     lineHeight: "compact",
@@ -64,7 +63,7 @@ const groupHeading = css({
     display: "flex",
     alignItems: "center",
     minHeight: "menu.item",
-    paddingInline: "control.compactInline",
+    paddingInline: "menu.itemInline",
     color: "fg.muted",
     fontSize: "code",
     fontWeight: "medium",
@@ -72,18 +71,16 @@ const groupHeading = css({
     cursor: "default",
 });
 const itemMeta = css({
+    flexShrink: "1",
     minWidth: "0",
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
-    color: "fg.muted",
-});
-const separator = css({
-    height: "border.hairline",
-    background: "border.subtle",
+    fontSize: "caption",
 });
-export function Menu({ trigger, items, align = "start", ...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: 6, align: align, children: _jsx(BaseMenu.Popup, { className: popup, "data-ciridae-ui": "", children: _jsx(MenuItems, { items: items }) }) }) }) })] }));
+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 }) }) }) }) })] }));
 }
 /** 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 }) {
@@ -100,10 +97,10 @@ 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", { "data-label": "", children: menuItem.label }), _jsx(CaretRightIcon, { "data-trailing": "", className: cx(icon({ size: "tiny" }), directional) })] }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { className: positioner, sideOffset: 0, align: "start", alignOffset: -1, 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: -5, children: _jsx(BaseMenu.Popup, { className: cx(popup, submenuPopup), "data-ciridae-ui": "", children: _jsx(MenuItems, { items: menuItem.items }) }) }) })] }, menuItem.label));
         }
-        const content = (_jsxs(_Fragment, { children: [menuItem.loading ? _jsx(Spinner, { "aria-hidden": "true" }) : menuItem.icon, _jsxs("span", { "data-label": "", children: [menuItem.label, menuItem.meta !== undefined && _jsxs("span", { className: itemMeta, children: [" ", menuItem.meta] })] }), menuItem.shortcut && _jsx(ShortcutHint, { "data-trailing": "", hotkey: menuItem.shortcut }), menuItem.checked && _jsx(CheckIcon, { "data-trailing": "", className: icon({ size: "small" }) })] }));
-        const className = cx(item, menuItem.variant === "danger" && danger);
+        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));
         }

package/dist/components/meter.d.ts

@@ -1,5 +1,5 @@
 import type { Tone } from "./badge.js";
-import type { ComponentProps, ReactNode } from "react";
+import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
 export type MeterProps = Omit<ComponentProps<"span">, "children"> & {
     value: number;
     /** 1 by default, so a share can be passed as is. */
@@ -12,3 +12,11 @@ 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

@@ -1,8 +1,9 @@
-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";
 /*
  * 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.
+ * 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.
  */
 import { css, cva, cx } from "#primitives/css";
 const meter = css({
@@ -19,9 +20,9 @@ const track = cva({
     variants: {
         tone: {
             neutral: { background: "bg.hover" },
-            info: { background: "bg.infoSubtle" },
+            info: { background: "chart.progressTrack" },
             success: { background: "bg.successSubtle" },
-            warning: { background: "bg.warningSubtle" },
+            warning: { background: "chart.atRiskTrack" },
             danger: { background: "bg.errorSubtle" },
         },
     },
@@ -31,9 +32,9 @@ const fill = cva({
     variants: {
         tone: {
             neutral: { background: "fg.subtle" },
-            info: { background: "accent.blue" },
+            info: { background: "token(gradients.chart.progress)" },
             success: { background: "accent.green" },
-            warning: { background: "accent.yellow" },
+            warning: { background: "token(gradients.chart.atRisk)" },
             danger: { background: "accent.red" },
         },
     },
@@ -42,3 +43,60 @@ export function Meter({ value, max = 1, tone = "info", label, valueLabel, classN
     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}%` } }) })] }));
 }
+/*
+ * 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%",
+    paddingBlock: "panel.default",
+    paddingInline: "panel.comfortable",
+    border: "0",
+    borderTop: "1px solid token(colors.border.divider)",
+    background: "transparent",
+    color: "fg.primary",
+    font: "inherit",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    textAlign: "start",
+    _first: { borderTop: "0" },
+    "&:is(button)": {
+        cursor: "pointer",
+        _hover: { background: "bg.rowHover" },
+        _focusVisible: { focusRing: "inset" },
+    },
+});
+const budgetLeading = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.contentGap",
+    flex: "1",
+    minWidth: "0",
+});
+const budgetTile = css({
+    display: "inline-grid",
+    placeItems: "center",
+    flexShrink: "0",
+    width: "tile.icon",
+    height: "tile.icon",
+    border: "1px solid transparent",
+    borderRadius: "action",
+    background: "token(gradients.raised)",
+    fontSize: "icon.medium",
+    "--edge": "token(gradients.border.raised)",
+});
+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" });
+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,18 +4,35 @@ 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"]>;
 };
-export declare function Pagination({ page, pages, onPageChange, labels: ownLabels, className, ...props }: PaginationProps): import("react").JSX.Element;
+export declare function Pagination({ page, pages, onPageChange, pageSizeSelect, summary, numbered, labels: ownLabels, className, ...props }: PaginationProps): import("react").JSX.Element;
 export type EmptyStateProps = Omit<ComponentProps<"section">, "title"> & {
     icon?: ReactNode;
     title: ReactNode;
     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` frames a page's or panel's empty state; `bare` is the same without the frame, its icon
-     * in a ring, for a table or card that frames it; `inline` is one muted line in a list.
+     * `block` is a page's or panel's empty state; `bare` the same, tighter, for a table or card
+     * that frames it; `inline` is one muted line in a list.
      */
     variant?: "block" | "bare" | "inline";
 };
-export declare function EmptyState({ icon, title, description, action, variant, className, ...props }: EmptyStateProps): import("react").JSX.Element;
+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

@@ -1,30 +1,67 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
 import { css, cva, cx } from "#primitives/css";
-import { Button } from "./button.js";
+import { Button, IconButton } from "./button.js";
+import { icon } from "./icon.js";
 import { Heading } from "./layout.js";
 import { useCiridaeLocale } from "./locale.js";
-export function Pagination({ page, pages, onPageChange, labels: ownLabels, className, ...props }) {
+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.
+ */
+const pagination = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.controlGap",
+    minHeight: "control.row",
+    paddingInline: "panel.default",
+    lineHeight: "tight",
+    "&[data-type=simple]": { paddingInline: "0" },
+});
+const paginationEnd = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.clusterGap",
+    marginInlineStart: "auto",
+});
+const paginationSummary = css({
+    color: "fg.secondary",
+    fontSize: "code",
+    fontWeight: "medium",
+    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" });
+export function Pagination({ page, pages, onPageChange, pageSizeSelect, summary, numbered = false, labels: ownLabels, className, ...props }) {
     const locale = useCiridaeLocale();
     const labels = { ...locale.labels.pagination, ...ownLabels };
-    const visible = Array.from({ length: pages }, (_, index) => index + 1);
-    return (_jsxs("nav", { "aria-label": labels.label, ...props, className: cx(css({ display: "flex", gap: "layout.tightGap" }), className), "data-ciridae-ui": "", children: [_jsx(Button, { variant: "ghost", disabled: pages === 0 || page <= 1, onClick: () => onPageChange(Math.max(1, page - 1)), children: labels.previous }), visible.map((value) => (_jsx(Button, { variant: value === page ? "primary" : "ghost", "aria-current": value === page ? "page" : undefined, onClick: () => onPageChange(value), children: locale.formatNumber(value) }, value))), _jsx(Button, { variant: "ghost", disabled: pages === 0 || page >= pages, onClick: () => onPageChange(Math.min(pages, page + 1)), children: labels.next })] }));
+    const Previous = locale.dir === "rtl" ? CaretRightIcon : CaretLeftIcon;
+    const Next = locale.dir === "rtl" ? CaretLeftIcon : CaretRightIcon;
+    return (_jsxs("nav", { "aria-label": labels.label, ...props, className: cx(pagination, className), "data-ciridae-ui": "", "data-type": pageSizeSelect ? "full" : "simple", children: [pageSizeSelect, _jsxs("div", { className: pageSizeSelect ? paginationEnd : summaryAndPagerAsBarEnds, children: [summary && _jsx("span", { className: paginationSummary, children: summary }), _jsxs("div", { className: cx(pager, !summary && pagerAlone), children: [_jsx(IconButton, { "aria-label": labels.previous, size: "medium", disabled: pages === 0 || page <= 1, onClick: () => onPageChange(Math.max(1, page - 1)), children: _jsx(Previous, { className: icon({ size: "small" }) }) }), numbered &&
+                                Array.from({ length: pages }, (_, index) => index + 1).map((value) => (_jsx(Button, { variant: value === page ? "primary" : "ghost", "aria-current": value === page ? "page" : undefined, onClick: () => onPageChange(value), children: locale.formatNumber(value) }, value))), _jsx(IconButton, { "aria-label": labels.next, size: "medium", disabled: pages === 0 || page >= pages, onClick: () => onPageChange(Math.min(pages, page + 1)), children: _jsx(Next, { className: icon({ size: "small" }) }) })] })] })] }));
 }
 const emptyState = cva({
     base: { display: "grid", placeItems: "center", textAlign: "center" },
     variants: {
         variant: {
-            // A page or panel with nothing in it yet: a dashed frame with room for a heading.
+            // A page or panel with nothing in it yet: no frame, with room around it.
             block: {
-                minHeight: "emptyState.minimum",
-                padding: "panel.roomy",
-                border: "1px dashed token(colors.border.control)",
-                borderRadius: "inset",
+                justifyItems: "center",
+                gap: "layout.clusterGap",
+                paddingBlock: "emptyState.pageBlock",
+                paddingInline: "panel.roomy",
             },
-            // Inside a table or a card that frames it already: the icon in a ring, no frame of its own.
+            // Inside a table or a card that frames it already: tighter, its copy wrapping to the card.
             bare: {
                 justifyItems: "center",
-                gap: "layout.clusterGap",
-                paddingBlock: "panel.roomy",
+                gap: "layout.contentGap",
+                paddingBlock: "emptyState.compactBlock",
                 paddingInline: "panel.comfortable",
             },
             // A list or section with nothing to show: one muted line, no frame.
@@ -45,31 +82,59 @@ const emptyRing = css({
     height: "brand.logo",
     border: "1px solid token(colors.border.control)",
     borderRadius: "round",
-    background: "bg.field",
+    // The field's grey well in light; in dark the deep grey a disabled field wears, not the white
+    // wash of a dark field, so the ring sits below the page rather than lit on it.
+    background: "bg.fieldDisabled",
+    _light: { background: "bg.field" },
     color: "fg.muted",
     fontSize: "icon.small",
 });
 const emptyCopy = css({ display: "grid", gap: "control.iconGap", maxWidth: "card.centered" });
+// The title in the primary ink, whatever the table or card round it sets as its text colour.
+const emptyTitle = css({ color: "fg.primary", lineHeight: "tight" });
 const emptyDescription = css({
     margin: "none",
     color: "fg.muted",
+    _light: { color: "fg.secondary" },
     fontSize: "code",
     fontWeight: "medium",
     letterSpacing: "compact",
-    lineHeight: "body",
+    // A page's one line of help sits on the title's tight line; a card's wraps.
+    lineHeight: "tight",
+    "[data-variant=bare] &": { lineHeight: "body" },
 });
 const emptyActions = css({
     display: "flex",
     flexWrap: "wrap",
     justifyContent: "center",
     gap: "layout.controlGap",
+    paddingBlock: "layout.tightGap",
+    "[data-variant=bare] > &": { paddingBlock: "none" },
 });
-export function EmptyState({ icon, title, description, action, variant = "block", className, ...props }) {
+export function EmptyState({ icon, title, description, action, secondaryAction, variant = "block", className, ...props }) {
     if (variant === "inline") {
         return (_jsxs("section", { ...props, "data-ciridae-ui": "", className: cx(emptyState({ variant }), className), children: [_jsxs("span", { className: css({ display: "inline-flex", alignItems: "center", gap: "control.iconGap" }), children: [icon, title] }), description && _jsx("span", { children: description }), action] }));
     }
-    if (variant === "bare") {
-        return (_jsxs("section", { ...props, "data-ciridae-ui": "", 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", children: title }), description && _jsx("p", { className: emptyDescription, children: description })] }), action && _jsx("div", { className: emptyActions, children: action })] }));
-    }
-    return (_jsx("section", { ...props, "data-ciridae-ui": "", className: cx(emptyState({ variant }), className), children: _jsxs("div", { className: css({ display: "grid", justifyItems: "center", gap: "layout.contentGap" }), children: [icon, _jsx(Heading, { level: 2, children: title }), description && _jsx("p", { className: css({ margin: "none", color: "fg.muted" }), children: description }), action] }) }));
+    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",
+    justifyItems: "start",
+    gap: "layout.controlGap",
+    minHeight: "tile.minimum",
+    paddingBlock: "tile.block",
+    paddingInline: "tile.inline",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+const emptyTileLabel = css({ color: "fg.label" });
+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

@@ -45,12 +45,13 @@ const popup = css({
     maxWidth: "calc(100vw - token(spacing.layout.pageGap) * 2)",
     padding: "none",
     overflow: "hidden",
-    border: "1px solid token(colors.border.control)",
+    border: "1px solid token(colors.border.divider)",
     borderRadius: "action",
-    background: "bg.card",
+    background: "bg.popover",
+    backdropFilter: "blur(token(blurs.popover))",
     color: "fg.primary",
     textStyle: "body",
-    boxShadow: "card",
+    boxShadow: "soft",
     outline: "none",
 });
 const header = css({
@@ -66,7 +67,7 @@ const caughtUp = css({ color: "fg.muted", fontSize: "caption", fontWeight: "medi
 const filters = css({
     paddingInline: "panel.comfortable",
     paddingBottom: "layout.tightGap",
-    borderBottom: "1px solid token(colors.border.control)",
+    borderBottom: "1px solid token(colors.border.divider)",
 });
 const list = css({
     display: "grid",

package/dist/components/overlays.d.ts

@@ -103,5 +103,7 @@ 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;
 };
-export declare function Tooltip({ children, content, ...rootProps }: TooltipProps): import("react").JSX.Element;
+export declare function Tooltip({ children, content, meta, ...rootProps }: TooltipProps): import("react").JSX.Element;