@allxsmith/bestax-bulma 5.18.0 → 5.18.2

package/dist/index.esm.js

@@ -1235,6 +1235,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.
  *
@@ -1250,6 +1271,30 @@ function isCustomElement(as) {
     return typeof as === 'string' && as.includes('-');
 }
 
+// INTERNAL: deliberately not exported from src/index.ts.
+const warnedKeys = new Set();
+// Fail closed: with no bundler and no Node (raw CDN ESM), reading `process`
+// throws and warnings stay off, so production can never warn by accident.
+const isDev = () => {
+    try {
+        return process.env.NODE_ENV !== 'production';
+    }
+    catch {
+        return false;
+    }
+};
+/**
+ * Logs a console warning in development, once per `key` for the life of the
+ * page. Safe to call during render: a re-render, or a second instance hitting
+ * the same case, finds the key already recorded and stays quiet.
+ */
+const warnOnce = (key, message) => {
+    if (!isDev() || warnedKeys.has(key))
+        return;
+    warnedKeys.add(key);
+    console.warn(message);
+};
+
 const avatarColors = [
     'primary',
     'link',
@@ -1295,6 +1340,18 @@ const NON_INTERACTIVE_ROLES = [
     'presentation',
     'none',
 ];
+/**
+ * Elements other than `a` that declare `target` themselves, so on them it is
+ * the element's own attribute and not a link attribute Avatar withholds for
+ * want of one. The link attribute warning leaves `target` out on these, the way
+ * it leaves `rel` out everywhere. `area` and `base` are void elements, which
+ * Avatar's content rules out, so `form` is the one a caller can reach.
+ */
+const ELEMENTS_WITH_OWN_TARGET = [
+    'form',
+    'area',
+    'base',
+];
 /**
  * Derives a small set of initials from a name (e.g. "Ada Lovelace" -> "AL").
  */
@@ -1430,6 +1487,50 @@ const Avatar = forwardRef(function Avatar(avatarProps, ref) {
     // Only forward link attributes when rendering an anchor or a custom (non-DOM)
     // component; a plain `as="div"` must not receive a stray `href`/`target`/`rel`.
     const isLinkLike = Tag === 'a' || typeof Tag !== 'string' || isCustomElement(Tag);
+    // A plain element like a `div` declares no `href` or `target`, so the type
+    // accepts them as Avatar's own while the drop below withholds them, and
+    // without this they would vanish in silence (#733). Forwarding them would put
+    // them where HTML has no such attribute, so the drop stays and development
+    // reports it instead, naming only the ones actually passed.
+    //
+    // `rel` is withheld too but left out here. React declares it on every
+    // element, so on a plain `as` it is that element's own attribute, and
+    // "render it as a link" would be the wrong advice for it. `target` is the
+    // same on an element that declares it, such as `form`, so it is left out
+    // there. Whether to forward either one to such an element is a separate
+    // question from this warning.
+    //
+    // Only for an `as` the caller wrote. Without one the element is Avatar's own
+    // choice, and a message naming an `as` they never passed sends them looking
+    // for it. A value counts when it is truthy, the same test that picks `'a'`
+    // over `'figure'`, so an empty `href` from data asks for no link and draws no
+    // warning. The key is the element plus the attributes passed, so a re-render
+    // or a list of avatars warns once, while a different combination on the same
+    // element still gets its own warning rather than hiding behind the first.
+    //
+    // Development-only is `warnOnce`'s job, as it is for the colour warnings, so
+    // this block has no production check of its own. One here would have to read
+    // `process` safely, and a `typeof process` test is not something a bundler
+    // replaces: in a browser it is false, and the warning never fired in the
+    // development builds it exists for. The cost is that production still
+    // collects the attributes and builds the message for an avatar that needs
+    // it, which is small and limited to the case the warning is about.
+    if (as != null && !isLinkLike) {
+        const dropped = Object.entries({
+            href,
+            target: ELEMENTS_WITH_OWN_TARGET.includes(as) ? undefined : target,
+        })
+            .filter(([, value]) => value)
+            .map(([key]) => key);
+        if (dropped.length > 0) {
+            warnOnce(`Avatar:link-props-on-${as}:${dropped.join('+')}`, `[bestax-bulma] <Avatar as="${as}" ${dropped.join(' ')}>: this ` +
+                `<${as}> renders without ` +
+                `${dropped.map(key => `"${key}"`).join(' and ')}, because Avatar ` +
+                `passes link attributes on only to a target that can be a link (an ` +
+                `"a", a custom element, or a component). To make it a link, render ` +
+                `it as="a" or pass a link component to "as".`);
+        }
+    }
     // Present-only, not `{ href, target, rel }`. An unconditional spread hands the
     // target these keys whatever the caller passed, and a key existing is not free:
     // a target that tests for one sees a link where there is none, and one that
@@ -1452,7 +1553,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.
@@ -1464,10 +1565,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, {})] }));
@@ -1820,12 +1929,12 @@ const CardComponent = ({ className, children, textColor, color, bgColor, hasShad
  * The set withheld from a non-anchor `Card.FooterItem` (`span`/`button`): the
  * derived anchor-only attributes, minus `type` (also valid on a `<button>` as
  * `submit`/`button`/`reset`, so stripping it there would remove a working
- * attribute — the same trade `DropdownItem`'s own `STRIP_FROM_NON_ANCHOR`
- * accepts, in `./Dropdown.tsx`), plus `rel` (React declares it on
- * `HTMLAttributes` for every element, so the derived set alone would not
- * withhold it — the same addition `Level.Item` makes).
+ * attribute; one set for both tags means a `type` also reaches a `<span>`,
+ * which `Dropdown.Item` avoids by choosing its set per tag), plus `rel` (React
+ * declares it on `HTMLAttributes` for every element, so the derived set alone
+ * would not withhold it — the same addition `Level.Item` makes).
  */
-const STRIP_FROM_NON_ANCHOR$2 = (() => {
+const STRIP_FROM_NON_ANCHOR$1 = (() => {
     const { type: _type, ...rest } = ANCHOR_ONLY_ATTRS;
     return { ...rest, rel: true };
 })();
@@ -1965,9 +2074,8 @@ const CardFooterItem = ({ as = 'span', className, children, color, bgColor, text
     if (as === 'a') {
         return (jsx("a", { className: itemClasses, ...omitAttrs(rest, STRIP_FROM_NON_BUTTON), children: children }));
     }
-    const forwarded = omitAttrs(rest, STRIP_FROM_NON_ANCHOR$2);
+    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
@@ -1977,13 +2085,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 }));
 };
@@ -2223,6 +2327,35 @@ const DropdownComponent = forwardRef(function DropdownComponent({ label, childre
                 e.preventDefault();
                 items[items.length - 1].focus();
                 break;
+            case 'Enter':
+            case ' ': {
+                // Activate the focused item by clicking it, so its `onClick` runs and
+                // closing follows `closeOnClick` as it does for the mouse. A caller's
+                // own key handler that prevented the default has claimed the key, and
+                // is left to it rather than followed by a second activation.
+                if (currentIndex < 0 || e.defaultPrevented)
+                    break;
+                const item = items[currentIndex];
+                // Leave the browser's own activation alone, or the item runs twice: a
+                // `<button>` answers both keys, and a link with an `href` answers
+                // Enter. A link does not answer Space, so Space on a link is handled
+                // here too, which also keeps the page from scrolling.
+                if (item.tagName === 'BUTTON')
+                    break;
+                if (e.key === 'Enter' &&
+                    item.tagName === 'A' &&
+                    item.hasAttribute('href')) {
+                    break;
+                }
+                e.preventDefault();
+                // A held key sends a keydown per auto-repeat. Clicking on each would
+                // toggle a checkbox item over and over while `closeOnClick` is off,
+                // so only the first press activates. The default is still prevented
+                // on the repeats above, so a held Space does not scroll the page.
+                if (!e.repeat)
+                    item.click();
+                break;
+            }
         }
     };
     const dropdownClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
@@ -2232,19 +2365,16 @@ const DropdownComponent = forwardRef(function DropdownComponent({ label, childre
  * The anchor's attributes, minus the one a `<button>` legitimately takes.
  *
  * `type` stays: `as="button"` is a supported form and `type="submit"` is valid
- * there, so stripping it would remove a working attribute. The exclusion is per
- * COMPONENT where the reason is per TAG, so it also lets a `type` reach a
- * `<div>`; selecting the set from the rendered element would close that, and
- * moves output.
- *
- * This set differs from `Level.Item`'s in both directions, not just one. The
- * `type` above, which Level strips and this component keeps, and `rel`, which
- * Level adds and this component does not: React declares `rel` on
+ * there, so stripping it would remove a working attribute. A `<div>` takes no
+ * `type`, so it gets the whole `ANCHOR_ONLY_ATTRS` set instead. The set is
+ * chosen by the rendered tag because that is where the reason lives (#692).
+ *
+ * Neither set withholds `rel`, which `Level.Item` does: React declares `rel` on
  * `HTMLAttributes` for every element, so withholding it would diverge from
- * React's own typing — the call #641 recorded for `Navbar.Link`. Level
+ * React's own typing, the call #641 recorded for `Navbar.Link`. Level
  * withholds it anyway, because it always has.
  */
-const STRIP_FROM_NON_ANCHOR$1 = (() => {
+const STRIP_FROM_BUTTON = (() => {
     const { type: _type, ...rest } = ANCHOR_ONLY_ATTRS;
     return rest;
 })();
@@ -2274,19 +2404,27 @@ const DropdownItem = ((itemProps) => {
     // are not interchangeable and neither derives from the other.
     //
     // Menu's condition also admits a custom component and a custom element, which
-    // own their prop contracts. `as` is closed to three intrinsic tags here, so
-    // neither can arrive and the anchor test is the whole rule.
-    const forwarded = Component === 'a' ? rest : omitAttrs(rest, STRIP_FROM_NON_ANCHOR$1);
+    // own their prop contracts. Here the set follows the tag: an `<a>` keeps all
+    // of them, a `<button>` keeps `type`, and any other `as` keeps none of them.
+    const forwarded = Component === 'a'
+        ? rest
+        : Component === 'button'
+            ? omitAttrs(rest, STRIP_FROM_BUTTON)
+            : omitAttrs(rest, ANCHOR_ONLY_ATTRS);
     return (jsx(Component, { className: classNames(usePrefixedClassNames('dropdown-item', {
             'is-active': active,
-        }), bulmaHelperClasses, className), tabIndex: 0, "data-testid": "dropdown-item", ...forwarded, 
+        }), bulmaHelperClasses, className), "data-testid": "dropdown-item", ...forwarded, 
+        // After `forwarded` for the same reason as `role` and `type` below: a
+        // spread carrying `tabIndex: undefined` would otherwise erase the
+        // default. The item keeps its menu role and its place in the arrow-key
+        // order, but a `<div>` or an anchor without an `href` cannot take focus
+        // without a tabindex, so the arrow keys stall on it.
+        tabIndex: forwarded.tabIndex ?? 0, 
         // After `forwarded` for the same reason as `type` below: a spread
         // 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 }));
 });
 /**
@@ -2395,7 +2533,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
@@ -3161,23 +3301,6 @@ const UNSTYLED_MODIFIER_COLORS = [
     'grey-lighter',
 ];
 const CSS_BACKED = 'primary, link, info, success, warning, danger, black, white, light, dark';
-const warnedKeys = new Set();
-// Fail closed: with no bundler and no Node (raw CDN ESM), reading `process`
-// throws and warnings stay off, so production can never warn by accident.
-const isDev = () => {
-    try {
-        return process.env.NODE_ENV !== 'production';
-    }
-    catch {
-        return false;
-    }
-};
-const warnOnce = (key, message) => {
-    if (!isDev() || warnedKeys.has(key))
-        return;
-    warnedKeys.add(key);
-    console.warn(message);
-};
 /**
  * Dev warning for a `color` value whose `is-<color>` modifier has no shipped
  * CSS. `extraUnstyled` covers per-component dead values beyond the shared
@@ -4612,6 +4735,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,11 +4931,26 @@ let toasts = [];
 // Queued toasts: FIFO queue, one at a time
 let queuedToasts = [];
 let currentQueuedToast = null;
+// The server has nowhere to portal a toast to, and its copy of this module is
+// shared by every request, so server rendering reads an empty list. Hydration
+// reads it too, which keeps the first client render matching the server's.
+const noToasts = [];
+const getServerToasts = () => noToasts;
+// What a container shows right now: the stacked toasts, then the queued one on
+// screen. ToastContainer renders from this rather than from updates alone, so
+// toasts 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 `noToasts`
+// itself, so a container that hydrates with nothing to show reads the same
+// snapshot the server did and has no reason to render again.
+let visibleToasts = noToasts;
+const getVisibleToasts = () => visibleToasts;
 const notifyListeners = () => {
     const allVisible = [...toasts];
     if (currentQueuedToast) {
         allVisible.push(currentQueuedToast);
     }
+    visibleToasts = allVisible.length > 0 ? allVisible : noToasts;
     toastListeners.forEach(listener => listener([...allVisible]));
 };
 const processQueuedToast = () => {
@@ -4873,26 +5053,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 [toastList, setToastList] = useState([]);
-    useEffect(() => {
-        return toast.subscribe(setToastList);
-    }, []);
+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);
 };
 
 /**
@@ -5037,6 +5229,14 @@ const Dialog = forwardRef(({ isOpen, title, message, type = 'default', confirmTe
 Dialog.displayName = 'Dialog';
 let dialogListeners = new Set();
 let currentDialog = null;
+// DialogContainer renders from the open dialog rather than from updates alone,
+// so a dialog raised before it mounted still opens once it does.
+const getCurrentDialog = () => currentDialog;
+// The server renders no dialog: its copy of this module is shared by every
+// request, so the dialog it holds may belong to another page. Hydration reads
+// the same empty value, which keeps the first client render matching the
+// server's, and the dialog opens right after.
+const getServerDialog = () => null;
 const notifyDialogListeners = () => {
     dialogListeners.forEach(listener => listener(currentDialog));
 };
@@ -5098,10 +5298,8 @@ const dialog = {
  * @returns {JSX.Element | null} The rendered dialog, or null if none is active.
  */
 const DialogContainer = () => {
-    const [current, setCurrent] = React.useState(null);
-    useEffect(() => {
-        return dialog.subscribe(setCurrent);
-    }, []);
+    // Starts from the dialog already open instead of none, then follows changes.
+    const current = useSyncExternalStore(dialog.subscribe, getCurrentDialog, getServerDialog);
     if (!current) {
         return null;
     }
@@ -6175,11 +6373,28 @@ let notifications = [];
 // Queue support
 let queuedNotifications = [];
 let currentQueuedNotification = null;
+// The server has nowhere to portal a notification to, and its copy of this
+// module is shared by every request, so server rendering reads an empty list.
+// Hydration reads it too, which keeps the first client render matching the
+// server's.
+const noNotifications = [];
+const getServerNotifications = () => noNotifications;
+// What a container shows right now: the stacked notifications, then the queued
+// one on screen. NotificationContainer renders from this rather than from
+// 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.
+let visibleNotifications = noNotifications;
+const getVisibleNotifications = () => visibleNotifications;
 const notifyNotificationListeners = () => {
     const allVisible = [...notifications];
     if (currentQueuedNotification) {
         allVisible.push(currentQueuedNotification);
     }
+    visibleNotifications = allVisible.length > 0 ? allVisible : noNotifications;
     notificationListeners.forEach(listener => listener([...allVisible]));
 };
 const processQueuedNotification = () => {
@@ -6313,28 +6528,28 @@ const NotificationItem = ({ instance, onClose }) => {
     }, [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 })) }));
 };
+// 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. Mount it
- * before calling `notification`: a notification shown while no container is
- * mounted doesn't appear when one mounts, only alongside the next call.
+ * 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' }) => {
-    const [items, setItems] = useState([]);
-    useEffect(() => {
-        return notification.subscribe(setItems);
-    }, []);
-    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',
@@ -6350,7 +6565,27 @@ 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.
+ *
+ * @function
+ * @param {{ position?: NotificationPosition }} props - Container props.
+ * @returns {JSX.Element | null} The rendered notification container, or null if empty.
+ */
+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 stacks = groupIntoPositionStacks(items, item => item.options.position, position, notificationStackOrder);
+    return createPortal(stacks.map(stack => (jsx("div", { style: notificationStackStyle(stack.position), children: stack.items.map(item => (jsx(NotificationItem, { instance: item, onClose: notification.close }, item.id))) }, stack.key))), document.body);
 };
 
 /**
@@ -6893,7 +7128,21 @@ const RadiosProvider = RadiosContext.Provider;
 const CheckboxesProvider = CheckboxesContext.Provider;
 
 /**
- * Valid colors for the Checkbox component.
+ * The values the Checkbox `color` prop accepts, as a readonly tuple.
+ *
+ * `CheckboxProps['color']` is typed from it, so the two 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 component adds no color class for a value
+ * outside the tuple.
+ *
+ * @example
+ * import { Checkbox, checkboxColors } from '@allxsmith/bestax-bulma';
+ *
+ * checkboxColors.map(color => (
+ *   <Checkbox key={color} color={color}>
+ *     {color}
+ *   </Checkbox>
+ * ));
  */
 const checkboxColors = [
     'primary',
@@ -6904,7 +7153,17 @@ const checkboxColors = [
     'danger',
 ];
 /**
- * Valid sizes for the Checkbox component.
+ * The values the Checkbox `size` prop accepts, as a readonly tuple.
+ *
+ * `CheckboxProps['size']` is typed from it, so the two list the same values.
+ * Use it to offer a size choice or to check a value that arrives at runtime:
+ * the component adds no size class for a value outside the tuple. These are
+ * element sizes, not the spacing scale in `validSizes`.
+ *
+ * @example
+ * import { checkboxSizes } from '@allxsmith/bestax-bulma';
+ *
+ * type CheckboxSize = (typeof checkboxSizes)[number];
  */
 const checkboxSizes = ['small', 'normal', 'medium', 'large'];
 /**
@@ -7349,7 +7608,23 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
 File.displayName = 'File';
 
 /**
- * Valid colors for the Radio component.
+ * The values the Radio `color` prop accepts, as a readonly tuple.
+ *
+ * `RadioProps['color']` is typed from it, so the two 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 component adds no color class for a value
+ * outside the tuple.
+ *
+ * @example
+ * import { Radio, Radios, radioColors } from '@allxsmith/bestax-bulma';
+ *
+ * <Radios name="accent" defaultValue="primary">
+ *   {radioColors.map(color => (
+ *     <Radio key={color} value={color} color={color}>
+ *       {color}
+ *     </Radio>
+ *   ))}
+ * </Radios>;
  */
 const radioColors = [
     'primary',
@@ -7360,7 +7635,17 @@ const radioColors = [
     'danger',
 ];
 /**
- * Valid sizes for the Radio component.
+ * The values the Radio `size` prop accepts, as a readonly tuple.
+ *
+ * `RadioProps['size']` is typed from it, so the two list the same values. Use
+ * it to offer a size choice or to check a value that arrives at runtime: the
+ * component adds no size class for a value outside the tuple. These are
+ * element sizes, not the spacing scale in `validSizes`.
+ *
+ * @example
+ * import { radioSizes } from '@allxsmith/bestax-bulma';
+ *
+ * type RadioSize = (typeof radioSizes)[number];
  */
 const radioSizes = ['small', 'normal', 'medium', 'large'];
 /**
@@ -7491,7 +7776,21 @@ const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, me
 const Radios = withSubComponents(RadiosComponent, { Radio }, 'Radios');
 
 /**
- * Valid colors for the Switch component.
+ * The values the Switch `color` and `passiveType` props accept, as a readonly
+ * tuple.
+ *
+ * Both props are typed from it, so they 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 component adds no class for a value outside the tuple.
+ *
+ * @example
+ * import { Switch, switchColors } from '@allxsmith/bestax-bulma';
+ *
+ * switchColors.map(color => (
+ *   <Switch key={color} color={color} defaultChecked>
+ *     {color}
+ *   </Switch>
+ * ));
  */
 const switchColors = [
     'primary',
@@ -7502,7 +7801,17 @@ const switchColors = [
     'danger',
 ];
 /**
- * Valid sizes for the Switch component.
+ * The values the Switch `size` prop accepts, as a readonly tuple.
+ *
+ * `SwitchProps['size']` is typed from it, so the two list the same values. Use
+ * it to offer a size choice or to check a value that arrives at runtime: the
+ * component adds no size class for a value outside the tuple. These are
+ * element sizes, not the spacing scale in `validSizes`.
+ *
+ * @example
+ * import { switchSizes } from '@allxsmith/bestax-bulma';
+ *
+ * type SwitchSize = (typeof switchSizes)[number];
  */
 const switchSizes = ['small', 'normal', 'medium', 'large'];
 /**
@@ -12998,17 +13307,130 @@ function cssVarToProp(varName) {
         .join('');
 }
 /**
- * Mapping of camelCase prop names to their Bulma CSS variable counterparts.
+ * Prop names `cssVarToProp` would mint that are already `BulmaOtherProps`
+ * helper props: `--bulma-shadow` becomes `shadow` and `--bulma-radius` becomes
+ * `radius`. They stay out of `bulmaVarPropMap`, so on Theme each is the helper
+ * prop it is on every other component, and both variables are still reachable
+ * through `bulmaVars`.
  *
- * `--bulma-shadow` is excluded: `cssVarToProp` would mint it as `shadow`,
- * which already exists as a `BulmaOtherProps` prop applied via
- * `useBulmaClasses` — keeping it out of this map means that
- * prop keeps its existing class-based meaning, while `--bulma-shadow` is
- * still reachable through the `bulmaVars` object.
+ * `radius` was missed here once and set `--bulma-radius` while typed as the
+ * helper (#694). It still writes that variable, so what it did then keeps
+ * working; see `themeRadiusVar`.
+ */
+const helperPropNames = ['shadow', 'radius'];
+/**
+ * Mapping of camelCase prop names to their Bulma CSS variable counterparts,
+ * minus the `helperPropNames` above.
  */
 const bulmaVarPropMap = Object.fromEntries(bulmaCssVars
     .map(cssVar => [cssVarToProp(cssVar), cssVar])
-    .filter(([prop]) => prop !== 'shadow'));
+    .filter(([prop]) => !helperPropNames.includes(prop)));
+/**
+ * What each helper value of `radius` writes to `--bulma-radius` on a Theme,
+ * alongside its class.
+ *
+ * Before #694, `radius="radiusless"` wrote `--bulma-radius: radiusless`. That
+ * is not a length, and a declaration reading an invalid variable falls back
+ * to its property's initial value, which for a border radius is 0. So
+ * everything inside the Theme that takes its radius from that variable lost
+ * it, and under `isRoot` so did everything on the page that does. Writing a
+ * real 0 keeps what
+ * people see and makes it valid CSS. Keyed by the helper values, so adding
+ * one means saying what it writes.
+ */
+const radiusHelperVars = {
+    radiusless: '0',
+};
+/**
+ * What `radius` writes to `--bulma-radius` on a Theme, or `undefined` when it
+ * writes nothing.
+ *
+ * A helper value writes its `radiusHelperVars` entry. Any other non-empty
+ * string is written as given: before #694 every `radius` on Theme set the
+ * variable whatever its type said, and a JavaScript caller passing a length
+ * got the radius it asked for. That keeps working so nothing breaks, but the
+ * type rejects it, so it warns in development and points at `bulmaVars`.
+ *
+ * Only a string writes anything, because only a string ever set the variable
+ * to something usable: an empty value or zero was dropped, and a boolean or
+ * any other bare number is not a length. The helper ignores those too, the
+ * way it does on every other component.
+ */
+const themeRadiusVar = (radius) => {
+    if (typeof radius !== 'string' || radius === '') {
+        return undefined;
+    }
+    if (validRadii.includes(radius)) {
+        return radiusHelperVars[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 ` +
+        `bulmaVars={{ '--bulma-radius': '${radius}' }} instead.`);
+    return radius;
+};
+/** The one `<style>` element every `isRoot` Theme writes into. */
+const ROOT_STYLE_ID = 'bestax-bulma-theme-vars';
+/**
+ * The `:root` rules of every mounted `isRoot` Theme that has any, keyed by the
+ * Theme's render order.
+ *
+ * Root Themes share one `<style>` element, so each keeps its rules here and
+ * the element is rebuilt from all of them whenever one mounts, changes or
+ * unmounts. Before this each Theme overwrote the element with only its own
+ * rules, and the first to unmount removed it for all of them (#736).
+ *
+ * The key is a number each Theme takes when it first renders. React renders a
+ * parent before its children and an earlier sibling before a later one, so an
+ * inner or later-mounted root Theme sorts later, comes later in the
+ * stylesheet, and wins a variable two of them set, as an inner scoped Theme
+ * does. Effects would give the wrong answer for nesting: React runs a child's
+ * effects before its parent's. Only the relative order matters, so a number
+ * skipped by StrictMode calling the initializer twice, or by a render React
+ * throws away, is harmless. The key never changes, so an update keeps its
+ * place and re-rendering one Theme never changes which one wins.
+ */
+const rootThemeRules = new Map();
+let nextRootOrder = 0;
+/**
+ * Write every registered root Theme's rules into the shared element, creating
+ * it when needed and removing it once no Theme has any rules left.
+ */
+const renderRootThemeRules = () => {
+    let element = document.getElementById(ROOT_STYLE_ID);
+    if (rootThemeRules.size === 0) {
+        element?.remove();
+        return;
+    }
+    if (!element) {
+        element = document.createElement('style');
+        element.id = ROOT_STYLE_ID;
+        document.head.appendChild(element);
+    }
+    element.textContent = [...rootThemeRules]
+        .sort(([a], [b]) => a - b)
+        .map(([, rules]) => rules)
+        .join('\n');
+};
+/**
+ * Record one Theme's `:root` rules, where an empty string means it has none,
+ * and rebuild the shared element if that changed anything. A Theme with no
+ * rules never touches the element, which is what it did before the registry
+ * too.
+ */
+const setRootThemeRules = (order, rules) => {
+    if ((rootThemeRules.get(order) ?? '') === rules) {
+        return;
+    }
+    if (rules) {
+        rootThemeRules.set(order, rules);
+    }
+    else {
+        rootThemeRules.delete(order);
+    }
+    renderRootThemeRules();
+};
 /**
  * Theme component that injects Bulma CSS variables either globally or locally.
  *
@@ -13025,7 +13447,11 @@ const bulmaVarPropMap = Object.fromEntries(bulmaCssVars
  *   <Button color="primary">Themed</Button>
  * </Theme>
  */
-const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode, ...restProps }) => {
+const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode, radius, ...restProps }) => {
+    const radiusVar = themeRadiusVar(radius);
+    const radiusHelper = validRadii.includes(radius)
+        ? radius
+        : undefined;
     // Extract Bulma variable props from restProps
     const { bulmaVarProps, otherProps } = useMemo(() => {
         const varProps = {};
@@ -13040,8 +13466,12 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
         }
         return { bulmaVarProps: varProps, otherProps: otherPropsObj };
     }, [restProps]);
-    // Use Bulma classes for styling (only when not isRoot)
-    const { bulmaHelperClasses, rest } = useBulmaClasses(otherProps);
+    // Use Bulma classes for styling (only when not isRoot). Only a helper value
+    // of `radius` reaches the helper; a legacy string went to the variable.
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        ...otherProps,
+        radius: radiusHelper,
+    });
     // Merge bulmaVars and individual props, with props taking precedence
     const mergedVars = useMemo(() => {
         const vars = { ...bulmaVars };
@@ -13050,37 +13480,34 @@ const Theme = ({ bulmaVars = {}, children, className, isRoot = false, colorMode,
                 vars[cssVar] = bulmaVarProps[propName];
             }
         }
+        if (radiusVar !== undefined) {
+            vars['--bulma-radius'] = radiusVar;
+        }
         return vars;
-    }, [bulmaVars, bulmaVarProps]);
-    // Inject CSS variables globally at :root level
-    useEffect(() => {
+    }, [bulmaVars, bulmaVarProps, radiusVar]);
+    // This Theme's place among root Themes; see `rootThemeRules`.
+    const [rootOrder] = useState(() => nextRootOrder++);
+    // The `:root` rules this Theme contributes, or '' when it contributes none.
+    const rootRules = useMemo(() => {
         if (!isRoot) {
-            return;
-        }
-        const validVars = Object.entries(mergedVars).filter(([key, value]) => bulmaCssVars.includes(key) && value);
-        if (validVars.length === 0) {
-            return;
-        }
-        // Create and inject a style element for global CSS variables
-        const styleId = 'bestax-bulma-theme-vars';
-        let styleElement = document.getElementById(styleId);
-        if (!styleElement) {
-            styleElement = document.createElement('style');
-            styleElement.id = styleId;
-            document.head.appendChild(styleElement);
+            return '';
         }
-        const cssRules = validVars
+        const cssRules = Object.entries(mergedVars)
+            .filter(([key, value]) => bulmaCssVars.includes(key) && value)
             .map(([key, value]) => `${key}: ${value};`)
             .join(' ');
-        styleElement.textContent = `:root { ${cssRules} }`;
-        // Cleanup function to remove the style element when component unmounts
-        return () => {
-            const element = document.getElementById(styleId);
-            if (element) {
-                element.remove();
-            }
-        };
+        return cssRules ? `:root { ${cssRules} }` : '';
     }, [mergedVars, isRoot]);
+    // Inject CSS variables globally at :root level, alongside any other root
+    // Themes. Clearing `isRoot` or every variable passes '', which withdraws
+    // this Theme's rules.
+    useEffect(() => {
+        setRootThemeRules(rootOrder, rootRules);
+    }, [rootOrder, rootRules]);
+    // Withdraw them on unmount. Kept apart from the effect above so a change
+    // rewrites the shared element in place rather than removing and recreating
+    // it between the cleanup and the next run.
+    useEffect(() => () => setRootThemeRules(rootOrder, ''), [rootOrder]);
     // Toggle Bulma's light/dark scheme by writing the `data-theme` attribute on
     // the document root (<html>). This is always global, even on a scoped Theme.
     // `'system'` removes the attribute so Bulma follows the OS preference.