@cueplusplus/ui 0.15.0 → 0.17.0

package/dist/overlays/_surface.js

@@ -1,3 +1,17 @@
+import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { LABEL_INK_SUBTLE } from "../system/_style-label-ink.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 { ELEVATION_2 } from "../system/_paint-elevation.js";
+import { LABEL_SIZE } from "../system/_style-label-size.js";
+import { STROKE_SURFACE_2 } from "../system/_paint-stroke-surface-2.js";
+import { BODY_VOICE } from "../system/_style-body.js";
+import { MENU_ITEM_INK, MENU_ITEM_RADIUS } from "../system/_style-menu.js";
+import { OVERLAY_TITLE_VOICE } from "../system/_style-overlay-title.js";
+import { BODY_LEADING } from "../system/_style-body-leading.js";
+import { BODY_SIZE } from "../system/_style-body-size.js";
 //#region src/overlays/_surface.ts
 /**
 * The conventions every floating surface in this system shares.
@@ -18,12 +32,64 @@
 * @example
 * <Popover.Popup className={cn(overlaySurfaceClasses, className)} />
 */
-const overlaySurfaceClasses = "border border-border-overlay bg-surface-2 rounded-(--radius-overlay) shadow-[0_8px_24px_rgba(0,0,0,0.4)]";
+const overlaySurfaceClasses = `rounded-overlay ${STROKE_SURFACE_2} ${ELEVATION_2}`;
 /**
 * The full-viewport dim behind a modal surface. `--cue-scrim` is theme-owned —
 * dusk and hivehub tune their own — so the value is never hard-coded here.
+*
+* **The scrim's own filter (spec §3.10, P0.6) lives on a `::before`
+* pseudo-element, never on `backdrop-filter` of the scrim itself.** Every
+* element here is public through `backdropClassName` (dialog, sheet, drawer,
+* alert-dialog and command-palette all feed it into
+* `cn(scrimClasses, backdropClassName)`), which exists precisely so a consumer
+* can put their own `backdrop-blur-*` on this element — so the scrim's own
+* `backdrop-filter` is a slot this recipe must never write to at all, not a
+* slot to compose into.
+*
+* **Why not fill one of Tailwind's own composition slots instead (the
+* `_paint-glass.ts` technique).** Measured, and it does not survive
+* `paint-scrim-filter: none`, which is every shipped pack's value but
+* glaze's (`blur(8px)`, the Porcelain Look's dialog backdrop).
+* Tailwind's composed `backdrop-filter: var(--tw-backdrop-blur,)
+* var(--tw-backdrop-brightness,) … var(--tw-backdrop-grayscale,) …` accepts
+* only `<filter-function>`s in that list; `none` is not one, so a slot filled
+* with the literal text `none` sitting beside a consumer's `blur(8px)` is an
+* **invalid** `backdrop-filter` value as a whole — not "no extra blur" but a
+* parse failure that drops the entire declaration, computing `none` even for
+* the consumer's own choice. `_paint-glass.ts` never meets this: its slot's
+* default is a real filter function (`blur(8px)`), never the keyword `none`.
+*
+* **The pseudo-element has no such slot to collide over.** Its own
+* `backdrop-filter: var(--cue-paint-scrim-filter, none)` is the only
+* declaration for that property on that box, so `none` is simply valid and
+* inert there, exactly as intended, whatever the scrim element's own
+* `backdrop-filter` (via `backdropClassName`) computes. `content-['']` gives
+* it a box; `absolute inset-0` sizes it to the scrim, whose own `fixed`
+* positioning is a containing block for it; `pointer-events-none` keeps it out
+* of the scrim's own click handling. The pseudo paints after the scrim's own
+* `bg-(--cue-scrim)`, so a real filter blurs that tint together with the page
+* — a flat tint, so the blur of it is the same tint.
+*
+* **The scrim never fades by its own opacity, because that would isolate the
+* pseudo's backdrop.** An ancestor with opacity under 1 is a backdrop root: a
+* descendant's `backdrop-filter` sees only what is painted inside it. When the
+* scrim faded in by `opacity`, glaze's blur on the pseudo therefore had
+* nothing to blur for the whole fade — the page stayed sharp while it dimmed,
+* snapped to 8px the frame opacity reached 1, and lost the blur on the first
+* frame of the exit (measured in Chromium; `paint-noop.spec.ts`'s P43 case
+* reads the pixels halfway through). So the scrim holds opacity 1 and fades
+* its parts: its background from `transparent`, the pseudo by its *own*
+* opacity (an element's own opacity does not isolate its own backdrop), and
+* its own `backdrop-filter` from `none` — the last only so a consumer's
+* `backdrop-blur-*`, which faded with the scrim's opacity before, still fades
+* rather than snapping in. That one is written for the starting and ending
+* frames alone, where a whole-property `none` outranks the consumer's
+* composed declaration without entering it; at rest the property is theirs.
+* The pseudo's `transition` and timing are its own classes: Tailwind
+* registers `--tw-duration` and `--tw-ease` with `inherits: false`, so the
+* scrim's `duration-150 ease-out` never reach it.
 */
-const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) transition-opacity duration-150 ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[ending-style]:opacity-0";
+const scrimClasses = "fixed inset-0 z-50 bg-(--cue-scrim) before:absolute before:inset-0 before:content-[''] before:pointer-events-none before:[backdrop-filter:var(--cue-paint-scrim-filter,none)] transition-[background-color,backdrop-filter] duration-150 ease-out before:transition-opacity before:duration-150 before:ease-out motion-reduce:transition-none motion-reduce:before:transition-none data-[starting-style]:bg-transparent data-[ending-style]:bg-transparent data-[starting-style]:[backdrop-filter:none] data-[ending-style]:[backdrop-filter:none] data-[starting-style]:before:opacity-0 data-[ending-style]:before:opacity-0";
 /**
 * What a Base UI `Positioner` needs and nothing more: it is a layout box, not a
 * painted one. The stacking context lives here so the popup itself can stay
@@ -44,22 +110,30 @@ const overlayPopupTransitionClasses = "origin-(--transform-origin) transition-[o
 * transition property list to name both.
 */
 const overlayModalTransitionClasses = "transition-[opacity,scale] duration-150 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";
-/** Body copy inside an overlay: mono, one rung under the panel's own text. */
-const overlayTextClasses = "font-mono text-(length:--cue-text-ui) text-fg";
-/** The heading line of a dialog, an alert dialog or a popover. */
-const overlayTitleClasses = "font-mono text-(length:--cue-text-emphasis) font-medium text-fg";
-/** The supporting line under an overlay title. */
-const overlayDescriptionClasses = "font-mono text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted";
+/**
+* Body copy inside an overlay: the body voice (mono unless a style set names
+* another face — `_style-body.ts`), one rung under the panel's own text.
+*/
+const overlayTextClasses = `${BODY_VOICE} text-(length:--cue-text-ui) text-fg`;
+/**
+* The heading line of a dialog, an alert dialog or a popover: the title voice's
+* face, weight and ink at the overlay title's own size (`_style-overlay-title.ts`).
+*/
+const overlayTitleClasses = OVERLAY_TITLE_VOICE;
+/** The supporting line under an overlay title, in the body voice. */
+const overlayDescriptionClasses = `${BODY_VOICE} ${BODY_SIZE} ${BODY_LEADING} text-fg-muted`;
 /** The action strip at the foot of a modal surface. */
 const overlayFooterClasses = "flex items-center justify-end gap-(--cue-space-3) pt-(--cue-space-2)";
 /**
 * One row of a menu: the short rung of the density control ladder, highlighted
 * with `accent-soft` rather than a solid fill (the luma defect ruling — a solid
-* accent bar on a hovered row is too loud at console density).
+* accent bar on a hovered row is too loud at console density). The row's ink
+* and the highlight are the style set's, with those as their defaults
+* (`_style-menu.ts`).
 */
-const menuItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) rounded-(--radius-control) 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-[disabled]:pointer-events-none data-[disabled]:opacity-40";
-/** The uppercase mono caption over a group of menu rows. */
-const menuLabelClasses = "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase select-none";
+const menuItemClasses = `flex h-control-sm cursor-default items-center gap-(--cue-space-2) ${MENU_ITEM_RADIUS} px-(--cue-space-3) ${CONTROL_FACE} text-(length:--cue-text-ui) ${MENU_ITEM_INK} outline-none select-none data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
+/** The uppercase mono caption over a group of menu rows — by default. */
+const menuLabelClasses = `flex h-control-sm items-center px-(--cue-space-3) ${LABEL_FACE} ${LABEL_SIZE} ${LABEL_TRACKING} ${LABEL_INK_SUBTLE} ${LABEL_WEIGHT} ${LABEL_CASE} select-none`;
 /** The hairline between menu groups. */
 const menuSeparatorClasses = "my-(--cue-space-1) h-px bg-border";
 /** Padding of a menu popup — a single space unit so rows reach the rim. */

package/dist/overlays/command-palette.js

@@ -1,5 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { CONTROL_FACE } from "../system/_style-control-face.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 { SearchGlyph } from "./_glyphs.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { overlayModalTransitionClasses, overlaySurfaceClasses, scrimClasses } from "./_surface.js";
@@ -48,7 +52,7 @@ function groupCommands(items) {
 	return groups;
 }
 /** The row: same rhythm as a menu row, with a reserved gutter for the icon. */
-const commandItemClasses = "flex h-control-md cursor-default items-center gap-(--cue-space-3) rounded-(--radius-control) 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-[disabled]:pointer-events-none data-[disabled]:opacity-40";
+const commandItemClasses = `flex h-control-md cursor-default items-center gap-(--cue-space-3) rounded-control px-(--cue-space-3) ${CONTROL_FACE} text-(length:--cue-text-ui) text-fg-muted outline-none select-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
 /**
 * The ⌘K surface: type a few letters, run a command.
 *
@@ -140,12 +144,12 @@ function CommandPalette({ items, onSelect, open: openProp, defaultOpen = false,
 								"aria-label": label,
 								placeholder,
 								"data-slot": "command-palette-input",
-								className: "h-full w-full min-w-0 border-0 bg-transparent p-0 font-mono text-(length:--cue-text-body) text-fg outline-none placeholder:text-fg-subtle"
+								className: cn("h-full w-full min-w-0 border-0 bg-transparent p-0 text-(length:--cue-text-body) text-fg outline-none placeholder:text-fg-subtle", CONTROL_FACE)
 							})]
 						}),
 						/* @__PURE__ */ jsx(Combobox.Empty, {
 							"data-slot": "command-palette-empty",
-							className: "flex h-control-lg items-center px-(--cue-space-4) font-mono text-(length:--cue-text-ui) text-fg-subtle select-none",
+							className: cn("flex h-control-lg items-center px-(--cue-space-4) text-(length:--cue-text-ui) text-fg-subtle select-none", CONTROL_FACE),
 							children: emptyMessage
 						}),
 						/* @__PURE__ */ jsx(Combobox.List, {
@@ -155,7 +159,7 @@ function CommandPalette({ items, onSelect, open: openProp, defaultOpen = false,
 								items: group.items,
 								className: "block",
 								children: [group.value === "" ? null : /* @__PURE__ */ jsx(Combobox.GroupLabel, {
-									className: "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) text-fg-subtle uppercase select-none",
+									className: cn("flex h-control-sm items-center px-(--cue-space-3) text-(length:--cue-text-micro) text-fg-subtle select-none", LABEL_FACE, LABEL_TRACKING, LABEL_CASE),
 									children: group.value
 								}), /* @__PURE__ */ jsx(Combobox.Collection, { children: (item) => /* @__PURE__ */ jsxs(Combobox.Item, {
 									value: item,
@@ -182,7 +186,7 @@ function CommandPalette({ items, onSelect, open: openProp, defaultOpen = false,
 					]
 				}), footer === null ? null : /* @__PURE__ */ jsx("div", {
 					"data-slot": "command-palette-footer",
-					className: "flex shrink-0 items-center gap-(--cue-space-4) border-t border-border bg-surface-1 px-(--cue-space-4) py-(--cue-space-2) font-mono text-(length:--cue-text-micro) text-fg-subtle select-none",
+					className: cn("flex shrink-0 items-center gap-(--cue-space-4) border-t border-border bg-surface-1 px-(--cue-space-4) py-(--cue-space-2) text-(length:--cue-text-micro) text-fg-subtle select-none", CONTROL_FACE),
 					children: footer
 				})]
 			})]

package/dist/overlays/dialog.d.ts

@@ -8,6 +8,11 @@ import { Dialog } from "@base-ui/react/dialog";
  * Centring is `top/left 50%` plus a translate rather than a flex-centred
  * wrapper: the popup owns its own position, so nothing else has to cover the
  * viewport and steal pointer events from the scrim.
+ *
+ * Its corner is `DIALOG_RADIUS`, the style set's `--cue-style-dialog-radius`
+ * over the overlay rung, spent after `overlaySurfaceClasses` so the popup's
+ * own `cn` drops the shared `rounded-overlay`: only the dialog reads the name,
+ * and every other overlay keeps the rung.
  */
 declare const dialogPopupVariants: (props?: ({
   width?: "sm" | "md" | "lg" | null | undefined;

package/dist/overlays/dialog.js

@@ -15,8 +15,13 @@ import { Dialog } from "@base-ui/react/dialog";
 * Centring is `top/left 50%` plus a translate rather than a flex-centred
 * wrapper: the popup owns its own position, so nothing else has to cover the
 * viewport and steal pointer events from the scrim.
+*
+* Its corner is `DIALOG_RADIUS`, the style set's `--cue-style-dialog-radius`
+* over the overlay rung, spent after `overlaySurfaceClasses` so the popup's
+* own `cn` drops the shared `rounded-overlay`: only the dialog reads the name,
+* and every other overlay keeps the rung.
 */
-const dialogPopupVariants = cva(`${overlaySurfaceClasses} ${overlayModalTransitionClasses} fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-(--cue-space-4) overflow-y-auto p-(--cue-space-6) outline-none`, {
+const dialogPopupVariants = cva(`${overlaySurfaceClasses} rounded-[calc(var(--cue-style-dialog-radius,var(--cue-radius-overlay))*var(--cue-radius-scale))] ${overlayModalTransitionClasses} fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-(--cue-space-4) overflow-y-auto p-(--cue-space-6) outline-none`, {
 	variants: { width: {
 		sm: "max-w-[20rem]",
 		md: "max-w-[28rem]",

package/dist/overlays/info-tip.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { Tooltip } from "./tooltip.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -27,7 +28,7 @@ function InfoTip({ text, width = 224, label = "More information", side = "top",
 		delay,
 		"aria-label": label,
 		"data-slot": "info-tip-trigger",
-		className: cn("inline-flex size-[0.8125rem] shrink-0 cursor-help items-center justify-center rounded-full border border-border-strong bg-transparent font-mono text-(length:--cue-text-micro) leading-none font-bold text-fg-muted italic outline-none select-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),
+		className: cn(`inline-flex size-[0.8125rem] shrink-0 cursor-help items-center justify-center rounded-full border border-border-strong bg-transparent font-mono text-(length:--cue-text-micro) leading-none font-bold text-fg-muted italic outline-none select-none hover:border-accent hover:text-accent ${FOCUS_RING}`, className),
 		children: "i"
 	}), /* @__PURE__ */ jsx(Tooltip.Content, {
 		side,

package/dist/overlays/menubar.js

@@ -1,5 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { menuPopupClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "./_surface.js";
 import { DropdownMenu } from "./dropdown-menu.js";
@@ -66,7 +68,7 @@ const Menubar$1 = {
 		return /* @__PURE__ */ jsx(Menu.Trigger, {
 			ref,
 			"data-slot": "menubar-trigger",
-			className: cn("inline-flex h-control-sm shrink-0 cursor-default items-center rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted transition-colors duration-150 outline-none select-none hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent data-[popup-open]:bg-accent-soft data-[popup-open]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40", className),
+			className: cn(`inline-flex h-control-sm shrink-0 cursor-default items-center rounded-control px-(--cue-space-3) text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted transition-colors duration-150 outline-none select-none hover:text-fg ${FOCUS_RING_INSET} data-[popup-open]:bg-accent-soft data-[popup-open]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40`, CONTROL_FACE, className),
 			...elementProps
 		});
 	}),

package/dist/overlays/popover.js

@@ -4,6 +4,7 @@ import { useComposedRefs } from "../lib/compose.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { overlayDescriptionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTitleClasses } from "./_surface.js";
 import { useCloseOnWheel } from "./_wheel.js";
+import { POPOVER_PAD } from "../system/_style-popover-pad.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
@@ -78,7 +79,7 @@ const Popover$1 = {
 				children: /* @__PURE__ */ jsx(Popover.Popup, {
 					ref: composedRef,
 					"data-slot": "popover-popup",
-					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, "flex max-w-[calc(100vw-2rem)] flex-col gap-(--cue-space-3) p-(--cue-space-4) outline-none", className),
+					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, `flex max-w-[calc(100vw-2rem)] flex-col gap-(--cue-space-3) ${POPOVER_PAD} outline-none`, className),
 					...popupProps,
 					children
 				})

package/dist/overlays/toast.js

@@ -1,5 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } 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 { CrossGlyph } from "./_glyphs.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { overlaySurfaceClasses } from "./_surface.js";
@@ -87,12 +91,12 @@ function ToastItem({ toast, className, closeLabel }) {
 			}),
 			/* @__PURE__ */ jsx(Toast.Action, {
 				"data-slot": "toast-action",
-				className: "mt-(--cue-space-1) inline-flex h-control-sm w-fit cursor-pointer items-center justify-center rounded-(--radius-control) border border-border px-(--cue-space-3) font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps-tight) text-fg-muted uppercase transition-colors outline-none hover:border-border-strong hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent"
+				className: cn(`mt-(--cue-space-1) inline-flex h-control-sm w-fit cursor-pointer items-center justify-center rounded-control border border-border px-(--cue-space-3) text-(length:--cue-text-label) text-fg-muted transition-colors outline-none hover:border-border-strong hover:text-fg ${FOCUS_RING}`, LABEL_FACE, LABEL_TRACKING_TIGHT, LABEL_CASE)
 			}),
 			/* @__PURE__ */ jsx(Toast.Close, {
 				"aria-label": closeLabel,
 				"data-slot": "toast-close",
-				className: "absolute top-(--cue-space-2) right-(--cue-space-2) flex size-icon-md 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: `absolute top-(--cue-space-2) right-(--cue-space-2) flex size-icon-md 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" })
 			})
 		]

package/dist/overlays/tooltip.js

@@ -1,7 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { useCuePortalProps } from "../system/portal.js";
+import { BODY_LEADING } from "../system/_style-body-leading.js";
 import { overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "./_surface.js";
+import { TOOLTIP_PAD, TOOLTIP_SIZE } from "../system/_style-tooltip.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
@@ -83,7 +86,7 @@ const Tooltip$1 = {
 					id,
 					role: "tooltip",
 					"data-slot": "tooltip-popup",
-					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, "max-w-[16rem] px-(--cue-space-3) py-(--cue-space-2) font-mono text-(length:--cue-text-label) leading-(--cue-leading-ui) text-fg", className),
+					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, `max-w-[16rem] ${TOOLTIP_PAD} ${TOOLTIP_SIZE} ${BODY_LEADING} text-fg`, CONTROL_FACE, className),
 					...popupProps,
 					children
 				})

package/dist/primitives/button.d.ts

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

package/dist/primitives/button.js

@@ -1,12 +1,21 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_PAINT } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { REST_SHADE_CLASS } from "../system/_paint-rest-shade.js";
 import { cva } from "../lib/cva.js";
+import { CONTROL_STEP_SIZE_LG } from "../system/_style-control-step.js";
+import { GLOW_CLASSES, GLOW_DANGER_CLASSES } from "../system/_paint-glow.js";
+import { CONTROL_CASE, CONTROL_PAD_LG, CONTROL_PAD_MD, CONTROL_PAD_SM, CONTROL_TRACKING, CONTROL_TRIM, CONTROL_WEIGHT, GHOST_INK, OUTLINE_EDGE, OUTLINE_INK, SECONDARY_EDGE, SECONDARY_GROUND, SECONDARY_INK } from "../system/_style-control.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/primitives/button.tsx
 /**
-* The chassis every control-shaped primitive shares: layout, mono type, the
+* The chassis every control-shaped primitive shares: layout, the control face
+* (mono, unless a style set names another — `CONTROL_FACE` says why), the
+* control's weight, tracking, label trim and case (500, `normal`, `normal` and
+* `none` unless a style set names others — `_style-control.ts` says why), the
 * density radius, the transition and the focus ring. Deliberately carries no
 * size and no colour so `Button` (height + horizontal padding) and `IconButton`
 * (one square token) can each add their own without fighting `tailwind-merge`.
@@ -18,9 +27,15 @@ import { useRender } from "@base-ui/react/use-render";
 * Restoring the style at ring time is what makes the focus indicator exist
 * (WCAG 2.4.7). `test/focus-ring.test.ts` guards every occurrence.
 *
+* The ring's width and colour are {@link FOCUS_RING_PAINT} — `_focus-ring.ts`
+* says why every site but this one reads a fixed offset from there too. This
+* one reads `--cue-style-focus-offset` instead, because the offset here is a
+* style-set knob (kiln pulls it to -1px) rather than one of that module's three
+* fixed shapes; `1px` is the offset this chassis drew before either existed.
+*
 * @internal Not part of the public API; imported by `icon-button.tsx`.
 */
-const buttonChassis = "inline-flex select-none items-center justify-center gap-[0.4em] whitespace-nowrap rounded-(--radius-control) font-mono font-medium transition-colors duration-150 outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-40";
+const buttonChassis = `inline-flex select-none items-center justify-center gap-[0.4em] whitespace-nowrap rounded-control ${CONTROL_FACE} ${CONTROL_WEIGHT} ${CONTROL_TRACKING} ${CONTROL_TRIM} ${CONTROL_CASE} transition-colors duration-150 outline-none ${FOCUS_RING_PAINT} focus-visible:outline-offset-[var(--cue-style-focus-offset,1px)] disabled:pointer-events-none disabled:opacity-40`;
 /**
 * The shared colour vocabulary. `accent` is theme-controlled, so `primary`
 * reads as white-on-black in `cue` and cyan-on-near-black in `terminal` with no
@@ -39,17 +54,27 @@ const buttonChassis = "inline-flex select-none items-center justify-center gap-[
 * @internal Not part of the public API; imported by `icon-button.tsx`.
 */
 const buttonTones = {
-	primary: "bg-accent text-accent-fg hover:bg-accent-hover border border-transparent",
-	secondary: "border border-border text-fg-muted hover:border-border-strong hover:text-fg bg-surface-2",
-	ghost: "text-fg-muted hover:text-fg hover:bg-surface-2 border border-transparent",
-	outline: "border border-border text-fg hover:border-accent hover:text-accent bg-transparent",
-	danger: "bg-danger text-danger-fg hover:opacity-90 border border-transparent",
+	primary: `bg-accent-fill text-accent-fill-fg hover:bg-accent-fill-hover border border-transparent ${GLOW_CLASSES}`,
+	secondary: `border ${SECONDARY_EDGE} ${SECONDARY_INK} hover:text-[color:var(--cue-style-secondary-hover-ink,var(--cue-fg))] hover:border-[color:var(--cue-style-secondary-hover-edge,var(--cue-border-strong))] ${SECONDARY_GROUND}`,
+	ghost: `${GHOST_INK} hover:text-fg hover:bg-surface-2 border border-transparent`,
+	outline: `border ${OUTLINE_EDGE} ${OUTLINE_INK} hover:border-accent hover:text-accent bg-transparent ${REST_SHADE_CLASS}`,
+	danger: `bg-danger text-danger-fg hover:opacity-90 border border-transparent ${GLOW_DANGER_CLASSES}`,
 	"danger-outline": "border text-danger bg-transparent hover:bg-danger/10 border-danger/40"
 };
 /**
 * The `Button` class recipe, exported so other surfaces (a link that must look
 * like a button, a third-party trigger) can borrow the exact same classes.
 *
+* **It returns the recipe unmerged**, and its `className` option only appends.
+* A class concatenated onto it — by a template string, `clsx`, or that option —
+* does not replace the recipe's own; the two compete by the order Tailwind
+* emits them in, which is not a contract. The inline padding in particular is
+* a `px-[calc(…)]` reader of the style set's `style-control-pad`, and Tailwind
+* emits it after every numeric `px-*`, so a concatenated `px-2` no longer wins
+* the way it did over the `px-(--cue-space-*)` rung it replaced. To override a
+* class of the recipe, pass `className` to `Button` itself, which merges, or
+* merge the result with `tailwind-merge`.
+*
 * @example
 * <a className={buttonVariants({ variant: "primary", size: "sm" })} href="/go">Go</a>
 */
@@ -57,9 +82,9 @@ const buttonVariants = cva(buttonChassis, {
 	variants: {
 		variant: buttonTones,
 		size: {
-			sm: "h-control-sm px-(--cue-space-4) text-(length:--cue-text-ui)",
-			md: "h-control-md px-(--cue-space-5) text-(length:--cue-text-ui)",
-			lg: "h-control-lg px-(--cue-space-6) text-(length:--cue-text-emphasis)"
+			sm: `h-control-sm ${CONTROL_PAD_SM} text-(length:--cue-text-ui)`,
+			md: `h-control-md ${CONTROL_PAD_MD} text-(length:--cue-text-ui)`,
+			lg: `h-control-lg ${CONTROL_PAD_LG} ${CONTROL_STEP_SIZE_LG}`
 		}
 	},
 	defaultVariants: {
@@ -75,6 +100,11 @@ const buttonVariants = cva(buttonChassis, {
 * The focus ring is an `outline`, never a `box-shadow`, so it survives inside
 * `overflow: hidden` panels.
 *
+* `className` is merged with `tailwind-merge`, so a caller's `px-2`,
+* `font-semibold` or `shadow-none` replaces the class the recipe set for the
+* same property. Only here: `buttonVariants()` concatenates, and says what that
+* costs.
+*
 * @example
 * <Button variant="primary" size="sm" icon={Play}>Run cue</Button>
 * @example

package/dist/primitives/chip.d.ts

@@ -24,13 +24,21 @@ import * as React from "react";
  * page rather than a container. The rim is therefore a compound of tone and
  * variant, exactly as the fill is.
  *
+ * **The recipe reads the style set** (spec 2026-09-26-looks-fidelity §3.6,
+ * `system/_style-chip.ts`): the six tones' fill and rim are
+ * `color-mix(in oklab, var(--cue-<tone>) var(--cue-style-chip-fill, 10%), transparent)`
+ * and the same with `--cue-style-chip-edge` at `35%` — exactly `bg-<tone>/10`
+ * and `border-<tone>/35` under no set, and a set's own shares inside one. The
+ * case, tracking, radius, size and weight read `--cue-style-chip-case`,
+ * `-tracking`, `-radius`, `-size` and `--cue-style-label-weight` the same way.
+ *
  * @example
  * <span className={chipVariants({ tone: "danger", variant: "outline" })}>fault</span>
  * @example
  * <span className={chipVariants({ variant: "tag" })}>mcp</span>
  */
 declare const chipVariants: (props?: ({
-  tone?: "info" | "warn" | "danger" | "busy" | "accent" | "ok" | "neutral" | null | undefined;
+  tone?: "danger" | "info" | "warn" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
   variant?: "outline" | "tinted" | "tag" | null | undefined;
   interactive?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
@@ -46,7 +54,17 @@ interface ChipProps extends React.HTMLAttributes<HTMLElement>, VariantProps<type
   children?: React.ReactNode;
 }
 /**
- * A compact status/label pill: mono, uppercase, wide-tracked, one line tall.
+ * A compact status/label pill: mono, uppercase, wide-tracked, one line tall —
+ * by default, the style set's choice inside one.
+ *
+ * A chip speaks in the label voice: it reads the label face
+ * (`--cue-style-label-face`) and its own case (`--cue-style-chip-case`, which
+ * falls back to the label case), so under a sans, sentence-case Look its text
+ * is sans and sentence case like the captions around it. This reverses the
+ * earlier ruling that a tag's text is the value being shown and stays mono
+ * (spec 2026-09-26-looks-fidelity F-15): under a sans Look a mono uppercase
+ * chip was the most visible console voice left on the page. A consumer that
+ * wants a chip mono under every set passes `className="font-mono uppercase"`.
  *
  * `tone` uses the shared status vocabulary (`ok | busy | warn | danger | info`)
  * plus `neutral` and `accent`, so a chip, a `StatusDot` and a `Meter` always

package/dist/primitives/chip.js

@@ -1,6 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { cva } from "../lib/cva.js";
+import { CHIP_CASE, CHIP_EDGE, CHIP_FILL, CHIP_HEIGHT, CHIP_PAD, CHIP_RADIUS, CHIP_SIZE, CHIP_SIZE_MICRO, CHIP_TRACKING, CHIP_TRACKING_TAG } from "../system/_style-chip.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_WEIGHT } from "../system/_style-label-weight.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/primitives/chip.tsx
@@ -27,26 +31,34 @@ import { jsx } from "react/jsx-runtime";
 * page rather than a container. The rim is therefore a compound of tone and
 * variant, exactly as the fill is.
 *
+* **The recipe reads the style set** (spec 2026-09-26-looks-fidelity §3.6,
+* `system/_style-chip.ts`): the six tones' fill and rim are
+* `color-mix(in oklab, var(--cue-<tone>) var(--cue-style-chip-fill, 10%), transparent)`
+* and the same with `--cue-style-chip-edge` at `35%` — exactly `bg-<tone>/10`
+* and `border-<tone>/35` under no set, and a set's own shares inside one. The
+* case, tracking, radius, size and weight read `--cue-style-chip-case`,
+* `-tracking`, `-radius`, `-size` and `--cue-style-label-weight` the same way.
+*
 * @example
 * <span className={chipVariants({ tone: "danger", variant: "outline" })}>fault</span>
 * @example
 * <span className={chipVariants({ variant: "tag" })}>mcp</span>
 */
-const chipVariants = cva("inline-flex h-chip select-none items-center justify-center gap-(--cue-space-2) whitespace-nowrap rounded-(--radius-control) border font-mono leading-none uppercase outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", {
+const chipVariants = cva(`inline-flex ${CHIP_HEIGHT} select-none items-center justify-center gap-(--cue-space-2) whitespace-nowrap ${CHIP_RADIUS} border ${LABEL_FACE} ${LABEL_WEIGHT} leading-none ${CHIP_CASE} outline-none ${FOCUS_RING}`, {
 	variants: {
 		tone: {
 			neutral: "text-fg-muted",
-			accent: "border-accent/35 text-accent",
-			ok: "border-ok/35 text-ok",
-			busy: "border-busy/35 text-busy",
-			warn: "border-warn/35 text-warn",
-			danger: "border-danger/35 text-danger",
-			info: "border-info/35 text-info"
+			accent: `${CHIP_EDGE.accent} text-accent`,
+			ok: `${CHIP_EDGE.ok} text-ok`,
+			busy: `${CHIP_EDGE.busy} text-busy`,
+			warn: `${CHIP_EDGE.warn} text-warn`,
+			danger: `${CHIP_EDGE.danger} text-danger`,
+			info: `${CHIP_EDGE.info} text-info`
 		},
 		variant: {
-			tinted: "px-(--cue-space-3) text-(length:--cue-text-label) tracking-(--cue-tracking-caps)",
-			outline: "bg-transparent px-(--cue-space-3) text-(length:--cue-text-label) tracking-(--cue-tracking-caps)",
-			tag: "bg-transparent px-(--cue-space-2) text-(length:--cue-text-micro) tracking-[0.06em]"
+			tinted: `${CHIP_PAD} ${CHIP_SIZE} ${CHIP_TRACKING}`,
+			outline: `bg-transparent ${CHIP_PAD} ${CHIP_SIZE} ${CHIP_TRACKING}`,
+			tag: `bg-transparent px-(--cue-space-2) ${CHIP_SIZE_MICRO} ${CHIP_TRACKING_TAG}`
 		},
 		interactive: {
 			true: "cursor-pointer disabled:pointer-events-none disabled:opacity-40",
@@ -72,32 +84,32 @@ const chipVariants = cva("inline-flex h-chip select-none items-center justify-ce
 		{
 			tone: "accent",
 			variant: "tinted",
-			class: "bg-accent/10"
+			class: CHIP_FILL.accent
 		},
 		{
 			tone: "ok",
 			variant: "tinted",
-			class: "bg-ok/10"
+			class: CHIP_FILL.ok
 		},
 		{
 			tone: "busy",
 			variant: "tinted",
-			class: "bg-busy/10"
+			class: CHIP_FILL.busy
 		},
 		{
 			tone: "warn",
 			variant: "tinted",
-			class: "bg-warn/10"
+			class: CHIP_FILL.warn
 		},
 		{
 			tone: "danger",
 			variant: "tinted",
-			class: "bg-danger/10"
+			class: CHIP_FILL.danger
 		},
 		{
 			tone: "info",
 			variant: "tinted",
-			class: "bg-info/10"
+			class: CHIP_FILL.info
 		},
 		{
 			tone: "neutral",
@@ -191,7 +203,17 @@ const chipVariants = cva("inline-flex h-chip select-none items-center justify-ce
 	}
 });
 /**
-* A compact status/label pill: mono, uppercase, wide-tracked, one line tall.
+* A compact status/label pill: mono, uppercase, wide-tracked, one line tall —
+* by default, the style set's choice inside one.
+*
+* A chip speaks in the label voice: it reads the label face
+* (`--cue-style-label-face`) and its own case (`--cue-style-chip-case`, which
+* falls back to the label case), so under a sans, sentence-case Look its text
+* is sans and sentence case like the captions around it. This reverses the
+* earlier ruling that a tag's text is the value being shown and stays mono
+* (spec 2026-09-26-looks-fidelity F-15): under a sans Look a mono uppercase
+* chip was the most visible console voice left on the page. A consumer that
+* wants a chip mono under every set passes `className="font-mono uppercase"`.
 *
 * `tone` uses the shared status vocabulary (`ok | busy | warn | danger | info`)
 * plus `neutral` and `accent`, so a chip, a `StatusDot` and a `Meter` always

package/dist/primitives/kbd.d.ts

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