@allxsmith/bestax-bulma 5.27.8 → 5.29.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;
@@ -5087,6 +5122,7 @@ const isDetailsSummary = (el) => el.parentElement?.localName === 'details' &&
  * 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 isTabbableKind(el) {
     const tabindex = el.getAttribute('tabindex');
@@ -6014,6 +6050,502 @@ const Popover = withSubComponents(PopoverComponent, {
     Close: PopoverClose,
 }, 'Popover');
 
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * 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 isKeyboardFocus(el) {
+    try {
+        return el.matches(':focus-visible');
+    }
+    catch {
+        return true;
+    }
+}
+/** 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();
+    };
+}
+/**
+ * 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`.
+ * - 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.
+ *
+ * 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 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;
+        }
+        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);
+        },
+    });
+    // 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();
+            },
+            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]);
+}
+
+/** 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.
+ *
+ * Nothing moves focus when the card opens, and nothing traps it. In place,
+ * the card comes right after the trigger, so Tab goes from the trigger into
+ * its links and tabbing past them closes it. The pointer can move onto the
+ * card, Escape closes it from anywhere, and by default touch doesn't open it,
+ * so tapping the trigger just does what the trigger does. `openOnTap` opens
+ * it with a tap, for a trigger with no tap action of its own. For hints with nothing to
+ * click use `Tooltip`, and for content opened on purpose, such as a form,
+ * use `Popover`.
+ *
+ * @function
+ * @param {HoverCardProps} props - Props for the HoverCard component.
+ * @returns {JSX.Element} The trigger in its wrapper, and the card while open.
+ *
+ * @example
+ * <HoverCard trigger={<a href="/people/ada">Ada Lovelace</a>}>
+ *   <Title as="p" size="6">Ada Lovelace</Title>
+ *   <SubTitle as="p" size="6">Analytical Engine team</SubTitle>
+ * </HoverCard>
+ */
+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 rootRef = React.useRef(null);
+    const cardRef = React.useRef(null);
+    const cardId = `${React.useId()}-card`;
+    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]);
+    // A portaled card has no server markup, so it only exists from the commit
+    // after hydration, and nothing measures it before then.
+    const hydrated = useIsHydrated();
+    const cardMounted = isOpen && (hydrated || !appendToBody);
+    const resolved = useAnchoredPosition(rootRef, cardRef, {
+        active: cardMounted,
+        position,
+        fixed: appendToBody,
+        // The gap comes from `--bulma-hover-card-offset` in the stylesheet, so
+        // the coordinates leave it out and `auto` reads it off the card.
+        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 triggerRef = React.useMemo(() => ({
+        get current() {
+            const first = rootRef.current.firstElementChild;
+            return first && first !== cardRef.current
+                ? first
+                : null;
+        },
+    }), []);
+    const hover = useHoverOpen({
+        open: isOpen,
+        onOpenChange: requestOpen,
+        openDelay,
+        closeDelay,
+        triggerRef,
+        floatingRef: cardRef,
+        openOnTap,
+    });
+    // A trigger that can't take focus leaves keyboard users no way to open the
+    // card. It has to be the trigger element itself, not something inside it,
+    // since focus comes back to it and its ARIA is on it. Judged by what the
+    // element is rather than by its styles, which can hide it for now. After
+    // every commit, since the trigger can change, and only in development.
+    React.useEffect(() => {
+        if (!isDev())
+            return;
+        const triggerNode = triggerRef.current;
+        if (!triggerNode)
+            return;
+        if (!triggerNode.matches(':disabled') && isTabbableKind(triggerNode)) {
+            return;
+        }
+        warnOnce('HoverCard:unfocusable-trigger', "[bestax-bulma] <HoverCard> has a trigger that can't take focus, so " +
+            "keyboard users can't open the card. Use a link or a button as the " +
+            'trigger, or give it tabIndex={0}.');
+    });
+    // Expanded only while the card is on the page, so a portaled card that
+    // waits for hydration isn't announced before it exists.
+    const clonedTrigger = React.cloneElement(trigger, {
+        'aria-expanded': cardMounted,
+        'aria-controls': cardMounted ? cardId : undefined,
+    });
+    const rootClasses = classNames(usePrefixedClassNames('hover-card', { 'is-active': cardMounted }), bulmaHelperClasses, className);
+    const cardClasses = classNames(usePrefixedClassNames('hover-card-content', {
+        [`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
+                        ? {
+                            position: 'fixed',
+                            top: resolved.top,
+                            left: resolved.left,
+                        }
+                        : undefined, children: children }) }))] }));
+};
+
 /**
  * Individual Step component for use inside Steps.
  *
@@ -6161,6 +6693,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);
@@ -6192,7 +6729,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;
@@ -6207,7 +6746,7 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
                 }
             }
         }
-    }, [isOpen]);
+    }, [isOpen, defaultTarget]);
     // Use combined ref
     const combinedRef = React.useCallback((node) => {
         sidebarRef.current =
@@ -6262,7 +6801,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;
 });
@@ -6390,6 +6929,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);
@@ -6515,7 +7055,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;
 });
@@ -6672,6 +7212,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;
     }
@@ -6679,7 +7220,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());
 };
 
 /**
@@ -6736,11 +7277,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.
@@ -6749,7 +7293,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 =
@@ -8384,6 +8928,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]);
@@ -8416,7 +8961,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());
 };
 
 /**
@@ -13343,6 +13888,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
@@ -13419,7 +13965,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;
 };
@@ -17957,6 +18503,7 @@ exports.Hero = Hero;
 exports.HeroBody = HeroBody;
 exports.HeroFoot = HeroFoot;
 exports.HeroHead = HeroHead;
+exports.HoverCard = HoverCard;
 exports.Icon = Icon;
 exports.IconText = IconText;
 exports.Image = Image;