@besaitech/ng-design-system 0.0.78 → 0.0.79

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

@@ -438,7 +438,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$q = 0;
+let nextId$r = 0;
 const SIZES$d = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
@@ -451,7 +451,7 @@ const SIZES$d = {
  * sidebar search field).
  */
 class SdsInput {
-    autoId = `sds-input-${nextId$q++}`;
+    autoId = `sds-input-${nextId$r++}`;
     /**
      * `id` of the native `<input>` — for a `<label for>` outside the component, or to focus the field with
      * `document.getElementById(id).focus()` (after adding a row, say). Empty (default) generates one. Set it
@@ -811,7 +811,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: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", 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$p = 0;
+let nextId$q = 0;
 const HEIGHTS = {
     sm: 'h-9',
     md: 'h-10',
@@ -839,7 +839,7 @@ const TEXT = {
  * with "." ("1.234" in nl-BE) stays a thousands separator.
  */
 class SdsInputNumber {
-    inputId = `sds-input-number-${nextId$p++}`;
+    inputId = `sds-input-number-${nextId$q++}`;
     fieldRef = viewChild('field', ...(ngDevMode ? [{ debugName: "fieldRef" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -1623,7 +1623,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 }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], buttonLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLayout", required: false }] }], incrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementIcon", required: false }] }], decrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementIcon", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }] } });
 
-let nextId$o = 0;
+let nextId$p = 0;
 const SIZES$c = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
@@ -1664,7 +1664,7 @@ function parseTime(value) {
  * <sds-time-input [ariaLabel]="'Closes at'" [ngModel]="end()" (ngModelChange)="end.set($event)" clearable />
  */
 class SdsTimeInput {
-    fieldId = `sds-time-input-${nextId$o++}`;
+    fieldId = `sds-time-input-${nextId$p++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name of the field when there is no visible [label]. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -2193,7 +2193,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 }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], withSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSeconds", required: false }] }], placeholderText: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderText", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], hoursEl: [{ type: i0.ViewChild, args: ['hoursEl', { isSignal: true }] }], minutesEl: [{ type: i0.ViewChild, args: ['minutesEl', { isSignal: true }] }] } });
 
-let nextId$n = 0;
+let nextId$o = 0;
 const SIZES$b = {
     sm: 'min-h-9 text-sm',
     md: 'min-h-10 text-sm',
@@ -2216,7 +2216,7 @@ const SIZES$b = {
  * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
  */
 class SdsLocalizedInput {
-    autoId = `sds-localized-input-${nextId$n++}`;
+    autoId = `sds-localized-input-${nextId$o++}`;
     /** The native field's id; a generated one when empty (set it to pair an external `<label for>`). */
     inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : []));
     /** The native field's id: {@link inputId} or the generated one. */
@@ -2576,7 +2576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", 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 }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], requiredLanguages: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLanguages", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", 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 }] }], requiredLanguageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLanguageLabel", required: false }] }] } });
 
-let nextId$m = 0;
+let nextId$n = 0;
 const SIZES$a = {
     md: 'h-12 w-11 text-lg',
     lg: 'h-14 w-12 text-xl',
@@ -2593,7 +2593,7 @@ const SIZES$a = {
  * first box and have it land correctly.
  */
 class SdsOtpInput {
-    groupId = `sds-otp-${nextId$m++}`;
+    groupId = `sds-otp-${nextId$n++}`;
     /** How many boxes / characters the code has. */
     length = input(6, ...(ngDevMode ? [{ debugName: "length", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -2893,7 +2893,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$l = 0;
+let nextId$m = 0;
 const SIZES$9 = {
     sm: 'text-sm px-3 py-2',
     md: 'text-sm px-3.5 py-2.5',
@@ -2905,7 +2905,7 @@ const SIZES$9 = {
  * [(ngModel)].
  */
 class SdsTextarea {
-    fieldId = `sds-textarea-${nextId$l++}`;
+    fieldId = `sds-textarea-${nextId$m++}`;
     field = viewChild('field', ...(ngDevMode ? [{ debugName: "field" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -3172,7 +3172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], countLimitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLimitLabel", required: false }] }], countLabelTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLabelTemplate", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }] } });
 
-let nextId$k = 0;
+let nextId$l = 0;
 const SIZES$8 = {
     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 },
@@ -3185,7 +3185,7 @@ const SIZES$8 = {
  * states.
  */
 class SdsToggleSwitch {
-    fieldId = `sds-toggle-switch-${nextId$k++}`;
+    fieldId = `sds-toggle-switch-${nextId$l++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -3432,7 +3432,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$j = 0;
+let nextId$k = 0;
 /**
  * Boolean checkbox. Implements ControlValueAccessor — use with reactive forms
  * or `[(ngModel)]`. Renders a styled box (brand-filled with a check when on)
@@ -3447,7 +3447,7 @@ let nextId$j = 0;
  * <sds-checkbox label="Auto-merge" [(ngModel)]="autoMerge" />
  */
 class SdsCheckbox {
-    id = `sds-checkbox-${nextId$j++}`;
+    id = `sds-checkbox-${nextId$k++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -3595,7 +3595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }] } });
 
-let nextId$i = 0;
+let nextId$j = 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.
@@ -3621,7 +3621,7 @@ const groups = new Map();
  * <sds-radio name="size" value="large" label="Grand" [(ngModel)]="size" />
  */
 class SdsRadio {
-    id = `sds-radio-${nextId$i++}`;
+    id = `sds-radio-${nextId$j++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -4197,7 +4197,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$h = 0;
+let nextId$i = 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).
@@ -4217,7 +4217,7 @@ let nextId$h = 0;
  *                     containsLabel="Contains" mayContainLabel="May contain" noneLabel="Not present" />
  */
 class SdsTriStateChip {
-    chipId = `sds-tri-state-chip-${nextId$h++}`;
+    chipId = `sds-tri-state-chip-${nextId$i++}`;
     /** 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. */
@@ -4442,7 +4442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showState: [{ type: i0.Input, args: [{ isSignal: true, alias: "showState", required: false }] }], noneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noneLabel", required: false }] }], containsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "containsLabel", required: false }] }], mayContainLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mayContainLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
 
-let nextId$g = 0;
+let nextId$h = 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
@@ -4458,7 +4458,7 @@ let nextId$g = 0;
  */
 class SdsSegmented {
     host = inject(ElementRef);
-    baseId = `sds-segmented-${nextId$g++}`;
+    baseId = `sds-segmented-${nextId$h++}`;
     /** Options: `{ value, label, icon?, disabled? }` objects, or bare strings/numbers. */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     /** Selected value. Two-way: `[(value)]`. */
@@ -4736,7 +4736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `,
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheck", required: false }] }] } });
-let nextId$f = 0;
+let nextId$g = 0;
 /**
  * A set of chips: pick ONE (a filter row such as "All · Missing photo · Hidden", VAT presets, a date
  * range) or, with `multiple`, SEVERAL (categories of an item, days of the week, dietary tags). Unlike
@@ -4759,7 +4759,7 @@ let nextId$f = 0;
  */
 class SdsChipGroup {
     host = inject(ElementRef);
-    baseId = `sds-chip-group-${nextId$f++}`;
+    baseId = `sds-chip-group-${nextId$g++}`;
     /** Options: `{ value, label, icon?, count?, disabled? }` objects, or bare strings/numbers. */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     /** Picked value (single) or values (multiple). Two-way: `[(value)]`. */
@@ -5826,7 +5826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
-let nextId$e = 0;
+let nextId$f = 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
@@ -5874,7 +5874,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class SdsMenu {
     host = inject(ElementRef);
     injector = inject(Injector);
-    menuId = `sds-menu-${nextId$e++}`;
+    menuId = `sds-menu-${nextId$f++}`;
     triggerId = `${this.menuId}-trigger`;
     /** Actions and separators, in order. */
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
@@ -6537,7 +6537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     standalone: true,
                 }]
         }] });
-let nextId$d = 0;
+let nextId$e = 0;
 /** Fastest auto-scroll step, in px per animation frame (reached at the very edge). */
 const AUTO_SCROLL_MAX_STEP = 18;
 /** The nearest ancestor that scrolls vertically (below the document, which is handled as the window). */
@@ -6606,7 +6606,7 @@ function moveItem(list, from, to) {
 class SdsSortableList {
     host = inject(ElementRef);
     injector = inject(Injector);
-    instructionsId = `sds-sortable-${nextId$d++}-help`;
+    instructionsId = `sds-sortable-${nextId$e++}-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). */
@@ -7198,7 +7198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], labelField: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelField", required: false }] }], itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLabel", required: false }] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], autoScrollEdge: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScrollEdge", required: false }] }], handleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "handleLabel", required: false }] }], instructions: [{ type: i0.Input, args: [{ isSignal: true, alias: "instructions", required: false }] }], pickedUpMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickedUpMessage", required: false }] }], movedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "movedMessage", required: false }] }], droppedMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "droppedMessage", required: false }] }], cancelledMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelledMessage", required: false }] }], reorder: [{ type: i0.Output, args: ["reorder"] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSortableItem), { isSignal: true }] }], handleTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSortableHandle), { isSignal: true }] }] } });
 
-let nextId$c = 0;
+let nextId$d = 0;
 /** "1.5 MB" style size (decimal units, like file managers show them), for messages. */
 function sdsFormatBytes(bytes) {
     if (!Number.isFinite(bytes) || bytes < 0)
@@ -7255,7 +7255,7 @@ function sdsFileMatchesAccept(file, accept) {
  *                (files)="upload($event)" (rejected)="onRejected($event)" />
  */
 class SdsFileDrop {
-    zoneId = `sds-file-drop-${nextId$c++}`;
+    zoneId = `sds-file-drop-${nextId$d++}`;
     fileInput = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInput" }] : []));
     /** Accepted types, native `accept` syntax. Empty = anything. */
     accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : []));
@@ -7637,7 +7637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], 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 }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], dropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropLabel", required: false }] }], browseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "browseLabel", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", 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$b = 0;
+let nextId$c = 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.
@@ -7655,7 +7655,7 @@ let nextId$b = 0;
  * <sds-button (click)="upload(await cropper.toBlob({ width: 1600 }))">Save</sds-button>
  */
 class SdsImageCropper {
-    helpId = `sds-image-cropper-${nextId$b++}-help`;
+    helpId = `sds-image-cropper-${nextId$c++}-help`;
     viewport = viewChild('viewport', ...(ngDevMode ? [{ debugName: "viewport" }] : []));
     /** Image to crop: a URL, or a Blob/File. */
     src = input(null, ...(ngDevMode ? [{ debugName: "src" }] : []));
@@ -9041,7 +9041,7 @@ const SIZES$7 = {
 class SdsDatePicker {
     host = inject(ElementRef);
     injector = inject(Injector);
-    fieldId = `sds-date-${nextId$a++}`;
+    fieldId = `sds-date-${nextId$b++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     placeholder = input('dd/mm/yyyy', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
@@ -9559,7 +9559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `,
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], doneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], openCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openCalendarLabel", required: false }] }], closeCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeCalendarLabel", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], todayActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayActionLabel", required: false }] }], clearActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearActionLabel", required: false }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsCalendar), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
-let nextId$a = 0;
+let nextId$b = 0;
 
 /** Same first and last day (time-of-day ignored). `null` only equals `null`. */
 function isSameRange(a, b) {
@@ -10164,7 +10164,7 @@ const SIZES$6 = {
 class SdsDateRangePicker {
     host = inject(ElementRef);
     injector = inject(Injector);
-    uid = nextId$9++;
+    uid = nextId$a++;
     fieldId = `sds-date-range-${this.uid}`;
     labelId = `${this.fieldId}-label`;
     valueId = `${this.fieldId}-value`;
@@ -10680,7 +10680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `,
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], maxDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDays", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], 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 }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], presetsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetsLabel", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], endLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabel", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], presetSelect: [{ type: i0.Output, args: ["presetSelect"] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsRangeCalendar), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
-let nextId$9 = 0;
+let nextId$a = 0;
 
 /**
  * Supplies a custom template for each option row (and the selected value shown
@@ -10764,7 +10764,7 @@ const SIZES$5 = {
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
 };
-let nextId$8 = 0;
+let nextId$9 = 0;
 /**
  * Single-select dropdown. Options may be primitives or objects (configure via
  * [optionLabel]/[optionValue]/[optionDisabled]). The overlay is appended to
@@ -10798,7 +10798,7 @@ let nextId$8 = 0;
 class SdsSelect {
     host = inject(ElementRef);
     injector = inject(Injector);
-    selectId = `sds-select-${nextId$8++}`;
+    selectId = `sds-select-${nextId$9++}`;
     listId = `${this.selectId}-list`;
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
@@ -11508,7 +11508,7 @@ const SIZES$4 = {
     md: 'min-h-10 text-sm',
     lg: 'min-h-12 text-base',
 };
-let nextId$7 = 0;
+let nextId$8 = 0;
 /**
  * Multi-select dropdown (value is an array). Options may be primitives or
  * objects (configure via [optionLabel]/[optionValue]/[optionDisabled]). The
@@ -11541,7 +11541,7 @@ let nextId$7 = 0;
 class SdsMultiSelect {
     host = inject(ElementRef);
     injector = inject(Injector);
-    selectId = `sds-multiselect-${nextId$7++}`;
+    selectId = `sds-multiselect-${nextId$8++}`;
     listId = `${this.selectId}-list`;
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
@@ -12357,6 +12357,744 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], selectAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllLabel", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectOption), { isSignal: true }] }], emptyTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectEmpty), { isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectFooter), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
+let nextId$7 = 0;
+/**
+ * A select whose options come from the server as you type.
+ *
+ * <p><b>Why this is not `[filter]` on `sds-select`.</b> That filter narrows an array the host has
+ * already fetched, which is right for a few dozen services and wrong for every patient a practice
+ * has ever seen: you cannot ship the list to narrow it. Here the query goes to the provider and the
+ * panel shows what comes back.
+ *
+ * <p><b>The dropdown button loads the first page.</b> Opening with an empty query calls
+ * `search('', pageSize)`, so the control is useful before anybody types — a plain select for the
+ * common case, a search for the rest. Set {@link minChars} above 0 if the backing query is too
+ * expensive to run unprompted.
+ *
+ * <p><b>Only the latest response is applied.</b> Each search takes a sequence number and a slower
+ * earlier request is dropped when it lands — otherwise typing fast leaves the panel showing results
+ * for a query that is no longer in the box. Same guard `sds-address-autocomplete` makes.
+ *
+ * <p><b>A value you were given needs its option.</b> The component can only label what it has seen,
+ * so a form that loads with `patientId = 42` shows nothing useful until something fetches 42. Pass
+ * the objects you already hold to {@link selectedOptions} and it labels them without a round trip.
+ * This is the one thing an async select cannot do for you, and silently showing a raw id instead is
+ * how these controls usually get it wrong.
+ *
+ * <p>Takes the same template directives as `sds-select`, so a projected option row works in both:
+ * `sdsSelectOption`, `sdsSelectEmpty`, `sdsSelectFooter`.
+ *
+ * @example
+ * <sds-autocomplete
+ *   [search]="findPatients"
+ *   optionLabel="fullName"
+ *   optionValue="id"
+ *   [(ngModel)]="patientId"
+ *   [selectedOptions]="known()" />
+ */
+class SdsAutocomplete {
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    baseId = `sds-autocomplete-${nextId$7++}`;
+    inputId = `${this.baseId}-input`;
+    panelId = `${this.baseId}-panel`;
+    /** Where options come from. Required — this control has no local list to fall back on. */
+    search = input.required(...(ngDevMode ? [{ debugName: "search" }] : []));
+    /** How many to ask for. The "first X" the dropdown shows before anybody types. */
+    pageSize = input(20, ...(ngDevMode ? [{ debugName: "pageSize", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Characters before a search runs. 0 means opening the panel fetches the first page. */
+    minChars = input(0, ...(ngDevMode ? [{ debugName: "minChars", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    debounceMs = input(250, ...(ngDevMode ? [{ debugName: "debounceMs", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    display = input('chip', ...(ngDevMode ? [{ debugName: "display" }] : []));
+    optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
+    optionValue = input('', ...(ngDevMode ? [{ debugName: "optionValue" }] : []));
+    optionDisabled = input('disabled', ...(ngDevMode ? [{ debugName: "optionDisabled" }] : []));
+    /**
+     * Options for values the control was handed rather than picked — a form loading an existing
+     * record. Without them a written value has no label and the field would show an id.
+     */
+    selectedOptions = input([], ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    placeholder = input('Search…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** English defaults; an app serving more than one language passes every one of these. */
+    searchingText = input('Searching…', ...(ngDevMode ? [{ debugName: "searchingText" }] : []));
+    emptyMessage = input('No results', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    searchErrorText = input("Couldn't search right now. Try again.", ...(ngDevMode ? [{ debugName: "searchErrorText" }] : []));
+    minCharsText = input('Type at least {count} characters', ...(ngDevMode ? [{ debugName: "minCharsText" }] : []));
+    clearLabel = input('Clear selection', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    removeLabel = input('Remove {label}', ...(ngDevMode ? [{ debugName: "removeLabel" }] : []));
+    openLabel = input('Show options', ...(ngDevMode ? [{ debugName: "openLabel" }] : []));
+    selected = output();
+    opened = output();
+    closed = output();
+    triggerEl = viewChild('trigger', ...(ngDevMode ? [{ debugName: "triggerEl" }] : []));
+    fieldEl = viewChild('field', ...(ngDevMode ? [{ debugName: "fieldEl" }] : []));
+    panelRef = viewChild('panel', ...(ngDevMode ? [{ debugName: "panelRef" }] : []));
+    optionTemplate = contentChild(SdsSelectOption, ...(ngDevMode ? [{ debugName: "optionTemplate" }] : []));
+    emptyTemplate = contentChild(SdsSelectEmpty, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : []));
+    footerTemplate = contentChild(SdsSelectFooter, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : []));
+    results = signal([], ...(ngDevMode ? [{ debugName: "results" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    failed = signal(false, ...(ngDevMode ? [{ debugName: "failed" }] : []));
+    active = signal(-1, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    /** Every option this control has seen, by value — how a chip keeps its label after a new search. */
+    seen = new Map();
+    timer;
+    seq = 0;
+    destroyed = false;
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    tooShort = computed(() => this.minChars() > 0 && this.query().trim().length < this.minChars(), ...(ngDevMode ? [{ debugName: "tooShort" }] : []));
+    /** The chosen options, resolved to objects where we have them. */
+    chosen = computed(() => {
+        for (const option of this.selectedOptions()) {
+            this.seen.set(this.valueOf(option), option);
+        }
+        const current = this.value();
+        const values = this.multiple()
+            ? Array.isArray(current)
+                ? current
+                : []
+            : current === null || current === undefined
+                ? []
+                : [current];
+        return values.map((v) => this.seen.get(v) ?? v);
+    }, ...(ngDevMode ? [{ debugName: "chosen" }] : []));
+    hasValue = computed(() => this.chosen().length > 0, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    /** Closed and single: the field shows the choice. Open or multi: it shows what you typed. */
+    triggerPlaceholder = computed(() => {
+        if (this.multiple() || this.open()) {
+            return this.placeholder();
+        }
+        const [one] = this.chosen();
+        return one === undefined ? this.placeholder() : this.labelOf(one);
+    }, ...(ngDevMode ? [{ debugName: "triggerPlaceholder" }] : []));
+    closeFn = () => this.close();
+    constructor() {
+        afterNextRender(() => this.position(), { injector: this.injector });
+    }
+    // ------------------------------------------------------------------ options
+    labelOf(option) {
+        if (option === null || option === undefined)
+            return '';
+        if (typeof option !== 'object')
+            return String(option);
+        const key = this.optionLabel();
+        const raw = option[key];
+        return raw === undefined || raw === null ? '' : String(raw);
+    }
+    valueOf(option) {
+        const key = this.optionValue();
+        if (!key || option === null || typeof option !== 'object')
+            return option;
+        return option[key];
+    }
+    trackValue(option) {
+        const v = this.valueOf(option);
+        return v === undefined ? option : v;
+    }
+    isOptionDisabled(option) {
+        return (typeof option === 'object' &&
+            option !== null &&
+            !!option[this.optionDisabled()]);
+    }
+    isChosen(option) {
+        const v = this.valueOf(option);
+        const current = this.value();
+        return this.multiple() ? Array.isArray(current) && current.includes(v) : current === v;
+    }
+    optionId(index) {
+        return `${this.baseId}-option-${index}`;
+    }
+    fieldClass() {
+        const h = this.size() === 'sm' ? 'min-h-8' : this.size() === 'lg' ? 'min-h-11' : 'min-h-10';
+        return ('flex w-full flex-wrap items-center gap-1.5 rounded-control border bg-surface px-2.5 py-1 ' +
+            'focus-within:ring-2 focus-within:ring-brand-500 ' +
+            h +
+            (this.error() ? ' border-danger' : ' border-border') +
+            (this.isDisabled() ? ' cursor-not-allowed opacity-60' : ' cursor-text'));
+    }
+    optionClass(index, option) {
+        return ('flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm ' +
+            (this.isOptionDisabled(option)
+                ? 'cursor-not-allowed text-ink-faint'
+                : index === this.active()
+                    ? 'bg-muted text-ink'
+                    : 'text-ink hover:bg-muted'));
+    }
+    // ------------------------------------------------------------------ searching
+    onType(event) {
+        this.query.set(event.target.value);
+        this.open.set(true);
+        this.schedule();
+    }
+    openPanel() {
+        if (this.isDisabled() || this.open())
+            return;
+        this.open.set(true);
+        this.opened.emit();
+        this.schedule(0);
+        setTimeout(() => this.position());
+        this.addReflow();
+    }
+    toggle(event) {
+        event.stopPropagation();
+        if (this.open()) {
+            this.close();
+        }
+        else {
+            this.fieldEl()?.nativeElement.focus();
+            this.openPanel();
+        }
+    }
+    schedule(delay = this.debounceMs()) {
+        clearTimeout(this.timer);
+        if (this.tooShort()) {
+            this.results.set([]);
+            this.loading.set(false);
+            return;
+        }
+        this.timer = setTimeout(() => void this.run(), delay);
+    }
+    async run() {
+        const seq = ++this.seq;
+        const query = this.query().trim();
+        this.loading.set(true);
+        this.failed.set(false);
+        try {
+            const rows = await this.search()(query, this.pageSize());
+            if (seq !== this.seq || this.destroyed)
+                return; // a newer search already won
+            for (const row of rows)
+                this.seen.set(this.valueOf(row), row);
+            this.results.set(rows);
+            this.active.set(rows.length ? 0 : -1);
+        }
+        catch {
+            if (seq !== this.seq || this.destroyed)
+                return;
+            this.results.set([]);
+            this.failed.set(true);
+        }
+        finally {
+            if (seq === this.seq && !this.destroyed) {
+                this.loading.set(false);
+                setTimeout(() => this.position());
+            }
+        }
+    }
+    // ------------------------------------------------------------------ choosing
+    pick(option, event) {
+        event?.stopPropagation();
+        if (this.isOptionDisabled(option))
+            return;
+        const v = this.valueOf(option);
+        this.seen.set(v, option);
+        if (!this.multiple()) {
+            this.setValue(v);
+            this.selected.emit(option);
+            this.query.set('');
+            this.close();
+            return;
+        }
+        const current = Array.isArray(this.value()) ? [...this.value()] : [];
+        const at = current.indexOf(v);
+        if (at >= 0) {
+            current.splice(at, 1);
+        }
+        else {
+            current.push(v);
+            this.selected.emit(option);
+        }
+        this.setValue(current);
+    }
+    remove(option, event) {
+        event.stopPropagation();
+        const v = this.valueOf(option);
+        const current = Array.isArray(this.value()) ? [...this.value()] : [];
+        this.setValue(current.filter((x) => x !== v));
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.setValue(this.multiple() ? [] : null);
+        this.query.set('');
+    }
+    onKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.open())
+                    return this.openPanel();
+                this.active.set(Math.min(this.results().length - 1, this.active() + 1));
+                return;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.active.set(Math.max(0, this.active() - 1));
+                return;
+            case 'Enter': {
+                const option = this.results()[this.active()];
+                if (this.open() && option !== undefined) {
+                    event.preventDefault();
+                    this.pick(option);
+                }
+                return;
+            }
+            case 'Escape':
+                if (this.open()) {
+                    event.stopPropagation();
+                    this.close();
+                }
+                return;
+            case 'Backspace': {
+                // Emptying the box removes the last chip, the way every tag field does.
+                if (this.multiple() && !this.query() && this.chosen().length) {
+                    const last = this.chosen()[this.chosen().length - 1];
+                    this.setValue(this.value().filter((x) => x !== this.valueOf(last)));
+                }
+                return;
+            }
+            default:
+                return;
+        }
+    }
+    close() {
+        if (!this.open())
+            return;
+        this.open.set(false);
+        this.active.set(-1);
+        this.removeReflow();
+        this.panelRef()?.nativeElement.remove();
+        this.closed.emit(this.value());
+    }
+    onDocumentClick(event) {
+        if (!this.open())
+            return;
+        const target = event.target;
+        const panel = this.panelRef()?.nativeElement;
+        if (!this.host.nativeElement.contains(target) && !panel?.contains(target)) {
+            this.close();
+        }
+    }
+    // --- body-appended overlay positioning (mirrors sds-select) ---
+    reflow = () => this.position();
+    listening = false;
+    addReflow() {
+        if (this.listening)
+            return;
+        window.addEventListener('scroll', this.reflow, true);
+        window.addEventListener('resize', this.reflow);
+        this.listening = true;
+    }
+    removeReflow() {
+        if (!this.listening)
+            return;
+        window.removeEventListener('scroll', this.reflow, true);
+        window.removeEventListener('resize', this.reflow);
+        this.listening = false;
+    }
+    position() {
+        const trigger = this.triggerEl()?.nativeElement;
+        const panel = this.panelRef()?.nativeElement;
+        if (!trigger || !panel)
+            return;
+        if (panel.parentElement !== document.body)
+            document.body.appendChild(panel);
+        const r = trigger.getBoundingClientRect();
+        panel.style.minWidth = `${Math.round(r.width)}px`;
+        const ph = panel.offsetHeight || 240;
+        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;
+        }
+        let left = r.left;
+        const pw = panel.offsetWidth || r.width;
+        if (left + pw > window.innerWidth - margin) {
+            left = Math.max(margin, window.innerWidth - margin - pw);
+        }
+        panel.style.top = `${Math.round(top)}px`;
+        panel.style.left = `${Math.round(left)}px`;
+    }
+    ngOnDestroy() {
+        this.destroyed = true;
+        clearTimeout(this.timer);
+        this.removeReflow();
+        this.panelRef()?.nativeElement.remove();
+    }
+    setValue(v) {
+        this.value.set(v);
+        this.onChange(v);
+        this.onTouched();
+    }
+    // --- ControlValueAccessor ---
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value.set(value ?? (this.multiple() ? [] : null));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+        if (isDisabled)
+            this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsAutocomplete, isStandalone: true, selector: "sds-autocomplete", inputs: { search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, selectedOptions: { classPropertyName: "selectedOptions", publicName: "selectedOptions", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchingText: { classPropertyName: "searchingText", publicName: "searchingText", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, searchErrorText: { classPropertyName: "searchErrorText", publicName: "searchErrorText", isSignal: true, isRequired: false, transformFunction: null }, minCharsText: { classPropertyName: "minCharsText", publicName: "minCharsText", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, openLabel: { classPropertyName: "openLabel", publicName: "openLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SdsAutocomplete, multi: true }], queries: [{ propertyName: "optionTemplate", first: true, predicate: SdsSelectOption, descendants: true, isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: SdsSelectEmpty, descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: SdsSelectFooter, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label class="mb-1 block text-sm font-medium text-ink" [attr.for]="inputId">
+        {{ label() }}
+      </label>
+    }
+
+    <div #trigger [class]="fieldClass()" (click)="openPanel()">
+      @if (multiple() && display() === 'chip' && chosen().length) {
+        <span class="flex flex-wrap items-center gap-1">
+          @for (item of chosen(); track trackValue(item)) {
+            <span
+              class="inline-flex max-w-full items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs text-ink"
+            >
+              <span class="truncate">{{ labelOf(item) }}</span>
+              <button
+                type="button"
+                class="shrink-0 text-ink-faint hover:text-ink"
+                [attr.aria-label]="removeLabel().replace('{label}', labelOf(item))"
+                (click)="remove(item, $event)"
+              >
+                <sds-icon name="x" [size]="12" />
+              </button>
+            </span>
+          }
+        </span>
+      }
+
+      <input
+        #field
+        [id]="inputId"
+        type="text"
+        role="combobox"
+        autocomplete="off"
+        class="min-w-0 flex-1 bg-transparent text-sm text-ink outline-none placeholder:text-ink-faint"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="panelId"
+        [attr.aria-activedescendant]="open() && active() >= 0 ? optionId(active()) : null"
+        [attr.aria-label]="label() ? null : ariaLabel() || null"
+        [placeholder]="triggerPlaceholder()"
+        [disabled]="isDisabled()"
+        [value]="query()"
+        (input)="onType($event)"
+        (keydown)="onKeydown($event)"
+        (focus)="openPanel()"
+      />
+
+      @if (clearable() && hasValue() && !isDisabled()) {
+        <button
+          type="button"
+          class="shrink-0 rounded text-ink-faint hover:text-ink"
+          [attr.aria-label]="clearLabel()"
+          (click)="clear($event)"
+        >
+          <sds-icon name="x" [size]="14" />
+        </button>
+      }
+      <button
+        type="button"
+        class="shrink-0 rounded text-ink-faint hover:text-ink"
+        [attr.aria-label]="openLabel()"
+        [disabled]="isDisabled()"
+        (click)="toggle($event)"
+      >
+        <sds-icon [name]="open() ? 'chevron-up' : 'chevron-down'" [size]="16" />
+      </button>
+    </div>
+
+    @if (hint() && !error()) {
+      <p class="mt-1 text-xs text-ink-soft">{{ hint() }}</p>
+    }
+    @if (error()) {
+      <p class="mt-1 text-xs text-danger">{{ error() }}</p>
+    }
+
+    @if (open()) {
+      <div
+        #panel
+        [id]="panelId"
+        role="listbox"
+        [attr.aria-multiselectable]="multiple() ? 'true' : null"
+        class="fixed z-50 max-h-72 overflow-auto rounded-control border border-border bg-surface py-1 shadow-lg"
+      >
+        @if (loading()) {
+          <p class="px-3 py-2 text-sm text-ink-soft">{{ searchingText() }}</p>
+        } @else if (failed()) {
+          <p class="px-3 py-2 text-sm text-danger">{{ searchErrorText() }}</p>
+        } @else if (!results().length) {
+          @if (tooShort()) {
+            <p class="px-3 py-2 text-sm text-ink-soft">
+              {{ minCharsText().replace('{count}', '' + minChars()) }}
+            </p>
+          } @else if (emptyTemplate()) {
+            <div class="px-3 py-2 text-sm">
+              <ng-container
+                [ngTemplateOutlet]="emptyTemplate()!.template"
+                [ngTemplateOutletContext]="{ $implicit: query(), filterText: query() }"
+              />
+            </div>
+          } @else {
+            <p class="px-3 py-2 text-sm text-ink-soft">{{ emptyMessage() }}</p>
+          }
+        } @else {
+          @for (option of results(); track trackValue(option); let i = $index) {
+            <button
+              type="button"
+              role="option"
+              [id]="optionId(i)"
+              [attr.aria-selected]="isChosen(option)"
+              [disabled]="isOptionDisabled(option)"
+              [class]="optionClass(i, option)"
+              (click)="pick(option, $event)"
+              (mouseenter)="active.set(i)"
+            >
+              @if (multiple()) {
+                <span
+                  class="flex size-4 shrink-0 items-center justify-center rounded border"
+                  [class]="
+                    isChosen(option)
+                      ? 'border-brand-500 bg-brand-500 text-white'
+                      : 'border-border bg-surface'
+                  "
+                  aria-hidden="true"
+                >
+                  @if (isChosen(option)) {
+                    <sds-icon name="check" [size]="11" />
+                  }
+                </span>
+              }
+              @if (optionTemplate()) {
+                <ng-container
+                  [ngTemplateOutlet]="optionTemplate()!.template"
+                  [ngTemplateOutletContext]="{
+                    $implicit: option,
+                    option: option,
+                    label: labelOf(option),
+                    value: valueOf(option),
+                    selected: isChosen(option),
+                    disabled: isOptionDisabled(option),
+                    index: i,
+                  }"
+                />
+              } @else {
+                <span class="truncate">{{ labelOf(option) }}</span>
+              }
+            </button>
+          }
+        }
+
+        @if (footerTemplate()) {
+          <div class="sticky bottom-0 border-t border-border bg-surface">
+            <ng-container
+              [ngTemplateOutlet]="footerTemplate()!.template"
+              [ngTemplateOutletContext]="{
+                $implicit: query(),
+                filterText: query(),
+                close: closeFn,
+              }"
+            />
+          </div>
+        }
+      </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", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsAutocomplete, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-autocomplete',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet, SdsIcon],
+                    host: { class: 'block', '(document:click)': 'onDocumentClick($event)' },
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SdsAutocomplete, multi: true }],
+                    template: `
+    @if (label()) {
+      <label class="mb-1 block text-sm font-medium text-ink" [attr.for]="inputId">
+        {{ label() }}
+      </label>
+    }
+
+    <div #trigger [class]="fieldClass()" (click)="openPanel()">
+      @if (multiple() && display() === 'chip' && chosen().length) {
+        <span class="flex flex-wrap items-center gap-1">
+          @for (item of chosen(); track trackValue(item)) {
+            <span
+              class="inline-flex max-w-full items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs text-ink"
+            >
+              <span class="truncate">{{ labelOf(item) }}</span>
+              <button
+                type="button"
+                class="shrink-0 text-ink-faint hover:text-ink"
+                [attr.aria-label]="removeLabel().replace('{label}', labelOf(item))"
+                (click)="remove(item, $event)"
+              >
+                <sds-icon name="x" [size]="12" />
+              </button>
+            </span>
+          }
+        </span>
+      }
+
+      <input
+        #field
+        [id]="inputId"
+        type="text"
+        role="combobox"
+        autocomplete="off"
+        class="min-w-0 flex-1 bg-transparent text-sm text-ink outline-none placeholder:text-ink-faint"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="panelId"
+        [attr.aria-activedescendant]="open() && active() >= 0 ? optionId(active()) : null"
+        [attr.aria-label]="label() ? null : ariaLabel() || null"
+        [placeholder]="triggerPlaceholder()"
+        [disabled]="isDisabled()"
+        [value]="query()"
+        (input)="onType($event)"
+        (keydown)="onKeydown($event)"
+        (focus)="openPanel()"
+      />
+
+      @if (clearable() && hasValue() && !isDisabled()) {
+        <button
+          type="button"
+          class="shrink-0 rounded text-ink-faint hover:text-ink"
+          [attr.aria-label]="clearLabel()"
+          (click)="clear($event)"
+        >
+          <sds-icon name="x" [size]="14" />
+        </button>
+      }
+      <button
+        type="button"
+        class="shrink-0 rounded text-ink-faint hover:text-ink"
+        [attr.aria-label]="openLabel()"
+        [disabled]="isDisabled()"
+        (click)="toggle($event)"
+      >
+        <sds-icon [name]="open() ? 'chevron-up' : 'chevron-down'" [size]="16" />
+      </button>
+    </div>
+
+    @if (hint() && !error()) {
+      <p class="mt-1 text-xs text-ink-soft">{{ hint() }}</p>
+    }
+    @if (error()) {
+      <p class="mt-1 text-xs text-danger">{{ error() }}</p>
+    }
+
+    @if (open()) {
+      <div
+        #panel
+        [id]="panelId"
+        role="listbox"
+        [attr.aria-multiselectable]="multiple() ? 'true' : null"
+        class="fixed z-50 max-h-72 overflow-auto rounded-control border border-border bg-surface py-1 shadow-lg"
+      >
+        @if (loading()) {
+          <p class="px-3 py-2 text-sm text-ink-soft">{{ searchingText() }}</p>
+        } @else if (failed()) {
+          <p class="px-3 py-2 text-sm text-danger">{{ searchErrorText() }}</p>
+        } @else if (!results().length) {
+          @if (tooShort()) {
+            <p class="px-3 py-2 text-sm text-ink-soft">
+              {{ minCharsText().replace('{count}', '' + minChars()) }}
+            </p>
+          } @else if (emptyTemplate()) {
+            <div class="px-3 py-2 text-sm">
+              <ng-container
+                [ngTemplateOutlet]="emptyTemplate()!.template"
+                [ngTemplateOutletContext]="{ $implicit: query(), filterText: query() }"
+              />
+            </div>
+          } @else {
+            <p class="px-3 py-2 text-sm text-ink-soft">{{ emptyMessage() }}</p>
+          }
+        } @else {
+          @for (option of results(); track trackValue(option); let i = $index) {
+            <button
+              type="button"
+              role="option"
+              [id]="optionId(i)"
+              [attr.aria-selected]="isChosen(option)"
+              [disabled]="isOptionDisabled(option)"
+              [class]="optionClass(i, option)"
+              (click)="pick(option, $event)"
+              (mouseenter)="active.set(i)"
+            >
+              @if (multiple()) {
+                <span
+                  class="flex size-4 shrink-0 items-center justify-center rounded border"
+                  [class]="
+                    isChosen(option)
+                      ? 'border-brand-500 bg-brand-500 text-white'
+                      : 'border-border bg-surface'
+                  "
+                  aria-hidden="true"
+                >
+                  @if (isChosen(option)) {
+                    <sds-icon name="check" [size]="11" />
+                  }
+                </span>
+              }
+              @if (optionTemplate()) {
+                <ng-container
+                  [ngTemplateOutlet]="optionTemplate()!.template"
+                  [ngTemplateOutletContext]="{
+                    $implicit: option,
+                    option: option,
+                    label: labelOf(option),
+                    value: valueOf(option),
+                    selected: isChosen(option),
+                    disabled: isOptionDisabled(option),
+                    index: i,
+                  }"
+                />
+              } @else {
+                <span class="truncate">{{ labelOf(option) }}</span>
+              }
+            </button>
+          }
+        }
+
+        @if (footerTemplate()) {
+          <div class="sticky bottom-0 border-t border-border bg-surface">
+            <ng-container
+              [ngTemplateOutlet]="footerTemplate()!.template"
+              [ngTemplateOutletContext]="{
+                $implicit: query(),
+                filterText: query(),
+                close: closeFn,
+              }"
+            />
+          </div>
+        }
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], selectedOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOptions", required: false }] }], 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchingText", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], searchErrorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchErrorText", required: false }] }], minCharsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "minCharsText", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], openLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openLabel", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], triggerEl: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], fieldEl: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectOption), { isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectEmpty), { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectFooter), { isSignal: true }] }] } });
+
 const SDS_PHONE_COUNTRIES = [
     { iso2: 'BE', name: 'Belgium', dialCode: '32', lengths: [9], format: '### ## ## ##', example: '470123456' },
     { iso2: 'FR', name: 'France', dialCode: '33', lengths: [9], format: '# ## ## ## ##', example: '612345678' },
@@ -20899,5 +21637,5 @@ function provideSdsCharts(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_CHART_CONFIG, SDS_CHART_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsDateRangePicker, SdsEnvBanner, SdsFileDrop, SdsFormActions, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsRangeCalendar, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsSeverity, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, diffInDays, formatDateRange, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSameRange, isSdsThemeMode, isoDay, pad2, provideSdsCharts, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsLastDays, sdsLastMonths, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
+export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_CHART_CONFIG, SDS_CHART_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SDS_THEME_STORAGE_KEY, SDS_UI_PREF_LANG_PARAM, SDS_UI_PREF_THEME_PARAM, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAddressAutocomplete, SdsAddressExtra, SdsAllergenIcon, SdsAutocomplete, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsDateRangePicker, SdsEnvBanner, SdsFileDrop, SdsFormActions, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsRangeCalendar, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsSeverity, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, diffInDays, formatDateRange, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSameRange, isSdsThemeMode, isoDay, pad2, provideSdsCharts, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsLastDays, sdsLastMonths, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map