@ciridae/ui 1.0.3 → 1.0.4

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

@@ -17,7 +17,10 @@ export type SparklineProps = Omit<ComponentProps<"div">, "children"> & {
     strokeWidth?: number;
     endPointSize?: number;
 };
-/** A run of values as a line filling its box; decorative, as the figure beside it says what it shows. */
+/**
+ * A run of values as a line filling its box; decorative, as the figure beside it says what it
+ * shows. Under two values there is no line, and a dashed rule stands in for it.
+ */
 export declare function Sparkline({ values, low: ownLow, high: ownHigh, strokeWidth, endPointSize, className, ...props }: SparklineProps): import("react").JSX.Element;
 export type MetricCardProps = Omit<useRender.ComponentProps<"div">, "children" | "onSelect"> & {
     label: ReactNode;
@@ -30,5 +33,10 @@ export type MetricCardProps = Omit<useRender.ComponentProps<"div">, "children" |
     onSelect?: () => void;
     /** Makes the card a link; a router's link as `render` routes it. */
     href?: string;
+    /**
+     * `card` (the default) frames it on its own; in a row of tiles, `left` rules its leading edge
+     * and `none` leaves it bare.
+     */
+    divider?: "card" | "left" | "none";
 };
-export declare function MetricCard({ label, value, change, sparkline, onSelect, href, render, className, ...props }: MetricCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function MetricCard({ label, value, change, sparkline, onSelect, href, divider, render, className, ...props }: MetricCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/stat-card.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /*
  * Figures for a dashboard. `MetricCard` is one figure: its label, its value, how it changed
  * (`Trend`) and its recent run (`Sparkline`); it can open what it counts. `Sparkline` is a blue
- * line over a flat tinted area that stretches to its box: the stroke keeps its width and the end
- * point is HTML, so neither distorts.
+ * line over an area that fades to its foot, stretched to its box: the stroke keeps its width, and
+ * the area and end point are HTML, so none of them distorts.
  */
 import { useRender } from "@base-ui/react/use-render";
 import { ArrowDownIcon, ArrowRightIcon, ArrowUpIcon } from "@phosphor-icons/react";
-import { css, cx } from "#primitives/css";
+import { css, cva, cx } from "#primitives/css";
 import { icon } from "./icon.js";
 import { cardSurface } from "./panel.js";
 /* A change beside a figure: which way it moved, and separately whether that is good. */
@@ -20,17 +20,28 @@ const trend = css({
     fontWeight: "medium",
     "&[data-tone=good]": { color: "accent.green" },
     "&[data-tone=bad]": { color: "accent.red" },
-    "&[data-tone=neutral]": { color: "fg.muted" },
+    "&[data-tone=neutral]": { color: "fg.label" },
     "& > svg": { flexShrink: "0" },
 });
 const trendText = css({ minWidth: "0", overflow: "hidden", textOverflow: "ellipsis" });
 const TREND_ARROWS = { up: ArrowUpIcon, down: ArrowDownIcon, flat: ArrowRightIcon };
 export function Trend({ direction, tone = "neutral", arrow = true, children }) {
     const Arrow = TREND_ARROWS[direction];
-    return (_jsxs("span", { className: trend, "data-tone": tone, "data-ciridae-ui": "", children: [arrow && _jsx(Arrow, { className: icon({ size: "compact" }), weight: "bold", "aria-hidden": "true" }), _jsx("span", { className: trendText, children: children })] }));
+    return (_jsxs("span", { className: trend, "data-tone": tone, "data-ciridae-ui": "", children: [arrow && _jsx(Arrow, { className: icon({ size: "compact" }), weight: "bold", "aria-hidden": "true" }), _jsx("span", { className: trendText, "data-trend-text": "", children: children })] }));
 }
-/* Sparkline: drawn into a 100x100 box that stretches to its container. */
-const plot = css({ position: "relative", color: "accent.blue" });
+/*
+ * Sparkline: drawn into a 100x100 box that stretches to its plot. The plot fills the box unless
+ * `--sparkline-plot-width` and `--sparkline-plot-height` size it, at the box's foot and start, so
+ * the end point's ring has room above and after the line.
+ */
+const plot = css({ position: "relative", color: "chart.trend" });
+const plotArea = css({
+    position: "absolute",
+    insetInlineStart: "0",
+    bottom: "0",
+    width: "var(--sparkline-plot-width, 100%)",
+    height: "var(--sparkline-plot-height, 100%)",
+});
 const svg = css({
     position: "absolute",
     inset: "0",
@@ -38,16 +49,31 @@ const svg = css({
     height: "100%",
     overflow: "visible",
 });
+// The area under the line, clipped to it, so its gradient runs top to foot whatever the box.
+const area = css({ position: "absolute", inset: "0", background: "token(gradients.chart.area)" });
+// The ring is the tile's face, so the point reads as cut out of the line.
 const endPoint = css({
     position: "absolute",
     borderRadius: "round",
-    background: "accent.blue",
+    background: "chart.trend",
     borderStyle: "solid",
-    borderColor: "bg.card",
+    borderColor: "bg.surface",
     translate: "-50% -50%",
 });
-/** A run of values as a line filling its box; decorative, as the figure beside it says what it shows. */
+// No run to draw: a dashed rule across the middle holds the line's place.
+const noRun = css({
+    position: "absolute",
+    insetInline: "0",
+    top: "50%",
+    borderTop: "2px dashed token(colors.border.divider)",
+});
+/**
+ * A run of values as a line filling its box; decorative, as the figure beside it says what it
+ * shows. Under two values there is no line, and a dashed rule stands in for it.
+ */
 export function Sparkline({ values, low: ownLow, high: ownHigh, strokeWidth = 1.5, endPointSize = 6, className, ...props }) {
+    if (values.length < 2)
+        return (_jsx("div", { "aria-hidden": "true", ...props, className: cx(plot, className), "data-ciridae-ui": "", children: _jsx("span", { className: noRun }) }));
     const lowest = Math.min(...values);
     const high = ownHigh ?? Math.max(...values);
     const low = ownLow ?? lowest - (high - lowest) * 0.4;
@@ -56,31 +82,60 @@ export function Sparkline({ values, low: ownLow, high: ownHigh, strokeWidth = 1.
     const step = 100 / Math.max(values.length - 1, 1);
     const points = tops.map((top, index) => `${index * step},${top}`).join(" ");
     const lastTop = tops[tops.length - 1] ?? 100;
-    return (_jsxs("div", { "aria-hidden": "true", ...props, className: cx(plot, className), "data-ciridae-ui": "", children: [_jsxs("svg", { className: svg, viewBox: "0 0 100 100", preserveAspectRatio: "none", children: [_jsx("polygon", { points: `0,100 ${points} 100,100`, fill: "currentColor", fillOpacity: 0.08 }), _jsx("polyline", { points: points, fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })] }), _jsx("span", { className: endPoint, style: {
-                    insetInlineStart: "100%",
-                    top: `${lastTop}%`,
-                    width: endPointSize,
-                    height: endPointSize,
-                    borderWidth: strokeWidth,
-                } })] }));
+    const areaOutline = tops.map((top, index) => `${index * step}% ${top}%`).join(", ");
+    return (_jsx("div", { "aria-hidden": "true", ...props, className: cx(plot, className), "data-ciridae-ui": "", children: _jsxs("span", { className: plotArea, children: [_jsx("span", { className: area, style: { clipPath: `polygon(0% 100%, ${areaOutline}, 100% 100%)` } }), _jsx("svg", { className: svg, viewBox: "0 0 100 100", preserveAspectRatio: "none", children: _jsx("polyline", { points: points, fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) }), _jsx("span", { className: endPoint, style: {
+                        insetInlineStart: "100%",
+                        top: `${lastTop}%`,
+                        width: endPointSize,
+                        height: endPointSize,
+                        borderWidth: strokeWidth,
+                    } })] }) }));
 }
-/* Metric card: a figure with its change, and its run beside it. */
-const metricCard = css(cardSurface, {
-    display: "flex",
-    gap: "layout.contentGap",
-    padding: "panel.comfortable",
-    color: "fg.primary",
-    font: "inherit",
-    textAlign: "start",
-    textDecoration: "none",
-    lineHeight: "tight",
-    "&:is(button, a)": { cursor: "pointer", _hover: { borderColor: "border.glass" } },
-    _focusVisible: { focusRing: "outer" },
-    "& > [data-sparkline]": {
-        width: "84px",
-        height: "25px",
-        flexShrink: "0",
-        alignSelf: "flex-end",
+/*
+ * Metric card: a figure with its change, and its run beside it. A tile in a row of them drops the
+ * card for a rule on its leading edge, or for nothing, and its label steps back to the label grey.
+ * The change's words are the label grey too, the kit's Stat tile: its arrow carries the tone.
+ * The run sits in the kit's 88x32 chart slot, its line in the slot's lower 84x25.
+ */
+const metricCard = cva({
+    base: {
+        display: "flex",
+        gap: "layout.contentGap",
+        padding: "panel.comfortable",
+        color: "fg.primary",
+        font: "inherit",
+        textAlign: "start",
+        textDecoration: "none",
+        lineHeight: "tight",
+        "&:is(button, a)": { cursor: "pointer" },
+        _focusVisible: { focusRing: "outer" },
+        "& [data-trend-text]": { color: "fg.label" },
+        "& > [data-sparkline]": {
+            "--sparkline-plot-width": "token(sizes.sparkline.plotWidth)",
+            "--sparkline-plot-height": "token(sizes.sparkline.plotHeight)",
+            width: "sparkline.width",
+            height: "sparkline.height",
+            flexShrink: "0",
+            alignSelf: "flex-end",
+        },
+    },
+    variants: {
+        divider: {
+            card: { ...cardSurface, "&:is(button, a)": { _hover: { borderColor: "border.glass" } } },
+            left: {
+                minWidth: "0",
+                border: "0",
+                borderInlineStart: "1px solid token(colors.border.panel)",
+                background: "transparent",
+                "& [data-metric-label]": { color: "fg.label" },
+            },
+            none: {
+                minWidth: "0",
+                border: "0",
+                background: "transparent",
+                "& [data-metric-label]": { color: "fg.label" },
+            },
+        },
     },
 });
 const metricCopy = css({
@@ -97,7 +152,7 @@ const metricValue = css({
     lineHeight: "tight",
     fontVariantNumeric: "tabular-nums",
 });
-export function MetricCard({ label, value, change, sparkline, onSelect, href, render, className, ...props }) {
+export function MetricCard({ label, value, change, sparkline, onSelect, href, divider = "card", render, className, ...props }) {
     return useRender({
         defaultTagName: href !== undefined ? "a" : onSelect !== undefined ? "button" : "div",
         render,
@@ -109,9 +164,9 @@ export function MetricCard({ label, value, change, sparkline, onSelect, href, re
                     : {}),
             ...props,
             onClick: onSelect,
-            className: cx(metricCard, className),
+            className: cx(metricCard({ divider }), className),
             "data-ciridae-ui": "",
-            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: metricCopy, children: [_jsx("span", { className: metricLabel, children: label }), _jsx("span", { className: metricValue, children: value }), change && _jsx(Trend, { ...change })] }), sparkline && _jsx(Sparkline, { values: sparkline, "data-sparkline": "" })] })),
+            children: (_jsxs(_Fragment, { children: [_jsxs("span", { className: metricCopy, children: [_jsx("span", { className: metricLabel, "data-metric-label": "", children: label }), _jsx("span", { className: metricValue, children: value }), change && _jsx(Trend, { ...change })] }), sparkline && _jsx(Sparkline, { values: sparkline, "data-sparkline": "" })] })),
         },
     });
 }

package/dist/components/status-banner.js

@@ -70,7 +70,7 @@ const bannerIcon = cva({
             neutral: { color: "fg.muted" },
             info: { color: "accent.blue" },
             success: { color: "accent.green" },
-            warning: { color: "accent.yellow" },
+            warning: { color: "accent.yellowIcon" },
             danger: { color: "accent.red" },
         },
     },

package/dist/components/tabs.js

@@ -22,14 +22,15 @@ const list = css({
     overflowX: "auto",
     scrollbarWidth: "none",
 });
-/** Finalization "Menu Tabs": tabs sit inside a bordered pill with a hairline inset. */
+/** Finalization "View tabs": tabs sit inside a grey pill well with a hairline inset. */
 const containedList = css({
     width: "max-content",
     padding: "control.trackInset",
     border: "1px solid token(colors.border.control)",
     borderRadius: "pill",
-    background: "bg.control",
-    gap: "control.trackInset",
+    background: "bg.field",
+    // Raised over the base list's own gap, as the text list's is.
+    "&[data-variant=contained]": { gap: "control.trackInset" },
 });
 /* Text tabs: words only, the open one in the primary text, for a tray's or a sheet's filters. */
 const textList = css({ "&[data-variant=text]": { gap: "layout.contentGap" } });
@@ -48,8 +49,9 @@ const tab = css({
     alignItems: "center",
     justifyContent: "center",
     gap: "control.iconGap",
-    height: "control.small",
+    height: "control.restingTab",
     paddingInline: "control.tabInline",
+    // The open tab's edge's own 1px, kept at rest too so a tab keeps its width as it opens.
     border: "1px solid transparent",
     borderRadius: "pill",
     background: "transparent",
@@ -62,19 +64,26 @@ const tab = css({
     cursor: "pointer",
     flexShrink: "0",
     "&[data-icon-tone=bronze] svg": { color: "accent.bronze" },
-    _before: { display: "none" },
+    // The open tab is raised on the secondary button's face, with its gradient edge and soft shadow.
+    _before: { display: "none", background: "token(gradients.border.raised)" },
     _hover: {
-        background: "bg.hover",
+        background: "bg.controlHover",
         color: "fg.primary",
         "& svg": { color: "inherit" },
-        _before: { display: "block" },
     },
     "&[data-active]": {
-        background: "bg.selected",
+        background: "token(gradients.raised)",
+        boxShadow: "soft",
         color: "fg.primary",
         "& svg": { color: "inherit" },
         _before: { display: "block" },
     },
+    // On a face, the words read in the primary ink in light, where only the open tab is raised, and
+    // the open tab stands 2px taller than the rest.
+    "[data-variant=plain] > &, [data-variant=contained] > &": {
+        _light: { color: "fg.primary" },
+        "&[data-active]": { height: "control.small", _phone: { height: "control.compact" } },
+    },
     // Words only: no face, no inset, and focus underlines the word rather than boxing it.
     "[data-variant=text] > &": {
         height: "auto",
@@ -83,8 +92,8 @@ const tab = css({
         border: "0",
         background: "transparent",
         _hover: { background: "transparent" },
-        "&[data-active]": { background: "transparent" },
-        // No glass edge either: the open word is the only mark.
+        "&[data-active]": { background: "transparent", boxShadow: "none" },
+        // No edge either: the open word is the only mark.
         "&::before, &:hover::before, &[data-active]::before": { display: "none" },
         _focusVisible: {
             boxShadow: "none",
@@ -103,7 +112,11 @@ const tab = css({
         marginBottom: "-1px",
         background: "transparent",
         _hover: { background: "transparent" },
-        "&[data-active]": { background: "transparent", borderBottomColor: "fg.primary" },
+        "&[data-active]": {
+            background: "transparent",
+            boxShadow: "none",
+            borderBottomColor: "fg.primary",
+        },
         "&::before, &:hover::before, &[data-active]::before": { display: "none" },
         _phone: { height: "control.search", paddingInline: "none" },
     },
@@ -190,7 +203,7 @@ export function TabsList({ className, variant = "plain", overflow: ownOverflow,
     const overflow = ownOverflow ?? (inBar ? "menu" : "scroll");
     const { labels } = useCiridaeLocale();
     const { listRef, moreRef, overflowed, activeHidden, activate } = useOverflowedTabs(overflow === "menu", children);
-    return (_jsxs(BaseTabs.List, { ...props, ref: listRef, className: cx(list, variant === "contained" && containedList, variant === "text" && textList, variant === "underline" && underlineList, className), "data-ciridae-ui": "", "data-variant": variant, children: [children, overflow === "menu" && overflowed.length > 0 && (_jsx(Menu, { align: "end", trigger: _jsx("button", { type: "button", ref: moreRef, className: tab, "aria-label": labels.common.moreTabs, "data-ciridae-ui": "", "data-edge": "glass", "data-active": activeHidden || undefined, children: _jsx(DotsThreeIcon, { className: icon({ size: "small" }), weight: "bold" }) }), items: overflowed.map((item) => ({
+    return (_jsxs(BaseTabs.List, { ...props, ref: listRef, className: cx(list, variant === "contained" && containedList, variant === "text" && textList, variant === "underline" && underlineList, className), "data-ciridae-ui": "", "data-variant": variant, children: [children, overflow === "menu" && overflowed.length > 0 && (_jsx(Menu, { align: "end", trigger: _jsx("button", { type: "button", ref: moreRef, className: tab, "aria-label": labels.common.moreTabs, "data-ciridae-ui": "", "data-edge": "gradient", "data-active": activeHidden || undefined, children: _jsx(DotsThreeIcon, { className: icon({ size: "small" }), weight: "bold" }) }), items: overflowed.map((item) => ({
                     label: item.label,
                     meta: item.count,
                     onSelect: () => activate(item.index),
@@ -198,7 +211,7 @@ export function TabsList({ className, variant = "plain", overflow: ownOverflow,
 }
 export function TabsTab({ className, iconTone, href, render, count: tabCount, children, ...props }) {
     const link = href !== undefined || render !== undefined;
-    return (_jsxs(BaseTabs.Tab, { ...props, render: render ?? (href !== undefined ? _jsx("a", { href: href }) : undefined), nativeButton: link ? false : props.nativeButton, className: cx(tab, className), "data-ciridae-ui": "", "data-edge": "glass", "data-icon-tone": iconTone, children: [children, tabCount !== undefined && tabCount !== null && (_jsx("span", { className: count, "data-tab-count": "", children: tabCount }))] }));
+    return (_jsxs(BaseTabs.Tab, { ...props, render: render ?? (href !== undefined ? _jsx("a", { href: href }) : undefined), nativeButton: link ? false : props.nativeButton, className: cx(tab, className), "data-ciridae-ui": "", "data-edge": "gradient", "data-icon-tone": iconTone, children: [children, tabCount !== undefined && tabCount !== null && (_jsx("span", { className: count, "data-tab-count": "", children: tabCount }))] }));
 }
 /*
  * A page's tabs share one row with the open section's controls: tabs that do not fit go into the

package/dist/components/theme-toggle.d.ts

@@ -0,0 +1,4 @@
+/** Sets the color theme the `ThemeProvider` keeps: light, dark, or the operating system's. */
+export declare function ThemeToggle({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/theme-toggle.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircleHalfIcon, MoonIcon, SunIcon } from "@phosphor-icons/react";
+import { css, cx } from "#primitives/css";
+import { useColorTheme } from "./color-theme.js";
+import { faceEdge } from "./gradient-edge.js";
+import { icon } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+/*
+ * Light, dark or the system's theme, as three icon segments in a pale track: the chosen one is
+ * raised on the secondary button's face, its icon in the primary ink, the others a step quieter.
+ */
+const track = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.trackInset",
+    padding: "control.trackInset",
+    // The design lays the track's edge over its inset, and rounds it to its options' corners.
+    border: "0",
+    borderRadius: "calc(token(radii.inset) + token(spacing.control.trackInset))",
+    background: "token(gradients.panel)",
+});
+const option = css({
+    display: "inline-grid",
+    placeItems: "center",
+    width: "control.small",
+    height: "calc(token(sizes.control.small) - 2 * token(spacing.control.trackInset))",
+    padding: "none",
+    border: "0",
+    borderRadius: "inset",
+    background: "transparent",
+    color: "fg.secondary",
+    cursor: "pointer",
+    transitionProperty: "background, color",
+    transitionDuration: "fast",
+    _hover: { color: "fg.primary" },
+    _focusVisible: { focusRing: "outer" },
+    _before: { display: "none", background: "token(gradients.border.raised)" },
+    "&[aria-pressed=true]": {
+        background: "token(gradients.raised)",
+        color: "fg.primary",
+        _before: { display: "block" },
+    },
+});
+/** Sets the color theme the `ThemeProvider` keeps: light, dark, or the operating system's. */
+export function ThemeToggle({ className }) {
+    const { preference, setPreference } = useColorTheme();
+    const { labels } = useCiridaeLocale();
+    const trackEdge = faceEdge("raised");
+    const choices = [
+        {
+            value: "light",
+            label: labels.themeCustomizer.light,
+            glyph: _jsx(SunIcon, { className: icon({ size: "small" }) }),
+        },
+        {
+            value: "dark",
+            label: labels.themeCustomizer.dark,
+            glyph: _jsx(MoonIcon, { className: icon({ size: "small" }) }),
+        },
+        {
+            value: "system",
+            label: labels.themeCustomizer.system,
+            glyph: _jsx(CircleHalfIcon, { className: icon({ size: "small" }) }),
+        },
+    ];
+    return (_jsx("div", { role: "group", "aria-label": labels.themeCustomizer.colorTheme, className: cx(track, trackEdge.className, className), "data-ciridae-ui": "", "data-edge": trackEdge["data-edge"], children: choices.map((choice) => (_jsx("button", { type: "button", "aria-label": choice.label, "aria-pressed": preference === choice.value, className: option, "data-ciridae-ui": "", "data-edge": "gradient", onClick: () => setPreference(choice.value), children: choice.glyph }, choice.value))) }));
+}

package/dist/components/toast.d.ts

@@ -11,11 +11,18 @@ export type ToastOptions = {
     variant?: ToastVariant;
     /** Milliseconds it stays; `0` keeps it until dismissed. An error stays by default. */
     timeout?: number;
-    /** One text button, such as Undo; its children are the label. */
+    /**
+     * One small secondary button, such as Undo; its children are the label. It closes the toast, and
+     * takes the close button's place.
+     */
     actionProps?: Pick<ComponentProps<"button">, "children" | "onClick">;
+    /** Replaces the toast already shown with this id, such as a progress toast moving along. */
+    id?: string | number;
+    /** How far a `progress` toast is, 0 to 100, shown as a track and a percentage after its message. */
+    percent?: number;
 };
 /** Raises a toast with the kit's options, returning its id. */
-declare function addToast({ title: message, description: detail, variant, timeout, actionProps, }: ToastOptions): string | number;
+declare function addToast({ title: ownMessage, description: detail, variant, timeout, actionProps, id, percent, }: ToastOptions): string | number;
 /** The kit's toast calls: `add` raises one and returns its id, `close` dismisses it. */
 export declare function useToast(): {
     add: typeof addToast;

package/dist/components/toast.js

@@ -1,30 +1,37 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
- * Toasts are sonner's, in the kit's look: a compact card with a tone icon, the message, an
- * optional muted line under it, an optional action and a close button. Mount one `Toaster` at the
- * app's root; raise toasts with `toast` from anywhere, or `useToast().add` with the kit's options.
+ * Toasts are sonner's, in the kit's look: a solid pill with a tone icon, the message, an optional
+ * muted line under it, and at its end either an action as a small secondary button or a close
+ * button. Mount
+ * one `Toaster` at the app's root; raise toasts with `toast` from anywhere, or `useToast().add`
+ * with the kit's options.
  */
 import { CheckCircleIcon, InfoIcon, SpinnerGapIcon, WarningCircleIcon, WarningIcon, XIcon, } from "@phosphor-icons/react";
 import { Toaster as SonnerToaster, toast } from "sonner";
 import { css, cx } from "#primitives/css";
+import { Button } from "./button.js";
 import { icon, spinning } from "./icon.js";
 import { useCiridaeLocale } from "./locale.js";
 export { toast };
 const card = css({
     display: "flex",
-    alignItems: "flex-start",
-    gap: "layout.controlGap",
-    width: "max-content",
-    maxWidth: "min(360px, calc(100vw - token(spacing.layout.pageGap) * 2))",
+    alignItems: "center",
+    gap: "layout.contentGap",
+    width: "100%",
+    maxWidth: "calc(100vw - token(spacing.layout.pageGap) * 2)",
     paddingBlock: "control.block",
-    paddingInline: "control.iconInline",
-    border: "1px solid token(colors.border.control)",
-    borderRadius: "action",
-    background: "bg.card",
+    paddingInlineStart: "control.inline",
+    paddingInlineEnd: "control.block",
+    border: "1px solid token(colors.border.divider)",
+    borderRadius: "card",
+    // Solid in both themes: the panel's glass laid on the canvas in dark.
+    background: "linear-gradient(token(colors.bg.panel), token(colors.bg.panel)), token(colors.bg.canvas)",
+    _light: { background: "bg.surface" },
     color: "fg.primary",
-    boxShadow: "toast",
+    boxShadow: "soft",
     textStyle: "body",
     fontFamily: "sans",
+    fontWeight: "medium",
     lineHeight: "compact",
     pointerEvents: "auto",
 });
@@ -43,18 +50,28 @@ const iconSlot = css({
     alignItems: "center",
     flexShrink: "0",
 });
+/*
+ * An action raised through sonner's own `toast` with `{ label, onClick }`: the small secondary
+ * button's shape and face, with a flat hairline, since sonner draws the button. `useToast` draws a
+ * kit `Button` instead.
+ */
 const actionButton = css({
     flexShrink: "0",
-    padding: "none",
-    border: "0",
-    background: "transparent",
-    color: "accent.brand",
-    font: "inherit",
+    height: "control.small",
+    paddingInline: "control.compactInline",
+    border: "1px solid token(colors.border.glass)",
+    borderRadius: "pill",
+    background: "token(gradients.raised)",
+    color: "fg.primary",
+    fontFamily: "inherit",
+    fontSize: "caption",
     fontWeight: "medium",
+    letterSpacing: "compact",
     cursor: "pointer",
-    _hover: { textDecoration: "underline" },
+    _hover: { background: "bg.raisedHover" },
     _focusVisible: { focusRing: "outer" },
 });
+const actionSlot = css({ flexShrink: "0" });
 // Sonner places its close button in the card's corner; the kit's sits at the end of the row.
 const closeButton = css({
     position: "static!",
@@ -62,8 +79,8 @@ const closeButton = css({
     display: "grid",
     placeItems: "center",
     flexShrink: "0",
-    width: "control.mark",
-    height: "control.mark",
+    width: "control.compact",
+    height: "control.compact",
     padding: "none",
     border: "0",
     borderRadius: "round",
@@ -74,12 +91,40 @@ const closeButton = css({
     _hover: { color: "fg.primary", background: "bg.hover" },
     _focusVisible: { focusRing: "outer" },
 });
+/* A progress toast's track and how far along it is, after its message. */
+const progressMessage = css({ display: "flex", alignItems: "center", gap: "layout.contentGap" });
+const progressMessageText = css({ flex: "1", minWidth: "0" });
+const progress = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    flexShrink: "0",
+});
+const progressTrack = css({
+    width: "toast.progressWidth",
+    height: "toast.progressHeight",
+    overflow: "hidden",
+    borderRadius: "round",
+    background: "border.control",
+    _light: { background: "token(gradients.canvas)" },
+});
+const progressFill = css({ height: "100%", borderRadius: "round", background: "fg.primary" });
+const progressPercent = css({
+    color: "fg.muted",
+    _light: { color: "fg.secondary" },
+    fontSize: "code",
+    fontVariantNumeric: "tabular-nums",
+});
 const toneIcon = {
     success: css({ color: "accent.green" }),
     info: css({ color: "accent.blue" }),
-    warning: css({ color: "accent.yellow" }),
+    warning: css({ color: "accent.yellowIcon" }),
     danger: css({ color: "accent.red" }),
 };
+// Sonner sizes its stack by `--width`; the kit's toast is the design's width.
+const toasterStyle = {
+    "--width": "var(--sizes-toast\\.width)",
+};
 /** The toast stack, in the kit's look: mount one at the app's root. */
 export function Toaster(props) {
     const { labels, dir } = useCiridaeLocale();
@@ -92,8 +137,8 @@ export function Toaster(props) {
             warning: _jsx(WarningCircleIcon, { className: cx(small, toneIcon.warning), weight: "fill" }),
             error: _jsx(WarningIcon, { className: cx(small, toneIcon.danger), weight: "fill" }),
             loading: _jsx(SpinnerGapIcon, { className: cx(small, toneIcon.info, spinning) }),
-            close: _jsx(XIcon, { className: icon({ size: "compact" }) }),
-        }, containerAriaLabel: labels.notifications.title, ...props, toastOptions: {
+            close: _jsx(XIcon, { className: small }),
+        }, containerAriaLabel: labels.notifications.title, ...props, style: { ...toasterStyle, ...props.style }, toastOptions: {
             unstyled: true,
             ...props.toastOptions,
             classNames: {
@@ -108,16 +153,20 @@ export function Toaster(props) {
             },
         } }));
 }
+let lastToastId = 0;
 /** Raises a toast with the kit's options, returning its id. */
-function addToast({ title: message, description: detail, variant, timeout, actionProps, }) {
+function addToast({ title: ownMessage, description: detail, variant, timeout, actionProps, id = `ciridae-toast-${++lastToastId}`, percent, }) {
     const duration = timeout ?? (variant === "error" ? 0 : undefined);
+    const message = percent === undefined ? (ownMessage) : (_jsxs("span", { className: progressMessage, children: [_jsx("span", { className: progressMessageText, children: ownMessage }), _jsxs("span", { className: progress, children: [_jsx("span", { className: progressTrack, children: _jsx("span", { className: progressFill, style: { width: `${percent}%` } }) }), _jsxs("span", { className: progressPercent, children: [Math.round(percent), "%"] })] })] }));
     const options = {
+        id,
         description: detail,
         duration: duration === 0 ? Infinity : duration,
-        action: actionProps && {
-            label: actionProps.children,
-            onClick: (event) => actionProps.onClick?.(event),
-        },
+        closeButton: actionProps === undefined,
+        action: actionProps && (_jsx("span", { className: actionSlot, children: _jsx(Button, { variant: "secondary", size: "small", onClick: (event) => {
+                    actionProps.onClick?.(event);
+                    toast.dismiss(id);
+                }, children: actionProps.children }) })),
     };
     switch (variant) {
         case "success":