@cueplusplus/ui 0.16.0 → 0.18.0

package/dist/primitives/button.d.ts

@@ -6,11 +6,21 @@ import { useRender } from "@base-ui/react/use-render";
  * The `Button` class recipe, exported so other surfaces (a link that must look
  * like a button, a third-party trigger) can borrow the exact same classes.
  *
+ * **It returns the recipe unmerged**, and its `className` option only appends.
+ * A class concatenated onto it — by a template string, `clsx`, or that option —
+ * does not replace the recipe's own; the two compete by the order Tailwind
+ * emits them in, which is not a contract. The inline padding in particular is
+ * a `px-[calc(…)]` reader of the style set's `style-control-pad`, and Tailwind
+ * emits it after every numeric `px-*`, so a concatenated `px-2` no longer wins
+ * the way it did over the `px-(--cue-space-*)` rung it replaced. To override a
+ * class of the recipe, pass `className` to `Button` itself, which merges, or
+ * merge the result with `tailwind-merge`.
+ *
  * @example
  * <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> {
@@ -47,6 +57,11 @@ interface ButtonProps extends React.ComponentPropsWithoutRef<"button">, VariantP
  * The focus ring is an `outline`, never a `box-shadow`, so it survives inside
  * `overflow: hidden` panels.
  *
+ * `className` is merged with `tailwind-merge`, so a caller's `px-2`,
+ * `font-semibold` or `shadow-none` replaces the class the recipe set for the
+ * same property. Only here: `buttonVariants()` concatenates, and says what that
+ * costs.
+ *
  * @example
  * <Button variant="primary" size="sm" icon={Play}>Run cue</Button>
  * @example

package/dist/primitives/button.js

@@ -1,13 +1,24 @@
 "use client";
 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 { GLOW_CLASSES } from "../system/_paint-glow.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";
 //#region src/primitives/button.tsx
 /**
-* The chassis every control-shaped primitive shares: layout, mono type, the
+* The chassis every control-shaped primitive shares: layout, the control face
+* (mono, unless a style set names another — `CONTROL_FACE` says why), the
+* control's weight, tracking, label trim and case (500, `normal`, `normal` and
+* `none` unless a style set names others — `_style-control.ts` says why), the
 * density radius, the transition and the focus ring. Deliberately carries no
 * size and no colour so `Button` (height + horizontal padding) and `IconButton`
 * (one square token) can each add their own without fighting `tailwind-merge`.
@@ -19,9 +30,15 @@ import { useRender } from "@base-ui/react/use-render";
 * Restoring the style at ring time is what makes the focus indicator exist
 * (WCAG 2.4.7). `test/focus-ring.test.ts` guards every occurrence.
 *
+* The ring's width and colour are {@link FOCUS_RING_PAINT} — `_focus-ring.ts`
+* says why every site but this one reads a fixed offset from there too. This
+* one reads `--cue-style-focus-offset` instead, because the offset here is a
+* style-set knob (kiln pulls it to -1px) rather than one of that module's three
+* fixed shapes; `1px` is the offset this chassis drew before either existed.
+*
 * @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-(--radius-control) font-mono font-medium transition-colors duration-150 outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent 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
@@ -40,17 +57,27 @@ 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 text-accent-fg hover:bg-accent-hover border border-transparent ${GLOW_CLASSES}`,
-	secondary: "border border-border text-fg-muted hover:border-border-strong hover:text-fg bg-surface-2",
-	ghost: "text-fg-muted hover:text-fg hover:bg-surface-2 border border-transparent",
-	outline: "border border-border text-fg hover:border-accent hover:text-accent bg-transparent",
-	danger: "bg-danger text-danger-fg hover:opacity-90 border border-transparent",
-	"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
 * like a button, a third-party trigger) can borrow the exact same classes.
 *
+* **It returns the recipe unmerged**, and its `className` option only appends.
+* A class concatenated onto it — by a template string, `clsx`, or that option —
+* does not replace the recipe's own; the two compete by the order Tailwind
+* emits them in, which is not a contract. The inline padding in particular is
+* a `px-[calc(…)]` reader of the style set's `style-control-pad`, and Tailwind
+* emits it after every numeric `px-*`, so a concatenated `px-2` no longer wins
+* the way it did over the `px-(--cue-space-*)` rung it replaced. To override a
+* class of the recipe, pass `className` to `Button` itself, which merges, or
+* merge the result with `tailwind-merge`.
+*
 * @example
 * <a className={buttonVariants({ variant: "primary", size: "sm" })} href="/go">Go</a>
 */
@@ -58,9 +85,9 @@ const buttonVariants = cva(buttonChassis, {
 	variants: {
 		variant: buttonTones,
 		size: {
-			sm: "h-control-sm px-(--cue-space-4) text-(length:--cue-text-ui)",
-			md: "h-control-md px-(--cue-space-5) text-(length:--cue-text-ui)",
-			lg: "h-control-lg px-(--cue-space-6) text-(length:--cue-text-emphasis)"
+			sm: `h-control-sm ${CONTROL_PAD_SM} text-(length:--cue-text-ui)`,
+			md: `h-control-md ${CONTROL_PAD_MD} text-(length:--cue-text-ui)`,
+			lg: `h-control-lg ${CONTROL_PAD_LG} ${CONTROL_STEP_SIZE_LG}`
 		}
 	},
 	defaultVariants: {
@@ -76,6 +103,11 @@ const buttonVariants = cva(buttonChassis, {
 * The focus ring is an `outline`, never a `box-shadow`, so it survives inside
 * `overflow: hidden` panels.
 *
+* `className` is merged with `tailwind-merge`, so a caller's `px-2`,
+* `font-semibold` or `shadow-none` replaces the class the recipe set for the
+* same property. Only here: `buttonVariants()` concatenates, and says what that
+* costs.
+*
 * @example
 * <Button variant="primary" size="sm" icon={Play}>Run cue</Button>
 * @example

package/dist/primitives/chip.d.ts

@@ -1,34 +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.
- *
- * @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;
@@ -46,7 +18,17 @@ interface ChipProps extends React.HTMLAttributes<HTMLElement>, VariantProps<type
   children?: React.ReactNode;
 }
 /**
- * A compact status/label pill: mono, uppercase, wide-tracked, one line tall.
+ * A compact status/label pill: mono, uppercase, wide-tracked, one line tall —
+ * by default, the style set's choice inside one.
+ *
+ * A chip speaks in the label voice: it reads the label face
+ * (`--cue-style-label-face`) and its own case (`--cue-style-chip-case`, which
+ * falls back to the label case), so under a sans, sentence-case Look its text
+ * is sans and sentence case like the captions around it. This reverses the
+ * earlier ruling that a tag's text is the value being shown and stays mono
+ * (spec 2026-09-26-looks-fidelity F-15): under a sans Look a mono uppercase
+ * chip was the most visible console voice left on the page. A consumer that
+ * wants a chip mono under every set passes `className="font-mono uppercase"`.
  *
  * `tone` uses the shared status vocabulary (`ok | busy | warn | danger | info`)
  * plus `neutral` and `accent`, so a chip, a `StatusDot` and a `Meter` always

package/dist/primitives/chip.js

@@ -1,52 +1,27 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { cva } from "../lib/cva.js";
+import { CHIP_CASE, CHIP_EDGE, CHIP_FILL, CHIP_GAP, CHIP_HEIGHT, CHIP_INK_NEUTRAL, CHIP_LEADING, CHIP_LEADING_INHERIT, CHIP_PAD, CHIP_RADIUS, CHIP_SIZE, CHIP_SIZE_MICRO, CHIP_TRACKING, CHIP_TRACKING_TAG, TAG_EDGE, TAG_PAD } from "../system/_style-chip.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_WEIGHT } from "../system/_style-label-weight.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/primitives/chip.tsx
-/**
-* 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.
-*
-* @example
-* <span className={chipVariants({ tone: "danger", variant: "outline" })}>fault</span>
-* @example
-* <span className={chipVariants({ variant: "tag" })}>mcp</span>
-*/
-const chipVariants = cva("inline-flex h-chip select-none items-center justify-center gap-(--cue-space-2) whitespace-nowrap rounded-(--radius-control) border font-mono leading-none uppercase outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", {
+const chipVariants = cva(`inline-flex ${CHIP_HEIGHT} select-none items-center justify-center ${CHIP_GAP} whitespace-nowrap ${CHIP_RADIUS} border ${LABEL_FACE} ${LABEL_WEIGHT} ${CHIP_CASE} outline-none ${FOCUS_RING}`, {
 	variants: {
 		tone: {
-			neutral: "text-fg-muted",
-			accent: "border-accent/35 text-accent",
-			ok: "border-ok/35 text-ok",
-			busy: "border-busy/35 text-busy",
-			warn: "border-warn/35 text-warn",
-			danger: "border-danger/35 text-danger",
-			info: "border-info/35 text-info"
+			neutral: CHIP_INK_NEUTRAL,
+			accent: `${CHIP_EDGE.accent} text-accent`,
+			ok: `${CHIP_EDGE.ok} text-ok`,
+			busy: `${CHIP_EDGE.busy} text-busy`,
+			warn: `${CHIP_EDGE.warn} text-warn`,
+			danger: `${CHIP_EDGE.danger} text-danger`,
+			info: `${CHIP_EDGE.info} text-info`
 		},
 		variant: {
-			tinted: "px-(--cue-space-3) text-(length:--cue-text-label) tracking-(--cue-tracking-caps)",
-			outline: "bg-transparent px-(--cue-space-3) text-(length:--cue-text-label) tracking-(--cue-tracking-caps)",
-			tag: "bg-transparent px-(--cue-space-2) text-(length:--cue-text-micro) tracking-[0.06em]"
+			tinted: `${CHIP_PAD} ${CHIP_SIZE} ${CHIP_LEADING} ${CHIP_TRACKING}`,
+			outline: `bg-transparent ${CHIP_PAD} ${CHIP_SIZE} ${CHIP_LEADING} ${CHIP_TRACKING}`,
+			tag: `bg-transparent ${TAG_PAD} ${CHIP_SIZE_MICRO} ${CHIP_LEADING} ${CHIP_TRACKING_TAG}`
 		},
 		interactive: {
 			true: "cursor-pointer disabled:pointer-events-none disabled:opacity-40",
@@ -56,13 +31,18 @@ const chipVariants = cva("inline-flex h-chip select-none items-center justify-ce
 	compoundVariants: [
 		{
 			tone: "neutral",
-			variant: ["tinted", "outline"],
+			variant: "tinted",
 			class: "border-border"
 		},
+		{
+			tone: "neutral",
+			variant: "outline",
+			class: "border-[color:var(--cue-style-outline-edge,var(--cue-border))]"
+		},
 		{
 			tone: "neutral",
 			variant: "tag",
-			class: "border-(--cue-hair-strong)"
+			class: TAG_EDGE
 		},
 		{
 			tone: "neutral",
@@ -72,32 +52,32 @@ const chipVariants = cva("inline-flex h-chip select-none items-center justify-ce
 		{
 			tone: "accent",
 			variant: "tinted",
-			class: "bg-accent/10"
+			class: CHIP_FILL.accent
 		},
 		{
 			tone: "ok",
 			variant: "tinted",
-			class: "bg-ok/10"
+			class: CHIP_FILL.ok
 		},
 		{
 			tone: "busy",
 			variant: "tinted",
-			class: "bg-busy/10"
+			class: CHIP_FILL.busy
 		},
 		{
 			tone: "warn",
 			variant: "tinted",
-			class: "bg-warn/10"
+			class: CHIP_FILL.warn
 		},
 		{
 			tone: "danger",
 			variant: "tinted",
-			class: "bg-danger/10"
+			class: CHIP_FILL.danger
 		},
 		{
 			tone: "info",
 			variant: "tinted",
-			class: "bg-info/10"
+			class: CHIP_FILL.info
 		},
 		{
 			tone: "neutral",
@@ -191,7 +171,17 @@ const chipVariants = cva("inline-flex h-chip select-none items-center justify-ce
 	}
 });
 /**
-* A compact status/label pill: mono, uppercase, wide-tracked, one line tall.
+* A compact status/label pill: mono, uppercase, wide-tracked, one line tall —
+* by default, the style set's choice inside one.
+*
+* A chip speaks in the label voice: it reads the label face
+* (`--cue-style-label-face`) and its own case (`--cue-style-chip-case`, which
+* falls back to the label case), so under a sans, sentence-case Look its text
+* is sans and sentence case like the captions around it. This reverses the
+* earlier ruling that a tag's text is the value being shown and stays mono
+* (spec 2026-09-26-looks-fidelity F-15): under a sans Look a mono uppercase
+* chip was the most visible console voice left on the page. A consumer that
+* wants a chip mono under every set passes `className="font-mono uppercase"`.
 *
 * `tone` uses the shared status vocabulary (`ok | busy | warn | danger | info`)
 * plus `neutral` and `accent`, so a chip, a `StatusDot` and a `Meter` always
@@ -218,7 +208,7 @@ const Chip = React.forwardRef(function Chip({ className, tone, variant, interact
 		tone,
 		variant,
 		interactive
-	}), className);
+	}), CHIP_LEADING_INHERIT, className);
 	if (interactive) return /* @__PURE__ */ jsx("button", {
 		ref,
 		type: "button",

package/dist/primitives/icon-button.d.ts

@@ -8,7 +8,7 @@ import { useRender } from "@base-ui/react/use-render";
  * every density.
  */
 declare const iconButtonVariants: (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 IconButtonProps extends Omit<React.ComponentPropsWithoutRef<"button">, "children">, VariantProps<typeof iconButtonVariants> {

package/dist/primitives/kbd.d.ts

@@ -9,6 +9,12 @@ type KbdProps = React.ComponentPropsWithoutRef<"kbd">;
  * chip height so a `Kbd` and a `Chip` line up on the same row, and set in the
  * micro type step because shortcut hints are reference material, not content.
  *
+ * A key label is a control's voice, so it wears the control face
+ * (`--cue-style-control-face`, mono by default) rather than a fixed mono
+ * (spec 2026-09-26-looks-fidelity F-16), and a style set can move its rim
+ * (`--cue-style-kbd-edge`), its size (`--cue-style-chip-size`, shared with the
+ * chip it sits beside) and its weight (`--cue-style-label-weight`).
+ *
  * @example
  * <span>Press <Kbd>⌘</Kbd><Kbd>K</Kbd> to search</span>
  */

package/dist/primitives/kbd.js

@@ -1,4 +1,7 @@
 import { cn } from "../lib/cn.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { LABEL_WEIGHT } from "../system/_style-label-weight.js";
+import { KBD_BOX, KBD_EDGE, KBD_FILL, KBD_LEADING, KBD_SIZE } from "../system/_style-kbd.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/kbd.tsx
@@ -9,13 +12,19 @@ import { jsx } from "react/jsx-runtime";
 * chip height so a `Kbd` and a `Chip` line up on the same row, and set in the
 * micro type step because shortcut hints are reference material, not content.
 *
+* A key label is a control's voice, so it wears the control face
+* (`--cue-style-control-face`, mono by default) rather than a fixed mono
+* (spec 2026-09-26-looks-fidelity F-16), and a style set can move its rim
+* (`--cue-style-kbd-edge`), its size (`--cue-style-chip-size`, shared with the
+* chip it sits beside) and its weight (`--cue-style-label-weight`).
+*
 * @example
 * <span>Press <Kbd>⌘</Kbd><Kbd>K</Kbd> to search</span>
 */
 const Kbd = React.forwardRef(function Kbd({ className, children, ...elementProps }, ref) {
 	return /* @__PURE__ */ jsx("kbd", {
 		ref,
-		className: cn("inline-flex h-chip min-w-chip select-none items-center justify-center rounded-(--radius-control) border border-border bg-surface-2 px-(--cue-space-2) font-mono text-(length:--cue-text-micro) leading-none text-fg-muted", className),
+		className: cn(`inline-flex ${KBD_BOX} select-none items-center justify-center border ${KBD_FILL} text-fg-muted`, KBD_EDGE, CONTROL_FACE, KBD_SIZE, KBD_LEADING, LABEL_WEIGHT, className),
 		...elementProps,
 		children
 	});

package/dist/primitives/skeleton.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { SKELETON_RADIUS } from "../system/_style-skeleton.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/skeleton.tsx
@@ -19,7 +20,7 @@ const Skeleton = React.forwardRef(function Skeleton({ className, ...elementProps
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		"aria-hidden": "true",
-		className: cn("animate-pulse rounded-(--radius-control) bg-surface-2 motion-reduce:animate-none", className),
+		className: cn(`animate-pulse ${SKELETON_RADIUS} bg-surface-2 motion-reduce:animate-none`, className),
 		...elementProps
 	});
 });

package/dist/system/_focus-ring-field.js

@@ -0,0 +1,29 @@
+//#region src/system/_focus-ring-field.ts
+/**
+* `FOCUS_RING_INSET` (`_focus-ring.ts`) with its offset read from the style set: the
+* recessed field chassis's ring (`forms/_chassis.ts`), and nothing else.
+*
+* Plan V.2, T25: Tender's field ring sits flush on the rim (`0px`) where every
+* other site of the inset shape keeps its `-1px`, so the offset is a name of
+* its own — `style-field-focus-offset`, falling back to the `-1px`
+* `FOCUS_RING_INSET` draws — and not `style-focus-offset`, which is the
+* button chassis's (kiln pulls that to `-1px`, and a field that followed it
+* would move with the buttons). `FOCUS_RING_INSET` keeps its fixed offset
+* for its ten other consumers.
+*
+* Its own module, not a constant in `_focus-ring.ts`: docgen attributes a
+* token to a component by the file its class string lives in, and every
+* focusable component imports that module.
+*
+* @internal Not part of the public API.
+*/
+const FOCUS_RING_FIELD = "focus-visible:outline-solid focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] focus-visible:outline-(--cue-focus) focus-visible:outline-offset-[var(--cue-style-field-focus-offset,-1px)]";
+/**
+* `FOCUS_RING_GROUP_INSET` with {@link FOCUS_RING_FIELD}'s offset: the
+* grouped field's ring reads `style-field-focus-offset` as the field it wraps
+* does (plan V.2, T25), so a grouped field and a plain one keep one focus
+* geometry under every Look.
+*/
+const FOCUS_RING_GROUP_FIELD = "has-focus-visible:outline-solid has-focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] has-focus-visible:outline-(--cue-focus) has-focus-visible:outline-offset-[var(--cue-style-field-focus-offset,-1px)]";
+//#endregion
+export { FOCUS_RING_FIELD, FOCUS_RING_GROUP_FIELD };

package/dist/system/_focus-ring.js

@@ -0,0 +1,125 @@
+//#region src/system/_focus-ring.ts
+/**
+* The one focus ring this library draws, in one place.
+*
+* Spec 2026-09-26-looks-fidelity §3.12 (F-9). Before this module existed, 80
+* files each spelt out `focus-visible:outline-2 focus-visible:outline-solid
+* focus-visible:outline-offset-<n> focus-visible:outline-accent` by hand — a
+* fixed 2px ring in the theme's **brand** colour. That is the wrong role:
+* `--cue-accent` is not contrast-gated as an indicator, `--cue-focus` is (WCAG
+* 1.4.11, advisory 3:1 on five grounds — `forms/_chassis.ts` carries the long
+* form), and three shipped presets (hivehub.light, luma.light, venu.light)
+* already had to split the two apart because the accent alone reads under
+* 3:1 there. Every site but `forms/_chassis.ts` kept pointing at the
+* un-gated role anyway, which is the defect this module closes.
+*
+* **This is a deliberate, library-wide colour change**, not a no-op: the
+* ring's colour moves wherever a theme's `focus` differs from its `accent` —
+* graphite and kiln and porcelain in both modes, tender dark, and hivehub,
+* luma and venu in light (ten of the thirty theme blocks this system ships).
+* `tests/browser/form-focus.spec.ts` and `form-focus-theme-blocks.spec.ts`
+* measure the ring's resolved colour against `--cue-focus` in every one of
+* the thirty.
+*
+* **Width is a style-set knob, colour is not.** `--cue-style-focus-width`
+* lets a Look draw a heavier ring (tender: 3px) without a second module; no
+* style name touches the ink, because the ink's job is the contrast floor,
+* not the Look's voice. The fallback is `--cue-focus-ring`, the frozen 2px
+* this system drew before any style set existed.
+*
+* **Offset is not one of the constants below.** Every site but the button
+* chassis keeps the exact offset it already painted — `FOCUS_RING` (1px,
+* floating clear of the edge), `FOCUS_RING_INSET` (-1px, flush with it),
+* `FOCUS_RING_INSET_2` (-2px, flush one rung further in) and
+* `FOCUS_RING_OFFSET_2` (2px, floating two clear) between them cover every
+* offset this library drew before this file existed but one: `buttonChassis`
+* reads `--cue-style-focus-offset` directly (kiln pulls it to -1px), so
+* `FOCUS_RING_PAINT` — the width-and-colour half with no offset of its own —
+* is exported for that one call site to finish.
+*
+* **Every export is a complete, literal string, not built from parts at
+* runtime.** A first draft of this file built each one from a shared
+* `ring(modifier, offset)` helper — the exact same characters, byte for byte,
+* as what is written out below. It compiled, every jsdom suite that reads
+* class strings off a render stayed green, and every rendered `className`
+* carried the right text — and in a real browser the ring's `outline-offset`
+* computed `0px` on all eighty sites regardless of which constant they used.
+* `@tailwindcss/oxide` finds a utility by scanning source *text* for a
+* complete candidate, and never evaluates the template literal that would
+* assemble `"focus-visible" + ":" + "-outline-offset-1"` at runtime — so a
+* class no file spells out in one contiguous string is a class the compiler
+* never generates, however many test suites confirm the DOM carries its
+* name. `tests/browser/form-focus.spec.ts` is what caught it, on a full
+* `pnpm test:browser` run rather than on any file run alone, which is the
+* argument for never letting this module drift back to the helper.
+*
+* **Its own module**, for the reason `_paint-glow.ts` gives at length:
+* `@repo/docgen` attributes a token to a component by the file its class
+* string lives in, following only `_`-prefixed imports. One ring, spent from
+* one file, so a component that draws it is credited with reading
+* `--cue-focus` and not with reading nothing.
+*
+* `outline-solid` is load-bearing in every export below, not decoration: in
+* Tailwind v4 an outline's *style* is a separate custom property from its
+* width, `outline-none` (the resting state every one of these sites also
+* carries) sets that property to `none`, and only `<modifier>:outline-solid`
+* restores it at ring time. `buttonChassis`'s own note says why at more
+* length; `test/focus-ring.test.ts` is what keeps it paired here.
+*
+* @internal Not part of the public API.
+*/
+/**
+* The ring's width and colour, with no offset of its own.
+*
+* Exported only for `primitives/button.tsx`, whose offset is itself a
+* style-set knob (`--cue-style-focus-offset`) rather than one of the four
+* fixed shapes below. Every other site imports one of those instead.
+*/
+const FOCUS_RING_PAINT = "focus-visible:outline-solid focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] focus-visible:outline-(--cue-focus)";
+/**
+* A ring floating one pixel clear of the control's own edge
+* (`outline-offset-1`).
+*
+* The shape most of this system's non-recessed controls drew already —
+* `Button`'s siblings that do not ride `buttonChassis` itself, `Chip`,
+* `Tabs`' own trigger, `AppBar.Link` and the rest of the plain chrome.
+*/
+const FOCUS_RING = "focus-visible:outline-solid focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] focus-visible:outline-(--cue-focus) focus-visible:outline-offset-1";
+/**
+* A ring pulled back flush with the control's own edge, one pixel in
+* (`-outline-offset-1`).
+*
+* The recessed-chassis shape: an outline at this offset spans from one pixel
+* inside the border box to one pixel outside it, so it covers the rim it is
+* drawn over instead of floating clear of it — `forms/_chassis.ts`'s long
+* comment is the argument in full, and that file's own ring is exactly this
+* constant.
+*/
+const FOCUS_RING_INSET = "focus-visible:outline-solid focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] focus-visible:outline-(--cue-focus) focus-visible:-outline-offset-1";
+/**
+* A ring pulled back two pixels (`-outline-offset-2`) — for a control whose
+* own rim sits one ring further in than {@link FOCUS_RING_INSET}'s, such as
+* `SegmentedControl`'s pressed item inside its track.
+*/
+const FOCUS_RING_INSET_2 = "focus-visible:outline-solid focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] focus-visible:outline-(--cue-focus) focus-visible:-outline-offset-2";
+/**
+* A ring floating two pixels clear (`outline-offset-2`) — the wider-gap
+* counterpart to {@link FOCUS_RING} for a control with more room around it,
+* such as a `Tabs` list item or a card-level link.
+*/
+const FOCUS_RING_OFFSET_2 = "focus-visible:outline-solid focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] focus-visible:outline-(--cue-focus) focus-visible:outline-offset-2";
+/**
+* The one ring in this module drawn from a `data-*` attribute instead of a
+* pseudo-class, floating two pixels clear (`outline-offset-2`).
+*
+* `color/_thumb.ts`'s draggable colour puck sits on Base UI's `ColorArea` and
+* `ColorSlider`, which stamp `data-focus-visible` on the thumb rather than
+* leaving `:focus-visible` to match it directly — so the thumb reads it as
+* `data-[focus-visible]:`, the one modifier spelling this module exists to
+* unify away from and cannot: `test/focus-ring.test.ts`'s WCAG guard has to
+* see this exact string too, which is why it is spelled out here rather than
+* composed at the call site.
+*/
+const FOCUS_RING_DATA_OFFSET_2 = "data-[focus-visible]:outline-solid data-[focus-visible]:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] data-[focus-visible]:outline-(--cue-focus) data-[focus-visible]:outline-offset-2";
+//#endregion
+export { FOCUS_RING, FOCUS_RING_DATA_OFFSET_2, FOCUS_RING_INSET, FOCUS_RING_INSET_2, FOCUS_RING_OFFSET_2, FOCUS_RING_PAINT };

package/dist/system/_paint-glow.js

@@ -22,11 +22,30 @@
 * the elevation rungs and the stroke recipe carry theirs.
 *
 * **Nothing wearing this may also carry a `shadow-` literal**: `twMerge` keeps
-* one of two `shadow-` utilities on the same element. `buttonTones` carries none
-* on any tone, which is what makes the adoption additive.
+* one of two `shadow-` utilities on the same element. The two tones that wear a
+* halo, `primary` and `danger`, carry no other, which is what makes the
+* adoption additive. The `outline` tone does carry one — `REST_SHADE_CLASS`,
+* the resting shade (fidelity plan R3) — so it must not also take
+* `GLOW_CLASSES`: one of the two would be dropped in silence. A halo there
+* would compose both into one `shadow-[…]` list instead.
 *
 * @internal Not part of the public API.
 */
 const GLOW_CLASSES = "shadow-[0_0_var(--cue-paint-glow-blur)_var(--cue-paint-glow-ink,transparent),0_0_var(--cue-paint-glow-blur-far)_var(--cue-paint-glow-ink,transparent)] hover:shadow-[0_0_var(--cue-paint-glow-blur)_var(--cue-paint-glow-ink-hover,transparent),0_0_var(--cue-paint-glow-blur-far)_var(--cue-paint-glow-ink-hover,transparent)]";
+/**
+* The danger variant of {@link GLOW_CLASSES} (spec §3.10, P0.6): the same two
+* offsetless stops, at the same two blur radii, tinted by the danger tone's
+* own ink — `paint-danger-glow-ink` — rather than by the halo's. One ink, not
+* a rest/hover pair: no pack authors a danger-glow HOVER ink, so `buttonTones`'
+* `danger` reads one value at both states, exactly as it reads `bg-danger`
+* without a separate hover fill.
+*
+* `transparent` by default, on every shipped pack but glaze, which is what
+* keeps this additive: `buttonTones.danger` carries no `shadow-` literal
+* today, so adopting this changes nothing until a pack tints the ink.
+*
+* @internal Not part of the public API.
+*/
+const GLOW_DANGER_CLASSES = "shadow-[0_0_var(--cue-paint-glow-blur)_var(--cue-paint-danger-glow-ink,transparent),0_0_var(--cue-paint-glow-blur-far)_var(--cue-paint-danger-glow-ink,transparent)]";
 //#endregion
-export { GLOW_CLASSES };
+export { GLOW_CLASSES, GLOW_DANGER_CLASSES };

package/dist/system/_paint-rest-shade.js

@@ -0,0 +1,32 @@
+//#region src/system/_paint-rest-shade.ts
+/**
+* {@link REST_SHADE} as a utility of its own, for a site that has no shadow
+* list to compose it into: the recessed input chassis (`forms/_chassis.ts`,
+* whose stroke recipe paints a border and a ground and no shadow), the
+* outline button tone and the checkbox box (fidelity plan R3).
+*
+* **Spelt out, character for character**, rather than built from
+* `REST_SHADE` with its spaces turned to underscores: `@tailwindcss/oxide`
+* finds a utility by scanning source text for a complete candidate and never
+* evaluates a template literal, so a class assembled at runtime is a class no
+* stylesheet contains (`_focus-ring.ts` records the time that shipped).
+* `test/system/style-controls.test.tsx` holds the two spellings together.
+*
+* **Labelled `shadow:`**, which Tailwind compiles exactly as it compiles the
+* unlabelled value. The label is for `twMerge`, which knows a shadow only by
+* two plain lengths after the `[` — this value's second is a `calc()` — and
+* without the label files the class as a shadow COLOUR: a caller's
+* `className="shadow-lg"` would then survive beside it rather than replace
+* it, and a caller's `shadow-red-500` would delete it. Labelled, a caller's
+* shadow replaces it and a caller's shadow colour tints it, as with any
+* Tailwind shadow.
+*
+* **A site that already carries a `shadow-` utility must not take this**:
+* `twMerge` keeps one of two `shadow-` utilities on the same element. It
+* composes `REST_SHADE` into its own list instead.
+*
+* @internal Not part of the public API.
+*/
+const REST_SHADE_CLASS = "shadow-[shadow:0_calc(2px*var(--cue-paint-shadow-scale))_calc(4px*var(--cue-paint-shadow-scale))_var(--cue-paint-rest-shade,transparent)]";
+//#endregion
+export { REST_SHADE_CLASS };