@charcuterie/ui 2.4.1 → 2.5.0

package/dist/Checkbox/Checkbox.d.ts

@@ -0,0 +1,59 @@
+import type { ControlSize } from "@charcuterie/tokens";
+import type { ReactNode } from "react";
+export type CheckboxProps = {
+    className?: string;
+    /**
+     * The caller's own id, when it has one — a stable target for an
+     * autofill hint or a deep link. Left to React's `useId` on the
+     * `<input>` otherwise, which is enough for the wrapping `<label>`.
+     */
+    id?: string;
+    /**
+     * **Initial** only. The `<input>` is the store from then on — the
+     * DOM owns a checkbox's checkedness, and a controlled `checked`
+     * prop is the thing this library refuses to have
+     * (`SegmentedControl` says the same about `selectedValue`).
+     */
+    isChecked?: boolean;
+    isDisabled?: boolean;
+    /**
+     * The visible text beside the box, and the checkbox's accessible
+     * name — the `<label>` wraps the control, so there is no `for` to
+     * get wrong. A box with no label is a control a screen reader
+     * cannot announce, which is why this is required.
+     */
+    label: ReactNode;
+    onChange?: (isChecked: boolean) => void;
+    size?: ControlSize;
+};
+/**
+ * A single boolean, on or off, that owns nothing but itself.
+ *
+ * This is the primitive mux-magic's `BooleanField` hand-rolled in
+ * `bg-slate-700 accent-blue-500` because the library had no checkbox
+ * to reach for — palette colours with no light mode, the exact M6
+ * defect the token layer exists to delete. Here the box is
+ * `bg-surface-sunken` and the fill is `bg-intent-accent-solid`, so
+ * one control reads correctly in `daylight`, `midnight`, and on the
+ * kiosk with no per-app override.
+ *
+ * ### The `<label>` wraps the control
+ *
+ * A checkbox reads to the *left* of its text, which is why it is not
+ * a `Field` — `Field` stacks label above control in a `flex-col`,
+ * right for a text input and wrong for a boolean, and stacking every
+ * checkbox in a step card would double the card's height. Wrapping is
+ * also the one label association that needs no `for` at all, so there
+ * is no minted-then-dropped id to get wrong.
+ *
+ * ### The `<input>` is the store
+ *
+ * `defaultChecked`, not `checked`. The DOM owns a checkbox's state
+ * natively, so there is no second copy to keep in step and no
+ * controlled-prop round-trip — `onChange` reports the new state to a
+ * consumer that wants to persist it, and reading it back is the
+ * `<input>`'s job. `isChecked` seeds the first paint and nothing
+ * after.
+ */
+export declare const Checkbox: ({ className, id, isChecked, isDisabled, label, onChange, size, }: CheckboxProps) => ReactNode;
+//# sourceMappingURL=Checkbox.d.ts.map

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

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

package/dist/Checkbox/Checkbox.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FOCUS_RING_CLASS } from "../intentStyles.js";
+import { toClassName } from "../toClassName.js";
+const BOX_SIZE_CLASS = {
+    sm: "size-3.5",
+    md: "size-4",
+    lg: "size-5",
+};
+const CHECK_SIZE_CLASS = {
+    sm: "size-2.5",
+    md: "size-3",
+    lg: "size-3.5",
+};
+const TEXT_SIZE_CLASS = {
+    sm: "text-sm",
+    md: "text-md",
+    lg: "text-lg",
+};
+/**
+ * A single boolean, on or off, that owns nothing but itself.
+ *
+ * This is the primitive mux-magic's `BooleanField` hand-rolled in
+ * `bg-slate-700 accent-blue-500` because the library had no checkbox
+ * to reach for — palette colours with no light mode, the exact M6
+ * defect the token layer exists to delete. Here the box is
+ * `bg-surface-sunken` and the fill is `bg-intent-accent-solid`, so
+ * one control reads correctly in `daylight`, `midnight`, and on the
+ * kiosk with no per-app override.
+ *
+ * ### The `<label>` wraps the control
+ *
+ * A checkbox reads to the *left* of its text, which is why it is not
+ * a `Field` — `Field` stacks label above control in a `flex-col`,
+ * right for a text input and wrong for a boolean, and stacking every
+ * checkbox in a step card would double the card's height. Wrapping is
+ * also the one label association that needs no `for` at all, so there
+ * is no minted-then-dropped id to get wrong.
+ *
+ * ### The `<input>` is the store
+ *
+ * `defaultChecked`, not `checked`. The DOM owns a checkbox's state
+ * natively, so there is no second copy to keep in step and no
+ * controlled-prop round-trip — `onChange` reports the new state to a
+ * consumer that wants to persist it, and reading it back is the
+ * `<input>`'s job. `isChecked` seeds the first paint and nothing
+ * after.
+ */
+export const Checkbox = ({ className, id, isChecked = false, isDisabled = false, label, onChange, size = "md", }) => (_jsxs("label", { className: toClassName("inline-flex cursor-pointer items-center gap-2 text-content-secondary select-none", TEXT_SIZE_CLASS[size], isDisabled &&
+        "cursor-not-allowed text-content-disabled", className), children: [_jsxs("span", { className: "relative grid shrink-0 place-items-center", children: [_jsx("input", { className: toClassName("peer cursor-pointer appearance-none rounded-sm border border-border-strong bg-surface-sunken transition-colors duration-(--duration-fast) ease-standard", "checked:border-intent-accent-solid checked:bg-intent-accent-solid", 
+                    // Disabled mutes the border and the cursor, and — unlike the
+                    // shared `DISABLED_CLASS` — does *not* touch the background.
+                    // The generic bundle repaints the box `surface-sunken`, which
+                    // erased both the checked accent fill (white tick on grey)
+                    // and, in a light scheme, the unchecked box entirely: a
+                    // `border-subtle` outline on `surface-sunken` on
+                    // `surface-base` is three near-identical creams. A disabled
+                    // box is still a box the user has to see.
+                    "disabled:cursor-not-allowed disabled:border-border-default", BOX_SIZE_CLASS[size], FOCUS_RING_CLASS), defaultChecked: isChecked, disabled: isDisabled, id: id, onChange: (event) => {
+                        onChange?.(event.target.checked);
+                    }, type: "checkbox" }), _jsx("svg", { "aria-hidden": "true", className: toClassName("pointer-events-none invisible absolute text-intent-accent-on-solid peer-checked:visible", CHECK_SIZE_CLASS[size]), fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, viewBox: "0 0 24 24", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) })] }), _jsx("span", { children: label })] }));
+//# sourceMappingURL=Checkbox.js.map

package/dist/Checkbox/Checkbox.js.map

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

package/dist/Field/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAIhD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG;IACnC;;;;;OAKG;IACH,QAAQ,EAAE,YAAY,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,eAAO,MAAM,KAAK,GAAI,sFAQnB,UAAU,KAAG,SA4Ff,CAAA"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAIhD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG;IACnC;;;;;OAKG;IACH,QAAQ,EAAE,YAAY,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,eAAO,MAAM,KAAK,GAAI,sFAQnB,UAAU,KAAG,SAwGf,CAAA"}

package/dist/Field/Field.js

@@ -86,8 +86,19 @@ export const Field = ({ children, className, description, error, isRequired = fa
      * link, a server-rendered error summary linking to the control.
      * `useUniqueId` is still called: hooks are unconditional, and it
      * costs one counter read.
+     *
+     * Precedence is `Field` prop → **the child's own `id`** →
+     * generated. The child's is read because a control written as
+     * `<input id="rename-pattern" />` puts the id where the author can
+     * see it, not on the `Field`; overwriting it with a minted
+     * `-control` id used to break exactly the outside-in references the
+     * `Field` prop exists to keep — a deep link, an autofill hint, a
+     * consumer's own selector. The `Field` prop still wins when both
+     * are set: it is the outer, later declaration, and last-writer-wins
+     * is the slot's rule for a value.
      */
-    const controlId = receivedSlotProps.id ?? `${baseId}-control`;
+    const childId = children.props.id;
+    const controlId = receivedSlotProps.id ?? childId ?? `${baseId}-control`;
     const descriptionId = `${baseId}-description`;
     const errorId = `${baseId}-error`;
     const describedBy = [

package/dist/Field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,cAAc,EACd,WAAW,GACZ,MAAM,oBAAoB,CAAA;AAI3B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AA2B/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,GAAG,iBAAiB,EACT,EAAa,EAAE;IAC1B,MAAM,MAAM,GAAG,WAAW,EAAE,CAAA;IAE5B;;;;;;OAMG;IACH,MAAM,SAAS,GACb,iBAAiB,CAAC,EAAE,IAAI,GAAG,MAAM,UAAU,CAAA;IAE7C,MAAM,aAAa,GAAG,GAAG,MAAM,cAAc,CAAA;IAE7C,MAAM,OAAO,GAAG,GAAG,MAAM,QAAQ,CAAA;IAEjC,MAAM,WAAW,GAAG;QAClB,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa;QAChD,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;KACrC;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAA;IAEZ,MAAM,aAAa,GAAG,cAAc,CAClC,QAAQ,EACR,cAAc,CAAC,iBAAiB,EAAE;QAChC,kBAAkB,EAChB,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW;QAC9C,6DAA6D;QAC7D,+DAA+D;QAC/D,iDAAiD;QACjD,cAAc,EACZ,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;QACxC,sDAAsD;QACtD,8DAA8D;QAC9D,8DAA8D;QAC9D,gDAAgD;QAChD,eAAe,EAAE,UAAU,IAAI,SAAS;QACxC,EAAE,EAAE,SAAS;QACb,QAAQ,EAAE,UAAU,IAAI,SAAS;KAClC,CAAC,CACH,CAAA;IAED,OAAO,CACL,eACE,SAAS,EAAE,WAAW,CACpB,uBAAuB,EACvB,SAAS,CACV,aAED,iBACE,SAAS,EAAC,0CAA0C,EACpD,OAAO,EAAE,SAAS,aAEjB,KAAK,EAEL,UAAU,CAAC,CAAC,CAAC,CACZ,8BAKc,MAAM,EAClB,SAAS,EAAC,iCAAiC,kBAGtC,CACR,CAAC,CAAC,CAAC,IAAI,IACF,EAEP,aAAa,EAEb,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClC,YACE,SAAS,EAAC,gCAAgC,EAC1C,EAAE,EAAE,aAAa,YAEhB,WAAW,GACV,CACL,EAEA,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC5B,YACE,SAAS,EAAC,oCAAoC,EAC9C,EAAE,EAAE,OAAO,YAEV,KAAK,GACJ,CACL,IACG,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,cAAc,EACd,WAAW,GACZ,MAAM,oBAAoB,CAAA;AAI3B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AA2B/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,QAAQ,EACR,SAAS,EACT,WAAW,EACX,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,GAAG,iBAAiB,EACT,EAAa,EAAE;IAC1B,MAAM,MAAM,GAAG,WAAW,EAAE,CAAA;IAE5B;;;;;;;;;;;;;;;;OAgBG;IACH,MAAM,OAAO,GAAI,QAAQ,CAAC,KAAyB,CAAC,EAAE,CAAA;IAEtD,MAAM,SAAS,GACb,iBAAiB,CAAC,EAAE,IAAI,OAAO,IAAI,GAAG,MAAM,UAAU,CAAA;IAExD,MAAM,aAAa,GAAG,GAAG,MAAM,cAAc,CAAA;IAE7C,MAAM,OAAO,GAAG,GAAG,MAAM,QAAQ,CAAA;IAEjC,MAAM,WAAW,GAAG;QAClB,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa;QAChD,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;KACrC;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAA;IAEZ,MAAM,aAAa,GAAG,cAAc,CAClC,QAAQ,EACR,cAAc,CAAC,iBAAiB,EAAE;QAChC,kBAAkB,EAChB,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW;QAC9C,6DAA6D;QAC7D,+DAA+D;QAC/D,iDAAiD;QACjD,cAAc,EACZ,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;QACxC,sDAAsD;QACtD,8DAA8D;QAC9D,8DAA8D;QAC9D,gDAAgD;QAChD,eAAe,EAAE,UAAU,IAAI,SAAS;QACxC,EAAE,EAAE,SAAS;QACb,QAAQ,EAAE,UAAU,IAAI,SAAS;KAClC,CAAC,CACH,CAAA;IAED,OAAO,CACL,eACE,SAAS,EAAE,WAAW,CACpB,uBAAuB,EACvB,SAAS,CACV,aAED,iBACE,SAAS,EAAC,0CAA0C,EACpD,OAAO,EAAE,SAAS,aAEjB,KAAK,EAEL,UAAU,CAAC,CAAC,CAAC,CACZ,8BAKc,MAAM,EAClB,SAAS,EAAC,iCAAiC,kBAGtC,CACR,CAAC,CAAC,CAAC,IAAI,IACF,EAEP,aAAa,EAEb,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClC,YACE,SAAS,EAAC,gCAAgC,EAC1C,EAAE,EAAE,aAAa,YAEhB,WAAW,GACV,CACL,EAEA,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC5B,YACE,SAAS,EAAC,oCAAoC,EAC9C,EAAE,EAAE,OAAO,YAEV,KAAK,GACJ,CACL,IACG,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/Menu/Menu.d.ts

@@ -6,11 +6,53 @@ export type MenuItem = {
     key: string;
     label: ReactNode;
     onSelect: () => void;
+    /**
+     * The default kind, and optional so the common `{ key, label,
+     * onSelect }` still type-checks. Present only to discriminate this
+     * from a `separator` or a `group`.
+     */
+    type?: "item";
 };
+/**
+ * A rule between groups of items — `role="separator"`, and nothing a
+ * keyboard user lands on. It never registers with the roving group,
+ * so the arrow keys pass straight over it, the same mechanism a
+ * disabled item uses.
+ */
+export type MenuSeparator = {
+    key: string;
+    type: "separator";
+};
+/**
+ * A named set of items — `role="group"` with the `label` as its
+ * accessible name (a screen reader announces "Danger, group" before
+ * its members). The heading itself is not focusable; only the items
+ * inside it register.
+ */
+export type MenuGroup = {
+    items: MenuItem[];
+    key: string;
+    label: ReactNode;
+    type: "group";
+};
+/**
+ * What a menu is made of. A bare `MenuItem` is still valid on its
+ * own, so existing `items` arrays need no change; a `separator` or a
+ * `group` opts in by its `type`.
+ */
+export type MenuEntry = MenuGroup | MenuItem | MenuSeparator;
 export type MenuProps = {
     className?: string;
+    /**
+     * Shown when there is no item to show — a `group` with no members
+     * and a bare separator list both count as empty. Rendered as a
+     * **disabled** `menuitem` (a `role="menu"` must own one), so it is
+     * announced but never focused. Without it an empty menu renders
+     * nothing.
+     */
+    emptyState?: ReactNode;
     isVisible: boolean;
-    items: MenuItem[];
+    items: MenuEntry[];
     /** Outside press, Escape, and choosing an item all land here. */
     onDismiss: () => void;
     placement?: Placement;
@@ -69,6 +111,22 @@ export type MenuProps = {
  * focus is whichever one `RovingFocus` says is active, and that is
  * not known until the items have registered.
  *
+ * ### Separators, groups, and an empty state
+ *
+ * `items` is a union, not a flat `MenuItem[]`: a `separator`
+ * (`role="separator"`) and a `group` (`role="group"`, named by its
+ * `label`) opt in by their `type`, and a bare item still type-checks
+ * unchanged. The keyboard model needs no new code for them — a
+ * separator and a group heading register nothing, so the roving
+ * group never sees them and the arrow keys skip straight over, the
+ * same mechanism a disabled item already used. A `group`'s items
+ * register normally, so focus moves through them in DOM order as if
+ * the heading were not there. When there is nothing to show, the
+ * `emptyState` renders as a **disabled** `menuitem` — a `role="menu"`
+ * with no `menuitem` child fails `aria-required-children`, so the
+ * note has to be one, `aria-disabled` and out of the roving group:
+ * announced as "No actions available, dimmed", focusable by nothing.
+ *
  * ### No type-ahead, deliberately
  *
  * The APG lists type-ahead as optional for a menu and required for a
@@ -77,5 +135,5 @@ export type MenuProps = {
  * buffer and a timer in a component that currently has neither, for
  * a menu you can cross in three arrow presses.
  */
-export declare const Menu: ({ className, isVisible, items, onDismiss, placement, trigger, }: MenuProps) => ReactNode;
+export declare const Menu: ({ className, emptyState, isVisible, items, onDismiss, placement, trigger, }: MenuProps) => ReactNode;
 //# sourceMappingURL=Menu.d.ts.map

package/dist/Menu/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/Menu/Menu.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAKnD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQpD,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,iEAAiE;IACjE,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,+DAA+D;IAC/D,OAAO,EAAE,YAAY,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,eAAO,MAAM,IAAI,GAAI,iEAOlB,SAAS,KAAG,SAuId,CAAA"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/Menu/Menu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAKnD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQpD,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,WAAW,CAAA;CAClB,CAAA;AAED;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,IAAI,EAAE,OAAO,CAAA;CACd,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAA;AAE5D,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,iEAAiE;IACjE,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,+DAA+D;IAC/D,OAAO,EAAE,YAAY,CAAA;CACtB,CAAA;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2EG;AACH,eAAO,MAAM,IAAI,GAAI,6EAQlB,SAAS,KAAG,SAyMd,CAAA"}

package/dist/Menu/Menu.js

@@ -1,11 +1,14 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { selectTabIndex, useRovingFocus, } from "@charcuterie/logic";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { selectTabIndex, useRovingFocus, useUniqueId, } from "@charcuterie/logic";
 import { FloatingFocusManager, FloatingPortal, } from "@floating-ui/react";
 import { useEffect, useRef } from "react";
 import { PANEL_SURFACE_CLASS } from "../Overlay/overlayPanelClass.js";
 import { useAnchoredOverlay } from "../Overlay/useAnchoredOverlay.js";
 import { toClassName } from "../toClassName.js";
 import { MenuAction } from "./MenuAction.js";
+const isMenuItem = (entry) => entry.type === undefined || entry.type === "item";
+const hasAnyItem = (items) => items.some((entry) => isMenuItem(entry) ||
+    (entry.type === "group" && entry.items.length > 0));
 /**
  * A menu is **not** a listbox, and mux-magic's `TypePicker` is the
  * fleet's one attempt at telling them apart — it renders
@@ -58,6 +61,22 @@ import { MenuAction } from "./MenuAction.js";
  * focus is whichever one `RovingFocus` says is active, and that is
  * not known until the items have registered.
  *
+ * ### Separators, groups, and an empty state
+ *
+ * `items` is a union, not a flat `MenuItem[]`: a `separator`
+ * (`role="separator"`) and a `group` (`role="group"`, named by its
+ * `label`) opt in by their `type`, and a bare item still type-checks
+ * unchanged. The keyboard model needs no new code for them — a
+ * separator and a group heading register nothing, so the roving
+ * group never sees them and the arrow keys skip straight over, the
+ * same mechanism a disabled item already used. A `group`'s items
+ * register normally, so focus moves through them in DOM order as if
+ * the heading were not there. When there is nothing to show, the
+ * `emptyState` renders as a **disabled** `menuitem` — a `role="menu"`
+ * with no `menuitem` child fails `aria-required-children`, so the
+ * note has to be one, `aria-disabled` and out of the roving group:
+ * announced as "No actions available, dimmed", focusable by nothing.
+ *
  * ### No type-ahead, deliberately
  *
  * The APG lists type-ahead as optional for a menu and required for a
@@ -66,7 +85,8 @@ import { MenuAction } from "./MenuAction.js";
  * buffer and a timer in a component that currently has neither, for
  * a menu you can cross in three arrow presses.
  */
-export const Menu = ({ className, isVisible, items, onDismiss, placement = "bottom-start", trigger, }) => {
+export const Menu = ({ className, emptyState, isVisible, items, onDismiss, placement = "bottom-start", trigger, }) => {
+    const menuId = useUniqueId();
     const itemElements = useRef(new Map());
     const focus = useRovingFocus();
     const { activeValue, registeredValues, setActiveValue } = focus;
@@ -107,6 +127,38 @@ export const Menu = ({ className, isVisible, items, onDismiss, placement = "bott
         }
         itemElements.current.get(activeValue)?.focus();
     }, [activeValue, isVisible]);
+    // One member of the roving group, whether it sits at the top level
+    // or inside a `group`. The registration lives in `MenuAction`'s
+    // effect, so an item nested in a group joins the same arrow-key
+    // sequence in DOM order — the heading above it registers nothing.
+    const renderItem = (item) => (_jsx(MenuAction, { item: item, onDismiss: onDismiss, register: focus.register, tabIndex: selectTabIndex(focus, item.key), trackElement: (key, element) => {
+            if (element) {
+                itemElements.current.set(key, element);
+            }
+            else {
+                itemElements.current.delete(key);
+            }
+        } }, item.key));
+    const renderEntry = (entry) => {
+        if (entry.type === "separator") {
+            // A native `<hr>` — implicit `role="separator"`, and the one
+            // that does *not* need `aria-valuenow` (that is the focusable
+            // splitter kind, not a static rule between menu groups).
+            return (_jsx("hr", { className: "-mx-1 my-1 h-px border-0 bg-border-subtle" }, entry.key));
+        }
+        if (entry.type === "group") {
+            const headingId = `${menuId}-${entry.key}`;
+            return (_jsxs("div", { "aria-labelledby": headingId, role: "group", children: [_jsx("div", { className: "px-2 pt-1.5 pb-0.5 font-medium text-content-secondary text-xs", id: headingId, children: entry.label }), entry.items.map(renderItem)] }, entry.key));
+        }
+        return renderItem(entry);
+    };
+    // A **disabled** `menuitem`, not inert text: a `role="menu"` with
+    // no `menuitem` child fails `aria-required-children`, so the empty
+    // note has to be one — `aria-disabled` and `tabindex="-1"`, so it
+    // is announced ("No actions available, dimmed") but takes no tab
+    // stop and never joins the roving group. `null` when the consumer
+    // gave no `emptyState`, so an empty menu renders nothing.
+    const emptyElement = emptyState === undefined ? null : (_jsx("div", { "aria-disabled": "true", className: "px-2 py-1.5 text-content-disabled text-sm", role: "menuitem", tabIndex: -1, children: emptyState }));
     return (_jsxs(_Fragment, { children: [clonedTrigger, isVisible ? (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, 
                     // `false`, so Tab leaves the menu and lands on the next
                     // control in the page — which is what closes it, through
@@ -137,13 +189,8 @@ export const Menu = ({ className, isVisible, items, onDismiss, placement = "bott
                         // "menu" })` in the hook is where it comes from. Stated
                         // here because a linter cannot see a role through a
                         // spread.
-                        role: "menu", style: floatingStyles, children: items.map((item) => (_jsx(MenuAction, { item: item, onDismiss: onDismiss, register: focus.register, tabIndex: selectTabIndex(focus, item.key), trackElement: (key, element) => {
-                                if (element) {
-                                    itemElements.current.set(key, element);
-                                }
-                                else {
-                                    itemElements.current.delete(key);
-                                }
-                            } }, item.key))) }) }) })) : null] }));
+                        role: "menu", style: floatingStyles, children: hasAnyItem(items)
+                            ? items.map(renderEntry)
+                            : emptyElement }) }) })) : null] }));
 };
 //# sourceMappingURL=Menu.js.map

package/dist/Menu/Menu.js.map

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

package/dist/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,47 @@
+import type { ControlSize } from "@charcuterie/tokens";
+import type { ReactNode } from "react";
+export type RadioItem = {
+    /**
+     * A disabled option is simply **not registered** with the roving
+     * group, so the arrow keys skip it without any command in
+     * `RovingFocus` having to know what "disabled" means. It stays
+     * registered with the picker: it is still one of the options.
+     */
+    isDisabled?: boolean;
+    label: ReactNode;
+    value: string;
+};
+export type RadioGroupProps = {
+    className?: string;
+    items: readonly RadioItem[];
+    /** The group's accessible name. Required. */
+    label: string;
+    onChange?: (selectedValue: string | null) => void;
+    /** **Initial** only. Charcuterie owns it from then on. */
+    selectedValue?: string;
+    size?: ControlSize;
+};
+/**
+ * One choice out of many, each on its own row with a label the size
+ * of prose — the stacked sibling of `SegmentedControl`.
+ *
+ * The two are the *same* composition — `SinglePicker` + `RovingFocus`,
+ * a `radiogroup` of `radio`s where selection follows focus — and a
+ * different shape. `SegmentedControl` is a compact strip for a
+ * handful of short options that share a control row; `RadioGroup` is
+ * the form-length list where each option carries a real sentence and
+ * an in-line strip would wrap. Picking between them is layout, not
+ * behaviour, which is why the keyboard model here is identical and
+ * lives in the same two hooks.
+ *
+ * ### `radiogroup`, not a stack of checkboxes
+ *
+ * A column of `<input type="checkbox">` is the **independent
+ * toggles** pattern: nothing says the options are mutually
+ * exclusive, and a screen reader never announces "1 of 4". A single
+ * choice from a named set is a radio group, and its arrow keys both
+ * move focus and check — APG's one activation mode, the same reason
+ * `SegmentedControl` has no `manual` prop.
+ */
+export declare const RadioGroup: ({ className, items, label, onChange, selectedValue, size, }: RadioGroupProps) => ReactNode;
+//# sourceMappingURL=RadioGroup.d.ts.map

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

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

package/dist/RadioGroup/RadioGroup.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { selectTabIndex, useRovingFocus, useSinglePicker, } from "@charcuterie/logic";
+import { useCallback, useEffect, useRef } from "react";
+import { toClassName } from "../toClassName.js";
+import { RadioGroupOption } from "./RadioGroupOption.js";
+const GAP_CLASS = {
+    sm: "gap-1",
+    md: "gap-1.5",
+    lg: "gap-2",
+};
+/**
+ * One choice out of many, each on its own row with a label the size
+ * of prose — the stacked sibling of `SegmentedControl`.
+ *
+ * The two are the *same* composition — `SinglePicker` + `RovingFocus`,
+ * a `radiogroup` of `radio`s where selection follows focus — and a
+ * different shape. `SegmentedControl` is a compact strip for a
+ * handful of short options that share a control row; `RadioGroup` is
+ * the form-length list where each option carries a real sentence and
+ * an in-line strip would wrap. Picking between them is layout, not
+ * behaviour, which is why the keyboard model here is identical and
+ * lives in the same two hooks.
+ *
+ * ### `radiogroup`, not a stack of checkboxes
+ *
+ * A column of `<input type="checkbox">` is the **independent
+ * toggles** pattern: nothing says the options are mutually
+ * exclusive, and a screen reader never announces "1 of 4". A single
+ * choice from a named set is a radio group, and its arrow keys both
+ * move focus and check — APG's one activation mode, the same reason
+ * `SegmentedControl` has no `manual` prop.
+ */
+export const RadioGroup = ({ className, items, label, onChange, selectedValue, size = "md", }) => {
+    const groupRef = useRef(null);
+    const optionElements = useRef(new Map());
+    const initialValue = selectedValue ??
+        items.find((one) => !one.isDisabled)?.value ??
+        null;
+    const selection = useSinglePicker({
+        onChange,
+        selectedValue: initialValue,
+    });
+    const focus = useRovingFocus({
+        activeValue: initialValue,
+    });
+    const { select } = selection;
+    const { activeValue, setActiveValue } = focus;
+    /**
+     * Selected **or** pending. Members register from an effect, so on
+     * the first paint `selectedValue` is still null and the intent
+     * lives in `pendingValue` — reading only the former renders a
+     * group with nothing checked, then corrects itself a frame later.
+     */
+    const checkedValue = selection.selectedValue ?? selection.pendingValue;
+    const chooseOption = useCallback((value) => {
+        setActiveValue(value);
+        select(value);
+    }, [select, setActiveValue]);
+    useEffect(() => {
+        // Selection follows focus — the radio-group rule, and the one
+        // line a `manual` mode this component deliberately lacks would
+        // remove.
+        if (activeValue !== null) {
+            select(activeValue);
+        }
+    }, [activeValue, select]);
+    useEffect(() => {
+        const group = groupRef.current;
+        if (!group ||
+            activeValue === null ||
+            !group.contains(document.activeElement)) {
+            return;
+        }
+        optionElements.current.get(activeValue)?.focus();
+    }, [activeValue]);
+    return (_jsx("div", { "aria-label": label, className: toClassName("flex flex-col", GAP_CLASS[size], className), onKeyDown: (keyEvent) => {
+            const commands = {
+                ArrowDown: focus.next,
+                ArrowLeft: focus.previous,
+                ArrowRight: focus.next,
+                ArrowUp: focus.previous,
+                End: focus.last,
+                Home: focus.first,
+            };
+            const command = commands[keyEvent.key];
+            if (command) {
+                // Arrow keys scroll the page by default, and a control
+                // that scrolls the window while it moves focus is the
+                // hand-rolled version of this component.
+                keyEvent.preventDefault();
+                command();
+                return;
+            }
+            // Space checks the focused option. Selection already follows
+            // focus, so this is almost always a no-op — one idempotent
+            // command, not a second code path.
+            if (keyEvent.key === " " && activeValue !== null) {
+                keyEvent.preventDefault();
+                select(activeValue);
+            }
+        }, ref: groupRef, role: "radiogroup", children: items.map((item) => (_jsx(RadioGroupOption, { isChecked: checkedValue === item.value, item: item, onChoose: chooseOption, registerFocus: focus.register, registerSelection: selection.register, size: size, 
+            // The roving-tabindex rule read from the core rather than
+            // restated here: exactly one option is in the tab order, so
+            // Tab enters and leaves the group once.
+            tabIndex: selectTabIndex(focus, item.value), trackElement: (value, element) => {
+                if (element) {
+                    optionElements.current.set(value, element);
+                }
+                else {
+                    optionElements.current.delete(value);
+                }
+            } }, item.value))) }));
+};
+//# sourceMappingURL=RadioGroup.js.map

package/dist/RadioGroup/RadioGroup.js.map

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

package/dist/RadioGroup/RadioGroupOption.d.ts

@@ -0,0 +1,26 @@
+import type { ControlSize } from "@charcuterie/tokens";
+import type { ReactNode } from "react";
+import type { RadioItem } from "./RadioGroup.tsx";
+export type RadioGroupOptionProps = {
+    isChecked: boolean;
+    item: RadioItem;
+    onChoose: (value: string) => void;
+    /** `RovingFocus.register` — membership of the arrow-key group. */
+    registerFocus: (value: string) => () => void;
+    /** `SinglePicker.register` — membership of the choice. */
+    registerSelection: (value: string) => () => void;
+    size: ControlSize;
+    tabIndex: number;
+    trackElement: (value: string, element: HTMLButtonElement | null) => void;
+};
+/**
+ * Its own file for the same reason `SegmentedOption` is: **both
+ * registrations are effects**, and an effect cannot run in a loop.
+ *
+ * The ring and the dot are two elements rather than a bordered box
+ * with a background, so the checked dot can be centred by the grid
+ * and sized independently of the ring — a filled `bg-intent-accent`
+ * ring with no inner dot reads as a checkbox, not a radio.
+ */
+export declare const RadioGroupOption: ({ isChecked, item, onChoose, registerFocus, registerSelection, size, tabIndex, trackElement, }: RadioGroupOptionProps) => ReactNode;
+//# sourceMappingURL=RadioGroupOption.d.ts.map

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

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