@besaitech/ng-design-system 0.0.69 → 0.0.70

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

@@ -418,7 +418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: [".sds-spinner{width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:9999px;animation:sds-spin .6s linear infinite}@keyframes sds-spin{to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
-let nextId$p = 0;
+let nextId$q = 0;
 const SIZES$d = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
@@ -431,7 +431,7 @@ const SIZES$d = {
  * sidebar search field).
  */
 class SdsInput {
-    autoId = `sds-input-${nextId$p++}`;
+    autoId = `sds-input-${nextId$q++}`;
     /**
      * `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
@@ -791,7 +791,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$o = 0;
+let nextId$p = 0;
 const HEIGHTS = {
     sm: 'h-9',
     md: 'h-10',
@@ -819,7 +819,7 @@ const TEXT = {
  * with "." ("1.234" in nl-BE) stays a thousands separator.
  */
 class SdsInputNumber {
-    inputId = `sds-input-number-${nextId$o++}`;
+    inputId = `sds-input-number-${nextId$p++}`;
     fieldRef = viewChild('field', ...(ngDevMode ? [{ debugName: "fieldRef" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -1603,7 +1603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], buttonLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLayout", required: false }] }], incrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementIcon", required: false }] }], decrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementIcon", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }] } });
 
-let nextId$n = 0;
+let nextId$o = 0;
 const SIZES$c = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
@@ -1644,7 +1644,7 @@ function parseTime(value) {
  * <sds-time-input [ariaLabel]="'Closes at'" [ngModel]="end()" (ngModelChange)="end.set($event)" clearable />
  */
 class SdsTimeInput {
-    fieldId = `sds-time-input-${nextId$n++}`;
+    fieldId = `sds-time-input-${nextId$o++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name of the field when there is no visible [label]. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -2173,7 +2173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], withSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSeconds", required: false }] }], placeholderText: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderText", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], hoursEl: [{ type: i0.ViewChild, args: ['hoursEl', { isSignal: true }] }], minutesEl: [{ type: i0.ViewChild, args: ['minutesEl', { isSignal: true }] }] } });
 
-let nextId$m = 0;
+let nextId$n = 0;
 const SIZES$b = {
     sm: 'min-h-9 text-sm',
     md: 'min-h-10 text-sm',
@@ -2196,7 +2196,7 @@ const SIZES$b = {
  * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
  */
 class SdsLocalizedInput {
-    autoId = `sds-localized-input-${nextId$m++}`;
+    autoId = `sds-localized-input-${nextId$n++}`;
     /** The native field's id; a generated one when empty (set it to pair an external `<label for>`). */
     inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : []));
     /** The native field's id: {@link inputId} or the generated one. */
@@ -2556,7 +2556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], requiredLanguages: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLanguages", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], currentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLanguage", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], languageSwitcherLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageSwitcherLabel", required: false }] }], untranslatedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "untranslatedLabel", required: false }] }], requiredLanguageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredLanguageLabel", required: false }] }] } });
 
-let nextId$l = 0;
+let nextId$m = 0;
 const SIZES$a = {
     md: 'h-12 w-11 text-lg',
     lg: 'h-14 w-12 text-xl',
@@ -2573,7 +2573,7 @@ const SIZES$a = {
  * first box and have it land correctly.
  */
 class SdsOtpInput {
-    groupId = `sds-otp-${nextId$l++}`;
+    groupId = `sds-otp-${nextId$m++}`;
     /** How many boxes / characters the code has. */
     length = input(6, ...(ngDevMode ? [{ debugName: "length", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -2873,7 +2873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], cellLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellLabel", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], cells: [{ type: i0.ViewChildren, args: ['cell', { isSignal: true }] }] } });
 
-let nextId$k = 0;
+let nextId$l = 0;
 const SIZES$9 = {
     sm: 'text-sm px-3 py-2',
     md: 'text-sm px-3.5 py-2.5',
@@ -2885,7 +2885,7 @@ const SIZES$9 = {
  * [(ngModel)].
  */
 class SdsTextarea {
-    fieldId = `sds-textarea-${nextId$k++}`;
+    fieldId = `sds-textarea-${nextId$l++}`;
     field = viewChild('field', ...(ngDevMode ? [{ debugName: "field" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -3152,7 +3152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], countLimitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLimitLabel", required: false }] }], countLabelTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLabelTemplate", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }] } });
 
-let nextId$j = 0;
+let nextId$k = 0;
 const SIZES$8 = {
     sm: { track: 'h-5 w-9', knob: 'h-4 w-4', on: 'translate-x-4', icon: 11 },
     md: { track: 'h-6 w-11', knob: 'h-5 w-5', on: 'translate-x-5', icon: 13 },
@@ -3165,7 +3165,7 @@ const SIZES$8 = {
  * states.
  */
 class SdsToggleSwitch {
-    fieldId = `sds-toggle-switch-${nextId$j++}`;
+    fieldId = `sds-toggle-switch-${nextId$k++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -3412,7 +3412,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$i = 0;
+let nextId$j = 0;
 /**
  * Boolean checkbox. Implements ControlValueAccessor — use with reactive forms
  * or `[(ngModel)]`. Renders a styled box (brand-filled with a check when on)
@@ -3427,7 +3427,7 @@ let nextId$i = 0;
  * <sds-checkbox label="Auto-merge" [(ngModel)]="autoMerge" />
  */
 class SdsCheckbox {
-    id = `sds-checkbox-${nextId$i++}`;
+    id = `sds-checkbox-${nextId$j++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -3575,7 +3575,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$h = 0;
+let nextId$i = 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.
@@ -3601,7 +3601,7 @@ const groups = new Map();
  * <sds-radio name="size" value="large" label="Grand" [(ngModel)]="size" />
  */
 class SdsRadio {
-    id = `sds-radio-${nextId$h++}`;
+    id = `sds-radio-${nextId$i++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -4177,7 +4177,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$g = 0;
+let nextId$h = 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).
@@ -4197,7 +4197,7 @@ let nextId$g = 0;
  *                     containsLabel="Contains" mayContainLabel="May contain" noneLabel="Not present" />
  */
 class SdsTriStateChip {
-    chipId = `sds-tri-state-chip-${nextId$g++}`;
+    chipId = `sds-tri-state-chip-${nextId$h++}`;
     /** 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. */
@@ -4422,7 +4422,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$f = 0;
+let nextId$g = 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
@@ -4438,7 +4438,7 @@ let nextId$f = 0;
  */
 class SdsSegmented {
     host = inject(ElementRef);
-    baseId = `sds-segmented-${nextId$f++}`;
+    baseId = `sds-segmented-${nextId$g++}`;
     /** Options: `{ value, label, icon?, disabled? }` objects, or bare strings/numbers. */
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     /** Selected value. Two-way: `[(value)]`. */
@@ -4716,7 +4716,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$e = 0;
+let nextId$f = 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
@@ -4739,7 +4739,7 @@ let nextId$e = 0;
  */
 class SdsChipGroup {
     host = inject(ElementRef);
-    baseId = `sds-chip-group-${nextId$e++}`;
+    baseId = `sds-chip-group-${nextId$f++}`;
     /** 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)]`. */
@@ -5641,7 +5641,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$d = 0;
+let nextId$e = 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
@@ -5689,7 +5689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class SdsMenu {
     host = inject(ElementRef);
     injector = inject(Injector);
-    menuId = `sds-menu-${nextId$d++}`;
+    menuId = `sds-menu-${nextId$e++}`;
     triggerId = `${this.menuId}-trigger`;
     /** Actions and separators, in order. */
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
@@ -6285,7 +6285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     standalone: true,
                 }]
         }] });
-let nextId$c = 0;
+let nextId$d = 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). */
@@ -6354,7 +6354,7 @@ function moveItem(list, from, to) {
 class SdsSortableList {
     host = inject(ElementRef);
     injector = inject(Injector);
-    instructionsId = `sds-sortable-${nextId$c++}-help`;
+    instructionsId = `sds-sortable-${nextId$d++}-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). */
@@ -6946,7 +6946,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$b = 0;
+let nextId$c = 0;
 /** "1.5 MB" style size (decimal units, like file managers show them), for messages. */
 function sdsFormatBytes(bytes) {
     if (!Number.isFinite(bytes) || bytes < 0)
@@ -7003,7 +7003,7 @@ function sdsFileMatchesAccept(file, accept) {
  *                (files)="upload($event)" (rejected)="onRejected($event)" />
  */
 class SdsFileDrop {
-    zoneId = `sds-file-drop-${nextId$b++}`;
+    zoneId = `sds-file-drop-${nextId$c++}`;
     fileInput = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInput" }] : []));
     /** Accepted types, native `accept` syntax. Empty = anything. */
     accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : []));
@@ -7385,7 +7385,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$a = 0;
+let nextId$b = 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.
@@ -7403,7 +7403,7 @@ let nextId$a = 0;
  * <sds-button (click)="upload(await cropper.toBlob({ width: 1600 }))">Save</sds-button>
  */
 class SdsImageCropper {
-    helpId = `sds-image-cropper-${nextId$a++}-help`;
+    helpId = `sds-image-cropper-${nextId$b++}-help`;
     viewport = viewChild('viewport', ...(ngDevMode ? [{ debugName: "viewport" }] : []));
     /** Image to crop: a URL, or a Blob/File. */
     src = input(null, ...(ngDevMode ? [{ debugName: "src" }] : []));
@@ -8789,7 +8789,7 @@ const SIZES$7 = {
 class SdsDatePicker {
     host = inject(ElementRef);
     injector = inject(Injector);
-    fieldId = `sds-date-${nextId$9++}`;
+    fieldId = `sds-date-${nextId$a++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     placeholder = input('dd/mm/yyyy', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
@@ -9307,7 +9307,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$9 = 0;
+let nextId$a = 0;
 
 /** Same first and last day (time-of-day ignored). `null` only equals `null`. */
 function isSameRange(a, b) {
@@ -9912,7 +9912,7 @@ const SIZES$6 = {
 class SdsDateRangePicker {
     host = inject(ElementRef);
     injector = inject(Injector);
-    uid = nextId$8++;
+    uid = nextId$9++;
     fieldId = `sds-date-range-${this.uid}`;
     labelId = `${this.fieldId}-label`;
     valueId = `${this.fieldId}-value`;
@@ -10428,7 +10428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `,
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], maxDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDays", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], presetsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetsLabel", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], endLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabel", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], presetSelect: [{ type: i0.Output, args: ["presetSelect"] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsRangeCalendar), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
-let nextId$8 = 0;
+let nextId$9 = 0;
 
 /**
  * Supplies a custom template for each option row (and the selected value shown
@@ -10512,7 +10512,7 @@ const SIZES$5 = {
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
 };
-let nextId$7 = 0;
+let nextId$8 = 0;
 /**
  * Single-select dropdown. Options may be primitives or objects (configure via
  * [optionLabel]/[optionValue]/[optionDisabled]). The overlay is appended to
@@ -10546,7 +10546,7 @@ let nextId$7 = 0;
 class SdsSelect {
     host = inject(ElementRef);
     injector = inject(Injector);
-    selectId = `sds-select-${nextId$7++}`;
+    selectId = `sds-select-${nextId$8++}`;
     listId = `${this.selectId}-list`;
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
@@ -11256,7 +11256,7 @@ const SIZES$4 = {
     md: 'min-h-10 text-sm',
     lg: 'min-h-12 text-base',
 };
-let nextId$6 = 0;
+let nextId$7 = 0;
 /**
  * Multi-select dropdown (value is an array). Options may be primitives or
  * objects (configure via [optionLabel]/[optionValue]/[optionDisabled]). The
@@ -11289,7 +11289,7 @@ let nextId$6 = 0;
 class SdsMultiSelect {
     host = inject(ElementRef);
     injector = inject(Injector);
-    selectId = `sds-multiselect-${nextId$6++}`;
+    selectId = `sds-multiselect-${nextId$7++}`;
     listId = `${this.selectId}-list`;
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
@@ -12172,7 +12172,7 @@ const SIZES$3 = {
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
 };
-let nextId$5 = 0;
+let nextId$6 = 0;
 /**
  * International phone number input: a country selector (ISO chip + dial code)
  * with a searchable, body-appended dropdown, plus a formatted national-number
@@ -12187,7 +12187,7 @@ let nextId$5 = 0;
 class SdsPhoneInput {
     host = inject(ElementRef);
     injector = inject(Injector);
-    fieldId = `sds-phone-${nextId$5++}`;
+    fieldId = `sds-phone-${nextId$6++}`;
     listId = `${this.fieldId}-list`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
@@ -12945,7 +12945,7 @@ const SIZES$2 = {
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
 };
-let nextId$4 = 0;
+let nextId$5 = 0;
 /**
  * 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
@@ -12980,7 +12980,7 @@ let nextId$4 = 0;
  */
 class SdsAddressAutocomplete {
     host = inject(ElementRef);
-    autoId = `sds-address-${nextId$4++}`;
+    autoId = `sds-address-${nextId$5++}`;
     locateListId = `${this.autoId}-here`;
     listId = `${this.autoId}-list`;
     // --- providers ------------------------------------------------------------
@@ -14251,7 +14251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }, { type: i0.Output, args: ["firstChange"] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], pageLinkSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLinkSize", required: false }] }], showFirstLastIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastIcon", required: false }] }], showPageLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageLinks", required: false }] }], showCurrentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentPageReport", required: false }] }], currentPageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageReportTemplate", required: false }] }], showJumpToPageInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showJumpToPageInput", required: false }] }], rowsPerPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageLabel", required: false }] }], jumpToPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "jumpToPageLabel", required: false }] }], paginationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationLabel", required: false }] }], firstPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstPageLabel", required: false }] }], previousPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousPageLabel", required: false }] }], nextPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPageLabel", required: false }] }], lastPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastPageLabel", required: false }] }], pageLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLinkLabel", required: false }] }], jumpToPageAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "jumpToPageAriaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }] } });
 
-let nextId$3 = 0;
+let nextId$4 = 0;
 /**
  * Coordinates a single <sds-tabs> instance: holds the active value (shared from
  * the host's two-way model), tracks registered tabs for default selection and
@@ -14261,7 +14261,7 @@ let nextId$3 = 0;
  */
 class SdsTabsStore {
     /** Unique base id used to link tabs and panels via ARIA. */
-    id = `sds-tabs-${nextId$3++}`;
+    id = `sds-tabs-${nextId$4++}`;
     /** Whether the tab list scrolls horizontally (mirrors [scrollable]). */
     scrollable = signal(false, ...(ngDevMode ? [{ debugName: "scrollable" }] : []));
     /** Header style (mirrors [variant]). */
@@ -14877,7 +14877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
 
-let nextId$2 = 0;
+let nextId$3 = 0;
 /**
  * Coordinates a single <sds-accordion>: holds the open value(s) (shared from the
  * host's two-way model), the multiple-open flag, and generates the ARIA ids that
@@ -14887,7 +14887,7 @@ let nextId$2 = 0;
  */
 class SdsAccordionStore {
     /** Unique base id used to link headers and content regions via ARIA. */
-    id = `sds-accordion-${nextId$2++}`;
+    id = `sds-accordion-${nextId$3++}`;
     /** Whether more than one panel may be open at a time (mirrors [multiple]). */
     multiple = signal(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
     value;
@@ -15293,7 +15293,7 @@ const ALIGN = {
     center: 'text-center',
     right: 'text-right',
 };
-let nextId$1 = 0;
+let nextId$2 = 0;
 /**
  * Client-side data table mirroring PrimeNG's table, scoped to a strong local
  * feature set: sorting, pagination (reuses {@link SdsPaginator}), global filter,
@@ -15349,7 +15349,7 @@ let nextId$1 = 0;
  *           dataKey="id" editable [cellErrors]="errors()" (cellCommit)="apply($event)" />
  */
 class SdsTable {
-    tableId = `sds-table-${nextId$1++}`;
+    tableId = `sds-table-${nextId$2++}`;
     // --- inputs ---------------------------------------------------------------
     value = input([], ...(ngDevMode ? [{ debugName: "value" }] : []));
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
@@ -17612,6 +17612,8 @@ function stripUiPrefs(url) {
     return absolute ? parsed.toString() : parsed.pathname + parsed.search + parsed.hash;
 }
 
+/** The breakpoint below which the rail is the off-canvas drawer (Tailwind's `lg`). */
+const DRAWER_QUERY = '(max-width: 1023.98px)';
 /**
  * Shared collapse state for the sidebar and its nav items.
  *
@@ -17620,16 +17622,45 @@ function stripUiPrefs(url) {
  * multiple independent sidebars, provide it at a component level instead.
  */
 class SidebarStore {
-    /** Desktop rail state: collapsed to icon-only width (applies at ≥ lg). */
+    document = inject(DOCUMENT);
+    /**
+     * The person's desktop preference: icon-only rail. It is a PREFERENCE, not the rendered state — use
+     * {@link railCollapsed} to know whether the rail is actually icon-only right now.
+     */
     collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    /** True below `lg`, where the rail is the off-canvas drawer. */
+    belowLg = signal(false, ...(ngDevMode ? [{ debugName: "belowLg" }] : []));
+    /**
+     * Whether the rail is icon-only RIGHT NOW: the desktop collapse applies at ≥ lg only. The mobile drawer
+     * is always full width — reading `collapsed` there hid every collapsible group's pages behind a header
+     * that could no longer open them (collapse on desktop, then open the drawer on a narrow screen).
+     */
+    railCollapsed = computed(() => this.collapsed() && !this.belowLg(), ...(ngDevMode ? [{ debugName: "railCollapsed" }] : []));
     /**
      * The rail's paint, published by <sds-sidebar> so projected <sds-nav-item>/<sds-nav-group> pick the
      * matching state and hover colours (white-on-dark for `brand`, ink-and-brand for `surface`) without
      * every item taking an input. One rail, one appearance — set by the sidebar, read by its children.
      */
     appearance = signal('brand', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /** Accordion mode, published by <sds-sidebar [accordion]>: opening one group closes the others. */
+    accordion = signal(false, ...(ngDevMode ? [{ debugName: "accordion" }] : []));
+    /** The collapsible group most recently opened by hand (accordion mode closes the rest). */
+    openedGroup = signal(null, ...(ngDevMode ? [{ debugName: "openedGroup" }] : []));
     /** Mobile drawer state: whether the off-canvas sidebar is slid in (< lg). */
     mobileOpen = signal(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : []));
+    constructor() {
+        const mql = this.document.defaultView?.matchMedia?.(DRAWER_QUERY);
+        if (mql) {
+            this.belowLg.set(mql.matches);
+            mql.addEventListener('change', (e) => {
+                this.belowLg.set(e.matches);
+                // Growing past lg turns the drawer into the in-flow rail: a drawer left "open" would otherwise
+                // come back, scrim and all, the next time the window narrows.
+                if (!e.matches)
+                    this.mobileOpen.set(false);
+            });
+        }
+    }
     /** Toggle the desktop icon-rail. */
     toggle() {
         this.collapsed.update((v) => !v);
@@ -17655,7 +17686,7 @@ class SidebarStore {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SidebarStore, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Application top bar: a logo slot, the app name, and three slots the app fills.
@@ -18031,6 +18062,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], decorations: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorations", required: false }] }] } });
 
+const SDS_NAV_GROUP = new InjectionToken('SDS_NAV_GROUP');
+const SDS_SIDEBAR = new InjectionToken('SDS_SIDEBAR');
+
 /**
  * Collapsible navigation rail. Project <sds-nav-group>/<sds-nav-item> as the
  * default content, and pin a footer (e.g. search + version badge) via the
@@ -18043,11 +18077,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  *
  * Responsive: below `lg` it is a fixed off-canvas drawer opened by the top bar's hamburger; it is a
  * modal (scrim + trap), so while open Escape closes it, focus moves into it and is restored on close,
- * and Tab is kept inside. While closed it is `inert`, so its off-screen items are out of the tab order.
- * At `lg` and up it is the in-flow, collapsible rail.
+ * Tab is kept inside, the page behind stops scrolling, and a swipe to the left closes it. While closed
+ * it is `inert`, so its off-screen items are out of the tab order. The drawer is always full width —
+ * the desktop collapse preference never applies to it. At `lg` and up it is the in-flow, collapsible
+ * rail; collapsed to icons, its collapsible groups open as flyout panels and its items show tooltips.
+ *
+ * Project an `[sdsHeader]` element (typically the logo + app name) to brand the drawer's header row,
+ * and set `[accordion]` to keep a single collapsible group open at a time.
  *
  * @example
  * <sds-sidebar appearance="surface" decorations>
+ *   <img sdsHeader class="h-7 lg:hidden" src="/logo.svg" alt="Saitech" />
  *   <sds-nav-group label="Membres">
  *     <sds-nav-item icon="user-plus" label="Add a member" link="/members/new" />
  *   </sds-nav-group>
@@ -18060,18 +18100,27 @@ class SdsSidebar {
     drawer = viewChild('drawer', ...(ngDevMode ? [{ debugName: "drawer" }] : []));
     closeBtn = viewChild('closeBtn', ...(ngDevMode ? [{ debugName: "closeBtn" }] : []));
     /** True below the `lg` breakpoint — where the rail is the off-canvas modal drawer. */
-    belowLg = signal(false, ...(ngDevMode ? [{ debugName: "belowLg" }] : []));
+    belowLg = this.store.belowLg;
     /** The element focused before the drawer opened, restored to it on close. */
     restoreFocusTo = null;
+    /** Live horizontal offset while a swipe drags the drawer closed (≤ 0). */
+    dragX = signal(0, ...(ngDevMode ? [{ debugName: "dragX" }] : []));
+    touch = null;
     constructor() {
-        // Publish the rail's paint so projected nav items match it.
+        // Publish the rail's paint (and accordion mode) so projected nav groups/items match it.
         effect(() => this.store.appearance.set(this.appearance()));
-        const view = this.document.defaultView;
-        const mql = view?.matchMedia('(max-width: 1023.98px)');
-        if (mql) {
-            this.belowLg.set(mql.matches);
-            mql.addEventListener('change', (e) => this.belowLg.set(e.matches));
-        }
+        effect(() => this.store.accordion.set(this.accordion()));
+        // The page behind an open drawer must not scroll under the person's thumb.
+        const body = this.document.body;
+        effect(() => {
+            const lock = this.belowLg() && this.mobileOpen();
+            if (body)
+                body.style.overflow = lock ? 'hidden' : '';
+        });
+        inject(DestroyRef).onDestroy(() => {
+            if (body)
+                body.style.overflow = '';
+        });
         // Modal focus handling for the mobile drawer: on open, remember what was focused (the hamburger) and
         // move focus to the close button; on close, restore it. A no-op at ≥ lg, where the rail is not modal.
         effect(() => {
@@ -18095,11 +18144,16 @@ class SdsSidebar {
     collapseLabel = input('Collapse menu', ...(ngDevMode ? [{ debugName: "collapseLabel" }] : []));
     expandLabel = input('Expand menu', ...(ngDevMode ? [{ debugName: "expandLabel" }] : []));
     closeLabel = input('Close menu', ...(ngDevMode ? [{ debugName: "closeLabel" }] : []));
+    /** Accessible name of the navigation landmark (e.g. "Main navigation"). */
+    navLabel = input('', ...(ngDevMode ? [{ debugName: "navLabel" }] : []));
     /** `brand` (default) is the dark rail; `surface` is a light rail with brand accents. */
     appearance = input('brand', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /** Keep a single collapsible group open: opening one folds the others. */
+    accordion = input(false, ...(ngDevMode ? [{ debugName: "accordion", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Add slow-drifting brand-tinted blobs behind the rail (opt-in). */
     decorations = input(false, ...(ngDevMode ? [{ debugName: "decorations", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    collapsed = this.store.collapsed;
+    /** Icon-only right now (desktop preference, never in the mobile drawer). */
+    railCollapsed = this.store.railCollapsed;
     mobileOpen = this.store.mobileOpen;
     asideClass = computed(() => {
         // The rail must stay OPAQUE: as a mobile drawer it slides over page content, so a translucent stop
@@ -18116,9 +18170,45 @@ class SdsSidebar {
         ? 'text-ink-soft hover:bg-muted hover:text-ink focus-visible:ring-brand-500/40'
         : 'text-white/70 hover:bg-white/10 hover:text-white focus-visible:ring-white/40', ...(ngDevMode ? [{ debugName: "railBtnClass" }] : []));
     /** Desktop rail width (full vs. collapsed); mobile always uses full width. */
-    railWidth = computed(() => this.collapsed()
+    railWidth = computed(() => this.railCollapsed()
         ? 'var(--sds-sidebar-w-collapsed)'
         : 'var(--sds-sidebar-w)', ...(ngDevMode ? [{ debugName: "railWidth" }] : []));
+    // --- Swipe to close (mobile drawer) ------------------------------------------------------------
+    // The drawer follows the thumb once the gesture is clearly horizontal and leftward; released past a
+    // fifth of its width (or 72 px) it closes, otherwise it springs back. Vertical swipes scroll the nav.
+    onTouchStart(event) {
+        if (!this.belowLg() || !this.mobileOpen() || event.touches.length !== 1)
+            return;
+        const t = event.touches[0];
+        this.touch = { x: t.clientX, y: t.clientY, dragging: false };
+    }
+    onTouchMove(event) {
+        if (!this.touch)
+            return;
+        const t = event.touches[0];
+        const dx = t.clientX - this.touch.x;
+        const dy = t.clientY - this.touch.y;
+        if (!this.touch.dragging) {
+            if (Math.abs(dx) < 10 && Math.abs(dy) < 10)
+                return;
+            if (dx >= 0 || Math.abs(dy) > Math.abs(dx)) {
+                this.touch = null; // a scroll, or a swipe the wrong way
+                return;
+            }
+            this.touch.dragging = true;
+        }
+        this.dragX.set(Math.min(0, dx));
+    }
+    onTouchEnd() {
+        if (!this.touch)
+            return;
+        const width = this.drawer()?.nativeElement.offsetWidth ?? 280;
+        const dx = this.dragX();
+        this.touch = null;
+        this.dragX.set(0);
+        if (dx < -Math.min(72, width / 5))
+            this.store.closeMobile();
+    }
     onEscape() {
         if (this.mobileOpen())
             this.store.closeMobile();
@@ -18150,11 +18240,11 @@ class SdsSidebar {
         return Array.from(root.querySelectorAll(sel)).filter((el) => el.offsetParent !== null || el === this.document.activeElement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSidebar, isStandalone: true, selector: "sds-sidebar", inputs: { collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, decorations: { classPropertyName: "decorations", publicName: "decorations", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "block h-full" }, viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true, isSignal: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSidebar, isStandalone: true, selector: "sds-sidebar", inputs: { collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, navLabel: { classPropertyName: "navLabel", publicName: "navLabel", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null }, decorations: { classPropertyName: "decorations", publicName: "decorations", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "block h-full" }, providers: [{ provide: SDS_SIDEBAR, useExisting: forwardRef(() => SdsSidebar) }], viewQueries: [{ propertyName: "drawer", first: true, predicate: ["drawer"], descendants: true, isSignal: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <!-- Mobile backdrop (only when the drawer is open, < lg) -->
     @if (mobileOpen()) {
       <div
-        class="fixed inset-0 z-40 bg-black/50 lg:hidden"
+        class="sds-scrim fixed inset-0 z-40 bg-black/45 backdrop-blur-[2px] lg:hidden"
         (click)="store.closeMobile()"
         aria-hidden="true"
       ></div>
@@ -18167,13 +18257,19 @@ class SdsSidebar {
     -->
     <aside
       #drawer
-      class="fixed inset-y-0 left-0 z-50 flex h-full w-[var(--sds-sidebar-w)] flex-col transition-transform duration-200 ease-out lg:relative lg:z-auto lg:w-[var(--sds-rail)] lg:translate-x-0 lg:transition-[width]"
+      class="fixed inset-y-0 left-0 z-50 flex h-full w-[min(var(--sds-sidebar-w),86vw)] flex-col transition-transform duration-200 ease-out motion-reduce:transition-none lg:relative lg:z-auto lg:w-[var(--sds-rail)] lg:translate-none lg:transition-[width]"
       [class]="asideClass()"
       [style.--sds-rail]="railWidth()"
+      [style.transform]="dragX() ? 'translateX(' + dragX() + 'px)' : null"
+      [style.transition]="dragX() ? 'none' : null"
       [inert]="belowLg() && !mobileOpen()"
       [attr.role]="belowLg() && mobileOpen() ? 'dialog' : null"
       [attr.aria-modal]="belowLg() && mobileOpen() ? 'true' : null"
       (keydown)="onDrawerKeydown($event)"
+      (touchstart)="onTouchStart($event)"
+      (touchmove)="onTouchMove($event)"
+      (touchend)="onTouchEnd()"
+      (touchcancel)="onTouchEnd()"
     >
       @if (decorations()) {
         <span class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
@@ -18182,29 +18278,32 @@ class SdsSidebar {
         </span>
       }
 
-      <!-- Header: collapse toggle (desktop) / close (mobile) -->
+      <!-- Header: optional [sdsHeader] (logo) + collapse toggle (desktop) / close (mobile) -->
       <div
-        class="relative flex items-center px-3"
-        style="height: 52px"
-        [class]="collapsed() ? 'justify-end lg:justify-center' : 'justify-end'"
+        class="relative flex shrink-0 items-center gap-2 px-3"
+        style="height: 56px"
+        [class]="railCollapsed() ? 'justify-center' : 'justify-between'"
       >
+        <div class="flex min-w-0 flex-1 items-center pl-1" [class.hidden]="railCollapsed()">
+          <ng-content select="[sdsHeader]" />
+        </div>
         <button
           type="button"
-          class="hidden h-9 w-9 items-center justify-center rounded-control transition-colors focus-visible:outline-none focus-visible:ring-2 lg:inline-flex"
+          class="hidden h-9 w-9 shrink-0 items-center justify-center rounded-control transition-colors focus-visible:outline-none focus-visible:ring-2 lg:inline-flex"
           [class]="railBtnClass()"
-          [attr.aria-label]="collapsed() ? expandLabel() : collapseLabel()"
-          [attr.aria-expanded]="!collapsed()"
+          [attr.aria-label]="railCollapsed() ? expandLabel() : collapseLabel()"
+          [attr.aria-expanded]="!railCollapsed()"
           (click)="store.toggle()"
         >
           <sds-icon
-            [name]="collapsed() ? 'panel-left-open' : 'panel-left-close'"
+            [name]="railCollapsed() ? 'panel-left-open' : 'panel-left-close'"
             [size]="20"
           />
         </button>
         <button
           #closeBtn
           type="button"
-          class="inline-flex h-9 w-9 items-center justify-center rounded-control transition-colors focus-visible:outline-none focus-visible:ring-2 lg:hidden"
+          class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-control transition-colors focus-visible:outline-none focus-visible:ring-2 lg:hidden"
           [class]="railBtnClass()"
           [attr.aria-label]="closeLabel()"
           (click)="store.closeMobile()"
@@ -18214,32 +18313,27 @@ class SdsSidebar {
       </div>
 
       <!-- Navigation -->
-      <nav class="relative flex-1 overflow-y-auto overflow-x-hidden px-3 pb-4">
+      <nav class="relative flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-3 pb-4" [attr.aria-label]="navLabel() || null">
         <ng-content />
       </nav>
 
       <!-- Footer (search, version, …) -->
-      <div class="relative px-3 pb-4 pt-2">
+      <div class="relative px-3 pt-2 pb-[max(1rem,env(safe-area-inset-bottom))]">
         <ng-content select="[sdsFooter]" />
       </div>
     </aside>
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes sds-scrim-in{0%{opacity:0}}.sds-scrim{animation:sds-scrim-in .18s ease-out}@media(prefers-reduced-motion:reduce){.sds-scrim{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSidebar, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'sds-sidebar',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SdsIcon],
-                    host: {
+            args: [{ selector: 'sds-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdsIcon], providers: [{ provide: SDS_SIDEBAR, useExisting: forwardRef(() => SdsSidebar) }], host: {
                         class: 'block h-full',
                         '(document:keydown.escape)': 'onEscape()',
-                    },
-                    template: `
+                    }, template: `
     <!-- Mobile backdrop (only when the drawer is open, < lg) -->
     @if (mobileOpen()) {
       <div
-        class="fixed inset-0 z-40 bg-black/50 lg:hidden"
+        class="sds-scrim fixed inset-0 z-40 bg-black/45 backdrop-blur-[2px] lg:hidden"
         (click)="store.closeMobile()"
         aria-hidden="true"
       ></div>
@@ -18252,13 +18346,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     -->
     <aside
       #drawer
-      class="fixed inset-y-0 left-0 z-50 flex h-full w-[var(--sds-sidebar-w)] flex-col transition-transform duration-200 ease-out lg:relative lg:z-auto lg:w-[var(--sds-rail)] lg:translate-x-0 lg:transition-[width]"
+      class="fixed inset-y-0 left-0 z-50 flex h-full w-[min(var(--sds-sidebar-w),86vw)] flex-col transition-transform duration-200 ease-out motion-reduce:transition-none lg:relative lg:z-auto lg:w-[var(--sds-rail)] lg:translate-none lg:transition-[width]"
       [class]="asideClass()"
       [style.--sds-rail]="railWidth()"
+      [style.transform]="dragX() ? 'translateX(' + dragX() + 'px)' : null"
+      [style.transition]="dragX() ? 'none' : null"
       [inert]="belowLg() && !mobileOpen()"
       [attr.role]="belowLg() && mobileOpen() ? 'dialog' : null"
       [attr.aria-modal]="belowLg() && mobileOpen() ? 'true' : null"
       (keydown)="onDrawerKeydown($event)"
+      (touchstart)="onTouchStart($event)"
+      (touchmove)="onTouchMove($event)"
+      (touchend)="onTouchEnd()"
+      (touchcancel)="onTouchEnd()"
     >
       @if (decorations()) {
         <span class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
@@ -18267,29 +18367,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         </span>
       }
 
-      <!-- Header: collapse toggle (desktop) / close (mobile) -->
+      <!-- Header: optional [sdsHeader] (logo) + collapse toggle (desktop) / close (mobile) -->
       <div
-        class="relative flex items-center px-3"
-        style="height: 52px"
-        [class]="collapsed() ? 'justify-end lg:justify-center' : 'justify-end'"
+        class="relative flex shrink-0 items-center gap-2 px-3"
+        style="height: 56px"
+        [class]="railCollapsed() ? 'justify-center' : 'justify-between'"
       >
+        <div class="flex min-w-0 flex-1 items-center pl-1" [class.hidden]="railCollapsed()">
+          <ng-content select="[sdsHeader]" />
+        </div>
         <button
           type="button"
-          class="hidden h-9 w-9 items-center justify-center rounded-control transition-colors focus-visible:outline-none focus-visible:ring-2 lg:inline-flex"
+          class="hidden h-9 w-9 shrink-0 items-center justify-center rounded-control transition-colors focus-visible:outline-none focus-visible:ring-2 lg:inline-flex"
           [class]="railBtnClass()"
-          [attr.aria-label]="collapsed() ? expandLabel() : collapseLabel()"
-          [attr.aria-expanded]="!collapsed()"
+          [attr.aria-label]="railCollapsed() ? expandLabel() : collapseLabel()"
+          [attr.aria-expanded]="!railCollapsed()"
           (click)="store.toggle()"
         >
           <sds-icon
-            [name]="collapsed() ? 'panel-left-open' : 'panel-left-close'"
+            [name]="railCollapsed() ? 'panel-left-open' : 'panel-left-close'"
             [size]="20"
           />
         </button>
         <button
           #closeBtn
           type="button"
-          class="inline-flex h-9 w-9 items-center justify-center rounded-control transition-colors focus-visible:outline-none focus-visible:ring-2 lg:hidden"
+          class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-control transition-colors focus-visible:outline-none focus-visible:ring-2 lg:hidden"
           [class]="railBtnClass()"
           [attr.aria-label]="closeLabel()"
           (click)="store.closeMobile()"
@@ -18299,49 +18402,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       </div>
 
       <!-- Navigation -->
-      <nav class="relative flex-1 overflow-y-auto overflow-x-hidden px-3 pb-4">
+      <nav class="relative flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-3 pb-4" [attr.aria-label]="navLabel() || null">
         <ng-content />
       </nav>
 
       <!-- Footer (search, version, …) -->
-      <div class="relative px-3 pb-4 pt-2">
+      <div class="relative px-3 pt-2 pb-[max(1rem,env(safe-area-inset-bottom))]">
         <ng-content select="[sdsFooter]" />
       </div>
     </aside>
-  `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { drawer: [{ type: i0.ViewChild, args: ['drawer', { isSignal: true }] }], closeBtn: [{ type: i0.ViewChild, args: ['closeBtn', { isSignal: true }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], decorations: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorations", required: false }] }] } });
+  `, styles: ["@keyframes sds-scrim-in{0%{opacity:0}}.sds-scrim{animation:sds-scrim-in .18s ease-out}@media(prefers-reduced-motion:reduce){.sds-scrim{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { drawer: [{ type: i0.ViewChild, args: ['drawer', { isSignal: true }] }], closeBtn: [{ type: i0.ViewChild, args: ['closeBtn', { isSignal: true }] }], collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], navLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navLabel", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], accordion: [{ type: i0.Input, args: [{ isSignal: true, alias: "accordion", required: false }] }], decorations: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorations", required: false }] }] } });
 
+let nextId$1 = 0;
 /**
- * Groups nav items under an optional uppercase section label.
+ * Groups nav items under an optional section label.
  *
  * Two modes:
- * - **Section** (default) — a static label over its items. The label is replaced by a divider when
- *   the rail is collapsed.
- * - **Collapsible** (`[collapsible]`) — the label becomes a button that expands and collapses the
- *   group. Set `[basePath]` and the group opens itself whenever the active route is inside it, so a
- *   deep link or a browser Back lands with the right section already open instead of the person
- *   having to find and re-open it. A group whose pages live under several prefixes (a business area
- *   grouping `/people`, `/customers`, `/drivers`) lists them all in `[basePaths]`.
+ * - **Section** (default) — a static uppercase caption over its items. On the collapsed rail the caption
+ *   becomes a divider and the items (which carry their own icons) stay visible.
+ * - **Collapsible** (`[collapsible]`) — the label becomes a row-height header that opens and closes the
+ *   group with a short height animation. Its items render as nested sub-destinations on a tree guide
+ *   line, the active one marked on the line itself. Set `[basePath]` (or several `[basePaths]`) and the
+ *   group opens itself whenever the active route is inside it, so a deep link or a browser Back lands
+ *   with the right section already open; while closed it still shows that it holds the current page
+ *   (a highlighted header with a dot).
+ *
+ * On the collapsed desktop rail a collapsible group is its icon alone, and its pages open in a FLYOUT
+ * panel beside the rail — on hover, on click/tap (which pins it), or from the keyboard (Enter, Space or
+ * → opens it and focuses the first page; ↑/↓ move, Esc or ← closes back to the header). So every
+ * destination stays reachable on the icon rail, without navigating anywhere just to see what a section
+ * holds.
  *
  * A collapsible group can carry a `[badge]` of its own — typically the sum of its children's. It is
  * drawn on the header only while the children are hidden, so a closed section still says that
  * something inside it is waiting, and an open one does not show the same count twice.
  *
- * Collapsible mode exists because a flat rail stops scaling somewhere around a dozen destinations,
- * and the alternative — showing every child of every section at once — buries the ones in use.
- *
- * On the collapsed desktop rail there is nowhere to put a header, so a collapsible group renders
- * exactly like a section: divider, children visible. Hiding them there would leave the rail with
- * unreachable destinations and no affordance to reveal them.
+ * Inside the mobile drawer the rail is always full width, whatever the desktop collapse preference.
  */
 class SdsNavGroup {
     store = inject(SidebarStore);
     router = inject(Router);
+    document = inject(DOCUMENT);
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    id = ++nextId$1;
+    headerId = `sds-nav-group-${this.id}-header`;
+    panelId = `sds-nav-group-${this.id}-panel`;
+    header = viewChild('header', ...(ngDevMode ? [{ debugName: "header" }] : []));
+    panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Turn the label into an expand/collapse control. */
     collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
+    /** Start open (until the person toggles it), even when the route is not inside the group. */
+    defaultOpen = input(false, ...(ngDevMode ? [{ debugName: "defaultOpen", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Icon for a collapsible header — and the group's only representation on the collapsed rail. */
     icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
     /**
      * URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
@@ -18364,7 +18479,10 @@ class SdsNavGroup {
     badgeMax = input(99, ...(ngDevMode ? [{ debugName: "badgeMax" }] : []));
     /** Badge colour, as on {@link SdsNavItem}. */
     badgeTone = input('brand', ...(ngDevMode ? [{ debugName: "badgeTone" }] : []));
-    /** Emits the new state on every manual toggle. Not emitted for route-driven auto-expansion. */
+    /**
+     * Emits the new state on every manual inline toggle. Not emitted for route-driven auto-expansion, nor
+     * for the collapsed rail's flyout (which shows the pages instead — no need to navigate to see them).
+     */
     expandedChange = output();
     /** Explicit user choice; null means "follow the route". */
     manual = signal(null, ...(ngDevMode ? [{ debugName: "manual" }] : []));
@@ -18381,8 +18499,65 @@ class SdsNavGroup {
         const path = this.url().split(/[?#]/)[0];
         return bases.some((base) => path === base || path.startsWith(base + '/'));
     }, ...(ngDevMode ? [{ debugName: "routeActive" }] : []));
-    expanded = computed(() => this.manual() ?? this.routeActive(), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
-    collapsed = this.store.collapsed;
+    expanded = computed(() => this.manual() ?? (this.routeActive() || this.defaultOpen()), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    /** Icon-only desktop rail right now (never inside the mobile drawer). */
+    railCollapsed = this.store.railCollapsed;
+    // --- Flyout (collapsed rail) ------------------------------------------------------------------
+    flyoutOpen = signal(false, ...(ngDevMode ? [{ debugName: "flyoutOpen" }] : []));
+    /** Opened by click / keyboard: stays open when the pointer leaves, until a choice, Esc or outside click. */
+    pinned = false;
+    pos = signal({ top: 0, left: 0, maxHeight: 480 }, ...(ngDevMode ? [{ debugName: "pos" }] : []));
+    openTimer;
+    closeTimer;
+    flyoutShown = computed(() => this.collapsible() && this.railCollapsed() && this.flyoutOpen(), ...(ngDevMode ? [{ debugName: "flyoutShown" }] : []));
+    // --- Context for projected items -------------------------------------------------------------
+    nested = computed(() => this.collapsible(), ...(ngDevMode ? [{ debugName: "nested" }] : []));
+    inFlyout = computed(() => this.collapsible() && this.railCollapsed(), ...(ngDevMode ? [{ debugName: "inFlyout" }] : []));
+    constructor() {
+        // Accordion: another group was opened by hand — fold this one.
+        effect(() => {
+            const opened = this.store.openedGroup();
+            if (!this.store.accordion() || opened === null || opened === this.id)
+                return;
+            untracked(() => {
+                if (this.expanded())
+                    this.manual.set(false);
+            });
+        });
+        // The flyout belongs to the collapsed rail only.
+        effect(() => {
+            if (!this.railCollapsed())
+                untracked(() => this.closeFlyout());
+        });
+        // While the flyout is open: an outside press, a resize or a scroll of anything but the panel closes
+        // it (a fixed panel would otherwise float away from its header).
+        effect((onCleanup) => {
+            if (!this.flyoutOpen())
+                return;
+            const win = this.document.defaultView;
+            if (!win)
+                return;
+            const inside = (t) => t instanceof Node && this.host.nativeElement.contains(t);
+            const onDown = (e) => {
+                if (!inside(e.target))
+                    this.closeFlyout();
+            };
+            const onScroll = (e) => {
+                if (!inside(e.target))
+                    this.closeFlyout();
+            };
+            const onResize = () => this.closeFlyout();
+            this.document.addEventListener('pointerdown', onDown, true);
+            win.addEventListener('scroll', onScroll, true);
+            win.addEventListener('resize', onResize);
+            onCleanup(() => {
+                this.document.removeEventListener('pointerdown', onDown, true);
+                win.removeEventListener('scroll', onScroll, true);
+                win.removeEventListener('resize', onResize);
+            });
+        });
+        inject(DestroyRef).onDestroy(() => this.clearTimers());
+    }
     /** The header badge's spoken text — only while the children (which show their own) are hidden. */
     headerBadgeText = computed(() => {
         const n = this.badge();
@@ -18396,119 +18571,283 @@ class SdsNavGroup {
         const n = this.badge() ?? 0;
         return n > this.badgeMax() ? `${this.badgeMax()}+` : String(n);
     }, ...(ngDevMode ? [{ debugName: "badgeDisplay" }] : []));
-    /** The same pill as {@link SdsNavItem}'s, pinned to the icon's corner on the collapsed rail. */
-    badgeClass = computed(() => {
-        const tone = this.badgeTone() === 'danger'
+    /** Accessible name of the icon-only header: "Money, 3 pending". */
+    collapsedName = computed(() => {
+        const text = this.headerBadgeText();
+        return text ? `${this.label()}, ${text}` : this.label();
+    }, ...(ngDevMode ? [{ debugName: "collapsedName" }] : []));
+    /** Rail paint, shared via the store — see SidebarStore.appearance. Drives the header/caption tones. */
+    rail = inject(SDS_SIDEBAR, { optional: true });
+    surface = computed(() => (this.rail?.appearance() ?? this.store.appearance()) === 'surface', ...(ngDevMode ? [{ debugName: "surface" }] : []));
+    badgeTone$() {
+        return this.badgeTone() === 'danger'
             ? 'bg-danger text-white'
             : this.badgeTone() === 'neutral'
                 ? 'bg-muted text-ink-soft border border-border'
-                : this.store.appearance() === 'surface'
+                : this.surface()
                     ? `bg-brand-600 text-white ${DARK_PRIMARY_BG} ${DARK_ON_PRIMARY}`
                     : 'bg-white text-brand-800';
-        const base = 'inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 ' +
-            'text-[11px] font-bold tabular-nums leading-none';
-        const collapsed = this.collapsed()
-            ? ' lg:absolute lg:right-1.5 lg:top-0.5 lg:h-4 lg:min-w-4 lg:px-1 lg:text-[10px]' +
-                (this.store.appearance() === 'surface' ? ' lg:ring-2 lg:ring-surface' : '')
-            : '';
-        return `${base} ${tone}${collapsed}`;
-    }, ...(ngDevMode ? [{ debugName: "badgeClass" }] : []));
-    /** Rail paint, shared via the store — see SidebarStore.appearance. Drives the header/caption tones. */
-    surface = computed(() => this.store.appearance() === 'surface', ...(ngDevMode ? [{ debugName: "surface" }] : []));
+    }
+    badgeClass = computed(() => 'inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 ' +
+        'text-[11px] font-bold tabular-nums leading-none ' +
+        this.badgeTone$(), ...(ngDevMode ? [{ debugName: "badgeClass" }] : []));
+    /** The badge as a small pill on the icon's corner (collapsed rail). */
+    pipClass = computed(() => 'absolute right-1 top-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 ' +
+        'text-[10px] font-bold tabular-nums leading-none ' +
+        this.badgeTone$() +
+        (this.surface() ? ' ring-2 ring-surface' : ' ring-2 ring-brand-900'), ...(ngDevMode ? [{ debugName: "pipClass" }] : []));
+    activeDotClass = computed(() => 'size-1.5 shrink-0 rounded-full ' + (this.surface() ? 'bg-brand-500' : 'bg-white'), ...(ngDevMode ? [{ debugName: "activeDotClass" }] : []));
+    wrapClass = computed(() => (this.collapsible() ? 'mt-1 first:mt-2' : 'mt-5 first:mt-3'), ...(ngDevMode ? [{ debugName: "wrapClass" }] : []));
     /** Collapsible header, painted for the active rail (ink+brand on `surface`, white on `brand`). */
     headerClass = computed(() => {
         const s = this.surface();
-        const base = 'relative mb-1 flex h-10 w-full items-center gap-3 rounded-control px-3 text-sm font-medium ' +
-            'transition-colors focus-visible:outline-none focus-visible:ring-2 ' +
-            (this.collapsed() ? 'lg:justify-center ' : '') +
-            (s
-                ? 'text-ink-soft hover:bg-muted hover:text-ink focus-visible:ring-brand-500/40'
-                : 'text-white/70 hover:bg-white/8 hover:text-white focus-visible:ring-white/40');
-        // text-ink (not brand-700) stays readable in dark, where the grayscale brand-700 is near-black.
-        const active = this.routeActive() ? (s ? ' text-ink' : ' text-white') : '';
-        return base + active;
+        const rail = this.railCollapsed();
+        const base = 'group/header relative flex w-full items-center gap-3 rounded-control text-left text-sm font-medium ' +
+            'transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 ' +
+            (rail ? 'h-10 justify-center ' : 'h-11 px-3 lg:h-10 ') +
+            (s ? 'focus-visible:ring-brand-500 ' : 'focus-visible:ring-white/50 ');
+        let state;
+        if (rail && this.routeActive()) {
+            // The icon IS the group here: wear the active item's pill when the current page is inside.
+            state = s
+                ? 'bg-linear-to-r from-brand-500/15 to-brand-500/5 text-ink shadow-sm'
+                : 'bg-brand-500 text-white shadow-sm';
+        }
+        else if (rail && this.flyoutOpen()) {
+            state = s ? 'bg-muted text-ink' : 'bg-white/10 text-white';
+        }
+        else if (this.routeActive() && !this.expanded()) {
+            state = s ? 'bg-brand-500/8 text-ink hover:bg-brand-500/12' : 'bg-white/8 text-white hover:bg-white/12';
+        }
+        else if (this.expanded()) {
+            state = s ? 'text-ink hover:bg-brand-500/8' : 'text-white hover:bg-white/8';
+        }
+        else {
+            state = s ? 'text-ink-soft hover:bg-brand-500/8 hover:text-ink' : 'text-white/75 hover:bg-white/8 hover:text-white';
+        }
+        return base + state;
     }, ...(ngDevMode ? [{ debugName: "headerClass" }] : []));
-    chevronClass = computed(() => 'shrink-0 transition-transform ' + (this.surface() ? 'text-ink-faint' : 'text-white/50'), ...(ngDevMode ? [{ debugName: "chevronClass" }] : []));
+    chevronClass = computed(() => 'shrink-0 transition-transform duration-200 ease-out motion-reduce:transition-none ' +
+        (this.expanded() ? 'rotate-90 ' : '') +
+        (this.surface() ? 'text-ink-faint group-hover/header:text-ink-soft' : 'text-white/45 group-hover/header:text-white/80'), ...(ngDevMode ? [{ debugName: "chevronClass" }] : []));
     dividerClass = computed(() => 'mx-3 mb-2 mt-2 h-px ' + (this.surface() ? 'bg-border' : 'bg-white/10'), ...(ngDevMode ? [{ debugName: "dividerClass" }] : []));
     captionClass = computed(() => 'mb-1.5 px-3 text-[11px] font-semibold uppercase tracking-wider ' +
-        (this.surface() ? 'text-ink-faint' : 'text-white/60'), ...(ngDevMode ? [{ debugName: "captionClass" }] : []));
+        (this.surface() ? 'text-ink-faint' : 'text-white/55'), ...(ngDevMode ? [{ debugName: "captionClass" }] : []));
+    flyoutTitleClass = computed(() => 'px-3 pb-1.5 pt-1 text-[11px] font-semibold uppercase tracking-wider ' +
+        (this.surface() ? 'text-ink-faint' : 'text-white/55'), ...(ngDevMode ? [{ debugName: "flyoutTitleClass" }] : []));
     /**
-     * A plain section always shows its items — they carry their own icons, so they survive the collapsed
-     * rail. A collapsible group hides its children there instead: its children are sub-destinations and
-     * typically have no icon, which on an icon-only rail is a row with nothing in it.
+     * Whether the items are on screen: a plain section always; a collapsible group when open on the full
+     * rail (its items have no icon of their own, so on the icon rail they live in the flyout instead).
      */
-    childrenVisible = computed(() => !this.collapsible() || (!this.collapsed() && this.expanded()), ...(ngDevMode ? [{ debugName: "childrenVisible" }] : []));
-    /**
-     * One binding rather than `[class]` alongside `[class.hidden]` — mixing a whole-list binding with a
-     * single-class toggle on the same element depends on Angular's styling precedence to resolve, which
-     * is a subtlety no template should rest on.
-     *
-     * The indent rule appears only on an expanded collapsible group on the full-width rail: it is what
-     * shows the children belong to the header above them.
-     */
-    childrenClass = computed(() => {
-        const parts = ['flex flex-col gap-1'];
-        if (!this.childrenVisible()) {
-            parts.push('hidden');
-        }
-        if (this.collapsible() && !this.collapsed()) {
-            parts.push(this.surface() ? 'ml-5 border-l border-border pl-3' : 'ml-5 border-l border-white/10 pl-3');
-        }
-        return parts.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "childrenClass" }] : []));
+    childrenVisible = computed(() => !this.collapsible() || (!this.railCollapsed() && this.expanded()), ...(ngDevMode ? [{ debugName: "childrenVisible" }] : []));
+    /** Closed panels are `inert`, so their (visually hidden) links leave the tab order. */
+    childrenInteractive = computed(() => this.childrenVisible() || this.flyoutShown(), ...(ngDevMode ? [{ debugName: "childrenInteractive" }] : []));
+    panelClass = computed(() => {
+        if (!this.collapsible())
+            return 'block';
+        if (this.railCollapsed()) {
+            if (!this.flyoutOpen())
+                return 'hidden';
+            return ('sds-flyout fixed z-[70] flex w-60 flex-col rounded-card border p-1.5 shadow-xl ' +
+                (this.surface() ? 'border-border bg-surface text-ink' : 'border-white/10 bg-brand-900 text-white ring-1 ring-black/10'));
+        }
+        // grid-rows 0fr → 1fr animates to the content's real height with no measuring.
+        return ('grid transition-[grid-template-rows,opacity] duration-200 ease-out motion-reduce:transition-none ' +
+            (this.expanded() ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'));
+    }, ...(ngDevMode ? [{ debugName: "panelClass" }] : []));
+    innerClass = computed(() => {
+        if (!this.collapsible())
+            return '';
+        return this.railCollapsed() ? 'min-h-0 overflow-y-auto overscroll-contain' : 'min-h-0 overflow-hidden';
+    }, ...(ngDevMode ? [{ debugName: "innerClass" }] : []));
     /**
-     * On the collapsed rail there is nothing to expand into, so the toggle always reports "opening" —
-     * the app's handler takes that as the cue to navigate into the section, which is the only useful
-     * meaning the control can have there.
+     * The tree guide: a hairline under the header's icon (22 px = the header's 12 px padding + half its
+     * 20 px icon), with the items indented beside it. The active item marks its own stretch of the line.
      */
+    listClass = computed(() => {
+        if (!this.collapsible())
+            return 'flex flex-col gap-1';
+        if (this.railCollapsed())
+            return 'flex flex-col gap-0.5';
+        return ('relative ml-[1.375rem] mt-0.5 flex flex-col gap-0.5 pb-1.5 pl-3 ' +
+            'before:pointer-events-none before:absolute before:inset-y-1 before:left-0 before:w-px ' +
+            (this.surface() ? 'before:bg-border' : 'before:bg-white/12'));
+    }, ...(ngDevMode ? [{ debugName: "listClass" }] : []));
+    /** Header click: toggle inline; on the collapsed rail, open (and pin) or close the flyout. */
     toggle() {
-        const next = this.collapsed() ? true : !this.expanded();
+        if (this.railCollapsed()) {
+            if (this.flyoutOpen() && this.pinned)
+                this.closeFlyout();
+            else
+                this.openFlyout(false);
+            return;
+        }
+        const next = !this.expanded();
         this.manual.set(next);
+        if (next)
+            this.store.openedGroup.set(this.id);
         this.expandedChange.emit(next);
     }
+    onHeaderKeydown(event) {
+        if (!this.railCollapsed())
+            return;
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.openFlyout(true);
+        }
+    }
+    onHeaderEnter() {
+        if (!this.railCollapsed())
+            return;
+        this.cancelClose();
+        if (this.flyoutOpen())
+            return;
+        clearTimeout(this.openTimer);
+        // A short intent delay, so sweeping the pointer down the rail doesn't flash every panel.
+        this.openTimer = setTimeout(() => this.openFlyout(false, false), 90);
+    }
+    scheduleClose() {
+        clearTimeout(this.openTimer);
+        if (!this.railCollapsed() || !this.flyoutOpen() || this.pinned)
+            return;
+        clearTimeout(this.closeTimer);
+        this.closeTimer = setTimeout(() => this.closeFlyout(), 220);
+    }
+    cancelClose() {
+        clearTimeout(this.closeTimer);
+    }
+    openFlyout(focusFirst, pin = true) {
+        const btn = this.header()?.nativeElement;
+        const win = this.document.defaultView;
+        if (!btn || !win)
+            return;
+        this.clearTimers();
+        const r = btn.getBoundingClientRect();
+        const margin = 8;
+        this.pinned = this.pinned || pin;
+        // Beside the RAIL, not the button: the panel must clear the rail's edge, not overlap its padding.
+        const railRight = btn.closest('aside')?.getBoundingClientRect().right ?? r.right;
+        this.pos.set({ top: Math.max(margin, r.top - 6), left: railRight + 8, maxHeight: win.innerHeight - margin * 2 });
+        this.flyoutOpen.set(true);
+        afterNextRender(() => {
+            const el = this.panel()?.nativeElement;
+            if (!el)
+                return;
+            // Keep the whole panel on screen: lift it when it would run past the bottom edge.
+            const h = el.offsetHeight;
+            const top = this.pos().top;
+            if (top + h > win.innerHeight - margin)
+                this.pos.update((p) => ({ ...p, top: Math.max(margin, win.innerHeight - margin - h) }));
+            if (focusFirst)
+                this.items()[0]?.focus();
+        }, { injector: this.injector });
+    }
+    /** {@link SdsNavGroupContext} — also called by an item chosen inside the flyout. */
+    closeFlyout(restoreFocus = false) {
+        this.clearTimers();
+        this.pinned = false;
+        if (!this.flyoutOpen())
+            return;
+        this.flyoutOpen.set(false);
+        if (restoreFocus)
+            this.header()?.nativeElement.focus();
+    }
+    onEscape() {
+        if (this.flyoutOpen()) {
+            const within = this.host.nativeElement.contains(this.document.activeElement);
+            this.closeFlyout(within);
+        }
+    }
+    /** Focus leaving the header + flyout altogether closes the flyout (Tab past the last page). */
+    onFocusOut(event) {
+        if (!this.flyoutOpen())
+            return;
+        const next = event.relatedTarget;
+        if (next instanceof Node && this.host.nativeElement.contains(next))
+            return;
+        if (next === null)
+            return; // focus went nowhere in particular (e.g. a click on the page) — the pointerdown handler decides
+        this.closeFlyout();
+    }
+    /** ↑/↓ (and Home/End) move between the flyout's pages; ← closes back to the header. */
+    onPanelKeydown(event) {
+        if (!this.flyoutShown())
+            return;
+        const items = this.items();
+        const i = items.indexOf(this.document.activeElement);
+        let next = -1;
+        switch (event.key) {
+            case 'ArrowDown':
+                next = i < 0 ? 0 : (i + 1) % items.length;
+                break;
+            case 'ArrowUp':
+                next = i < 0 ? items.length - 1 : (i - 1 + items.length) % items.length;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = items.length - 1;
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.closeFlyout(true);
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        items[next]?.focus();
+    }
+    items() {
+        const el = this.panel()?.nativeElement;
+        return el ? Array.from(el.querySelectorAll('a[href],button:not([disabled])')) : [];
+    }
+    clearTimers() {
+        clearTimeout(this.openTimer);
+        clearTimeout(this.closeTimer);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsNavGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsNavGroup, isStandalone: true, selector: "sds-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, basePaths: { classPropertyName: "basePaths", publicName: "basePaths", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null }, badgeMax: { classPropertyName: "badgeMax", publicName: "badgeMax", isSignal: true, isRequired: false, transformFunction: null }, badgeTone: { classPropertyName: "badgeTone", publicName: "badgeTone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
-    <div class="mt-5 first:mt-3">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsNavGroup, isStandalone: true, selector: "sds-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, basePaths: { classPropertyName: "basePaths", publicName: "basePaths", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null }, badgeMax: { classPropertyName: "badgeMax", publicName: "badgeMax", isSignal: true, isRequired: false, transformFunction: null }, badgeTone: { classPropertyName: "badgeTone", publicName: "badgeTone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "document:keydown.escape": "onEscape()", "focusout": "onFocusOut($event)" }, classAttribute: "block" }, providers: [{ provide: SDS_NAV_GROUP, useExisting: forwardRef(() => SdsNavGroup) }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div [class]="wrapClass()">
       @if (label()) {
         @if (collapsible()) {
-          <!--
-            A collapsible header is styled as a NAV ROW, not as a section caption. A small uppercase
-            caption says "everything under me belongs to me" — which is a lie the moment the group is
-            collapsed and the next section's items sit directly beneath it. At row scale, with an icon
-            and a chevron, it reads as the control it is.
-
-            It renders on the collapsed rail too, as an icon alone, because there it is the group's
-            ONLY representation: the children are hidden (a child with no icon of its own would be a
-            blank row), so the app is expected to treat the toggle as "take me into this section" —
-            which is what expandedChange already means.
-          -->
           <button
+            #header
             type="button"
+            [id]="headerId"
             [class]="headerClass()"
-            [attr.aria-expanded]="collapsed() ? null : expanded()"
-            [attr.title]="collapsed() ? label() : null"
-            [attr.aria-label]="collapsed() ? label() : null"
+            [attr.aria-expanded]="railCollapsed() ? flyoutOpen() : expanded()"
+            [attr.aria-controls]="panelId"
+            [attr.aria-haspopup]="railCollapsed() ? 'true' : null"
+            [attr.aria-label]="railCollapsed() ? collapsedName() : null"
             (click)="toggle()"
+            (keydown)="onHeaderKeydown($event)"
+            (pointerenter)="onHeaderEnter()"
+            (pointerleave)="scheduleClose()"
           >
             @if (icon()) {
               <sds-icon [name]="icon()!" [size]="20" class="shrink-0" />
             }
-            <span class="flex-1 truncate text-left" [class.lg:hidden]="collapsed()">
-              {{ label() }}
-            </span>
-            @if (headerBadgeText(); as text) {
-              <span [class]="badgeClass()" aria-hidden="true">{{ badgeDisplay() }}</span>
-              <span class="sr-only">, {{ text }}</span>
+            @if (railCollapsed()) {
+              @if (headerBadgeText()) {
+                <span [class]="pipClass()" aria-hidden="true">{{ badgeDisplay() }}</span>
+              } @else if (routeActive()) {
+                <span [class]="activeDotClass() + ' absolute right-2 top-2'" aria-hidden="true"></span>
+              }
+            } @else {
+              <span class="min-w-0 flex-1 truncate text-left">{{ label() }}</span>
+              @if (headerBadgeText(); as text) {
+                <span [class]="badgeClass()" aria-hidden="true">{{ badgeDisplay() }}</span>
+                <span class="sr-only">, {{ text }}</span>
+              } @else if (routeActive() && !expanded()) {
+                <!-- Closed, but the current page lives in here: say so without opening it. -->
+                <span [class]="activeDotClass()" aria-hidden="true"></span>
+              }
+              <sds-icon name="chevron-right" [size]="16" [class]="chevronClass()" />
             }
-            <sds-icon
-              name="chevron-down"
-              [size]="16"
-              [class]="chevronClass()"
-              [class.lg:hidden]="collapsed()"
-              [class.rotate-180]="expanded()"
-            />
           </button>
-        } @else if (collapsed()) {
+        } @else if (railCollapsed()) {
           <div [class]="dividerClass()"></div>
         } @else {
           <p [class]="captionClass()">
@@ -18517,61 +18856,83 @@ class SdsNavGroup {
         }
       }
 
-      <div [class]="childrenClass()">
-        <ng-content />
+      <!--
+        One panel, three shapes: the always-visible list of a plain section; the height-animated, inert-
+        when-closed list of an open/closed collapsible group; or, on the collapsed rail, the fixed flyout
+        beside it. The projected items are the same DOM nodes in all three — only the classes change.
+      -->
+      <div
+        #panel
+        [id]="panelId"
+        [class]="panelClass()"
+        [style.top.px]="flyoutShown() ? pos().top : null"
+        [style.left.px]="flyoutShown() ? pos().left : null"
+        [style.max-height.px]="flyoutShown() ? pos().maxHeight : null"
+        [attr.role]="collapsible() && railCollapsed() ? 'group' : null"
+        [attr.aria-labelledby]="collapsible() && railCollapsed() ? panelId + '-title' : null"
+        [inert]="!childrenInteractive()"
+        (pointerenter)="cancelClose()"
+        (pointerleave)="scheduleClose()"
+        (keydown)="onPanelKeydown($event)"
+      >
+        @if (collapsible() && railCollapsed()) {
+          <p [id]="panelId + '-title'" [class]="flyoutTitleClass()">{{ label() }}</p>
+        }
+        <div [class]="innerClass()">
+          <div [class]="listClass()">
+            <ng-content />
+          </div>
+        </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@keyframes sds-flyout-in{0%{opacity:0;transform:translate(-4px) scale(.98)}to{opacity:1;transform:none}}.sds-flyout{animation:sds-flyout-in .14s ease-out;transform-origin:left top}@media(prefers-reduced-motion:reduce){.sds-flyout{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsNavGroup, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'sds-nav-group',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SdsIcon],
-                    host: { class: 'block' },
-                    template: `
-    <div class="mt-5 first:mt-3">
+            args: [{ selector: 'sds-nav-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdsIcon], providers: [{ provide: SDS_NAV_GROUP, useExisting: forwardRef(() => SdsNavGroup) }], host: {
+                        class: 'block',
+                        '(document:keydown.escape)': 'onEscape()',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, template: `
+    <div [class]="wrapClass()">
       @if (label()) {
         @if (collapsible()) {
-          <!--
-            A collapsible header is styled as a NAV ROW, not as a section caption. A small uppercase
-            caption says "everything under me belongs to me" — which is a lie the moment the group is
-            collapsed and the next section's items sit directly beneath it. At row scale, with an icon
-            and a chevron, it reads as the control it is.
-
-            It renders on the collapsed rail too, as an icon alone, because there it is the group's
-            ONLY representation: the children are hidden (a child with no icon of its own would be a
-            blank row), so the app is expected to treat the toggle as "take me into this section" —
-            which is what expandedChange already means.
-          -->
           <button
+            #header
             type="button"
+            [id]="headerId"
             [class]="headerClass()"
-            [attr.aria-expanded]="collapsed() ? null : expanded()"
-            [attr.title]="collapsed() ? label() : null"
-            [attr.aria-label]="collapsed() ? label() : null"
+            [attr.aria-expanded]="railCollapsed() ? flyoutOpen() : expanded()"
+            [attr.aria-controls]="panelId"
+            [attr.aria-haspopup]="railCollapsed() ? 'true' : null"
+            [attr.aria-label]="railCollapsed() ? collapsedName() : null"
             (click)="toggle()"
+            (keydown)="onHeaderKeydown($event)"
+            (pointerenter)="onHeaderEnter()"
+            (pointerleave)="scheduleClose()"
           >
             @if (icon()) {
               <sds-icon [name]="icon()!" [size]="20" class="shrink-0" />
             }
-            <span class="flex-1 truncate text-left" [class.lg:hidden]="collapsed()">
-              {{ label() }}
-            </span>
-            @if (headerBadgeText(); as text) {
-              <span [class]="badgeClass()" aria-hidden="true">{{ badgeDisplay() }}</span>
-              <span class="sr-only">, {{ text }}</span>
+            @if (railCollapsed()) {
+              @if (headerBadgeText()) {
+                <span [class]="pipClass()" aria-hidden="true">{{ badgeDisplay() }}</span>
+              } @else if (routeActive()) {
+                <span [class]="activeDotClass() + ' absolute right-2 top-2'" aria-hidden="true"></span>
+              }
+            } @else {
+              <span class="min-w-0 flex-1 truncate text-left">{{ label() }}</span>
+              @if (headerBadgeText(); as text) {
+                <span [class]="badgeClass()" aria-hidden="true">{{ badgeDisplay() }}</span>
+                <span class="sr-only">, {{ text }}</span>
+              } @else if (routeActive() && !expanded()) {
+                <!-- Closed, but the current page lives in here: say so without opening it. -->
+                <span [class]="activeDotClass()" aria-hidden="true"></span>
+              }
+              <sds-icon name="chevron-right" [size]="16" [class]="chevronClass()" />
             }
-            <sds-icon
-              name="chevron-down"
-              [size]="16"
-              [class]="chevronClass()"
-              [class.lg:hidden]="collapsed()"
-              [class.rotate-180]="expanded()"
-            />
           </button>
-        } @else if (collapsed()) {
+        } @else if (railCollapsed()) {
           <div [class]="dividerClass()"></div>
         } @else {
           <p [class]="captionClass()">
@@ -18580,18 +18941,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }
       }
 
-      <div [class]="childrenClass()">
-        <ng-content />
+      <!--
+        One panel, three shapes: the always-visible list of a plain section; the height-animated, inert-
+        when-closed list of an open/closed collapsible group; or, on the collapsed rail, the fixed flyout
+        beside it. The projected items are the same DOM nodes in all three — only the classes change.
+      -->
+      <div
+        #panel
+        [id]="panelId"
+        [class]="panelClass()"
+        [style.top.px]="flyoutShown() ? pos().top : null"
+        [style.left.px]="flyoutShown() ? pos().left : null"
+        [style.max-height.px]="flyoutShown() ? pos().maxHeight : null"
+        [attr.role]="collapsible() && railCollapsed() ? 'group' : null"
+        [attr.aria-labelledby]="collapsible() && railCollapsed() ? panelId + '-title' : null"
+        [inert]="!childrenInteractive()"
+        (pointerenter)="cancelClose()"
+        (pointerleave)="scheduleClose()"
+        (keydown)="onPanelKeydown($event)"
+      >
+        @if (collapsible() && railCollapsed()) {
+          <p [id]="panelId + '-title'" [class]="flyoutTitleClass()">{{ label() }}</p>
+        }
+        <div [class]="innerClass()">
+          <div [class]="listClass()">
+            <ng-content />
+          </div>
+        </div>
       </div>
     </div>
-  `,
-                }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], basePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "basePath", required: false }] }], basePaths: [{ type: i0.Input, args: [{ isSignal: true, alias: "basePaths", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeLabel", required: false }] }], badgeMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeMax", required: false }] }], badgeTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeTone", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
+  `, styles: ["@keyframes sds-flyout-in{0%{opacity:0;transform:translate(-4px) scale(.98)}to{opacity:1;transform:none}}.sds-flyout{animation:sds-flyout-in .14s ease-out;transform-origin:left top}@media(prefers-reduced-motion:reduce){.sds-flyout{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { header: [{ type: i0.ViewChild, args: ['header', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], basePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "basePath", required: false }] }], basePaths: [{ type: i0.Input, args: [{ isSignal: true, alias: "basePaths", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeLabel", required: false }] }], badgeMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeMax", required: false }] }], badgeTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeTone", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
 /**
  * A single sidebar navigation entry. Renders an anchor when [link] is set
  * (with automatic active state via routerLinkActive) or a button otherwise.
  *
+ * It adapts to where it sits, with no input from the app:
+ * - at the top level, an icon + label row with a pill and accent bar when active;
+ * - inside a collapsible <sds-nav-group>, a nested sub-destination on the group's tree guide (no icon
+ *   needed), the active one marked on the guide line;
+ * - inside the collapsed rail's flyout panel, a full row with its label;
+ * - on the collapsed rail itself, its icon alone, with a tooltip naming it on hover and focus.
+ *
+ * Choosing an item closes the mobile drawer and any open flyout.
+ *
  * Requires the host application to provide the Angular Router (`provideRouter`),
  * as it depends on RouterLink/RouterLinkActive even when used as a button.
  *
@@ -18601,6 +18995,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  */
 class SdsNavItem {
     store = inject(SidebarStore);
+    group = inject(SDS_NAV_GROUP, { optional: true });
     icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Router link target; when null, the item behaves as a button. */
@@ -18620,7 +19015,17 @@ class SdsNavItem {
     /** Badge colour. `danger` for things that block, `brand` (default) for a neutral count. */
     badgeTone = input('brand', ...(ngDevMode ? [{ debugName: "badgeTone" }] : []));
     select = output();
-    collapsed = this.store.collapsed;
+    /** Inside a collapsible group: a nested sub-destination. */
+    nested = computed(() => this.group?.nested() ?? false, ...(ngDevMode ? [{ debugName: "nested" }] : []));
+    /** A row of the collapsed rail's flyout panel. */
+    inFlyout = computed(() => this.group?.inFlyout() ?? false, ...(ngDevMode ? [{ debugName: "inFlyout" }] : []));
+    /** Icon alone: on the collapsed desktop rail, unless it is listed in a flyout. */
+    iconOnly = computed(() => this.store.railCollapsed() && !this.inFlyout(), ...(ngDevMode ? [{ debugName: "iconOnly" }] : []));
+    /** Tooltip anchor (viewport coordinates) while hovered/focused on the icon rail. */
+    tip = signal(null, ...(ngDevMode ? [{ debugName: "tip" }] : []));
+    rail = inject(SDS_SIDEBAR, { optional: true });
+    /** Paint of the rail this item sits in (its own sidebar's, else the store's for a free-standing item). */
+    surface = computed(() => (this.rail?.appearance() ?? this.store.appearance()) === 'surface', ...(ngDevMode ? [{ debugName: "surface" }] : []));
     /** The badge's spoken text, or null when there is nothing to show. */
     badgeText = computed(() => {
         const n = this.badge();
@@ -18642,44 +19047,84 @@ class SdsNavItem {
             ? 'bg-danger text-white'
             : this.badgeTone() === 'neutral'
                 ? 'bg-muted text-ink-soft border border-border'
-                : this.store.appearance() === 'surface'
+                : this.surface()
                     ? `bg-brand-600 text-white ${DARK_PRIMARY_BG} ${DARK_ON_PRIMARY}`
                     : 'bg-white text-brand-800';
-        const base = 'ml-auto inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 ' +
-            'text-[11px] font-bold tabular-nums leading-none';
-        // Collapsed desktop rail: a small pill pinned to the top-right of the centred icon.
-        const collapsed = this.collapsed()
-            ? ' lg:absolute lg:right-1.5 lg:top-0.5 lg:ml-0 lg:h-4 lg:min-w-4 lg:px-1 lg:text-[10px]' +
-                (this.store.appearance() === 'surface' ? ' lg:ring-2 lg:ring-surface' : '')
-            : '';
-        return `${base} ${tone}${collapsed}`;
+        if (this.iconOnly()) {
+            // A small pill pinned to the top-right of the centred icon.
+            return ('absolute right-1 top-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 ' +
+                `text-[10px] font-bold tabular-nums leading-none ${tone} ` +
+                (this.surface() ? 'ring-2 ring-surface' : 'ring-2 ring-brand-900'));
+        }
+        return ('ml-auto inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 ' +
+            `text-[11px] font-bold tabular-nums leading-none ${tone}`);
     }, ...(ngDevMode ? [{ debugName: "badgeClass" }] : []));
     itemClass(isActive) {
-        // A `surface` rail is light: an active item is a brand-tinted pill with a left accent bar, brand
-        // text and a soft shadow (matching the certicheck reference); inactive is muted ink that lifts on
-        // hover. A `brand` rail is dark, so an active item is a solid brand-500 pill in white. Read from the
-        // shared store so the whole rail switches from one input on <sds-sidebar>.
-        const surface = this.store.appearance() === 'surface';
-        const base = 'group relative flex w-full items-center gap-3 rounded-control px-3 text-sm font-medium ' +
+        // `surface` (light rail): an active item is a brand-tinted pill with an accent bar; inactive is muted
+        // ink that lifts on hover. `brand` (dark rail): an active top-level item is a solid brand-500 pill;
+        // a nested one is a quieter white wash, its accent riding the tree guide. One input on <sds-sidebar>
+        // switches the whole rail via the shared store.
+        const s = this.surface();
+        const nested = this.nested() && !this.iconOnly();
+        const size = this.iconOnly()
+            ? 'h-10 justify-center'
+            : nested
+                ? 'h-10 px-3 lg:h-9'
+                : 'h-11 px-3 lg:h-10';
+        const base = 'group relative flex w-full items-center gap-3 rounded-control text-left text-sm font-medium ' +
             'transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 ' +
-            (surface ? 'focus-visible:ring-brand-500/40 ' : 'focus-visible:ring-white/40 ') +
-            (this.collapsed() ? 'h-10 lg:justify-center' : 'h-10');
-        const state = isActive
-            ? surface
-                ? 'bg-linear-to-r from-brand-500/15 to-brand-500/5 text-ink shadow-sm'
-                : 'bg-brand-500 text-white shadow-sm'
-            : surface
-                ? 'text-ink-soft hover:bg-brand-500/8 hover:text-ink'
-                : 'text-white/70 hover:bg-white/8 hover:text-white';
-        return `${base} ${state}`;
+            (s ? 'focus-visible:ring-brand-500 ' : 'focus-visible:ring-white/50 ') +
+            size +
+            ' ';
+        let state;
+        if (nested) {
+            // A brand-tinted wash (green on emerald, grey on a monochrome brand) — quieter than the top-level
+            // pill, so the parent header stays the stronger landmark.
+            state = isActive
+                ? s
+                    ? 'bg-brand-500/10 text-ink'
+                    : 'bg-brand-500/35 text-white'
+                : s
+                    ? 'text-ink-soft hover:bg-brand-500/6 hover:text-ink'
+                    : 'text-white/65 hover:bg-white/6 hover:text-white';
+        }
+        else {
+            state = isActive
+                ? s
+                    ? 'bg-linear-to-r from-brand-500/15 to-brand-500/5 text-ink shadow-sm'
+                    : 'bg-brand-500 text-white shadow-sm'
+                : s
+                    ? 'text-ink-soft hover:bg-brand-500/8 hover:text-ink'
+                    : 'text-white/75 hover:bg-white/8 hover:text-white';
+        }
+        return base + state;
     }
     /**
-     * The left accent bar on an active item — the strongest "selected" cue, and the one that survives a
-     * grayscale brand where a tinted pill alone is nearly invisible. brand-600 on the light rail, white on
-     * the dark one; on a coloured brand it is the brand colour, matching the certicheck accent bar.
+     * The active marker — the strongest "selected" cue, and the one that survives a grayscale brand where a
+     * tinted pill alone is nearly invisible. A top-level (or flyout) item carries it inside its pill; a
+     * nested item draws it ON the group's tree guide (12 px to its left), so the line itself points at the
+     * current page.
      */
-    accentBarClass = computed(() => 'pointer-events-none absolute left-1 top-1/2 h-5 w-1 -translate-y-1/2 rounded-full ' +
-        (this.store.appearance() === 'surface' ? 'bg-brand-500' : 'bg-white'), ...(ngDevMode ? [{ debugName: "accentBarClass" }] : []));
+    accentBarClass = computed(() => {
+        const color = this.surface() ? 'bg-brand-500' : 'bg-white';
+        const nestedInline = this.nested() && !this.inFlyout() && !this.iconOnly();
+        return nestedInline
+            ? `pointer-events-none absolute -left-3 top-1/2 h-5 w-0.5 -translate-x-1/2 -translate-y-1/2 rounded-full ${color}`
+            : `pointer-events-none absolute left-1 top-1/2 h-5 w-1 -translate-y-1/2 rounded-full ${color}`;
+    }, ...(ngDevMode ? [{ debugName: "accentBarClass" }] : []));
+    showTip(event) {
+        if (!this.iconOnly())
+            return;
+        const el = event.currentTarget;
+        const r = el.getBoundingClientRect();
+        const railRight = el.closest('aside')?.getBoundingClientRect().right ?? r.right;
+        this.tip.set({ top: r.top + r.height / 2, left: railRight + 8 });
+    }
+    chosen() {
+        this.tip.set(null);
+        this.store.closeMobile();
+        this.group?.closeFlyout();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsNavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsNavItem, isStandalone: true, selector: "sds-nav-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, exact: { classPropertyName: "exact", publicName: "exact", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null }, badgeMax: { classPropertyName: "badgeMax", publicName: "badgeMax", isSignal: true, isRequired: false, transformFunction: null }, badgeTone: { classPropertyName: "badgeTone", publicName: "badgeTone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { classAttribute: "block" }, ngImport: i0, template: `
     @if (link() !== null) {
@@ -18689,10 +19134,13 @@ class SdsNavItem {
         #rla="routerLinkActive"
         [routerLinkActiveOptions]="{ exact: exact() }"
         [class]="itemClass(rla.isActive || active())"
-        [attr.title]="collapsed() ? collapsedName() : null"
-        [attr.aria-label]="collapsed() ? collapsedName() : null"
+        [attr.aria-label]="iconOnly() ? collapsedName() : null"
         [attr.aria-current]="rla.isActive || active() ? 'page' : null"
-        (click)="store.closeMobile()"
+        (click)="chosen()"
+        (pointerenter)="showTip($event)"
+        (pointerleave)="tip.set(null)"
+        (focus)="showTip($event)"
+        (blur)="tip.set(null)"
       >
         @if (rla.isActive || active()) {
           <span [class]="accentBarClass()" aria-hidden="true"></span>
@@ -18703,10 +19151,13 @@ class SdsNavItem {
       <button
         type="button"
         [class]="itemClass(active())"
-        [attr.title]="collapsed() ? collapsedName() : null"
-        [attr.aria-label]="collapsed() ? collapsedName() : null"
+        [attr.aria-label]="iconOnly() ? collapsedName() : null"
         [attr.aria-current]="active() ? 'page' : null"
-        (click)="select.emit(); store.closeMobile()"
+        (click)="select.emit(); chosen()"
+        (pointerenter)="showTip($event)"
+        (pointerleave)="tip.set(null)"
+        (focus)="showTip($event)"
+        (blur)="tip.set(null)"
       >
         @if (active()) {
           <span [class]="accentBarClass()" aria-hidden="true"></span>
@@ -18717,15 +19168,32 @@ class SdsNavItem {
 
     <ng-template #content>
       @if (icon()) {
-        <sds-icon [name]="icon()!" [size]="20" class="shrink-0" />
+        <sds-icon [name]="icon()!" [size]="nested() && !iconOnly() ? 18 : 20" class="shrink-0" />
+      }
+      @if (!iconOnly()) {
+        <span class="min-w-0 flex-1 truncate">{{ label() }}</span>
       }
-      <!-- Label is hidden only on the collapsed desktop rail; always shown in the mobile drawer. -->
-      <span class="truncate" [class]="collapsed() ? 'lg:hidden' : ''">{{ label() }}</span>
       @if (badgeText(); as text) {
-        <!-- The number is drawn; the words are what is spoken ("Menu, 3 pending"). On the collapsed
-             desktop rail it becomes a small corner pill on the icon. -->
+        <!-- The number is drawn; the words are what is spoken ("Menu, 3 pending"). On the icon rail it
+             becomes a small pill on the icon's corner. -->
         <span [class]="badgeClass()" aria-hidden="true">{{ badgeDisplay() }}</span>
-        <span class="sr-only">, {{ text }}</span>
+        @if (!iconOnly()) {
+          <span class="sr-only">, {{ text }}</span>
+        }
+      }
+      @if (tip(); as t) {
+        <!-- Icon-rail tooltip: fixed, so the rail's scroll container never clips it. -->
+        <span
+          aria-hidden="true"
+          class="pointer-events-none fixed z-[70] -translate-y-1/2 whitespace-nowrap rounded-control bg-ink px-2.5 py-1.5 text-xs font-medium text-surface shadow-lg"
+          [style.top.px]="t.top"
+          [style.left.px]="t.left"
+        >
+          {{ label() }}
+          @if (badgeText()) {
+            <span class="ml-1 opacity-70">· {{ badgeDisplay() }}</span>
+          }
+        </span>
       }
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -18745,10 +19213,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         #rla="routerLinkActive"
         [routerLinkActiveOptions]="{ exact: exact() }"
         [class]="itemClass(rla.isActive || active())"
-        [attr.title]="collapsed() ? collapsedName() : null"
-        [attr.aria-label]="collapsed() ? collapsedName() : null"
+        [attr.aria-label]="iconOnly() ? collapsedName() : null"
         [attr.aria-current]="rla.isActive || active() ? 'page' : null"
-        (click)="store.closeMobile()"
+        (click)="chosen()"
+        (pointerenter)="showTip($event)"
+        (pointerleave)="tip.set(null)"
+        (focus)="showTip($event)"
+        (blur)="tip.set(null)"
       >
         @if (rla.isActive || active()) {
           <span [class]="accentBarClass()" aria-hidden="true"></span>
@@ -18759,10 +19230,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       <button
         type="button"
         [class]="itemClass(active())"
-        [attr.title]="collapsed() ? collapsedName() : null"
-        [attr.aria-label]="collapsed() ? collapsedName() : null"
+        [attr.aria-label]="iconOnly() ? collapsedName() : null"
         [attr.aria-current]="active() ? 'page' : null"
-        (click)="select.emit(); store.closeMobile()"
+        (click)="select.emit(); chosen()"
+        (pointerenter)="showTip($event)"
+        (pointerleave)="tip.set(null)"
+        (focus)="showTip($event)"
+        (blur)="tip.set(null)"
       >
         @if (active()) {
           <span [class]="accentBarClass()" aria-hidden="true"></span>
@@ -18773,15 +19247,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
     <ng-template #content>
       @if (icon()) {
-        <sds-icon [name]="icon()!" [size]="20" class="shrink-0" />
+        <sds-icon [name]="icon()!" [size]="nested() && !iconOnly() ? 18 : 20" class="shrink-0" />
+      }
+      @if (!iconOnly()) {
+        <span class="min-w-0 flex-1 truncate">{{ label() }}</span>
       }
-      <!-- Label is hidden only on the collapsed desktop rail; always shown in the mobile drawer. -->
-      <span class="truncate" [class]="collapsed() ? 'lg:hidden' : ''">{{ label() }}</span>
       @if (badgeText(); as text) {
-        <!-- The number is drawn; the words are what is spoken ("Menu, 3 pending"). On the collapsed
-             desktop rail it becomes a small corner pill on the icon. -->
+        <!-- The number is drawn; the words are what is spoken ("Menu, 3 pending"). On the icon rail it
+             becomes a small pill on the icon's corner. -->
         <span [class]="badgeClass()" aria-hidden="true">{{ badgeDisplay() }}</span>
-        <span class="sr-only">, {{ text }}</span>
+        @if (!iconOnly()) {
+          <span class="sr-only">, {{ text }}</span>
+        }
+      }
+      @if (tip(); as t) {
+        <!-- Icon-rail tooltip: fixed, so the rail's scroll container never clips it. -->
+        <span
+          aria-hidden="true"
+          class="pointer-events-none fixed z-[70] -translate-y-1/2 whitespace-nowrap rounded-control bg-ink px-2.5 py-1.5 text-xs font-medium text-surface shadow-lg"
+          [style.top.px]="t.top"
+          [style.left.px]="t.left"
+        >
+          {{ label() }}
+          @if (badgeText()) {
+            <span class="ml-1 opacity-70">· {{ badgeDisplay() }}</span>
+          }
+        </span>
       }
     </ng-template>
   `,