@allxsmith/bestax-bulma 5.33.0 → 5.34.0

package/dist/index.cjs

@@ -2841,237 +2841,921 @@ const Dropdown = withSubComponents(DropdownComponent, {
     Divider: DropdownDivider,
 }, 'Dropdown');
 
-// Context to track MenuList nesting level
-const MenuListLevelContext = React.createContext(0);
+const validButtonColors = [...validColors, 'text', 'ghost'];
 /**
- * The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.
+ * The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
  *
  * @function
- * @param {MenuProps} props - Props for the Menu component.
- * @returns {JSX.Element} The rendered menu.
- * @see {@link https://bulma.io/documentation/components/menu/ | Bulma Menu documentation}
+ * @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 MenuComponent = ({ className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+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('menu');
-    return (jsxRuntime.jsx("aside", { className: classNames(bulmaClasses, bulmaHelperClasses, className), ...rest, children: children }));
-};
+    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';
+
 /**
- * Bulma Menu label component.
+ * The `LinkButton` component renders a `<button>` that visually looks like text or a link.
  *
  * @function
- * @param {MenuLabelProps} props - Props for the MenuLabel component.
- * @returns {JSX.Element} The rendered menu label.
+ * @param {LinkButtonProps} props - Props for the LinkButton component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered link-styled button element.
+ *
+ * @example
+ * // Text variant (default)
+ * <LinkButton onClick={handleClick}>Click me</LinkButton>
+ *
+ * @example
+ * // Underline variant with color
+ * <LinkButton variant="underline" color="primary">Learn more</LinkButton>
  */
-const MenuLabel = ({ className, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    return (jsxRuntime.jsx("p", { className: classNames(usePrefixedClassNames('menu-label'), className, bulmaHelperClasses), ...rest, children: children }));
-};
+const LinkButton = React.forwardRef(function LinkButton({ variant = 'text', color, className, ...props }, ref) {
+    const buttonColor = variant === 'underline' ? 'text' : variant;
+    const prefixedClasses = usePrefixedClassNames('link-button', color && `link-button-${color}`, variant === 'underline' && 'link-button-underline');
+    return (jsxRuntime.jsx(Button
+    // LinkButton is polymorphic through to Button, which resolves the element
+    // from `as`. TS cannot infer that through the spread below.
+    , { 
+        // LinkButton is polymorphic through to Button, which resolves the element
+        // from `as`. TS cannot infer that through the spread below.
+        ref: ref, color: buttonColor, className: classNames(prefixedClasses, className), ...props }));
+});
+LinkButton.displayName = 'LinkButton';
+
 /**
- * MenuList applies `menu-list` class only at the top level (not for nested lists).
+ * The `ToggleButton` component renders a button that stays pressed until it's pressed again, and says whether it's on through `aria-pressed`.
+ *
+ * It's always a `<button type="button">`, so it never submits a form and
+ * 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
+ * `SegmentedControl`, or `Radios` for a choice that's sent with a form.
  *
  * @function
- * @param {MenuListProps} props - Props for the MenuList component.
- * @returns {JSX.Element} The rendered menu list.
- */
-const MenuList = ({ className, children, ...props }) => {
-    const level = React.useContext(MenuListLevelContext);
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const ulClass = classNames(className, bulmaHelperClasses, {
-        [usePrefixedClassNames('menu-list')]: level === 0,
-    });
-    // Increment level for nested MenuLists
-    return (jsxRuntime.jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsxRuntime.jsx("ul", { className: ulClass || undefined, ...rest, children: children }) }));
-};
-/**
- * `href` alone — annotated so a typo is a compile error rather than a silent
- * no-op, the way both siblings' sets are.
+ * @param {ToggleButtonProps} props - Props for the ToggleButton component.
+ * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
+ * @returns {JSX.Element} The rendered toggle button.
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ | APG button pattern}
+ *
+ * @example
+ * <ToggleButton onPressedChange={setMuted}>Mute</ToggleButton>
+ *
+ * @example
+ * <Buttons hasAddons role="group" aria-label="Text style">
+ *   <ToggleButton aria-label="Bold" pressed={bold} onPressedChange={setBold}>
+ *     <Icon name="bold" />
+ *   </ToggleButton>
+ * </Buttons>
  */
-const STRIP_FROM_NON_LINK = { href: true };
+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;
+    // 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': pressed });
+    // 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;
+        const next = !pressed;
+        onPressedChange?.(next);
+        if (!isControlled)
+            setInternalPressed(next);
+    };
+    // 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'];
 /**
- * MenuItem supports `as` prop for custom link components, e.g., react-router-dom Link.
+ * The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features.
  *
  * @function
- * @param {MenuItemProps} props - Props for the MenuItem component.
- * @param {React.Ref} ref - Forwarded ref to the inner element `as` renders.
- * @returns {JSX.Element} The rendered menu item.
+ * @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 MenuItem = React.forwardRef(function MenuItem(itemProps, ref) {
-    const { className, children, active, as: Component = 'a', 'data-testid': testId, style, id, title, role, tabIndex, ...rest } = itemProps;
-    const { bulmaHelperClasses, rest: forwarded } = useBulmaClasses(rest);
-    // `href` reaches an anchor or a custom component (which owns its own prop
-    // contract), but not another intrinsic tag — `<span href>` is invalid HTML.
-    // The same rule Avatar applies through `isLinkLike` and Button through its
-    // intrinsic-only strip. Before #641 `href` was an own prop re-applied only
-    // for `as="a"`; deriving it from `as` must not quietly widen that.
-    const isLinkLike = Component === 'a' ||
-        typeof Component !== 'string' ||
-        isCustomElement(Component);
-    // `href` ALONE. `Dropdown.Item` strips every anchor-only attribute except
-    // `type`; `Level.Item` strips all of them, plus `rel`.
-    //
-    // Not because nothing else can arrive: `as` here is an open `React.ElementType`,
-    // and a non-fresh spread skips excess-property checking, so a typed caller
-    // CAN deliver `target` or `download` and they are forwarded. The set stays at
-    // `href` because widening it would be wrong for an open `as` — `referrerPolicy`
-    // on `as="img"`, `target` on `as="form"` and `media` on `as="source"` are all
-    // legal, and a flat strip would delete them. Getting that right needs a
-    // per-attribute-per-element rule, which `bestax-migrate` already models in
-    // `LINK_ATTR_ELEMENTS`.
-    const linkProps = isLinkLike
-        ? forwarded
-        : omitAttrs(forwarded, STRIP_FROM_NON_LINK);
-    const itemClass = classNames({ [usePrefixedClassNames('is-active')]: active }, bulmaHelperClasses);
-    // Split children into label and nested MenuList(s)
-    const labelChildren = [];
-    const nestedMenuLists = [];
-    React.Children.forEach(children, child => {
-        if (React.isValidElement(child) && child.type === MenuList) {
-            nestedMenuLists.push(child);
-        }
-        else {
-            labelChildren.push(child);
-        }
+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),
     });
-    return (jsxRuntime.jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsxRuntime.jsx(Component, { ref: ref, className: itemClass || undefined, ...linkProps, ...(Component === 'button'
-                    ? { type: buttonType(linkProps.type) }
-                    : {}), children: labelChildren }), nestedMenuLists] }));
-});
-MenuItem.displayName = 'MenuItem';
-// Attach static subcomponents
-const Menu = withSubComponents(MenuComponent, {
-    Label: MenuLabel,
-    List: MenuList,
-    Item: MenuItem,
-}, 'Menu');
-
-const validMessageSizes = ['small', 'medium', 'large'];
-/**
- * The `Message` component provides Bulma's flexible notice/message box for your Bulma React UI.
- *
- * @function
- * @param {MessageProps} props - Props for the Message component.
- * @returns {JSX.Element} The rendered message.
- * @see {@link https://bulma.io/documentation/components/message/ | Bulma Message documentation}
- */
-const MessageComponent = ({ className, title, textColor, color, bgColor, size, onClose, children, ...props }) => {
-    const { classPrefix } = useConfig();
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
     const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
+        color: textColor ?? color,
         backgroundColor: bgColor,
         ...props,
     });
-    // Generate Bulma classes with prefix
-    const bulmaClasses = usePrefixedClassNames('message', {
-        [`is-${color}`]: color,
-        [`is-${size}`]: size && validMessageSizes.includes(size),
-    });
-    const deleteClass = usePrefixedClassNames('delete');
-    const messageClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsxs("article", { className: messageClasses, ...rest, "data-testid": "message", children: [(title || onClose) && (jsxRuntime.jsxs("div", { className: prefixedClassNames(classPrefix, 'message-header'), children: [title && jsxRuntime.jsx("span", { children: title }), onClose && (jsxRuntime.jsx("button", { className: deleteClass, "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), children && (jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'message-body'), "data-testid": "message-body", children: children }))] }));
+    const combinedClasses = classNames(buttonsClasses, className, bulmaHelperClasses);
+    return (jsxRuntime.jsx("div", { className: combinedClasses, ...rest, children: children }));
 };
-/**
- * Message header compound component. Renders a `.message-header` element.
- *
- * @function
- * @param {MessageHeaderProps} props - Props for the MessageHeader component.
- * @returns {JSX.Element} The rendered message header.
- */
-const MessageHeader = ({ className, children, ...props }) => (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('message-header'), className), ...props, children: children }));
-/**
- * Message body compound component. Renders a `.message-body` element.
- *
- * @function
- * @param {MessageBodyProps} props - Props for the MessageBody component.
- * @returns {JSX.Element} The rendered message body.
- */
-const MessageBody = ({ className, children, ...props }) => (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('message-body'), className), ...props, children: children }));
-// Attach compound components
-const Message = withSubComponents(MessageComponent, {
-    Header: MessageHeader,
-    Body: MessageBody,
-}, 'Message');
+const Buttons = withSubComponents(ButtonsComponent, {
+    Button,
+    LinkButton,
+    ToggleButton,
+}, 'Buttons');
 
-// Ref-counted across every caller (e.g. a Dialog rendering its own Modal)
-// so overlapping/nested locks don't fight over which one restores `overflow`.
-// Every overlay that locks body scroll — Modal, Dialog, Sidebar, Loading —
-// goes through here; a component setting `document.body.style.overflow`
-// itself would clear a lock another overlay still needs.
-let lockCount = 0;
-let originalOverflow = '';
 /**
- * Locks (and ref-counted-ly unlocks) `document.body` scrolling while `active`
- * is true. Safe to call from multiple components at once — the body scroll
- * is only restored once every active caller has released its lock.
+ * Strips a redundant leading library prefix from an icon name (e.g. `fa-check` -> `check`
+ * for the `fa` library, `mdi-account` -> `account` for `mdi`), so `name` behaves the same
+ * whether or not the caller includes the prefix. Font Awesome and Material Design Icons docs
+ * conventionally refer to icons with their class prefix (`fa-check`), which otherwise gets
+ * doubled by `getIconClasses` (producing `fa-fa-check`, matching no glyph).
  *
- * @function useScrollLock
- * @param active - Whether this caller wants the body scroll locked.
+ * @param {string} name - The icon name, possibly including a redundant library prefix.
+ * @param {IconLibrary} library - The icon library the name will be rendered with.
+ * @returns {string} The icon name with any redundant leading library prefix removed.
  */
-function useScrollLock(active) {
-    React.useEffect(() => {
-        if (!active)
-            return undefined;
-        lockCount++;
-        if (lockCount === 1) {
-            originalOverflow = document.body.style.overflow;
-            document.body.style.overflow = 'hidden';
-        }
-        return () => {
-            lockCount--;
-            if (lockCount === 0) {
-                document.body.style.overflow = originalOverflow;
-            }
-        };
-    }, [active]);
+function stripRedundantLibraryPrefix(name, library) {
+    if (!name) {
+        return name;
+    }
+    if (library === 'fa' && name.startsWith('fa-')) {
+        return name.substring(3);
+    }
+    if (library === 'mdi' && name.startsWith('mdi-')) {
+        return name.substring(4);
+    }
+    return name;
 }
-
-// "Are we past hydration?" as a store that never changes: React reads the
-// server snapshot both while server-rendering and while hydrating, and the
-// client snapshot from the first post-hydration render onward.
-const subscribeToNothing = () => () => { };
-const getClientSnapshot = () => true;
-const getServerSnapshot = () => false;
 /**
- * Reports whether the component has passed hydration.
- *
- * Returns `false` during server rendering and during the hydrating client
- * render, then `true` from the commit that follows. Use it to defer
- * DOM-only behaviour (such as portalling) past hydration so the first client
- * render matches the server markup instead of tripping hydration recovery.
- *
- * Only a component that hydrates ever sees `false` on the client. One that
- * mounts later (after a route change, or in an app with no server rendering)
- * gets `true` on its first render, so it pays for no extra render. It
- * subscribes to nothing, so no later render flips it back.
+ * Gets the correct classes for the icon element based on the library and features.
  *
- * @function useIsHydrated
- * @returns `true` once the hydrating render has completed, otherwise `false`.
+ * @param {IconLibrary} library - The icon library.
+ * @param {string} name - The icon name.
+ * @param {string} [variant] - Icon style variant (e.g., 'solid', 'outlined', 'rounded').
+ * @param {string | string[]} [features] - Additional library-specific modifiers.
+ * @returns {string} The combined class string for the icon.
  */
-function useIsHydrated() {
-    return React.useSyncExternalStore(subscribeToNothing, getClientSnapshot, getServerSnapshot);
+function getIconClasses(library, name, variant, features) {
+    let baseClass;
+    let iconClass;
+    const featureList = Array.isArray(features)
+        ? features
+        : features
+            ? [features]
+            : [];
+    switch (library) {
+        case 'fa': {
+            // Font Awesome: use variant as style ('solid' -> 'fas', 'regular' -> 'far', etc.)
+            const styleMap = {
+                solid: 'fas',
+                regular: 'far',
+                brands: 'fab',
+                light: 'fal',
+                duotone: 'fad',
+                thin: 'fat',
+            };
+            const faStyle = variant ? styleMap[variant] || variant : 'fas';
+            baseClass = faStyle;
+            iconClass = `fa-${name}`;
+            return [baseClass, iconClass, ...featureList].join(' ');
+        }
+        case 'mdi':
+            // Material Design Icons: no variants, just features
+            baseClass = 'mdi';
+            iconClass = `mdi-${name}`;
+            return [baseClass, iconClass, ...featureList].join(' ');
+        case 'material-icons': {
+            // Google Material Icons: map variants to full class names
+            const styleVariants = {
+                filled: 'material-icons',
+                outlined: 'material-icons-outlined',
+                round: 'material-icons-round',
+                sharp: 'material-icons-sharp',
+            };
+            baseClass = variant
+                ? styleVariants[variant] || `material-icons-${variant}`
+                : 'material-icons';
+            return [baseClass, ...featureList].join(' ');
+        }
+        case 'material-symbols': {
+            // Google Material Symbols: map variants to full class names
+            const styleVariants = {
+                outlined: 'material-symbols-outlined',
+                rounded: 'material-symbols-rounded',
+                sharp: 'material-symbols-sharp',
+            };
+            baseClass = variant
+                ? styleVariants[variant] || `material-symbols-${variant}`
+                : 'material-symbols-outlined';
+            return [baseClass, ...featureList].join(' ');
+        }
+        default:
+            // fallback: just icon name and features
+            return [name, ...featureList].join(' ');
+    }
 }
-
 /**
- * Resolves a portal target: an `HTMLElement` is used directly, a non-empty
- * `string` is treated as a `document.querySelector` selector (falling back to
- * `document.body` when it matches nothing), and any falsy value — `undefined`
- * or the empty string — resolves to `document.body`.
- *
- * The empty string is deliberately treated as "no target" rather than passed
- * through: `document.querySelector('')` throws a `SyntaxError`, and callers
- * building a selector from state can easily hand us `''`.
+ * The `Icon` component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons, Google Material Icons, Material Symbols, etc.).
  *
- * @function resolvePortalContainer
- * @param container - The requested portal target, if any.
- * @returns The resolved DOM node to portal into.
+ * @function
+ * @param {IconProps} props - Props for the Icon component.
+ * @returns {JSX.Element} The rendered icon element.
+ * @see {@link https://bulma.io/documentation/elements/icon/ | Bulma Icon documentation}
  */
-function resolvePortalContainer(container) {
-    if (!container) {
-        return document.body;
-    }
-    if (typeof container === 'string') {
-        return (document.querySelector(container) ?? document.body);
+const Icon = ({ className, textColor, bgColor, name, library, variant, features, libraryFeatures, // Deprecated but maintained for backward compatibility
+size, ariaLabel, style, icon, // Capture and exclude the deprecated 'icon' prop from DOM
+color: _color, // Exclude 'color' prop if passed directly
+containerClassName, children, ...restProps }) => {
+    // Get the default icon library from context, fallback to 'fa' if not set
+    const defaultLibrary = useIconLibrary();
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     * Note: variant, features, and libraryFeatures are excluded from props spread
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...restProps,
+    });
+    // Hoisted unconditionally to respect rules-of-hooks; the branches below
+    // pick which result to consume.
+    const defaultIconClasses = usePrefixedClassNames('icon', {
+        [`is-${size}`]: size,
+    });
+    const sizeModifierClass = usePrefixedClassNames(size ? `is-${size}` : undefined);
+    const bulmaClasses = containerClassName
+        ? containerClassName
+        : defaultIconClasses;
+    const iconContainerClasses = classNames(bulmaClasses, containerClassName && size ? sizeModifierClass : undefined, bulmaHelperClasses, className);
+    // A named icon is an image, whose name is its label alone, so a ligature inside
+    // never leaks into it. An unnamed one is decorative and hidden outright. Spread
+    // before `rest`, so a caller's own `role` or `aria-hidden` still wins.
+    const named = !!ariaLabel || !!restProps['aria-label'] || !!restProps['aria-labelledby'];
+    // A caller's own `role` or `tabIndex` on an unnamed icon means it isn't decoration (an
+    // icon made a button, say), so it isn't hidden either: `aria-hidden` on something
+    // focusable is a failure of its own.
+    const a11yProps = named
+        ? { role: 'img', 'aria-label': ariaLabel || undefined }
+        : restProps.role !== undefined || restProps.tabIndex !== undefined
+            ? {}
+            : { 'aria-hidden': true };
+    if (children !== undefined) {
+        // `IconChildrenProps`: render the caller's node (an inline SVG, a `react-icons`
+        // component, …) in place of a class-based glyph. Library/variant/features don't apply.
+        return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest, children: children }));
+    }
+    // `name` is guaranteed once `children` is absent UNLESS the caller is on the deprecated
+    // `icon` path, which `IconDeprecatedProps` declares with `name?: undefined`.
+    // (`IconChildrenProps['children']` excludes `undefined`, so `children={undefined}` can't
+    // slip past into this branch.) The cast covers that third member, and the `!name && icon`
+    // fallback below is what fills it in.
+    let finalName = name;
+    if (!name && icon) {
+        // If icon prop is provided instead of name, try to parse it
+        // e.g., "mdi mdi-rocket-launch" -> "rocket-launch"
+        if (typeof icon === 'string') {
+            const parts = icon.split(' ');
+            const lastPart = parts[parts.length - 1];
+            if (lastPart.startsWith('mdi-')) {
+                finalName = lastPart.substring(4); // Remove "mdi-" prefix
+            }
+            else if (lastPart.startsWith('fa-')) {
+                finalName = lastPart.substring(3); // Remove "fa-" prefix
+            }
+            else {
+                finalName = lastPart;
+            }
+        }
+    }
+    const finalLibrary = library || defaultLibrary || 'fa';
+    // Normalize a redundant leading library prefix (e.g. "fa-check" -> "check" when the
+    // library is 'fa'), so `name` behaves identically with or without the prefix.
+    finalName = stripRedundantLibraryPrefix(finalName, finalLibrary);
+    if (!finalName) {
+        // No glyph to name. Reachable through the public type only as `icon=""`, and otherwise
+        // by a plain-JS caller (or one that casts). Building a class off an absent name produced
+        // a bogus `fa-undefined` glyph; render the bare container instead, matching the
+        // `children` branch.
+        return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest }));
+    }
+    // Backward compatibility: if libraryFeatures is provided, parse it for variant and features
+    let finalVariant = variant;
+    let finalFeatures = features;
+    if (libraryFeatures && !variant && !features) {
+        const legacyFeatures = Array.isArray(libraryFeatures)
+            ? libraryFeatures
+            : [libraryFeatures];
+        // For Font Awesome, extract style from features
+        if (finalLibrary === 'fa') {
+            const faStyle = legacyFeatures.find(f => [
+                'fas',
+                'far',
+                'fab',
+                'fal',
+                'fad',
+                'fat',
+                'solid',
+                'regular',
+                'brands',
+                'light',
+                'duotone',
+                'thin',
+            ].includes(f));
+            if (faStyle) {
+                finalVariant = faStyle;
+                finalFeatures = legacyFeatures.filter(f => f !== faStyle);
+            }
+            else {
+                finalFeatures = legacyFeatures;
+            }
+        }
+        // For Material Icons/Symbols, extract style variant
+        else if (finalLibrary === 'material-icons' ||
+            finalLibrary === 'material-symbols') {
+            const styleVariants = finalLibrary === 'material-icons'
+                ? ['filled', 'outlined', 'round', 'sharp']
+                : ['outlined', 'rounded', 'sharp'];
+            const styleVariant = legacyFeatures.find(f => styleVariants.includes(f));
+            if (styleVariant) {
+                finalVariant = styleVariant;
+                finalFeatures = legacyFeatures.filter(f => f !== styleVariant);
+            }
+            else {
+                finalFeatures = legacyFeatures;
+            }
+        }
+        // For others, all features go to finalFeatures
+        else {
+            finalFeatures = legacyFeatures;
+        }
+    }
+    // Handle web components vs CSS-based icons
+    if (finalLibrary === 'ion') {
+        // For Ionicons, handle variant in the name
+        let ionName = finalName;
+        if (finalVariant === 'outline') {
+            ionName = `${finalName}-outline`;
+        }
+        else if (finalVariant === 'sharp') {
+            ionName = `${finalName}-sharp`;
+        }
+        return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest, children: jsxRuntime.jsx("ion-icon", { name: ionName }) }));
+    }
+    // Legacy CSS-based icons
+    const iClasses = getIconClasses(finalLibrary, finalName, finalVariant, finalFeatures);
+    // Material Icons and Material Symbols use text content, not CSS classes for the icon name
+    if (finalLibrary === 'material-icons' ||
+        finalLibrary === 'material-symbols') {
+        return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest, children: jsxRuntime.jsx("i", { className: iClasses, children: finalName }) }));
+    }
+    return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest, children: jsxRuntime.jsx("i", { className: iClasses }) }));
+};
+
+/**
+ * The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.
+ *
+ * @function
+ * @param {ParagraphProps} props - Props for the Paragraph component.
+ * @returns {JSX.Element} The rendered paragraph element.
+ */
+const Paragraph = ({ className, textColor, bgColor, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const bulmaClasses = usePrefixedClassNames();
+    const paragraphClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsx("p", { className: paragraphClasses || undefined, ...rest, children: children }));
+};
+
+const validTitleSizes = ['1', '2', '3', '4', '5', '6'];
+const validTitleElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
+/**
+ * The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`, `p`).
+ *
+ * @function
+ * @param {TitleProps} props - Props for the Title component.
+ * @returns {JSX.Element} The rendered title element.
+ * @see {@link https://bulma.io/documentation/elements/title/ | Bulma Title documentation}
+ */
+const Title = ({ className, size, isSpaced, as = 'h1', hasSkeleton, textColor, bgColor, children, ...props }) => {
+    /**
+     * Generates Bulma helper classes and separates out remaining props.
+     */
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    // Validate 'as' prop at runtime
+    const element = validTitleElements.includes(as) ? as : 'h1';
+    // Validate 'size' prop at runtime (numeric sizes normalize to strings)
+    const normalized = size == null ? undefined : String(size);
+    const validSize = normalized && validTitleSizes.includes(normalized)
+        ? normalized
+        : undefined;
+    const bulmaClasses = usePrefixedClassNames('title', {
+        [`is-${validSize}`]: validSize,
+        'is-spaced': isSpaced,
+        'has-skeleton': hasSkeleton,
+    });
+    const titleClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    // Determine the tag based on 'element' and 'validSize'
+    const Tag = element === 'p' ? 'p' : validSize ? `h${validSize}` : element;
+    return (jsxRuntime.jsx(Tag, { className: titleClasses, ...rest, children: children }));
+};
+
+const validEmptyStateColors = [
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+];
+const validEmptyStateHeadings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const validEmptyStateSizes = ['small', 'medium', 'large'];
+/**
+ * The circle the picture sits in, hidden from assistive tech whatever is in it.
+ *
+ * @function
+ * @param {EmptyStateIndicatorProps} props - Props for EmptyState.Indicator.
+ * @returns {JSX.Element} The rendered indicator.
+ */
+const EmptyStateIndicator = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const indicatorClass = usePrefixedClassNames('empty-state-indicator');
+    // Hidden after the rest of the props, so nothing passed in can expose the
+    // picture: the title says what it means.
+    return (jsxRuntime.jsx("div", { className: classNames(indicatorClass, bulmaHelperClasses, className), ...rest, "aria-hidden": "true", children: children }));
+};
+EmptyStateIndicator.displayName = 'EmptyState.Indicator';
+/**
+ * The heading, a Bulma `Title` at the level `as` sets, `h2` by default, and at the EmptyState's size.
+ *
+ * @function
+ * @param {EmptyStateTitleProps} props - Props for EmptyState.Title.
+ * @returns {JSX.Element} The rendered heading.
+ */
+const EmptyStateTitle = ({ as = 'h2', className, ...props }) => {
+    // `size` isn't in the type, but on `Title` it picks the tag, so it's kept
+    // off even when it's passed anyway. The level is `as` alone.
+    const { size: _size, ...rest } = props;
+    const titleClass = usePrefixedClassNames('empty-state-title');
+    const level = validEmptyStateHeadings.includes(as) ? as : 'h2';
+    return (jsxRuntime.jsx(Title, { as: level, className: classNames(titleClass, className), ...rest }));
+};
+EmptyStateTitle.displayName = 'EmptyState.Title';
+/**
+ * A sentence or two under the title, in the color of the text around it.
+ *
+ * @function
+ * @param {EmptyStateDescriptionProps} props - Props for EmptyState.Description.
+ * @returns {JSX.Element} The rendered description.
+ */
+const EmptyStateDescription = ({ className, ...props }) => {
+    const descriptionClass = usePrefixedClassNames('empty-state-description');
+    return (jsxRuntime.jsx(Paragraph, { className: classNames(descriptionClass, className), ...props }));
+};
+EmptyStateDescription.displayName = 'EmptyState.Description';
+/**
+ * A row of buttons, centered under the text or at the start of the line beside the indicator.
+ *
+ * @function
+ * @param {EmptyStateActionsProps} props - Props for EmptyState.Actions.
+ * @returns {JSX.Element} The rendered row of buttons.
+ */
+const EmptyStateActions = ({ className, ...props }) => {
+    const actionsClass = usePrefixedClassNames('empty-state-actions');
+    return jsxRuntime.jsx(Buttons, { className: classNames(actionsClass, className), ...props });
+};
+EmptyStateActions.displayName = 'EmptyState.Actions';
+/** Whether a shorthand prop was given something to render. */
+const isGiven = (node) => node !== undefined &&
+    node !== null &&
+    typeof node !== 'boolean' &&
+    node !== '';
+/**
+ * The `EmptyState` component renders the block an app shows where content would be: an empty list, a search with no results, or a first-run screen.
+ *
+ * It's a column of a picture in a circle, a heading, a line of text and the
+ * actions, with one layout whether it's written with the `icon`, `title` and
+ * `description` props or with the parts. The children always render as
+ * written, after the parts the props render.
+ *
+ * It has no role and no live region. It arrives already filled and goes away
+ * when results come back, so it can't announce a search that matched
+ * nothing: keep a `role="status"` region beside the search field for that,
+ * in the page the whole time. While the data loads, show a `Skeleton` or a
+ * `Loader` instead, so "No projects yet" doesn't flash first, and show a
+ * load that failed in a `Message` or a `Notification`.
+ *
+ * @function
+ * @param {EmptyStateProps} props - Props for the EmptyState component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the root `<div>`.
+ * @returns {JSX.Element} The rendered empty state.
+ *
+ * @example
+ * <EmptyState
+ *   icon="folder-open"
+ *   title="No projects yet"
+ *   description="Projects you create or join show up here."
+ * >
+ *   <Button color="primary">New project</Button>
+ * </EmptyState>
+ */
+const EmptyStateRoot = React.forwardRef(({ className, icon, title, titleAs = 'h2', description, children, color, variant = 'light', size = 'normal', align = 'center', textColor, bgColor, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const rootClass = usePrefixedClassNames('empty-state', {
+        [`is-${size}`]: validEmptyStateSizes.includes(size),
+        'is-left': align === 'left',
+        [`is-${color}`]: !!color && validEmptyStateColors.includes(color),
+        'is-filled': variant === 'filled',
+    });
+    // The props' parts first, each only when it's given, then the children
+    // exactly as they were written: nothing here looks at them.
+    return (jsxRuntime.jsxs("div", { ref: ref, className: classNames(rootClass, bulmaHelperClasses, className), ...rest, children: [isGiven(icon) && (jsxRuntime.jsx(EmptyStateIndicator, { children: typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon })), isGiven(title) && (jsxRuntime.jsx(EmptyStateTitle, { as: titleAs, children: title })), isGiven(description) && (jsxRuntime.jsx(EmptyStateDescription, { children: description })), children] }));
+});
+const EmptyState = withSubComponents(EmptyStateRoot, {
+    Indicator: EmptyStateIndicator,
+    Title: EmptyStateTitle,
+    Description: EmptyStateDescription,
+    Actions: EmptyStateActions,
+}, 'EmptyState');
+
+// Context to track MenuList nesting level
+const MenuListLevelContext = React.createContext(0);
+/**
+ * The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.
+ *
+ * @function
+ * @param {MenuProps} props - Props for the Menu component.
+ * @returns {JSX.Element} The rendered menu.
+ * @see {@link https://bulma.io/documentation/components/menu/ | Bulma Menu documentation}
+ */
+const MenuComponent = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    // Generate Bulma classes with prefix
+    const bulmaClasses = usePrefixedClassNames('menu');
+    return (jsxRuntime.jsx("aside", { className: classNames(bulmaClasses, bulmaHelperClasses, className), ...rest, children: children }));
+};
+/**
+ * Bulma Menu label component.
+ *
+ * @function
+ * @param {MenuLabelProps} props - Props for the MenuLabel component.
+ * @returns {JSX.Element} The rendered menu label.
+ */
+const MenuLabel = ({ className, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    return (jsxRuntime.jsx("p", { className: classNames(usePrefixedClassNames('menu-label'), className, bulmaHelperClasses), ...rest, children: children }));
+};
+/**
+ * MenuList applies `menu-list` class only at the top level (not for nested lists).
+ *
+ * @function
+ * @param {MenuListProps} props - Props for the MenuList component.
+ * @returns {JSX.Element} The rendered menu list.
+ */
+const MenuList = ({ className, children, ...props }) => {
+    const level = React.useContext(MenuListLevelContext);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const ulClass = classNames(className, bulmaHelperClasses, {
+        [usePrefixedClassNames('menu-list')]: level === 0,
+    });
+    // Increment level for nested MenuLists
+    return (jsxRuntime.jsx(MenuListLevelContext.Provider, { value: level + 1, children: jsxRuntime.jsx("ul", { className: ulClass || undefined, ...rest, children: children }) }));
+};
+/**
+ * `href` alone — annotated so a typo is a compile error rather than a silent
+ * no-op, the way both siblings' sets are.
+ */
+const STRIP_FROM_NON_LINK = { href: true };
+/**
+ * MenuItem supports `as` prop for custom link components, e.g., react-router-dom Link.
+ *
+ * @function
+ * @param {MenuItemProps} props - Props for the MenuItem component.
+ * @param {React.Ref} ref - Forwarded ref to the inner element `as` renders.
+ * @returns {JSX.Element} The rendered menu item.
+ */
+const MenuItem = React.forwardRef(function MenuItem(itemProps, ref) {
+    const { className, children, active, as: Component = 'a', 'data-testid': testId, style, id, title, role, tabIndex, ...rest } = itemProps;
+    const { bulmaHelperClasses, rest: forwarded } = useBulmaClasses(rest);
+    // `href` reaches an anchor or a custom component (which owns its own prop
+    // contract), but not another intrinsic tag — `<span href>` is invalid HTML.
+    // The same rule Avatar applies through `isLinkLike` and Button through its
+    // intrinsic-only strip. Before #641 `href` was an own prop re-applied only
+    // for `as="a"`; deriving it from `as` must not quietly widen that.
+    const isLinkLike = Component === 'a' ||
+        typeof Component !== 'string' ||
+        isCustomElement(Component);
+    // `href` ALONE. `Dropdown.Item` strips every anchor-only attribute except
+    // `type`; `Level.Item` strips all of them, plus `rel`.
+    //
+    // Not because nothing else can arrive: `as` here is an open `React.ElementType`,
+    // and a non-fresh spread skips excess-property checking, so a typed caller
+    // CAN deliver `target` or `download` and they are forwarded. The set stays at
+    // `href` because widening it would be wrong for an open `as` — `referrerPolicy`
+    // on `as="img"`, `target` on `as="form"` and `media` on `as="source"` are all
+    // legal, and a flat strip would delete them. Getting that right needs a
+    // per-attribute-per-element rule, which `bestax-migrate` already models in
+    // `LINK_ATTR_ELEMENTS`.
+    const linkProps = isLinkLike
+        ? forwarded
+        : omitAttrs(forwarded, STRIP_FROM_NON_LINK);
+    const itemClass = classNames({ [usePrefixedClassNames('is-active')]: active }, bulmaHelperClasses);
+    // Split children into label and nested MenuList(s)
+    const labelChildren = [];
+    const nestedMenuLists = [];
+    React.Children.forEach(children, child => {
+        if (React.isValidElement(child) && child.type === MenuList) {
+            nestedMenuLists.push(child);
+        }
+        else {
+            labelChildren.push(child);
+        }
+    });
+    return (jsxRuntime.jsxs("li", { className: className, "data-testid": testId, style: style, id: id, title: title, role: role, tabIndex: tabIndex, children: [jsxRuntime.jsx(Component, { ref: ref, className: itemClass || undefined, ...linkProps, ...(Component === 'button'
+                    ? { type: buttonType(linkProps.type) }
+                    : {}), children: labelChildren }), nestedMenuLists] }));
+});
+MenuItem.displayName = 'MenuItem';
+// Attach static subcomponents
+const Menu = withSubComponents(MenuComponent, {
+    Label: MenuLabel,
+    List: MenuList,
+    Item: MenuItem,
+}, 'Menu');
+
+const validMessageSizes = ['small', 'medium', 'large'];
+/**
+ * The `Message` component provides Bulma's flexible notice/message box for your Bulma React UI.
+ *
+ * @function
+ * @param {MessageProps} props - Props for the Message component.
+ * @returns {JSX.Element} The rendered message.
+ * @see {@link https://bulma.io/documentation/components/message/ | Bulma Message documentation}
+ */
+const MessageComponent = ({ className, title, textColor, color, bgColor, size, onClose, children, ...props }) => {
+    const { classPrefix } = useConfig();
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    // Generate Bulma classes with prefix
+    const bulmaClasses = usePrefixedClassNames('message', {
+        [`is-${color}`]: color,
+        [`is-${size}`]: size && validMessageSizes.includes(size),
+    });
+    const deleteClass = usePrefixedClassNames('delete');
+    const messageClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    return (jsxRuntime.jsxs("article", { className: messageClasses, ...rest, "data-testid": "message", children: [(title || onClose) && (jsxRuntime.jsxs("div", { className: prefixedClassNames(classPrefix, 'message-header'), children: [title && jsxRuntime.jsx("span", { children: title }), onClose && (jsxRuntime.jsx("button", { className: deleteClass, "aria-label": "delete", onClick: onClose, type: "button", "data-testid": "message-close" }))] })), children && (jsxRuntime.jsx("div", { className: prefixedClassNames(classPrefix, 'message-body'), "data-testid": "message-body", children: children }))] }));
+};
+/**
+ * Message header compound component. Renders a `.message-header` element.
+ *
+ * @function
+ * @param {MessageHeaderProps} props - Props for the MessageHeader component.
+ * @returns {JSX.Element} The rendered message header.
+ */
+const MessageHeader = ({ className, children, ...props }) => (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('message-header'), className), ...props, children: children }));
+/**
+ * Message body compound component. Renders a `.message-body` element.
+ *
+ * @function
+ * @param {MessageBodyProps} props - Props for the MessageBody component.
+ * @returns {JSX.Element} The rendered message body.
+ */
+const MessageBody = ({ className, children, ...props }) => (jsxRuntime.jsx("div", { className: classNames(usePrefixedClassNames('message-body'), className), ...props, children: children }));
+// Attach compound components
+const Message = withSubComponents(MessageComponent, {
+    Header: MessageHeader,
+    Body: MessageBody,
+}, 'Message');
+
+// Ref-counted across every caller (e.g. a Dialog rendering its own Modal)
+// so overlapping/nested locks don't fight over which one restores `overflow`.
+// Every overlay that locks body scroll — Modal, Dialog, Sidebar, Loading —
+// goes through here; a component setting `document.body.style.overflow`
+// itself would clear a lock another overlay still needs.
+let lockCount = 0;
+let originalOverflow = '';
+/**
+ * Locks (and ref-counted-ly unlocks) `document.body` scrolling while `active`
+ * is true. Safe to call from multiple components at once — the body scroll
+ * is only restored once every active caller has released its lock.
+ *
+ * @function useScrollLock
+ * @param active - Whether this caller wants the body scroll locked.
+ */
+function useScrollLock(active) {
+    React.useEffect(() => {
+        if (!active)
+            return undefined;
+        lockCount++;
+        if (lockCount === 1) {
+            originalOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            lockCount--;
+            if (lockCount === 0) {
+                document.body.style.overflow = originalOverflow;
+            }
+        };
+    }, [active]);
+}
+
+// "Are we past hydration?" as a store that never changes: React reads the
+// server snapshot both while server-rendering and while hydrating, and the
+// client snapshot from the first post-hydration render onward.
+const subscribeToNothing = () => () => { };
+const getClientSnapshot = () => true;
+const getServerSnapshot = () => false;
+/**
+ * Reports whether the component has passed hydration.
+ *
+ * Returns `false` during server rendering and during the hydrating client
+ * render, then `true` from the commit that follows. Use it to defer
+ * DOM-only behaviour (such as portalling) past hydration so the first client
+ * render matches the server markup instead of tripping hydration recovery.
+ *
+ * Only a component that hydrates ever sees `false` on the client. One that
+ * mounts later (after a route change, or in an app with no server rendering)
+ * gets `true` on its first render, so it pays for no extra render. It
+ * subscribes to nothing, so no later render flips it back.
+ *
+ * @function useIsHydrated
+ * @returns `true` once the hydrating render has completed, otherwise `false`.
+ */
+function useIsHydrated() {
+    return React.useSyncExternalStore(subscribeToNothing, getClientSnapshot, getServerSnapshot);
+}
+
+/**
+ * Resolves a portal target: an `HTMLElement` is used directly, a non-empty
+ * `string` is treated as a `document.querySelector` selector (falling back to
+ * `document.body` when it matches nothing), and any falsy value — `undefined`
+ * or the empty string — resolves to `document.body`.
+ *
+ * The empty string is deliberately treated as "no target" rather than passed
+ * through: `document.querySelector('')` throws a `SyntaxError`, and callers
+ * building a selector from state can easily hand us `''`.
+ *
+ * @function resolvePortalContainer
+ * @param container - The requested portal target, if any.
+ * @returns The resolved DOM node to portal into.
+ */
+function resolvePortalContainer(container) {
+    if (!container) {
+        return document.body;
+    }
+    if (typeof container === 'string') {
+        return (document.querySelector(container) ?? document.body);
     }
     return container;
 }
@@ -3820,427 +4504,179 @@ function whole(count, fallback) {
 function range(from, to) {
     return Array.from({ length: Math.max(to - from + 1, 0) }, (_, i) => from + i);
 }
-/**
- * The pages to show for `current` of `total`: the first and last
- * `boundaries`, `siblings` on each side of the current one, and a gap for
- * each run left out. A gap of a single page shows that page instead, and the
- * window around the current page slides inward near either end, so the row
- * keeps its length as the page moves.
- */
-function pageItems(total, current, siblings, boundaries) {
-    const windowSize = siblings * 2 + 1;
-    // Every page fits in the room the boundary pages, the window and two gaps take.
-    if (total <= boundaries * 2 + windowSize + 2)
-        return range(1, total);
-    const lowest = boundaries + 2;
-    const highest = total - boundaries - 1;
-    const start = Math.min(Math.max(current - siblings, lowest), highest - windowSize + 1);
-    const end = start + windowSize - 1;
-    const gap = (from, to, name) => to === from ? [from] : [name];
-    return [
-        ...range(1, boundaries),
-        ...gap(boundaries + 1, start - 1, 'start-gap'),
-        ...range(start, end),
-        ...gap(end + 1, total - boundaries, 'end-gap'),
-        ...range(total - boundaries + 1, total),
-    ];
-}
-/**
- * "Previous" navigation button.
- *
- * @function
- * @param {PaginationPreviousNextProps} props - Props for the PaginationPrevious component.
- * @returns {JSX.Element} The rendered previous button.
- */
-const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsxRuntime.jsx("a", { className: classNames(usePrefixedClassNames('pagination-previous', {
-        'is-disabled': disabled,
-    }), className), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
-        ? e => {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        : props.onClick, children: children }));
-/**
- * "Next" navigation button.
- *
- * @function
- * @param {PaginationPreviousNextProps} props - Props for the PaginationNext component.
- * @returns {JSX.Element} The rendered next button.
- */
-const PaginationNext = ({ className, disabled, children, ...props }) => (jsxRuntime.jsx("a", { className: classNames(usePrefixedClassNames('pagination-next', { 'is-disabled': disabled }), className), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
-        ? e => {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        : props.onClick, children: children }));
-/**
- * The `Pagination` component provides a flexible, composable Bulma pagination navigation for your Bulma React UI.
- *
- * @function
- * @param {PaginationProps} props - Props for the Pagination component.
- * @returns {JSX.Element} The rendered pagination.
- * @see {@link https://bulma.io/documentation/components/pagination/ | Bulma Pagination documentation}
- */
-const PaginationComponent = ({ color, textColor, bgColor, size, align, rounded, total, current, onPageChange, siblingCount = 1, boundaryCount = 1, previousLabel = 'Previous', nextLabel = 'Next', disabled, getPageHref, getPageLabel, className, children, ...props }) => {
-    const [kept, setKept] = React.useState(1);
-    warnDeprecatedColorProp('Pagination', color, 'Use the textColor / bgColor helper props instead.');
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    // Generate Bulma classes with prefix
-    const bulmaClasses = usePrefixedClassNames('pagination', {
-        [`is-${color}`]: color,
-        [`is-${size}`]: size,
-        [`is-${align}`]: align,
-        'is-rounded': rounded,
-    });
-    const paginationClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    // A child that renders nothing (`{show && …}` when false) is no children.
-    const fromTotal = total !== undefined && React.Children.toArray(children).length === 0;
-    let content = children;
-    if (fromTotal) {
-        const pages = Number.isFinite(total) ? Math.max(Math.floor(total), 0) : 0;
-        // A current page that's no number reads as the first.
-        const page = Math.min(Math.max(whole(current ?? kept, 1), 1), Math.max(pages, 1));
-        const choose = (next) => {
-            if (next === page)
-                return;
-            if (current === undefined)
-                setKept(next);
-            onPageChange?.(next);
-        };
-        /**
-         * What a link to `target` is given, beside what it renders. With no
-         * `getPageHref` it's a button; a link that's `off` goes nowhere.
-         */
-        const linkTo = (target, off) => ({
-            href: off || !getPageHref ? undefined : getPageHref(target),
-            role: getPageHref ? undefined : 'button',
-            // A link that's off is disabled too, and the parts drop its clicks.
-            onClick: () => choose(target),
-            onKeyDown: getPageHref
-                ? undefined
-                : (e) => {
-                    if (off || (e.key !== 'Enter' && e.key !== ' '))
-                        return;
-                    e.preventDefault();
-                    choose(target);
-                },
-        });
-        const atStart = disabled || page <= 1;
-        const atEnd = disabled || page >= pages;
-        content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PaginationPrevious, { disabled: atStart, ...linkTo(page - 1, atStart), children: previousLabel }), jsxRuntime.jsx(PaginationNext, { disabled: atEnd, ...linkTo(page + 1, atEnd), children: nextLabel }), jsxRuntime.jsx(PaginationList, { children: pageItems(pages, page, whole(siblingCount, 1), whole(boundaryCount, 1)).map(item => typeof item === 'number' ? (jsxRuntime.jsx(PaginationLink, { "aria-label": getPageLabel ? getPageLabel(item) : `Page ${item}`, active: item === page, disabled: disabled, ...linkTo(item, Boolean(disabled)), children: item }, item)) : (jsxRuntime.jsx(PaginationEllipsis, {}, item))) })] }));
-    }
-    return (jsxRuntime.jsx("nav", { className: paginationClasses, role: "navigation", "aria-label": "pagination", ...rest, children: content }));
-};
-/**
- * Container for page links and ellipsis.
- *
- * @function
- * @param {PaginationListProps} props - Props for the PaginationList component.
- * @returns {JSX.Element} The rendered pagination list.
- */
-const PaginationList = ({ className, textColor, bgColor, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    return (jsxRuntime.jsx("ul", { className: classNames(usePrefixedClassNames('pagination-list'), bulmaHelperClasses, className), ...rest, children: children }));
-};
-/**
- * Page number or navigation link.
- *
- * @function
- * @param {PaginationLinkProps} props - Props for the PaginationLink component.
- * @returns {JSX.Element} The rendered pagination link.
- */
-const PaginationLink = ({ className, textColor, bgColor, active, disabled, onClick, children, ...props }) => {
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const handleClick = (e) => {
-        if (disabled) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        if (onClick) {
-            onClick(e);
-        }
-    };
-    return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("a", { className: classNames(usePrefixedClassNames('pagination-link', {
-                'is-current': active,
-                'is-disabled': disabled,
-            }), bulmaHelperClasses, className), "aria-current": active ? 'page' : undefined, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: handleClick, ...rest, children: children }) }));
-};
-/**
- * Ellipsis separator.
- *
- * @function
- * @param {React.LiHTMLAttributes<HTMLLIElement>} props - Standard li props.
- * @returns {JSX.Element} The rendered ellipsis.
- */
-const PaginationEllipsis = props => (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("span", { className: usePrefixedClassNames('pagination-ellipsis'), ...props, children: "\u2026" }) }));
-const Pagination = withSubComponents(PaginationComponent, {
-    Link: PaginationLink,
-    List: PaginationList,
-    Ellipsis: PaginationEllipsis,
-    Previous: PaginationPrevious,
-    Next: PaginationNext,
-}, 'Pagination');
-
-/**
- * Strips a redundant leading library prefix from an icon name (e.g. `fa-check` -> `check`
- * for the `fa` library, `mdi-account` -> `account` for `mdi`), so `name` behaves the same
- * whether or not the caller includes the prefix. Font Awesome and Material Design Icons docs
- * conventionally refer to icons with their class prefix (`fa-check`), which otherwise gets
- * doubled by `getIconClasses` (producing `fa-fa-check`, matching no glyph).
- *
- * @param {string} name - The icon name, possibly including a redundant library prefix.
- * @param {IconLibrary} library - The icon library the name will be rendered with.
- * @returns {string} The icon name with any redundant leading library prefix removed.
- */
-function stripRedundantLibraryPrefix(name, library) {
-    if (!name) {
-        return name;
-    }
-    if (library === 'fa' && name.startsWith('fa-')) {
-        return name.substring(3);
-    }
-    if (library === 'mdi' && name.startsWith('mdi-')) {
-        return name.substring(4);
-    }
-    return name;
-}
-/**
- * Gets the correct classes for the icon element based on the library and features.
- *
- * @param {IconLibrary} library - The icon library.
- * @param {string} name - The icon name.
- * @param {string} [variant] - Icon style variant (e.g., 'solid', 'outlined', 'rounded').
- * @param {string | string[]} [features] - Additional library-specific modifiers.
- * @returns {string} The combined class string for the icon.
- */
-function getIconClasses(library, name, variant, features) {
-    let baseClass;
-    let iconClass;
-    const featureList = Array.isArray(features)
-        ? features
-        : features
-            ? [features]
-            : [];
-    switch (library) {
-        case 'fa': {
-            // Font Awesome: use variant as style ('solid' -> 'fas', 'regular' -> 'far', etc.)
-            const styleMap = {
-                solid: 'fas',
-                regular: 'far',
-                brands: 'fab',
-                light: 'fal',
-                duotone: 'fad',
-                thin: 'fat',
-            };
-            const faStyle = variant ? styleMap[variant] || variant : 'fas';
-            baseClass = faStyle;
-            iconClass = `fa-${name}`;
-            return [baseClass, iconClass, ...featureList].join(' ');
-        }
-        case 'mdi':
-            // Material Design Icons: no variants, just features
-            baseClass = 'mdi';
-            iconClass = `mdi-${name}`;
-            return [baseClass, iconClass, ...featureList].join(' ');
-        case 'material-icons': {
-            // Google Material Icons: map variants to full class names
-            const styleVariants = {
-                filled: 'material-icons',
-                outlined: 'material-icons-outlined',
-                round: 'material-icons-round',
-                sharp: 'material-icons-sharp',
-            };
-            baseClass = variant
-                ? styleVariants[variant] || `material-icons-${variant}`
-                : 'material-icons';
-            return [baseClass, ...featureList].join(' ');
+/**
+ * The pages to show for `current` of `total`: the first and last
+ * `boundaries`, `siblings` on each side of the current one, and a gap for
+ * each run left out. A gap of a single page shows that page instead, and the
+ * window around the current page slides inward near either end, so the row
+ * keeps its length as the page moves.
+ */
+function pageItems(total, current, siblings, boundaries) {
+    const windowSize = siblings * 2 + 1;
+    // Every page fits in the room the boundary pages, the window and two gaps take.
+    if (total <= boundaries * 2 + windowSize + 2)
+        return range(1, total);
+    const lowest = boundaries + 2;
+    const highest = total - boundaries - 1;
+    const start = Math.min(Math.max(current - siblings, lowest), highest - windowSize + 1);
+    const end = start + windowSize - 1;
+    const gap = (from, to, name) => to === from ? [from] : [name];
+    return [
+        ...range(1, boundaries),
+        ...gap(boundaries + 1, start - 1, 'start-gap'),
+        ...range(start, end),
+        ...gap(end + 1, total - boundaries, 'end-gap'),
+        ...range(total - boundaries + 1, total),
+    ];
+}
+/**
+ * "Previous" navigation button.
+ *
+ * @function
+ * @param {PaginationPreviousNextProps} props - Props for the PaginationPrevious component.
+ * @returns {JSX.Element} The rendered previous button.
+ */
+const PaginationPrevious = ({ className, disabled, children, ...props }) => (jsxRuntime.jsx("a", { className: classNames(usePrefixedClassNames('pagination-previous', {
+        'is-disabled': disabled,
+    }), className), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
+        ? e => {
+            e.preventDefault();
+            e.stopPropagation();
         }
-        case 'material-symbols': {
-            // Google Material Symbols: map variants to full class names
-            const styleVariants = {
-                outlined: 'material-symbols-outlined',
-                rounded: 'material-symbols-rounded',
-                sharp: 'material-symbols-sharp',
-            };
-            baseClass = variant
-                ? styleVariants[variant] || `material-symbols-${variant}`
-                : 'material-symbols-outlined';
-            return [baseClass, ...featureList].join(' ');
+        : props.onClick, children: children }));
+/**
+ * "Next" navigation button.
+ *
+ * @function
+ * @param {PaginationPreviousNextProps} props - Props for the PaginationNext component.
+ * @returns {JSX.Element} The rendered next button.
+ */
+const PaginationNext = ({ className, disabled, children, ...props }) => (jsxRuntime.jsx("a", { className: classNames(usePrefixedClassNames('pagination-next', { 'is-disabled': disabled }), className), "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, ...props, onClick: disabled
+        ? e => {
+            e.preventDefault();
+            e.stopPropagation();
         }
-        default:
-            // fallback: just icon name and features
-            return [name, ...featureList].join(' ');
-    }
-}
+        : props.onClick, children: children }));
 /**
- * The `Icon` component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons, Google Material Icons, Material Symbols, etc.).
+ * The `Pagination` component provides a flexible, composable Bulma pagination navigation for your Bulma React UI.
  *
  * @function
- * @param {IconProps} props - Props for the Icon component.
- * @returns {JSX.Element} The rendered icon element.
- * @see {@link https://bulma.io/documentation/elements/icon/ | Bulma Icon documentation}
+ * @param {PaginationProps} props - Props for the Pagination component.
+ * @returns {JSX.Element} The rendered pagination.
+ * @see {@link https://bulma.io/documentation/components/pagination/ | Bulma Pagination documentation}
  */
-const Icon = ({ className, textColor, bgColor, name, library, variant, features, libraryFeatures, // Deprecated but maintained for backward compatibility
-size, ariaLabel, style, icon, // Capture and exclude the deprecated 'icon' prop from DOM
-color: _color, // Exclude 'color' prop if passed directly
-containerClassName, children, ...restProps }) => {
-    // Get the default icon library from context, fallback to 'fa' if not set
-    const defaultLibrary = useIconLibrary();
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     * Note: variant, features, and libraryFeatures are excluded from props spread
-     */
+const PaginationComponent = ({ color, textColor, bgColor, size, align, rounded, total, current, onPageChange, siblingCount = 1, boundaryCount = 1, previousLabel = 'Previous', nextLabel = 'Next', disabled, getPageHref, getPageLabel, className, children, ...props }) => {
+    const [kept, setKept] = React.useState(1);
+    warnDeprecatedColorProp('Pagination', color, 'Use the textColor / bgColor helper props instead.');
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
-        ...restProps,
+        ...props,
     });
-    // Hoisted unconditionally to respect rules-of-hooks; the branches below
-    // pick which result to consume.
-    const defaultIconClasses = usePrefixedClassNames('icon', {
+    // Generate Bulma classes with prefix
+    const bulmaClasses = usePrefixedClassNames('pagination', {
+        [`is-${color}`]: color,
         [`is-${size}`]: size,
+        [`is-${align}`]: align,
+        'is-rounded': rounded,
     });
-    const sizeModifierClass = usePrefixedClassNames(size ? `is-${size}` : undefined);
-    const bulmaClasses = containerClassName
-        ? containerClassName
-        : defaultIconClasses;
-    const iconContainerClasses = classNames(bulmaClasses, containerClassName && size ? sizeModifierClass : undefined, bulmaHelperClasses, className);
-    // A named icon is an image, whose name is its label alone, so a ligature inside
-    // never leaks into it. An unnamed one is decorative and hidden outright. Spread
-    // before `rest`, so a caller's own `role` or `aria-hidden` still wins.
-    const named = !!ariaLabel || !!restProps['aria-label'] || !!restProps['aria-labelledby'];
-    // A caller's own `role` or `tabIndex` on an unnamed icon means it isn't decoration (an
-    // icon made a button, say), so it isn't hidden either: `aria-hidden` on something
-    // focusable is a failure of its own.
-    const a11yProps = named
-        ? { role: 'img', 'aria-label': ariaLabel || undefined }
-        : restProps.role !== undefined || restProps.tabIndex !== undefined
-            ? {}
-            : { 'aria-hidden': true };
-    if (children !== undefined) {
-        // `IconChildrenProps`: render the caller's node (an inline SVG, a `react-icons`
-        // component, …) in place of a class-based glyph. Library/variant/features don't apply.
-        return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest, children: children }));
-    }
-    // `name` is guaranteed once `children` is absent UNLESS the caller is on the deprecated
-    // `icon` path, which `IconDeprecatedProps` declares with `name?: undefined`.
-    // (`IconChildrenProps['children']` excludes `undefined`, so `children={undefined}` can't
-    // slip past into this branch.) The cast covers that third member, and the `!name && icon`
-    // fallback below is what fills it in.
-    let finalName = name;
-    if (!name && icon) {
-        // If icon prop is provided instead of name, try to parse it
-        // e.g., "mdi mdi-rocket-launch" -> "rocket-launch"
-        if (typeof icon === 'string') {
-            const parts = icon.split(' ');
-            const lastPart = parts[parts.length - 1];
-            if (lastPart.startsWith('mdi-')) {
-                finalName = lastPart.substring(4); // Remove "mdi-" prefix
-            }
-            else if (lastPart.startsWith('fa-')) {
-                finalName = lastPart.substring(3); // Remove "fa-" prefix
-            }
-            else {
-                finalName = lastPart;
-            }
-        }
-    }
-    const finalLibrary = library || defaultLibrary || 'fa';
-    // Normalize a redundant leading library prefix (e.g. "fa-check" -> "check" when the
-    // library is 'fa'), so `name` behaves identically with or without the prefix.
-    finalName = stripRedundantLibraryPrefix(finalName, finalLibrary);
-    if (!finalName) {
-        // No glyph to name. Reachable through the public type only as `icon=""`, and otherwise
-        // by a plain-JS caller (or one that casts). Building a class off an absent name produced
-        // a bogus `fa-undefined` glyph; render the bare container instead, matching the
-        // `children` branch.
-        return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest }));
-    }
-    // Backward compatibility: if libraryFeatures is provided, parse it for variant and features
-    let finalVariant = variant;
-    let finalFeatures = features;
-    if (libraryFeatures && !variant && !features) {
-        const legacyFeatures = Array.isArray(libraryFeatures)
-            ? libraryFeatures
-            : [libraryFeatures];
-        // For Font Awesome, extract style from features
-        if (finalLibrary === 'fa') {
-            const faStyle = legacyFeatures.find(f => [
-                'fas',
-                'far',
-                'fab',
-                'fal',
-                'fad',
-                'fat',
-                'solid',
-                'regular',
-                'brands',
-                'light',
-                'duotone',
-                'thin',
-            ].includes(f));
-            if (faStyle) {
-                finalVariant = faStyle;
-                finalFeatures = legacyFeatures.filter(f => f !== faStyle);
-            }
-            else {
-                finalFeatures = legacyFeatures;
-            }
-        }
-        // For Material Icons/Symbols, extract style variant
-        else if (finalLibrary === 'material-icons' ||
-            finalLibrary === 'material-symbols') {
-            const styleVariants = finalLibrary === 'material-icons'
-                ? ['filled', 'outlined', 'round', 'sharp']
-                : ['outlined', 'rounded', 'sharp'];
-            const styleVariant = legacyFeatures.find(f => styleVariants.includes(f));
-            if (styleVariant) {
-                finalVariant = styleVariant;
-                finalFeatures = legacyFeatures.filter(f => f !== styleVariant);
-            }
-            else {
-                finalFeatures = legacyFeatures;
-            }
-        }
-        // For others, all features go to finalFeatures
-        else {
-            finalFeatures = legacyFeatures;
-        }
+    const paginationClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
+    // A child that renders nothing (`{show && …}` when false) is no children.
+    const fromTotal = total !== undefined && React.Children.toArray(children).length === 0;
+    let content = children;
+    if (fromTotal) {
+        const pages = Number.isFinite(total) ? Math.max(Math.floor(total), 0) : 0;
+        // A current page that's no number reads as the first.
+        const page = Math.min(Math.max(whole(current ?? kept, 1), 1), Math.max(pages, 1));
+        const choose = (next) => {
+            if (next === page)
+                return;
+            if (current === undefined)
+                setKept(next);
+            onPageChange?.(next);
+        };
+        /**
+         * What a link to `target` is given, beside what it renders. With no
+         * `getPageHref` it's a button; a link that's `off` goes nowhere.
+         */
+        const linkTo = (target, off) => ({
+            href: off || !getPageHref ? undefined : getPageHref(target),
+            role: getPageHref ? undefined : 'button',
+            // A link that's off is disabled too, and the parts drop its clicks.
+            onClick: () => choose(target),
+            onKeyDown: getPageHref
+                ? undefined
+                : (e) => {
+                    if (off || (e.key !== 'Enter' && e.key !== ' '))
+                        return;
+                    e.preventDefault();
+                    choose(target);
+                },
+        });
+        const atStart = disabled || page <= 1;
+        const atEnd = disabled || page >= pages;
+        content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PaginationPrevious, { disabled: atStart, ...linkTo(page - 1, atStart), children: previousLabel }), jsxRuntime.jsx(PaginationNext, { disabled: atEnd, ...linkTo(page + 1, atEnd), children: nextLabel }), jsxRuntime.jsx(PaginationList, { children: pageItems(pages, page, whole(siblingCount, 1), whole(boundaryCount, 1)).map(item => typeof item === 'number' ? (jsxRuntime.jsx(PaginationLink, { "aria-label": getPageLabel ? getPageLabel(item) : `Page ${item}`, active: item === page, disabled: disabled, ...linkTo(item, Boolean(disabled)), children: item }, item)) : (jsxRuntime.jsx(PaginationEllipsis, {}, item))) })] }));
     }
-    // Handle web components vs CSS-based icons
-    if (finalLibrary === 'ion') {
-        // For Ionicons, handle variant in the name
-        let ionName = finalName;
-        if (finalVariant === 'outline') {
-            ionName = `${finalName}-outline`;
+    return (jsxRuntime.jsx("nav", { className: paginationClasses, role: "navigation", "aria-label": "pagination", ...rest, children: content }));
+};
+/**
+ * Container for page links and ellipsis.
+ *
+ * @function
+ * @param {PaginationListProps} props - Props for the PaginationList component.
+ * @returns {JSX.Element} The rendered pagination list.
+ */
+const PaginationList = ({ className, textColor, bgColor, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    return (jsxRuntime.jsx("ul", { className: classNames(usePrefixedClassNames('pagination-list'), bulmaHelperClasses, className), ...rest, children: children }));
+};
+/**
+ * Page number or navigation link.
+ *
+ * @function
+ * @param {PaginationLinkProps} props - Props for the PaginationLink component.
+ * @returns {JSX.Element} The rendered pagination link.
+ */
+const PaginationLink = ({ className, textColor, bgColor, active, disabled, onClick, children, ...props }) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const handleClick = (e) => {
+        if (disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
         }
-        else if (finalVariant === 'sharp') {
-            ionName = `${finalName}-sharp`;
+        if (onClick) {
+            onClick(e);
         }
-        return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest, children: jsxRuntime.jsx("ion-icon", { name: ionName }) }));
-    }
-    // Legacy CSS-based icons
-    const iClasses = getIconClasses(finalLibrary, finalName, finalVariant, finalFeatures);
-    // Material Icons and Material Symbols use text content, not CSS classes for the icon name
-    if (finalLibrary === 'material-icons' ||
-        finalLibrary === 'material-symbols') {
-        return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest, children: jsxRuntime.jsx("i", { className: iClasses, children: finalName }) }));
-    }
-    return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest, children: jsxRuntime.jsx("i", { className: iClasses }) }));
+    };
+    return (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("a", { className: classNames(usePrefixedClassNames('pagination-link', {
+                'is-current': active,
+                'is-disabled': disabled,
+            }), bulmaHelperClasses, className), "aria-current": active ? 'page' : undefined, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, onClick: handleClick, ...rest, children: children }) }));
 };
+/**
+ * Ellipsis separator.
+ *
+ * @function
+ * @param {React.LiHTMLAttributes<HTMLLIElement>} props - Standard li props.
+ * @returns {JSX.Element} The rendered ellipsis.
+ */
+const PaginationEllipsis = props => (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("span", { className: usePrefixedClassNames('pagination-ellipsis'), ...props, children: "\u2026" }) }));
+const Pagination = withSubComponents(PaginationComponent, {
+    Link: PaginationLink,
+    List: PaginationList,
+    Ellipsis: PaginationEllipsis,
+    Previous: PaginationPrevious,
+    Next: PaginationNext,
+}, 'Pagination');
 
 /**
  * The `Panel` component implements Bulma's versatile panel block for React.
@@ -4586,205 +5022,76 @@ const Tab = ({ index, disabled, icon, iconLibrary, iconVariant, iconSize = 'smal
         const target = findTargetTab(e.currentTarget, e.key, ctx?.orientation === 'vertical');
         if (target) {
             e.preventDefault();
-            target.focus();
-        }
-    };
-    const handleFocus = (e) => {
-        onFocus?.(e);
-        ctx?.setFocusedTab(index);
-    };
-    const handleBlur = (e) => {
-        onBlur?.(e);
-        if (!tabListOf(e.currentTarget).contains(e.relatedTarget)) {
-            ctx?.setFocusedTab(null);
-        }
-    };
-    return (jsxRuntime.jsx("li", { className: classNames(activeClass, className) || undefined, role: "tab", id: tabId, "aria-selected": isActive, "aria-controls": ctx?.panelId(index), "aria-disabled": disabled || undefined, tabIndex: tabIndex, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, ...props, children: jsxRuntime.jsxs("a", { ref: anchorRef, onClick: handleClick, "aria-disabled": disabled || undefined, children: [icon && (jsxRuntime.jsx(Icon, { name: icon, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })), children && jsxRuntime.jsx("span", { children: children })] }) }));
-};
-/**
- * Each tab; accepts `active`, `onClick`, etc.
- *
- * @function
- * @param {TabItemProps} props - Props for the TabItem component.
- * @returns {JSX.Element} The rendered tab item.
- * @deprecated Use `Tabs.Tab` with an `index` prop instead.
- */
-const TabItem = ({ active, className, children, onClick, ...props }) => (jsxRuntime.jsx("li", { className: classNames({ [usePrefixedClassNames('is-active')]: active }, className) ||
-        undefined, onClick: onClick, ...props, children: children }));
-/**
- * Container for tab content panels. No custom props beyond `children` and standard `<div>` HTML attributes. Applies the `.tabs-content` class.
- *
- * @function
- * @param {TabsContentProps} props - Props for the TabsContent component.
- * @returns {JSX.Element} The rendered tabs content wrapper.
- */
-const TabsContentComponent = ({ className, children, ...props }) => {
-    const contentClass = usePrefixedClassNames('tabs-content');
-    return (jsxRuntime.jsx("div", { className: classNames(contentClass, className), ...props, children: children }));
-};
-/**
- * Individual content panel. Shows/hides based on active tab from context.
- *
- * @function
- * @param {TabContentItemProps} props - Props for the TabContentItem component.
- * @returns {JSX.Element} The rendered tab content panel.
- */
-const TabContentItem = ({ index, className, children, id, ...props }) => {
-    const ctx = useTabsContext();
-    const isActive = ctx ? ctx.activeTab === index : false;
-    const itemClass = usePrefixedClassNames('tabs-content-item', {
-        'is-active': isActive,
-    });
-    const panelId = id ?? (ctx ? `${ctx.baseId}-panel-${index}` : undefined);
-    const registerPanel = ctx?.registerPanel;
-    React.useEffect(() => {
-        if (!registerPanel || panelId === undefined)
-            return undefined;
-        return registerPanel({ index, id: panelId });
-    }, [registerPanel, index, panelId]);
-    return (jsxRuntime.jsx("div", { className: classNames(itemClass, className), role: "tabpanel", id: panelId, "aria-labelledby": ctx?.tabId(index), "aria-hidden": !isActive, ...props, children: children }));
-};
-// ---------------------------------------------------------------------------
-// Static property attachment
-// ---------------------------------------------------------------------------
-const TabsContent = withSubComponents(TabsContentComponent, {
-    Item: TabContentItem,
-});
-const Tabs = withSubComponents(TabsComponent, {
-    List: TabList,
-    Tab,
-    Item: TabItem,
-    Content: TabsContent,
-}, 'Tabs');
-
-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 }));
+            target.focus();
+        }
+    };
+    const handleFocus = (e) => {
+        onFocus?.(e);
+        ctx?.setFocusedTab(index);
+    };
+    const handleBlur = (e) => {
+        onBlur?.(e);
+        if (!tabListOf(e.currentTarget).contains(e.relatedTarget)) {
+            ctx?.setFocusedTab(null);
+        }
+    };
+    return (jsxRuntime.jsx("li", { className: classNames(activeClass, className) || undefined, role: "tab", id: tabId, "aria-selected": isActive, "aria-controls": ctx?.panelId(index), "aria-disabled": disabled || undefined, tabIndex: tabIndex, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, ...props, children: jsxRuntime.jsxs("a", { ref: anchorRef, onClick: handleClick, "aria-disabled": disabled || undefined, children: [icon && (jsxRuntime.jsx(Icon, { name: icon, library: iconLibrary, variant: iconVariant, size: iconSize, features: iconFeatures })), children && jsxRuntime.jsx("span", { children: children })] }) }));
+};
+/**
+ * Each tab; accepts `active`, `onClick`, etc.
+ *
+ * @function
+ * @param {TabItemProps} props - Props for the TabItem component.
+ * @returns {JSX.Element} The rendered tab item.
+ * @deprecated Use `Tabs.Tab` with an `index` prop instead.
+ */
+const TabItem = ({ active, className, children, onClick, ...props }) => (jsxRuntime.jsx("li", { className: classNames({ [usePrefixedClassNames('is-active')]: active }, className) ||
+        undefined, onClick: onClick, ...props, children: children }));
+/**
+ * Container for tab content panels. No custom props beyond `children` and standard `<div>` HTML attributes. Applies the `.tabs-content` class.
+ *
+ * @function
+ * @param {TabsContentProps} props - Props for the TabsContent component.
+ * @returns {JSX.Element} The rendered tabs content wrapper.
+ */
+const TabsContentComponent = ({ className, children, ...props }) => {
+    const contentClass = usePrefixedClassNames('tabs-content');
+    return (jsxRuntime.jsx("div", { className: classNames(contentClass, className), ...props, children: children }));
+};
+/**
+ * Individual content panel. Shows/hides based on active tab from context.
+ *
+ * @function
+ * @param {TabContentItemProps} props - Props for the TabContentItem component.
+ * @returns {JSX.Element} The rendered tab content panel.
+ */
+const TabContentItem = ({ index, className, children, id, ...props }) => {
+    const ctx = useTabsContext();
+    const isActive = ctx ? ctx.activeTab === index : false;
+    const itemClass = usePrefixedClassNames('tabs-content-item', {
+        'is-active': isActive,
+    });
+    const panelId = id ?? (ctx ? `${ctx.baseId}-panel-${index}` : undefined);
+    const registerPanel = ctx?.registerPanel;
+    React.useEffect(() => {
+        if (!registerPanel || panelId === undefined)
+            return undefined;
+        return registerPanel({ index, id: panelId });
+    }, [registerPanel, index, panelId]);
+    return (jsxRuntime.jsx("div", { className: classNames(itemClass, className), role: "tabpanel", id: panelId, "aria-labelledby": ctx?.tabId(index), "aria-hidden": !isActive, ...props, children: children }));
+};
+// ---------------------------------------------------------------------------
+// Static property attachment
+// ---------------------------------------------------------------------------
+const TabsContent = withSubComponents(TabsContentComponent, {
+    Item: TabContentItem,
 });
-Button.displayName = 'Button';
+const Tabs = withSubComponents(TabsComponent, {
+    List: TabList,
+    Tab,
+    Item: TabItem,
+    Content: TabsContent,
+}, 'Tabs');
 
 // INTERNAL: deliberately not exported from src/index.ts.
 /**
@@ -8753,129 +9060,6 @@ const Box = ({ className, textColor, color, bgColor, hasShadow = true, children,
     return (jsxRuntime.jsx("div", { className: boxClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
-/**
- * The `LinkButton` component renders a `<button>` that visually looks like text or a link.
- *
- * @function
- * @param {LinkButtonProps} props - Props for the LinkButton component.
- * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
- * @returns {JSX.Element} The rendered link-styled button element.
- *
- * @example
- * // Text variant (default)
- * <LinkButton onClick={handleClick}>Click me</LinkButton>
- *
- * @example
- * // Underline variant with color
- * <LinkButton variant="underline" color="primary">Learn more</LinkButton>
- */
-const LinkButton = React.forwardRef(function LinkButton({ variant = 'text', color, className, ...props }, ref) {
-    const buttonColor = variant === 'underline' ? 'text' : variant;
-    const prefixedClasses = usePrefixedClassNames('link-button', color && `link-button-${color}`, variant === 'underline' && 'link-button-underline');
-    return (jsxRuntime.jsx(Button
-    // LinkButton is polymorphic through to Button, which resolves the element
-    // from `as`. TS cannot infer that through the spread below.
-    , { 
-        // LinkButton is polymorphic through to Button, which resolves the element
-        // from `as`. TS cannot infer that through the spread below.
-        ref: ref, color: buttonColor, className: classNames(prefixedClasses, className), ...props }));
-});
-LinkButton.displayName = 'LinkButton';
-
-/**
- * The `ToggleButton` component renders a button that stays pressed until it's pressed again, and says whether it's on through `aria-pressed`.
- *
- * It's always a `<button type="button">`, so it never submits a form and
- * 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
- * `SegmentedControl`, or `Radios` for a choice that's sent with a form.
- *
- * @function
- * @param {ToggleButtonProps} props - Props for the ToggleButton component.
- * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref to the `<button>`.
- * @returns {JSX.Element} The rendered toggle button.
- * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ | APG button pattern}
- *
- * @example
- * <ToggleButton onPressedChange={setMuted}>Mute</ToggleButton>
- *
- * @example
- * <Buttons hasAddons role="group" aria-label="Text style">
- *   <ToggleButton aria-label="Bold" pressed={bold} onPressedChange={setBold}>
- *     <Icon name="bold" />
- *   </ToggleButton>
- * </Buttons>
- */
-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;
-    // 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': pressed });
-    // 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;
-        const next = !pressed;
-        onPressedChange?.(next);
-        if (!isControlled)
-            setInternalPressed(next);
-    };
-    // 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.
  *
@@ -9185,7 +9369,8 @@ const visuallyHidden = {
     border: 0,
 };
 /**
- * Works out what a status region says. Each item is announced once. Its
+ * Works out what a status region says. Each item is announced once each time
+ * it appears, so one that goes and comes back is announced again. Its
  * announcement is written `announceDelay` after it appears, or after the last
  * item to join it when several appear in quick succession, alongside whatever
  * the region still says. Once written, it stays for `announcementLifetime`,
@@ -9220,8 +9405,8 @@ function useAnnouncements(items, describe) {
     React.useEffect(() => {
         const announced = onScreenIdsRef.current;
         const appeared = items.filter(item => !announced.has(item.id));
-        // Items that have gone drop out here too. Ids are never reused, so
-        // forgetting them can't bring an old item back.
+        // Items that have gone drop out here too, so one that comes back has
+        // appeared again.
         onScreenIdsRef.current = new Set(items.map(item => item.id));
         const next = [];
         for (const item of appeared) {
@@ -9234,9 +9419,13 @@ function useAnnouncements(items, describe) {
             setAnnouncements(current => ({
                 ...current,
                 key: current.key + 1,
-                // Announcements still waiting go out with the new ones. What's
-                // already written stays put.
-                waiting: [...current.waiting, ...next],
+                // Announcements still waiting go out with the new ones, apart from
+                // one whose item came back before it was written, which the new one
+                // replaces. What's already written stays put.
+                waiting: [
+                    ...current.waiting.filter(waiting => !next.some(({ id }) => id === waiting.id)),
+                    ...next,
+                ],
             }));
         }
     }, [items, describe]);
@@ -9395,10 +9584,10 @@ function readAloud(element) {
     return name || blockLevelTags.has(element.tagName) ? ` ${text} ` : text;
 }
 /**
- * A visually hidden, polite `status` live region that a programmatic
- * container announces its items through. The container renders it from the
- * moment it mounts, whether or not it has anything to show, so the region is
- * already in the page when an announcement is written into it.
+ * A visually hidden, polite `status` live region that a container announces
+ * its items through. The container renders it from the moment it mounts,
+ * whether or not it has anything to show, so the region is already in the
+ * page when an announcement is written into it.
  *
  * The announcements are this component's own state, so writing and clearing
  * them re-renders the region and leaves the container's items alone. Each one
@@ -9415,8 +9604,10 @@ function StatusRegion({ items, describe, }) {
     // reads the whole region on every change. Each announcement is its own
     // node, and only additions are relevant by default, so with atomic off a
     // screen reader reads just what was written, and removing one announcement
-    // doesn't read out the ones still there.
-    return (jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "false", style: visuallyHidden, children: announcements.map(announcement => (jsxRuntime.jsx("div", { children: announcement.text }, announcement.id))) }));
+    // doesn't read out the ones still there. A node is keyed by its batch as
+    // well as its item, since an item that comes back can be written again
+    // while what it said before is still there.
+    return (jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "false", style: visuallyHidden, children: announcements.map(announcement => (jsxRuntime.jsx("div", { children: announcement.text }, `${announcement.batch}:${announcement.id}`))) }));
 }
 
 /**
@@ -9897,27 +10088,6 @@ const OrderedListComponent = ({ className, textColor, bgColor, children, ...prop
 };
 const OrderedList = withSubComponents(OrderedListComponent, { Item: ListItem }, 'OrderedList');
 
-/**
- * The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.
- *
- * @function
- * @param {ParagraphProps} props - Props for the Paragraph component.
- * @returns {JSX.Element} The rendered paragraph element.
- */
-const Paragraph = ({ className, textColor, bgColor, children, ...props }) => {
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    const bulmaClasses = usePrefixedClassNames();
-    const paragraphClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxRuntime.jsx("p", { className: paragraphClasses || undefined, ...rest, children: children }));
-};
-
 /**
  * The `Pre` component renders a styled `<pre>` element with Bulma helper class integration.
  *
@@ -10330,43 +10500,6 @@ isMultiline, size, children, ...props }) => {
 };
 const Tags = withSubComponents(TagsComponent, { Tag }, 'Tags');
 
-const validTitleSizes = ['1', '2', '3', '4', '5', '6'];
-const validTitleElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
-/**
- * The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`, `p`).
- *
- * @function
- * @param {TitleProps} props - Props for the Title component.
- * @returns {JSX.Element} The rendered title element.
- * @see {@link https://bulma.io/documentation/elements/title/ | Bulma Title documentation}
- */
-const Title = ({ className, size, isSpaced, as = 'h1', hasSkeleton, textColor, bgColor, children, ...props }) => {
-    /**
-     * Generates Bulma helper classes and separates out remaining props.
-     */
-    const { bulmaHelperClasses, rest } = useBulmaClasses({
-        color: textColor,
-        backgroundColor: bgColor,
-        ...props,
-    });
-    // Validate 'as' prop at runtime
-    const element = validTitleElements.includes(as) ? as : 'h1';
-    // Validate 'size' prop at runtime (numeric sizes normalize to strings)
-    const normalized = size == null ? undefined : String(size);
-    const validSize = normalized && validTitleSizes.includes(normalized)
-        ? normalized
-        : undefined;
-    const bulmaClasses = usePrefixedClassNames('title', {
-        [`is-${validSize}`]: validSize,
-        'is-spaced': isSpaced,
-        'has-skeleton': hasSkeleton,
-    });
-    const titleClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    // Determine the tag based on 'element' and 'validSize'
-    const Tag = element === 'p' ? 'p' : validSize ? `h${validSize}` : element;
-    return (jsxRuntime.jsx(Tag, { className: titleClasses, ...rest, children: children }));
-};
-
 /**
  * The `UnorderedList` component renders a styled unordered list (`<ul>`) element with Bulma helper class integration.
  *
@@ -12492,6 +12625,10 @@ const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, messa
 });
 Rate.displayName = 'Rate';
 
+// What the status region announces: the `empty` content, as the one item
+// it's handed while that content is on screen because of the user's typing.
+const typedNoMatches = [{ id: 'empty' }];
+const nothingToAnnounce = [];
 /**
  * The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.
  *
@@ -12536,6 +12673,13 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const dropdownRef = React.useRef(null);
     const [internalValue, setInternalValue] = React.useState('');
     const [isActive, setIsActive] = React.useState(false);
+    // Whether the user has typed since the list opened, since only typing
+    // gets the `empty` content announced. Closing the list resets it (during
+    // render, React's pattern for adjusting state when other state changes),
+    // so opening the list again without typing stays quiet.
+    const [typed, setTyped] = React.useState(false);
+    if (typed && !isActive)
+        setTyped(false);
     const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
     const listboxId = `${React.useId()}-listbox`;
     // Use controlled or internal value
@@ -12554,6 +12698,11 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         const displayValue = getDisplayValue(item);
         return displayValue.toLowerCase().includes(inputValue.toLowerCase());
     });
+    // The dropdown shows the options or, when nothing matches, the `empty`
+    // content. The listbox holds only options, so it's on screen only while
+    // there are some.
+    const menuOpen = isActive && (filteredData.length > 0 || !!empty);
+    const listOpen = isActive && filteredData.length > 0;
     // Handle input change
     const handleInputChange = React.useCallback((e) => {
         const newValue = e.target.value;
@@ -12561,6 +12710,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
             setInternalValue(newValue);
         }
         onInput?.(newValue);
+        setTyped(true);
         if (!isActive && newValue) {
             setIsActive(true);
         }
@@ -12711,7 +12861,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     });
     const controlClasses = usePrefixedClassNames('control', 'is-expanded', 'has-icons-right');
     const dropdownMenuClasses = usePrefixedClassNames('dropdown-menu', {
-        'is-active': isActive && (filteredData.length > 0 || !!empty),
+        'is-active': menuOpen,
     });
     const dropdownContentClass = usePrefixedClassNames('dropdown-content');
     const dropdownHeaderClass = usePrefixedClassNames('dropdown-header');
@@ -12733,24 +12883,51 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     // The listbox takes its name from the label that names the combobox, the
     // one this renders or a surrounding Field's, so the two say the same
     // thing. When no label names the combobox, or the one that does has no
-    // id to point at, the list keeps a fallback name.
-    const listOpen = isActive && (filteredData.length > 0 || !!empty);
+    // id to point at, the list keeps a fallback name. While the dropdown
+    // shows only the `empty` content there's no listbox, so the combobox is
+    // collapsed and points at nothing.
     const activeOptionId = listOpen &&
         highlightedIndex >= 0 &&
         highlightedIndex < filteredData.length
         ? `${listboxId}-${highlightedIndex}`
         : undefined;
-    const autocompleteElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxRuntime.jsxs("div", { className: controlClasses, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: placeholder, disabled: disabled, name: name, form: form, required: required, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": listOpen, "aria-controls": listOpen ? listboxId : undefined, "aria-activedescendant": activeOptionId, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), showClear && (jsxRuntime.jsx("button", { type: "button", className: iconRightClickableClass, onClick: handleClear, "aria-label": "Clear", children: jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", "aria-hidden": "true", children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), listOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, id: listboxId, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', onScroll: handleDropdownScroll, children: [header && jsxRuntime.jsx("div", { className: dropdownHeaderClass, children: header }), filteredData.length > 0 ? (filteredData.map((item, index) => {
-                            const isDisabled = typeof item !== 'string' && item.disabled;
-                            const isHighlighted = index === highlightedIndex;
-                            const itemClasses = prefixedClassNames(classPrefix, 'dropdown-item', {
-                                'is-active': isHighlighted,
-                                'is-disabled': isDisabled,
-                            });
-                            return (jsxRuntime.jsx("a", { id: `${listboxId}-${index}`, "data-index": index, className: itemClasses, onClick: () => !isDisabled && handleSelect(item), onMouseEnter: () => !isDisabled && setHighlightedIndex(index), role: "option", "aria-selected": isHighlighted, "aria-disabled": isDisabled, children: itemTemplate
-                                    ? itemTemplate(item)
-                                    : getDisplayValue(item) }, index));
-                        })) : (jsxRuntime.jsx("div", { className: emptyItemClasses, children: empty })), footer && jsxRuntime.jsx("div", { className: dropdownFooterClass, children: footer })] }) }))] }));
+    // A polite status region, in the page from the start so it's there
+    // before anything is written into it, announces the `empty` content
+    // when the user's typing leaves nothing that matches what's in the
+    // field. It follows what's on screen, so results that come in after the
+    // typing count too. It's said once each time that happens, not again on
+    // each keystroke while nothing matches. An empty field isn't a search,
+    // so it stays quiet then, even with no data. While `loading`, or a
+    // loading Control around it, says results are on their way, it waits,
+    // and it's said once loading ends with nothing matching.
+    const emptyItems = typed &&
+        menuOpen &&
+        !listOpen &&
+        !!inputValue &&
+        !loading &&
+        !controlLoading
+        ? typedNoMatches
+        : nothingToAnnounce;
+    // The region reads the text on screen, whatever `empty` renders.
+    const emptyRef = React.useRef(null);
+    const describeEmpty = React.useCallback(() => {
+        const node = emptyRef.current;
+        /* istanbul ignore if: it's only announced while it's on screen */
+        if (!node)
+            return null;
+        return spokenText(node);
+    }, []);
+    const autocompleteElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxRuntime.jsxs("div", { className: controlClasses, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: placeholder, disabled: disabled, name: name, form: form, required: required, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": listOpen, "aria-controls": listOpen ? listboxId : undefined, "aria-activedescendant": activeOptionId, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), showClear && (jsxRuntime.jsx("button", { type: "button", className: iconRightClickableClass, onClick: handleClear, "aria-label": "Clear", children: jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", "aria-hidden": "true", children: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), menuOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, onScroll: handleDropdownScroll, children: [header && jsxRuntime.jsx("div", { className: dropdownHeaderClass, children: header }), listOpen ? (jsxRuntime.jsx("div", { id: listboxId, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', children: filteredData.map((item, index) => {
+                                const isDisabled = typeof item !== 'string' && item.disabled;
+                                const isHighlighted = index === highlightedIndex;
+                                const itemClasses = prefixedClassNames(classPrefix, 'dropdown-item', {
+                                    'is-active': isHighlighted,
+                                    'is-disabled': isDisabled,
+                                });
+                                return (jsxRuntime.jsx("a", { id: `${listboxId}-${index}`, "data-index": index, className: itemClasses, onClick: () => !isDisabled && handleSelect(item), onMouseEnter: () => !isDisabled && setHighlightedIndex(index), role: "option", "aria-selected": isHighlighted, "aria-disabled": isDisabled, children: itemTemplate
+                                        ? itemTemplate(item)
+                                        : getDisplayValue(item) }, index));
+                            }) })) : (jsxRuntime.jsx("div", { ref: emptyRef, className: emptyItemClasses, children: empty })), footer && jsxRuntime.jsx("div", { className: dropdownFooterClass, children: footer })] }) })), jsxRuntime.jsx(StatusRegion, { items: emptyItems, describe: describeEmpty })] }));
     if (!insideField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
     }
@@ -19412,6 +19589,11 @@ exports.Dropdown = Dropdown;
 exports.DropdownDivider = DropdownDivider;
 exports.DropdownItem = DropdownItem;
 exports.Emphasis = Emphasis;
+exports.EmptyState = EmptyState;
+exports.EmptyStateActions = EmptyStateActions;
+exports.EmptyStateDescription = EmptyStateDescription;
+exports.EmptyStateIndicator = EmptyStateIndicator;
+exports.EmptyStateTitle = EmptyStateTitle;
 exports.Field = Field;
 exports.FieldBody = FieldBody;
 exports.FieldLabel = FieldLabel;