@besaitech/ng-design-system 0.0.16 → 0.0.29

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,10 +14,24 @@ 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>',
     users: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
+    // Couriers. The back-office and the courier-facing screens both name a rider, and every Belvigo
+    // surface that does should draw the same one.
+    bike: '<circle cx="18.5" cy="17.5" r="3.5"/><circle cx="5.5" cy="17.5" r="3.5"/><circle cx="15" cy="5" r="1"/><path d="M12 17.5V14l-3-3 4-3 2 3h2"/>',
     'building-2': '<path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"/><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"/><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"/><path d="M10 6h4"/><path d="M10 10h4"/><path d="M10 14h4"/><path d="M10 18h4"/>',
     package: '<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/><path d="M12 22V12"/><polyline points="3.29 7 12 12 20.71 7"/><path d="m7.5 4.27 9 5.15"/>',
     'package-plus': '<path d="M16 16h6"/><path d="M19 13v6"/><path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0"/><path d="m7.5 4.27 9 5.15"/><polyline points="3.29 7 12 12 20.71 7"/><path d="M12 22V12"/>',
@@ -260,11 +276,33 @@ class SdsInput {
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
     error = input('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+    /**
+     * `search` is the semantically right type for a search field, and the template strips the WebKit
+     * search decorations that come with it. Without that, a `search` field with {@link clearable} draws
+     * TWO clear buttons — the component's and the browser's own, which no stylesheet can reach and which
+     * sits outside the field's own padding.
+     */
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * `filled` is a borderless field on a muted ground, for a search box that has to sit inside a page
+     * rather than announce itself as a form control — a storefront's search pill above all.
+     * `on-brand` is the same field tuned for a dark surface.
+     */
     appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    /**
+     * `pill` fully rounds the field. Separate from {@link appearance} on purpose: a bordered pill and a
+     * filled box are both real designs, and folding the two axes into one enum would forbid half of them.
+     */
+    shape = input('control', ...(ngDevMode ? [{ debugName: "shape" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Accessible name for the clear button. French default so existing consumers are unchanged, but an
+     * app serving more than one language MUST translate it — it is an icon-only control, so this string
+     * is its only name.
+     */
+    clearLabel = input('Effacer', ...(ngDevMode ? [{ debugName: "clearLabel" }] : []));
     leadingIcon = input(null, ...(ngDevMode ? [{ debugName: "leadingIcon" }] : []));
     trailingIcon = input(null, ...(ngDevMode ? [{ debugName: "trailingIcon" }] : []));
     /**
@@ -286,6 +324,8 @@ class SdsInput {
     value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : []));
     onBrand = computed(() => this.appearance() === 'on-brand', ...(ngDevMode ? [{ debugName: "onBrand" }] : []));
+    filled = computed(() => this.appearance() === 'filled', ...(ngDevMode ? [{ debugName: "filled" }] : []));
+    pill = computed(() => this.shape() === 'pill', ...(ngDevMode ? [{ debugName: "pill" }] : []));
     isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     describedBy = computed(() => {
         if (this.error())
@@ -295,15 +335,29 @@ class SdsInput {
         return null;
     }, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
     fieldPadding = computed(() => {
-        const left = this.leadingIcon() ? 'pl-10' : 'pl-3.5';
-        const right = this.trailingIcon() || this.clearable() || this.trailingAction() ? 'pr-10' : 'pr-3.5';
+        const inset = this.pill() ? 'pl-11' : 'pl-10';
+        const bare = this.pill() ? 'pl-5' : 'pl-3.5';
+        const left = this.leadingIcon() ? inset : bare;
+        const right = this.trailingIcon() || this.clearable() || this.trailingAction()
+            ? 'pr-10'
+            : this.pill()
+                ? 'pr-5'
+                : 'pr-3.5';
         return `${left} ${right}`;
     }, ...(ngDevMode ? [{ debugName: "fieldPadding" }] : []));
     wrapperClasses = computed(() => {
-        const parts = [SIZES$8[this.size()]];
+        const parts = [SIZES$8[this.size()], this.pill() ? 'rounded-full' : 'rounded-control'];
         if (this.isDisabled())
             parts.push('opacity-60 cursor-not-allowed');
-        if (this.onBrand()) {
+        if (this.filled()) {
+            // border-transparent, not border-0: the border box is what keeps a filled field the same height
+            // as a bordered one, so the two sit level when a toolbar mixes them.
+            parts.push('border-transparent bg-muted text-ink');
+            parts.push(this.error()
+                ? 'border-danger focus-within:ring-2 focus-within:ring-danger/30'
+                : 'focus-within:ring-2 focus-within:ring-brand-500/25');
+        }
+        else if (this.onBrand()) {
             parts.push('bg-white/10 text-white');
             parts.push(this.error()
                 ? 'border-danger focus-within:ring-2 focus-within:ring-danger/30'
@@ -343,7 +397,7 @@ class SdsInput {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsInput, isStandalone: true, selector: "sds-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingAction: { classPropertyName: "trailingAction", publicName: "trailingAction", isSignal: true, isRequired: false, transformFunction: null }, trailingActionLabel: { classPropertyName: "trailingActionLabel", publicName: "trailingActionLabel", isSignal: true, isRequired: false, transformFunction: null }, trailingActionPressed: { classPropertyName: "trailingActionPressed", publicName: "trailingActionPressed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { trailingActionClick: "trailingActionClick" }, host: { classAttribute: "block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsInput, isStandalone: true, selector: "sds-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingAction: { classPropertyName: "trailingAction", publicName: "trailingAction", isSignal: true, isRequired: false, transformFunction: null }, trailingActionLabel: { classPropertyName: "trailingActionLabel", publicName: "trailingActionLabel", isSignal: true, isRequired: false, transformFunction: null }, trailingActionPressed: { classPropertyName: "trailingActionPressed", publicName: "trailingActionPressed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { trailingActionClick: "trailingActionClick" }, host: { classAttribute: "block" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SdsInput),
@@ -361,14 +415,17 @@ class SdsInput {
     }
 
     <div
-      class="relative flex items-center rounded-control border transition-colors"
+      class="relative flex items-center border transition-colors"
       [class]="wrapperClasses()"
     >
       @if (leadingIcon()) {
+        <!-- A pill needs its icon further in: on a fully-rounded field an icon at left-3 sits over
+             the curve rather than inside the field. -->
         <sds-icon
           [name]="leadingIcon()!"
           [size]="18"
-          class="pointer-events-none absolute left-3 opacity-70"
+          class="pointer-events-none absolute opacity-70"
+          [class]="pill() ? 'left-4' : 'left-3'"
         />
       }
 
@@ -381,7 +438,9 @@ class SdsInput {
         [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
         [attr.aria-invalid]="error() ? 'true' : null"
         [attr.aria-describedby]="describedBy()"
-        class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed
+               [&::-webkit-search-cancel-button]:appearance-none
+               [&::-webkit-search-decoration]:appearance-none"
         [class]="fieldPadding()"
         (input)="onInput($event)"
         (blur)="onTouched()"
@@ -391,7 +450,7 @@ class SdsInput {
         <button
           type="button"
           tabindex="-1"
-          aria-label="Effacer"
+          [attr.aria-label]="clearLabel()"
           class="absolute right-2.5 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-60 hover:opacity-100 hover:bg-black/5"
           (click)="clear()"
         >
@@ -459,14 +518,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
 
     <div
-      class="relative flex items-center rounded-control border transition-colors"
+      class="relative flex items-center border transition-colors"
       [class]="wrapperClasses()"
     >
       @if (leadingIcon()) {
+        <!-- A pill needs its icon further in: on a fully-rounded field an icon at left-3 sits over
+             the curve rather than inside the field. -->
         <sds-icon
           [name]="leadingIcon()!"
           [size]="18"
-          class="pointer-events-none absolute left-3 opacity-70"
+          class="pointer-events-none absolute opacity-70"
+          [class]="pill() ? 'left-4' : 'left-3'"
         />
       }
 
@@ -479,7 +541,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         [attr.aria-label]="!label() && ariaLabel() ? ariaLabel() : null"
         [attr.aria-invalid]="error() ? 'true' : null"
         [attr.aria-describedby]="describedBy()"
-        class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed"
+        class="w-full bg-transparent outline-none placeholder:text-current/50 disabled:cursor-not-allowed
+               [&::-webkit-search-cancel-button]:appearance-none
+               [&::-webkit-search-decoration]:appearance-none"
         [class]="fieldPadding()"
         (input)="onInput($event)"
         (blur)="onTouched()"
@@ -489,7 +553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         <button
           type="button"
           tabindex="-1"
-          aria-label="Effacer"
+          [attr.aria-label]="clearLabel()"
           class="absolute right-2.5 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-60 hover:opacity-100 hover:bg-black/5"
           (click)="clear()"
         >
@@ -531,7 +595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], trailingAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAction", required: false }] }], trailingActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionLabel", required: false }] }], trailingActionPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionPressed", required: false }] }], trailingActionClick: [{ type: i0.Output, args: ["trailingActionClick"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], trailingAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAction", required: false }] }], trailingActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionLabel", required: false }] }], trailingActionPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingActionPressed", required: false }] }], trailingActionClick: [{ type: i0.Output, args: ["trailingActionClick"] }] } });
 
 let nextId$9 = 0;
 const SIZES$7 = {
@@ -6501,29 +6565,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,66 +6656,80 @@ 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" />
           </button>
         }
         <ng-content select="[sdsLogo]" />
+        <!--
+          shrink-0 + whitespace-nowrap, both required. The left block is a flex row, so without them a
+          two-word app name wraps to a second line INSIDE a bar whose height is fixed at
+          --sds-topbar-h, and the name is clipped by its own bar. It surfaced at 375px on a bar
+          carrying a logo, a wordmark and a two-syllable name; it is wrong at every width.
+
+          The name never truncates and never hides: it is the answer to "which app am I in", which on a
+          platform of five same-branded apps is the one thing the bar must not drop. An app whose left
+          block is too crowded for a phone hides ITS OWN wordmark under sm and keeps the mark.
+        -->
         @if (appName()) {
-          <span class="h-7 w-px bg-white/30"></span>
-          <span class="text-xl font-bold tracking-tight">{{ appName() }}</span>
+          <span class="h-7 w-px shrink-0" [class]="appearance() === 'brand' ? 'bg-white/30' : 'bg-border'"></span>
+          <span class="shrink-0 whitespace-nowrap text-xl font-bold tracking-tight">{{ appName() }}</span>
         }
+        <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>
-  `, 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,54 +6755,64 @@ 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" />
           </button>
         }
         <ng-content select="[sdsLogo]" />
+        <!--
+          shrink-0 + whitespace-nowrap, both required. The left block is a flex row, so without them a
+          two-word app name wraps to a second line INSIDE a bar whose height is fixed at
+          --sds-topbar-h, and the name is clipped by its own bar. It surfaced at 375px on a bar
+          carrying a logo, a wordmark and a two-syllable name; it is wrong at every width.
+
+          The name never truncates and never hides: it is the answer to "which app am I in", which on a
+          platform of five same-branded apps is the one thing the bar must not drop. An app whose left
+          block is too crowded for a phone hides ITS OWN wordmark under sm and keeps the mark.
+        -->
         @if (appName()) {
-          <span class="h-7 w-px bg-white/30"></span>
-          <span class="text-xl font-bold tracking-tight">{{ appName() }}</span>
+          <span class="h-7 w-px shrink-0" [class]="appearance() === 'brand' ? 'bg-white/30' : 'bg-border'"></span>
+          <span class="shrink-0 whitespace-nowrap text-xl font-bold tracking-tight">{{ appName() }}</span>
         }
+        <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>
   `,
                 }]
-        }], 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 +6875,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 +6890,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 +6918,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 +6930,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 +6984,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 +6996,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 +7015,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