@allxsmith/bestax-bulma 5.12.0 → 5.14.0

package/dist/index.esm.js

@@ -322,6 +322,7 @@ const validDisplays = [
     'inline',
     'inline-block',
     'inline-flex',
+    'grid',
 ];
 /**
  * Valid Bulma visibility classes.
@@ -410,8 +411,12 @@ const validFlexGrowShrink = ['0', '1', '2', '3', '4', '5'];
 const validViewports = [
     'mobile',
     'tablet',
+    'tablet-only',
+    'touch',
     'desktop',
+    'desktop-only',
     'widescreen',
+    'widescreen-only',
     'fullhd',
 ];
 /**
@@ -431,9 +436,17 @@ const createBulmaClassHelpers = (classPrefix, viewport) => {
         classes.push(classPrefix ? `${classPrefix}${className}` : className);
     };
     // Helper to add class with optional viewport
-    const addClass = (prefix, value, validValues, supportsViewport = false) => {
+    //
+    // `supportedViewports` narrows which viewports may be suffixed onto this
+    // class. It defaults to every viewport, but a few Bulma helper families
+    // (notably `is-size-*`, which ships no `-only` bands) support only a subset,
+    // so passing the emitting set keeps us from producing dead classes.
+    const addClass = (prefix, value, validValues, supportsViewport = false, supportedViewports = validViewports) => {
         if (value && validValues.includes(value)) {
-            const className = supportsViewport && viewport && validViewports.includes(viewport)
+            const className = supportsViewport &&
+                viewport &&
+                validViewports.includes(viewport) &&
+                supportedViewports.includes(viewport)
                 ? `${prefix}-${value}-${viewport}`
                 : `${prefix}-${value}`;
             addPrefixedClass(className);
@@ -558,6 +571,19 @@ const useSpacingClasses = (props) => {
     }, [classPrefix, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py]);
 };
 
+/**
+ * Viewports Bulma generates `is-size-*` classes for. Unlike text alignment,
+ * text size ships no `-only` bands (`tablet-only`/`desktop-only`/`widescreen-only`),
+ * so the `viewport` prop's suffix is limited to these on the `is-size` path.
+ */
+const sizeSupportedViewports = [
+    'mobile',
+    'tablet',
+    'touch',
+    'desktop',
+    'widescreen',
+    'fullhd',
+];
 /**
  * A hook that generates Bulma typography helper classes, including
  * viewport-specific text size and alignment variants.
@@ -578,8 +604,11 @@ const useTypographyClasses = (props) => {
     return useMemo(() => {
         const { classes, addPrefixedClass, addClass, addClassNoViewport } = createBulmaClassHelpers(classPrefix, viewport);
         // Typography
-        addClass('is-size', textSize, validTextSizes, true); // supports viewport
-        addClass('has-text', textAlign, validAlignments$1, true); // supports viewport
+        // Bulma emits `is-size-*` for the six main/`touch` breakpoints but not the
+        // three `-only` bands, so restrict the viewport suffix to the ones it ships
+        // — otherwise `viewport="tablet-only"` would render a dead `is-size-N-tablet-only`.
+        addClass('is-size', textSize, validTextSizes, true, sizeSupportedViewports); // supports viewport (no `-only` bands)
+        addClass('has-text', textAlign, validAlignments$1, true); // supports viewport (all bands)
         addClassNoViewport('is', textTransform, validTextTransforms); // no viewport support
         addClassNoViewport('has-text-weight', textWeight, validTextWeights); // no viewport support
         addClassNoViewport('is-family', fontFamily, validFontFamilies); // no viewport support
@@ -645,7 +674,7 @@ const useTypographyClasses = (props) => {
  */
 const useVisibilityClasses = (props) => {
     const { classPrefix } = useConfig();
-    const { visibility, visibilityMobile, visibilityTablet, visibilityDesktop, visibilityWidescreen, visibilityFullhd, display, displayMobile, displayTablet, displayDesktop, displayWidescreen, displayFullhd, viewport, } = props;
+    const { visibility, visibilityMobile, visibilityTablet, visibilityTabletOnly, visibilityTouch, visibilityDesktop, visibilityDesktopOnly, visibilityWidescreen, visibilityWidescreenOnly, visibilityFullhd, display, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, viewport, } = props;
     return useMemo(() => {
         const { classes, addPrefixedClass, addClass } = createBulmaClassHelpers(classPrefix, viewport);
         // Viewport-specific visibility
@@ -662,8 +691,12 @@ const useVisibilityClasses = (props) => {
         };
         addViewportSpecificVisibilityClass(visibilityMobile, '-mobile');
         addViewportSpecificVisibilityClass(visibilityTablet, '-tablet');
+        addViewportSpecificVisibilityClass(visibilityTabletOnly, '-tablet-only');
+        addViewportSpecificVisibilityClass(visibilityTouch, '-touch');
         addViewportSpecificVisibilityClass(visibilityDesktop, '-desktop');
+        addViewportSpecificVisibilityClass(visibilityDesktopOnly, '-desktop-only');
         addViewportSpecificVisibilityClass(visibilityWidescreen, '-widescreen');
+        addViewportSpecificVisibilityClass(visibilityWidescreenOnly, '-widescreen-only');
         addViewportSpecificVisibilityClass(visibilityFullhd, '-fullhd');
         // Visibility and Display
         // Handle viewport-specific display properties first (they take precedence)
@@ -680,14 +713,22 @@ const useVisibilityClasses = (props) => {
         // Apply viewport-specific display classes
         addDisplayClass(displayMobile, '-mobile');
         addDisplayClass(displayTablet, '-tablet');
+        addDisplayClass(displayTabletOnly, '-tablet-only');
+        addDisplayClass(displayTouch, '-touch');
         addDisplayClass(displayDesktop, '-desktop');
+        addDisplayClass(displayDesktopOnly, '-desktop-only');
         addDisplayClass(displayWidescreen, '-widescreen');
+        addDisplayClass(displayWidescreenOnly, '-widescreen-only');
         addDisplayClass(displayFullhd, '-fullhd');
         // Apply legacy display/viewport combination if no viewport-specific display props are set
         const hasViewportSpecificDisplay = !!(displayMobile ||
             displayTablet ||
+            displayTabletOnly ||
+            displayTouch ||
             displayDesktop ||
+            displayDesktopOnly ||
             displayWidescreen ||
+            displayWidescreenOnly ||
             displayFullhd);
         if (!hasViewportSpecificDisplay) {
             // Legacy display handling
@@ -720,14 +761,22 @@ const useVisibilityClasses = (props) => {
         visibility,
         visibilityMobile,
         visibilityTablet,
+        visibilityTabletOnly,
+        visibilityTouch,
         visibilityDesktop,
+        visibilityDesktopOnly,
         visibilityWidescreen,
+        visibilityWidescreenOnly,
         visibilityFullhd,
         display,
         displayMobile,
         displayTablet,
+        displayTabletOnly,
+        displayTouch,
         displayDesktop,
+        displayDesktopOnly,
         displayWidescreen,
+        displayWidescreenOnly,
         displayFullhd,
         viewport,
     ]);
@@ -756,7 +805,7 @@ const useVisibilityClasses = (props) => {
  */
 const useFlexboxClasses = (props) => {
     const { classPrefix } = useConfig();
-    const { flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, display, displayMobile, displayTablet, displayDesktop, displayWidescreen, displayFullhd, } = props;
+    const { flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, display, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, } = props;
     return useMemo(() => {
         const { classes, addClassNoViewport } = createBulmaClassHelpers(classPrefix);
         // Flexbox
@@ -766,10 +815,18 @@ const useFlexboxClasses = (props) => {
             displayMobile === 'inline-flex' ||
             displayTablet === 'flex' ||
             displayTablet === 'inline-flex' ||
+            displayTabletOnly === 'flex' ||
+            displayTabletOnly === 'inline-flex' ||
+            displayTouch === 'flex' ||
+            displayTouch === 'inline-flex' ||
             displayDesktop === 'flex' ||
             displayDesktop === 'inline-flex' ||
+            displayDesktopOnly === 'flex' ||
+            displayDesktopOnly === 'inline-flex' ||
             displayWidescreen === 'flex' ||
             displayWidescreen === 'inline-flex' ||
+            displayWidescreenOnly === 'flex' ||
+            displayWidescreenOnly === 'inline-flex' ||
             displayFullhd === 'flex' ||
             displayFullhd === 'inline-flex';
         if (hasFlexDisplay) {
@@ -799,8 +856,12 @@ const useFlexboxClasses = (props) => {
         display,
         displayMobile,
         displayTablet,
+        displayTabletOnly,
+        displayTouch,
         displayDesktop,
+        displayDesktopOnly,
         displayWidescreen,
+        displayWidescreenOnly,
         displayFullhd,
     ]);
 };
@@ -913,7 +974,7 @@ const useOtherClasses = (props) => {
  * // rest: { className: 'custom-class' }
  */
 const useBulmaClasses = (props) => {
-    const { color, backgroundColor, colorShade, backgroundColorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overlay, interaction, cursor, radius, shadow, responsive, viewport, displayMobile, displayTablet, displayDesktop, displayWidescreen, displayFullhd, textSizeMobile, textSizeTablet, textSizeDesktop, textSizeWidescreen, textSizeFullhd, textAlignMobile, textAlignTablet, textAlignDesktop, textAlignWidescreen, textAlignFullhd, visibilityMobile, visibilityTablet, visibilityDesktop, visibilityWidescreen, visibilityFullhd, skeleton, clearfix, relative, fullHeight, ...rest } = props;
+    const { color, backgroundColor, colorShade, backgroundColorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overlay, interaction, cursor, radius, shadow, responsive, viewport, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, textSizeMobile, textSizeTablet, textSizeDesktop, textSizeWidescreen, textSizeFullhd, textAlignMobile, textAlignTablet, textAlignDesktop, textAlignWidescreen, textAlignFullhd, visibilityMobile, visibilityTablet, visibilityTabletOnly, visibilityTouch, visibilityDesktop, visibilityDesktopOnly, visibilityWidescreen, visibilityWidescreenOnly, visibilityFullhd, skeleton, clearfix, relative, fullHeight, ...rest } = props;
     const colorClasses = useColorClasses({
         color,
         colorShade,
@@ -959,14 +1020,22 @@ const useBulmaClasses = (props) => {
         visibility,
         visibilityMobile,
         visibilityTablet,
+        visibilityTabletOnly,
+        visibilityTouch,
         visibilityDesktop,
+        visibilityDesktopOnly,
         visibilityWidescreen,
+        visibilityWidescreenOnly,
         visibilityFullhd,
         display,
         displayMobile,
         displayTablet,
+        displayTabletOnly,
+        displayTouch,
         displayDesktop,
+        displayDesktopOnly,
         displayWidescreen,
+        displayWidescreenOnly,
         displayFullhd,
         viewport,
     });
@@ -982,8 +1051,12 @@ const useBulmaClasses = (props) => {
         display,
         displayMobile,
         displayTablet,
+        displayTabletOnly,
+        displayTouch,
         displayDesktop,
+        displayDesktopOnly,
         displayWidescreen,
+        displayWidescreenOnly,
         displayFullhd,
     });
     const otherClasses = useOtherClasses({
@@ -1707,6 +1780,8 @@ const isBrowser$1 = (win, doc) => typeof win !== 'undefined' && typeof doc !== '
 const DropdownComponent = ({ label, children, className, menuClassName, active: activeProp, up, right, hoverable, disabled, onActiveChange, closeOnClick = true, id, ...props }) => {
     const [active, setActive] = useState(!!activeProp);
     const dropdownRef = useRef(null);
+    const triggerRef = useRef(null);
+    const pendingFocusRef = useRef(null);
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     // Generate Bulma classes with prefix
     const bulmaClasses = usePrefixedClassNames('dropdown', {
@@ -1755,8 +1830,126 @@ const DropdownComponent = ({ label, children, className, menuClassName, active:
             onActiveChange?.(false);
         }
     };
+    const getMenuItems = () => {
+        /* istanbul ignore next: dropdownRef.current is never null once mounted */
+        if (!dropdownRef.current)
+            return [];
+        return Array.from(dropdownRef.current.querySelectorAll('[role="menuitem"]')).filter(el => !el.hasAttribute('disabled') &&
+            el.getAttribute('aria-disabled') !== 'true');
+    };
+    // Focus the pending menu item once the menu becomes visible; the item is
+    // unfocusable while `display: none` applies, so this must wait for the
+    // `is-active` class to actually land in the DOM.
+    useEffect(() => {
+        if (!active || !pendingFocusRef.current)
+            return;
+        const items = getMenuItems();
+        if (items.length) {
+            const index = pendingFocusRef.current === 'first' ? 0 : items.length - 1;
+            items[index].focus();
+        }
+        pendingFocusRef.current = null;
+    }, [active]);
+    const handleTriggerKeyDown = (e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                pendingFocusRef.current = 'first';
+                if (!active) {
+                    setActive(true);
+                    onActiveChange?.(true);
+                }
+                else {
+                    const items = getMenuItems();
+                    if (items.length)
+                        items[0].focus();
+                    pendingFocusRef.current = null;
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                pendingFocusRef.current = 'last';
+                if (!active) {
+                    setActive(true);
+                    onActiveChange?.(true);
+                }
+                else {
+                    const items = getMenuItems();
+                    if (items.length)
+                        items[items.length - 1].focus();
+                    pendingFocusRef.current = null;
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (!active) {
+                    pendingFocusRef.current = 'first';
+                    setActive(true);
+                    onActiveChange?.(true);
+                }
+                else {
+                    setActive(false);
+                    onActiveChange?.(false);
+                }
+                break;
+            case 'Escape':
+                if (active) {
+                    e.preventDefault();
+                    setActive(false);
+                    onActiveChange?.(false);
+                }
+                break;
+        }
+    };
+    const handleMenuKeyDown = (e) => {
+        // Escape and Tab close the menu regardless of whether it has any focusable
+        // items — an empty or all-disabled menu must still honor the close contract.
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            setActive(false);
+            onActiveChange?.(false);
+            triggerRef.current?.focus();
+            return;
+        }
+        if (e.key === 'Tab') {
+            setActive(false);
+            onActiveChange?.(false);
+            return;
+        }
+        const items = getMenuItems();
+        if (!items.length)
+            return;
+        const currentIndex = items.indexOf(document.activeElement);
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                const next = currentIndex >= 0 ? (currentIndex + 1) % items.length : 0;
+                items[next].focus();
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                const prev = currentIndex >= 0
+                    ? (currentIndex - 1 + items.length) % items.length
+                    : items.length - 1;
+                items[prev].focus();
+                break;
+            }
+            case 'Home':
+                e.preventDefault();
+                items[0].focus();
+                break;
+            case 'End':
+                e.preventDefault();
+                items[items.length - 1].focus();
+                break;
+        }
+    };
     const dropdownClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxs("div", { className: dropdownClasses, ref: dropdownRef, id: id, "data-testid": "dropdown-root", ...rest, children: [jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxs("button", { className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, disabled: disabled, type: "button", children: [jsx("span", { children: label }), jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", children: jsx("div", { className: usePrefixedClassNames('dropdown-content'), onClick: handleMenuClick, tabIndex: -1, children: children }) })] }));
+    return (jsxs("div", { className: dropdownClasses, ref: dropdownRef, id: id, "data-testid": "dropdown-root", ...rest, children: [jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxs("button", { ref: triggerRef, className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, disabled: disabled, type: "button", children: [jsx("span", { children: label }), jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", onKeyDown: handleMenuKeyDown, children: jsx("div", { className: usePrefixedClassNames('dropdown-content'), onClick: handleMenuClick, tabIndex: -1, children: children }) })] }));
 };
 /**
  * Bulma Dropdown item.
@@ -2085,6 +2278,7 @@ const Modal = withSubComponents(ModalRoot, {
     Close: ModalClose,
 }, 'Modal');
 
+const NavbarDropdownContext = React.createContext(null);
 /**
  * The `Navbar` component implements Bulma's powerful, responsive navigation bar for your Bulma React UI.
  *
@@ -2208,9 +2402,45 @@ const NavbarLink = ({ className, as: Component = 'a', arrowless, textColor, bgCo
         backgroundColor: bgColor,
         ...props,
     });
+    const dropdownContext = useContext(NavbarDropdownContext);
+    const hasHref = rest.href !== undefined;
+    const isNativeInteractive = Component === 'button' || hasHref;
+    const handleKeyDown = (e) => {
+        rest.onKeyDown?.(e);
+        if (!dropdownContext || e.defaultPrevented)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            dropdownContext.toggle();
+        }
+        else if (e.key === 'Escape' && dropdownContext.active) {
+            e.preventDefault();
+            dropdownContext.close();
+        }
+    };
+    // When the link is not natively interactive (no `href`, not a `<button>`) it
+    // renders as `role="button"`, so a mouse/touch click has no default action to
+    // open the dropdown. Compose the caller's handler and toggle the dropdown
+    // unless the caller prevented the default. Native links/buttons keep their own
+    // click semantics (navigation / the caller's handler).
+    const handleClick = (e) => {
+        rest.onClick?.(e);
+        if (!dropdownContext || isNativeInteractive || e.defaultPrevented)
+            return;
+        dropdownContext.toggle();
+    };
     return (jsx(Component, { className: classNames(usePrefixedClassNames('navbar-link', {
             'is-arrowless': arrowless,
-        }), bulmaHelperClasses, className), ...rest, children: children }));
+        }), bulmaHelperClasses, className), ...rest, ...(dropdownContext && {
+            'aria-haspopup': 'true',
+            'aria-expanded': dropdownContext.active,
+            onKeyDown: handleKeyDown,
+            ...(!isNativeInteractive && {
+                role: 'button',
+                tabIndex: 0,
+                onClick: handleClick,
+            }),
+        }), children: children }));
 };
 /**
  * Dropdown parent (with options for hover, up, right, active)
@@ -2219,12 +2449,34 @@ const NavbarLink = ({ className, as: Component = 'a', arrowless, textColor, bgCo
  * @param {NavbarDropdownProps} props - Props for the NavbarDropdown component.
  * @returns {JSX.Element} The rendered dropdown.
  */
-const NavbarDropdown = ({ className, right, up, hoverable, active, children, ...props }) => (jsx("div", { className: classNames(usePrefixedClassNames('navbar-item', 'has-dropdown', {
-        'has-dropdown-up': up,
-        'is-right': right,
-        'is-hoverable': hoverable,
-        'is-active': active,
-    }), className), ...props, children: children }));
+const NavbarDropdown = ({ className, right, up, hoverable, active: activeProp, onActiveChange, children, ...props }) => {
+    const [active, setActive] = useState(!!activeProp);
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- syncing to controlled prop
+        if (typeof activeProp === 'boolean')
+            setActive(activeProp);
+    }, [activeProp]);
+    // Keep `onActiveChange` out of the state updater (a pure function) so Strict
+    // Mode's double-invoked updaters don't double-fire it — mirrors `Dropdown`.
+    const toggle = () => {
+        const next = !active;
+        setActive(next);
+        onActiveChange?.(next);
+    };
+    const close = () => {
+        /* istanbul ignore next: close() is only invoked once already active */
+        if (!active)
+            return;
+        setActive(false);
+        onActiveChange?.(false);
+    };
+    return (jsx(NavbarDropdownContext.Provider, { value: { active, toggle, close }, children: jsx("div", { className: classNames(usePrefixedClassNames('navbar-item', 'has-dropdown', {
+                'has-dropdown-up': up,
+                'is-right': right,
+                'is-hoverable': hoverable,
+                'is-active': active,
+            }), className), ...props, children: children }) }));
+};
 /**
  * Dropdown menu container
  *
@@ -2534,8 +2786,37 @@ function getIconClasses(library, name, variant, features) {
 const Icon = ({ className, textColor, bgColor, name, library, variant, features, libraryFeatures, // Deprecated but maintained for backward compatibility
 size, ariaLabel = 'icon', style, icon, // Capture and exclude the deprecated 'icon' prop from DOM
 color: _color, // Exclude 'color' prop if passed directly
-containerClassName, ...restProps }) => {
-    // Handle deprecated 'icon' prop - parse it to extract the actual name
+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);
+    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 (jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest, children: children }));
+    }
+    // `name` is guaranteed once `children` is absent (`IconProps` is a discriminated union of
+    // the two, and `IconChildrenProps['children']` excludes `undefined` so `children={undefined}`
+    // can't slip past into this branch) — the cast only matters for legacy callers that bypass
+    // the type and rely solely on the deprecated `icon` prop below.
     let finalName = name;
     if (!name && icon) {
         // If icon prop is provided instead of name, try to parse it
@@ -2554,31 +2835,16 @@ containerClassName, ...restProps }) => {
             }
         }
     }
-    // Get the default icon library from context, fallback to 'fa' if not set
-    const defaultLibrary = useIconLibrary();
     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);
-    /**
-     * 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 ternaries 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);
+    if (!finalName) {
+        // No glyph to name. Unreachable through the public type, but a plain-JS caller (or one
+        // that casts) can land here, and building a class off an absent name produced a bogus
+        // `fa-undefined` glyph. Render the bare container instead, matching the `children` branch.
+        return (jsx("span", { className: iconContainerClasses, "aria-label": ariaLabel, style: style, ...rest }));
+    }
     // Backward compatibility: if libraryFeatures is provided, parse it for variant and features
     let finalVariant = variant;
     let finalFeatures = features;
@@ -2697,8 +2963,9 @@ const PanelTabs = ({ className, children, ...props }) => (jsx("p", { className:
  */
 const PanelBlock = ({ className, active, children, ...props }) => (jsx("a", { className: classNames(usePrefixedClassNames('panel-block', { 'is-active': active }), className), ...props, children: children }));
 /**
- * Icon wrapper with panel styling (renders as `<span class="panel-icon"><i/></span>`).
- * Accepts all Icon props (`name`, `variant`, `features`, etc.)
+ * Icon wrapper with panel styling (renders as `<span class="panel-icon">`, containing an
+ * `<i/>` when a `name` is given, or the custom node passed as `children`).
+ * Accepts all Icon props (`name`, `variant`, `features`, etc.), or `children` for a custom node.
  *
  * @function
  * @param {PanelIconProps} props - Props for the PanelIcon component.
@@ -4873,6 +5140,16 @@ const Figure = withSubComponents(FigureComponent, {
     Caption: FigureCaption,
 }, 'Figure');
 
+/**
+ * Distinguishes an `IconProps` object from a plain custom node (an inline SVG, a `react-icons`
+ * component, …) passed to a slot that accepts either.
+ */
+function isIconProps$1(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        !React.isValidElement(value) &&
+        ('name' in value || 'children' in value));
+}
 /**
  * The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
  *
@@ -4892,7 +5169,9 @@ const IconTextComponent = ({ className, textColor, color, bgColor, iconProps, ch
     });
     const bulmaClasses = usePrefixedClassNames('icon-text');
     const iconTextClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsx("span", { className: iconTextClasses, ...rest, children: items ? (items.map((item, index) => (jsxs(React.Fragment, { children: [jsx(Icon, { ...item.iconProps }), item.text && jsx("span", { children: item.text })] }, index)))) : (jsxs(Fragment, { children: [iconProps && jsx(Icon, { ...iconProps }), children && jsx("span", { children: children })] })) }));
+    return (jsx("span", { className: iconTextClasses, ...rest, children: items ? (items.map((item, index) => (jsxs(React.Fragment, { children: [item.iconProps &&
+                    (isIconProps$1(item.iconProps) ? (jsx(Icon, { ...item.iconProps })) : (jsx(Icon, { children: item.iconProps }))), item.text && jsx("span", { children: item.text })] }, index)))) : (jsxs(Fragment, { children: [iconProps &&
+                    (isIconProps$1(iconProps) ? (jsx(Icon, { ...iconProps })) : (jsx(Icon, { children: iconProps }))), children && jsx("span", { children: children })] })) }));
 };
 const IconText = withSubComponents(IconTextComponent, { Icon }, 'IconText');
 
@@ -5599,21 +5878,22 @@ const Tag = ({ className, color, size, isLight, isRounded, isDelete, isHoverable
 
 const validTagsSizes = ['medium', 'large'];
 /**
- * The `Tags` component groups multiple `Tag` components together in a horizontal (or multiline) Bulma-styled container.
+ * The `Tags` component groups multiple `Tag` components together in a Bulma-styled container that wraps onto multiple lines by default.
  *
  * @function
  * @param {TagsProps} props - Props for the Tags component.
  * @returns {JSX.Element} The rendered tags container.
  * @see {@link https://bulma.io/documentation/elements/tag/#list-of-tags | Bulma Tags documentation}
  */
-const TagsComponent = ({ className, hasAddons, isMultiline, size, children, ...props }) => {
+const TagsComponent = ({ className, hasAddons, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- accepted for backwards compatibility, deprecated no-op (no `are-multiline` CSS ships)
+isMultiline, size, children, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const bulmaClasses = usePrefixedClassNames('tags', {
         'has-addons': hasAddons,
-        'are-multiline': isMultiline,
         [`are-${size}`]: size && validTagsSizes.includes(size),
     });
     const tagsClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
@@ -5802,6 +6082,16 @@ const Checkbox = forwardRef(({ color, size, className, children, textColor, disa
 });
 Checkbox.displayName = 'Checkbox';
 
+/**
+ * Distinguishes an `IconProps` object from a plain custom node (an inline SVG, a `react-icons`
+ * component, …) passed to a slot that accepts either.
+ */
+function isIconProps(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        !React.isValidElement(value) &&
+        ('name' in value || 'children' in value));
+}
 const allowedColors = [...validColors, 'inherit', 'current'];
 /**
  * The `Control` component is a Bulma-styled wrapper for form controls (`Input`, `Select`, `TextArea`, etc.), supporting icons (left/right), loading state, expansion, size, and Bulma helper props for layout and color.
@@ -5833,15 +6123,19 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
         backgroundColor: safeBgColor,
         ...restProps,
     });
-    // Prepare icon props for the shortcut
-    const leftIconProps = iconLeft ||
+    // Prepare icon props for the shortcut. A truthiness test (not `!== undefined`)
+    // so a falsy node from the idiomatic `iconLeft={cond && <Node/>}` / `iconLeft={maybe ?? null}`
+    // pattern counts as "no icon" — otherwise `false`/`null` would reserve the icon column and
+    // mount an empty `.icon` span. A falsy `iconLeft` also correctly falls through to the
+    // `iconLeftName` shortcut, matching the pre-node behavior.
+    const leftIconValue = iconLeft ||
         (iconLeftName
             ? {
                 name: iconLeftName,
                 size: iconLeftSize,
             }
             : undefined);
-    const rightIconProps = iconRight ||
+    const rightIconValue = iconRight ||
         (iconRightName
             ? {
                 name: iconRightName,
@@ -5849,15 +6143,17 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
             }
             : undefined);
     const mainClass = usePrefixedClassNames('control', {
-        'has-icons-left': hasIconsLeft || !!leftIconProps,
-        'has-icons-right': hasIconsRight || !!rightIconProps,
+        'has-icons-left': hasIconsLeft || !!leftIconValue,
+        'has-icons-right': hasIconsRight || !!rightIconValue,
         'is-loading': isLoading,
         'is-expanded': isExpanded,
         [`is-${size}`]: !!size,
     });
     const controlClass = classNames(mainClass, bulmaHelperClasses, className);
     // --- FIX: Spread both restProps (for data-testid, etc) AND rest (from useBulmaClasses) ---
-    return (jsx(ControlProvider, { value: true, children: jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [children, leftIconProps && leftIconProps.name && (jsx(Icon, { ...leftIconProps, className: prefixedClassNames(classPrefix, 'is-left') })), rightIconProps && rightIconProps.name && (jsx(Icon, { ...rightIconProps, className: prefixedClassNames(classPrefix, 'is-right') }))] }) }));
+    return (jsx(ControlProvider, { value: true, children: jsxs(Component, { className: controlClass, ref: ref, ...restProps, ...rest, children: [children, leftIconValue &&
+                    (isIconProps(leftIconValue) ? (jsx(Icon, { ...leftIconValue, className: prefixedClassNames(classPrefix, 'is-left') })) : (jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-left'), children: leftIconValue }))), rightIconValue &&
+                    (isIconProps(rightIconValue) ? (jsx(Icon, { ...rightIconValue, className: prefixedClassNames(classPrefix, 'is-right') })) : (jsx(Icon, { className: prefixedClassNames(classPrefix, 'is-right'), children: rightIconValue })))] }) }));
 });
 Control.displayName = 'Control';