@besaitech/ng-design-system 0.0.42 → 0.0.45

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy, WritableSignal, OnInit, TemplateRef } from '@angular/core';
+import { OnDestroy, TemplateRef, WritableSignal, OnInit } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import * as _besaitech_ng_design_system from '@besaitech/ng-design-system';
@@ -85,6 +85,11 @@ declare const SDS_ICONS: {
     readonly 'loader-circle': "<path d=\"M21 12a9 9 0 1 1-6.219-8.56\"/>";
     readonly 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\"/>";
     readonly '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\"/>";
+    readonly moon: "<path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"/>";
+    readonly 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\"/>";
+    readonly '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\"/>";
+    readonly 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\"/>";
+    readonly 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\"/>";
 };
 type SdsIconName = keyof typeof SDS_ICONS;
 
@@ -99,7 +104,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
 declare class SdsIcon {
     private readonly sanitizer;
     /** Icon identifier from the registry. */
-    readonly name: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text">;
+    readonly name: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles">;
     /** Square size: a pixel number, a numeric string, or a keyword (sm·md·lg·xl). */
     readonly size: _angular_core.InputSignalWithTransform<number, string | number>;
     /** Stroke width of the line icon. */
@@ -191,8 +196,8 @@ declare class SdsInput implements ControlValueAccessor {
      * is its only name.
      */
     readonly clearLabel: _angular_core.InputSignal<string>;
-    readonly leadingIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | null>;
-    readonly trailingIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | null>;
+    readonly leadingIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
+    readonly trailingIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
     /**
      * A CLICKABLE trailing icon, for the affordances that belong to the field itself — password reveal
      * above all. Distinct from {@link trailingIcon}, which is decorative and explicitly
@@ -202,7 +207,7 @@ declare class SdsInput implements ControlValueAccessor {
      * Always pair it with {@link trailingActionLabel} — an icon-only button with no accessible name is
      * unusable by a screen reader. For a toggle, also bind {@link trailingActionPressed}.
      */
-    readonly trailingAction: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | null>;
+    readonly trailingAction: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
     /** Accessible name for {@link trailingAction}. Translate it in the consuming app. */
     readonly trailingActionLabel: _angular_core.InputSignal<string>;
     /** `aria-pressed` for a toggling action (e.g. show/hide password). Null renders no attribute. */
@@ -297,9 +302,9 @@ declare class SdsInputNumber implements ControlValueAccessor {
     readonly showButtons: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly buttonLayout: _angular_core.InputSignal<SdsInputNumberButtonLayout>;
     /** Override the increment button icon (defaults: chevron-up when stacked, plus otherwise). */
-    readonly incrementIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | null>;
+    readonly incrementIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
     /** Override the decrement button icon (defaults: chevron-down when stacked, minus otherwise). */
-    readonly decrementIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | null>;
+    readonly decrementIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
     /** Allow an empty (null) value. When false, blurring an empty field falls back to {@link min} or 0. */
     readonly allowEmpty: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -316,8 +321,8 @@ declare class SdsInputNumber implements ControlValueAccessor {
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     protected readonly describedBy: _angular_core.Signal<string | null>;
     protected readonly clearVisible: _angular_core.Signal<boolean>;
-    protected readonly incrementIconName: _angular_core.Signal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text">;
-    protected readonly decrementIconName: _angular_core.Signal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text">;
+    protected readonly incrementIconName: _angular_core.Signal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles">;
+    protected readonly decrementIconName: _angular_core.Signal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles">;
     protected readonly canIncrement: _angular_core.Signal<boolean>;
     protected readonly canDecrement: _angular_core.Signal<boolean>;
     /** Locale grouping/decimal separators, derived from Intl so parsing matches formatting. */
@@ -581,9 +586,9 @@ declare class SdsToggleSwitch implements ControlValueAccessor {
     /** Value emitted/stored when the switch is off. */
     readonly falseValue: _angular_core.InputSignal<unknown>;
     /** Icon shown on the knob when checked. */
-    readonly onIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | null>;
+    readonly onIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
     /** Icon shown on the knob when unchecked. */
-    readonly offIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | null>;
+    readonly offIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
     readonly hint: _angular_core.InputSignal<string>;
     readonly error: _angular_core.InputSignal<string>;
     /**
@@ -957,6 +962,94 @@ declare class SdsDatePicker implements ControlValueAccessor, OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsDatePicker, "sds-date-picker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "timeLabel": { "alias": "timeLabel"; "required": false; "isSignal": true; }; "hoursLabel": { "alias": "hoursLabel"; "required": false; "isSignal": true; }; "minutesLabel": { "alias": "minutesLabel"; "required": false; "isSignal": true; }; "doneLabel": { "alias": "doneLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "openCalendarLabel": { "alias": "openCalendarLabel"; "required": false; "isSignal": true; }; "closeCalendarLabel": { "alias": "closeCalendarLabel"; "required": false; "isSignal": true; }; "panelLabel": { "alias": "panelLabel"; "required": false; "isSignal": true; }; "calendarLabel": { "alias": "calendarLabel"; "required": false; "isSignal": true; }; "previousLabel": { "alias": "previousLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "todayActionLabel": { "alias": "todayActionLabel"; "required": false; "isSignal": true; }; "clearActionLabel": { "alias": "clearActionLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Context handed to a custom option template. Lets consumers destructure with
+ * `let-option`, `let-selected="selected"`, `let-label="label"`, etc., with full
+ * type inference (see {@link SdsSelectOption.ngTemplateContextGuard}).
+ */
+interface SdsSelectOptionContext {
+    /** Same as {@link option} — enables the implicit `let-option` binding. Typed `any` so consumer templates
+     *  can read their own option fields (e.g. `option.color`) without casting. */
+    $implicit: any;
+    /** The raw option object (or primitive) from the `options` array. */
+    option: any;
+    /** The resolved display label (via optionLabel). */
+    label: string;
+    /** The resolved option value (via optionValue). */
+    value: unknown;
+    /** Whether this option is currently selected. */
+    selected: boolean;
+    /** Whether this option is disabled. */
+    disabled: boolean;
+    /** Zero-based index within the currently displayed (filtered) options. */
+    index: number;
+}
+/**
+ * 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>
+ */
+declare class SdsSelectOption {
+    /** The wrapped template, rendered by the host select via ngTemplateOutlet. */
+    readonly template: TemplateRef<SdsSelectOptionContext>;
+    /** Lets the compiler type-check `let-*` bindings against SdsSelectOptionContext. */
+    static ngTemplateContextGuard(_dir: SdsSelectOption, _ctx: unknown): _ctx is SdsSelectOptionContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSelectOption, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsSelectOption, "ng-template[sdsSelectOption]", never, {}, {}, never, never, true, never>;
+}
+/** Context handed to a custom empty-state template. */
+interface SdsSelectEmptyContext {
+    /** Same as {@link filterText} — enables the implicit `let-filterText` binding. */
+    $implicit: string;
+    /** The current filter query (empty when the field isn't filterable or is blank). */
+    filterText: string;
+}
+/**
+ * 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>
+ */
+declare class SdsSelectEmpty {
+    readonly template: TemplateRef<SdsSelectEmptyContext>;
+    static ngTemplateContextGuard(_dir: SdsSelectEmpty, _ctx: unknown): _ctx is SdsSelectEmptyContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSelectEmpty, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsSelectEmpty, "ng-template[sdsSelectEmpty]", never, {}, {}, never, never, true, never>;
+}
+/** Context handed to a custom footer template. */
+interface SdsSelectFooterContext {
+    /** Same as {@link filterText} — enables the implicit `let-filterText` binding. */
+    $implicit: string;
+    /** The current filter query. */
+    filterText: string;
+    /** Closes the open panel — handy for a footer action (e.g. "＋ New…"). */
+    close: () => void;
+}
+/**
+ * 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>
+ */
+declare class SdsSelectFooter {
+    readonly template: TemplateRef<SdsSelectFooterContext>;
+    static ngTemplateContextGuard(_dir: SdsSelectFooter, _ctx: unknown): _ctx is SdsSelectFooterContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSelectFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SdsSelectFooter, "ng-template[sdsSelectFooter]", never, {}, {}, never, never, true, never>;
+}
+
 type SdsSelectSize = 'sm' | 'md' | 'lg';
 /** Field skin. `filled` is borderless on a muted ground (to sit inside a page, matching sds-input's
  *  filled appearance); `on-brand` is tuned for a dark surface. */
@@ -965,6 +1058,8 @@ interface NormOption$1 {
     label: string;
     value: unknown;
     disabled: boolean;
+    /** The original option (object or primitive), passed to a custom option template. */
+    raw: unknown;
 }
 /**
  * Single-select dropdown. Options may be primitives or objects (configure via
@@ -976,9 +1071,25 @@ interface NormOption$1 {
  * 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>
  */
 declare class SdsSelect implements ControlValueAccessor, OnDestroy {
     private readonly host;
@@ -1003,6 +1114,12 @@ declare class SdsSelect implements ControlValueAccessor, OnDestroy {
     readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly filterPlaceholder: _angular_core.InputSignal<string>;
     readonly emptyMessage: _angular_core.InputSignal<string>;
+    /** Optional projected `<ng-template sdsSelectOption>` — custom option + selected-value rendering. */
+    protected readonly optionTpl: _angular_core.Signal<SdsSelectOption | undefined>;
+    /** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
+    protected readonly emptyTpl: _angular_core.Signal<SdsSelectEmpty | undefined>;
+    /** Optional projected `<ng-template sdsSelectFooter>` — a sticky footer action. */
+    protected readonly footerTpl: _angular_core.Signal<SdsSelectFooter | undefined>;
     protected readonly value: _angular_core.WritableSignal<unknown>;
     protected readonly open: _angular_core.WritableSignal<boolean>;
     protected readonly filterText: _angular_core.WritableSignal<string>;
@@ -1020,6 +1137,16 @@ declare class SdsSelect implements ControlValueAccessor, OnDestroy {
     protected readonly activeDescId: _angular_core.Signal<string | null>;
     protected readonly wrapperClasses: _angular_core.Signal<string>;
     private norm;
+    /** Context for a projected option template (an option row). */
+    protected optionContext(opt: NormOption$1, index: number): SdsSelectOptionContext;
+    /** Context for the option template reused in the trigger to render the selected value. */
+    protected readonly triggerContext: _angular_core.Signal<SdsSelectOptionContext | null>;
+    /** Context for a projected footer template. */
+    protected footerContext(): {
+        $implicit: string;
+        filterText: string;
+        close: () => void;
+    };
     private equals;
     protected isSelected(v: unknown): boolean;
     protected optionId(i: number): string;
@@ -1058,7 +1185,7 @@ declare class SdsSelect implements ControlValueAccessor, OnDestroy {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSelect, "sds-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSelect, "sds-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, {}, ["optionTpl", "emptyTpl", "footerTpl"], never, true, never>;
 }
 
 type SdsMultiSelectSize = 'sm' | 'md' | 'lg';
@@ -1067,6 +1194,8 @@ interface NormOption {
     label: string;
     value: unknown;
     disabled: boolean;
+    /** The original option (object or primitive), passed to a custom option template. */
+    raw: unknown;
 }
 /**
  * Multi-select dropdown (value is an array). Options may be primitives or
@@ -1078,9 +1207,24 @@ interface NormOption {
  * 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>
  */
 declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
     private readonly host;
@@ -1108,6 +1252,12 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
     readonly filter: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly filterPlaceholder: _angular_core.InputSignal<string>;
     readonly emptyMessage: _angular_core.InputSignal<string>;
+    /** Optional projected `<ng-template sdsSelectOption>` — custom option-row rendering. */
+    protected readonly optionTpl: _angular_core.Signal<SdsSelectOption | undefined>;
+    /** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
+    protected readonly emptyTpl: _angular_core.Signal<SdsSelectEmpty | undefined>;
+    /** Optional projected `<ng-template sdsSelectFooter>` — a sticky footer action. */
+    protected readonly footerTpl: _angular_core.Signal<SdsSelectFooter | undefined>;
     protected readonly value: _angular_core.WritableSignal<unknown[]>;
     protected readonly open: _angular_core.WritableSignal<boolean>;
     protected readonly filterText: _angular_core.WritableSignal<string>;
@@ -1130,6 +1280,14 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
     protected readonly activeDescId: _angular_core.Signal<string | null>;
     protected readonly wrapperClasses: _angular_core.Signal<string>;
     private norm;
+    /** Context for a projected option template (an option row). */
+    protected optionContext(opt: NormOption, index: number): SdsSelectOptionContext;
+    /** Context for a projected footer template. */
+    protected footerContext(): {
+        $implicit: string;
+        filterText: string;
+        close: () => void;
+    };
     private equals;
     protected isSelected(v: unknown): boolean;
     protected optionId(i: number): string;
@@ -1171,7 +1329,7 @@ declare class SdsMultiSelect implements ControlValueAccessor, OnDestroy {
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsMultiSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsMultiSelect, "sds-multi-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; "isSignal": true; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsMultiSelect, "sds-multi-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionLabel": { "alias": "optionLabel"; "required": false; "isSignal": true; }; "optionValue": { "alias": "optionValue"; "required": false; "isSignal": true; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; "isSignal": true; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, {}, ["optionTpl", "emptyTpl", "footerTpl"], never, true, never>;
 }
 
 /**
@@ -1998,6 +2156,78 @@ declare class SdsToastHost {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsToastHost, "sds-toast-host", never, { "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type SdsTheme = 'light' | 'dark';
+/**
+ * Light/dark theme state for the whole app. It owns exactly one thing: the presence of the `.dark`
+ * class on the document root, which flips every design token defined under `.dark` in the theme CSS
+ * (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).
+ */
+declare class SdsThemeService {
+    private readonly document;
+    readonly theme: _angular_core.WritableSignal<SdsTheme>;
+    readonly isDark: _angular_core.Signal<boolean>;
+    constructor();
+    /** Flip between light and dark. */
+    toggle(): void;
+    /** Set an explicit theme. */
+    setTheme(theme: SdsTheme): void;
+    private initialTheme;
+    private apply;
+    private readStorage;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsThemeService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<SdsThemeService>;
+}
+
+type SdsThemeToggleAppearance = 'surface' | 'on-brand';
+/**
+ * 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'" />
+ */
+declare class SdsThemeToggle {
+    protected readonly theme: SdsThemeService;
+    protected readonly isDark: _angular_core.Signal<boolean>;
+    /** Button box size in px (the icon scales with it). */
+    readonly size: _angular_core.InputSignal<number>;
+    /** `surface` for light/glass bars, `on-brand` for the dark brand bar. */
+    readonly appearance: _angular_core.InputSignal<SdsThemeToggleAppearance>;
+    /**
+     * Accessible names for the two actions. French defaults keep existing consumers unchanged; a
+     * multilingual app must pass translated values.
+     */
+    readonly darkLabel: _angular_core.InputSignal<string>;
+    readonly lightLabel: _angular_core.InputSignal<string>;
+    protected readonly iconSize: _angular_core.Signal<number>;
+    protected readonly label: _angular_core.Signal<string>;
+    protected readonly buttonClasses: _angular_core.Signal<"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">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsThemeToggle, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsThemeToggle, "sds-theme-toggle", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "darkLabel": { "alias": "darkLabel"; "required": false; "isSignal": true; }; "lightLabel": { "alias": "lightLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** How the rail is painted. `brand` is the dark brand rail; `surface` is a light rail with brand accents. */
+type SdsSidebarAppearance = 'brand' | 'surface';
 /**
  * Shared collapse state for the sidebar and its nav items.
  *
@@ -2008,6 +2238,12 @@ declare class SdsToastHost {
 declare class SidebarStore {
     /** Desktop rail state: collapsed to icon-only width (applies at ≥ lg). */
     readonly collapsed: _angular_core.WritableSignal<boolean>;
+    /**
+     * 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.
+     */
+    readonly appearance: _angular_core.WritableSignal<SdsSidebarAppearance>;
     /** Mobile drawer state: whether the off-canvas sidebar is slid in (< lg). */
     readonly mobileOpen: _angular_core.WritableSignal<boolean>;
     /** Toggle the desktop icon-rail. */
@@ -2023,14 +2259,19 @@ declare class SidebarStore {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<SidebarStore>;
 }
 
-type SdsTopbarAppearance = 'brand' | 'surface';
+type SdsTopbarAppearance = 'brand' | 'surface' | 'glass';
 /**
  * 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
@@ -2042,7 +2283,7 @@ type SdsTopbarAppearance = 'brand' | 'surface';
  * `[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 />
@@ -2072,29 +2313,45 @@ declare class SdsTopbar {
      * aria-label is its only name, and a hardcoded one is simply wrong in every other locale.
      */
     readonly menuLabel: _angular_core.InputSignal<string>;
-    /** `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.
+     */
     readonly appearance: _angular_core.InputSignal<SdsTopbarAppearance>;
-    protected readonly shellClasses: _angular_core.Signal<"bg-linear-to-r from-brand-800 via-brand-700 to-brand-600 text-white" | "border-b border-border bg-surface text-ink">;
+    /** Add slow-drifting brand-tinted blobs behind the bar (opt-in; pairs with `glass`/`surface`). */
+    readonly decorations: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly shellClasses: _angular_core.Signal<"bg-linear-to-r from-brand-800 via-brand-700 to-brand-600 text-white" | "border-b border-border bg-linear-to-r from-surface/85 via-surface/80 to-brand-100/70 text-ink backdrop-blur-xl" | "border-b border-border bg-surface text-ink">;
     protected readonly menuButtonClasses: _angular_core.Signal<"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">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsTopbar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTopbar, "sds-topbar", never, { "appName": { "alias": "appName"; "required": false; "isSignal": true; }; "contentWidth": { "alias": "contentWidth"; "required": false; "isSignal": true; }; "menuButton": { "alias": "menuButton"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsLogo]", "[sdsLead]", "[sdsCenter]", "[sdsActions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsTopbar, "sds-topbar", never, { "appName": { "alias": "appName"; "required": false; "isSignal": true; }; "contentWidth": { "alias": "contentWidth"; "required": false; "isSignal": true; }; "menuButton": { "alias": "menuButton"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "decorations": { "alias": "decorations"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsLogo]", "[sdsLead]", "[sdsCenter]", "[sdsActions]"], true, never>;
 }
 
+type SdsShellBackground = 'plain' | 'gradient';
 /**
  * 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>
  */
 declare class SdsShell {
+    /** `plain` flat canvas (default) or a soft brand-tinted `gradient` wash. */
+    readonly background: _angular_core.InputSignal<SdsShellBackground>;
+    /** Add slow-drifting brand-tinted blobs behind the page content (opt-in). */
+    readonly decorations: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly mainClass: _angular_core.Signal<"bg-linear-to-br from-brand-50/50 via-canvas to-brand-100/40" | "bg-canvas">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsShell, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsShell, "sds-shell", never, {}, {}, never, ["[sdsTopbar]", "[sdsSidebar]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsShell, "sds-shell", never, { "background": { "alias": "background"; "required": false; "isSignal": true; }; "decorations": { "alias": "decorations"; "required": false; "isSignal": true; }; }, {}, never, ["[sdsTopbar]", "[sdsSidebar]", "*"], true, never>;
 }
 
 /**
@@ -2102,8 +2359,18 @@ declare class SdsShell {
  * 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>
@@ -2112,20 +2379,38 @@ declare class SdsShell {
  */
 declare class SdsSidebar {
     protected readonly store: SidebarStore;
+    private readonly document;
+    private readonly drawer;
+    private readonly closeBtn;
+    /** True below the `lg` breakpoint — where the rail is the off-canvas modal drawer. */
+    protected readonly belowLg: _angular_core.WritableSignal<boolean>;
+    /** The element focused before the drawer opened, restored to it on close. */
+    private restoreFocusTo;
+    constructor();
     /**
      * 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.
      */
     readonly collapseLabel: _angular_core.InputSignal<string>;
     readonly expandLabel: _angular_core.InputSignal<string>;
     readonly closeLabel: _angular_core.InputSignal<string>;
+    /** `brand` (default) is the dark rail; `surface` is a light rail with brand accents. */
+    readonly appearance: _angular_core.InputSignal<SdsSidebarAppearance>;
+    /** Add slow-drifting brand-tinted blobs behind the rail (opt-in). */
+    readonly decorations: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected readonly collapsed: _angular_core.WritableSignal<boolean>;
     protected readonly mobileOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly asideClass: _angular_core.Signal<string>;
+    /** The two header icon buttons, painted for the active rail. */
+    protected readonly railBtnClass: _angular_core.Signal<"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">;
     /** Desktop rail width (full vs. collapsed); mobile always uses full width. */
     protected readonly railWidth: _angular_core.Signal<"var(--sds-sidebar-w-collapsed)" | "var(--sds-sidebar-w)">;
+    protected onEscape(): void;
+    /** Keep Tab inside the open mobile drawer (a modal must not leak focus to the page behind the scrim). */
+    protected onDrawerKeydown(event: KeyboardEvent): void;
+    private focusableEls;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSidebar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSidebar, "sds-sidebar", never, { "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[sdsFooter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSidebar, "sds-sidebar", never, { "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "decorations": { "alias": "decorations"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[sdsFooter]"], true, never>;
 }
 
 /**
@@ -2153,7 +2438,7 @@ declare class SdsNavGroup {
     /** Turn the label into an expand/collapse control. */
     readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
-    readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | null>;
+    readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
     /**
      * URL prefix owned by this group, e.g. `/payments`. While the active route starts with it the
      * group counts as active and opens itself — unless the person has explicitly toggled it since.
@@ -2164,10 +2449,21 @@ declare class SdsNavGroup {
     /** Explicit user choice; null means "follow the route". */
     private readonly manual;
     private readonly 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).
+     */
     protected readonly routeActive: _angular_core.Signal<boolean>;
     protected readonly expanded: _angular_core.Signal<boolean>;
     protected readonly collapsed: _angular_core.WritableSignal<boolean>;
+    /** Rail paint, shared via the store — see SidebarStore.appearance. Drives the header/caption tones. */
+    private readonly surface;
+    /** Collapsible header, painted for the active rail (ink+brand on `surface`, white on `brand`). */
+    protected readonly headerClass: _angular_core.Signal<string>;
+    protected readonly chevronClass: _angular_core.Signal<string>;
+    protected readonly dividerClass: _angular_core.Signal<string>;
+    protected readonly captionClass: _angular_core.Signal<string>;
     /**
      * 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
@@ -2205,7 +2501,7 @@ declare class SdsNavGroup {
  */
 declare class SdsNavItem {
     protected readonly store: SidebarStore;
-    readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | null>;
+    readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
     readonly label: _angular_core.InputSignal<string>;
     /** Router link target; when null, the item behaves as a button. */
     readonly link: _angular_core.InputSignal<string | unknown[] | null>;
@@ -2215,9 +2511,197 @@ declare class SdsNavItem {
     readonly select: _angular_core.OutputEmitterRef<void>;
     protected readonly collapsed: _angular_core.WritableSignal<boolean>;
     protected itemClass(isActive: boolean): string;
+    /**
+     * 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.
+     */
+    protected readonly accentBarClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsNavItem, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavItem, "sds-nav-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "exact": { "alias": "exact"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, never, true, never>;
 }
 
-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 type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLocalizedInputSize, SdsLocalizedValue, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSelectAppearance, SdsSelectSize, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance };
+type SdsUserMenuAppearance = 'surface' | 'on-brand';
+type SdsUserMenuAlign = 'start' | 'end';
+/**
+ * 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>
+ */
+declare class SdsUserMenu {
+    private readonly el;
+    private readonly trigger;
+    readonly name: _angular_core.InputSignal<string>;
+    readonly email: _angular_core.InputSignal<string>;
+    readonly initials: _angular_core.InputSignal<string>;
+    readonly src: _angular_core.InputSignal<string | null>;
+    readonly status: _angular_core.InputSignal<SdsAvatarStatus | null>;
+    /** `surface` (default) for a light / glass bar; `on-brand` for the dark brand bar. */
+    readonly appearance: _angular_core.InputSignal<SdsUserMenuAppearance>;
+    /** Which edge the panel aligns to. `end` (default) hangs the panel from the right of the trigger. */
+    readonly align: _angular_core.InputSignal<SdsUserMenuAlign>;
+    /** Show the name/email beside the avatar (≥ sm). Turn off for an avatar-only trigger. */
+    readonly showDetails: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Trigger avatar box size in px. */
+    readonly avatarSize: _angular_core.InputSignal<number>;
+    /** Override the trigger avatar's initials background; defaults per appearance. */
+    readonly avatarBgClass: _angular_core.InputSignal<string | null>;
+    /** Accessible name for the trigger (icon/avatar only when details are hidden). */
+    readonly menuLabel: _angular_core.InputSignal<string>;
+    readonly openChange: _angular_core.OutputEmitterRef<boolean>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected toggle(): void;
+    protected close(): void;
+    protected onDocumentClick(event: MouseEvent): void;
+    protected onEscape(): void;
+    /** Close when any actionable row (link or button) inside the panel is activated. */
+    protected onPanelClick(event: MouseEvent): void;
+    private readonly onBrand;
+    protected readonly resolvedAvatarBg: _angular_core.Signal<string>;
+    protected readonly headerAvatarBg: _angular_core.Signal<string>;
+    protected readonly triggerClass: _angular_core.Signal<"hover:bg-white/10 focus-visible:ring-white/40" | "hover:bg-muted focus-visible:ring-brand-500/40">;
+    protected readonly nameClass: _angular_core.Signal<"text-white" | "text-ink">;
+    protected readonly emailClass: _angular_core.Signal<"text-ink-faint" | "text-white/70">;
+    protected readonly chevronClass: _angular_core.Signal<"text-ink-faint" | "text-white/70">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsUserMenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsUserMenu, "sds-user-menu", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "email": { "alias": "email"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "showDetails": { "alias": "showDetails"; "required": false; "isSignal": true; }; "avatarSize": { "alias": "avatarSize"; "required": false; "isSignal": true; }; "avatarBgClass": { "alias": "avatarBgClass"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, ["*"], true, never>;
+}
+
+type SdsMenuItemTone = 'default' | 'danger';
+/**
+ * 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()" />
+ */
+declare class SdsMenuItem {
+    readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "user-check" | "hand" | "users" | "bike" | "building-2" | "package" | "package-plus" | "package-open" | "rotate-ccw" | "bar-chart-3" | "search" | "log-out" | "panel-left-close" | "panel-left-open" | "panel-left" | "calendar" | "chevron-right" | "chevron-left" | "chevron-down" | "chevron-up" | "plus" | "minus" | "chevrons-left" | "chevrons-right" | "x" | "check" | "alert-circle" | "info" | "copy" | "type" | "tag" | "square" | "circle-user" | "layout-grid" | "panels-top-left" | "panel-top" | "rows-3" | "book-open" | "palette" | "bell" | "phone" | "settings" | "align-left" | "toggle-left" | "arrow-up" | "arrow-down" | "chevrons-up-down" | "filter" | "table" | "eye" | "eye-off" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | "bug" | "scroll-text" | "moon" | "sun" | "search-x" | "command" | "sparkles" | null>;
+    readonly label: _angular_core.InputSignal<string>;
+    /** Router link target; when null (default) the item renders as a button. */
+    readonly link: _angular_core.InputSignal<string | unknown[] | null>;
+    readonly tone: _angular_core.InputSignal<SdsMenuItemTone>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly select: _angular_core.OutputEmitterRef<void>;
+    protected readonly rowClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsMenuItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsMenuItem, "sds-menu-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "select": "select"; }, never, ["*"], true, never>;
+}
+
+/** One searchable entry. `group` buckets it under a heading; `keywords` widen what the filter matches. */
+interface SdsSearchItem {
+    /** Stable identity, also used to build the option's DOM id. */
+    id: string;
+    label: string;
+    icon?: SdsIconName;
+    /** Optional section heading; items sharing a group render together. */
+    group?: string;
+    /** Extra terms the filter should match beyond the label (synonyms, a route, an acronym). */
+    keywords?: string;
+    disabled?: boolean;
+}
+type SdsSearchAppearance = 'surface' | 'on-brand';
+interface Section {
+    label: string;
+    items: SdsSearchItem[];
+}
+/**
+ * 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)"
+ * />
+ */
+declare class SdsSearchCommand {
+    private readonly document;
+    private readonly searchInput;
+    private readonly overlay;
+    /** The searchable entries. Order is preserved; when the field is empty they show as quick navigation. */
+    readonly items: _angular_core.InputSignal<SdsSearchItem[]>;
+    /** Placeholder on the trigger pill and the search field. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Show the built-in trigger pill. Turn off to drive the palette from your own control (`cmd.open()`). */
+    readonly showTrigger: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Enable the global ⌘K / Ctrl-K shortcut. */
+    readonly hotkey: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Trigger pill minimum width in px, so it does not collapse in a flexible top-bar slot. */
+    readonly triggerMinWidth: _angular_core.InputSignal<number>;
+    /** `surface` (default) for a light / glass bar; `on-brand` for the dark brand bar. */
+    readonly appearance: _angular_core.InputSignal<SdsSearchAppearance>;
+    /**
+     * 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).
+     */
+    readonly searchLabel: _angular_core.InputSignal<string>;
+    readonly clearLabel: _angular_core.InputSignal<string>;
+    readonly emptyLabel: _angular_core.InputSignal<string>;
+    readonly selectHint: _angular_core.InputSignal<string>;
+    readonly navigateHint: _angular_core.InputSignal<string>;
+    readonly closeHint: _angular_core.InputSignal<string>;
+    readonly select: _angular_core.OutputEmitterRef<SdsSearchItem>;
+    readonly openChange: _angular_core.OutputEmitterRef<boolean>;
+    protected readonly isOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly query: _angular_core.WritableSignal<string>;
+    /** DOM id of the highlighted option, or null. Kept as the id (not an index) so the list can regroup. */
+    protected readonly activeId: _angular_core.WritableSignal<string | null>;
+    /** The element focused before the palette opened, restored to it on close (WAI-ARIA dialog pattern). */
+    private restoreFocusTo;
+    constructor();
+    open(): void;
+    close(): void;
+    toggle(): void;
+    private readonly filtered;
+    protected readonly sections: _angular_core.Signal<Section[]>;
+    private readonly flat;
+    protected optionId(item: SdsSearchItem): string;
+    protected onInput(event: Event): void;
+    protected clear(): void;
+    protected setActiveById(id: string): void;
+    protected choose(item: SdsSearchItem): void;
+    protected onPanelKeydown(event: KeyboardEvent): void;
+    protected onGlobalKeydown(event: KeyboardEvent): void;
+    private trapTab;
+    private move;
+    private readonly onBrand;
+    protected readonly triggerClass: _angular_core.Signal<"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">;
+    protected readonly triggerTextClass: _angular_core.Signal<"text-ink-faint" | "text-white/80">;
+    protected readonly kbdClass: _angular_core.Signal<"border-white/25 text-white/70" | "border-border bg-surface text-ink-faint">;
+    protected readonly hotkeyLabel: _angular_core.Signal<"⌘K" | "Ctrl K">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSearchCommand, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSearchCommand, "sds-search-command", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "showTrigger": { "alias": "showTrigger"; "required": false; "isSignal": true; }; "hotkey": { "alias": "hotkey"; "required": false; "isSignal": true; }; "triggerMinWidth": { "alias": "triggerMinWidth"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "selectHint": { "alias": "selectHint"; "required": false; "isSignal": true; }; "navigateHint": { "alias": "navigateHint"; "required": false; "isSignal": true; }; "closeHint": { "alias": "closeHint"; "required": false; "isSignal": true; }; }, { "select": "select"; "openChange": "openChange"; }, never, never, true, never>;
+}
+
+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 };
+export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonShape, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputNumberAppearance, SdsInputNumberButtonLayout, SdsInputNumberCurrencyDisplay, SdsInputNumberMode, SdsInputNumberSize, SdsInputShape, SdsInputSize, SdsInputType, SdsLocalizedInputSize, SdsLocalizedValue, SdsMenuItemTone, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsOtpInputSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSearchAppearance, SdsSearchItem, SdsSelectAppearance, SdsSelectEmptyContext, SdsSelectFooterContext, SdsSelectOptionContext, SdsSelectSize, SdsShellBackground, SdsSidebarAppearance, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsTheme, SdsThemeToggleAppearance, SdsToast, SdsToastKind, SdsToggleSwitchSize, SdsTopbarAppearance, SdsUserMenuAlign, SdsUserMenuAppearance };