@hanzo/ui 8.27.91 → 8.28.0

package/dist/backends/gui/stack-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack-icon.js","sourceRoot":"","sources":["../../../src/backends/gui/stack-icon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;GAMG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAO7B,MAAM,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,EAAkB;IACvE,OAAO,CACL,MAAC,MAAM,OAAK,IAAI,CAAC,YAAY,CAAC,uBAAc,QAAQ,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,KAAK,KAAK,aACxI,IAAI,EACL,KAAC,MAAM,IAAC,QAAQ,EAAC,UAAU,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,YACnC,WAAW,GACL,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/backends/gui/status.cjs

@@ -1,6 +1,7 @@
 'use client';"use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.STATUS_HUE = void 0;
 exports.Status = Status;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
@@ -11,10 +12,34 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * context, so a variant reaches both without either reading it twice by hand.
  * The dot is on by default (it is the whole point of a status pill) and can be
  * turned off for a plain label.
+ *
+ * `color` draws the record status instead (re-expressed from twenty-ui's
+ * Status, MIT, see NOTICE): any of the thirty data hues, its step 3 under step
+ * 11 ink, a 4px dot in the ink, 20px tall, 13px regular, and a `loading` state
+ * that busies the pill. The semantic names stay as aliases onto hues — success
+ * green, warning orange, error red, info blue, default and gray gray — so one
+ * status map serves both looks.
  */
 const gui_1 = require("@hanzo/gui");
+const hue_1 = require("./hue.cjs");
+const feedback_1 = require("./feedback.cjs");
 const ink_1 = require("./ink.cjs");
 const slot_1 = require("./slot.cjs");
+/**
+ * Status's names onto data hues, read from the one status map (feedback.ts
+ * `STATUS_COLOR`), so a success pill, a success banner and a success toast
+ * cannot name different colours. The pill draws the hue's tag pair (data
+ * steps 3/11); the strip and the toast draw the state token — the same colour
+ * by name, each in its own material.
+ */
+exports.STATUS_HUE = {
+    default: feedback_1.STATUS_COLOR.neutral,
+    gray: feedback_1.STATUS_COLOR.neutral,
+    success: feedback_1.STATUS_COLOR.success,
+    warning: feedback_1.STATUS_COLOR.warning,
+    error: feedback_1.STATUS_COLOR.error,
+    info: feedback_1.STATUS_COLOR.info,
+};
 const StatusContext = /* @__PURE__ */ (0, gui_1.createStyledContext)({
     variant: 'default',
 });
@@ -73,7 +98,19 @@ const StatusDot = (0, gui_1.styled)(gui_1.XStack, {
         },
     },
 });
-function Status({ variant = 'default', dot = true, children, ...props }) {
+function Status({ variant = 'default', color, loading = false, weight = 'regular', dot = true, children, ...props }) {
+    if (color != null)
+        return (0, jsx_runtime_1.jsx)(Hued, { color: color, loading: loading, weight: weight, dot: dot, ...props, children: children });
     const resolved = variant ?? 'default';
     return ((0, jsx_runtime_1.jsxs)(StatusFrame, { ...(0, slot_1.slot)('status'), variant: resolved, "data-variant": resolved, ...props, children: [dot ? (0, jsx_runtime_1.jsx)(StatusDot, { ...(0, slot_1.slot)('status-dot') }) : null, (0, ink_1.ink)(children, StatusText)] }));
 }
+function Hued({ color, loading, weight, dot, children, style, ...props }) {
+    const hue = color in exports.STATUS_HUE ? exports.STATUS_HUE[color] : (0, hue_1.hueOr)(color);
+    const { style: hueStyle, tone } = (0, hue_1.useTone)(hue, [3, 11]);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('status'), "data-color": hue, ...(loading ? { 'aria-busy': true } : null), display: "inline-flex", self: "flex-start", items: "center", gap: "$1", height: 20, pl: "$2", pr: loading ? '$1' : '$2', rounded: "$10", bg: tone(3), maxW: "100%", overflow: "hidden", style: { ...hueStyle, ...style }, ...props, children: [dot ? (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('status-dot'), width: 4, height: 4, rounded: "$10", bg: tone(11), shrink: 0 }) : null, (0, ink_1.ink)(children, gui_1.SizableText, {
+                size: '$2',
+                color: tone(11),
+                numberOfLines: 1,
+                ...(weight === 'medium' ? { fontWeight: '500' } : null),
+            }), loading ? (0, jsx_runtime_1.jsx)(gui_1.Spinner, { size: "small", maxW: 12, maxH: 12, color: tone(11) }) : null] }));
+}

package/dist/backends/gui/status.d.ts

@@ -1,15 +1,29 @@
 import type { ComponentProps } from 'react';
+import { type DataHue } from './hue.js';
+/**
+ * Status's names onto data hues, read from the one status map (feedback.ts
+ * `STATUS_COLOR`), so a success pill, a success banner and a success toast
+ * cannot name different colours. The pill draws the hue's tag pair (data
+ * steps 3/11); the strip and the toast draw the state token — the same colour
+ * by name, each in its own material.
+ */
+export declare const STATUS_HUE: Record<StatusVariant, DataHue>;
 export type StatusVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'gray';
 declare const StatusFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, any, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
     elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
     fullscreen?: boolean | undefined;
     variant?: "default" | "error" | "gray" | "info" | "success" | "warning" | undefined;
 }, import("@hanzogui/web").StaticConfigPublic>;
-export type StatusProps = Omit<ComponentProps<typeof StatusFrame>, 'variant'> & {
+export type StatusProps = Omit<ComponentProps<typeof StatusFrame>, 'variant' | 'color'> & {
     variant?: StatusVariant | null;
+    /** A data hue or a semantic name: the record status look. */
+    color?: DataHue | StatusVariant | (string & {});
+    /** Busy: a spinner after the label, `aria-busy` on the pill. */
+    loading?: boolean;
+    weight?: 'regular' | 'medium';
     /** Show the leading dot. Defaults to true — the dot is the point of a status pill. */
     dot?: boolean;
 };
-export declare function Status({ variant, dot, children, ...props }: StatusProps): import("react").JSX.Element;
+export declare function Status({ variant, color, loading, weight, dot, children, ...props }: StatusProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=status.d.ts.map

package/dist/backends/gui/status.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/status.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAMzF,QAAA,MAAM,WAAW;;;;8CAuBf,CAAA;AAuCF,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,SAAS,CAAC,GAAG;IAC9E,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAC9B,sFAAsF;IACtF,GAAG,CAAC,EAAE,OAAO,CAAA;CACd,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAmB,EAAE,GAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAS1F"}
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/status.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAkB,KAAK,OAAO,EAAE,MAAM,OAAO,CAAA;AAKpD;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,OAAO,CAOrD,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;AAMzF,QAAA,MAAM,WAAW;;;;8CAuBf,CAAA;AAuCF,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC,GAAG;IACxF,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IAC9B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IAC/C,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC7B,sFAAsF;IACtF,GAAG,CAAC,EAAE,OAAO,CAAA;CACd,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAmB,EAAE,KAAK,EAAE,OAAe,EAAE,MAAkB,EAAE,GAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAUtI"}

package/dist/backends/gui/status.js

@@ -8,10 +8,34 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * context, so a variant reaches both without either reading it twice by hand.
  * The dot is on by default (it is the whole point of a status pill) and can be
  * turned off for a plain label.
+ *
+ * `color` draws the record status instead (re-expressed from twenty-ui's
+ * Status, MIT, see NOTICE): any of the thirty data hues, its step 3 under step
+ * 11 ink, a 4px dot in the ink, 20px tall, 13px regular, and a `loading` state
+ * that busies the pill. The semantic names stay as aliases onto hues — success
+ * green, warning orange, error red, info blue, default and gray gray — so one
+ * status map serves both looks.
  */
-import { SizableText, XStack, createStyledContext, styled } from '@hanzo/gui';
+import { SizableText, Spinner, XStack, createStyledContext, styled } from '@hanzo/gui';
+import { hueOr, useTone } from './hue.js';
+import { STATUS_COLOR } from './feedback.js';
 import { ink } from './ink.js';
 import { slot } from './slot.js';
+/**
+ * Status's names onto data hues, read from the one status map (feedback.ts
+ * `STATUS_COLOR`), so a success pill, a success banner and a success toast
+ * cannot name different colours. The pill draws the hue's tag pair (data
+ * steps 3/11); the strip and the toast draw the state token — the same colour
+ * by name, each in its own material.
+ */
+export const STATUS_HUE = {
+    default: STATUS_COLOR.neutral,
+    gray: STATUS_COLOR.neutral,
+    success: STATUS_COLOR.success,
+    warning: STATUS_COLOR.warning,
+    error: STATUS_COLOR.error,
+    info: STATUS_COLOR.info,
+};
 const StatusContext = /* @__PURE__ */ createStyledContext({
     variant: 'default',
 });
@@ -70,8 +94,20 @@ const StatusDot = styled(XStack, {
         },
     },
 });
-export function Status({ variant = 'default', dot = true, children, ...props }) {
+export function Status({ variant = 'default', color, loading = false, weight = 'regular', dot = true, children, ...props }) {
+    if (color != null)
+        return _jsx(Hued, { color: color, loading: loading, weight: weight, dot: dot, ...props, children: children });
     const resolved = variant ?? 'default';
     return (_jsxs(StatusFrame, { ...slot('status'), variant: resolved, "data-variant": resolved, ...props, children: [dot ? _jsx(StatusDot, { ...slot('status-dot') }) : null, ink(children, StatusText)] }));
 }
+function Hued({ color, loading, weight, dot, children, style, ...props }) {
+    const hue = color in STATUS_HUE ? STATUS_HUE[color] : hueOr(color);
+    const { style: hueStyle, tone } = useTone(hue, [3, 11]);
+    return (_jsxs(XStack, { ...slot('status'), "data-color": hue, ...(loading ? { 'aria-busy': true } : null), display: "inline-flex", self: "flex-start", items: "center", gap: "$1", height: 20, pl: "$2", pr: loading ? '$1' : '$2', rounded: "$10", bg: tone(3), maxW: "100%", overflow: "hidden", style: { ...hueStyle, ...style }, ...props, children: [dot ? _jsx(XStack, { ...slot('status-dot'), width: 4, height: 4, rounded: "$10", bg: tone(11), shrink: 0 }) : null, ink(children, SizableText, {
+                size: '$2',
+                color: tone(11),
+                numberOfLines: 1,
+                ...(weight === 'medium' ? { fontWeight: '500' } : null),
+            }), loading ? _jsx(Spinner, { size: "small", maxW: 12, maxH: 12, color: tone(11) }) : null] }));
+}
 //# sourceMappingURL=status.js.map

package/dist/backends/gui/status.js.map

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

package/dist/backends/gui/stepper.cjs

@@ -1,20 +1,90 @@
 'use client';"use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.settle = exports.parseCount = exports.formatCount = void 0;
 exports.Stepper = Stepper;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * Stepper — a whole number with a button either side.
+ * Stepper — a number with a button either side.
  *
  * Both buttons are named for the thing counted (`label`), the count is a live
  * region, and each button disables at its bound instead of silently clamping.
+ *
+ * `editable` makes the count a field a person can type into, twenty-ui's
+ * NumberStepper (MIT, NOTICE): a 64px centred value at the medium weight that
+ * commits on Enter or blur — read leniently (grouping stripped, either decimal
+ * mark), held to the bounds, rounded to `step` and to `decimals` — and shows
+ * Latin digits, grouped only from five digits up. It is on by default under
+ * `<Density value="compact">`, where the buttons are 24px; a regular surface
+ * keeps the plain count it always had. `readOnly` keeps the value and the
+ * layout but lets neither the buttons nor the field change it.
  */
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
 const button_1 = require("./button.cjs");
+const input_1 = require("./input.cjs");
 const layout_1 = require("./layout.cjs");
 const slot_1 = require("./slot.cjs");
-function Stepper({ label, value, onChange, min = 0, max = Number.MAX_SAFE_INTEGER }) {
+const density_1 = require("./density.cjs");
+/** Up to `decimals` fraction digits, Latin digits, grouping from five digits up. */
+const formatCount = (n, decimals = 0) => new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: Math.min(Math.max(decimals, 0), 15),
+    useGrouping: Math.abs(n) >= 10000,
+}).format(n);
+exports.formatCount = formatCount;
+/**
+ * What a person typed, as a number, or `null` when it is not one. Spaces are
+ * dropped. With both marks present the LAST is the decimal one (`1,234.5` and
+ * `1.234,5` both read 1234.5); a comma alone is a decimal mark unless it groups
+ * three digits (`12,345`).
+ */
+const parseCount = (text) => {
+    const t = text.trim().replace(/[\s_]/g, '');
+    if (!t)
+        return null;
+    const dot = t.lastIndexOf('.');
+    const comma = t.lastIndexOf(',');
+    const normal = dot >= 0 && comma >= 0
+        ? dot > comma
+            ? t.replace(/,/g, '')
+            : t.replace(/\./g, '').replace(',', '.')
+        : comma >= 0
+            ? t.replace(/,(?=\d{3}(\D|$))/g, '').replace(',', '.')
+            : t;
+    if (!/^[-+]?(\d+\.?\d*|\.\d+)$/.test(normal))
+        return null;
+    const n = Number(normal);
+    return Number.isFinite(n) ? n : null;
+};
+exports.parseCount = parseCount;
+/** A value held to the bounds and rounded to the step (from `min`) and the decimals. */
+const settle = (n, { min, max, step, decimals }) => {
+    const stepped = step > 0 ? min + Math.round((n - min) / step) * step : n;
+    const bounded = Math.min(max, Math.max(min, stepped));
+    const f = 10 ** Math.min(Math.max(decimals, 0), 15);
+    return Math.round(bounded * f) / f;
+};
+exports.settle = settle;
+function Stepper({ label, value, onChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, decimals = 0, editable, readOnly = false, }) {
     const what = label.toLowerCase();
-    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('stepper'), role: "group", "aria-label": label, items: "center", gap: "$1", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: "icon", type: "button", "aria-label": `Fewer ${what}`, disabled: value <= min, onClick: () => onChange(value - 1), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Minus, { size: 16 }) }), (0, jsx_runtime_1.jsx)(layout_1.SizableText, { role: "status", "aria-live": "polite", minW: 32, text: "center", children: value }), (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: "icon", type: "button", "aria-label": `More ${what}`, disabled: value >= max, onClick: () => onChange(value + 1), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 16 }) })] }));
+    const compact = (0, density_1.useDensity)() === 'compact';
+    const typing = editable ?? compact;
+    const size = compact ? 'icon-xs' : 'icon';
+    const [draft, setDraft] = (0, react_1.useState)(() => (0, exports.formatCount)(value, decimals));
+    (0, react_1.useEffect)(() => setDraft((0, exports.formatCount)(value, decimals)), [value, decimals]);
+    const commit = () => {
+        const n = (0, exports.parseCount)(draft);
+        if (n == null)
+            return setDraft((0, exports.formatCount)(value, decimals));
+        const next = (0, exports.settle)(n, { min, max, step, decimals });
+        setDraft((0, exports.formatCount)(next, decimals));
+        if (next !== value)
+            onChange(next);
+    };
+    const move = (dir) => onChange((0, exports.settle)(value + dir * step, { min, max, step, decimals }));
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('stepper'), role: "group", "aria-label": label, items: "center", gap: "$1", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: size, type: "button", "aria-label": `Fewer ${what}`, disabled: value <= min, ...(readOnly ? { 'aria-disabled': true, opacity: 0.5, pointerEvents: 'none' } : null), onClick: () => move(-1), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Minus, { size: 16 }) }), typing ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(input_1.Input, { ...(0, slot_1.slot)('stepper-value'), "aria-label": label, size: compact ? 'sm' : 'default', 
+                        // 64 holds a short count; a longer one widens the field rather
+                        // than clipping its own digits (about 8px a character at 13px).
+                        width: Math.max(64, draft.length * 8 + 20), text: "center", fontWeight: "500", inputMode: decimals > 0 ? 'decimal' : 'numeric', value: draft, readOnly: readOnly, onChangeText: (t) => setDraft(t), onBlur: commit, onSubmitEditing: commit }), (0, jsx_runtime_1.jsx)(gui_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)(layout_1.SizableText, { role: "status", "aria-live": "polite", children: (0, exports.formatCount)(value, decimals) }) })] })) : ((0, jsx_runtime_1.jsx)(layout_1.SizableText, { role: "status", "aria-live": "polite", minW: 32, text: "center", children: decimals > 0 ? (0, exports.formatCount)(value, decimals) : value })), (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: size, type: "button", "aria-label": `More ${what}`, disabled: value >= max, ...(readOnly ? { 'aria-disabled': true, opacity: 0.5, pointerEvents: 'none' } : null), onClick: () => move(1), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 16 }) })] }));
 }

package/dist/backends/gui/stepper.d.ts

@@ -5,6 +5,30 @@ export interface StepperProps {
     onChange: (n: number) => void;
     min?: number;
     max?: number;
+    /** How far one press moves the value. */
+    step?: number;
+    /** Fraction digits a typed value keeps (0: whole numbers). */
+    decimals?: number;
+    /** The count is a field. Default: on under a compact density, off elsewhere. */
+    editable?: boolean;
+    /** Shown and announced, never changed. */
+    readOnly?: boolean;
 }
-export declare function Stepper({ label, value, onChange, min, max }: StepperProps): import("react").JSX.Element;
+/** Up to `decimals` fraction digits, Latin digits, grouping from five digits up. */
+export declare const formatCount: (n: number, decimals?: number) => string;
+/**
+ * What a person typed, as a number, or `null` when it is not one. Spaces are
+ * dropped. With both marks present the LAST is the decimal one (`1,234.5` and
+ * `1.234,5` both read 1234.5); a comma alone is a decimal mark unless it groups
+ * three digits (`12,345`).
+ */
+export declare const parseCount: (text: string) => number | null;
+/** A value held to the bounds and rounded to the step (from `min`) and the decimals. */
+export declare const settle: (n: number, { min, max, step, decimals }: {
+    min: number;
+    max: number;
+    step: number;
+    decimals: number;
+}) => number;
+export declare function Stepper({ label, value, onChange, min, max, step, decimals, editable, readOnly, }: StepperProps): import("react").JSX.Element;
 //# sourceMappingURL=stepper.d.ts.map

package/dist/backends/gui/stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/stepper.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,YAAY;IAC3B,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAO,EAAE,GAA6B,EAAE,EAAE,YAAY,+BAevG"}
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/stepper.tsx"],"names":[],"mappings":"AA0BA,MAAM,WAAW,YAAY;IAC3B,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,oFAAoF;AACpF,eAAO,MAAM,WAAW,MAAO,MAAM,8BAIvB,CAAA;AAEd;;;;;GAKG;AACH,eAAO,MAAM,UAAU,SAAU,MAAM,KAAG,MAAM,GAAG,IAgBlD,CAAA;AAED,wFAAwF;AACxF,eAAO,MAAM,MAAM,MAAO,MAAM,gCAAgC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,WAK3H,CAAA;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAO,EACP,GAA6B,EAC7B,IAAQ,EACR,QAAY,EACZ,QAAQ,EACR,QAAgB,GACjB,EAAE,YAAY,+BAyEd"}

package/dist/backends/gui/stepper.js

@@ -1,18 +1,84 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Stepper — a whole number with a button either side.
+ * Stepper — a number with a button either side.
  *
  * Both buttons are named for the thing counted (`label`), the count is a live
  * region, and each button disables at its bound instead of silently clamping.
+ *
+ * `editable` makes the count a field a person can type into, twenty-ui's
+ * NumberStepper (MIT, NOTICE): a 64px centred value at the medium weight that
+ * commits on Enter or blur — read leniently (grouping stripped, either decimal
+ * mark), held to the bounds, rounded to `step` and to `decimals` — and shows
+ * Latin digits, grouped only from five digits up. It is on by default under
+ * `<Density value="compact">`, where the buttons are 24px; a regular surface
+ * keeps the plain count it always had. `readOnly` keeps the value and the
+ * layout but lets neither the buttons nor the field change it.
  */
-import { XStack } from '@hanzo/gui';
+import { VisuallyHidden, XStack } from '@hanzo/gui';
 import { Minus, Plus } from '@hanzogui/lucide-icons-2';
+import { useEffect, useState } from 'react';
 import { Button } from './button.js';
+import { Input } from './input.js';
 import { SizableText } from './layout.js';
 import { slot } from './slot.js';
-export function Stepper({ label, value, onChange, min = 0, max = Number.MAX_SAFE_INTEGER }) {
+import { useDensity } from './density.js';
+/** Up to `decimals` fraction digits, Latin digits, grouping from five digits up. */
+export const formatCount = (n, decimals = 0) => new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: Math.min(Math.max(decimals, 0), 15),
+    useGrouping: Math.abs(n) >= 10000,
+}).format(n);
+/**
+ * What a person typed, as a number, or `null` when it is not one. Spaces are
+ * dropped. With both marks present the LAST is the decimal one (`1,234.5` and
+ * `1.234,5` both read 1234.5); a comma alone is a decimal mark unless it groups
+ * three digits (`12,345`).
+ */
+export const parseCount = (text) => {
+    const t = text.trim().replace(/[\s_]/g, '');
+    if (!t)
+        return null;
+    const dot = t.lastIndexOf('.');
+    const comma = t.lastIndexOf(',');
+    const normal = dot >= 0 && comma >= 0
+        ? dot > comma
+            ? t.replace(/,/g, '')
+            : t.replace(/\./g, '').replace(',', '.')
+        : comma >= 0
+            ? t.replace(/,(?=\d{3}(\D|$))/g, '').replace(',', '.')
+            : t;
+    if (!/^[-+]?(\d+\.?\d*|\.\d+)$/.test(normal))
+        return null;
+    const n = Number(normal);
+    return Number.isFinite(n) ? n : null;
+};
+/** A value held to the bounds and rounded to the step (from `min`) and the decimals. */
+export const settle = (n, { min, max, step, decimals }) => {
+    const stepped = step > 0 ? min + Math.round((n - min) / step) * step : n;
+    const bounded = Math.min(max, Math.max(min, stepped));
+    const f = 10 ** Math.min(Math.max(decimals, 0), 15);
+    return Math.round(bounded * f) / f;
+};
+export function Stepper({ label, value, onChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, decimals = 0, editable, readOnly = false, }) {
     const what = label.toLowerCase();
-    return (_jsxs(XStack, { ...slot('stepper'), role: "group", "aria-label": label, items: "center", gap: "$1", children: [_jsx(Button, { variant: "outline", size: "icon", type: "button", "aria-label": `Fewer ${what}`, disabled: value <= min, onClick: () => onChange(value - 1), children: _jsx(Minus, { size: 16 }) }), _jsx(SizableText, { role: "status", "aria-live": "polite", minW: 32, text: "center", children: value }), _jsx(Button, { variant: "outline", size: "icon", type: "button", "aria-label": `More ${what}`, disabled: value >= max, onClick: () => onChange(value + 1), children: _jsx(Plus, { size: 16 }) })] }));
+    const compact = useDensity() === 'compact';
+    const typing = editable ?? compact;
+    const size = compact ? 'icon-xs' : 'icon';
+    const [draft, setDraft] = useState(() => formatCount(value, decimals));
+    useEffect(() => setDraft(formatCount(value, decimals)), [value, decimals]);
+    const commit = () => {
+        const n = parseCount(draft);
+        if (n == null)
+            return setDraft(formatCount(value, decimals));
+        const next = settle(n, { min, max, step, decimals });
+        setDraft(formatCount(next, decimals));
+        if (next !== value)
+            onChange(next);
+    };
+    const move = (dir) => onChange(settle(value + dir * step, { min, max, step, decimals }));
+    return (_jsxs(XStack, { ...slot('stepper'), role: "group", "aria-label": label, items: "center", gap: "$1", children: [_jsx(Button, { variant: "outline", size: size, type: "button", "aria-label": `Fewer ${what}`, disabled: value <= min, ...(readOnly ? { 'aria-disabled': true, opacity: 0.5, pointerEvents: 'none' } : null), onClick: () => move(-1), children: _jsx(Minus, { size: 16 }) }), typing ? (_jsxs(_Fragment, { children: [_jsx(Input, { ...slot('stepper-value'), "aria-label": label, size: compact ? 'sm' : 'default', 
+                        // 64 holds a short count; a longer one widens the field rather
+                        // than clipping its own digits (about 8px a character at 13px).
+                        width: Math.max(64, draft.length * 8 + 20), text: "center", fontWeight: "500", inputMode: decimals > 0 ? 'decimal' : 'numeric', value: draft, readOnly: readOnly, onChangeText: (t) => setDraft(t), onBlur: commit, onSubmitEditing: commit }), _jsx(VisuallyHidden, { children: _jsx(SizableText, { role: "status", "aria-live": "polite", children: formatCount(value, decimals) }) })] })) : (_jsx(SizableText, { role: "status", "aria-live": "polite", minW: 32, text: "center", children: decimals > 0 ? formatCount(value, decimals) : value })), _jsx(Button, { variant: "outline", size: size, type: "button", "aria-label": `More ${what}`, disabled: value >= max, ...(readOnly ? { 'aria-disabled': true, opacity: 0.5, pointerEvents: 'none' } : null), onClick: () => move(1), children: _jsx(Plus, { size: 16 }) })] }));
 }
 //# sourceMappingURL=stepper.js.map

package/dist/backends/gui/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/backends/gui/stepper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;GAKG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAW7B,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC,gBAAgB,EAAgB;IACtG,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,EAAE,CAAA;IAChC,OAAO,CACL,MAAC,MAAM,OAAK,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,KAAK,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAClF,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,gBAAa,SAAS,IAAI,EAAE,EAAE,QAAQ,EAAE,KAAK,IAAI,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,YACzI,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GACZ,EACT,KAAC,WAAW,IAAC,IAAI,EAAC,QAAQ,eAAW,QAAQ,EAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAC,QAAQ,YAClE,KAAK,GACM,EACd,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,gBAAa,QAAQ,IAAI,EAAE,EAAE,QAAQ,EAAE,KAAK,IAAI,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,YACxI,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,GACX,IACF,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/backends/gui/stepper.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/switch.cjs

@@ -50,28 +50,43 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * this file was measured — both thumbs came out the same colour as the track
  * behind them, off and on, exactly as 8.0.57 did. A flat name cannot say "and
  * the opposite of that, one level down", so this file names rungs on purpose.
+ *
+ * THREE SIZES, and the record two are twenty-ui's (MIT, NOTICE): `md` a 32×20
+ * pill with a 16px thumb, `sm` 24×16 with a 12px thumb, each with no edge and
+ * the thumb 2px in. `default` stays the 36×20 pill with its hairline; under
+ * `<Density value="compact">` a switch that names no size is `md`. The tokens do
+ * not change with the size — the inverting thumb works on every one.
  */
 const gui_1 = require("@hanzo/gui");
 const slot_1 = require("./slot.cjs");
 const gesture_1 = require("./gesture.cjs");
-const TRACK_W = 36;
-const TRACK_H = 20;
-const THUMB = 16;
-const Switch = ({ disabled, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.Switch, { ...(0, slot_1.slot)('switch'), width: TRACK_W, height: TRACK_H, minHeight: TRACK_H, padding: 2, flexShrink: 0, backgroundColor: "$color3", 
-    // Without an explicit border the UA's 2px outset button border shows.
-    borderWidth: 1, borderColor: "$borderColor", activeStyle: { backgroundColor: '$color12', borderColor: '$color12' }, 
-    // Stated rather than left to a `disabledStyle` this backend uses nowhere
-    // else: a control that ignores its own disabled prop looks identical to a
-    // live one, and the page this was found on had a disabled switch sitting
-    // beside eight enabled ones with nothing to tell them apart.
-    disabled: disabled, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...(0, gesture_1.touch)(TRACK_H, 44, 'y'), ...props, children: (0, jsx_runtime_1.jsx)(gui_1.Switch.Thumb, { ...(0, slot_1.slot)('switch-thumb'), width: THUMB, height: THUMB, backgroundColor: "$color3", 
-        // `bg`, and it is the only one of the three spellings that is both typed
-        // and correct. The Thumb's activeStyle is typed as the SHORTHAND style set:
-        // `backgroundColor` paints but is not in that type; `background` is in it
-        // and compiles to a SEPARATE `_background-` class that races the base
-        // `_bg-` one on load order rather than replacing it; `bg` replaces it.
-        // Consumers build with ignoreBuildErrors, so the first would have shipped
-        // an error nobody sees and the second a colour that lands or does not
-        // depending on stylesheet order.
-        activeStyle: { bg: '$color12' } }) }));
+const density_1 = require("./density.cjs");
+/** Each size's track, thumb and edge. The edge is what keeps the UA's button border off. */
+const SIZE = {
+    default: { w: 36, h: 20, thumb: 16, edge: 1 },
+    md: { w: 32, h: 20, thumb: 16, edge: 0 },
+    sm: { w: 24, h: 16, thumb: 12, edge: 0 },
+};
+const Switch = ({ disabled, size, ...props }) => {
+    const compact = (0, density_1.useDensity)() === 'compact';
+    const box = SIZE[size ?? (compact ? 'md' : 'default')];
+    return ((0, jsx_runtime_1.jsx)(gui_1.Switch, { ...(0, slot_1.slot)('switch'), "data-size": size ?? (compact ? 'md' : 'default'), width: box.w, height: box.h, minHeight: box.h, padding: 2, flexShrink: 0, backgroundColor: "$color3", 
+        // Without an explicit border the UA's 2px outset button border shows; the
+        // record sizes draw none and say so with a zero.
+        borderWidth: box.edge, borderColor: "$borderColor", activeStyle: { backgroundColor: '$color12', borderColor: '$color12' }, 
+        // Stated rather than left to a `disabledStyle` this backend uses nowhere
+        // else: a control that ignores its own disabled prop looks identical to a
+        // live one, and the page this was found on had a disabled switch sitting
+        // beside eight enabled ones with nothing to tell them apart.
+        disabled: disabled, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...(0, gesture_1.touch)(box.h, 44, 'y'), ...props, children: (0, jsx_runtime_1.jsx)(gui_1.Switch.Thumb, { ...(0, slot_1.slot)('switch-thumb'), width: box.thumb, height: box.thumb, backgroundColor: "$color3", 
+            // `bg`, and it is the only one of the three spellings that is both typed
+            // and correct. The Thumb's activeStyle is typed as the SHORTHAND style set:
+            // `backgroundColor` paints but is not in that type; `background` is in it
+            // and compiles to a SEPARATE `_background-` class that races the base
+            // `_bg-` one on load order rather than replacing it; `bg` replaces it.
+            // Consumers build with ignoreBuildErrors, so the first would have shipped
+            // an error nobody sees and the second a colour that lands or does not
+            // depending on stylesheet order.
+            activeStyle: { bg: '$color12' } }) }));
+};
 exports.Switch = Switch;

package/dist/backends/gui/switch.d.ts

@@ -45,10 +45,20 @@
  * this file was measured — both thumbs came out the same colour as the track
  * behind them, off and on, exactly as 8.0.57 did. A flat name cannot say "and
  * the opposite of that, one level down", so this file names rungs on purpose.
+ *
+ * THREE SIZES, and the record two are twenty-ui's (MIT, NOTICE): `md` a 32×20
+ * pill with a 16px thumb, `sm` 24×16 with a 12px thumb, each with no edge and
+ * the thumb 2px in. `default` stays the 36×20 pill with its hairline; under
+ * `<Density value="compact">` a switch that names no size is `md`. The tokens do
+ * not change with the size — the inverting thumb works on every one.
  */
 import { Switch as GuiSwitch } from '@hanzo/gui';
 import type { ComponentProps } from 'react';
-export type SwitchProps = ComponentProps<typeof GuiSwitch>;
-declare const Switch: ({ disabled, ...props }: SwitchProps) => import("react").JSX.Element;
+export type SwitchSize = 'default' | 'md' | 'sm';
+export type SwitchProps = Omit<ComponentProps<typeof GuiSwitch>, 'size'> & {
+    /** `default` 36×20; `md` 32×20 and `sm` 24×16, the record pair. Unset, the nearest `<Density>` decides. */
+    size?: SwitchSize;
+};
+declare const Switch: ({ disabled, size, ...props }: SwitchProps) => import("react").JSX.Element;
 export { Switch };
 //# sourceMappingURL=switch.d.ts.map

package/dist/backends/gui/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAQ3C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AAE1D,QAAA,MAAM,MAAM,2BAA4B,WAAW,gCAuClD,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAK3C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAShD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,MAAM,CAAC,GAAG;IACzE,2GAA2G;IAC3G,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,MAAM,iCAAkC,WAAW,gCA6CxD,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/backends/gui/switch.js

@@ -47,29 +47,44 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * this file was measured — both thumbs came out the same colour as the track
  * behind them, off and on, exactly as 8.0.57 did. A flat name cannot say "and
  * the opposite of that, one level down", so this file names rungs on purpose.
+ *
+ * THREE SIZES, and the record two are twenty-ui's (MIT, NOTICE): `md` a 32×20
+ * pill with a 16px thumb, `sm` 24×16 with a 12px thumb, each with no edge and
+ * the thumb 2px in. `default` stays the 36×20 pill with its hairline; under
+ * `<Density value="compact">` a switch that names no size is `md`. The tokens do
+ * not change with the size — the inverting thumb works on every one.
  */
 import { Switch as GuiSwitch } from '@hanzo/gui';
 import { slot } from './slot.js';
 import { touch } from './gesture.js';
-const TRACK_W = 36;
-const TRACK_H = 20;
-const THUMB = 16;
-const Switch = ({ disabled, ...props }) => (_jsx(GuiSwitch, { ...slot('switch'), width: TRACK_W, height: TRACK_H, minHeight: TRACK_H, padding: 2, flexShrink: 0, backgroundColor: "$color3", 
-    // Without an explicit border the UA's 2px outset button border shows.
-    borderWidth: 1, borderColor: "$borderColor", activeStyle: { backgroundColor: '$color12', borderColor: '$color12' }, 
-    // Stated rather than left to a `disabledStyle` this backend uses nowhere
-    // else: a control that ignores its own disabled prop looks identical to a
-    // live one, and the page this was found on had a disabled switch sitting
-    // beside eight enabled ones with nothing to tell them apart.
-    disabled: disabled, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...touch(TRACK_H, 44, 'y'), ...props, children: _jsx(GuiSwitch.Thumb, { ...slot('switch-thumb'), width: THUMB, height: THUMB, backgroundColor: "$color3", 
-        // `bg`, and it is the only one of the three spellings that is both typed
-        // and correct. The Thumb's activeStyle is typed as the SHORTHAND style set:
-        // `backgroundColor` paints but is not in that type; `background` is in it
-        // and compiles to a SEPARATE `_background-` class that races the base
-        // `_bg-` one on load order rather than replacing it; `bg` replaces it.
-        // Consumers build with ignoreBuildErrors, so the first would have shipped
-        // an error nobody sees and the second a colour that lands or does not
-        // depending on stylesheet order.
-        activeStyle: { bg: '$color12' } }) }));
+import { useDensity } from './density.js';
+/** Each size's track, thumb and edge. The edge is what keeps the UA's button border off. */
+const SIZE = {
+    default: { w: 36, h: 20, thumb: 16, edge: 1 },
+    md: { w: 32, h: 20, thumb: 16, edge: 0 },
+    sm: { w: 24, h: 16, thumb: 12, edge: 0 },
+};
+const Switch = ({ disabled, size, ...props }) => {
+    const compact = useDensity() === 'compact';
+    const box = SIZE[size ?? (compact ? 'md' : 'default')];
+    return (_jsx(GuiSwitch, { ...slot('switch'), "data-size": size ?? (compact ? 'md' : 'default'), width: box.w, height: box.h, minHeight: box.h, padding: 2, flexShrink: 0, backgroundColor: "$color3", 
+        // Without an explicit border the UA's 2px outset button border shows; the
+        // record sizes draw none and say so with a zero.
+        borderWidth: box.edge, borderColor: "$borderColor", activeStyle: { backgroundColor: '$color12', borderColor: '$color12' }, 
+        // Stated rather than left to a `disabledStyle` this backend uses nowhere
+        // else: a control that ignores its own disabled prop looks identical to a
+        // live one, and the page this was found on had a disabled switch sitting
+        // beside eight enabled ones with nothing to tell them apart.
+        disabled: disabled, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...touch(box.h, 44, 'y'), ...props, children: _jsx(GuiSwitch.Thumb, { ...slot('switch-thumb'), width: box.thumb, height: box.thumb, backgroundColor: "$color3", 
+            // `bg`, and it is the only one of the three spellings that is both typed
+            // and correct. The Thumb's activeStyle is typed as the SHORTHAND style set:
+            // `backgroundColor` paints but is not in that type; `background` is in it
+            // and compiles to a SEPARATE `_background-` class that races the base
+            // `_bg-` one on load order rather than replacing it; `bg` replaces it.
+            // Consumers build with ignoreBuildErrors, so the first would have shipped
+            // an error nobody sees and the second a colour that lands or does not
+            // depending on stylesheet order.
+            activeStyle: { bg: '$color12' } }) }));
+};
 export { Switch };
 //# sourceMappingURL=switch.js.map