@allxsmith/bestax-bulma 5.59.0 → 5.61.0

package/dist/index.cjs

@@ -4603,6 +4603,33 @@ function usePortalContainer() {
     const { portalContainer } = useConfig();
     return container => resolvePortalContainer(container || portalContainer);
 }
+/**
+ * Reads Modal's `portal` prop (`boolean | string | HTMLElement`) for a
+ * component that takes it: whether the content is in its portal yet, and
+ * where it goes.
+ *
+ * A portal has no server-rendered counterpart, so such a component renders in
+ * place on the server and while hydrating, and moves into its portal once the
+ * client takes over. Render the content in `Portal` with
+ * `disabled={!isPortaled}` and this `container`. Moving remounts the content,
+ * so an effect that holds one of its nodes depends on `isPortaled`, `portal`
+ * and `defaultTarget`.
+ *
+ * @function usePortalProp
+ * @param portal - The component's `portal` prop.
+ * @returns Whether it's portaled now, its `container`, and the provider's
+ * target while that places it.
+ */
+function usePortalProp(portal) {
+    const hydrated = useIsHydrated();
+    const { portalContainer } = useConfig();
+    const isPortaled = Boolean(portal) && hydrated;
+    return {
+        isPortaled,
+        container: typeof portal === 'boolean' ? undefined : portal,
+        defaultTarget: isPortaled && portal === true ? portalContainer : undefined,
+    };
+}
 /**
  * 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.
  *
@@ -4728,6 +4755,37 @@ function useOverlayStack(inStack, modal = true) {
         return !above.some(overlay => among !== 'modal' || overlay.modal);
     }, []);
 }
+/**
+ * Calls `onEscape` for an Escape while `active` and the overlay is the
+ * topmost one, as `isTopmost` (from `useOverlayStack`) says, and marks the key
+ * used with `preventDefault()`, so nothing under it acts on it too.
+ *
+ * It listens on `window`, so everything inside the overlay has had the key
+ * first, and an Escape something there used, such as a popup closing, is
+ * left to it. The listener stays put while `onEscape` changes identity, as an
+ * inline one does on every render of the parent: it reads the latest one as
+ * the key arrives.
+ *
+ * @function useOverlayEscape
+ * @param active - Whether the overlay is open and closes on Escape.
+ * @param isTopmost - The overlay's check from `useOverlayStack`.
+ * @param onEscape - What closing it does.
+ */
+function useOverlayEscape(active, isTopmost, onEscape) {
+    const onEscapeRef = useLatestRef(onEscape);
+    React.useEffect(() => {
+        if (!active)
+            return undefined;
+        const handleKeyDown = (e) => {
+            if (e.key !== 'Escape' || e.defaultPrevented || !isTopmost())
+                return;
+            e.preventDefault();
+            onEscapeRef.current();
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [active, isTopmost, onEscapeRef]);
+}
 
 /**
  * Whether `el` is editable while its parent is not, which makes it an editing
@@ -5401,7 +5459,7 @@ const ModalClose = ({ className, size = 'large', variant = 'delete', onClick, ..
  * @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, portalContainer } = useConfig();
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -5447,20 +5505,15 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
     const previouslyFocusedRef = React.useRef(null);
     const generatedTitleId = React.useId();
     // A portal has no server-rendered counterpart, so the server render and the
-    // hydrating render have to stay inline and only move into the portal once
-    // we're past hydration.
-    const onClient = useIsHydrated();
-    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;
+    // hydrating render stay inline and only move into the portal once we're
+    // past hydration. 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 `isPortaled`, on `portal` and on `defaultTarget`, so
+    // they re-run against the new tree. `defaultTarget` is the configured
+    // `portalContainer` only while it places the modal (portaled with `portal`
+    // set to `true`), so a change to it that moves nothing re-runs nothing.
+    const { isPortaled, container, defaultTarget } = usePortalProp(portal);
     useScrollLock(isModalActive && lockScroll);
     // Read when Escape arrives, so the key listener stays put while `onClose`
     // changes identity, as an inline one does on every render of the parent.
@@ -5573,11 +5626,7 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
     }
     // In both forms, so a `Modal.Close` anywhere inside closes this modal.
     modalElement = (jsxRuntime.jsx(ModalCloseContext.Provider, { value: onClose, children: modalElement }));
-    if (isPortaled) {
-        const target = resolveContainer(typeof portal === 'boolean' ? undefined : portal);
-        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: modalElement }), target);
-    }
-    return modalElement;
+    return (jsxRuntime.jsx(Portal, { disabled: !isPortaled, container: container, children: modalElement }));
 });
 const Modal = withSubComponents(ModalRoot, {
     Background: ModalBackground,
@@ -5662,7 +5711,9 @@ const NavbarBurger = React.forwardRef(function NavbarBurger({ className, active,
     });
     return (jsxRuntime.jsxs("button", { ref: ref, className: classNames(usePrefixedClassNames('navbar-burger', {
             'is-active': active,
-        }), bulmaHelperClasses, className), ...rest, "aria-label": rest['aria-label'] || 'menu', "aria-expanded": rest['aria-expanded'] ?? !!active, type: buttonType(rest.type), children: [jsxRuntime.jsx("span", { "aria-hidden": "true" }), jsxRuntime.jsx("span", { "aria-hidden": "true" }), jsxRuntime.jsx("span", { "aria-hidden": "true" }), jsxRuntime.jsx("span", { "aria-hidden": "true" }), children] }));
+        }), bulmaHelperClasses, className), ...rest, "aria-label": rest['aria-label'] || 'menu', "aria-expanded": rest['aria-expanded'] === null
+            ? undefined
+            : (rest['aria-expanded'] ?? !!active), type: buttonType(rest.type), children: [jsxRuntime.jsx("span", { "aria-hidden": "true" }), jsxRuntime.jsx("span", { "aria-hidden": "true" }), jsxRuntime.jsx("span", { "aria-hidden": "true" }), jsxRuntime.jsx("span", { "aria-hidden": "true" }), children] }));
 });
 NavbarBurger.displayName = 'NavbarBurger';
 /**
@@ -6833,16 +6884,20 @@ const above = (el) => el.parentElement ?? el.getRootNode().host;
  * @param active - Whether what's beside it is inert.
  * @param wholePage - Whether that goes for the whole page rather than only
  * the element's siblings.
+ * @param except - Ref to an element beside it to leave reachable too, such
+ * as the overlay's own backdrop, which has to take the presses that close
+ * it rather than let them through to what's under it.
  */
-function useInertSiblings(ref, active, wholePage) {
+function useInertSiblings(ref, active, wholePage, except) {
     React.useEffect(() => {
         const el = ref.current;
         if (!active || !el)
             return undefined;
         const doc = el.ownerDocument;
+        const keep = except?.current;
         const held = [];
         for (let node = el; node && node !== doc.body; node = wholePage ? above(node) : undefined) {
-            held.push(...siblingsOf(node).filter(hold));
+            held.push(...siblingsOf(node).filter(sibling => sibling !== keep && hold(sibling)));
         }
         // Focus this takes away, to hand back later. It's looked up as `el`'s
         // tree sees it, where focus inside a nested shadow root reads as its
@@ -6857,7 +6912,7 @@ function useInertSiblings(ref, active, wholePage) {
             if (doc.activeElement === doc.body)
                 taken?.focus();
         };
-    }, [ref, active, wholePage]);
+    }, [ref, active, wholePage, except]);
 }
 
 /**
@@ -7953,6 +8008,51 @@ function useAnchoredPosition(anchorRef, panelRef, { active, position, fixed, off
     return resolved;
 }
 
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * Calls `onOutsidePress` for a `pointerdown` outside `ref`'s element while
+ * `active`, as a Popover closes on one.
+ *
+ * A press counts as inside in two ways: on the element's own path in the DOM,
+ * and anywhere in a React tree the returned handler is put on, as
+ * `onPointerDownCapture`. React's tree includes content portaled out of it,
+ * which the DOM path doesn't, and React has seen a press there by the time
+ * the document hears it.
+ *
+ * The listener is on the element's own document, an iframe's when the tree
+ * renders into one, and reads the latest `onOutsidePress` as a press
+ * arrives, so it stays put while the callback changes identity.
+ *
+ * @function useOutsidePress
+ * @param ref - Ref to the element a press inside of doesn't count.
+ * @param active - Whether to listen.
+ * @param onOutsidePress - Called with each press outside.
+ * @returns The `onPointerDownCapture` handler that marks a press in its tree
+ * as inside.
+ */
+function useOutsidePress(ref, active, onOutsidePress) {
+    // The last pointerdown React saw inside.
+    const insidePressRef = React.useRef(null);
+    const onOutsidePressRef = useLatestRef(onOutsidePress);
+    React.useEffect(() => {
+        const element = ref.current;
+        if (!active || !element)
+            return undefined;
+        const handlePointerDown = (e) => {
+            if (e === insidePressRef.current || isEventInside(e, ref.current)) {
+                return;
+            }
+            onOutsidePressRef.current(e);
+        };
+        const doc = element.ownerDocument;
+        doc.addEventListener('pointerdown', handlePointerDown);
+        return () => doc.removeEventListener('pointerdown', handlePointerDown);
+    }, [ref, active, onOutsidePressRef]);
+    return React.useCallback((event) => {
+        insidePressRef.current = event.nativeEvent;
+    }, []);
+}
+
 const PopoverContext = React.createContext(null);
 /** Intrinsic elements that are controls already, and keep their own role. */
 const NATIVE_CONTROLS = new Set([
@@ -8003,9 +8103,6 @@ const PopoverComponent = ({ trigger, children, open: controlledOpen, defaultOpen
     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`;
@@ -8061,25 +8158,10 @@ const PopoverComponent = ({ trigger, children, open: controlledOpen, defaultOpen
             }
         };
     }, [panelMounted, trapFocus, triggerNode]);
-    // Read when a press lands outside, so the listener stays put while `close`
-    // changes identity, which it does with `onOpenChange`, and an inline one
-    // changes on every render of the parent.
-    const closeRef = useLatestRef(close);
-    React.useEffect(() => {
-        if (!panelMounted || !closeOnClickOutside)
-            return undefined;
-        const handlePointerDown = (e) => {
-            if (e === insidePointerRef.current || isEventInside(e, rootRef.current)) {
-                return;
-            }
-            closeRef.current();
-        };
-        // 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, closeRef]);
+    // A press outside the wrapper, which holds the trigger and the panel,
+    // closes it. One inside the panel's React tree counts as inside, so content
+    // the panel portals elsewhere does too.
+    const markInsidePress = useOutsidePress(rootRef, panelMounted && closeOnClickOutside, close);
     const handlePanelKeyDown = (e) => {
         if (e.key !== 'Escape' || !closeOnEscape || e.defaultPrevented)
             return;
@@ -8145,9 +8227,7 @@ const PopoverComponent = ({ trigger, children, open: controlledOpen, defaultOpen
                             top: resolved.top,
                             left: resolved.left,
                         }
-                        : undefined, onKeyDown: handlePanelKeyDown, onPointerDownCapture: e => {
-                        insidePointerRef.current = e.nativeEvent;
-                    }, children: children }) }))] }));
+                        : undefined, onKeyDown: handlePanelKeyDown, onPointerDownCapture: markInsidePress, children: children }) }))] }));
 };
 /**
  * The open panel. It mounts with each opening, so it counts the
@@ -9275,6 +9355,69 @@ const TimelineRoot = React.forwardRef(({ className, children, active, pending, a
 });
 const Timeline = withSubComponents(TimelineRoot, { Item: TimelineItem }, 'Timeline');
 
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * Moves focus into an overlay as it opens, to the first stop Tab wraps to
+ * inside `ref`'s element or the element itself, and hands it back to
+ * whatever had it as it closes, as `Modal` does. Focus goes back only while
+ * the overlay still holds it, or it's been dropped to `<body>`: closing one
+ * under another overlay mustn't pull focus out of the one on top, and focus
+ * moved out to the page stays there. The opener is found wherever it sits,
+ * inside a shadow root too, in the overlay's own document, an iframe's when
+ * it renders into one. It's read in a layout effect as the overlay opens, so
+ * before the commit's passive effects, such as one that makes the page
+ * inert. Content inside the overlay with a layout effect of its own, or an
+ * `autoFocus`, can still move focus first, and then there's no opener to go
+ * back to: focus is never handed back into the overlay that's closing.
+ *
+ * @function useOverlayFocus
+ * @param ref - Ref to the overlay's element.
+ * @param open - Whether the overlay is open.
+ * @param options - Whether it's modal, what remounts it, and whether a
+ * close hands focus back.
+ */
+function useOverlayFocus(ref, open, { modal, remountKey, restore }) {
+    const openerRef = React.useRef(null);
+    const restoreRef = useLatestRef(restore);
+    // The element that had focus, wherever it sits: a portaled overlay renders
+    // under `document.body` while its opener can be inside a shadow root.
+    useClientLayoutEffect(() => {
+        if (!open)
+            return;
+        const element = ref.current;
+        /* istanbul ignore if: as below, the ref is set while the overlay is open */
+        if (!element)
+            return;
+        // Focus already inside, where an `autoFocus` in the overlay puts it, has
+        // no opener to go back to.
+        openerRef.current = element.contains(getActiveElementInTree(element))
+            ? null
+            : getDeepestActiveElement(element.ownerDocument);
+    }, [open, ref]);
+    React.useEffect(() => {
+        if (!open)
+            return undefined;
+        const element = ref.current;
+        /* istanbul ignore if: the overlay renders whenever it's open, so its ref is set before this runs */
+        if (!element)
+            return undefined;
+        if (modal || !isModalOverlayOpen()) {
+            focusTabStop(element);
+        }
+        return () => {
+            // A removed subtree leaves focus on <body>, which still counts as held.
+            const active = getActiveElementInTree(element);
+            const held = active === element.ownerDocument.body || element.contains(active);
+            // Asked now rather than as it opened: it's about this close.
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            if (held && (restoreRef.current?.() ?? true)) {
+                openerRef.current?.focus();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- `modal` is read as the overlay opens, on purpose
+    }, [open, remountKey, ref, restoreRef]);
+}
+
 /**
  * The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.
  *
@@ -9324,31 +9467,15 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
             handleClose();
         }
     }, [overlayClose, handleClose]);
-    // Read when Escape arrives, so the key listener stays put while
-    // `onClose` changes identity, as an inline one does on every render of
-    // the parent.
-    const handleCloseRef = useLatestRef(handleClose);
     // Joins the stack of open overlays, so the sidebar answers Escape only
     // while it's the topmost overlay, and keeps it from those under it. It's
     // modal with an overlay: without one it leaves Tab to a modal overlay
     // under it.
     const isTopmost = useOverlayStack(isOpen, overlay);
     const closesOnEscape = escapeClose && canCancel && Boolean(onClose);
-    // Handle escape key. On `window`, as in `Modal`, so everything inside the
-    // sidebar has had the key first, and an Escape it used is left to it. One
-    // the sidebar closes on is marked used, so nothing under it acts on it.
-    React.useEffect(() => {
-        if (!isOpen || !closesOnEscape)
-            return;
-        const handleKeyDown = (e) => {
-            if (e.key !== 'Escape' || e.defaultPrevented || !isTopmost())
-                return;
-            e.preventDefault();
-            handleCloseRef.current();
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [isOpen, closesOnEscape, handleCloseRef, isTopmost]);
+    // Escape closes it, on `window`, as in `Modal`, so everything inside the
+    // sidebar has had the key first, and an Escape it used is left to it.
+    useOverlayEscape(isOpen && closesOnEscape, isTopmost, handleClose);
     // Keep Tab inside while there's an overlay, as `Modal` does:
     // `aria-modal` hides the rest of the page from assistive technology, so
     // the keyboard order has to agree. Only while it's the topmost modal
@@ -9371,41 +9498,17 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
     useScrollLock(isOpen && overlay);
     // Move focus into the sidebar on open, to the first stop Tab wraps to or
     // the sidebar itself, and hand it back on close, as `Modal` does. A
-    // different `defaultTarget` remounts the portaled sidebar: the cleanup
-    // hands focus back from the old nodes, which left it on <body>, and the
-    // re-run records the same opener and focuses the new nodes. Whether it
-    // takes focus is decided as it opens, so `overlay` changing while it's
-    // open leaves focus where the user has it.
-    React.useEffect(() => {
-        if (!isOpen)
-            return undefined;
-        const element = sidebarRef.current;
-        /* istanbul ignore if: the aside renders whenever the sidebar is open, so its ref is set before this runs */
-        if (!element)
-            return undefined;
-        // The element that had focus, wherever it sits: a portaled sidebar
-        // renders under `document.body` while its opener can be inside a
-        // shadow root.
-        const opener = getDeepestActiveElement();
-        // Without an overlay the sidebar holds no Tab, so with a modal overlay
-        // open under it, the first Tab would take focus back there and leave
-        // the sidebar's other controls out of reach. It leaves focus alone
-        // then, and the cleanup below finds focus outside and leaves it too.
-        if (overlay || !isModalOverlayOpen()) {
-            focusTabStop(element);
-        }
-        return () => {
-            // Only while the sidebar still holds focus: closing one under another
-            // overlay mustn't pull focus out of the one on top, and focus moved
-            // out to the page stays there. A removed subtree leaves focus on
-            // <body>, which still counts as held.
-            const active = getActiveElementInTree(element);
-            if (active === document.body || element.contains(active)) {
-                opener?.focus();
-            }
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- `overlay` is read as the sidebar opens, on purpose
-    }, [isOpen, defaultTarget]);
+    // different `defaultTarget` remounts the portaled sidebar: focus is handed
+    // back from the old nodes and moved into the new ones. Whether it takes
+    // focus is decided as it opens, so `overlay` changing while it's open
+    // leaves focus where the user has it. Without an overlay the sidebar holds
+    // no Tab, so with a modal overlay open under it, it leaves focus alone:
+    // the first Tab would take focus back there and leave the sidebar's other
+    // controls out of reach.
+    useOverlayFocus(sidebarRef, isOpen, {
+        modal: overlay,
+        remountKey: defaultTarget,
+    });
     // Use combined ref
     const combinedRef = React.useCallback((node) => {
         sidebarRef.current =
@@ -9967,10 +10070,7 @@ const Dialog = React.forwardRef(({ isOpen, title, message, type = 'default', con
     // 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;
+    const { isPortaled, defaultTarget } = usePortalProp(portal);
     // 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.
@@ -10132,6 +10232,81 @@ const DialogContainer = () => {
     return (jsxRuntime.jsx(Dialog, { isOpen: true, title: options.title, message: options.message, type: options.type, confirmText: options.confirmText, cancelText: options.cancelText, icon: options.icon, showCancel: type === 'confirm', focusCancel: options.focusCancel, onConfirm: () => dialog.close(type === 'confirm' ? true : undefined), onCancel: () => dialog.close(type === 'confirm' ? false : undefined) }));
 };
 
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * The media queries Bulma's `fullhd`, `widescreen`, `desktop` and `tablet`
+ * mixins open with, widest first, at Bulma's default breakpoints. A
+ * stylesheet lays a component out with those mixins; these tell its script
+ * which layout that is. A theme that moves Bulma's breakpoints moves the
+ * stylesheet's switch but not these. Narrower than the last one is `mobile`.
+ */
+const VIEWPORT_QUERIES = [
+    'screen and (min-width: 1408px)',
+    'screen and (min-width: 1216px)',
+    'screen and (min-width: 1024px)',
+    'screen and (min-width: 769px), print',
+];
+/** `useBulmaViewport`'s answer below the tablet breakpoint. */
+const MOBILE = VIEWPORT_QUERIES.length;
+/** Where Bulma's `widescreen`, `desktop` and `tablet` sit in `VIEWPORT_QUERIES`. */
+const VIEWPORT_INDEX = {
+    widescreen: 1,
+    desktop: 2,
+    tablet: 3,
+};
+/**
+ * Which of Bulma's viewports the window is in: the index of the widest
+ * `VIEWPORT_QUERIES` entry that matches, `MOBILE` below them all, or `-1`
+ * when that isn't known (on the server, before the first layout effect, and
+ * whenever `enabled` is off, so a caller that needs no answer subscribes to
+ * nothing). It's read in a layout effect, so the first paint after hydration
+ * already has it.
+ *
+ * @function useBulmaViewport
+ * @param enabled - Whether the caller needs the viewport at all.
+ * @returns The viewport, as described above.
+ */
+function useBulmaViewport(enabled) {
+    const [viewport, setViewport] = React.useState(-1);
+    useClientLayoutEffect(() => {
+        if (!enabled || typeof window.matchMedia !== 'function')
+            return undefined;
+        const lists = VIEWPORT_QUERIES.map(query => window.matchMedia(query));
+        const update = () => {
+            const index = lists.findIndex(list => list.matches);
+            setViewport(index < 0 ? MOBILE : index);
+        };
+        update();
+        lists.forEach(list => list.addEventListener('change', update));
+        return () => lists.forEach(list => list.removeEventListener('change', update));
+    }, [enabled]);
+    return enabled ? viewport : -1;
+}
+/**
+ * Whether the window is at or past one of Bulma's breakpoints, at its default
+ * width, through the one media query Bulma's mixin for it opens with, so a
+ * caller re-renders only when the window crosses that breakpoint. `null`
+ * until it's known: on the server, and before the first layout effect. Where
+ * `matchMedia` isn't there, it's `true`, the wide layout a server renders.
+ *
+ * @function useBulmaBreakpoint
+ * @param breakpoint - The breakpoint: `tablet`, `desktop` or `widescreen`.
+ * @returns Whether the window is at or past it, or `null`.
+ */
+function useBulmaBreakpoint(breakpoint) {
+    const [atOrPast, setAtOrPast] = React.useState(null);
+    useClientLayoutEffect(() => {
+        const list = typeof window.matchMedia === 'function'
+            ? window.matchMedia(VIEWPORT_QUERIES[VIEWPORT_INDEX[breakpoint]])
+            : null;
+        const update = () => setAtOrPast(list ? list.matches : true);
+        update();
+        list?.addEventListener('change', update);
+        return () => list?.removeEventListener('change', update);
+    }, [breakpoint]);
+    return atOrPast;
+}
+
 /**
  * Individual carousel item/slide.
  *
@@ -10159,24 +10334,10 @@ const DefaultPrevIcon = () => (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org
  * @returns {JSX.Element} The rendered SVG chevron-right icon.
  */
 const DefaultNextIcon = () => (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" }) }));
-/**
- * The media queries Bulma's `fullhd`, `widescreen`, `desktop` and `tablet`
- * mixins open with, widest first, at Bulma's default breakpoints. The
- * stylesheet picks the count in view with those mixins; these tell the
- * script which count that is. Narrower than the last one is `mobile`.
- */
-const VIEWPORT_QUERIES = [
-    'screen and (min-width: 1408px)',
-    'screen and (min-width: 1216px)',
-    'screen and (min-width: 1024px)',
-    'screen and (min-width: 769px), print',
-];
-/** `useBulmaViewport`'s answer below the tablet breakpoint. */
-const MOBILE = VIEWPORT_QUERIES.length;
 /**
  * The `--bulma-carousel-items-to-show*` variable each count prop writes, in
- * the order the component lists them: the viewports as above, mobile, and
- * last `itemsToShow` itself.
+ * the order the component lists them: `useBulmaViewport`'s viewports, widest
+ * first, then mobile, and last `itemsToShow` itself.
  */
 const COUNT_SUFFIXES = [
     '-fullhd',
@@ -10186,33 +10347,6 @@ const COUNT_SUFFIXES = [
     '-mobile',
     '',
 ];
-/**
- * Which of Bulma's viewports the window is in: the index of the widest
- * `VIEWPORT_QUERIES` entry that matches, `MOBILE` below them all, or `-1`
- * when that isn't known (on the server, before the first layout effect, and
- * whenever `enabled` is off, so a carousel with one count everywhere
- * subscribes to nothing).
- *
- * @function
- * @param {boolean} enabled - Whether any viewport-specific count is set.
- * @returns {number} The viewport, as described above.
- */
-function useBulmaViewport(enabled) {
-    const [viewport, setViewport] = React.useState(-1);
-    useClientLayoutEffect(() => {
-        if (!enabled || typeof window.matchMedia !== 'function')
-            return undefined;
-        const lists = VIEWPORT_QUERIES.map(query => window.matchMedia(query));
-        const update = () => {
-            const index = lists.findIndex(list => list.matches);
-            setViewport(index < 0 ? MOBILE : index);
-        };
-        update();
-        lists.forEach(list => list.addEventListener('change', update));
-        return () => lists.forEach(list => list.removeEventListener('change', update));
-    }, [enabled]);
-    return enabled ? viewport : -1;
-}
 /**
  * A count prop as the whole number the carousel works with: rounded down,
  * and never below 1, so a zero or a stray `NaN` can't divide by nothing.
@@ -13110,7 +13244,7 @@ const standalone$2 = {
 const CommandContext = React.createContext(null);
 const useCommand = () => React.useContext(CommandContext) ?? standalone$2;
 /** Hands a node to a forwarded ref and to one of the component's own. */
-function setRefs$2(node, own, forwarded) {
+function setRefs$3(node, own, forwarded) {
     own.current = node;
     if (typeof forwarded === 'function')
         forwarded(node);
@@ -13227,7 +13361,7 @@ const CommandParts = React.forwardRef(({ children, label, query: controlledQuery
         registerHandler,
     };
     const { rootRef } = engine;
-    const rootRefs = React.useCallback((node) => setRefs$2(node, rootRef, ref), [rootRef, ref]);
+    const rootRefs = React.useCallback((node) => setRefs$3(node, rootRef, ref), [rootRef, ref]);
     return (jsxRuntime.jsxs("div", { className: classNames(rootClass, bulmaHelperClasses, className), ...rest, ref: rootRefs, children: [jsxRuntime.jsx(CommandContext.Provider, { value: context, children: children }), jsxRuntime.jsx(StatusRegion, { items: announced, describe: describeEmpty })] }));
 });
 CommandParts.displayName = 'CommandParts';
@@ -13247,7 +13381,7 @@ const CommandInput = React.forwardRef(({ isLoading, iconLeft, iconLeftName, onKe
         return () => reportLoading(false);
     }, [reportLoading, isLoading]);
     const { inputRef } = engine;
-    const inputRefs = React.useCallback((node) => setRefs$2(node, inputRef, ref), [inputRef, ref]);
+    const inputRefs = React.useCallback((node) => setRefs$3(node, inputRef, ref), [inputRef, ref]);
     const { expanded, highlighted } = engine;
     // A name the caller gave the field wins over the Command's `label`.
     const callerNamed = !!props['aria-label'] || 'aria-labelledby' in props;
@@ -14624,6 +14758,42 @@ const DataTable = React.forwardRef(function DataTableRender({ columns, data, tab
 });
 DataTable.displayName = 'DataTable';
 
+/**
+ * The `Affix` component keeps its content fixed to a corner of the viewport while the page scrolls under it.
+ *
+ * It's a `<div>` with no role, so what's inside keeps its own. It sits
+ * `--bulma-affix-offset-vertical` and `--bulma-affix-offset-horizontal`
+ * from its corner's edges, plus the device's safe-area inset, and stacks at
+ * `--bulma-affix-z-index`, over the page's content and under its navbar,
+ * static or fixed, its menus, popovers, the Sidebar, the modals, Tooltip and
+ * Toast. It's as wide as its
+ * content and never wider than the viewport less its offsets. It doesn't
+ * scroll, so nothing inside it is clipped, and content that can be taller
+ * than the screen scrolls itself. Its place in the reading and Tab order is
+ * its place in the DOM, whatever corner it shows in.
+ *
+ * @function
+ * @param {AffixProps} props - Props for the Affix component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `<div>`.
+ * @returns The `<div>`, in place or in its portal.
+ *
+ * @example
+ * <Affix position="bottom-left">
+ *   <Button color="primary">Feedback</Button>
+ * </Affix>
+ */
+const Affix = React.forwardRef(({ position = 'bottom-right', portal = false, className, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const affixClasses = usePrefixedClassNames('affix', {
+        [`is-${position}`]: true,
+    });
+    // In place on the server and while hydrating, then into the portal, as
+    // Modal does. The move remounts the `<div>`.
+    const { isPortaled, container } = usePortalProp(portal);
+    return (jsxRuntime.jsx(Portal, { disabled: !isPortaled, container: container, children: jsxRuntime.jsx("div", { ref: ref, className: classNames(affixClasses, bulmaHelperClasses, className), ...rest, children: children }) }));
+});
+Affix.displayName = 'Affix';
+
 /**
  * The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
  *
@@ -18740,7 +18910,7 @@ const standalone$1 = {
 const ComboboxContext = React.createContext(null);
 const useCombobox = () => React.useContext(ComboboxContext) ?? standalone$1;
 /** Hands a node to a forwarded ref and to one of the component's own. */
-function setRefs$1(node, own, forwarded) {
+function setRefs$2(node, own, forwarded) {
     own.current = node;
     if (typeof forwarded === 'function')
         forwarded(node);
@@ -18872,7 +19042,7 @@ const ComboboxParts = React.forwardRef(({ children, below, onSettle, open, defau
         appendToBody,
     };
     const { rootRef } = engine;
-    const rootRefs = React.useCallback((node) => setRefs$1(node, rootRef, ref), [rootRef, ref]);
+    const rootRefs = React.useCallback((node) => setRefs$2(node, rootRef, ref), [rootRef, ref]);
     const comboboxElement = (jsxRuntime.jsxs("div", { className: classNames(rootClass, bulmaHelperClasses, className), ...rest, ref: rootRefs, children: [jsxRuntime.jsx(ComboboxContext.Provider, { value: context, children: children }), jsxRuntime.jsx(StatusRegion, { items: announced, describe: describeEmpty })] }));
     const fieldElement = below === undefined ? (comboboxElement) : (jsxRuntime.jsxs("div", { children: [comboboxElement, jsxRuntime.jsx("div", { onPointerDownCapture: engine.markInside, onMouseDown: engine.keepFocus, children: below })] }));
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
@@ -18905,7 +19075,7 @@ const ComboboxInput = React.forwardRef(({ id, isLoading, controlSize, onKeyDown,
         return () => reportLoading(false);
     }, [reportLoading, isLoading]);
     const { inputRef } = engine;
-    const inputRefs = React.useCallback((node) => setRefs$1(node, inputRef, ref), [inputRef, ref]);
+    const inputRefs = React.useCallback((node) => setRefs$2(node, inputRef, ref), [inputRef, ref]);
     const { expanded, highlighted } = engine;
     // An `id` of the field's own reaches the label from a layout effect, so
     // in server markup, and the first render, the label's `for` still names
@@ -20202,7 +20372,7 @@ const rgbChannels = (color) => {
 /** Whether a press should start a drag: any touch or pen, a mouse's main button. */
 const startsDrag = (event) => event.pointerType !== 'mouse' || event.button === 0;
 /** Hands a node to a forwarded ref and to one of the part's own. */
-function setRefs(node, own, forwarded) {
+function setRefs$1(node, own, forwarded) {
     own.current = node;
     if (typeof forwarded === 'function')
         forwarded(node);
@@ -20334,7 +20504,7 @@ const ColorPickerArea = React.forwardRef(({ className, style, ...props }, ref) =
     const hiddenOf = (which) => touch || keyed || axis === which ? undefined : true;
     if (!picker)
         return null;
-    return (jsxRuntime.jsx("div", { ref: node => setRefs(node, rootRef, ref), className: classNames(areaClass, bulmaHelperClasses, className), style: {
+    return (jsxRuntime.jsx("div", { ref: node => setRefs$1(node, rootRef, ref), className: classNames(areaClass, bulmaHelperClasses, className), style: {
             ...style,
             '--color-picker-hue': Math.round(color.h),
             '--color-picker-rgb': rgbChannels(color),
@@ -20408,7 +20578,7 @@ const ChannelSlider = React.forwardRef(({ channel, className, style, ...props },
     };
     if (!picker)
         return null;
-    return (jsxRuntime.jsxs("div", { ref: node => setRefs(node, rootRef, ref), className: classNames(sliderClass, bulmaHelperClasses, className), style: {
+    return (jsxRuntime.jsxs("div", { ref: node => setRefs$1(node, rootRef, ref), className: classNames(sliderClass, bulmaHelperClasses, className), style: {
             ...style,
             '--color-picker-hue': Math.round(color.h),
             '--color-picker-rgb': rgbChannels(color),
@@ -20532,7 +20702,7 @@ const ColorPickerSwatches = React.forwardRef(({ className, swatches: ownSwatches
     };
     if (!picker || list.length === 0)
         return null;
-    return (jsxRuntime.jsx("div", { ref: node => setRefs(node, rootRef, ref), className: classNames(groupClass, bulmaHelperClasses, className), role: "radiogroup", "aria-label": labels.swatches, "aria-disabled": disabled || undefined, ...rest, children: list.map((entry, i) => {
+    return (jsxRuntime.jsx("div", { ref: node => setRefs$1(node, rootRef, ref), className: classNames(groupClass, bulmaHelperClasses, className), role: "radiogroup", "aria-label": labels.swatches, "aria-disabled": disabled || undefined, ...rest, children: list.map((entry, i) => {
             const swatch = colorOf(i);
             const isChecked = i === checked;
             // The check is drawn in black or white with a ring of the other, so
@@ -26960,6 +27130,421 @@ function ClientOnly({ children, fallback = null }) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: typeof children === 'function' ? children() : children });
 }
 
+const FrameContext = React.createContext(null);
+/** A width prop as CSS: a number is pixels. */
+const cssLength = (value) => typeof value === 'number' ? `${value}px` : value;
+/**
+ * Hands `node` to a part's own ref and to the one forwarded to it. A
+ * forwarded callback that returns a cleanup, as React 19 allows, has it held
+ * in `cleanup` and run on detach in place of a call with `null`, on React 18
+ * as well.
+ */
+function setRefs(node, own, forwarded, cleanup) {
+    own.current = node;
+    if (typeof forwarded === 'function') {
+        if (node === null) {
+            const detach = cleanup.current;
+            cleanup.current = null;
+            if (detach)
+                detach();
+            else
+                forwarded(null);
+            return;
+        }
+        const returned = forwarded(node);
+        cleanup.current =
+            typeof returned === 'function' ? returned : null;
+    }
+    else if (forwarded) {
+        forwarded.current = node;
+    }
+}
+/**
+ * Warns when a part has an `id` the frame couldn't read, because it isn't a
+ * direct child, so the skip link or the burger points at the wrong one.
+ */
+function warnOnUnreadId(part, id, expected) {
+    if (id && id !== expected) {
+        warnOnce(`AppFrame:${part}-id`, `[bestax-bulma] <AppFrame.${part}> has an id <AppFrame> can't read, ` +
+            `so ${part === 'Main' ? 'the skip link' : "the burger's aria-controls"} ` +
+            `misses it. Put AppFrame.${part} directly inside AppFrame.`);
+    }
+}
+/**
+ * The top bar of an AppFrame, which sticks while the page scrolls.
+ *
+ * @function
+ * @param {AppFrameHeaderProps} props - Props for AppFrame.Header.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<header>`.
+ * @returns {JSX.Element} The rendered header.
+ */
+const AppFrameHeader = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const headerClass = usePrefixedClassNames('app-frame-header');
+    return (jsxRuntime.jsx("header", { ref: ref, className: classNames(headerClass, bulmaHelperClasses, className), ...rest, children: children }));
+});
+AppFrameHeader.displayName = 'AppFrame.Header';
+/**
+ * The navigation of an AppFrame: a column beside the page from the breakpoint up, and a drawer below it.
+ *
+ * @function
+ * @param {AppFrameNavProps} props - Props for AppFrame.Nav.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<nav>`.
+ * @returns {JSX.Element} The rendered nav, and the drawer's backdrop.
+ */
+const AppFrameNav = React.forwardRef(({ className, style, width, overlay = true, closeOnEscape = true, closeOnClickOutside = true, closeOnNavigate = true, onClick, onPointerDownCapture, children, ...props }, ref) => {
+    const frame = React.useContext(FrameContext);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const navClass = usePrefixedClassNames('app-frame-nav');
+    const closeClass = usePrefixedClassNames('app-frame-close');
+    const backdropClass = usePrefixedClassNames('app-frame-backdrop');
+    const activeClass = usePrefixedClassNames('is-active');
+    const navRef = React.useRef(null);
+    const backdropRef = React.useRef(null);
+    const navCleanupRef = React.useRef(null);
+    const navRefs = React.useCallback((node) => setRefs(node, navRef, ref, navCleanupRef), [ref]);
+    const navId = rest.id || frame?.state.navId;
+    if (frame)
+        warnOnUnreadId('Nav', rest.id, frame.state.navId);
+    // The drawer is open only below the breakpoint. Above it the nav is a
+    // column, and none of what follows applies.
+    const isDrawer = !!frame?.state.isDrawer;
+    const open = isDrawer && !!frame?.state.navOpen;
+    // The open drawer is Bulma's active state, on the nav as on a navbar's
+    // menu, and on its backdrop.
+    const shown = { [activeClass]: !!frame?.state.navOpen };
+    const modal = open && overlay;
+    const close = () => frame?.state.setNavOpen(false);
+    // The rest of the frame goes inert: the header, the page, the aside and
+    // the footer, but not the backdrop, which takes the presses outside the
+    // drawer rather than let them through to what's under it. Not the whole
+    // page, since a Modal or a toast renders beside the frame, often into an
+    // element that's there before the drawer opens, and a Modal opened from
+    // the drawer has to stay usable. First, so that as the drawer closes it
+    // lets go before focus goes back to the burger: an inert element can't
+    // take focus.
+    useInertSiblings(navRef, modal, false, backdropRef);
+    const isTopmost = useOverlayStack(open, overlay);
+    useScrollLock(modal);
+    // Tab stays inside while the drawer is the topmost modal overlay, as in
+    // Sidebar, so a Modal opened from the drawer holds Tab until it closes.
+    React.useEffect(() => {
+        if (!modal)
+            return undefined;
+        return trapTab(() => navRef.current, window, () => isTopmost('modal'));
+    }, [modal, isTopmost]);
+    useOverlayEscape(open && closeOnEscape, isTopmost, close);
+    // Without an overlay there's no backdrop: a press outside the drawer
+    // closes it, as Popover's does, while it's the topmost overlay, so a
+    // press in a Modal opened over it is the Modal's. A press on a control
+    // that names the nav in its `aria-controls`, such as the burger, is left
+    // to that control, which toggles it.
+    const markInsidePress = useOutsidePress(navRef, open && !overlay && closeOnClickOutside, e => {
+        const id = navRef.current?.id;
+        const controlsNav = (node) => !!node
+            .getAttribute?.('aria-controls')
+            ?.split(/\s+/)
+            .includes(id);
+        if (!isTopmost() || e.composedPath().some(controlsNav))
+            return;
+        close();
+    });
+    // Focus moves to the drawer's first tab stop, the close button, as it
+    // opens, and back to whatever had it as it closes, unless it has left
+    // the drawer. After a press outside, the press's own mousedown then takes
+    // it wherever the press goes. When the window widened, the drawer is the
+    // column again, and focus on its links stays; the close button hides
+    // there, so focus on it, or dropped from it to <body>, goes back too.
+    const isDrawerRef = useLatestRef(isDrawer);
+    useOverlayFocus(navRef, open, {
+        modal: overlay,
+        restore: () => {
+            if (isDrawerRef.current)
+                return true;
+            const nav = navRef.current;
+            const active = getActiveElementInTree(nav);
+            return (!nav.contains(active) || !!active?.classList.contains(closeClass));
+        },
+    });
+    const handleClick = (e) => {
+        onClick?.(e);
+        if (!open ||
+            !closeOnNavigate ||
+            e.button !== 0 ||
+            e.metaKey ||
+            e.ctrlKey ||
+            e.shiftKey ||
+            e.altKey) {
+            return;
+        }
+        // Not skipped for a click whose default was prevented: a router's
+        // link prevents it to navigate without a page load. Only a link the nav
+        // holds: one in a Modal portaled from it is the Modal's.
+        const link = e.target.closest('a[href]');
+        if (!link || !navRef.current?.contains(link))
+            return;
+        if (link.hasAttribute('download'))
+            return;
+        const target = link.getAttribute('target');
+        if (target && target !== '_self')
+            return;
+        close();
+    };
+    const navStyle = width === undefined
+        ? style
+        : {
+            ...style,
+            '--bulma-app-frame-nav-width': cssLength(width),
+        };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("nav", { ref: navRefs, className: classNames(navClass, shown, bulmaHelperClasses, className), style: navStyle, onClick: handleClick, onPointerDownCapture: e => {
+                    onPointerDownCapture?.(e);
+                    markInsidePress(e);
+                }, ...rest, id: navId, "aria-label": rest['aria-label'] ||
+                    (rest['aria-labelledby'] ? undefined : frame?.labels.nav), children: [frame && (jsxRuntime.jsx(Delete, { className: closeClass, size: "medium", ariaLabel: frame.labels.closeNav, onClick: close })), children] }), frame && overlay && (jsxRuntime.jsx("div", { ref: backdropRef, className: classNames(backdropClass, shown), "aria-hidden": "true", onClick: closeOnClickOutside
+                    ? () => {
+                        // Not under an overlay opened over the drawer.
+                        if (isTopmost())
+                            close();
+                    }
+                    : undefined }))] }));
+});
+AppFrameNav.displayName = 'AppFrame.Nav';
+/**
+ * The page's main content in an AppFrame, which the skip link moves focus to.
+ *
+ * @function
+ * @param {AppFrameMainProps} props - Props for AppFrame.Main.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<main>`.
+ * @returns {JSX.Element} The rendered main.
+ */
+const AppFrameMain = React.forwardRef(({ className, children, ...props }, ref) => {
+    const frame = React.useContext(FrameContext);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const mainClass = usePrefixedClassNames('app-frame-main');
+    if (frame)
+        warnOnUnreadId('Main', rest.id, frame.mainId);
+    return (jsxRuntime.jsx("main", { ref: ref, tabIndex: -1, className: classNames(mainClass, bulmaHelperClasses, className), ...rest, id: rest.id || frame?.mainId, children: children }));
+});
+AppFrameMain.displayName = 'AppFrame.Main';
+/**
+ * Content beside the page in an AppFrame, which moves under it below the breakpoint.
+ *
+ * @function
+ * @param {AppFrameAsideProps} props - Props for AppFrame.Aside.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<aside>`.
+ * @returns {JSX.Element} The rendered aside.
+ */
+const AppFrameAside = React.forwardRef(({ className, style, width, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const asideClass = usePrefixedClassNames('app-frame-aside');
+    const asideStyle = width === undefined
+        ? style
+        : {
+            ...style,
+            '--bulma-app-frame-aside-width': cssLength(width),
+        };
+    return (jsxRuntime.jsx("aside", { ref: ref, className: classNames(asideClass, bulmaHelperClasses, className), style: asideStyle, ...rest, children: children }));
+});
+AppFrameAside.displayName = 'AppFrame.Aside';
+/**
+ * The bottom of an AppFrame, under the page.
+ *
+ * @function
+ * @param {AppFrameFooterProps} props - Props for AppFrame.Footer.
+ * @param {React.Ref<HTMLElement>} ref - Forwarded ref to the `<footer>`.
+ * @returns {JSX.Element} The rendered footer.
+ */
+const AppFrameFooter = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const footerClass = usePrefixedClassNames('app-frame-footer');
+    return (jsxRuntime.jsx("footer", { ref: ref, className: classNames(footerClass, bulmaHelperClasses, className), ...rest, children: children }));
+});
+AppFrameFooter.displayName = 'AppFrame.Footer';
+/**
+ * The button that opens the drawer, or collapses the column from the breakpoint up: Navbar.Burger, wired to the frame.
+ *
+ * @function
+ * @param {AppFrameBurgerProps} props - Props for AppFrame.Burger.
+ * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
+ * @returns {JSX.Element} The rendered burger.
+ */
+const AppFrameBurger = React.forwardRef(({ className, onClick, ...props }, ref) => {
+    // Outside a frame it's a Navbar.Burger that controls nothing.
+    const frame = React.useContext(FrameContext);
+    const burgerClass = usePrefixedClassNames('app-frame-burger');
+    const state = frame?.state;
+    // Until the frame knows whether the nav is a drawer, the burger says
+    // nothing it can't stand behind: no `aria-expanded`, and its bars. It can't
+    // act before then anyway, since that's before hydration. Outside a frame
+    // it's a plain Navbar.Burger.
+    const known = !!frame?.modeKnown;
+    const expanded = known && !!state && (state.isDrawer ? state.navOpen : !state.navCollapsed);
+    return (jsxRuntime.jsx(NavbarBurger, { ref: ref, ...props, className: classNames(burgerClass, className), "aria-label": props['aria-label'] || frame?.labels.burger, active: expanded, "aria-expanded": frame && !known ? null : expanded, "aria-controls": state?.navId, onClick: e => {
+            onClick?.(e);
+            if (e.defaultPrevented || !frame)
+                return;
+            // Safari, and Firefox on a Mac, don't focus a button that's pressed.
+            // Focused, it's the element the drawer hands focus back to.
+            e.currentTarget.focus();
+            frame.state.toggleNav();
+        } }));
+});
+AppFrameBurger.displayName = 'AppFrame.Burger';
+const isMain = (child) => React.isValidElement(child) && child.type === AppFrameMain;
+const isNav = (child) => React.isValidElement(child) && child.type === AppFrameNav;
+/**
+ * The `AppFrame` component lays out an app's pages: a header across the top, a navigation column down the side, the page, and an aside and a footer, with the nav a drawer behind a burger on narrow screens.
+ *
+ * The header and the column stick while the document scrolls, and a skip
+ * link comes first. The layout is CSS, so the server renders it as the
+ * browser does. It holds two states, each yours to control: whether the
+ * drawer is open, and whether the column is collapsed. `AppFrame.Burger`
+ * and `useAppFrame()` toggle whichever applies at the current width.
+ *
+ * @function
+ * @param {AppFrameProps} props - Props for the AppFrame component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the root `<div>`.
+ * @returns {JSX.Element} The rendered frame.
+ *
+ * @example
+ * <AppFrame>
+ *   <AppFrame.Header>
+ *     <Navbar aria-label="Site">
+ *       <Navbar.Brand>
+ *         <Navbar.Item href="/">Acme</Navbar.Item>
+ *         <AppFrame.Burger />
+ *       </Navbar.Brand>
+ *     </Navbar>
+ *   </AppFrame.Header>
+ *   <AppFrame.Nav>
+ *     <Menu>…</Menu>
+ *   </AppFrame.Nav>
+ *   <AppFrame.Main>…</AppFrame.Main>
+ * </AppFrame>
+ */
+const AppFrameRoot = React.forwardRef(({ className, textColor, bgColor, breakpoint = 'desktop', navOpen: navOpenProp, defaultNavOpen = false, onNavOpenChange, navCollapsed: navCollapsedProp, defaultNavCollapsed = false, onNavCollapsedChange, skipLink = true, labels, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const rootRef = React.useRef(null);
+    const rootCleanupRef = React.useRef(null);
+    const rootRefs = React.useCallback((node) => setRefs(node, rootRef, ref, rootCleanupRef), [ref]);
+    const [openState, setOpenState] = React.useState(defaultNavOpen);
+    const [collapsedState, setCollapsedState] = React.useState(defaultNavCollapsed);
+    const navOpen = navOpenProp ?? openState;
+    const navCollapsed = navCollapsedProp ?? collapsedState;
+    const openControlled = navOpenProp !== undefined;
+    const collapsedControlled = navCollapsedProp !== undefined;
+    const onNavOpenChangeRef = useLatestRef(onNavOpenChange);
+    const onNavCollapsedChangeRef = useLatestRef(onNavCollapsedChange);
+    const setNavOpen = React.useCallback((open) => {
+        onNavOpenChangeRef.current?.(open);
+        if (!openControlled)
+            setOpenState(open);
+    }, [openControlled, onNavOpenChangeRef]);
+    const setNavCollapsed = React.useCallback((collapsed) => {
+        onNavCollapsedChangeRef.current?.(collapsed);
+        if (!collapsedControlled)
+            setCollapsedState(collapsed);
+    }, [collapsedControlled, onNavCollapsedChangeRef]);
+    // The layout switches in the stylesheet. The script needs the width
+    // only to know which state the burger toggles, and to close the drawer
+    // once the window is at or past the breakpoint.
+    const wide = useBulmaBreakpoint(breakpoint);
+    const isDrawer = wide === false;
+    const isWide = wide === true;
+    React.useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- the width is known only in the browser, and the drawer closes in answer to it
+        if (isWide && navOpen)
+            setNavOpen(false);
+    }, [isWide, navOpen, setNavOpen]);
+    const toggleNav = React.useCallback(() => {
+        if (isDrawer)
+            setNavOpen(!navOpen);
+        else
+            setNavCollapsed(!navCollapsed);
+    }, [isDrawer, navOpen, navCollapsed, setNavOpen, setNavCollapsed]);
+    // The ids of the parts the skip link and the burger point at, read off
+    // the children so the server renders them too.
+    const baseId = React.useId();
+    const parts = flattenChildren(children);
+    const mainId = parts.find(isMain)?.props.id || `${baseId}-main`;
+    const navId = parts.find(isNav)?.props.id || `${baseId}-nav`;
+    const { skipLink: skipText, nav, closeNav, burger } = labels ?? {};
+    const value = React.useMemo(() => ({
+        state: {
+            navOpen,
+            setNavOpen,
+            navCollapsed,
+            setNavCollapsed,
+            isDrawer,
+            toggleNav,
+            navId,
+        },
+        labels: {
+            skipLink: skipText || 'Skip to main content',
+            nav: nav || 'Sections',
+            closeNav: closeNav || 'Close navigation',
+            burger: burger || undefined,
+        },
+        mainId,
+        modeKnown: wide !== null,
+    }), [
+        navOpen,
+        setNavOpen,
+        navCollapsed,
+        setNavCollapsed,
+        isDrawer,
+        toggleNav,
+        navId,
+        skipText,
+        nav,
+        closeNav,
+        burger,
+        mainId,
+        wide,
+    ]);
+    // Its header and footer are the page's banner and contentinfo only
+    // outside `main` and sectioning content, as HTML-AAM maps them.
+    React.useEffect(() => {
+        const host = rootRef.current?.parentElement?.closest('main, article, aside, nav, section');
+        if (host) {
+            warnOnce('AppFrame:nested', `[bestax-bulma] <AppFrame> sits inside a <${host.localName}>, where ` +
+                "its header and footer are no longer the page's banner and " +
+                'contentinfo landmarks. Put AppFrame at the top of the page.');
+        }
+    }, []);
+    const rootClass = usePrefixedClassNames('app-frame', {
+        [`is-${breakpoint}`]: true,
+        'is-nav-collapsed': navCollapsed,
+    });
+    const skipClass = usePrefixedClassNames('app-frame-skip-link');
+    return (jsxRuntime.jsxs("div", { ref: rootRefs, className: classNames(rootClass, bulmaHelperClasses, className), ...rest, children: [skipLink && (jsxRuntime.jsx("a", { className: skipClass, href: `#${mainId}`, children: value.labels.skipLink })), jsxRuntime.jsx(FrameContext.Provider, { value: value, children: children })] }));
+});
+/**
+ * The frame's state, for a control of your own inside it: whether the
+ * drawer is open and the column collapsed, setters that go through the
+ * frame's callbacks, and `toggleNav()`, which does what the burger does.
+ * Outside an AppFrame it's `null`, as the library's other context hooks
+ * are, so a control that can sit outside one renders a fallback or nothing.
+ *
+ * @function useAppFrame
+ * @returns The frame's state, or `null` outside an AppFrame.
+ */
+function useAppFrame() {
+    return React.useContext(FrameContext)?.state ?? null;
+}
+const AppFrame = withSubComponents(AppFrameRoot, {
+    Header: AppFrameHeader,
+    Nav: AppFrameNav,
+    Main: AppFrameMain,
+    Aside: AppFrameAside,
+    Footer: AppFrameFooter,
+    Burger: AppFrameBurger,
+}, 'AppFrame');
+
 /**
  * The `.stack` element behind Stack, Group, Center and Flex.
  *
@@ -27968,6 +28553,14 @@ const Stack = React.forwardRef(function Stack(props, ref) {
 });
 Stack.displayName = 'Stack';
 
+exports.Affix = Affix;
+exports.AppFrame = AppFrame;
+exports.AppFrameAside = AppFrameAside;
+exports.AppFrameBurger = AppFrameBurger;
+exports.AppFrameFooter = AppFrameFooter;
+exports.AppFrameHeader = AppFrameHeader;
+exports.AppFrameMain = AppFrameMain;
+exports.AppFrameNav = AppFrameNav;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.Avatars = Avatars;
@@ -28198,6 +28791,7 @@ exports.radioSizes = radioSizes;
 exports.switchColors = switchColors;
 exports.switchSizes = switchSizes;
 exports.toast = toast;
+exports.useAppFrame = useAppFrame;
 exports.useBulmaClasses = useBulmaClasses;
 exports.useClassPrefix = useClassPrefix;
 exports.useColorClasses = useColorClasses;