@allxsmith/bestax-bulma 5.28.0 → 5.30.0

package/dist/index.cjs

@@ -16,6 +16,9 @@ const useConfig = () => React.useContext(ConfigContext);
 /**
  * ConfigProvider injects configuration into all child components via React context.
  *
+ * A nested provider replaces the outer one's settings rather than adding to
+ * them, so inside it any setting it leaves out is back to its default.
+ *
  * @function
  * @param {ConfigProviderProps} props - Provider props.
  * @returns {JSX.Element} The context provider wrapping children.
@@ -25,8 +28,8 @@ const useConfig = () => React.useContext(ConfigContext);
  *   <App />
  * </ConfigProvider>
  */
-const ConfigProvider = ({ classPrefix, iconLibrary, children, }) => {
-    return (jsxRuntime.jsx(ConfigContext.Provider, { value: { classPrefix, iconLibrary }, children: children }));
+const ConfigProvider = ({ classPrefix, iconLibrary, portalContainer, children, }) => {
+    return (jsxRuntime.jsx(ConfigContext.Provider, { value: { classPrefix, iconLibrary, portalContainer }, children: children }));
 };
 /**
  * Utility hook to get the configured class prefix string.
@@ -2934,7 +2937,26 @@ function resolvePortalContainer(container) {
     return container;
 }
 /**
- * Renders its children into another part of the page, `document.body` unless `container` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.
+ * Where a component's portal goes, as a function to call when the portal is
+ * created: the target the component was given, else the `portalContainer` a
+ * `ConfigProvider` sets, else `document.body`, each read as
+ * `resolvePortalContainer` reads it. A component that portals resolves its
+ * target through this, so the provider's default reaches it.
+ *
+ * The hook only reads context, so it is safe to call on the server, ahead of
+ * any early return. The function it returns reads the DOM, so call it only
+ * where the portal is created, which the server never reaches.
+ *
+ * @function usePortalContainer
+ * @returns A function that takes the component's own target, if any, and
+ * returns the DOM node to portal into.
+ */
+function usePortalContainer() {
+    const { portalContainer } = useConfig();
+    return container => resolvePortalContainer(container || portalContainer);
+}
+/**
+ * Renders its children into another part of the page, `document.body` unless `container` or a `ConfigProvider` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.
  *
  * React's server renderer can't render a portal, so `Portal` renders nothing
  * on the server and during hydration, and mounts its children in the commit
@@ -2945,8 +2967,12 @@ function resolvePortalContainer(container) {
  * portaled children, and their React events bubble through the React tree.
  * CSS inheritance follows the DOM instead: a scoped (non-`isRoot`) `Theme`
  * sets its variables on a wrapper element the portaled content has left, so
- * that content sees the page-level theme. Point `container` at an element
- * inside the themed area to keep it.
+ * that content sees the page-level theme, and styles scoped to a shadow root
+ * don't reach `document.body` at all. To keep them, portal into an element
+ * inside the themed area or the shadow root: pass it as `container`, or as
+ * the `portalContainer` of a `ConfigProvider` around that area. The second
+ * also reaches what the library's components portal, such as Popover's
+ * `appendToBody` panel or a `Modal` with `portal`.
  *
  * Tab order and focus follow the DOM too. Content portaled from inside a
  * focus trap is no longer inside the trapped element, so the trap neither
@@ -2972,11 +2998,12 @@ function resolvePortalContainer(container) {
  */
 function Portal({ children, container, disabled = false }) {
     const hydrated = useIsHydrated();
+    const resolveContainer = usePortalContainer();
     if (disabled)
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
     if (!hydrated)
         return null;
-    return reactDom.createPortal(children, resolvePortalContainer(container));
+    return reactDom.createPortal(children, resolveContainer(container));
 }
 
 /**
@@ -3131,7 +3158,7 @@ const ModalClose = ({ className, size = 'large', variant = 'delete', ...props })
  * @see {@link https://bulma.io/documentation/components/modal/ | Bulma Modal documentation}
  */
 const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClose, className, textColor, bgColor, modalCardTitle, modalCardFoot, type, children, closeOnEscape = true, lockScroll = true, portal = false, role, 'aria-modal': ariaModalProp, ...props }, ref) {
-    const { classPrefix } = useConfig();
+    const { classPrefix, portalContainer } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -3181,10 +3208,17 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
     // hydrating render have to stay inline and only move into the portal once
     // we're past hydration.
     const onClient = useIsHydrated();
-    // Moving into the portal remounts the modal's subtree, so any effect holding
-    // a DOM node from before the move is holding a detached one. Effects that
-    // touch the modal's nodes key on this so they re-run against the new tree.
+    const resolveContainer = usePortalContainer();
+    // Moving into the portal, or from one portal target to another, remounts
+    // the modal's subtree, so any effect holding a DOM node from before the move
+    // is holding a detached one. Effects that touch the modal's nodes key on
+    // this, on `portal` and on `defaultTarget`, so they re-run against the new
+    // tree.
     const isPortaled = Boolean(portal) && onClient;
+    // The configured `portalContainer` only places a modal portaled with
+    // `portal` set to `true`. In place, or with a target of its own, a change
+    // to it moves nothing, so it mustn't re-run the effects either.
+    const defaultTarget = isPortaled && portal === true ? portalContainer : undefined;
     useScrollLock(isModalActive && lockScroll);
     // Record open order so keyboard handling only applies to the topmost modal.
     React.useEffect(() => {
@@ -3264,11 +3298,12 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
             previouslyFocusedRef.current?.focus?.();
         };
         // `isPortaled` flips once when a hydrated portal modal moves out of the
-        // inline tree; re-running rebinds focus onto the remounted nodes. The
-        // cleanup above restores focus to the pre-open element first (the detached
-        // subtree has left focus on <body>), so the re-run re-records the same
-        // element and restore-on-close still lands in the right place.
-    }, [isModalActive, isPortaled]);
+        // inline tree, and `portal` or `defaultTarget` changing moves a portaled
+        // one to another target; re-running rebinds focus onto the remounted
+        // nodes. The cleanup above restores focus to the pre-open element first
+        // (the detached subtree has left focus on <body>), so the re-run re-records
+        // the same element and restore-on-close still lands in the right place.
+    }, [isModalActive, isPortaled, portal, defaultTarget]);
     // Check if children contain compound components
     const hasCompoundComponents = React.Children.toArray(children).some(child => React.isValidElement(child) &&
         (child.type === ModalBackground ||
@@ -3305,7 +3340,7 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
         modalElement = (jsxRuntime.jsxs("div", { className: modalClasses, ref: combinedRef, role: resolvedRole, "aria-modal": resolvedAriaModal, "aria-labelledby": titleId, tabIndex: -1, ...rest, "data-testid": "modal", children: [jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'modal-background'), onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxRuntime.jsxs("div", { className: prefixedClassNames(classPrefix, 'modal-card'), children: [modalCardTitle && (jsxRuntime.jsxs("header", { className: prefixedClassNames(classPrefix, 'modal-card-head'), children: [jsxRuntime.jsx("p", { id: titleId, className: prefixedClassNames(classPrefix, 'modal-card-title'), children: modalCardTitle }), onClose && (jsxRuntime.jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsxRuntime.jsx("section", { className: prefixedClassNames(classPrefix, 'modal-card-body'), "data-testid": "modal-body", children: children }), modalCardFoot && (jsxRuntime.jsx("footer", { className: prefixedClassNames(classPrefix, 'modal-card-foot'), children: modalCardFoot }))] })) : (jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'modal-content'), "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsxRuntime.jsx("button", { className: prefixedClassNames(classPrefix, 'modal-close', 'is-large'), "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
     }
     if (isPortaled) {
-        const target = resolvePortalContainer(typeof portal === 'boolean' ? undefined : portal);
+        const target = resolveContainer(typeof portal === 'boolean' ? undefined : portal);
         return reactDom.createPortal(modalElement, target);
     }
     return modalElement;
@@ -4860,1551 +4895,1552 @@ const CollapsesComponent = ({ multiple = false, value, defaultValue, onChange, s
 };
 const Collapses = withSubComponents(CollapsesComponent, { Collapse }, 'Collapses');
 
+// INTERNAL: deliberately not exported from src/index.ts.
 /**
- * The `Tooltip` component displays helpful information when users hover over or focus on an element.
- *
- * @function
- * @param {TooltipProps} props - Props for the Tooltip component.
- * @returns {JSX.Element} The rendered tooltip wrapper.
- *
- * @example
- * // Basic tooltip
- * <Tooltip label="This is helpful info">
- *   <button>Hover me</button>
- * </Tooltip>
- *
- * @example
- * // Positioned tooltip with color
- * <Tooltip label="Delete item" position="right" color="danger">
- *   <Icon icon="fas fa-trash" />
- * </Tooltip>
- *
- * @example
- * // Multiline tooltip
- * <Tooltip label="This is a longer tooltip that wraps to multiple lines" multiline>
- *   <span>?</span>
- * </Tooltip>
+ * `useLayoutEffect` in the browser, `useEffect` on the server. A server
+ * render runs neither, and React 18 warns about a layout effect there, so the
+ * server is handed the plain one.
  */
-const Tooltip = ({ label, content, position = 'top', color, size, active: alwaysActive, multiline = false, animated = true, square = false, dashed = false, delay = 0, closeDelay = 0, children, className, tooltipClassName, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const [isVisible, setIsVisible] = React.useState(false);
-    const [isHovering, setIsHovering] = React.useState(false);
-    const [resolvedPosition, setResolvedPosition] = React.useState(position === 'auto' ? 'top' : position);
-    const [contentStyle, setContentStyle] = React.useState({});
-    const openTimeoutRef = React.useRef(null);
-    const closeTimeoutRef = React.useRef(null);
-    const wrapperRef = React.useRef(null);
-    const contentRef = React.useRef(null);
-    // Clear timeouts on unmount
-    React.useEffect(() => {
-        return () => {
-            if (openTimeoutRef.current) {
-                clearTimeout(openTimeoutRef.current);
-            }
-            if (closeTimeoutRef.current) {
-                clearTimeout(closeTimeoutRef.current);
-            }
-        };
-    }, []);
-    // Handle delayed visibility
-    React.useEffect(() => {
-        if (isHovering) {
-            if (closeTimeoutRef.current) {
-                clearTimeout(closeTimeoutRef.current);
-                closeTimeoutRef.current = null;
-            }
-            if (delay > 0) {
-                openTimeoutRef.current = setTimeout(() => {
-                    setIsVisible(true);
-                }, delay);
-            }
-            else {
-                // eslint-disable-next-line react-hooks/set-state-in-effect -- show immediately on hover when no delay
-                setIsVisible(true);
-            }
-        }
-        else {
-            if (openTimeoutRef.current) {
-                clearTimeout(openTimeoutRef.current);
-                openTimeoutRef.current = null;
-            }
-            if (closeDelay > 0) {
-                closeTimeoutRef.current = setTimeout(() => {
-                    setIsVisible(false);
-                }, closeDelay);
-            }
-            else {
-                setIsVisible(false);
-            }
-        }
-    }, [isHovering, delay, closeDelay]);
-    // Auto-placement and overflow correction
-    React.useLayoutEffect(() => {
-        const isAuto = position === 'auto';
-        if (!isAuto) {
-            // eslint-disable-next-line react-hooks/set-state-in-effect -- layout measurement effect resolves placement
-            setResolvedPosition(position);
-        }
-        const showing = isVisible || alwaysActive;
-        if (!showing) {
-            setContentStyle({});
-            return;
-        }
-        const wrapper = wrapperRef.current;
-        const content = contentRef.current;
-        if (!wrapper || !content)
-            return;
-        const wrapperRect = wrapper.getBoundingClientRect();
-        const margin = 40;
-        const edgePadding = 8; // minimum distance from viewport edge
-        // Step 1: determine position (auto mode only)
-        if (isAuto) {
-            const spaceTop = wrapperRect.top;
-            const spaceBottom = window.innerHeight - wrapperRect.bottom;
-            if (spaceTop >= margin) {
-                setResolvedPosition('top');
-            }
-            else if (spaceBottom >= margin) {
-                setResolvedPosition('bottom');
-            }
-            else if (window.innerWidth - wrapperRect.right >= wrapperRect.left) {
-                setResolvedPosition('right');
-            }
-            else {
-                setResolvedPosition('left');
-            }
-        }
-        // Step 2: measure tooltip content and correct overflow.
-        // Use requestAnimationFrame so the resolved position class is applied first.
-        requestAnimationFrame(() => {
-            const contentEl = contentRef.current;
-            if (!contentEl)
-                return;
-            const contentRect = contentEl.getBoundingClientRect();
-            const style = {};
-            // For top/bottom positions, tooltip is centered horizontally via CSS
-            // (left: 50%; transform: translateX(-50%)).
-            // Check if it overflows left or right and apply a corrective shift.
-            const pos = isAuto ? undefined : position; // read from state won't be updated yet in auto
-            const effectivePos = pos || 'top'; // fallback, actual is set by state
-            const isVertical = effectivePos === 'top' ||
-                effectivePos === 'bottom' ||
-                resolvedPosition === 'top' ||
-                resolvedPosition === 'bottom';
-            if (isVertical) {
-                if (contentRect.left < edgePadding) {
-                    // Overflows left — shift right
-                    const shift = edgePadding - contentRect.left;
-                    style.left = `calc(50% + ${shift}px)`;
-                    style['--tooltip-arrow-offset'] =
-                        `${-shift}px`;
-                }
-                else if (contentRect.right > window.innerWidth - edgePadding) {
-                    // Overflows right — shift left
-                    const shift = contentRect.right - (window.innerWidth - edgePadding);
-                    style.left = `calc(50% - ${shift}px)`;
-                    style['--tooltip-arrow-offset'] =
-                        `${shift}px`;
-                }
-            }
-            else {
-                // For left/right positions, tooltip is centered vertically via CSS
-                // (top: 50%; transform: translateY(-50%)).
-                if (contentRect.top < edgePadding) {
-                    const shift = edgePadding - contentRect.top;
-                    style.top = `calc(50% + ${shift}px)`;
-                    style['--tooltip-arrow-offset'] =
-                        `${-shift}px`;
-                }
-                else if (contentRect.bottom > window.innerHeight - edgePadding) {
-                    const shift = contentRect.bottom - (window.innerHeight - edgePadding);
-                    style.top = `calc(50% - ${shift}px)`;
-                    style['--tooltip-arrow-offset'] =
-                        `${shift}px`;
-                }
-            }
-            setContentStyle(style);
-        });
-    }, [position, resolvedPosition, isVisible, alwaysActive, label, content]);
-    const handleMouseEnter = React.useCallback(() => {
-        setIsHovering(true);
-    }, []);
-    const handleMouseLeave = React.useCallback(() => {
-        setIsHovering(false);
-    }, []);
-    const handleFocus = React.useCallback(() => {
-        setIsHovering(true);
-    }, []);
-    const handleBlur = React.useCallback(() => {
-        setIsHovering(false);
-    }, []);
-    // Generate Bulma classes
-    const tooltipClasses = usePrefixedClassNames('tooltip', {
-        'is-active': alwaysActive || isVisible,
-        [`is-${resolvedPosition}`]: resolvedPosition,
-        [`is-${color}`]: color,
-        [`is-${size}`]: size,
-        'is-multiline': multiline,
-        'is-animated': animated,
-        'is-square': square,
-        'is-dashed': dashed,
-    });
-    const combinedClasses = classNames(tooltipClasses, bulmaHelperClasses, className);
-    const combinedTooltipClasses = usePrefixedClassNames('tooltip-content', tooltipClassName);
-    return (jsxRuntime.jsxs("span", { ref: wrapperRef, className: combinedClasses, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, ...(label ? { 'data-tooltip': label } : {}), ...rest, children: [children, jsxRuntime.jsx("span", { ref: contentRef, className: combinedTooltipClasses, role: "tooltip", "aria-hidden": !isVisible && !alwaysActive, style: Object.keys(contentStyle).length > 0 ? contentStyle : undefined, children: content || label })] }));
-};
+const useClientLayoutEffect = typeof document === 'undefined' ? React.useEffect : React.useLayoutEffect;
 
+// INTERNAL: deliberately not exported from src/index.ts.
 /**
- * Whether `el` is editable while its parent is not, which makes it an editing
- * host: the one tab stop an editable region gets. `contenteditable="false"`
- * turns editing off, and a missing or unknown value inherits the parent's.
+ * Runs the caller's own handler on the element that holds the trigger, then
+ * the hook's, so neither replaces the other.
  */
-function isEditingHost(el) {
-    const editable = (node) => {
-        const value = node.getAttribute('contenteditable')?.toLowerCase();
-        if (value === undefined)
-            return null;
-        if (value === '' || value === 'true' || value === 'plaintext-only') {
-            return true;
-        }
-        return value === 'false' ? false : null;
+function chain$1(own, ours) {
+    return event => {
+        own?.(event);
+        ours(event);
     };
-    if (editable(el) !== true)
-        return false;
-    for (let node = el.parentElement; node; node = node.parentElement) {
-        const state = editable(node);
-        if (state !== null)
-            return !state;
-    }
-    return true;
 }
-/** Whether `el` is the summary of its `<details>`: the first one, not a stray. */
-const isDetailsSummary = (el) => el.parentElement?.localName === 'details' &&
-    Array.from(el.parentElement.children).find(child => child.localName === 'summary') === el;
 /**
- * Whether the browser puts `el` in the tab order, before anything that hides
- * or disables it. The `tabIndex` property can't answer this on its own: it
- * can read `-1` for an editable region or an `<embed>` that Tab still visits,
- * and `0` for a `<video>` without controls that it doesn't. So a valid
- * `tabindex` attribute decides, and otherwise the element's kind does.
- * Internal like `firstTabStop`: `src/index.ts` names what it takes from here.
+ * Whether focus that just arrived on `el` is keyboard focus, as the browser
+ * decides it for `:focus-visible`: focus from a key or from the browser's
+ * own controls is, focus a press brings isn't, and focus a script moves
+ * follows whichever came last. A browser that can't match the selector
+ * throws, and then every focus counts, so keyboard users can still open it.
  */
-function isTabbableKind(el) {
-    const tabindex = el.getAttribute('tabindex');
-    if (tabindex !== null && /^\s*[+-]?\d/.test(tabindex)) {
-        return el.tabIndex >= 0;
+function isKeyboardFocus(el) {
+    try {
+        return el.matches(':focus-visible');
     }
-    switch (el.localName) {
-        case 'a':
-        case 'area':
-            return el.hasAttribute('href');
-        case 'input':
-            return el.type !== 'hidden';
-        case 'button':
-        case 'select':
-        case 'textarea':
-        case 'iframe':
-        case 'embed':
-        case 'object':
-            return true;
-        case 'audio':
-        case 'video':
-            return el.hasAttribute('controls');
-        case 'summary':
-            return isDetailsSummary(el);
-        default:
-            return isEditingHost(el);
+    catch {
+        return true;
     }
 }
+/** Whether `node` is `container` or inside it, when there are both. */
+const within = (container, node) => Boolean(container && node && container.contains(node));
 /**
- * The node's parent in the flattened tree, the one the browser renders and
- * tabs through: the slot it is assigned to, else its parent, else the host of
- * the shadow root it tops, and nothing above the document. A closed shadow
- * root hides its slots (`assignedSlot` reads `null` under one), so a child of
- * its host goes straight to the host, whether a slot takes it or not.
+ * Per document, the hooks that want Escape and the one listener they share
+ * while there are any, so a card inside another card doesn't add a second
+ * listener that closes both on one keypress.
  */
-const flatParent = (node) => node.assignedSlot ??
-    node.parentElement ??
-    node.parentNode?.host ??
-    null;
+const escapeListeners = new Map();
+/** Counts openings across the page, so the most recent one is known. */
+let openings = 0;
 /**
- * The element's children in the flattened tree, in the order they render: a
- * host's shadow root content, a slot's assigned elements (or its fallback
- * content when nothing is assigned), anything else's own children. A host
- * whose shadow root is closed has no root to read, so its own children stand
- * in, including any that no slot takes and that aren't rendered.
+ * Adds `entry` to the hooks that want Escape on `doc`, starting the shared
+ * listener when it is the first.
+ *
+ * Escape takes back every open that is on its way, so nothing appears right
+ * after it, and closes one open floating element, chosen by these rules in
+ * turn:
+ *
+ * 1. One that focus is in, on its trigger or inside it, when there is one.
+ * 2. The innermost: one whose floating element holds no other's trigger.
+ *    That follows nesting whether either one is portaled, since an inner
+ *    trigger sits in the outer floating element either way.
+ * 3. The one that opened last.
+ *
+ * The keypress belongs to whatever has focus. When that is one of the open
+ * floating elements or their triggers, or nothing, the listener stops it in
+ * the capture phase, before anything around (a Popover, a Modal) sees it,
+ * unless the one it closes was set not to consume Escape.
+ * When focus is anywhere else, such as a combobox or a dialog of its own,
+ * the floating element still closes, since hover put it there without
+ * focus, and the key goes on to that owner.
+ *
+ * @returns What to call when the hook stops wanting Escape.
  */
-function flatChildren(el) {
-    if (el.shadowRoot)
-        return Array.from(el.shadowRoot.children);
-    if (el.localName === 'slot') {
-        const assigned = el.assignedNodes();
-        if (assigned.length > 0) {
-            return assigned.filter((node) => node.nodeType === Node.ELEMENT_NODE);
-        }
+function wantEscape(doc, entry) {
+    let listener = escapeListeners.get(doc);
+    if (!listener) {
+        const entries = new Set();
+        const handleKeyDown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            const open = [];
+            // A copy, since taking an open back can take its hook out of the set.
+            for (const each of [...entries]) {
+                if (each.openedAt)
+                    open.push(each);
+                else
+                    each.cancel();
+            }
+            const focused = getDeepestActiveElement(doc);
+            const holding = open.filter(each => within(each.trigger(), focused) || within(each.floating(), focused));
+            const pool = holding.length > 0 ? holding : open;
+            let top;
+            for (const each of pool) {
+                const holdsAnother = pool.some(other => other !== each && within(each.floating(), other.trigger()));
+                if (!holdsAnother && (!top || each.openedAt > top.openedAt)) {
+                    top = each;
+                }
+            }
+            if (!top)
+                return;
+            if (top.consumes() &&
+                (holding.length > 0 || !focused || focused === doc.body)) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            top.close();
+        };
+        doc.addEventListener('keydown', handleKeyDown, true);
+        listener = {
+            entries,
+            stop: () => {
+                doc.removeEventListener('keydown', handleKeyDown, true);
+                escapeListeners.delete(doc);
+            },
+        };
+        escapeListeners.set(doc, listener);
     }
-    return Array.from(el.children);
+    const shared = listener;
+    shared.entries.add(entry);
+    return () => {
+        shared.entries.delete(entry);
+        if (shared.entries.size === 0)
+            shared.stop();
+    };
 }
-const isShown = (el) => !el.hasAttribute('inert') && getComputedStyle(el).display !== 'none';
-const isVisible = (el) => {
-    const { visibility } = getComputedStyle(el);
-    return visibility !== 'hidden' && visibility !== 'collapse';
-};
 /**
- * Whether nothing from `el` up to `top` hides it: `inert`, `display: none`
- * (not inherited, so each element is checked) or a closed `<details>` it
- * isn't the summary of. `top` itself isn't checked, and `null` walks to the
- * top of the page.
+ * Decides when a floating element that opens on hover or keyboard focus asks
+ * to open and to close. It renders nothing, and leaves roles, ARIA and
+ * placement to the component that calls it.
+ *
+ * - The pointer entering, or keyboard focus arriving on the trigger, asks to
+ *   open after `openDelay`. A touch pointer doesn't count. Neither does focus
+ *   that a press brings to the trigger: it counts when the browser shows it
+ *   as `:focus-visible`. The pointer arriving from outside a shadow root the
+ *   trigger renders into counts too, though React sends no enter for it.
+ * - Focus in the floating element holds it open however it got there,
+ *   including focus in content it portals elsewhere, such as a nested card.
+ *   Whether a click focuses what it lands on is up to the browser: Safari
+ *   and Firefox on macOS don't focus a button on click, so there a clicked
+ *   button doesn't hold it once the pointer leaves.
+ * - Once the pointer and focus have both left, it asks to close after
+ *   `closeDelay`, and either coming back before then keeps it open. Nothing
+ *   else closes it on a timer.
+ * - Escape closes it at once, wherever focus is, and stops there when focus
+ *   is in it, on its trigger or nowhere, so a `Popover` or `Modal` around it
+ *   keeps its own. With focus somewhere else, or with `consumeEscape` off,
+ *   the key goes on after closing it. Inside another one, the inner one
+ *   closes first. Escape before it
+ *   opens takes the opening back and goes on its way. One key listener per
+ *   document serves every hook on it, there only while one of them is open
+ *   or on its way to open.
+ * - With `openOnTap`, a tap on the trigger opens it at once and the next tap
+ *   on the trigger closes it. While a tap holds it open, a press outside the
+ *   trigger and the floating element closes it, from a listener on the
+ *   document that is there only then. Taps never count as hover, and mouse
+ *   and pen work the same with it or without.
+ * - Once it closes, for any reason, whatever was holding it open has to
+ *   leave and come back to open it again.
+ * - When the floating element closes with focus inside it, focus goes back
+ *   to the trigger, unless the same update put it somewhere else. Handing it
+ *   back doesn't count as focus arriving.
+ *
+ * Nothing it scheduled runs after the component unmounts.
+ *
+ * @function useHoverOpen
+ * @param options - The open state, how to ask for another, the delays, and the two elements.
+ * @returns Handlers for the element that holds the trigger.
  */
-function isShownUpTo(el, top) {
-    let below = null;
-    for (let node = el; node && node !== top; node = flatParent(node)) {
-        if (!isShown(node))
-            return false;
-        if (below &&
-            node.localName === 'details' &&
-            !node.hasAttribute('open') &&
-            !isDetailsSummary(below)) {
-            return false;
+function useHoverOpen(options) {
+    const latestRef = React.useRef(options);
+    const stateRef = React.useRef({
+        pointerIn: false,
+        focusIn: false,
+        focusInFloating: false,
+        held: false,
+        opening: false,
+        asked: false,
+        restoring: false,
+    });
+    // In the hooks that want Escape from the moment an open is on its way until
+    // the floating element closes, and out otherwise. Stamped with the order it
+    // opened in.
+    const listenForEscape = React.useCallback(function listen() {
+        const s = stateRef.current;
+        const entry = entryRef.current;
+        const { open, triggerRef } = latestRef.current;
+        if (!open)
+            entry.openedAt = 0;
+        else if (!entry.openedAt) {
+            openings += 1;
+            entry.openedAt = openings;
         }
-        below = node;
-    }
-    return true;
-}
-/**
- * The images that use the image map `area` belongs to. An image names its
- * map with `usemap="#…"`, matching the map's `name` or `id`.
- */
-function imagesUsingMapOf(area) {
-    const map = area.closest('map');
-    if (!map)
-        return [];
-    const names = [map.getAttribute('name'), map.id].filter(name => name);
-    return Array.from(area.getRootNode().querySelectorAll('img[usemap]')).filter(img => {
-        const ref = img.getAttribute('usemap');
-        return ref.startsWith('#') && names.includes(ref.slice(1));
+        const wanted = open || s.opening || s.asked;
+        if (wanted === Boolean(s.releaseEscape))
+            return;
+        if (s.releaseEscape) {
+            s.releaseEscape();
+            s.releaseEscape = undefined;
+            return;
+        }
+        const doc = triggerRef.current?.ownerDocument ?? document;
+        s.releaseEscape = wantEscape(doc, entry);
+    }, []);
+    const entryRef = React.useRef({
+        openedAt: 0,
+        trigger: () => latestRef.current.triggerRef.current,
+        floating: () => latestRef.current.floatingRef.current,
+        // Only ever called while an open is on its way, so it is one or the
+        // other: still waiting on its delay, or asked for already.
+        cancel: () => {
+            const s = stateRef.current;
+            clearTimeout(s.timer);
+            // An ask already made is taken back by asking the other way.
+            if (s.asked)
+                latestRef.current.onOpenChange(false);
+            s.opening = false;
+            s.asked = false;
+            listenForEscape();
+        },
+        close: () => {
+            clearTimeout(stateRef.current.timer);
+            latestRef.current.onOpenChange(false);
+        },
+        consumes: () => latestRef.current.consumeEscape !== false,
     });
+    // Asks to open or to close. Escape can take an ask to open back until it is
+    // answered: by the commit that follows it, or, when the caller keeps it
+    // closed without rendering at all, once the event that asked is over, by
+    // which time React has rendered any answer the caller set.
+    const ask = React.useCallback((next) => {
+        const s = stateRef.current;
+        s.asked = next;
+        latestRef.current.onOpenChange(next);
+        listenForEscape();
+        if (!next)
+            return;
+        clearTimeout(s.askTimer);
+        s.askTimer = setTimeout(() => {
+            // Still closed: the caller turned it down.
+            if (latestRef.current.open)
+                return;
+            s.asked = false;
+            s.tappedIn = undefined;
+            listenForEscape();
+        });
+    }, [listenForEscape]);
+    // Asks for what the pointer and focus call for, after its delay, when that
+    // changed since the last time and isn't the state already.
+    const settle = React.useCallback(() => {
+        const s = stateRef.current;
+        const held = s.pointerIn || s.focusIn;
+        if (held !== s.held) {
+            s.held = held;
+            clearTimeout(s.timer);
+            const { open, openDelay, closeDelay } = latestRef.current;
+            s.opening = held && !open;
+            if (held !== open) {
+                s.timer = setTimeout(() => {
+                    s.opening = false;
+                    if (latestRef.current.open !== held)
+                        ask(held);
+                    else
+                        listenForEscape();
+                }, held ? openDelay : closeDelay);
+            }
+        }
+        listenForEscape();
+    }, [listenForEscape, ask]);
+    // While a tap holds the floating element open, a press outside the trigger
+    // and the floating element closes it. Set up again each time it opens or
+    // closes.
+    const listenForPress = React.useCallback(() => {
+        const s = stateRef.current;
+        s.stopPress?.();
+        s.stopPress = undefined;
+        const doc = latestRef.current.open ? s.tappedIn : undefined;
+        if (!doc)
+            return;
+        const handlePointerDown = (event) => {
+            // Inside is a press React brought to the holder, which covers content
+            // the floating element portals elsewhere, or one whose path runs
+            // through the trigger or the floating element, which covers a press
+            // that something inside stopped before React got it to the holder.
+            const { triggerRef, floatingRef } = latestRef.current;
+            if (event === s.pressedInside ||
+                isEventInside(event, triggerRef.current) ||
+                isEventInside(event, floatingRef.current)) {
+                return;
+            }
+            latestRef.current.onOpenChange(false);
+        };
+        doc.addEventListener('pointerdown', handlePointerDown);
+        s.stopPress = () => doc.removeEventListener('pointerdown', handlePointerDown);
+    }, []);
+    useClientLayoutEffect(() => {
+        latestRef.current = options;
+        // The commit after an ask to open answers it, open or still closed. A
+        // tap that asked and still finds it closed was turned down.
+        const s = stateRef.current;
+        if (s.asked) {
+            s.asked = false;
+            if (!options.open)
+                s.tappedIn = undefined;
+            listenForEscape();
+        }
+    });
+    useClientLayoutEffect(() => {
+        const s = stateRef.current;
+        return () => {
+            clearTimeout(s.timer);
+            clearTimeout(s.askTimer);
+            s.opening = false;
+            s.asked = false;
+            s.releaseEscape?.();
+            s.releaseEscape = undefined;
+            s.stopPress?.();
+            s.stopPress = undefined;
+        };
+    }, []);
+    const { open } = options;
+    // Before paint, so a pointer or a key arriving next finds this settled.
+    useClientLayoutEffect(() => {
+        const s = stateRef.current;
+        if (!open) {
+            // The floating element left from under the pointer, if it was there,
+            // and no leave event says so. Focus resting on the trigger has done
+            // its job too, so neither opens it again until it comes back.
+            s.pointerIn = false;
+            s.focusIn = false;
+            s.tappedIn = undefined;
+            if (s.focusInFloating) {
+                s.focusInFloating = false;
+                const trigger = latestRef.current.triggerRef.current;
+                // Focus that went down with the floating element sits on <body>.
+                // Focus somewhere else was put there by the same update, so it stays.
+                if (trigger &&
+                    trigger.ownerDocument.activeElement === trigger.ownerDocument.body) {
+                    s.restoring = true;
+                    trigger.focus();
+                    s.restoring = false;
+                }
+            }
+        }
+        settle();
+        listenForPress();
+    }, [open, settle, listenForPress]);
+    return React.useMemo(() => {
+        const inTrigger = (node) => within(latestRef.current.triggerRef.current, node);
+        return {
+            onPointerEnter: event => {
+                if (event.pointerType === 'touch')
+                    return;
+                stateRef.current.pointerIn = true;
+                settle();
+            },
+            onPointerOver: event => {
+                // React makes the enter out of the pointerout on the element the
+                // pointer left, and skips this pointerover when that element is its
+                // own. Leaving page content for a trigger inside a shadow root, that
+                // pointerout names only the shadow host, so no enter reaches here.
+                // A pointerover from outside the holder and the floating element is
+                // the pointer arriving, then. One from inside them is the pointer
+                // moving about within, which doesn't bring back a closed one.
+                const s = stateRef.current;
+                if (s.pointerIn || event.pointerType === 'touch')
+                    return;
+                const from = event.relatedTarget;
+                if (within(event.currentTarget, from) ||
+                    within(latestRef.current.floatingRef.current, from)) {
+                    return;
+                }
+                s.pointerIn = true;
+                settle();
+            },
+            onPointerLeave: event => {
+                // A touch pointer never set pointerIn, so its leave has nothing to
+                // clear, and on a device with a mouse too it would close a card the
+                // mouse is still holding open.
+                if (event.pointerType === 'touch')
+                    return;
+                stateRef.current.pointerIn = false;
+                settle();
+            },
+            onFocus: event => {
+                const s = stateRef.current;
+                // React brings focus here from the trigger and from the floating
+                // element's whole tree, portals included, so focus not in the
+                // trigger is in the floating element, wherever its DOM is.
+                s.focusInFloating = !inTrigger(event.target);
+                if (s.restoring)
+                    return;
+                // Any focus in the floating element holds it. On the trigger, only
+                // keyboard focus does, so a click there opens nothing.
+                s.focusIn = s.focusInFloating || isKeyboardFocus(event.target);
+                settle();
+            },
+            onBlur: event => {
+                const s = stateRef.current;
+                const next = event.relatedTarget;
+                // Where focus goes next, as far as the DOM can say. Focus going into
+                // content the floating element portals elsewhere reads as leaving,
+                // and the focus event that follows straight after brings it back.
+                s.focusInFloating = within(latestRef.current.floatingRef.current, next);
+                // Moving between the trigger and the floating element isn't leaving.
+                if (s.focusInFloating || within(event.currentTarget, next))
+                    return;
+                s.focusIn = false;
+                settle();
+            },
+            onPointerDown: event => {
+                stateRef.current.pressedInside = event.nativeEvent;
+            },
+            onPointerUp: event => {
+                const now = latestRef.current;
+                // With openOnTap, a tap on the trigger opens it at once, and the
+                // next one closes it. A tap anywhere else does nothing here.
+                if (!now.openOnTap ||
+                    event.pointerType !== 'touch' ||
+                    !inTrigger(event.target)) {
+                    return;
+                }
+                stateRef.current.tappedIn = now.open
+                    ? undefined
+                    : event.target.ownerDocument;
+                ask(!now.open);
+            },
+        };
+    }, [settle, ask]);
 }
+
 /**
- * Whether an image map area is shown. An area has no box of its own: the
- * HTML rendering rules give it `display: none`, though a browser may not
- * report that. So it counts where an image using its map is shown, as long
- * as nothing makes it inert.
- */
-function isAreaShown(area, container) {
-    for (let node = area; node && node !== container; node = flatParent(node)) {
-        if (node.hasAttribute('inert'))
-            return false;
-    }
-    return imagesUsingMapOf(area).some(img => isShownUpTo(img, null) && isVisible(img));
-}
-/**
- * Whether Tab can land on `el`, one of the kinds it visits. A disabled control
- * (including one inside a disabled `<fieldset>`), an inert subtree and
- * anything not rendered are skipped. `visibility` is inherited, so the
- * element's own computed value covers its ancestors.
- */
-function isRenderedAndEnabled(el, container) {
-    if (el.matches(':disabled'))
-        return false;
-    if (el.localName === 'area')
-        return isAreaShown(el, container);
-    return isShownUpTo(el, container) && isVisible(el);
-}
-/** A radio button with a name, which shares one tab stop with its group. */
-const isGroupedRadio = (el) => el.localName === 'input' &&
-    el.type === 'radio' &&
-    el.name !== '';
-/** Whether two radio buttons are in one group: same name, form owner and tree. */
-const sameGroup = (a, b) => isGroupedRadio(b) &&
-    b.name === a.name &&
-    b.form === a.form &&
-    b.getRootNode() === a.getRootNode();
-/**
- * The checked button of `radio`'s group. The group isn't bounded by the trap,
- * so this looks through the radio's whole tree.
- */
-const checkedInGroup = (radio) => Array.from(radio.getRootNode().querySelectorAll('input:checked')).find(el => sameGroup(radio, el));
-/** The flattened-tree ancestors of `node` below the container, outermost first, then `node`. */
-function flatChain(node, container) {
-    const chain = [];
-    for (let n = node; n && n !== container; n = flatParent(n)) {
-        chain.unshift(n);
-    }
-    return chain;
-}
-/**
- * Whether `node` is inside the container in the flattened tree: in it, in a
- * shadow root it holds, or slotted into it. A child of a closed-root host
- * counts as inside wherever the host is, as its slot can't be seen.
- */
-function inside(container, node) {
-    for (let n = node; n; n = flatParent(n)) {
-        if (n === container)
-            return true;
-    }
-    return false;
-}
-/**
- * `true` when Tab reaches `b` after `a`, which is their order in the
- * flattened tree: a shadow host comes before its shadow root's content, and
- * slotted content comes where its slot is. A closed root's slots can't be
- * seen, so its host's children keep their place in the light DOM. Two
- * flattened-tree siblings are always in one DOM tree, so their document
- * position decides between them.
- */
-function follows(container, a, b) {
-    const chainA = flatChain(a, container);
-    const chainB = flatChain(b, container);
-    for (let i = 0; i < Math.max(chainA.length, chainB.length); i++) {
-        const [x, y] = [chainA[i], chainB[i]];
-        if (x === y)
-            continue;
-        if (!x)
-            return true;
-        if (!y)
-            return false;
-        return Boolean(x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING);
-    }
-    return false;
-}
-/**
- * Every element of a tabbable kind under `el` in the flattened tree, depth
- * first, which is the order Tab visits them. Under a host whose shadow root
- * is closed, that takes in the host's own children instead, rendered or not.
- */
-function collectCandidates(el, out = []) {
-    for (const child of flatChildren(el)) {
-        if (isTabbableKind(child))
-            out.push(child);
-        collectCandidates(child, out);
-    }
-    return out;
-}
-/**
- * The first and last tab stops inside `container`, or `null` when there are
- * none. Only the ends matter for wrapping, so the style checks run from each
- * end until they find a stop rather than over every candidate.
+ * The `Tooltip` component displays helpful information when users hover over or focus on an element.
  *
- * A radio group is one stop, the way the browser treats it: its checked
- * button, or its first when none is checked. Counting every button would make
- * the group's last one an end, and Tab from the checked one would leave. The
- * group goes by name, form owner and tree, not by the trap, so a checked
- * button outside the container that Tab can land on leaves the group no stop
- * inside. One that Tab can't land on leaves the group as if none were checked.
+ * Hovering the trigger or giving it keyboard focus shows it. Touch doesn't,
+ * unless `openOnTap` is on, and neither does focus a click or a tap brings,
+ * so tapping the trigger just does what the trigger does. The pointer can
+ * move onto a shown tooltip. Escape hides it wherever focus is, without
+ * moving the pointer or focus, and it stays hidden until one of them leaves
+ * the trigger and comes back, or, with `openOnTap`, until the next tap on
+ * the trigger. The key always goes on too, to whatever has focus or a
+ * `Modal` or `Popover` around it, since a tooltip only adds to what's
+ * there.
+ *
+ * @function
+ * @param {TooltipProps} props - Props for the Tooltip component.
+ * @returns {JSX.Element} The rendered tooltip wrapper.
+ *
+ * @example
+ * // Basic tooltip
+ * <Tooltip label="This is helpful info">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * // Positioned tooltip with color
+ * <Tooltip label="Delete item" position="right" color="danger">
+ *   <Icon icon="fas fa-trash" />
+ * </Tooltip>
+ *
+ * @example
+ * // Multiline tooltip
+ * <Tooltip label="This is a longer tooltip that wraps to multiple lines" multiline>
+ *   <span>?</span>
+ * </Tooltip>
+ */
+const Tooltip = ({ label, content, position = 'top', color, size, active: alwaysActive, multiline = false, animated = true, square = false, dashed = false, delay = 0, closeDelay = 0, openOnTap = false, children, className, tooltipClassName, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const { onPointerEnter, onPointerOver, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, ...attrs } = rest;
+    const [isVisible, setIsVisible] = React.useState(false);
+    const [resolvedPosition, setResolvedPosition] = React.useState(position === 'auto' ? 'top' : position);
+    const [contentStyle, setContentStyle] = React.useState({});
+    const wrapperRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const hover = useHoverOpen({
+        // The pointer and focus as they are. `active` shows it on top of that, so
+        // dropping `active` leaves it shown while the pointer or focus holds it.
+        // An ask to close can come while it's already hidden, which is no change.
+        open: isVisible,
+        onOpenChange: setIsVisible,
+        openDelay: delay,
+        closeDelay,
+        // The wrapper stands in for the trigger. It holds only the children and
+        // the tooltip, and nothing in the tooltip takes focus, so focus anywhere
+        // in it is focus on the trigger.
+        triggerRef: wrapperRef,
+        floatingRef: contentRef,
+        // Escape hides it and carries on, so a control in the trigger, or a
+        // Modal around it, still gets the key.
+        consumeEscape: false,
+        openOnTap,
+    });
+    // Auto-placement and overflow correction
+    React.useLayoutEffect(() => {
+        const isAuto = position === 'auto';
+        if (!isAuto) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect -- layout measurement effect resolves placement
+            setResolvedPosition(position);
+        }
+        const showing = isVisible || alwaysActive;
+        if (!showing) {
+            setContentStyle({});
+            return;
+        }
+        const wrapper = wrapperRef.current;
+        const content = contentRef.current;
+        if (!wrapper || !content)
+            return;
+        const wrapperRect = wrapper.getBoundingClientRect();
+        const margin = 40;
+        const edgePadding = 8; // minimum distance from viewport edge
+        // Step 1: determine position (auto mode only)
+        if (isAuto) {
+            const spaceTop = wrapperRect.top;
+            const spaceBottom = window.innerHeight - wrapperRect.bottom;
+            if (spaceTop >= margin) {
+                setResolvedPosition('top');
+            }
+            else if (spaceBottom >= margin) {
+                setResolvedPosition('bottom');
+            }
+            else if (window.innerWidth - wrapperRect.right >= wrapperRect.left) {
+                setResolvedPosition('right');
+            }
+            else {
+                setResolvedPosition('left');
+            }
+        }
+        // Step 2: measure tooltip content and correct overflow.
+        // Use requestAnimationFrame so the resolved position class is applied first.
+        requestAnimationFrame(() => {
+            const contentEl = contentRef.current;
+            if (!contentEl)
+                return;
+            const contentRect = contentEl.getBoundingClientRect();
+            const style = {};
+            // For top/bottom positions, tooltip is centered horizontally via CSS
+            // (left: 50%; transform: translateX(-50%)).
+            // Check if it overflows left or right and apply a corrective shift.
+            const pos = isAuto ? undefined : position; // read from state won't be updated yet in auto
+            const effectivePos = pos || 'top'; // fallback, actual is set by state
+            const isVertical = effectivePos === 'top' ||
+                effectivePos === 'bottom' ||
+                resolvedPosition === 'top' ||
+                resolvedPosition === 'bottom';
+            if (isVertical) {
+                if (contentRect.left < edgePadding) {
+                    // Overflows left — shift right
+                    const shift = edgePadding - contentRect.left;
+                    style.left = `calc(50% + ${shift}px)`;
+                    style['--tooltip-arrow-offset'] =
+                        `${-shift}px`;
+                }
+                else if (contentRect.right > window.innerWidth - edgePadding) {
+                    // Overflows right — shift left
+                    const shift = contentRect.right - (window.innerWidth - edgePadding);
+                    style.left = `calc(50% - ${shift}px)`;
+                    style['--tooltip-arrow-offset'] =
+                        `${shift}px`;
+                }
+            }
+            else {
+                // For left/right positions, tooltip is centered vertically via CSS
+                // (top: 50%; transform: translateY(-50%)).
+                if (contentRect.top < edgePadding) {
+                    const shift = edgePadding - contentRect.top;
+                    style.top = `calc(50% + ${shift}px)`;
+                    style['--tooltip-arrow-offset'] =
+                        `${-shift}px`;
+                }
+                else if (contentRect.bottom > window.innerHeight - edgePadding) {
+                    const shift = contentRect.bottom - (window.innerHeight - edgePadding);
+                    style.top = `calc(50% - ${shift}px)`;
+                    style['--tooltip-arrow-offset'] =
+                        `${shift}px`;
+                }
+            }
+            setContentStyle(style);
+        });
+    }, [position, resolvedPosition, isVisible, alwaysActive, label, content]);
+    // Generate Bulma classes
+    const tooltipClasses = usePrefixedClassNames('tooltip', {
+        'is-active': alwaysActive || isVisible,
+        // Open by the pointer, focus or a tap, rather than shown by `active`
+        // alone: only then does the tooltip, and the gap to it, take the pointer.
+        'is-open': isVisible,
+        [`is-${resolvedPosition}`]: resolvedPosition,
+        [`is-${color}`]: color,
+        [`is-${size}`]: size,
+        'is-multiline': multiline,
+        'is-animated': animated,
+        'is-square': square,
+        'is-dashed': dashed,
+    });
+    const combinedClasses = classNames(tooltipClasses, bulmaHelperClasses, className);
+    const combinedTooltipClasses = usePrefixedClassNames('tooltip-content', tooltipClassName);
+    return (jsxRuntime.jsxs("span", { ref: wrapperRef, className: combinedClasses, onPointerEnter: chain$1(onPointerEnter, hover.onPointerEnter), onPointerOver: chain$1(onPointerOver, hover.onPointerOver), onPointerLeave: chain$1(onPointerLeave, hover.onPointerLeave), onFocus: chain$1(onFocus, hover.onFocus), onBlur: chain$1(onBlur, hover.onBlur), onPointerDown: chain$1(onPointerDown, hover.onPointerDown), onPointerUp: chain$1(onPointerUp, hover.onPointerUp), ...(label ? { 'data-tooltip': label } : {}), ...attrs, children: [children, jsxRuntime.jsx("span", { ref: contentRef, className: combinedTooltipClasses, role: "tooltip", "aria-hidden": !isVisible && !alwaysActive, style: Object.keys(contentStyle).length > 0 ? contentStyle : undefined, children: content || label })] }));
+};
+
+/**
+ * Whether `el` is editable while its parent is not, which makes it an editing
+ * host: the one tab stop an editable region gets. `contenteditable="false"`
+ * turns editing off, and a missing or unknown value inherits the parent's.
  */
-function findTabStops(container) {
-    const candidates = collectCandidates(container);
-    const checked = new Map();
-    const usable = (el) => {
-        let ok = checked.get(el);
-        if (ok === undefined) {
-            ok = isRenderedAndEnabled(el, container);
-            checked.set(el, ok);
+function isEditingHost(el) {
+    const editable = (node) => {
+        const value = node.getAttribute('contenteditable')?.toLowerCase();
+        if (value === undefined)
+            return null;
+        if (value === '' || value === 'true' || value === 'plaintext-only') {
+            return true;
         }
-        return ok;
-    };
-    // Resolved once per group, filed under each of its buttons, since finding
-    // the checked one scans the radio's whole tree.
-    const groupStops = new Map();
-    const groupStop = (radio) => {
-        if (groupStops.has(radio))
-            return groupStops.get(radio);
-        const group = candidates.filter(el => sameGroup(radio, el));
-        const on = checkedInGroup(radio);
-        const stop = on && isTabbableKind(on) && usable(on)
-            ? group.find(el => el === on)
-            : group.find(usable);
-        for (const el of [radio, ...group])
-            groupStops.set(el, stop);
-        return stop;
+        return value === 'false' ? false : null;
     };
-    const isStop = (el) => usable(el) && (!isGroupedRadio(el) || groupStop(el) === el);
-    const first = candidates.find(isStop);
-    if (!first)
-        return null;
-    let last = first;
-    for (let i = candidates.length - 1; candidates[i] !== first; i--) {
-        if (isStop(candidates[i])) {
-            last = candidates[i];
-            break;
-        }
+    if (editable(el) !== true)
+        return false;
+    for (let node = el.parentElement; node; node = node.parentElement) {
+        const state = editable(node);
+        if (state !== null)
+            return !state;
     }
-    return {
-        first,
-        last,
-        stopFor: node => (isGroupedRadio(node) && groupStop(node)) || node,
-    };
-}
-/**
- * The first tab stop inside `container`, found the way the trap finds it, or
- * `null` when there is none. For a component that moves focus into a panel
- * without trapping it there. `src/index.ts` names its exports from this
- * module, so this one stays internal.
- */
-function firstTabStop(container) {
-    return findTabStops(container)?.first ?? null;
+    return true;
 }
+/** Whether `el` is the summary of its `<details>`: the first one, not a stray. */
+const isDetailsSummary = (el) => el.parentElement?.localName === 'details' &&
+    Array.from(el.parentElement.children).find(child => child.localName === 'summary') === el;
 /**
- * The element that has focus in the container's own document (an iframe's,
- * when it renders into one), inside open shadow roots too. Focus inside a
- * closed one reads as its host, which the comparisons above place like any
- * other element. Browsers fall back to <body> when nothing has
- * focus. jsdom, where consumers run their tests, reports nothing once focus
- * was inside a shadow root that was removed, so this falls back for it.
- */
-const focusedElement = (doc) => getDeepestActiveElement(doc) ?? doc.body;
-/**
- * Keeps keyboard focus inside a container while it is active: focus moves in
- * when the trap turns on, Tab and Shift+Tab wrap between the first and last
- * tab stops, and focus goes back where it came from when the trap turns off.
- *
- * Tab stops are what the browser's Tab visits, in document order: links,
- * form controls, frames, media with controls, a `<details>` summary, editable
- * regions, anything with `tabIndex={0}`, and the content of open shadow
- * roots. Hidden, disabled, inert and `tabIndex={-1}` elements are skipped,
- * and a radio group counts once. Give the container `tabIndex={-1}` so it can
- * hold focus itself when nothing inside can. The trap listens on the
- * container, so a trap nested inside another handles Tab first and the outer
- * one stands aside.
- *
- * The trap is about Tab. If a Tab it let through still takes focus out (a
- * browser can leave out a stop the page has, such as links when its settings
- * say to), it sends focus back to the other end. A pointer or a script moving
- * focus out is left alone, because pulling focus back from a click is modal
- * behaviour, and a modal also has to block the page behind it, which `Modal`
- * does. Content the container renders through a portal lives elsewhere in
- * the DOM, so it is outside the trap: render nested overlays inside the
- * container, or give them a trap of their own. To trap content a `Portal`
- * renders, pass a ref to the element inside the `Portal` as `containerRef`.
- *
- * The trap looks at `containerRef` again each time the component calling it
- * renders. A container that mounts after the trap turns on, such as a panel
- * waiting for a `Portal` target held in state, has it attach once that
- * component renders with the container in the DOM. When the container leaves
- * or is replaced, the trap lets go of it as it would turning off, handing
- * focus back, and attaches to the next one.
- * A child that mounts the container in a render of its own (from its own
- * state, or as a `Suspense` boundary resolves) goes unseen until the
- * component calling the hook renders again. The trap waits for hydration, so
- * that component renders again when the page hydrates, and portaled content,
- * which first appears then, is found.
- *
- * @function useFocusTrap
- * @param containerRef - Ref to the element focus stays inside.
- * @param options - When the trap is on, and where focus starts and ends.
- *
- * @example
- * const panelRef = useRef<HTMLDivElement>(null);
- * useFocusTrap(panelRef, { active: isOpen });
- * return isOpen ? (
- *   <div ref={panelRef} role="dialog" aria-label="Filters" tabIndex={-1}>
- *     …
- *   </div>
- * ) : null;
+ * Whether the browser puts `el` in the tab order, before anything that hides
+ * or disables it. The `tabIndex` property can't answer this on its own: it
+ * can read `-1` for an editable region or an `<embed>` that Tab still visits,
+ * and `0` for a `<video>` without controls that it doesn't. So a valid
+ * `tabindex` attribute decides, and otherwise the element's kind does.
+ * Internal like `firstTabStop`: `src/index.ts` names what it takes from here.
  */
-function useFocusTrap(containerRef, options = {}) {
-    const { active = true, initialFocusRef, restoreFocus = true } = options;
-    // Portaled content has no server-rendered counterpart, so a portaled
-    // container only exists from the commit after hydration.
-    const hydrated = useIsHydrated();
-    // The container the trap is attached to, or `null` while it has none.
-    const heldRef = React.useRef(null);
-    // Bumped to run the trap again when the container in the ref changes.
-    const [refChanges, setRefChanges] = React.useState(0);
-    React.useEffect(() => {
-        heldRef.current = null;
-        if (!active || !hydrated)
-            return undefined;
-        const container = containerRef.current;
-        if (!container)
-            return undefined;
-        heldRef.current = container;
-        const doc = container.ownerDocument;
-        const opener = focusedElement(doc);
-        // `initialFocusRef` counts only when focusing it puts focus inside. Focus
-        // put outside would stay out, as Tab there never reaches the container's
-        // listener, and focusing something that can't take focus (a heading
-        // without `tabIndex`, a disabled control) leaves focus where it was.
-        const initial = initialFocusRef?.current;
-        const inTrap = initial && inside(container, initial) ? initial : null;
-        inTrap?.focus();
-        if (!inTrap || !inside(container, focusedElement(doc))) {
-            (findTabStops(container)?.first ?? container).focus();
-        }
-        // Where focus goes if a Tab the trap let the browser handle takes it out,
-        // held until that Tab has finished moving focus.
-        let wrapTo = null;
-        let wrapTimer;
-        const handleKeyDown = (e) => {
-            // A trap nested inside this one has already wrapped focus.
-            if (e.key !== 'Tab' || e.defaultPrevented)
-                return;
-            const stops = findTabStops(container);
-            if (!stops) {
-                e.preventDefault();
-                container.focus();
-                return;
-            }
-            const current = stops.stopFor(focusedElement(doc));
-            // Wrap whenever the browser has no stop left in that direction inside
-            // the container. Comparing positions rather than testing `=== first`
-            // also covers focus resting on the container or on an element outside
-            // the tab order, which the browser would otherwise walk straight out of.
-            if (e.shiftKey
-                ? !follows(container, stops.first, current)
-                : !follows(container, current, stops.last)) {
-                e.preventDefault();
-                (e.shiftKey ? stops.last : stops.first).focus();
-                return;
-            }
-            wrapTo = e.shiftKey ? stops.last : stops.first;
-            clearTimeout(wrapTimer);
-            wrapTimer = setTimeout(() => {
-                wrapTo = null;
-            });
-        };
-        // The browser moves focus as soon as the keydown is over, so focus that
-        // lands outside while `wrapTo` is set got there by that Tab.
-        const handleFocusIn = (e) => {
-            if (!wrapTo || inside(container, e.composedPath()[0]))
-                return;
-            const target = wrapTo;
-            wrapTo = null;
-            target.focus();
-        };
-        container.addEventListener('keydown', handleKeyDown);
-        doc.addEventListener('focusin', handleFocusIn, true);
-        return () => {
-            container.removeEventListener('keydown', handleKeyDown);
-            doc.removeEventListener('focusin', handleFocusIn, true);
-            clearTimeout(wrapTimer);
-            let target = restoreFocus ? opener : null;
-            // `null` is an object too, and a caller without types can pass it.
-            if (restoreFocus && typeof restoreFocus === 'object') {
-                // Read now rather than when the trap turned on: a trigger that
-                // re-mounted in between has a new node.
-                // eslint-disable-next-line react-hooks/exhaustive-deps
-                target = restoreFocus.current;
-            }
-            // Hand focus back only while the trap still holds it: inside the
-            // container, or dropped to <body> because the container left the page.
-            const now = focusedElement(doc);
-            if (target && (now === doc.body || inside(container, now))) {
-                target.focus();
-            }
-        };
-    }, [
-        active,
-        hydrated,
-        containerRef,
-        initialFocusRef,
-        restoreFocus,
-        refChanges,
-    ]);
-    // Nothing says when a ref is set, so after every render, a ref that no
-    // longer matches what the trap holds (a container that mounted, left or was
-    // replaced) runs it again. Effects run in order, so whenever the effect
-    // above ran in this commit, it read the ref just before this does, and a
-    // mismatch means the ref changed in a render it didn't run for. The render
-    // a bump asks for runs it, so the two match and the trap settles. An empty
-    // ref matches a trap holding nothing, so a container that never mounts
-    // costs no render.
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- after every render on purpose
-    React.useEffect(() => {
-        if (active && hydrated && containerRef.current !== heldRef.current) {
-            setRefChanges(n => n + 1);
+function isTabbableKind(el) {
+    const tabindex = el.getAttribute('tabindex');
+    if (tabindex !== null && /^\s*[+-]?\d/.test(tabindex)) {
+        return el.tabIndex >= 0;
+    }
+    switch (el.localName) {
+        case 'a':
+        case 'area':
+            return el.hasAttribute('href');
+        case 'input':
+            return el.type !== 'hidden';
+        case 'button':
+        case 'select':
+        case 'textarea':
+        case 'iframe':
+        case 'embed':
+        case 'object':
+            return true;
+        case 'audio':
+        case 'video':
+            return el.hasAttribute('controls');
+        case 'summary':
+            return isDetailsSummary(el);
+        default:
+            return isEditingHost(el);
+    }
+}
+/**
+ * The node's parent in the flattened tree, the one the browser renders and
+ * tabs through: the slot it is assigned to, else its parent, else the host of
+ * the shadow root it tops, and nothing above the document. A closed shadow
+ * root hides its slots (`assignedSlot` reads `null` under one), so a child of
+ * its host goes straight to the host, whether a slot takes it or not.
+ */
+const flatParent = (node) => node.assignedSlot ??
+    node.parentElement ??
+    node.parentNode?.host ??
+    null;
+/**
+ * The element's children in the flattened tree, in the order they render: a
+ * host's shadow root content, a slot's assigned elements (or its fallback
+ * content when nothing is assigned), anything else's own children. A host
+ * whose shadow root is closed has no root to read, so its own children stand
+ * in, including any that no slot takes and that aren't rendered.
+ */
+function flatChildren(el) {
+    if (el.shadowRoot)
+        return Array.from(el.shadowRoot.children);
+    if (el.localName === 'slot') {
+        const assigned = el.assignedNodes();
+        if (assigned.length > 0) {
+            return assigned.filter((node) => node.nodeType === Node.ELEMENT_NODE);
+        }
+    }
+    return Array.from(el.children);
+}
+const isShown = (el) => !el.hasAttribute('inert') && getComputedStyle(el).display !== 'none';
+const isVisible = (el) => {
+    const { visibility } = getComputedStyle(el);
+    return visibility !== 'hidden' && visibility !== 'collapse';
+};
+/**
+ * Whether nothing from `el` up to `top` hides it: `inert`, `display: none`
+ * (not inherited, so each element is checked) or a closed `<details>` it
+ * isn't the summary of. `top` itself isn't checked, and `null` walks to the
+ * top of the page.
+ */
+function isShownUpTo(el, top) {
+    let below = null;
+    for (let node = el; node && node !== top; node = flatParent(node)) {
+        if (!isShown(node))
+            return false;
+        if (below &&
+            node.localName === 'details' &&
+            !node.hasAttribute('open') &&
+            !isDetailsSummary(below)) {
+            return false;
         }
+        below = node;
+    }
+    return true;
+}
+/**
+ * The images that use the image map `area` belongs to. An image names its
+ * map with `usemap="#…"`, matching the map's `name` or `id`.
+ */
+function imagesUsingMapOf(area) {
+    const map = area.closest('map');
+    if (!map)
+        return [];
+    const names = [map.getAttribute('name'), map.id].filter(name => name);
+    return Array.from(area.getRootNode().querySelectorAll('img[usemap]')).filter(img => {
+        const ref = img.getAttribute('usemap');
+        return ref.startsWith('#') && names.includes(ref.slice(1));
     });
 }
-
-// INTERNAL: deliberately not exported from src/index.ts.
 /**
- * `useLayoutEffect` in the browser, `useEffect` on the server. A server
- * render runs neither, and React 18 warns about a layout effect there, so the
- * server is handed the plain one.
+ * Whether an image map area is shown. An area has no box of its own: the
+ * HTML rendering rules give it `display: none`, though a browser may not
+ * report that. So it counts where an image using its map is shown, as long
+ * as nothing makes it inert.
  */
-const useClientLayoutEffect = typeof document === 'undefined' ? React.useEffect : React.useLayoutEffect;
-
-// INTERNAL: deliberately not exported from src/index.ts.
+function isAreaShown(area, container) {
+    for (let node = area; node && node !== container; node = flatParent(node)) {
+        if (node.hasAttribute('inert'))
+            return false;
+    }
+    return imagesUsingMapOf(area).some(img => isShownUpTo(img, null) && isVisible(img));
+}
 /**
- * A `styledGap` for a panel whose stylesheet puts the gap in a margin on the
- * side facing the anchor, negative on a portaled panel above it, so the
- * larger magnitude is the gap. In pixels.
+ * Whether Tab can land on `el`, one of the kinds it visits. A disabled control
+ * (including one inside a disabled `<fieldset>`), an inert subtree and
+ * anything not rendered are skipped. `visibility` is inherited, so the
+ * element's own computed value covers its ancestors.
  */
-function marginGap(panel) {
-    const { marginTop, marginBottom } = getComputedStyle(panel);
-    return Math.max(Math.abs(parseFloat(marginTop)) || 0, Math.abs(parseFloat(marginBottom)) || 0);
+function isRenderedAndEnabled(el, container) {
+    if (el.matches(':disabled'))
+        return false;
+    if (el.localName === 'area')
+        return isAreaShown(el, container);
+    return isShownUpTo(el, container) && isVisible(el);
 }
+/** A radio button with a name, which shares one tab stop with its group. */
+const isGroupedRadio = (el) => el.localName === 'input' &&
+    el.type === 'radio' &&
+    el.name !== '';
+/** Whether two radio buttons are in one group: same name, form owner and tree. */
+const sameGroup = (a, b) => isGroupedRadio(b) &&
+    b.name === a.name &&
+    b.form === a.form &&
+    b.getRootNode() === a.getRootNode();
 /**
- * The corner that keeps a panel of this size in the viewport, preferring
- * below the anchor and lined up with its left edge.
+ * The checked button of `radio`'s group. The group isn't bounded by the trap,
+ * so this looks through the radio's whole tree.
  */
-function resolveAuto(view, rect, panelWidth, panelHeight, gap) {
-    const fitsBelow = rect.bottom + panelHeight + gap <= view.innerHeight;
-    const fitsRight = rect.left + panelWidth <= view.innerWidth;
-    if (fitsBelow)
-        return fitsRight ? 'bottom-left' : 'bottom-right';
-    return fitsRight ? 'top-left' : 'top-right';
+const checkedInGroup = (radio) => Array.from(radio.getRootNode().querySelectorAll('input:checked')).find(el => sameGroup(radio, el));
+/** The flattened-tree ancestors of `node` below the container, outermost first, then `node`. */
+function flatChain(node, container) {
+    const chain = [];
+    for (let n = node; n && n !== container; n = flatParent(n)) {
+        chain.unshift(n);
+    }
+    return chain;
 }
-const samePosition = (a, b) => a.position === b.position && a.top === b.top && a.left === b.left;
 /**
- * Places a floating panel against its anchor: resolves `auto` to a corner
- * and, for a panel fixed to the viewport, works out its coordinates. It
- * measures again on resize and on any scroll of the anchor's window (an
- * iframe's, when the anchor renders into one), so a fixed panel follows its
- * anchor. A measurement that changes nothing doesn't render again.
- *
- * Measuring happens in a layout effect, so the panel is placed before it
- * paints. It needs both elements on the page while `active` is on, and
- * keeps the last placement when either is missing.
- *
- * @function useAnchoredPosition
- * @param anchorRef - The element the panel opens from.
- * @param panelRef - The floating panel.
- * @param options - Whether to measure, the corner asked for, and how the panel is placed.
- * @returns The corner the panel opens from, with coordinates when it is fixed.
+ * Whether `node` is inside the container in the flattened tree: in it, in a
+ * shadow root it holds, or slotted into it. A child of a closed-root host
+ * counts as inside wherever the host is, as its slot can't be seen.
  */
-function useAnchoredPosition(anchorRef, panelRef, { active, position, fixed, offset = 4, styledGap }) {
-    const [resolved, setResolved] = React.useState({
-        position: position === 'auto' ? 'bottom-left' : position,
-    });
-    useClientLayoutEffect(() => {
-        if (!active)
-            return undefined;
-        const view = (anchorRef.current ?? panelRef.current)?.ownerDocument.defaultView ??
-            window;
-        const update = () => {
-            const anchor = anchorRef.current;
-            const panel = panelRef.current;
-            if (!anchor || !panel)
-                return;
-            const rect = anchor.getBoundingClientRect();
-            const { width, height } = panel.getBoundingClientRect();
-            const corner = position === 'auto'
-                ? resolveAuto(view, rect, width, height, offset + (styledGap?.(panel) ?? 0))
-                : position;
-            const next = fixed
-                ? {
-                    position: corner,
-                    top: corner.startsWith('bottom')
-                        ? rect.bottom + offset
-                        : rect.top - height - offset,
-                    left: corner.endsWith('left') ? rect.left : rect.right - width,
-                }
-                : { position: corner };
-            setResolved(prev => (samePosition(prev, next) ? prev : next));
-        };
-        update();
-        view.addEventListener('resize', update, { passive: true });
-        view.addEventListener('scroll', update, { passive: true, capture: true });
-        return () => {
-            view.removeEventListener('resize', update);
-            view.removeEventListener('scroll', update, { capture: true });
-        };
-    }, [active, anchorRef, panelRef, position, fixed, offset, styledGap]);
-    return resolved;
+function inside(container, node) {
+    for (let n = node; n; n = flatParent(n)) {
+        if (n === container)
+            return true;
+    }
+    return false;
 }
-
-const validButtonColors = [...validColors, 'text', 'ghost'];
 /**
- * The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
- *
- * @function
- * @param {ButtonProps} props - Props for the Button component.
- * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
- * @returns {JSX.Element} The rendered button, anchor, or custom element.
- * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}
+ * `true` when Tab reaches `b` after `a`, which is their order in the
+ * flattened tree: a shadow host comes before its shadow root's content, and
+ * slotted content comes where its slot is. A closed root's slots can't be
+ * seen, so its host's children keep their place in the light DOM. Two
+ * flattened-tree siblings are always in one DOM tree, so their document
+ * position decides between them.
+ */
+function follows(container, a, b) {
+    const chainA = flatChain(a, container);
+    const chainB = flatChain(b, container);
+    for (let i = 0; i < Math.max(chainA.length, chainB.length); i++) {
+        const [x, y] = [chainA[i], chainB[i]];
+        if (x === y)
+            continue;
+        if (!x)
+            return true;
+        if (!y)
+            return false;
+        return Boolean(x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING);
+    }
+    return false;
+}
+/**
+ * Every element of a tabbable kind under `el` in the flattened tree, depth
+ * first, which is the order Tab visits them. Under a host whose shadow root
+ * is closed, that takes in the host's own children instead, rendered or not.
+ */
+function collectCandidates(el, out = []) {
+    for (const child of flatChildren(el)) {
+        if (isTabbableKind(child))
+            out.push(child);
+        collectCandidates(child, out);
+    }
+    return out;
+}
+/**
+ * The first and last tab stops inside `container`, or `null` when there are
+ * none. Only the ends matter for wrapping, so the style checks run from each
+ * end until they find a stop rather than over every candidate.
+ *
+ * A radio group is one stop, the way the browser treats it: its checked
+ * button, or its first when none is checked. Counting every button would make
+ * the group's last one an end, and Tab from the checked one would leave. The
+ * group goes by name, form owner and tree, not by the trap, so a checked
+ * button outside the container that Tab can land on leaves the group no stop
+ * inside. One that Tab can't land on leaves the group as if none were checked.
  */
-const Button = React.forwardRef(function Button(props, ref) {
-    const { color, size, isLight, isRounded, isLoading, isStatic, isFullwidth, isFullWidth, isOutlined, isInverted, isFocused, isActive, isHovered, isDisabled, className, children, textColor, bgColor, as: Component = 'button', href, onClick, target, rel, ...bulmaProps } = props;
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...bulmaProps,
-    });
-    // Generate Bulma classes with prefix
-    const bulmaClasses = usePrefixedClassNames('button', {
-        [`is-${color}`]: color &&
-            validButtonColors.includes(color),
-        [`is-${size}`]: size,
-        'is-outlined': isOutlined,
-        'is-light': isLight,
-        'is-loading': isLoading,
-        'is-static': isStatic,
-        'is-disabled': isDisabled,
-        'is-rounded': isRounded,
-        'is-hovered': isHovered,
-        'is-focused': isFocused,
-        'is-active': isActive,
-        'is-inverted': isInverted,
-        'is-fullwidth': isFullwidth ?? isFullWidth,
-    });
-    // Combine prefixed Bulma classes with unprefixed user className and prefixed helper classes
-    const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    if (Component !== 'button') {
-        // Strip the form-control attributes a link-like element cannot carry, so a
-        // JavaScript consumer or a spread object doesn't put them on the DOM. The
-        // types no longer allow them through; this is the runtime backstop.
-        //
-        // Only for INTRINSIC tags. A custom component (a router Link, ...) owns its
-        // prop contract, and `ComponentPropsWithoutRef<T>` promises the caller that
-        // its props reach it. Stripping names by their spelling alone broke that
-        // promise silently: `<Button as={Custom} name="x" />` type-checked while
-        // `Custom` never received the `name` it requires.
-        //
-        // `autoFocus` and `type` are deliberately NOT stripped: both are valid on
-        // targets this list was filtering them from. `autoFocus` is a global
-        // attribute (React decides per element whether to honour it, which is not
-        // ours to pre-empt), and `type` on an anchor is the MIME hint that
-        // `ButtonProps<'a'>` now types it as.
-        //
-        // The types already answer this for a TypeScript caller: `ButtonProps<T>`
-        // derives from `ComponentPropsWithoutRef<T>`, so only what the target
-        // accepts can be passed. What is left is a runtime backstop for JavaScript
-        // consumers and spread objects.
-        //
-        // Keep it to the two cases where a stray attribute does something. The
-        // submit-overrides belong to a submit control and never make sense on the
-        // anchor path. `disabled` is the one that is VISIBLE: Bulma styles
-        // `.button[disabled]` (background, border, shadow, opacity), so letting it
-        // through to a `<span>` greys the element out — main stripped it, and not
-        // stripping it would be a silent visual change on a types-only release.
-        //
-        // Everything else (`name`, `value`, `form`) is inert where it does not
-        // belong, and enumerating which tags own it is what kept going wrong:
-        // first all nine names on every non-button tag (so `<Button as="input"
-        // name="query" value="Search">` submitted nothing), then a form-control
-        // allowlist that still lost `formAction` on an input and `value` on an
-        // option. Those now ride on the types instead.
-        //
-        // A custom component is exempt entirely — it owns its prop contract, and
-        // `ComponentPropsWithoutRef<T>` promises the caller its props arrive.
-        //
-        // The elements that own `disabled`, per the HTML spec. A closed set, unlike
-        // the open-ended question of which tag owns which attribute.
-        const SUBMIT_OVERRIDES = [
-            'formAction',
-            'formEncType',
-            'formMethod',
-            'formNoValidate',
-            'formTarget',
-        ];
-        const OWNS_DISABLED = [
-            'button',
-            'fieldset',
-            'input',
-            'optgroup',
-            'option',
-            'select',
-            'textarea',
-        ];
-        // Two independent filters. They are not exclusive — an `<a>` owns neither
-        // the submit-overrides nor `disabled`, so it takes both — and deriving them
-        // from one destructure, or from one if/else, is what broke each of them in
-        // turn: first the overrides came off every intrinsic (an `as="input"` lost
-        // `formAction`), then scoping them to the anchor let `disabled` back onto
-        // it.
-        const forwardedRest = { ...rest };
-        if (typeof Component === 'string' && !isCustomElement(Component)) {
-            // Meaningless anywhere but a submit control, and an anchor is not one.
-            if (Component === 'a') {
-                for (const key of SUBMIT_OVERRIDES)
-                    delete forwardedRest[key];
-            }
-            // Visible via Bulma's `.button[disabled]`, so withheld from any element
-            // that does not own it.
-            if (!OWNS_DISABLED.includes(Component))
-                delete forwardedRest.disabled;
+function findTabStops(container) {
+    const candidates = collectCandidates(container);
+    const checked = new Map();
+    const usable = (el) => {
+        let ok = checked.get(el);
+        if (ok === undefined) {
+            ok = isRenderedAndEnabled(el, container);
+            checked.set(el, ok);
+        }
+        return ok;
+    };
+    // Resolved once per group, filed under each of its buttons, since finding
+    // the checked one scans the radio's whole tree.
+    const groupStops = new Map();
+    const groupStop = (radio) => {
+        if (groupStops.has(radio))
+            return groupStops.get(radio);
+        const group = candidates.filter(el => sameGroup(radio, el));
+        const on = checkedInGroup(radio);
+        const stop = on && isTabbableKind(on) && usable(on)
+            ? group.find(el => el === on)
+            : group.find(usable);
+        for (const el of [radio, ...group])
+            groupStops.set(el, stop);
+        return stop;
+    };
+    const isStop = (el) => usable(el) && (!isGroupedRadio(el) || groupStop(el) === el);
+    const first = candidates.find(isStop);
+    if (!first)
+        return null;
+    let last = first;
+    for (let i = candidates.length - 1; candidates[i] !== first; i--) {
+        if (isStop(candidates[i])) {
+            last = candidates[i];
+            break;
         }
-        return (jsxRuntime.jsx(Component, { ref: ref, className: buttonClasses, href: href, target: target, rel: rel, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, onClick: isDisabled
-                ? // Guarded, because this handler is installed into whatever `as`
-                    // renders and a custom component's `onClick` need not be a DOM
-                    // event handler at all. One declaring `onClick: (v: string) =>
-                    // void` calls this with a string, and an unguarded
-                    // `e.preventDefault()` throws `is not a function`. Blocking the
-                    // real event is the point; a foreign payload is simply not ours
-                    // to act on.
-                    (e) => {
-                        if (typeof e?.preventDefault === 'function')
-                            e.preventDefault();
-                    }
-                : onClick, ...forwardedRest, children: children }));
     }
-    return (jsxRuntime.jsx("button", { ref: ref, className: buttonClasses, disabled: isDisabled, onClick: onClick, ...rest, children: children }));
-});
-Button.displayName = 'Button';
-
-const PopoverContext = React.createContext(null);
-/** Intrinsic elements that are controls already, and keep their own role. */
-const NATIVE_CONTROLS = new Set([
-    'button',
-    'input',
-    'select',
-    'textarea',
-    'summary',
-]);
+    return {
+        first,
+        last,
+        stopFor: node => (isGroupedRadio(node) && groupStop(node)) || node,
+    };
+}
 /**
- * Whether the browser answers this key on `el` itself, by clicking it or by
- * using the key as input, so the trigger's click handler covers it.
+ * The first tab stop inside `container`, found the way the trap finds it, or
+ * `null` when there is none. For a component that moves focus into a panel
+ * without trapping it there. `src/index.ts` names its exports from this
+ * module, so this one stays internal.
  */
-function handlesKeyItself(el, key) {
-    if (NATIVE_CONTROLS.has(el.localName))
-        return true;
-    return el.localName === 'a' && key === 'Enter' && el.hasAttribute('href');
-}
-/** The innermost dialog the event passed through, which is the one its Escape belongs to. */
-function nearestDialog(event) {
-    return (event.composedPath().find(node => {
-        const role = node.getAttribute?.('role');
-        return role === 'dialog' || role === 'alertdialog';
-    }) ?? null);
+function firstTabStop(container) {
+    return findTabStops(container)?.first ?? null;
 }
 /**
- * The `Popover` component opens a panel of interactive content, such as a filter form or a set of share options, anchored to the element that toggles it.
+ * The element that has focus in the container's own document (an iframe's,
+ * when it renders into one), inside open shadow roots too. Focus inside a
+ * closed one reads as its host, which the comparisons above place like any
+ * other element. Browsers fall back to <body> when nothing has
+ * focus. jsdom, where consumers run their tests, reports nothing once focus
+ * was inside a shadow root that was removed, so this falls back for it.
+ */
+const focusedElement = (doc) => getDeepestActiveElement(doc) ?? doc.body;
+/**
+ * Keeps keyboard focus inside a container while it is active: focus moves in
+ * when the trap turns on, Tab and Shift+Tab wrap between the first and last
+ * tab stops, and focus goes back where it came from when the trap turns off.
  *
- * The panel is a non-modal `role="dialog"`: focus moves into it on open
- * and returns to the trigger on close, while the rest of the page stays
- * reachable by pointer and assistive technology. For hover-only hints use
- * `Tooltip`, and for a list of actions use `Dropdown`.
+ * Tab stops are what the browser's Tab visits, in document order: links,
+ * form controls, frames, media with controls, a `<details>` summary, editable
+ * regions, anything with `tabIndex={0}`, and the content of open shadow
+ * roots. Hidden, disabled, inert and `tabIndex={-1}` elements are skipped,
+ * and a radio group counts once. Give the container `tabIndex={-1}` so it can
+ * hold focus itself when nothing inside can. The trap listens on the
+ * container, so a trap nested inside another handles Tab first and the outer
+ * one stands aside.
  *
- * @function
- * @param {PopoverProps} props - Props for the Popover component.
- * @returns {JSX.Element} The trigger in its wrapper, and the panel while open.
+ * The trap is about Tab. If a Tab it let through still takes focus out (a
+ * browser can leave out a stop the page has, such as links when its settings
+ * say to), it sends focus back to the other end. A pointer or a script moving
+ * focus out is left alone, because pulling focus back from a click is modal
+ * behaviour, and a modal also has to block the page behind it, which `Modal`
+ * does. Content the container renders through a portal lives elsewhere in
+ * the DOM, so it is outside the trap: render nested overlays inside the
+ * container, or give them a trap of their own. To trap content a `Portal`
+ * renders, pass a ref to the element inside the `Portal` as `containerRef`.
+ *
+ * The trap looks at `containerRef` again each time the component calling it
+ * renders. A container that mounts after the trap turns on, such as a panel
+ * waiting for a `Portal` target held in state, has it attach once that
+ * component renders with the container in the DOM. When the container leaves
+ * or is replaced, the trap lets go of it as it would turning off, handing
+ * focus back, and attaches to the next one.
+ * A child that mounts the container in a render of its own (from its own
+ * state, or as a `Suspense` boundary resolves) goes unseen until the
+ * component calling the hook renders again. The trap waits for hydration, so
+ * that component renders again when the page hydrates, and portaled content,
+ * which first appears then, is found.
+ *
+ * @function useFocusTrap
+ * @param containerRef - Ref to the element focus stays inside.
+ * @param options - When the trap is on, and where focus starts and ends.
  *
  * @example
- * <Popover trigger={<Button>Filters</Button>}>
- *   <Popover.Header>Filter rows</Popover.Header>
- *   <Popover.Body>…</Popover.Body>
- *   <Popover.Footer>
- *     <Popover.Close>Done</Popover.Close>
- *   </Popover.Footer>
- * </Popover>
+ * const panelRef = useRef<HTMLDivElement>(null);
+ * useFocusTrap(panelRef, { active: isOpen });
+ * return isOpen ? (
+ *   <div ref={panelRef} role="dialog" aria-label="Filters" tabIndex={-1}>
+ *     …
+ *   </div>
+ * ) : null;
  */
-const PopoverComponent = ({ trigger, children, open: controlledOpen, defaultOpen = false, onOpenChange, position = 'bottom-left', appendToBody = false, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, className, contentClassName, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const rootRef = React.useRef(null);
-    const panelRef = React.useRef(null);
-    // The last pointerdown React saw inside the panel. React's tree includes
-    // content the panel portals elsewhere, which the DOM path doesn't.
-    const insidePointerRef = React.useRef(null);
-    const baseId = React.useId();
-    const panelId = `${baseId}-panel`;
-    const titleId = `${baseId}-title`;
-    const isControlled = controlledOpen !== undefined;
-    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-    const isOpen = controlledOpen ?? internalOpen;
-    const requestOpen = React.useCallback((next) => {
-        onOpenChange?.(next);
-        if (!isControlled)
-            setInternalOpen(next);
-    }, [isControlled, onOpenChange]);
-    const close = React.useCallback(() => requestOpen(false), [requestOpen]);
-    // A portaled panel has no server markup, so it only exists from the commit
-    // after hydration. Everything that measures or focuses it waits for that.
+function useFocusTrap(containerRef, options = {}) {
+    const { active = true, initialFocusRef, restoreFocus = true } = options;
+    // Portaled content has no server-rendered counterpart, so a portaled
+    // container only exists from the commit after hydration.
     const hydrated = useIsHydrated();
-    const panelMounted = isOpen && (hydrated || !appendToBody);
-    const resolved = useAnchoredPosition(rootRef, panelRef, {
-        active: panelMounted,
-        position,
-        fixed: appendToBody,
-        // The gap comes from `--bulma-popover-offset` in the stylesheet, so the
-        // coordinates leave it out and `auto` reads it off the panel.
-        offset: 0,
-        styledGap: marginGap,
-    });
-    // The trigger renders first inside the wrapper. Read when needed rather
-    // than held, so a trigger that remounted is still the one found.
-    const triggerNode = React.useCallback(() => {
-        const first = rootRef.current?.firstElementChild;
-        return first && first !== panelRef.current ? first : null;
-    }, []);
-    const restoreFocusRef = React.useMemo(() => ({
-        get current() {
-            return triggerNode();
-        },
-    }), [triggerNode]);
-    useFocusTrap(panelRef, {
-        active: panelMounted && trapFocus,
-        restoreFocus: restoreFocusRef,
-    });
-    // Without the trap, focus still arrives in the panel and goes back to the
-    // trigger, on the trap's terms: only while the panel still holds it.
+    // The container the trap is attached to, or `null` while it has none.
+    const heldRef = React.useRef(null);
+    // Bumped to run the trap again when the container in the ref changes.
+    const [refChanges, setRefChanges] = React.useState(0);
     React.useEffect(() => {
-        const panel = panelRef.current;
-        if (!panelMounted || trapFocus || !panel)
+        heldRef.current = null;
+        if (!active || !hydrated)
             return undefined;
-        (firstTabStop(panel) ?? panel).focus();
-        return () => {
-            const doc = panel.ownerDocument;
-            const now = getDeepestActiveElement(doc);
-            if (!now || now === doc.body || panel.contains(now)) {
-                triggerNode()?.focus();
-            }
-        };
-    }, [panelMounted, trapFocus, triggerNode]);
-    React.useEffect(() => {
-        if (!panelMounted || !closeOnClickOutside)
+        const container = containerRef.current;
+        if (!container)
             return undefined;
-        const handlePointerDown = (e) => {
-            if (e === insidePointerRef.current || isEventInside(e, rootRef.current)) {
+        heldRef.current = container;
+        const doc = container.ownerDocument;
+        const opener = focusedElement(doc);
+        // `initialFocusRef` counts only when focusing it puts focus inside. Focus
+        // put outside would stay out, as Tab there never reaches the container's
+        // listener, and focusing something that can't take focus (a heading
+        // without `tabIndex`, a disabled control) leaves focus where it was.
+        const initial = initialFocusRef?.current;
+        const inTrap = initial && inside(container, initial) ? initial : null;
+        inTrap?.focus();
+        if (!inTrap || !inside(container, focusedElement(doc))) {
+            (findTabStops(container)?.first ?? container).focus();
+        }
+        // Where focus goes if a Tab the trap let the browser handle takes it out,
+        // held until that Tab has finished moving focus.
+        let wrapTo = null;
+        let wrapTimer;
+        const handleKeyDown = (e) => {
+            // A trap nested inside this one has already wrapped focus.
+            if (e.key !== 'Tab' || e.defaultPrevented)
+                return;
+            const stops = findTabStops(container);
+            if (!stops) {
+                e.preventDefault();
+                container.focus();
                 return;
             }
-            close();
-        };
-        // The wrapper is on the page whenever the panel is. Its document, an
-        // iframe's when the tree renders into one, is where presses land.
-        const doc = rootRef.current.ownerDocument;
-        doc.addEventListener('pointerdown', handlePointerDown);
-        return () => doc.removeEventListener('pointerdown', handlePointerDown);
-    }, [panelMounted, closeOnClickOutside, close]);
-    const handlePanelKeyDown = (e) => {
-        if (e.key !== 'Escape' || !closeOnEscape || e.defaultPrevented)
-            return;
-        // React bubbles the key here from portaled content as well, so a dialog
-        // of its own on the way (a nested popover, a picker's calendar) owns it.
-        const owner = nearestDialog(e.nativeEvent);
-        if (owner && owner !== panelRef.current)
-            return;
-        e.preventDefault();
-        close();
-    };
-    const triggerProps = trigger.props;
-    const handleTriggerClick = (e) => {
-        triggerProps.onClick?.(e);
-        if (!e.defaultPrevented)
-            requestOpen(!isOpen);
-    };
-    const handleTriggerKeyDown = (e) => {
-        triggerProps.onKeyDown?.(e);
-        // A key on something inside the trigger is that element's to answer.
-        if (e.defaultPrevented || e.target !== e.currentTarget)
-            return;
-        if (e.key === 'Escape') {
-            if (isOpen && closeOnEscape) {
+            const current = stops.stopFor(focusedElement(doc));
+            // Wrap whenever the browser has no stop left in that direction inside
+            // the container. Comparing positions rather than testing `=== first`
+            // also covers focus resting on the container or on an element outside
+            // the tab order, which the browser would otherwise walk straight out of.
+            if (e.shiftKey
+                ? !follows(container, stops.first, current)
+                : !follows(container, current, stops.last)) {
                 e.preventDefault();
-                close();
+                (e.shiftKey ? stops.last : stops.first).focus();
+                return;
             }
-            return;
-        }
-        if (e.key !== 'Enter' && e.key !== ' ')
-            return;
-        if (handlesKeyItself(e.currentTarget, e.key))
-            return;
-        // Space would scroll the page; a held key repeats.
-        e.preventDefault();
-        if (!e.repeat)
-            requestOpen(!isOpen);
-    };
-    const needsButtonRole = typeof trigger.type === 'string' &&
-        !NATIVE_CONTROLS.has(trigger.type) &&
-        !(trigger.type === 'a' && triggerProps.href != null);
-    const clonedTrigger = React.cloneElement(trigger, {
-        ...(needsButtonRole
-            ? {
-                role: triggerProps.role ?? 'button',
-                tabIndex: triggerProps.tabIndex ?? 0,
+            wrapTo = e.shiftKey ? stops.last : stops.first;
+            clearTimeout(wrapTimer);
+            wrapTimer = setTimeout(() => {
+                wrapTo = null;
+            });
+        };
+        // The browser moves focus as soon as the keydown is over, so focus that
+        // lands outside while `wrapTo` is set got there by that Tab.
+        const handleFocusIn = (e) => {
+            if (!wrapTo || inside(container, e.composedPath()[0]))
+                return;
+            const target = wrapTo;
+            wrapTo = null;
+            target.focus();
+        };
+        container.addEventListener('keydown', handleKeyDown);
+        doc.addEventListener('focusin', handleFocusIn, true);
+        return () => {
+            container.removeEventListener('keydown', handleKeyDown);
+            doc.removeEventListener('focusin', handleFocusIn, true);
+            clearTimeout(wrapTimer);
+            let target = restoreFocus ? opener : null;
+            // `null` is an object too, and a caller without types can pass it.
+            if (restoreFocus && typeof restoreFocus === 'object') {
+                // Read now rather than when the trap turned on: a trigger that
+                // re-mounted in between has a new node.
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                target = restoreFocus.current;
             }
-            : {}),
-        'aria-haspopup': 'dialog',
-        'aria-expanded': isOpen,
-        'aria-controls': panelMounted ? panelId : undefined,
-        onClick: handleTriggerClick,
-        onKeyDown: handleTriggerKeyDown,
-    });
-    const rootClasses = classNames(usePrefixedClassNames('popover', { 'is-active': isOpen }), bulmaHelperClasses, className);
-    const panelClasses = classNames(usePrefixedClassNames('popover-content', {
-        [`is-${resolved.position}`]: true,
-        'is-portal': appendToBody,
-    }), contentClassName);
-    return (jsxRuntime.jsxs("div", { className: rootClasses, ...rest, ref: rootRef, children: [clonedTrigger, isOpen && (jsxRuntime.jsx(Portal, { disabled: !appendToBody, children: jsxRuntime.jsx(PopoverPanel, { panelRef: panelRef, titleId: titleId, ariaLabel: ariaLabel, close: close, id: panelId, className: panelClasses, style: appendToBody
-                        ? {
-                            position: 'fixed',
-                            top: resolved.top,
-                            left: resolved.left,
-                        }
-                        : undefined, onKeyDown: handlePanelKeyDown, onPointerDownCapture: e => {
-                        insidePointerRef.current = e.nativeEvent;
-                    }, children: children }) }))] }));
-};
-/**
- * The open panel. It mounts with each opening, so it counts the
- * `Popover.Header`s inside it afresh every time.
- */
-function PopoverPanel({ panelRef, titleId, ariaLabel, close, children, ...attrs }) {
-    // Headers register in a layout effect, after this first render, and this
-    // panel's own layout effect runs after theirs. Until then the panel assumes
-    // it has one, so a panel that does is named from its first commit, before
-    // focus moves in, and one that doesn't drops the reference before it paints.
-    const [titlesCounted, setTitlesCounted] = React.useState(false);
-    const [titleCount, setTitleCount] = React.useState(0);
-    const registerTitle = React.useCallback(() => {
-        setTitleCount(n => n + 1);
-        return () => setTitleCount(n => n - 1);
-    }, []);
-    useClientLayoutEffect(() => {
-        setTitlesCounted(true);
-    }, []);
-    const named = Boolean(ariaLabel) || titleCount > 0;
+            // Hand focus back only while the trap still holds it: inside the
+            // container, or dropped to <body> because the container left the page.
+            const now = focusedElement(doc);
+            if (target && (now === doc.body || inside(container, now))) {
+                target.focus();
+            }
+        };
+    }, [
+        active,
+        hydrated,
+        containerRef,
+        initialFocusRef,
+        restoreFocus,
+        refChanges,
+    ]);
+    // Nothing says when a ref is set, so after every render, a ref that no
+    // longer matches what the trap holds (a container that mounted, left or was
+    // replaced) runs it again. Effects run in order, so whenever the effect
+    // above ran in this commit, it read the ref just before this does, and a
+    // mismatch means the ref changed in a render it didn't run for. The render
+    // a bump asks for runs it, so the two match and the trap settles. An empty
+    // ref matches a trap holding nothing, so a container that never mounts
+    // costs no render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- after every render on purpose
     React.useEffect(() => {
-        if (titlesCounted && !named) {
-            warnOnce('Popover:unnamed', '[bestax-bulma] <Popover> opened a panel with no accessible name. ' +
-                'Pass ariaLabel, or render a Popover.Header inside it.');
+        if (active && hydrated && containerRef.current !== heldRef.current) {
+            setRefChanges(n => n + 1);
         }
-    }, [titlesCounted, named]);
-    const context = React.useMemo(() => ({ titleId, registerTitle, close }), [titleId, registerTitle, close]);
-    return (jsxRuntime.jsx(PopoverContext.Provider, { value: context, children: jsxRuntime.jsx("div", { ...attrs, ref: panelRef, role: "dialog", "aria-label": ariaLabel, "aria-labelledby": !ariaLabel && (!titlesCounted || titleCount > 0) ? titleId : undefined, tabIndex: -1, children: children }) }));
+    });
 }
+
+// INTERNAL: deliberately not exported from src/index.ts.
 /**
- * The popover's title, which names the panel for assistive technology.
- *
- * @function
- * @param {PopoverHeaderProps} props - Props for the Popover.Header component.
- * @returns {JSX.Element} The header element.
+ * A `styledGap` for a panel whose stylesheet puts the gap in a margin on the
+ * side facing the anchor, negative on a portaled panel above it, so the
+ * larger magnitude is the gap. In pixels.
  */
-const PopoverHeader = ({ className, ...props }) => {
-    const context = React.useContext(PopoverContext);
-    const registerTitle = context?.registerTitle;
-    // Before paint, so the panel is named by the time it shows.
-    useClientLayoutEffect(() => registerTitle?.(), [registerTitle]);
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('popover-header'), bulmaHelperClasses, className), ...rest, id: context?.titleId }));
-};
+function marginGap(panel) {
+    const { marginTop, marginBottom } = getComputedStyle(panel);
+    return Math.max(Math.abs(parseFloat(marginTop)) || 0, Math.abs(parseFloat(marginBottom)) || 0);
+}
 /**
- * The popover's main content area.
- *
- * @function
- * @param {PopoverBodyProps} props - Props for the Popover.Body component.
- * @returns {JSX.Element} The body element.
+ * The corner that keeps a panel of this size in the viewport, preferring
+ * below the anchor and lined up with its left edge.
  */
-const PopoverBody = ({ className, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('popover-body'), bulmaHelperClasses, className), ...rest }));
-};
+function resolveAuto(view, rect, panelWidth, panelHeight, gap) {
+    const fitsBelow = rect.bottom + panelHeight + gap <= view.innerHeight;
+    const fitsRight = rect.left + panelWidth <= view.innerWidth;
+    if (fitsBelow)
+        return fitsRight ? 'bottom-left' : 'bottom-right';
+    return fitsRight ? 'top-left' : 'top-right';
+}
+const samePosition = (a, b) => a.position === b.position && a.top === b.top && a.left === b.left;
 /**
- * A row of actions along the bottom of the popover, aligned to the end.
+ * Places a floating panel against its anchor: resolves `auto` to a corner
+ * and, for a panel fixed to the viewport, works out its coordinates. It
+ * measures again on resize and on any scroll of the anchor's window (an
+ * iframe's, when the anchor renders into one), so a fixed panel follows its
+ * anchor. A measurement that changes nothing doesn't render again.
  *
- * @function
- * @param {PopoverFooterProps} props - Props for the Popover.Footer component.
- * @returns {JSX.Element} The footer element.
+ * Measuring happens in a layout effect, so the panel is placed before it
+ * paints. It needs both elements on the page while `active` is on, and
+ * keeps the last placement when either is missing.
+ *
+ * @function useAnchoredPosition
+ * @param anchorRef - The element the panel opens from.
+ * @param panelRef - The floating panel.
+ * @param options - Whether to measure, the corner asked for, and how the panel is placed.
+ * @returns The corner the panel opens from, with coordinates when it is fixed.
  */
-const PopoverFooter = ({ className, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('popover-footer'), bulmaHelperClasses, className), ...rest }));
-};
+function useAnchoredPosition(anchorRef, panelRef, { active, position, fixed, offset = 4, styledGap }) {
+    const [resolved, setResolved] = React.useState({
+        position: position === 'auto' ? 'bottom-left' : position,
+    });
+    useClientLayoutEffect(() => {
+        if (!active)
+            return undefined;
+        const view = (anchorRef.current ?? panelRef.current)?.ownerDocument.defaultView ??
+            window;
+        const update = () => {
+            const anchor = anchorRef.current;
+            const panel = panelRef.current;
+            if (!anchor || !panel)
+                return;
+            const rect = anchor.getBoundingClientRect();
+            const { width, height } = panel.getBoundingClientRect();
+            const corner = position === 'auto'
+                ? resolveAuto(view, rect, width, height, offset + (styledGap?.(panel) ?? 0))
+                : position;
+            const next = fixed
+                ? {
+                    position: corner,
+                    top: corner.startsWith('bottom')
+                        ? rect.bottom + offset
+                        : rect.top - height - offset,
+                    left: corner.endsWith('left') ? rect.left : rect.right - width,
+                }
+                : { position: corner };
+            setResolved(prev => (samePosition(prev, next) ? prev : next));
+        };
+        update();
+        view.addEventListener('resize', update, { passive: true });
+        view.addEventListener('scroll', update, { passive: true, capture: true });
+        return () => {
+            view.removeEventListener('resize', update);
+            view.removeEventListener('scroll', update, { capture: true });
+        };
+    }, [active, anchorRef, panelRef, position, fixed, offset, styledGap]);
+    return resolved;
+}
+
+const validButtonColors = [...validColors, 'text', 'ghost'];
 /**
- * A `Button` that closes the popover, handing focus back to the trigger.
+ * The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
  *
  * @function
- * @param {PopoverCloseProps} props - Props for the Popover.Close component.
- * @returns {JSX.Element} The close button.
+ * @param {ButtonProps} props - Props for the Button component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered button, anchor, or custom element.
+ * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}
  */
-const PopoverClose = ({ onClick, ...props }) => {
-    const context = React.useContext(PopoverContext);
-    return (jsxRuntime.jsx(Button, { ...props, type: buttonType(props.type), onClick: (e) => {
-            onClick?.(e);
-            if (!e.defaultPrevented)
-                context?.close();
-        } }));
-};
-/** Popover with Header, Body, Footer and Close sub-components. */
-const Popover = withSubComponents(PopoverComponent, {
-    Header: PopoverHeader,
-    Body: PopoverBody,
-    Footer: PopoverFooter,
-    Close: PopoverClose,
-}, 'Popover');
+const Button = React.forwardRef(function Button(props, ref) {
+    const { color, size, isLight, isRounded, isLoading, isStatic, isFullwidth, isFullWidth, isOutlined, isInverted, isFocused, isActive, isHovered, isDisabled, className, children, textColor, bgColor, as: Component = 'button', href, onClick, target, rel, ...bulmaProps } = props;
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...bulmaProps,
+    });
+    // Generate Bulma classes with prefix
+    const bulmaClasses = usePrefixedClassNames('button', {
+        [`is-${color}`]: color &&
+            validButtonColors.includes(color),
+        [`is-${size}`]: size,
+        'is-outlined': isOutlined,
+        'is-light': isLight,
+        'is-loading': isLoading,
+        'is-static': isStatic,
+        'is-disabled': isDisabled,
+        'is-rounded': isRounded,
+        'is-hovered': isHovered,
+        'is-focused': isFocused,
+        'is-active': isActive,
+        'is-inverted': isInverted,
+        'is-fullwidth': isFullwidth ?? isFullWidth,
+    });
+    // Combine prefixed Bulma classes with unprefixed user className and prefixed helper classes
+    const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    if (Component !== 'button') {
+        // Strip the form-control attributes a link-like element cannot carry, so a
+        // JavaScript consumer or a spread object doesn't put them on the DOM. The
+        // types no longer allow them through; this is the runtime backstop.
+        //
+        // Only for INTRINSIC tags. A custom component (a router Link, ...) owns its
+        // prop contract, and `ComponentPropsWithoutRef<T>` promises the caller that
+        // its props reach it. Stripping names by their spelling alone broke that
+        // promise silently: `<Button as={Custom} name="x" />` type-checked while
+        // `Custom` never received the `name` it requires.
+        //
+        // `autoFocus` and `type` are deliberately NOT stripped: both are valid on
+        // targets this list was filtering them from. `autoFocus` is a global
+        // attribute (React decides per element whether to honour it, which is not
+        // ours to pre-empt), and `type` on an anchor is the MIME hint that
+        // `ButtonProps<'a'>` now types it as.
+        //
+        // The types already answer this for a TypeScript caller: `ButtonProps<T>`
+        // derives from `ComponentPropsWithoutRef<T>`, so only what the target
+        // accepts can be passed. What is left is a runtime backstop for JavaScript
+        // consumers and spread objects.
+        //
+        // Keep it to the two cases where a stray attribute does something. The
+        // submit-overrides belong to a submit control and never make sense on the
+        // anchor path. `disabled` is the one that is VISIBLE: Bulma styles
+        // `.button[disabled]` (background, border, shadow, opacity), so letting it
+        // through to a `<span>` greys the element out — main stripped it, and not
+        // stripping it would be a silent visual change on a types-only release.
+        //
+        // Everything else (`name`, `value`, `form`) is inert where it does not
+        // belong, and enumerating which tags own it is what kept going wrong:
+        // first all nine names on every non-button tag (so `<Button as="input"
+        // name="query" value="Search">` submitted nothing), then a form-control
+        // allowlist that still lost `formAction` on an input and `value` on an
+        // option. Those now ride on the types instead.
+        //
+        // A custom component is exempt entirely — it owns its prop contract, and
+        // `ComponentPropsWithoutRef<T>` promises the caller its props arrive.
+        //
+        // The elements that own `disabled`, per the HTML spec. A closed set, unlike
+        // the open-ended question of which tag owns which attribute.
+        const SUBMIT_OVERRIDES = [
+            'formAction',
+            'formEncType',
+            'formMethod',
+            'formNoValidate',
+            'formTarget',
+        ];
+        const OWNS_DISABLED = [
+            'button',
+            'fieldset',
+            'input',
+            'optgroup',
+            'option',
+            'select',
+            'textarea',
+        ];
+        // Two independent filters. They are not exclusive — an `<a>` owns neither
+        // the submit-overrides nor `disabled`, so it takes both — and deriving them
+        // from one destructure, or from one if/else, is what broke each of them in
+        // turn: first the overrides came off every intrinsic (an `as="input"` lost
+        // `formAction`), then scoping them to the anchor let `disabled` back onto
+        // it.
+        const forwardedRest = { ...rest };
+        if (typeof Component === 'string' && !isCustomElement(Component)) {
+            // Meaningless anywhere but a submit control, and an anchor is not one.
+            if (Component === 'a') {
+                for (const key of SUBMIT_OVERRIDES)
+                    delete forwardedRest[key];
+            }
+            // Visible via Bulma's `.button[disabled]`, so withheld from any element
+            // that does not own it.
+            if (!OWNS_DISABLED.includes(Component))
+                delete forwardedRest.disabled;
+        }
+        return (jsxRuntime.jsx(Component, { ref: ref, className: buttonClasses, href: href, target: target, rel: rel, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, onClick: isDisabled
+                ? // Guarded, because this handler is installed into whatever `as`
+                    // renders and a custom component's `onClick` need not be a DOM
+                    // event handler at all. One declaring `onClick: (v: string) =>
+                    // void` calls this with a string, and an unguarded
+                    // `e.preventDefault()` throws `is not a function`. Blocking the
+                    // real event is the point; a foreign payload is simply not ours
+                    // to act on.
+                    (e) => {
+                        if (typeof e?.preventDefault === 'function')
+                            e.preventDefault();
+                    }
+                : onClick, ...forwardedRest, children: children }));
+    }
+    return (jsxRuntime.jsx("button", { ref: ref, className: buttonClasses, disabled: isDisabled, onClick: onClick, ...rest, children: children }));
+});
+Button.displayName = 'Button';
 
-// INTERNAL: deliberately not exported from src/index.ts.
+const PopoverContext = React.createContext(null);
+/** Intrinsic elements that are controls already, and keep their own role. */
+const NATIVE_CONTROLS = new Set([
+    'button',
+    'input',
+    'select',
+    'textarea',
+    'summary',
+]);
 /**
- * Whether focus that just arrived on `el` is keyboard focus, as the browser
- * decides it for `:focus-visible`: focus from a key or from the browser's
- * own controls is, focus a press brings isn't, and focus a script moves
- * follows whichever came last. A browser that can't match the selector
- * throws, and then every focus counts, so keyboard users can still open it.
+ * Whether the browser answers this key on `el` itself, by clicking it or by
+ * using the key as input, so the trigger's click handler covers it.
  */
-function isKeyboardFocus(el) {
-    try {
-        return el.matches(':focus-visible');
-    }
-    catch {
+function handlesKeyItself(el, key) {
+    if (NATIVE_CONTROLS.has(el.localName))
         return true;
-    }
+    return el.localName === 'a' && key === 'Enter' && el.hasAttribute('href');
 }
-/** Whether `node` is `container` or inside it, when there are both. */
-const within = (container, node) => Boolean(container && node && container.contains(node));
-/**
- * Per document, the hooks that want Escape and the one listener they share
- * while there are any, so a card inside another card doesn't add a second
- * listener that closes both on one keypress.
- */
-const escapeListeners = new Map();
-/** Counts openings across the page, so the most recent one is known. */
-let openings = 0;
-/**
- * Adds `entry` to the hooks that want Escape on `doc`, starting the shared
- * listener when it is the first.
- *
- * Escape takes back every open that is on its way, so nothing appears right
- * after it, and closes one open floating element, chosen by these rules in
- * turn:
- *
- * 1. One that focus is in, on its trigger or inside it, when there is one.
- * 2. The innermost: one whose floating element holds no other's trigger.
- *    That follows nesting whether either one is portaled, since an inner
- *    trigger sits in the outer floating element either way.
- * 3. The one that opened last.
- *
- * The keypress belongs to whatever has focus. When that is one of the open
- * floating elements or their triggers, or nothing, the listener stops it in
- * the capture phase, before anything around (a Popover, a Modal) sees it.
- * When focus is anywhere else, such as a combobox or a dialog of its own,
- * the floating element still closes, since hover put it there without
- * focus, and the key goes on to that owner.
- *
- * @returns What to call when the hook stops wanting Escape.
- */
-function wantEscape(doc, entry) {
-    let listener = escapeListeners.get(doc);
-    if (!listener) {
-        const entries = new Set();
-        const handleKeyDown = (event) => {
-            if (event.key !== 'Escape')
-                return;
-            const open = [];
-            // A copy, since taking an open back can take its hook out of the set.
-            for (const each of [...entries]) {
-                if (each.openedAt)
-                    open.push(each);
-                else
-                    each.cancel();
-            }
-            const focused = getDeepestActiveElement(doc);
-            const holding = open.filter(each => within(each.trigger(), focused) || within(each.floating(), focused));
-            const pool = holding.length > 0 ? holding : open;
-            let top;
-            for (const each of pool) {
-                const holdsAnother = pool.some(other => other !== each && within(each.floating(), other.trigger()));
-                if (!holdsAnother && (!top || each.openedAt > top.openedAt)) {
-                    top = each;
-                }
-            }
-            if (!top)
-                return;
-            if (holding.length > 0 || !focused || focused === doc.body) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-            top.close();
-        };
-        doc.addEventListener('keydown', handleKeyDown, true);
-        listener = {
-            entries,
-            stop: () => {
-                doc.removeEventListener('keydown', handleKeyDown, true);
-                escapeListeners.delete(doc);
-            },
-        };
-        escapeListeners.set(doc, listener);
-    }
-    const shared = listener;
-    shared.entries.add(entry);
-    return () => {
-        shared.entries.delete(entry);
-        if (shared.entries.size === 0)
-            shared.stop();
-    };
+/** The innermost dialog the event passed through, which is the one its Escape belongs to. */
+function nearestDialog(event) {
+    return (event.composedPath().find(node => {
+        const role = node.getAttribute?.('role');
+        return role === 'dialog' || role === 'alertdialog';
+    }) ?? null);
 }
 /**
- * Decides when a floating element that opens on hover or keyboard focus asks
- * to open and to close. It renders nothing, and leaves roles, ARIA and
- * placement to the component that calls it.
+ * The `Popover` component opens a panel of interactive content, such as a filter form or a set of share options, anchored to the element that toggles it.
  *
- * - The pointer entering, or keyboard focus arriving on the trigger, asks to
- *   open after `openDelay`. A touch pointer doesn't count. Neither does focus
- *   that a press brings to the trigger: it counts when the browser shows it
- *   as `:focus-visible`.
- * - Focus in the floating element holds it open however it got there,
- *   including focus in content it portals elsewhere, such as a nested card.
- *   Whether a click focuses what it lands on is up to the browser: Safari
- *   and Firefox on macOS don't focus a button on click, so there a clicked
- *   button doesn't hold it once the pointer leaves.
- * - Once the pointer and focus have both left, it asks to close after
- *   `closeDelay`, and either coming back before then keeps it open. Nothing
- *   else closes it on a timer.
- * - Escape closes it at once, wherever focus is, and stops there when focus
- *   is in it, on its trigger or nowhere, so a `Popover` or `Modal` around it
- *   keeps its own. With focus somewhere else, the key goes on after closing
- *   it. Inside another one, the inner one closes first. Escape before it
- *   opens takes the opening back and goes on its way. One key listener per
- *   document serves every hook on it, there only while one of them is open
- *   or on its way to open.
- * - With `openOnTap`, a tap on the trigger opens it at once and the next tap
- *   on the trigger closes it. While a tap holds it open, a press outside the
- *   trigger and the floating element closes it, from a listener on the
- *   document that is there only then. Taps never count as hover, and mouse
- *   and pen work the same with it or without.
- * - Once it closes, for any reason, whatever was holding it open has to
- *   leave and come back to open it again.
- * - When the floating element closes with focus inside it, focus goes back
- *   to the trigger, unless the same update put it somewhere else. Handing it
- *   back doesn't count as focus arriving.
+ * The panel is a non-modal `role="dialog"`: focus moves into it on open
+ * and returns to the trigger on close, while the rest of the page stays
+ * reachable by pointer and assistive technology. For hover-only hints use
+ * `Tooltip`, and for a list of actions use `Dropdown`.
  *
- * Nothing it scheduled runs after the component unmounts.
+ * @function
+ * @param {PopoverProps} props - Props for the Popover component.
+ * @returns {JSX.Element} The trigger in its wrapper, and the panel while open.
  *
- * @function useHoverOpen
- * @param options - The open state, how to ask for another, the delays, and the two elements.
- * @returns Handlers for the element that holds the trigger.
+ * @example
+ * <Popover trigger={<Button>Filters</Button>}>
+ *   <Popover.Header>Filter rows</Popover.Header>
+ *   <Popover.Body>…</Popover.Body>
+ *   <Popover.Footer>
+ *     <Popover.Close>Done</Popover.Close>
+ *   </Popover.Footer>
+ * </Popover>
  */
-function useHoverOpen(options) {
-    const latestRef = React.useRef(options);
-    const stateRef = React.useRef({
-        pointerIn: false,
-        focusIn: false,
-        focusInFloating: false,
-        held: false,
-        opening: false,
-        asked: false,
-        restoring: false,
+const PopoverComponent = ({ trigger, children, open: controlledOpen, defaultOpen = false, onOpenChange, position = 'bottom-left', appendToBody = false, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, className, contentClassName, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const rootRef = React.useRef(null);
+    const panelRef = React.useRef(null);
+    // The last pointerdown React saw inside the panel. React's tree includes
+    // content the panel portals elsewhere, which the DOM path doesn't.
+    const insidePointerRef = React.useRef(null);
+    const baseId = React.useId();
+    const panelId = `${baseId}-panel`;
+    const titleId = `${baseId}-title`;
+    const isControlled = controlledOpen !== undefined;
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const isOpen = controlledOpen ?? internalOpen;
+    const requestOpen = React.useCallback((next) => {
+        onOpenChange?.(next);
+        if (!isControlled)
+            setInternalOpen(next);
+    }, [isControlled, onOpenChange]);
+    const close = React.useCallback(() => requestOpen(false), [requestOpen]);
+    // A portaled panel has no server markup, so it only exists from the commit
+    // after hydration. Everything that measures or focuses it waits for that.
+    const hydrated = useIsHydrated();
+    const panelMounted = isOpen && (hydrated || !appendToBody);
+    const resolved = useAnchoredPosition(rootRef, panelRef, {
+        active: panelMounted,
+        position,
+        fixed: appendToBody,
+        // The gap comes from `--bulma-popover-offset` in the stylesheet, so the
+        // coordinates leave it out and `auto` reads it off the panel.
+        offset: 0,
+        styledGap: marginGap,
     });
-    // In the hooks that want Escape from the moment an open is on its way until
-    // the floating element closes, and out otherwise. Stamped with the order it
-    // opened in.
-    const listenForEscape = React.useCallback(function listen() {
-        const s = stateRef.current;
-        const entry = entryRef.current;
-        const { open, triggerRef } = latestRef.current;
-        if (!open)
-            entry.openedAt = 0;
-        else if (!entry.openedAt) {
-            openings += 1;
-            entry.openedAt = openings;
-        }
-        const wanted = open || s.opening || s.asked;
-        if (wanted === Boolean(s.releaseEscape))
-            return;
-        if (s.releaseEscape) {
-            s.releaseEscape();
-            s.releaseEscape = undefined;
-            return;
-        }
-        const doc = triggerRef.current?.ownerDocument ?? document;
-        s.releaseEscape = wantEscape(doc, entry);
+    // The trigger renders first inside the wrapper. Read when needed rather
+    // than held, so a trigger that remounted is still the one found.
+    const triggerNode = React.useCallback(() => {
+        const first = rootRef.current?.firstElementChild;
+        return first && first !== panelRef.current ? first : null;
     }, []);
-    const entryRef = React.useRef({
-        openedAt: 0,
-        trigger: () => latestRef.current.triggerRef.current,
-        floating: () => latestRef.current.floatingRef.current,
-        // Only ever called while an open is on its way, so it is one or the
-        // other: still waiting on its delay, or asked for already.
-        cancel: () => {
-            const s = stateRef.current;
-            clearTimeout(s.timer);
-            // An ask already made is taken back by asking the other way.
-            if (s.asked)
-                latestRef.current.onOpenChange(false);
-            s.opening = false;
-            s.asked = false;
-            listenForEscape();
-        },
-        close: () => {
-            clearTimeout(stateRef.current.timer);
-            latestRef.current.onOpenChange(false);
+    const restoreFocusRef = React.useMemo(() => ({
+        get current() {
+            return triggerNode();
         },
+    }), [triggerNode]);
+    useFocusTrap(panelRef, {
+        active: panelMounted && trapFocus,
+        restoreFocus: restoreFocusRef,
     });
-    // Asks to open or to close. Escape can take an ask to open back until it is
-    // answered: by the commit that follows it, or, when the caller keeps it
-    // closed without rendering at all, once the event that asked is over, by
-    // which time React has rendered any answer the caller set.
-    const ask = React.useCallback((next) => {
-        const s = stateRef.current;
-        s.asked = next;
-        latestRef.current.onOpenChange(next);
-        listenForEscape();
-        if (!next)
-            return;
-        clearTimeout(s.askTimer);
-        s.askTimer = setTimeout(() => {
-            // Still closed: the caller turned it down.
-            if (latestRef.current.open)
-                return;
-            s.asked = false;
-            s.tappedIn = undefined;
-            listenForEscape();
-        });
-    }, [listenForEscape]);
-    // Asks for what the pointer and focus call for, after its delay, when that
-    // changed since the last time and isn't the state already.
-    const settle = React.useCallback(() => {
-        const s = stateRef.current;
-        const held = s.pointerIn || s.focusIn;
-        if (held !== s.held) {
-            s.held = held;
-            clearTimeout(s.timer);
-            const { open, openDelay, closeDelay } = latestRef.current;
-            s.opening = held && !open;
-            if (held !== open) {
-                s.timer = setTimeout(() => {
-                    s.opening = false;
-                    if (latestRef.current.open !== held)
-                        ask(held);
-                    else
-                        listenForEscape();
-                }, held ? openDelay : closeDelay);
+    // Without the trap, focus still arrives in the panel and goes back to the
+    // trigger, on the trap's terms: only while the panel still holds it.
+    React.useEffect(() => {
+        const panel = panelRef.current;
+        if (!panelMounted || trapFocus || !panel)
+            return undefined;
+        (firstTabStop(panel) ?? panel).focus();
+        return () => {
+            const doc = panel.ownerDocument;
+            const now = getDeepestActiveElement(doc);
+            if (!now || now === doc.body || panel.contains(now)) {
+                triggerNode()?.focus();
             }
-        }
-        listenForEscape();
-    }, [listenForEscape, ask]);
-    // While a tap holds the floating element open, a press outside the trigger
-    // and the floating element closes it. Set up again each time it opens or
-    // closes.
-    const listenForPress = React.useCallback(() => {
-        const s = stateRef.current;
-        s.stopPress?.();
-        s.stopPress = undefined;
-        const doc = latestRef.current.open ? s.tappedIn : undefined;
-        if (!doc)
-            return;
-        const handlePointerDown = (event) => {
-            // Inside is a press React brought to the holder, which covers content
-            // the floating element portals elsewhere, or one whose path runs
-            // through the trigger or the floating element, which covers a press
-            // that something inside stopped before React got it to the holder.
-            const { triggerRef, floatingRef } = latestRef.current;
-            if (event === s.pressedInside ||
-                isEventInside(event, triggerRef.current) ||
-                isEventInside(event, floatingRef.current)) {
+        };
+    }, [panelMounted, trapFocus, triggerNode]);
+    React.useEffect(() => {
+        if (!panelMounted || !closeOnClickOutside)
+            return undefined;
+        const handlePointerDown = (e) => {
+            if (e === insidePointerRef.current || isEventInside(e, rootRef.current)) {
                 return;
             }
-            latestRef.current.onOpenChange(false);
+            close();
         };
+        // The wrapper is on the page whenever the panel is. Its document, an
+        // iframe's when the tree renders into one, is where presses land.
+        const doc = rootRef.current.ownerDocument;
         doc.addEventListener('pointerdown', handlePointerDown);
-        s.stopPress = () => doc.removeEventListener('pointerdown', handlePointerDown);
-    }, []);
-    useClientLayoutEffect(() => {
-        latestRef.current = options;
-        // The commit after an ask to open answers it, open or still closed. A
-        // tap that asked and still finds it closed was turned down.
-        const s = stateRef.current;
-        if (s.asked) {
-            s.asked = false;
-            if (!options.open)
-                s.tappedIn = undefined;
-            listenForEscape();
-        }
-    });
-    useClientLayoutEffect(() => {
-        const s = stateRef.current;
-        return () => {
-            clearTimeout(s.timer);
-            clearTimeout(s.askTimer);
-            s.opening = false;
-            s.asked = false;
-            s.releaseEscape?.();
-            s.releaseEscape = undefined;
-            s.stopPress?.();
-            s.stopPress = undefined;
-        };
-    }, []);
-    const { open } = options;
-    // Before paint, so a pointer or a key arriving next finds this settled.
-    useClientLayoutEffect(() => {
-        const s = stateRef.current;
-        if (!open) {
-            // The floating element left from under the pointer, if it was there,
-            // and no leave event says so. Focus resting on the trigger has done
-            // its job too, so neither opens it again until it comes back.
-            s.pointerIn = false;
-            s.focusIn = false;
-            s.tappedIn = undefined;
-            if (s.focusInFloating) {
-                s.focusInFloating = false;
-                const trigger = latestRef.current.triggerRef.current;
-                // Focus that went down with the floating element sits on <body>.
-                // Focus somewhere else was put there by the same update, so it stays.
-                if (trigger &&
-                    trigger.ownerDocument.activeElement === trigger.ownerDocument.body) {
-                    s.restoring = true;
-                    trigger.focus();
-                    s.restoring = false;
-                }
+        return () => doc.removeEventListener('pointerdown', handlePointerDown);
+    }, [panelMounted, closeOnClickOutside, close]);
+    const handlePanelKeyDown = (e) => {
+        if (e.key !== 'Escape' || !closeOnEscape || e.defaultPrevented)
+            return;
+        // React bubbles the key here from portaled content as well, so a dialog
+        // of its own on the way (a nested popover, a picker's calendar) owns it.
+        const owner = nearestDialog(e.nativeEvent);
+        if (owner && owner !== panelRef.current)
+            return;
+        e.preventDefault();
+        close();
+    };
+    const triggerProps = trigger.props;
+    const handleTriggerClick = (e) => {
+        triggerProps.onClick?.(e);
+        if (!e.defaultPrevented)
+            requestOpen(!isOpen);
+    };
+    const handleTriggerKeyDown = (e) => {
+        triggerProps.onKeyDown?.(e);
+        // A key on something inside the trigger is that element's to answer.
+        if (e.defaultPrevented || e.target !== e.currentTarget)
+            return;
+        if (e.key === 'Escape') {
+            if (isOpen && closeOnEscape) {
+                e.preventDefault();
+                close();
             }
+            return;
         }
-        settle();
-        listenForPress();
-    }, [open, settle, listenForPress]);
-    return React.useMemo(() => {
-        const inTrigger = (node) => within(latestRef.current.triggerRef.current, node);
-        return {
-            onPointerEnter: event => {
-                if (event.pointerType === 'touch')
-                    return;
-                stateRef.current.pointerIn = true;
-                settle();
-            },
-            onPointerLeave: event => {
-                // A touch pointer never set pointerIn, so its leave has nothing to
-                // clear, and on a device with a mouse too it would close a card the
-                // mouse is still holding open.
-                if (event.pointerType === 'touch')
-                    return;
-                stateRef.current.pointerIn = false;
-                settle();
-            },
-            onFocus: event => {
-                const s = stateRef.current;
-                // React brings focus here from the trigger and from the floating
-                // element's whole tree, portals included, so focus not in the
-                // trigger is in the floating element, wherever its DOM is.
-                s.focusInFloating = !inTrigger(event.target);
-                if (s.restoring)
-                    return;
-                // Any focus in the floating element holds it. On the trigger, only
-                // keyboard focus does, so a click there opens nothing.
-                s.focusIn = s.focusInFloating || isKeyboardFocus(event.target);
-                settle();
-            },
-            onBlur: event => {
-                const s = stateRef.current;
-                const next = event.relatedTarget;
-                // Where focus goes next, as far as the DOM can say. Focus going into
-                // content the floating element portals elsewhere reads as leaving,
-                // and the focus event that follows straight after brings it back.
-                s.focusInFloating = within(latestRef.current.floatingRef.current, next);
-                // Moving between the trigger and the floating element isn't leaving.
-                if (s.focusInFloating || within(event.currentTarget, next))
-                    return;
-                s.focusIn = false;
-                settle();
-            },
-            onPointerDown: event => {
-                stateRef.current.pressedInside = event.nativeEvent;
-            },
-            onPointerUp: event => {
-                const now = latestRef.current;
-                // With openOnTap, a tap on the trigger opens it at once, and the
-                // next one closes it. A tap anywhere else does nothing here.
-                if (!now.openOnTap ||
-                    event.pointerType !== 'touch' ||
-                    !inTrigger(event.target)) {
-                    return;
-                }
-                stateRef.current.tappedIn = now.open
-                    ? undefined
-                    : event.target.ownerDocument;
-                ask(!now.open);
-            },
-        };
-    }, [settle, ask]);
+        if (e.key !== 'Enter' && e.key !== ' ')
+            return;
+        if (handlesKeyItself(e.currentTarget, e.key))
+            return;
+        // Space would scroll the page; a held key repeats.
+        e.preventDefault();
+        if (!e.repeat)
+            requestOpen(!isOpen);
+    };
+    const needsButtonRole = typeof trigger.type === 'string' &&
+        !NATIVE_CONTROLS.has(trigger.type) &&
+        !(trigger.type === 'a' && triggerProps.href != null);
+    const clonedTrigger = React.cloneElement(trigger, {
+        ...(needsButtonRole
+            ? {
+                role: triggerProps.role ?? 'button',
+                tabIndex: triggerProps.tabIndex ?? 0,
+            }
+            : {}),
+        'aria-haspopup': 'dialog',
+        'aria-expanded': isOpen,
+        'aria-controls': panelMounted ? panelId : undefined,
+        onClick: handleTriggerClick,
+        onKeyDown: handleTriggerKeyDown,
+    });
+    const rootClasses = classNames(usePrefixedClassNames('popover', { 'is-active': isOpen }), bulmaHelperClasses, className);
+    const panelClasses = classNames(usePrefixedClassNames('popover-content', {
+        [`is-${resolved.position}`]: true,
+        'is-portal': appendToBody,
+    }), contentClassName);
+    return (jsxRuntime.jsxs("div", { className: rootClasses, ...rest, ref: rootRef, children: [clonedTrigger, isOpen && (jsxRuntime.jsx(Portal, { disabled: !appendToBody, children: jsxRuntime.jsx(PopoverPanel, { panelRef: panelRef, titleId: titleId, ariaLabel: ariaLabel, close: close, id: panelId, className: panelClasses, style: appendToBody
+                        ? {
+                            position: 'fixed',
+                            top: resolved.top,
+                            left: resolved.left,
+                        }
+                        : undefined, onKeyDown: handlePanelKeyDown, onPointerDownCapture: e => {
+                        insidePointerRef.current = e.nativeEvent;
+                    }, children: children }) }))] }));
+};
+/**
+ * The open panel. It mounts with each opening, so it counts the
+ * `Popover.Header`s inside it afresh every time.
+ */
+function PopoverPanel({ panelRef, titleId, ariaLabel, close, children, ...attrs }) {
+    // Headers register in a layout effect, after this first render, and this
+    // panel's own layout effect runs after theirs. Until then the panel assumes
+    // it has one, so a panel that does is named from its first commit, before
+    // focus moves in, and one that doesn't drops the reference before it paints.
+    const [titlesCounted, setTitlesCounted] = React.useState(false);
+    const [titleCount, setTitleCount] = React.useState(0);
+    const registerTitle = React.useCallback(() => {
+        setTitleCount(n => n + 1);
+        return () => setTitleCount(n => n - 1);
+    }, []);
+    useClientLayoutEffect(() => {
+        setTitlesCounted(true);
+    }, []);
+    const named = Boolean(ariaLabel) || titleCount > 0;
+    React.useEffect(() => {
+        if (titlesCounted && !named) {
+            warnOnce('Popover:unnamed', '[bestax-bulma] <Popover> opened a panel with no accessible name. ' +
+                'Pass ariaLabel, or render a Popover.Header inside it.');
+        }
+    }, [titlesCounted, named]);
+    const context = React.useMemo(() => ({ titleId, registerTitle, close }), [titleId, registerTitle, close]);
+    return (jsxRuntime.jsx(PopoverContext.Provider, { value: context, children: jsxRuntime.jsx("div", { ...attrs, ref: panelRef, role: "dialog", "aria-label": ariaLabel, "aria-labelledby": !ariaLabel && (!titlesCounted || titleCount > 0) ? titleId : undefined, tabIndex: -1, children: children }) }));
 }
+/**
+ * The popover's title, which names the panel for assistive technology.
+ *
+ * @function
+ * @param {PopoverHeaderProps} props - Props for the Popover.Header component.
+ * @returns {JSX.Element} The header element.
+ */
+const PopoverHeader = ({ className, ...props }) => {
+    const context = React.useContext(PopoverContext);
+    const registerTitle = context?.registerTitle;
+    // Before paint, so the panel is named by the time it shows.
+    useClientLayoutEffect(() => registerTitle?.(), [registerTitle]);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('popover-header'), bulmaHelperClasses, className), ...rest, id: context?.titleId }));
+};
+/**
+ * The popover's main content area.
+ *
+ * @function
+ * @param {PopoverBodyProps} props - Props for the Popover.Body component.
+ * @returns {JSX.Element} The body element.
+ */
+const PopoverBody = ({ className, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('popover-body'), bulmaHelperClasses, className), ...rest }));
+};
+/**
+ * A row of actions along the bottom of the popover, aligned to the end.
+ *
+ * @function
+ * @param {PopoverFooterProps} props - Props for the Popover.Footer component.
+ * @returns {JSX.Element} The footer element.
+ */
+const PopoverFooter = ({ className, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    return (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('popover-footer'), bulmaHelperClasses, className), ...rest }));
+};
+/**
+ * A `Button` that closes the popover, handing focus back to the trigger.
+ *
+ * @function
+ * @param {PopoverCloseProps} props - Props for the Popover.Close component.
+ * @returns {JSX.Element} The close button.
+ */
+const PopoverClose = ({ onClick, ...props }) => {
+    const context = React.useContext(PopoverContext);
+    return (jsxRuntime.jsx(Button, { ...props, type: buttonType(props.type), onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                context?.close();
+        } }));
+};
+/** Popover with Header, Body, Footer and Close sub-components. */
+const Popover = withSubComponents(PopoverComponent, {
+    Header: PopoverHeader,
+    Body: PopoverBody,
+    Footer: PopoverFooter,
+    Close: PopoverClose,
+}, 'Popover');
 
-/** Runs the caller's handler on the wrapper, then the hover card's. */
-function chain(own, ours) {
-    return event => {
-        own?.(event);
-        ours(event);
-    };
-}
 /**
  * The `HoverCard` component shows a card previewing what's behind a link or a button while the pointer rests on it or keyboard focus is on it.
  *
@@ -6429,7 +6465,7 @@ function chain(own, ours) {
  */
 const HoverCard = ({ trigger, children, open: controlledOpen, defaultOpen = false, onOpenChange, openDelay = 600, closeDelay = 300, position = 'bottom-left', appendToBody = false, openOnTap = false, className, contentClassName, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const { onPointerEnter, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, ...attrs } = rest;
+    const { onPointerEnter, onPointerOver, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, ...attrs } = rest;
     const rootRef = React.useRef(null);
     const cardRef = React.useRef(null);
     const cardId = `${React.useId()}-card`;
@@ -6502,7 +6538,7 @@ const HoverCard = ({ trigger, children, open: controlledOpen, defaultOpen = fals
         [`is-${resolved.position}`]: true,
         'is-portal': appendToBody,
     }), contentClassName);
-    return (jsxRuntime.jsxs("span", { className: rootClasses, ...attrs, onPointerEnter: chain(onPointerEnter, hover.onPointerEnter), onPointerLeave: chain(onPointerLeave, hover.onPointerLeave), onFocus: chain(onFocus, hover.onFocus), onBlur: chain(onBlur, hover.onBlur), onPointerDown: chain(onPointerDown, hover.onPointerDown), onPointerUp: chain(onPointerUp, hover.onPointerUp), ref: rootRef, children: [clonedTrigger, isOpen && (jsxRuntime.jsx(Portal, { disabled: !appendToBody, children: jsxRuntime.jsx("div", { ref: cardRef, id: cardId, className: cardClasses, style: appendToBody
+    return (jsxRuntime.jsxs("span", { className: rootClasses, ...attrs, onPointerEnter: chain$1(onPointerEnter, hover.onPointerEnter), onPointerOver: chain$1(onPointerOver, hover.onPointerOver), onPointerLeave: chain$1(onPointerLeave, hover.onPointerLeave), onFocus: chain$1(onFocus, hover.onFocus), onBlur: chain$1(onBlur, hover.onBlur), onPointerDown: chain$1(onPointerDown, hover.onPointerDown), onPointerUp: chain$1(onPointerUp, hover.onPointerUp), ref: rootRef, children: [clonedTrigger, isOpen && (jsxRuntime.jsx(Portal, { disabled: !appendToBody, children: jsxRuntime.jsx("div", { ref: cardRef, id: cardId, className: cardClasses, style: appendToBody
                         ? {
                             position: 'fixed',
                             top: resolved.top,
@@ -6511,6 +6547,570 @@ const HoverCard = ({ trigger, children, open: controlledOpen, defaultOpen = fals
                         : undefined, children: children }) }))] }));
 };
 
+// INTERNAL: deliberately not exported from src/index.ts.
+/** How long a touch or a pen has to stay down to open the menu, in milliseconds. */
+const LONG_PRESS_DELAY = 500;
+/** How far a long press can move before it counts as something else, in CSS pixels. */
+const LONG_PRESS_TOLERANCE = 10;
+/**
+ * The last press no trigger is to start a long press for: one a trigger
+ * took, or another pointer coming down while a press is held. A press
+ * reaches every trigger it bubbles through, the innermost first and all
+ * before the next press, so this is how a trigger around another one knows
+ * the inner one took it, and how a trigger a second finger lands on knows to
+ * leave it.
+ */
+let claimed = null;
+/** Whether the event happened in the element its handler is on, rather than in content portaled out of it. */
+const inTrigger = (event) => event.currentTarget.contains(event.target);
+/**
+ * Where a `contextmenu` asks to open: at its point when that is on the
+ * element it was fired at, which it is for the pointer, and at that
+ * element's bottom-left corner otherwise, which is where the browser puts
+ * its own menu for a key.
+ */
+function contextMenuPoint(event) {
+    const { clientX: x, clientY: y } = event;
+    const rect = event.target.getBoundingClientRect();
+    return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
+        ? { x, y }
+        : { x: rect.left, y: rect.bottom };
+}
+/**
+ * Decides when a context menu asks to open, and where. It renders nothing,
+ * and knows nothing about ARIA or the menu.
+ *
+ * - **`contextmenu`:** a right-click, and Shift+F10 or the context menu key
+ *   where the browser fires the event for them, asks to open at the point
+ *   `contextMenuPoint` works out, and prevents the browser's own menu. Each
+ *   one asks again, so a right-click elsewhere on the trigger moves it.
+ * - **Long press:** a touch or a pen held still on the trigger for
+ *   `LONG_PRESS_DELAY` fires a `contextmenu` at what it landed on, so it
+ *   takes the same path, handlers on the way included. Moving more than
+ *   `LONG_PRESS_TOLERANCE`, lifting, another pointer coming down anywhere in
+ *   the document, or `pointercancel`, which is the browser taking the
+ *   gesture for a scroll or a zoom, cancels it, and a mouse never starts
+ *   one. A pointer that comes down while another is held starts no long
+ *   press of its own, on this trigger or another, so two fingers on two rows
+ *   open nothing. While the finger is down, and only then, a listener on the
+ *   document hears other pointers coming down. Where the
+ *   browser fires `contextmenu` for a long press itself, the first of the two
+ *   opens it, and the end of a touch that opened it is prevented, so lifting
+ *   doesn't click what is under the finger.
+ * - **Who opens:** a handler that calls `preventDefault()` on the
+ *   `contextmenu` before this one keeps it from asking, which is how a
+ *   trigger's own handler opts out and how the innermost of nested triggers
+ *   wins. A long press goes to the innermost trigger that takes it. Events
+ *   from content portaled out of the trigger, which React brings here
+ *   anyway, are ignored.
+ * - **`disabled`:** nothing asks, and the browser's menu shows.
+ *
+ * Nothing it scheduled runs after the component unmounts.
+ *
+ * @function useContextMenuTrigger
+ * @param options - How to ask to open, and whether to.
+ * @returns Handlers for the trigger element.
+ */
+function useContextMenuTrigger({ onOpen, disabled, }) {
+    const pressRef = React.useRef(null);
+    /** A long press opened the menu, and the touch that made it hasn't ended. */
+    const heldRef = React.useRef(false);
+    const cancel = () => {
+        clearTimeout(pressRef.current?.timer);
+        pressRef.current?.stop();
+        pressRef.current = null;
+    };
+    React.useEffect(() => () => {
+        clearTimeout(pressRef.current?.timer);
+        pressRef.current?.stop();
+        pressRef.current = null;
+    }, []);
+    const isPress = (event) => pressRef.current?.pointerId === event.pointerId;
+    return {
+        onContextMenu: event => {
+            if (disabled || event.defaultPrevented || !inTrigger(event))
+                return;
+            event.preventDefault();
+            const press = pressRef.current;
+            if (press) {
+                if (press.opened)
+                    return;
+                clearTimeout(press.timer);
+                press.opened = true;
+                heldRef.current = true;
+            }
+            onOpen(contextMenuPoint(event), event.currentTarget);
+        },
+        onPointerDown: event => {
+            const native = event.nativeEvent;
+            if (disabled ||
+                (event.pointerType !== 'touch' && event.pointerType !== 'pen') ||
+                claimed === native ||
+                !inTrigger(event)) {
+                return;
+            }
+            claimed = native;
+            heldRef.current = false;
+            const target = event.target;
+            const doc = target.ownerDocument;
+            // Another pointer coming down anywhere makes it a pinch or a second
+            // touch, not a long press. In the capture phase, so it's heard before
+            // any trigger it lands on, which then leaves it. The press's own
+            // pointerdown has passed the document already, so it isn't heard.
+            const another = (other) => {
+                claimed = other;
+                cancel();
+            };
+            doc.addEventListener('pointerdown', another, true);
+            const press = {
+                pointerId: event.pointerId,
+                target,
+                x: event.clientX,
+                y: event.clientY,
+                opened: false,
+                stop: () => doc.removeEventListener('pointerdown', another, true),
+            };
+            press.timer = setTimeout(() => {
+                const view = press.target.ownerDocument.defaultView;
+                press.target.dispatchEvent(new view.MouseEvent('contextmenu', {
+                    bubbles: true,
+                    cancelable: true,
+                    composed: true,
+                    clientX: press.x,
+                    clientY: press.y,
+                    button: 2,
+                }));
+            }, LONG_PRESS_DELAY);
+            pressRef.current = press;
+        },
+        onPointerMove: event => {
+            const press = pressRef.current;
+            if (!press || !isPress(event) || press.opened)
+                return;
+            const moved = Math.hypot(event.clientX - press.x, event.clientY - press.y);
+            if (moved > LONG_PRESS_TOLERANCE)
+                cancel();
+        },
+        onPointerUp: event => {
+            if (isPress(event))
+                cancel();
+        },
+        onPointerCancel: event => {
+            if (isPress(event))
+                cancel();
+        },
+        onTouchEnd: event => {
+            if (!heldRef.current)
+                return;
+            heldRef.current = false;
+            event.preventDefault();
+        },
+    };
+}
+
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * Every menu-item role, so an item a caller gives `menuitemcheckbox` or
+ * `menuitemradio` (a filter or sort menu) stays reachable.
+ */
+const MENU_ITEM_SELECTOR = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
+/**
+ * Whether a menu item can be reached and activated: it isn't disabled, as a
+ * native control or through `aria-disabled="true"`.
+ */
+function isEnabledMenuItem(item) {
+    return (!item.hasAttribute('disabled') &&
+        item.getAttribute('aria-disabled') !== 'true');
+}
+/** Whether `node` is one of `menu`'s items, enabled or not. */
+const isItemOf = (menu, node) => Boolean(node && menu.contains(node) && node.matches(MENU_ITEM_SELECTOR));
+/** The items in `menu` the keys reach, in document order. */
+function enabledMenuItems(menu) {
+    return Array.from(menu.querySelectorAll(MENU_ITEM_SELECTOR)).filter(isEnabledMenuItem);
+}
+/** How long typed characters keep adding up to one search, in milliseconds. */
+const TYPEAHEAD_TIMEOUT = 500;
+/**
+ * Whether the browser activates `item` on this key by itself: a `<button>`
+ * answers Enter and Space, and a link with an `href` answers Enter.
+ */
+function activatesItself(item, key) {
+    if (item.tagName === 'BUTTON')
+        return true;
+    return key === 'Enter' && item.tagName === 'A' && item.hasAttribute('href');
+}
+/**
+ * The text typing finds an item by: what it says, without what's hidden from
+ * assistive technology, such as an icon whose glyph is a ligature's name.
+ */
+function label(item) {
+    let text = '';
+    const read = (node) => {
+        node.childNodes.forEach(child => {
+            if (child.nodeType === 3)
+                text += child.textContent;
+            else if (child.nodeType === 1 &&
+                child.getAttribute('aria-hidden') !== 'true') {
+                read(child);
+            }
+        });
+    };
+    read(item);
+    return text.trim().toLowerCase();
+}
+/**
+ * The item typing `search` moves to, or none. A single character looks from
+ * the item after the focused one, so typing the same letter again cycles
+ * through the items that start with it, and so does a run of one letter
+ * ("dd"). A longer search looks from the focused item, so typing more of
+ * its own text keeps it.
+ */
+function typeaheadMatch(items, search, current) {
+    const repeated = Array.from(search).every(char => char === search[0]);
+    const wanted = repeated ? search[0] : search;
+    const start = current < 0 ? 0 : current + (wanted.length === 1 ? 1 : 0);
+    for (let i = 0; i < items.length; i += 1) {
+        const item = items[(start + i) % items.length];
+        if (label(item).startsWith(wanted))
+            return item;
+    }
+    return undefined;
+}
+/**
+ * Moves through and activates the items of a `role="menu"` element from the
+ * keyboard. Put the `onKeyDown` it returns on that element. It reads the
+ * items from the element each time, so items that come and go are found,
+ * and it renders nothing.
+ *
+ * It acts only while focus is on the menu element itself or on one of its
+ * items, so anything else focusable inside the menu, such as a filter
+ * field, keeps its own keys.
+ *
+ * - Down and Up move to the next and previous enabled item, wrapping, and
+ *   Home and End go to the first and last. From no item, Down goes to the
+ *   first and Up to the last.
+ * - Enter and Space activate the focused item. A `<button>`, and a link with
+ *   an `href` for Enter, get the browser's own click, and anything else gets
+ *   one from here, so its `onClick` runs either way. A key held down
+ *   activates it once. A key handler on the item that called
+ *   `preventDefault()` has claimed the key, and nothing else runs it.
+ * - A printable character moves to the next enabled item whose text starts
+ *   with what has been typed. Characters typed within `TYPEAHEAD_TIMEOUT` of
+ *   each other add up to one search, until `reset` starts a new one.
+ *
+ * Items are `MENU_ITEM_SELECTOR` matches, and disabled ones are skipped by
+ * all of the above. Escape and Tab are left to the menu's owner, since what
+ * closing means is up to it, and so is any other key.
+ *
+ * @function useMenuKeys
+ * @returns The `keydown` handler for the menu element, and a way to forget
+ * what has been typed.
+ */
+function useMenuKeys() {
+    const typedRef = React.useRef({ text: '' });
+    React.useEffect(() => {
+        const typed = typedRef.current;
+        return () => clearTimeout(typed.timer);
+    }, []);
+    return React.useMemo(() => {
+        const reset = () => {
+            const typed = typedRef.current;
+            clearTimeout(typed.timer);
+            typed.text = '';
+        };
+        const onKeyDown = (event) => {
+            const menu = event.currentTarget;
+            const focused = getActiveElementInTree(menu);
+            if (focused !== menu && !isItemOf(menu, focused))
+                return;
+            const items = enabledMenuItems(menu);
+            if (!items.length)
+                return;
+            const current = items.indexOf(focused);
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    items[current >= 0 ? (current + 1) % items.length : 0].focus();
+                    return;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    items[current >= 0
+                        ? (current - 1 + items.length) % items.length
+                        : items.length - 1].focus();
+                    return;
+                case 'Home':
+                    event.preventDefault();
+                    items[0].focus();
+                    return;
+                case 'End':
+                    event.preventDefault();
+                    items[items.length - 1].focus();
+                    return;
+                case 'Enter':
+                case ' ': {
+                    if (current < 0 || event.defaultPrevented)
+                        return;
+                    const item = items[current];
+                    if (activatesItself(item, event.key)) {
+                        // The browser clicks on Enter's keydown, and a held key sends one
+                        // per auto-repeat. Space clicks on keyup, once however long it's
+                        // held.
+                        if (event.repeat && event.key === 'Enter')
+                            event.preventDefault();
+                        return;
+                    }
+                    // Space would scroll the page, and a held key repeats.
+                    event.preventDefault();
+                    if (!event.repeat)
+                        item.click();
+                    return;
+                }
+            }
+            if (event.key.length !== 1 ||
+                event.ctrlKey ||
+                event.metaKey ||
+                event.altKey ||
+                event.defaultPrevented) {
+                return;
+            }
+            event.preventDefault();
+            const typed = typedRef.current;
+            typed.text += event.key.toLowerCase();
+            clearTimeout(typed.timer);
+            typed.timer = setTimeout(reset, TYPEAHEAD_TIMEOUT);
+            typeaheadMatch(items, typed.text, current)?.focus();
+        };
+        return { onKeyDown, reset };
+    }, []);
+}
+
+/**
+ * Where the menu goes along one axis, from the point at `at`: after it when
+ * there's room, before it when there's room there instead, and otherwise
+ * moved in until it fits in `room`.
+ */
+function placeAlong(at, size, room) {
+    if (at + size <= room)
+        return { start: at, flip: false };
+    if (at - size >= 0)
+        return { start: at, flip: true };
+    return { start: Math.max(0, room - size), flip: false };
+}
+/** Runs the trigger's own handler, then the context menu's. */
+function chain(own, ours) {
+    return event => {
+        own?.(event);
+        ours(event);
+    };
+}
+/**
+ * The `ContextMenu` component opens a menu of actions where you right-click an element, such as a table row or a card, or long press it on a touch screen.
+ *
+ * Shift+F10 and the context menu key open it too, where the browser fires
+ * `contextmenu` for them, which Windows and Linux do. The menu is Dropdown's
+ * markup, portaled into the `portalContainer` a `ConfigProvider` sets, or
+ * the end of the trigger's own document's `<body>`, so it never has server
+ * markup. It opens below and to the right of the point, flips above or to
+ * the left where there's no room, moves in where it fits neither way, and
+ * scrolls inside when it's taller than the viewport. It doesn't follow the
+ * trigger, since scrolling closes it. Inside a `Modal` or a shadow root,
+ * point `portalContainer` inside it, so screen readers that honor
+ * `aria-modal` reach the menu and the shadow root's styles apply.
+ *
+ * Opening moves focus to the first enabled item. The arrow keys, Home, End
+ * and typing move between items, and Enter and Space activate one. Escape,
+ * Tab, an item, a press outside, scrolling, resizing and the window losing
+ * focus close it, handing focus back to what had it unless an item moved it
+ * somewhere else. For a menu opened from a button use `Dropdown`.
+ *
+ * @function
+ * @param {ContextMenuProps} props - Props for the ContextMenu component.
+ * @returns {JSX.Element} The trigger, and the menu while open.
+ *
+ * @example
+ * <ContextMenu
+ *   aria-label="Actions for report.pdf"
+ *   trigger={<Box>report.pdf</Box>}
+ * >
+ *   <ContextMenu.Item as="button">Rename</ContextMenu.Item>
+ *   <ContextMenu.Divider />
+ *   <ContextMenu.Item as="button">Delete</ContextMenu.Item>
+ * </ContextMenu>
+ */
+const ContextMenuComponent = ({ trigger, children, onOpenChange, closeOnClick = true, disabled = false, className, onKeyDown, onClick, onContextMenu, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const { portalContainer } = useConfig();
+    const [menu, setMenu] = React.useState(null);
+    // Turning `disabled` on closes it.
+    if (disabled && menu)
+        setMenu(null);
+    const open = menu !== null;
+    const doc = menu?.doc;
+    const placed = menu?.placed;
+    const boxRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const openerRef = React.useRef(null);
+    const reportedRef = React.useRef(false);
+    const menuKeys = useMenuKeys();
+    const named = Boolean(props['aria-label'] || props['aria-labelledby']);
+    const handlers = useContextMenuTrigger({
+        disabled,
+        onOpen: (point, triggerNode) => {
+            const ownerDoc = triggerNode.ownerDocument;
+            openerRef.current = getDeepestActiveElement(ownerDoc);
+            setMenu({ point, doc: ownerDoc });
+        },
+    });
+    // Measured once per opening, before it paints, against what a fixed box
+    // resolves against: the root element's client area, which leaves out a
+    // classic scrollbar. `useAnchoredPosition` and Tooltip read innerWidth and
+    // innerHeight, which count it. A menu pinned to the viewport's edge would
+    // sit under the scrollbar by that much, so this reads the narrower box.
+    useClientLayoutEffect(() => {
+        const menuNode = menuRef.current;
+        if (!menu || menu.placed || !menuNode)
+            return;
+        const root = menuNode.ownerDocument.documentElement;
+        const { width, height } = menuNode.getBoundingClientRect();
+        const x = placeAlong(menu.point.x, width, root.clientWidth);
+        const y = placeAlong(menu.point.y, height, root.clientHeight);
+        setMenu({
+            ...menu,
+            placed: { left: x.start, top: y.start, right: x.flip, up: y.flip },
+        });
+    }, [menu]);
+    const isPlaced = Boolean(placed);
+    // What closes it while it's open, and focus back on closing. Nothing
+    // listens while it's closed.
+    React.useEffect(() => {
+        const box = boxRef.current;
+        const menuNode = menuRef.current;
+        if (!doc || !box || !menuNode)
+            return undefined;
+        const view = doc.defaultView;
+        // What had focus when it opened. This runs once per opening, so opening
+        // again at a new point while it's open keeps it.
+        const opener = openerRef.current;
+        const close = () => setMenu(null);
+        const closeOutside = (event) => {
+            if (!isEventInside(event, box))
+                close();
+        };
+        doc.addEventListener('pointerdown', closeOutside, true);
+        view.addEventListener('resize', close);
+        view.addEventListener('blur', close);
+        return () => {
+            doc.removeEventListener('pointerdown', closeOutside, true);
+            view.removeEventListener('resize', close);
+            view.removeEventListener('blur', close);
+            // Back to what had focus while the menu still has it, or it dropped to
+            // <body> when the menu left. An item that put it somewhere else, such
+            // as a Modal or a rename field, keeps it there.
+            const now = getDeepestActiveElement(doc);
+            if (!now || now === doc.body || menuNode.contains(now))
+                opener?.focus();
+        };
+    }, [doc]);
+    // Focus in, and closing on scroll, once it's placed. Placed, it's inside
+    // the viewport, so its first item has nothing to scroll into view, and
+    // `preventScroll` makes sure: a scroll the focus caused would close it as
+    // it opened. Opening again at a new point places it again, and leaves
+    // focus where it is in the menu.
+    React.useEffect(() => {
+        const box = boxRef.current;
+        const menuNode = menuRef.current;
+        if (!doc || !isPlaced || !box || !menuNode)
+            return undefined;
+        if (!menuNode.contains(getDeepestActiveElement(doc))) {
+            menuKeys.reset();
+            (enabledMenuItems(menuNode)[0] ?? menuNode).focus({
+                preventScroll: true,
+            });
+        }
+        const closeOutside = (event) => {
+            if (!isEventInside(event, box))
+                setMenu(null);
+        };
+        doc.addEventListener('scroll', closeOutside, true);
+        return () => doc.removeEventListener('scroll', closeOutside, true);
+    }, [doc, isPlaced, menuKeys]);
+    // Before paint, so what the caller does with it, such as highlighting the
+    // row, shows with the menu rather than a frame behind it.
+    useClientLayoutEffect(() => {
+        if (open === reportedRef.current)
+            return;
+        reportedRef.current = open;
+        onOpenChange?.(open);
+    });
+    React.useEffect(() => {
+        if (open && !named) {
+            warnOnce('ContextMenu:unnamed', '[bestax-bulma] <ContextMenu> opened a menu with no accessible ' +
+                'name. Pass aria-label or aria-labelledby.');
+        }
+    }, [open, named]);
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        // The menu has the keyboard while focus is in it. React brings its keys
+        // up the tree to wherever the ContextMenu sits, where a table that moves
+        // between rows on the arrow keys, or a Popover or a Modal waiting for
+        // Escape, would take them too.
+        event.stopPropagation();
+        if (event.key === 'Escape' || event.key === 'Tab') {
+            // Tab would go on from the end of <body>, past the rest of the page.
+            event.preventDefault();
+            setMenu(null);
+            return;
+        }
+        menuKeys.onKeyDown(event);
+    };
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (!closeOnClick)
+            return;
+        const item = event.target.closest(MENU_ITEM_SELECTOR);
+        if (item && isEnabledMenuItem(item))
+            setMenu(null);
+    };
+    const handleContextMenu = (event) => {
+        onContextMenu?.(event);
+        // No other menu over this one: not the browser's, and not a trigger's
+        // that React brings the event up to.
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    const own = trigger.props;
+    const triggerClass = usePrefixedClassNames('context-menu');
+    const clonedTrigger = React.cloneElement(trigger, {
+        className: classNames(own.className, !disabled && triggerClass) || undefined,
+        onContextMenu: chain(own.onContextMenu, handlers.onContextMenu),
+        onPointerDown: chain(own.onPointerDown, handlers.onPointerDown),
+        onPointerMove: chain(own.onPointerMove, handlers.onPointerMove),
+        onPointerUp: chain(own.onPointerUp, handlers.onPointerUp),
+        onPointerCancel: chain(own.onPointerCancel, handlers.onPointerCancel),
+        onTouchEnd: chain(own.onTouchEnd, handlers.onTouchEnd),
+    });
+    const boxClasses = usePrefixedClassNames('context-menu-content', 'dropdown', {
+        'is-active': true,
+        'is-up': placed?.up,
+        'is-right': placed?.right,
+    });
+    const menuClasses = classNames(usePrefixedClassNames('dropdown-menu'), bulmaHelperClasses, className);
+    const contentClasses = usePrefixedClassNames('dropdown-content');
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [clonedTrigger, menu && (jsxRuntime.jsx(Portal, { container: portalContainer || menu.doc.body, children: jsxRuntime.jsx("div", { ref: boxRef, className: boxClasses, style: {
+                        top: placed?.top ?? menu.point.y,
+                        left: placed?.left ?? menu.point.x,
+                    }, children: jsxRuntime.jsx("div", { ...rest, ref: menuRef, role: "menu", tabIndex: -1, className: menuClasses, onKeyDown: handleKeyDown, onClick: handleClick, onContextMenu: handleContextMenu, children: jsxRuntime.jsx("div", { className: contentClasses, children: children }) }) }) }))] }));
+};
+/**
+ * ContextMenu with Item and Divider sub-components, which are `Dropdown.Item`
+ * and `Dropdown.Divider`, so items written for a Dropdown work here
+ * unchanged.
+ */
+const ContextMenu = withSubComponents(ContextMenuComponent, {
+    Item: DropdownItem,
+    Divider: DropdownDivider,
+}, 'ContextMenu');
+
 /**
  * Individual Step component for use inside Steps.
  *
@@ -6658,6 +7258,11 @@ const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');
  */
 const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left', width = '260px', isFullwidth, fullWidth, overlay = true, overlayClose = true, escapeClose = true, canCancel = true, children, inline = false, className, style, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const resolveContainer = usePortalContainer();
+    const { portalContainer } = useConfig();
+    // Where the configured default puts the sidebar. An `inline` one doesn't
+    // portal, so a change to the default moves nothing.
+    const defaultTarget = inline ? undefined : portalContainer;
     const sidebarRef = React.useRef(null);
     // Cleanup returned by a consumer's callback ref on attach, held until detach.
     const consumerCleanupRef = React.useRef(null);
@@ -6689,7 +7294,9 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
     // Prevent body scroll when sidebar is open. Ref-counted through the shared
     // helper so an overlapping Modal/Dialog/Loading doesn't unlock underneath.
     useScrollLock(isOpen && overlay);
-    // Focus trap (basic - focus sidebar when opened)
+    // Focus trap (basic - focus sidebar when opened). A different
+    // `defaultTarget` remounts the portaled sidebar, so it focuses the new
+    // nodes then too.
     React.useEffect(() => {
         if (isOpen) {
             const element = sidebarRef.current;
@@ -6704,7 +7311,7 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
                 }
             }
         }
-    }, [isOpen]);
+    }, [isOpen, defaultTarget]);
     // Use combined ref
     const combinedRef = React.useCallback((node) => {
         sidebarRef.current =
@@ -6759,7 +7366,7 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
     }
     // Render to portal for proper stacking
     if (typeof document !== 'undefined') {
-        return reactDom.createPortal(sidebarContent, document.body);
+        return reactDom.createPortal(sidebarContent, resolveContainer());
     }
     return null;
 });
@@ -6887,6 +7494,7 @@ function groupIntoPositionStacks(items, positionOf, containerPosition, order) {
  */
 const Toast = React.forwardRef(({ message, type = 'default', actionType, position = 'top-right', duration = 2000, indefinite = false, dismissible = true, closable = false, rounded = false, pauseOnHover = false, cancelable = true, actionText, cancelText, onAction, onClose, container, inline = false, className, ...props }, ref) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const resolveContainer = usePortalContainer();
     const [isVisible, setIsVisible] = React.useState(true);
     const [isPaused, setIsPaused] = React.useState(false);
     const toastRef = React.useRef(null);
@@ -7012,7 +7620,7 @@ const Toast = React.forwardRef(({ message, type = 'default', actionType, positio
     }
     const toastContent = jsxRuntime.jsx("div", { className: containerClasses, children: toastElement });
     if (typeof document !== 'undefined') {
-        return reactDom.createPortal(toastContent, resolvePortalContainer(container));
+        return reactDom.createPortal(toastContent, resolveContainer(container));
     }
     return null;
 });
@@ -7169,6 +7777,7 @@ const ToastContainer = ({ position = 'top-right' }) => {
     // Starts from the toasts already showing instead of an empty list, then
     // follows changes.
     const toastList = React.useSyncExternalStore(toast.subscribe, getVisibleToasts, getServerToasts);
+    const resolveContainer = usePortalContainer();
     if (typeof document === 'undefined' || toastList.length === 0) {
         return null;
     }
@@ -7176,7 +7785,7 @@ const ToastContainer = ({ position = 'top-right' }) => {
     return reactDom.createPortal(stacks.map(stack => (jsxRuntime.jsx("div", { className: `toast-container is-${stack.position}`, children: stack.items.map(t => {
             const { queue: _queue, ...toastProps } = t.props;
             return (jsxRuntime.jsx(Toast, { ...toastProps, position: stack.position, onClose: () => toast.close(t.id) }, t.id));
-        }) }, stack.key))), document.body);
+        }) }, stack.key))), resolveContainer());
 };
 
 /**
@@ -7233,11 +7842,14 @@ const Dialog = React.forwardRef(({ isOpen, title, message, type = 'default', con
             handleCancel();
         }
     }, [canCancel, handleCancel]);
-    // Moving into the portal remounts the Modal's subtree — these buttons
-    // included — so the focus effect below has to re-run against the new
-    // nodes, exactly as the Modal's own focus effect does.
+    // Moving into the portal, or from one portal target to another, remounts
+    // the Modal's subtree, these buttons included, so the focus effect below
+    // has to re-run against the new nodes, exactly as the Modal's own focus
+    // effect does, on the same inputs.
     const isHydrated = useIsHydrated();
     const isPortaled = Boolean(portal) && isHydrated;
+    const { portalContainer } = useConfig();
+    const defaultTarget = isPortaled && portal === true ? portalContainer : undefined;
     // Focus management — Dialog picks a specific button rather than the
     // Modal's default (first focusable/root); this effect runs after the
     // inner Modal's own focus-on-open effect, so it wins.
@@ -7246,7 +7858,7 @@ const Dialog = React.forwardRef(({ isOpen, title, message, type = 'default', con
             const buttonToFocus = focusCancel && showCancel ? cancelRef.current : confirmRef.current;
             buttonToFocus?.focus();
         }
-    }, [isOpen, focusCancel, showCancel, isPortaled]);
+    }, [isOpen, focusCancel, showCancel, isPortaled, portal, defaultTarget]);
     // Use combined ref
     const combinedRef = React.useCallback((node) => {
         dialogRef.current =
@@ -7993,6 +8605,58 @@ const Buttons = withSubComponents(ButtonsComponent, {
     LinkButton,
 }, 'Buttons');
 
+/**
+ * The `ToggleButton` component renders a button that stays pressed until it's pressed again, and says whether it's on through `aria-pressed`.
+ *
+ * It's always a `<button type="button">`, so it never submits a form and
+ * carries no form value: a setting saved with a form is a `Checkbox` or a
+ * `Switch`. A set of toggles that each turn on and off on their own goes in
+ * `Buttons hasAddons` with `role="group"` and an `aria-label`. A set where only
+ * one can be on is a radio group rather than a row of these: use `Radios`.
+ *
+ * @function
+ * @param {ToggleButtonProps} props - Props for the ToggleButton component.
+ * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
+ * @returns {JSX.Element} The rendered toggle button.
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ | APG button pattern}
+ *
+ * @example
+ * <ToggleButton onPressedChange={setMuted}>Mute</ToggleButton>
+ *
+ * @example
+ * <Buttons hasAddons role="group" aria-label="Text style">
+ *   <ToggleButton aria-label="Bold" pressed={bold} onPressedChange={setBold}>
+ *     <Icon name="bold" />
+ *   </ToggleButton>
+ * </Buttons>
+ */
+const ToggleButton = React.forwardRef(function ToggleButton({ pressed: controlledPressed, defaultPressed = false, onPressedChange, color = 'link', className, onClick, ...props }, ref) {
+    const isControlled = controlledPressed !== undefined;
+    const [internalPressed, setInternalPressed] = React.useState(defaultPressed);
+    const pressed = controlledPressed ?? internalPressed;
+    // Prefixed like Button's own classes, which a hand-written
+    // `className="is-selected"` could not be under ConfigProvider classPrefix.
+    // Bulma lifts `is-selected` above its neighbours in `.buttons.has-addons`.
+    const selectedClass = usePrefixedClassNames({ 'is-selected': pressed });
+    // The caller's onClick runs first, so a `preventDefault()` there vetoes
+    // the toggle, as it does in Radix, MUI and Zag. Enter and Space reach here
+    // through the button's own click, and a disabled button gets no click.
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        const next = !pressed;
+        onPressedChange?.(next);
+        if (!isControlled)
+            setInternalPressed(next);
+    };
+    // The props are spread first, so the four things a toggle depends on win
+    // over anything a JavaScript caller or a spread object passes along: it
+    // stays a button, never submits, and reports the state it's in.
+    return (jsxRuntime.jsx(Button, { ...props, ref: ref, as: "button", type: "button", "aria-pressed": pressed, color: pressed ? color : undefined, className: classNames(selectedClass, className), onClick: handleClick }));
+});
+ToggleButton.displayName = 'ToggleButton';
+
 /**
  * The `Code` component renders a styled `<code>` element with Bulma helper class integration.
  *
@@ -8881,6 +9545,7 @@ const NotificationContainer = ({ position = 'top-right' }) => {
     // the server render and the hydrating one render nothing, and the container
     // portals in from the render after hydration.
     const isHydrated = useIsHydrated();
+    const resolveContainer = usePortalContainer();
     // The notifications the status region announces. Danger and warning
     // announce themselves.
     const politeItems = React.useMemo(() => items.filter(item => !isUrgentColor(item.options.color)), [items]);
@@ -8913,7 +9578,7 @@ const NotificationContainer = ({ position = 'top-right' }) => {
         return null;
     }
     const stacks = groupIntoPositionStacks(items, item => item.options.position, position, notificationStackOrder);
-    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [stacks.map(stack => (jsxRuntime.jsx("div", { style: notificationStackStyle(stack.position), children: stack.items.map(item => (jsxRuntime.jsx(NotificationItem, { instance: item, onClose: notification.close, registerMessage: registerMessage }, item.id))) }, stack.key))), jsxRuntime.jsx(StatusRegion, { items: politeItems, describe: describe })] }), document.body);
+    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [stacks.map(stack => (jsxRuntime.jsx("div", { style: notificationStackStyle(stack.position), children: stack.items.map(item => (jsxRuntime.jsx(NotificationItem, { instance: item, onClose: notification.close, registerMessage: registerMessage }, item.id))) }, stack.key))), jsxRuntime.jsx(StatusRegion, { items: politeItems, describe: describe })] }), resolveContainer());
 };
 
 /**
@@ -12484,7 +13149,7 @@ const DEFAULT_PICKER_LABELS = {
     hours: 'hours',
     minutes: 'minutes',
     seconds: 'seconds',
-    ampm: 'ampm',
+    ampm: 'AM/PM',
     increaseHours: 'Increase hours',
     decreaseHours: 'Decrease hours',
     increaseMinutes: 'Increase minutes',
@@ -12503,11 +13168,19 @@ const DEFAULT_PICKER_LABELS = {
     done: 'Done',
     time: 'Time',
 };
-/** Merge user-supplied label overrides with the defaults. */
-const mergeLabels = (overrides) => ({
-    ...DEFAULT_PICKER_LABELS,
-    ...(overrides ?? {}),
-});
+/**
+ * Merge user-supplied label overrides with the defaults. A key set to
+ * `undefined` keeps its default, so a locale table that is missing a string
+ * still names its control instead of leaving it with no accessible name.
+ */
+const mergeLabels = (overrides) => {
+    const merged = { ...DEFAULT_PICKER_LABELS };
+    for (const [key, value] of Object.entries(overrides ?? {})) {
+        if (value !== undefined)
+            merged[key] = value;
+    }
+    return merged;
+};
 
 function isSameDay(a, b) {
     return (a.getFullYear() === b.getFullYear() &&
@@ -13840,6 +14513,7 @@ Calendar.displayName = 'Calendar';
 const isBrowser = typeof window !== 'undefined';
 const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'bottom-left', appendToBody = false, className, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, ariaLabelledBy, role = 'dialog', id, restoreFocusRef, initialFocusSelector, }) => {
     const panelRef = React.useRef(null);
+    const resolveContainer = usePortalContainer();
     // Read as the trap turns on, once the panel's content has rendered.
     const initialFocusRef = React.useMemo(() => initialFocusSelector === undefined
         ? undefined
@@ -13916,7 +14590,7 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
         : {};
     const panel = (jsxRuntime.jsx("div", { ref: panelRef, id: id, role: role, "aria-modal": role === 'dialog' ? 'false' : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, tabIndex: -1, className: classNames(panelClass, className), style: style, children: children }));
     if (appendToBody && isBrowser) {
-        return reactDom.createPortal(panel, document.body);
+        return reactDom.createPortal(panel, resolveContainer());
     }
     return panel;
 };
@@ -18428,6 +19102,7 @@ exports.Columns = Columns;
 exports.ConfigProvider = ConfigProvider;
 exports.Container = Container;
 exports.Content = Content;
+exports.ContextMenu = ContextMenu;
 exports.Control = Control;
 exports.DateInput = DateInput;
 exports.DateInputBase = DateInputBase;
@@ -18558,6 +19233,7 @@ exports.TimeInputBase = TimeInputBase;
 exports.Title = Title;
 exports.Toast = Toast;
 exports.ToastContainer = ToastContainer;
+exports.ToggleButton = ToggleButton;
 exports.Tooltip = Tooltip;
 exports.Tr = Tr;
 exports.UnorderedList = UnorderedList;