@besaitech/ng-design-system 0.0.44 → 0.0.46

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, output, signal, forwardRef, viewChild, numberAttribute, viewChildren, afterRenderEffect, ElementRef, model, Injector, afterNextRender, TemplateRef, Directive, contentChild, Injectable, contentChildren } from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, output, signal, forwardRef, viewChild, numberAttribute, viewChildren, afterRenderEffect, ElementRef, model, Injector, afterNextRender, TemplateRef, Directive, contentChild, Injectable, contentChildren, untracked, DestroyRef } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
-import { NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
 import { filter, map } from 'rxjs';
@@ -97,6 +97,12 @@ const SDS_ICONS = {
     'loader-circle': '<path d="M21 12a9 9 0 1 1-6.219-8.56"/>',
     bug: '<path d="M12 20v-9"/><path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z"/><path d="M14.12 3.88 16 2"/><path d="M21 21a4 4 0 0 0-3.81-4"/><path d="M21 5a4 4 0 0 1-3.55 3.97"/><path d="M22 13h-4"/><path d="M3 21a4 4 0 0 1 3.81-4"/><path d="M3 5a4 4 0 0 0 3.55 3.97"/><path d="M6 13H2"/><path d="m8 2 1.88 1.88"/><path d="M9 7.13V6a3 3 0 1 1 6 0v1.13"/>',
     'scroll-text': '<path d="M15 12h-5"/><path d="M15 8h-5"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"/>',
+    // Added for the dark/light switcher (sds-theme-toggle) and the command palette (sds-search-command).
+    moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
+    sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>',
+    'search-x': '<path d="m13.5 8.5-5 5"/><path d="m8.5 8.5 5 5"/><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
+    command: '<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/>',
+    sparkles: '<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/>',
 };
 
 const SIZE_PX = { sm: 16, md: 20, lg: 24, xl: 32 };
@@ -155,7 +161,7 @@ const BASE = 'inline-flex items-center justify-center gap-2 font-medium ' +
     'focus-visible:ring-brand-500 disabled:opacity-50 disabled:pointer-events-none';
 const VARIANTS$2 = {
     primary: 'bg-brand-600 text-white shadow-sm hover:bg-brand-700 active:bg-brand-800',
-    secondary: 'bg-white text-ink border border-border shadow-sm hover:bg-muted active:bg-brand-50',
+    secondary: 'bg-surface text-ink border border-border shadow-sm hover:bg-muted active:bg-brand-50',
     tertiary: 'bg-brand-50 text-brand-700 hover:bg-brand-100 active:bg-brand-200/70',
     ghost: 'bg-transparent text-ink-soft hover:bg-black/5 active:bg-black/10',
     danger: 'bg-danger text-white shadow-sm hover:brightness-95 active:brightness-90',
@@ -272,7 +278,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$d = 0;
+let nextId$e = 0;
 const SIZES$a = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
@@ -285,7 +291,7 @@ const SIZES$a = {
  * sidebar search field).
  */
 class SdsInput {
-    inputId = `sds-input-${nextId$d++}`;
+    inputId = `sds-input-${nextId$e++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -380,7 +386,7 @@ class SdsInput {
                 : 'border-white/15 focus-within:border-white/40 focus-within:ring-2 focus-within:ring-white/20');
         }
         else {
-            parts.push('bg-white text-ink');
+            parts.push('bg-surface text-ink');
             parts.push(this.error()
                 ? 'border-danger focus-within:border-danger focus-within:ring-2 focus-within:ring-danger/25'
                 : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
@@ -606,7 +612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: ["input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition:background-color 100000s ease-in-out 0s;-webkit-text-fill-color:currentColor;caret-color:currentColor}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], 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$c = 0;
+let nextId$d = 0;
 const HEIGHTS = {
     sm: 'h-9',
     md: 'h-10',
@@ -629,7 +635,7 @@ const TEXT = {
  * {@link min}/{@link max} on blur and on every spinner step; ArrowUp / ArrowDown also step it.
  */
 class SdsInputNumber {
-    inputId = `sds-input-number-${nextId$c++}`;
+    inputId = `sds-input-number-${nextId$d++}`;
     fieldRef = viewChild('field', ...(ngDevMode ? [{ debugName: "fieldRef" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -764,7 +770,7 @@ class SdsInputNumber {
                 : 'focus-within:ring-2 focus-within:ring-brand-500/25');
         }
         else {
-            parts.push('bg-white text-ink');
+            parts.push('bg-surface text-ink');
             parts.push(this.error()
                 ? 'border-danger focus-within:border-danger focus-within:ring-2 focus-within:ring-danger/25'
                 : 'border-border focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25');
@@ -1336,7 +1342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], ctorParameters: () => [], propDecorators: { fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], currencyDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "currencyDisplay", required: false }] }], useGrouping: [{ type: i0.Input, args: [{ isSignal: true, alias: "useGrouping", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtons", required: false }] }], buttonLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLayout", required: false }] }], incrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementIcon", required: false }] }], decrementIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementIcon", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], incrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "incrementLabel", required: false }] }], decrementLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "decrementLabel", required: false }] }] } });
 
-let nextId$b = 0;
+let nextId$c = 0;
 const SIZES$9 = {
     sm: 'min-h-9 text-sm',
     md: 'min-h-10 text-sm',
@@ -1356,7 +1362,7 @@ const SIZES$9 = {
  * `<sds-localized-input [languages]="['fr','nl','en']" [(ngModel)]="title" />`.
  */
 class SdsLocalizedInput {
-    inputId = `sds-localized-input-${nextId$b++}`;
+    inputId = `sds-localized-input-${nextId$c++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
@@ -1461,7 +1467,7 @@ class SdsLocalizedInput {
     }
 
     <div
-      class="relative flex items-stretch rounded-control border bg-white text-ink transition-colors"
+      class="relative flex items-stretch rounded-control border bg-surface text-ink transition-colors"
       [class]="wrapperClasses()"
     >
       @if (multiline()) {
@@ -1545,7 +1551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
 
     <div
-      class="relative flex items-stretch rounded-control border bg-white text-ink transition-colors"
+      class="relative flex items-stretch rounded-control border bg-surface text-ink transition-colors"
       [class]="wrapperClasses()"
     >
       @if (multiline()) {
@@ -1612,7 +1618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], currentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLanguage", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], languageSwitcherLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "languageSwitcherLabel", required: false }] }], untranslatedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "untranslatedLabel", required: false }] }] } });
 
-let nextId$a = 0;
+let nextId$b = 0;
 const SIZES$8 = {
     md: 'h-12 w-11 text-lg',
     lg: 'h-14 w-12 text-xl',
@@ -1629,7 +1635,7 @@ const SIZES$8 = {
  * first box and have it land correctly.
  */
 class SdsOtpInput {
-    groupId = `sds-otp-${nextId$a++}`;
+    groupId = `sds-otp-${nextId$b++}`;
     /** How many boxes / characters the code has. */
     length = input(6, ...(ngDevMode ? [{ debugName: "length", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
@@ -1850,7 +1856,7 @@ class SdsOtpInput {
           [disabled]="isDisabled()"
           [attr.aria-label]="cellLabel() + ' ' + (i + 1)"
           [attr.aria-invalid]="error() ? 'true' : null"
-          class="bg-white text-center font-semibold tabular-nums outline-none transition-colors
+          class="bg-surface text-center font-semibold tabular-nums outline-none transition-colors
                  disabled:cursor-not-allowed"
           [class]="cellClasses()"
           (input)="onInput($event, i)"
@@ -1908,7 +1914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           [disabled]="isDisabled()"
           [attr.aria-label]="cellLabel() + ' ' + (i + 1)"
           [attr.aria-invalid]="error() ? 'true' : null"
-          class="bg-white text-center font-semibold tabular-nums outline-none transition-colors
+          class="bg-surface text-center font-semibold tabular-nums outline-none transition-colors
                  disabled:cursor-not-allowed"
           [class]="cellClasses()"
           (input)="onInput($event, i)"
@@ -1929,7 +1935,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$9 = 0;
+let nextId$a = 0;
 const SIZES$7 = {
     sm: 'text-sm px-3 py-2',
     md: 'text-sm px-3.5 py-2.5',
@@ -1941,7 +1947,7 @@ const SIZES$7 = {
  * [(ngModel)].
  */
 class SdsTextarea {
-    fieldId = `sds-textarea-${nextId$9++}`;
+    fieldId = `sds-textarea-${nextId$a++}`;
     field = viewChild('field', ...(ngDevMode ? [{ debugName: "field" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
@@ -1984,7 +1990,7 @@ class SdsTextarea {
     }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
     fieldClasses = computed(() => {
         const parts = [
-            'block w-full rounded-control border bg-white text-ink outline-none transition-colors placeholder:text-ink-faint',
+            'block w-full rounded-control border bg-surface text-ink outline-none transition-colors placeholder:text-ink-faint',
             SIZES$7[this.size()],
         ];
         if (this.autoResize())
@@ -2179,7 +2185,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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }] } });
 
-let nextId$8 = 0;
+let nextId$9 = 0;
 const SIZES$6 = {
     sm: { track: 'h-5 w-9', knob: 'h-4 w-4', on: 'translate-x-4', icon: 11 },
     md: { track: 'h-6 w-11', knob: 'h-5 w-5', on: 'translate-x-5', icon: 13 },
@@ -2192,7 +2198,7 @@ const SIZES$6 = {
  * states.
  */
 class SdsToggleSwitch {
-    fieldId = `sds-toggle-switch-${nextId$8++}`;
+    fieldId = `sds-toggle-switch-${nextId$9++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -2429,7 +2435,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$7 = 0;
+let nextId$8 = 0;
 /**
  * Boolean checkbox. Implements ControlValueAccessor — use with reactive forms
  * or `[(ngModel)]`. Renders a styled box (brand-filled with a check when on)
@@ -2439,7 +2445,7 @@ let nextId$7 = 0;
  * <sds-checkbox label="Fusion automatique" [(ngModel)]="autoMerge" />
  */
 class SdsCheckbox {
-    id = `sds-checkbox-${nextId$7++}`;
+    id = `sds-checkbox-${nextId$8++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     /** Accessible name used when no visible [label] is provided. */
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -2453,7 +2459,7 @@ class SdsCheckbox {
         const size = this.size() === 'sm' ? 'h-4 w-4' : 'h-5 w-5';
         const state = this.checked()
             ? 'border-brand-600 bg-brand-600 text-white'
-            : 'border-border bg-white text-transparent';
+            : 'border-border bg-surface text-transparent';
         const focus = 'focus-within:ring-2 focus-within:ring-brand-500/30 focus-within:border-brand-500';
         return `${size} ${state} ${focus}`;
     }, ...(ngDevMode ? [{ debugName: "boxClasses" }] : []));
@@ -3257,7 +3263,7 @@ class SdsCalendar {
         <div class="mt-2 flex items-center gap-2 border-t border-border pt-2">
           <span class="text-xs font-medium text-ink-soft">{{ timeLabel() }}</span>
           <div class="ml-auto inline-flex items-center gap-1.5">
-            <div class="inline-flex items-center rounded-control border border-border bg-white">
+            <div class="inline-flex items-center rounded-control border border-border bg-surface">
               <input
                 type="text"
                 inputmode="numeric"
@@ -3297,7 +3303,7 @@ class SdsCalendar {
               </div>
             </div>
             <span class="text-sm font-semibold text-ink-soft">:</span>
-            <div class="inline-flex items-center rounded-control border border-border bg-white">
+            <div class="inline-flex items-center rounded-control border border-border bg-surface">
               <input
                 type="text"
                 inputmode="numeric"
@@ -3486,7 +3492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         <div class="mt-2 flex items-center gap-2 border-t border-border pt-2">
           <span class="text-xs font-medium text-ink-soft">{{ timeLabel() }}</span>
           <div class="ml-auto inline-flex items-center gap-1.5">
-            <div class="inline-flex items-center rounded-control border border-border bg-white">
+            <div class="inline-flex items-center rounded-control border border-border bg-surface">
               <input
                 type="text"
                 inputmode="numeric"
@@ -3526,7 +3532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
               </div>
             </div>
             <span class="text-sm font-semibold text-ink-soft">:</span>
-            <div class="inline-flex items-center rounded-control border border-border bg-white">
+            <div class="inline-flex items-center rounded-control border border-border bg-surface">
               <input
                 type="text"
                 inputmode="numeric"
@@ -3613,7 +3619,7 @@ const SIZES$5 = {
 class SdsDatePicker {
     host = inject(ElementRef);
     injector = inject(Injector);
-    fieldId = `sds-date-${nextId$6++}`;
+    fieldId = `sds-date-${nextId$7++}`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     placeholder = input('jj/mm/aaaa', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
@@ -3901,7 +3907,7 @@ class SdsDatePicker {
       <div class="relative">
         <div
           #trigger
-          class="relative flex items-center rounded-control border bg-white transition-colors"
+          class="relative flex items-center rounded-control border bg-surface transition-colors"
           [class]="wrapperClasses()"
           (click)="toggle()"
         >
@@ -4036,7 +4042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       <div class="relative">
         <div
           #trigger
-          class="relative flex items-center rounded-control border bg-white transition-colors"
+          class="relative flex items-center rounded-control border bg-surface transition-colors"
           [class]="wrapperClasses()"
           (click)="toggle()"
         >
@@ -4128,7 +4134,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$6 = 0;
+let nextId$7 = 0;
 
 /**
  * Supplies a custom template for each option row (and the selected value shown
@@ -4212,7 +4218,7 @@ const SIZES$4 = {
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
 };
-let nextId$5 = 0;
+let nextId$6 = 0;
 /**
  * Single-select dropdown. Options may be primitives or objects (configure via
  * [optionLabel]/[optionValue]/[optionDisabled]). The overlay is appended to
@@ -4246,7 +4252,7 @@ let nextId$5 = 0;
 class SdsSelect {
     host = inject(ElementRef);
     injector = inject(Injector);
-    selectId = `sds-select-${nextId$5++}`;
+    selectId = `sds-select-${nextId$6++}`;
     listId = `${this.selectId}-list`;
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
@@ -4310,7 +4316,7 @@ class SdsSelect {
                 : 'border-white/15 focus:border-white/40 focus:ring-2 focus:ring-white/20');
         }
         else {
-            parts.push('bg-white text-ink');
+            parts.push('bg-surface text-ink');
             parts.push(this.error()
                 ? 'border-danger focus:border-danger focus:ring-2 focus:ring-danger/25'
                 : 'border-border focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25');
@@ -4929,7 +4935,7 @@ const SIZES$3 = {
     md: 'min-h-10 text-sm',
     lg: 'min-h-12 text-base',
 };
-let nextId$4 = 0;
+let nextId$5 = 0;
 /**
  * Multi-select dropdown (value is an array). Options may be primitives or
  * objects (configure via [optionLabel]/[optionValue]/[optionDisabled]). The
@@ -4962,7 +4968,7 @@ let nextId$4 = 0;
 class SdsMultiSelect {
     host = inject(ElementRef);
     injector = inject(Injector);
-    selectId = `sds-multiselect-${nextId$4++}`;
+    selectId = `sds-multiselect-${nextId$5++}`;
     listId = `${this.selectId}-list`;
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
@@ -5103,7 +5109,7 @@ class SdsMultiSelect {
     checkboxClass(checked, indeterminate) {
         return checked || indeterminate
             ? 'border-brand-600 bg-brand-600 text-white'
-            : 'border-border bg-white';
+            : 'border-border bg-surface';
     }
     // --- open / close ---
     toggle() {
@@ -5404,7 +5410,7 @@ class SdsMultiSelect {
         [attr.aria-haspopup]="'listbox'"
         [attr.aria-activedescendant]="open() && !filter() ? activeDescId() : null"
         [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
-        class="relative flex items-center rounded-control border bg-white transition-colors focus:outline-none"
+        class="relative flex items-center rounded-control border bg-surface transition-colors focus:outline-none"
         [class]="wrapperClasses()"
         (click)="toggle()"
         (keydown)="onTriggerKeydown($event)"
@@ -5595,7 +5601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [attr.aria-haspopup]="'listbox'"
         [attr.aria-activedescendant]="open() && !filter() ? activeDescId() : null"
         [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
-        class="relative flex items-center rounded-control border bg-white transition-colors focus:outline-none"
+        class="relative flex items-center rounded-control border bg-surface transition-colors focus:outline-none"
         [class]="wrapperClasses()"
         (click)="toggle()"
         (keydown)="onTriggerKeydown($event)"
@@ -5824,7 +5830,7 @@ const SIZES$2 = {
     md: 'h-10 text-sm',
     lg: 'h-12 text-base',
 };
-let nextId$3 = 0;
+let nextId$4 = 0;
 /**
  * International phone number input: a country selector (ISO chip + dial code)
  * with a searchable, body-appended dropdown, plus a formatted national-number
@@ -5839,7 +5845,7 @@ let nextId$3 = 0;
 class SdsPhoneInput {
     host = inject(ElementRef);
     injector = inject(Injector);
-    fieldId = `sds-phone-${nextId$3++}`;
+    fieldId = `sds-phone-${nextId$4++}`;
     listId = `${this.fieldId}-list`;
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
@@ -6273,7 +6279,7 @@ class SdsPhoneInput {
 
     <div
       #anchor
-      class="relative flex items-stretch rounded-control border bg-white transition-colors"
+      class="relative flex items-stretch rounded-control border bg-surface transition-colors"
       [class]="wrapperClasses()"
     >
       <!-- country selector -->
@@ -6414,7 +6420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
     <div
       #anchor
-      class="relative flex items-stretch rounded-control border bg-white transition-colors"
+      class="relative flex items-stretch rounded-control border bg-surface transition-colors"
       [class]="wrapperClasses()"
     >
       <!-- country selector -->
@@ -6803,7 +6809,7 @@ class SdsPaginator {
             [disabled]="disabled()"
             [attr.aria-label]="jumpToPageAriaLabel()"
             (change)="onJump($event)"
-            class="h-9 w-16 rounded-control border border-border bg-white px-2 text-center text-sm text-ink outline-none transition-colors focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25 disabled:opacity-60"
+            class="h-9 w-16 rounded-control border border-border bg-surface px-2 text-center text-sm text-ink outline-none transition-colors focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25 disabled:opacity-60"
           />
         </label>
       }
@@ -6912,7 +6918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             [disabled]="disabled()"
             [attr.aria-label]="jumpToPageAriaLabel()"
             (change)="onJump($event)"
-            class="h-9 w-16 rounded-control border border-border bg-white px-2 text-center text-sm text-ink outline-none transition-colors focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25 disabled:opacity-60"
+            class="h-9 w-16 rounded-control border border-border bg-surface px-2 text-center text-sm text-ink outline-none transition-colors focus:border-brand-500 focus:ring-2 focus:ring-brand-500/25 disabled:opacity-60"
           />
         </label>
       }
@@ -6921,7 +6927,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$2 = 0;
+let nextId$3 = 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
@@ -6931,7 +6937,7 @@ let nextId$2 = 0;
  */
 class SdsTabsStore {
     /** Unique base id used to link tabs and panels via ARIA. */
-    id = `sds-tabs-${nextId$2++}`;
+    id = `sds-tabs-${nextId$3++}`;
     /** Whether the tab list scrolls horizontally (mirrors [scrollable]). */
     scrollable = signal(false, ...(ngDevMode ? [{ debugName: "scrollable" }] : []));
     value;
@@ -7213,7 +7219,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$1 = 0;
+let nextId$2 = 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
@@ -7223,7 +7229,7 @@ let nextId$1 = 0;
  */
 class SdsAccordionStore {
     /** Unique base id used to link headers and content regions via ARIA. */
-    id = `sds-accordion-${nextId$1++}`;
+    id = `sds-accordion-${nextId$2++}`;
     /** Whether more than one panel may be open at a time (mirrors [multiple]). */
     multiple = signal(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
     value;
@@ -7561,7 +7567,7 @@ const ALIGN = {
     center: 'text-center',
     right: 'text-right',
 };
-let nextId = 0;
+let nextId$1 = 0;
 /**
  * Client-side data table mirroring PrimeNG's table, scoped to a strong local
  * feature set: sorting, pagination (reuses {@link SdsPaginator}), global filter,
@@ -7590,7 +7596,7 @@ let nextId = 0;
  * </sds-table>
  */
 class SdsTable {
-    tableId = `sds-table-${nextId++}`;
+    tableId = `sds-table-${nextId$1++}`;
     // --- inputs ---------------------------------------------------------------
     value = input([], ...(ngDevMode ? [{ debugName: "value" }] : []));
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
@@ -8088,11 +8094,11 @@ class SdsTable {
     checkboxClass(checked, indeterminate) {
         return checked || indeterminate
             ? 'border-brand-600 bg-brand-600 text-white'
-            : 'border-border bg-white';
+            : 'border-border bg-surface';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTable, isStandalone: true, selector: "sds-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, gridlines: { classPropertyName: "gridlines", publicName: "gridlines", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, showCurrentPageReport: { classPropertyName: "showCurrentPageReport", publicName: "showCurrentPageReport", isSignal: true, isRequired: false, transformFunction: null }, currentPageReportTemplate: { classPropertyName: "currentPageReportTemplate", publicName: "currentPageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageLabel: { classPropertyName: "rowsPerPageLabel", publicName: "rowsPerPageLabel", isSignal: true, isRequired: false, transformFunction: null }, paginationLabel: { classPropertyName: "paginationLabel", publicName: "paginationLabel", isSignal: true, isRequired: false, transformFunction: null }, firstPageLabel: { classPropertyName: "firstPageLabel", publicName: "firstPageLabel", isSignal: true, isRequired: false, transformFunction: null }, previousPageLabel: { classPropertyName: "previousPageLabel", publicName: "previousPageLabel", isSignal: true, isRequired: false, transformFunction: null }, nextPageLabel: { classPropertyName: "nextPageLabel", publicName: "nextPageLabel", isSignal: true, isRequired: false, transformFunction: null }, lastPageLabel: { classPropertyName: "lastPageLabel", publicName: "lastPageLabel", isSignal: true, isRequired: false, transformFunction: null }, pageLinkLabel: { classPropertyName: "pageLinkLabel", publicName: "pageLinkLabel", isSignal: true, isRequired: false, transformFunction: null }, globalFilter: { classPropertyName: "globalFilter", publicName: "globalFilter", isSignal: true, isRequired: false, transformFunction: null }, globalFilterPlaceholder: { classPropertyName: "globalFilterPlaceholder", publicName: "globalFilterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, globalFilterAriaLabel: { classPropertyName: "globalFilterAriaLabel", publicName: "globalFilterAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFields: { classPropertyName: "globalFilterFields", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, resizableColumns: { classPropertyName: "resizableColumns", publicName: "resizableColumns", isSignal: true, isRequired: false, transformFunction: null }, reorderableColumns: { classPropertyName: "reorderableColumns", publicName: "reorderableColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", sortChange: "sortChange", pageChange: "pageChange", rowSelect: "rowSelect", rowUnselect: "rowUnselect", lazyLoad: "lazyLoad", rowClick: "rowClick", rowExpand: "rowExpand", rowCollapse: "rowCollapse", colReorder: "colReorder" }, host: { classAttribute: "block" }, queries: [{ propertyName: "cellTemplates", predicate: SdsTableCell, isSignal: true }, { propertyName: "rowExpansion", first: true, predicate: SdsTableRowExpansion, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="rounded-card border border-border bg-white overflow-hidden">
+    <div class="rounded-card border border-border bg-surface overflow-hidden">
       <!-- Toolbar: caption + global filter -->
       @if (caption() || globalFilter()) {
         <div class="flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3">
@@ -8104,7 +8110,7 @@ class SdsTable {
 
           @if (globalFilter()) {
             <div
-              class="relative flex h-9 items-center rounded-control border border-border bg-white transition-colors focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25"
+              class="relative flex h-9 items-center rounded-control border border-border bg-surface transition-colors focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25"
             >
               <sds-icon
                 name="search"
@@ -8395,7 +8401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     imports: [SdsIcon, SdsPaginator, NgTemplateOutlet],
                     host: { class: 'block' },
                     template: `
-    <div class="rounded-card border border-border bg-white overflow-hidden">
+    <div class="rounded-card border border-border bg-surface overflow-hidden">
       <!-- Toolbar: caption + global filter -->
       @if (caption() || globalFilter()) {
         <div class="flex flex-wrap items-center justify-between gap-3 border-b border-border px-4 py-3">
@@ -8407,7 +8413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
           @if (globalFilter()) {
             <div
-              class="relative flex h-9 items-center rounded-control border border-border bg-white transition-colors focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25"
+              class="relative flex h-9 items-center rounded-control border border-border bg-surface transition-colors focus-within:border-brand-500 focus-within:ring-2 focus-within:ring-brand-500/25"
             >
               <sds-icon
                 name="search"
@@ -8843,6 +8849,153 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }] } });
 
+const STORAGE_KEY = 'sds-theme';
+/**
+ * Light/dark theme state for the whole app. It owns exactly one thing: the presence of the `.dark`
+ * class on the document root, which flips every design token defined under `.dark` in the theme CSS
+ * (base.css and the brand ramp). Because the library themes by ROLE, this single class re-themes the
+ * entire component set — there is no per-component dark mode to wire.
+ *
+ * `providedIn: 'root'`, so the switcher, the shell and any feature share one source of truth:
+ *
+ * ```ts
+ * private readonly theme = inject(SdsThemeService);
+ * this.theme.toggle();            // flip
+ * this.theme.isDark();            // read (a signal)
+ * ```
+ *
+ * Initial value: a previously stored choice wins; otherwise the OS `prefers-color-scheme` is honoured,
+ * so a first-time visitor already in dark at the OS level lands in dark. The choice is persisted to
+ * `localStorage` and re-applied on the next visit. Every browser access is guarded, so the service is
+ * safe under SSR / prerender (it simply no-ops without a DOM).
+ */
+class SdsThemeService {
+    document = inject(DOCUMENT);
+    theme = signal(this.initialTheme(), ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    isDark = computed(() => this.theme() === 'dark', ...(ngDevMode ? [{ debugName: "isDark" }] : []));
+    constructor() {
+        // Keep the DOM class and the stored preference in lockstep with the signal — one effect, so any
+        // caller that sets the signal (toggle, setTheme, or a future settings screen) applies uniformly.
+        effect(() => this.apply(this.theme()));
+    }
+    /** Flip between light and dark. */
+    toggle() {
+        this.theme.update((t) => (t === 'light' ? 'dark' : 'light'));
+    }
+    /** Set an explicit theme. */
+    setTheme(theme) {
+        this.theme.set(theme);
+    }
+    initialTheme() {
+        try {
+            const stored = this.readStorage()?.getItem(STORAGE_KEY);
+            if (stored === 'light' || stored === 'dark')
+                return stored;
+            const win = this.document.defaultView;
+            if (win?.matchMedia('(prefers-color-scheme: dark)').matches)
+                return 'dark';
+        }
+        catch {
+            /* no storage / no matchMedia (SSR, privacy mode) — fall through to the light default */
+        }
+        return 'light';
+    }
+    apply(theme) {
+        const root = this.document.documentElement;
+        root.classList.toggle('dark', theme === 'dark');
+        // Let the UA paint form controls / scrollbars to match.
+        root.style.colorScheme = theme;
+        try {
+            this.readStorage()?.setItem(STORAGE_KEY, theme);
+        }
+        catch {
+            /* storage unavailable — the class is still applied; only persistence is skipped */
+        }
+    }
+    readStorage() {
+        return this.document.defaultView?.localStorage ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsThemeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsThemeService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Icon button that flips the app between light and dark, backed by {@link SdsThemeService}. It shows the
+ * destination, not the current state — a moon while you are in light (tap to go dark), a sun while you
+ * are in dark — and its accessible name names the action, because an icon-only control's label is its
+ * only name.
+ *
+ * Two appearances so it sits correctly on either bar: `surface` (default) for a light or glass top bar,
+ * `on-brand` for the dark brand bar / sidebar.
+ *
+ * @example
+ * <sds-theme-toggle />
+ * <sds-theme-toggle appearance="on-brand" [lightLabel]="'Passer en clair'" [darkLabel]="'Passer en sombre'" />
+ */
+class SdsThemeToggle {
+    theme = inject(SdsThemeService);
+    isDark = this.theme.isDark;
+    /** Button box size in px (the icon scales with it). */
+    size = input(40, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** `surface` for light/glass bars, `on-brand` for the dark brand bar. */
+    appearance = input('surface', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /**
+     * Accessible names for the two actions. French defaults keep existing consumers unchanged; a
+     * multilingual app must pass translated values.
+     */
+    darkLabel = input('Passer en mode sombre', ...(ngDevMode ? [{ debugName: "darkLabel" }] : []));
+    lightLabel = input('Passer en mode clair', ...(ngDevMode ? [{ debugName: "lightLabel" }] : []));
+    iconSize = computed(() => Math.round(this.size() * 0.5), ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    label = computed(() => (this.isDark() ? this.lightLabel() : this.darkLabel()), ...(ngDevMode ? [{ debugName: "label" }] : []));
+    buttonClasses = computed(() => this.appearance() === 'on-brand'
+        ? 'text-white/85 hover:bg-white/10 hover:text-white focus-visible:ring-white/40'
+        : 'bg-muted text-ink-soft hover:bg-brand-50 hover:text-brand-600 focus-visible:ring-brand-500/40', ...(ngDevMode ? [{ debugName: "buttonClasses" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsThemeToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: SdsThemeToggle, isStandalone: true, selector: "sds-theme-toggle", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, darkLabel: { classPropertyName: "darkLabel", publicName: "darkLabel", isSignal: true, isRequired: false, transformFunction: null }, lightLabel: { classPropertyName: "lightLabel", publicName: "lightLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-block" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="inline-flex items-center justify-center rounded-control transition-colors focus-visible:outline-none focus-visible:ring-2"
+      [class]="buttonClasses()"
+      [style.width.px]="size()"
+      [style.height.px]="size()"
+      [attr.aria-label]="label()"
+      [attr.aria-pressed]="isDark()"
+      [attr.title]="label()"
+      (click)="theme.toggle()"
+    >
+      <sds-icon [name]="isDark() ? 'sun' : 'moon'" [size]="iconSize()" />
+    </button>
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsThemeToggle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-theme-toggle',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
+                    host: { class: 'inline-block' },
+                    template: `
+    <button
+      type="button"
+      class="inline-flex items-center justify-center rounded-control transition-colors focus-visible:outline-none focus-visible:ring-2"
+      [class]="buttonClasses()"
+      [style.width.px]="size()"
+      [style.height.px]="size()"
+      [attr.aria-label]="label()"
+      [attr.aria-pressed]="isDark()"
+      [attr.title]="label()"
+      (click)="theme.toggle()"
+    >
+      <sds-icon [name]="isDark() ? 'sun' : 'moon'" [size]="iconSize()" />
+    </button>
+  `,
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], darkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkLabel", required: false }] }], lightLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lightLabel", required: false }] }] } });
+
 /**
  * Shared collapse state for the sidebar and its nav items.
  *
@@ -8853,6 +9006,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class SidebarStore {
     /** Desktop rail state: collapsed to icon-only width (applies at ≥ lg). */
     collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    /**
+     * 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" }] : []));
     /** Mobile drawer state: whether the off-canvas sidebar is slid in (< lg). */
     mobileOpen = signal(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : []));
     /** Toggle the desktop icon-rail. */
@@ -8885,10 +9044,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 /**
  * Application top bar: a logo slot, the app name, and three slots the app fills.
  *
- * Two appearances. `brand` is the gradient-and-wave bar an internal tool wants. `surface` is white on
+ * Three appearances. `brand` is the gradient-and-wave bar an internal tool wants. `surface` is white on
  * a hairline border, for a bar that has to sit under a customer-facing page without dominating it —
- * a storefront header is a bar, but it is not a banner. The slots and the layout are identical in
- * both; only the paint differs, so a consumer app gets the same structure without the brand fill.
+ * a storefront header is a bar, but it is not a banner. `glass` is a translucent, brand-tinted bar with
+ * a blur behind it, for a dashboard that wants the brand present but light — it reads the brand from the
+ * ramp, so it tints itself to whatever theme is loaded and flips with dark mode. The slots and the
+ * layout are identical across all three; only the paint differs.
+ *
+ * `[decorations]` adds slow-drifting, brand-tinted blobs behind the bar (opt-in; they respect
+ * prefers-reduced-motion). They pair with `glass`/`surface`; on `brand` the wave already fills that role.
  *
  * It deliberately owns NO account UI. It used to render the signed-in user and a logout button, which
  * forced every consumer into one shape — no dropdown, no email, no menu, no busy state, and an
@@ -8900,7 +9064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * `[sdsCenter]` (the flexible middle — a search field), `[sdsActions]` (the right edge).
  *
  * @example
- * <sds-topbar appName="WebApp">
+ * <sds-topbar appName="Design system">
  *   <img sdsLogo src="logo.svg" alt="" />
  *   <my-address-picker sdsLead />
  *   <my-search sdsCenter />
@@ -8930,16 +9094,29 @@ class SdsTopbar {
      * aria-label is its only name, and a hardcoded one is simply wrong in every other locale.
      */
     menuLabel = input('Ouvrir le menu', ...(ngDevMode ? [{ debugName: "menuLabel" }] : []));
-    /** `brand` (default) paints the gradient and the wave; `surface` is white on a hairline border. */
+    /**
+     * `brand` (default) paints the gradient and the wave; `surface` is white on a hairline border;
+     * `glass` is a translucent, brand-tinted bar with a backdrop blur.
+     */
     appearance = input('brand', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
-    shellClasses = computed(() => this.appearance() === 'brand'
-        ? 'bg-linear-to-r from-brand-800 via-brand-700 to-brand-600 text-white'
-        : 'border-b border-border bg-surface text-ink', ...(ngDevMode ? [{ debugName: "shellClasses" }] : []));
+    /** Add slow-drifting brand-tinted blobs behind the bar (opt-in; pairs with `glass`/`surface`). */
+    decorations = input(false, ...(ngDevMode ? [{ debugName: "decorations", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    shellClasses = computed(() => {
+        switch (this.appearance()) {
+            case 'brand':
+                return 'bg-linear-to-r from-brand-800 via-brand-700 to-brand-600 text-white';
+            case 'glass':
+                // Translucent so the blur shows the page tint through; the brand edge is read from the ramp.
+                return 'border-b border-border bg-linear-to-r from-surface/85 via-surface/80 to-brand-100/70 text-ink backdrop-blur-xl';
+            default:
+                return 'border-b border-border bg-surface text-ink';
+        }
+    }, ...(ngDevMode ? [{ debugName: "shellClasses" }] : []));
     menuButtonClasses = computed(() => this.appearance() === 'brand'
         ? 'text-white/85 hover:bg-white/10 hover:text-white focus-visible:ring-white/40'
         : 'text-ink-soft hover:bg-muted hover:text-ink focus-visible:ring-brand-500/40', ...(ngDevMode ? [{ debugName: "menuButtonClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTopbar, isStandalone: true, selector: "sds-topbar", inputs: { appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null }, menuButton: { classPropertyName: "menuButton", publicName: "menuButton", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTopbar, isStandalone: true, selector: "sds-topbar", inputs: { appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null }, menuButton: { classPropertyName: "menuButton", publicName: "menuButton", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", 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: { classAttribute: "block" }, ngImport: i0, template: `
     <header class="relative z-30" [class]="shellClasses()" style="height: var(--sds-topbar-h)">
       <!--
         Decorative wave. The clip lives HERE, on the wave's own wrapper, and not on the header.
@@ -8977,6 +9154,18 @@ class SdsTopbar {
       </span>
       }
 
+      <!--
+        Brand-tinted ambient blobs. Behind the content and non-interactive; the clip lives on this span,
+        never on the header, so a projected menu/dropdown is not sliced. Colours come from the brand ramp,
+        so they follow the active theme and dark mode.
+      -->
+      @if (decorations()) {
+      <span class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
+        <span class="absolute -top-16 right-8 h-56 w-56 rounded-full bg-brand-300/25 blur-3xl animate-sds-ambient"></span>
+        <span class="absolute -top-10 right-[26%] h-40 w-40 rounded-full bg-brand-400/20 blur-3xl animate-sds-ambient [animation-delay:3s]"></span>
+      </span>
+      }
+
       <!--
         The band is always full-bleed — the gradient and the wave span the viewport — while the
         CONTENTS are constrained by [contentWidth], so a bar over a centred page lines up with it
@@ -9002,18 +9191,13 @@ class SdsTopbar {
         }
         <ng-content select="[sdsLogo]" />
         <!--
-          shrink-0 + whitespace-nowrap, both required. The left block is a flex row, so without them a
-          two-word app name wraps to a second line INSIDE a bar whose height is fixed at
-          --sds-topbar-h, and the name is clipped by its own bar. It surfaced at 375px on a bar
-          carrying a logo, a wordmark and a two-syllable name; it is wrong at every width.
-
-          The name never truncates and never hides: it is the answer to "which app am I in", which on a
-          platform of five same-branded apps is the one thing the bar must not drop. An app whose left
-          block is too crowded for a phone hides ITS OWN wordmark under sm and keeps the mark.
+          The app name is hidden on phones (< sm) and shown from sm up: on a narrow bar carrying a logo,
+          a search field and the account controls, the wordmark is what gives — the logo still answers
+          "which app". shrink-0 + whitespace-nowrap keep it on one line at the widths where it does show.
         -->
         @if (appName()) {
-          <span class="h-7 w-px shrink-0" [class]="appearance() === 'brand' ? 'bg-white/30' : 'bg-border'"></span>
-          <span class="shrink-0 whitespace-nowrap text-xl font-bold tracking-tight">{{ appName() }}</span>
+          <span class="hidden h-7 w-px shrink-0 sm:block" [class]="appearance() === 'brand' ? 'bg-white/30' : 'bg-border'" [style.opacity]="appearance() === 'glass' ? 0.7 : null"></span>
+          <span class="hidden shrink-0 whitespace-nowrap text-xl font-bold tracking-tight sm:inline-block">{{ appName() }}</span>
         }
         <ng-content select="[sdsLead]" />
       </div>
@@ -9076,6 +9260,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       </span>
       }
 
+      <!--
+        Brand-tinted ambient blobs. Behind the content and non-interactive; the clip lives on this span,
+        never on the header, so a projected menu/dropdown is not sliced. Colours come from the brand ramp,
+        so they follow the active theme and dark mode.
+      -->
+      @if (decorations()) {
+      <span class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
+        <span class="absolute -top-16 right-8 h-56 w-56 rounded-full bg-brand-300/25 blur-3xl animate-sds-ambient"></span>
+        <span class="absolute -top-10 right-[26%] h-40 w-40 rounded-full bg-brand-400/20 blur-3xl animate-sds-ambient [animation-delay:3s]"></span>
+      </span>
+      }
+
       <!--
         The band is always full-bleed — the gradient and the wave span the viewport — while the
         CONTENTS are constrained by [contentWidth], so a bar over a centred page lines up with it
@@ -9101,18 +9297,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }
         <ng-content select="[sdsLogo]" />
         <!--
-          shrink-0 + whitespace-nowrap, both required. The left block is a flex row, so without them a
-          two-word app name wraps to a second line INSIDE a bar whose height is fixed at
-          --sds-topbar-h, and the name is clipped by its own bar. It surfaced at 375px on a bar
-          carrying a logo, a wordmark and a two-syllable name; it is wrong at every width.
-
-          The name never truncates and never hides: it is the answer to "which app am I in", which on a
-          platform of five same-branded apps is the one thing the bar must not drop. An app whose left
-          block is too crowded for a phone hides ITS OWN wordmark under sm and keeps the mark.
+          The app name is hidden on phones (< sm) and shown from sm up: on a narrow bar carrying a logo,
+          a search field and the account controls, the wordmark is what gives — the logo still answers
+          "which app". shrink-0 + whitespace-nowrap keep it on one line at the widths where it does show.
         -->
         @if (appName()) {
-          <span class="h-7 w-px shrink-0" [class]="appearance() === 'brand' ? 'bg-white/30' : 'bg-border'"></span>
-          <span class="shrink-0 whitespace-nowrap text-xl font-bold tracking-tight">{{ appName() }}</span>
+          <span class="hidden h-7 w-px shrink-0 sm:block" [class]="appearance() === 'brand' ? 'bg-white/30' : 'bg-border'" [style.opacity]="appearance() === 'glass' ? 0.7 : null"></span>
+          <span class="hidden shrink-0 whitespace-nowrap text-xl font-bold tracking-tight sm:inline-block">{{ appName() }}</span>
         }
         <ng-content select="[sdsLead]" />
       </div>
@@ -9130,28 +9321,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     </header>
   `,
                 }]
-        }], propDecorators: { appName: [{ type: i0.Input, args: [{ isSignal: true, alias: "appName", required: false }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: false }] }], menuButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuButton", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
+        }], propDecorators: { appName: [{ type: i0.Input, args: [{ isSignal: true, alias: "appName", required: false }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: false }] }], menuButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuButton", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], decorations: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorations", required: false }] }] } });
 
 /**
  * App layout shell: a full-height column with the top bar across the top and a
  * row below holding the sidebar and the scrollable main content.
  *
+ * The content area is `plain` (flat canvas) by default. Set `[background]="'gradient'"` for the soft
+ * brand-tinted wash that pairs with the glass top bar and the surface sidebar, and add `[decorations]`
+ * for the slow drifting brand blobs behind the page. Both read the brand ramp, so they follow the active
+ * theme and dark mode, and the decorations respect prefers-reduced-motion.
+ *
  * @example
- * <sds-shell>
- *   <sds-topbar sdsTopbar … />
- *   <sds-sidebar sdsSidebar> … </sds-sidebar>
+ * <sds-shell background="gradient" decorations>
+ *   <sds-topbar appearance="glass" sdsTopbar … />
+ *   <sds-sidebar appearance="surface" sdsSidebar> … </sds-sidebar>
  *   <!-- routed page content -->
  *   <router-outlet />
  * </sds-shell>
  */
 class SdsShell {
+    /** `plain` flat canvas (default) or a soft brand-tinted `gradient` wash. */
+    background = input('plain', ...(ngDevMode ? [{ debugName: "background" }] : []));
+    /** Add slow-drifting brand-tinted blobs behind the page content (opt-in). */
+    decorations = input(false, ...(ngDevMode ? [{ debugName: "decorations", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    mainClass = computed(() => this.background() === 'gradient'
+        ? 'bg-linear-to-br from-brand-50/50 via-canvas to-brand-100/40'
+        : 'bg-canvas', ...(ngDevMode ? [{ debugName: "mainClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SdsShell, isStandalone: true, selector: "sds-shell", host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsShell, isStandalone: true, selector: "sds-shell", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, decorations: { classPropertyName: "decorations", publicName: "decorations", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <div class="flex h-screen flex-col overflow-hidden">
       <ng-content select="[sdsTopbar]" />
       <div class="flex min-h-0 flex-1">
         <ng-content select="[sdsSidebar]" />
-        <main class="min-w-0 flex-1 overflow-y-auto bg-canvas">
+        <main class="relative isolate min-w-0 flex-1 overflow-y-auto" [class]="mainClass()">
+          @if (decorations()) {
+            <div class="pointer-events-none absolute inset-0 -z-10 overflow-hidden" aria-hidden="true">
+              <div class="absolute -left-32 top-10 h-96 w-96 rounded-full bg-brand-300/15 blur-3xl animate-sds-ambient"></div>
+              <div class="absolute -right-40 top-1/3 h-[28rem] w-[28rem] rounded-full bg-brand-400/12 blur-3xl animate-sds-ambient [animation-delay:4s]"></div>
+              <div class="absolute bottom-10 left-1/4 h-80 w-80 rounded-full bg-brand-200/20 blur-3xl animate-sds-ambient [animation-delay:7s]"></div>
+            </div>
+          }
           <ng-content />
         </main>
       </div>
@@ -9169,22 +9379,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       <ng-content select="[sdsTopbar]" />
       <div class="flex min-h-0 flex-1">
         <ng-content select="[sdsSidebar]" />
-        <main class="min-w-0 flex-1 overflow-y-auto bg-canvas">
+        <main class="relative isolate min-w-0 flex-1 overflow-y-auto" [class]="mainClass()">
+          @if (decorations()) {
+            <div class="pointer-events-none absolute inset-0 -z-10 overflow-hidden" aria-hidden="true">
+              <div class="absolute -left-32 top-10 h-96 w-96 rounded-full bg-brand-300/15 blur-3xl animate-sds-ambient"></div>
+              <div class="absolute -right-40 top-1/3 h-[28rem] w-[28rem] rounded-full bg-brand-400/12 blur-3xl animate-sds-ambient [animation-delay:4s]"></div>
+              <div class="absolute bottom-10 left-1/4 h-80 w-80 rounded-full bg-brand-200/20 blur-3xl animate-sds-ambient [animation-delay:7s]"></div>
+            </div>
+          }
           <ng-content />
         </main>
       </div>
     </div>
   `,
                 }]
-        }] });
+        }], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], decorations: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorations", required: false }] }] } });
 
 /**
  * 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
  * [sdsFooter] slot. Collapse state is shared through SidebarStore.
  *
+ * Two appearances. `brand` (default) is the dark brand rail. `surface` is a light rail with a faint
+ * brand wash and brand-tinted active items — the counterpart to the glass top bar. The appearance is
+ * published to SidebarStore so the projected nav items adopt the matching state colours from this one
+ * input. `[decorations]` adds the same slow brand-tinted blobs the top bar and container use.
+ *
+ * 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.
+ *
  * @example
- * <sds-sidebar>
+ * <sds-sidebar appearance="surface" decorations>
  *   <sds-nav-group label="Membres">
  *     <sds-nav-item icon="user-plus" label="Créer un membre" link="/membres/new" />
  *   </sds-nav-group>
@@ -9193,22 +9420,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  */
 class SdsSidebar {
     store = inject(SidebarStore);
+    document = inject(DOCUMENT);
+    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" }] : []));
+    /** The element focused before the drawer opened, restored to it on close. */
+    restoreFocusTo = null;
+    constructor() {
+        // Publish the rail's paint so projected nav 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));
+        }
+        // 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(() => {
+            const open = this.mobileOpen();
+            if (!this.belowLg())
+                return;
+            if (open) {
+                this.restoreFocusTo = this.document.activeElement;
+                this.closeBtn()?.nativeElement.focus();
+            }
+            else if (this.restoreFocusTo) {
+                this.restoreFocusTo.focus();
+                this.restoreFocusTo = null;
+            }
+        });
+    }
     /**
      * Accessible names for the rail's three icon-only controls. French defaults keep existing consumers
-     * unchanged; a multilingual app must pass translated values, since an icon-only button's aria-label
-     * is its only name.
+     * unchanged; a multilingual app must pass translated values.
      */
     collapseLabel = input('Replier le menu', ...(ngDevMode ? [{ debugName: "collapseLabel" }] : []));
     expandLabel = input('Déplier le menu', ...(ngDevMode ? [{ debugName: "expandLabel" }] : []));
     closeLabel = input('Fermer le menu', ...(ngDevMode ? [{ debugName: "closeLabel" }] : []));
+    /** `brand` (default) is the dark rail; `surface` is a light rail with brand accents. */
+    appearance = input('brand', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /** 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;
     mobileOpen = this.store.mobileOpen;
+    asideClass = computed(() => {
+        // The rail must stay OPAQUE: as a mobile drawer it slides over page content, so a translucent stop
+        // (e.g. to-brand-50/50) would let that content bleed through. All gradient stops are opaque; the
+        // wash is a subtle surface->brand-50 tint, not a transparency.
+        const paint = this.appearance() === 'surface'
+            ? 'bg-surface bg-linear-to-b from-surface via-surface to-brand-50 text-ink border-r border-border'
+            : 'bg-brand-900 text-white';
+        const slide = this.mobileOpen() ? 'translate-x-0' : '-translate-x-full';
+        return `${paint} ${slide}`;
+    }, ...(ngDevMode ? [{ debugName: "asideClass" }] : []));
+    /** The two header icon buttons, painted for the active rail. */
+    railBtnClass = computed(() => this.appearance() === 'surface'
+        ? '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()
         ? 'var(--sds-sidebar-w-collapsed)'
         : 'var(--sds-sidebar-w)', ...(ngDevMode ? [{ debugName: "railWidth" }] : []));
+    onEscape() {
+        if (this.mobileOpen())
+            this.store.closeMobile();
+    }
+    /** Keep Tab inside the open mobile drawer (a modal must not leak focus to the page behind the scrim). */
+    onDrawerKeydown(event) {
+        if (event.key !== 'Tab' || !this.mobileOpen() || !this.belowLg())
+            return;
+        const focusables = this.focusableEls();
+        if (!focusables.length)
+            return;
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        const active = this.document.activeElement;
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    focusableEls() {
+        const root = this.drawer()?.nativeElement;
+        if (!root)
+            return [];
+        const sel = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+        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 } }, host: { classAttribute: "block h-full" }, 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 }, 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: `
     <!-- Mobile backdrop (only when the drawer is open, < lg) -->
     @if (mobileOpen()) {
       <div
@@ -9219,23 +9525,37 @@ class SdsSidebar {
     }
 
     <!--
-      Mobile (< lg): fixed off-canvas drawer that slides in from the left.
-      Desktop (≥ lg): static, collapsible icon-rail (width via --sds-rail).
+      Mobile (< lg): fixed off-canvas drawer that slides in from the left, and is inert while closed so
+      its off-screen controls leave the tab order. Desktop (>= lg): the in-flow collapsible icon-rail. It
+      is lg:relative (not static) so the ambient blobs, which are absolutely positioned, anchor to it.
     -->
     <aside
-      class="fixed inset-y-0 left-0 z-50 flex h-full w-[var(--sds-sidebar-w)] flex-col bg-brand-900 text-white transition-transform duration-200 ease-out lg:static lg:z-auto lg:w-[var(--sds-rail)] lg:translate-x-0 lg:transition-[width]"
-      [class]="mobileOpen() ? 'translate-x-0' : '-translate-x-full'"
+      #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]="asideClass()"
       [style.--sds-rail]="railWidth()"
+      [inert]="belowLg() && !mobileOpen()"
+      [attr.role]="belowLg() && mobileOpen() ? 'dialog' : null"
+      [attr.aria-modal]="belowLg() && mobileOpen() ? 'true' : null"
+      (keydown)="onDrawerKeydown($event)"
     >
+      @if (decorations()) {
+        <span class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
+          <span class="absolute -top-16 -left-16 h-56 w-56 rounded-full bg-brand-300/20 blur-3xl animate-sds-ambient"></span>
+          <span class="absolute -bottom-24 -right-16 h-64 w-64 rounded-full bg-brand-400/15 blur-3xl animate-sds-ambient [animation-delay:4s]"></span>
+        </span>
+      }
+
       <!-- Header: collapse toggle (desktop) / close (mobile) -->
       <div
-        class="flex items-center px-3"
+        class="relative flex items-center px-3"
         style="height: 52px"
         [class]="collapsed() ? 'justify-end lg:justify-center' : 'justify-end'"
       >
         <button
           type="button"
-          class="hidden h-9 w-9 items-center justify-center rounded-control text-white/70 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 lg:inline-flex"
+          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]="railBtnClass()"
           [attr.aria-label]="collapsed() ? expandLabel() : collapseLabel()"
           [attr.aria-expanded]="!collapsed()"
           (click)="store.toggle()"
@@ -9246,8 +9566,10 @@ class SdsSidebar {
           />
         </button>
         <button
+          #closeBtn
           type="button"
-          class="inline-flex h-9 w-9 items-center justify-center rounded-control text-white/70 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 lg:hidden"
+          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]="railBtnClass()"
           [attr.aria-label]="closeLabel()"
           (click)="store.closeMobile()"
         >
@@ -9256,12 +9578,12 @@ class SdsSidebar {
       </div>
 
       <!-- Navigation -->
-      <nav class="flex-1 overflow-y-auto overflow-x-hidden px-3 pb-4">
+      <nav class="relative flex-1 overflow-y-auto overflow-x-hidden px-3 pb-4">
         <ng-content />
       </nav>
 
       <!-- Footer (search, version, …) -->
-      <div class="px-3 pb-4 pt-2">
+      <div class="relative px-3 pb-4 pt-2">
         <ng-content select="[sdsFooter]" />
       </div>
     </aside>
@@ -9273,7 +9595,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     selector: 'sds-sidebar',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [SdsIcon],
-                    host: { class: 'block h-full' },
+                    host: {
+                        class: 'block h-full',
+                        '(document:keydown.escape)': 'onEscape()',
+                    },
                     template: `
     <!-- Mobile backdrop (only when the drawer is open, < lg) -->
     @if (mobileOpen()) {
@@ -9285,23 +9610,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
 
     <!--
-      Mobile (< lg): fixed off-canvas drawer that slides in from the left.
-      Desktop (≥ lg): static, collapsible icon-rail (width via --sds-rail).
+      Mobile (< lg): fixed off-canvas drawer that slides in from the left, and is inert while closed so
+      its off-screen controls leave the tab order. Desktop (>= lg): the in-flow collapsible icon-rail. It
+      is lg:relative (not static) so the ambient blobs, which are absolutely positioned, anchor to it.
     -->
     <aside
-      class="fixed inset-y-0 left-0 z-50 flex h-full w-[var(--sds-sidebar-w)] flex-col bg-brand-900 text-white transition-transform duration-200 ease-out lg:static lg:z-auto lg:w-[var(--sds-rail)] lg:translate-x-0 lg:transition-[width]"
-      [class]="mobileOpen() ? 'translate-x-0' : '-translate-x-full'"
+      #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]="asideClass()"
       [style.--sds-rail]="railWidth()"
+      [inert]="belowLg() && !mobileOpen()"
+      [attr.role]="belowLg() && mobileOpen() ? 'dialog' : null"
+      [attr.aria-modal]="belowLg() && mobileOpen() ? 'true' : null"
+      (keydown)="onDrawerKeydown($event)"
     >
+      @if (decorations()) {
+        <span class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
+          <span class="absolute -top-16 -left-16 h-56 w-56 rounded-full bg-brand-300/20 blur-3xl animate-sds-ambient"></span>
+          <span class="absolute -bottom-24 -right-16 h-64 w-64 rounded-full bg-brand-400/15 blur-3xl animate-sds-ambient [animation-delay:4s]"></span>
+        </span>
+      }
+
       <!-- Header: collapse toggle (desktop) / close (mobile) -->
       <div
-        class="flex items-center px-3"
+        class="relative flex items-center px-3"
         style="height: 52px"
         [class]="collapsed() ? 'justify-end lg:justify-center' : 'justify-end'"
       >
         <button
           type="button"
-          class="hidden h-9 w-9 items-center justify-center rounded-control text-white/70 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 lg:inline-flex"
+          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]="railBtnClass()"
           [attr.aria-label]="collapsed() ? expandLabel() : collapseLabel()"
           [attr.aria-expanded]="!collapsed()"
           (click)="store.toggle()"
@@ -9312,8 +9651,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           />
         </button>
         <button
+          #closeBtn
           type="button"
-          class="inline-flex h-9 w-9 items-center justify-center rounded-control text-white/70 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 lg:hidden"
+          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]="railBtnClass()"
           [attr.aria-label]="closeLabel()"
           (click)="store.closeMobile()"
         >
@@ -9322,18 +9663,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       </div>
 
       <!-- Navigation -->
-      <nav class="flex-1 overflow-y-auto overflow-x-hidden px-3 pb-4">
+      <nav class="relative flex-1 overflow-y-auto overflow-x-hidden px-3 pb-4">
         <ng-content />
       </nav>
 
       <!-- Footer (search, version, …) -->
-      <div class="px-3 pb-4 pt-2">
+      <div class="relative px-3 pb-4 pt-2">
         <ng-content select="[sdsFooter]" />
       </div>
     </aside>
   `,
                 }]
-        }], propDecorators: { 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 }] }] } });
+        }], 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 }] }] } });
 
 /**
  * Groups nav items under an optional uppercase section label.
@@ -9371,13 +9712,39 @@ class SdsNavGroup {
     /** Explicit user choice; null means "follow the route". */
     manual = signal(null, ...(ngDevMode ? [{ debugName: "manual" }] : []));
     url = toSignal(this.router.events.pipe(filter((e) => e instanceof NavigationEnd), map((e) => e.urlAfterRedirects)), { initialValue: this.router.url });
-    /** True while the active route lives inside this group. */
+    /**
+     * True while the active route lives inside this group. Matches on segment boundaries, not a raw string
+     * prefix, so `/users/42` does NOT activate a group whose basePath is `/user` (query/hash are stripped
+     * first).
+     */
     routeActive = computed(() => {
         const base = this.basePath();
-        return !!base && this.url().startsWith(base);
+        if (!base)
+            return false;
+        const path = this.url().split(/[?#]/)[0];
+        return path === base || path.startsWith(base + '/');
     }, ...(ngDevMode ? [{ debugName: "routeActive" }] : []));
     expanded = computed(() => this.manual() ?? this.routeActive(), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
     collapsed = this.store.collapsed;
+    /** Rail paint, shared via the store — see SidebarStore.appearance. Drives the header/caption tones. */
+    surface = computed(() => this.store.appearance() === 'surface', ...(ngDevMode ? [{ debugName: "surface" }] : []));
+    /** Collapsible header, painted for the active rail (ink+brand on `surface`, white on `brand`). */
+    headerClass = computed(() => {
+        const s = this.surface();
+        const base = '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;
+    }, ...(ngDevMode ? [{ debugName: "headerClass" }] : []));
+    chevronClass = computed(() => 'shrink-0 transition-transform ' + (this.surface() ? 'text-ink-faint' : 'text-white/50'), ...(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" }] : []));
     /**
      * 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
@@ -9398,7 +9765,7 @@ class SdsNavGroup {
             parts.push('hidden');
         }
         if (this.collapsible() && !this.collapsed()) {
-            parts.push('ml-5 border-l border-white/10 pl-3');
+            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" }] : []));
@@ -9430,11 +9797,7 @@ class SdsNavGroup {
           -->
           <button
             type="button"
-            class="mb-1 flex h-10 w-full items-center gap-3 rounded-control px-3 text-sm font-medium
-                   text-white/70 transition-colors hover:bg-white/8 hover:text-white
-                   focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40"
-            [class.lg:justify-center]="collapsed()"
-            [class.text-white]="routeActive()"
+            [class]="headerClass()"
             [attr.aria-expanded]="collapsed() ? null : expanded()"
             [attr.title]="collapsed() ? label() : null"
             [attr.aria-label]="collapsed() ? label() : null"
@@ -9449,15 +9812,15 @@ class SdsNavGroup {
             <sds-icon
               name="chevron-down"
               [size]="16"
-              class="shrink-0 text-white/50 transition-transform"
+              [class]="chevronClass()"
               [class.lg:hidden]="collapsed()"
               [class.rotate-180]="expanded()"
             />
           </button>
         } @else if (collapsed()) {
-          <div class="mx-3 mb-2 mt-2 h-px bg-white/10"></div>
+          <div [class]="dividerClass()"></div>
         } @else {
-          <p class="mb-1.5 px-3 text-[11px] font-semibold uppercase tracking-wider text-white/60">
+          <p [class]="captionClass()">
             {{ label() }}
           </p>
         }
@@ -9493,11 +9856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           -->
           <button
             type="button"
-            class="mb-1 flex h-10 w-full items-center gap-3 rounded-control px-3 text-sm font-medium
-                   text-white/70 transition-colors hover:bg-white/8 hover:text-white
-                   focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40"
-            [class.lg:justify-center]="collapsed()"
-            [class.text-white]="routeActive()"
+            [class]="headerClass()"
             [attr.aria-expanded]="collapsed() ? null : expanded()"
             [attr.title]="collapsed() ? label() : null"
             [attr.aria-label]="collapsed() ? label() : null"
@@ -9512,15 +9871,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             <sds-icon
               name="chevron-down"
               [size]="16"
-              class="shrink-0 text-white/50 transition-transform"
+              [class]="chevronClass()"
               [class.lg:hidden]="collapsed()"
               [class.rotate-180]="expanded()"
             />
           </button>
         } @else if (collapsed()) {
-          <div class="mx-3 mb-2 mt-2 h-px bg-white/10"></div>
+          <div [class]="dividerClass()"></div>
         } @else {
-          <p class="mb-1.5 px-3 text-[11px] font-semibold uppercase tracking-wider text-white/60">
+          <p [class]="captionClass()">
             {{ label() }}
           </p>
         }
@@ -9556,15 +9915,31 @@ class SdsNavItem {
     select = output();
     collapsed = this.store.collapsed;
     itemClass(isActive) {
-        const base = 'group flex w-full items-center gap-3 rounded-control px-3 text-sm font-medium ' +
+        // 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 ' +
             'transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 ' +
-            'focus-visible:ring-white/40 ' +
+            (surface ? 'focus-visible:ring-brand-500/40 ' : 'focus-visible:ring-white/40 ') +
             (this.collapsed() ? 'h-10 lg:justify-center' : 'h-10');
         const state = isActive
-            ? 'bg-brand-500 text-white shadow-sm'
-            : 'text-white/70 hover:bg-white/8 hover:text-white';
+            ? 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}`;
     }
+    /**
+     * 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.
+     */
+    accentBarClass = computed(() => 'pointer-events-none absolute left-1 top-1/2 h-5 w-1 -translate-y-1/2 rounded-full ' +
+        (this.store.appearance() === 'surface' ? 'bg-brand-500' : 'bg-white'), ...(ngDevMode ? [{ debugName: "accentBarClass" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsNavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsNavItem, isStandalone: true, selector: "sds-nav-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, exact: { classPropertyName: "exact", publicName: "exact", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { classAttribute: "block" }, ngImport: i0, template: `
     @if (link() !== null) {
@@ -9579,6 +9954,9 @@ class SdsNavItem {
         [attr.aria-current]="rla.isActive || active() ? 'page' : null"
         (click)="store.closeMobile()"
       >
+        @if (rla.isActive || active()) {
+          <span [class]="accentBarClass()" aria-hidden="true"></span>
+        }
         <ng-container [ngTemplateOutlet]="content" />
       </a>
     } @else {
@@ -9590,6 +9968,9 @@ class SdsNavItem {
         [attr.aria-current]="active() ? 'page' : null"
         (click)="select.emit(); store.closeMobile()"
       >
+        @if (active()) {
+          <span [class]="accentBarClass()" aria-hidden="true"></span>
+        }
         <ng-container [ngTemplateOutlet]="content" />
       </button>
     }
@@ -9623,6 +10004,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [attr.aria-current]="rla.isActive || active() ? 'page' : null"
         (click)="store.closeMobile()"
       >
+        @if (rla.isActive || active()) {
+          <span [class]="accentBarClass()" aria-hidden="true"></span>
+        }
         <ng-container [ngTemplateOutlet]="content" />
       </a>
     } @else {
@@ -9634,6 +10018,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [attr.aria-current]="active() ? 'page' : null"
         (click)="select.emit(); store.closeMobile()"
       >
+        @if (active()) {
+          <span [class]="accentBarClass()" aria-hidden="true"></span>
+        }
         <ng-container [ngTemplateOutlet]="content" />
       </button>
     }
@@ -9649,6 +10036,1182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], exact: [{ type: i0.Input, args: [{ isSignal: true, alias: "exact", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
 
+/**
+ * The signed-in user's trigger and dropdown for the top bar: an avatar (with the name and email beside
+ * it on wider screens) that opens a panel with a gradient header and whatever menu rows the app projects
+ * — profile, settings, sign out. The library deliberately owns no fixed set of actions, because what
+ * belongs here differs per app; project <sds-menu-item> (or any markup) into the default slot.
+ *
+ * It manages its own open state, closes on outside click, on Escape, and whenever a menu row is
+ * activated, restoring focus to the trigger. Two appearances so the trigger sits correctly on either
+ * bar: `surface` (default) for a light / glass bar, `on-brand` for the dark brand bar — the same default
+ * as its top-bar siblings sds-theme-toggle and sds-search-command.
+ *
+ * It is a disclosure (aria-haspopup + aria-expanded on the trigger), not an ARIA menu widget: the rows
+ * are ordinary links/buttons the app projects, navigated with Tab like any popover.
+ *
+ * @example
+ * <sds-user-menu name="Souhail AIT SAID" email="souhail@example.com" status="online" appearance="surface">
+ *   <sds-menu-item icon="user" label="Profil" link="/profile" />
+ *   <sds-menu-item icon="settings" label="Paramètres" link="/settings" />
+ *   <sds-menu-item icon="log-out" label="Se déconnecter" tone="danger" (select)="signOut()" />
+ * </sds-user-menu>
+ */
+class SdsUserMenu {
+    el = inject(ElementRef);
+    trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    email = input('', ...(ngDevMode ? [{ debugName: "email" }] : []));
+    initials = input('', ...(ngDevMode ? [{ debugName: "initials" }] : []));
+    src = input(null, ...(ngDevMode ? [{ debugName: "src" }] : []));
+    status = input(null, ...(ngDevMode ? [{ debugName: "status" }] : []));
+    /** `surface` (default) for a light / glass bar; `on-brand` for the dark brand bar. */
+    appearance = input('surface', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /** Which edge the panel aligns to. `end` (default) hangs the panel from the right of the trigger. */
+    align = input('end', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    /** Show the name/email beside the avatar (≥ sm). Turn off for an avatar-only trigger. */
+    showDetails = input(true, ...(ngDevMode ? [{ debugName: "showDetails", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Trigger avatar box size in px. */
+    avatarSize = input(36, ...(ngDevMode ? [{ debugName: "avatarSize" }] : []));
+    /** Override the trigger avatar's initials background; defaults per appearance. */
+    avatarBgClass = input(null, ...(ngDevMode ? [{ debugName: "avatarBgClass" }] : []));
+    /** Accessible name for the trigger (icon/avatar only when details are hidden). */
+    menuLabel = input('Menu du compte', ...(ngDevMode ? [{ debugName: "menuLabel" }] : []));
+    openChange = output();
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    toggle() {
+        this.open.update((v) => !v);
+        this.openChange.emit(this.open());
+    }
+    close() {
+        if (!this.open())
+            return;
+        this.open.set(false);
+        this.openChange.emit(false);
+    }
+    onDocumentClick(event) {
+        if (this.open() && !this.el.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    onEscape() {
+        if (!this.open())
+            return;
+        this.close();
+        // Keyboard dismissal returns focus to the trigger (a click-away deliberately does not).
+        this.trigger()?.nativeElement.focus();
+    }
+    /** Close when any actionable row (link or button) inside the panel is activated. */
+    onPanelClick(event) {
+        if (event.target.closest('a,button')) {
+            this.close();
+            this.trigger()?.nativeElement.focus();
+        }
+    }
+    onBrand = computed(() => this.appearance() === 'on-brand', ...(ngDevMode ? [{ debugName: "onBrand" }] : []));
+    resolvedAvatarBg = computed(() => this.avatarBgClass() ?? (this.onBrand() ? 'bg-white/15' : 'bg-brand-500'), ...(ngDevMode ? [{ debugName: "resolvedAvatarBg" }] : []));
+    headerAvatarBg = computed(() => 'bg-brand-500', ...(ngDevMode ? [{ debugName: "headerAvatarBg" }] : []));
+    triggerClass = computed(() => this.onBrand()
+        ? 'hover:bg-white/10 focus-visible:ring-white/40'
+        : 'hover:bg-muted focus-visible:ring-brand-500/40', ...(ngDevMode ? [{ debugName: "triggerClass" }] : []));
+    nameClass = computed(() => (this.onBrand() ? 'text-white' : 'text-ink'), ...(ngDevMode ? [{ debugName: "nameClass" }] : []));
+    emailClass = computed(() => (this.onBrand() ? 'text-white/70' : 'text-ink-faint'), ...(ngDevMode ? [{ debugName: "emailClass" }] : []));
+    chevronClass = computed(() => (this.onBrand() ? 'text-white/70' : 'text-ink-faint'), ...(ngDevMode ? [{ debugName: "chevronClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsUserMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsUserMenu, isStandalone: true, selector: "sds-user-menu", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, showDetails: { classPropertyName: "showDetails", publicName: "showDetails", isSignal: true, isRequired: false, transformFunction: null }, avatarSize: { classPropertyName: "avatarSize", publicName: "avatarSize", isSignal: true, isRequired: false, transformFunction: null }, avatarBgClass: { classPropertyName: "avatarBgClass", publicName: "avatarBgClass", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" }, classAttribute: "relative inline-block" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button
+      #trigger
+      type="button"
+      class="flex items-center gap-2.5 rounded-control py-1.5 pl-1.5 pr-2.5 transition-colors focus-visible:outline-none focus-visible:ring-2"
+      [class]="triggerClass()"
+      [attr.aria-label]="menuLabel()"
+      aria-haspopup="true"
+      [attr.aria-expanded]="open()"
+      (click)="toggle()"
+    >
+      <sds-avatar
+        [name]="name()"
+        [initials]="initials()"
+        [src]="src()"
+        [status]="status()"
+        [size]="avatarSize()"
+        [bgClass]="resolvedAvatarBg()"
+      />
+      @if (showDetails()) {
+        <span class="hidden min-w-0 flex-col items-start text-left leading-tight sm:flex">
+          <span class="max-w-40 truncate text-sm font-semibold" [class]="nameClass()">{{ name() }}</span>
+          @if (email()) {
+            <span class="max-w-40 truncate text-xs" [class]="emailClass()">{{ email() }}</span>
+          }
+        </span>
+      }
+      <sds-icon
+        name="chevron-down"
+        [size]="16"
+        class="hidden shrink-0 transition-transform sm:block"
+        [class]="chevronClass()"
+        [class.rotate-180]="open()"
+      />
+    </button>
+
+    @if (open()) {
+      <div
+        class="absolute top-full z-50 mt-2 w-64 overflow-hidden rounded-card border border-border bg-surface shadow-xl animate-sds-menu"
+        [class]="align() === 'end' ? 'right-0' : 'left-0'"
+        (click)="onPanelClick($event)"
+      >
+        <!-- Header: identity, on a soft brand wash. -->
+        <div class="flex items-center gap-3 border-b border-border bg-linear-to-br from-brand-50 via-surface to-brand-100/40 p-4">
+          <sds-avatar
+            [name]="name()"
+            [initials]="initials()"
+            [src]="src()"
+            [size]="44"
+            [bgClass]="headerAvatarBg()"
+          />
+          <div class="min-w-0">
+            <p class="truncate text-sm font-semibold text-ink">{{ name() }}</p>
+            @if (email()) {
+              <p class="mt-0.5 truncate text-xs text-ink-faint">{{ email() }}</p>
+            }
+          </div>
+        </div>
+
+        <!-- Actions projected by the app. -->
+        <div class="py-1.5">
+          <ng-content />
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [".animate-sds-menu{animation:sds-menu-in .14s ease-out}@keyframes sds-menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsAvatar, selector: "sds-avatar", inputs: ["name", "initials", "src", "size", "status", "bgClass"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsUserMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-user-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdsAvatar, SdsIcon], host: {
+                        class: 'relative inline-block',
+                        '(document:click)': 'onDocumentClick($event)',
+                        '(document:keydown.escape)': 'onEscape()',
+                    }, template: `
+    <button
+      #trigger
+      type="button"
+      class="flex items-center gap-2.5 rounded-control py-1.5 pl-1.5 pr-2.5 transition-colors focus-visible:outline-none focus-visible:ring-2"
+      [class]="triggerClass()"
+      [attr.aria-label]="menuLabel()"
+      aria-haspopup="true"
+      [attr.aria-expanded]="open()"
+      (click)="toggle()"
+    >
+      <sds-avatar
+        [name]="name()"
+        [initials]="initials()"
+        [src]="src()"
+        [status]="status()"
+        [size]="avatarSize()"
+        [bgClass]="resolvedAvatarBg()"
+      />
+      @if (showDetails()) {
+        <span class="hidden min-w-0 flex-col items-start text-left leading-tight sm:flex">
+          <span class="max-w-40 truncate text-sm font-semibold" [class]="nameClass()">{{ name() }}</span>
+          @if (email()) {
+            <span class="max-w-40 truncate text-xs" [class]="emailClass()">{{ email() }}</span>
+          }
+        </span>
+      }
+      <sds-icon
+        name="chevron-down"
+        [size]="16"
+        class="hidden shrink-0 transition-transform sm:block"
+        [class]="chevronClass()"
+        [class.rotate-180]="open()"
+      />
+    </button>
+
+    @if (open()) {
+      <div
+        class="absolute top-full z-50 mt-2 w-64 overflow-hidden rounded-card border border-border bg-surface shadow-xl animate-sds-menu"
+        [class]="align() === 'end' ? 'right-0' : 'left-0'"
+        (click)="onPanelClick($event)"
+      >
+        <!-- Header: identity, on a soft brand wash. -->
+        <div class="flex items-center gap-3 border-b border-border bg-linear-to-br from-brand-50 via-surface to-brand-100/40 p-4">
+          <sds-avatar
+            [name]="name()"
+            [initials]="initials()"
+            [src]="src()"
+            [size]="44"
+            [bgClass]="headerAvatarBg()"
+          />
+          <div class="min-w-0">
+            <p class="truncate text-sm font-semibold text-ink">{{ name() }}</p>
+            @if (email()) {
+              <p class="mt-0.5 truncate text-xs text-ink-faint">{{ email() }}</p>
+            }
+          </div>
+        </div>
+
+        <!-- Actions projected by the app. -->
+        <div class="py-1.5">
+          <ng-content />
+        </div>
+      </div>
+    }
+  `, styles: [".animate-sds-menu{animation:sds-menu-in .14s ease-out}@keyframes sds-menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"] }]
+        }], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], email: [{ type: i0.Input, args: [{ isSignal: true, alias: "email", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], showDetails: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDetails", required: false }] }], avatarSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSize", required: false }] }], avatarBgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarBgClass", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
+
+/**
+ * A single row inside a menu surface (the {@link SdsUserMenu} dropdown, or any custom popover). Renders
+ * an anchor when [link] is set — with the Router — or a button otherwise, and emits {@link select} on
+ * activation. The parent menu closes itself when an item is activated, so an item never has to reach
+ * back into the menu.
+ *
+ * `tone="danger"` paints a destructive action (sign out, delete). Trailing content (a shortcut hint, a
+ * count) projects into the default slot after the label.
+ *
+ * @example
+ * <sds-menu-item icon="user" label="Profil" link="/profile" />
+ * <sds-menu-item icon="log-out" label="Se déconnecter" tone="danger" (select)="signOut()" />
+ */
+class SdsMenuItem {
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Router link target; when null (default) the item renders as a button. */
+    link = input(null, ...(ngDevMode ? [{ debugName: "link" }] : []));
+    tone = input('default', ...(ngDevMode ? [{ debugName: "tone" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    select = output();
+    rowClass = computed(() => {
+        const base = 'flex w-full items-center gap-3 px-4 py-2.5 text-sm font-medium transition-colors ' +
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset ' +
+            'disabled:opacity-50 disabled:pointer-events-none';
+        const tone = this.tone() === 'danger'
+            ? 'text-danger hover:bg-danger/10 focus-visible:ring-danger/40'
+            : 'text-ink-soft hover:bg-muted hover:text-ink focus-visible:ring-brand-500/40';
+        return `${base} ${tone}`;
+    }, ...(ngDevMode ? [{ debugName: "rowClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsMenuItem, isStandalone: true, selector: "sds-menu-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 }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    @if (link() !== null) {
+      <a [routerLink]="link()" [class]="rowClass()" (click)="select.emit()">
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    } @else {
+      <button type="button" [class]="rowClass()" [disabled]="disabled()" (click)="select.emit()">
+        <ng-container [ngTemplateOutlet]="content" />
+      </button>
+    }
+
+    <ng-template #content>
+      @if (icon()) {
+        <sds-icon [name]="icon()!" [size]="18" class="shrink-0" />
+      }
+      <span class="flex-1 truncate text-left">{{ label() }}</span>
+      <ng-content />
+    </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: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMenuItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sds-menu-item',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet, RouterLink, SdsIcon],
+                    host: { class: 'block' },
+                    template: `
+    @if (link() !== null) {
+      <a [routerLink]="link()" [class]="rowClass()" (click)="select.emit()">
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    } @else {
+      <button type="button" [class]="rowClass()" [disabled]="disabled()" (click)="select.emit()">
+        <ng-container [ngTemplateOutlet]="content" />
+      </button>
+    }
+
+    <ng-template #content>
+      @if (icon()) {
+        <sds-icon [name]="icon()!" [size]="18" class="shrink-0" />
+      }
+      <span class="flex-1 truncate text-left">{{ label() }}</span>
+      <ng-content />
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
+
+const norm = (s) => s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+/**
+ * A command-palette search: a trigger pill (search icon, placeholder, a ⌘K hint) that opens a modal with
+ * a search field, grouped results and keyboard navigation. It is data-driven — the app passes `[items]`
+ * and handles `(select)` — so the library stays router-agnostic; ⌘K / Ctrl-K opens it from anywhere.
+ *
+ * When the field is empty the items show as quick navigation; typing filters by label and keywords
+ * (accent-insensitive). Arrow keys move the highlight, Enter selects, Escape closes. Hide the built-in
+ * pill with `[showTrigger]="false"` and drive it from your own control via a template ref: `cmd.open()`.
+ *
+ * @example
+ * <sds-search-command
+ *   #cmd
+ *   appearance="surface"
+ *   [items]="navItems"
+ *   (select)="router.navigateByUrl($event.id)"
+ * />
+ */
+class SdsSearchCommand {
+    document = inject(DOCUMENT);
+    searchInput = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
+    overlay = viewChild('overlay', ...(ngDevMode ? [{ debugName: "overlay" }] : []));
+    /** The searchable entries. Order is preserved; when the field is empty they show as quick navigation. */
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Placeholder on the trigger pill and the search field. */
+    placeholder = input('Rechercher…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Show the built-in trigger pill. Turn off to drive the palette from your own control (`cmd.open()`). */
+    showTrigger = input(true, ...(ngDevMode ? [{ debugName: "showTrigger", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Enable the global ⌘K / Ctrl-K shortcut. */
+    hotkey = input(true, ...(ngDevMode ? [{ debugName: "hotkey", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Trigger pill minimum width in px, so it does not collapse in a flexible top-bar slot. */
+    triggerMinWidth = input(220, ...(ngDevMode ? [{ debugName: "triggerMinWidth" }] : []));
+    /** `surface` (default) for a light / glass bar; `on-brand` for the dark brand bar. */
+    appearance = input('surface', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /**
+     * User-facing copy. French defaults; a multilingual app passes translated values (the trigger and the
+     * field share `placeholder`, and `searchLabel` is the accessible name for both).
+     */
+    searchLabel = input('Rechercher', ...(ngDevMode ? [{ debugName: "searchLabel" }] : []));
+    clearLabel = input('Effacer', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
+    emptyLabel = input('Aucun résultat', ...(ngDevMode ? [{ debugName: "emptyLabel" }] : []));
+    selectHint = input('Sélectionner', ...(ngDevMode ? [{ debugName: "selectHint" }] : []));
+    navigateHint = input('Naviguer', ...(ngDevMode ? [{ debugName: "navigateHint" }] : []));
+    closeHint = input('Fermer', ...(ngDevMode ? [{ debugName: "closeHint" }] : []));
+    select = output();
+    openChange = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : []));
+    /** DOM id of the highlighted option, or null. Kept as the id (not an index) so the list can regroup. */
+    activeId = signal(null, ...(ngDevMode ? [{ debugName: "activeId" }] : []));
+    /** The element focused before the palette opened, restored to it on close (WAI-ARIA dialog pattern). */
+    restoreFocusTo = null;
+    constructor() {
+        // On open: move the overlay to <body> so it escapes any ancestor that is a containing block for
+        // fixed positioning (a `backdrop-filter` on the glass top bar is exactly such an ancestor), then
+        // focus the field and lock background scroll. Angular still owns the moved node — its bindings and
+        // listeners keep working, and @if removes it on close.
+        effect(() => {
+            const open = this.isOpen();
+            const overlay = this.overlay();
+            const input = this.searchInput();
+            this.document.body.style.overflow = open ? 'hidden' : '';
+            if (open && overlay)
+                this.document.body.appendChild(overlay.nativeElement);
+            if (open && input)
+                input.nativeElement.focus();
+        });
+        // Keep a valid highlight as the results change: default to the first option; drop it if empty.
+        // activeId is read untracked so writing it here does not retrigger this effect.
+        effect(() => {
+            const flat = this.flat();
+            const current = untracked(this.activeId);
+            if (!flat.length) {
+                if (current !== null)
+                    this.activeId.set(null);
+                return;
+            }
+            if (!current || !flat.some((i) => this.optionId(i) === current)) {
+                this.activeId.set(this.optionId(flat[0]));
+            }
+        });
+        // A palette destroyed while open must not leave the page unscrollable.
+        inject(DestroyRef).onDestroy(() => {
+            this.document.body.style.overflow = '';
+        });
+    }
+    // --- public control (also reachable via a template ref) ---
+    open() {
+        if (this.isOpen())
+            return;
+        // Remember what was focused (the trigger pill, or wherever ⌘K was pressed) to restore on close.
+        this.restoreFocusTo = this.document.activeElement;
+        this.isOpen.set(true);
+        this.openChange.emit(true);
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+        this.query.set('');
+        this.openChange.emit(false);
+        // Return focus to the invoker so keyboard/AT users are not dropped onto <body>.
+        this.restoreFocusTo?.focus();
+        this.restoreFocusTo = null;
+    }
+    toggle() {
+        this.isOpen() ? this.close() : this.open();
+    }
+    // --- filtering ---
+    filtered = computed(() => {
+        const q = norm(this.query().trim());
+        if (!q)
+            return this.items();
+        return this.items().filter((i) => norm(`${i.label} ${i.keywords ?? ''}`).includes(q));
+    }, ...(ngDevMode ? [{ debugName: "filtered" }] : []));
+    sections = computed(() => {
+        const list = this.filtered();
+        if (!list.length)
+            return [];
+        const anyGroup = list.some((i) => i.group);
+        if (!anyGroup) {
+            return [{ label: '', items: list }];
+        }
+        const order = [];
+        const map = new Map();
+        for (const item of list) {
+            const g = item.group ?? '';
+            if (!map.has(g)) {
+                map.set(g, []);
+                order.push(g);
+            }
+            map.get(g).push(item);
+        }
+        return order.map((label) => ({ label, items: map.get(label) }));
+    }, ...(ngDevMode ? [{ debugName: "sections" }] : []));
+    flat = computed(() => this.sections().flatMap((s) => s.items.filter((i) => !i.disabled)), ...(ngDevMode ? [{ debugName: "flat" }] : []));
+    // --- interaction ---
+    optionId(item) {
+        return `sds-cmd-opt-${item.id}`;
+    }
+    onInput(event) {
+        this.query.set(event.target.value);
+    }
+    clear() {
+        this.query.set('');
+        this.searchInput()?.nativeElement.focus();
+    }
+    setActiveById(id) {
+        this.activeId.set(id);
+    }
+    choose(item) {
+        if (item.disabled)
+            return;
+        this.select.emit(item);
+        this.close();
+    }
+    onPanelKeydown(event) {
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                return;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.move(1);
+                return;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.move(-1);
+                return;
+            case 'Enter': {
+                event.preventDefault();
+                const current = this.flat().find((i) => this.optionId(i) === this.activeId());
+                if (current)
+                    this.choose(current);
+                return;
+            }
+            case 'Tab':
+                // Keep focus inside the modal (aria-modal must not leak focus to the page behind the backdrop).
+                this.trapTab(event);
+                return;
+        }
+    }
+    onGlobalKeydown(event) {
+        if (this.hotkey() && (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+            event.preventDefault();
+            this.toggle();
+            return;
+        }
+        // Fallback: close on Escape even if focus somehow left the panel.
+        if (this.isOpen() && event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+        }
+    }
+    trapTab(event) {
+        const root = this.overlay()?.nativeElement;
+        if (!root)
+            return;
+        const sel = 'a[href],button:not([disabled]),input:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+        const focusables = Array.from(root.querySelectorAll(sel)).filter((el) => el.offsetParent !== null || el === this.document.activeElement);
+        if (!focusables.length)
+            return;
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        const active = this.document.activeElement;
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    move(delta) {
+        const flat = this.flat();
+        if (!flat.length)
+            return;
+        const currentIndex = flat.findIndex((i) => this.optionId(i) === this.activeId());
+        const next = Math.min(flat.length - 1, Math.max(0, (currentIndex < 0 ? 0 : currentIndex) + delta));
+        const id = this.optionId(flat[next]);
+        this.activeId.set(id);
+        // Positions are static, so scrolling the element into view needs no rendered highlight.
+        this.document.getElementById(id)?.scrollIntoView({ block: 'nearest' });
+    }
+    // --- trigger appearance ---
+    onBrand = computed(() => this.appearance() === 'on-brand', ...(ngDevMode ? [{ debugName: "onBrand" }] : []));
+    triggerClass = computed(() => this.onBrand()
+        ? 'bg-white/10 hover:bg-white/15 focus-visible:ring-white/40'
+        : 'bg-muted hover:bg-brand-50 border border-transparent hover:border-brand-200 focus-visible:ring-brand-500/40', ...(ngDevMode ? [{ debugName: "triggerClass" }] : []));
+    triggerTextClass = computed(() => (this.onBrand() ? 'text-white/80' : 'text-ink-faint'), ...(ngDevMode ? [{ debugName: "triggerTextClass" }] : []));
+    kbdClass = computed(() => this.onBrand() ? 'border-white/25 text-white/70' : 'border-border bg-surface text-ink-faint', ...(ngDevMode ? [{ debugName: "kbdClass" }] : []));
+    hotkeyLabel = computed(() => {
+        const platform = this.document.defaultView?.navigator?.platform ?? '';
+        return /mac|iphone|ipad/i.test(platform) ? '⌘K' : 'Ctrl K';
+    }, ...(ngDevMode ? [{ debugName: "hotkeyLabel" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSearchCommand, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSearchCommand, isStandalone: true, selector: "sds-search-command", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showTrigger: { classPropertyName: "showTrigger", publicName: "showTrigger", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null }, triggerMinWidth: { classPropertyName: "triggerMinWidth", publicName: "triggerMinWidth", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, selectHint: { classPropertyName: "selectHint", publicName: "selectHint", isSignal: true, isRequired: false, transformFunction: null }, navigateHint: { classPropertyName: "navigateHint", publicName: "navigateHint", isSignal: true, isRequired: false, transformFunction: null }, closeHint: { classPropertyName: "closeHint", publicName: "closeHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select", openChange: "openChange" }, host: { listeners: { "document:keydown": "onGlobalKeydown($event)" }, classAttribute: "block" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (showTrigger()) {
+      <!--
+        Responsive trigger: a 40px icon-only button on phones (< sm), the full pill (placeholder + ⌘K
+        hint, with a minimum width so it does not collapse in a flexible slot) from sm up. The min-width
+        is carried in a CSS var so it can be applied at sm+ only, never squeezing the mobile square.
+      -->
+      <button
+        type="button"
+        class="flex h-10 w-10 items-center justify-center rounded-control transition-colors focus-visible:outline-none focus-visible:ring-2 sm:w-auto sm:justify-between sm:gap-2 sm:px-3 sm:min-w-[var(--sds-search-minw)]"
+        [class]="triggerClass()"
+        [style.--sds-search-minw]="triggerMinWidth() + 'px'"
+        [attr.aria-label]="searchLabel()"
+        (click)="open()"
+      >
+        <span class="flex min-w-0 items-center gap-2" [class]="triggerTextClass()">
+          <sds-icon name="search" [size]="16" class="shrink-0" />
+          <span class="hidden truncate text-sm sm:inline">{{ placeholder() }}</span>
+        </span>
+        <kbd class="hidden shrink-0 rounded border px-1.5 py-0.5 text-[11px] font-semibold sm:inline-block" [class]="kbdClass()">{{ hotkeyLabel() }}</kbd>
+      </button>
+    }
+
+    @if (isOpen()) {
+      <div #overlay class="fixed inset-0 z-[100] flex items-start justify-center p-4 pt-[12vh]">
+        <!-- Backdrop -->
+        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" (click)="close()" aria-hidden="true"></div>
+
+        <!-- Panel -->
+        <div
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-label]="searchLabel()"
+          class="relative flex w-full max-w-xl flex-col overflow-hidden rounded-card border border-border bg-surface shadow-2xl animate-sds-cmd"
+          (keydown)="onPanelKeydown($event)"
+        >
+          <!-- Search field -->
+          <div class="flex items-center gap-3 border-b border-border px-4 py-3.5">
+            <sds-icon name="search" [size]="20" class="shrink-0 text-ink-faint" />
+            <input
+              #searchInput
+              type="text"
+              role="combobox"
+              aria-autocomplete="list"
+              aria-controls="sds-cmd-list"
+              [attr.aria-expanded]="true"
+              [attr.aria-activedescendant]="activeId()"
+              [attr.aria-label]="searchLabel()"
+              [value]="query()"
+              (input)="onInput($event)"
+              [placeholder]="placeholder()"
+              class="min-w-0 flex-1 bg-transparent text-base text-ink outline-none placeholder:text-ink-faint"
+            />
+            @if (query()) {
+              <button
+                type="button"
+                class="rounded p-1 text-ink-faint transition-colors hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/40"
+                [attr.aria-label]="clearLabel()"
+                (click)="clear()"
+              >
+                <sds-icon name="x" [size]="18" />
+              </button>
+            }
+            <kbd class="hidden shrink-0 rounded bg-muted px-2 py-1 text-[11px] font-semibold text-ink-faint sm:inline-block">ESC</kbd>
+          </div>
+
+          <!-- Results -->
+          <div id="sds-cmd-list" #list role="listbox" [attr.aria-label]="searchLabel()" class="max-h-[min(60vh,420px)] overflow-y-auto p-2">
+            @if (sections().length) {
+              @for (section of sections(); track section.label) {
+                @if (section.label) {
+                  <p class="px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-ink-faint">{{ section.label }}</p>
+                }
+                @for (item of section.items; track item.id) {
+                  <button
+                    type="button"
+                    role="option"
+                    [id]="optionId(item)"
+                    [attr.aria-selected]="activeId() === optionId(item)"
+                    [disabled]="item.disabled"
+                    class="flex w-full items-center gap-3 rounded-control px-3 py-2.5 text-left text-sm font-medium transition-colors focus-visible:outline-none disabled:opacity-50"
+                    [class]="activeId() === optionId(item) ? 'bg-brand-500/15 text-ink' : 'text-ink-soft hover:bg-muted hover:text-ink'"
+                    (click)="choose(item)"
+                    (mousemove)="setActiveById(optionId(item))"
+                  >
+                    @if (item.icon) {
+                      <sds-icon [name]="item.icon" [size]="18" class="shrink-0" />
+                    }
+                    <span class="flex-1 truncate">{{ item.label }}</span>
+                  </button>
+                }
+              }
+            } @else {
+              <div class="px-6 py-10 text-center">
+                <sds-icon name="search-x" [size]="40" class="mx-auto mb-3 text-ink-faint" />
+                <p class="text-sm text-ink-soft">{{ emptyLabel() }}</p>
+              </div>
+            }
+          </div>
+
+          <!-- Footer hints -->
+          <div class="flex items-center justify-center gap-4 border-t border-border bg-muted px-3 py-2.5 text-xs text-ink-faint">
+            <span class="flex items-center gap-1.5"><kbd class="rounded bg-surface px-1.5 py-0.5">↵</kbd> {{ selectHint() }}</span>
+            <span class="flex items-center gap-1.5"><kbd class="rounded bg-surface px-1.5 py-0.5">↑↓</kbd> {{ navigateHint() }}</span>
+            <span class="flex items-center gap-1.5"><kbd class="rounded bg-surface px-1.5 py-0.5">ESC</kbd> {{ closeHint() }}</span>
+          </div>
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [".animate-sds-cmd{animation:sds-cmd-in .16s ease-out}@keyframes sds-cmd-in{0%{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.animate-sds-cmd{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSearchCommand, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-search-command', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdsIcon], host: {
+                        class: 'block',
+                        '(document:keydown)': 'onGlobalKeydown($event)',
+                    }, template: `
+    @if (showTrigger()) {
+      <!--
+        Responsive trigger: a 40px icon-only button on phones (< sm), the full pill (placeholder + ⌘K
+        hint, with a minimum width so it does not collapse in a flexible slot) from sm up. The min-width
+        is carried in a CSS var so it can be applied at sm+ only, never squeezing the mobile square.
+      -->
+      <button
+        type="button"
+        class="flex h-10 w-10 items-center justify-center rounded-control transition-colors focus-visible:outline-none focus-visible:ring-2 sm:w-auto sm:justify-between sm:gap-2 sm:px-3 sm:min-w-[var(--sds-search-minw)]"
+        [class]="triggerClass()"
+        [style.--sds-search-minw]="triggerMinWidth() + 'px'"
+        [attr.aria-label]="searchLabel()"
+        (click)="open()"
+      >
+        <span class="flex min-w-0 items-center gap-2" [class]="triggerTextClass()">
+          <sds-icon name="search" [size]="16" class="shrink-0" />
+          <span class="hidden truncate text-sm sm:inline">{{ placeholder() }}</span>
+        </span>
+        <kbd class="hidden shrink-0 rounded border px-1.5 py-0.5 text-[11px] font-semibold sm:inline-block" [class]="kbdClass()">{{ hotkeyLabel() }}</kbd>
+      </button>
+    }
+
+    @if (isOpen()) {
+      <div #overlay class="fixed inset-0 z-[100] flex items-start justify-center p-4 pt-[12vh]">
+        <!-- Backdrop -->
+        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" (click)="close()" aria-hidden="true"></div>
+
+        <!-- Panel -->
+        <div
+          role="dialog"
+          aria-modal="true"
+          [attr.aria-label]="searchLabel()"
+          class="relative flex w-full max-w-xl flex-col overflow-hidden rounded-card border border-border bg-surface shadow-2xl animate-sds-cmd"
+          (keydown)="onPanelKeydown($event)"
+        >
+          <!-- Search field -->
+          <div class="flex items-center gap-3 border-b border-border px-4 py-3.5">
+            <sds-icon name="search" [size]="20" class="shrink-0 text-ink-faint" />
+            <input
+              #searchInput
+              type="text"
+              role="combobox"
+              aria-autocomplete="list"
+              aria-controls="sds-cmd-list"
+              [attr.aria-expanded]="true"
+              [attr.aria-activedescendant]="activeId()"
+              [attr.aria-label]="searchLabel()"
+              [value]="query()"
+              (input)="onInput($event)"
+              [placeholder]="placeholder()"
+              class="min-w-0 flex-1 bg-transparent text-base text-ink outline-none placeholder:text-ink-faint"
+            />
+            @if (query()) {
+              <button
+                type="button"
+                class="rounded p-1 text-ink-faint transition-colors hover:bg-muted hover:text-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/40"
+                [attr.aria-label]="clearLabel()"
+                (click)="clear()"
+              >
+                <sds-icon name="x" [size]="18" />
+              </button>
+            }
+            <kbd class="hidden shrink-0 rounded bg-muted px-2 py-1 text-[11px] font-semibold text-ink-faint sm:inline-block">ESC</kbd>
+          </div>
+
+          <!-- Results -->
+          <div id="sds-cmd-list" #list role="listbox" [attr.aria-label]="searchLabel()" class="max-h-[min(60vh,420px)] overflow-y-auto p-2">
+            @if (sections().length) {
+              @for (section of sections(); track section.label) {
+                @if (section.label) {
+                  <p class="px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-ink-faint">{{ section.label }}</p>
+                }
+                @for (item of section.items; track item.id) {
+                  <button
+                    type="button"
+                    role="option"
+                    [id]="optionId(item)"
+                    [attr.aria-selected]="activeId() === optionId(item)"
+                    [disabled]="item.disabled"
+                    class="flex w-full items-center gap-3 rounded-control px-3 py-2.5 text-left text-sm font-medium transition-colors focus-visible:outline-none disabled:opacity-50"
+                    [class]="activeId() === optionId(item) ? 'bg-brand-500/15 text-ink' : 'text-ink-soft hover:bg-muted hover:text-ink'"
+                    (click)="choose(item)"
+                    (mousemove)="setActiveById(optionId(item))"
+                  >
+                    @if (item.icon) {
+                      <sds-icon [name]="item.icon" [size]="18" class="shrink-0" />
+                    }
+                    <span class="flex-1 truncate">{{ item.label }}</span>
+                  </button>
+                }
+              }
+            } @else {
+              <div class="px-6 py-10 text-center">
+                <sds-icon name="search-x" [size]="40" class="mx-auto mb-3 text-ink-faint" />
+                <p class="text-sm text-ink-soft">{{ emptyLabel() }}</p>
+              </div>
+            }
+          </div>
+
+          <!-- Footer hints -->
+          <div class="flex items-center justify-center gap-4 border-t border-border bg-muted px-3 py-2.5 text-xs text-ink-faint">
+            <span class="flex items-center gap-1.5"><kbd class="rounded bg-surface px-1.5 py-0.5">↵</kbd> {{ selectHint() }}</span>
+            <span class="flex items-center gap-1.5"><kbd class="rounded bg-surface px-1.5 py-0.5">↑↓</kbd> {{ navigateHint() }}</span>
+            <span class="flex items-center gap-1.5"><kbd class="rounded bg-surface px-1.5 py-0.5">ESC</kbd> {{ closeHint() }}</span>
+          </div>
+        </div>
+      </div>
+    }
+  `, styles: [".animate-sds-cmd{animation:sds-cmd-in .16s ease-out}@keyframes sds-cmd-in{0%{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){.animate-sds-cmd{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { searchInput: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], overlay: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrigger", required: false }] }], hotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hotkey", required: false }] }], triggerMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerMinWidth", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], selectHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectHint", required: false }] }], navigateHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateHint", required: false }] }], closeHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeHint", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
+
+let nextId = 0;
+/**
+ * The language picker for the top bar: a compact pill (globe icon + the active code) that opens a panel
+ * listing exactly the languages the app supports, each row marked selected for the current one.
+ *
+ * The library owns no i18n engine — every app uses a different one (ngx-translate, Transloco, per-locale
+ * URLs). So this is a pure, controlled control: the app passes the supported [languages] and the [current]
+ * code, and reacts to the choice. `current` is a two-way `model`, so bind `[(current)]="lang"` for optimistic
+ * echo, or just listen to `(currentChange)` and call your own `translate.use($event)`. Rows show each
+ * language's human label (pass it in the option, or let it default to the uppercased code).
+ *
+ * It is a sibling of sds-user-menu / sds-theme-toggle / sds-search-command and shares their chrome: the same
+ * two appearances (`surface` default for a light/glass bar, `on-brand` for the dark brand bar), the same
+ * disclosure mechanics (closes on outside click, on Escape, and on selection, restoring focus to the trigger),
+ * and the same panel styling and open animation — so the three top-bar controls read as one set.
+ *
+ * The panel is appended to `document.body` while open and positioned against the trigger (like sds-select),
+ * so a clipping ancestor — a bar with `overflow:hidden`, or a `glass` bar whose `backdrop-filter` is a
+ * containing block — can never cut it off or paint over it. It repositions on scroll/resize and is removed
+ * on close. Accessibility follows the APG select-only combobox: focus stays on the trigger, and Arrow/Home/
+ * End/Enter/Escape drive a highlighted option surfaced via `aria-activedescendant` (works even though the
+ * listbox lives in `<body>`).
+ *
+ * @example
+ * <sds-language-switcher
+ *   [languages]="[{ code: 'fr', label: 'Français' }, { code: 'de', label: 'Deutsch' }, { code: 'en', label: 'English' }]"
+ *   [current]="lang()"
+ *   menuLabel="Changer de langue"
+ *   (currentChange)="translate.use($event)"
+ * />
+ *
+ * @example
+ * <!-- Bare codes are fine; rows fall back to the uppercased code. -->
+ * <sds-language-switcher [languages]="['fr', 'de', 'en']" [(current)]="lang" />
+ */
+class SdsLanguageSwitcher {
+    el = inject(ElementRef);
+    injector = inject(Injector);
+    trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
+    panelId = `sds-language-panel-${nextId++}`;
+    /** The supported languages — either `{ code, label }` options or bare code strings. */
+    languages = input([], ...(ngDevMode ? [{ debugName: "languages" }] : []));
+    /** The active language code. Two-way: `[(current)]` echoes the choice, or listen to `(currentChange)`. */
+    current = model('', ...(ngDevMode ? [{ debugName: "current" }] : []));
+    /** `surface` (default) for a light / glass bar; `on-brand` for the dark brand bar. */
+    appearance = input('surface', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /** Which edge the panel aligns to. `end` (default) hangs it from the right of the trigger. */
+    align = input('end', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    /** `up` prefers opening the panel above the trigger — for a switcher near the bottom of the page. */
+    direction = input('down', ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    /** Accessible name for the trigger and panel. */
+    menuLabel = input('Choisir la langue', ...(ngDevMode ? [{ debugName: "menuLabel" }] : []));
+    /** Optional visible header above the list (e.g. "Langue"). Omitted when empty. */
+    heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : []));
+    openChange = output();
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
+    panelEl = null;
+    /** Normalise the mixed `languages` input to `{ code, label }`, defaulting the label to the code. */
+    options = computed(() => this.languages().map((l) => typeof l === 'string'
+        ? { code: l, label: l.toUpperCase() }
+        : { code: l.code, label: l.label ?? l.code.toUpperCase() }), ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /**
+     * The code treated as active everywhere — trigger label AND the selected row. Falls back to the first
+     * option when `current` is unset, so the pill and the checked row can never disagree.
+     */
+    effectiveCode = computed(() => this.current() || this.options()[0]?.code || '', ...(ngDevMode ? [{ debugName: "effectiveCode" }] : []));
+    /** Uppercased code shown in the trigger. */
+    currentCode = computed(() => this.effectiveCode().toUpperCase(), ...(ngDevMode ? [{ debugName: "currentCode" }] : []));
+    activeOptionId = computed(() => this.highlightedIndex() >= 0 ? this.optionId(this.highlightedIndex()) : null, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : []));
+    optionId(i) {
+        return `${this.panelId}-opt-${i}`;
+    }
+    toggle() {
+        this.open() ? this.close(true) : this.openPanel();
+    }
+    openPanel() {
+        this.open.set(true);
+        this.openChange.emit(true);
+        this.initHighlight();
+        // After the panel renders inside the host, portal it to <body> and anchor it to the trigger, so no
+        // clipping/stacking ancestor (an overflow:hidden bar, a backdrop-filter glass bar) can cut it off.
+        // Focus stays on the trigger (combobox model); the active row is surfaced via aria-activedescendant.
+        afterNextRender(() => {
+            this.panelEl = this.el.nativeElement.querySelector('[data-sds-language-panel]');
+            this.positionPanel();
+            this.addReflowListeners();
+            this.trigger()?.nativeElement.focus();
+            this.scrollHighlightedIntoView();
+        }, { injector: this.injector });
+    }
+    close(returnFocus = false) {
+        if (!this.open())
+            return;
+        this.removeReflowListeners();
+        // Remove the portalled node ourselves before Angular tears the view down (it lives in <body> now).
+        this.panelEl?.remove();
+        this.panelEl = null;
+        this.open.set(false);
+        this.openChange.emit(false);
+        if (returnFocus)
+            this.trigger()?.nativeElement.focus();
+    }
+    choose(code) {
+        this.current.set(code);
+        // Pointer/keyboard selection returns focus to the trigger, like the other top-bar disclosures.
+        this.close(true);
+    }
+    onDocumentClick(event) {
+        if (!this.open())
+            return;
+        const target = event.target;
+        const inHost = this.el.nativeElement.contains(target);
+        const inPanel = !!this.panelEl && this.panelEl.contains(target);
+        if (!inHost && !inPanel)
+            this.close();
+    }
+    onEscape() {
+        if (!this.open())
+            return;
+        this.close(true);
+    }
+    // --- keyboard (APG select-only combobox: focus stays on the trigger) ---
+    onTriggerKeydown(event) {
+        if (!this.open()) {
+            if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {
+                event.preventDefault();
+                this.openPanel();
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.move(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.move(-1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.highlight(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.highlight(this.options().length - 1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.chooseHighlighted();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.close(true);
+                break;
+            case 'Tab':
+                this.close(false);
+                break;
+            default: break;
+        }
+    }
+    initHighlight() {
+        const idx = this.options().findIndex((o) => o.code === this.effectiveCode());
+        this.highlightedIndex.set(idx >= 0 ? idx : this.options().length ? 0 : -1);
+    }
+    move(delta) {
+        const n = this.options().length;
+        if (!n)
+            return;
+        const from = this.highlightedIndex();
+        this.highlight(((from < 0 ? 0 : from) + delta + n) % n);
+    }
+    highlight(i) {
+        if (i < 0 || i >= this.options().length)
+            return;
+        this.highlightedIndex.set(i);
+        this.scrollHighlightedIntoView();
+    }
+    chooseHighlighted() {
+        const opt = this.options()[this.highlightedIndex()];
+        if (opt)
+            this.choose(opt.code);
+    }
+    scrollHighlightedIntoView() {
+        setTimeout(() => {
+            this.panelEl
+                ?.querySelector(`[data-index="${this.highlightedIndex()}"]`)
+                ?.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    // --- body-appended overlay positioning (mirrors sds-select / sds-date-picker) ---
+    reflow = () => this.positionPanel();
+    listening = false;
+    addReflowListeners() {
+        if (this.listening)
+            return;
+        window.addEventListener('scroll', this.reflow, true);
+        window.addEventListener('resize', this.reflow);
+        this.listening = true;
+    }
+    removeReflowListeners() {
+        if (!this.listening)
+            return;
+        window.removeEventListener('scroll', this.reflow, true);
+        window.removeEventListener('resize', this.reflow);
+        this.listening = false;
+    }
+    positionPanel() {
+        const triggerEl = this.trigger()?.nativeElement;
+        const panelEl = this.panelEl;
+        if (!triggerEl || !panelEl)
+            return;
+        if (panelEl.parentElement !== document.body)
+            document.body.appendChild(panelEl);
+        const r = triggerEl.getBoundingClientRect();
+        const gap = 8;
+        const margin = 8;
+        const pw = panelEl.offsetWidth || 176;
+        const ph = panelEl.offsetHeight || 200;
+        // Vertical: below by default; open above when asked (direction='up') and there is room, or when there
+        // isn't room below but there is above. The panel height is bounded by the list's max-h, but clamp
+        // defensively so top can never be pushed off the top edge.
+        const roomBelow = window.innerHeight - r.bottom - gap;
+        const roomAbove = r.top - gap;
+        let top = (this.direction() === 'up' && roomAbove >= ph) || (roomBelow < ph && roomAbove > roomBelow)
+            ? r.top - gap - ph
+            : r.bottom + gap;
+        if (top + ph > window.innerHeight - margin)
+            top = window.innerHeight - margin - ph;
+        if (top < margin)
+            top = margin;
+        // Horizontal: align the panel's end (right) or start (left) edge to the trigger, then clamp.
+        let left = this.align() === 'end' ? r.right - pw : r.left;
+        left = Math.min(left, window.innerWidth - margin - pw);
+        left = Math.max(margin, left);
+        panelEl.style.top = `${Math.round(top)}px`;
+        panelEl.style.left = `${Math.round(left)}px`;
+    }
+    ngOnDestroy() {
+        this.removeReflowListeners();
+        this.panelEl?.remove();
+    }
+    onBrand = computed(() => this.appearance() === 'on-brand', ...(ngDevMode ? [{ debugName: "onBrand" }] : []));
+    triggerClass = computed(() => this.onBrand()
+        ? 'text-white/85 hover:bg-white/10 hover:text-white focus-visible:ring-white/40'
+        : 'bg-muted text-ink-soft hover:bg-brand-50 hover:text-brand-600 focus-visible:ring-brand-500/40', ...(ngDevMode ? [{ debugName: "triggerClass" }] : []));
+    chevronClass = computed(() => (this.onBrand() ? 'text-white/70' : 'text-ink-faint'), ...(ngDevMode ? [{ debugName: "chevronClass" }] : []));
+    rowClass(index, selected) {
+        const base = 'flex w-full cursor-pointer items-center gap-3 px-4 py-2.5 text-sm font-medium transition-colors';
+        const highlighted = this.highlightedIndex() === index;
+        let state;
+        if (selected) {
+            state = highlighted ? 'bg-brand-500/25 text-ink' : 'bg-brand-500/15 text-ink';
+        }
+        else {
+            state = highlighted ? 'bg-muted text-ink' : 'text-ink-soft';
+        }
+        return `${base} ${state}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsLanguageSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsLanguageSwitcher, isStandalone: true, selector: "sds-language-switcher", inputs: { languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange", openChange: "openChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" }, classAttribute: "relative inline-block" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button
+      #trigger
+      type="button"
+      role="combobox"
+      class="flex h-10 items-center gap-1.5 rounded-control px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2"
+      [class]="triggerClass()"
+      [attr.aria-label]="menuLabel()"
+      aria-haspopup="listbox"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="open() ? panelId : null"
+      [attr.aria-activedescendant]="open() ? activeOptionId() : null"
+      (click)="toggle()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <sds-icon name="languages" [size]="16" class="shrink-0" />
+      <span>{{ currentCode() }}</span>
+      <sds-icon
+        name="chevron-down"
+        [size]="14"
+        class="shrink-0 transition-transform"
+        [class]="chevronClass()"
+        [class.rotate-180]="open()"
+      />
+    </button>
+
+    @if (open()) {
+      <!-- Appended to document.body on open (see positionPanel) so no ancestor can clip it. -->
+      <div
+        data-sds-language-panel
+        [id]="panelId"
+        role="listbox"
+        [attr.aria-label]="menuLabel()"
+        class="fixed z-[1000] min-w-44 overflow-hidden rounded-card border border-border bg-surface shadow-xl animate-sds-menu"
+      >
+        @if (heading(); as h) {
+          <p class="border-b border-border px-4 pb-2 pt-3 text-[0.68rem] font-semibold uppercase tracking-wider text-ink-faint">
+            {{ h }}
+          </p>
+        }
+        <div class="max-h-[60vh] overflow-auto py-1.5">
+          @for (opt of options(); track opt.code; let i = $index) {
+            <div
+              [id]="optionId(i)"
+              role="option"
+              [attr.data-index]="i"
+              [attr.aria-selected]="opt.code === effectiveCode()"
+              [class]="rowClass(i, opt.code === effectiveCode())"
+              (click)="choose(opt.code)"
+              (mouseenter)="highlightedIndex.set(i)"
+            >
+              <span class="flex-1 truncate text-left">{{ opt.label }}</span>
+              <span
+                class="shrink-0 text-[0.7rem] font-semibold uppercase tracking-wide"
+                [class]="opt.code === effectiveCode() ? 'text-brand-600' : 'text-ink-faint'"
+                >{{ opt.code }}</span
+              >
+              @if (opt.code === effectiveCode()) {
+                <sds-icon name="check" [size]="16" class="shrink-0 text-brand-600" />
+              } @else {
+                <span class="w-4 shrink-0" aria-hidden="true"></span>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [".animate-sds-menu{animation:sds-menu-in .14s ease-out}@keyframes sds-menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"], dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsLanguageSwitcher, decorators: [{
+            type: Component,
+            args: [{ selector: 'sds-language-switcher', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdsIcon], host: {
+                        class: 'relative inline-block',
+                        '(document:click)': 'onDocumentClick($event)',
+                        '(document:keydown.escape)': 'onEscape()',
+                    }, template: `
+    <button
+      #trigger
+      type="button"
+      role="combobox"
+      class="flex h-10 items-center gap-1.5 rounded-control px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2"
+      [class]="triggerClass()"
+      [attr.aria-label]="menuLabel()"
+      aria-haspopup="listbox"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="open() ? panelId : null"
+      [attr.aria-activedescendant]="open() ? activeOptionId() : null"
+      (click)="toggle()"
+      (keydown)="onTriggerKeydown($event)"
+    >
+      <sds-icon name="languages" [size]="16" class="shrink-0" />
+      <span>{{ currentCode() }}</span>
+      <sds-icon
+        name="chevron-down"
+        [size]="14"
+        class="shrink-0 transition-transform"
+        [class]="chevronClass()"
+        [class.rotate-180]="open()"
+      />
+    </button>
+
+    @if (open()) {
+      <!-- Appended to document.body on open (see positionPanel) so no ancestor can clip it. -->
+      <div
+        data-sds-language-panel
+        [id]="panelId"
+        role="listbox"
+        [attr.aria-label]="menuLabel()"
+        class="fixed z-[1000] min-w-44 overflow-hidden rounded-card border border-border bg-surface shadow-xl animate-sds-menu"
+      >
+        @if (heading(); as h) {
+          <p class="border-b border-border px-4 pb-2 pt-3 text-[0.68rem] font-semibold uppercase tracking-wider text-ink-faint">
+            {{ h }}
+          </p>
+        }
+        <div class="max-h-[60vh] overflow-auto py-1.5">
+          @for (opt of options(); track opt.code; let i = $index) {
+            <div
+              [id]="optionId(i)"
+              role="option"
+              [attr.data-index]="i"
+              [attr.aria-selected]="opt.code === effectiveCode()"
+              [class]="rowClass(i, opt.code === effectiveCode())"
+              (click)="choose(opt.code)"
+              (mouseenter)="highlightedIndex.set(i)"
+            >
+              <span class="flex-1 truncate text-left">{{ opt.label }}</span>
+              <span
+                class="shrink-0 text-[0.7rem] font-semibold uppercase tracking-wide"
+                [class]="opt.code === effectiveCode() ? 'text-brand-600' : 'text-ink-faint'"
+                >{{ opt.code }}</span
+              >
+              @if (opt.code === effectiveCode()) {
+                <sds-icon name="check" [size]="16" class="shrink-0 text-brand-600" />
+              } @else {
+                <span class="w-4 shrink-0" aria-hidden="true"></span>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    }
+  `, styles: [".animate-sds-menu{animation:sds-menu-in .14s ease-out}@keyframes sds-menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.animate-sds-menu{animation:none}}\n"] }]
+        }], propDecorators: { trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }, { type: i0.Output, args: ["currentChange"] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }] } });
+
 /*
  * Public API Surface of saitech-design-system — the Saitech / App design system.
  */
@@ -9658,5 +11221,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsInputNumber, SdsLocalizedInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
+export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsInputNumber, SdsLanguageSwitcher, SdsLocalizedInput, SdsMenuItem, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSearchCommand, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsThemeService, SdsThemeToggle, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SdsUserMenu, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map