@allxsmith/bestax-bulma 5.52.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'
@@ -3970,6 +4332,17 @@ function usePortalContainer() {
  * also reaches what the library's components portal, such as Popover's
  * `appendToBody` panel or a `Modal` with `portal`.
  *
+ * Inside a `LocaleProvider`, the children keep its `dir` and `lang`. A
+ * container inside the provider's own wrapper takes the children as they
+ * are, and they follow the provider through the page. Any other,
+ * `document.body` included, gets them inside one `<div>` carrying the
+ * provider's values, with `display: contents` so it adds no box. It is
+ * still an element, so content that must be the container's direct child,
+ * a `<tr>` in a `<tbody>`, or that a direct-child selector styles, belongs
+ * in a container inside the provider. Which of the two is settled when the
+ * children mount, so a change of locale updates them in place rather than
+ * remounting them.
+ *
  * Tab order and focus follow the DOM too. Content portaled from inside a
  * focus trap is no longer inside the trapped element, so the trap neither
  * reaches it nor holds focus there: render nested overlays inside the
@@ -3999,7 +4372,8 @@ function Portal({ children, container, disabled = false }) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
     if (!hydrated)
         return null;
-    return reactDom.createPortal(children, resolveContainer(container));
+    const target = resolveContainer(container);
+    return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: children }), target);
 }
 
 // INTERNAL: deliberately not exported from src/index.ts.
@@ -4911,7 +5285,7 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
     modalElement = (jsxRuntime.jsx(ModalCloseContext.Provider, { value: onClose, children: modalElement }));
     if (isPortaled) {
         const target = resolveContainer(typeof portal === 'boolean' ? undefined : portal);
-        return reactDom.createPortal(modalElement, target);
+        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: modalElement }), target);
     }
     return modalElement;
 });
@@ -5322,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,
@@ -5364,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 }));
 };
@@ -8069,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,
@@ -8081,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
@@ -8786,7 +9170,8 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
     }
     // Render to portal for proper stacking
     if (typeof document !== 'undefined') {
-        return reactDom.createPortal(sidebarContent, resolveContainer());
+        const target = resolveContainer();
+        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: sidebarContent }), target);
     }
     return null;
 });
@@ -9051,7 +9436,8 @@ const Toast = React.forwardRef(({ message, type = 'default', actionType, positio
     }
     const toastContent = jsxRuntime.jsx("div", { className: containerClasses, children: toastElement });
     if (typeof document !== 'undefined') {
-        return reactDom.createPortal(toastContent, resolveContainer(container));
+        const target = resolveContainer(container);
+        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: toastContent }), target);
     }
     return null;
 });
@@ -9213,10 +9599,11 @@ const ToastContainer = ({ position = 'top-right' }) => {
         return null;
     }
     const stacks = groupIntoPositionStacks(toastList, t => t.props.position, position, toastStackOrder);
-    return reactDom.createPortal(stacks.map(stack => (jsxRuntime.jsx("div", { className: `toast-container is-${stack.position}`, children: stack.items.map(t => {
-            const { queue: _queue, ...toastProps } = t.props;
-            return (jsxRuntime.jsx(Toast, { ...toastProps, position: stack.position, onClose: () => toast.close(t.id) }, t.id));
-        }) }, stack.key))), resolveContainer());
+    const target = resolveContainer();
+    return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, children: stacks.map(stack => (jsxRuntime.jsx("div", { className: `toast-container is-${stack.position}`, children: stack.items.map(t => {
+                const { queue: _queue, ...toastProps } = t.props;
+                return (jsxRuntime.jsx(Toast, { ...toastProps, position: stack.position, onClose: () => toast.close(t.id) }, t.id));
+            }) }, stack.key))) }), target);
 };
 
 /**
@@ -10566,6 +10953,22 @@ const useInsideControl = () => React.useContext(ControlContext);
 const FieldProvider = FieldContext.Provider;
 /** Provider for Control context — used internally by Control component. */
 const ControlProvider = ControlContext.Provider;
+const FieldsetDisabledContext = React.createContext(false);
+/**
+ * An input's `disabled`: its own prop when the caller set one, otherwise
+ * whether a disabled `Fieldset` holds it. A `<fieldset disabled>` disables the
+ * native controls inside on its own, and this carries the same state to what
+ * the browser doesn't reach, such as Rate's stars, the time wheels, and the
+ * `is-disabled` classes. The content of a Fieldset's legend reads the state
+ * from outside that Fieldset, as the browser leaves the first legend's
+ * controls enabled. Internal; not part of the public API.
+ */
+const useFieldsetDisabled = (disabled) => {
+    const inherited = React.useContext(FieldsetDisabledContext);
+    return disabled ?? inherited;
+};
+/** Provider for a Fieldset's disabled state, used internally by Fieldset. */
+const FieldsetDisabledProvider = FieldsetDisabledContext.Provider;
 // Each Field-shaping prop, with what takes its place on a `Field` the caller
 // wraps around the `Control`. `message` needs nothing there, because the
 // wrapper still renders it inside `Field > Control`. The other Field-level
@@ -10847,7 +11250,8 @@ const checkboxSizes = ['small', 'normal', 'medium', 'large'];
  *   <Checkbox value="vue">Vue</Checkbox>
  * </Checkboxes>
  */
-const Checkbox = React.forwardRef(({ color, size, className, children, textColor, disabled, name, value, checked, defaultChecked, indeterminate, onChange, ...props }, ref) => {
+const Checkbox = React.forwardRef(({ color, size, className, children, textColor, disabled: disabledProp, name, value, checked, defaultChecked, indeterminate, onChange, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         ...props,
@@ -12082,7 +12486,8 @@ const Field = withSubComponents(FieldComponent, {
  * @returns {JSX.Element} The rendered input element.
  * @see {@link https://bulma.io/documentation/form/input/ | Bulma Input documentation}
  */
-const InputBase = React.forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading, className, disabled, readOnly, ...props }, ref) => {
+const InputBase = React.forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading, className, disabled: disabledProp, readOnly, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
@@ -12339,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);
         }
     }
@@ -12588,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();
@@ -13740,7 +14154,8 @@ const NotificationContainer = ({ position = 'top-right' }) => {
         return null;
     }
     const stacks = groupIntoPositionStacks(items, item => item.options.position, position, notificationStackOrder);
-    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { 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 })] }), resolveContainer());
+    const target = resolveContainer();
+    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);
 };
 
 /**
@@ -13886,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)
@@ -14349,7 +14768,8 @@ const checkboxCardColors = [
  *   <CheckboxCard value="domain" title="Custom domain" description="Bring your own." />
  * </Checkboxes>
  */
-const CheckboxCard = React.forwardRef(({ title, description, children, hasIndicator = true, color, className, textColor, disabled, name, value, checked, defaultChecked, indeterminate, onChange, ...props }, ref) => {
+const CheckboxCard = React.forwardRef(({ title, description, children, hasIndicator = true, color, className, textColor, disabled: disabledProp, name, value, checked, defaultChecked, indeterminate, onChange, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         ...props,
@@ -14544,6 +14964,61 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
 };
 const Checkboxes = withSubComponents(CheckboxesComponent, { Checkbox }, 'Checkboxes');
 
+// What an unlabeled Field passes on: no label names anything inside.
+const NO_LABEL = {};
+/**
+ * The `Fieldset` component groups a section of a form in a native
+ * `<fieldset>`, named by its `legend`, which a `disabled` switches off as a
+ * whole.
+ *
+ * It starts its own Field scope: inside it, nothing reads as inside a
+ * `Field` or `Control`, so the convenience inputs render their own `Field`,
+ * and a labeled `Field` around the Fieldset names nothing in it.
+ *
+ * @function
+ * @param {FieldsetProps} props - Props for the Fieldset component.
+ * @returns {JSX.Element} The rendered fieldset.
+ *
+ * @example
+ * <Fieldset legend="Shipping address" message="We only ship within the EU.">
+ *   <Input label="Street" name="street" />
+ *   <Input label="City" name="city" />
+ * </Fieldset>
+ *
+ * @example
+ * // A form that's saving
+ * <Fieldset disabled={saving} variant="unstyled">
+ *   <Input label="Name" name="name" />
+ *   <Rate label="Rating" name="rating" />
+ * </Fieldset>
+ */
+const Fieldset = React.forwardRef(({ legend, legendProps, variant = 'default', disabled, message, messageColor, textColor, bgColor, className, children, 'aria-describedby': ariaDescribedBy, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const mainClass = usePrefixedClassNames('fieldset', {
+        'is-filled': variant === 'filled',
+        'is-unstyled': variant === 'unstyled',
+    });
+    const legendClass = usePrefixedClassNames('fieldset-legend');
+    const helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    // The legend's controls take the state from outside, as the browser
+    // leaves the first legend's controls enabled, and the content takes this
+    // Fieldset's on top of it, as a disabled one disables those inside it.
+    const outerDisabled = useFieldsetDisabled(undefined);
+    const groupDisabled = !!disabled || outerDisabled;
+    const messageId = `${React.useId()}-message`;
+    const describedBy = [ariaDescribedBy, message ? messageId : undefined]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    return (jsxRuntime.jsx(FieldProvider, { value: false, children: jsxRuntime.jsx(ControlProvider, { value: false, children: jsxRuntime.jsx(FieldLabelIdProvider, { value: undefined, children: jsxRuntime.jsx(FieldLabelElementIdProvider, { value: undefined, children: jsxRuntime.jsx(FieldLabelForProvider, { value: NO_LABEL, children: jsxRuntime.jsx(FieldLabelForReportProvider, { value: undefined, children: jsxRuntime.jsxs("fieldset", { ref: ref, className: classNames(mainClass, bulmaHelperClasses, className), disabled: disabled, "aria-describedby": describedBy, ...rest, children: [legend ? (jsxRuntime.jsx("legend", { ...legendProps, className: classNames(legendClass, legendProps?.className), children: legend })) : null, jsxRuntime.jsx(FieldsetDisabledProvider, { value: groupDisabled, children: children }), message ? (jsxRuntime.jsx("p", { id: messageId, className: helpClass, children: message })) : null] }) }) }) }) }) }) }));
+});
+Fieldset.displayName = 'Fieldset';
+
 /**
  * The `File` component provides a Bulma-styled file input, supporting color, size, boxed/fullwidth/align styles, icons, "has name", and filename display.
  *
@@ -14583,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();
@@ -14704,7 +15181,8 @@ const radioSizes = ['small', 'normal', 'medium', 'large'];
  *   <Radio value="blue">Blue</Radio>
  * </Radios>
  */
-const Radio = React.forwardRef(({ color, size, className, children, textColor, disabled, name, value, checked, defaultChecked, onChange, ...props }, ref) => {
+const Radio = React.forwardRef(({ color, size, className, children, textColor, disabled: disabledProp, name, value, checked, defaultChecked, onChange, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         ...props,
@@ -14774,7 +15252,8 @@ const radioCardColors = [
  *   <RadioCard value="express" title="Express" description="Arrives tomorrow." />
  * </Radios>
  */
-const RadioCard = React.forwardRef(({ title, description, children, hasIndicator = true, color, className, textColor, disabled, name, value, checked, defaultChecked, onChange, ...props }, ref) => {
+const RadioCard = React.forwardRef(({ title, description, children, hasIndicator = true, color, className, textColor, disabled: disabledProp, name, value, checked, defaultChecked, onChange, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         ...props,
@@ -14973,7 +15452,8 @@ const switchSizes = ['small', 'normal', 'medium', 'large'];
  *   Feature enabled
  * </Switch>
  */
-const Switch = React.forwardRef(({ color, size, isRounded, isThin, isOutlined, isRtl, passiveType, className, children, textColor, disabled, ...props }, ref) => {
+const Switch = React.forwardRef(({ color, size, isRounded, isThin, isOutlined, isRtl, passiveType, className, children, textColor, disabled: disabledProp, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color: textColor,
         ...props,
@@ -15075,10 +15555,11 @@ const Slider = React.forwardRef((props, ref) => {
     }
     // Destructure base / shared props from a `SliderBaseProps` view. None of
     // these fields differ between the two branches, so this view is safe.
-    const { label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, min = 0, max = 100, step = 1, size, color, isRounded = false, isCircle = false, disabled = false, showOutput = false, tooltip, ticks, marks, orientation = 'horizontal', scale, getAriaValueText, formatOutput, className, 
+    const { label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, min = 0, max = 100, step = 1, size, color, isRounded = false, isCircle = false, disabled: disabledProp, showOutput = false, tooltip, ticks, marks, orientation = 'horizontal', scale, getAriaValueText, formatOutput, className, 
     // Strip the discriminated/union fields from `restProps` so they don't
     // flow back into `useBulmaClasses` / spread onto inputs.
     range: _range, value: _value, defaultValue: _defaultValue, onChange: _onChange, ariaLabel: _ariaLabel, minDistance: _minDistance, nameLow: _nameLow, nameHigh: _nameHigh, ...restProps } = props;
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('Slider', {
@@ -15174,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);
@@ -15298,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;
     };
@@ -15498,7 +15981,8 @@ const ArrowDropDown = () => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill:
  */
 const Numberinput = React.forwardRef(({ 
 // Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue, min, max, step = 1, size, color, inputColor, controlsPosition = 'both', controlsRounded = false, compact = false, bare, variant = 'plusminus', disabled = false, editable = true, isLoading = false, exponential = false, onChange, className, ...props }, ref) => {
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue, min, max, step = 1, size, color, inputColor, controlsPosition = 'both', controlsRounded = false, compact = false, bare, variant = 'plusminus', disabled: disabledProp, editable = true, isLoading = false, exponential = false, onChange, className, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     // Bare controls join their parent's row, which a `.control` does not lay
     // out. `useInsideControl()` is true anywhere below a `Control`, even past
@@ -15708,7 +16192,8 @@ const toAsciiDigits = (text) => text.replace(/\p{Nd}/gu, digit => {
  */
 const PinInput = React.forwardRef(({ 
 // Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, length = 6, value: controlledValue, defaultValue = '', type = 'number', isMasked = false, color, size, isRounded = false, disabled = false, onChange, onComplete, onPaste, onFocus, onBlur, className, ...props }, ref) => {
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, length = 6, value: controlledValue, defaultValue = '', type = 'number', isMasked = false, color, size, isRounded = false, disabled: disabledProp, onChange, onComplete, onPaste, onFocus, onBlur, className, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('PinInput', {
@@ -15891,7 +16376,8 @@ function getFillPercent(iconIndex, value) {
  * // With Font Awesome icons
  * <Rate iconName="star" iconLibrary="fa" iconVariant="solid" />
  */
-const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = 0, max = 5, size, disabled = false, showScore = false, showText = false, texts, onChange, customIcon, spaced = false, rtl = false, iconName, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, precision = 1, customText, name, form, className, ...props }, ref) => {
+const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = 0, max = 5, size, disabled: disabledProp, showScore = false, showText = false, texts, onChange, customIcon, spaced = false, rtl = false, iconName, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, precision = 1, customText, name, form, className, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('Rate', {
@@ -15909,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);
@@ -16017,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;
@@ -16161,7 +16654,7 @@ const isEnabled = (item) => typeof item === 'string' || !item.disabled;
  *   onSelect={(item) => console.log(item)}
  * />
  */
-const Autocomplete = React.forwardRef(({ data = [], value: controlledValue, placeholder, field = 'label', clearable = false, openOnFocus = false, keepFirst = false, keepOpen = false, selectOnClickOutside = false, maxHeight = 200, loading = false, disabled = false, checkInfiniteScroll = false, infiniteScrollDistance = 50, color, size, onInput, onSelect, onActiveChange, onInfiniteScroll, itemTemplate, header, footer, empty, name, form, required, id, 
+const Autocomplete = React.forwardRef(({ data = [], value: controlledValue, placeholder, field = 'label', clearable = false, openOnFocus = false, keepFirst = false, keepOpen = false, selectOnClickOutside = false, maxHeight = 200, loading = false, disabled: disabledProp, checkInfiniteScroll = false, infiniteScrollDistance = 50, color, size, onInput, onSelect, onActiveChange, onInfiniteScroll, itemTemplate, header, footer, empty, name, form, required, id, 
 // Deprecated no-ops, taken here so they stay off the wrapper.
 // eslint-disable-next-line @typescript-eslint/no-unused-vars -- deprecated no-op
 selected, 
@@ -16169,6 +16662,7 @@ selected,
 dropdown, 
 // Field props
 label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     // The suggestion list points `aria-labelledby` at the label that names
     // the input, so it needs that label's id.
@@ -16180,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);
@@ -16209,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`
@@ -16891,7 +17388,8 @@ const asList = (value) => value == null ? [] : Array.isArray(value) ? value : [v
 const ComboboxFromData = React.forwardRef((props, ref) => {
     const { data, value, defaultValue, 
     // Called below through `props`, which knows which value it takes.
-    onChange: _onChange, multiple = false, placeholder, name, empty, itemTemplate, onSelect, onOpenChange, inline = false, disabled = false, required = false, form, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ariaCloseLabel, children, ...rest } = props;
+    onChange: _onChange, multiple = false, placeholder, name, empty, itemTemplate, onSelect, onOpenChange, inline = false, disabled: disabledProp, required = false, form, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ariaCloseLabel, children, ...rest } = props;
+    const disabled = useFieldsetDisabled(disabledProp);
     // A name given in place of a label is the field's and the list's, not
     // the wrapper's. Only the ones given are passed, since an
     // `aria-labelledby` that's there at all, even undefined, keeps the
@@ -16914,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)
@@ -16941,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);
@@ -17086,7 +17588,8 @@ const isComposing = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode ==
  */
 const Taginput = React.forwardRef(({ 
 // Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data: dataProp, placeholder, field = 'label', allowNew = true, allowDuplicates = false, openOnFocus = false, removeOnKeys = true, confirmKeys = ['Enter', ','], closable = true, attached = false, maxTags, maxlength, disabled = false, readonly = false, rounded = false, ellipsis = false, hasCounter = true, onPasteSeparators = [','], beforeAdding, createTag, keepFirst = false, keepOpen = true, loading = false, ariaCloseLabel, icon, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, tagColor, size, onChange, onAdd, onRemove, onTyping, tagTemplate, name, form, id, className, ...props }, ref) => {
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data: dataProp, placeholder, field = 'label', allowNew = true, allowDuplicates = false, openOnFocus = false, removeOnKeys = true, confirmKeys = ['Enter', ','], closable = true, attached = false, maxTags, maxlength, disabled: disabledProp, readonly = false, rounded = false, ellipsis = false, hasCounter = true, onPasteSeparators = [','], beforeAdding, createTag, keepFirst = false, keepOpen = true, loading = false, ariaCloseLabel, icon, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, tagColor, size, onChange, onAdd, onRemove, onTyping, tagTemplate, name, form, id, className, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('Taginput', {
@@ -17100,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);
@@ -17141,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);
@@ -17391,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');
@@ -17457,7 +17965,8 @@ const TagInput = Taginput;
  * @returns {JSX.Element} The rendered select element.
  * @see {@link https://bulma.io/documentation/form/select/ | Bulma Select documentation}
  */
-const SelectBase = React.forwardRef(({ color, size, isRounded, isLoading, isActive, isHovered, isFocused, isFullwidth, isFullWidth, className, disabled, children, multiple, multipleSize, ...props }, ref) => {
+const SelectBase = React.forwardRef(({ color, size, isRounded, isLoading, isActive, isHovered, isFocused, isFullwidth, isFullWidth, className, disabled: disabledProp, children, multiple, multipleSize, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
@@ -17504,7 +18013,8 @@ SelectBase.displayName = 'SelectBase';
  * @returns {JSX.Element} The rendered textarea element.
  * @see {@link https://bulma.io/documentation/form/textarea/ | Bulma Textarea documentation}
  */
-const TextAreaBase = React.forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading: _isLoading, isActive, hasFixedSize, className, disabled, readOnly, rows, ...props }, ref) => {
+const TextAreaBase = React.forwardRef(({ color, size, isRounded, isStatic, isHovered, isFocused, isLoading: _isLoading, isActive, hasFixedSize, className, disabled: disabledProp, readOnly, rows, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
         ...props,
@@ -19051,7 +19561,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
 Calendar.displayName = 'Calendar';
 
 const isBrowser = typeof window !== 'undefined';
-const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'bottom-left', appendToBody = false, className, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, ariaLabelledBy, role = 'dialog', id, restoreFocusRef, initialFocusSelector, }) => {
+const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'bottom-left', appendToBody = false, className, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, ariaLabelledBy, role = 'dialog', id, restoreFocusRef, initialFocusSelector, localeScope, }) => {
     const panelRef = React.useRef(null);
     const resolveContainer = usePortalContainer();
     // Read as the trap turns on, once the panel's content has rendered.
@@ -19149,7 +19659,8 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
                 e.preventDefault();
         }, children: children }));
     if (appendToBody && isBrowser) {
-        return reactDom.createPortal(panel, resolveContainer());
+        const target = resolveContainer();
+        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, scope: localeScope, children: panel }), target);
     }
     return panel;
 };
@@ -19951,6 +20462,79 @@ function supportsInputType(type) {
     return supported;
 }
 
+/**
+ * A picker's locale: its own `locale`, else the one a `LocaleProvider` around
+ * it sets, else `undefined`, which leaves `Intl` to use the runtime's.
+ */
+function usePickerLocale(own) {
+    const scope = useLocaleScope();
+    return own || scope?.locale;
+}
+const NO_ROOT_ATTRS = {};
+/**
+ * A picker's language and direction inside a `LocaleProvider`, by the rule a
+ * nested provider follows: its `lang` is its own `locale`, else the
+ * provider's, and its `dir` is the `dir` passed to it, else its own locale's
+ * direction when it has one, else the provider's. Outside a provider it
+ * changes nothing. A `locale` `Intl` refuses counts as none here, since the
+ * picker's own formatting reports it.
+ */
+function usePickerLocaleScope(ownLocale, ownDir) {
+    const scope = useLocaleScope();
+    return React.useMemo(() => {
+        if (!scope)
+            return { rootAttrs: NO_ROOT_ATTRS };
+        let own;
+        try {
+            own = canonicalLocale(ownLocale);
+        }
+        catch {
+            own = undefined;
+        }
+        const dir = ownDir || (own ? localeDirection(own) : scope.dir);
+        return {
+            rootAttrs: own ? { lang: own, dir } : NO_ROOT_ATTRS,
+            panel: { locale: own || scope.locale, dir },
+        };
+    }, [scope, ownLocale, ownDir]);
+}
+/**
+ * Whether a picker's `dayNames` replace the calendar's own, which `Calendar`
+ * does only for a full week of seven.
+ */
+function hasOwnDayNames(dayNames) {
+    return dayNames !== undefined && dayNames.length === 7;
+}
+/**
+ * The day a picker's week starts on: its own `firstDayOfWeek`, else, inside a
+ * `LocaleProvider`, the first day of the locale the picker uses, else Sunday.
+ * Outside a provider it stays Sunday whatever the locale, as it always has,
+ * and so does a picker inside one with no locale from either, since the
+ * runtime's own differs between the server and the browser.
+ *
+ * It also stays Sunday for a picker that brings its own `dayNames`. The
+ * calendar shows those exactly as given, in calendar order, and before the
+ * provider an unset `firstDayOfWeek` was always Sunday, so names written
+ * Sunday first would sit a day or more off their columns if the week moved
+ * under them.
+ */
+function usePickerFirstDayOfWeek(own, locale, hasDayNames) {
+    const inProvider = useLocaleScope() !== null;
+    return React.useMemo(() => {
+        if (own !== undefined)
+            return own;
+        if (!inProvider || !locale || hasDayNames)
+            return 0;
+        try {
+            return localeFirstDay(canonicalLocale(locale));
+        }
+        catch {
+            // A tag Intl refuses: the picker's own formatting says so.
+            return 0;
+        }
+    }, [own, inProvider, locale, hasDayNames]);
+}
+
 const DEFAULT_FORMATS = {
     day: DEFAULT_DATE_FORMAT,
     month: DEFAULT_MONTH_FORMAT,
@@ -19971,7 +20555,15 @@ const SKIPPED_SEGMENTS = {
  * @returns {JSX.Element}
  */
 const DateInputBase = React.forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, granularity = 'day', format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = true, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, dayNames, monthNames, nearbyMonthDays = true, className, name, form, required, id: idProp, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, ...rest } = props;
+    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled: disabledProp, readOnly, placeholder, granularity = 'day', format, parse, locale: localeProp, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = true, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek: firstDayOfWeekProp, dayNames, monthNames, nearbyMonthDays = true, className, name, form, required, id: idProp, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, ...rest } = props;
+    // A LocaleProvider around the picker sets its default locale and, through
+    // that locale, the day its week starts on.
+    const locale = usePickerLocale(localeProp);
+    // Its own language and direction, which its root and a portaled panel
+    // carry inside a provider.
+    const localeScope = usePickerLocaleScope(localeProp, props.dir);
+    const firstDayOfWeek = usePickerFirstDayOfWeek(firstDayOfWeekProp, locale, hasOwnDayNames(dayNames));
+    const disabled = useFieldsetDisabled(disabledProp);
     // Inside a labeled Field the input takes the id the label points at
     // when the caller set none, as InputBase does, and the popover's ids
     // follow it. Inline there is no input to name, so nothing takes the
@@ -20171,7 +20763,7 @@ const DateInputBase = React.forwardRef((props, ref) => {
     // Native mobile path renders <input type="date"> (type="month" for a
     // month picker).
     if (useNative) {
-        return (jsxRuntime.jsx("input", { ...cleanRest, ref: combinedRef, type: isDayGranularity ? 'date' : 'month', className: classNames(inputClass, bulmaHelperClasses, className), value: value ? toIsoValue(value, granularity) : '', onChange: e => {
+        return (jsxRuntime.jsx("input", { ...localeScope.rootAttrs, ...cleanRest, ref: combinedRef, type: isDayGranularity ? 'date' : 'month', className: classNames(inputClass, bulmaHelperClasses, className), value: value ? toIsoValue(value, granularity) : '', onChange: e => {
                 const parsed = e.target.value
                     ? fromIsoValue(e.target.value, granularity)
                     : null;
@@ -20191,12 +20783,12 @@ const DateInputBase = React.forwardRef((props, ref) => {
         // keeps the id it released with.
         id: inline ? popoverId : `${popoverId}-cal`, autoFocusCell: open, labels: labels }, granularity));
     if (inline) {
-        return (jsxRuntime.jsxs("div", { ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [calendar, name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoValue(value, granularity) : '', required: required }))] }));
+        return (jsxRuntime.jsxs("div", { ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [calendar, name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoValue(value, granularity) : '', required: required }))] }));
     }
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...cleanRest, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, onClick: () => {
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...localeScope.rootAttrs, ...cleanRest, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, onClick: () => {
                     if (canOpen)
                         setOpen(!open);
-                }, disabled: !canOpen, "aria-label": chooseLabel, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: chooseLabel, id: popoverId, restoreFocusRef: inputRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: calendar }))] }));
+                }, disabled: !canOpen, "aria-label": chooseLabel, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { localeScope: localeScope.panel, isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: chooseLabel, id: popoverId, restoreFocusRef: inputRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: calendar }))] }));
 });
 DateInputBase.displayName = 'DateInputBase';
 
@@ -21152,7 +21744,13 @@ const fromIsoTime = (s) => {
  * @returns {JSX.Element}
  */
 const TimeInputBase = React.forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, hourFormat = '24', enableSeconds = false, incrementHours = 1, incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id: idProp, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, audioTick = false, haptics = false, ...rest } = props;
+    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled: disabledProp, readOnly, placeholder, format, parse, locale: localeProp, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, hourFormat = '24', enableSeconds = false, incrementHours = 1, incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id: idProp, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, audioTick = false, haptics = false, ...rest } = props;
+    // A LocaleProvider around the picker sets its default locale.
+    const locale = usePickerLocale(localeProp);
+    // Its own language and direction, which its root and a portaled panel
+    // carry inside a provider.
+    const localeScope = usePickerLocaleScope(localeProp, props.dir);
+    const disabled = useFieldsetDisabled(disabledProp);
     // Inside a labeled Field the input takes the id the label points at
     // when the caller set none, as InputBase does, and the popover's ids
     // follow it. Inline there is no input to name, so nothing takes the
@@ -21320,7 +21918,7 @@ const TimeInputBase = React.forwardRef((props, ref) => {
         const nativeStep = enableSeconds
             ? incrementSeconds
             : incrementMinutes * 60;
-        return (jsxRuntime.jsx("input", { ...cleanRest, ref: combinedRef, type: "time", step: nativeStep, className: classNames(inputClass, bulmaHelperClasses, className), value: value ? toIsoTime(value, enableSeconds) : '', onChange: e => {
+        return (jsxRuntime.jsx("input", { ...localeScope.rootAttrs, ...cleanRest, ref: combinedRef, type: "time", step: nativeStep, className: classNames(inputClass, bulmaHelperClasses, className), value: value ? toIsoTime(value, enableSeconds) : '', onChange: e => {
                 const parsed = e.target.value ? fromIsoTime(e.target.value) : null;
                 commitValue(parsed);
             }, min: min ? toIsoTime(min, enableSeconds) : undefined, max: max ? toIsoTime(max, enableSeconds) : undefined, disabled: disabled, readOnly: readOnly, placeholder: placeholder, name: name, form: form, required: required, id: id }));
@@ -21350,12 +21948,12 @@ const TimeInputBase = React.forwardRef((props, ref) => {
                             setOpen(false);
                         }, children: t.reset }), jsxRuntime.jsx("button", { type: "button", className: mobileFooterDoneClass, "aria-label": t.done, onClick: () => setOpen(false), children: jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M5 11l4 4 8-8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }))] }));
     if (inline) {
-        return (jsxRuntime.jsxs("div", { ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [panel, name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoTime(value, enableSeconds) : '', required: required }))] }));
+        return (jsxRuntime.jsxs("div", { ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [panel, name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoTime(value, enableSeconds) : '', required: required }))] }));
     }
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...cleanRest, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, onClick: () => {
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...localeScope.rootAttrs, ...cleanRest, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, onClick: () => {
                     if (canOpen)
                         setOpen(!open);
-                }, disabled: !canOpen, "aria-label": t.chooseTime, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: () => setOpen(false), anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseTime, id: popoverId, restoreFocusRef: inputRef, children: panel }))] }));
+                }, disabled: !canOpen, "aria-label": t.chooseTime, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { localeScope: localeScope.panel, isOpen: open, onClose: () => setOpen(false), anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseTime, id: popoverId, restoreFocusRef: inputRef, children: panel }))] }));
 });
 TimeInputBase.displayName = 'TimeInputBase';
 
@@ -21467,9 +22065,17 @@ const fromIsoDateTime = (s) => {
  * @returns {JSX.Element}
  */
 const DateTimeInputBase = React.forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, dayNames, monthNames, nearbyMonthDays = true, hourFormat = '24', enableSeconds = false, incrementHours = 1, 
+    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled: disabledProp, readOnly, placeholder, format, parse, locale: localeProp, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek: firstDayOfWeekProp, dayNames, monthNames, nearbyMonthDays = true, hourFormat = '24', enableSeconds = false, incrementHours = 1, 
     // Step between visible wheel values; 1 gives the iOS-style every-minute wheel.
     incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id: idProp, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', audioTick = false, haptics = false, labels, ...rest } = props;
+    // A LocaleProvider around the picker sets its default locale and, through
+    // that locale, the day its week starts on.
+    const locale = usePickerLocale(localeProp);
+    // Its own language and direction, which its root and a portaled panel
+    // carry inside a provider.
+    const localeScope = usePickerLocaleScope(localeProp, props.dir);
+    const firstDayOfWeek = usePickerFirstDayOfWeek(firstDayOfWeekProp, locale, hasOwnDayNames(dayNames));
+    const disabled = useFieldsetDisabled(disabledProp);
     // Inside a labeled Field the input takes the id the label points at
     // when the caller set none, as InputBase does, and the popover's ids
     // follow it. Inline there is no input to name, so nothing takes the
@@ -21709,7 +22315,7 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
     }, [ref]);
     if (useNative) {
         const nativeStep = enableSeconds ? incrementSeconds : incrementMinutes * 60;
-        return (jsxRuntime.jsx("input", { ...cleanRest, ref: combinedRef, type: "datetime-local", step: nativeStep, className: classNames(inputClass, bulmaHelperClasses, className), value: value ? toIsoDateTime(value, enableSeconds) : '', onChange: e => {
+        return (jsxRuntime.jsx("input", { ...localeScope.rootAttrs, ...cleanRest, ref: combinedRef, type: "datetime-local", step: nativeStep, className: classNames(inputClass, bulmaHelperClasses, className), value: value ? toIsoDateTime(value, enableSeconds) : '', onChange: e => {
                 const parsed = e.target.value
                     ? fromIsoDateTime(e.target.value)
                     : null;
@@ -21740,12 +22346,12 @@ const DateTimeInputBase = React.forwardRef((props, ref) => {
                                 // is no popover, the wheels, as Escape does.
                                 onCommit: () => (inline ? closeTime() : setOpen(false)) }) }) }))] }), jsxRuntime.jsxs("div", { className: footerClass, children: [jsxRuntime.jsxs("button", { ref: timeButtonRef, type: "button", className: footerTimeClass, onClick: () => (timeOpen ? closeTime() : setTimeOpen(true)), "aria-expanded": timeOpen, "aria-controls": timeOpen ? timeWheelsId : undefined, disabled: disabled, children: [jsxRuntime.jsx("span", { children: t.time }), jsxRuntime.jsx("span", { className: footerTimePillClass, children: value ? formatTime(value, timeDisplayFormat, locale) : '—' })] }), jsxRuntime.jsxs("div", { className: footerActionsClass, children: [jsxRuntime.jsx("button", { type: "button", className: footerResetClass, onClick: () => commitValue(valueAtOpenRef.current), children: t.reset }), jsxRuntime.jsx("button", { type: "button", className: footerDoneClass, "aria-label": t.done, onClick: () => setOpen(false), children: jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", "aria-hidden": "true", children: jsxRuntime.jsx("path", { d: "M5 11l4 4 8-8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] })] }));
     if (inline) {
-        return (jsxRuntime.jsxs("div", { ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [panel, name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoDateTime(value, enableSeconds) : '', required: required }))] }));
+        return (jsxRuntime.jsxs("div", { ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), children: [panel, name && (jsxRuntime.jsx("input", { type: "hidden", name: name, form: form, value: value ? toIsoDateTime(value, enableSeconds) : '', required: required }))] }));
     }
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...cleanRest, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, onClick: () => {
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: classNames(containerClass, bulmaHelperClasses, className), ...localeScope.rootAttrs, ...cleanRest, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "text", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": popoverId, autoComplete: "off", className: inputClass, value: text, placeholder: placeholder, disabled: disabled, readOnly: inputReadOnlyAttr, name: name, form: form, required: required, id: id, ...inputHandlers }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, onClick: () => {
                     if (canOpen)
                         setOpen(!open);
-                }, disabled: !canOpen, "aria-label": t.chooseDateTime, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: () => setOpen(false), anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateTime, id: popoverId, restoreFocusRef: inputRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: panel }))] }));
+                }, disabled: !canOpen, "aria-label": t.chooseDateTime, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { localeScope: localeScope.panel, isOpen: open, onClose: () => setOpen(false), anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateTime, id: popoverId, restoreFocusRef: inputRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: panel }))] }));
 });
 DateTimeInputBase.displayName = 'DateTimeInputBase';
 
@@ -21844,7 +22450,15 @@ const today = () => startOfDay(new Date());
  * @returns {JSX.Element}
  */
 const DateRangeInputBase = React.forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = true, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, allowDisabledInRange = false, firstDayOfWeek = 0, dayNames, monthNames, nearbyMonthDays = true, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, name, startName, endName, form, required, id, className, onFocus, onFocusCapture, ...rest } = props;
+    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled: disabledProp, readOnly, placeholder, format, parse, locale: localeProp, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = true, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, allowDisabledInRange = false, firstDayOfWeek: firstDayOfWeekProp, dayNames, monthNames, nearbyMonthDays = true, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, name, startName, endName, form, required, id, className, onFocus, onFocusCapture, ...rest } = props;
+    // A LocaleProvider around the picker sets its default locale and, through
+    // that locale, the day its week starts on.
+    const locale = usePickerLocale(localeProp);
+    // Its own language and direction, which its root and a portaled panel
+    // carry inside a provider.
+    const localeScope = usePickerLocaleScope(localeProp, props.dir);
+    const firstDayOfWeek = usePickerFirstDayOfWeek(firstDayOfWeekProp, locale, hasOwnDayNames(dayNames));
+    const disabled = useFieldsetDisabled(disabledProp);
     // The launcher gives way to the loading spinner of a Control this sits in.
     const controlLoading = useControlLoading();
     const triggerIcon = triggerIconProp ?? !controlLoading;
@@ -22075,14 +22689,14 @@ const DateRangeInputBase = React.forwardRef((props, ref) => {
         };
         const minIso = min ? isoDay(lowerBound) : undefined;
         const maxIso = max ? isoDay(max) : undefined;
-        return (jsxRuntime.jsxs("div", { "aria-labelledby": ariaLabelledBy, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [jsxRuntime.jsxs("div", { className: fieldClass, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "date", id: id, "aria-label": t.rangeStart, className: inputClass, value: isoDay(start), onChange: nativeChange(commitStart, isBlockedDay), min: minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required }), separator, jsxRuntime.jsx("input", { ref: endRef, type: "date", id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, className: inputClass, value: isoDay(end), onChange: nativeChange(commitEnd, isBlockedEnd), min: start ? isoDay(start) : minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required })] }), hiddenInputs] }));
+        return (jsxRuntime.jsxs("div", { "aria-labelledby": ariaLabelledBy, ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [jsxRuntime.jsxs("div", { className: fieldClass, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "date", id: id, "aria-label": t.rangeStart, className: inputClass, value: isoDay(start), onChange: nativeChange(commitStart, isBlockedDay), min: minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required }), separator, jsxRuntime.jsx("input", { ref: endRef, type: "date", id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, className: inputClass, value: isoDay(end), onChange: nativeChange(commitEnd, isBlockedEnd), min: start ? isoDay(start) : minIso, max: maxIso, disabled: disabled, readOnly: readOnly, required: required })] }), hiddenInputs] }));
     }
     const calendar = (jsxRuntime.jsx(Calendar, { range: range, onRangeSelect: handleRangeSelect, allowDisabledInRange: allowDisabledInRange, focusedDate: focusedDate, onFocusedDateChange: setFocusedDate, min: min, max: max, shouldDisableDate: shouldDisableDate, unselectableDates: unselectableDates, firstDayOfWeek: firstDayOfWeek, locale: locale, dayNames: dayNames, monthNames: monthNames, nearbyMonthDays: nearbyMonthDays, color: color, size: size, 
         // The popover panel takes `popoverId`, so the calendar inside it takes
         // one of its own. Inline there is no panel.
         id: inline ? popoverId : `${popoverId}-cal`, autoFocusCell: open, labels: labels }));
     if (inline) {
-        return (jsxRuntime.jsxs("div", { "aria-labelledby": ariaLabelledBy, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [calendar, hiddenInputs] }));
+        return (jsxRuntime.jsxs("div", { "aria-labelledby": ariaLabelledBy, ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: onFocus, onFocusCapture: onFocusCapture, children: [calendar, hiddenInputs] }));
     }
     const canOpen = !!popover && !disabled && !readOnly;
     const inputReadOnly = !!readOnly || !editable;
@@ -22117,9 +22731,9 @@ const DateRangeInputBase = React.forwardRef((props, ref) => {
         readOnly: inputReadOnly,
         required,
     };
-    return (jsxRuntime.jsxs("div", { "aria-labelledby": ariaLabelledBy, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: handleFocus, onFocusCapture: handleFocusCapture, children: [jsxRuntime.jsxs("div", { className: fieldClass, onMouseDown: handleFieldMouseDown, children: [jsxRuntime.jsx("input", { ...comboboxProps, ref: combinedRef, id: id, "aria-label": t.rangeStart, value: startText, ...startHandlers }), separator, jsxRuntime.jsx("input", { ...comboboxProps, ref: endRef, id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, value: endText, ...endHandlers })] }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, 
+    return (jsxRuntime.jsxs("div", { "aria-labelledby": ariaLabelledBy, ...localeScope.rootAttrs, ...cleanRest, ref: containerRef, role: "group", className: classNames(containerClass, bulmaHelperClasses, className), onFocus: handleFocus, onFocusCapture: handleFocusCapture, children: [jsxRuntime.jsxs("div", { className: fieldClass, onMouseDown: handleFieldMouseDown, children: [jsxRuntime.jsx("input", { ...comboboxProps, ref: combinedRef, id: id, "aria-label": t.rangeStart, value: startText, ...startHandlers }), separator, jsxRuntime.jsx("input", { ...comboboxProps, ref: endRef, id: id ? `${id}-end` : undefined, "aria-label": t.rangeEnd, value: endText, ...endHandlers })] }), popover && triggerIcon && (jsxRuntime.jsx("button", { type: "button", className: triggerClass, 
                 // Disabled whenever the popover can't open, so a click can.
-                onClick: () => setOpen(!open), disabled: !canOpen, "aria-label": t.chooseDateRange, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateRange, id: popoverId, restoreFocusRef: restoreFocusRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: calendar })), hiddenInputs] }));
+                onClick: () => setOpen(!open), disabled: !canOpen, "aria-label": t.chooseDateRange, "aria-haspopup": "dialog", "aria-controls": popoverId, "aria-expanded": open, tabIndex: canOpen ? 0 : -1, children: jsxRuntime.jsx(Icon, { name: triggerIconName, size: size }) })), popover && (jsxRuntime.jsx(PickerPopover, { localeScope: localeScope.panel, isOpen: open, onClose: handlePopoverClose, anchorRef: containerRef, position: position, appendToBody: appendToBody, ariaLabel: t.chooseDateRange, id: popoverId, restoreFocusRef: restoreFocusRef, initialFocusSelector: CALENDAR_FOCUSED_CELL, children: calendar })), hiddenInputs] }));
 });
 DateRangeInputBase.displayName = 'DateRangeInputBase';
 
@@ -24369,6 +24983,7 @@ exports.EmptyStateTitle = EmptyStateTitle;
 exports.Field = Field;
 exports.FieldBody = FieldBody;
 exports.FieldLabel = FieldLabel;
+exports.Fieldset = Fieldset;
 exports.Figure = Figure;
 exports.File = File;
 exports.Footer = Footer;
@@ -24394,6 +25009,7 @@ exports.LinkButton = LinkButton;
 exports.ListItem = ListItem;
 exports.Loader = Loader;
 exports.Loading = Loading;
+exports.LocaleProvider = LocaleProvider;
 exports.Media = Media;
 exports.MediaContent = MediaContent;
 exports.MediaLeft = MediaLeft;
@@ -24524,6 +25140,7 @@ exports.useIconLibrary = useIconLibrary;
 exports.useInsideControl = useInsideControl;
 exports.useInsideField = useInsideField;
 exports.useIsHydrated = useIsHydrated;
+exports.useLocale = useLocale;
 exports.useOtherClasses = useOtherClasses;
 exports.usePrefixedClass = usePrefixedClass;
 exports.usePrefixedClassNames = usePrefixedClassNames;