@besaitech/ng-design-system 0.0.32 → 0.0.34

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, output, signal, forwardRef, viewChild, numberAttribute, afterRenderEffect, ElementRef, model, Injector, afterNextRender, Injectable, TemplateRef, Directive, contentChildren, contentChild } from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, output, signal, forwardRef, numberAttribute, viewChildren, afterRenderEffect, viewChild, ElementRef, model, Injector, afterNextRender, Injectable, TemplateRef, Directive, contentChildren, contentChild } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
@@ -152,7 +152,7 @@ const VARIANTS$2 = {
     ghost: 'bg-transparent text-ink-soft hover:bg-black/5 active:bg-black/10',
     danger: 'bg-danger text-white shadow-sm hover:brightness-95 active:brightness-90',
 };
-const SIZES$9 = {
+const SIZES$a = {
     sm: 'h-8 px-3 text-sm',
     md: 'h-10 px-4 text-sm',
     lg: 'h-12 px-5 text-base',
@@ -212,7 +212,7 @@ class SdsButton {
             BASE,
             this.shape() === 'pill' ? 'rounded-full' : 'rounded-control',
             VARIANTS$2[this.variant()],
-            SIZES$9[size],
+            SIZES$a[size],
             this.iconOnly() ? ICON_ONLY[size] : '',
             this.block() ? 'w-full' : '',
         ]
@@ -264,8 +264,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$a = 0;
-const SIZES$8 = {
+let nextId$b = 0;
+const SIZES$9 = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
@@ -277,7 +277,7 @@ const SIZES$8 = {
  * sidebar search field).
  */
 class SdsInput {
-    inputId = `sds-input-${nextId$a++}`;
+    inputId = `sds-input-${nextId$b++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -354,7 +354,7 @@ class SdsInput {
         return `${left} ${right}`;
     }, ...(ngDevMode ? [{ debugName: "fieldPadding" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$8[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
+        const parts = [SIZES$9[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
         if (this.isDisabled())
             parts.push('opacity-60 cursor-not-allowed');
         if (this.filled()) {
@@ -598,6 +598,323 @@ 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: { 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 }] }], 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 }] }], 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$a = 0;
+const SIZES$8 = {
+    md: 'h-12 w-11 text-lg',
+    lg: 'h-14 w-12 text-xl',
+};
+/**
+ * A segmented one-time-code field: one box per character, for the short numeric codes emailed or
+ * texted for sign-in and verification. Implements ControlValueAccessor — bind
+ * `formControlName`/`[(ngModel)]`; the value is the concatenated string (e.g. `"483920"`), and
+ * {@link completed} fires the moment every box is filled.
+ *
+ * <p>Only digits are accepted (`inputMode` is `numeric` by default). Typing auto-advances,
+ * Backspace steps back and clears, the arrow keys move between boxes, and pasting a whole code
+ * distributes it across the boxes from the focused one — so a user can paste `483920` into the
+ * first box and have it land correctly.
+ */
+class SdsOtpInput {
+    groupId = `sds-otp-${nextId$a++}`;
+    /** How many boxes / characters the code has. */
+    length = input(6, ...(ngDevMode ? [{ debugName: "length", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Accessible name for the whole group when no visible [label] is provided. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** `numeric` for digit codes (the default); `text` for alphanumeric codes. */
+    inputMode = input('numeric', ...(ngDevMode ? [{ debugName: "inputMode" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Focus the first box on first render. */
+    autoFocus = input(false, ...(ngDevMode ? [{ debugName: "autoFocus", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Accessible name for an individual box, suffixed with its 1-based position ("Digit 1", "Digit
+     * 2", …). French default so existing consumers are unchanged; translate it in an app serving more
+     * than one language, since each box is an icon-less control whose only name this is.
+     */
+    cellLabel = input('Chiffre', ...(ngDevMode ? [{ debugName: "cellLabel" }] : []));
+    /** Emitted with the full value the moment the last box is filled. */
+    completed = output();
+    cells = viewChildren('cell', ...(ngDevMode ? [{ debugName: "cells" }] : []));
+    /** One entry per box; the source of truth, kept exactly {@link length} long. */
+    chars = signal([], ...(ngDevMode ? [{ debugName: "chars" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    indexes = computed(() => Array.from({ length: this.length() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "indexes" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    describedBy = computed(() => {
+        if (this.error())
+            return `${this.groupId}-err`;
+        if (this.hint())
+            return `${this.groupId}-hint`;
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    cellClasses = computed(() => {
+        const parts = ['rounded-control border', SIZES$8[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');
+        if (this.isDisabled())
+            parts.push('opacity-60');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "cellClasses" }] : []));
+    constructor() {
+        // Autofocus once the boxes are in the DOM. afterRenderEffect re-runs on signal reads, but the
+        // guard keeps it to the first paint — refocusing on every value change would fight the user.
+        let focused = false;
+        afterRenderEffect(() => {
+            if (this.autoFocus() && !focused && !this.isDisabled()) {
+                this.cells()[0]?.nativeElement.focus();
+                focused = true;
+            }
+        });
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        // Programmatic set never emits — CVA writeValue must not call onChange.
+        this.chars.set(this.spread(value ?? ''));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // --- events ---------------------------------------------------------------
+    charAt(index) {
+        return this.chars()[index] ?? '';
+    }
+    onInput(event, index) {
+        const el = event.target;
+        const raw = el.value;
+        const digits = this.sanitize(raw);
+        if (digits.length === 0) {
+            if (raw.length === 0) {
+                // Genuinely emptied (cut, or a deletion the keydown handler did not catch) — clear the box.
+                this.setChar(index, '');
+            }
+            else {
+                // A rejected character (letter, symbol) — reassert the box's real content, since the
+                // [value] binding will not repaint an unchanged signal.
+                el.value = this.charAt(index);
+            }
+            return;
+        }
+        if (digits.length > 1) {
+            // Fast typing or an autofill dropped several characters into one box — spread them.
+            this.fill(digits, index);
+            return;
+        }
+        this.setChar(index, digits);
+        this.focusIndex(index + 1);
+    }
+    onKeydown(event, index) {
+        switch (event.key) {
+            case 'Backspace':
+                event.preventDefault();
+                if (this.charAt(index)) {
+                    this.setChar(index, '');
+                }
+                else if (index > 0) {
+                    this.setChar(index - 1, '');
+                    this.focusIndex(index - 1);
+                }
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.focusIndex(index - 1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.focusIndex(index + 1);
+                break;
+            case 'Delete':
+                event.preventDefault();
+                this.setChar(index, '');
+                break;
+            default:
+                break;
+        }
+    }
+    onPaste(event, index) {
+        const digits = this.sanitize(event.clipboardData?.getData('text') ?? '');
+        if (!digits)
+            return;
+        event.preventDefault();
+        this.fill(digits, index);
+    }
+    onFocus(event) {
+        // Select the box's content so a keystroke overwrites rather than being rejected by maxlength.
+        event.target.select();
+    }
+    // --- internals ------------------------------------------------------------
+    sanitize(raw) {
+        return this.inputMode() === 'numeric'
+            ? raw.replace(/\D/g, '')
+            : raw.replace(/[^A-Za-z0-9]/g, '');
+    }
+    /** Normalize any input string into an array exactly {@link length} long. */
+    spread(raw) {
+        const cleaned = this.sanitize(raw).slice(0, this.length());
+        return Array.from({ length: this.length() }, (_, i) => cleaned[i] ?? '');
+    }
+    setChar(index, value) {
+        const next = this.normalized();
+        next[index] = value;
+        this.commit(next);
+    }
+    /** Write `digits` across the boxes starting at `start`, then focus the next empty box. */
+    fill(digits, start) {
+        const next = this.normalized();
+        let cursor = start;
+        for (const ch of digits) {
+            if (cursor >= this.length())
+                break;
+            next[cursor] = ch;
+            cursor += 1;
+        }
+        this.commit(next);
+        this.focusIndex(Math.min(cursor, this.length() - 1));
+    }
+    commit(next) {
+        this.chars.set(next);
+        const value = next.join('');
+        this.onChange(value);
+        if (next.every((c) => c !== '')) {
+            this.completed.emit(value);
+        }
+    }
+    /** The current boxes as a fresh, correctly-sized array to mutate. */
+    normalized() {
+        const current = this.chars();
+        return Array.from({ length: this.length() }, (_, i) => current[i] ?? '');
+    }
+    focusIndex(index) {
+        const clamped = Math.max(0, Math.min(index, this.length() - 1));
+        const cell = this.cells()[clamped]?.nativeElement;
+        if (cell) {
+            cell.focus();
+            cell.select();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsOtpInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsOtpInput, isStandalone: true, selector: "sds-otp-input", inputs: { length: { classPropertyName: "length", publicName: "length", 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 }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, cellLabel: { classPropertyName: "cellLabel", publicName: "cellLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, host: { classAttribute: "block" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SdsOtpInput),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "cells", predicate: ["cell"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label [id]="groupId + '-label'" class="mb-1.5 block text-sm font-medium text-ink">
+        {{ label() }}
+      </label>
+    }
+
+    <div
+      class="flex items-center gap-2"
+      role="group"
+      [attr.aria-labelledby]="label() ? groupId + '-label' : null"
+      [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+      [attr.aria-describedby]="describedBy()"
+    >
+      @for (i of indexes(); track i) {
+        <input
+          #cell
+          type="text"
+          [attr.data-index]="i"
+          [inputMode]="inputMode()"
+          autocomplete="one-time-code"
+          maxlength="1"
+          [value]="charAt(i)"
+          [disabled]="isDisabled()"
+          [attr.aria-label]="cellLabel() + ' ' + (i + 1)"
+          [attr.aria-invalid]="error() ? 'true' : null"
+          class="bg-white text-center font-semibold tabular-nums outline-none transition-colors
+                 disabled:cursor-not-allowed"
+          [class]="cellClasses()"
+          (input)="onInput($event, i)"
+          (keydown)="onKeydown($event, i)"
+          (paste)="onPaste($event, i)"
+          (focus)="onFocus($event)"
+          (blur)="onTouched()"
+        />
+      }
+    </div>
+
+    @if (error()) {
+      <p [id]="groupId + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="groupId + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsOtpInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-otp-input',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SdsOtpInput),
+                            multi: true,
+                        },
+                    ],
+                    host: { class: 'block' },
+                    template: `
+    @if (label()) {
+      <label [id]="groupId + '-label'" class="mb-1.5 block text-sm font-medium text-ink">
+        {{ label() }}
+      </label>
+    }
+
+    <div
+      class="flex items-center gap-2"
+      role="group"
+      [attr.aria-labelledby]="label() ? groupId + '-label' : null"
+      [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+      [attr.aria-describedby]="describedBy()"
+    >
+      @for (i of indexes(); track i) {
+        <input
+          #cell
+          type="text"
+          [attr.data-index]="i"
+          [inputMode]="inputMode()"
+          autocomplete="one-time-code"
+          maxlength="1"
+          [value]="charAt(i)"
+          [disabled]="isDisabled()"
+          [attr.aria-label]="cellLabel() + ' ' + (i + 1)"
+          [attr.aria-invalid]="error() ? 'true' : null"
+          class="bg-white text-center font-semibold tabular-nums outline-none transition-colors
+                 disabled:cursor-not-allowed"
+          [class]="cellClasses()"
+          (input)="onInput($event, i)"
+          (keydown)="onKeydown($event, i)"
+          (paste)="onPaste($event, i)"
+          (focus)="onFocus($event)"
+          (blur)="onTouched()"
+        />
+      }
+    </div>
+
+    @if (error()) {
+      <p [id]="groupId + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="groupId + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+  `,
+                }]
+        }], 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$9 = 0;
 const SIZES$7 = {
     sm: 'text-sm px-3 py-2',
@@ -1474,6 +1791,26 @@ class SdsCalendar {
     firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
     locale = input('fr-FR', ...(ngDevMode ? [{ debugName: "locale" }] : []));
     showActions = input(true, ...(ngDevMode ? [{ debugName: "showActions" }] : []));
+    /**
+     * Accessible name for the calendar container. French default so existing consumers are unchanged,
+     * but an app serving more than one language MUST translate it.
+     */
+    calendarLabel = input('Calendrier', ...(ngDevMode ? [{ debugName: "calendarLabel" }] : []));
+    /**
+     * Accessible name for the "previous" nav button. It is icon-only, so this string is its ONLY
+     * accessible name — a hardcoded French one is simply wrong in every other locale. Translate it in
+     * the consuming app.
+     */
+    previousLabel = input('Précédent', ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
+    /** Accessible name for the icon-only "next" nav button. See {@link previousLabel}. */
+    nextLabel = input('Suivant', ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    /**
+     * Visible text of the "today" action (shown when {@link showActions} is true). Translate it in the
+     * consuming app — the library ships no i18n of its own.
+     */
+    todayActionLabel = input("Aujourd'hui", ...(ngDevMode ? [{ debugName: "todayActionLabel" }] : []));
+    /** Visible text of the "clear" action. See {@link todayActionLabel}. */
+    clearActionLabel = input('Effacer', ...(ngDevMode ? [{ debugName: "clearActionLabel" }] : []));
     /** Emitted when a concrete date is picked (day click or "Aujourd'hui"). */
     dateSelect = output();
     view = signal('day', ...(ngDevMode ? [{ debugName: "view" }] : []));
@@ -1707,15 +2044,15 @@ class SdsCalendar {
         return cls;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsCalendar, isStandalone: true, selector: "sds-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", dateSelect: "dateSelect" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsCalendar, isStandalone: true, selector: "sds-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", 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 }, todayActionLabel: { classPropertyName: "todayActionLabel", publicName: "todayActionLabel", isSignal: true, isRequired: false, transformFunction: null }, clearActionLabel: { classPropertyName: "clearActionLabel", publicName: "clearActionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", dateSelect: "dateSelect" }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <div
       class="w-[20rem] select-none rounded-card border border-border bg-surface p-3 shadow-lg"
       role="group"
-      aria-label="Calendrier"
+      [attr.aria-label]="calendarLabel()"
     >
       <!-- Header -->
       <div class="mb-2 flex items-center justify-between">
-        <button type="button" [class]="navBtn" aria-label="Précédent" (click)="prev()">
+        <button type="button" [class]="navBtn" [attr.aria-label]="previousLabel()" (click)="prev()">
           <sds-icon name="chevron-left" [size]="18" />
         </button>
 
@@ -1740,7 +2077,7 @@ class SdsCalendar {
           }
         </div>
 
-        <button type="button" [class]="navBtn" aria-label="Suivant" (click)="next()">
+        <button type="button" [class]="navBtn" [attr.aria-label]="nextLabel()" (click)="next()">
           <sds-icon name="chevron-right" [size]="18" />
         </button>
       </div>
@@ -1824,9 +2161,9 @@ class SdsCalendar {
             [disabled]="todayDisabled()"
             (click)="goToday()"
           >
-            Aujourd'hui
+            {{ todayActionLabel() }}
           </button>
-          <button type="button" [class]="actionBtn" (click)="clear()">Effacer</button>
+          <button type="button" [class]="actionBtn" (click)="clear()">{{ clearActionLabel() }}</button>
         </div>
       }
     </div>
@@ -1843,11 +2180,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     <div
       class="w-[20rem] select-none rounded-card border border-border bg-surface p-3 shadow-lg"
       role="group"
-      aria-label="Calendrier"
+      [attr.aria-label]="calendarLabel()"
     >
       <!-- Header -->
       <div class="mb-2 flex items-center justify-between">
-        <button type="button" [class]="navBtn" aria-label="Précédent" (click)="prev()">
+        <button type="button" [class]="navBtn" [attr.aria-label]="previousLabel()" (click)="prev()">
           <sds-icon name="chevron-left" [size]="18" />
         </button>
 
@@ -1872,7 +2209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           }
         </div>
 
-        <button type="button" [class]="navBtn" aria-label="Suivant" (click)="next()">
+        <button type="button" [class]="navBtn" [attr.aria-label]="nextLabel()" (click)="next()">
           <sds-icon name="chevron-right" [size]="18" />
         </button>
       </div>
@@ -1956,15 +2293,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             [disabled]="todayDisabled()"
             (click)="goToday()"
           >
-            Aujourd'hui
+            {{ todayActionLabel() }}
           </button>
-          <button type="button" [class]="actionBtn" (click)="clear()">Effacer</button>
+          <button type="button" [class]="actionBtn" (click)="clear()">{{ clearActionLabel() }}</button>
         </div>
       }
     </div>
   `,
                 }]
-        }], 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 }] }], dateSelect: [{ type: i0.Output, args: ["dateSelect"] }] } });
+        }], 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 }] }], 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"] }] } });
 
 const SIZES$5 = {
     sm: 'h-9 text-sm',
@@ -1999,6 +2336,31 @@ class SdsDatePicker {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Custom display formatter (default dd/MM/yyyy). */
     format = input(formatDdMmYyyy, ...(ngDevMode ? [{ debugName: "format" }] : []));
+    /**
+     * Accessible name for the clear button. French default so existing consumers are unchanged, but an
+     * app serving more than one language MUST translate it — it is an icon-only control, so this string
+     * is its only name.
+     */
+    clearLabel = input('Effacer la date', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    /**
+     * Accessible name for the icon-only calendar toggle while the panel is CLOSED. See
+     * {@link clearLabel} for why this has to be translatable.
+     */
+    openCalendarLabel = input('Ouvrir le calendrier', ...(ngDevMode ? [{ debugName: "openCalendarLabel" }] : []));
+    /** Accessible name for the calendar toggle while the panel is OPEN. See {@link openCalendarLabel}. */
+    closeCalendarLabel = input('Fermer le calendrier', ...(ngDevMode ? [{ debugName: "closeCalendarLabel" }] : []));
+    /** Accessible name for the overlay dialog that holds the calendar. */
+    panelLabel = input('Sélection de date', ...(ngDevMode ? [{ debugName: "panelLabel" }] : []));
+    /**
+     * Labels forwarded to the embedded <sds-calendar>. They live here because the picker is how the
+     * calendar is normally reached — without forwarding, a consumer could translate the field but not
+     * the panel it opens. Defaults match SdsCalendar's own, so nothing changes for existing consumers.
+     */
+    calendarLabel = input('Calendrier', ...(ngDevMode ? [{ debugName: "calendarLabel" }] : []));
+    previousLabel = input('Précédent', ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
+    nextLabel = input('Suivant', ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    todayActionLabel = input("Aujourd'hui", ...(ngDevMode ? [{ debugName: "todayActionLabel" }] : []));
+    clearActionLabel = input('Effacer', ...(ngDevMode ? [{ debugName: "clearActionLabel" }] : []));
     value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
@@ -2146,7 +2508,7 @@ class SdsDatePicker {
         this.cvaDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsDatePicker, isStandalone: true, selector: "sds-date-picker", inputs: { 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 }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "close(true)" }, classAttribute: "block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsDatePicker, isStandalone: true, selector: "sds-date-picker", inputs: { 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 }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, openCalendarLabel: { classPropertyName: "openCalendarLabel", publicName: "openCalendarLabel", isSignal: true, isRequired: false, transformFunction: null }, closeCalendarLabel: { classPropertyName: "closeCalendarLabel", publicName: "closeCalendarLabel", isSignal: true, isRequired: false, transformFunction: null }, panelLabel: { classPropertyName: "panelLabel", publicName: "panelLabel", 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 }, todayActionLabel: { classPropertyName: "todayActionLabel", publicName: "todayActionLabel", isSignal: true, isRequired: false, transformFunction: null }, clearActionLabel: { classPropertyName: "clearActionLabel", publicName: "clearActionLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "close(true)" }, classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsDatePicker), multi: true },
         ], viewQueries: [{ propertyName: "calendar", first: true, predicate: SdsCalendar, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
@@ -2163,6 +2525,11 @@ class SdsDatePicker {
         [firstDayOfWeek]="firstDayOfWeek()"
         [locale]="locale()"
         [showActions]="showActions()"
+        [calendarLabel]="calendarLabel()"
+        [previousLabel]="previousLabel()"
+        [nextLabel]="nextLabel()"
+        [todayActionLabel]="todayActionLabel()"
+        [clearActionLabel]="clearActionLabel()"
         (valueChange)="onCalendarValue($event)"
       />
     } @else {
@@ -2192,7 +2559,7 @@ class SdsDatePicker {
             <button
               type="button"
               tabindex="-1"
-              aria-label="Effacer la date"
+              [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)"
             >
@@ -2203,7 +2570,7 @@ class SdsDatePicker {
           <button
             type="button"
             tabindex="-1"
-            [attr.aria-label]="open() ? 'Fermer le calendrier' : 'Ouvrir le calendrier'"
+            [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)"
           >
@@ -2218,7 +2585,7 @@ class SdsDatePicker {
             class="fixed z-[1000]"
             role="dialog"
             aria-modal="false"
-            aria-label="Sélection de date"
+            [attr.aria-label]="panelLabel()"
             (keydown.escape)="close(true)"
           >
             <sds-calendar
@@ -2228,6 +2595,11 @@ class SdsDatePicker {
               [firstDayOfWeek]="firstDayOfWeek()"
               [locale]="locale()"
               [showActions]="showActions()"
+              [calendarLabel]="calendarLabel()"
+              [previousLabel]="previousLabel()"
+              [nextLabel]="nextLabel()"
+              [todayActionLabel]="todayActionLabel()"
+              [clearActionLabel]="clearActionLabel()"
               (valueChange)="onCalendarValue($event)"
               (dateSelect)="close(true)"
             />
@@ -2242,7 +2614,7 @@ class SdsDatePicker {
     @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"] }, { kind: "component", type: SdsCalendar, selector: "sds-calendar", inputs: ["value", "min", "max", "firstDayOfWeek", "locale", "showActions"], outputs: ["valueChange", "dateSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "component", type: SdsCalendar, selector: "sds-calendar", inputs: ["value", "min", "max", "firstDayOfWeek", "locale", "showActions", "calendarLabel", "previousLabel", "nextLabel", "todayActionLabel", "clearActionLabel"], outputs: ["valueChange", "dateSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsDatePicker, decorators: [{
             type: Component,
@@ -2273,6 +2645,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [firstDayOfWeek]="firstDayOfWeek()"
         [locale]="locale()"
         [showActions]="showActions()"
+        [calendarLabel]="calendarLabel()"
+        [previousLabel]="previousLabel()"
+        [nextLabel]="nextLabel()"
+        [todayActionLabel]="todayActionLabel()"
+        [clearActionLabel]="clearActionLabel()"
         (valueChange)="onCalendarValue($event)"
       />
     } @else {
@@ -2302,7 +2679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             <button
               type="button"
               tabindex="-1"
-              aria-label="Effacer la date"
+              [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)"
             >
@@ -2313,7 +2690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           <button
             type="button"
             tabindex="-1"
-            [attr.aria-label]="open() ? 'Fermer le calendrier' : 'Ouvrir le calendrier'"
+            [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)"
           >
@@ -2328,7 +2705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             class="fixed z-[1000]"
             role="dialog"
             aria-modal="false"
-            aria-label="Sélection de date"
+            [attr.aria-label]="panelLabel()"
             (keydown.escape)="close(true)"
           >
             <sds-calendar
@@ -2338,6 +2715,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               [firstDayOfWeek]="firstDayOfWeek()"
               [locale]="locale()"
               [showActions]="showActions()"
+              [calendarLabel]="calendarLabel()"
+              [previousLabel]="previousLabel()"
+              [nextLabel]="nextLabel()"
+              [todayActionLabel]="todayActionLabel()"
+              [clearActionLabel]="clearActionLabel()"
               (valueChange)="onCalendarValue($event)"
               (dateSelect)="close(true)"
             />
@@ -2354,7 +2736,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 }] }], 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 }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsCalendar), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+        }], 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 }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", 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$6 = 0;
 
 const SIZES$4 = {
@@ -3782,6 +4164,40 @@ class SdsPhoneInput {
     /** Show an example number as a hint when no [hint] is provided. */
     showExampleHint = input(true, ...(ngDevMode ? [{ debugName: "showExampleHint", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     requiredMessage = input('Numéro de téléphone requis', ...(ngDevMode ? [{ debugName: "requiredMessage" }] : []));
+    /**
+     * Accessible name of the country selector. `{country}` is replaced with the selected country's
+     * name. A token rather than a prefix because word order differs per language. French default so
+     * existing consumers are unchanged; translate it in any app serving more than one language.
+     *
+     * Note the interpolated country NAME still comes from the library's built-in country table, which
+     * is French-only — translating this template fixes the wrapper, not the name inside it.
+     */
+    countryLabel = input('Indicatif pays : {country}', ...(ngDevMode ? [{ debugName: "countryLabel" }] : []));
+    /**
+     * Accessible name for the clear button. It is icon-only, so this string is its ONLY accessible
+     * name — a hardcoded French one is simply wrong in every other locale.
+     */
+    clearLabel = input('Effacer', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    /** Accessible name for the country-search field inside the dropdown. */
+    searchLabel = input('Rechercher un pays', ...(ngDevMode ? [{ debugName: "searchLabel" }] : []));
+    /** Placeholder text of the country-search field. */
+    searchPlaceholder = input('Rechercher un pays…', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
+    /** Shown in place of the list when no country matches the filter. */
+    noResultsLabel = input('Aucun pays', ...(ngDevMode ? [{ debugName: "noResultsLabel" }] : []));
+    /**
+     * Built-in validation messages. `{lengths}` is replaced with the country's accepted national
+     * lengths, joined with {@link lengthSeparator}. Siblings of {@link requiredMessage}, which was
+     * already translatable — these two were not, so an English or Dutch app showed French errors.
+     */
+    incompleteMessage = input('Numéro incomplet — {lengths} chiffres attendus', ...(ngDevMode ? [{ debugName: "incompleteMessage" }] : []));
+    invalidMessage = input('Numéro invalide — {lengths} chiffres attendus', ...(ngDevMode ? [{ debugName: "invalidMessage" }] : []));
+    /** Joins the accepted lengths when a country allows more than one (e.g. "8 ou 9"). */
+    lengthSeparator = input(' ou ', ...(ngDevMode ? [{ debugName: "lengthSeparator" }] : []));
+    /**
+     * Auto-generated example hint (see {@link showExampleHint}). `{number}` is replaced with the
+     * formatted international example number.
+     */
+    exampleHintTemplate = input('Ex. {number}', ...(ngDevMode ? [{ debugName: "exampleHintTemplate" }] : []));
     /** Emitted with the parsed parts whenever the number or country changes. */
     phoneChange = output();
     national = signal('', ...(ngDevMode ? [{ debugName: "national" }] : []));
@@ -3832,8 +4248,10 @@ class SdsPhoneInput {
         if (!this.showExampleHint())
             return '';
         const c = this.country();
-        return `Ex. +${c.dialCode} ${sdsFormatNational(c.example, c.format)}`;
+        const number = `+${c.dialCode} ${sdsFormatNational(c.example, c.format)}`;
+        return this.exampleHintTemplate().replace('{number}', number);
     }, ...(ngDevMode ? [{ debugName: "autoHint" }] : []));
+    countryAriaLabel = computed(() => this.countryLabel().replace('{country}', this.country().name), ...(ngDevMode ? [{ debugName: "countryAriaLabel" }] : []));
     e164 = computed(() => {
         const d = this.national();
         return d ? `+${this.country().dialCode}${d}` : '';
@@ -3861,12 +4279,12 @@ class SdsPhoneInput {
         if (this.required() && !this.national())
             return this.requiredMessage();
         const lengths = this.country().lengths;
-        const expected = lengths.join(' ou ');
+        const expected = lengths.join(this.lengthSeparator());
         const len = this.national().length;
         const min = Math.min(...lengths);
         if (len < min)
-            return `Numéro incomplet — ${expected} chiffres attendus`;
-        return `Numéro invalide — ${expected} chiffres attendus`;
+            return this.incompleteMessage().replace('{lengths}', expected);
+        return this.invalidMessage().replace('{lengths}', expected);
     }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
     describedBy = computed(() => {
         if (this.showError())
@@ -4149,7 +4567,7 @@ class SdsPhoneInput {
         this.onValidatorChange = fn;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsPhoneInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsPhoneInput, isStandalone: true, selector: "sds-phone-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, defaultCountry: { classPropertyName: "defaultCountry", publicName: "defaultCountry", isSignal: true, isRequired: false, transformFunction: null }, preferredCountries: { classPropertyName: "preferredCountries", publicName: "preferredCountries", isSignal: true, isRequired: false, transformFunction: null }, onlyCountries: { classPropertyName: "onlyCountries", publicName: "onlyCountries", isSignal: true, isRequired: false, transformFunction: null }, showExampleHint: { classPropertyName: "showExampleHint", publicName: "showExampleHint", isSignal: true, isRequired: false, transformFunction: null }, requiredMessage: { classPropertyName: "requiredMessage", publicName: "requiredMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { phoneChange: "phoneChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsPhoneInput, isStandalone: true, selector: "sds-phone-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, defaultCountry: { classPropertyName: "defaultCountry", publicName: "defaultCountry", isSignal: true, isRequired: false, transformFunction: null }, preferredCountries: { classPropertyName: "preferredCountries", publicName: "preferredCountries", isSignal: true, isRequired: false, transformFunction: null }, onlyCountries: { classPropertyName: "onlyCountries", publicName: "onlyCountries", isSignal: true, isRequired: false, transformFunction: null }, showExampleHint: { classPropertyName: "showExampleHint", publicName: "showExampleHint", isSignal: true, isRequired: false, transformFunction: null }, requiredMessage: { classPropertyName: "requiredMessage", publicName: "requiredMessage", isSignal: true, isRequired: false, transformFunction: null }, countryLabel: { classPropertyName: "countryLabel", publicName: "countryLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsLabel: { classPropertyName: "noResultsLabel", publicName: "noResultsLabel", isSignal: true, isRequired: false, transformFunction: null }, incompleteMessage: { classPropertyName: "incompleteMessage", publicName: "incompleteMessage", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, lengthSeparator: { classPropertyName: "lengthSeparator", publicName: "lengthSeparator", isSignal: true, isRequired: false, transformFunction: null }, exampleHintTemplate: { classPropertyName: "exampleHintTemplate", publicName: "exampleHintTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { phoneChange: "phoneChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsPhoneInput), multi: true },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => SdsPhoneInput), multi: true },
         ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }, { propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: `
@@ -4172,7 +4590,7 @@ class SdsPhoneInput {
         [attr.aria-expanded]="open()"
         [attr.aria-controls]="listId"
         aria-haspopup="listbox"
-        [attr.aria-label]="'Indicatif pays : ' + country().name"
+        [attr.aria-label]="countryAriaLabel()"
         class="flex shrink-0 items-center gap-1.5 rounded-l-control pl-2.5 pr-2 focus:outline-none"
         [class.cursor-not-allowed]="isDisabled()"
         (click)="toggle()"
@@ -4213,7 +4631,7 @@ class SdsPhoneInput {
         <button
           type="button"
           tabindex="-1"
-          aria-label="Effacer"
+          [attr.aria-label]="clearLabel()"
           class="mr-1.5 inline-flex w-7 shrink-0 items-center justify-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft"
           (click)="clear()"
         >
@@ -4235,8 +4653,8 @@ class SdsPhoneInput {
               type="text"
               [attr.aria-controls]="listId"
               [value]="filterText()"
-              placeholder="Rechercher un pays…"
-              aria-label="Rechercher un pays"
+              [placeholder]="searchPlaceholder()"
+              [attr.aria-label]="searchLabel()"
               class="h-9 w-full bg-transparent pl-8 pr-2 text-sm text-ink outline-none placeholder:text-ink-faint"
               (input)="onFilter($event)"
               (keydown)="onFilterKeydown($event)"
@@ -4262,7 +4680,7 @@ class SdsPhoneInput {
               <span class="text-ink-faint">+{{ c.dialCode }}</span>
             </li>
           } @empty {
-            <li class="px-3 py-2 text-sm text-ink-faint">Aucun pays</li>
+            <li class="px-3 py-2 text-sm text-ink-faint">{{ noResultsLabel() }}</li>
           }
         </ul>
       </div>
@@ -4313,7 +4731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [attr.aria-expanded]="open()"
         [attr.aria-controls]="listId"
         aria-haspopup="listbox"
-        [attr.aria-label]="'Indicatif pays : ' + country().name"
+        [attr.aria-label]="countryAriaLabel()"
         class="flex shrink-0 items-center gap-1.5 rounded-l-control pl-2.5 pr-2 focus:outline-none"
         [class.cursor-not-allowed]="isDisabled()"
         (click)="toggle()"
@@ -4354,7 +4772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         <button
           type="button"
           tabindex="-1"
-          aria-label="Effacer"
+          [attr.aria-label]="clearLabel()"
           class="mr-1.5 inline-flex w-7 shrink-0 items-center justify-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft"
           (click)="clear()"
         >
@@ -4376,8 +4794,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               type="text"
               [attr.aria-controls]="listId"
               [value]="filterText()"
-              placeholder="Rechercher un pays…"
-              aria-label="Rechercher un pays"
+              [placeholder]="searchPlaceholder()"
+              [attr.aria-label]="searchLabel()"
               class="h-9 w-full bg-transparent pl-8 pr-2 text-sm text-ink outline-none placeholder:text-ink-faint"
               (input)="onFilter($event)"
               (keydown)="onFilterKeydown($event)"
@@ -4403,7 +4821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               <span class="text-ink-faint">+{{ c.dialCode }}</span>
             </li>
           } @empty {
-            <li class="px-3 py-2 text-sm text-ink-faint">Aucun pays</li>
+            <li class="px-3 py-2 text-sm text-ink-faint">{{ noResultsLabel() }}</li>
           }
         </ul>
       </div>
@@ -4420,7 +4838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], defaultCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCountry", required: false }] }], preferredCountries: [{ type: i0.Input, args: [{ isSignal: true, alias: "preferredCountries", required: false }] }], onlyCountries: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyCountries", required: false }] }], showExampleHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExampleHint", required: false }] }], requiredMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredMessage", required: false }] }], phoneChange: [{ type: i0.Output, args: ["phoneChange"] }], anchor: [{ type: i0.ViewChild, args: ['anchor', { isSignal: true }] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], defaultCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCountry", required: false }] }], preferredCountries: [{ type: i0.Input, args: [{ isSignal: true, alias: "preferredCountries", required: false }] }], onlyCountries: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyCountries", required: false }] }], showExampleHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExampleHint", required: false }] }], requiredMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredMessage", required: false }] }], countryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countryLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsLabel", required: false }] }], incompleteMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "incompleteMessage", required: false }] }], invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], lengthSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "lengthSeparator", required: false }] }], exampleHintTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "exampleHintTemplate", required: false }] }], phoneChange: [{ type: i0.Output, args: ["phoneChange"] }], anchor: [{ type: i0.ViewChild, args: ['anchor', { isSignal: true }] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
 const SIZES$1 = {
     sm: 'h-8 min-w-8 text-xs',
@@ -4469,6 +4887,28 @@ class SdsPaginator {
     showJumpToPageInput = input(false, ...(ngDevMode ? [{ debugName: "showJumpToPageInput", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     rowsPerPageLabel = input('Lignes par page', ...(ngDevMode ? [{ debugName: "rowsPerPageLabel" }] : []));
     jumpToPageLabel = input('Aller à', ...(ngDevMode ? [{ debugName: "jumpToPageLabel" }] : []));
+    /**
+     * Accessible name for the <nav> wrapping the page controls, and for the four icon-only
+     * first/prev/next/last buttons. Those buttons have no text, so these strings are their ONLY
+     * accessible names — the French defaults keep existing consumers unchanged, but an app serving more
+     * than one language MUST pass translated values.
+     */
+    paginationLabel = input('Pagination', ...(ngDevMode ? [{ debugName: "paginationLabel" }] : []));
+    firstPageLabel = input('Première page', ...(ngDevMode ? [{ debugName: "firstPageLabel" }] : []));
+    previousPageLabel = input('Page précédente', ...(ngDevMode ? [{ debugName: "previousPageLabel" }] : []));
+    nextPageLabel = input('Page suivante', ...(ngDevMode ? [{ debugName: "nextPageLabel" }] : []));
+    lastPageLabel = input('Dernière page', ...(ngDevMode ? [{ debugName: "lastPageLabel" }] : []));
+    /**
+     * Accessible name of a numbered page link. `{page}` is replaced with the 1-based page number —
+     * a token rather than a prefix because word order is not the same in every language.
+     */
+    pageLinkLabel = input('Page {page}', ...(ngDevMode ? [{ debugName: "pageLinkLabel" }] : []));
+    /**
+     * Accessible name of the jump-to-page field. Separate from the visible {@link jumpToPageLabel}
+     * ("Aller à") on purpose: the visible text is terse because it sits next to the field, while the
+     * accessible name has to stand alone.
+     */
+    jumpToPageAriaLabel = input('Aller à la page', ...(ngDevMode ? [{ debugName: "jumpToPageAriaLabel" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Fires after any page or page-size change with the full paginator state. */
@@ -4504,6 +4944,9 @@ class SdsPaginator {
         const justify = this.showCurrentPageReport() ? 'justify-between' : 'justify-center';
         return `${base} ${justify}`;
     }, ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
+    pageLinkAriaLabel(page) {
+        return this.pageLinkLabel().replace('{page}', String(page + 1));
+    }
     navClass(isDisabled) {
         const cls = `${BTN_BASE} ${SIZES$1[this.size()]} px-0`;
         return isDisabled
@@ -4571,20 +5014,20 @@ class SdsPaginator {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsPaginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsPaginator, isStandalone: true, selector: "sds-paginator", inputs: { totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, pageLinkSize: { classPropertyName: "pageLinkSize", publicName: "pageLinkSize", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastIcon: { classPropertyName: "showFirstLastIcon", publicName: "showFirstLastIcon", isSignal: true, isRequired: false, transformFunction: null }, showPageLinks: { classPropertyName: "showPageLinks", publicName: "showPageLinks", isSignal: true, isRequired: false, transformFunction: null }, showCurrentPageReport: { classPropertyName: "showCurrentPageReport", publicName: "showCurrentPageReport", isSignal: true, isRequired: false, transformFunction: null }, currentPageReportTemplate: { classPropertyName: "currentPageReportTemplate", publicName: "currentPageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, showJumpToPageInput: { classPropertyName: "showJumpToPageInput", publicName: "showJumpToPageInput", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageLabel: { classPropertyName: "rowsPerPageLabel", publicName: "rowsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, jumpToPageLabel: { classPropertyName: "jumpToPageLabel", publicName: "jumpToPageLabel", 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 } }, outputs: { first: "firstChange", rows: "rowsChange", pageChange: "pageChange" }, host: { properties: { "class": "hostClass()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsPaginator, isStandalone: true, selector: "sds-paginator", inputs: { totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, pageLinkSize: { classPropertyName: "pageLinkSize", publicName: "pageLinkSize", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastIcon: { classPropertyName: "showFirstLastIcon", publicName: "showFirstLastIcon", isSignal: true, isRequired: false, transformFunction: null }, showPageLinks: { classPropertyName: "showPageLinks", publicName: "showPageLinks", isSignal: true, isRequired: false, transformFunction: null }, showCurrentPageReport: { classPropertyName: "showCurrentPageReport", publicName: "showCurrentPageReport", isSignal: true, isRequired: false, transformFunction: null }, currentPageReportTemplate: { classPropertyName: "currentPageReportTemplate", publicName: "currentPageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, showJumpToPageInput: { classPropertyName: "showJumpToPageInput", publicName: "showJumpToPageInput", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageLabel: { classPropertyName: "rowsPerPageLabel", publicName: "rowsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, jumpToPageLabel: { classPropertyName: "jumpToPageLabel", publicName: "jumpToPageLabel", isSignal: true, isRequired: false, transformFunction: null }, paginationLabel: { classPropertyName: "paginationLabel", publicName: "paginationLabel", isSignal: true, isRequired: false, transformFunction: null }, firstPageLabel: { classPropertyName: "firstPageLabel", publicName: "firstPageLabel", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: false, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: false, transformFunction: null }, lastPageLabel: { classPropertyName: "lastPageLabel", publicName: "lastPageLabel", isSignal: true, isRequired: false, transformFunction: null }, pageLinkLabel: { classPropertyName: "pageLinkLabel", publicName: "pageLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, jumpToPageAriaLabel: { classPropertyName: "jumpToPageAriaLabel", publicName: "jumpToPageAriaLabel", 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 } }, outputs: { first: "firstChange", rows: "rowsChange", pageChange: "pageChange" }, host: { properties: { "class": "hostClass()" } }, ngImport: i0, template: `
     @if (showCurrentPageReport()) {
       <span class="text-sm text-ink-soft">{{ reportText() }}</span>
     }
 
     <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
       <!-- page navigation -->
-      <nav class="flex items-center gap-1" aria-label="Pagination">
+      <nav class="flex items-center gap-1" [attr.aria-label]="paginationLabel()">
         @if (showFirstLastIcon()) {
           <button
             type="button"
             [class]="navClass(firstDisabled())"
             [disabled]="firstDisabled()"
-            aria-label="Première page"
+            [attr.aria-label]="firstPageLabel()"
             (click)="firstPage()"
           >
             <sds-icon name="chevrons-left" [size]="iconSize()" />
@@ -4594,7 +5037,7 @@ class SdsPaginator {
           type="button"
           [class]="navClass(firstDisabled())"
           [disabled]="firstDisabled()"
-          aria-label="Page précédente"
+          [attr.aria-label]="previousPageLabel()"
           (click)="prevPage()"
         >
           <sds-icon name="chevron-left" [size]="iconSize()" />
@@ -4605,7 +5048,7 @@ class SdsPaginator {
             <button
               type="button"
               [class]="linkClass(p === page())"
-              [attr.aria-label]="'Page ' + (p + 1)"
+              [attr.aria-label]="pageLinkAriaLabel(p)"
               [attr.aria-current]="p === page() ? 'page' : null"
               [disabled]="disabled()"
               (click)="changePage(p)"
@@ -4619,7 +5062,7 @@ class SdsPaginator {
           type="button"
           [class]="navClass(lastDisabled())"
           [disabled]="lastDisabled()"
-          aria-label="Page suivante"
+          [attr.aria-label]="nextPageLabel()"
           (click)="nextPage()"
         >
           <sds-icon name="chevron-right" [size]="iconSize()" />
@@ -4629,7 +5072,7 @@ class SdsPaginator {
             type="button"
             [class]="navClass(lastDisabled())"
             [disabled]="lastDisabled()"
-            aria-label="Dernière page"
+            [attr.aria-label]="lastPageLabel()"
             (click)="lastPage()"
           >
             <sds-icon name="chevrons-right" [size]="iconSize()" />
@@ -4644,7 +5087,7 @@ class SdsPaginator {
           <span class="w-20">
             <sds-select
               size="sm"
-              ariaLabel="Lignes par page"
+              [ariaLabel]="rowsPerPageLabel()"
               [options]="rowsPerPageOptions()"
               [ngModel]="rows()"
               (ngModelChange)="onRowsChange($event)"
@@ -4664,7 +5107,7 @@ class SdsPaginator {
             [max]="pageCount()"
             [value]="page() + 1"
             [disabled]="disabled()"
-            aria-label="Aller à la page"
+            [attr.aria-label]="jumpToPageAriaLabel()"
             (change)="onJump($event)"
             class="h-9 w-16 rounded-control border border-border bg-white px-2 text-center text-sm text-ink outline-none transition-colors focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25 disabled:opacity-60"
           />
@@ -4687,13 +5130,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
     <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
       <!-- page navigation -->
-      <nav class="flex items-center gap-1" aria-label="Pagination">
+      <nav class="flex items-center gap-1" [attr.aria-label]="paginationLabel()">
         @if (showFirstLastIcon()) {
           <button
             type="button"
             [class]="navClass(firstDisabled())"
             [disabled]="firstDisabled()"
-            aria-label="Première page"
+            [attr.aria-label]="firstPageLabel()"
             (click)="firstPage()"
           >
             <sds-icon name="chevrons-left" [size]="iconSize()" />
@@ -4703,7 +5146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           type="button"
           [class]="navClass(firstDisabled())"
           [disabled]="firstDisabled()"
-          aria-label="Page précédente"
+          [attr.aria-label]="previousPageLabel()"
           (click)="prevPage()"
         >
           <sds-icon name="chevron-left" [size]="iconSize()" />
@@ -4714,7 +5157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             <button
               type="button"
               [class]="linkClass(p === page())"
-              [attr.aria-label]="'Page ' + (p + 1)"
+              [attr.aria-label]="pageLinkAriaLabel(p)"
               [attr.aria-current]="p === page() ? 'page' : null"
               [disabled]="disabled()"
               (click)="changePage(p)"
@@ -4728,7 +5171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           type="button"
           [class]="navClass(lastDisabled())"
           [disabled]="lastDisabled()"
-          aria-label="Page suivante"
+          [attr.aria-label]="nextPageLabel()"
           (click)="nextPage()"
         >
           <sds-icon name="chevron-right" [size]="iconSize()" />
@@ -4738,7 +5181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             type="button"
             [class]="navClass(lastDisabled())"
             [disabled]="lastDisabled()"
-            aria-label="Dernière page"
+            [attr.aria-label]="lastPageLabel()"
             (click)="lastPage()"
           >
             <sds-icon name="chevrons-right" [size]="iconSize()" />
@@ -4753,7 +5196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           <span class="w-20">
             <sds-select
               size="sm"
-              ariaLabel="Lignes par page"
+              [ariaLabel]="rowsPerPageLabel()"
               [options]="rowsPerPageOptions()"
               [ngModel]="rows()"
               (ngModelChange)="onRowsChange($event)"
@@ -4773,7 +5216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             [max]="pageCount()"
             [value]="page() + 1"
             [disabled]="disabled()"
-            aria-label="Aller à la page"
+            [attr.aria-label]="jumpToPageAriaLabel()"
             (change)="onJump($event)"
             class="h-9 w-16 rounded-control border border-border bg-white px-2 text-center text-sm text-ink outline-none transition-colors focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25 disabled:opacity-60"
           />
@@ -4782,7 +5225,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     </div>
   `,
                 }]
-        }], propDecorators: { totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }, { type: i0.Output, args: ["firstChange"] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], pageLinkSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLinkSize", required: false }] }], showFirstLastIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastIcon", required: false }] }], showPageLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageLinks", required: false }] }], showCurrentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentPageReport", required: false }] }], currentPageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageReportTemplate", required: false }] }], showJumpToPageInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showJumpToPageInput", required: false }] }], rowsPerPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageLabel", required: false }] }], jumpToPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "jumpToPageLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
+        }], propDecorators: { totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }, { type: i0.Output, args: ["firstChange"] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], pageLinkSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLinkSize", required: false }] }], showFirstLastIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastIcon", required: false }] }], showPageLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageLinks", required: false }] }], showCurrentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentPageReport", required: false }] }], currentPageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageReportTemplate", required: false }] }], showJumpToPageInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showJumpToPageInput", required: false }] }], rowsPerPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageLabel", required: false }] }], jumpToPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "jumpToPageLabel", required: false }] }], paginationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationLabel", required: false }] }], firstPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstPageLabel", required: false }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: false }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: false }] }], lastPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastPageLabel", required: false }] }], pageLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLinkLabel", required: false }] }], jumpToPageAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "jumpToPageAriaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
 let nextId$2 = 0;
 /**
@@ -6226,7 +6669,7 @@ class SdsTable {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "component", type: SdsPaginator, selector: "sds-paginator", inputs: ["totalRecords", "first", "rows", "rowsPerPageOptions", "pageLinkSize", "showFirstLastIcon", "showPageLinks", "showCurrentPageReport", "currentPageReportTemplate", "showJumpToPageInput", "rowsPerPageLabel", "jumpToPageLabel", "size", "disabled"], outputs: ["firstChange", "rowsChange", "pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "component", type: SdsPaginator, selector: "sds-paginator", inputs: ["totalRecords", "first", "rows", "rowsPerPageOptions", "pageLinkSize", "showFirstLastIcon", "showPageLinks", "showCurrentPageReport", "currentPageReportTemplate", "showJumpToPageInput", "rowsPerPageLabel", "jumpToPageLabel", "paginationLabel", "firstPageLabel", "previousPageLabel", "nextPageLabel", "lastPageLabel", "pageLinkLabel", "jumpToPageAriaLabel", "size", "disabled"], outputs: ["firstChange", "rowsChange", "pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTable, decorators: [{
             type: Component,
@@ -7341,5 +7784,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, isOutOfRange, isSameDay, isoDay, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
+export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, isOutOfRange, isSameDay, isoDay, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map