@cueplusplus/ui 0.16.0 → 0.18.0

package/dist/forms/_chassis.js

@@ -1,5 +1,12 @@
+import { REST_SHADE_CLASS } from "../system/_paint-rest-shade.js";
+import { DATA_DISABLED_OPACITY, DISABLED_OPACITY, FIELD_DISABLED_FILL } from "../system/_style-disabled.js";
 import { cva } from "../lib/cva.js";
+import { FOCUS_RING_FIELD, FOCUS_RING_GROUP_FIELD } from "../system/_focus-ring-field.js";
+import { CONTROL_STEP_SIZE_BODY, CONTROL_STEP_SIZE_SM } from "../system/_style-control-step.js";
 import { STROKE_SUNKEN } from "../system/_paint-stroke-sunken.js";
+import { BODY_WEIGHT } from "../system/_style-body-weight.js";
+import { FIELD_HOVER_EDGE, FIELD_PAD_LG, FIELD_PAD_MD, FIELD_PAD_SM, INVALID_EDGE } from "../system/_style-field-chassis.js";
+import { INPUT_FACE } from "../system/_style-input-face.js";
 //#region src/forms/_chassis.ts
 /**
 * Everything the recessed control chassis paints except the box itself.
@@ -83,14 +90,34 @@ import { STROKE_SUNKEN } from "../system/_paint-stroke-sunken.js";
 *
 * The compound modifier outranks the plain one on specificity — an attribute
 * selector and a pseudo-class against one pseudo-class — so its position in
-* Tailwind's utility order cannot decide it. `focus-visible:outline-solid` and
-* `focus-visible:outline-2` still supply the style and the width in both cases,
-* which is why only the colour is restated.
+* Tailwind's utility order cannot decide it. {@link FOCUS_RING_FIELD} still
+* supplies the style and the width in both cases, which is why only the
+* colour is restated.
 *
 * `focus-visible:outline-solid` re-declares the outline style the sibling
 * `outline-none` switched off — see the note on `buttonChassis`.
+*
+* The width is {@link FOCUS_RING_FIELD}'s, read from `--cue-style-focus-width`
+* (`_focus-ring.ts` says why every ring in this system shares one module); the
+* border it is pulled back over reads `--cue-style-focus-edge` for the same
+* reason a Look needs to move it — tender's dark band and kiln both do.
+*
+* The face (mono, unless a style set names another — `INPUT_FACE` says why) is
+* what a person's typing renders in, at the body weight (`BODY_WEIGHT`:
+* inherited, as it was before the name existed, unless a style set names one);
+* a call site that deliberately keeps a typed value in mono regardless of the
+* set (a hex colour code, a DMX value) restates `font-mono` on top, as
+* `color-picker.tsx`'s hex field does.
+*
+* **The resting shade** ({@link REST_SHADE_CLASS}, spec §3.10) is the one
+* shadow this recipe draws: the stroke paints a border and a ground and no
+* shadow, so the shade is added as a utility of its own rather than composed
+* into a list. It paints nothing until a pack tints `paint-rest-shade` —
+* measured in `tests/browser/paint-elevation-noop.spec.ts` — and a caller's
+* own `shadow-` utility replaces it through `twMerge`, as it would have
+* replaced nothing before.
 */
-const controlSurface = `w-full rounded-(--radius-control) ${STROKE_SUNKEN} font-mono text-fg placeholder:text-fg-subtle outline-none focus:border-border-strong focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-(--cue-focus) disabled:opacity-40 data-[disabled]:opacity-40 data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger`;
+const controlSurface = `w-full rounded-control ${STROKE_SUNKEN} ${REST_SHADE_CLASS} ${INPUT_FACE} ${BODY_WEIGHT} text-fg placeholder:text-fg-subtle outline-none ${FIELD_HOVER_EDGE} focus:border-[color:var(--cue-style-focus-edge,var(--cue-border-strong))] ${FOCUS_RING_FIELD} ${DISABLED_OPACITY} ${DATA_DISABLED_OPACITY} ${FIELD_DISABLED_FILL} ${INVALID_EDGE} data-[invalid]:focus-visible:outline-danger`;
 /**
 * The full recessed-control recipe, one variant per rung of the control ladder.
 *
@@ -103,9 +130,9 @@ const controlSurface = `w-full rounded-(--radius-control) ${STROKE_SUNKEN} font-
 */
 const controlVariants = cva(controlSurface, {
 	variants: { size: {
-		sm: "h-control-sm px-(--cue-space-3) text-(length:--cue-text-label)",
-		md: "h-control-md px-(--cue-space-4) text-(length:--cue-text-ui)",
-		lg: "h-control-lg px-(--cue-space-5) text-(length:--cue-text-body)"
+		sm: `h-control-sm ${FIELD_PAD_SM} ${CONTROL_STEP_SIZE_SM}`,
+		md: `h-control-md ${FIELD_PAD_MD} text-(length:--cue-text-ui)`,
+		lg: `h-control-lg ${FIELD_PAD_LG} ${CONTROL_STEP_SIZE_BODY}`
 	} },
 	defaultVariants: { size: "md" }
 });
@@ -123,7 +150,7 @@ const controlClasses = controlVariants();
 * inherits the font size from the wrapper so the two never disagree about which
 * density rung they are on.
 */
-const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 font-mono text-[length:inherit] text-fg placeholder:text-fg-subtle outline-none disabled:opacity-40";
+const bareControlClasses = `min-w-0 flex-1 border-0 bg-transparent p-0 ${INPUT_FACE} ${BODY_WEIGHT} text-[length:inherit] text-fg placeholder:text-fg-subtle outline-none disabled:opacity-40`;
 /**
 * Focus feedback for a wrapper that owns the rim on behalf of an inner control.
 *
@@ -154,7 +181,15 @@ const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 font-mono
 * still visible. `data-invalid` is read off the wrapper, which is where Base
 * UI's `Field` stamps it and where the group already takes
 * `data-[invalid]:border-danger` from {@link controlVariants}.
+*
+* The rim is `has-focus:`, not `focus-within:`, for the order Tailwind emits
+* them in: `focus-within:` comes before `hover:` and `has-focus:` after it, both
+* before `data-[invalid]:`. Round 6 gave the chassis a hover edge
+* (`FIELD_HOVER_EDGE`, `transparent` unless a set names one), and under the
+* pointer it painted over a focused group's rim in every Look; the closing
+* pass's browser run caught it (`form-focus.spec.ts`, a grouped field). The
+* wrapper never takes focus itself, so `:has(:focus)` is the same test.
 */
-const controlGroupFocusClasses = "focus-within:border-border-strong has-focus-visible:outline-2 has-focus-visible:outline-solid has-focus-visible:-outline-offset-1 has-focus-visible:outline-(--cue-focus) data-[invalid]:has-focus-visible:outline-danger";
+const controlGroupFocusClasses = `has-focus:border-border-strong ${FOCUS_RING_GROUP_FIELD} data-[invalid]:has-focus-visible:outline-danger`;
 //#endregion
 export { bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants };

package/dist/forms/_listbox.js

@@ -1,4 +1,12 @@
+import { FOCUS_RING } 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 { GLYPH_OPACITY_SVG } from "../system/_style-glyph-opacity.js";
+import { CHIP_HEIGHT, CHIP_INK_NEUTRAL, CHIP_RADIUS, CHIP_SIZE } from "../system/_style-chip.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { ROW_DISABLED_OPACITY } from "../system/_style-row-disabled.js";
 import { overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "../overlays/_surface.js";
+import { LISTBOX_PAD, OPTION_HEIGHT, OPTION_LEADING, OPTION_PAD, OPTION_ROW, OPTION_SELECTED_GROUND, OPTION_SELECTED_HIGHLIGHT_GROUND, OPTION_SELECTED_POINTER_GROUND } from "../system/_style-option.js";
 //#region src/forms/_listbox.ts
 /**
 * The shared skin of every filterable list in this group — `Combobox`,
@@ -18,7 +26,7 @@ const listboxPositionerClasses = overlayPositionerClasses;
 * space the positioner reports so a long list scrolls instead of overflowing the
 * viewport.
 */
-const listboxPopupClasses = `${overlaySurfaceClasses} ${overlayPopupTransitionClasses} w-(--anchor-width) max-w-(--available-width) overflow-hidden py-(--cue-space-1) outline-none`;
+const listboxPopupClasses = `${overlaySurfaceClasses} ${overlayPopupTransitionClasses} w-(--anchor-width) max-w-(--available-width) overflow-hidden ${LISTBOX_PAD} outline-none`;
 /** The scroll container inside the popup. */
 const listboxListClasses = "max-h-[min(var(--available-height),18rem)] overflow-y-auto overscroll-contain outline-none";
 /**
@@ -26,9 +34,9 @@ const listboxListClasses = "max-h-[min(var(--available-height),18rem)] overflow-
 * navigation and the pointer agree on which row is active, and the tint is
 * `accent-soft` rather than a solid fill (the luma defect ruling).
 */
-const listboxItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none select-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-fg data-[selected]:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
+const listboxItemClasses = `flex ${OPTION_HEIGHT} cursor-default items-center gap-(--cue-space-2) ${OPTION_PAD} ${CONTROL_FACE} text-(length:--cue-text-ui) ${OPTION_LEADING} ${OPTION_ROW} ${OPTION_SELECTED_GROUND} ${OPTION_SELECTED_HIGHLIGHT_GROUND} ${OPTION_SELECTED_POINTER_GROUND} outline-none select-none data-[disabled]:pointer-events-none ${ROW_DISABLED_OPACITY}`;
 /** The "nothing matched" line: same rhythm as a row, but muted and unreachable. */
-const listboxEmptyClasses = "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-subtle select-none";
+const listboxEmptyClasses = `flex h-control-sm items-center px-(--cue-space-3) ${CONTROL_FACE} text-(length:--cue-text-ui) text-fg-subtle select-none`;
 /** The tick gutter, always reserved so labels never jog sideways. */
 const listboxIndicatorClasses = "flex size-icon-sm shrink-0 items-center justify-center";
 /**
@@ -38,18 +46,18 @@ const listboxIndicatorClasses = "flex size-icon-sm shrink-0 items-center justify
 */
 const chipFieldClasses = "flex w-full cursor-text flex-wrap items-center gap-(--cue-space-1) py-(--cue-space-1)";
 /**
-* A value chip inside the field: the `h-chip` token and the tinted-neutral
-* colours of `chipVariants`, but *not* that recipe.
-*
-* `Chip` is uppercase and wide-tracked because it labels a *state* — `ONLINE`,
-* `FAULT`. A chip here holds user data (a truss name, a tag), and uppercasing
-* user data throws away information the user typed on purpose. Same shape, same
-* palette, ordinary casing.
+* The typing input inside a chip field: one line tall, so a row of chips and
+* the input fit the field's `min-h-control-*` and the field stands on the
+* control ladder beside an `Input` of its size. It was `h-control-sm`, which
+* with the row's padding made an `md` field 38px beside a 32px input, chips or
+* none (P188.field: coss.com/ui's is 32px, 36px on a phone, like its inputs).
+* A second row of chips still grows the field.
 */
-const valueChipClasses = "group/chip inline-flex h-chip max-w-full min-w-0 cursor-default items-center gap-(--cue-space-1) rounded-(--radius-control) border border-border bg-surface-2 py-0 pr-(--cue-space-1) pl-(--cue-space-2) font-mono text-(length:--cue-text-label) leading-none text-fg-muted outline-none select-none data-[highlighted]:border-accent/60 data-[highlighted]:text-fg focus-within:border-accent/60 focus-within:text-fg";
+const chipInputClasses = "h-auto w-auto min-w-[6ch]";
+const valueChipClasses = `group/chip inline-flex ${CHIP_HEIGHT} max-w-full min-w-0 cursor-default items-center gap-(--cue-space-1) ${CHIP_RADIUS} border border-[color:var(--cue-style-tag-edge,var(--cue-border))] bg-surface-2 py-0 pr-(--cue-space-1) pl-[var(--cue-style-tag-pad,var(--cue-space-2))] ${LABEL_FACE} ${CHIP_SIZE} leading-none ${CHIP_INK_NEUTRAL} outline-none select-none data-[highlighted]:border-accent/60 data-[highlighted]:text-fg focus-within:border-accent/60 focus-within:text-fg`;
 /** The chip's remove affordance. */
-const chipRemoveClasses = "flex size-icon-sm shrink-0 cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent";
+const chipRemoveClasses = `flex size-icon-sm shrink-0 cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors hover:text-fg ${FOCUS_RING}`;
 /** The trailing caret / clear affordance beside a filterable input. */
-const listboxAdornmentClasses = "flex shrink-0 cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent";
+const listboxAdornmentClasses = `flex shrink-0 cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 ${GLYPH_INK_SUBTLE} ${GLYPH_OPACITY_SVG} outline-none transition-colors hover:text-fg ${FOCUS_RING}`;
 //#endregion
-export { chipFieldClasses, chipRemoveClasses, listboxAdornmentClasses, listboxEmptyClasses, listboxIndicatorClasses, listboxItemClasses, listboxListClasses, listboxPopupClasses, listboxPositionerClasses, valueChipClasses };
+export { chipFieldClasses, chipInputClasses, chipRemoveClasses, listboxAdornmentClasses, listboxEmptyClasses, listboxIndicatorClasses, listboxItemClasses, listboxListClasses, listboxPopupClasses, listboxPositionerClasses, valueChipClasses };

package/dist/forms/checkbox.js

@@ -1,5 +1,14 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { LABEL_INK } from "../system/_style-label-ink.js";
+import { REST_SHADE_CLASS } from "../system/_paint-rest-shade.js";
+import { CHECK_EDGE, CHECK_HOVER_EDGE, CHECK_RADIUS, CHECK_SIZE_MD } from "../system/_style-check.js";
+import { CHECK_GLYPH_SIZE } from "../system/_style-check-glyph.js";
+import { CHOICE_GAP } from "../system/_style-choice-gap.js";
+import { CONTROL_LABEL_LEADING, CONTROL_LABEL_WEIGHT } from "../system/_style-control-label.js";
+import { CHECK_DISABLED, DATA_DISABLED_OPACITY, LABEL_DISABLED_INK, LABEL_DISABLED_OPACITY } from "../system/_style-disabled.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox } from "@base-ui/react/checkbox";
@@ -53,20 +62,20 @@ const Checkbox$1 = React.forwardRef(function Checkbox$2({ className, label, size
 		ref,
 		"data-slot": "checkbox",
 		"aria-labelledby": hasLabel ? labelId : void 0,
-		className: cn("flex shrink-0 items-center justify-center rounded-(--radius-control) border border-border bg-sunken text-accent-fg outline-none transition-colors", size === "sm" ? "size-icon-sm" : "size-icon-md", "hover:border-border-strong", "data-[checked]:border-accent data-[checked]:bg-accent", "data-[indeterminate]:border-accent data-[indeterminate]:bg-accent", "focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", "data-[disabled]:pointer-events-none data-[disabled]:opacity-40", "data-[invalid]:border-danger", className),
+		className: cn(`flex shrink-0 items-center justify-center ${CHECK_RADIUS} border ${CHECK_EDGE} bg-sunken text-accent-fg outline-none transition-colors ${REST_SHADE_CLASS}`, size === "sm" ? "size-icon-sm" : CHECK_SIZE_MD, CHECK_HOVER_EDGE, "data-[checked]:border-accent data-[checked]:bg-accent", "data-[indeterminate]:border-accent data-[indeterminate]:bg-accent", `${FOCUS_RING}`, `data-[disabled]:pointer-events-none ${DATA_DISABLED_OPACITY} ${CHECK_DISABLED}`, "data-[invalid]:border-danger", className),
 		...elementProps,
 		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
 			className: "flex size-full items-center justify-center data-[unchecked]:hidden",
 			render: (indicatorProps, state) => /* @__PURE__ */ jsx("span", {
 				...indicatorProps,
-				children: state.indeterminate ? /* @__PURE__ */ jsx(DashGlyph, { className: "size-full" }) : /* @__PURE__ */ jsx(CheckGlyph, { className: "size-full" })
+				children: state.indeterminate ? /* @__PURE__ */ jsx(DashGlyph, { className: CHECK_GLYPH_SIZE }) : /* @__PURE__ */ jsx(CheckGlyph, { className: CHECK_GLYPH_SIZE })
 			})
 		})
 	});
 	if (!hasLabel) return box;
 	return /* @__PURE__ */ jsxs("label", {
 		"data-slot": "checkbox-label",
-		className: "inline-flex cursor-pointer items-center gap-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted select-none has-[[data-disabled]]:cursor-default has-[[data-disabled]]:opacity-40",
+		className: cn("inline-flex cursor-pointer items-center gap-(--cue-space-3) text-(length:--cue-text-ui) select-none has-[[data-disabled]]:cursor-default", LABEL_DISABLED_OPACITY, LABEL_INK, LABEL_DISABLED_INK, CONTROL_LABEL_WEIGHT, CONTROL_LABEL_LEADING, CONTROL_FACE),
 		children: [box, /* @__PURE__ */ jsx("span", {
 			id: labelId,
 			children: label
@@ -90,7 +99,7 @@ const CheckboxGroup$1 = React.forwardRef(function CheckboxGroup$2({ className, .
 	return /* @__PURE__ */ jsx(CheckboxGroup, {
 		ref,
 		"data-slot": "checkbox-group",
-		className: cn("flex flex-col gap-(--cue-space-2)", className),
+		className: cn(`flex flex-col ${CHOICE_GAP}`, className),
 		...elementProps
 	});
 });

package/dist/forms/env-var-input.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { Input } from "./input.js";
 import { CrossGlyph, VariableGlyph } from "./_glyphs.js";
 import { PasswordInput } from "./password-input.js";
@@ -89,7 +90,7 @@ const EnvVarInput = React.forwardRef(function EnvVarInput({ className, value: va
 		...elementProps,
 		children: variable === null ? secret ? /* @__PURE__ */ jsx(PasswordInput, { ...controlProps }) : /* @__PURE__ */ jsx(Input, { ...controlProps }) : /* @__PURE__ */ jsxs("div", {
 			"data-slot": "env-var-pill",
-			className: cn("flex w-full items-center gap-(--cue-space-2) rounded-(--radius-control) border border-warn/35 bg-warn/10 font-mono text-warn", PILL_SIZES[size], disabled === true && "opacity-40"),
+			className: cn("flex w-full items-center gap-(--cue-space-2) rounded-control border border-warn/35 bg-warn/10 font-mono text-warn", PILL_SIZES[size], disabled === true && "opacity-40"),
 			children: [
 				/* @__PURE__ */ jsx(VariableGlyph, {
 					"aria-hidden": "true",
@@ -105,7 +106,7 @@ const EnvVarInput = React.forwardRef(function EnvVarInput({ className, value: va
 					"aria-label": clearLabel,
 					disabled,
 					onClick: () => commit(""),
-					className: "ml-auto flex size-icon-md shrink-0 cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 text-warn outline-none transition-colors hover:bg-warn/20 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none",
+					className: `ml-auto flex size-icon-md shrink-0 cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 text-warn outline-none transition-colors hover:bg-warn/20 ${FOCUS_RING} disabled:pointer-events-none`,
 					children: /* @__PURE__ */ jsx(CrossGlyph, { className: "size-icon-sm" })
 				})
 			]

package/dist/forms/field.d.ts

@@ -29,7 +29,8 @@ interface FieldLabelProps extends Omit<Field.Label.Props, "className"> {
   className?: string;
 }
 /**
- * The name of a field: mono, uppercase, tracked out, one rung below body text.
+ * The name of a field: mono, uppercase, tracked out, one rung below body
+ * text — by default, the style set's choice inside one.
  *
  * Renders a real `<label>` wired to the field's control, so clicking it focuses
  * (or toggles) that control.

package/dist/forms/field.js

@@ -1,5 +1,15 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { LABEL_INK } from "../system/_style-label-ink.js";
+import { BODY_WEIGHT } from "../system/_style-body-weight.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_TIGHT } from "../system/_style-label-tracking.js";
+import { LABEL_SIZE } from "../system/_style-label-size.js";
+import { FIELD_GAP } from "../system/_style-field-gap.js";
+import { HELP_INK, HELP_LEADING, HELP_LEADING_ERROR, HELP_SIZE } from "../system/_style-help.js";
+import { LABEL_LEADING } from "../system/_style-label-leading.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
@@ -26,12 +36,13 @@ const Field$1 = React.forwardRef(function Field$2({ className, ...elementProps }
 	return /* @__PURE__ */ jsx(Field.Root, {
 		ref,
 		"data-slot": "field",
-		className: cn("flex w-full flex-col gap-(--cue-space-2)", className),
+		className: cn("flex w-full flex-col", FIELD_GAP, className),
 		...elementProps
 	});
 });
 /**
-* The name of a field: mono, uppercase, tracked out, one rung below body text.
+* The name of a field: mono, uppercase, tracked out, one rung below body
+* text — by default, the style set's choice inside one.
 *
 * Renders a real `<label>` wired to the field's control, so clicking it focuses
 * (or toggles) that control.
@@ -43,7 +54,7 @@ const FieldLabel = React.forwardRef(function FieldLabel({ className, ...elementP
 	return /* @__PURE__ */ jsx(Field.Label, {
 		ref,
 		"data-slot": "field-label",
-		className: cn("font-mono text-(length:--cue-text-label) leading-none tracking-(--cue-tracking-caps-tight) text-fg-muted uppercase select-none data-[disabled]:opacity-40", className),
+		className: cn(LABEL_SIZE, LABEL_LEADING, "select-none data-[disabled]:opacity-40", LABEL_INK, LABEL_WEIGHT, LABEL_FACE, LABEL_TRACKING_TIGHT, LABEL_CASE, className),
 		...elementProps
 	});
 });
@@ -58,7 +69,7 @@ const FieldDescription = React.forwardRef(function FieldDescription({ className,
 	return /* @__PURE__ */ jsx(Field.Description, {
 		ref,
 		"data-slot": "field-description",
-		className: cn("font-mono text-(length:--cue-text-micro) text-fg-subtle", className),
+		className: cn(LABEL_FACE, HELP_SIZE, HELP_LEADING, HELP_INK, BODY_WEIGHT, className),
 		...elementProps
 	});
 });
@@ -77,7 +88,7 @@ const FieldDescription = React.forwardRef(function FieldDescription({ className,
 */
 const FieldError = React.forwardRef(function FieldError({ className, issues, match, children, ...elementProps }, ref) {
 	if (issues !== void 0 && issues.length === 0) return null;
-	const classes = cn("font-mono text-(length:--cue-text-micro) text-danger", className);
+	const classes = cn(LABEL_FACE, HELP_SIZE, HELP_LEADING_ERROR, "text-danger", BODY_WEIGHT, className);
 	if (issues === void 0) return /* @__PURE__ */ jsx(Field.Error, {
 		ref,
 		"data-slot": "field-error",

package/dist/forms/file-upload.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { CrossGlyph } from "./_glyphs.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -143,7 +144,7 @@ const FileUpload = React.forwardRef(function FileUpload({ className, zoneClassNa
 					setDragging(false);
 					intake(event.dataTransfer?.files ?? null);
 				},
-				className: cn("flex w-full cursor-pointer flex-col items-center justify-center gap-(--cue-space-1) rounded-(--radius-control) border border-dashed border-border bg-sunken px-(--cue-space-4) py-(--cue-space-5) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none transition-colors duration-150 hover:border-border-strong hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-40 data-[dragging=true]:border-accent data-[dragging=true]:bg-accent-soft data-[dragging=true]:text-fg motion-reduce:transition-none", zoneClassName),
+				className: cn(`flex w-full cursor-pointer flex-col items-center justify-center gap-(--cue-space-1) rounded-control border border-dashed border-border bg-sunken px-(--cue-space-4) py-(--cue-space-5) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none transition-colors duration-150 hover:border-border-strong hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-40 data-[dragging=true]:border-accent data-[dragging=true]:bg-accent-soft data-[dragging=true]:text-fg motion-reduce:transition-none`, zoneClassName),
 				children: [/* @__PURE__ */ jsx("span", { children: label }), hint === void 0 ? null : /* @__PURE__ */ jsx("span", {
 					className: "text-(length:--cue-text-label) text-fg-subtle",
 					children: hint
@@ -222,7 +223,7 @@ function FileUploadRow({ file, onRemove, removeLabel }) {
 				"aria-label": removeLabel(file),
 				"data-slot": "file-upload-remove",
 				onClick: () => onRemove(file.id),
-				className: "flex size-icon-sm shrink-0 cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent motion-reduce:transition-none",
+				className: `flex size-icon-sm shrink-0 cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors hover:text-fg ${FOCUS_RING} motion-reduce:transition-none`,
 				children: /* @__PURE__ */ jsx(CrossGlyph, { className: "size-full" })
 			})
 		]

package/dist/forms/input-group.js

@@ -1,6 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { controlGroupFocusClasses, controlVariants } from "./_chassis.js";
+import { GLYPH_INK_SUBTLE } from "../system/_style-glyph-ink.js";
+import { GLYPH_OPACITY_SVG } from "../system/_style-glyph-opacity.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/forms/input-group.tsx
@@ -12,6 +14,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 const InputGroupContext = React.createContext(false);
 /**
+* A gutter: the glyph ink and opacity a set gives a control's glyphs
+* (`style-glyph-ink`, `style-glyph-opacity`), falling back to the `fg-subtle`
+* it drew. The opacity reaches only a glyph, not the text or `Kbd` a gutter
+* may hold: coss.com/ui fades its addon's icons alone (P161.addon).
+*/
+const GUTTER_CLASSES = `flex shrink-0 items-center ${GLYPH_INK_SUBTLE} ${GLYPH_OPACITY_SVG}`;
+/**
 * A control and its adornments, drawn as a single field.
 *
 * The group — not the input — owns the chassis, so there is exactly one rim and
@@ -40,7 +49,7 @@ const InputGroup = React.forwardRef(function InputGroup({ className, leading, tr
 		children: [
 			leading === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				"data-slot": "input-group-leading",
-				className: "flex shrink-0 items-center text-fg-subtle",
+				className: GUTTER_CLASSES,
 				children: leading
 			}),
 			/* @__PURE__ */ jsx(InputGroupContext.Provider, {
@@ -49,7 +58,7 @@ const InputGroup = React.forwardRef(function InputGroup({ className, leading, tr
 			}),
 			trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				"data-slot": "input-group-trailing",
-				className: "flex shrink-0 items-center text-fg-subtle",
+				className: GUTTER_CLASSES,
 				children: trailing
 			})
 		]

package/dist/forms/multi-select.js

@@ -1,9 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { bareControlClasses, controlGroupFocusClasses, controlSurface } from "./_chassis.js";
+import { GLYPH_SIZE } from "../system/_style-glyph-size.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { CrossGlyph, TickGlyph } from "./_glyphs.js";
-import { chipFieldClasses, chipRemoveClasses, listboxEmptyClasses, listboxIndicatorClasses, listboxItemClasses, listboxListClasses, listboxPopupClasses, listboxPositionerClasses, valueChipClasses } from "./_listbox.js";
+import { chipFieldClasses, chipInputClasses, chipRemoveClasses, listboxEmptyClasses, listboxIndicatorClasses, listboxItemClasses, listboxListClasses, listboxPopupClasses, listboxPositionerClasses, valueChipClasses } from "./_listbox.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react/combobox";
@@ -59,7 +60,7 @@ const MultiSelect = React.forwardRef(function MultiSelect({ items, value, defaul
 					}), /* @__PURE__ */ jsx(Combobox.ChipRemove, {
 						"aria-label": removeLabel(item.label),
 						className: chipRemoveClasses,
-						children: /* @__PURE__ */ jsx(CrossGlyph, { className: "size-icon-sm" })
+						children: /* @__PURE__ */ jsx(CrossGlyph, { className: GLYPH_SIZE })
 					})]
 				}, item.value)), /* @__PURE__ */ jsx(Combobox.Input, {
 					ref,
@@ -68,7 +69,7 @@ const MultiSelect = React.forwardRef(function MultiSelect({ items, value, defaul
 					placeholder: selected.length > 0 ? "" : placeholder,
 					"aria-label": ariaLabel,
 					"aria-labelledby": ariaLabelledBy,
-					className: cn(bareControlClasses, "h-control-sm w-auto min-w-[6ch]")
+					className: cn(bareControlClasses, chipInputClasses)
 				})] }) })
 			})
 		}), /* @__PURE__ */ jsx(Combobox.Portal, {

package/dist/forms/number-field.js

@@ -1,12 +1,16 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET } from "../system/_focus-ring.js";
 import { bareControlClasses, controlGroupFocusClasses, controlSurface } from "./_chassis.js";
+import { GLYPH_INK_MUTED } from "../system/_style-glyph-ink.js";
+import { STEPPER_WIDTH } from "../system/_style-stepper.js";
+import { GLYPH_TEXT_SIZE } from "../system/_style-glyph-size.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NumberField } from "@base-ui/react/number-field";
 //#region src/forms/number-field.tsx
 /** The − and + affordances: square, borderless, and quiet until hovered. */
-const stepperClasses = "flex shrink-0 items-center justify-center border-0 bg-transparent p-0 font-mono text-fg-muted leading-none select-none outline-none transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
+const stepperClasses = `flex shrink-0 items-center justify-center border-0 bg-transparent p-0 font-mono ${GLYPH_TEXT_SIZE} ${GLYPH_INK_MUTED} leading-none select-none outline-none transition-colors hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET} data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
 /**
 * A numeric control with explicit − / + affordances and no native spinners.
 *
@@ -38,7 +42,7 @@ const NumberField$1 = React.forwardRef(function NumberField$2({ className, size
 			children: [
 				/* @__PURE__ */ jsx(NumberField.Decrement, {
 					"aria-label": decrementLabel,
-					className: cn(stepperClasses, rung === "sm" ? "w-control-sm" : "w-control-md"),
+					className: cn(stepperClasses, rung === "sm" ? "w-control-sm" : STEPPER_WIDTH),
 					children: /* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
 						children: "−"
@@ -51,7 +55,7 @@ const NumberField$1 = React.forwardRef(function NumberField$2({ className, size
 				}),
 				/* @__PURE__ */ jsx(NumberField.Increment, {
 					"aria-label": incrementLabel,
-					className: cn(stepperClasses, rung === "sm" ? "w-control-sm" : "w-control-md"),
+					className: cn(stepperClasses, rung === "sm" ? "w-control-sm" : STEPPER_WIDTH),
 					children: /* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
 						children: "+"

package/dist/forms/otp-field.js

@@ -1,15 +1,24 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { CONTROL_STEP_SIZE_BODY } from "../system/_style-control-step.js";
 import { controlSurface } from "./_chassis.js";
+import { OTP_GAP } from "../system/_style-otp.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { OTPField } from "@base-ui/react/otp-field";
 //#region src/forms/otp-field.tsx
-/** One square slot per rung of the control ladder. */
+/**
+* One square slot per rung of the control ladder. The width is spelt as the
+* ladder's own variable, `w-(--cue-control-*)`, which `tailwind-merge` knows is a
+* width and so drops the chassis's `w-full` for: it does not know the theme's
+* `control-*` scale, so `size-control-*` beside the `w-auto` this used to add
+* kept both, `w-auto` won the cascade, and every slot drew as wide as an empty
+* input (round 6, P166.width).
+*/
 const SLOT_SIZES = {
-	sm: "size-control-sm text-(length:--cue-text-ui)",
-	md: "size-control-md text-(length:--cue-text-body)",
-	lg: "size-control-lg text-(length:--cue-text-emphasis)"
+	sm: "w-(--cue-control-sm) h-control-sm text-(length:--cue-text-ui)",
+	md: `w-(--cue-control-md) h-control-md ${CONTROL_STEP_SIZE_BODY}`,
+	lg: "w-(--cue-control-lg) h-control-lg text-(length:--cue-text-emphasis)"
 };
 /**
 * A one-time code, one character per box.
@@ -30,14 +39,14 @@ const SLOT_SIZES = {
 const OTPField$1 = React.forwardRef(function OTPField$2({ length = 6, size = "md", groupSize, separator = "–", "aria-label": ariaLabel, id, slotLabel = (index, total) => `Character ${index + 1} of ${total}`, className, slotClassName, ...elementProps }, ref) {
 	const generatedId = React.useId();
 	const fieldId = id ?? generatedId;
-	const slotClasses = cn(controlSurface, "w-auto p-0 text-center tabular-nums", SLOT_SIZES[size], slotClassName);
+	const slotClasses = cn(controlSurface, "p-0 text-center tabular-nums", SLOT_SIZES[size], slotClassName);
 	return /* @__PURE__ */ jsxs(OTPField.Root, {
 		ref,
 		id: fieldId,
 		length,
 		"aria-label": ariaLabel,
 		"data-slot": "otp-field",
-		className: cn("relative flex items-center gap-(--cue-space-2)", className),
+		className: cn(`relative flex items-center ${OTP_GAP}`, className),
 		...elementProps,
 		children: [ariaLabel === void 0 ? null : /* @__PURE__ */ jsx("label", {
 			htmlFor: fieldId,

package/dist/forms/password-input.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { InputGroup } from "./input-group.js";
 import { Input } from "./input.js";
 import { EyeGlyph, EyeOffGlyph } from "./_glyphs.js";
@@ -35,6 +36,7 @@ const PasswordInput = React.forwardRef(function PasswordInput({ className, revea
 		revealed,
 		revealedProp
 	]);
+	const RevealGlyph = revealed ? EyeOffGlyph : EyeGlyph;
 	return /* @__PURE__ */ jsx(InputGroup, {
 		size,
 		className,
@@ -44,8 +46,8 @@ const PasswordInput = React.forwardRef(function PasswordInput({ className, revea
 			"aria-label": revealed ? hideLabel : revealLabel,
 			disabled,
 			onClick: toggle,
-			className: "flex shrink-0 cursor-pointer items-center justify-center rounded-(--radius-control) text-fg-subtle outline-none transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-40 aria-pressed:text-fg",
-			children: /* @__PURE__ */ jsx(revealed ? EyeOffGlyph : EyeGlyph, { className: "size-icon-md" })
+			className: `flex shrink-0 cursor-pointer items-center justify-center rounded-control text-fg-subtle outline-none transition-colors hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-40 aria-pressed:text-fg`,
+			children: /* @__PURE__ */ jsx(RevealGlyph, { className: "size-icon-md" })
 		}) : void 0,
 		children: /* @__PURE__ */ jsx(Input, {
 			ref,

package/dist/forms/radio-group.js

@@ -1,5 +1,11 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { LABEL_INK } from "../system/_style-label-ink.js";
+import { CHOICE_GAP } from "../system/_style-choice-gap.js";
+import { CONTROL_LABEL_LEADING, CONTROL_LABEL_WEIGHT } from "../system/_style-control-label.js";
+import { RADIO_CHECKED_GROUND, RADIO_DOT } from "../system/_style-radio.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Radio } from "@base-ui/react/radio";
@@ -24,7 +30,7 @@ const RadioGroup$1 = React.forwardRef(function RadioGroup$2({ className, orienta
 		ref,
 		"data-slot": "radio-group",
 		"data-orientation": orientation,
-		className: cn("flex", orientation === "horizontal" ? "flex-row flex-wrap items-center gap-(--cue-space-5)" : "flex-col gap-(--cue-space-2)", className),
+		className: cn("flex", orientation === "horizontal" ? "flex-row flex-wrap items-center gap-(--cue-space-5)" : `flex-col ${CHOICE_GAP}`, className),
 		...elementProps
 	});
 });
@@ -46,14 +52,14 @@ const Radio$1 = React.forwardRef(function Radio$2({ className, label, size = "md
 		ref,
 		"data-slot": "radio",
 		"aria-labelledby": hasLabel ? labelId : void 0,
-		className: cn("flex shrink-0 items-center justify-center rounded-full border border-border bg-sunken text-accent outline-none transition-colors", size === "sm" ? "size-icon-sm" : "size-icon-md", "hover:border-border-strong", "data-[checked]:border-accent", "focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", "data-[disabled]:pointer-events-none data-[disabled]:opacity-40", "data-[invalid]:border-danger", className),
+		className: cn("flex shrink-0 items-center justify-center rounded-full border border-border bg-sunken text-accent outline-none transition-colors", size === "sm" ? "size-icon-sm" : "size-[var(--cue-style-check-size,var(--cue-icon-md))]", "hover:border-border-strong", "data-[checked]:border-accent", RADIO_CHECKED_GROUND, `${FOCUS_RING}`, "data-[disabled]:pointer-events-none data-[disabled]:opacity-40", "data-[invalid]:border-danger", className),
 		...elementProps,
-		children: /* @__PURE__ */ jsx(Radio.Indicator, { className: "block size-1/2 rounded-full bg-accent data-[unchecked]:hidden" })
+		children: /* @__PURE__ */ jsx(Radio.Indicator, { className: `block ${RADIO_DOT} rounded-full data-[unchecked]:hidden` })
 	});
 	if (!hasLabel) return dot;
 	return /* @__PURE__ */ jsxs("label", {
 		"data-slot": "radio-label",
-		className: "inline-flex cursor-pointer items-center gap-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted select-none has-[[data-disabled]]:cursor-default has-[[data-disabled]]:opacity-40",
+		className: cn("inline-flex cursor-pointer items-center gap-(--cue-space-3) text-(length:--cue-text-ui) select-none has-[[data-disabled]]:cursor-default has-[[data-disabled]]:opacity-40", LABEL_INK, CONTROL_LABEL_WEIGHT, CONTROL_LABEL_LEADING, CONTROL_FACE),
 		children: [dot, /* @__PURE__ */ jsx("span", {
 			id: labelId,
 			children: label

package/dist/forms/rating.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
 import { StarGlyph } from "./_glyphs.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -10,7 +11,7 @@ const MARK_SIZES = {
 	md: "size-icon-md",
 	lg: "size-[calc(var(--cue-icon-md)*1.35)]"
 };
-const MARK_CLASSES = "flex cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-150 outline-none hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-40 aria-checked:text-accent";
+const MARK_CLASSES = `flex cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-fg-subtle transition-colors duration-150 outline-none hover:text-accent ${FOCUS_RING_OFFSET_2} disabled:pointer-events-none disabled:opacity-40 aria-checked:text-accent`;
 /**
 * A 0–N rating, drawn as marks.
 *

package/dist/forms/scrub-input.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { bareControlClasses, controlGroupFocusClasses, controlVariants } from "./_chassis.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -240,7 +241,7 @@ const ScrubInput = React.forwardRef(function ScrubInput({ className, value, onCh
 			disabled,
 			onPointerDown: (event) => event.stopPropagation(),
 			onClick: cycleUnit,
-			className: "shrink-0 cursor-pointer rounded-(--radius-control) border-0 bg-transparent p-0 font-mono text-[length:inherit] text-fg-subtle outline-none transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none",
+			className: `shrink-0 cursor-pointer rounded-control border-0 bg-transparent p-0 font-mono text-[length:inherit] text-fg-subtle outline-none transition-colors hover:text-fg ${FOCUS_RING} disabled:pointer-events-none`,
 			children: unit
 		})]
 	});

package/dist/forms/search-input.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { InputGroup } from "./input-group.js";
 import { Input } from "./input.js";
 import { CrossGlyph, SearchGlyph } from "./_glyphs.js";
@@ -93,7 +94,7 @@ const SearchInput = React.forwardRef(function SearchInput({ className, value, de
 			type: "button",
 			"aria-label": clearLabel,
 			onClick: clear,
-			className: "flex shrink-0 cursor-pointer items-center justify-center rounded-(--radius-control) text-fg-subtle outline-none transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent",
+			className: `flex shrink-0 cursor-pointer items-center justify-center rounded-control text-fg-subtle outline-none transition-colors hover:text-fg ${FOCUS_RING}`,
 			children: /* @__PURE__ */ jsx(CrossGlyph, { className: "size-icon-sm" })
 		}),
 		children: /* @__PURE__ */ jsx(Input, {