@besaitech/ng-design-system 0.0.16 → 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>";
@@ -83,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" | "eye-off" | "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. */
@@ -144,8 +153,8 @@ 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" | "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<"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 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
@@ -155,7 +164,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<"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 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. */
@@ -263,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" | "eye-off" | "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" | "eye-off" | "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>;
     /**
@@ -1457,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>;
 }
 
 /**
@@ -1515,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>;
 }
 
 /**
@@ -1547,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" | "eye-off" | "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>;
@@ -1562,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.16",
+  "version": "0.0.26",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"