@cueplusplus/ui 0.14.1 → 0.16.0

package/dist/chrome/section-header.js

@@ -35,7 +35,7 @@ const SectionHeader = React.forwardRef(function SectionHeader({ className, label
 		}) : null,
 		/* @__PURE__ */ jsx("span", {
 			"data-slot": "section-header-label",
-			className: "shrink-0 font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-muted uppercase",
+			className: "shrink-0 font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-muted uppercase",
 			children: label
 		}),
 		count === void 0 ? null : /* @__PURE__ */ jsx("span", {

package/dist/color/color-field.d.ts

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

package/dist/color/color-picker.d.ts

@@ -1,5 +1,6 @@
 import { ColorFormat } from "./_convert.js";
-import { FormControlSize } from "../forms/_chassis.js";
+import { FormControlSize } from "../forms/_chassis-size.js";
+import "../forms/_chassis.js";
 import * as React from "react";
 //#region src/color/color-picker.d.ts
 interface ColorPickerProps {

package/dist/configurator/configurator.js

@@ -221,7 +221,7 @@ function ThemeConfigurator({ position: positionProp, defaultPosition = "floating
 					}),
 					/* @__PURE__ */ jsx("span", {
 						id: titleId,
-						className: "flex-1 truncate font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-muted uppercase",
+						className: "flex-1 truncate font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-muted uppercase",
 						children: title
 					}),
 					moved === 0 ? null : /* @__PURE__ */ jsx(Chip, {

package/dist/configurator/export-dialog.js

@@ -70,7 +70,7 @@ function ExportDialog({ open, onOpenChange, overrides, scope, defaultFormat = "c
 				/* @__PURE__ */ jsxs(Field, {
 					className: "gap-(--cue-space-1)",
 					children: [/* @__PURE__ */ jsx(FieldLabel, {
-						className: "font-mono text-(length:--cue-text-micro) tracking-[0.15em] uppercase",
+						className: "font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) uppercase",
 						children: "Theme name"
 					}), /* @__PURE__ */ jsx(Input, {
 						size: "sm",

package/dist/configurator/panel-sections.js

@@ -133,7 +133,7 @@ function TextTokenField({ label, token, edits, placeholder }) {
 	return /* @__PURE__ */ jsxs(Field, {
 		className: "gap-(--cue-space-1)",
 		children: [/* @__PURE__ */ jsx(FieldLabel, {
-			className: "font-mono text-(length:--cue-text-micro) tracking-[0.15em] uppercase",
+			className: "font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) uppercase",
 			children: label
 		}), /* @__PURE__ */ jsx(Input, {
 			size: "sm",

package/dist/configurator/token-editor.js

@@ -133,7 +133,7 @@ function TokenEditor({ values, overridden, onTokenChange, onTokenReset, groups =
 			"data-slot": "configurator-token-group",
 			className: "flex flex-col gap-(--cue-space-2)",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "font-mono text-(length:--cue-text-micro) tracking-[0.15em] text-fg-subtle uppercase",
+				className: "font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
 				children: group.label
 			}), group.tokens.map((token) => {
 				const property = tokenProperty(token);

package/dist/date/calendar.js

@@ -23,14 +23,14 @@ const CALENDAR_CLASSES = {
 	months: "relative flex flex-wrap items-start gap-(--cue-space-5)",
 	month: "flex flex-col gap-(--cue-space-2)",
 	month_caption: "flex h-control-sm items-center justify-center",
-	caption_label: "font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase",
+	caption_label: "font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
 	nav: "absolute inset-x-0 top-0 flex h-control-sm items-center justify-between",
 	button_previous: "flex size-control-sm cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors duration-150 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-30 motion-reduce:transition-none",
 	button_next: "flex size-control-sm cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors duration-150 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-30 motion-reduce:transition-none",
 	chevron: "size-icon-sm fill-current",
 	month_grid: "border-collapse border-spacing-0",
 	weekdays: "",
-	weekday: "size-control-sm p-0 text-center align-middle font-mono text-(length:--cue-text-micro) font-normal tracking-[0.1em] text-fg-subtle uppercase",
+	weekday: "size-control-sm p-0 text-center align-middle font-mono text-(length:--cue-text-micro) font-normal tracking-(--cue-tracking-caps-tight) text-fg-subtle uppercase",
 	week: "",
 	day: "p-0 text-center align-middle",
 	day_button: "size-control-sm cursor-pointer rounded-(--radius-control) border-0 bg-transparent p-0 font-mono text-(length:--cue-text-ui) tabular-nums text-fg-muted outline-none transition-colors duration-150 hover:bg-surface-3 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-30 motion-reduce:transition-none",

package/dist/date/date-field.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "../forms/_chassis.js";
+import { FormControlSize } from "../forms/_chassis-size.js";
+import "../forms/_chassis.js";
 import * as React from "react";
 import { DateFieldProps, DateInputProps, DateValue } from "react-aria-components";
 //#region src/date/date-field.d.ts

package/dist/date/date-picker.d.ts

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

package/dist/date/date-range-picker.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "../forms/_chassis.js";
+import { FormControlSize } from "../forms/_chassis-size.js";
+import "../forms/_chassis.js";
 import { CalendarProps } from "./calendar.js";
 import * as React from "react";
 import { DateRange } from "react-day-picker";

package/dist/date/time-field.d.ts

@@ -1,4 +1,5 @@
-import { FormControlSize } from "../forms/_chassis.js";
+import { FormControlSize } from "../forms/_chassis-size.js";
+import "../forms/_chassis.js";
 import * as React from "react";
 import { DateInputProps, TimeFieldProps, TimeValue } from "react-aria-components";
 //#region src/date/time-field.d.ts

package/dist/elements/context-usage.js

@@ -136,17 +136,17 @@ const ContextUsage = React.forwardRef(function ContextUsage({ categories, limit,
 					children: [
 						/* @__PURE__ */ jsx("th", {
 							scope: "col",
-							className: "pb-1 text-start font-normal tracking-[0.12em]",
+							className: "pb-1 text-start font-normal tracking-(--cue-tracking-label)",
 							children: copy.category
 						}),
 						/* @__PURE__ */ jsx("th", {
 							scope: "col",
-							className: "pb-1 text-end font-normal tracking-[0.12em]",
+							className: "pb-1 text-end font-normal tracking-(--cue-tracking-label)",
 							children: copy.tokens
 						}),
 						/* @__PURE__ */ jsx("th", {
 							scope: "col",
-							className: "pb-1 text-end font-normal tracking-[0.12em]",
+							className: "pb-1 text-end font-normal tracking-(--cue-tracking-label)",
 							children: copy.usage
 						})
 					]

package/dist/elements/transcript-rules.js

@@ -86,7 +86,7 @@ const UnreadDivider = React.forwardRef(function UnreadDivider({ label = "New", c
 			className: "bg-accent/40 h-px flex-1"
 		}), /* @__PURE__ */ jsx("span", {
 			"aria-hidden": true,
-			className: cn(mono, "text-accent shrink-0 tracking-[0.15em] uppercase"),
+			className: cn(mono, "text-accent shrink-0 tracking-(--cue-tracking-caps) uppercase"),
 			children: label
 		})]
 	});

package/dist/forms/_chassis-size.d.ts

@@ -0,0 +1,22 @@
+//#region src/forms/_chassis-size.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.
+ *
+ * **Its own module, and the reason is the manifest.** `@repo/docgen`
+ * attributes a custom property to a component by the FILE its class string
+ * lives in, and it does not distinguish a type-only import from a value one.
+ * While this type lived in `_chassis.ts`, `Toggle` and `ToggleGroup` — which
+ * import nothing from there but the type and paint their own `toggleVariants`
+ * box — advertised `--cue-paint-stroke-*` in their published manifests. Found
+ * in review of the stroke slice; the manifest is a public contract, so a
+ * component claiming a token it never paints is wrong in the way that matters.
+ *
+ * Nothing but a type may join this file, for the same reason.
+ */
+type FormControlSize = "sm" | "md" | "lg";
+//#endregion
+export { FormControlSize };

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.
  *
@@ -97,7 +90,7 @@ type FormControlSize = "sm" | "md" | "lg";
  * `focus-visible:outline-solid` re-declares the outline style the sibling
  * `outline-none` switched off — see the note on `buttonChassis`.
  */
-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-(--radius-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] 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";
 /**
  * The full recessed-control recipe, one variant per rung of the control ladder.
  *
@@ -161,4 +154,4 @@ declare const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 f
  */
 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";
 //#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,5 @@
 import { cva } from "../lib/cva.js";
+import { STROKE_SUNKEN } from "../system/_paint-stroke-sunken.js";
 //#region src/forms/_chassis.ts
 /**
 * Everything the recessed control chassis paints except the box itself.
@@ -89,7 +90,7 @@ import { cva } from "../lib/cva.js";
 * `focus-visible:outline-solid` re-declares the outline style the sibling
 * `outline-none` switched off — see the note on `buttonChassis`.
 */
-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-(--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`;
 /**
 * The full recessed-control recipe, one variant per rung of the control ladder.
 *

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/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/field.js

@@ -43,7 +43,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-[0.1em] text-fg-muted uppercase select-none data-[disabled]:opacity-40", className),
+		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),
 		...elementProps
 	});
 });

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/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/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/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/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,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { controlVariants } from "./_chassis.js";
+import { ELEVATION_2 } from "../system/_paint-elevation.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { CaretGlyph, TickGlyph } from "./_glyphs.js";
 import * as React from "react";
@@ -65,7 +66,7 @@ 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-(--radius-overlay) border border-border-overlay bg-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, {

package/dist/forms/slider.js

@@ -40,7 +40,7 @@ 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: "flex items-baseline justify-between gap-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-[0.1em] text-fg-muted uppercase",
+			className: "flex items-baseline justify-between gap-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps-tight) text-fg-muted uppercase",
 			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",

package/dist/forms/tags-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/tags-input.d.ts
 interface TagsInputProps {

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

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

package/dist/forms/toggle.d.ts

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

package/dist/index.d.ts

@@ -34,7 +34,8 @@ import { TitleBar, TitleBarProps } from "./chrome/title-bar.js";
 import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityToggleProps } from "./chrome/tree.js";
 import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps } from "./chrome/toolbar.js";
 import "./chrome/index.js";
-import { ControlVariantProps, FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./forms/_chassis.js";
+import { FormControlSize } from "./forms/_chassis-size.js";
+import { ControlVariantProps, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./forms/_chassis.js";
 import { TokenOverrides, isSafeTokenValue } from "./system/overrides.js";
 import { FontFamilies, ResolvedMode, ThemeContextValue, ThemeProvider, ThemeProviderProps } from "./system/theme-provider.js";
 import { Autocomplete, AutocompleteProps } from "./forms/autocomplete.js";

package/dist/instruments/code-block.js

@@ -159,7 +159,7 @@ const CodeBlock = React.forwardRef(function CodeBlock({ code, label, language =
 			className: "flex items-center justify-between gap-(--cue-space-4) border-b border-border px-(--cue-pad-row-x) py-(--cue-pad-row-y)",
 			children: [/* @__PURE__ */ jsx("span", {
 				"data-slot": "code-block-label",
-				className: "font-mono text-(length:--cue-text-micro) tracking-[0.15em] text-fg-subtle uppercase",
+				className: "font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
 				children: label ?? language
 			}), /* @__PURE__ */ jsx(CopyButton, { value: code })]
 		}), /* @__PURE__ */ jsx("pre", {

package/dist/instruments/ledger.js

@@ -13,7 +13,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * be said out loud, because `<h2>` and `<h3>` come bold by default and a bold
 * micro-label in a dense list reads as a second kind of emphasis.
 */
-const LEDGER_LABEL = "font-mono text-(length:--cue-text-label) font-normal tracking-[0.15em] text-fg-subtle uppercase";
+const LEDGER_LABEL = "font-mono text-(length:--cue-text-label) font-normal tracking-(--cue-tracking-caps) text-fg-subtle uppercase";
 /**
 * The disclosure button a collapsible heading holds.
 *

package/dist/instruments/log-viewer.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { Chip } from "../primitives/chip.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import { ELEVATION_2 } from "../system/_paint-elevation.js";
 import { toRem } from "./_rem.js";
 import { useControlHeight } from "../system/use-density.js";
 import { ansiSpans } from "./_ansi.js";
@@ -204,7 +205,7 @@ const LogViewer = React.forwardRef(function LogViewer({ className, lines, follow
 			pending > 0 ? /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"data-slot": "log-viewer-jump",
-				className: "absolute bottom-(--cue-space-4) left-1/2 -translate-x-1/2 cursor-pointer rounded-(--radius-control) border border-border-overlay bg-surface-2 px-(--cue-space-4) py-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg shadow-[0_8px_24px_rgba(0,0,0,0.4)] outline-none hover:border-accent hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent",
+				className: `absolute bottom-(--cue-space-4) left-1/2 -translate-x-1/2 cursor-pointer rounded-(--radius-control) border border-border-overlay bg-surface-2 px-(--cue-space-4) py-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg ${ELEVATION_2} outline-none hover:border-accent hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent`,
 				onClick: jumpToBottom,
 				children: newLinesLabel(pending)
 			}) : null

package/dist/instruments/progress.js

@@ -58,7 +58,7 @@ const Progress$1 = React.forwardRef(function Progress$2({ className, trackClassN
 			children: [label === void 0 ? null : /* @__PURE__ */ jsx(Progress.Label, {
 				id: namedByCaption ? captionId : void 0,
 				"data-slot": "progress-label",
-				className: "truncate tracking-[0.15em] text-fg-subtle uppercase",
+				className: "truncate tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
 				children: label
 			}), showValue ? /* @__PURE__ */ jsx(Progress.Value, {
 				"data-slot": "progress-value",

package/dist/instruments/stat.js

@@ -39,7 +39,7 @@ const Stat = React.forwardRef(function Stat({ className, label, value, detail, t
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				"data-slot": "stat-label",
-				className: "truncate font-mono text-(length:--cue-text-micro) tracking-[0.15em] text-fg-subtle uppercase",
+				className: "truncate font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
 				children: label
 			}),
 			/* @__PURE__ */ jsx("span", {

package/dist/instruments/table.js

@@ -122,7 +122,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) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-[0.15em] whitespace-nowrap text-fg-subtle uppercase", 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 px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-(--cue-tracking-caps) whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky top-0 z-3 border-b-0 shadow-[inset_0_-1px_0_var(--cue-hair-strong)]" : null, className),
 		...elementProps
 	});
 });
@@ -201,7 +201,7 @@ const Table = {
 				colSpan: span,
 				scope: "rowgroup",
 				"data-slot": "table-group-cell",
-				className: cn("bg-bg px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-[0.15em] whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky z-2 [top:var(--cue-table-group-top,0px)]" : null, className),
+				className: cn("bg-bg px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-label) font-normal tracking-(--cue-tracking-caps) whitespace-nowrap text-fg-subtle uppercase", sticky ? "sticky z-2 [top:var(--cue-table-group-top,0px)]" : null, className),
 				children: [/* @__PURE__ */ jsx(Label, {
 					"data-slot": "table-group-label",
 					className: TABLE_GROUP_LABEL,

package/dist/instruments/terminal-frame.js

@@ -191,7 +191,7 @@ const TerminalFrame = React.forwardRef(function TerminalFrame({ className, title
 			className: "flex h-control-md shrink-0 items-center justify-between gap-(--cue-space-3) border-b border-border px-(--cue-pad-row-x)",
 			children: [/* @__PURE__ */ jsx("span", {
 				"data-slot": "terminal-frame-title",
-				className: "min-w-0 truncate text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase",
+				className: "min-w-0 truncate text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
 				children: title
 			}), copy ? /* @__PURE__ */ jsx("span", {
 				"data-slot": "terminal-frame-copy",

package/dist/layout/_ground.js

@@ -2,7 +2,7 @@
 /** What each ground paints. `"none"` paints nothing, so whatever is behind shows through. */
 const GROUND_CLASSES = {
 	plain: "bg-surface-1",
-	dots: "bg-surface-1 bg-[radial-gradient(circle,var(--cue-hair-strong)_1px,transparent_1.3px)] bg-[length:14px_14px]",
+	dots: "bg-surface-1 bg-(image:--cue-paint-screen) bg-(length:--cue-paint-screen-size)",
 	none: ""
 };
 //#endregion

package/dist/layout/card.js

@@ -1,4 +1,6 @@
 import { cn } from "../lib/cn.js";
+import { RIM_INSET } from "../system/_paint-rim.js";
+import { STROKE_SURFACE_1 } from "../system/_paint-stroke-surface-1.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 /**
@@ -19,7 +21,7 @@ const Card = {
 			ref,
 			"data-slot": "card",
 			"data-seam": seam ? "" : void 0,
-			className: cn("group/card flex flex-col overflow-hidden rounded-(--radius-surface) border border-border", seam ? "gap-px bg-border" : "bg-surface-1", className),
+			className: cn("group/card flex flex-col overflow-hidden rounded-(--radius-surface)", seam ? "border border-border gap-px bg-border" : `${STROKE_SURFACE_1} ${RIM_INSET}`, className),
 			...elementProps
 		});
 	}),

package/dist/layout/collapsible.js

@@ -94,7 +94,7 @@ const Disclosure = React.forwardRef(function Disclosure({ className, label = "ad
 		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
 			ref,
 			"data-slot": "disclosure-trigger",
-			className: cn("group/disclosure inline-flex cursor-pointer items-center gap-(--cue-space-2) self-start border-0 bg-transparent p-0 py-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase transition-colors duration-150 outline-none select-none hover:text-fg-muted focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent", className),
+			className: cn("group/disclosure inline-flex cursor-pointer items-center gap-(--cue-space-2) self-start border-0 bg-transparent p-0 py-(--cue-space-2) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase transition-colors duration-150 outline-none select-none hover:text-fg-muted focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent", className),
 			...elementProps,
 			children: [
 				/* @__PURE__ */ jsx("span", {

package/dist/layout/description-list.js

@@ -20,7 +20,7 @@ const DescriptionList = {
 		return /* @__PURE__ */ jsx("dt", {
 			ref,
 			"data-slot": "description-list-term",
-			className: cn("font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase", className),
+			className: cn("font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase", className),
 			...elementProps
 		});
 	}),

package/dist/layout/preview.d.ts

@@ -1,6 +1,6 @@
 import { PreviewGround } from "./_ground.js";
 import * as React from "react";
-import { StyleSet } from "@cueplusplus/tokens";
+import { Paint, StyleSet } from "@cueplusplus/tokens";
 import { Density as Density$1, FontName, Mode, ThemeName } from "@cueplusplus/theme-base";
 //#region src/layout/preview.d.ts
 /** Where the chrome sits and what the stage's ground is. */
@@ -71,6 +71,18 @@ interface PreviewProps extends Omit<React.ComponentPropsWithoutRef<"div">, "chil
    * `<body>` and inherits nothing from the stage's DOM.
    */
   styleSet?: StyleSet;
+  /**
+   * A look pack for the stage: the finish its surfaces wear.
+   *
+   * Stamped as `data-paint` on the stage element, and republished to React for
+   * the same reason `styleSet` is — a popover opened on the stage mounts on
+   * `<body>` and inherits nothing from the stage's DOM, so it has to be told.
+   *
+   * Absent means inherit. `none` is a value that opts OUT of an ambient pack,
+   * which is what a stage uses to show a component unpainted inside a page that
+   * is not.
+   */
+  paint?: Paint;
   /**
    * Resize the stage by dragging or with the keyboard. `true` gives both axes
    * inside the default bounds (160–1280 px wide, 96–960 px tall); an object