@besaitech/ng-design-system 0.0.52 → 0.0.53

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, numberAttribute, output, signal, forwardRef, viewChild, viewChildren, afterRenderEffect, model, ElementRef, Injector, afterNextRender, TemplateRef, Directive, contentChild, Injectable, contentChildren, untracked, DestroyRef } from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, numberAttribute, output, signal, forwardRef, viewChild, viewChildren, afterRenderEffect, model, ElementRef, Directive, Injector, contentChild, untracked, afterNextRender, TemplateRef, linkedSignal, Injectable, contentChildren, DestroyRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
@@ -108,6 +108,22 @@ const SDS_ICONS = {
     'search-x': '<path d="m13.5 8.5-5 5"/><path d="m8.5 8.5 5 5"/><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
     command: '<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/>',
     sparkles: '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/>',
+    // Added for 0.0.53 (Lucide 24x24 stroke paths): status glyphs for sds-checklist-row / sds-score /
+    // sds-status-tile (distinct SHAPES per status, so status never rides on colour), the sds-menu trigger
+    // ellipses, the sds-sortable-list grip, sds-file-drop / sds-image-cropper glyphs, and common row actions.
+    'triangle-alert': '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+    'octagon-x': '<path d="m15 9-6 6"/><path d="M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z"/><path d="m9 9 6 6"/>',
+    'ban': '<circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/>',
+    'ellipsis': '<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>',
+    'ellipsis-vertical': '<circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>',
+    '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"/>',
+    '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"/>',
+    'clock': '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
+    'pencil': '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',
     // A question mark in a circle: the "may contain" mark on sds-tri-state-chip, and a generic help glyph.
     'circle-help': '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>',
     // Stock / inventory (the kitchen stock board, the sold-out toolkit). Original glyph: three stacked boxes.
@@ -314,7 +330,7 @@ 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$g = 0;
+let nextId$l = 0;
 const SIZES$a = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
@@ -327,7 +343,7 @@ const SIZES$a = {
  * sidebar search field).
  */
 class SdsInput {
-    inputId = `sds-input-${nextId$g++}`;
+    inputId = `sds-input-${nextId$l++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -660,7 +676,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$f = 0;
+let nextId$k = 0;
 const HEIGHTS = {
     sm: 'h-9',
     md: 'h-10',
@@ -683,7 +699,7 @@ const TEXT = {
  * {@link min}/{@link max} on blur and on every spinner step; ArrowUp / ArrowDown also step it.
  */
 class SdsInputNumber {
-    inputId = `sds-input-number-${nextId$f++}`;
+    inputId = `sds-input-number-${nextId$k++}`;
     fieldRef = viewChild('field', ...(ngDevMode ? [{ debugName: "fieldRef" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -856,6 +872,20 @@ class SdsInputNumber {
             el.value = v === null ? '' : this.format(v);
         });
     }
+    /**
+     * Focus the field, painting the current value into it first (the live-format effect stands down while
+     * the field is focused, so a value written just before focusing would otherwise not show). With
+     * `select`, the text is selected — handy for an in-cell editor.
+     */
+    focus(options = {}) {
+        const el = this.fieldRef()?.nativeElement;
+        if (!el)
+            return;
+        this.paintCommitted();
+        el.focus();
+        if (options.select)
+            el.select();
+    }
     isActive(el) {
         return typeof document !== 'undefined' && document.activeElement === el;
     }
@@ -1390,7 +1420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], buttonLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLayout", required: false }] }], incrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementIcon", required: false }] }], decrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementIcon", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }] } });
 
-let nextId$e = 0;
+let nextId$j = 0;
 const SIZES$9 = {
     sm: 'min-h-9 text-sm',
     md: 'min-h-10 text-sm',
@@ -1410,7 +1440,7 @@ const SIZES$9 = {
  * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
  */
 class SdsLocalizedInput {
-    inputId = `sds-localized-input-${nextId$e++}`;
+    inputId = `sds-localized-input-${nextId$j++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
@@ -1666,7 +1696,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$d = 0;
+let nextId$i = 0;
 const SIZES$8 = {
     md: 'h-12 w-11 text-lg',
     lg: 'h-14 w-12 text-xl',
@@ -1683,7 +1713,7 @@ const SIZES$8 = {
  * first box and have it land correctly.
  */
 class SdsOtpInput {
-    groupId = `sds-otp-${nextId$d++}`;
+    groupId = `sds-otp-${nextId$i++}`;
     /** How many boxes / characters the code has. */
     length = input(6, ...(ngDevMode ? [{ debugName: "length", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -1983,7 +2013,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$c = 0;
+let nextId$h = 0;
 const SIZES$7 = {
     sm: 'text-sm px-3 py-2',
     md: 'text-sm px-3.5 py-2.5',
@@ -1995,7 +2025,7 @@ const SIZES$7 = {
  * [(ngModel)].
  */
 class SdsTextarea {
-    fieldId = `sds-textarea-${nextId$c++}`;
+    fieldId = `sds-textarea-${nextId$h++}`;
     field = viewChild('field', ...(ngDevMode ? [{ debugName: "field" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -2248,7 +2278,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 }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }] } });
 
-let nextId$b = 0;
+let nextId$g = 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 },
@@ -2261,7 +2291,7 @@ const SIZES$6 = {
  * states.
  */
 class SdsToggleSwitch {
-    fieldId = `sds-toggle-switch-${nextId$b++}`;
+    fieldId = `sds-toggle-switch-${nextId$g++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -2505,7 +2535,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$a = 0;
+let nextId$f = 0;
 /**
  * Boolean checkbox. Implements ControlValueAccessor — use with reactive forms
  * or `[(ngModel)]`. Renders a styled box (brand-filled with a check when on)
@@ -2517,7 +2547,7 @@ let nextId$a = 0;
  * <sds-checkbox label="Fusion automatique" [(ngModel)]="autoMerge" />
  */
 class SdsCheckbox {
-    id = `sds-checkbox-${nextId$a++}`;
+    id = `sds-checkbox-${nextId$f++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -2651,7 +2681,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 }] }] } });
 
-let nextId$9 = 0;
+let nextId$e = 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.
@@ -2677,7 +2707,7 @@ const groups = new Map();
  * <sds-radio name="size" value="large" label="Grand" [(ngModel)]="size" />
  */
 class SdsRadio {
-    id = `sds-radio-${nextId$9++}`;
+    id = `sds-radio-${nextId$e++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -3163,7 +3193,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$8 = 0;
+let nextId$d = 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).
@@ -3183,7 +3213,7 @@ let nextId$8 = 0;
  *                     containsLabel="Contains" mayContainLabel="May contain" noneLabel="Not present" />
  */
 class SdsTriStateChip {
-    chipId = `sds-tri-state-chip-${nextId$8++}`;
+    chipId = `sds-tri-state-chip-${nextId$d++}`;
     /** 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. */
@@ -3314,96 +3344,2875 @@ class SdsTriStateChip {
       <!-- The state is part of the accessible name ("Milk, may contain"), visible caption or not. -->
       <span class="sr-only">, {{ stateText() }}</span>
 
-      <!-- Non-colour mark: nothing / a check / a question mark. The slot keeps its width in every
-           state so the chip never shifts when cycled. -->
-      <span
-        class="grid shrink-0 place-items-center"
-        [class]="size() === 'sm' ? 'h-4 w-4' : 'h-5 w-5'"
-        aria-hidden="true"
+      <!-- Non-colour mark: nothing / a check / a question mark. The slot keeps its width in every
+           state so the chip never shifts when cycled. -->
+      <span
+        class="grid shrink-0 place-items-center"
+        [class]="size() === 'sm' ? 'h-4 w-4' : 'h-5 w-5'"
+        aria-hidden="true"
+      >
+        @switch (value()) {
+          @case ('contains') {
+            <sds-icon name="check" [size]="size() === 'sm' ? 14 : 18" [strokeWidth]="3" />
+          }
+          @case ('may-contain') {
+            <sds-icon name="circle-help" [size]="size() === 'sm' ? 15 : 19" />
+          }
+        }
+      </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>
+  `, 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: SdsTriStateChip, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-tri-state-chip',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
+                    host: { class: 'inline-flex min-w-0' },
+                    template: `
+    <button
+      type="button"
+      [id]="chipId"
+      [class]="chipClass()"
+      [disabled]="disabled()"
+      [attr.data-state]="value()"
+      [attr.aria-describedby]="hint() ? chipId + '-hint' : null"
+      (click)="onClick($event)"
+      (keydown)="onKeydown($event)"
+    >
+      @if (icon()) {
+        <sds-icon [name]="icon()!" [size]="size() === 'sm' ? 18 : 22" class="shrink-0" />
+      }
+
+      <span class="flex min-w-0 flex-1 flex-col text-left leading-tight">
+        <!-- Up to two lines, so "Cereals containing gluten" stays readable in a narrow grid cell. -->
+        <span
+          class="line-clamp-2 break-words font-semibold"
+          [class]="size() === 'sm' ? 'text-xs' : 'text-sm'"
+          >{{ label() }}</span
+        >
+        @if (showState()) {
+          <span
+            class="truncate text-[11px] font-medium"
+            [class]="captionClass()"
+            aria-hidden="true"
+            >{{ stateText() }}</span
+          >
+        }
+      </span>
+      <!-- The state is part of the accessible name ("Milk, may contain"), visible caption or not. -->
+      <span class="sr-only">, {{ stateText() }}</span>
+
+      <!-- Non-colour mark: nothing / a check / a question mark. The slot keeps its width in every
+           state so the chip never shifts when cycled. -->
+      <span
+        class="grid shrink-0 place-items-center"
+        [class]="size() === 'sm' ? 'h-4 w-4' : 'h-5 w-5'"
+        aria-hidden="true"
+      >
+        @switch (value()) {
+          @case ('contains') {
+            <sds-icon name="check" [size]="size() === 'sm' ? 14 : 18" [strokeWidth]="3" />
+          }
+          @case ('may-contain') {
+            <sds-icon name="circle-help" [size]="size() === 'sm' ? 15 : 19" />
+          }
+        }
+      </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>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showState: [{ type: i0.Input, args: [{ isSignal: true, alias: "showState", required: false }] }], noneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noneLabel", required: false }] }], containsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "containsLabel", required: false }] }], mayContainLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mayContainLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
+
+let nextId$c = 0;
+/**
+ * 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$c++}`;
+    /** 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 }] }] } });
+
+/**
+ * Each status has its own glyph SHAPE (circle-check, triangle, octagon, circle-i) as well as its own
+ * tint, so the row still reads in greyscale or for a colour-blind reader. `label` is the English
+ * default of the spoken status; override it with [statusLabel].
+ */
+const STATUS = {
+    done: { icon: 'check-circle', tile: 'bg-accent-green-soft text-accent-green', label: 'Done' },
+    warning: { icon: 'triangle-alert', tile: 'bg-accent-amber-soft text-accent-amber', label: 'Warning' },
+    blocker: { icon: 'octagon-x', tile: 'bg-accent-red-soft text-accent-red', label: 'Blocking' },
+    info: { icon: 'info', tile: 'bg-muted text-ink-soft', label: 'Info' },
+};
+/**
+ * One line of a readiness checklist or health report: a status glyph, a title, an optional
+ * description, an optional count pill and an action (a projected `[sdsChecklistAction]` element, or
+ * the built-in button from [actionLabel] that emits `(action)`).
+ *
+ * The status is announced as text before the title ("Blocking: 3 items have no price"), never by
+ * colour alone. Put rows in a list for screen readers: `<ul role="list">` with each row wrapped in
+ * an `<li>`, or give the container `role="list"` and each row `role="listitem"`.
+ *
+ * @example
+ * <sds-checklist-row status="blocker" title="3 items have no price" description="Customers can't order them."
+ *                    [count]="3" actionLabel="Fix" (action)="openFilter('no-price')" />
+ */
+class SdsChecklistRow {
+    status = input('info', ...(ngDevMode ? [{ debugName: "status" }] : []));
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    /** Optional number of affected things, shown as a pill after the title. Null hides it. */
+    count = input(null, ...(ngDevMode ? [{ debugName: "count" }] : []));
+    /**
+     * Accessible text for the count pill; `{count}` is replaced. Default `'{count} items'` — pass a
+     * translated one.
+     */
+    countLabel = input('{count} items', ...(ngDevMode ? [{ debugName: "countLabel" }] : []));
+    /** Spoken status prefix. Defaults per status: Done · Warning · Blocking · Info (English). */
+    statusLabel = input('', ...(ngDevMode ? [{ debugName: "statusLabel" }] : []));
+    /** Label of the built-in action button. Empty hides it (project `[sdsChecklistAction]` instead). */
+    actionLabel = input('', ...(ngDevMode ? [{ debugName: "actionLabel" }] : []));
+    /**
+     * Full accessible name for the action button when its visible label is terse ("Fix") — e.g.
+     * "Fix: 3 items have no price".
+     */
+    actionAriaLabel = input('', ...(ngDevMode ? [{ debugName: "actionAriaLabel" }] : []));
+    /** Strike the title through when the row is done. */
+    strikeDone = input(false, ...(ngDevMode ? [{ debugName: "strikeDone", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Emitted when the built-in action button is pressed. */
+    action = output();
+    style = computed(() => STATUS[this.status()] ?? STATUS.info, ...(ngDevMode ? [{ debugName: "style" }] : []));
+    resolvedStatusLabel = computed(() => this.statusLabel() || this.style().label, ...(ngDevMode ? [{ debugName: "resolvedStatusLabel" }] : []));
+    countText = computed(() => this.countLabel().replace('{count}', String(this.count() ?? '')), ...(ngDevMode ? [{ debugName: "countText" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsChecklistRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsChecklistRow, isStandalone: true, selector: "sds-checklist-row", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: false, transformFunction: null }, statusLabel: { classPropertyName: "statusLabel", publicName: "statusLabel", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionAriaLabel: { classPropertyName: "actionAriaLabel", publicName: "actionAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, strikeDone: { classPropertyName: "strikeDone", publicName: "strikeDone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div
+      class="flex items-start gap-3 rounded-control px-3 py-3"
+      [class.opacity-80]="status() === 'done'"
+      [attr.data-status]="status()"
+    >
+      <span
+        class="mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-full"
+        [class]="style().tile"
+        aria-hidden="true"
+      >
+        <sds-icon [name]="style().icon" [size]="18" />
+      </span>
+
+      <div class="min-w-0 flex-1">
+        <p class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm font-semibold text-ink">
+          <span class="sr-only">{{ resolvedStatusLabel() }}:</span>
+          <span [class.line-through]="status() === 'done' && strikeDone()">{{ title() }}</span>
+          @if (count() !== null) {
+            <span
+              class="inline-flex min-w-6 items-center justify-center rounded-full border border-border bg-muted px-1.5 text-xs font-semibold tabular-nums text-ink-soft"
+              aria-hidden="true"
+              >{{ count() }}</span
+            >
+            <span class="sr-only">({{ countText() }})</span>
+          }
+        </p>
+        @if (description()) {
+          <p class="mt-0.5 text-sm text-ink-soft">{{ description() }}</p>
+        }
+        <ng-content />
+      </div>
+
+      <div class="flex shrink-0 items-center gap-2 self-center">
+        <ng-content select="[sdsChecklistAction]" />
+        @if (actionLabel()) {
+          <button
+            type="button"
+            class="inline-flex h-9 items-center gap-1.5 rounded-control border border-border bg-surface px-3 text-sm font-semibold text-ink transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+            [attr.aria-label]="actionAriaLabel() || null"
+            (click)="action.emit()"
+          >
+            {{ actionLabel() }}
+            <sds-icon name="chevron-right" [size]="16" class="text-ink-faint" />
+          </button>
+        }
+      </div>
+    </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: SdsChecklistRow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-checklist-row',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
+                    host: { class: 'block' },
+                    template: `
+    <div
+      class="flex items-start gap-3 rounded-control px-3 py-3"
+      [class.opacity-80]="status() === 'done'"
+      [attr.data-status]="status()"
+    >
+      <span
+        class="mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-full"
+        [class]="style().tile"
+        aria-hidden="true"
+      >
+        <sds-icon [name]="style().icon" [size]="18" />
+      </span>
+
+      <div class="min-w-0 flex-1">
+        <p class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm font-semibold text-ink">
+          <span class="sr-only">{{ resolvedStatusLabel() }}:</span>
+          <span [class.line-through]="status() === 'done' && strikeDone()">{{ title() }}</span>
+          @if (count() !== null) {
+            <span
+              class="inline-flex min-w-6 items-center justify-center rounded-full border border-border bg-muted px-1.5 text-xs font-semibold tabular-nums text-ink-soft"
+              aria-hidden="true"
+              >{{ count() }}</span
+            >
+            <span class="sr-only">({{ countText() }})</span>
+          }
+        </p>
+        @if (description()) {
+          <p class="mt-0.5 text-sm text-ink-soft">{{ description() }}</p>
+        }
+        <ng-content />
+      </div>
+
+      <div class="flex shrink-0 items-center gap-2 self-center">
+        <ng-content select="[sdsChecklistAction]" />
+        @if (actionLabel()) {
+          <button
+            type="button"
+            class="inline-flex h-9 items-center gap-1.5 rounded-control border border-border bg-surface px-3 text-sm font-semibold text-ink transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+            [attr.aria-label]="actionAriaLabel() || null"
+            (click)="action.emit()"
+          >
+            {{ actionLabel() }}
+            <sds-icon name="chevron-right" [size]="16" class="text-ink-faint" />
+          </button>
+        }
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], countLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLabel", required: false }] }], statusLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusLabel", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionAriaLabel", required: false }] }], strikeDone: [{ type: i0.Input, args: [{ isSignal: true, alias: "strikeDone", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
+
+const TIERS = {
+    good: { icon: 'check-circle', text: 'text-accent-green', stroke: 'stroke-success', fill: 'bg-success' },
+    fair: { icon: 'triangle-alert', text: 'text-accent-amber', stroke: 'stroke-warning', fill: 'bg-warning' },
+    poor: { icon: 'octagon-x', text: 'text-accent-red', stroke: 'stroke-danger', fill: 'bg-danger' },
+};
+const RING = {
+    sm: { box: 48, stroke: 5, value: 'text-sm', max: 'text-[9px]' },
+    md: { box: 72, stroke: 7, value: 'text-xl', max: 'text-[10px]' },
+    lg: { box: 96, stroke: 9, value: 'text-3xl', max: 'text-xs' },
+};
+const BAR_H = { sm: 'h-1.5', md: 'h-2', lg: 'h-3' };
+/**
+ * A 0–100 score as a ring or a bar, tinted by tier (poor · fair · good). The tier is also written out
+ * in words with its own glyph, and the whole thing is a `role="meter"` with a spoken value text — so
+ * the score is never conveyed by colour alone.
+ *
+ * @example
+ * <sds-score [value]="64" label="Menu health" />
+ * <sds-score [value]="health()" variant="bar" label="Menu health" goodLabel="Great" />
+ */
+class SdsScore {
+    /** The score, 0–100 (clamped; non-numbers read as 0). */
+    value = input(0, ...(ngDevMode ? [{ debugName: "value", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    variant = input('ring', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Visible caption and the meter's accessible name, e.g. "Menu health". */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Show the tier in words (with its glyph). */
+    showTier = input(true, ...(ngDevMode ? [{ debugName: "showTier", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Lowest value that counts as `fair`. */
+    fairFrom = input(50, ...(ngDevMode ? [{ debugName: "fairFrom", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Lowest value that counts as `good`. */
+    goodFrom = input(80, ...(ngDevMode ? [{ debugName: "goodFrom", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    poorLabel = input('Needs work', ...(ngDevMode ? [{ debugName: "poorLabel" }] : []));
+    fairLabel = input('Fair', ...(ngDevMode ? [{ debugName: "fairLabel" }] : []));
+    goodLabel = input('Good', ...(ngDevMode ? [{ debugName: "goodLabel" }] : []));
+    /** Spoken value; tokens `{value}` and `{tier}`. */
+    valueTextTemplate = input('{value} out of 100, {tier}', ...(ngDevMode ? [{ debugName: "valueTextTemplate" }] : []));
+    clamped = computed(() => {
+        const v = this.value();
+        return Number.isFinite(v) ? Math.round(Math.min(100, Math.max(0, v))) : 0;
+    }, ...(ngDevMode ? [{ debugName: "clamped" }] : []));
+    tier = computed(() => {
+        const v = this.clamped();
+        if (v >= this.goodFrom())
+            return 'good';
+        if (v >= this.fairFrom())
+            return 'fair';
+        return 'poor';
+    }, ...(ngDevMode ? [{ debugName: "tier" }] : []));
+    tierStyle = computed(() => TIERS[this.tier()], ...(ngDevMode ? [{ debugName: "tierStyle" }] : []));
+    tierText = computed(() => this.tier() === 'good' ? this.goodLabel() : this.tier() === 'fair' ? this.fairLabel() : this.poorLabel(), ...(ngDevMode ? [{ debugName: "tierText" }] : []));
+    valueText = computed(() => this.valueTextTemplate()
+        .replace('{value}', String(this.clamped()))
+        .replace('{tier}', this.tierText()), ...(ngDevMode ? [{ debugName: "valueText" }] : []));
+    ring = computed(() => RING[this.size()], ...(ngDevMode ? [{ debugName: "ring" }] : []));
+    radius = computed(() => (this.ring().box - this.ring().stroke) / 2, ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    circumference = computed(() => 2 * Math.PI * this.radius(), ...(ngDevMode ? [{ debugName: "circumference" }] : []));
+    dashOffset = computed(() => this.circumference() * (1 - this.clamped() / 100), ...(ngDevMode ? [{ debugName: "dashOffset" }] : []));
+    barHeight = computed(() => BAR_H[this.size()], ...(ngDevMode ? [{ debugName: "barHeight" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsScore, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsScore, isStandalone: true, selector: "sds-score", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, showTier: { classPropertyName: "showTier", publicName: "showTier", isSignal: true, isRequired: false, transformFunction: null }, fairFrom: { classPropertyName: "fairFrom", publicName: "fairFrom", isSignal: true, isRequired: false, transformFunction: null }, goodFrom: { classPropertyName: "goodFrom", publicName: "goodFrom", isSignal: true, isRequired: false, transformFunction: null }, poorLabel: { classPropertyName: "poorLabel", publicName: "poorLabel", isSignal: true, isRequired: false, transformFunction: null }, fairLabel: { classPropertyName: "fairLabel", publicName: "fairLabel", isSignal: true, isRequired: false, transformFunction: null }, goodLabel: { classPropertyName: "goodLabel", publicName: "goodLabel", isSignal: true, isRequired: false, transformFunction: null }, valueTextTemplate: { classPropertyName: "valueTextTemplate", publicName: "valueTextTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div
+      role="meter"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      [attr.aria-valuenow]="clamped()"
+      [attr.aria-valuetext]="valueText()"
+      [attr.aria-label]="label() || null"
+      [attr.data-tier]="tier()"
+    >
+      @if (variant() === 'ring') {
+        <div class="flex items-center gap-3" aria-hidden="true">
+          <div class="relative shrink-0" [style.width.px]="ring().box" [style.height.px]="ring().box">
+            <svg [attr.viewBox]="'0 0 ' + ring().box + ' ' + ring().box" class="-rotate-90" width="100%" height="100%">
+              <circle
+                [attr.cx]="ring().box / 2"
+                [attr.cy]="ring().box / 2"
+                [attr.r]="radius()"
+                fill="none"
+                class="stroke-border"
+                [attr.stroke-width]="ring().stroke"
+              />
+              <circle
+                [attr.cx]="ring().box / 2"
+                [attr.cy]="ring().box / 2"
+                [attr.r]="radius()"
+                fill="none"
+                stroke-linecap="round"
+                class="transition-[stroke-dashoffset] duration-500"
+                [class]="tierStyle().stroke"
+                [attr.stroke-width]="ring().stroke"
+                [attr.stroke-dasharray]="circumference()"
+                [attr.stroke-dashoffset]="dashOffset()"
+              />
+            </svg>
+            <div class="absolute inset-0 flex flex-col items-center justify-center leading-none">
+              <span class="font-extrabold tabular-nums text-ink" [class]="ring().value">{{ clamped() }}</span>
+              @if (size() !== 'sm') {
+                <span class="mt-0.5 font-medium text-ink-faint" [class]="ring().max">/100</span>
+              }
+            </div>
+          </div>
+          @if (label() || showTier()) {
+            <div class="min-w-0">
+              @if (label()) {
+                <p class="truncate text-sm font-semibold text-ink">{{ label() }}</p>
+              }
+              @if (showTier()) {
+                <p class="mt-0.5 flex items-center gap-1 text-sm font-medium" [class]="tierStyle().text">
+                  <sds-icon [name]="tierStyle().icon" [size]="15" />
+                  {{ tierText() }}
+                </p>
+              }
+            </div>
+          }
+        </div>
+      } @else {
+        <div aria-hidden="true">
+          <div class="mb-1.5 flex items-baseline justify-between gap-3">
+            <span class="truncate text-sm font-semibold text-ink">{{ label() }}</span>
+            <span class="flex shrink-0 items-center gap-1.5 text-sm">
+              <span class="font-bold tabular-nums text-ink">{{ clamped() }}<span class="text-ink-faint">/100</span></span>
+              @if (showTier()) {
+                <span class="flex items-center gap-1 font-medium" [class]="tierStyle().text">
+                  <sds-icon [name]="tierStyle().icon" [size]="14" />
+                  {{ tierText() }}
+                </span>
+              }
+            </span>
+          </div>
+          <div class="w-full overflow-hidden rounded-full bg-border" [class]="barHeight()">
+            <div
+              class="h-full rounded-full transition-[width] duration-500"
+              [class]="tierStyle().fill"
+              [style.width.%]="clamped()"
+            ></div>
+          </div>
+        </div>
+      }
+    </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: SdsScore, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-score',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
+                    host: { class: 'block' },
+                    template: `
+    <div
+      role="meter"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      [attr.aria-valuenow]="clamped()"
+      [attr.aria-valuetext]="valueText()"
+      [attr.aria-label]="label() || null"
+      [attr.data-tier]="tier()"
+    >
+      @if (variant() === 'ring') {
+        <div class="flex items-center gap-3" aria-hidden="true">
+          <div class="relative shrink-0" [style.width.px]="ring().box" [style.height.px]="ring().box">
+            <svg [attr.viewBox]="'0 0 ' + ring().box + ' ' + ring().box" class="-rotate-90" width="100%" height="100%">
+              <circle
+                [attr.cx]="ring().box / 2"
+                [attr.cy]="ring().box / 2"
+                [attr.r]="radius()"
+                fill="none"
+                class="stroke-border"
+                [attr.stroke-width]="ring().stroke"
+              />
+              <circle
+                [attr.cx]="ring().box / 2"
+                [attr.cy]="ring().box / 2"
+                [attr.r]="radius()"
+                fill="none"
+                stroke-linecap="round"
+                class="transition-[stroke-dashoffset] duration-500"
+                [class]="tierStyle().stroke"
+                [attr.stroke-width]="ring().stroke"
+                [attr.stroke-dasharray]="circumference()"
+                [attr.stroke-dashoffset]="dashOffset()"
+              />
+            </svg>
+            <div class="absolute inset-0 flex flex-col items-center justify-center leading-none">
+              <span class="font-extrabold tabular-nums text-ink" [class]="ring().value">{{ clamped() }}</span>
+              @if (size() !== 'sm') {
+                <span class="mt-0.5 font-medium text-ink-faint" [class]="ring().max">/100</span>
+              }
+            </div>
+          </div>
+          @if (label() || showTier()) {
+            <div class="min-w-0">
+              @if (label()) {
+                <p class="truncate text-sm font-semibold text-ink">{{ label() }}</p>
+              }
+              @if (showTier()) {
+                <p class="mt-0.5 flex items-center gap-1 text-sm font-medium" [class]="tierStyle().text">
+                  <sds-icon [name]="tierStyle().icon" [size]="15" />
+                  {{ tierText() }}
+                </p>
+              }
+            </div>
+          }
+        </div>
+      } @else {
+        <div aria-hidden="true">
+          <div class="mb-1.5 flex items-baseline justify-between gap-3">
+            <span class="truncate text-sm font-semibold text-ink">{{ label() }}</span>
+            <span class="flex shrink-0 items-center gap-1.5 text-sm">
+              <span class="font-bold tabular-nums text-ink">{{ clamped() }}<span class="text-ink-faint">/100</span></span>
+              @if (showTier()) {
+                <span class="flex items-center gap-1 font-medium" [class]="tierStyle().text">
+                  <sds-icon [name]="tierStyle().icon" [size]="14" />
+                  {{ tierText() }}
+                </span>
+              }
+            </span>
+          </div>
+          <div class="w-full overflow-hidden rounded-full bg-border" [class]="barHeight()">
+            <div
+              class="h-full rounded-full transition-[width] duration-500"
+              [class]="tierStyle().fill"
+              [style.width.%]="clamped()"
+            ></div>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showTier: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTier", required: false }] }], fairFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "fairFrom", required: false }] }], goodFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "goodFrom", required: false }] }], poorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "poorLabel", required: false }] }], fairLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fairLabel", required: false }] }], goodLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "goodLabel", required: false }] }], valueTextTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTextTemplate", required: false }] }] } });
+
+const STATES = {
+    available: {
+        icon: 'check-circle',
+        frame: 'border-border bg-surface',
+        badge: 'bg-accent-green-soft text-accent-green',
+    },
+    'sold-out': {
+        icon: 'ban',
+        frame: 'border-danger bg-accent-red-soft',
+        badge: 'bg-danger text-white',
+    },
+    hidden: {
+        icon: 'eye-off',
+        frame: 'border-dashed border-ink-faint bg-muted',
+        badge: 'bg-ink/10 text-ink-soft',
+    },
+};
+/**
+ * Touch-first square tile for a stock board: a big press target (the whole tile) with a title,
+ * optional subtitle, optional photo and a state — available · sold out · hidden.
+ *
+ * The state is never colour-only: each has its own glyph and word in a badge (check / "Available",
+ * a no-entry sign / "Sold out", a crossed eye / "Hidden"), sold-out tiles get a diagonal hatch and a
+ * struck-through title, hidden tiles a dashed frame. Pressing gives a visible pressed state.
+ *
+ * The tile is one `<button>` that emits `(activate)`. Pass [selected] (true/false) to make it a toggle
+ * for multi-select ("select all matches"): it then carries `aria-pressed` and a corner check. [busy]
+ * shows a spinner and sets `aria-busy` while a save is in flight.
+ *
+ * @example
+ * <sds-status-tile title="Bacon" subtitle="Extras" state="sold-out" note="Back at 22:00"
+ *                  soldOutLabel="Sold out" (activate)="toggle(item)" />
+ */
+class SdsStatusTile {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
+    /** Optional photo URL, shown across the top of the tile. */
+    image = input(null, ...(ngDevMode ? [{ debugName: "image" }] : []));
+    /** Alt text for the photo. Empty (default) marks it decorative — the title already names the tile. */
+    imageAlt = input('', ...(ngDevMode ? [{ debugName: "imageAlt" }] : []));
+    state = input('available', ...(ngDevMode ? [{ debugName: "state" }] : []));
+    /** Short extra line next to the state, e.g. "Back at 22:00". */
+    note = input('', ...(ngDevMode ? [{ debugName: "note" }] : []));
+    /** `null` (default): a plain action tile. `true`/`false`: a toggle for multi-select (`aria-pressed`). */
+    selected = input(null, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    /** A save is in flight: spinner + `aria-busy`. */
+    busy = input(false, ...(ngDevMode ? [{ debugName: "busy", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    availableLabel = input('Available', ...(ngDevMode ? [{ debugName: "availableLabel" }] : []));
+    soldOutLabel = input('Sold out', ...(ngDevMode ? [{ debugName: "soldOutLabel" }] : []));
+    hiddenLabel = input('Hidden', ...(ngDevMode ? [{ debugName: "hiddenLabel" }] : []));
+    /** The tile was pressed (click, tap, Enter or Space). */
+    activate = output();
+    style = computed(() => STATES[this.state()] ?? STATES.available, ...(ngDevMode ? [{ debugName: "style" }] : []));
+    stateText = computed(() => {
+        switch (this.state()) {
+            case 'sold-out':
+                return this.soldOutLabel();
+            case 'hidden':
+                return this.hiddenLabel();
+            default:
+                return this.availableLabel();
+        }
+    }, ...(ngDevMode ? [{ debugName: "stateText" }] : []));
+    /** Diagonal hatch on sold-out tiles — a pattern cue on top of the colour. */
+    hatch = computed(() => this.state() === 'sold-out'
+        ? 'repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--color-danger) 10%, transparent) 12px 24px)'
+        : null, ...(ngDevMode ? [{ debugName: "hatch" }] : []));
+    tileClass = computed(() => {
+        const ring = this.selected()
+            ? ' ring-2 ring-brand-500 ring-offset-2 ring-offset-canvas dark:ring-ink'
+            : '';
+        return ('relative flex aspect-square w-full min-h-32 cursor-pointer select-none flex-col overflow-hidden ' +
+            'rounded-card border-2 text-left shadow-sm transition-[transform,box-shadow] duration-100 ' +
+            'hover:shadow-md active:scale-[0.97] active:shadow-none focus-visible:outline-none ' +
+            'focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 ' +
+            'focus-visible:ring-offset-canvas disabled:cursor-not-allowed disabled:opacity-60 ' +
+            'touch-manipulation ' +
+            this.style().frame +
+            (this.state() === 'hidden' ? ' opacity-80' : '') +
+            ring);
+    }, ...(ngDevMode ? [{ debugName: "tileClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsStatusTile, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsStatusTile, isStandalone: true, selector: "sds-status-tile", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, availableLabel: { classPropertyName: "availableLabel", publicName: "availableLabel", isSignal: true, isRequired: false, transformFunction: null }, soldOutLabel: { classPropertyName: "soldOutLabel", publicName: "soldOutLabel", isSignal: true, isRequired: false, transformFunction: null }, hiddenLabel: { classPropertyName: "hiddenLabel", publicName: "hiddenLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activate: "activate" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <button
+      type="button"
+      [class]="tileClass()"
+      [disabled]="disabled()"
+      [attr.aria-pressed]="selected() === null ? null : selected()"
+      [attr.aria-busy]="busy() ? 'true' : null"
+      [attr.data-state]="state()"
+      [style.background-image]="hatch()"
+      (click)="activate.emit()"
+    >
+      @if (image()) {
+        <span class="relative block h-[45%] w-full shrink-0 overflow-hidden bg-muted">
+          <img
+            [src]="image()"
+            [alt]="imageAlt()"
+            class="h-full w-full object-cover"
+            [class.grayscale]="state() !== 'available'"
+            [class.opacity-60]="state() !== 'available'"
+            loading="lazy"
+            draggable="false"
+          />
+        </span>
+      }
+
+      <span class="flex min-h-0 w-full flex-1 flex-col gap-1 p-3 text-left">
+        <span
+          class="line-clamp-2 break-words font-bold leading-tight text-ink"
+          [class]="image() ? 'text-base' : 'text-lg'"
+          [class.line-through]="state() === 'sold-out'"
+          [class.decoration-2]="state() === 'sold-out'"
+          >{{ title() }}</span
+        >
+        @if (subtitle()) {
+          <span class="truncate text-xs text-ink-soft">{{ subtitle() }}</span>
+        }
+
+        <span class="mt-auto flex flex-wrap items-center gap-1.5 pt-1">
+          <span
+            class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-bold"
+            [class]="style().badge"
+          >
+            <sds-icon [name]="style().icon" [size]="14" [strokeWidth]="2.5" />
+            {{ stateText() }}
+          </span>
+          @if (note()) {
+            <span class="truncate text-xs font-medium text-ink-soft">{{ note() }}</span>
+          }
+        </span>
+      </span>
+
+      @if (selected()) {
+        <span
+          class="absolute right-2 top-2 grid h-7 w-7 place-items-center rounded-full bg-brand-600 text-white shadow ring-2 ring-surface dark:bg-ink dark:text-surface"
+          aria-hidden="true"
+        >
+          <sds-icon name="check" [size]="16" [strokeWidth]="3" />
+        </span>
+      } @else if (selected() === false) {
+        <span
+          class="absolute right-2 top-2 h-7 w-7 rounded-full border-2 border-ink-faint bg-surface/80"
+          aria-hidden="true"
+        ></span>
+      }
+
+      @if (busy()) {
+        <span class="absolute inset-0 grid place-items-center bg-surface/60" aria-hidden="true">
+          <span class="h-7 w-7 animate-spin rounded-full border-2 border-brand-200 border-t-brand-600"></span>
+        </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: SdsStatusTile, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-status-tile',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
+                    host: { class: 'block' },
+                    template: `
+    <button
+      type="button"
+      [class]="tileClass()"
+      [disabled]="disabled()"
+      [attr.aria-pressed]="selected() === null ? null : selected()"
+      [attr.aria-busy]="busy() ? 'true' : null"
+      [attr.data-state]="state()"
+      [style.background-image]="hatch()"
+      (click)="activate.emit()"
+    >
+      @if (image()) {
+        <span class="relative block h-[45%] w-full shrink-0 overflow-hidden bg-muted">
+          <img
+            [src]="image()"
+            [alt]="imageAlt()"
+            class="h-full w-full object-cover"
+            [class.grayscale]="state() !== 'available'"
+            [class.opacity-60]="state() !== 'available'"
+            loading="lazy"
+            draggable="false"
+          />
+        </span>
+      }
+
+      <span class="flex min-h-0 w-full flex-1 flex-col gap-1 p-3 text-left">
+        <span
+          class="line-clamp-2 break-words font-bold leading-tight text-ink"
+          [class]="image() ? 'text-base' : 'text-lg'"
+          [class.line-through]="state() === 'sold-out'"
+          [class.decoration-2]="state() === 'sold-out'"
+          >{{ title() }}</span
+        >
+        @if (subtitle()) {
+          <span class="truncate text-xs text-ink-soft">{{ subtitle() }}</span>
+        }
+
+        <span class="mt-auto flex flex-wrap items-center gap-1.5 pt-1">
+          <span
+            class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-bold"
+            [class]="style().badge"
+          >
+            <sds-icon [name]="style().icon" [size]="14" [strokeWidth]="2.5" />
+            {{ stateText() }}
+          </span>
+          @if (note()) {
+            <span class="truncate text-xs font-medium text-ink-soft">{{ note() }}</span>
+          }
+        </span>
+      </span>
+
+      @if (selected()) {
+        <span
+          class="absolute right-2 top-2 grid h-7 w-7 place-items-center rounded-full bg-brand-600 text-white shadow ring-2 ring-surface dark:bg-ink dark:text-surface"
+          aria-hidden="true"
+        >
+          <sds-icon name="check" [size]="16" [strokeWidth]="3" />
+        </span>
+      } @else if (selected() === false) {
+        <span
+          class="absolute right-2 top-2 h-7 w-7 rounded-full border-2 border-ink-faint bg-surface/80"
+          aria-hidden="true"
+        ></span>
+      }
+
+      @if (busy()) {
+        <span class="absolute inset-0 grid place-items-center bg-surface/60" aria-hidden="true">
+          <span class="h-7 w-7 animate-spin rounded-full border-2 border-brand-200 border-t-brand-600"></span>
+        </span>
+      }
+    </button>
+  `,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], availableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableLabel", required: false }] }], soldOutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "soldOutLabel", required: false }] }], hiddenLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenLabel", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }] } });
+
+let nextId$b = 0;
+/**
+ * Marks the element inside `<sds-menu>` that opens it. It may be a native button or a component that
+ * renders one (e.g. `<sds-button sdsMenuTrigger>`): the menu wires `aria-haspopup`, `aria-expanded` and
+ * `aria-controls` onto the first focusable element it finds there.
+ */
+class SdsMenuTrigger {
+    el = inject(ElementRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsMenuTrigger, isStandalone: true, selector: "[sdsMenuTrigger]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sdsMenuTrigger]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Action menu (menu button + popover). The panel is appended to `<body>` and positioned against the
+ * trigger, flipping above it when there is no room below — so it is never clipped by a drawer, a dialog
+ * or a scrolling table, and it sits above them (z 1100).
+ *
+ * Items come from [items]: actions (`{ label, description?, icon?, danger?, disabled? }`) and
+ * `{ separator: true }` dividers. Activating one emits `(select)` with it and closes the menu.
+ *
+ * Trigger: project your own element marked `sdsMenuTrigger`, or let the menu render a compact icon
+ * button (`triggerIcon`, default a horizontal ellipsis) named by [triggerLabel].
+ *
+ * Keyboard (WAI-ARIA menu button): Enter / Space / ArrowDown open on the first item, ArrowUp on the
+ * last; ArrowUp/Down move (wrapping, skipping disabled items), Home/End jump, a letter jumps to the next
+ * item starting with it, Enter/Space activate. **Escape closes only the menu** — the key event is
+ * stopped, so an enclosing drawer or dialog stays open — and focus returns to the trigger. Tab closes it
+ * too. A click outside closes it.
+ *
+ * @example
+ * <sds-menu [items]="[{ id: 'sold', label: 'Mark sold out', icon: 'ban' }, { separator: true },
+ *                     { id: 'del', label: 'Delete', icon: 'trash-2', danger: true }]"
+ *           triggerLabel="Item actions" (select)="onAction($event)" />
+ *
+ * @example
+ * <sds-menu [items]="durations" (select)="snooze($event)">
+ *   <sds-button sdsMenuTrigger variant="secondary">Mark sold out</sds-button>
+ * </sds-menu>
+ */
+class SdsMenu {
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    menuId = `sds-menu-${nextId$b++}`;
+    triggerId = `${this.menuId}-trigger`;
+    /** Actions and separators, in order. */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Open state. Two-way: `[(open)]` — set it to open the menu from code. */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    /** Which edge of the trigger the panel lines up with. */
+    align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    /** Accessible name of the built-in icon trigger (required when there is no [triggerText]). */
+    triggerLabel = input('More actions', ...(ngDevMode ? [{ debugName: "triggerLabel" }] : []));
+    /** Icon of the built-in trigger. */
+    triggerIcon = input('ellipsis', ...(ngDevMode ? [{ debugName: "triggerIcon" }] : []));
+    /** Optional visible text on the built-in trigger (then it is its name). */
+    triggerText = input('', ...(ngDevMode ? [{ debugName: "triggerText" }] : []));
+    /** Accessible name of the menu itself; defaults to the trigger's name. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Keep the menu open after an item is activated (e.g. toggles). */
+    keepOpen = input(false, ...(ngDevMode ? [{ debugName: "keepOpen", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** An action was activated. */
+    select = output();
+    projectedTrigger = contentChild(SdsMenuTrigger, ...(ngDevMode ? [{ debugName: "projectedTrigger" }] : []));
+    panelEl = null;
+    /** Which item gets focus when the panel opens: 'first' | 'last' | 'none'. */
+    focusOnOpen = 'first';
+    typeBuffer = '';
+    typeTimer;
+    enabledIndexes = computed(() => this.items()
+        .map((e, i) => (this.isSeparator(e) || e.disabled ? -1 : i))
+        .filter((i) => i >= 0), ...(ngDevMode ? [{ debugName: "enabledIndexes" }] : []));
+    constructor() {
+        // Wire ARIA onto a projected trigger's focusable element (the built-in one binds it in the template).
+        effect(() => {
+            const isOpen = this.open();
+            const trigger = this.projectedTrigger();
+            if (!trigger)
+                return;
+            const el = this.findFocusable(trigger.el.nativeElement);
+            if (!el)
+                return;
+            if (!el.id)
+                el.id = this.triggerId;
+            el.setAttribute('aria-haspopup', 'menu');
+            el.setAttribute('aria-expanded', String(isOpen));
+            if (isOpen)
+                el.setAttribute('aria-controls', this.menuId);
+            else
+                el.removeAttribute('aria-controls');
+        });
+        // Open/close side effects: move the panel to <body>, position it, focus an item; clean up on close.
+        effect(() => {
+            if (this.open()) {
+                untracked(() => afterNextRender(() => this.afterOpen(), { injector: this.injector }));
+            }
+            else {
+                untracked(() => this.teardown());
+            }
+        });
+    }
+    ngOnDestroy() {
+        clearTimeout(this.typeTimer);
+        this.teardown();
+    }
+    // --- helpers ----------------------------------------------------------------
+    isSeparator(entry) {
+        return entry.separator === true;
+    }
+    descId(i) {
+        return `${this.menuId}-desc-${i}`;
+    }
+    itemClass(entry) {
+        const base = 'flex w-full items-start gap-3 px-3.5 py-2 text-left transition-colors outline-none ' +
+            'focus-visible:ring-2 focus-visible:ring-inset ';
+        if (entry.disabled)
+            return `${base} cursor-not-allowed text-ink-faint opacity-60`;
+        return entry.danger
+            ? `${base} cursor-pointer text-danger hover:bg-danger/10 focus:bg-danger/10 focus-visible:ring-danger/40`
+            : `${base} cursor-pointer text-ink hover:bg-muted focus:bg-muted focus-visible:ring-brand-500/40`;
+    }
+    findFocusable(root) {
+        if (root.matches('button, a[href], [tabindex]'))
+            return root;
+        return root.querySelector('button, a[href], [tabindex]:not([tabindex="-1"])');
+    }
+    triggerEl() {
+        const projected = this.projectedTrigger();
+        if (projected)
+            return this.findFocusable(projected.el.nativeElement);
+        return this.host.nativeElement.querySelector(`#${this.triggerId}`);
+    }
+    isTriggerDisabled() {
+        const el = this.triggerEl();
+        return this.disabled() || !!el?.disabled;
+    }
+    // --- open / close ---------------------------------------------------------
+    show(focus) {
+        if (this.isTriggerDisabled())
+            return;
+        this.focusOnOpen = focus;
+        if (this.open()) {
+            this.focusItemAt(focus);
+            return;
+        }
+        this.open.set(true);
+    }
+    /** Close the menu; with `returnFocus`, focus goes back to the trigger. */
+    close(returnFocus = false) {
+        if (!this.open())
+            return;
+        this.open.set(false);
+        this.teardown();
+        if (returnFocus)
+            this.triggerEl()?.focus();
+    }
+    afterOpen() {
+        if (!this.open())
+            return;
+        this.panelEl = this.host.nativeElement.querySelector('[data-sds-menu-panel]');
+        if (!this.panelEl)
+            return;
+        if (this.panelEl.parentElement !== document.body)
+            document.body.appendChild(this.panelEl);
+        // Name the menu after its trigger unless an explicit [ariaLabel] was given.
+        const trigger = this.triggerEl();
+        if (!this.ariaLabel() && trigger?.id)
+            this.panelEl.setAttribute('aria-labelledby', trigger.id);
+        this.position();
+        this.addReflowListeners();
+        this.focusItemAt(this.focusOnOpen);
+    }
+    teardown() {
+        this.removeReflowListeners();
+        this.panelEl?.remove();
+        this.panelEl = null;
+    }
+    // --- trigger events -------------------------------------------------------
+    onTriggerClick(event) {
+        if (!event.target.closest('button, a, [tabindex]'))
+            return;
+        if (this.open())
+            this.close(false);
+        else
+            this.show('first');
+    }
+    onTriggerKeydown(event) {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.show('first');
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.show('last');
+        }
+    }
+    // --- menu keyboard --------------------------------------------------------
+    onMenuKeydown(event) {
+        const idx = this.enabledIndexes();
+        const current = Number(document.activeElement?.dataset?.['index'] ?? -1);
+        const pos = idx.indexOf(current);
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (idx.length)
+                    this.focusIndex(idx[(pos + 1 + idx.length) % idx.length]);
+                return;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (idx.length)
+                    this.focusIndex(idx[pos <= 0 ? idx.length - 1 : pos - 1]);
+                return;
+            case 'Home':
+                event.preventDefault();
+                this.focusItemAt('first');
+                return;
+            case 'End':
+                event.preventDefault();
+                this.focusItemAt('last');
+                return;
+            case 'Escape':
+                // Close ONLY the menu: stop the event so a drawer/dialog listening for Escape stays open.
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                this.close(true);
+                return;
+            case 'Tab':
+                event.preventDefault();
+                this.close(true);
+                return;
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                const entry = this.items()[current];
+                if (entry && !this.isSeparator(entry))
+                    this.activate(entry);
+                return;
+            }
+            default:
+                if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                    this.typeAhead(event.key, current);
+                }
+        }
+    }
+    typeAhead(char, current) {
+        clearTimeout(this.typeTimer);
+        this.typeBuffer += char.toLowerCase();
+        // "d", "d", "d" cycles through the items starting with d; "de" narrows to "Delete".
+        const repeated = [...this.typeBuffer].every((c) => c === this.typeBuffer[0]);
+        const query = repeated ? this.typeBuffer[0] : this.typeBuffer;
+        const items = this.items();
+        const idx = this.enabledIndexes();
+        const start = Math.max(0, idx.indexOf(current));
+        const from = query.length === 1 ? start + 1 : start;
+        const ordered = [...idx.slice(from), ...idx.slice(0, from)];
+        const hit = ordered.find((i) => items[i].label.toLowerCase().startsWith(query));
+        if (hit !== undefined)
+            this.focusIndex(hit);
+        this.typeTimer = setTimeout(() => (this.typeBuffer = ''), 600);
+    }
+    focusIndex(i) {
+        this.panelEl?.querySelector(`[data-index="${i}"]`)?.focus();
+    }
+    focusItemAt(where) {
+        const idx = this.enabledIndexes();
+        if (!idx.length) {
+            this.panelEl?.focus();
+            return;
+        }
+        this.focusIndex(where === 'first' ? idx[0] : idx[idx.length - 1]);
+    }
+    activate(entry, event) {
+        event?.stopPropagation();
+        if (entry.disabled)
+            return;
+        this.select.emit(entry);
+        if (!this.keepOpen())
+            this.close(true);
+    }
+    // --- outside click ----------------------------------------------------------
+    onDocumentClick(event) {
+        if (!this.open())
+            return;
+        const target = event.target;
+        if (this.host.nativeElement.contains(target))
+            return;
+        if (this.panelEl?.contains(target))
+            return;
+        this.close(false);
+    }
+    // --- positioning (body-appended, mirrors sds-select) ------------------------
+    reflow = () => this.position();
+    listening = false;
+    addReflowListeners() {
+        if (this.listening)
+            return;
+        window.addEventListener('scroll', this.reflow, true);
+        window.addEventListener('resize', this.reflow);
+        this.listening = true;
+    }
+    removeReflowListeners() {
+        if (!this.listening)
+            return;
+        window.removeEventListener('scroll', this.reflow, true);
+        window.removeEventListener('resize', this.reflow);
+        this.listening = false;
+    }
+    position() {
+        const trigger = this.triggerEl();
+        const panel = this.panelEl;
+        if (!trigger || !panel)
+            return;
+        const r = trigger.getBoundingClientRect();
+        const pw = panel.offsetWidth;
+        const ph = panel.offsetHeight;
+        const gap = 4;
+        const margin = 8;
+        let top = r.bottom + gap;
+        if (top + ph > window.innerHeight - margin && r.top - gap - ph > margin) {
+            top = r.top - gap - ph;
+        }
+        top = Math.max(margin, Math.min(top, window.innerHeight - margin - ph));
+        let left = this.align() === 'end' ? r.right - pw : r.left;
+        left = Math.max(margin, Math.min(left, window.innerWidth - margin - pw));
+        panel.style.top = `${Math.round(top)}px`;
+        panel.style.left = `${Math.round(left)}px`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsMenu, isStandalone: true, selector: "sds-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerIcon: { classPropertyName: "triggerIcon", publicName: "triggerIcon", isSignal: true, isRequired: false, transformFunction: null }, triggerText: { classPropertyName: "triggerText", publicName: "triggerText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", select: "select" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "relative inline-flex" }, queries: [{ propertyName: "projectedTrigger", first: true, predicate: SdsMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <span
+      #slot
+      class="inline-flex"
+      (click)="onTriggerClick($event)"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <ng-content select="[sdsMenuTrigger]" />
+      @if (!projectedTrigger()) {
+        <button
+          type="button"
+          [id]="triggerId"
+          class="inline-flex h-9 min-w-9 items-center justify-center gap-1.5 rounded-control px-2 text-sm font-medium text-ink-soft transition-colors hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-50"
+          [class.bg-muted]="open()"
+          [attr.aria-label]="triggerText() ? null : triggerLabel()"
+          [disabled]="disabled()"
+          aria-haspopup="menu"
+          [attr.aria-expanded]="open()"
+          [attr.aria-controls]="open() ? menuId : null"
+        >
+          <sds-icon [name]="triggerIcon()" [size]="18" />
+          @if (triggerText()) {
+            <span>{{ triggerText() }}</span>
+          }
+        </button>
+      }
+    </span>
+
+    @if (open()) {
+      <div
+        data-sds-menu-panel
+        role="menu"
+        [id]="menuId"
+        [attr.aria-label]="ariaLabel() || null"
+        class="fixed z-[1100] min-w-52 max-w-80 overflow-y-auto rounded-card border border-border bg-surface py-1.5 shadow-xl outline-none animate-sds-menu"
+        [style.max-height]="'min(24rem, calc(100vh - 16px))'"
+        (keydown)="onMenuKeydown($event)"
+      >
+        @for (entry of items(); track $index; let i = $index) {
+          @if (isSeparator(entry)) {
+            <div role="separator" class="my-1.5 border-t border-border"></div>
+          } @else {
+            <button
+              type="button"
+              role="menuitem"
+              tabindex="-1"
+              [attr.data-index]="i"
+              [attr.aria-disabled]="entry.disabled ? 'true' : null"
+              [attr.aria-describedby]="entry.description ? descId(i) : null"
+              [class]="itemClass(entry)"
+              (click)="activate(entry, $event)"
+              (mouseenter)="entry.disabled ? null : focusIndex(i)"
+            >
+              @if (entry.icon) {
+                <sds-icon [name]="entry.icon" [size]="18" class="mt-px shrink-0" />
+              }
+              <span class="min-w-0 flex-1 text-left">
+                <span class="block truncate text-sm font-medium">{{ entry.label }}</span>
+                @if (entry.description) {
+                  <span
+                    [id]="descId(i)"
+                    class="mt-0.5 block text-xs"
+                    [class]="entry.danger ? 'text-danger/80' : 'text-ink-faint'"
+                    >{{ entry.description }}</span
+                  >
+                }
+              </span>
+            </button>
+          }
+        }
+      </div>
+    }
+  `, isInline: true, styles: [".animate-sds-menu{animation:sds-menu-pop .12s ease-out}@keyframes sds-menu-pop{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"], 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: SdsMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdsIcon], host: {
+                        class: 'relative inline-flex',
+                        '(document:click)': 'onDocumentClick($event)',
+                    }, template: `
+    <span
+      #slot
+      class="inline-flex"
+      (click)="onTriggerClick($event)"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <ng-content select="[sdsMenuTrigger]" />
+      @if (!projectedTrigger()) {
+        <button
+          type="button"
+          [id]="triggerId"
+          class="inline-flex h-9 min-w-9 items-center justify-center gap-1.5 rounded-control px-2 text-sm font-medium text-ink-soft transition-colors hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-50"
+          [class.bg-muted]="open()"
+          [attr.aria-label]="triggerText() ? null : triggerLabel()"
+          [disabled]="disabled()"
+          aria-haspopup="menu"
+          [attr.aria-expanded]="open()"
+          [attr.aria-controls]="open() ? menuId : null"
+        >
+          <sds-icon [name]="triggerIcon()" [size]="18" />
+          @if (triggerText()) {
+            <span>{{ triggerText() }}</span>
+          }
+        </button>
+      }
+    </span>
+
+    @if (open()) {
+      <div
+        data-sds-menu-panel
+        role="menu"
+        [id]="menuId"
+        [attr.aria-label]="ariaLabel() || null"
+        class="fixed z-[1100] min-w-52 max-w-80 overflow-y-auto rounded-card border border-border bg-surface py-1.5 shadow-xl outline-none animate-sds-menu"
+        [style.max-height]="'min(24rem, calc(100vh - 16px))'"
+        (keydown)="onMenuKeydown($event)"
+      >
+        @for (entry of items(); track $index; let i = $index) {
+          @if (isSeparator(entry)) {
+            <div role="separator" class="my-1.5 border-t border-border"></div>
+          } @else {
+            <button
+              type="button"
+              role="menuitem"
+              tabindex="-1"
+              [attr.data-index]="i"
+              [attr.aria-disabled]="entry.disabled ? 'true' : null"
+              [attr.aria-describedby]="entry.description ? descId(i) : null"
+              [class]="itemClass(entry)"
+              (click)="activate(entry, $event)"
+              (mouseenter)="entry.disabled ? null : focusIndex(i)"
+            >
+              @if (entry.icon) {
+                <sds-icon [name]="entry.icon" [size]="18" class="mt-px shrink-0" />
+              }
+              <span class="min-w-0 flex-1 text-left">
+                <span class="block truncate text-sm font-medium">{{ entry.label }}</span>
+                @if (entry.description) {
+                  <span
+                    [id]="descId(i)"
+                    class="mt-0.5 block text-xs"
+                    [class]="entry.danger ? 'text-danger/80' : 'text-ink-faint'"
+                    >{{ entry.description }}</span
+                  >
+                }
+              </span>
+            </button>
+          }
+        }
+      </div>
+    }
+  `, styles: [".animate-sds-menu{animation:sds-menu-pop .12s ease-out}@keyframes sds-menu-pop{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], triggerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIcon", required: false }] }], triggerText: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], keepOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpen", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], projectedTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsMenuTrigger), { isSignal: true }] }] } });
+
+/**
+ * Selection toolbar for bulk editing: "N selected", the actions the app projects, and a clear-selection
+ * button. It shows only while something is selected (`count > 0`) and sticks to the bottom of its
+ * scroll container by default, so it stays in reach while the list scrolls.
+ *
+ * A `role="toolbar"` named by [ariaLabel]; the count sits in a polite live region that exists even
+ * while the bar is hidden, so "3 selected" is announced as the selection changes. Every visible and
+ * spoken string is an input (English defaults).
+ *
+ * @example
+ * <sds-bulk-bar [count]="selected().length" countLabel="{count} selected" (clear)="selected.set([])">
+ *   <sds-button size="sm" variant="secondary" (click)="bulkPrice()">Change price</sds-button>
+ *   <sds-button size="sm" variant="secondary" (click)="bulkSoldOut()">Mark sold out</sds-button>
+ * </sds-bulk-bar>
+ */
+class SdsBulkBar {
+    /** Number of selected things. The bar is hidden at 0. */
+    count = input(0, ...(ngDevMode ? [{ debugName: "count", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** "{count} selected" — `{count}` is replaced. Pass a translated string. */
+    countLabel = input('{count} selected', ...(ngDevMode ? [{ debugName: "countLabel" }] : []));
+    /** Text of the clear-selection button. */
+    clearLabel = input('Clear selection', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    /** Accessible name of the toolbar. */
+    ariaLabel = input('Bulk actions', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    position = input('bottom', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    /** The clear-selection button was pressed. */
+    clear = output();
+    countText = computed(() => this.countLabel().replace('{count}', String(this.count())), ...(ngDevMode ? [{ debugName: "countText" }] : []));
+    /** The label without the number, shown next to the count pill ("selected"). */
+    countWords = computed(() => this.countLabel().replace('{count}', '').replace(/\s+/g, ' ').trim(), ...(ngDevMode ? [{ debugName: "countWords" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsBulkBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsBulkBar, isStandalone: true, selector: "sds-bulk-bar", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clear: "clear" }, host: { properties: { "class.sticky": "position() !== 'static' && count() > 0", "class.bottom-3": "position() === 'bottom'", "class.top-3": "position() === 'top'", "class.z-30": "position() !== 'static'" }, classAttribute: "block" }, ngImport: i0, template: `
+    <!-- Always present so screen readers hear the count change, including back to zero. -->
+    <span class="sr-only" aria-live="polite" aria-atomic="true">{{ count() > 0 ? countText() : '' }}</span>
+
+    @if (count() > 0) {
+      <div
+        role="toolbar"
+        [attr.aria-label]="ariaLabel()"
+        class="flex flex-wrap items-center gap-x-3 gap-y-2 rounded-card border border-border bg-surface px-3 py-2 shadow-xl animate-sds-bulk"
+      >
+        <span class="inline-flex items-center gap-2 pr-1 text-sm font-semibold text-ink">
+          <span
+            class="inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-brand-600 px-1.5 text-xs font-bold tabular-nums text-white dark:bg-ink dark:text-surface"
+            >{{ count() }}</span
+          >
+          {{ countWords() }}
+        </span>
+
+        <span class="hidden h-6 w-px bg-border sm:block" aria-hidden="true"></span>
+
+        <div class="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+          <ng-content />
+        </div>
+
+        <button
+          type="button"
+          class="ml-auto inline-flex h-9 items-center gap-1.5 rounded-control px-2.5 text-sm font-medium text-ink-soft transition-colors hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+          (click)="clear.emit()"
+        >
+          <sds-icon name="x" [size]="16" />
+          <span>{{ clearLabel() }}</span>
+        </button>
+      </div>
+    }
+  `, isInline: true, styles: [".animate-sds-bulk{animation:sds-bulk-in .16s ease-out}@keyframes sds-bulk-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-bulk{animation:none}}\n"], 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: SdsBulkBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-bulk-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdsIcon], host: {
+                        class: 'block',
+                        '[class.sticky]': "position() !== 'static' && count() > 0",
+                        '[class.bottom-3]': "position() === 'bottom'",
+                        '[class.top-3]': "position() === 'top'",
+                        '[class.z-30]': "position() !== 'static'",
+                    }, template: `
+    <!-- Always present so screen readers hear the count change, including back to zero. -->
+    <span class="sr-only" aria-live="polite" aria-atomic="true">{{ count() > 0 ? countText() : '' }}</span>
+
+    @if (count() > 0) {
+      <div
+        role="toolbar"
+        [attr.aria-label]="ariaLabel()"
+        class="flex flex-wrap items-center gap-x-3 gap-y-2 rounded-card border border-border bg-surface px-3 py-2 shadow-xl animate-sds-bulk"
+      >
+        <span class="inline-flex items-center gap-2 pr-1 text-sm font-semibold text-ink">
+          <span
+            class="inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-brand-600 px-1.5 text-xs font-bold tabular-nums text-white dark:bg-ink dark:text-surface"
+            >{{ count() }}</span
+          >
+          {{ countWords() }}
+        </span>
+
+        <span class="hidden h-6 w-px bg-border sm:block" aria-hidden="true"></span>
+
+        <div class="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+          <ng-content />
+        </div>
+
+        <button
+          type="button"
+          class="ml-auto inline-flex h-9 items-center gap-1.5 rounded-control px-2.5 text-sm font-medium text-ink-soft transition-colors hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+          (click)="clear.emit()"
+        >
+          <sds-icon name="x" [size]="16" />
+          <span>{{ clearLabel() }}</span>
+        </button>
+      </div>
+    }
+  `, styles: [".animate-sds-bulk{animation:sds-bulk-in .16s ease-out}@keyframes sds-bulk-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-bulk{animation:none}}\n"] }]
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], countLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], clear: [{ type: i0.Output, args: ["clear"] }] } });
+
+/**
+ * Template for one row's content inside `<sds-sortable-list>`.
+ *
+ * @example
+ * <ng-template sdsSortableItem let-item let-i="index">{{ item.name }}</ng-template>
+ */
+class SdsSortableItem {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSortableItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsSortableItem, isStandalone: true, selector: "ng-template[sdsSortableItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSortableItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdsSortableItem]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Optional template for the drag handle's content (replaces the default grip icon). The handle itself
+ * stays a library-owned button, so it keeps its accessible name and keyboard behaviour.
+ */
+class SdsSortableHandle {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSortableHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsSortableHandle, isStandalone: true, selector: "ng-template[sdsSortableHandle]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSortableHandle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdsSortableHandle]',
+                    standalone: true,
+                }]
+        }] });
+let nextId$a = 0;
+/** Move one entry of `list` from `from` to `to`, returning a new array. */
+function moveItem(list, from, to) {
+    const next = [...list];
+    const [moved] = next.splice(from, 1);
+    next.splice(to, 0, moved);
+    return next;
+}
+/**
+ * Accessible reorderable list, with no `@angular/cdk` dependency.
+ *
+ * - **Pointer** (mouse, pen, touch): drag an item by its handle. The handle has `touch-action: none`, so
+ *   a finger drags instead of scrolling the page; the rest of the row still scrolls normally.
+ * - **Keyboard**: focus a handle, **Space/Enter** picks the item up, **↑/↓** (and Home/End) move it,
+ *   **Space/Enter** drops it, **Escape** cancels (the event is stopped, so an enclosing drawer stays open).
+ *   Moving focus away also cancels.
+ * - **Screen readers**: every handle is named ("Reorder Burgers") and described by the instructions; an
+ *   assertive live region announces pick-up, each move ("moved to position 3 of 8"), the drop and a cancel.
+ *
+ * Nothing is committed until the drop: while dragging, the other rows slide to make room. The drop
+ * updates the two-way `[(items)]` model and emits `(reorder)` with the old/new index and the new array.
+ * Items for which [itemDisabled] returns true cannot be picked up (they still shift when others pass).
+ *
+ * Row content comes from `<ng-template sdsSortableItem let-item>`; without one the item's label is shown.
+ * All spoken text is set through inputs (English defaults, `{item}` `{position}` `{total}` tokens).
+ *
+ * @example
+ * <sds-sortable-list [(items)]="categories" dataKey="id" labelField="name" ariaLabel="Categories"
+ *                    (reorder)="save($event)">
+ *   <ng-template sdsSortableItem let-cat>{{ cat.name }} <span>{{ cat.count }} items</span></ng-template>
+ * </sds-sortable-list>
+ */
+class SdsSortableList {
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    instructionsId = `sds-sortable-${nextId$a++}-help`;
+    /** The items, in order. Two-way: `[(items)]` receives the new order on drop. */
+    items = model([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Property used as a stable identity for rows (strongly recommended). */
+    dataKey = input('', ...(ngDevMode ? [{ debugName: "dataKey" }] : []));
+    /** Property holding the item's name, for the default row, the handle name and announcements. */
+    labelField = input('label', ...(ngDevMode ? [{ debugName: "labelField" }] : []));
+    /** Function returning the item's name; takes precedence over [labelField]. */
+    itemLabel = input(null, ...(ngDevMode ? [{ debugName: "itemLabel" }] : []));
+    /** Items for which this returns true cannot be picked up. */
+    itemDisabled = input(null, ...(ngDevMode ? [{ debugName: "itemDisabled" }] : []));
+    /** Disable reordering for the whole list. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** `card` (default): bordered rows with a gap. `plain`: rows separated by dividers. */
+    appearance = input('card', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /** Accessible name of the list. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Name of each handle; `{item}` is the item's label. */
+    handleLabel = input('Reorder {item}', ...(ngDevMode ? [{ debugName: "handleLabel" }] : []));
+    /** Read after a handle's name (aria-describedby). */
+    instructions = input('Press Space or Enter to pick up. Use the arrow keys to move, Space or Enter to drop, Escape to cancel.', ...(ngDevMode ? [{ debugName: "instructions" }] : []));
+    pickedUpMessage = input('{item} picked up. Position {position} of {total}.', ...(ngDevMode ? [{ debugName: "pickedUpMessage" }] : []));
+    movedMessage = input('{item} moved to position {position} of {total}.', ...(ngDevMode ? [{ debugName: "movedMessage" }] : []));
+    droppedMessage = input('{item} dropped at position {position} of {total}.', ...(ngDevMode ? [{ debugName: "droppedMessage" }] : []));
+    cancelledMessage = input('Reorder cancelled. {item} is back at position {position} of {total}.', ...(ngDevMode ? [{ debugName: "cancelledMessage" }] : []));
+    /** A move was completed. */
+    reorder = output();
+    itemTpl = contentChild(SdsSortableItem, ...(ngDevMode ? [{ debugName: "itemTpl" }] : []));
+    handleTpl = contentChild(SdsSortableHandle, ...(ngDevMode ? [{ debugName: "handleTpl" }] : []));
+    /** Rendered order: follows [items] until a drop commits a new one. */
+    working = linkedSignal(() => [...this.items()], ...(ngDevMode ? [{ debugName: "working" }] : []));
+    // --- drag state -------------------------------------------------------------
+    /** Index (in `working`) of the item being moved, or null. */
+    active = signal(null, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    /** Where it would land if dropped now. */
+    target = signal(null, ...(ngDevMode ? [{ debugName: "target" }] : []));
+    mode = signal(null, ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** Pointer-mode vertical offset of the dragged row. */
+    pointerDy = signal(0, ...(ngDevMode ? [{ debugName: "pointerDy" }] : []));
+    /** No transitions for one frame while a drop re-renders the new order in place. */
+    settling = signal(false, ...(ngDevMode ? [{ debugName: "settling" }] : []));
+    liveMessage = signal('', ...(ngDevMode ? [{ debugName: "liveMessage" }] : []));
+    /** Row boxes measured at drag start (top/height), plus the gap between rows. */
+    rects = [];
+    gap = 0;
+    pointerId = null;
+    startY = 0;
+    /** Per-row offsets that open a gap where the moving row will land. */
+    shifts = computed(() => {
+        const a = this.active();
+        const t = this.target();
+        const n = this.working().length;
+        const out = new Array(n).fill(0);
+        if (a === null || t === null || !this.rects[a])
+            return out;
+        const step = this.rects[a].height + this.gap;
+        for (let j = 0; j < n; j++) {
+            if (j === a)
+                continue;
+            if (a < t && j > a && j <= t)
+                out[j] = -step;
+            else if (t < a && j >= t && j < a)
+                out[j] = step;
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "shifts" }] : []));
+    /** Offset of the moving row: follows the pointer, or jumps slot to slot with the keyboard. */
+    activeOffset = computed(() => {
+        const a = this.active();
+        const t = this.target();
+        if (a === null || t === null)
+            return 0;
+        if (this.mode() === 'pointer')
+            return this.pointerDy();
+        let d = 0;
+        if (t > a)
+            for (let j = a + 1; j <= t; j++)
+                d += (this.rects[j]?.height ?? 0) + this.gap;
+        else
+            for (let j = t; j < a; j++)
+                d -= (this.rects[j]?.height ?? 0) + this.gap;
+        return d;
+    }, ...(ngDevMode ? [{ debugName: "activeOffset" }] : []));
+    // --- rendering helpers ------------------------------------------------------
+    trackKey(item, index) {
+        const k = this.dataKey();
+        if (k && item && typeof item === 'object')
+            return item[k] ?? index;
+        return item ?? index;
+    }
+    labelOf(item) {
+        const fn = this.itemLabel();
+        if (fn)
+            return fn(item);
+        if (item && typeof item === 'object') {
+            const v = item[this.labelField()];
+            return v == null ? '' : String(v);
+        }
+        return String(item);
+    }
+    isItemDisabled(item) {
+        return this.itemDisabled()?.(item) ?? false;
+    }
+    context(item, index) {
+        return { $implicit: item, item, index, grabbed: this.active() === index };
+    }
+    handleText(item) {
+        return this.handleLabel().replace('{item}', this.labelOf(item));
+    }
+    transformFor(i) {
+        if (this.active() === null)
+            return null;
+        const y = i === this.active() ? this.activeOffset() : this.shifts()[i];
+        return y ? `translate3d(0, ${y}px, 0)` : null;
+    }
+    rowClass(i) {
+        const isActive = this.active() === i;
+        const moving = this.active() !== null;
+        const card = this.appearance() === 'card';
+        const parts = ['relative flex items-center gap-2'];
+        parts.push(card ? 'rounded-control border border-border bg-surface px-2 py-2' : 'bg-surface px-1 py-2');
+        // Neighbours glide; the dragged row tracks the pointer 1:1 (no easing), and nothing animates
+        // during the settle frame after a drop.
+        if (moving && !this.settling() && !(isActive && this.mode() === 'pointer')) {
+            parts.push('transition-transform duration-150 ease-out');
+        }
+        if (isActive)
+            parts.push('z-10 shadow-lg ring-2 ring-brand-500');
+        return parts.join(' ');
+    }
+    handleClass(item) {
+        const base = 'grid h-9 w-8 shrink-0 place-items-center rounded-control text-ink-faint transition-colors ' +
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 ' +
+            'disabled:cursor-not-allowed disabled:opacity-40 touch-none select-none';
+        return this.disabled() || this.isItemDisabled(item)
+            ? base
+            : `${base} cursor-grab hover:bg-muted hover:text-ink active:cursor-grabbing`;
+    }
+    // --- keyboard ---------------------------------------------------------------
+    onHandleKeydown(event, i) {
+        if (this.mode() === 'pointer')
+            return;
+        const a = this.active();
+        if (a === null) {
+            if (event.key === ' ' || event.key === 'Enter') {
+                event.preventDefault();
+                this.begin(i, 'keyboard');
+                this.announce(this.pickedUpMessage(), i);
+            }
+            return;
+        }
+        const last = this.working().length - 1;
+        const t = this.target() ?? a;
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.keyMove(Math.max(0, t - 1));
+                return;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                event.preventDefault();
+                this.keyMove(Math.min(last, t + 1));
+                return;
+            case 'Home':
+                event.preventDefault();
+                this.keyMove(0);
+                return;
+            case 'End':
+                event.preventDefault();
+                this.keyMove(last);
+                return;
+            case ' ':
+            case 'Enter':
+                event.preventDefault();
+                this.commit();
+                return;
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                this.cancel();
+                return;
+            case 'Tab':
+                this.cancel();
+                return;
+        }
+    }
+    keyMove(to) {
+        if (to === this.target())
+            return;
+        this.target.set(to);
+        this.announce(this.movedMessage(), to);
+    }
+    /** Focus leaving the list while an item is picked up cancels the move. */
+    onFocusOut(event) {
+        if (this.mode() !== 'keyboard')
+            return;
+        const next = event.relatedTarget;
+        if (next && this.host.nativeElement.contains(next))
+            return;
+        this.cancel();
+    }
+    // --- pointer ------------------------------------------------------------------
+    onPointerDown(event, i) {
+        if (this.active() !== null || event.button !== 0)
+            return;
+        const item = this.working()[i];
+        if (this.disabled() || this.isItemDisabled(item))
+            return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        event.currentTarget.focus({ preventScroll: true });
+        this.pointerId = event.pointerId;
+        this.startY = event.clientY;
+        this.pointerDy.set(0);
+        this.begin(i, 'pointer');
+    }
+    onPointerMove(event) {
+        if (this.mode() !== 'pointer' || event.pointerId !== this.pointerId)
+            return;
+        const a = this.active();
+        if (a === null)
+            return;
+        const dy = event.clientY - this.startY;
+        this.pointerDy.set(dy);
+        const center = this.rects[a].top + this.rects[a].height / 2 + dy;
+        let t = 0;
+        this.rects.forEach((r, j) => {
+            if (j !== a && r.top + r.height / 2 < center)
+                t++;
+        });
+        this.target.set(t);
+    }
+    onPointerUp(event) {
+        if (this.mode() !== 'pointer' || event.pointerId !== this.pointerId)
+            return;
+        this.commit();
+    }
+    onPointerCancel() {
+        if (this.mode() === 'pointer')
+            this.cancel(false);
+    }
+    // --- lifecycle of a move -------------------------------------------------------
+    begin(i, mode) {
+        this.measure();
+        this.active.set(i);
+        this.target.set(i);
+        this.mode.set(mode);
+    }
+    measure() {
+        const rows = Array.from(this.host.nativeElement.querySelectorAll('li[data-sortable-index]'));
+        this.rects = rows.map((r) => {
+            const b = r.getBoundingClientRect();
+            return { top: b.top, height: b.height };
+        });
+        this.gap =
+            this.rects.length > 1
+                ? Math.max(0, this.rects[1].top - (this.rects[0].top + this.rects[0].height))
+                : 0;
+    }
+    commit() {
+        const from = this.active();
+        const to = this.target();
+        const mode = this.mode();
+        if (from === null || to === null)
+            return this.reset();
+        const item = this.working()[from];
+        if (to === from) {
+            this.reset();
+            this.announce(this.droppedMessage(), to, item);
+            if (mode === 'keyboard')
+                this.focusHandle(to);
+            return;
+        }
+        const next = moveItem(this.working(), from, to);
+        // Swap order and clear the offsets in the same frame, with transitions off, so rows don't jump.
+        this.settling.set(true);
+        this.reset();
+        this.working.set(next);
+        this.items.set(next);
+        this.reorder.emit({ previousIndex: from, currentIndex: to, item, items: next });
+        this.announce(this.droppedMessage(), to, item);
+        this.focusHandle(to);
+    }
+    /** Nothing was moved in the DOM while dragging, so focus is still where it should be. */
+    cancel(announce = true) {
+        const from = this.active();
+        if (from === null)
+            return;
+        this.reset();
+        if (announce)
+            this.announce(this.cancelledMessage(), from);
+    }
+    reset() {
+        this.active.set(null);
+        this.target.set(null);
+        this.mode.set(null);
+        this.pointerDy.set(0);
+        this.pointerId = null;
+    }
+    focusHandle(index) {
+        afterNextRender(() => {
+            this.settling.set(false);
+            this.host.nativeElement
+                .querySelector(`[data-sortable-handle="${index}"]`)
+                ?.focus({ preventScroll: false });
+        }, { injector: this.injector });
+    }
+    announce(template, position, item) {
+        const it = item ?? this.working()[this.active() ?? position];
+        const text = template
+            .replace('{item}', it === undefined ? '' : this.labelOf(it))
+            .replace('{position}', String(position + 1))
+            .replace('{total}', String(this.working().length));
+        // Re-set even when unchanged, so a repeated message is re-announced.
+        this.liveMessage.set('');
+        queueMicrotask(() => this.liveMessage.set(text));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSortableList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSortableList, isStandalone: true, selector: "sds-sortable-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, labelField: { classPropertyName: "labelField", publicName: "labelField", isSignal: true, isRequired: false, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, handleLabel: { classPropertyName: "handleLabel", publicName: "handleLabel", isSignal: true, isRequired: false, transformFunction: null }, instructions: { classPropertyName: "instructions", publicName: "instructions", isSignal: true, isRequired: false, transformFunction: null }, pickedUpMessage: { classPropertyName: "pickedUpMessage", publicName: "pickedUpMessage", isSignal: true, isRequired: false, transformFunction: null }, movedMessage: { classPropertyName: "movedMessage", publicName: "movedMessage", isSignal: true, isRequired: false, transformFunction: null }, droppedMessage: { classPropertyName: "droppedMessage", publicName: "droppedMessage", isSignal: true, isRequired: false, transformFunction: null }, cancelledMessage: { classPropertyName: "cancelledMessage", publicName: "cancelledMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", reorder: "reorder" }, host: { classAttribute: "block" }, queries: [{ propertyName: "itemTpl", first: true, predicate: SdsSortableItem, descendants: true, isSignal: true }, { propertyName: "handleTpl", first: true, predicate: SdsSortableHandle, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ul
+      role="list"
+      [attr.aria-label]="ariaLabel() || null"
+      class="flex flex-col"
+      [class.gap-2]="appearance() === 'card'"
+      [class.divide-y]="appearance() === 'plain'"
+      [class.divide-border]="appearance() === 'plain'"
+      (focusout)="onFocusOut($event)"
+    >
+      @for (item of working(); track trackKey(item, $index); let i = $index) {
+        <li
+          [attr.data-sortable-index]="i"
+          [class]="rowClass(i)"
+          [style.transform]="transformFor(i)"
+        >
+          <button
+            type="button"
+            [class]="handleClass(item)"
+            [attr.aria-label]="handleText(item)"
+            [attr.aria-describedby]="instructionsId"
+            [attr.aria-pressed]="mode() === 'keyboard' && active() === i ? 'true' : 'false'"
+            [attr.data-sortable-handle]="i"
+            [disabled]="disabled() || isItemDisabled(item)"
+            (keydown)="onHandleKeydown($event, i)"
+            (pointerdown)="onPointerDown($event, i)"
+            (pointermove)="onPointerMove($event)"
+            (pointerup)="onPointerUp($event)"
+            (pointercancel)="onPointerCancel()"
+          >
+            @if (handleTpl()) {
+              <ng-container
+                [ngTemplateOutlet]="handleTpl()!.template"
+                [ngTemplateOutletContext]="context(item, i)"
+              />
+            } @else {
+              <sds-icon name="grip-vertical" [size]="18" />
+            }
+          </button>
+
+          <div class="min-w-0 flex-1">
+            @if (itemTpl()) {
+              <ng-container
+                [ngTemplateOutlet]="itemTpl()!.template"
+                [ngTemplateOutletContext]="context(item, i)"
+              />
+            } @else {
+              <span class="text-sm text-ink">{{ labelOf(item) }}</span>
+            }
+          </div>
+        </li>
+      }
+    </ul>
+
+    <p [id]="instructionsId" class="sr-only">{{ instructions() }}</p>
+    <div class="sr-only" aria-live="assertive" aria-atomic="true">{{ liveMessage() }}</div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: SdsSortableList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-sortable-list',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet, SdsIcon],
+                    host: { class: 'block' },
+                    template: `
+    <ul
+      role="list"
+      [attr.aria-label]="ariaLabel() || null"
+      class="flex flex-col"
+      [class.gap-2]="appearance() === 'card'"
+      [class.divide-y]="appearance() === 'plain'"
+      [class.divide-border]="appearance() === 'plain'"
+      (focusout)="onFocusOut($event)"
+    >
+      @for (item of working(); track trackKey(item, $index); let i = $index) {
+        <li
+          [attr.data-sortable-index]="i"
+          [class]="rowClass(i)"
+          [style.transform]="transformFor(i)"
+        >
+          <button
+            type="button"
+            [class]="handleClass(item)"
+            [attr.aria-label]="handleText(item)"
+            [attr.aria-describedby]="instructionsId"
+            [attr.aria-pressed]="mode() === 'keyboard' && active() === i ? 'true' : 'false'"
+            [attr.data-sortable-handle]="i"
+            [disabled]="disabled() || isItemDisabled(item)"
+            (keydown)="onHandleKeydown($event, i)"
+            (pointerdown)="onPointerDown($event, i)"
+            (pointermove)="onPointerMove($event)"
+            (pointerup)="onPointerUp($event)"
+            (pointercancel)="onPointerCancel()"
+          >
+            @if (handleTpl()) {
+              <ng-container
+                [ngTemplateOutlet]="handleTpl()!.template"
+                [ngTemplateOutletContext]="context(item, i)"
+              />
+            } @else {
+              <sds-icon name="grip-vertical" [size]="18" />
+            }
+          </button>
+
+          <div class="min-w-0 flex-1">
+            @if (itemTpl()) {
+              <ng-container
+                [ngTemplateOutlet]="itemTpl()!.template"
+                [ngTemplateOutletContext]="context(item, i)"
+              />
+            } @else {
+              <span class="text-sm text-ink">{{ labelOf(item) }}</span>
+            }
+          </div>
+        </li>
+      }
+    </ul>
+
+    <p [id]="instructionsId" class="sr-only">{{ instructions() }}</p>
+    <div class="sr-only" aria-live="assertive" aria-atomic="true">{{ liveMessage() }}</div>
+  `,
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], labelField: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelField", required: false }] }], itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLabel", required: false }] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], handleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "handleLabel", required: false }] }], instructions: [{ type: i0.Input, args: [{ isSignal: true, alias: "instructions", required: false }] }], pickedUpMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickedUpMessage", required: false }] }], movedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "movedMessage", required: false }] }], droppedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppedMessage", required: false }] }], cancelledMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelledMessage", required: false }] }], reorder: [{ type: i0.Output, args: ["reorder"] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSortableItem), { isSignal: true }] }], handleTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSortableHandle), { isSignal: true }] }] } });
+
+let nextId$9 = 0;
+/** "1.5 MB" style size (decimal units, like file managers show them), for messages. */
+function sdsFormatBytes(bytes) {
+    if (!Number.isFinite(bytes) || bytes < 0)
+        return '';
+    if (bytes < 1000)
+        return `${bytes} B`;
+    const units = ['kB', 'MB', 'GB'];
+    let v = bytes / 1000;
+    let u = 0;
+    while (v >= 1000 && u < units.length - 1) {
+        v /= 1000;
+        u++;
+    }
+    return `${v >= 10 || Number.isInteger(v) ? Math.round(v) : v.toFixed(1)} ${units[u]}`;
+}
+/** Does `file` match an `accept` string (".jpg,image/png,image/*")? Empty accepts everything. */
+function sdsFileMatchesAccept(file, accept) {
+    const rules = accept
+        .split(',')
+        .map((r) => r.trim().toLowerCase())
+        .filter(Boolean);
+    if (!rules.length)
+        return true;
+    const name = file.name.toLowerCase();
+    const type = (file.type || '').toLowerCase();
+    return rules.some((rule) => {
+        if (rule.startsWith('.'))
+            return name.endsWith(rule);
+        if (rule.endsWith('/*'))
+            return type.startsWith(rule.slice(0, -1));
+        return type === rule;
+    });
+}
+/**
+ * Drop zone plus a "Browse" button for picking files. Filters by [accept] (same syntax as the native
+ * input: `.csv`, `image/*`, `image/png`), [maxSize] (bytes) and [maxFiles]; emits the accepted files as
+ * `(files)` and the rest as `(rejected)` with a reason and a readable message, which is also shown
+ * under the zone and announced.
+ *
+ * Keyboard and screen-reader users use the native Browse button (the zone itself is a pointer
+ * affordance); clicking anywhere on the zone opens the picker too. All text is set through inputs with
+ * English defaults.
+ *
+ * @example
+ * <sds-file-drop accept="image/jpeg,image/png,image/webp" multiple [maxSize]="10_000_000"
+ *                label="Drop photos here" browseLabel="Choose photos"
+ *                (files)="upload($event)" (rejected)="onRejected($event)" />
+ */
+class SdsFileDrop {
+    zoneId = `sds-file-drop-${nextId$9++}`;
+    fileInput = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInput" }] : []));
+    /** Accepted types, native `accept` syntax. Empty = anything. */
+    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Largest accepted file in bytes. Null = no limit. */
+    maxSize = input(null, ...(ngDevMode ? [{ debugName: "maxSize" }] : []));
+    /** Most files accepted in one pick/drop. Null = no limit (1 when not [multiple]). */
+    maxFiles = input(null, ...(ngDevMode ? [{ debugName: "maxFiles" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Icon in the zone at rest. */
+    icon = input('upload', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    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" }] : []));
+    browseLabel = input('Browse files', ...(ngDevMode ? [{ debugName: "browseLabel" }] : []));
+    /** Extra line under the label, e.g. "JPEG or PNG, up to 10 MB". */
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    /** Tokens: `{name}`. */
+    wrongTypeMessage = input('{name}: this file type is not accepted.', ...(ngDevMode ? [{ debugName: "wrongTypeMessage" }] : []));
+    /** Tokens: `{name}`, `{max}` (formatted size). */
+    tooLargeMessage = input('{name}: larger than {max}.', ...(ngDevMode ? [{ debugName: "tooLargeMessage" }] : []));
+    /** Tokens: `{name}`, `{max}` (file count). */
+    tooManyMessage = input('{name}: only {max} file(s) can be added at once.', ...(ngDevMode ? [{ debugName: "tooManyMessage" }] : []));
+    /** Files that passed every check, in pick/drop order. */
+    files = output();
+    /** Files that were turned away, with the reason. */
+    rejected = output();
+    dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
+    errors = signal([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    dragDepth = 0;
+    describedBy = computed(() => {
+        const ids = [`${this.zoneId}-label`];
+        if (this.hint())
+            ids.push(`${this.zoneId}-hint`);
+        if (this.errors().length)
+            ids.push(`${this.zoneId}-errors`);
+        return ids.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    zoneClass = computed(() => {
+        const base = 'flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed px-6 py-8 ' +
+            'text-center transition-colors';
+        if (this.disabled())
+            return `${base} cursor-not-allowed border-border bg-muted opacity-60`;
+        return this.dragging()
+            ? `${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" }] : []));
+    /** Open the native file picker. */
+    browse(event) {
+        event?.stopPropagation();
+        if (this.disabled())
+            return;
+        this.fileInput()?.nativeElement.click();
+    }
+    onZoneClick(event) {
+        if (event.target.closest('button, input'))
+            return;
+        this.browse();
+    }
+    onDragEnter(event) {
+        if (this.disabled() || !this.hasFiles(event))
+            return;
+        event.preventDefault();
+        this.dragDepth++;
+        this.dragging.set(true);
+    }
+    onDragOver(event) {
+        if (this.disabled() || !this.hasFiles(event))
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'copy';
+    }
+    onDragLeave(event) {
+        if (this.disabled() || !this.hasFiles(event))
+            return;
+        this.dragDepth = Math.max(0, this.dragDepth - 1);
+        if (this.dragDepth === 0)
+            this.dragging.set(false);
+    }
+    onDrop(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.dragDepth = 0;
+        this.dragging.set(false);
+        this.handle(Array.from(event.dataTransfer?.files ?? []));
+    }
+    onInputChange(event) {
+        const el = event.target;
+        this.handle(Array.from(el.files ?? []));
+        // Reset so picking the same file again still fires `change`.
+        el.value = '';
+    }
+    hasFiles(event) {
+        return Array.from(event.dataTransfer?.types ?? []).includes('Files');
+    }
+    handle(list) {
+        if (!list.length)
+            return;
+        const accepted = [];
+        const rejected = [];
+        const max = this.maxFiles() ?? (this.multiple() ? null : 1);
+        const maxSize = this.maxSize();
+        for (const file of list) {
+            if (!sdsFileMatchesAccept(file, this.accept())) {
+                rejected.push({ file, reason: 'type', message: this.render(this.wrongTypeMessage(), file) });
+            }
+            else if (maxSize !== null && file.size > maxSize) {
+                rejected.push({
+                    file,
+                    reason: 'size',
+                    message: this.render(this.tooLargeMessage(), file, sdsFormatBytes(maxSize)),
+                });
+            }
+            else if (max !== null && accepted.length >= max) {
+                rejected.push({
+                    file,
+                    reason: 'count',
+                    message: this.render(this.tooManyMessage(), file, String(max)),
+                });
+            }
+            else {
+                accepted.push(file);
+            }
+        }
+        this.errors.set(rejected.map((r) => r.message));
+        if (accepted.length)
+            this.files.emit(accepted);
+        if (rejected.length)
+            this.rejected.emit(rejected);
+    }
+    render(template, file, max = '') {
+        return template.replace('{name}', file.name).replace('{max}', max);
+    }
+    /** Clear the error messages under the zone. */
+    clearErrors() {
+        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: `
+    <div
+      [class]="zoneClass()"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
+      [attr.data-dragging]="dragging() ? 'true' : null"
+      (click)="onZoneClick($event)"
+      (dragenter)="onDragEnter($event)"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave($event)"
+      (drop)="onDrop($event)"
+    >
+      <span
+        class="grid h-11 w-11 place-items-center rounded-full bg-surface text-ink-soft shadow-sm ring-1 ring-border"
+        aria-hidden="true"
+      >
+        <sds-icon [name]="dragging() ? 'upload' : icon()" [size]="22" />
+      </span>
+      <p class="text-sm font-semibold text-ink" [id]="zoneId + '-label'">
+        {{ dragging() ? dropLabel() : label() }}
+      </p>
+      @if (hint()) {
+        <p class="text-xs text-ink-faint" [id]="zoneId + '-hint'">{{ hint() }}</p>
+      }
+      <button
+        type="button"
+        class="mt-1 inline-flex h-9 items-center gap-1.5 rounded-control border border-border bg-surface px-3.5 text-sm font-semibold text-ink shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-60"
+        [disabled]="disabled()"
+        [attr.aria-describedby]="describedBy()"
+        (click)="browse($event)"
+      >
+        <sds-icon name="upload" [size]="16" />
+        {{ browseLabel() }}
+      </button>
+      <input
+        #fileInput
+        type="file"
+        class="sr-only"
+        tabindex="-1"
+        aria-hidden="true"
+        [accept]="accept()"
+        [multiple]="multiple()"
+        [disabled]="disabled()"
+        (change)="onInputChange($event)"
+      />
+    </div>
+
+    <div aria-live="polite" aria-atomic="true">
+      @if (errors().length) {
+        <ul [id]="zoneId + '-errors'" class="mt-2 space-y-1">
+          @for (err of errors(); track $index) {
+            <li class="flex items-start gap-1.5 text-xs font-medium text-danger">
+              <sds-icon name="alert-circle" [size]="14" class="mt-px shrink-0" />
+              <span>{{ err }}</span>
+            </li>
+          }
+        </ul>
+      }
+    </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: SdsFileDrop, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-file-drop',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
+                    host: { class: 'block' },
+                    template: `
+    <div
+      [class]="zoneClass()"
+      [attr.aria-disabled]="disabled() ? 'true' : null"
+      [attr.data-dragging]="dragging() ? 'true' : null"
+      (click)="onZoneClick($event)"
+      (dragenter)="onDragEnter($event)"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave($event)"
+      (drop)="onDrop($event)"
+    >
+      <span
+        class="grid h-11 w-11 place-items-center rounded-full bg-surface text-ink-soft shadow-sm ring-1 ring-border"
+        aria-hidden="true"
+      >
+        <sds-icon [name]="dragging() ? 'upload' : icon()" [size]="22" />
+      </span>
+      <p class="text-sm font-semibold text-ink" [id]="zoneId + '-label'">
+        {{ dragging() ? dropLabel() : label() }}
+      </p>
+      @if (hint()) {
+        <p class="text-xs text-ink-faint" [id]="zoneId + '-hint'">{{ hint() }}</p>
+      }
+      <button
+        type="button"
+        class="mt-1 inline-flex h-9 items-center gap-1.5 rounded-control border border-border bg-surface px-3.5 text-sm font-semibold text-ink shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-60"
+        [disabled]="disabled()"
+        [attr.aria-describedby]="describedBy()"
+        (click)="browse($event)"
+      >
+        <sds-icon name="upload" [size]="16" />
+        {{ browseLabel() }}
+      </button>
+      <input
+        #fileInput
+        type="file"
+        class="sr-only"
+        tabindex="-1"
+        aria-hidden="true"
+        [accept]="accept()"
+        [multiple]="multiple()"
+        [disabled]="disabled()"
+        (change)="onInputChange($event)"
+      />
+    </div>
+
+    <div aria-live="polite" aria-atomic="true">
+      @if (errors().length) {
+        <ul [id]="zoneId + '-errors'" class="mt-2 space-y-1">
+          @for (err of errors(); track $index) {
+            <li class="flex items-start gap-1.5 text-xs font-medium text-danger">
+              <sds-icon name="alert-circle" [size]="14" class="mt-px shrink-0" />
+              <span>{{ err }}</span>
+            </li>
+          }
+        </ul>
+      }
+    </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"] }] } });
+
+let nextId$8 = 0;
+/**
+ * Crops an image to a FIXED aspect ratio (e.g. the shop's card ratio): the frame is fixed and the image
+ * moves and zooms behind it, always covering the frame, so every crop is valid.
+ *
+ * - Pointer: drag to move; wheel or pinch to zoom around the pointer; a zoom slider and ± buttons.
+ * - Keyboard (focus the frame): arrow keys nudge the image (Shift = 10×), `+`/`-` zoom, `0` resets.
+ * - `(cropChange)` emits the crop in the source image's natural pixels after every change;
+ *   {@link toBlob} renders it through a canvas (optionally resized) for upload.
+ *
+ * `src` takes a URL or a Blob/File (an object URL is managed for you). For a cross-origin URL the server
+ * must send CORS headers and [crossOrigin] must be set, or the canvas is tainted and toBlob() rejects.
+ *
+ * @example
+ * <sds-image-cropper [src]="file" [aspectRatio]="4 / 3" (cropChange)="crop = $event" #cropper />
+ * <sds-button (click)="upload(await cropper.toBlob({ width: 1600 }))">Save</sds-button>
+ */
+class SdsImageCropper {
+    helpId = `sds-image-cropper-${nextId$8++}-help`;
+    viewport = viewChild('viewport', ...(ngDevMode ? [{ debugName: "viewport" }] : []));
+    /** Image to crop: a URL, or a Blob/File. */
+    src = input(null, ...(ngDevMode ? [{ debugName: "src" }] : []));
+    /** Frame width ÷ height, e.g. `1`, `4 / 3`, `16 / 9`. */
+    aspectRatio = input(1, ...(ngDevMode ? [{ debugName: "aspectRatio", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Largest zoom factor relative to "cover". */
+    maxZoom = input(4, ...(ngDevMode ? [{ debugName: "maxZoom", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Zoom change per button press / key press. */
+    zoomStep = input(0.1, ...(ngDevMode ? [{ debugName: "zoomStep", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Visual mask only (the output is always the rectangle). */
+    shape = input('rect', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    /** `crossorigin` for URL sources, needed for toBlob() on a cross-origin image. */
+    crossOrigin = input(null, ...(ngDevMode ? [{ debugName: "crossOrigin" }] : []));
+    label = input('Crop area', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    roleDescription = input('image cropper', ...(ngDevMode ? [{ debugName: "roleDescription" }] : []));
+    instructions = input('Drag, or use the arrow keys, to move the image. Use plus and minus to zoom, 0 to reset.', ...(ngDevMode ? [{ debugName: "instructions" }] : []));
+    zoomLabel = input('Zoom', ...(ngDevMode ? [{ debugName: "zoomLabel" }] : []));
+    zoomInLabel = input('Zoom in', ...(ngDevMode ? [{ debugName: "zoomInLabel" }] : []));
+    zoomOutLabel = input('Zoom out', ...(ngDevMode ? [{ debugName: "zoomOutLabel" }] : []));
+    /** The crop, in natural pixels, after every change. */
+    cropChange = output();
+    /** The image loaded; natural size. */
+    imageLoad = output();
+    /** The image failed to load. */
+    imageError = output();
+    objectUrl = signal(null, ...(ngDevMode ? [{ debugName: "objectUrl" }] : []));
+    ownedUrl = null;
+    imgEl = null;
+    loaded = signal(false, ...(ngDevMode ? [{ debugName: "loaded" }] : []));
+    naturalW = signal(0, ...(ngDevMode ? [{ debugName: "naturalW" }] : []));
+    naturalH = signal(0, ...(ngDevMode ? [{ debugName: "naturalH" }] : []));
+    /** Frame size in CSS px (tracked with a ResizeObserver). */
+    frameW = signal(0, ...(ngDevMode ? [{ debugName: "frameW" }] : []));
+    frameH = signal(0, ...(ngDevMode ? [{ debugName: "frameH" }] : []));
+    zoom = signal(1, ...(ngDevMode ? [{ debugName: "zoom" }] : []));
+    tx = signal(0, ...(ngDevMode ? [{ debugName: "tx" }] : []));
+    ty = signal(0, ...(ngDevMode ? [{ debugName: "ty" }] : []));
+    dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
+    /** Scale that makes the image just cover the frame (zoom 1). */
+    coverScale = computed(() => {
+        const w = this.naturalW();
+        const h = this.naturalH();
+        if (!w || !h || !this.frameW() || !this.frameH())
+            return 1;
+        return Math.max(this.frameW() / w, this.frameH() / h);
+    }, ...(ngDevMode ? [{ debugName: "coverScale" }] : []));
+    scale = computed(() => this.coverScale() * this.zoom(), ...(ngDevMode ? [{ debugName: "scale" }] : []));
+    displayW = computed(() => this.naturalW() * this.scale(), ...(ngDevMode ? [{ debugName: "displayW" }] : []));
+    displayH = computed(() => this.naturalH() * this.scale(), ...(ngDevMode ? [{ debugName: "displayH" }] : []));
+    zoomText = computed(() => `${Math.round(this.zoom() * 100)}%`, ...(ngDevMode ? [{ debugName: "zoomText" }] : []));
+    /** The current crop in natural pixels. */
+    crop = computed(() => {
+        const s = this.scale();
+        if (!this.loaded() || !s)
+            return { x: 0, y: 0, width: 0, height: 0 };
+        const x = -this.tx() / s;
+        const y = -this.ty() / s;
+        const width = Math.min(this.naturalW(), this.frameW() / s);
+        const height = Math.min(this.naturalH(), this.frameH() / s);
+        return {
+            x: Math.max(0, Math.round(x)),
+            y: Math.max(0, Math.round(y)),
+            width: Math.round(width),
+            height: Math.round(height),
+        };
+    }, ...(ngDevMode ? [{ debugName: "crop" }] : []));
+    resizeObserver = null;
+    pointers = new Map();
+    lastPinch = 0;
+    constructor() {
+        // Source → object URL (for Blobs), reset state.
+        effect(() => {
+            const src = this.src();
+            untracked(() => {
+                this.revoke();
+                this.loaded.set(false);
+                if (src instanceof Blob) {
+                    this.ownedUrl = URL.createObjectURL(src);
+                    this.objectUrl.set(this.ownedUrl);
+                }
+                else {
+                    this.objectUrl.set(src || null);
+                }
+            });
+        });
+        // Track the frame size; keep the image covering it (and the crop centre stable) on resize.
+        effect((onCleanup) => {
+            const el = this.viewport()?.nativeElement;
+            if (!el || typeof ResizeObserver === 'undefined')
+                return;
+            const ro = new ResizeObserver(() => this.measureFrame());
+            ro.observe(el);
+            this.resizeObserver = ro;
+            onCleanup(() => ro.disconnect());
+        });
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.revoke();
+    }
+    // --- loading -------------------------------------------------------------------
+    onLoad(event) {
+        const img = event.target;
+        this.imgEl = img;
+        this.naturalW.set(img.naturalWidth);
+        this.naturalH.set(img.naturalHeight);
+        this.measureFrame();
+        this.loaded.set(true);
+        this.reset();
+        this.imageLoad.emit({ width: img.naturalWidth, height: img.naturalHeight });
+    }
+    onError() {
+        this.loaded.set(false);
+        this.imageError.emit();
+    }
+    revoke() {
+        if (this.ownedUrl)
+            URL.revokeObjectURL(this.ownedUrl);
+        this.ownedUrl = null;
+    }
+    measureFrame() {
+        const el = this.viewport()?.nativeElement;
+        if (!el)
+            return;
+        const prevW = this.frameW();
+        const w = el.clientWidth;
+        const h = el.clientHeight || w / (this.aspectRatio() || 1);
+        if (w === prevW && h === this.frameH())
+            return;
+        // Keep the same point of the image under the frame centre across a resize.
+        const s = this.scale();
+        const cx = s ? (this.frameW() / 2 - this.tx()) / s : 0;
+        const cy = s ? (this.frameH() / 2 - this.ty()) / s : 0;
+        this.frameW.set(w);
+        this.frameH.set(h);
+        if (this.loaded() && prevW) {
+            const ns = this.scale();
+            this.setOffset(w / 2 - cx * ns, h / 2 - cy * ns);
+            this.emit();
+        }
+    }
+    // --- geometry ------------------------------------------------------------------
+    /** Centre the image at zoom 1. */
+    reset() {
+        this.zoom.set(1);
+        this.setOffset((this.frameW() - this.displayW()) / 2, (this.frameH() - this.displayH()) / 2);
+        this.emit();
+    }
+    setOffset(x, y) {
+        const minX = Math.min(0, this.frameW() - this.displayW());
+        const minY = Math.min(0, this.frameH() - this.displayH());
+        this.tx.set(Math.min(0, Math.max(minX, x)));
+        this.ty.set(Math.min(0, Math.max(minY, y)));
+    }
+    /** Zoom to `next`, keeping the frame point (px, py) fixed (defaults to the centre). */
+    zoomTo(next, px = this.frameW() / 2, py = this.frameH() / 2) {
+        const z = Math.min(this.maxZoom(), Math.max(1, next));
+        const s = this.scale();
+        const ix = (px - this.tx()) / s;
+        const iy = (py - this.ty()) / s;
+        this.zoom.set(z);
+        const ns = this.scale();
+        this.setOffset(px - ix * ns, py - iy * ns);
+        this.emit();
+    }
+    /** Zoom in (+) or out (−) by `delta`. */
+    zoomBy(delta) {
+        if (!this.loaded())
+            return;
+        this.zoomTo(this.zoom() + delta);
+    }
+    emit() {
+        if (this.loaded())
+            this.cropChange.emit(this.crop());
+    }
+    // --- pointer ---------------------------------------------------------------------
+    onPointerDown(event) {
+        if (!this.loaded())
+            return;
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        this.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+        this.dragging.set(true);
+        if (this.pointers.size === 2)
+            this.lastPinch = this.pinchDistance();
+    }
+    onPointerMove(event) {
+        const prev = this.pointers.get(event.pointerId);
+        if (!prev)
+            return;
+        const cur = { x: event.clientX, y: event.clientY };
+        this.pointers.set(event.pointerId, cur);
+        if (this.pointers.size >= 2) {
+            const d = this.pinchDistance();
+            if (this.lastPinch > 0) {
+                const rect = this.viewport().nativeElement.getBoundingClientRect();
+                const pts = [...this.pointers.values()];
+                const mx = (pts[0].x + pts[1].x) / 2 - rect.left;
+                const my = (pts[0].y + pts[1].y) / 2 - rect.top;
+                this.zoomTo(this.zoom() * (d / this.lastPinch), mx, my);
+            }
+            this.lastPinch = d;
+            return;
+        }
+        this.setOffset(this.tx() + (cur.x - prev.x), this.ty() + (cur.y - prev.y));
+    }
+    onPointerUp(event) {
+        if (!this.pointers.delete(event.pointerId))
+            return;
+        if (this.pointers.size < 2)
+            this.lastPinch = 0;
+        if (this.pointers.size === 0) {
+            this.dragging.set(false);
+            this.emit();
+        }
+    }
+    pinchDistance() {
+        const [a, b] = [...this.pointers.values()];
+        return a && b ? Math.hypot(a.x - b.x, a.y - b.y) : 0;
+    }
+    onWheel(event) {
+        if (!this.loaded())
+            return;
+        event.preventDefault();
+        const rect = this.viewport().nativeElement.getBoundingClientRect();
+        const factor = Math.exp(-event.deltaY * 0.0015);
+        this.zoomTo(this.zoom() * factor, event.clientX - rect.left, event.clientY - rect.top);
+    }
+    onSlider(event) {
+        this.zoomTo(Number(event.target.value));
+    }
+    // --- keyboard ---------------------------------------------------------------------
+    onKeydown(event) {
+        if (!this.loaded())
+            return;
+        const step = event.shiftKey ? 10 : 1;
+        let handled = true;
+        switch (event.key) {
+            // Arrow keys move the IMAGE in that direction under the fixed frame.
+            case 'ArrowLeft':
+                this.setOffset(this.tx() - step, this.ty());
+                break;
+            case 'ArrowRight':
+                this.setOffset(this.tx() + step, this.ty());
+                break;
+            case 'ArrowUp':
+                this.setOffset(this.tx(), this.ty() - step);
+                break;
+            case 'ArrowDown':
+                this.setOffset(this.tx(), this.ty() + step);
+                break;
+            case '+':
+            case '=':
+                this.zoomBy(this.zoomStep());
+                return event.preventDefault();
+            case '-':
+            case '_':
+                this.zoomBy(-this.zoomStep());
+                return event.preventDefault();
+            case '0':
+                this.reset();
+                return event.preventDefault();
+            default:
+                handled = false;
+        }
+        if (handled) {
+            event.preventDefault();
+            this.emit();
+        }
+    }
+    // --- output -------------------------------------------------------------------------
+    /**
+     * Render the current crop to a canvas (natural resolution, or scaled to `width`). Returns null
+     * before an image has loaded.
+     */
+    toCanvas(width) {
+        const img = this.imgEl;
+        const c = this.crop();
+        if (!img || !this.loaded() || !c.width || !c.height)
+            return null;
+        const outW = Math.max(1, Math.round(width ?? c.width));
+        const outH = Math.max(1, Math.round(outW / (this.aspectRatio() || c.width / c.height)));
+        const canvas = document.createElement('canvas');
+        canvas.width = outW;
+        canvas.height = outH;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return null;
+        ctx.imageSmoothingQuality = 'high';
+        ctx.drawImage(img, c.x, c.y, c.width, c.height, 0, 0, outW, outH);
+        return canvas;
+    }
+    /** Encode the current crop as a Blob (JPEG 0.9 by default). */
+    toBlob(options = {}) {
+        const canvas = this.toCanvas(options.width);
+        if (!canvas)
+            return Promise.resolve(null);
+        return new Promise((resolve, reject) => {
+            try {
+                canvas.toBlob((b) => resolve(b), options.type ?? 'image/jpeg', options.quality ?? 0.9);
+            }
+            catch (e) {
+                reject(e);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsImageCropper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsImageCropper, isStandalone: true, selector: "sds-image-cropper", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, zoomStep: { classPropertyName: "zoomStep", publicName: "zoomStep", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, crossOrigin: { classPropertyName: "crossOrigin", publicName: "crossOrigin", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, roleDescription: { classPropertyName: "roleDescription", publicName: "roleDescription", isSignal: true, isRequired: false, transformFunction: null }, instructions: { classPropertyName: "instructions", publicName: "instructions", isSignal: true, isRequired: false, transformFunction: null }, zoomLabel: { classPropertyName: "zoomLabel", publicName: "zoomLabel", isSignal: true, isRequired: false, transformFunction: null }, zoomInLabel: { classPropertyName: "zoomInLabel", publicName: "zoomInLabel", isSignal: true, isRequired: false, transformFunction: null }, zoomOutLabel: { classPropertyName: "zoomOutLabel", publicName: "zoomOutLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropChange: "cropChange", imageLoad: "imageLoad", imageError: "imageError" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      #viewport
+      class="relative w-full touch-none select-none overflow-hidden rounded-card bg-ink/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-surface"
+      [class.cursor-grab]="loaded() && !dragging()"
+      [class.cursor-grabbing]="dragging()"
+      [style.aspect-ratio]="aspectRatio()"
+      role="application"
+      [attr.aria-roledescription]="roleDescription()"
+      [attr.aria-label]="label()"
+      [attr.aria-describedby]="helpId"
+      tabindex="0"
+      (pointerdown)="onPointerDown($event)"
+      (pointermove)="onPointerMove($event)"
+      (pointerup)="onPointerUp($event)"
+      (pointercancel)="onPointerUp($event)"
+      (wheel)="onWheel($event)"
+      (keydown)="onKeydown($event)"
+    >
+      @if (objectUrl()) {
+        <img
+          [src]="objectUrl()"
+          [attr.crossorigin]="crossOrigin()"
+          alt=""
+          draggable="false"
+          class="pointer-events-none absolute left-0 top-0 max-w-none origin-top-left"
+          [class.invisible]="!loaded()"
+          [style.width.px]="displayW()"
+          [style.height.px]="displayH()"
+          [style.transform]="'translate3d(' + tx() + 'px,' + ty() + 'px,0)'"
+          (load)="onLoad($event)"
+          (error)="onError()"
+        />
+      }
+      @if (shape() === 'round') {
+        <div
+          class="pointer-events-none absolute inset-0 rounded-full shadow-[0_0_0_9999px_rgba(0,0,0,0.45)]"
+          aria-hidden="true"
+        ></div>
+      }
+      <!-- Rule-of-thirds guides. -->
+      <div class="pointer-events-none absolute inset-0" aria-hidden="true">
+        <div class="absolute inset-y-0 left-1/3 w-px bg-white/30"></div>
+        <div class="absolute inset-y-0 left-2/3 w-px bg-white/30"></div>
+        <div class="absolute inset-x-0 top-1/3 h-px bg-white/30"></div>
+        <div class="absolute inset-x-0 top-2/3 h-px bg-white/30"></div>
+      </div>
+      @if (!loaded()) {
+        <div class="absolute inset-0 grid place-items-center text-white/70" aria-hidden="true">
+          <sds-icon name="image" [size]="32" />
+        </div>
+      }
+    </div>
+    <p [id]="helpId" class="sr-only">{{ instructions() }}</p>
+
+    <div class="mt-3 flex items-center gap-2">
+      <button
+        type="button"
+        class="grid h-9 w-9 shrink-0 place-items-center rounded-control text-ink-soft hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:opacity-40"
+        [attr.aria-label]="zoomOutLabel()"
+        [disabled]="!loaded() || zoom() <= 1"
+        (click)="zoomBy(-zoomStep())"
       >
-        @switch (value()) {
-          @case ('contains') {
-            <sds-icon name="check" [size]="size() === 'sm' ? 14 : 18" [strokeWidth]="3" />
-          }
-          @case ('may-contain') {
-            <sds-icon name="circle-help" [size]="size() === 'sm' ? 15 : 19" />
-          }
-        }
-      </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>
+        <sds-icon name="zoom-out" [size]="18" />
+      </button>
+      <input
+        type="range"
+        class="h-2 min-w-0 flex-1 cursor-pointer accent-brand-600"
+        min="1"
+        [max]="maxZoom()"
+        step="0.01"
+        [value]="zoom()"
+        [disabled]="!loaded()"
+        [attr.aria-label]="zoomLabel()"
+        [attr.aria-valuetext]="zoomText()"
+        (input)="onSlider($event)"
+      />
+      <button
+        type="button"
+        class="grid h-9 w-9 shrink-0 place-items-center rounded-control text-ink-soft hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:opacity-40"
+        [attr.aria-label]="zoomInLabel()"
+        [disabled]="!loaded() || zoom() >= maxZoom()"
+        (click)="zoomBy(zoomStep())"
+      >
+        <sds-icon name="zoom-in" [size]="18" />
+      </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: SdsTriStateChip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsImageCropper, decorators: [{
             type: Component,
             args: [{
-                    selector: 'sds-tri-state-chip',
+                    selector: 'sds-image-cropper',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [SdsIcon],
-                    host: { class: 'inline-flex min-w-0' },
+                    host: { class: 'block' },
                     template: `
-    <button
-      type="button"
-      [id]="chipId"
-      [class]="chipClass()"
-      [disabled]="disabled()"
-      [attr.data-state]="value()"
-      [attr.aria-describedby]="hint() ? chipId + '-hint' : null"
-      (click)="onClick($event)"
+    <div
+      #viewport
+      class="relative w-full touch-none select-none overflow-hidden rounded-card bg-ink/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-surface"
+      [class.cursor-grab]="loaded() && !dragging()"
+      [class.cursor-grabbing]="dragging()"
+      [style.aspect-ratio]="aspectRatio()"
+      role="application"
+      [attr.aria-roledescription]="roleDescription()"
+      [attr.aria-label]="label()"
+      [attr.aria-describedby]="helpId"
+      tabindex="0"
+      (pointerdown)="onPointerDown($event)"
+      (pointermove)="onPointerMove($event)"
+      (pointerup)="onPointerUp($event)"
+      (pointercancel)="onPointerUp($event)"
+      (wheel)="onWheel($event)"
       (keydown)="onKeydown($event)"
     >
-      @if (icon()) {
-        <sds-icon [name]="icon()!" [size]="size() === 'sm' ? 18 : 22" class="shrink-0" />
+      @if (objectUrl()) {
+        <img
+          [src]="objectUrl()"
+          [attr.crossorigin]="crossOrigin()"
+          alt=""
+          draggable="false"
+          class="pointer-events-none absolute left-0 top-0 max-w-none origin-top-left"
+          [class.invisible]="!loaded()"
+          [style.width.px]="displayW()"
+          [style.height.px]="displayH()"
+          [style.transform]="'translate3d(' + tx() + 'px,' + ty() + 'px,0)'"
+          (load)="onLoad($event)"
+          (error)="onError()"
+        />
       }
+      @if (shape() === 'round') {
+        <div
+          class="pointer-events-none absolute inset-0 rounded-full shadow-[0_0_0_9999px_rgba(0,0,0,0.45)]"
+          aria-hidden="true"
+        ></div>
+      }
+      <!-- Rule-of-thirds guides. -->
+      <div class="pointer-events-none absolute inset-0" aria-hidden="true">
+        <div class="absolute inset-y-0 left-1/3 w-px bg-white/30"></div>
+        <div class="absolute inset-y-0 left-2/3 w-px bg-white/30"></div>
+        <div class="absolute inset-x-0 top-1/3 h-px bg-white/30"></div>
+        <div class="absolute inset-x-0 top-2/3 h-px bg-white/30"></div>
+      </div>
+      @if (!loaded()) {
+        <div class="absolute inset-0 grid place-items-center text-white/70" aria-hidden="true">
+          <sds-icon name="image" [size]="32" />
+        </div>
+      }
+    </div>
+    <p [id]="helpId" class="sr-only">{{ instructions() }}</p>
 
-      <span class="flex min-w-0 flex-1 flex-col text-left leading-tight">
-        <!-- Up to two lines, so "Cereals containing gluten" stays readable in a narrow grid cell. -->
-        <span
-          class="line-clamp-2 break-words font-semibold"
-          [class]="size() === 'sm' ? 'text-xs' : 'text-sm'"
-          >{{ label() }}</span
-        >
-        @if (showState()) {
-          <span
-            class="truncate text-[11px] font-medium"
-            [class]="captionClass()"
-            aria-hidden="true"
-            >{{ stateText() }}</span
-          >
-        }
-      </span>
-      <!-- The state is part of the accessible name ("Milk, may contain"), visible caption or not. -->
-      <span class="sr-only">, {{ stateText() }}</span>
-
-      <!-- Non-colour mark: nothing / a check / a question mark. The slot keeps its width in every
-           state so the chip never shifts when cycled. -->
-      <span
-        class="grid shrink-0 place-items-center"
-        [class]="size() === 'sm' ? 'h-4 w-4' : 'h-5 w-5'"
-        aria-hidden="true"
+    <div class="mt-3 flex items-center gap-2">
+      <button
+        type="button"
+        class="grid h-9 w-9 shrink-0 place-items-center rounded-control text-ink-soft hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:opacity-40"
+        [attr.aria-label]="zoomOutLabel()"
+        [disabled]="!loaded() || zoom() <= 1"
+        (click)="zoomBy(-zoomStep())"
       >
-        @switch (value()) {
-          @case ('contains') {
-            <sds-icon name="check" [size]="size() === 'sm' ? 14 : 18" [strokeWidth]="3" />
-          }
-          @case ('may-contain') {
-            <sds-icon name="circle-help" [size]="size() === 'sm' ? 15 : 19" />
-          }
-        }
-      </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>
+        <sds-icon name="zoom-out" [size]="18" />
+      </button>
+      <input
+        type="range"
+        class="h-2 min-w-0 flex-1 cursor-pointer accent-brand-600"
+        min="1"
+        [max]="maxZoom()"
+        step="0.01"
+        [value]="zoom()"
+        [disabled]="!loaded()"
+        [attr.aria-label]="zoomLabel()"
+        [attr.aria-valuetext]="zoomText()"
+        (input)="onSlider($event)"
+      />
+      <button
+        type="button"
+        class="grid h-9 w-9 shrink-0 place-items-center rounded-control text-ink-soft hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:opacity-40"
+        [attr.aria-label]="zoomInLabel()"
+        [disabled]="!loaded() || zoom() >= maxZoom()"
+        (click)="zoomBy(zoomStep())"
+      >
+        <sds-icon name="zoom-in" [size]="18" />
+      </button>
+    </div>
   `,
                 }]
-        }], 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 }] }] } });
+        }], ctorParameters: () => [], propDecorators: { viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], zoomStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomStep", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], crossOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "crossOrigin", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], roleDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "roleDescription", required: false }] }], instructions: [{ type: i0.Input, args: [{ isSignal: true, alias: "instructions", required: false }] }], zoomLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomLabel", required: false }] }], zoomInLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomInLabel", required: false }] }], zoomOutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomOutLabel", required: false }] }], cropChange: [{ type: i0.Output, args: ["cropChange"] }], imageLoad: [{ type: i0.Output, args: ["imageLoad"] }], imageError: [{ type: i0.Output, args: ["imageError"] }] } });
 
 /** Small, dependency-free date helpers (day-granularity, local time). */
 function startOfDay(d) {
@@ -8242,6 +11051,16 @@ let nextId$1 = 0;
  *   every filtered row regardless of pagination (this is an intentional
  *   deviation from PrimeNG's per-page select-all).
  *
+ * **Editable grid (opt-in).** Set `editable` and give columns an `editor` (`text` · `number` ·
+ * `currency` · `select`). The table becomes an ARIA grid with one tab stop: arrow keys move between
+ * cells (Home/End, Ctrl+Home/End), Enter or F2 edits (typing a character starts editing with it),
+ * Enter commits and moves down (Shift+Enter up), Tab / Shift+Tab commit and move to the next/previous
+ * editable cell, Escape cancels (and is stopped, so an enclosing drawer stays open), clicking elsewhere
+ * commits. Each changed commit emits `(cellCommit)` — the host applies it to its data (the table never
+ * mutates rows) — and marks the cell dirty until {@link clearDirty}. Errors from `[cellErrors]` show
+ * under the cell with `aria-invalid`. Number/currency cells use sds-input-number (live, locale-aware
+ * formatting: "11,9" → "€11.90"). Everything else — sort, paging, selection — is unchanged.
+ *
  * @example
  * <sds-table [value]="staff" [columns]="cols" dataKey="id"
  *           sortable paginator [rows]="10" globalFilter
@@ -8250,6 +11069,11 @@ let nextId$1 = 0;
  *     <sds-badge [variant]="row.actif ? 'success' : 'neutral'">{{ value }}</sds-badge>
  *   </ng-template>
  * </sds-table>
+ *
+ * @example
+ * <sds-table [value]="drafts()" [columns]="[{ field: 'name', header: 'Name', editor: 'text' },
+ *            { field: 'price', header: 'Price', editor: 'currency', align: 'right' }]"
+ *           dataKey="id" editable [cellErrors]="errors()" (cellCommit)="apply($event)" />
  */
 class SdsTable {
     tableId = `sds-table-${nextId$1++}`;
@@ -8308,6 +11132,16 @@ class SdsTable {
     resizableColumns = input(false, ...(ngDevMode ? [{ debugName: "resizableColumns", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Drag a column header to reorder columns. */
     reorderableColumns = input(false, ...(ngDevMode ? [{ debugName: "reorderableColumns", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Turn on the editable grid (columns opt in with `editor`). Off: the table is unchanged. */
+    editable = input(false, ...(ngDevMode ? [{ debugName: "editable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Whether a single click (default) or a double click starts editing an editable cell. */
+    editOn = input('click', ...(ngDevMode ? [{ debugName: "editOn" }] : []));
+    /** Per-cell error messages, keyed by row key then field (see {@link SdsTableCellErrors}). */
+    cellErrors = input({}, ...(ngDevMode ? [{ debugName: "cellErrors" }] : []));
+    /** Default locale for number/currency cells (a column's `locale` wins). Empty = the browser's. */
+    locale = input('', ...(ngDevMode ? [{ debugName: "locale" }] : []));
+    /** Spoken marker of an edited (dirty) cell. */
+    dirtyLabel = input('edited', ...(ngDevMode ? [{ debugName: "dirtyLabel" }] : []));
     // --- outputs --------------------------------------------------------------
     sortChange = output();
     pageChange = output();
@@ -8321,6 +11155,8 @@ class SdsTable {
     rowCollapse = output();
     /** Emitted after a drag-reorder with the moved field and its old/new index. */
     colReorder = output();
+    /** Emitted when an edited cell is committed with a CHANGED value. Apply it to your data. */
+    cellCommit = output();
     // --- custom cell templates ------------------------------------------------
     cellTemplates = contentChildren(SdsTableCell, ...(ngDevMode ? [{ debugName: "cellTemplates" }] : []));
     templateMap = computed(() => {
@@ -8573,7 +11409,7 @@ class SdsTable {
     }
     /** Enter/Space on a (single-mode) focusable row toggles its selection. */
     onRowKeydown(event, row) {
-        if (this.selectionMode() !== 'single' || this.loading())
+        if (this.selectionMode() !== 'single' || this.loading() || this.editable())
             return;
         event.preventDefault();
         this.onRowClick(row);
@@ -8609,6 +11445,7 @@ class SdsTable {
     }
     // --- paginator ------------------------------------------------------------
     onPageChange(state) {
+        this.editing.set(null);
         this.pageChange.emit(state);
         if (this.lazy())
             this.emitLazy();
@@ -8721,6 +11558,408 @@ class SdsTable {
             return row[k];
         return index;
     }
+    // --- editable grid ----------------------------------------------------------
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    numberEditor = viewChild(SdsInputNumber, ...(ngDevMode ? [{ debugName: "numberEditor" }] : []));
+    /** The roving tab stop (row index in the displayed page, column index). */
+    activeCell = signal({ r: 0, c: 0 }, ...(ngDevMode ? [{ debugName: "activeCell" }] : []));
+    /** The cell being edited, if any. */
+    editing = signal(null, ...(ngDevMode ? [{ debugName: "editing" }] : []));
+    /** The editor's working value. */
+    draft = signal(null, ...(ngDevMode ? [{ debugName: "draft" }] : []));
+    /** Edited cells: row key → fields. */
+    dirty = signal(new Map(), ...(ngDevMode ? [{ debugName: "dirty" }] : []));
+    /** Set while the table moves focus itself, so the editor's blur doesn't commit twice. */
+    suppressBlur = false;
+    /** Active cell clamped to the current page and columns. */
+    tabStop = computed(() => {
+        const rows = this.displayRows().length;
+        const cols = this.effectiveColumns().length;
+        const { r, c } = this.activeCell();
+        return { r: Math.max(0, Math.min(r, rows - 1)), c: Math.max(0, Math.min(c, cols - 1)) };
+    }, ...(ngDevMode ? [{ debugName: "tabStop" }] : []));
+    draftText = computed(() => {
+        const d = this.draft();
+        return d == null ? '' : String(d);
+    }, ...(ngDevMode ? [{ debugName: "draftText" }] : []));
+    isTabStop(r, c) {
+        const t = this.tabStop();
+        return t.r === r && t.c === c;
+    }
+    isEditing(r, c) {
+        const e = this.editing();
+        return !!e && e.r === r && e.c === c;
+    }
+    isCellEditable(row, col) {
+        if (!this.editable() || !col.editor || this.loading())
+            return false;
+        const rule = col.editable;
+        if (rule === undefined)
+            return true;
+        return typeof rule === 'function' ? !!rule(row) : rule;
+    }
+    /** Row key used by dirty tracking, errors and commit events. */
+    rowKeyOf(row) {
+        if (this.dataKey() && row && typeof row === 'object')
+            return row[this.dataKey()];
+        const idx = this.value().indexOf(row);
+        return idx >= 0 ? idx : row;
+    }
+    cellErrorFor(row, field) {
+        const byRow = this.cellErrors()?.[String(this.rowKeyOf(row))];
+        return (byRow && byRow[field]) || null;
+    }
+    cellErrorId(r, c) {
+        return `${this.tableId}-err-${r}-${c}`;
+    }
+    isDirty(row, field) {
+        return this.dirty().get(this.rowKeyOf(row))?.has(field) ?? false;
+    }
+    /** Forget the dirty marks — all of them, or one row's (by row key). */
+    clearDirty(rowKey) {
+        if (rowKey === undefined) {
+            this.dirty.set(new Map());
+            return;
+        }
+        const next = new Map(this.dirty());
+        next.delete(rowKey);
+        this.dirty.set(next);
+    }
+    /** Display text of a cell in view mode: `format`, else the editor's formatting, else the raw value. */
+    displayCell(row, col) {
+        const v = this.getValue(row, col.field);
+        if (col.format)
+            return col.format(v, row);
+        if (v == null || v === '')
+            return '';
+        if ((col.editor === 'currency' || col.editor === 'number') && typeof v === 'number') {
+            try {
+                const opts = col.editor === 'currency'
+                    ? { style: 'currency', currency: col.currency ?? 'EUR' }
+                    : { style: 'decimal' };
+                if (col.minFractionDigits != null)
+                    opts.minimumFractionDigits = col.minFractionDigits;
+                if (col.maxFractionDigits != null)
+                    opts.maximumFractionDigits = col.maxFractionDigits;
+                return new Intl.NumberFormat(col.locale ?? (this.locale() || undefined), opts).format(v);
+            }
+            catch {
+                return String(v);
+            }
+        }
+        if (col.editor === 'select') {
+            return col.options?.find((o) => o.value === v)?.label ?? String(v);
+        }
+        return String(v);
+    }
+    gridCellClass(row, col, r, c) {
+        const align = ALIGN[col.align ?? 'left'];
+        const editing = this.isEditing(r, c);
+        // While editing, the cell trades its padding for the editor's own, so the row height barely moves.
+        const pad = editing ? 'px-1 py-1 text-sm' : SIZES[this.size()].cell;
+        const parts = [
+            pad,
+            align,
+            'relative text-ink align-middle focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-500',
+        ];
+        if (!editing && this.isCellEditable(row, col))
+            parts.push('cursor-text hover:bg-muted/60');
+        if (this.cellErrorFor(row, col.field))
+            parts.push('bg-accent-red-soft/50 shadow-[inset_0_0_0_1px_var(--color-danger)]');
+        return parts.join(' ');
+    }
+    onCellFocus(r, c) {
+        const a = this.activeCell();
+        if (a.r !== r || a.c !== c)
+            this.activeCell.set({ r, c });
+    }
+    onCellClick(event, r, c) {
+        if (this.isEditing(r, c)) {
+            event.stopPropagation();
+            return;
+        }
+        this.activeCell.set({ r, c });
+        const row = this.displayRows()[r];
+        const col = this.effectiveColumns()[c];
+        if (this.editOn() === 'click' && row && col && this.isCellEditable(row, col)) {
+            // Keep a click that edits a cell from also toggling single-row selection.
+            event.stopPropagation();
+            this.startEdit(r, c);
+        }
+    }
+    onCellDblClick(event, r, c) {
+        if (this.editOn() !== 'dblclick' || this.isEditing(r, c))
+            return;
+        const row = this.displayRows()[r];
+        const col = this.effectiveColumns()[c];
+        if (row && col && this.isCellEditable(row, col)) {
+            event.stopPropagation();
+            this.startEdit(r, c);
+        }
+    }
+    /**
+     * Start editing a cell of the displayed page (e.g. the first cell of a row you just added).
+     * `field` names the column. Returns false when the cell isn't editable.
+     */
+    editCell(rowIndex, field) {
+        const c = this.effectiveColumns().findIndex((col) => col.field === field);
+        const row = this.displayRows()[rowIndex];
+        const col = this.effectiveColumns()[c];
+        if (c < 0 || !row || !this.isCellEditable(row, col))
+            return false;
+        this.activeCell.set({ r: rowIndex, c });
+        this.startEdit(rowIndex, c);
+        return true;
+    }
+    startEdit(r, c, initialChar) {
+        const row = this.displayRows()[r];
+        const col = this.effectiveColumns()[c];
+        if (!row || !col || !this.isCellEditable(row, col))
+            return;
+        if (this.editing())
+            this.commitEdit('none', false);
+        const current = this.getValue(row, col.field);
+        const numeric = col.editor === 'number' || col.editor === 'currency';
+        this.draft.set(initialChar !== undefined && !numeric ? initialChar : initialChar !== undefined ? null : current);
+        this.activeCell.set({ r, c });
+        this.editing.set({ r, c });
+        afterNextRender(() => this.focusEditor(col, initialChar), { injector: this.injector });
+    }
+    focusEditor(col, initialChar) {
+        const e = this.editing();
+        if (!e)
+            return;
+        const td = this.cellEl(e.r, e.c);
+        if (!td)
+            return;
+        if (col.editor === 'number' || col.editor === 'currency') {
+            const cmp = this.numberEditor();
+            if (!cmp)
+                return;
+            const d = this.draft();
+            cmp.writeValue(typeof d === 'number' ? d : null);
+            cmp.registerOnChange((v) => this.draft.set(v));
+            cmp.focus({ select: initialChar === undefined });
+            if (initialChar !== undefined) {
+                const field = td.querySelector('input');
+                if (field) {
+                    field.value = initialChar;
+                    field.dispatchEvent(new Event('input', { bubbles: true }));
+                }
+            }
+            return;
+        }
+        const el = td.querySelector('[data-sds-cell-editor]');
+        el?.focus();
+        if (el instanceof HTMLInputElement) {
+            if (initialChar === undefined)
+                el.select();
+            else
+                el.setSelectionRange(el.value.length, el.value.length);
+        }
+    }
+    onTextEditorInput(event) {
+        this.draft.set(event.target.value);
+    }
+    onSelectEditorChange(event, col) {
+        const idx = Number(event.target.value);
+        const opt = col.options?.[idx];
+        this.draft.set(opt ? opt.value : null);
+    }
+    /** Focus left the editor (a click elsewhere): commit, but don't pull focus back. */
+    onEditorBlur() {
+        if (this.suppressBlur || !this.editing())
+            return;
+        // A focus move INSIDE the editor (sds-input-number's own buttons) is not a blur of the cell.
+        setTimeout(() => {
+            const e = this.editing();
+            if (!e || this.suppressBlur)
+                return;
+            const td = this.cellEl(e.r, e.c);
+            if (td && td.contains(document.activeElement) && document.activeElement !== td)
+                return;
+            this.commitEdit('none', false);
+        });
+    }
+    /**
+     * Commit the edit. `move` picks the next active cell; `refocus` puts focus back on the grid (not when
+     * the user clicked away).
+     */
+    commitEdit(move, refocus = true) {
+        const e = this.editing();
+        if (!e)
+            return;
+        // Move focus to the cell first: the number editor clamps/tidies its value on blur.
+        this.suppressBlur = true;
+        if (refocus)
+            this.cellEl(e.r, e.c)?.focus();
+        this.suppressBlur = false;
+        const row = this.displayRows()[e.r];
+        const col = this.effectiveColumns()[e.c];
+        this.editing.set(null);
+        if (row && col) {
+            let value = this.draft();
+            if (col.editor === 'text' || col.editor === undefined)
+                value = value == null ? '' : String(value);
+            const previousValue = this.getValue(row, col.field);
+            const same = value === previousValue ||
+                ((value === '' || value == null) && (previousValue === '' || previousValue == null));
+            if (!same) {
+                const key = this.rowKeyOf(row);
+                const next = new Map(this.dirty());
+                next.set(key, new Set([...(next.get(key) ?? []), col.field]));
+                this.dirty.set(next);
+                this.cellCommit.emit({
+                    row,
+                    field: col.field,
+                    value,
+                    previousValue,
+                    rowKey: key,
+                    rowIndex: this.value().indexOf(row),
+                });
+            }
+        }
+        let target = { r: e.r, c: e.c };
+        if (move === 'down')
+            target = { r: Math.min(e.r + 1, this.displayRows().length - 1), c: e.c };
+        else if (move === 'up')
+            target = { r: Math.max(0, e.r - 1), c: e.c };
+        else if (move === 'next' || move === 'prev')
+            target = this.nextEditable(e.r, e.c, move === 'next' ? 1 : -1) ?? target;
+        this.activeCell.set(target);
+        if (refocus) {
+            if (move === 'next' || move === 'prev') {
+                // Tab keeps the spreadsheet rhythm: land in the next editable cell already editing.
+                if (target.r !== e.r || target.c !== e.c)
+                    this.startEdit(target.r, target.c);
+                else
+                    this.focusCellSoon(target.r, target.c);
+            }
+            else {
+                this.focusCellSoon(target.r, target.c);
+            }
+        }
+    }
+    cancelEdit() {
+        const e = this.editing();
+        if (!e)
+            return;
+        this.suppressBlur = true;
+        this.cellEl(e.r, e.c)?.focus();
+        this.suppressBlur = false;
+        this.editing.set(null);
+        this.focusCellSoon(e.r, e.c);
+    }
+    /** The next editable cell in reading order (wrapping rows), or null at the grid's edge. */
+    nextEditable(r, c, dir) {
+        const rows = this.displayRows();
+        const cols = this.effectiveColumns();
+        let rr = r;
+        let cc = c;
+        for (let n = 0; n < rows.length * cols.length; n++) {
+            cc += dir;
+            if (cc >= cols.length) {
+                cc = 0;
+                rr++;
+            }
+            else if (cc < 0) {
+                cc = cols.length - 1;
+                rr--;
+            }
+            if (rr < 0 || rr >= rows.length)
+                return null;
+            if (this.isCellEditable(rows[rr], cols[cc]))
+                return { r: rr, c: cc };
+        }
+        return null;
+    }
+    cellEl(r, c) {
+        return this.host.nativeElement.querySelector(`td[data-cell="${r}:${c}"]`);
+    }
+    focusCellSoon(r, c) {
+        afterNextRender(() => this.cellEl(r, c)?.focus(), { injector: this.injector });
+    }
+    onGridKeydown(event) {
+        if (!this.editable() || this.loading())
+            return;
+        const target = event.target;
+        const e = this.editing();
+        // --- editing: Enter / Tab / Escape drive the edit; everything else belongs to the editor.
+        if (e && this.cellEl(e.r, e.c)?.contains(target) && target.tagName !== 'TD') {
+            switch (event.key) {
+                case 'Enter':
+                    event.preventDefault();
+                    this.commitEdit(event.shiftKey ? 'up' : 'down');
+                    return;
+                case 'Tab': {
+                    const next = this.nextEditable(e.r, e.c, event.shiftKey ? -1 : 1);
+                    if (!next) {
+                        // Last editable cell: commit and let Tab leave the grid naturally.
+                        this.commitEdit('none', false);
+                        return;
+                    }
+                    event.preventDefault();
+                    this.commitEdit(event.shiftKey ? 'prev' : 'next');
+                    return;
+                }
+                case 'Escape':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.cancelEdit();
+                    return;
+            }
+            return;
+        }
+        // --- navigation: only when a grid cell itself has focus.
+        const td = target.closest('td[data-cell]');
+        if (!td || td !== target)
+            return;
+        const [r, c] = (td.dataset['cell'] ?? '0:0').split(':').map(Number);
+        const rows = this.displayRows().length;
+        const cols = this.effectiveColumns().length;
+        let next = null;
+        switch (event.key) {
+            case 'ArrowUp':
+                next = { r: Math.max(0, r - 1), c };
+                break;
+            case 'ArrowDown':
+                next = { r: Math.min(rows - 1, r + 1), c };
+                break;
+            case 'ArrowLeft':
+                next = { r, c: Math.max(0, c - 1) };
+                break;
+            case 'ArrowRight':
+                next = { r, c: Math.min(cols - 1, c + 1) };
+                break;
+            case 'Home':
+                next = event.ctrlKey || event.metaKey ? { r: 0, c: 0 } : { r, c: 0 };
+                break;
+            case 'End':
+                next = event.ctrlKey || event.metaKey ? { r: rows - 1, c: cols - 1 } : { r, c: cols - 1 };
+                break;
+            case 'Enter':
+            case 'F2':
+                event.preventDefault();
+                this.startEdit(r, c);
+                return;
+            default: {
+                const row = this.displayRows()[r];
+                const col = this.effectiveColumns()[c];
+                const printable = event.key.length === 1 && event.key !== ' ' && !event.ctrlKey && !event.metaKey && !event.altKey;
+                if (printable && row && col && col.editor !== 'select' && this.isCellEditable(row, col)) {
+                    event.preventDefault();
+                    this.startEdit(r, c, event.key);
+                }
+                return;
+            }
+        }
+        event.preventDefault();
+        if (next) {
+            this.activeCell.set(next);
+            this.cellEl(next.r, next.c)?.focus();
+        }
+    }
     // --- styling --------------------------------------------------------------
     headCellClass(col) {
         const align = ALIGN[col?.align ?? 'left'];
@@ -8753,7 +11992,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 } }, outputs: { selection: "selectionChange", sortChange: "sortChange", pageChange: "pageChange", rowSelect: "rowSelect", rowUnselect: "rowUnselect", lazyLoad: "lazyLoad", rowClick: "rowClick", rowExpand: "rowExpand", rowCollapse: "rowCollapse", colReorder: "colReorder" }, host: { classAttribute: "block" }, queries: [{ propertyName: "cellTemplates", predicate: SdsTableCell, isSignal: true }, { propertyName: "rowExpansion", first: true, predicate: SdsTableRowExpansion, 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 }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, editOn: { classPropertyName: "editOn", publicName: "editOn", isSignal: true, isRequired: false, transformFunction: null }, cellErrors: { classPropertyName: "cellErrors", publicName: "cellErrors", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, dirtyLabel: { classPropertyName: "dirtyLabel", publicName: "dirtyLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", sortChange: "sortChange", pageChange: "pageChange", rowSelect: "rowSelect", rowUnselect: "rowUnselect", lazyLoad: "lazyLoad", rowClick: "rowClick", rowExpand: "rowExpand", rowCollapse: "rowCollapse", colReorder: "colReorder", cellCommit: "cellCommit" }, host: { classAttribute: "block" }, queries: [{ propertyName: "cellTemplates", predicate: SdsTableCell, isSignal: true }, { propertyName: "rowExpansion", first: true, predicate: SdsTableRowExpansion, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "numberEditor", first: true, predicate: SdsInputNumber, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="rounded-card border border-border bg-surface overflow-hidden">
       <!-- Toolbar: caption + global filter -->
       @if (caption() || globalFilter()) {
@@ -8798,6 +12037,8 @@ class SdsTable {
       >
         <table
           class="w-full border-collapse text-left"
+          [attr.role]="editable() ? 'grid' : null"
+          (keydown)="onGridKeydown($event)"
           [attr.aria-busy]="loading() ? 'true' : null"
           [attr.aria-labelledby]="caption() ? tableId + '-caption' : null"
           [attr.aria-label]="caption() ? null : ariaLabel()"
@@ -8901,7 +12142,7 @@ class SdsTable {
             @for (row of displayRows(); track trackRow($index, row); let i = $index) {
               <tr
                 [class]="rowClass(row, i)"
-                [attr.tabindex]="selectionMode() === 'single' && !loading() ? 0 : null"
+                [attr.tabindex]="selectionMode() === 'single' && !loading() && !editable() ? 0 : null"
                 [attr.aria-selected]="selectionMode() === 'single' ? (isRowSelected(row) ? 'true' : 'false') : null"
                 (click)="onRowClick(row)"
                 (keydown.enter)="onRowKeydown($event, row)"
@@ -8967,20 +12208,128 @@ class SdsTable {
                   </td>
                 }
 
-                @for (col of effectiveColumns(); track col.field) {
-                  <td
-                    [class]="cellClass(col)"
-                    [style.width]="columnStyleWidth(col)"
-                  >
-                    @if (templateFor(col.field); as tpl) {
-                      <ng-container
-                        [ngTemplateOutlet]="tpl"
-                        [ngTemplateOutletContext]="cellContext(row, col, i)"
-                      />
-                    } @else {
-                      {{ display(row, col.field) }}
-                    }
-                  </td>
+                @for (col of effectiveColumns(); track col.field; let ci = $index) {
+                  @if (!editable()) {
+                    <td
+                      [class]="cellClass(col)"
+                      [style.width]="columnStyleWidth(col)"
+                    >
+                      @if (templateFor(col.field); as tpl) {
+                        <ng-container
+                          [ngTemplateOutlet]="tpl"
+                          [ngTemplateOutletContext]="cellContext(row, col, i)"
+                        />
+                      } @else {
+                        {{ displayCell(row, col) }}
+                      }
+                    </td>
+                  } @else {
+                    <!-- Editable grid cell: one roving tab stop, arrow-key navigation, in-place editor. -->
+                    <td
+                      role="gridcell"
+                      [class]="gridCellClass(row, col, i, ci)"
+                      [style.width]="columnStyleWidth(col)"
+                      [attr.data-cell]="i + ':' + ci"
+                      [attr.tabindex]="isTabStop(i, ci) ? 0 : -1"
+                      [attr.aria-readonly]="isCellEditable(row, col) ? null : 'true'"
+                      [attr.aria-invalid]="cellErrorFor(row, col.field) ? 'true' : null"
+                      [attr.aria-describedby]="cellErrorFor(row, col.field) ? cellErrorId(i, ci) : null"
+                      (click)="onCellClick($event, i, ci)"
+                      (dblclick)="onCellDblClick($event, i, ci)"
+                      (focus)="onCellFocus(i, ci)"
+                    >
+                      @if (isEditing(i, ci)) {
+                        @switch (col.editor) {
+                          @case ('select') {
+                            <select
+                              data-sds-cell-editor
+                              class="h-9 w-full rounded-control border border-brand-500 bg-surface px-2 text-sm text-ink outline-none ring-2 ring-brand-500/25"
+                              [attr.aria-label]="col.header"
+                              (change)="onSelectEditorChange($event, col)"
+                              (blur)="onEditorBlur()"
+                            >
+                              @if (draft() === null || draft() === undefined) {
+                                <option value="" disabled selected>{{ col.placeholder ?? '' }}</option>
+                              }
+                              @for (opt of col.options ?? []; track $index; let oi = $index) {
+                                <option [value]="oi" [selected]="opt.value === draft()">{{ opt.label }}</option>
+                              }
+                            </select>
+                          }
+                          @case ('number') {
+                            <sds-input-number
+                              data-sds-cell-editor
+                              size="sm"
+                              mode="decimal"
+                              [locale]="col.locale ?? locale()"
+                              [min]="col.min ?? null"
+                              [max]="col.max ?? null"
+                              [step]="col.step ?? 1"
+                              [minFractionDigits]="col.minFractionDigits ?? null"
+                              [maxFractionDigits]="col.maxFractionDigits ?? null"
+                              [placeholder]="col.placeholder ?? ''"
+                              [ariaLabel]="col.header"
+                              (focusout)="onEditorBlur()"
+                            />
+                          }
+                          @case ('currency') {
+                            <sds-input-number
+                              data-sds-cell-editor
+                              size="sm"
+                              mode="currency"
+                              [currency]="col.currency ?? 'EUR'"
+                              [locale]="col.locale ?? locale()"
+                              [min]="col.min ?? null"
+                              [max]="col.max ?? null"
+                              [step]="col.step ?? 1"
+                              [minFractionDigits]="col.minFractionDigits ?? null"
+                              [maxFractionDigits]="col.maxFractionDigits ?? null"
+                              [placeholder]="col.placeholder ?? ''"
+                              [ariaLabel]="col.header"
+                              (focusout)="onEditorBlur()"
+                            />
+                          }
+                          @default {
+                            <input
+                              data-sds-cell-editor
+                              type="text"
+                              class="h-9 w-full rounded-control border border-brand-500 bg-surface px-2.5 text-sm text-ink outline-none ring-2 ring-brand-500/25 placeholder:text-ink-faint"
+                              [value]="draftText()"
+                              [placeholder]="col.placeholder ?? ''"
+                              [attr.aria-label]="col.header"
+                              (input)="onTextEditorInput($event)"
+                              (blur)="onEditorBlur()"
+                            />
+                          }
+                        }
+                      } @else {
+                        @if (templateFor(col.field); as tpl) {
+                          <ng-container
+                            [ngTemplateOutlet]="tpl"
+                            [ngTemplateOutletContext]="cellContext(row, col, i)"
+                          />
+                        } @else {
+                          {{ displayCell(row, col) }}
+                        }
+                        @if (isDirty(row, col.field)) {
+                          <span
+                            class="pointer-events-none absolute right-1 top-1 h-1.5 w-1.5 rounded-full bg-brand-500"
+                            aria-hidden="true"
+                          ></span>
+                          <span class="sr-only">({{ dirtyLabel() }})</span>
+                        }
+                      }
+                      @if (cellErrorFor(row, col.field); as message) {
+                        <span
+                          [id]="cellErrorId(i, ci)"
+                          class="mt-1 flex items-start gap-1 text-xs font-medium normal-case text-danger"
+                        >
+                          <sds-icon name="alert-circle" [size]="13" class="mt-px shrink-0" />
+                          <span>{{ message }}</span>
+                        </span>
+                      }
+                    </td>
+                  }
                 }
               </tr>
 
@@ -9047,14 +12396,14 @@ class SdsTable {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "component", type: SdsPaginator, selector: "sds-paginator", inputs: ["totalRecords", "first", "rows", "rowsPerPageOptions", "pageLinkSize", "showFirstLastIcon", "showPageLinks", "showCurrentPageReport", "currentPageReportTemplate", "showJumpToPageInput", "rowsPerPageLabel", "jumpToPageLabel", "paginationLabel", "firstPageLabel", "previousPageLabel", "nextPageLabel", "lastPageLabel", "pageLinkLabel", "jumpToPageAriaLabel", "size", "disabled"], outputs: ["firstChange", "rowsChange", "pageChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "component", type: SdsPaginator, selector: "sds-paginator", inputs: ["totalRecords", "first", "rows", "rowsPerPageOptions", "pageLinkSize", "showFirstLastIcon", "showPageLinks", "showCurrentPageReport", "currentPageReportTemplate", "showJumpToPageInput", "rowsPerPageLabel", "jumpToPageLabel", "paginationLabel", "firstPageLabel", "previousPageLabel", "nextPageLabel", "lastPageLabel", "pageLinkLabel", "jumpToPageAriaLabel", "size", "disabled"], outputs: ["firstChange", "rowsChange", "pageChange"] }, { kind: "component", type: SdsInputNumber, selector: "sds-input-number", inputs: ["label", "ariaLabel", "placeholder", "hint", "error", "size", "appearance", "disabled", "readonly", "mode", "locale", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "min", "max", "step", "showButtons", "buttonLayout", "incrementIcon", "decrementIcon", "allowEmpty", "clearable", "clearLabel", "incrementLabel", "decrementLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTable, decorators: [{
             type: Component,
             args: [{
                     selector: 'sds-table',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SdsIcon, SdsPaginator, NgTemplateOutlet],
+                    imports: [SdsIcon, SdsPaginator, SdsInputNumber, NgTemplateOutlet],
                     host: { class: 'block' },
                     template: `
     <div class="rounded-card border border-border bg-surface overflow-hidden">
@@ -9101,6 +12450,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       >
         <table
           class="w-full border-collapse text-left"
+          [attr.role]="editable() ? 'grid' : null"
+          (keydown)="onGridKeydown($event)"
           [attr.aria-busy]="loading() ? 'true' : null"
           [attr.aria-labelledby]="caption() ? tableId + '-caption' : null"
           [attr.aria-label]="caption() ? null : ariaLabel()"
@@ -9204,7 +12555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             @for (row of displayRows(); track trackRow($index, row); let i = $index) {
               <tr
                 [class]="rowClass(row, i)"
-                [attr.tabindex]="selectionMode() === 'single' && !loading() ? 0 : null"
+                [attr.tabindex]="selectionMode() === 'single' && !loading() && !editable() ? 0 : null"
                 [attr.aria-selected]="selectionMode() === 'single' ? (isRowSelected(row) ? 'true' : 'false') : null"
                 (click)="onRowClick(row)"
                 (keydown.enter)="onRowKeydown($event, row)"
@@ -9270,20 +12621,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                   </td>
                 }
 
-                @for (col of effectiveColumns(); track col.field) {
-                  <td
-                    [class]="cellClass(col)"
-                    [style.width]="columnStyleWidth(col)"
-                  >
-                    @if (templateFor(col.field); as tpl) {
-                      <ng-container
-                        [ngTemplateOutlet]="tpl"
-                        [ngTemplateOutletContext]="cellContext(row, col, i)"
-                      />
-                    } @else {
-                      {{ display(row, col.field) }}
-                    }
-                  </td>
+                @for (col of effectiveColumns(); track col.field; let ci = $index) {
+                  @if (!editable()) {
+                    <td
+                      [class]="cellClass(col)"
+                      [style.width]="columnStyleWidth(col)"
+                    >
+                      @if (templateFor(col.field); as tpl) {
+                        <ng-container
+                          [ngTemplateOutlet]="tpl"
+                          [ngTemplateOutletContext]="cellContext(row, col, i)"
+                        />
+                      } @else {
+                        {{ displayCell(row, col) }}
+                      }
+                    </td>
+                  } @else {
+                    <!-- Editable grid cell: one roving tab stop, arrow-key navigation, in-place editor. -->
+                    <td
+                      role="gridcell"
+                      [class]="gridCellClass(row, col, i, ci)"
+                      [style.width]="columnStyleWidth(col)"
+                      [attr.data-cell]="i + ':' + ci"
+                      [attr.tabindex]="isTabStop(i, ci) ? 0 : -1"
+                      [attr.aria-readonly]="isCellEditable(row, col) ? null : 'true'"
+                      [attr.aria-invalid]="cellErrorFor(row, col.field) ? 'true' : null"
+                      [attr.aria-describedby]="cellErrorFor(row, col.field) ? cellErrorId(i, ci) : null"
+                      (click)="onCellClick($event, i, ci)"
+                      (dblclick)="onCellDblClick($event, i, ci)"
+                      (focus)="onCellFocus(i, ci)"
+                    >
+                      @if (isEditing(i, ci)) {
+                        @switch (col.editor) {
+                          @case ('select') {
+                            <select
+                              data-sds-cell-editor
+                              class="h-9 w-full rounded-control border border-brand-500 bg-surface px-2 text-sm text-ink outline-none ring-2 ring-brand-500/25"
+                              [attr.aria-label]="col.header"
+                              (change)="onSelectEditorChange($event, col)"
+                              (blur)="onEditorBlur()"
+                            >
+                              @if (draft() === null || draft() === undefined) {
+                                <option value="" disabled selected>{{ col.placeholder ?? '' }}</option>
+                              }
+                              @for (opt of col.options ?? []; track $index; let oi = $index) {
+                                <option [value]="oi" [selected]="opt.value === draft()">{{ opt.label }}</option>
+                              }
+                            </select>
+                          }
+                          @case ('number') {
+                            <sds-input-number
+                              data-sds-cell-editor
+                              size="sm"
+                              mode="decimal"
+                              [locale]="col.locale ?? locale()"
+                              [min]="col.min ?? null"
+                              [max]="col.max ?? null"
+                              [step]="col.step ?? 1"
+                              [minFractionDigits]="col.minFractionDigits ?? null"
+                              [maxFractionDigits]="col.maxFractionDigits ?? null"
+                              [placeholder]="col.placeholder ?? ''"
+                              [ariaLabel]="col.header"
+                              (focusout)="onEditorBlur()"
+                            />
+                          }
+                          @case ('currency') {
+                            <sds-input-number
+                              data-sds-cell-editor
+                              size="sm"
+                              mode="currency"
+                              [currency]="col.currency ?? 'EUR'"
+                              [locale]="col.locale ?? locale()"
+                              [min]="col.min ?? null"
+                              [max]="col.max ?? null"
+                              [step]="col.step ?? 1"
+                              [minFractionDigits]="col.minFractionDigits ?? null"
+                              [maxFractionDigits]="col.maxFractionDigits ?? null"
+                              [placeholder]="col.placeholder ?? ''"
+                              [ariaLabel]="col.header"
+                              (focusout)="onEditorBlur()"
+                            />
+                          }
+                          @default {
+                            <input
+                              data-sds-cell-editor
+                              type="text"
+                              class="h-9 w-full rounded-control border border-brand-500 bg-surface px-2.5 text-sm text-ink outline-none ring-2 ring-brand-500/25 placeholder:text-ink-faint"
+                              [value]="draftText()"
+                              [placeholder]="col.placeholder ?? ''"
+                              [attr.aria-label]="col.header"
+                              (input)="onTextEditorInput($event)"
+                              (blur)="onEditorBlur()"
+                            />
+                          }
+                        }
+                      } @else {
+                        @if (templateFor(col.field); as tpl) {
+                          <ng-container
+                            [ngTemplateOutlet]="tpl"
+                            [ngTemplateOutletContext]="cellContext(row, col, i)"
+                          />
+                        } @else {
+                          {{ displayCell(row, col) }}
+                        }
+                        @if (isDirty(row, col.field)) {
+                          <span
+                            class="pointer-events-none absolute right-1 top-1 h-1.5 w-1.5 rounded-full bg-brand-500"
+                            aria-hidden="true"
+                          ></span>
+                          <span class="sr-only">({{ dirtyLabel() }})</span>
+                        }
+                      }
+                      @if (cellErrorFor(row, col.field); as message) {
+                        <span
+                          [id]="cellErrorId(i, ci)"
+                          class="mt-1 flex items-start gap-1 text-xs font-medium normal-case text-danger"
+                        >
+                          <sds-icon name="alert-circle" [size]="13" class="mt-px shrink-0" />
+                          <span>{{ message }}</span>
+                        </span>
+                      }
+                    </td>
+                  }
                 }
               </tr>
 
@@ -9352,7 +12811,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 }] }], 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"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsTableCell), { isSignal: true }] }], rowExpansion: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsTableRowExpansion), { 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 }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], resizableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizableColumns", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], editOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "editOn", required: false }] }], cellErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellErrors", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], dirtyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirtyLabel", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], rowSelect: [{ type: i0.Output, args: ["rowSelect"] }], rowUnselect: [{ type: i0.Output, args: ["rowUnselect"] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowExpand: [{ type: i0.Output, args: ["rowExpand"] }], rowCollapse: [{ type: i0.Output, args: ["rowCollapse"] }], colReorder: [{ type: i0.Output, args: ["colReorder"] }], cellCommit: [{ type: i0.Output, args: ["cellCommit"] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdsTableCell), { isSignal: true }] }], rowExpansion: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsTableRowExpansion), { isSignal: true }] }], numberEditor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsInputNumber), { isSignal: true }] }] } });
 
 /**
  * A tiny transient-notification bus. Application code calls {@link success} / {@link error} / {@link info}
@@ -10579,6 +14038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  *
  * @example
  * <sds-nav-item icon="home" label="Accueil" link="/" [exact]="true" />
+ * <sds-nav-item icon="book-open" label="Menu" link="/menu" [badge]="3" badgeLabel="{count} issues" badgeTone="danger" />
  */
 class SdsNavItem {
     store = inject(SidebarStore);
@@ -10589,8 +14049,52 @@ class SdsNavItem {
     exact = input(false, ...(ngDevMode ? [{ debugName: "exact", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Manual active state (combined with routerLinkActive when a link is set). */
     active = input(false, ...(ngDevMode ? [{ debugName: "active", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Optional count shown as a pill after the label (e.g. menu issues to fix). Hidden when null or 0.
+     * On the collapsed rail it sits on the icon's corner.
+     */
+    badge = input(null, ...(ngDevMode ? [{ debugName: "badge" }] : []));
+    /** Spoken text for the badge; `{count}` is replaced. Pass a translated string. */
+    badgeLabel = input('{count} pending', ...(ngDevMode ? [{ debugName: "badgeLabel" }] : []));
+    /** Counts above this read as "max+" (e.g. 99+). */
+    badgeMax = input(99, ...(ngDevMode ? [{ debugName: "badgeMax" }] : []));
+    /** Badge colour. `danger` for things that block, `brand` (default) for a neutral count. */
+    badgeTone = input('brand', ...(ngDevMode ? [{ debugName: "badgeTone" }] : []));
     select = output();
     collapsed = this.store.collapsed;
+    /** The badge's spoken text, or null when there is nothing to show. */
+    badgeText = computed(() => {
+        const n = this.badge();
+        if (n === null || n === undefined || !Number.isFinite(n) || n <= 0)
+            return null;
+        return this.badgeLabel().replace('{count}', String(n));
+    }, ...(ngDevMode ? [{ debugName: "badgeText" }] : []));
+    badgeDisplay = computed(() => {
+        const n = this.badge() ?? 0;
+        return n > this.badgeMax() ? `${this.badgeMax()}+` : String(n);
+    }, ...(ngDevMode ? [{ debugName: "badgeDisplay" }] : []));
+    /** Accessible name on the collapsed rail, where the visible label is hidden. */
+    collapsedName = computed(() => {
+        const text = this.badgeText();
+        return text ? `${this.label()}, ${text}` : this.label();
+    }, ...(ngDevMode ? [{ debugName: "collapsedName" }] : []));
+    badgeClass = computed(() => {
+        const tone = this.badgeTone() === 'danger'
+            ? 'bg-danger text-white'
+            : this.badgeTone() === 'neutral'
+                ? 'bg-muted text-ink-soft border border-border'
+                : this.store.appearance() === 'surface'
+                    ? 'bg-brand-600 text-white dark:bg-ink dark:text-surface'
+                    : 'bg-white text-brand-800';
+        const base = 'ml-auto inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 ' +
+            'text-[11px] font-bold tabular-nums leading-none';
+        // Collapsed desktop rail: a small pill pinned to the top-right of the centred icon.
+        const collapsed = this.collapsed()
+            ? ' lg:absolute lg:right-1.5 lg:top-0.5 lg:ml-0 lg:h-4 lg:min-w-4 lg:px-1 lg:text-[10px]' +
+                (this.store.appearance() === 'surface' ? ' lg:ring-2 lg:ring-surface' : '')
+            : '';
+        return `${base} ${tone}${collapsed}`;
+    }, ...(ngDevMode ? [{ debugName: "badgeClass" }] : []));
     itemClass(isActive) {
         // A `surface` rail is light: an active item is a brand-tinted pill with a left accent bar, brand
         // text and a soft shadow (matching the certicheck reference); inactive is muted ink that lifts on
@@ -10618,7 +14122,7 @@ class SdsNavItem {
     accentBarClass = computed(() => 'pointer-events-none absolute left-1 top-1/2 h-5 w-1 -translate-y-1/2 rounded-full ' +
         (this.store.appearance() === 'surface' ? 'bg-brand-500' : 'bg-white'), ...(ngDevMode ? [{ debugName: "accentBarClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsNavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsNavItem, isStandalone: true, selector: "sds-nav-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, exact: { classPropertyName: "exact", publicName: "exact", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsNavItem, isStandalone: true, selector: "sds-nav-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, exact: { classPropertyName: "exact", publicName: "exact", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null }, badgeMax: { classPropertyName: "badgeMax", publicName: "badgeMax", isSignal: true, isRequired: false, transformFunction: null }, badgeTone: { classPropertyName: "badgeTone", publicName: "badgeTone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { classAttribute: "block" }, ngImport: i0, template: `
     @if (link() !== null) {
       <a
         [routerLink]="link()"
@@ -10626,8 +14130,8 @@ class SdsNavItem {
         #rla="routerLinkActive"
         [routerLinkActiveOptions]="{ exact: exact() }"
         [class]="itemClass(rla.isActive || active())"
-        [attr.title]="collapsed() ? label() : null"
-        [attr.aria-label]="collapsed() ? label() : null"
+        [attr.title]="collapsed() ? collapsedName() : null"
+        [attr.aria-label]="collapsed() ? collapsedName() : null"
         [attr.aria-current]="rla.isActive || active() ? 'page' : null"
         (click)="store.closeMobile()"
       >
@@ -10640,8 +14144,8 @@ class SdsNavItem {
       <button
         type="button"
         [class]="itemClass(active())"
-        [attr.title]="collapsed() ? label() : null"
-        [attr.aria-label]="collapsed() ? label() : null"
+        [attr.title]="collapsed() ? collapsedName() : null"
+        [attr.aria-label]="collapsed() ? collapsedName() : null"
         [attr.aria-current]="active() ? 'page' : null"
         (click)="select.emit(); store.closeMobile()"
       >
@@ -10658,6 +14162,12 @@ class SdsNavItem {
       }
       <!-- Label is hidden only on the collapsed desktop rail; always shown in the mobile drawer. -->
       <span class="truncate" [class]="collapsed() ? 'lg:hidden' : ''">{{ label() }}</span>
+      @if (badgeText(); as text) {
+        <!-- The number is drawn; the words are what is spoken ("Menu, 3 pending"). On the collapsed
+             desktop rail it becomes a small corner pill on the icon. -->
+        <span [class]="badgeClass()" aria-hidden="true">{{ badgeDisplay() }}</span>
+        <span class="sr-only">, {{ text }}</span>
+      }
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -10676,8 +14186,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         #rla="routerLinkActive"
         [routerLinkActiveOptions]="{ exact: exact() }"
         [class]="itemClass(rla.isActive || active())"
-        [attr.title]="collapsed() ? label() : null"
-        [attr.aria-label]="collapsed() ? label() : null"
+        [attr.title]="collapsed() ? collapsedName() : null"
+        [attr.aria-label]="collapsed() ? collapsedName() : null"
         [attr.aria-current]="rla.isActive || active() ? 'page' : null"
         (click)="store.closeMobile()"
       >
@@ -10690,8 +14200,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       <button
         type="button"
         [class]="itemClass(active())"
-        [attr.title]="collapsed() ? label() : null"
-        [attr.aria-label]="collapsed() ? label() : null"
+        [attr.title]="collapsed() ? collapsedName() : null"
+        [attr.aria-label]="collapsed() ? collapsedName() : null"
         [attr.aria-current]="active() ? 'page' : null"
         (click)="select.emit(); store.closeMobile()"
       >
@@ -10708,10 +14218,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       }
       <!-- Label is hidden only on the collapsed desktop rail; always shown in the mobile drawer. -->
       <span class="truncate" [class]="collapsed() ? 'lg:hidden' : ''">{{ label() }}</span>
+      @if (badgeText(); as text) {
+        <!-- The number is drawn; the words are what is spoken ("Menu, 3 pending"). On the collapsed
+             desktop rail it becomes a small corner pill on the icon. -->
+        <span [class]="badgeClass()" aria-hidden="true">{{ badgeDisplay() }}</span>
+        <span class="sr-only">, {{ text }}</span>
+      }
     </ng-template>
   `,
                 }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], exact: [{ type: i0.Input, args: [{ isSignal: true, alias: "exact", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], exact: [{ type: i0.Input, args: [{ isSignal: true, alias: "exact", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeLabel", required: false }] }], badgeMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeMax", required: false }] }], badgeTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeTone", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
 
 /**
  * The signed-in user's trigger and dropdown for the top bar: an avatar (with the name and email beside
@@ -11934,5 +15450,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, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenuItem, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsSearchCommand, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, 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, SdsDatePicker, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map