@allxsmith/bestax-bulma 5.60.0 → 5.62.0

package/dist/index.cjs

@@ -4755,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
@@ -5680,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';
 /**
@@ -6851,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
@@ -6875,7 +6912,7 @@ function useInertSiblings(ref, active, wholePage) {
             if (doc.activeElement === doc.body)
                 taken?.focus();
         };
-    }, [ref, active, wholePage]);
+    }, [ref, active, wholePage, except]);
 }
 
 /**
@@ -7971,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([
@@ -8021,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`;
@@ -8079,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;
@@ -8163,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
@@ -9293,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.
  *
@@ -9342,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
@@ -9389,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 =
@@ -10147,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.
  *
@@ -10174,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',
@@ -10201,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.
@@ -10818,6 +10937,30 @@ function RevealImpl(revealProps) {
 const Reveal = RevealImpl;
 Reveal.displayName = 'Reveal';
 
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * A value the caller holds, or one this hook holds when the caller doesn't:
+ * the `x` / `defaultX` pair of a component's props. The caller holds it
+ * whenever `controlled` isn't `undefined`, so `null` is a held value. The
+ * setter changes only the value held here, so a held one changes when the
+ * caller passes the new value, and it reports nothing: the component calls
+ * its own `onXChange`.
+ *
+ * @function useControlled
+ * @param controlled - The caller's value, or `undefined` to hold one here.
+ * @param initial - The value held here to begin with.
+ * @returns The current value, and the setter for the one held here.
+ */
+function useControlled(controlled, initial) {
+    const [own, setOwn] = React.useState(initial);
+    const isControlled = controlled !== undefined;
+    const set = (next) => {
+        if (!isControlled)
+            setOwn(next);
+    };
+    return [isControlled ? controlled : own, set];
+}
+
 // INTERNAL: deliberately not exported from src/index.ts.
 /** The keys and clicks of both checkbox modes, which differ only in what a check reaches. */
 const CHECKBOX_ACTIONS = {
@@ -10891,6 +11034,14 @@ function pathOf(element, { values }) {
     }
     return path;
 }
+/**
+ * The values of the items a tree hides while they stay in it, as TreeSelect's
+ * search hides the items that don't match. A hidden item renders as one under
+ * a closed parent does: nothing on the page, and in a `checkbox` tree it and
+ * its children still register, so a check still reaches them. Internal, for
+ * the components that put a TreeView inside them.
+ */
+const TreeViewHiddenContext = React.createContext(new Set());
 /**
  * Every known item's check state, by the rules in #1096:
  *
@@ -10966,16 +11117,6 @@ function toggledList(records, list, value) {
         ...list.filter(item => !records.has(item)),
     ];
 }
-/** A value the caller holds, or one this hook holds when the caller doesn't. */
-function useControlled(controlled, initial) {
-    const [own, setOwn] = React.useState(initial);
-    const isControlled = controlled !== undefined;
-    const set = (next) => {
-        if (!isControlled)
-            setOwn(next);
-    };
-    return [isControlled ? controlled : own, set];
-}
 /**
  * The list with `value` added at the end, or, when it's `present`, with
  * every copy of it taken out. Everything else stays as it was, in its order.
@@ -11243,12 +11384,15 @@ function useTreeView(options) {
                     press(item, actions.space);
                 break;
             case '*': {
+                // The siblings on the page: not the ones a component around the
+                // tree hides, which stay registered.
                 const closed = [];
                 registry.records.forEach((record, value) => {
                     if (record.parent === item.parent &&
                         record.isParent &&
                         !record.disabled &&
-                        !expanded.includes(value)) {
+                        !expanded.includes(value) &&
+                        registry.elements.has(value)) {
                         closed.push(value);
                     }
                 });
@@ -11725,7 +11869,7 @@ const sayLoaded = (name) => `${name} loaded`;
 const TOP = { path: [], hidden: false };
 const BranchContext = React.createContext(TOP);
 /** The box's input lets the row's click toggle it, so a change on its own does nothing. */
-const ignoreChange = () => { };
+const ignoreChange$1 = () => { };
 /** Whether an `icon` was given something to render. */
 const isGiven$1 = (node) => node !== undefined &&
     node !== null &&
@@ -11833,6 +11977,10 @@ const TreeViewRoot = React.forwardRef(function TreeView({ children, selectionMod
 const TreeViewItem = React.forwardRef(function TreeViewItem({ value, label, icon, children, hasChildren = false, isLoading = false, loadError, onRetry, disabled = false, className, onClick, onKeyDown, onFocus, onBlur, ...props }, ref) {
     const tree = React.useContext(TreeViewContext);
     const branch = React.useContext(BranchContext);
+    // Hidden by a component around the tree, such as TreeSelect's search,
+    // it renders as an item under a closed parent does.
+    const hiddenItems = React.useContext(TreeViewHiddenContext);
+    const hiddenHere = branch.hidden || hiddenItems.has(value);
     // Also the item's key in the live region.
     const labelId = React.useId();
     const hasItems = React.Children.toArray(children).length > 0;
@@ -11840,7 +11988,7 @@ const TreeViewItem = React.forwardRef(function TreeViewItem({ value, label, icon
     const open = isParent && !!tree?.isOpen(value);
     const parent = branch.path[branch.path.length - 1] ?? null;
     // The row at the end of its group, while it's open and on the page.
-    const shown = open && !branch.hidden;
+    const shown = open && !hiddenHere;
     const status = !shown
         ? null
         : isLoading
@@ -11905,8 +12053,8 @@ const TreeViewItem = React.forwardRef(function TreeViewItem({ value, label, icon
     const toggleRef = React.useRef(null);
     const childBranch = React.useMemo(() => ({
         path: [...branch.path, value],
-        hidden: branch.hidden || !open,
-    }), [branch, value, open]);
+        hidden: hiddenHere || !open,
+    }), [branch, value, hiddenHere, open]);
     const { selected, checked } = tree?.stateOf(value, branch.path, disabled) ?? {};
     const rowClass = usePrefixedClassNames('tree-view-row', {
         'is-selected': selected,
@@ -11915,10 +12063,10 @@ const TreeViewItem = React.forwardRef(function TreeViewItem({ value, label, icon
     if (!tree)
         return null;
     // While it's open the children render in its group. In a `checkbox` tree
-    // they render while it's closed too, drawing nothing, so a check knows
-    // what's under it.
-    const items = (open || tree.rendersClosed) && (jsxRuntime.jsx(BranchContext.Provider, { value: childBranch, children: children }));
-    if (branch.hidden)
+    // they render while it's closed or hidden too, drawing nothing, so a
+    // check knows what's under it.
+    const items = (shown || tree.rendersClosed) && (jsxRuntime.jsx(BranchContext.Provider, { value: childBranch, children: children }));
+    if (hiddenHere)
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: items });
     const info = { value, parent, disabled, isParent, open };
     // A position the caller gives wins, for a set the page holds only part of.
@@ -11954,7 +12102,7 @@ const TreeViewItem = React.forwardRef(function TreeViewItem({ value, label, icon
                             if (!(event.target instanceof HTMLInputElement)) {
                                 event.preventDefault();
                             }
-                        }, children: jsxRuntime.jsx(Checkbox, { tabIndex: -1, checked: checked === true, indeterminate: checked === 'mixed', disabled: disabled, onChange: ignoreChange }) })), isGiven$1(icon) && (jsxRuntime.jsx("span", { className: iconClass, "aria-hidden": "true", children: typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon })), jsxRuntime.jsx("span", { className: labelClass, id: labelId, ref: labelRef, children: label })] }), open && (hasItems || status) ? (jsxRuntime.jsxs("ul", { className: groupClass, role: "group", children: [items, status && (jsxRuntime.jsx(StatusRow, { kind: status, parent: value, level: branch.path.length + 2, message: loadError, onRetry: onRetry, labelRef: statusLabelRef }))] })) : (items)] }));
+                        }, children: jsxRuntime.jsx(Checkbox, { tabIndex: -1, checked: checked === true, indeterminate: checked === 'mixed', disabled: disabled, onChange: ignoreChange$1 }) })), isGiven$1(icon) && (jsxRuntime.jsx("span", { className: iconClass, "aria-hidden": "true", children: typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon })), jsxRuntime.jsx("span", { className: labelClass, id: labelId, ref: labelRef, children: label })] }), open && (hasItems || status) ? (jsxRuntime.jsxs("ul", { className: groupClass, role: "group", children: [items, status && (jsxRuntime.jsx(StatusRow, { kind: status, parent: value, level: branch.path.length + 2, message: loadError, onRetry: onRetry, labelRef: statusLabelRef }))] })) : (items)] }));
 });
 TreeViewItem.displayName = 'TreeView.Item';
 /**
@@ -12223,7 +12371,7 @@ ScrollArea.displayName = 'ScrollArea';
 // INTERNAL: deliberately not exported from src/index.ts.
 /** An IME is composing, so the key belongs to it (`keyCode` 229 is Safari's word for it). */
 const isComposing$2 = (event) => event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;
-const sameValues = (a, b) => a.length === b.length && a.every((value, i) => value === b[i]);
+const sameValues$1 = (a, b) => a.length === b.length && a.every((value, i) => value === b[i]);
 /**
  * The keys, the open state, the highlight and the ARIA of an editable
  * combobox whose list the app renders and filters (#1083). DOM focus stays
@@ -12325,7 +12473,7 @@ function useComboboxEngine({ open: controlledOpen, defaultOpen, onOpenChange, on
         }
         const options = shownOptions();
         const values = options.map(option => option.value);
-        const changed = !sameValues(values, shownValuesRef.current);
+        const changed = !sameValues$1(values, shownValuesRef.current);
         shownValuesRef.current = values;
         setListShown(values.length > 0);
         const landing = landingRef.current ?? (opened ? 'open' : null);
@@ -13125,7 +13273,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);
@@ -13242,7 +13390,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';
@@ -13262,7 +13410,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;
@@ -18743,6 +18891,25 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
 });
 Autocomplete.displayName = 'Autocomplete';
 
+const everyValue = () => true;
+/**
+ * The values of a field holding several, as Bulma tags under it, each with a
+ * `Delete` that takes its value off. Nothing while there are none.
+ */
+function ValueTags({ values, ids, labelFor, disabled, ariaCloseLabel, onRemove, removable = everyValue, }) {
+    if (values.length === 0)
+        return null;
+    return (jsxRuntime.jsx(Tags, { mt: "2", children: values.map((value, index) => (jsxRuntime.jsxs(Tag, { children: [jsxRuntime.jsx("span", { id: ids[index], children: labelFor(value) }), !disabled && removable(value) && (jsxRuntime.jsx(Delete, { size: "small", ariaLabel: ariaCloseLabel || `Remove ${labelFor(value)}`, "aria-describedby": ariaCloseLabel ? ids[index] : undefined, onClick: () => onRemove(value) }))] }, value))) }));
+}
+/** The ids `ValueTags` gives its labels, built from one id of the field's. */
+const tagIds = (base, values) => values.map((_, index) => `${base}-${index}`);
+/** A hidden input for each value, so a form posts them under `name`. */
+function HiddenValues({ name, values, form, disabled, }) {
+    if (!name)
+        return null;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: values.map(value => (jsxRuntime.jsx("input", { type: "hidden", name: name, value: value, form: form, disabled: disabled }, value))) }));
+}
+
 const validComboboxSizes = ['small', 'medium', 'large'];
 // What the status region announces: the `Combobox.Empty` content, as the one
 // item it's handed while that content is on screen because of the user's
@@ -18791,7 +18958,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);
@@ -18923,7 +19090,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;
@@ -18956,7 +19123,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
@@ -19135,7 +19302,7 @@ ComboboxEmpty.displayName = 'ComboboxEmpty';
 const toItem = (entry) => typeof entry === 'string' ? { value: entry, label: entry } : entry;
 const labelOf = (item) => item.label ?? item.value;
 /** One value or several, as a list: one value is a list of none or one. */
-const asList = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
+const asList$1 = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
 /**
  * The Combobox given `data`. It renders the parts itself, filters the items
  * by label as the user types, and keeps the value, so a pick goes through
@@ -19167,9 +19334,9 @@ const ComboboxFromData = React.forwardRef((props, ref) => {
         return item ? labelOf(item) : picked;
     };
     const controlled = value !== undefined;
-    const [ownValue, setOwnValue] = React.useState(() => asList(defaultValue));
+    const [ownValue, setOwnValue] = React.useState(() => asList$1(defaultValue));
     const matchText = useLocaleMatcher();
-    const picked = controlled ? asList(value) : ownValue;
+    const picked = controlled ? asList$1(value) : ownValue;
     const change = (next) => {
         if (!controlled)
             setOwnValue(next);
@@ -19221,7 +19388,7 @@ const ComboboxFromData = React.forwardRef((props, ref) => {
     };
     // The picks, for the field's description, since its text is the search.
     const tagsId = React.useId();
-    const tagIds = picked.map((_, index) => `${tagsId}-${index}`);
+    const ids = tagIds(tagsId, picked);
     // Each group where `data` first names it, and the items with none
     // together where the first of them is.
     const sections = new Map();
@@ -19235,14 +19402,11 @@ const ComboboxFromData = React.forwardRef((props, ref) => {
             if (!next)
                 settle();
             onOpenChange?.(next);
-        }, below: multiple
-            ? picked.length > 0 && (jsxRuntime.jsx(Tags, { mt: "2", children: picked.map((v, index) => (jsxRuntime.jsxs(Tag, { children: [jsxRuntime.jsx("span", { id: tagIds[index], children: labelFor(v) }), !disabled && (jsxRuntime.jsx(Delete, { size: "small", ariaLabel: ariaCloseLabel || `Remove ${labelFor(v)}`, "aria-describedby": ariaCloseLabel ? tagIds[index] : undefined, onClick: () => remove(v) }))] }, v))) }))
-            : undefined, children: [jsxRuntime.jsx(ComboboxInput, { ...named, ref: inputRef, id: id, disabled: disabled, 
+        }, below: multiple ? (jsxRuntime.jsx(ValueTags, { values: picked, ids: ids, labelFor: labelFor, disabled: disabled, ariaCloseLabel: ariaCloseLabel, onRemove: remove })) : undefined, children: [jsxRuntime.jsx(ComboboxInput, { ...named, ref: inputRef, id: id, disabled: disabled, 
                 // The browser's check reads the field's text, and only a pick
                 // fills it for good, so it's required until there is one.
-                required: required && picked.length === 0, "aria-required": required || undefined, form: form, "aria-describedby": multiple && picked.length > 0 ? tagIds.join(' ') : undefined, placeholder: placeholder, value: query ??
-                    (multiple || picked.length === 0 ? '' : labelFor(picked[0])), onChange: event => setQuery(event.target.value), onBlur: settle }), inline ? list : jsxRuntime.jsx(ComboboxMenu, { children: list }), name &&
-                (multiple ? picked : [picked[0] ?? '']).map(v => (jsxRuntime.jsx("input", { type: "hidden", name: name, value: v, form: form, disabled: disabled }, v)))] }));
+                required: required && picked.length === 0, "aria-required": required || undefined, form: form, "aria-describedby": multiple && picked.length > 0 ? ids.join(' ') : undefined, placeholder: placeholder, value: query ??
+                    (multiple || picked.length === 0 ? '' : labelFor(picked[0])), onChange: event => setQuery(event.target.value), onBlur: settle }), inline ? list : jsxRuntime.jsx(ComboboxMenu, { children: list }), jsxRuntime.jsx(HiddenValues, { name: name, values: multiple ? picked : [picked[0] ?? ''], form: form, disabled: disabled })] }));
 });
 ComboboxFromData.displayName = 'ComboboxFromData';
 /**
@@ -19315,51 +19479,946 @@ const Combobox = withSubComponents(ComboboxRoot, {
     Empty: ComboboxEmpty,
 }, 'Combobox');
 
-// An IME that's composing owns every key: Enter confirms what it composed,
-// the arrows move through its candidates, and Escape cancels it. Safari can
-// say so with `keyCode` 229 rather than `isComposing` (#1102).
-const isComposing = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
+// INTERNAL: deliberately not exported from src/index.ts. Walking the nodes a
+// TreeSelect takes as `data`, so a picker can name, check and search a tree
+// while it isn't on the page.
+/**
+ * Every node by its value, in the order the tree reads from top to bottom.
+ * Values are meant to be unique, and the first node with a value wins.
+ */
+function indexTree(data) {
+    const index = new Map();
+    const walk = (nodes, path) => {
+        for (const node of nodes) {
+            if (!index.has(node.value))
+                index.set(node.value, { node, path });
+            if (node.children)
+                walk(node.children, [...path, node.value]);
+        }
+    };
+    walk(data, []);
+    return index;
+}
+/** What a node is called: its `label`, or its `value` when that's empty. */
+const nodeLabel = (node) => node.label || node.value;
+/** The nodes under a node, none when it has no `children`. */
+const childNodes = (node) => node.children ?? [];
+/** Whether a node is a parent: it has children, or `hasChildren` says it will. */
+const isParentNode = (node) => childNodes(node).length > 0 || !!node.hasChildren;
+/**
+ * The records TreeView's check rules read, built from the nodes rather than
+ * from the items on the page, so the checked list can be worked out while
+ * the tree isn't there.
+ */
+function checkRecords(index) {
+    const records = new Map();
+    index.forEach(({ node, path }, value) => records.set(value, {
+        parent: path[path.length - 1] ?? null,
+        disabled: !!node.disabled,
+        isParent: isParentNode(node),
+    }));
+    return records;
+}
 /**
- * The `Taginput` component provides a tag/chip input field for managing multiple tags.
- *
- * @function
- * @param {TaginputProps} props - Props for the Taginput component.
- * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element.
- * @returns {JSX.Element} The rendered taginput component.
- *
- * @example
- * // Basic usage
- * <Taginput
- *   placeholder="Add a tag..."
- *   onChange={(tags) => console.log(tags)}
- * />
- *
- * @example
- * // With autocomplete
- * <Taginput
- *   data={['React', 'Vue', 'Angular', 'Svelte']}
- *   allowNew={false}
- *   placeholder="Select frameworks..."
- * />
- */
-const Taginput = React.forwardRef(({ 
-// Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data: dataProp, placeholder, field = 'label', allowNew = true, allowDuplicates = false, openOnFocus = false, removeOnKeys = true, confirmKeys = ['Enter', ','], closable = true, attached = false, maxTags, maxlength, disabled: disabledProp, readonly = false, rounded = false, ellipsis = false, hasCounter = true, onPasteSeparators = [','], beforeAdding, createTag, keepFirst = false, keepOpen = true, loading = false, ariaCloseLabel, icon, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, tagColor, size, onChange, onAdd, onRemove, onTyping, tagTemplate, name, form, id, className, ...props }, ref) => {
-    const disabled = useFieldsetDisabled(disabledProp);
-    const insideField = useInsideField();
-    const insideControl = useInsideControl();
-    const ownField = rendersOwnField('Taginput', {
-        insideField,
-        insideControl,
-        label,
-        message,
-        horizontal,
-        fieldClassName,
+ * The checked list a `checkedStrategy` reports for the items `listed` checks
+ * by TreeView's rules, in the tree's order. `all` is every checked item;
+ * `child` the checked items with no enabled item under them; `parent` the
+ * checked items whose parent isn't. A disabled item is checked by its own
+ * value only, so a checked one is in every list. Values no node has are
+ * kept, at the end. Passed back in, each list checks the same items.
+ */
+function checkedByStrategy(records, listed, strategy) {
+    const { states, ends } = readChecks(records, new Set(listed));
+    const isEnd = new Set(ends);
+    const on = (value) => value !== null && states.get(value) === true;
+    const kept = [];
+    records.forEach(({ parent, disabled }, value) => {
+        if (!on(value))
+            return;
+        if (strategy === 'all' ||
+            disabled ||
+            (strategy === 'child' ? isEnd.has(value) : !on(parent))) {
+            kept.push(value);
+        }
     });
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const { classPrefix } = useConfig();
-    const defaultIconLibrary = useIconLibrary();
-    const formatNumber = useScopedNumberFormat();
+    const unknown = new Set(listed.filter(value => !records.has(value)));
+    return [...kept, ...unknown];
+}
+/**
+ * What a search shows of a tree: the nodes that match, the nodes above them,
+ * so the results stay a tree, and the nodes under them, so a matching branch
+ * can still be opened.
+ */
+function searchTree(data, matches) {
+    const hidden = new Set();
+    const open = [];
+    // Whether the nodes, or any node under them, match. `above` is the path
+    // down to them.
+    const walk = (nodes, underMatch, above) => {
+        let found = false;
+        for (const node of nodes) {
+            const path = [...above, node];
+            const self = matches(node, path);
+            const below = walk(childNodes(node), underMatch || self, path);
+            if (below)
+                open.push(node.value);
+            if (!underMatch && !self && !below)
+                hidden.add(node.value);
+            found = found || self || below;
+        }
+        return found;
+    };
+    return { hidden, open, found: walk(data, false, []) };
+}
+
+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, localeScope, matchWidth = false, followContent = false, }) => {
+    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
+        : {
+            get current() {
+                return (panelRef.current?.querySelector(initialFocusSelector) ?? null);
+            },
+        }, [initialFocusSelector]);
+    const resolved = useAnchoredPosition(anchorRef, panelRef, {
+        active: isOpen,
+        position,
+        fixed: appendToBody,
+        // The gap comes from `--bulma-picker-popover-offset` as a margin, in place
+        // or portaled, so the coordinates leave it out and `auto` reads it off
+        // the panel.
+        offset: 0,
+        styledGap: marginGap,
+        matchWidth,
+        followContent,
+    });
+    // Read when a press lands outside or a key arrives, so both listeners stay
+    // put while `onClose` changes identity, as an inline one does on every
+    // render of the field.
+    const onCloseRef = useLatestRef(onClose);
+    React.useEffect(() => {
+        if (!isOpen || !closeOnClickOutside || !isBrowser)
+            return undefined;
+        // Listen on `pointerdown` (rather than `mousedown`) so touch starts
+        // outside the popover dismiss it on mobile — including swipe-from-outside
+        // gestures, where the synthetic mouse event would otherwise lag a few
+        // hundred ms behind the actual touch.
+        const handler = (e) => {
+            const path = e.composedPath();
+            if (panelRef.current && path.includes(panelRef.current))
+                return;
+            if (anchorRef.current && path.includes(anchorRef.current))
+                return;
+            onCloseRef.current();
+        };
+        document.addEventListener('pointerdown', handler);
+        return () => document.removeEventListener('pointerdown', handler);
+    }, [isOpen, closeOnClickOutside, anchorRef, onCloseRef]);
+    // Escape closes it, and so does Alt+ArrowUp, the combobox's key for it,
+    // which the calendar and the time wheels inside leave to it. Escape closes
+    // it from anywhere, but the key is only the picker's when it was pressed in
+    // the panel or the field: then it's marked used, so a Modal or Sidebar
+    // around the picker stays open. From anywhere else, such as a dialog opened
+    // over the picker, the key goes on to whatever has focus.
+    React.useEffect(() => {
+        if (!isOpen || !closeOnEscape || !isBrowser)
+            return undefined;
+        const handler = (e) => {
+            if (e.key === 'Escape') {
+                if (isEventInside(e, panelRef.current) ||
+                    isEventInside(e, anchorRef.current)) {
+                    e.preventDefault();
+                }
+                onCloseRef.current();
+            }
+            else if (e.altKey && e.key === 'ArrowUp') {
+                e.preventDefault();
+                e.stopPropagation();
+                onCloseRef.current();
+            }
+        };
+        document.addEventListener('keydown', handler);
+        return () => document.removeEventListener('keydown', handler);
+    }, [isOpen, closeOnEscape, anchorRef, onCloseRef]);
+    useFocusTrap(panelRef, {
+        active: isOpen && trapFocus,
+        initialFocusRef,
+        restoreFocus: restoreFocusRef ?? true,
+    });
+    const panelClass = usePrefixedClassNames('picker-popover', {
+        'is-active': isOpen,
+        [`is-${resolved.position}`]: true,
+        'is-portal': appendToBody,
+        'has-anchor-width': matchWidth,
+    });
+    if (!isOpen)
+        return null;
+    const style = appendToBody
+        ? {
+            position: 'fixed',
+            top: resolved.top,
+            left: resolved.left,
+            minWidth: resolved.minWidth,
+        }
+        : {};
+    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, 
+        // An Escape pressed in the panel is the picker's, and the listener
+        // above claims it. A Dropdown menu around the picker hears Escape in a
+        // React handler, which runs before that listener, so the panel claims
+        // it here too, where React gets to it first.
+        onKeyDown: e => {
+            if (closeOnEscape && e.key === 'Escape')
+                e.preventDefault();
+        }, children: children }));
+    if (appendToBody && isBrowser) {
+        const target = resolveContainer();
+        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, scope: localeScope, children: panel }), target);
+    }
+    return panel;
+};
+PickerPopover.displayName = 'PickerPopover';
+
+/**
+ * Whether a key is Alt+ArrowDown or Alt+ArrowUp, which open and close a
+ * picker's popover. The calendar and the time wheels leave both to it rather
+ * than reading them as plain arrows.
+ */
+const isPopoverToggleKey = (e) => e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp');
+const DEFAULT_PICKER_LABELS = {
+    prevMonth: 'Previous month',
+    nextMonth: 'Next month',
+    prevYear: 'Previous year',
+    nextYear: 'Next year',
+    chooseDate: 'Choose date',
+    chooseMonth: 'Choose month',
+    chooseYear: 'Choose year',
+    rangeStart: 'Start date',
+    rangeEnd: 'End date',
+    rangePreviewEnd: 'Choose as end date',
+    rangeSeparator: '–',
+    chooseDateRange: 'Choose date range',
+    hours: 'hours',
+    minutes: 'minutes',
+    seconds: 'seconds',
+    ampm: 'AM/PM',
+    increaseHours: 'Increase hours',
+    decreaseHours: 'Decrease hours',
+    increaseMinutes: 'Increase minutes',
+    decreaseMinutes: 'Decrease minutes',
+    increaseSeconds: 'Increase seconds',
+    decreaseSeconds: 'Decrease seconds',
+    toggleAmPm: 'Toggle AM/PM',
+    chooseTime: 'Choose time',
+    chooseDateTime: 'Choose date and time',
+    now: 'Now',
+    today: 'Today',
+    clear: 'Clear',
+    cancel: 'Cancel',
+    ok: 'OK',
+    reset: 'Reset',
+    done: 'Done',
+    time: 'Time',
+};
+/**
+ * Merge user-supplied label overrides with the defaults. A key set to
+ * `undefined` keeps its default, so a locale table that is missing a string
+ * still names its control instead of leaving it with no accessible name.
+ */
+const mergeLabels = (overrides) => {
+    const merged = { ...DEFAULT_PICKER_LABELS };
+    for (const [key, value] of Object.entries(overrides ?? {})) {
+        if (value !== undefined)
+            merged[key] = value;
+    }
+    return merged;
+};
+
+/**
+ * A picker's locale: its own `locale`, else the one a `LocaleProvider` around
+ * it sets, else `undefined`, which leaves `Intl` to use the runtime's.
+ */
+function usePickerLocale(own) {
+    const scope = useLocaleScope();
+    return own || scope?.locale;
+}
+const NO_ROOT_ATTRS = {};
+/**
+ * A picker's language and direction inside a `LocaleProvider`, by the rule a
+ * nested provider follows: its `lang` is its own `locale`, else the
+ * provider's, and its `dir` is the `dir` passed to it, else its own locale's
+ * direction when it has one, else the provider's. Outside a provider it
+ * changes nothing. A `locale` `Intl` refuses counts as none here, since the
+ * picker's own formatting reports it.
+ */
+function usePickerLocaleScope(ownLocale, ownDir) {
+    const scope = useLocaleScope();
+    return React.useMemo(() => {
+        if (!scope)
+            return { rootAttrs: NO_ROOT_ATTRS };
+        let own;
+        try {
+            own = canonicalLocale(ownLocale);
+        }
+        catch {
+            own = undefined;
+        }
+        const dir = ownDir || (own ? localeDirection(own) : scope.dir);
+        return {
+            rootAttrs: own ? { lang: own, dir } : NO_ROOT_ATTRS,
+            panel: { locale: own || scope.locale, dir },
+        };
+    }, [scope, ownLocale, ownDir]);
+}
+/**
+ * Whether a picker's `dayNames` replace the calendar's own, which `Calendar`
+ * does only for a full week of seven.
+ */
+function hasOwnDayNames(dayNames) {
+    return dayNames !== undefined && dayNames.length === 7;
+}
+/**
+ * The day a picker's week starts on: its own `firstDayOfWeek`, else, inside a
+ * `LocaleProvider`, the first day of the locale the picker uses, else Sunday.
+ * Outside a provider it stays Sunday whatever the locale, as it always has,
+ * and so does a picker inside one with no locale from either, since the
+ * runtime's own differs between the server and the browser.
+ *
+ * It also stays Sunday for a picker that brings its own `dayNames`. The
+ * calendar shows those exactly as given, in calendar order, and before the
+ * provider an unset `firstDayOfWeek` was always Sunday, so names written
+ * Sunday first would sit a day or more off their columns if the week moved
+ * under them.
+ */
+function usePickerFirstDayOfWeek(own, locale, hasDayNames) {
+    const inProvider = useLocaleScope() !== null;
+    return React.useMemo(() => {
+        if (own !== undefined)
+            return own;
+        if (!inProvider || !locale || hasDayNames)
+            return 0;
+        try {
+            return localeFirstDay(canonicalLocale(locale));
+        }
+        catch {
+            // A tag Intl refuses: the picker's own formatting says so.
+            return 0;
+        }
+    }, [own, inProvider, locale, hasDayNames]);
+}
+
+/**
+ * A field laid over the real one, unseen and letting presses through, so the
+ * browser's `required` check reads it and its message points at the field.
+ */
+const requiredProxyStyle = {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    margin: 0,
+    padding: 0,
+    border: 0,
+    opacity: 0,
+    pointerEvents: 'none',
+    // Focused, it opens no on-screen keyboard (`inputMode`), and iOS zooms
+    // in on a field set under 16px. It's unseen, so the size shows nowhere.
+    fontSize: '16px',
+};
+/** Keys pressed on their own that don't act, such as Ctrl to stop speech. */
+const MODIFIER_KEYS = new Set([
+    'Alt',
+    'AltGraph',
+    'CapsLock',
+    'Control',
+    'Fn',
+    'Meta',
+    'NumLock',
+    'ScrollLock',
+    'Shift',
+]);
+const ignoreChange = () => { };
+/**
+ * A read-only `role="combobox"` field, wired as the date pickers' are, that
+ * opens a `PickerPopover` dialog panel: in a `Field` of its own unless one is
+ * around it, with a chevron at its inline end, a clear button, the hidden
+ * inputs for `name` and what the browser's `required` check reads. A click,
+ * Enter, Space, Down or Alt+Down opens the panel, which holds focus, as the
+ * date pickers' does: Tab and Shift+Tab wrap inside it. Escape and Alt+Up
+ * close it and put focus back on the field, and a press outside closes it
+ * where the press put focus.
+ */
+function DialogSelect({ component, rootClass, panelClass, text, values, hasValue, open, onOpenChange, onFormReset, onPrintableKey, onClear, clearable, clearLabel, chooseLabel, placeholder, name, form, required = false, disabled, color, size, isRounded, position = 'bottom-left', appendToBody = false, inputRef, fieldRef, describedBy, below, initialFocusSelector, children, label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...props }) {
+    const insideField = useInsideField();
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField(component, {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    const { controlId, fieldLabelProps, labelId } = useAutoLabelId({
+        label,
+        id,
+        labelProps,
+        rendersLabel: ownField,
+        needsLabelId: true,
+    });
+    const reactId = React.useId();
+    const panelId = `${controlId ?? reactId}-panel`;
+    const localeScope = usePickerLocaleScope(undefined, props.dir);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const rootRef = React.useRef(null);
+    // The field's name, which the panel takes too unless it's given its own.
+    const fieldName = ariaLabel
+        ? { 'aria-label': ariaLabel }
+        : ariaLabelledBy
+            ? { 'aria-labelledby': ariaLabelledBy }
+            : labelId
+                ? { 'aria-labelledby': labelId }
+                : {};
+    const panelName = chooseLabel
+        ? { 'aria-label': chooseLabel }
+        : fieldName;
+    // Whether the field `required` hangs on has focus, which the browser gives
+    // it when it stops a submit. Taking it away or disabling it while it has
+    // focus fires no blur, so that clears it too.
+    const [proxyFocused, setProxyFocused] = React.useState(false);
+    if (proxyFocused && (!required || disabled))
+        setProxyFocused(false);
+    const showClear = !!clearable && hasValue && !disabled;
+    const rootClasses = usePrefixedClassNames(rootClass, {
+        'is-disabled': disabled,
+        'has-clear': showClear,
+    });
+    const inputClass = usePrefixedClassNames('input', {
+        [`is-${color}`]: !!color,
+        [`is-${size}`]: !!size,
+        'is-rounded': !!isRounded,
+        'is-focused': proxyFocused,
+    });
+    const chevronClass = usePrefixedClassNames(`${rootClass}-chevron`);
+    const clearClass = usePrefixedClassNames(`${rootClass}-clear`);
+    const panelClasses = usePrefixedClassNames(panelClass, {
+        [`is-${size}`]: !!size,
+    });
+    const helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    const isOpen = open && !disabled;
+    // A reset of the field's form puts the value back, as it does a native
+    // field's. The reset event fires before the form resets, and a listener
+    // after this one can still cancel it, so the value goes back a task later,
+    // and only if the reset went ahead, as File's and Dropzone's do. It's
+    // heard on the field's document, or the shadow root it's in, and matched
+    // to the field's form as it is then, so a form its `form` names that
+    // mounts later, or a `form` that changes, is followed, and a reset
+    // already under way still lands.
+    const onFormResetRef = useLatestRef(onFormReset);
+    React.useEffect(() => {
+        const root = inputRef.current.getRootNode();
+        let timer;
+        const onReset = (event) => {
+            if (event.target !== inputRef.current?.form)
+                return;
+            timer = setTimeout(() => {
+                if (!event.defaultPrevented)
+                    onFormResetRef.current();
+            });
+        };
+        root.addEventListener('reset', onReset, true);
+        return () => {
+            root.removeEventListener('reset', onReset, true);
+            clearTimeout(timer);
+        };
+    }, [inputRef, onFormResetRef]);
+    const handleKeyDown = (event) => {
+        if (disabled)
+            return;
+        if (isPopoverToggleKey(event)) {
+            event.preventDefault();
+            if (event.key === 'ArrowDown')
+                onOpenChange(true);
+            return;
+        }
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        if (event.key === 'Enter' ||
+            event.key === ' ' ||
+            event.key === 'ArrowDown') {
+            event.preventDefault();
+            onOpenChange(true);
+        }
+        else if (event.key.length === 1 &&
+            !event.nativeEvent.isComposing &&
+            onPrintableKey?.(event.key)) {
+            event.preventDefault();
+        }
+    };
+    const fieldDescription = [ariaDescribedBy, describedBy].filter(Boolean).join(' ') || undefined;
+    const field = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { ref: fieldRef, type: "text", className: inputClass, id: controlId, readOnly: true, role: "combobox", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": isOpen ? panelId : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": fieldDescription, "aria-required": required || undefined, autoComplete: "off", value: text, placeholder: placeholder, disabled: disabled, form: form, 
+                // A disabled field takes no clicks.
+                onClick: () => onOpenChange(!isOpen), onKeyDown: handleKeyDown }), showClear && (jsxRuntime.jsx(Delete, { className: clearClass, size: size, ariaLabel: clearLabel, onClick: () => {
+                    onClear();
+                    onOpenChange(false);
+                    inputRef.current?.focus();
+                } })), jsxRuntime.jsx("span", { className: chevronClass, "aria-hidden": "true", children: jsxRuntime.jsx(Icon, { name: "chevron-down", size: size }) })] }));
+    const root = (jsxRuntime.jsxs("div", { ...localeScope.rootAttrs, ...rest, ref: rootRef, className: classNames(rootClasses, bulmaHelperClasses, className), children: [insideControl ? field : jsxRuntime.jsx(Control, { size: size, children: field }), required && (jsxRuntime.jsx("input", { ...(proxyFocused
+                    ? {
+                        ...fieldName,
+                        role: 'combobox',
+                        'aria-haspopup': 'dialog',
+                        'aria-expanded': false,
+                        'aria-describedby': fieldDescription,
+                    }
+                    : { 'aria-hidden': true }), tabIndex: -1, inputMode: "none", required: true, value: hasValue ? 'picked' : '', onChange: ignoreChange, form: form, disabled: disabled, 
+                // When the browser stops a submit, it focuses this and shows its
+                // message beside it, and every browser takes the message down as
+                // this loses focus. So focus stays here, over the field, which
+                // looks focused, and a press goes where it lands, as from any
+                // field. The next key hands focus to the field and does there
+                // what it would have. Firefox also stops taking clicks if focus
+                // leaves while it's still focusing this.
+                onFocus: () => setProxyFocused(true), onBlur: () => setProxyFocused(false), onKeyDown: event => {
+                    if (MODIFIER_KEYS.has(event.key))
+                        return;
+                    inputRef.current?.focus();
+                    handleKeyDown(event);
+                }, style: requiredProxyStyle })), jsxRuntime.jsx(HiddenValues, { name: name, values: values, form: form, disabled: disabled }), jsxRuntime.jsx(PickerPopover, { localeScope: localeScope.panel, isOpen: isOpen, onClose: () => onOpenChange(false), anchorRef: rootRef, position: position, appendToBody: appendToBody, className: panelClasses, ariaLabel: panelName['aria-label'], ariaLabelledBy: panelName['aria-labelledby'], id: panelId, restoreFocusRef: inputRef, initialFocusSelector: initialFocusSelector, matchWidth: true, followContent: true, children: children(panelName) })] }));
+    const fieldElement = below === undefined ? (root) : (jsxRuntime.jsxs("div", { children: [root, below] }));
+    const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
+    if (ownField) {
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [fieldElement, messageEl] }));
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [fieldElement, messageEl] }));
+}
+
+const NOTHING_HIDDEN = new Set();
+const noMatches = [{ id: 'empty' }];
+const nothingToSay = [];
+/** What takes focus as the panel opens. */
+const INITIAL_FOCUS = '[data-initial-focus]';
+/** One value or several, as a list. */
+const asList = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
+/** Whether two lists hold the same values, whatever their order and repeats. */
+const sameValues = (a, b) => {
+    const inA = new Set(a);
+    const inB = new Set(b);
+    return inA.size === inB.size && [...inA].every(value => inB.has(value));
+};
+/** The list with every value of `more` it doesn't have added at the end. */
+const withAll = (list, more) => [
+    ...list,
+    ...more.filter(value => !list.includes(value)),
+];
+/**
+ * The `TreeSelect` component is a form field whose options are a tree, such as categories, places or teams: it opens a panel holding a real `TreeView`, picks one item or checks a branch at a time, and searches labels.
+ *
+ * The field is a read-only `role="combobox"` that opens a dialog, wired as
+ * DateInput's is, so focus moves into the tree for real and the tree keeps
+ * TreeView's keys, type-ahead and spoken output. The tree is given as `data`,
+ * so the field and the tags can name what's picked while the panel is shut,
+ * and on the server.
+ *
+ * `selectionMode` picks the kind. `'single'` picks one item and closes. With
+ * `'checkbox'`, a check reaches every enabled item under it, closed or hidden
+ * by a search, and `checkedStrategy` decides what the value holds: the
+ * leaves, the topmost checked items or every one. With
+ * `'checkbox-independent'`, each box is its own item's, so a parent means
+ * itself alone (Mantine's and Ant Design's `checkStrictly`). The value shows
+ * as tags under the field.
+ *
+ * A value no node has is kept and shown as it is, with a warning in
+ * development, so a value under a branch that hasn't loaded survives until
+ * it does.
+ *
+ * @function
+ * @param {TreeSelectProps} props - Props for the TreeSelect component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the field.
+ * @returns {JSX.Element} The field, its tags and its panel, in a `Field` with the label unless one is around it.
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ | APG Combobox Pattern}
+ *
+ * @example
+ * <TreeSelect
+ *   label="Save to"
+ *   data={[
+ *     { value: 'docs', label: 'Documents', children: [{ value: 'invoices', label: 'Invoices' }] },
+ *     { value: 'photos', label: 'Photos' },
+ *   ]}
+ *   searchable
+ * />
+ *
+ * @example
+ * <TreeSelect label="Regions" selectionMode="checkbox" checkedStrategy="parent" data={regions} />
+ */
+const TreeSelect = React.forwardRef((props, ref) => {
+    const { data, expanded: expandedProp, defaultExpanded = [], onExpandedChange, open: openProp, defaultOpen = false, onOpenChange, searchable = false, query: queryProp, defaultQuery = '', onQueryChange, filter, empty, itemTemplate, disabled: disabledProp, clearable = false, size, labels, selectionMode = 'single', value: valueProp, defaultValue, 
+    // Called below through `props`, which knows which value it takes.
+    onChange: _onChange, parentsSelectable = true, closeOnSelect = true, checkedStrategy = 'child', ariaCloseLabel, ...rest } = props;
+    const disabled = useFieldsetDisabled(disabledProp);
+    const single = selectionMode === 'single';
+    const cascade = selectionMode === 'checkbox';
+    const index = React.useMemo(() => indexTree(data), [data]);
+    const records = React.useMemo(() => checkRecords(index), [index]);
+    const labelFor = (value) => {
+        const entry = index.get(value);
+        return entry ? nodeLabel(entry.node) : value;
+    };
+    // The value, as a list: none or one in `single`.
+    const [held, setHeld] = useControlled(valueProp, defaultValue ?? null);
+    const listed = asList(held);
+    const change = (next) => {
+        const value = single ? (next[0] ?? null) : next;
+        setHeld(value);
+        // The mode decides which of the two `onChange` takes.
+        const report = props.onChange;
+        report?.(value);
+    };
+    // What the field, the tags and the hidden inputs show: the value as it's
+    // held. `checkedStrategy` shapes a new value as a check makes it, so a
+    // branch that loads later changes nothing the form posts.
+    const picked = single ? listed.slice(0, 1) : Array.from(new Set(listed));
+    const unknown = picked.find(value => !index.has(value));
+    React.useEffect(() => {
+        if (unknown !== undefined) {
+            warnOnce('TreeSelect:unknown-value', `[bestax-bulma] <TreeSelect> was given the value "${unknown}", ` +
+                'which no node in its data has. It is kept and shown as it is, ' +
+                'as it should be for a node under a branch that has not loaded ' +
+                'yet. Otherwise, check the value against the data.');
+        }
+    }, [unknown]);
+    const [expanded, setExpanded] = useControlled(expandedProp, defaultExpanded);
+    const changeExpanded = (next) => {
+        setExpanded(next);
+        onExpandedChange?.(next);
+    };
+    // The picked item focus goes to: the first in the tree's order.
+    const pickedSet = new Set(picked);
+    const target = Array.from(index.keys()).find(value => pickedSet.has(value));
+    const [query, setQueryState] = useControlled(queryProp, defaultQuery);
+    const setQuery = (next) => {
+        if (next === query)
+            return;
+        setQueryState(next);
+        onQueryChange?.(next);
+    };
+    const [isOpen, setOpenState] = useControlled(openProp, defaultOpen);
+    const setOpen = (next) => {
+        if (next === isOpen)
+            return;
+        if (next) {
+            // Opening shows the picked item, its branch open.
+            const path = (target !== undefined && index.get(target)?.path) || [];
+            if (path.some(value => !expanded.includes(value))) {
+                changeExpanded(withAll(expanded, path));
+            }
+        }
+        else {
+            setQuery('');
+        }
+        setOpenState(next);
+        onOpenChange?.(next);
+    };
+    const matchText = useLocaleMatcher();
+    const typed = searchable ? query.trim() : '';
+    // Every item reads the hidden set, so it's only built again when the
+    // search text or the data changes.
+    const search = React.useMemo(() => typed
+        ? searchTree(data, (node, path) => {
+            if (filter)
+                return filter(typed, node, path);
+            const text = nodeLabel(node);
+            return matchText
+                ? matchText(text, typed)
+                : text.toLowerCase().includes(typed.toLowerCase());
+        })
+        : null, 
+    // `filter` is read as it is when the text or the data changes: one
+    // written inline is a new function every render, and listing it would
+    // search again on each.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [data, typed, matchText]);
+    // The branches a search opened that were closed during it, for the
+    // search text they were closed under: any new text, from the box or
+    // from a held `query`, starts over.
+    const [searchClosed, setSearchClosed] = React.useState({
+        query: typed,
+        values: [],
+    });
+    if (searchClosed.query !== typed) {
+        setSearchClosed({ query: typed, values: [] });
+    }
+    const closedHere = searchClosed.query === typed ? searchClosed.values : [];
+    // The branches a search opens show open over the ones you opened, and
+    // close again once it's cleared.
+    const forced = search
+        ? search.open.filter(value => !closedHere.includes(value))
+        : [];
+    const shownExpanded = withAll(expanded, forced);
+    // TreeView's click on a row selects it and opens it. A pick by click, as
+    // a pick by Enter, only picks, so the open the tree asks for right after
+    // one on a parent is dropped, and a lazy parent isn't fetched to be
+    // picked.
+    const clickPickedRef = React.useRef(false);
+    const onTreeExpandedChange = (next) => {
+        if (clickPickedRef.current) {
+            clickPickedRef.current = false;
+            return;
+        }
+        const closed = shownExpanded.filter(value => !next.includes(value));
+        const opened = next.filter(value => !shownExpanded.includes(value));
+        const closedForced = closed.filter(value => forced.includes(value));
+        if (closedForced.length > 0) {
+            setSearchClosed({
+                query: typed,
+                values: [...closedHere, ...closedForced],
+            });
+        }
+        if (opened.length > 0 || closed.some(value => expanded.includes(value))) {
+            changeExpanded([
+                ...expanded.filter(value => !closed.includes(value)),
+                ...opened,
+            ]);
+        }
+    };
+    // Whether an item is on the page with the panel open: every branch
+    // above it open, and the search not hiding it.
+    const visible = (value) => !search?.hidden.has(value) &&
+        index.get(value).path.every(above => shownExpanded.includes(above));
+    const focusTarget = target !== undefined && visible(target)
+        ? target
+        : data.find(node => visible(node.value))?.value;
+    // Picking in `single`. TreeView shows `selected`, held here, and the
+    // picks are made from the rows' own keys and clicks, so a parent can
+    // open instead and a pick of the picked item still closes.
+    const pickable = (node) => !node.disabled && (parentsSelectable || !isParentNode(node));
+    const pick = (value) => {
+        if (listed.length !== 1 || listed[0] !== value)
+            change([value]);
+        if (closeOnSelect)
+            setOpen(false);
+    };
+    const toggleClass = usePrefixedClassNames('tree-view-toggle');
+    const rowHandlers = (node) => single
+        ? {
+            onKeyDown: (event) => {
+                if (event.target !== event.currentTarget ||
+                    event.repeat ||
+                    event.altKey ||
+                    event.ctrlKey ||
+                    event.metaKey ||
+                    (event.key !== 'Enter' && event.key !== ' ')) {
+                    return;
+                }
+                if (pickable(node)) {
+                    pick(node.value);
+                }
+                else if (!node.disabled && isParentNode(node)) {
+                    // TreeView leaves a key that's been used alone.
+                    event.preventDefault();
+                    onTreeExpandedChange(shownExpanded.includes(node.value)
+                        ? shownExpanded.filter(value => value !== node.value)
+                        : [...shownExpanded, node.value]);
+                }
+            },
+            onClick: (event) => {
+                const item = event.currentTarget;
+                const target = event.target;
+                // A click in this item's own row, where TreeView reads one,
+                // not one in the group of items inside it, and not on its
+                // chevron, which only opens it.
+                const inRow = target === item || item.firstElementChild.contains(target);
+                const onChevron = isParentNode(node) && !!target.closest(`.${toggleClass}`);
+                if (inRow && !onChevron && pickable(node)) {
+                    // TreeView opens a parent it's handed this click on, in
+                    // this same click: the flag goes once the click is over.
+                    clickPickedRef.current = isParentNode(node);
+                    queueMicrotask(() => {
+                        clickPickedRef.current = false;
+                    });
+                    pick(node.value);
+                }
+            },
+        }
+        : undefined;
+    const renderNode = (node) => (jsxRuntime.jsx(TreeView.Item, { value: node.value, label: itemTemplate ? itemTemplate(node) : nodeLabel(node), icon: node.icon, hasChildren: node.hasChildren, isLoading: node.isLoading, loadError: node.loadError, onRetry: node.onRetry, disabled: node.disabled, "data-initial-focus": !searchable && node.value === focusTarget ? '' : undefined, ...rowHandlers(node), children: childNodes(node).map(renderNode) }, node.value));
+    // In `checkbox`, TreeView reports every checked item, read here into
+    // the list `checkedStrategy` gives.
+    const shaped = (next) => cascade ? checkedByStrategy(records, next, checkedStrategy) : next;
+    const onCheckedChange = (next) => change(shaped(next));
+    // Every item's check state, read once a render, which the clear button
+    // and the tags' buttons decide from. Only `checkbox` reads TreeView's
+    // rules: in `checkbox-independent` a listed item is a checked one.
+    const listedKey = JSON.stringify(listed);
+    const checks = React.useMemo(() => (cascade ? readChecks(records, new Set(listed)) : null), 
+    // `listed` by what it holds, since a held list is a new array each
+    // render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cascade, records, listedKey]);
+    const isDisabled = (value) => !!index.get(value)?.node.disabled;
+    // Read in `checkbox` only, where there are states to read.
+    const isChecked = (value) => checks.states.get(value) === true;
+    // What a control can uncheck. In `checkbox`, that's each checked end no
+    // checked disabled item above it keeps checked, and every item above it,
+    // which takes it along; elsewhere it's each listed item that isn't
+    // disabled. A disabled item is checked only by its own value, so nothing
+    // unchecks it, or what it keeps checked.
+    const uncheckable = new Set();
+    if (checks) {
+        for (const end of checks.ends) {
+            const { path } = index.get(end);
+            if (isChecked(end) &&
+                !path.some(above => isDisabled(above) && isChecked(above))) {
+                uncheckable.add(end);
+                path.forEach(above => uncheckable.add(above));
+            }
+        }
+    }
+    else if (!single) {
+        picked.forEach(value => !isDisabled(value) && uncheckable.add(value));
+    }
+    // A tag's button takes its value off where that changes what's checked,
+    // the way its box would. A value no node has can always go.
+    const removable = (value) => !index.has(value) || (!isDisabled(value) && uncheckable.has(value));
+    const without = (value) => cascade && records.has(value)
+        ? shaped(toggledList(records, listed, value))
+        : listed.filter(item => item !== value);
+    // What the clear button leaves: the checked disabled items, and in
+    // `checkbox` what they keep checked, shaped as a check's value is.
+    const cleared = single
+        ? []
+        : shaped(checks
+            ? Array.from(records.keys()).filter(value => isDisabled(value) && isChecked(value))
+            : picked.filter(isDisabled));
+    const canClear = single
+        ? picked.length > 0
+        : uncheckable.size > 0 || picked.some(value => !index.has(value));
+    const inputRef = React.useRef(null);
+    // A forwarded callback's cleanup, which React 19 lets it return, run on
+    // detach in place of a call with `null`, on React 18 as well.
+    const refCleanupRef = React.useRef(null);
+    const fieldRef = React.useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === 'function') {
+            if (node === null) {
+                const cleanup = refCleanupRef.current;
+                refCleanupRef.current = null;
+                if (cleanup)
+                    cleanup();
+                else
+                    ref(null);
+                return;
+            }
+            const cleanup = ref(node);
+            refCleanupRef.current =
+                typeof cleanup === 'function' ? cleanup : null;
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const tagsId = React.useId();
+    const ids = tagIds(tagsId, picked);
+    const searchClass = usePrefixedClassNames('input', 'tree-select-search', {
+        [`is-${size}`]: !!size,
+    });
+    const emptyClass = usePrefixedClassNames('tree-select-empty');
+    const treeRef = React.useRef(null);
+    const emptyRef = React.useRef(null);
+    const nothingFound = !!search && !search.found;
+    // The region reads the text on screen, whatever `empty` renders.
+    const describeEmpty = React.useCallback(() => {
+        const node = emptyRef.current;
+        /* istanbul ignore if: it's only announced while it's on screen */
+        if (!node)
+            return null;
+        return spokenText(node);
+    }, []);
+    return (jsxRuntime.jsx(DialogSelect, { ...rest, component: "TreeSelect", rootClass: "tree-select", panelClass: "tree-select-panel", text: single && picked.length > 0 ? labelFor(picked[0]) : '', values: single ? [picked[0] ?? ''] : picked, hasValue: picked.length > 0, open: isOpen, onOpenChange: setOpen, onPrintableKey: searchable
+            ? key => {
+                setQuery(key);
+                setOpen(true);
+                return true;
+            }
+            : undefined, onClear: () => change(cleared), clearable: clearable && canClear, onFormReset: () => {
+            // Back to `defaultValue`, or to nothing for a held value, which
+            // its owner sets from `onChange`.
+            const back = valueProp === undefined ? asList(defaultValue) : [];
+            if (!sameValues(back, listed))
+                change(back);
+        }, clearLabel: labels?.clear || 'Clear', chooseLabel: labels?.choose, disabled: disabled, size: size, inputRef: inputRef, fieldRef: fieldRef, describedBy: single ? undefined : ids.join(' '), below: single ? undefined : (jsxRuntime.jsx(ValueTags, { values: picked, ids: ids, labelFor: labelFor, disabled: disabled, ariaCloseLabel: ariaCloseLabel, removable: removable, onRemove: value => {
+                change(without(value));
+                inputRef.current?.focus();
+            } })), initialFocusSelector: INITIAL_FOCUS, children: panelName => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [searchable && (jsxRuntime.jsx("input", { className: searchClass, type: "search", "aria-label": labels?.search || 'Search', autoComplete: "off", value: query, "data-initial-focus": "", onChange: event => setQuery(event.target.value), onFocus: event => {
+                        // A key that opened the panel is in the box: type after it.
+                        const { length } = event.currentTarget.value;
+                        event.currentTarget.setSelectionRange(length, length);
+                    }, onKeyDown: event => {
+                        if (event.key === 'Enter') {
+                            // The search box's Enter would submit the form.
+                            event.preventDefault();
+                        }
+                        else if (event.key === 'ArrowDown' && !event.altKey) {
+                            event.preventDefault();
+                            const tree = treeRef.current;
+                            (tree?.querySelector('[role="treeitem"][tabindex="0"]') ?? tree?.querySelector('[role="treeitem"]'))?.focus();
+                        }
+                    } })), nothingFound ? (empty && (jsxRuntime.jsx("div", { className: emptyClass, ref: emptyRef, children: empty }))) : (jsxRuntime.jsx(TreeViewHiddenContext.Provider, { value: search?.hidden ?? NOTHING_HIDDEN, children: jsxRuntime.jsx(TreeView, { ...panelName, ref: treeRef, 
+                        // It scrolls, and Firefox makes a scroller a Tab stop of
+                        // its own: the roving one on its items is the tree's.
+                        tabIndex: -1, selectionMode: selectionMode, size: size, selected: single ? (picked[0] ?? null) : undefined, checked: single ? undefined : listed, onCheckedChange: onCheckedChange, expanded: shownExpanded, onExpandedChange: onTreeExpandedChange, loadingLabel: labels?.loading, retryLabel: labels?.retry, loadingAnnouncement: labels?.loadingAnnouncement, loadedAnnouncement: labels?.loadedAnnouncement, children: data.map(renderNode) }) })), jsxRuntime.jsx(StatusRegion, { items: nothingFound && empty ? noMatches : nothingToSay, describe: describeEmpty })] })) }));
+});
+TreeSelect.displayName = 'TreeSelect';
+
+// An IME that's composing owns every key: Enter confirms what it composed,
+// the arrows move through its candidates, and Escape cancels it. Safari can
+// say so with `keyCode` 229 rather than `isComposing` (#1102).
+const isComposing = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
+/**
+ * The `Taginput` component provides a tag/chip input field for managing multiple tags.
+ *
+ * @function
+ * @param {TaginputProps} props - Props for the Taginput component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element.
+ * @returns {JSX.Element} The rendered taginput component.
+ *
+ * @example
+ * // Basic usage
+ * <Taginput
+ *   placeholder="Add a tag..."
+ *   onChange={(tags) => console.log(tags)}
+ * />
+ *
+ * @example
+ * // With autocomplete
+ * <Taginput
+ *   data={['React', 'Vue', 'Angular', 'Svelte']}
+ *   allowNew={false}
+ *   placeholder="Select frameworks..."
+ * />
+ */
+const Taginput = React.forwardRef(({ 
+// Field props
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data: dataProp, placeholder, field = 'label', allowNew = true, allowDuplicates = false, openOnFocus = false, removeOnKeys = true, confirmKeys = ['Enter', ','], closable = true, attached = false, maxTags, maxlength, disabled: disabledProp, readonly = false, rounded = false, ellipsis = false, hasCounter = true, onPasteSeparators = [','], beforeAdding, createTag, keepFirst = false, keepOpen = true, loading = false, ariaCloseLabel, icon, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, tagColor, size, onChange, onAdd, onRemove, onTyping, tagTemplate, name, form, id, className, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
+    const insideField = useInsideField();
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Taginput', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const { classPrefix } = useConfig();
+    const defaultIconLibrary = useIconLibrary();
+    const formatNumber = useScopedNumberFormat();
     const matchText = useLocaleMatcher();
     const resolvedLibrary = iconLibraryProp || defaultIconLibrary || 'fa';
     const pcn = (...args) => prefixedClassNames(classPrefix, ...args);
@@ -20253,7 +21312,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);
@@ -20385,7 +21444,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),
@@ -20459,7 +21518,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),
@@ -20583,7 +21642,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
@@ -20951,61 +22010,6 @@ fieldClassName, controlClassName,
 });
 TextArea.displayName = 'TextArea';
 
-/**
- * Whether a key is Alt+ArrowDown or Alt+ArrowUp, which open and close a
- * picker's popover. The calendar and the time wheels leave both to it rather
- * than reading them as plain arrows.
- */
-const isPopoverToggleKey = (e) => e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp');
-const DEFAULT_PICKER_LABELS = {
-    prevMonth: 'Previous month',
-    nextMonth: 'Next month',
-    prevYear: 'Previous year',
-    nextYear: 'Next year',
-    chooseDate: 'Choose date',
-    chooseMonth: 'Choose month',
-    chooseYear: 'Choose year',
-    rangeStart: 'Start date',
-    rangeEnd: 'End date',
-    rangePreviewEnd: 'Choose as end date',
-    rangeSeparator: '–',
-    chooseDateRange: 'Choose date range',
-    hours: 'hours',
-    minutes: 'minutes',
-    seconds: 'seconds',
-    ampm: 'AM/PM',
-    increaseHours: 'Increase hours',
-    decreaseHours: 'Decrease hours',
-    increaseMinutes: 'Increase minutes',
-    decreaseMinutes: 'Decrease minutes',
-    increaseSeconds: 'Increase seconds',
-    decreaseSeconds: 'Decrease seconds',
-    toggleAmPm: 'Toggle AM/PM',
-    chooseTime: 'Choose time',
-    chooseDateTime: 'Choose date and time',
-    now: 'Now',
-    today: 'Today',
-    clear: 'Clear',
-    cancel: 'Cancel',
-    ok: 'OK',
-    reset: 'Reset',
-    done: 'Done',
-    time: 'Time',
-};
-/**
- * Merge user-supplied label overrides with the defaults. A key set to
- * `undefined` keeps its default, so a locale table that is missing a string
- * still names its control instead of leaving it with no accessible name.
- */
-const mergeLabels = (overrides) => {
-    const merged = { ...DEFAULT_PICKER_LABELS };
-    for (const [key, value] of Object.entries(overrides ?? {})) {
-        if (value !== undefined)
-            merged[key] = value;
-    }
-    return merged;
-};
-
 function isSameDay(a, b) {
     return (a.getFullYear() === b.getFullYear() &&
         a.getMonth() === b.getMonth() &&
@@ -22259,186 +23263,80 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
                                 'is-disabled': disabled,
                                 'is-other-month': otherMonth,
                             });
-                            const display = !otherMonth || nearbyMonthDays;
-                            return (jsxRuntime.jsx("button", { type: "button", role: "gridcell", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, "aria-disabled": disabled, "aria-current": cell.isToday ? 'date' : undefined, "aria-describedby": describedBy, "data-focused": isFocused ? 'true' : undefined, disabled: disabled || !display, className: cellClass, onFocus: () => {
-                                    // Reached by Tab while the focused day is disabled, or
-                                    // by pointer: keys move on from here. A nearby month's
-                                    // day waits for its click, which turns the grid.
-                                    if (!otherMonth && !isSameDay(cell.date, focusedDate)) {
-                                        onFocusedDateChange(cell.date);
-                                    }
-                                }, 
-                                // Mouseover rather than mouseenter: browsers send it to a
-                                // disabled day as well, where React holds mouseenter back,
-                                // so the preview leaves the last enabled day behind.
-                                onMouseOver: anchor ? () => setHoverDate(cell.date) : undefined, onClick: () => {
-                                    if (disabled)
-                                        return;
-                                    onFocusedDateChange(cell.date);
-                                    if (rangeMode)
-                                        pickRangeDay(cell.date);
-                                    else
-                                        onSelect?.(cell.date);
-                                }, style: !display ? { visibility: 'hidden' } : undefined, children: cell.date.getDate() }, cell.date.toISOString()));
-                        }), weekClass) })] })), view === 'months' && (jsxRuntime.jsx("div", { ref: monthGridRef, role: "grid", "aria-labelledby": labelId, className: monthsGridClass, onKeyDown: handleMonthKeyDown, ...gridFocusHandlers, children: MONTH_ROWS.map(row => (jsxRuntime.jsx("div", { role: "row", className: monthsRowClass, children: row.map(month => {
-                        const date = makeDate(focusedYear, month);
-                        const disabled = disabledMonths[month];
-                        const isSelected = !!value && isSameMonth(value, date);
-                        const isFocused = month === tabStopMonth;
-                        const isCurrent = isSameMonth(date, today);
-                        const cellClass = prefixedClassNames(classPrefix, 'dateinput-month-cell', {
-                            'is-selected': isSelected,
-                            'is-today': isCurrent,
-                            'is-disabled': disabled,
-                        });
-                        return (jsxRuntime.jsx("button", { type: "button", role: "gridcell", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, "aria-disabled": disabled, "aria-current": isCurrent ? 'date' : undefined, "aria-label": computedMonthNames[month], "data-focused": isFocused ? 'true' : undefined, disabled: disabled, className: cellClass, onFocus: () => {
-                                // Reached by Tab while the focused month is disabled,
-                                // or by pointer: keys move on from here.
-                                if (month !== focusedDate.getMonth()) {
-                                    onFocusedDateChange(clampDate(date, min, max));
-                                }
-                            }, onClick: () => {
-                                onFocusedDateChange(clampDate(date, min, max));
-                                onSelect?.(date);
-                            }, children: monthCellNames[month] }, month));
-                    }) }, row[0]))) })), view === 'years' && (jsxRuntime.jsx("div", { ref: yearGridRef, className: yearsGridClass, role: "listbox", "aria-label": isYearGranularity ? t.chooseYear : monthLabel, onKeyDown: handleYearListKeyDown, children: yearList.map(year => {
-                    const isFocused = year === tabStopYear;
-                    const isToday = year === todayYear;
-                    // As navigation the focused year is the current one. As the
-                    // selection surface the value's year is selected and focus roams.
-                    const isSelected = isYearGranularity
-                        ? !!value && value.getFullYear() === year
-                        : isFocused;
-                    const disabled = disabledYears.has(year);
-                    const cellCls = prefixedClassNames(classPrefix, 'dateinput-year-cell', {
-                        'is-selected': isSelected,
-                        'is-today': isToday,
-                        'is-disabled': disabled,
-                    });
-                    return (jsxRuntime.jsx("button", { type: "button", role: "option", "aria-selected": isSelected, "aria-disabled": isYearGranularity ? disabled : undefined, "aria-current": isYearGranularity && isToday ? 'date' : undefined, "data-focused-year": isFocused ? 'true' : undefined, tabIndex: year === listTabStop ? 0 : -1, disabled: disabled, className: cellCls, onFocus: () => {
-                            // As navigation, focusing a year by key or pointer only
-                            // moves the tab stop: nothing is committed until a year is
-                            // picked. As the selection surface it is reached by Tab
-                            // while the focused year is disabled, or by pointer, and
-                            // keys move on from here.
-                            if (!isYearGranularity) {
-                                setNavYear(year);
-                            }
-                            else if (year !== focusedYear) {
-                                onFocusedDateChange(clampDate(makeDate(year), min, max));
-                            }
-                        }, onClick: () => isYearGranularity
-                            ? handleYearPick(year)
-                            : handleYearSelect(year), children: year }, year));
-                }) })), rangeMode && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { id: rangeStartId, hidden: true, children: t.rangeStart }), jsxRuntime.jsx("span", { id: rangeEndId, hidden: true, children: t.rangeEnd }), jsxRuntime.jsx("span", { id: rangePreviewEndId, hidden: true, children: t.rangePreviewEnd }), jsxRuntime.jsx("div", { id: rangeSummaryId, "aria-live": "polite", style: visuallyHidden, children: rangeSummary })] }))] }));
-};
-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, localeScope, }) => {
-    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
-        : {
-            get current() {
-                return (panelRef.current?.querySelector(initialFocusSelector) ?? null);
-            },
-        }, [initialFocusSelector]);
-    const resolved = useAnchoredPosition(anchorRef, panelRef, {
-        active: isOpen,
-        position,
-        fixed: appendToBody,
-        // The gap comes from `--bulma-picker-popover-offset` as a margin, in place
-        // or portaled, so the coordinates leave it out and `auto` reads it off
-        // the panel.
-        offset: 0,
-        styledGap: marginGap,
-    });
-    // Read when a press lands outside or a key arrives, so both listeners stay
-    // put while `onClose` changes identity, as an inline one does on every
-    // render of the field.
-    const onCloseRef = useLatestRef(onClose);
-    React.useEffect(() => {
-        if (!isOpen || !closeOnClickOutside || !isBrowser)
-            return undefined;
-        // Listen on `pointerdown` (rather than `mousedown`) so touch starts
-        // outside the popover dismiss it on mobile — including swipe-from-outside
-        // gestures, where the synthetic mouse event would otherwise lag a few
-        // hundred ms behind the actual touch.
-        const handler = (e) => {
-            const path = e.composedPath();
-            if (panelRef.current && path.includes(panelRef.current))
-                return;
-            if (anchorRef.current && path.includes(anchorRef.current))
-                return;
-            onCloseRef.current();
-        };
-        document.addEventListener('pointerdown', handler);
-        return () => document.removeEventListener('pointerdown', handler);
-    }, [isOpen, closeOnClickOutside, anchorRef, onCloseRef]);
-    // Escape closes it, and so does Alt+ArrowUp, the combobox's key for it,
-    // which the calendar and the time wheels inside leave to it. Escape closes
-    // it from anywhere, but the key is only the picker's when it was pressed in
-    // the panel or the field: then it's marked used, so a Modal or Sidebar
-    // around the picker stays open. From anywhere else, such as a dialog opened
-    // over the picker, the key goes on to whatever has focus.
-    React.useEffect(() => {
-        if (!isOpen || !closeOnEscape || !isBrowser)
-            return undefined;
-        const handler = (e) => {
-            if (e.key === 'Escape') {
-                if (isEventInside(e, panelRef.current) ||
-                    isEventInside(e, anchorRef.current)) {
-                    e.preventDefault();
-                }
-                onCloseRef.current();
-            }
-            else if (e.altKey && e.key === 'ArrowUp') {
-                e.preventDefault();
-                e.stopPropagation();
-                onCloseRef.current();
-            }
-        };
-        document.addEventListener('keydown', handler);
-        return () => document.removeEventListener('keydown', handler);
-    }, [isOpen, closeOnEscape, anchorRef, onCloseRef]);
-    useFocusTrap(panelRef, {
-        active: isOpen && trapFocus,
-        initialFocusRef,
-        restoreFocus: restoreFocusRef ?? true,
-    });
-    const panelClass = usePrefixedClassNames('picker-popover', {
-        'is-active': isOpen,
-        [`is-${resolved.position}`]: true,
-        'is-portal': appendToBody,
-    });
-    if (!isOpen)
-        return null;
-    const style = appendToBody
-        ? {
-            position: 'fixed',
-            top: resolved.top,
-            left: resolved.left,
-        }
-        : {};
-    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, 
-        // An Escape pressed in the panel is the picker's, and the listener
-        // above claims it. A Dropdown menu around the picker hears Escape in a
-        // React handler, which runs before that listener, so the panel claims
-        // it here too, where React gets to it first.
-        onKeyDown: e => {
-            if (closeOnEscape && e.key === 'Escape')
-                e.preventDefault();
-        }, children: children }));
-    if (appendToBody && isBrowser) {
-        const target = resolveContainer();
-        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, scope: localeScope, children: panel }), target);
-    }
-    return panel;
+                            const display = !otherMonth || nearbyMonthDays;
+                            return (jsxRuntime.jsx("button", { type: "button", role: "gridcell", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, "aria-disabled": disabled, "aria-current": cell.isToday ? 'date' : undefined, "aria-describedby": describedBy, "data-focused": isFocused ? 'true' : undefined, disabled: disabled || !display, className: cellClass, onFocus: () => {
+                                    // Reached by Tab while the focused day is disabled, or
+                                    // by pointer: keys move on from here. A nearby month's
+                                    // day waits for its click, which turns the grid.
+                                    if (!otherMonth && !isSameDay(cell.date, focusedDate)) {
+                                        onFocusedDateChange(cell.date);
+                                    }
+                                }, 
+                                // Mouseover rather than mouseenter: browsers send it to a
+                                // disabled day as well, where React holds mouseenter back,
+                                // so the preview leaves the last enabled day behind.
+                                onMouseOver: anchor ? () => setHoverDate(cell.date) : undefined, onClick: () => {
+                                    if (disabled)
+                                        return;
+                                    onFocusedDateChange(cell.date);
+                                    if (rangeMode)
+                                        pickRangeDay(cell.date);
+                                    else
+                                        onSelect?.(cell.date);
+                                }, style: !display ? { visibility: 'hidden' } : undefined, children: cell.date.getDate() }, cell.date.toISOString()));
+                        }), weekClass) })] })), view === 'months' && (jsxRuntime.jsx("div", { ref: monthGridRef, role: "grid", "aria-labelledby": labelId, className: monthsGridClass, onKeyDown: handleMonthKeyDown, ...gridFocusHandlers, children: MONTH_ROWS.map(row => (jsxRuntime.jsx("div", { role: "row", className: monthsRowClass, children: row.map(month => {
+                        const date = makeDate(focusedYear, month);
+                        const disabled = disabledMonths[month];
+                        const isSelected = !!value && isSameMonth(value, date);
+                        const isFocused = month === tabStopMonth;
+                        const isCurrent = isSameMonth(date, today);
+                        const cellClass = prefixedClassNames(classPrefix, 'dateinput-month-cell', {
+                            'is-selected': isSelected,
+                            'is-today': isCurrent,
+                            'is-disabled': disabled,
+                        });
+                        return (jsxRuntime.jsx("button", { type: "button", role: "gridcell", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, "aria-disabled": disabled, "aria-current": isCurrent ? 'date' : undefined, "aria-label": computedMonthNames[month], "data-focused": isFocused ? 'true' : undefined, disabled: disabled, className: cellClass, onFocus: () => {
+                                // Reached by Tab while the focused month is disabled,
+                                // or by pointer: keys move on from here.
+                                if (month !== focusedDate.getMonth()) {
+                                    onFocusedDateChange(clampDate(date, min, max));
+                                }
+                            }, onClick: () => {
+                                onFocusedDateChange(clampDate(date, min, max));
+                                onSelect?.(date);
+                            }, children: monthCellNames[month] }, month));
+                    }) }, row[0]))) })), view === 'years' && (jsxRuntime.jsx("div", { ref: yearGridRef, className: yearsGridClass, role: "listbox", "aria-label": isYearGranularity ? t.chooseYear : monthLabel, onKeyDown: handleYearListKeyDown, children: yearList.map(year => {
+                    const isFocused = year === tabStopYear;
+                    const isToday = year === todayYear;
+                    // As navigation the focused year is the current one. As the
+                    // selection surface the value's year is selected and focus roams.
+                    const isSelected = isYearGranularity
+                        ? !!value && value.getFullYear() === year
+                        : isFocused;
+                    const disabled = disabledYears.has(year);
+                    const cellCls = prefixedClassNames(classPrefix, 'dateinput-year-cell', {
+                        'is-selected': isSelected,
+                        'is-today': isToday,
+                        'is-disabled': disabled,
+                    });
+                    return (jsxRuntime.jsx("button", { type: "button", role: "option", "aria-selected": isSelected, "aria-disabled": isYearGranularity ? disabled : undefined, "aria-current": isYearGranularity && isToday ? 'date' : undefined, "data-focused-year": isFocused ? 'true' : undefined, tabIndex: year === listTabStop ? 0 : -1, disabled: disabled, className: cellCls, onFocus: () => {
+                            // As navigation, focusing a year by key or pointer only
+                            // moves the tab stop: nothing is committed until a year is
+                            // picked. As the selection surface it is reached by Tab
+                            // while the focused year is disabled, or by pointer, and
+                            // keys move on from here.
+                            if (!isYearGranularity) {
+                                setNavYear(year);
+                            }
+                            else if (year !== focusedYear) {
+                                onFocusedDateChange(clampDate(makeDate(year), min, max));
+                            }
+                        }, onClick: () => isYearGranularity
+                            ? handleYearPick(year)
+                            : handleYearSelect(year), children: year }, year));
+                }) })), rangeMode && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { id: rangeStartId, hidden: true, children: t.rangeStart }), jsxRuntime.jsx("span", { id: rangeEndId, hidden: true, children: t.rangeEnd }), jsxRuntime.jsx("span", { id: rangePreviewEndId, hidden: true, children: t.rangePreviewEnd }), jsxRuntime.jsx("div", { id: rangeSummaryId, "aria-live": "polite", style: visuallyHidden, children: rangeSummary })] }))] }));
 };
-PickerPopover.displayName = 'PickerPopover';
+Calendar.displayName = 'Calendar';
 
 /**
  * Segment-map utility for manual keyboard entry on a date / time picker input.
@@ -23192,79 +24090,6 @@ function supportsInputType(type) {
     return supported;
 }
 
-/**
- * A picker's locale: its own `locale`, else the one a `LocaleProvider` around
- * it sets, else `undefined`, which leaves `Intl` to use the runtime's.
- */
-function usePickerLocale(own) {
-    const scope = useLocaleScope();
-    return own || scope?.locale;
-}
-const NO_ROOT_ATTRS = {};
-/**
- * A picker's language and direction inside a `LocaleProvider`, by the rule a
- * nested provider follows: its `lang` is its own `locale`, else the
- * provider's, and its `dir` is the `dir` passed to it, else its own locale's
- * direction when it has one, else the provider's. Outside a provider it
- * changes nothing. A `locale` `Intl` refuses counts as none here, since the
- * picker's own formatting reports it.
- */
-function usePickerLocaleScope(ownLocale, ownDir) {
-    const scope = useLocaleScope();
-    return React.useMemo(() => {
-        if (!scope)
-            return { rootAttrs: NO_ROOT_ATTRS };
-        let own;
-        try {
-            own = canonicalLocale(ownLocale);
-        }
-        catch {
-            own = undefined;
-        }
-        const dir = ownDir || (own ? localeDirection(own) : scope.dir);
-        return {
-            rootAttrs: own ? { lang: own, dir } : NO_ROOT_ATTRS,
-            panel: { locale: own || scope.locale, dir },
-        };
-    }, [scope, ownLocale, ownDir]);
-}
-/**
- * Whether a picker's `dayNames` replace the calendar's own, which `Calendar`
- * does only for a full week of seven.
- */
-function hasOwnDayNames(dayNames) {
-    return dayNames !== undefined && dayNames.length === 7;
-}
-/**
- * The day a picker's week starts on: its own `firstDayOfWeek`, else, inside a
- * `LocaleProvider`, the first day of the locale the picker uses, else Sunday.
- * Outside a provider it stays Sunday whatever the locale, as it always has,
- * and so does a picker inside one with no locale from either, since the
- * runtime's own differs between the server and the browser.
- *
- * It also stays Sunday for a picker that brings its own `dayNames`. The
- * calendar shows those exactly as given, in calendar order, and before the
- * provider an unset `firstDayOfWeek` was always Sunday, so names written
- * Sunday first would sit a day or more off their columns if the week moved
- * under them.
- */
-function usePickerFirstDayOfWeek(own, locale, hasDayNames) {
-    const inProvider = useLocaleScope() !== null;
-    return React.useMemo(() => {
-        if (own !== undefined)
-            return own;
-        if (!inProvider || !locale || hasDayNames)
-            return 0;
-        try {
-            return localeFirstDay(canonicalLocale(locale));
-        }
-        catch {
-            // A tag Intl refuses: the picker's own formatting says so.
-            return 0;
-        }
-    }, [own, inProvider, locale, hasDayNames]);
-}
-
 const DEFAULT_FORMATS = {
     day: DEFAULT_DATE_FORMAT,
     month: DEFAULT_MONTH_FORMAT,
@@ -27011,6 +27836,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.
  *
@@ -28020,6 +29260,13 @@ 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;
@@ -28233,6 +29480,7 @@ exports.ToastContainer = ToastContainer;
 exports.ToggleButton = ToggleButton;
 exports.Tooltip = Tooltip;
 exports.Tr = Tr;
+exports.TreeSelect = TreeSelect;
 exports.TreeView = TreeView;
 exports.TreeViewItem = TreeViewItem;
 exports.UnorderedList = UnorderedList;
@@ -28250,6 +29498,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;