@besaitech/ng-design-system 0.0.54 → 0.0.56

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

@@ -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" }] : []));
@@ -427,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()) {
@@ -675,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',
@@ -703,7 +707,7 @@ const TEXT = {
  * 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. */
@@ -1470,108 +1474,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], 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;
-const SIZES$9 = {
-    sm: 'min-h-9 text-sm',
-    md: 'min-h-10 text-sm',
-    lg: 'min-h-12 text-base',
+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 };
+}
 /**
- * One language-aware text field for editing a translated value (a {@link SdsLocalizedValue} — a title,
- * label or description in several languages). Only one language is edited at a time; a compact switcher
- * sitting **inside the field** flips which translation you are editing, and a dot marks the languages that
- * already have content, so a partially-translated value is obvious at a glance.
+ * 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)]`.
  *
- * The active language defaults to {@link currentLanguage} when it is one of {@link languages}, otherwise the
- * first accepted language — so the field "opens on the language you are working in". Empty translations are
- * pruned from the emitted value, keeping the stored map clean.
+ * 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).
  *
- * Implements ControlValueAccessor over the map — use with reactive forms or `[(ngModel)]`:
- * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
+ * 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 SdsLocalizedInput {
-    inputId = `sds-localized-input-${nextId$j++}`;
+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" }] : []));
-    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    /** The accepted language codes, in display order (e.g. `['fr','nl','en']`). */
-    languages = input([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
-    /** Language to pre-select; used when it is one of {@link languages}, else the first accepted language. */
-    currentLanguage = input(null, ...(ngDevMode ? [{ debugName: "currentLanguage" }] : []));
-    multiline = input(false, ...(ngDevMode ? [{ debugName: "multiline", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    rows = input(3, ...(ngDevMode ? [{ debugName: "rows", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    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 }]));
-    /**
-     * Accessible name for the in-field language switcher, and the "no translation yet" title suffix on each
-     * language button. English defaults; translate them in a multi-language app (the buttons are
-     * letter-only, so the title carries their meaning).
-     */
-    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" }] : []));
+    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$9[this.size()]];
-        parts.push(this.isDisabled()
-            ? 'border-border opacity-60 cursor-not-allowed'
-            : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
-        return parts.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
-    /** The language currently being edited. */
-    activeLang = computed(() => {
-        const langs = this.languages();
-        if (!langs.length) {
-            return '';
-        }
-        const manual = this.manual();
-        if (manual && langs.includes(manual)) {
-            return manual;
-        }
-        const preferred = this.currentLanguage();
-        return preferred && langs.includes(preferred) ? preferred : langs[0];
-    }, ...(ngDevMode ? [{ debugName: "activeLang" }] : []));
-    current = computed(() => this.valueMap()[this.activeLang()] ?? '', ...(ngDevMode ? [{ debugName: "current" }] : []));
-    filled(lang) {
-        const text = this.valueMap()[lang];
-        return !!text && text.trim().length > 0;
-    }
-    fieldPlaceholder() {
-        const base = this.placeholder();
-        const lang = this.activeLang().toUpperCase();
-        if (base) {
-            return lang ? `${base} (${lang})` : base;
-        }
-        return lang ? `(${lang})` : '';
-    }
-    select(lang) {
-        this.manual.set(lang);
-        this.onTouched();
-    }
-    write(event) {
-        const lang = this.activeLang();
-        if (!lang) {
-            return;
-        }
-        const text = event.target.value;
-        const next = { ...this.valueMap() };
-        if (text) {
-            next[lang] = text;
+        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 {
-            delete next[lang];
+            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');
         }
-        this.valueMap.set(next);
-        this.onChange(next);
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+    pad(n) {
+        return pad2$1(n);
     }
     // --- ControlValueAccessor -------------------------------------------------
     onChange = () => { };
     onTouched = () => { };
     writeValue(value) {
-        this.valueMap.set(value ? { ...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;
@@ -1582,44 +1601,599 @@ class SdsLocalizedInput {
     setDisabledState(isDisabled) {
         this.cvaDisabled.set(isDisabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsLocalizedInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsLocalizedInput, isStandalone: true, selector: "sds-localized-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, currentLanguage: { classPropertyName: "currentLanguage", publicName: "currentLanguage", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", 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 }, languageSwitcherLabel: { classPropertyName: "languageSwitcherLabel", publicName: "languageSwitcherLabel", isSignal: true, isRequired: false, transformFunction: null }, untranslatedLabel: { classPropertyName: "untranslatedLabel", publicName: "untranslatedLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => SdsLocalizedInput),
-                multi: true,
-            },
-        ], ngImport: i0, template: `
+    // --- 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 [for]="inputId" class="mb-1.5 block text-sm font-medium text-ink">{{ label() }}</label>
+      <label
+        [id]="fieldId + '-label'"
+        [for]="fieldId + '-h'"
+        class="mb-1.5 block text-sm font-medium text-ink"
+      >
+        {{ label() }}
+      </label>
     }
 
     <div
-      class="relative flex items-stretch rounded-control border bg-surface text-ink transition-colors"
+      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 (multiline()) {
-        <textarea
-          [id]="inputId"
-          [rows]="rows()"
-          [placeholder]="fieldPlaceholder()"
-          [disabled]="isDisabled()"
-          [value]="current()"
-          (input)="write($event)"
-          (blur)="onTouched()"
-          class="min-w-0 flex-1 resize-y bg-transparent px-3.5 py-2 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
-        ></textarea>
-      } @else {
+      @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
-          [id]="inputId"
-          [placeholder]="fieldPlaceholder()"
+          #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()"
-          [value]="current()"
-          (input)="write($event)"
-          (blur)="onTouched()"
-          class="min-w-0 flex-1 bg-transparent px-3.5 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+          [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',
+    lg: 'min-h-12 text-base',
+};
+/**
+ * One language-aware text field for editing a translated value (a {@link SdsLocalizedValue} — a title,
+ * label or description in several languages). Only one language is edited at a time; a compact switcher
+ * sitting **inside the field** flips which translation you are editing, and a dot marks the languages that
+ * already have content, so a partially-translated value is obvious at a glance.
+ *
+ * The active language defaults to {@link currentLanguage} when it is one of {@link languages}, otherwise the
+ * first accepted language — so the field "opens on the language you are working in". Empty translations are
+ * pruned from the emitted value, keeping the stored map clean.
+ *
+ * Implements ControlValueAccessor over the map — use with reactive forms or `[(ngModel)]`:
+ * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
+ */
+class SdsLocalizedInput {
+    inputId = `sds-localized-input-${nextId$k++}`;
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** The accepted language codes, in display order (e.g. `['fr','nl','en']`). */
+    languages = input([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
+    /** Language to pre-select; used when it is one of {@link languages}, else the first accepted language. */
+    currentLanguage = input(null, ...(ngDevMode ? [{ debugName: "currentLanguage" }] : []));
+    multiline = input(false, ...(ngDevMode ? [{ debugName: "multiline", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    rows = input(3, ...(ngDevMode ? [{ debugName: "rows", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    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. English defaults; translate them in a multi-language app (the buttons are
+     * letter-only, so the title carries their meaning).
+     */
+    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" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    wrapperClasses = computed(() => {
+        const parts = [SIZES$9[this.size()]];
+        parts.push(this.isDisabled()
+            ? 'border-border opacity-60 cursor-not-allowed'
+            : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+    /** The language currently being edited. */
+    activeLang = computed(() => {
+        const langs = this.languages();
+        if (!langs.length) {
+            return '';
+        }
+        const manual = this.manual();
+        if (manual && langs.includes(manual)) {
+            return manual;
+        }
+        const preferred = this.currentLanguage();
+        return preferred && langs.includes(preferred) ? preferred : langs[0];
+    }, ...(ngDevMode ? [{ debugName: "activeLang" }] : []));
+    current = computed(() => this.valueMap()[this.activeLang()] ?? '', ...(ngDevMode ? [{ debugName: "current" }] : []));
+    filled(lang) {
+        const text = this.valueMap()[lang];
+        return !!text && text.trim().length > 0;
+    }
+    fieldPlaceholder() {
+        const base = this.placeholder();
+        const lang = this.activeLang().toUpperCase();
+        if (base) {
+            return lang ? `${base} (${lang})` : base;
+        }
+        return lang ? `(${lang})` : '';
+    }
+    select(lang) {
+        this.manual.set(lang);
+        this.onTouched();
+    }
+    write(event) {
+        const lang = this.activeLang();
+        if (!lang) {
+            return;
+        }
+        const text = event.target.value;
+        const next = { ...this.valueMap() };
+        if (text) {
+            next[lang] = text;
+        }
+        else {
+            delete next[lang];
+        }
+        this.valueMap.set(next);
+        this.onChange(next);
+    }
+    // --- ControlValueAccessor -------------------------------------------------
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.valueMap.set(value ? { ...value } : {});
+    }
+    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: SdsLocalizedInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsLocalizedInput, isStandalone: true, selector: "sds-localized-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, currentLanguage: { classPropertyName: "currentLanguage", publicName: "currentLanguage", isSignal: true, isRequired: false, transformFunction: null }, multiline: { classPropertyName: "multiline", publicName: "multiline", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", 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 }, languageSwitcherLabel: { classPropertyName: "languageSwitcherLabel", publicName: "languageSwitcherLabel", isSignal: true, isRequired: false, transformFunction: null }, untranslatedLabel: { classPropertyName: "untranslatedLabel", publicName: "untranslatedLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SdsLocalizedInput),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    @if (label()) {
+      <label [for]="inputId" class="mb-1.5 block text-sm font-medium text-ink">{{ label() }}</label>
+    }
+
+    <div
+      class="relative flex items-stretch rounded-control border bg-surface text-ink transition-colors"
+      [class]="wrapperClasses()"
+    >
+      @if (multiline()) {
+        <textarea
+          [id]="inputId"
+          [rows]="rows()"
+          [placeholder]="fieldPlaceholder()"
+          [disabled]="isDisabled()"
+          [value]="current()"
+          (input)="write($event)"
+          (blur)="onTouched()"
+          class="min-w-0 flex-1 resize-y bg-transparent px-3.5 py-2 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        ></textarea>
+      } @else {
+        <input
+          [id]="inputId"
+          [placeholder]="fieldPlaceholder()"
+          [disabled]="isDisabled()"
+          [value]="current()"
+          (input)="write($event)"
+          (blur)="onTouched()"
+          class="min-w-0 flex-1 bg-transparent px-3.5 outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        />
+      }
 
       @if (languages().length > 1) {
         <div
@@ -1746,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',
@@ -1763,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" }] : []));
@@ -2063,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',
@@ -2075,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. */
@@ -2335,7 +2909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], countLimitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLimitLabel", required: false }] }], countLabelTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLabelTemplate", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }] } });
 
-let nextId$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 },
@@ -2348,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" }] : []));
@@ -2592,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)
@@ -2607,7 +3181,7 @@ let nextId$f = 0;
  * <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" }] : []));
@@ -2755,7 +3329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
 
-let nextId$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.
@@ -2781,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" }] : []));
@@ -2964,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" }] : []));
@@ -2973,11 +3569,51 @@ 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" }] : []));
-    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(() => {
+    /**
+     * 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(() => {
         if (this.initials())
             return this.initials().slice(0, 2).toUpperCase();
         const parts = this.name().trim().split(/\s+/).filter(Boolean);
@@ -2988,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
@@ -3011,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
@@ -3044,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',
@@ -3267,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).
@@ -3287,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. */
@@ -3500,87 +4164,417 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }
       </span>
     </button>
-
-    @if (hint()) {
-      <span [id]="chipId + '-hint'" class="sr-only">{{ hint() }}</span>
-    }
-    <span class="sr-only" aria-live="polite" aria-atomic="true">{{ announcement() }}</span>
+
+    @if (hint()) {
+      <span [id]="chipId + '-hint'" class="sr-only">{{ hint() }}</span>
+    }
+    <span class="sr-only" aria-live="polite" aria-atomic="true">{{ announcement() }}</span>
+  `,
+                }]
+        }], 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$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
+ * stop, and the arrow keys (with Home/End) move AND select, like native radios. Disabled segments are
+ * skipped.
+ *
+ * The value is a two-way `model` — bind `[(value)]`. Give the group a name with [ariaLabel] (or
+ * [ariaLabelledby]); with [iconOnly] each segment keeps its label as its accessible name.
+ *
+ * @example
+ * <sds-segmented ariaLabel="Rule" [options]="[{ value: 'exactly', label: 'Exactly' }, { value: 'upTo', label: 'Up to' }]"
+ *                [(value)]="rule" />
+ */
+class SdsSegmented {
+    host = inject(ElementRef);
+    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)]`. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Accessible name of the group. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Id of an element that names the group (alternative to [ariaLabel]). */
+    ariaLabelledby = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Stretch to the container width, segments sharing it equally. */
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Show icons only; labels stay as accessible names and tooltips. */
+    iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    segments = computed(() => this.options().map((o) => o !== null && typeof o === 'object'
+        ? { value: o.value, label: o.label, icon: o.icon ?? null, disabled: !!o.disabled }
+        : { value: o, label: String(o), icon: null, disabled: false }), ...(ngDevMode ? [{ debugName: "segments" }] : []));
+    selectedIndex = computed(() => this.segments().findIndex((s) => s.value === this.value()), ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+    /** Roving tab stop: the selected segment, else the first enabled one. */
+    tabStop = computed(() => {
+        const sel = this.selectedIndex();
+        if (sel >= 0 && !this.segments()[sel].disabled)
+            return sel;
+        return this.segments().findIndex((s) => !s.disabled);
+    }, ...(ngDevMode ? [{ debugName: "tabStop" }] : []));
+    isSelected(seg) {
+        return seg.value === this.value();
+    }
+    segmentId(i) {
+        return `${this.baseId}-${i}`;
+    }
+    segmentClass(seg) {
+        const sm = this.size() === 'sm';
+        const base = 'inline-flex min-w-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-[calc(var(--radius-control)-2px)] ' +
+            'font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 ' +
+            'disabled:cursor-not-allowed disabled:opacity-50 ' +
+            (sm ? 'h-7 px-2.5 text-xs' : 'h-8 px-3.5 text-sm') +
+            (this.fullWidth() ? ' flex-1' : '') +
+            (this.iconOnly() ? (sm ? ' w-8 px-0' : ' w-9 px-0') : '');
+        // Selected: raised surface, ring and bold text — more than a tint, so it reads in greyscale too.
+        return this.isSelected(seg)
+            ? `${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())
+            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: { 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 }] }] } });
-
+        }], 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;
 /**
- * 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
- * stop, and the arrow keys (with Home/End) move AND select, like native radios. Disabled segments are
- * skipped.
+ * 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.
  *
- * The value is a two-way `model` — bind `[(value)]`. Give the group a name with [ariaLabel] (or
- * [ariaLabelledby]); with [iconOnly] each segment keeps its label as its accessible name.
+ * 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-segmented ariaLabel="Rule" [options]="[{ value: 'exactly', label: 'Exactly' }, { value: 'upTo', label: 'Up to' }]"
- *                [(value)]="rule" />
+ * <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 SdsSegmented {
+class SdsChipGroup {
     host = inject(ElementRef);
-    baseId = `sds-segmented-${nextId$c++}`;
-    /** Options: `{ value, label, icon?, disabled? }` objects, or bare strings/numbers. */
+    baseId = `sds-chip-group-${nextId$c++}`;
+    /** Options: `{ value, label, icon?, count?, disabled? }` objects, or bare strings/numbers. */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-    /** Selected value. Two-way: `[(value)]`. */
+    /** 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" }] : []));
-    /** Accessible name of the group. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
-    /** Id of an element that names the group (alternative to [ariaLabel]). */
     ariaLabelledby = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /** Stretch to the container width, segments sharing it equally. */
-    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /** Show icons only; labels stay as accessible names and tooltips. */
-    iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    segments = computed(() => this.options().map((o) => o !== null && typeof o === 'object'
-        ? { value: o.value, label: o.label, icon: o.icon ?? null, disabled: !!o.disabled }
-        : { value: o, label: String(o), icon: null, disabled: false }), ...(ngDevMode ? [{ debugName: "segments" }] : []));
-    selectedIndex = computed(() => this.segments().findIndex((s) => s.value === this.value()), ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
-    /** Roving tab stop: the selected segment, else the first enabled one. */
+    /** 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 sel = this.selectedIndex();
-        if (sel >= 0 && !this.segments()[sel].disabled)
+        const chips = this.chips();
+        const sel = chips.findIndex((c) => this.isSelected(c));
+        if (sel >= 0 && !chips[sel].disabled)
             return sel;
-        return this.segments().findIndex((s) => !s.disabled);
+        return chips.findIndex((c) => !c.disabled);
     }, ...(ngDevMode ? [{ debugName: "tabStop" }] : []));
-    isSelected(seg) {
-        return seg.value === this.value();
+    isSelected(chip) {
+        return this.selectedValues().includes(chip.value);
     }
-    segmentId(i) {
+    chipId(i) {
         return `${this.baseId}-${i}`;
     }
-    segmentClass(seg) {
-        const sm = this.size() === 'sm';
-        const base = 'inline-flex min-w-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-[calc(var(--radius-control)-2px)] ' +
-            'font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 ' +
-            'disabled:cursor-not-allowed disabled:opacity-50 ' +
-            (sm ? 'h-7 px-2.5 text-xs' : 'h-8 px-3.5 text-sm') +
-            (this.fullWidth() ? ' flex-1' : '') +
-            (this.iconOnly() ? (sm ? ' w-8 px-0' : ' w-9 px-0') : '');
-        // Selected: raised surface, ring and bold text — more than a tint, so it reads in greyscale too.
-        return this.isSelected(seg)
-            ? `${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`;
+    classFor(chip) {
+        return chipClass(this.size(), this.isSelected(chip));
     }
-    choose(i) {
-        const seg = this.segments()[i];
-        if (!seg || seg.disabled || this.disabled())
+    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;
@@ -3594,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;
                     }
@@ -3610,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
@@ -5702,6 +6734,10 @@ function sdsFileMatchesAccept(file, accept) {
  * affordance); clicking anywhere on the zone opens the picker too. All text is set through inputs with
  * English defaults.
  *
+ * `appearance="button"` drops the zone and renders only the Browse button (files can still be dropped
+ * on it) — for a "Replace photo" / "Upload logo" / "Add document" action next to a preview, with the
+ * same accept/size/count checks and error messages. `browse()` opens the picker from your own control.
+ *
  * @example
  * <sds-file-drop accept="image/jpeg,image/png,image/webp" multiple [maxSize]="10_000_000"
  *                label="Drop photos here" browseLabel="Choose photos"
@@ -5720,6 +6756,10 @@ class SdsFileDrop {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Icon in the zone at rest. */
     icon = input('upload', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    /** `zone` (default): the dashed drop zone with a Browse button. `button`: the Browse button alone. */
+    appearance = input('zone', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /** `button` appearance: size of the button. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     label = input('Drag and drop files here', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Shown while files are dragged over the zone. */
     dropLabel = input('Drop to add', ...(ngDevMode ? [{ debugName: "dropLabel" }] : []));
@@ -5756,6 +6796,14 @@ class SdsFileDrop {
             ? `${base} cursor-copy border-brand-500 bg-brand-50 dark:bg-muted`
             : `${base} cursor-pointer border-border bg-muted/50 hover:border-ink-faint`;
     }, ...(ngDevMode ? [{ debugName: "zoneClass" }] : []));
+    buttonClass = computed(() => {
+        const size = this.size() === 'sm' ? 'h-8 px-3' : 'h-9 px-3.5';
+        const drag = this.dragging() ? ' border-brand-500 bg-brand-50 dark:bg-muted' : ' border-border bg-surface hover:bg-muted';
+        return (`inline-flex ${size} items-center gap-1.5 rounded-control border text-sm font-semibold text-ink shadow-sm ` +
+            'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 ' +
+            'disabled:cursor-not-allowed disabled:opacity-60' +
+            drag);
+    }, ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
     /** Open the native file picker. */
     browse(event) {
         event?.stopPropagation();
@@ -5849,7 +6897,35 @@ class SdsFileDrop {
         this.errors.set([]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsFileDrop, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsFileDrop, isStandalone: true, selector: "sds-file-drop", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, dropLabel: { classPropertyName: "dropLabel", publicName: "dropLabel", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, wrongTypeMessage: { classPropertyName: "wrongTypeMessage", publicName: "wrongTypeMessage", isSignal: true, isRequired: false, transformFunction: null }, tooLargeMessage: { classPropertyName: "tooLargeMessage", publicName: "tooLargeMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyMessage: { classPropertyName: "tooManyMessage", publicName: "tooManyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "files", rejected: "rejected" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsFileDrop, isStandalone: true, selector: "sds-file-drop", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, dropLabel: { classPropertyName: "dropLabel", publicName: "dropLabel", isSignal: true, isRequired: false, transformFunction: null }, browseLabel: { classPropertyName: "browseLabel", publicName: "browseLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, wrongTypeMessage: { classPropertyName: "wrongTypeMessage", publicName: "wrongTypeMessage", isSignal: true, isRequired: false, transformFunction: null }, tooLargeMessage: { classPropertyName: "tooLargeMessage", publicName: "tooLargeMessage", isSignal: true, isRequired: false, transformFunction: null }, tooManyMessage: { classPropertyName: "tooManyMessage", publicName: "tooManyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "files", rejected: "rejected" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (appearance() === 'button') {
+      <button
+        type="button"
+        [class]="buttonClass()"
+        [disabled]="disabled()"
+        [attr.aria-describedby]="errors().length ? zoneId + '-errors' : null"
+        [attr.data-dragging]="dragging() ? 'true' : null"
+        (click)="browse($event)"
+        (dragenter)="onDragEnter($event)"
+        (dragover)="onDragOver($event)"
+        (dragleave)="onDragLeave($event)"
+        (drop)="onDrop($event)"
+      >
+        <sds-icon [name]="dragging() ? 'upload' : icon()" [size]="16" />
+        {{ dragging() ? dropLabel() : browseLabel() }}
+      </button>
+      <input
+        #fileInput
+        type="file"
+        class="sr-only"
+        tabindex="-1"
+        aria-hidden="true"
+        [accept]="accept()"
+        [multiple]="multiple()"
+        [disabled]="disabled()"
+        (change)="onInputChange($event)"
+      />
+    } @else {
     <div
       [class]="zoneClass()"
       [attr.aria-disabled]="disabled() ? 'true' : null"
@@ -5894,6 +6970,7 @@ class SdsFileDrop {
         (change)="onInputChange($event)"
       />
     </div>
+    }
 
     <div aria-live="polite" aria-atomic="true">
       @if (errors().length) {
@@ -5917,6 +6994,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     imports: [SdsIcon],
                     host: { class: 'block' },
                     template: `
+    @if (appearance() === 'button') {
+      <button
+        type="button"
+        [class]="buttonClass()"
+        [disabled]="disabled()"
+        [attr.aria-describedby]="errors().length ? zoneId + '-errors' : null"
+        [attr.data-dragging]="dragging() ? 'true' : null"
+        (click)="browse($event)"
+        (dragenter)="onDragEnter($event)"
+        (dragover)="onDragOver($event)"
+        (dragleave)="onDragLeave($event)"
+        (drop)="onDrop($event)"
+      >
+        <sds-icon [name]="dragging() ? 'upload' : icon()" [size]="16" />
+        {{ dragging() ? dropLabel() : browseLabel() }}
+      </button>
+      <input
+        #fileInput
+        type="file"
+        class="sr-only"
+        tabindex="-1"
+        aria-hidden="true"
+        [accept]="accept()"
+        [multiple]="multiple()"
+        [disabled]="disabled()"
+        (change)="onInputChange($event)"
+      />
+    } @else {
     <div
       [class]="zoneClass()"
       [attr.aria-disabled]="disabled() ? 'true' : null"
@@ -5961,6 +7066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         (change)="onInputChange($event)"
       />
     </div>
+    }
 
     <div aria-live="polite" aria-atomic="true">
       @if (errors().length) {
@@ -5976,7 +7082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     </div>
   `,
                 }]
-        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropLabel", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], wrongTypeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrongTypeMessage", required: false }] }], tooLargeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooLargeMessage", required: false }] }], tooManyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyMessage", required: false }] }], files: [{ type: i0.Output, args: ["files"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
+        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropLabel", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], wrongTypeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrongTypeMessage", required: false }] }], tooLargeMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooLargeMessage", required: false }] }], tooManyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooManyMessage", required: false }] }], files: [{ type: i0.Output, args: ["files"] }], rejected: [{ type: i0.Output, args: ["rejected"] }] } });
 
 let nextId$8 = 0;
 /**
@@ -10727,8 +11833,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;
@@ -10739,8 +11850,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]));
@@ -10751,6 +11865,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}`;
     }
@@ -10770,6 +11894,14 @@ 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>
@@ -10781,6 +11913,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);
@@ -10788,12 +11930,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,
@@ -10804,7 +11955,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
@@ -10901,7 +12052,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()"
@@ -10924,7 +12075,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()"
@@ -10969,6 +12120,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()) {
@@ -11382,6 +12539,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' },
@@ -11413,6 +12600,11 @@ let nextId$1 = 0;
  * - **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.
  *
@@ -11484,6 +12676,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" }] : []));
@@ -11574,6 +12774,11 @@ class SdsTable {
     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" }] : []));
@@ -11809,9 +13014,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);
@@ -11830,9 +13040,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)) {
@@ -11845,6 +13057,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);
@@ -12378,7 +13600,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');
@@ -12390,9 +13612,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) {
@@ -12401,7 +13626,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 }, 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 }], 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()) {
@@ -12555,10 +13780,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)"
               >
@@ -12783,7 +14008,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>
               }
@@ -12990,10 +14222,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)"
               >
@@ -13218,7 +14450,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>
               }
@@ -13264,7 +14503,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 }] }], 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 }] }], 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}
@@ -14828,7 +16067,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,
@@ -15902,5 +17141,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, SdsTableHeader, 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