@ciridae/ui 1.0.4 → 1.0.9

package/dist/components/stat-card.js

@@ -29,28 +29,28 @@ 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, "data-trend-text": "", children: children })] }));
 }
-/*
- * 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.
- */
+/* 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",
+    insetInlineStart: "none",
+    bottom: "none",
     width: "var(--sparkline-plot-width, 100%)",
     height: "var(--sparkline-plot-height, 100%)",
 });
 const svg = css({
     position: "absolute",
-    inset: "0",
-    width: "100%",
-    height: "100%",
+    inset: "none",
+    width: "full",
+    height: "full",
     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)" });
+const area = css({
+    position: "absolute",
+    inset: "none",
+    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",
@@ -58,19 +58,15 @@ const endPoint = css({
     background: "chart.trend",
     borderStyle: "solid",
     borderColor: "bg.surface",
-    translate: "-50% -50%",
+    translate: "[-50% -50%]",
 });
-// No run to draw: a dashed rule across the middle holds the line's place.
 const noRun = css({
     position: "absolute",
-    insetInline: "0",
-    top: "50%",
+    insetInline: "none",
+    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.
- */
+/** 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 }) }));
@@ -84,19 +80,14 @@ export function Sparkline({ values, low: ownLow, high: ownHigh, strokeWidth = 1.
     const lastTop = tops[tops.length - 1] ?? 100;
     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%",
+                        left: "100%",
                         top: `${lastTop}%`,
                         width: endPointSize,
                         height: endPointSize,
                         borderWidth: strokeWidth,
                     } })] }) }));
 }
-/*
- * 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.
- */
+/* The label keeps the primary ink, as Foundations' type rule has it where the kit's Stat tile draws it grey; the change's words are the label grey, its arrow in 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",
@@ -127,13 +118,11 @@ const metricCard = cva({
                 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" },
             },
         },
     },
@@ -152,7 +141,7 @@ const metricValue = css({
     lineHeight: "tight",
     fontVariantNumeric: "tabular-nums",
 });
-export function MetricCard({ label, value, change, sparkline, onSelect, href, divider = "card", render, className, ...props }) {
+export function MetricCard({ label, value, change, sparkline, onSelect, onClick, href, divider = "card", render, className, ...props }) {
     return useRender({
         defaultTagName: href !== undefined ? "a" : onSelect !== undefined ? "button" : "div",
         render,
@@ -163,10 +152,13 @@ export function MetricCard({ label, value, change, sparkline, onSelect, href, di
                     ? { type: "button" }
                     : {}),
             ...props,
-            onClick: onSelect,
+            onClick: (event) => {
+                onClick?.(event);
+                onSelect?.();
+            },
             className: cx(metricCard({ divider }), className),
             "data-ciridae-ui": "",
-            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": "" })] })),
+            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": "" })] })),
         },
     });
 }

package/dist/components/status-banner.js

@@ -15,7 +15,7 @@ const banner = cva({
         display: "flex",
         alignItems: "flex-start",
         gap: "layout.controlGap",
-        width: "100%",
+        width: "full",
         color: "fg.primary",
         fontSize: "body",
         lineHeight: "compact",
@@ -62,7 +62,7 @@ const bannerIcon = cva({
         display: "inline-flex",
         flexShrink: "0",
         // Centred on the first line of text.
-        height: "1lh",
+        height: "[1lh]",
         alignItems: "center",
     },
     variants: {
@@ -80,20 +80,20 @@ const message = css({ flex: "1", minWidth: "0", overflowWrap: "anywhere" });
 const titleStyle = css({ fontWeight: "medium" });
 const detailStyle = css({
     color: "fg.muted",
-    "[data-emphasis=filled] &": { color: "inherit", opacity: "0.85" },
+    "[data-emphasis=filled] &": { color: "[inherit]", opacity: "[0.85]" },
 });
 // An action reads as a link at the end of the message; a filled banner underlines it.
 const actionStyle = css({
     display: "inline-flex",
     marginInlineStart: "control.iconGap",
     color: "accent.brand",
-    "[data-emphasis=filled] &": { color: "inherit", textDecoration: "underline" },
+    "[data-emphasis=filled] &": { color: "[inherit]", textDecoration: "underline" },
     "& :is(a, button)": {
         padding: "none",
         height: "auto",
         border: "0",
         background: "transparent",
-        color: "inherit",
+        color: "[inherit]",
         font: "inherit",
         textDecoration: "inherit",
         cursor: "pointer",
@@ -108,7 +108,7 @@ const dismissButton = css({
     flexShrink: "0",
     width: "control.shortcut",
     height: "control.shortcut",
-    marginBlock: "calc((1lh - token(sizes.control.shortcut)) / 2)",
+    marginBlock: "[calc((1lh - token(sizes.control.shortcut)) / 2)]",
     padding: "none",
     border: "0",
     borderRadius: "round",

package/dist/components/status.js

@@ -47,8 +47,8 @@ const dotBox = css({
     fontSize: "icon.small",
     alignItems: "center",
     justifyContent: "center",
-    width: "1em",
-    height: "1em",
+    width: "[1em]",
+    height: "[1em]",
 });
 const liveIndicator = css({
     boxShadow: "indicator.live",
@@ -83,7 +83,7 @@ const pendingText = css({
     "&[data-placement=centered]": {
         display: "flex",
         justifyContent: "center",
-        width: "100%",
+        width: "full",
         minHeight: "emptyState.minimum",
     },
 });

package/dist/components/steps.js

@@ -27,14 +27,14 @@ const number = css({
     color: "fg.primary",
     fontSize: "caption",
     fontVariantNumeric: "tabular-nums",
-    lineHeight: "1",
+    lineHeight: "tight",
 });
 const content = css({ display: "grid", gap: "layout.controlGap", minWidth: "0" });
 const stepTitle = css({ fontWeight: "medium" });
 const muted = css({ color: "fg.muted", fontSize: "caption" });
 const screenshot = css({
     display: "block",
-    maxWidth: "100%",
+    maxWidth: "full",
     maxHeight: "steps.image",
     width: "auto",
     height: "auto",

package/dist/components/switch.js

@@ -25,7 +25,7 @@ const thumb = css({
     height: "control.knob",
     borderRadius: "round",
     background: "bg.knob",
-    transitionProperty: "transform",
+    transitionProperty: "[transform]",
     transitionDuration: "fast",
     "&[data-checked]": {
         transform: "translateX(calc(token(sizes.control.compact) - 2 * token(spacing.control.trackInset) - token(sizes.control.knob)))",

package/dist/components/tabs.js

@@ -9,22 +9,21 @@ import { useCiridaeLocale } from "./locale.js";
 import { Menu } from "./menu.js";
 // Shrinkable by default, so a tab row in a flex or grid row scrolls inside itself rather than
 // widening the page.
-const root = css({ minWidth: "0", maxWidth: "100%" });
+const root = css({ minWidth: "0", maxWidth: "full" });
 export function TabsRoot({ className, ...props }) {
     return _jsx(BaseTabs.Root, { ...props, className: cx(root, className) });
 }
 export const TabsPanel = BaseTabs.Panel;
 const list = css({
     display: "flex",
-    maxWidth: "100%",
+    maxWidth: "full",
     alignItems: "center",
     gap: "none",
     overflowX: "auto",
-    scrollbarWidth: "none",
+    scrollbarWidth: "[none]",
 });
-/** Finalization "View tabs": tabs sit inside a grey pill well with a hairline inset. */
 const containedList = css({
-    width: "max-content",
+    width: "[max-content]",
     padding: "control.trackInset",
     border: "1px solid token(colors.border.control)",
     borderRadius: "pill",
@@ -64,18 +63,17 @@ const tab = css({
     cursor: "pointer",
     flexShrink: "0",
     "&[data-icon-tone=bronze] svg": { color: "accent.bronze" },
-    // 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)" },
+    _before: { display: "none", background: "[token(gradients.border.raised)]" },
     _hover: {
         background: "bg.controlHover",
         color: "fg.primary",
-        "& svg": { color: "inherit" },
+        "& svg": { color: "[inherit]" },
     },
     "&[data-active]": {
-        background: "token(gradients.raised)",
+        background: "[token(gradients.raised)]",
         boxShadow: "soft",
         color: "fg.primary",
-        "& svg": { color: "inherit" },
+        "& 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
@@ -92,12 +90,11 @@ const tab = css({
         border: "0",
         background: "transparent",
         _hover: { background: "transparent" },
-        "&[data-active]": { background: "transparent", boxShadow: "none" },
-        // No edge either: the open word is the only mark.
+        "&[data-active]": { background: "transparent", boxShadow: "[none]" },
         "&::before, &:hover::before, &[data-active]::before": { display: "none" },
         _focusVisible: {
-            boxShadow: "none",
-            outline: "none",
+            boxShadow: "[none]",
+            outline: "0",
             color: "fg.primary",
             textDecoration: "underline",
             textUnderlineOffset: "3px",
@@ -108,13 +105,13 @@ const tab = css({
         paddingInline: "none",
         border: "0",
         borderBottom: "2px solid transparent",
-        borderRadius: "0",
-        marginBottom: "-1px",
+        borderRadius: "none",
+        marginBottom: "[-1px]",
         background: "transparent",
         _hover: { background: "transparent" },
         "&[data-active]": {
             background: "transparent",
-            boxShadow: "none",
+            boxShadow: "[none]",
             borderBottomColor: "fg.primary",
         },
         "&::before, &:hover::before, &[data-active]::before": { display: "none" },
@@ -225,7 +222,7 @@ const bar = css({
     flexWrap: "nowrap",
     gap: "layout.contentGap",
     minWidth: "0",
-    "& > :first-child": { flex: "1 1 auto", minWidth: "0", maxWidth: "100%" },
+    "& > :first-child": { flex: "[1 1 auto]", minWidth: "0", maxWidth: "full" },
     _phone: { flexWrap: "wrap" },
 });
 const barActions = css({

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

@@ -1,5 +1,4 @@
 import { type ComponentProps } from "react";
-import { type PaletteName } from "../theme/palettes.js";
 import { type CiridaeLabels } from "./locale.js";
 import type { CiridaeTheme } from "../theme/options.js";
 /** A face the app offers: its id, its name in the menu and its CSS family. */
@@ -14,15 +13,13 @@ export type ThemeFontOptions = {
     sans: readonly ThemeFontOption[];
     mono: readonly ThemeFontOption[];
 };
-/** The palette and the faces, by font id. */
 export type ThemeCustomization = {
-    palette: PaletteName;
     displayFont: string;
     sansFont: string;
     monoFont: string;
 };
-/** The palette and font families `ThemeProvider` (and `createCiridaePreset`) take for `value`. */
-export declare function themeCustomizationTheme(value: ThemeCustomization, fonts: ThemeFontOptions): Pick<CiridaeTheme, "palette" | "fonts">;
+/** The font families `ThemeProvider` (and `createCiridaePreset`) take for `value`. */
+export declare function themeCustomizationTheme(value: ThemeCustomization, fonts: ThemeFontOptions): Pick<CiridaeTheme, "fonts">;
 /** A stored customization read back field by field, taking `fallback`'s for any it lacks. */
 export declare function parseThemeCustomization(stored: unknown, fallback: ThemeCustomization, fonts: ThemeFontOptions): ThemeCustomization;
 export type UseThemeCustomizationOptions<Value extends ThemeCustomization> = {
@@ -34,15 +31,15 @@ export type UseThemeCustomizationOptions<Value extends ThemeCustomization> = {
     parse: (stored: unknown) => Value;
 };
 /**
- * A customization the app holds at its root: the value, a setter, and the `palette` and `fonts`
- * to pass `ThemeProvider`. With `persistKey` it survives reloads; anything the app keeps beside
+ * A customization the app holds at its root: the value, a setter, and the `fonts` to pass
+ * `ThemeProvider`. With `persistKey` it survives reloads; anything the app keeps beside
  * the theme in `Value`, such as a brand name, is stored with it.
  */
 export declare function useThemeCustomization<Value extends ThemeCustomization>({ defaultValue, fonts, persistKey, parse, }: UseThemeCustomizationOptions<Value>): {
     value: Value;
     setValue: import("react").Dispatch<import("react").SetStateAction<Value>>;
     reset: () => void;
-    theme: Pick<CiridaeTheme, "fonts" | "palette">;
+    theme: Pick<CiridaeTheme, "fonts">;
 };
 export type ThemeCustomizerProps<Value extends ThemeCustomization> = Omit<ComponentProps<"div">, "children" | "onChange"> & {
     value: Value;

package/dist/components/theme-customizer.js

@@ -1,28 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /*
- * The Appearance controls: the palette (with each palette's swatches under the color theme on
- * screen), the color theme (System, Light, Dark) and the display, body and mono faces from fonts
- * the app offers. The palette and faces are the caller's `value`, which it hands to
- * `ThemeProvider` (`useThemeCustomization` keeps one in `localStorage` and builds those props);
- * the color theme is `ThemeProvider`'s own, so it is read and set through `useColorTheme`.
+ * The Appearance controls: the color theme (System, Light, Dark) and the display, body and mono
+ * faces from fonts the app offers. The faces are the caller's `value`, which it hands to
+ * `ThemeProvider` (`useThemeCustomization` keeps one in `localStorage` and builds that prop); the
+ * color theme is `ThemeProvider`'s own, so it is read and set through `useColorTheme`.
  */
 import { useCallback, useEffect, useState } from "react";
 import { css, cx } from "#primitives/css";
-import { derivePaletteTokens } from "../theme/derive.js";
-import { PALETTE_NAMES, palettes } from "../theme/palettes.js";
 import { useColorTheme } from "./color-theme.js";
 import { DrawerField, DrawerFieldRow } from "./drawer.js";
 import { SegmentedControl, SegmentedOption } from "./form-layout.js";
 import { useCiridaeLocale } from "./locale.js";
-import { RadioCard, RadioCardGroup } from "./radio-card.js";
 import { Select } from "./select.js";
 function fontFamily(options, id) {
     return options.find((option) => option.id === id)?.family;
 }
-/** The palette and font families `ThemeProvider` (and `createCiridaePreset`) take for `value`. */
+/** The font families `ThemeProvider` (and `createCiridaePreset`) take for `value`. */
 export function themeCustomizationTheme(value, fonts) {
     return {
-        palette: value.palette,
         fonts: {
             display: fontFamily(fonts.display ?? fonts.sans, value.displayFont),
             sans: fontFamily(fonts.sans, value.sansFont),
@@ -35,17 +30,15 @@ export function parseThemeCustomization(stored, fallback, fonts) {
     if (typeof stored !== "object" || stored === null)
         return fallback;
     const fontId = (options, value, otherwise) => options.find((option) => option.id === value)?.id ?? otherwise;
-    const palette = "palette" in stored ? stored.palette : undefined;
     return {
-        palette: PALETTE_NAMES.find((name) => name === palette) ?? fallback.palette,
         displayFont: fontId(fonts.display ?? fonts.sans, "displayFont" in stored ? stored.displayFont : undefined, fallback.displayFont),
         sansFont: fontId(fonts.sans, "sansFont" in stored ? stored.sansFont : undefined, fallback.sansFont),
         monoFont: fontId(fonts.mono, "monoFont" in stored ? stored.monoFont : undefined, fallback.monoFont),
     };
 }
 /**
- * A customization the app holds at its root: the value, a setter, and the `palette` and `fonts`
- * to pass `ThemeProvider`. With `persistKey` it survives reloads; anything the app keeps beside
+ * A customization the app holds at its root: the value, a setter, and the `fonts` to pass
+ * `ThemeProvider`. With `persistKey` it survives reloads; anything the app keeps beside
  * the theme in `Value`, such as a brand name, is stored with it.
  */
 export function useThemeCustomization({ defaultValue, fonts, persistKey, parse, }) {
@@ -74,31 +67,10 @@ export function useThemeCustomization({ defaultValue, fonts, persistKey, parse,
     return { value, setValue, reset, theme: themeCustomizationTheme(value, fonts) };
 }
 const root = css({ display: "flex", flexDirection: "column", gap: "layout.clusterGap" });
-const swatches = css({ display: "flex", gap: "layout.tightGap" });
-const swatch = css({
-    width: "indicator.badge",
-    height: "indicator.badge",
-    borderRadius: "round",
-    boxShadow: "inset 0 0 0 1px token(colors.border.glass)",
-});
-/** The palette's accent, primary face and four status hues, under the color theme on screen. */
-function PaletteSwatches({ name, colorTheme }) {
-    const tokens = derivePaletteTokens(palettes[name]);
-    const themed = (value) => colorTheme === "light" ? value._light : value.base;
-    const fills = [
-        themed(tokens.colors["accent.brand"]),
-        themed(tokens.colors["bg.primary"]),
-        themed(tokens.colors["accent.green"]),
-        themed(tokens.colors["accent.red"]),
-        themed(tokens.colors["accent.yellow"]),
-        themed(tokens.colors["accent.blue"]),
-    ];
-    return (_jsx("span", { className: swatches, "aria-hidden": "true", children: fills.map((fill, index) => (_jsx("span", { className: swatch, style: { background: fill } }, index))) }));
-}
 export function ThemeCustomizer({ value, onValueChange, fonts, labels: ownLabels, className, ...props }) {
     const { labels: localeLabels } = useCiridaeLocale();
     const labels = { ...localeLabels.themeCustomizer, ...ownLabels };
-    const { theme, preference, setPreference } = useColorTheme();
+    const { preference, setPreference } = useColorTheme();
     const colorThemes = [
         { value: "system", label: labels.system },
         { value: "light", label: labels.light },
@@ -108,9 +80,5 @@ export function ThemeCustomizer({ value, onValueChange, fonts, labels: ownLabels
                 if (id !== null && options.some((option) => option.id === id))
                     pick(id);
             } }) }));
-    return (_jsxs("div", { ...props, className: cx(root, className), "data-ciridae-ui": "", children: [_jsx(DrawerField, { label: labels.palette, children: _jsx(RadioCardGroup, { name: "palette", label: labels.palette, value: value.palette, onValueChange: (next) => {
-                        const palette = PALETTE_NAMES.find((name) => name === next);
-                        if (palette)
-                            onValueChange({ ...value, palette });
-                    }, children: PALETTE_NAMES.map((name) => (_jsx(RadioCard, { value: name, title: labels.paletteName(name), source: _jsx(PaletteSwatches, { name: name, colorTheme: theme }) }, name))) }) }), _jsx(DrawerField, { label: labels.colorTheme, children: _jsx(SegmentedControl, { "aria-label": labels.colorTheme, children: colorThemes.map((option) => (_jsx(SegmentedOption, { selected: option.value === preference, onClick: () => setPreference(option.value), children: option.label }, option.value))) }) }), _jsxs(DrawerFieldRow, { children: [fontSelect(labels.displayFont, fonts.display ?? fonts.sans, value.displayFont, (id) => onValueChange({ ...value, displayFont: id })), fontSelect(labels.sansFont, fonts.sans, value.sansFont, (id) => onValueChange({ ...value, sansFont: id }))] }), _jsx(DrawerFieldRow, { children: fontSelect(labels.monoFont, fonts.mono, value.monoFont, (id) => onValueChange({ ...value, monoFont: id })) })] }));
+    return (_jsxs("div", { ...props, className: cx(root, className), "data-ciridae-ui": "", children: [_jsx(DrawerField, { label: labels.colorTheme, children: _jsx(SegmentedControl, { "aria-label": labels.colorTheme, children: colorThemes.map((option) => (_jsx(SegmentedOption, { selected: option.value === preference, onClick: () => setPreference(option.value), children: option.label }, option.value))) }) }), _jsxs(DrawerFieldRow, { children: [fontSelect(labels.displayFont, fonts.display ?? fonts.sans, value.displayFont, (id) => onValueChange({ ...value, displayFont: id })), fontSelect(labels.sansFont, fonts.sans, value.sansFont, (id) => onValueChange({ ...value, sansFont: id }))] }), _jsx(DrawerFieldRow, { children: fontSelect(labels.monoFont, fonts.mono, value.monoFont, (id) => onValueChange({ ...value, monoFont: id })) })] }));
 }

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

@@ -1,4 +1,3 @@
-/** 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

@@ -5,10 +5,6 @@ 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",
@@ -16,32 +12,31 @@ const track = css({
     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)",
+    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))",
+    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",
+    transitionProperty: "[background, color]",
     transitionDuration: "fast",
     _hover: { color: "fg.primary" },
     _focusVisible: { focusRing: "outer" },
-    _before: { display: "none", background: "token(gradients.border.raised)" },
+    _before: { display: "none", background: "[token(gradients.border.raised)]" },
     "&[aria-pressed=true]": {
-        background: "token(gradients.raised)",
+        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();

package/dist/components/toast.d.ts

@@ -11,19 +11,13 @@ export type ToastOptions = {
     variant?: ToastVariant;
     /** Milliseconds it stays; `0` keeps it until dismissed. An error stays by default. */
     timeout?: number;
-    /**
-     * One small secondary button, such as Undo; its children are the label. It closes the toast, and
-     * takes the close button's place.
-     */
+    /** One small secondary button, such as Undo. 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: 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;
     close: (id?: string | number) => string | number;