@besaitech/ng-design-system 0.0.58 → 0.0.60

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, booleanAttribute, computed, ChangeDetectionStrategy, Component, isDevMode, effect, numberAttribute, output, signal, forwardRef, viewChild, viewChildren, afterRenderEffect, model, ElementRef, Directive, Injector, contentChild, untracked, afterNextRender, TemplateRef, linkedSignal, DestroyRef, Injectable, contentChildren } from '@angular/core';
+import { inject, input, booleanAttribute, computed, ChangeDetectionStrategy, Component, isDevMode, effect, numberAttribute, output, signal, forwardRef, viewChild, viewChildren, afterRenderEffect, model, ElementRef, Directive, Injector, contentChild, untracked, afterNextRender, TemplateRef, linkedSignal, DestroyRef, afterEveryRender, Injectable, contentChildren } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
@@ -107,6 +107,9 @@ const SDS_ICONS = {
     'arrow-right': '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
     'refresh-cw': '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/>',
     'loader-circle': '<path d="M21 12a9 9 0 1 1-6.219-8.56"/>',
+    // Added for sds-address-autocomplete: the "Use my current location" row and its failure notice (Lucide).
+    'locate-fixed': '<line x1="2" x2="5" y1="12" y2="12"/><line x1="19" x2="22" y1="12" y2="12"/><line x1="12" x2="12" y1="2" y2="5"/><line x1="12" x2="12" y1="19" y2="22"/><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="3"/>',
+    'locate-off': '<path d="M12 19v3"/><path d="M12 2v3"/><path d="M18.89 13.24a7 7 0 0 0-8.13-8.13"/><path d="M19 12h3"/><path d="M2 12h3"/><path d="m2 2 20 20"/><path d="M7.05 7.05a7 7 0 0 0 9.9 9.9"/>',
     bug: '<path d="M12 20v-9"/><path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z"/><path d="M14.12 3.88 16 2"/><path d="M21 21a4 4 0 0 0-3.81-4"/><path d="M21 5a4 4 0 0 1-3.55 3.97"/><path d="M22 13h-4"/><path d="M3 21a4 4 0 0 1 3.81-4"/><path d="M3 5a4 4 0 0 0 3.55 3.97"/><path d="M6 13H2"/><path d="m8 2 1.88 1.88"/><path d="M9 7.13V6a3 3 0 1 1 6 0v1.13"/>',
     'scroll-text': '<path d="M15 12h-5"/><path d="M15 8h-5"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"/>',
     // Added for the dark/light switcher (sds-theme-toggle) and the command palette (sds-search-command).
@@ -291,7 +294,7 @@ const VARIANTS$2 = {
         'dark:hover:bg-white/10 dark:active:bg-white/15',
     danger: 'bg-danger text-white shadow-sm hover:brightness-95 active:brightness-90',
 };
-const SIZES$c = {
+const SIZES$d = {
     sm: 'h-8 px-3 text-sm',
     md: 'h-10 px-4 text-sm',
     lg: 'h-12 px-5 text-base',
@@ -351,7 +354,7 @@ class SdsButton {
             BASE,
             this.shape() === 'pill' ? 'rounded-full' : 'rounded-control',
             VARIANTS$2[this.variant()],
-            SIZES$c[size],
+            SIZES$d[size],
             this.iconOnly() ? ICON_ONLY[size] : '',
             this.block() ? 'w-full' : '',
         ]
@@ -403,8 +406,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: [".sds-spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:9999px;animation:sds-spin .6s linear infinite}@keyframes sds-spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
-let nextId$n = 0;
-const SIZES$b = {
+let nextId$o = 0;
+const SIZES$c = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
@@ -416,7 +419,7 @@ const SIZES$b = {
  * sidebar search field).
  */
 class SdsInput {
-    autoId = `sds-input-${nextId$n++}`;
+    autoId = `sds-input-${nextId$o++}`;
     /**
      * `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
@@ -520,7 +523,7 @@ class SdsInput {
     }, ...(ngDevMode ? [{ debugName: "fieldPadding" }] : []));
     wrapperClasses = computed(() => {
         const danger = !!this.error() || this.invalid();
-        const parts = [SIZES$b[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
+        const parts = [SIZES$c[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
         if (this.isDisabled())
             parts.push('opacity-60 cursor-not-allowed');
         if (this.filled()) {
@@ -776,7 +779,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$m = 0;
+let nextId$n = 0;
 const HEIGHTS = {
     sm: 'h-9',
     md: 'h-10',
@@ -804,7 +807,7 @@ const TEXT = {
  * with "." ("1.234" in nl-BE) stays a thousands separator.
  */
 class SdsInputNumber {
-    inputId = `sds-input-number-${nextId$m++}`;
+    inputId = `sds-input-number-${nextId$n++}`;
     fieldRef = viewChild('field', ...(ngDevMode ? [{ debugName: "fieldRef" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -1588,8 +1591,8 @@ 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$l = 0;
-const SIZES$a = {
+let nextId$m = 0;
+const SIZES$b = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
@@ -1629,7 +1632,7 @@ function parseTime(value) {
  * <sds-time-input [ariaLabel]="'Closes at'" [ngModel]="end()" (ngModelChange)="end.set($event)" clearable />
  */
 class SdsTimeInput {
-    fieldId = `sds-time-input-${nextId$l++}`;
+    fieldId = `sds-time-input-${nextId$m++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name of the field when there is no visible [label]. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -1676,7 +1679,7 @@ class SdsTimeInput {
         return null;
     }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$a[this.size()], 'rounded-control'];
+        const parts = [SIZES$b[this.size()], 'rounded-control'];
         if (this.isDisabled())
             parts.push('opacity-60 cursor-not-allowed');
         if (this.appearance() === 'filled') {
@@ -2158,8 +2161,8 @@ 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$k = 0;
-const SIZES$9 = {
+let nextId$l = 0;
+const SIZES$a = {
     sm: 'min-h-9 text-sm',
     md: 'min-h-10 text-sm',
     lg: 'min-h-12 text-base',
@@ -2178,7 +2181,7 @@ const SIZES$9 = {
  * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
  */
 class SdsLocalizedInput {
-    inputId = `sds-localized-input-${nextId$k++}`;
+    inputId = `sds-localized-input-${nextId$l++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
@@ -2203,7 +2206,7 @@ class SdsLocalizedInput {
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$9[this.size()]];
+        const parts = [SIZES$a[this.size()]];
         parts.push(this.isDisabled()
             ? 'border-border opacity-60 cursor-not-allowed'
             : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
@@ -2434,8 +2437,8 @@ 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$j = 0;
-const SIZES$8 = {
+let nextId$k = 0;
+const SIZES$9 = {
     md: 'h-12 w-11 text-lg',
     lg: 'h-14 w-12 text-xl',
 };
@@ -2451,7 +2454,7 @@ const SIZES$8 = {
  * first box and have it land correctly.
  */
 class SdsOtpInput {
-    groupId = `sds-otp-${nextId$j++}`;
+    groupId = `sds-otp-${nextId$k++}`;
     /** How many boxes / characters the code has. */
     length = input(6, ...(ngDevMode ? [{ debugName: "length", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -2487,7 +2490,7 @@ class SdsOtpInput {
         return null;
     }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
     cellClasses = computed(() => {
-        const parts = ['rounded-control border', SIZES$8[this.size()]];
+        const parts = ['rounded-control border', SIZES$9[this.size()]];
         parts.push(this.error()
             ? 'border-danger focus:border-danger focus:ring-2 focus:ring-danger/25'
             : 'border-border text-ink focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25');
@@ -2751,8 +2754,8 @@ 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$i = 0;
-const SIZES$7 = {
+let nextId$j = 0;
+const SIZES$8 = {
     sm: 'text-sm px-3 py-2',
     md: 'text-sm px-3.5 py-2.5',
     lg: 'text-base px-4 py-3',
@@ -2763,7 +2766,7 @@ const SIZES$7 = {
  * [(ngModel)].
  */
 class SdsTextarea {
-    fieldId = `sds-textarea-${nextId$i++}`;
+    fieldId = `sds-textarea-${nextId$j++}`;
     field = viewChild('field', ...(ngDevMode ? [{ debugName: "field" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -2820,7 +2823,7 @@ class SdsTextarea {
     fieldClasses = computed(() => {
         const parts = [
             'block w-full rounded-control border text-ink outline-none transition-colors placeholder:text-ink-faint',
-            SIZES$7[this.size()],
+            SIZES$8[this.size()],
         ];
         if (this.autoResize())
             parts.push('overflow-hidden');
@@ -3030,8 +3033,8 @@ 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$h = 0;
-const SIZES$6 = {
+let nextId$i = 0;
+const SIZES$7 = {
     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 },
     lg: { track: 'h-7 w-[3.4rem]', knob: 'h-6 w-6', on: 'translate-x-7', icon: 15 },
@@ -3043,7 +3046,7 @@ const SIZES$6 = {
  * states.
  */
 class SdsToggleSwitch {
-    fieldId = `sds-toggle-switch-${nextId$h++}`;
+    fieldId = `sds-toggle-switch-${nextId$i++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -3071,7 +3074,7 @@ class SdsToggleSwitch {
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
     checked = computed(() => this.value() === this.trueValue(), ...(ngDevMode ? [{ debugName: "checked" }] : []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-    sizing = computed(() => SIZES$6[this.size()], ...(ngDevMode ? [{ debugName: "sizing" }] : []));
+    sizing = computed(() => SIZES$7[this.size()], ...(ngDevMode ? [{ debugName: "sizing" }] : []));
     describedBy = computed(() => {
         if (this.error())
             return `${this.fieldId}-err`;
@@ -3290,7 +3293,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$g = 0;
+let nextId$h = 0;
 /**
  * Boolean checkbox. Implements ControlValueAccessor — use with reactive forms
  * or `[(ngModel)]`. Renders a styled box (brand-filled with a check when on)
@@ -3305,7 +3308,7 @@ let nextId$g = 0;
  * <sds-checkbox label="Auto-merge" [(ngModel)]="autoMerge" />
  */
 class SdsCheckbox {
-    id = `sds-checkbox-${nextId$g++}`;
+    id = `sds-checkbox-${nextId$h++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -3453,7 +3456,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$f = 0;
+let nextId$g = 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.
@@ -3479,7 +3482,7 @@ const groups = new Map();
  * <sds-radio name="size" value="large" label="Grand" [(ngModel)]="size" />
  */
 class SdsRadio {
-    id = `sds-radio-${nextId$f++}`;
+    id = `sds-radio-${nextId$g++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -4055,7 +4058,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$e = 0;
+let nextId$f = 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).
@@ -4075,7 +4078,7 @@ let nextId$e = 0;
  *                     containsLabel="Contains" mayContainLabel="May contain" noneLabel="Not present" />
  */
 class SdsTriStateChip {
-    chipId = `sds-tri-state-chip-${nextId$e++}`;
+    chipId = `sds-tri-state-chip-${nextId$f++}`;
     /** 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. */
@@ -4300,7 +4303,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$d = 0;
+let nextId$e = 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
@@ -4316,7 +4319,7 @@ let nextId$d = 0;
  */
 class SdsSegmented {
     host = inject(ElementRef);
-    baseId = `sds-segmented-${nextId$d++}`;
+    baseId = `sds-segmented-${nextId$e++}`;
     /** Options: `{ value, label, icon?, disabled? }` objects, or bare strings/numbers. */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     /** Selected value. Two-way: `[(value)]`. */
@@ -4594,7 +4597,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$c = 0;
+let nextId$d = 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
@@ -4617,7 +4620,7 @@ let nextId$c = 0;
  */
 class SdsChipGroup {
     host = inject(ElementRef);
-    baseId = `sds-chip-group-${nextId$c++}`;
+    baseId = `sds-chip-group-${nextId$d++}`;
     /** 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)]`. */
@@ -5519,7 +5522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], availableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableLabel", required: false }] }], soldOutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "soldOutLabel", required: false }] }], hiddenLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenLabel", required: false }] }], activate: [{ type: i0.Output, args: ["activate"] }], imageError: [{ type: i0.Output, args: ["imageError"] }] } });
 
-let nextId$b = 0;
+let nextId$c = 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
@@ -5567,7 +5570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class SdsMenu {
     host = inject(ElementRef);
     injector = inject(Injector);
-    menuId = `sds-menu-${nextId$b++}`;
+    menuId = `sds-menu-${nextId$c++}`;
     triggerId = `${this.menuId}-trigger`;
     /** Actions and separators, in order. */
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
@@ -6163,7 +6166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     standalone: true,
                 }]
         }] });
-let nextId$a = 0;
+let nextId$b = 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). */
@@ -6232,7 +6235,7 @@ function moveItem(list, from, to) {
 class SdsSortableList {
     host = inject(ElementRef);
     injector = inject(Injector);
-    instructionsId = `sds-sortable-${nextId$a++}-help`;
+    instructionsId = `sds-sortable-${nextId$b++}-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). */
@@ -6824,7 +6827,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$9 = 0;
+let nextId$a = 0;
 /** "1.5 MB" style size (decimal units, like file managers show them), for messages. */
 function sdsFormatBytes(bytes) {
     if (!Number.isFinite(bytes) || bytes < 0)
@@ -6881,7 +6884,7 @@ function sdsFileMatchesAccept(file, accept) {
  *                (files)="upload($event)" (rejected)="onRejected($event)" />
  */
 class SdsFileDrop {
-    zoneId = `sds-file-drop-${nextId$9++}`;
+    zoneId = `sds-file-drop-${nextId$a++}`;
     fileInput = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInput" }] : []));
     /** Accepted types, native `accept` syntax. Empty = anything. */
     accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : []));
@@ -7263,7 +7266,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$8 = 0;
+let nextId$9 = 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.
@@ -7281,7 +7284,7 @@ let nextId$8 = 0;
  * <sds-button (click)="upload(await cropper.toBlob({ width: 1600 }))">Save</sds-button>
  */
 class SdsImageCropper {
-    helpId = `sds-image-cropper-${nextId$8++}-help`;
+    helpId = `sds-image-cropper-${nextId$9++}-help`;
     viewport = viewChild('viewport', ...(ngDevMode ? [{ debugName: "viewport" }] : []));
     /** Image to crop: a URL, or a Blob/File. */
     src = input(null, ...(ngDevMode ? [{ debugName: "src" }] : []));
@@ -8629,7 +8632,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], showDone: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDone", 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 }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], todayActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayActionLabel", required: false }] }], clearActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearActionLabel", required: false }] }], dateSelect: [{ type: i0.Output, args: ["dateSelect"] }], done: [{ type: i0.Output, args: ["done"] }] } });
 
-const SIZES$5 = {
+const SIZES$6 = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
@@ -8645,7 +8648,7 @@ const SIZES$5 = {
 class SdsDatePicker {
     host = inject(ElementRef);
     injector = inject(Injector);
-    fieldId = `sds-date-${nextId$7++}`;
+    fieldId = `sds-date-${nextId$8++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     placeholder = input('dd/mm/yyyy', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
@@ -8721,7 +8724,7 @@ class SdsDatePicker {
     /** Whether the clear button is shown (affects the field's right padding). */
     showClear = computed(() => this.clearable() && !!this.value() && !this.isDisabled(), ...(ngDevMode ? [{ debugName: "showClear" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$5[this.size()]];
+        const parts = [SIZES$6[this.size()]];
         parts.push(this.error()
             ? 'border-danger focus-within:border-danger focus-within:ring-2 focus-within:ring-danger/25'
             : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
@@ -9163,7 +9166,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$7 = 0;
+let nextId$8 = 0;
 
 /**
  * Supplies a custom template for each option row (and the selected value shown
@@ -9242,12 +9245,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }] });
 
-const SIZES$4 = {
+const SIZES$5 = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
 };
-let nextId$6 = 0;
+let nextId$7 = 0;
 /**
  * Single-select dropdown. Options may be primitives or objects (configure via
  * [optionLabel]/[optionValue]/[optionDisabled]). The overlay is appended to
@@ -9281,7 +9284,7 @@ let nextId$6 = 0;
 class SdsSelect {
     host = inject(ElementRef);
     injector = inject(Injector);
-    selectId = `sds-select-${nextId$6++}`;
+    selectId = `sds-select-${nextId$7++}`;
     listId = `${this.selectId}-list`;
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
@@ -9344,7 +9347,7 @@ class SdsSelect {
     showClear = computed(() => this.clearable() && this.value() != null && !this.isDisabled(), ...(ngDevMode ? [{ debugName: "showClear" }] : []));
     activeDescId = computed(() => this.highlightedIndex() >= 0 ? this.optionId(this.highlightedIndex()) : null, ...(ngDevMode ? [{ debugName: "activeDescId" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$4[this.size()]];
+        const parts = [SIZES$5[this.size()]];
         if (this.filled()) {
             // border-transparent (not border-0) so a filled field is the same height as a bordered one when a
             // form mixes them — mirrors sds-input's filled appearance.
@@ -9986,12 +9989,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectOption), { isSignal: true }] }], emptyTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectEmpty), { isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectFooter), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
-const SIZES$3 = {
+const SIZES$4 = {
     sm: 'min-h-9 text-sm',
     md: 'min-h-10 text-sm',
     lg: 'min-h-12 text-base',
 };
-let nextId$5 = 0;
+let nextId$6 = 0;
 /**
  * Multi-select dropdown (value is an array). Options may be primitives or
  * objects (configure via [optionLabel]/[optionValue]/[optionDisabled]). The
@@ -10024,7 +10027,7 @@ let nextId$5 = 0;
 class SdsMultiSelect {
     host = inject(ElementRef);
     injector = inject(Injector);
-    selectId = `sds-multiselect-${nextId$5++}`;
+    selectId = `sds-multiselect-${nextId$6++}`;
     listId = `${this.selectId}-list`;
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
@@ -10120,7 +10123,7 @@ class SdsMultiSelect {
         return i >= 0 ? this.optionId(i) : null;
     }, ...(ngDevMode ? [{ debugName: "activeDescId" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$3[this.size()]];
+        const parts = [SIZES$4[this.size()]];
         parts.push(this.error()
             ? 'border-danger focus:border-danger focus:ring-2 focus:ring-danger/25'
             : 'border-border focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25');
@@ -10902,12 +10905,12 @@ function sdsMatchDialCode(e164Digits, countries) {
     return best;
 }
 
-const SIZES$2 = {
+const SIZES$3 = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
 };
-let nextId$4 = 0;
+let nextId$5 = 0;
 /**
  * International phone number input: a country selector (ISO chip + dial code)
  * with a searchable, body-appended dropdown, plus a formatted national-number
@@ -10922,7 +10925,7 @@ let nextId$4 = 0;
 class SdsPhoneInput {
     host = inject(ElementRef);
     injector = inject(Injector);
-    fieldId = `sds-phone-${nextId$4++}`;
+    fieldId = `sds-phone-${nextId$5++}`;
     listId = `${this.fieldId}-list`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
@@ -11096,7 +11099,7 @@ class SdsPhoneInput {
         return null;
     }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$2[this.size()]];
+        const parts = [SIZES$3[this.size()]];
         parts.push(this.showError()
             ? 'border-danger focus-within:border-danger focus-within:ring-2 focus-within:ring-danger/25'
             : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
@@ -11642,129 +11645,1086 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], defaultCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCountry", required: false }] }], preferredCountries: [{ type: i0.Input, args: [{ isSignal: true, alias: "preferredCountries", required: false }] }], onlyCountries: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyCountries", required: false }] }], showExampleHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExampleHint", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], requiredMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredMessage", required: false }] }], countryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countryLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsLabel", required: false }] }], incompleteMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "incompleteMessage", required: false }] }], invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], lengthSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "lengthSeparator", required: false }] }], exampleHintTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "exampleHintTemplate", required: false }] }], phoneChange: [{ type: i0.Output, args: ["phoneChange"] }], anchor: [{ type: i0.ViewChild, args: ['anchor', { isSignal: true }] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
-const SIZES$1 = {
-    sm: 'h-8 min-w-8 text-xs',
-    md: 'h-9 min-w-9 text-sm',
-    lg: 'h-11 min-w-11 text-base',
+/**
+ * App-owned rows rendered inside an `<sds-address-autocomplete>` panel — saved addresses, a "Enter it
+ * manually" action… They sit outside the suggestion listbox (the arrow keys walk the suggestions only),
+ * below the suggestions by default or between the current-location row and the suggestions with
+ * `extraPosition="above-results"`.
+ *
+ * @example
+ * <sds-address-autocomplete [search]="search" (selected)="pick($event)">
+ *   <ng-template sdsAddressExtra let-query let-close="close">
+ *     @for (a of savedMatching(query); track a.id) {
+ *       <button type="button" (click)="useSaved(a); close()">{{ a.label }}</button>
+ *     }
+ *   </ng-template>
+ * </sds-address-autocomplete>
+ */
+class SdsAddressExtra {
+    /** The wrapped template, rendered by the host autocomplete via ngTemplateOutlet. */
+    template = inject(TemplateRef);
+    /** Lets the compiler type-check `let-*` bindings against SdsAddressExtraContext. */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsAddressExtra, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsAddressExtra, isStandalone: true, selector: "ng-template[sdsAddressExtra]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsAddressExtra, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdsAddressExtra]',
+                    standalone: true,
+                }]
+        }] });
+
+const SIZES$2 = {
+    sm: 'h-9 text-sm',
+    md: 'h-10 text-sm',
+    lg: 'h-12 text-base',
 };
-const ICON_SIZES = { sm: 15, md: 16, lg: 18 };
-const BTN_BASE = 'inline-flex items-center justify-center rounded-control px-1.5 font-medium ' +
-    'transition-colors select-none focus-visible:outline-none focus-visible:ring-2 ' +
-    'focus-visible:ring-brand-500 focus-visible:ring-offset-1';
+let nextId$4 = 0;
 /**
- * Pagination control (mirrors PrimeNG's paginator). Drives a sliding window of
- * page links with first/prev/next/last navigation, an optional rows-per-page
- * dropdown (reuses <sds-select>), a current-page report and a jump-to-page input.
+ * Address search field — a combobox over an app-supplied geocoder. Typing (at least `minChars`
+ * characters) runs the `search` provider, debounced by `debounceMs`; only the latest query's response is
+ * applied (a slower, older one is discarded). Results show the street + number on top and "postcode
+ * city" beneath. With a `locate` provider, a "Use my current location" row sits on top until a search
+ * starts; if the provider finds no position, an inline notice says so (no toast).
  *
- * State is exposed as two-way models: [first] (zero-based index of the first
- * record on the page) and [rows] (page size). A combined (pageChange) event
- * carries the full {@link SdsPaginatorState} on every change.
+ * The component does no HTTP and no geolocation itself — both are provider inputs, so it works with any
+ * backend. The value (`[(ngModel)]` / `formControl`) is the display text of the field; a
+ * pick writes the suggestion's `label` into it and emits `(selected)` with the whole suggestion
+ * (coordinates + structured parts). Free text that was never picked emits nothing — treat the field as
+ * "an address was chosen" only after `(selected)`.
+ *
+ * Keyboard: ↓/↑ walk the rows (opening the panel), Enter picks, Esc closes (or, `inline`, clears the
+ * highlight and lets Esc bubble — a dialog around it still closes). ARIA: the field is a `combobox`
+ * (`aria-autocomplete="list"`) driving a `listbox` through `aria-activedescendant`.
+ *
+ * By default the suggestions open in an overlay appended to `<body>` (safe inside scrolling drawers and
+ * dialogs). `inline` renders them in the page flow instead, always visible — for a full-height address
+ * sheet. App rows (saved addresses…) go in a projected `<ng-template sdsAddressExtra>`.
+ *
+ * Every user-facing string has an English default; an app serving other languages passes translations.
  *
  * @example
- * <sds-paginator
- *   [totalRecords]="120"
- *   [(first)]="first"
- *   [(rows)]="rows"
- *   [rowsPerPageOptions]="[10, 20, 50]"
- *   showCurrentPageReport
- *   (pageChange)="load($event)"
+ * <sds-address-autocomplete
+ *   label="Address"
+ *   [search]="searchAddress"
+ *   [locate]="locateMe"
+ *   [(ngModel)]="addressText"
+ *   (selected)="onAddress($event)"
  * />
  */
-class SdsPaginator {
-    /** Total number of records to paginate. */
-    totalRecords = input(0, ...(ngDevMode ? [{ debugName: "totalRecords", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-    /** Zero-based index of the first record on the current page (two-way). */
-    first = model(0, ...(ngDevMode ? [{ debugName: "first" }] : []));
-    /** Rows displayed per page (two-way). */
-    rows = model(10, ...(ngDevMode ? [{ debugName: "rows" }] : []));
-    /** When non-empty, renders a rows-per-page dropdown with these choices. */
-    rowsPerPageOptions = input([], ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : []));
-    /** Maximum count of numbered page links shown in the sliding window. */
-    pageLinkSize = input(5, ...(ngDevMode ? [{ debugName: "pageLinkSize", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-    showFirstLastIcon = input(true, ...(ngDevMode ? [{ debugName: "showFirstLastIcon", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    showPageLinks = input(true, ...(ngDevMode ? [{ debugName: "showPageLinks", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    showCurrentPageReport = input(false, ...(ngDevMode ? [{ debugName: "showCurrentPageReport", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /** Tokens: {first} {last} {totalRecords} {currentPage} {totalPages} {rows}. */
-    currentPageReportTemplate = input('{first} – {last} of {totalRecords}', ...(ngDevMode ? [{ debugName: "currentPageReportTemplate" }] : []));
-    showJumpToPageInput = input(false, ...(ngDevMode ? [{ debugName: "showJumpToPageInput", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    rowsPerPageLabel = input('Rows per page', ...(ngDevMode ? [{ debugName: "rowsPerPageLabel" }] : []));
-    jumpToPageLabel = input('Go to', ...(ngDevMode ? [{ debugName: "jumpToPageLabel" }] : []));
+class SdsAddressAutocomplete {
+    host = inject(ElementRef);
+    autoId = `sds-address-${nextId$4++}`;
+    locateListId = `${this.autoId}-here`;
+    listId = `${this.autoId}-list`;
+    // --- providers ------------------------------------------------------------
+    /** Required. The address search: the app's geocode call for the typed (trimmed) query. */
+    search = input.required(...(ngDevMode ? [{ debugName: "search" }] : []));
     /**
-     * Accessible name for the <nav> wrapping the page controls, and for the four icon-only
-     * first/prev/next/last buttons. Those buttons have no text, so these strings are their ONLY
-     * accessible names — the English defaults suit an English-first app, but an app serving more than
-     * one language MUST pass translated values.
+     * Optional. When set, a "Use my current location" row shows on top until a search starts. The app does
+     * the geolocation (with its own timeout) and the reverse geocode; resolve `null` (or reject) when no
+     * position can be had — the row then shows {@link locateFailedText} inline. A position without a street
+     * is still a result: return `{ label: '', latitude, longitude }`.
      */
-    paginationLabel = input('Pagination', ...(ngDevMode ? [{ debugName: "paginationLabel" }] : []));
-    firstPageLabel = input('First page', ...(ngDevMode ? [{ debugName: "firstPageLabel" }] : []));
-    previousPageLabel = input('Previous page', ...(ngDevMode ? [{ debugName: "previousPageLabel" }] : []));
-    nextPageLabel = input('Next page', ...(ngDevMode ? [{ debugName: "nextPageLabel" }] : []));
-    lastPageLabel = input('Last page', ...(ngDevMode ? [{ debugName: "lastPageLabel" }] : []));
+    locate = input(null, ...(ngDevMode ? [{ debugName: "locate" }] : []));
+    // --- behaviour ------------------------------------------------------------
+    /** The search runs once the trimmed query has at least this many characters. */
+    minChars = input(3, ...(ngDevMode ? [{ debugName: "minChars", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Quiet period after the last keystroke before the search runs, in ms. */
+    debounceMs = input(250, ...(ngDevMode ? [{ debugName: "debounceMs", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Render the rows in the page flow, always visible (an address sheet) instead of an overlay. */
+    inline = input(false, ...(ngDevMode ? [{ debugName: "inline", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Where the projected `sdsAddressExtra` rows go. */
+    extraPosition = input('below', ...(ngDevMode ? [{ debugName: "extraPosition" }] : []));
     /**
-     * Accessible name of a numbered page link. `{page}` is replaced with the 1-based page number —
-     * a token rather than a prefix because word order is not the same in every language.
+     * Show {@link noResultsText} when a search finds nothing. Turn it off when the app's own extra rows
+     * already answer the query (e.g. saved addresses that match it).
      */
-    pageLinkLabel = input('Page {page}', ...(ngDevMode ? [{ debugName: "pageLinkLabel" }] : []));
+    showNoResults = input(true, ...(ngDevMode ? [{ debugName: "showNoResults", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    // --- field ----------------------------------------------------------------
     /**
-     * Accessible name of the jump-to-page field. Separate from the visible {@link jumpToPageLabel}
-     * ("Go to") on purpose: the visible text is terse because it sits next to the field, while the
-     * accessible name has to stand alone.
+     * The field text — the picked suggestion's label, or what the user typed. It is the CVA value: bind it
+     * with `[(ngModel)]` / `formControl` (there is deliberately no `[value]` input).
      */
-    jumpToPageAriaLabel = input('Go to page', ...(ngDevMode ? [{ debugName: "jumpToPageAriaLabel" }] : []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** `id` of the native input (for an outside `<label for>`); empty generates one. */
+    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Accessible name when there is no visible [label]. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    /** Danger frame + `aria-invalid` without a message. */
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Asterisk after the label + `aria-required`. It does not validate. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /** Fires after any page or page-size change with the full paginator state. */
-    pageChange = output();
-    pageCount = computed(() => Math.max(1, Math.ceil(this.totalRecords() / Math.max(1, this.rows()))), ...(ngDevMode ? [{ debugName: "pageCount" }] : []));
-    page = computed(() => Math.min(this.pageCount() - 1, Math.floor(this.first() / Math.max(1, this.rows()))), ...(ngDevMode ? [{ debugName: "page" }] : []));
-    firstDisabled = computed(() => this.disabled() || this.page() <= 0, ...(ngDevMode ? [{ debugName: "firstDisabled" }] : []));
-    lastDisabled = computed(() => this.disabled() || this.page() >= this.pageCount() - 1, ...(ngDevMode ? [{ debugName: "lastDisabled" }] : []));
-    iconSize = computed(() => ICON_SIZES[this.size()], ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
-    // Sliding window of zero-based page indices, centred on the current page.
-    pageLinks = computed(() => {
-        const pages = this.pageCount();
-        const visible = Math.min(this.pageLinkSize(), pages);
-        let start = Math.max(0, Math.ceil(this.page() - visible / 2));
-        const end = Math.min(pages - 1, start + visible - 1);
-        start = Math.max(0, start - (visible - (end - start + 1)));
-        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-    }, ...(ngDevMode ? [{ debugName: "pageLinks" }] : []));
-    reportText = computed(() => {
-        const total = this.totalRecords();
-        const first = total === 0 ? 0 : this.first() + 1;
-        const last = Math.min(this.first() + this.rows(), total);
-        return this.currentPageReportTemplate()
-            .replace('{first}', String(first))
-            .replace('{last}', String(last))
-            .replace('{totalRecords}', String(total))
-            .replace('{currentPage}', String(this.page() + 1))
-            .replace('{totalPages}', String(this.pageCount()))
-            .replace('{rows}', String(this.rows()));
-    }, ...(ngDevMode ? [{ debugName: "reportText" }] : []));
-    hostClass = computed(() => {
-        const base = 'flex flex-wrap items-center gap-x-4 gap-y-3';
-        const justify = this.showCurrentPageReport() ? 'justify-between' : 'justify-center';
-        return `${base} ${justify}`;
-    }, ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
-    pageLinkAriaLabel(page) {
-        return this.pageLinkLabel().replace('{page}', String(page + 1));
-    }
-    navClass(isDisabled) {
-        const cls = `${BTN_BASE} ${SIZES$1[this.size()]} px-0`;
-        return isDisabled
-            ? `${cls} text-ink-faint opacity-50 cursor-not-allowed`
-            : `${cls} text-ink-soft hover:bg-muted cursor-pointer`;
-    }
-    linkClass(active) {
-        const cls = `${BTN_BASE} ${SIZES$1[this.size()]}`;
-        if (this.disabled())
-            return `${cls} text-ink-faint opacity-50 cursor-not-allowed`;
-        return active
-            ? `${cls} bg-brand-600 text-white hover:bg-brand-700 ${DARK_BRAND_FILL_HOVER} cursor-pointer`
-            : `${cls} text-ink-soft hover:bg-muted cursor-pointer`;
+    /** A clear (×) button while the field has text. */
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** `filled`: borderless on a muted ground (a search pill inside a sheet). */
+    appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    shape = input('control', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    /** Decorative icon at the start of the field; `null` for none. */
+    leadingIcon = input('search', ...(ngDevMode ? [{ debugName: "leadingIcon" }] : []));
+    // --- strings (English defaults — pass translations) ------------------------
+    useLocationText = input('Use my current location', ...(ngDevMode ? [{ debugName: "useLocationText" }] : []));
+    locatingText = input('Locating…', ...(ngDevMode ? [{ debugName: "locatingText" }] : []));
+    locateFailedText = input("Couldn't find your location. Check location access, or type your address.", ...(ngDevMode ? [{ debugName: "locateFailedText" }] : []));
+    searchingText = input('Searching…', ...(ngDevMode ? [{ debugName: "searchingText" }] : []));
+    noResultsText = input('No matching address', ...(ngDevMode ? [{ debugName: "noResultsText" }] : []));
+    searchErrorText = input("Couldn't search addresses right now. Try again.", ...(ngDevMode ? [{ debugName: "searchErrorText" }] : []));
+    /** Optional heading above the suggestions (e.g. "Results"); empty shows none. */
+    resultsLabel = input('', ...(ngDevMode ? [{ debugName: "resultsLabel" }] : []));
+    /** Accessible name of the icon-only clear button. */
+    clearLabel = input('Clear', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    /** A suggestion or the current location was picked. The emitted copy carries `source`. */
+    selected = output();
+    extraTpl = contentChild(SdsAddressExtra, ...(ngDevMode ? [{ debugName: "extraTpl" }] : []));
+    fieldRef = viewChild('field', ...(ngDevMode ? [{ debugName: "fieldRef" }] : []));
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+    // --- state ----------------------------------------------------------------
+    /** The trimmed text the user typed — '' until they type, and again after a pick or a written value. */
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : []));
+    suggestions = signal([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    /** The latest search failed (network / server) — not the same as "no matches". */
+    failed = signal(false, ...(ngDevMode ? [{ debugName: "failed" }] : []));
+    locating = signal(false, ...(ngDevMode ? [{ debugName: "locating" }] : []));
+    locateFailed = signal(false, ...(ngDevMode ? [{ debugName: "locateFailed" }] : []));
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    highlighted = signal(-1, ...(ngDevMode ? [{ debugName: "highlighted" }] : []));
+    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
+    /** Monotonic id: only the latest search's response is applied. */
+    seq = 0;
+    timer;
+    destroyed = false;
+    panelEl = null;
+    fieldId = computed(() => this.inputId() || this.autoId, ...(ngDevMode ? [{ debugName: "fieldId" }] : []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    pill = computed(() => this.shape() === 'pill', ...(ngDevMode ? [{ debugName: "pill" }] : []));
+    isSearching = computed(() => this.query().length >= this.minChars(), ...(ngDevMode ? [{ debugName: "isSearching" }] : []));
+    /** The current-location row: offered (a `locate` provider) and no search engaged yet. */
+    showLocate = computed(() => !!this.locate() && !this.isSearching(), ...(ngDevMode ? [{ debugName: "showLocate" }] : []));
+    rows = computed(() => {
+        const rows = [];
+        if (this.showLocate())
+            rows.push({ kind: 'locate' });
+        if (this.isSearching()) {
+            this.suggestions().forEach((suggestion, index) => rows.push({ kind: 'suggestion', suggestion, index }));
+        }
+        return rows;
+    }, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    suggestionRows = computed(() => {
+        const offset = this.showLocate() ? 1 : 0;
+        return this.isSearching()
+            ? this.suggestions().map((suggestion, i) => ({ suggestion, rowIndex: i + offset }))
+            : [];
+    }, ...(ngDevMode ? [{ debugName: "suggestionRows" }] : []));
+    /** Anything to show in the panel at all. */
+    hasContent = computed(() => this.showLocate() || this.isSearching() || !!this.extraTpl(), ...(ngDevMode ? [{ debugName: "hasContent" }] : []));
+    /** The rows are visible: always when `inline`, while open (and non-empty) as an overlay. */
+    panelShown = computed(() => !this.isDisabled() && this.hasContent() && (this.inline() || this.open()), ...(ngDevMode ? [{ debugName: "panelShown" }] : []));
+    controlsIds = computed(() => {
+        const ids = [];
+        if (this.showLocate())
+            ids.push(this.locateListId);
+        if (this.isSearching() && this.suggestions().length)
+            ids.push(this.listId);
+        return ids.length ? ids.join(' ') : null;
+    }, ...(ngDevMode ? [{ debugName: "controlsIds" }] : []));
+    activeDescId = computed(() => this.panelShown() && this.highlighted() >= 0 && this.highlighted() < this.rows().length
+        ? this.optionId(this.highlighted())
+        : null, ...(ngDevMode ? [{ debugName: "activeDescId" }] : []));
+    listLabel = computed(() => this.label() || this.ariaLabel() || this.placeholder() || null, ...(ngDevMode ? [{ debugName: "listLabel" }] : []));
+    describedBy = computed(() => {
+        if (this.error())
+            return `${this.fieldId()}-err`;
+        if (this.hint())
+            return `${this.fieldId()}-hint`;
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
+    fieldPadding = computed(() => {
+        const left = this.leadingIcon()
+            ? this.pill()
+                ? 'pl-11'
+                : 'pl-10'
+            : this.pill()
+                ? 'pl-5'
+                : 'pl-3.5';
+        return `${left} pr-10`;
+    }, ...(ngDevMode ? [{ debugName: "fieldPadding" }] : []));
+    wrapperClasses = computed(() => {
+        const danger = !!this.error() || this.invalid();
+        const parts = [SIZES$2[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
+        if (this.isDisabled())
+            parts.push('opacity-60 cursor-not-allowed');
+        if (this.appearance() === 'filled') {
+            parts.push('border-transparent bg-muted text-ink');
+            parts.push(danger
+                ? 'border-danger focus-within:ring-2 focus-within:ring-danger/30'
+                : 'focus-within:ring-2 focus-within:ring-brand-500/25');
+        }
+        else {
+            parts.push('bg-surface text-ink');
+            parts.push(danger
+                ? 'border-danger focus-within:border-danger focus-within:ring-2 focus-within:ring-danger/25'
+                : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
+        }
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
+    extraContext = computed(() => ({
+        $implicit: this.query(),
+        query: this.query(),
+        searching: this.isSearching(),
+        close: () => this.close(),
+    }), ...(ngDevMode ? [{ debugName: "extraContext" }] : []));
+    constructor() {
+        // The overlay lives on <body> (so a scrolling drawer can't clip it); keep it under the field.
+        afterEveryRender(() => this.syncPanel());
     }
-    firstPage() {
-        this.changePage(0);
+    // --- rendering helpers ------------------------------------------------------
+    optionId(rowIndex) {
+        return `${this.autoId}-opt-${rowIndex}`;
+    }
+    rowClass(rowIndex, busy) {
+        if (busy)
+            return 'cursor-wait';
+        return this.highlighted() === rowIndex
+            ? 'cursor-pointer bg-muted'
+            : 'cursor-pointer hover:bg-muted';
+    }
+    /** Street + number when the geocoder split it out, else the full label. */
+    primaryLine(s) {
+        if (s.street)
+            return [s.street, s.houseNumber].filter(Boolean).join(' ');
+        return s.label ?? '';
+    }
+    /** "postcode city" — or, when the primary is already the full label, the country instead. */
+    secondaryLine(s) {
+        const cityLine = [s.postcode, s.city].filter(Boolean).join(' ');
+        return s.street ? cityLine : cityLine || s.countryCode || '';
+    }
+    // --- input ------------------------------------------------------------------
+    onInput(event) {
+        const text = event.target.value;
+        this.value.set(text);
+        this.onChange(text);
+        this.locateFailed.set(false); // typing is the way on after a failed locate
+        this.open.set(true);
+        this.runSearch(text);
+    }
+    /** Focus or a click on the (already focused) field opens the overlay. */
+    onFocus() {
+        if (!this.inline())
+            this.open.set(true);
+    }
+    runSearch(text) {
+        clearTimeout(this.timer);
+        const q = text.trim();
+        const seq = ++this.seq;
+        this.query.set(q);
+        this.failed.set(false);
+        this.highlighted.set(-1);
+        if (q.length < this.minChars()) {
+            this.suggestions.set([]);
+            this.loading.set(false);
+            return;
+        }
+        this.loading.set(true);
+        this.timer = setTimeout(() => {
+            let pending;
+            try {
+                pending = Promise.resolve(this.search()(q));
+            }
+            catch (e) {
+                pending = Promise.reject(e);
+            }
+            pending.then((results) => {
+                if (seq !== this.seq || this.destroyed)
+                    return; // stale
+                this.suggestions.set(results ?? []);
+                this.loading.set(false);
+            }, () => {
+                if (seq !== this.seq || this.destroyed)
+                    return;
+                this.suggestions.set([]);
+                this.loading.set(false);
+                this.failed.set(true);
+            });
+        }, this.debounceMs());
+    }
+    /** Drop any in-flight search and return to the idle (no query) state. */
+    resetSearch() {
+        clearTimeout(this.timer);
+        this.seq++;
+        this.query.set('');
+        this.suggestions.set([]);
+        this.loading.set(false);
+        this.failed.set(false);
+        this.highlighted.set(-1);
+    }
+    clear() {
+        this.value.set('');
+        this.onChange('');
+        this.onTouched();
+        this.resetSearch();
+        this.inputRef()?.nativeElement.focus();
+    }
+    // --- picking ----------------------------------------------------------------
+    pick(s, source) {
+        const text = s.label ?? '';
+        this.value.set(text);
+        this.onChange(text);
+        this.onTouched();
+        this.resetSearch();
+        this.locateFailed.set(false);
+        this.close();
+        this.selected.emit({ ...s, source });
+    }
+    /** The current-location row: the `locate` provider, then a pick — or the inline failure notice. */
+    async useCurrentLocation() {
+        const locate = this.locate();
+        if (!locate || this.locating())
+            return;
+        this.locateFailed.set(false);
+        this.locating.set(true);
+        let here = null;
+        try {
+            here = await locate();
+        }
+        catch {
+            here = null;
+        }
+        if (this.destroyed)
+            return;
+        this.locating.set(false);
+        if (!here) {
+            this.locateFailed.set(true);
+            return;
+        }
+        this.pick(here, 'location');
+    }
+    activate(rowIndex) {
+        const row = this.rows()[rowIndex];
+        if (!row)
+            return;
+        if (row.kind === 'locate')
+            void this.useCurrentLocation();
+        else
+            this.pick(row.suggestion, 'search');
+    }
+    // --- keyboard ---------------------------------------------------------------
+    onKeydown(event) {
+        if (this.isDisabled())
+            return;
+        const count = this.rows().length;
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                event.preventDefault();
+                if (!this.panelShown()) {
+                    this.open.set(true);
+                    if (!this.panelShown())
+                        return;
+                }
+                if (!count)
+                    return;
+                const delta = event.key === 'ArrowDown' ? 1 : -1;
+                const from = this.highlighted();
+                const next = from < 0 ? (delta > 0 ? 0 : count - 1) : (from + delta + count) % count;
+                this.highlighted.set(next);
+                this.scrollHighlightedIntoView();
+                return;
+            }
+            case 'Enter':
+                if (!this.panelShown())
+                    return;
+                // Keep Enter from submitting a surrounding form while the rows are up.
+                event.preventDefault();
+                if (this.highlighted() >= 0)
+                    this.activate(this.highlighted());
+                return;
+            case 'Escape':
+                if (!this.inline() && this.open() && this.panelShown()) {
+                    event.preventDefault();
+                    event.stopPropagation(); // close the panel, not the drawer / dialog around it
+                    this.close();
+                }
+                else if (this.highlighted() >= 0) {
+                    this.highlighted.set(-1);
+                }
+                return;
+            case 'Tab':
+                this.close();
+                return;
+        }
+    }
+    scrollHighlightedIntoView() {
+        setTimeout(() => {
+            const root = this.panelEl ?? this.host.nativeElement;
+            root
+                .querySelector(`[data-index="${this.highlighted()}"]`)
+                ?.scrollIntoView?.({ block: 'nearest' });
+        });
+    }
+    // --- overlay ----------------------------------------------------------------
+    /** Close the overlay (a no-op `inline`, where the rows are always shown). */
+    close() {
+        this.open.set(false);
+        this.highlighted.set(-1);
+        this.detachPanel();
+    }
+    reflow = () => this.positionPanel();
+    listening = false;
+    syncPanel() {
+        if (this.inline() || !this.panelShown()) {
+            if (this.panelEl)
+                this.detachPanel();
+            return;
+        }
+        if (!this.panelEl) {
+            this.panelEl = this.host.nativeElement.querySelector('[data-sds-address-panel]');
+            if (!this.panelEl)
+                return;
+            document.body.appendChild(this.panelEl);
+            if (!this.listening) {
+                window.addEventListener('scroll', this.reflow, true);
+                window.addEventListener('resize', this.reflow);
+                this.listening = true;
+            }
+        }
+        this.positionPanel();
+    }
+    detachPanel() {
+        if (this.listening) {
+            window.removeEventListener('scroll', this.reflow, true);
+            window.removeEventListener('resize', this.reflow);
+            this.listening = false;
+        }
+        this.panelEl?.remove();
+        this.panelEl = null;
+    }
+    positionPanel() {
+        const fieldEl = this.fieldRef()?.nativeElement;
+        const panelEl = this.panelEl;
+        if (!fieldEl || !panelEl)
+            return;
+        const r = fieldEl.getBoundingClientRect();
+        const gap = 4;
+        const margin = 8;
+        panelEl.style.width = `${Math.round(r.width)}px`;
+        const ph = panelEl.offsetHeight || 240;
+        let top = r.bottom + gap;
+        if (top + ph > window.innerHeight - margin && r.top - gap - ph > margin) {
+            top = r.top - gap - ph;
+        }
+        panelEl.style.top = `${Math.round(top)}px`;
+        panelEl.style.left = `${Math.round(Math.max(margin, r.left))}px`;
+    }
+    onDocumentClick(event) {
+        if (this.inline() || !this.open())
+            return;
+        const target = event.target;
+        const inField = this.host.nativeElement.contains(target);
+        const inPanel = !!this.panelEl && this.panelEl.contains(target);
+        if (!inField && !inPanel)
+            this.close();
+    }
+    ngOnDestroy() {
+        this.destroyed = true;
+        clearTimeout(this.timer);
+        this.detachPanel();
+    }
+    // --- ControlValueAccessor -----------------------------------------------------
+    onChange = () => { };
+    onTouched = () => { };
+    /** A written value is display text only: it never runs a search. */
+    writeValue(value) {
+        this.value.set(value ?? '');
+        this.resetSearch();
+    }
+    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: SdsAddressAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsAddressAutocomplete, isStandalone: true, selector: "sds-address-autocomplete", inputs: { search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: true, transformFunction: null }, locate: { classPropertyName: "locate", publicName: "locate", 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 }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, extraPosition: { classPropertyName: "extraPosition", publicName: "extraPosition", isSignal: true, isRequired: false, transformFunction: null }, showNoResults: { classPropertyName: "showNoResults", publicName: "showNoResults", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", 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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, useLocationText: { classPropertyName: "useLocationText", publicName: "useLocationText", isSignal: true, isRequired: false, transformFunction: null }, locatingText: { classPropertyName: "locatingText", publicName: "locatingText", isSignal: true, isRequired: false, transformFunction: null }, locateFailedText: { classPropertyName: "locateFailedText", publicName: "locateFailedText", isSignal: true, isRequired: false, transformFunction: null }, searchingText: { classPropertyName: "searchingText", publicName: "searchingText", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, searchErrorText: { classPropertyName: "searchErrorText", publicName: "searchErrorText", isSignal: true, isRequired: false, transformFunction: null }, resultsLabel: { classPropertyName: "resultsLabel", publicName: "resultsLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SdsAddressAutocomplete),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "extraTpl", first: true, predicate: SdsAddressExtra, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (label()) {
+      <label [for]="fieldId()" class="mb-1.5 block text-sm font-medium text-ink">
+        {{ label() }}
+        @if (required()) {
+          <span class="ml-0.5 text-danger" aria-hidden="true">*</span>
+        }
+      </label>
+    }
+
+    <div
+      #field
+      class="relative flex items-center border transition-colors"
+      [class]="wrapperClasses()"
+    >
+      @if (leadingIcon()) {
+        <sds-icon
+          [name]="leadingIcon()!"
+          [size]="18"
+          class="pointer-events-none absolute opacity-70"
+          [class]="pill() ? 'left-4' : 'left-3'"
+        />
+      }
+      <input
+        #inputEl
+        [id]="fieldId()"
+        type="text"
+        role="combobox"
+        autocomplete="off"
+        spellcheck="false"
+        aria-autocomplete="list"
+        [attr.aria-expanded]="panelShown()"
+        [attr.aria-controls]="controlsIds()"
+        [attr.aria-activedescendant]="activeDescId()"
+        [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+        [attr.aria-invalid]="error() || invalid() ? 'true' : null"
+        [attr.aria-required]="required() ? 'true' : null"
+        [attr.aria-describedby]="describedBy()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [value]="value()"
+        class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        [class]="fieldPadding()"
+        (input)="onInput($event)"
+        (focus)="onFocus()"
+        (click)="onFocus()"
+        (blur)="onTouched()"
+        (keydown)="onKeydown($event)"
+      />
+      @if (clearable() && value() && !isDisabled()) {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="clearLabel()"
+          class="absolute right-2.5 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-60 hover:bg-black/5 hover:opacity-100"
+          (click)="clear()"
+        >
+          <sds-icon name="x" [size]="15" />
+        </button>
+      } @else if (loading()) {
+        <sds-icon
+          name="loader-circle"
+          [size]="16"
+          class="pointer-events-none absolute right-3 animate-spin opacity-60"
+        />
+      }
+    </div>
+
+    @if (error()) {
+      <p [id]="fieldId() + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="fieldId() + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+
+    @if (inline()) {
+      <div class="mt-2" data-sds-address-panel-inline>
+        <ng-container [ngTemplateOutlet]="panelBody" />
+      </div>
+    } @else if (panelShown()) {
+      <!-- Appended to document.body on open (see syncPanel). -->
+      <div
+        data-sds-address-panel
+        class="fixed z-[1000] max-h-80 overflow-auto rounded-card border border-border bg-surface p-1 shadow-lg"
+      >
+        <ng-container [ngTemplateOutlet]="panelBody" />
+      </div>
+    }
+
+    <ng-template #panelBody>
+      @if (showLocate()) {
+        <ul [id]="locateListId" role="listbox" [attr.aria-label]="listLabel()">
+          <li
+            [id]="optionId(0)"
+            role="option"
+            data-index="0"
+            data-sds-address-locate
+            [attr.aria-selected]="highlighted() === 0"
+            [attr.aria-disabled]="locating() ? 'true' : null"
+            [attr.aria-busy]="locating() ? 'true' : null"
+            class="flex items-center gap-3 rounded-control px-3 py-2.5"
+            [class]="rowClass(0, locating())"
+            (mousedown)="$event.preventDefault()"
+            (click)="useCurrentLocation()"
+            (mouseenter)="highlighted.set(0)"
+          >
+            <span
+              class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-ink"
+            >
+              @if (locating()) {
+                <sds-icon name="loader-circle" [size]="18" class="animate-spin" />
+              } @else {
+                <sds-icon name="locate-fixed" [size]="18" />
+              }
+            </span>
+            <span class="min-w-0 flex-1 truncate font-semibold text-ink">
+              {{ locating() ? locatingText() : useLocationText() }}
+            </span>
+          </li>
+        </ul>
+        @if (locateFailed()) {
+          <p
+            data-sds-address-locate-failed
+            role="alert"
+            class="mx-1 mb-1 mt-0.5 flex items-center gap-2 rounded-control bg-accent-red-soft px-3 py-2.5 text-sm text-accent-red"
+          >
+            <sds-icon name="locate-off" [size]="16" class="shrink-0" />{{ locateFailedText() }}
+          </p>
+        }
+      }
+
+      @if (extraTpl() && extraPosition() === 'above-results') {
+        <ng-container
+          [ngTemplateOutlet]="extraTpl()!.template"
+          [ngTemplateOutletContext]="extraContext()"
+        />
+      }
+
+      @if (isSearching()) {
+        @if (suggestions().length) {
+          @if (resultsLabel()) {
+            <div
+              class="px-3 pb-1 pt-1.5 text-xs font-semibold uppercase tracking-wide text-ink-soft"
+            >
+              {{ resultsLabel() }}
+            </div>
+          }
+          <ul [id]="listId" role="listbox" [attr.aria-label]="listLabel()">
+            @for (row of suggestionRows(); track $index) {
+              <li
+                [id]="optionId(row.rowIndex)"
+                role="option"
+                data-sds-address-suggestion
+                [attr.data-index]="row.rowIndex"
+                [attr.aria-selected]="highlighted() === row.rowIndex"
+                class="flex items-center gap-3 rounded-control px-3 py-2.5"
+                [class]="rowClass(row.rowIndex, false)"
+                (mousedown)="$event.preventDefault()"
+                (click)="pick(row.suggestion, 'search')"
+                (mouseenter)="highlighted.set(row.rowIndex)"
+              >
+                <span
+                  class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-ink"
+                >
+                  <sds-icon name="map-pin" [size]="18" />
+                </span>
+                <span class="min-w-0 flex-1">
+                  <span class="block truncate font-semibold text-ink">{{
+                    primaryLine(row.suggestion)
+                  }}</span>
+                  @if (secondaryLine(row.suggestion); as second) {
+                    <span class="block truncate text-xs text-ink-soft">{{ second }}</span>
+                  }
+                </span>
+              </li>
+            }
+          </ul>
+        } @else if (loading()) {
+          <p
+            role="status"
+            data-sds-address-loading
+            class="flex items-center justify-center gap-2 py-6 text-sm text-ink-soft"
+          >
+            <sds-icon name="loader-circle" [size]="16" class="animate-spin" />{{ searchingText() }}
+          </p>
+        } @else if (failed()) {
+          <p
+            role="alert"
+            data-sds-address-error
+            class="mx-1 my-1 flex items-center gap-2 rounded-control bg-accent-red-soft px-3 py-2.5 text-sm text-accent-red"
+          >
+            <sds-icon name="alert-circle" [size]="16" class="shrink-0" />{{ searchErrorText() }}
+          </p>
+        } @else if (showNoResults()) {
+          <p role="status" data-sds-address-empty class="py-6 text-center text-sm text-ink-soft">
+            {{ noResultsText() }}
+          </p>
+        }
+      }
+
+      @if (extraTpl() && extraPosition() === 'below') {
+        <ng-container
+          [ngTemplateOutlet]="extraTpl()!.template"
+          [ngTemplateOutletContext]="extraContext()"
+        />
+      }
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }, { 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: SdsAddressAutocomplete, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-address-autocomplete',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon, NgTemplateOutlet],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SdsAddressAutocomplete),
+                            multi: true,
+                        },
+                    ],
+                    host: {
+                        class: 'block',
+                        '(document:click)': 'onDocumentClick($event)',
+                    },
+                    template: `
+    @if (label()) {
+      <label [for]="fieldId()" class="mb-1.5 block text-sm font-medium text-ink">
+        {{ label() }}
+        @if (required()) {
+          <span class="ml-0.5 text-danger" aria-hidden="true">*</span>
+        }
+      </label>
+    }
+
+    <div
+      #field
+      class="relative flex items-center border transition-colors"
+      [class]="wrapperClasses()"
+    >
+      @if (leadingIcon()) {
+        <sds-icon
+          [name]="leadingIcon()!"
+          [size]="18"
+          class="pointer-events-none absolute opacity-70"
+          [class]="pill() ? 'left-4' : 'left-3'"
+        />
+      }
+      <input
+        #inputEl
+        [id]="fieldId()"
+        type="text"
+        role="combobox"
+        autocomplete="off"
+        spellcheck="false"
+        aria-autocomplete="list"
+        [attr.aria-expanded]="panelShown()"
+        [attr.aria-controls]="controlsIds()"
+        [attr.aria-activedescendant]="activeDescId()"
+        [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
+        [attr.aria-invalid]="error() || invalid() ? 'true' : null"
+        [attr.aria-required]="required() ? 'true' : null"
+        [attr.aria-describedby]="describedBy()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [value]="value()"
+        class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        [class]="fieldPadding()"
+        (input)="onInput($event)"
+        (focus)="onFocus()"
+        (click)="onFocus()"
+        (blur)="onTouched()"
+        (keydown)="onKeydown($event)"
+      />
+      @if (clearable() && value() && !isDisabled()) {
+        <button
+          type="button"
+          tabindex="-1"
+          [attr.aria-label]="clearLabel()"
+          class="absolute right-2.5 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-60 hover:bg-black/5 hover:opacity-100"
+          (click)="clear()"
+        >
+          <sds-icon name="x" [size]="15" />
+        </button>
+      } @else if (loading()) {
+        <sds-icon
+          name="loader-circle"
+          [size]="16"
+          class="pointer-events-none absolute right-3 animate-spin opacity-60"
+        />
+      }
+    </div>
+
+    @if (error()) {
+      <p [id]="fieldId() + '-err'" class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
+    } @else if (hint()) {
+      <p [id]="fieldId() + '-hint'" class="mt-1.5 text-xs text-ink-faint">{{ hint() }}</p>
+    }
+
+    @if (inline()) {
+      <div class="mt-2" data-sds-address-panel-inline>
+        <ng-container [ngTemplateOutlet]="panelBody" />
+      </div>
+    } @else if (panelShown()) {
+      <!-- Appended to document.body on open (see syncPanel). -->
+      <div
+        data-sds-address-panel
+        class="fixed z-[1000] max-h-80 overflow-auto rounded-card border border-border bg-surface p-1 shadow-lg"
+      >
+        <ng-container [ngTemplateOutlet]="panelBody" />
+      </div>
+    }
+
+    <ng-template #panelBody>
+      @if (showLocate()) {
+        <ul [id]="locateListId" role="listbox" [attr.aria-label]="listLabel()">
+          <li
+            [id]="optionId(0)"
+            role="option"
+            data-index="0"
+            data-sds-address-locate
+            [attr.aria-selected]="highlighted() === 0"
+            [attr.aria-disabled]="locating() ? 'true' : null"
+            [attr.aria-busy]="locating() ? 'true' : null"
+            class="flex items-center gap-3 rounded-control px-3 py-2.5"
+            [class]="rowClass(0, locating())"
+            (mousedown)="$event.preventDefault()"
+            (click)="useCurrentLocation()"
+            (mouseenter)="highlighted.set(0)"
+          >
+            <span
+              class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-ink"
+            >
+              @if (locating()) {
+                <sds-icon name="loader-circle" [size]="18" class="animate-spin" />
+              } @else {
+                <sds-icon name="locate-fixed" [size]="18" />
+              }
+            </span>
+            <span class="min-w-0 flex-1 truncate font-semibold text-ink">
+              {{ locating() ? locatingText() : useLocationText() }}
+            </span>
+          </li>
+        </ul>
+        @if (locateFailed()) {
+          <p
+            data-sds-address-locate-failed
+            role="alert"
+            class="mx-1 mb-1 mt-0.5 flex items-center gap-2 rounded-control bg-accent-red-soft px-3 py-2.5 text-sm text-accent-red"
+          >
+            <sds-icon name="locate-off" [size]="16" class="shrink-0" />{{ locateFailedText() }}
+          </p>
+        }
+      }
+
+      @if (extraTpl() && extraPosition() === 'above-results') {
+        <ng-container
+          [ngTemplateOutlet]="extraTpl()!.template"
+          [ngTemplateOutletContext]="extraContext()"
+        />
+      }
+
+      @if (isSearching()) {
+        @if (suggestions().length) {
+          @if (resultsLabel()) {
+            <div
+              class="px-3 pb-1 pt-1.5 text-xs font-semibold uppercase tracking-wide text-ink-soft"
+            >
+              {{ resultsLabel() }}
+            </div>
+          }
+          <ul [id]="listId" role="listbox" [attr.aria-label]="listLabel()">
+            @for (row of suggestionRows(); track $index) {
+              <li
+                [id]="optionId(row.rowIndex)"
+                role="option"
+                data-sds-address-suggestion
+                [attr.data-index]="row.rowIndex"
+                [attr.aria-selected]="highlighted() === row.rowIndex"
+                class="flex items-center gap-3 rounded-control px-3 py-2.5"
+                [class]="rowClass(row.rowIndex, false)"
+                (mousedown)="$event.preventDefault()"
+                (click)="pick(row.suggestion, 'search')"
+                (mouseenter)="highlighted.set(row.rowIndex)"
+              >
+                <span
+                  class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-ink"
+                >
+                  <sds-icon name="map-pin" [size]="18" />
+                </span>
+                <span class="min-w-0 flex-1">
+                  <span class="block truncate font-semibold text-ink">{{
+                    primaryLine(row.suggestion)
+                  }}</span>
+                  @if (secondaryLine(row.suggestion); as second) {
+                    <span class="block truncate text-xs text-ink-soft">{{ second }}</span>
+                  }
+                </span>
+              </li>
+            }
+          </ul>
+        } @else if (loading()) {
+          <p
+            role="status"
+            data-sds-address-loading
+            class="flex items-center justify-center gap-2 py-6 text-sm text-ink-soft"
+          >
+            <sds-icon name="loader-circle" [size]="16" class="animate-spin" />{{ searchingText() }}
+          </p>
+        } @else if (failed()) {
+          <p
+            role="alert"
+            data-sds-address-error
+            class="mx-1 my-1 flex items-center gap-2 rounded-control bg-accent-red-soft px-3 py-2.5 text-sm text-accent-red"
+          >
+            <sds-icon name="alert-circle" [size]="16" class="shrink-0" />{{ searchErrorText() }}
+          </p>
+        } @else if (showNoResults()) {
+          <p role="status" data-sds-address-empty class="py-6 text-center text-sm text-ink-soft">
+            {{ noResultsText() }}
+          </p>
+        }
+      }
+
+      @if (extraTpl() && extraPosition() === 'below') {
+        <ng-container
+          [ngTemplateOutlet]="extraTpl()!.template"
+          [ngTemplateOutletContext]="extraContext()"
+        />
+      }
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: true }] }], locate: [{ type: i0.Input, args: [{ isSignal: true, alias: "locate", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], extraPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraPosition", required: false }] }], showNoResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNoResults", required: false }] }], 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", 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 }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], useLocationText: [{ type: i0.Input, args: [{ isSignal: true, alias: "useLocationText", required: false }] }], locatingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "locatingText", required: false }] }], locateFailedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "locateFailedText", required: false }] }], searchingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchingText", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], searchErrorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchErrorText", required: false }] }], resultsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resultsLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], extraTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsAddressExtra), { isSignal: true }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
+
+const SIZES$1 = {
+    sm: 'h-8 min-w-8 text-xs',
+    md: 'h-9 min-w-9 text-sm',
+    lg: 'h-11 min-w-11 text-base',
+};
+const ICON_SIZES = { sm: 15, md: 16, lg: 18 };
+const BTN_BASE = 'inline-flex items-center justify-center rounded-control px-1.5 font-medium ' +
+    'transition-colors select-none focus-visible:outline-none focus-visible:ring-2 ' +
+    'focus-visible:ring-brand-500 focus-visible:ring-offset-1';
+/**
+ * Pagination control (mirrors PrimeNG's paginator). Drives a sliding window of
+ * page links with first/prev/next/last navigation, an optional rows-per-page
+ * dropdown (reuses <sds-select>), a current-page report and a jump-to-page input.
+ *
+ * State is exposed as two-way models: [first] (zero-based index of the first
+ * record on the page) and [rows] (page size). A combined (pageChange) event
+ * carries the full {@link SdsPaginatorState} on every change.
+ *
+ * @example
+ * <sds-paginator
+ *   [totalRecords]="120"
+ *   [(first)]="first"
+ *   [(rows)]="rows"
+ *   [rowsPerPageOptions]="[10, 20, 50]"
+ *   showCurrentPageReport
+ *   (pageChange)="load($event)"
+ * />
+ */
+class SdsPaginator {
+    /** Total number of records to paginate. */
+    totalRecords = input(0, ...(ngDevMode ? [{ debugName: "totalRecords", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /** Zero-based index of the first record on the current page (two-way). */
+    first = model(0, ...(ngDevMode ? [{ debugName: "first" }] : []));
+    /** Rows displayed per page (two-way). */
+    rows = model(10, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    /** When non-empty, renders a rows-per-page dropdown with these choices. */
+    rowsPerPageOptions = input([], ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : []));
+    /** Maximum count of numbered page links shown in the sliding window. */
+    pageLinkSize = input(5, ...(ngDevMode ? [{ debugName: "pageLinkSize", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    showFirstLastIcon = input(true, ...(ngDevMode ? [{ debugName: "showFirstLastIcon", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    showPageLinks = input(true, ...(ngDevMode ? [{ debugName: "showPageLinks", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    showCurrentPageReport = input(false, ...(ngDevMode ? [{ debugName: "showCurrentPageReport", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Tokens: {first} {last} {totalRecords} {currentPage} {totalPages} {rows}. */
+    currentPageReportTemplate = input('{first} – {last} of {totalRecords}', ...(ngDevMode ? [{ debugName: "currentPageReportTemplate" }] : []));
+    showJumpToPageInput = input(false, ...(ngDevMode ? [{ debugName: "showJumpToPageInput", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    rowsPerPageLabel = input('Rows per page', ...(ngDevMode ? [{ debugName: "rowsPerPageLabel" }] : []));
+    jumpToPageLabel = input('Go to', ...(ngDevMode ? [{ debugName: "jumpToPageLabel" }] : []));
+    /**
+     * Accessible name for the <nav> wrapping the page controls, and for the four icon-only
+     * first/prev/next/last buttons. Those buttons have no text, so these strings are their ONLY
+     * accessible names — the English defaults suit an English-first app, but an app serving more than
+     * one language MUST pass translated values.
+     */
+    paginationLabel = input('Pagination', ...(ngDevMode ? [{ debugName: "paginationLabel" }] : []));
+    firstPageLabel = input('First page', ...(ngDevMode ? [{ debugName: "firstPageLabel" }] : []));
+    previousPageLabel = input('Previous page', ...(ngDevMode ? [{ debugName: "previousPageLabel" }] : []));
+    nextPageLabel = input('Next page', ...(ngDevMode ? [{ debugName: "nextPageLabel" }] : []));
+    lastPageLabel = input('Last page', ...(ngDevMode ? [{ debugName: "lastPageLabel" }] : []));
+    /**
+     * Accessible name of a numbered page link. `{page}` is replaced with the 1-based page number —
+     * a token rather than a prefix because word order is not the same in every language.
+     */
+    pageLinkLabel = input('Page {page}', ...(ngDevMode ? [{ debugName: "pageLinkLabel" }] : []));
+    /**
+     * Accessible name of the jump-to-page field. Separate from the visible {@link jumpToPageLabel}
+     * ("Go to") on purpose: the visible text is terse because it sits next to the field, while the
+     * accessible name has to stand alone.
+     */
+    jumpToPageAriaLabel = input('Go to page', ...(ngDevMode ? [{ debugName: "jumpToPageAriaLabel" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Fires after any page or page-size change with the full paginator state. */
+    pageChange = output();
+    pageCount = computed(() => Math.max(1, Math.ceil(this.totalRecords() / Math.max(1, this.rows()))), ...(ngDevMode ? [{ debugName: "pageCount" }] : []));
+    page = computed(() => Math.min(this.pageCount() - 1, Math.floor(this.first() / Math.max(1, this.rows()))), ...(ngDevMode ? [{ debugName: "page" }] : []));
+    firstDisabled = computed(() => this.disabled() || this.page() <= 0, ...(ngDevMode ? [{ debugName: "firstDisabled" }] : []));
+    lastDisabled = computed(() => this.disabled() || this.page() >= this.pageCount() - 1, ...(ngDevMode ? [{ debugName: "lastDisabled" }] : []));
+    iconSize = computed(() => ICON_SIZES[this.size()], ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    // Sliding window of zero-based page indices, centred on the current page.
+    pageLinks = computed(() => {
+        const pages = this.pageCount();
+        const visible = Math.min(this.pageLinkSize(), pages);
+        let start = Math.max(0, Math.ceil(this.page() - visible / 2));
+        const end = Math.min(pages - 1, start + visible - 1);
+        start = Math.max(0, start - (visible - (end - start + 1)));
+        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    }, ...(ngDevMode ? [{ debugName: "pageLinks" }] : []));
+    reportText = computed(() => {
+        const total = this.totalRecords();
+        const first = total === 0 ? 0 : this.first() + 1;
+        const last = Math.min(this.first() + this.rows(), total);
+        return this.currentPageReportTemplate()
+            .replace('{first}', String(first))
+            .replace('{last}', String(last))
+            .replace('{totalRecords}', String(total))
+            .replace('{currentPage}', String(this.page() + 1))
+            .replace('{totalPages}', String(this.pageCount()))
+            .replace('{rows}', String(this.rows()));
+    }, ...(ngDevMode ? [{ debugName: "reportText" }] : []));
+    hostClass = computed(() => {
+        const base = 'flex flex-wrap items-center gap-x-4 gap-y-3';
+        const justify = this.showCurrentPageReport() ? 'justify-between' : 'justify-center';
+        return `${base} ${justify}`;
+    }, ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
+    pageLinkAriaLabel(page) {
+        return this.pageLinkLabel().replace('{page}', String(page + 1));
+    }
+    navClass(isDisabled) {
+        const cls = `${BTN_BASE} ${SIZES$1[this.size()]} px-0`;
+        return isDisabled
+            ? `${cls} text-ink-faint opacity-50 cursor-not-allowed`
+            : `${cls} text-ink-soft hover:bg-muted cursor-pointer`;
+    }
+    linkClass(active) {
+        const cls = `${BTN_BASE} ${SIZES$1[this.size()]}`;
+        if (this.disabled())
+            return `${cls} text-ink-faint opacity-50 cursor-not-allowed`;
+        return active
+            ? `${cls} bg-brand-600 text-white hover:bg-brand-700 ${DARK_BRAND_FILL_HOVER} cursor-pointer`
+            : `${cls} text-ink-soft hover:bg-muted cursor-pointer`;
+    }
+    firstPage() {
+        this.changePage(0);
     }
     prevPage() {
         this.changePage(this.page() - 1);
@@ -14877,7 +15837,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }] } });
 
-const STORAGE_KEY = 'sds-theme';
+/** The localStorage key the mode is persisted under. Also read by the pre-paint boot script (see README). */
+const SDS_THEME_STORAGE_KEY = 'sds-theme';
+/** `true` for the three values {@link SdsThemeMode} accepts — for validating stored or URL-supplied input. */
+function isSdsThemeMode(value) {
+    return value === 'system' || value === 'light' || value === 'dark';
+}
 /**
  * Light/dark theme state for the whole app. It owns exactly one thing: the presence of the `.dark`
  * class on the document root, which flips every design token defined under `.dark` in the theme CSS
@@ -14888,53 +15853,80 @@ const STORAGE_KEY = 'sds-theme';
  *
  * ```ts
  * private readonly theme = inject(SdsThemeService);
- * this.theme.toggle();            // flip
+ * this.theme.toggle();            // flip (to an explicit light/dark)
+ * this.theme.setMode('system');   // follow the OS again
  * this.theme.isDark();            // read (a signal)
+ * this.theme.mode();              // 'system' | 'light' | 'dark'
  * ```
  *
- * Initial value: a previously stored choice wins; otherwise the OS `prefers-color-scheme` is honoured,
- * so a first-time visitor already in dark at the OS level lands in dark. The choice is persisted to
- * `localStorage` and re-applied on the next visit. Every browser access is guarded, so the service is
- * safe under SSR / prerender (it simply no-ops without a DOM).
+ * Two layers: {@link mode} is the choice (persisted to `localStorage` under `sds-theme`), {@link theme} is
+ * what that resolves to. With no stored choice the mode is `system`, which tracks the OS setting live —
+ * a first-time visitor in dark at the OS level lands in dark, and follows the OS if it flips. Every
+ * browser access is guarded, so the service is safe under SSR / prerender (it simply no-ops without a DOM).
  */
 class SdsThemeService {
     document = inject(DOCUMENT);
-    theme = signal(this.initialTheme(), ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    /** The person's choice. */
+    mode = signal(this.initialMode(), ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** The OS preference, kept live by a `matchMedia` listener. */
+    systemDark = signal(this.queryDark()?.matches ?? false, ...(ngDevMode ? [{ debugName: "systemDark" }] : []));
+    /** The theme painted: the explicit choice, or the OS one under `system`. */
+    theme = computed(() => {
+        const mode = this.mode();
+        return mode === 'system' ? (this.systemDark() ? 'dark' : 'light') : mode;
+    }, ...(ngDevMode ? [{ debugName: "theme" }] : []));
     isDark = computed(() => this.theme() === 'dark', ...(ngDevMode ? [{ debugName: "isDark" }] : []));
     constructor() {
-        // Keep the DOM class and the stored preference in lockstep with the signal — one effect, so any
-        // caller that sets the signal (toggle, setTheme, or a future settings screen) applies uniformly.
-        effect(() => this.apply(this.theme()));
+        // Keep the DOM class and the stored choice in lockstep with the signals — one effect, so any caller
+        // (toggle, setTheme, setMode, or the OS flipping under `system`) applies uniformly.
+        effect(() => this.apply(this.theme(), this.mode()));
+        const query = this.queryDark();
+        if (query) {
+            const onChange = (event) => this.systemDark.set(event.matches);
+            query.addEventListener?.('change', onChange);
+            inject(DestroyRef).onDestroy(() => query.removeEventListener?.('change', onChange));
+        }
     }
-    /** Flip between light and dark. */
+    /** Flip between light and dark (an explicit choice, leaving `system`). */
     toggle() {
-        this.theme.update((t) => (t === 'light' ? 'dark' : 'light'));
+        this.mode.set(this.theme() === 'light' ? 'dark' : 'light');
     }
     /** Set an explicit theme. */
     setTheme(theme) {
-        this.theme.set(theme);
+        this.mode.set(theme);
+    }
+    /** Set the choice, `system` included. */
+    setMode(mode) {
+        this.mode.set(mode);
     }
-    initialTheme() {
+    initialMode() {
         try {
-            const stored = this.readStorage()?.getItem(STORAGE_KEY);
-            if (stored === 'light' || stored === 'dark')
+            const stored = this.readStorage()?.getItem(SDS_THEME_STORAGE_KEY);
+            if (isSdsThemeMode(stored))
                 return stored;
-            const win = this.document.defaultView;
-            if (win?.matchMedia('(prefers-color-scheme: dark)').matches)
-                return 'dark';
         }
         catch {
-            /* no storage / no matchMedia (SSR, privacy mode) — fall through to the light default */
+            /* no storage (SSR, privacy mode) — fall through to following the OS */
+        }
+        return 'system';
+    }
+    queryDark() {
+        try {
+            return this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)') ?? null;
+        }
+        catch {
+            return null;
         }
-        return 'light';
     }
-    apply(theme) {
+    apply(theme, mode) {
         const root = this.document.documentElement;
         root.classList.toggle('dark', theme === 'dark');
         // Let the UA paint form controls / scrollbars to match.
         root.style.colorScheme = theme;
         try {
-            this.readStorage()?.setItem(STORAGE_KEY, theme);
+            // The CHOICE is stored, not the resolved theme — `system` must stay `system`, or the first visit
+            // would freeze whatever the OS happened to be set to.
+            this.readStorage()?.setItem(SDS_THEME_STORAGE_KEY, mode);
         }
         catch {
             /* storage unavailable — the class is still applied; only persistence is skipped */
@@ -15024,6 +16016,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], darkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkLabel", required: false }] }], lightLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lightLabel", required: false }] }] } });
 
+const SDS_UI_PREF_LANG_PARAM = 'lang';
+const SDS_UI_PREF_THEME_PARAM = 'theme';
+const ABSOLUTE = /^[a-z][a-z0-9+.-]*:/i;
+const PLACEHOLDER_ORIGIN = 'http://sds.invalid';
+/**
+ * `url` with `lang` / `theme` set on its query (overwriting any present), the fragment kept. Accepts an
+ * absolute URL or a root-relative path (returned root-relative). Invalid themes are dropped, not sent.
+ *
+ * ```ts
+ * appendUiPrefs('https://auth.example/continue#token=abc', { lang: 'fr', theme: 'dark' })
+ * // → 'https://auth.example/continue?lang=fr&theme=dark#token=abc'
+ * ```
+ */
+function appendUiPrefs(url, prefs) {
+    const absolute = ABSOLUTE.test(url);
+    let parsed;
+    try {
+        parsed = new URL(url, PLACEHOLDER_ORIGIN);
+    }
+    catch {
+        return url;
+    }
+    const lang = prefs.lang?.trim();
+    if (lang) {
+        parsed.searchParams.set(SDS_UI_PREF_LANG_PARAM, lang);
+    }
+    if (isSdsThemeMode(prefs.theme)) {
+        parsed.searchParams.set(SDS_UI_PREF_THEME_PARAM, prefs.theme);
+    }
+    return absolute ? parsed.toString() : parsed.pathname + parsed.search + parsed.hash;
+}
+/**
+ * The prefs carried by a query string (`location.search`), validated: `lang` only if it is one of
+ * `supportedLangs`, `theme` only if it is a {@link SdsThemeMode}. Anything else reads as absent.
+ */
+function readUiPrefs(search, supportedLangs) {
+    const params = new URLSearchParams(search);
+    const lang = params.get(SDS_UI_PREF_LANG_PARAM);
+    const theme = params.get(SDS_UI_PREF_THEME_PARAM);
+    return {
+        lang: lang && supportedLangs.includes(lang) ? lang : null,
+        theme: isSdsThemeMode(theme) ? theme : null,
+    };
+}
+/** `url` without the `lang` / `theme` params (everything else, fragment included, untouched). */
+function stripUiPrefs(url) {
+    const absolute = ABSOLUTE.test(url);
+    let parsed;
+    try {
+        parsed = new URL(url, PLACEHOLDER_ORIGIN);
+    }
+    catch {
+        return url;
+    }
+    if (!parsed.searchParams.has(SDS_UI_PREF_LANG_PARAM) &&
+        !parsed.searchParams.has(SDS_UI_PREF_THEME_PARAM)) {
+        return url;
+    }
+    parsed.searchParams.delete(SDS_UI_PREF_LANG_PARAM);
+    parsed.searchParams.delete(SDS_UI_PREF_THEME_PARAM);
+    return absolute ? parsed.toString() : parsed.pathname + parsed.search + parsed.hash;
+}
+
 /**
  * Shared collapse state for the sidebar and its nav items.
  *
@@ -17362,5 +18417,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_LABELS_EN, SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAllergenIcon, SdsAvatar, SdsBadge, SdsBulkBar, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsChecklistRow, SdsChip, SdsChipGroup, SdsDatePicker, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
+export { SDS_ALLERGENS, SDS_ALLERGEN_ICONS, SDS_ALLERGEN_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, SdsFileDrop, SdsIcon, SdsImageCropper, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenu, SdsMenuItem, SdsMenuTrigger, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsRadio, SdsScore, SdsSearchCommand, SdsSegmented, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsSortableHandle, SdsSortableItem, SdsSortableList, SdsStatusTile, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableEmpty, SdsTableHeader, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsTimeInput, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsTriStateChip, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, appendUiPrefs, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isSdsThemeMode, isoDay, pad2, readUiPrefs, sdsFileMatchesAccept, sdsFormatBytes, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth, stripUiPrefs };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map