@charcuterie/ui 1.0.1 → 2.0.0

package/dist/Overlay/OverlayStack.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLatestRef } from "@charcuterie/logic";
+import { createContext, useCallback, useContext, useMemo, useState, } from "react";
+import { SharedBackdrop } from "./SharedBackdrop.js";
+const DEFAULT_STACK = {
+    depth: 0,
+    isProvided: false,
+    register: () => { },
+    requestCloseTop: () => { },
+    topId: null,
+    unregister: () => { },
+};
+const OverlayStackContext = createContext(DEFAULT_STACK);
+export const useOverlayStack = () => useContext(OverlayStackContext);
+export const OverlayStackProvider = ({ children, }) => {
+    const [entries, setEntries] = useState([]);
+    // Read through a ref so `requestCloseTop` stays stable while still
+    // seeing the live top.
+    const entriesRef = useLatestRef(entries);
+    const register = useCallback((entry) => {
+        setEntries((previous) => 
+        // In place when the id is already present — an `onClose`
+        // update must not reorder the stack, or a re-render would
+        // shuffle which modal is "top". New ids append, which is what
+        // makes the last-registered one the top.
+        previous.some((one) => one.id === entry.id)
+            ? previous.map((one) => one.id === entry.id ? entry : one)
+            : [...previous, entry]);
+    }, []);
+    const unregister = useCallback((id) => {
+        setEntries((previous) => previous.filter((one) => one.id !== id));
+    }, []);
+    const requestCloseTop = useCallback(() => {
+        entriesRef.current.at(-1)?.onClose();
+    }, [entriesRef]);
+    const value = useMemo(() => ({
+        depth: entries.length,
+        isProvided: true,
+        register,
+        requestCloseTop,
+        topId: entries.at(-1)?.id ?? null,
+        unregister,
+    }), [entries, register, requestCloseTop, unregister]);
+    return (_jsxs(OverlayStackContext.Provider, { value: value, children: [_jsx(SharedBackdrop, { isVisible: entries.length > 0 }), children] }));
+};
+//# sourceMappingURL=OverlayStack.js.map

package/dist/Overlay/OverlayStack.js.map

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

package/dist/Overlay/SharedBackdrop.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+/**
+ * The scrim, and there is exactly one of it however many backdrop
+ * modals are stacked.
+ *
+ * Purely visual: `aria-hidden`, no handlers. Dismissal — a press
+ * anywhere off the top panel — is the top panel's own
+ * `useDismiss({ outsidePress })`, not a click on this node, which is
+ * what lets the whole package drop the `useKeyWithClickEvents`
+ * suppression the `<dialog>` backdrop needed. A press lands on the
+ * top panel's full-viewport centring layer (which sits above this),
+ * so this element never has to be the click target.
+ *
+ * Portalled to `document.body` on `--layer-overlay`, one step **below**
+ * the panels' `--layer-modal`, so it always paints behind every open
+ * modal and never intercepts a click meant for the dialog on top of it
+ * — a real bug a same-z-plus-DOM-order scheme has, because a
+ * later-mounted scrim then covers the panel. Stacking *between* panels
+ * still falls out of append order at the one `--layer-modal`.
+ */
+export declare const SharedBackdrop: ({ isVisible, }: {
+    isVisible: boolean;
+}) => ReactNode;
+//# sourceMappingURL=SharedBackdrop.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SharedBackdrop.d.ts","sourceRoot":"","sources":["../../src/Overlay/SharedBackdrop.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,cAAc,GAAI,gBAE5B;IACD,SAAS,EAAE,OAAO,CAAA;CACnB,KAAG,SAaH,CAAA"}

package/dist/Overlay/SharedBackdrop.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FloatingPortal } from "@floating-ui/react";
+/**
+ * The scrim, and there is exactly one of it however many backdrop
+ * modals are stacked.
+ *
+ * Purely visual: `aria-hidden`, no handlers. Dismissal — a press
+ * anywhere off the top panel — is the top panel's own
+ * `useDismiss({ outsidePress })`, not a click on this node, which is
+ * what lets the whole package drop the `useKeyWithClickEvents`
+ * suppression the `<dialog>` backdrop needed. A press lands on the
+ * top panel's full-viewport centring layer (which sits above this),
+ * so this element never has to be the click target.
+ *
+ * Portalled to `document.body` on `--layer-overlay`, one step **below**
+ * the panels' `--layer-modal`, so it always paints behind every open
+ * modal and never intercepts a click meant for the dialog on top of it
+ * — a real bug a same-z-plus-DOM-order scheme has, because a
+ * later-mounted scrim then covers the panel. Stacking *between* panels
+ * still falls out of append order at the one `--layer-modal`.
+ */
+export const SharedBackdrop = ({ isVisible, }) => {
+    if (!isVisible) {
+        return null;
+    }
+    return (_jsx(FloatingPortal, { children: _jsx("div", { "aria-hidden": "true", className: "fixed inset-0 z-[var(--layer-overlay)] bg-scrim" }) }));
+};
+//# sourceMappingURL=SharedBackdrop.js.map

package/dist/Overlay/SharedBackdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharedBackdrop.js","sourceRoot":"","sources":["../../src/Overlay/SharedBackdrop.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAGnD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,GAGV,EAAa,EAAE;IACd,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,KAAC,cAAc,cACb,6BACc,MAAM,EAClB,SAAS,EAAC,iDAAiD,GAC3D,GACa,CAClB,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"lockScrollBehind.d.ts","sourceRoot":"","sources":["../../src/Overlay/lockScrollBehind.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAMH,eAAO,MAAM,gBAAgB,QAAO,CAAC,MAAM,IAAI,CAiC9C,CAAA"}

package/dist/Overlay/lockScrollBehind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lockScrollBehind.js","sourceRoot":"","sources":["../../src/Overlay/lockScrollBehind.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,IAAI,SAAS,GAAG,CAAC,CAAA;AAEjB,IAAI,gBAAgB,GAAG,EAAE,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAiB,EAAE;IACjD,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IACjB,CAAC;IAED,MAAM,EAAE,eAAe,EAAE,GAAG,QAAQ,CAAA;IAEpC,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;QACpB,gBAAgB,GAAG,eAAe,CAAC,KAAK,CAAC,QAAQ,CAAA;QAEjD,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;IAC3C,CAAC;IAED,SAAS,IAAI,CAAC,CAAA;IAEd,IAAI,UAAU,GAAG,KAAK,CAAA;IAEtB,OAAO,GAAG,EAAE;QACV,6DAA6D;QAC7D,6DAA6D;QAC7D,qCAAqC;QACrC,IAAI,UAAU,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,UAAU,GAAG,IAAI,CAAA;QAEjB,SAAS,IAAI,CAAC,CAAA;QAEd,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;YACpB,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,gBAAgB,CAAA;QACnD,CAAC;IACH,CAAC,CAAA;AACH,CAAC,CAAA"}

package/dist/Overlay/overlayPanelClass.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The surface an anchored overlay's panel is drawn on — the four
+ * tokens `Popover` and `Menu` wrote out byte-identically, and that
+ * `Listbox` and `Combobox` are about to write a third and fourth
+ * time.
+ *
+ * Only the *surface* lives here: the raised background, the hairline
+ * border, the corner radius, and the elevation. Everything a panel
+ * does with that surface — a popover's `max-w-xs p-3`, a menu's
+ * `min-w-48 flex flex-col`, a listbox's scroll clamp — is the panel's
+ * own and stays at the call site, composed after this with
+ * `toClassName`. Pulling the shared half out is what keeps a change
+ * to the overlay surface (a new elevation token, say) from having to
+ * be made in four places and kept in agreement by hand.
+ */
+export declare const PANEL_SURFACE_CLASS = "rounded-md border border-border-default bg-surface-overlay shadow-medium";
+//# sourceMappingURL=overlayPanelClass.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlayPanelClass.d.ts","sourceRoot":"","sources":["../../src/Overlay/overlayPanelClass.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB,6EAC4C,CAAA"}

package/dist/Overlay/overlayPanelClass.js

@@ -0,0 +1,17 @@
+/**
+ * The surface an anchored overlay's panel is drawn on — the four
+ * tokens `Popover` and `Menu` wrote out byte-identically, and that
+ * `Listbox` and `Combobox` are about to write a third and fourth
+ * time.
+ *
+ * Only the *surface* lives here: the raised background, the hairline
+ * border, the corner radius, and the elevation. Everything a panel
+ * does with that surface — a popover's `max-w-xs p-3`, a menu's
+ * `min-w-48 flex flex-col`, a listbox's scroll clamp — is the panel's
+ * own and stays at the call site, composed after this with
+ * `toClassName`. Pulling the shared half out is what keeps a change
+ * to the overlay surface (a new elevation token, say) from having to
+ * be made in four places and kept in agreement by hand.
+ */
+export const PANEL_SURFACE_CLASS = "rounded-md border border-border-default bg-surface-overlay shadow-medium";
+//# sourceMappingURL=overlayPanelClass.js.map

package/dist/Overlay/overlayPanelClass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlayPanelClass.js","sourceRoot":"","sources":["../../src/Overlay/overlayPanelClass.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAC9B,0EAA0E,CAAA"}

package/dist/Overlay/useAnchoredOverlay.d.ts

@@ -0,0 +1,97 @@
+import type { Placement } from "@floating-ui/react";
+import type { ReactElement } from "react";
+/**
+ * The floating-ui block every anchored overlay — `Popover`, `Menu`,
+ * `Listbox`, `Combobox` — wrote out for itself, consolidated once.
+ *
+ * `Popover` and `Menu` had the same twelve-line `useFloating` +
+ * `useInteractions` + `useClonedChild` preamble with two constants
+ * different (the offset and the role), and the fleet's four pickers
+ * hand-rolled a fifth, sixth, seventh and eighth `computePosition`
+ * that reimplemented `flip`/`shift` against `window.innerHeight`.
+ * This is the one implementation they all take.
+ *
+ * ### The owner's "configurable, but those are the basics"
+ *
+ * Escape and outside-press both close, **on by default**, for every
+ * anchored overlay — that is what an overlay is. A component switches
+ * one off through `dismiss` (a `Combobox`'s Escape clears the query
+ * before it closes; a menu opened from a context click wants no
+ * outside-press race with the thing that spawned it), but it opts out
+ * rather than opting in.
+ *
+ * ### `size`, for the pickers
+ *
+ * `matchTriggerWidth` and `maxHeightPx` are the two things
+ * `PortalDropdown` did with a hand-measured `TriggerRect` and a
+ * `window.innerHeight` clamp. The `size` middleware does both from the
+ * platform: the panel takes the trigger's width, and it never grows
+ * past the space actually left in the viewport.
+ *
+ * The computed width/height are written **straight onto the floating
+ * element's style** rather than lifted into React state, which is
+ * floating-ui's own documented shape and is deliberate twice over: a
+ * `setState` inside `apply` re-runs the position, which re-runs
+ * `apply`, which is a render loop; and because these properties never
+ * enter the `floatingStyles` object React manages, a component
+ * re-render (a keystroke in a combobox) does not wipe them — only an
+ * `autoUpdate` tick recomputes them.
+ *
+ * ### Portal-agnostic
+ *
+ * This returns the pieces — `clonedTrigger`, `getFloatingProps`,
+ * `setFloating`, `floatingStyles`, `context` — and renders nothing.
+ * Whether the panel goes in a `FloatingPortal`, the top layer, or in
+ * place is the component's call, which is what lets the same hook back
+ * a portalled `Listbox` and (for now) a top-layer `Popover`.
+ */
+export type AnchoredOverlayRole = "dialog" | "listbox" | "menu";
+export type UseAnchoredOverlayOptions = {
+    /**
+     * Both default **on** — Escape and outside-press are what makes an
+     * overlay an overlay. Switch one off for the honest exception (a
+     * combobox that swallows the first Escape to clear its query), never
+     * to make a plain overlay sticky. Named for the flattened
+     * floating-ui `useDismiss` options they carry.
+     */
+    isEscapeDismissable?: boolean;
+    isOutsidePressDismissable?: boolean;
+    /** Ports `PortalDropdown`'s anchor-width match, via `size`. */
+    isTriggerWidthMatched?: boolean;
+    isVisible: boolean;
+    /** Clamps the panel to `min(this, available viewport space)`. */
+    maxHeightPx?: number;
+    /** Popover 8, Menu/Listbox/Combobox 4. */
+    offsetValue?: number;
+    onDismiss: () => void;
+    placement?: Placement;
+    role: AnchoredOverlayRole;
+    /** The control the panel hangs off. **Cloned, not wrapped.** */
+    trigger: ReactElement;
+};
+export declare const useAnchoredOverlay: ({ isEscapeDismissable, isOutsidePressDismissable, isTriggerWidthMatched, isVisible, maxHeightPx, offsetValue, onDismiss, placement, role, trigger, }: UseAnchoredOverlayOptions) => {
+    clonedTrigger: ReactElement<Record<string, unknown>, string | import("react").JSXElementConstructor<any>>;
+    context: {
+        placement: Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        x: number;
+        y: number;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    floatingStyles: import("react").CSSProperties;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    setFloating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+    triggerId: string;
+};
+//# sourceMappingURL=useAnchoredOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAnchoredOverlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/useAnchoredOverlay.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAYnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,MAAM,mBAAmB,GAC3B,QAAQ,GACR,SAAS,GACT,MAAM,CAAA;AAEV,MAAM,MAAM,yBAAyB,GAAG;IACtC;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,+DAA+D;IAC/D,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,SAAS,EAAE,OAAO,CAAA;IAClB,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,IAAI,EAAE,mBAAmB,CAAA;IACzB,gEAAgE;IAChE,OAAO,EAAE,YAAY,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,sJAWhC,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;CA6F3B,CAAA"}

package/dist/Overlay/useAnchoredOverlay.js

@@ -0,0 +1,81 @@
+import { useClonedChild, useUniqueId, } from "@charcuterie/logic";
+import { autoUpdate, flip, offset, shift, size, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+export const useAnchoredOverlay = ({ isEscapeDismissable = true, isOutsidePressDismissable = true, isTriggerWidthMatched = false, isVisible, maxHeightPx, offsetValue = 8, onDismiss, placement = "bottom-start", role, trigger, }) => {
+    const middleware = [
+        offset(offsetValue),
+        flip(),
+        shift({ padding: 8 }),
+    ];
+    if (isTriggerWidthMatched || maxHeightPx !== undefined) {
+        middleware.push(size({
+            padding: 8,
+            apply({ availableHeight, elements, rects }) {
+                const cap = maxHeightPx === undefined
+                    ? availableHeight
+                    : Math.min(maxHeightPx, availableHeight);
+                elements.floating.style.maxHeight = `${cap}px`;
+                if (isTriggerWidthMatched) {
+                    elements.floating.style.width = `${rects.reference.width}px`;
+                }
+            },
+        }));
+    }
+    const { context, floatingStyles, refs } = useFloating({
+        // Read-only. Charcuterie remains the sole owner; floating-ui is
+        // told what is true and never decides it.
+        open: isVisible,
+        onOpenChange: (isNextVisible) => {
+            if (!isNextVisible) {
+                onDismiss();
+            }
+        },
+        placement,
+        middleware,
+        strategy: "fixed",
+        whileElementsMounted: autoUpdate,
+    });
+    // `useRole` writes `aria-expanded`/`aria-haspopup`/`aria-controls`
+    // on the trigger and `id` + `role` on the panel from one source —
+    // which is what keeps `aria-controls` pointing at the panel's real
+    // id across the portal boundary, the objection the top-layer
+    // decision raised and this answers.
+    const { getFloatingProps, getReferenceProps } = useInteractions([
+        useDismiss(context, {
+            escapeKey: isEscapeDismissable,
+            outsidePress: isOutsidePressDismissable,
+        }),
+        useRole(context, { role }),
+    ]);
+    // `useRole` for a `listbox` overwrites the trigger's own role with
+    // `combobox` — the select-only-combobox pattern, which then demands
+    // its own `aria-label`. The fleet's pattern is a plain button that
+    // *opens* a listbox, so the injected `role` is dropped and the
+    // trigger keeps its native semantics while still gaining
+    // `aria-haspopup="listbox"`/`aria-expanded`/`aria-controls`. `useRole`
+    // injects a reference `role` only for listbox/combobox, so this is a
+    // no-op for `Popover` (dialog) and `Menu` (menu).
+    const { role: _discardedTriggerRole, ...referenceProps } = getReferenceProps();
+    // A stable id on the trigger, so a panel that needs a name can point
+    // `aria-labelledby` at it across the portal. `useRole` already gives
+    // a `menu`'s reference an id (and labels the panel with it); this
+    // reuses that when present and supplies one otherwise — which is what
+    // a `listbox` panel needs, since a bare `role="listbox"` is an ARIA
+    // input field and must be named.
+    const generatedTriggerId = useUniqueId();
+    const triggerId = referenceProps.id ??
+        generatedTriggerId;
+    const clonedTrigger = useClonedChild(trigger, {
+        ...referenceProps,
+        id: triggerId,
+        ref: refs.setReference,
+    });
+    return {
+        clonedTrigger,
+        context,
+        floatingStyles,
+        getFloatingProps,
+        setFloating: refs.setFloating,
+        triggerId,
+    };
+};
+//# sourceMappingURL=useAnchoredOverlay.js.map

package/dist/Overlay/useAnchoredOverlay.js.map

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

package/dist/Popover/Popover.d.ts

@@ -35,32 +35,24 @@ export type PopoverProps = {
  *
  * What floating-ui is used for is what only it can do: collision
  * handling (`flip`, `shift`), a real dismiss layer, and focus
- * management. Positioning strategy, the top layer, and the ARIA
- * wiring come from the platform and from `useRole`.
+ * management — all of it consolidated in `useAnchoredOverlay`.
+ * Positioning strategy and the ARIA wiring come from the platform and
+ * from `useRole`.
  *
- * ### The top layer, from the platform — not a portal
+ * ### Portalled, not the top layer
  *
- * `popover="manual"` puts the panel in the top layer, which is
- * what a portal is normally reached for: no `z-index` contest, and
- * no `overflow: hidden` ancestor clipping it. Unlike a portal it
- * **stays where it is in the DOM**, so `canvas.getByRole("dialog")`
- * still finds it and a story keeps its scoping. Same argument as
- * `Modal`, one layer down.
- *
- * `manual`, not `auto`, and that is the state-ownership decision
- * again: `auto` brings the UA's own light-dismiss, which closes the
- * element by itself and leaves `isVisible` true. `useDismiss` does
- * the same job through our callback, so Charcuterie stays the only
- * thing that decides.
- *
- * ### Two UA defaults that have to be undone
- *
- * `[popover]` ships `position: fixed; inset: 0; margin: auto`,
- * which centres the panel in the viewport and fights every
- * coordinate floating-ui computes — hence `inset-auto m-0`, and
- * `strategy: "fixed"` so the numbers are viewport-relative like the
- * top layer itself. Getting either wrong reads as a positioning
- * bug rather than as a UA default.
+ * The panel goes in a `FloatingPortal` to `document.body`. The top
+ * layer (`popover="manual"`) was reached for first — it needs no
+ * portal and no `z-index` — but it does not escape an
+ * `overflow: hidden` ancestor's *clipping* in every case the fleet
+ * hit, and a portal does. The objection a portal used to raise, that
+ * it moves the panel out of a scoped `canvas` query, is answered two
+ * ways: `useRole` writes `aria-controls` on the trigger pointing at
+ * the panel `id`, so trigger→panel stays followable across the
+ * boundary; and the story scopes panel queries to
+ * `within(document.body)` while the structural `expectAgentDrivable`
+ * needs no change. `strategy: "fixed"` keeps the coordinates
+ * viewport-relative.
  */
 export declare const Popover: ({ children, className, heading, isVisible, onDismiss, placement, trigger, }: PopoverProps) => ReactNode;
 //# sourceMappingURL=Popover.d.ts.map

package/dist/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAYnD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIpD,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;;;;OAIG;IACH,OAAO,EAAE,YAAY,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,OAAO,GAAI,6EAQrB,YAAY,KAAG,SA2EjB,CAAA"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAKnD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMpD,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;;;;OAIG;IACH,OAAO,EAAE,YAAY,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,OAAO,GAAI,6EAQrB,YAAY,KAAG,SAkDjB,CAAA"}

package/dist/Popover/Popover.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useClonedChild } from "@charcuterie/logic";
-import { autoUpdate, FloatingFocusManager, flip, offset, shift, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+import { FloatingFocusManager, FloatingPortal, } from "@floating-ui/react";
+import { PANEL_SURFACE_CLASS } from "../Overlay/overlayPanelClass.js";
+import { useAnchoredOverlay } from "../Overlay/useAnchoredOverlay.js";
 import { toClassName } from "../toClassName.js";
 /**
  * Replaces mux-magic's `@radix-ui/react-popover` re-export, and it
@@ -12,77 +13,40 @@ import { toClassName } from "../toClassName.js";
  *
  * What floating-ui is used for is what only it can do: collision
  * handling (`flip`, `shift`), a real dismiss layer, and focus
- * management. Positioning strategy, the top layer, and the ARIA
- * wiring come from the platform and from `useRole`.
+ * management — all of it consolidated in `useAnchoredOverlay`.
+ * Positioning strategy and the ARIA wiring come from the platform and
+ * from `useRole`.
  *
- * ### The top layer, from the platform — not a portal
+ * ### Portalled, not the top layer
  *
- * `popover="manual"` puts the panel in the top layer, which is
- * what a portal is normally reached for: no `z-index` contest, and
- * no `overflow: hidden` ancestor clipping it. Unlike a portal it
- * **stays where it is in the DOM**, so `canvas.getByRole("dialog")`
- * still finds it and a story keeps its scoping. Same argument as
- * `Modal`, one layer down.
- *
- * `manual`, not `auto`, and that is the state-ownership decision
- * again: `auto` brings the UA's own light-dismiss, which closes the
- * element by itself and leaves `isVisible` true. `useDismiss` does
- * the same job through our callback, so Charcuterie stays the only
- * thing that decides.
- *
- * ### Two UA defaults that have to be undone
- *
- * `[popover]` ships `position: fixed; inset: 0; margin: auto`,
- * which centres the panel in the viewport and fights every
- * coordinate floating-ui computes — hence `inset-auto m-0`, and
- * `strategy: "fixed"` so the numbers are viewport-relative like the
- * top layer itself. Getting either wrong reads as a positioning
- * bug rather than as a UA default.
+ * The panel goes in a `FloatingPortal` to `document.body`. The top
+ * layer (`popover="manual"`) was reached for first — it needs no
+ * portal and no `z-index` — but it does not escape an
+ * `overflow: hidden` ancestor's *clipping* in every case the fleet
+ * hit, and a portal does. The objection a portal used to raise, that
+ * it moves the panel out of a scoped `canvas` query, is answered two
+ * ways: `useRole` writes `aria-controls` on the trigger pointing at
+ * the panel `id`, so trigger→panel stays followable across the
+ * boundary; and the story scopes panel queries to
+ * `within(document.body)` while the structural `expectAgentDrivable`
+ * needs no change. `strategy: "fixed"` keeps the coordinates
+ * viewport-relative.
  */
 export const Popover = ({ children, className, heading, isVisible, onDismiss, placement = "bottom-start", trigger, }) => {
-    const { context, floatingStyles, refs } = useFloating({
-        // Read-only. Charcuterie remains the sole owner; floating-ui
-        // is told what is true and never decides it.
-        open: isVisible,
-        onOpenChange: (isNextVisible) => {
-            if (!isNextVisible) {
-                onDismiss();
-            }
-        },
+    const { clonedTrigger, context, floatingStyles, getFloatingProps, setFloating, } = useAnchoredOverlay({
+        isVisible,
+        offsetValue: 8,
+        onDismiss,
         placement,
-        middleware: [offset(8), flip(), shift({ padding: 8 })],
-        strategy: "fixed",
-        whileElementsMounted: autoUpdate,
-    });
-    // `useRole` writes `aria-expanded`, `aria-haspopup`, and
-    // `aria-controls` on the trigger and `id` + `role="dialog"` on
-    // the panel, from one source. Hand-writing them alongside is how
-    // an `aria-controls` ends up pointing at an id that moved.
-    const { getFloatingProps, getReferenceProps } = useInteractions([
-        useDismiss(context),
-        useRole(context, { role: "dialog" }),
-    ]);
-    const clonedTrigger = useClonedChild(trigger, {
-        ...getReferenceProps(),
-        ref: refs.setReference,
+        role: "dialog",
+        trigger,
     });
-    return (_jsxs(_Fragment, { children: [clonedTrigger, isVisible ? (_jsx(FloatingFocusManager, { context: context, modal: false, children: _jsx("div", { ...getFloatingProps(), "aria-label": heading, className: toClassName("inset-auto m-0 max-w-xs rounded-md border border-border-default bg-surface-overlay p-3 text-content-primary text-sm shadow-medium", className), popover: "manual", 
-                    // Duplicated from `getFloatingProps()` on purpose, and
-                    // the two cannot differ — `useRole(context, { role:
-                    // "dialog" })` above is where it comes from. Stated
-                    // here because a linter cannot see a role through a
-                    // spread, and neither can the next reader.
-                    role: "dialog", ref: (node) => {
-                        refs.setFloating(node);
-                        // In a ref callback rather than an effect, because a
-                        // `[popover]` is `display: none` until it is shown —
-                        // and `FloatingFocusManager` is a *child*, so its
-                        // effect runs first and would be focusing into a
-                        // hidden element. Refs are set during commit, before
-                        // any of that.
-                        if (node && !node.matches(":popover-open")) {
-                            node.showPopover();
-                        }
-                    }, style: floatingStyles, children: children }) })) : null] }));
+    return (_jsxs(_Fragment, { children: [clonedTrigger, isVisible ? (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, modal: false, children: _jsx("div", { ...getFloatingProps(), "aria-label": heading, className: toClassName(PANEL_SURFACE_CLASS, "z-[var(--layer-modal)] max-w-xs p-3 text-content-primary text-sm", className), ref: setFloating, 
+                        // Duplicated from `getFloatingProps()` on purpose, and
+                        // the two cannot differ — `useRole(context, { role:
+                        // "dialog" })` inside the hook is where it comes from.
+                        // Stated here because a linter cannot see a role through
+                        // a spread, and neither can the next reader.
+                        role: "dialog", style: floatingStyles, children: children }) }) })) : null] }));
 };
 //# sourceMappingURL=Popover.js.map

package/dist/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAEnD,OAAO,EACL,UAAU,EACV,oBAAoB,EACpB,IAAI,EACJ,MAAM,EACN,KAAK,EACL,UAAU,EACV,WAAW,EACX,eAAe,EACf,OAAO,GACR,MAAM,oBAAoB,CAAA;AAG3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AA4B/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,SAAS,EACT,SAAS,GAAG,cAAc,EAC1B,OAAO,GACM,EAAa,EAAE;IAC5B,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,GAAG,WAAW,CAAC;QACpD,6DAA6D;QAC7D,6CAA6C;QAC7C,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,CAAC,aAAa,EAAE,EAAE;YAC9B,IAAI,CAAC,aAAa,EAAE,CAAC;gBACnB,SAAS,EAAE,CAAA;YACb,CAAC;QACH,CAAC;QACD,SAAS;QACT,UAAU,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;QACtD,QAAQ,EAAE,OAAO;QACjB,oBAAoB,EAAE,UAAU;KACjC,CAAC,CAAA;IAEF,yDAAyD;IACzD,+DAA+D;IAC/D,iEAAiE;IACjE,2DAA2D;IAC3D,MAAM,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,GAC3C,eAAe,CAAC;QACd,UAAU,CAAC,OAAO,CAAC;QACnB,OAAO,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;KACrC,CAAC,CAAA;IAEJ,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,EAAE;QAC5C,GAAG,iBAAiB,EAAE;QACtB,GAAG,EAAE,IAAI,CAAC,YAAY;KACvB,CAAC,CAAA;IAEF,OAAO,CACL,8BACG,aAAa,EAEb,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,oBAAoB,IACnB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,YAEZ,iBACM,gBAAgB,EAAE,gBACV,OAAO,EACnB,SAAS,EAAE,WAAW,CACpB,mIAAmI,EACnI,SAAS,CACV,EACD,OAAO,EAAC,QAAQ;oBAChB,uDAAuD;oBACvD,oDAAoD;oBACpD,oDAAoD;oBACpD,oDAAoD;oBACpD,2CAA2C;oBAC3C,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;wBACZ,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;wBAEtB,qDAAqD;wBACrD,qDAAqD;wBACrD,kDAAkD;wBAClD,iDAAiD;wBACjD,qDAAqD;wBACrD,eAAe;wBACf,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;4BAC3C,IAAI,CAAC,WAAW,EAAE,CAAA;wBACpB,CAAC;oBACH,CAAC,EACD,KAAK,EAAE,cAAc,YAEpB,QAAQ,GACL,GACe,CACxB,CAAC,CAAC,CAAC,IAAI,IACP,CACJ,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,oBAAoB,EACpB,cAAc,GACf,MAAM,oBAAoB,CAAA;AAG3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AA4B/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,SAAS,EACT,SAAS,GAAG,cAAc,EAC1B,OAAO,GACM,EAAa,EAAE;IAC5B,MAAM,EACJ,aAAa,EACb,OAAO,EACP,cAAc,EACd,gBAAgB,EAChB,WAAW,GACZ,GAAG,kBAAkB,CAAC;QACrB,SAAS;QACT,WAAW,EAAE,CAAC;QACd,SAAS;QACT,SAAS;QACT,IAAI,EAAE,QAAQ;QACd,OAAO;KACR,CAAC,CAAA;IAEF,OAAO,CACL,8BACG,aAAa,EAEb,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,cAAc,cACb,KAAC,oBAAoB,IACnB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,YAEZ,iBACM,gBAAgB,EAAE,gBACV,OAAO,EACnB,SAAS,EAAE,WAAW,CACpB,mBAAmB,EACnB,kEAAkE,EAClE,SAAS,CACV,EACD,GAAG,EAAE,WAAW;wBAChB,uDAAuD;wBACvD,oDAAoD;wBACpD,uDAAuD;wBACvD,yDAAyD;wBACzD,6CAA6C;wBAC7C,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,cAAc,YAEpB,QAAQ,GACL,GACe,GACR,CAClB,CAAC,CAAC,CAAC,IAAI,IACP,CACJ,CAAA;AACH,CAAC,CAAA"}

package/dist/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAanD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAIhD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG;IACrC;;;;;;OAMG;IACH,QAAQ,EAAE,YAAY,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,eAAO,MAAM,OAAO,GAAI,wEAOrB,YAAY,KAAG,SAoFjB,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAcnD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAIhD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG;IACrC;;;;;;OAMG;IACH,QAAQ,EAAE,YAAY,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,eAAO,MAAM,OAAO,GAAI,wEAOrB,YAAY,KAAG,SAsFjB,CAAA"}

package/dist/Tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useClonedChild, useVisibility, } from "@charcuterie/logic";
-import { autoUpdate, flip, offset, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from "@floating-ui/react";
+import { autoUpdate, FloatingPortal, flip, offset, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from "@floating-ui/react";
 import { mergeSlotProps } from "../slotProps.js";
 import { toClassName } from "../toClassName.js";
 /**
@@ -96,29 +96,29 @@ export const Tooltip = ({ children, className, delay = 200, label, placement = "
         ...getReferenceProps(),
         ref: refs.setReference,
     }));
-    return (_jsxs(_Fragment, { children: [clonedTrigger, isVisible ? (_jsx("div", { ...getFloatingProps(), className: toClassName(
-                // `intent-neutral-solid` + its own `on-solid`, rather
-                // than `surface-inverse` + `content-on-accent`. The
-                // second pair looks like the obvious one and is not a
-                // *pair* at all — nothing in the token set promises those
-                // two contrast, and in `daylight` dark they land at
-                // 2.9:1. The `solid`/`on-solid` roles exist precisely to
-                // be a guaranteed couple, and the contrast gate checks
-                // them as one.
-                "inset-auto m-0 max-w-xs rounded-md bg-intent-neutral-solid px-2 py-1 text-intent-neutral-on-solid text-xs shadow-medium", className), 
-                // No `popover="manual"` and no `FloatingFocusManager`,
-                // unlike `Popover`. Both exist to manage focus, and focus
-                // never enters a tooltip — moving it here is what makes
-                // one unescapable. The trade is that a tooltip is not in
-                // the top layer, so it can be clipped by an
-                // `overflow: hidden` ancestor; `strategy: "fixed"` keeps
-                // that to ancestors that actually clip fixed descendants.
-                ref: refs.setFloating, 
-                // Duplicated from `getFloatingProps()` deliberately, and
-                // the two cannot differ — `useRole(context, { role:
-                // "tooltip" })` above is where it comes from. Stated here
-                // because a linter cannot see a role through a spread, and
-                // neither can the next reader.
-                role: "tooltip", style: floatingStyles, children: label })) : null] }));
+    return (_jsxs(_Fragment, { children: [clonedTrigger, isVisible ? (_jsx(FloatingPortal, { children: _jsx("div", { ...getFloatingProps(), className: toClassName(
+                    // `intent-neutral-solid` + its own `on-solid`, rather
+                    // than `surface-inverse` + `content-on-accent`. The
+                    // second pair looks like the obvious one and is not a
+                    // *pair* at all — nothing in the token set promises those
+                    // two contrast, and in `daylight` dark they land at
+                    // 2.9:1. The `solid`/`on-solid` roles exist precisely to
+                    // be a guaranteed couple, and the contrast gate checks
+                    // them as one.
+                    "z-[var(--layer-tooltip)] max-w-xs rounded-md bg-intent-neutral-solid px-2 py-1 text-intent-neutral-on-solid text-xs shadow-medium", className), 
+                    // Portalled to `document.body`, the same reversal as the
+                    // other overlays: `strategy: "fixed"` alone still let an
+                    // `overflow: hidden` ancestor clip the tip, and a portal
+                    // does not. No `FloatingFocusManager`, unlike `Popover` —
+                    // focus never enters a tooltip, and moving it here is what
+                    // would make one unescapable. `--layer-tooltip` keeps it
+                    // above a modal.
+                    ref: refs.setFloating, 
+                    // Duplicated from `getFloatingProps()` deliberately, and
+                    // the two cannot differ — `useRole(context, { role:
+                    // "tooltip" })` above is where it comes from. Stated here
+                    // because a linter cannot see a role through a spread, and
+                    // neither can the next reader.
+                    role: "tooltip", style: floatingStyles, children: label }) })) : null] }));
 };
 //# sourceMappingURL=Tooltip.js.map