@charcuterie/ui 4.5.0 → 4.6.0

package/README.md

@@ -284,8 +284,13 @@ rename breaks only the rendered page).
    ([decision](../../docs/decisions/2026-08-21-a-deprecation-is-a-badge-in-place-and-the-sidebar-has-groups.md)).
 2. Colours from `intentStyles.ts`, sizes from `controlStyles.ts`. No hex, no `*-slate-*`
    (a test checks).
-3. The five stories: `Default`, `AllVariants`, `AllStates`, `Responsive` (three container
-   widths, via `ContainerBoard`), `Interactive` (the complete keyboard path).
+3. The five stories: `Playground`, `AllVariants`, `AllStates`, `Responsive` (three
+   container widths, via `ContainerBoard`), `Interactive` (the complete keyboard path).
+   **`Playground` is the only one that carries `parameters: playgroundParameters`.** The
+   addon panel is closed on every story in this Storybook, and that line is how the one
+   story whose `args` drive a single instance opens it again. The other four render their
+   own matrix, so a control moves at most one cell of the board
+   ([decision](../../docs/decisions/2026-09-13-the-addon-panel-is-closed-except-on-the-playground-story.md)).
 4. Export from `src/index.ts` — the one sanctioned barrel. Components import each other
    directly, never through it.
 5. **If it is an overlay, portal it to the body** — `FloatingPortal`, through

package/dist/Card/Card.d.ts

@@ -41,7 +41,10 @@ export declare const ELEVATION_CLASS: Record<ElevationStep, string>;
  *
  * `aria-labelledby` rather than `aria-label`, because the heading is
  * on screen already and stating the name twice is how the two drift
- * apart.
+ * apart. A card with **no** `heading` keeps the `aria-labelledby`
+ * the call site passed, for the app that draws its own title row
+ * inside the card — the name still points at text on screen, which
+ * is the same rule one level out.
  *
  * **Density is not a prop here.** mux-magic's inventory turned up a
  * `CardDensityProvider` in the withdrawn bambuddy evidence, and it
@@ -51,5 +54,5 @@ export declare const ELEVATION_CLASS: Record<ElevationStep, string>;
  * because a card wrapping a poster grid genuinely has none, which is
  * a layout fact rather than a density one.
  */
-export declare const Card: ({ accentEdge, actions, children, className, elevation, footer, heading, headingLevel, padding, style, surface, ...sectionProps }: CardProps) => ReactNode;
+export declare const Card: ({ "aria-labelledby": ariaLabelledBy, accentEdge, actions, children, className, elevation, footer, heading, headingLevel, padding, style, surface, ...sectionProps }: CardProps) => ReactNode;
 //# sourceMappingURL=Card.d.ts.map

package/dist/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAMzD,MAAM,MAAM,WAAW,GAAG,OAAO,CAC/B,WAAW,EACX,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAC7B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;AAErD,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,SAAS,CAAC,GAAG;IACzD;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB,CAAA;AAQD;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAClC,aAAa,EACb,MAAM,CAMP,CAAA;AASD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,GAAI,kIAalB,SAAS,KAAG,SAmEd,CAAA"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACZ,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAMzD,MAAM,MAAM,WAAW,GAAG,OAAO,CAC/B,WAAW,EACX,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAC7B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;AAErD,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,SAAS,CAAC,GAAG;IACzD;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,OAAO,CAAC,EAAE,WAAW,CAAA;CACtB,CAAA;AAQD;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAClC,aAAa,EACb,MAAM,CAMP,CAAA;AASD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,IAAI,GAAI,qKAclB,SAAS,KAAG,SAqFd,CAAA"}

package/dist/Card/Card.js

@@ -36,7 +36,10 @@ const PADDING_CLASS = {
  *
  * `aria-labelledby` rather than `aria-label`, because the heading is
  * on screen already and stating the name twice is how the two drift
- * apart.
+ * apart. A card with **no** `heading` keeps the `aria-labelledby`
+ * the call site passed, for the app that draws its own title row
+ * inside the card — the name still points at text on screen, which
+ * is the same rule one level out.
  *
  * **Density is not a prop here.** mux-magic's inventory turned up a
  * `CardDensityProvider` in the withdrawn bambuddy evidence, and it
@@ -46,7 +49,7 @@ const PADDING_CLASS = {
  * because a card wrapping a poster grid genuinely has none, which is
  * a layout fact rather than a density one.
  */
-export const Card = ({ accentEdge, actions, children, className, elevation = "low", footer, heading, headingLevel = 2, padding = "md", style, surface = "raised", ...sectionProps }) => {
+export const Card = ({ "aria-labelledby": ariaLabelledBy, accentEdge, actions, children, className, elevation = "low", footer, heading, headingLevel = 2, padding = "md", style, surface = "raised", ...sectionProps }) => {
     const headingId = useUniqueId();
     // The caller's own `style` wins. An accent colour is one custom
     // property, and silently dropping whatever else the call site set
@@ -57,8 +60,25 @@ export const Card = ({ accentEdge, actions, children, className, elevation = "lo
     const mergedStyle = accentEdgeStyle == null
         ? style
         : { ...accentEdgeStyle, ...style };
+    // The caller's own pointer is the FALLBACK, not the loser. This
+    // attribute is written *after* the spread, so `undefined` here
+    // does not mean "leave whatever the call site passed": it
+    // overwrites it, React then drops the attribute entirely, and the
+    // card's accessible name falls back to its whole subtree with
+    // nothing failing — not typecheck, not axe, not a render. A
+    // `role="button"` tile in mail-sifter naming itself
+    // `aria-labelledby="recent-tile-heading"` announced as "Recent
+    // Mail 6 40 arrived in the last 24 hours, 34 done".
+    //
+    // `heading` still wins when it is given, because that is the name
+    // the reader can see and this component renders it. Do not
+    // "simplify" this back to a ternary ending in `undefined`.
+    //
+    // `aria-label` needs no equivalent: the component never writes
+    // one, so the spread carries the caller's through untouched.
+    const labelledById = heading ? headingId : ariaLabelledBy;
     const Heading = `h${headingLevel}`;
-    return (_jsxs("section", { ...sectionProps, "aria-labelledby": heading ? headingId : undefined, className: toClassName(
+    return (_jsxs("section", { ...sectionProps, "aria-labelledby": labelledById, className: toClassName(
         // `@container` here, not on a wrapper, is what lets the
         // header stack at narrow widths *inside a wide viewport* —
         // a card in a sidebar and the same card full-bleed are the

package/dist/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAUhD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EACL,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,qBAAqB,CAAA;AA8B5B,MAAM,aAAa,GAAgC;IACjD,IAAI,EAAE,iBAAiB;IACvB,MAAM,EAAE,mBAAmB;IAC3B,MAAM,EAAE,mBAAmB;CAC5B,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAGxB;IACF,IAAI,EAAE,aAAa;IACnB,GAAG,EAAE,YAAY;IACjB,MAAM,EAAE,eAAe;IACvB,IAAI,EAAE,aAAa;CACpB,CAAA;AAED,MAAM,aAAa,GAAgC;IACjD,IAAI,EAAE,KAAK;IACX,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;CACV,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,UAAU,EACV,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,MAAM,EACN,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,OAAO,GAAG,IAAI,EACd,KAAK,EACL,OAAO,GAAG,QAAQ,EAClB,GAAG,YAAY,EACL,EAAa,EAAE;IACzB,MAAM,SAAS,GAAG,WAAW,EAAE,CAAA;IAE/B,gEAAgE;IAChE,kEAAkE;IAClE,4DAA4D;IAC5D,MAAM,eAAe,GACnB,UAAU,IAAI,IAAI;QAChB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAA;IAEpC,MAAM,WAAW,GACf,eAAe,IAAI,IAAI;QACrB,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAE,CAAA;IAEtC,MAAM,OAAO,GAAG,IAAI,YAAY,EAAW,CAAA;IAE3C,OAAO,CACL,sBACM,YAAY,qBACC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAChD,SAAS,EAAE,WAAW;QACpB,wDAAwD;QACxD,2DAA2D;QAC3D,2DAA2D;QAC3D,wDAAwD;QACxD,0DAA0D;QAC1D,4FAA4F,EAC5F,aAAa,CAAC,OAAO,CAAC,EACtB,eAAe,CAAC,SAAS,CAAC,EAC1B,aAAa,CAAC,OAAO,CAAC,EACtB,UAAU,IAAI,IAAI;YAChB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,sBAAsB,CAAC,UAAU,CAAC,EACtC,SAAS,CACV,EACD,KAAK,EAAE,WAAW,aAEjB,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CACpB,kBAAQ,SAAS,EAAC,4EAA4E,aAC3F,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,OAAO,IACN,SAAS,EAAC,qCAAqC,EAC/C,EAAE,EAAE,SAAS,YAEZ,OAAO,GACA,CACX,CAAC,CAAC,CAAC,IAAI,EAEP,OAAO,CAAC,CAAC,CAAC,CACT,cAAK,SAAS,EAAC,kCAAkC,YAC9C,OAAO,GACJ,CACP,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CAAC,CAAC,CAAC,IAAI,EAEP,QAAQ,EAER,MAAM,CAAC,CAAC,CAAC,CACR,iBAAQ,SAAS,EAAC,mEAAmE,YAClF,MAAM,GACA,CACV,CAAC,CAAC,CAAC,IAAI,IACA,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}

package/dist/Overlay/OverlayPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanel.d.ts","sourceRoot":"","sources":["../../src/Overlay/OverlayPanel.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC5C,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,6IAU1B,iBAAiB,KAAG,SA0HtB,CAAA"}
+{"version":3,"file":"OverlayPanel.d.ts","sourceRoot":"","sources":["../../src/Overlay/OverlayPanel.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC5C,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,6IAU1B,iBAAiB,KAAG,SAuLtB,CAAA"}

package/dist/Overlay/OverlayPanel.js

@@ -30,11 +30,46 @@ export const OverlayPanel = ({ "aria-label": ariaLabel, "aria-labelledby": ariaL
             // `outsidePress` on a *lower* modal would close it too, so it is
             // scoped to the top — which is also why the scrim needs no click
             // handler of its own.
-            outsidePress: isDismissable && isTop,
+            outsidePress: (event) => {
+                if (!isDismissable || !isTop)
+                    return false;
+                /*
+                 * ⚠️ A press on a toast is NOT an outside press.
+                 *
+                 * A `ToastRegion` renders in the page, so floating-ui sees a
+                 * press on its Undo as a press outside the floating element
+                 * — and closing the modal on the way to taking an action
+                 * back is the opposite of what the button says. The region
+                 * marks itself with `data-charcuterie-toast-region`; nothing
+                 * else in the fleet carries that attribute.
+                 *
+                 * ⚠️ Do not delete this on the evidence of a small story.
+                 * floating-ui has a *second*, accidental guard that hides
+                 * this one: `closeOnPressOutside` bails out early when the
+                 * press target's body-level ancestor contains none of the
+                 * `[data-floating-ui-inert]` markers `markOthers` left
+                 * behind, on the theory that such an element was injected
+                 * after the panel opened. A page that is nothing but a
+                 * region takes that branch and never reaches this predicate
+                 * at all. A page with content beside the region — every real
+                 * app — does reach it. `Toast.stories.tsx`'s
+                 * `OverStackedModals` carries a heading and a paragraph for
+                 * exactly that reason, and `ToastRegion.test.tsx` fails
+                 * without this predicate only because they are there.
+                 */
+                const target = event.target;
+                return (target?.closest?.("[data-charcuterie-toast-region]") == null);
+            },
         }),
         useRole(context, { role }),
     ]);
     const { register, unregister } = stack;
+    /**
+     * Where this panel sits in the stack, and therefore how far above
+     * `--layer-modal` it paints. `0` when unprovided — a lone `Modal`
+     * is the only thing open.
+     */
+    const stackIndex = Math.max(stack.orderedIds.indexOf(id), 0);
     useEffect(() => {
         if (!isVisible) {
             return;
@@ -58,7 +93,24 @@ export const OverlayPanel = ({ "aria-label": ariaLabel, "aria-labelledby": ariaL
     if (!isVisible) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [stack.isProvided ? null : (_jsx(SharedBackdrop, { isVisible: true })), _jsx(FloatingPortal, { children: _jsx("div", { className: "fixed inset-0 z-[var(--layer-modal)] flex items-center justify-center", children: _jsx(FloatingFocusManager, { context: context, 
+    return (_jsxs(_Fragment, { children: [stack.isProvided ? null : (_jsx(SharedBackdrop, { isVisible: true })), _jsx(FloatingPortal, { children: _jsx("div", { className: "fixed inset-0 flex items-center justify-center", 
+                    /*
+                     * ⚠️ Cascading, not one shared layer.
+                     *
+                     * Every panel used to render at the one `--layer-modal`, and
+                     * which of two open modals painted on top fell out of the
+                     * order their portals happened to be appended in. A modal
+                     * opened from inside another is the case that made this
+                     * visible. The index in the stack is the answer the stack
+                     * already knows.
+                     *
+                     * The scale's gaps are 100, so a cascade this deep is
+                     * arithmetic nobody has to think about — and the toast sits
+                     * at `--layer-toast` plus the same depth, above all of it.
+                     */
+                    style: {
+                        zIndex: `calc(var(--layer-modal) + ${stackIndex})`,
+                    }, children: _jsx(FloatingFocusManager, { context: context, 
                         // `undefined` keeps the manager's own default (the first
                         // tabbable), so nothing changes for a panel that does not
                         // ask.

package/dist/Overlay/OverlayPanel.js.map

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

package/dist/Overlay/OverlayStack.d.ts

@@ -28,6 +28,11 @@ export type OverlayStackEntry = {
 };
 export type OverlayStackValue = {
     depth: number;
+    /**
+     * The open ids, oldest first. A panel reads its own index out of
+     * this to cascade its z-index above the one below it.
+     */
+    orderedIds: string[];
     /**
      * `false` in the context default. An `OverlayPanel` reads this to
      * decide whether to render its own scrim (unprovided) or defer to

package/dist/Overlay/OverlayStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayStack.d.ts","sourceRoot":"","sources":["../../src/Overlay/OverlayStack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWtC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC5C,sEAAsE;IACtE,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;IACpB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC,CAAA;AAcD,eAAO,MAAM,eAAe,QAAO,iBACF,CAAA;AAEjC,eAAO,MAAM,oBAAoB,GAAI,eAElC;IACD,QAAQ,EAAE,SAAS,CAAA;CACpB,KAAG,SAyDH,CAAA"}
+{"version":3,"file":"OverlayStack.d.ts","sourceRoot":"","sources":["../../src/Overlay/OverlayStack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWtC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC5C,sEAAsE;IACtE,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,KAAK,EAAE,IAAI,GAAG,MAAM,CAAA;IACpB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC,CAAA;AAeD,eAAO,MAAM,eAAe,QAAO,iBACF,CAAA;AAEjC,eAAO,MAAM,oBAAoB,GAAI,eAElC;IACD,QAAQ,EAAE,SAAS,CAAA;CACpB,KAAG,SAyDH,CAAA"}

package/dist/Overlay/OverlayStack.js

@@ -5,6 +5,7 @@ import { SharedBackdrop } from "./SharedBackdrop.js";
 const DEFAULT_STACK = {
     depth: 0,
     isProvided: false,
+    orderedIds: [],
     register: () => { },
     requestCloseTop: () => { },
     topId: null,
@@ -36,6 +37,7 @@ export const OverlayStackProvider = ({ children, }) => {
     const value = useMemo(() => ({
         depth: entries.length,
         isProvided: true,
+        orderedIds: entries.map((one) => one.id),
         register,
         requestCloseTop,
         topId: entries.at(-1)?.id ?? null,

package/dist/Overlay/OverlayStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayStack.js","sourceRoot":"","sources":["../../src/Overlay/OverlayStack.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEjD,OAAO,EACL,aAAa,EACb,WAAW,EACX,UAAU,EACV,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAsB,CAAA;AA6CrD,MAAM,aAAa,GAAsB;IACvC,KAAK,EAAE,CAAC;IACR,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,eAAe,EAAE,GAAG,EAAE,GAAE,CAAC;IACzB,KAAK,EAAE,IAAI;IACX,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;CACrB,CAAA;AAED,MAAM,mBAAmB,GACvB,aAAa,CAAoB,aAAa,CAAC,CAAA;AAEjD,MAAM,CAAC,MAAM,eAAe,GAAG,GAAsB,EAAE,CACrD,UAAU,CAAC,mBAAmB,CAAC,CAAA;AAEjC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,GAGT,EAAa,EAAE;IACd,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAEpC,EAAE,CAAC,CAAA;IAEL,mEAAmE;IACnE,uBAAuB;IACvB,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,CAAA;IAExC,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,KAAwB,EAAE,EAAE;QAC3B,UAAU,CAAC,CAAC,QAAQ,EAAE,EAAE;QACtB,yDAAyD;QACzD,0DAA0D;QAC1D,8DAA8D;QAC9D,yCAAyC;QACzC,QAAQ,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,CAAC;YACzC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CACnB,GAAG,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAClC;YACH,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,KAAK,CAAC,CACzB,CAAA;IACH,CAAC,EACD,EAAE,CACH,CAAA;IAED,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QAC5C,UAAU,CAAC,CAAC,QAAQ,EAAE,EAAE,CACtB,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CACxC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAA;IACtC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,OAAO,CAAC,MAAM;QACrB,UAAU,EAAE,IAAI;QAChB,QAAQ;QACR,eAAe;QACf,KAAK,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,IAAI;QACjC,UAAU;KACX,CAAC,EACF,CAAC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CACjD,CAAA;IAED,OAAO,CACL,MAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,aAGxC,KAAC,cAAc,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,GAAI,EAEhD,QAAQ,IACoB,CAChC,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"OverlayStack.js","sourceRoot":"","sources":["../../src/Overlay/OverlayStack.tsx"],"names":[],"mappings":"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"}

package/dist/Toast/ToastRegion.d.ts

@@ -46,12 +46,73 @@ export type ToastRegionProps = {
  * sync. The lifecycle *inside* one toast is state a store cannot
  * see, which is why `Toast` owns that and nothing more.
  *
+ * ### It is the top of the layer scale, and it moves to stay there
+ *
+ * ⚠️ The container was `z-50` — a hand-picked number, in the library
+ * whose whole point is that nobody picks one. It is
+ * `--layer-toast` now, the top of the scale, above `--layer-tooltip`.
+ * The owner's rule: *"I think toast should always exist on top of
+ * everything."*
+ *
+ * The open panels cascade — a modal over a modal paints at
+ * `--layer-modal + n` — so the depth is added here too, and the
+ * toast clears the whole stack rather than only its first floor.
+ * Both numbers come off `useOverlayStack`, so the ordering is
+ * arithmetic rather than portal-append order.
+ *
+ * ### Painting on top is only half of "on top"
+ *
+ * ⚠️ A press on a toast while a `Modal` is open is an **outside**
+ * press as far as floating-ui is concerned, and `useDismiss` would
+ * close the modal on the way to taking an action back. That is why
+ * the container carries `data-charcuterie-toast-region`:
+ * `OverlayPanel`'s `outsidePress` reads it and lets the press
+ * through. Nothing else in the fleet carries that attribute.
+ *
+ * ⚠️ Do **not** move this region inside the panel's portal to solve
+ * that. Two reasons, both measured. `FloatingFocusManager`'s `modal`
+ * already leaves it alone — `markOthers` concatenates
+ * `body.querySelectorAll('[aria-live],[role="status"],output')` onto
+ * its keep-list, and this region is a `role="status"`, so it is
+ * never marked `aria-hidden` where it stands. And the panel's
+ * container sets a z-index, so a region nested inside it would be
+ * trapped in that stacking context and lose to the *next* modal
+ * however high `--layer-toast` climbs.
+ *
  * ### `pointer-events-none` on the container, `auto` on each toast
  *
  * A fixed overlay across the bottom of the viewport swallows every
  * click in that band, including on the app behind it, and it does so
  * invisibly. The container passes clicks through and each toast
  * takes them back.
+ *
+ * The list keeps `pointer-events: none` and still scrolls: a wheel
+ * event over a toast chains to the nearest scrollable **ancestor**,
+ * which is the list, and hit-testing never has to reach it.
+ *
+ * ### Many at once, and the newest is the one you can see
+ *
+ * The column grows upward from the bottom of the viewport, so
+ * without a bound the oldest toasts climb off the top of the page —
+ * clipped by the viewport, and unreachable, because a fixed element
+ * is not something the page can scroll to. The list is capped at
+ * `min(60dvh, 32rem)` and scrolls `overscroll-contain`, so the page
+ * behind never moves because a notification arrived. The owner's
+ * rule: *"if you have multiple toasts, it should accomodate them
+ * somehow."*
+ *
+ * ⚠️ Bottom-pinned with `margin-block-start: auto` on the first
+ * toast, **not** `justify-content: flex-end`. Measured in chromium:
+ * with `justify-end` an overflowing list reports
+ * `scrollHeight === clientHeight` and the toasts above the fold
+ * cannot be scrolled to at all — content overflowing a flex
+ * container's *start* edge is not reachable overflow. An auto margin
+ * resolves to `0` the moment the free space runs out, so the same
+ * rule pins a short list and scrolls a long one.
+ *
+ * The scroll is taken to the bottom whenever the count changes,
+ * because the newest toast is the one with the action on it and it
+ * is the one at the far end.
  */
 export declare const ToastRegion: ({ className, label, onDismiss, toasts, }: ToastRegionProps) => ReactNode;
 //# sourceMappingURL=ToastRegion.d.ts.map

package/dist/Toast/ToastRegion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastRegion.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,MAAM,EAAE,WAAW,EAAE,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,WAAW,GAAI,0CAKzB,gBAAgB,KAAG,SA+BrB,CAAA"}
+{"version":3,"file":"ToastRegion.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtC,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,MAAM,EAAE,WAAW,EAAE,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,eAAO,MAAM,WAAW,GAAI,0CAKzB,gBAAgB,KAAG,SAwDrB,CAAA"}

package/dist/Toast/ToastRegion.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useOverlayStack } from "../Overlay/OverlayStack.js";
 import { toClassName } from "../toClassName.js";
 import { Toast } from "./Toast.js";
 /**
@@ -28,14 +30,89 @@ import { Toast } from "./Toast.js";
  * sync. The lifecycle *inside* one toast is state a store cannot
  * see, which is why `Toast` owns that and nothing more.
  *
+ * ### It is the top of the layer scale, and it moves to stay there
+ *
+ * ⚠️ The container was `z-50` — a hand-picked number, in the library
+ * whose whole point is that nobody picks one. It is
+ * `--layer-toast` now, the top of the scale, above `--layer-tooltip`.
+ * The owner's rule: *"I think toast should always exist on top of
+ * everything."*
+ *
+ * The open panels cascade — a modal over a modal paints at
+ * `--layer-modal + n` — so the depth is added here too, and the
+ * toast clears the whole stack rather than only its first floor.
+ * Both numbers come off `useOverlayStack`, so the ordering is
+ * arithmetic rather than portal-append order.
+ *
+ * ### Painting on top is only half of "on top"
+ *
+ * ⚠️ A press on a toast while a `Modal` is open is an **outside**
+ * press as far as floating-ui is concerned, and `useDismiss` would
+ * close the modal on the way to taking an action back. That is why
+ * the container carries `data-charcuterie-toast-region`:
+ * `OverlayPanel`'s `outsidePress` reads it and lets the press
+ * through. Nothing else in the fleet carries that attribute.
+ *
+ * ⚠️ Do **not** move this region inside the panel's portal to solve
+ * that. Two reasons, both measured. `FloatingFocusManager`'s `modal`
+ * already leaves it alone — `markOthers` concatenates
+ * `body.querySelectorAll('[aria-live],[role="status"],output')` onto
+ * its keep-list, and this region is a `role="status"`, so it is
+ * never marked `aria-hidden` where it stands. And the panel's
+ * container sets a z-index, so a region nested inside it would be
+ * trapped in that stacking context and lose to the *next* modal
+ * however high `--layer-toast` climbs.
+ *
  * ### `pointer-events-none` on the container, `auto` on each toast
  *
  * A fixed overlay across the bottom of the viewport swallows every
  * click in that band, including on the app behind it, and it does so
  * invisibly. The container passes clicks through and each toast
  * takes them back.
+ *
+ * The list keeps `pointer-events: none` and still scrolls: a wheel
+ * event over a toast chains to the nearest scrollable **ancestor**,
+ * which is the list, and hit-testing never has to reach it.
+ *
+ * ### Many at once, and the newest is the one you can see
+ *
+ * The column grows upward from the bottom of the viewport, so
+ * without a bound the oldest toasts climb off the top of the page —
+ * clipped by the viewport, and unreachable, because a fixed element
+ * is not something the page can scroll to. The list is capped at
+ * `min(60dvh, 32rem)` and scrolls `overscroll-contain`, so the page
+ * behind never moves because a notification arrived. The owner's
+ * rule: *"if you have multiple toasts, it should accomodate them
+ * somehow."*
+ *
+ * ⚠️ Bottom-pinned with `margin-block-start: auto` on the first
+ * toast, **not** `justify-content: flex-end`. Measured in chromium:
+ * with `justify-end` an overflowing list reports
+ * `scrollHeight === clientHeight` and the toasts above the fold
+ * cannot be scrolled to at all — content overflowing a flex
+ * container's *start* edge is not reachable overflow. An auto margin
+ * resolves to `0` the moment the free space runs out, so the same
+ * rule pins a short list and scrolls a long one.
+ *
+ * The scroll is taken to the bottom whenever the count changes,
+ * because the newest toast is the one with the action on it and it
+ * is the one at the far end.
  */
-export const ToastRegion = ({ className, label = "Notifications", onDismiss, toasts, }) => (_jsx("div", { "aria-label": label, "aria-atomic": "false", className: toClassName("pointer-events-none fixed inset-x-0 bottom-0 z-50 flex flex-col items-center gap-2 p-4", className), role: "status", children: _jsx("ul", { className: "pointer-events-none flex w-full max-w-sm list-none flex-col gap-2 p-0", children: toasts.map((toast) => (_jsx(Toast, { duration: toast.duration, intent: toast.intent, onRemove: () => {
-                onDismiss(toast.key);
-            }, title: toast.title, children: toast.description }, toast.key))) }) }));
+export const ToastRegion = ({ className, label = "Notifications", onDismiss, toasts, }) => {
+    const { depth } = useOverlayStack();
+    const listRef = useRef(null);
+    const _toastCount = toasts.length;
+    useEffect(() => {
+        const list = listRef.current;
+        if (!list) {
+            return;
+        }
+        list.scrollTop = list.scrollHeight;
+    }, []);
+    return (_jsx("div", { "aria-label": label, "data-charcuterie-toast-region": "", "aria-atomic": "false", className: toClassName("pointer-events-none fixed inset-x-0 bottom-0 flex flex-col items-center gap-2 p-4", className), role: "status", style: {
+            zIndex: `calc(var(--layer-toast) + ${depth})`,
+        }, children: _jsx("ul", { ref: listRef, className: "charcuterie-scrollbar pointer-events-none flex max-h-[min(60dvh,32rem)] w-full max-w-sm list-none flex-col gap-2 overflow-y-auto overscroll-contain p-0 [&>li]:shrink-0 [&>li:first-child]:mt-auto", children: toasts.map((toast) => (_jsx(Toast, { duration: toast.duration, intent: toast.intent, onRemove: () => {
+                    onDismiss(toast.key);
+                }, title: toast.title, children: toast.description }, toast.key))) }) }));
+};
 //# sourceMappingURL=ToastRegion.js.map

package/dist/Toast/ToastRegion.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastRegion.js","sourceRoot":"","sources":["../../src/Toast/ToastRegion.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAa,CAAA;AAuBnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,SAAS,EACT,KAAK,GAAG,eAAe,EACvB,SAAS,EACT,MAAM,GACW,EAAa,EAAE,CAAC,CACjC,4BACc,KAAK,iBAML,OAAO,EACnB,SAAS,EAAE,WAAW,CACpB,wFAAwF,EACxF,SAAS,CACV,EACD,IAAI,EAAC,QAAQ,YAEb,aAAI,SAAS,EAAC,uEAAuE,YAClF,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,KAAC,KAAK,IACJ,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EAEpB,QAAQ,EAAE,GAAG,EAAE;gBACb,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YACtB,CAAC,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,YAEjB,KAAK,CAAC,WAAW,IANb,KAAK,CAAC,GAAG,CAOR,CACT,CAAC,GACC,GACD,CACP,CAAA"}
+{"version":3,"file":"ToastRegion.js","sourceRoot":"","sources":["../../src/Toast/ToastRegion.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA6B,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAa,CAAA;AAuBnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,SAAS,EACT,KAAK,GAAG,eAAe,EACvB,SAAS,EACT,MAAM,GACW,EAAa,EAAE;IAChC,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAA;IAEnC,MAAM,OAAO,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IAE9C,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;IAEjC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAE5B,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAM;QACR,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAA;IACpC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,4BACc,KAAK,mCACa,EAAE,iBAMpB,OAAO,EACnB,SAAS,EAAE,WAAW,CACpB,mFAAmF,EACnF,SAAS,CACV,EACD,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;YACL,MAAM,EAAE,6BAA6B,KAAK,GAAG;SAC9C,YAED,aACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,oMAAoM,YAE7M,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,KAAC,KAAK,IACJ,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EAEpB,QAAQ,EAAE,GAAG,EAAE;oBACb,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;gBACtB,CAAC,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,YAEjB,KAAK,CAAC,WAAW,IANb,KAAK,CAAC,GAAG,CAOR,CACT,CAAC,GACC,GACD,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/Toolbar/useToolbarOverflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToolbarOverflow.d.ts","sourceRoot":"","sources":["../../src/Toolbar/useToolbarOverflow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAUtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,kBAAkB,GAAI,eAEhC;IACD,qCAAqC;IACrC,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAA;CAC5B,KAAG;IACF,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC9C,2DAA2D;IAC3D,SAAS,EAAE,CACT,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,WAAW,GAAG,IAAI,KACxB,IAAI,CAAA;IACT,mDAAmD;IACnD,YAAY,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,YAAY,EAAE,MAAM,CAAA;CAwKrB,CAAA"}
+{"version":3,"file":"useToolbarOverflow.d.ts","sourceRoot":"","sources":["../../src/Toolbar/useToolbarOverflow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAUtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,kBAAkB,GAAI,eAEhC;IACD,qCAAqC;IACrC,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAA;CAC5B,KAAG;IACF,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC9C,2DAA2D;IAC3D,SAAS,EAAE,CACT,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,WAAW,GAAG,IAAI,KACxB,IAAI,CAAA;IACT,mDAAmD;IACnD,YAAY,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IACnD,YAAY,EAAE,MAAM,CAAA;CAmNrB,CAAA"}

package/dist/Toolbar/useToolbarOverflow.js

@@ -103,6 +103,45 @@ export const useToolbarOverflow = ({ itemKeys, }) => {
      * answer, so a stable bar renders once and stops.
      */
     useLayoutEffect(measure);
+    /**
+     * Measure again once the webfont has actually arrived.
+     *
+     * Every width above is a **text** width, so it is only as correct
+     * as the font that was loaded when it was read. On a cold cache
+     * the first measurement happens in the fallback face, the items
+     * come out a few pixels off, and `chooseVisibleCount` keeps or
+     * drops one action it should not have — then never revisits it,
+     * because swapping a font changes no box the `ResizeObserver`
+     * watches and triggers no render.
+     *
+     * The user-visible symptom is a bar that settles one button wrong
+     * and stays there. It needs the two faces to disagree across a
+     * collapse boundary, so it is latent rather than observed: no
+     * story in the library crosses one today, which is why `vrt`
+     * reports nothing either way. That makes it a gap to close, not a
+     * regression to chase — the bar is supposed to measure what is on
+     * screen, and until now it could not.
+     *
+     * `document.fonts.ready` resolves immediately when the fonts are
+     * already in, so a warm load pays one microtask and
+     * `setVisibleCount` bails on the unchanged answer.
+     */
+    useLayoutEffect(() => {
+        // jsdom has no `document.fonts`, and neither does a very old
+        // browser. Nothing to wait for is not an error.
+        if (!document.fonts) {
+            return;
+        }
+        let isActive = true;
+        document.fonts.ready.then(() => {
+            if (isActive) {
+                measure();
+            }
+        });
+        return () => {
+            isActive = false;
+        };
+    }, [measure]);
     useLayoutEffect(() => {
         const container = containerRef.current;
         if (!container) {

package/dist/Toolbar/useToolbarOverflow.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",
@@ -54,7 +54,7 @@
   },
   "dependencies": {
     "@charcuterie/logic": "2.3.0",
-    "@charcuterie/tokens": "1.9.0",
+    "@charcuterie/tokens": "1.10.0",
     "@floating-ui/react": "^0.27.20",
     "@tanstack/react-virtual": "^3.13.12",
     "tailwind-merge": "^3.6.0"
@@ -94,6 +94,7 @@
     }
   },
   "devDependencies": {
+    "@charcuterie/storybook-config": "0.4.1",
     "@codemirror/commands": "^6",
     "@codemirror/lang-markdown": "^6",
     "@codemirror/language": "^6",

package/src/Accordion/Accordion.mdx

@@ -9,7 +9,7 @@ import * as AccordionStories from "./Accordion.stories";
 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} />
+<Canvas of={AccordionStories.Playground} />
 
 ## Props
 

package/src/Accordion/Accordion.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { Badge } from "../Badge/Badge.tsx"
@@ -67,7 +68,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { expandedKeys: ["disc"], items: JOB_SECTIONS },
 }
 

package/src/Accordion/Accordion.test.tsx

@@ -7,12 +7,12 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Accordion.stories.tsx"
 
-const { AllStates, AllVariants, Default } =
+const { AllStates, AllVariants, Playground } =
   composeStories(stories)
 
 test("a trigger says what it controls and whether it is open", async () => {
   const { canvas, canvasElement } =
-    await mountStory(Default)
+    await mountStory(Playground)
 
   const disc = expectAgentDrivable(canvas, {
     name: "Disc",
@@ -57,7 +57,7 @@ test("a trigger says what it controls and whether it is open", async () => {
  * frame later.
  */
 test("the initially expanded section is expanded on the first paint", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const expanded = canvas
     .queryAllByRole("button")
@@ -72,7 +72,7 @@ test("the initially expanded section is expanded on the first paint", async () =
 })
 
 test("exclusive means opening one closes the other", async () => {
-  const { canvas } = await mountStory(Default)
+  const { canvas } = await mountStory(Playground)
 
   const log = expectAgentDrivable(canvas, {
     name: "Log",

package/src/ActionTiles/ActionTiles.mdx

@@ -15,7 +15,7 @@ named this case under *"What this deliberately does not cover"*: mux-magic's "Pi
 tiles are `<a href>` and points-market's are `<Link>`, and *"a link is not a radio, and
 giving one `aria-checked` would be worse than the paint it replaced"*.
 
-<Canvas of={ActionTilesStories.Default} />
+<Canvas of={ActionTilesStories.Playground} />
 
 ## Props
 

package/src/ActionTiles/ActionTiles.stories.tsx

@@ -1,3 +1,4 @@
+import { playgroundParameters } from "@charcuterie/storybook-config/story-parameters"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { controlSizeArgType } from "../argTypes.storyHelpers.ts"
@@ -142,7 +143,8 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
+export const Playground: Story = {
+  parameters: playgroundParameters,
   args: { items: QUEUE_TYPE_ITEMS, label: "Queue type" },
 }