@allxsmith/bestax-bulma 5.67.2 → 5.67.4

package/dist/index.cjs

@@ -1369,7 +1369,7 @@ const Column = ({ className, textColor, color: _fieldColor, bgColor, size, sizeM
  *
  * Internal helper — it MUST mutate and return the same function object
  * (`Object.assign`), never wrap the base in a new function: identity checks
- * like `child.type === ModalCard` (Modal) and Field's displayName-based
+ * like `isElementOf(child, ModalCard)` (Modal) and Field's displayName-based
  * child detection rely on the attached component being the same object as
  * the separately exported one.
  *
@@ -2518,6 +2518,42 @@ const Breadcrumb = ({ className, alignment, separator, size, children, ...props
     return (jsxRuntime.jsx("nav", { className: breadcrumbClasses, "aria-label": "breadcrumbs", ...rest, children: jsxRuntime.jsx("ul", { children: children }) }));
 };
 
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * Whether `type` is a lazy type, which `React.lazy` returns. The symbol is
+ * looked up here rather than when the module loads, which must do nothing.
+ */
+const isLazy = (type) => typeof type === 'object' &&
+    type !== null &&
+    type.$$typeof === Symbol.for('react.lazy') &&
+    typeof type._init === 'function';
+/**
+ * The component an element renders, read through a lazy type.
+ *
+ * A client component written in a React Server Component reaches the client
+ * as a client reference, whose element type is lazy rather than the
+ * component's own function, so `child.type === Part` is never true there
+ * (#1500). This resolves a lazy type the way React does when it renders one:
+ * a module that has loaded gives its component, one still loading throws, so
+ * the caller suspends at the boundary the element itself would have, and one
+ * that failed throws its error. A lazy type without those fields comes back
+ * as it is, so a part goes unrecognized, which is what happened before.
+ */
+function elementType(element) {
+    let type = element.type;
+    while (isLazy(type))
+        type = type._init(type._payload);
+    return type;
+}
+/**
+ * Whether `node` is an element of one of `types`, including one written in a
+ * Server Component. A parent tells its parts apart with this, never by
+ * comparing `child.type`.
+ */
+function isElementOf(node, ...types) {
+    return React.isValidElement(node) && types.includes(elementType(node));
+}
+
 /**
  * The runtime mirror of `AnchorOnlyAttributes`, keyed so the two cannot drift.
  *
@@ -2610,17 +2646,7 @@ const mergeBulmaStyles = (helperStyles, style) => helperStyles || style ? { ...h
  * @returns {boolean} True if any child is a Card compound component.
  */
 const hasCompoundComponents = (children) => {
-    return React.Children.toArray(children).some(child => {
-        if (!React.isValidElement(child))
-            return false;
-        // Direct comparison with our compound component functions
-        return (child.type === CardHeader ||
-            child.type === CardContent ||
-            child.type === CardImage ||
-            child.type === CardFooter ||
-            child.type === CardFooterItem ||
-            child.type === CardHeaderIcon);
-    });
+    return React.Children.toArray(children).some(child => isElementOf(child, CardHeader, CardContent, CardImage, CardFooter, CardFooterItem, CardHeaderIcon));
 };
 /**
  * The `Card` component renders a Bulma-styled card with optional header, image, content, and footer.
@@ -2706,9 +2732,7 @@ const CardHeaderComponent = ({ className, children, centered, color, bgColor, te
         ...props,
     });
     // Check if children contains a CardHeaderTitle component
-    const hasHeaderTitle = React.Children.toArray(children).some(child => React.isValidElement(child) &&
-        typeof child.type === 'function' &&
-        child.type === CardHeaderTitle);
+    const hasHeaderTitle = React.Children.toArray(children).some(child => isElementOf(child, CardHeaderTitle));
     const headerClasses = usePrefixedClassNames('card-header');
     return (jsxRuntime.jsx("header", { className: classNames(headerClasses, bulmaHelperClasses, className), ...rest, children: hasHeaderTitle ? (children) : (jsxRuntime.jsx("div", { className: classNames(prefixedClassNames(classPrefix, 'card-header-title', {
                 'is-centered': centered,
@@ -3857,7 +3881,7 @@ function iconOf(node) {
     if (items.length === 0)
         return null;
     const [only] = items;
-    if (items.length === 1 && React.isValidElement(only) && only.type === Icon) {
+    if (items.length === 1 && isElementOf(only, Icon)) {
         return only;
     }
     return jsxRuntime.jsx(Icon, { children: items });
@@ -4025,6 +4049,47 @@ function usePortalContainer() {
     const { portalContainer } = useConfig();
     return container => resolvePortalContainer(container || portalContainer);
 }
+/**
+ * The element the overlay around a popup hands it to portal into, `null`
+ * outside any, and inside one whose element hasn't mounted yet.
+ */
+const PortalScopeContext = React.createContext(null);
+/**
+ * INTERNAL, deliberately not exported from `src/index.ts`. Makes `node` where
+ * the popups inside it portal, unless a `ConfigProvider` sets a
+ * `portalContainer`. Modal, Dialog and Command.Dialog wrap their content in
+ * it, each with the element that carries their `aria-modal`, since a screen
+ * reader that honors it hides everything outside that element. The nearest
+ * one wins, so a Dialog's own box wins over the Modal it renders.
+ *
+ * @function PortalScope
+ * @param props - `node`, the element popups portal into, and `children`.
+ * @returns The children, inside the scope.
+ */
+function PortalScope({ node, children, }) {
+    return (jsxRuntime.jsx(PortalScopeContext.Provider, { value: node, children: children }));
+}
+/**
+ * INTERNAL. Where a popup portals, a panel a component opens against
+ * something on the page, such as Popover's: the `portalContainer` a
+ * `ConfigProvider` sets, else the overlay it's in (see `PortalScope`), else
+ * `undefined`, which `resolvePortalContainer` reads as `document.body`.
+ *
+ * The overlay's element only exists once it has mounted, so a popup open as
+ * the overlay first renders mounts in `document.body`, and moves into the
+ * overlay in the update that follows, before the browser paints. Moving
+ * remounts it, as any change of portal target does. It isn't held back
+ * instead, because the popups measure their panel against the trigger as
+ * they open, and a panel that isn't there yet is never placed.
+ *
+ * @function usePopupContainer
+ * @returns The popup's container, `undefined` for `document.body`.
+ */
+function usePopupContainer() {
+    const { portalContainer } = useConfig();
+    const scope = React.useContext(PortalScopeContext);
+    return portalContainer || scope || undefined;
+}
 /**
  * Reads Modal's `portal` prop (`boolean | string | HTMLElement`) for a
  * component that takes it: whether the content is in its portal yet, and
@@ -4114,6 +4179,20 @@ function Portal({ children, container, disabled = false }) {
     const target = resolveContainer(container);
     return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: children }), target);
 }
+/**
+ * INTERNAL. `Portal` for a popup, into the container `usePopupContainer`
+ * names, so a popup opened inside a Modal, Dialog or Command.Dialog stays
+ * inside it. `disabled` renders the children in place, as `Portal`'s does.
+ *
+ * @function PopupPortal
+ * @param props - The children, and `disabled`.
+ * @returns The portal, the children in place when `disabled`, or nothing
+ * before hydration.
+ */
+function PopupPortal({ children, disabled = false, }) {
+    const container = usePopupContainer();
+    return (jsxRuntime.jsx(Portal, { disabled: disabled, container: container, children: children }));
+}
 
 /**
  * How long after an item appears its announcement is written, in ms. The wait
@@ -4634,9 +4713,12 @@ const CopyButton = React.forwardRef(function CopyButton({ value, duration = 2000
     // the button takes focus or a click, rather than once as it mounts,
     // since Modal and Sidebar keep their content mounted while closed, and
     // only an open one is `aria-modal`. A region that moves starts empty, so
-    // it doesn't say the last outcome again. This lookup can go once the
-    // overlays hand their content their own root as its portal container
-    // (#1471).
+    // it doesn't say the last outcome again. The popups inside a Modal,
+    // Dialog or Command.Dialog portal into it on their own, but this lookup
+    // stays: it finds a modal dialog the library didn't render too, such as
+    // a `<dialog>` opened with `showModal()`, and unlike theirs, it wins over
+    // a `portalContainer`, since a live region outside the dialog says
+    // nothing.
     const [dialog, setDialog] = React.useState(null);
     const placeRegion = (button) => {
         const next = closestModalDialog(button);
@@ -5117,7 +5199,7 @@ const MenuItem = React.forwardRef(function MenuItem(itemProps, ref) {
     const labelChildren = [];
     const nestedMenuLists = [];
     React.Children.forEach(children, child => {
-        if (React.isValidElement(child) && child.type === MenuList) {
+        if (isElementOf(child, MenuList)) {
             nestedMenuLists.push(child);
         }
         else {
@@ -6101,12 +6183,16 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
     const modalRootRef = React.useRef(null);
     // Cleanup returned by a consumer's callback ref on attach, held until detach.
     const consumerCleanupRef = React.useRef(null);
+    // The root, as state, for the popups inside to portal into: outside it,
+    // its `aria-modal` hides them from screen readers.
+    const [scopeNode, setScopeNode] = React.useState(null);
     // The forwarded ref and the internal one must both see the node: focus
     // management and the Tab trap read `modalRootRef`, while consumers expect
     // their own ref to resolve.
     const combinedRef = React.useCallback((node) => {
         modalRootRef.current =
             node;
+        setScopeNode(node);
         if (typeof ref === 'function') {
             // React 19 lets a callback ref return a cleanup function and detaches
             // by running it instead of calling the ref with `null`; React 18
@@ -6221,11 +6307,7 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
         // the same element and restore-on-close still lands in the right place.
     }, [isModalActive, isPortaled, portal, defaultTarget]);
     // Check if children contain compound components
-    const hasCompoundComponents = React.Children.toArray(children).some(child => React.isValidElement(child) &&
-        (child.type === ModalBackground ||
-            child.type === ModalContent ||
-            child.type === ModalCard ||
-            child.type === ModalClose));
+    const hasCompoundComponents = React.Children.toArray(children).some(child => isElementOf(child, ModalBackground, ModalContent, ModalCard, ModalClose));
     // Generate Bulma classes with prefix
     const bulmaClasses = usePrefixedClassNames('modal', {
         'is-active': isModalActive,
@@ -6255,8 +6337,9 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
             isModalCard = !!modalCardTitle || !!modalCardFoot;
         modalElement = (jsxRuntime.jsxs("div", { className: modalClasses, ref: combinedRef, role: resolvedRole, "aria-modal": resolvedAriaModal, "aria-labelledby": titleId, tabIndex: -1, ...rest, "data-testid": "modal", children: [jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'modal-background'), onClick: onClose, "data-testid": "modal-background" }), isModalCard ? (jsxRuntime.jsxs("div", { className: prefixedClassNames(classPrefix, 'modal-card'), children: [modalCardTitle && (jsxRuntime.jsxs("header", { className: prefixedClassNames(classPrefix, 'modal-card-head'), children: [jsxRuntime.jsx("p", { id: titleId, className: prefixedClassNames(classPrefix, 'modal-card-title'), children: modalCardTitle }), onClose && (jsxRuntime.jsx("button", { className: deleteClass, "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close" }))] })), jsxRuntime.jsx("section", { className: prefixedClassNames(classPrefix, 'modal-card-body'), "data-testid": "modal-body", children: children }), modalCardFoot && (jsxRuntime.jsx("footer", { className: prefixedClassNames(classPrefix, 'modal-card-foot'), children: modalCardFoot }))] })) : (jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'modal-content'), "data-testid": "modal-content", children: children })), (!isModalCard || (!modalCardTitle && onClose)) && onClose && (jsxRuntime.jsx("button", { className: prefixedClassNames(classPrefix, 'modal-close', 'is-large'), "aria-label": "close", onClick: onClose, type: "button", "data-testid": "modal-close-float" }))] }));
     }
-    // In both forms, so a `Modal.Close` anywhere inside closes this modal.
-    modalElement = (jsxRuntime.jsx(ModalCloseContext.Provider, { value: onClose, children: modalElement }));
+    // In both forms, so a `Modal.Close` anywhere inside closes this modal, and
+    // a popup anywhere inside portals into it.
+    modalElement = (jsxRuntime.jsx(ModalCloseContext.Provider, { value: onClose, children: jsxRuntime.jsx(PortalScope, { node: scopeNode, children: modalElement }) }));
     return (jsxRuntime.jsx(Portal, { disabled: !isPortaled, container: container, children: modalElement }));
 });
 const Modal = withSubComponents(ModalRoot, {
@@ -7020,7 +7103,7 @@ const TabsComponent = ({ align, size, isFullwidth, isFullWidth, fullwidth, boxed
         tabStop = enabledTabs.length > 0 ? enabledTabs[0].index : null;
     // Check if children include TabsContent
     const childArray = React.Children.toArray(children);
-    const hasContent = childArray.some(child => React.isValidElement(child) && child.type === TabsContent);
+    const hasContent = childArray.some(child => isElementOf(child, TabsContent));
     const contextValue = {
         activeTab,
         setActiveTab,
@@ -7057,7 +7140,7 @@ const TabsComponent = ({ align, size, isFullwidth, isFullWidth, fullwidth, boxed
         const listChildren = [];
         const contentChildren = [];
         childArray.forEach(child => {
-            if (React.isValidElement(child) && child.type === TabsContent) {
+            if (isElementOf(child, TabsContent)) {
                 contentChildren.push(child);
             }
             else {
@@ -7071,7 +7154,7 @@ const TabsComponent = ({ align, size, isFullwidth, isFullWidth, fullwidth, boxed
         const listChildren = [];
         const contentChildren = [];
         childArray.forEach(child => {
-            if (React.isValidElement(child) && child.type === TabsContent) {
+            if (isElementOf(child, TabsContent)) {
                 contentChildren.push(child);
             }
             else {
@@ -8563,7 +8646,9 @@ const samePosition = (a, b) => a.position === b.position &&
  * anchor changes size, so a fixed panel follows its anchor and its own
  * content. Those measure once in the next frame, however many arrive before
  * it. With `followContent` it also measures after each render. A
- * measurement that changes nothing doesn't render again.
+ * measurement that changes nothing doesn't render again. A panel that's
+ * replaced while it's open, as a portal moving to another target replaces
+ * it, is watched from the next measurement on.
  *
  * The first measurement happens in a layout effect, so the panel is placed
  * before it paints. It needs both elements on the page while `active` is
@@ -8587,11 +8672,25 @@ function useAnchoredPosition(anchorRef, panelRef, { active, position, fixed, off
             return undefined;
         const view = (anchorRef.current ?? panelRef.current)?.ownerDocument.defaultView ??
             window;
+        // The panel's content can change size without the component holding the
+        // hook rendering, as an image loading or a child's own state does, and
+        // so can the anchor. Set up below, once `update` exists.
+        let resizes = null;
+        // The panel being watched. A portal that moves to another target
+        // remounts the panel, as a popup that opens with the dialog it's in
+        // does, so each measurement watches the one that's there now.
+        let watched = null;
         const update = () => {
             const anchor = anchorRef.current;
             const panel = panelRef.current;
             if (!anchor || !panel)
                 return;
+            if (panel !== watched) {
+                if (watched)
+                    resizes?.unobserve(watched);
+                resizes?.observe(panel);
+                watched = panel;
+            }
             const rect = anchor.getBoundingClientRect();
             const measured = panel.getBoundingClientRect();
             // The width the panel has once it's at least as wide as the anchor.
@@ -8622,8 +8721,6 @@ function useAnchoredPosition(anchorRef, panelRef, { active, position, fixed, off
                 : { position: corner };
             setResolved(prev => (samePosition(prev, next) ? prev : next));
         };
-        updateRef.current = update;
-        update();
         // A scroll, a resize or a change in size measures in the next frame,
         // once however many of them ask.
         let frame = 0;
@@ -8635,17 +8732,14 @@ function useAnchoredPosition(anchorRef, panelRef, { active, position, fixed, off
                 update();
             });
         };
+        const Observer = view.ResizeObserver;
+        resizes = typeof Observer === 'undefined' ? null : new Observer(schedule);
+        if (anchorRef.current)
+            resizes?.observe(anchorRef.current);
+        updateRef.current = update;
+        update();
         view.addEventListener('resize', schedule, { passive: true });
         view.addEventListener('scroll', schedule, { passive: true, capture: true });
-        // The panel's content can change size without the component holding the
-        // hook rendering, as an image loading or a child's own state does, and
-        // so can the anchor.
-        const Observer = view.ResizeObserver;
-        const resizes = typeof Observer === 'undefined' ? null : new Observer(schedule);
-        for (const element of [anchorRef.current, panelRef.current]) {
-            if (element)
-                resizes?.observe(element);
-        }
         return () => {
             updateRef.current = null;
             view.cancelAnimationFrame(frame);
@@ -8887,7 +8981,7 @@ const PopoverComponent = ({ trigger, children, open: controlledOpen, defaultOpen
         'is-start-aligned': position === undefined,
         'is-portal': appendToBody,
     }), contentClassName);
-    return (jsxRuntime.jsxs("div", { className: rootClasses, ...rest, ref: rootRef, children: [clonedTrigger, isOpen && (jsxRuntime.jsx(Portal, { disabled: !appendToBody, children: jsxRuntime.jsx(PopoverPanel, { panelRef: panelRef, titleId: titleId, ariaLabel: ariaLabel, close: close, id: panelId, className: panelClasses, style: appendToBody
+    return (jsxRuntime.jsxs("div", { className: rootClasses, ...rest, ref: rootRef, children: [clonedTrigger, isOpen && (jsxRuntime.jsx(PopupPortal, { disabled: !appendToBody, children: jsxRuntime.jsx(PopoverPanel, { panelRef: panelRef, titleId: titleId, ariaLabel: ariaLabel, close: close, id: panelId, className: panelClasses, style: appendToBody
                         ? {
                             position: 'fixed',
                             top: resolved.top,
@@ -9080,7 +9174,7 @@ const HoverCard = ({ trigger, children, open: controlledOpen, defaultOpen = fals
         [`is-${resolved.position}`]: true,
         'is-portal': appendToBody,
     }), contentClassName);
-    return (jsxRuntime.jsxs("span", { className: rootClasses, ...attrs, onPointerEnter: chain$1(onPointerEnter, hover.onPointerEnter), onPointerOver: chain$1(onPointerOver, hover.onPointerOver), onPointerLeave: chain$1(onPointerLeave, hover.onPointerLeave), onFocus: chain$1(onFocus, hover.onFocus), onBlur: chain$1(onBlur, hover.onBlur), onPointerDown: chain$1(onPointerDown, hover.onPointerDown), onPointerUp: chain$1(onPointerUp, hover.onPointerUp), ref: rootRef, children: [clonedTrigger, isOpen && (jsxRuntime.jsx(Portal, { disabled: !appendToBody, children: jsxRuntime.jsx("div", { ref: cardRef, id: cardId, className: cardClasses, style: appendToBody
+    return (jsxRuntime.jsxs("span", { className: rootClasses, ...attrs, onPointerEnter: chain$1(onPointerEnter, hover.onPointerEnter), onPointerOver: chain$1(onPointerOver, hover.onPointerOver), onPointerLeave: chain$1(onPointerLeave, hover.onPointerLeave), onFocus: chain$1(onFocus, hover.onFocus), onBlur: chain$1(onBlur, hover.onBlur), onPointerDown: chain$1(onPointerDown, hover.onPointerDown), onPointerUp: chain$1(onPointerUp, hover.onPointerUp), ref: rootRef, children: [clonedTrigger, isOpen && (jsxRuntime.jsx(PopupPortal, { disabled: !appendToBody, children: jsxRuntime.jsx("div", { ref: cardRef, id: cardId, className: cardClasses, style: appendToBody
                         ? {
                             position: 'fixed',
                             top: resolved.top,
@@ -9274,14 +9368,15 @@ function chain(own, ours) {
  *
  * Shift+F10 and the context menu key open it too, where the browser fires
  * `contextmenu` for them, which Windows and Linux do. The menu is Dropdown's
- * markup, portaled into the `portalContainer` a `ConfigProvider` sets, or
- * the end of the trigger's own document's `<body>`, so it never has server
- * markup. It opens below and to the right of the point, flips above or to
+ * markup, portaled, so it never has server markup: into the
+ * `portalContainer` a `ConfigProvider` sets, else the `Modal`, `Dialog` or
+ * `Command.Dialog` it's in, where screen readers that honor the dialog's
+ * `aria-modal` reach it, else the end of the trigger's own document's
+ * `<body>`. It opens below and to the right of the point, flips above or to
  * the left where there's no room, moves in where it fits neither way, and
  * scrolls inside when it's taller than the viewport. It doesn't follow the
- * trigger, since scrolling closes it. Inside a `Modal` or a shadow root,
- * point `portalContainer` inside it, so screen readers that honor
- * `aria-modal` reach the menu and the shadow root's styles apply.
+ * trigger, since scrolling closes it. Inside a shadow root, point
+ * `portalContainer` inside it, so the shadow root's styles apply.
  *
  * Opening moves focus to the first enabled item. The arrow keys, Home, End
  * and typing move between items, and Enter and Space activate one. Escape,
@@ -9305,7 +9400,7 @@ function chain(own, ours) {
  */
 const ContextMenuComponent = ({ trigger, children, onOpenChange, closeOnClick = true, disabled = false, className, onKeyDown, onClick, onContextMenu, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const { portalContainer } = useConfig();
+    const popupContainer = usePopupContainer();
     const [menu, setMenu] = React.useState(null);
     // Turning `disabled` on closes it.
     if (disabled && menu)
@@ -9462,7 +9557,7 @@ const ContextMenuComponent = ({ trigger, children, onOpenChange, closeOnClick =
     });
     const menuClasses = classNames(usePrefixedClassNames('dropdown-menu'), bulmaHelperClasses, className);
     const contentClasses = usePrefixedClassNames('dropdown-content');
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [clonedTrigger, menu && (jsxRuntime.jsx(Portal, { container: portalContainer || menu.doc.body, children: jsxRuntime.jsx("div", { ref: boxRef, className: boxClasses, style: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [clonedTrigger, menu && (jsxRuntime.jsx(Portal, { container: popupContainer || menu.doc.body, children: jsxRuntime.jsx("div", { ref: boxRef, className: boxClasses, style: {
                         top: placed?.top ?? menu.point.y,
                         left: placed?.left ?? menu.point.x,
                     }, children: jsxRuntime.jsx("div", { ...rest, ref: menuRef, role: "menu", tabIndex: -1, className: menuClasses, onKeyDown: handleKeyDown, onClick: handleClick, onContextMenu: handleContextMenu, children: jsxRuntime.jsx("div", { className: contentClasses, children: children }) }) }) }))] }));
@@ -10419,6 +10514,9 @@ const Dialog = React.forwardRef(({ isOpen, title, message, type = 'default', con
     const dialogRef = React.useRef(null);
     // Cleanup returned by a consumer's callback ref on attach, held until detach.
     const consumerCleanupRef = React.useRef(null);
+    // The box, as state, for the popups in the message to portal into. It's
+    // what carries `aria-modal`, rather than the Modal's root around it.
+    const [scopeNode, setScopeNode] = React.useState(null);
     const confirmRef = React.useRef(null);
     const cancelRef = React.useRef(null);
     // Handle cancel
@@ -10455,6 +10553,7 @@ const Dialog = React.forwardRef(({ isOpen, title, message, type = 'default', con
     const combinedRef = React.useCallback((node) => {
         dialogRef.current =
             node;
+        setScopeNode(node);
         if (typeof ref === 'function') {
             // React 19 lets a callback ref return a cleanup function and detaches by
             // running it instead of calling the ref with `null`; React 18 discards the
@@ -10520,7 +10619,7 @@ const Dialog = React.forwardRef(({ isOpen, title, message, type = 'default', con
     if (!isOpen) {
         return null;
     }
-    return (jsxRuntime.jsxs(Modal, { isActive: isOpen, onClose: handleCancel, role: "presentation", portal: portal, children: [jsxRuntime.jsx(Modal.Background, { onClick: handleBackgroundClick }), jsxRuntime.jsxs("div", { ref: combinedRef, className: combinedClasses, role: "alertdialog", "aria-modal": "true", "aria-labelledby": title ? 'dialog-title' : undefined, "aria-describedby": "dialog-message", ...rest, children: [title && (jsxRuntime.jsxs("div", { className: headerClass, children: [displayIcon && jsxRuntime.jsx("span", { className: iconClass, children: displayIcon }), jsxRuntime.jsx("h3", { id: "dialog-title", className: titleClass, children: title })] })), jsxRuntime.jsx("div", { id: "dialog-message", className: bodyClass, children: message }), jsxRuntime.jsxs("div", { className: footerClass, children: [showCancel && (jsxRuntime.jsx("button", { ref: cancelRef, type: "button", className: cancelButtonClass, onClick: handleCancel, children: cancelText })), jsxRuntime.jsx("button", { ref: confirmRef, type: "button", className: confirmButtonClass, onClick: handleConfirm, children: confirmText })] })] })] }));
+    return (jsxRuntime.jsxs(Modal, { isActive: isOpen, onClose: handleCancel, role: "presentation", portal: portal, children: [jsxRuntime.jsx(Modal.Background, { onClick: handleBackgroundClick }), jsxRuntime.jsx(PortalScope, { node: scopeNode, children: jsxRuntime.jsxs("div", { ref: combinedRef, className: combinedClasses, role: "alertdialog", "aria-modal": "true", "aria-labelledby": title ? 'dialog-title' : undefined, "aria-describedby": "dialog-message", ...rest, children: [title && (jsxRuntime.jsxs("div", { className: headerClass, children: [displayIcon && (jsxRuntime.jsx("span", { className: iconClass, children: displayIcon })), jsxRuntime.jsx("h3", { id: "dialog-title", className: titleClass, children: title })] })), jsxRuntime.jsx("div", { id: "dialog-message", className: bodyClass, children: message }), jsxRuntime.jsxs("div", { className: footerClass, children: [showCancel && (jsxRuntime.jsx("button", { ref: cancelRef, type: "button", className: cancelButtonClass, onClick: handleCancel, children: cancelText })), jsxRuntime.jsx("button", { ref: confirmRef, type: "button", className: confirmButtonClass, onClick: handleConfirm, children: confirmText })] })] }) })] }));
 });
 Dialog.displayName = 'Dialog';
 let dialogListeners = new Set();
@@ -14218,12 +14317,11 @@ const FieldComponent = ({ horizontal, grouped, hasAddons, narrow, label, labelSi
     // like <Field.Label/> + <Field.Body/>).
     let content = children;
     if (horizontal) {
-        const isFieldBody = (c) => React.isValidElement(c) &&
-            // @ts-expect-error displayName isn't on the public type
-            (c.type === FieldBody || c.type?.displayName === 'FieldBody');
-        const isFieldLabel = (c) => React.isValidElement(c) &&
-            // @ts-expect-error displayName isn't on the public type
-            (c.type === FieldLabel || c.type?.displayName === 'FieldLabel');
+        const named = (c, displayName) => React.isValidElement(c) &&
+            elementType(c)?.displayName ===
+                displayName;
+        const isFieldBody = (c) => isElementOf(c, FieldBody) || named(c, 'FieldBody');
+        const isFieldLabel = (c) => isElementOf(c, FieldLabel) || named(c, 'FieldLabel');
         const childArray = React.Children.toArray(children);
         const userProvidedStructure = childArray.some(c => isFieldBody(c) || isFieldLabel(c));
         if (userProvidedStructure) {
@@ -15057,6 +15155,16 @@ const CommandDialog = React.forwardRef(({ open: controlledOpen, defaultOpen = fa
         return () => window.removeEventListener('keydown', onKeyDown);
     }, [shortcut, open, openFromShortcut]);
     const dialogClass = usePrefixedClassNames('command-dialog');
+    // The box, as state, for the popups inside to portal into. It's what
+    // carries `aria-modal`, rather than the Modal's root around it.
+    const [scopeNode, setScopeNode] = React.useState(null);
+    const dialogRef = React.useCallback((node) => {
+        setScopeNode(node);
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
     if (!open)
         return null;
     const close = () => setOpen(false);
@@ -15065,9 +15173,9 @@ const CommandDialog = React.forwardRef(({ open: controlledOpen, defaultOpen = fa
         if (closeOnSelect)
             close();
     };
-    return (jsxRuntime.jsxs(Modal, { isActive: true, onClose: close, role: "presentation", portal: portal, children: [jsxRuntime.jsx(Modal.Background, { onClick: close }), jsxRuntime.jsx(CommandRoot, { ...props, ref: ref, className: classNames(dialogClass, className), label: label, query: query, onQueryChange: setQuery, onSelect: run, role: "dialog", "aria-modal": "true", "aria-label": ariaLabelledBy === undefined
-                    ? ariaLabel || label || defaultLabel
-                    : ariaLabel, "aria-labelledby": ariaLabelledBy })] }));
+    return (jsxRuntime.jsxs(Modal, { isActive: true, onClose: close, role: "presentation", portal: portal, children: [jsxRuntime.jsx(Modal.Background, { onClick: close }), jsxRuntime.jsx(PortalScope, { node: scopeNode, children: jsxRuntime.jsx(CommandRoot, { ...props, ref: dialogRef, className: classNames(dialogClass, className), label: label, query: query, onQueryChange: setQuery, onSelect: run, role: "dialog", "aria-modal": "true", "aria-label": ariaLabelledBy === undefined
+                        ? ariaLabel || label || defaultLabel
+                        : ariaLabel, "aria-labelledby": ariaLabelledBy }) })] }));
 });
 CommandDialog.displayName = 'CommandDialog';
 /** Command with Input, List, Group, Item, Empty and Dialog sub-components. */
@@ -17582,7 +17690,7 @@ const StatRoot = React.forwardRef(({ className, label, value, format, locale, ch
     // warning below know what's there. A part rendered from inside another
     // component isn't seen.
     const parts = flattenChildren(children);
-    const hasPart = (type) => parts.some(part => React.isValidElement(part) && part.type === type);
+    const hasPart = (type) => parts.some(part => isElementOf(part, type));
     const hasValuePart = hasPart(StatValue);
     const labelled = isGiven(label) || hasPart(StatLabel);
     // Without a label, the figure has no name and the values no term.
@@ -20909,7 +21017,7 @@ const ComboboxMenu = ({ children, className, style, onMouseDown, onPointerDownCa
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
     if (!shown)
         return null;
-    return (jsxRuntime.jsx(Portal, { disabled: !appendToBody, children: jsxRuntime.jsx("div", { ...props, ref: panelRef, className: classNames(menuClass, className), style: appendToBody
+    return (jsxRuntime.jsx(PopupPortal, { disabled: !appendToBody, children: jsxRuntime.jsx("div", { ...props, ref: panelRef, className: classNames(menuClass, className), style: appendToBody
                 ? {
                     ...style,
                     position: 'fixed',
@@ -21297,7 +21405,7 @@ function searchTree(data, matches) {
 const isBrowser = typeof window !== 'undefined';
 const PickerPopover = ({ isOpen, onClose, anchorRef, children, position, 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();
+    const popupContainer = usePopupContainer();
     // A portal has no server-rendered counterpart, so a panel open on the first
     // render stays in place on the server and while hydrating, and moves into
     // its portal once the client takes over, as Modal's `portal` does.
@@ -21404,7 +21512,7 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position, appendT
                 e.preventDefault();
         }, children: children }));
     if (isPortaled) {
-        const target = resolveContainer();
+        const target = resolvePortalContainer(popupContainer);
         return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, scope: localeScope, children: panel }), target);
     }
     return panel;
@@ -24685,6 +24793,11 @@ const inWeeks = (days, className) => {
     }
     return rows;
 };
+/** Sunday-first weekday names, starting from `firstDayOfWeek` instead. */
+const fromFirstDay = (sundayFirst, firstDayOfWeek) => [
+    ...sundayFirst.slice(firstDayOfWeek),
+    ...sundayFirst.slice(0, firstDayOfWeek),
+];
 /** A date's time, or `null` for none, for comparing ranges by value. */
 const timeOf = (d) => d ? d.getTime() : null;
 /**
@@ -24728,15 +24841,18 @@ const Calendar = ({ value, focusedDate, onSelect: onSelectProp, onFocusedDateCha
     const [view, setView] = React.useState(baseView);
     // Nothing before year 1 can be picked or reached, as in HTML's date inputs.
     const min = React.useMemo(() => floorMin(minProp), [minProp]);
-    const computedDayNames = React.useMemo(() => {
-        if (dayNames && dayNames.length === 7)
-            return dayNames;
-        const sundayFirst = getDayNames(locale, 'short');
-        return [
-            ...sundayFirst.slice(firstDayOfWeek),
-            ...sundayFirst.slice(0, firstDayOfWeek),
-        ];
-    }, [dayNames, locale, firstDayOfWeek]);
+    const customDayNames = dayNames && dayNames.length === 7 ? dayNames : null;
+    const computedDayNames = React.useMemo(() => customDayNames ??
+        fromFirstDay(getDayNames(locale, 'short'), firstDayOfWeek), [customDayNames, locale, firstDayOfWeek]);
+    // Each weekday column is named by its full weekday in the locale, so a
+    // screen reader names the column as focus moves across the grid. A server
+    // and a browser can spell those names differently, so they're added only
+    // once the page has hydrated, and never beside day names the caller gave,
+    // which name the columns themselves.
+    const hydrated = useIsHydrated();
+    const weekdayNames = React.useMemo(() => hydrated && !customDayNames
+        ? fromFirstDay(getDayNames(locale, 'long'), firstDayOfWeek)
+        : null, [hydrated, customDayNames, locale, firstDayOfWeek]);
     const computedMonthNames = React.useMemo(() => {
         if (monthNames && monthNames.length === 12)
             return monthNames;
@@ -25023,7 +25139,6 @@ const Calendar = ({ value, focusedDate, onSelect: onSelectProp, onFocusedDateCha
     // server render and the render hydrating it mark no day, month or year,
     // and the commit after marks the browser's own. A calendar mounted after
     // hydration marks it from its first render.
-    const hydrated = useIsHydrated();
     const today = hydrated ? new Date() : null;
     const todayYear = today?.getFullYear();
     // The header steps a month at a time over the day grid and a year at a
@@ -25232,7 +25347,7 @@ const Calendar = ({ value, focusedDate, onSelect: onSelectProp, onFocusedDateCha
     return (jsxRuntime.jsxs("div", { className: classNames(calendarClass, className), id: id, children: [jsxRuntime.jsxs("div", { className: headerClass, children: [isYearGranularity ? (jsxRuntime.jsx("span", { className: monthLabelClass, id: labelId, children: monthLabel })) : (jsxRuntime.jsxs("button", { type: "button", className: monthTriggerClass, "aria-haspopup": "listbox", "aria-expanded": view === 'years', disabled: calendarDisabled, onClick: () => {
                             setNavYear(null);
                             setView(v => (v === 'years' ? baseView : 'years'));
-                        }, children: [jsxRuntime.jsx("span", { className: monthLabelClass, id: labelId, "aria-live": "polite", children: monthLabel }), jsxRuntime.jsx("svg", { className: monthCaretClass, viewBox: "0 0 12 12", width: "10", height: "10", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M2 4l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), !isYearGranularity && (jsxRuntime.jsxs("div", { className: navGroupClass, children: [jsxRuntime.jsx("button", { type: "button", className: navPrevClass, "aria-label": isDayGranularity ? t.prevMonth : t.prevYear, disabled: calendarDisabled || prevDisabled || view !== baseView, onClick: () => onFocusedDateChange(prevAnchor), children: navArrow('M10 3l-5 5 5 5') }), jsxRuntime.jsx("button", { type: "button", className: navNextClass, "aria-label": isDayGranularity ? t.nextMonth : t.nextYear, disabled: calendarDisabled || nextDisabled || view !== baseView, onClick: () => onFocusedDateChange(nextAnchor), children: navArrow('M6 3l5 5-5 5') })] }))] }), view === 'days' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: dayNamesRowClass, "aria-hidden": "true", children: computedDayNames.map((name, i) => (jsxRuntime.jsx("div", { className: dayNameClass, children: name }, i))) }), jsxRuntime.jsx("div", { ref: gridRef, role: "grid", "aria-labelledby": labelId, "aria-multiselectable": rangeMode || undefined, "aria-describedby": rangeMode ? rangeSummaryId : undefined, "aria-disabled": calendarDisabled || undefined, "aria-readonly": readOnly || undefined, className: gridClass, onKeyDown: handleKeyDown, onMouseLeave: anchor ? () => setHoverDate(null) : undefined, ...gridFocusHandlers, children: inWeeks(cells.map(cell => {
+                        }, children: [jsxRuntime.jsx("span", { className: monthLabelClass, id: labelId, "aria-live": "polite", children: monthLabel }), jsxRuntime.jsx("svg", { className: monthCaretClass, viewBox: "0 0 12 12", width: "10", height: "10", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M2 4l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), !isYearGranularity && (jsxRuntime.jsxs("div", { className: navGroupClass, children: [jsxRuntime.jsx("button", { type: "button", className: navPrevClass, "aria-label": isDayGranularity ? t.prevMonth : t.prevYear, disabled: calendarDisabled || prevDisabled || view !== baseView, onClick: () => onFocusedDateChange(prevAnchor), children: navArrow('M10 3l-5 5 5 5') }), jsxRuntime.jsx("button", { type: "button", className: navNextClass, "aria-label": isDayGranularity ? t.nextMonth : t.nextYear, disabled: calendarDisabled || nextDisabled || view !== baseView, onClick: () => onFocusedDateChange(nextAnchor), children: navArrow('M6 3l5 5-5 5') })] }))] }), view === 'days' && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { ref: gridRef, role: "grid", "aria-labelledby": labelId, "aria-multiselectable": rangeMode || undefined, "aria-describedby": rangeMode ? rangeSummaryId : undefined, "aria-disabled": calendarDisabled || undefined, "aria-readonly": readOnly || undefined, className: gridClass, onKeyDown: handleKeyDown, onMouseLeave: anchor ? () => setHoverDate(null) : undefined, ...gridFocusHandlers, children: [jsxRuntime.jsx("div", { role: "row", className: dayNamesRowClass, children: computedDayNames.map((name, i) => (jsxRuntime.jsx("div", { role: "columnheader", "aria-label": weekdayNames?.[i], className: dayNameClass, children: name }, i))) }), inWeeks(cells.map(cell => {
                             const disabled = calendarDisabled || isDateUnselectable(cell.date);
                             const time = cell.date.getTime();
                             // Range mode. The range on show has its ends filled. Every day
@@ -25295,7 +25410,7 @@ const Calendar = ({ value, focusedDate, onSelect: onSelectProp, onFocusedDateCha
                                     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, "aria-disabled": calendarDisabled || undefined, "aria-readonly": readOnly || undefined, className: monthsGridClass, onKeyDown: handleMonthKeyDown, ...gridFocusHandlers, children: MONTH_ROWS.map(row => (jsxRuntime.jsx("div", { role: "row", className: monthsRowClass, children: row.map(month => {
+                        }), weekClass)] }) })), view === 'months' && (jsxRuntime.jsx("div", { ref: monthGridRef, role: "grid", "aria-labelledby": labelId, "aria-disabled": calendarDisabled || undefined, "aria-readonly": readOnly || undefined, 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 = calendarDisabled || disabledMonths[month];
                         const isSelected = !!value && isSameMonth(value, date);
@@ -30115,8 +30230,8 @@ const AppFrameBurger = React.forwardRef(({ className, onClick, ...props }, ref)
         } }));
 });
 AppFrameBurger.displayName = 'AppFrame.Burger';
-const isMain = (child) => React.isValidElement(child) && child.type === AppFrameMain;
-const isNav = (child) => React.isValidElement(child) && child.type === AppFrameNav;
+const isMain = (child) => isElementOf(child, AppFrameMain);
+const isNav = (child) => isElementOf(child, 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.
  *
@@ -30916,7 +31031,7 @@ const SplitterPane = React.forwardRef(({ className, textColor, bgColor, label: _
         style: state ? { ...style, flex: `${state.size} 1 0px` } : style, hidden: state?.collapsed || rest.hidden, children: children }));
 });
 SplitterPane.displayName = 'Splitter.Pane';
-const isPane = (child) => React.isValidElement(child) && child.type === SplitterPane;
+const isPane = (child) => isElementOf(child, SplitterPane);
 /** The bounds with pane `i`'s changed, for a move that mustn't snap it shut. */
 const withBound = (bounds, i, change) => bounds.map((bound, j) => (j === i ? { ...bound, ...change } : bound));
 /** The bounds with neither pane beside handle `h` able to shut. */