@charcuterie/ui 2.1.0 → 2.3.0

package/dist/Overlay/useAnchoredOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnchoredOverlay.js","sourceRoot":"","sources":["../../src/Overlay/useAnchoredOverlay.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useAnchoredOverlay.js","sourceRoot":"","sources":["../../src/Overlay/useAnchoredOverlay.ts"],"names":[],"mappings":"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"}

package/dist/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAEV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAYd,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;CACjC,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,iBAAiB,CAAA;AAEzD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAC3C,GAAG;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;;;;;;OAOG;IACH,OAAO,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,MAAM,GAAI,+FAUpB,WAAW,KAAG,SA8EhB,CAAA"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAEV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AASd,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;CACjC,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,iBAAiB,CAAA;AAEzD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAC3C,GAAG;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;;;;;;OAOG;IACH,OAAO,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,MAAM,GAAI,+FAUpB,WAAW,KAAG,SAkFhB,CAAA"}

package/dist/Select/Select.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CONTROL_SIZE_CLASS, MIN_TOUCH_TARGET_CLASS, } from "../controlStyles.js";
+import { CONTROL_SIZE_CLASS } from "../controlStyles.js";
 import { DISABLED_CLASS, FOCUS_RING_CLASS, } from "../intentStyles.js";
 import { toClassName } from "../toClassName.js";
 const getIsGroup = (item) => "options" in item;
@@ -44,7 +44,13 @@ export const Select = ({ className, isDisabled = false, label, onChange, options
             // cell. A `<select>`'s own arrow is what `appearance-none`
             // removes, and forgetting to put one back leaves a control
             // that looks exactly like a text input.
-            "pe-9", CONTROL_SIZE_CLASS[size], MIN_TOUCH_TARGET_CLASS, "hover:border-border-strong", FOCUS_RING_CLASS, DISABLED_CLASS, className), defaultValue: value ??
+            "pe-9", 
+            // Height comes from the shared control-size/density system ONLY —
+            // no per-component touch-target floor. Touch is the density axis's
+            // job (`[data-density]` scales `--control-height-*` past 44px on a
+            // kiosk), so forcing 44px here made Select taller than Button et al.
+            // at desktop density. See the controls-share-one-height decision.
+            CONTROL_SIZE_CLASS[size], "hover:border-border-strong", FOCUS_RING_CLASS, DISABLED_CLASS, className), defaultValue: value ??
                 (placeholder === undefined ? undefined : ""), disabled: isDisabled, onChange: (changeEvent) => {
                 onChange?.(changeEvent.currentTarget.value);
             }, children: [placeholder === undefined ? null : (_jsx("option", { disabled: true, value: "", children: placeholder })), options.map((item) => getIsGroup(item) ? (_jsx("optgroup", { label: item.label, children: item.options.map((option) => (_jsx("option", { disabled: option.isDisabled, value: option.value, children: option.label }, option.value))) }, item.label)) : (_jsx("option", { disabled: item.isDisabled, value: item.value, children: item.label }, item.value)))] }), _jsx("svg", { "aria-hidden": "true", className: "pointer-events-none absolute end-3 size-4 text-content-secondary", fill: "none", focusable: false, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.75, viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m6 9 6 6 6-6" }) })] }));

package/dist/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":";AAOA,OAAO,EACL,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,cAAc,EACd,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAgE/C,MAAM,UAAU,GAAG,CACjB,IAAgB,EACW,EAAE,CAAC,SAAS,IAAI,IAAI,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,WAAW,EACF,EAAa,EAAE,CAAC,CAC5B,eAAK,SAAS,EAAC,0CAA0C,aACvD,qBACM,WAAW,gBACH,KAAK,EACjB,SAAS,EAAE,WAAW,CACpB,iLAAiL;YACjL,0DAA0D;YAC1D,2DAA2D;YAC3D,2DAA2D;YAC3D,wCAAwC;YACxC,MAAM,EACN,kBAAkB,CAAC,IAAI,CAAC,EACxB,sBAAsB,EACtB,4BAA4B,EAC5B,gBAAgB,EAChB,cAAc,EACd,SAAS,CACV,EACD,YAAY,EACV,KAAK;gBACL,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAE9C,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,CACR,WAA2C,EAC3C,EAAE;gBACF,QAAQ,EAAE,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;YAC7C,CAAC,aAEA,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClC,iBAAQ,QAAQ,QAAC,KAAK,EAAC,EAAE,YACtB,WAAW,GACL,CACV,EAEA,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACpB,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACjB,mBAA2B,KAAK,EAAE,IAAI,CAAC,KAAK,YACzC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,iBACE,QAAQ,EAAE,MAAM,CAAC,UAAU,EAE3B,KAAK,EAAE,MAAM,CAAC,KAAK,YAElB,MAAM,CAAC,KAAK,IAHR,MAAM,CAAC,KAAK,CAIV,CACV,CAAC,IATW,IAAI,CAAC,KAAK,CAUd,CACZ,CAAC,CAAC,CAAC,CACF,iBACE,QAAQ,EAAE,IAAI,CAAC,UAAU,EAEzB,KAAK,EAAE,IAAI,CAAC,KAAK,YAEhB,IAAI,CAAC,KAAK,IAHN,IAAI,CAAC,KAAK,CAIR,CACV,CACF,IACM,EAET,6BAGc,MAAM,EAClB,SAAS,EAAC,kEAAkE,EAC5E,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,EAChB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,YAElC,eAAM,CAAC,EAAC,cAAc,GAAG,GACrB,IACF,CACP,CAAA"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EACL,cAAc,EACd,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAgE/C,MAAM,UAAU,GAAG,CACjB,IAAgB,EACW,EAAE,CAAC,SAAS,IAAI,IAAI,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,WAAW,EACF,EAAa,EAAE,CAAC,CAC5B,eAAK,SAAS,EAAC,0CAA0C,aACvD,qBACM,WAAW,gBACH,KAAK,EACjB,SAAS,EAAE,WAAW,CACpB,iLAAiL;YACjL,0DAA0D;YAC1D,2DAA2D;YAC3D,2DAA2D;YAC3D,wCAAwC;YACxC,MAAM;YACN,kEAAkE;YAClE,mEAAmE;YACnE,mEAAmE;YACnE,qEAAqE;YACrE,kEAAkE;YAClE,kBAAkB,CAAC,IAAI,CAAC,EACxB,4BAA4B,EAC5B,gBAAgB,EAChB,cAAc,EACd,SAAS,CACV,EACD,YAAY,EACV,KAAK;gBACL,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAE9C,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,CACR,WAA2C,EAC3C,EAAE;gBACF,QAAQ,EAAE,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;YAC7C,CAAC,aAEA,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClC,iBAAQ,QAAQ,QAAC,KAAK,EAAC,EAAE,YACtB,WAAW,GACL,CACV,EAEA,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACpB,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACjB,mBAA2B,KAAK,EAAE,IAAI,CAAC,KAAK,YACzC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,iBACE,QAAQ,EAAE,MAAM,CAAC,UAAU,EAE3B,KAAK,EAAE,MAAM,CAAC,KAAK,YAElB,MAAM,CAAC,KAAK,IAHR,MAAM,CAAC,KAAK,CAIV,CACV,CAAC,IATW,IAAI,CAAC,KAAK,CAUd,CACZ,CAAC,CAAC,CAAC,CACF,iBACE,QAAQ,EAAE,IAAI,CAAC,UAAU,EAEzB,KAAK,EAAE,IAAI,CAAC,KAAK,YAEhB,IAAI,CAAC,KAAK,IAHN,IAAI,CAAC,KAAK,CAIR,CACV,CACF,IACM,EAET,6BAGc,MAAM,EAClB,SAAS,EAAC,kEAAkE,EAC5E,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,EAChB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,YAElC,eAAM,CAAC,EAAC,cAAc,GAAG,GACrB,IACF,CACP,CAAA"}

package/dist/controlStyles.d.ts

@@ -28,6 +28,14 @@ export declare const ICON_CONTROL_SIZE_CLASS: Record<ControlSize, string>;
  * density — a finger does not get smaller because the list is
  * dense — so this is opt-in per control rather than baked into the
  * size classes, which would make `compact` a lie.
+ *
+ * **Do NOT add this to a control that shares a form row** (`Button`,
+ * `Select`, a `Listbox`/`Combobox` trigger, `SegmentedControl`, …). It
+ * overrides the shared `CONTROL_SIZE_CLASS` height and makes that one
+ * control taller than its neighbours at desktop density — touch sizing is
+ * the density axis's job. Reserve this for a genuinely standalone tap
+ * target. See
+ * `docs/decisions/2026-08-05-controls-share-one-height-no-per-component-touch-floor.md`.
  */
 export declare const MIN_TOUCH_TARGET_CLASS = "min-h-(--control-min-touch-target) min-w-(--control-min-touch-target)";
 /**

package/dist/controlStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controlStyles.d.ts","sourceRoot":"","sources":["../src/controlStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAEtD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CACrC,WAAW,EACX,MAAM,CAKP,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAC1C,WAAW,EACX,MAAM,CAKP,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,0EACsC,CAAA;AAEzE;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;CAGnB,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,gBAAgB,CAAA;AAErD,eAAO,MAAM,cAAc;;;;CAIjB,CAAA;AAEV,eAAO,MAAM,kBAAkB,EAAE,MAAM,CACrC,WAAW,EACX,MAAM,CAKP,CAAA"}
+{"version":3,"file":"controlStyles.d.ts","sourceRoot":"","sources":["../src/controlStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAEtD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CACrC,WAAW,EACX,MAAM,CAKP,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAC1C,WAAW,EACX,MAAM,CAKP,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB,0EACsC,CAAA;AAEzE;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;CAGnB,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,gBAAgB,CAAA;AAErD,eAAO,MAAM,cAAc;;;;CAIjB,CAAA;AAEV,eAAO,MAAM,kBAAkB,EAAE,MAAM,CACrC,WAAW,EACX,MAAM,CAKP,CAAA"}

package/dist/controlStyles.js

@@ -35,6 +35,14 @@ export const ICON_CONTROL_SIZE_CLASS = {
  * density — a finger does not get smaller because the list is
  * dense — so this is opt-in per control rather than baked into the
  * size classes, which would make `compact` a lie.
+ *
+ * **Do NOT add this to a control that shares a form row** (`Button`,
+ * `Select`, a `Listbox`/`Combobox` trigger, `SegmentedControl`, …). It
+ * overrides the shared `CONTROL_SIZE_CLASS` height and makes that one
+ * control taller than its neighbours at desktop density — touch sizing is
+ * the density axis's job. Reserve this for a genuinely standalone tap
+ * target. See
+ * `docs/decisions/2026-08-05-controls-share-one-height-no-per-component-touch-floor.md`.
  */
 export const MIN_TOUCH_TARGET_CLASS = "min-h-(--control-min-touch-target) min-w-(--control-min-touch-target)";
 /**

package/dist/controlStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"controlStyles.js","sourceRoot":"","sources":["../src/controlStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,MAAM,CAAC,MAAM,kBAAkB,GAG3B;IACF,EAAE,EAAE,yFAAyF;IAC7F,EAAE,EAAE,yFAAyF;IAC7F,EAAE,EAAE,yFAAyF;CAC9F,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAGhC;IACF,EAAE,EAAE,yCAAyC;IAC7C,EAAE,EAAE,yCAAyC;IAC7C,EAAE,EAAE,yCAAyC;CAC9C,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,sBAAsB,GACjC,uEAAuE,CAAA;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,EAAE,EAAE,2BAA2B;IAC/B,EAAE,EAAE,6BAA6B;CACzB,CAAA;AAIV,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,UAAU;CACN,CAAA;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAG3B;IACF,EAAE,EAAE,mBAAmB;IACvB,EAAE,EAAE,iBAAiB;IACrB,EAAE,EAAE,iBAAiB;CACtB,CAAA"}
+{"version":3,"file":"controlStyles.js","sourceRoot":"","sources":["../src/controlStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,MAAM,CAAC,MAAM,kBAAkB,GAG3B;IACF,EAAE,EAAE,yFAAyF;IAC7F,EAAE,EAAE,yFAAyF;IAC7F,EAAE,EAAE,yFAAyF;CAC9F,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAGhC;IACF,EAAE,EAAE,yCAAyC;IAC7C,EAAE,EAAE,yCAAyC;IAC7C,EAAE,EAAE,yCAAyC;CAC9C,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,sBAAsB,GACjC,uEAAuE,CAAA;AAEzE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,EAAE,EAAE,2BAA2B;IAC/B,EAAE,EAAE,6BAA6B;CACzB,CAAA;AAIV,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,UAAU;CACN,CAAA;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAG3B;IACF,EAAE,EAAE,mBAAmB;IACvB,EAAE,EAAE,iBAAiB;IACrB,EAAE,EAAE,iBAAiB;CACtB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",

package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.mdx

@@ -18,6 +18,12 @@ follows the OS, remembers the user's choice, and re-themes with zero React re-re
 
 <Controls />
 
+## Tone is neutral chrome
+
+Like `ColorSchemeToggle`, this forwards `intent="neutral"` to the button by default — a
+scheme switcher is chrome, not an accent action, so its ghost hover is the neutral surface
+rather than accent-violet. Pass `intent` (any tone `Button` accepts) to change it.
+
 ## Every seam is overridable — that is the point
 
 `resolver`, `persistence`, and `apply` all default to the browser implementations but can be

package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.test.tsx

@@ -51,3 +51,15 @@ test("cycling to a concrete mode re-applies the scheme", async () => {
 
   await expectNoAxeViolations(canvasElement)
 })
+
+test("the connected switcher forwards the neutral intent by default", async () => {
+  const { canvasElement } = await mountStory(Default)
+
+  const button = canvasElement.querySelector("button")
+
+  // Chrome, not an accent action — the hover is the neutral surface.
+  expect(button?.className).toContain(
+    "hover:bg-intent-neutral-surface",
+  )
+  expect(button?.className).not.toContain("intent-accent")
+})

package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.tsx

@@ -22,6 +22,7 @@ export type ColorSchemeSwitcherProps = Pick<
   ColorSchemeToggleProps,
   | "appearance"
   | "className"
+  | "intent"
   | "isDisabled"
   | "label"
   | "order"

package/src/ColorSchemeToggle/ColorSchemeToggle.mdx

@@ -39,6 +39,18 @@ rather than a nameless button.
 
 <Canvas of={ColorSchemeToggleStories.AllModes} />
 
+## Intent is `neutral`, not accent
+
+`intent` is the same tone union `Button`/`IconButton` accept, and it **defaults to
+`neutral`** here on purpose. A scheme switcher is toolbar chrome, so its ghost hover reads
+as `hover:bg-intent-neutral-surface` and its icon as `text-intent-neutral-content` —
+chrome, not a violet accent action. `IconButton`'s own default is `accent`, which on real
+app chrome made this control look like a call-to-action; forwarding `neutral` is the fix,
+and it means a consumer no longer needs an `!important` className to tone it down. Pass
+`intent="accent"` (or any tone) to opt back in.
+
+<Canvas of={ColorSchemeToggleStories.Intents} />
+
 ## Cycling is the only form, for now
 
 A segmented, all-three-visible `ColorSchemePicker` was considered and deferred (owner chose

package/src/ColorSchemeToggle/ColorSchemeToggle.stories.tsx

@@ -2,7 +2,10 @@ import type { ColorSchemeMode } from "@charcuterie/logic"
 import type { Meta, StoryObj } from "@storybook/react"
 import { useState } from "react"
 
-import { controlSizeArgType } from "../argTypes.storyHelpers.ts"
+import {
+  controlSizeArgType,
+  intentArgType,
+} from "../argTypes.storyHelpers.ts"
 import {
   ContainerBoard,
   StoryCell,
@@ -34,6 +37,7 @@ const meta = {
   component: ColorSchemeToggle,
   parameters: { layout: "padded" },
   argTypes: {
+    intent: intentArgType,
     // `mode` is `ColorSchemeMode` from @charcuterie/logic — a bare
     // specifier docgen cannot enumerate, so it gets an explicit
     // radio rather than falling through to the object control.
@@ -46,6 +50,7 @@ const meta = {
   args: {
     appearance: "ghost",
     icons: ICONS,
+    intent: "neutral",
     isDisabled: false,
     mode: "system",
     onCycle: () => {},
@@ -117,6 +122,39 @@ export const AllModes: Story = {
   ),
 }
 
+/**
+ * The tone is **neutral by default** — a scheme switcher is toolbar
+ * chrome, so its ghost hover is `hover:bg-intent-neutral-surface` and
+ * its icon `text-intent-neutral-content`, which read as chrome on a
+ * normal surface rather than as an accent action. A consumer that
+ * wants it to draw attention passes `intent="accent"` (or any tone).
+ */
+export const Intents: Story = {
+  render: (toggleProps) => (
+    <StorySection title="neutral (default) vs an explicit accent override.">
+      <StoryGrid columns={2}>
+        <StoryCell label="intent=neutral (default)">
+          <ColorSchemeToggle
+            {...toggleProps}
+            intent="neutral"
+            mode="system"
+            onCycle={() => {}}
+          />
+        </StoryCell>
+
+        <StoryCell label="intent=accent">
+          <ColorSchemeToggle
+            {...toggleProps}
+            intent="accent"
+            mode="system"
+            onCycle={() => {}}
+          />
+        </StoryCell>
+      </StoryGrid>
+    </StorySection>
+  ),
+}
+
 export const Sizes: Story = {
   render: (toggleProps) => (
     <StorySection title="Square on the control height, so it lines up with the buttons beside it in a toolbar.">

package/src/ColorSchemeToggle/ColorSchemeToggle.test.tsx

@@ -1,11 +1,14 @@
-import { composeStories } from "@storybook/react"
-import { userEvent } from "storybook/test"
+import {
+  composeStories,
+  composeStory,
+} from "@storybook/react"
+import { expect, userEvent } from "storybook/test"
 import { test } from "vitest"
 
 import { expectNoAxeViolations } from "../expectNoAxeViolations.testHelpers.ts"
 import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
-import * as stories from "./ColorSchemeToggle.stories.tsx"
+import meta, * as stories from "./ColorSchemeToggle.stories.tsx"
 
 const { AllModes, Default } = composeStories(stories)
 
@@ -78,3 +81,36 @@ test("each mode renders its own control", async () => {
     role: "button",
   })
 })
+
+/**
+ * The fix: the switcher is chrome, so it forwards `neutral` to the
+ * button by default — a neutral ghost hover
+ * (`hover:bg-intent-neutral-surface`) and a neutral icon colour,
+ * rather than `IconButton`'s accent default that read as a violet
+ * action on real app chrome.
+ */
+test("defaults to the neutral intent, not accent", async () => {
+  const { canvasElement } = await mountStory(Default)
+
+  const button = canvasElement.querySelector("button")
+
+  expect(button?.className).toContain(
+    "hover:bg-intent-neutral-surface",
+  )
+  expect(button?.className).not.toContain("intent-accent")
+})
+
+test("an explicit intent overrides the default", async () => {
+  const AccentToggle = composeStory(
+    { args: { intent: "accent" } },
+    meta,
+  )
+
+  const { canvasElement } = await mountStory(AccentToggle)
+
+  const button = canvasElement.querySelector("button")
+
+  expect(button?.className).toContain(
+    "hover:bg-intent-accent-surface",
+  )
+})

package/src/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -3,7 +3,10 @@ import {
   DEFAULT_COLOR_SCHEME_ORDER,
   nextColorSchemeMode,
 } from "@charcuterie/logic"
-import type { ControlSize } from "@charcuterie/tokens"
+import type {
+  ControlSize,
+  IntentName,
+} from "@charcuterie/tokens"
 import type { ReactNode } from "react"
 
 import { IconButton } from "../IconButton/IconButton.tsx"
@@ -25,6 +28,15 @@ export type ColorSchemeToggleProps = {
   appearance?: IntentAppearance
   className?: string
   icons: ColorSchemeIcons
+  /**
+   * The intent (tone) forwarded to the underlying `IconButton` — the
+   * same union `Button`/`IconButton` accept. **Defaults to `neutral`**,
+   * not `accent`: a scheme switcher is toolbar chrome, so its ghost
+   * hover reads as `hover:bg-intent-neutral-surface` and its icon as
+   * `text-intent-neutral-content` rather than accent-violet. Pass
+   * `intent="accent"` (or any tone) to make it an accent action.
+   */
+  intent?: IntentName
   isDisabled?: boolean
   /**
    * Builds the accessible name from the current and next mode.
@@ -81,6 +93,7 @@ export const ColorSchemeToggle = ({
   appearance = "ghost",
   className,
   icons,
+  intent = "neutral",
   isDisabled = false,
   label = defaultLabel,
   mode,
@@ -94,6 +107,7 @@ export const ColorSchemeToggle = ({
     <IconButton
       appearance={appearance}
       className={className}
+      intent={intent}
       isDisabled={isDisabled}
       label={label(mode, nextMode)}
       onClick={() => {

package/src/Combobox/Combobox.mdx

@@ -58,6 +58,36 @@ removable chips rather than filling the input, and keeps the popup open.
 
 <Canvas of={ComboboxStories.AllStates} />
 
+## Attached input & drill-down
+
+Supply `inputRef` and Combobox stops rendering its own input: it anchors a **list-only**
+popup to the consumer's `<input>`, mirrors the combobox ARIA (`role`, `aria-controls`,
+`aria-activedescendant`) onto it, and drives arrows/Enter/Tab/Escape off it while focus
+stays put. Use it when the field is **both the value and the query** — a path field whose
+text you type *and* filter by, the shape `PathPicker` needs.
+
+The consumer owns the input's `value`/`onChange` (wire them to the controlled `query`,
+which is then required) **and** `isVisible`. Because of that, **a select does not
+auto-dismiss** in this mode: `onSelect` fires and the consumer decides what happens next —
+append the folder and leave `isVisible` on to drill deeper (the popup re-queries from the
+new path and stays open), or call its own `close()` to finish. Enter and Tab both accept
+the active option; Escape closes outright. Single-select only (`isMultiple` is classic-mode
+only, and it stays the only mode that keeps the popup open on a normal select).
+
+```tsx
+<input ref={inputRef} value={path} onChange={(e) => setPath(e.target.value)} />
+<Combobox
+  inputRef={inputRef}
+  isVisible={isVisible}
+  query={path}
+  options={folders}                 // pre-filtered by the trailing segment
+  onSelect={(name) => setPath(`${parentPath}${name}/`)}  // drills; stays open
+  onDismiss={() => setIsVisible(false)}
+/>
+```
+
+<Canvas of={ComboboxStories.AttachedInputDrillDown} />
+
 ## Virtualization, and why `aria-setsize` is not optional
 
 Above ~100 options (or with `isVirtualized`), the list is windowed with

package/src/Combobox/Combobox.stories.tsx

@@ -1,7 +1,7 @@
 import { useVisibility } from "@charcuterie/logic"
 import type { Meta, StoryObj } from "@storybook/react"
 import type { ReactNode } from "react"
-import { useState } from "react"
+import { useRef, useState } from "react"
 
 import { Button } from "../Button/Button.tsx"
 import type { ListboxItem } from "../Listbox/Listbox.tsx"
@@ -153,10 +153,11 @@ export const AllStates: Story = {
 }
 
 /**
- * Multi-select renders the chosen values as removable chips rather
- * than filling the input, with a sticky footer hint — the
- * `LanguageCodeField` and `LinkPicker` shapes. `isCreatable` lets Enter
- * commit the raw query.
+ * Multi-select renders the chosen values as an always-visible row of
+ * removable chips **above the trigger** — they stay on screen after the
+ * popup closes, and each carries its option's human label (not its raw
+ * value) and an ✕ to remove it. The `LanguageCodeField` and `LinkPicker`
+ * shapes. `isCreatable` lets Enter commit the raw query.
  */
 export const AllVariants: Story = {
   args: {
@@ -227,6 +228,150 @@ export const Interactive: Story = {
  * first option to the first enabled one — and Enter must never commit the
  * disabled value.
  */
+// A tiny in-memory directory tree for the attached-input demo: keys are
+// parent paths (with trailing slash), values their child folders.
+const TREE: Record<string, string[]> = {
+  "/": ["apps", "config", "media"],
+  "/apps/": ["mux-magic", "charcuterie"],
+  "/config/": ["hosts", "secrets"],
+  "/media/": ["movies", "music"],
+}
+
+const AttachedInputHarness = (): ReactNode => {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const [value, setValue] = useState("/")
+
+  const [isVisible, setIsVisible] = useState(true)
+
+  const lastSlash = value.lastIndexOf("/")
+
+  const parentPath = value.slice(0, lastSlash + 1) || "/"
+
+  const tail = value.slice(lastSlash + 1)
+
+  const options: ListboxItem[] = (TREE[parentPath] ?? [])
+    .filter((name) => name.startsWith(tail))
+    .map((name) => ({
+      label: `📁 ${name}`,
+      textValue: name,
+      value: name,
+    }))
+
+  return (
+    <>
+      <input
+        aria-label="Path"
+        className="w-80 rounded-md border border-border-default bg-surface-raised px-2 py-1.5 font-mono text-content-primary text-sm outline-none"
+        onChange={(changeEvent) => {
+          setValue(changeEvent.target.value)
+
+          setIsVisible(true)
+        }}
+        ref={inputRef}
+        value={value}
+      />
+
+      <Combobox
+        emptyLabel="No matching entries."
+        inputRef={inputRef}
+        isVisible={isVisible}
+        onDismiss={() => {
+          setIsVisible(false)
+        }}
+        onSelect={(name) => {
+          // Drill in: append the picked folder + separator. The changed
+          // query refetches the new directory; the popup stays open
+          // because we never flip `isVisible`.
+          setValue(`${parentPath}${name}/`)
+        }}
+        options={options}
+        query={value}
+      />
+    </>
+  )
+}
+
+/**
+ * Attached-input mode: the consumer renders its own `<input>` (both the
+ * committed value and the query) and Combobox anchors a list-only popup
+ * to it. Type a path; picking a folder appends it and re-queries that
+ * folder's children **without closing** — a shell-style drill-down. This
+ * is `PathPicker`'s shape.
+ */
+export const AttachedInputDrillDown: Story = {
+  args: {
+    inputRef: { current: null },
+    isVisible: true,
+    onDismiss: () => {},
+    onSelect: () => {},
+    options: [],
+    query: "/",
+  },
+  render: () => <AttachedInputHarness />,
+}
+
+// Long, space-separated names — the real-world case (a media library of
+// long folder names) the short demo tree does not show.
+const LONG_OPTIONS: ListboxItem[] = [
+  "Armored Trooper Votoms - Brilliantly Shining Heresy [anidb-7910]",
+  "Armored Trooper Votoms - Case;Irvine [anidb-7911]",
+  "Armored Trooper Votoms - Chirico's Return [anidb-1234]",
+  "Armored Trooper Votoms - Deadworld Sunsa [anidb-5678]",
+  "Armored Trooper Votoms - Pailsen Files - The Movie [anidb-9012]",
+].map((name) => ({
+  label: `📁 ${name}`,
+  textValue: name,
+  value: name,
+}))
+
+const LongOptionsHarness = (): ReactNode => {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const [isVisible, setIsVisible] = useState(true)
+
+  return (
+    <>
+      <input
+        aria-label="Path"
+        className="w-80 rounded-md border border-border-default bg-surface-raised px-2 py-1.5 font-mono text-content-primary text-sm outline-none"
+        readOnly
+        ref={inputRef}
+        value="/media/Media-Storage/Anime/"
+      />
+
+      <Combobox
+        emptyLabel="No matching entries."
+        inputRef={inputRef}
+        isVisible={isVisible}
+        onDismiss={() => {
+          setIsVisible(false)
+        }}
+        onSelect={() => {}}
+        options={LONG_OPTIONS}
+        query="/media/Media-Storage/Anime/"
+      />
+    </>
+  )
+}
+
+/**
+ * How the attached-input popup handles **long option labels** — a media
+ * library of long folder names, the case the short drill-down demo hides.
+ * Shows how the panel sizes and how each option row treats overflow.
+ */
+export const AttachedInputLongOptions: Story = {
+  args: {
+    inputRef: { current: null },
+    isVisible: true,
+    onDismiss: () => {},
+    onSelect: () => {},
+    options: LONG_OPTIONS,
+    query: "/media/Media-Storage/Anime/",
+  },
+  render: () => <LongOptionsHarness />,
+}
+
 export const DisabledFirstOption: Story = {
   args: {
     isVisible: false,