@charcuterie/ui 2.5.0 → 2.6.0

package/dist/Checkbox/Checkbox.d.ts

@@ -16,6 +16,15 @@ export type CheckboxProps = {
      */
     isChecked?: boolean;
     isDisabled?: boolean;
+    /**
+     * Shows the value at full contrast but refuses to change it — a
+     * setting you may read here and edit elsewhere. Distinct from
+     * `isDisabled`, which dims: a read-only box is not turned down,
+     * because the whole point is that you can still read it. Announced
+     * as `aria-readonly`, and the toggle is blocked on both pointer and
+     * `Space`.
+     */
+    isReadOnly?: boolean;
     /**
      * The visible text beside the box, and the checkbox's accessible
      * name — the `<label>` wraps the control, so there is no `for` to
@@ -55,5 +64,5 @@ export type CheckboxProps = {
  * `<input>`'s job. `isChecked` seeds the first paint and nothing
  * after.
  */
-export declare const Checkbox: ({ className, id, isChecked, isDisabled, label, onChange, size, }: CheckboxProps) => ReactNode;
+export declare const Checkbox: ({ className, id, isChecked, isDisabled, isReadOnly, label, onChange, size, }: 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;;;;;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,kEAQtB,aAAa,KAAG,SAyDlB,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;CACnB,CAAA;AAoBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,QAAQ,GAAI,8EAStB,aAAa,KAAG,SA0GlB,CAAA"}

package/dist/Checkbox/Checkbox.js

@@ -45,17 +45,64 @@ const TEXT_SIZE_CLASS = {
  * `<input>`'s job. `isChecked` seeds the first paint and nothing
  * after.
  */
-export const Checkbox = ({ className, id, isChecked = false, isDisabled = false, label, onChange, size = "md", }) => (_jsxs("label", { className: toClassName("inline-flex cursor-pointer items-center gap-2 text-content-secondary select-none", TEXT_SIZE_CLASS[size], isDisabled &&
-        "cursor-not-allowed text-content-disabled", className), children: [_jsxs("span", { className: "relative grid shrink-0 place-items-center", children: [_jsx("input", { className: toClassName("peer cursor-pointer appearance-none rounded-sm border border-border-strong bg-surface-sunken transition-colors duration-(--duration-fast) ease-standard", "checked:border-intent-accent-solid checked:bg-intent-accent-solid", 
-                    // Disabled mutes the border and the cursor, and — unlike the
-                    // shared `DISABLED_CLASS` — does *not* touch the background.
-                    // The generic bundle repaints the box `surface-sunken`, which
-                    // erased both the checked accent fill (white tick on grey)
-                    // and, in a light scheme, the unchecked box entirely: a
-                    // `border-subtle` outline on `surface-sunken` on
-                    // `surface-base` is three near-identical creams. A disabled
-                    // box is still a box the user has to see.
-                    "disabled:cursor-not-allowed disabled:border-border-default", BOX_SIZE_CLASS[size], FOCUS_RING_CLASS), defaultChecked: isChecked, disabled: isDisabled, id: id, onChange: (event) => {
+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], 
+    // One cursor, chosen by state — two cursor utilities of the same
+    // specificity do not resolve by class-list order.
+    isDisabled
+        ? "cursor-not-allowed"
+        : isReadOnly
+            ? "cursor-default"
+            : "cursor-pointer", 
+    // Disabled dims the whole control with opacity rather than fading
+    // the box to a quieter token. The token scale has no step between
+    // `border-default` and `border-strong`, so a muted outline was
+    // either invisible or indistinguishable from enabled; `opacity-60`
+    // keeps the full shape and colour and just turns them down, which
+    // is the "present but inactive" the box actually is. Read-only is
+    // *not* dimmed — its whole point is that the value stays readable.
+    // The same treatment is on `Switch` and `RadioGroup`.
+    isDisabled && "opacity-60", className), children: [_jsxs("span", { className: "relative grid shrink-0 place-items-center", children: [_jsx("input", { "aria-readonly": isReadOnly || undefined, className: toClassName(
+                    // `border-2` is the family's shared weight — the `Switch`
+                    // track's `ring-2` and the `RadioGroup` ring match it, so the
+                    // three read as one set — and a 2px edge is also what keeps a
+                    // disabled box visible where a 1px one washed out.
+                    "peer appearance-none rounded-sm border-2 bg-surface-sunken transition-colors duration-(--duration-fast) ease-standard", 
+                    // Read-only wears the **neutral** intent, not the accent: full
+                    // contrast (so the value reads) but plainly not an actionable
+                    // accent control, with a softer `border-default` resting edge.
+                    // Three distinct states result — enabled (accent, crisp),
+                    // disabled (accent, dimmed by the wrapper), read-only (neutral).
+                    // No `disabled:` colour override; the wrapper's `opacity-60`
+                    // does the dimming, and doubling it on the box is what made a
+                    // disabled checkbox vanish.
+                    isReadOnly
+                        ? "border-border-default checked:border-intent-neutral-solid checked:bg-intent-neutral-solid"
+                        : "border-border-strong checked:border-intent-accent-solid checked:bg-intent-accent-solid", isDisabled
+                        ? "cursor-not-allowed"
+                        : isReadOnly
+                            ? "cursor-default"
+                            : "cursor-pointer", BOX_SIZE_CLASS[size], FOCUS_RING_CLASS), defaultChecked: isChecked, disabled: isDisabled, id: id, onChange: (event) => {
+                        if (isReadOnly) {
+                            return;
+                        }
                         onChange?.(event.target.checked);
-                    }, type: "checkbox" }), _jsx("svg", { "aria-hidden": "true", className: toClassName("pointer-events-none invisible absolute text-intent-accent-on-solid peer-checked:visible", CHECK_SIZE_CLASS[size]), fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, viewBox: "0 0 24 24", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) })] }), _jsx("span", { children: label })] }));
+                    }, onClick: (clickEvent) => {
+                        // Native checkboxes have no `readonly`, so the toggle is
+                        // blocked here — `preventDefault` on the click stops the
+                        // checked flip a pointer would make.
+                        if (isReadOnly) {
+                            clickEvent.preventDefault();
+                        }
+                    }, onKeyDown: (keyEvent) => {
+                        // …and Space, the keyboard toggle a click block does not
+                        // cover.
+                        if (isReadOnly && keyEvent.key === " ") {
+                            keyEvent.preventDefault();
+                        }
+                    }, type: "checkbox" }), _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
+                        ? "text-intent-neutral-on-solid"
+                        : "text-intent-accent-on-solid", CHECK_SIZE_CLASS[size]), fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, viewBox: "0 0 24 24", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) })] }), _jsx("span", { children: label })] }));
 //# sourceMappingURL=Checkbox.js.map

package/dist/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AA6B/C,MAAM,cAAc,GAAgC;IAClD,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;CACb,CAAA;AAED,MAAM,gBAAgB,GAAgC;IACpD,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,UAAU;CACf,CAAA;AAED,MAAM,eAAe,GAAgC;IACnD,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;CACd,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,SAAS,EACT,EAAE,EACF,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,IAAI,GACG,EAAa,EAAE,CAAC,CAC9B,iBACE,SAAS,EAAE,WAAW,CACpB,kFAAkF,EAClF,eAAe,CAAC,IAAI,CAAC,EACrB,UAAU;QACR,0CAA0C,EAC5C,SAAS,CACV,aAED,gBAAM,SAAS,EAAC,2CAA2C,aACzD,gBACE,SAAS,EAAE,WAAW,CACpB,yJAAyJ,EACzJ,mEAAmE;oBACnE,6DAA6D;oBAC7D,6DAA6D;oBAC7D,8DAA8D;oBAC9D,2DAA2D;oBAC3D,wDAAwD;oBACxD,iDAAiD;oBACjD,4DAA4D;oBAC5D,0CAA0C;oBAC1C,4DAA4D,EAC5D,cAAc,CAAC,IAAI,CAAC,EACpB,gBAAgB,CACjB,EACD,cAAc,EAAE,SAAS,EACzB,QAAQ,EAAE,UAAU,EACpB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,CACR,KAAoC,EACpC,EAAE;wBACF,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;oBAClC,CAAC,EACD,IAAI,EAAC,UAAU,GACf,EAEF,6BACc,MAAM,EAClB,SAAS,EAAE,WAAW,CACpB,yFAAyF,EACzF,gBAAgB,CAAC,IAAI,CAAC,CACvB,EACD,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,CAAC,EACd,OAAO,EAAC,WAAW,YAEnB,eAAM,CAAC,EAAC,iBAAiB,GAAG,GACxB,IACD,EAEP,yBAAO,KAAK,GAAQ,IACd,CACT,CAAA"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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"}

package/dist/RadioGroup/RadioGroup.d.ts

@@ -14,6 +14,13 @@ export type RadioItem = {
 export type RadioGroupProps = {
     className?: string;
     items: readonly RadioItem[];
+    /**
+     * Shows which option is chosen at full contrast but refuses to move
+     * the choice — the arrow keys and clicks no longer select, and the
+     * group announces `aria-readonly`. Focus can still travel the
+     * options so a keyboard user can read them.
+     */
+    isReadOnly?: boolean;
     /** The group's accessible name. Required. */
     label: string;
     onChange?: (selectedValue: string | null) => void;
@@ -43,5 +50,5 @@ export type RadioGroupProps = {
  * move focus and check — APG's one activation mode, the same reason
  * `SegmentedControl` has no `manual` prop.
  */
-export declare const RadioGroup: ({ className, items, label, onChange, selectedValue, size, }: RadioGroupProps) => ReactNode;
+export declare const RadioGroup: ({ className, items, isReadOnly, label, onChange, selectedValue, size, }: RadioGroupProps) => ReactNode;
 //# sourceMappingURL=RadioGroup.d.ts.map

package/dist/RadioGroup/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,MAAM,MAAM,SAAS,GAAG;IACtB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,SAAS,SAAS,EAAE,CAAA;IAC3B,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACjD,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAQD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,UAAU,GAAI,6DAOxB,eAAe,KAAG,SAqIpB,CAAA"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,MAAM,MAAM,SAAS,GAAG;IACtB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,SAAS,SAAS,EAAE,CAAA;IAC3B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACjD,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAQD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,UAAU,GAAI,yEAQxB,eAAe,KAAG,SAgJpB,CAAA"}

package/dist/RadioGroup/RadioGroup.js

@@ -30,7 +30,7 @@ const GAP_CLASS = {
  * move focus and check — APG's one activation mode, the same reason
  * `SegmentedControl` has no `manual` prop.
  */
-export const RadioGroup = ({ className, items, label, onChange, selectedValue, size = "md", }) => {
+export const RadioGroup = ({ className, items, isReadOnly = false, label, onChange, selectedValue, size = "md", }) => {
     const groupRef = useRef(null);
     const optionElements = useRef(new Map());
     const initialValue = selectedValue ??
@@ -53,17 +53,22 @@ export const RadioGroup = ({ className, items, label, onChange, selectedValue, s
      */
     const checkedValue = selection.selectedValue ?? selection.pendingValue;
     const chooseOption = useCallback((value) => {
+        // Focus may still land on the option so it can be read; only the
+        // choice is frozen when read-only.
         setActiveValue(value);
-        select(value);
-    }, [select, setActiveValue]);
+        if (!isReadOnly) {
+            select(value);
+        }
+    }, [isReadOnly, select, setActiveValue]);
     useEffect(() => {
         // Selection follows focus — the radio-group rule, and the one
         // line a `manual` mode this component deliberately lacks would
-        // remove.
-        if (activeValue !== null) {
+        // remove. Read-only severs exactly this link: focus still travels
+        // for reading, but moving it no longer moves the choice.
+        if (activeValue !== null && !isReadOnly) {
             select(activeValue);
         }
-    }, [activeValue, select]);
+    }, [activeValue, isReadOnly, select]);
     useEffect(() => {
         const group = groupRef.current;
         if (!group ||
@@ -73,7 +78,7 @@ export const RadioGroup = ({ className, items, label, onChange, selectedValue, s
         }
         optionElements.current.get(activeValue)?.focus();
     }, [activeValue]);
-    return (_jsx("div", { "aria-label": label, className: toClassName("flex flex-col", GAP_CLASS[size], className), onKeyDown: (keyEvent) => {
+    return (_jsx("div", { "aria-label": label, "aria-readonly": isReadOnly || undefined, className: toClassName("flex flex-col", GAP_CLASS[size], className), onKeyDown: (keyEvent) => {
             const commands = {
                 ArrowDown: focus.next,
                 ArrowLeft: focus.previous,
@@ -93,12 +98,14 @@ export const RadioGroup = ({ className, items, label, onChange, selectedValue, s
             }
             // Space checks the focused option. Selection already follows
             // focus, so this is almost always a no-op — one idempotent
-            // command, not a second code path.
-            if (keyEvent.key === " " && activeValue !== null) {
+            // command, not a second code path — and read-only skips it.
+            if (keyEvent.key === " " &&
+                activeValue !== null &&
+                !isReadOnly) {
                 keyEvent.preventDefault();
                 select(activeValue);
             }
-        }, ref: groupRef, role: "radiogroup", children: items.map((item) => (_jsx(RadioGroupOption, { isChecked: checkedValue === item.value, item: item, onChoose: chooseOption, registerFocus: focus.register, registerSelection: selection.register, size: size, 
+        }, ref: groupRef, role: "radiogroup", children: items.map((item) => (_jsx(RadioGroupOption, { isChecked: checkedValue === item.value, isReadOnly: isReadOnly, item: item, onChoose: chooseOption, registerFocus: focus.register, registerSelection: selection.register, size: size, 
             // The roving-tabindex rule read from the core rather than
             // restated here: exactly one option is in the tab order, so
             // Tab enters and leaves the group once.

package/dist/RadioGroup/RadioGroup.js.map

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

package/dist/RadioGroup/RadioGroupOption.d.ts

@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import type { RadioItem } from "./RadioGroup.tsx";
 export type RadioGroupOptionProps = {
     isChecked: boolean;
+    isReadOnly: boolean;
     item: RadioItem;
     onChoose: (value: string) => void;
     /** `RovingFocus.register` — membership of the arrow-key group. */
@@ -22,5 +23,5 @@ export type RadioGroupOptionProps = {
  * and sized independently of the ring — a filled `bg-intent-accent`
  * ring with no inner dot reads as a checkbox, not a radio.
  */
-export declare const RadioGroupOption: ({ isChecked, item, onChoose, registerFocus, registerSelection, size, tabIndex, trackElement, }: RadioGroupOptionProps) => ReactNode;
+export declare const RadioGroupOption: ({ isChecked, isReadOnly, item, onChoose, registerFocus, registerSelection, size, tabIndex, trackElement, }: RadioGroupOptionProps) => ReactNode;
 //# sourceMappingURL=RadioGroupOption.d.ts.map

package/dist/RadioGroup/RadioGroupOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroupOption.d.ts","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroupOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEjD,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAC5C,0DAA0D;IAC1D,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAChD,IAAI,EAAE,WAAW,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,CACZ,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,iBAAiB,GAAG,IAAI,KAC9B,IAAI,CAAA;CACV,CAAA;AAoBD;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,GAAI,gGAS9B,qBAAqB,KAAG,SAiE1B,CAAA"}
+{"version":3,"file":"RadioGroupOption.d.ts","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroupOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEjD,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAC5C,0DAA0D;IAC1D,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAChD,IAAI,EAAE,WAAW,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,CACZ,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,iBAAiB,GAAG,IAAI,KAC9B,IAAI,CAAA;CACV,CAAA;AAuBD;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,GAAI,4GAU9B,qBAAqB,KAAG,SAkF1B,CAAA"}

package/dist/RadioGroup/RadioGroupOption.js

@@ -2,8 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { FOCUS_RING_CLASS } from "../intentStyles.js";
 import { toClassName } from "../toClassName.js";
+// Deliberately the `Switch`'s `THUMB_SIZE_CLASS`, value for value — a
+// radio's ring and a switch's knob are then the same circle at every
+// density, which is what makes the family read as one set.
 const RING_SIZE_CLASS = {
-    sm: "size-3.5",
+    sm: "size-3",
     md: "size-4",
     lg: "size-5",
 };
@@ -26,7 +29,7 @@ const TEXT_SIZE_CLASS = {
  * and sized independently of the ring — a filled `bg-intent-accent`
  * ring with no inner dot reads as a checkbox, not a radio.
  */
-export const RadioGroupOption = ({ isChecked, item, onChoose, registerFocus, registerSelection, size, tabIndex, trackElement, }) => {
+export const RadioGroupOption = ({ isChecked, isReadOnly, item, onChoose, registerFocus, registerSelection, size, tabIndex, trackElement, }) => {
     const { isDisabled = false, label, value } = item;
     useEffect(() => registerSelection(value), [registerSelection, value]);
     useEffect(() => {
@@ -35,18 +38,38 @@ export const RadioGroupOption = ({ isChecked, item, onChoose, registerFocus, reg
         }
         return registerFocus(value);
     }, [isDisabled, registerFocus, value]);
-    return (_jsxs("button", { "aria-checked": isChecked, className: toClassName("inline-flex cursor-pointer items-center gap-2 rounded-sm text-start transition-colors duration-(--duration-fast) ease-standard", TEXT_SIZE_CLASS[size], isDisabled
-            ? "cursor-not-allowed text-content-disabled"
-            : "text-content-secondary hover:text-content-primary", FOCUS_RING_CLASS), disabled: isDisabled, onClick: () => {
+    return (_jsxs("button", { "aria-checked": isChecked, className: toClassName("inline-flex items-center gap-2 rounded-sm text-content-secondary text-start transition-colors duration-(--duration-fast) ease-standard", TEXT_SIZE_CLASS[size], 
+        // Disabled turns the whole option down with `opacity-60`, the
+        // same family treatment as `Checkbox` and `Switch`, rather than
+        // fading the ring to a token that disappeared on a pale theme.
+        // Read-only keeps full contrast — only the cursor and the hover
+        // affordance say it will not move.
+        isDisabled
+            ? "cursor-not-allowed opacity-60"
+            : isReadOnly
+                ? "cursor-default"
+                : "cursor-pointer hover:text-content-primary", FOCUS_RING_CLASS), disabled: isDisabled, onClick: () => {
             onChoose(value);
         }, ref: (element) => {
             trackElement(value, element);
-        }, role: "radio", tabIndex: tabIndex, type: "button", children: [_jsx("span", { className: toClassName("grid shrink-0 place-items-center rounded-full border transition-colors duration-(--duration-fast) ease-standard", isDisabled
-                    ? "border-border-subtle"
+        }, role: "radio", tabIndex: tabIndex, type: "button", children: [_jsx("span", { className: toClassName(
+                // `border-2` matches the `Switch` thumb's ring weight and the
+                // `Checkbox` box, and `RING_SIZE_CLASS` matches the thumb's
+                // diameter — so a radio dot and a switch knob are the same
+                // circle. A disabled ring holds `border-default` rather than
+                // fading to the `border-subtle` that vanished on a pale theme.
+                "grid shrink-0 place-items-center rounded-full border-2 transition-colors duration-(--duration-fast) ease-standard", 
+                // Read-only wears the neutral intent and a softer resting edge
+                // — the same "readable but not an actionable accent" language
+                // as `Checkbox` and `Switch`.
+                isReadOnly
+                    ? isChecked
+                        ? "border-intent-neutral-solid"
+                        : "border-border-default"
                     : isChecked
                         ? "border-intent-accent-solid"
-                        : "border-border-strong", RING_SIZE_CLASS[size]), children: _jsx("span", { className: toClassName("rounded-full transition-transform duration-(--duration-fast) ease-standard", isChecked ? "scale-100" : "scale-0", isDisabled
-                        ? "bg-content-disabled"
-                        : "bg-intent-accent-solid", DOT_SIZE_CLASS[size]) }) }), _jsx("span", { children: label })] }));
+                        : "border-border-strong", RING_SIZE_CLASS[size]), children: _jsx("span", { className: toClassName("rounded-full transition-transform duration-(--duration-fast) ease-standard", isReadOnly
+                        ? "bg-intent-neutral-solid"
+                        : "bg-intent-accent-solid", isChecked ? "scale-100" : "scale-0", DOT_SIZE_CLASS[size]) }) }), _jsx("span", { children: label })] }));
 };
 //# sourceMappingURL=RadioGroupOption.js.map

package/dist/RadioGroup/RadioGroupOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroupOption.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroupOption.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAmB/C,MAAM,eAAe,GAAgC;IACnD,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;CACb,CAAA;AAED,MAAM,cAAc,GAAgC;IAClD,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,UAAU;CACf,CAAA;AAED,MAAM,eAAe,GAAgC;IACnD,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;CACd,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,IAAI,EACJ,QAAQ,EACR,YAAY,GACU,EAAa,EAAE;IACrC,MAAM,EAAE,UAAU,GAAG,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IAEjD,SAAS,CACP,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC9B,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAC3B,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,OAAO,aAAa,CAAC,KAAK,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAA;IAEtC,OAAO,CAEL,kCACgB,SAAS,EACvB,SAAS,EAAE,WAAW,CACpB,gIAAgI,EAChI,eAAe,CAAC,IAAI,CAAC,EACrB,UAAU;YACR,CAAC,CAAC,0CAA0C;YAC5C,CAAC,CAAC,mDAAmD,EACvD,gBAAgB,CACjB,EACD,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAA;QACjB,CAAC,EACD,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;QAC9B,CAAC,EACD,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,aAEb,eACE,SAAS,EAAE,WAAW,CACpB,iHAAiH,EACjH,UAAU;oBACR,CAAC,CAAC,sBAAsB;oBACxB,CAAC,CAAC,SAAS;wBACT,CAAC,CAAC,4BAA4B;wBAC9B,CAAC,CAAC,sBAAsB,EAC5B,eAAe,CAAC,IAAI,CAAC,CACtB,YAED,eACE,SAAS,EAAE,WAAW,CACpB,4EAA4E,EAC5E,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EACnC,UAAU;wBACR,CAAC,CAAC,qBAAqB;wBACvB,CAAC,CAAC,wBAAwB,EAC5B,cAAc,CAAC,IAAI,CAAC,CACrB,GACD,GACG,EAEP,yBAAO,KAAK,GAAQ,IACb,CACV,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"RadioGroupOption.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroupOption.tsx"],"names":[],"mappings":"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"}

package/dist/Switch/Switch.d.ts

@@ -10,6 +10,12 @@ export type SwitchProps = {
      */
     isChecked?: boolean;
     isDisabled?: boolean;
+    /**
+     * Shows the state at full contrast but refuses to flip it — a
+     * setting you may read here and change elsewhere. Unlike
+     * `isDisabled` it does not dim, and it announces `aria-readonly`.
+     */
+    isReadOnly?: boolean;
     /** The visible text, and the switch's accessible name. */
     label: ReactNode;
     onChange?: (isChecked: boolean) => void;
@@ -50,5 +56,5 @@ export type SwitchProps = {
  * gives the off track the defined edge a bare well would miss on a pale
  * theme.
  */
-export declare const Switch: ({ className, isChecked, isDisabled, label, onChange, size, }: SwitchProps) => ReactNode;
+export declare const Switch: ({ className, isChecked, isDisabled, isReadOnly, label, onChange, size, }: SwitchProps) => ReactNode;
 //# sourceMappingURL=Switch.d.ts.map

package/dist/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,0DAA0D;IAC1D,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAkCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,MAAM,GAAI,8DAOpB,WAAW,KAAG,SA+DhB,CAAA"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,0DAA0D;IAC1D,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAkCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,MAAM,GAAI,0EAQpB,WAAW,KAAG,SA6EhB,CAAA"}

package/dist/Switch/Switch.js

@@ -63,31 +63,43 @@ const TEXT_SIZE_CLASS = {
  * gives the off track the defined edge a bare well would miss on a pale
  * theme.
  */
-export const Switch = ({ className, isChecked = false, isDisabled = false, label, onChange, size = "md", }) => {
+export const Switch = ({ className, isChecked = false, isDisabled = false, isReadOnly = false, label, onChange, size = "md", }) => {
     const [isOn, setIsOn] = useState(isChecked);
     const labelId = useUniqueId();
-    return (_jsxs("span", { className: toClassName("inline-flex items-center gap-2 text-content-secondary select-none", TEXT_SIZE_CLASS[size], isDisabled && "text-content-disabled", className), children: [_jsx("button", { "aria-checked": isOn, "aria-labelledby": labelId, className: toClassName(
+    return (_jsxs("span", { className: toClassName("inline-flex items-center gap-2 text-content-secondary select-none", TEXT_SIZE_CLASS[size], 
+        // Disabled turns the whole control down with `opacity-60`, the
+        // same family treatment as `Checkbox` and `RadioGroup` — the
+        // track keeps its full-contrast state colour underneath.
+        isDisabled && "opacity-60", className), children: [_jsx("button", { "aria-checked": isOn, "aria-labelledby": labelId, "aria-readonly": isReadOnly || undefined, className: toClassName(
                 // `p-1` is the breathing room; `ring-inset` draws the off
                 // outline without changing the box size, so the centring
                 // arithmetic above stays exact.
-                "inline-flex shrink-0 cursor-pointer items-center rounded-full p-1 transition-colors duration-(--duration-fast) ease-standard", 
-                // One state class, chosen by ternary — two `bg-`/`ring-`
-                // utilities of the same specificity do not resolve by
-                // class-list order, so disabled has to win as the only one
-                // written.
-                isDisabled
-                    ? "cursor-not-allowed bg-surface-sunken ring-2 ring-border-subtle ring-inset"
+                "inline-flex shrink-0 items-center rounded-full p-1 transition-colors duration-(--duration-fast) ease-standard", 
+                // The track carries the state at full contrast whether or not
+                // it is disabled; `opacity-60` on the wrapper does the dimming.
+                // Read-only swaps the accent for the neutral intent and softens
+                // the off outline — readable, plainly not an actionable accent,
+                // the same language as `Checkbox` and `RadioGroup`.
+                isReadOnly
+                    ? isOn
+                        ? "bg-intent-neutral-solid"
+                        : "bg-surface-sunken ring-2 ring-border-default ring-inset"
                     : isOn
                         ? "bg-intent-accent-solid"
-                        : "bg-surface-sunken ring-2 ring-border-strong ring-inset", TRACK_SIZE_CLASS[size], FOCUS_RING_CLASS), disabled: isDisabled, onClick: () => {
+                        : "bg-surface-sunken ring-2 ring-border-strong ring-inset", isDisabled
+                    ? "cursor-not-allowed"
+                    : isReadOnly
+                        ? "cursor-default"
+                        : "cursor-pointer", TRACK_SIZE_CLASS[size], FOCUS_RING_CLASS), disabled: isDisabled, onClick: () => {
+                    // Read-only shows the state but will not flip it — the switch
+                    // owns its value, so the guard is just an early return.
+                    if (isReadOnly) {
+                        return;
+                    }
                     const isNextOn = !isOn;
                     setIsOn(isNextOn);
                     onChange?.(isNextOn);
-                }, role: "switch", type: "button", children: _jsx("span", { className: toClassName("rounded-full transition-transform duration-(--duration-fast) ease-standard", 
-                    // One knob, same colour off and on; disabled mutes it.
-                    isDisabled
-                        ? "bg-content-disabled"
-                        : "bg-surface-raised", isOn
+                }, role: "switch", type: "button", children: _jsx("span", { className: toClassName("rounded-full bg-surface-raised transition-transform duration-(--duration-fast) ease-standard", isOn
                         ? THUMB_ON_TRANSLATE_CLASS[size]
                         : "translate-x-0", THUMB_SIZE_CLASS[size]) }) }), _jsx("span", { id: labelId, children: label })] }));
 };

package/dist/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAkB/C,oEAAoE;AACpE,iEAAiE;AACjE,uEAAuE;AACvE,sEAAsE;AACtE,kDAAkD;AAClD,MAAM,gBAAgB,GAAgC;IACpD,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;CACf,CAAA;AAED,MAAM,gBAAgB,GAAgC;IACpD,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;CACb,CAAA;AAED,MAAM,wBAAwB,GAG1B;IACF,EAAE,EAAE,eAAe;IACnB,EAAE,EAAE,eAAe;IACnB,EAAE,EAAE,eAAe;CACpB,CAAA;AAED,MAAM,eAAe,GAAgC;IACnD,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;CACd,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,IAAI,GACC,EAAa,EAAE;IAC3B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAA;IAE3C,MAAM,OAAO,GAAG,WAAW,EAAE,CAAA;IAE7B,OAAO,CACL,gBACE,SAAS,EAAE,WAAW,CACpB,mEAAmE,EACnE,eAAe,CAAC,IAAI,CAAC,EACrB,UAAU,IAAI,uBAAuB,EACrC,SAAS,CACV,aAED,iCACgB,IAAI,qBACD,OAAO,EACxB,SAAS,EAAE,WAAW;gBACpB,0DAA0D;gBAC1D,yDAAyD;gBACzD,gCAAgC;gBAChC,8HAA8H;gBAC9H,yDAAyD;gBACzD,sDAAsD;gBACtD,2DAA2D;gBAC3D,WAAW;gBACX,UAAU;oBACR,CAAC,CAAC,2EAA2E;oBAC7E,CAAC,CAAC,IAAI;wBACJ,CAAC,CAAC,wBAAwB;wBAC1B,CAAC,CAAC,wDAAwD,EAC9D,gBAAgB,CAAC,IAAI,CAAC,EACtB,gBAAgB,CACjB,EACD,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAA;oBAEtB,OAAO,CAAC,QAAQ,CAAC,CAAA;oBAEjB,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAA;gBACtB,CAAC,EACD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,YAEb,eACE,SAAS,EAAE,WAAW,CACpB,4EAA4E;oBAC5E,uDAAuD;oBACvD,UAAU;wBACR,CAAC,CAAC,qBAAqB;wBACvB,CAAC,CAAC,mBAAmB,EACvB,IAAI;wBACF,CAAC,CAAC,wBAAwB,CAAC,IAAI,CAAC;wBAChC,CAAC,CAAC,eAAe,EACnB,gBAAgB,CAAC,IAAI,CAAC,CACvB,GACD,GACK,EAET,eAAM,EAAE,EAAE,OAAO,YAAG,KAAK,GAAQ,IAC5B,CACR,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "2.5.0",
+  "version": "2.6.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

@@ -49,6 +49,19 @@ is a control every consumer has to hold it for.
 
 <Canvas of={CheckboxStories.AllStates} />
 
+## Three ways a box can be inactive
+
+`isDisabled` and `isReadOnly` are different states, and the box shows all three:
+
+- **Enabled** — the accent intent, a crisp `border-strong` edge.
+- **Disabled** — the same box turned down with `opacity-60`. It dims rather than fading a
+  token because the scale has no step between `border-default` and `border-strong`, so a
+  muted outline was either invisible or indistinguishable from enabled.
+- **Read-only** — full contrast, because the whole point is that the value stays legible,
+  but in the **neutral** intent with a softer edge: an informational value you may read
+  here and change elsewhere, not an actionable accent. It announces `aria-readonly`, and
+  the toggle is blocked on both pointer and `Space`.
+
 ## Checkbox or `Switch`
 
 Same state kind, different meaning. A checkbox is a value you **submit** — "delete

package/src/Checkbox/Checkbox.stories.tsx

@@ -16,7 +16,12 @@ const meta = {
   // The component's own defaults, restated — Storybook does not seed
   // `args` from docgen, so an unstated default shows in the props
   // table with nothing selected in its control.
-  args: { isChecked: false, isDisabled: false, size: "md" },
+  args: {
+    isChecked: false,
+    isDisabled: false,
+    isReadOnly: false,
+    size: "md",
+  },
 } satisfies Meta<typeof Checkbox>
 
 export default meta
@@ -85,6 +90,23 @@ export const AllStates: Story = {
             label="Disabled and checked"
           />
         </StoryCell>
+
+        <StoryCell label="read-only, unchecked">
+          <Checkbox
+            {...controlProps}
+            isReadOnly
+            label="Read-only"
+          />
+        </StoryCell>
+
+        <StoryCell label="read-only, checked">
+          <Checkbox
+            {...controlProps}
+            isChecked
+            isReadOnly
+            label="Read-only and checked"
+          />
+        </StoryCell>
       </StoryGrid>
     </StorySection>
   ),

package/src/Checkbox/Checkbox.test.tsx

@@ -78,3 +78,32 @@ test("isChecked decides the first render", async () => {
     }),
   ).toBeChecked()
 })
+
+test("a read-only box is announced and cannot be toggled", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(AllStates)
+
+  const readOnly = expectAgentDrivable(canvas, {
+    name: "Read-only",
+    role: "checkbox",
+  })
+
+  // Full contrast, not `disabled` — a read-only value stays readable,
+  // and it is focusable so a screen reader reaches it. The state is
+  // carried by `aria-readonly`, not by removing it from the tree.
+  await expect(readOnly).toHaveAttribute(
+    "aria-readonly",
+    "true",
+  )
+
+  await expect(readOnly).not.toBeDisabled()
+
+  await expect(readOnly).not.toBeChecked()
+
+  await userEvent.click(readOnly)
+
+  // The pointer block held — the box did not flip.
+  await expect(readOnly).not.toBeChecked()
+
+  await expectNoAxeViolations(canvasElement)
+})

package/src/Checkbox/Checkbox.tsx

@@ -20,6 +20,15 @@ export type CheckboxProps = {
    */
   isChecked?: boolean
   isDisabled?: boolean
+  /**
+   * Shows the value at full contrast but refuses to change it — a
+   * setting you may read here and edit elsewhere. Distinct from
+   * `isDisabled`, which dims: a read-only box is not turned down,
+   * because the whole point is that you can still read it. Announced
+   * as `aria-readonly`, and the toggle is blocked on both pointer and
+   * `Space`.
+   */
+  isReadOnly?: boolean
   /**
    * The visible text beside the box, and the checkbox's accessible
    * name — the `<label>` wraps the control, so there is no `for` to
@@ -83,33 +92,59 @@ export const Checkbox = ({
   id,
   isChecked = false,
   isDisabled = false,
+  isReadOnly = false,
   label,
   onChange,
   size = "md",
 }: CheckboxProps): ReactNode => (
   <label
     className={toClassName(
-      "inline-flex cursor-pointer items-center gap-2 text-content-secondary select-none",
+      "inline-flex items-center gap-2 text-content-secondary select-none",
       TEXT_SIZE_CLASS[size],
-      isDisabled &&
-        "cursor-not-allowed text-content-disabled",
+      // One cursor, chosen by state — two cursor utilities of the same
+      // specificity do not resolve by class-list order.
+      isDisabled
+        ? "cursor-not-allowed"
+        : isReadOnly
+          ? "cursor-default"
+          : "cursor-pointer",
+      // Disabled dims the whole control with opacity rather than fading
+      // the box to a quieter token. The token scale has no step between
+      // `border-default` and `border-strong`, so a muted outline was
+      // either invisible or indistinguishable from enabled; `opacity-60`
+      // keeps the full shape and colour and just turns them down, which
+      // is the "present but inactive" the box actually is. Read-only is
+      // *not* dimmed — its whole point is that the value stays readable.
+      // The same treatment is on `Switch` and `RadioGroup`.
+      isDisabled && "opacity-60",
       className,
     )}
   >
     <span className="relative grid shrink-0 place-items-center">
       <input
+        aria-readonly={isReadOnly || undefined}
         className={toClassName(
-          "peer cursor-pointer appearance-none rounded-sm border border-border-strong bg-surface-sunken transition-colors duration-(--duration-fast) ease-standard",
-          "checked:border-intent-accent-solid checked:bg-intent-accent-solid",
-          // Disabled mutes the border and the cursor, and — unlike the
-          // shared `DISABLED_CLASS` — does *not* touch the background.
-          // The generic bundle repaints the box `surface-sunken`, which
-          // erased both the checked accent fill (white tick on grey)
-          // and, in a light scheme, the unchecked box entirely: a
-          // `border-subtle` outline on `surface-sunken` on
-          // `surface-base` is three near-identical creams. A disabled
-          // box is still a box the user has to see.
-          "disabled:cursor-not-allowed disabled:border-border-default",
+          // `border-2` is the family's shared weight — the `Switch`
+          // track's `ring-2` and the `RadioGroup` ring match it, so the
+          // three read as one set — and a 2px edge is also what keeps a
+          // disabled box visible where a 1px one washed out.
+          "peer appearance-none rounded-sm border-2 bg-surface-sunken transition-colors duration-(--duration-fast) ease-standard",
+          // Read-only wears the **neutral** intent, not the accent: full
+          // contrast (so the value reads) but plainly not an actionable
+          // accent control, with a softer `border-default` resting edge.
+          // Three distinct states result — enabled (accent, crisp),
+          // disabled (accent, dimmed by the wrapper), read-only (neutral).
+          // No `disabled:` colour override; the wrapper's `opacity-60`
+          // does the dimming, and doubling it on the box is what made a
+          // disabled checkbox vanish.
+          isReadOnly
+            ? "border-border-default checked:border-intent-neutral-solid checked:bg-intent-neutral-solid"
+            : "border-border-strong checked:border-intent-accent-solid checked:bg-intent-accent-solid",
+          isDisabled
+            ? "cursor-not-allowed"
+            : isReadOnly
+              ? "cursor-default"
+              : "cursor-pointer",
           BOX_SIZE_CLASS[size],
           FOCUS_RING_CLASS,
         )}
@@ -119,15 +154,39 @@ export const Checkbox = ({
         onChange={(
           event: ChangeEvent<HTMLInputElement>,
         ) => {
+          if (isReadOnly) {
+            return
+          }
+
           onChange?.(event.target.checked)
         }}
+        onClick={(clickEvent) => {
+          // Native checkboxes have no `readonly`, so the toggle is
+          // blocked here — `preventDefault` on the click stops the
+          // checked flip a pointer would make.
+          if (isReadOnly) {
+            clickEvent.preventDefault()
+          }
+        }}
+        onKeyDown={(keyEvent) => {
+          // …and Space, the keyboard toggle a click block does not
+          // cover.
+          if (isReadOnly && keyEvent.key === " ") {
+            keyEvent.preventDefault()
+          }
+        }}
         type="checkbox"
       />
 
       <svg
         aria-hidden="true"
         className={toClassName(
-          "pointer-events-none invisible absolute text-intent-accent-on-solid peer-checked:visible",
+          "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
+            ? "text-intent-neutral-on-solid"
+            : "text-intent-accent-on-solid",
           CHECK_SIZE_CLASS[size],
         )}
         fill="none"

package/src/RadioGroup/RadioGroup.mdx

@@ -47,6 +47,15 @@ at.
 
 <Canvas of={RadioGroupStories.AllStates} />
 
+## A read-only group shows the choice without moving it
+
+`isReadOnly` severs the one link that defines this component — selection follows focus — so
+the arrow keys and clicks still travel the options for reading but no longer move the
+choice. The group announces `aria-readonly`, and the chosen option shows at full contrast
+in the **neutral** intent: a value you may read here and change elsewhere. That is distinct
+from a single **disabled** option, which is dimmed with `opacity-60` and dropped from the
+focus group but stays selectable via `selectedValue`.
+
 ## `selectedValue` is the initial value, not a controlled one
 
 It decides the first render and nothing after — Charcuterie owns the choice from then on,

package/src/RadioGroup/RadioGroup.stories.tsx

@@ -31,7 +31,7 @@ const meta = {
   // The component's own defaults, restated — Storybook does not seed
   // `args` from docgen, so an unstated default shows in the props
   // table with nothing selected in its control.
-  args: { size: "md" },
+  args: { isReadOnly: false, size: "md" },
 } satisfies Meta<typeof RadioGroup>
 
 export default meta
@@ -115,6 +115,16 @@ export const AllStates: Story = {
             label="On import"
           />
         </StoryCell>
+
+        <StoryCell label="read-only">
+          <RadioGroup
+            {...controlProps}
+            isReadOnly
+            items={NAMING_ITEMS}
+            label="Naming scheme, read-only"
+            selectedValue="anidb"
+          />
+        </StoryCell>
       </StoryGrid>
     </StorySection>
   ),

package/src/RadioGroup/RadioGroup.test.tsx

@@ -189,3 +189,44 @@ test("selectedValue decides the first render and nothing after", async () => {
     ).toHaveTextContent("Use a custom pattern")
   })
 })
+
+test("a read-only group is announced and its choice cannot move", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(AllStates)
+
+  const group = expectAgentDrivable(canvas, {
+    name: "Naming scheme, read-only",
+    role: "radiogroup",
+  })
+
+  await expect(group).toHaveAttribute(
+    "aria-readonly",
+    "true",
+  )
+
+  // The checked option shows at full contrast; that is the value the
+  // read-only group is displaying.
+  await waitFor(() => {
+    expect(
+      group.querySelector('[aria-checked="true"]'),
+    ).toHaveTextContent("Match AniDB titles")
+  })
+
+  const other = Array.from(
+    group.querySelectorAll<HTMLButtonElement>(
+      '[role="radio"]',
+    ),
+  ).find(
+    (one) => one.textContent === "Use a custom pattern",
+  )
+
+  await userEvent.click(other ?? group)
+
+  // Selection-follows-focus is severed when read-only — a click on
+  // another option does not move the choice.
+  await expect(
+    group.querySelector('[aria-checked="true"]'),
+  ).toHaveTextContent("Match AniDB titles")
+
+  await expectNoAxeViolations(canvasElement)
+})

package/src/RadioGroup/RadioGroup.tsx

@@ -25,6 +25,13 @@ export type RadioItem = {
 export type RadioGroupProps = {
   className?: string
   items: readonly RadioItem[]
+  /**
+   * Shows which option is chosen at full contrast but refuses to move
+   * the choice — the arrow keys and clicks no longer select, and the
+   * group announces `aria-readonly`. Focus can still travel the
+   * options so a keyboard user can read them.
+   */
+  isReadOnly?: boolean
   /** The group's accessible name. Required. */
   label: string
   onChange?: (selectedValue: string | null) => void
@@ -64,6 +71,7 @@ const GAP_CLASS: Record<ControlSize, string> = {
 export const RadioGroup = ({
   className,
   items,
+  isReadOnly = false,
   label,
   onChange,
   selectedValue,
@@ -104,21 +112,26 @@ export const RadioGroup = ({
 
   const chooseOption = useCallback(
     (value: string) => {
+      // Focus may still land on the option so it can be read; only the
+      // choice is frozen when read-only.
       setActiveValue(value)
 
-      select(value)
+      if (!isReadOnly) {
+        select(value)
+      }
     },
-    [select, setActiveValue],
+    [isReadOnly, select, setActiveValue],
   )
 
   useEffect(() => {
     // Selection follows focus — the radio-group rule, and the one
     // line a `manual` mode this component deliberately lacks would
-    // remove.
-    if (activeValue !== null) {
+    // remove. Read-only severs exactly this link: focus still travels
+    // for reading, but moving it no longer moves the choice.
+    if (activeValue !== null && !isReadOnly) {
       select(activeValue)
     }
-  }, [activeValue, select])
+  }, [activeValue, isReadOnly, select])
 
   useEffect(() => {
     const group = groupRef.current
@@ -137,6 +150,7 @@ export const RadioGroup = ({
   return (
     <div
       aria-label={label}
+      aria-readonly={isReadOnly || undefined}
       className={toClassName(
         "flex flex-col",
         GAP_CLASS[size],
@@ -167,8 +181,12 @@ export const RadioGroup = ({
 
         // Space checks the focused option. Selection already follows
         // focus, so this is almost always a no-op — one idempotent
-        // command, not a second code path.
-        if (keyEvent.key === " " && activeValue !== null) {
+        // command, not a second code path — and read-only skips it.
+        if (
+          keyEvent.key === " " &&
+          activeValue !== null &&
+          !isReadOnly
+        ) {
           keyEvent.preventDefault()
 
           select(activeValue)
@@ -180,6 +198,7 @@ export const RadioGroup = ({
       {items.map((item) => (
         <RadioGroupOption
           isChecked={checkedValue === item.value}
+          isReadOnly={isReadOnly}
           item={item}
           key={item.value}
           onChoose={chooseOption}

package/src/RadioGroup/RadioGroupOption.tsx

@@ -8,6 +8,7 @@ import type { RadioItem } from "./RadioGroup.tsx"
 
 export type RadioGroupOptionProps = {
   isChecked: boolean
+  isReadOnly: boolean
   item: RadioItem
   onChoose: (value: string) => void
   /** `RovingFocus.register` — membership of the arrow-key group. */
@@ -22,8 +23,11 @@ export type RadioGroupOptionProps = {
   ) => void
 }
 
+// Deliberately the `Switch`'s `THUMB_SIZE_CLASS`, value for value — a
+// radio's ring and a switch's knob are then the same circle at every
+// density, which is what makes the family read as one set.
 const RING_SIZE_CLASS: Record<ControlSize, string> = {
-  sm: "size-3.5",
+  sm: "size-3",
   md: "size-4",
   lg: "size-5",
 }
@@ -51,6 +55,7 @@ const TEXT_SIZE_CLASS: Record<ControlSize, string> = {
  */
 export const RadioGroupOption = ({
   isChecked,
+  isReadOnly,
   item,
   onChoose,
   registerFocus,
@@ -79,11 +84,18 @@ export const RadioGroupOption = ({
     <button
       aria-checked={isChecked}
       className={toClassName(
-        "inline-flex cursor-pointer items-center gap-2 rounded-sm text-start transition-colors duration-(--duration-fast) ease-standard",
+        "inline-flex items-center gap-2 rounded-sm text-content-secondary text-start transition-colors duration-(--duration-fast) ease-standard",
         TEXT_SIZE_CLASS[size],
+        // Disabled turns the whole option down with `opacity-60`, the
+        // same family treatment as `Checkbox` and `Switch`, rather than
+        // fading the ring to a token that disappeared on a pale theme.
+        // Read-only keeps full contrast — only the cursor and the hover
+        // affordance say it will not move.
         isDisabled
-          ? "cursor-not-allowed text-content-disabled"
-          : "text-content-secondary hover:text-content-primary",
+          ? "cursor-not-allowed opacity-60"
+          : isReadOnly
+            ? "cursor-default"
+            : "cursor-pointer hover:text-content-primary",
         FOCUS_RING_CLASS,
       )}
       disabled={isDisabled}
@@ -99,9 +111,19 @@ export const RadioGroupOption = ({
     >
       <span
         className={toClassName(
-          "grid shrink-0 place-items-center rounded-full border transition-colors duration-(--duration-fast) ease-standard",
-          isDisabled
-            ? "border-border-subtle"
+          // `border-2` matches the `Switch` thumb's ring weight and the
+          // `Checkbox` box, and `RING_SIZE_CLASS` matches the thumb's
+          // diameter — so a radio dot and a switch knob are the same
+          // circle. A disabled ring holds `border-default` rather than
+          // fading to the `border-subtle` that vanished on a pale theme.
+          "grid shrink-0 place-items-center rounded-full border-2 transition-colors duration-(--duration-fast) ease-standard",
+          // Read-only wears the neutral intent and a softer resting edge
+          // — the same "readable but not an actionable accent" language
+          // as `Checkbox` and `Switch`.
+          isReadOnly
+            ? isChecked
+              ? "border-intent-neutral-solid"
+              : "border-border-default"
             : isChecked
               ? "border-intent-accent-solid"
               : "border-border-strong",
@@ -111,10 +133,10 @@ export const RadioGroupOption = ({
         <span
           className={toClassName(
             "rounded-full transition-transform duration-(--duration-fast) ease-standard",
-            isChecked ? "scale-100" : "scale-0",
-            isDisabled
-              ? "bg-content-disabled"
+            isReadOnly
+              ? "bg-intent-neutral-solid"
               : "bg-intent-accent-solid",
+            isChecked ? "scale-100" : "scale-0",
             DOT_SIZE_CLASS[size],
           )}
         />

package/src/Switch/Switch.mdx

@@ -43,11 +43,13 @@ a filled track plus a contrasting thumb survives both, which is the same reason
 
 <Canvas of={SwitchStories.AllStates} />
 
-## One that is off is still reachable
-
-`disabled` removes it from the tab order and the pointer, and `aria-disabled` is left to the
-native `disabled` the `<button>` already carries. A disabled-and-on switch is a setting the
-user cannot currently change — a policy forced from above, say — not a broken control, and
-it reads that way to a screen reader.
+## Disabled dims, read-only does not
+
+`isDisabled` removes the switch from the tab order and the pointer and turns the whole
+control down with `opacity-60` — a setting the user cannot currently change, a policy
+forced from above, still fully visible. `isReadOnly` is the other half: full contrast so
+the state stays legible, but the accent gives way to the **neutral** intent and the flip
+is refused (`aria-readonly`, the `onClick` guarded). A read-only switch is a value you may
+read here and change elsewhere; a disabled one is a control that is simply off-limits now.
 
 <Canvas of={SwitchStories.Interactive} />

package/src/Switch/Switch.stories.tsx

@@ -16,7 +16,12 @@ const meta = {
   // The component's own defaults, restated — Storybook does not seed
   // `args` from docgen, so an unstated default shows in the props
   // table with nothing selected in its control.
-  args: { isChecked: false, isDisabled: false, size: "md" },
+  args: {
+    isChecked: false,
+    isDisabled: false,
+    isReadOnly: false,
+    size: "md",
+  },
 } satisfies Meta<typeof Switch>
 
 export default meta
@@ -80,6 +85,23 @@ export const AllStates: Story = {
             label="Disabled and on"
           />
         </StoryCell>
+
+        <StoryCell label="read-only, off">
+          <Switch
+            {...controlProps}
+            isReadOnly
+            label="Read-only"
+          />
+        </StoryCell>
+
+        <StoryCell label="read-only, on">
+          <Switch
+            {...controlProps}
+            isChecked
+            isReadOnly
+            label="Read-only and on"
+          />
+        </StoryCell>
       </StoryGrid>
     </StorySection>
   ),

package/src/Switch/Switch.test.tsx

@@ -84,3 +84,32 @@ test("isChecked decides the first render", async () => {
     }),
   ).toHaveAttribute("aria-checked", "true")
 })
+
+test("a read-only switch is announced and cannot be flipped", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(AllStates)
+
+  const readOnly = expectAgentDrivable(canvas, {
+    name: "Read-only",
+    role: "switch",
+  })
+
+  await expect(readOnly).toHaveAttribute(
+    "aria-readonly",
+    "true",
+  )
+
+  await expect(readOnly).toHaveAttribute(
+    "aria-checked",
+    "false",
+  )
+
+  await userEvent.click(readOnly)
+
+  await expect(readOnly).toHaveAttribute(
+    "aria-checked",
+    "false",
+  )
+
+  await expectNoAxeViolations(canvasElement)
+})

package/src/Switch/Switch.tsx

@@ -16,6 +16,12 @@ export type SwitchProps = {
    */
   isChecked?: boolean
   isDisabled?: boolean
+  /**
+   * Shows the state at full contrast but refuses to flip it — a
+   * setting you may read here and change elsewhere. Unlike
+   * `isDisabled` it does not dim, and it announces `aria-readonly`.
+   */
+  isReadOnly?: boolean
   /** The visible text, and the switch's accessible name. */
   label: ReactNode
   onChange?: (isChecked: boolean) => void
@@ -93,6 +99,7 @@ export const Switch = ({
   className,
   isChecked = false,
   isDisabled = false,
+  isReadOnly = false,
   label,
   onChange,
   size = "md",
@@ -106,32 +113,50 @@ export const Switch = ({
       className={toClassName(
         "inline-flex items-center gap-2 text-content-secondary select-none",
         TEXT_SIZE_CLASS[size],
-        isDisabled && "text-content-disabled",
+        // Disabled turns the whole control down with `opacity-60`, the
+        // same family treatment as `Checkbox` and `RadioGroup` — the
+        // track keeps its full-contrast state colour underneath.
+        isDisabled && "opacity-60",
         className,
       )}
     >
       <button
         aria-checked={isOn}
         aria-labelledby={labelId}
+        aria-readonly={isReadOnly || undefined}
         className={toClassName(
           // `p-1` is the breathing room; `ring-inset` draws the off
           // outline without changing the box size, so the centring
           // arithmetic above stays exact.
-          "inline-flex shrink-0 cursor-pointer items-center rounded-full p-1 transition-colors duration-(--duration-fast) ease-standard",
-          // One state class, chosen by ternary — two `bg-`/`ring-`
-          // utilities of the same specificity do not resolve by
-          // class-list order, so disabled has to win as the only one
-          // written.
-          isDisabled
-            ? "cursor-not-allowed bg-surface-sunken ring-2 ring-border-subtle ring-inset"
+          "inline-flex shrink-0 items-center rounded-full p-1 transition-colors duration-(--duration-fast) ease-standard",
+          // The track carries the state at full contrast whether or not
+          // it is disabled; `opacity-60` on the wrapper does the dimming.
+          // Read-only swaps the accent for the neutral intent and softens
+          // the off outline — readable, plainly not an actionable accent,
+          // the same language as `Checkbox` and `RadioGroup`.
+          isReadOnly
+            ? isOn
+              ? "bg-intent-neutral-solid"
+              : "bg-surface-sunken ring-2 ring-border-default ring-inset"
             : isOn
               ? "bg-intent-accent-solid"
               : "bg-surface-sunken ring-2 ring-border-strong ring-inset",
+          isDisabled
+            ? "cursor-not-allowed"
+            : isReadOnly
+              ? "cursor-default"
+              : "cursor-pointer",
           TRACK_SIZE_CLASS[size],
           FOCUS_RING_CLASS,
         )}
         disabled={isDisabled}
         onClick={() => {
+          // Read-only shows the state but will not flip it — the switch
+          // owns its value, so the guard is just an early return.
+          if (isReadOnly) {
+            return
+          }
+
           const isNextOn = !isOn
 
           setIsOn(isNextOn)
@@ -143,11 +168,7 @@ export const Switch = ({
       >
         <span
           className={toClassName(
-            "rounded-full transition-transform duration-(--duration-fast) ease-standard",
-            // One knob, same colour off and on; disabled mutes it.
-            isDisabled
-              ? "bg-content-disabled"
-              : "bg-surface-raised",
+            "rounded-full bg-surface-raised transition-transform duration-(--duration-fast) ease-standard",
             isOn
               ? THUMB_ON_TRANSLATE_CLASS[size]
               : "translate-x-0",