@cueplusplus/ui 0.15.0 → 0.17.0

package/dist/forms/_chassis.d.ts

@@ -1,13 +1,6 @@
 import { ClassProp, VariantProps } from "../lib/cva.js";
+import { FormControlSize } from "./_chassis-size.js";
 //#region src/forms/_chassis.d.ts
-/**
- * The rung of the density control ladder a form control sits on.
- *
- * Named `FormControlSize` rather than `ControlSize` because
- * `@cueplusplus/ui/system` already exports a `ControlSize` for
- * `useControlHeight`, and the root barrel re-exports both.
- */
-type FormControlSize = "sm" | "md" | "lg";
 /**
  * Everything the recessed control chassis paints except the box itself.
  *
@@ -90,14 +83,34 @@ type FormControlSize = "sm" | "md" | "lg";
  *
  * 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.
  */
-declare const controlSurface = "w-full rounded-(--radius-control) border border-border bg-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";
+declare const controlSurface = "w-full rounded-control border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-sunken),var(--cue-sunken)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] bg-origin-border [background-clip:padding-box,border-box] shadow-[shadow:0_calc(2px*var(--cue-paint-shadow-scale))_calc(4px*var(--cue-paint-shadow-scale))_var(--cue-paint-rest-shade,transparent)] font-[family-name:var(--cue-style-input-face,var(--cue-font-mono))] font-[number:var(--cue-style-body-weight,inherit)] text-fg placeholder:text-fg-subtle outline-none focus:border-[color:var(--cue-style-focus-edge,var(--cue-border-strong))] 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)] disabled:opacity-40 data-[disabled]:opacity-40 data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger";
 /**
  * The full recessed-control recipe, one variant per rung of the control ladder.
  *
@@ -127,7 +140,7 @@ declare const controlClasses: string;
  * inherits the font size from the wrapper so the two never disagree about which
  * density rung they are on.
  */
-declare 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";
+declare const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 font-[family-name:var(--cue-style-input-face,var(--cue-font-mono))] font-[number:var(--cue-style-body-weight,inherit)] 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.
  *
@@ -159,6 +172,6 @@ declare const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 f
  * UI's `Field` stamps it and where the group already takes
  * `data-[invalid]:border-danger` from {@link controlVariants}.
  */
-declare 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";
+declare const controlGroupFocusClasses = "focus-within:border-border-strong 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)] data-[invalid]:has-focus-visible:outline-danger";
 //#endregion
-export { ControlVariantProps, FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants };
+export { ControlVariantProps, type FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants };

package/dist/forms/_chassis.js

@@ -1,4 +1,10 @@
+import { REST_SHADE_CLASS } from "../system/_paint-rest-shade.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 { INPUT_FACE } from "../system/_style-input-face.js";
 //#region src/forms/_chassis.ts
 /**
 * Everything the recessed control chassis paints except the box itself.
@@ -82,14 +88,34 @@ import { cva } from "../lib/cva.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) border border-border bg-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 focus:border-[color:var(--cue-style-focus-edge,var(--cue-border-strong))] ${FOCUS_RING_FIELD} disabled:opacity-40 data-[disabled]:opacity-40 data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger`;
 /**
 * The full recessed-control recipe, one variant per rung of the control ladder.
 *
@@ -102,9 +128,9 @@ const controlSurface = "w-full rounded-(--radius-control) border border-border b
 */
 const controlVariants = cva(controlSurface, {
 	variants: { size: {
-		sm: "h-control-sm px-(--cue-space-3) text-(length:--cue-text-label)",
+		sm: `h-control-sm px-(--cue-space-3) ${CONTROL_STEP_SIZE_SM}`,
 		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)"
+		lg: `h-control-lg px-(--cue-space-5) ${CONTROL_STEP_SIZE_BODY}`
 	} },
 	defaultVariants: { size: "md" }
 });
@@ -122,7 +148,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,6 +180,6 @@ const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 font-mono
 * UI's `Field` stamps it and where the group already takes
 * `data-[invalid]:border-danger` from {@link controlVariants}.
 */
-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 = `focus-within: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,7 @@
+import { FOCUS_RING } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "../overlays/_surface.js";
+import { OPTION_ROW } from "../system/_style-option.js";
 //#region src/forms/_listbox.ts
 /**
 * The shared skin of every filterable list in this group — `Combobox`,
@@ -26,9 +29,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 h-control-sm cursor-default items-center gap-(--cue-space-2) px-(--cue-space-3) ${CONTROL_FACE} text-(length:--cue-text-ui) ${OPTION_ROW} outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
 /** 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";
 /**
@@ -46,10 +49,10 @@ const chipFieldClasses = "flex w-full cursor-text flex-wrap items-center gap-(--
 * user data throws away information the user typed on purpose. Same shape, same
 * palette, ordinary casing.
 */
-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 valueChipClasses = "group/chip inline-flex h-chip max-w-full min-w-0 cursor-default items-center gap-(--cue-space-1) rounded-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";
 /** 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 text-fg-subtle outline-none transition-colors hover:text-fg ${FOCUS_RING}`;
 //#endregion
 export { chipFieldClasses, chipRemoveClasses, listboxAdornmentClasses, listboxEmptyClasses, listboxIndicatorClasses, listboxItemClasses, listboxListClasses, listboxPopupClasses, listboxPositionerClasses, valueChipClasses };

package/dist/forms/autocomplete.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 //#region src/forms/autocomplete.d.ts
 interface AutocompleteProps {

package/dist/forms/checkbox.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 { REST_SHADE_CLASS } from "../system/_paint-rest-shade.js";
+import { CHECK_EDGE, CHECK_RADIUS, CHECK_SIZE_MD } from "../system/_style-check.js";
+import { CONTROL_LABEL_WEIGHT } from "../system/_style-control-label.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox } from "@base-ui/react/checkbox";
@@ -53,7 +59,7 @@ 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, "hover:border-border-strong", "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-40", "data-[invalid]:border-danger", className),
 		...elementProps,
 		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
 			className: "flex size-full items-center justify-center data-[unchecked]:hidden",
@@ -66,7 +72,7 @@ const Checkbox$1 = React.forwardRef(function Checkbox$2({ className, label, 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 has-[[data-disabled]]:opacity-40", LABEL_INK, CONTROL_LABEL_WEIGHT, CONTROL_FACE),
 		children: [box, /* @__PURE__ */ jsx("span", {
 			id: labelId,
 			children: label

package/dist/forms/combobox.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 //#region src/forms/combobox.d.ts
 /** One row in a {@link Combobox} or {@link MultiSelect}. */

package/dist/forms/env-var-input.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 //#region src/forms/env-var-input.d.ts
 /**

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 { BODY_LEADING_INHERIT } from "../system/_style-body-leading.js";
+import { HELP_INK, 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";
@@ -31,7 +41,8 @@ const Field$1 = React.forwardRef(function Field$2({ 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, BODY_LEADING_INHERIT, 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, "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/index.d.ts

@@ -1,4 +1,5 @@
-import { ControlVariantProps, FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import { ControlVariantProps, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./_chassis.js";
 import { Autocomplete, AutocompleteProps } from "./autocomplete.js";
 import { ButtonGroup, ButtonGroupOrientation, ButtonGroupProps } from "./button-group.js";
 import { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps } from "./checkbox.js";

package/dist/forms/input-group.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 //#region src/forms/input-group.d.ts
 interface InputGroupProps extends React.ComponentPropsWithoutRef<"div"> {

package/dist/forms/input.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 import { Input } from "@base-ui/react/input";
 //#region src/forms/input.d.ts

package/dist/forms/multi-select.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import { ComboboxOption } from "./combobox.js";
 import * as React from "react";
 //#region src/forms/multi-select.d.ts

package/dist/forms/number-field.js

@@ -1,12 +1,13 @@
 "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 * 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 text-fg-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.
 *

package/dist/forms/otp-field.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 import { OTPField } from "@base-ui/react/otp-field";
 //#region src/forms/otp-field.d.ts

package/dist/forms/password-input.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import { InputProps } from "./input.js";
 import * as React from "react";
 //#region src/forms/password-input.d.ts

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,9 @@
 "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 { CONTROL_LABEL_WEIGHT } from "../system/_style-control-label.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Radio } from "@base-ui/react/radio";
@@ -46,14 +50,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-icon-md", "hover:border-border-strong", "data-[checked]:border-accent", `${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" })
 	});
 	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_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.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 //#region src/forms/scrub-input.d.ts
 interface ScrubInputProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue" | "onDragStart" | "onDragEnd"> {

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.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import { InputProps } from "./input.js";
 import * as React from "react";
 //#region src/forms/search-input.d.ts

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

package/dist/forms/select.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "./_chassis.js";
+import { FormControlSize } from "./_chassis-size.js";
+import "./_chassis.js";
 import * as React from "react";
 //#region src/forms/select.d.ts
 /** One row in a {@link Select}. */

package/dist/forms/select.js

@@ -1,8 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { controlVariants } from "./_chassis.js";
+import { ELEVATION_2 } from "../system/_paint-elevation.js";
 import { useCuePortalProps } from "../system/portal.js";
+import { STROKE_SURFACE_2 } from "../system/_paint-stroke-surface-2.js";
 import { CaretGlyph, TickGlyph } from "./_glyphs.js";
+import { OPTION_ROW } from "../system/_style-option.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
@@ -65,14 +69,14 @@ const Select$1 = React.forwardRef(function Select$2({ items, value, defaultValue
 				alignItemWithTrigger: false,
 				children: /* @__PURE__ */ jsx(Select.Popup, {
 					"data-slot": "select-popup",
-					className: cn("min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-(--radius-overlay) border border-border-overlay bg-surface-2 py-(--cue-space-1) shadow-[0_8px_24px_rgba(0,0,0,0.4)] outline-none", "transition-[opacity,scale] duration-100 ease-out motion-reduce:transition-none", "data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0", "data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0", popupClassName),
+					className: cn(`min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-overlay ${STROKE_SURFACE_2} py-(--cue-space-1) ${ELEVATION_2} outline-none`, "transition-[opacity,scale] duration-100 ease-out motion-reduce:transition-none", "data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0", "data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0", popupClassName),
 					children: /* @__PURE__ */ jsx(Select.List, {
 						className: "max-h-(--available-height) overflow-y-auto",
 						children: items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {
 							value: item.value,
 							disabled: item.disabled,
 							"data-slot": "select-item",
-							className: "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",
+							className: cn("flex h-control-sm cursor-default items-center gap-(--cue-space-2) px-(--cue-space-3) text-(length:--cue-text-ui) outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-40", OPTION_ROW, CONTROL_FACE),
 							children: [/* @__PURE__ */ jsx("span", {
 								className: "flex size-icon-sm shrink-0 items-center justify-center",
 								children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(TickGlyph, { className: "size-icon-sm" }) })