@fungi.computer/caps 0.6.0 → 0.7.1

package/dist/components/data-list.d.ts

@@ -9,6 +9,25 @@ export declare const DataList: import("react").ForwardRefExoticComponent<HTMLAtt
 } & import("react").RefAttributes<HTMLUListElement>>;
 /** A list row for a caller-provided label and value. */
 export declare const DataRow: import("react").ForwardRefExoticComponent<LiHTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+/** Props accepted by FactRow. */
+export type FactRowProps = Omit<LiHTMLAttributes<HTMLLIElement>, "children"> & {
+    /** A 16px Sigil before the label; decorative. */
+    icon?: ReactNode;
+    label: ReactNode;
+    /** The fact; long values wrap in their own column. */
+    children: ReactNode;
+};
+/**
+ * One details-panel fact in a compact DataList: a fixed label column (Sigil
+ * and quiet name) and a wrapping value, as in a Print's Image info.
+ */
+export declare const FactRow: import("react").ForwardRefExoticComponent<Omit<LiHTMLAttributes<HTMLLIElement>, "children"> & {
+    /** A 16px Sigil before the label; decorative. */
+    icon?: ReactNode;
+    label: ReactNode;
+    /** The fact; long values wrap in their own column. */
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLLIElement>>;
 /** Props accepted by DataListHeading. */
 export type DataListHeadingProps = HTMLAttributes<HTMLHeadingElement> & {
     /** Heading level; the host keeps its document outline. */

package/dist/components/data-list.js

@@ -9,6 +9,13 @@ export const DataList = forwardRef(function DataList({ className, density = "reg
 export const DataRow = forwardRef(function DataRow({ className, ...props }, ref) {
     return _jsx("li", { ...props, className: cn("list-row", className), ref: ref });
 });
+/**
+ * One details-panel fact in a compact DataList: a fixed label column (Sigil
+ * and quiet name) and a wrapping value, as in a Print's Image info.
+ */
+export const FactRow = forwardRef(function FactRow({ className, icon, label, children, ...props }, ref) {
+    return (_jsxs("li", { ...props, className: cn("list-row caps-fact", className), ref: ref, children: [_jsxs("span", { className: "caps-fact-label", children: [icon ? (_jsx("span", { className: "caps-fact-icon", "aria-hidden": "true", children: icon })) : null, label] }), _jsx("span", { className: "caps-fact-value", children: children })] }));
+});
 /** A quiet small-caps section label that groups the rows below it. */
 export const DataListHeading = forwardRef(function DataListHeading({ aside, children, className, level = 2, ...props }, ref) {
     const Heading = level === 3 ? "h3" : "h2";

package/dist/components/field.d.ts

@@ -57,6 +57,11 @@ export declare const FormSection: import("react").ForwardRefExoticComponent<{
 /** Props accepted by FieldSet. */
 export type FieldSetProps = {
     legend: ReactNode;
+    /**
+     * A decorative Sigil or App icon before the legend, as a Field's `icon`
+     * marks its label. Hidden from assistive tech.
+     */
+    icon?: ReactNode;
     /** Full legend on hover when a columns form clips it to one line. */
     legendTitle?: string;
     description?: ReactNode;
@@ -72,6 +77,11 @@ export type FieldSetProps = {
  */
 export declare const FieldSet: import("react").ForwardRefExoticComponent<{
     legend: ReactNode;
+    /**
+     * A decorative Sigil or App icon before the legend, as a Field's `icon`
+     * marks its label. Hidden from assistive tech.
+     */
+    icon?: ReactNode;
     /** Full legend on hover when a columns form clips it to one line. */
     legendTitle?: string;
     description?: ReactNode;

package/dist/components/field.js

@@ -39,7 +39,7 @@ export const FormSection = forwardRef(function FormSection({ children, className
  * A legend-named group of related choices, such as a list of inline
  * checkbox Fields. `disabled` disables every control inside.
  */
-export const FieldSet = forwardRef(function FieldSet({ children, className, description, error, layout, legend, legendTitle, ...props }, ref) {
+export const FieldSet = forwardRef(function FieldSet({ children, className, description, error, icon, layout, legend, legendTitle, ...props }, ref) {
     const id = useId();
     const describedBy = [
         description ? `${id}-description` : props["aria-describedby"],
@@ -47,7 +47,7 @@ export const FieldSet = forwardRef(function FieldSet({ children, className, desc
     ]
         .filter(Boolean)
         .join(" ") || undefined;
-    return (_jsxs("fieldset", { ...props, "aria-describedby": describedBy, "aria-invalid": error ? true : props["aria-invalid"], className: cn("caps-fieldset", className), "data-layout": layout, ref: ref, children: [_jsx("legend", { className: "caps-fieldset-legend", title: legendTitle, children: legend }), description ? (_jsx("p", { className: "caps-fieldset-description", id: `${id}-description`, children: description })) : null, _jsx("div", { className: "caps-fieldset-fields", children: children }), error === undefined ? null : (_jsx(FieldError, { id: `${id}-error`, children: error }))] }));
+    return (_jsxs("fieldset", { ...props, "aria-describedby": describedBy, "aria-invalid": error ? true : props["aria-invalid"], className: cn("caps-fieldset", className), "data-layout": layout, ref: ref, children: [_jsxs("legend", { className: "caps-fieldset-legend", title: legendTitle, children: [icon ? (_jsx("span", { className: "caps-field-icon", "aria-hidden": "true", children: icon })) : null, legend] }), description ? (_jsx("p", { className: "caps-fieldset-description", id: `${id}-description`, children: description })) : null, _jsx("div", { className: "caps-fieldset-fields", children: children }), error === undefined ? null : (_jsx(FieldError, { id: `${id}-error`, children: error }))] }));
 });
 /** The labelled control inside an InputGroup: its first non-addon element. */
 function groupControl(group) {

package/dist/components/hold-button.js

@@ -14,6 +14,7 @@ export const HoldButton = forwardRef(function HoldButton({ children, onConfirm,
     const fill = useRef(null);
     const rising = useRef(null);
     const timer = useRef(null);
+    const holder = useRef(null);
     const confirm = useRef(onConfirm);
     const hint = useId();
     useEffect(() => {
@@ -27,6 +28,7 @@ export const HoldButton = forwardRef(function HoldButton({ children, onConfirm,
     const finish = () => {
         rising.current = null;
         timer.current = null;
+        holder.current = null;
         confirm.current();
         const element = fill.current;
         if (!element || !canAnimate(element))
@@ -37,7 +39,7 @@ export const HoldButton = forwardRef(function HoldButton({ children, onConfirm,
             easing: motionEasing(motion, motion.easeExit),
         });
     };
-    const start = () => {
+    const start = (by) => {
         const element = fill.current;
         if (disabled === true ||
             loading ||
@@ -45,6 +47,7 @@ export const HoldButton = forwardRef(function HoldButton({ children, onConfirm,
             rising.current ||
             timer.current)
             return;
+        holder.current = by;
         if (!canAnimate(element)) {
             timer.current = setTimeout(finish, holdMs);
             return;
@@ -59,7 +62,13 @@ export const HoldButton = forwardRef(function HoldButton({ children, onConfirm,
         animation.addEventListener("finish", finish);
         rising.current = animation;
     };
-    const release = () => {
+    // Each input ends only the hold it started: a mouse leaving the button
+    // (or the button moving away from a resting mouse) never cancels a held
+    // key. Blur and Escape end any hold.
+    const release = (by) => {
+        if (by !== undefined && holder.current !== by)
+            return;
+        holder.current = null;
         if (timer.current !== null) {
             clearTimeout(timer.current);
             timer.current = null;
@@ -86,16 +95,16 @@ export const HoldButton = forwardRef(function HoldButton({ children, onConfirm,
                 }, onPointerDown: (event) => {
                     onPointerDown?.(event);
                     if (event.button === 0)
-                        start();
+                        start(event.pointerId);
                 }, onPointerUp: (event) => {
                     onPointerUp?.(event);
-                    release();
+                    release(event.pointerId);
                 }, onPointerLeave: (event) => {
                     onPointerLeave?.(event);
-                    release();
+                    release(event.pointerId);
                 }, onPointerCancel: (event) => {
                     onPointerCancel?.(event);
-                    release();
+                    release(event.pointerId);
                 }, onKeyDown: (event) => {
                     onKeyDown?.(event);
                     if (event.key === "Escape")
@@ -104,12 +113,12 @@ export const HoldButton = forwardRef(function HoldButton({ children, onConfirm,
                         return;
                     event.preventDefault();
                     if (!event.repeat)
-                        start();
+                        start("key");
                 }, onKeyUp: (event) => {
                     onKeyUp?.(event);
                     if (!confirmKeys.has(event.key))
                         return;
                     event.preventDefault();
-                    release();
+                    release("key");
                 }, children: [_jsx("span", { ref: fill, "aria-hidden": "true", className: "caps-hold-fill" }), children] }), _jsx(VisuallyHidden, { id: hint, children: holdHint })] }));
 });

package/dist/components/icon-checkbox.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 import { type CheckboxProps } from "./checkbox.js";
 /** Props accepted by IconCheckbox. The full label names the native input. */
 export type IconCheckboxProps = {
@@ -18,3 +18,26 @@ export declare const IconCheckbox: import("react").ForwardRefExoticComponent<{
     /** Compact instruments show the icon and caption without a tile or lamp. */
     appearance?: "default" | "compact";
 } & Omit<CheckboxProps, "children" | "indicator"> & import("react").RefAttributes<HTMLInputElement>>;
+/** Props accepted by CheckKey. The label names the native input. */
+export type CheckKeyProps = {
+    label: string;
+    /** A Sigil or App icon before the label; decorative. */
+    icon?: ReactNode;
+    /** One quiet line under the label, read as the input's description. */
+    hint?: ReactNode;
+} & Omit<CheckboxProps, "children" | "indicator" | "appearance">;
+/**
+ * One choice in a short multi-select, drawn as a wide Caps key: Sigil, label
+ * and an optional hint, a lit lamp and selected face when checked. The native
+ * checkbox covers the whole key, so it keeps form submission, keyboard and
+ * focus behaviour.
+ */
+export declare const CheckKey: import("react").ForwardRefExoticComponent<{
+    label: string;
+    /** A Sigil or App icon before the label; decorative. */
+    icon?: ReactNode;
+    /** One quiet line under the label, read as the input's description. */
+    hint?: ReactNode;
+} & Omit<CheckboxProps, "children" | "appearance" | "indicator"> & import("react").RefAttributes<HTMLInputElement>>;
+/** Lays out a group of CheckKeys: a wrapping grid of equal keys. */
+export declare function CheckKeys({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon-checkbox.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
 import { cn } from "../lib/cn.js";
 import { Checkbox } from "./checkbox.js";
 import { IconChoiceMark } from "./icon-choice-mark.js";
@@ -7,3 +7,20 @@ import { IconChoiceMark } from "./icon-choice-mark.js";
 export const IconCheckbox = forwardRef(function IconCheckbox({ label, icon, caption, appearance, className, ...props }, ref) {
     return (_jsx("label", { className: "caps-icon-choice", "data-appearance": appearance === "compact" ? appearance : undefined, children: _jsx(Checkbox, { ...props, appearance: appearance ?? "default", "aria-label": label, className: cn("caps-icon-choice-input", className), indicator: _jsx(IconChoiceMark, { icon: icon, caption: caption }), ref: ref }) }));
 });
+/**
+ * One choice in a short multi-select, drawn as a wide Caps key: Sigil, label
+ * and an optional hint, a lit lamp and selected face when checked. The native
+ * checkbox covers the whole key, so it keeps form submission, keyboard and
+ * focus behaviour.
+ */
+export const CheckKey = forwardRef(function CheckKey({ label, icon, hint, className, ...props }, ref) {
+    const hintId = useId();
+    const describedBy = [props["aria-describedby"], hint ? hintId : null]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    return (_jsx("label", { className: "caps-check-key", children: _jsx(Checkbox, { ...props, "aria-label": label, "aria-describedby": describedBy, className: cn("caps-check-key-input", className), indicator: _jsxs("span", { className: "caps-check-key-face", "aria-hidden": "true", children: [icon ? (_jsx("span", { className: "caps-check-key-icon", children: icon })) : null, _jsxs("span", { className: "caps-check-key-copy", children: [_jsx("span", { className: "caps-check-key-label", children: label }), hint ? (_jsx("span", { className: "caps-check-key-hint", id: hintId, children: hint })) : null] }), _jsx("span", { className: "caps-check-key-lamp" })] }), ref: ref }) }));
+});
+/** Lays out a group of CheckKeys: a wrapping grid of equal keys. */
+export function CheckKeys({ className, ...props }) {
+    return _jsx("div", { ...props, className: cn("caps-check-keys", className) });
+}

package/dist/components/icon-radio.d.ts

@@ -6,6 +6,11 @@ export type IconRadioProps = {
     icon: ReactNode;
     /** A short visible legend; it does not replace the accessible label. */
     caption?: string;
+    /**
+     * `color` keeps an off key's art in full colour, for choices whose colour
+     * is the information (a character, a palette). Icons dim by default.
+     */
+    art?: "dim" | "color";
 } & Omit<RadioGroupItemProps, "children" | "indicator">;
 /** One icon choice in a native, mutually exclusive Caps RadioGroup. */
 export declare const IconRadio: import("react").ForwardRefExoticComponent<{
@@ -13,4 +18,26 @@ export declare const IconRadio: import("react").ForwardRefExoticComponent<{
     icon: ReactNode;
     /** A short visible legend; it does not replace the accessible label. */
     caption?: string;
+    /**
+     * `color` keeps an off key's art in full colour, for choices whose colour
+     * is the information (a character, a palette). Icons dim by default.
+     */
+    art?: "dim" | "color";
+} & Omit<RadioGroupItemProps, "children" | "indicator"> & import("react").RefAttributes<HTMLInputElement>>;
+/** Props accepted by SwatchRadio. Use it inside the existing RadioGroup. */
+export type SwatchRadioProps = {
+    /** The colour's name: the accessible label and the hover title. */
+    label: string;
+    /** Any CSS colour, drawn as the key's dot. */
+    color: string;
+} & Omit<RadioGroupItemProps, "children" | "indicator">;
+/**
+ * One colour choice: a small icon key whose dot keeps its colour while off,
+ * so every choice reads before it is picked. The lamp marks the choice.
+ */
+export declare const SwatchRadio: import("react").ForwardRefExoticComponent<{
+    /** The colour's name: the accessible label and the hover title. */
+    label: string;
+    /** Any CSS colour, drawn as the key's dot. */
+    color: string;
 } & Omit<RadioGroupItemProps, "children" | "indicator"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/icon-radio.js

@@ -4,6 +4,13 @@ import { cn } from "../lib/cn.js";
 import { RadioGroupItem } from "./radio-group.js";
 import { IconChoiceMark } from "./icon-choice-mark.js";
 /** One icon choice in a native, mutually exclusive Caps RadioGroup. */
-export const IconRadio = forwardRef(function IconRadio({ label, icon, caption, className, ...props }, ref) {
-    return (_jsx("label", { className: "caps-icon-choice", children: _jsx(RadioGroupItem, { ...props, "aria-label": label, className: cn("caps-icon-choice-input", className), indicator: _jsx(IconChoiceMark, { icon: icon, caption: caption }), ref: ref }) }));
+export const IconRadio = forwardRef(function IconRadio({ label, icon, caption, art = "dim", className, ...props }, ref) {
+    return (_jsx("label", { className: "caps-icon-choice", "data-art": art === "color" ? art : undefined, children: _jsx(RadioGroupItem, { ...props, "aria-label": label, className: cn("caps-icon-choice-input", className), indicator: _jsx(IconChoiceMark, { icon: icon, caption: caption }), ref: ref }) }));
+});
+/**
+ * One colour choice: a small icon key whose dot keeps its colour while off,
+ * so every choice reads before it is picked. The lamp marks the choice.
+ */
+export const SwatchRadio = forwardRef(function SwatchRadio({ label, color, className, ...props }, ref) {
+    return (_jsx("label", { className: "caps-icon-choice", "data-art": "color", "data-swatch": "", title: label, children: _jsx(RadioGroupItem, { ...props, "aria-label": label, className: cn("caps-icon-choice-input", className), indicator: _jsx(IconChoiceMark, { icon: _jsx("span", { className: "caps-swatch-dot", style: { backgroundColor: color } }) }), ref: ref }) }));
 });

package/dist/components/keycap.d.ts

@@ -37,6 +37,11 @@ export type KeycapButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "c
     /** Extra readout after the label, such as a PixelNumber count. */
     readout?: ReactNode;
     tone?: KeycapTone;
+    /**
+     * `compact` is the details-panel key: 2.25rem high, centred `sm` label.
+     * It sizes to its legend in a row and fills its cell in a grid.
+     */
+    density?: "regular" | "compact";
     /**
      * Toggle state for mode keys. `undefined` is a momentary key; a boolean adds
      * `aria-pressed` and lights the key's indicator.
@@ -66,6 +71,11 @@ export declare const KeycapButton: import("react").ForwardRefExoticComponent<Omi
     /** Extra readout after the label, such as a PixelNumber count. */
     readout?: ReactNode;
     tone?: KeycapTone;
+    /**
+     * `compact` is the details-panel key: 2.25rem high, centred `sm` label.
+     * It sizes to its legend in a row and fills its cell in a grid.
+     */
+    density?: "regular" | "compact";
     /**
      * Toggle state for mode keys. `undefined` is a momentary key; a boolean adds
      * `aria-pressed` and lights the key's indicator.

package/dist/components/keycap.js

@@ -12,7 +12,7 @@ export const Keycap = forwardRef(function Keycap({ tone = "neutral", size = "md"
  * A chunky action key for game docks and toy panels. The host owns the action
  * and the keyboard binding; `shortcut` only labels it.
  */
-export const KeycapButton = forwardRef(function KeycapButton({ label, shortcut, icon, readout, tone = "neutral", pressed, expanded, className, type = "button", ...props }, ref) {
+export const KeycapButton = forwardRef(function KeycapButton({ label, shortcut, icon, readout, tone = "neutral", density = "regular", pressed, expanded, className, type = "button", ...props }, ref) {
     const lamp = pressed ?? expanded;
-    return (_jsxs("button", { ...props, ref: ref, type: type, className: cn("caps-keycap-button", className), "data-tone": tone, "aria-pressed": pressed, "aria-expanded": expanded, "aria-keyshortcuts": props["aria-keyshortcuts"] ?? shortcut, children: [lamp === undefined ? null : (_jsx("span", { className: "caps-keycap-led", "data-lit": lamp, "aria-hidden": "true" })), icon ? (_jsx("span", { className: "caps-keycap-button-icon", "aria-hidden": "true", children: icon })) : null, label === null ? null : (_jsx("span", { className: "caps-keycap-button-label", children: label })), readout, shortcut ? (_jsx(Keycap, { size: "sm", tone: "neutral", "aria-hidden": "true", children: shortcut })) : null] }));
+    return (_jsxs("button", { ...props, ref: ref, type: type, className: cn("caps-keycap-button", className), "data-tone": tone, "data-density": density === "compact" ? density : undefined, "aria-pressed": pressed, "aria-expanded": expanded, "aria-keyshortcuts": props["aria-keyshortcuts"] ?? shortcut, children: [lamp === undefined ? null : (_jsx("span", { className: "caps-keycap-led", "data-lit": lamp, "aria-hidden": "true" })), icon ? (_jsx("span", { className: "caps-keycap-button-icon", "aria-hidden": "true", children: icon })) : null, label === null ? null : (_jsx("span", { className: "caps-keycap-button-label", children: label })), readout, shortcut ? (_jsx(Keycap, { size: "sm", tone: "neutral", "aria-hidden": "true", children: shortcut })) : null] }));
 });

package/dist/form-fields.js

@@ -8,7 +8,7 @@ import { UploadQueue } from "./blocks/upload-queue.js";
 import { Checkbox } from "./components/checkbox.js";
 import { Combobox, ComboboxTrigger } from "./components/combobox.js";
 import { Field, FieldSet, FormSection, NumberField, } from "./components/field.js";
-import { IconCheckbox } from "./components/icon-checkbox.js";
+import { CheckKey, CheckKeys, IconCheckbox, } from "./components/icon-checkbox.js";
 import { IconRadio } from "./components/icon-radio.js";
 import { Input } from "./components/input.js";
 import { InputGroup, InputGroupAddon } from "./components/input-group.js";
@@ -169,16 +169,18 @@ function SpecGroup({ spec, field, locked, error, layout, }) {
                 ? [...selected, value]
                 : selected.filter((current) => current !== value));
         };
-        return (_jsx(FieldSet, { legend: legend, layout: layout, ...(layout === "columns" ? { legendTitle: legend } : {}), description: spec.help, disabled: disabled, error: error ?? null, children: spec.kind === "icon-checkboxes" ? (_jsx("div", { className: "caps-field-icon-choices", children: spec.options.map((option) => (_jsx(IconCheckbox, { name: spec.name, value: option.value, label: option.label, ...(option.caption === undefined
+        return (_jsx(FieldSet, { legend: legend, icon: spec.icon, layout: layout, ...(layout === "columns" ? { legendTitle: legend } : {}), description: spec.help, disabled: disabled, error: error ?? null, children: spec.kind === "icon-checkboxes" ? (_jsx("div", { className: "caps-field-icon-choices", children: spec.options.map((option) => (_jsx(IconCheckbox, { name: spec.name, value: option.value, label: option.label, ...(option.caption === undefined
                         ? {}
                         : { caption: option.caption }), icon: option.icon, disabled: option.disabled, checked: selected.includes(option.value), onBlur: field.handleBlur, onChange: (event) => {
                         toggle(option.value, event.currentTarget.checked);
-                    } }, option.value))) })) : (spec.options.map((option) => (_jsx(Field, { label: option.label, description: option.description, orientation: "inline", children: _jsx(Checkbox, { name: spec.name, value: option.value, disabled: option.disabled, checked: selected.includes(option.value), onBlur: field.handleBlur, onChange: (event) => {
+                    } }, option.value))) })) : (
+            // A short multi-select reads as one row of check keys.
+            _jsx(CheckKeys, { children: spec.options.map((option) => (_jsx(CheckKey, { name: spec.name, value: option.value, label: option.label, icon: option.icon, hint: option.description, disabled: option.disabled, checked: selected.includes(option.value), onBlur: field.handleBlur, onChange: (event) => {
                         toggle(option.value, event.currentTarget.checked);
-                    } }) }, option.value)))) }));
+                    } }, option.value))) })) }));
     }
     const cards = spec.options.some((option) => option.description !== undefined || option.meta !== undefined);
-    return (_jsx(FieldSet, { legend: legend, layout: layout, ...(layout === "columns" ? { legendTitle: legend } : {}), description: spec.help, disabled: disabled, error: error ?? null, children: _jsx(RadioGroup, { name: spec.name, "aria-label": legend, value: text(field), onValueChange: (next) => {
+    return (_jsx(FieldSet, { legend: legend, icon: spec.icon, layout: layout, ...(layout === "columns" ? { legendTitle: legend } : {}), description: spec.help, disabled: disabled, error: error ?? null, children: _jsx(RadioGroup, { name: spec.name, "aria-label": legend, value: text(field), onValueChange: (next) => {
                 field.handleChange(next);
                 field.handleBlur();
             }, 

package/dist/styles.css

@@ -12905,6 +12905,19 @@
   .list-row > .caps-field {
     grid-column: 1 / -1;
   }
+  .list.list-sm > .list-row > .caps-field {
+    --caps-field-icon-size: 1rem;
+  }
+  .list.list-sm > .list-row > .caps-field .caps-field-lead {
+    align-items: flex-start;
+    gap: var(--spacing-xs);
+  }
+  .list.list-sm > .list-row > .caps-field .caps-field-icon {
+    height: calc(var(--caps-control-label-size, var(--text-sm)) * 1.5);
+  }
+  .list.list-sm > .list-row > .caps-field:has(> .caps-field-row > .caps-field-lead) > .caps-field-error-reveal {
+    padding-inline-start: calc(var(--caps-field-icon-size) + var(--spacing-xs));
+  }
   .caps-field:has(> .caps-field-row > .caps-field-lead) > .caps-field-error-reveal {
     padding-inline-start: calc(var(--caps-field-icon-size) + var(--spacing-sm));
   }
@@ -12939,6 +12952,15 @@
     line-height: 1.5;
     color: var(--color-base-content);
   }
+  .caps-fieldset-legend:has(> .caps-field-icon) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+  .caps-fieldset-legend > .caps-field-icon {
+    width: 1rem;
+    height: 1rem;
+  }
   .caps-fieldset-description {
     margin: 0;
     font-size: var(--text-xs);
@@ -13056,7 +13078,7 @@
     padding-bottom: var(--spacing-sm);
   }
   :is(.caps-form, .caps-form-section, .caps-fieldset)[data-layout="columns"] {
-    --caps-form-label-col: 9rem;
+    --caps-form-label-col: 7rem;
   }
   .caps-form[data-layout="columns"] :is(.caps-form-body, .caps-form-section-fields) {
     gap: var(--spacing-sm);
@@ -13135,6 +13157,13 @@
     grid-column: 1;
     grid-row: 1;
     margin: 0;
+    float: left;
+    align-self: start;
+    min-height: var(--caps-fieldset-legend-line, 2.25rem);
+    align-content: center;
+  }
+  .caps-fieldset[data-layout="columns"]:has( .caps-icon-choice:not([data-swatch]) ) {
+    --caps-fieldset-legend-line: 3.25rem;
   }
   .caps-fieldset[data-layout="columns"] > .caps-fieldset-fields {
     grid-column: 2;
@@ -13142,6 +13171,7 @@
     flex-direction: row;
     flex-wrap: wrap;
     margin: 0;
+    max-width: 30rem;
   }
   .caps-fieldset[data-layout="columns"] > :is(.caps-fieldset-description, .caps-field-error-reveal) {
     grid-column: 2;
@@ -13162,7 +13192,38 @@
       max-width: none;
     }
   }
-  @container (max-width: 20rem) {
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-lead {
+    display: contents;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-lead > .caps-field-copy {
+    display: contents;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-lead > .caps-field-icon {
+    grid-column: 1;
+    grid-row: 1;
+    justify-self: start;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-lead > .caps-field-copy > label {
+    grid-column: 1;
+    grid-row: 1;
+    min-width: 0;
+    padding-inline-start: calc(var(--caps-field-icon-size) + var(--spacing-xs));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-lead > .caps-field-copy > .caps-field-description {
+    grid-column: 2;
+    grid-row: 2;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field, .caps-fieldset[data-layout="columns"] {
+    --caps-field-icon-size: 1rem;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field :is(.caps-field-copy > label, .caps-field-icon), .caps-fieldset[data-layout="columns"] > .caps-fieldset-legend {
+    color: var(--stipe-fg-muted);
+    font-weight: 400;
+  }
+  @container (max-width: 24rem) {
     :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ), .caps-fieldset[data-layout="columns"] {
       grid-template-columns: minmax(0, 1fr);
     }
@@ -13179,11 +13240,16 @@
       overflow: visible;
       text-overflow: clip;
       white-space: normal;
+      min-height: 0;
     }
     :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field[data-orientation="horizontal"] > .caps-field-error-reveal, .caps-form[data-layout="columns"] .caps-form-footer {
       padding-inline-start: 0;
       max-width: none;
     }
+    :is(.caps-form, .caps-form-section)[data-layout="columns"] :is( .caps-field[data-orientation="vertical"], .caps-field[data-orientation="horizontal"] > .caps-field-row ) > .caps-field-lead > .caps-field-copy > .caps-field-description {
+      grid-column: 1;
+      grid-row: 3;
+    }
   }
   .caps-choice-card {
     display: flex;
@@ -14461,6 +14527,121 @@
   .caps-icon-choice[data-appearance="compact"] .caps-icon-choice-lamp {
     display: none;
   }
+  .caps-icon-choice[data-swatch] {
+    min-width: 2.25rem;
+    min-height: 2.25rem;
+  }
+  .caps-icon-choice[data-swatch] .caps-icon-choice-mark {
+    padding: var(--spacing-xs);
+  }
+  .caps-icon-choice[data-art="color"] .caps-icon-choice-art {
+    filter: none;
+    opacity: 1;
+  }
+  .caps-icon-choice[data-swatch] .caps-icon-choice-art {
+    width: 1rem;
+    height: 1rem;
+  }
+  .caps-swatch-dot {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--radius-full);
+    outline: var(--border) solid var(--color-base-content);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline: var(--border) solid color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    }
+    outline-offset: -1px;
+  }
+  .caps-check-keys {
+    flex: 1 1 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
+    gap: var(--spacing-xs);
+    min-width: 0;
+  }
+  .caps-check-keys:has(> :nth-child(7)) {
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
+  }
+  .caps-check-key {
+    display: grid;
+    min-width: 0;
+    cursor: pointer;
+  }
+  .caps-check-key > .caps-checkbox {
+    min-height: 2.25rem;
+  }
+  .caps-check-key-face {
+    grid-area: control;
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
+    min-width: 0;
+    padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-sm);
+    border: var(--border) solid var(--caps-control-line, var(--color-base-300));
+    border-radius: var(--radius-field);
+    background: var(--caps-control-face, var(--color-base-100));
+    color: var(--caps-control-dim, var(--stipe-fg-muted));
+    pointer-events: none;
+    transition: border-color var(--stipe-motion-fast) var(--stipe-motion-ease), background-color var(--stipe-motion-fast) var(--stipe-motion-ease);
+  }
+  .caps-check-key-icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    width: 1rem;
+    height: calc(var(--text-sm) * 1.5);
+    filter: var(--caps-control-icon-off, grayscale(1) contrast(0));
+    opacity: 0.55;
+  }
+  .caps-check-key-icon > :is(svg, img) {
+    width: 1rem;
+    height: 1rem;
+  }
+  .caps-check-key-copy {
+    display: grid;
+    min-width: 0;
+  }
+  .caps-check-key-label {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    line-height: 1.5;
+    overflow-wrap: break-word;
+  }
+  .caps-check-key-hint {
+    font-size: var(--text-xs);
+    line-height: 1.4;
+    color: var(--stipe-fg-muted);
+  }
+  .caps-check-key-lamp {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 4px;
+    height: 4px;
+    border-radius: var(--radius-full);
+    background: currentcolor;
+    opacity: 0;
+  }
+  .caps-check-key-input:checked + .caps-check-key-face {
+    border-color: var(--caps-control-selected-line, var(--color-base-content));
+    background: var(--caps-control-selected-face, var(--color-base-200));
+    color: var(--caps-control-ink, var(--color-base-content));
+  }
+  .caps-check-key-input:checked + .caps-check-key-face .caps-check-key-icon {
+    filter: none;
+    opacity: 1;
+  }
+  .caps-check-key-input:checked + .caps-check-key-face .caps-check-key-lamp {
+    opacity: 1;
+  }
+  .caps-check-key-input:hover:not(:checked, :disabled) + .caps-check-key-face .caps-check-key-icon {
+    opacity: 0.8;
+  }
+  .caps-check-key:has(.caps-check-key-input:disabled) {
+    cursor: not-allowed;
+  }
   .caps-icon-choice:has(.caps-icon-choice-input:disabled) {
     cursor: not-allowed;
   }
@@ -15371,6 +15552,35 @@
     font-size: var(--text-xs);
     font-variant-numeric: tabular-nums;
   }
+  .list-row.caps-fact {
+    --list-grid-cols: 6.5rem minmax(0, 1fr);
+    align-items: start;
+    gap: var(--spacing-sm);
+  }
+  .list-row.caps-fact::after {
+    inset-inline: 0;
+  }
+  .caps-fact-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    min-height: 1lh;
+    color: var(--stipe-fg-muted);
+  }
+  .caps-fact-icon {
+    display: inline-flex;
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+  }
+  .caps-fact-icon > :is(svg, img) {
+    width: 100%;
+    height: 100%;
+  }
+  .caps-fact-value {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
   .list.list-sm > .list-row {
     gap: var(--spacing-sm);
     padding: var(--spacing-2xs) 0;
@@ -16150,6 +16360,18 @@
   .caps-game-meter .progress {
     height: 0.625rem;
   }
+  .caps-keycap-button[data-density="compact"] {
+    --caps-keycap-height: 2.25rem;
+    --caps-keycap-width: auto;
+    --caps-keycap-justify: center;
+    --caps-keycap-font-size: var(--text-sm);
+    --caps-keycap-font-weight: 600;
+  }
+  @media (max-width: 640px), (any-pointer: coarse) {
+    .caps-keycap-button[data-density="compact"] {
+      --caps-keycap-height: var(--caps-touch-target);
+    }
+  }
   .caps-keycap-button {
     --caps-key-face: var(--caps-keycap-face, var(--color-base-200));
     --caps-keycap-rest-shadow: inset 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.18)),
@@ -18149,6 +18371,19 @@
       place-self: center stretch;
       height: max(100%, var(--caps-touch-target));
     }
+    .caps-switch-input, .caps-icon-choice[data-swatch] .caps-icon-choice-input {
+      place-self: center;
+      width: max(100%, var(--caps-touch-target));
+    }
+    .caps-check-key > .caps-checkbox {
+      min-height: var(--caps-touch-target);
+    }
+    .caps-check-key .caps-check-key-face {
+      align-items: center;
+    }
+    .caps-icon-choice[data-swatch] .caps-icon-choice-input {
+      height: max(100%, var(--caps-touch-target));
+    }
     .caps-icon-button::after {
       content: "";
       position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fungi.computer/caps",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "author": "Levi <levi@technomancy.dev>",
   "description": "Product-neutral React primitives and blocks for Fungi interfaces",
   "type": "module",
@@ -493,7 +493,7 @@
     "typescript": "5.9.3",
     "vite": "8.2.2",
     "vitest": "4.1.11",
-    "@fungi.computer/sigils": "0.2.1",
+    "@fungi.computer/sigils": "0.3.0",
     "postcss-value-parser": "4.2.0",
     "@tanstack/react-form": "1.33.2",
     "effect": "4.0.2",
@@ -579,7 +579,7 @@
     "registry:stranger": "node scripts/registry-stranger.mjs",
     "workbench:serve": "node scripts/workbench-serve.mjs",
     "workbench:build": "node scripts/workbench-build.mjs",
-    "workbench:contract": "node scripts/workbench-contract.mjs",
+    "workbench:contract": "bash ../../tooling/proof-runner/owned-loopback.sh -- node scripts/workbench-contract.mjs",
     "docs": "tsx ../../tooling/repository/src/docs/cli.ts check --root ../..",
     "docs:write": "tsx ../../tooling/repository/src/docs/cli.ts write --root ../..",
     "pack": "mkdir -p ../../.botanical/caps-pack && pnpm pack --pack-destination ../../.botanical/caps-pack",
@@ -588,10 +588,7 @@
     "format:check": "node ../../tooling/repository/scripts/format-package-check.mjs",
     "lint:anti-slop": "node ../../tooling/repository/scripts/lint-package-anti-slop.mjs",
     "build:workbench": "node scripts/workbench-build.mjs --prepared",
-    "test:nightly": "node --import tsx ../../tooling/repository/scripts/workbench-proofs.mjs --output ../../.botanical/caps-workbench --origin-env CAPS_WORKBENCH_URL test/screen-theme.browser.mjs test/scroll-area.browser.mjs test/display-density.browser.mjs test/resize-handle.browser.mjs test/dialog-fill.browser.mjs && node test/scroll-gutter.browser.mjs",
-    "test:code-input": "node --import tsx ../../tooling/repository/scripts/workbench-proofs.mjs --output ../../.botanical/caps-code-input --origin-env CAPS_WORKBENCH_URL test/code-input.browser.mjs",
-    "test:icon-choice": "node --import tsx ../../tooling/repository/scripts/workbench-proofs.mjs --output ../../.botanical/caps-icon-choice --origin-env CAPS_WORKBENCH_URL test/icon-choice.browser.mjs",
-    "test:choice-label-alignment": "node --import tsx ../../tooling/repository/scripts/workbench-proofs.mjs --output ../../.botanical/caps-choice-alignment --origin-env CAPS_WORKBENCH_URL test/choice-label-alignment.browser.mjs",
+    "test:nightly": "node --import tsx ../../tooling/repository/scripts/workbench-proofs.mjs --output ../../.botanical/caps-workbench --origin-env CAPS_WORKBENCH_URL test/screen-theme.browser.mjs test/scroll-area.browser.mjs test/display-density.browser.mjs test/resize-handle.browser.mjs test/dialog-fill.browser.mjs test/app-bar-edge.browser.mjs test/overlay-layers.browser.mjs test/code-input.browser.mjs test/icon-choice.browser.mjs test/choice-label-alignment.browser.mjs && node test/scroll-gutter.browser.mjs && node test/card-theme.browser.mjs && node test/game-theme.browser.mjs && node test/disabled-filled.browser.mjs && node test/window-theme.browser.mjs",
     "lint:motion": "node --test scripts/motion-token-guard.test.mjs && node scripts/motion-token-guard.mjs",
     "test:card-theme": "node test/card-theme.browser.mjs",
     "test:window-theme": "node test/window-theme.browser.mjs",

package/src/styles.css

@@ -4490,6 +4490,25 @@
   .list-row > .caps-field {
     grid-column: 1 / -1;
   }
+  /* In a compact list a settings row's icon is a 16px Sigil beside its
+     label, the details-panel marker, not a tile. */
+  .list.list-sm > .list-row > .caps-field {
+    --caps-field-icon-size: 1rem;
+  }
+  .list.list-sm > .list-row > .caps-field .caps-field-lead {
+    align-items: flex-start;
+    gap: var(--spacing-xs);
+  }
+  /* The marker sits on the label's line, as in a details panel. */
+  .list.list-sm > .list-row > .caps-field .caps-field-icon {
+    height: calc(var(--caps-control-label-size, var(--text-sm)) * 1.5);
+  }
+  .list.list-sm
+    > .list-row
+    > .caps-field:has(> .caps-field-row > .caps-field-lead)
+    > .caps-field-error-reveal {
+    padding-inline-start: calc(var(--caps-field-icon-size) + var(--spacing-xs));
+  }
   /* An icon row's error lines up with its label, not its icon. */
   .caps-field:has(> .caps-field-row > .caps-field-lead)
     > .caps-field-error-reveal {
@@ -4530,6 +4549,17 @@
     line-height: 1.5;
     color: var(--color-base-content);
   }
+  /* A legend's icon is the inline 16px marker a details panel puts before
+     its labels. */
+  .caps-fieldset-legend:has(> .caps-field-icon) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+  .caps-fieldset-legend > .caps-field-icon {
+    width: 1rem;
+    height: 1rem;
+  }
   .caps-fieldset-description {
     margin: 0;
     font-size: var(--text-xs);
@@ -4658,7 +4688,7 @@
   /* The label gutter belongs to an opted-in form. No default Field or Form
      changes geometry, including the signed-off permissions panel. */
   :is(.caps-form, .caps-form-section, .caps-fieldset)[data-layout="columns"] {
-    --caps-form-label-col: 9rem;
+    --caps-form-label-col: 7rem;
   }
   .caps-form[data-layout="columns"]
     :is(.caps-form-body, .caps-form-section-fields) {
@@ -4791,6 +4821,19 @@
     grid-column: 1;
     grid-row: 1;
     margin: 0;
+    /* A floated legend is an ordinary grid item rather than the fieldset's
+       rendered legend, so it shares a row with its keys. It centres on the
+       first line of keys, as a field's label centres on its control, and
+       stays on that line when the keys wrap. */
+    float: left;
+    align-self: start;
+    min-height: var(--caps-fieldset-legend-line, 2.25rem);
+    align-content: center;
+  }
+  .caps-fieldset[data-layout="columns"]:has(
+      .caps-icon-choice:not([data-swatch])
+    ) {
+    --caps-fieldset-legend-line: 3.25rem;
   }
   .caps-fieldset[data-layout="columns"] > .caps-fieldset-fields {
     grid-column: 2;
@@ -4798,6 +4841,8 @@
     flex-direction: row;
     flex-wrap: wrap;
     margin: 0;
+    /* Choices share the value column's measure with the form's controls. */
+    max-width: 30rem;
   }
   .caps-fieldset[data-layout="columns"]
     > :is(.caps-fieldset-description, .caps-field-error-reveal) {
@@ -4823,9 +4868,78 @@
       max-width: none;
     }
   }
-  /* Decide once per form: the 30rem example still has space for a 9rem label
-     and its control, while genuinely narrow phone forms stack every field. */
-  @container (max-width: 20rem) {
+  /* The label column reads like a details panel's fact column: a 16px Sigil
+     before a quiet label, the value beside it. The icon shares the label's
+     cell; the description and error stay under the control. */
+  :is(.caps-form, .caps-form-section)[data-layout="columns"]
+    :is(
+      .caps-field[data-orientation="vertical"],
+      .caps-field[data-orientation="horizontal"] > .caps-field-row
+    )
+    > .caps-field-lead {
+    display: contents;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"]
+    :is(
+      .caps-field[data-orientation="vertical"],
+      .caps-field[data-orientation="horizontal"] > .caps-field-row
+    )
+    > .caps-field-lead
+    > .caps-field-copy {
+    display: contents;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"]
+    :is(
+      .caps-field[data-orientation="vertical"],
+      .caps-field[data-orientation="horizontal"] > .caps-field-row
+    )
+    > .caps-field-lead
+    > .caps-field-icon {
+    grid-column: 1;
+    grid-row: 1;
+    justify-self: start;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"]
+    :is(
+      .caps-field[data-orientation="vertical"],
+      .caps-field[data-orientation="horizontal"] > .caps-field-row
+    )
+    > .caps-field-lead
+    > .caps-field-copy
+    > label {
+    grid-column: 1;
+    grid-row: 1;
+    min-width: 0;
+    padding-inline-start: calc(var(--caps-field-icon-size) + var(--spacing-xs));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"]
+    :is(
+      .caps-field[data-orientation="vertical"],
+      .caps-field[data-orientation="horizontal"] > .caps-field-row
+    )
+    > .caps-field-lead
+    > .caps-field-copy
+    > .caps-field-description {
+    grid-column: 2;
+    grid-row: 2;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"] .caps-field,
+  .caps-fieldset[data-layout="columns"] {
+    --caps-field-icon-size: 1rem;
+  }
+  :is(.caps-form, .caps-form-section)[data-layout="columns"]
+    .caps-field
+    :is(.caps-field-copy > label, .caps-field-icon),
+  .caps-fieldset[data-layout="columns"] > .caps-fieldset-legend {
+    color: var(--stipe-fg-muted);
+    font-weight: 400;
+  }
+  /* Phone-width containers stack every field: label (with its Sigil) above
+     the control, description and error under it. */
+  @container (max-width: 24rem) {
     :is(.caps-form, .caps-form-section)[data-layout="columns"]
       :is(
         .caps-field[data-orientation="vertical"],
@@ -4871,6 +4985,8 @@
       overflow: visible;
       text-overflow: clip;
       white-space: normal;
+      /* Stacked, the legend sits on its own line above the keys. */
+      min-height: 0;
     }
     :is(.caps-form, .caps-form-section)[data-layout="columns"]
       .caps-field[data-orientation="horizontal"]
@@ -4879,6 +4995,17 @@
       padding-inline-start: 0;
       max-width: none;
     }
+    :is(.caps-form, .caps-form-section)[data-layout="columns"]
+      :is(
+        .caps-field[data-orientation="vertical"],
+        .caps-field[data-orientation="horizontal"] > .caps-field-row
+      )
+      > .caps-field-lead
+      > .caps-field-copy
+      > .caps-field-description {
+      grid-column: 1;
+      grid-row: 3;
+    }
   }
 
   /* Choice cards: a RadioGroup option with room for a description and a
@@ -6432,6 +6559,131 @@
   .caps-icon-choice[data-appearance="compact"] .caps-icon-choice-lamp {
     display: none;
   }
+  /* SwatchRadio: a 2.25rem icon key whose colour dot stays lit, so each
+     colour reads before it is chosen; the lamp marks the choice. */
+  .caps-icon-choice[data-swatch] {
+    min-width: 2.25rem;
+    min-height: 2.25rem;
+  }
+  .caps-icon-choice[data-swatch] .caps-icon-choice-mark {
+    padding: var(--spacing-xs);
+  }
+  .caps-icon-choice[data-art="color"] .caps-icon-choice-art {
+    filter: none;
+    opacity: 1;
+  }
+  .caps-icon-choice[data-swatch] .caps-icon-choice-art {
+    width: 1rem;
+    height: 1rem;
+  }
+  .caps-swatch-dot {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--radius-full);
+    outline: var(--border) solid
+      color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    outline-offset: -1px;
+  }
+  /* CheckKey: a short multi-select as wide icon keys. The same face, line,
+     selected face and lamp as an icon key; Sigil, label and hint read like
+     a details-panel row. The checkbox's own focus ring and disabled ink
+     apply to the whole key. */
+  .caps-check-keys {
+    flex: 1 1 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
+    gap: var(--spacing-xs);
+    min-width: 0;
+  }
+  /* A long list reads two to a row, so longer names keep whole words. */
+  .caps-check-keys:has(> :nth-child(7)) {
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
+  }
+  .caps-check-key {
+    display: grid;
+    min-width: 0;
+    cursor: pointer;
+  }
+  .caps-check-key > .caps-checkbox {
+    min-height: 2.25rem;
+  }
+  .caps-check-key-face {
+    grid-area: control;
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
+    min-width: 0;
+    padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs)
+      var(--spacing-sm);
+    border: var(--border) solid var(--caps-control-line, var(--color-base-300));
+    border-radius: var(--radius-field);
+    background: var(--caps-control-face, var(--color-base-100));
+    color: var(--caps-control-dim, var(--stipe-fg-muted));
+    pointer-events: none;
+    transition:
+      border-color var(--stipe-motion-fast) var(--stipe-motion-ease),
+      background-color var(--stipe-motion-fast) var(--stipe-motion-ease);
+  }
+  .caps-check-key-icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    width: 1rem;
+    height: calc(var(--text-sm) * 1.5);
+    filter: var(--caps-control-icon-off, grayscale(1) contrast(0));
+    opacity: 0.55;
+  }
+  .caps-check-key-icon > :is(svg, img) {
+    width: 1rem;
+    height: 1rem;
+  }
+  .caps-check-key-copy {
+    display: grid;
+    min-width: 0;
+  }
+  .caps-check-key-label {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    line-height: 1.5;
+    overflow-wrap: break-word;
+  }
+  .caps-check-key-hint {
+    font-size: var(--text-xs);
+    line-height: 1.4;
+    color: var(--stipe-fg-muted);
+  }
+  .caps-check-key-lamp {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 4px;
+    height: 4px;
+    border-radius: var(--radius-full);
+    background: currentcolor;
+    opacity: 0;
+  }
+  .caps-check-key-input:checked + .caps-check-key-face {
+    border-color: var(--caps-control-selected-line, var(--color-base-content));
+    background: var(--caps-control-selected-face, var(--color-base-200));
+    color: var(--caps-control-ink, var(--color-base-content));
+  }
+  .caps-check-key-input:checked + .caps-check-key-face .caps-check-key-icon {
+    filter: none;
+    opacity: 1;
+  }
+  .caps-check-key-input:checked + .caps-check-key-face .caps-check-key-lamp {
+    opacity: 1;
+  }
+  .caps-check-key-input:hover:not(:checked, :disabled)
+    + .caps-check-key-face
+    .caps-check-key-icon {
+    opacity: 0.8;
+  }
+  .caps-check-key:has(.caps-check-key-input:disabled) {
+    cursor: not-allowed;
+  }
   .caps-icon-choice:has(.caps-icon-choice-input:disabled) {
     cursor: not-allowed;
   }
@@ -7483,6 +7735,37 @@
     font-size: var(--text-xs);
     font-variant-numeric: tabular-nums;
   }
+  /* FactRow: a details-panel fact. A fixed label column (16px Sigil and a
+     quiet name) beside a wrapping value; the row rule spans both. */
+  .list-row.caps-fact {
+    --list-grid-cols: 6.5rem minmax(0, 1fr);
+    align-items: start;
+    gap: var(--spacing-sm);
+  }
+  .list-row.caps-fact::after {
+    inset-inline: 0;
+  }
+  .caps-fact-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    min-height: 1lh;
+    color: var(--stipe-fg-muted);
+  }
+  .caps-fact-icon {
+    display: inline-flex;
+    flex: none;
+    width: 1rem;
+    height: 1rem;
+  }
+  .caps-fact-icon > :is(svg, img) {
+    width: 100%;
+    height: 100%;
+  }
+  .caps-fact-value {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
   /* DataList density="compact": rows whose content brings its own inset
      (an ActionRow) sit flush with the list's edge, one control high. */
   .list.list-sm > .list-row {
@@ -8368,6 +8651,21 @@
   .caps-game-meter .progress {
     height: 0.625rem;
   }
+  /* KeycapButton density="compact": the details-panel key. A row of them
+     sizes each key to its legend; a grid still stretches them to its cells. */
+  .caps-keycap-button[data-density="compact"] {
+    --caps-keycap-height: 2.25rem;
+    --caps-keycap-width: auto;
+    --caps-keycap-justify: center;
+    --caps-keycap-font-size: var(--text-sm);
+    --caps-keycap-font-weight: 600;
+  }
+  /* On phones and touch screens the compact key keeps a thumb-sized height. */
+  @media (max-width: 640px), (any-pointer: coarse) {
+    .caps-keycap-button[data-density="compact"] {
+      --caps-keycap-height: var(--caps-touch-target);
+    }
+  }
   /* A key: today's flat key on a 1px lip, a touch richer. The face carries a
      faint ±3% grade, the top edge is 0.18, a small soft drop sits under the
      lip, and the linework edge is softened 20% toward the face. It reads its
@@ -10508,6 +10806,23 @@
       place-self: center stretch;
       height: max(100%, var(--caps-touch-target));
     }
+    /* A switch or a colour key is its own target, not beside a label, so its
+       hit area reaches the touch width too; the visual keeps its size and
+       the extra reach spills evenly into the gap around it. */
+    .caps-switch-input,
+    .caps-icon-choice[data-swatch] .caps-icon-choice-input {
+      place-self: center;
+      width: max(100%, var(--caps-touch-target));
+    }
+    .caps-check-key > .caps-checkbox {
+      min-height: var(--caps-touch-target);
+    }
+    .caps-check-key .caps-check-key-face {
+      align-items: center;
+    }
+    .caps-icon-choice[data-swatch] .caps-icon-choice-input {
+      height: max(100%, var(--caps-touch-target));
+    }
     /* An icon button keeps its grid size and face; an invisible hit area
        centred on it reaches the touch target instead. */
     .caps-icon-button::after {