@besaitech/ng-design-system 0.0.32 → 0.0.33

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

@@ -1474,6 +1474,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 +1727,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 +1760,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 +1844,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 +1863,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 +1892,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 +1976,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 +2019,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 +2191,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 +2208,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 +2242,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 +2253,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 +2268,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 +2278,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 +2297,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 +2328,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 +2362,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 +2373,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 +2388,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 +2398,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 +2419,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 +3847,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 +3931,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 +3962,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 +4250,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 +4273,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 +4314,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 +4336,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 +4363,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 +4414,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 +4455,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 +4477,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 +4504,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 +4521,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 +4570,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 +4627,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 +4697,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 +4720,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 +4731,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 +4745,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 +4755,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 +4770,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 +4790,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 +4813,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 +4829,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 +4840,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 +4854,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 +4864,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 +4879,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 +4899,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 +4908,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 +6352,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,