@allxsmith/bestax-bulma 5.18.0 → 5.18.1

package/dist/index.esm.js

@@ -1250,6 +1250,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 +1319,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 +1466,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
@@ -1820,12 +1900,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,7 +2045,7 @@ 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, 
@@ -2223,6 +2303,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 +2341,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,12 +2380,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 (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.
@@ -3161,23 +3277,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
@@ -4766,11 +4865,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 = () => {
@@ -4882,10 +4996,9 @@ const toast = {
  * @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);
-    }, []);
+    // 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;
     }
@@ -5037,6 +5150,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 +5219,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 +6294,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 = () => {
@@ -6315,19 +6451,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] = useState([]);
-    useEffect(() => {
-        return notification.subscribe(setItems);
-    }, []);
+    // 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;
     }
@@ -6893,7 +7026,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 +7051,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 +7506,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 +7533,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 +7674,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 +7699,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 +13205,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 +13345,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 +13364,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 +13378,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.