@cueplusplus/ui 0.23.0 → 0.24.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @cueplusplus/ui
 
+## 0.24.0
+
+### Minor Changes
+
+- 082ef7c: **A focused field's ring is faint now, and you set how faint.** A text field shows its focus ring
+  on a mouse click as well as on Tab, so a full-strength `--cue-focus` ring (pure white on the
+  default theme) lit up every clicked field like a box. Every recessed field (inputs, textareas,
+  selects, comboboxes, the date, colour and number fields, grouped fields) now draws
+  `--cue-focus` mixed to **15%**, and its border still lifts to `border-strong` on focus.
+
+  - **`--cue-style-field-focus-mix`** sets the share, from `0%` (no ring, only the border lift) to
+    `100%` (the full ring). Name it in a style set, or on any element:
+    `style={{ "--cue-style-field-focus-mix": "40%" }}`.
+  - **Inside `data-field-edge="contrast"`** the ring is back at 100%, beside the 3:1 edge.
+  - **An invalid field** keeps its danger border, and its ring turns red at the same share.
+  - Buttons, tabs, links and every other control keep their full ring, which only shows to a
+    keyboard.
+
+### Patch Changes
+
+- Updated dependencies [082ef7c]
+  - @cueplusplus/tokens@0.24.0
+
 ## 0.23.0
 
 ### Minor Changes

package/dist/forms/_chassis.d.ts

@@ -35,6 +35,15 @@ import { FormControlSize } from "./_chassis-size.js";
  * as it does on Tab. Only the non-typing controls that ride this chassis — the
  * `Select` trigger, the date triggers — actually distinguish the two.
  *
+ * **And quiet means faint** (the owner's call, 2026-10-09). At full strength a
+ * white `--cue-focus` ring around every clicked field read as a glaring box, so
+ * the ring is `--cue-focus` mixed with transparent to
+ * `--cue-style-field-focus-mix`: 15% unless a style set, `:root` or any subtree
+ * names another share (`_focus-ring-field.ts`). The rim's lift to
+ * `border-strong` carries the rest of the signal. The 3:1 paragraphs below
+ * hold for the `--cue-focus` role itself, and so for the ring at 100%, which
+ * is what `data-field-edge="contrast"` restores for a reader who needs it.
+ *
  * `--cue-focus`, not `--cue-accent`. Every theme ships both roles, and keeping
  * them separable is what WCAG 1.4.11 needs: one role whose job is "read at 3:1
  * against the surface behind the ring", independent of the role whose job is
@@ -77,9 +86,10 @@ import { FormControlSize } from "./_chassis-size.js";
  * while focused. Pushing the ring off the rim would mean either floating it on
  * a gap (WCAG 2.4.13 then wants 3px, and the halo is back) or insetting it
  * further (which buries it deeper). So the ring takes the danger colour instead
- * — `data-[invalid]:focus-visible:outline-danger` — which is the ruling shadcn
- * and Radix both reached: the border stays danger, the ring communicates focus,
- * and red communicates invalid whichever of the two is painting.
+ * — `--cue-danger` at the same faint share as the focus ring — which is the
+ * ruling shadcn and Radix both reached: the border stays danger, the ring
+ * communicates focus, and red communicates invalid whichever of the two is
+ * painting. At the faint share the danger rim shows through the ring.
  *
  * The compound modifier outranks the plain one on specificity — an attribute
  * selector and a pseudo-class against one pseudo-class — so its position in
@@ -118,7 +128,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 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";
+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-[color:color-mix(in_oklab,var(--cue-focus)_var(--cue-style-field-focus-mix,15%),transparent)] 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-[color:color-mix(in_oklab,var(--cue-danger)_var(--cue-style-field-focus-mix,15%),transparent)]";
 /**
  * The full recessed-control recipe, one variant per rung of the control ladder.
  *
@@ -188,6 +198,6 @@ declare const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 f
  * 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 = "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";
+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-[color:color-mix(in_oklab,var(--cue-focus)_var(--cue-style-field-focus-mix,15%),transparent)] has-focus-visible:outline-offset-[var(--cue-style-field-focus-offset,-1px)] data-[invalid]:has-focus-visible:outline-[color:color-mix(in_oklab,var(--cue-danger)_var(--cue-style-field-focus-mix,15%),transparent)]";
 //#endregion
 export { ControlVariantProps, type FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants };

package/dist/forms/_chassis.js

@@ -42,6 +42,15 @@ import { INPUT_FACE } from "../system/_style-input-face.js";
 * as it does on Tab. Only the non-typing controls that ride this chassis — the
 * `Select` trigger, the date triggers — actually distinguish the two.
 *
+* **And quiet means faint** (the owner's call, 2026-10-09). At full strength a
+* white `--cue-focus` ring around every clicked field read as a glaring box, so
+* the ring is `--cue-focus` mixed with transparent to
+* `--cue-style-field-focus-mix`: 15% unless a style set, `:root` or any subtree
+* names another share (`_focus-ring-field.ts`). The rim's lift to
+* `border-strong` carries the rest of the signal. The 3:1 paragraphs below
+* hold for the `--cue-focus` role itself, and so for the ring at 100%, which
+* is what `data-field-edge="contrast"` restores for a reader who needs it.
+*
 * `--cue-focus`, not `--cue-accent`. Every theme ships both roles, and keeping
 * them separable is what WCAG 1.4.11 needs: one role whose job is "read at 3:1
 * against the surface behind the ring", independent of the role whose job is
@@ -84,9 +93,10 @@ import { INPUT_FACE } from "../system/_style-input-face.js";
 * while focused. Pushing the ring off the rim would mean either floating it on
 * a gap (WCAG 2.4.13 then wants 3px, and the halo is back) or insetting it
 * further (which buries it deeper). So the ring takes the danger colour instead
-* — `data-[invalid]:focus-visible:outline-danger` — which is the ruling shadcn
-* and Radix both reached: the border stays danger, the ring communicates focus,
-* and red communicates invalid whichever of the two is painting.
+* — `--cue-danger` at the same faint share as the focus ring — which is the
+* ruling shadcn and Radix both reached: the border stays danger, the ring
+* communicates focus, and red communicates invalid whichever of the two is
+* painting. At the faint share the danger rim shows through the ring.
 *
 * The compound modifier outranks the plain one on specificity — an attribute
 * selector and a pseudo-class against one pseudo-class — so its position in
@@ -125,7 +135,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-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`;
+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-[color:color-mix(in_oklab,var(--cue-danger)_var(--cue-style-field-focus-mix,15%),transparent)]`;
 /**
 * The full recessed-control recipe, one variant per rung of the control ladder.
 *
@@ -198,6 +208,6 @@ const bareControlClasses = `min-w-0 flex-1 border-0 bg-transparent p-0 ${INPUT_F
 * 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 = `has-focus: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-[color:color-mix(in_oklab,var(--cue-danger)_var(--cue-style-field-focus-mix,15%),transparent)]`;
 //#endregion
 export { bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants };

package/dist/primitives/chip.d.ts

@@ -2,7 +2,7 @@ import { ClassProp, VariantProps } from "../lib/cva.js";
 import * as React from "react";
 //#region src/primitives/chip.d.ts
 declare const chipVariants: (props?: ({
-  tone?: "danger" | "info" | "warn" | "busy" | "accent" | "ok" | "neutral" | null | undefined;
+  tone?: "danger" | "info" | "warn" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
   variant?: "outline" | "tinted" | "tag" | null | undefined;
   interactive?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;

package/dist/styles.css

@@ -200,5 +200,7 @@
   :where([data-field-edge="contrast"]) & {
     --cue-paint-stroke-from: var(--cue-field-edge, var(--cue-border));
     --cue-paint-stroke-to: var(--cue-field-edge, var(--cue-border));
+    /* The full focus ring too: a field's is faint by default (`_focus-ring-field.ts`). */
+    --cue-style-field-focus-mix: 100%;
   }
 }

package/dist/system/_focus-ring-field.js

@@ -11,19 +11,31 @@
 * would move with the buttons). `FOCUS_RING_INSET` keeps its fixed offset
 * for its ten other consumers.
 *
+* **Faint, and configurable.** A text field matches `:focus-visible` on a
+* mouse click as well as on Tab, so its ring is the one every click lights up.
+* Drawn at full strength (a white `--cue-focus` on the default theme) it read
+* as a glaring box, so a field paints `--cue-focus` mixed with transparent to
+* `--cue-style-field-focus-mix`: 15% unless a style set, `:root` or any
+* subtree names another share (0% hides it, 100% is the full ring). The
+* border's lift to `border-strong` on `:focus` carries the rest of the signal.
+* Inside `data-field-edge="contrast"` (`styles.css`) the share is 100%, so the
+* reader who opted into the 3:1 edge gets the full ring back. Every other
+* control's keyboard ring (`_focus-ring.ts`) is unchanged: it only ever shows
+* to a keyboard.
+*
 * Its own module, not a constant in `_focus-ring.ts`: docgen attributes a
 * token to a component by the file its class string lives in, and every
 * focusable component imports that module.
 *
 * @internal Not part of the public API.
 */
-const FOCUS_RING_FIELD = "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)]";
+const FOCUS_RING_FIELD = "focus-visible:outline-solid focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] focus-visible:outline-[color:color-mix(in_oklab,var(--cue-focus)_var(--cue-style-field-focus-mix,15%),transparent)] focus-visible:outline-offset-[var(--cue-style-field-focus-offset,-1px)]";
 /**
 * `FOCUS_RING_GROUP_INSET` with {@link FOCUS_RING_FIELD}'s offset: the
 * grouped field's ring reads `style-field-focus-offset` as the field it wraps
 * does (plan V.2, T25), so a grouped field and a plain one keep one focus
 * geometry under every Look.
 */
-const FOCUS_RING_GROUP_FIELD = "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)]";
+const FOCUS_RING_GROUP_FIELD = "has-focus-visible:outline-solid has-focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] has-focus-visible:outline-[color:color-mix(in_oklab,var(--cue-focus)_var(--cue-style-field-focus-mix,15%),transparent)] has-focus-visible:outline-offset-[var(--cue-style-field-focus-offset,-1px)]";
 //#endregion
 export { FOCUS_RING_FIELD, FOCUS_RING_GROUP_FIELD };

package/manifest/components/autocomplete.json

@@ -277,6 +277,7 @@
     "--cue-style-disabled-opacity",
     "--cue-style-display-variation",
     "--cue-style-field-fill",
+    "--cue-style-field-focus-mix",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/color-field.json

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

package/manifest/components/color-picker.json

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

package/manifest/components/combobox.json

@@ -280,6 +280,7 @@
     "--cue-style-disabled-opacity",
     "--cue-style-display-variation",
     "--cue-style-field-fill",
+    "--cue-style-field-focus-mix",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/composer.json

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

package/manifest/components/date-field.json

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

package/manifest/components/date-picker.json

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

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

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

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

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

package/manifest/components/input-group.json

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

package/manifest/components/input.json

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

package/manifest/components/multi-select.json

@@ -270,6 +270,7 @@
     "--cue-style-disabled-opacity",
     "--cue-style-display-variation",
     "--cue-style-field-fill",
+    "--cue-style-field-focus-mix",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

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

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

package/manifest/components/number-field.json

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

package/manifest/components/otp-field.json

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

package/manifest/components/password-input.json

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

package/manifest/components/scrub-input.json

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

package/manifest/components/search-input.json

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

package/manifest/components/select.json

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

package/manifest/components/tags-input.json

@@ -270,6 +270,7 @@
     "--cue-style-disabled-opacity",
     "--cue-style-display-variation",
     "--cue-style-field-fill",
+    "--cue-style-field-focus-mix",
     "--cue-style-field-focus-offset",
     "--cue-style-field-hover-edge",
     "--cue-style-field-pad",

package/manifest/components/textarea.json

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

package/manifest/components/time-field.json

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

package/manifest/manifest.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 2,
   "library": "@cueplusplus/ui",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "generatedAt": "1970-01-01T00:00:00.000Z",
   "themes": [
     "command",
@@ -38,7 +38,7 @@
   ],
   "tokens": {
     "path": "./tokens.json",
-    "sha256": "a1f258bdddd984a1fc1eae5e2508d512fc568c82b7e3628e7c604f073c98e9df"
+    "sha256": "fcc11015750652ab6e7332b9d8c39aa3f540f27c01b482ae21980314dc46f03b"
   },
   "systemApis": [
     {
@@ -513,7 +513,7 @@
       "mdUrl": "/docs/components/composer.md",
       "jsonUrl": "/r/components/composer.json",
       "path": "./components/composer.json",
-      "sha256": "1a3ba8b3a3fed698a6e1f5b2cb40f7a2d5f26005e112d13c359741ca5c1e6a48"
+      "sha256": "0a38f9056c6e8f86155523c0eef9d2b13fda464408d2d8c31f256d0da2ace286"
     },
     {
       "name": "DelegationCard",
@@ -942,7 +942,7 @@
       "mdUrl": "/docs/components/color-field.md",
       "jsonUrl": "/r/components/color-field.json",
       "path": "./components/color-field.json",
-      "sha256": "8f0197d4e6beda16194a055c1bc3762a133182c78d9fe676945163935ccdf649"
+      "sha256": "332c18b35ecd26dd61750c836d77720171f21b5b07d2cd482f86decee09ed904"
     },
     {
       "name": "ColorPicker",
@@ -955,7 +955,7 @@
       "mdUrl": "/docs/components/color-picker.md",
       "jsonUrl": "/r/components/color-picker.json",
       "path": "./components/color-picker.json",
-      "sha256": "689bc048df5076650787539798e2cc9e14242943e167f2bbfe162c7fad5e4ce0"
+      "sha256": "463bb50929967eb20af06eeb62be4be2159aafe7a9b56d65a8294e94acb78488"
     },
     {
       "name": "ColorSlider",
@@ -1085,7 +1085,7 @@
       "mdUrl": "/docs/components/date-field.md",
       "jsonUrl": "/r/components/date-field.json",
       "path": "./components/date-field.json",
-      "sha256": "7dbd02a73256b5fa17f8297d2fa812cce04a68f7534d281d56c6d9d956e1d846"
+      "sha256": "ef8a3561b6b52874549af7f0c8764d8cd5fed032bc6003015f815dc8cf5eb875"
     },
     {
       "name": "DatePicker",
@@ -1098,7 +1098,7 @@
       "mdUrl": "/docs/components/date-picker.md",
       "jsonUrl": "/r/components/date-picker.json",
       "path": "./components/date-picker.json",
-      "sha256": "3e1b03e3f9297c2e2e9464f3e104b4f0dd54f8f9ebbcde85a8f62f3bada647cb"
+      "sha256": "ca298c4fc5727fc056c6bd141c38180a62eef89f187bc66ac352a551fd939185"
     },
     {
       "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": "2f56557fd70d5b4ebca6a93831e038c7d67b64f58c140902549b0a3e242bc031"
+      "sha256": "f2f28b405e414f21c4ebfec5b63faad8312928d4cd4283c34ccc1cd2794da0b6"
     },
     {
       "name": "TimeField",
@@ -1124,7 +1124,7 @@
       "mdUrl": "/docs/components/time-field.md",
       "jsonUrl": "/r/components/time-field.json",
       "path": "./components/time-field.json",
-      "sha256": "be505c5b95bf73bf252534ed7f19adc9f36471c55c7497f84b5e87c0f0689ac0"
+      "sha256": "8c8d3a4401f5fd67527f31e3879af7c160e76f9e5b31ef97fa1d8477ed811ae1"
     },
     {
       "name": "ChannelMatrix",
@@ -3282,7 +3282,7 @@
       "mdUrl": "/docs/components/autocomplete.md",
       "jsonUrl": "/r/components/autocomplete.json",
       "path": "./components/autocomplete.json",
-      "sha256": "49bbdf5a1c223ca65b2458ac6b87d9a2d0c8054653eb668eb707dc4be0500278"
+      "sha256": "63b82d5524485aed7078bce24063780c5ec2e1c44ef9cb4b2a0a5108f603dcad"
     },
     {
       "name": "ButtonGroup",
@@ -3334,7 +3334,7 @@
       "mdUrl": "/docs/components/combobox.md",
       "jsonUrl": "/r/components/combobox.json",
       "path": "./components/combobox.json",
-      "sha256": "0f66194a077d0dd5db155596a88c76760a858ff95d485e43b75415f626ef53b6"
+      "sha256": "6dc53875746a523c995608a40ee60f2cbdf64ee4cfdbaa07fe6e2697541a2994"
     },
     {
       "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": "6840d523ae8695033a80b61fa3d1cd94e277061a880cf1b70dfee836f81b2cb8"
+      "sha256": "8edb3111172ec68ee6d00266283324388e7ee1593b4350da279731da5294bb3d"
     },
     {
       "name": "Field",
@@ -3425,7 +3425,7 @@
       "mdUrl": "/docs/components/input.md",
       "jsonUrl": "/r/components/input.json",
       "path": "./components/input.json",
-      "sha256": "b24851abe536d705b8affcbfb51c105603afa0b893f0f2a76f96f0376f38f02d"
+      "sha256": "f4cf68a0db39a9f27fc91b97bac4cc980f0bfc952356ec2d092d72c2fb3a1850"
     },
     {
       "name": "InputGroup",
@@ -3438,7 +3438,7 @@
       "mdUrl": "/docs/components/input-group.md",
       "jsonUrl": "/r/components/input-group.json",
       "path": "./components/input-group.json",
-      "sha256": "563eff7f480d07795d1e1cd72c8dfd657740398b984a7882685a2eed5ca62f54"
+      "sha256": "91692a5e17deb76468fb4b55f15073338aebf398b6fadf4824a3f9c19f54aa07"
     },
     {
       "name": "MultiSelect",
@@ -3451,7 +3451,7 @@
       "mdUrl": "/docs/components/multi-select.md",
       "jsonUrl": "/r/components/multi-select.json",
       "path": "./components/multi-select.json",
-      "sha256": "e7efabaa74b06f848cae209f842598ce949bf44a1ecc3be029f5649fc6584da3"
+      "sha256": "fa820d7bdc9e0fb6ece919483678b695210ccda4f7aae1465ab70bb1933e08f9"
     },
     {
       "name": "NumberField",
@@ -3464,7 +3464,7 @@
       "mdUrl": "/docs/components/number-field.md",
       "jsonUrl": "/r/components/number-field.json",
       "path": "./components/number-field.json",
-      "sha256": "5793c625ef9a4847d662bac1bb8fd43dff8f1f3d95132ee65282778cd0b682f7"
+      "sha256": "3843121dd89ba6e2c45856b21ed8b7f5dd8b50f604f27a69929fb696f0addd04"
     },
     {
       "name": "OTPField",
@@ -3477,7 +3477,7 @@
       "mdUrl": "/docs/components/otp-field.md",
       "jsonUrl": "/r/components/otp-field.json",
       "path": "./components/otp-field.json",
-      "sha256": "6d24f09139d73a6af651664ff7958f5f727c3908235102b4172ae85b4ddb8e7c"
+      "sha256": "bf75cbad335d0a98a6ac1067c0f1c6167dc4d53652fdfd97e7956ec78436d033"
     },
     {
       "name": "PasswordInput",
@@ -3490,7 +3490,7 @@
       "mdUrl": "/docs/components/password-input.md",
       "jsonUrl": "/r/components/password-input.json",
       "path": "./components/password-input.json",
-      "sha256": "addb0ef6ac0bbf8472c401b9f99da078e8195d3faef43b92ed8843baec6d4867"
+      "sha256": "bbac6a2d08045cb67a044affa7fee2967cad98811c2b87c27b299ba365c6fd99"
     },
     {
       "name": "Radio",
@@ -3542,7 +3542,7 @@
       "mdUrl": "/docs/components/scrub-input.md",
       "jsonUrl": "/r/components/scrub-input.json",
       "path": "./components/scrub-input.json",
-      "sha256": "07a25f241dc890c1fbd34641cf5bb90921317b6298d5f578aabb0f64eac6f83a"
+      "sha256": "affa46b6a0c56eddcc82429b74afd12d53a9daf0d3354bf9e9f9c849ed9e3ce9"
     },
     {
       "name": "SearchInput",
@@ -3555,7 +3555,7 @@
       "mdUrl": "/docs/components/search-input.md",
       "jsonUrl": "/r/components/search-input.json",
       "path": "./components/search-input.json",
-      "sha256": "c3f572e9b0e3e960a1975998a8e6681a59c71d58f9bb98922902ac26085fea06"
+      "sha256": "163dbb2109f0ac8899cdc48502a872b8bc61d44ec20da8e9389f2de24087ab68"
     },
     {
       "name": "Select",
@@ -3568,7 +3568,7 @@
       "mdUrl": "/docs/components/select.md",
       "jsonUrl": "/r/components/select.json",
       "path": "./components/select.json",
-      "sha256": "d5e09c0c7fc5285b2d2d1ef92a93f6f6042ffc49f5495e730a70fc4d6448782a"
+      "sha256": "70586217a040a98ffe8368a4353bbca655d3247317aa6750940b4ead6438115a"
     },
     {
       "name": "Slider",
@@ -3607,7 +3607,7 @@
       "mdUrl": "/docs/components/tags-input.md",
       "jsonUrl": "/r/components/tags-input.json",
       "path": "./components/tags-input.json",
-      "sha256": "f174dcc58a3c3b7b3675998f5958ec0da824580055e327d0a0fffbc61d4c2830"
+      "sha256": "76e4486f2413f6547777dc660f641a531cf77e2ea16f01de58632f54d2d02cf7"
     },
     {
       "name": "Textarea",
@@ -3620,7 +3620,7 @@
       "mdUrl": "/docs/components/textarea.md",
       "jsonUrl": "/r/components/textarea.json",
       "path": "./components/textarea.json",
-      "sha256": "69874c062a176945b901989f1f970554432c37223b221fcf4406fed7984c57bd"
+      "sha256": "0612d1b26adf377909e7cfe66bbf85c3af117737d8c4908907174556afbe9b1c"
     },
     {
       "name": "Toggle",
@@ -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": "9e9b582026b92fcbf069c481c9a3fbbc8f5dd7f70d6ac2f61614a3d290ea8b6e"
+      "sha256": "2fb56643ffb77614b8b2e08257ea9f1f8b6f29cf4288509f34ac15d1a79c3941"
     },
     {
       "name": "PianoKeyboard",

package/manifest/tokens.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 2,
   "library": "@cueplusplus/tokens",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "themes": [
     {
       "name": "command",
@@ -463,6 +463,7 @@
     "--cue-style-eyebrow-size",
     "--cue-style-eyebrow-weight",
     "--cue-style-field-fill",
+    "--cue-style-field-focus-mix",
     "--cue-style-field-focus-offset",
     "--cue-style-field-gap",
     "--cue-style-field-hover-edge",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueplusplus/ui",
-  "version": "0.23.0",
+  "version": "0.24.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.4.0",
-    "@cueplusplus/tokens": "0.23.0"
+    "@cueplusplus/tokens": "0.24.0"
   },
   "peerDependencies": {
     "@assistant-ui/react": "^0.15.16",