@charcuterie/ui 2.17.0 → 3.0.0

package/dist/Checkbox/Checkbox.d.ts

@@ -34,6 +34,25 @@ export type CheckboxProps = {
     label: ReactNode;
     onChange?: (isChecked: boolean) => void;
     size?: ControlSize;
+    /**
+     * The `<input>`'s `value` attribute — which member of a group this
+     * box IS, as opposed to whether it is ticked.
+     *
+     * A lone boolean does not need this. A GROUP does: the browser
+     * submits `name=value` for each ticked box in a form, and, more
+     * relevantly here, a group is normally read back with one query —
+     * `[...root.querySelectorAll("input")].filter(i => i.checked)
+     * .map(i => i.value)`. Without a `value` every box in the group
+     * reports the string `"on"` and the read is useless, which is why
+     * queuepilot's library and ratings pickers were still hand-rolling
+     * a raw `<input type="checkbox">` rather than adopting this
+     * component.
+     *
+     * Passed straight through and otherwise inert. It is NOT the
+     * checked state and does not become one: `isChecked` still seeds
+     * the box, and `onChange` still reports a boolean.
+     */
+    value?: string;
 };
 /**
  * A single boolean, on or off, that owns nothing but itself.
@@ -64,5 +83,5 @@ export type CheckboxProps = {
  * `<input>`'s job. `isChecked` seeds the first paint and nothing
  * after.
  */
-export declare const Checkbox: ({ className, id, isChecked, isDisabled, isReadOnly, label, onChange, size, }: CheckboxProps) => ReactNode;
+export declare const Checkbox: ({ className, id, isChecked, isDisabled, isReadOnly, label, onChange, size, value, }: CheckboxProps) => ReactNode;
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAe,SAAS,EAAE,MAAM,OAAO,CAAA;AAKnD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAoBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,GAAI,8EAStB,aAAa,KAAG,SA0GlB,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAe,SAAS,EAAE,MAAM,OAAO,CAAA;AAKnD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB;;;;;;;;;;;;;;;;;OAiBG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAoBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,GAAI,qFAUtB,aAAa,KAAG,SA2GlB,CAAA"}

package/dist/Checkbox/Checkbox.js

@@ -45,7 +45,7 @@ const TEXT_SIZE_CLASS = {
  * `<input>`'s job. `isChecked` seeds the first paint and nothing
  * after.
  */
-export const Checkbox = ({ className, id, isChecked = false, isDisabled = false, isReadOnly = false, label, onChange, size = "md", }) => (_jsxs("label", { className: toClassName("inline-flex items-center gap-2 text-content-secondary select-none", TEXT_SIZE_CLASS[size], 
+export const Checkbox = ({ className, id, isChecked = false, isDisabled = false, isReadOnly = false, label, onChange, size = "md", value, }) => (_jsxs("label", { className: toClassName("inline-flex items-center gap-2 text-content-secondary select-none", TEXT_SIZE_CLASS[size], 
     // One cursor, chosen by state — two cursor utilities of the same
     // specificity do not resolve by class-list order.
     isDisabled
@@ -99,7 +99,7 @@ export const Checkbox = ({ className, id, isChecked = false, isDisabled = false,
                         if (isReadOnly && keyEvent.key === " ") {
                             keyEvent.preventDefault();
                         }
-                    }, type: "checkbox" }), _jsx("svg", { "aria-hidden": "true", className: toClassName("pointer-events-none invisible absolute peer-checked:visible", 
+                    }, type: "checkbox", value: value }), _jsx("svg", { "aria-hidden": "true", className: toClassName("pointer-events-none invisible absolute peer-checked:visible", 
                     // Matches whichever fill the box wears, so the tick keeps its
                     // guaranteed on-solid contrast in either intent.
                     isReadOnly

package/dist/Checkbox/Checkbox.js.map

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

package/dist/Select/Select.d.ts

@@ -24,7 +24,23 @@ export type SelectItem = SelectOption | SelectOptionGroup;
  * Same arrangement as `Button`, for the same reason.
  */
 export type SelectProps = Omit<ComponentPropsWithRef<"select">, "disabled" | "onChange" | "size" | "value"> & {
+    /**
+     * Goes on the **wrapper**, which is the box a caller means when
+     * they size a control. See the component docblock — the chevron
+     * is positioned against that wrapper, so a width anywhere else
+     * leaves it behind.
+     */
     className?: string;
+    /**
+     * The escape hatch for the inner `<select>` itself, for the
+     * things that genuinely are not the outer box: `font-mono` on the
+     * option text, a `text-*` override, a `bg-*`.
+     *
+     * Sizing does **not** belong here. The inner element is `w-full`
+     * and a width on it desynchronises it from the wrapper the
+     * chevron is pinned to, which is the whole of #112.
+     */
+    controlClassName?: string;
     isDisabled?: boolean;
     /**
      * The accessible name, when this is **not** inside a `Field`. A
@@ -59,6 +75,25 @@ export type SelectProps = Omit<ComponentPropsWithRef<"select">, "disabled" | "on
  * A styled native `<select>`, and the fleet's fourteen hand-rolled
  * ones collapse onto it.
  *
+ * ### Sizing: `className` is the wrapper, `controlClassName` is the select
+ *
+ * This renders a wrapper around the native `<select>` because the
+ * chevron has to live somewhere, and the chevron is positioned
+ * against that wrapper. `className` therefore lands on the wrapper
+ * and the `<select>` stays `w-full` inside it, so
+ * `className="w-44"` means "this control is 176px" — chevron
+ * included — which is what a caller writing a width already assumes.
+ *
+ * Before this, `className` went to the inner element only. The
+ * wrapper stayed `w-full`, the chevron stayed at *its* edge, and
+ * mux-magic's rules builder measured the gap at **869.6px** with the
+ * control's own text clipping beside it. The width never worked;
+ * `ui@2.16.0`'s `tailwind-merge` only made half of it work and made
+ * the other half visible.
+ *
+ * For the genuinely-inner things — `font-mono` on the option text, a
+ * `bg-*` — there is `controlClassName`.
+ *
  * ### There is no state kind here, and that is the finding
  *
  * Every other interactive component in this package owns its state
@@ -91,5 +126,5 @@ export type SelectProps = Omit<ComponentPropsWithRef<"select">, "disabled" | "on
  * from nothing: type-ahead, Home/End, PageUp/PageDown, the mobile
  * wheel picker, form submission, `:invalid`, and autofill.
  */
-export declare const Select: ({ className, isDisabled, label, onChange, options, placeholder, size, value, ...selectProps }: SelectProps) => ReactNode;
+export declare const Select: ({ className, controlClassName, isDisabled, label, onChange, options, placeholder, size, value, ...selectProps }: SelectProps) => ReactNode;
 //# sourceMappingURL=Select.d.ts.map

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;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"}
+{"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;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;;OAQG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,MAAM,GAAI,iHAWpB,WAAW,KAAG,SAsGhB,CAAA"}

package/dist/Select/Select.js

@@ -7,6 +7,25 @@ const getIsGroup = (item) => "options" in item;
  * A styled native `<select>`, and the fleet's fourteen hand-rolled
  * ones collapse onto it.
  *
+ * ### Sizing: `className` is the wrapper, `controlClassName` is the select
+ *
+ * This renders a wrapper around the native `<select>` because the
+ * chevron has to live somewhere, and the chevron is positioned
+ * against that wrapper. `className` therefore lands on the wrapper
+ * and the `<select>` stays `w-full` inside it, so
+ * `className="w-44"` means "this control is 176px" — chevron
+ * included — which is what a caller writing a width already assumes.
+ *
+ * Before this, `className` went to the inner element only. The
+ * wrapper stayed `w-full`, the chevron stayed at *its* edge, and
+ * mux-magic's rules builder measured the gap at **869.6px** with the
+ * control's own text clipping beside it. The width never worked;
+ * `ui@2.16.0`'s `tailwind-merge` only made half of it work and made
+ * the other half visible.
+ *
+ * For the genuinely-inner things — `font-mono` on the option text, a
+ * `bg-*` — there is `controlClassName`.
+ *
  * ### There is no state kind here, and that is the finding
  *
  * Every other interactive component in this package owns its state
@@ -39,7 +58,20 @@ const getIsGroup = (item) => "options" in item;
  * from nothing: type-ahead, Home/End, PageUp/PageDown, the mobile
  * wheel picker, form submission, `:invalid`, and autofill.
  */
-export const Select = ({ className, isDisabled = false, label, onChange, options, placeholder, size = "md", value, ...selectProps }) => (_jsxs("div", { className: "relative inline-grid w-full items-center", children: [_jsxs("select", { ...selectProps, "aria-label": label, className: toClassName("w-full cursor-pointer appearance-none rounded-md border border-border-default bg-surface-raised text-content-primary transition-colors duration-(--duration-fast) ease-standard", 
+export const Select = ({ className, controlClassName, isDisabled = false, label, onChange, options, placeholder, size = "md", value, ...selectProps }) => (_jsxs("div", { className: toClassName("relative inline-grid w-full items-center", 
+    // `className` lands HERE, not on the `<select>`, and that is
+    // the fix for #112 rather than a stylistic choice. The chevron
+    // below is `absolute end-3` against this element, so a width
+    // that reaches only the inner control moves the control and
+    // leaves the chevron pinned to the old edge — measured at
+    // 869.6px adrift in mux-magic's rules builder, with the
+    // control's own text clipping at the same time.
+    //
+    // It also matches every other component in this package:
+    // `className` is the outermost box. `ms-auto` — which mux-magic
+    // passes and which did nothing on a `w-full` inner select — is
+    // the tell that callers already believed this.
+    className), children: [_jsxs("select", { ...selectProps, "aria-label": label, className: toClassName("w-full cursor-pointer appearance-none rounded-md border border-border-default bg-surface-raised text-content-primary transition-colors duration-(--duration-fast) ease-standard", 
             // Room for the chevron below, which sits in the same grid
             // cell. A `<select>`'s own arrow is what `appearance-none`
             // removes, and forgetting to put one back leaves a control
@@ -50,7 +82,11 @@ export const Select = ({ className, isDisabled = false, label, onChange, options
             // 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 ??
+            CONTROL_SIZE_CLASS[size], "hover:border-border-strong", FOCUS_RING_CLASS, DISABLED_CLASS, 
+            // Inner-only, and deliberately not `className`. `w-full`
+            // above keeps this element the same width as the wrapper the
+            // chevron is measured from, so the two can never drift.
+            controlClassName), 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,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"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"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"}

package/package.json

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

package/src/Checkbox/Checkbox.mdx

@@ -62,6 +62,30 @@ is a control every consumer has to hold it for.
   here and change elsewhere, not an actionable accent. It announces `aria-readonly`, and
   the toggle is blocked on both pointer and `Space`.
 
+## A group of boxes needs `value`
+
+`value` is the `<input>`'s `value` attribute: **which member of a group** this box is, as
+opposed to whether it is ticked. A lone boolean should omit it.
+
+A group needs it, because a group is read back with one query over its container rather
+than by keeping a callback's worth of state per box:
+
+```ts
+const chosen = [...group.querySelectorAll<HTMLInputElement>("input[type=checkbox]")]
+  .filter((input) => input.checked)
+  .map((input) => input.value)
+```
+
+Without a `value` every box in the group answers the UA default `"on"`, so that read
+returns N copies of one meaningless string. This is why queuepilot's library and ratings
+pickers were still hand-rolling a raw `<input type="checkbox">` instead of using this
+component — the component was correct and simply could not express the case.
+
+It is passed straight through and is otherwise inert: it is **not** the checked state and
+does not become one. `isChecked` still seeds the box, `onChange` still reports a boolean.
+
+<Canvas of={CheckboxStories.WithValues} />
+
 ## Checkbox or `Switch`
 
 Same state kind, different meaning. A checkbox is a value you **submit** — "delete

package/src/Checkbox/Checkbox.stories.tsx

@@ -120,3 +120,45 @@ export const AllStates: Story = {
 export const Interactive: Story = {
   args: { label: "Delete originals after import" },
 }
+
+/**
+ * `value` names which member of a group a box IS — not whether it is
+ * ticked. It matters as soon as there is more than one box: a group is
+ * read back with a single query over its container, and without a
+ * `value` every box in it answers `"on"`.
+ *
+ * ```ts
+ * const chosen = [...group.querySelectorAll("input")]
+ *   .filter((input) => input.checked)
+ *   .map((input) => input.value)
+ * ```
+ *
+ * A lone boolean needs none of this and should omit the prop.
+ */
+export const WithValues: Story = {
+  args: { label: "Anime" },
+  render: (controlProps) => (
+    <StorySection title="A library picker: each box carries the id the caller will read back, and the checked ones are the answer.">
+      <StoryGrid columns={2}>
+        {[
+          { id: "11", isChosen: true, title: "Anime" },
+          { id: "1", isChosen: false, title: "Movies" },
+          { id: "15", isChosen: true, title: "Shorts" },
+          { id: "2", isChosen: false, title: "Shows" },
+        ].map((library) => (
+          <StoryCell
+            key={library.id}
+            label={`value="${library.id}"`}
+          >
+            <Checkbox
+              {...controlProps}
+              isChecked={library.isChosen}
+              label={library.title}
+              value={library.id}
+            />
+          </StoryCell>
+        ))}
+      </StoryGrid>
+    </StorySection>
+  ),
+}

package/src/Checkbox/Checkbox.test.tsx

@@ -7,7 +7,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Checkbox.stories.tsx"
 
-const { AllStates, Default, Interactive } =
+const { AllStates, Default, Interactive, WithValues } =
   composeStories(stories)
 
 test("it is a checkbox a screen reader can name", async () => {
@@ -107,3 +107,54 @@ test("a read-only box is announced and cannot be toggled", async () => {
 
   await expectNoAxeViolations(canvasElement)
 })
+
+test("value names the member, and a group reads back the ticked ones", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(WithValues)
+
+  // The prop is the `<input>`'s `value` and nothing else — it must not
+  // touch the checked state, which `isChecked` still owns alone.
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Anime",
+      role: "checkbox",
+    }),
+  ).toHaveAttribute("value", "11")
+
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Movies",
+      role: "checkbox",
+    }),
+  ).not.toBeChecked()
+
+  // The read this prop exists for. Without a `value` every box here
+  // answers the UA default `"on"` and the result is four copies of one
+  // meaningless string, which is why a group could not use this
+  // component at all before.
+  const chosen = [
+    ...canvasElement.querySelectorAll<HTMLInputElement>(
+      "input[type=checkbox]",
+    ),
+  ]
+    .filter((input) => input.checked)
+    .map((input) => input.value)
+
+  await expect(chosen).toEqual(["11", "15"])
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("a box with no value stays out of the way", async () => {
+  const { canvas } = await mountStory(Default)
+
+  // `value` is optional and a lone boolean should omit it. React drops
+  // an `undefined` attribute entirely rather than writing an empty
+  // string, so the DOM looks exactly as it did before the prop existed.
+  await expect(
+    expectAgentDrivable(canvas, {
+      name: "Delete originals after import",
+      role: "checkbox",
+    }),
+  ).not.toHaveAttribute("value")
+})

package/src/Checkbox/Checkbox.tsx

@@ -38,6 +38,25 @@ export type CheckboxProps = {
   label: ReactNode
   onChange?: (isChecked: boolean) => void
   size?: ControlSize
+  /**
+   * The `<input>`'s `value` attribute — which member of a group this
+   * box IS, as opposed to whether it is ticked.
+   *
+   * A lone boolean does not need this. A GROUP does: the browser
+   * submits `name=value` for each ticked box in a form, and, more
+   * relevantly here, a group is normally read back with one query —
+   * `[...root.querySelectorAll("input")].filter(i => i.checked)
+   * .map(i => i.value)`. Without a `value` every box in the group
+   * reports the string `"on"` and the read is useless, which is why
+   * queuepilot's library and ratings pickers were still hand-rolling
+   * a raw `<input type="checkbox">` rather than adopting this
+   * component.
+   *
+   * Passed straight through and otherwise inert. It is NOT the
+   * checked state and does not become one: `isChecked` still seeds
+   * the box, and `onChange` still reports a boolean.
+   */
+  value?: string
 }
 
 const BOX_SIZE_CLASS: Record<ControlSize, string> = {
@@ -96,6 +115,7 @@ export const Checkbox = ({
   label,
   onChange,
   size = "md",
+  value,
 }: CheckboxProps): ReactNode => (
   <label
     className={toClassName(
@@ -176,6 +196,7 @@ export const Checkbox = ({
           }
         }}
         type="checkbox"
+        value={value}
       />
 
       <svg

package/src/Select/Select.mdx

@@ -17,6 +17,50 @@ see below.
 
 <Controls />
 
+## Sizing: `className` is the wrapper, `controlClassName` is the select
+
+The chevron has to live somewhere, so this renders a wrapper around the native
+`<select>` and positions the chevron against **that wrapper**. `className` therefore
+lands on the wrapper and the `<select>` stays `w-full` inside it:
+
+```tsx
+<Select className="w-44" controlClassName="font-mono" label="Operation" options={OPS} />
+```
+
+means "this control is 176px" — chevron included — which is what a caller writing a
+width already assumes.
+
+It did not used to. `className` reached only the inner element while the wrapper stayed
+`w-full`, so the control shrank and the chevron stayed pinned to the row's right edge:
+
+| | left | right | width |
+| --- | --- | --- | --- |
+| wrapper | 55 | 1128.7 | 1073.6 |
+| select | 55 | 231 | 176 |
+| chevron | 1100.7 | 1116.7 | — |
+
+**869.6px** between the control and its own chevron, measured in mux-magic's DSL rules
+builder, with the control's own text clipping at the same time (`setScriptInfo` →
+`setScriptInfc`). The width never worked; `ui@2.16.0`'s `tailwind-merge` made half of it
+work, which is what made the other half visible
+([#112](https://github.com/Sawtaytoes/charcuterie/issues/112)).
+
+`Select.test.tsx` asserts this as a **measurement** rather than a class-name check —
+every class-name assertion passed while the chevron was 869.6px away, because `w-44`
+really was present, on the element nobody was looking at.
+
+<Canvas of={SelectStories.Sized} />
+
+### What goes where
+
+| | Goes to | For |
+| --- | --- | --- |
+| `className` | the wrapper | width, margin (`ms-auto`), display, position — the outer box |
+| `controlClassName` | the `<select>` | `font-mono` on the option text, a `text-*`, a `bg-*` |
+
+A width in `controlClassName` is the bug again by hand: it desynchronises the inner
+element from the wrapper the chevron is measured against.
+
 ## There is no state kind here, and that is the finding
 
 Every other interactive component in this package owns its state through

package/src/Select/Select.stories.tsx

@@ -132,3 +132,58 @@ export const AllStates: Story = {
     </StoryGrid>
   ),
 }
+
+/**
+ * `className` sizes the **control**, chevron included, because it
+ * lands on the wrapper the chevron is positioned against.
+ *
+ * The first cell is the shape that broke: before this, `w-44`
+ * reached only the inner `<select>` while the wrapper stayed
+ * `w-full`, so the chevron sat at the *row's* right edge — 869.6px
+ * away in mux-magic's rules builder. `controlClassName` is the
+ * inner element, for the things that are not the outer box, and
+ * `font-mono` is the one every caller reaches for.
+ *
+ * The width is still the caller's to get right: `w-44` is narrower
+ * than the longest option here, and a `<select>` clips rather than
+ * wraps. That is why mux-magic measured its widths rather than
+ * guessing them.
+ */
+export const Sized: Story = {
+  args: { label: "Rip profile", options: PROFILES },
+  render: () => (
+    <StoryGrid columns={1}>
+      <StoryCell label="w-44, in a wide row">
+        <Select
+          className="w-44"
+          label="Profile sized"
+          options={PROFILES}
+        />
+      </StoryCell>
+
+      <StoryCell label="w-64, monospaced option text">
+        <Select
+          className="w-64"
+          controlClassName="font-mono"
+          label="Profile monospaced"
+          options={PROFILES}
+        />
+      </StoryCell>
+
+      <StoryCell label="ms-auto, pushed to the end">
+        <Select
+          className="ms-auto w-56"
+          label="Profile pushed"
+          options={PROFILES}
+        />
+      </StoryCell>
+
+      <StoryCell label="default: fills its parent">
+        <Select
+          label="Profile full width"
+          options={PROFILES}
+        />
+      </StoryCell>
+    </StoryGrid>
+  ),
+}

package/src/Select/Select.test.tsx

@@ -7,7 +7,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Select.stories.tsx"
 
-const { AllStates, AllVariants, Default } =
+const { AllStates, AllVariants, Default, Sized } =
   composeStories(stories)
 
 test("a select is named, and therefore findable", async () => {
@@ -127,3 +127,91 @@ test("inside a Field, the label does the naming", async () => {
 
   await expect(select).toHaveAttribute("aria-describedby")
 })
+
+/**
+ * The #112 regression test, and it has to be a *measurement*. Every
+ * class-name assertion this could have been passed while the control
+ * was 869.6px away from its own chevron: `w-44` was present, on the
+ * element nobody was looking at.
+ */
+test("a width on className sizes the control, chevron included", async () => {
+  const { canvas } = await mountStory(Sized)
+
+  const select = expectAgentDrivable(canvas, {
+    name: "Profile sized",
+    role: "combobox",
+  }) as HTMLSelectElement
+
+  const wrapper = select.parentElement as HTMLElement
+  const chevron = wrapper.querySelector("svg") as SVGElement
+
+  const selectBox = select.getBoundingClientRect()
+  const wrapperBox = wrapper.getBoundingClientRect()
+  const chevronBox = chevron.getBoundingClientRect()
+
+  // 11rem. The caller asked for one box, not two of different sizes.
+  await expect(wrapperBox.width).toBe(176)
+
+  await expect(selectBox.width).toBe(wrapperBox.width)
+
+  // The chevron is `end-3` against the wrapper, so this is the whole
+  // bug in one number: it used to read 869.6.
+  await expect(
+    selectBox.right - chevronBox.right,
+  ).toBeCloseTo(12, 1)
+
+  // …and it is inside the control on the other side too, rather than
+  // merely near it.
+  await expect(chevronBox.left).toBeGreaterThan(
+    selectBox.left,
+  )
+})
+
+/**
+ * The other half of the split: an inner-element class still reaches
+ * the inner element, and does not become the wrapper's problem.
+ */
+test("controlClassName reaches the select, not the wrapper", async () => {
+  const { canvas } = await mountStory(Sized)
+
+  const select = expectAgentDrivable(canvas, {
+    name: "Profile monospaced",
+    role: "combobox",
+  }) as HTMLSelectElement
+
+  const wrapper = select.parentElement as HTMLElement
+
+  await expect(select.className).toContain("font-mono")
+
+  await expect(wrapper.className).not.toContain("font-mono")
+
+  // …and the wrapper is still the one carrying the width.
+  await expect(wrapper.getBoundingClientRect().width).toBe(
+    256,
+  )
+})
+
+/**
+ * The default is unchanged, which is the other half of the fix being
+ * safe: every existing caller passes no width and expects the
+ * control to fill its parent.
+ */
+test("with no className, the control still fills its parent", async () => {
+  const { canvas } = await mountStory(Sized)
+
+  const select = expectAgentDrivable(canvas, {
+    name: "Profile full width",
+    role: "combobox",
+  }) as HTMLSelectElement
+
+  const wrapper = select.parentElement as HTMLElement
+  const parent = wrapper.parentElement as HTMLElement
+
+  await expect(
+    wrapper.getBoundingClientRect().width,
+  ).toBeCloseTo(parent.getBoundingClientRect().width, 1)
+
+  await expect(
+    select.getBoundingClientRect().width,
+  ).toBeCloseTo(wrapper.getBoundingClientRect().width, 1)
+})

package/src/Select/Select.tsx

@@ -42,7 +42,23 @@ export type SelectProps = Omit<
   ComponentPropsWithRef<"select">,
   "disabled" | "onChange" | "size" | "value"
 > & {
+  /**
+   * Goes on the **wrapper**, which is the box a caller means when
+   * they size a control. See the component docblock — the chevron
+   * is positioned against that wrapper, so a width anywhere else
+   * leaves it behind.
+   */
   className?: string
+  /**
+   * The escape hatch for the inner `<select>` itself, for the
+   * things that genuinely are not the outer box: `font-mono` on the
+   * option text, a `text-*` override, a `bg-*`.
+   *
+   * Sizing does **not** belong here. The inner element is `w-full`
+   * and a width on it desynchronises it from the wrapper the
+   * chevron is pinned to, which is the whole of #112.
+   */
+  controlClassName?: string
   isDisabled?: boolean
   /**
    * The accessible name, when this is **not** inside a `Field`. A
@@ -82,6 +98,25 @@ const getIsGroup = (
  * A styled native `<select>`, and the fleet's fourteen hand-rolled
  * ones collapse onto it.
  *
+ * ### Sizing: `className` is the wrapper, `controlClassName` is the select
+ *
+ * This renders a wrapper around the native `<select>` because the
+ * chevron has to live somewhere, and the chevron is positioned
+ * against that wrapper. `className` therefore lands on the wrapper
+ * and the `<select>` stays `w-full` inside it, so
+ * `className="w-44"` means "this control is 176px" — chevron
+ * included — which is what a caller writing a width already assumes.
+ *
+ * Before this, `className` went to the inner element only. The
+ * wrapper stayed `w-full`, the chevron stayed at *its* edge, and
+ * mux-magic's rules builder measured the gap at **869.6px** with the
+ * control's own text clipping beside it. The width never worked;
+ * `ui@2.16.0`'s `tailwind-merge` only made half of it work and made
+ * the other half visible.
+ *
+ * For the genuinely-inner things — `font-mono` on the option text, a
+ * `bg-*` — there is `controlClassName`.
+ *
  * ### There is no state kind here, and that is the finding
  *
  * Every other interactive component in this package owns its state
@@ -116,6 +151,7 @@ const getIsGroup = (
  */
 export const Select = ({
   className,
+  controlClassName,
   isDisabled = false,
   label,
   onChange,
@@ -125,7 +161,24 @@ export const Select = ({
   value,
   ...selectProps
 }: SelectProps): ReactNode => (
-  <div className="relative inline-grid w-full items-center">
+  <div
+    className={toClassName(
+      "relative inline-grid w-full items-center",
+      // `className` lands HERE, not on the `<select>`, and that is
+      // the fix for #112 rather than a stylistic choice. The chevron
+      // below is `absolute end-3` against this element, so a width
+      // that reaches only the inner control moves the control and
+      // leaves the chevron pinned to the old edge — measured at
+      // 869.6px adrift in mux-magic's rules builder, with the
+      // control's own text clipping at the same time.
+      //
+      // It also matches every other component in this package:
+      // `className` is the outermost box. `ms-auto` — which mux-magic
+      // passes and which did nothing on a `w-full` inner select — is
+      // the tell that callers already believed this.
+      className,
+    )}
+  >
     <select
       {...selectProps}
       aria-label={label}
@@ -145,7 +198,10 @@ export const Select = ({
         "hover:border-border-strong",
         FOCUS_RING_CLASS,
         DISABLED_CLASS,
-        className,
+        // Inner-only, and deliberately not `className`. `w-full`
+        // above keeps this element the same width as the wrapper the
+        // chevron is measured from, so the two can never drift.
+        controlClassName,
       )}
       defaultValue={
         value ??