@cueplusplus/ui 0.17.0 → 0.18.1

package/dist/forms/checkbox.js

@@ -4,8 +4,11 @@ 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 { 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";
@@ -59,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 ${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),
+		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: 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),
+		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
@@ -96,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/field.js

@@ -7,8 +7,8 @@ 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 { 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";
@@ -36,7 +36,7 @@ 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
 	});
 });
@@ -69,7 +69,7 @@ const FieldDescription = React.forwardRef(function FieldDescription({ className,
 	return /* @__PURE__ */ jsx(Field.Description, {
 		ref,
 		"data-slot": "field-description",
-		className: cn(LABEL_FACE, HELP_SIZE, BODY_LEADING_INHERIT, HELP_INK, BODY_WEIGHT, className),
+		className: cn(LABEL_FACE, HELP_SIZE, HELP_LEADING, HELP_INK, BODY_WEIGHT, className),
 		...elementProps
 	});
 });
@@ -88,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(LABEL_FACE, HELP_SIZE, "text-danger", BODY_WEIGHT, 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/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

@@ -2,12 +2,15 @@
 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_RING_INSET} 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.
 *
@@ -39,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: "−"
@@ -52,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/radio-group.js

@@ -3,7 +3,9 @@ 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 { 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";
@@ -28,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
 	});
 });
@@ -50,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_RING}`, "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: 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),
+		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/select.js

@@ -1,12 +1,15 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { SELECT_HOVER_EDGE } from "../system/_style-field-chassis.js";
 import { controlVariants } from "./_chassis.js";
+import { GLYPH_INK_SUBTLE } from "../system/_style-glyph-ink.js";
+import { GLYPH_OPACITY } from "../system/_style-glyph-opacity.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 { 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";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
@@ -53,12 +56,12 @@ const Select$1 = React.forwardRef(function Select$2({ items, value, defaultValue
 			"data-slot": "select-trigger",
 			"aria-label": ariaLabel,
 			"aria-labelledby": ariaLabelledBy,
-			className: cn(controlVariants({ size }), "flex cursor-default items-center justify-between gap-(--cue-space-3) text-left", "hover:not-data-disabled:border-border-strong", className),
+			className: cn(controlVariants({ size }), "flex cursor-default items-center justify-between gap-(--cue-space-3) text-left", SELECT_HOVER_EDGE, className),
 			children: [/* @__PURE__ */ jsx(Select.Value, {
 				className: "truncate data-[placeholder]:text-fg-subtle",
 				placeholder
 			}), /* @__PURE__ */ jsx(Select.Icon, {
-				className: "flex shrink-0 items-center text-fg-subtle",
+				className: `flex shrink-0 items-center ${GLYPH_INK_SUBTLE} ${GLYPH_OPACITY}`,
 				children: /* @__PURE__ */ jsx(CaretGlyph, { className: "size-icon-md" })
 			})]
 		}), /* @__PURE__ */ jsx(Select.Portal, {
@@ -69,14 +72,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-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),
+					className: cn(`min-w-(--anchor-width) origin-(--transform-origin) overflow-hidden rounded-overlay ${STROKE_SURFACE_2} ${LISTBOX_PAD} ${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: 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),
+							className: cn(`flex ${OPTION_HEIGHT} cursor-default items-center gap-(--cue-space-2) ${OPTION_PAD} text-(length:--cue-text-ui) ${OPTION_LEADING} outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-40`, OPTION_ROW, OPTION_SELECTED_GROUND, OPTION_SELECTED_HIGHLIGHT_GROUND, OPTION_SELECTED_POINTER_GROUND, 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" }) })

package/dist/forms/slider.js

@@ -4,6 +4,8 @@ import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
 import { LABEL_FACE } from "../system/_style-label-face.js";
 import { LABEL_CASE } from "../system/_style-label-case.js";
 import { LABEL_TRACKING_TIGHT } from "../system/_style-label-tracking.js";
+import { SLIDER_THUMB_FILL, SLIDER_THUMB_RIM, SLIDER_THUMB_SIZE, SLIDER_TRACK_HEIGHT, SLIDER_TRACK_INK } from "../system/_style-slider.js";
+import { CAPTION_SIZE_LABEL } from "../system/_style-caption-size.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Slider } from "@base-ui/react/slider";
@@ -44,14 +46,14 @@ const Slider$1 = React.forwardRef(function Slider$2({ className, onCommit, label
 		className: cn("flex w-full flex-col gap-(--cue-space-2)", className),
 		...elementProps,
 		children: [label === void 0 && !showValue ? null : /* @__PURE__ */ jsxs("div", {
-			className: cn("flex items-baseline justify-between gap-(--cue-space-3) text-(length:--cue-text-label) text-fg-muted", LABEL_FACE, LABEL_TRACKING_TIGHT, LABEL_CASE),
+			className: cn(`flex items-baseline justify-between gap-(--cue-space-3) ${CAPTION_SIZE_LABEL} text-fg-muted`, LABEL_FACE, LABEL_TRACKING_TIGHT, LABEL_CASE),
 			children: [label === void 0 ? /* @__PURE__ */ jsx("span", {}) : /* @__PURE__ */ jsx(Slider.Label, { children: label }), showValue ? /* @__PURE__ */ jsx(Slider.Value, { className: "tabular-nums text-fg normal-case tracking-normal" }) : null]
 		}), /* @__PURE__ */ jsx(Slider.Control, {
 			"data-slot": "slider-control",
 			className: "flex h-control-sm w-full touch-none items-center select-none",
 			children: /* @__PURE__ */ jsxs(Slider.Track, {
 				"data-slot": "slider-track",
-				className: "relative h-0.5 w-full rounded-full bg-border select-none",
+				className: `relative ${SLIDER_TRACK_HEIGHT} w-full rounded-full ${SLIDER_TRACK_INK} select-none`,
 				children: [/* @__PURE__ */ jsx(Slider.Indicator, {
 					"data-slot": "slider-indicator",
 					className: "h-full rounded-full bg-accent select-none"
@@ -59,7 +61,7 @@ const Slider$1 = React.forwardRef(function Slider$2({ className, onCommit, label
 					index,
 					"data-slot": "slider-thumb",
 					"aria-label": ariaLabel === void 0 ? void 0 : count > 1 ? `${ariaLabel} ${index + 1}` : ariaLabel,
-					className: `size-[0.5rem] rounded-full bg-accent outline-none ${FOCUS_RING_OFFSET_2} data-[disabled]:opacity-40`
+					className: `${SLIDER_THUMB_SIZE} rounded-full ${SLIDER_THUMB_FILL} ${SLIDER_THUMB_RIM} outline-none ${FOCUS_RING_OFFSET_2} data-[disabled]:opacity-40`
 				}, index))]
 			})
 		})]

package/dist/forms/switch.js

@@ -3,7 +3,9 @@ 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 { CONTROL_LABEL_LEADING, CONTROL_LABEL_WEIGHT } from "../system/_style-control-label.js";
+import { DATA_DISABLED_OPACITY, LABEL_DISABLED_INK, LABEL_DISABLED_OPACITY, SWITCH_DISABLED_TRACK } from "../system/_style-disabled.js";
+import { SWITCH_EDGE, SWITCH_THUMB, SWITCH_THUMB_CHECKED, SWITCH_THUMB_DISABLED } from "../system/_style-switch.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Switch } from "@base-ui/react/switch";
@@ -54,17 +56,17 @@ const Switch$1 = React.forwardRef(function Switch$2({ className, label, size = "
 		ref,
 		"data-slot": "switch",
 		"aria-labelledby": hasLabel ? labelId : void 0,
-		className: cn("relative inline-flex shrink-0 items-center rounded-full border border-border bg-surface-3 p-0 outline-none transition-colors duration-150 motion-reduce:transition-none", geometry.track, "hover:border-border-strong", "data-[checked]:border-accent data-[checked]:bg-accent", `${FOCUS_RING}`, "data-[disabled]:pointer-events-none data-[disabled]:opacity-40", "data-[invalid]:border-danger", className),
+		className: cn(`relative inline-flex shrink-0 items-center rounded-full border ${SWITCH_EDGE} bg-surface-3 p-0 outline-none transition-colors duration-150 motion-reduce:transition-none`, geometry.track, "data-[checked]:border-accent data-[checked]:bg-accent", `${FOCUS_RING}`, `data-[disabled]:pointer-events-none ${DATA_DISABLED_OPACITY} ${SWITCH_DISABLED_TRACK}`, "data-[invalid]:border-danger", className),
 		...elementProps,
 		children: /* @__PURE__ */ jsx(Switch.Thumb, {
 			"data-slot": "switch-thumb",
-			className: cn("absolute top-1/2 left-px -translate-y-1/2 rounded-full bg-fg-muted transition-transform duration-150 motion-reduce:transition-none", geometry.thumb, "data-[checked]:bg-accent-fg")
+			className: cn(`absolute top-1/2 left-px -translate-y-1/2 rounded-full ${SWITCH_THUMB} transition-transform duration-150 motion-reduce:transition-none`, geometry.thumb, SWITCH_THUMB_CHECKED, SWITCH_THUMB_DISABLED)
 		})
 	});
 	if (!hasLabel) return control;
 	return /* @__PURE__ */ jsxs("label", {
 		"data-slot": "switch-label",
-		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),
+		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: [control, /* @__PURE__ */ jsx("span", {
 			id: labelId,
 			children: label

package/dist/forms/tags-input.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 } from "./_glyphs.js";
-import { chipFieldClasses, chipRemoveClasses, listboxItemClasses, listboxListClasses, listboxPopupClasses, listboxPositionerClasses, valueChipClasses } from "./_listbox.js";
+import { chipFieldClasses, chipInputClasses, chipRemoveClasses, 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";
@@ -106,7 +107,7 @@ const TagsInput = React.forwardRef(function TagsInput({ value, defaultValue, onV
 					}), /* @__PURE__ */ jsx(Combobox.ChipRemove, {
 						"aria-label": removeLabel(tag),
 						className: chipRemoveClasses,
-						children: /* @__PURE__ */ jsx(CrossGlyph, { className: "size-icon-sm" })
+						children: /* @__PURE__ */ jsx(CrossGlyph, { className: GLYPH_SIZE })
 					})]
 				}, tag)), /* @__PURE__ */ jsx(Combobox.Input, {
 					ref,
@@ -116,7 +117,7 @@ const TagsInput = React.forwardRef(function TagsInput({ value, defaultValue, onV
 					"aria-label": ariaLabel,
 					"aria-labelledby": ariaLabelledBy,
 					onKeyDown: handleKeyDown,
-					className: cn(bareControlClasses, "h-control-sm w-auto min-w-[6ch]")
+					className: cn(bareControlClasses, chipInputClasses)
 				})] }) })
 			})
 		}), suggestions === void 0 ? null : /* @__PURE__ */ jsx(Combobox.Portal, {

package/dist/forms/textarea.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FIELD_PAD_MD } from "../system/_style-field-chassis.js";
 import { controlSurface } from "./_chassis.js";
 import { TEXTAREA_LEADING, TEXTAREA_PAD_Y } from "../system/_style-textarea.js";
 import * as React from "react";
@@ -30,7 +31,7 @@ const Textarea = React.forwardRef(function Textarea({ className, rows = 3, ...el
 			rows
 		}),
 		"data-slot": "textarea",
-		className: cn(controlSurface, `resize-y px-(--cue-space-4) ${TEXTAREA_PAD_Y} text-(length:--cue-text-ui) ${TEXTAREA_LEADING}`, className),
+		className: cn(controlSurface, `resize-y ${FIELD_PAD_MD} ${TEXTAREA_PAD_Y} text-(length:--cue-text-ui) ${TEXTAREA_LEADING}`, className),
 		...controlProps
 	});
 });

package/dist/forms/toggle-group.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { GROUP_GAP } from "../system/_style-group-gap.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
@@ -44,7 +45,7 @@ const ToggleGroup$1 = React.forwardRef(function ToggleGroup$2({ value, defaultVa
 		defaultValue,
 		onValueChange: onValueChange === void 0 ? void 0 : handleValueChange,
 		orientation,
-		className: cn("inline-flex items-center gap-(--cue-space-1)", orientation === "vertical" && "flex-col items-stretch", className),
+		className: cn(`inline-flex items-center ${GROUP_GAP}`, orientation === "vertical" && "flex-col items-stretch", className),
 		...groupProps,
 		children: /* @__PURE__ */ jsx(ToggleGroupSizeContext.Provider, {
 			value: size,

package/dist/forms/toggle.js

@@ -2,8 +2,10 @@
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "../system/_focus-ring.js";
 import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { DATA_DISABLED_OPACITY } from "../system/_style-disabled.js";
 import { cva } from "../lib/cva.js";
 import { ToggleGroupSizeContext } from "./toggle-group.js";
+import { TOGGLE_DISABLED, TOGGLE_EDGE, TOGGLE_HOVER_EDGE, TOGGLE_HOVER_GROUND, TOGGLE_HOVER_INK, TOGGLE_INK, TOGGLE_PRESSED_EDGE, TOGGLE_PRESSED_GROUND, TOGGLE_PRESSED_INK } from "../system/_style-toggle.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
@@ -14,7 +16,7 @@ import { Toggle } from "@base-ui/react/toggle";
 * the highlighted menu row. A solid accent block on a 22px control reads as a
 * second, louder button and drowns the labels beside it.
 */
-const toggleVariants = cva(`inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-[0.4em] whitespace-nowrap rounded-control border border-transparent bg-transparent ${CONTROL_FACE} font-medium text-fg-muted transition-colors duration-150 outline-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING} data-[pressed]:bg-accent-soft data-[pressed]:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-40`, {
+const toggleVariants = cva(`inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-[0.4em] whitespace-nowrap rounded-control border ${TOGGLE_EDGE} bg-transparent ${CONTROL_FACE} font-medium ${TOGGLE_INK} transition-colors duration-150 outline-none ${TOGGLE_HOVER_GROUND} ${TOGGLE_HOVER_INK} ${TOGGLE_HOVER_EDGE} ${FOCUS_RING} ${TOGGLE_PRESSED_GROUND} ${TOGGLE_PRESSED_EDGE} ${TOGGLE_PRESSED_INK} data-[disabled]:pointer-events-none ${DATA_DISABLED_OPACITY} ${TOGGLE_DISABLED}`, {
 	variants: {
 		size: {
 			sm: "text-(length:--cue-text-label)",

package/dist/instruments/meter.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { toRem } from "./_rem.js";
+import { METER_RADIUS } from "../system/_style-meter.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/instruments/meter.tsx
@@ -70,7 +71,7 @@ const Meter = React.forwardRef(function Meter({ className, percent, tone = "ok",
 		"data-provenance": provenance,
 		"data-empty": empty ? "true" : void 0,
 		"data-over-pace": overPace ? "true" : void 0,
-		className: cn("relative w-full overflow-hidden rounded-full bg-surface-3", TONE_CLASSES[tone], className),
+		className: cn(`relative w-full overflow-hidden ${METER_RADIUS} bg-surface-3`, TONE_CLASSES[tone], className),
 		style: {
 			height: toRem(height),
 			backgroundImage: trackImage,

package/dist/instruments/progress.js

@@ -2,7 +2,10 @@ import { cn } from "../lib/cn.js";
 import { LABEL_FACE } from "../system/_style-label-face.js";
 import { LABEL_CASE } from "../system/_style-label-case.js";
 import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
+import { CAPTION_SIZE_LABEL } from "../system/_style-caption-size.js";
 import { toRem } from "./_rem.js";
+import { CAPTION_INK_MUTED, CAPTION_INK_SUBTLE } from "../system/_style-caption-ink.js";
+import { CAPTION_WEIGHT } from "../system/_style-caption-weight.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Progress } from "@base-ui/react/progress";
@@ -57,15 +60,15 @@ const Progress$1 = React.forwardRef(function Progress$2({ className, trackClassN
 		...rootProps,
 		children: [hasHeader ? /* @__PURE__ */ jsxs("div", {
 			"data-slot": "progress-header",
-			className: cn("flex items-baseline gap-(--cue-space-3) text-(length:--cue-text-label)", LABEL_FACE),
+			className: cn(`flex items-baseline gap-(--cue-space-3) ${CAPTION_SIZE_LABEL}`, LABEL_FACE),
 			children: [label === void 0 ? null : /* @__PURE__ */ jsx(Progress.Label, {
 				id: namedByCaption ? captionId : void 0,
 				"data-slot": "progress-label",
-				className: cn("truncate text-fg-subtle", LABEL_TRACKING, LABEL_CASE),
+				className: cn(`truncate ${CAPTION_INK_SUBTLE} ${CAPTION_WEIGHT}`, LABEL_TRACKING, LABEL_CASE),
 				children: label
 			}), showValue ? /* @__PURE__ */ jsx(Progress.Value, {
 				"data-slot": "progress-value",
-				className: "ml-auto shrink-0 tabular-nums text-fg-muted"
+				className: `ml-auto shrink-0 tabular-nums ${CAPTION_INK_MUTED}`
 			}) : null]
 		}) : null, /* @__PURE__ */ jsx(Progress.Track, {
 			"data-slot": "progress-track",

package/dist/instruments/stat.js

@@ -1,11 +1,13 @@
 import { cn } from "../lib/cn.js";
 import { LABEL_INK_SUBTLE } 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 } from "../system/_style-label-tracking.js";
 import { LABEL_SIZE_MICRO } from "../system/_style-label-size.js";
 import { DATA_FACE } from "../system/_style-data-face.js";
+import { STAT_DETAIL_LEADING, STAT_DETAIL_SIZE, STAT_GAP, STAT_LEADING, STAT_SIZE, STAT_TRACKING, STAT_WEIGHT } from "../system/_style-stat.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/instruments/stat.tsx
@@ -41,7 +43,7 @@ const Stat = React.forwardRef(function Stat({ className, label, value, detail, t
 		ref,
 		"data-slot": "stat",
 		"data-tone": tone,
-		className: cn("flex min-w-0 flex-col gap-(--cue-space-2)", className),
+		className: cn("flex min-w-0 flex-col", STAT_GAP, className),
 		...elementProps,
 		children: [
 			/* @__PURE__ */ jsx("span", {
@@ -51,12 +53,12 @@ const Stat = React.forwardRef(function Stat({ className, label, value, detail, t
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"data-slot": "stat-value",
-				className: cn(`truncate ${DATA_FACE} text-(length:--cue-text-title) leading-none tabular-nums`, VALUE_TONE_CLASSES[tone]),
+				className: cn(`truncate ${DATA_FACE} ${STAT_SIZE} ${STAT_LEADING} ${STAT_WEIGHT} ${STAT_TRACKING} tabular-nums`, VALUE_TONE_CLASSES[tone]),
 				children: value
 			}),
 			detail === void 0 ? null : /* @__PURE__ */ jsx("span", {
 				"data-slot": "stat-detail",
-				className: `truncate ${DATA_FACE} text-(length:--cue-text-label) text-fg-muted`,
+				className: `truncate ${DATA_FACE} ${STAT_DETAIL_SIZE} ${STAT_DETAIL_LEADING} ${BODY_WEIGHT} text-fg-muted`,
 				children: detail
 			})
 		]

package/dist/instruments/table.js

@@ -8,6 +8,7 @@ import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import { LABEL_SIZE } from "../system/_style-label-size.js";
 import { BODY_SIZE, BODY_SIZE_LABEL } from "../system/_style-body-size.js";
 import { DATA_FACE } from "../system/_style-data-face.js";
+import { CELL_LEADING, CELL_PAD } from "../system/_style-cell.js";
 import { SELECTED_ROW } from "../system/_style-selected.js";
 import { HELP_INK } from "../system/_style-help-ink.js";
 import { ROW_PAD_Y } from "../system/_style-row-pad.js";
@@ -134,7 +135,7 @@ const TableHead = React.forwardRef(function TableHead({ className, numeric = fal
 		scope,
 		"data-slot": "table-head",
 		"data-numeric": numeric ? "" : void 0,
-		className: cn(`border-b border-border bg-surface-1 px-(--cue-pad-row-x) ${ROW_PAD_Y} text-left whitespace-nowrap`, LABEL_SIZE, LABEL_INK_SUBTLE, LABEL_WEIGHT_NORMAL, LABEL_FACE, LABEL_TRACKING, LABEL_CASE, sticky ? "sticky top-0 z-3 border-b-0 shadow-[inset_0_-1px_0_var(--cue-hair-strong)]" : null, className),
+		className: cn(`border-b border-border bg-surface-1 ${CELL_PAD} ${ROW_PAD_Y} text-left whitespace-nowrap`, LABEL_SIZE, LABEL_INK_SUBTLE, LABEL_WEIGHT_NORMAL, LABEL_FACE, LABEL_TRACKING, LABEL_CASE, sticky ? "sticky top-0 z-3 border-b-0 shadow-[inset_0_-1px_0_var(--cue-hair-strong)]" : null, className),
 		...elementProps
 	});
 });
@@ -238,7 +239,7 @@ const Table = {
 			ref,
 			"data-slot": "table-cell",
 			"data-numeric": numeric ? "" : void 0,
-			className: cn(`px-(--cue-pad-row-x) ${ROW_PAD_Y} align-middle`, className),
+			className: cn(`${CELL_PAD} ${ROW_PAD_Y} ${CELL_LEADING} align-middle`, className),
 			...elementProps
 		});
 	}),