@cueplusplus/ui 0.21.0 → 0.22.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @cueplusplus/ui
 
+## 0.22.0
+
+### Minor Changes
+
+- bdc8a32: A field's fill is a name now: `--cue-style-field-fill`. Every recessed control — Input, NumberField, SearchInput, Select, Combobox, Autocomplete, MultiSelect, TagsInput, Textarea, OtpField, ScrubInput, InputGroup, ColorField, ColorPicker, the date fields and MusicalTimeInput — fills with it before `--cue-sunken`, and a disabled one follows it unless `--cue-style-disabled-fill` is set. Nothing sets it by default, so nothing changes until a style set or a subtree does: `style={{ "--cue-style-field-fill": "var(--cue-surface-2)" }}` on any wrapper fills every field inside it. In the manifest, Button, Checkbox, CheckboxGroup, Switch and Toggle no longer list three stroke tokens they never painted.
+
+  The studio's generated tables carry the new catalogue identity, so a scene validates against the vocabulary that now includes a field's fill.
+
+- 1962b97: Fields can take their fill from the ground they stand on. Put `data-field-ground="relative"` on any element — `<html>` included — and every recessed control inside it fills one step off its nearest container, toward its text colour: lighter on a dark card, deeper on a light one. `--cue-style-field-step` sets the distance (6% by default) and `--cue-style-field-toward` the direction (`black` inline is always deeper). Containers painted with `bg-bg`, `bg-sunken`, `bg-surface-1/2/3`, a Card or an overlay say what they painted as `--cue-ground` (an overlay's is its `--cue-style-overlay-ground` when a Look sets one, so its fields follow the overlay the Look drew); anything painted another way sets `--cue-ground` itself. `--cue-style-field-fill` still wins, a disabled field follows, and nothing changes outside the attribute. The derivation is a `field-ground` utility in `@cueplusplus/ui/styles.css`, so a field of your own can wear it too.
+
+  The studio's generated tables carry the new catalogue identity, so a scene validates against the vocabulary that now includes the relative fill's two names.
+
+### Patch Changes
+
+- Updated dependencies [bdc8a32]
+- Updated dependencies [1962b97]
+  - @cueplusplus/tokens@0.22.0
+
 ## 0.21.0
 
 ### Minor Changes

package/dist/forms/_chassis.d.ts

@@ -102,6 +102,11 @@ import { FormControlSize } from "./_chassis-size.js";
  * set (a hex colour code, a DMX value) restates `font-mono` on top, as
  * `color-picker.tsx`'s hex field does.
  *
+ * **`field-ground`** is `styles.css`'s opt-in relative fill (spec
+ * 2026-10-08-field-ground R3): inside `[data-field-ground="relative"]` it
+ * re-declares this field's own `--cue-sunken` one step off the ground it stands
+ * on; anywhere else it compiles to nothing that applies.
+ *
  * **The resting shade** ({@link REST_SHADE_CLASS}, spec §3.10) is the one
  * shadow this recipe draws: the stroke paints a border and a ground and no
  * shadow, so the shade is added as a utility of its own rather than composed
@@ -110,7 +115,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-[var(--cue-style-field-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))] 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";
+declare const controlSurface = "w-full field-ground rounded-[var(--cue-style-field-radius,calc(var(--cue-style-control-radius,var(--cue-radius-control))*var(--cue-radius-scale)))] border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-style-field-fill,var(--cue-sunken)),var(--cue-style-field-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)))] 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-style-field-fill,var(--cue-sunken))),var(--cue-style-disabled-fill,var(--cue-style-field-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-style-field-fill,var(--cue-sunken))),var(--cue-style-disabled-fill,var(--cue-style-field-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.
  *

package/dist/forms/_chassis.js

@@ -1,9 +1,9 @@
 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 { DATA_DISABLED_OPACITY, DISABLED_OPACITY } 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 { FIELD_DISABLED_FILL, 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, FIELD_RADIUS, INVALID_EDGE } from "../system/_style-field-chassis.js";
 import { INPUT_FACE } from "../system/_style-input-face.js";
@@ -109,6 +109,11 @@ import { INPUT_FACE } from "../system/_style-input-face.js";
 * set (a hex colour code, a DMX value) restates `font-mono` on top, as
 * `color-picker.tsx`'s hex field does.
 *
+* **`field-ground`** is `styles.css`'s opt-in relative fill (spec
+* 2026-10-08-field-ground R3): inside `[data-field-ground="relative"]` it
+* re-declares this field's own `--cue-sunken` one step off the ground it stands
+* on; anywhere else it compiles to nothing that applies.
+*
 * **The resting shade** ({@link REST_SHADE_CLASS}, spec §3.10) is the one
 * shadow this recipe draws: the stroke paints a border and a ground and no
 * shadow, so the shade is added as a utility of its own rather than composed
@@ -117,7 +122,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 ${FIELD_RADIUS} ${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`;
+const controlSurface = `w-full field-ground ${FIELD_RADIUS} ${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.
 *

package/dist/overlays/_surface.d.ts

@@ -18,7 +18,7 @@
  * @example
  * <Popover.Popup className={cn(overlaySurfaceClasses, className)} />
  */
-declare const overlaySurfaceClasses = "rounded-overlay border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-style-overlay-ground,var(--cue-surface-2)),var(--cue-style-overlay-ground,var(--cue-surface-2))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-overlay-from,var(--cue-border-overlay)),var(--cue-paint-stroke-overlay-to,var(--cue-border-overlay)))] bg-origin-border [background-clip:padding-box,border-box] shadow-[0_0_0_var(--cue-paint-rim-width)_var(--cue-paint-shade-hairline,transparent),0_calc(2px*var(--cue-paint-shadow-scale))_calc(6px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-near,transparent),0_calc(8px*var(--cue-paint-shadow-scale))_calc(24px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-far,rgba(0,0,0,0.4)),inset_0_1px_0_0_var(--cue-paint-sheen-ink,transparent)]";
+declare const overlaySurfaceClasses = "rounded-overlay border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-style-overlay-ground,var(--cue-surface-2)),var(--cue-style-overlay-ground,var(--cue-surface-2))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-overlay-from,var(--cue-border-overlay)),var(--cue-paint-stroke-overlay-to,var(--cue-border-overlay)))] bg-origin-border [background-clip:padding-box,border-box] [--cue-ground:var(--cue-style-overlay-ground,var(--cue-surface-2))] shadow-[0_0_0_var(--cue-paint-rim-width)_var(--cue-paint-shade-hairline,transparent),0_calc(2px*var(--cue-paint-shadow-scale))_calc(6px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-near,transparent),0_calc(8px*var(--cue-paint-shadow-scale))_calc(24px*var(--cue-paint-shadow-scale))_var(--cue-paint-shadow-spread)_var(--cue-paint-shade-far,rgba(0,0,0,0.4)),inset_0_1px_0_0_var(--cue-paint-sheen-ink,transparent)]";
 /**
  * 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.

package/dist/styles.css

@@ -133,3 +133,55 @@
     clip-path: none;
   }
 }
+
+/* A container's ground, for the relative field fill (spec 2026-10-08-field-ground R3).
+ *
+ * Every fill utility a container can paint with says what it painted, as
+ * `--cue-ground`, and a control inside `[data-field-ground="relative"]` mixes
+ * its fill from the nearest one (`system/_field-ground.ts`). Declaring it is
+ * free: nothing outside the opt-in reads it. In `base` so a consumer's own
+ * utility or inline `--cue-ground` wins; a container painted any other way — a
+ * gradient, an image, a translucent fill — sets `--cue-ground` itself. */
+@layer base {
+  .bg-bg {
+    --cue-ground: var(--cue-bg);
+  }
+  .bg-sunken {
+    --cue-ground: var(--cue-sunken);
+  }
+  .bg-surface-1 {
+    --cue-ground: var(--cue-surface-1);
+  }
+  .bg-surface-2 {
+    --cue-ground: var(--cue-surface-2);
+  }
+  .bg-surface-3 {
+    --cue-ground: var(--cue-surface-3);
+  }
+}
+
+/* The relative field fill (spec 2026-10-08-field-ground R3), and opt-in.
+ *
+ * Nothing happens until an ancestor carries `data-field-ground="relative"`.
+ * Inside one, a field that wears `field-ground` — every control the recessed
+ * chassis draws does — re-declares its OWN `--cue-sunken` one step off the
+ * nearest container's `--cue-ground` (declared above, and by the raised and
+ * overlay strokes), toward its text colour: lighter on a dark ground, deeper on
+ * a light one, 6% unless `--cue-style-field-step` says otherwise.
+ * `--cue-style-field-toward` changes the direction.
+ *
+ * On the field, never on the ancestor: a custom property resolves its `var()`s
+ * where it is declared, so declared on the opt-in element it would freeze at
+ * that element's ground and every field below — in a card, in a popover —
+ * would fill as if it stood on the page.
+ *
+ * Re-declaring `sunken` rather than adding a term to the field's fill keeps
+ * the chain the stroke already reads, `var(--cue-style-field-fill,
+ * var(--cue-sunken))`: a named fill still wins, a disabled field follows, and
+ * no field's class grows by more than this utility's name. A consumer's own
+ * field can wear `field-ground` too. */
+@utility field-ground {
+  :where([data-field-ground="relative"]) & {
+    --cue-sunken: color-mix(in oklab, var(--cue-ground, var(--cue-bg)), var(--cue-style-field-toward, var(--cue-fg)) var(--cue-style-field-step, 6%));
+  }
+}

package/dist/system/_paint-stroke-sunken.js

@@ -12,8 +12,28 @@
 * The recipe itself, and why its off state is a flat gradient rather than
 * `none`, is documented once in `./_paint`.
 *
+* **The fill is a name first** (spec 2026-10-08-field-ground R2):
+* `--cue-style-field-fill`, declared on no `:root` for the reason
+* `_style-input-face.ts` gives, so with nothing set this resolves to exactly
+* the `--cue-sunken` it always painted. A style set, or any subtree, names it.
+*
 * @internal Not part of the public API.
 */
-const STROKE_SUNKEN = "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]";
+const STROKE_SUNKEN = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-style-field-fill,var(--cue-sunken)),var(--cue-style-field-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)))] bg-origin-border [background-clip:padding-box,border-box]";
+/**
+* The same two layers when the field is disabled: the fill read through
+* `style-disabled-fill`, then the field's own fill, then `sunken`, on
+* `:disabled` and on `[data-disabled]`.
+*
+* **Here, beside the resting recipe, and not in `_style-disabled.ts`** with the
+* other disabled recipes (spec 2026-10-08-field-ground R2). Docgen credits every
+* `--cue-*` in a module to each component that imports it, and the button, the
+* checkbox and the switch import that module for their own disabled recipes:
+* left there, all of them would claim a field's fill they never paint. This
+* module is imported by the field chassis alone, so the credit is exact, and
+* the library ships one file per module, so a module of its own would have
+* cost every page that draws a field one more request.
+*/
+const FIELD_DISABLED_FILL = "disabled:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-style-field-fill,var(--cue-sunken))),var(--cue-style-disabled-fill,var(--cue-style-field-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-style-field-fill,var(--cue-sunken))),var(--cue-style-disabled-fill,var(--cue-style-field-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)))]";
 //#endregion
-export { STROKE_SUNKEN };
+export { FIELD_DISABLED_FILL, STROKE_SUNKEN };

package/dist/system/_paint-stroke-surface-1.js

@@ -12,8 +12,12 @@
 * The recipe itself, and why its off state is a flat gradient rather than
 * `none`, is documented once in `./_paint`.
 *
+* It also says what it painted, as `--cue-ground`, for the relative field fill
+* (spec 2026-10-08-field-ground R3): a field inside `[data-field-ground="relative"]`
+* takes its fill one step off the nearest container's ground.
+*
 * @internal Not part of the public API.
 */
-const STROKE_SURFACE_1 = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-surface-1),var(--cue-surface-1)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-raised-from,var(--cue-paint-stroke-from,var(--cue-border))),var(--cue-paint-stroke-raised-to,var(--cue-paint-stroke-to,var(--cue-border))))] bg-origin-border [background-clip:padding-box,border-box]";
+const STROKE_SURFACE_1 = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-surface-1),var(--cue-surface-1)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-raised-from,var(--cue-paint-stroke-from,var(--cue-border))),var(--cue-paint-stroke-raised-to,var(--cue-paint-stroke-to,var(--cue-border))))] bg-origin-border [background-clip:padding-box,border-box] [--cue-ground:var(--cue-surface-1)]";
 //#endregion
 export { STROKE_SURFACE_1 };

package/dist/system/_paint-stroke-surface-2.js

@@ -33,8 +33,12 @@
 * The recipe itself, and why its off state is a flat gradient rather than
 * `none`, is documented once in `./_paint`.
 *
+* It also says what it painted, as `--cue-ground`, for the relative field fill
+* (spec 2026-10-08-field-ground R3): a field inside `[data-field-ground="relative"]`
+* takes its fill one step off the nearest container's ground.
+*
 * @internal Not part of the public API.
 */
-const STROKE_SURFACE_2 = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-style-overlay-ground,var(--cue-surface-2)),var(--cue-style-overlay-ground,var(--cue-surface-2))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-overlay-from,var(--cue-border-overlay)),var(--cue-paint-stroke-overlay-to,var(--cue-border-overlay)))] bg-origin-border [background-clip:padding-box,border-box]";
+const STROKE_SURFACE_2 = "border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-style-overlay-ground,var(--cue-surface-2)),var(--cue-style-overlay-ground,var(--cue-surface-2))),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-overlay-from,var(--cue-border-overlay)),var(--cue-paint-stroke-overlay-to,var(--cue-border-overlay)))] bg-origin-border [background-clip:padding-box,border-box] [--cue-ground:var(--cue-style-overlay-ground,var(--cue-surface-2))]";
 //#endregion
 export { STROKE_SURFACE_2 };

package/dist/system/_style-disabled.js

@@ -33,12 +33,6 @@ const LABEL_DISABLED_OPACITY = "has-[[data-disabled]]:opacity-[var(--cue-style-d
 /** A disabled control label's ink, falling back to the label ink it drew (`LABEL_INK`). */
 const LABEL_DISABLED_INK = "has-[[data-disabled]]:text-[color:var(--cue-style-disabled-ink,var(--cue-style-label-ink,var(--cue-fg-muted)))]";
 /**
-* The field chassis's fill when disabled: its own two layers (`STROKE_SUNKEN`),
-* with the fill layer's `sunken` read through `style-disabled-fill`, on
-* `:disabled` and on `[data-disabled]`.
-*/
-const FIELD_DISABLED_FILL = "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)))]";
-/**
 * The button tones' fill and ink when disabled, each falling back to the tone's own resting fill and ink.
 * The two transparent tones keep their ground and take an edge instead (`style-disabled-edge`, falling
 * back to the edge each drew): stripe.com's disabled icon button stays on its ground and draws a 1px rim
@@ -67,4 +61,4 @@ const CHECK_DISABLED = "data-[disabled]:bg-[color:var(--cue-style-disabled-fill,
 /** The switch's track when disabled, unchecked and checked, each state keeping its own fallback. */
 const SWITCH_DISABLED_TRACK = "data-[disabled]:bg-[color:var(--cue-style-disabled-fill,var(--cue-surface-3))] data-[disabled]:data-[checked]:bg-[color:var(--cue-style-disabled-fill,var(--cue-accent))]";
 //#endregion
-export { CHECK_DISABLED, DATA_DISABLED_OPACITY, DISABLED_OPACITY, DISABLED_TONES, FIELD_DISABLED_FILL, LABEL_DISABLED_INK, LABEL_DISABLED_OPACITY, SWITCH_DISABLED_TRACK };
+export { CHECK_DISABLED, DATA_DISABLED_OPACITY, DISABLED_OPACITY, DISABLED_TONES, LABEL_DISABLED_INK, LABEL_DISABLED_OPACITY, SWITCH_DISABLED_TRACK };

package/manifest/components/alert-dialog.json

@@ -172,6 +172,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/autocomplete.json

@@ -222,6 +222,7 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-hair-strong",
     "--cue-icon-sm",
     "--cue-info",
@@ -275,6 +276,7 @@
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
     "--cue-style-display-variation",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/button.json

@@ -124,9 +124,6 @@
     "--cue-paint-glow-ink-hover",
     "--cue-paint-rest-shade",
     "--cue-paint-shadow-scale",
-    "--cue-paint-stroke-angle",
-    "--cue-paint-stroke-from",
-    "--cue-paint-stroke-to",
     "--cue-radius-control",
     "--cue-space-4",
     "--cue-space-5",

package/manifest/components/card.json

@@ -113,6 +113,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rest-shade",
     "--cue-paint-rim-ink",

package/manifest/components/channel-matrix.json

@@ -198,6 +198,7 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/chart-tooltip-content.json

@@ -100,6 +100,7 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/checkbox-group.json

@@ -43,9 +43,6 @@
     "--cue-icon-sm",
     "--cue-paint-rest-shade",
     "--cue-paint-shadow-scale",
-    "--cue-paint-stroke-angle",
-    "--cue-paint-stroke-from",
-    "--cue-paint-stroke-to",
     "--cue-radius-control",
     "--cue-radius-scale",
     "--cue-space-2",

package/manifest/components/checkbox.json

@@ -68,9 +68,6 @@
     "--cue-icon-sm",
     "--cue-paint-rest-shade",
     "--cue-paint-shadow-scale",
-    "--cue-paint-stroke-angle",
-    "--cue-paint-stroke-from",
-    "--cue-paint-stroke-to",
     "--cue-radius-control",
     "--cue-radius-scale",
     "--cue-space-2",

package/manifest/components/color-field.json

@@ -89,6 +89,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/color-picker.json

@@ -223,6 +223,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/combobox.json

@@ -224,6 +224,7 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-hair-strong",
     "--cue-icon-md",
     "--cue-icon-sm",
@@ -278,6 +279,7 @@
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
     "--cue-style-display-variation",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/command-palette.json

@@ -159,6 +159,7 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-icon-md",
     "--cue-icon-sm",
     "--cue-leading-ui",

package/manifest/components/composer.json

@@ -225,6 +225,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/context-menu.json

@@ -93,6 +93,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/date-field.json

@@ -80,6 +80,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/date-picker.json

@@ -243,6 +243,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/date-range-picker.json

@@ -243,6 +243,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/dialog.json

@@ -167,6 +167,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/dmx-bar.json

@@ -65,6 +65,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/dmx-strip.json

@@ -75,6 +75,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/drawer.json

@@ -161,6 +161,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/dropdown-menu.json

@@ -222,6 +222,7 @@
     "--cue-fg-muted",
     "--cue-fg-subtle",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-icon-sm",
     "--cue-leading-ui",
     "--cue-paint-rim-width",

package/manifest/components/env-var-input.json

@@ -180,6 +180,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/hover-card.json

@@ -147,6 +147,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/input-group.json

@@ -100,6 +100,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/input.json

@@ -96,6 +96,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/menubar.json

@@ -143,6 +143,7 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/multi-select.json

@@ -215,6 +215,7 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-hair-strong",
     "--cue-icon-sm",
     "--cue-info",
@@ -268,6 +269,7 @@
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
     "--cue-style-display-variation",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/musical-time-input.json

@@ -128,6 +128,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/navigation-menu.json

@@ -229,6 +229,7 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-icon-sm",
     "--cue-leading-ui",
     "--cue-paint-rim-width",

package/manifest/components/number-field.json

@@ -117,6 +117,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/otp-field.json

@@ -150,6 +150,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/password-input.json

@@ -158,6 +158,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/popover.json

@@ -177,6 +177,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/scrub-input.json

@@ -244,6 +244,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/search-input.json

@@ -182,6 +182,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/select.json

@@ -202,6 +202,7 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-icon-md",
     "--cue-icon-sm",
     "--cue-paint-rest-shade",
@@ -235,6 +236,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/sheet.json

@@ -167,6 +167,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/components/switch.json

@@ -65,9 +65,6 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
-    "--cue-paint-stroke-angle",
-    "--cue-paint-stroke-from",
-    "--cue-paint-stroke-to",
     "--cue-space-3",
     "--cue-style-body-weight",
     "--cue-style-check-edge",

package/manifest/components/tags-input.json

@@ -215,6 +215,7 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-hair-strong",
     "--cue-icon-sm",
     "--cue-info",
@@ -268,6 +269,7 @@
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
     "--cue-style-display-variation",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/textarea.json

@@ -92,6 +92,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/theme-configurator.json

@@ -127,6 +127,7 @@
     "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-font-sans",
+    "--cue-ground",
     "--cue-icon-sm",
     "--cue-leading-ui",
     "--cue-paint-rim-width",

package/manifest/components/time-field.json

@@ -80,6 +80,7 @@
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",
     "--cue-style-disabled-opacity",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/toast.json

@@ -78,6 +78,7 @@
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-icon-md",
     "--cue-icon-sm",
     "--cue-info",

package/manifest/components/toggle.json

@@ -103,9 +103,6 @@
     "--cue-font-mono",
     "--cue-icon-md",
     "--cue-icon-sm",
-    "--cue-paint-stroke-angle",
-    "--cue-paint-stroke-from",
-    "--cue-paint-stroke-to",
     "--cue-radius-control",
     "--cue-space-3",
     "--cue-space-4",

package/manifest/components/tooltip.json

@@ -146,6 +146,7 @@
     "--cue-fg",
     "--cue-fg-muted",
     "--cue-font-mono",
+    "--cue-ground",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
     "--cue-paint-scrim-filter",

package/manifest/manifest.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 2,
   "library": "@cueplusplus/ui",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "generatedAt": "1970-01-01T00:00:00.000Z",
   "themes": [
     "command",
@@ -38,7 +38,7 @@
   ],
   "tokens": {
     "path": "./tokens.json",
-    "sha256": "1ee30869c3173d29b483b2e19987225414be834c7709d67428049f47f4958232"
+    "sha256": "38d9502fd7813d7d3d0c9eaa02ae5850b4f9855c6954c8671569cf08e97ea73d"
   },
   "systemApis": [
     {
@@ -474,7 +474,7 @@
       "mdUrl": "/docs/components/chart-tooltip-content.md",
       "jsonUrl": "/r/components/chart-tooltip-content.json",
       "path": "./components/chart-tooltip-content.json",
-      "sha256": "fe20a30a66201cd20bd84493cd4e9fd3a1b495e3d06d331d36278b58e080fd29"
+      "sha256": "4e94e7d8b694aa50526a77c9f12837ad03eb6389286a94f99a37647adb071532"
     },
     {
       "name": "AgentPile",
@@ -513,7 +513,7 @@
       "mdUrl": "/docs/components/composer.md",
       "jsonUrl": "/r/components/composer.json",
       "path": "./components/composer.json",
-      "sha256": "1f58fbd40188c55e47890a6c59206e01c72a77f504f15a3c7a328b5459b173e0"
+      "sha256": "1a3ba8b3a3fed698a6e1f5b2cb40f7a2d5f26005e112d13c359741ca5c1e6a48"
     },
     {
       "name": "DelegationCard",
@@ -708,7 +708,7 @@
       "mdUrl": "/docs/components/navigation-menu.md",
       "jsonUrl": "/r/components/navigation-menu.json",
       "path": "./components/navigation-menu.json",
-      "sha256": "9823e1bcd9132f8273704b54f5738c82693765e6c70ff90b7c739a6ebc5afab3"
+      "sha256": "e049d58fd4cefdde2f823588d0544d79a9d222c44864eeaf2b5bacb780d07121"
     },
     {
       "name": "PageShell",
@@ -942,7 +942,7 @@
       "mdUrl": "/docs/components/color-field.md",
       "jsonUrl": "/r/components/color-field.json",
       "path": "./components/color-field.json",
-      "sha256": "d7d2e4dbf918e82614de5816ca877dc96e64e1bf8c581a2fd3ecfbd8bf350530"
+      "sha256": "8f0197d4e6beda16194a055c1bc3762a133182c78d9fe676945163935ccdf649"
     },
     {
       "name": "ColorPicker",
@@ -955,7 +955,7 @@
       "mdUrl": "/docs/components/color-picker.md",
       "jsonUrl": "/r/components/color-picker.json",
       "path": "./components/color-picker.json",
-      "sha256": "18b01adc5f038d00454d538a1e4086f4c66abafc418f77321ab86cf999869b7a"
+      "sha256": "689bc048df5076650787539798e2cc9e14242943e167f2bbfe162c7fad5e4ce0"
     },
     {
       "name": "ColorSlider",
@@ -1046,7 +1046,7 @@
       "mdUrl": "/docs/components/theme-configurator.md",
       "jsonUrl": "/r/components/theme-configurator.json",
       "path": "./components/theme-configurator.json",
-      "sha256": "e0d35e2a4378bae2a052bf5230ca02f0624d11335f008c113ede6d41e63e3e34"
+      "sha256": "9204578d89900e16cc7ba01961bac737addb92ebf00208d31b426cde4b138bbc"
     },
     {
       "name": "TokenEditor",
@@ -1085,7 +1085,7 @@
       "mdUrl": "/docs/components/date-field.md",
       "jsonUrl": "/r/components/date-field.json",
       "path": "./components/date-field.json",
-      "sha256": "1359c9ccabb4c1e6e8eff5d1bfe4a1af2a38daf35d454df91ef6cc86488f868a"
+      "sha256": "7dbd02a73256b5fa17f8297d2fa812cce04a68f7534d281d56c6d9d956e1d846"
     },
     {
       "name": "DatePicker",
@@ -1098,7 +1098,7 @@
       "mdUrl": "/docs/components/date-picker.md",
       "jsonUrl": "/r/components/date-picker.json",
       "path": "./components/date-picker.json",
-      "sha256": "2e6b21b07d6cbd7fda8e345381318c9d4244bd8a61abb274a7774da7a0c1f235"
+      "sha256": "3e1b03e3f9297c2e2e9464f3e104b4f0dd54f8f9ebbcde85a8f62f3bada647cb"
     },
     {
       "name": "DateRangePicker",
@@ -1111,7 +1111,7 @@
       "mdUrl": "/docs/components/date-range-picker.md",
       "jsonUrl": "/r/components/date-range-picker.json",
       "path": "./components/date-range-picker.json",
-      "sha256": "7ed1eb9b8f43bf0f909b0169390cbab7e723a65bfff6a4a2c83e2526d7dd4d08"
+      "sha256": "2f56557fd70d5b4ebca6a93831e038c7d67b64f58c140902549b0a3e242bc031"
     },
     {
       "name": "TimeField",
@@ -1124,7 +1124,7 @@
       "mdUrl": "/docs/components/time-field.md",
       "jsonUrl": "/r/components/time-field.json",
       "path": "./components/time-field.json",
-      "sha256": "fcfc5e8e5e3d0a69773dab6a80ca1d6fe16b24b92237ccbc672c5b80e37dc3e2"
+      "sha256": "be505c5b95bf73bf252534ed7f19adc9f36471c55c7497f84b5e87c0f0689ac0"
     },
     {
       "name": "ChannelMatrix",
@@ -1137,7 +1137,7 @@
       "mdUrl": "/docs/components/channel-matrix.md",
       "jsonUrl": "/r/components/channel-matrix.json",
       "path": "./components/channel-matrix.json",
-      "sha256": "ba3a269155d65d6b874678b9a680b5b0e2d823dfe5bdfcdac8cf5f8b60d40140"
+      "sha256": "2c5e499a97a49923b834253497ece55390367224d6af8e30af1b1b959c1a53a3"
     },
     {
       "name": "DmxBar",
@@ -1150,7 +1150,7 @@
       "mdUrl": "/docs/components/dmx-bar.md",
       "jsonUrl": "/r/components/dmx-bar.json",
       "path": "./components/dmx-bar.json",
-      "sha256": "e647808fc3589bf4db55e0dbda49925871aa071f6ee5aedaa3739d56bd020de5"
+      "sha256": "3047e46160e35417ac46bc16a28c4a5887b7b98d9a193cc7b75cc3b4a82b5ffb"
     },
     {
       "name": "DmxStrip",
@@ -1163,7 +1163,7 @@
       "mdUrl": "/docs/components/dmx-strip.md",
       "jsonUrl": "/r/components/dmx-strip.json",
       "path": "./components/dmx-strip.json",
-      "sha256": "5b4482e793389e6050f1409be090ca224e60955179310f6383ccaad837f962f3"
+      "sha256": "1dc0669d2c4553feebe06672a7f9689d772a45d31e269d3c13033badf57d66dd"
     },
     {
       "name": "UniverseGrid",
@@ -3282,7 +3282,7 @@
       "mdUrl": "/docs/components/autocomplete.md",
       "jsonUrl": "/r/components/autocomplete.json",
       "path": "./components/autocomplete.json",
-      "sha256": "8364e0ea94d764b22dee6c2d25efe9a9bf7d8d362de66e8b3b357105ec8cf335"
+      "sha256": "49bbdf5a1c223ca65b2458ac6b87d9a2d0c8054653eb668eb707dc4be0500278"
     },
     {
       "name": "ButtonGroup",
@@ -3308,7 +3308,7 @@
       "mdUrl": "/docs/components/checkbox.md",
       "jsonUrl": "/r/components/checkbox.json",
       "path": "./components/checkbox.json",
-      "sha256": "776298fd9aa7faba417249e73f454189dfc352d9b32d5cb3b6d4ae82655d8f16"
+      "sha256": "c7e27604f966cda47b68f6a074fd31048d83bd89955e1c9c7dcbd6454928348e"
     },
     {
       "name": "CheckboxGroup",
@@ -3321,7 +3321,7 @@
       "mdUrl": "/docs/components/checkbox-group.md",
       "jsonUrl": "/r/components/checkbox-group.json",
       "path": "./components/checkbox-group.json",
-      "sha256": "3f41a272c006524f5b0b9f5bcdb869476fe9ab5ee55a3a93154e7feddf859eb4"
+      "sha256": "bc79a77047d11137b74b78a25baf59b1f3bdd826e8ef3fe33ccfb2c4940ed8d1"
     },
     {
       "name": "Combobox",
@@ -3334,7 +3334,7 @@
       "mdUrl": "/docs/components/combobox.md",
       "jsonUrl": "/r/components/combobox.json",
       "path": "./components/combobox.json",
-      "sha256": "21c5fd19d86d07c246a6b0d96358b83803f24443992e506cacf66f7a7c55c669"
+      "sha256": "0f66194a077d0dd5db155596a88c76760a858ff95d485e43b75415f626ef53b6"
     },
     {
       "name": "EnvVarInput",
@@ -3347,7 +3347,7 @@
       "mdUrl": "/docs/components/env-var-input.md",
       "jsonUrl": "/r/components/env-var-input.json",
       "path": "./components/env-var-input.json",
-      "sha256": "badf58fdbc034eabfcc77308dff585c89ee672a0bd237d93c3cf3b16b0ab3b59"
+      "sha256": "6840d523ae8695033a80b61fa3d1cd94e277061a880cf1b70dfee836f81b2cb8"
     },
     {
       "name": "Field",
@@ -3425,7 +3425,7 @@
       "mdUrl": "/docs/components/input.md",
       "jsonUrl": "/r/components/input.json",
       "path": "./components/input.json",
-      "sha256": "10c51201c25c0175f4bb115ef80831fc5ee456d93fad7f025bf1158e476e39a9"
+      "sha256": "b24851abe536d705b8affcbfb51c105603afa0b893f0f2a76f96f0376f38f02d"
     },
     {
       "name": "InputGroup",
@@ -3438,7 +3438,7 @@
       "mdUrl": "/docs/components/input-group.md",
       "jsonUrl": "/r/components/input-group.json",
       "path": "./components/input-group.json",
-      "sha256": "fea1c59e6fe17f694e36090bc9f90fe1c1574508685974070c7af26bd840a051"
+      "sha256": "563eff7f480d07795d1e1cd72c8dfd657740398b984a7882685a2eed5ca62f54"
     },
     {
       "name": "MultiSelect",
@@ -3451,7 +3451,7 @@
       "mdUrl": "/docs/components/multi-select.md",
       "jsonUrl": "/r/components/multi-select.json",
       "path": "./components/multi-select.json",
-      "sha256": "66d12cd412508f080999720fb4e5fc399083479df2d01016624b8c9096ea9f38"
+      "sha256": "e7efabaa74b06f848cae209f842598ce949bf44a1ecc3be029f5649fc6584da3"
     },
     {
       "name": "NumberField",
@@ -3464,7 +3464,7 @@
       "mdUrl": "/docs/components/number-field.md",
       "jsonUrl": "/r/components/number-field.json",
       "path": "./components/number-field.json",
-      "sha256": "f52612cc37160e3d9919888bbcad8086b45eefad8a82eef684c2235eb9f5a211"
+      "sha256": "5793c625ef9a4847d662bac1bb8fd43dff8f1f3d95132ee65282778cd0b682f7"
     },
     {
       "name": "OTPField",
@@ -3477,7 +3477,7 @@
       "mdUrl": "/docs/components/otp-field.md",
       "jsonUrl": "/r/components/otp-field.json",
       "path": "./components/otp-field.json",
-      "sha256": "2c133fed88e3f33ac034ea88dc7f909c5121f8d3ab8900a63fcfd3125d8d5074"
+      "sha256": "6d24f09139d73a6af651664ff7958f5f727c3908235102b4172ae85b4ddb8e7c"
     },
     {
       "name": "PasswordInput",
@@ -3490,7 +3490,7 @@
       "mdUrl": "/docs/components/password-input.md",
       "jsonUrl": "/r/components/password-input.json",
       "path": "./components/password-input.json",
-      "sha256": "69343036d07a32fc516cc167674db59d12469ff524868a744bd96fbc86ba3a43"
+      "sha256": "addb0ef6ac0bbf8472c401b9f99da078e8195d3faef43b92ed8843baec6d4867"
     },
     {
       "name": "Radio",
@@ -3542,7 +3542,7 @@
       "mdUrl": "/docs/components/scrub-input.md",
       "jsonUrl": "/r/components/scrub-input.json",
       "path": "./components/scrub-input.json",
-      "sha256": "b65d08da01e8d4760a5bbe0bf1fa1a3e27ec2ebc98b97937cd770dc926d55034"
+      "sha256": "07a25f241dc890c1fbd34641cf5bb90921317b6298d5f578aabb0f64eac6f83a"
     },
     {
       "name": "SearchInput",
@@ -3555,7 +3555,7 @@
       "mdUrl": "/docs/components/search-input.md",
       "jsonUrl": "/r/components/search-input.json",
       "path": "./components/search-input.json",
-      "sha256": "732d6734bde69b59b874571e7636fbae5819e8d817f3351e6d959931d79dcce7"
+      "sha256": "c3f572e9b0e3e960a1975998a8e6681a59c71d58f9bb98922902ac26085fea06"
     },
     {
       "name": "Select",
@@ -3568,7 +3568,7 @@
       "mdUrl": "/docs/components/select.md",
       "jsonUrl": "/r/components/select.json",
       "path": "./components/select.json",
-      "sha256": "1db3b53ad51945704f8e7e7bc48a3cf2d01a89aa87f28928989b4a2b40d15918"
+      "sha256": "d5e09c0c7fc5285b2d2d1ef92a93f6f6042ffc49f5495e730a70fc4d6448782a"
     },
     {
       "name": "Slider",
@@ -3594,7 +3594,7 @@
       "mdUrl": "/docs/components/switch.md",
       "jsonUrl": "/r/components/switch.json",
       "path": "./components/switch.json",
-      "sha256": "970c4fe86cba74d924641d552a95a8cc5d80081d92ac6ddf305a5563f17f7f23"
+      "sha256": "2839e4ebe97c653be0c1102ed27c12d2f9163abf0316bcade408b6e9c0f6b7ed"
     },
     {
       "name": "TagsInput",
@@ -3607,7 +3607,7 @@
       "mdUrl": "/docs/components/tags-input.md",
       "jsonUrl": "/r/components/tags-input.json",
       "path": "./components/tags-input.json",
-      "sha256": "c96e40ba562f652643ab0aa40eba20b963dba146ddbffffb4faaebdf7e055b7a"
+      "sha256": "f174dcc58a3c3b7b3675998f5958ec0da824580055e327d0a0fffbc61d4c2830"
     },
     {
       "name": "Textarea",
@@ -3620,7 +3620,7 @@
       "mdUrl": "/docs/components/textarea.md",
       "jsonUrl": "/r/components/textarea.json",
       "path": "./components/textarea.json",
-      "sha256": "0f294764b66e8dd98f80749b5264df1ab489bb2ff26cf0628e0a1ac427cce095"
+      "sha256": "69874c062a176945b901989f1f970554432c37223b221fcf4406fed7984c57bd"
     },
     {
       "name": "Toggle",
@@ -3633,7 +3633,7 @@
       "mdUrl": "/docs/components/toggle.md",
       "jsonUrl": "/r/components/toggle.json",
       "path": "./components/toggle.json",
-      "sha256": "de4ca361de8ac64e13e766bd3727e6bfc14fc4d2a8f6224ef8a09aa0723fc581"
+      "sha256": "0cf81fca925d331377caef0188842f4915dc7e21817012e0db3f5bb841955ad4"
     },
     {
       "name": "ToggleGroup",
@@ -4101,7 +4101,7 @@
       "mdUrl": "/docs/components/card.md",
       "jsonUrl": "/r/components/card.json",
       "path": "./components/card.json",
-      "sha256": "78a2bf6e176b9a9f153027bd7015afbe9069d7b8e2661eb00d78a8607902a0a0"
+      "sha256": "2b714c0f4a1d7799deb51c3d497bf2f39dbe7fcc7597eaf9d1aca4d0cb078ba4"
     },
     {
       "name": "Carousel",
@@ -4361,7 +4361,7 @@
       "mdUrl": "/docs/components/musical-time-input.md",
       "jsonUrl": "/r/components/musical-time-input.json",
       "path": "./components/musical-time-input.json",
-      "sha256": "a9ba4b403030dbc4d9de6f4891ae89bcb68e4c3863c4ee66a190bccb751302e8"
+      "sha256": "9e9b582026b92fcbf069c481c9a3fbbc8f5dd7f70d6ac2f61614a3d290ea8b6e"
     },
     {
       "name": "PianoKeyboard",
@@ -4426,7 +4426,7 @@
       "mdUrl": "/docs/components/alert-dialog.md",
       "jsonUrl": "/r/components/alert-dialog.json",
       "path": "./components/alert-dialog.json",
-      "sha256": "2d9121a1df82b926ae43f6e208a1061796c5d659ae06c3b60ed33aa2abaa55ab"
+      "sha256": "bbe880bd665f5d0c6540d7d7b4b1f61bafd2dec83830115f5bce231e85a574b3"
     },
     {
       "name": "CommandPalette",
@@ -4439,7 +4439,7 @@
       "mdUrl": "/docs/components/command-palette.md",
       "jsonUrl": "/r/components/command-palette.json",
       "path": "./components/command-palette.json",
-      "sha256": "7cac7e348cdde1b06aabe087c9ec7a6836b2986ed06494c99435d741f334939f"
+      "sha256": "457ca29347604cb3565e6696051e47209b2b64776ed9b442ca456dce0cbc2277"
     },
     {
       "name": "ContextMenu",
@@ -4452,7 +4452,7 @@
       "mdUrl": "/docs/components/context-menu.md",
       "jsonUrl": "/r/components/context-menu.json",
       "path": "./components/context-menu.json",
-      "sha256": "f8a9eb04878e974a1746f210bdef281a392d38c87cd58084da1306dadc7b3b82"
+      "sha256": "ccc4b13aa426171d1644dc54356846b91287816f25e1432d03d4f7732eac27b3"
     },
     {
       "name": "Dialog",
@@ -4465,7 +4465,7 @@
       "mdUrl": "/docs/components/dialog.md",
       "jsonUrl": "/r/components/dialog.json",
       "path": "./components/dialog.json",
-      "sha256": "3415303af352b8b45e53d69638ec8bfefa788cdb623d11c36cd96bb1bb092ecf"
+      "sha256": "5585a2b3e4aa7b8a32c90179241ccccda3293f096e091e6436d5eafa6ebf67e6"
     },
     {
       "name": "Drawer",
@@ -4478,7 +4478,7 @@
       "mdUrl": "/docs/components/drawer.md",
       "jsonUrl": "/r/components/drawer.json",
       "path": "./components/drawer.json",
-      "sha256": "290d06b72e3c9d8463b0cb0540fa71f340840b1a386467aca654d273e41c4d0f"
+      "sha256": "894aa786117f1d94846cef24ce1206b9aa12fb24e88762037051a0e194db71e5"
     },
     {
       "name": "DropdownMenu",
@@ -4491,7 +4491,7 @@
       "mdUrl": "/docs/components/dropdown-menu.md",
       "jsonUrl": "/r/components/dropdown-menu.json",
       "path": "./components/dropdown-menu.json",
-      "sha256": "d0f629185f1145c5bef293fb4adfd8e0190772caa74a715be285dbf7b8ef5d8a"
+      "sha256": "9beeba18ad8c9e459795ef851b2b4e51f0a804793c6ceb2b41922c907e9136a4"
     },
     {
       "name": "HoverCard",
@@ -4504,7 +4504,7 @@
       "mdUrl": "/docs/components/hover-card.md",
       "jsonUrl": "/r/components/hover-card.json",
       "path": "./components/hover-card.json",
-      "sha256": "9334fa01c9240c341db2be8a9df6f39b2efa6f82c2dd765e354d1e0abcace05c"
+      "sha256": "143c3dbcab3db8d3ef3832aaca1f9b6df0b8ce64abeced5b587750c1fa4485aa"
     },
     {
       "name": "InfoTip",
@@ -4530,7 +4530,7 @@
       "mdUrl": "/docs/components/menubar.md",
       "jsonUrl": "/r/components/menubar.json",
       "path": "./components/menubar.json",
-      "sha256": "56c5725ad187e5c37f9c4d854f9930352f087250738284eb65f3677b68277009"
+      "sha256": "85ec43499c896678fe2f83fd1620514c6273ff8b742d2bc516c9dc2a58ca47e2"
     },
     {
       "name": "Popover",
@@ -4543,7 +4543,7 @@
       "mdUrl": "/docs/components/popover.md",
       "jsonUrl": "/r/components/popover.json",
       "path": "./components/popover.json",
-      "sha256": "4e741fdfdbe7ed102ca30d62d62d2b3b6faf3c81d33fcae1807ce0eb4f108b80"
+      "sha256": "a761579ab93f6dbb93e48fce79156b7961293e3d93473a56bd1a333338f4f3f5"
     },
     {
       "name": "Sheet",
@@ -4556,7 +4556,7 @@
       "mdUrl": "/docs/components/sheet.md",
       "jsonUrl": "/r/components/sheet.json",
       "path": "./components/sheet.json",
-      "sha256": "b6030fd6f0bfd64aa819891787a9add1d2bd569066410b2f1c8709106fa1fea0"
+      "sha256": "ad931081ae1ea42aeaeaa7fd98b4eb67f7de7923858df86b8bc345525ebb059c"
     },
     {
       "name": "Toast",
@@ -4569,7 +4569,7 @@
       "mdUrl": "/docs/components/toast.md",
       "jsonUrl": "/r/components/toast.json",
       "path": "./components/toast.json",
-      "sha256": "718574697936eec967786f521daafe404c461b2cdd2f660e4a70bee16bd709f4"
+      "sha256": "3a1969006bbe9ca88de344a511ef99355e107fdd774e71487ca19f73b62b0b03"
     },
     {
       "name": "Tooltip",
@@ -4582,7 +4582,7 @@
       "mdUrl": "/docs/components/tooltip.md",
       "jsonUrl": "/r/components/tooltip.json",
       "path": "./components/tooltip.json",
-      "sha256": "d7981bd4101c61f690ded801fd3c8422de6466eabb5f3470d05338ee60d90984"
+      "sha256": "8593afb1884f56e9c8d3705331089c4ad1254ce73305a415755a85903f0cb65c"
     },
     {
       "name": "Avatar",
@@ -4621,7 +4621,7 @@
       "mdUrl": "/docs/components/button.md",
       "jsonUrl": "/r/components/button.json",
       "path": "./components/button.json",
-      "sha256": "e1ad0282eb38d9077f322867f88a1431e61f02fd7c809ebe05458880b1e378a4"
+      "sha256": "a7f2336ca85339a9a8edc1038412b688a45d1d81ef1c6a2c0ec41fc49baf2f8d"
     },
     {
       "name": "Chip",

package/manifest/tokens.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 2,
   "library": "@cueplusplus/tokens",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "themes": [
     {
       "name": "command",
@@ -461,11 +461,14 @@
     "--cue-style-eyebrow-ink",
     "--cue-style-eyebrow-size",
     "--cue-style-eyebrow-weight",
+    "--cue-style-field-fill",
     "--cue-style-field-focus-offset",
     "--cue-style-field-gap",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",
     "--cue-style-field-radius",
+    "--cue-style-field-step",
+    "--cue-style-field-toward",
     "--cue-style-focus-edge",
     "--cue-style-focus-offset",
     "--cue-style-focus-width",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueplusplus/ui",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "CUE++ design system components: Tailwind v4 styled wrappers over Base UI, driven by @cueplusplus/tokens.",
   "license": "MIT",
   "type": "module",
@@ -146,7 +146,7 @@
     "culori": "^4.0.2",
     "tailwind-merge": "^3.6.0",
     "@cueplusplus/theme-base": "^1.3.0",
-    "@cueplusplus/tokens": "0.21.0"
+    "@cueplusplus/tokens": "0.22.0"
   },
   "peerDependencies": {
     "@assistant-ui/react": "^0.15.16",
@@ -262,9 +262,9 @@
     "tsdown": "0.22.14",
     "typescript": "^5.7.0",
     "vitest": "^4.1.10",
-    "@repo/eslint-config": "0.0.0",
     "@cueplusplus/theme-tools": "1.2.0",
     "@repo/docgen": "0.0.0",
+    "@repo/eslint-config": "0.0.0",
     "@repo/typescript-config": "0.0.0"
   },
   "scripts": {