@charcuterie/ui 0.1.1 → 1.0.0

package/dist/index.js

@@ -30,26 +30,39 @@
  * `@charcuterie/tokens/theme.css` by its own name, which is what
  * this package's README has always told it to do.
  */
+export { Accordion } from "./Accordion/Accordion.js";
 export { Alert } from "./Alert/Alert.js";
 export { Badge } from "./Badge/Badge.js";
 export { Button } from "./Button/Button.js";
 export { Card } from "./Card/Card.js";
 export { BADGE_SIZE_CLASS, CONTROL_SIZE_CLASS, DOT_SIZE_CLASS, ICON_CONTROL_SIZE_CLASS, MIN_TOUCH_TARGET_CLASS, SPINNER_SIZE_CLASS, } from "./controlStyles.js";
 export { EmptyState } from "./EmptyState/EmptyState.js";
+export { Field } from "./Field/Field.js";
+export { FieldGroup } from "./Field/FieldGroup.js";
+export { FileDropZone } from "./FileDropZone/FileDropZone.js";
 export { IconButton } from "./IconButton/IconButton.js";
 export { DISABLED_CLASS, FOCUS_RING_CLASS, INTENT_APPEARANCE_CLASS, INTENT_CONTENT_CLASS, INTENT_HOVER_CLASS, INTENT_SOLID_FILL_CLASS, } from "./intentStyles.js";
 export { LiveStatusIndicator } from "./LiveStatusIndicator/LiveStatusIndicator.js";
+export { LogViewer } from "./LogViewer/LogViewer.js";
 export { MediaTile } from "./MediaTile/MediaTile.js";
 export { mediaTransitions } from "./MediaTile/mediaStatus.js";
+export { Menu } from "./Menu/Menu.js";
 export { Modal } from "./Modal/Modal.js";
 export { Popover } from "./Popover/Popover.js";
 export { ProgressBar } from "./ProgressBar/ProgressBar.js";
 export { getProgressIntent, toProgressPercent, toProgressValue, } from "./ProgressBar/progressValue.js";
 export { SegmentedControl } from "./SegmentedControl/SegmentedControl.js";
+export { Select } from "./Select/Select.js";
 export { Skeleton } from "./Skeleton/Skeleton.js";
+export { SortableTableHeader } from "./SortableTableHeader/SortableTableHeader.js";
 export { Spinner } from "./Spinner/Spinner.js";
+export { mergeSlotProps } from "./slotProps.js";
 export { getAsyncIntent, getAsyncLabel, getConnectionIntent, getConnectionLabel, getIsConnectionBusy, } from "./statusIntent.js";
 export { Tabs } from "./Tabs/Tabs.js";
+export { Toast } from "./Toast/Toast.js";
+export { ToastRegion } from "./Toast/ToastRegion.js";
+export { toastTransitions } from "./Toast/toastLifecycle.js";
+export { Tooltip } from "./Tooltip/Tooltip.js";
 export { toClassName } from "./toClassName.js";
 export { VisuallyHidden } from "./VisuallyHidden/VisuallyHidden.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAMH,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAM5C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAEtC,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,oBAAoB,CAAA;AAK3B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,uBAAuB,EACvB,oBAAoB,EACpB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,mBAAmB,CAAA;AAK1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAKnF,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAK7D,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAK/C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA+B,CAAA;AAE3D,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,GAChB,MAAM,gCAAgC,CAAA;AAKvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAyC,CAAA;AAK1E,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAC/C,OAAO,EACL,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,mBAAmB,CAAA;AAO1B,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAqC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAOH,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAKrD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAM5C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAEtC,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,oBAAoB,CAAA;AAK3B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAwB,CAAA;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAiC,CAAA;AAE9D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,uBAAuB,EACvB,oBAAoB,EACpB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,mBAAmB,CAAA;AAK1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAKnF,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAKrD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAK7D,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAKtC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAK/C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA+B,CAAA;AAE3D,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,GAChB,MAAM,gCAAgC,CAAA;AAKvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAyC,CAAA;AAO1E,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAK5C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAKlD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAEnF,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAE/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EACL,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,mBAAmB,CAAA;AAO1B,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAKzC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAyB,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAqC,CAAA"}

package/dist/mountStory.testHelpers.d.ts

@@ -11,17 +11,6 @@ type MountableStory = {
         canvasElement: HTMLElement;
     }) => Promise<void>;
 };
-/**
- * Mount a composed story into a fresh canvas and hand back the same
- * two things a `play` function used to receive.
- *
- * `run()` — rather than rendering the component directly — is what
- * keeps these tests honest after the story/test split: the subject
- * is the story a reader sees, with its args, its decorators, and its
- * loaders, not a second assembly of the same component that can
- * drift from it. It is also what triggers the a11y addon's
- * `afterEach`, so every mount here is an axe run.
- */
 export declare const mountStory: (story: MountableStory) => Promise<{
     canvas: Canvas;
     canvasElement: HTMLElement;

package/dist/mountStory.testHelpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mountStory.testHelpers.d.ts","sourceRoot":"","sources":["../src/mountStory.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAA;AAEvC;;;;;GAKG;AACH,KAAK,cAAc,GAAG;IACpB,GAAG,EAAE,CAAC,OAAO,EAAE;QACb,aAAa,EAAE,WAAW,CAAA;KAC3B,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACpB,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,GACrB,OAAO,cAAc,KACpB,OAAO,CAAC;IACT,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,WAAW,CAAA;CAC3B,CAQA,CAAA"}
+{"version":3,"file":"mountStory.testHelpers.d.ts","sourceRoot":"","sources":["../src/mountStory.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAA;AAEvC;;;;;GAKG;AACH,KAAK,cAAc,GAAG;IACpB,GAAG,EAAE,CAAC,OAAO,EAAE;QACb,aAAa,EAAE,WAAW,CAAA;KAC3B,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACpB,CAAA;AAqCD,eAAO,MAAM,UAAU,GACrB,OAAO,cAAc,KACpB,OAAO,CAAC;IACT,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,WAAW,CAAA;CAC3B,CAcA,CAAA"}

package/dist/mountStory.testHelpers.js

@@ -10,9 +10,36 @@ import { within } from "storybook/test";
  * drift from it. It is also what triggers the a11y addon's
  * `afterEach`, so every mount here is an axe run.
  */
+/**
+ * Every canvas this helper has created, so the next mount can take
+ * the previous ones out of the document.
+ *
+ * They used to accumulate — one detached-but-attached `<div>` per
+ * test, for the whole file — and nothing noticed for three
+ * milestones, because every component up to M6 lays out **in
+ * flow**: a stale copy sits harmlessly below the live one and every
+ * query is scoped to its own canvas anyway.
+ *
+ * `ToastRegion` is the first `position: fixed` component in the
+ * library, and it broke that immediately. A previous test's toast
+ * stack is pinned to the same corner of the viewport as the live
+ * one, so `userEvent.click` — which clicks by **coordinates** —
+ * drove the wrong element while every query still returned the
+ * right one. The test failed with "the toast did not go away", one
+ * test after the toast it was actually clicking.
+ *
+ * The stale tree is removed rather than unmounted because portable
+ * stories expose no unmount. Detaching is enough: it takes the node
+ * out of the layout, which is the entire problem.
+ */
+const mountedCanvases = [];
 export const mountStory = async (story) => {
+    for (const previous of mountedCanvases.splice(0)) {
+        previous.remove();
+    }
     const canvasElement = document.createElement("div");
     document.body.append(canvasElement);
+    mountedCanvases.push(canvasElement);
     await story.run({ canvasElement });
     return { canvas: within(canvasElement), canvasElement };
 };

package/dist/mountStory.testHelpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"mountStory.testHelpers.js","sourceRoot":"","sources":["../src/mountStory.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAgBvC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,EAC7B,KAAqB,EAIpB,EAAE;IACH,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAEnD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;IAEnC,MAAM,KAAK,CAAC,GAAG,CAAC,EAAE,aAAa,EAAE,CAAC,CAAA;IAElC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC,EAAE,aAAa,EAAE,CAAA;AACzD,CAAC,CAAA"}
+{"version":3,"file":"mountStory.testHelpers.js","sourceRoot":"","sources":["../src/mountStory.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAgBvC;;;;;;;;;;GAUG;AACH;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,eAAe,GAAkB,EAAE,CAAA;AAEzC,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,EAC7B,KAAqB,EAIpB,EAAE;IACH,KAAK,MAAM,QAAQ,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QACjD,QAAQ,CAAC,MAAM,EAAE,CAAA;IACnB,CAAC;IAED,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAEnD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;IAEnC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;IAEnC,MAAM,KAAK,CAAC,GAAG,CAAC,EAAE,aAAa,EAAE,CAAC,CAAA;IAElC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC,EAAE,aAAa,EAAE,CAAA;AACzD,CAAC,CAAA"}

package/dist/slotProps.d.ts

@@ -0,0 +1,110 @@
+import type { InputHTMLAttributes } from "react";
+/**
+ * The props a **cloning ancestor** injects into the control below it.
+ *
+ * `Field` and `Tooltip` both take one child and `cloneElement` onto
+ * it — "cloned, not wrapped", which is what lets a `Field` go around
+ * an `<input>`, a `Select`, or an app's own control without changing
+ * that control's layout. The contract has a hole in it the moment two
+ * of them are nested:
+ *
+ * ```tsx
+ * <Field label="Pattern" isRequired>
+ *   <Tooltip label="A JavaScript regular expression">
+ *     <input />
+ *   </Tooltip>
+ * </Field>
+ * ```
+ *
+ * `Field` clones onto the **`Tooltip` element**, so `id`,
+ * `aria-describedby`, `aria-invalid` and `required` are handed to a
+ * component that declares none of them — and `cloneElement` does not
+ * care. React drops them without a warning, TypeScript never sees
+ * them (`Children.only` returns a `ReactElement` with `any` props),
+ * every test still passes, and the render is pixel-identical. The
+ * `<label>` then points at an `id` that is nowhere in the document.
+ *
+ * **Silent prop-dropping is the worst version of this**, so the rule
+ * is: *a slot component is a pass-through*. Anything in `SlotProps`
+ * that arrives from above is forwarded to the child this component
+ * clones onto, so a chain of slots behaves like the one control at
+ * the bottom of it.
+ *
+ * ### The list is closed, the forwarding is not
+ *
+ * Worth being exact, because the two are easy to conflate. This type
+ * is a closed list of five keys rather than an index signature: it is
+ * exactly the wiring `Field` writes plus the wiring `Tooltip` writes,
+ * it is greppable, and it is the set whose **merge semantics are
+ * defined** — which for four of them is last-write-wins and for
+ * `aria-describedby` is a join.
+ *
+ * The *runtime* forwards everything. Both components collect their
+ * received props with a rest spread and `mergeSlotProps` starts from
+ * `...receivedProps`, so an ancestor's `onPointerEnter`, its
+ * `onFocus`, its `ref` — none of which are named here — reach the
+ * control at the bottom too. That is not an oversight, it is load
+ * bearing: a `Tooltip` around a `Field` hands down `useHover`,
+ * `useFocus`, `useDismiss` and `refs.setReference`, and a `Field`
+ * that forwarded only the five keys below would leave the tip with no
+ * trigger and no anchor. A closed *runtime* filter would be
+ * mux-magic's `FieldTooltip` defect rebuilt inside the fix for it.
+ *
+ * The five keys, and who writes them:
+ *
+ * | Key | Written by |
+ * | --- | --- |
+ * | `aria-describedby` | `Field` (its description and its error) **and** `Tooltip` (its tip) — the one key that is a list, and the reason `mergeSlotProps` exists |
+ * | `aria-invalid` | `Field`, derived from `error` being present |
+ * | `aria-required` | `Field`, from `isRequired` — the announced constraint, for a composite control the browser does not validate |
+ * | `id` | `Field`, so its `<label htmlFor>` has something to point at. A caller may also pass one directly, which is how a consumer pins a stable id for a deep link or an autofill hint |
+ * | `required` | `Field`, from `isRequired` — the constraint the browser validates |
+ *
+ * ### Why these are `Pick`ed and not written out
+ *
+ * Three of the five are booleans whose names cannot start with `is`
+ * or `has`, because they are not our names — they are the DOM's, and
+ * they are spread onto a DOM node verbatim. The house rule has
+ * [no carve-out](../../../docs/decisions/2026-07-29-is-has-rule-has-no-external-api-carve-out.md)
+ * for that: a *type property* is a shape we own, an object literal
+ * key is someone else's contract, and no `eslint-disable` is
+ * available because unused disable directives are themselves an
+ * error.
+ *
+ * So this type does not declare a shape. It **selects** one out of
+ * React's own `InputHTMLAttributes`, which is the honest description
+ * of what it is: five keys of the props React already types for an
+ * `<input>`, forwarded unchanged. The same reasoning as the
+ * `Record<string, boolean>` in `createReactAdapter` — we are not
+ * describing React's shape, we are naming the keys of it we touch —
+ * and it has the side benefit that `aria-invalid` gets React's real
+ * type (`"grammar"` and `"spelling"` are legal values) rather than
+ * the `boolean` a hand-written version would have narrowed it to.
+ */
+export type SlotProps = Pick<InputHTMLAttributes<HTMLElement>, "aria-describedby" | "aria-invalid" | "aria-required" | "id" | "required">;
+/**
+ * Merge what arrived from above with what this component writes
+ * itself.
+ *
+ * Everything here is a single value and last-write-wins is correct
+ * for it — **except `aria-describedby`, which is a list**. Two slot
+ * components each writing their own onto one control is the entire
+ * nesting problem in one attribute: a `Field` naming its description
+ * and its error, and a `Tooltip` naming its tip. A plain spread keeps
+ * one of them and loses the other, which is the same silent drop by a
+ * shorter route.
+ *
+ * **Outer first.** A screen reader reads the list in order, and the
+ * field's own description and error are the control's primary
+ * explanation; a tip is supplementary by construction. The ordering
+ * inside a single `Field` — description, then error — is `Field`'s
+ * own concern and is unaffected.
+ *
+ * `undefined` in `ownProps` is *absence*, not an instruction to
+ * clear. Both callers spell their optional wiring as
+ * `isRequired || undefined`, so a plain spread would let an inner
+ * `Field` with no error erase an outer one's `aria-invalid` — the
+ * same silent drop, one level down.
+ */
+export declare const mergeSlotProps: <OwnProps extends Record<string, unknown>>(receivedProps: SlotProps, ownProps: OwnProps) => OwnProps & SlotProps;
+//# sourceMappingURL=slotProps.d.ts.map

package/dist/slotProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotProps.d.ts","sourceRoot":"","sources":["../src/slotProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AACH,MAAM,MAAM,SAAS,GAAG,IAAI,CAC1B,mBAAmB,CAAC,WAAW,CAAC,EAC9B,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,IAAI,GACJ,UAAU,CACb,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,cAAc,GACzB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAExC,eAAe,SAAS,EACxB,UAAU,QAAQ,KACjB,QAAQ,GAAG,SAoBb,CAAA"}

package/dist/slotProps.js

@@ -0,0 +1,39 @@
+/**
+ * Merge what arrived from above with what this component writes
+ * itself.
+ *
+ * Everything here is a single value and last-write-wins is correct
+ * for it — **except `aria-describedby`, which is a list**. Two slot
+ * components each writing their own onto one control is the entire
+ * nesting problem in one attribute: a `Field` naming its description
+ * and its error, and a `Tooltip` naming its tip. A plain spread keeps
+ * one of them and loses the other, which is the same silent drop by a
+ * shorter route.
+ *
+ * **Outer first.** A screen reader reads the list in order, and the
+ * field's own description and error are the control's primary
+ * explanation; a tip is supplementary by construction. The ordering
+ * inside a single `Field` — description, then error — is `Field`'s
+ * own concern and is unaffected.
+ *
+ * `undefined` in `ownProps` is *absence*, not an instruction to
+ * clear. Both callers spell their optional wiring as
+ * `isRequired || undefined`, so a plain spread would let an inner
+ * `Field` with no error erase an outer one's `aria-invalid` — the
+ * same silent drop, one level down.
+ */
+export const mergeSlotProps = (receivedProps, ownProps) => {
+    const definedOwnProps = Object.fromEntries(Object.entries(ownProps).filter(([, value]) => value !== undefined));
+    const describedBy = [
+        receivedProps["aria-describedby"],
+        ownProps["aria-describedby"],
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return {
+        ...receivedProps,
+        ...definedOwnProps,
+        "aria-describedby": describedBy === "" ? undefined : describedBy,
+    };
+};
+//# sourceMappingURL=slotProps.js.map

package/dist/slotProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotProps.js","sourceRoot":"","sources":["../src/slotProps.ts"],"names":[],"mappings":"AA6FA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAG5B,aAAwB,EACxB,QAAkB,EACI,EAAE;IACxB,MAAM,eAAe,GAAG,MAAM,CAAC,WAAW,CACxC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAC7B,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS,CACnC,CACU,CAAA;IAEb,MAAM,WAAW,GAAG;QAClB,aAAa,CAAC,kBAAkB,CAAC;QACjC,QAAQ,CAAC,kBAAkB,CAAC;KAC7B;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAA;IAEZ,OAAO;QACL,GAAG,aAAa;QAChB,GAAG,eAAe;QAClB,kBAAkB,EAChB,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW;KAC/C,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",
@@ -43,8 +43,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@charcuterie/logic": "0.1.0",
-    "@charcuterie/tokens": "0.2.0",
+    "@charcuterie/logic": "1.0.0",
+    "@charcuterie/tokens": "1.0.0",
     "@floating-ui/react": "^0.27.20"
   },
   "peerDependencies": {

package/src/Accordion/Accordion.mdx

@@ -0,0 +1,83 @@
+import { Canvas, Controls, Meta } from "@storybook/addon-docs/blocks";
+
+import * as AccordionStories from "./Accordion.stories";
+
+<Meta of={AccordionStories} />
+
+# Accordion
+
+Eleven sites in the fleet. The plan called it "nearly free once `Tabs` exists" — it is, the
+exclusive mode is `VisibilityGroup` and nothing else — but the saving is not why it ships.
+
+<Canvas of={AccordionStories.Default} />
+
+## Props
+
+<Controls />
+
+## The two-owners bug, live, in the app this milestone migrates
+
+mux-magic's `JobStepsDisclosure` is built on `<details>`, and `<details>` **owns `open`**. It
+also wants the state in a Jotai atom so a job can be expanded from elsewhere. Reconciling
+the two takes three separate mechanisms:
+
+```tsx
+const detailsRef = useRef<HTMLDetailsElement>(null)
+const skipNextToggleRef = useRef(isOpen)
+
+useEffect(() => {
+  if (detailsRef.current) detailsRef.current.open = isOpen
+}, [isOpen])
+
+const handleToggle = (event) => {
+  if (skipNextToggleRef.current) {
+    skipNextToggleRef.current = false
+    return          // ← swallow the toggle our own write just fired
+  }
+  setStepsOpen(…)
+}
+```
+
+A ref to reach past React, an effect to push state into the DOM, and a guard to stop the
+DOM's echo coming back. Every one of the three exists only because **two things hold one
+fact** — the Radix argument from `Popover`, aimed at the platform this time.
+
+So this is a `<button aria-expanded>` and a `role="region"`, with `VisibilityGroup` holding
+the state alone.
+
+## Why not `<details name="…">`
+
+The platform *does* now ship an exclusive accordion, and it was still rejected:
+
+| | `<details name>` | This |
+| --- | --- | --- |
+| Who owns `open` | the DOM | `VisibilityGroup` |
+| Disabled section | **impossible** — a `<summary>` cannot be disabled | not registered, so not a member |
+| Driven from elsewhere | ref + effect + echo guard | pass `expandedKeys` |
+| Panel keeps scroll/subscriptions | yes | yes (`hidden`, not unmounted) |
+
+The second row is the one that settles it: four of the eleven sites have a section that is
+unreachable until a job produces it.
+
+<Canvas of={AccordionStories.AllVariants} />
+
+## Two kinds, one component
+
+`isMultiple` picks between `VisibilityGroup` and `MultiplePicker`. Hooks cannot be
+conditional, so **both are created and one is consulted** — two empty stores and no DOM.
+
+The alternative is reimplementing exclusivity on top of `MultiplePicker` by deselecting the
+others, which is precisely the logic `VisibilityGroup` exists to own once.
+
+## Registration is membership
+
+A disabled section never registers, so nothing can expand it — including a consumer passing
+its key in `expandedKeys`. `AllStates` does exactly that, on purpose.
+
+<Canvas of={AccordionStories.AllStates} />
+
+## The heading level is the caller's
+
+An accordion inside a `Card` that already has an `<h2>` needs `headingLevel={3}`. Getting it
+wrong is a document-outline break that **no gate in this repo can see** — it depends
+entirely on the page the accordion lands on, so it is a prop rather than a constant.

package/src/Accordion/Accordion.stories.tsx

@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Badge } from "../Badge/Badge.tsx"
+import {
+  StoryCell,
+  StoryGrid,
+} from "../board.storyHelpers.tsx"
+import type { AccordionItem } from "./Accordion.tsx"
+import { Accordion } from "./Accordion.tsx"
+
+const JOB_SECTIONS: AccordionItem[] = [
+  {
+    content: (
+      <p>Blade Runner (1982) · 9 titles · MakeMKV 1.17.8</p>
+    ),
+    key: "disc",
+    label: "Disc",
+  },
+  {
+    content: (
+      <p className="font-mono text-xs">
+        14:02:11 AACS handshake complete, reading…
+      </p>
+    ),
+    key: "log",
+    label: "Log",
+  },
+  {
+    content: (
+      <div className="flex gap-2">
+        <Badge intent="warning" size="sm">
+          1 retry
+        </Badge>
+
+        <Badge intent="info" size="sm">
+          AACS
+        </Badge>
+      </div>
+    ),
+    key: "flags",
+    label: "Flags",
+  },
+]
+
+const STATE_SECTIONS: AccordionItem[] = [
+  ...JOB_SECTIONS,
+  {
+    content: <p>Unreachable — no verdict yet.</p>,
+    isDisabled: true,
+    key: "verdict",
+    label: "Verdict",
+  },
+]
+
+const meta = {
+  title: "Components/Accordion",
+  component: Accordion,
+  parameters: { layout: "padded" },
+  args: {
+    headingLevel: 3,
+    isMultiple: false,
+    items: JOB_SECTIONS,
+  },
+} satisfies Meta<typeof Accordion>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { expandedKeys: ["disc"], items: JOB_SECTIONS },
+}
+
+/**
+ * Exclusive is `VisibilityGroup`; `isMultiple` is
+ * `MultiplePicker`. Both hooks are created and one is consulted,
+ * because hooks cannot be conditional — two empty stores and no DOM,
+ * which is cheaper than reimplementing exclusivity on top of the
+ * multiple kind.
+ */
+export const AllVariants: Story = {
+  args: { items: JOB_SECTIONS },
+  render: () => (
+    <StoryGrid columns={2}>
+      <StoryCell label="exclusive (default)">
+        <Accordion
+          expandedKeys={["disc"]}
+          items={JOB_SECTIONS}
+        />
+      </StoryCell>
+
+      <StoryCell label="multiple">
+        <Accordion
+          expandedKeys={["disc", "flags"]}
+          isMultiple
+          items={JOB_SECTIONS}
+        />
+      </StoryCell>
+
+      <StoryCell label="all collapsed">
+        <Accordion items={JOB_SECTIONS} />
+      </StoryCell>
+
+      {/*
+        Its own item set, with names that appear nowhere else on the
+        board. Four accordions sharing three labels means
+        `getByRole("heading", { name: "Log" })` matches four
+        elements, and `expectAgentDrivable` treats ambiguity as a
+        failure — correctly, since an agent would be picking one at
+        random.
+      */}
+      <StoryCell label="heading level 2">
+        <Accordion
+          expandedKeys={["steps"]}
+          headingLevel={2}
+          items={[
+            {
+              content: <p>4 of 9 titles complete.</p>,
+              key: "steps",
+              label: "Steps",
+            },
+            {
+              content: <p>No errors.</p>,
+              key: "errors",
+              label: "Errors",
+            },
+          ]}
+        />
+      </StoryCell>
+    </StoryGrid>
+  ),
+}
+
+/**
+ * A disabled section is **not a member of the group**. Registration
+ * is membership, so nothing can expand it — including a consumer
+ * passing its key in `expandedKeys`. That is the behaviour a
+ * `<summary>` cannot have at all, which is one of the two reasons
+ * this is not built on `<details>`.
+ */
+export const AllStates: Story = {
+  args: {
+    expandedKeys: ["verdict"],
+    items: STATE_SECTIONS,
+  },
+}