@allxsmith/bestax-bulma 5.58.0 → 5.60.0

package/dist/index.cjs

@@ -970,8 +970,9 @@ const useVisibilityClasses = (props) => {
 /**
  * A hook that generates Bulma flexbox helper classes. Flex container helpers
  * (direction, wrap, justify/align content, align items) are only emitted when
- * one of the display props indicates a flex display; flex item helpers
- * (align self, grow, shrink) are always emitted.
+ * one of the display props indicates a flex display, or when `options` says
+ * the element is a flex container by its own CSS; flex item helpers (align
+ * self, grow, shrink) are always emitted.
  *
  * Note: this hook reads the display props purely as a gate and never emits
  * display classes — `is-flex` and friends come from useVisibilityClasses (or
@@ -979,6 +980,7 @@ const useVisibilityClasses = (props) => {
  *
  * @function useFlexboxClasses
  * @param props - Flexbox-related Bulma helper props.
+ * @param options - Whether the element is a flex container without a display prop.
  * @returns A space-separated string of flexbox helper classes.
  * @example
  * const flexboxClasses = useFlexboxClasses({
@@ -987,14 +989,24 @@ const useVisibilityClasses = (props) => {
  * });
  * // flexboxClasses: 'is-justify-content-center'
  * // ('is-flex' itself comes from useVisibilityClasses/useBulmaClasses)
- */
-const useFlexboxClasses = (props) => {
+ *
+ * @example
+ * // An element whose own stylesheet makes it a flex container
+ * const flexboxClasses = useFlexboxClasses(
+ *   { alignItems: 'center' },
+ *   { flexContainer: true }
+ * );
+ * // flexboxClasses: 'is-align-items-center'
+ */
+const useFlexboxClasses = (props, options = {}) => {
     const { classPrefix } = useConfig();
+    const { flexContainer = false } = options;
     const { flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, display, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, } = props;
     return React.useMemo(() => {
         const { classes, addClassNoViewport } = createBulmaClassHelpers(classPrefix);
         // Flexbox
-        const hasFlexDisplay = display === 'flex' ||
+        const hasFlexDisplay = flexContainer ||
+            display === 'flex' ||
             display === 'inline-flex' ||
             displayMobile === 'flex' ||
             displayMobile === 'inline-flex' ||
@@ -1030,6 +1042,7 @@ const useFlexboxClasses = (props) => {
         return classNames(classes);
     }, [
         classPrefix,
+        flexContainer,
         flexDirection,
         flexWrap,
         justifyContent,
@@ -1170,8 +1183,14 @@ const useOtherClasses = (props) => {
  * `background-color: var(--bulma-scheme-*)` style (`undefined` for all other
  * inputs). Merge it with a user `style` prop via `mergeBulmaStyles`.
  *
+ * The flex container props (`flexDirection`, `flexWrap`, `justifyContent`,
+ * `alignContent`, `alignItems`) emit a class only on a flex container: when a
+ * `display` prop is `flex` or `inline-flex`, or when `options.flexContainer`
+ * says the element's own stylesheet makes it one.
+ *
  * @function useBulmaClasses
  * @param props - Combination of BulmaClassesPropsWithScheme and additional props.
+ * @param options - Passed to `useFlexboxClasses`: whether the element is a flex container without a display prop.
  * @returns An object containing the Bulma helper classes, optional helper
  * styles, and unhandled props.
  * @example
@@ -1184,7 +1203,7 @@ const useOtherClasses = (props) => {
  * // bulmaHelperStyles: { backgroundColor: 'var(--bulma-scheme-main-bis)' }
  * // rest: { className: 'custom-class' }
  */
-const useBulmaClasses = (props) => {
+const useBulmaClasses = (props, options) => {
     const { color, backgroundColor, colorShade, backgroundColorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, gap, columnGap, rowGap, gapless, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overflowX, overflowY, 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, pos, relative, fullHeight, aspectRatio, ...rest } = props;
     const colorClasses = useColorClasses({
         color,
@@ -1273,7 +1292,7 @@ const useBulmaClasses = (props) => {
         displayWidescreen,
         displayWidescreenOnly,
         displayFullhd,
-    });
+    }, options);
     const otherClasses = useOtherClasses({
         float,
         overflow,
@@ -3570,129 +3589,6 @@ const Button = React.forwardRef(function Button(props, ref) {
 });
 Button.displayName = 'Button';
 
-/**
- * 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');
-
 /**
  * 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
@@ -3940,6 +3836,231 @@ color, containerClassName, children, ...restProps }) => {
     return (jsxRuntime.jsx("span", { className: iconContainerClasses, ...a11yProps, style: style, ...rest, children: jsxRuntime.jsx("i", { className: iClasses }) }));
 };
 
+/** Whether a string has something in it besides spaces. */
+const hasText = (value) => typeof value === 'string' && value.trim() !== '';
+/** Whether a string is only spaces, which JSX leaves between elements. */
+const isBlank = (node) => typeof node === 'string' && node.trim() === '';
+/**
+ * The glyph in one `.icon`, which is what Bulma keeps square: an `<Icon>` as
+ * given, Fragments opened up and blank text left out, and anything else
+ * inside an `Icon`. Null when there's nothing to draw, so an empty Fragment
+ * or array counts as no glyph.
+ */
+function iconOf(node) {
+    const items = flattenChildren(node).filter(item => !isBlank(item));
+    if (items.length === 0)
+        return null;
+    const [only] = items;
+    if (items.length === 1 && React.isValidElement(only) && only.type === Icon) {
+        return only;
+    }
+    return jsxRuntime.jsx(Icon, { children: items });
+}
+/** The glyph `icon` draws: a string is an `Icon` name, the rest as `iconOf`. */
+function iconFromProp(icon) {
+    if (typeof icon !== 'string')
+        return iconOf(icon);
+    return hasText(icon) ? jsxRuntime.jsx(Icon, { name: icon }) : null;
+}
+/**
+ * The `IconButton` component renders a button that shows only an icon, and requires a name for it.
+ *
+ * It renders through `Button`, so it takes everything `Button` takes, and
+ * adds the icon and a name the types require: `aria-label`, or
+ * `aria-labelledby` in its place. Bulma keeps a button whose only child is an
+ * `.icon` square at every size, and `isRounded` makes it a circle. It has no
+ * tooltip of its own: wrap it in `Tooltip` for a description.
+ *
+ * @function
+ * @param {IconButtonProps} props - Props for the IconButton 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}
+ *
+ * @example
+ * <IconButton icon="trash" aria-label="Delete" color="danger" />
+ *
+ * @example
+ * <IconButton aria-label="Settings">
+ *   <Icon name="cog" />
+ * </IconButton>
+ */
+const IconButton = React.forwardRef(function IconButton(props, ref) {
+    const { icon, children, className, ...rest } = props;
+    const iconButtonClass = usePrefixedClassNames('icon-button');
+    const unnamed = !hasText(rest['aria-label']) && !hasText(rest['aria-labelledby']);
+    // Each way of giving the glyph counts only if it draws something, so an
+    // empty Fragment or array as `icon` doesn't hide real children, and an
+    // empty one as children doesn't warn.
+    const fromIcon = iconFromProp(icon);
+    const fromChildren = iconOf(children);
+    const both = fromIcon !== null && fromChildren !== null;
+    // One glyph, from `icon` or else from `children`, so the button's only
+    // child is one `.icon`, which Bulma keeps square, and round with
+    // `isRounded`.
+    const glyph = fromIcon ?? fromChildren;
+    const empty = glyph === null;
+    // Only top-level text, Fragments opened up, and only in development, where
+    // the warning below can say something about it.
+    const textInside = isDev() &&
+        flattenChildren(children).some(child => typeof child === 'number' || hasText(child));
+    React.useEffect(() => {
+        if (unnamed) {
+            warnOnce('IconButton:unnamed', '[bestax-bulma] <IconButton> has no accessible name. Pass ' +
+                'aria-label naming what it does ("Delete"), or aria-labelledby, ' +
+                'so a screen reader has something to announce.');
+        }
+        if (empty) {
+            warnOnce('IconButton:no-glyph', '[bestax-bulma] <IconButton> has no glyph: neither icon nor ' +
+                'children draws one, so it renders an empty square. Pass an icon ' +
+                'name, an <Icon> or another node.');
+        }
+        if (both) {
+            warnOnce('IconButton:icon-and-children', '[bestax-bulma] <IconButton> was given both icon and children. It ' +
+                'draws icon and leaves the children out: give the glyph one way.');
+        }
+        if (textInside) {
+            warnOnce('IconButton:text', '[bestax-bulma] <IconButton> was given text as children. Its ' +
+                'aria-label replaces the text as its name, so a button with text ' +
+                'is a <Button>.');
+        }
+    }, [unnamed, empty, both, textInside]);
+    // `type` is a button's only on a `<button>`. On an `<a>` it's the MIME hint,
+    // and a custom component owns what it means, so those get it as given.
+    const tag = rest.as ?? 'button';
+    const typeProp = tag === 'button' ? { type: buttonType(rest.type) } : undefined;
+    return (jsxRuntime.jsx(Button
+    // IconButton is polymorphic through to Button, which resolves the
+    // element from `as`. TS can't infer that through the spread, so the
+    // props and the ref are read at Button's default element.
+    , { ...rest, ...typeProp, ref: ref, className: classNames(iconButtonClass, className), children: glyph }));
+});
+IconButton.displayName = 'IconButton';
+
+/**
+ * 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,
+    IconButton,
+}, 'Buttons');
+
 /**
  * The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.
  *
@@ -4482,6 +4603,33 @@ function usePortalContainer() {
     const { portalContainer } = useConfig();
     return container => resolvePortalContainer(container || portalContainer);
 }
+/**
+ * Reads Modal's `portal` prop (`boolean | string | HTMLElement`) for a
+ * component that takes it: whether the content is in its portal yet, and
+ * where it goes.
+ *
+ * A portal has no server-rendered counterpart, so such a component renders in
+ * place on the server and while hydrating, and moves into its portal once the
+ * client takes over. Render the content in `Portal` with
+ * `disabled={!isPortaled}` and this `container`. Moving remounts the content,
+ * so an effect that holds one of its nodes depends on `isPortaled`, `portal`
+ * and `defaultTarget`.
+ *
+ * @function usePortalProp
+ * @param portal - The component's `portal` prop.
+ * @returns Whether it's portaled now, its `container`, and the provider's
+ * target while that places it.
+ */
+function usePortalProp(portal) {
+    const hydrated = useIsHydrated();
+    const { portalContainer } = useConfig();
+    const isPortaled = Boolean(portal) && hydrated;
+    return {
+        isPortaled,
+        container: typeof portal === 'boolean' ? undefined : portal,
+        defaultTarget: isPortaled && portal === true ? portalContainer : undefined,
+    };
+}
 /**
  * Renders its children into another part of the page, `document.body` unless `container` or a `ConfigProvider` says otherwise, so floating content escapes an ancestor's `overflow`, `transform` or stacking context.
  *
@@ -5280,7 +5428,7 @@ const ModalClose = ({ className, size = 'large', variant = 'delete', onClick, ..
  * @see {@link https://bulma.io/documentation/components/modal/ | Bulma Modal documentation}
  */
 const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClose, className, textColor, bgColor, modalCardTitle, modalCardFoot, type, children, closeOnEscape = true, lockScroll = true, portal = false, role, 'aria-modal': ariaModalProp, ...props }, ref) {
-    const { classPrefix, portalContainer } = useConfig();
+    const { classPrefix } = useConfig();
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         backgroundColor: bgColor,
@@ -5326,20 +5474,15 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
     const previouslyFocusedRef = React.useRef(null);
     const generatedTitleId = React.useId();
     // A portal has no server-rendered counterpart, so the server render and the
-    // hydrating render have to stay inline and only move into the portal once
-    // we're past hydration.
-    const onClient = useIsHydrated();
-    const resolveContainer = usePortalContainer();
-    // Moving into the portal, or from one portal target to another, remounts
-    // the modal's subtree, so any effect holding a DOM node from before the move
-    // is holding a detached one. Effects that touch the modal's nodes key on
-    // this, on `portal` and on `defaultTarget`, so they re-run against the new
-    // tree.
-    const isPortaled = Boolean(portal) && onClient;
-    // The configured `portalContainer` only places a modal portaled with
-    // `portal` set to `true`. In place, or with a target of its own, a change
-    // to it moves nothing, so it mustn't re-run the effects either.
-    const defaultTarget = isPortaled && portal === true ? portalContainer : undefined;
+    // hydrating render stay inline and only move into the portal once we're
+    // past hydration. Moving into the portal, or from one portal target to
+    // another, remounts the modal's subtree, so any effect holding a DOM node
+    // from before the move is holding a detached one. Effects that touch the
+    // modal's nodes key on `isPortaled`, on `portal` and on `defaultTarget`, so
+    // they re-run against the new tree. `defaultTarget` is the configured
+    // `portalContainer` only while it places the modal (portaled with `portal`
+    // set to `true`), so a change to it that moves nothing re-runs nothing.
+    const { isPortaled, container, defaultTarget } = usePortalProp(portal);
     useScrollLock(isModalActive && lockScroll);
     // Read when Escape arrives, so the key listener stays put while `onClose`
     // changes identity, as an inline one does on every render of the parent.
@@ -5452,11 +5595,7 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
     }
     // In both forms, so a `Modal.Close` anywhere inside closes this modal.
     modalElement = (jsxRuntime.jsx(ModalCloseContext.Provider, { value: onClose, children: modalElement }));
-    if (isPortaled) {
-        const target = resolveContainer(typeof portal === 'boolean' ? undefined : portal);
-        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: modalElement }), target);
-    }
-    return modalElement;
+    return (jsxRuntime.jsx(Portal, { disabled: !isPortaled, container: container, children: modalElement }));
 });
 const Modal = withSubComponents(ModalRoot, {
     Background: ModalBackground,
@@ -9846,10 +9985,7 @@ const Dialog = React.forwardRef(({ isOpen, title, message, type = 'default', con
     // the Modal's subtree, these buttons included, so the focus effect below
     // has to re-run against the new nodes, exactly as the Modal's own focus
     // effect does, on the same inputs.
-    const isHydrated = useIsHydrated();
-    const isPortaled = Boolean(portal) && isHydrated;
-    const { portalContainer } = useConfig();
-    const defaultTarget = isPortaled && portal === true ? portalContainer : undefined;
+    const { isPortaled, defaultTarget } = usePortalProp(portal);
     // Focus management — Dialog picks a specific button rather than the
     // Modal's default (first focusable/root); this effect runs after the
     // inner Modal's own focus-on-open effect, so it wins.
@@ -14503,6 +14639,42 @@ const DataTable = React.forwardRef(function DataTableRender({ columns, data, tab
 });
 DataTable.displayName = 'DataTable';
 
+/**
+ * The `Affix` component keeps its content fixed to a corner of the viewport while the page scrolls under it.
+ *
+ * It's a `<div>` with no role, so what's inside keeps its own. It sits
+ * `--bulma-affix-offset-vertical` and `--bulma-affix-offset-horizontal`
+ * from its corner's edges, plus the device's safe-area inset, and stacks at
+ * `--bulma-affix-z-index`, over the page's content and under its navbar,
+ * static or fixed, its menus, popovers, the Sidebar, the modals, Tooltip and
+ * Toast. It's as wide as its
+ * content and never wider than the viewport less its offsets. It doesn't
+ * scroll, so nothing inside it is clipped, and content that can be taller
+ * than the screen scrolls itself. Its place in the reading and Tab order is
+ * its place in the DOM, whatever corner it shows in.
+ *
+ * @function
+ * @param {AffixProps} props - Props for the Affix component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `<div>`.
+ * @returns The `<div>`, in place or in its portal.
+ *
+ * @example
+ * <Affix position="bottom-left">
+ *   <Button color="primary">Feedback</Button>
+ * </Affix>
+ */
+const Affix = React.forwardRef(({ position = 'bottom-right', portal = false, className, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const affixClasses = usePrefixedClassNames('affix', {
+        [`is-${position}`]: true,
+    });
+    // In place on the server and while hydrating, then into the portal, as
+    // Modal does. The move remounts the `<div>`.
+    const { isPortaled, container } = usePortalProp(portal);
+    return (jsxRuntime.jsx(Portal, { disabled: !isPortaled, container: container, children: jsxRuntime.jsx("div", { ref: ref, className: classNames(affixClasses, bulmaHelperClasses, className), ...rest, children: children }) }));
+});
+Affix.displayName = 'Affix';
+
 /**
  * The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
  *
@@ -26839,6 +27011,63 @@ function ClientOnly({ children, fallback = null }) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: typeof children === 'function' ? children() : children });
 }
 
+/**
+ * The `.stack` element behind Stack, Group, Center and Flex.
+ *
+ * With `as="ul"` or `as="ol"` it renders `role="list"`, which Safari needs:
+ * WebKit stops exposing a list as one once its markers are hidden, and
+ * Bulma's reset hides a `<ul>`'s. Menu.List restates it for the same reason.
+ */
+const StackLayout = React.forwardRef(function StackLayout({ as = 'div', className, textColor, bgColor, 
+// Not accepted, and taken out before the spread below, where a spread's
+// `color: undefined`, or a JavaScript caller's `color`, would replace
+// `textColor`, as `backgroundColor` would `bgColor`.
+color: _color, backgroundColor: _backgroundColor, modifiers, children, ...props }, ref) {
+    // The partial makes the element a flex container, so the container
+    // helpers (alignItems and the rest) apply without a `display` prop.
+    const { bulmaHelperClasses, rest } = useBulmaClasses({ color: textColor, backgroundColor: bgColor, ...props }, { flexContainer: true });
+    const stackClasses = usePrefixedClassNames('stack', modifiers);
+    const Component = as;
+    const isList = as === 'ul' || as === 'ol';
+    return (jsxRuntime.jsx(Component, { ref: ref, className: classNames(stackClasses, bulmaHelperClasses, className), ...rest, ...(isList ? { role: rest.role || 'list' } : {}), children: children }));
+});
+
+/**
+ * The `Center` component centers its content on both axes.
+ *
+ * Use it for a loader, an icon or an empty state in the middle of a box, a
+ * card or a section. Give it a height, or put it in something that has one,
+ * to center down the middle as well as across. Several children sit side by
+ * side in the middle, with no gap unless you set one.
+ *
+ * @function
+ * @param {CenterProps} props - Props for the Center component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered center.
+ *
+ * @example
+ * <Center p="6">
+ *   <Loader />
+ * </Center>
+ */
+const Center = React.forwardRef(function Center(props, ref) {
+    return (jsxRuntime.jsx(StackLayout, { ref: ref, ...props, 
+        // Centered both ways, in the children's own order.
+        flexDirection: undefined, modifiers: { 'is-centered': true } }));
+});
+Center.displayName = 'Center';
+
+// INTERNAL: not exported from src/index.ts, which re-exports Container's
+// module whole, so this list lives here rather than beside the type.
+//
+// Every value `ContainerBreakpoint` takes, in one list, so Container's and
+// Group's checks of a JavaScript caller's `breakpoint` can't drift apart.
+const CONTAINER_BREAKPOINTS = [
+    'tablet',
+    'desktop',
+    'widescreen',
+];
+
 /**
  * The `Container` component provides a responsive and flexible layout wrapper for your Bulma React UI.
  *
@@ -26854,14 +27083,9 @@ const Container = ({ as: Tag = 'div', className, textColor, color, bgColor, flui
         ...props,
     });
     // Only allow isMax for supported breakpoints
-    const validMaxBreakpoints = [
-        'tablet',
-        'desktop',
-        'widescreen',
-    ];
     let breakpointClass;
     if (breakpoint) {
-        if (isMax && validMaxBreakpoints.includes(breakpoint)) {
+        if (isMax && CONTAINER_BREAKPOINTS.includes(breakpoint)) {
             breakpointClass = `is-max-${breakpoint}`;
         }
         else if (!isMax) {
@@ -26879,6 +27103,32 @@ const Container = ({ as: Tag = 'div', className, textColor, color, bgColor, flui
     return (jsxRuntime.jsx(Tag, { className: containerClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
+/**
+ * The `Flex` component is a flex container with CSS's own defaults, taking the flex container's properties as props.
+ *
+ * It's a row that doesn't wrap, with its children stretched across it and no
+ * gap, until you set otherwise. Use it for a layout of your own, such as a
+ * fixed side beside a growing one, with `flexGrow` and `flexShrink` on the
+ * children. Its children's own block margins are zeroed, so the gap is the
+ * only space. For a column of blocks or a row of controls with Bulma's
+ * spacing already in place, `Stack` and `Group` start closer.
+ *
+ * @function
+ * @param {FlexProps} props - Props for the Flex component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered flex container.
+ *
+ * @example
+ * <Flex gap="4" alignItems="flex-start">
+ *   <Box flexShrink="0">…</Box>
+ *   <Box flexGrow="1">…</Box>
+ * </Flex>
+ */
+const Flex = React.forwardRef(function Flex(props, ref) {
+    return jsxRuntime.jsx(StackLayout, { ref: ref, ...props });
+});
+Flex.displayName = 'Flex';
+
 /**
  * The `Footer` component provides a semantic and accessible site footer for your Bulma React UI.
  *
@@ -26904,6 +27154,40 @@ const Footer = ({ as = 'footer', className, children, color, bgColor, textColor,
     return (jsxRuntime.jsx(Tag, { className: footerClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
+/**
+ * The `Group` component lays its children out in a row that wraps, centered on each other, with half of Bulma's block spacing between them.
+ *
+ * Use it for a row of buttons, tags or avatars beside some text, or a toolbar
+ * with `justifyContent="space-between"` pushing its ends apart. The children's
+ * own block margins are zeroed, so the gap is the only space. With
+ * `breakpoint`, it's a column on narrow screens and a row from that
+ * breakpoint up. For controls joined into one, with no gap and shared
+ * borders, use `hasAddons` on Field or Buttons instead.
+ *
+ * @function
+ * @param {GroupProps} props - Props for the Group component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered group.
+ *
+ * @example
+ * <Group justifyContent="space-between">
+ *   <Title as="h2" size="4">Invoices</Title>
+ *   <Button color="primary">New invoice</Button>
+ * </Group>
+ */
+const Group = React.forwardRef(function Group(props, ref) {
+    const { isFullwidth, breakpoint, ...rest } = props;
+    return (jsxRuntime.jsx(StackLayout, { ref: ref, ...rest, 
+        // A row always, or a column below `breakpoint`: never reversed, so
+        // reading and Tab order follow what's seen.
+        flexDirection: undefined, modifiers: {
+            'is-horizontal': true,
+            'is-fullwidth': isFullwidth,
+            [`is-${breakpoint}`]: !!breakpoint && CONTAINER_BREAKPOINTS.includes(breakpoint),
+        } }));
+});
+Group.displayName = 'Group';
+
 /**
  * The `Hero` component provides a responsive, flexible, and visually striking section for your Bulma React UI.
  *
@@ -27709,6 +27993,33 @@ const Splitter = withSubComponents(SplitterRoot, {
     Pane: SplitterPane,
 });
 
+/**
+ * The `Stack` component lays its children out in a column, with Bulma's block spacing between them and the margins Bulma gives them zeroed.
+ *
+ * A Stack of Boxes, Cards or Notifications looks like Bulma's own stacked
+ * blocks, spaced by the gap alone, so there are no margins to undo. A `gap`
+ * step replaces the default spacing. It's always a column, top to bottom.
+ *
+ * @function
+ * @param {StackProps} props - Props for the Stack component.
+ * @param {React.Ref} ref - Forwarded ref to the element `as` renders.
+ * @returns {JSX.Element} The rendered stack.
+ *
+ * @example
+ * <Stack>
+ *   <Notification color="info">Your changes are saved.</Notification>
+ *   <Box>…</Box>
+ * </Stack>
+ */
+const Stack = React.forwardRef(function Stack(props, ref) {
+    return (jsxRuntime.jsx(StackLayout, { ref: ref, ...props, 
+        // A column always: reading and Tab order follow the children's order,
+        // and a reversed column would show them in another.
+        flexDirection: undefined, modifiers: { 'is-vertical': true } }));
+});
+Stack.displayName = 'Stack';
+
+exports.Affix = Affix;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.Avatars = Avatars;
@@ -27722,6 +28033,7 @@ exports.Card = Card;
 exports.Carousel = Carousel;
 exports.CarouselItem = CarouselItem;
 exports.Cell = Cell;
+exports.Center = Center;
 exports.Checkbox = Checkbox;
 exports.CheckboxCard = CheckboxCard;
 exports.Checkboxes = Checkboxes;
@@ -27790,14 +28102,17 @@ exports.FieldLabel = FieldLabel;
 exports.Fieldset = Fieldset;
 exports.Figure = Figure;
 exports.File = File;
+exports.Flex = Flex;
 exports.Footer = Footer;
 exports.Grid = Grid;
+exports.Group = Group;
 exports.Hero = Hero;
 exports.HeroBody = HeroBody;
 exports.HeroFoot = HeroFoot;
 exports.HeroHead = HeroHead;
 exports.HoverCard = HoverCard;
 exports.Icon = Icon;
+exports.IconButton = IconButton;
 exports.IconText = IconText;
 exports.Image = Image;
 exports.Input = Input;
@@ -27883,6 +28198,7 @@ exports.Slider = Slider;
 exports.Span = Span;
 exports.Splitter = Splitter;
 exports.SplitterPane = SplitterPane;
+exports.Stack = Stack;
 exports.Step = Step;
 exports.Steps = Steps;
 exports.Strong = Strong;