@besaitech/ng-design-system 0.0.42 → 0.0.45

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, Injectable, TemplateRef, Directive, contentChildren, contentChild } 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',
@@ -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');
@@ -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');
@@ -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()) {
@@ -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)"
@@ -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())
@@ -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"
@@ -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()"
         >
@@ -4130,6 +4136,83 @@ 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;
 
+/**
+ * Supplies a custom template for each option row (and the selected value shown
+ * in the trigger) of an `<sds-select>` / `<sds-multi-select>`. Use as a
+ * structural template projected into the select:
+ *
+ * @example
+ * <sds-select [options]="categories" optionLabel="name" optionValue="id" [(ngModel)]="catId">
+ *   <ng-template sdsSelectOption let-option let-selected="selected">
+ *     <span class="dot" [style.background]="option.color"></span>
+ *     <span class="truncate">{{ option.name }}</span>
+ *   </ng-template>
+ * </sds-select>
+ */
+class SdsSelectOption {
+    /** The wrapped template, rendered by the host select via ngTemplateOutlet. */
+    template = inject(TemplateRef);
+    /** Lets the compiler type-check `let-*` bindings against SdsSelectOptionContext. */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsSelectOption, isStandalone: true, selector: "ng-template[sdsSelectOption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdsSelectOption]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Supplies a custom template shown in place of the default "no results" message
+ * when a select has no (matching) options.
+ *
+ * @example
+ * <ng-template sdsSelectEmpty let-q>No category matches "{{ q }}".</ng-template>
+ */
+class SdsSelectEmpty {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsSelectEmpty, isStandalone: true, selector: "ng-template[sdsSelectEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdsSelectEmpty]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Supplies a custom sticky footer rendered below the option list — e.g. a
+ * "＋ Create new" action. The `close` context callback dismisses the panel.
+ *
+ * @example
+ * <ng-template sdsSelectFooter let-close="close">
+ *   <button (click)="createCategory(); close()">＋ New category</button>
+ * </ng-template>
+ */
+class SdsSelectFooter {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsSelectFooter, isStandalone: true, selector: "ng-template[sdsSelectFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdsSelectFooter]',
+                    standalone: true,
+                }]
+        }] });
+
 const SIZES$4 = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
@@ -4146,9 +4229,25 @@ let nextId$5 = 0;
  * key; otherwise selection matching falls back to reference equality (a written
  * copy of an option will not match).
  *
+ * Options render as plain text by default. To render richer options (an icon,
+ * an avatar, a two-line row…) project template directives — the same content
+ * also renders in the trigger for the selected value:
+ * - `<ng-template sdsSelectOption let-option>` — one option row (see {@link SdsSelectOption});
+ *   context: the raw `option` (implicit), plus `label`, `value`, `selected`, `disabled`, `index`.
+ * - `<ng-template sdsSelectEmpty let-query>` — replaces the "no results" message (see {@link SdsSelectEmpty}).
+ * - `<ng-template sdsSelectFooter let-close="close">` — a sticky footer action, e.g. "＋ New…"
+ *   (see {@link SdsSelectFooter}); `close()` dismisses the panel.
+ *
  * @example
  * <sds-select [options]="services" optionLabel="name" optionValue="id"
  *            placeholder="Choisir un service" [(ngModel)]="serviceId" filter clearable />
+ *
+ * @example
+ * <sds-select [options]="categories" optionLabel="name" optionValue="id" [(ngModel)]="categoryId">
+ *   <ng-template sdsSelectOption let-option>
+ *     <span class="dot" [style.background]="option.color"></span> {{ option.name }}
+ *   </ng-template>
+ * </sds-select>
  */
 class SdsSelect {
     host = inject(ElementRef);
@@ -4173,6 +4272,12 @@ class SdsSelect {
     filter = input(false, ...(ngDevMode ? [{ debugName: "filter", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     filterPlaceholder = input('Rechercher…', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
     emptyMessage = input('Aucun résultat', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    /** Optional projected `<ng-template sdsSelectOption>` — custom option + selected-value rendering. */
+    optionTpl = contentChild(SdsSelectOption, ...(ngDevMode ? [{ debugName: "optionTpl" }] : []));
+    /** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
+    emptyTpl = contentChild(SdsSelectEmpty, ...(ngDevMode ? [{ debugName: "emptyTpl" }] : []));
+    /** Optional projected `<ng-template sdsSelectFooter>` — a sticky footer action. */
+    footerTpl = contentChild(SdsSelectFooter, ...(ngDevMode ? [{ debugName: "footerTpl" }] : []));
     value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     filterText = signal('', ...(ngDevMode ? [{ debugName: "filterText" }] : []));
@@ -4211,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');
@@ -4229,9 +4334,30 @@ class SdsSelect {
             const label = labelKey && labelKey in o ? String(o[labelKey]) : String(o['label'] ?? raw);
             const value = this.optionValue() ? o[this.optionValue()] : raw;
             const disabled = this.optionDisabled() ? !!o[this.optionDisabled()] : !!o['disabled'];
-            return { label, value, disabled };
+            return { label, value, disabled, raw };
         }
-        return { label: String(raw), value: raw, disabled: false };
+        return { label: String(raw), value: raw, disabled: false, raw };
+    }
+    /** Context for a projected option template (an option row). */
+    optionContext(opt, index) {
+        return {
+            $implicit: opt.raw,
+            option: opt.raw,
+            label: opt.label,
+            value: opt.value,
+            selected: this.isSelected(opt.value),
+            disabled: opt.disabled,
+            index,
+        };
+    }
+    /** Context for the option template reused in the trigger to render the selected value. */
+    triggerContext = computed(() => {
+        const sel = this.selectedOption();
+        return sel ? this.optionContext(sel, -1) : null;
+    }, ...(ngDevMode ? [{ debugName: "triggerContext" }] : []));
+    /** Context for a projected footer template. */
+    footerContext() {
+        return { $implicit: this.filterText(), filterText: this.filterText(), close: () => this.close(true) };
     }
     equals(a, b) {
         const k = this.dataKey();
@@ -4503,7 +4629,7 @@ class SdsSelect {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSelect, isStandalone: true, selector: "sds-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsSelect), multi: true },
-        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        ], queries: [{ propertyName: "optionTpl", first: true, predicate: SdsSelectOption, descendants: true, isSignal: true }, { propertyName: "emptyTpl", first: true, predicate: SdsSelectEmpty, descendants: true, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: SdsSelectFooter, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
       <label [for]="selectId" class="mb-1.5 block text-sm font-medium text-ink">
         {{ label() }}
@@ -4526,12 +4652,21 @@ class SdsSelect {
         (click)="toggle()"
         (keydown)="onTriggerKeydown($event)"
       >
-        <span
-          class="flex-1 truncate pl-3.5"
-          [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
-        >
-          {{ selectedOption() ? selectedOption()!.label : placeholder() }}
-        </span>
+        @if (optionTpl() && selectedOption()) {
+          <span class="flex flex-1 items-center gap-2 truncate pl-3.5 text-ink">
+            <ng-container
+              [ngTemplateOutlet]="optionTpl()!.template"
+              [ngTemplateOutletContext]="triggerContext()!"
+            />
+          </span>
+        } @else {
+          <span
+            class="flex-1 truncate pl-3.5"
+            [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
+          >
+            {{ selectedOption() ? selectedOption()!.label : placeholder() }}
+          </span>
+        }
 
         @if (showClear()) {
           <button
@@ -4589,15 +4724,42 @@ class SdsSelect {
                 (click)="opt.disabled ? null : selectOption(opt)"
                 (mouseenter)="opt.disabled ? null : highlightedIndex.set(i)"
               >
-                <span class="truncate">{{ opt.label }}</span>
+                @if (optionTpl()) {
+                  <span class="flex min-w-0 flex-1 items-center gap-2">
+                    <ng-container
+                      [ngTemplateOutlet]="optionTpl()!.template"
+                      [ngTemplateOutletContext]="optionContext(opt, i)"
+                    />
+                  </span>
+                } @else {
+                  <span class="truncate">{{ opt.label }}</span>
+                }
                 @if (isSelected(opt.value)) {
                   <sds-icon name="check" [size]="16" class="shrink-0 text-brand-600" />
                 }
               </li>
             } @empty {
-              <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              @if (emptyTpl()) {
+                <li class="px-3 py-2 text-sm text-ink-faint">
+                  <ng-container
+                    [ngTemplateOutlet]="emptyTpl()!.template"
+                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                  />
+                </li>
+              } @else {
+                <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              }
             }
           </ul>
+
+          @if (footerTpl()) {
+            <div class="border-t border-border">
+              <ng-container
+                [ngTemplateOutlet]="footerTpl()!.template"
+                [ngTemplateOutletContext]="footerContext()"
+              />
+            </div>
+          }
         </div>
       }
     </div>
@@ -4608,14 +4770,14 @@ class SdsSelect {
     @if (error()) {
       <p class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'sds-select',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SdsIcon],
+                    imports: [SdsIcon, NgTemplateOutlet],
                     providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsSelect), multi: true },
                     ],
@@ -4646,12 +4808,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         (click)="toggle()"
         (keydown)="onTriggerKeydown($event)"
       >
-        <span
-          class="flex-1 truncate pl-3.5"
-          [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
-        >
-          {{ selectedOption() ? selectedOption()!.label : placeholder() }}
-        </span>
+        @if (optionTpl() && selectedOption()) {
+          <span class="flex flex-1 items-center gap-2 truncate pl-3.5 text-ink">
+            <ng-container
+              [ngTemplateOutlet]="optionTpl()!.template"
+              [ngTemplateOutletContext]="triggerContext()!"
+            />
+          </span>
+        } @else {
+          <span
+            class="flex-1 truncate pl-3.5"
+            [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
+          >
+            {{ selectedOption() ? selectedOption()!.label : placeholder() }}
+          </span>
+        }
 
         @if (showClear()) {
           <button
@@ -4709,15 +4880,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 (click)="opt.disabled ? null : selectOption(opt)"
                 (mouseenter)="opt.disabled ? null : highlightedIndex.set(i)"
               >
-                <span class="truncate">{{ opt.label }}</span>
+                @if (optionTpl()) {
+                  <span class="flex min-w-0 flex-1 items-center gap-2">
+                    <ng-container
+                      [ngTemplateOutlet]="optionTpl()!.template"
+                      [ngTemplateOutletContext]="optionContext(opt, i)"
+                    />
+                  </span>
+                } @else {
+                  <span class="truncate">{{ opt.label }}</span>
+                }
                 @if (isSelected(opt.value)) {
                   <sds-icon name="check" [size]="16" class="shrink-0 text-brand-600" />
                 }
               </li>
             } @empty {
-              <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              @if (emptyTpl()) {
+                <li class="px-3 py-2 text-sm text-ink-faint">
+                  <ng-container
+                    [ngTemplateOutlet]="emptyTpl()!.template"
+                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                  />
+                </li>
+              } @else {
+                <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              }
             }
           </ul>
+
+          @if (footerTpl()) {
+            <div class="border-t border-border">
+              <ng-container
+                [ngTemplateOutlet]="footerTpl()!.template"
+                [ngTemplateOutletContext]="footerContext()"
+              />
+            </div>
+          }
         </div>
       }
     </div>
@@ -4730,7 +4928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectOption), { isSignal: true }] }], emptyTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectEmpty), { isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectFooter), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 const SIZES$3 = {
     sm: 'min-h-9 text-sm',
@@ -4748,9 +4946,24 @@ let nextId$4 = 0;
  * For object options, set [optionValue] or [dataKey] so written values match by
  * key; otherwise matching falls back to reference equality.
  *
+ * Project template directives to customise the panel:
+ * - `<ng-template sdsSelectOption let-option>` — the content of each option row, after its
+ *   checkbox (see {@link SdsSelectOption}); context: the raw `option` (implicit), plus `label`,
+ *   `value`, `selected`, `disabled`, `index`.
+ * - `<ng-template sdsSelectEmpty let-query>` — replaces the "no results" message (see {@link SdsSelectEmpty}).
+ * - `<ng-template sdsSelectFooter let-close="close">` — a sticky footer action (see {@link SdsSelectFooter});
+ *   `close()` dismisses the panel.
+ *
  * @example
  * <sds-multi-select [options]="services" optionLabel="name" optionValue="code"
  *                  display="chip" filter [(ngModel)]="codes" />
+ *
+ * @example
+ * <sds-multi-select [options]="tags" optionLabel="name" optionValue="id" [(ngModel)]="tagIds">
+ *   <ng-template sdsSelectOption let-option>
+ *     <span class="dot" [style.background]="option.color"></span> {{ option.name }}
+ *   </ng-template>
+ * </sds-multi-select>
  */
 class SdsMultiSelect {
     host = inject(ElementRef);
@@ -4778,6 +4991,12 @@ class SdsMultiSelect {
     filter = input(false, ...(ngDevMode ? [{ debugName: "filter", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     filterPlaceholder = input('Rechercher…', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
     emptyMessage = input('Aucun résultat', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    /** Optional projected `<ng-template sdsSelectOption>` — custom option-row rendering. */
+    optionTpl = contentChild(SdsSelectOption, ...(ngDevMode ? [{ debugName: "optionTpl" }] : []));
+    /** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
+    emptyTpl = contentChild(SdsSelectEmpty, ...(ngDevMode ? [{ debugName: "emptyTpl" }] : []));
+    /** Optional projected `<ng-template sdsSelectFooter>` — a sticky footer action. */
+    footerTpl = contentChild(SdsSelectFooter, ...(ngDevMode ? [{ debugName: "footerTpl" }] : []));
     value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     filterText = signal('', ...(ngDevMode ? [{ debugName: "filterText" }] : []));
@@ -4843,9 +5062,25 @@ class SdsMultiSelect {
             const label = labelKey && labelKey in o ? String(o[labelKey]) : String(o['label'] ?? raw);
             const value = this.optionValue() ? o[this.optionValue()] : raw;
             const disabled = this.optionDisabled() ? !!o[this.optionDisabled()] : !!o['disabled'];
-            return { label, value, disabled };
+            return { label, value, disabled, raw };
         }
-        return { label: String(raw), value: raw, disabled: false };
+        return { label: String(raw), value: raw, disabled: false, raw };
+    }
+    /** Context for a projected option template (an option row). */
+    optionContext(opt, index) {
+        return {
+            $implicit: opt.raw,
+            option: opt.raw,
+            label: opt.label,
+            value: opt.value,
+            selected: this.isSelected(opt.value),
+            disabled: opt.disabled,
+            index,
+        };
+    }
+    /** Context for a projected footer template. */
+    footerContext() {
+        return { $implicit: this.filterText(), filterText: this.filterText(), close: () => this.close(true) };
     }
     equals(a, b) {
         const k = this.dataKey();
@@ -4874,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() {
@@ -5157,7 +5392,7 @@ class SdsMultiSelect {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsMultiSelect, isStandalone: true, selector: "sds-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsMultiSelect), multi: true },
-        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        ], queries: [{ propertyName: "optionTpl", first: true, predicate: SdsSelectOption, descendants: true, isSignal: true }, { propertyName: "emptyTpl", first: true, predicate: SdsSelectEmpty, descendants: true, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: SdsSelectFooter, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
       <label [for]="selectId" class="mb-1.5 block text-sm font-medium text-ink">
         {{ label() }}
@@ -5175,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)"
@@ -5290,12 +5525,39 @@ class SdsMultiSelect {
                     <sds-icon name="check" [size]="12" />
                   }
                 </span>
-                <span class="truncate">{{ opt.label }}</span>
+                @if (optionTpl()) {
+                  <span class="flex min-w-0 flex-1 items-center gap-2">
+                    <ng-container
+                      [ngTemplateOutlet]="optionTpl()!.template"
+                      [ngTemplateOutletContext]="optionContext(opt, i)"
+                    />
+                  </span>
+                } @else {
+                  <span class="truncate">{{ opt.label }}</span>
+                }
               </li>
             } @empty {
-              <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              @if (emptyTpl()) {
+                <li class="px-3 py-2 text-sm text-ink-faint">
+                  <ng-container
+                    [ngTemplateOutlet]="emptyTpl()!.template"
+                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                  />
+                </li>
+              } @else {
+                <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              }
             }
           </ul>
+
+          @if (footerTpl()) {
+            <div class="border-t border-border">
+              <ng-container
+                [ngTemplateOutlet]="footerTpl()!.template"
+                [ngTemplateOutletContext]="footerContext()"
+              />
+            </div>
+          }
         </div>
       }
     </div>
@@ -5306,14 +5568,14 @@ class SdsMultiSelect {
     @if (error()) {
       <p class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMultiSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'sds-multi-select',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SdsIcon],
+                    imports: [SdsIcon, NgTemplateOutlet],
                     providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsMultiSelect), multi: true },
                     ],
@@ -5339,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)"
@@ -5454,12 +5716,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     <sds-icon name="check" [size]="12" />
                   }
                 </span>
-                <span class="truncate">{{ opt.label }}</span>
+                @if (optionTpl()) {
+                  <span class="flex min-w-0 flex-1 items-center gap-2">
+                    <ng-container
+                      [ngTemplateOutlet]="optionTpl()!.template"
+                      [ngTemplateOutletContext]="optionContext(opt, i)"
+                    />
+                  </span>
+                } @else {
+                  <span class="truncate">{{ opt.label }}</span>
+                }
               </li>
             } @empty {
-              <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              @if (emptyTpl()) {
+                <li class="px-3 py-2 text-sm text-ink-faint">
+                  <ng-container
+                    [ngTemplateOutlet]="emptyTpl()!.template"
+                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                  />
+                </li>
+              } @else {
+                <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              }
             }
           </ul>
+
+          @if (footerTpl()) {
+            <div class="border-t border-border">
+              <ng-container
+                [ngTemplateOutlet]="footerTpl()!.template"
+                [ngTemplateOutletContext]="footerContext()"
+              />
+            </div>
+          }
         </div>
       }
     </div>
@@ -5472,7 +5761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectOption), { isSignal: true }] }], emptyTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectEmpty), { isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectFooter), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 const SDS_PHONE_COUNTRIES = [
     { iso2: 'BE', name: 'Belgique', dialCode: '32', lengths: [9], format: '### ## ## ##', example: '470123456' },
@@ -5990,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 -->
@@ -6131,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 -->
@@ -6520,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>
       }
@@ -6629,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>
       }
@@ -7805,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">
@@ -7821,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"
@@ -8112,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">
@@ -8124,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"
@@ -8560,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.
  *
@@ -8570,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. */
@@ -8602,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
@@ -8617,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 />
@@ -8647,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.
@@ -8694,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
@@ -8719,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>
@@ -8793,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
@@ -8818,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>
@@ -8847,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>
@@ -8886,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>
@@ -8910,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
@@ -8936,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()"
@@ -8963,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()"
         >
@@ -8973,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>
@@ -8990,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()) {
@@ -9002,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()"
@@ -9029,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()"
         >
@@ -9039,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.
@@ -9088,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
@@ -9115,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" }] : []));
@@ -9147,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"
@@ -9166,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>
         }
@@ -9210,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"
@@ -9229,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>
         }
@@ -9273,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) {
@@ -9296,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 {
@@ -9307,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>
     }
@@ -9340,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 {
@@ -9351,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>
     }
@@ -9366,6 +10036,775 @@ 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"] }] } });
+
 /*
  * Public API Surface of saitech-design-system — the Saitech / App design system.
  */
@@ -9375,5 +10814,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, 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, 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