@cueplusplus/ui 0.17.0 → 0.18.1

package/dist/layout/_collapse.js

@@ -1,7 +1,6 @@
-import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
 import { CONTROL_FACE } from "../system/_style-control-face.js";
-import { LABEL_WEIGHT_NORMAL } from "../system/_style-label-weight.js";
-import { COLLAPSE_HEIGHT } from "../system/_style-collapse.js";
+import { COLLAPSE_FOCUS_RING } from "../system/_style-text-focus.js";
+import { COLLAPSE_BODY_FACE, COLLAPSE_BODY_INK, COLLAPSE_BODY_LEADING, COLLAPSE_BODY_PAD, COLLAPSE_BODY_SIZE, COLLAPSE_BODY_TRACKING, COLLAPSE_CARET_INK, COLLAPSE_CARET_OPACITY, COLLAPSE_CARET_SIZE, COLLAPSE_GAP, COLLAPSE_HEIGHT, COLLAPSE_HOVER_GROUND, COLLAPSE_HOVER_INK, COLLAPSE_LEADING, COLLAPSE_OPEN_INK, COLLAPSE_PAD, COLLAPSE_RADIUS, COLLAPSE_SIZE, COLLAPSE_WEIGHT } from "../system/_style-collapse.js";
 import { QUIET_INK } from "../system/_style-quiet-ink.js";
 //#region src/layout/_collapse.ts
 /**
@@ -22,16 +21,25 @@ import { QUIET_INK } from "../system/_style-quiet-ink.js";
 * `focus-visible:outline-solid` re-declares the outline style the sibling
 * `outline-none` switched off — see the note on `buttonChassis`. The ring is
 * inset (`-outline-offset-2`) because sections live inside `overflow-hidden`
-* panels, where an outset ring on the first row would be clipped by the rim.
+* panels, where an outset ring on the first row would be clipped by the rim;
+* a style set may move it (`style-text-focus-offset`, `_style-text-focus.ts`).
+*
+* Round 6 (spec §11, lane R6.T) reads the gutter, the gap, the hover and open
+* inks and the ring's offset from the style set, each falling back to the
+* class it replaced (`_style-collapse.ts`); lane R6.K adds the question's
+* size and leading and the hover ground, and lane R6.Z its weight (falling back
+* through the label weight to the `400` it drew), the same way.
 */
-const collapseTriggerClasses = `group/collapse flex ${COLLAPSE_HEIGHT} w-full cursor-pointer items-center gap-(--cue-space-3) px-(--cue-pad-row-x) text-left ${CONTROL_FACE} text-(length:--cue-text-ui) ${QUIET_INK} ${LABEL_WEIGHT_NORMAL} transition-colors duration-150 outline-none select-none hover:text-fg ${FOCUS_RING_INSET_2} data-[panel-open]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
+const collapseTriggerClasses = `group/collapse flex ${COLLAPSE_HEIGHT} w-full cursor-pointer items-center ${COLLAPSE_GAP} ${COLLAPSE_PAD} ${COLLAPSE_RADIUS} text-left ${CONTROL_FACE} ${COLLAPSE_SIZE} ${COLLAPSE_LEADING} ${QUIET_INK} ${COLLAPSE_WEIGHT} transition-colors duration-150 outline-none select-none ${COLLAPSE_HOVER_INK} ${COLLAPSE_HOVER_GROUND} ${COLLAPSE_FOCUS_RING} ${COLLAPSE_OPEN_INK} data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
 /** The label between the summary row's gutters — truncates, never wraps. */
 const collapseLabelClasses = "min-w-0 flex-1 truncate";
 /**
 * The caret at the end of a summary row. Rotation is driven off the trigger's
 * own `data-panel-open`, so nothing in React has to know the section is open.
+* Its size and ink read the style set (round 6, lane R6.Z), falling back to
+* the `icon-sm` and `fg-subtle` it drew.
 */
-const collapseCaretClasses = "size-icon-sm shrink-0 text-fg-subtle transition-transform duration-150 ease-out group-data-[panel-open]/collapse:rotate-90 motion-reduce:transition-none";
+const collapseCaretClasses = `${COLLAPSE_CARET_SIZE} shrink-0 ${COLLAPSE_CARET_INK} ${COLLAPSE_CARET_OPACITY} transition-transform duration-150 ease-out group-data-[panel-open]/collapse:rotate-90 motion-reduce:transition-none`;
 /**
 * Enter/exit for a panel, animated from the height Base UI measures for us.
 *
@@ -45,7 +53,15 @@ const PANEL_MOTION = "overflow-hidden transition-[height] duration-150 ease-out
 const accordionPanelClasses = `${PANEL_MOTION} h-(--accordion-panel-height)`;
 /** {@link PANEL_MOTION} against the collapsible's measured height. */
 const collapsiblePanelClasses = `${PANEL_MOTION} h-(--collapsible-panel-height)`;
-/** The padded body inside a panel: aligned to the summary row's gutters. */
-const collapsePanelBodyClasses = "px-(--cue-pad-row-x) pt-(--cue-space-1) pb-(--cue-space-4) font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted";
+/**
+* The padded body inside a panel: aligned to the summary row's gutters, which
+* a style set may move with the trigger's (`style-collapse-pad`), and padded
+* top and bottom by `style-collapse-body-pad` (round 6, spec §11). Its voice
+* reads the set (lanes R6.K and R6.Z): its face (the body face), size, leading
+* and tracking, and its ink
+* (`style-collapse-body-ink`), each falling back to the mono `text-ui` line in
+* `fg-muted` it drew.
+*/
+const collapsePanelBodyClasses = `${COLLAPSE_PAD} ${COLLAPSE_BODY_PAD} ${COLLAPSE_BODY_FACE} ${COLLAPSE_BODY_SIZE} ${COLLAPSE_BODY_LEADING} ${COLLAPSE_BODY_TRACKING} ${COLLAPSE_BODY_INK}`;
 //#endregion
 export { accordionPanelClasses, collapseCaretClasses, collapseLabelClasses, collapsePanelBodyClasses, collapseTriggerClasses, collapsiblePanelClasses };

package/dist/layout/accordion.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { ACCORDION_RULE_INK, ACCORDION_RULE_STYLE } from "../system/_style-accordion-rule.js";
 import { accordionPanelClasses, collapseCaretClasses, collapseLabelClasses, collapsePanelBodyClasses, collapseTriggerClasses } from "./_collapse.js";
 import { ChevronRightGlyph } from "./_glyphs.js";
 import * as React from "react";
@@ -36,7 +37,7 @@ const Accordion$1 = {
 		return /* @__PURE__ */ jsx(Accordion.Item, {
 			ref,
 			"data-slot": "accordion-item",
-			className: cn("border-t border-border first:border-t-0", className),
+			className: cn("border-t first:border-t-0", ACCORDION_RULE_INK, ACCORDION_RULE_STYLE, className),
 			...elementProps
 		});
 	}),

package/dist/layout/breadcrumb.js

@@ -1,16 +1,17 @@
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
-import { CONTROL_FACE } from "../system/_style-control-face.js";
-import { BODY_SIZE_LABEL } from "../system/_style-body-size.js";
 import { HELP_INK } from "../system/_style-help-ink.js";
+import { CRUMB_CURRENT_INK, CRUMB_FACE, CRUMB_GAP, CRUMB_HOVER_INK, CRUMB_INK, CRUMB_SEPARATOR_OPACITY, CRUMB_SIZE } from "../system/_style-crumb.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/layout/breadcrumb.tsx
 /**
 * A crumb that goes somewhere. Muted until hovered, never underlined — the
-* trail is navigation furniture and should not read as body-copy links.
+* trail is navigation furniture and should not read as body-copy links. Its
+* face, hover ink and the trail's gap read the style set (round 6, spec §11,
+* lane R6.Z: `_style-crumb.ts`), each falling back to what it drew.
 */
-const CRUMB_LINK_CLASSES = `cursor-pointer rounded-control border-0 bg-transparent p-0 ${CONTROL_FACE} ${BODY_SIZE_LABEL} text-fg-muted no-underline transition-colors duration-150 outline-none hover:text-accent ${FOCUS_RING_OFFSET_2}`;
+const CRUMB_LINK_CLASSES = `cursor-pointer rounded-control border-0 bg-transparent p-0 ${CRUMB_FACE} ${CRUMB_SIZE} ${CRUMB_INK} no-underline transition-colors duration-150 outline-none ${CRUMB_HOVER_INK} ${FOCUS_RING_OFFSET_2}`;
 /**
 * Where you are, and how to get back.
 *
@@ -32,13 +33,13 @@ const Breadcrumb = React.forwardRef(function Breadcrumb({ className, items, sepa
 		className: cn("min-w-0", className),
 		...elementProps,
 		children: /* @__PURE__ */ jsx("ol", {
-			className: cn(`m-0 flex list-none flex-wrap items-center gap-(--cue-space-2) p-0 ${BODY_SIZE_LABEL} text-fg-muted`, CONTROL_FACE),
+			className: cn(`m-0 flex list-none flex-wrap items-center ${CRUMB_GAP} p-0 ${CRUMB_SIZE} ${CRUMB_INK}`, CRUMB_FACE),
 			children: items.map((item, index) => {
 				const last = index === items.length - 1;
 				return /* @__PURE__ */ jsxs(React.Fragment, { children: [index === 0 ? null : /* @__PURE__ */ jsx("li", {
 					"data-slot": "breadcrumb-separator",
 					"aria-hidden": "true",
-					className: `${HELP_INK} select-none`,
+					className: `${HELP_INK} ${CRUMB_SEPARATOR_OPACITY} select-none`,
 					children: separator
 				}), /* @__PURE__ */ jsx("li", {
 					"data-slot": "breadcrumb-item",
@@ -46,7 +47,7 @@ const Breadcrumb = React.forwardRef(function Breadcrumb({ className, items, sepa
 					children: last ? /* @__PURE__ */ jsx("span", {
 						"data-slot": "breadcrumb-current",
 						"aria-current": "page",
-						className: "truncate text-fg",
+						className: `truncate ${CRUMB_CURRENT_INK}`,
 						children: item.label
 					}) : item.href !== void 0 ? /* @__PURE__ */ jsx("a", {
 						href: item.href,

package/dist/layout/card.js

@@ -5,6 +5,7 @@ import { RIM_INSET } from "../system/_paint-rim.js";
 import { TITLE_VOICE } from "../system/_style-title.js";
 import { SEAM_INK, SEAM_RIM } from "../system/_style-seam.js";
 import { STROKE_SURFACE_1 } from "../system/_paint-stroke-surface-1.js";
+import { CARD_GAP } from "../system/_style-card-gap.js";
 import { CARD_PAD, CARD_PAD_BOTTOM, CARD_PAD_SEAM_BOTTOM, CARD_PAD_SEAM_TOP, CARD_PAD_TOP, CARD_PAD_X } from "../system/_style-card-pad.js";
 import { DESCRIPTION_LEADING, DESCRIPTION_TRACKING } from "../system/_style-description.js";
 import * as React from "react";
@@ -38,7 +39,7 @@ const Card = {
 			className: cn(`flex items-start justify-between gap-(--cue-space-4) bg-surface-1 ${CARD_PAD_X} ${CARD_PAD_TOP} pb-0 ${CARD_PAD_SEAM_BOTTOM}`, className),
 			...elementProps,
 			children: [/* @__PURE__ */ jsx("div", {
-				className: "flex min-w-0 flex-col gap-(--cue-space-1)",
+				className: `flex min-w-0 flex-col ${CARD_GAP}`,
 				children
 			}), actions === void 0 ? null : /* @__PURE__ */ jsx("div", {
 				"data-slot": "card-header-actions",

package/dist/layout/collapsible.js

@@ -6,6 +6,7 @@ import { LABEL_CASE } from "../system/_style-label-case.js";
 import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import { collapseCaretClasses, collapseLabelClasses, collapsePanelBodyClasses, collapseTriggerClasses, collapsiblePanelClasses } from "./_collapse.js";
 import { ChevronRightGlyph } from "./_glyphs.js";
+import { DISCLOSURE_HOVER_INK, DISCLOSURE_INK, DISCLOSURE_WEIGHT } from "../system/_style-disclosure.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Collapsible } from "@base-ui/react/collapsible";
@@ -98,7 +99,7 @@ const Disclosure = React.forwardRef(function Disclosure({ className, label = "ad
 		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
 			ref,
 			"data-slot": "disclosure-trigger",
-			className: cn(`group/disclosure inline-flex cursor-pointer items-center gap-(--cue-space-2) self-start border-0 bg-transparent p-0 py-(--cue-space-2) text-(length:--cue-text-label) text-fg-subtle transition-colors duration-150 outline-none select-none hover:text-fg-muted ${FOCUS_RING_OFFSET_2}`, LABEL_FACE, LABEL_TRACKING, LABEL_CASE, className),
+			className: cn(`group/disclosure inline-flex cursor-pointer items-center gap-(--cue-space-2) self-start border-0 bg-transparent p-0 py-(--cue-space-2) text-(length:--cue-text-label) ${DISCLOSURE_INK} ${DISCLOSURE_WEIGHT} transition-colors duration-150 outline-none select-none ${DISCLOSURE_HOVER_INK} ${FOCUS_RING_OFFSET_2}`, LABEL_FACE, LABEL_TRACKING, LABEL_CASE, className),
 			...elementProps,
 			children: [
 				/* @__PURE__ */ jsx("span", {

package/dist/layout/link.d.ts

@@ -48,6 +48,20 @@ interface LinkProps extends React.ComponentPropsWithoutRef<"a">, VariantProps<ty
    * how the design system composes with a router without depending on one.
    */
   render?: useRender.RenderProp;
+  /**
+   * Where the link goes. Restated from the anchor's own attributes, as
+   * `children` is below: docgen documents a prop only where the library
+   * declares it, and an anchor without an `href` is not a link to the
+   * keyboard or to a screen reader.
+   */
+  href?: string;
+  /**
+   * The link's text. Restated for the same reason: without it the props table
+   * omitted it and no propSet could name it, so the docs' Link tile drew an
+   * empty anchor (round 6 of the Looks' fidelity plan found it, measuring
+   * Kiln's plain link, K161).
+   */
+  children?: React.ReactNode;
 }
 /**
  * A text link: accent on hover, no rule unless you ask for one.

package/dist/layout/link.js

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
 import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { cva } from "../lib/cva.js";
-import { HOVER_INK, INLINE_LINK_INK, LINK_INK, LINK_OFFSET, LINK_RULE, LINK_WEIGHT } from "../system/_style-link.js";
+import { HOVER_INK, HOVER_RULE, INLINE_LINK_INK, LINK_INK, LINK_OFFSET, LINK_RULE, LINK_WEIGHT } from "../system/_style-link.js";
+import { LINK_FOCUS_RING } from "../system/_style-text-focus.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
@@ -38,10 +38,10 @@ import { useRender } from "@base-ui/react/use-render";
 * @example
 * <a className={linkVariants({ variant: "underline" })} href="/docs">Docs</a>
 */
-const linkVariants = cva(`cursor-pointer rounded-control ${CONTROL_FACE} ${LINK_WEIGHT} transition-colors duration-150 outline-none ${HOVER_INK} ${FOCUS_RING_OFFSET_2}`, {
+const linkVariants = cva(`cursor-pointer rounded-control ${CONTROL_FACE} ${LINK_WEIGHT} transition-colors duration-150 outline-none ${HOVER_INK} ${LINK_FOCUS_RING}`, {
 	variants: { variant: {
 		plain: `no-underline ${LINK_INK}`,
-		underline: `underline ${INLINE_LINK_INK} ${LINK_RULE} ${LINK_OFFSET} hover:decoration-[color:var(--cue-style-hover-ink,var(--cue-accent))]`
+		underline: `underline ${INLINE_LINK_INK} ${LINK_RULE} ${LINK_OFFSET} ${HOVER_RULE}`
 	} },
 	defaultVariants: { variant: "plain" }
 });

package/dist/layout/pagination.js

@@ -1,8 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING_INSET } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { GLYPH_INK_SUBTLE } from "../system/_style-glyph-ink.js";
+import { GHOST_INK } from "../system/_style-control.js";
 import { IconButton } from "../primitives/icon-button.js";
 import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.js";
+import { PAGE_CURRENT } from "../system/_style-page.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/layout/pagination.tsx
@@ -58,12 +62,7 @@ function paginationRange(page, pageCount, siblingCount = 1) {
 		return typeof before === "number" && typeof after === "number" && after - before === 2 ? before + 1 : entry;
 	});
 }
-/**
-* One page button: a square on the short rung of the control ladder, tinted
-* with `accent-soft` when it is the page you are on — never a solid accent
-* fill, which at console density reads as a second, louder button.
-*/
-const PAGE_BUTTON_CLASSES = `inline-flex h-control-sm min-w-control-sm cursor-pointer items-center justify-center rounded-control border-0 bg-transparent px-(--cue-space-2) font-mono text-(length:--cue-text-ui) tabular-nums text-fg-muted transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET}`;
+const PAGE_BUTTON_CLASSES = `inline-flex h-control-sm min-w-control-sm cursor-pointer items-center justify-center rounded-control border-0 bg-transparent px-(--cue-space-2) ${CONTROL_FACE} font-[number:var(--cue-style-control-weight,inherit)] text-(length:--cue-text-ui) tabular-nums ${GHOST_INK} transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET}`;
 /**
 * The pager: previous, a window of page numbers, next.
 *
@@ -97,7 +96,7 @@ const Pagination = React.forwardRef(function Pagination({ className, page, pageC
 			entries.map((entry, index) => entry === "gap" ? /* @__PURE__ */ jsx("span", {
 				"data-slot": "pagination-gap",
 				"aria-hidden": "true",
-				className: "inline-flex h-control-sm items-center justify-center px-(--cue-space-1) font-mono text-(length:--cue-text-ui) text-fg-subtle select-none",
+				className: `inline-flex h-control-sm items-center justify-center px-(--cue-space-1) font-mono text-(length:--cue-text-ui) ${GLYPH_INK_SUBTLE} select-none`,
 				children: "…"
 			}, `gap-${index}`) : /* @__PURE__ */ jsx("button", {
 				type: "button",
@@ -105,7 +104,7 @@ const Pagination = React.forwardRef(function Pagination({ className, page, pageC
 				"aria-label": `Page ${entry}`,
 				"aria-current": entry === page ? "page" : void 0,
 				onClick: () => onPageChange(entry),
-				className: cn(PAGE_BUTTON_CLASSES, entry === page ? "bg-accent-soft text-accent" : null),
+				className: cn(PAGE_BUTTON_CLASSES, entry === page ? PAGE_CURRENT : null),
 				children: entry
 			}, entry)),
 			/* @__PURE__ */ jsx(IconButton, {

package/dist/overlays/_surface.d.ts

@@ -117,13 +117,13 @@ declare const overlayFooterClasses = "flex items-center justify-end gap-(--cue-s
  * and the highlight are the style set's, with those as their defaults
  * (`_style-menu.ts`).
  */
-declare const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-[var(--cue-style-menu-item-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))] px-(--cue-space-3) font-[family-name:var(--cue-style-control-face,var(--cue-font-mono))] text-(length:--cue-text-ui) text-[color:var(--cue-style-quiet-ink,var(--cue-fg-muted))] data-[highlighted]:bg-[color:var(--cue-style-menu-highlight,var(--cue-accent-soft))] outline-none select-none data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
+declare const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-[var(--cue-style-menu-item-radius,calc(var(--cue-radius-control)*var(--cue-radius-scale)))] px-(--cue-space-3) font-[family-name:var(--cue-style-control-face,var(--cue-font-mono))] text-(length:--cue-text-ui) text-[color:var(--cue-style-quiet-ink,var(--cue-fg-muted))] data-[highlighted]:bg-[color:var(--cue-style-menu-highlight,var(--cue-accent-soft))] outline-none select-none data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--cue-style-row-disabled-opacity,0.4)]";
 /** The uppercase mono caption over a group of menu rows — by default. */
-declare const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) font-[family-name:var(--cue-style-label-face,var(--cue-font-mono))] text-[length:var(--cue-style-label-size,var(--cue-text-label))] tracking-[var(--cue-style-label-tracking,var(--cue-tracking-caps))] text-[color:var(--cue-style-label-ink,var(--cue-fg-subtle))] font-[number:var(--cue-style-label-weight,inherit)] [text-transform:var(--cue-style-label-case,uppercase)] select-none";
+declare const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) py-[var(--cue-style-group-label-pad,0px)] font-[family-name:var(--cue-style-label-face,var(--cue-font-mono))] text-[length:var(--cue-style-group-label-size,var(--cue-style-label-size,var(--cue-text-label)))] tracking-[var(--cue-style-label-tracking,var(--cue-tracking-caps))] text-[color:var(--cue-style-group-label-ink,var(--cue-style-label-ink,var(--cue-fg-subtle)))] font-[number:var(--cue-style-label-weight,inherit)] [text-transform:var(--cue-style-label-case,uppercase)] select-none";
 /** The hairline between menu groups. */
-declare const menuSeparatorClasses = "my-(--cue-space-1) h-px bg-border";
+declare const menuSeparatorClasses = "my-(--cue-space-1) mx-[var(--cue-style-menu-separator-inset,0px)] h-px bg-border";
 /** Padding of a menu popup — a single space unit so rows reach the rim. */
-declare const menuPopupClasses = "min-w-[10rem] p-(--cue-space-1)";
+declare const menuPopupClasses = "min-w-[var(--cue-style-menu-min-width,10rem)] p-(--cue-space-1)";
 /** Default gap in px between an anchored popup and its trigger. */
 declare const OVERLAY_SIDE_OFFSET = 4;
 //#endregion

package/dist/overlays/_surface.js

@@ -1,14 +1,15 @@
 import { CONTROL_FACE } from "../system/_style-control-face.js";
-import { LABEL_INK_SUBTLE } from "../system/_style-label-ink.js";
 import { LABEL_FACE } from "../system/_style-label-face.js";
 import { LABEL_WEIGHT } from "../system/_style-label-weight.js";
 import { LABEL_CASE } from "../system/_style-label-case.js";
 import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import { ELEVATION_2 } from "../system/_paint-elevation.js";
-import { LABEL_SIZE } from "../system/_style-label-size.js";
 import { STROKE_SURFACE_2 } from "../system/_paint-stroke-surface-2.js";
 import { BODY_VOICE } from "../system/_style-body.js";
-import { MENU_ITEM_INK, MENU_ITEM_RADIUS } from "../system/_style-menu.js";
+import { GROUP_LABEL_INK, GROUP_LABEL_SIZE } from "../system/_style-group-label.js";
+import { GROUP_LABEL_PAD } from "../system/_style-group-label-pad.js";
+import { MENU_ITEM_INK, MENU_ITEM_RADIUS, MENU_MIN_WIDTH, MENU_SEPARATOR_INSET } from "../system/_style-menu.js";
+import { ROW_DISABLED_OPACITY } from "../system/_style-row-disabled.js";
 import { OVERLAY_TITLE_VOICE } from "../system/_style-overlay-title.js";
 import { BODY_LEADING } from "../system/_style-body-leading.js";
 import { BODY_SIZE } from "../system/_style-body-size.js";
@@ -131,13 +132,13 @@ const overlayFooterClasses = "flex items-center justify-end gap-(--cue-space-3)
 * and the highlight are the style set's, with those as their defaults
 * (`_style-menu.ts`).
 */
-const menuItemClasses = `flex h-control-sm cursor-default items-center gap-(--cue-space-2) ${MENU_ITEM_RADIUS} px-(--cue-space-3) ${CONTROL_FACE} text-(length:--cue-text-ui) ${MENU_ITEM_INK} outline-none select-none data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
+const menuItemClasses = `flex h-control-sm cursor-default items-center gap-(--cue-space-2) ${MENU_ITEM_RADIUS} px-(--cue-space-3) ${CONTROL_FACE} text-(length:--cue-text-ui) ${MENU_ITEM_INK} outline-none select-none data-[highlighted]:text-fg data-[disabled]:pointer-events-none ${ROW_DISABLED_OPACITY}`;
 /** The uppercase mono caption over a group of menu rows — by default. */
-const menuLabelClasses = `flex h-control-sm items-center px-(--cue-space-3) ${LABEL_FACE} ${LABEL_SIZE} ${LABEL_TRACKING} ${LABEL_INK_SUBTLE} ${LABEL_WEIGHT} ${LABEL_CASE} select-none`;
+const menuLabelClasses = `flex h-control-sm items-center px-(--cue-space-3) ${GROUP_LABEL_PAD} ${LABEL_FACE} ${GROUP_LABEL_SIZE} ${LABEL_TRACKING} ${GROUP_LABEL_INK} ${LABEL_WEIGHT} ${LABEL_CASE} select-none`;
 /** The hairline between menu groups. */
-const menuSeparatorClasses = "my-(--cue-space-1) h-px bg-border";
+const menuSeparatorClasses = `my-(--cue-space-1) ${MENU_SEPARATOR_INSET} h-px bg-border`;
 /** Padding of a menu popup — a single space unit so rows reach the rim. */
-const menuPopupClasses = "min-w-[10rem] p-(--cue-space-1)";
+const menuPopupClasses = `${MENU_MIN_WIDTH} p-(--cue-space-1)`;
 /** Default gap in px between an anchored popup and its trigger. */
 const OVERLAY_SIDE_OFFSET = 4;
 //#endregion

package/dist/overlays/alert-dialog.js

@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 //#region src/overlays/alert-dialog.tsx
 /** Same geometry as a dialog; an alert is simply a narrower default. */
-const alertDialogPopupVariants = cva(`${overlaySurfaceClasses} ${overlayModalTransitionClasses} fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-(--cue-space-4) overflow-y-auto p-(--cue-space-6) outline-none`, {
+const alertDialogPopupVariants = cva(`${overlaySurfaceClasses} rounded-[calc(var(--cue-style-dialog-radius,var(--cue-radius-overlay))*var(--cue-radius-scale))] ${overlayModalTransitionClasses} fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-(--cue-space-4) overflow-y-auto p-(--cue-space-6) outline-none`, {
 	variants: { width: {
 		sm: "max-w-[20rem]",
 		md: "max-w-[26rem]",

package/dist/overlays/command-palette.js

@@ -1,12 +1,17 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { CONTROL_STEP_SIZE_BODY } from "../system/_style-control-step.js";
 import { LABEL_FACE } from "../system/_style-label-face.js";
 import { LABEL_CASE } from "../system/_style-label-case.js";
 import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import { SearchGlyph } from "./_glyphs.js";
 import { useCuePortalProps } from "../system/portal.js";
+import { GROUP_LABEL_INK_SUBTLE, GROUP_LABEL_SIZE_MICRO } from "../system/_style-group-label.js";
+import { MENU_ITEM_INK, MENU_ITEM_RADIUS } from "../system/_style-menu.js";
+import { ROW_DISABLED_OPACITY } from "../system/_style-row-disabled.js";
 import { overlayModalTransitionClasses, overlaySurfaceClasses, scrimClasses } from "./_surface.js";
+import { PALETTE_FOOTER_PAD, PALETTE_RULE } from "../system/_style-palette.js";
 import { useDebouncedValue } from "./_debounce.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -51,8 +56,18 @@ function groupCommands(items) {
 	}
 	return groups;
 }
-/** The row: same rhythm as a menu row, with a reserved gutter for the icon. */
-const commandItemClasses = `flex h-control-md cursor-default items-center gap-(--cue-space-3) rounded-control px-(--cue-space-3) ${CONTROL_FACE} text-(length:--cue-text-ui) text-fg-muted outline-none select-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
+/**
+* The palette's corner is a dialog's (round 6, spec §11, P152): coss's command
+* palette is a dialog, rounded at its 16px surface rung. The same class as
+* `dialog.tsx`'s `DIALOG_RADIUS`, kept in this file for that file's reason.
+*/
+const PALETTE_RADIUS = "rounded-[calc(var(--cue-style-dialog-radius,var(--cue-radius-overlay))*var(--cue-radius-scale))]";
+/**
+* The row: same rhythm as a menu row, with a reserved gutter for the icon. Its
+* ink, highlight and corner are a menu row's (round 6, spec §11, P152): coss's
+* command rows draw like its menu rows, in `fg` on 0.6 of the control corner.
+*/
+const commandItemClasses = `flex h-control-md cursor-default items-center gap-(--cue-space-3) ${MENU_ITEM_RADIUS} px-(--cue-space-3) ${CONTROL_FACE} text-(length:--cue-text-ui) ${MENU_ITEM_INK} outline-none select-none data-[highlighted]:text-fg data-[disabled]:pointer-events-none ${ROW_DISABLED_OPACITY}`;
 /**
 * The ⌘K surface: type a few letters, run a command.
 *
@@ -118,7 +133,7 @@ function CommandPalette({ items, onSelect, open: openProp, defaultOpen = false,
 			}), /* @__PURE__ */ jsxs(Dialog.Popup, {
 				"aria-label": label,
 				"data-slot": "command-palette-popup",
-				className: cn(overlaySurfaceClasses, overlayModalTransitionClasses, "fixed top-[14vh] left-1/2 z-50 flex max-h-[72vh] w-[min(35rem,92vw)] -translate-x-1/2 flex-col overflow-hidden outline-none", className),
+				className: cn(overlaySurfaceClasses, PALETTE_RADIUS, overlayModalTransitionClasses, "fixed top-[14vh] left-1/2 z-50 flex max-h-[72vh] w-[min(35rem,92vw)] -translate-x-1/2 flex-col overflow-hidden outline-none", className),
 				children: [/* @__PURE__ */ jsxs(Combobox.Root, {
 					items: groups,
 					filteredItems: filteredGroups,
@@ -136,7 +151,7 @@ function CommandPalette({ items, onSelect, open: openProp, defaultOpen = false,
 					children: [
 						/* @__PURE__ */ jsxs("div", {
 							"data-slot": "command-palette-field",
-							className: "flex h-control-lg shrink-0 items-center gap-(--cue-space-3) border-b border-border bg-sunken px-(--cue-space-4)",
+							className: `flex h-control-lg shrink-0 items-center gap-(--cue-space-3) border-b ${PALETTE_RULE} bg-sunken px-(--cue-space-4)`,
 							children: [/* @__PURE__ */ jsx(SearchGlyph, {
 								"aria-hidden": "true",
 								className: "size-icon-md shrink-0 text-fg-subtle"
@@ -144,7 +159,7 @@ function CommandPalette({ items, onSelect, open: openProp, defaultOpen = false,
 								"aria-label": label,
 								placeholder,
 								"data-slot": "command-palette-input",
-								className: cn("h-full w-full min-w-0 border-0 bg-transparent p-0 text-(length:--cue-text-body) text-fg outline-none placeholder:text-fg-subtle", CONTROL_FACE)
+								className: cn(`h-full w-full min-w-0 border-0 bg-transparent p-0 ${CONTROL_STEP_SIZE_BODY} text-fg outline-none placeholder:text-fg-subtle`, CONTROL_FACE)
 							})]
 						}),
 						/* @__PURE__ */ jsx(Combobox.Empty, {
@@ -154,12 +169,12 @@ function CommandPalette({ items, onSelect, open: openProp, defaultOpen = false,
 						}),
 						/* @__PURE__ */ jsx(Combobox.List, {
 							"data-slot": "command-palette-list",
-							className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-(--cue-space-1) outline-none",
+							className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-[var(--cue-style-listbox-pad,var(--cue-space-1))] outline-none",
 							children: (group) => /* @__PURE__ */ jsxs(Combobox.Group, {
 								items: group.items,
 								className: "block",
 								children: [group.value === "" ? null : /* @__PURE__ */ jsx(Combobox.GroupLabel, {
-									className: cn("flex h-control-sm items-center px-(--cue-space-3) text-(length:--cue-text-micro) text-fg-subtle select-none", LABEL_FACE, LABEL_TRACKING, LABEL_CASE),
+									className: cn(`flex h-control-sm items-center px-(--cue-space-3) ${GROUP_LABEL_SIZE_MICRO} ${GROUP_LABEL_INK_SUBTLE} select-none`, LABEL_FACE, LABEL_TRACKING, LABEL_CASE),
 									children: group.value
 								}), /* @__PURE__ */ jsx(Combobox.Collection, { children: (item) => /* @__PURE__ */ jsxs(Combobox.Item, {
 									value: item,
@@ -186,7 +201,7 @@ function CommandPalette({ items, onSelect, open: openProp, defaultOpen = false,
 					]
 				}), footer === null ? null : /* @__PURE__ */ jsx("div", {
 					"data-slot": "command-palette-footer",
-					className: cn("flex shrink-0 items-center gap-(--cue-space-4) border-t border-border bg-surface-1 px-(--cue-space-4) py-(--cue-space-2) text-(length:--cue-text-micro) text-fg-subtle select-none", CONTROL_FACE),
+					className: cn(`flex shrink-0 items-center gap-(--cue-space-4) border-t border-border bg-surface-1 px-(--cue-space-4) ${PALETTE_FOOTER_PAD} text-(length:--cue-text-micro) text-fg-subtle select-none`, CONTROL_FACE),
 					children: footer
 				})]
 			})]

package/dist/overlays/dialog.js

@@ -21,7 +21,7 @@ import { Dialog } from "@base-ui/react/dialog";
 * own `cn` drops the shared `rounded-overlay`: only the dialog reads the name,
 * and every other overlay keeps the rung.
 */
-const dialogPopupVariants = cva(`${overlaySurfaceClasses} rounded-[calc(var(--cue-style-dialog-radius,var(--cue-radius-overlay))*var(--cue-radius-scale))] ${overlayModalTransitionClasses} fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-(--cue-space-4) overflow-y-auto p-(--cue-space-6) outline-none`, {
+const dialogPopupVariants = cva(`${overlaySurfaceClasses} rounded-[calc(var(--cue-style-dialog-radius,var(--cue-radius-overlay))*var(--cue-radius-scale))] ${overlayModalTransitionClasses} fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-(--cue-space-4) overflow-y-auto p-[calc(var(--cue-space-6)*var(--cue-style-dialog-pad,1))] outline-none`, {
 	variants: { width: {
 		sm: "max-w-[20rem]",
 		md: "max-w-[28rem]",

package/dist/overlays/drawer.js

@@ -27,6 +27,13 @@ const VIEWPORT_ALIGNMENT = {
 * sheet track the finger and then settle, rather than snapping when the gesture
 * ends.
 */
+/**
+* A drawer's corners are a dialog's (round 6, spec §11, P155.radius): coss.com/ui
+* rounds its drawer's open edge at its 16px surface rung, as it rounds a dialog.
+* The same class as `dialog.tsx`'s `DIALOG_RADIUS`, kept in this file for that
+* file's reason; the attached edge's `rounded-*-none` still squares that side.
+*/
+const DRAWER_RADIUS = "rounded-[calc(var(--cue-style-dialog-radius,var(--cue-radius-overlay))*var(--cue-radius-scale))]";
 const POPUP_GEOMETRY = {
 	down: "max-h-[85vh] w-full max-w-[42rem] translate-y-(--drawer-swipe-movement-y) rounded-b-none border-x-0 border-b-0 data-[starting-style]:translate-y-full data-[ending-style]:translate-y-full",
 	up: "max-h-[85vh] w-full max-w-[42rem] translate-y-(--drawer-swipe-movement-y) rounded-t-none border-x-0 border-t-0 data-[starting-style]:-translate-y-full data-[ending-style]:-translate-y-full",
@@ -99,7 +106,7 @@ const Drawer$1 = {
 				children: /* @__PURE__ */ jsxs(Drawer.Popup, {
 					ref,
 					"data-slot": "drawer-popup",
-					className: cn(overlaySurfaceClasses, "flex flex-col overflow-y-auto overscroll-contain outline-none transition-transform duration-200 ease-out data-[swiping]:duration-0 motion-reduce:transition-none", POPUP_GEOMETRY[direction], className),
+					className: cn(overlaySurfaceClasses, DRAWER_RADIUS, "flex flex-col overflow-y-auto overscroll-contain outline-none transition-transform duration-200 ease-out data-[swiping]:duration-0 motion-reduce:transition-none", POPUP_GEOMETRY[direction], className),
 					...popupProps,
 					children: [grabHandle ? /* @__PURE__ */ jsx("div", {
 						"data-slot": "drawer-grab-handle",

package/dist/overlays/hover-card.js

@@ -4,6 +4,8 @@ import { useComposedRefs } from "../lib/compose.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "./_surface.js";
 import { useCloseOnWheel } from "./_wheel.js";
+import { HOVER_CARD_WIDTH } from "../system/_style-hover-card-width.js";
+import { POPOVER_PAD } from "../system/_style-popover-pad.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
@@ -79,7 +81,7 @@ const HoverCard = {
 				children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
 					ref: composedRef,
 					"data-slot": "hover-card-popup",
-					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, "flex w-[min(20rem,calc(100vw-2rem))] flex-col gap-(--cue-space-2) p-(--cue-space-4) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none", className),
+					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, `flex ${HOVER_CARD_WIDTH} flex-col gap-(--cue-space-2) ${POPOVER_PAD} font-mono text-(length:--cue-text-ui) text-fg-muted outline-none`, className),
 					...popupProps,
 					children
 				})

package/dist/overlays/popover.js

@@ -5,6 +5,7 @@ import { useCuePortalProps } from "../system/portal.js";
 import { overlayDescriptionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTitleClasses } from "./_surface.js";
 import { useCloseOnWheel } from "./_wheel.js";
 import { POPOVER_PAD } from "../system/_style-popover-pad.js";
+import { POPOVER_WIDTH } from "../system/_style-popover-width.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
@@ -79,7 +80,7 @@ const Popover$1 = {
 				children: /* @__PURE__ */ jsx(Popover.Popup, {
 					ref: composedRef,
 					"data-slot": "popover-popup",
-					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, `flex max-w-[calc(100vw-2rem)] flex-col gap-(--cue-space-3) ${POPOVER_PAD} outline-none`, className),
+					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, `flex ${POPOVER_WIDTH} max-w-[calc(100vw-2rem)] flex-col gap-(--cue-space-3) ${POPOVER_PAD} outline-none`, className),
 					...popupProps,
 					children
 				})

package/dist/overlays/toast.js

@@ -6,7 +6,11 @@ import { LABEL_CASE } from "../system/_style-label-case.js";
 import { LABEL_TRACKING_TIGHT } from "../system/_style-label-tracking.js";
 import { CrossGlyph } from "./_glyphs.js";
 import { useCuePortalProps } from "../system/portal.js";
+import { BODY_FACE, BODY_VOICE } from "../system/_style-body.js";
+import { BODY_LEADING } from "../system/_style-body-leading.js";
+import { BODY_SIZE, BODY_SIZE_LABEL } from "../system/_style-body-size.js";
 import { overlaySurfaceClasses } from "./_surface.js";
+import { TOAST_PAD_X, TOAST_PAD_Y, TOAST_WIDTH } from "../system/_style-toast.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toast } from "@base-ui/react/toast";
@@ -79,15 +83,15 @@ function ToastItem({ toast, className, closeLabel }) {
 	return /* @__PURE__ */ jsxs(Toast.Root, {
 		toast,
 		"data-slot": "toast-root",
-		className: cn(overlaySurfaceClasses, "relative flex flex-col gap-(--cue-space-1) border-l-2 py-(--cue-space-3) pr-(--cue-space-6) pl-(--cue-space-4) outline-none", "transition-[opacity,translate] duration-150 ease-out motion-reduce:transition-none", "data-[starting-style]:translate-x-2 data-[starting-style]:opacity-0", "data-[ending-style]:translate-x-2 data-[ending-style]:opacity-0", "data-[limited]:hidden", TOAST_TONE_RAIL[toToastTone(toast.type)], className),
+		className: cn(overlaySurfaceClasses, `relative flex flex-col gap-(--cue-space-1) border-l-2 ${TOAST_PAD_Y} pr-(--cue-space-6) ${TOAST_PAD_X} outline-none`, "transition-[opacity,translate] duration-150 ease-out motion-reduce:transition-none", "data-[starting-style]:translate-x-2 data-[starting-style]:opacity-0", "data-[ending-style]:translate-x-2 data-[ending-style]:opacity-0", "data-[limited]:hidden", TOAST_TONE_RAIL[toToastTone(toast.type)], className),
 		children: [
 			/* @__PURE__ */ jsx(Toast.Title, {
 				"data-slot": "toast-title",
-				className: "font-mono text-(length:--cue-text-ui) font-medium text-fg"
+				className: `${BODY_FACE} ${BODY_SIZE} font-medium text-fg`
 			}),
 			/* @__PURE__ */ jsx(Toast.Description, {
 				"data-slot": "toast-description",
-				className: "font-mono text-(length:--cue-text-label) leading-(--cue-leading-ui) text-fg-muted"
+				className: `${BODY_VOICE} ${BODY_SIZE_LABEL} ${BODY_LEADING} text-fg-muted`
 			}),
 			/* @__PURE__ */ jsx(Toast.Action, {
 				"data-slot": "toast-action",
@@ -119,7 +123,7 @@ function ToastViewport({ className, toastClassName, closeLabel = "Dismiss" }) {
 		...portalProps,
 		children: /* @__PURE__ */ jsx(Toast.Viewport, {
 			"data-slot": "toast-viewport",
-			className: cn("fixed right-(--cue-space-6) bottom-(--cue-space-6) z-50 flex w-[20rem] max-w-[calc(100vw-2rem)] flex-col-reverse gap-(--cue-space-3) outline-none", className),
+			className: cn(`fixed right-(--cue-space-6) bottom-(--cue-space-6) z-50 flex ${TOAST_WIDTH} max-w-[calc(100vw-2rem)] flex-col-reverse gap-(--cue-space-3) outline-none`, className),
 			children: toasts.map((toast) => /* @__PURE__ */ jsx(ToastItem, {
 				toast,
 				className: toastClassName,

package/dist/overlays/tooltip.js

@@ -1,10 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { BODY_WEIGHT } from "../system/_style-body-weight.js";
 import { useCuePortalProps } from "../system/portal.js";
-import { BODY_LEADING } from "../system/_style-body-leading.js";
 import { overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "./_surface.js";
-import { TOOLTIP_PAD, TOOLTIP_SIZE } from "../system/_style-tooltip.js";
+import { TOOLTIP_FACE, TOOLTIP_INK, TOOLTIP_LEADING, TOOLTIP_PAD, TOOLTIP_RADIUS, TOOLTIP_SIZE, TOOLTIP_TRACKING } from "../system/_style-tooltip.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
@@ -86,7 +85,7 @@ const Tooltip$1 = {
 					id,
 					role: "tooltip",
 					"data-slot": "tooltip-popup",
-					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, `max-w-[16rem] ${TOOLTIP_PAD} ${TOOLTIP_SIZE} ${BODY_LEADING} text-fg`, CONTROL_FACE, className),
+					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, `max-w-[16rem] ${TOOLTIP_RADIUS} ${TOOLTIP_PAD} ${TOOLTIP_SIZE} ${TOOLTIP_LEADING} ${BODY_WEIGHT} ${TOOLTIP_TRACKING} ${TOOLTIP_INK}`, TOOLTIP_FACE, className),
 					...popupProps,
 					children
 				})

package/dist/primitives/avatar.js

@@ -1,14 +1,18 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { cva } from "../lib/cva.js";
+import { CAPTION_SIZE_LABEL } from "../system/_style-caption-size.js";
+import { CAPTION_INK_MUTED } from "../system/_style-caption-ink.js";
+import { CAPTION_WEIGHT } from "../system/_style-caption-weight.js";
+import { AVATAR_EDGE, AVATAR_RADIUS } from "../system/_style-avatar.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar } from "@base-ui/react/avatar";
 //#region src/primitives/avatar.tsx
-const avatarVariants = cva("relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full border border-border bg-surface-2 font-mono leading-none tracking-normal text-fg-muted uppercase", {
+const avatarVariants = cva(`relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden ${AVATAR_RADIUS} border ${AVATAR_EDGE} bg-surface-2 font-mono leading-none tracking-normal ${CAPTION_INK_MUTED} ${CAPTION_WEIGHT} uppercase`, {
 	variants: { size: {
 		sm: "size-control-sm text-(length:--cue-text-micro)",
-		md: "size-control-md text-(length:--cue-text-label)",
+		md: `size-control-md ${CAPTION_SIZE_LABEL}`,
 		lg: "size-control-lg text-(length:--cue-text-ui)"
 	} },
 	defaultVariants: { size: "md" }

package/dist/primitives/button.d.ts

@@ -20,7 +20,7 @@ import { useRender } from "@base-ui/react/use-render";
  * <a className={buttonVariants({ variant: "primary", size: "sm" })} href="/go">Go</a>
  */
 declare const buttonVariants: (props?: ({
-  variant?: "ghost" | "primary" | "secondary" | "outline" | "danger" | "danger-outline" | null | undefined;
+  variant?: "danger-outline" | "ghost" | "primary" | "secondary" | "outline" | "danger" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 interface ButtonProps extends React.ComponentPropsWithoutRef<"button">, VariantProps<typeof buttonVariants> {