@cueplusplus/ui 0.17.0 → 0.18.1

package/CHANGELOG.md

@@ -1,5 +1,89 @@
 # @cueplusplus/ui
 
+## 0.18.1
+
+### Patch Changes
+
+- 59deac9: `ColorField` documents `aria-label`. The field draws no visible label, so it needs a name from `aria-label` or from `aria-labelledby` pointing at a label of your own — without either the input has none. The prop was always accepted (it comes from React Aria); it is now in the component's documentation and manifest, so whoever builds one — a person or an agent reading the manifest — is told.
+- 2dd4248: The manifest's fixture catalogue (`manifest/fixtures.json`) names six more values a tool can place in a prop: `children.toggles`, three toggles for a `ToggleGroup`; `layout.show-crumbs-long` and `layout.patch-steps-long`, breadcrumbs and steps with long words; and `agent.permission-scopes`, `agent.permission-rules` and `agent.permission-dirs`, the scopes, command rule and directory a `PermissionScopes` grant is written with. No component changes.
+- @cueplusplus/tokens@0.18.1
+
+## 0.18.0
+
+### Minor Changes
+
+- d1eef08: The style contract gains four optional names for the parts of agent-native.com's own components that no earlier round measured (looks-fidelity round 6, spec §11, Graphite's lane R6.G). Each is `initial` on the shared `[data-style]` reset, `console` declines it, and each reader falls back to exactly what its component drew, so under no set and under every set that does not name it nothing moves.
+
+  - `--cue-style-kbd-fill`: a `Kbd`'s fill, falling back to the `surface-2` it drew.
+  - `--cue-style-option-highlight-ink`: a highlighted option row's ink, falling back to `fg`.
+  - `--cue-style-secondary-hover-ground`: the secondary `Button`'s ground under the pointer, falling back to its resting ground, which it kept before.
+  - `--cue-style-option-selected-hover-ground`: a selected listbox row's ground under the pointer, falling back to the ground it paints selected and highlighted. A list opens with its selected row highlighted, so a set that grounds that row needs this for the pointer to paint its hover over it.
+
+  The `graphite` set declares the four, and eleven names earlier rounds added that it had left alone, each measured from agent-native.com: a 20px key on `surface-3`, 40.75px option rows with 4px list padding, half-radius menu rows, the highlighted and selected inks, the selected row on the raised `surface-1` (`surface-3` under the pointer), the secondary tone's hover edge, and table cells that clamp their padding from 12px at a phone to 16px at a desktop.
+
+- d1eef08: The style contract gains thirteen optional names for the parts of replit.com's own components that no earlier round measured (looks-fidelity round 6, spec §11, Kiln's lane R6.K). Each is `initial` on the shared `[data-style]` reset, `console` declines it, and each reader falls back to exactly what its component drew, so under no set and under every set that does not name it nothing moves. The `kiln` set declares them.
+
+  - **Disclosures** (`Accordion`, `Collapsible`, `Disclosure`): `--cue-style-collapse-size`, `-collapse-leading`, `-collapse-hover-ground`, `-collapse-radius`, `-collapse-body-ink`, and `-accordion-rule-ink` for the rule between sections.
+  - **Toggles**: `--cue-style-toggle-pressed-ink` and `-toggle-hover-ground`.
+  - **Options and lists** (`Select`, `Combobox`, `Autocomplete`, `MultiSelect`): `--cue-style-option-selected-ground` and `-listbox-pad`. A selected row under the pointer, or the one a select opens on, keeps the highlight ground unless a set names a selected ground.
+  - **Chip, NavigationMenu, Dialog**: `--cue-style-chip-ink`, `-nav-caret-ink`, `-dialog-pad`.
+
+  The docs' `Link` tile now draws a link: `LinkProps` declares its `href` and `children`, which it took from the anchor's attributes without naming them, so the props table and a propSet could not.
+
+- d1eef08: The style contract gains seventy-two optional names for the parts of coss.com/ui's own components that no earlier round measured (looks-fidelity round 6, spec §11: the coverage closure, Porcelain's lane R6.P, rows P140–P193). Each is `initial` on the shared `[data-style]` reset and `console` declines it. Each reader falls back to exactly what its component drew before, so under no set, and under every set that does not name it, nothing moves. The `porcelain` set declares all seventy-two.
+
+  - **Groups and choices**: `--cue-style-group-gap` (`ToggleGroup`, the `Tabs` list) and `-choice-gap` (`CheckboxGroup`, `RadioGroup`).
+  - **Captions and glyphs**: `--cue-style-caption-size`, `-caption-weight`, `-caption-ink` (an avatar's initials, a readout, a calendar's caption); `-glyph-ink`, `-glyph-size` and `-glyph-opacity` for a control's glyphs — the opacity only on the affordance ones: a select's and a filterable field's chevron, the date trigger's mark, a calendar's month arrows and an `InputGroup` gutter's glyphs.
+  - **Buttons and breadcrumbs**: `--cue-style-control-gap`, `-outline-hover-ground`, `-outline-hover-edge`, `-crumb-separator-opacity`.
+  - **Disclosures and cards**: `--cue-style-collapse-caret-opacity`, `-card-gap`, `-check-glyph-size`.
+  - **Menus and the palette**: `--cue-style-group-label-size`, `-group-label-ink`, `-group-label-pad`, `-row-disabled-opacity`, `-menu-min-width`, `-menu-separator-inset`, `-palette-rule`, `-palette-footer-pad`.
+  - **EmptyState**: `--cue-style-empty-title-face`, `-empty-title-size`, `-empty-title-weight`, `-empty-title-leading`, `-empty-icon-size`, `-empty-gap`, `-empty-pad`.
+  - **Panel, Kbd, Skeleton, ScrollArea, Meter**: `--cue-style-panel-pad-y`, `-panel-pad-x`, `-panel-rule`, `-kbd-leading`, `-skeleton-radius`, `-scrollbar-size`, `-scrollbar-thumb`, `-meter-radius`.
+  - **Slider, NumberField, OTPField, Pagination**: `--cue-style-slider-track-height` (the track falls back to `0.125rem`, which is half of Tailwind's default spacing step; a consumer who changed `--spacing` drew half of theirs, and draws 2px now), `-slider-track-ink`, `-slider-thumb-size`, `-slider-thumb-fill`, `-slider-thumb-rim`, `-slider-thumb-edge`, `-stepper-width`, `-otp-gap`, `-page-current-ground`, `-page-current-rim`, `-page-current-edge`.
+  - **Switch, Radio, Table, Toast**: `--cue-style-switch-edge`, `-radio-checked-ground`, `-radio-dot-ink`, `-radio-dot-size`, `-cell-pad`, `-cell-leading`, `-toast-pad-y`, `-toast-pad-x`, `-toast-width`.
+  - **Toolbar**: `--cue-style-toolbar-rim`, `-toolbar-edge`, `-toolbar-radius`, `-toolbar-pad`, `-toolbar-height`, `-toolbar-gap`, `-toolbar-separator-height`.
+  - **Chip, Calendar, Tabs, SegmentedControl, Popover, HoverCard**: `--cue-style-chip-gap`, `-day-size` (the days, the weekday heads, the month-nav buttons and the caption row), `-day-ink`, `-segment-pad`, `-tab-hover-ink`, `-popover-width`, `-hover-card-width`.
+
+  Three fixes reach every Look. `MultiSelect` and `TagsInput` set their typing input one line tall, so an `md` field is 32px beside a 32px `Input` rather than 38px, chips or none; a second row of chips still grows it. `OTPField`'s slots are square, one control rung wide, as its documentation always said: the `w-auto` beside the size class won the cascade, and every slot drew as wide as an empty input. An `InputGroup`'s gutters read `--cue-style-glyph-ink`, falling back to the `fg-subtle` they drew.
+
+  The `glaze` pack's stroke pairs (`stroke-from`, `stroke-to`, `stroke-overlay-from`, `stroke-overlay-to`) are opaque mixes now, measured from coss.com/ui's field and popup edges, which composite over their own grounds where the translucent border roles drew a step darker over a sunken stage in dark mode.
+
+- d1eef08: The style contract gains forty-six optional names for the parts of a source's own components that no earlier round measured (looks-fidelity round 6, spec §11: the coverage closure, Tender's lane R6.T, rows T123–T157). Each is `initial` on the shared `[data-style]` reset and `console` declines it. Each reader falls back to exactly what its component drew before, so under no set, and under every set that does not name it, nothing moves.
+
+  - **Disclosures** (`Accordion`, `Collapsible`, `Disclosure`): `--cue-style-accordion-rule-style` (the rule between sections, `solid` or `dashed`, through Tailwind's `--tw-border-style` slot as the footer's rules are), `-collapse-pad`, `-collapse-gap`, `-collapse-hover-ink`, `-collapse-open-ink` and `-collapse-body-pad`.
+  - **Fields**: `--cue-style-field-pad` and `-field-gap` (multipliers), `-field-hover-edge`, `-help-leading`, and `-text-focus-offset` for a text control's, a link's and a disclosure trigger's focus ring. (A `-invalid-edge` came and went in the same release: Tender refuses stripe's pale-red invalid edge, so no set spent it.) The hover edge never paints over a focused field's edge: a grouped field's rim (`controlGroupFocusClasses`) now reads `has-focus:` rather than `focus-within:`, which Tailwind emits after the hover edge, so a focused `InputGroup`, `Combobox`, `MultiSelect`, `TagsInput` or `Autocomplete` keeps its `border-strong` rim under the pointer, and an invalid one keeps `danger`.
+  - **Options** (`Select`, `Combobox`, `Autocomplete`, `MultiSelect`): `--cue-style-option-pad`, `-option-leading`, `-option-height`.
+  - **Checkbox, Switch, Radio**: `--cue-style-control-label-leading`, `-check-hover-edge`, `-switch-thumb`, `-switch-disabled-thumb`.
+  - **Disabled controls**: `--cue-style-disabled-opacity` (replacing the fixed 40% fade), `-disabled-fill`, `-disabled-ink`, and `-disabled-edge` (the rim the two transparent button tones draw when disabled; they keep their ground).
+  - **Toggle** (and `ToggleGroup`'s items): `--cue-style-toggle-edge`, `-toggle-ink`, `-toggle-hover-ink`, `-toggle-hover-edge`, `-toggle-pressed-ground`, `-toggle-pressed-edge`.
+  - **Stat**: `--cue-style-stat-size` and `-stat-detail-size` (scaled with the type), `-stat-weight`, `-stat-leading`, `-stat-tracking`, `-stat-detail-leading`, `-stat-gap`.
+  - **Row**, in the rule idiom: `--cue-style-row-rule-style`, `-row-ink`, `-row-block-pad`.
+  - **Chip**: `--cue-style-chip-leading`, and the tag volume's `-tag-pad` and `-tag-edge`.
+  - **Tooltip**: `--cue-style-tooltip-tracking` and `-tooltip-radius` (stripe.com's overlays take three corners: its dialog, its popover and its tooltip).
+  - **Links and navigation**: `--cue-style-link-hover-ink` (apart from the header nav's hover), `-nav-height` and `-nav-open-ground` for `NavigationMenu`'s trigger. The trigger's height is an arbitrary value now, which `tailwind-merge` knows is a height, so a `className` height on a trigger (`h-auto`) takes effect where the control height used to win over it.
+
+  The Tender style set declares them, measured off stripe.com's own design system (the hds components its homepage loads, injected where it does not render them), alongside the existing names it now also declares: `-collapse-height`, `-tooltip-pad`, `-input-leading`, `-textarea-pad`, `-chip-height`, `-chip-size`, `-link-weight`, `-secondary-hover-ink`, `-secondary-hover-edge`, `-nav-ink`, `-nav-pad` and `-hover-ink`.
+
+  Two behaviours a consumer can see without any style set. A disabled `Button` paints its tone's disabled fill, ink and edge (`--cue-style-disabled-fill`, `-disabled-ink`, `-disabled-edge`), each falling back to the tone's own resting colour, so a `Button` draws what it drew — but a `className` that recolours a `Button` (`bg-danger`) no longer reaches it while it is disabled, where the tone's own colour does: recolour the disabled state too (`disabled:bg-danger`). And the `NavigationMenu` trigger's height above.
+
+- d1eef08: The style contract gains nineteen optional names for the parts of greptile.com's own components that no earlier round measured (looks-fidelity round 6, spec §11, Zine's lane R6.Z). Each is `initial` on the shared `[data-style]` reset, `console` declines it, and each reader falls back to exactly what its component drew, so under no set and under every set that does not name it nothing moves. The `zine` set declares them.
+
+  - **Disclosures** (`Accordion`, `Collapsible`, `Disclosure`): `--cue-style-collapse-weight`, `-collapse-caret-size`, `-collapse-caret-ink`, `-collapse-body-size`, `-collapse-body-leading`, `-collapse-body-tracking`; and the inline disclosure's `--cue-style-disclosure-ink`, `-disclosure-hover-ink` and `-disclosure-weight`.
+  - **Tooltip**: `--cue-style-tooltip-face`, `-tooltip-ink`, `-tooltip-leading`.
+  - **Breadcrumb**: `--cue-style-crumb-face`, `-crumb-hover-ink`, `-crumb-gap`, `-crumb-ink`, `-crumb-size`.
+  - **Avatar**: `--cue-style-avatar-radius` and `-avatar-edge`.
+
+  Two names from the round's lanes are gone again before release: `--cue-style-invalid-edge` and `--cue-style-collapse-body-face`, which no set spent (spec §3.0 adds a name only when a set spends it). The chassis's invalid edge is `danger` again and a disclosure panel's body reads the body face.
+
+### Patch Changes
+
+- Updated dependencies [d1eef08]
+- Updated dependencies [d1eef08]
+- Updated dependencies [d1eef08]
+- Updated dependencies [d1eef08]
+- Updated dependencies [d1eef08]
+  - @cueplusplus/tokens@0.18.0
+
 ## 0.17.0
 
 ### Minor Changes

package/dist/chrome/empty-state.js

@@ -1,4 +1,8 @@
 import { cn } from "../lib/cn.js";
+import { GLYPH_INK_SUBTLE } from "../system/_style-glyph-ink.js";
+import { BODY_LEADING } from "../system/_style-body-leading.js";
+import { BODY_SIZE } from "../system/_style-body-size.js";
+import { EMPTY_GAP, EMPTY_HINT_VOICE, EMPTY_ICON_SIZE, EMPTY_PAD, EMPTY_TITLE_FACE, EMPTY_TITLE_LEADING, EMPTY_TITLE_SIZE, EMPTY_TITLE_WEIGHT } from "../system/_style-empty-state.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chrome/empty-state.tsx
@@ -26,22 +30,22 @@ const EmptyState = React.forwardRef(function EmptyState({ className, title, hint
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		"data-slot": "empty-state",
-		className: cn("flex flex-col items-center justify-center gap-(--cue-space-3) px-(--cue-space-6) py-(--cue-space-7) text-center font-mono", className),
+		className: cn(`flex flex-col items-center justify-center ${EMPTY_GAP} px-(--cue-space-6) ${EMPTY_PAD} text-center font-mono`, className),
 		...elementProps,
 		children: [
 			Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
 				"aria-hidden": "true",
 				"data-slot": "empty-state-icon",
-				className: "size-(--cue-space-7) shrink-0 text-fg-subtle"
+				className: `${EMPTY_ICON_SIZE} shrink-0 ${GLYPH_INK_SUBTLE}`
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"data-slot": "empty-state-title",
-				className: "text-(length:--cue-text-emphasis) text-fg",
+				className: `${EMPTY_TITLE_FACE} ${EMPTY_TITLE_SIZE} ${EMPTY_TITLE_WEIGHT} ${EMPTY_TITLE_LEADING} text-fg`,
 				children: title
 			}),
 			hint === void 0 ? null : /* @__PURE__ */ jsx("p", {
 				"data-slot": "empty-state-hint",
-				className: "max-w-[36ch] text-(length:--cue-text-ui) leading-(--cue-leading-ui) text-fg-muted",
+				className: `max-w-[36ch] ${EMPTY_HINT_VOICE} ${BODY_SIZE} ${BODY_LEADING} text-fg-muted`,
 				children: hint
 			}),
 			children,

package/dist/chrome/navigation-menu.js

@@ -5,6 +5,7 @@ import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { CaretDownGlyph } from "./_glyphs.js";
 import { useCuePortalProps } from "../system/portal.js";
 import { overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "../overlays/_surface.js";
+import { NAV_CARET_INK, NAV_OPEN_GROUND, NAV_TRIGGER_HEIGHT, NAV_TRIGGER_HOVER_INK, NAV_TRIGGER_INK, NAV_TRIGGER_PAD, NAV_TRIGGER_VOICE } from "../system/_style-nav-menu.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NavigationMenu } from "@base-ui/react/navigation-menu";
@@ -66,11 +67,11 @@ const NavigationMenu$1 = {
 		return /* @__PURE__ */ jsxs(NavigationMenu.Trigger, {
 			ref,
 			"data-slot": "navigation-menu-trigger",
-			className: cn(`inline-flex h-control-md cursor-default items-center gap-(--cue-space-2) rounded-control px-(--cue-space-3) text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted no-underline 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`, CONTROL_FACE, className),
+			className: cn(`inline-flex ${NAV_TRIGGER_HEIGHT} cursor-default items-center gap-(--cue-space-2) rounded-control ${NAV_TRIGGER_PAD} ${NAV_TRIGGER_VOICE} whitespace-nowrap ${NAV_TRIGGER_INK} no-underline transition-colors duration-150 outline-none select-none ${NAV_TRIGGER_HOVER_INK} ${FOCUS_RING_INSET} ${NAV_OPEN_GROUND} data-[popup-open]:text-fg`, className),
 			...elementProps,
 			children: [children, caret ? /* @__PURE__ */ jsx(NavigationMenu.Icon, {
 				className: "flex items-center transition-transform duration-150 data-[popup-open]:rotate-180 motion-reduce:transition-none",
-				children: /* @__PURE__ */ jsx(CaretDownGlyph, { className: "size-icon-sm text-fg-subtle" })
+				children: /* @__PURE__ */ jsx(CaretDownGlyph, { className: `size-icon-sm ${NAV_CARET_INK}` })
 			}) : null]
 		});
 	}),

package/dist/chrome/panel.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { PANEL_PAD_X, PANEL_PAD_Y, PANEL_RULE } from "../system/_style-panel.js";
 import { RIM_INSET } from "../system/_paint-rim.js";
 import { TITLE_VOICE } from "../system/_style-title.js";
 import * as React from "react";
@@ -52,7 +53,7 @@ const PanelHeader = React.forwardRef(function PanelHeader({ className, title, ac
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		"data-slot": "panel-header",
-		className: cn("flex items-center justify-between gap-(--cue-space-3) border-b border-border px-(--cue-pad-row-x) py-(--cue-pad-row-y)", className),
+		className: cn(`flex items-center justify-between gap-(--cue-space-3) border-b ${PANEL_RULE} ${PANEL_PAD_X} ${PANEL_PAD_Y}`, className),
 		...elementProps,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 items-center gap-(--cue-space-3)",

package/dist/chrome/row.js

@@ -2,6 +2,7 @@ import { cn } from "../lib/cn.js";
 import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
 import { cva } from "../lib/cva.js";
 import { DATA_FACE } from "../system/_style-data-face.js";
+import { ROW_BLOCK_PAD, ROW_INK, ROW_RULE_STYLE } from "../system/_style-row.js";
 import { SEAM_INK, SEAM_RIM } from "../system/_style-seam.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -21,11 +22,11 @@ import { jsx } from "react/jsx-runtime";
 * @example
 * <li className={rowVariants({ interactive: true })} />
 */
-const rowVariants = cva(`flex w-full items-center gap-(--cue-space-3) px-(--cue-pad-row-x) py-(--cue-pad-row-y) ${DATA_FACE} text-(length:--cue-text-ui) text-fg`, {
+const rowVariants = cva(`flex w-full items-center gap-(--cue-space-3) px-(--cue-pad-row-x) ${DATA_FACE} text-(length:--cue-text-ui) ${ROW_INK}`, {
 	variants: {
 		seam: {
-			true: "bg-bg",
-			false: "border-t border-border first:border-t-0 [[data-slot=panel-header]+&]:border-t-0"
+			true: "bg-bg py-(--cue-pad-row-y)",
+			false: `border-t border-border first:border-t-0 [[data-slot=panel-header]+&]:border-t-0 ${ROW_RULE_STYLE} ${ROW_BLOCK_PAD}`
 		},
 		interactive: {
 			true: `cursor-pointer text-left transition-colors duration-150 outline-none hover:bg-surface-2 ${FOCUS_RING_INSET_2} disabled:pointer-events-none disabled:opacity-40`,

package/dist/chrome/scroll-area.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
+import { SCROLLBAR_SIZE_H, SCROLLBAR_SIZE_V, SCROLLBAR_THUMB } from "../system/_style-scrollbar.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea } from "@base-ui/react/scroll-area";
@@ -11,7 +12,7 @@ import { ScrollArea } from "@base-ui/react/scroll-area";
 * A console packs panels edge to edge, and a permanent 12px trough on every one
 * of them is 12px of chrome per panel that says nothing.
 */
-const SCROLLBAR_CLASSES = "flex touch-none justify-center rounded-full opacity-0 transition-opacity delay-300 duration-150 select-none data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0 motion-reduce:transition-none data-[orientation=horizontal]:h-(--cue-space-3) data-[orientation=horizontal]:flex-col data-[orientation=vertical]:w-(--cue-space-3)";
+const SCROLLBAR_CLASSES = `flex touch-none justify-center rounded-full opacity-0 transition-opacity delay-300 duration-150 select-none data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0 motion-reduce:transition-none ${SCROLLBAR_SIZE_H} data-[orientation=horizontal]:flex-col ${SCROLLBAR_SIZE_V}`;
 /**
 * A scrolling region with the system's own scrollbar instead of the platform's.
 *
@@ -50,7 +51,7 @@ const ScrollArea$1 = React.forwardRef(function ScrollArea$2({ className, viewpor
 				className: SCROLLBAR_CLASSES,
 				children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {
 					"data-slot": "scroll-area-thumb",
-					className: "w-full rounded-full bg-border-strong"
+					className: `w-full rounded-full ${SCROLLBAR_THUMB}`
 				})
 			}) : null,
 			horizontal ? /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
@@ -60,7 +61,7 @@ const ScrollArea$1 = React.forwardRef(function ScrollArea$2({ className, viewpor
 				className: SCROLLBAR_CLASSES,
 				children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {
 					"data-slot": "scroll-area-thumb",
-					className: "h-full rounded-full bg-border-strong"
+					className: `h-full rounded-full ${SCROLLBAR_THUMB}`
 				})
 			}) : null,
 			vertical && horizontal ? /* @__PURE__ */ jsx(ScrollArea.Corner, { "data-slot": "scroll-area-corner" }) : null

package/dist/chrome/segmented-control.js

@@ -4,6 +4,7 @@ import { FOCUS_RING_INSET } from "../system/_focus-ring.js";
 import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { useComposedRefs } from "../lib/compose.js";
 import { EDGE_SCROLLER_CLASSES, EdgeChevrons, useEdgeScroll } from "./_edge-scroller.js";
+import { SEGMENT_PAD } from "../system/_style-segment-pad.js";
 import { SEGMENT_IDLE_INK } from "../system/_style-segment.js";
 import { SEGMENTED_CHEVRON_GROUND, SEGMENTED_RIM, SEGMENTED_TRACK, SEGMENT_PRESSED, SEGMENT_RADIUS } from "../system/_style-segmented-control.js";
 import * as React from "react";
@@ -13,7 +14,7 @@ import { ToggleGroup } from "@base-ui/react/toggle-group";
 //#region src/chrome/segmented-control.tsx
 const ITEM_SIZES = {
 	sm: "h-control-sm px-(--cue-space-3) text-(length:--cue-text-label)",
-	md: "h-control-md px-(--cue-space-4) text-(length:--cue-text-ui)",
+	md: `h-control-md ${SEGMENT_PAD} text-(length:--cue-text-ui)`,
 	lg: "h-control-lg px-(--cue-space-5) text-(length:--cue-text-body)"
 };
 /**

package/dist/chrome/tabs.js

@@ -3,7 +3,10 @@ import { cn } from "../lib/cn.js";
 import { FOCUS_RING_INSET_2, FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
 import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { EDGE_SCROLLER_CLASSES, EdgeChevrons, useEdgeScroll } from "./_edge-scroller.js";
+import { SEGMENT_PAD } from "../system/_style-segment-pad.js";
 import { SEGMENT_IDLE_INK } from "../system/_style-segment.js";
+import { TAB_HOVER_INK } from "../system/_style-tab-hover.js";
+import { GROUP_GAP } from "../system/_style-group-gap.js";
 import { TAB_ACTIVE, TAB_RULE, TAB_SHAPE, TAB_TRACK, TAB_UNDERLINE } from "../system/_style-tab.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -29,7 +32,7 @@ const TabsList = React.forwardRef(function TabsList({ className, ...elementProps
 	return /* @__PURE__ */ jsx(Tabs.List, {
 		ref,
 		"data-slot": "tabs-list",
-		className: cn(`relative flex items-center gap-(--cue-space-1) ${TAB_RULE} border-border ${TAB_TRACK} data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:border-r`, className),
+		className: cn(`relative flex items-center ${GROUP_GAP} ${TAB_RULE} border-border ${TAB_TRACK} data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:border-r`, className),
 		...elementProps
 	});
 });
@@ -46,7 +49,7 @@ const TabsTab = React.forwardRef(function TabsTab({ className, ...elementProps }
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
 		ref,
 		"data-slot": "tabs-tab",
-		className: cn(`relative inline-flex h-control-md shrink-0 cursor-pointer items-center justify-center gap-(--cue-space-2) ${TAB_SHAPE} px-(--cue-space-4) text-(length:--cue-text-ui) whitespace-nowrap ${SEGMENT_IDLE_INK} transition-colors duration-150 outline-none select-none`, CONTROL_FACE, `hover:text-fg ${FOCUS_RING_INSET_2}`, "data-[disabled]:pointer-events-none data-[disabled]:opacity-40", "after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-transparent after:content-['']", `${TAB_ACTIVE} ${TAB_UNDERLINE}`, className),
+		className: cn(`relative inline-flex h-control-md shrink-0 cursor-pointer items-center justify-center gap-(--cue-space-2) ${TAB_SHAPE} ${SEGMENT_PAD} text-(length:--cue-text-ui) whitespace-nowrap ${SEGMENT_IDLE_INK} transition-colors duration-150 outline-none select-none`, CONTROL_FACE, `${TAB_HOVER_INK} ${FOCUS_RING_INSET_2}`, "data-[disabled]:pointer-events-none data-[disabled]:opacity-40", "after:absolute after:inset-x-0 after:-bottom-px after:h-px after:bg-transparent after:content-['']", `${TAB_ACTIVE} ${TAB_UNDERLINE}`, className),
 		...elementProps
 	});
 });

package/dist/chrome/toolbar.js

@@ -1,8 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING_INSET } from "../system/_focus-ring.js";
+import { GHOST_INK } from "../system/_style-control.js";
 import { useComposedRefs } from "../lib/compose.js";
 import { EDGE_SCROLLER_CLASSES, EdgeChevrons, useEdgeScroll } from "./_edge-scroller.js";
+import { TOOLBAR_FRAME, TOOLBAR_SEPARATOR_HEIGHT } from "../system/_style-toolbar.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toolbar } from "@base-ui/react/toolbar";
@@ -31,7 +33,7 @@ const Toolbar$1 = {
 		const bar = /* @__PURE__ */ jsx(Toolbar.Root, {
 			ref: barRef,
 			"data-slot": "toolbar",
-			className: cn("flex h-(--cue-chrome-toolbar) w-full shrink-0 items-center gap-(--cue-space-2) border-b border-border bg-surface-1 px-(--cue-pad-row-x) data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-(--cue-chrome-toolbar) data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-r data-[orientation=vertical]:border-b-0", scrolls ? EDGE_SCROLLER_CLASSES : null, className),
+			className: cn(`flex w-full shrink-0 items-center border-b ${TOOLBAR_FRAME} bg-surface-1 data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-(--cue-chrome-toolbar) data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-r data-[orientation=vertical]:border-b-0`, scrolls ? EDGE_SCROLLER_CLASSES : null, className),
 			...elementProps,
 			style: {
 				...elementProps.style,
@@ -55,7 +57,7 @@ const Toolbar$1 = {
 		return /* @__PURE__ */ jsxs(Toolbar.Button, {
 			ref,
 			"data-slot": "toolbar-button",
-			className: cn(`inline-flex h-control-md shrink-0 cursor-pointer items-center justify-center gap-(--cue-space-2) rounded-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:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET} data-[disabled]:pointer-events-none data-[disabled]:opacity-40`, className),
+			className: cn(`inline-flex h-control-md shrink-0 cursor-pointer items-center justify-center gap-(--cue-space-2) rounded-control px-(--cue-space-3) font-mono text-(length:--cue-text-ui) whitespace-nowrap ${GHOST_INK} transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg ${FOCUS_RING_INSET} data-[disabled]:pointer-events-none data-[disabled]:opacity-40`, className),
 			...elementProps,
 			children: [Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
 				"aria-hidden": "true",
@@ -75,7 +77,7 @@ const Toolbar$1 = {
 		return /* @__PURE__ */ jsx(Toolbar.Separator, {
 			ref,
 			"data-slot": "toolbar-separator",
-			className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:mx-(--cue-space-1) data-[orientation=vertical]:h-[60%] data-[orientation=vertical]:w-px", className),
+			className: cn(`shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:mx-(--cue-space-1) ${TOOLBAR_SEPARATOR_HEIGHT} data-[orientation=vertical]:w-px`, className),
 			...elementProps
 		});
 	})

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

@@ -4,6 +4,13 @@ import * as React from "react";
 import { ColorFieldProps, InputProps } from "react-aria-components";
 //#region src/color/color-field.d.ts
 interface ColorFieldProps$1 extends Omit<ColorFieldProps, "children"> {
+  /**
+   * The field's accessible name. `ColorField` draws no visible label — React
+   * Aria's label slot is left empty — so name it here, or point
+   * `aria-labelledby` at a label of your own. Without either the input has no
+   * name at all.
+   */
+  "aria-label"?: string;
   /** Rung of the control ladder. Defaults to `"md"`. */
   size?: FormControlSize;
   /** Extra classes for the input itself. */

package/dist/date/_trigger.js

@@ -1,5 +1,8 @@
 import { cn } from "../lib/cn.js";
 import { controlVariants } from "../forms/_chassis.js";
+import { GLYPH_INK_SUBTLE } from "../system/_style-glyph-ink.js";
+import { GLYPH_OPACITY } from "../system/_style-glyph-opacity.js";
+import { GLYPH_SIZE } from "../system/_style-glyph-size.js";
 //#region src/date/_trigger.ts
 /**
 * The shared skin of the two popover-backed date controls, `DatePicker` and
@@ -24,7 +27,7 @@ const dateTriggerValueClasses = "truncate tabular-nums";
 /** Placeholder ink, applied to the readout when there is nothing to read. */
 const dateTriggerPlaceholderClasses = "text-fg-subtle";
 /** The trailing glyph — never a control, so it never takes the pointer. */
-const dateTriggerGlyphClasses = "size-icon-sm shrink-0 text-fg-subtle";
+const dateTriggerGlyphClasses = `${GLYPH_SIZE} shrink-0 ${GLYPH_INK_SUBTLE} ${GLYPH_OPACITY}`;
 /** Padding of the popup around a calendar: one unit tighter than a popover's. */
 const datePopupClasses = "p-(--cue-space-3)";
 //#endregion

package/dist/date/calendar.js

@@ -1,9 +1,14 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "../system/_focus-ring.js";
+import { GLYPH_INK_SUBTLE } from "../system/_style-glyph-ink.js";
+import { GLYPH_OPACITY } from "../system/_style-glyph-opacity.js";
 import { LABEL_FACE } from "../system/_style-label-face.js";
 import { LABEL_CASE } from "../system/_style-label-case.js";
 import { LABEL_TRACKING, LABEL_TRACKING_TIGHT } from "../system/_style-label-tracking.js";
+import { CAPTION_SIZE_LABEL, CAPTION_SIZE_MICRO } from "../system/_style-caption-size.js";
+import { CAPTION_WEIGHT, CAPTION_WEIGHT_NORMAL } from "../system/_style-caption-weight.js";
+import { DAY_HEIGHT, DAY_INK, DAY_SIZE } from "../system/_style-day.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { DayPicker } from "react-day-picker";
@@ -14,7 +19,8 @@ import { DayPicker } from "react-day-picker";
 * react-day-picker ships its own stylesheet; this system never loads it. Each
 * key below is one `UI` / `DayFlag` / `SelectionState` slot, dressed from the
 * same tokens as the rest of the kit: the day cell is one rung of the control
-* ladder (`size-control-sm`), the caption is a mono micro label, the selected
+* ladder (`size-control-sm`, or a set's `style-day-size`, which the month-nav
+* buttons and the caption row share), the caption is a mono micro label, the selected
 * day takes the solid accent and a range's middle takes `accent-soft` — the
 * same "soft tint for a span, solid for the thing you picked" rule the menus
 * use.
@@ -26,18 +32,18 @@ const CALENDAR_CLASSES = {
 	root: "font-mono text-(length:--cue-text-ui) text-fg",
 	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: `${LABEL_FACE} text-(length:--cue-text-label) ${LABEL_TRACKING} text-fg-subtle ${LABEL_CASE}`,
-	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-control border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors duration-150 hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
-	button_next: `flex size-control-sm cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors duration-150 hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
-	chevron: "size-icon-sm fill-current",
+	month_caption: `flex ${DAY_HEIGHT} items-center justify-center`,
+	caption_label: `${LABEL_FACE} ${CAPTION_SIZE_LABEL} ${CAPTION_WEIGHT} ${LABEL_TRACKING} text-fg-subtle ${LABEL_CASE}`,
+	nav: `absolute inset-x-0 top-0 flex ${DAY_HEIGHT} items-center justify-between`,
+	button_previous: `flex ${DAY_SIZE} cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 ${GLYPH_INK_SUBTLE} outline-none transition-colors duration-150 hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
+	button_next: `flex ${DAY_SIZE} cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 ${GLYPH_INK_SUBTLE} outline-none transition-colors duration-150 hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
+	chevron: `size-icon-sm fill-current ${GLYPH_OPACITY}`,
 	month_grid: "border-collapse border-spacing-0",
 	weekdays: "",
-	weekday: `size-control-sm p-0 text-center align-middle ${LABEL_FACE} text-(length:--cue-text-micro) font-normal ${LABEL_TRACKING_TIGHT} text-fg-subtle ${LABEL_CASE}`,
+	weekday: `${DAY_SIZE} p-0 text-center align-middle ${LABEL_FACE} ${CAPTION_SIZE_MICRO} ${CAPTION_WEIGHT_NORMAL} ${LABEL_TRACKING_TIGHT} text-fg-subtle ${LABEL_CASE}`,
 	week: "",
 	day: "p-0 text-center align-middle",
-	day_button: `size-control-sm cursor-pointer rounded-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_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
+	day_button: `${DAY_SIZE} cursor-pointer rounded-control border-0 bg-transparent p-0 font-mono text-(length:--cue-text-ui) tabular-nums ${DAY_INK} outline-none transition-colors duration-150 hover:bg-surface-3 hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
 	today: "[&_button]:font-medium [&_button]:ring-1 [&_button]:ring-inset [&_button]:ring-accent/60",
 	outside: "[&_button]:text-fg-subtle [&_button]:opacity-50",
 	disabled: "opacity-40",

package/dist/forms/_chassis.d.ts

@@ -110,7 +110,7 @@ import { FormControlSize } from "./_chassis-size.js";
  * own `shadow-` utility replaces it through `twMerge`, as it would have
  * replaced nothing before.
  */
-declare const controlSurface = "w-full rounded-control border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-sunken),var(--cue-sunken)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] bg-origin-border [background-clip:padding-box,border-box] shadow-[shadow:0_calc(2px*var(--cue-paint-shadow-scale))_calc(4px*var(--cue-paint-shadow-scale))_var(--cue-paint-rest-shade,transparent)] font-[family-name:var(--cue-style-input-face,var(--cue-font-mono))] font-[number:var(--cue-style-body-weight,inherit)] text-fg placeholder:text-fg-subtle outline-none focus:border-[color:var(--cue-style-focus-edge,var(--cue-border-strong))] focus-visible:outline-solid focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] focus-visible:outline-(--cue-focus) focus-visible:outline-offset-[var(--cue-style-field-focus-offset,-1px)] disabled:opacity-40 data-[disabled]:opacity-40 data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger";
+declare const controlSurface = "w-full rounded-control border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-sunken),var(--cue-sunken)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] bg-origin-border [background-clip:padding-box,border-box] shadow-[shadow:0_calc(2px*var(--cue-paint-shadow-scale))_calc(4px*var(--cue-paint-shadow-scale))_var(--cue-paint-rest-shade,transparent)] font-[family-name:var(--cue-style-input-face,var(--cue-font-mono))] font-[number:var(--cue-style-body-weight,inherit)] text-fg placeholder:text-fg-subtle outline-none hover:border-[color:var(--cue-style-field-hover-edge,transparent)] focus:border-[color:var(--cue-style-focus-edge,var(--cue-border-strong))] focus-visible:outline-solid focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] focus-visible:outline-(--cue-focus) focus-visible:outline-offset-[var(--cue-style-field-focus-offset,-1px)] disabled:opacity-[var(--cue-style-disabled-opacity,0.4)] data-[disabled]:opacity-[var(--cue-style-disabled-opacity,0.4)] disabled:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-sunken)),var(--cue-style-disabled-fill,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)))] data-[disabled]:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-sunken)),var(--cue-style-disabled-fill,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)))] data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger";
 /**
  * The full recessed-control recipe, one variant per rung of the control ladder.
  *
@@ -171,7 +171,15 @@ declare const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 f
  * still visible. `data-invalid` is read off the wrapper, which is where Base
  * UI's `Field` stamps it and where the group already takes
  * `data-[invalid]:border-danger` from {@link controlVariants}.
+ *
+ * The rim is `has-focus:`, not `focus-within:`, for the order Tailwind emits
+ * them in: `focus-within:` comes before `hover:` and `has-focus:` after it, both
+ * before `data-[invalid]:`. Round 6 gave the chassis a hover edge
+ * (`FIELD_HOVER_EDGE`, `transparent` unless a set names one), and under the
+ * pointer it painted over a focused group's rim in every Look; the closing
+ * pass's browser run caught it (`form-focus.spec.ts`, a grouped field). The
+ * wrapper never takes focus itself, so `:has(:focus)` is the same test.
  */
-declare const controlGroupFocusClasses = "focus-within:border-border-strong has-focus-visible:outline-solid has-focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] has-focus-visible:outline-(--cue-focus) has-focus-visible:outline-offset-[var(--cue-style-field-focus-offset,-1px)] data-[invalid]:has-focus-visible:outline-danger";
+declare const controlGroupFocusClasses = "has-focus:border-border-strong has-focus-visible:outline-solid has-focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] has-focus-visible:outline-(--cue-focus) has-focus-visible:outline-offset-[var(--cue-style-field-focus-offset,-1px)] data-[invalid]:has-focus-visible:outline-danger";
 //#endregion
 export { ControlVariantProps, type FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants };

package/dist/forms/_chassis.js

@@ -1,9 +1,11 @@
 import { REST_SHADE_CLASS } from "../system/_paint-rest-shade.js";
+import { DATA_DISABLED_OPACITY, DISABLED_OPACITY, FIELD_DISABLED_FILL } from "../system/_style-disabled.js";
 import { cva } from "../lib/cva.js";
 import { FOCUS_RING_FIELD, FOCUS_RING_GROUP_FIELD } from "../system/_focus-ring-field.js";
 import { CONTROL_STEP_SIZE_BODY, CONTROL_STEP_SIZE_SM } from "../system/_style-control-step.js";
 import { STROKE_SUNKEN } from "../system/_paint-stroke-sunken.js";
 import { BODY_WEIGHT } from "../system/_style-body-weight.js";
+import { FIELD_HOVER_EDGE, FIELD_PAD_LG, FIELD_PAD_MD, FIELD_PAD_SM, INVALID_EDGE } from "../system/_style-field-chassis.js";
 import { INPUT_FACE } from "../system/_style-input-face.js";
 //#region src/forms/_chassis.ts
 /**
@@ -115,7 +117,7 @@ import { INPUT_FACE } from "../system/_style-input-face.js";
 * own `shadow-` utility replaces it through `twMerge`, as it would have
 * replaced nothing before.
 */
-const controlSurface = `w-full rounded-control ${STROKE_SUNKEN} ${REST_SHADE_CLASS} ${INPUT_FACE} ${BODY_WEIGHT} text-fg placeholder:text-fg-subtle outline-none focus:border-[color:var(--cue-style-focus-edge,var(--cue-border-strong))] ${FOCUS_RING_FIELD} disabled:opacity-40 data-[disabled]:opacity-40 data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger`;
+const controlSurface = `w-full rounded-control ${STROKE_SUNKEN} ${REST_SHADE_CLASS} ${INPUT_FACE} ${BODY_WEIGHT} text-fg placeholder:text-fg-subtle outline-none ${FIELD_HOVER_EDGE} focus:border-[color:var(--cue-style-focus-edge,var(--cue-border-strong))] ${FOCUS_RING_FIELD} ${DISABLED_OPACITY} ${DATA_DISABLED_OPACITY} ${FIELD_DISABLED_FILL} ${INVALID_EDGE} data-[invalid]:focus-visible:outline-danger`;
 /**
 * The full recessed-control recipe, one variant per rung of the control ladder.
 *
@@ -128,9 +130,9 @@ const controlSurface = `w-full rounded-control ${STROKE_SUNKEN} ${REST_SHADE_CLA
 */
 const controlVariants = cva(controlSurface, {
 	variants: { size: {
-		sm: `h-control-sm px-(--cue-space-3) ${CONTROL_STEP_SIZE_SM}`,
-		md: "h-control-md px-(--cue-space-4) text-(length:--cue-text-ui)",
-		lg: `h-control-lg px-(--cue-space-5) ${CONTROL_STEP_SIZE_BODY}`
+		sm: `h-control-sm ${FIELD_PAD_SM} ${CONTROL_STEP_SIZE_SM}`,
+		md: `h-control-md ${FIELD_PAD_MD} text-(length:--cue-text-ui)`,
+		lg: `h-control-lg ${FIELD_PAD_LG} ${CONTROL_STEP_SIZE_BODY}`
 	} },
 	defaultVariants: { size: "md" }
 });
@@ -179,7 +181,15 @@ const bareControlClasses = `min-w-0 flex-1 border-0 bg-transparent p-0 ${INPUT_F
 * still visible. `data-invalid` is read off the wrapper, which is where Base
 * UI's `Field` stamps it and where the group already takes
 * `data-[invalid]:border-danger` from {@link controlVariants}.
+*
+* The rim is `has-focus:`, not `focus-within:`, for the order Tailwind emits
+* them in: `focus-within:` comes before `hover:` and `has-focus:` after it, both
+* before `data-[invalid]:`. Round 6 gave the chassis a hover edge
+* (`FIELD_HOVER_EDGE`, `transparent` unless a set names one), and under the
+* pointer it painted over a focused group's rim in every Look; the closing
+* pass's browser run caught it (`form-focus.spec.ts`, a grouped field). The
+* wrapper never takes focus itself, so `:has(:focus)` is the same test.
 */
-const controlGroupFocusClasses = `focus-within:border-border-strong ${FOCUS_RING_GROUP_FIELD} data-[invalid]:has-focus-visible:outline-danger`;
+const controlGroupFocusClasses = `has-focus:border-border-strong ${FOCUS_RING_GROUP_FIELD} data-[invalid]:has-focus-visible:outline-danger`;
 //#endregion
 export { bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants };

package/dist/forms/_listbox.js

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