@allxsmith/bestax-bulma 5.30.0 → 5.31.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 }) })] }));
@@ -5321,177 +5448,9 @@ function useHoverOpen(options) {
 }
 
 /**
- * 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"`
- * turns editing off, and a missing or unknown value inherits the parent's.
+ * 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"`
+ * turns editing off, and a missing or unknown value inherits the parent's.
  */
 function isEditingHost(el) {
     const editable = (node) => {
@@ -5950,7 +5909,223 @@ function useFocusTrap(containerRef, options = {}) {
             setRefChanges(n => n + 1);
         }
     });
-}
+}
+
+/** 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.
 /**
@@ -6708,182 +6883,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 +8572,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`.
  *
@@ -8630,7 +8597,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 +8608,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 +8623,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.
  *