@besaitech/ng-design-system 0.0.53 → 0.0.55

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, numberAttribute, output, signal, forwardRef, viewChild, viewChildren, afterRenderEffect, model, ElementRef, Directive, Injector, contentChild, untracked, afterNextRender, TemplateRef, linkedSignal, Injectable, contentChildren, DestroyRef } from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, numberAttribute, output, signal, forwardRef, viewChild, viewChildren, afterRenderEffect, model, ElementRef, Directive, Injector, contentChild, untracked, afterNextRender, TemplateRef, linkedSignal, DestroyRef, Injectable, contentChildren } 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';
@@ -119,6 +119,10 @@ const SDS_ICONS = {
     'grip-vertical': '<circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/>',
     'upload': '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/>',
     'image': '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
+    // A photo that failed or is missing (sds-avatar fallbacks, photo trays).
+    'image-off': '<line x1="2" x2="22" y1="2" y2="22"/><path d="M10.41 10.41a2 2 0 1 1-2.83-2.83"/><line x1="13.5" x2="6" y1="13.5" y2="21"/><line x1="18" x2="21" y1="12" y2="15"/><path d="M3.59 3.59A1.99 1.99 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59"/><path d="M21 15V5a2 2 0 0 0-2-2H9"/>',
+    // Fork and knife: the placeholder of a menu item without a photo.
+    'utensils': '<path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/>',
     'zoom-in': '<circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/>',
     'zoom-out': '<circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/>',
     'trash-2': '<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/>',
@@ -218,7 +222,7 @@ const VARIANTS$2 = {
         'dark:hover:bg-white/10 dark:active:bg-white/15',
     danger: 'bg-danger text-white shadow-sm hover:brightness-95 active:brightness-90',
 };
-const SIZES$b = {
+const SIZES$c = {
     sm: 'h-8 px-3 text-sm',
     md: 'h-10 px-4 text-sm',
     lg: 'h-12 px-5 text-base',
@@ -278,7 +282,7 @@ class SdsButton {
             BASE,
             this.shape() === 'pill' ? 'rounded-full' : 'rounded-control',
             VARIANTS$2[this.variant()],
-            SIZES$b[size],
+            SIZES$c[size],
             this.iconOnly() ? ICON_ONLY[size] : '',
             this.block() ? 'w-full' : '',
         ]
@@ -330,8 +334,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$l = 0;
-const SIZES$a = {
+let nextId$n = 0;
+const SIZES$b = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
@@ -343,7 +347,7 @@ const SIZES$a = {
  * sidebar search field).
  */
 class SdsInput {
-    inputId = `sds-input-${nextId$l++}`;
+    inputId = `sds-input-${nextId$n++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -380,11 +384,10 @@ class SdsInput {
     /** Hard character cap on the native field; 0 means no limit. */
     maxLength = input(0, ...(ngDevMode ? [{ debugName: "maxLength", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     /**
-     * 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.
+     * Accessible name for the clear button. English default; 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', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    clearLabel = input('Clear', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
     leadingIcon = input(null, ...(ngDevMode ? [{ debugName: "leadingIcon" }] : []));
     trailingIcon = input(null, ...(ngDevMode ? [{ debugName: "trailingIcon" }] : []));
     /**
@@ -428,7 +431,7 @@ class SdsInput {
         return `${left} ${right}`;
     }, ...(ngDevMode ? [{ debugName: "fieldPadding" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$a[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
+        const parts = [SIZES$b[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
         if (this.isDisabled())
             parts.push('opacity-60 cursor-not-allowed');
         if (this.filled()) {
@@ -676,7 +679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 100000s ease-in-out 0s;-webkit-text-fill-color:currentColor;caret-color:currentColor}\n"] }]
         }], propDecorators: { 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 }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], trailingAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAction", required: false }] }], trailingActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionLabel", required: false }] }], trailingActionPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionPressed", required: false }] }], trailingActionClick: [{ type: i0.Output, args: ["trailingActionClick"] }] } });
 
-let nextId$k = 0;
+let nextId$m = 0;
 const HEIGHTS = {
     sm: 'h-9',
     md: 'h-10',
@@ -697,9 +700,14 @@ const TEXT = {
  * The field formats **live as you type**: the currency symbol, grouping separators and prefix/suffix
  * stay visible on every keystroke, and the caret is kept where it belongs. The value is clamped to
  * {@link min}/{@link max} on blur and on every spinner step; ArrowUp / ArrowDown also step it.
+ *
+ * In a locale whose decimal separator is a comma (fr-BE, nl-BE, de-DE…) a typed "." — the key most
+ * keyboards and numpads offer — is taken as the decimal separator: "12.50" becomes "12,50". Pasted
+ * text works the same way, except that a "." followed by exactly three digits in a locale that groups
+ * with "." ("1.234" in nl-BE) stays a thousands separator.
  */
 class SdsInputNumber {
-    inputId = `sds-input-number-${nextId$k++}`;
+    inputId = `sds-input-number-${nextId$m++}`;
     fieldRef = viewChild('field', ...(ngDevMode ? [{ debugName: "fieldRef" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -707,6 +715,13 @@ class SdsInputNumber {
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
     error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    /**
+     * Mark the field invalid (danger frame + `aria-invalid`) without showing an [error] message — for a
+     * host that renders the message itself, e.g. an editable table cell.
+     */
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Extra id(s) for the field's `aria-describedby`, added to its own hint/error message id. */
+    ariaDescribedby = input('', ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     /** `filled` is a borderless field on a muted ground; `default` is the bordered white field. */
     appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
@@ -743,22 +758,25 @@ class SdsInputNumber {
     allowEmpty = input(true, ...(ngDevMode ? [{ debugName: "allowEmpty", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
-     * Accessible names for the icon-only controls. French defaults so existing consumers are unchanged;
-     * translate them in a multi-language app.
+     * Accessible names for the icon-only controls. English defaults; translate them in a
+     * multi-language app.
      */
-    clearLabel = input('Effacer', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
-    incrementLabel = input('Augmenter', ...(ngDevMode ? [{ debugName: "incrementLabel" }] : []));
-    decrementLabel = input('Diminuer', ...(ngDevMode ? [{ debugName: "decrementLabel" }] : []));
+    clearLabel = input('Clear', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    incrementLabel = input('Increase', ...(ngDevMode ? [{ debugName: "incrementLabel" }] : []));
+    decrementLabel = input('Decrease', ...(ngDevMode ? [{ debugName: "decrementLabel" }] : []));
     /** The committed numeric value (driven by CVA + user input). */
     value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     describedBy = computed(() => {
+        const ids = [];
         if (this.error())
-            return `${this.inputId}-err`;
-        if (this.hint())
-            return `${this.inputId}-hint`;
-        return null;
+            ids.push(`${this.inputId}-err`);
+        else if (this.hint())
+            ids.push(`${this.inputId}-hint`);
+        if (this.ariaDescribedby())
+            ids.push(this.ariaDescribedby());
+        return ids.length ? ids.join(' ') : null;
     }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
     clearVisible = computed(() => this.clearable() && this.value() !== null && !this.isDisabled() && !this.readonly(), ...(ngDevMode ? [{ debugName: "clearVisible" }] : []));
     incrementIconName = computed(() => this.incrementIcon() ?? (this.buttonLayout() === 'stacked' ? 'chevron-up' : 'plus'), ...(ngDevMode ? [{ debugName: "incrementIconName" }] : []));
@@ -829,13 +847,13 @@ class SdsInputNumber {
             parts.push('opacity-60 cursor-not-allowed');
         if (this.appearance() === 'filled') {
             parts.push('border-transparent bg-muted text-ink');
-            parts.push(this.error()
+            parts.push(this.error() || this.invalid()
                 ? 'border-danger focus-within:ring-2 focus-within:ring-danger/30'
                 : 'focus-within:ring-2 focus-within:ring-brand-500/25');
         }
         else {
             parts.push('bg-surface text-ink');
-            parts.push(this.error()
+            parts.push(this.error() || this.invalid()
                 ? 'border-danger focus-within:border-danger focus-within:ring-2 focus-within:ring-danger/25'
                 : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
         }
@@ -964,6 +982,38 @@ class SdsInputNumber {
         const n = Number(s);
         return Number.isFinite(n) ? n : null;
     }
+    /**
+     * In a locale whose decimal separator is not "." (fr-BE, nl-BE, de-DE…), turn the "." people type
+     * for a decimal point into the locale separator before parsing, so "12.50" reads as 12.5.
+     * - `typed` is the text of the keystroke: a "." just typed sits right before the caret and is
+     *   always the decimal point (even in a locale that groups with ".", whose group marks come from
+     *   the formatter, never from the keyboard).
+     * - Otherwise (paste, autofill, programmatic input) and only when the text holds no locale decimal
+     *   separator, the last "." is the decimal point — unless the locale groups with "." and exactly
+     *   three digits follow it ("1.234" in nl-BE is one thousand two hundred thirty-four).
+     */
+    localizeDecimalPoint(raw, caret, typed) {
+        const { group, decimal } = this.separators();
+        if (decimal === '.' || !raw.includes('.') || this.maxFrac() === 0)
+            return raw;
+        if (typed === '.' && raw[caret - 1] === '.') {
+            return raw.slice(0, caret - 1) + decimal + raw.slice(caret);
+        }
+        // A keystroke without a "." leaves the formatter's own "." group marks alone.
+        if ((typed !== null && !typed.includes('.')) || raw.includes(decimal))
+            return raw;
+        // Only a "." inside the number counts, not one in a prefix/suffix (" sq.ft").
+        const prefix = this.prefix();
+        const suffix = this.suffix();
+        const start = prefix && raw.startsWith(prefix) ? prefix.length : 0;
+        const end = suffix && raw.endsWith(suffix) ? raw.length - suffix.length : raw.length;
+        const last = raw.lastIndexOf('.', end - 1);
+        if (last < start)
+            return raw;
+        if (group === '.' && /^\d{3}(?!\d)/.test(raw.slice(last + 1, end)))
+            return raw;
+        return raw.slice(0, last) + decimal + raw.slice(last + 1);
+    }
     /** Pull the sign / integer / fraction fragments out of a formatted, partially-typed string. */
     parseInput(raw) {
         const { group, decimal } = this.separators();
@@ -1032,8 +1082,12 @@ class SdsInputNumber {
     // --- Interaction ----------------------------------------------------------
     onInput(event) {
         const el = event.target;
-        const raw = el.value;
-        const caret = el.selectionStart ?? raw.length;
+        const caret = el.selectionStart ?? el.value.length;
+        // `data` is the keystroke's text; null/undefined for a paste, deletion or a synthetic event.
+        const data = event.data;
+        const kind = event.inputType;
+        const typed = data != null && (kind === 'insertText' || kind === 'insertCompositionText') ? data : null;
+        const raw = this.localizeDecimalPoint(el.value, caret, typed);
         const target = this.significantBefore(raw, caret);
         const parsed = this.parseInput(raw);
         if (parsed.intDigits === '' && parsed.fracDigits === '' && !parsed.hadDecimal) {
@@ -1116,7 +1170,7 @@ class SdsInputNumber {
         this.cvaDisabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsInputNumber, isStandalone: true, selector: "sds-input-number", 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, currencyDisplay: { classPropertyName: "currencyDisplay", publicName: "currencyDisplay", isSignal: true, isRequired: false, transformFunction: null }, useGrouping: { classPropertyName: "useGrouping", publicName: "useGrouping", isSignal: true, isRequired: false, transformFunction: null }, minFractionDigits: { classPropertyName: "minFractionDigits", publicName: "minFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, maxFractionDigits: { classPropertyName: "maxFractionDigits", publicName: "maxFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, buttonLayout: { classPropertyName: "buttonLayout", publicName: "buttonLayout", isSignal: true, isRequired: false, transformFunction: null }, incrementIcon: { classPropertyName: "incrementIcon", publicName: "incrementIcon", isSignal: true, isRequired: false, transformFunction: null }, decrementIcon: { classPropertyName: "decrementIcon", publicName: "decrementIcon", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsInputNumber, isStandalone: true, selector: "sds-input-number", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, currency: { classPropertyName: "currency", publicName: "currency", isSignal: true, isRequired: false, transformFunction: null }, currencyDisplay: { classPropertyName: "currencyDisplay", publicName: "currencyDisplay", isSignal: true, isRequired: false, transformFunction: null }, useGrouping: { classPropertyName: "useGrouping", publicName: "useGrouping", isSignal: true, isRequired: false, transformFunction: null }, minFractionDigits: { classPropertyName: "minFractionDigits", publicName: "minFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, maxFractionDigits: { classPropertyName: "maxFractionDigits", publicName: "maxFractionDigits", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", 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 }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, buttonLayout: { classPropertyName: "buttonLayout", publicName: "buttonLayout", isSignal: true, isRequired: false, transformFunction: null }, incrementIcon: { classPropertyName: "incrementIcon", publicName: "incrementIcon", isSignal: true, isRequired: false, transformFunction: null }, decrementIcon: { classPropertyName: "decrementIcon", publicName: "decrementIcon", isSignal: true, isRequired: false, transformFunction: null }, allowEmpty: { classPropertyName: "allowEmpty", publicName: "allowEmpty", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, incrementLabel: { classPropertyName: "incrementLabel", publicName: "incrementLabel", isSignal: true, isRequired: false, transformFunction: null }, decrementLabel: { classPropertyName: "decrementLabel", publicName: "decrementLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SdsInputNumber),
@@ -1169,7 +1223,7 @@ class SdsInputNumber {
           [disabled]="isDisabled()"
           [readOnly]="readonly()"
           [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
-          [attr.aria-invalid]="error() ? 'true' : null"
+          [attr.aria-invalid]="error() || invalid() ? 'true' : null"
           [attr.aria-describedby]="describedBy()"
           [attr.aria-valuenow]="value()"
           [attr.aria-valuemin]="min()"
@@ -1324,7 +1378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           [disabled]="isDisabled()"
           [readOnly]="readonly()"
           [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
-          [attr.aria-invalid]="error() ? 'true' : null"
+          [attr.aria-invalid]="error() || invalid() ? 'true' : null"
           [attr.aria-describedby]="describedBy()"
           [attr.aria-valuenow]="value()"
           [attr.aria-valuemin]="min()"
@@ -1418,9 +1472,579 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], buttonLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLayout", required: false }] }], incrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementIcon", required: false }] }], decrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementIcon", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], buttonLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLayout", required: false }] }], incrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementIcon", required: false }] }], decrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementIcon", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }] } });
 
-let nextId$j = 0;
+let nextId$l = 0;
+const SIZES$a = {
+    sm: 'h-9 text-sm',
+    md: 'h-10 text-sm',
+    lg: 'h-12 text-base',
+};
+const pad2$1 = (n) => String(n).padStart(2, '0');
+/** Parse `HH:mm` or `HH:mm:ss` (the seconds are ignored). Anything else is null. */
+function parseTime(value) {
+    if (typeof value !== 'string')
+        return null;
+    const match = /^(\d{1,2}):(\d{2})(?::\d{2}(?:\.\d+)?)?$/.exec(value.trim());
+    if (!match)
+        return null;
+    const h = Number(match[1]);
+    const m = Number(match[2]);
+    if (h > 23 || m > 59)
+        return null;
+    return { h, m };
+}
+/**
+ * Time-of-day field, 24-hour, whatever the browser's locale: two segments (hours : minutes) in one
+ * framed field, the value being a `"HH:mm"` string (or null) — the shape of a backend `LocalTime`.
+ * Implements ControlValueAccessor: use `formControlName` or `[(ngModel)]`.
+ *
+ * Unlike a native `<input type="time">` it never switches to a 12-hour clock with AM/PM, and it is themed
+ * like every other field (label, hint, error, sizes, `filled`, dark mode).
+ *
+ * Keyboard: type digits (the hours move on to the minutes by themselves after two digits, or one digit
+ * above 2); `:`/`.`/→ jump to the minutes, ← or Backspace on an empty minute go back; ↑/↓ step the hours
+ * by 1 and the minutes by [minuteStep] (wrapping, never carrying into the hour). Each segment is a
+ * `spinbutton` with its own accessible name. An hour typed without minutes gets `:00` when the field is
+ * left; emptying both segments sets null.
+ *
+ * @example
+ * <sds-time-input label="Opens at" formControlName="start" [minuteStep]="15" />
+ *
+ * @example
+ * <sds-time-input [ariaLabel]="'Closes at'" [ngModel]="end()" (ngModelChange)="end.set($event)" clearable />
+ */
+class SdsTimeInput {
+    fieldId = `sds-time-input-${nextId$l++}`;
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Accessible name of the field when there is no visible [label]. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** `filled` is borderless on a muted ground, like sds-input's `filled`. */
+    appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Show a clear button (sets null) while there is a value. */
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Leading clock icon. */
+    showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Minutes moved by ↑/↓ on the minutes segment (snaps to the step first). Default 1. */
+    minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Emit `HH:mm:ss` (seconds always `00`) instead of `HH:mm`. */
+    withSeconds = input(false, ...(ngDevMode ? [{ debugName: "withSeconds", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Placeholder of each empty segment. */
+    placeholderText = input('--', ...(ngDevMode ? [{ debugName: "placeholderText" }] : []));
+    /** Accessible name of the hours segment. English default — translate it. */
+    hoursLabel = input('Hours', ...(ngDevMode ? [{ debugName: "hoursLabel" }] : []));
+    /** Accessible name of the minutes segment. English default — translate it. */
+    minutesLabel = input('Minutes', ...(ngDevMode ? [{ debugName: "minutesLabel" }] : []));
+    /** Accessible name of the clear button. English default — translate it. */
+    clearLabel = input('Clear time', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    hoursEl = viewChild.required('hoursEl');
+    minutesEl = viewChild.required('minutesEl');
+    hours = signal(null, ...(ngDevMode ? [{ debugName: "hours" }] : []));
+    minutes = signal(null, ...(ngDevMode ? [{ debugName: "minutes" }] : []));
+    /** Raw text of a segment while it is being typed (null = show the committed value). */
+    hoursDraft = signal(null, ...(ngDevMode ? [{ debugName: "hoursDraft" }] : []));
+    minutesDraft = signal(null, ...(ngDevMode ? [{ debugName: "minutesDraft" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    hasValue = computed(() => this.hours() !== null || this.minutes() !== null, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    hoursText = computed(() => this.hoursDraft() ?? (this.hours() === null ? '' : pad2$1(this.hours())), ...(ngDevMode ? [{ debugName: "hoursText" }] : []));
+    minutesText = computed(() => this.minutesDraft() ?? (this.minutes() === null ? '' : pad2$1(this.minutes())), ...(ngDevMode ? [{ debugName: "minutesText" }] : []));
+    describedBy = computed(() => {
+        if (this.error())
+            return `${this.fieldId}-err`;
+        if (this.hint())
+            return `${this.fieldId}-hint`;
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    wrapperClasses = computed(() => {
+        const parts = [SIZES$a[this.size()], 'rounded-control'];
+        if (this.isDisabled())
+            parts.push('opacity-60 cursor-not-allowed');
+        if (this.appearance() === 'filled') {
+            parts.push('border-transparent bg-muted');
+            parts.push(this.error()
+                ? 'border-danger focus-within:ring-2 focus-within:ring-danger/30'
+                : 'focus-within:ring-2 focus-within:ring-brand-500/25');
+        }
+        else {
+            parts.push('bg-surface');
+            parts.push(this.error()
+                ? 'border-danger focus-within:border-danger focus-within:ring-2 focus-within:ring-danger/25'
+                : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
+        }
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+    pad(n) {
+        return pad2$1(n);
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        const t = parseTime(value);
+        this.hours.set(t ? t.h : null);
+        this.minutes.set(t ? t.m : null);
+        this.hoursDraft.set(null);
+        this.minutesDraft.set(null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    // --- typing ---------------------------------------------------------------
+    selectAll(event) {
+        const el = event.target;
+        queueMicrotask(() => el.select());
+    }
+    /** Clicking the frame (icon, padding) focuses the hours, like clicking a native field. */
+    onFrameClick(event) {
+        if (this.isDisabled())
+            return;
+        const target = event.target;
+        if (target.tagName !== 'INPUT' && !target.closest('button'))
+            this.hoursEl().nativeElement.focus();
+    }
+    onHoursInput(event) {
+        const el = event.target;
+        const text = el.value;
+        // A pasted/autofilled full time ("09:45", "9.45", "9h45") fills both segments.
+        if (/[:.h]/i.test(text)) {
+            const t = parseTime(text.replace(/[.h]/i, ':'));
+            if (t) {
+                this.commitHours(t.h);
+                this.commitMinutes(t.m);
+                this.syncSegments();
+                this.focusMinutes();
+                return;
+            }
+        }
+        const digits = text.replace(/\D/g, '');
+        if (digits === '') {
+            el.value = '';
+            this.hoursDraft.set('');
+            this.hours.set(null);
+            this.emitIfComplete();
+            return;
+        }
+        // How many leading digits make the hour: "9" is 09 (no hour starts with 3-9 and has a second digit);
+        // "1"/"2" wait for a second digit; "25" is 2 then 5 minutes. Whatever follows spills into minutes, so
+        // typing "945" in one go (or a fast/IME/autofill burst) still reads as 09:45.
+        let hourLength;
+        if (Number(digits[0]) > 2)
+            hourLength = 1;
+        else if (digits.length === 1)
+            hourLength = 0;
+        else
+            hourLength = Number(digits.slice(0, 2)) <= 23 ? 2 : 1;
+        if (hourLength === 0) {
+            el.value = digits;
+            this.hoursDraft.set(digits);
+            return;
+        }
+        this.commitHours(Number(digits.slice(0, hourLength)));
+        el.value = this.hoursText();
+        const rest = digits.slice(hourLength, hourLength + 2);
+        if (rest)
+            this.takeMinuteDigits(rest);
+        this.focusMinutes();
+    }
+    onMinutesInput(event) {
+        const el = event.target;
+        const digits = el.value.replace(/\D/g, '').slice(0, 2);
+        if (digits === '') {
+            el.value = '';
+            this.minutesDraft.set('');
+            this.minutes.set(null);
+            this.emitIfComplete();
+            return;
+        }
+        this.takeMinuteDigits(digits);
+        el.value = this.minutesText();
+    }
+    /** "7" (no minute starts with 6-9 and has a second digit) and any 2 digits commit; "0"-"5" wait. */
+    takeMinuteDigits(digits) {
+        if (digits.length >= 2 || Number(digits) > 5) {
+            this.commitMinutes(Math.min(59, Number(digits.slice(0, 2))));
+        }
+        else {
+            this.minutesDraft.set(digits);
+        }
+        this.minutesEl().nativeElement.value = this.minutesText();
+    }
+    /** Force both inputs to show the committed values (a binding does not repaint an unchanged value). */
+    syncSegments() {
+        this.hoursEl().nativeElement.value = this.hoursText();
+        this.minutesEl().nativeElement.value = this.minutesText();
+    }
+    onHoursKeydown(event) {
+        if (this.readonly())
+            return;
+        const el = event.target;
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowDown': {
+                event.preventDefault();
+                const delta = event.key === 'ArrowUp' ? 1 : -1;
+                const current = this.draftNumber(this.hoursDraft()) ?? this.hours();
+                const next = current === null ? (delta > 0 ? 0 : 23) : (current + delta + 24) % 24;
+                this.commitHours(next);
+                this.syncSegments();
+                break;
+            }
+            case ':':
+            case '.':
+            case 'h':
+                event.preventDefault();
+                this.flushHours();
+                this.syncSegments();
+                this.focusMinutes();
+                break;
+            case 'ArrowRight':
+                if (el.selectionStart === el.value.length) {
+                    event.preventDefault();
+                    this.flushHours();
+                    this.focusMinutes();
+                }
+                break;
+        }
+    }
+    onMinutesKeydown(event) {
+        if (this.readonly())
+            return;
+        const el = event.target;
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowDown': {
+                event.preventDefault();
+                const step = Math.max(1, Math.min(60, this.minuteStep()));
+                const current = this.draftNumber(this.minutesDraft()) ?? this.minutes();
+                let next;
+                if (current === null) {
+                    next = event.key === 'ArrowUp' ? 0 : 60 - step;
+                }
+                else if (event.key === 'ArrowUp') {
+                    next = (Math.floor(current / step) + 1) * step;
+                }
+                else {
+                    next = current % step === 0 ? current - step : Math.floor(current / step) * step;
+                }
+                this.commitMinutes(((next % 60) + 60) % 60);
+                this.syncSegments();
+                break;
+            }
+            case 'Backspace':
+                if (el.value === '') {
+                    event.preventDefault();
+                    this.focusHours();
+                }
+                break;
+            case 'ArrowLeft':
+                if (el.selectionStart === 0 && el.selectionEnd === 0) {
+                    event.preventDefault();
+                    this.flushMinutes();
+                    this.focusHours();
+                }
+                break;
+        }
+    }
+    /** Leaving the whole field completes a half-typed time and marks the control touched. */
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        const group = event.currentTarget;
+        if (next && group.contains(next))
+            return;
+        this.flushHours();
+        this.flushMinutes();
+        if (this.hours() !== null && this.minutes() === null)
+            this.commitMinutes(0);
+        else if (this.hours() === null && this.minutes() !== null)
+            this.commitHours(0);
+        this.syncSegments();
+        this.onTouched();
+    }
+    clear() {
+        this.hours.set(null);
+        this.minutes.set(null);
+        this.hoursDraft.set(null);
+        this.minutesDraft.set(null);
+        this.onChange(null);
+        this.onTouched();
+    }
+    // --- internals ------------------------------------------------------------
+    draftNumber(draft) {
+        return draft === null || draft === '' ? null : Number(draft);
+    }
+    flushHours() {
+        const d = this.hoursDraft();
+        if (d !== null && d !== '')
+            this.commitHours(Math.min(23, Number(d)));
+        else
+            this.hoursDraft.set(null);
+    }
+    flushMinutes() {
+        const d = this.minutesDraft();
+        if (d !== null && d !== '')
+            this.commitMinutes(Math.min(59, Number(d)));
+        else
+            this.minutesDraft.set(null);
+    }
+    commitHours(h) {
+        this.hours.set(h);
+        this.hoursDraft.set(null);
+        this.emitIfComplete();
+    }
+    commitMinutes(m) {
+        this.minutes.set(m);
+        this.minutesDraft.set(null);
+        this.emitIfComplete();
+    }
+    /** Emits `HH:mm` once both segments hold a value, and null once both are empty. */
+    emitIfComplete() {
+        const h = this.hours();
+        const m = this.minutes();
+        if (h !== null && m !== null) {
+            this.onChange(`${pad2$1(h)}:${pad2$1(m)}${this.withSeconds() ? ':00' : ''}`);
+        }
+        else if (h === null && m === null) {
+            this.onChange(null);
+        }
+    }
+    focusMinutes() {
+        const el = this.minutesEl().nativeElement;
+        el.focus();
+        el.select();
+    }
+    focusHours() {
+        const el = this.hoursEl().nativeElement;
+        el.focus();
+        el.select();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTimeInput, isStandalone: true, selector: "sds-time-input", inputs: { 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, withSeconds: { classPropertyName: "withSeconds", publicName: "withSeconds", isSignal: true, isRequired: false, transformFunction: null }, placeholderText: { classPropertyName: "placeholderText", publicName: "placeholderText", isSignal: true, isRequired: false, transformFunction: null }, hoursLabel: { classPropertyName: "hoursLabel", publicName: "hoursLabel", isSignal: true, isRequired: false, transformFunction: null }, minutesLabel: { classPropertyName: "minutesLabel", publicName: "minutesLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsTimeInput), multi: true },
+        ], viewQueries: [{ propertyName: "hoursEl", first: true, predicate: ["hoursEl"], descendants: true, isSignal: true }, { propertyName: "minutesEl", first: true, predicate: ["minutesEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label
+        [id]="fieldId + '-label'"
+        [for]="fieldId + '-h'"
+        class="mb-1.5 block text-sm font-medium text-ink"
+      >
+        {{ label() }}
+      </label>
+    }
+
+    <div
+      role="group"
+      [attr.aria-labelledby]="label() ? fieldId + '-label' : null"
+      [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+      [attr.aria-describedby]="describedBy()"
+      class="relative flex items-center border transition-colors"
+      [class]="wrapperClasses()"
+      (focusout)="onFocusOut($event)"
+      (click)="onFrameClick($event)"
+    >
+      @if (showIcon()) {
+        <sds-icon
+          name="clock"
+          [size]="16"
+          class="pointer-events-none ml-3 shrink-0 text-ink-faint"
+        />
+      }
+      <div class="flex items-center tabular-nums" [class]="showIcon() ? 'pl-2' : 'pl-3.5'">
+        <input
+          #hoursEl
+          [id]="fieldId + '-h'"
+          type="text"
+          inputmode="numeric"
+          autocomplete="off"
+          maxlength="5"
+          role="spinbutton"
+          aria-valuemin="0"
+          aria-valuemax="23"
+          [attr.aria-valuenow]="hours()"
+          [attr.aria-valuetext]="hours() === null ? null : pad(hours()!)"
+          [attr.aria-label]="hoursLabel()"
+          [attr.aria-invalid]="error() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [value]="hoursText()"
+          [placeholder]="placeholderText()"
+          [disabled]="isDisabled()"
+          [readOnly]="readonly()"
+          class="w-[2.6ch] bg-transparent text-center text-ink outline-none placeholder:text-ink-faint disabled:cursor-not-allowed"
+          (focus)="selectAll($event)"
+          (input)="onHoursInput($event)"
+          (keydown)="onHoursKeydown($event)"
+        />
+        <span class="px-px text-ink-soft" aria-hidden="true">:</span>
+        <input
+          #minutesEl
+          [id]="fieldId + '-m'"
+          type="text"
+          inputmode="numeric"
+          autocomplete="off"
+          maxlength="2"
+          role="spinbutton"
+          aria-valuemin="0"
+          aria-valuemax="59"
+          [attr.aria-valuenow]="minutes()"
+          [attr.aria-valuetext]="minutes() === null ? null : pad(minutes()!)"
+          [attr.aria-label]="minutesLabel()"
+          [attr.aria-invalid]="error() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [value]="minutesText()"
+          [placeholder]="placeholderText()"
+          [disabled]="isDisabled()"
+          [readOnly]="readonly()"
+          class="w-[2.6ch] bg-transparent text-center text-ink outline-none placeholder:text-ink-faint disabled:cursor-not-allowed"
+          (focus)="selectAll($event)"
+          (input)="onMinutesInput($event)"
+          (keydown)="onMinutesKeydown($event)"
+        />
+      </div>
+
+      @if (clearable() && hasValue() && !isDisabled() && !readonly()) {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="clearLabel()"
+          class="ml-auto mr-2 inline-flex h-6 w-6 items-center justify-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft dark:hover:bg-white/10"
+          (click)="clear()"
+        >
+          <sds-icon name="x" [size]="15" />
+        </button>
+      }
+    </div>
+
+    @if (error()) {
+      <p [id]="fieldId + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="fieldId + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTimeInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-time-input',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsTimeInput), multi: true },
+                    ],
+                    host: { class: 'block' },
+                    template: `
+    @if (label()) {
+      <label
+        [id]="fieldId + '-label'"
+        [for]="fieldId + '-h'"
+        class="mb-1.5 block text-sm font-medium text-ink"
+      >
+        {{ label() }}
+      </label>
+    }
+
+    <div
+      role="group"
+      [attr.aria-labelledby]="label() ? fieldId + '-label' : null"
+      [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+      [attr.aria-describedby]="describedBy()"
+      class="relative flex items-center border transition-colors"
+      [class]="wrapperClasses()"
+      (focusout)="onFocusOut($event)"
+      (click)="onFrameClick($event)"
+    >
+      @if (showIcon()) {
+        <sds-icon
+          name="clock"
+          [size]="16"
+          class="pointer-events-none ml-3 shrink-0 text-ink-faint"
+        />
+      }
+      <div class="flex items-center tabular-nums" [class]="showIcon() ? 'pl-2' : 'pl-3.5'">
+        <input
+          #hoursEl
+          [id]="fieldId + '-h'"
+          type="text"
+          inputmode="numeric"
+          autocomplete="off"
+          maxlength="5"
+          role="spinbutton"
+          aria-valuemin="0"
+          aria-valuemax="23"
+          [attr.aria-valuenow]="hours()"
+          [attr.aria-valuetext]="hours() === null ? null : pad(hours()!)"
+          [attr.aria-label]="hoursLabel()"
+          [attr.aria-invalid]="error() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [value]="hoursText()"
+          [placeholder]="placeholderText()"
+          [disabled]="isDisabled()"
+          [readOnly]="readonly()"
+          class="w-[2.6ch] bg-transparent text-center text-ink outline-none placeholder:text-ink-faint disabled:cursor-not-allowed"
+          (focus)="selectAll($event)"
+          (input)="onHoursInput($event)"
+          (keydown)="onHoursKeydown($event)"
+        />
+        <span class="px-px text-ink-soft" aria-hidden="true">:</span>
+        <input
+          #minutesEl
+          [id]="fieldId + '-m'"
+          type="text"
+          inputmode="numeric"
+          autocomplete="off"
+          maxlength="2"
+          role="spinbutton"
+          aria-valuemin="0"
+          aria-valuemax="59"
+          [attr.aria-valuenow]="minutes()"
+          [attr.aria-valuetext]="minutes() === null ? null : pad(minutes()!)"
+          [attr.aria-label]="minutesLabel()"
+          [attr.aria-invalid]="error() ? 'true' : null"
+          [attr.aria-describedby]="describedBy()"
+          [value]="minutesText()"
+          [placeholder]="placeholderText()"
+          [disabled]="isDisabled()"
+          [readOnly]="readonly()"
+          class="w-[2.6ch] bg-transparent text-center text-ink outline-none placeholder:text-ink-faint disabled:cursor-not-allowed"
+          (focus)="selectAll($event)"
+          (input)="onMinutesInput($event)"
+          (keydown)="onMinutesKeydown($event)"
+        />
+      </div>
+
+      @if (clearable() && hasValue() && !isDisabled() && !readonly()) {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="clearLabel()"
+          class="ml-auto mr-2 inline-flex h-6 w-6 items-center justify-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft dark:hover:bg-white/10"
+          (click)="clear()"
+        >
+          <sds-icon name="x" [size]="15" />
+        </button>
+      }
+    </div>
+
+    @if (error()) {
+      <p [id]="fieldId + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="fieldId + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], withSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSeconds", required: false }] }], placeholderText: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderText", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], hoursEl: [{ type: i0.ViewChild, args: ['hoursEl', { isSignal: true }] }], minutesEl: [{ type: i0.ViewChild, args: ['minutesEl', { isSignal: true }] }] } });
+
+let nextId$k = 0;
 const SIZES$9 = {
     sm: 'min-h-9 text-sm',
     md: 'min-h-10 text-sm',
@@ -1440,7 +2064,7 @@ const SIZES$9 = {
  * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
  */
 class SdsLocalizedInput {
-    inputId = `sds-localized-input-${nextId$j++}`;
+    inputId = `sds-localized-input-${nextId$k++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
@@ -1454,11 +2078,11 @@ class SdsLocalizedInput {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
      * Accessible name for the in-field language switcher, and the "no translation yet" title suffix on each
-     * language button. French defaults so existing consumers are unchanged; translate them in a multi-language
-     * app (the buttons are letter-only, so the title carries their meaning).
+     * language button. English defaults; translate them in a multi-language app (the buttons are
+     * letter-only, so the title carries their meaning).
      */
-    languageSwitcherLabel = input('Langue', ...(ngDevMode ? [{ debugName: "languageSwitcherLabel" }] : []));
-    untranslatedLabel = input('à traduire', ...(ngDevMode ? [{ debugName: "untranslatedLabel" }] : []));
+    languageSwitcherLabel = input('Language', ...(ngDevMode ? [{ debugName: "languageSwitcherLabel" }] : []));
+    untranslatedLabel = input('not translated yet', ...(ngDevMode ? [{ debugName: "untranslatedLabel" }] : []));
     valueMap = signal({}, ...(ngDevMode ? [{ debugName: "valueMap" }] : []));
     /** Language chosen via the switcher; null means "follow currentLanguage / the first language". */
     manual = signal(null, ...(ngDevMode ? [{ debugName: "manual" }] : []));
@@ -1696,7 +2320,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 }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], currentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLanguage", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], languageSwitcherLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageSwitcherLabel", required: false }] }], untranslatedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "untranslatedLabel", required: false }] }] } });
 
-let nextId$i = 0;
+let nextId$j = 0;
 const SIZES$8 = {
     md: 'h-12 w-11 text-lg',
     lg: 'h-14 w-12 text-xl',
@@ -1713,7 +2337,7 @@ const SIZES$8 = {
  * first box and have it land correctly.
  */
 class SdsOtpInput {
-    groupId = `sds-otp-${nextId$i++}`;
+    groupId = `sds-otp-${nextId$j++}`;
     /** How many boxes / characters the code has. */
     length = input(6, ...(ngDevMode ? [{ debugName: "length", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -1729,10 +2353,10 @@ class SdsOtpInput {
     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.
+     * 2", …). English default; 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" }] : []));
+    cellLabel = input('Digit', ...(ngDevMode ? [{ debugName: "cellLabel" }] : []));
     /** Emitted with the full value the moment the last box is filled. */
     completed = output();
     cells = viewChildren('cell', ...(ngDevMode ? [{ debugName: "cells" }] : []));
@@ -2013,7 +2637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], cellLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellLabel", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], cells: [{ type: i0.ViewChildren, args: ['cell', { isSignal: true }] }] } });
 
-let nextId$h = 0;
+let nextId$i = 0;
 const SIZES$7 = {
     sm: 'text-sm px-3 py-2',
     md: 'text-sm px-3.5 py-2.5',
@@ -2025,7 +2649,7 @@ const SIZES$7 = {
  * [(ngModel)].
  */
 class SdsTextarea {
-    fieldId = `sds-textarea-${nextId$h++}`;
+    fieldId = `sds-textarea-${nextId$i++}`;
     field = viewChild('field', ...(ngDevMode ? [{ debugName: "field" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -2050,6 +2674,13 @@ class SdsTextarea {
     maxLength = input(0, ...(ngDevMode ? [{ debugName: "maxLength", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     /** Show a character counter row. */
     showCount = input(false, ...(ngDevMode ? [{ debugName: "showCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Spoken text of the counter when {@link maxLength} is set; tokens `{count}` and `{max}`. English
+     * default — translate it in a multi-language app.
+     */
+    countLimitLabel = input('{count} of {max} characters used', ...(ngDevMode ? [{ debugName: "countLimitLabel" }] : []));
+    /** Spoken text of the counter without a {@link maxLength}; token `{count}`. */
+    countLabelTemplate = input('{count} characters', ...(ngDevMode ? [{ debugName: "countLabelTemplate" }] : []));
     resize = input('vertical', ...(ngDevMode ? [{ debugName: "resize" }] : []));
     /** Current value (driven by CVA + user input). */
     value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -2058,9 +2689,9 @@ class SdsTextarea {
     count = computed(() => this.value().length, ...(ngDevMode ? [{ debugName: "count" }] : []));
     hasCounter = computed(() => this.showCount() || this.maxLength() > 0, ...(ngDevMode ? [{ debugName: "hasCounter" }] : []));
     /** Spoken description of the counter for assistive tech. */
-    countLabel = computed(() => this.maxLength()
-        ? `${this.count()} sur ${this.maxLength()} caractères utilisés`
-        : `${this.count()} caractère(s)`, ...(ngDevMode ? [{ debugName: "countLabel" }] : []));
+    countLabel = computed(() => (this.maxLength() ? this.countLimitLabel() : this.countLabelTemplate())
+        .replace('{count}', String(this.count()))
+        .replace('{max}', String(this.maxLength())), ...(ngDevMode ? [{ debugName: "countLabel" }] : []));
     describedBy = computed(() => {
         const ids = [];
         if (this.error())
@@ -2137,7 +2768,7 @@ class SdsTextarea {
         el.style.height = `${el.scrollHeight}px`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTextarea, isStandalone: true, selector: "sds-textarea", 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTextarea, isStandalone: true, selector: "sds-textarea", 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, countLimitLabel: { classPropertyName: "countLimitLabel", publicName: "countLimitLabel", isSignal: true, isRequired: false, transformFunction: null }, countLabelTemplate: { classPropertyName: "countLabelTemplate", publicName: "countLabelTemplate", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SdsTextarea),
@@ -2276,9 +2907,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], countLimitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLimitLabel", required: false }] }], countLabelTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLabelTemplate", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }] } });
 
-let nextId$g = 0;
+let nextId$h = 0;
 const SIZES$6 = {
     sm: { track: 'h-5 w-9', knob: 'h-4 w-4', on: 'translate-x-4', icon: 11 },
     md: { track: 'h-6 w-11', knob: 'h-5 w-5', on: 'translate-x-5', icon: 13 },
@@ -2291,7 +2922,7 @@ const SIZES$6 = {
  * states.
  */
 class SdsToggleSwitch {
-    fieldId = `sds-toggle-switch-${nextId$g++}`;
+    fieldId = `sds-toggle-switch-${nextId$h++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -2535,7 +3166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], trueValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "trueValue", required: false }] }], falseValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "falseValue", required: false }] }], onIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "onIcon", required: false }] }], offIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "offIcon", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
 
-let nextId$f = 0;
+let nextId$g = 0;
 /**
  * Boolean checkbox. Implements ControlValueAccessor — use with reactive forms
  * or `[(ngModel)]`. Renders a styled box (brand-filled with a check when on)
@@ -2543,24 +3174,33 @@ let nextId$f = 0;
  * of its own, so it can sit inside the consumer's `<label>` (a whole clickable
  * row), whose text then names it.
  *
+ * Set [indeterminate] for a "some but not all" state (e.g. a select-all box over a partial
+ * selection): the box shows a bar and reads as "mixed"; a click checks it.
+ *
  * @example
- * <sds-checkbox label="Fusion automatique" [(ngModel)]="autoMerge" />
+ * <sds-checkbox label="Auto-merge" [(ngModel)]="autoMerge" />
  */
 class SdsCheckbox {
-    id = `sds-checkbox-${nextId$f++}`;
+    id = `sds-checkbox-${nextId$g++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * "Some but not all": shows a bar and is announced as mixed while the value is false. Clicking
+     * checks it (the native behaviour); the host then decides the next [indeterminate].
+     */
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     checked = signal(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    mixed = computed(() => this.indeterminate() && !this.checked(), ...(ngDevMode ? [{ debugName: "mixed" }] : []));
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     iconSize = computed(() => (this.size() === 'sm' ? 11 : 13), ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
     stateClasses = computed(() => this.isDisabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer', ...(ngDevMode ? [{ debugName: "stateClasses" }] : []));
     boxClasses = computed(() => {
         const size = this.size() === 'sm' ? 'h-4 w-4' : 'h-5 w-5';
-        const state = this.checked()
+        const state = this.checked() || this.mixed()
             ? 'border-brand-600 bg-brand-600 text-white'
             : 'border-border bg-surface text-transparent';
         const focus = 'focus-within:ring-2 focus-within:ring-brand-500/30 focus-within:border-brand-500';
@@ -2587,7 +3227,7 @@ class SdsCheckbox {
         this.onChange(next);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsCheckbox, isStandalone: true, selector: "sds-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 } }, host: { classAttribute: "inline-flex" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsCheckbox, isStandalone: true, selector: "sds-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex align-middle" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SdsCheckbox),
@@ -2617,6 +3257,7 @@ class SdsCheckbox {
           class="absolute inset-0 m-0 cursor-[inherit] opacity-0"
           [id]="id"
           [checked]="checked()"
+          [indeterminate]="mixed()"
           [disabled]="isDisabled()"
           [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
           (change)="onInput($event)"
@@ -2624,6 +3265,8 @@ class SdsCheckbox {
         />
         @if (checked()) {
           <sds-icon name="check" [size]="iconSize()" [strokeWidth]="3" />
+        } @else if (mixed()) {
+          <span class="h-0.5 w-2.5 rounded-full bg-current" aria-hidden="true"></span>
         }
       </span>
     </ng-template>
@@ -2642,7 +3285,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             multi: true,
                         },
                     ],
-                    host: { class: 'inline-flex' },
+                    // align-middle: in an inline context (a table cell) an empty box and a checked one would otherwise
+                    // sit on different baselines, and the row would jump by a few pixels on every toggle.
+                    host: { class: 'inline-flex align-middle' },
                     template: `
     <!-- With a visible label the whole thing is a <label>. Without one it is a plain span, so the box can
          sit inside the consumer's own <label> (a clickable row, say) without nesting labels. -->
@@ -2667,6 +3312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           class="absolute inset-0 m-0 cursor-[inherit] opacity-0"
           [id]="id"
           [checked]="checked()"
+          [indeterminate]="mixed()"
           [disabled]="isDisabled()"
           [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
           (change)="onInput($event)"
@@ -2674,14 +3320,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         />
         @if (checked()) {
           <sds-icon name="check" [size]="iconSize()" [strokeWidth]="3" />
+        } @else if (mixed()) {
+          <span class="h-0.5 w-2.5 rounded-full bg-current" aria-hidden="true"></span>
         }
       </span>
     </ng-template>
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
 
-let nextId$e = 0;
+let nextId$f = 0;
 /**
  * Mounted radios by group name. A pick updates the rest of its group, because a native radio says
  * nothing when the browser unchecks it — without this a reactive form would leave the old choice drawn.
@@ -2707,7 +3355,7 @@ const groups = new Map();
  * <sds-radio name="size" value="large" label="Grand" [(ngModel)]="size" />
  */
 class SdsRadio {
-    id = `sds-radio-${nextId$e++}`;
+    id = `sds-radio-${nextId$f++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -2890,8 +3538,30 @@ const STATUS_COLOR = {
     busy: 'bg-danger',
     away: 'bg-warning',
 };
+const SHAPE = {
+    circle: 'rounded-full',
+    rounded: 'rounded-control',
+    square: 'rounded-none',
+};
 /**
- * Circular avatar showing an image or initials, with an optional status dot.
+ * Avatar showing an image, initials or a placeholder icon, with an optional status dot.
+ *
+ * - `shape`: `circle` (default, people), `rounded` (things: a dish photo, a product, a logo) or `square`.
+ * - `fallbackIcon`: shown instead of initials when there is no image (or it fails to load) — e.g.
+ *   `utensils` or `image` for a menu item without a photo. The placeholder is drawn on `placeholderClass`
+ *   (a muted tile by default), not on the initials' brand fill.
+ * - A broken `src` falls back to the icon or the initials instead of showing the browser's broken-image
+ *   glyph; a new `src` retries.
+ * - `decorative`: the avatar only repeats a name that is already written next to it (a list row, a select
+ *   option), so the image gets `alt=""` and the whole avatar is hidden from assistive technology.
+ *
+ * @example
+ * <sds-avatar name="Ada Lovelace" [src]="user.photoUrl" status="online" />
+ *
+ * @example
+ * <!-- a menu item in a list: rounded photo, dish placeholder when there is none -->
+ * <sds-avatar shape="rounded" [size]="32" [src]="item.thumbnailUrl" [name]="item.name"
+ *             fallbackIcon="utensils" decorative />
  */
 class SdsAvatar {
     name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
@@ -2899,8 +3569,48 @@ class SdsAvatar {
     src = input(null, ...(ngDevMode ? [{ debugName: "src" }] : []));
     size = input(36, ...(ngDevMode ? [{ debugName: "size" }] : []));
     status = input(null, ...(ngDevMode ? [{ debugName: "status" }] : []));
+    /** `circle` (default), `rounded` (radius of a control) or `square`. */
+    shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : []));
     /** Tailwind bg utility for the initials background. */
     bgClass = input('bg-brand-400', ...(ngDevMode ? [{ debugName: "bgClass" }] : []));
+    /**
+     * Icon shown instead of initials when there is no usable image (e.g. `utensils` or `image` for a dish).
+     * Null (default) keeps the initials.
+     */
+    fallbackIcon = input(null, ...(ngDevMode ? [{ debugName: "fallbackIcon" }] : []));
+    /** Classes of the placeholder tile behind {@link fallbackIcon}: background and icon colour. */
+    placeholderClass = input('bg-muted text-ink-faint', ...(ngDevMode ? [{ debugName: "placeholderClass" }] : []));
+    /**
+     * The avatar repeats a name already visible beside it: `alt=""` and `aria-hidden`, so a screen reader
+     * does not read the name twice.
+     */
+    decorative = input(false, ...(ngDevMode ? [{ debugName: "decorative", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Native lazy loading for the image (default on — avatars are often in long lists). */
+    lazy = input(true, ...(ngDevMode ? [{ debugName: "lazy", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** The `src` that failed to load. Any other `src` is tried (so a new photo URL retries). */
+    failedSrc = signal(undefined, ...(ngDevMode ? [{ debugName: "failedSrc" }] : []));
+    showImage = computed(() => {
+        const src = this.src();
+        return !!src && src !== this.failedSrc();
+    }, ...(ngDevMode ? [{ debugName: "showImage" }] : []));
+    shapeClass = computed(() => SHAPE[this.shape()], ...(ngDevMode ? [{ debugName: "shapeClass" }] : []));
+    frameClass = computed(() => {
+        const parts = [this.shapeClass()];
+        if (this.showImage()) {
+            parts.push('bg-muted');
+        }
+        else if (this.fallbackIcon()) {
+            parts.push(this.placeholderClass());
+        }
+        else {
+            parts.push(this.bgClass(), 'text-white');
+        }
+        // People get the soft ring the avatar always had; things get a hairline so a white plate on a white
+        // page still has an edge.
+        parts.push(this.shape() === 'circle' ? 'ring-2 ring-white/20' : 'ring-1 ring-inset ring-border');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "frameClass" }] : []));
+    iconSize = computed(() => Math.max(12, Math.round(this.size() * 0.5)), ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
     dotSize = computed(() => Math.max(8, Math.round(this.size() * 0.28)), ...(ngDevMode ? [{ debugName: "dotSize" }] : []));
     statusColor = computed(() => this.status() ? STATUS_COLOR[this.status()] : '', ...(ngDevMode ? [{ debugName: "statusColor" }] : []));
     resolvedInitials = computed(() => {
@@ -2914,19 +3624,31 @@ class SdsAvatar {
         return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
     }, ...(ngDevMode ? [{ debugName: "resolvedInitials" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsAvatar, isStandalone: true, selector: "sds-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, bgClass: { classPropertyName: "bgClass", publicName: "bgClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-block shrink-0 align-middle" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsAvatar, isStandalone: true, selector: "sds-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, bgClass: { classPropertyName: "bgClass", publicName: "bgClass", isSignal: true, isRequired: false, transformFunction: null }, fallbackIcon: { classPropertyName: "fallbackIcon", publicName: "fallbackIcon", isSignal: true, isRequired: false, transformFunction: null }, placeholderClass: { classPropertyName: "placeholderClass", publicName: "placeholderClass", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "decorative() ? 'true' : null" }, classAttribute: "inline-block shrink-0 align-middle" }, ngImport: i0, template: `
     <div
-      class="relative grid place-items-center overflow-hidden rounded-full font-semibold text-white ring-2 ring-white/20"
-      [class]="bgClass()"
+      class="relative grid place-items-center font-semibold"
+      [class]="frameClass()"
       [style.width.px]="size()"
       [style.height.px]="size()"
       [style.fontSize.px]="size() * 0.4"
     >
-      @if (src()) {
-        <img [src]="src()" [alt]="name()" class="h-full w-full object-cover" />
-      } @else {
-        <span>{{ resolvedInitials() }}</span>
-      }
+      <!-- The image and placeholder are clipped to the shape; the status dot is not (it straddles the edge). -->
+      <div class="absolute inset-0 grid place-items-center overflow-hidden" [class]="shapeClass()">
+        @if (showImage()) {
+          <img
+            [src]="src()"
+            [alt]="decorative() ? '' : name()"
+            [attr.loading]="lazy() ? 'lazy' : null"
+            decoding="async"
+            class="h-full w-full object-cover"
+            (error)="failedSrc.set(src())"
+          />
+        } @else if (fallbackIcon()) {
+          <sds-icon [name]="fallbackIcon()!" [size]="iconSize()" />
+        } @else {
+          <span>{{ resolvedInitials() }}</span>
+        }
+      </div>
 
       @if (status()) {
         <span
@@ -2937,27 +3659,43 @@ class SdsAvatar {
         ></span>
       }
     </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsAvatar, decorators: [{
             type: Component,
             args: [{
                     selector: 'sds-avatar',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'inline-block shrink-0 align-middle' },
+                    imports: [SdsIcon],
+                    host: {
+                        class: 'inline-block shrink-0 align-middle',
+                        '[attr.aria-hidden]': "decorative() ? 'true' : null",
+                    },
                     template: `
     <div
-      class="relative grid place-items-center overflow-hidden rounded-full font-semibold text-white ring-2 ring-white/20"
-      [class]="bgClass()"
+      class="relative grid place-items-center font-semibold"
+      [class]="frameClass()"
       [style.width.px]="size()"
       [style.height.px]="size()"
       [style.fontSize.px]="size() * 0.4"
     >
-      @if (src()) {
-        <img [src]="src()" [alt]="name()" class="h-full w-full object-cover" />
-      } @else {
-        <span>{{ resolvedInitials() }}</span>
-      }
+      <!-- The image and placeholder are clipped to the shape; the status dot is not (it straddles the edge). -->
+      <div class="absolute inset-0 grid place-items-center overflow-hidden" [class]="shapeClass()">
+        @if (showImage()) {
+          <img
+            [src]="src()"
+            [alt]="decorative() ? '' : name()"
+            [attr.loading]="lazy() ? 'lazy' : null"
+            decoding="async"
+            class="h-full w-full object-cover"
+            (error)="failedSrc.set(src())"
+          />
+        } @else if (fallbackIcon()) {
+          <sds-icon [name]="fallbackIcon()!" [size]="iconSize()" />
+        } @else {
+          <span>{{ resolvedInitials() }}</span>
+        }
+      </div>
 
       @if (status()) {
         <span
@@ -2970,7 +3708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     </div>
   `,
                 }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], bgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgClass", required: false }] }] } });
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], bgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgClass", required: false }] }], fallbackIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackIcon", required: false }] }], placeholderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderClass", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }] } });
 
 const VARIANTS$1 = {
     neutral: 'bg-muted text-ink-soft border-border',
@@ -3193,7 +3931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 /** Activation order: none → contains → may-contain → none. */
 const ORDER = ['none', 'contains', 'may-contain'];
-let nextId$d = 0;
+let nextId$e = 0;
 /**
  * A chip that cycles through three states — `none`, `contains`, `may-contain` — built for the 14-tile
  * allergen declaration grid, but generic (any "no / yes / maybe" declaration).
@@ -3213,7 +3951,7 @@ let nextId$d = 0;
  *                     containsLabel="Contains" mayContainLabel="May contain" noneLabel="Not present" />
  */
 class SdsTriStateChip {
-    chipId = `sds-tri-state-chip-${nextId$d++}`;
+    chipId = `sds-tri-state-chip-${nextId$e++}`;
     /** Current state. Two-way: `[(value)]`. */
     value = model('none', ...(ngDevMode ? [{ debugName: "value" }] : []));
     /** Visible name (e.g. the allergen). Required — the chip has no other accessible name. */
@@ -3435,7 +4173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showState: [{ type: i0.Input, args: [{ isSignal: true, alias: "showState", required: false }] }], noneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noneLabel", required: false }] }], containsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "containsLabel", required: false }] }], mayContainLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mayContainLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
 
-let nextId$c = 0;
+let nextId$d = 0;
 /**
  * Segmented control: a small set of mutually exclusive options shown side by side (e.g. "Pick exactly /
  * at least / up to"). Radio-group semantics: `role="radiogroup"` with `role="radio"` segments, one tab
@@ -3451,7 +4189,7 @@ let nextId$c = 0;
  */
 class SdsSegmented {
     host = inject(ElementRef);
-    baseId = `sds-segmented-${nextId$c++}`;
+    baseId = `sds-segmented-${nextId$d++}`;
     /** Options: `{ value, label, icon?, disabled? }` objects, or bare strings/numbers. */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     /** Selected value. Two-way: `[(value)]`. */
@@ -3496,17 +4234,347 @@ class SdsSegmented {
             ? `${base} bg-surface font-semibold text-ink shadow-sm ring-1 ring-border dark:bg-border`
             : `${base} cursor-pointer text-ink-soft hover:bg-surface/60 hover:text-ink`;
     }
-    choose(i) {
-        const seg = this.segments()[i];
-        if (!seg || seg.disabled || this.disabled())
+    choose(i) {
+        const seg = this.segments()[i];
+        if (!seg || seg.disabled || this.disabled())
+            return;
+        this.value.set(seg.value);
+    }
+    onKeydown(event) {
+        if (this.disabled())
+            return;
+        const segs = this.segments();
+        if (!segs.length)
+            return;
+        const current = Number(event.target.dataset['index'] ?? this.tabStop());
+        let next = null;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                next = this.step(current, 1);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                next = this.step(current, -1);
+                break;
+            case 'Home':
+                next = segs.findIndex((s) => !s.disabled);
+                break;
+            case 'End':
+                for (let i = segs.length - 1; i >= 0; i--) {
+                    if (!segs[i].disabled) {
+                        next = i;
+                        break;
+                    }
+                }
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (next === null || next < 0)
+            return;
+        this.choose(next);
+        this.host.nativeElement.querySelector(`#${this.segmentId(next)}`)?.focus();
+    }
+    step(from, delta) {
+        const segs = this.segments();
+        let i = from;
+        for (let n = 0; n < segs.length; n++) {
+            i = (i + delta + segs.length) % segs.length;
+            if (!segs[i].disabled)
+                return i;
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSegmented, isStandalone: true, selector: "sds-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.w-full": "fullWidth()" }, classAttribute: "inline-flex max-w-full" }, ngImport: i0, template: `
+    <div
+      role="radiogroup"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledby() || null"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
+      class="flex max-w-full items-stretch gap-0.5 overflow-x-auto rounded-control border border-border bg-muted p-0.5"
+      [class.w-full]="fullWidth()"
+      (keydown)="onKeydown($event)"
+    >
+      @for (seg of segments(); track $index; let i = $index) {
+        <button
+          type="button"
+          role="radio"
+          [id]="segmentId(i)"
+          [attr.aria-checked]="isSelected(seg)"
+          [attr.aria-label]="iconOnly() ? seg.label : null"
+          [attr.title]="iconOnly() ? seg.label : null"
+          [attr.tabindex]="i === tabStop() ? 0 : -1"
+          [attr.data-index]="i"
+          [disabled]="disabled() || seg.disabled"
+          [class]="segmentClass(seg)"
+          (click)="choose(i)"
+        >
+          @if (seg.icon) {
+            <sds-icon [name]="seg.icon" [size]="size() === 'sm' ? 15 : 17" class="shrink-0" />
+          }
+          @if (!iconOnly()) {
+            <span class="truncate">{{ seg.label }}</span>
+          }
+        </button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSegmented, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-segmented',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
+                    host: { class: 'inline-flex max-w-full', '[class.w-full]': 'fullWidth()' },
+                    template: `
+    <div
+      role="radiogroup"
+      [attr.aria-label]="ariaLabel() || null"
+      [attr.aria-labelledby]="ariaLabelledby() || null"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
+      class="flex max-w-full items-stretch gap-0.5 overflow-x-auto rounded-control border border-border bg-muted p-0.5"
+      [class.w-full]="fullWidth()"
+      (keydown)="onKeydown($event)"
+    >
+      @for (seg of segments(); track $index; let i = $index) {
+        <button
+          type="button"
+          role="radio"
+          [id]="segmentId(i)"
+          [attr.aria-checked]="isSelected(seg)"
+          [attr.aria-label]="iconOnly() ? seg.label : null"
+          [attr.title]="iconOnly() ? seg.label : null"
+          [attr.tabindex]="i === tabStop() ? 0 : -1"
+          [attr.data-index]="i"
+          [disabled]="disabled() || seg.disabled"
+          [class]="segmentClass(seg)"
+          (click)="choose(i)"
+        >
+          @if (seg.icon) {
+            <sds-icon [name]="seg.icon" [size]="size() === 'sm' ? 15 : 17" class="shrink-0" />
+          }
+          @if (!iconOnly()) {
+            <span class="truncate">{{ seg.label }}</span>
+          }
+        </button>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
+
+const SIZE = {
+    sm: 'h-7 gap-1 px-2.5 text-xs',
+    md: 'h-8 gap-1.5 px-3 text-sm',
+};
+/**
+ * Chip look shared by sds-chip and sds-chip-group. Selected is more than a tint — a brand border, bolder
+ * text and (by default) a check — so it reads in greyscale too. In dark mode the brand text/tint are
+ * swapped for ink/muted (the library's rule for a monochrome brand's dark ramp).
+ */
+function chipClass(size, selected) {
+    const base = 'inline-flex shrink-0 select-none items-center whitespace-nowrap rounded-full border font-medium ' +
+        'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 ' +
+        'focus-visible:ring-offset-1 focus-visible:ring-offset-surface disabled:cursor-not-allowed disabled:opacity-50 ' +
+        SIZE[size];
+    return selected
+        ? `${base} cursor-pointer border-brand-600 bg-brand-50 font-semibold text-brand-700 ` +
+            'dark:border-ink-soft dark:bg-muted dark:text-ink'
+        : `${base} cursor-pointer border-border bg-surface text-ink-soft hover:border-ink-faint hover:text-ink`;
+}
+const COUNT_CLASS = 'inline-flex min-w-5 items-center justify-center rounded-full bg-ink/5 px-1.5 text-[11px] font-semibold tabular-nums dark:bg-white/10';
+/**
+ * A single on/off filter chip (`aria-pressed`), e.g. "Sold out only" or "With comments". Two-way
+ * `[(selected)]`. For a set of chips — one or several picked — use `sds-chip-group`.
+ *
+ * @example
+ * <sds-chip label="Sold out only" icon="ban" [(selected)]="soldOutOnly" />
+ */
+class SdsChip {
+    /** Visible text — also the chip's accessible name. */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** On/off. Two-way: `[(selected)]`. */
+    selected = model(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    count = input(null, ...(ngDevMode ? [{ debugName: "count" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Replace the icon with a check while selected. */
+    showCheck = input(true, ...(ngDevMode ? [{ debugName: "showCheck", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    countClass = COUNT_CLASS;
+    classes = computed(() => chipClass(this.size(), this.selected()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsChip, isStandalone: true, selector: "sds-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", 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 }, showCheck: { classPropertyName: "showCheck", publicName: "showCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, host: { classAttribute: "inline-flex" }, ngImport: i0, template: `
+    <button
+      type="button"
+      [attr.aria-pressed]="selected()"
+      [disabled]="disabled()"
+      [class]="classes()"
+      (click)="selected.set(!selected())"
+    >
+      @if (selected() && showCheck()) {
+        <sds-icon
+          name="check"
+          [size]="size() === 'sm' ? 12 : 14"
+          [strokeWidth]="3"
+          class="shrink-0"
+        />
+      } @else if (icon()) {
+        <sds-icon [name]="icon()!" [size]="size() === 'sm' ? 13 : 15" class="shrink-0" />
+      }
+      <span class="truncate">{{ label() }}</span>
+      @if (count() !== null && count() !== undefined) {
+        <span [class]="countClass">{{ count() }}</span>
+      }
+    </button>
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsChip, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-chip',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
+                    host: { class: 'inline-flex' },
+                    template: `
+    <button
+      type="button"
+      [attr.aria-pressed]="selected()"
+      [disabled]="disabled()"
+      [class]="classes()"
+      (click)="selected.set(!selected())"
+    >
+      @if (selected() && showCheck()) {
+        <sds-icon
+          name="check"
+          [size]="size() === 'sm' ? 12 : 14"
+          [strokeWidth]="3"
+          class="shrink-0"
+        />
+      } @else if (icon()) {
+        <sds-icon [name]="icon()!" [size]="size() === 'sm' ? 13 : 15" class="shrink-0" />
+      }
+      <span class="truncate">{{ label() }}</span>
+      @if (count() !== null && count() !== undefined) {
+        <span [class]="countClass">{{ count() }}</span>
+      }
+    </button>
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheck", required: false }] }] } });
+let nextId$c = 0;
+/**
+ * A set of chips: pick ONE (a filter row such as "All · Missing photo · Hidden", VAT presets, a date
+ * range) or, with `multiple`, SEVERAL (categories of an item, days of the week, dietary tags). Unlike
+ * sds-segmented (a compact joined bar), chips wrap onto several lines and can carry a count.
+ *
+ * Value: two-way `[(value)]`, or a form control (`formControlName` / `[(ngModel)]` —
+ * ControlValueAccessor). Single mode holds the picked value (or null); `multiple` holds an array, in the
+ * order of the options.
+ *
+ * Accessibility: single mode is a `radiogroup` (one tab stop, arrows/Home/End move and select, like
+ * native radios); `multiple` is a `group` of `aria-pressed` toggle buttons. Name it with [ariaLabel] or
+ * [ariaLabelledby].
+ *
+ * @example
+ * <sds-chip-group ariaLabel="Filter" [options]="filters()" [(value)]="issue" />
+ * <!-- filters = [{ value: null, label: 'All', count: 34 }, { value: 'NO_PHOTO', label: 'Missing photo', count: 5 }] -->
+ *
+ * @example
+ * <sds-chip-group ariaLabel="Categories" multiple [options]="categories()" formControlName="categoryIds" />
+ */
+class SdsChipGroup {
+    host = inject(ElementRef);
+    baseId = `sds-chip-group-${nextId$c++}`;
+    /** Options: `{ value, label, icon?, count?, disabled? }` objects, or bare strings/numbers. */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /** Picked value (single) or values (multiple). Two-way: `[(value)]`. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Allow several chips at once; the value becomes an array. */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Single mode: clicking the picked chip again clears the value to null. */
+    deselectable = input(false, ...(ngDevMode ? [{ debugName: "deselectable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    ariaLabelledby = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Wrap onto several lines (default) or scroll horizontally on one line. */
+    wrap = input(true, ...(ngDevMode ? [{ debugName: "wrap", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** `multiple`: a check replaces the icon on picked chips. */
+    showCheck = input(true, ...(ngDevMode ? [{ debugName: "showCheck", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    countClass = COUNT_CLASS;
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    chips = computed(() => this.options().map((o) => o !== null && typeof o === 'object'
+        ? {
+            value: o.value,
+            label: o.label,
+            icon: o.icon ?? null,
+            count: o.count ?? null,
+            disabled: !!o.disabled,
+        }
+        : { value: o, label: String(o), icon: null, count: null, disabled: false }), ...(ngDevMode ? [{ debugName: "chips" }] : []));
+    selectedValues = computed(() => {
+        const v = this.value();
+        if (this.multiple())
+            return Array.isArray(v) ? v : [];
+        return [v];
+    }, ...(ngDevMode ? [{ debugName: "selectedValues" }] : []));
+    /** Single mode's roving tab stop: the picked chip, else the first enabled one. */
+    tabStop = computed(() => {
+        const chips = this.chips();
+        const sel = chips.findIndex((c) => this.isSelected(c));
+        if (sel >= 0 && !chips[sel].disabled)
+            return sel;
+        return chips.findIndex((c) => !c.disabled);
+    }, ...(ngDevMode ? [{ debugName: "tabStop" }] : []));
+    isSelected(chip) {
+        return this.selectedValues().includes(chip.value);
+    }
+    chipId(i) {
+        return `${this.baseId}-${i}`;
+    }
+    classFor(chip) {
+        return chipClass(this.size(), this.isSelected(chip));
+    }
+    toggle(i) {
+        const chip = this.chips()[i];
+        if (!chip || chip.disabled || this.isDisabled())
             return;
-        this.value.set(seg.value);
+        let next;
+        if (this.multiple()) {
+            const picked = new Set(this.selectedValues());
+            if (picked.has(chip.value))
+                picked.delete(chip.value);
+            else
+                picked.add(chip.value);
+            // Keep the options' order, whatever the click order.
+            next = this.chips()
+                .map((c) => c.value)
+                .filter((v) => picked.has(v));
+        }
+        else {
+            if (this.isSelected(chip)) {
+                if (!this.deselectable())
+                    return;
+                next = null;
+            }
+            else {
+                next = chip.value;
+            }
+        }
+        this.value.set(next);
+        this.onChange(next);
     }
     onKeydown(event) {
-        if (this.disabled())
+        if (this.multiple() || this.isDisabled())
             return;
-        const segs = this.segments();
-        if (!segs.length)
+        const chips = this.chips();
+        if (!chips.length)
             return;
         const current = Number(event.target.dataset['index'] ?? this.tabStop());
         let next = null;
@@ -3520,11 +4588,11 @@ class SdsSegmented {
                 next = this.step(current, -1);
                 break;
             case 'Home':
-                next = segs.findIndex((s) => !s.disabled);
+                next = chips.findIndex((c) => !c.disabled);
                 break;
             case 'End':
-                for (let i = segs.length - 1; i >= 0; i--) {
-                    if (!segs[i].disabled) {
+                for (let i = chips.length - 1; i >= 0; i--) {
+                    if (!chips[i].disabled) {
                         next = i;
                         break;
                     }
@@ -3536,98 +4604,136 @@ class SdsSegmented {
         event.preventDefault();
         if (next === null || next < 0)
             return;
-        this.choose(next);
-        this.host.nativeElement.querySelector(`#${this.segmentId(next)}`)?.focus();
+        if (!this.isSelected(chips[next]))
+            this.toggle(next);
+        this.host.nativeElement.querySelector(`#${this.chipId(next)}`)?.focus();
     }
     step(from, delta) {
-        const segs = this.segments();
+        const chips = this.chips();
         let i = from;
-        for (let n = 0; n < segs.length; n++) {
-            i = (i + delta + segs.length) % segs.length;
-            if (!segs[i].disabled)
+        for (let n = 0; n < chips.length; n++) {
+            i = (i + delta + chips.length) % chips.length;
+            if (!chips[i].disabled)
                 return i;
         }
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSegmented, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSegmented, isStandalone: true, selector: "sds-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.w-full": "fullWidth()" }, classAttribute: "inline-flex max-w-full" }, ngImport: i0, template: `
+    // --- ControlValueAccessor -------------------------------------------------
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        // Normalised on read (selectedValues), so a null written to a `multiple` group is simply "none".
+        this.value.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsChipGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsChipGroup, isStandalone: true, selector: "sds-chip-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, deselectable: { classPropertyName: "deselectable", publicName: "deselectable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, showCheck: { classPropertyName: "showCheck", publicName: "showCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsChipGroup), multi: true },
+        ], ngImport: i0, template: `
     <div
-      role="radiogroup"
+      [attr.role]="multiple() ? 'group' : 'radiogroup'"
       [attr.aria-label]="ariaLabel() || null"
       [attr.aria-labelledby]="ariaLabelledby() || null"
-      [attr.aria-disabled]="disabled() ? 'true' : null"
-      class="flex max-w-full items-stretch gap-0.5 overflow-x-auto rounded-control border border-border bg-muted p-0.5"
-      [class.w-full]="fullWidth()"
+      [attr.aria-disabled]="isDisabled() ? 'true' : null"
+      class="flex gap-2"
+      [class]="wrap() ? 'flex-wrap' : 'overflow-x-auto pb-1'"
       (keydown)="onKeydown($event)"
+      (focusout)="onTouched()"
     >
-      @for (seg of segments(); track $index; let i = $index) {
+      @for (chip of chips(); track $index; let i = $index) {
         <button
           type="button"
-          role="radio"
-          [id]="segmentId(i)"
-          [attr.aria-checked]="isSelected(seg)"
-          [attr.aria-label]="iconOnly() ? seg.label : null"
-          [attr.title]="iconOnly() ? seg.label : null"
-          [attr.tabindex]="i === tabStop() ? 0 : -1"
+          [id]="chipId(i)"
+          [attr.role]="multiple() ? null : 'radio'"
+          [attr.aria-checked]="multiple() ? null : isSelected(chip)"
+          [attr.aria-pressed]="multiple() ? isSelected(chip) : null"
+          [attr.tabindex]="multiple() || i === tabStop() ? 0 : -1"
           [attr.data-index]="i"
-          [disabled]="disabled() || seg.disabled"
-          [class]="segmentClass(seg)"
-          (click)="choose(i)"
+          [disabled]="isDisabled() || chip.disabled"
+          [class]="classFor(chip)"
+          (click)="toggle(i)"
         >
-          @if (seg.icon) {
-            <sds-icon [name]="seg.icon" [size]="size() === 'sm' ? 15 : 17" class="shrink-0" />
+          @if (isSelected(chip) && multiple() && showCheck()) {
+            <sds-icon
+              name="check"
+              [size]="size() === 'sm' ? 12 : 14"
+              [strokeWidth]="3"
+              class="shrink-0"
+            />
+          } @else if (chip.icon) {
+            <sds-icon [name]="chip.icon" [size]="size() === 'sm' ? 13 : 15" class="shrink-0" />
           }
-          @if (!iconOnly()) {
-            <span class="truncate">{{ seg.label }}</span>
+          <span class="truncate">{{ chip.label }}</span>
+          @if (chip.count !== null) {
+            <span [class]="countClass">{{ chip.count }}</span>
           }
         </button>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSegmented, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsChipGroup, decorators: [{
             type: Component,
             args: [{
-                    selector: 'sds-segmented',
+                    selector: 'sds-chip-group',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [SdsIcon],
-                    host: { class: 'inline-flex max-w-full', '[class.w-full]': 'fullWidth()' },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsChipGroup), multi: true },
+                    ],
+                    host: { class: 'block' },
                     template: `
     <div
-      role="radiogroup"
+      [attr.role]="multiple() ? 'group' : 'radiogroup'"
       [attr.aria-label]="ariaLabel() || null"
       [attr.aria-labelledby]="ariaLabelledby() || null"
-      [attr.aria-disabled]="disabled() ? 'true' : null"
-      class="flex max-w-full items-stretch gap-0.5 overflow-x-auto rounded-control border border-border bg-muted p-0.5"
-      [class.w-full]="fullWidth()"
+      [attr.aria-disabled]="isDisabled() ? 'true' : null"
+      class="flex gap-2"
+      [class]="wrap() ? 'flex-wrap' : 'overflow-x-auto pb-1'"
       (keydown)="onKeydown($event)"
+      (focusout)="onTouched()"
     >
-      @for (seg of segments(); track $index; let i = $index) {
+      @for (chip of chips(); track $index; let i = $index) {
         <button
           type="button"
-          role="radio"
-          [id]="segmentId(i)"
-          [attr.aria-checked]="isSelected(seg)"
-          [attr.aria-label]="iconOnly() ? seg.label : null"
-          [attr.title]="iconOnly() ? seg.label : null"
-          [attr.tabindex]="i === tabStop() ? 0 : -1"
+          [id]="chipId(i)"
+          [attr.role]="multiple() ? null : 'radio'"
+          [attr.aria-checked]="multiple() ? null : isSelected(chip)"
+          [attr.aria-pressed]="multiple() ? isSelected(chip) : null"
+          [attr.tabindex]="multiple() || i === tabStop() ? 0 : -1"
           [attr.data-index]="i"
-          [disabled]="disabled() || seg.disabled"
-          [class]="segmentClass(seg)"
-          (click)="choose(i)"
+          [disabled]="isDisabled() || chip.disabled"
+          [class]="classFor(chip)"
+          (click)="toggle(i)"
         >
-          @if (seg.icon) {
-            <sds-icon [name]="seg.icon" [size]="size() === 'sm' ? 15 : 17" class="shrink-0" />
+          @if (isSelected(chip) && multiple() && showCheck()) {
+            <sds-icon
+              name="check"
+              [size]="size() === 'sm' ? 12 : 14"
+              [strokeWidth]="3"
+              class="shrink-0"
+            />
+          } @else if (chip.icon) {
+            <sds-icon [name]="chip.icon" [size]="size() === 'sm' ? 13 : 15" class="shrink-0" />
           }
-          @if (!iconOnly()) {
-            <span class="truncate">{{ seg.label }}</span>
+          <span class="truncate">{{ chip.label }}</span>
+          @if (chip.count !== null) {
+            <span [class]="countClass">{{ chip.count }}</span>
           }
         </button>
       }
     </div>
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], deselectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "deselectable", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], showCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheck", required: false }] }] } });
 
 /**
  * Each status has its own glyph SHAPE (circle-check, triangle, octagon, circle-i) as well as its own
@@ -4053,6 +5159,9 @@ const STATES = {
  * for multi-select ("select all matches"): it then carries `aria-pressed` and a corner check. [busy]
  * shows a spinner and sets `aria-busy` while a save is in flight.
  *
+ * A photo that fails to load (404, blocked, not an image) falls back to the no-photo layout — never
+ * a broken-image icon — and `(imageError)` reports the URL. A new [image] URL is tried again.
+ *
  * @example
  * <sds-status-tile title="Bacon" subtitle="Extras" state="sold-out" note="Back at 22:00"
  *                  soldOutLabel="Sold out" (activate)="toggle(item)" />
@@ -4077,6 +5186,21 @@ class SdsStatusTile {
     hiddenLabel = input('Hidden', ...(ngDevMode ? [{ debugName: "hiddenLabel" }] : []));
     /** The tile was pressed (click, tap, Enter or Space). */
     activate = output();
+    /** The [image] URL failed to load; the tile has fallen back to its no-photo layout. */
+    imageError = output();
+    /** The URL that last failed to load — hidden until [image] changes to another URL. */
+    failedImage = signal(null, ...(ngDevMode ? [{ debugName: "failedImage" }] : []));
+    showImage = computed(() => {
+        const src = this.image();
+        return !!src && src !== this.failedImage();
+    }, ...(ngDevMode ? [{ debugName: "showImage" }] : []));
+    onImageError() {
+        const src = this.image();
+        if (!src)
+            return;
+        this.failedImage.set(src);
+        this.imageError.emit(src);
+    }
     style = computed(() => STATES[this.state()] ?? STATES.available, ...(ngDevMode ? [{ debugName: "style" }] : []));
     stateText = computed(() => {
         switch (this.state()) {
@@ -4107,7 +5231,7 @@ class SdsStatusTile {
             ring);
     }, ...(ngDevMode ? [{ debugName: "tileClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsStatusTile, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsStatusTile, isStandalone: true, selector: "sds-status-tile", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, availableLabel: { classPropertyName: "availableLabel", publicName: "availableLabel", isSignal: true, isRequired: false, transformFunction: null }, soldOutLabel: { classPropertyName: "soldOutLabel", publicName: "soldOutLabel", isSignal: true, isRequired: false, transformFunction: null }, hiddenLabel: { classPropertyName: "hiddenLabel", publicName: "hiddenLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsStatusTile, isStandalone: true, selector: "sds-status-tile", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, availableLabel: { classPropertyName: "availableLabel", publicName: "availableLabel", isSignal: true, isRequired: false, transformFunction: null }, soldOutLabel: { classPropertyName: "soldOutLabel", publicName: "soldOutLabel", isSignal: true, isRequired: false, transformFunction: null }, hiddenLabel: { classPropertyName: "hiddenLabel", publicName: "hiddenLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate", imageError: "imageError" }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <button
       type="button"
       [class]="tileClass()"
@@ -4118,11 +5242,12 @@ class SdsStatusTile {
       [style.background-image]="hatch()"
       (click)="activate.emit()"
     >
-      @if (image()) {
+      @if (showImage()) {
         <span class="relative block h-[45%] w-full shrink-0 overflow-hidden bg-muted">
           <img
             [src]="image()"
             [alt]="imageAlt()"
+            (error)="onImageError()"
             class="h-full w-full object-cover"
             [class.grayscale]="state() !== 'available'"
             [class.opacity-60]="state() !== 'available'"
@@ -4135,7 +5260,7 @@ class SdsStatusTile {
       <span class="flex min-h-0 w-full flex-1 flex-col gap-1 p-3 text-left">
         <span
           class="line-clamp-2 break-words font-bold leading-tight text-ink"
-          [class]="image() ? 'text-base' : 'text-lg'"
+          [class]="showImage() ? 'text-base' : 'text-lg'"
           [class.line-through]="state() === 'sold-out'"
           [class.decoration-2]="state() === 'sold-out'"
           >{{ title() }}</span
@@ -4198,11 +5323,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       [style.background-image]="hatch()"
       (click)="activate.emit()"
     >
-      @if (image()) {
+      @if (showImage()) {
         <span class="relative block h-[45%] w-full shrink-0 overflow-hidden bg-muted">
           <img
             [src]="image()"
             [alt]="imageAlt()"
+            (error)="onImageError()"
             class="h-full w-full object-cover"
             [class.grayscale]="state() !== 'available'"
             [class.opacity-60]="state() !== 'available'"
@@ -4215,7 +5341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       <span class="flex min-h-0 w-full flex-1 flex-col gap-1 p-3 text-left">
         <span
           class="line-clamp-2 break-words font-bold leading-tight text-ink"
-          [class]="image() ? 'text-base' : 'text-lg'"
+          [class]="showImage() ? 'text-base' : 'text-lg'"
           [class.line-through]="state() === 'sold-out'"
           [class.decoration-2]="state() === 'sold-out'"
           >{{ title() }}</span
@@ -4260,7 +5386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     </button>
   `,
                 }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], availableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableLabel", required: false }] }], soldOutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "soldOutLabel", required: false }] }], hiddenLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenLabel", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }] } });
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], availableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableLabel", required: false }] }], soldOutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "soldOutLabel", required: false }] }], hiddenLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenLabel", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }], imageError: [{ type: i0.Output, args: ["imageError"] }] } });
 
 let nextId$b = 0;
 /**
@@ -4904,6 +6030,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }] });
 let nextId$a = 0;
+/** Fastest auto-scroll step, in px per animation frame (reached at the very edge). */
+const AUTO_SCROLL_MAX_STEP = 18;
+/** The nearest ancestor that scrolls vertically (below the document, which is handled as the window). */
+function scrollParentOf(el) {
+    const doc = el.ownerDocument;
+    for (let node = el.parentElement; node; node = node.parentElement) {
+        if (node === doc.body || node === doc.documentElement)
+            break;
+        const overflowY = getComputedStyle(node).overflowY;
+        if (/(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight)
+            return node;
+    }
+    return null;
+}
+/**
+ * Signed scroll step for a pointer at `y` inside the band [top, bottom]: negative near the top edge,
+ * positive near the bottom, faster the closer it gets, 0 elsewhere.
+ */
+function edgeStep(y, top, bottom, edge) {
+    if (bottom - top < edge * 2)
+        edge = (bottom - top) / 3;
+    if (edge <= 0)
+        return 0;
+    const speed = (depth) => Math.ceil(AUTO_SCROLL_MAX_STEP * Math.min(1, depth / edge));
+    if (y < top + edge)
+        return -speed(top + edge - y);
+    if (y > bottom - edge)
+        return speed(y - (bottom - edge));
+    return 0;
+}
 /** Move one entry of `list` from `from` to `to`, returning a new array. */
 function moveItem(list, from, to) {
     const next = [...list];
@@ -4919,6 +6075,10 @@ function moveItem(list, from, to) {
  * - **Keyboard**: focus a handle, **Space/Enter** picks the item up, **↑/↓** (and Home/End) move it,
  *   **Space/Enter** drops it, **Escape** cancels (the event is stopped, so an enclosing drawer stays open).
  *   Moving focus away also cancels.
+ * - **Long lists**: while a pointer drag nears the top or bottom edge of the nearest scrollable
+ *   ancestor (a drawer body, a panel) — or of the window — that container scrolls, faster closer to
+ *   the edge, and the dragged row stays under the pointer. A keyboard move scrolls just enough to keep
+ *   the moving row in view. Turn off with `[autoScroll]="false"`.
  * - **Screen readers**: every handle is named ("Reorder Burgers") and described by the instructions; an
  *   assertive live region announces pick-up, each move ("moved to position 3 of 8"), the drop and a cancel.
  *
@@ -4955,6 +6115,13 @@ class SdsSortableList {
     appearance = input('card', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
     /** Accessible name of the list. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * Scroll the nearest scrollable ancestor (then the window) while dragging near its top or bottom
+     * edge, and keep a keyboard-moved row in view.
+     */
+    autoScroll = input(true, ...(ngDevMode ? [{ debugName: "autoScroll", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Height (px) of the band along each scroll edge where a pointer drag starts auto-scrolling. */
+    autoScrollEdge = input(56, ...(ngDevMode ? [{ debugName: "autoScrollEdge", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     /** Name of each handle; `{item}` is the item's label. */
     handleLabel = input('Reorder {item}', ...(ngDevMode ? [{ debugName: "handleLabel" }] : []));
     /** Read after a handle's name (aria-describedby). */
@@ -4985,6 +6152,16 @@ class SdsSortableList {
     gap = 0;
     pointerId = null;
     startY = 0;
+    /** Latest pointer position during a pointer drag (auto-scroll re-reads it every frame). */
+    lastY = 0;
+    /** The host's viewport top at drag start: the drift since then is how far its scrollers moved. */
+    startHostTop = 0;
+    /** Nearest scrollable ancestor, found at drag start. */
+    scroller = null;
+    frame = null;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.stopAutoScroll());
+    }
     /** Per-row offsets that open a gap where the moving row will land. */
     shifts = computed(() => {
         const a = this.active();
@@ -5118,7 +6295,7 @@ class SdsSortableList {
             case 'Escape':
                 event.preventDefault();
                 event.stopPropagation();
-                this.cancel();
+                this.cancel(true, true);
                 return;
             case 'Tab':
                 this.cancel();
@@ -5130,6 +6307,7 @@ class SdsSortableList {
             return;
         this.target.set(to);
         this.announce(this.movedMessage(), to);
+        this.revealActive();
     }
     /** Focus leaving the list while an item is picked up cancels the move. */
     onFocusOut(event) {
@@ -5152,17 +6330,39 @@ class SdsSortableList {
         event.currentTarget.focus({ preventScroll: true });
         this.pointerId = event.pointerId;
         this.startY = event.clientY;
+        this.lastY = event.clientY;
         this.pointerDy.set(0);
         this.begin(i, 'pointer');
+        this.startAutoScroll();
     }
     onPointerMove(event) {
         if (this.mode() !== 'pointer' || event.pointerId !== this.pointerId)
             return;
+        this.lastY = event.clientY;
+        this.track();
+    }
+    /**
+     * Place the dragged row under the pointer and pick its landing slot. Positions are compared in
+     * drag-start coordinates: the pointer's travel plus however far the list has scrolled since.
+     */
+    track() {
         const a = this.active();
-        if (a === null)
+        if (a === null || !this.rects[a])
             return;
-        const dy = event.clientY - this.startY;
+        // Keep the row inside the list: it can't be dropped beyond either end, and a row dragged past the
+        // end would grow the scroll area under an auto-scroll that then never stops.
+        const first = this.rects[0];
+        const last = this.rects[this.rects.length - 1];
+        const minDy = first.top - this.rects[a].top;
+        const maxDy = last.top + last.height - (this.rects[a].top + this.rects[a].height);
+        const dy = Math.min(maxDy, Math.max(minDy, this.lastY - this.startY + this.scrolledBy()));
         this.pointerDy.set(dy);
+        // Pinned at an end of the list: that end's slot (with equal row heights the centre test below
+        // would stop one short of the last slot).
+        if (dy >= maxDy)
+            return this.target.set(this.rects.length - 1);
+        if (dy <= minDy)
+            return this.target.set(0);
         const center = this.rects[a].top + this.rects[a].height / 2 + dy;
         let t = 0;
         this.rects.forEach((r, j) => {
@@ -5171,6 +6371,103 @@ class SdsSortableList {
         });
         this.target.set(t);
     }
+    /** How far (px) the list has moved up the viewport since the drag began — any ancestor or the window. */
+    scrolledBy() {
+        return this.startHostTop - this.host.nativeElement.getBoundingClientRect().top;
+    }
+    // --- auto-scroll ----------------------------------------------------------------
+    startAutoScroll() {
+        if (!this.autoScroll() || typeof requestAnimationFrame === 'undefined')
+            return;
+        this.stopAutoScroll();
+        const tick = () => {
+            this.frame = null;
+            if (this.mode() !== 'pointer')
+                return;
+            this.scrollNearEdge(this.lastY);
+            // Re-track every frame: auto-scroll, or a wheel/trackpad scroll, moves the list under a still pointer.
+            this.track();
+            this.frame = requestAnimationFrame(tick);
+        };
+        this.frame = requestAnimationFrame(tick);
+    }
+    stopAutoScroll() {
+        if (this.frame !== null)
+            cancelAnimationFrame(this.frame);
+        this.frame = null;
+    }
+    /**
+     * One auto-scroll step for a pointer at `y`: the scroll container first, then the window. A side
+     * only scrolls while part of the list is still hidden past that edge.
+     */
+    scrollNearEdge(y) {
+        const edge = Math.max(0, this.autoScrollEdge());
+        const view = this.host.nativeElement.ownerDocument.defaultView;
+        const vh = view?.innerHeight ?? 0;
+        const list = this.host.nativeElement.getBoundingClientRect();
+        /** A step toward a side of the band [top, bottom], or 0 when the list doesn't extend past it. */
+        const stepFor = (top, bottom) => {
+            const step = edgeStep(y, top, bottom, edge);
+            if (step < 0 && list.top >= top)
+                return 0;
+            if (step > 0 && list.bottom <= bottom)
+                return 0;
+            return step;
+        };
+        const el = this.scroller;
+        if (el) {
+            const box = el.getBoundingClientRect();
+            const step = stepFor(Math.max(box.top, 0), Math.min(box.bottom, vh));
+            const room = step < 0 ? el.scrollTop : el.scrollHeight - el.clientHeight - el.scrollTop;
+            if (step !== 0 && room > 0.5) {
+                el.scrollTop += step;
+                return true;
+            }
+        }
+        const doc = this.host.nativeElement.ownerDocument.scrollingElement;
+        if (!view || !doc)
+            return false;
+        const step = stepFor(0, vh);
+        const room = step < 0 ? doc.scrollTop : doc.scrollHeight - doc.clientHeight - doc.scrollTop;
+        if (step === 0 || room <= 0.5)
+            return false;
+        view.scrollBy(0, step);
+        return true;
+    }
+    /**
+     * Keyboard move: scroll just enough (container, then window) to keep the moving row in view. Its
+     * resting box comes from drag-start geometry, since its transform may still be animating.
+     */
+    revealActive() {
+        if (!this.autoScroll())
+            return;
+        afterNextRender(() => {
+            const a = this.active();
+            if (a === null || !this.rects[a] || this.mode() !== 'keyboard')
+                return;
+            const margin = 8;
+            const view = this.host.nativeElement.ownerDocument.defaultView;
+            const vh = view?.innerHeight ?? 0;
+            /** How far the row sticks out of [lo, hi]: negative above, positive below, 0 inside. */
+            const overflow = (lo, hi) => {
+                const top = this.rects[a].top + this.activeOffset() - this.scrolledBy();
+                const bottom = top + this.rects[a].height;
+                return top < lo ? top - lo : bottom > hi ? bottom - hi : 0;
+            };
+            const el = this.scroller;
+            if (el) {
+                const box = el.getBoundingClientRect();
+                const d = overflow(Math.max(box.top, 0) + margin, Math.min(box.bottom, vh) - margin);
+                if (d)
+                    el.scrollTop += d;
+            }
+            if (view) {
+                const d = overflow(margin, vh - margin);
+                if (d)
+                    view.scrollBy(0, d);
+            }
+        }, { injector: this.injector });
+    }
     onPointerUp(event) {
         if (this.mode() !== 'pointer' || event.pointerId !== this.pointerId)
             return;
@@ -5183,6 +6480,8 @@ class SdsSortableList {
     // --- lifecycle of a move -------------------------------------------------------
     begin(i, mode) {
         this.measure();
+        this.startHostTop = this.host.nativeElement.getBoundingClientRect().top;
+        this.scroller = this.autoScroll() ? scrollParentOf(this.host.nativeElement) : null;
         this.active.set(i);
         this.target.set(i);
         this.mode.set(mode);
@@ -5223,20 +6522,29 @@ class SdsSortableList {
         this.focusHandle(to);
     }
     /** Nothing was moved in the DOM while dragging, so focus is still where it should be. */
-    cancel(announce = true) {
+    cancel(announce = true, reveal = false) {
         const from = this.active();
         if (from === null)
             return;
+        const keyboard = this.mode() === 'keyboard';
         this.reset();
         if (announce)
             this.announce(this.cancelledMessage(), from);
+        // Escape after a keyboard move that scrolled away: bring the row (and its focused handle) back.
+        if (reveal && keyboard && this.autoScroll()) {
+            afterNextRender(() => this.host.nativeElement
+                .querySelector(`[data-sortable-index="${from}"]`)
+                ?.scrollIntoView({ block: 'nearest' }), { injector: this.injector });
+        }
     }
     reset() {
+        this.stopAutoScroll();
         this.active.set(null);
         this.target.set(null);
         this.mode.set(null);
         this.pointerDy.set(0);
         this.pointerId = null;
+        this.scroller = null;
     }
     focusHandle(index) {
         afterNextRender(() => {
@@ -5257,7 +6565,7 @@ class SdsSortableList {
         queueMicrotask(() => this.liveMessage.set(text));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSortableList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSortableList, isStandalone: true, selector: "sds-sortable-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, labelField: { classPropertyName: "labelField", publicName: "labelField", isSignal: true, isRequired: false, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, handleLabel: { classPropertyName: "handleLabel", publicName: "handleLabel", isSignal: true, isRequired: false, transformFunction: null }, instructions: { classPropertyName: "instructions", publicName: "instructions", isSignal: true, isRequired: false, transformFunction: null }, pickedUpMessage: { classPropertyName: "pickedUpMessage", publicName: "pickedUpMessage", isSignal: true, isRequired: false, transformFunction: null }, movedMessage: { classPropertyName: "movedMessage", publicName: "movedMessage", isSignal: true, isRequired: false, transformFunction: null }, droppedMessage: { classPropertyName: "droppedMessage", publicName: "droppedMessage", isSignal: true, isRequired: false, transformFunction: null }, cancelledMessage: { classPropertyName: "cancelledMessage", publicName: "cancelledMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", reorder: "reorder" }, host: { classAttribute: "block" }, queries: [{ propertyName: "itemTpl", first: true, predicate: SdsSortableItem, descendants: true, isSignal: true }, { propertyName: "handleTpl", first: true, predicate: SdsSortableHandle, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSortableList, isStandalone: true, selector: "sds-sortable-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, labelField: { classPropertyName: "labelField", publicName: "labelField", isSignal: true, isRequired: false, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, autoScrollEdge: { classPropertyName: "autoScrollEdge", publicName: "autoScrollEdge", isSignal: true, isRequired: false, transformFunction: null }, handleLabel: { classPropertyName: "handleLabel", publicName: "handleLabel", isSignal: true, isRequired: false, transformFunction: null }, instructions: { classPropertyName: "instructions", publicName: "instructions", isSignal: true, isRequired: false, transformFunction: null }, pickedUpMessage: { classPropertyName: "pickedUpMessage", publicName: "pickedUpMessage", isSignal: true, isRequired: false, transformFunction: null }, movedMessage: { classPropertyName: "movedMessage", publicName: "movedMessage", isSignal: true, isRequired: false, transformFunction: null }, droppedMessage: { classPropertyName: "droppedMessage", publicName: "droppedMessage", isSignal: true, isRequired: false, transformFunction: null }, cancelledMessage: { classPropertyName: "cancelledMessage", publicName: "cancelledMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", reorder: "reorder" }, host: { classAttribute: "block" }, queries: [{ propertyName: "itemTpl", first: true, predicate: SdsSortableItem, descendants: true, isSignal: true }, { propertyName: "handleTpl", first: true, predicate: SdsSortableHandle, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ul
       role="list"
       [attr.aria-label]="ariaLabel() || null"
@@ -5380,7 +6688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     <div class="sr-only" aria-live="assertive" aria-atomic="true">{{ liveMessage() }}</div>
   `,
                 }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], labelField: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelField", required: false }] }], itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLabel", required: false }] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], handleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "handleLabel", required: false }] }], instructions: [{ type: i0.Input, args: [{ isSignal: true, alias: "instructions", required: false }] }], pickedUpMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickedUpMessage", required: false }] }], movedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "movedMessage", required: false }] }], droppedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppedMessage", required: false }] }], cancelledMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelledMessage", required: false }] }], reorder: [{ type: i0.Output, args: ["reorder"] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSortableItem), { isSignal: true }] }], handleTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSortableHandle), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], labelField: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelField", required: false }] }], itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLabel", required: false }] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], autoScrollEdge: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEdge", required: false }] }], handleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "handleLabel", required: false }] }], instructions: [{ type: i0.Input, args: [{ isSignal: true, alias: "instructions", required: false }] }], pickedUpMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickedUpMessage", required: false }] }], movedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "movedMessage", required: false }] }], droppedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppedMessage", required: false }] }], cancelledMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelledMessage", required: false }] }], reorder: [{ type: i0.Output, args: ["reorder"] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSortableItem), { isSignal: true }] }], handleTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSortableHandle), { isSignal: true }] }] } });
 
 let nextId$9 = 0;
 /** "1.5 MB" style size (decimal units, like file managers show them), for messages. */
@@ -6282,41 +7590,41 @@ class SdsCalendar {
     max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : []));
     /** 0 = Sunday, 1 = Monday (default, European). */
     firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
-    locale = input('fr-FR', ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    /** BCP 47 locale for month and weekday names. Defaults to `en-GB`; pass the app's locale. */
+    locale = input('en-GB', ...(ngDevMode ? [{ debugName: "locale" }] : []));
     showActions = input(true, ...(ngDevMode ? [{ debugName: "showActions" }] : []));
     /** When true, a time editor (HH:mm, 24h) is shown and the value keeps its time-of-day. */
     showTime = input(false, ...(ngDevMode ? [{ debugName: "showTime", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** When true, a "done" action is shown (used by the overlay picker to close the panel). */
     showDone = input(false, ...(ngDevMode ? [{ debugName: "showDone", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Visible label of the time editor. Translate it in the consuming app. */
-    timeLabel = input('Heure', ...(ngDevMode ? [{ debugName: "timeLabel" }] : []));
+    timeLabel = input('Time', ...(ngDevMode ? [{ debugName: "timeLabel" }] : []));
     /** Accessible name of the hours field (it is a bare numeric input). */
-    hoursLabel = input('Heures', ...(ngDevMode ? [{ debugName: "hoursLabel" }] : []));
+    hoursLabel = input('Hours', ...(ngDevMode ? [{ debugName: "hoursLabel" }] : []));
     /** Accessible name of the minutes field. */
     minutesLabel = input('Minutes', ...(ngDevMode ? [{ debugName: "minutesLabel" }] : []));
     /** Visible text of the "done" action (shown when {@link showDone} is true). */
-    doneLabel = input('Terminé', ...(ngDevMode ? [{ debugName: "doneLabel" }] : []));
+    doneLabel = input('Done', ...(ngDevMode ? [{ debugName: "doneLabel" }] : []));
     /**
-     * Accessible name for the calendar container. French default so existing consumers are unchanged,
-     * but an app serving more than one language MUST translate it.
+     * Accessible name for the calendar container. English default; an app serving more than one
+     * language MUST translate it.
      */
-    calendarLabel = input('Calendrier', ...(ngDevMode ? [{ debugName: "calendarLabel" }] : []));
+    calendarLabel = input('Calendar', ...(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.
+     * accessible name. English default; translate it in the consuming app.
      */
-    previousLabel = input('Précédent', ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
+    previousLabel = input('Previous', ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
     /** Accessible name for the icon-only "next" nav button. See {@link previousLabel}. */
-    nextLabel = input('Suivant', ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    nextLabel = input('Next', ...(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" }] : []));
+    todayActionLabel = input('Today', ...(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"). */
+    clearActionLabel = input('Clear', ...(ngDevMode ? [{ debugName: "clearActionLabel" }] : []));
+    /** Emitted when a concrete date is picked (day click or "Today"). */
     dateSelect = output();
     /** Emitted when the "done" action is used (see {@link showDone}). */
     done = output();
@@ -7079,7 +8387,7 @@ const SIZES$5 = {
  * [(ngModel)]; the value is a `Date | null`.
  *
  * @example
- * <sds-date-picker label="Date de garde" [(ngModel)]="date" />
+ * <sds-date-picker label="Delivery date" [(ngModel)]="date" />
  */
 class SdsDatePicker {
     host = inject(ElementRef);
@@ -7087,14 +8395,18 @@ class SdsDatePicker {
     fieldId = `sds-date-${nextId$7++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
-    placeholder = input('jj/mm/aaaa', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    placeholder = input('dd/mm/yyyy', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
     error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : []));
     max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : []));
     firstDayOfWeek = input(1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
-    locale = input('fr-FR', ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    /**
+     * BCP 47 locale for the calendar's month and weekday names. Defaults to `en-GB` (English names, and
+     * the same day-first order as the default dd/MM/yyyy display); pass the app's locale.
+     */
+    locale = input('en-GB', ...(ngDevMode ? [{ debugName: "locale" }] : []));
     inline = input(false, ...(ngDevMode ? [{ debugName: "inline", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     showActions = input(true, ...(ngDevMode ? [{ debugName: "showActions", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
@@ -7108,38 +8420,37 @@ class SdsDatePicker {
     /** Custom display formatter for the DATE part (default dd/MM/yyyy). The time is appended as HH:mm. */
     format = input(formatDdMmYyyy, ...(ngDevMode ? [{ debugName: "format" }] : []));
     /** Visible label of the time editor (forwarded to the calendar). See {@link showTime}. */
-    timeLabel = input('Heure', ...(ngDevMode ? [{ debugName: "timeLabel" }] : []));
+    timeLabel = input('Time', ...(ngDevMode ? [{ debugName: "timeLabel" }] : []));
     /** Accessible name of the hours field (forwarded to the calendar). */
-    hoursLabel = input('Heures', ...(ngDevMode ? [{ debugName: "hoursLabel" }] : []));
+    hoursLabel = input('Hours', ...(ngDevMode ? [{ debugName: "hoursLabel" }] : []));
     /** Accessible name of the minutes field (forwarded to the calendar). */
     minutesLabel = input('Minutes', ...(ngDevMode ? [{ debugName: "minutesLabel" }] : []));
     /** Visible text of the calendar's "done" action, shown in the overlay when {@link showTime}. */
-    doneLabel = input('Terminé', ...(ngDevMode ? [{ debugName: "doneLabel" }] : []));
+    doneLabel = input('Done', ...(ngDevMode ? [{ debugName: "doneLabel" }] : []));
     /**
-     * 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.
+     * Accessible name for the clear button. English default; 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" }] : []));
+    clearLabel = input('Clear 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" }] : []));
+    openCalendarLabel = input('Open calendar', ...(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" }] : []));
+    closeCalendarLabel = input('Close calendar', ...(ngDevMode ? [{ debugName: "closeCalendarLabel" }] : []));
     /** Accessible name for the overlay dialog that holds the calendar. */
-    panelLabel = input('Sélection de date', ...(ngDevMode ? [{ debugName: "panelLabel" }] : []));
+    panelLabel = input('Choose a 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" }] : []));
+    calendarLabel = input('Calendar', ...(ngDevMode ? [{ debugName: "calendarLabel" }] : []));
+    previousLabel = input('Previous', ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
+    nextLabel = input('Next', ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    todayActionLabel = input('Today', ...(ngDevMode ? [{ debugName: "todayActionLabel" }] : []));
+    clearActionLabel = input('Clear', ...(ngDevMode ? [{ debugName: "clearActionLabel" }] : []));
     value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
@@ -7705,7 +9016,7 @@ let nextId$6 = 0;
  *
  * @example
  * <sds-select [options]="services" optionLabel="name" optionValue="id"
- *            placeholder="Choisir un service" [(ngModel)]="serviceId" filter clearable />
+ *            placeholder="Choose a service" [(ngModel)]="serviceId" filter clearable />
  *
  * @example
  * <sds-select [options]="categories" optionLabel="name" optionValue="id" [(ngModel)]="categoryId">
@@ -7725,7 +9036,7 @@ class SdsSelect {
     optionDisabled = input('disabled', ...(ngDevMode ? [{ debugName: "optionDisabled" }] : []));
     /** Key used to compare object values for selection equality. */
     dataKey = input('', ...(ngDevMode ? [{ debugName: "dataKey" }] : []));
-    placeholder = input('Sélectionner…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    placeholder = input('Select…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
@@ -7735,8 +9046,15 @@ class SdsSelect {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     filter = input(false, ...(ngDevMode ? [{ debugName: "filter", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    filterPlaceholder = input('Rechercher…', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
-    emptyMessage = input('Aucun résultat', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    filterPlaceholder = input('Search…', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
+    emptyMessage = input('No results', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    /**
+     * Accessible name of the icon-only clear button (see {@link clearable}). English default; an app
+     * serving more than one language passes a translated value — it is the button's only name.
+     */
+    clearLabel = input('Clear selection', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    /** Accessible name of the filter field inside the panel (see {@link filter}). */
+    filterLabel = input('Search', ...(ngDevMode ? [{ debugName: "filterLabel" }] : []));
     /** Optional projected `<ng-template sdsSelectOption>` — custom option + selected-value rendering. */
     optionTpl = contentChild(SdsSelectOption, ...(ngDevMode ? [{ debugName: "optionTpl" }] : []));
     /** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
@@ -8092,7 +9410,7 @@ class SdsSelect {
             this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSelect, isStandalone: true, selector: "sds-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSelect, isStandalone: true, selector: "sds-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsSelect), multi: true },
         ], queries: [{ propertyName: "optionTpl", first: true, predicate: SdsSelectOption, descendants: true, isSignal: true }, { propertyName: "emptyTpl", first: true, predicate: SdsSelectEmpty, descendants: true, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: SdsSelectFooter, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
@@ -8137,7 +9455,7 @@ class SdsSelect {
           <button
             type="button"
             tabindex="-1"
-            aria-label="Effacer la sélection"
+            [attr.aria-label]="clearLabel()"
             class="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft"
             (click)="clear($event)"
           >
@@ -8170,7 +9488,7 @@ class SdsSelect {
                   [value]="filterText()"
                   (input)="onFilter($event)"
                   (keydown)="onFilterKeydown($event)"
-                  aria-label="Rechercher"
+                  [attr.aria-label]="filterLabel()"
                   class="h-9 w-full bg-transparent pl-8 pr-2 text-sm text-ink outline-none placeholder:text-ink-faint"
                 />
               </div>
@@ -8293,7 +9611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           <button
             type="button"
             tabindex="-1"
-            aria-label="Effacer la sélection"
+            [attr.aria-label]="clearLabel()"
             class="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft"
             (click)="clear($event)"
           >
@@ -8326,7 +9644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                   [value]="filterText()"
                   (input)="onFilter($event)"
                   (keydown)="onFilterKeydown($event)"
-                  aria-label="Rechercher"
+                  [attr.aria-label]="filterLabel()"
                   class="h-9 w-full bg-transparent pl-8 pr-2 text-sm text-ink outline-none placeholder:text-ink-faint"
                 />
               </div>
@@ -8393,7 +9711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectOption), { isSignal: true }] }], emptyTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectEmpty), { isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectFooter), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectOption), { isSignal: true }] }], emptyTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectEmpty), { isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectFooter), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 const SIZES$3 = {
     sm: 'min-h-9 text-sm',
@@ -8440,7 +9758,7 @@ class SdsMultiSelect {
     optionValue = input('', ...(ngDevMode ? [{ debugName: "optionValue" }] : []));
     optionDisabled = input('disabled', ...(ngDevMode ? [{ debugName: "optionDisabled" }] : []));
     dataKey = input('', ...(ngDevMode ? [{ debugName: "dataKey" }] : []));
-    placeholder = input('Sélectionner…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    placeholder = input('Select…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
@@ -8449,13 +9767,24 @@ class SdsMultiSelect {
     display = input('comma', ...(ngDevMode ? [{ debugName: "display" }] : []));
     /** In comma mode, show a count label once more than this many are selected. */
     maxSelectedLabels = input(3, ...(ngDevMode ? [{ debugName: "maxSelectedLabels", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-    selectedItemsLabel = input('{0} éléments sélectionnés', ...(ngDevMode ? [{ debugName: "selectedItemsLabel" }] : []));
+    selectedItemsLabel = input('{0} items selected', ...(ngDevMode ? [{ debugName: "selectedItemsLabel" }] : []));
     showToggleAll = input(true, ...(ngDevMode ? [{ debugName: "showToggleAll", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     filter = input(false, ...(ngDevMode ? [{ debugName: "filter", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    filterPlaceholder = input('Rechercher…', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
-    emptyMessage = input('Aucun résultat', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    filterPlaceholder = input('Search…', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
+    emptyMessage = input('No results', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    /**
+     * Accessible name of a chip's icon-only remove button (`display="chip"`); `{label}` is the option's
+     * label. English defaults throughout — an app serving more than one language passes translations.
+     */
+    removeLabel = input('Remove {label}', ...(ngDevMode ? [{ debugName: "removeLabel" }] : []));
+    /** Accessible name of the icon-only clear-all button (see {@link clearable}). */
+    clearLabel = input('Clear all', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    /** Accessible name of the filter field inside the panel (see {@link filter}). */
+    filterLabel = input('Search', ...(ngDevMode ? [{ debugName: "filterLabel" }] : []));
+    /** Visible text of the "select all" row (see {@link showToggleAll}). */
+    selectAllLabel = input('Select all', ...(ngDevMode ? [{ debugName: "selectAllLabel" }] : []));
     /** Optional projected `<ng-template sdsSelectOption>` — custom option-row rendering. */
     optionTpl = contentChild(SdsSelectOption, ...(ngDevMode ? [{ debugName: "optionTpl" }] : []));
     /** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
@@ -8855,7 +10184,7 @@ class SdsMultiSelect {
             this.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsMultiSelect, isStandalone: true, selector: "sds-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsMultiSelect, isStandalone: true, selector: "sds-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsMultiSelect), multi: true },
         ], queries: [{ propertyName: "optionTpl", first: true, predicate: SdsSelectOption, descendants: true, isSignal: true }, { propertyName: "emptyTpl", first: true, predicate: SdsSelectEmpty, descendants: true, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: SdsSelectFooter, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
@@ -8888,7 +10217,7 @@ class SdsMultiSelect {
                 <button
                   type="button"
                   tabindex="-1"
-                  [attr.aria-label]="'Retirer ' + opt.label"
+                  [attr.aria-label]="removeLabel().replace('{label}', opt.label)"
                   class="inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-brand-100"
                   (click)="removeChip($event, opt)"
                 >
@@ -8910,7 +10239,7 @@ class SdsMultiSelect {
           <button
             type="button"
             tabindex="-1"
-            aria-label="Tout effacer"
+            [attr.aria-label]="clearLabel()"
             class="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center self-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft"
             (click)="clear($event)"
           >
@@ -8943,7 +10272,7 @@ class SdsMultiSelect {
                   [value]="filterText()"
                   (input)="onFilter($event)"
                   (keydown)="onFilterKeydown($event)"
-                  aria-label="Rechercher"
+                  [attr.aria-label]="filterLabel()"
                   class="h-9 w-full bg-transparent pl-8 pr-2 text-sm text-ink outline-none placeholder:text-ink-faint"
                 />
               </div>
@@ -8969,7 +10298,7 @@ class SdsMultiSelect {
                   <span class="h-0.5 w-2.5 rounded-full bg-white"></span>
                 }
               </span>
-              Tout sélectionner
+              {{ selectAllLabel() }}
             </button>
           }
 
@@ -9079,7 +10408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 <button
                   type="button"
                   tabindex="-1"
-                  [attr.aria-label]="'Retirer ' + opt.label"
+                  [attr.aria-label]="removeLabel().replace('{label}', opt.label)"
                   class="inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-brand-100"
                   (click)="removeChip($event, opt)"
                 >
@@ -9101,7 +10430,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           <button
             type="button"
             tabindex="-1"
-            aria-label="Tout effacer"
+            [attr.aria-label]="clearLabel()"
             class="mr-1 inline-flex h-6 w-6 shrink-0 items-center justify-center self-center rounded-full text-ink-faint hover:bg-black/5 hover:text-ink-soft"
             (click)="clear($event)"
           >
@@ -9134,7 +10463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                   [value]="filterText()"
                   (input)="onFilter($event)"
                   (keydown)="onFilterKeydown($event)"
-                  aria-label="Rechercher"
+                  [attr.aria-label]="filterLabel()"
                   class="h-9 w-full bg-transparent pl-8 pr-2 text-sm text-ink outline-none placeholder:text-ink-faint"
                 />
               </div>
@@ -9160,7 +10489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                   <span class="h-0.5 w-2.5 rounded-full bg-white"></span>
                 }
               </span>
-              Tout sélectionner
+              {{ selectAllLabel() }}
             </button>
           }
 
@@ -9226,29 +10555,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectOption), { isSignal: true }] }], emptyTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectEmpty), { isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectFooter), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", 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 }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectOption), { isSignal: true }] }], emptyTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectEmpty), { isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectFooter), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 const SDS_PHONE_COUNTRIES = [
-    { iso2: 'BE', name: 'Belgique', dialCode: '32', lengths: [9], format: '### ## ## ##', example: '470123456' },
+    { iso2: 'BE', name: 'Belgium', dialCode: '32', lengths: [9], format: '### ## ## ##', example: '470123456' },
     { iso2: 'FR', name: 'France', dialCode: '33', lengths: [9], format: '# ## ## ## ##', example: '612345678' },
     { iso2: 'LU', name: 'Luxembourg', dialCode: '352', lengths: [9, 8, 6], format: '### ### ###', example: '628123456' },
-    { iso2: 'NL', name: 'Pays-Bas', dialCode: '31', lengths: [9], format: '# ## ## ## ##', example: '612345678' },
-    { iso2: 'DE', name: 'Allemagne', dialCode: '49', lengths: [10, 11], format: '#### #######', example: '15123456789' },
-    { iso2: 'GB', name: 'Royaume-Uni', dialCode: '44', lengths: [10], format: '#### ######', example: '7400123456' },
-    { iso2: 'IE', name: 'Irlande', dialCode: '353', lengths: [9], format: '## ### ####', example: '850123456' },
-    { iso2: 'CH', name: 'Suisse', dialCode: '41', lengths: [9], format: '## ### ## ##', example: '781234567' },
-    { iso2: 'ES', name: 'Espagne', dialCode: '34', lengths: [9], format: '### ## ## ##', example: '612345678' },
-    { iso2: 'IT', name: 'Italie', dialCode: '39', lengths: [9, 10], format: '### ### ####', example: '3123456789' },
+    { iso2: 'NL', name: 'Netherlands', dialCode: '31', lengths: [9], format: '# ## ## ## ##', example: '612345678' },
+    { iso2: 'DE', name: 'Germany', dialCode: '49', lengths: [10, 11], format: '#### #######', example: '15123456789' },
+    { iso2: 'GB', name: 'United Kingdom', dialCode: '44', lengths: [10], format: '#### ######', example: '7400123456' },
+    { iso2: 'IE', name: 'Ireland', dialCode: '353', lengths: [9], format: '## ### ####', example: '850123456' },
+    { iso2: 'CH', name: 'Switzerland', dialCode: '41', lengths: [9], format: '## ### ## ##', example: '781234567' },
+    { iso2: 'ES', name: 'Spain', dialCode: '34', lengths: [9], format: '### ## ## ##', example: '612345678' },
+    { iso2: 'IT', name: 'Italy', dialCode: '39', lengths: [9, 10], format: '### ### ####', example: '3123456789' },
     { iso2: 'PT', name: 'Portugal', dialCode: '351', lengths: [9], format: '### ### ###', example: '912345678' },
-    { iso2: 'AT', name: 'Autriche', dialCode: '43', lengths: [10, 11], format: '### #######', example: '6641234567' },
-    { iso2: 'DK', name: 'Danemark', dialCode: '45', lengths: [8], format: '## ## ## ##', example: '20123456' },
-    { iso2: 'SE', name: 'Suède', dialCode: '46', lengths: [9], format: '## ### ## ##', example: '701234567' },
-    { iso2: 'NO', name: 'Norvège', dialCode: '47', lengths: [8], format: '### ## ###', example: '40612345' },
-    { iso2: 'PL', name: 'Pologne', dialCode: '48', lengths: [9], format: '### ### ###', example: '512345678' },
-    { iso2: 'US', name: 'États-Unis', dialCode: '1', lengths: [10], format: '(###) ###-####', example: '2015550123' },
+    { iso2: 'AT', name: 'Austria', dialCode: '43', lengths: [10, 11], format: '### #######', example: '6641234567' },
+    { iso2: 'DK', name: 'Denmark', dialCode: '45', lengths: [8], format: '## ## ## ##', example: '20123456' },
+    { iso2: 'SE', name: 'Sweden', dialCode: '46', lengths: [9], format: '## ### ## ##', example: '701234567' },
+    { iso2: 'NO', name: 'Norway', dialCode: '47', lengths: [8], format: '### ## ###', example: '40612345' },
+    { iso2: 'PL', name: 'Poland', dialCode: '48', lengths: [9], format: '### ### ###', example: '512345678' },
+    { iso2: 'US', name: 'United States', dialCode: '1', lengths: [10], format: '(###) ###-####', example: '2015550123' },
     { iso2: 'CA', name: 'Canada', dialCode: '1', lengths: [10], format: '(###) ###-####', example: '2042345678' },
-    { iso2: 'MA', name: 'Maroc', dialCode: '212', lengths: [9], format: '### ## ## ##', example: '612345678' },
-    { iso2: 'TR', name: 'Turquie', dialCode: '90', lengths: [10], format: '### ### ## ##', example: '5012345678' },
+    { iso2: 'MA', name: 'Morocco', dialCode: '212', lengths: [9], format: '### ## ## ##', example: '612345678' },
+    { iso2: 'TR', name: 'Turkey', dialCode: '90', lengths: [10], format: '### ### ## ##', example: '5012345678' },
 ];
 /** Reduce raw input to national-significant digits (drops non-digits & leading trunk zeros). */
 function sdsNormalizeSignificant(raw) {
@@ -9303,7 +10632,7 @@ let nextId$4 = 0;
  * '+32470123456') and Validator (national length is checked per country).
  *
  * @example
- * <sds-phone-input label="Téléphone" defaultCountry="BE"
+ * <sds-phone-input label="Phone" defaultCountry="BE"
  *                 [preferredCountries]="['BE','FR','LU']"
  *                 [(ngModel)]="phone" required />
  */
@@ -9328,43 +10657,67 @@ class SdsPhoneInput {
     onlyCountries = input([], ...(ngDevMode ? [{ debugName: "onlyCountries" }] : []));
     /** 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" }] : []));
+    /**
+     * BCP 47 locale for the country names (list, search and the selector's accessible name), resolved
+     * with `Intl.DisplayNames` — e.g. `nl-BE` shows "België". Empty (default) uses the built-in English
+     * names. The search also matches the English name.
+     */
+    locale = input('', ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    requiredMessage = input('Phone number required', ...(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.
+     * name (localised by {@link locale}). A token rather than a prefix because word order differs per
+     * language. English default; translate it in any app serving more than one language.
      */
-    countryLabel = input('Indicatif pays : {country}', ...(ngDevMode ? [{ debugName: "countryLabel" }] : []));
+    countryLabel = input('Country code: {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.
+     * name — translate it in any app serving more than one language.
      */
-    clearLabel = input('Effacer', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    clearLabel = input('Clear', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
     /** Accessible name for the country-search field inside the dropdown. */
-    searchLabel = input('Rechercher un pays', ...(ngDevMode ? [{ debugName: "searchLabel" }] : []));
+    searchLabel = input('Search countries', ...(ngDevMode ? [{ debugName: "searchLabel" }] : []));
     /** Placeholder text of the country-search field. */
-    searchPlaceholder = input('Rechercher un pays…', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
+    searchPlaceholder = input('Search countries…', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
     /** Shown in place of the list when no country matches the filter. */
-    noResultsLabel = input('Aucun pays', ...(ngDevMode ? [{ debugName: "noResultsLabel" }] : []));
+    noResultsLabel = input('No countries found', ...(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.
+     * lengths, joined with {@link lengthSeparator}. English defaults; translate them alongside
+     * {@link requiredMessage}.
      */
-    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" }] : []));
+    incompleteMessage = input('Incomplete number — {lengths} digits expected', ...(ngDevMode ? [{ debugName: "incompleteMessage" }] : []));
+    invalidMessage = input('Invalid number — {lengths} digits expected', ...(ngDevMode ? [{ debugName: "invalidMessage" }] : []));
+    /** Joins the accepted lengths when a country allows more than one (e.g. "8 or 9"). */
+    lengthSeparator = input(' or ', ...(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" }] : []));
+    exampleHintTemplate = input('e.g. {number}', ...(ngDevMode ? [{ debugName: "exampleHintTemplate" }] : []));
     /** Emitted with the parsed parts whenever the number or country changes. */
     phoneChange = output();
+    /** `Intl.DisplayNames` for {@link locale}, or null (built-in English names). */
+    regionNames = computed(() => {
+        const locale = this.locale();
+        if (!locale || typeof Intl === 'undefined' || !('DisplayNames' in Intl))
+            return null;
+        try {
+            return new Intl.DisplayNames([locale], { type: 'region' });
+        }
+        catch {
+            return null;
+        }
+    }, ...(ngDevMode ? [{ debugName: "regionNames" }] : []));
+    /** The country's display name in {@link locale}, falling back to the built-in English name. */
+    countryName(c) {
+        try {
+            return this.regionNames()?.of(c.iso2) ?? c.name;
+        }
+        catch {
+            return c.name;
+        }
+    }
     national = signal('', ...(ngDevMode ? [{ debugName: "national" }] : []));
     countryIso = signal('', ...(ngDevMode ? [{ debugName: "countryIso" }] : []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
@@ -9403,7 +10756,8 @@ class SdsPhoneInput {
         const all = this.availableCountries();
         if (!f)
             return all;
-        return all.filter((c) => c.name.toLowerCase().includes(f) ||
+        return all.filter((c) => this.countryName(c).toLowerCase().includes(f) ||
+            c.name.toLowerCase().includes(f) ||
             c.iso2.toLowerCase().includes(f) ||
             c.dialCode.includes(f.replace('+', '')));
     }, ...(ngDevMode ? [{ debugName: "filteredCountries" }] : []));
@@ -9416,7 +10770,7 @@ class SdsPhoneInput {
         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" }] : []));
+    countryAriaLabel = computed(() => this.countryLabel().replace('{country}', this.countryName(this.country())), ...(ngDevMode ? [{ debugName: "countryAriaLabel" }] : []));
     e164 = computed(() => {
         const d = this.national();
         return d ? `+${this.country().dialCode}${d}` : '';
@@ -9732,7 +11086,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 }, 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: [
+    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 }, locale: { classPropertyName: "locale", publicName: "locale", 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: `
@@ -9841,7 +11195,7 @@ class SdsPhoneInput {
               <span class="grid h-5 min-w-7 place-items-center rounded bg-muted px-1 text-[11px] font-semibold tracking-wide text-ink-soft">
                 {{ c.iso2 }}
               </span>
-              <span class="flex-1 truncate">{{ c.name }}</span>
+              <span class="flex-1 truncate">{{ countryName(c) }}</span>
               <span class="text-ink-faint">+{{ c.dialCode }}</span>
             </li>
           } @empty {
@@ -9982,7 +11336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               <span class="grid h-5 min-w-7 place-items-center rounded bg-muted px-1 text-[11px] font-semibold tracking-wide text-ink-soft">
                 {{ c.iso2 }}
               </span>
-              <span class="flex-1 truncate">{{ c.name }}</span>
+              <span class="flex-1 truncate">{{ countryName(c) }}</span>
               <span class="text-ink-faint">+{{ c.dialCode }}</span>
             </li>
           } @empty {
@@ -10003,7 +11357,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 }] }], 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 }] }] } });
+        }], 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 }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", 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',
@@ -10279,7 +11633,7 @@ class SdsPaginator {
         </label>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "component", type: SdsSelect, selector: "sds-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "label", "ariaLabel", "hint", "error", "size", "appearance", "disabled", "clearable", "filter", "filterPlaceholder", "emptyMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "component", type: SdsSelect, selector: "sds-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "dataKey", "placeholder", "label", "ariaLabel", "hint", "error", "size", "appearance", "disabled", "clearable", "filter", "filterPlaceholder", "emptyMessage", "clearLabel", "filterLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsPaginator, decorators: [{
             type: Component,
@@ -10405,8 +11759,13 @@ class SdsTabsStore {
     id = `sds-tabs-${nextId$3++}`;
     /** Whether the tab list scrolls horizontally (mirrors [scrollable]). */
     scrollable = signal(false, ...(ngDevMode ? [{ debugName: "scrollable" }] : []));
+    /** Controlled mode (mirrors [controlled]): a click only REQUESTS a tab, the host sets [value]. */
+    controlled = signal(false, ...(ngDevMode ? [{ debugName: "controlled" }] : []));
+    /** Called with every tab the user picks (wired to the host's (tabSelect) output). */
+    onSelect = () => { };
     value;
     registered = signal([], ...(ngDevMode ? [{ debugName: "registered" }] : []));
+    panels = signal([], ...(ngDevMode ? [{ debugName: "panels" }] : []));
     /** Called once by <sds-tabs> to share its two-way `value` signal. */
     connect(value) {
         this.value = value;
@@ -10417,8 +11776,11 @@ class SdsTabsStore {
     isActive(value) {
         return this.value() === value;
     }
+    /** A user pick. Uncontrolled: becomes the active tab. Controlled: only reported to the host. */
     select(value) {
-        this.value.set(value);
+        this.onSelect(value);
+        if (!this.controlled())
+            this.value.set(value);
     }
     registerTab(value) {
         this.registered.update((list) => (list.includes(value) ? list : [...list, value]));
@@ -10429,6 +11791,16 @@ class SdsTabsStore {
     unregisterTab(value) {
         this.registered.update((list) => list.filter((v) => v !== value));
     }
+    registerPanel(value) {
+        this.panels.update((list) => (list.includes(value) ? list : [...list, value]));
+    }
+    unregisterPanel(value) {
+        this.panels.update((list) => list.filter((v) => v !== value));
+    }
+    /** Whether an <sds-tab-panel> exists for this value (tabs whose content lives elsewhere have none). */
+    hasPanel(value) {
+        return this.panels().includes(value);
+    }
     tabId(value) {
         return `${this.id}-tab-${value}`;
     }
@@ -10448,10 +11820,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * <sds-tab-panel> [value]; it is two-way bindable via [(value)]. When omitted,
  * the first registered tab is selected.
  *
+ * **Controlled tabs** (`controlled`): a click, arrow key or Home/End only emits `(tabSelect)`; the active
+ * tab changes when the host changes `[value]`. Use it when the active tab lives somewhere else — a
+ * `?tab=` query param — or when switching can be refused (an unsaved-changes guard): the tab never
+ * shows as selected before the host agrees. `(tabSelect)` also fires in the default mode.
+ *
+ * **Panels are optional.** A tab set whose content is rendered by the host (an `@switch` on the value, a
+ * router outlet) can omit <sds-tab-panels>; a tab then carries no `aria-controls` to a missing panel.
+ *
  * @example
  * <sds-tabs [(value)]="active">
  *   <sds-tab-list>
- *     <sds-tab value="0">Détails</sds-tab>
+ *     <sds-tab value="0">Details</sds-tab>
  *     <sds-tab value="1">Historique</sds-tab>
  *   </sds-tab-list>
  *   <sds-tab-panels>
@@ -10459,6 +11839,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  *     <sds-tab-panel value="1">…</sds-tab-panel>
  *   </sds-tab-panels>
  * </sds-tabs>
+ *
+ * @example
+ * <!-- driven by a query param, content rendered by the host -->
+ * <sds-tabs controlled [value]="activeTab()" (tabSelect)="selectTab($event)">
+ *   <sds-tab-list>
+ *     @for (tab of tabs; track tab) {
+ *       <sds-tab [value]="tab">{{ 'menu.tabs.' + tab | translate }}</sds-tab>
+ *     }
+ *   </sds-tab-list>
+ * </sds-tabs>
  */
 class SdsTabs {
     store = inject(SdsTabsStore);
@@ -10466,12 +11856,21 @@ class SdsTabs {
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     /** Let the tab list scroll horizontally instead of overflowing. */
     scrollable = input(false, ...(ngDevMode ? [{ debugName: "scrollable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Controlled mode: a user pick only emits (tabSelect); the host decides by setting [value]. See the
+     * class note.
+     */
+    controlled = input(false, ...(ngDevMode ? [{ debugName: "controlled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Emits the value of the tab the user picked (in both modes). */
+    tabSelect = output();
     constructor() {
         this.store.connect(this.value);
+        this.store.onSelect = (value) => this.tabSelect.emit(value);
         effect(() => this.store.scrollable.set(this.scrollable()));
+        effect(() => this.store.controlled.set(this.controlled()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: SdsTabs, isStandalone: true, selector: "sds-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, providers: [SdsTabsStore], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: SdsTabs, isStandalone: true, selector: "sds-tabs", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, controlled: { classPropertyName: "controlled", publicName: "controlled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", tabSelect: "tabSelect" }, host: { classAttribute: "block" }, providers: [SdsTabsStore], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTabs, decorators: [{
             type: Component,
@@ -10482,7 +11881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     host: { class: 'block' },
                     template: `<ng-content />`,
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], controlled: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlled", required: false }] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }] } });
 
 /**
  * Container (role="tablist") for the <sds-tab> headers. Renders the bottom rule
@@ -10579,7 +11978,7 @@ class SdsTab {
       role="tab"
       [id]="store.tabId(value())"
       [attr.aria-selected]="active()"
-      [attr.aria-controls]="store.panelId(value())"
+      [attr.aria-controls]="store.hasPanel(value()) ? store.panelId(value()) : null"
       [attr.aria-disabled]="disabled() ? 'true' : null"
       [attr.tabindex]="active() && !disabled() ? 0 : -1"
       [disabled]="disabled()"
@@ -10602,7 +12001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       role="tab"
       [id]="store.tabId(value())"
       [attr.aria-selected]="active()"
-      [attr.aria-controls]="store.panelId(value())"
+      [attr.aria-controls]="store.hasPanel(value()) ? store.panelId(value()) : null"
       [attr.aria-disabled]="disabled() ? 'true' : null"
       [attr.tabindex]="active() && !disabled() ? 0 : -1"
       [disabled]="disabled()"
@@ -10647,6 +12046,12 @@ class SdsTabPanel {
     store = inject(SdsTabsStore);
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
     active = computed(() => this.store.isActive(this.value()), ...(ngDevMode ? [{ debugName: "active" }] : []));
+    ngOnInit() {
+        this.store.registerPanel(this.value());
+    }
+    ngOnDestroy() {
+        this.store.unregisterPanel(this.value());
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTabPanel, isStandalone: true, selector: "sds-tab-panel", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
     @if (active()) {
@@ -10968,8 +12373,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  *
  * @example
  * <sds-table [value]="rows" [columns]="cols">
- *   <ng-template sdsCell="statut" let-value let-row="row">
- *     <sds-badge [variant]="row.actif ? 'success' : 'neutral'">{{ value }}</sds-badge>
+ *   <ng-template sdsCell="status" let-value let-row="row">
+ *     <sds-badge [variant]="row.active ? 'success' : 'neutral'">{{ value }}</sds-badge>
  *   </ng-template>
  * </sds-table>
  */
@@ -10993,6 +12398,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "sdsCell", required: true }] }] } });
 
+/**
+ * Supplies a custom template for a column's header cell, matched by its field key. The template
+ * replaces the header's whole content — label and sort button — so it may hold its own controls
+ * (a column with a header template is not sortable from the header). Typical use: a "select all"
+ * checkbox above a checkbox column rendered with `sdsCell`.
+ *
+ * @example
+ * <sds-table [value]="rows" [columns]="cols" dataKey="id">
+ *   <ng-template sdsHeader="select" let-rows="rows">
+ *     <sds-checkbox ariaLabel="Select all rows" [ngModel]="allSelected(rows)"
+ *                   [indeterminate]="someSelected(rows)" (ngModelChange)="selectAll(rows, $event)" />
+ *   </ng-template>
+ *   <ng-template sdsCell="select" let-row="row">
+ *     <sds-checkbox [ariaLabel]="'Select ' + row.name" [ngModel]="isSelected(row)"
+ *                   (ngModelChange)="toggle(row, $event)" />
+ *   </ng-template>
+ * </sds-table>
+ */
+class SdsTableHeader {
+    /** The column `field` whose header this template renders. */
+    column = input.required(...(ngDevMode ? [{ debugName: "column", alias: 'sdsHeader' }] : [{ alias: 'sdsHeader' }]));
+    /** The wrapped template, rendered by the host table via ngTemplateOutlet. */
+    template = inject(TemplateRef);
+    /** Lets the compiler type-check `let-*` bindings against SdsTableHeaderContext. */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTableHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: SdsTableHeader, isStandalone: true, selector: "ng-template[sdsHeader]", inputs: { column: { classPropertyName: "column", publicName: "sdsHeader", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTableHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdsHeader]',
+                    standalone: true,
+                }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "sdsHeader", required: true }] }] } });
+
 /**
  * Supplies the detail template rendered beneath an expanded row when the host
  * `<sds-table>` has `expandable`. Use as a structural template inside the table:
@@ -11000,7 +12443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * @example
  * <sds-table [value]="rows" [columns]="cols" expandable>
  *   <ng-template sdsRowExpansion let-row>
- *     <div>Détails de {{ row.nom }}</div>
+ *     <div>Details of {{ row.name }}</div>
  *   </ng-template>
  * </sds-table>
  */
@@ -11022,6 +12465,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }] });
 
+/**
+ * Replaces the table's plain `emptyMessage` with rich content — an explanation and a call to action,
+ * a "no results for …" line. Rendered in the full-width empty row, only when not `loading`.
+ *
+ * @example
+ * <sds-table [value]="categories()" [columns]="cols">
+ *   <ng-template sdsTableEmpty>
+ *     <p>No categories yet.</p>
+ *     <sds-button size="sm" (click)="create()">Add a category</sds-button>
+ *   </ng-template>
+ * </sds-table>
+ */
+class SdsTableEmpty {
+    /** The wrapped template, rendered by the host table via ngTemplateOutlet. */
+    template = inject(TemplateRef);
+    /** Lets the compiler type-check `let-*` bindings against SdsTableEmptyContext. */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTableEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsTableEmpty, isStandalone: true, selector: "ng-template[sdsTableEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTableEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdsTableEmpty]',
+                    standalone: true,
+                }]
+        }] });
+
 const SIZES = {
     sm: { cell: 'px-3 py-2 text-sm', head: 'px-3 py-2' },
     md: { cell: 'px-4 py-2.5 text-sm', head: 'px-4 py-2.5' },
@@ -11050,6 +12523,16 @@ let nextId$1 = 0;
  *   across all pages**, not just the current page. Toggling it selects/clears
  *   every filtered row regardless of pagination (this is an intentional
  *   deviation from PrimeNG's per-page select-all).
+ * - **Custom headers:** `<ng-template sdsHeader="field">` replaces a column's header content (label and
+ *   sort button) — e.g. a "select all" checkbox above your own checkbox column. Its context carries the
+ *   filtered `rows` (all pages) and the displayed `pageRows` (see {@link SdsTableHeaderContext}).
+ * - **Clickable rows:** `rowClickable` makes each row an action (pointer, tab stop, Enter/Space) that
+ *   emits `(rowClick)`; clicks on buttons, links and fields inside a cell are not row clicks, so no
+ *   `stopPropagation()` is needed. `[rowClass]` adds per-row classes (e.g. dim a blocked row).
+ * - **Empty state:** `<ng-template sdsTableEmpty let-query>` replaces the plain `emptyMessage` (e.g. a
+ *   sentence and a "create" button); it is not shown while `loading`.
+ * - **Labels:** every visible and spoken string is an input with an English default (paginator,
+ *   filter, selection, expansion, editor). An app serving more than one language passes translations.
  *
  * **Editable grid (opt-in).** Set `editable` and give columns an `editor` (`text` · `number` ·
  * `currency` · `select`). The table becomes an ARIA grid with one tab stop: arrow keys move between
@@ -11059,14 +12542,16 @@ let nextId$1 = 0;
  * commits. Each changed commit emits `(cellCommit)` — the host applies it to its data (the table never
  * mutates rows) — and marks the cell dirty until {@link clearDirty}. Errors from `[cellErrors]` show
  * under the cell with `aria-invalid`. Number/currency cells use sds-input-number (live, locale-aware
- * formatting: "11,9" → "€11.90"). Everything else — sort, paging, selection — is unchanged.
+ * formatting: "11,9" → "€11.90"; in a comma locale such as fr-BE or nl-BE a typed "." is taken as the
+ * decimal separator, so "12.50" → "12,50 €"). The `select` editor is a styled native select with the
+ * column header as its name. Everything else — sort, paging, selection — is unchanged.
  *
  * @example
  * <sds-table [value]="staff" [columns]="cols" dataKey="id"
  *           sortable paginator [rows]="10" globalFilter
  *           selectionMode="multiple" [(selection)]="selected">
- *   <ng-template sdsCell="statut" let-value let-row="row">
- *     <sds-badge [variant]="row.actif ? 'success' : 'neutral'">{{ value }}</sds-badge>
+ *   <ng-template sdsCell="status" let-value let-row="row">
+ *     <sds-badge [variant]="row.active ? 'success' : 'neutral'">{{ value }}</sds-badge>
  *   </ng-template>
  * </sds-table>
  *
@@ -11117,6 +12602,14 @@ class SdsTable {
     selection = model(null, ...(ngDevMode ? [{ debugName: "selection" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     emptyMessage = input('No data', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    /**
+     * Rows are actions: a pointer cursor, a tab stop per row, and Enter/Space emit `(rowClick)` like a
+     * click. Clicks that land on a control inside a cell (button, link, input, checkbox…) do not count as
+     * a row click, so a row can open a drawer while its cells keep their own buttons.
+     */
+    rowClickable = input(false, ...(ngDevMode ? [{ debugName: "rowClickable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Extra classes per body row, e.g. `(row) => row.blocked ? 'opacity-60' : ''`. */
+    rowClass = input(null, ...(ngDevMode ? [{ debugName: "rowClass" }] : []));
     caption = input('', ...(ngDevMode ? [{ debugName: "caption" }] : []));
     /** Fallback accessible name for the `<table>` when no `caption` is set. */
     ariaLabel = input('Data table', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -11142,6 +12635,20 @@ class SdsTable {
     locale = input('', ...(ngDevMode ? [{ debugName: "locale" }] : []));
     /** Spoken marker of an edited (dirty) cell. */
     dirtyLabel = input('edited', ...(ngDevMode ? [{ debugName: "dirtyLabel" }] : []));
+    /** Empty choice of a `select` editor while the cell has no value (a column's `placeholder` wins). */
+    selectPlaceholder = input('Select…', ...(ngDevMode ? [{ debugName: "selectPlaceholder" }] : []));
+    /**
+     * Selection and expansion labels (English defaults; translate them in a multi-language app). The
+     * checkbox/radio and expander buttons are icon-only, so these strings are their only names.
+     */
+    selectAllLabel = input('Select all rows', ...(ngDevMode ? [{ debugName: "selectAllLabel" }] : []));
+    selectRowLabel = input('Select row', ...(ngDevMode ? [{ debugName: "selectRowLabel" }] : []));
+    /** Screen-reader name of the selection column's header in `single` mode. */
+    selectionColumnLabel = input('Selection', ...(ngDevMode ? [{ debugName: "selectionColumnLabel" }] : []));
+    /** Screen-reader name of the expander column's header (see {@link expandable}). */
+    expandColumnLabel = input('Details', ...(ngDevMode ? [{ debugName: "expandColumnLabel" }] : []));
+    expandRowLabel = input('Expand row', ...(ngDevMode ? [{ debugName: "expandRowLabel" }] : []));
+    collapseRowLabel = input('Collapse row', ...(ngDevMode ? [{ debugName: "collapseRowLabel" }] : []));
     // --- outputs --------------------------------------------------------------
     sortChange = output();
     pageChange = output();
@@ -11168,11 +12675,36 @@ class SdsTable {
     templateFor(field) {
         return this.templateMap().get(field) ?? null;
     }
+    // --- custom header templates ----------------------------------------------
+    headerTemplates = contentChildren(SdsTableHeader, ...(ngDevMode ? [{ debugName: "headerTemplates" }] : []));
+    headerTemplateMap = computed(() => {
+        const map = new Map();
+        for (const h of this.headerTemplates())
+            map.set(h.column(), h.template);
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "headerTemplateMap" }] : []));
+    headerTemplateFor(field) {
+        return this.headerTemplateMap().get(field) ?? null;
+    }
+    headerContext(column, index) {
+        return {
+            $implicit: column,
+            column,
+            index,
+            rows: this.filtered(),
+            pageRows: this.displayRows(),
+        };
+    }
     // --- row-expansion template -----------------------------------------------
     rowExpansion = contentChild(SdsTableRowExpansion, ...(ngDevMode ? [{ debugName: "rowExpansion" }] : []));
     expansionTemplate() {
         return this.rowExpansion()?.template ?? null;
     }
+    // --- empty-state template -------------------------------------------------
+    emptyTpl = contentChild(SdsTableEmpty, ...(ngDevMode ? [{ debugName: "emptyTpl" }] : []));
+    emptyTemplate() {
+        return this.emptyTpl()?.template ?? null;
+    }
     // --- pipeline state -------------------------------------------------------
     filterText = signal('', ...(ngDevMode ? [{ debugName: "filterText" }] : []));
     sortField = signal(null, ...(ngDevMode ? [{ debugName: "sortField" }] : []));
@@ -11293,7 +12825,8 @@ class SdsTable {
     totalColumnCount = computed(() => this.effectiveColumns().length + this.leadingColumnCount(), ...(ngDevMode ? [{ debugName: "totalColumnCount" }] : []));
     // --- sorting UI -----------------------------------------------------------
     isColumnSortable(col) {
-        return this.sortable() && !!col.sortable;
+        // A custom header template owns the header content, so it has no sort button.
+        return this.sortable() && !!col.sortable && !this.headerTemplateFor(col.field);
     }
     sortIcon(col) {
         if (this.sortField() !== col.field || this.sortOrder() === 0) {
@@ -11407,9 +12940,14 @@ class SdsTable {
             this.toggleRowSelection(row);
         }
     }
-    /** Enter/Space on a (single-mode) focusable row toggles its selection. */
+    /** Enter/Space on a focusable row (single selection or `rowClickable`) acts like a click on it. */
     onRowKeydown(event, row) {
-        if (this.selectionMode() !== 'single' || this.loading() || this.editable())
+        if (this.loading() || this.editable())
+            return;
+        if (this.selectionMode() !== 'single' && !this.rowClickable())
+            return;
+        // Only the row itself: Enter on a button inside a cell belongs to that button.
+        if (event.target !== event.currentTarget)
             return;
         event.preventDefault();
         this.onRowClick(row);
@@ -11428,9 +12966,11 @@ class SdsTable {
             this.rowSelect.emit(row);
         }
     }
-    onRowClick(row) {
+    onRowClick(row, event) {
         if (this.loading())
             return;
+        if (event && this.fromInnerControl(event))
+            return;
         this.rowClick.emit(row);
         if (this.selectionMode() === 'single') {
             if (this.equals(this.selection(), row)) {
@@ -11443,6 +12983,16 @@ class SdsTable {
             }
         }
     }
+    /** Whether a click started on an interactive element inside the row (not on the row itself). */
+    fromInnerControl(event) {
+        const row = event.currentTarget;
+        const target = event.target;
+        if (!row || !target || !(target instanceof Element))
+            return false;
+        const control = target.closest('button, a[href], input, select, textarea, label, [contenteditable="true"], ' +
+            '[role="button"], [role="checkbox"], [role="switch"], [role="radio"], [role="combobox"], [role="menuitem"]');
+        return !!control && control !== row && row.contains(control);
+    }
     // --- paginator ------------------------------------------------------------
     onPageChange(state) {
         this.editing.set(null);
@@ -11653,6 +13203,13 @@ class SdsTable {
         }
         return String(v);
     }
+    /** Shared frame of the in-cell editors (text, select): height, radius, focus ring, error state. */
+    editorClass(row, col) {
+        const tone = this.cellErrorFor(row, col.field)
+            ? 'border-danger ring-danger/25'
+            : 'border-brand-500 ring-brand-500/25';
+        return `h-9 w-full rounded-control border bg-surface text-sm text-ink outline-none ring-2 ${tone}`;
+    }
     gridCellClass(row, col, r, c) {
         const align = ALIGN[col.align ?? 'left'];
         const editing = this.isEditing(r, c);
@@ -11969,7 +13526,7 @@ class SdsTable {
         const align = ALIGN[col?.align ?? 'left'];
         return `${SIZES[this.size()].cell} ${align} text-ink align-middle`;
     }
-    rowClass(row, index) {
+    bodyRowClass(row, index) {
         const parts = ['transition-colors'];
         if (this.gridlines())
             parts.push('divide-x divide-border');
@@ -11981,9 +13538,12 @@ class SdsTable {
         }
         if (this.hoverable() && !this.isRowSelected(row))
             parts.push('hover:bg-muted/60');
-        if (this.selectionMode() === 'single') {
+        if (this.selectionMode() === 'single' || (this.rowClickable() && !this.editable())) {
             parts.push('cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500');
         }
+        const extra = this.rowClass()?.(row, index);
+        if (extra)
+            parts.push(extra);
         return parts.join(' ');
     }
     checkboxClass(checked, indeterminate) {
@@ -11992,7 +13552,7 @@ class SdsTable {
             : 'border-border bg-surface';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTable, isStandalone: true, selector: "sds-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, gridlines: { classPropertyName: "gridlines", publicName: "gridlines", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", 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 }, showCurrentPageReport: { classPropertyName: "showCurrentPageReport", publicName: "showCurrentPageReport", isSignal: true, isRequired: false, transformFunction: null }, currentPageReportTemplate: { classPropertyName: "currentPageReportTemplate", publicName: "currentPageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageLabel: { classPropertyName: "rowsPerPageLabel", publicName: "rowsPerPageLabel", 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 }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: true, isRequired: false, transformFunction: null }, globalFilterPlaceholder: { classPropertyName: "globalFilterPlaceholder", publicName: "globalFilterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, globalFilterAriaLabel: { classPropertyName: "globalFilterAriaLabel", publicName: "globalFilterAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFields: { classPropertyName: "globalFilterFields", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, editOn: { classPropertyName: "editOn", publicName: "editOn", isSignal: true, isRequired: false, transformFunction: null }, cellErrors: { classPropertyName: "cellErrors", publicName: "cellErrors", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dirtyLabel: { classPropertyName: "dirtyLabel", publicName: "dirtyLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", sortChange: "sortChange", pageChange: "pageChange", rowSelect: "rowSelect", rowUnselect: "rowUnselect", lazyLoad: "lazyLoad", rowClick: "rowClick", rowExpand: "rowExpand", rowCollapse: "rowCollapse", colReorder: "colReorder", cellCommit: "cellCommit" }, host: { classAttribute: "block" }, queries: [{ propertyName: "cellTemplates", predicate: SdsTableCell, isSignal: true }, { propertyName: "rowExpansion", first: true, predicate: SdsTableRowExpansion, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "numberEditor", first: true, predicate: SdsInputNumber, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTable, isStandalone: true, selector: "sds-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, gridlines: { classPropertyName: "gridlines", publicName: "gridlines", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", 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 }, showCurrentPageReport: { classPropertyName: "showCurrentPageReport", publicName: "showCurrentPageReport", isSignal: true, isRequired: false, transformFunction: null }, currentPageReportTemplate: { classPropertyName: "currentPageReportTemplate", publicName: "currentPageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageLabel: { classPropertyName: "rowsPerPageLabel", publicName: "rowsPerPageLabel", 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 }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: true, isRequired: false, transformFunction: null }, globalFilterPlaceholder: { classPropertyName: "globalFilterPlaceholder", publicName: "globalFilterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, globalFilterAriaLabel: { classPropertyName: "globalFilterAriaLabel", publicName: "globalFilterAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFields: { classPropertyName: "globalFilterFields", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, rowClickable: { classPropertyName: "rowClickable", publicName: "rowClickable", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, editOn: { classPropertyName: "editOn", publicName: "editOn", isSignal: true, isRequired: false, transformFunction: null }, cellErrors: { classPropertyName: "cellErrors", publicName: "cellErrors", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dirtyLabel: { classPropertyName: "dirtyLabel", publicName: "dirtyLabel", isSignal: true, isRequired: false, transformFunction: null }, selectPlaceholder: { classPropertyName: "selectPlaceholder", publicName: "selectPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, selectRowLabel: { classPropertyName: "selectRowLabel", publicName: "selectRowLabel", isSignal: true, isRequired: false, transformFunction: null }, selectionColumnLabel: { classPropertyName: "selectionColumnLabel", publicName: "selectionColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, expandColumnLabel: { classPropertyName: "expandColumnLabel", publicName: "expandColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, expandRowLabel: { classPropertyName: "expandRowLabel", publicName: "expandRowLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseRowLabel: { classPropertyName: "collapseRowLabel", publicName: "collapseRowLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", sortChange: "sortChange", pageChange: "pageChange", rowSelect: "rowSelect", rowUnselect: "rowUnselect", lazyLoad: "lazyLoad", rowClick: "rowClick", rowExpand: "rowExpand", rowCollapse: "rowCollapse", colReorder: "colReorder", cellCommit: "cellCommit" }, host: { classAttribute: "block" }, queries: [{ propertyName: "cellTemplates", predicate: SdsTableCell, isSignal: true }, { propertyName: "headerTemplates", predicate: SdsTableHeader, isSignal: true }, { propertyName: "rowExpansion", first: true, predicate: SdsTableRowExpansion, descendants: true, isSignal: true }, { propertyName: "emptyTpl", first: true, predicate: SdsTableEmpty, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "numberEditor", first: true, predicate: SdsInputNumber, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="rounded-card border border-border bg-surface overflow-hidden">
       <!-- Toolbar: caption + global filter -->
       @if (caption() || globalFilter()) {
@@ -12057,7 +13617,7 @@ class SdsTable {
                   [class.z-10]="scrollHeight()"
                   [class.bg-muted]="scrollHeight()"
                 >
-                  <span class="sr-only">Détails</span>
+                  <span class="sr-only">{{ expandColumnLabel() }}</span>
                 </th>
               }
 
@@ -12076,7 +13636,7 @@ class SdsTable {
                       type="button"
                       role="checkbox"
                       [attr.aria-checked]="headerChecked() ? 'true' : (headerIndeterminate() ? 'mixed' : 'false')"
-                      aria-label="Tout sélectionner"
+                      [attr.aria-label]="selectAllLabel()"
                       [disabled]="loading()"
                       class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-1 disabled:opacity-60"
                       [class]="checkboxClass(headerChecked(), headerIndeterminate())"
@@ -12089,7 +13649,7 @@ class SdsTable {
                       }
                     </button>
                   } @else {
-                    <span class="sr-only">Sélection</span>
+                    <span class="sr-only">{{ selectionColumnLabel() }}</span>
                   }
                 </th>
               }
@@ -12112,7 +13672,12 @@ class SdsTable {
                   (drop)="onColDrop($event, i)"
                   (dragend)="onColDragEnd()"
                 >
-                  @if (isColumnSortable(col)) {
+                  @if (headerTemplateFor(col.field); as htpl) {
+                    <ng-container
+                      [ngTemplateOutlet]="htpl"
+                      [ngTemplateOutletContext]="headerContext(col, i)"
+                    />
+                  } @else if (isColumnSortable(col)) {
                     <button
                       type="button"
                       [disabled]="loading()"
@@ -12141,10 +13706,10 @@ class SdsTable {
           <tbody class="divide-y divide-border">
             @for (row of displayRows(); track trackRow($index, row); let i = $index) {
               <tr
-                [class]="rowClass(row, i)"
-                [attr.tabindex]="selectionMode() === 'single' && !loading() && !editable() ? 0 : null"
+                [class]="bodyRowClass(row, i)"
+                [attr.tabindex]="(selectionMode() === 'single' || rowClickable()) && !loading() && !editable() ? 0 : null"
                 [attr.aria-selected]="selectionMode() === 'single' ? (isRowSelected(row) ? 'true' : 'false') : null"
-                (click)="onRowClick(row)"
+                (click)="onRowClick(row, $event)"
                 (keydown.enter)="onRowKeydown($event, row)"
                 (keydown.space)="onRowKeydown($event, row)"
               >
@@ -12154,7 +13719,7 @@ class SdsTable {
                       type="button"
                       [attr.aria-expanded]="isExpanded(row)"
                       [attr.aria-controls]="isExpanded(row) ? rowDetailId(row) : null"
-                      [attr.aria-label]="isExpanded(row) ? 'Réduire la ligne' : 'Développer la ligne'"
+                      [attr.aria-label]="isExpanded(row) ? collapseRowLabel() : expandRowLabel()"
                       [disabled]="loading()"
                       class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded text-ink-soft hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-1 disabled:opacity-60"
                       (click)="onExpanderClick($event, row)"
@@ -12179,7 +13744,7 @@ class SdsTable {
                         type="button"
                         role="checkbox"
                         [attr.aria-checked]="isRowSelected(row) ? 'true' : 'false'"
-                        aria-label="Sélectionner la ligne"
+                        [attr.aria-label]="selectRowLabel()"
                         [disabled]="loading()"
                         class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-1 disabled:opacity-60"
                         [class]="checkboxClass(isRowSelected(row), false)"
@@ -12194,7 +13759,7 @@ class SdsTable {
                         type="button"
                         role="radio"
                         [attr.aria-checked]="isRowSelected(row) ? 'true' : 'false'"
-                        aria-label="Sélectionner la ligne"
+                        [attr.aria-label]="selectRowLabel()"
                         [disabled]="loading()"
                         class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded-full border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-1 disabled:opacity-60"
                         [class]="checkboxClass(isRowSelected(row), false)"
@@ -12241,20 +13806,31 @@ class SdsTable {
                       @if (isEditing(i, ci)) {
                         @switch (col.editor) {
                           @case ('select') {
-                            <select
-                              data-sds-cell-editor
-                              class="h-9 w-full rounded-control border border-brand-500 bg-surface px-2 text-sm text-ink outline-none ring-2 ring-brand-500/25"
-                              [attr.aria-label]="col.header"
-                              (change)="onSelectEditorChange($event, col)"
-                              (blur)="onEditorBlur()"
-                            >
-                              @if (draft() === null || draft() === undefined) {
-                                <option value="" disabled selected>{{ col.placeholder ?? '' }}</option>
-                              }
-                              @for (opt of col.options ?? []; track $index; let oi = $index) {
-                                <option [value]="oi" [selected]="opt.value === draft()">{{ opt.label }}</option>
-                              }
-                            </select>
+                            <!-- A native select (dependable inside a grid cell), dressed like the other editors:
+                                 same height, radius, focus ring and padding, a library chevron, dark-mode popup. -->
+                            <div class="relative flex items-center">
+                              <select
+                                data-sds-cell-editor
+                                [class]="editorClass(row, col) + ' cursor-pointer appearance-none pl-2.5 pr-8 dark:scheme-dark'"
+                                [attr.aria-label]="col.header"
+                                [attr.aria-invalid]="cellErrorFor(row, col.field) ? 'true' : null"
+                                [attr.aria-describedby]="cellErrorFor(row, col.field) ? cellErrorId(i, ci) : null"
+                                (change)="onSelectEditorChange($event, col)"
+                                (blur)="onEditorBlur()"
+                              >
+                                @if (draft() === null || draft() === undefined) {
+                                  <option value="" disabled selected>{{ col.placeholder ?? selectPlaceholder() }}</option>
+                                }
+                                @for (opt of col.options ?? []; track $index; let oi = $index) {
+                                  <option [value]="oi" [selected]="opt.value === draft()">{{ opt.label }}</option>
+                                }
+                              </select>
+                              <sds-icon
+                                name="chevron-down"
+                                [size]="16"
+                                class="pointer-events-none absolute right-2.5 text-ink-soft"
+                              />
+                            </div>
                           }
                           @case ('number') {
                             <sds-input-number
@@ -12269,6 +13845,8 @@ class SdsTable {
                               [maxFractionDigits]="col.maxFractionDigits ?? null"
                               [placeholder]="col.placeholder ?? ''"
                               [ariaLabel]="col.header"
+                              [invalid]="!!cellErrorFor(row, col.field)"
+                              [ariaDescribedby]="cellErrorFor(row, col.field) ? cellErrorId(i, ci) : ''"
                               (focusout)="onEditorBlur()"
                             />
                           }
@@ -12286,6 +13864,8 @@ class SdsTable {
                               [maxFractionDigits]="col.maxFractionDigits ?? null"
                               [placeholder]="col.placeholder ?? ''"
                               [ariaLabel]="col.header"
+                              [invalid]="!!cellErrorFor(row, col.field)"
+                              [ariaDescribedby]="cellErrorFor(row, col.field) ? cellErrorId(i, ci) : ''"
                               (focusout)="onEditorBlur()"
                             />
                           }
@@ -12293,10 +13873,12 @@ class SdsTable {
                             <input
                               data-sds-cell-editor
                               type="text"
-                              class="h-9 w-full rounded-control border border-brand-500 bg-surface px-2.5 text-sm text-ink outline-none ring-2 ring-brand-500/25 placeholder:text-ink-faint"
+                              [class]="editorClass(row, col) + ' px-2.5 placeholder:text-ink-faint'"
                               [value]="draftText()"
                               [placeholder]="col.placeholder ?? ''"
                               [attr.aria-label]="col.header"
+                              [attr.aria-invalid]="cellErrorFor(row, col.field) ? 'true' : null"
+                              [attr.aria-describedby]="cellErrorFor(row, col.field) ? cellErrorId(i, ci) : null"
                               (input)="onTextEditorInput($event)"
                               (blur)="onEditorBlur()"
                             />
@@ -12352,7 +13934,14 @@ class SdsTable {
                     [attr.colspan]="totalColumnCount()"
                     class="py-10 text-center text-ink-faint"
                   >
-                    {{ emptyMessage() }}
+                    @if (emptyTemplate(); as tpl) {
+                      <ng-container
+                        [ngTemplateOutlet]="tpl"
+                        [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                      />
+                    } @else {
+                      {{ emptyMessage() }}
+                    }
                   </td>
                 </tr>
               }
@@ -12396,7 +13985,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", "paginationLabel", "firstPageLabel", "previousPageLabel", "nextPageLabel", "lastPageLabel", "pageLinkLabel", "jumpToPageAriaLabel", "size", "disabled"], outputs: ["firstChange", "rowsChange", "pageChange"] }, { kind: "component", type: SdsInputNumber, selector: "sds-input-number", inputs: ["label", "ariaLabel", "placeholder", "hint", "error", "size", "appearance", "disabled", "readonly", "mode", "locale", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "min", "max", "step", "showButtons", "buttonLayout", "incrementIcon", "decrementIcon", "allowEmpty", "clearable", "clearLabel", "incrementLabel", "decrementLabel"] }, { 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: "component", type: SdsInputNumber, selector: "sds-input-number", inputs: ["label", "ariaLabel", "placeholder", "hint", "error", "invalid", "ariaDescribedby", "size", "appearance", "disabled", "readonly", "mode", "locale", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "min", "max", "step", "showButtons", "buttonLayout", "incrementIcon", "decrementIcon", "allowEmpty", "clearable", "clearLabel", "incrementLabel", "decrementLabel"] }, { 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,
@@ -12470,7 +14059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                   [class.z-10]="scrollHeight()"
                   [class.bg-muted]="scrollHeight()"
                 >
-                  <span class="sr-only">Détails</span>
+                  <span class="sr-only">{{ expandColumnLabel() }}</span>
                 </th>
               }
 
@@ -12489,7 +14078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                       type="button"
                       role="checkbox"
                       [attr.aria-checked]="headerChecked() ? 'true' : (headerIndeterminate() ? 'mixed' : 'false')"
-                      aria-label="Tout sélectionner"
+                      [attr.aria-label]="selectAllLabel()"
                       [disabled]="loading()"
                       class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-1 disabled:opacity-60"
                       [class]="checkboxClass(headerChecked(), headerIndeterminate())"
@@ -12502,7 +14091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                       }
                     </button>
                   } @else {
-                    <span class="sr-only">Sélection</span>
+                    <span class="sr-only">{{ selectionColumnLabel() }}</span>
                   }
                 </th>
               }
@@ -12525,7 +14114,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                   (drop)="onColDrop($event, i)"
                   (dragend)="onColDragEnd()"
                 >
-                  @if (isColumnSortable(col)) {
+                  @if (headerTemplateFor(col.field); as htpl) {
+                    <ng-container
+                      [ngTemplateOutlet]="htpl"
+                      [ngTemplateOutletContext]="headerContext(col, i)"
+                    />
+                  } @else if (isColumnSortable(col)) {
                     <button
                       type="button"
                       [disabled]="loading()"
@@ -12554,10 +14148,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           <tbody class="divide-y divide-border">
             @for (row of displayRows(); track trackRow($index, row); let i = $index) {
               <tr
-                [class]="rowClass(row, i)"
-                [attr.tabindex]="selectionMode() === 'single' && !loading() && !editable() ? 0 : null"
+                [class]="bodyRowClass(row, i)"
+                [attr.tabindex]="(selectionMode() === 'single' || rowClickable()) && !loading() && !editable() ? 0 : null"
                 [attr.aria-selected]="selectionMode() === 'single' ? (isRowSelected(row) ? 'true' : 'false') : null"
-                (click)="onRowClick(row)"
+                (click)="onRowClick(row, $event)"
                 (keydown.enter)="onRowKeydown($event, row)"
                 (keydown.space)="onRowKeydown($event, row)"
               >
@@ -12567,7 +14161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                       type="button"
                       [attr.aria-expanded]="isExpanded(row)"
                       [attr.aria-controls]="isExpanded(row) ? rowDetailId(row) : null"
-                      [attr.aria-label]="isExpanded(row) ? 'Réduire la ligne' : 'Développer la ligne'"
+                      [attr.aria-label]="isExpanded(row) ? collapseRowLabel() : expandRowLabel()"
                       [disabled]="loading()"
                       class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded text-ink-soft hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-1 disabled:opacity-60"
                       (click)="onExpanderClick($event, row)"
@@ -12592,7 +14186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         type="button"
                         role="checkbox"
                         [attr.aria-checked]="isRowSelected(row) ? 'true' : 'false'"
-                        aria-label="Sélectionner la ligne"
+                        [attr.aria-label]="selectRowLabel()"
                         [disabled]="loading()"
                         class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-1 disabled:opacity-60"
                         [class]="checkboxClass(isRowSelected(row), false)"
@@ -12607,7 +14201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         type="button"
                         role="radio"
                         [attr.aria-checked]="isRowSelected(row) ? 'true' : 'false'"
-                        aria-label="Sélectionner la ligne"
+                        [attr.aria-label]="selectRowLabel()"
                         [disabled]="loading()"
                         class="grid h-[18px] w-[18px] shrink-0 place-items-center rounded-full border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-1 disabled:opacity-60"
                         [class]="checkboxClass(isRowSelected(row), false)"
@@ -12654,20 +14248,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                       @if (isEditing(i, ci)) {
                         @switch (col.editor) {
                           @case ('select') {
-                            <select
-                              data-sds-cell-editor
-                              class="h-9 w-full rounded-control border border-brand-500 bg-surface px-2 text-sm text-ink outline-none ring-2 ring-brand-500/25"
-                              [attr.aria-label]="col.header"
-                              (change)="onSelectEditorChange($event, col)"
-                              (blur)="onEditorBlur()"
-                            >
-                              @if (draft() === null || draft() === undefined) {
-                                <option value="" disabled selected>{{ col.placeholder ?? '' }}</option>
-                              }
-                              @for (opt of col.options ?? []; track $index; let oi = $index) {
-                                <option [value]="oi" [selected]="opt.value === draft()">{{ opt.label }}</option>
-                              }
-                            </select>
+                            <!-- A native select (dependable inside a grid cell), dressed like the other editors:
+                                 same height, radius, focus ring and padding, a library chevron, dark-mode popup. -->
+                            <div class="relative flex items-center">
+                              <select
+                                data-sds-cell-editor
+                                [class]="editorClass(row, col) + ' cursor-pointer appearance-none pl-2.5 pr-8 dark:scheme-dark'"
+                                [attr.aria-label]="col.header"
+                                [attr.aria-invalid]="cellErrorFor(row, col.field) ? 'true' : null"
+                                [attr.aria-describedby]="cellErrorFor(row, col.field) ? cellErrorId(i, ci) : null"
+                                (change)="onSelectEditorChange($event, col)"
+                                (blur)="onEditorBlur()"
+                              >
+                                @if (draft() === null || draft() === undefined) {
+                                  <option value="" disabled selected>{{ col.placeholder ?? selectPlaceholder() }}</option>
+                                }
+                                @for (opt of col.options ?? []; track $index; let oi = $index) {
+                                  <option [value]="oi" [selected]="opt.value === draft()">{{ opt.label }}</option>
+                                }
+                              </select>
+                              <sds-icon
+                                name="chevron-down"
+                                [size]="16"
+                                class="pointer-events-none absolute right-2.5 text-ink-soft"
+                              />
+                            </div>
                           }
                           @case ('number') {
                             <sds-input-number
@@ -12682,6 +14287,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                               [maxFractionDigits]="col.maxFractionDigits ?? null"
                               [placeholder]="col.placeholder ?? ''"
                               [ariaLabel]="col.header"
+                              [invalid]="!!cellErrorFor(row, col.field)"
+                              [ariaDescribedby]="cellErrorFor(row, col.field) ? cellErrorId(i, ci) : ''"
                               (focusout)="onEditorBlur()"
                             />
                           }
@@ -12699,6 +14306,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                               [maxFractionDigits]="col.maxFractionDigits ?? null"
                               [placeholder]="col.placeholder ?? ''"
                               [ariaLabel]="col.header"
+                              [invalid]="!!cellErrorFor(row, col.field)"
+                              [ariaDescribedby]="cellErrorFor(row, col.field) ? cellErrorId(i, ci) : ''"
                               (focusout)="onEditorBlur()"
                             />
                           }
@@ -12706,10 +14315,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                             <input
                               data-sds-cell-editor
                               type="text"
-                              class="h-9 w-full rounded-control border border-brand-500 bg-surface px-2.5 text-sm text-ink outline-none ring-2 ring-brand-500/25 placeholder:text-ink-faint"
+                              [class]="editorClass(row, col) + ' px-2.5 placeholder:text-ink-faint'"
                               [value]="draftText()"
                               [placeholder]="col.placeholder ?? ''"
                               [attr.aria-label]="col.header"
+                              [attr.aria-invalid]="cellErrorFor(row, col.field) ? 'true' : null"
+                              [attr.aria-describedby]="cellErrorFor(row, col.field) ? cellErrorId(i, ci) : null"
                               (input)="onTextEditorInput($event)"
                               (blur)="onEditorBlur()"
                             />
@@ -12765,7 +14376,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     [attr.colspan]="totalColumnCount()"
                     class="py-10 text-center text-ink-faint"
                   >
-                    {{ emptyMessage() }}
+                    @if (emptyTemplate(); as tpl) {
+                      <ng-container
+                        [ngTemplateOutlet]="tpl"
+                        [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                      />
+                    } @else {
+                      {{ emptyMessage() }}
+                    }
                   </td>
                 </tr>
               }
@@ -12811,7 +14429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     </div>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], gridlines: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridlines", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], showCurrentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentPageReport", required: false }] }], currentPageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageReportTemplate", required: false }] }], rowsPerPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageLabel", 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 }] }], globalFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilter", required: false }] }], globalFilterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterPlaceholder", required: false }] }], globalFilterAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterAriaLabel", required: false }] }], globalFilterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterFields", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], resizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableColumns", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], editOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "editOn", required: false }] }], cellErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellErrors", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dirtyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirtyLabel", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }], rowUnselect: [{ type: i0.Output, args: ["rowUnselect"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowExpand: [{ type: i0.Output, args: ["rowExpand"] }], rowCollapse: [{ type: i0.Output, args: ["rowCollapse"] }], colReorder: [{ type: i0.Output, args: ["colReorder"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsTableCell), { isSignal: true }] }], rowExpansion: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsTableRowExpansion), { isSignal: true }] }], numberEditor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsInputNumber), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], gridlines: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridlines", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], showCurrentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentPageReport", required: false }] }], currentPageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageReportTemplate", required: false }] }], rowsPerPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageLabel", 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 }] }], globalFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilter", required: false }] }], globalFilterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterPlaceholder", required: false }] }], globalFilterAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterAriaLabel", required: false }] }], globalFilterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterFields", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], rowClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClickable", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], resizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableColumns", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], editOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "editOn", required: false }] }], cellErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellErrors", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dirtyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirtyLabel", required: false }] }], selectPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectPlaceholder", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], selectRowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectRowLabel", required: false }] }], selectionColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionColumnLabel", required: false }] }], expandColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandColumnLabel", required: false }] }], expandRowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandRowLabel", required: false }] }], collapseRowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseRowLabel", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }], rowUnselect: [{ type: i0.Output, args: ["rowUnselect"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowExpand: [{ type: i0.Output, args: ["rowExpand"] }], rowCollapse: [{ type: i0.Output, args: ["rowCollapse"] }], colReorder: [{ type: i0.Output, args: ["colReorder"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsTableCell), { isSignal: true }] }], headerTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsTableHeader), { isSignal: true }] }], rowExpansion: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsTableRowExpansion), { isSignal: true }] }], emptyTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsTableEmpty), { isSignal: true }] }], numberEditor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsInputNumber), { isSignal: true }] }] } });
 
 /**
  * A tiny transient-notification bus. Application code calls {@link success} / {@link error} / {@link info}
@@ -12823,7 +14441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  *
  * ```ts
  * private readonly toasts = inject(SdsToastService);
- * this.toasts.success('Enregistré.');
+ * this.toasts.success('Saved.');
  * ```
  *
  * Mount the host once (e.g. in the shell): `<sds-toast-host />`.
@@ -12873,10 +14491,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class SdsToastHost {
     toasts = inject(SdsToastService);
     /**
-     * Accessible name for each toast's close button. French default so existing consumers are unchanged; the
-     * button is icon-only, so an app serving more than one language MUST translate it.
+     * Accessible name for each toast's close button. English default; the button is icon-only, so an app
+     * serving more than one language MUST translate it.
      */
-    closeLabel = input('Fermer', ...(ngDevMode ? [{ debugName: "closeLabel" }] : []));
+    closeLabel = input('Close', ...(ngDevMode ? [{ debugName: "closeLabel" }] : []));
     errors = computed(() => this.toasts.toasts().filter((t) => t.kind === 'error'), ...(ngDevMode ? [{ debugName: "errors" }] : []));
     notices = computed(() => this.toasts.toasts().filter((t) => t.kind !== 'error'), ...(ngDevMode ? [{ debugName: "notices" }] : []));
     icon(kind) {
@@ -13059,11 +14677,11 @@ class SdsThemeToggle {
     /** `surface` for light/glass bars, `on-brand` for the dark brand bar. */
     appearance = input('surface', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
     /**
-     * Accessible names for the two actions. French defaults keep existing consumers unchanged; a
-     * multilingual app must pass translated values.
+     * Accessible names for the two actions. English defaults; a multilingual app must pass translated
+     * values.
      */
-    darkLabel = input('Passer en mode sombre', ...(ngDevMode ? [{ debugName: "darkLabel" }] : []));
-    lightLabel = input('Passer en mode clair', ...(ngDevMode ? [{ debugName: "lightLabel" }] : []));
+    darkLabel = input('Switch to dark mode', ...(ngDevMode ? [{ debugName: "darkLabel" }] : []));
+    lightLabel = input('Switch to light mode', ...(ngDevMode ? [{ debugName: "lightLabel" }] : []));
     iconSize = computed(() => Math.round(this.size() * 0.5), ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
     label = computed(() => (this.isDark() ? this.lightLabel() : this.darkLabel()), ...(ngDevMode ? [{ debugName: "label" }] : []));
     buttonClasses = computed(() => this.appearance() === 'on-brand'
@@ -13204,11 +14822,10 @@ class SdsTopbar {
     /** Show the mobile hamburger that toggles the sidebar drawer (< lg). */
     menuButton = input(true, ...(ngDevMode ? [{ debugName: "menuButton", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
-     * Accessible name for the hamburger. Defaults to French so nothing changes for existing consumers,
-     * but any app serving more than one language MUST pass a translated value — an icon-only control's
-     * aria-label is its only name, and a hardcoded one is simply wrong in every other locale.
+     * Accessible name for the hamburger. English default; any app serving more than one language MUST
+     * pass a translated value — an icon-only control's aria-label is its only name.
      */
-    menuLabel = input('Ouvrir le menu', ...(ngDevMode ? [{ debugName: "menuLabel" }] : []));
+    menuLabel = input('Open menu', ...(ngDevMode ? [{ debugName: "menuLabel" }] : []));
     /**
      * `brand` (default) paints the gradient and the wave; `surface` is white on a hairline border;
      * `glass` is a translucent, brand-tinted bar with a backdrop blur.
@@ -13549,7 +15166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * @example
  * <sds-sidebar appearance="surface" decorations>
  *   <sds-nav-group label="Membres">
- *     <sds-nav-item icon="user-plus" label="Créer un membre" link="/membres/new" />
+ *     <sds-nav-item icon="user-plus" label="Add a member" link="/members/new" />
  *   </sds-nav-group>
  *   <div sdsFooter>…</div>
  * </sds-sidebar>
@@ -13589,12 +15206,12 @@ class SdsSidebar {
         });
     }
     /**
-     * Accessible names for the rail's three icon-only controls. French defaults keep existing consumers
-     * unchanged; a multilingual app must pass translated values.
+     * Accessible names for the rail's three icon-only controls. English defaults; a multilingual app
+     * must pass translated values.
      */
-    collapseLabel = input('Replier le menu', ...(ngDevMode ? [{ debugName: "collapseLabel" }] : []));
-    expandLabel = input('Déplier le menu', ...(ngDevMode ? [{ debugName: "expandLabel" }] : []));
-    closeLabel = input('Fermer le menu', ...(ngDevMode ? [{ debugName: "closeLabel" }] : []));
+    collapseLabel = input('Collapse menu', ...(ngDevMode ? [{ debugName: "collapseLabel" }] : []));
+    expandLabel = input('Expand menu', ...(ngDevMode ? [{ debugName: "expandLabel" }] : []));
+    closeLabel = input('Close menu', ...(ngDevMode ? [{ debugName: "closeLabel" }] : []));
     /** `brand` (default) is the dark rail; `surface` is a light rail with brand accents. */
     appearance = input('brand', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
     /** Add slow-drifting brand-tinted blobs behind the rail (opt-in). */
@@ -14246,8 +15863,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * @example
  * <sds-user-menu name="Souhail AIT SAID" email="souhail@example.com" status="online" appearance="surface">
  *   <sds-menu-item icon="user" label="Profil" link="/profile" />
- *   <sds-menu-item icon="settings" label="Paramètres" link="/settings" />
- *   <sds-menu-item icon="log-out" label="Se déconnecter" tone="danger" (select)="signOut()" />
+ *   <sds-menu-item icon="settings" label="Settings" link="/settings" />
+ *   <sds-menu-item icon="log-out" label="Sign out" tone="danger" (select)="signOut()" />
  * </sds-user-menu>
  */
 class SdsUserMenu {
@@ -14269,7 +15886,7 @@ class SdsUserMenu {
     /** Override the trigger avatar's initials background; defaults per appearance. */
     avatarBgClass = input(null, ...(ngDevMode ? [{ debugName: "avatarBgClass" }] : []));
     /** Accessible name for the trigger (icon/avatar only when details are hidden). */
-    menuLabel = input('Menu du compte', ...(ngDevMode ? [{ debugName: "menuLabel" }] : []));
+    menuLabel = input('Account menu', ...(ngDevMode ? [{ debugName: "menuLabel" }] : []));
     openChange = output();
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     toggle() {
@@ -14376,7 +15993,7 @@ class SdsUserMenu {
         </div>
       </div>
     }
-  `, isInline: true, styles: [".animate-sds-menu{animation:sds-menu-in .14s ease-out}@keyframes sds-menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsAvatar, selector: "sds-avatar", inputs: ["name", "initials", "src", "size", "status", "bgClass"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".animate-sds-menu{animation:sds-menu-in .14s ease-out}@keyframes sds-menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsAvatar, selector: "sds-avatar", inputs: ["name", "initials", "src", "size", "status", "shape", "bgClass", "fallbackIcon", "placeholderClass", "decorative", "lazy"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsUserMenu, decorators: [{
             type: Component,
@@ -14465,7 +16082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * @example
  * <sds-menu-item icon="user" label="Profil" link="/profile" />                          <!-- in-app route -->
  * <sds-menu-item icon="external-link" label="Site public" href="https://…" target="_blank" />
- * <sds-menu-item icon="log-out" label="Se déconnecter" tone="danger" (select)="signOut()" />
+ * <sds-menu-item icon="log-out" label="Sign out" tone="danger" (select)="signOut()" />
  */
 class SdsMenuItem {
     icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
@@ -14593,7 +16210,7 @@ class SdsSearchCommand {
     /** The searchable entries. Order is preserved; when the field is empty they show as quick navigation. */
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     /** Placeholder on the trigger pill and the search field. */
-    placeholder = input('Rechercher…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    placeholder = input('Search…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     /** Show the built-in trigger pill. Turn off to drive the palette from your own control (`cmd.open()`). */
     showTrigger = input(true, ...(ngDevMode ? [{ debugName: "showTrigger", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Enable the global ⌘K / Ctrl-K shortcut. */
@@ -14603,15 +16220,15 @@ class SdsSearchCommand {
     /** `surface` (default) for a light / glass bar; `on-brand` for the dark brand bar. */
     appearance = input('surface', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
     /**
-     * User-facing copy. French defaults; a multilingual app passes translated values (the trigger and the
-     * field share `placeholder`, and `searchLabel` is the accessible name for both).
+     * User-facing copy. English defaults; a multilingual app passes translated values (the trigger and
+     * the field share `placeholder`, and `searchLabel` is the accessible name for both).
      */
-    searchLabel = input('Rechercher', ...(ngDevMode ? [{ debugName: "searchLabel" }] : []));
-    clearLabel = input('Effacer', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
-    emptyLabel = input('Aucun résultat', ...(ngDevMode ? [{ debugName: "emptyLabel" }] : []));
-    selectHint = input('Sélectionner', ...(ngDevMode ? [{ debugName: "selectHint" }] : []));
-    navigateHint = input('Naviguer', ...(ngDevMode ? [{ debugName: "navigateHint" }] : []));
-    closeHint = input('Fermer', ...(ngDevMode ? [{ debugName: "closeHint" }] : []));
+    searchLabel = input('Search', ...(ngDevMode ? [{ debugName: "searchLabel" }] : []));
+    clearLabel = input('Clear', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    emptyLabel = input('No results', ...(ngDevMode ? [{ debugName: "emptyLabel" }] : []));
+    selectHint = input('Select', ...(ngDevMode ? [{ debugName: "selectHint" }] : []));
+    navigateHint = input('Navigate', ...(ngDevMode ? [{ debugName: "navigateHint" }] : []));
+    closeHint = input('Close', ...(ngDevMode ? [{ debugName: "closeHint" }] : []));
     select = output();
     openChange = output();
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
@@ -15085,8 +16702,8 @@ class SdsLanguageSwitcher {
     /** `up` prefers opening the panel above the trigger — for a switcher near the bottom of the page. */
     direction = input('down', ...(ngDevMode ? [{ debugName: "direction" }] : []));
     /** Accessible name for the trigger and panel. */
-    menuLabel = input('Choisir la langue', ...(ngDevMode ? [{ debugName: "menuLabel" }] : []));
-    /** Optional visible header above the list (e.g. "Langue"). Omitted when empty. */
+    menuLabel = input('Choose language', ...(ngDevMode ? [{ debugName: "menuLabel" }] : []));
+    /** Optional visible header above the list (e.g. "Language"). Omitted when empty. */
     heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : []));
     openChange = output();
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
@@ -15450,5 +17067,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsDatePicker, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
+export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map