@besaitech/ng-design-system 0.0.16 → 0.0.26

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

@@ -4,7 +4,9 @@ import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
 import { NgTemplateOutlet } from '@angular/common';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
+import { filter, map } from 'rxjs';
 
 /**
  * Curated set of line icons (Lucide-style, 24x24 viewBox, stroke-based).
@@ -12,6 +14,17 @@ import { RouterLink, RouterLinkActive } from '@angular/router';
  * Add new icons here and they become available everywhere via name="...".
  */
 const SDS_ICONS = {
+    // Added for the Belvigo merchant shell (nav + header). Lucide 24x24 stroke paths, matching the
+    // set the app already used before it moved onto this library.
+    '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"/>',
+    '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"/>',
+    'credit-card': '<rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/>',
+    '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"/>',
+    '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"/>',
+    'megaphone': '<path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/>',
+    '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"/>',
+    '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"/>',
+    'user-round': '<circle cx="12" cy="8" r="5"/><path d="M20 21a8 8 0 0 0-16 0"/>',
     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"/>',
     '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"/>',
     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>',
@@ -6501,29 +6514,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }] });
 
 /**
- * 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>
  */
 class SdsTopbar {
     store = inject(SidebarStore);
     appName = input('', ...(ngDevMode ? [{ debugName: "appName" }] : []));
-    user = input(null, ...(ngDevMode ? [{ debugName: "user" }] : []));
-    showLogout = input(true, ...(ngDevMode ? [{ debugName: "showLogout", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * 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.
+     */
+    contentWidth = input('w-full', ...(ngDevMode ? [{ debugName: "contentWidth" }] : []));
     /** Show the mobile hamburger that toggles the sidebar drawer (< lg). */
     menuButton = input(true, ...(ngDevMode ? [{ debugName: "menuButton", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    logout = output();
+    /**
+     * 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.
+     */
+    menuLabel = input('Ouvrir le menu', ...(ngDevMode ? [{ debugName: "menuLabel" }] : []));
+    /** `brand` (default) paints the gradient and the wave; `surface` is white on a hairline border. */
+    appearance = input('brand', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    shellClasses = computed(() => this.appearance() === 'brand'
+        ? 'bg-linear-to-r from-brand-800 via-brand-700 to-brand-600 text-white'
+        : 'border-b border-border bg-surface text-ink', ...(ngDevMode ? [{ debugName: "shellClasses" }] : []));
+    menuButtonClasses = computed(() => this.appearance() === 'brand'
+        ? 'text-white/85 hover:bg-white/10 hover:text-white focus-visible:ring-white/40'
+        : 'text-ink-soft hover:bg-muted hover:text-ink focus-visible:ring-brand-500/40', ...(ngDevMode ? [{ debugName: "menuButtonClasses" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTopbar, isStandalone: true, selector: "sds-topbar", inputs: { appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, showLogout: { classPropertyName: "showLogout", publicName: "showLogout", isSignal: true, isRequired: false, transformFunction: null }, menuButton: { classPropertyName: "menuButton", publicName: "menuButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logout: "logout" }, host: { classAttribute: "block" }, ngImport: i0, template: `
-    <header
-      class="relative z-30 flex items-center justify-between overflow-hidden bg-linear-to-r from-brand-800 via-brand-700 to-brand-600 px-4 text-white sm:px-6"
-      style="height: var(--sds-topbar-h)"
-    >
-      <!-- Decorative wave -->
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsTopbar, isStandalone: true, selector: "sds-topbar", inputs: { appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null }, menuButton: { classPropertyName: "menuButton", publicName: "menuButton", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <header class="relative z-30" [class]="shellClasses()" style="height: var(--sds-topbar-h)">
+      <!--
+        Decorative wave. The clip lives HERE, on the wave's own wrapper, and not on the header.
+        The header used to carry overflow-hidden, which also clipped anything projected into
+        [sdsActions] — so an app menu or dropdown, the very thing that slot exists for, rendered as a
+        4px sliver. The wave still needs clipping; nothing else does.
+      -->
+      @if (appearance() === 'brand') {
+      <span class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
       <svg
         class="pointer-events-none absolute inset-y-0 right-0 h-full w-2/3 min-w-[420px]"
         viewBox="0 0 600 64"
@@ -6549,14 +6605,27 @@ class SdsTopbar {
           stroke-width="1.5"
         />
       </svg>
+      </span>
+      }
 
+      <!--
+        The band is always full-bleed — the gradient and the wave span the viewport — while the
+        CONTENTS are constrained by [contentWidth], so a bar over a centred page lines up with it
+        instead of running to the edges. Empty (the default) leaves the contents full-bleed too,
+        which is what a dashboard shell wants.
+      -->
+      <div
+        class="relative mx-auto flex h-full items-center justify-between px-4 sm:px-6"
+        [class]="contentWidth()"
+      >
       <!-- Left: mobile menu button + logo + app name -->
       <div class="relative flex items-center gap-3">
         @if (menuButton()) {
           <button
             type="button"
-            class="-ml-1 inline-flex h-9 w-9 items-center justify-center rounded-control text-white/85 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 lg:hidden"
-            aria-label="Ouvrir le menu"
+            class="-ml-1 inline-flex h-9 w-9 items-center justify-center rounded-control transition-colors focus-visible:outline-none focus-visible:ring-2 lg:hidden"
+            [class]="menuButtonClasses()"
+            [attr.aria-label]="menuLabel()"
             (click)="store.toggleMobile()"
           >
             <sds-icon name="menu" [size]="22" />
@@ -6564,51 +6633,42 @@ class SdsTopbar {
         }
         <ng-content select="[sdsLogo]" />
         @if (appName()) {
-          <span class="h-7 w-px bg-white/30"></span>
+          <span class="h-7 w-px" [class]="appearance() === 'brand' ? 'bg-white/30' : 'bg-border'"></span>
           <span class="text-xl font-bold tracking-tight">{{ appName() }}</span>
         }
+        <ng-content select="[sdsLead]" />
       </div>
 
-      <!-- Right: actions + user + logout -->
+      <!-- Flexible middle: takes the space the two ends leave, and is skipped entirely when empty. -->
+      <div class="relative flex min-w-0 flex-1 items-center justify-center px-2">
+        <ng-content select="[sdsCenter]" />
+      </div>
+
+      <!-- Right: whatever the app puts here -->
       <div class="relative flex items-center gap-3 sm:gap-4">
         <ng-content select="[sdsActions]" />
-        @if (user(); as u) {
-          <span class="hidden text-sm font-medium sm:block">{{ u.name }}</span>
-          <sds-avatar
-            [name]="u.name"
-            [initials]="u.initials ?? ''"
-            [status]="u.status ?? 'online'"
-            [size]="38"
-            bgClass="bg-white/15"
-          />
-        }
-        @if (showLogout()) {
-          <button
-            type="button"
-            class="inline-flex h-9 w-9 items-center justify-center rounded-control text-white/85 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40"
-            aria-label="Se déconnecter"
-            (click)="logout.emit()"
-          >
-            <sds-icon name="log-out" [size]="20" />
-          </button>
-        }
+      </div>
       </div>
     </header>
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsAvatar, selector: "sds-avatar", inputs: ["name", "initials", "src", "size", "status", "bgClass"] }, { kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsTopbar, decorators: [{
             type: Component,
             args: [{
                     selector: 'sds-topbar',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SdsAvatar, SdsIcon],
+                    imports: [SdsIcon],
                     host: { class: 'block' },
                     template: `
-    <header
-      class="relative z-30 flex items-center justify-between overflow-hidden bg-linear-to-r from-brand-800 via-brand-700 to-brand-600 px-4 text-white sm:px-6"
-      style="height: var(--sds-topbar-h)"
-    >
-      <!-- Decorative wave -->
+    <header class="relative z-30" [class]="shellClasses()" style="height: var(--sds-topbar-h)">
+      <!--
+        Decorative wave. The clip lives HERE, on the wave's own wrapper, and not on the header.
+        The header used to carry overflow-hidden, which also clipped anything projected into
+        [sdsActions] — so an app menu or dropdown, the very thing that slot exists for, rendered as a
+        4px sliver. The wave still needs clipping; nothing else does.
+      -->
+      @if (appearance() === 'brand') {
+      <span class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
       <svg
         class="pointer-events-none absolute inset-y-0 right-0 h-full w-2/3 min-w-[420px]"
         viewBox="0 0 600 64"
@@ -6634,14 +6694,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
           stroke-width="1.5"
         />
       </svg>
+      </span>
+      }
 
+      <!--
+        The band is always full-bleed — the gradient and the wave span the viewport — while the
+        CONTENTS are constrained by [contentWidth], so a bar over a centred page lines up with it
+        instead of running to the edges. Empty (the default) leaves the contents full-bleed too,
+        which is what a dashboard shell wants.
+      -->
+      <div
+        class="relative mx-auto flex h-full items-center justify-between px-4 sm:px-6"
+        [class]="contentWidth()"
+      >
       <!-- Left: mobile menu button + logo + app name -->
       <div class="relative flex items-center gap-3">
         @if (menuButton()) {
           <button
             type="button"
-            class="-ml-1 inline-flex h-9 w-9 items-center justify-center rounded-control text-white/85 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 lg:hidden"
-            aria-label="Ouvrir le menu"
+            class="-ml-1 inline-flex h-9 w-9 items-center justify-center rounded-control transition-colors focus-visible:outline-none focus-visible:ring-2 lg:hidden"
+            [class]="menuButtonClasses()"
+            [attr.aria-label]="menuLabel()"
             (click)="store.toggleMobile()"
           >
             <sds-icon name="menu" [size]="22" />
@@ -6649,39 +6722,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }
         <ng-content select="[sdsLogo]" />
         @if (appName()) {
-          <span class="h-7 w-px bg-white/30"></span>
+          <span class="h-7 w-px" [class]="appearance() === 'brand' ? 'bg-white/30' : 'bg-border'"></span>
           <span class="text-xl font-bold tracking-tight">{{ appName() }}</span>
         }
+        <ng-content select="[sdsLead]" />
+      </div>
+
+      <!-- Flexible middle: takes the space the two ends leave, and is skipped entirely when empty. -->
+      <div class="relative flex min-w-0 flex-1 items-center justify-center px-2">
+        <ng-content select="[sdsCenter]" />
       </div>
 
-      <!-- Right: actions + user + logout -->
+      <!-- Right: whatever the app puts here -->
       <div class="relative flex items-center gap-3 sm:gap-4">
         <ng-content select="[sdsActions]" />
-        @if (user(); as u) {
-          <span class="hidden text-sm font-medium sm:block">{{ u.name }}</span>
-          <sds-avatar
-            [name]="u.name"
-            [initials]="u.initials ?? ''"
-            [status]="u.status ?? 'online'"
-            [size]="38"
-            bgClass="bg-white/15"
-          />
-        }
-        @if (showLogout()) {
-          <button
-            type="button"
-            class="inline-flex h-9 w-9 items-center justify-center rounded-control text-white/85 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40"
-            aria-label="Se déconnecter"
-            (click)="logout.emit()"
-          >
-            <sds-icon name="log-out" [size]="20" />
-          </button>
-        }
+      </div>
       </div>
     </header>
   `,
                 }]
-        }], propDecorators: { appName: [{ type: i0.Input, args: [{ isSignal: true, alias: "appName", required: false }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], showLogout: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLogout", required: false }] }], menuButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuButton", required: false }] }], logout: [{ type: i0.Output, args: ["logout"] }] } });
+        }], propDecorators: { appName: [{ type: i0.Input, args: [{ isSignal: true, alias: "appName", required: false }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: false }] }], menuButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuButton", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }] } });
 
 /**
  * App layout shell: a full-height column with the top bar across the top and a
@@ -6744,6 +6804,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  */
 class SdsSidebar {
     store = inject(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.
+     */
+    collapseLabel = input('Replier le menu', ...(ngDevMode ? [{ debugName: "collapseLabel" }] : []));
+    expandLabel = input('Déplier le menu', ...(ngDevMode ? [{ debugName: "expandLabel" }] : []));
+    closeLabel = input('Fermer le menu', ...(ngDevMode ? [{ debugName: "closeLabel" }] : []));
     collapsed = this.store.collapsed;
     mobileOpen = this.store.mobileOpen;
     /** Desktop rail width (full vs. collapsed); mobile always uses full width. */
@@ -6751,7 +6819,7 @@ class SdsSidebar {
         ? 'var(--sds-sidebar-w-collapsed)'
         : 'var(--sds-sidebar-w)', ...(ngDevMode ? [{ debugName: "railWidth" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSidebar, isStandalone: true, selector: "sds-sidebar", host: { classAttribute: "block h-full" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSidebar, isStandalone: true, selector: "sds-sidebar", inputs: { collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full" }, ngImport: i0, template: `
     <!-- Mobile backdrop (only when the drawer is open, < lg) -->
     @if (mobileOpen()) {
       <div
@@ -6779,7 +6847,7 @@ class SdsSidebar {
         <button
           type="button"
           class="hidden h-9 w-9 items-center justify-center rounded-control text-white/70 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 lg:inline-flex"
-          [attr.aria-label]="collapsed() ? 'Déplier le menu' : 'Replier le menu'"
+          [attr.aria-label]="collapsed() ? expandLabel() : collapseLabel()"
           [attr.aria-expanded]="!collapsed()"
           (click)="store.toggle()"
         >
@@ -6791,7 +6859,7 @@ class SdsSidebar {
         <button
           type="button"
           class="inline-flex h-9 w-9 items-center justify-center rounded-control text-white/70 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 lg:hidden"
-          aria-label="Fermer le menu"
+          [attr.aria-label]="closeLabel()"
           (click)="store.closeMobile()"
         >
           <sds-icon name="x" [size]="20" />
@@ -6845,7 +6913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         <button
           type="button"
           class="hidden h-9 w-9 items-center justify-center rounded-control text-white/70 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 lg:inline-flex"
-          [attr.aria-label]="collapsed() ? 'Déplier le menu' : 'Replier le menu'"
+          [attr.aria-label]="collapsed() ? expandLabel() : collapseLabel()"
           [attr.aria-expanded]="!collapsed()"
           (click)="store.toggle()"
         >
@@ -6857,7 +6925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         <button
           type="button"
           class="inline-flex h-9 w-9 items-center justify-center rounded-control text-white/70 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40 lg:hidden"
-          aria-label="Fermer le menu"
+          [attr.aria-label]="closeLabel()"
           (click)="store.closeMobile()"
         >
           <sds-icon name="x" [size]="20" />
@@ -6876,62 +6944,206 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     </aside>
   `,
                 }]
-        }] });
+        }], propDecorators: { collapseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseLabel", required: false }] }], expandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandLabel", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }] } });
 
 /**
- * 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.
  */
 class SdsNavGroup {
     store = inject(SidebarStore);
+    router = inject(Router);
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /** Turn the label into an expand/collapse control. */
+    collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Icon for a collapsible header, so it reads at the same weight as the items it sits among. */
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    /**
+     * 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.
+     */
+    basePath = input(null, ...(ngDevMode ? [{ debugName: "basePath" }] : []));
+    /** Emits the new state on every manual toggle. Not emitted for route-driven auto-expansion. */
+    expandedChange = output();
+    /** Explicit user choice; null means "follow the route". */
+    manual = signal(null, ...(ngDevMode ? [{ debugName: "manual" }] : []));
+    url = toSignal(this.router.events.pipe(filter((e) => e instanceof NavigationEnd), map((e) => e.urlAfterRedirects)), { initialValue: this.router.url });
+    /** True while the active route lives inside this group. */
+    routeActive = computed(() => {
+        const base = this.basePath();
+        return !!base && this.url().startsWith(base);
+    }, ...(ngDevMode ? [{ debugName: "routeActive" }] : []));
+    expanded = computed(() => this.manual() ?? this.routeActive(), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
     collapsed = this.store.collapsed;
+    /**
+     * 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.
+     */
+    childrenVisible = computed(() => !this.collapsible() || (!this.collapsed() && this.expanded()), ...(ngDevMode ? [{ debugName: "childrenVisible" }] : []));
+    /**
+     * 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.
+     */
+    childrenClass = computed(() => {
+        const parts = ['flex flex-col gap-1'];
+        if (!this.childrenVisible()) {
+            parts.push('hidden');
+        }
+        if (this.collapsible() && !this.collapsed()) {
+            parts.push('ml-5 border-l border-white/10 pl-3');
+        }
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "childrenClass" }] : []));
+    /**
+     * 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.
+     */
+    toggle() {
+        const next = this.collapsed() ? true : !this.expanded();
+        this.manual.set(next);
+        this.expandedChange.emit(next);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsNavGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsNavGroup, isStandalone: true, selector: "sds-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsNavGroup, isStandalone: true, selector: "sds-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <div class="mt-5 first:mt-3">
       @if (label()) {
-        @if (!collapsed()) {
-          <p
-            class="mb-1.5 px-3 text-[11px] font-semibold uppercase tracking-wider text-white/60"
+        @if (collapsible()) {
+          <!--
+            A collapsible header is styled as a NAV ROW, not as a section caption. A small uppercase
+            caption says "everything under me belongs to me" — which is a lie the moment the group is
+            collapsed and the next section's items sit directly beneath it. At row scale, with an icon
+            and a chevron, it reads as the control it is.
+
+            It renders on the collapsed rail too, as an icon alone, because there it is the group's
+            ONLY representation: the children are hidden (a child with no icon of its own would be a
+            blank row), so the app is expected to treat the toggle as "take me into this section" —
+            which is what expandedChange already means.
+          -->
+          <button
+            type="button"
+            class="mb-1 flex h-10 w-full items-center gap-3 rounded-control px-3 text-sm font-medium
+                   text-white/70 transition-colors hover:bg-white/8 hover:text-white
+                   focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40"
+            [class.lg:justify-center]="collapsed()"
+            [class.text-white]="routeActive()"
+            [attr.aria-expanded]="collapsed() ? null : expanded()"
+            [attr.title]="collapsed() ? label() : null"
+            [attr.aria-label]="collapsed() ? label() : null"
+            (click)="toggle()"
           >
+            @if (icon()) {
+              <sds-icon [name]="icon()!" [size]="20" class="shrink-0" />
+            }
+            <span class="flex-1 truncate text-left" [class.lg:hidden]="collapsed()">
+              {{ label() }}
+            </span>
+            <sds-icon
+              name="chevron-down"
+              [size]="16"
+              class="shrink-0 text-white/50 transition-transform"
+              [class.lg:hidden]="collapsed()"
+              [class.rotate-180]="expanded()"
+            />
+          </button>
+        } @else if (collapsed()) {
+          <div class="mx-3 mb-2 mt-2 h-px bg-white/10"></div>
+        } @else {
+          <p class="mb-1.5 px-3 text-[11px] font-semibold uppercase tracking-wider text-white/60">
             {{ label() }}
           </p>
-        } @else {
-          <div class="mx-3 mb-2 mt-2 h-px bg-white/10"></div>
         }
       }
-      <div class="flex flex-col gap-1">
+
+      <div [class]="childrenClass()">
         <ng-content />
       </div>
     </div>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsNavGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'sds-nav-group',
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SdsIcon],
                     host: { class: 'block' },
                     template: `
     <div class="mt-5 first:mt-3">
       @if (label()) {
-        @if (!collapsed()) {
-          <p
-            class="mb-1.5 px-3 text-[11px] font-semibold uppercase tracking-wider text-white/60"
+        @if (collapsible()) {
+          <!--
+            A collapsible header is styled as a NAV ROW, not as a section caption. A small uppercase
+            caption says "everything under me belongs to me" — which is a lie the moment the group is
+            collapsed and the next section's items sit directly beneath it. At row scale, with an icon
+            and a chevron, it reads as the control it is.
+
+            It renders on the collapsed rail too, as an icon alone, because there it is the group's
+            ONLY representation: the children are hidden (a child with no icon of its own would be a
+            blank row), so the app is expected to treat the toggle as "take me into this section" —
+            which is what expandedChange already means.
+          -->
+          <button
+            type="button"
+            class="mb-1 flex h-10 w-full items-center gap-3 rounded-control px-3 text-sm font-medium
+                   text-white/70 transition-colors hover:bg-white/8 hover:text-white
+                   focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/40"
+            [class.lg:justify-center]="collapsed()"
+            [class.text-white]="routeActive()"
+            [attr.aria-expanded]="collapsed() ? null : expanded()"
+            [attr.title]="collapsed() ? label() : null"
+            [attr.aria-label]="collapsed() ? label() : null"
+            (click)="toggle()"
           >
+            @if (icon()) {
+              <sds-icon [name]="icon()!" [size]="20" class="shrink-0" />
+            }
+            <span class="flex-1 truncate text-left" [class.lg:hidden]="collapsed()">
+              {{ label() }}
+            </span>
+            <sds-icon
+              name="chevron-down"
+              [size]="16"
+              class="shrink-0 text-white/50 transition-transform"
+              [class.lg:hidden]="collapsed()"
+              [class.rotate-180]="expanded()"
+            />
+          </button>
+        } @else if (collapsed()) {
+          <div class="mx-3 mb-2 mt-2 h-px bg-white/10"></div>
+        } @else {
+          <p class="mb-1.5 px-3 text-[11px] font-semibold uppercase tracking-wider text-white/60">
             {{ label() }}
           </p>
-        } @else {
-          <div class="mx-3 mb-2 mt-2 h-px bg-white/10"></div>
         }
       }
-      <div class="flex flex-col gap-1">
+
+      <div [class]="childrenClass()">
         <ng-content />
       </div>
     </div>
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], basePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "basePath", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
 /**
  * A single sidebar navigation entry. Renders an anchor when [link] is set