@allxsmith/bestax-bulma 5.17.0 → 5.18.1

package/dist/index.cjs

@@ -1252,6 +1252,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',
@@ -1297,6 +1321,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").
  */
@@ -1432,6 +1468,50 @@ const Avatar = React.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
@@ -1822,12 +1902,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 };
 })();
@@ -1967,7 +2047,7 @@ const CardFooterItem = ({ as = 'span', className, children, color, bgColor, text
     if (as === 'a') {
         return (jsxRuntime.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 (jsxRuntime.jsx("button", { className: itemClasses, ...forwarded, 
@@ -2225,6 +2305,35 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
                 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);
@@ -2234,19 +2343,16 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
  * 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;
 })();
@@ -2276,12 +2382,22 @@ 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 (jsxRuntime.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.
@@ -3163,23 +3279,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
@@ -3206,6 +3305,38 @@ const warnDeprecatedColorProp = (component, value, hint) => {
         `a visual effect. It will be removed in the next major version. ${hint}`);
 };
 
+/** A count read as a whole number from zero, or `fallback` when it's no number. */
+function whole(count, fallback) {
+    return Number.isFinite(count) ? Math.max(Math.floor(count), 0) : fallback;
+}
+function range(from, to) {
+    return Array.from({ length: Math.max(to - from + 1, 0) }, (_, i) => from + i);
+}
+/**
+ * The pages to show for `current` of `total`: the first and last
+ * `boundaries`, `siblings` on each side of the current one, and a gap for
+ * each run left out. A gap of a single page shows that page instead, and the
+ * window around the current page slides inward near either end, so the row
+ * keeps its length as the page moves.
+ */
+function pageItems(total, current, siblings, boundaries) {
+    const windowSize = siblings * 2 + 1;
+    // Every page fits in the room the boundary pages, the window and two gaps take.
+    if (total <= boundaries * 2 + windowSize + 2)
+        return range(1, total);
+    const lowest = boundaries + 2;
+    const highest = total - boundaries - 1;
+    const start = Math.min(Math.max(current - siblings, lowest), highest - windowSize + 1);
+    const end = start + windowSize - 1;
+    const gap = (from, to, name) => to === from ? [from] : [name];
+    return [
+        ...range(1, boundaries),
+        ...gap(boundaries + 1, start - 1, 'start-gap'),
+        ...range(start, end),
+        ...gap(end + 1, total - boundaries, 'end-gap'),
+        ...range(total - boundaries + 1, total),
+    ];
+}
 /**
  * "Previous" navigation button.
  *
@@ -3213,9 +3344,9 @@ const warnDeprecatedColorProp = (component, value, hint) => {
  * @param {PaginationPreviousNextProps} props - Props for the PaginationPrevious component.
  * @returns {JSX.Element} The rendered previous button.
  */
-const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsxRuntime.jsx("a", { className: classNames(usePrefixedClassNames('pagination-previous'), className, {
+const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsxRuntime.jsx("a", { className: classNames(usePrefixedClassNames('pagination-previous', {
         'is-disabled': disabled,
-    }), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
+    }), className), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
         ? e => {
             e.preventDefault();
             e.stopPropagation();
@@ -3228,9 +3359,7 @@ const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsx
  * @param {PaginationPreviousNextProps} props - Props for the PaginationNext component.
  * @returns {JSX.Element} The rendered next button.
  */
-const PaginationNext = ({ className, disabled, children, ...props }) => (jsxRuntime.jsx("a", { className: classNames(usePrefixedClassNames('pagination-next'), className, {
-        'is-disabled': disabled,
-    }), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
+const PaginationNext = ({ className, disabled, children, ...props }) => (jsxRuntime.jsx("a", { className: classNames(usePrefixedClassNames('pagination-next', { 'is-disabled': disabled }), className), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
         ? e => {
             e.preventDefault();
             e.stopPropagation();
@@ -3244,7 +3373,8 @@ const PaginationNext = ({ className, disabled, children, ...props }) => (jsxRunt
  * @returns {JSX.Element} The rendered pagination.
  * @see {@link https://bulma.io/documentation/components/pagination/ | Bulma Pagination documentation}
  */
-const PaginationComponent = ({ color, textColor, bgColor, size, align, rounded, className, children, ...props }) => {
+const PaginationComponent = ({ color, textColor, bgColor, size, align, rounded, total, current, onPageChange, siblingCount = 1, boundaryCount = 1, previousLabel = 'Previous', nextLabel = 'Next', disabled, getPageHref, getPageLabel, className, children, ...props }) => {
+    const [kept, setKept] = React.useState(1);
     warnDeprecatedColorProp('Pagination', color, 'Use the textColor / bgColor helper props instead.');
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
@@ -3259,7 +3389,43 @@ const PaginationComponent = ({ color, textColor, bgColor, size, align, rounded,
         'is-rounded': rounded,
     });
     const paginationClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("nav", { className: paginationClasses, role: "navigation", "aria-label": "pagination", ...rest, children: children }));
+    // A child that renders nothing (`{show && …}` when false) is no children.
+    const fromTotal = total !== undefined && React.Children.toArray(children).length === 0;
+    let content = children;
+    if (fromTotal) {
+        const pages = Number.isFinite(total) ? Math.max(Math.floor(total), 0) : 0;
+        // A current page that's no number reads as the first.
+        const page = Math.min(Math.max(whole(current ?? kept, 1), 1), Math.max(pages, 1));
+        const choose = (next) => {
+            if (next === page)
+                return;
+            if (current === undefined)
+                setKept(next);
+            onPageChange?.(next);
+        };
+        /**
+         * What a link to `target` is given, beside what it renders. With no
+         * `getPageHref` it's a button; a link that's `off` goes nowhere.
+         */
+        const linkTo = (target, off) => ({
+            href: off || !getPageHref ? undefined : getPageHref(target),
+            role: getPageHref ? undefined : 'button',
+            // A link that's off is disabled too, and the parts drop its clicks.
+            onClick: () => choose(target),
+            onKeyDown: getPageHref
+                ? undefined
+                : (e) => {
+                    if (off || (e.key !== 'Enter' && e.key !== ' '))
+                        return;
+                    e.preventDefault();
+                    choose(target);
+                },
+        });
+        const atStart = disabled || page <= 1;
+        const atEnd = disabled || page >= pages;
+        content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PaginationPrevious, { disabled: atStart, ...linkTo(page - 1, atStart), children: previousLabel }), jsxRuntime.jsx(PaginationNext, { disabled: atEnd, ...linkTo(page + 1, atEnd), children: nextLabel }), jsxRuntime.jsx(PaginationList, { children: pageItems(pages, page, whole(siblingCount, 1), whole(boundaryCount, 1)).map(item => typeof item === 'number' ? (jsxRuntime.jsx(PaginationLink, { "aria-label": getPageLabel ? getPageLabel(item) : `Page ${item}`, active: item === page, disabled: disabled, ...linkTo(item, Boolean(disabled)), children: item }, item)) : (jsxRuntime.jsx(PaginationEllipsis, {}, item))) })] }));
+    }
+    return (jsxRuntime.jsx("nav", { className: paginationClasses, role: "navigation", "aria-label": "pagination", ...rest, children: content }));
 };
 /**
  * Container for page links and ellipsis.
@@ -3299,10 +3465,10 @@ const PaginationLink = ({ className, textColor, bgColor, active, disabled, onCli
             onClick(e);
         }
     };
-    return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("a", { className: classNames(usePrefixedClassNames('pagination-link'), bulmaHelperClasses, className, {
+    return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("a", { className: classNames(usePrefixedClassNames('pagination-link', {
                 'is-current': active,
                 'is-disabled': disabled,
-            }), "aria-current": active ? 'page' : undefined, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: handleClick, ...rest, children: children }) }));
+            }), bulmaHelperClasses, className), "aria-current": active ? 'page' : undefined, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: handleClick, ...rest, children: children }) }));
 };
 /**
  * Ellipsis separator.
@@ -4701,11 +4867,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 = () => {
@@ -4817,10 +4998,9 @@ const toast = {
  * @returns {JSX.Element | null} The rendered toast container, or null if empty.
  */
 const ToastContainer = ({ position = 'top-right', }) => {
-    const [toastList, setToastList] = React.useState([]);
-    React.useEffect(() => {
-        return toast.subscribe(setToastList);
-    }, []);
+    // Starts from the toasts already showing instead of an empty list, then
+    // follows changes.
+    const toastList = React.useSyncExternalStore(toast.subscribe, getVisibleToasts, getServerToasts);
     if (typeof document === 'undefined' || toastList.length === 0) {
         return null;
     }
@@ -4972,6 +5152,14 @@ const Dialog = React.forwardRef(({ isOpen, title, message, type = 'default', con
 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));
 };
@@ -5033,10 +5221,8 @@ const dialog = {
  * @returns {JSX.Element | null} The rendered dialog, or null if none is active.
  */
 const DialogContainer = () => {
-    const [current, setCurrent] = React.useState(null);
-    React.useEffect(() => {
-        return dialog.subscribe(setCurrent);
-    }, []);
+    // Starts from the dialog already open instead of none, then follows changes.
+    const current = React.useSyncExternalStore(dialog.subscribe, getCurrentDialog, getServerDialog);
     if (!current) {
         return null;
     }
@@ -6110,11 +6296,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 = () => {
@@ -6250,19 +6453,16 @@ const NotificationItem = ({ instance, onClose }) => {
 };
 /**
  * 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.
+ * Place once at your app root to enable the notification API.
  *
  * @function
  * @param {{ position?: NotificationPosition }} props - Container props.
  * @returns {JSX.Element | null} The rendered notification container, or null if empty.
  */
 const NotificationContainer = ({ position = 'top-right' }) => {
-    const [items, setItems] = React.useState([]);
-    React.useEffect(() => {
-        return notification.subscribe(setItems);
-    }, []);
+    // Starts from the notifications already showing instead of an empty list,
+    // then follows changes.
+    const items = React.useSyncExternalStore(notification.subscribe, getVisibleNotifications, getServerNotifications);
     if (typeof document === 'undefined' || items.length === 0) {
         return null;
     }
@@ -6828,7 +7028,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',
@@ -6839,7 +7053,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'];
 /**
@@ -7284,7 +7508,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',
@@ -7295,7 +7535,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'];
 /**
@@ -7426,7 +7676,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',
@@ -7437,7 +7701,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'];
 /**
@@ -12933,17 +13207,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.
  *
@@ -12960,7 +13347,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 } = React.useMemo(() => {
         const varProps = {};
@@ -12975,8 +13366,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 = React.useMemo(() => {
         const vars = { ...bulmaVars };
@@ -12985,37 +13380,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
-    React.useEffect(() => {
+    }, [bulmaVars, bulmaVarProps, radiusVar]);
+    // This Theme's place among root Themes; see `rootThemeRules`.
+    const [rootOrder] = React.useState(() => nextRootOrder++);
+    // The `:root` rules this Theme contributes, or '' when it contributes none.
+    const rootRules = React.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.
+    React.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.
+    React.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.