@cueplusplus/ui 0.17.0 → 0.18.0

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> {

package/dist/primitives/button.js

@@ -3,10 +3,13 @@ import { cn } from "../lib/cn.js";
 import { FOCUS_RING_PAINT } from "../system/_focus-ring.js";
 import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { REST_SHADE_CLASS } from "../system/_paint-rest-shade.js";
+import { DISABLED_OPACITY, DISABLED_TONES } from "../system/_style-disabled.js";
 import { cva } from "../lib/cva.js";
 import { CONTROL_STEP_SIZE_LG } from "../system/_style-control-step.js";
 import { GLOW_CLASSES, GLOW_DANGER_CLASSES } from "../system/_paint-glow.js";
 import { CONTROL_CASE, CONTROL_PAD_LG, CONTROL_PAD_MD, CONTROL_PAD_SM, CONTROL_TRACKING, CONTROL_TRIM, CONTROL_WEIGHT, GHOST_INK, OUTLINE_EDGE, OUTLINE_INK, SECONDARY_EDGE, SECONDARY_GROUND, SECONDARY_INK } from "../system/_style-control.js";
+import { CONTROL_GAP } from "../system/_style-control-gap.js";
+import { OUTLINE_HOVER_EDGE, OUTLINE_HOVER_GROUND } from "../system/_style-outline-hover.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
@@ -35,7 +38,7 @@ import { useRender } from "@base-ui/react/use-render";
 *
 * @internal Not part of the public API; imported by `icon-button.tsx`.
 */
-const buttonChassis = `inline-flex select-none items-center justify-center gap-[0.4em] whitespace-nowrap rounded-control ${CONTROL_FACE} ${CONTROL_WEIGHT} ${CONTROL_TRACKING} ${CONTROL_TRIM} ${CONTROL_CASE} transition-colors duration-150 outline-none ${FOCUS_RING_PAINT} focus-visible:outline-offset-[var(--cue-style-focus-offset,1px)] disabled:pointer-events-none disabled:opacity-40`;
+const buttonChassis = `inline-flex select-none items-center justify-center ${CONTROL_GAP} whitespace-nowrap rounded-control ${CONTROL_FACE} ${CONTROL_WEIGHT} ${CONTROL_TRACKING} ${CONTROL_TRIM} ${CONTROL_CASE} transition-colors duration-150 outline-none ${FOCUS_RING_PAINT} focus-visible:outline-offset-[var(--cue-style-focus-offset,1px)] disabled:pointer-events-none ${DISABLED_OPACITY}`;
 /**
 * The shared colour vocabulary. `accent` is theme-controlled, so `primary`
 * reads as white-on-black in `cue` and cyan-on-near-black in `terminal` with no
@@ -54,12 +57,12 @@ const buttonChassis = `inline-flex select-none items-center justify-center gap-[
 * @internal Not part of the public API; imported by `icon-button.tsx`.
 */
 const buttonTones = {
-	primary: `bg-accent-fill text-accent-fill-fg hover:bg-accent-fill-hover border border-transparent ${GLOW_CLASSES}`,
-	secondary: `border ${SECONDARY_EDGE} ${SECONDARY_INK} hover:text-[color:var(--cue-style-secondary-hover-ink,var(--cue-fg))] hover:border-[color:var(--cue-style-secondary-hover-edge,var(--cue-border-strong))] ${SECONDARY_GROUND}`,
-	ghost: `${GHOST_INK} hover:text-fg hover:bg-surface-2 border border-transparent`,
-	outline: `border ${OUTLINE_EDGE} ${OUTLINE_INK} hover:border-accent hover:text-accent bg-transparent ${REST_SHADE_CLASS}`,
-	danger: `bg-danger text-danger-fg hover:opacity-90 border border-transparent ${GLOW_DANGER_CLASSES}`,
-	"danger-outline": "border text-danger bg-transparent hover:bg-danger/10 border-danger/40"
+	primary: `bg-accent-fill text-accent-fill-fg hover:bg-accent-fill-hover border border-transparent ${GLOW_CLASSES} ${DISABLED_TONES.primary}`,
+	secondary: `border ${SECONDARY_EDGE} ${SECONDARY_INK} hover:text-[color:var(--cue-style-secondary-hover-ink,var(--cue-fg))] hover:border-[color:var(--cue-style-secondary-hover-edge,var(--cue-border-strong))] ${SECONDARY_GROUND} hover:bg-[color:var(--cue-style-secondary-hover-ground,var(--cue-style-secondary-ground,var(--cue-surface-2)))] ${DISABLED_TONES.secondary}`,
+	ghost: `${GHOST_INK} hover:text-fg hover:bg-surface-2 border border-transparent ${DISABLED_TONES.ghost}`,
+	outline: `border ${OUTLINE_EDGE} ${OUTLINE_INK} ${OUTLINE_HOVER_EDGE} hover:text-accent bg-transparent ${OUTLINE_HOVER_GROUND} ${REST_SHADE_CLASS} ${DISABLED_TONES.outline}`,
+	danger: `bg-danger text-danger-fg hover:opacity-90 border border-transparent ${GLOW_DANGER_CLASSES} ${DISABLED_TONES.danger}`,
+	"danger-outline": `border text-danger bg-transparent hover:bg-danger/10 border-danger/40 ${DISABLED_TONES["danger-outline"]}`
 };
 /**
 * The `Button` class recipe, exported so other surfaces (a link that must look

package/dist/primitives/chip.d.ts

@@ -1,42 +1,6 @@
 import { ClassProp, VariantProps } from "../lib/cva.js";
 import * as React from "react";
 //#region src/primitives/chip.d.ts
-/**
- * The tinted-chip recipe: `bg-<tone>/10 border-<tone>/35 text-<tone>`, and the
- * two quieter readings of it — `outline`, which drops the fill, and `tag`,
- * which drops the fill and the voice with it.
- *
- * Every property that varies is emitted from exactly one place: one rim, one
- * ink, one fill, one gutter, one type size, always. Emitting `bg-<tone>/10`
- * from the tone map and then cancelling it with `bg-transparent` would leave
- * two competing utilities in the class string, and `chipVariants` is exported —
- * a caller who uses it without `cn` gets a raw string where the winner is
- * decided by stylesheet order rather than by which utility was written last.
- * `h-chip h-4` proves the point at the other end: `tailwind-merge` cannot even
- * see that as a conflict, because `chip` is a token name and not a scale step.
- * So nothing here cancels anything. What varies moves into `variants` or
- * `compoundVariants` until only one of it is ever emitted.
- *
- * That is why `neutral` carries no rim of its own. The other six tones rim
- * themselves at `/35` in all three variants, but the neutral line has two
- * weights in this system: `--cue-border` is a box edge, and a chip is a box;
- * `--cue-hair-strong` is the rule between things, and a tag is a mark on the
- * page rather than a container. The rim is therefore a compound of tone and
- * variant, exactly as the fill is.
- *
- * **The recipe reads the style set** (spec 2026-09-26-looks-fidelity §3.6,
- * `system/_style-chip.ts`): the six tones' fill and rim are
- * `color-mix(in oklab, var(--cue-<tone>) var(--cue-style-chip-fill, 10%), transparent)`
- * and the same with `--cue-style-chip-edge` at `35%` — exactly `bg-<tone>/10`
- * and `border-<tone>/35` under no set, and a set's own shares inside one. The
- * case, tracking, radius, size and weight read `--cue-style-chip-case`,
- * `-tracking`, `-radius`, `-size` and `--cue-style-label-weight` the same way.
- *
- * @example
- * <span className={chipVariants({ tone: "danger", variant: "outline" })}>fault</span>
- * @example
- * <span className={chipVariants({ variant: "tag" })}>mcp</span>
- */
 declare const chipVariants: (props?: ({
   tone?: "danger" | "info" | "warn" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
   variant?: "outline" | "tinted" | "tag" | null | undefined;