@charcuterie/ui 1.1.0 → 2.0.1

package/dist/Listbox/Listbox.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { selectTabIndex, useRovingFocus, useSinglePicker, } from "@charcuterie/logic";
+import { FloatingFocusManager, FloatingPortal, } from "@floating-ui/react";
+import { useEffect, useRef } from "react";
+import { PANEL_SURFACE_CLASS } from "../Overlay/overlayPanelClass.js";
+import { useAnchoredOverlay } from "../Overlay/useAnchoredOverlay.js";
+import { toClassName } from "../toClassName.js";
+import { ListboxOption } from "./ListboxOption.js";
+const getOptionText = (item) => (item.textValue ??
+    (typeof item.label === "string" ? item.label : "")).toLowerCase();
+/**
+ * The single-select fancy dropdown — the rich-option sibling of the
+ * native `Select`. `Select` keeps type-ahead, the mobile wheel, form
+ * submission and autofill; `Listbox` is for the cases `<option>`
+ * cannot render: an icon, two lines, a trailing badge.
+ *
+ * A listbox is **not** a menu, and that distinction is the whole
+ * reason it is a separate component from `Menu`. An `option` *is*
+ * something you are choosing — so it carries `aria-selected`, it
+ * type-aheads (which the APG requires of a listbox and `Menu`
+ * deliberately omits), and a screen reader announces "listbox,
+ * selected, 2 of 4". A `menuitem` only ever *does* something.
+ *
+ * ### Two kinds of state, composed
+ *
+ * `useRovingFocus` owns which option is tabbable (exactly one, so Tab
+ * enters and leaves the group once and the arrow keys move within it),
+ * and `useSinglePicker` owns which option is chosen. They are the same
+ * two kinds `Tabs` composes, and they never disturb each other:
+ * arrowing moves focus without selecting, Enter selects the focused
+ * option.
+ *
+ * ### Portalled, and named by its trigger
+ *
+ * Like `Menu`, the panel portals to `document.body` and `useRole` names
+ * it by pointing `aria-labelledby` at the trigger — so there is no
+ * `heading` prop; the button that opens it is its label.
+ */
+export const Listbox = ({ className, isVisible, onDismiss, onSelect, options, placement = "bottom-start", selectedValue, trigger, }) => {
+    const optionElements = useRef(new Map());
+    const typeahead = useRef({ buffer: "", stampMs: 0 });
+    const focus = useRovingFocus();
+    const picker = useSinglePicker({ selectedValue });
+    const { activeValue, registeredValues, setActiveValue } = focus;
+    const [firstValue] = registeredValues;
+    const { clonedTrigger, context, floatingStyles, getFloatingProps, setFloating, triggerId, } = useAnchoredOverlay({
+        isVisible,
+        maxHeightPx: 384,
+        offsetValue: 4,
+        onDismiss,
+        placement,
+        role: "listbox",
+        trigger,
+    });
+    const chooseValue = (value) => {
+        picker.select(value);
+        onSelect(value);
+        // A single choice closes, the way the native `<select>` it stands
+        // in for does — the consumer's `onDismiss` is the same one an
+        // outside press and Escape use.
+        onDismiss();
+    };
+    /**
+     * Opening lands the focus on the chosen option, or the first when
+     * nothing is chosen yet — the APG rule for a listbox, and the reason
+     * a reopened one resumes on the current value rather than the top.
+     */
+    useEffect(() => {
+        if (!isVisible) {
+            return;
+        }
+        const seed = picker.selectedValue ?? firstValue;
+        if (seed !== undefined && seed !== null) {
+            setActiveValue(seed);
+        }
+    }, [
+        firstValue,
+        isVisible,
+        picker.selectedValue,
+        setActiveValue,
+    ]);
+    useEffect(() => {
+        if (!isVisible || activeValue === null) {
+            return;
+        }
+        optionElements.current.get(activeValue)?.focus();
+    }, [activeValue, isVisible]);
+    const runTypeahead = (character) => {
+        // Reset the buffer once the typing pauses, so "sk" then a beat
+        // then "e" is two searches rather than "ske".
+        const now = Date.now();
+        typeahead.current.buffer =
+            now - typeahead.current.stampMs > 500
+                ? character
+                : typeahead.current.buffer + character;
+        typeahead.current.stampMs = now;
+        const query = typeahead.current.buffer.toLowerCase();
+        const match = options.find((option) => !option.isDisabled &&
+            getOptionText(option).startsWith(query));
+        if (match) {
+            setActiveValue(match.value);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [clonedTrigger, isVisible ? (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, initialFocus: -1, modal: false, children: _jsx("div", { ...getFloatingProps(), "aria-labelledby": triggerId, className: toClassName(PANEL_SURFACE_CLASS, 
+                        // The height is clamped to the viewport by the `size`
+                        // middleware (`maxHeightPx`), written as an inline
+                        // style; this scrolls within it.
+                        "z-[var(--layer-modal)] flex min-w-48 flex-col gap-0.5 overflow-auto p-1", className), onKeyDown: (keyEvent) => {
+                            const commands = {
+                                ArrowDown: focus.next,
+                                ArrowUp: focus.previous,
+                                End: focus.last,
+                                Home: focus.first,
+                            };
+                            const command = commands[keyEvent.key];
+                            if (command) {
+                                keyEvent.preventDefault();
+                                command();
+                                return;
+                            }
+                            if ((keyEvent.key === "Enter" ||
+                                keyEvent.key === " ") &&
+                                activeValue !== null) {
+                                keyEvent.preventDefault();
+                                chooseValue(activeValue);
+                                return;
+                            }
+                            // Type-ahead: a single printable character with no
+                            // modifier is a search, not a shortcut.
+                            if (keyEvent.key.length === 1 &&
+                                !keyEvent.altKey &&
+                                !keyEvent.ctrlKey &&
+                                !keyEvent.metaKey) {
+                                runTypeahead(keyEvent.key);
+                            }
+                        }, ref: setFloating, 
+                        // Duplicated from `getFloatingProps()` on purpose, and
+                        // the two cannot differ — `useRole(context, { role:
+                        // "listbox" })` in the hook is where it comes from.
+                        // Stated here because a linter cannot see a role through
+                        // a spread.
+                        role: "listbox", style: floatingStyles, children: options.map((option) => (_jsx(ListboxOption, { isSelected: picker.selectedValue === option.value, item: option, onSelect: chooseValue, registerFocus: focus.register, registerSelection: picker.register, tabIndex: selectTabIndex(focus, option.value), trackElement: (value, element) => {
+                                if (element) {
+                                    optionElements.current.set(value, element);
+                                }
+                                else {
+                                    optionElements.current.delete(value);
+                                }
+                            } }, option.value))) }) }) })) : null] }));
+};
+//# sourceMappingURL=Listbox.js.map

package/dist/Listbox/Listbox.js.map

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

package/dist/Listbox/ListboxOption.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import type { ListboxItem } from "./Listbox.tsx";
+export type ListboxOptionProps = {
+    isSelected: boolean;
+    item: ListboxItem;
+    onSelect: (value: string) => void;
+    /** `RovingFocus.register` — membership of the arrow-key group. */
+    registerFocus: (value: string) => () => void;
+    /** `SinglePicker.register` — membership of the choice. */
+    registerSelection: (value: string) => () => void;
+    tabIndex: number;
+    trackElement: (value: string, element: HTMLButtonElement | null) => void;
+};
+/**
+ * Its own file for the same reason as `MenuAction` and `TabTrigger`:
+ * **both registrations are effects**, and an effect cannot run in a
+ * loop.
+ *
+ * The two registrations are separate on purpose, exactly as
+ * `TabTrigger` splits them. A disabled option joins the *choice* — it
+ * can still be the seeded `selectedValue` and still announces
+ * `aria-selected` — and stays out of the *focus* group, so the arrow
+ * keys and type-ahead skip it without `RovingFocus` having to know
+ * what "disabled" means.
+ *
+ * ### `option`, not `menuitem`
+ *
+ * An `option` **is** something — the value being chosen — where a
+ * `menuitem` **does** something. So this carries `aria-selected`
+ * (which a menuitem must not), and a screen reader announces
+ * "listbox, selected, 2 of 4" rather than "menu, 4 items". It is a
+ * `<button>` with `role="option"` so it is natively focusable for the
+ * roving-tabindex move, the same shape `Menu` uses.
+ */
+export declare const ListboxOption: ({ isSelected, item, onSelect, registerFocus, registerSelection, tabIndex, trackElement, }: ListboxOptionProps) => ReactNode;
+//# sourceMappingURL=ListboxOption.d.ts.map

package/dist/Listbox/ListboxOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListboxOption.d.ts","sourceRoot":"","sources":["../../src/Listbox/ListboxOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAEhD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,WAAW,CAAA;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAC5C,0DAA0D;IAC1D,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAChD,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,CACZ,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,iBAAiB,GAAG,IAAI,KAC9B,IAAI,CAAA;CACV,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,aAAa,GAAI,2FAQ3B,kBAAkB,KAAG,SAoDvB,CAAA"}

package/dist/Listbox/ListboxOption.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { FOCUS_RING_CLASS } from "../intentStyles.js";
+import { toClassName } from "../toClassName.js";
+/**
+ * Its own file for the same reason as `MenuAction` and `TabTrigger`:
+ * **both registrations are effects**, and an effect cannot run in a
+ * loop.
+ *
+ * The two registrations are separate on purpose, exactly as
+ * `TabTrigger` splits them. A disabled option joins the *choice* — it
+ * can still be the seeded `selectedValue` and still announces
+ * `aria-selected` — and stays out of the *focus* group, so the arrow
+ * keys and type-ahead skip it without `RovingFocus` having to know
+ * what "disabled" means.
+ *
+ * ### `option`, not `menuitem`
+ *
+ * An `option` **is** something — the value being chosen — where a
+ * `menuitem` **does** something. So this carries `aria-selected`
+ * (which a menuitem must not), and a screen reader announces
+ * "listbox, selected, 2 of 4" rather than "menu, 4 items". It is a
+ * `<button>` with `role="option"` so it is natively focusable for the
+ * roving-tabindex move, the same shape `Menu` uses.
+ */
+export const ListboxOption = ({ isSelected, item, onSelect, registerFocus, registerSelection, tabIndex, trackElement, }) => {
+    const { isDisabled = false, label, value } = item;
+    useEffect(() => registerSelection(value), [registerSelection, value]);
+    useEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+        return registerFocus(value);
+    }, [isDisabled, registerFocus, value]);
+    return (_jsxs("button", { "aria-selected": isSelected, className: toClassName("flex w-full cursor-pointer items-center justify-between gap-2 rounded-sm bg-transparent px-2 py-1.5 text-start text-content-primary text-sm transition-colors duration-(--duration-fast) ease-standard", "hover:bg-intent-neutral-surface", isSelected && "bg-intent-accent-surface", isDisabled &&
+            "cursor-not-allowed text-content-disabled hover:bg-transparent", FOCUS_RING_CLASS), disabled: isDisabled, onClick: () => {
+            onSelect(value);
+        }, ref: (element) => {
+            trackElement(value, element);
+        }, role: "option", tabIndex: tabIndex, type: "button", children: [label, isSelected ? (_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-intent-accent-content", children: "\u2713" })) : null] }));
+};
+//# sourceMappingURL=ListboxOption.js.map

package/dist/Listbox/ListboxOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListboxOption.js","sourceRoot":"","sources":["../../src/Listbox/ListboxOption.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAkB/C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,QAAQ,EACR,YAAY,GACO,EAAa,EAAE;IAClC,MAAM,EAAE,UAAU,GAAG,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IAEjD,SAAS,CACP,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC9B,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAC3B,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,OAAO,aAAa,CAAC,KAAK,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAA;IAEtC,OAAO,CACL,mCACiB,UAAU,EACzB,SAAS,EAAE,WAAW,CACpB,wMAAwM,EACxM,iCAAiC,EACjC,UAAU,IAAI,0BAA0B,EACxC,UAAU;YACR,+DAA+D,EACjE,gBAAgB,CACjB,EACD,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAA;QACjB,CAAC,EACD,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;QAC9B,CAAC,EACD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,aAEZ,KAAK,EAEL,UAAU,CAAC,CAAC,CAAC,CACZ,8BAGc,MAAM,EAClB,SAAS,EAAC,qCAAqC,uBAG1C,CACR,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CAAA;AACH,CAAC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/Menu/Menu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAYnD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMpD,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,iEAAiE;IACjE,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,+DAA+D;IAC/D,OAAO,EAAE,YAAY,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,eAAO,MAAM,IAAI,GAAI,iEAOlB,SAAS,KAAG,SA8Ld,CAAA"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/Menu/Menu.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAKnD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQpD,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,iEAAiE;IACjE,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,+DAA+D;IAC/D,OAAO,EAAE,YAAY,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,eAAO,MAAM,IAAI,GAAI,iEAOlB,SAAS,KAAG,SAuId,CAAA"}

package/dist/Menu/Menu.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { selectTabIndex, useClonedChild, useRovingFocus, } from "@charcuterie/logic";
-import { autoUpdate, FloatingFocusManager, flip, offset, shift, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+import { selectTabIndex, useRovingFocus, } from "@charcuterie/logic";
+import { FloatingFocusManager, FloatingPortal, } from "@floating-ui/react";
 import { useEffect, useRef } from "react";
+import { PANEL_SURFACE_CLASS } from "../Overlay/overlayPanelClass.js";
+import { useAnchoredOverlay } from "../Overlay/useAnchoredOverlay.js";
 import { toClassName } from "../toClassName.js";
 import { MenuAction } from "./MenuAction.js";
 /**
@@ -66,49 +68,17 @@ import { MenuAction } from "./MenuAction.js";
  */
 export const Menu = ({ className, isVisible, items, onDismiss, placement = "bottom-start", trigger, }) => {
     const itemElements = useRef(new Map());
-    const panelElement = useRef(null);
     const focus = useRovingFocus();
     const { activeValue, registeredValues, setActiveValue } = focus;
     const [firstValue] = registeredValues;
-    const { context, floatingStyles, refs } = useFloating({
-        open: isVisible,
-        onOpenChange: (isNextVisible) => {
-            if (!isNextVisible) {
-                onDismiss();
-            }
-        },
+    const { clonedTrigger, context, floatingStyles, getFloatingProps, setFloating, } = useAnchoredOverlay({
+        isVisible,
+        offsetValue: 4,
+        onDismiss,
         placement,
-        middleware: [offset(4), flip(), shift({ padding: 8 })],
-        strategy: "fixed",
-        whileElementsMounted: autoUpdate,
-    });
-    const { getFloatingProps, getReferenceProps } = useInteractions([
-        useDismiss(context),
-        useRole(context, { role: "menu" }),
-    ]);
-    const clonedTrigger = useClonedChild(trigger, {
-        ...getReferenceProps(),
-        ref: refs.setReference,
+        role: "menu",
+        trigger,
     });
-    /**
-     * The other half of the `isConnected` guard below. If the ref
-     * fired while the node was still detached, nothing has shown the
-     * popover — and a `[popover]` that was never shown is
-     * `display: none`, so the menu renders, passes typecheck, and is
-     * invisible to `getByRole` and to a user alike.
-     *
-     * Effects run after the tree is connected, so this is the
-     * backstop. It is idempotent: `:popover-open` is the same question
-     * the ref asks.
-     */
-    useEffect(() => {
-        const panel = panelElement.current;
-        if (isVisible &&
-            panel?.isConnected &&
-            !panel.matches(":popover-open")) {
-            panel.showPopover();
-        }
-    }, [isVisible]);
     /**
      * Opening **makes** a member active, and this is the step the
      * first version was missing.
@@ -137,63 +107,43 @@ export const Menu = ({ className, isVisible, items, onDismiss, placement = "bott
         }
         itemElements.current.get(activeValue)?.focus();
     }, [activeValue, isVisible]);
-    return (_jsxs(_Fragment, { children: [clonedTrigger, isVisible ? (_jsx(FloatingFocusManager, { context: context, 
-                // `false`, so Tab leaves the menu and lands on the next
-                // control in the page — which is what closes it, through
-                // `useDismiss`. A trapped menu is a dialog.
-                modal: false, 
-                // Focus is moved by the effect above, to whichever item
-                // `RovingFocus` made active. Letting the manager also aim
-                // it is two owners for one caret.
-                initialFocus: -1, children: _jsx("div", { ...getFloatingProps(), className: toClassName("inset-auto m-0 flex min-w-48 flex-col gap-0.5 rounded-md border border-border-default bg-surface-overlay p-1 shadow-medium", className), onKeyDown: (keyEvent) => {
-                        const commands = {
-                            ArrowDown: focus.next,
-                            ArrowUp: focus.previous,
-                            End: focus.last,
-                            Home: focus.first,
-                        };
-                        const command = commands[keyEvent.key];
-                        if (command) {
-                            // Arrow keys scroll the page by default, and a menu
-                            // that scrolls the document behind it while moving
-                            // focus is the hand-rolled version of this
-                            // component.
-                            keyEvent.preventDefault();
-                            command();
-                        }
-                    }, popover: "manual", ref: (node) => {
-                        refs.setFloating(node);
-                        panelElement.current = node;
-                        // A ref callback rather than an effect, for the same
-                        // reason as `Popover`: a `[popover]` is
-                        // `display: none` until shown, and every child effect
-                        // — including the focus move above — would otherwise
-                        // be aiming at a hidden element.
-                        //
-                        // `isConnected` is the guard `Popover` does not need
-                        // and this does. `FloatingFocusManager` renders a pair
-                        // of focus guards around its child, so React commits
-                        // this subtree in an order where the ref can fire
-                        // while the node is still detached — and
-                        // `showPopover()` on a disconnected element throws
-                        // `InvalidStateError`, which surfaces as an unhandled
-                        // rejection rather than as a failing assertion.
-                        if (node?.isConnected &&
-                            !node.matches(":popover-open")) {
-                            node.showPopover();
-                        }
-                    }, 
-                    // Duplicated from `getFloatingProps()` on purpose, and
-                    // the two cannot differ — `useRole(context, { role:
-                    // "menu" })` above is where it comes from. Stated here
-                    // because a linter cannot see a role through a spread.
-                    role: "menu", style: floatingStyles, children: items.map((item) => (_jsx(MenuAction, { item: item, onDismiss: onDismiss, register: focus.register, tabIndex: selectTabIndex(focus, item.key), trackElement: (key, element) => {
-                            if (element) {
-                                itemElements.current.set(key, element);
-                            }
-                            else {
-                                itemElements.current.delete(key);
+    return (_jsxs(_Fragment, { children: [clonedTrigger, isVisible ? (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, 
+                    // `false`, so Tab leaves the menu and lands on the next
+                    // control in the page — which is what closes it, through
+                    // `useDismiss`. A trapped menu is a dialog.
+                    modal: false, 
+                    // Focus is moved by the effect above, to whichever item
+                    // `RovingFocus` made active. Letting the manager also aim
+                    // it is two owners for one caret.
+                    initialFocus: -1, children: _jsx("div", { ...getFloatingProps(), className: toClassName(PANEL_SURFACE_CLASS, "z-[var(--layer-modal)] flex min-w-48 flex-col gap-0.5 p-1", className), onKeyDown: (keyEvent) => {
+                            const commands = {
+                                ArrowDown: focus.next,
+                                ArrowUp: focus.previous,
+                                End: focus.last,
+                                Home: focus.first,
+                            };
+                            const command = commands[keyEvent.key];
+                            if (command) {
+                                // Arrow keys scroll the page by default, and a menu
+                                // that scrolls the document behind it while moving
+                                // focus is the hand-rolled version of this
+                                // component.
+                                keyEvent.preventDefault();
+                                command();
                             }
-                        } }, item.key))) }) })) : null] }));
+                        }, ref: setFloating, 
+                        // Duplicated from `getFloatingProps()` on purpose, and
+                        // the two cannot differ — `useRole(context, { role:
+                        // "menu" })` in the hook is where it comes from. Stated
+                        // here because a linter cannot see a role through a
+                        // spread.
+                        role: "menu", style: floatingStyles, children: items.map((item) => (_jsx(MenuAction, { item: item, onDismiss: onDismiss, register: focus.register, tabIndex: selectTabIndex(focus, item.key), trackElement: (key, element) => {
+                                if (element) {
+                                    itemElements.current.set(key, element);
+                                }
+                                else {
+                                    itemElements.current.delete(key);
+                                }
+                            } }, item.key))) }) }) })) : null] }));
 };
 //# sourceMappingURL=Menu.js.map

package/dist/Menu/Menu.js.map

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

package/dist/Modal/Modal.d.ts

@@ -1,66 +1,18 @@
-import type { ComponentPropsWithRef, ReactNode } from "react";
-export type ModalSize = "full" | "lg" | "md" | "sm" | "xl";
-export type ModalProps = Omit<ComponentPropsWithRef<"dialog">, "onClose" | "open"> & {
-    /** The footer row. Buttons, usually. */
-    footer?: ReactNode;
-    heading: string;
-    headingLevel?: 2 | 3 | 4;
-    /**
-     * Escape and a backdrop press both close. Off for the one
-     * honest case — a destructive confirm the user has to answer —
-     * and off means Escape is *cancelled* rather than ignored, so
-     * the browser cannot close a dialog the app still owns.
-     */
+import type { ReactNode } from "react";
+export type ModalProps = {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    children: ReactNode;
+    className?: string;
+    /** Escape and a backdrop press both close. */
     isDismissable?: boolean;
     isVisible: boolean;
     /**
-     * Every route out lands here: the close button, Escape, a
-     * backdrop press. Wire it to a `useVisibility()`'s `hide`.
+     * Every route out lands here: Escape, a backdrop press. Wire it to a
+     * `useVisibility()`'s `hide`.
      */
     onClose: () => void;
-    size?: ModalSize;
+    role?: "alertdialog" | "dialog";
 };
-/**
- * Four repos, and **plex-channels and ripdeck independently
- * converged on native `<dialog>`** — which is the design here
- * rather than a shortcut. `showModal()` gives a focus trap,
- * Escape, `::backdrop`, `inert` on everything behind it, and the
- * **top layer**, from the platform, correctly, in every browser
- * the fleet runs.
- *
- * What is not free — and the reason a component exists at all —
- * is that a native `<dialog>` is a *self-owning* control: call
- * `showModal()` and it decides it is open. That is the same
- * conflict Radix has, and it gets the same answer as everywhere
- * else in this library: **`isVisible` is the truth, and an effect
- * makes the element agree with it.** Nothing here reads
- * `dialogElement.open` as state; it is read only to avoid calling
- * a method that would throw.
- *
- * ### Why it is not portalled
- *
- * The top layer is a *paint* concept: a `<dialog>` renders above
- * everything while staying exactly where it is in the DOM. So it
- * needs no portal — and that matters well past tidiness, because a
- * portal moves the node to `document.body`, out of whatever
- * element a test or an agent scoped its queries to.
- * `canvas.getByRole("dialog")` finds this one. It would not find a
- * portalled one, and the story would have to reach for `screen`
- * and lose its scoping.
- *
- * ### `open:flex`, not `flex`
- *
- * A closed `<dialog>` is hidden by a UA rule that any
- * `display: flex` of ours would beat — so the modal would render
- * permanently, in the page flow, with no error. The layout is
- * therefore behind Tailwind's `open:` variant, which is the
- * `[open]` attribute the browser manages.
- *
- * ### The accessible name
- *
- * `heading` is required and is a string, not a `ReactNode`. A
- * dialog with no name is announced as "dialog" and nothing else,
- * which is what every hand-rolled modal in the inventory does.
- */
-export declare const Modal: ({ children, className, footer, heading, headingLevel, isDismissable, isVisible, onClose, size, ...dialogProps }: ModalProps) => ReactNode;
+export declare const Modal: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, isDismissable, isVisible, onClose, role, }: ModalProps) => ReactNode;
 //# sourceMappingURL=Modal.d.ts.map

package/dist/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAOd,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1D,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,SAAS,GAAG,MAAM,CACnB,GAAG;IACF,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAqBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,KAAK,GAAI,iHAWnB,UAAU,KAAG,SAsHf,CAAA"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,MAAM,UAAU,GAAG;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAA;CAChC,CAAA;AAqCD,eAAO,MAAM,KAAK,GAAI,+HASnB,UAAU,KAAG,SAYf,CAAA"}