@allxsmith/bestax-bulma 5.18.1 → 5.19.0

package/dist/index.esm.js

@@ -427,10 +427,59 @@ const validViewports = [
  */
 const validFloats = ['left', 'right'];
 /**
- * Valid Bulma overflow classes.
- * @example 'clipped'
+ * Valid Bulma overflow values for one axis, taken by `overflowX` and
+ * `overflowY`. Each renders `is-overflow-x-<value>` or `is-overflow-y-<value>`.
+ * @example 'auto', 'hidden', 'scroll'
  */
-const validOverflows = ['clipped'];
+const validAxisOverflows = [
+    'auto',
+    'clip',
+    'hidden',
+    'scroll',
+    'visible',
+];
+/**
+ * Valid Bulma overflow values for `overflow`.
+ *
+ * `clipped` renders `is-clipped`, the helper `overflow` started with. Every
+ * other value renders `is-overflow-<value>`.
+ * @example 'clipped', 'auto', 'hidden'
+ */
+const validOverflows = ['clipped', ...validAxisOverflows];
+/**
+ * Valid Bulma position values, taken by `pos`. Each renders
+ * `is-position-<value>`.
+ * @example 'relative', 'absolute', 'sticky'
+ */
+const validPositions = [
+    'absolute',
+    'fixed',
+    'relative',
+    'static',
+    'sticky',
+];
+/**
+ * Valid Bulma aspect ratios, taken by `aspectRatio`. Each renders
+ * `is-aspect-ratio-<value>`.
+ * @example '1by1', '4by3', '16by9'
+ */
+const validAspectRatios = [
+    '1by1',
+    '5by4',
+    '4by3',
+    '3by2',
+    '5by3',
+    '16by9',
+    '2by1',
+    '3by1',
+    '4by5',
+    '3by4',
+    '2by3',
+    '3by5',
+    '9by16',
+    '1by2',
+    '1by3',
+];
 /**
  * Valid Bulma interaction classes.
  * @example 'unselectable', 'clickable'
@@ -458,10 +507,19 @@ const cursorClasses = {
     help: 'is-cursor-help',
 };
 /**
- * Valid Bulma border-radius helper classes.
- * @example 'radiusless'
+ * Valid Bulma border-radius helper values.
+ *
+ * `radiusless` renders `is-radiusless` and removes the radius. The sizes
+ * render `has-radius-<value>` and set one from Bulma's radius scale.
+ * @example 'radiusless', 'small', 'rounded'
  */
-const validRadii = ['radiusless'];
+const validRadii = [
+    'radiusless',
+    'small',
+    'normal',
+    'large',
+    'rounded',
+];
 /**
  * Valid Bulma shadow helper classes.
  * @example 'shadowless'
@@ -922,7 +980,7 @@ const useFlexboxClasses = (props) => {
 /**
  * A hook that generates miscellaneous Bulma helper classes (float, overflow,
  * overlay, interaction, cursor, radius, shadow, responsive, skeleton,
- * clearfix, relative, and full height).
+ * clearfix, position, full height, and aspect ratio).
  *
  * @function useOtherClasses
  * @param props - Miscellaneous Bulma helper props.
@@ -933,15 +991,32 @@ const useFlexboxClasses = (props) => {
  */
 const useOtherClasses = (props) => {
     const { classPrefix } = useConfig();
-    const { float, overflow, overlay, interaction, cursor, radius, shadow, responsive, skeleton, clearfix, relative, fullHeight, } = props;
+    const { float, overflow, overflowX, overflowY, overlay, interaction, cursor, radius, shadow, responsive, skeleton, clearfix, pos, relative, fullHeight, aspectRatio, } = props;
     return useMemo(() => {
         const { classes, addPrefixedClass, addClassNoViewport } = createBulmaClassHelpers(classPrefix);
         // Other Helpers (no viewport support)
         if (float) {
             addClassNoViewport('is-pulled', float, validFloats);
         }
-        if (overflow) {
-            addClassNoViewport('is', overflow, validOverflows);
+        // Bulma's overflow helpers are all `!important` at the same specificity
+        // and ordered by value rather than by axis, so a both-axes class beside an
+        // axis class would be settled by which value comes later in the
+        // stylesheet. Once an axis prop is set, both axes are written per axis
+        // instead: the axis prop wins its own, and `overflow` fills in the other,
+        // `clipped` being `overflow: hidden`.
+        const axisX = validAxisOverflows.find(v => v === overflowX);
+        const axisY = validAxisOverflows.find(v => v === overflowY);
+        if (axisX || axisY) {
+            const rest = overflow === 'clipped' ? 'hidden' : overflow;
+            addClassNoViewport('is-overflow-x', axisX ?? rest, validAxisOverflows);
+            addClassNoViewport('is-overflow-y', axisY ?? rest, validAxisOverflows);
+        }
+        else if (overflow === 'clipped') {
+            // The older helper, which keeps its own class.
+            addPrefixedClass('is-clipped');
+        }
+        else {
+            addClassNoViewport('is-overflow', overflow, validAxisOverflows);
         }
         if (overlay) {
             addPrefixedClass('is-overlay');
@@ -952,8 +1027,13 @@ const useOtherClasses = (props) => {
         if (cursor && validCursors.includes(cursor)) {
             addPrefixedClass(cursorClasses[cursor]);
         }
-        if (radius) {
-            addClassNoViewport('is', radius, validRadii);
+        // `radiusless` is an `is-` helper that removes the radius; the sizes are
+        // Bulma's `has-radius-` helpers.
+        if (radius === 'radiusless') {
+            addPrefixedClass('is-radiusless');
+        }
+        else {
+            addClassNoViewport('has-radius', radius, validRadii);
         }
         if (shadow) {
             addClassNoViewport('is', shadow, validShadows);
@@ -969,19 +1049,26 @@ const useOtherClasses = (props) => {
         if (clearfix) {
             addPrefixedClass('is-clearfix');
         }
-        // Position Relative Helper
-        if (relative) {
+        // Position Helpers. A valid `pos` decides the position on its own, so a
+        // `relative` beside it cannot add a second, conflicting one.
+        if (pos && validPositions.includes(pos)) {
+            addPrefixedClass(`is-position-${pos}`);
+        }
+        else if (relative) {
             addPrefixedClass('is-relative');
         }
         // Full Height Helper
         if (fullHeight) {
             addPrefixedClass('is-full-height');
         }
+        addClassNoViewport('is-aspect-ratio', aspectRatio, validAspectRatios);
         return classNames(classes);
     }, [
         classPrefix,
         float,
         overflow,
+        overflowX,
+        overflowY,
         overlay,
         interaction,
         cursor,
@@ -990,8 +1077,10 @@ const useOtherClasses = (props) => {
         responsive,
         skeleton,
         clearfix,
+        pos,
         relative,
         fullHeight,
+        aspectRatio,
     ]);
 };
 
@@ -1022,7 +1111,7 @@ const useOtherClasses = (props) => {
  * // rest: { className: 'custom-class' }
  */
 const useBulmaClasses = (props) => {
-    const { color, backgroundColor, colorShade, backgroundColorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overlay, interaction, cursor, radius, shadow, responsive, viewport, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, textSizeMobile, textSizeTablet, textSizeDesktop, textSizeWidescreen, textSizeFullhd, textAlignMobile, textAlignTablet, textAlignDesktop, textAlignWidescreen, textAlignFullhd, visibilityMobile, visibilityTablet, visibilityTabletOnly, visibilityTouch, visibilityDesktop, visibilityDesktopOnly, visibilityWidescreen, visibilityWidescreenOnly, visibilityFullhd, skeleton, clearfix, relative, fullHeight, ...rest } = props;
+    const { color, backgroundColor, colorShade, backgroundColorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overflowX, overflowY, overlay, interaction, cursor, radius, shadow, responsive, viewport, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, textSizeMobile, textSizeTablet, textSizeDesktop, textSizeWidescreen, textSizeFullhd, textAlignMobile, textAlignTablet, textAlignDesktop, textAlignWidescreen, textAlignFullhd, visibilityMobile, visibilityTablet, visibilityTabletOnly, visibilityTouch, visibilityDesktop, visibilityDesktopOnly, visibilityWidescreen, visibilityWidescreenOnly, visibilityFullhd, skeleton, clearfix, pos, relative, fullHeight, aspectRatio, ...rest } = props;
     const colorClasses = useColorClasses({
         color,
         colorShade,
@@ -1110,6 +1199,8 @@ const useBulmaClasses = (props) => {
     const otherClasses = useOtherClasses({
         float,
         overflow,
+        overflowX,
+        overflowY,
         overlay,
         interaction,
         cursor,
@@ -1118,8 +1209,10 @@ const useBulmaClasses = (props) => {
         responsive,
         skeleton,
         clearfix,
+        pos,
         relative,
         fullHeight,
+        aspectRatio,
     });
     const bulmaHelperClasses = useMemo(() => classNames(colorClasses, spacingClasses, typographyClasses, visibilityClasses, flexboxClasses, otherClasses), [
         colorClasses,
@@ -1235,6 +1328,27 @@ const ColumnsComponent = ({ className, textColor, color: _fieldColor, bgColor, i
 };
 const Columns = withSubComponents(ColumnsComponent, { Column }, 'Columns');
 
+/**
+ * The `type` to render on a `<button>` a component defaults to `button`: the
+ * caller's own value when it is `button`, `submit` or `reset`, and `button`
+ * otherwise.
+ *
+ * A missing `type` is not the only way a button ends up submitting the form
+ * around it. HTML reads an invalid value, such as the anchor's MIME-type
+ * `type="text/html"`, as submit too, and a props spread carrying
+ * `type: undefined` removes the attribute outright. Both can arrive through a
+ * spread or an untyped caller the component's own types never see, so this
+ * checks the value rather than trusting where it came from.
+ *
+ * Call it AFTER the forwarded props are spread and pass it the forwarded
+ * `type`, so its result is the attribute that renders.
+ */
+function buttonType(given) {
+    return given === 'submit' || given === 'reset' || given === 'button'
+        ? given
+        : 'button';
+}
+
 /**
  * Whether an `as` target is a custom element rather than a built-in tag.
  *
@@ -1532,7 +1646,7 @@ const Avatar = forwardRef(function Avatar(avatarProps, ref) {
     // The decorative opt-out never applies to an interactive avatar — a link or
     // button must always expose an accessible name.
     const isDecorative = alt === '' && !isInteractive;
-    const a11yProps = showImage
+    const a11yDefaults = showImage
         ? isInteractive && !accessibleName
             ? // The img alt normally names the control; with no alt/name (an API
                 // returning only a photo URL) the link/button would be nameless.
@@ -1544,10 +1658,18 @@ const Avatar = forwardRef(function Avatar(avatarProps, ref) {
                 ...(isInteractive ? {} : { role: 'img' }),
                 'aria-label': accessibleName || name || 'Avatar',
             };
-    // A clickable avatar inside a form must not submit it; default the native
-    // button type (an explicit type passed through rest still wins).
-    const buttonTypeProps = Tag === 'button' ? { type: 'button' } : {};
-    return (jsxs(Tag, { ref: ref, className: combinedClasses, style: { ...sizeStyle, ...style }, ...buttonTypeProps, ...linkProps, ...a11yProps, ...rest, children: [showImage && (jsx("img", { ...imageProps, ref: imgRef, src: src, alt: accessibleName ?? '', onError: e => {
+    // Each default yields to a value the caller passed, and is applied after
+    // `rest` reading through it rather than spread before it. React treats an
+    // `undefined` attribute as "remove it", and a spread carrying the key with no
+    // value is how that arrives, so a default spread first was erased by it: an
+    // `aria-label: undefined` left a button avatar nameless, and `role` and
+    // `aria-hidden` went the same way. The button `type` below has the same
+    // shape (#690).
+    const a11yProps = Object.fromEntries(Object.entries(a11yDefaults).map(([key, fallback]) => [
+        key,
+        rest[key] ?? fallback,
+    ]));
+    return (jsxs(Tag, { ref: ref, className: combinedClasses, style: { ...sizeStyle, ...style }, ...linkProps, ...rest, ...a11yProps, ...(Tag === 'button' ? { type: buttonType(rest.type) } : {}), children: [showImage && (jsx("img", { ...imageProps, ref: imgRef, src: src, alt: accessibleName ?? '', onError: e => {
                     imageProps?.onError?.(e);
                     setErroredSrc(src);
                 } }, src)), showInitials && (jsx("span", { className: initialsClass, children: resolvedInitials })), showIcon && icon, showDefaultIcon && jsx(DefaultAvatarIcon, {})] }));
@@ -1978,7 +2100,7 @@ const CardHeaderIcon = ({ className, children, color, bgColor, textColor, ...pro
         backgroundColor: bgColor,
         ...props,
     });
-    return (jsx("button", { className: classNames(usePrefixedClassNames('card-header-icon'), bulmaHelperClasses, className), "aria-label": props['aria-label'] || 'more options', ...rest, children: children }));
+    return (jsx("button", { className: classNames(usePrefixedClassNames('card-header-icon'), bulmaHelperClasses, className), ...rest, "aria-label": rest['aria-label'] || 'more options', type: buttonType(rest.type), children: children }));
 };
 /**
  * Card image compound component. Wraps children in a `.card-image` element.
@@ -2047,7 +2169,6 @@ const CardFooterItem = ({ as = 'span', className, children, color, bgColor, text
     }
     const forwarded = omitAttrs(rest, STRIP_FROM_NON_ANCHOR$1);
     if (as === 'button') {
-        const forwardedType = forwarded.type;
         return (jsx("button", { className: itemClasses, ...forwarded, 
             // A footer item button must not submit an enclosing form by default —
             // `<button>` defaults to `type="submit"`, and a Save/Cancel action row
@@ -2057,13 +2178,9 @@ const CardFooterItem = ({ as = 'span', className, children, color, bgColor, text
             // typed here as the `<a>` MIME string (`STRIP_FROM_NON_ANCHOR` above
             // says why it is not withheld), so `as="button" type="text/html"`
             // compiles, and HTML's INVALID-value default for a button's `type` is
-            // submit too. So anything that is not one of the three native button
-            // types falls back to `button` rather than being forwarded.
-            type: forwardedType === 'submit' ||
-                forwardedType === 'reset' ||
-                forwardedType === 'button'
-                ? forwardedType
-                : 'button', children: children }));
+            // submit too. `buttonType` keeps `button`, `submit` and `reset` and
+            // turns anything else into `button`.
+            type: buttonType(forwarded.type), children: children }));
     }
     return (jsx("span", { className: itemClasses, ...omitAttrs(forwarded, STRIP_FROM_NON_BUTTON), children: children }));
 };
@@ -2081,6 +2198,72 @@ const Card = withSubComponents(CardComponent, {
     FooterItem: CardFooterItem,
 }, 'Card');
 
+/**
+ * Event and focus checks that still hold when a component renders inside a
+ * shadow root.
+ *
+ * Code outside a shadow root cannot see into it. A listener on `document`
+ * reads an event from inside one with its `target` set to the shadow host,
+ * and `document.activeElement` names the host instead of the element that has
+ * focus. A component asking either question from `document` then takes a
+ * click on its own menu for an outside click, or cannot tell which of its
+ * items is focused. A web component or a sandboxed preview puts a component
+ * in exactly that position.
+ *
+ * Focus comes in two questions, and each has its own function here. "Is focus
+ * inside me, and on which of my elements?" is `getActiveElementInTree`. "Which
+ * element has focus, wherever it is?", the one to record before moving focus
+ * away and restore to later, is `getDeepestActiveElement`.
+ */
+/**
+ * Whether `event` happened inside `node`. The event's composed path still
+ * holds the element that was really clicked, where a `document` listener
+ * reads the shadow host as the event's `target`.
+ *
+ * @param event - An event read by a listener outside `node`, usually on `document`.
+ * @param node - The component's element, or nothing while it is unmounted.
+ * @returns True when `node` is on the event's path.
+ */
+function isEventInside(event, node) {
+    return !!node && event.composedPath().includes(node);
+}
+/**
+ * The focused element as `node`'s own tree sees it: its shadow root's
+ * `activeElement` when `node` is inside one, `document.activeElement` when it
+ * is not. The result is comparable with `node` and its descendants, which
+ * live in that same tree, so use it to ask whether focus is inside `node`.
+ * Focus inside a shadow root nested within `node` reads as that root's host,
+ * which `node` contains.
+ *
+ * A shadow root with nothing focused inside reports `null`, and a detached
+ * node has no document above it. Both fall back to `document.activeElement`,
+ * so focus elsewhere on the page still reads as outside `node`.
+ *
+ * @param node - An element of the component, or nothing while it is unmounted.
+ * @returns The focused element in `node`'s tree, or the document's.
+ */
+function getActiveElementInTree(node) {
+    const root = node?.getRootNode();
+    return root?.activeElement ?? document.activeElement;
+}
+/**
+ * The element that really has focus, followed down from
+ * `document.activeElement` through every open shadow root on the way. Use it
+ * to record where focus was before moving it, so it can be restored to that
+ * element later: the tree a component renders into need not be the tree its
+ * opener sits in. A closed shadow root cannot be entered, so focus inside one
+ * reads as its host.
+ *
+ * @returns The focused element, or `null` when the document has none.
+ */
+function getDeepestActiveElement() {
+    let active = document.activeElement;
+    while (active?.shadowRoot?.activeElement) {
+        active = active.shadowRoot.activeElement;
+    }
+    return active;
+}
+
 /**
  * Checks if code is running in a browser environment.
  * @deprecated Dropdown's internal SSR guard, exported by accident; it will
@@ -2161,8 +2344,7 @@ const DropdownComponent = forwardRef(function DropdownComponent({ label, childre
         if (!isBrowser$1(window, document))
             return;
         const handleClick = (e) => {
-            /* istanbul ignore next: dropdownRef.current is never null while the listener is attached */
-            if (!dropdownRef.current?.contains(e.target)) {
+            if (!isEventInside(e, dropdownRef.current)) {
                 setActive(false);
                 onActiveChange?.(false);
             }
@@ -2178,10 +2360,16 @@ const DropdownComponent = forwardRef(function DropdownComponent({ label, childre
         setActive(newActive);
         onActiveChange?.(newActive);
     };
-    const handleMenuClick = () => {
+    const handleMenuClick = (e) => {
         if (closeOnClick) {
             setActive(false);
             onActiveChange?.(false);
+            // Closing hides the item that has focus, and the browser drops focus
+            // to the page when that happens. Hand it back to the trigger, as
+            // Escape does. An item that moved focus somewhere else keeps it there.
+            if (e.currentTarget.contains(getActiveElementInTree(e.currentTarget))) {
+                triggerRef.current?.focus();
+            }
         }
     };
     const getMenuItems = () => {
@@ -2242,6 +2430,11 @@ const DropdownComponent = forwardRef(function DropdownComponent({ label, childre
             case 'Enter':
             case ' ':
                 e.preventDefault();
+                // A held key sends a keydown per auto-repeat. Running an item hands
+                // focus back here, so without this a held Enter would reopen the
+                // menu and run whichever item it focused next.
+                if (e.repeat)
+                    break;
                 if (!active) {
                     pendingFocusRef.current = 'first';
                     setActive(true);
@@ -2279,7 +2472,7 @@ const DropdownComponent = forwardRef(function DropdownComponent({ label, childre
         const items = getMenuItems();
         if (!items.length)
             return;
-        const currentIndex = items.indexOf(document.activeElement);
+        const currentIndex = items.indexOf(getActiveElementInTree(e.currentTarget));
         switch (e.key) {
             case 'ArrowDown': {
                 e.preventDefault();
@@ -2400,9 +2593,7 @@ const DropdownItem = ((itemProps) => {
         // carrying `role: undefined` would otherwise erase the default, and an
         // item with no role drops out of the menu and its arrow-key order.
         role: forwarded.role ?? 'menuitem', ...(Component === 'button'
-            ? {
-                type: forwarded.type ?? 'button',
-            }
+            ? { type: buttonType(forwarded.type) }
             : {}), children: children }));
 });
 /**
@@ -2511,7 +2702,9 @@ const MenuItem = forwardRef(function MenuItem(itemProps, ref) {
             labelChildren.push(child);
         }
     });
-    return (jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsx(Component, { ref: ref, className: itemClass || undefined, ...linkProps, children: labelChildren }), nestedMenuLists] }));
+    return (jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsx(Component, { ref: ref, className: itemClass || undefined, ...linkProps, ...(Component === 'button'
+                    ? { type: buttonType(linkProps.type) }
+                    : {}), children: labelChildren }), nestedMenuLists] }));
 });
 MenuItem.displayName = 'MenuItem';
 // Attach static subcomponents
@@ -2767,7 +2960,7 @@ const ModalCard = withSubComponents(ModalCardComponent, {
  */
 const ModalClose = ({ className, size = 'large', variant = 'delete', ...props }) => {
     const classes = classNames(usePrefixedClassNames(variant === 'delete' ? 'delete' : 'modal-close', variant === 'floating' && size && { [`is-${size}`]: true }), className);
-    return (jsx("button", { className: classes, "aria-label": "close", type: "button", ...props }));
+    return (jsx("button", { className: classes, ...props, "aria-label": props['aria-label'] || 'close', type: buttonType(props.type) }));
 };
 /**
  * The `Modal` component provides an empty, accessible overlay for arbitrary content — for a ready-made confirm or alert, reach for `Dialog` instead.
@@ -2884,7 +3077,7 @@ const ModalRoot = forwardRef(function ModalRoot({ active, isActive, onClose, cla
             // Keep Tab within the modal — `aria-modal` hides the rest of the page
             // from assistive technology, so the keyboard order has to agree.
             const focusable = getTabbable(node);
-            const activeElement = document.activeElement;
+            const activeElement = getActiveElementInTree(node);
             if (focusable.length === 0) {
                 e.preventDefault();
                 node.focus();
@@ -2911,7 +3104,10 @@ const ModalRoot = forwardRef(function ModalRoot({ active, isActive, onClose, cla
     useEffect(() => {
         if (!isModalActive)
             return undefined;
-        previouslyFocusedRef.current = document.activeElement;
+        // The element that had focus, wherever it sits: a portaled modal renders
+        // under `document.body` while its opener can be inside a shadow root.
+        previouslyFocusedRef.current =
+            getDeepestActiveElement();
         const node = modalRootRef.current;
         const focusable = node ? getTabbable(node)[0] : undefined;
         (focusable ?? node)?.focus();
@@ -2919,7 +3115,7 @@ const ModalRoot = forwardRef(function ModalRoot({ active, isActive, onClose, cla
             // Only hand focus back if this modal still owns it: closing a background
             // modal must not pull focus out of one that is still open on top. A
             // removed subtree leaves focus on <body>, which still counts as ours.
-            const activeElement = document.activeElement;
+            const activeElement = getActiveElementInTree(node);
             if (activeElement &&
                 activeElement !== document.body &&
                 !node?.contains(activeElement)) {
@@ -3037,7 +3233,7 @@ const NavbarItem = forwardRef(function NavbarItem(itemProps, ref) {
     });
     return (jsx(Component, { ref: ref, className: classNames(usePrefixedClassNames('navbar-item', {
             'is-active': active,
-        }), bulmaHelperClasses, className), ...rest, children: children }));
+        }), bulmaHelperClasses, className), ...rest, ...(Component === 'button' ? { type: buttonType(rest.type) } : {}), children: children }));
 });
 NavbarItem.displayName = 'NavbarItem';
 /**
@@ -3053,9 +3249,9 @@ const NavbarBurger = forwardRef(function NavbarBurger({ className, active, textC
         color: textColor ?? color,
         ...props,
     });
-    return (jsxs("button", { ref: ref, type: "button", className: classNames(usePrefixedClassNames('navbar-burger', {
+    return (jsxs("button", { ref: ref, className: classNames(usePrefixedClassNames('navbar-burger', {
             'is-active': active,
-        }), bulmaHelperClasses, className), "aria-label": props['aria-label'] || 'menu', "aria-expanded": props['aria-expanded'] ?? !!active, ...rest, children: [jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), children] }));
+        }), bulmaHelperClasses, className), ...rest, "aria-label": rest['aria-label'] || 'menu', "aria-expanded": rest['aria-expanded'] ?? !!active, type: buttonType(rest.type), children: [jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), jsx("span", { "aria-hidden": "true" }), children] }));
 });
 NavbarBurger.displayName = 'NavbarBurger';
 /**
@@ -3185,7 +3381,7 @@ const NavbarLink = forwardRef(function NavbarLink(linkProps, ref) {
                 tabIndex: 0,
                 onClick: handleClick,
             }),
-        }), children: children }));
+        }), ...(Component === 'button' ? { type: buttonType(rest.type) } : {}), children: children }));
 });
 NavbarLink.displayName = 'NavbarLink';
 /**
@@ -4509,7 +4705,7 @@ const StepsComponent = ({ value = 0, items, size, color, hasMarker = true, anima
         }
         return null;
     };
-    return (jsxs("div", { className: combinedClasses, ...rest, children: [jsx("ul", { className: listClasses, children: renderSteps() }), hasNavigation && (jsxs("div", { className: stepsNavigationClass, children: [jsx("button", { className: prevButtonClass, disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), jsx("button", { className: nextButtonClass, disabled: value === totalSteps - 1, onClick: onNext ?? (() => onStepClick?.(value + 1)), children: nextLabel ?? 'Next' })] }))] }));
+    return (jsxs("div", { className: combinedClasses, ...rest, children: [jsx("ul", { className: listClasses, children: renderSteps() }), hasNavigation && (jsxs("div", { className: stepsNavigationClass, children: [jsx("button", { type: "button", className: prevButtonClass, disabled: value === 0, onClick: onPrev ?? (() => onStepClick?.(value - 1)), children: prevLabel ?? 'Previous' }), jsx("button", { type: "button", className: nextButtonClass, disabled: value === totalSteps - 1, onClick: onNext ?? (() => onStepClick?.(value + 1)), children: nextLabel ?? 'Next' })] }))] }));
 };
 // Attach Step as static property
 const Steps = withSubComponents(StepsComponent, { Step }, 'Steps');
@@ -4678,7 +4874,7 @@ const SidebarTitle = ({ className, children, ...props }) => {
  */
 const SidebarClose = ({ className, children, ...props }) => {
     const closeClass = usePrefixedClassNames('sidebar-close');
-    return (jsx("button", { type: "button", className: classNames(closeClass, className), "aria-label": "Close", ...props, children: children }));
+    return (jsx("button", { className: classNames(closeClass, className), ...props, "aria-label": props['aria-label'] || 'Close', type: buttonType(props.type), children: children }));
 };
 /**
  * Main content area of the sidebar.
@@ -4711,6 +4907,48 @@ const Sidebar = withSubComponents(SidebarComponent, {
     Footer: SidebarFooter,
 }, 'Sidebar');
 
+/**
+ * Splits the items a container shows into one stack per position in use. An
+ * item goes to its own position when it has one and to the container's
+ * otherwise. A position with no items gets no stack.
+ *
+ * Stacks come back in `order`, so their order in the page follows the screen
+ * rather than which position happened to be used first, and a stack keeps its
+ * place while the others come and go. A position missing from `order` sorts
+ * after the known ones.
+ *
+ * @function groupIntoPositionStacks
+ * @param items - The items the container shows, in the order they were shown.
+ * @param positionOf - Reads an item's own position, if it has one.
+ * @param containerPosition - Where an item without a position of its own goes.
+ * @param order - Every known position, in the order stacks should render.
+ * @returns One stack per position in use.
+ */
+function groupIntoPositionStacks(items, positionOf, containerPosition, order) {
+    const byPosition = new Map();
+    for (const item of items) {
+        const position = positionOf(item) ?? containerPosition;
+        const stack = byPosition.get(position);
+        if (stack) {
+            stack.push(item);
+        }
+        else {
+            byPosition.set(position, [item]);
+        }
+    }
+    const rank = (position) => {
+        const index = order.indexOf(position);
+        return index === -1 ? order.length : index;
+    };
+    // Array.prototype.sort is stable, so unknown positions keep the order they
+    // were first used in.
+    return Array.from(byPosition, ([position, stackItems]) => ({
+        key: position === containerPosition ? 'container' : `at-${position}`,
+        position,
+        items: stackItems,
+    })).sort((a, b) => rank(a.position) - rank(b.position));
+}
+
 /**
  * The `Toast` component provides brief notification messages with optional action and cancel buttons.
  *
@@ -4766,7 +5004,7 @@ const Toast = forwardRef(({ message, type = 'default', actionType, position = 't
         if (!dismissible || !isVisible)
             return undefined;
         const handleDocumentClick = (e) => {
-            if (toastRef.current && !toastRef.current.contains(e.target)) {
+            if (toastRef.current && !isEventInside(e, toastRef.current)) {
                 handleClose();
             }
         };
@@ -4987,25 +5225,38 @@ const toast = {
         return () => toastListeners.delete(listener);
     },
 };
+// The order ToastContainer renders its stacks in: across the top of the
+// screen, then across the bottom.
+const toastStackOrder = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+];
 /**
  * Container component for rendering programmatic toasts.
- * Place once at your app root to enable the toast API.
+ * Place once at your app root to enable the toast API. A toast shown with a
+ * `position` appears there, and one shown without goes to the container's
+ * `position`.
  *
  * @function
  * @param {{ position?: ToastPosition }} props - Container props.
  * @returns {JSX.Element | null} The rendered toast container, or null if empty.
  */
-const ToastContainer = ({ position = 'top-right', }) => {
+const ToastContainer = ({ position = 'top-right' }) => {
     // Starts from the toasts already showing instead of an empty list, then
     // follows changes.
     const toastList = useSyncExternalStore(toast.subscribe, getVisibleToasts, getServerToasts);
     if (typeof document === 'undefined' || toastList.length === 0) {
         return null;
     }
-    return createPortal(jsx("div", { className: `toast-container is-${position}`, children: toastList.map(t => {
+    const stacks = groupIntoPositionStacks(toastList, t => t.props.position, position, toastStackOrder);
+    return createPortal(stacks.map(stack => (jsx("div", { className: `toast-container is-${stack.position}`, children: stack.items.map(t => {
             const { queue: _queue, ...toastProps } = t.props;
-            return (jsx(Toast, { ...toastProps, position: position, onClose: () => toast.close(t.id) }, t.id));
-        }) }), document.body);
+            return (jsx(Toast, { ...toastProps, position: stack.position, onClose: () => toast.close(t.id) }, t.id));
+        }) }, stack.key))), document.body);
 };
 
 /**
@@ -5556,7 +5807,8 @@ const Carousel = forwardRef(({ value: controlledValue, autoplay = false, interva
     // Keyboard navigation
     useEffect(() => {
         const handleKeyDown = (e) => {
-            if (!carouselRef.current?.contains(document.activeElement))
+            const node = carouselRef.current;
+            if (!node?.contains(getActiveElementInTree(node)))
                 return;
             switch (e.key) {
                 case 'ArrowLeft':
@@ -5689,7 +5941,7 @@ const Carousel = forwardRef(({ value: controlledValue, autoplay = false, interva
                             transition: isDragging || skipTransition
                                 ? 'none'
                                 : 'transform 0.3s ease-in-out',
-                        }, onTransitionEnd: handleTransitionEnd, children: renderSlides() }), arrow && itemCount > 1 && (jsxs(Fragment, { children: [jsx(Button, { className: carouselArrowPrevClass, onClick: goToPrev, isDisabled: !canGoPrev, "aria-label": "Previous slide", children: iconPrev ? (jsx(Icon, { name: iconPrev, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsx(DefaultPrevIcon, {})) }), jsx(Button, { className: carouselArrowNextClass, onClick: goToNext, isDisabled: !canGoNext, "aria-label": "Next slide", children: iconNext ? (jsx(Icon, { name: iconNext, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsx(DefaultNextIcon, {})) })] }))] }), indicator && itemCount > 1 && (jsx("div", { className: carouselIndicatorClass, role: "tablist", children: items.map((_, index) => (jsx(Button, { className: prefixedClassNames(classPrefix, 'indicator-item', {
+                        }, onTransitionEnd: handleTransitionEnd, children: renderSlides() }), arrow && itemCount > 1 && (jsxs(Fragment, { children: [jsx(Button, { type: "button", className: carouselArrowPrevClass, onClick: goToPrev, isDisabled: !canGoPrev, "aria-label": "Previous slide", children: iconPrev ? (jsx(Icon, { name: iconPrev, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsx(DefaultPrevIcon, {})) }), jsx(Button, { type: "button", className: carouselArrowNextClass, onClick: goToNext, isDisabled: !canGoNext, "aria-label": "Next slide", children: iconNext ? (jsx(Icon, { name: iconNext, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })) : (jsx(DefaultNextIcon, {})) })] }))] }), indicator && itemCount > 1 && (jsx("div", { className: carouselIndicatorClass, role: "tablist", children: items.map((_, index) => (jsx(Button, { type: "button", className: prefixedClassNames(classPrefix, 'indicator-item', {
                         'is-active': index === activeIndex,
                     }), onClick: () => goToSlide(index), role: "tab", "aria-selected": index === activeIndex, "aria-label": `Go to slide ${index + 1}` }, index))) }))] }));
 });
@@ -5997,12 +6249,14 @@ const Content = ({ className, textColor, color, bgColor, size, children, ...prop
 /**
  * The `Delete` component provides a Bulma-styled close/delete button for dismissing modals, notifications, tags, messages, and more.
  *
+ * It renders `type="button"`, so a delete button inside a form does not submit it.
+ *
  * @function
  * @param {DeleteProps} props - Props for the Delete component.
  * @returns {JSX.Element} The rendered delete button.
  * @see {@link https://bulma.io/documentation/elements/delete/ | Bulma Delete documentation}
  */
-const Delete = ({ className, textColor, color, bgColor, onClick, size, ariaLabel = 'Close', disabled = false, ...props }) => {
+const Delete = ({ className, textColor, color, bgColor, onClick, size, ariaLabel, disabled = false, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
@@ -6016,7 +6270,7 @@ const Delete = ({ className, textColor, color, bgColor, onClick, size, ariaLabel
         'is-disabled': disabled,
     });
     const classes = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsx("button", { className: classes, onClick: onClick, "aria-label": ariaLabel, disabled: disabled, type: "button", ...rest }));
+    return (jsx("button", { className: classes, onClick: onClick, disabled: disabled, ...rest, "aria-label": rest['aria-label'] || ariaLabel || 'Close', type: buttonType(rest.type) }));
 };
 
 /**
@@ -6238,7 +6492,7 @@ const Link = forwardRef(function Link(linkProps, ref) {
         'is-active': isActive,
     });
     const linkClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsx(Component, { ref: ref, className: linkClasses || undefined, ...rest, children: children }));
+    return (jsx(Component, { ref: ref, className: linkClasses || undefined, ...rest, ...(Component === 'button' ? { type: buttonType(rest.type) } : {}), children: children }));
 });
 Link.displayName = 'Link';
 
@@ -6263,6 +6517,281 @@ const ListItem = ({ className, textColor, bgColor, children, ...props }) => {
     return (jsx("li", { className: itemClasses || undefined, ...rest, children: children }));
 };
 
+/**
+ * How long after an item appears its announcement is written, in ms. The wait
+ * lets a screen reader register a region the container has only just mounted,
+ * and items shown in quick succession are written, and read out, together.
+ */
+const announceDelay = 100;
+/**
+ * How long an announcement stays in the region once written, in ms. That's
+ * long enough for a screen reader to pick it up. Clearing it after keeps a
+ * second copy of the item's text from sitting in the page, where someone
+ * reading through the page, or a test looking the text up, would find it
+ * again.
+ */
+const announcementLifetime = 1000;
+const noAnnouncements = [];
+const nothingWritten = [];
+const noAnnouncementsYet = {
+    key: 0,
+    waiting: noAnnouncements,
+    written: nothingWritten,
+};
+// Hides the region with inline styles rather than a class, so it needs no
+// stylesheet, including the helper classes a modular Bulma build can leave
+// out. Clipping it, rather than using `display` or `visibility`, keeps it in
+// the accessibility tree. The declarations match the `extras-sr-only` mixin,
+// plus `clip-path`, which replaces the deprecated `clip`. The negative margin
+// pulls the 1px box back inside the page, so it doesn't add scrollable
+// overflow.
+const visuallyHidden = {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    padding: 0,
+    margin: '-1px',
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    clipPath: 'inset(50%)',
+    whiteSpace: 'nowrap',
+    border: 0,
+};
+/**
+ * Works out what a status region says. Each item is announced once. Its
+ * announcement is written `announceDelay` after it appears, or after the last
+ * item to join it when several appear in quick succession, alongside whatever
+ * the region still says. Once written, it stays for `announcementLifetime`,
+ * whatever is written after it and whether or not its item goes in the
+ * meantime. An item that goes before its announcement is written isn't
+ * announced.
+ *
+ * Nothing is written in the commit that mounts the region or the item. A
+ * screen reader reliably announces a polite live region whose content changes
+ * after the region is already in the page, and not always one that arrives
+ * with its content. By the time `describe` runs, an item's rendered text can
+ * be read.
+ *
+ * @function useAnnouncements
+ * @param items - The items to announce, in the order they were shown.
+ * @param describe - The text to announce for an item, or nothing to skip it.
+ *   It runs once the item is on screen, and it must keep its identity between
+ *   renders (a module-level function or a `useCallback`), or every render
+ *   re-checks the items.
+ * @returns The announcements to render, in the order they were written.
+ */
+function useAnnouncements(items, describe) {
+    // The ids of the items on screen as of the last change, every one of which
+    // has been looked at for an announcement already.
+    const onScreenIdsRef = useRef(new Set());
+    // Clears that haven't run yet. They outlive the batch that started them, so
+    // they're only stopped when the region unmounts.
+    const clearTimersRef = useRef(new Set());
+    const [announcements, setAnnouncements] = useState(noAnnouncementsYet);
+    // Runs after the commit that puts an item on screen, which is the first
+    // point its rendered text can be read.
+    useEffect(() => {
+        const announced = onScreenIdsRef.current;
+        const appeared = items.filter(item => !announced.has(item.id));
+        // Items that have gone drop out here too. Ids are never reused, so
+        // forgetting them can't bring an old item back.
+        onScreenIdsRef.current = new Set(items.map(item => item.id));
+        const next = [];
+        for (const item of appeared) {
+            const text = describe(item);
+            if (text)
+                next.push({ id: item.id, text });
+        }
+        if (next.length > 0) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect -- an item's rendered text can only be read once it's on screen
+            setAnnouncements(current => ({
+                ...current,
+                key: current.key + 1,
+                // Announcements still waiting go out with the new ones. What's
+                // already written stays put.
+                waiting: [...current.waiting, ...next],
+            }));
+        }
+    }, [items, describe]);
+    // The write only touches the batch it was started for: a newer batch can
+    // be set before the render that cancels this timer. Its clear is started
+    // by the write itself, so it's timed from the write without waiting on a
+    // render, and a newer batch arriving doesn't cut short what's written.
+    const { key } = announcements;
+    useEffect(() => {
+        if (key === noAnnouncementsYet.key)
+            return undefined;
+        const clearTimers = clearTimersRef.current;
+        const write = setTimeout(() => {
+            // Whether an item is on screen is decided here, once. An item that
+            // went before its announcement was due isn't announced, and one that
+            // goes after keeps its announcement for the rest of its lifetime, when
+            // the region holds the only copy of its text rather than a second one.
+            const onScreen = onScreenIdsRef.current;
+            setAnnouncements(current => current.key === key
+                ? {
+                    ...current,
+                    waiting: noAnnouncements,
+                    written: [
+                        ...current.written,
+                        ...current.waiting
+                            .filter(announcement => onScreen.has(announcement.id))
+                            .map(announcement => ({ ...announcement, batch: key })),
+                    ],
+                }
+                : current);
+            // eslint-disable-next-line @eslint-react/web-api-no-leaked-timeout -- it has to outlive this effect when a newer batch arrives, so the unmount effect below clears it
+            const clear = setTimeout(() => {
+                clearTimers.delete(clear);
+                setAnnouncements(current => {
+                    const written = current.written.filter(announcement => announcement.batch !== key);
+                    return written.length === current.written.length
+                        ? current
+                        : { ...current, written };
+                });
+            }, announcementLifetime);
+            clearTimers.add(clear);
+        }, announceDelay);
+        return () => clearTimeout(write);
+    }, [key]);
+    useEffect(() => {
+        const clearTimers = clearTimersRef.current;
+        return () => {
+            clearTimers.forEach(clearTimeout);
+            clearTimers.clear();
+        };
+    }, []);
+    return announcements.written;
+}
+/**
+ * Reads an element out roughly the way a screen reader would: its text, with
+ * an element's `aria-label`, or an image's `alt`, standing in for what's
+ * inside it, a break between block-level elements, and parts that are
+ * `aria-hidden`, `hidden` or inline-styled `display: none` left out. It isn't
+ * the full accessible name computation, so `aria-labelledby`, CSS-generated
+ * content, content hidden by a stylesheet and other ways of naming or hiding
+ * content aren't followed.
+ *
+ * @function spokenText
+ * @param element - The element to read.
+ * @returns Its text, with runs of whitespace collapsed and the ends trimmed.
+ */
+function spokenText(element) {
+    return readAloud(element).replace(/\s+/g, ' ').trim();
+}
+// Elements a browser displays as blocks by default, and `br`. A screen reader
+// pauses between them, so their text shouldn't run into the text beside them.
+// They're known by tag rather than by computed `display`, which would depend
+// on a stylesheet and on layout.
+const blockLevelTags = new Set([
+    'ADDRESS',
+    'ARTICLE',
+    'ASIDE',
+    'BLOCKQUOTE',
+    'BR',
+    'CAPTION',
+    'DD',
+    'DETAILS',
+    'DIALOG',
+    'DIV',
+    'DL',
+    'DT',
+    'FIELDSET',
+    'FIGCAPTION',
+    'FIGURE',
+    'FOOTER',
+    'FORM',
+    'H1',
+    'H2',
+    'H3',
+    'H4',
+    'H5',
+    'H6',
+    'HEADER',
+    'HGROUP',
+    'HR',
+    'LEGEND',
+    'LI',
+    'MAIN',
+    'MENU',
+    'NAV',
+    'OL',
+    'P',
+    'PRE',
+    'SEARCH',
+    'SECTION',
+    'SUMMARY',
+    'TABLE',
+    'TBODY',
+    'TD',
+    'TFOOT',
+    'TH',
+    'THEAD',
+    'TR',
+    'UL',
+]);
+/**
+ * Whether an element is left out of what a screen reader reads.
+ *
+ * @function isHidden
+ * @param element - The element to check.
+ * @returns True for `aria-hidden="true"`, the `hidden` attribute, and an
+ *   inline `display: none`, on an HTML, SVG or any other element with an
+ *   inline style.
+ */
+const isHidden = (element) => element.getAttribute('aria-hidden') === 'true' ||
+    element.hasAttribute('hidden') ||
+    element.style?.display === 'none';
+/**
+ * The text `spokenText` reads for an element, before its whitespace is
+ * tidied.
+ *
+ * @function readAloud
+ * @param element - The element to read.
+ * @returns Its text.
+ */
+function readAloud(element) {
+    if (isHidden(element))
+        return '';
+    const name = element.getAttribute('aria-label') ||
+        (element.tagName === 'IMG' ? element.getAttribute('alt') : null);
+    const text = name ||
+        Array.from(element.childNodes, child => {
+            if (child instanceof Element)
+                return readAloud(child);
+            return child.nodeType === Node.TEXT_NODE ? child.textContent : '';
+        }).join('');
+    // A name stands in for the element's content, and a block's content stands
+    // apart from what's around it, so both are padded to keep them from running
+    // into the neighboring text. An inline run, like `<span>Up</span>` then
+    // `<span>loaded</span>`, still reads as one word.
+    return name || blockLevelTags.has(element.tagName) ? ` ${text} ` : text;
+}
+/**
+ * A visually hidden, polite `status` live region that a programmatic
+ * container announces its items through. The container renders it from the
+ * moment it mounts, whether or not it has anything to show, so the region is
+ * already in the page when an announcement is written into it.
+ *
+ * The announcements are this component's own state, so writing and clearing
+ * them re-renders the region and leaves the container's items alone. Each one
+ * is its own keyed node, so a re-render that leaves the announcements alone
+ * leaves the region's content alone too, and nothing is read out twice.
+ *
+ * @function StatusRegion
+ * @param props - The items to announce, and the text to announce for each.
+ * @returns The region.
+ */
+function StatusRegion({ items, describe, }) {
+    const announcements = useAnnouncements(items, describe);
+    // `role="status"` makes a region atomic unless it says otherwise, which
+    // reads the whole region on every change. Each announcement is its own
+    // node, and only additions are relevant by default, so with atomic off a
+    // screen reader reads just what was written, and removing one announcement
+    // doesn't read out the ones still there.
+    return (jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "false", style: visuallyHidden, children: announcements.map(announcement => (jsx("div", { children: announcement.text }, announcement.id))) }));
+}
+
 /**
  * The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.
  *
@@ -6286,7 +6815,7 @@ const Notification = ({ className, color, textColor, isLight, hasDelete, onDelet
     });
     const deleteClasses = usePrefixedClassNames('delete');
     const notificationClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxs("div", { className: notificationClasses, ...rest, children: [hasDelete && (jsx("button", { className: deleteClasses, onClick: onDelete, "aria-label": "Close notification" })), children] }));
+    return (jsxs("div", { className: notificationClasses, ...rest, children: [hasDelete && (jsx("button", { type: "button", className: deleteClasses, onClick: onDelete, "aria-label": "Close notification" })), children] }));
 };
 let notificationId = 0;
 const notificationListeners = new Set();
@@ -6305,9 +6834,9 @@ const getServerNotifications = () => noNotifications;
 // updates alone, so notifications raised before it mounted still appear. It is
 // replaced rather than mutated, and only when listeners are notified, because
 // useSyncExternalStore needs the same array back between changes. An empty
-// list is `noNotifications` itself, so a container that hydrates with nothing
-// to show reads the same snapshot the server did and has no reason to render
-// again.
+// list is `noNotifications` itself, so an empty store reads the same snapshot
+// on the client as on the server, and a notify that leaves nothing showing
+// when nothing was showing doesn't render the container again.
 let visibleNotifications = noNotifications;
 const getVisibleNotifications = () => visibleNotifications;
 const notifyNotificationListeners = () => {
@@ -6418,20 +6947,32 @@ const notification = {
         return () => notificationListeners.delete(listener);
     },
 };
+/**
+ * Whether a notification of this color announces itself as an alert, rather
+ * than politely through NotificationContainer's status region.
+ *
+ * @function isUrgentColor
+ * @param {NotificationOptions['color']} color - The notification's color.
+ * @returns {boolean} True for `danger` and `warning`.
+ */
+const isUrgentColor = (color) => color === 'danger' || color === 'warning';
 /**
  * Single auto-dismissing notification item used by NotificationContainer.
  *
  * @function
- * @param {{ instance: NotificationInstance; onClose: (id: string) => void }} props - Component props.
+ * @param {{ instance: NotificationInstance; onClose: (id: string) => void; registerMessage: (id: string, node: HTMLElement | null) => void }} props - Component props.
  * @returns {JSX.Element} The rendered notification item.
  */
-const NotificationItem = ({ instance, onClose }) => {
+const NotificationItem = ({ instance, onClose, registerMessage }) => {
     const { message, color, isLight, duration = 3000, hasDelete = true, indefinite = false, pauseOnHover = true, } = instance.options;
     const [isPaused, setIsPaused] = useState(false);
-    const urgent = color === 'danger' || color === 'warning';
+    const urgent = isUrgentColor(color);
     const handleClose = useCallback(() => {
         onClose(instance.id);
     }, [onClose, instance.id]);
+    const messageRef = useCallback((node) => {
+        registerMessage(instance.id, node);
+    }, [registerMessage, instance.id]);
     // Auto-close timer
     useEffect(() => {
         if (indefinite || duration === 0 || isPaused)
@@ -6447,27 +6988,30 @@ const NotificationItem = ({ instance, onClose }) => {
         if (pauseOnHover)
             setIsPaused(false);
     }, [pauseOnHover]);
-    return (jsx(Notification, { color: color, isLight: isLight, hasDelete: hasDelete, onDelete: handleClose, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { pointerEvents: 'auto' }, children: urgent ? (jsx("span", { role: "alert", "aria-live": "assertive", children: message })) : (jsx("span", { role: "status", "aria-live": "polite", children: message })) }));
-};
+    return (jsx(Notification, { color: color, isLight: isLight, hasDelete: hasDelete, onDelete: handleClose, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { pointerEvents: 'auto' }, children: urgent ? (jsx("span", { role: "alert", "aria-live": "assertive", children: message })) : (jsx("span", { ref: messageRef, children: message })) }));
+};
+// The order NotificationContainer renders its stacks in: across the top of the
+// screen, then across the bottom.
+const notificationStackOrder = [
+    'top-left',
+    'top',
+    'top-right',
+    'bottom-left',
+    'bottom',
+    'bottom-right',
+];
 /**
- * Container component for rendering programmatic notifications.
- * Place once at your app root to enable the notification API.
+ * Inline style that fixes a stack of notifications to its place on the screen.
  *
  * @function
- * @param {{ position?: NotificationPosition }} props - Container props.
- * @returns {JSX.Element | null} The rendered notification container, or null if empty.
+ * @param {NotificationPosition} position - Where the stack sits.
+ * @returns {React.CSSProperties} The stack's style.
  */
-const NotificationContainer = ({ position = 'top-right' }) => {
-    // Starts from the notifications already showing instead of an empty list,
-    // then follows changes.
-    const items = useSyncExternalStore(notification.subscribe, getVisibleNotifications, getServerNotifications);
-    if (typeof document === 'undefined' || items.length === 0) {
-        return null;
-    }
+const notificationStackStyle = (position) => {
     const isBottom = position.startsWith('bottom');
     const isCenter = position === 'top' || position === 'bottom';
     const isRight = position.endsWith('right');
-    const containerStyle = {
+    return {
         position: 'fixed',
         zIndex: 100,
         display: 'flex',
@@ -6483,7 +7027,71 @@ const NotificationContainer = ({ position = 'top-right' }) => {
                 ? { right: 0, alignItems: 'flex-end' }
                 : { left: 0, alignItems: 'flex-start' }),
     };
-    return createPortal(jsx("div", { style: containerStyle, children: items.map(item => (jsx(NotificationItem, { instance: item, onClose: notification.close }, item.id))) }), document.body);
+};
+/**
+ * Container component for rendering programmatic notifications.
+ * Place once at your app root to enable the notification API. A notification
+ * shown with a `position` appears there, and one shown without goes to the
+ * container's `position`, so the container renders a stack for each position
+ * in use.
+ *
+ * It keeps a visually hidden `role="status"` live region in the page from the
+ * moment it mounts, even while nothing is showing, and announces every
+ * notification other than `danger` and `warning` through it, a moment after
+ * the notification appears. Those notifications carry no `role="status"` of
+ * their own, so `getByRole('status')` finds the region, not the notification.
+ * The text stays in the region briefly, even if the notification closes in
+ * the meantime, and while both are up the page holds two copies of it. A
+ * polite notification that closes before its announcement is written, a
+ * moment after it appears, isn't announced at all. `danger` and `warning`
+ * notifications announce themselves as assertive alerts. The region is hidden
+ * with inline styles, so it needs no stylesheet.
+ *
+ * @function
+ * @param {{ position?: NotificationPosition }} props - Container props.
+ * @returns {JSX.Element | null} The rendered notification container, or null on the server and while hydrating.
+ */
+const NotificationContainer = ({ position = 'top-right' }) => {
+    // Starts from the notifications already showing instead of an empty list,
+    // then follows changes.
+    const items = useSyncExternalStore(notification.subscribe, getVisibleNotifications, getServerNotifications);
+    // A portal needs a document, and it has no server-rendered counterpart, so
+    // the server render and the hydrating one render nothing, and the container
+    // portals in from the render after hydration.
+    const isHydrated = useIsHydrated();
+    // The notifications the status region announces. Danger and warning
+    // announce themselves.
+    const politeItems = useMemo(() => items.filter(item => !isUrgentColor(item.options.color)), [items]);
+    // Each polite notification's message element, so the text the region
+    // announces is the text on screen, whatever the message renders.
+    const messageNodesRef = useRef(new Map());
+    const registerMessage = useCallback((id, node) => {
+        if (node) {
+            messageNodesRef.current.set(id, node);
+        }
+        else {
+            messageNodesRef.current.delete(id);
+        }
+    }, []);
+    // StatusRegion only describes polite notifications that are on screen, and
+    // each of those registered its message element when it mounted. The
+    // fallback is for a notification announced without being rendered, should
+    // the container ever render fewer than it announces: a plain-text message
+    // still says itself, and anything else is skipped.
+    const describe = useCallback((item) => {
+        const node = messageNodesRef.current.get(item.id);
+        /* istanbul ignore if: every polite notification on screen registers its message element when it mounts */
+        if (!node) {
+            const { message } = item.options;
+            return typeof message === 'string' ? message : null;
+        }
+        return spokenText(node);
+    }, []);
+    if (typeof document === 'undefined' || !isHydrated) {
+        return null;
+    }
+    const stacks = groupIntoPositionStacks(items, item => item.options.position, position, notificationStackOrder);
+    return createPortal(jsxs(Fragment, { children: [stacks.map(stack => (jsx("div", { style: notificationStackStyle(stack.position), children: stack.items.map(item => (jsx(NotificationItem, { instance: item, onClose: notification.close, registerMessage: registerMessage }, item.id))) }, stack.key))), jsx(StatusRegion, { items: politeItems, describe: describe })] }), document.body);
 };
 
 /**
@@ -6735,7 +7343,26 @@ const Tfoot = ({ className, children, ...props }) => {
     return (jsx("tfoot", { className: tfootClasses || undefined, ...rest, children: children }));
 };
 
-/** Valid Bulma color values for table cells. */
+/**
+ * The values the table `color` prop accepts, as a readonly tuple.
+ *
+ * `TableColor` is typed from it, and `Tr`, `Th` and `Td` all take a
+ * `TableColor`, so the tuple and those props list the same values. Map over
+ * it to build a color picker, or check a value that arrives at runtime before
+ * passing it in: the components add no color class for a value outside the
+ * tuple.
+ *
+ * @example
+ * import { Tr, Td, validTableColors } from '@allxsmith/bestax-bulma';
+ *
+ * <Tr>
+ *   {validTableColors.map(color => (
+ *     <Td key={color} color={color}>
+ *       {color}
+ *     </Td>
+ *   ))}
+ * </Tr>;
+ */
 const validTableColors = [
     'primary',
     'link',
@@ -6892,7 +7519,7 @@ const Tag = ({ className, color, size, isLight, isRounded, isDelete, isHoverable
     });
     const tagClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
     if (isDelete) {
-        return (jsx("button", { className: tagClasses, onClick: onDelete, "aria-label": "Delete tag", ...rest }));
+        return (jsx("button", { className: tagClasses, onClick: onDelete, ...rest, "aria-label": rest['aria-label'] || 'Delete tag', type: buttonType(rest.type) }));
     }
     return (jsx("span", { className: tagClasses, ...rest, children: children }));
 };
@@ -9074,8 +9701,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         if (!isActive)
             return undefined;
         const handleClickOutside = (e) => {
-            if (containerRef.current &&
-                !containerRef.current.contains(e.target)) {
+            if (containerRef.current && !isEventInside(e, containerRef.current)) {
                 setIsActive(false);
                 setHighlightedIndex(-1);
             }
@@ -13235,9 +13861,18 @@ const bulmaVarPropMap = Object.fromEntries(bulmaCssVars
  * real 0 keeps what
  * people see and makes it valid CSS. Keyed by the helper values, so adding
  * one means saying what it writes.
+ *
+ * The sizes write nothing and only add their class. Their classes read the
+ * radius variables, so `normal` would point `--bulma-radius` at itself, which
+ * is invalid and computes to 0, and `rounded` would turn every control inside
+ * the Theme into a pill.
  */
 const radiusHelperVars = {
     radiusless: '0',
+    small: undefined,
+    normal: undefined,
+    large: undefined,
+    rounded: undefined,
 };
 /**
  * What `radius` writes to `--bulma-radius` on a Theme, or `undefined` when it
@@ -13264,7 +13899,7 @@ const themeRadiusVar = (radius) => {
     warnOnce('Theme:radius-variable', `[bestax-bulma] <Theme radius="${radius}">: setting --bulma-radius ` +
         'through the radius prop is deprecated and will stop working in a ' +
         'future major version. On Theme, as on every other component, radius ' +
-        `is the "${validRadii.join('", "')}" helper. Set the variable with ` +
+        `is the border radius helper ("${validRadii.join('", "')}"). Set the variable with ` +
         `bulmaVars={{ '--bulma-radius': '${radius}' }} instead.`);
     return radius;
 };
@@ -13350,6 +13985,16 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
     const radiusHelper = validRadii.includes(radius)
         ? radius
         : undefined;
+    // A radius size only adds its class, and a root Theme renders no wrapper to
+    // carry one, so on `isRoot` it does nothing at all. Say so, as the other
+    // radius routes that do not do what they look like do.
+    if (isRoot && radiusHelper && radiusHelperVars[radiusHelper] === undefined) {
+        warnOnce('Theme:root-radius-size', `[bestax-bulma] <Theme isRoot radius="${radiusHelper}">: a root Theme ` +
+            `has no wrapper element for has-radius-${radiusHelper}, and the ` +
+            'radius sizes set no variable, so this does nothing. To round one ' +
+            `element, put radius="${radiusHelper}" on it. To change the radius ` +
+            "across the page, set bulmaVars={{ '--bulma-radius': '…' }} instead.");
+    }
     // Extract Bulma variable props from restProps
     const { bulmaVarProps, otherProps } = useMemo(() => {
         const varProps = {};
@@ -13800,5 +14445,5 @@ const Section = ({ size, className, children, color, bgColor, textColor, style,
     return (jsx("section", { className: sectionClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
-export { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, Code, Collapse, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, NumberInput, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, TagInput, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, mergeBulmaStyles, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useColorStyles, useConfig, useFlexboxClasses, useIconLibrary, useInsideControl, useInsideField, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validColorShades, validColors, validCursors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFloats, validFontFamilies, validInteractions, validJustifyContents, validOverflows, validRadii, validResponsives, validSchemeColors, validShadows, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
+export { Autocomplete, Avatar, Avatars, Badge, Block, Box, Breadcrumb, Button, Buttons, Card, Carousel, CarouselItem, Cell, Checkbox, Checkboxes, Code, Collapse, Column, Columns, ConfigProvider, Container, Content, Control, DateInput, DateInputBase, DateTimeInput, DateTimeInputBase, Delete, Dialog, DialogContainer, Divider, Dropdown, DropdownDivider, DropdownItem, Emphasis, Field, FieldBody, FieldLabel, Figure, File, Footer, Grid, Hero, HeroBody, HeroFoot, HeroHead, Icon, IconText, Image, Input, InputBase, Level, LevelItem, LevelLeft, LevelRight, Link, LinkButton, ListItem, Loading, Media, MediaContent, MediaLeft, MediaRight, Menu, MenuItem, MenuLabel, MenuList, Message, Modal, Navbar, NavbarBrand, NavbarBurger, NavbarDivider, NavbarDropdown, NavbarDropdownMenu, NavbarEnd, NavbarItem, NavbarLink, NavbarMenu, NavbarStart, Notification, NotificationContainer, NumberInput, Numberinput, OrderedList, Pagination, PaginationEllipsis, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, Panel, PanelBlock, PanelButtonBlock, PanelCheckboxBlock, PanelHeading, PanelIcon, PanelInputBlock, PanelTabs, Paragraph, Pre, Progress, Radio, Radios, Rate, Reveal, Section, Select, SelectBase, Sidebar, Skeleton, Slider, Span, Step, Steps, Strong, SubTitle, Switch, Tab, TabContentItem, TabItem, TabList, Table, Tabs, TabsContent, Tag, TagInput, Taginput, Tags, Tbody, Td, TextArea, TextAreaBase, Tfoot, Th, Thead, Theme, TimeInput, TimeInputBase, Title, Toast, ToastContainer, Tooltip, Tr, UnorderedList, checkboxColors, checkboxSizes, classNames, createPrefixedClassNames, dialog, isBrowser$1 as isBrowser, mergeBulmaStyles, notification, prefixedClassNames, radioColors, radioSizes, switchColors, switchSizes, toast, useBulmaClasses, useClassPrefix, useColorClasses, useColorStyles, useConfig, useFlexboxClasses, useIconLibrary, useInsideControl, useInsideField, useOtherClasses, usePrefixedClass, usePrefixedClassNames, useSpacingClasses, useTypographyClasses, useVisibilityClasses, validAlignContents, validAlignItems, validAlignSelfs, validAlignments$1 as validAlignments, validAspectRatios, validAxisOverflows, validColorShades, validColors, validCursors, validDisplays, validFlexDirections, validFlexGrowShrink, validFlexWraps, validFloats, validFontFamilies, validInteractions, validJustifyContents, validOverflows, validPositions, validRadii, validResponsives, validSchemeColors, validShadows, validSizes$1 as validSizes, validTableColors, validTextSizes, validTextTransforms, validTextWeights, validViewports, validVisibilities };
 //# sourceMappingURL=index.esm.js.map