@allxsmith/bestax-bulma 5.57.4 → 5.58.0

package/dist/index.cjs

@@ -1901,15 +1901,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 +2051,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 +2265,7 @@ function useNumberFormat(own) {
  * matches everything.
  */
 function useLocaleMatcher() {
-    const locale = useScopedLocale();
+    const locale = useResolvedLocale(undefined);
     return React.useMemo(() => {
         if (!locale)
             return null;
@@ -2160,7 +2326,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 +2415,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;
@@ -5699,7 +5865,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 +8619,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 +10683,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 +10840,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 +10855,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 +10876,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 +10905,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 +10936,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 +10946,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 +10999,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 +11138,8 @@ function useTreeView(options) {
     };
     return {
         treeRef,
-        rendersClosed: mode === 'checkbox',
+        rendersClosed: cascade,
+        multiselectable: boxed,
         tabStop,
         isOpen,
         stateOf,
@@ -11403,12 +11603,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 +11684,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 +11778,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 +13939,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 +15386,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 +15561,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 +16200,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 +16625,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 +17240,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 +17979,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 +19187,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 +20004,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 {
@@ -27604,6 +27838,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;
@@ -27712,6 +27947,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;