@allxsmith/bestax-bulma 5.53.0 → 5.54.0

package/dist/index.cjs

@@ -1792,6 +1792,360 @@ function flattenChildren(children, keyPrefix = '') {
     });
 }
 
+// INTERNAL: deliberately not exported from src/index.ts. What a locale says
+// about its direction, read from `Intl.Locale` where the engine has the data,
+// and about its week, read from a copy of CLDR's week data.
+/**
+ * Scripts written right to left: every script for which ICU's text info
+ * says `rtl`, as Node reported it, and `Aran`, the Nastaliq form of Arabic
+ * that WebKit fills in for Urdu. Read only where the engine has no text info
+ * of its own, which includes Firefox before 153.
+ */
+const RTL_SCRIPTS = ' Adlm Arab Aran Armi Avst Chrs Cprt Elym Gara Hatr Hebr Hung Khar Lydi ' +
+    'Mand Mani Mend Merc Mero Narb Nbat Nkoo Orkh Ougr Palm Phli Phlp Phnx ' +
+    'Prti Rohg Samr Sarb Sidt Sogd Sogo Syrc Thaa Yezi ';
+/**
+ * Widely used languages whose usual script reads right to left, for an engine
+ * that can't fill in a locale's script with `maximize()`.
+ */
+const RTL_LANGUAGES = ' ar ckb dv fa he iw ji ks mzn nqo pnb ps sd syr ug ur yi ';
+/**
+ * The regions whose week doesn't start on Monday, by the day it starts on
+ * (0 = Sunday, 5 = Friday, 6 = Saturday), from CLDR 48's week data as Node
+ * reported it. The library reads this rather than `Intl.Locale`'s week info
+ * because engines disagree: Firefox before 153 has none, and WebKit's differs
+ * from Node's, Chromium's and current Firefox's for China, Algeria, Jordan and
+ * Iceland among others, so an inline calendar rendered on the server would
+ * fail to hydrate there. With one table, the server and every browser agree.
+ */
+const WEEK_STARTS = [
+    [
+        0,
+        ' AG AS BD BR BS BT BU BW BZ CA CO DM DO ET GT GU HK HN ID IL IN IS JM JP ' +
+            'KE KH KR LA MH MM MO MT MX MZ NI NP PA PE PH PK PR PT PY RH SA SG SV TH ' +
+            'TT TW UM US VE VI WS YD YE ZA ZW ',
+    ],
+    [5, ' MV '],
+    [6, ' AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY '],
+];
+/** Whether a space-separated list, padded with spaces, holds `code`. */
+const listed = (list, code) => list.includes(` ${code} `);
+/** The `-u-fw-` keyword's values, by the day they name. */
+const FW_DAYS = {
+    sun: 0,
+    mon: 1,
+    tue: 2,
+    wed: 3,
+    thu: 4,
+    fri: 5,
+    sat: 6,
+};
+/**
+ * The canonical form of a BCP 47 tag (`"en-us"` becomes `"en-US"`), or
+ * `undefined` for an empty or missing one. Throws a `RangeError` for a tag
+ * `Intl` refuses, as `Intl.DateTimeFormat` would.
+ */
+function canonicalLocale(tag) {
+    if (!tag)
+        return undefined;
+    return Intl.getCanonicalLocales(tag)[0];
+}
+/**
+ * The direction a locale's script is written in: from `Intl.Locale`'s text
+ * info, else from the script `maximize()` fills in, else from the language.
+ *
+ * @param locale - A canonical tag, as `canonicalLocale` returns.
+ */
+function localeDirection(locale) {
+    const intlLocale = new Intl.Locale(locale);
+    const info = intlLocale;
+    const direction = typeof info.getTextInfo === 'function'
+        ? info.getTextInfo().direction
+        : info.textInfo?.direction;
+    if (direction === 'rtl' || direction === 'ltr')
+        return direction;
+    if (typeof intlLocale.maximize === 'function') {
+        const script = intlLocale.maximize().script;
+        return script && listed(RTL_SCRIPTS, script) ? 'rtl' : 'ltr';
+    }
+    return listed(RTL_LANGUAGES, intlLocale.language) ? 'rtl' : 'ltr';
+}
+/**
+ * The day a locale's week starts on, 0 for Sunday, as `getWeekInfo()` reads
+ * it: the tag's `-u-fw-` keyword, else the region its `-u-rg-` keyword names,
+ * else its own region or the one `maximize()` fills in, looked up in CLDR's
+ * week data, where a region not listed starts on Monday.
+ *
+ * @param locale - A canonical tag, as `canonicalLocale` returns.
+ */
+function localeFirstDay(locale) {
+    const fw = /-u(?:-[a-z0-9]{2,8})*?-fw-([a-z]{3})(?=-|$)/i.exec(locale);
+    if (fw && fw[1].toLowerCase() in FW_DAYS)
+        return FW_DAYS[fw[1].toLowerCase()];
+    const rg = /-u(?:-[a-z0-9]{2,8})*?-rg-([a-z]{2})[a-z0-9]{1,4}(?=-|$)/i.exec(locale);
+    const intlLocale = new Intl.Locale(locale);
+    const region = rg
+        ? rg[1].toUpperCase()
+        : typeof intlLocale.maximize === 'function'
+            ? intlLocale.maximize().region
+            : intlLocale.region;
+    if (region) {
+        for (const [day, regions] of WEEK_STARTS) {
+            if (listed(regions, region))
+                return day;
+        }
+    }
+    return 1;
+}
+
+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) {
+    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.');
+        return undefined;
+    }
+}
+/**
+ * Sets the language and writing direction for the part of the app inside it, on a wrapper `<div>` and on what the library portals out of it.
+ *
+ * The wrapper carries `dir` and `lang`, so CSS and the components that read
+ * the computed direction follow it, as they follow `<html dir>`. A `locale`
+ * alone sets the direction of its script, and a `dir` sets the direction
+ * whatever the locale. A nested provider keeps whatever it leaves unset.
+ *
+ * Inside it, the date and time pickers take its `locale` unless given their
+ * own, and their week starts on the first day of the locale they use unless
+ * `firstDayOfWeek` is set, and a picker with a `locale` of its own is read
+ * like a nested provider. With a `locale`, the numbers the library writes,
+ * such as page numbers and badge counts, follow it, and so does the
+ * filtering in `Combobox`, `Autocomplete`, `Taginput` and `Command`, which then ignores
+ * accents where the language treats letters as the same. The library's
+ * portaled content, such as a `Popover` panel, a `Modal` with `portal`, a
+ * `Toast` or a `Portal`'s children, keeps the same `dir` and `lang` though
+ * it renders outside the wrapper: in a container outside the wrapper, it
+ * sits in a `display: contents` element that carries them. Without a
+ * provider none of this changes.
+ *
+ * @function
+ * @param {LocaleProviderProps} props - Props for the LocaleProvider.
+ * @returns {JSX.Element} The wrapper, inside the context.
+ *
+ * @example
+ * <LocaleProvider locale="ar-EG">
+ *   <App />
+ * </LocaleProvider>
+ */
+const LocaleProvider = React.forwardRef(({ locale: localeProp, dir: dirProp, className, children, ...props }, ref) => {
+    const outer = React.useContext(LocaleContext);
+    const ownLocale = React.useMemo(() => validLocale(localeProp), [localeProp]);
+    const ownLocaleDir = React.useMemo(() => (ownLocale ? localeDirection(ownLocale) : undefined), [ownLocale]);
+    const locale = ownLocale || outer?.locale;
+    const dir = dirProp || ownLocaleDir || outer?.dir;
+    const value = React.useMemo(() => ({ locale, dir }), [locale, dir]);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    // The wrapper, for portaled content to tell whether its target is inside
+    // it, and the caller's ref. A callback ref's cleanup is held and run on
+    // detach, as Toast and Modal do, since React 18 discards the return value.
+    const elementRef = React.useRef(null);
+    const consumerCleanupRef = React.useRef(null);
+    const setElement = React.useCallback((node) => {
+        elementRef.current = node;
+        if (typeof ref === 'function') {
+            if (node === null) {
+                const consumerCleanup = consumerCleanupRef.current;
+                consumerCleanupRef.current = null;
+                if (consumerCleanup)
+                    consumerCleanup();
+                else
+                    ref(null);
+                return;
+            }
+            const cleanup = ref(node);
+            consumerCleanupRef.current =
+                typeof cleanup === 'function' ? cleanup : null;
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    return (jsxRuntime.jsx(LocaleContext.Provider, { value: value, children: jsxRuntime.jsx(LocaleElementContext.Provider, { value: elementRef, children: jsxRuntime.jsx("div", { ref: setElement, className: classNames(bulmaHelperClasses, className) || undefined, ...rest, dir: dir, lang: locale, children: children }) }) }));
+});
+LocaleProvider.displayName = 'LocaleProvider';
+/** What `useLocale` returns outside a provider, the same object each time. */
+const noLocale = {};
+/**
+ * The locale and direction the nearest `LocaleProvider` sets, for an app's own `Intl` calls or its own portaled content; both are `undefined` outside one.
+ *
+ * It isn't the page's direction: with no provider, or one that sets no
+ * direction, the page's `<html dir>` still decides. To act on the direction
+ * an element is laid out in, read `getComputedStyle(element).direction`, as
+ * the library's components do.
+ *
+ * @function
+ * @returns {LocaleContextValue} The nearest provider's `locale` and `dir`.
+ *
+ * @example
+ * const { locale } = useLocale();
+ * const price = new Intl.NumberFormat(locale, {
+ *   style: 'currency',
+ *   currency: 'EUR',
+ * }).format(12.5);
+ */
+function useLocale() {
+    return React.useContext(LocaleContext) ?? noLocale;
+}
+/**
+ * INTERNAL, deliberately not exported from `src/index.ts`. The nearest
+ * provider's settings, or `null` outside any provider, so a caller can tell
+ * "no provider" from "a provider that sets nothing".
+ */
+function useLocaleScope() {
+    return React.useContext(LocaleContext);
+}
+const displayContents = { display: 'contents' };
+/**
+ * INTERNAL, deliberately not exported from `src/index.ts`. Keeps the `dir`
+ * and `lang` of the nearest provider, or the `scope` given in their place,
+ * on content the library portals into `target`, which has left the
+ * provider's wrapper behind.
+ *
+ * A target inside the provider's own wrapper gets the content as it is: it
+ * inherits from the wrapper, and follows it when the provider changes.
+ * Content that must be its container's direct child, a `<tr>` portaled into
+ * a `<tbody>` there, stays one. Any other target, `document.body` included,
+ * gets the content inside a `display: contents` element carrying the
+ * values, which adds no box. So does content with a `scope` of its own, a
+ * picker's panel, since the provider's values aren't its own.
+ *
+ * Which of the two is decided once, when the content mounts, and kept while
+ * it stays: switching between them would put a different element in its
+ * place and remount everything inside, losing typed text, focus and timers.
+ * A change of locale or direction updates the wrapper's attributes instead.
+ * A target is never left bare because something else, such as `<html>`,
+ * happens to carry the same values, since that can stop being true without
+ * the content remounting. Outside a provider it renders the children alone,
+ * so nothing changes there.
+ */
+function LocalePortalScope({ children, target, scope, }) {
+    const provider = React.useContext(LocaleContext);
+    const element = React.useContext(LocaleElementContext);
+    const [wrap] = React.useState(() => scope !== undefined || !element?.current?.contains(target));
+    if (!provider || !wrap)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    const values = scope ?? provider;
+    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.
+/** 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.
+ */
+function useScopedLocale(own) {
+    const scope = useLocaleScope();
+    if (!scope)
+        return undefined;
+    return 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.
+ *
+ * @param own - The component's own locale, such as a picker's `locale`,
+ * which wins inside a provider.
+ */
+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]);
+}
+/**
+ * A matcher for filtering a list by what was typed, in the locale of the
+ * `LocaleProvider` around the component, or `null` outside one that gives a
+ * locale. It compares with `Intl.Collator` at `usage: 'search'` and
+ * `sensitivity: 'base'`, so it ignores case and accents where the language
+ * treats the letters as the same: "cafe" finds "Café", while in Swedish "a"
+ * doesn't find "å", a letter of its own there. Marks the language ignores
+ * count for nothing on either side, so in Arabic محمد finds مُحَمَّد and the
+ * other way round. An empty query, or one of nothing but such marks,
+ * matches everything.
+ */
+function useLocaleMatcher() {
+    const locale = useScopedLocale();
+    return React.useMemo(() => {
+        if (!locale)
+            return null;
+        const collator = new Intl.Collator(locale, {
+            usage: 'search',
+            sensitivity: 'base',
+        });
+        return (text, query) => {
+            const needle = query.normalize('NFC');
+            if (collator.compare(needle, '') === 0)
+                return true;
+            // Compared by code point, so a slice never splits a surrogate pair.
+            const chars = Array.from(text.normalize('NFC'));
+            const marks = chars.map(char => MARK.test(char));
+            // A slice equal to the needle can be longer or shorter than it: the
+            // marks the collator ignores, Arabic harakat or Hebrew niqqud, take
+            // code points on one side and not the other, and the expansions the
+            // collator makes, "ß" against "ss" or "æ" against "ae", turn one letter
+            // into two. So each slice runs from a letter to just before the next
+            // letter, never cutting a letter from its marks, and the slices from
+            // one start grow until they hold twice the needle's letters, which
+            // those expansions can't get past. That keeps the work proportional to
+            // the text's length, however long a label is, rather than to its
+            // square.
+            const most = 2 * Array.from(needle).filter(char => !MARK.test(char)).length;
+            for (let start = 0; start < chars.length; start++) {
+                if (marks[start])
+                    continue;
+                let letters = 0;
+                for (let end = start + 1; end <= chars.length; end++) {
+                    if (!marks[end - 1])
+                        letters++;
+                    if (letters > most)
+                        break;
+                    if (marks[end])
+                        continue;
+                    if (collator.compare(chars.slice(start, end).join(''), needle) === 0) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+    }, [locale]);
+}
+
 /**
  * The `Avatars` component renders an overlapping/stacked group of `Avatar`s, the "members" list pattern.
  *
@@ -1806,6 +2160,7 @@ function flattenChildren(children, keyPrefix = '') {
  */
 const AvatarsComponent = ({ className, max, size, shape, spacing = 'md', spaced = false, surplusLabel, style, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
+    const formatNumber = useNumberFormat();
     // 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';
@@ -1837,11 +2192,14 @@ const AvatarsComponent = ({ className, max, size, shape, spacing = 'md', spaced
             React.cloneElement(child, {
                 ...(size !== undefined ? { size } : {}),
                 ...(shape !== undefined ? { shape } : {}),
-            })), overflowCount > 0 && (jsxRuntime.jsx(Avatar, { initials: `+${overflowCount}`, alt: 
+            })), overflowCount > 0 && (jsxRuntime.jsx(Avatar, { initials: formatNumber
+                    ? formatNumber(overflowCount, { signDisplay: 'always' })
+                    : `+${overflowCount}`, alt: 
                 // `||` (not a plain ternary): an empty string from surplusLabel
                 // would make the bubble decorative (alt="") and hide the count
                 // from assistive tech — fall back to the default label instead.
-                surplusLabel?.(overflowCount) || `${overflowCount} more`, size: size, shape: shape, className: surplusClass }))] }));
+                surplusLabel?.(overflowCount) ||
+                    `${formatNumber ? formatNumber(overflowCount) : overflowCount} more`, size: size, shape: shape, className: surplusClass }))] }));
 };
 const Avatars = withSubComponents(AvatarsComponent, { Avatar }, 'Avatars');
 
@@ -1891,15 +2249,19 @@ 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 displayValue = React.useMemo(() => {
         if (dot || !hasContent)
             return undefined;
         // max only applies to numeric content; any other node renders verbatim.
         if (typeof content === 'number') {
-            return content > sanitizedMax ? `${sanitizedMax}+` : String(content);
+            const write = formatNumber ?? String;
+            return content > sanitizedMax
+                ? `${write(sanitizedMax)}+`
+                : write(content);
         }
         return content;
-    }, [dot, hasContent, content, sanitizedMax]);
+    }, [dot, hasContent, content, sanitizedMax, formatNumber]);
     // Only primitive content produces a meaningful aria-label; a custom node
     // supplies its own accessible text, so we leave role="status" unlabeled.
     const ariaLabel = typeof displayValue === 'string' || typeof displayValue === 'number'
@@ -3909,255 +4271,6 @@ function useIsHydrated() {
     return React.useSyncExternalStore(subscribeToNothing, getClientSnapshot, getServerSnapshot);
 }
 
-// INTERNAL: deliberately not exported from src/index.ts. What a locale says
-// about its direction, read from `Intl.Locale` where the engine has the data,
-// and about its week, read from a copy of CLDR's week data.
-/**
- * Scripts written right to left: every script for which ICU's text info
- * says `rtl`, as Node reported it, and `Aran`, the Nastaliq form of Arabic
- * that WebKit fills in for Urdu. Read only where the engine has no text info
- * of its own, which includes Firefox before 153.
- */
-const RTL_SCRIPTS = ' Adlm Arab Aran Armi Avst Chrs Cprt Elym Gara Hatr Hebr Hung Khar Lydi ' +
-    'Mand Mani Mend Merc Mero Narb Nbat Nkoo Orkh Ougr Palm Phli Phlp Phnx ' +
-    'Prti Rohg Samr Sarb Sidt Sogd Sogo Syrc Thaa Yezi ';
-/**
- * Widely used languages whose usual script reads right to left, for an engine
- * that can't fill in a locale's script with `maximize()`.
- */
-const RTL_LANGUAGES = ' ar ckb dv fa he iw ji ks mzn nqo pnb ps sd syr ug ur yi ';
-/**
- * The regions whose week doesn't start on Monday, by the day it starts on
- * (0 = Sunday, 5 = Friday, 6 = Saturday), from CLDR 48's week data as Node
- * reported it. The library reads this rather than `Intl.Locale`'s week info
- * because engines disagree: Firefox before 153 has none, and WebKit's differs
- * from Node's, Chromium's and current Firefox's for China, Algeria, Jordan and
- * Iceland among others, so an inline calendar rendered on the server would
- * fail to hydrate there. With one table, the server and every browser agree.
- */
-const WEEK_STARTS = [
-    [
-        0,
-        ' AG AS BD BR BS BT BU BW BZ CA CO DM DO ET GT GU HK HN ID IL IN IS JM JP ' +
-            'KE KH KR LA MH MM MO MT MX MZ NI NP PA PE PH PK PR PT PY RH SA SG SV TH ' +
-            'TT TW UM US VE VI WS YD YE ZA ZW ',
-    ],
-    [5, ' MV '],
-    [6, ' AF BH DJ DZ EG IQ IR JO KW LY OM QA SD SY '],
-];
-/** Whether a space-separated list, padded with spaces, holds `code`. */
-const listed = (list, code) => list.includes(` ${code} `);
-/** The `-u-fw-` keyword's values, by the day they name. */
-const FW_DAYS = {
-    sun: 0,
-    mon: 1,
-    tue: 2,
-    wed: 3,
-    thu: 4,
-    fri: 5,
-    sat: 6,
-};
-/**
- * The canonical form of a BCP 47 tag (`"en-us"` becomes `"en-US"`), or
- * `undefined` for an empty or missing one. Throws a `RangeError` for a tag
- * `Intl` refuses, as `Intl.DateTimeFormat` would.
- */
-function canonicalLocale(tag) {
-    if (!tag)
-        return undefined;
-    return Intl.getCanonicalLocales(tag)[0];
-}
-/**
- * The direction a locale's script is written in: from `Intl.Locale`'s text
- * info, else from the script `maximize()` fills in, else from the language.
- *
- * @param locale - A canonical tag, as `canonicalLocale` returns.
- */
-function localeDirection(locale) {
-    const intlLocale = new Intl.Locale(locale);
-    const info = intlLocale;
-    const direction = typeof info.getTextInfo === 'function'
-        ? info.getTextInfo().direction
-        : info.textInfo?.direction;
-    if (direction === 'rtl' || direction === 'ltr')
-        return direction;
-    if (typeof intlLocale.maximize === 'function') {
-        const script = intlLocale.maximize().script;
-        return script && listed(RTL_SCRIPTS, script) ? 'rtl' : 'ltr';
-    }
-    return listed(RTL_LANGUAGES, intlLocale.language) ? 'rtl' : 'ltr';
-}
-/**
- * The day a locale's week starts on, 0 for Sunday, as `getWeekInfo()` reads
- * it: the tag's `-u-fw-` keyword, else the region its `-u-rg-` keyword names,
- * else its own region or the one `maximize()` fills in, looked up in CLDR's
- * week data, where a region not listed starts on Monday.
- *
- * @param locale - A canonical tag, as `canonicalLocale` returns.
- */
-function localeFirstDay(locale) {
-    const fw = /-u(?:-[a-z0-9]{2,8})*?-fw-([a-z]{3})(?=-|$)/i.exec(locale);
-    if (fw && fw[1].toLowerCase() in FW_DAYS)
-        return FW_DAYS[fw[1].toLowerCase()];
-    const rg = /-u(?:-[a-z0-9]{2,8})*?-rg-([a-z]{2})[a-z0-9]{1,4}(?=-|$)/i.exec(locale);
-    const intlLocale = new Intl.Locale(locale);
-    const region = rg
-        ? rg[1].toUpperCase()
-        : typeof intlLocale.maximize === 'function'
-            ? intlLocale.maximize().region
-            : intlLocale.region;
-    if (region) {
-        for (const [day, regions] of WEEK_STARTS) {
-            if (listed(regions, region))
-                return day;
-        }
-    }
-    return 1;
-}
-
-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) {
-    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.');
-        return undefined;
-    }
-}
-/**
- * Sets the language and writing direction for the part of the app inside it, on a wrapper `<div>` and on what the library portals out of it.
- *
- * The wrapper carries `dir` and `lang`, so CSS and the components that read
- * the computed direction follow it, as they follow `<html dir>`. A `locale`
- * alone sets the direction of its script, and a `dir` sets the direction
- * whatever the locale. A nested provider keeps whatever it leaves unset.
- *
- * Inside it, the date and time pickers take its `locale` unless given their
- * own, and their week starts on the first day of the locale they use unless
- * `firstDayOfWeek` is set, and a picker with a `locale` of its own is read
- * like a nested provider. The library's portaled content, such as a
- * `Popover` panel, a `Modal` with `portal`, a `Toast` or a `Portal`'s
- * children, keeps the same `dir` and `lang` though it renders outside the
- * wrapper: in a container outside the wrapper, it sits in a
- * `display: contents` element that carries them. Without a provider none of
- * this changes.
- *
- * @function
- * @param {LocaleProviderProps} props - Props for the LocaleProvider.
- * @returns {JSX.Element} The wrapper, inside the context.
- *
- * @example
- * <LocaleProvider locale="ar-EG">
- *   <App />
- * </LocaleProvider>
- */
-const LocaleProvider = React.forwardRef(({ locale: localeProp, dir: dirProp, className, children, ...props }, ref) => {
-    const outer = React.useContext(LocaleContext);
-    const ownLocale = React.useMemo(() => validLocale(localeProp), [localeProp]);
-    const ownLocaleDir = React.useMemo(() => (ownLocale ? localeDirection(ownLocale) : undefined), [ownLocale]);
-    const locale = ownLocale || outer?.locale;
-    const dir = dirProp || ownLocaleDir || outer?.dir;
-    const value = React.useMemo(() => ({ locale, dir }), [locale, dir]);
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    // The wrapper, for portaled content to tell whether its target is inside
-    // it, and the caller's ref. A callback ref's cleanup is held and run on
-    // detach, as Toast and Modal do, since React 18 discards the return value.
-    const elementRef = React.useRef(null);
-    const consumerCleanupRef = React.useRef(null);
-    const setElement = React.useCallback((node) => {
-        elementRef.current = node;
-        if (typeof ref === 'function') {
-            if (node === null) {
-                const consumerCleanup = consumerCleanupRef.current;
-                consumerCleanupRef.current = null;
-                if (consumerCleanup)
-                    consumerCleanup();
-                else
-                    ref(null);
-                return;
-            }
-            const cleanup = ref(node);
-            consumerCleanupRef.current =
-                typeof cleanup === 'function' ? cleanup : null;
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-    }, [ref]);
-    return (jsxRuntime.jsx(LocaleContext.Provider, { value: value, children: jsxRuntime.jsx(LocaleElementContext.Provider, { value: elementRef, children: jsxRuntime.jsx("div", { ref: setElement, className: classNames(bulmaHelperClasses, className) || undefined, ...rest, dir: dir, lang: locale, children: children }) }) }));
-});
-LocaleProvider.displayName = 'LocaleProvider';
-/** What `useLocale` returns outside a provider, the same object each time. */
-const noLocale = {};
-/**
- * The locale and direction the nearest `LocaleProvider` sets, for an app's own `Intl` calls or its own portaled content; both are `undefined` outside one.
- *
- * It isn't the page's direction: with no provider, or one that sets no
- * direction, the page's `<html dir>` still decides. To act on the direction
- * an element is laid out in, read `getComputedStyle(element).direction`, as
- * the library's components do.
- *
- * @function
- * @returns {LocaleContextValue} The nearest provider's `locale` and `dir`.
- *
- * @example
- * const { locale } = useLocale();
- * const price = new Intl.NumberFormat(locale, {
- *   style: 'currency',
- *   currency: 'EUR',
- * }).format(12.5);
- */
-function useLocale() {
-    return React.useContext(LocaleContext) ?? noLocale;
-}
-/**
- * INTERNAL, deliberately not exported from `src/index.ts`. The nearest
- * provider's settings, or `null` outside any provider, so a caller can tell
- * "no provider" from "a provider that sets nothing".
- */
-function useLocaleScope() {
-    return React.useContext(LocaleContext);
-}
-const displayContents = { display: 'contents' };
-/**
- * INTERNAL, deliberately not exported from `src/index.ts`. Keeps the `dir`
- * and `lang` of the nearest provider, or the `scope` given in their place,
- * on content the library portals into `target`, which has left the
- * provider's wrapper behind.
- *
- * A target inside the provider's own wrapper gets the content as it is: it
- * inherits from the wrapper, and follows it when the provider changes.
- * Content that must be its container's direct child, a `<tr>` portaled into
- * a `<tbody>` there, stays one. Any other target, `document.body` included,
- * gets the content inside a `display: contents` element carrying the
- * values, which adds no box. So does content with a `scope` of its own, a
- * picker's panel, since the provider's values aren't its own.
- *
- * Which of the two is decided once, when the content mounts, and kept while
- * it stays: switching between them would put a different element in its
- * place and remount everything inside, losing typed text, focus and timers.
- * A change of locale or direction updates the wrapper's attributes instead.
- * A target is never left bare because something else, such as `<html>`,
- * happens to carry the same values, since that can stop being true without
- * the content remounting. Outside a provider it renders the children alone,
- * so nothing changes there.
- */
-function LocalePortalScope({ children, target, scope, }) {
-    const provider = React.useContext(LocaleContext);
-    const element = React.useContext(LocaleElementContext);
-    const [wrap] = React.useState(() => scope !== undefined || !element?.current?.contains(target));
-    if (!provider || !wrap)
-        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
-    const values = scope ?? provider;
-    return (jsxRuntime.jsx("div", { dir: values.dir, lang: values.locale, style: displayContents, children: children }));
-}
-
 /**
  * Resolves a portal target: an `HTMLElement` is used directly, a non-empty
  * `string` is treated as a `document.querySelector` selector (falling back to
@@ -5583,6 +5696,7 @@ const PaginationComponent = ({ color, textColor, bgColor, size, align, rounded,
         backgroundColor: bgColor,
         ...props,
     });
+    const formatNumber = useNumberFormat();
     // Generate Bulma classes with prefix
     const bulmaClasses = usePrefixedClassNames('pagination', {
         [`is-${color}`]: color,
@@ -5625,7 +5739,13 @@ const PaginationComponent = ({ color, textColor, bgColor, size, align, rounded,
         });
         const atStart = disabled || page <= 1;
         const atEnd = disabled || page >= pages;
-        content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PaginationPrevious, { disabled: atStart, ...linkTo(page - 1, atStart), children: previousLabel }), jsxRuntime.jsx(PaginationNext, { disabled: atEnd, ...linkTo(page + 1, atEnd), children: nextLabel }), jsxRuntime.jsx(PaginationList, { children: pageItems(pages, page, whole(siblingCount, 1), whole(boundaryCount, 1)).map(item => typeof item === 'number' ? (jsxRuntime.jsx(PaginationLink, { "aria-label": getPageLabel ? getPageLabel(item) : `Page ${item}`, active: item === page, disabled: disabled, ...linkTo(item, Boolean(disabled)), children: item }, item)) : (jsxRuntime.jsx(PaginationEllipsis, {}, item))) })] }));
+        content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PaginationPrevious, { disabled: atStart, ...linkTo(page - 1, atStart), children: previousLabel }), jsxRuntime.jsx(PaginationNext, { disabled: atEnd, ...linkTo(page + 1, atEnd), children: nextLabel }), jsxRuntime.jsx(PaginationList, { children: pageItems(pages, page, whole(siblingCount, 1), whole(boundaryCount, 1)).map(item => {
+                        if (typeof item !== 'number') {
+                            return jsxRuntime.jsx(PaginationEllipsis, {}, item);
+                        }
+                        const shown = formatNumber ? formatNumber(item) : item;
+                        return (jsxRuntime.jsx(PaginationLink, { "aria-label": getPageLabel ? getPageLabel(item) : `Page ${shown}`, active: item === page, disabled: disabled, ...linkTo(item, Boolean(disabled)), children: shown }, item));
+                    }) })] }));
     }
     return (jsxRuntime.jsx("nav", { className: paginationClasses, role: "navigation", "aria-label": "pagination", ...rest, children: content }));
 };
@@ -8330,6 +8450,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 stepClasses = classNames(usePrefixedClassNames('steps-segment', {
         'is-active': isActive,
         'is-completed': isCompleted,
@@ -8342,7 +8463,9 @@ const Step = ({ isActive = false, isCompleted = false, label, icon, clickable =
     const markerContent = icon ||
         (isCompleted && resolvedCompletedIcon
             ? resolvedCompletedIcon
-            : (stepNumber ?? null));
+            : stepNumber == null || !formatNumber
+                ? (stepNumber ?? null)
+                : formatNumber(stepNumber));
     const title = label || children;
     const current = isActive ? 'step' : undefined;
     // The step stays a list item, and a real button inside it does the
@@ -12621,20 +12744,26 @@ function setRefs$1(node, own, forwarded) {
 /**
  * The default filter: the actions whose label, keywords or description hold
  * the search, ignoring case and the spaces around it, label matches first and
- * the order otherwise kept. An empty search keeps them all.
+ * the order otherwise kept. An empty search keeps them all. `matchText`, a
+ * `LocaleProvider`'s locale-aware matcher, replaces the lowercased
+ * comparison when there is one.
  */
-const filterActions = (query, actions) => {
-    const term = query.trim().toLowerCase();
-    if (term === '')
+const filterActions = (query, actions, matchText) => {
+    const search = query.trim();
+    if (search === '')
         return actions;
+    const term = search.toLowerCase();
+    const holds = matchText
+        ? (text) => matchText(text, search)
+        : (text) => text.toLowerCase().includes(term);
     const byLabel = [];
     const byOther = [];
     for (const action of actions) {
-        if (action.label.toLowerCase().includes(term)) {
+        if (holds(action.label)) {
             byLabel.push(action);
         }
-        else if (action.description?.toLowerCase().includes(term) ||
-            action.keywords?.some(keyword => keyword.toLowerCase().includes(term))) {
+        else if ((action.description !== undefined && holds(action.description)) ||
+            action.keywords?.some(holds)) {
             byOther.push(action);
         }
     }
@@ -12870,9 +12999,12 @@ CommandEmpty.displayName = 'CommandEmpty';
  * The field, and the actions that match the search, grouped, or the empty
  * message. The search is the parts root's, read from its context.
  */
-const CommandActionsContent = ({ actions, filter = filterActions, placeholder, empty, }) => {
+const CommandActionsContent = ({ actions, filter, placeholder, empty, }) => {
     const { query } = useCommand();
-    const shown = filter(query, actions);
+    const matchText = useLocaleMatcher();
+    const shown = filter
+        ? filter(query, actions)
+        : filterActions(query, actions, matchText);
     // Each group where the matches first name it, and the actions with none
     // together where the first of them is, so the best match stays on top.
     const sections = new Map();
@@ -14169,13 +14301,17 @@ 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 writeShare = (share) => formatNumber
+        ? formatNumber(share / 100, { style: 'percent' })
+        : `${share}%`;
     const roleProps = sections
         ? {
             role: 'img',
             'aria-label': [
                 label || rest['aria-label'],
                 sections
-                    .map((section, i) => `${section.label} ${Math.round(arcs[i].length)}%`)
+                    .map((section, i) => `${section.label} ${writeShare(Math.round(arcs[i].length))}`)
                     .join(', '),
             ]
                 .filter(Boolean)
@@ -14922,10 +15058,12 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
             : undefined);
         onChange?.(event);
     };
+    const formatNumber = useNumberFormat();
     const pickedText = picked &&
         (picked.count === 1
             ? picked.firstName
-            : (pickedFilesLabel?.(picked.count) ?? `${picked.count} files`));
+            : (pickedFilesLabel?.(picked.count) ??
+                `${formatNumber ? formatNumber(picked.count) : picked.count} files`));
     const shownName = fileName ?? pickedText;
     const insideField = useInsideField();
     const insideControl = useInsideControl();
@@ -15517,11 +15655,13 @@ const Slider = React.forwardRef((props, ref) => {
         : 0;
     // Scale helper
     const scaleValue = React.useCallback((v) => (scale ? scale(v) : v), [scale]);
-    // Format helper
+    // Format helper: the caller's, else the locale's, else the number as is.
+    const formatNumber = useNumberFormat();
+    const writeNumber = React.useCallback((v) => (formatNumber ? formatNumber(v) : v.toString()), [formatNumber]);
     const formatValue = React.useCallback((v) => {
         const scaled = scaleValue(v);
-        return formatOutput ? formatOutput(scaled) : scaled.toString();
-    }, [formatOutput, scaleValue]);
+        return formatOutput ? formatOutput(scaled) : writeNumber(scaled);
+    }, [formatOutput, scaleValue, writeNumber]);
     // --- Handlers ---
     const handleSingleChange = React.useCallback((e) => {
         const newValue = parseFloat(e.target.value);
@@ -15641,7 +15781,7 @@ const Slider = React.forwardRef((props, ref) => {
             ariaProps['aria-valuetext'] = getAriaValueText(value);
         }
         else if (scale) {
-            ariaProps['aria-valuetext'] = scaleValue(value).toString();
+            ariaProps['aria-valuetext'] = writeNumber(scaleValue(value));
         }
         return ariaProps;
     };
@@ -16255,6 +16395,7 @@ const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, messa
         callerProps: props,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const formatNumber = useNumberFormat();
     const starBaseId = React.useId();
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const [hoverValue, setHoverValue] = React.useState(null);
@@ -16363,7 +16504,13 @@ const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, messa
     };
     // Format score display
     const getScoreDisplay = () => {
-        if (precision < 1 && currentValue % 1 !== 0) {
+        const fractional = precision < 1 && currentValue % 1 !== 0;
+        if (formatNumber) {
+            return formatNumber(currentValue, fractional
+                ? { minimumFractionDigits: 1, maximumFractionDigits: 1 }
+                : undefined);
+        }
+        if (fractional) {
             return currentValue.toFixed(1);
         }
         return currentValue;
@@ -16527,6 +16674,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         needsLabelId: true,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const matchText = useLocaleMatcher();
     const { classPrefix } = useConfig();
     const containerRef = React.useRef(null);
     const inputRef = React.useRef(null);
@@ -16556,6 +16704,8 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     // Filter data based on input
     const filteredData = data.filter(item => {
         const displayValue = getDisplayValue(item);
+        if (matchText)
+            return matchText(displayValue, inputValue);
         return displayValue.toLowerCase().includes(inputValue.toLowerCase());
     });
     // The dropdown shows the options or, when nothing matches, the `empty`
@@ -17262,6 +17412,7 @@ const ComboboxFromData = React.forwardRef((props, ref) => {
     };
     const controlled = value !== undefined;
     const [ownValue, setOwnValue] = React.useState(() => asList(defaultValue));
+    const matchText = useLocaleMatcher();
     const picked = controlled ? asList(value) : ownValue;
     const change = (next) => {
         if (!controlled)
@@ -17289,8 +17440,11 @@ const ComboboxFromData = React.forwardRef((props, ref) => {
         }
         setQuery(null);
     };
-    const term = (query ?? '').trim().toLowerCase();
-    const shown = items.filter(item => labelOf(item).toLowerCase().includes(term));
+    const typed = (query ?? '').trim();
+    const term = typed.toLowerCase();
+    const shown = items.filter(item => matchText
+        ? matchText(labelOf(item), typed)
+        : labelOf(item).toLowerCase().includes(term));
     const inputRef = React.useRef(null);
     const select = (pick) => {
         onSelect?.(pick);
@@ -17449,6 +17603,8 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const { classPrefix } = useConfig();
     const defaultIconLibrary = useIconLibrary();
+    const formatNumber = useNumberFormat();
+    const matchText = useLocaleMatcher();
     const resolvedLibrary = iconLibraryProp || defaultIconLibrary || 'fa';
     const pcn = (...args) => prefixedClassNames(classPrefix, ...args);
     const containerRef = React.useRef(null);
@@ -17490,7 +17646,9 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     // Filter autocomplete data
     const filteredData = data.filter(item => {
         const displayValue = item.toLowerCase();
-        const matchesInput = displayValue.includes(inputValue.toLowerCase());
+        const matchesInput = matchText
+            ? matchText(item, inputValue)
+            : displayValue.includes(inputValue.toLowerCase());
         const notAlreadyAdded = allowDuplicates ||
             !tags.some(tag => getDisplayValue(tag).toLowerCase() === displayValue);
         const hasInput = inputValue || (openOnFocus && isActive);
@@ -17740,10 +17898,11 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const combinedClasses = classNames(taginputClasses, bulmaHelperClasses, className);
     // Counter text
     const showCounter = hasCounter && (maxTags !== undefined || maxlength !== undefined);
+    const write = formatNumber ?? String;
     const counterText = maxTags !== undefined
-        ? `${tags.length} / ${maxTags}`
+        ? `${write(tags.length)} / ${write(maxTags)}`
         : maxlength !== undefined
-            ? `${inputValue.length} / ${maxlength}`
+            ? `${write(inputValue.length)} / ${write(maxlength)}`
             : '';
     const counterClasses = pcn('help', 'counter');
     const tagsClasses = pcn('tags');