@besaitech/ng-design-system 0.0.11 → 0.0.26

package/index.d.ts

@@ -10,6 +10,15 @@ import * as _besaitech_ng_design_system from '@besaitech/ng-design-system';
  * Add new icons here and they become available everywhere via name="...".
  */
 declare const SDS_ICONS: {
+    readonly 'chart-column': "<path d=\"M3 3v16a2 2 0 0 0 2 2h16\"/><path d=\"M18 17V9\"/><path d=\"M13 17V5\"/><path d=\"M8 17v-3\"/>";
+    readonly 'clipboard-list': "<rect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"/><path d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"/><path d=\"M12 11h4\"/><path d=\"M12 16h4\"/><path d=\"M8 11h.01\"/><path d=\"M8 16h.01\"/>";
+    readonly 'credit-card': "<rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\"/><line x1=\"2\" x2=\"22\" y1=\"10\" y2=\"10\"/>";
+    readonly 'external-link': "<path d=\"M15 3h6v6\"/><path d=\"M10 14 21 3\"/><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"/>";
+    readonly languages: "<path d=\"m5 8 6 6\"/><path d=\"m4 14 6-6 2-3\"/><path d=\"M2 5h12\"/><path d=\"M7 2h1\"/><path d=\"m22 22-5-10-5 10\"/><path d=\"M14 18h6\"/>";
+    readonly megaphone: "<path d=\"m3 11 18-5v12L3 14v-3z\"/><path d=\"M11.6 16.8a3 3 0 1 1-5.8-1.6\"/>";
+    readonly monitor: "<rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"/><line x1=\"8\" x2=\"16\" y1=\"21\" y2=\"21\"/><line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"21\"/>";
+    readonly store: "<path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"/><path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"/><path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"/><path d=\"M2 7h20\"/><path d=\"M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7\"/>";
+    readonly 'user-round': "<circle cx=\"12\" cy=\"8\" r=\"5\"/><path d=\"M20 21a8 8 0 0 0-16 0\"/>";
     readonly home: "<path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/><polyline points=\"9 22 9 12 15 12 15 22\"/>";
     readonly 'user-plus': "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><line x1=\"19\" x2=\"19\" y1=\"8\" y2=\"14\"/><line x1=\"22\" x2=\"16\" y1=\"11\" y2=\"11\"/>";
     readonly hand: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-hand-icon lucide-hand\"><path d=\"M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2\"/><path d=\"M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2\"/><path d=\"M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8\"/><path d=\"M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15\"/></svg>";
@@ -57,6 +66,7 @@ declare const SDS_ICONS: {
     readonly filter: "<polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"/>";
     readonly table: "<path d=\"M12 3v18\"/><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M3 9h18\"/><path d=\"M3 15h18\"/>";
     readonly eye: "<path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>";
+    readonly 'eye-off': "<path d=\"M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68\"/><path d=\"M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61\"/><path d=\"m2 2 20 20\"/><path d=\"M14.12 14.12a3 3 0 1 1-4.24-4.24\"/>";
     readonly user: "<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>";
     readonly 'check-circle': "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m9 12 2 2 4-4\"/>";
     readonly 'arrows-clockwise': "<path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8\"/><path d=\"M21 3v5h-5\"/><path d=\"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16\"/><path d=\"M3 21v-5h5\"/>";
@@ -82,7 +92,7 @@ type SdsIconSize = 'sm' | 'md' | 'lg' | 'xl';
 declare class SdsIcon {
     private readonly sanitizer;
     /** Icon identifier from the registry. */
-    readonly name: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "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" | "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" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle">;
+    readonly name: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "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" | "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">;
     /** 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. */
@@ -143,8 +153,23 @@ declare class SdsInput implements ControlValueAccessor {
     readonly appearance: _angular_core.InputSignal<SdsInputAppearance>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly clearable: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly leadingIcon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "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" | "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" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
-    readonly trailingIcon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "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" | "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" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
+    readonly leadingIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "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" | "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" | null>;
+    readonly trailingIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "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" | "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" | 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
+     * `pointer-events-none`; a consumer who needed a working control previously had to abandon
+     * `sds-input` and rebuild the whole field, losing the label/error/aria wiring with it.
+     *
+     * 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" | "hand" | "users" | "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" | "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" | 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. */
+    readonly trailingActionPressed: _angular_core.InputSignal<boolean | null>;
+    readonly trailingActionClick: _angular_core.OutputEmitterRef<void>;
     /** Current value (driven by CVA + user input). */
     protected readonly value: _angular_core.WritableSignal<string>;
     private readonly cvaDisabled;
@@ -162,7 +187,7 @@ declare class SdsInput implements ControlValueAccessor {
     protected onInput(event: Event): void;
     protected clear(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsInput, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsInput, "sds-input", 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; }; "type": { "alias": "type"; "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; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsInput, "sds-input", 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; }; "type": { "alias": "type"; "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; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "trailingAction": { "alias": "trailingAction"; "required": false; "isSignal": true; }; "trailingActionLabel": { "alias": "trailingActionLabel"; "required": false; "isSignal": true; }; "trailingActionPressed": { "alias": "trailingActionPressed"; "required": false; "isSignal": true; }; }, { "trailingActionClick": "trailingActionClick"; }, never, never, true, never>;
 }
 
 type SdsTextareaSize = 'sm' | 'md' | 'lg';
@@ -247,9 +272,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<"home" | "user-plus" | "hand" | "users" | "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" | "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" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
+    readonly onIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "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" | "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" | null>;
     /** Icon shown on the knob when unchecked. */
-    readonly offIcon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "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" | "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" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
+    readonly offIcon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "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" | "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" | null>;
     readonly hint: _angular_core.InputSignal<string>;
     readonly error: _angular_core.InputSignal<string>;
     /**
@@ -1441,30 +1466,61 @@ declare class SidebarStore {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<SidebarStore>;
 }
 
-interface SdsTopbarUser {
-    name: string;
-    initials?: string;
-    status?: SdsAvatarStatus;
-}
+type SdsTopbarAppearance = 'brand' | 'surface';
 /**
- * Application top bar: brand gradient with a decorative wave, a logo slot,
- * the app name, and the signed-in user with a logout action.
+ * 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
+ * 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.
+ *
+ * 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
+ * icon-only button whose accessible name the library had to guess a language for. What an app needs
+ * beside its own brand bar differs per app, so the bar supplies the surface and the app supplies the
+ * contents: project them into `[sdsActions]`.
+ *
+ * Slots, left to right: `[sdsLogo]`, `[sdsLead]` (beside the name — a location or workspace picker),
+ * `[sdsCenter]` (the flexible middle — a search field), `[sdsActions]` (the right edge).
  *
  * @example
- * <sds-topbar appName="WebApp" [user]="user" (logout)="signOut()">
+ * <sds-topbar appName="WebApp">
  *   <img sdsLogo src="logo.svg" alt="" />
+ *   <my-address-picker sdsLead />
+ *   <my-search sdsCenter />
+ *   <my-account-menu sdsActions />
  * </sds-topbar>
  */
 declare class SdsTopbar {
     protected readonly store: SidebarStore;
     readonly appName: _angular_core.InputSignal<string>;
-    readonly user: _angular_core.InputSignal<SdsTopbarUser | null>;
-    readonly showLogout: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Width of the bar's CONTENTS, as Tailwind width utilities — e.g. `"w-full max-w-7xl"`.
+     *
+     * The coloured band always spans the viewport; this constrains only what sits on it, so the logo and
+     * the actions line up with a page whose own content is centred at the same width. Default is empty,
+     * i.e. contents run edge to edge, which is right for a full-bleed dashboard shell.
+     *
+     * A class string rather than an enum on purpose: apps already state their content width as a Tailwind
+     * utility, and this way the bar is given the SAME string rather than a name that has to be kept in
+     * sync with it.
+     */
+    readonly contentWidth: _angular_core.InputSignal<string>;
     /** Show the mobile hamburger that toggles the sidebar drawer (< lg). */
     readonly menuButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly logout: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Accessible name for the hamburger. Defaults to French so nothing changes for existing consumers,
+     * but any app serving more than one language MUST pass a translated value — an icon-only control's
+     * 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. */
+    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">;
+    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; }; "user": { "alias": "user"; "required": false; "isSignal": true; }; "showLogout": { "alias": "showLogout"; "required": false; "isSignal": true; }; "menuButton": { "alias": "menuButton"; "required": false; "isSignal": true; }; }, { "logout": "logout"; }, never, ["[sdsLogo]", "[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; }; }, {}, never, ["[sdsLogo]", "[sdsLead]", "[sdsCenter]", "[sdsActions]"], true, never>;
 }
 
 /**
@@ -1499,24 +1555,85 @@ declare class SdsShell {
  */
 declare class SdsSidebar {
     protected readonly store: SidebarStore;
+    /**
+     * 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.
+     */
+    readonly collapseLabel: _angular_core.InputSignal<string>;
+    readonly expandLabel: _angular_core.InputSignal<string>;
+    readonly closeLabel: _angular_core.InputSignal<string>;
     protected readonly collapsed: _angular_core.WritableSignal<boolean>;
     protected readonly mobileOpen: _angular_core.WritableSignal<boolean>;
     /** 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)">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsSidebar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsSidebar, "sds-sidebar", never, {}, {}, 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; }; }, {}, never, ["*", "[sdsFooter]"], true, never>;
 }
 
 /**
- * Groups nav items under an optional uppercase section label. The label is
- * hidden (replaced by a divider) when the sidebar is collapsed.
+ * Groups nav items under an optional uppercase section label.
+ *
+ * Two modes:
+ * - **Section** (default) — a static label over its items. The label is replaced by a divider when
+ *   the rail is collapsed.
+ * - **Collapsible** (`[collapsible]`) — the label becomes a button that expands and collapses the
+ *   group. Set `[basePath]` and the group opens itself whenever the active route is inside it, so a
+ *   deep link or a browser Back lands with the right section already open instead of the person
+ *   having to find and re-open it.
+ *
+ * Collapsible mode exists because a flat rail stops scaling somewhere around a dozen destinations,
+ * and the alternative — showing every child of every section at once — buries the ones in use.
+ *
+ * On the collapsed desktop rail there is nowhere to put a header, so a collapsible group renders
+ * exactly like a section: divider, children visible. Hiding them there would leave the rail with
+ * unreachable destinations and no affordance to reveal them.
  */
 declare class SdsNavGroup {
     private readonly store;
+    private readonly router;
     readonly label: _angular_core.InputSignal<string>;
+    /** 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" | "hand" | "users" | "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" | "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" | 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.
+     */
+    readonly basePath: _angular_core.InputSignal<string | null>;
+    /** Emits the new state on every manual toggle. Not emitted for route-driven auto-expansion. */
+    readonly expandedChange: _angular_core.OutputEmitterRef<boolean>;
+    /** Explicit user choice; null means "follow the route". */
+    private readonly manual;
+    private readonly url;
+    /** True while the active route lives inside this group. */
+    protected readonly routeActive: _angular_core.Signal<boolean>;
+    protected readonly expanded: _angular_core.Signal<boolean>;
     protected readonly collapsed: _angular_core.WritableSignal<boolean>;
+    /**
+     * A plain section always shows its items — they carry their own icons, so they survive the collapsed
+     * rail. A collapsible group hides its children there instead: its children are sub-destinations and
+     * typically have no icon, which on an icon-only rail is a row with nothing in it.
+     */
+    protected readonly childrenVisible: _angular_core.Signal<boolean>;
+    /**
+     * One binding rather than `[class]` alongside `[class.hidden]` — mixing a whole-list binding with a
+     * single-class toggle on the same element depends on Angular's styling precedence to resolve, which
+     * is a subtlety no template should rest on.
+     *
+     * The indent rule appears only on an expanded collapsible group on the full-width rail: it is what
+     * shows the children belong to the header above them.
+     */
+    protected readonly childrenClass: _angular_core.Signal<string>;
+    /**
+     * On the collapsed rail there is nothing to expand into, so the toggle always reports "opening" —
+     * the app's handler takes that as the cue to navigate into the section, which is the only useful
+     * meaning the control can have there.
+     */
+    protected toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SdsNavGroup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavGroup, "sds-nav-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SdsNavGroup, "sds-nav-group", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "basePath": { "alias": "basePath"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -1531,7 +1648,7 @@ declare class SdsNavGroup {
  */
 declare class SdsNavItem {
     protected readonly store: SidebarStore;
-    readonly icon: _angular_core.InputSignal<"home" | "user-plus" | "hand" | "users" | "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" | "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" | "user" | "check-circle" | "arrows-clockwise" | "menu" | "file-text" | "hash" | "map-pin" | "inbox" | "arrow-right" | "refresh-cw" | "loader-circle" | null>;
+    readonly icon: _angular_core.InputSignal<"chart-column" | "clipboard-list" | "credit-card" | "external-link" | "languages" | "megaphone" | "monitor" | "store" | "user-round" | "home" | "user-plus" | "hand" | "users" | "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" | "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" | 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>;
@@ -1546,4 +1663,4 @@ declare class SdsNavItem {
 }
 
 export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, isOutOfRange, isSameDay, isoDay, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
-export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputSize, SdsInputType, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSelectSize, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsToggleSwitchSize, SdsTopbarUser };
+export type { SdsAccordionActive, SdsAccordionValue, SdsAvatarStatus, SdsBadgeSize, SdsBadgeVariant, SdsButtonSize, SdsButtonVariant, SdsCardVariant, SdsCheckboxSize, SdsDatePickerSize, SdsIconName, SdsIconSize, SdsInputAppearance, SdsInputSize, SdsInputType, SdsMultiSelectDisplay, SdsMultiSelectSize, SdsPaginatorSize, SdsPaginatorState, SdsPhoneCountry, SdsPhoneInputSize, SdsPhoneValue, SdsSelectSize, SdsSortOrder, SdsTabValue, SdsTableCellContext, SdsTableColumn, SdsTableLazyEvent, SdsTableRowExpansionContext, SdsTableSize, SdsTableSortEvent, SdsTextareaResize, SdsTextareaSize, SdsToggleSwitchSize, SdsTopbarAppearance };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besaitech/ng-design-system",
-  "version": "0.0.11",
+  "version": "0.0.26",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
@@ -17,9 +17,6 @@
   },
   "sideEffects": false,
   "exports": {
-    "./preflight.css": {
-      "default": "./preflight.css"
-    },
     "./themes/*": {
       "default": "./themes/*"
     },

package/themes/base.css

@@ -0,0 +1,66 @@
+/*
+ * Base tokens — everything a component needs that is NOT the brand ramp.
+ *
+ * WHY THIS FILE EXISTS: the brand preset is only 11 of the library's 26 tokens. The other 15 are
+ * surfaces, ink, accents, status and radius, and the components reference them constantly
+ * (sds-card is "bg-surface border-border rounded-card", sds-button secondary is
+ * "bg-white text-ink border-border hover:bg-muted"). Before this file, every consuming app was told
+ * by the README to paste that block by hand — and an app that imported only a brand preset got a
+ * page where the brand-coloured things rendered and everything else silently emitted no CSS at all.
+ * That failure is invisible in a build log: Tailwind does not warn about a utility whose token is
+ * undefined, it just produces nothing.
+ *
+ * Import it BEFORE the brand preset, and both after `@import "tailwindcss"`:
+ *
+ *   @import "tailwindcss";
+ *   @source "../node_modules/@besaitech/ng-design-system";
+ *   @import "@besaitech/ng-design-system/themes/base.css";
+ *   @import "@besaitech/ng-design-system/themes/belvigo.css";
+ *
+ * Every value here is a default an app may override in its own `@theme` afterwards — the typeface
+ * especially, which is the one token most apps do change.
+ */
+@theme {
+  /* Neutrals / surfaces */
+  --color-canvas: #f5f6f8;
+  --color-surface: #ffffff;
+  --color-muted: #f8f9fb;
+  --color-border: #e6e9f0;
+  --color-ink: #1b2440;
+  --color-ink-soft: #5b6577;
+  --color-ink-faint: #8a93a6;
+
+  /* Accent icon-tiles (foreground + soft background) */
+  --color-accent-blue: #2f6bd4;
+  --color-accent-blue-soft: #e8effb;
+  --color-accent-green: #1f9d57;
+  --color-accent-green-soft: #e6f5ec;
+  --color-accent-amber: #e0902a;
+  --color-accent-amber-soft: #fdf0dd;
+  --color-accent-red: #df4f6b;
+  --color-accent-red-soft: #fde7ec;
+  --color-accent-indigo: #6c5ce7;
+  --color-accent-indigo-soft: #ece9fb;
+
+  /* Status */
+  --color-success: #27c06b;
+  --color-warning: #f3b73c;
+  --color-danger: #df4f6b;
+
+  /* Radius */
+  --radius-control: 0.5rem;
+  --radius-card: 0.75rem;
+
+  /* Typography — override in your app's own @theme if your brand uses a different face. */
+  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+}
+
+@layer base {
+  :root {
+    /* Layout dimensions consumed by sds-shell / sds-sidebar. Plain CSS vars, not @theme tokens —
+       they are lengths the layout reads, never Tailwind utilities. */
+    --sds-topbar-h: 64px;
+    --sds-sidebar-w: 256px;
+    --sds-sidebar-w-collapsed: 76px;
+  }
+}

package/themes/saitech.css

@@ -1,5 +1,5 @@
 /*
- * Saitech theme — the library's original brand blues (StaffKit / Cliniques universitaires Saint-Luc).
+ * Saitech theme — the library's original brand blues, and its default.
  *
  * This file is the DEFAULT look every consumer got before themes existed, extracted verbatim so that
  * adding a second brand could not change the first one. If you are looking for the values that used to

package/preflight.css

@@ -1,113 +0,0 @@
-/*
- * @besaitech/ng-design-system — scoped Preflight
- * ------------------------------------------------------------------
- * The library's components are authored against Tailwind's Preflight
- * (its base reset). Apps that don't load Preflight — e.g. because they
- * also use another global design system (@stlucdesign/saint-luc-design-system)
- * and only import `tailwindcss/utilities` — leave the components exposed to
- * that other system's bare-element rules (button fonts, `ul{list-style}`,
- * `li{margin}`, heading styles, …).
- *
- * Import this file into a cascade layer that sits ABOVE the legacy design
- * system but BELOW Tailwind's `utilities` layer, e.g.:
- *
- *   @layer legacy, ng-design-system-base, theme, utilities;
- *   @import '@stlucdesign/saint-luc-design-system/style.css' layer(legacy);
- *   @import '@besaitech/ng-design-system/preflight.css'      layer(ng-design-system-base);
- *   @import 'tailwindcss/theme'     layer(theme);
- *   @import 'tailwindcss/utilities' layer(utilities);
- *
- * Every rule is scoped to the `sds-*` component subtree, so it never touches
- * the host app's own elements. Because it lives below `utilities`, the
- * components' own utility classes always win — this only neutralises styles
- * the components don't set themselves.
- */
-
-:where(
-  sds-icon, sds-button, sds-input, sds-textarea, sds-toggle-switch, sds-avatar,
-  sds-badge, sds-card, sds-calendar, sds-date-picker, sds-select, sds-multi-select,
-  sds-phone-input, sds-paginator, sds-tabs, sds-tab-list, sds-tab, sds-tab-panels,
-  sds-tab-panel, sds-accordion, sds-accordion-panel, sds-accordion-header,
-  sds-accordion-content, sds-table, sds-table-cell, sds-table-row-expansion,
-  sds-topbar, sds-shell, sds-sidebar, sds-nav-group, sds-nav-item,
-  /*
-   * Overlay panels (dropdown lists, country picker) are relocated to
-   * <body> while open, so they're no longer inside an sds-* element. Scope
-   * them by their markers so the reset still reaches their <ul>/<li>/buttons.
-   * The date-picker overlay wraps <sds-calendar> (already covered above).
-   */
-  [data-sds-select-panel], [data-sds-phone-panel]
-) {
-  /* Box model + typography baseline for everything inside a component.
-     `border: 0 solid` mirrors Tailwind Preflight: components add borders via
-     utilities, so this strips the legacy `input{border:…}` from native controls. */
-  & :where(*, *::before, *::after) {
-    box-sizing: border-box;
-    border: 0 solid;
-    font-family: var(--font-sans, ui-sans-serif, system-ui, -apple-system, sans-serif);
-  }
-
-  /* Headings: neutralise size/weight/spacing so component utilities define them. */
-  & :where(h1, h2, h3, h4, h5, h6) {
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    margin: 0;
-  }
-
-  /* Block text. */
-  & :where(p, figure, blockquote, dl, dd) {
-    margin: 0;
-  }
-
-  /* Lists: strip bullets and default spacing (counters ul{list-style:disc}, li{margin}). */
-  & :where(ul, ol) {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  & :where(li) {
-    margin: 0;
-  }
-
-  /* Form controls: inherit typography instead of the host's button/input rules. */
-  & :where(button, input, optgroup, select, textarea) {
-    font: inherit;
-    color: inherit;
-    letter-spacing: inherit;
-  }
-  & :where(button) {
-    background: none;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    cursor: pointer;
-  }
-
-  /* Links. */
-  & :where(a) {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  /* Media. */
-  & :where(img, svg, video, canvas) {
-    display: block;
-    vertical-align: middle;
-  }
-}
-
-/*
- * sds-icon renders line icons as inline SVG with `fill="none"` and
- * `stroke="currentColor"` set as *attributes*. A host `svg { fill: currentColor }`
- * rule (e.g. from @stlucdesign/saint-luc-design-system) overrides those attributes
- * and flood-fills every icon. Re-assert them here. Anchored on `sds-icon` so it also
- * covers icons inside body-relocated overlay panels. Inner shapes that opt into a
- * fill via their own `fill="currentColor"` attribute (e.g. dots) are unaffected.
- */
-:where(sds-icon) svg {
-  width: 100%;
-  height: 100%;
-  fill: none;
-  stroke: currentColor;
-}