@charcuterie/ui 2.11.0 → 2.12.1

package/dist/Toolbar/Toolbar.d.ts

@@ -0,0 +1,156 @@
+import type { ControlSize } from "@charcuterie/tokens";
+import type { ReactElement, ReactNode } from "react";
+/**
+ * Something the toolbar renders itself: a button that **does**
+ * something. The same shape as `MenuItem`, because a collapsed one
+ * becomes exactly that.
+ */
+export type ToolbarAction = {
+    icon?: ReactNode;
+    isDisabled?: boolean;
+    key: string;
+    /** The accessible name, and the label when it collapses. */
+    label: string;
+    onSelect: () => void;
+    /**
+     * The default kind, and optional so the common
+     * `{ key, label, onSelect }` still type-checks. Present only to
+     * discriminate this from a `control`.
+     */
+    type?: "action";
+};
+/**
+ * Something the **app** renders: a `Switch`, a `SegmentedControl`,
+ * a `ColorSchemeSwitcher` — a control with state, not an action.
+ *
+ * Exactly one instance of `element` is mounted at any width. It
+ * moves between the bar and the overflow panel; it is never
+ * rendered in both and hidden in one.
+ */
+export type ToolbarControl = {
+    element: ReactElement;
+    key: string;
+    /**
+     * Optional row label, used **only** in the overflow panel and
+     * only when the control does not already show its own text. A
+     * `Switch` renders its label; an icon-only toggle does not.
+     */
+    label?: string;
+    type: "control";
+};
+export type ToolbarItem = ToolbarAction | ToolbarControl;
+type ToolbarSharedProps = {
+    className?: string;
+    /**
+     * **Initial** only, and the toolbar owns it from then on — the
+     * same uncontrolled contract as every other component here. It
+     * exists so a story (and a screenshot) can show the panel open;
+     * an app almost never passes it.
+     */
+    isOverflowVisible?: boolean;
+    /**
+     * Required, and it becomes `aria-label`. A `role="toolbar"` takes
+     * **no accessible name from its content** — the same trap
+     * `Popover`'s `heading` and `Spinner`'s label exist for. mux-magic
+     * gets this one right and then gives the toolbar nothing else.
+     */
+    label: string;
+    /**
+     * The overflow trigger's glyph. **No default** — the library
+     * ships no icons, and `⋮` renders as nothing where the font lacks
+     * it. With no icon the trigger is a text button reading
+     * `overflowLabel`, which works everywhere.
+     */
+    overflowIcon?: ReactNode;
+    /**
+     * Names the overflow trigger, and through it the panel it opens —
+     * a menu is named by its trigger, and `Popover`'s `aria-label`
+     * takes the same string.
+     */
+    overflowLabel?: string;
+    size?: ControlSize;
+};
+/**
+ * **The overflow's role is a type, not a flag.**
+ *
+ * `role="menu"` permits only `menuitem`, `menuitemradio`,
+ * `menuitemcheckbox`, `group` and `separator` — so a header's
+ * scheme switcher inside one is invalid, which is what
+ * plex-channels ships today. The fix is not a runtime warning and
+ * not a boolean: with `overflow="menu"` the item type narrows to
+ * `ToolbarAction`, and a `control` in the array is a **compile
+ * error**. Mixed content declares `overflow="panel"` and gets a
+ * `Popover` — `role="dialog"`, `aria-haspopup="dialog"` — where a
+ * switch is perfectly legal content.
+ *
+ * Same instinct as
+ * [`Menu`'s items being a discriminated union](../../../../docs/decisions/2026-08-05-menu-items-is-a-discriminated-union.md):
+ * the kinds are told apart by the type system, in the data.
+ */
+export type ToolbarProps = ToolbarSharedProps & ({
+    items: readonly ToolbarAction[];
+    overflow: "menu";
+} | {
+    items: readonly ToolbarItem[];
+    overflow: "panel";
+});
+/**
+ * A row of controls that collapses into an overflow when it runs
+ * out of room — the fleet's fourth-largest duplication, and the one
+ * where the copies are worst.
+ *
+ * Four repos have a toolbar-with-overflow; mux-magic's `PageHeader`
+ * is the original and plex-channels' `Header` says in its own
+ * comments that it copied it. What they copied:
+ *
+ *  - **`role="toolbar"` with no toolbar keyboard behaviour.** Six
+ *    sequential tab stops where the APG requires one, with the
+ *    arrow keys moving between members. Here that is `RovingFocus`,
+ *    the same kind `Menu`, `Tabs` and `SegmentedControl` use, and
+ *    the tab stop is read from `selectTabIndex` rather than
+ *    restated.
+ *  - **Triggers that advertise nothing.** No `aria-expanded`, no
+ *    `aria-haspopup`, no `aria-controls` anywhere in the file. Here
+ *    they come from `useRole` inside `Menu`/`Popover`, which cannot
+ *    be forgotten because nothing writes them by hand.
+ *  - **No focus management.** `Menu` moves focus to the first item
+ *    on opening and `FloatingFocusManager` returns it to the
+ *    trigger on close.
+ *  - **Collapse by DOM duplication.** Both repos render every
+ *    action twice and hide one set with a media query — mux-magic's
+ *    is a documented CSS specificity coin-flip ("source order
+ *    wins"). Every action here is mounted **exactly once** and
+ *    moves.
+ *  - **Nothing decides what collapses.** Two hardcoded media
+ *    queries at 480/481px, and the ⋮ shows at every width, so it is
+ *    not progressive collapse at all. Here the row is measured, the
+ *    items are in priority order, and the trigger exists only when
+ *    something actually overflowed.
+ *
+ * The toggles' missing `aria-pressed` is the one defect this
+ * component does not fix, because it cannot: a `control`'s state is
+ * the control's own, and `Switch` has carried `role="switch"` since
+ * M6a. The bar's job is to hold it once.
+ *
+ * ## Priority is the array order
+ *
+ * `items[0]` is the last thing to collapse. One axis, and it is
+ * also paint order — see `chooseVisibleCount`.
+ *
+ * ## Measured, not breakpointed
+ *
+ * There is no `collapseAt` prop and no media query. The bar reads
+ * the widths its items actually have, so a longer label or a
+ * `data-density="kiosk"` collapses at the width it should rather
+ * than at a number someone typed in 2024. `useMediaQuery` is still
+ * the right tool one level up — for **relocating** a whole toolbar
+ * out of a header on a phone, which is a layout decision and not a
+ * fit — and `Toolbar.stories.tsx` shows that composition.
+ *
+ * ⚠️ The root is `flex-1 min-w-0`: it must be sized by its
+ * container, never by its own contents, or collapsing an item
+ * narrows the box that decides whether to collapse.
+ */
+export declare const Toolbar: ({ className, isOverflowVisible, items, label, overflow, overflowIcon, overflowLabel, size, }: ToolbarProps) => ReactNode;
+export {};
+//# sourceMappingURL=Toolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWpD;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,GAAG,EAAE,MAAM,CAAA;IACX,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,YAAY,CAAA;IACrB,GAAG,EAAE,MAAM,CAAA;IACX;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,SAAS,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,cAAc,CAAA;AAExD,KAAK,kBAAkB,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAC3C,CACI;IACE,KAAK,EAAE,SAAS,aAAa,EAAE,CAAA;IAC/B,QAAQ,EAAE,MAAM,CAAA;CACjB,GACD;IACE,KAAK,EAAE,SAAS,WAAW,EAAE,CAAA;IAC7B,QAAQ,EAAE,OAAO,CAAA;CAClB,CACJ,CAAA;AAaH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,eAAO,MAAM,OAAO,GAAI,8FASrB,YAAY,KAAG,SAuQjB,CAAA"}

package/dist/Toolbar/Toolbar.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { selectTabIndex, useRovingFocus, useVisibility, } from "@charcuterie/logic";
+import { useCallback, useEffect, useRef } from "react";
+import { Button } from "../Button/Button.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Menu } from "../Menu/Menu.js";
+import { Popover } from "../Popover/Popover.js";
+import { toClassName } from "../toClassName.js";
+import { ToolbarSlot } from "./ToolbarSlot.js";
+import { useToolbarOverflow } from "./useToolbarOverflow.js";
+/**
+ * The roving group's last member. Not a key any item can collide
+ * with, because a caller's keys are its own strings and this one
+ * is namespaced.
+ */
+const OVERFLOW_KEY = "charcuterie-toolbar-overflow";
+const isToolbarAction = (item) => item.type !== "control";
+/**
+ * A row of controls that collapses into an overflow when it runs
+ * out of room — the fleet's fourth-largest duplication, and the one
+ * where the copies are worst.
+ *
+ * Four repos have a toolbar-with-overflow; mux-magic's `PageHeader`
+ * is the original and plex-channels' `Header` says in its own
+ * comments that it copied it. What they copied:
+ *
+ *  - **`role="toolbar"` with no toolbar keyboard behaviour.** Six
+ *    sequential tab stops where the APG requires one, with the
+ *    arrow keys moving between members. Here that is `RovingFocus`,
+ *    the same kind `Menu`, `Tabs` and `SegmentedControl` use, and
+ *    the tab stop is read from `selectTabIndex` rather than
+ *    restated.
+ *  - **Triggers that advertise nothing.** No `aria-expanded`, no
+ *    `aria-haspopup`, no `aria-controls` anywhere in the file. Here
+ *    they come from `useRole` inside `Menu`/`Popover`, which cannot
+ *    be forgotten because nothing writes them by hand.
+ *  - **No focus management.** `Menu` moves focus to the first item
+ *    on opening and `FloatingFocusManager` returns it to the
+ *    trigger on close.
+ *  - **Collapse by DOM duplication.** Both repos render every
+ *    action twice and hide one set with a media query — mux-magic's
+ *    is a documented CSS specificity coin-flip ("source order
+ *    wins"). Every action here is mounted **exactly once** and
+ *    moves.
+ *  - **Nothing decides what collapses.** Two hardcoded media
+ *    queries at 480/481px, and the ⋮ shows at every width, so it is
+ *    not progressive collapse at all. Here the row is measured, the
+ *    items are in priority order, and the trigger exists only when
+ *    something actually overflowed.
+ *
+ * The toggles' missing `aria-pressed` is the one defect this
+ * component does not fix, because it cannot: a `control`'s state is
+ * the control's own, and `Switch` has carried `role="switch"` since
+ * M6a. The bar's job is to hold it once.
+ *
+ * ## Priority is the array order
+ *
+ * `items[0]` is the last thing to collapse. One axis, and it is
+ * also paint order — see `chooseVisibleCount`.
+ *
+ * ## Measured, not breakpointed
+ *
+ * There is no `collapseAt` prop and no media query. The bar reads
+ * the widths its items actually have, so a longer label or a
+ * `data-density="kiosk"` collapses at the width it should rather
+ * than at a number someone typed in 2024. `useMediaQuery` is still
+ * the right tool one level up — for **relocating** a whole toolbar
+ * out of a header on a phone, which is a layout decision and not a
+ * fit — and `Toolbar.stories.tsx` shows that composition.
+ *
+ * ⚠️ The root is `flex-1 min-w-0`: it must be sized by its
+ * container, never by its own contents, or collapsing an item
+ * narrows the box that decides whether to collapse.
+ */
+export const Toolbar = ({ className, isOverflowVisible = false, items, label, overflow, overflowIcon, overflowLabel = "More actions", size = "sm", }) => {
+    const focusableElements = useRef(new Map());
+    const focus = useRovingFocus();
+    const { activeValue, register, setActiveValue } = focus;
+    const itemKeys = items.map((item) => item.key);
+    const { containerRef, trackItem, trackTrigger, visibleCount, } = useToolbarOverflow({ itemKeys });
+    const visibleItems = items.slice(0, visibleCount);
+    const collapsedItems = items.slice(visibleCount);
+    const hasOverflow = collapsedItems.length > 0;
+    const { hide, isVisible, toggle } = useVisibility({
+        isVisible: isOverflowVisible,
+    });
+    const trackFocusable = useCallback((key, element) => {
+        if (element) {
+            focusableElements.current.set(key, element);
+        }
+        else {
+            focusableElements.current.delete(key);
+        }
+    }, []);
+    const trackOverflowElement = useCallback((_key, element) => {
+        trackTrigger(element);
+    }, [trackTrigger]);
+    /**
+     * Move the caret only when the toolbar already has it.
+     *
+     * Same guard as `SegmentedControl`: the active member changes
+     * whenever the row re-measures, and a bar that stole focus every
+     * time the window resized would be worse than one with no
+     * keyboard model at all.
+     */
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container ||
+            activeValue === null ||
+            !container.contains(document.activeElement)) {
+            return;
+        }
+        focusableElements.current.get(activeValue)?.focus();
+    }, [activeValue, containerRef]);
+    const renderAction = (action) => action.icon === undefined ? (_jsx(Button, { appearance: "ghost", intent: "neutral", isDisabled: action.isDisabled, onClick: action.onSelect, size: size, children: action.label })) : (_jsx(IconButton, { appearance: "ghost", intent: "neutral", isDisabled: action.isDisabled, label: action.label, onClick: action.onSelect, size: size, children: action.icon }));
+    const trigger = overflowIcon === undefined ? (_jsx(Button, { appearance: "ghost", intent: "neutral", onClick: toggle, size: size, children: overflowLabel })) : (_jsx(IconButton, { appearance: "ghost", intent: "neutral", label: overflowLabel, onClick: toggle, size: size, children: overflowIcon }));
+    const overflowElement = overflow === "menu" ? (_jsx(Menu, { isVisible: isVisible, items: collapsedItems
+            .filter(isToolbarAction)
+            .map((action) => ({
+            icon: action.icon,
+            isDisabled: action.isDisabled,
+            key: action.key,
+            label: action.label,
+            onSelect: action.onSelect,
+        })), onDismiss: hide, placement: "bottom-end", trigger: trigger })) : (_jsx(Popover, { heading: overflowLabel, isVisible: isVisible, onDismiss: hide, placement: "bottom-end", trigger: trigger, children: _jsx("div", { className: "flex min-w-48 flex-col gap-1", children: collapsedItems.map((item) => isToolbarAction(item) ? (_jsx(Button, { appearance: "ghost", className: "justify-start", iconStart: item.icon, intent: "neutral", isDisabled: item.isDisabled, isFullWidth: true, onClick: () => {
+                    item.onSelect();
+                    // Choosing dismisses, exactly as it does in a
+                    // `Menu`. A panel that stays open after an action
+                    // has fired is the one users read as "it didn't
+                    // work".
+                    hide();
+                }, size: size, children: item.label }, item.key)) : (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [item.label === undefined ? null : (_jsx("span", { className: "text-content-secondary text-sm", children: item.label })), item.element] }, item.key))) }) }));
+    return (_jsxs("div", { "aria-label": label, className: toClassName("flex min-w-0 flex-1 items-center gap-1", className), 
+        /**
+         * Focus arriving from **outside** the keyboard model — a
+         * click, or Tab landing on the one member in the tab order —
+         * becomes the active member, so the next arrow key continues
+         * from where the user actually is rather than from wherever
+         * the group was last left. React's `onFocus` is `focusin`, so
+         * this hears a descendant.
+         */
+        onFocus: (focusEvent) => {
+            for (const [key, element,] of focusableElements.current) {
+                if (element.contains(focusEvent.target)) {
+                    setActiveValue(key);
+                    return;
+                }
+            }
+        }, onKeyDown: (keyEvent) => {
+            const commands = {
+                ArrowLeft: focus.previous,
+                ArrowRight: focus.next,
+                End: focus.last,
+                Home: focus.first,
+            };
+            const command = commands[keyEvent.key];
+            if (command) {
+                // Arrow keys scroll the page by default, and a toolbar
+                // that scrolls the document while moving focus is the
+                // hand-rolled version of this component.
+                keyEvent.preventDefault();
+                command();
+            }
+        }, ref: containerRef, role: "toolbar", children: [visibleItems.map((item) => (_jsx(ToolbarSlot, { isDisabled: isToolbarAction(item) &&
+                    item.isDisabled === true, itemKey: item.key, register: register, tabIndex: selectTabIndex(focus, item.key), trackElement: trackItem, trackFocusable: trackFocusable, children: isToolbarAction(item)
+                    ? renderAction(item)
+                    : item.element }, item.key))), hasOverflow ? (_jsx(ToolbarSlot, { itemKey: OVERFLOW_KEY, register: register, tabIndex: selectTabIndex(focus, OVERFLOW_KEY), trackElement: trackOverflowElement, trackFocusable: trackFocusable, children: overflowElement })) : null] }));
+};
+//# sourceMappingURL=Toolbar.js.map

package/dist/Toolbar/Toolbar.js.map

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

package/dist/Toolbar/ToolbarSlot.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+export type ToolbarSlotProps = {
+    children: ReactNode;
+    /** A disabled member never registers, so the arrows skip it. */
+    isDisabled?: boolean;
+    itemKey: string;
+    /** `RovingFocus.register` — membership of the arrow-key group. */
+    register: (value: string) => () => void;
+    tabIndex: number;
+    /** Hands the slot's box to the measuring hook. */
+    trackElement: (key: string, element: HTMLElement | null) => void;
+    /** Hands the slot's focusable to the toolbar, for `.focus()`. */
+    trackFocusable: (key: string, element: HTMLElement | null) => void;
+};
+/**
+ * One member of the toolbar's roving group: an action the toolbar
+ * rendered, or a control the caller handed in.
+ *
+ * Its own file because **registration is an effect**, and an effect
+ * cannot run in a loop — the same reason `MenuAction`, `TabTrigger`
+ * and `AccordionSection` are separate files.
+ *
+ * ### Why the tab stop is written imperatively
+ *
+ * Every other roving group in this library passes `tabIndex` as a
+ * prop, because it renders its own members. A toolbar does not: a
+ * `control` item is whatever the app already has — a `Switch`, a
+ * `ColorSchemeSwitcher`, a `SegmentedControl` — and most components
+ * in this library do not forward a `tabIndex` prop at all. Cloning
+ * one onto them would compile, do nothing, and leave the bar with
+ * one tab stop per control, which is precisely the APG violation
+ * this component exists to fix (mux-magic's `role="toolbar"` is six
+ * sequential tab stops).
+ *
+ * So the slot finds the one focusable in its subtree and writes
+ * `tabIndex` onto it. React never sets that attribute on these
+ * elements, so there is no second writer to fight with.
+ *
+ * A control holding **more than one** focusable is a nested
+ * composite the toolbar does not manage; only the first is given
+ * the tab stop, and `Toolbar.mdx` says so.
+ */
+export declare const ToolbarSlot: ({ children, isDisabled, itemKey, register, tabIndex, trackElement, trackFocusable, }: ToolbarSlotProps) => ReactNode;
+//# sourceMappingURL=ToolbarSlot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSlot.d.ts","sourceRoot":"","sources":["../../src/Toolbar/ToolbarSlot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAetC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,SAAS,CAAA;IACnB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IACvC,QAAQ,EAAE,MAAM,CAAA;IAChB,kDAAkD;IAClD,YAAY,EAAE,CACZ,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,WAAW,GAAG,IAAI,KACxB,IAAI,CAAA;IACT,iEAAiE;IACjE,cAAc,EAAE,CACd,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,WAAW,GAAG,IAAI,KACxB,IAAI,CAAA;CACV,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,WAAW,GAAI,sFAQzB,gBAAgB,KAAG,SAkDrB,CAAA"}

package/dist/Toolbar/ToolbarSlot.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+/**
+ * Every focusable a toolbar knows how to hand a tab stop to.
+ *
+ * `[tabindex]` carries **no** `:not([tabindex="-1"])` clause, unlike
+ * the usual copy of this selector: the whole job here is to move a
+ * tab stop between elements, so an element this slot has already
+ * pushed out of the tab order still has to be findable to be let
+ * back in.
+ */
+const FOCUSABLE_SELECTOR = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]";
+/**
+ * One member of the toolbar's roving group: an action the toolbar
+ * rendered, or a control the caller handed in.
+ *
+ * Its own file because **registration is an effect**, and an effect
+ * cannot run in a loop — the same reason `MenuAction`, `TabTrigger`
+ * and `AccordionSection` are separate files.
+ *
+ * ### Why the tab stop is written imperatively
+ *
+ * Every other roving group in this library passes `tabIndex` as a
+ * prop, because it renders its own members. A toolbar does not: a
+ * `control` item is whatever the app already has — a `Switch`, a
+ * `ColorSchemeSwitcher`, a `SegmentedControl` — and most components
+ * in this library do not forward a `tabIndex` prop at all. Cloning
+ * one onto them would compile, do nothing, and leave the bar with
+ * one tab stop per control, which is precisely the APG violation
+ * this component exists to fix (mux-magic's `role="toolbar"` is six
+ * sequential tab stops).
+ *
+ * So the slot finds the one focusable in its subtree and writes
+ * `tabIndex` onto it. React never sets that attribute on these
+ * elements, so there is no second writer to fight with.
+ *
+ * A control holding **more than one** focusable is a nested
+ * composite the toolbar does not manage; only the first is given
+ * the tab stop, and `Toolbar.mdx` says so.
+ */
+export const ToolbarSlot = ({ children, isDisabled = false, itemKey, register, tabIndex, trackElement, trackFocusable, }) => {
+    const slotRef = useRef(null);
+    useEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+        return register(itemKey);
+    }, [isDisabled, itemKey, register]);
+    useEffect(() => {
+        // The first focusable that is not an `aria-hidden` prop —
+        // floating-ui plants focus guards (`<span tabindex="0">`) either
+        // side of an overlay's reference element, and the overflow
+        // trigger *is* one, so a bare `querySelector` can hand back a
+        // guard and give the tab stop to something no user can see.
+        const focusable = Array.from(slotRef.current?.querySelectorAll(FOCUSABLE_SELECTOR) ?? []).find((candidate) => candidate.getAttribute("aria-hidden") !== "true") ?? null;
+        trackFocusable(itemKey, focusable);
+        if (focusable && !isDisabled) {
+            focusable.tabIndex = tabIndex;
+        }
+        return () => {
+            trackFocusable(itemKey, null);
+        };
+    }, [isDisabled, itemKey, tabIndex, trackFocusable]);
+    return (_jsx("div", { className: "flex shrink-0 items-center", ref: (element) => {
+            slotRef.current = element;
+            trackElement(itemKey, element);
+        }, children: children }));
+};
+//# sourceMappingURL=ToolbarSlot.js.map

package/dist/Toolbar/ToolbarSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSlot.js","sourceRoot":"","sources":["../../src/Toolbar/ToolbarSlot.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEzC;;;;;;;;GAQG;AACH,MAAM,kBAAkB,GACtB,sHAAsH,CAAA;AAsBxH;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,cAAc,GACG,EAAa,EAAE;IAChC,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC1B,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,0DAA0D;QAC1D,iEAAiE;QACjE,2DAA2D;QAC3D,8DAA8D;QAC9D,4DAA4D;QAC5D,MAAM,SAAS,GACb,KAAK,CAAC,IAAI,CACR,OAAO,CAAC,OAAO,EAAE,gBAAgB,CAC/B,kBAAkB,CACnB,IAAI,EAAE,CACR,CAAC,IAAI,CACJ,CAAC,SAAS,EAAE,EAAE,CACZ,SAAS,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,MAAM,CACnD,IAAI,IAAI,CAAA;QAEX,cAAc,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;QAElC,IAAI,SAAS,IAAI,CAAC,UAAU,EAAE,CAAC;YAC7B,SAAS,CAAC,QAAQ,GAAG,QAAQ,CAAA;QAC/B,CAAC;QAED,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,CAAA;QAC/B,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAA;IAEnD,OAAO,CACL,cACE,SAAS,EAAC,4BAA4B,EACtC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,OAAO,CAAC,OAAO,GAAG,OAAO,CAAA;YAEzB,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QAChC,CAAC,YAEA,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/Toolbar/chooseVisibleCount.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The collapse rule: how many of a toolbar's items fit, given what
+ * they measured.
+ *
+ * Pure arithmetic, in its own file for the same reason
+ * `chooseColumns` is — the rule is a table of numbers anyone can
+ * check in Node, and everything that needs a browser is quarantined
+ * in `useToolbarOverflow`.
+ *
+ * ## Priority is the array order
+ *
+ * `itemInlineSizes` is in **priority order, highest first**, which
+ * is also paint order: the toolbar collapses from the end. One axis
+ * rather than two, because a separate `priority` number and a
+ * separate display order is a pair a caller can put out of step,
+ * and neither mux-magic nor plex-channels has *any* ordering — they
+ * hardcode which controls live in the bar and which live in the
+ * popover, at every width.
+ *
+ * ## Why the trigger's width is an input
+ *
+ * The overflow trigger only exists once something has collapsed, so
+ * the question is not "how many fit" but "how many fit **beside a
+ * trigger** — unless all of them fit without one". Ignoring that is
+ * how an overflow control ends up wrapping to a second line at
+ * exactly the width where it first appears.
+ */
+export declare const chooseVisibleCount: ({ availableInlineSize, gapInlineSize, itemInlineSizes, triggerInlineSize, }: {
+    /** The room the bar has, in CSS px. */
+    availableInlineSize: number;
+    /** The row's `column-gap`, in CSS px. */
+    gapInlineSize: number;
+    /** Each item's measured inline size, priority order, in CSS px. */
+    itemInlineSizes: readonly number[];
+    /** The overflow trigger's inline size, in CSS px. */
+    triggerInlineSize: number;
+}) => number;
+//# sourceMappingURL=chooseVisibleCount.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chooseVisibleCount.d.ts","sourceRoot":"","sources":["../../src/Toolbar/chooseVisibleCount.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,eAAO,MAAM,kBAAkB,GAAI,6EAKhC;IACD,uCAAuC;IACvC,mBAAmB,EAAE,MAAM,CAAA;IAC3B,yCAAyC;IACzC,aAAa,EAAE,MAAM,CAAA;IACrB,mEAAmE;IACnE,eAAe,EAAE,SAAS,MAAM,EAAE,CAAA;IAClC,qDAAqD;IACrD,iBAAiB,EAAE,MAAM,CAAA;CAC1B,KAAG,MAiDH,CAAA"}

package/dist/Toolbar/chooseVisibleCount.js

@@ -0,0 +1,69 @@
+/**
+ * The collapse rule: how many of a toolbar's items fit, given what
+ * they measured.
+ *
+ * Pure arithmetic, in its own file for the same reason
+ * `chooseColumns` is — the rule is a table of numbers anyone can
+ * check in Node, and everything that needs a browser is quarantined
+ * in `useToolbarOverflow`.
+ *
+ * ## Priority is the array order
+ *
+ * `itemInlineSizes` is in **priority order, highest first**, which
+ * is also paint order: the toolbar collapses from the end. One axis
+ * rather than two, because a separate `priority` number and a
+ * separate display order is a pair a caller can put out of step,
+ * and neither mux-magic nor plex-channels has *any* ordering — they
+ * hardcode which controls live in the bar and which live in the
+ * popover, at every width.
+ *
+ * ## Why the trigger's width is an input
+ *
+ * The overflow trigger only exists once something has collapsed, so
+ * the question is not "how many fit" but "how many fit **beside a
+ * trigger** — unless all of them fit without one". Ignoring that is
+ * how an overflow control ends up wrapping to a second line at
+ * exactly the width where it first appears.
+ */
+export const chooseVisibleCount = ({ availableInlineSize, gapInlineSize, itemInlineSizes, triggerInlineSize, }) => {
+    const itemCount = itemInlineSizes.length;
+    if (itemCount === 0) {
+        return 0;
+    }
+    /**
+     * Nothing measured yet — show everything.
+     *
+     * The safe direction to be wrong in for one frame, and the same
+     * one `useAdaptiveColumns` argues from the other end: a bar that
+     * starts whole and collapses over-draws, where a bar that starts
+     * collapsed hides controls that were there. It is also what makes
+     * the first measurement possible at all, because an item that was
+     * never mounted has no width to read.
+     */
+    if (availableInlineSize <= 0) {
+        return itemCount;
+    }
+    const measure = (count, extra) => itemInlineSizes
+        .slice(0, count)
+        .reduce((total, size) => total + size, 0) +
+        gapInlineSize *
+            Math.max(count + (extra > 0 ? 1 : 0) - 1, 0) +
+        extra;
+    if (measure(itemCount, 0) <= availableInlineSize) {
+        return itemCount;
+    }
+    // Everything below here has an overflow trigger in the row, so
+    // every candidate pays for it. Counting down rather than up
+    // because the answer is usually near the top.
+    for (let count = itemCount - 1; count > 0; count -= 1) {
+        if (measure(count, triggerInlineSize) <=
+            availableInlineSize) {
+            return count;
+        }
+    }
+    // Not even one item and the trigger fit. Everything collapses;
+    // the trigger alone may still overflow, and a bar narrower than
+    // one control is a layout problem no collapse rule can solve.
+    return 0;
+};
+//# sourceMappingURL=chooseVisibleCount.js.map

package/dist/Toolbar/chooseVisibleCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chooseVisibleCount.js","sourceRoot":"","sources":["../../src/Toolbar/chooseVisibleCount.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,mBAAmB,EACnB,aAAa,EACb,eAAe,EACf,iBAAiB,GAUlB,EAAU,EAAE;IACX,MAAM,SAAS,GAAG,eAAe,CAAC,MAAM,CAAA;IAExC,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;QACpB,OAAO,CAAC,CAAA;IACV,CAAC;IAED;;;;;;;;;OASG;IACH,IAAI,mBAAmB,IAAI,CAAC,EAAE,CAAC;QAC7B,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,KAAa,EAAE,EAAE,CAC/C,eAAe;SACZ,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC;SACf,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CAAC,KAAK,GAAG,IAAI,EAAE,CAAC,CAAC;QAC3C,aAAa;YACX,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC9C,KAAK,CAAA;IAEP,IAAI,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,mBAAmB,EAAE,CAAC;QACjD,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,+DAA+D;IAC/D,4DAA4D;IAC5D,8CAA8C;IAC9C,KAAK,IAAI,KAAK,GAAG,SAAS,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC;QACtD,IACE,OAAO,CAAC,KAAK,EAAE,iBAAiB,CAAC;YACjC,mBAAmB,EACnB,CAAC;YACD,OAAO,KAAK,CAAA;QACd,CAAC;IACH,CAAC;IAED,+DAA+D;IAC/D,gEAAgE;IAChE,8DAA8D;IAC9D,OAAO,CAAC,CAAA;AACV,CAAC,CAAA"}

package/dist/Toolbar/useToolbarOverflow.d.ts

@@ -0,0 +1,49 @@
+import type { RefObject } from "react";
+/**
+ * The measuring half of progressive overflow — `chooseVisibleCount`
+ * is the decision, this is the tape measure.
+ *
+ * ## Measured, not breakpointed
+ *
+ * mux-magic collapses at a hardcoded `480px` and plex-channels at a
+ * hardcoded `760px`, and both numbers are wrong the moment a label
+ * gets longer, the density axis changes, or a rail takes half the
+ * row. A measured bar has no number to be wrong: it asks the
+ * elements how wide they actually are, in the font and density they
+ * are actually rendered in.
+ *
+ * ## One instance, and cached widths
+ *
+ * An item that has collapsed is **not in the DOM** — that is the
+ * whole point, against a mechanism that renders every action twice
+ * and hides one with a CSS specificity coin-flip. So its width
+ * cannot be re-read while it is away, and it is remembered from
+ * when it was last in the bar instead.
+ *
+ * The first paint is what seeds the cache: every item starts in the
+ * bar (`chooseVisibleCount` returns all of them for an unmeasured
+ * container), gets measured, and the row collapses **before paint**
+ * because the measuring runs in a layout effect. Any item whose
+ * width is still unknown forces one more all-visible pass rather
+ * than being guessed at — one extra layout pass, and it converges,
+ * because a mounted item always measures.
+ *
+ * ⚠️ **The measured element must not be sized by its own contents.**
+ * If the bar shrink-wraps its items, collapsing one narrows the box,
+ * which collapses another — a loop with no error anywhere.
+ * `Toolbar`'s root is `flex-1 min-w-0` for exactly this reason, the
+ * same trap `useAdaptiveColumns` documents about a container capped
+ * by its own answer.
+ */
+export declare const useToolbarOverflow: ({ itemKeys, }: {
+    /** Priority order, highest first. */
+    itemKeys: readonly string[];
+}) => {
+    containerRef: RefObject<HTMLDivElement | null>;
+    /** Callback ref for each item's box. `null` on unmount. */
+    trackItem: (key: string, element: HTMLElement | null) => void;
+    /** Callback ref for the overflow trigger's box. */
+    trackTrigger: (element: HTMLElement | null) => void;
+    visibleCount: number;
+};
+//# sourceMappingURL=useToolbarOverflow.d.ts.map

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

@@ -0,0 +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"}