@allxsmith/bestax-bulma 5.57.5 → 5.59.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,
@@ -1901,15 +1920,22 @@ function localeFirstDay(locale) {
 const LocaleContext = React.createContext(null);
 /** The nearest provider's wrapper element, for `LocalePortalScope` to test targets against. */
 const LocaleElementContext = React.createContext(null);
-/** A tag in canonical form, or `undefined`, warning about one `Intl` refuses. */
-function validLocale(tag) {
+/** The provider's warning about a tag `Intl` refuses. */
+const warnProviderLocale = (tag) => warnOnce(`locale-provider-invalid:${tag}`, `[bestax-bulma] <LocaleProvider locale="${tag}">: not a language ` +
+    'tag Intl accepts, so it is ignored. Use a BCP 47 tag such as ' +
+    '"en-US", with a hyphen rather than an underscore.');
+/**
+ * INTERNAL, deliberately not exported from `src/index.ts`. A tag in
+ * canonical form, or `undefined` for an empty or missing one and for one
+ * `Intl` refuses, which `refused` reports: by default the provider's own
+ * development warning, once per tag.
+ */
+function validLocale(tag, refused = warnProviderLocale) {
     try {
         return canonicalLocale(tag);
     }
     catch {
-        warnOnce(`locale-provider-invalid:${tag}`, `[bestax-bulma] <LocaleProvider locale="${tag}">: not a language ` +
-            'tag Intl accepts, so it is ignored. Use a BCP 47 tag such as ' +
-            '"en-US", with a hyphen rather than an underscore.');
+        refused(tag);
         return undefined;
     }
 }
@@ -2044,48 +2070,207 @@ function LocalePortalScope({ children, target, scope, }) {
     return (jsxRuntime.jsx("div", { dir: values.dir, lang: values.locale, style: displayContents, children: children }));
 }
 
-// INTERNAL: deliberately not exported from src/index.ts. Number formatting
-// and text matching in a LocaleProvider's locale. Both return `null` outside
-// a provider that gives a locale, so each caller keeps the formatting and the
-// matching it has always had there.
+// Number formatting and text matching in a locale.
+//
+// `useNumberFormat` and its `NumberFormatFunction` type are public, exported
+// from src/index.ts. The rest is INTERNAL, deliberately not exported.
+//
+// Which a component calls depends on its job. A component whose job is to
+// write a number, such as `NumberFormatter`, uses `useNumberFormat`, which
+// writes in the runtime's locale outside a `LocaleProvider`, as the pickers
+// do. Any other component that shows a number in passing, such as a badge
+// count, a page number or a step's number, uses `useScopedNumberFormat`,
+// and filters a list through `useLocaleMatcher`. Those two return `null`
+// outside a provider, and inside one that gives no locale, as a provider
+// with only a `dir` doesn't, so the component keeps the formatting and the
+// matching it has always had there, as `LocaleProvider` promises.
 /** A combining mark: an accent, a vowel sign or a point written on a letter. */
 const MARK = /\p{M}/u;
 /**
- * The locale a component formats and matches in: inside a `LocaleProvider`,
- * the component's own locale when it has one (a picker's `locale`), else the
- * provider's; outside a provider, none.
+ * The warning about a locale `Intl` refuses, given to `useNumberFormat`,
+ * and so to `NumberFormatter`, the only callers that pass one.
  */
-function useScopedLocale(own) {
+const warnOwnLocale = (tag) => warnOnce(`number-format-invalid-locale:${tag}`, `[bestax-bulma] NumberFormatter or useNumberFormat was given the locale ` +
+    `"${tag}", which is not a language tag Intl accepts, so it is ` +
+    "ignored and numbers are written in the LocaleProvider's locale, " +
+    'else the runtime\'s. Use a BCP 47 tag such as "en-US", with a ' +
+    'hyphen rather than an underscore.');
+/**
+ * The locale a component formats and matches in: the locale given, else the
+ * `LocaleProvider`'s, else none. A tag `Intl` refuses counts as none, with a
+ * development warning, as `LocaleProvider` treats one.
+ */
+function useResolvedLocale(own) {
     const scope = useLocaleScope();
-    if (!scope)
-        return undefined;
-    return scope.locale;
+    const valid = React.useMemo(() => validLocale(own, warnOwnLocale), [own]);
+    return valid || scope?.locale;
 }
 /**
- * A formatter for numbers shown on screen, in the locale of the
- * `LocaleProvider` around the component, or `null` outside one that gives a
- * locale. Formatters are kept per set of options, since building one is the
- * expensive part.
+ * The options `Intl.NumberFormat` reads, as ECMA-402 lists them. A key reads
+ * each by name, so an inherited option counts as `Intl` counts it.
+ */
+const NUMBER_FORMAT_OPTIONS = [
+    'localeMatcher',
+    'numberingSystem',
+    'style',
+    'currency',
+    'currencyDisplay',
+    'currencySign',
+    'unit',
+    'unitDisplay',
+    'notation',
+    'minimumIntegerDigits',
+    'minimumFractionDigits',
+    'maximumFractionDigits',
+    'minimumSignificantDigits',
+    'maximumSignificantDigits',
+    'roundingIncrement',
+    'roundingMode',
+    'roundingPriority',
+    'trailingZeroDisplay',
+    'compactDisplay',
+    'useGrouping',
+    'signDisplay',
+];
+const KNOWN_OPTIONS = new Set(NUMBER_FORMAT_OPTIONS);
+/** One option's value with its type, or `null` for one a key can't hold. */
+function writeOption(value) {
+    switch (typeof value) {
+        case 'string':
+            return JSON.stringify(value);
+        case 'number':
+            // `NaN` and `Infinity` as themselves, which `JSON.stringify` makes
+            // `null`, and `-0` with its sign.
+            return Object.is(value, -0) ? '-0' : String(value);
+        case 'boolean':
+            return String(value);
+        case 'bigint':
+            return `${value}n`;
+        default:
+            return value === null ? 'null' : null;
+    }
+}
+/**
+ * The options as `Intl` will read them, and a key that tells apart any two
+ * sets it would read differently; `null` when an option `Intl` reads holds
+ * an object, a function or a symbol, which `Intl` converts in ways a key
+ * can't follow. It reads each option `Intl` reads by name, inherited ones
+ * included, then every other enumerable key, own or inherited, so an option
+ * `Intl` gains later still keeps two sets apart. Since `Intl`'s options are
+ * all primitives, one of those other keys holding anything else is left
+ * out. An option set to `undefined` is unset, as it is for `Intl`. The
+ * formatter is built from the copy, so `Intl` sees what the key says, even
+ * of a getter.
+ */
+function readOptions(options) {
+    const others = [];
+    for (const name in options) {
+        if (!KNOWN_OPTIONS.has(name))
+            others.push(name);
+    }
+    const names = NUMBER_FORMAT_OPTIONS.concat(others.sort());
+    const read = {};
+    const parts = [];
+    for (const name of names) {
+        const value = options[name];
+        if (value === undefined)
+            continue;
+        const written = writeOption(value);
+        if (written === null) {
+            // An option `Intl` reads converts an object; a key it doesn't read,
+            // such as a config's own `meta`, means nothing to it.
+            if (KNOWN_OPTIONS.has(name))
+                return null;
+            continue;
+        }
+        read[name] = value;
+        parts.push(`${JSON.stringify(name)}:${written}`);
+    }
+    return { key: parts.join(','), read };
+}
+/**
+ * Every formatter's `Intl.NumberFormat`s, by locale and options, so a page of
+ * numbers in one locale and format builds one. Building one is the expensive
+ * part of formatting. Past `MOST_NUMBER_FORMATS`, the one used longest ago
+ * goes, so a server that writes numbers in many locales doesn't keep them
+ * all, and the ones in use stay. A `Map` keeps its keys in the order they
+ * were set, so a formatter is set again each time it's used.
+ */
+const numberFormats = new Map();
+const MOST_NUMBER_FORMATS = 200;
+/** The `Intl.NumberFormat` for `locale` and `options`, built once. */
+function numberFormatFor(locale, options) {
+    let read;
+    let key = '';
+    if (options !== undefined) {
+        const copy = typeof options === 'object' && options !== null
+            ? readOptions(options)
+            : null;
+        // Options a key can't hold get a formatter of their own, which also
+        // throws what `Intl` throws for them.
+        if (!copy)
+            return new Intl.NumberFormat(locale, options);
+        read = copy.read;
+        key = copy.key;
+    }
+    // A locale tag has no spaces, so the key can't be read two ways.
+    const cacheKey = `${locale ?? ''} ${key}`;
+    let format = numberFormats.get(cacheKey);
+    if (format) {
+        numberFormats.delete(cacheKey);
+    }
+    else {
+        // Built before anything is stored, so options `Intl` refuses throw its
+        // error and leave nothing behind.
+        format = new Intl.NumberFormat(locale, read);
+        if (numberFormats.size >= MOST_NUMBER_FORMATS) {
+            numberFormats.delete(numberFormats.keys().next().value);
+        }
+    }
+    numberFormats.set(cacheKey, format);
+    return format;
+}
+/** A function that writes numbers in `locale`, the same one for each locale. */
+function useFormatIn(locale) {
+    return React.useMemo(() => (value, options) => numberFormatFor(locale, options).format(value), [locale]);
+}
+/**
+ * A function that writes numbers for display in a locale: `locale` when given, else the `LocaleProvider`'s around the component, else the runtime's.
+ *
+ * Formatters are kept per locale and set of options, since building one is
+ * the expensive part, and shared, so many numbers written the same way build
+ * one. The function is the same from one render to the next for the same
+ * locale, so it's safe in a dependency array. Use it for text outside JSX,
+ * such as an `aria-label`, a `placeholder` or a chart's axis; in JSX,
+ * `NumberFormatter` also marks the number up. On a server render the
+ * runtime's locale is the server's, so give it a locale, here or through a
+ * `LocaleProvider`, where the server's and the browser's can differ. A tag
+ * `Intl` refuses is ignored, with a warning in development, as
+ * `LocaleProvider` ignores one. Options `Intl` refuses throw its error when
+ * the function is called.
+ *
+ * @function
+ * @param locale - A BCP 47 locale tag, which wins over the provider's.
+ * @returns {NumberFormatFunction} Writes `value` with `Intl.NumberFormat` options.
  *
- * @param own - The component's own locale, such as a picker's `locale`,
- * which wins inside a provider.
+ * @example
+ * const format = useNumberFormat();
+ * const placeholder = format(1500, { style: 'currency', currency: 'EUR' });
  */
-function useNumberFormat(own) {
-    const locale = useScopedLocale();
-    return React.useMemo(() => {
-        if (!locale)
-            return null;
-        const formats = new Map();
-        return (value, options) => {
-            const key = options ? JSON.stringify(options) : '';
-            let format = formats.get(key);
-            if (!format) {
-                format = new Intl.NumberFormat(locale, options);
-                formats.set(key, format);
-            }
-            return format.format(value);
-        };
-    }, [locale]);
+function useNumberFormat(locale) {
+    return useFormatIn(useResolvedLocale(locale));
+}
+/**
+ * INTERNAL, deliberately not exported from `src/index.ts`. Number formatting
+ * for a component that shows a number in passing, as `useNumberFormat`
+ * writes it in the `LocaleProvider`'s locale, or `null` outside a provider
+ * and inside one that gives no locale, as a provider with only a `dir`
+ * doesn't, where the component keeps the formatting it has always had.
+ */
+function useScopedNumberFormat() {
+    const scoped = useResolvedLocale(undefined);
+    const format = useFormatIn(scoped);
+    return scoped ? format : null;
 }
 /**
  * A matcher for filtering a list by what was typed, in the locale of the
@@ -2099,7 +2284,7 @@ function useNumberFormat(own) {
  * matches everything.
  */
 function useLocaleMatcher() {
-    const locale = useScopedLocale();
+    const locale = useResolvedLocale(undefined);
     return React.useMemo(() => {
         if (!locale)
             return null;
@@ -2160,7 +2345,7 @@ function useLocaleMatcher() {
  */
 const AvatarsComponent = ({ className, max, size, shape, spacing = 'md', spaced = false, surplusLabel, style, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
-    const formatNumber = useNumberFormat();
+    const formatNumber = useScopedNumberFormat();
     // A preset spacing maps to a class; a numeric spacing sets the CSS var inline
     // (mirrors Sidebar's inline --bulma-* width var).
     const isPresetSpacing = typeof spacing === 'string';
@@ -2249,7 +2434,7 @@ const Badge = ({ className, badgeClassName, content, max = 99, dot = false, show
     // A negative or non-integer max is nonsensical; fall back to the default
     // rather than render e.g. "-1+" (mirrors Avatars' max sanitization).
     const sanitizedMax = Number.isInteger(max) && max >= 0 ? max : 99;
-    const formatNumber = useNumberFormat();
+    const formatNumber = useScopedNumberFormat();
     const displayValue = React.useMemo(() => {
         if (dot || !hasContent)
             return undefined;
@@ -3404,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
@@ -3774,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.
  *
@@ -5699,7 +5986,7 @@ const PaginationComponent = ({ color, textColor, bgColor, size, align, rounded,
         backgroundColor: bgColor,
         ...props,
     });
-    const formatNumber = useNumberFormat();
+    const formatNumber = useScopedNumberFormat();
     // Generate Bulma classes with prefix
     const bulmaClasses = usePrefixedClassNames('pagination', {
         [`is-${color}`]: color,
@@ -8453,7 +8740,7 @@ const ContextMenu = withSubComponents(ContextMenuComponent, {
  */
 const Step = ({ isActive = false, isCompleted = false, label, icon, clickable = false, onClick, stepNumber, completedIcon, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const formatNumber = useNumberFormat();
+    const formatNumber = useScopedNumberFormat();
     const stepClasses = classNames(usePrefixedClassNames('steps-segment', {
         'is-active': isActive,
         'is-completed': isCompleted,
@@ -10517,15 +10804,23 @@ const Reveal = RevealImpl;
 Reveal.displayName = 'Reveal';
 
 // INTERNAL: deliberately not exported from src/index.ts.
+/** The keys and clicks of both checkbox modes, which differ only in what a check reaches. */
+const CHECKBOX_ACTIONS = {
+    enter: ['open'],
+    space: ['check'],
+    click: ['check'],
+};
 /**
  * What Enter, Space and a click on the row do in each mode, from the tables
- * in #1096. `open` opens or closes a parent and does nothing on a leaf. A
- * click on the chevron only ever opens or closes.
+ * in #1096, with `checkbox-independent` from #1430. `open` opens or closes a
+ * parent and does nothing on a leaf. A click on the chevron only ever opens
+ * or closes.
  */
 const MODES = {
     none: { enter: ['open'], space: ['open'], click: ['open'] },
     single: { enter: ['select'], space: ['select'], click: ['select', 'open'] },
-    checkbox: { enter: ['open'], space: ['check'], click: ['check'] },
+    checkbox: CHECKBOX_ACTIONS,
+    'checkbox-independent': CHECKBOX_ACTIONS,
 };
 /** Left and Right, swapped for a right-to-left page. */
 const MIRRORED = {
@@ -10666,6 +10961,13 @@ function useControlled(controlled, initial) {
     };
     return [isControlled ? controlled : own, set];
 }
+/**
+ * The list with `value` added at the end, or, when it's `present`, with
+ * every copy of it taken out. Everything else stays as it was, in its order.
+ */
+function addedOrRemoved(list, value, present) {
+    return present ? list.filter(v => v !== value) : [...list, value];
+}
 /**
  * The open state, the selection, the keys, the tab stop, the positions and
  * the registry of a TreeView (#1096). Focus moves for real, with a roving
@@ -10674,10 +10976,12 @@ function useControlled(controlled, initial) {
  * browser (#1171), read off the page once the tree has mounted.
  *
  * Every item registers its value, its parent and whether it's disabled from
- * a layout effect. In a checkbox tree a closed item's children still render
- * and register while drawing nothing, so the registry knows every item and a
- * check reaches all of them. The keys read the items on the page, in
- * document order, each time they need them.
+ * a layout effect. In a `checkbox` tree a closed item's children still
+ * render and register while drawing nothing, so the registry knows every item
+ * and a check reaches all of them. A `checkbox-independent` tree reads each
+ * box off the checked list alone, so a check adds or takes out its own value
+ * and nothing else. The keys read the items on the page, in document order,
+ * each time they need them.
  *
  * @function useTreeView
  * @param options - The TreeView's props.
@@ -10693,9 +10997,15 @@ function useTreeView(options) {
     const [expanded, setExpanded] = useControlled(options.expanded, options.defaultExpanded);
     const [selection, setSelection] = useControlled(options.selected, options.defaultSelected);
     const [checkedList, setChecked] = useControlled(options.checked, options.defaultChecked);
+    // In a `checkbox` tree a check reaches the items under it, by the rules. In
+    // a `checkbox-independent` one each box is its own item's, read off the list.
+    const cascade = mode === 'checkbox';
+    const independent = mode === 'checkbox-independent';
+    // A box on every item, in either checkbox tree.
+    const boxed = cascade || independent;
     // Each is read in its own mode only.
     const selected = mode === 'single' ? selection : null;
-    const listed = new Set(mode === 'checkbox' ? checkedList : []);
+    const listed = new Set(boxed ? checkedList : []);
     const treeRef = React.useRef(null);
     const registryRef = React.useRef({
         records: new Map(),
@@ -10716,21 +11026,28 @@ function useTreeView(options) {
     // Each item's place among the items beside it, by its key.
     const [positions, setPositions] = React.useState(NO_POSITIONS);
     const { records } = registryRef.current;
-    const checks = mode === 'checkbox'
+    const checks = cascade
         ? // eslint-disable-next-line react-hooks/refs -- read in render on purpose: items write the registry from their layout effects and then ask for this render with `refresh`
             readChecks(records, listed).states
         : undefined;
     const tabStop = focused ?? (resting === undefined ? selected : resting);
+    // An item's box, decided here alone, so the box drawn, the tab stop and a
+    // toggle agree: off the list in a `checkbox-independent` tree, and by the
+    // rules in a `checkbox` one, where it's `undefined` until the item
+    // registers. `undefined` in a tree with no boxes.
+    const checkOf = (value) => independent ? listed.has(value) : checks?.get(value);
     const isOpen = (value) => expanded.includes(value);
     const stateOf = (value, path, disabled) => {
         if (mode === 'single') {
             return disabled ? {} : { selected: value === selected };
         }
-        if (checks) {
-            // Until the items register, a value stands for its branch, and a
-            // parent can't know it's mixed.
-            const fromList = listed.has(value) || (!disabled && path.some(v => listed.has(v)));
-            return { checked: checks.get(value) ?? fromList };
+        if (boxed) {
+            // Until the items register in a `checkbox` tree, a value stands for
+            // its branch, and a parent can't know it's mixed.
+            return {
+                checked: checkOf(value) ??
+                    (listed.has(value) || (!disabled && path.some(v => listed.has(v)))),
+            };
         }
         return {};
     };
@@ -10740,9 +11057,8 @@ function useTreeView(options) {
     };
     const run = {
         open: ({ value, isParent, open }) => {
-            if (isParent) {
-                changeOpen(open ? expanded.filter(v => v !== value) : [...expanded, value]);
-            }
+            if (isParent)
+                changeOpen(addedOrRemoved(expanded, value, open));
         },
         select: ({ value }) => {
             if (value === selected)
@@ -10751,7 +11067,11 @@ function useTreeView(options) {
             options.onSelectedChange?.(value);
         },
         check: ({ value }) => {
-            const next = toggledList(records, checkedList, value);
+            // A `checkbox-independent` box is its own item's alone, so its value
+            // comes or goes and the rest of the list stays as it was.
+            const next = independent
+                ? addedOrRemoved(checkedList, value, checkOf(value) === true)
+                : toggledList(records, checkedList, value);
             setChecked(next);
             options.onCheckedChange?.(next);
         },
@@ -10800,7 +11120,7 @@ function useTreeView(options) {
         }
         if (focused !== null && !isShown(focused))
             setFocused(null);
-        const preferred = onPage.find(value => value === selected || checks?.get(value) === true);
+        const preferred = onPage.find(value => value === selected || checkOf(value) === true);
         const next = preferred ?? (isShown(resting) ? resting : heir(restingPathRef.current));
         if (next !== resting) {
             setResting(next);
@@ -10939,7 +11259,8 @@ function useTreeView(options) {
     };
     return {
         treeRef,
-        rendersClosed: mode === 'checkbox',
+        rendersClosed: cascade,
+        multiselectable: boxed,
         tabStop,
         isOpen,
         stateOf,
@@ -11403,12 +11724,14 @@ const isGiven$1 = (node) => node !== undefined &&
  * and close is `Menu`'s job. The root owns which items are open, through
  * `expanded`, `defaultExpanded` and `onExpandedChange`.
  *
- * `selectionMode` picks one of three trees. With `none`, nothing is picked.
+ * `selectionMode` picks the kind of tree. With `none`, nothing is picked.
  * With `single`, one item is, and `selected` says which. With `checkbox`,
  * each item has a box, a check reaches every enabled item under it, closed
  * branches included, and a parent with some of its items checked is mixed.
- * `selected` is read in a `single` tree only, and `checked` in a `checkbox`
- * tree only. Selection never follows focus.
+ * With `checkbox-independent`, each item has a box that checks that item
+ * alone, so a parent means only itself and is never mixed. `selected` is
+ * read in a `single` tree only, and `checked` in the two checkbox trees only.
+ * Selection never follows focus.
  *
  * Disabled items stay reachable from the keys, so a screen reader finds
  * them. The tree needs a name, from `aria-label` or `aria-labelledby`, and a
@@ -11482,7 +11805,7 @@ const TreeViewRoot = React.forwardRef(function TreeView({ children, selectionMod
     // beside the tree, since a tree holds items and groups only, and it's
     // there from the start, so a screen reader is listening to it before
     // anything is written into it.
-    return (jsxRuntime.jsxs(TreeViewContext.Provider, { value: { ...engine, announce, loadingLabel, retryLabel }, children: [jsxRuntime.jsx(BranchContext.Provider, { value: TOP, children: jsxRuntime.jsx("ul", { ...rest, ref: setRefs, className: classNames(rootClass, bulmaHelperClasses, className), role: "tree", "aria-multiselectable": engine.rendersClosed || undefined, children: children }) }), jsxRuntime.jsx(StatusRegion, { items: announcements, describe: describe })] }));
+    return (jsxRuntime.jsxs(TreeViewContext.Provider, { value: { ...engine, announce, loadingLabel, retryLabel }, children: [jsxRuntime.jsx(BranchContext.Provider, { value: TOP, children: jsxRuntime.jsx("ul", { ...rest, ref: setRefs, className: classNames(rootClass, bulmaHelperClasses, className), role: "tree", "aria-multiselectable": engine.multiselectable || undefined, children: children }) }), jsxRuntime.jsx(StatusRegion, { items: announcements, describe: describe })] }));
 });
 /**
  * One item in the tree: a row with its chevron, its box, its icon and its label, and, while it's open, a group of the items under it.
@@ -11576,7 +11899,7 @@ const TreeViewItem = React.forwardRef(function TreeViewItem({ value, label, icon
     });
     if (!tree)
         return null;
-    // While it's open the children render in its group. In a checkbox tree
+    // While it's open the children render in its group. In a `checkbox` tree
     // they render while it's closed too, drawing nothing, so a check knows
     // what's under it.
     const items = (open || tree.rendersClosed) && (jsxRuntime.jsx(BranchContext.Provider, { value: childBranch, children: children }));
@@ -13737,7 +14060,7 @@ function useDataTable(options) {
     const prefix = useClassPrefix();
     const { locale } = useLocale();
     const matchText = useLocaleMatcher();
-    const formatNumber = useNumberFormat();
+    const formatNumber = useScopedNumberFormat();
     const collator = React.useMemo(() => new Intl.Collator(locale, { numeric: true }), [locale]);
     const pageSize = pageSizeProp !== undefined &&
         Number.isFinite(pageSizeProp) &&
@@ -15184,6 +15507,38 @@ const NotificationContainer = ({ position = 'top-right' }) => {
     return reactDom.createPortal(jsxRuntime.jsxs(LocalePortalScope, { target: target, children: [stacks.map(stack => (jsxRuntime.jsx("div", { style: notificationStackStyle(stack.position), children: stack.items.map(item => (jsxRuntime.jsx(NotificationItem, { instance: item, onClose: notification.close, registerMessage: registerMessage }, item.id))) }, stack.key))), jsxRuntime.jsx(StatusRegion, { items: politeItems, describe: describe })] }), target);
 };
 
+/**
+ * The `NumberFormatter` component writes a number the way a locale writes it, such as a price, a percentage or a count, in a `<data>` element that keeps the number itself in its `value`.
+ *
+ * It formats with `Intl.NumberFormat`, in its own `locale`, else the
+ * `LocaleProvider`'s around it, else the runtime's, with `format` as the
+ * options. The `<data>` has no role and no class of its own, so a screen
+ * reader reads the formatted text and it takes the look of the text around
+ * it. For text outside JSX, such as an `aria-label`, `useNumberFormat`
+ * gives the same formatting as a function.
+ *
+ * @function
+ * @param {NumberFormatterProps} props - Props for the NumberFormatter component.
+ * @param {React.Ref<HTMLDataElement>} ref - Forwarded ref to the `<data>`.
+ * @returns {JSX.Element} The rendered number.
+ *
+ * @example
+ * <NumberFormatter
+ *   value={8456.4}
+ *   format={{ style: 'currency', currency: 'USD' }}
+ * />
+ */
+const NumberFormatter = React.forwardRef(({ className, textColor, bgColor, value, format, locale, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const formatNumber = useNumberFormat(locale);
+    return (jsxRuntime.jsx("data", { ref: ref, className: classNames(bulmaHelperClasses, className) || undefined, ...rest, value: Object.is(value, -0) ? '-0' : String(value), children: formatNumber(value, format) }));
+});
+NumberFormatter.displayName = 'NumberFormatter';
+
 /**
  * The `OrderedList` component renders a styled ordered list (`<ol>`) element with Bulma helper class integration.
  *
@@ -15327,7 +15682,7 @@ const RingProgress = React.forwardRef(({ className, textColor, bgColor, value, m
     const labelClass = usePrefixedClassNames('ring-progress-label');
     // A section's color class, prefixed like the rest.
     const classPrefix = useClassPrefix();
-    const formatNumber = useNumberFormat();
+    const formatNumber = useScopedNumberFormat();
     const writeShare = (share) => formatNumber
         ? formatNumber(share / 100, { style: 'percent' })
         : `${share}%`;
@@ -15966,7 +16321,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                 node;
         }
     }, [ref]);
-    const formatNumber = useNumberFormat();
+    const formatNumber = useScopedNumberFormat();
     const tokens = acceptTokens(accept);
     const sizeText = (bytes) => formatFileSize(bytes, formatNumber);
     const countText = (count) => formatNumber ? formatNumber(count) : String(count);
@@ -16391,7 +16746,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
             : undefined);
         onChange?.(event);
     };
-    const formatNumber = useNumberFormat();
+    const formatNumber = useScopedNumberFormat();
     const pickedText = picked &&
         (picked.count === 1
             ? picked.firstName
@@ -17006,7 +17361,7 @@ const Slider = React.forwardRef((props, ref) => {
     // Scale helper
     const scaleValue = React.useCallback((v) => (scale ? scale(v) : v), [scale]);
     // Format helper: the caller's, else the locale's, else the number as is.
-    const formatNumber = useNumberFormat();
+    const formatNumber = useScopedNumberFormat();
     const writeNumber = React.useCallback((v) => (formatNumber ? formatNumber(v) : v.toString()), [formatNumber]);
     const formatValue = React.useCallback((v) => {
         const scaled = scaleValue(v);
@@ -17745,7 +18100,7 @@ const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, messa
         callerProps: props,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const formatNumber = useNumberFormat();
+    const formatNumber = useScopedNumberFormat();
     const starBaseId = React.useId();
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const [hoverValue, setHoverValue] = React.useState(null);
@@ -18953,7 +19308,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const { classPrefix } = useConfig();
     const defaultIconLibrary = useIconLibrary();
-    const formatNumber = useNumberFormat();
+    const formatNumber = useScopedNumberFormat();
     const matchText = useLocaleMatcher();
     const resolvedLibrary = iconLibraryProp || defaultIconLibrary || 'fa';
     const pcn = (...args) => prefixedClassNames(classPrefix, ...args);
@@ -19770,7 +20125,7 @@ function useColorPicker({ value, defaultValue, onChange, onChangeEnd, format, al
             onChangeEnd?.(nextText);
     }, [disabled, alpha, format, onChange, onChangeEnd, empty]);
     const end = React.useCallback(() => onChangeEnd?.(lastTextRef.current), [onChangeEnd]);
-    const formatNumber = useNumberFormat();
+    const formatNumber = useScopedNumberFormat();
     const { isCoarsePointer } = useNativeMobilePicker();
     const merged = mergeColorLabels(labels);
     return {
@@ -26605,6 +26960,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.
  *
@@ -26620,14 +27032,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) {
@@ -26645,6 +27052,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.
  *
@@ -26670,6 +27103,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.
  *
@@ -27475,6 +27942,32 @@ 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.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.Avatars = Avatars;
@@ -27488,6 +27981,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;
@@ -27556,14 +28050,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;
@@ -27604,6 +28101,7 @@ exports.NavbarMenu = NavbarMenu;
 exports.NavbarStart = NavbarStart;
 exports.Notification = Notification;
 exports.NotificationContainer = NotificationContainer;
+exports.NumberFormatter = NumberFormatter;
 exports.NumberInput = NumberInput;
 exports.Numberinput = Numberinput;
 exports.OrderedList = OrderedList;
@@ -27648,6 +28146,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;
@@ -27712,6 +28211,7 @@ exports.useInsideControl = useInsideControl;
 exports.useInsideField = useInsideField;
 exports.useIsHydrated = useIsHydrated;
 exports.useLocale = useLocale;
+exports.useNumberFormat = useNumberFormat;
 exports.useOtherClasses = useOtherClasses;
 exports.usePrefixedClass = usePrefixedClass;
 exports.usePrefixedClassNames = usePrefixedClassNames;