@besaitech/ng-design-system 0.0.66 → 0.0.67

package/fesm2022/besaitech-ng-design-system.mjs

@@ -310,7 +310,7 @@ const VARIANTS$2 = {
         'dark:hover:bg-white/10 dark:active:bg-white/15',
     danger: 'bg-danger text-white shadow-sm hover:brightness-95 active:brightness-90',
 };
-const SIZES$d = {
+const SIZES$e = {
     sm: 'h-8 px-3 text-sm',
     md: 'h-10 px-4 text-sm',
     lg: 'h-12 px-5 text-base',
@@ -370,7 +370,7 @@ class SdsButton {
             BASE,
             this.shape() === 'pill' ? 'rounded-full' : 'rounded-control',
             VARIANTS$2[this.variant()],
-            SIZES$d[size],
+            SIZES$e[size],
             this.iconOnly() ? ICON_ONLY[size] : '',
             this.block() ? 'w-full' : '',
         ]
@@ -422,8 +422,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: [".sds-spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:9999px;animation:sds-spin .6s linear infinite}@keyframes sds-spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
-let nextId$o = 0;
-const SIZES$c = {
+let nextId$p = 0;
+const SIZES$d = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
@@ -435,7 +435,7 @@ const SIZES$c = {
  * sidebar search field).
  */
 class SdsInput {
-    autoId = `sds-input-${nextId$o++}`;
+    autoId = `sds-input-${nextId$p++}`;
     /**
      * `id` of the native `<input>` — for a `<label for>` outside the component, or to focus the field with
      * `document.getElementById(id).focus()` (after adding a row, say). Empty (default) generates one. Set it
@@ -539,7 +539,7 @@ class SdsInput {
     }, ...(ngDevMode ? [{ debugName: "fieldPadding" }] : []));
     wrapperClasses = computed(() => {
         const danger = !!this.error() || this.invalid();
-        const parts = [SIZES$c[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
+        const parts = [SIZES$d[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
         if (this.isDisabled())
             parts.push('opacity-60 cursor-not-allowed');
         if (this.filled()) {
@@ -795,7 +795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 100000s ease-in-out 0s;-webkit-text-fill-color:currentColor;caret-color:currentColor}\n"] }]
         }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], trailingAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAction", required: false }] }], trailingActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionLabel", required: false }] }], trailingActionPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionPressed", required: false }] }], trailingActionClick: [{ type: i0.Output, args: ["trailingActionClick"] }] } });
 
-let nextId$n = 0;
+let nextId$o = 0;
 const HEIGHTS = {
     sm: 'h-9',
     md: 'h-10',
@@ -823,7 +823,7 @@ const TEXT = {
  * with "." ("1.234" in nl-BE) stays a thousands separator.
  */
 class SdsInputNumber {
-    inputId = `sds-input-number-${nextId$n++}`;
+    inputId = `sds-input-number-${nextId$o++}`;
     fieldRef = viewChild('field', ...(ngDevMode ? [{ debugName: "fieldRef" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -1607,8 +1607,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], buttonLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLayout", required: false }] }], incrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementIcon", required: false }] }], decrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementIcon", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }] } });
 
-let nextId$m = 0;
-const SIZES$b = {
+let nextId$n = 0;
+const SIZES$c = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
@@ -1648,7 +1648,7 @@ function parseTime(value) {
  * <sds-time-input [ariaLabel]="'Closes at'" [ngModel]="end()" (ngModelChange)="end.set($event)" clearable />
  */
 class SdsTimeInput {
-    fieldId = `sds-time-input-${nextId$m++}`;
+    fieldId = `sds-time-input-${nextId$n++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name of the field when there is no visible [label]. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -1695,7 +1695,7 @@ class SdsTimeInput {
         return null;
     }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$b[this.size()], 'rounded-control'];
+        const parts = [SIZES$c[this.size()], 'rounded-control'];
         if (this.isDisabled())
             parts.push('opacity-60 cursor-not-allowed');
         if (this.appearance() === 'filled') {
@@ -2177,8 +2177,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], withSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSeconds", required: false }] }], placeholderText: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderText", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], hoursEl: [{ type: i0.ViewChild, args: ['hoursEl', { isSignal: true }] }], minutesEl: [{ type: i0.ViewChild, args: ['minutesEl', { isSignal: true }] }] } });
 
-let nextId$l = 0;
-const SIZES$a = {
+let nextId$m = 0;
+const SIZES$b = {
     sm: 'min-h-9 text-sm',
     md: 'min-h-10 text-sm',
     lg: 'min-h-12 text-base',
@@ -2200,7 +2200,7 @@ const SIZES$a = {
  * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
  */
 class SdsLocalizedInput {
-    autoId = `sds-localized-input-${nextId$l++}`;
+    autoId = `sds-localized-input-${nextId$m++}`;
     /** The native field's id; a generated one when empty (set it to pair an external `<label for>`). */
     inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : []));
     /** The native field's id: {@link inputId} or the generated one. */
@@ -2251,7 +2251,7 @@ class SdsLocalizedInput {
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$a[this.size()]];
+        const parts = [SIZES$b[this.size()]];
         const danger = !!this.error() || this.invalid();
         parts.push(this.isDisabled()
             ? 'border-border opacity-60 cursor-not-allowed'
@@ -2560,8 +2560,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], requiredLanguages: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLanguages", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], currentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLanguage", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], languageSwitcherLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageSwitcherLabel", required: false }] }], untranslatedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "untranslatedLabel", required: false }] }], requiredLanguageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLanguageLabel", required: false }] }] } });
 
-let nextId$k = 0;
-const SIZES$9 = {
+let nextId$l = 0;
+const SIZES$a = {
     md: 'h-12 w-11 text-lg',
     lg: 'h-14 w-12 text-xl',
 };
@@ -2577,7 +2577,7 @@ const SIZES$9 = {
  * first box and have it land correctly.
  */
 class SdsOtpInput {
-    groupId = `sds-otp-${nextId$k++}`;
+    groupId = `sds-otp-${nextId$l++}`;
     /** How many boxes / characters the code has. */
     length = input(6, ...(ngDevMode ? [{ debugName: "length", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -2613,7 +2613,7 @@ class SdsOtpInput {
         return null;
     }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
     cellClasses = computed(() => {
-        const parts = ['rounded-control border', SIZES$9[this.size()]];
+        const parts = ['rounded-control border', SIZES$a[this.size()]];
         parts.push(this.error()
             ? 'border-danger focus:border-danger focus:ring-2 focus:ring-danger/25'
             : 'border-border text-ink focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25');
@@ -2877,8 +2877,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], cellLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellLabel", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], cells: [{ type: i0.ViewChildren, args: ['cell', { isSignal: true }] }] } });
 
-let nextId$j = 0;
-const SIZES$8 = {
+let nextId$k = 0;
+const SIZES$9 = {
     sm: 'text-sm px-3 py-2',
     md: 'text-sm px-3.5 py-2.5',
     lg: 'text-base px-4 py-3',
@@ -2889,7 +2889,7 @@ const SIZES$8 = {
  * [(ngModel)].
  */
 class SdsTextarea {
-    fieldId = `sds-textarea-${nextId$j++}`;
+    fieldId = `sds-textarea-${nextId$k++}`;
     field = viewChild('field', ...(ngDevMode ? [{ debugName: "field" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -2946,7 +2946,7 @@ class SdsTextarea {
     fieldClasses = computed(() => {
         const parts = [
             'block w-full rounded-control border text-ink outline-none transition-colors placeholder:text-ink-faint',
-            SIZES$8[this.size()],
+            SIZES$9[this.size()],
         ];
         if (this.autoResize())
             parts.push('overflow-hidden');
@@ -3156,8 +3156,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], countLimitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLimitLabel", required: false }] }], countLabelTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLabelTemplate", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }] } });
 
-let nextId$i = 0;
-const SIZES$7 = {
+let nextId$j = 0;
+const SIZES$8 = {
     sm: { track: 'h-5 w-9', knob: 'h-4 w-4', on: 'translate-x-4', icon: 11 },
     md: { track: 'h-6 w-11', knob: 'h-5 w-5', on: 'translate-x-5', icon: 13 },
     lg: { track: 'h-7 w-[3.4rem]', knob: 'h-6 w-6', on: 'translate-x-7', icon: 15 },
@@ -3169,7 +3169,7 @@ const SIZES$7 = {
  * states.
  */
 class SdsToggleSwitch {
-    fieldId = `sds-toggle-switch-${nextId$i++}`;
+    fieldId = `sds-toggle-switch-${nextId$j++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -3197,7 +3197,7 @@ class SdsToggleSwitch {
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
     checked = computed(() => this.value() === this.trueValue(), ...(ngDevMode ? [{ debugName: "checked" }] : []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-    sizing = computed(() => SIZES$7[this.size()], ...(ngDevMode ? [{ debugName: "sizing" }] : []));
+    sizing = computed(() => SIZES$8[this.size()], ...(ngDevMode ? [{ debugName: "sizing" }] : []));
     describedBy = computed(() => {
         if (this.error())
             return `${this.fieldId}-err`;
@@ -3416,7 +3416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], trueValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "trueValue", required: false }] }], falseValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "falseValue", required: false }] }], onIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onIcon", required: false }] }], offIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "offIcon", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
 
-let nextId$h = 0;
+let nextId$i = 0;
 /**
  * Boolean checkbox. Implements ControlValueAccessor — use with reactive forms
  * or `[(ngModel)]`. Renders a styled box (brand-filled with a check when on)
@@ -3431,7 +3431,7 @@ let nextId$h = 0;
  * <sds-checkbox label="Auto-merge" [(ngModel)]="autoMerge" />
  */
 class SdsCheckbox {
-    id = `sds-checkbox-${nextId$h++}`;
+    id = `sds-checkbox-${nextId$i++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -3579,7 +3579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
 
-let nextId$g = 0;
+let nextId$h = 0;
 /**
  * Mounted radios by group name. A pick updates the rest of its group, because a native radio says
  * nothing when the browser unchecks it — without this a reactive form would leave the old choice drawn.
@@ -3605,7 +3605,7 @@ const groups = new Map();
  * <sds-radio name="size" value="large" label="Grand" [(ngModel)]="size" />
  */
 class SdsRadio {
-    id = `sds-radio-${nextId$g++}`;
+    id = `sds-radio-${nextId$h++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -4181,7 +4181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 /** Activation order: none → contains → may-contain → none. */
 const ORDER = ['none', 'contains', 'may-contain'];
-let nextId$f = 0;
+let nextId$g = 0;
 /**
  * A chip that cycles through three states — `none`, `contains`, `may-contain` — built for the 14-tile
  * allergen declaration grid, but generic (any "no / yes / maybe" declaration).
@@ -4201,7 +4201,7 @@ let nextId$f = 0;
  *                     containsLabel="Contains" mayContainLabel="May contain" noneLabel="Not present" />
  */
 class SdsTriStateChip {
-    chipId = `sds-tri-state-chip-${nextId$f++}`;
+    chipId = `sds-tri-state-chip-${nextId$g++}`;
     /** Current state. Two-way: `[(value)]`. */
     value = model('none', ...(ngDevMode ? [{ debugName: "value" }] : []));
     /** Visible name (e.g. the allergen). Required — the chip has no other accessible name. */
@@ -4426,7 +4426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showState: [{ type: i0.Input, args: [{ isSignal: true, alias: "showState", required: false }] }], noneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noneLabel", required: false }] }], containsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "containsLabel", required: false }] }], mayContainLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mayContainLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
 
-let nextId$e = 0;
+let nextId$f = 0;
 /**
  * Segmented control: a small set of mutually exclusive options shown side by side (e.g. "Pick exactly /
  * at least / up to"). Radio-group semantics: `role="radiogroup"` with `role="radio"` segments, one tab
@@ -4442,7 +4442,7 @@ let nextId$e = 0;
  */
 class SdsSegmented {
     host = inject(ElementRef);
-    baseId = `sds-segmented-${nextId$e++}`;
+    baseId = `sds-segmented-${nextId$f++}`;
     /** Options: `{ value, label, icon?, disabled? }` objects, or bare strings/numbers. */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     /** Selected value. Two-way: `[(value)]`. */
@@ -4720,7 +4720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `,
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheck", required: false }] }] } });
-let nextId$d = 0;
+let nextId$e = 0;
 /**
  * A set of chips: pick ONE (a filter row such as "All · Missing photo · Hidden", VAT presets, a date
  * range) or, with `multiple`, SEVERAL (categories of an item, days of the week, dietary tags). Unlike
@@ -4743,7 +4743,7 @@ let nextId$d = 0;
  */
 class SdsChipGroup {
     host = inject(ElementRef);
-    baseId = `sds-chip-group-${nextId$d++}`;
+    baseId = `sds-chip-group-${nextId$e++}`;
     /** Options: `{ value, label, icon?, count?, disabled? }` objects, or bare strings/numbers. */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     /** Picked value (single) or values (multiple). Two-way: `[(value)]`. */
@@ -5645,7 +5645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], availableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableLabel", required: false }] }], soldOutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "soldOutLabel", required: false }] }], hiddenLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenLabel", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }], imageError: [{ type: i0.Output, args: ["imageError"] }] } });
 
-let nextId$c = 0;
+let nextId$d = 0;
 /**
  * Marks the element inside `<sds-menu>` that opens it. It may be a native button or a component that
  * renders one (e.g. `<sds-button sdsMenuTrigger>`): the menu wires `aria-haspopup`, `aria-expanded` and
@@ -5693,7 +5693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class SdsMenu {
     host = inject(ElementRef);
     injector = inject(Injector);
-    menuId = `sds-menu-${nextId$c++}`;
+    menuId = `sds-menu-${nextId$d++}`;
     triggerId = `${this.menuId}-trigger`;
     /** Actions and separators, in order. */
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
@@ -6289,7 +6289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     standalone: true,
                 }]
         }] });
-let nextId$b = 0;
+let nextId$c = 0;
 /** Fastest auto-scroll step, in px per animation frame (reached at the very edge). */
 const AUTO_SCROLL_MAX_STEP = 18;
 /** The nearest ancestor that scrolls vertically (below the document, which is handled as the window). */
@@ -6358,7 +6358,7 @@ function moveItem(list, from, to) {
 class SdsSortableList {
     host = inject(ElementRef);
     injector = inject(Injector);
-    instructionsId = `sds-sortable-${nextId$b++}-help`;
+    instructionsId = `sds-sortable-${nextId$c++}-help`;
     /** The items, in order. Two-way: `[(items)]` receives the new order on drop. */
     items = model([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     /** Property used as a stable identity for rows (strongly recommended). */
@@ -6950,7 +6950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], labelField: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelField", required: false }] }], itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLabel", required: false }] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], autoScrollEdge: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEdge", required: false }] }], handleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "handleLabel", required: false }] }], instructions: [{ type: i0.Input, args: [{ isSignal: true, alias: "instructions", required: false }] }], pickedUpMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickedUpMessage", required: false }] }], movedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "movedMessage", required: false }] }], droppedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppedMessage", required: false }] }], cancelledMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelledMessage", required: false }] }], reorder: [{ type: i0.Output, args: ["reorder"] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSortableItem), { isSignal: true }] }], handleTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSortableHandle), { isSignal: true }] }] } });
 
-let nextId$a = 0;
+let nextId$b = 0;
 /** "1.5 MB" style size (decimal units, like file managers show them), for messages. */
 function sdsFormatBytes(bytes) {
     if (!Number.isFinite(bytes) || bytes < 0)
@@ -7007,7 +7007,7 @@ function sdsFileMatchesAccept(file, accept) {
  *                (files)="upload($event)" (rejected)="onRejected($event)" />
  */
 class SdsFileDrop {
-    zoneId = `sds-file-drop-${nextId$a++}`;
+    zoneId = `sds-file-drop-${nextId$b++}`;
     fileInput = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInput" }] : []));
     /** Accepted types, native `accept` syntax. Empty = anything. */
     accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : []));
@@ -7389,7 +7389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropLabel", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], wrongTypeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrongTypeMessage", required: false }] }], tooLargeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooLargeMessage", required: false }] }], tooManyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyMessage", required: false }] }], files: [{ type: i0.Output, args: ["files"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
 
-let nextId$9 = 0;
+let nextId$a = 0;
 /**
  * Crops an image to a FIXED aspect ratio (e.g. the shop's card ratio): the frame is fixed and the image
  * moves and zooms behind it, always covering the frame, so every crop is valid.
@@ -7407,7 +7407,7 @@ let nextId$9 = 0;
  * <sds-button (click)="upload(await cropper.toBlob({ width: 1600 }))">Save</sds-button>
  */
 class SdsImageCropper {
-    helpId = `sds-image-cropper-${nextId$9++}-help`;
+    helpId = `sds-image-cropper-${nextId$a++}-help`;
     viewport = viewChild('viewport', ...(ngDevMode ? [{ debugName: "viewport" }] : []));
     /** Image to crop: a URL, or a Blob/File. */
     src = input(null, ...(ngDevMode ? [{ debugName: "src" }] : []));
@@ -7956,6 +7956,28 @@ function formatDdMmYyyy(d) {
     const p = (n) => String(n).padStart(2, '0');
     return `${p(d.getDate())}/${p(d.getMonth() + 1)}/${d.getFullYear()}`;
 }
+/** Whole calendar days from `a` to `b` (b − a), ignoring time-of-day and DST shifts. */
+function diffInDays(a, b) {
+    const ua = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
+    const ub = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
+    return Math.round((ub - ua) / 86_400_000);
+}
+/**
+ * Format an inclusive day range for display, e.g. `1–7 Oct 2026`, `28 Sept – 4 Oct 2026` or
+ * `20 Dec 2026 – 3 Jan 2027` (en-GB). Uses `Intl.DateTimeFormat#formatRange`, which collapses the
+ * parts both ends share; falls back to `start – end` where it is unavailable. A one-day range prints
+ * a single date.
+ */
+function formatDateRange(range, locale = 'en-GB', options = { day: 'numeric', month: 'short', year: 'numeric' }) {
+    const fmt = new Intl.DateTimeFormat(locale, options);
+    if (isSameDay(range.start, range.end))
+        return fmt.format(range.start);
+    const withRange = fmt;
+    if (typeof withRange.formatRange === 'function') {
+        return withRange.formatRange(range.start, range.end);
+    }
+    return `${fmt.format(range.start)} – ${fmt.format(range.end)}`;
+}
 
 /**
  * Inline month calendar with day → month → year drill-down navigation,
@@ -8755,7 +8777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], showDone: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDone", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], doneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneLabel", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], todayActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayActionLabel", required: false }] }], clearActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearActionLabel", required: false }] }], dateSelect: [{ type: i0.Output, args: ["dateSelect"] }], done: [{ type: i0.Output, args: ["done"] }] } });
 
-const SIZES$6 = {
+const SIZES$7 = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
@@ -8771,7 +8793,7 @@ const SIZES$6 = {
 class SdsDatePicker {
     host = inject(ElementRef);
     injector = inject(Injector);
-    fieldId = `sds-date-${nextId$8++}`;
+    fieldId = `sds-date-${nextId$9++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     placeholder = input('dd/mm/yyyy', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
@@ -8847,7 +8869,7 @@ class SdsDatePicker {
     /** Whether the clear button is shown (affects the field's right padding). */
     showClear = computed(() => this.clearable() && !!this.value() && !this.isDisabled(), ...(ngDevMode ? [{ debugName: "showClear" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$6[this.size()]];
+        const parts = [SIZES$7[this.size()]];
         parts.push(this.error()
             ? 'border-danger focus-within:border-danger focus-within:ring-2 focus-within:ring-danger/25'
             : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
@@ -9084,84 +9106,1201 @@ class SdsDatePicker {
             [class.pr-11]="!showClear()"
           />
 
-          @if (showClear()) {
-            <button
-              type="button"
-              tabindex="-1"
-              [attr.aria-label]="clearLabel()"
-              class="absolute right-10 inline-flex h-6 w-6 items-center justify-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft"
-              (click)="clear($event)"
+          @if (showClear()) {
+            <button
+              type="button"
+              tabindex="-1"
+              [attr.aria-label]="clearLabel()"
+              class="absolute right-10 inline-flex h-6 w-6 items-center justify-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft"
+              (click)="clear($event)"
+            >
+              <sds-icon name="x" [size]="15" />
+            </button>
+          }
+
+          <button
+            type="button"
+            tabindex="-1"
+            [attr.aria-label]="open() ? closeCalendarLabel() : openCalendarLabel()"
+            class="absolute right-2 inline-flex h-7 w-7 items-center justify-center rounded-control text-ink-soft hover:bg-muted"
+            (click)="toggle($event)"
+          >
+            <sds-icon name="calendar" [size]="18" />
+          </button>
+        </div>
+
+        @if (open()) {
+          <!-- Relocated to document.body on open (appendTo body) to escape
+               ancestor overflow/stacking; positioned via positionPanel(). -->
+          <div
+            class="fixed z-[1000]"
+            role="dialog"
+            aria-modal="false"
+            [attr.aria-label]="panelLabel()"
+            (keydown.escape)="onEscape($event)"
+            (keydown)="onPanelKeydown($event)"
+          >
+            <sds-calendar
+              [value]="value()"
+              [min]="min()"
+              [max]="max()"
+              [firstDayOfWeek]="firstDayOfWeek()"
+              [locale]="locale()"
+              [showActions]="showActions()"
+              [showTime]="showTime()"
+              [showDone]="showTime()"
+              [timeLabel]="timeLabel()"
+              [hoursLabel]="hoursLabel()"
+              [minutesLabel]="minutesLabel()"
+              [doneLabel]="doneLabel()"
+              [calendarLabel]="calendarLabel()"
+              [previousLabel]="previousLabel()"
+              [nextLabel]="nextLabel()"
+              [todayActionLabel]="todayActionLabel()"
+              [clearActionLabel]="clearActionLabel()"
+              (valueChange)="onCalendarValue($event)"
+              (dateSelect)="onDateSelect()"
+              (done)="close(true)"
+            />
+          </div>
+        }
+      </div>
+    }
+
+    @if (hint() && !error()) {
+      <p class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+    @if (error()) {
+      <p class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }, { kind: "component", type: SdsCalendar, selector: "sds-calendar", inputs: ["value", "min", "max", "firstDayOfWeek", "locale", "showActions", "showTime", "showDone", "timeLabel", "hoursLabel", "minutesLabel", "doneLabel", "calendarLabel", "previousLabel", "nextLabel", "todayActionLabel", "clearActionLabel"], outputs: ["valueChange", "dateSelect", "done"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsDatePicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-date-picker',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon, SdsCalendar],
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsDatePicker), multi: true },
+                    ],
+                    host: {
+                        class: 'block',
+                        '(document:click)': 'onDocumentClick($event)',
+                        '(keydown.escape)': 'onEscape($event)',
+                    },
+                    template: `
+    @if (label()) {
+      <label [for]="fieldId" class="mb-1.5 block text-sm font-medium text-ink">
+        {{ label() }}
+      </label>
+    }
+
+    @if (inline()) {
+      <sds-calendar
+        [value]="value()"
+        [min]="min()"
+        [max]="max()"
+        [firstDayOfWeek]="firstDayOfWeek()"
+        [locale]="locale()"
+        [showActions]="showActions()"
+        [showTime]="showTime()"
+        [timeLabel]="timeLabel()"
+        [hoursLabel]="hoursLabel()"
+        [minutesLabel]="minutesLabel()"
+        [calendarLabel]="calendarLabel()"
+        [previousLabel]="previousLabel()"
+        [nextLabel]="nextLabel()"
+        [todayActionLabel]="todayActionLabel()"
+        [clearActionLabel]="clearActionLabel()"
+        (valueChange)="onCalendarValue($event)"
+      />
+    } @else {
+      <div class="relative">
+        <div
+          #trigger
+          class="relative flex items-center rounded-control border bg-surface transition-colors"
+          [class]="wrapperClasses()"
+          (click)="toggle()"
+        >
+          <input
+            [id]="fieldId"
+            type="text"
+            readonly
+            [value]="displayValue()"
+            [placeholder]="placeholder()"
+            [disabled]="isDisabled()"
+            [attr.aria-haspopup]="'dialog'"
+            [attr.aria-expanded]="open()"
+            [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+            (keydown.enter)="onTriggerKeydown($event)"
+            (keydown.space)="onTriggerKeydown($event)"
+            (keydown.arrowdown)="onTriggerKeydown($event)"
+            class="w-full cursor-pointer bg-transparent pl-3.5 text-ink outline-none placeholder:text-ink-faint disabled:cursor-not-allowed"
+            [class.pr-20]="showClear()"
+            [class.pr-11]="!showClear()"
+          />
+
+          @if (showClear()) {
+            <button
+              type="button"
+              tabindex="-1"
+              [attr.aria-label]="clearLabel()"
+              class="absolute right-10 inline-flex h-6 w-6 items-center justify-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft"
+              (click)="clear($event)"
+            >
+              <sds-icon name="x" [size]="15" />
+            </button>
+          }
+
+          <button
+            type="button"
+            tabindex="-1"
+            [attr.aria-label]="open() ? closeCalendarLabel() : openCalendarLabel()"
+            class="absolute right-2 inline-flex h-7 w-7 items-center justify-center rounded-control text-ink-soft hover:bg-muted"
+            (click)="toggle($event)"
+          >
+            <sds-icon name="calendar" [size]="18" />
+          </button>
+        </div>
+
+        @if (open()) {
+          <!-- Relocated to document.body on open (appendTo body) to escape
+               ancestor overflow/stacking; positioned via positionPanel(). -->
+          <div
+            class="fixed z-[1000]"
+            role="dialog"
+            aria-modal="false"
+            [attr.aria-label]="panelLabel()"
+            (keydown.escape)="onEscape($event)"
+            (keydown)="onPanelKeydown($event)"
+          >
+            <sds-calendar
+              [value]="value()"
+              [min]="min()"
+              [max]="max()"
+              [firstDayOfWeek]="firstDayOfWeek()"
+              [locale]="locale()"
+              [showActions]="showActions()"
+              [showTime]="showTime()"
+              [showDone]="showTime()"
+              [timeLabel]="timeLabel()"
+              [hoursLabel]="hoursLabel()"
+              [minutesLabel]="minutesLabel()"
+              [doneLabel]="doneLabel()"
+              [calendarLabel]="calendarLabel()"
+              [previousLabel]="previousLabel()"
+              [nextLabel]="nextLabel()"
+              [todayActionLabel]="todayActionLabel()"
+              [clearActionLabel]="clearActionLabel()"
+              (valueChange)="onCalendarValue($event)"
+              (dateSelect)="onDateSelect()"
+              (done)="close(true)"
+            />
+          </div>
+        }
+      </div>
+    }
+
+    @if (hint() && !error()) {
+      <p class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+    @if (error()) {
+      <p class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    }
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], doneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], openCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openCalendarLabel", required: false }] }], closeCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeCalendarLabel", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], todayActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayActionLabel", required: false }] }], clearActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearActionLabel", required: false }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsCalendar), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+let nextId$9 = 0;
+
+/** Same first and last day (time-of-day ignored). `null` only equals `null`. */
+function isSameRange(a, b) {
+    if (!a || !b)
+        return !a && !b;
+    return isSameDay(a.start, b.start) && isSameDay(a.end, b.end);
+}
+/** The last `days` days, today included: `sdsLastDays(7)` = today − 6 … today. */
+function sdsLastDays(days, today = new Date()) {
+    const end = startOfDay(today);
+    return { start: addDays(end, -(Math.max(1, Math.floor(days)) - 1)), end };
+}
+/**
+ * The last `months` months, today included: `sdsLastMonths(12)` on 13 Oct 2026 = 14 Oct 2025 …
+ * 13 Oct 2026 (the day after the same day `months` months ago, clamped to short months).
+ */
+function sdsLastMonths(months, today = new Date()) {
+    const end = startOfDay(today);
+    return { start: addDays(addMonthsKeepDay(end, -Math.max(1, Math.floor(months))), 1), end };
+}
+
+/** Viewport width (px) from which two months sit side by side — Tailwind's `sm`. */
+const TWO_MONTH_MIN_WIDTH = 640;
+/**
+ * Range calendar: one or two side-by-side months on which a day range is picked with two clicks.
+ * Used by `<sds-date-range-picker>`, and usable on its own (bind `[(start)]` and `[(end)]`).
+ *
+ * Selection rule: the first click sets `start` (and clears `end`); the second sets `end` — or, when
+ * it lands BEFORE `start`, becomes the new `start`. Clicking the start day again gives a one-day
+ * range. While the end is being chosen, the band previews start → hovered (or keyboard-focused) day.
+ * `maxDays` caps the span: once a start is picked, days past `start + maxDays − 1` are disabled.
+ *
+ * Bare (no border / shadow / background): place it in your own card or panel.
+ *
+ * Keyboard: arrows move by day / week, Home / End to the week's start / end, PageUp / PageDown by
+ * month (roving tabindex across both months); Enter / Space picks the focused day.
+ *
+ * @example
+ * <sds-range-calendar [(start)]="from" [(end)]="to" [max]="today" />
+ */
+class SdsRangeCalendar {
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    /** First day of the range (two-way: `[(start)]`). */
+    start = model(null, ...(ngDevMode ? [{ debugName: "start" }] : []));
+    /** Last day of the range, inclusive (two-way: `[(end)]`). `null` while the end is being chosen. */
+    end = model(null, ...(ngDevMode ? [{ debugName: "end" }] : []));
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    /** Longest selectable span in days (start and end included). `null` = no limit. */
+    maxDays = input(null, ...(ngDevMode ? [{ debugName: "maxDays" }] : []));
+    /** 0 = Sunday, 1 = Monday (default, European). */
+    firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
+    /** BCP 47 locale for month and weekday names. Defaults to `en-GB`; pass the app's locale. */
+    locale = input('en-GB', ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    /** Months shown side by side (from the `sm` breakpoint; always one below it). */
+    months = input(2, ...(ngDevMode ? [{ debugName: "months" }] : []));
+    /** Accessible name of the calendar group. English default — translate it in the app. */
+    calendarLabel = input('Calendar', ...(ngDevMode ? [{ debugName: "calendarLabel" }] : []));
+    /** Accessible name of the icon-only "previous month" button (its ONLY name — translate it). */
+    previousLabel = input('Previous', ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
+    /** Accessible name of the icon-only "next month" button. See {@link previousLabel}. */
+    nextLabel = input('Next', ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    /** Emitted on every day pick (start or end). */
+    daySelect = output();
+    /** Emitted when a pick completes the range (both ends set). */
+    rangeSelect = output();
+    /** The day under the pointer / keyboard focus (`null` when the pointer leaves the grid). */
+    dayHover = output();
+    /** First month on screen. */
+    viewDate = signal(startOfMonth(new Date()), ...(ngDevMode ? [{ debugName: "viewDate" }] : []));
+    focusedDate = signal(startOfDay(new Date()), ...(ngDevMode ? [{ debugName: "focusedDate" }] : []));
+    hovered = signal(null, ...(ngDevMode ? [{ debugName: "hovered" }] : []));
+    wide = signal(true, ...(ngDevMode ? [{ debugName: "wide" }] : []));
+    /** Months actually rendered: {@link months}, but one on narrow viewports. */
+    monthsShown = computed(() => (this.months() === 2 && this.wide() ? 2 : 1), ...(ngDevMode ? [{ debugName: "monthsShown" }] : []));
+    constructor() {
+        this.watchViewport();
+        // Keep a range set from outside on screen (a form writing a value, a preset). A pick inside the
+        // grid is already visible, so this never moves the months under the pointer.
+        effect(() => {
+            const s = this.start();
+            const e = this.end();
+            untracked(() => {
+                const anchor = e ?? s;
+                if (anchor && !this.isVisible(anchor))
+                    this.anchorView(anchor, !!e);
+            });
+        });
+    }
+    watchViewport() {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return;
+        const mq = window.matchMedia(`(min-width: ${TWO_MONTH_MIN_WIDTH}px)`);
+        this.wide.set(mq.matches);
+        const onChange = (e) => this.wide.set(e.matches);
+        mq.addEventListener?.('change', onChange);
+        inject(DestroyRef).onDestroy(() => mq.removeEventListener?.('change', onChange));
+    }
+    // --- styling helpers ---
+    navBtn = 'inline-flex h-8 w-8 items-center justify-center rounded-control text-ink-soft hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-40';
+    // --- derived state ---
+    weekdayLabels = computed(() => {
+        const fmt = new Intl.DateTimeFormat(this.locale(), { weekday: 'short' });
+        const sunday = new Date(2023, 0, 1); // a known Sunday
+        return Array.from({ length: 7 }, (_, i) => fmt.format(addDays(sunday, (this.firstDayOfWeek() + i) % 7)));
+    }, ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : []));
+    /** The end used for drawing: the committed end, else the previewed (hovered) one. */
+    previewEnd = computed(() => {
+        const s = this.start();
+        const h = this.hovered();
+        if (!s || this.end() || !h)
+            return null;
+        const day = startOfDay(h);
+        if (day < startOfDay(s) || this.isDisabled(day))
+            return null;
+        return day;
+    }, ...(ngDevMode ? [{ debugName: "previewEnd" }] : []));
+    prevDisabled = computed(() => {
+        const min = this.min();
+        return !!min && this.viewDate() <= startOfMonth(min);
+    }, ...(ngDevMode ? [{ debugName: "prevDisabled" }] : []));
+    nextDisabled = computed(() => {
+        const max = this.max();
+        return !!max && addMonths(this.viewDate(), this.monthsShown() - 1) >= startOfMonth(max);
+    }, ...(ngDevMode ? [{ debugName: "nextDisabled" }] : []));
+    monthViews = computed(() => {
+        const n = this.monthsShown();
+        const first = this.viewDate();
+        const titleFmt = new Intl.DateTimeFormat(this.locale(), { month: 'long', year: 'numeric' });
+        const today = startOfDay(new Date());
+        const s = this.start() ? startOfDay(this.start()) : null;
+        const committedEnd = this.end() ? startOfDay(this.end()) : null;
+        const preview = this.previewEnd();
+        const e = committedEnd ?? preview;
+        const lastVisible = new Date(first.getFullYear(), first.getMonth() + n, 0);
+        const focus = this.focusedDate();
+        const tabbable = focus >= first && focus <= lastVisible ? focus : first;
+        // Re-read so the disabled state follows start / end / maxDays / min / max.
+        this.maxDays();
+        this.min();
+        this.max();
+        const out = [];
+        for (let m = 0; m < n; m++) {
+            const month = addMonths(first, m);
+            const offset = (month.getDay() - this.firstDayOfWeek() + 7) % 7;
+            const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
+            const weeks = [];
+            for (let w = 0; w < 6; w++) {
+                const row = [];
+                for (let col = 0; col < 7; col++) {
+                    const dayNum = w * 7 + col - offset + 1;
+                    if (dayNum < 1 || dayNum > daysInMonth) {
+                        row.push(blankCell(`${isoDay(month)}-b${w}${col}`));
+                        continue;
+                    }
+                    const date = new Date(month.getFullYear(), month.getMonth(), dayNum);
+                    const isStart = isSameDay(date, s);
+                    const isEndDay = isSameDay(date, e);
+                    const hasSpan = !!s && !!e && !isSameDay(s, e);
+                    const inRange = !!s && !!e && date > s && date < e;
+                    let band = 'none';
+                    if (hasSpan) {
+                        if (inRange)
+                            band = 'full';
+                        else if (isStart)
+                            band = 'right';
+                        else if (isEndDay)
+                            band = 'left';
+                    }
+                    row.push({
+                        key: isoDay(date),
+                        date,
+                        day: dayNum,
+                        today: isSameDay(date, today),
+                        disabled: this.isDisabled(date),
+                        tabbable: isSameDay(date, tabbable),
+                        isStart,
+                        isEnd: isEndDay && !!committedEnd,
+                        isPreviewEnd: isEndDay && !committedEnd && !isStart,
+                        inRange,
+                        band,
+                        roundLeft: col === 0 || dayNum === 1,
+                        roundRight: col === 6 || dayNum === daysInMonth,
+                    });
+                }
+                weeks.push(row);
+            }
+            out.push({ key: isoDay(month), title: titleFmt.format(month), weeks });
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "monthViews" }] : []));
+    // --- selection ---
+    isDisabled(d) {
+        if (isOutOfRange(d, this.min(), this.max()))
+            return true;
+        const s = this.start();
+        const limit = this.maxDays();
+        if (s && !this.end() && limit != null && limit > 0) {
+            return diffInDays(s, d) >= limit;
+        }
+        return false;
+    }
+    selectDay(d) {
+        const day = startOfDay(d);
+        if (this.isDisabled(day))
+            return;
+        const s = this.start();
+        if (!s || this.end()) {
+            this.start.set(day);
+            this.end.set(null);
+        }
+        else if (day < startOfDay(s)) {
+            this.start.set(day);
+        }
+        else {
+            this.end.set(day);
+            this.rangeSelect.emit({ start: startOfDay(s), end: day });
+        }
+        this.focusedDate.set(day);
+        this.daySelect.emit(day);
+    }
+    setHover(d) {
+        if (isSameDay(d, this.hovered()) || (!d && !this.hovered()))
+            return;
+        this.hovered.set(d);
+        this.dayHover.emit(d);
+    }
+    onDayFocus(d) {
+        this.focusedDate.set(startOfDay(d));
+        this.setHover(d);
+    }
+    // --- navigation ---
+    shiftView(delta) {
+        this.viewDate.set(addMonths(this.viewDate(), delta));
+    }
+    isVisible(d) {
+        const first = this.viewDate();
+        const last = new Date(first.getFullYear(), first.getMonth() + this.monthsShown(), 0);
+        const day = startOfDay(d);
+        return day >= first && day <= last;
+    }
+    /** Show `d`'s month first, or — with `last` — as the right-most month. */
+    anchorView(d, last) {
+        const m = startOfMonth(d);
+        this.viewDate.set(last ? addMonths(m, -(this.monthsShown() - 1)) : m);
+    }
+    onGridKeydown(e) {
+        let f = this.focusedDate();
+        const weekPos = (f.getDay() - this.firstDayOfWeek() + 7) % 7;
+        switch (e.key) {
+            case 'ArrowLeft':
+                f = addDays(f, -1);
+                break;
+            case 'ArrowRight':
+                f = addDays(f, 1);
+                break;
+            case 'ArrowUp':
+                f = addDays(f, -7);
+                break;
+            case 'ArrowDown':
+                f = addDays(f, 7);
+                break;
+            case 'Home':
+                f = addDays(f, -weekPos);
+                break;
+            case 'End':
+                f = addDays(f, 6 - weekPos);
+                break;
+            case 'PageUp':
+                f = addMonthsKeepDay(f, -1);
+                break;
+            case 'PageDown':
+                f = addMonthsKeepDay(f, 1);
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                this.selectDay(f);
+                return;
+            default:
+                return;
+        }
+        e.preventDefault();
+        if (!this.isVisible(f))
+            this.anchorView(f, f > this.viewDate());
+        this.focusedDate.set(f);
+        this.setHover(f);
+        this.focusCell(f);
+    }
+    /**
+     * Show and focus the active day: the range's end (as the right-most month), else its start, else
+     * today (right-most when `max` is this month or earlier, so a "past only" calendar does not open on
+     * an all-disabled next month). Called by the picker when its panel opens.
+     */
+    focusActiveCell() {
+        const s = this.start();
+        const e = this.end();
+        const today = startOfDay(new Date());
+        let target;
+        if (e) {
+            target = startOfDay(e);
+            this.anchorView(target, true);
+        }
+        else if (s) {
+            target = startOfDay(s);
+            this.anchorView(target, false);
+        }
+        else {
+            const max = this.max();
+            target = max && today > startOfDay(max) ? startOfDay(max) : today;
+            this.anchorView(target, !!max && startOfMonth(max) <= startOfMonth(today));
+        }
+        this.focusedDate.set(target);
+        this.focusCell(target);
+    }
+    focusHandle;
+    /**
+     * Focus a day once it is rendered. A month change re-renders the grid, so try after the next
+     * render AND on a timer: whichever runs once the cell exists wins (focusing twice is harmless),
+     * and the timer still fires when nothing changed and no render is coming.
+     */
+    focusCell(d) {
+        const key = isoDay(d);
+        const focus = () => {
+            if (isoDay(this.focusedDate()) !== key)
+                return; // superseded by a later move
+            const el = this.host.nativeElement.querySelector(`[data-date="${key}"]`);
+            if (el && document.activeElement !== el)
+                el.focus();
+        };
+        clearTimeout(this.focusHandle);
+        this.focusHandle = setTimeout(focus);
+        afterNextRender(focus, { injector: this.injector });
+    }
+    // --- template helpers ---
+    iso(d) {
+        return isoDay(d);
+    }
+    fullLabel(d) {
+        return new Intl.DateTimeFormat(this.locale(), {
+            weekday: 'long',
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric',
+        }).format(d);
+    }
+    bandClass(cell) {
+        let cls = 'pointer-events-none absolute inset-y-0.5 bg-brand-50';
+        if (cell.band === 'full') {
+            cls += ' inset-x-0';
+            if (cell.roundLeft)
+                cls += ' rounded-l-full';
+            if (cell.roundRight)
+                cls += ' rounded-r-full';
+        }
+        else if (cell.band === 'right') {
+            cls += ' left-1/2 right-0';
+            if (cell.roundRight)
+                cls += ' rounded-r-full';
+        }
+        else {
+            cls += ' left-0 right-1/2';
+            if (cell.roundLeft)
+                cls += ' rounded-l-full';
+        }
+        return cls;
+    }
+    dayClass(cell) {
+        const base = 'inline-flex h-9 w-9 items-center justify-center rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-40';
+        if (cell.isStart || cell.isEnd) {
+            return `${base} bg-brand-600 font-semibold text-white hover:bg-brand-700 ${DARK_BRAND_FILL_HOVER} focus-visible:ring-offset-1 focus-visible:ring-offset-surface`;
+        }
+        if (cell.isPreviewEnd) {
+            return `${base} bg-brand-100 font-semibold text-ink ring-1 ring-inset ring-brand-300`;
+        }
+        if (cell.today) {
+            return `${base} font-bold text-brand-600 ring-1 ring-inset ring-brand-300 ${cell.inRange ? 'hover:bg-brand-100' : 'hover:bg-brand-50'}`;
+        }
+        return `${base} text-ink ${cell.inRange ? 'hover:bg-brand-100' : 'hover:bg-brand-50'}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsRangeCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsRangeCalendar, isStandalone: true, selector: "sds-range-calendar", inputs: { start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: false, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", 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 }, maxDays: { classPropertyName: "maxDays", publicName: "maxDays", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, calendarLabel: { classPropertyName: "calendarLabel", publicName: "calendarLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { start: "startChange", end: "endChange", daySelect: "daySelect", rangeSelect: "rangeSelect", dayHover: "dayHover" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div class="select-none" role="group" [attr.aria-label]="calendarLabel()" (mouseleave)="setHover(null)">
+      <div class="flex flex-col gap-4 sm:flex-row sm:gap-6">
+        @for (m of monthViews(); track m.key; let first = $first; let last = $last) {
+          <div class="w-[17.5rem]">
+            <div class="mb-2 flex items-center justify-between">
+              @if (first) {
+                <button
+                  type="button"
+                  [class]="navBtn"
+                  [disabled]="prevDisabled()"
+                  [attr.aria-label]="previousLabel()"
+                  (click)="shiftView(-1)"
+                >
+                  <sds-icon name="chevron-left" [size]="18" />
+                </button>
+              } @else {
+                <span class="h-8 w-8" aria-hidden="true"></span>
+              }
+              <span class="px-1 text-sm font-semibold capitalize text-ink" aria-live="polite">
+                {{ m.title }}
+              </span>
+              @if (last) {
+                <button
+                  type="button"
+                  [class]="navBtn"
+                  [disabled]="nextDisabled()"
+                  [attr.aria-label]="nextLabel()"
+                  (click)="shiftView(1)"
+                >
+                  <sds-icon name="chevron-right" [size]="18" />
+                </button>
+              } @else {
+                <span class="h-8 w-8" aria-hidden="true"></span>
+              }
+            </div>
+
+            <table class="w-full table-fixed border-collapse" role="grid" [attr.aria-label]="m.title">
+              <thead>
+                <tr>
+                  @for (wd of weekdayLabels(); track $index) {
+                    <th scope="col" class="pb-1 text-[11px] font-medium uppercase text-ink-faint">
+                      {{ wd }}
+                    </th>
+                  }
+                </tr>
+              </thead>
+              <tbody (keydown)="onGridKeydown($event)">
+                @for (week of m.weeks; track $index) {
+                  <tr>
+                    @for (cell of week; track cell.key) {
+                      <td class="relative p-0 text-center">
+                        @if (cell.date; as date) {
+                          @if (cell.band !== 'none') {
+                            <span aria-hidden="true" [class]="bandClass(cell)"></span>
+                          }
+                          <span class="relative flex justify-center py-0.5">
+                            <button
+                              type="button"
+                              [attr.data-date]="iso(date)"
+                              [tabindex]="cell.tabbable ? 0 : -1"
+                              [disabled]="cell.disabled"
+                              [attr.aria-selected]="cell.isStart || cell.isEnd"
+                              [attr.aria-current]="cell.today ? 'date' : null"
+                              [attr.aria-label]="fullLabel(date)"
+                              [class]="dayClass(cell)"
+                              (click)="selectDay(date)"
+                              (mouseenter)="setHover(date)"
+                              (focus)="onDayFocus(date)"
+                            >
+                              {{ cell.day }}
+                            </button>
+                          </span>
+                        }
+                      </td>
+                    }
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        }
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsRangeCalendar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-range-calendar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
+                    host: { class: 'block' },
+                    template: `
+    <div class="select-none" role="group" [attr.aria-label]="calendarLabel()" (mouseleave)="setHover(null)">
+      <div class="flex flex-col gap-4 sm:flex-row sm:gap-6">
+        @for (m of monthViews(); track m.key; let first = $first; let last = $last) {
+          <div class="w-[17.5rem]">
+            <div class="mb-2 flex items-center justify-between">
+              @if (first) {
+                <button
+                  type="button"
+                  [class]="navBtn"
+                  [disabled]="prevDisabled()"
+                  [attr.aria-label]="previousLabel()"
+                  (click)="shiftView(-1)"
+                >
+                  <sds-icon name="chevron-left" [size]="18" />
+                </button>
+              } @else {
+                <span class="h-8 w-8" aria-hidden="true"></span>
+              }
+              <span class="px-1 text-sm font-semibold capitalize text-ink" aria-live="polite">
+                {{ m.title }}
+              </span>
+              @if (last) {
+                <button
+                  type="button"
+                  [class]="navBtn"
+                  [disabled]="nextDisabled()"
+                  [attr.aria-label]="nextLabel()"
+                  (click)="shiftView(1)"
+                >
+                  <sds-icon name="chevron-right" [size]="18" />
+                </button>
+              } @else {
+                <span class="h-8 w-8" aria-hidden="true"></span>
+              }
+            </div>
+
+            <table class="w-full table-fixed border-collapse" role="grid" [attr.aria-label]="m.title">
+              <thead>
+                <tr>
+                  @for (wd of weekdayLabels(); track $index) {
+                    <th scope="col" class="pb-1 text-[11px] font-medium uppercase text-ink-faint">
+                      {{ wd }}
+                    </th>
+                  }
+                </tr>
+              </thead>
+              <tbody (keydown)="onGridKeydown($event)">
+                @for (week of m.weeks; track $index) {
+                  <tr>
+                    @for (cell of week; track cell.key) {
+                      <td class="relative p-0 text-center">
+                        @if (cell.date; as date) {
+                          @if (cell.band !== 'none') {
+                            <span aria-hidden="true" [class]="bandClass(cell)"></span>
+                          }
+                          <span class="relative flex justify-center py-0.5">
+                            <button
+                              type="button"
+                              [attr.data-date]="iso(date)"
+                              [tabindex]="cell.tabbable ? 0 : -1"
+                              [disabled]="cell.disabled"
+                              [attr.aria-selected]="cell.isStart || cell.isEnd"
+                              [attr.aria-current]="cell.today ? 'date' : null"
+                              [attr.aria-label]="fullLabel(date)"
+                              [class]="dayClass(cell)"
+                              (click)="selectDay(date)"
+                              (mouseenter)="setHover(date)"
+                              (focus)="onDayFocus(date)"
+                            >
+                              {{ cell.day }}
+                            </button>
+                          </span>
+                        }
+                      </td>
+                    }
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { start: [{ type: i0.Input, args: [{ isSignal: true, alias: "start", required: false }] }, { type: i0.Output, args: ["startChange"] }], end: [{ type: i0.Input, args: [{ isSignal: true, alias: "end", required: false }] }, { type: i0.Output, args: ["endChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], maxDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDays", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], daySelect: [{ type: i0.Output, args: ["daySelect"] }], rangeSelect: [{ type: i0.Output, args: ["rangeSelect"] }], dayHover: [{ type: i0.Output, args: ["dayHover"] }] } });
+function blankCell(key) {
+    return {
+        key,
+        date: null,
+        day: 0,
+        today: false,
+        disabled: true,
+        tabbable: false,
+        isStart: false,
+        isEnd: false,
+        isPreviewEnd: false,
+        inRange: false,
+        band: 'none',
+        roundLeft: false,
+        roundRight: false,
+    };
+}
+
+const SIZES$6 = {
+    sm: 'h-9 text-sm',
+    md: 'h-10 text-sm',
+    lg: 'h-12 text-base',
+};
+/**
+ * Date range picker: a field that opens a panel with quick ranges (presets) on the left and a
+ * two-month range calendar on the right. A preset applies at once and closes the panel; a custom
+ * range is picked with two clicks and stays PENDING until "Apply" (Cancel, Escape and a click away
+ * discard it).
+ *
+ * The value is an inclusive `SdsDateRange` (`{ start, end }`, local midnight) or `null`, bound with
+ * `[(value)]` (a `model`, not a ControlValueAccessor). `(presetSelect)` emits the preset `id` when
+ * one is chosen, and `activePresetId()` tells which preset the current value equals (`null` = a
+ * custom range), so an app can remember "30d" rather than two dates.
+ *
+ * Every visible and accessible string is an input with an English default — translate them all.
+ *
+ * @example
+ * <sds-date-range-picker label="Period" [presets]="presets" [max]="today" [(value)]="range" />
+ */
+class SdsDateRangePicker {
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    uid = nextId$8++;
+    fieldId = `sds-date-range-${this.uid}`;
+    labelId = `${this.fieldId}-label`;
+    valueId = `${this.fieldId}-value`;
+    /** The selected range (two-way: `[(value)]`), `null` when none. Day granularity, end inclusive. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Quick ranges listed on the left of the panel; choosing one applies it and closes the panel. */
+    presets = input([], ...(ngDevMode ? [{ debugName: "presets" }] : []));
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    /** Longest custom range in days (start and end included). `null` = no limit. */
+    maxDays = input(null, ...(ngDevMode ? [{ debugName: "maxDays" }] : []));
+    /** 0 = Sunday, 1 = Monday (default, European). */
+    firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
+    /** BCP 47 locale for the calendar and the default range format. Defaults to `en-GB`. */
+    locale = input('en-GB', ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Months side by side in the panel (from the `sm` breakpoint; always one below it). */
+    months = input(2, ...(ngDevMode ? [{ debugName: "months" }] : []));
+    /**
+     * Display formatter for the field. Default: `Intl.DateTimeFormat#formatRange` with day, short
+     * month and year in {@link locale} (e.g. `1–7 Oct 2026`) — see `formatDateRange`.
+     */
+    format = input(null, ...(ngDevMode ? [{ debugName: "format" }] : []));
+    /** Visible label above the field. */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Accessible name when there is no visible {@link label}. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Field text when no range is selected. */
+    placeholder = input('Select dates', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Accessible name of the overlay dialog. */
+    panelLabel = input('Choose a date range', ...(ngDevMode ? [{ debugName: "panelLabel" }] : []));
+    /** Heading (and group name) of the presets column. */
+    presetsLabel = input('Quick ranges', ...(ngDevMode ? [{ debugName: "presetsLabel" }] : []));
+    /** Caption of the pending start date in the panel footer. */
+    startLabel = input('Start', ...(ngDevMode ? [{ debugName: "startLabel" }] : []));
+    /** Caption of the pending end date in the panel footer. */
+    endLabel = input('End', ...(ngDevMode ? [{ debugName: "endLabel" }] : []));
+    /** Text of the footer's apply action. */
+    applyLabel = input('Apply', ...(ngDevMode ? [{ debugName: "applyLabel" }] : []));
+    /** Text of the footer's cancel action. */
+    cancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
+    /** Accessible name of the calendar group (forwarded to `<sds-range-calendar>`). */
+    calendarLabel = input('Calendar', ...(ngDevMode ? [{ debugName: "calendarLabel" }] : []));
+    /** Accessible name of the icon-only "previous month" button. */
+    previousLabel = input('Previous', ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
+    /** Accessible name of the icon-only "next month" button. */
+    nextLabel = input('Next', ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    /** Emits the preset `id` when a preset is chosen (after `value` has been updated). */
+    presetSelect = output();
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    pendingStart = signal(null, ...(ngDevMode ? [{ debugName: "pendingStart" }] : []));
+    pendingEnd = signal(null, ...(ngDevMode ? [{ debugName: "pendingEnd" }] : []));
+    calendar = viewChild(SdsRangeCalendar, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
+    trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
+    /** The overlay panel, relocated to document.body while open. */
+    panelEl = null;
+    /** Id of the preset the current value equals, or `null` (no value, or a custom range). */
+    activePresetId = computed(() => this.presetIdFor(this.value()), ...(ngDevMode ? [{ debugName: "activePresetId" }] : []));
+    pendingPresetId = computed(() => {
+        const s = this.pendingStart();
+        const e = this.pendingEnd();
+        return s && e ? this.presetIdFor({ start: s, end: e }) : null;
+    }, ...(ngDevMode ? [{ debugName: "pendingPresetId" }] : []));
+    displayValue = computed(() => {
+        const v = this.value();
+        if (!v)
+            return '';
+        const fmt = this.format();
+        return fmt ? fmt(v) : formatDateRange(v, this.locale());
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    dayFmt = computed(() => new Intl.DateTimeFormat(this.locale(), { day: 'numeric', month: 'short', year: 'numeric' }), ...(ngDevMode ? [{ debugName: "dayFmt" }] : []));
+    pendingStartText = computed(() => {
+        const s = this.pendingStart();
+        return s ? this.dayFmt().format(s) : '—';
+    }, ...(ngDevMode ? [{ debugName: "pendingStartText" }] : []));
+    pendingEndText = computed(() => {
+        const e = this.pendingEnd();
+        return e ? this.dayFmt().format(e) : '—';
+    }, ...(ngDevMode ? [{ debugName: "pendingEndText" }] : []));
+    canApply = computed(() => !!this.pendingStart() && !!this.pendingEnd(), ...(ngDevMode ? [{ debugName: "canApply" }] : []));
+    triggerClasses = computed(() => {
+        const parts = [
+            'flex w-full items-center gap-2 rounded-control border border-border bg-surface px-3 text-left transition-colors focus-visible:border-brand-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/25',
+            SIZES$6[this.size()],
+        ];
+        if (this.open())
+            parts.push('border-brand-500 ring-2 ring-brand-500/25');
+        parts.push(this.disabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:border-ink-faint');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
+    cancelBtn = 'rounded-control px-3 py-1.5 text-sm font-medium text-ink-soft hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500';
+    applyBtn = `rounded-control bg-brand-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-brand-700 ${DARK_BRAND_FILL_HOVER} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-1 focus-visible:ring-offset-surface disabled:cursor-not-allowed disabled:opacity-40`;
+    presetClass(active) {
+        const base = 'rounded-control px-2.5 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500';
+        return active
+            ? `${base} bg-brand-50 font-semibold text-ink`
+            : `${base} text-ink-soft hover:bg-muted hover:text-ink`;
+    }
+    presetIdFor(range) {
+        if (!range)
+            return null;
+        return this.presets().find((p) => isSameRange(p.range(), range))?.id ?? null;
+    }
+    // --- open / close ---
+    toggle(event) {
+        event?.stopPropagation();
+        if (this.disabled())
+            return;
+        this.open() ? this.close() : this.openPanel();
+    }
+    onTriggerArrowDown(event) {
+        event.preventDefault();
+        if (!this.disabled() && !this.open())
+            this.openPanel();
+    }
+    openPanel() {
+        if (this.disabled())
+            return;
+        const v = this.value();
+        this.pendingStart.set(v ? startOfDay(v.start) : null);
+        this.pendingEnd.set(v ? startOfDay(v.end) : null);
+        this.open.set(true);
+        // Run after the overlay is rendered, then relocate it to <body>.
+        afterNextRender(() => {
+            this.panelEl = this.host.nativeElement.querySelector('[role="dialog"]');
+            this.positionPanel(); // also relocates to document.body
+            this.addReflowListeners();
+            this.calendar()?.focusActiveCell();
+        }, { injector: this.injector });
+    }
+    /** Close the panel, discarding a pending (un-applied) custom range. */
+    close(returnFocus = false) {
+        if (!this.open())
+            return;
+        this.removeReflowListeners();
+        this.panelEl?.remove(); // pull the body-relocated node before destroying the view
+        this.panelEl = null;
+        this.open.set(false);
+        if (returnFocus)
+            this.trigger()?.nativeElement.focus();
+    }
+    choosePreset(p) {
+        const r = p.range();
+        this.value.set({ start: startOfDay(r.start), end: startOfDay(r.end) });
+        this.close(true);
+        this.presetSelect.emit(p.id);
+    }
+    apply() {
+        const s = this.pendingStart();
+        const e = this.pendingEnd();
+        if (!s || !e)
+            return;
+        const next = { start: startOfDay(s), end: startOfDay(e) };
+        if (!isSameRange(next, this.value()))
+            this.value.set(next);
+        this.close(true);
+    }
+    /**
+     * Escape closes the panel and consumes the event while it is open, so an ancestor modal does not
+     * also dismiss on the same keystroke. When closed, the event passes through.
+     */
+    onEscape(event) {
+        if (!this.open())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.close(true);
+    }
+    /**
+     * Self-contained Tab trap for the overlay. The panel lives in document.body, outside any ancestor
+     * modal's focus trap; this keeps Tab / Shift+Tab cycling within the panel's own focusables.
+     */
+    onPanelKeydown(event) {
+        if (event.key !== 'Tab' || !this.panelEl)
+            return;
+        const sel = 'a[href],button:not([disabled]):not([tabindex="-1"]),input:not([disabled]),' +
+            '[tabindex]:not([tabindex="-1"])';
+        const items = Array.from(this.panelEl.querySelectorAll(sel)).filter((el) => el.offsetParent !== null);
+        if (items.length === 0)
+            return;
+        const first = items[0];
+        const last = items[items.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey && (active === first || !this.panelEl.contains(active))) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    onDocumentClick(event) {
+        if (!this.open())
+            return;
+        // composedPath is fixed at dispatch time, so a click on a node re-rendered away still counts.
+        const path = event.composedPath();
+        const inField = path.includes(this.host.nativeElement);
+        const inPanel = !!this.panelEl && path.includes(this.panelEl);
+        if (!inField && !inPanel)
+            this.close();
+    }
+    // --- body-appended overlay positioning ---
+    reflow = () => this.positionPanel();
+    listening = false;
+    addReflowListeners() {
+        if (this.listening)
+            return;
+        window.addEventListener('scroll', this.reflow, true);
+        window.addEventListener('resize', this.reflow);
+        this.listening = true;
+    }
+    removeReflowListeners() {
+        if (!this.listening)
+            return;
+        window.removeEventListener('scroll', this.reflow, true);
+        window.removeEventListener('resize', this.reflow);
+        this.listening = false;
+    }
+    positionPanel() {
+        const triggerEl = this.trigger()?.nativeElement;
+        const panelEl = this.panelEl;
+        if (!triggerEl || !panelEl)
+            return;
+        if (panelEl.parentElement !== document.body) {
+            document.body.appendChild(panelEl);
+        }
+        const r = triggerEl.getBoundingClientRect();
+        const ph = panelEl.offsetHeight || 420;
+        const pw = panelEl.offsetWidth || 760;
+        const gap = 6;
+        const margin = 8;
+        // Below the field by default; flip above when there isn't room; else clamp into the viewport.
+        let top = r.bottom + gap;
+        if (top + ph > window.innerHeight - margin) {
+            if (r.top - gap - ph > margin)
+                top = r.top - gap - ph;
+            else
+                top = Math.max(margin, window.innerHeight - margin - ph);
+        }
+        let left = r.left;
+        if (left + pw > window.innerWidth - margin) {
+            left = Math.max(margin, window.innerWidth - margin - pw);
+        }
+        panelEl.style.top = `${Math.round(top)}px`;
+        panelEl.style.left = `${Math.round(left)}px`;
+    }
+    ngOnDestroy() {
+        this.removeReflowListeners();
+        this.panelEl?.remove();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsDateRangePicker, isStandalone: true, selector: "sds-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", 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 }, maxDays: { classPropertyName: "maxDays", publicName: "maxDays", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, panelLabel: { classPropertyName: "panelLabel", publicName: "panelLabel", isSignal: true, isRequired: false, transformFunction: null }, presetsLabel: { classPropertyName: "presetsLabel", publicName: "presetsLabel", isSignal: true, isRequired: false, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, endLabel: { classPropertyName: "endLabel", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, calendarLabel: { classPropertyName: "calendarLabel", publicName: "calendarLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", presetSelect: "presetSelect" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "onEscape($event)" }, classAttribute: "block" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: SdsRangeCalendar, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label [id]="labelId" [for]="fieldId" class="mb-1.5 block text-sm font-medium text-ink">
+        {{ label() }}
+      </label>
+    }
+
+    <button
+      #trigger
+      type="button"
+      [id]="fieldId"
+      [disabled]="disabled()"
+      aria-haspopup="dialog"
+      [attr.aria-expanded]="open()"
+      [attr.aria-labelledby]="label() ? labelId + ' ' + valueId : null"
+      [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() + ', ' + (displayValue() || placeholder()) : null"
+      [class]="triggerClasses()"
+      (click)="toggle($event)"
+      (keydown.arrowdown)="onTriggerArrowDown($event)"
+    >
+      <sds-icon name="calendar" [size]="17" class="shrink-0 text-ink-soft" />
+      <span
+        [id]="valueId"
+        class="min-w-0 flex-1 truncate"
+        [class.text-ink]="!!displayValue()"
+        [class.text-ink-faint]="!displayValue()"
+      >
+        {{ displayValue() || placeholder() }}
+      </span>
+      <span
+        class="inline-flex shrink-0 text-ink-faint transition-transform"
+        [class.rotate-180]="open()"
+        aria-hidden="true"
+      >
+        <sds-icon name="chevron-down" [size]="16" />
+      </span>
+    </button>
+
+    @if (open()) {
+      <!-- Relocated to document.body on open (appendTo body) to escape ancestor overflow/stacking;
+           positioned via positionPanel(). -->
+      <div
+        class="fixed z-[1000] max-w-[calc(100vw-1rem)] overflow-auto rounded-card border border-border bg-surface shadow-lg"
+        style="max-height: calc(100vh - 1rem)"
+        role="dialog"
+        aria-modal="false"
+        [attr.aria-label]="panelLabel()"
+        (keydown.escape)="onEscape($event)"
+        (keydown)="onPanelKeydown($event)"
+      >
+        <div class="flex flex-col sm:flex-row">
+          @if (presets().length) {
+            <div
+              class="border-b border-border p-2 sm:w-44 sm:shrink-0 sm:border-b-0 sm:border-r"
+              role="group"
+              [attr.aria-label]="presetsLabel()"
             >
-              <sds-icon name="x" [size]="15" />
-            </button>
+              <p class="px-2 pb-1.5 pt-1 text-[11px] font-semibold uppercase tracking-wide text-ink-faint">
+                {{ presetsLabel() }}
+              </p>
+              <div class="flex flex-wrap gap-1 sm:flex-col sm:flex-nowrap">
+                @for (p of presets(); track p.id) {
+                  <button
+                    type="button"
+                    [attr.aria-pressed]="p.id === pendingPresetId()"
+                    [class]="presetClass(p.id === pendingPresetId())"
+                    (click)="choosePreset(p)"
+                  >
+                    {{ p.label }}
+                  </button>
+                }
+              </div>
+            </div>
           }
 
-          <button
-            type="button"
-            tabindex="-1"
-            [attr.aria-label]="open() ? closeCalendarLabel() : openCalendarLabel()"
-            class="absolute right-2 inline-flex h-7 w-7 items-center justify-center rounded-control text-ink-soft hover:bg-muted"
-            (click)="toggle($event)"
-          >
-            <sds-icon name="calendar" [size]="18" />
-          </button>
-        </div>
+          <div class="flex min-w-0 flex-col">
+            <div class="p-3">
+              <sds-range-calendar
+                [(start)]="pendingStart"
+                [(end)]="pendingEnd"
+                [min]="min()"
+                [max]="max()"
+                [maxDays]="maxDays()"
+                [firstDayOfWeek]="firstDayOfWeek()"
+                [locale]="locale()"
+                [months]="months()"
+                [calendarLabel]="calendarLabel()"
+                [previousLabel]="previousLabel()"
+                [nextLabel]="nextLabel()"
+              />
+            </div>
 
-        @if (open()) {
-          <!-- Relocated to document.body on open (appendTo body) to escape
-               ancestor overflow/stacking; positioned via positionPanel(). -->
-          <div
-            class="fixed z-[1000]"
-            role="dialog"
-            aria-modal="false"
-            [attr.aria-label]="panelLabel()"
-            (keydown.escape)="onEscape($event)"
-            (keydown)="onPanelKeydown($event)"
-          >
-            <sds-calendar
-              [value]="value()"
-              [min]="min()"
-              [max]="max()"
-              [firstDayOfWeek]="firstDayOfWeek()"
-              [locale]="locale()"
-              [showActions]="showActions()"
-              [showTime]="showTime()"
-              [showDone]="showTime()"
-              [timeLabel]="timeLabel()"
-              [hoursLabel]="hoursLabel()"
-              [minutesLabel]="minutesLabel()"
-              [doneLabel]="doneLabel()"
-              [calendarLabel]="calendarLabel()"
-              [previousLabel]="previousLabel()"
-              [nextLabel]="nextLabel()"
-              [todayActionLabel]="todayActionLabel()"
-              [clearActionLabel]="clearActionLabel()"
-              (valueChange)="onCalendarValue($event)"
-              (dateSelect)="onDateSelect()"
-              (done)="close(true)"
-            />
+            <div
+              class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 border-t border-border px-3 py-2.5"
+            >
+              <p class="flex items-stretch gap-2 text-sm" aria-live="polite">
+                <span class="flex flex-col leading-tight">
+                  <span class="text-[11px] font-medium uppercase text-ink-faint">{{ startLabel() }}</span>
+                  <span class="font-medium" [class.text-ink]="pendingStart()" [class.text-ink-faint]="!pendingStart()">
+                    {{ pendingStartText() }}
+                  </span>
+                </span>
+                <span class="self-end text-ink-faint" aria-hidden="true">–</span>
+                <span class="flex flex-col leading-tight">
+                  <span class="text-[11px] font-medium uppercase text-ink-faint">{{ endLabel() }}</span>
+                  <span class="font-medium" [class.text-ink]="pendingEnd()" [class.text-ink-faint]="!pendingEnd()">
+                    {{ pendingEndText() }}
+                  </span>
+                </span>
+              </p>
+              <div class="ml-auto flex items-center gap-2">
+                <button type="button" [class]="cancelBtn" (click)="close(true)">
+                  {{ cancelLabel() }}
+                </button>
+                <button type="button" [class]="applyBtn" [disabled]="!canApply()" (click)="apply()">
+                  {{ applyLabel() }}
+                </button>
+              </div>
+            </div>
           </div>
-        }
+        </div>
       </div>
     }
-
-    @if (hint() && !error()) {
-      <p class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
-    }
-    @if (error()) {
-      <p class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }, { kind: "component", type: SdsCalendar, selector: "sds-calendar", inputs: ["value", "min", "max", "firstDayOfWeek", "locale", "showActions", "showTime", "showDone", "timeLabel", "hoursLabel", "minutesLabel", "doneLabel", "calendarLabel", "previousLabel", "nextLabel", "todayActionLabel", "clearActionLabel"], outputs: ["valueChange", "dateSelect", "done"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }, { kind: "component", type: SdsRangeCalendar, selector: "sds-range-calendar", inputs: ["start", "end", "min", "max", "maxDays", "firstDayOfWeek", "locale", "months", "calendarLabel", "previousLabel", "nextLabel"], outputs: ["startChange", "endChange", "daySelect", "rangeSelect", "dayHover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsDatePicker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsDateRangePicker, decorators: [{
             type: Component,
             args: [{
-                    selector: 'sds-date-picker',
+                    selector: 'sds-date-range-picker',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SdsIcon, SdsCalendar],
-                    providers: [
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsDatePicker), multi: true },
-                    ],
+                    imports: [SdsIcon, SdsRangeCalendar],
                     host: {
                         class: 'block',
                         '(document:click)': 'onDocumentClick($event)',
@@ -9169,126 +10308,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     },
                     template: `
     @if (label()) {
-      <label [for]="fieldId" class="mb-1.5 block text-sm font-medium text-ink">
+      <label [id]="labelId" [for]="fieldId" class="mb-1.5 block text-sm font-medium text-ink">
         {{ label() }}
       </label>
     }
 
-    @if (inline()) {
-      <sds-calendar
-        [value]="value()"
-        [min]="min()"
-        [max]="max()"
-        [firstDayOfWeek]="firstDayOfWeek()"
-        [locale]="locale()"
-        [showActions]="showActions()"
-        [showTime]="showTime()"
-        [timeLabel]="timeLabel()"
-        [hoursLabel]="hoursLabel()"
-        [minutesLabel]="minutesLabel()"
-        [calendarLabel]="calendarLabel()"
-        [previousLabel]="previousLabel()"
-        [nextLabel]="nextLabel()"
-        [todayActionLabel]="todayActionLabel()"
-        [clearActionLabel]="clearActionLabel()"
-        (valueChange)="onCalendarValue($event)"
-      />
-    } @else {
-      <div class="relative">
-        <div
-          #trigger
-          class="relative flex items-center rounded-control border bg-surface transition-colors"
-          [class]="wrapperClasses()"
-          (click)="toggle()"
-        >
-          <input
-            [id]="fieldId"
-            type="text"
-            readonly
-            [value]="displayValue()"
-            [placeholder]="placeholder()"
-            [disabled]="isDisabled()"
-            [attr.aria-haspopup]="'dialog'"
-            [attr.aria-expanded]="open()"
-            [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
-            (keydown.enter)="onTriggerKeydown($event)"
-            (keydown.space)="onTriggerKeydown($event)"
-            (keydown.arrowdown)="onTriggerKeydown($event)"
-            class="w-full cursor-pointer bg-transparent pl-3.5 text-ink outline-none placeholder:text-ink-faint disabled:cursor-not-allowed"
-            [class.pr-20]="showClear()"
-            [class.pr-11]="!showClear()"
-          />
+    <button
+      #trigger
+      type="button"
+      [id]="fieldId"
+      [disabled]="disabled()"
+      aria-haspopup="dialog"
+      [attr.aria-expanded]="open()"
+      [attr.aria-labelledby]="label() ? labelId + ' ' + valueId : null"
+      [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() + ', ' + (displayValue() || placeholder()) : null"
+      [class]="triggerClasses()"
+      (click)="toggle($event)"
+      (keydown.arrowdown)="onTriggerArrowDown($event)"
+    >
+      <sds-icon name="calendar" [size]="17" class="shrink-0 text-ink-soft" />
+      <span
+        [id]="valueId"
+        class="min-w-0 flex-1 truncate"
+        [class.text-ink]="!!displayValue()"
+        [class.text-ink-faint]="!displayValue()"
+      >
+        {{ displayValue() || placeholder() }}
+      </span>
+      <span
+        class="inline-flex shrink-0 text-ink-faint transition-transform"
+        [class.rotate-180]="open()"
+        aria-hidden="true"
+      >
+        <sds-icon name="chevron-down" [size]="16" />
+      </span>
+    </button>
 
-          @if (showClear()) {
-            <button
-              type="button"
-              tabindex="-1"
-              [attr.aria-label]="clearLabel()"
-              class="absolute right-10 inline-flex h-6 w-6 items-center justify-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft"
-              (click)="clear($event)"
+    @if (open()) {
+      <!-- Relocated to document.body on open (appendTo body) to escape ancestor overflow/stacking;
+           positioned via positionPanel(). -->
+      <div
+        class="fixed z-[1000] max-w-[calc(100vw-1rem)] overflow-auto rounded-card border border-border bg-surface shadow-lg"
+        style="max-height: calc(100vh - 1rem)"
+        role="dialog"
+        aria-modal="false"
+        [attr.aria-label]="panelLabel()"
+        (keydown.escape)="onEscape($event)"
+        (keydown)="onPanelKeydown($event)"
+      >
+        <div class="flex flex-col sm:flex-row">
+          @if (presets().length) {
+            <div
+              class="border-b border-border p-2 sm:w-44 sm:shrink-0 sm:border-b-0 sm:border-r"
+              role="group"
+              [attr.aria-label]="presetsLabel()"
             >
-              <sds-icon name="x" [size]="15" />
-            </button>
+              <p class="px-2 pb-1.5 pt-1 text-[11px] font-semibold uppercase tracking-wide text-ink-faint">
+                {{ presetsLabel() }}
+              </p>
+              <div class="flex flex-wrap gap-1 sm:flex-col sm:flex-nowrap">
+                @for (p of presets(); track p.id) {
+                  <button
+                    type="button"
+                    [attr.aria-pressed]="p.id === pendingPresetId()"
+                    [class]="presetClass(p.id === pendingPresetId())"
+                    (click)="choosePreset(p)"
+                  >
+                    {{ p.label }}
+                  </button>
+                }
+              </div>
+            </div>
           }
 
-          <button
-            type="button"
-            tabindex="-1"
-            [attr.aria-label]="open() ? closeCalendarLabel() : openCalendarLabel()"
-            class="absolute right-2 inline-flex h-7 w-7 items-center justify-center rounded-control text-ink-soft hover:bg-muted"
-            (click)="toggle($event)"
-          >
-            <sds-icon name="calendar" [size]="18" />
-          </button>
-        </div>
+          <div class="flex min-w-0 flex-col">
+            <div class="p-3">
+              <sds-range-calendar
+                [(start)]="pendingStart"
+                [(end)]="pendingEnd"
+                [min]="min()"
+                [max]="max()"
+                [maxDays]="maxDays()"
+                [firstDayOfWeek]="firstDayOfWeek()"
+                [locale]="locale()"
+                [months]="months()"
+                [calendarLabel]="calendarLabel()"
+                [previousLabel]="previousLabel()"
+                [nextLabel]="nextLabel()"
+              />
+            </div>
 
-        @if (open()) {
-          <!-- Relocated to document.body on open (appendTo body) to escape
-               ancestor overflow/stacking; positioned via positionPanel(). -->
-          <div
-            class="fixed z-[1000]"
-            role="dialog"
-            aria-modal="false"
-            [attr.aria-label]="panelLabel()"
-            (keydown.escape)="onEscape($event)"
-            (keydown)="onPanelKeydown($event)"
-          >
-            <sds-calendar
-              [value]="value()"
-              [min]="min()"
-              [max]="max()"
-              [firstDayOfWeek]="firstDayOfWeek()"
-              [locale]="locale()"
-              [showActions]="showActions()"
-              [showTime]="showTime()"
-              [showDone]="showTime()"
-              [timeLabel]="timeLabel()"
-              [hoursLabel]="hoursLabel()"
-              [minutesLabel]="minutesLabel()"
-              [doneLabel]="doneLabel()"
-              [calendarLabel]="calendarLabel()"
-              [previousLabel]="previousLabel()"
-              [nextLabel]="nextLabel()"
-              [todayActionLabel]="todayActionLabel()"
-              [clearActionLabel]="clearActionLabel()"
-              (valueChange)="onCalendarValue($event)"
-              (dateSelect)="onDateSelect()"
-              (done)="close(true)"
-            />
+            <div
+              class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 border-t border-border px-3 py-2.5"
+            >
+              <p class="flex items-stretch gap-2 text-sm" aria-live="polite">
+                <span class="flex flex-col leading-tight">
+                  <span class="text-[11px] font-medium uppercase text-ink-faint">{{ startLabel() }}</span>
+                  <span class="font-medium" [class.text-ink]="pendingStart()" [class.text-ink-faint]="!pendingStart()">
+                    {{ pendingStartText() }}
+                  </span>
+                </span>
+                <span class="self-end text-ink-faint" aria-hidden="true">–</span>
+                <span class="flex flex-col leading-tight">
+                  <span class="text-[11px] font-medium uppercase text-ink-faint">{{ endLabel() }}</span>
+                  <span class="font-medium" [class.text-ink]="pendingEnd()" [class.text-ink-faint]="!pendingEnd()">
+                    {{ pendingEndText() }}
+                  </span>
+                </span>
+              </p>
+              <div class="ml-auto flex items-center gap-2">
+                <button type="button" [class]="cancelBtn" (click)="close(true)">
+                  {{ cancelLabel() }}
+                </button>
+                <button type="button" [class]="applyBtn" [disabled]="!canApply()" (click)="apply()">
+                  {{ applyLabel() }}
+                </button>
+              </div>
+            </div>
           </div>
-        }
+        </div>
       </div>
     }
-
-    @if (hint() && !error()) {
-      <p class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
-    }
-    @if (error()) {
-      <p class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
-    }
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], doneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], openCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openCalendarLabel", required: false }] }], closeCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeCalendarLabel", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], todayActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayActionLabel", required: false }] }], clearActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearActionLabel", required: false }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsCalendar), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], maxDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDays", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], presetsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetsLabel", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], endLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabel", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], presetSelect: [{ type: i0.Output, args: ["presetSelect"] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsRangeCalendar), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 let nextId$8 = 0;
 
 /**
@@ -18885,12 +20028,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { env: [{ type: i0.Input, args: [{ isSignal: true, alias: "env", required: false }] }], devSrLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "devSrLabel", required: false }] }], testSrLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "testSrLabel", required: false }] }] } });
 
+/** English defaults of {@link SdsChartLabels}. Spread it to override a few keys. */
+const SDS_CHART_LABELS_EN = {
+    legend: 'Legend',
+    showTable: 'Table',
+    showChart: 'Chart',
+    empty: 'No data to display',
+    noData: 'No data',
+    chartRole: 'chart',
+    heatmapRole: 'heatmap',
+    lineChart: 'Line chart',
+    barChart: 'Bar chart',
+    donutChart: 'Donut chart',
+    scatterChart: 'Scatter plot',
+    heatmap: 'Heatmap',
+    treemap: 'Treemap',
+    breadcrumb: 'Breadcrumb',
+    trend: 'Trend',
+    category: 'Category',
+    date: 'Date',
+    value: 'Value',
+    share: 'Share',
+    item: 'Item',
+    group: 'Group',
+    size: 'Size',
+    total: 'Total',
+    other: 'Other',
+    all: 'All',
+    shareOfTotal: 'Share of total',
+    shareOf: (parent) => `Share of ${parent}`,
+    labelValue: (label, value) => `${label}: ${value}`,
+    sliceCount: (n) => `${n} ${n === 1 ? 'slice' : 'slices'}`,
+    totalOf: (value) => `total ${value}`,
+    gridSize: (rows, columns) => `${rows} ${rows === 1 ? 'row' : 'rows'} × ${columns} ${columns === 1 ? 'column' : 'columns'}`,
+    itemCount: (n) => `${n} ${n === 1 ? 'item' : 'items'}`,
+    zoomedTo: (path) => `zoomed to ${path}`,
+    versus: (y, x) => `${y} vs ${x}`,
+    sparklineSummary: (s) => `${s.label || 'Trend'}: from ${s.first} to ${s.last} — min ${s.min}, max ${s.max}, ${s.count} ${s.count === 1 ? 'point' : 'points'}`,
+    kpiChange: ({ direction, delta, period, good }) => {
+        const p = period ? ` ${period}` : '';
+        if (direction === 'flat')
+            return `unchanged${p}`;
+        const verdict = good === null ? '' : good ? ', favourable' : ', unfavourable';
+        return `${direction === 'up' ? 'up' : 'down'} ${delta}${p}${verdict}`;
+    },
+};
 const SDS_CHART_CONFIG = new InjectionToken('SDS_CHART_CONFIG');
 /**
  * App-wide chart defaults.
  *
  * @example
- * providers: [provideSdsCharts({ locale: () => translate.currentLang() })]
+ * providers: [
+ *   provideSdsCharts({
+ *     locale: () => translate.currentLang(),
+ *     labels: () => (translate.currentLang() === 'fr' ? CHART_LABELS_FR : {}),
+ *   }),
+ * ]
  */
 function provideSdsCharts(config) {
     return { provide: SDS_CHART_CONFIG, useValue: config };
@@ -19040,7 +20233,7 @@ const INK_HI = 'var(--sds-chart-ink-hi, #ffffff)';
 // ---------------------------------------------------------------------------------------------------
 // Locale & formatting
 // ---------------------------------------------------------------------------------------------------
-/** Resolve the chart locale: explicit input → provideSdsCharts() → Angular LOCALE_ID. */
+/** Resolve the chart locale: explicit input → provideSdsCharts() → Angular LOCALE_ID → en-GB. */
 function chartLocale(explicit) {
     const config = inject(SDS_CHART_CONFIG, { optional: true });
     const ngLocale = inject(LOCALE_ID);
@@ -19050,7 +20243,19 @@ function chartLocale(explicit) {
             return own;
         const cfg = config?.locale;
         const resolved = typeof cfg === 'function' ? cfg() : cfg;
-        return resolved || ngLocale || 'fr-FR';
+        return resolved || ngLocale || 'en-GB';
+    });
+}
+/**
+ * The chart strings: provideSdsCharts({ labels }) merged over the English defaults. The function
+ * form is called inside the computed, so labels returned from a signal switch language live.
+ */
+function chartLabels() {
+    const config = inject(SDS_CHART_CONFIG, { optional: true });
+    return computed(() => {
+        const own = config?.labels;
+        const resolved = typeof own === 'function' ? own() : own;
+        return resolved ? { ...SDS_CHART_LABELS_EN, ...resolved } : SDS_CHART_LABELS_EN;
     });
 }
 function chartAnimates(explicit) {
@@ -19512,18 +20717,18 @@ class SdsChartFrame {
     subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     legend = input('top', ...(ngDevMode ? [{ debugName: "legend" }] : []));
-    legendLabel = input('Légende', ...(ngDevMode ? [{ debugName: "legendLabel" }] : []));
     hidden = input([], ...(ngDevMode ? [{ debugName: "hidden" }] : []));
     interactive = input(true, ...(ngDevMode ? [{ debugName: "interactive", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     empty = input(false, ...(ngDevMode ? [{ debugName: "empty", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    emptyText = input('Aucune donnée à afficher', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
+    /** Empty-state text; '' falls back to the configured labels. */
+    emptyText = input(null, ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
     height = input(300, ...(ngDevMode ? [{ debugName: "height" }] : []));
     table = input({ columns: [], rows: [] }, ...(ngDevMode ? [{ debugName: "table" }] : []));
     tableCaption = input('', ...(ngDevMode ? [{ debugName: "tableCaption" }] : []));
     tableToggle = input(false, ...(ngDevMode ? [{ debugName: "tableToggle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    tableLabel = input('Tableau', ...(ngDevMode ? [{ debugName: "tableLabel" }] : []));
-    chartLabel = input('Graphique', ...(ngDevMode ? [{ debugName: "chartLabel" }] : []));
+    /** Built-in strings (provideSdsCharts labels over the English defaults). */
+    text = chartLabels();
     toggle = output();
     focusKey = output();
     showTable = signal(false, ...(ngDevMode ? [{ debugName: "showTable" }] : []));
@@ -19540,7 +20745,7 @@ class SdsChartFrame {
         this.toggle.emit(key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsChartFrame, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsChartFrame, isStandalone: true, selector: "sds-chart-frame", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, legendLabel: { classPropertyName: "legendLabel", publicName: "legendLabel", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, tableCaption: { classPropertyName: "tableCaption", publicName: "tableCaption", isSignal: true, isRequired: false, transformFunction: null }, tableToggle: { classPropertyName: "tableToggle", publicName: "tableToggle", isSignal: true, isRequired: false, transformFunction: null }, tableLabel: { classPropertyName: "tableLabel", publicName: "tableLabel", isSignal: true, isRequired: false, transformFunction: null }, chartLabel: { classPropertyName: "chartLabel", publicName: "chartLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle", focusKey: "focusKey" }, host: { classAttribute: "block @container" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsChartFrame, isStandalone: true, selector: "sds-chart-frame", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: false, transformFunction: null }, tableCaption: { classPropertyName: "tableCaption", publicName: "tableCaption", isSignal: true, isRequired: false, transformFunction: null }, tableToggle: { classPropertyName: "tableToggle", publicName: "tableToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle", focusKey: "focusKey" }, host: { classAttribute: "block @container" }, ngImport: i0, template: `
     <figure class="m-0 flex flex-col gap-3" [attr.aria-busy]="loading() || null">
       @if (heading() || subtitle() || tableToggle()) {
         <figcaption class="flex items-start justify-between gap-3">
@@ -19559,7 +20764,7 @@ class SdsChartFrame {
               (click)="showTable.set(!showTable())"
             >
               <sds-icon [name]="showTable() ? 'chart-column' : 'table'" [size]="14" />
-              {{ showTable() ? chartLabel() : tableLabel() }}
+              {{ showTable() ? text().showChart : text().showTable }}
             </button>
           }
         </figcaption>
@@ -19577,7 +20782,7 @@ class SdsChartFrame {
             >
               <div class="flex flex-col items-center gap-2 px-4 text-ink-faint">
                 <sds-icon name="bar-chart-3" [size]="22" />
-                <p class="text-sm">{{ emptyText() }}</p>
+                <p class="text-sm">{{ emptyText() || text().empty }}</p>
               </div>
             </div>
           } @else if (showTable()) {
@@ -19608,7 +20813,7 @@ class SdsChartFrame {
         class="flex flex-wrap gap-x-4 gap-y-1.5"
         [class.@lg:flex-col]="legend() === 'right'"
         [class.@lg:min-w-44]="legend() === 'right'"
-        [attr.aria-label]="legendLabel()"
+        [attr.aria-label]="text().legend"
       >
         @for (item of items(); track item.key) {
           <li>
@@ -19723,7 +20928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               (click)="showTable.set(!showTable())"
             >
               <sds-icon [name]="showTable() ? 'chart-column' : 'table'" [size]="14" />
-              {{ showTable() ? chartLabel() : tableLabel() }}
+              {{ showTable() ? text().showChart : text().showTable }}
             </button>
           }
         </figcaption>
@@ -19741,7 +20946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             >
               <div class="flex flex-col items-center gap-2 px-4 text-ink-faint">
                 <sds-icon name="bar-chart-3" [size]="22" />
-                <p class="text-sm">{{ emptyText() }}</p>
+                <p class="text-sm">{{ emptyText() || text().empty }}</p>
               </div>
             </div>
           } @else if (showTable()) {
@@ -19772,7 +20977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         class="flex flex-wrap gap-x-4 gap-y-1.5"
         [class.@lg:flex-col]="legend() === 'right'"
         [class.@lg:min-w-44]="legend() === 'right'"
-        [attr.aria-label]="legendLabel()"
+        [attr.aria-label]="text().legend"
       >
         @for (item of items(); track item.key) {
           <li>
@@ -19865,7 +21070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       </table>
     </ng-template>
   `, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
-        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], legendLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendLabel", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: false }] }], tableCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableCaption", required: false }] }], tableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableToggle", required: false }] }], tableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableLabel", required: false }] }], chartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartLabel", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], focusKey: [{ type: i0.Output, args: ["focusKey"] }] } });
+        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: false }] }], tableCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableCaption", required: false }] }], tableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableToggle", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], focusKey: [{ type: i0.Output, args: ["focusKey"] }] } });
 /** The floating tooltip: default rows, or the consumer's `sdsChartTooltip` template. */
 class SdsChartTooltipBox {
     ctx = input(null, ...(ngDevMode ? [{ debugName: "ctx" }] : []));
@@ -20223,7 +21428,8 @@ class SdsLineChart {
     animate = input(true, ...(ngDevMode ? [{ debugName: "animate", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Hold the current render at reduced opacity while new data loads (no skeleton flash). */
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    emptyText = input('Aucune donnée à afficher', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
+    /** Empty-state text. Default (`null`): the configured `labels.empty` ("No data to display"). */
+    emptyText = input(null, ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
     /** Show a button that swaps the plot for its data table. */
     tableToggle = input(false, ...(ngDevMode ? [{ debugName: "tableToggle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -20245,6 +21451,8 @@ class SdsLineChart {
     pointerY = signal(0, ...(ngDevMode ? [{ debugName: "pointerY" }] : []));
     width = hostWidth();
     loc = chartLocale(() => this.locale());
+    /** Built-in strings (provideSdsCharts labels over the English defaults). */
+    text = chartLabels();
     animates = chartAnimates(() => this.animate());
     palette = chartPalette();
     stacked = computed(() => this.stack() !== 'none', ...(ngDevMode ? [{ debugName: "stacked" }] : []));
@@ -20700,7 +21908,7 @@ class SdsLineChart {
             return { key: s.key, label: s.label, value, raw, color: s.color, shape: 'line' };
         });
         const fmt = this.valueFormat();
-        const footer = this.stacked() && vis.length > 1 ? `Total · ${valueFormatter(this.loc(), fmt)(total)}` : undefined;
+        const footer = this.stacked() && vis.length > 1 ? `${this.text().total} · ${valueFormatter(this.loc(), fmt)(total)}` : undefined;
         return { title: this.fmtX()(p.x), rows, footer, data: [p.row], index: p.index };
     }, ...(ngDevMode ? [{ debugName: "tooltipCtx" }] : []));
     liveText = computed(() => {
@@ -20709,7 +21917,7 @@ class SdsLineChart {
         const c = this.tooltipCtx();
         if (!c)
             return '';
-        return `${c.title} — ${c.rows.map((r) => `${r.label} : ${r.value}`).join(', ')}${c.footer ? `, ${c.footer}` : ''}`;
+        return `${c.title} — ${c.rows.map((r) => this.text().labelValue(r.label, r.value)).join(', ')}${c.footer ? `, ${c.footer}` : ''}`;
     }, ...(ngDevMode ? [{ debugName: "liveText" }] : []));
     onPointer(event) {
         const L = this.layout();
@@ -20832,7 +22040,7 @@ class SdsLineChart {
         if (this.ariaLabel())
             return this.ariaLabel();
         const names = this.allSeries().map((s) => s.label).join(', ');
-        return [this.heading() || 'Graphique linéaire', names].filter(Boolean).join(' — ');
+        return [this.heading() || this.text().lineChart, names].filter(Boolean).join(' — ');
     }, ...(ngDevMode ? [{ debugName: "label" }] : []));
     table = computed(() => {
         const { pts } = this.model();
@@ -20840,7 +22048,7 @@ class SdsLineChart {
         const values = this.values();
         const fx = this.fmtX();
         return {
-            columns: [this.xLabel() || (this.model().kind === 'time' ? 'Date' : 'Catégorie'), ...vis.map((s) => s.label)],
+            columns: [this.xLabel() || (this.model().kind === 'time' ? this.text().date : this.text().category), ...vis.map((s) => s.label)],
             rows: pts.map((p, i) => [
                 fx(p.x),
                 ...vis.map((s) => {
@@ -20873,7 +22081,7 @@ class SdsLineChart {
         [style.height.px]="height()"
         tabindex="0"
         role="group"
-        aria-roledescription="graphique"
+        [attr.aria-roledescription]="text().chartRole"
         [attr.aria-label]="label()"
         (keydown)="onKey($event)"
         (blur)="onBlur()"
@@ -20995,7 +22203,7 @@ class SdsLineChart {
         <div class="sr-only" aria-live="polite" aria-atomic="true">{{ liveText() }}</div>
       </div>
     </sds-chart-frame>
-  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "legendLabel", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle", "tableLabel", "chartLabel"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartAxes, selector: "g[sdsChartAxes]", inputs: ["plot", "xTicks", "yTicks", "grid", "baselineY", "baselineX", "xTitle", "yTitle", "width"] }, { kind: "component", type: SdsChartAnnotations, selector: "g[sdsChartAnnotations]", inputs: ["items", "layer"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartAxes, selector: "g[sdsChartAxes]", inputs: ["plot", "xTicks", "yTicks", "grid", "baselineY", "baselineX", "xTitle", "yTitle", "width"] }, { kind: "component", type: SdsChartAnnotations, selector: "g[sdsChartAnnotations]", inputs: ["items", "layer"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsLineChart, decorators: [{
             type: Component,
@@ -21021,7 +22229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [style.height.px]="height()"
         tabindex="0"
         role="group"
-        aria-roledescription="graphique"
+        [attr.aria-roledescription]="text().chartRole"
         [attr.aria-label]="label()"
         (keydown)="onKey($event)"
         (blur)="onBlur()"
@@ -21206,7 +22414,8 @@ class SdsBarChart {
     tooltip = input(true, ...(ngDevMode ? [{ debugName: "tooltip", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     animate = input(true, ...(ngDevMode ? [{ debugName: "animate", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    emptyText = input('Aucune donnée à afficher', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
+    /** Empty-state text. Default (`null`): the configured `labels.empty` ("No data to display"). */
+    emptyText = input(null, ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
     tableToggle = input(false, ...(ngDevMode ? [{ debugName: "tableToggle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     hidden = model([], ...(ngDevMode ? [{ debugName: "hidden" }] : []));
@@ -21225,6 +22434,8 @@ class SdsBarChart {
     pointer = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "pointer" }] : []));
     width = hostWidth();
     loc = chartLocale(() => this.locale());
+    /** Built-in strings (provideSdsCharts labels over the English defaults). */
+    text = chartLabels();
     animates = chartAnimates(() => this.animate());
     palette = chartPalette();
     horizontal = computed(() => this.orientation() === 'horizontal', ...(ngDevMode ? [{ debugName: "horizontal" }] : []));
@@ -21781,14 +22992,14 @@ class SdsBarChart {
             const m = this.meta().get(`${s.key}|${c.key}`);
             return { key: s.key, label: s.label, value, raw, color: m?.color ?? s.color, shape: s.line ? 'line' : 'rect' };
         });
-        const footer = this.stacked() && bars.length > 1 ? `Total · ${valueFormatter(this.loc(), this.valueFormat())(total)}` : undefined;
+        const footer = this.stacked() && bars.length > 1 ? `${this.text().total} · ${valueFormatter(this.loc(), this.valueFormat())(total)}` : undefined;
         return { title: this.fmtCat()(c.x), rows, footer, data: [c.row], index: c.index };
     }, ...(ngDevMode ? [{ debugName: "tooltipCtx" }] : []));
     liveText = computed(() => {
         if (!this.keyboard())
             return '';
         const c = this.tooltipCtx();
-        return c ? `${c.title} — ${c.rows.map((r) => `${r.label} : ${r.value}`).join(', ')}${c.footer ? `, ${c.footer}` : ''}` : '';
+        return c ? `${c.title} — ${c.rows.map((r) => this.text().labelValue(r.label, r.value)).join(', ')}${c.footer ? `, ${c.footer}` : ''}` : '';
     }, ...(ngDevMode ? [{ debugName: "liveText" }] : []));
     local(event) {
         const L = this.layout();
@@ -21887,7 +23098,7 @@ class SdsBarChart {
         if (this.ariaLabel())
             return this.ariaLabel();
         const names = this.allSeries().map((s) => s.label).join(', ');
-        return [this.heading() || 'Graphique en barres', names].filter(Boolean).join(' — ');
+        return [this.heading() || this.text().barChart, names].filter(Boolean).join(' — ');
     }, ...(ngDevMode ? [{ debugName: "label" }] : []));
     table = computed(() => {
         const { cats } = this.raw();
@@ -21895,7 +23106,7 @@ class SdsBarChart {
         const values = this.rawValues();
         const fc = this.fmtCat();
         return {
-            columns: [this.xLabel() || 'Catégorie', ...vis.map((s) => s.label)],
+            columns: [this.xLabel() || this.text().category, ...vis.map((s) => s.label)],
             rows: this.order().map((i) => [
                 fc(cats[i].x),
                 ...vis.map((s) => {
@@ -21928,7 +23139,7 @@ class SdsBarChart {
         [style.height.px]="resolvedHeight()"
         tabindex="0"
         role="group"
-        aria-roledescription="graphique"
+        [attr.aria-roledescription]="text().chartRole"
         [attr.aria-label]="label()"
         (keydown)="onKey($event)"
         (blur)="onBlur()"
@@ -22008,7 +23219,7 @@ class SdsBarChart {
         <div class="sr-only" aria-live="polite" aria-atomic="true">{{ liveText() }}</div>
       </div>
     </sds-chart-frame>
-  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "legendLabel", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle", "tableLabel", "chartLabel"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartAxes, selector: "g[sdsChartAxes]", inputs: ["plot", "xTicks", "yTicks", "grid", "baselineY", "baselineX", "xTitle", "yTitle", "width"] }, { kind: "component", type: SdsChartAnnotations, selector: "g[sdsChartAnnotations]", inputs: ["items", "layer"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartAxes, selector: "g[sdsChartAxes]", inputs: ["plot", "xTicks", "yTicks", "grid", "baselineY", "baselineX", "xTitle", "yTitle", "width"] }, { kind: "component", type: SdsChartAnnotations, selector: "g[sdsChartAnnotations]", inputs: ["items", "layer"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsBarChart, decorators: [{
             type: Component,
@@ -22034,7 +23245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [style.height.px]="resolvedHeight()"
         tabindex="0"
         role="group"
-        aria-roledescription="graphique"
+        [attr.aria-roledescription]="text().chartRole"
         [attr.aria-label]="label()"
         (keydown)="onKey($event)"
         (blur)="onBlur()"
@@ -22179,13 +23390,16 @@ class SdsScatterChart {
     sizeFormat = input(null, ...(ngDevMode ? [{ debugName: "sizeFormat" }] : []));
     xLabel = input('', ...(ngDevMode ? [{ debugName: "xLabel" }] : []));
     yLabel = input('', ...(ngDevMode ? [{ debugName: "yLabel" }] : []));
-    sizeLabel = input('Taille', ...(ngDevMode ? [{ debugName: "sizeLabel" }] : []));
+    /** Name of the bubble size (tooltip, table). Default (`null`): the configured `labels.size`. */
+    sizeLabel = input(null, ...(ngDevMode ? [{ debugName: "sizeLabel" }] : []));
+    sizeName = computed(() => this.sizeLabel() ?? this.text().size, ...(ngDevMode ? [{ debugName: "sizeName" }] : []));
     locale = input(null, ...(ngDevMode ? [{ debugName: "locale" }] : []));
     // --- Behaviour --------------------------------------------------------------------------------
     tooltip = input(true, ...(ngDevMode ? [{ debugName: "tooltip", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     animate = input(true, ...(ngDevMode ? [{ debugName: "animate", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    emptyText = input('Aucune donnée à afficher', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
+    /** Empty-state text. Default (`null`): the configured `labels.empty` ("No data to display"). */
+    emptyText = input(null, ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
     tableToggle = input(false, ...(ngDevMode ? [{ debugName: "tableToggle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     /** Hidden group names (two-way bindable; the legend toggles them). */
@@ -22204,6 +23418,8 @@ class SdsScatterChart {
     }
     width = hostWidth();
     loc = chartLocale(() => this.locale());
+    /** Built-in strings (provideSdsCharts labels over the English defaults). */
+    text = chartLabels();
     animates = chartAnimates(() => this.animate());
     palette = chartPalette();
     bubbles = computed(() => this.size() !== null, ...(ngDevMode ? [{ debugName: "bubbles" }] : []));
@@ -22492,7 +23708,7 @@ class SdsScatterChart {
             { key: 'y', label: this.yLabel() || 'y', value: this.fmtY()(p.y), raw: p.y, color, shape: 'dot' },
         ];
         if (this.bubbles() && p.size !== null)
-            rows.push({ key: 'size', label: this.sizeLabel(), value: this.fmtSize()(p.size), raw: p.size, color, shape: 'dot' });
+            rows.push({ key: 'size', label: this.sizeName(), value: this.fmtSize()(p.size), raw: p.size, color, shape: 'dot' });
         const title = [p.label, p.group].filter(Boolean).join(' · ');
         return { title, rows, data: [p.row], index: p.index };
     }, ...(ngDevMode ? [{ debugName: "tooltipCtx" }] : []));
@@ -22500,7 +23716,7 @@ class SdsScatterChart {
         if (!this.keyboard())
             return '';
         const c = this.tooltipCtx();
-        return c ? `${c.title} — ${c.rows.map((r) => `${r.label} : ${r.value}`).join(', ')}` : '';
+        return c ? `${c.title} — ${c.rows.map((r) => this.text().labelValue(r.label, r.value)).join(', ')}` : '';
     }, ...(ngDevMode ? [{ debugName: "liveText" }] : []));
     onPointer(event) {
         const L = this.layout();
@@ -22591,8 +23807,10 @@ class SdsScatterChart {
     label = computed(() => {
         if (this.ariaLabel())
             return this.ariaLabel();
-        const axes = [this.yLabel(), this.xLabel()].filter(Boolean).join(' selon ');
-        return [this.heading() || 'Nuage de points', axes].filter(Boolean).join(' — ');
+        const y = this.yLabel();
+        const x = this.xLabel();
+        const axes = y && x ? this.text().versus(y, x) : y || x;
+        return [this.heading() || this.text().scatterChart, axes].filter(Boolean).join(' — ');
     }, ...(ngDevMode ? [{ debugName: "label" }] : []));
     table = computed(() => {
         const hasLabel = this.pointLabel() !== null;
@@ -22602,10 +23820,10 @@ class SdsScatterChart {
         const fs = this.fmtSize();
         const columns = [
             hasLabel ? '' : '#',
-            ...(hasGroup ? ['Groupe'] : []),
+            ...(hasGroup ? [this.text().group] : []),
             this.xLabel() || 'x',
             this.yLabel() || 'y',
-            ...(this.bubbles() ? [this.sizeLabel()] : []),
+            ...(this.bubbles() ? [this.sizeName()] : []),
         ];
         return {
             columns,
@@ -22641,7 +23859,7 @@ class SdsScatterChart {
         [style.height.px]="height()"
         tabindex="0"
         role="group"
-        aria-roledescription="graphique"
+        [attr.aria-roledescription]="text().chartRole"
         [attr.aria-label]="label()"
         (keydown)="onKey($event)"
         (blur)="onBlur()"
@@ -22736,7 +23954,7 @@ class SdsScatterChart {
         <div class="sr-only" aria-live="polite" aria-atomic="true">{{ liveText() }}</div>
       </div>
     </sds-chart-frame>
-  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "legendLabel", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle", "tableLabel", "chartLabel"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartAxes, selector: "g[sdsChartAxes]", inputs: ["plot", "xTicks", "yTicks", "grid", "baselineY", "baselineX", "xTitle", "yTitle", "width"] }, { kind: "component", type: SdsChartAnnotations, selector: "g[sdsChartAnnotations]", inputs: ["items", "layer"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartAxes, selector: "g[sdsChartAxes]", inputs: ["plot", "xTicks", "yTicks", "grid", "baselineY", "baselineX", "xTitle", "yTitle", "width"] }, { kind: "component", type: SdsChartAnnotations, selector: "g[sdsChartAnnotations]", inputs: ["items", "layer"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsScatterChart, decorators: [{
             type: Component,
@@ -22762,7 +23980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [style.height.px]="height()"
         tabindex="0"
         role="group"
-        aria-roledescription="graphique"
+        [attr.aria-roledescription]="text().chartRole"
         [attr.aria-label]="label()"
         (keydown)="onKey($event)"
         (blur)="onBlur()"
@@ -22860,11 +24078,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: true }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], pointLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointLabel", required: false }] }], groupOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupOrder", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], maxRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRadius", required: false }] }], trendline: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendline", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], annotations: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotations", required: false }] }], xScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "xScale", required: false }] }], yScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "yScale", required: false }] }], xMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "xMin", required: false }] }], xMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "xMax", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }], yMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMax", required: false }] }], includeZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeZero", required: false }] }], xFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormat", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], sizeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeFormat", required: false }] }], xLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabel", required: false }] }], yLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "yLabel", required: false }] }], sizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeLabel", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], tableToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableToggle", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }, { type: i0.Output, args: ["hiddenChange"] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], customTooltip: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsChartTooltip), { isSignal: true }] }] } });
 
-/** Key of the folded "Autres" slice — in `hidden` and in `pointClick.key`. */
+/** Key of the folded "Other" slice — in `hidden` and in `pointClick.key`. */
 const SDS_DONUT_OTHER_KEY = '__sds_other__';
 const OTHER_KEY = SDS_DONUT_OTHER_KEY;
 /**
- * Donut, pie and half-donut for part-to-whole at a glance. Small tails fold into "Autres" past
+ * Donut, pie and half-donut for part-to-whole at a glance. Small tails fold into "Other" past
  * `maxSlices` (a pie stops reading beyond ~6 parts), the legend doubles as direct labels with each
  * share, the centre states the total and swaps to the hovered slice, slices separate with a
  * constant 2 px gap, and the whole thing is keyboard-navigable with a data-table twin. Colour follows
@@ -22890,16 +24108,21 @@ class SdsDonutChart {
     height = input(240, ...(ngDevMode ? [{ debugName: "height", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     /** Ring thickness in px. Defaults to ~26 % of the radius. */
     thickness = input(null, ...(ngDevMode ? [{ debugName: "thickness", transform: numberOrNull }] : [{ transform: numberOrNull }]));
-    /** Beyond this many slices the smallest fold into one "Autres" slice. */
+    /** Beyond this many slices the smallest fold into one "Other" slice. */
     maxSlices = input(6, ...(ngDevMode ? [{ debugName: "maxSlices", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-    otherLabel = input('Autres', ...(ngDevMode ? [{ debugName: "otherLabel" }] : []));
+    /** Name of the folded tail slice. Default (`null`): the configured `labels.other` ("Other"). */
+    otherLabel = input(null, ...(ngDevMode ? [{ debugName: "otherLabel" }] : []));
     /** `desc` (default) orders slices largest first; `none` keeps the data order. */
     sort = input('desc', ...(ngDevMode ? [{ debugName: "sort" }] : []));
     /** `auto` = right of the ring (below it on narrow containers). */
     legend = input('auto', ...(ngDevMode ? [{ debugName: "legend" }] : []));
     legendValue = input('percent', ...(ngDevMode ? [{ debugName: "legendValue" }] : []));
-    /** Headline in the hole. `null` hides it; default "Total". */
-    centerLabel = input('Total', ...(ngDevMode ? [{ debugName: "centerLabel" }] : []));
+    /**
+     * Headline in the hole. Default (`null`): the configured `labels.total` ("Total"). An empty string
+     * `''` hides the centre readout entirely (label and figure — what `null` did before 0.0.67), and the
+     * hover tooltip takes over.
+     */
+    centerLabel = input(null, ...(ngDevMode ? [{ debugName: "centerLabel" }] : []));
     /** Override the centre figure (e.g. "72 %" for a completion donut). */
     centerValue = input(null, ...(ngDevMode ? [{ debugName: "centerValue" }] : []));
     valueFormat = input(null, ...(ngDevMode ? [{ debugName: "valueFormat" }] : []));
@@ -22907,10 +24130,11 @@ class SdsDonutChart {
     tooltip = input(true, ...(ngDevMode ? [{ debugName: "tooltip", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     animate = input(true, ...(ngDevMode ? [{ debugName: "animate", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    emptyText = input('Aucune donnée à afficher', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
+    /** Empty-state text. Default (`null`): the configured `labels.empty` ("No data to display"). */
+    emptyText = input(null, ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
     tableToggle = input(false, ...(ngDevMode ? [{ debugName: "tableToggle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
-    /** Hidden slice keys (category names, or the "Autres" slice). Two-way bindable. */
+    /** Hidden slice keys (category names, or the "Other" slice). Two-way bindable. */
     hidden = model([], ...(ngDevMode ? [{ debugName: "hidden" }] : []));
     pointClick = output();
     customTooltip = contentChild(SdsChartTooltip, ...(ngDevMode ? [{ debugName: "customTooltip" }] : []));
@@ -22926,11 +24150,13 @@ class SdsDonutChart {
     pointer = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "pointer" }] : []));
     width = hostWidth();
     loc = chartLocale(() => this.locale());
+    /** Built-in strings (provideSdsCharts labels over the English defaults). */
+    text = chartLabels();
     animates = chartAnimates(() => this.animate());
     palette = chartPalette();
     fmt = computed(() => valueFormatter(this.loc(), this.valueFormat()), ...(ngDevMode ? [{ debugName: "fmt" }] : []));
     pct = computed(() => valueFormatter(this.loc(), PERCENT_VALUE), ...(ngDevMode ? [{ debugName: "pct" }] : []));
-    /** Slices after grouping, sorting and folding the tail into "Autres". */
+    /** Slices after grouping, sorting and folding the tail into "Other". */
     slices = computed(() => {
         const data = this.data() ?? [];
         const cAcc = this.category();
@@ -22954,7 +24180,7 @@ class SdsDonutChart {
         let list = [...byKey.values()].filter((s) => s.value > 0);
         const assign = (kept) => {
             // Slot = position among the slices actually drawn, in DATA order (never by size) — so a slice
-            // that appears 9th in the data still gets a hue, distinct from the gray "Autres".
+            // that appears 9th in the data still gets a hue, distinct from the gray "Other".
             let slot = 0;
             for (const s of [...kept].sort((a, b) => a.index - b.index))
                 if (!s.color)
@@ -22974,7 +24200,7 @@ class SdsDonutChart {
             assign(list);
             list.push({
                 key: OTHER_KEY,
-                label: `${this.otherLabel()} (${tail.length})`,
+                label: `${this.otherLabel() ?? this.text().other} (${tail.length})`,
                 value: tail.reduce((sum, s) => sum + s.value, 0),
                 color: 'var(--color-ink-faint)',
                 rows: tail.flatMap((s) => s.rows),
@@ -22996,7 +24222,7 @@ class SdsDonutChart {
         return Math.max(120, Math.min(this.height(), w));
     }, ...(ngDevMode ? [{ debugName: "size" }] : []));
     boxHeight = computed(() => (this.half() ? Math.round(this.size() / 2 + 18) : this.size()), ...(ngDevMode ? [{ debugName: "boxHeight" }] : []));
-    showCenter = computed(() => this.variant() === 'donut' && this.centerLabel() !== null, ...(ngDevMode ? [{ debugName: "showCenter" }] : []));
+    showCenter = computed(() => this.variant() === 'donut' && this.centerLabel() !== '', ...(ngDevMode ? [{ debugName: "showCenter" }] : []));
     showTooltip = computed(() => this.tooltip() && (!this.showCenter() || !!this.customTooltip()), ...(ngDevMode ? [{ debugName: "showTooltip" }] : []));
     geo = computed(() => {
         if (this.width() <= 0 || this.isEmpty())
@@ -23093,7 +24319,7 @@ class SdsDonutChart {
                 sub: total ? this.pct()(s.value / total) : '',
             };
         }
-        return { label: this.centerLabel() ?? '', value: this.centerValue() ?? this.fmt()(total), sub: '' };
+        return { label: this.centerLabel() ?? this.text().total, value: this.centerValue() ?? this.fmt()(total), sub: '' };
     }, ...(ngDevMode ? [{ debugName: "center" }] : []));
     tooltipCtx = computed(() => {
         const key = this.active();
@@ -23116,7 +24342,7 @@ class SdsDonutChart {
         if (!s)
             return '';
         const total = this.total();
-        return `${s.label} : ${this.fmt()(s.value)}${total ? `, ${this.pct()(s.value / total)}` : ''}`;
+        return `${this.text().labelValue(s.label, this.fmt()(s.value))}${total ? `, ${this.pct()(s.value / total)}` : ''}`;
     }, ...(ngDevMode ? [{ debugName: "liveText" }] : []));
     legendPosition = computed(() => (this.legend() === 'auto' ? 'right' : this.legend()), ...(ngDevMode ? [{ debugName: "legendPosition" }] : []));
     hover(key, event) {
@@ -23205,12 +24431,12 @@ class SdsDonutChart {
     label = computed(() => {
         if (this.ariaLabel())
             return this.ariaLabel();
-        return [this.heading() || 'Graphique en anneau', `${this.slices().length} parts`, `total ${this.fmt()(this.total())}`].join(' — ');
+        return [this.heading() || this.text().donutChart, this.text().sliceCount(this.slices().length), this.text().totalOf(this.fmt()(this.total()))].join(' — ');
     }, ...(ngDevMode ? [{ debugName: "label" }] : []));
     table = computed(() => {
         const total = this.total();
         return {
-            columns: ['Catégorie', 'Valeur', 'Part'],
+            columns: [this.text().category, this.text().value, this.text().share],
             rows: this.visible().map((s) => [s.label, this.fmt()(s.value), total ? this.pct()(s.value / total) : '—']),
         };
     }, ...(ngDevMode ? [{ debugName: "table" }] : []));
@@ -23238,7 +24464,7 @@ class SdsDonutChart {
         [style.height.px]="boxHeight()"
         tabindex="0"
         role="group"
-        aria-roledescription="graphique"
+        [attr.aria-roledescription]="text().chartRole"
         [attr.aria-label]="label()"
         (keydown)="onKey($event)"
         (blur)="onBlur()"
@@ -23282,7 +24508,7 @@ class SdsDonutChart {
         <div class="sr-only" aria-live="polite" aria-atomic="true">{{ liveText() }}</div>
       </div>
     </sds-chart-frame>
-  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "legendLabel", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle", "tableLabel", "chartLabel"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsDonutChart, decorators: [{
             type: Component,
@@ -23309,7 +24535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [style.height.px]="boxHeight()"
         tabindex="0"
         role="group"
-        aria-roledescription="graphique"
+        [attr.aria-roledescription]="text().chartRole"
         [attr.aria-label]="label()"
         (keydown)="onKey($event)"
         (blur)="onBlur()"
@@ -23397,8 +24623,8 @@ class SdsHeatmap {
     valueFormat = input(null, ...(ngDevMode ? [{ debugName: "valueFormat" }] : []));
     /** Format of the column / row labels (a function; dates default to their day). */
     xFormat = input(null, ...(ngDevMode ? [{ debugName: "xFormat" }] : []));
-    /** Name of the measure in the tooltip (e.g. "Arrivées"). */
-    valueLabel = input('Valeur', ...(ngDevMode ? [{ debugName: "valueLabel" }] : []));
+    /** Name of the measure in the tooltip (e.g. "Arrivals"). Default (`null`): `labels.value`. */
+    valueLabel = input(null, ...(ngDevMode ? [{ debugName: "valueLabel" }] : []));
     /** Column-axis title, drawn under the matrix. */
     xLabel = input('', ...(ngDevMode ? [{ debugName: "xLabel" }] : []));
     /** Row-axis title, drawn vertically on the left (and the table's first column header). */
@@ -23408,7 +24634,8 @@ class SdsHeatmap {
     /** Cross-fade cell colours when the data changes. */
     animate = input(true, ...(ngDevMode ? [{ debugName: "animate", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    emptyText = input('Aucune donnée à afficher', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
+    /** Empty-state text. Default (`null`): the configured `labels.empty` ("No data to display"). */
+    emptyText = input(null, ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
     tableToggle = input(false, ...(ngDevMode ? [{ debugName: "tableToggle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     pointClick = output();
@@ -23423,6 +24650,8 @@ class SdsHeatmap {
     }
     width = hostWidth();
     loc = chartLocale(() => this.locale());
+    /** Built-in strings (provideSdsCharts labels over the English defaults). */
+    text = chartLabels();
     animates = chartAnimates(() => this.animate());
     fmt = computed(() => valueFormatter(this.loc(), this.valueFormat()), ...(ngDevMode ? [{ debugName: "fmt" }] : []));
     matrix = computed(() => {
@@ -23580,8 +24809,8 @@ class SdsHeatmap {
             rows: [
                 {
                     key: 'value',
-                    label: this.valueLabel(),
-                    value: c.value === null ? 'Aucune donnée' : this.fmt()(c.value),
+                    label: this.valueLabel() ?? this.text().value,
+                    value: c.value === null ? this.text().noData : this.fmt()(c.value),
                     raw: c.value,
                     color: vis.fill,
                     shape: 'rect',
@@ -23595,7 +24824,7 @@ class SdsHeatmap {
         if (!this.keyboard())
             return '';
         const c = this.tooltipCtx();
-        return c ? `${c.title} : ${c.rows[0].value}` : '';
+        return c ? this.text().labelValue(c.title ?? '', c.rows[0].value) : '';
     }, ...(ngDevMode ? [{ debugName: "liveText" }] : []));
     hover(i, _event) {
         this.keyboard.set(false);
@@ -23661,7 +24890,7 @@ class SdsHeatmap {
         if (this.ariaLabel())
             return this.ariaLabel();
         const { xs, ys } = this.matrix();
-        return [this.heading() || 'Carte de chaleur', `${ys.length} lignes × ${xs.length} colonnes`].join(' — ');
+        return [this.heading() || this.text().heatmap, this.text().gridSize(ys.length, xs.length)].join(' — ');
     }, ...(ngDevMode ? [{ debugName: "label" }] : []));
     table = computed(() => {
         const { xs, ys, cells } = this.matrix();
@@ -23697,7 +24926,7 @@ class SdsHeatmap {
         [style.height.px]="resolvedHeight()"
         tabindex="0"
         role="group"
-        aria-roledescription="carte de chaleur"
+        [attr.aria-roledescription]="text().heatmapRole"
         [attr.aria-label]="label()"
         (keydown)="onKey($event)"
         (blur)="onBlur()"
@@ -23780,7 +25009,7 @@ class SdsHeatmap {
         </div>
       }
     </sds-chart-frame>
-  `, isInline: true, styles: [".heat-cell{cursor:pointer}.heat-anim{transition:fill .3s ease}@media(prefers-reduced-motion:reduce){.heat-anim{transition:none}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "legendLabel", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle", "tableLabel", "chartLabel"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".heat-cell{cursor:pointer}.heat-anim{transition:fill .3s ease}@media(prefers-reduced-motion:reduce){.heat-anim{transition:none}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsHeatmap, decorators: [{
             type: Component,
@@ -23802,7 +25031,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [style.height.px]="resolvedHeight()"
         tabindex="0"
         role="group"
-        aria-roledescription="carte de chaleur"
+        [attr.aria-roledescription]="text().heatmapRole"
         [attr.aria-label]="label()"
         (keydown)="onKey($event)"
         (blur)="onBlur()"
@@ -23908,7 +25137,9 @@ class SdsTreemap {
     /** Click a branch to zoom into it (with a breadcrumb back). */
     drilldown = input(true, ...(ngDevMode ? [{ debugName: "drilldown", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Name of the top of the breadcrumb. */
-    rootLabel = input('Tout', ...(ngDevMode ? [{ debugName: "rootLabel" }] : []));
+    /** Default (`null`): the configured `labels.all` ("All"). */
+    rootLabel = input(null, ...(ngDevMode ? [{ debugName: "rootLabel" }] : []));
+    rootName = computed(() => this.rootLabel() ?? this.text().all, ...(ngDevMode ? [{ debugName: "rootName" }] : []));
     /** Print the value under the name inside tiles large enough. */
     showValues = input(true, ...(ngDevMode ? [{ debugName: "showValues", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** `auto` = the branch legend below the tiles when there are two or more branches. */
@@ -23917,7 +25148,8 @@ class SdsTreemap {
     tooltip = input(true, ...(ngDevMode ? [{ debugName: "tooltip", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     animate = input(true, ...(ngDevMode ? [{ debugName: "animate", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    emptyText = input('Aucune donnée à afficher', ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
+    /** Empty-state text. Default (`null`): the configured `labels.empty` ("No data to display"). */
+    emptyText = input(null, ...(ngDevMode ? [{ debugName: "emptyText" }] : []));
     tableToggle = input(false, ...(ngDevMode ? [{ debugName: "tableToggle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     /** A leaf tile was clicked (branches zoom instead while `drilldown` is on). `key` is the path "A › B". */
@@ -23931,6 +25163,8 @@ class SdsTreemap {
     pointer = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "pointer" }] : []));
     width = hostWidth();
     loc = chartLocale(() => this.locale());
+    /** Built-in strings (provideSdsCharts labels over the English defaults). */
+    text = chartLabels();
     animates = chartAnimates(() => this.animate());
     palette = chartPalette();
     fmt = computed(() => valueFormatter(this.loc(), this.valueFormat()), ...(ngDevMode ? [{ debugName: "fmt" }] : []));
@@ -23942,7 +25176,7 @@ class SdsTreemap {
         this.keyboard.set(false);
     }
     /** Full hierarchy, summed once. */
-    root = computed(() => this.build({ name: this.rootLabel(), children: this.data() ?? [] }), ...(ngDevMode ? [{ debugName: "root" }] : []));
+    root = computed(() => this.build({ name: this.rootName(), children: this.data() ?? [] }), ...(ngDevMode ? [{ debugName: "root" }] : []));
     build(data) {
         return hierarchy(data, (d) => d.children)
             .sum((d) => (d.children?.length ? 0 : Math.max(0, Number(d.value) || 0)))
@@ -23954,7 +25188,7 @@ class SdsTreemap {
      * the first index that no longer names a branch — so new data can never leave a stale zoom behind.
      */
     zoom = computed(() => {
-        let node = { name: this.rootLabel(), children: this.data() ?? [] };
+        let node = { name: this.rootName(), children: this.data() ?? [] };
         const indices = [];
         const names = [];
         for (const i of this.path()) {
@@ -24057,17 +25291,17 @@ class SdsTreemap {
         const parent = t.node.parent;
         const color = this.activeRect()?.color ?? slotColor(0);
         const v = t.node.value ?? 0;
-        const rows = [{ key: 'value', label: 'Valeur', value: this.fmt()(v), raw: v, color, shape: 'rect' }];
+        const rows = [{ key: 'value', label: this.text().value, value: this.fmt()(v), raw: v, color, shape: 'rect' }];
         if (total)
-            rows.push({ key: 'share', label: 'Part du total', value: this.pct()(v / total), raw: v / total, color, shape: 'rect' });
+            rows.push({ key: 'share', label: this.text().shareOfTotal, value: this.pct()(v / total), raw: v / total, color, shape: 'rect' });
         if (parent && parent.depth > 0 && parent.value) {
-            rows.push({ key: 'parent', label: `Part de ${parent.data.name}`, value: this.pct()(v / parent.value), raw: v / parent.value, color, shape: 'rect' });
+            rows.push({ key: 'parent', label: this.text().shareOf(parent.data.name), value: this.pct()(v / parent.value), raw: v / parent.value, color, shape: 'rect' });
         }
         return { title: t.path, rows, data: [t.node.data], index: 0 };
     }, ...(ngDevMode ? [{ debugName: "tooltipCtx" }] : []));
     liveText = computed(() => {
         const c = this.keyboard() ? this.tooltipCtx() : null;
-        return c ? `${c.title} : ${c.rows.map((r) => `${r.label} ${r.value}`).join(', ')}` : this.announcement();
+        return c ? this.text().labelValue(c.title ?? '', c.rows.map((r) => `${r.label} ${r.value}`).join(', ')) : this.announcement();
     }, ...(ngDevMode ? [{ debugName: "liveText" }] : []));
     hover(key, event) {
         this.keyboard.set(false);
@@ -24089,7 +25323,8 @@ class SdsTreemap {
     announceZoom() {
         const z = this.zoom();
         const count = this.layoutRoot()?.leaves().length ?? 0;
-        this.announcement.set(z.names.length ? `Zoom sur ${z.names.join(PATH_SEP)} — ${count} éléments` : `${this.rootLabel()} — ${count} éléments`);
+        const t = this.text();
+        this.announcement.set(`${z.names.length ? t.zoomedTo(z.names.join(PATH_SEP)) : this.rootName()} — ${t.itemCount(count)}`);
     }
     /** Zoom into the tile's branch — or, at the deepest level, report the leaf. */
     activate(key) {
@@ -24181,14 +25416,14 @@ class SdsTreemap {
         if (this.ariaLabel())
             return this.ariaLabel();
         const zoomed = this.zoom().names;
-        return [this.heading() || 'Treemap', zoomed.length ? `zoom : ${zoomed.join(PATH_SEP)}` : '', `total ${this.fmt()(this.root().value ?? 0)}`]
+        return [this.heading() || this.text().treemap, zoomed.length ? this.text().zoomedTo(zoomed.join(PATH_SEP)) : '', this.text().totalOf(this.fmt()(this.root().value ?? 0))]
             .filter(Boolean)
             .join(' — ');
     }, ...(ngDevMode ? [{ debugName: "label" }] : []));
     table = computed(() => {
         const total = this.root().value ?? 0;
         return {
-            columns: ['Élément', 'Valeur', 'Part'],
+            columns: [this.text().item, this.text().value, this.text().share],
             rows: this.root()
                 .leaves()
                 .map((l) => [
@@ -24215,9 +25450,9 @@ class SdsTreemap {
       [tableToggle]="tableToggle()"
     >
       @if (drilldown() && zoom().names.length) {
-        <nav class="mb-2 flex flex-wrap items-center gap-1 text-xs" aria-label="Fil d'Ariane">
+        <nav class="mb-2 flex flex-wrap items-center gap-1 text-xs" [attr.aria-label]="text().breadcrumb">
           <button type="button" class="rounded px-1.5 py-0.5 font-medium text-ink-soft underline-offset-2 hover:bg-muted hover:text-ink hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" (click)="zoomTo(0)">
-            {{ rootLabel() }}
+            {{ rootName() }}
           </button>
           @for (p of zoom().names; track $index) {
             <sds-icon name="chevron-right" [size]="12" class="text-ink-faint" />
@@ -24234,7 +25469,7 @@ class SdsTreemap {
         [style.height.px]="height()"
         tabindex="0"
         role="group"
-        aria-roledescription="graphique"
+        [attr.aria-roledescription]="text().chartRole"
         [attr.aria-label]="label()"
         (keydown)="onKey($event)"
         (blur)="onBlur()"
@@ -24285,7 +25520,7 @@ class SdsTreemap {
         <div class="sr-only" aria-live="polite" aria-atomic="true">{{ liveText() }}</div>
       </div>
     </sds-chart-frame>
-  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "legendLabel", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle", "tableLabel", "chartLabel"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: SdsChartFrame, selector: "sds-chart-frame", inputs: ["heading", "subtitle", "items", "legend", "hidden", "interactive", "loading", "empty", "emptyText", "height", "table", "tableCaption", "tableToggle"], outputs: ["toggle", "focusKey"] }, { kind: "component", type: SdsChartTooltipBox, selector: "sds-chart-tooltip-box", inputs: ["ctx", "template", "x", "y", "containerWidth", "containerHeight"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTreemap, decorators: [{
             type: Component,
@@ -24305,9 +25540,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       [tableToggle]="tableToggle()"
     >
       @if (drilldown() && zoom().names.length) {
-        <nav class="mb-2 flex flex-wrap items-center gap-1 text-xs" aria-label="Fil d'Ariane">
+        <nav class="mb-2 flex flex-wrap items-center gap-1 text-xs" [attr.aria-label]="text().breadcrumb">
           <button type="button" class="rounded px-1.5 py-0.5 font-medium text-ink-soft underline-offset-2 hover:bg-muted hover:text-ink hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500" (click)="zoomTo(0)">
-            {{ rootLabel() }}
+            {{ rootName() }}
           </button>
           @for (p of zoom().names; track $index) {
             <sds-icon name="chevron-right" [size]="12" class="text-ink-faint" />
@@ -24324,7 +25559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [style.height.px]="height()"
         tabindex="0"
         role="group"
-        aria-roledescription="graphique"
+        [attr.aria-roledescription]="text().chartRole"
         [attr.aria-label]="label()"
         (keydown)="onKey($event)"
         (blur)="onBlur()"
@@ -24412,7 +25647,7 @@ class SdsSparkline {
     valueFormat = input(null, ...(ngDevMode ? [{ debugName: "valueFormat" }] : []));
     /** What the trend measures — prefixes the spoken summary. */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    /** Replace the generated summary ("de 12 à 24 — min…") entirely. */
+    /** Replace the generated summary ("Trend: from 12 to 24 — min…", `labels.sparklineSummary`) entirely. */
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     tooltip = input(true, ...(ngDevMode ? [{ debugName: "tooltip", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     animate = input(true, ...(ngDevMode ? [{ debugName: "animate", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
@@ -24421,6 +25656,8 @@ class SdsSparkline {
     active = signal(null, ...(ngDevMode ? [{ debugName: "active" }] : []));
     measured = hostWidth();
     loc = chartLocale(() => this.locale());
+    /** Built-in strings (provideSdsCharts labels over the English defaults). */
+    text = chartLabels();
     animates = chartAnimates(() => this.animate());
     fmt = computed(() => valueFormatter(this.loc(), this.valueFormat()), ...(ngDevMode ? [{ debugName: "fmt" }] : []));
     palette = chartPalette();
@@ -24575,16 +25812,23 @@ class SdsSparkline {
             index: i,
         };
     }, ...(ngDevMode ? [{ debugName: "tooltipCtx" }] : []));
-    /** "Admissions : de 12 à 24 — min 12, max 24, 7 points." */
+    /** "Admissions: from 12 to 24 — min 12, max 24, 7 points" (`labels.sparklineSummary`). */
     summary = computed(() => {
         if (this.ariaLabel())
             return this.ariaLabel();
         const vals = this.values().filter((v) => v !== null);
+        const t = this.text();
         if (!vals.length)
-            return this.label() || 'Tendance';
+            return this.label() || t.trend;
         const f = this.fmt();
-        const head = this.label() ? `${this.label()} : ` : 'Tendance : ';
-        return `${head}de ${f(vals[0])} à ${f(vals[vals.length - 1])} — min ${f(Math.min(...vals))}, max ${f(Math.max(...vals))}, ${vals.length} points`;
+        return t.sparklineSummary({
+            label: this.label() || t.trend,
+            first: f(vals[0]),
+            last: f(vals[vals.length - 1]),
+            min: f(Math.min(...vals)),
+            max: f(Math.max(...vals)),
+            count: vals.length,
+        });
     }, ...(ngDevMode ? [{ debugName: "summary" }] : []));
     onPointer(event) {
         const G = this.geo();
@@ -24769,6 +26013,8 @@ class SdsKpi {
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     locale = input(null, ...(ngDevMode ? [{ debugName: "locale" }] : []));
     loc = chartLocale(() => this.locale());
+    /** Built-in strings (provideSdsCharts labels over the English defaults). */
+    text = chartLabels();
     display = computed(() => {
         const v = this.value();
         if (v === null || v === undefined || !Number.isFinite(v))
@@ -24810,10 +26056,12 @@ class SdsKpi {
             ? 'var(--color-ink-soft)'
             : `color-mix(in oklab, ${good ? 'var(--color-accent-green)' : 'var(--color-accent-red)'} 70%, var(--color-ink))`;
         const icon = flat ? 'minus' : up ? 'trending-up' : 'trending-down';
-        const direction = flat ? 'stable' : up ? 'en hausse' : 'en baisse';
-        const verdict = good === null ? '' : good ? ', favorable' : ', défavorable';
-        const period = this.deltaLabel() ? ' ' + this.deltaLabel() : '';
-        const spoken = flat ? `${direction}${period}` : `${direction} de ${text.replace(/^[+−-]/, '')}${period}${verdict}`;
+        const spoken = this.text().kpiChange({
+            direction: flat ? 'flat' : up ? 'up' : 'down',
+            delta: flat ? '' : text.replace(/^[+−-]/, ''),
+            period: this.deltaLabel(),
+            good,
+        });
         return { text, tone, icon, spoken };
     }, ...(ngDevMode ? [{ debugName: "deltaView" }] : []));
     absoluteFormat() {
@@ -24967,5 +26215,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_CHART_CONFIG, SDS_DONUT_OTHER_KEY, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBarChart, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsChartTooltip, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsDonutChart, SdsEnvBanner, SdsFileDrop, SdsHeatmap, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsKpi, SdsLanguageSwitcher, SdsLineChart, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScatterChart, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsSparkline, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTreemap, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSdsThemeMode, isoDay, pad2, provideSdsCharts, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
+export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_CHART_CONFIG, SDS_CHART_LABELS_EN, SDS_DONUT_OTHER_KEY, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBarChart, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsChartTooltip, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsDateRangePicker, SdsDonutChart, SdsEnvBanner, SdsFileDrop, SdsHeatmap, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsKpi, SdsLanguageSwitcher, SdsLineChart, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsRangeCalendar, SdsScatterChart, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsSparkline, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTreemap, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, diffInDays, formatDateRange, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSameRange, isSdsThemeMode, isoDay, pad2, provideSdsCharts, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsLastDays, sdsLastMonths, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map