ng-blatui 1.34.0 → 1.35.0

package/fesm2022/ng-blatui.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, computed, input, Directive, Component, signal, model, forwardRef, PLATFORM_ID, effect, Injectable, ElementRef, ViewContainerRef, viewChild, afterNextRender, output, linkedSignal, ViewEncapsulation, Injector, DestroyRef } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, computed, LOCALE_ID, input, Directive, Component, signal, model, forwardRef, PLATFORM_ID, effect, Injectable, ElementRef, ViewContainerRef, viewChild, afterNextRender, output, linkedSignal, ViewEncapsulation, Injector, DestroyRef } from '@angular/core';
 import { cva } from 'class-variance-authority';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 export { AccordionContent, AccordionGroup, AccordionPanel, AccordionTrigger, ɵɵDeferredContent, ɵɵDeferredContentAware } from '@angular/aria/accordion';
@@ -48,6 +48,16 @@ const BUI_DEFAULT_LABELS = {
     calendarMonth: 'Month',
     calendarYear: 'Year',
     calendarNextMonth: 'Next month',
+    calendarWeek: 'Week',
+    datePickerPlaceholder: 'Pick a date',
+    dateRangePickerPlaceholder: 'Pick a date range',
+    dateRangePresetToday: 'Today',
+    dateRangePresetLast7Days: 'Last 7 days',
+    dateRangePresetLast30Days: 'Last 30 days',
+    dateRangePresetThisMonth: 'This month',
+    dateRangePresetLastMonth: 'Last month',
+    datetimePickerPlaceholder: 'Pick date & time',
+    datetimePickerTime: 'Time',
     carouselPrevious: 'Previous slide',
     carouselNext: 'Next slide',
     carouselGoToSlide: 'Go to slide',
@@ -65,8 +75,13 @@ const BUI_DEFAULT_LABELS = {
     dock: 'Dock',
     fileUploadDropzone: 'Click to upload or drag & drop',
     fileUploadRemove: 'Remove file',
+    ganttEmpty: 'No tasks.',
+    markdownEditorWrite: 'Write',
+    markdownEditorPreview: 'Preview',
     miniCartTrigger: 'Cart',
     miniCart: 'Shopping cart',
+    miniCartTitle: 'Your cart',
+    miniCartSubtotal: 'Subtotal',
     notificationCenter: 'Notifications',
     notificationCenterUnread: 'Unread',
     notificationCenterMarkAllRead: 'Mark all read',
@@ -76,6 +91,7 @@ const BUI_DEFAULT_LABELS = {
     phoneInputCountry: 'Country code',
     phoneInputNumber: 'Phone number',
     productCardWishlist: 'Add to wishlist',
+    productCardAddToCart: 'Add to cart',
     promptInputAttach: 'Attach file',
     promptInputSend: 'Send',
     quantitySelectorDecrease: 'Decrease quantity',
@@ -86,6 +102,25 @@ const BUI_DEFAULT_LABELS = {
     sonner: 'Notifications',
     sonnerDismiss: 'Dismiss notification',
     themeCustomizer: 'Theme customizer',
+    themeCustomizerOpen: 'Customize',
+    themeCustomizerClose: 'Close',
+    themeCustomizerTagline: 'Tune it live. Every preset is pure CSS variables.',
+    themeCustomizerReset: 'Reset',
+    themeCustomizerMode: 'Mode',
+    themeCustomizerBaseColor: 'Base color',
+    themeCustomizerAccent: 'Accent',
+    themeCustomizerRadius: 'Radius',
+    themeCustomizerInputStyle: 'Input style',
+    themeCustomizerBodyFont: 'Body font',
+    themeCustomizerHeadingFont: 'Heading font',
+    themeCustomizerShadow: 'Shadow',
+    themeCustomizerSpacing: 'Spacing',
+    themeCustomizerTracking: 'Tracking',
+    timeField: 'Time',
+    timeFieldHours: 'hours',
+    timeFieldMinutes: 'minutes',
+    toolCallArguments: 'Arguments',
+    toolCallResult: 'Result',
     treeTableToggle: 'Toggle row',
     treeTableCopy: 'Copy as tree',
     treeTableCopied: 'Copied',
@@ -126,6 +161,137 @@ function buiLabel(key, override) {
     return computed(() => override() ?? overrides?.[key] ?? BUI_DEFAULT_LABELS[key]);
 }
 
+/**
+ * Resolve the BCP 47 locale a component formats dates in, most-specific wins:
+ * per-instance `locale` input → the app's `LOCALE_ID` → `'en-US'` (Angular's own default).
+ *
+ * Call from an injection context (a component field initializer):
+ *
+ * ```ts
+ * readonly locale = input<string>();
+ * protected readonly resolvedLocale = buiLocale(this.locale);
+ * ```
+ *
+ * The input stays a signal on purpose: apps that switch language at runtime (transloco &
+ * co.) need the display to reformat, which a statically-injected `LOCALE_ID` cannot do.
+ */
+function buiLocale(override) {
+    const localeId = inject(LOCALE_ID);
+    return computed(() => {
+        const value = override();
+        return value === undefined || value === '' ? localeId : value;
+    });
+}
+/**
+ * The calendar system ng-blatui's date grids are built on. They are computed from JavaScript
+ * `Date`, so they are Gregorian, and every label that describes them is pinned to it — otherwise
+ * a locale whose default era is not Gregorian (`th` → Buddhist 2569, `fa` → Persian 1405) would
+ * name a month or year the grid is not showing.
+ *
+ * The pickers apply it as a *default* their `dateFormat` can override: pass
+ * `[dateFormat]="{ calendar: 'persian' }"` to display a value in another calendar system.
+ */
+const BUI_GRID_CALENDAR = 'gregory';
+/**
+ * CLDR's `minDays` is 1 everywhere except these regions, which follow the ISO-8601 rule.
+ *
+ * It is a table rather than a lookup because `Intl`'s own `minimalDays` cannot be trusted: V8
+ * dropped it, so it is absent in Chrome and Node 24 but still present in Node 22. Reading it
+ * would number weeks differently depending on the engine — and yield `NaN` where it is gone.
+ */
+const ISO_WEEK_REGIONS = new Set([
+    'AD',
+    'AN',
+    'AT',
+    'AX',
+    'BE',
+    'BG',
+    'CH',
+    'CZ',
+    'DE',
+    'DK',
+    'EE',
+    'ES',
+    'FI',
+    'FJ',
+    'FO',
+    'FR',
+    'GB',
+    'GF',
+    'GG',
+    'GI',
+    'GP',
+    'GR',
+    'HU',
+    'IE',
+    'IM',
+    'IS',
+    'IT',
+    'JE',
+    'LI',
+    'LT',
+    'LU',
+    'MC',
+    'MQ',
+    'NL',
+    'NO',
+    'PL',
+    'PT',
+    'RE',
+    'RU',
+    'SE',
+    'SJ',
+    'SK',
+    'SM',
+    'VA',
+]);
+/** Anglo/Western default, used when the engine has no week data for the locale. */
+const FALLBACK_WEEK_INFO = { firstDay: 0, weekend: [0, 6], minimalDays: 1 };
+function minimalDaysFor(locale) {
+    try {
+        const region = new Intl.Locale(locale).maximize().region;
+        return region !== undefined && ISO_WEEK_REGIONS.has(region) ? 4 : 1;
+    }
+    catch {
+        return FALLBACK_WEEK_INFO.minimalDays;
+    }
+}
+/** `Intl` counts Monday=1..Sunday=7; the calendar counts Sunday=0..Saturday=6. */
+function toSundayZero(day) {
+    return day % 7;
+}
+function readWeekInfo(locale) {
+    // Typed as `object` so the narrowing below is a real assertion under every `lib` setting.
+    let resolved;
+    try {
+        resolved = new Intl.Locale(locale);
+    }
+    catch {
+        // An unparseable locale tag is the caller's bug, but not worth breaking a calendar over.
+        return FALLBACK_WEEK_INFO;
+    }
+    const source = resolved;
+    const info = source.getWeekInfo?.() ?? source.weekInfo;
+    return info === undefined
+        ? FALLBACK_WEEK_INFO
+        : {
+            firstDay: toSundayZero(info.firstDay),
+            weekend: info.weekend.map((day) => toSundayZero(day)),
+            minimalDays: minimalDaysFor(locale),
+        };
+}
+/**
+ * The locale's own week conventions, so a calendar is not silently US-shaped: `fr` starts the
+ * week on Monday, `ar-EG` on Saturday with a Friday/Saturday weekend, `en-US` on Sunday with a
+ * Saturday/Sunday weekend — the last being exactly the library's pre-locale behavior.
+ *
+ * Falls back to the US convention on engines without week data (rather than throwing), so this
+ * only ever adds correctness.
+ */
+function buiWeekInfo(locale) {
+    return computed(() => readWeekInfo(locale()));
+}
+
 const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
@@ -1623,6 +1789,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/** This panel's copy has no per-instance inputs — translate it with `provideBuiLabels`. */
+const NO_OVERRIDE = signal(undefined, /* @ts-ignore */
+...(ngDevMode ? [{ debugName: "NO_OVERRIDE" }] : /* istanbul ignore next */ []));
 const FONTS = [
     { value: 'sans', label: 'Default', family: "'Instrument Sans', sans-serif" },
     { value: 'inter', label: 'Inter', family: "'Inter', sans-serif" },
@@ -1646,6 +1815,22 @@ class BuiThemeCustomizer {
     ariaLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     ariaLabelText = buiLabel('themeCustomizer', this.ariaLabel);
+    // Panel chrome. The option labels below ('Light', 'Flat', 'Compact'…) are still English:
+    // 29 design-system terms deserve their own decision, not 29 more keys bolted on here.
+    openText = buiLabel('themeCustomizerOpen', NO_OVERRIDE);
+    closeText = buiLabel('themeCustomizerClose', NO_OVERRIDE);
+    taglineText = buiLabel('themeCustomizerTagline', NO_OVERRIDE);
+    resetText = buiLabel('themeCustomizerReset', NO_OVERRIDE);
+    modeText = buiLabel('themeCustomizerMode', NO_OVERRIDE);
+    baseColorText = buiLabel('themeCustomizerBaseColor', NO_OVERRIDE);
+    accentText = buiLabel('themeCustomizerAccent', NO_OVERRIDE);
+    radiusText = buiLabel('themeCustomizerRadius', NO_OVERRIDE);
+    inputStyleText = buiLabel('themeCustomizerInputStyle', NO_OVERRIDE);
+    bodyFontText = buiLabel('themeCustomizerBodyFont', NO_OVERRIDE);
+    headingFontText = buiLabel('themeCustomizerHeadingFont', NO_OVERRIDE);
+    shadowText = buiLabel('themeCustomizerShadow', NO_OVERRIDE);
+    spacingText = buiLabel('themeCustomizerSpacing', NO_OVERRIDE);
+    trackingText = buiLabel('themeCustomizerTracking', NO_OVERRIDE);
     theme = inject(ThemeStore);
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
@@ -1736,7 +1921,7 @@ class BuiThemeCustomizer {
       [attr.aria-expanded]="open()"
       (click)="open.set(!open())"
     >
-      {{ open() ? 'Close' : 'Customize' }}
+      {{ open() ? closeText() : openText() }}
     </button>
 
     @if (open()) {
@@ -1747,17 +1932,19 @@ class BuiThemeCustomizer {
       >
         <div class="flex items-center justify-between">
           <div>
-            <h4 class="text-sm font-semibold">Customize</h4>
+            <h4 class="text-sm font-semibold">{{ openText() }}</h4>
             <p class="text-xs text-muted-foreground">
-              Tune it live. Every preset is pure CSS variables.
+              {{ taglineText() }}
             </p>
           </div>
-          <button buiButton variant="ghost" size="sm" (click)="theme.reset()">Reset</button>
+          <button buiButton variant="ghost" size="sm" (click)="theme.reset()">
+            {{ resetText() }}
+          </button>
         </div>
 
         <!-- Mode -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Mode</span>
+          <span class="text-xs font-medium">{{ modeText() }}</span>
           <div class="grid grid-cols-3 gap-2">
             @for (m of modes; track m.value) {
               <button
@@ -1774,7 +1961,7 @@ class BuiThemeCustomizer {
 
         <!-- Base color -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Base color</span>
+          <span class="text-xs font-medium">{{ baseColorText() }}</span>
           <div class="grid grid-cols-9 gap-2">
             @for (b of bases; track b.value) {
               <button
@@ -1792,7 +1979,7 @@ class BuiThemeCustomizer {
 
         <!-- Accent -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Accent</span>
+          <span class="text-xs font-medium">{{ accentText() }}</span>
           <div class="grid grid-cols-6 gap-2">
             @for (a of accents; track a.value) {
               <button
@@ -1810,7 +1997,7 @@ class BuiThemeCustomizer {
 
         <!-- Radius -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Radius</span>
+          <span class="text-xs font-medium">{{ radiusText() }}</span>
           <div class="grid grid-cols-6 gap-2">
             @for (r of radii; track r) {
               <button
@@ -1827,7 +2014,7 @@ class BuiThemeCustomizer {
 
         <!-- Input style -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Input style</span>
+          <span class="text-xs font-medium">{{ inputStyleText() }}</span>
           <div class="grid grid-cols-3 gap-2">
             @for (i of inputStyles; track i.value) {
               <button
@@ -1844,7 +2031,7 @@ class BuiThemeCustomizer {
 
         <!-- Body font -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Body font</span>
+          <span class="text-xs font-medium">{{ bodyFontText() }}</span>
           <div class="grid grid-cols-3 gap-2">
             @for (f of fonts; track f.value) {
               <button
@@ -1862,7 +2049,7 @@ class BuiThemeCustomizer {
 
         <!-- Heading font -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Heading font</span>
+          <span class="text-xs font-medium">{{ headingFontText() }}</span>
           <div class="grid grid-cols-3 gap-2">
             @for (f of fonts; track f.value) {
               <button
@@ -1880,7 +2067,7 @@ class BuiThemeCustomizer {
 
         <!-- Shadow -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Shadow</span>
+          <span class="text-xs font-medium">{{ shadowText() }}</span>
           <div class="grid grid-cols-5 gap-2">
             @for (s of shadows; track s.value) {
               <button
@@ -1898,7 +2085,7 @@ class BuiThemeCustomizer {
         <!-- Spacing + Tracking -->
         <div class="grid grid-cols-2 gap-4">
           <div class="space-y-1.5">
-            <span class="text-xs font-medium">Spacing</span>
+            <span class="text-xs font-medium">{{ spacingText() }}</span>
             <div class="grid grid-cols-3 gap-1.5">
               @for (s of spacings; track s.value) {
                 <button
@@ -1913,7 +2100,7 @@ class BuiThemeCustomizer {
             </div>
           </div>
           <div class="space-y-1.5">
-            <span class="text-xs font-medium">Tracking</span>
+            <span class="text-xs font-medium">{{ trackingText() }}</span>
             <div class="grid grid-cols-3 gap-1.5">
               @for (t of trackings; track t.value) {
                 <button
@@ -1960,7 +2147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       [attr.aria-expanded]="open()"
       (click)="open.set(!open())"
     >
-      {{ open() ? 'Close' : 'Customize' }}
+      {{ open() ? closeText() : openText() }}
     </button>
 
     @if (open()) {
@@ -1971,17 +2158,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       >
         <div class="flex items-center justify-between">
           <div>
-            <h4 class="text-sm font-semibold">Customize</h4>
+            <h4 class="text-sm font-semibold">{{ openText() }}</h4>
             <p class="text-xs text-muted-foreground">
-              Tune it live. Every preset is pure CSS variables.
+              {{ taglineText() }}
             </p>
           </div>
-          <button buiButton variant="ghost" size="sm" (click)="theme.reset()">Reset</button>
+          <button buiButton variant="ghost" size="sm" (click)="theme.reset()">
+            {{ resetText() }}
+          </button>
         </div>
 
         <!-- Mode -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Mode</span>
+          <span class="text-xs font-medium">{{ modeText() }}</span>
           <div class="grid grid-cols-3 gap-2">
             @for (m of modes; track m.value) {
               <button
@@ -1998,7 +2187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
         <!-- Base color -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Base color</span>
+          <span class="text-xs font-medium">{{ baseColorText() }}</span>
           <div class="grid grid-cols-9 gap-2">
             @for (b of bases; track b.value) {
               <button
@@ -2016,7 +2205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
         <!-- Accent -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Accent</span>
+          <span class="text-xs font-medium">{{ accentText() }}</span>
           <div class="grid grid-cols-6 gap-2">
             @for (a of accents; track a.value) {
               <button
@@ -2034,7 +2223,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
         <!-- Radius -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Radius</span>
+          <span class="text-xs font-medium">{{ radiusText() }}</span>
           <div class="grid grid-cols-6 gap-2">
             @for (r of radii; track r) {
               <button
@@ -2051,7 +2240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
         <!-- Input style -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Input style</span>
+          <span class="text-xs font-medium">{{ inputStyleText() }}</span>
           <div class="grid grid-cols-3 gap-2">
             @for (i of inputStyles; track i.value) {
               <button
@@ -2068,7 +2257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
         <!-- Body font -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Body font</span>
+          <span class="text-xs font-medium">{{ bodyFontText() }}</span>
           <div class="grid grid-cols-3 gap-2">
             @for (f of fonts; track f.value) {
               <button
@@ -2086,7 +2275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
         <!-- Heading font -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Heading font</span>
+          <span class="text-xs font-medium">{{ headingFontText() }}</span>
           <div class="grid grid-cols-3 gap-2">
             @for (f of fonts; track f.value) {
               <button
@@ -2104,7 +2293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
         <!-- Shadow -->
         <div class="space-y-1.5">
-          <span class="text-xs font-medium">Shadow</span>
+          <span class="text-xs font-medium">{{ shadowText() }}</span>
           <div class="grid grid-cols-5 gap-2">
             @for (s of shadows; track s.value) {
               <button
@@ -2122,7 +2311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         <!-- Spacing + Tracking -->
         <div class="grid grid-cols-2 gap-4">
           <div class="space-y-1.5">
-            <span class="text-xs font-medium">Spacing</span>
+            <span class="text-xs font-medium">{{ spacingText() }}</span>
             <div class="grid grid-cols-3 gap-1.5">
               @for (s of spacings; track s.value) {
                 <button
@@ -2137,7 +2326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             </div>
           </div>
           <div class="space-y-1.5">
-            <span class="text-xs font-medium">Tracking</span>
+            <span class="text-xs font-medium">{{ trackingText() }}</span>
             <div class="grid grid-cols-3 gap-1.5">
               @for (t of trackings; track t.value) {
                 <button
@@ -7619,6 +7808,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
 const SIZES$1 = { sm: 'text-sm', default: 'text-base', lg: 'text-2xl' };
 const COMPARE_SIZES = { sm: 'text-xs', default: 'text-sm', lg: 'text-base' };
+/** Two fraction digits ("1,234.50") — matches the pre-locale rendering in `en-US`. */
+const DEFAULT_NUMBER_FORMAT$1 = {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+};
 /** A price display with optional compare-at (strikethrough) and a discount badge. */
 class BuiPrice {
     /** Current price amount to display. */
@@ -7637,6 +7831,18 @@ class BuiPrice {
     showDiscount = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showDiscount" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** BCP 47 locale for number formatting. Defaults to the app's `LOCALE_ID`. */
+    locale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * `Intl.NumberFormat` options for the amounts. Replaces the default wholesale — pass
+     * `{ style: 'currency', currency: 'EUR' }` to let ICU place the symbol itself.
+     */
+    numberFormat = input(DEFAULT_NUMBER_FORMAT$1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numberFormat" }] : /* istanbul ignore next */ []));
+    resolvedLocale = buiLocale(this.locale);
+    formatter = computed(() => new Intl.NumberFormat(this.resolvedLocale(), this.numberFormat()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
     onSale = computed(() => {
         const compareAt = this.compareAt();
         return compareAt !== null && compareAt > this.amount();
@@ -7656,11 +7862,10 @@ class BuiPrice {
     computedClass = computed(() => cn('inline-flex items-baseline gap-2 font-medium tabular-nums', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     format(value) {
-        return (this.currency() +
-            value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
+        return this.currency() + this.formatter().format(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiPrice, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiPrice, isStandalone: true, selector: "bui-price", inputs: { amount: { classPropertyName: "amount", publicName: "amount", isSignal: true, isRequired: false, transformFunction: null }, compareAt: { classPropertyName: "compareAt", publicName: "compareAt", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showDiscount: { classPropertyName: "showDiscount", publicName: "showDiscount", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "price" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiPrice, isStandalone: true, selector: "bui-price", inputs: { amount: { classPropertyName: "amount", publicName: "amount", isSignal: true, isRequired: false, transformFunction: null }, compareAt: { classPropertyName: "compareAt", publicName: "compareAt", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showDiscount: { classPropertyName: "showDiscount", publicName: "showDiscount", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, numberFormat: { classPropertyName: "numberFormat", publicName: "numberFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "price" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <span [class]="currentClass()">{{ format(amount()) }}</span>
     @if (onSale()) {
       <s [class]="compareClass()"
@@ -7697,7 +7902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { amount: [{ type: i0.Input, args: [{ isSignal: true, alias: "amount", required: false }] }], compareAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareAt", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showDiscount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDiscount", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { amount: [{ type: i0.Input, args: [{ isSignal: true, alias: "amount", required: false }] }], compareAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareAt", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showDiscount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDiscount", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], numberFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberFormat", required: false }] }] } });
 
 const DIRECTIONS = { col: 'flex-col', row: 'flex-row' };
 const GAPS$1 = {
@@ -9172,7 +9377,11 @@ class BuiProductCard {
     /** Accessible label override for the wishlist toggle button. */
     wishlistLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "wishlistLabel" }] : /* istanbul ignore next */ []));
+    /** Text of the default add-to-cart button. Falls back to `provideBuiLabels`. */
+    addToCartLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "addToCartLabel" }] : /* istanbul ignore next */ []));
     wishlistText = buiLabel('productCardWishlist', this.wishlistLabel);
+    addToCartText = buiLabel('productCardAddToCart', this.addToCartLabel);
     wished = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "wished" }] : /* istanbul ignore next */ []));
     alt = computed(() => this.imageAlt() || this.title(), /* @ts-ignore */
@@ -9191,7 +9400,7 @@ class BuiProductCard {
     computedClass = computed(() => cn('group flex flex-col overflow-hidden rounded-xl border bg-card text-card-foreground shadow-sm', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiProductCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiProductCard, isStandalone: true, selector: "bui-product-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, compareAt: { classPropertyName: "compareAt", publicName: "compareAt", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, rating: { classPropertyName: "rating", publicName: "rating", isSignal: true, isRequired: false, transformFunction: null }, reviews: { classPropertyName: "reviews", publicName: "reviews", isSignal: true, isRequired: false, transformFunction: null }, wishlist: { classPropertyName: "wishlist", publicName: "wishlist", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, wishlistLabel: { classPropertyName: "wishlistLabel", publicName: "wishlistLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "product-card" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiProductCard, isStandalone: true, selector: "bui-product-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: false, transformFunction: null }, compareAt: { classPropertyName: "compareAt", publicName: "compareAt", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null }, rating: { classPropertyName: "rating", publicName: "rating", isSignal: true, isRequired: false, transformFunction: null }, reviews: { classPropertyName: "reviews", publicName: "reviews", isSignal: true, isRequired: false, transformFunction: null }, wishlist: { classPropertyName: "wishlist", publicName: "wishlist", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, wishlistLabel: { classPropertyName: "wishlistLabel", publicName: "wishlistLabel", isSignal: true, isRequired: false, transformFunction: null }, addToCartLabel: { classPropertyName: "addToCartLabel", publicName: "addToCartLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "product-card" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <div class="relative aspect-square overflow-hidden bg-muted">
       <img
         [src]="image()"
@@ -9261,11 +9470,11 @@ class BuiProductCard {
       }
       <div class="mt-3">
         <ng-content>
-          <button buiButton class="w-full">Add to cart</button>
+          <button buiButton class="w-full">{{ addToCartText() }}</button>
         </ng-content>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: BuiBadge, selector: "[buiBadge]", inputs: ["variant", "tone", "size", "class"] }, { kind: "directive", type: BuiButton, selector: "button[buiButton], a[buiButton]", inputs: ["variant", "size", "class"] }, { kind: "component", type: BuiPrice, selector: "bui-price", inputs: ["amount", "compareAt", "currency", "size", "showDiscount", "class"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: BuiBadge, selector: "[buiBadge]", inputs: ["variant", "tone", "size", "class"] }, { kind: "directive", type: BuiButton, selector: "button[buiButton], a[buiButton]", inputs: ["variant", "size", "class"] }, { kind: "component", type: BuiPrice, selector: "bui-price", inputs: ["amount", "compareAt", "currency", "size", "showDiscount", "class", "locale", "numberFormat"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiProductCard, decorators: [{
             type: Component,
@@ -9343,13 +9552,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       }
       <div class="mt-3">
         <ng-content>
-          <button buiButton class="w-full">Add to cart</button>
+          <button buiButton class="w-full">{{ addToCartText() }}</button>
         </ng-content>
       </div>
     </div>
   `,
                 }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: false }] }], compareAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareAt", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], rating: [{ type: i0.Input, args: [{ isSignal: true, alias: "rating", required: false }] }], reviews: [{ type: i0.Input, args: [{ isSignal: true, alias: "reviews", required: false }] }], wishlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "wishlist", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], wishlistLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "wishlistLabel", required: false }] }] } });
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: false }] }], compareAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareAt", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], rating: [{ type: i0.Input, args: [{ isSignal: true, alias: "rating", required: false }] }], reviews: [{ type: i0.Input, args: [{ isSignal: true, alias: "reviews", required: false }] }], wishlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "wishlist", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], wishlistLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "wishlistLabel", required: false }] }], addToCartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addToCartLabel", required: false }] }] } });
 
 /**
  * Types and deletes a cycling list of words. The animated text is `aria-hidden`; an sr-only
@@ -10064,10 +10273,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
+/** A midday reference date; only the hour/minute matter for formatting. */
+function timeOf(hour, minute = 0) {
+    return new Date(2000, 0, 1, hour, minute);
+}
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop$b = () => { };
 const SELECT_CLASS = 'h-9 rounded-md border border-input bg-background px-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50';
-/** A styled time field: a native `<input type="time">`, or hour/minute selects in `select` mode. */
+/**
+ * A styled time field: a native `<input type="time">`, or hour/minute selects in `select` mode.
+ * The value is always 24-hour `HH:mm`, whatever the clock shown.
+ *
+ * **Locale:** `select` mode follows `locale` — it renders the locale's clock (1–12 with AM/PM in
+ * `en-US`, 0–23 in `fr`) and its digits. `input` mode cannot: the browser renders native time
+ * inputs in *its own* UI language, and neither `lang` nor any other attribute overrides that.
+ * Use `mode="select"` when the clock must follow the app's locale rather than the user's browser.
+ */
 class BuiTimeField {
     /** Selected time as `HH:mm`. Two-way bindable with `[(value)]`. */
     value = model('', /* @ts-ignore */
@@ -10100,6 +10321,43 @@ class BuiTimeField {
     ariaLabel = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /**
+     * BCP 47 locale driving `select` mode's clock and digits. Defaults to the app's `LOCALE_ID`.
+     * It has no effect in `input` mode — see the class docs.
+     */
+    locale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /** Force a clock instead of the locale's own — `h12` gives 1–12 with AM/PM, `h23` gives 0–23. */
+    hourCycle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hourCycle" }] : /* istanbul ignore next */ []));
+    resolvedLocale = buiLocale(this.locale);
+    timeText = buiLabel('timeField', signal(undefined));
+    hoursText = buiLabel('timeFieldHours', signal(undefined));
+    minutesText = buiLabel('timeFieldMinutes', signal(undefined));
+    hoursAria = computed(() => `${this.ariaLabel() || this.timeText()} ${this.hoursText()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoursAria" }] : /* istanbul ignore next */ []));
+    minutesAria = computed(() => `${this.ariaLabel() || this.timeText()} ${this.minutesText()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minutesAria" }] : /* istanbul ignore next */ []));
+    /** The locale's clock unless the caller pinned one. */
+    resolvedHourCycle = computed(() => {
+        const pinned = this.hourCycle();
+        if (pinned !== undefined) {
+            return pinned;
+        }
+        const resolved = new Intl.DateTimeFormat(this.resolvedLocale(), {
+            hour: 'numeric',
+        }).resolvedOptions().hourCycle;
+        return resolved ?? 'h23';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedHourCycle" }] : /* istanbul ignore next */ []));
+    usesDayPeriod = computed(() => this.resolvedHourCycle() === 'h11' || this.resolvedHourCycle() === 'h12', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "usesDayPeriod" }] : /* istanbul ignore next */ []));
+    /** Two digits in the locale's own numbering system — `padStart` would mix `0` with `٠`. */
+    paddedNumber = computed(() => new Intl.NumberFormat(this.resolvedLocale(), {
+        minimumIntegerDigits: 2,
+        useGrouping: false,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paddedNumber" }] : /* istanbul ignore next */ []));
     onChange = noop$b;
     onTouched = noop$b;
     selectClass = SELECT_CLASS;
@@ -10107,15 +10365,41 @@ class BuiTimeField {
     ...(ngDevMode ? [{ debugName: "hourPart" }] : /* istanbul ignore next */ []));
     minutePart = computed(() => (this.value().split(':', 2)[1] || '00').padStart(2, '0'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "minutePart" }] : /* istanbul ignore next */ []));
-    hours = computed(() => Array.from({ length: 24 }, (_, hour) => String(hour).padStart(2, '0')), /* @ts-ignore */
+    hours = computed(() => {
+        // The value stays 24-hour `HH` whatever the clock: it is the data, not the display.
+        const hourCycle = this.resolvedHourCycle();
+        const label = this.usesDayPeriod()
+            ? this.dayPeriodLabel(hourCycle)
+            : (hour) => this.paddedNumber().format(hour);
+        return Array.from({ length: 24 }, (_, hour) => ({
+            value: String(hour).padStart(2, '0'),
+            label: label(hour),
+        }));
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hours" }] : /* istanbul ignore next */ []));
     minutes = computed(() => {
         const step = Math.max(1, this.minuteStep());
-        return Array.from({ length: Math.ceil(60 / step) }, (_, index) => String(index * step).padStart(2, '0'));
+        const format = this.paddedNumber();
+        return Array.from({ length: Math.ceil(60 / step) }, (_, index) => {
+            const minute = index * step;
+            return { value: String(minute).padStart(2, '0'), label: format.format(minute) };
+        });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "minutes" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('inline-block', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /**
+     * "1 PM" / "١ م". Built from parts rather than the plain format so the locale's own literal
+     * (French renders `13 h`) never leaks into a cell that already has its own `:` separator.
+     */
+    dayPeriodLabel(hourCycle) {
+        const format = new Intl.DateTimeFormat(this.resolvedLocale(), { hour: 'numeric', hourCycle });
+        return (hour) => format
+            .formatToParts(timeOf(hour))
+            .filter((part) => part.type !== 'literal')
+            .map((part) => part.value)
+            .join(' ');
+    }
     onInput(event) {
         this.value.set(event.target.value);
         this.onChange(this.value());
@@ -10141,7 +10425,7 @@ class BuiTimeField {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTimeField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiTimeField, isStandalone: true, selector: "bui-time-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "time-field" }, listeners: { "focusout": "onTouched()" }, properties: { "class": "computedClass()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiTimeField, isStandalone: true, selector: "bui-time-field", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, hourCycle: { classPropertyName: "hourCycle", publicName: "hourCycle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "time-field" }, listeners: { "focusout": "onTouched()" }, properties: { "class": "computedClass()" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiTimeField), multi: true },
         ], ngImport: i0, template: `
     @if (mode() === 'select') {
@@ -10150,11 +10434,11 @@ class BuiTimeField {
           [class]="selectClass"
           [value]="hourPart()"
           [disabled]="disabled()"
-          [attr.aria-label]="(ariaLabel() || 'Time') + ' hours'"
+          [attr.aria-label]="hoursAria()"
           (change)="setHour($event)"
         >
-          @for (hour of hours(); track hour) {
-            <option [value]="hour">{{ hour }}</option>
+          @for (hour of hours(); track hour.value) {
+            <option [value]="hour.value">{{ hour.label }}</option>
           }
         </select>
         <span aria-hidden="true" class="text-muted-foreground">:</span>
@@ -10162,11 +10446,11 @@ class BuiTimeField {
           [class]="selectClass"
           [value]="minutePart()"
           [disabled]="disabled()"
-          [attr.aria-label]="(ariaLabel() || 'Time') + ' minutes'"
+          [attr.aria-label]="minutesAria()"
           (change)="setMinute($event)"
         >
-          @for (minute of minutes(); track minute) {
-            <option [value]="minute">{{ minute }}</option>
+          @for (minute of minutes(); track minute.value) {
+            <option [value]="minute.value">{{ minute.label }}</option>
           }
         </select>
       </div>
@@ -10206,11 +10490,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
           [class]="selectClass"
           [value]="hourPart()"
           [disabled]="disabled()"
-          [attr.aria-label]="(ariaLabel() || 'Time') + ' hours'"
+          [attr.aria-label]="hoursAria()"
           (change)="setHour($event)"
         >
-          @for (hour of hours(); track hour) {
-            <option [value]="hour">{{ hour }}</option>
+          @for (hour of hours(); track hour.value) {
+            <option [value]="hour.value">{{ hour.label }}</option>
           }
         </select>
         <span aria-hidden="true" class="text-muted-foreground">:</span>
@@ -10218,11 +10502,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
           [class]="selectClass"
           [value]="minutePart()"
           [disabled]="disabled()"
-          [attr.aria-label]="(ariaLabel() || 'Time') + ' minutes'"
+          [attr.aria-label]="minutesAria()"
           (change)="setMinute($event)"
         >
-          @for (minute of minutes(); track minute) {
-            <option [value]="minute">{{ minute }}</option>
+          @for (minute of minutes(); track minute.value) {
+            <option [value]="minute.value">{{ minute.label }}</option>
           }
         </select>
       </div>
@@ -10243,7 +10527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], hourCycle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourCycle", required: false }] }] } });
 
 /** A group of toggle buttons (single or multiple selection). Use `button[buiToggleGroupItem]`. */
 class BuiToggleGroup {
@@ -11286,12 +11570,20 @@ class BuiToolCall {
     open = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** Heading of the arguments panel. Falls back to `provideBuiLabels`. */
+    argumentsLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "argumentsLabel" }] : /* istanbul ignore next */ []));
+    /** Heading of the result panel. Falls back to `provideBuiLabels`. */
+    resultLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "resultLabel" }] : /* istanbul ignore next */ []));
+    argumentsText = buiLabel('toolCallArguments', this.argumentsLabel);
+    resultText = buiLabel('toolCallResult', this.resultLabel);
     statusClass = computed(() => STATUS[this.status()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "statusClass" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('block overflow-hidden rounded-lg border bg-card', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiToolCall, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiToolCall, isStandalone: true, selector: "bui-tool-call", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, args: { classPropertyName: "args", publicName: "args", isSignal: true, isRequired: false, transformFunction: null }, result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "tool-call" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiToolCall, isStandalone: true, selector: "bui-tool-call", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, args: { classPropertyName: "args", publicName: "args", isSignal: true, isRequired: false, transformFunction: null }, result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, argumentsLabel: { classPropertyName: "argumentsLabel", publicName: "argumentsLabel", isSignal: true, isRequired: false, transformFunction: null }, resultLabel: { classPropertyName: "resultLabel", publicName: "resultLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "tool-call" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <button
       type="button"
       class="flex w-full items-center gap-2 px-3 py-2 text-left"
@@ -11319,13 +11611,13 @@ class BuiToolCall {
       <div class="space-y-2 border-t border-border px-3 py-2">
         @if (args()) {
           <div>
-            <p class="text-xs font-medium text-muted-foreground">Arguments</p>
+            <p class="text-xs font-medium text-muted-foreground">{{ argumentsText() }}</p>
             <pre class="mt-1 overflow-x-auto rounded bg-muted p-2 text-xs">{{ args() }}</pre>
           </div>
         }
         @if (result()) {
           <div>
-            <p class="text-xs font-medium text-muted-foreground">Result</p>
+            <p class="text-xs font-medium text-muted-foreground">{{ resultText() }}</p>
             <pre class="mt-1 overflow-x-auto rounded bg-muted p-2 text-xs">{{ result() }}</pre>
           </div>
         }
@@ -11366,13 +11658,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       <div class="space-y-2 border-t border-border px-3 py-2">
         @if (args()) {
           <div>
-            <p class="text-xs font-medium text-muted-foreground">Arguments</p>
+            <p class="text-xs font-medium text-muted-foreground">{{ argumentsText() }}</p>
             <pre class="mt-1 overflow-x-auto rounded bg-muted p-2 text-xs">{{ args() }}</pre>
           </div>
         }
         @if (result()) {
           <div>
-            <p class="text-xs font-medium text-muted-foreground">Result</p>
+            <p class="text-xs font-medium text-muted-foreground">{{ resultText() }}</p>
             <pre class="mt-1 overflow-x-auto rounded bg-muted p-2 text-xs">{{ result() }}</pre>
           </div>
         }
@@ -11380,7 +11672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], args: [{ type: i0.Input, args: [{ isSignal: true, alias: "args", required: false }] }], result: [{ type: i0.Input, args: [{ isSignal: true, alias: "result", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], args: [{ type: i0.Input, args: [{ isSignal: true, alias: "args", required: false }] }], result: [{ type: i0.Input, args: [{ isSignal: true, alias: "result", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], argumentsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "argumentsLabel", required: false }] }], resultLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resultLabel", required: false }] }] } });
 
 /** A scrollable conversation log (`role="log"`). Use `bui-chat-message` for bubbles. */
 class BuiChat {
@@ -12437,7 +12729,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop$5 = () => { };
-const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+/** Pattern of the month caption ("July 2026") — matches the pre-locale rendering in `en-US`. */
+const DEFAULT_MONTH_FORMAT = { month: 'long', year: 'numeric' };
+/** 2000-01-02 was a Sunday, so `+ day` lands on the weekday with index `day`. */
+function dateOfWeekday(day) {
+    return new Date(2000, 0, 2 + day);
+}
+const WEEK_MS = 7 * 86_400_000;
+/** The `firstDay`-aligned week that a UTC date falls in. */
+function startOfWeek(date, firstDay) {
+    const offset = (((date.getUTCDay() - firstDay) % 7) + 7) % 7;
+    const start = new Date(date);
+    start.setUTCDate(date.getUTCDate() - offset);
+    return start;
+}
+/**
+ * Week-of-year under the locale's own rule rather than a hardcoded ISO-8601.
+ *
+ * Week 1 is the first week holding at least `minimalDays` days of January, which is the same as
+ * saying it is the week containing January `minimalDays` — that yields the ISO rule at
+ * `minimalDays: 4` (week of Jan 4) and the US rule at `minimalDays: 1` (week of Jan 1).
+ */
+function weekOfYear(date, firstDay, minimalDays) {
+    const start = startOfWeek(date, firstDay);
+    const weekOneOf = (year) => startOfWeek(new Date(Date.UTC(year, 0, minimalDays)), firstDay);
+    const year = date.getUTCFullYear();
+    // A late-December week can already belong to next year's week 1, and an early-January one to
+    // last year's final week.
+    if (start.getTime() >= weekOneOf(year + 1).getTime()) {
+        return 1;
+    }
+    let weekOne = weekOneOf(year);
+    if (start.getTime() < weekOne.getTime()) {
+        weekOne = weekOneOf(year - 1);
+    }
+    return 1 + Math.round((start.getTime() - weekOne.getTime()) / WEEK_MS);
+}
 function pad$1(value) {
     return String(value).padStart(2, '0');
 }
@@ -12464,9 +12791,12 @@ class BuiCalendar {
     /** Number of month grids to render side by side. */
     months = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
-    /** First day of the week (0 = Sunday). */
-    weekStart = input(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "weekStart" }] : /* istanbul ignore next */ []));
+    /**
+     * First day of the week (0 = Sunday). Defaults to the locale's own convention — Sunday in
+     * `en-US`, Monday in `fr`, Saturday in `ar-EG`.
+     */
+    weekStart = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "weekStart" }] : /* istanbul ignore next */ []));
     /** Earliest selectable date (`yyyy-mm-dd`). */
     minDate = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
@@ -12476,7 +12806,7 @@ class BuiCalendar {
     /** Specific ISO dates (yyyy-mm-dd) to disable. */
     disabledDates = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
-    /** Disable Saturdays and Sundays. */
+    /** Disable the locale's weekend days — Saturday/Sunday in `en-US`, Friday/Saturday in `ar-EG`. */
     disableWeekends = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disableWeekends" }] : /* istanbul ignore next */ []));
     /** Show an ISO week-number column on the left. */
@@ -12492,6 +12822,24 @@ class BuiCalendar {
     disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** BCP 47 locale used for the month captions. Defaults to the app's `LOCALE_ID`. */
+    locale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * `Intl.DateTimeFormat` options for the month caption. Replaces the default wholesale, so
+     * `{ dateStyle: 'short' }` and `{ month: 'long' }` are both valid (they cannot be mixed).
+     */
+    monthFormat = input(DEFAULT_MONTH_FORMAT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthFormat" }] : /* istanbul ignore next */ []));
+    /** How weekday column headers are abbreviated: each locale's own `short` form by default. */
+    weekdayFormat = input('short', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdayFormat" }] : /* istanbul ignore next */ []));
+    /**
+     * Override the weekday column headers outright — 7 entries, **Sunday first**, regardless of
+     * `weekStart`. For when a locale's `Intl` abbreviation is not what your design wants.
+     */
+    weekdayLabels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "weekdayLabels" }] : /* istanbul ignore next */ []));
     /** Accessible label for the previous-month button. */
     previousMonthLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "previousMonthLabel" }] : /* istanbul ignore next */ []));
@@ -12504,33 +12852,76 @@ class BuiCalendar {
     /** Accessible label for the next-month button. */
     nextMonthLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "nextMonthLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the week-number column. */
+    weekLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "weekLabel" }] : /* istanbul ignore next */ []));
     previousMonthText = buiLabel('calendarPreviousMonth', this.previousMonthLabel);
     monthText = buiLabel('calendarMonth', this.monthSelectLabel);
     yearText = buiLabel('calendarYear', this.yearLabel);
     nextMonthText = buiLabel('calendarNextMonth', this.nextMonthLabel);
+    weekText = buiLabel('calendarWeek', this.weekLabel);
     onChange = noop$5;
     onTouched = noop$5;
     view = signal(new Date(new Date().getFullYear(), new Date().getMonth(), 1), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    resolvedLocale = buiLocale(this.locale);
+    weekInfo = buiWeekInfo(this.resolvedLocale);
+    /** The locale's first day unless the caller pinned one. */
+    resolvedWeekStart = computed(() => {
+        const start = this.weekStart() ?? this.weekInfo().firstDay;
+        return ((start % 7) + 7) % 7;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedWeekStart" }] : /* istanbul ignore next */ []));
     weekdays = computed(() => {
-        const start = ((this.weekStart() % 7) + 7) % 7;
-        return [...WEEKDAYS.slice(start), ...WEEKDAYS.slice(0, start)];
+        const override = this.weekdayLabels();
+        const locale = this.resolvedLocale();
+        const abbreviated = new Intl.DateTimeFormat(locale, { weekday: this.weekdayFormat() });
+        const full = new Intl.DateTimeFormat(locale, { weekday: 'long' });
+        const start = this.resolvedWeekStart();
+        return Array.from({ length: 7 }, (_, index) => {
+            // `override` is Sunday-first, so it is indexed by the absolute day, not the column.
+            const day = (start + index) % 7;
+            const date = dateOfWeekday(day);
+            return {
+                day,
+                label: override?.[day] ?? abbreviated.format(date),
+                name: full.format(date),
+            };
+        });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
-    monthLabel = computed(() => this.view().toLocaleDateString('en-US', { month: 'long', year: 'numeric' }), /* @ts-ignore */
+    monthFormatter = computed(() => 
+    // Pinned, not defaulted: the caption labels the grid, so it cannot name another calendar.
+    new Intl.DateTimeFormat(this.resolvedLocale(), {
+        ...this.monthFormat(),
+        calendar: BUI_GRID_CALENDAR,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthFormatter" }] : /* istanbul ignore next */ []));
+    /** Day/week/year numbers follow the locale's numbering system; never group a year as "2,026". */
+    numberFormatter = computed(() => new Intl.NumberFormat(this.resolvedLocale(), { useGrouping: false }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numberFormatter" }] : /* istanbul ignore next */ []));
+    monthLabel = computed(() => this.monthFormatter().format(this.view()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
     viewMonth = computed(() => this.view().getMonth(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []));
     viewYear = computed(() => this.view().getFullYear(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "viewYear" }] : /* istanbul ignore next */ []));
-    monthOptions = computed(() => Array.from({ length: 12 }, (_, index) => ({
-        value: index,
-        label: new Date(2000, index, 1).toLocaleDateString('en-US', { month: 'long' }),
-    })), /* @ts-ignore */
+    monthOptions = computed(() => {
+        // Month names only — the caption's `monthFormat` may carry a year, which a picker must not.
+        const names = new Intl.DateTimeFormat(this.resolvedLocale(), { month: 'long' });
+        return Array.from({ length: 12 }, (_, index) => ({
+            value: index,
+            label: names.format(new Date(2000, index, 1)),
+        }));
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "monthOptions" }] : /* istanbul ignore next */ []));
     years = computed(() => {
         const current = this.viewYear();
-        return Array.from({ length: 21 }, (_, index) => current - 10 + index);
+        const format = this.numberFormatter();
+        return Array.from({ length: 21 }, (_, index) => {
+            const value = current - 10 + index;
+            return { value, label: format.format(value) };
+        });
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "years" }] : /* istanbul ignore next */ []));
     monthGrids = computed(() => {
@@ -12539,7 +12930,7 @@ class BuiCalendar {
             const base = new Date(view.getFullYear(), view.getMonth() + index, 1);
             return {
                 key: `${base.getFullYear()}-${base.getMonth()}`,
-                label: base.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }),
+                label: this.monthFormatter().format(base),
                 weeks: this.weeksFor(base),
             };
         });
@@ -12547,13 +12938,15 @@ class BuiCalendar {
     ...(ngDevMode ? [{ debugName: "monthGrids" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('inline-block rounded-lg bg-card p-3', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Week number for a row, under the locale's rule and aligned on the same first day as the grid
+     * — a row cannot be labelled with a week it does not span.
+     */
     weekNum(iso) {
         const [year, month, day] = iso.split('-').map(Number);
         const date = new Date(Date.UTC(year, month - 1, day));
-        const dayNumber = (date.getUTCDay() + 6) % 7;
-        date.setUTCDate(date.getUTCDate() - dayNumber + 3);
-        const firstThursday = new Date(Date.UTC(date.getUTCFullYear(), 0, 4));
-        return 1 + Math.round((date.getTime() - firstThursday.getTime()) / (7 * 24 * 3600 * 1000));
+        const week = weekOfYear(date, this.resolvedWeekStart(), this.weekInfo().minimalDays);
+        return this.numberFormatter().format(week);
     }
     changeMonth(delta) {
         const view = this.view();
@@ -12644,14 +13037,15 @@ class BuiCalendar {
     weeksFor(base) {
         const year = base.getFullYear();
         const month = base.getMonth();
-        const offset = (((new Date(year, month, 1).getDay() - this.weekStart()) % 7) + 7) % 7;
+        const offset = (((new Date(year, month, 1).getDay() - this.resolvedWeekStart()) % 7) + 7) % 7;
         const today = isoOf$1(new Date());
+        const format = this.numberFormatter();
         return Array.from({ length: 6 }, (_, w) => Array.from({ length: 7 }, (_, d) => {
             const date = new Date(year, month, 1 - offset + w * 7 + d);
             const iso = isoOf$1(date);
             return {
                 iso,
-                num: date.getDate(),
+                num: format.format(date.getDate()),
                 inMonth: date.getMonth() === month,
                 isToday: iso === today,
                 disabled: this.isDisabled(iso, date),
@@ -12668,13 +13062,13 @@ class BuiCalendar {
             return true;
         }
         if (this.disableWeekends()) {
-            const day = date.getDay();
-            return day === 0 || day === 6;
+            // The weekend is not Saturday/Sunday everywhere — `ar-EG` rests on Friday/Saturday.
+            return this.weekInfo().weekend.includes(date.getDay());
         }
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCalendar, isStandalone: true, selector: "bui-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disableWeekends: { classPropertyName: "disableWeekends", publicName: "disableWeekends", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, hideOutsideDays: { classPropertyName: "hideOutsideDays", publicName: "hideOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, monthSelectLabel: { classPropertyName: "monthSelectLabel", publicName: "monthSelectLabel", isSignal: true, isRequired: false, transformFunction: null }, yearLabel: { classPropertyName: "yearLabel", publicName: "yearLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange", values: "valuesChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "calendar" }, listeners: { "focusout": "onTouched()" }, properties: { "class": "computedClass()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiCalendar, isStandalone: true, selector: "bui-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disableWeekends: { classPropertyName: "disableWeekends", publicName: "disableWeekends", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, hideOutsideDays: { classPropertyName: "hideOutsideDays", publicName: "hideOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, monthFormat: { classPropertyName: "monthFormat", publicName: "monthFormat", isSignal: true, isRequired: false, transformFunction: null }, weekdayFormat: { classPropertyName: "weekdayFormat", publicName: "weekdayFormat", isSignal: true, isRequired: false, transformFunction: null }, weekdayLabels: { classPropertyName: "weekdayLabels", publicName: "weekdayLabels", isSignal: true, isRequired: false, transformFunction: null }, previousMonthLabel: { classPropertyName: "previousMonthLabel", publicName: "previousMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, monthSelectLabel: { classPropertyName: "monthSelectLabel", publicName: "monthSelectLabel", isSignal: true, isRequired: false, transformFunction: null }, yearLabel: { classPropertyName: "yearLabel", publicName: "yearLabel", isSignal: true, isRequired: false, transformFunction: null }, nextMonthLabel: { classPropertyName: "nextMonthLabel", publicName: "nextMonthLabel", isSignal: true, isRequired: false, transformFunction: null }, weekLabel: { classPropertyName: "weekLabel", publicName: "weekLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange", values: "valuesChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "calendar" }, listeners: { "focusout": "onTouched()" }, properties: { "class": "computedClass()" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiCalendar), multi: true },
         ], ngImport: i0, template: `
     <div class="flex items-center justify-between pb-2">
@@ -12715,8 +13109,8 @@ class BuiCalendar {
             [value]="viewYear()"
             (change)="setYear($event)"
           >
-            @for (year of years(); track year) {
-              <option [value]="year">{{ year }}</option>
+            @for (year of years(); track year.value) {
+              <option [value]="year.value">{{ year.label }}</option>
             }
           </select>
         </div>
@@ -12757,11 +13151,21 @@ class BuiCalendar {
             <thead>
               <tr>
                 @if (showWeekNumbers()) {
-                  <th scope="col" class="size-9 text-xs font-normal text-muted-foreground">#</th>
+                  <th
+                    scope="col"
+                    class="h-9 min-w-9 text-xs font-normal text-muted-foreground"
+                    [attr.aria-label]="weekText()"
+                  >
+                    #
+                  </th>
                 }
-                @for (weekday of weekdays(); track weekday) {
-                  <th scope="col" class="size-9 text-xs font-normal text-muted-foreground">
-                    {{ weekday }}
+                @for (weekday of weekdays(); track weekday.day) {
+                  <th
+                    scope="col"
+                    class="h-9 min-w-9 px-1 text-xs font-normal text-muted-foreground"
+                    [attr.aria-label]="weekday.name"
+                  >
+                    {{ weekday.label }}
                   </th>
                 }
               </tr>
@@ -12849,8 +13253,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             [value]="viewYear()"
             (change)="setYear($event)"
           >
-            @for (year of years(); track year) {
-              <option [value]="year">{{ year }}</option>
+            @for (year of years(); track year.value) {
+              <option [value]="year.value">{{ year.label }}</option>
             }
           </select>
         </div>
@@ -12891,11 +13295,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             <thead>
               <tr>
                 @if (showWeekNumbers()) {
-                  <th scope="col" class="size-9 text-xs font-normal text-muted-foreground">#</th>
+                  <th
+                    scope="col"
+                    class="h-9 min-w-9 text-xs font-normal text-muted-foreground"
+                    [attr.aria-label]="weekText()"
+                  >
+                    #
+                  </th>
                 }
-                @for (weekday of weekdays(); track weekday) {
-                  <th scope="col" class="size-9 text-xs font-normal text-muted-foreground">
-                    {{ weekday }}
+                @for (weekday of weekdays(); track weekday.day) {
+                  <th
+                    scope="col"
+                    class="h-9 min-w-9 px-1 text-xs font-normal text-muted-foreground"
+                    [attr.aria-label]="weekday.name"
+                  >
+                    {{ weekday.label }}
                   </th>
                 }
               </tr>
@@ -12936,10 +13350,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     </div>
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], disableWeekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableWeekends", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], hideOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOutsideDays", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], monthSelectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthSelectLabel", required: false }] }], yearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], disableWeekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableWeekends", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], hideOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOutsideDays", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], monthFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthFormat", required: false }] }], weekdayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayFormat", required: false }] }], weekdayLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayLabels", required: false }] }], previousMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousMonthLabel", required: false }] }], monthSelectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthSelectLabel", required: false }] }], yearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearLabel", required: false }] }], nextMonthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextMonthLabel", required: false }] }], weekLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekLabel", required: false }] }] } });
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop$4 = () => { };
+/** Pattern of the trigger text ("Jul 16, 2026") — matches the other pickers' default. */
+const DEFAULT_DATE_FORMAT$3 = {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+};
+/** The built-in presets have no per-instance label inputs — translate them via `provideBuiLabels`. */
+const NO_LABEL_OVERRIDE = signal(undefined, /* @ts-ignore */
+...(ngDevMode ? [{ debugName: "NO_LABEL_OVERRIDE" }] : /* istanbul ignore next */ []));
 const POPUP_POSITIONS$2 = [
     { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
     { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
@@ -12977,9 +13400,9 @@ class BuiDateRangePicker {
     /** Latest selectable date (`yyyy-mm-dd`). */
     maxDate = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
-    /** Text shown on the trigger when nothing is selected. */
-    placeholder = input('Pick a date range', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Text shown on the trigger when nothing is selected. Falls back to `provideBuiLabels`. */
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /** Whether the picker is disabled. Two-way bindable with `[(disabled)]`. */
     disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -12989,9 +13412,34 @@ class BuiDateRangePicker {
     /** Accessible name applied to the trigger. */
     ariaLabel = input('', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** BCP 47 locale for the trigger text and the calendar. Defaults to the app's `LOCALE_ID`. */
+    locale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * `Intl.DateTimeFormat` options for the trigger text. Replaces the default wholesale, so
+     * `{ dateStyle: 'short' }` renders `16/07/2026` in `fr` (options cannot be mixed with it).
+     */
+    dateFormat = input(DEFAULT_DATE_FORMAT$3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+    placeholderText = buiLabel('dateRangePickerPlaceholder', this.placeholder);
+    presetText = {
+        today: buiLabel('dateRangePresetToday', NO_LABEL_OVERRIDE),
+        last7Days: buiLabel('dateRangePresetLast7Days', NO_LABEL_OVERRIDE),
+        last30Days: buiLabel('dateRangePresetLast30Days', NO_LABEL_OVERRIDE),
+        thisMonth: buiLabel('dateRangePresetThisMonth', NO_LABEL_OVERRIDE),
+        lastMonth: buiLabel('dateRangePresetLastMonth', NO_LABEL_OVERRIDE),
+    };
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     popupPositions = POPUP_POSITIONS$2;
+    resolvedLocale = buiLocale(this.locale);
+    formatter = computed(() => 
+    // Gregorian by default so the trigger agrees with the grid it opens; caller's options win.
+    new Intl.DateTimeFormat(this.resolvedLocale(), {
+        calendar: BUI_GRID_CALENDAR,
+        ...this.dateFormat(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
     onChange = noop$4;
     onTouched = noop$4;
     hasValue = computed(() => this.value().start !== '', /* @ts-ignore */
@@ -12999,7 +13447,7 @@ class BuiDateRangePicker {
     display = computed(() => {
         const { start, end } = this.value();
         if (start === '') {
-            return this.placeholder();
+            return this.placeholderText();
         }
         return end === '' ? `${this.fmt(start)} – …` : `${this.fmt(start)} – ${this.fmt(end)}`;
     }, /* @ts-ignore */
@@ -13036,11 +13484,7 @@ class BuiDateRangePicker {
     }
     fmt(iso) {
         const [year, month, day] = iso.split('-').map(Number);
-        return new Date(year, month - 1, day).toLocaleDateString(undefined, {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-        });
+        return this.formatter().format(new Date(year, month - 1, day));
     }
     defaultPresets() {
         const today = new Date();
@@ -13049,12 +13493,15 @@ class BuiDateRangePicker {
         const startOfLastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
         const endOfLastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
         return [
-            { label: 'Today', range: { start: iso, end: iso } },
-            { label: 'Last 7 days', range: { start: isoOf(addDays(today, -6)), end: iso } },
-            { label: 'Last 30 days', range: { start: isoOf(addDays(today, -29)), end: iso } },
-            { label: 'This month', range: { start: isoOf(startOfMonth), end: iso } },
+            { label: this.presetText.today(), range: { start: iso, end: iso } },
+            { label: this.presetText.last7Days(), range: { start: isoOf(addDays(today, -6)), end: iso } },
+            {
+                label: this.presetText.last30Days(),
+                range: { start: isoOf(addDays(today, -29)), end: iso },
+            },
+            { label: this.presetText.thisMonth(), range: { start: isoOf(startOfMonth), end: iso } },
             {
-                label: 'Last month',
+                label: this.presetText.lastMonth(),
                 range: { start: isoOf(startOfLastMonth), end: isoOf(endOfLastMonth) },
             },
         ];
@@ -13072,7 +13519,7 @@ class BuiDateRangePicker {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiDateRangePicker, isStandalone: true, selector: "bui-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "date-range-picker" }, properties: { "class": "computedClass()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiDateRangePicker, isStandalone: true, selector: "bui-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "date-range-picker" }, properties: { "class": "computedClass()" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiDateRangePicker), multi: true },
         ], ngImport: i0, template: `
     <button
@@ -13081,7 +13528,7 @@ class BuiDateRangePicker {
       #origin="cdkOverlayOrigin"
       type="button"
       class="flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
-      [attr.aria-label]="ariaLabel() || placeholder()"
+      [attr.aria-label]="ariaLabel() || placeholderText()"
       [attr.aria-expanded]="open()"
       [disabled]="disabled()"
       (click)="open.set(!open())"
@@ -13132,11 +13579,12 @@ class BuiDateRangePicker {
           [range]="value()"
           [minDate]="minDate()"
           [maxDate]="maxDate()"
+          [locale]="locale()"
           (rangeChange)="onRange($event)"
         />
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: BuiCalendar, selector: "bui-calendar", inputs: ["value", "mode", "range", "values", "months", "weekStart", "minDate", "maxDate", "disabledDates", "disableWeekends", "showWeekNumbers", "captionLayout", "hideOutsideDays", "disabled", "class", "previousMonthLabel", "monthSelectLabel", "yearLabel", "nextMonthLabel"], outputs: ["valueChange", "rangeChange", "valuesChange", "disabledChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: BuiCalendar, selector: "bui-calendar", inputs: ["value", "mode", "range", "values", "months", "weekStart", "minDate", "maxDate", "disabledDates", "disableWeekends", "showWeekNumbers", "captionLayout", "hideOutsideDays", "disabled", "class", "locale", "monthFormat", "weekdayFormat", "weekdayLabels", "previousMonthLabel", "monthSelectLabel", "yearLabel", "nextMonthLabel", "weekLabel"], outputs: ["valueChange", "rangeChange", "valuesChange", "disabledChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDateRangePicker, decorators: [{
             type: Component,
@@ -13154,7 +13602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
       #origin="cdkOverlayOrigin"
       type="button"
       class="flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
-      [attr.aria-label]="ariaLabel() || placeholder()"
+      [attr.aria-label]="ariaLabel() || placeholderText()"
       [attr.aria-expanded]="open()"
       [disabled]="disabled()"
       (click)="open.set(!open())"
@@ -13205,13 +13653,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
           [range]="value()"
           [minDate]="minDate()"
           [maxDate]="maxDate()"
+          [locale]="locale()"
           (rangeChange)="onRange($event)"
         />
       </div>
     </ng-template>
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }] } });
 
 /** A chat composer: an autosizing textarea with a send button. Emits `submitted` on send. */
 class BuiPromptInput {
@@ -15629,6 +16078,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
   `, styles: ["[data-slot=org-chart] ul{display:flex;justify-content:center;gap:1rem;padding-top:1.25rem;list-style:none;margin:0;padding-inline-start:0}[data-slot=org-chart] li{position:relative;display:flex;flex-direction:column;align-items:center;padding:1.25rem .5rem 0}[data-slot=org-chart] li:before,[data-slot=org-chart] li:after{content:\"\";position:absolute;top:0;width:50%;height:1.25rem;border-top:1px solid var(--border)}[data-slot=org-chart] li:before{inset-inline-end:50%}[data-slot=org-chart] li:after{inset-inline-start:50%;border-inline-start:1px solid var(--border)}[data-slot=org-chart] li:only-child{padding-top:.5rem}[data-slot=org-chart] li:only-child:before,[data-slot=org-chart] li:only-child:after{display:none}[data-slot=org-chart] li:first-child:before,[data-slot=org-chart] li:last-child:after{border:0}[data-slot=org-chart] li:last-child:before{border-inline-end:1px solid var(--border)}[data-slot=org-chart] ul ul:before{content:\"\";position:absolute;top:0;inset-inline-start:50%;height:1.25rem;border-inline-start:1px solid var(--border)}[data-slot=org-chart]>ul{padding-top:0}[data-slot=org-chart]>ul>li{padding-top:0}[data-slot=org-chart]>ul>li:before,[data-slot=org-chart]>ul>li:after{display:none}\n"] }]
         }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+/** Two fraction digits ("1,234.50") — matches the pre-locale rendering in `en-US`. */
+const DEFAULT_NUMBER_FORMAT = {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+};
 /** A cart trigger with an item-count badge and a dropdown with line items + subtotal. */
 class BuiMiniCart {
     /** Line items in the cart, used for count and subtotal. */
@@ -15647,8 +16101,28 @@ class BuiMiniCart {
     /** Accessible label override for the cart dropdown dialog. */
     label = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Heading shown at the top of the cart panel. Falls back to `provideBuiLabels`. */
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Label for the subtotal row. Falls back to `provideBuiLabels`. */
+    subtotalLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "subtotalLabel" }] : /* istanbul ignore next */ []));
+    /** BCP 47 locale for number formatting. Defaults to the app's `LOCALE_ID`. */
+    locale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * `Intl.NumberFormat` options for prices and subtotal. Replaces the default wholesale — pass
+     * `{ style: 'currency', currency: 'EUR' }` to let ICU place the symbol itself.
+     */
+    numberFormat = input(DEFAULT_NUMBER_FORMAT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numberFormat" }] : /* istanbul ignore next */ []));
+    resolvedLocale = buiLocale(this.locale);
+    formatter = computed(() => new Intl.NumberFormat(this.resolvedLocale(), this.numberFormat()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
     triggerText = buiLabel('miniCartTrigger', this.triggerLabel);
     labelText = buiLabel('miniCart', this.label);
+    titleText = buiLabel('miniCartTitle', this.title);
+    subtotalText = buiLabel('miniCartSubtotal', this.subtotalLabel);
     count = computed(() => this.items().reduce((total, item) => total + item.qty, 0), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
     subtotal = computed(() => this.items().reduce((total, item) => total + item.price * item.qty, 0), /* @ts-ignore */
@@ -15656,11 +16130,10 @@ class BuiMiniCart {
     computedClass = computed(() => cn('relative inline-block', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
     format(value) {
-        return (this.currency() +
-            value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
+        return this.currency() + this.formatter().format(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiMiniCart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiMiniCart, isStandalone: true, selector: "bui-mini-cart", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "mini-cart" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiMiniCart, isStandalone: true, selector: "bui-mini-cart", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtotalLabel: { classPropertyName: "subtotalLabel", publicName: "subtotalLabel", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, numberFormat: { classPropertyName: "numberFormat", publicName: "numberFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { attributes: { "data-slot": "mini-cart" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <button
       type="button"
       class="relative inline-flex size-9 items-center justify-center rounded-md border border-input hover:bg-accent"
@@ -15696,7 +16169,7 @@ class BuiMiniCart {
         role="dialog"
         [attr.aria-label]="labelText()"
       >
-        <div class="border-b p-3 text-sm font-medium">Your cart</div>
+        <div class="border-b p-3 text-sm font-medium">{{ titleText() }}</div>
         @if (items().length === 0) {
           <p class="p-6 text-center text-sm text-muted-foreground">Your cart is empty.</p>
         } @else {
@@ -15722,7 +16195,7 @@ class BuiMiniCart {
             }
           </ul>
           <div class="flex items-center justify-between border-t p-3">
-            <span class="text-sm font-medium">Subtotal</span>
+            <span class="text-sm font-medium">{{ subtotalText() }}</span>
             <span class="text-sm font-semibold tabular-nums">{{ format(subtotal()) }}</span>
           </div>
           <div class="p-3 pt-0">
@@ -15779,7 +16252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         role="dialog"
         [attr.aria-label]="labelText()"
       >
-        <div class="border-b p-3 text-sm font-medium">Your cart</div>
+        <div class="border-b p-3 text-sm font-medium">{{ titleText() }}</div>
         @if (items().length === 0) {
           <p class="p-6 text-center text-sm text-muted-foreground">Your cart is empty.</p>
         } @else {
@@ -15805,7 +16278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             }
           </ul>
           <div class="flex items-center justify-between border-t p-3">
-            <span class="text-sm font-medium">Subtotal</span>
+            <span class="text-sm font-medium">{{ subtotalText() }}</span>
             <span class="text-sm font-semibold tabular-nums">{{ format(subtotal()) }}</span>
           </div>
           <div class="p-3 pt-0">
@@ -15821,7 +16294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtotalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtotalLabel", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], numberFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberFormat", required: false }] }] } });
 
 /** An SVG beam connecting two elements (by selector) with a travelling light. SSR-safe. */
 class BuiAnimatedBeam {
@@ -16399,6 +16872,14 @@ class BuiMarkdownEditor {
     rows = input(8, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** Text of the write tab. Falls back to `provideBuiLabels`. */
+    writeLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "writeLabel" }] : /* istanbul ignore next */ []));
+    /** Text of the preview tab. Falls back to `provideBuiLabels`. */
+    previewLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "previewLabel" }] : /* istanbul ignore next */ []));
+    writeText = buiLabel('markdownEditorWrite', this.writeLabel);
+    previewText = buiLabel('markdownEditorPreview', this.previewLabel);
     tab = signal('write', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tab" }] : /* istanbul ignore next */ []));
     rendered = computed(() => renderMarkdown(this.value()), /* @ts-ignore */
@@ -16412,11 +16893,13 @@ class BuiMarkdownEditor {
         this.value.set(event.target.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiMarkdownEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiMarkdownEditor, isStandalone: true, selector: "bui-markdown-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "markdown-editor" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiMarkdownEditor, isStandalone: true, selector: "bui-markdown-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, writeLabel: { classPropertyName: "writeLabel", publicName: "writeLabel", isSignal: true, isRequired: false, transformFunction: null }, previewLabel: { classPropertyName: "previewLabel", publicName: "previewLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "markdown-editor" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <div class="flex border-b bg-muted/40">
-      <button type="button" [class]="tabClass('write')" (click)="tab.set('write')">Write</button>
+      <button type="button" [class]="tabClass('write')" (click)="tab.set('write')">
+        {{ writeText() }}
+      </button>
       <button type="button" [class]="tabClass('preview')" (click)="tab.set('preview')">
-        Preview
+        {{ previewText() }}
       </button>
     </div>
     @if (tab() === 'write') {
@@ -16444,9 +16927,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                     host: { 'data-slot': 'markdown-editor', '[class]': 'computedClass()' },
                     template: `
     <div class="flex border-b bg-muted/40">
-      <button type="button" [class]="tabClass('write')" (click)="tab.set('write')">Write</button>
+      <button type="button" [class]="tabClass('write')" (click)="tab.set('write')">
+        {{ writeText() }}
+      </button>
       <button type="button" [class]="tabClass('preview')" (click)="tab.set('preview')">
-        Preview
+        {{ previewText() }}
       </button>
     </div>
     @if (tab() === 'write') {
@@ -16467,10 +16952,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], writeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "writeLabel", required: false }] }], previewLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewLabel", required: false }] }] } });
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop$3 = () => { };
+/** Pattern of the trigger text ("Jul 16, 2026") — matches the pre-locale rendering in `en-US`. */
+const DEFAULT_DATE_FORMAT$2 = {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+};
 const POPUP_POSITIONS$1 = [
     { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
     { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
@@ -16492,18 +16983,18 @@ class BuiDatePicker {
     /** Month grids shown in the popover (handy for range). */
     months = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
-    /** Text shown on the trigger when no date is selected. */
-    placeholder = input('Pick a date', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Text shown on the trigger when no date is selected. Falls back to `provideBuiLabels`. */
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /** Earliest selectable date (`yyyy-mm-dd`). */
     minDate = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
     /** Latest selectable date (`yyyy-mm-dd`). */
     maxDate = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
-    /** First day of the week (0 = Sunday). */
-    weekStart = input(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "weekStart" }] : /* istanbul ignore next */ []));
+    /** First day of the week (0 = Sunday). Defaults to the locale's own convention. */
+    weekStart = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "weekStart" }] : /* istanbul ignore next */ []));
     /** Specific ISO dates (yyyy-mm-dd) to disable. */
     disabledDates = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
@@ -16523,23 +17014,41 @@ class BuiDatePicker {
     disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** BCP 47 locale for the trigger text and the calendar. Defaults to the app's `LOCALE_ID`. */
+    locale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * `Intl.DateTimeFormat` options for the trigger text. Replaces the default wholesale, so
+     * `{ dateStyle: 'short' }` renders `16/07/2026` in `fr` (options cannot be mixed with it).
+     */
+    dateFormat = input(DEFAULT_DATE_FORMAT$2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+    placeholderText = buiLabel('datePickerPlaceholder', this.placeholder);
     onChange = noop$3;
     onTouched = noop$3;
     host = inject(ElementRef);
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    resolvedLocale = buiLocale(this.locale);
+    formatter = computed(() => 
+    // Gregorian by default so the trigger agrees with the grid it opens; caller's options win.
+    new Intl.DateTimeFormat(this.resolvedLocale(), {
+        calendar: BUI_GRID_CALENDAR,
+        ...this.dateFormat(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
     hasValue = computed(() => (this.mode() === 'range' ? this.range().start : this.value()) !== '', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
     display = computed(() => {
         if (this.mode() === 'range') {
             const { start, end } = this.range();
             if (start === '') {
-                return this.placeholder();
+                return this.placeholderText();
             }
             return end === '' ? `${this.fmt(start)} – …` : `${this.fmt(start)} – ${this.fmt(end)}`;
         }
         const value = this.value();
-        return value === '' ? this.placeholder() : this.fmt(value);
+        return value === '' ? this.placeholderText() : this.fmt(value);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
     popupPositions = POPUP_POSITIONS$1;
@@ -16558,11 +17067,7 @@ class BuiDatePicker {
         }
     }
     fmt(iso) {
-        return new Date(`${iso}T00:00:00`).toLocaleDateString('en-US', {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-        });
+        return this.formatter().format(new Date(`${iso}T00:00:00`));
     }
     // The calendar is portalled into a CDK overlay (outside the host); rely on the overlay's own
     // outside-click signal. Clicks on the trigger stay inside the host and are ignored here.
@@ -16586,7 +17091,7 @@ class BuiDatePicker {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiDatePicker, isStandalone: true, selector: "bui-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disableWeekends: { classPropertyName: "disableWeekends", publicName: "disableWeekends", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, hideOutsideDays: { classPropertyName: "hideOutsideDays", publicName: "hideOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "date-picker" }, properties: { "class": "computedClass()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiDatePicker, isStandalone: true, selector: "bui-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, weekStart: { classPropertyName: "weekStart", publicName: "weekStart", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, disableWeekends: { classPropertyName: "disableWeekends", publicName: "disableWeekends", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, hideOutsideDays: { classPropertyName: "hideOutsideDays", publicName: "hideOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "date-picker" }, properties: { "class": "computedClass()" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiDatePicker), multi: true },
         ], ngImport: i0, template: `
     <button
@@ -16635,12 +17140,13 @@ class BuiDatePicker {
           [showWeekNumbers]="showWeekNumbers()"
           [captionLayout]="captionLayout()"
           [hideOutsideDays]="hideOutsideDays()"
+          [locale]="locale()"
           (valueChange)="onPick($event)"
           (rangeChange)="onRange($event)"
         />
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: BuiCalendar, selector: "bui-calendar", inputs: ["value", "mode", "range", "values", "months", "weekStart", "minDate", "maxDate", "disabledDates", "disableWeekends", "showWeekNumbers", "captionLayout", "hideOutsideDays", "disabled", "class", "previousMonthLabel", "monthSelectLabel", "yearLabel", "nextMonthLabel"], outputs: ["valueChange", "rangeChange", "valuesChange", "disabledChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: BuiCalendar, selector: "bui-calendar", inputs: ["value", "mode", "range", "values", "months", "weekStart", "minDate", "maxDate", "disabledDates", "disableWeekends", "showWeekNumbers", "captionLayout", "hideOutsideDays", "disabled", "class", "locale", "monthFormat", "weekdayFormat", "weekdayLabels", "previousMonthLabel", "monthSelectLabel", "yearLabel", "nextMonthLabel", "weekLabel"], outputs: ["valueChange", "rangeChange", "valuesChange", "disabledChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDatePicker, decorators: [{
             type: Component,
@@ -16701,6 +17207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
           [showWeekNumbers]="showWeekNumbers()"
           [captionLayout]="captionLayout()"
           [hideOutsideDays]="hideOutsideDays()"
+          [locale]="locale()"
           (valueChange)="onPick($event)"
           (rangeChange)="onRange($event)"
         />
@@ -16708,7 +17215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     </ng-template>
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], disableWeekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableWeekends", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], hideOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOutsideDays", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], weekStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekStart", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], disableWeekends: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableWeekends", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], hideOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOutsideDays", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }] } });
 
 /** A slide carousel. Project slides as direct children; arrows + dots navigate. SSR-safe. */
 class BuiCarousel {
@@ -18359,6 +18866,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop$2 = () => { };
+/**
+ * Pattern of the trigger text ("Jul 16, 2:30 PM") — matches the pre-locale rendering in `en-US`.
+ * Deliberately year-less, which is why the lever is full `Intl` options and not `dateStyle`.
+ */
+const DEFAULT_DATE_FORMAT$1 = {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+};
 const POPUP_POSITIONS = [
     { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
     { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
@@ -18380,9 +18897,12 @@ class BuiDatetimePicker {
     /** Month grids shown in the popover (handy for range). */
     months = input(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []));
-    /** Text shown on the trigger when nothing is selected. */
-    placeholder = input('Pick date & time', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Text shown on the trigger when nothing is selected. Falls back to `provideBuiLabels`. */
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Label for the time field in the popover. Falls back to `provideBuiLabels`. */
+    timeLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "timeLabel" }] : /* istanbul ignore next */ []));
     /** Earliest selectable date (`yyyy-mm-dd`). */
     minDate = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
@@ -18395,15 +18915,41 @@ class BuiDatetimePicker {
     /** Whether to include seconds in the time field. */
     seconds = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "seconds" }] : /* istanbul ignore next */ []));
+    /**
+     * How the popover's time field renders. The default native `input` is drawn by the browser in
+     * *its* language, so it can disagree with a trigger formatted in `locale`; `select` follows
+     * `locale` instead and keeps the whole picker on one clock.
+     */
+    timeMode = input('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeMode" }] : /* istanbul ignore next */ []));
     /** Whether the picker is disabled. Two-way bindable with `[(disabled)]`. */
     disabled = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** BCP 47 locale for the trigger text and the calendar. Defaults to the app's `LOCALE_ID`. */
+    locale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * `Intl.DateTimeFormat` options for the trigger text. Replaces the default wholesale, so
+     * `{ dateStyle: 'short', timeStyle: 'short' }` is valid (options cannot be mixed with it).
+     */
+    dateFormat = input(DEFAULT_DATE_FORMAT$1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+    placeholderText = buiLabel('datetimePickerPlaceholder', this.placeholder);
+    timeText = buiLabel('datetimePickerTime', this.timeLabel);
     onChange = noop$2;
     onTouched = noop$2;
     host = inject(ElementRef);
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    resolvedLocale = buiLocale(this.locale);
+    formatter = computed(() => 
+    // Gregorian by default so the trigger agrees with the grid it opens; caller's options win.
+    new Intl.DateTimeFormat(this.resolvedLocale(), {
+        calendar: BUI_GRID_CALENDAR,
+        ...this.dateFormat(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
     datePart = computed(() => this.value().split('T', 1).at(0) ?? '', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "datePart" }] : /* istanbul ignore next */ []));
     timePart = computed(() => {
@@ -18422,12 +18968,12 @@ class BuiDatetimePicker {
         if (this.mode() === 'range') {
             const { start, end } = this.range();
             if (start === '') {
-                return this.placeholder();
+                return this.placeholderText();
             }
             return end === '' ? `${this.fmt(start)} – …` : `${this.fmt(start)} – ${this.fmt(end)}`;
         }
         const value = this.value();
-        return value === '' ? this.placeholder() : this.fmt(value);
+        return value === '' ? this.placeholderText() : this.fmt(value);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
     popupPositions = POPUP_POSITIONS;
@@ -18458,12 +19004,7 @@ class BuiDatetimePicker {
         this.onChange(this.value());
     }
     fmt(value) {
-        return new Date(value).toLocaleString('en-US', {
-            month: 'short',
-            day: 'numeric',
-            hour: 'numeric',
-            minute: '2-digit',
-        });
+        return this.formatter().format(new Date(value));
     }
     // The popover is portalled into a CDK overlay (outside the host); rely on the overlay's own
     // outside-click signal. Clicks on the trigger stay inside the host and are ignored here.
@@ -18491,7 +19032,7 @@ class BuiDatetimePicker {
         return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDatetimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiDatetimePicker, isStandalone: true, selector: "bui-datetime-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "datetime-picker" }, properties: { "class": "computedClass()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiDatetimePicker, isStandalone: true, selector: "bui-datetime-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, captionLayout: { classPropertyName: "captionLayout", publicName: "captionLayout", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, timeMode: { classPropertyName: "timeMode", publicName: "timeMode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", range: "rangeChange", disabled: "disabledChange" }, host: { attributes: { "data-slot": "datetime-picker" }, properties: { "class": "computedClass()" } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BuiDatetimePicker), multi: true },
         ], ngImport: i0, template: `
     <button
@@ -18535,6 +19076,7 @@ class BuiDatetimePicker {
             [minDate]="minDate()"
             [maxDate]="maxDate()"
             [captionLayout]="captionLayout()"
+            [locale]="locale()"
             (rangeChange)="onRange($event)"
           />
         } @else {
@@ -18543,20 +19085,23 @@ class BuiDatetimePicker {
             [minDate]="minDate()"
             [maxDate]="maxDate()"
             [captionLayout]="captionLayout()"
+            [locale]="locale()"
             (valueChange)="onDate($event)"
           />
         }
         <div class="flex items-center gap-2 border-t p-2">
-          <span class="text-xs text-muted-foreground">Time</span>
+          <span class="text-xs text-muted-foreground">{{ timeText() }}</span>
           <bui-time-field
             [value]="timePart()"
             [seconds]="seconds()"
+            [mode]="timeMode()"
+            [locale]="locale()"
             (valueChange)="onTime($event)"
           />
         </div>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: BuiCalendar, selector: "bui-calendar", inputs: ["value", "mode", "range", "values", "months", "weekStart", "minDate", "maxDate", "disabledDates", "disableWeekends", "showWeekNumbers", "captionLayout", "hideOutsideDays", "disabled", "class", "previousMonthLabel", "monthSelectLabel", "yearLabel", "nextMonthLabel"], outputs: ["valueChange", "rangeChange", "valuesChange", "disabledChange"] }, { kind: "component", type: BuiTimeField, selector: "bui-time-field", inputs: ["value", "name", "id", "min", "max", "seconds", "disabled", "mode", "minuteStep", "ariaLabel", "class"], outputs: ["valueChange", "disabledChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: BuiCalendar, selector: "bui-calendar", inputs: ["value", "mode", "range", "values", "months", "weekStart", "minDate", "maxDate", "disabledDates", "disableWeekends", "showWeekNumbers", "captionLayout", "hideOutsideDays", "disabled", "class", "locale", "monthFormat", "weekdayFormat", "weekdayLabels", "previousMonthLabel", "monthSelectLabel", "yearLabel", "nextMonthLabel", "weekLabel"], outputs: ["valueChange", "rangeChange", "valuesChange", "disabledChange"] }, { kind: "component", type: BuiTimeField, selector: "bui-time-field", inputs: ["value", "name", "id", "min", "max", "seconds", "disabled", "mode", "minuteStep", "ariaLabel", "class", "locale", "hourCycle"], outputs: ["valueChange", "disabledChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDatetimePicker, decorators: [{
             type: Component,
@@ -18612,6 +19157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             [minDate]="minDate()"
             [maxDate]="maxDate()"
             [captionLayout]="captionLayout()"
+            [locale]="locale()"
             (rangeChange)="onRange($event)"
           />
         } @else {
@@ -18620,14 +19166,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
             [minDate]="minDate()"
             [maxDate]="maxDate()"
             [captionLayout]="captionLayout()"
+            [locale]="locale()"
             (valueChange)="onDate($event)"
           />
         }
         <div class="flex items-center gap-2 border-t p-2">
-          <span class="text-xs text-muted-foreground">Time</span>
+          <span class="text-xs text-muted-foreground">{{ timeText() }}</span>
           <bui-time-field
             [value]="timePart()"
             [seconds]="seconds()"
+            [mode]="timeMode()"
+            [locale]="locale()"
             (valueChange)="onTime($event)"
           />
         </div>
@@ -18635,7 +19184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     </ng-template>
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }, { type: i0.Output, args: ["rangeChange"] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], captionLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionLayout", required: false }] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], timeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeMode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }] } });
 
 /** Suggestion panel placement relative to the field, in CDK preference order. */
 const PANEL_POSITIONS$1 = [
@@ -20412,15 +20961,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { lat: [{ type: i0.Input, args: [{ isSignal: true, alias: "lat", required: false }] }], lon: [{ type: i0.Input, args: [{ isSignal: true, alias: "lon", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], marker: [{ type: i0.Input, args: [{ isSignal: true, alias: "marker", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+/** Pattern of the axis bound labels ("Jul 16") — matches the pre-locale rendering in `en-US`. */
+const DEFAULT_DATE_FORMAT = { month: 'short', day: 'numeric' };
 function toDay(iso) {
     return Math.floor(new Date(`${iso}T00:00:00`).getTime() / 86_400_000);
 }
-function label(iso) {
-    return new Date(`${iso}T00:00:00`).toLocaleDateString('en-US', {
-        month: 'short',
-        day: 'numeric',
-    });
-}
 /** A horizontal Gantt chart positioning task bars over a date range. SSR-safe. */
 class BuiGantt {
     /** Tasks to plot as horizontal bars across the date range. */
@@ -20436,6 +20981,27 @@ class BuiGantt {
     end = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "end" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    /** BCP 47 locale used for the axis bound labels. Defaults to the app's `LOCALE_ID`. */
+    locale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * `Intl.DateTimeFormat` options for the axis bound labels. Replaces the default wholesale, so
+     * `{ dateStyle: 'short' }` is valid (its options cannot be mixed with `month`/`day`).
+     */
+    dateFormat = input(DEFAULT_DATE_FORMAT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+    /** Text shown when there are no tasks to plot. Falls back to `provideBuiLabels`. */
+    emptyLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "emptyLabel" }] : /* istanbul ignore next */ []));
+    emptyText = buiLabel('ganttEmpty', this.emptyLabel);
+    resolvedLocale = buiLocale(this.locale);
+    formatter = computed(() => 
+    // Gregorian by default so the bounds agree with the day-indexed axis; caller's options win.
+    new Intl.DateTimeFormat(this.resolvedLocale(), {
+        calendar: BUI_GRID_CALENDAR,
+        ...this.dateFormat(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
     milestoneRows = computed(() => {
         const { min, span } = this.bounds();
         return this.milestones()
@@ -20452,7 +21018,11 @@ class BuiGantt {
         const ends = tasks.map((task) => toDay(task.end));
         const min = this.start() === '' ? Math.min(...starts) : toDay(this.start());
         const max = this.end() === '' ? Math.max(...ends) : toDay(this.end());
-        return { tasks, min, max, span: Math.max(1, max - min) };
+        // Keep the latest end as its ISO string: `toDay` counts days from a *local* midnight, so
+        // turning a day index back into a Date resolves to the day before east of UTC.
+        // No tasks -> `Math.max()` is -Infinity -> `indexOf` misses -> empty label, no throw.
+        const maxIso = tasks[ends.indexOf(Math.max(...ends))]?.end ?? '';
+        return { tasks, min, max, maxIso, span: Math.max(1, max - min) };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []));
     rows = computed(() => {
@@ -20472,24 +21042,27 @@ class BuiGantt {
     ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     rangeStart = computed(() => {
         const start = this.start();
-        return label(start === '' ? (this.tasks().at(0)?.start ?? '') : start);
+        return this.label(start === '' ? (this.tasks().at(0)?.start ?? '') : start);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rangeStart" }] : /* istanbul ignore next */ []));
     rangeEnd = computed(() => {
-        const { tasks, max } = this.bounds();
+        const { maxIso } = this.bounds();
         const end = this.end();
-        if (end !== '') {
-            return label(end);
-        }
-        return tasks.length > 0
-            ? new Date(max * 86_400_000).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
-            : '';
+        return this.label(end === '' ? maxIso : end);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rangeEnd" }] : /* istanbul ignore next */ []));
     computedClass = computed(() => cn('block', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    label(iso) {
+        return this.format(new Date(`${iso}T00:00:00`));
+    }
+    /** `Intl` throws on an invalid date where `toLocaleDateString` returned "Invalid Date"; an
+     *  empty bound (a task with no `start`) is a caller mistake, not a reason to break the chart. */
+    format(date) {
+        return Number.isNaN(date.getTime()) ? '' : this.formatter().format(date);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiGantt, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiGantt, isStandalone: true, selector: "bui-gantt", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: false, transformFunction: null }, milestones: { classPropertyName: "milestones", publicName: "milestones", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: false, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "gantt" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiGantt, isStandalone: true, selector: "bui-gantt", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: false, transformFunction: null }, milestones: { classPropertyName: "milestones", publicName: "milestones", isSignal: true, isRequired: false, transformFunction: null }, start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: false, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "gantt" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
     <div class="space-y-2">
       @for (row of rows(); track row.name) {
         <div class="grid grid-cols-[8rem_1fr] items-center gap-3">
@@ -20508,7 +21081,7 @@ class BuiGantt {
           </div>
         </div>
       } @empty {
-        <p class="text-sm text-muted-foreground">No tasks.</p>
+        <p class="text-sm text-muted-foreground">{{ emptyText() }}</p>
       }
       @for (milestone of milestoneRows(); track milestone.name) {
         <div class="grid grid-cols-[8rem_1fr] items-center gap-3">
@@ -20558,7 +21131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
           </div>
         </div>
       } @empty {
-        <p class="text-sm text-muted-foreground">No tasks.</p>
+        <p class="text-sm text-muted-foreground">{{ emptyText() }}</p>
       }
       @for (milestone of milestoneRows(); track milestone.name) {
         <div class="grid grid-cols-[8rem_1fr] items-center gap-3">
@@ -20584,7 +21157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
     }
   `,
                 }]
-        }], propDecorators: { tasks: [{ type: i0.Input, args: [{ isSignal: true, alias: "tasks", required: false }] }], milestones: [{ type: i0.Input, args: [{ isSignal: true, alias: "milestones", required: false }] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "start", required: false }] }], end: [{ type: i0.Input, args: [{ isSignal: true, alias: "end", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], propDecorators: { tasks: [{ type: i0.Input, args: [{ isSignal: true, alias: "tasks", required: false }] }], milestones: [{ type: i0.Input, args: [{ isSignal: true, alias: "milestones", required: false }] }], start: [{ type: i0.Input, args: [{ isSignal: true, alias: "start", required: false }] }], end: [{ type: i0.Input, args: [{ isSignal: true, alias: "end", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }] } });
 
 const WEEK = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 function toMinutes(value) {
@@ -21874,5 +22447,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BUI_DEFAULT_LABELS, BUI_LABELS, BuiAccent, BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAddToCart, BuiAlert, BuiAlertDescription, BuiAlertDialogAction, BuiAlertDialogCancel, BuiAlertDialogContent, BuiAlertDialogDescription, BuiAlertDialogFooter, BuiAlertDialogHeader, BuiAlertDialogTitle, BuiAlertTitle, BuiAnimatedBeam, BuiAspectRatio, BuiAudioPlayer, BuiAurora, BuiAutocomplete, BuiAutosizeTextarea, BuiAvatar, BuiAvatarGroup, BuiBackToTop, BuiBadge, BuiBanner, BuiBentoGrid, BuiBentoItem, BuiBorderBeam, BuiBottomNavigation, BuiBottomNavigationItem, BuiBreadcrumb, BuiBreadcrumbEllipsis, BuiBreadcrumbItem, BuiBreadcrumbLink, BuiBreadcrumbList, BuiBreadcrumbPage, BuiBreadcrumbSeparator, BuiButton, BuiButtonGroup, BuiButtonGroupText, BuiCalendar, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCarousel, BuiChart, BuiChat, BuiChatMessage, BuiCheckbox, BuiCitation, BuiCodeBlock, BuiCollapsible, BuiCollapsibleContent, BuiCollapsibleTrigger, BuiColorPicker, BuiCombobox, BuiCommand, BuiComparisonSlider, BuiComparisonTable, BuiConfetti, BuiContainer, BuiContextMenu, BuiCookieConsent, BuiCopyButton, BuiCountdown, BuiDataTable, BuiDatePicker, BuiDateRangePicker, BuiDatetimePicker, BuiDescriptionItem, BuiDescriptionList, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiDiffViewer, BuiDock, BuiDockItem, BuiDotPattern, BuiDrawer, BuiDropdownMenu, BuiDropdownMenuItem, BuiDropdownMenuLabel, BuiDropdownMenuSeparator, BuiEditable, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiFileUpload, BuiFlipCard, BuiGallery, BuiGantt, BuiGradientText, BuiGridPattern, BuiHeatmap, BuiHoverCard, BuiHoverCardContent, BuiIconTile, BuiImage, BuiInfiniteScroll, BuiInput, BuiInputField, BuiInputGroup, BuiInputGroupAddon, BuiInputGroupButton, BuiInputGroupInput, BuiInputGroupText, BuiInputMask, BuiInputOtp, BuiItem, BuiItemActions, BuiItemContent, BuiItemDescription, BuiItemGroup, BuiItemMedia, BuiItemTitle, BuiJsonViewer, BuiJsonViewerNode, BuiKanban, BuiKbd, BuiKbdGroup, BuiKnob, BuiLabel, BuiLink, BuiLoadingOverlay, BuiMap, BuiMarkdownEditor, BuiMarquee, BuiMasonry, BuiMentionInput, BuiMenubar, BuiMenubarTrigger, BuiMeteors, BuiMeter, BuiMiniCart, BuiMoneyInput, BuiNavigationMenu, BuiNotificationCenter, BuiNumberInput, BuiNumberTicker, BuiOnboardingTour, BuiOrgChart, BuiOrgChartNode, BuiPageHeader, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiParallax, BuiPasswordStrength, BuiPhoneInput, BuiPopover, BuiPopoverContent, BuiPresence, BuiPrice, BuiProductCard, BuiProgress, BuiPromptInput, BuiQrCode, BuiQuantitySelector, BuiQuote, BuiRadioGroup, BuiRadioGroupItem, BuiRating, BuiReasoning, BuiRepeater, BuiResizableHandle, BuiResizablePanel, BuiResizablePanelGroup, BuiRichTextEditor, BuiScheduler, BuiScrollArea, BuiScrollspy, BuiSegmentedControl, BuiSelect, BuiSeparator, BuiSheet, BuiSidebar, BuiSidebarInset, BuiSidebarMenuButton, BuiSidebarProvider, BuiSidebarState, BuiSidebarTrigger, BuiSignaturePad, BuiSkeleton, BuiSlider, BuiSonner, BuiSparkline, BuiSpeedDial, BuiSpinner, BuiSpotlightCard, BuiStack, BuiStat, BuiStepper, BuiStepperItem, BuiStreamingText, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTagsInput, BuiTerminal, BuiTextReveal, BuiTextarea, BuiThemeCustomizer, BuiTiltCard, BuiTimeField, BuiTimeline, BuiTimelineItem, BuiToaster, BuiToggle, BuiToggleGroup, BuiToggleGroupItem, BuiToolCall, BuiTooltip, BuiTooltipContent, BuiTopProgress, BuiTree, BuiTreeNode, BuiTreeTable, BuiTypewriter, BuiTypography, BuiVariantSelector, BuiVideo, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buiLabel, buttonVariants, cn, encodeQr, provideBuiLabels, toggleVariants };
+export { BUI_DEFAULT_LABELS, BUI_GRID_CALENDAR, BUI_LABELS, BuiAccent, BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAddToCart, BuiAlert, BuiAlertDescription, BuiAlertDialogAction, BuiAlertDialogCancel, BuiAlertDialogContent, BuiAlertDialogDescription, BuiAlertDialogFooter, BuiAlertDialogHeader, BuiAlertDialogTitle, BuiAlertTitle, BuiAnimatedBeam, BuiAspectRatio, BuiAudioPlayer, BuiAurora, BuiAutocomplete, BuiAutosizeTextarea, BuiAvatar, BuiAvatarGroup, BuiBackToTop, BuiBadge, BuiBanner, BuiBentoGrid, BuiBentoItem, BuiBorderBeam, BuiBottomNavigation, BuiBottomNavigationItem, BuiBreadcrumb, BuiBreadcrumbEllipsis, BuiBreadcrumbItem, BuiBreadcrumbLink, BuiBreadcrumbList, BuiBreadcrumbPage, BuiBreadcrumbSeparator, BuiButton, BuiButtonGroup, BuiButtonGroupText, BuiCalendar, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCarousel, BuiChart, BuiChat, BuiChatMessage, BuiCheckbox, BuiCitation, BuiCodeBlock, BuiCollapsible, BuiCollapsibleContent, BuiCollapsibleTrigger, BuiColorPicker, BuiCombobox, BuiCommand, BuiComparisonSlider, BuiComparisonTable, BuiConfetti, BuiContainer, BuiContextMenu, BuiCookieConsent, BuiCopyButton, BuiCountdown, BuiDataTable, BuiDatePicker, BuiDateRangePicker, BuiDatetimePicker, BuiDescriptionItem, BuiDescriptionList, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiDiffViewer, BuiDock, BuiDockItem, BuiDotPattern, BuiDrawer, BuiDropdownMenu, BuiDropdownMenuItem, BuiDropdownMenuLabel, BuiDropdownMenuSeparator, BuiEditable, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiFileUpload, BuiFlipCard, BuiGallery, BuiGantt, BuiGradientText, BuiGridPattern, BuiHeatmap, BuiHoverCard, BuiHoverCardContent, BuiIconTile, BuiImage, BuiInfiniteScroll, BuiInput, BuiInputField, BuiInputGroup, BuiInputGroupAddon, BuiInputGroupButton, BuiInputGroupInput, BuiInputGroupText, BuiInputMask, BuiInputOtp, BuiItem, BuiItemActions, BuiItemContent, BuiItemDescription, BuiItemGroup, BuiItemMedia, BuiItemTitle, BuiJsonViewer, BuiJsonViewerNode, BuiKanban, BuiKbd, BuiKbdGroup, BuiKnob, BuiLabel, BuiLink, BuiLoadingOverlay, BuiMap, BuiMarkdownEditor, BuiMarquee, BuiMasonry, BuiMentionInput, BuiMenubar, BuiMenubarTrigger, BuiMeteors, BuiMeter, BuiMiniCart, BuiMoneyInput, BuiNavigationMenu, BuiNotificationCenter, BuiNumberInput, BuiNumberTicker, BuiOnboardingTour, BuiOrgChart, BuiOrgChartNode, BuiPageHeader, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiParallax, BuiPasswordStrength, BuiPhoneInput, BuiPopover, BuiPopoverContent, BuiPresence, BuiPrice, BuiProductCard, BuiProgress, BuiPromptInput, BuiQrCode, BuiQuantitySelector, BuiQuote, BuiRadioGroup, BuiRadioGroupItem, BuiRating, BuiReasoning, BuiRepeater, BuiResizableHandle, BuiResizablePanel, BuiResizablePanelGroup, BuiRichTextEditor, BuiScheduler, BuiScrollArea, BuiScrollspy, BuiSegmentedControl, BuiSelect, BuiSeparator, BuiSheet, BuiSidebar, BuiSidebarInset, BuiSidebarMenuButton, BuiSidebarProvider, BuiSidebarState, BuiSidebarTrigger, BuiSignaturePad, BuiSkeleton, BuiSlider, BuiSonner, BuiSparkline, BuiSpeedDial, BuiSpinner, BuiSpotlightCard, BuiStack, BuiStat, BuiStepper, BuiStepperItem, BuiStreamingText, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTagsInput, BuiTerminal, BuiTextReveal, BuiTextarea, BuiThemeCustomizer, BuiTiltCard, BuiTimeField, BuiTimeline, BuiTimelineItem, BuiToaster, BuiToggle, BuiToggleGroup, BuiToggleGroupItem, BuiToolCall, BuiTooltip, BuiTooltipContent, BuiTopProgress, BuiTree, BuiTreeNode, BuiTreeTable, BuiTypewriter, BuiTypography, BuiVariantSelector, BuiVideo, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buiLabel, buiLocale, buiWeekInfo, buttonVariants, cn, encodeQr, provideBuiLabels, toggleVariants };
 //# sourceMappingURL=ng-blatui.mjs.map