@allxsmith/bestax-bulma 5.30.0 → 5.32.0

package/dist/index.cjs

@@ -2352,6 +2352,182 @@ function getDeepestActiveElement(doc = document) {
     return active;
 }
 
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * Every menu-item role, so an item a caller gives `menuitemcheckbox` or
+ * `menuitemradio` (a filter or sort menu) stays reachable.
+ */
+const MENU_ITEM_SELECTOR = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
+/**
+ * Whether a menu item can be reached and activated: it isn't disabled, as a
+ * native control or through `aria-disabled="true"`.
+ */
+function isEnabledMenuItem(item) {
+    return (!item.hasAttribute('disabled') &&
+        item.getAttribute('aria-disabled') !== 'true');
+}
+/** Whether `node` is one of `menu`'s items, enabled or not. */
+const isItemOf = (menu, node) => Boolean(node && menu.contains(node) && node.matches(MENU_ITEM_SELECTOR));
+/** The items in `menu` the keys reach, in document order. */
+function enabledMenuItems(menu) {
+    return Array.from(menu.querySelectorAll(MENU_ITEM_SELECTOR)).filter(isEnabledMenuItem);
+}
+/** How long typed characters keep adding up to one search, in milliseconds. */
+const TYPEAHEAD_TIMEOUT = 500;
+/**
+ * Whether the browser activates `item` on this key by itself: a `<button>`
+ * answers Enter and Space, and a link with an `href` answers Enter.
+ */
+function activatesItself(item, key) {
+    if (item.tagName === 'BUTTON')
+        return true;
+    return key === 'Enter' && item.tagName === 'A' && item.hasAttribute('href');
+}
+/**
+ * The text typing finds an item by: what it says, without what's hidden from
+ * assistive technology, such as an icon whose glyph is a ligature's name.
+ */
+function label(item) {
+    let text = '';
+    const read = (node) => {
+        node.childNodes.forEach(child => {
+            if (child.nodeType === 3)
+                text += child.textContent;
+            else if (child.nodeType === 1 &&
+                child.getAttribute('aria-hidden') !== 'true') {
+                read(child);
+            }
+        });
+    };
+    read(item);
+    return text.trim().toLowerCase();
+}
+/**
+ * The item typing `search` moves to, or none. A single character looks from
+ * the item after the focused one, so typing the same letter again cycles
+ * through the items that start with it, and so does a run of one letter
+ * ("dd"). A longer search looks from the focused item, so typing more of
+ * its own text keeps it.
+ */
+function typeaheadMatch(items, search, current) {
+    const repeated = Array.from(search).every(char => char === search[0]);
+    const wanted = repeated ? search[0] : search;
+    const start = current < 0 ? 0 : current + (wanted.length === 1 ? 1 : 0);
+    for (let i = 0; i < items.length; i += 1) {
+        const item = items[(start + i) % items.length];
+        if (label(item).startsWith(wanted))
+            return item;
+    }
+    return undefined;
+}
+/**
+ * Moves through and activates the items of a `role="menu"` element from the
+ * keyboard. Put the `onKeyDown` it returns on that element. It reads the
+ * items from the element each time, so items that come and go are found,
+ * and it renders nothing.
+ *
+ * It acts only while focus is on the menu element itself or on one of its
+ * items, so anything else focusable inside the menu, such as a filter
+ * field, keeps its own keys.
+ *
+ * - Down and Up move to the next and previous enabled item, wrapping, and
+ *   Home and End go to the first and last. From no item, Down goes to the
+ *   first and Up to the last.
+ * - Enter and Space activate the focused item. A `<button>`, and a link with
+ *   an `href` for Enter, get the browser's own click, and anything else gets
+ *   one from here, so its `onClick` runs either way. A key held down
+ *   activates it once. A key handler on the item that called
+ *   `preventDefault()` has claimed the key, and nothing else runs it.
+ * - A printable character moves to the next enabled item whose text starts
+ *   with what has been typed. Characters typed within `TYPEAHEAD_TIMEOUT` of
+ *   each other add up to one search, until `reset` starts a new one.
+ *
+ * Items are `MENU_ITEM_SELECTOR` matches, and disabled ones are skipped by
+ * all of the above. Escape and Tab are left to the menu's owner, since what
+ * closing means is up to it, and so is any other key.
+ *
+ * @function useMenuKeys
+ * @returns The `keydown` handler for the menu element, and a way to forget
+ * what has been typed.
+ */
+function useMenuKeys() {
+    const typedRef = React.useRef({ text: '' });
+    React.useEffect(() => {
+        const typed = typedRef.current;
+        return () => clearTimeout(typed.timer);
+    }, []);
+    return React.useMemo(() => {
+        const reset = () => {
+            const typed = typedRef.current;
+            clearTimeout(typed.timer);
+            typed.text = '';
+        };
+        const onKeyDown = (event) => {
+            const menu = event.currentTarget;
+            const focused = getActiveElementInTree(menu);
+            if (focused !== menu && !isItemOf(menu, focused))
+                return;
+            const items = enabledMenuItems(menu);
+            if (!items.length)
+                return;
+            const current = items.indexOf(focused);
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    items[current >= 0 ? (current + 1) % items.length : 0].focus();
+                    return;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    items[current >= 0
+                        ? (current - 1 + items.length) % items.length
+                        : items.length - 1].focus();
+                    return;
+                case 'Home':
+                    event.preventDefault();
+                    items[0].focus();
+                    return;
+                case 'End':
+                    event.preventDefault();
+                    items[items.length - 1].focus();
+                    return;
+                case 'Enter':
+                case ' ': {
+                    if (current < 0 || event.defaultPrevented)
+                        return;
+                    const item = items[current];
+                    if (activatesItself(item, event.key)) {
+                        // The browser clicks on Enter's keydown, and a held key sends one
+                        // per auto-repeat. Space clicks on keyup, once however long it's
+                        // held.
+                        if (event.repeat && event.key === 'Enter')
+                            event.preventDefault();
+                        return;
+                    }
+                    // Space would scroll the page, and a held key repeats.
+                    event.preventDefault();
+                    if (!event.repeat)
+                        item.click();
+                    return;
+                }
+            }
+            if (event.key.length !== 1 ||
+                event.ctrlKey ||
+                event.metaKey ||
+                event.altKey ||
+                event.defaultPrevented) {
+                return;
+            }
+            event.preventDefault();
+            const typed = typedRef.current;
+            typed.text += event.key.toLowerCase();
+            clearTimeout(typed.timer);
+            typed.timer = setTimeout(reset, TYPEAHEAD_TIMEOUT);
+            typeaheadMatch(items, typed.text, current)?.focus();
+        };
+        return { onKeyDown, reset };
+    }, []);
+}
+
 /**
  * Checks if code is running in a browser environment.
  * @deprecated Dropdown's internal SSR guard, exported by accident; it will
@@ -2365,6 +2541,19 @@ const isBrowser$1 = (win, doc) => typeof win !== 'undefined' && typeof doc !== '
 /**
  * The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.
  *
+ * Down, Enter and Space on the trigger open the menu on its first enabled
+ * item, and Up opens it on its last. On the trigger of a menu that's already
+ * open, Down and Up move focus to its first and last item. In the menu, the
+ * arrow keys, Home and End move between the items, and Enter and Space run
+ * the focused one the way a click does. Typing a letter moves to the next
+ * item whose text starts with it, skipping disabled ones, and letters typed
+ * in quick succession add up to one search. Typing searches once focus is in
+ * the menu, so a letter typed on the trigger does nothing. Escape closes the
+ * menu and focuses the trigger, and Tab closes it and lets focus move on.
+ * Anything focusable in the menu that isn't an item, such as a field, keeps
+ * its own keys apart from Escape and Tab. For a panel built around fields,
+ * use `Popover`.
+ *
  * @function
  * @param {DropdownProps} props - Props for the Dropdown component.
  * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the root dropdown element.
@@ -2375,6 +2564,8 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
     const [active, setActive] = React.useState(!!activeProp);
     const dropdownRef = React.useRef(null);
     const triggerRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const menuKeys = useMenuKeys();
     const pendingFocusRef = React.useRef(null);
     // Cleanup returned by a consumer's callback ref on attach, held until detach.
     const consumerCleanupRef = React.useRef(null);
@@ -2462,29 +2653,23 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
             }
         }
     };
-    const getMenuItems = () => {
-        /* istanbul ignore next: dropdownRef.current is never null once mounted */
-        if (!dropdownRef.current)
-            return [];
-        return Array.from(
-        // Every menu-item role, so an item a caller gives `menuitemcheckbox`
-        // or `menuitemradio` (a filter or sort menu) stays reachable.
-        dropdownRef.current.querySelectorAll('[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]')).filter(el => !el.hasAttribute('disabled') &&
-            el.getAttribute('aria-disabled') !== 'true');
+    const focusEdgeItem = (edge) => {
+        const items = enabledMenuItems(menuRef.current);
+        items[edge === 'first' ? 0 : items.length - 1]?.focus();
     };
-    // Focus the pending menu item once the menu becomes visible; the item is
-    // unfocusable while `display: none` applies, so this must wait for the
-    // `is-active` class to actually land in the DOM.
+    // Once the menu shows, forget a search typed just before it last closed,
+    // and focus the pending item. The item is unfocusable while
+    // `display: none` applies, so this must wait for the `is-active` class to
+    // actually land in the DOM.
     React.useEffect(() => {
-        if (!active || !pendingFocusRef.current)
+        if (!active)
             return;
-        const items = getMenuItems();
-        if (items.length) {
-            const index = pendingFocusRef.current === 'first' ? 0 : items.length - 1;
-            items[index].focus();
-        }
+        menuKeys.reset();
+        if (!pendingFocusRef.current)
+            return;
+        focusEdgeItem(pendingFocusRef.current);
         pendingFocusRef.current = null;
-    }, [active]);
+    }, [active, menuKeys]);
     const handleTriggerKeyDown = (e) => {
         if (disabled)
             return;
@@ -2497,9 +2682,7 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
                     onActiveChange?.(true);
                 }
                 else {
-                    const items = getMenuItems();
-                    if (items.length)
-                        items[0].focus();
+                    focusEdgeItem('first');
                     pendingFocusRef.current = null;
                 }
                 break;
@@ -2511,9 +2694,7 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
                     onActiveChange?.(true);
                 }
                 else {
-                    const items = getMenuItems();
-                    if (items.length)
-                        items[items.length - 1].focus();
+                    focusEdgeItem('last');
                     pendingFocusRef.current = null;
                 }
                 break;
@@ -2545,8 +2726,10 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
         }
     };
     const handleMenuKeyDown = (e) => {
-        // Escape and Tab close the menu regardless of whether it has any focusable
-        // items — an empty or all-disabled menu must still honor the close contract.
+        // Closing is Dropdown's: Escape and Tab close the menu from anywhere in
+        // it, a field included, and an empty or all-disabled menu too. Moving
+        // between the items, running them and typeahead are the hook's, which
+        // acts only while focus is on the menu or one of its items.
         if (e.key === 'Escape') {
             e.preventDefault();
             setActive(false);
@@ -2559,66 +2742,10 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
             onActiveChange?.(false);
             return;
         }
-        const items = getMenuItems();
-        if (!items.length)
-            return;
-        const currentIndex = items.indexOf(getActiveElementInTree(e.currentTarget));
-        switch (e.key) {
-            case 'ArrowDown': {
-                e.preventDefault();
-                const next = currentIndex >= 0 ? (currentIndex + 1) % items.length : 0;
-                items[next].focus();
-                break;
-            }
-            case 'ArrowUp': {
-                e.preventDefault();
-                const prev = currentIndex >= 0
-                    ? (currentIndex - 1 + items.length) % items.length
-                    : items.length - 1;
-                items[prev].focus();
-                break;
-            }
-            case 'Home':
-                e.preventDefault();
-                items[0].focus();
-                break;
-            case 'End':
-                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;
-            }
-        }
+        menuKeys.onKeyDown(e);
     };
     const dropdownClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsxs("div", { className: dropdownClasses, ref: setRefs, id: id, "data-testid": "dropdown-root", ...rest, children: [jsxRuntime.jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxRuntime.jsxs("button", { ref: triggerRef, className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, disabled: disabled, type: "button", children: [jsxRuntime.jsx("span", { children: label }), jsxRuntime.jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsxRuntime.jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", onKeyDown: handleMenuKeyDown, 
+    return (jsxRuntime.jsxs("div", { className: dropdownClasses, ref: setRefs, id: id, "data-testid": "dropdown-root", ...rest, children: [jsxRuntime.jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxRuntime.jsxs("button", { ref: triggerRef, className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, disabled: disabled, type: "button", children: [jsxRuntime.jsx("span", { children: label }), jsxRuntime.jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsxRuntime.jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: id ? `${id}-menu` : undefined, ref: menuRef, role: "menu", "data-testid": "dropdown-menu", onKeyDown: handleMenuKeyDown, 
                 // The menu, not its content, takes focus from a click between items,
                 // so the menu owns nothing focusable but its items.
                 tabIndex: -1, children: jsxRuntime.jsx("div", { className: usePrefixedClassNames('dropdown-content'), onClick: handleMenuClick, children: children }) })] }));
@@ -4518,47 +4645,402 @@ const Tabs = withSubComponents(TabsComponent, {
     Content: TabsContent,
 }, 'Tabs');
 
+const validButtonColors = [...validColors, 'text', 'ghost'];
 /**
- * The `Loading` component provides a loading overlay with a spinner animation.
+ * The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
  *
  * @function
- * @param {LoadingProps} props - Props for the Loading component.
- * @returns {JSX.Element | null} The rendered loading overlay or null if not active.
- *
- * @example
- * // Full page loading
- * <Loading active isFullPage />
- *
- * @example
- * // Container loading with message
- * <div style={{ position: 'relative', height: '200px' }}>
- *   <Loading active>Loading data...</Loading>
- * </div>
- *
- * @example
- * // With color variant
- * <Loading active color="primary" />
- *
- * @example
- * // With cancel functionality
- * <Loading
- *   active={isLoading}
- *   canCancel
- *   onCancel={() => setIsLoading(false)}
- * />
+ * @param {ButtonProps} props - Props for the Button component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered button, anchor, or custom element.
+ * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}
  */
-const Loading = ({ active = false, isFullPage = false, size, color, canCancel = false, onCancel, children, className, overlayClassName, iconClassName, indicator, overlay, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    // Generate Bulma classes with prefix
-    const loadingClasses = usePrefixedClassNames('loading', {
-        'is-active': active,
-        'is-full-page': isFullPage,
-        'is-cancelable': canCancel,
-        [`is-${overlay}`]: !!overlay,
-        [`is-${color}`]: !!color,
+const Button = React.forwardRef(function Button(props, ref) {
+    const { color, size, isLight, isRounded, isLoading, isStatic, isFullwidth, isFullWidth, isOutlined, isInverted, isFocused, isActive, isHovered, isDisabled, className, children, textColor, bgColor, as: Component = 'button', href, onClick, target, rel, ...bulmaProps } = props;
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...bulmaProps,
     });
-    const iconClasses = usePrefixedClassNames('loading-icon', {
-        [`is-${size}`]: size,
+    // Generate Bulma classes with prefix
+    const bulmaClasses = usePrefixedClassNames('button', {
+        [`is-${color}`]: color &&
+            validButtonColors.includes(color),
+        [`is-${size}`]: size,
+        'is-outlined': isOutlined,
+        'is-light': isLight,
+        'is-loading': isLoading,
+        'is-static': isStatic,
+        'is-disabled': isDisabled,
+        'is-rounded': isRounded,
+        'is-hovered': isHovered,
+        'is-focused': isFocused,
+        'is-active': isActive,
+        'is-inverted': isInverted,
+        'is-fullwidth': isFullwidth ?? isFullWidth,
+    });
+    // Combine prefixed Bulma classes with unprefixed user className and prefixed helper classes
+    const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    if (Component !== 'button') {
+        // Strip the form-control attributes a link-like element cannot carry, so a
+        // JavaScript consumer or a spread object doesn't put them on the DOM. The
+        // types no longer allow them through; this is the runtime backstop.
+        //
+        // Only for INTRINSIC tags. A custom component (a router Link, ...) owns its
+        // prop contract, and `ComponentPropsWithoutRef<T>` promises the caller that
+        // its props reach it. Stripping names by their spelling alone broke that
+        // promise silently: `<Button as={Custom} name="x" />` type-checked while
+        // `Custom` never received the `name` it requires.
+        //
+        // `autoFocus` and `type` are deliberately NOT stripped: both are valid on
+        // targets this list was filtering them from. `autoFocus` is a global
+        // attribute (React decides per element whether to honour it, which is not
+        // ours to pre-empt), and `type` on an anchor is the MIME hint that
+        // `ButtonProps<'a'>` now types it as.
+        //
+        // The types already answer this for a TypeScript caller: `ButtonProps<T>`
+        // derives from `ComponentPropsWithoutRef<T>`, so only what the target
+        // accepts can be passed. What is left is a runtime backstop for JavaScript
+        // consumers and spread objects.
+        //
+        // Keep it to the two cases where a stray attribute does something. The
+        // submit-overrides belong to a submit control and never make sense on the
+        // anchor path. `disabled` is the one that is VISIBLE: Bulma styles
+        // `.button[disabled]` (background, border, shadow, opacity), so letting it
+        // through to a `<span>` greys the element out — main stripped it, and not
+        // stripping it would be a silent visual change on a types-only release.
+        //
+        // Everything else (`name`, `value`, `form`) is inert where it does not
+        // belong, and enumerating which tags own it is what kept going wrong:
+        // first all nine names on every non-button tag (so `<Button as="input"
+        // name="query" value="Search">` submitted nothing), then a form-control
+        // allowlist that still lost `formAction` on an input and `value` on an
+        // option. Those now ride on the types instead.
+        //
+        // A custom component is exempt entirely — it owns its prop contract, and
+        // `ComponentPropsWithoutRef<T>` promises the caller its props arrive.
+        //
+        // The elements that own `disabled`, per the HTML spec. A closed set, unlike
+        // the open-ended question of which tag owns which attribute.
+        const SUBMIT_OVERRIDES = [
+            'formAction',
+            'formEncType',
+            'formMethod',
+            'formNoValidate',
+            'formTarget',
+        ];
+        const OWNS_DISABLED = [
+            'button',
+            'fieldset',
+            'input',
+            'optgroup',
+            'option',
+            'select',
+            'textarea',
+        ];
+        // Two independent filters. They are not exclusive — an `<a>` owns neither
+        // the submit-overrides nor `disabled`, so it takes both — and deriving them
+        // from one destructure, or from one if/else, is what broke each of them in
+        // turn: first the overrides came off every intrinsic (an `as="input"` lost
+        // `formAction`), then scoping them to the anchor let `disabled` back onto
+        // it.
+        const forwardedRest = { ...rest };
+        if (typeof Component === 'string' && !isCustomElement(Component)) {
+            // Meaningless anywhere but a submit control, and an anchor is not one.
+            if (Component === 'a') {
+                for (const key of SUBMIT_OVERRIDES)
+                    delete forwardedRest[key];
+            }
+            // Visible via Bulma's `.button[disabled]`, so withheld from any element
+            // that does not own it.
+            if (!OWNS_DISABLED.includes(Component))
+                delete forwardedRest.disabled;
+        }
+        return (jsxRuntime.jsx(Component, { ref: ref, className: buttonClasses, href: href, target: target, rel: rel, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, onClick: isDisabled
+                ? // Guarded, because this handler is installed into whatever `as`
+                    // renders and a custom component's `onClick` need not be a DOM
+                    // event handler at all. One declaring `onClick: (v: string) =>
+                    // void` calls this with a string, and an unguarded
+                    // `e.preventDefault()` throws `is not a function`. Blocking the
+                    // real event is the point; a foreign payload is simply not ours
+                    // to act on.
+                    (e) => {
+                        if (typeof e?.preventDefault === 'function')
+                            e.preventDefault();
+                    }
+                : onClick, ...forwardedRest, children: children }));
+    }
+    return (jsxRuntime.jsx("button", { ref: ref, className: buttonClasses, disabled: isDisabled, onClick: onClick, ...rest, children: children }));
+});
+Button.displayName = 'Button';
+
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * `useLayoutEffect` in the browser, `useEffect` on the server. A server
+ * render runs neither, and React 18 warns about a layout effect there, so the
+ * server is handed the plain one.
+ */
+const useClientLayoutEffect = typeof document === 'undefined' ? React.useEffect : React.useLayoutEffect;
+
+// Not exported, so it stays out of the public API that `index.ts` re-exports.
+const SegmentedControlContext = React.createContext(null);
+/** Sorts mounted segments into the order they sit in the page. */
+const inDocumentOrder = (a, b) => a.node.compareDocumentPosition(b.node) & Node.DOCUMENT_POSITION_FOLLOWING
+    ? -1
+    : 1;
+/** How far each arrow key moves along the row. */
+const STEPS = {
+    ArrowRight: 1,
+    ArrowDown: 1,
+    ArrowLeft: -1,
+    ArrowUp: -1,
+};
+/**
+ * The segment a key moves to, found among the segments of the same group in
+ * DOM order, skipping disabled ones and wrapping at either end. `undefined`
+ * for a key the group leaves alone, when no enabled segment is left, or when
+ * the segment isn't inside its row in the page, as a portaled one isn't.
+ */
+function segmentFor(current, key) {
+    const group = current.closest('[role="radiogroup"]');
+    if (!group)
+        return undefined;
+    const segments = Array.from(group.querySelectorAll('[role="radio"]'));
+    const enabled = segments.filter(segment => !segment.disabled);
+    if (key === 'Home')
+        return enabled[0];
+    if (key === 'End')
+        return enabled[enabled.length - 1];
+    const step = STEPS[key];
+    if (!step)
+        return undefined;
+    const at = segments.indexOf(current);
+    for (let i = 1; i <= segments.length; i += 1) {
+        const candidate = segments[(at + step * i + segments.length) % segments.length];
+        if (!candidate.disabled)
+            return candidate;
+    }
+    return undefined;
+}
+/**
+ * The `SegmentedControl` component renders a row of buttons where only one can be on, and tells a screen reader it's a radio group.
+ *
+ * It's Bulma's `.buttons.has-addons` row, with the checked segment filled and
+ * marked `is-selected`, the way Bulma's button docs show it. To a screen
+ * reader it's `role="radiogroup"`, with `role="radio"` and `aria-checked` on
+ * each segment, which is how the APG toolbar example marks its alignment
+ * buttons. The keys follow the APG radio group: the row is one tab stop, the
+ * arrow keys move to the next or previous enabled segment and check it,
+ * wrapping at either end, Home and End go to the first and last, and Space
+ * checks the focused segment. Once a segment is checked, one always is.
+ *
+ * It carries no form value. A choice that's sent with a form is `Radios`.
+ *
+ * @function
+ * @param {SegmentedControlProps} props - Props for the SegmentedControl component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the row's `<div>`.
+ * @returns {JSX.Element} The rendered segmented control.
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/radio/ | APG radio group pattern}
+ * @see {@link https://bulma.io/documentation/elements/button/#list-of-buttons | Bulma list of buttons}
+ *
+ * @example
+ * <SegmentedControl aria-label="Text alignment" defaultValue="left">
+ *   <SegmentedControl.Segment value="left">Left</SegmentedControl.Segment>
+ *   <SegmentedControl.Segment value="center">Center</SegmentedControl.Segment>
+ *   <SegmentedControl.Segment value="right">Right</SegmentedControl.Segment>
+ * </SegmentedControl>
+ */
+const SegmentedControlRoot = React.forwardRef(function SegmentedControl({ value, defaultValue, onChange, color = 'link', size, hasAddons = true, isCentered, isRight, className, children, ...props }, ref) {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    // Controlled vs uncontrolled, as in Tabs and Collapses.
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const checked = isControlled ? (value ?? undefined) : internalValue;
+    const select = (next) => {
+        if (next === checked)
+            return;
+        if (!isControlled)
+            setInternalValue(next);
+        onChange?.(next);
+    };
+    // The segments mount and register from an effect, so the group knows
+    // which can hold the tab stop wherever in the tree they sit.
+    const [segments, setSegments] = React.useState([]);
+    const register = React.useCallback((record) => {
+        setSegments(prev => [...prev, record]);
+        return () => setSegments(prev => prev.filter(r => r !== record));
+    }, []);
+    const [focused, setFocused] = React.useState();
+    // The first enabled segment in the page, sorted when it's read rather
+    // than when a segment registers, so reordered segments are seen too. It's
+    // read after the commit: a render runs before React moves the nodes, so
+    // sorting there would find the old order.
+    const [firstEnabled, setFirstEnabled] = React.useState();
+    useClientLayoutEffect(() => {
+        const inPage = segments.filter(s => !s.disabled).sort(inDocumentOrder);
+        setFirstEnabled(inPage[0]?.value);
+    }, [segments, children]);
+    // One tab stop for the row (roving tabindex). While focus is in the row
+    // the stop follows it, so Tab leaves from wherever focus is even when a
+    // controlled group hasn't taken the new value. Otherwise it's the checked
+    // segment, or the first enabled one when none is checked or the checked
+    // one is disabled. Before the segments register (the server render and
+    // the first client render) the checked one holds it, so a row with
+    // nothing checked has no stop until the client has rendered.
+    const canHoldStop = (candidate) => segments.some(s => !s.disabled && s.value === candidate);
+    let tabStop;
+    if (canHoldStop(focused))
+        tabStop = focused;
+    else if (segments.length === 0 || canHoldStop(checked))
+        tabStop = checked;
+    else
+        tabStop = firstEnabled;
+    const named = Boolean(rest['aria-label'] || rest['aria-labelledby']);
+    React.useEffect(() => {
+        if (!named) {
+            warnOnce('SegmentedControl:unnamed', '[bestax-bulma] <SegmentedControl> has no accessible name. Pass ' +
+                'aria-label or aria-labelledby, so a screen reader can say what ' +
+                'the choice is.');
+        }
+    }, [named]);
+    const rowClasses = usePrefixedClassNames('buttons', {
+        'has-addons': hasAddons,
+        'is-centered': isCentered,
+        'is-right': isRight,
+        [`are-${size}`]: size,
+    });
+    // The props are spread first, so the role a screen reader relies on wins
+    // over anything a JavaScript caller or a spread object passes along.
+    return (jsxRuntime.jsx(SegmentedControlContext.Provider, { value: { checked, tabStop, color, select, setFocused, register }, children: jsxRuntime.jsx("div", { ...rest, ref: ref, role: "radiogroup", className: classNames(rowClasses, bulmaHelperClasses, className), children: children }) }));
+});
+/**
+ * One option in the row: a `<button role="radio">` that's checked while the group's value is its `value`, filled with the group's `color` and marked `is-selected`.
+ *
+ * @function
+ * @param {SegmentedControlSegmentProps} props - Props for the segment.
+ * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
+ * @returns {JSX.Element} The rendered segment.
+ */
+const Segment = React.forwardRef(function Segment({ value, isDisabled, disabled, className, onClick, onKeyDown, onFocus, onBlur, ...props }, ref) {
+    const ctx = React.useContext(SegmentedControlContext);
+    const checked = ctx !== null && ctx.checked === value;
+    const off = Boolean(isDisabled || disabled);
+    // Prefixed like Button's own classes, which a hand-written
+    // `className="is-selected"` could not be under ConfigProvider classPrefix.
+    // Bulma lifts `is-selected` above its neighbours in `.buttons.has-addons`.
+    const selectedClass = usePrefixedClassNames({ 'is-selected': checked });
+    const nodeRef = React.useRef(null);
+    const setRefs = React.useCallback((node) => {
+        nodeRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const register = ctx?.register;
+    React.useEffect(() => {
+        if (!register) {
+            warnOnce('SegmentedControl.Segment:outside', '[bestax-bulma] <SegmentedControl.Segment> is outside a ' +
+                '<SegmentedControl>, so nothing can check it. Put it inside one.');
+            return undefined;
+        }
+        return register({
+            value,
+            disabled: off,
+            node: nodeRef.current,
+        });
+    }, [register, value, off]);
+    // The caller's onClick runs first, so a `preventDefault()` there keeps
+    // the segment from being checked. A disabled button gets no click.
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        ctx?.select(value);
+    };
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (!ctx ||
+            event.defaultPrevented ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey) {
+            return;
+        }
+        const target = segmentFor(event.currentTarget, event.key);
+        if (!target)
+            return;
+        event.preventDefault();
+        // The row has taken this key, so nothing above it acts on it too: a
+        // Carousel moves its slide on the arrows from a document listener that
+        // doesn't read `defaultPrevented`. Keys the row leaves alone still bubble.
+        event.stopPropagation();
+        target.focus();
+        // The check follows focus, APG's rule for a radio group outside a
+        // toolbar. It goes through a click on the segment, as a native radio's
+        // does, so its onClick sees it. Inside a toolbar the arrows would move
+        // focus alone; that is the line a toolbar would change.
+        target.click();
+    };
+    const handleFocus = (event) => {
+        onFocus?.(event);
+        ctx?.setFocused(value);
+    };
+    // The segment focus moves to, if any, records itself straight after.
+    const handleBlur = (event) => {
+        onBlur?.(event);
+        ctx?.setFocused(undefined);
+    };
+    // The props are spread first, so what a radio depends on wins over
+    // anything a JavaScript caller or a spread object passes along: it stays
+    // a button, never submits, reports whether it's checked, and the group
+    // decides whether Tab reaches it.
+    return (jsxRuntime.jsx(Button, { ...props, ref: setRefs, as: "button", type: "button", role: "radio", "aria-checked": checked, tabIndex: ctx ? (ctx.tabStop === value ? 0 : -1) : undefined, isDisabled: off, color: checked ? ctx.color : undefined, className: classNames(selectedClass, className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur }));
+});
+Segment.displayName = 'SegmentedControl.Segment';
+const SegmentedControl = withSubComponents(SegmentedControlRoot, { Segment }, 'SegmentedControl');
+
+/**
+ * The `Loading` component provides a loading overlay with a spinner animation.
+ *
+ * @function
+ * @param {LoadingProps} props - Props for the Loading component.
+ * @returns {JSX.Element | null} The rendered loading overlay or null if not active.
+ *
+ * @example
+ * // Full page loading
+ * <Loading active isFullPage />
+ *
+ * @example
+ * // Container loading with message
+ * <div style={{ position: 'relative', height: '200px' }}>
+ *   <Loading active>Loading data...</Loading>
+ * </div>
+ *
+ * @example
+ * // With color variant
+ * <Loading active color="primary" />
+ *
+ * @example
+ * // With cancel functionality
+ * <Loading
+ *   active={isLoading}
+ *   canCancel
+ *   onCancel={() => setIsLoading(false)}
+ * />
+ */
+const Loading = ({ active = false, isFullPage = false, size, color, canCancel = false, onCancel, children, className, overlayClassName, iconClassName, indicator, overlay, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    // Generate Bulma classes with prefix
+    const loadingClasses = usePrefixedClassNames('loading', {
+        'is-active': active,
+        'is-full-page': isFullPage,
+        'is-cancelable': canCancel,
+        [`is-${overlay}`]: !!overlay,
+        [`is-${color}`]: !!color,
+    });
+    const iconClasses = usePrefixedClassNames('loading-icon', {
+        [`is-${size}`]: size,
     });
     // Combine classes
     const combinedClasses = classNames(loadingClasses, bulmaHelperClasses, className);
@@ -4895,14 +5377,6 @@ const CollapsesComponent = ({ multiple = false, value, defaultValue, onChange, s
 };
 const Collapses = withSubComponents(CollapsesComponent, { Collapse }, 'Collapses');
 
-// INTERNAL: deliberately not exported from src/index.ts.
-/**
- * `useLayoutEffect` in the browser, `useEffect` on the server. A server
- * render runs neither, and React 18 warns about a layout effect there, so the
- * server is handed the plain one.
- */
-const useClientLayoutEffect = typeof document === 'undefined' ? React.useEffect : React.useLayoutEffect;
-
 // INTERNAL: deliberately not exported from src/index.ts.
 /**
  * Runs the caller's own handler on the element that holds the trigger, then
@@ -5320,174 +5794,6 @@ function useHoverOpen(options) {
     }, [settle, ask]);
 }
 
-/**
- * The `Tooltip` component displays helpful information when users hover over or focus on an element.
- *
- * Hovering the trigger or giving it keyboard focus shows it. Touch doesn't,
- * unless `openOnTap` is on, and neither does focus a click or a tap brings,
- * so tapping the trigger just does what the trigger does. The pointer can
- * move onto a shown tooltip. Escape hides it wherever focus is, without
- * moving the pointer or focus, and it stays hidden until one of them leaves
- * the trigger and comes back, or, with `openOnTap`, until the next tap on
- * the trigger. The key always goes on too, to whatever has focus or a
- * `Modal` or `Popover` around it, since a tooltip only adds to what's
- * there.
- *
- * @function
- * @param {TooltipProps} props - Props for the Tooltip component.
- * @returns {JSX.Element} The rendered tooltip wrapper.
- *
- * @example
- * // Basic tooltip
- * <Tooltip label="This is helpful info">
- *   <button>Hover me</button>
- * </Tooltip>
- *
- * @example
- * // Positioned tooltip with color
- * <Tooltip label="Delete item" position="right" color="danger">
- *   <Icon icon="fas fa-trash" />
- * </Tooltip>
- *
- * @example
- * // Multiline tooltip
- * <Tooltip label="This is a longer tooltip that wraps to multiple lines" multiline>
- *   <span>?</span>
- * </Tooltip>
- */
-const Tooltip = ({ label, content, position = 'top', color, size, active: alwaysActive, multiline = false, animated = true, square = false, dashed = false, delay = 0, closeDelay = 0, openOnTap = false, children, className, tooltipClassName, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const { onPointerEnter, onPointerOver, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, ...attrs } = rest;
-    const [isVisible, setIsVisible] = React.useState(false);
-    const [resolvedPosition, setResolvedPosition] = React.useState(position === 'auto' ? 'top' : position);
-    const [contentStyle, setContentStyle] = React.useState({});
-    const wrapperRef = React.useRef(null);
-    const contentRef = React.useRef(null);
-    const hover = useHoverOpen({
-        // The pointer and focus as they are. `active` shows it on top of that, so
-        // dropping `active` leaves it shown while the pointer or focus holds it.
-        // An ask to close can come while it's already hidden, which is no change.
-        open: isVisible,
-        onOpenChange: setIsVisible,
-        openDelay: delay,
-        closeDelay,
-        // The wrapper stands in for the trigger. It holds only the children and
-        // the tooltip, and nothing in the tooltip takes focus, so focus anywhere
-        // in it is focus on the trigger.
-        triggerRef: wrapperRef,
-        floatingRef: contentRef,
-        // Escape hides it and carries on, so a control in the trigger, or a
-        // Modal around it, still gets the key.
-        consumeEscape: false,
-        openOnTap,
-    });
-    // Auto-placement and overflow correction
-    React.useLayoutEffect(() => {
-        const isAuto = position === 'auto';
-        if (!isAuto) {
-            // eslint-disable-next-line react-hooks/set-state-in-effect -- layout measurement effect resolves placement
-            setResolvedPosition(position);
-        }
-        const showing = isVisible || alwaysActive;
-        if (!showing) {
-            setContentStyle({});
-            return;
-        }
-        const wrapper = wrapperRef.current;
-        const content = contentRef.current;
-        if (!wrapper || !content)
-            return;
-        const wrapperRect = wrapper.getBoundingClientRect();
-        const margin = 40;
-        const edgePadding = 8; // minimum distance from viewport edge
-        // Step 1: determine position (auto mode only)
-        if (isAuto) {
-            const spaceTop = wrapperRect.top;
-            const spaceBottom = window.innerHeight - wrapperRect.bottom;
-            if (spaceTop >= margin) {
-                setResolvedPosition('top');
-            }
-            else if (spaceBottom >= margin) {
-                setResolvedPosition('bottom');
-            }
-            else if (window.innerWidth - wrapperRect.right >= wrapperRect.left) {
-                setResolvedPosition('right');
-            }
-            else {
-                setResolvedPosition('left');
-            }
-        }
-        // Step 2: measure tooltip content and correct overflow.
-        // Use requestAnimationFrame so the resolved position class is applied first.
-        requestAnimationFrame(() => {
-            const contentEl = contentRef.current;
-            if (!contentEl)
-                return;
-            const contentRect = contentEl.getBoundingClientRect();
-            const style = {};
-            // For top/bottom positions, tooltip is centered horizontally via CSS
-            // (left: 50%; transform: translateX(-50%)).
-            // Check if it overflows left or right and apply a corrective shift.
-            const pos = isAuto ? undefined : position; // read from state won't be updated yet in auto
-            const effectivePos = pos || 'top'; // fallback, actual is set by state
-            const isVertical = effectivePos === 'top' ||
-                effectivePos === 'bottom' ||
-                resolvedPosition === 'top' ||
-                resolvedPosition === 'bottom';
-            if (isVertical) {
-                if (contentRect.left < edgePadding) {
-                    // Overflows left — shift right
-                    const shift = edgePadding - contentRect.left;
-                    style.left = `calc(50% + ${shift}px)`;
-                    style['--tooltip-arrow-offset'] =
-                        `${-shift}px`;
-                }
-                else if (contentRect.right > window.innerWidth - edgePadding) {
-                    // Overflows right — shift left
-                    const shift = contentRect.right - (window.innerWidth - edgePadding);
-                    style.left = `calc(50% - ${shift}px)`;
-                    style['--tooltip-arrow-offset'] =
-                        `${shift}px`;
-                }
-            }
-            else {
-                // For left/right positions, tooltip is centered vertically via CSS
-                // (top: 50%; transform: translateY(-50%)).
-                if (contentRect.top < edgePadding) {
-                    const shift = edgePadding - contentRect.top;
-                    style.top = `calc(50% + ${shift}px)`;
-                    style['--tooltip-arrow-offset'] =
-                        `${-shift}px`;
-                }
-                else if (contentRect.bottom > window.innerHeight - edgePadding) {
-                    const shift = contentRect.bottom - (window.innerHeight - edgePadding);
-                    style.top = `calc(50% - ${shift}px)`;
-                    style['--tooltip-arrow-offset'] =
-                        `${shift}px`;
-                }
-            }
-            setContentStyle(style);
-        });
-    }, [position, resolvedPosition, isVisible, alwaysActive, label, content]);
-    // Generate Bulma classes
-    const tooltipClasses = usePrefixedClassNames('tooltip', {
-        'is-active': alwaysActive || isVisible,
-        // Open by the pointer, focus or a tap, rather than shown by `active`
-        // alone: only then does the tooltip, and the gap to it, take the pointer.
-        'is-open': isVisible,
-        [`is-${resolvedPosition}`]: resolvedPosition,
-        [`is-${color}`]: color,
-        [`is-${size}`]: size,
-        'is-multiline': multiline,
-        'is-animated': animated,
-        'is-square': square,
-        'is-dashed': dashed,
-    });
-    const combinedClasses = classNames(tooltipClasses, bulmaHelperClasses, className);
-    const combinedTooltipClasses = usePrefixedClassNames('tooltip-content', tooltipClassName);
-    return (jsxRuntime.jsxs("span", { ref: wrapperRef, className: combinedClasses, onPointerEnter: chain$1(onPointerEnter, hover.onPointerEnter), onPointerOver: chain$1(onPointerOver, hover.onPointerOver), onPointerLeave: chain$1(onPointerLeave, hover.onPointerLeave), onFocus: chain$1(onFocus, hover.onFocus), onBlur: chain$1(onBlur, hover.onBlur), onPointerDown: chain$1(onPointerDown, hover.onPointerDown), onPointerUp: chain$1(onPointerUp, hover.onPointerUp), ...(label ? { 'data-tooltip': label } : {}), ...attrs, children: [children, jsxRuntime.jsx("span", { ref: contentRef, className: combinedTooltipClasses, role: "tooltip", "aria-hidden": !isVisible && !alwaysActive, style: Object.keys(contentStyle).length > 0 ? contentStyle : undefined, children: content || label })] }));
-};
-
 /**
  * Whether `el` is editable while its parent is not, which makes it an editing
  * host: the one tab stop an editable region gets. `contenteditable="false"`
@@ -5952,6 +6258,222 @@ function useFocusTrap(containerRef, options = {}) {
     });
 }
 
+/** An id list with `id` added at the end, unless it's in there already. */
+const withId = (ids, id) => [...new Set([...(ids ?? '').split(/\s+/), id])].filter(Boolean).join(' ');
+/**
+ * The first element in the trigger that Tab lands on, judged by what it is
+ * rather than by its styles, which can hide it for now. The trigger is all
+ * of the wrapper that comes before the tooltip.
+ */
+const triggerTabStop = (wrapper, tooltip) => {
+    const elements = Array.from(wrapper.querySelectorAll('*'));
+    return elements
+        .slice(0, elements.indexOf(tooltip))
+        .find(el => isTabbableKind(el) && !el.matches(':disabled'));
+};
+/**
+ * The `Tooltip` component displays helpful information when users hover over or focus on an element.
+ *
+ * Hovering the trigger or giving it keyboard focus shows it. Touch doesn't,
+ * unless `openOnTap` is on, and neither does focus a click or a tap brings,
+ * so tapping the trigger just does what the trigger does. The pointer can
+ * move onto a shown tooltip. Escape hides it wherever focus is, without
+ * moving the pointer or focus, and it stays hidden until one of them leaves
+ * the trigger and comes back, or, with `openOnTap`, until the next tap on
+ * the trigger. The key always goes on too, to whatever has focus or a
+ * `Modal` or `Popover` around it, since a tooltip only adds to what's
+ * there. The tooltip is its trigger's description, so a screen reader reads
+ * it as the trigger takes focus, whether it's showing yet or not.
+ *
+ * @function
+ * @param {TooltipProps} props - Props for the Tooltip component.
+ * @returns {JSX.Element} The rendered tooltip wrapper.
+ *
+ * @example
+ * // Basic tooltip
+ * <Tooltip label="This is helpful info">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * // Positioned tooltip with color, on an icon-only button with a name of its own
+ * <Tooltip label="Moves it to the trash" position="right" color="danger">
+ *   <Button aria-label="Delete">
+ *     <Icon name="fas fa-trash" />
+ *   </Button>
+ * </Tooltip>
+ *
+ * @example
+ * // Multiline tooltip
+ * <Tooltip label="This is a longer tooltip that wraps to multiple lines" multiline>
+ *   <button>More info</button>
+ * </Tooltip>
+ */
+const Tooltip = ({ label, content, position = 'top', color, size, active: alwaysActive, multiline = false, animated = true, square = false, dashed = false, delay = 0, closeDelay = 0, openOnTap = false, children, className, tooltipClassName, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const { onPointerEnter, onPointerOver, onPointerLeave, onPointerDown, onPointerUp, onFocus, onBlur, ...attrs } = rest;
+    const [isVisible, setIsVisible] = React.useState(false);
+    const [resolvedPosition, setResolvedPosition] = React.useState(position === 'auto' ? 'top' : position);
+    const [contentStyle, setContentStyle] = React.useState({});
+    const wrapperRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const tooltipId = `${React.useId()}-tooltip`;
+    // Only a single element can be given the link, and a fragment takes no
+    // props of its own.
+    const linkable = React.isValidElement(children) &&
+        children.type !== React.Fragment;
+    // A screen reader reads the tooltip only when Tab lands on an element that
+    // carries the link. Only the page shows whether it does, since a component
+    // may not pass the attribute on, or what takes focus may sit inside the
+    // element that took it. After every commit, since the children can change,
+    // and only in development.
+    React.useEffect(() => {
+        if (!isDev())
+            return;
+        const stop = triggerTabStop(wrapperRef.current, contentRef.current);
+        if (stop?.getAttribute('aria-describedby')?.split(/\s+/).includes(tooltipId)) {
+            return;
+        }
+        warnOnce('Tooltip:unlinked-trigger', "[bestax-bulma] <Tooltip> can't describe its trigger, so a screen " +
+            "reader won't read the tooltip: Tab reaches nothing in the trigger, " +
+            "or what it reaches doesn't carry the aria-describedby that points " +
+            'at the tooltip. Pass one element that takes focus and passes ' +
+            'aria-describedby on to its DOM node, such as a button, a link or a ' +
+            'Span with tabIndex={0}.');
+    });
+    const hover = useHoverOpen({
+        // The pointer and focus as they are. `active` shows it on top of that, so
+        // dropping `active` leaves it shown while the pointer or focus holds it.
+        // An ask to close can come while it's already hidden, which is no change.
+        open: isVisible,
+        onOpenChange: setIsVisible,
+        openDelay: delay,
+        closeDelay,
+        // The wrapper stands in for the trigger. It holds only the children and
+        // the tooltip, and nothing in the tooltip takes focus, so focus anywhere
+        // in it is focus on the trigger.
+        triggerRef: wrapperRef,
+        floatingRef: contentRef,
+        // Escape hides it and carries on, so a control in the trigger, or a
+        // Modal around it, still gets the key.
+        consumeEscape: false,
+        openOnTap,
+    });
+    // Auto-placement and overflow correction
+    React.useLayoutEffect(() => {
+        const isAuto = position === 'auto';
+        if (!isAuto) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect -- layout measurement effect resolves placement
+            setResolvedPosition(position);
+        }
+        const showing = isVisible || alwaysActive;
+        if (!showing) {
+            setContentStyle({});
+            return;
+        }
+        const wrapper = wrapperRef.current;
+        const content = contentRef.current;
+        if (!wrapper || !content)
+            return;
+        const wrapperRect = wrapper.getBoundingClientRect();
+        const margin = 40;
+        const edgePadding = 8; // minimum distance from viewport edge
+        // Step 1: determine position (auto mode only)
+        if (isAuto) {
+            const spaceTop = wrapperRect.top;
+            const spaceBottom = window.innerHeight - wrapperRect.bottom;
+            if (spaceTop >= margin) {
+                setResolvedPosition('top');
+            }
+            else if (spaceBottom >= margin) {
+                setResolvedPosition('bottom');
+            }
+            else if (window.innerWidth - wrapperRect.right >= wrapperRect.left) {
+                setResolvedPosition('right');
+            }
+            else {
+                setResolvedPosition('left');
+            }
+        }
+        // Step 2: measure tooltip content and correct overflow.
+        // Use requestAnimationFrame so the resolved position class is applied first.
+        requestAnimationFrame(() => {
+            const contentEl = contentRef.current;
+            if (!contentEl)
+                return;
+            const contentRect = contentEl.getBoundingClientRect();
+            const style = {};
+            // For top/bottom positions, tooltip is centered horizontally via CSS
+            // (left: 50%; transform: translateX(-50%)).
+            // Check if it overflows left or right and apply a corrective shift.
+            const pos = isAuto ? undefined : position; // read from state won't be updated yet in auto
+            const effectivePos = pos || 'top'; // fallback, actual is set by state
+            const isVertical = effectivePos === 'top' ||
+                effectivePos === 'bottom' ||
+                resolvedPosition === 'top' ||
+                resolvedPosition === 'bottom';
+            if (isVertical) {
+                if (contentRect.left < edgePadding) {
+                    // Overflows left — shift right
+                    const shift = edgePadding - contentRect.left;
+                    style.left = `calc(50% + ${shift}px)`;
+                    style['--tooltip-arrow-offset'] =
+                        `${-shift}px`;
+                }
+                else if (contentRect.right > window.innerWidth - edgePadding) {
+                    // Overflows right — shift left
+                    const shift = contentRect.right - (window.innerWidth - edgePadding);
+                    style.left = `calc(50% - ${shift}px)`;
+                    style['--tooltip-arrow-offset'] =
+                        `${shift}px`;
+                }
+            }
+            else {
+                // For left/right positions, tooltip is centered vertically via CSS
+                // (top: 50%; transform: translateY(-50%)).
+                if (contentRect.top < edgePadding) {
+                    const shift = edgePadding - contentRect.top;
+                    style.top = `calc(50% + ${shift}px)`;
+                    style['--tooltip-arrow-offset'] =
+                        `${-shift}px`;
+                }
+                else if (contentRect.bottom > window.innerHeight - edgePadding) {
+                    const shift = contentRect.bottom - (window.innerHeight - edgePadding);
+                    style.top = `calc(50% - ${shift}px)`;
+                    style['--tooltip-arrow-offset'] =
+                        `${shift}px`;
+                }
+            }
+            setContentStyle(style);
+        });
+    }, [position, resolvedPosition, isVisible, alwaysActive, label, content]);
+    // Generate Bulma classes
+    const tooltipClasses = usePrefixedClassNames('tooltip', {
+        'is-active': alwaysActive || isVisible,
+        // Open by the pointer, focus or a tap, rather than shown by `active`
+        // alone: only then does the tooltip, and the gap to it, take the pointer.
+        'is-open': isVisible,
+        [`is-${resolvedPosition}`]: resolvedPosition,
+        [`is-${color}`]: color,
+        [`is-${size}`]: size,
+        'is-multiline': multiline,
+        'is-animated': animated,
+        'is-square': square,
+        'is-dashed': dashed,
+    });
+    const combinedClasses = classNames(tooltipClasses, bulmaHelperClasses, className);
+    const combinedTooltipClasses = usePrefixedClassNames('tooltip-content', tooltipClassName);
+    return (jsxRuntime.jsxs("span", { ref: wrapperRef, className: combinedClasses, onPointerEnter: chain$1(onPointerEnter, hover.onPointerEnter), onPointerOver: chain$1(onPointerOver, hover.onPointerOver), onPointerLeave: chain$1(onPointerLeave, hover.onPointerLeave), onFocus: chain$1(onFocus, hover.onFocus), onBlur: chain$1(onBlur, hover.onBlur), onPointerDown: chain$1(onPointerDown, hover.onPointerDown), onPointerUp: chain$1(onPointerUp, hover.onPointerUp), ...(label ? { 'data-tooltip': label } : {}), ...attrs, children: [linkable
+                ? React.cloneElement(children, {
+                    'aria-describedby': withId(children.props['aria-describedby'], tooltipId),
+                })
+                : children, jsxRuntime.jsx("span", { ref: contentRef, id: tooltipId, className: combinedTooltipClasses, 
+                // Hidden by `visibility: hidden` in the stylesheet, which keeps it out
+                // of the accessibility tree and still lets it describe the trigger
+                // (accname step 2A), so it takes no aria-hidden.
+                role: "tooltip", style: Object.keys(contentStyle).length > 0 ? contentStyle : undefined, children: content || label })] }));
+};
+
 // INTERNAL: deliberately not exported from src/index.ts.
 /**
  * A `styledGap` for a panel whose stylesheet puts the gap in a margin on the
@@ -6017,149 +6539,20 @@ function useAnchoredPosition(anchorRef, panelRef, { active, position, fixed, off
                         ? rect.bottom + offset
                         : rect.top - height - offset,
                     left: corner.endsWith('left') ? rect.left : rect.right - width,
-                }
-                : { position: corner };
-            setResolved(prev => (samePosition(prev, next) ? prev : next));
-        };
-        update();
-        view.addEventListener('resize', update, { passive: true });
-        view.addEventListener('scroll', update, { passive: true, capture: true });
-        return () => {
-            view.removeEventListener('resize', update);
-            view.removeEventListener('scroll', update, { capture: true });
-        };
-    }, [active, anchorRef, panelRef, position, fixed, offset, styledGap]);
-    return resolved;
-}
-
-const validButtonColors = [...validColors, 'text', 'ghost'];
-/**
- * The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
- *
- * @function
- * @param {ButtonProps} props - Props for the Button component.
- * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
- * @returns {JSX.Element} The rendered button, anchor, or custom element.
- * @see {@link https://bulma.io/documentation/elements/button/ | Bulma Button documentation}
- */
-const Button = React.forwardRef(function Button(props, ref) {
-    const { color, size, isLight, isRounded, isLoading, isStatic, isFullwidth, isFullWidth, isOutlined, isInverted, isFocused, isActive, isHovered, isDisabled, className, children, textColor, bgColor, as: Component = 'button', href, onClick, target, rel, ...bulmaProps } = props;
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...bulmaProps,
-    });
-    // Generate Bulma classes with prefix
-    const bulmaClasses = usePrefixedClassNames('button', {
-        [`is-${color}`]: color &&
-            validButtonColors.includes(color),
-        [`is-${size}`]: size,
-        'is-outlined': isOutlined,
-        'is-light': isLight,
-        'is-loading': isLoading,
-        'is-static': isStatic,
-        'is-disabled': isDisabled,
-        'is-rounded': isRounded,
-        'is-hovered': isHovered,
-        'is-focused': isFocused,
-        'is-active': isActive,
-        'is-inverted': isInverted,
-        'is-fullwidth': isFullwidth ?? isFullWidth,
-    });
-    // Combine prefixed Bulma classes with unprefixed user className and prefixed helper classes
-    const buttonClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    if (Component !== 'button') {
-        // Strip the form-control attributes a link-like element cannot carry, so a
-        // JavaScript consumer or a spread object doesn't put them on the DOM. The
-        // types no longer allow them through; this is the runtime backstop.
-        //
-        // Only for INTRINSIC tags. A custom component (a router Link, ...) owns its
-        // prop contract, and `ComponentPropsWithoutRef<T>` promises the caller that
-        // its props reach it. Stripping names by their spelling alone broke that
-        // promise silently: `<Button as={Custom} name="x" />` type-checked while
-        // `Custom` never received the `name` it requires.
-        //
-        // `autoFocus` and `type` are deliberately NOT stripped: both are valid on
-        // targets this list was filtering them from. `autoFocus` is a global
-        // attribute (React decides per element whether to honour it, which is not
-        // ours to pre-empt), and `type` on an anchor is the MIME hint that
-        // `ButtonProps<'a'>` now types it as.
-        //
-        // The types already answer this for a TypeScript caller: `ButtonProps<T>`
-        // derives from `ComponentPropsWithoutRef<T>`, so only what the target
-        // accepts can be passed. What is left is a runtime backstop for JavaScript
-        // consumers and spread objects.
-        //
-        // Keep it to the two cases where a stray attribute does something. The
-        // submit-overrides belong to a submit control and never make sense on the
-        // anchor path. `disabled` is the one that is VISIBLE: Bulma styles
-        // `.button[disabled]` (background, border, shadow, opacity), so letting it
-        // through to a `<span>` greys the element out — main stripped it, and not
-        // stripping it would be a silent visual change on a types-only release.
-        //
-        // Everything else (`name`, `value`, `form`) is inert where it does not
-        // belong, and enumerating which tags own it is what kept going wrong:
-        // first all nine names on every non-button tag (so `<Button as="input"
-        // name="query" value="Search">` submitted nothing), then a form-control
-        // allowlist that still lost `formAction` on an input and `value` on an
-        // option. Those now ride on the types instead.
-        //
-        // A custom component is exempt entirely — it owns its prop contract, and
-        // `ComponentPropsWithoutRef<T>` promises the caller its props arrive.
-        //
-        // The elements that own `disabled`, per the HTML spec. A closed set, unlike
-        // the open-ended question of which tag owns which attribute.
-        const SUBMIT_OVERRIDES = [
-            'formAction',
-            'formEncType',
-            'formMethod',
-            'formNoValidate',
-            'formTarget',
-        ];
-        const OWNS_DISABLED = [
-            'button',
-            'fieldset',
-            'input',
-            'optgroup',
-            'option',
-            'select',
-            'textarea',
-        ];
-        // Two independent filters. They are not exclusive — an `<a>` owns neither
-        // the submit-overrides nor `disabled`, so it takes both — and deriving them
-        // from one destructure, or from one if/else, is what broke each of them in
-        // turn: first the overrides came off every intrinsic (an `as="input"` lost
-        // `formAction`), then scoping them to the anchor let `disabled` back onto
-        // it.
-        const forwardedRest = { ...rest };
-        if (typeof Component === 'string' && !isCustomElement(Component)) {
-            // Meaningless anywhere but a submit control, and an anchor is not one.
-            if (Component === 'a') {
-                for (const key of SUBMIT_OVERRIDES)
-                    delete forwardedRest[key];
-            }
-            // Visible via Bulma's `.button[disabled]`, so withheld from any element
-            // that does not own it.
-            if (!OWNS_DISABLED.includes(Component))
-                delete forwardedRest.disabled;
-        }
-        return (jsxRuntime.jsx(Component, { ref: ref, className: buttonClasses, href: href, target: target, rel: rel, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, onClick: isDisabled
-                ? // Guarded, because this handler is installed into whatever `as`
-                    // renders and a custom component's `onClick` need not be a DOM
-                    // event handler at all. One declaring `onClick: (v: string) =>
-                    // void` calls this with a string, and an unguarded
-                    // `e.preventDefault()` throws `is not a function`. Blocking the
-                    // real event is the point; a foreign payload is simply not ours
-                    // to act on.
-                    (e) => {
-                        if (typeof e?.preventDefault === 'function')
-                            e.preventDefault();
-                    }
-                : onClick, ...forwardedRest, children: children }));
-    }
-    return (jsxRuntime.jsx("button", { ref: ref, className: buttonClasses, disabled: isDisabled, onClick: onClick, ...rest, children: children }));
-});
-Button.displayName = 'Button';
+                }
+                : { position: corner };
+            setResolved(prev => (samePosition(prev, next) ? prev : next));
+        };
+        update();
+        view.addEventListener('resize', update, { passive: true });
+        view.addEventListener('scroll', update, { passive: true, capture: true });
+        return () => {
+            view.removeEventListener('resize', update);
+            view.removeEventListener('scroll', update, { capture: true });
+        };
+    }, [active, anchorRef, panelRef, position, fixed, offset, styledGap]);
+    return resolved;
+}
 
 const PopoverContext = React.createContext(null);
 /** Intrinsic elements that are controls already, and keep their own role. */
@@ -6708,182 +7101,6 @@ function useContextMenuTrigger({ onOpen, disabled, }) {
     };
 }
 
-// INTERNAL: deliberately not exported from src/index.ts.
-/**
- * Every menu-item role, so an item a caller gives `menuitemcheckbox` or
- * `menuitemradio` (a filter or sort menu) stays reachable.
- */
-const MENU_ITEM_SELECTOR = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
-/**
- * Whether a menu item can be reached and activated: it isn't disabled, as a
- * native control or through `aria-disabled="true"`.
- */
-function isEnabledMenuItem(item) {
-    return (!item.hasAttribute('disabled') &&
-        item.getAttribute('aria-disabled') !== 'true');
-}
-/** Whether `node` is one of `menu`'s items, enabled or not. */
-const isItemOf = (menu, node) => Boolean(node && menu.contains(node) && node.matches(MENU_ITEM_SELECTOR));
-/** The items in `menu` the keys reach, in document order. */
-function enabledMenuItems(menu) {
-    return Array.from(menu.querySelectorAll(MENU_ITEM_SELECTOR)).filter(isEnabledMenuItem);
-}
-/** How long typed characters keep adding up to one search, in milliseconds. */
-const TYPEAHEAD_TIMEOUT = 500;
-/**
- * Whether the browser activates `item` on this key by itself: a `<button>`
- * answers Enter and Space, and a link with an `href` answers Enter.
- */
-function activatesItself(item, key) {
-    if (item.tagName === 'BUTTON')
-        return true;
-    return key === 'Enter' && item.tagName === 'A' && item.hasAttribute('href');
-}
-/**
- * The text typing finds an item by: what it says, without what's hidden from
- * assistive technology, such as an icon whose glyph is a ligature's name.
- */
-function label(item) {
-    let text = '';
-    const read = (node) => {
-        node.childNodes.forEach(child => {
-            if (child.nodeType === 3)
-                text += child.textContent;
-            else if (child.nodeType === 1 &&
-                child.getAttribute('aria-hidden') !== 'true') {
-                read(child);
-            }
-        });
-    };
-    read(item);
-    return text.trim().toLowerCase();
-}
-/**
- * The item typing `search` moves to, or none. A single character looks from
- * the item after the focused one, so typing the same letter again cycles
- * through the items that start with it, and so does a run of one letter
- * ("dd"). A longer search looks from the focused item, so typing more of
- * its own text keeps it.
- */
-function typeaheadMatch(items, search, current) {
-    const repeated = Array.from(search).every(char => char === search[0]);
-    const wanted = repeated ? search[0] : search;
-    const start = current < 0 ? 0 : current + (wanted.length === 1 ? 1 : 0);
-    for (let i = 0; i < items.length; i += 1) {
-        const item = items[(start + i) % items.length];
-        if (label(item).startsWith(wanted))
-            return item;
-    }
-    return undefined;
-}
-/**
- * Moves through and activates the items of a `role="menu"` element from the
- * keyboard. Put the `onKeyDown` it returns on that element. It reads the
- * items from the element each time, so items that come and go are found,
- * and it renders nothing.
- *
- * It acts only while focus is on the menu element itself or on one of its
- * items, so anything else focusable inside the menu, such as a filter
- * field, keeps its own keys.
- *
- * - Down and Up move to the next and previous enabled item, wrapping, and
- *   Home and End go to the first and last. From no item, Down goes to the
- *   first and Up to the last.
- * - Enter and Space activate the focused item. A `<button>`, and a link with
- *   an `href` for Enter, get the browser's own click, and anything else gets
- *   one from here, so its `onClick` runs either way. A key held down
- *   activates it once. A key handler on the item that called
- *   `preventDefault()` has claimed the key, and nothing else runs it.
- * - A printable character moves to the next enabled item whose text starts
- *   with what has been typed. Characters typed within `TYPEAHEAD_TIMEOUT` of
- *   each other add up to one search, until `reset` starts a new one.
- *
- * Items are `MENU_ITEM_SELECTOR` matches, and disabled ones are skipped by
- * all of the above. Escape and Tab are left to the menu's owner, since what
- * closing means is up to it, and so is any other key.
- *
- * @function useMenuKeys
- * @returns The `keydown` handler for the menu element, and a way to forget
- * what has been typed.
- */
-function useMenuKeys() {
-    const typedRef = React.useRef({ text: '' });
-    React.useEffect(() => {
-        const typed = typedRef.current;
-        return () => clearTimeout(typed.timer);
-    }, []);
-    return React.useMemo(() => {
-        const reset = () => {
-            const typed = typedRef.current;
-            clearTimeout(typed.timer);
-            typed.text = '';
-        };
-        const onKeyDown = (event) => {
-            const menu = event.currentTarget;
-            const focused = getActiveElementInTree(menu);
-            if (focused !== menu && !isItemOf(menu, focused))
-                return;
-            const items = enabledMenuItems(menu);
-            if (!items.length)
-                return;
-            const current = items.indexOf(focused);
-            switch (event.key) {
-                case 'ArrowDown':
-                    event.preventDefault();
-                    items[current >= 0 ? (current + 1) % items.length : 0].focus();
-                    return;
-                case 'ArrowUp':
-                    event.preventDefault();
-                    items[current >= 0
-                        ? (current - 1 + items.length) % items.length
-                        : items.length - 1].focus();
-                    return;
-                case 'Home':
-                    event.preventDefault();
-                    items[0].focus();
-                    return;
-                case 'End':
-                    event.preventDefault();
-                    items[items.length - 1].focus();
-                    return;
-                case 'Enter':
-                case ' ': {
-                    if (current < 0 || event.defaultPrevented)
-                        return;
-                    const item = items[current];
-                    if (activatesItself(item, event.key)) {
-                        // The browser clicks on Enter's keydown, and a held key sends one
-                        // per auto-repeat. Space clicks on keyup, once however long it's
-                        // held.
-                        if (event.repeat && event.key === 'Enter')
-                            event.preventDefault();
-                        return;
-                    }
-                    // Space would scroll the page, and a held key repeats.
-                    event.preventDefault();
-                    if (!event.repeat)
-                        item.click();
-                    return;
-                }
-            }
-            if (event.key.length !== 1 ||
-                event.ctrlKey ||
-                event.metaKey ||
-                event.altKey ||
-                event.defaultPrevented) {
-                return;
-            }
-            event.preventDefault();
-            const typed = typedRef.current;
-            typed.text += event.key.toLowerCase();
-            clearTimeout(typed.timer);
-            typed.timer = setTimeout(reset, TYPEAHEAD_TIMEOUT);
-            typeaheadMatch(items, typed.text, current)?.focus();
-        };
-        return { onKeyDown, reset };
-    }, []);
-}
-
 /**
  * Where the menu goes along one axis, from the point at `at`: after it when
  * there's room, before it when there's room there instead, and otherwise
@@ -8573,38 +8790,6 @@ const LinkButton = React.forwardRef(function LinkButton({ variant = 'text', colo
 });
 LinkButton.displayName = 'LinkButton';
 
-const validButtonsSizes = ['small', 'medium', 'large'];
-/**
- * The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features.
- *
- * @function
- * @param {ButtonsProps} props - Props for the Buttons component.
- * @returns {JSX.Element} The rendered group of buttons.
- * @see {@link https://bulma.io/documentation/elements/button/#group | Bulma Button Group documentation}
- */
-const ButtonsComponent = ({ className, textColor, color, bgColor, isCentered, isRight, hasAddons, size, children, ...props }) => {
-    const buttonsClasses = usePrefixedClassNames('buttons', {
-        'is-centered': isCentered,
-        'is-right': isRight,
-        'has-addons': hasAddons,
-        [`are-${size}`]: size && validButtonsSizes.includes(size),
-    });
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor ?? color,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const combinedClasses = classNames(buttonsClasses, className, bulmaHelperClasses);
-    return (jsxRuntime.jsx("div", { className: combinedClasses, ...rest, children: children }));
-};
-const Buttons = withSubComponents(ButtonsComponent, {
-    Button,
-    LinkButton,
-}, 'Buttons');
-
 /**
  * The `ToggleButton` component renders a button that stays pressed until it's pressed again, and says whether it's on through `aria-pressed`.
  *
@@ -8612,7 +8797,8 @@ const Buttons = withSubComponents(ButtonsComponent, {
  * carries no form value: a setting saved with a form is a `Checkbox` or a
  * `Switch`. A set of toggles that each turn on and off on their own goes in
  * `Buttons hasAddons` with `role="group"` and an `aria-label`. A set where only
- * one can be on is a radio group rather than a row of these: use `Radios`.
+ * one can be on is a radio group rather than a row of these: use
+ * `SegmentedControl`, or `Radios` for a choice that's sent with a form.
  *
  * @function
  * @param {ToggleButtonProps} props - Props for the ToggleButton component.
@@ -8630,7 +8816,7 @@ const Buttons = withSubComponents(ButtonsComponent, {
  *   </ToggleButton>
  * </Buttons>
  */
-const ToggleButton = React.forwardRef(function ToggleButton({ pressed: controlledPressed, defaultPressed = false, onPressedChange, color = 'link', className, onClick, ...props }, ref) {
+const ToggleButton = React.forwardRef(function ToggleButton({ pressed: controlledPressed, defaultPressed = false, onPressedChange, color = 'link', isLoading, 'aria-busy': ariaBusy, 'aria-disabled': ariaDisabled, className, onClick, ...props }, ref) {
     const isControlled = controlledPressed !== undefined;
     const [internalPressed, setInternalPressed] = React.useState(defaultPressed);
     const pressed = controlledPressed ?? internalPressed;
@@ -8641,7 +8827,13 @@ const ToggleButton = React.forwardRef(function ToggleButton({ pressed: controlle
     // The caller's onClick runs first, so a `preventDefault()` there vetoes
     // the toggle, as it does in Radix, MUI and Zag. Enter and Space reach here
     // through the button's own click, and a disabled button gets no click.
+    //
+    // A loading one gets the click but drops it. Bulma's spinner only stops a
+    // pointer, so without this a key flipped a toggle the mouse couldn't.
+    // `disabled` would stop both, but it takes focus away mid-save.
     const handleClick = (event) => {
+        if (isLoading)
+            return;
         onClick?.(event);
         if (event.defaultPrevented)
             return;
@@ -8650,13 +8842,48 @@ const ToggleButton = React.forwardRef(function ToggleButton({ pressed: controlle
         if (!isControlled)
             setInternalPressed(next);
     };
-    // The props are spread first, so the four things a toggle depends on win
-    // over anything a JavaScript caller or a spread object passes along: it
-    // stays a button, never submits, and reports the state it's in.
-    return (jsxRuntime.jsx(Button, { ...props, ref: ref, as: "button", type: "button", "aria-pressed": pressed, color: pressed ? color : undefined, className: classNames(selectedClass, className), onClick: handleClick }));
+    // The props are spread first, so what a toggle depends on wins over
+    // anything a JavaScript caller or a spread object passes along: it stays
+    // a button, never submits, reports the state it's in, and says it's busy
+    // and won't respond while it's loading. A caller's own `aria-busy` or
+    // `aria-disabled` stays when it isn't loading.
+    return (jsxRuntime.jsx(Button, { ...props, ref: ref, as: "button", type: "button", isLoading: isLoading, "aria-busy": isLoading || ariaBusy, "aria-disabled": isLoading || ariaDisabled, "aria-pressed": pressed, color: pressed ? color : undefined, className: classNames(selectedClass, className), onClick: handleClick }));
 });
 ToggleButton.displayName = 'ToggleButton';
 
+const validButtonsSizes = ['small', 'medium', 'large'];
+/**
+ * The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features.
+ *
+ * @function
+ * @param {ButtonsProps} props - Props for the Buttons component.
+ * @returns {JSX.Element} The rendered group of buttons.
+ * @see {@link https://bulma.io/documentation/elements/button/#group | Bulma Button Group documentation}
+ */
+const ButtonsComponent = ({ className, textColor, color, bgColor, isCentered, isRight, hasAddons, size, children, ...props }) => {
+    const buttonsClasses = usePrefixedClassNames('buttons', {
+        'is-centered': isCentered,
+        'is-right': isRight,
+        'has-addons': hasAddons,
+        [`are-${size}`]: size && validButtonsSizes.includes(size),
+    });
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor ?? color,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const combinedClasses = classNames(buttonsClasses, className, bulmaHelperClasses);
+    return (jsxRuntime.jsx("div", { className: combinedClasses, ...rest, children: children }));
+};
+const Buttons = withSubComponents(ButtonsComponent, {
+    Button,
+    LinkButton,
+    ToggleButton,
+}, 'Buttons');
+
 /**
  * The `Code` component renders a styled `<code>` element with Bulma helper class integration.
  *
@@ -19198,6 +19425,7 @@ exports.Radios = Radios;
 exports.Rate = Rate;
 exports.Reveal = Reveal;
 exports.Section = Section;
+exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.SelectBase = SelectBase;
 exports.Sidebar = Sidebar;