@ciridae/ui 1.0.3 → 1.0.4

package/dist/components/badge.js

@@ -1,12 +1,21 @@
-import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /*
  * A badge: a short label, usually with an icon, that says what state something is in. Its
  * `tone` carries the meaning: `warning`, `danger`, `success` and `info` tint the glass toward
- * their hue, `neutral` stays grey. A `pill` carries a judgment, such as a verdict or a run mode;
- * a `square` badge carries a fact, such as where a value came from, in a field's flat well.
+ * their hue, `neutral` stays grey, and `ink` is the solid face of what a run actually did. A
+ * `pill` carries a judgment, such as a verdict or a run mode; a `square` badge carries a fact,
+ * such as where a value came from, in a field's flat well. `LifecycleBadge` is the pill for where
+ * a record sits in its stages, and `BadgeGlyph` and `AssuranceGlyph` the small marks badges and
+ * fields put in their icon slot.
  */
 import { useRender } from "@base-ui/react/use-render";
-import { cva, cx } from "#primitives/css";
+import { CheckIcon, ClockIcon, HourglassIcon, SparkleIcon, StopIcon } from "@phosphor-icons/react";
+import { css, cva, cx } from "#primitives/css";
+/*
+ * A tinted pill is its hue's glass, falling from light to its hue, inside that hue's gradient
+ * hairline, which the `[data-edge="gradient"]` ring draws from `--edge`. Neutral is the raised
+ * glass, warning the tinted button's warm glass, and ink the primary face.
+ */
 const badge = cva({
     base: {
         display: "inline-flex",
@@ -29,16 +38,23 @@ const badge = cva({
     variants: {
         shape: {
             pill: { borderRadius: "pill" },
+            // The well of a form field in dark, the card's face in light, lettered in the label grey.
             square: {
                 borderRadius: "control",
                 borderColor: "border.control",
-                background: "bg.field",
-                _light: { borderColor: "border.mark", background: "bg.card" },
+                background: "bg.formField",
+                color: "fg.label",
+                _light: { background: "bg.card" },
             },
         },
-        // A fact told in passing: the icon and the words, muted, with no box; a tone tints the icon.
+        /*
+         * `filled` is the tone's glass; `outline` the card's face inside the tone's edge, as an
+         * outcome that changed nothing; `bare` a fact told in passing: the icon and the words, muted,
+         * with no box, the tone on the icon alone.
+         */
         appearance: {
             filled: {},
+            outline: {},
             bare: {
                 height: "auto",
                 gap: "layout.tightGap",
@@ -54,21 +70,80 @@ const badge = cva({
             neutral: {},
             info: { color: "accent.blue" },
             success: { color: "accent.green" },
-            warning: { color: "accent.yellow" },
+            warning: { color: "accent.yellow", "& svg": { color: "accent.yellowIcon" } },
             danger: { color: "accent.red" },
+            ink: { color: "fg.primary" },
         },
     },
     compoundVariants: [
-        { appearance: "filled", shape: "pill", tone: "neutral", css: { background: "bg.raised" } },
-        { appearance: "filled", shape: "pill", tone: "info", css: { background: "bg.infoSubtle" } },
+        {
+            appearance: "filled",
+            shape: "pill",
+            tone: "neutral",
+            css: {
+                background: "token(gradients.raised)",
+                color: "fg.label",
+                "--edge": "token(gradients.border.raised)",
+            },
+        },
+        {
+            appearance: "filled",
+            shape: "pill",
+            tone: "info",
+            css: {
+                background: "token(gradients.infoGlass)",
+                "--edge": "token(gradients.border.infoGlass)",
+            },
+        },
         {
             appearance: "filled",
             shape: "pill",
             tone: "success",
-            css: { background: "bg.successSubtle" },
+            css: {
+                background: "token(gradients.successGlass)",
+                "--edge": "token(gradients.border.successGlass)",
+            },
+        },
+        {
+            appearance: "filled",
+            shape: "pill",
+            tone: "warning",
+            css: {
+                background: "token(gradients.tinted)",
+                "--edge": "token(gradients.border.raised)",
+                _light: { "--edge": "token(gradients.border.tinted)" },
+            },
+        },
+        {
+            appearance: "filled",
+            shape: "pill",
+            tone: "danger",
+            css: {
+                background: "token(gradients.dangerGlass)",
+                "--edge": "token(gradients.border.dangerGlass)",
+            },
+        },
+        {
+            appearance: "filled",
+            shape: "pill",
+            tone: "ink",
+            css: {
+                background: "token(gradients.primary)",
+                color: "bg.canvas",
+                "--edge": "token(gradients.border.primary)",
+                _light: { color: "fg.onAccent" },
+            },
+        },
+        {
+            appearance: "outline",
+            shape: "pill",
+            css: {
+                background: "token(gradients.raised)",
+                color: "fg.primary",
+                "--edge": "token(gradients.border.raised)",
+                _light: { background: "bg.card", "--edge": "token(gradients.border.primary)" },
+            },
         },
-        { appearance: "filled", shape: "pill", tone: "warning", css: { background: "bg.tinted" } },
-        { appearance: "filled", shape: "pill", tone: "danger", css: { background: "bg.errorSubtle" } },
         {
             appearance: "bare",
             tone: "info",
@@ -82,7 +157,7 @@ const badge = cva({
         {
             appearance: "bare",
             tone: "warning",
-            css: { color: "fg.muted", "& svg": { color: "accent.yellow" } },
+            css: { color: "fg.muted", "& svg": { color: "accent.yellowIcon" } },
         },
         {
             appearance: "bare",
@@ -100,8 +175,52 @@ export function Badge({ tone = "neutral", shape = "pill", appearance = "filled",
             ...props,
             className: cx(badge({ tone, shape, appearance }), className),
             "data-ciridae-ui": "",
-            "data-edge": shape === "pill" && appearance === "filled" ? "glass" : undefined,
+            "data-edge": shape === "pill" && appearance !== "bare" ? "gradient" : undefined,
             children: (_jsxs(_Fragment, { children: [icon, children] })),
         },
     });
 }
+/*
+ * The glyphs the kit draws itself, in a 14px box (12px for the progress step's check and stop),
+ * in the color of the badge's or field's label.
+ */
+const glyph = css({ flexShrink: "0", width: "1em", height: "1em", fontSize: "icon.small" });
+const smallGlyph = css({ flexShrink: "0", width: "1em", height: "1em", fontSize: "icon.compact" });
+/** A badge's drawn glyph: a lifecycle position, a contested verdict, an unchanged outcome. */
+export function BadgeGlyph({ kind, className, ...props }) {
+    const small = kind === "check" || kind === "stop";
+    return (_jsxs("svg", { "aria-hidden": "true", viewBox: small ? "0 0 12 12" : "0 0 14 14", fill: "none", ...props, className: cx(small ? smallGlyph : glyph, className), children: [kind === "notReached" && (_jsx("circle", { cx: "7", cy: "7", r: "3.875", stroke: "currentColor", strokeWidth: "1.25", strokeDasharray: "2 1.6" })), kind === "hereNow" && _jsx("circle", { cx: "7", cy: "7", r: "3", fill: "currentColor" }), kind === "terminal" && (_jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1.5", fill: "currentColor" })), kind === "contested" && (_jsx("circle", { cx: "7", cy: "7", r: "3.875", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.25" })), kind === "noChange" && (_jsx("circle", { cx: "7", cy: "7", r: "3.375", stroke: "currentColor", strokeWidth: "1.25" })), kind === "check" && (_jsx("path", { d: "M2.4 6.2 4.6 8.5 9.7 3.4", stroke: "currentColor", strokeWidth: "0.857", strokeLinecap: "round", strokeLinejoin: "round" })), kind === "stop" && (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "6", cy: "6", r: "3.95", stroke: "currentColor", strokeWidth: "0.857" }), _jsx("path", { d: "M4.1 6h3.8", stroke: "currentColor", strokeWidth: "0.857", strokeLinecap: "round" })] }))] }));
+}
+const ASSURANCE_BARS = [
+    { x: 2, y: 7.5, height: 5 },
+    { x: 5.8, y: 4.5, height: 8 },
+    { x: 9.5, y: 1.5, height: 11 },
+];
+/** A three-bar meter, lit to the level, so a value's assurance reads without color. */
+export function AssuranceGlyph({ level, className, ...props }) {
+    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "currentColor", ...props, className: cx(glyph, className), children: ASSURANCE_BARS.map((bar, index) => (_jsx("rect", { x: bar.x, y: bar.y, width: "2.5", height: bar.height, rx: "0.75", opacity: index < level ? 1 : 0.28 }, bar.x))) }));
+}
+const LIFECYCLE_TONES = {
+    notReached: "neutral",
+    hereNow: "info",
+    done: "success",
+    blocked: "warning",
+    agentWaiting: "info",
+    expired: "neutral",
+    terminal: "neutral",
+    awaiting: "warning",
+};
+const LIFECYCLE_GLYPHS = {
+    notReached: _jsx(BadgeGlyph, { kind: "notReached" }),
+    hereNow: _jsx(BadgeGlyph, { kind: "hereNow" }),
+    done: _jsx(CheckIcon, { weight: "bold" }),
+    blocked: _jsx(StopIcon, { weight: "bold" }),
+    agentWaiting: _jsx(SparkleIcon, { weight: "fill" }),
+    expired: _jsx(ClockIcon, { weight: "bold" }),
+    terminal: _jsx(BadgeGlyph, { kind: "terminal" }),
+    awaiting: _jsx(HourglassIcon, { weight: "bold" }),
+};
+/** A lifecycle pill: the state picks the glyph and the hue; the words are the stage's name. */
+export function LifecycleBadge({ state, ...props }) {
+    return _jsx(Badge, { ...props, tone: LIFECYCLE_TONES[state], icon: LIFECYCLE_GLYPHS[state] });
+}

package/dist/components/bulk-action-bar.js

@@ -14,13 +14,13 @@ const bar = css({
     paddingBlock: "panel.compact",
     paddingInlineStart: "panel.comfortable",
     paddingInlineEnd: "panel.compact",
-    border: "1px solid token(colors.border.panel)",
+    border: "1px solid token(colors.border.divider)",
     borderRadius: "action",
-    background: "bg.hover",
+    background: "token(gradients.card)",
     fontSize: "body",
     fontWeight: "medium",
     letterSpacing: "compact",
-    _light: { background: "bg.card" },
+    lineHeight: "tight",
 });
 const leading = css({
     display: "flex",

package/dist/components/button.d.ts

@@ -13,7 +13,12 @@ export type ButtonProps = Omit<BaseButtonProps, "className"> & {
     /** The hotkey that does what the button does, shown after its label; the host binds it. */
     shortcut?: Hotkey;
 };
-export declare function Button({ className, variant, size, fullWidth, loading, icon, shortcut, children, disabled, ...props }: ButtonProps): import("react").JSX.Element;
+/**
+ * The size a `Button` takes where it does not set its own, so the container decides: a dialog's
+ * footer holds the default 38px buttons, where everywhere else the small one is the everyday.
+ */
+export declare const ButtonSizeContext: import("react").Context<NonNullable<"medium" | "large" | "small" | undefined>>;
+export declare function Button({ className, variant, size: ownSize, fullWidth, loading, icon, shortcut, children, disabled, ...props }: ButtonProps): import("react").JSX.Element;
 export type DataButtonState = "idle" | "pending" | "error" | "success";
 export type DataButtonProps = Omit<ButtonProps, "children" | "icon" | "loading"> & {
     state: DataButtonState;
@@ -25,7 +30,7 @@ export type DataButtonProps = Omit<ButtonProps, "children" | "icon" | "loading">
 };
 /** Async action button with consistent pending, retry, and completion feedback. */
 export declare function DataButton({ state, idleLabel, pendingLabel, errorLabel, successLabel, variant, icon, disabled, ...props }: DataButtonProps): import("react").JSX.Element;
-type IconButtonSize = "compact" | "small" | "medium" | "large";
+type IconButtonSize = "compact" | "send" | "small" | "medium" | "large";
 /**
  * The size an `IconButton` takes where it does not set its own, so the container decides: the
  * sidebar rail's icons are large, and the same icon shown in the phone header matches the header's
@@ -37,6 +42,8 @@ export type IconButtonProps = Omit<BaseButtonProps, "className" | "aria-label">
     "aria-label": string;
     size?: IconButtonSize;
     variant?: "raised" | "ghost" | "primary";
+    /** `square` is the 8-round square that leads a page title; buttons are otherwise round. */
+    shape?: "round" | "square";
     /**
      * `true` marks the button with a dot; a number shows that count, nothing at zero, and joins the
      * button's name so assistive tech hears it too.
@@ -48,5 +55,5 @@ export type IconButtonProps = Omit<BaseButtonProps, "className" | "aria-label">
      */
     shortcut?: Hotkey;
 };
-export declare function IconButton({ className, size, variant, badge, shortcut, children, "aria-label": label, ...props }: IconButtonProps): import("react").JSX.Element;
+export declare function IconButton({ className, size, variant, shape, badge, shortcut, children, "aria-label": label, ...props }: IconButtonProps): import("react").JSX.Element;
 export {};

package/dist/components/button.js

@@ -3,10 +3,14 @@ import { Button as BaseButton } from "@base-ui/react/button";
 import { CheckCircleIcon, WarningCircleIcon } from "@phosphor-icons/react";
 import { createContext, useContext } from "react";
 import { css, cva, cx } from "#primitives/css";
+import { faceEdge } from "./gradient-edge.js";
 import { formatForDisplay } from "./hotkeys.js";
 import { icon as iconStyle, Spinner } from "./icon.js";
 import { ShortcutHint } from "./keycap.js";
 import { useCiridaeLocale } from "./locale.js";
+/* The hover wash laid over a gradient face, as the design's state layer sits over it. */
+const raisedHoverLight = "linear-gradient(token(colors.bg.hover), token(colors.bg.hover)), token(gradients.raised)";
+const tintedHover = "linear-gradient(token(colors.bg.hover), token(colors.bg.hover)), token(gradients.tinted)";
 const action = cva({
     base: {
         display: "inline-flex",
@@ -14,8 +18,10 @@ const action = cva({
         alignItems: "center",
         justifyContent: "center",
         gap: "control.iconGap",
-        border: "1px solid",
-        borderRadius: "action",
+        // The design lays a button's edge over its padding rather than inside it, so no border.
+        border: "0",
+        // Buttons are pills at both heights.
+        borderRadius: "pill",
         height: "control.default",
         paddingInline: "control.inline",
         fontFamily: "sans",
@@ -36,67 +42,67 @@ const action = cva({
     },
     variants: {
         variant: {
-            // Round 2 buttons cast no shadow: each face is told apart by its fill and its edge alone.
+            /*
+             * Buttons cast no shadow: each face is told apart by its gradient fill and its gradient
+             * edge alone. Light has no hover on the primary face; dark lets a little of the surface
+             * through. A raised face takes the hover wash over its gradient in light, and thins in dark.
+             */
             primary: {
-                background: "bg.primary",
+                background: "token(gradients.primary)",
                 color: "bg.canvas",
                 _light: { color: "fg.onAccent" },
-                borderColor: "transparent",
-                _hover: { background: "bg.primaryHover" },
+                _hover: {
+                    background: "bg.primaryHover",
+                    _light: { background: "token(gradients.primary)" },
+                },
                 _active: { translate: "0 1px" },
             },
             secondary: {
-                background: "bg.raised",
+                background: "token(gradients.raised)",
                 color: "fg.primary",
-                borderColor: "transparent",
-                _hover: { background: "bg.raisedHover" },
+                _hover: { background: "bg.raisedHover", _light: { background: raisedHoverLight } },
                 _active: { translate: "0 1px" },
             },
             subtle: {
                 background: "bg.fill",
                 color: "fg.muted",
-                borderColor: "transparent",
                 _hover: { color: "fg.primary" },
                 _active: { translate: "0 1px" },
             },
-            // White in dark, muted in light: the one face whose text follows the theme differently.
+            // White in dark, the secondary grey in light: the one face whose text follows the theme
+            // differently.
             ghost: {
                 background: "transparent",
                 color: "fg.primary",
-                _light: { color: "fg.muted" },
-                borderColor: "transparent",
+                _light: { color: "fg.secondary" },
                 _hover: { color: "fg.primary", background: "bg.hover" },
             },
             // Warm glass with an amber edge and the warm accent for its text.
             tinted: {
-                background: "bg.tinted",
+                background: "token(gradients.tinted)",
                 color: "accent.yellow",
                 _light: { color: "accent.bronze" },
-                borderColor: "transparent",
-                _hover: { background: "bg.raisedHover" },
+                _hover: { background: tintedHover },
                 _active: { translate: "0 1px" },
             },
             // The secondary face with red text, for a destructive action that asks for confirmation:
             // it names the risk without being the loudest thing on the page. The confirmation's own
             // button is `danger`.
             secondaryDanger: {
-                background: "bg.raised",
+                background: "token(gradients.raised)",
                 color: "accent.red",
-                borderColor: "transparent",
-                _hover: { background: "bg.raisedHover" },
+                _hover: { background: "bg.raisedHover", _light: { background: raisedHoverLight } },
                 _active: { translate: "0 1px" },
             },
             danger: {
-                background: "bg.danger",
+                background: "token(gradients.danger)",
                 color: "fg.onAccent",
-                borderColor: "transparent",
                 _hover: { filter: "brightness(1.05)" },
                 _active: { translate: "0 1px" },
             },
             success: {
                 background: "accent.green",
                 color: "bg.canvas",
-                borderColor: "transparent",
                 _hover: { filter: "brightness(1.05)" },
                 _active: { translate: "0 1px" },
             },
@@ -104,8 +110,6 @@ const action = cva({
             link: {
                 background: "transparent",
                 color: "fg.primary",
-                borderColor: "transparent",
-                borderWidth: "0",
                 fontFamily: "inherit",
                 fontWeight: "inherit",
                 letterSpacing: "inherit",
@@ -134,22 +138,30 @@ const action = cva({
     // Small is the everyday button; medium and large are for a page's one main action.
     defaultVariants: { variant: "primary", size: "small" },
 });
-// The glass faces draw a hairline, which is their outline; a filled face draws none.
+// Each gradient face draws its own gradient edge; the flat faces draw a hairline or none.
 const buttonEdges = {
-    primary: undefined,
-    secondary: "glass",
+    primary: "primary",
+    secondary: "raised",
     subtle: "glass",
     ghost: undefined,
-    tinted: undefined,
-    secondaryDanger: "glass",
-    danger: undefined,
+    tinted: "tinted",
+    secondaryDanger: "raised",
+    danger: "danger",
     success: undefined,
     link: undefined,
 };
 // In the button's own color, quieter than its label.
 const buttonHint = css({ color: "inherit", opacity: "0.6" });
-export function Button({ className, variant = "primary", size = "small", fullWidth, loading, icon, shortcut, children, disabled, ...props }) {
-    return (_jsxs(BaseButton, { ...props, disabled: disabled || loading, "aria-busy": loading || undefined, className: cx(action({ variant, size, fullWidth }), className), "data-ciridae-ui": "", "data-edge": buttonEdges[variant], children: [loading ? _jsx(Spinner, { "aria-hidden": "true" }) : icon, children, shortcut && _jsx(ShortcutHint, { hotkey: shortcut, className: buttonHint })] }));
+/**
+ * The size a `Button` takes where it does not set its own, so the container decides: a dialog's
+ * footer holds the default 38px buttons, where everywhere else the small one is the everyday.
+ */
+export const ButtonSizeContext = createContext("small");
+export function Button({ className, variant = "primary", size: ownSize, fullWidth, loading, icon, shortcut, children, disabled, ...props }) {
+    const containerSize = useContext(ButtonSizeContext);
+    const size = ownSize ?? containerSize;
+    const edge = faceEdge(buttonEdges[variant]);
+    return (_jsxs(BaseButton, { ...props, disabled: disabled || loading, "aria-busy": loading || undefined, className: cx(action({ variant, size, fullWidth }), edge.className, className), "data-ciridae-ui": "", "data-edge": edge["data-edge"], children: [loading ? _jsx(Spinner, { "aria-hidden": "true" }) : icon, children, shortcut && _jsx(ShortcutHint, { hotkey: shortcut, className: buttonHint })] }));
 }
 /** Async action button with consistent pending, retry, and completion feedback. */
 export function DataButton({ state, idleLabel, pendingLabel, errorLabel, successLabel, variant = "primary", icon, disabled, ...props }) {
@@ -183,19 +195,22 @@ const round = cva({
         alignItems: "center",
         justifyContent: "center",
         padding: "none",
+        // The edge's own 1px, as the design counts it; the bare button has neither.
         border: "1px solid transparent",
         borderRadius: "pill",
         color: "fg.muted",
-        background: "bg.raised",
+        background: "token(gradients.raised)",
         cursor: "pointer",
         flexShrink: "0",
         transitionProperty: "translate, background, color",
         transitionDuration: "fast",
-        _hover: { color: "fg.primary", background: "bg.raisedHover" },
+        // Hover keeps the face in light and thins it in dark; the icon takes the primary ink.
+        _hover: { color: "fg.primary", background: "token(gradients.raisedHover)" },
         _active: { translate: "0 1px" },
         _focusVisible: { focusRing: "outer" },
+        // A round face fades further than other controls when it cannot be pressed.
         "&:disabled, &[data-disabled]": {
-            opacity: "disabled",
+            opacity: "disabledRound",
             cursor: "not-allowed",
             translate: "none",
         },
@@ -203,27 +218,44 @@ const round = cva({
     variants: {
         variant: {
             raised: {},
+            // The bare icon button: no face until hovered, and disabled it fades as other controls do.
             ghost: {
+                border: "0",
                 background: "transparent",
-                _hover: { background: "bg.hover" },
+                _hover: { background: "bg.hover", _light: { background: "bg.hover" } },
                 _active: { translate: "none" },
+                "&:disabled, &[data-disabled]": { opacity: "disabled" },
             },
             // The primary face as a round button: a composer's send.
             primary: {
-                background: "bg.primary",
+                background: "token(gradients.primary)",
                 color: "bg.canvas",
                 _light: { color: "fg.onAccent" },
-                _hover: { color: "bg.canvas", background: "bg.primaryHover" },
+                _hover: {
+                    color: "bg.canvas",
+                    background: "bg.primaryHover",
+                    _light: { color: "fg.onAccent", background: "token(gradients.primary)" },
+                },
             },
         },
+        // 24 is the bare button's in a column or group header; 26 the composer's send on the
+        // primary face; the other round faces are 28, 34 and 38.
         size: {
             compact: { width: "control.shortcut", height: "control.shortcut" },
-            small: { width: "control.small", height: "control.small" },
-            medium: { width: "control.compact", height: "control.compact" },
+            send: { width: "control.send", height: "control.send" },
+            small: { width: "control.roundSmall", height: "control.roundSmall" },
+            medium: { width: "control.round", height: "control.round" },
             large: { width: "control.default", height: "control.default" },
         },
+        // A page's leading icon button is a rounded square rather than a circle.
+        shape: { round: {}, square: { borderRadius: "action" } },
     },
-    defaultVariants: { size: "medium", variant: "raised" },
+    compoundVariants: [
+        // Bare, the button is a rounded square too: 6 round at 24 and 8 round at 28.
+        { variant: "ghost", size: "compact", css: { borderRadius: "keycap" } },
+        { variant: "ghost", size: "small", css: { borderRadius: "action" } },
+    ],
+    defaultVariants: { size: "medium", variant: "raised", shape: "round" },
 });
 const badgeDot = css({
     position: "absolute",
@@ -263,10 +295,11 @@ const badgeCount = css({
  * small buttons.
  */
 export const IconButtonSizeContext = createContext("medium");
-const iconButtonEdges = { raised: "glass", ghost: undefined, primary: undefined };
-export function IconButton({ className, size, variant = "raised", badge, shortcut, children, "aria-label": label, ...props }) {
+const iconButtonEdges = { raised: "raised", ghost: undefined, primary: "primary" };
+export function IconButton({ className, size, variant = "raised", shape = "round", badge, shortcut, children, "aria-label": label, ...props }) {
     const containerSize = useContext(IconButtonSizeContext);
     const { labels } = useCiridaeLocale();
     const count = typeof badge === "number" && badge > 0 ? badge : 0;
-    return (_jsxs(BaseButton, { ...props, "aria-label": count > 0 ? labels.common.withCount(label, count) : label, "aria-keyshortcuts": shortcut && formatForDisplay(shortcut, { useSymbols: false }), className: cx(round({ size: size ?? containerSize, variant }), className), "data-ciridae-ui": "", "data-edge": iconButtonEdges[variant], children: [children, badge === true && _jsx("span", { className: badgeDot, "aria-hidden": "true" }), count > 0 && (_jsx("span", { className: badgeCount, "aria-hidden": "true", children: count > 99 ? "99+" : count }))] }));
+    const edge = faceEdge(iconButtonEdges[variant]);
+    return (_jsxs(BaseButton, { ...props, "aria-label": count > 0 ? labels.common.withCount(label, count) : label, "aria-keyshortcuts": shortcut && formatForDisplay(shortcut, { useSymbols: false }), className: cx(round({ size: size ?? containerSize, variant, shape }), edge.className, className), "data-ciridae-ui": "", "data-edge": edge["data-edge"], children: [children, badge === true && _jsx("span", { className: badgeDot, "aria-hidden": "true" }), count > 0 && (_jsx("span", { className: badgeCount, "aria-hidden": "true", children: count > 99 ? "99+" : count }))] }));
 }

package/dist/components/calendar.js

@@ -5,11 +5,39 @@ import { css, cx } from "#primitives/css";
 import { IconButton } from "./button.js";
 import { directional, icon } from "./icon.js";
 import { useCiridaeLocale } from "./locale.js";
+/*
+ * The month alone, no face of its own: it sits on the popover or picker that opens it. Seven 32px
+ * day columns inside an 8px inset, which with the glass sheet's 4px makes the design's 12px.
+ */
+const calendar = css({
+    display: "grid",
+    gap: "layout.controlGap",
+    width: "calc(7 * token(sizes.control.compact) + 2 * token(spacing.panel.compact))",
+    padding: "panel.compact",
+});
+const header = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    fontSize: "caption",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+});
 const grid = css({
     display: "grid",
     gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
     justifyItems: "center",
-    gap: "layout.tightGap",
+    rowGap: "control.trackInset",
+});
+// The weekdays sit as far above the days as the month sits above them.
+const weekDay = css({
+    paddingBlock: "layout.tightGap",
+    marginBottom: "control.iconGap",
+    textAlign: "center",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "tight",
 });
 const row = css({
     display: "grid",
@@ -18,20 +46,29 @@ const row = css({
     width: "100%",
 });
 const previousMonthIcon = css({ transform: "rotate(180deg)" });
+// Today wears a hairline ring; the chosen day the primary button's face.
 const day = css({
     width: "control.compact",
     height: "control.compact",
-    border: "0",
+    border: "1px solid transparent",
     borderRadius: "round",
     background: "transparent",
     color: "fg.primary",
+    fontSize: "caption",
+    fontWeight: "medium",
     cursor: "pointer",
     transitionProperty: "background, color",
     transitionDuration: "fast",
+    "&[aria-current=date]": { borderColor: "border.control" },
     "&:hover:not(:disabled):not([aria-selected=true])": {
-        background: "bg.fill",
+        background: "bg.hover",
+    },
+    "&[aria-selected=true]": {
+        borderColor: "transparent",
+        background: "token(gradients.primary)",
+        color: "bg.canvas",
+        _light: { color: "fg.onAccent" },
     },
-    "&[aria-selected=true]": { background: "fg.primary", color: "bg.canvas" },
     _disabled: { color: "fg.muted", opacity: "disabled", cursor: "default" },
     _focusVisible: { focusRing: "outer" },
 });
@@ -135,20 +172,10 @@ export function Calendar({ month, selected, onMonthChange, onSelect, locale: own
     });
     const weekDayFormatter = new Intl.DateTimeFormat(locale, { weekday: "narrow" });
     const fullWeekDayFormatter = new Intl.DateTimeFormat(locale, { weekday: "long" });
-    return (_jsxs("section", { className: css({
-            width: "calendar.width",
-            padding: "panel.compact",
-            border: "1px solid token(colors.border.control)",
-            borderRadius: "inset",
-            background: "bg.card",
-        }), "data-ciridae-ui": "", children: [_jsxs("header", { className: css({
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    marginBottom: "panel.compact",
-                }), children: [_jsx(IconButton, { "aria-label": labels.previousMonth, size: "compact", type: "button", onClick: () => onMonthChange(new Date(month.getFullYear(), month.getMonth() - 1, 1)), children: _jsx(ArrowRightIcon, { className: cx(icon(), directional, previousMonthIcon) }) }), _jsx("strong", { id: monthLabelId, children: monthFormatter.format(month) }), _jsx(IconButton, { "aria-label": labels.nextMonth, size: "compact", type: "button", onClick: () => onMonthChange(new Date(month.getFullYear(), month.getMonth() + 1, 1)), children: _jsx(ArrowRightIcon, { className: cx(icon(), directional) }) })] }), _jsxs("div", { className: grid, role: "grid", "aria-labelledby": monthLabelId, children: [_jsx("div", { className: row, role: "row", children: weekDays.map((date) => (_jsx("span", { "aria-label": fullWeekDayFormatter.format(date), className: css({ textAlign: "center", color: "fg.muted", fontSize: "caption" }), role: "columnheader", children: weekDayFormatter.format(date) }, date.getDay()))) }), Array.from({ length: 6 }, (_, weekIndex) => (_jsx("div", { className: row, role: "row", children: days.slice(weekIndex * 7, weekIndex * 7 + 7).map((date) => {
+    const today = new Date();
+    return (_jsxs("section", { className: calendar, "data-ciridae-ui": "", children: [_jsxs("header", { className: header, children: [_jsx(IconButton, { "aria-label": labels.previousMonth, size: "compact", variant: "ghost", type: "button", onClick: () => onMonthChange(new Date(month.getFullYear(), month.getMonth() - 1, 1)), children: _jsx(ArrowRightIcon, { className: cx(icon({ size: "small" }), directional, previousMonthIcon) }) }), _jsx("span", { id: monthLabelId, children: monthFormatter.format(month) }), _jsx(IconButton, { "aria-label": labels.nextMonth, size: "compact", variant: "ghost", type: "button", onClick: () => onMonthChange(new Date(month.getFullYear(), month.getMonth() + 1, 1)), children: _jsx(ArrowRightIcon, { className: cx(icon({ size: "small" }), directional) }) })] }), _jsxs("div", { className: grid, role: "grid", "aria-labelledby": monthLabelId, children: [_jsx("div", { className: row, role: "row", children: weekDays.map((date) => (_jsx("span", { "aria-label": fullWeekDayFormatter.format(date), className: weekDay, role: "columnheader", children: weekDayFormatter.format(date) }, date.getDay()))) }), Array.from({ length: 6 }, (_, weekIndex) => (_jsx("div", { className: row, role: "row", children: days.slice(weekIndex * 7, weekIndex * 7 + 7).map((date) => {
                             const inCurrentMonth = isSameMonth(date, currentMonth);
-                            return (_jsx("button", { type: "button", "aria-label": dayFormatter.format(date), "aria-selected": inCurrentMonth && isSameDay(date, selected), className: day, disabled: !inCurrentMonth, onClick: () => onSelect(date), onFocus: () => setFocusedDate(date), onKeyDown: (event) => handleDayKeyDown(event, date), ref: (element) => {
+                            return (_jsx("button", { type: "button", "aria-label": dayFormatter.format(date), "aria-selected": inCurrentMonth && isSameDay(date, selected), "aria-current": isSameDay(date, today) ? "date" : undefined, className: day, disabled: !inCurrentMonth, onClick: () => onSelect(date), onFocus: () => setFocusedDate(date), onKeyDown: (event) => handleDayKeyDown(event, date), ref: (element) => {
                                     if (element)
                                         dayButtons.current.set(dateKey(date), element);
                                     else

package/dist/components/centered-page.js

@@ -10,7 +10,7 @@ const page = css({
     // A phone keeps a thin margin around the card rather than giving its width away.
     padding: "panel.compact",
     "@media(min-width: 640px)": { padding: "page.inline" },
-    background: "bg.canvas",
+    background: "token(gradients.canvas)",
     color: "fg.primary",
 });
 const column = css({
@@ -31,7 +31,7 @@ const headerRow = css({
     paddingInline: "panel.roomy",
 });
 const brandMark = css({ width: "brand.logo", height: "brand.logo", color: "fg.primary" });
-const content = css({ display: "flex", flexDirection: "column", gap: "layout.sectionGap" });
+const content = css({ display: "flex", flexDirection: "column", gap: "layout.centeredCardGap" });
 const titleGroup = css({ display: "grid", gap: "layout.tightGap" });
 const titleText = css({ margin: "none", fontSize: "heading.section", fontWeight: "medium" });
 const descriptionText = css({ margin: "none", color: "fg.muted", fontSize: "caption" });