@siemens/element-ng 51.0.1 → 51.1.0

package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs

@@ -1,10 +1,10 @@
 import * as i1 from '@angular/cdk/portal';
 import { DomPortal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, Component, InjectionToken, viewChild, linkedSignal, input, untracked, signal, computed, ViewContainerRef, DestroyRef, Injector, effect, Directive, booleanAttribute, model, contentChild, contentChildren, afterNextRender, output } from '@angular/core';
+import { inject, ElementRef, Component, InjectionToken, viewChild, linkedSignal, input, untracked, computed, signal, ViewContainerRef, DestroyRef, Injector, effect, Directive, booleanAttribute, model, contentChild, contentChildren, afterNextRender, afterRenderEffect, output } from '@angular/core';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { elementRight2, elementDown2, elementLayoutPane2Right, elementLayoutPane2, elementDoubleRight, elementDoubleLeft, elementSearch } from '@siemens/element-icons';
+import { elementRight2, elementDown2, elementLayoutPane2Right, elementLayoutPane2, elementDoubleRight, elementDoubleLeft, elementLeft2, elementSearch } from '@siemens/element-icons';
 import { SI_UI_STATE_SERVICE } from '@siemens/element-ng/common';
 import { SiIconComponent, addIcons } from '@siemens/element-ng/icon';
 import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
@@ -175,6 +175,26 @@ class SiNavbarVerticalNextGroupTriggerDirective {
      */
     flyout = linkedSignal({ ...(ngDevMode ? { debugName: "flyout" } : /* istanbul ignore next */ {}), source: () => this.flyoutMode(),
         computation: () => false });
+    /** `true` when this group is currently rendered as a mobile flat group.
+     * @internal
+     */
+    flatGroupActive = computed(() => this.navbar.flatMode() && this.navbar.openFlatGroupId() === this.groupId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flatGroupActive" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the group is currently revealed to the user, taking the active
+     * rendering mode into account. Used for `aria-expanded`.
+     * @internal
+     */
+    ariaExpanded = computed(() => {
+        if (this.navbar.flatMode()) {
+            return this.flatGroupActive();
+        }
+        if (this.flyoutMode()) {
+            return this.flyout();
+        }
+        return this.expanded();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaExpanded" }] : /* istanbul ignore next */ []));
     /** `true` when this group contains the active route. Set by the group component.
      * @internal
      */
@@ -188,6 +208,7 @@ class SiNavbarVerticalNextGroupTriggerDirective {
     ...(ngDevMode ? [{ debugName: "flyoutMode" }] : /* istanbul ignore next */ []));
     flyoutOutsideClickSubscription;
     viewContainer = inject(ViewContainerRef);
+    elementRef = inject(ElementRef);
     overlay = inject(Overlay);
     destroyRef = inject(DestroyRef);
     injector = Injector.create({ parent: inject(Injector), providers: [] });
@@ -216,6 +237,9 @@ class SiNavbarVerticalNextGroupTriggerDirective {
             });
         });
         this.destroyRef.onDestroy(() => {
+            if (this.navbar.openFlatGroupId() === this.groupId) {
+                this.navbar.closeFlatGroup();
+            }
             this.overlayRef.detach();
             this.overlayRef.dispose();
         });
@@ -228,8 +252,15 @@ class SiNavbarVerticalNextGroupTriggerDirective {
         this.detachFlyout();
         this.attachInline();
     }
+    /** @internal */
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
     triggered() {
-        if (this.flyoutMode()) {
+        if (this.navbar.flatMode()) {
+            this.navbar.openFlatGroupId.set(this.flatGroupActive() ? undefined : this.groupId);
+        }
+        else if (this.flyoutMode()) {
             this.toggleFlyout();
         }
         else {
@@ -269,7 +300,7 @@ class SiNavbarVerticalNextGroupTriggerDirective {
         this.flyoutOutsideClickSubscription = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiNavbarVerticalNextGroupTriggerDirective, isStandalone: true, selector: "button[siNavbarVerticalNextGroupTriggerFor]", inputs: { groupTemplate: { classPropertyName: "groupTemplate", publicName: "siNavbarVerticalNextGroupTriggerFor", isSignal: true, isRequired: true, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "triggered()" }, properties: { "id": "id", "class.show": "!flyoutMode() && expanded()", "attr.aria-controls": "groupId", "attr.aria-expanded": "flyoutMode() ? flyout() : expanded()" }, classAttribute: "dropdown-toggle" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: SiNavbarVerticalNextGroupTriggerDirective, isStandalone: true, selector: "button[siNavbarVerticalNextGroupTriggerFor]", inputs: { groupTemplate: { classPropertyName: "groupTemplate", publicName: "siNavbarVerticalNextGroupTriggerFor", isSignal: true, isRequired: true, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "triggered()" }, properties: { "id": "id", "class.show": "navbar.flatMode() ? flatGroupActive() : !flyoutMode() && expanded()", "attr.aria-controls": "groupId", "attr.aria-expanded": "ariaExpanded()" }, classAttribute: "dropdown-toggle" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupTriggerDirective, decorators: [{
             type: Directive,
@@ -278,9 +309,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     host: {
                         class: 'dropdown-toggle',
                         '[id]': 'id',
-                        '[class.show]': '!flyoutMode() && expanded()',
+                        '[class.show]': 'navbar.flatMode() ? flatGroupActive() : !flyoutMode() && expanded()',
                         '[attr.aria-controls]': 'groupId',
-                        '[attr.aria-expanded]': 'flyoutMode() ? flyout() : expanded()',
+                        '[attr.aria-expanded]': 'ariaExpanded()',
                         '(click)': 'triggered()'
                     }
                 }]
@@ -376,6 +407,10 @@ class SiNavbarVerticalNextItemComponent {
         return badge.toString();
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "formattedBadge" }] : /* istanbul ignore next */ []));
+    toggleIcon = computed(() => this.navbar.flyoutMode() || this.navbar.flatMode()
+        ? this.icons.elementRight2
+        : this.icons.elementDown2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleIcon" }] : /* istanbul ignore next */ []));
     /** Active via override or router link — excludes group state.
      * @internal
      */
@@ -416,7 +451,7 @@ class SiNavbarVerticalNextItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiNavbarVerticalNextItemComponent, isStandalone: true, selector: "a[si-navbar-vertical-next-item], button[si-navbar-vertical-next-item]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, hideBadgeWhenCollapsed: { classPropertyName: "hideBadgeWhenCollapsed", publicName: "hideBadgeWhenCollapsed", isSignal: true, isRequired: false, transformFunction: null }, activeOverride: { classPropertyName: "activeOverride", publicName: "activeOverride", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "triggered()" }, properties: { "class.active": "showActive()", "class.hide-badge-collapsed": "hideBadgeWhenCollapsed()" }, classAttribute: "navbar-vertical-item focus-inside" }, ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon class=\"icon\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">{{ label() }}</div>\n@if (!navbar.textOnly() && formattedBadge()) {\n  @let badgeColor = this.badgeColor();\n  <span\n    [class]=\"[\n      'badge',\n      badgeColor ? `bg-${badgeColor}` : 'bg-default',\n      textOnlyBadge() ? 'badge-text-only' : '',\n      navbar.collapsed() ? 'badge-collapsed' : ''\n    ]\"\n    >{{ formattedBadge() }}</span\n  >\n}\n@if (group) {\n  <si-icon\n    class=\"dropdown-caret me-0 text-primary\"\n    [icon]=\"group.flyoutMode() ? icons.elementRight2 : icons.elementDown2\"\n  />\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--si-sys-color-text-primary);background:none;border:0;font-size:var(--si-sys-typography-font-size-body);padding-block:var(--si-sys-sizing-spacing-y-40);padding-inline:0 var(--si-sys-sizing-spacing-x-50);min-inline-size:0;min-block-size:calc(1lh + 2 * var(--si-sys-sizing-spacing-y-50));inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:var(--si-sys-sizing-spacing-x-50)}:host(.navbar-vertical-item) .icon{margin-inline-start:var(--si-sys-sizing-spacing-x-50);padding-inline:var(--si-sys-sizing-spacing-x-10);padding-block:var(--si-sys-sizing-spacing-y-10)}:host(.navbar-vertical-item) .icon+.item-title{margin-inline-start:var(--si-sys-sizing-spacing-x-40)}:host(.navbar-vertical-item).show .badge:not(.badge-collapsed){display:none}:host(.navbar-vertical-item):not(.show) .badge+.dropdown-caret{margin-inline:0;padding-inline:0}:host(.navbar-vertical-item).active{color:var(--si-sys-color-text-accent-active);background:var(--si-sys-color-background-active)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--si-sys-color-border-accent-active)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--si-sys-color-background-hover)}:host-context(si-navbar-vertical-next-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item){margin-block-start:var(--si-sys-sizing-spacing-y-40)}:host-context(.nav-text-only si-navbar-vertical-next-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item){padding-inline-start:var(--si-sys-sizing-spacing-x-90)}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host-context(.dropdown-menu) :host(.navbar-vertical-item){padding-inline-start:0}:host-context(.dropdown-menu) :host(.navbar-vertical-item) .item-title{font-weight:400}:host-context(.nav-collapsed) .badge{position:absolute;inset-block-start:var(--si-sys-sizing-spacing-y-20);inset-inline-end:var(--si-sys-sizing-spacing-x-30);min-inline-size:.875rem;border-radius:.4375rem;font-size:var(--si-sys-typography-font-size-body-sm);line-height:.875rem;padding-block:0;padding-inline:var(--si-sys-sizing-spacing-x-20);font-family:var(--element-body-font-family);font-weight:600;text-align:center}:host-context(.nav-collapsed) .badge.badge-text-only{color:transparent;font-size:0}:host-context(.nav-collapsed) :is(.item-title,.dropdown-caret){position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:host-context(.nav-collapsed).hide-badge-collapsed .badge{display:none}.badge{margin-inline:auto 0}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiNavbarVerticalNextItemComponent, isStandalone: true, selector: "a[si-navbar-vertical-next-item], button[si-navbar-vertical-next-item]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, hideBadgeWhenCollapsed: { classPropertyName: "hideBadgeWhenCollapsed", publicName: "hideBadgeWhenCollapsed", isSignal: true, isRequired: false, transformFunction: null }, activeOverride: { classPropertyName: "activeOverride", publicName: "activeOverride", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "triggered()" }, properties: { "class.active": "showActive()", "class.hide-badge-collapsed": "hideBadgeWhenCollapsed()" }, classAttribute: "navbar-vertical-item focus-inside" }, ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon class=\"icon\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">{{ label() }}</div>\n@if (!navbar.textOnly() && formattedBadge()) {\n  @let badgeColor = this.badgeColor();\n  <span\n    [class]=\"[\n      'badge',\n      badgeColor ? `bg-${badgeColor}` : 'bg-default',\n      textOnlyBadge() ? 'badge-text-only' : '',\n      navbar.collapsed() ? 'badge-collapsed' : ''\n    ]\"\n    >{{ formattedBadge() }}</span\n  >\n}\n@if (group) {\n  <si-icon class=\"dropdown-caret me-0 text-primary\" [icon]=\"toggleIcon()\" />\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--si-sys-color-text-primary);background:none;border:0;font-size:var(--si-sys-typography-font-size-body);padding-block:var(--si-sys-sizing-spacing-y-40);padding-inline:0 var(--si-sys-sizing-spacing-x-50);min-inline-size:0;min-block-size:calc(1lh + 2 * var(--si-sys-sizing-spacing-y-50));inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:var(--si-sys-sizing-spacing-x-50)}:host(.navbar-vertical-item) .icon{margin-inline-start:var(--si-sys-sizing-spacing-x-50);padding-inline:var(--si-sys-sizing-spacing-x-10);padding-block:var(--si-sys-sizing-spacing-y-10)}:host(.navbar-vertical-item) .icon+.item-title{margin-inline-start:var(--si-sys-sizing-spacing-x-40)}:host(.navbar-vertical-item).show .badge:not(.badge-collapsed){display:none}:host(.navbar-vertical-item):not(.show) .badge+.dropdown-caret{margin-inline:0;padding-inline:0}:host(.navbar-vertical-item).active{color:var(--si-sys-color-text-accent-active);background:var(--si-sys-color-background-active)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--si-sys-color-border-accent-active)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--si-sys-color-background-hover)}:host-context(si-navbar-vertical-next-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item){margin-block-start:var(--si-sys-sizing-spacing-y-40)}:host-context(.nav-text-only si-navbar-vertical-next-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item){padding-inline-start:var(--si-sys-sizing-spacing-x-90)}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host-context(si-navbar-vertical-next-group.flat-group-active) :host(.navbar-vertical-item){padding-inline-start:calc(1lh + var(--si-sys-sizing-spacing-x-80))}:host-context(.dropdown-menu) :host(.navbar-vertical-item){padding-inline-start:0}:host-context(.dropdown-menu) :host(.navbar-vertical-item) .item-title{font-weight:400}:host-context(.nav-collapsed) .badge{position:absolute;inset-block-start:var(--si-sys-sizing-spacing-y-20);inset-inline-end:var(--si-sys-sizing-spacing-x-30);min-inline-size:.875rem;border-radius:.4375rem;font-size:var(--si-sys-typography-font-size-body-sm);line-height:.875rem;padding-block:0;padding-inline:var(--si-sys-sizing-spacing-x-20);font-family:var(--element-body-font-family);font-weight:600;text-align:center}:host-context(.nav-collapsed) .badge.badge-text-only{color:transparent;font-size:0}:host-context(.nav-collapsed) :is(.item-title,.dropdown-caret){position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:host-context(.nav-collapsed).hide-badge-collapsed .badge{display:none}.badge{margin-inline:auto 0}:host-context(.nav-flat-group-open){display:none}:host-context(si-navbar-vertical-next-group.flat-group-active){display:flex}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextItemComponent, decorators: [{
             type: Component,
@@ -425,7 +460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[class.active]': 'showActive()',
                         '[class.hide-badge-collapsed]': 'hideBadgeWhenCollapsed()',
                         '(click)': 'triggered()'
-                    }, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon class=\"icon\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">{{ label() }}</div>\n@if (!navbar.textOnly() && formattedBadge()) {\n  @let badgeColor = this.badgeColor();\n  <span\n    [class]=\"[\n      'badge',\n      badgeColor ? `bg-${badgeColor}` : 'bg-default',\n      textOnlyBadge() ? 'badge-text-only' : '',\n      navbar.collapsed() ? 'badge-collapsed' : ''\n    ]\"\n    >{{ formattedBadge() }}</span\n  >\n}\n@if (group) {\n  <si-icon\n    class=\"dropdown-caret me-0 text-primary\"\n    [icon]=\"group.flyoutMode() ? icons.elementRight2 : icons.elementDown2\"\n  />\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--si-sys-color-text-primary);background:none;border:0;font-size:var(--si-sys-typography-font-size-body);padding-block:var(--si-sys-sizing-spacing-y-40);padding-inline:0 var(--si-sys-sizing-spacing-x-50);min-inline-size:0;min-block-size:calc(1lh + 2 * var(--si-sys-sizing-spacing-y-50));inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:var(--si-sys-sizing-spacing-x-50)}:host(.navbar-vertical-item) .icon{margin-inline-start:var(--si-sys-sizing-spacing-x-50);padding-inline:var(--si-sys-sizing-spacing-x-10);padding-block:var(--si-sys-sizing-spacing-y-10)}:host(.navbar-vertical-item) .icon+.item-title{margin-inline-start:var(--si-sys-sizing-spacing-x-40)}:host(.navbar-vertical-item).show .badge:not(.badge-collapsed){display:none}:host(.navbar-vertical-item):not(.show) .badge+.dropdown-caret{margin-inline:0;padding-inline:0}:host(.navbar-vertical-item).active{color:var(--si-sys-color-text-accent-active);background:var(--si-sys-color-background-active)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--si-sys-color-border-accent-active)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--si-sys-color-background-hover)}:host-context(si-navbar-vertical-next-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item){margin-block-start:var(--si-sys-sizing-spacing-y-40)}:host-context(.nav-text-only si-navbar-vertical-next-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item){padding-inline-start:var(--si-sys-sizing-spacing-x-90)}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host-context(.dropdown-menu) :host(.navbar-vertical-item){padding-inline-start:0}:host-context(.dropdown-menu) :host(.navbar-vertical-item) .item-title{font-weight:400}:host-context(.nav-collapsed) .badge{position:absolute;inset-block-start:var(--si-sys-sizing-spacing-y-20);inset-inline-end:var(--si-sys-sizing-spacing-x-30);min-inline-size:.875rem;border-radius:.4375rem;font-size:var(--si-sys-typography-font-size-body-sm);line-height:.875rem;padding-block:0;padding-inline:var(--si-sys-sizing-spacing-x-20);font-family:var(--element-body-font-family);font-weight:600;text-align:center}:host-context(.nav-collapsed) .badge.badge-text-only{color:transparent;font-size:0}:host-context(.nav-collapsed) :is(.item-title,.dropdown-caret){position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:host-context(.nav-collapsed).hide-badge-collapsed .badge{display:none}.badge{margin-inline:auto 0}\n"] }]
+                    }, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon class=\"icon\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">{{ label() }}</div>\n@if (!navbar.textOnly() && formattedBadge()) {\n  @let badgeColor = this.badgeColor();\n  <span\n    [class]=\"[\n      'badge',\n      badgeColor ? `bg-${badgeColor}` : 'bg-default',\n      textOnlyBadge() ? 'badge-text-only' : '',\n      navbar.collapsed() ? 'badge-collapsed' : ''\n    ]\"\n    >{{ formattedBadge() }}</span\n  >\n}\n@if (group) {\n  <si-icon class=\"dropdown-caret me-0 text-primary\" [icon]=\"toggleIcon()\" />\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--si-sys-color-text-primary);background:none;border:0;font-size:var(--si-sys-typography-font-size-body);padding-block:var(--si-sys-sizing-spacing-y-40);padding-inline:0 var(--si-sys-sizing-spacing-x-50);min-inline-size:0;min-block-size:calc(1lh + 2 * var(--si-sys-sizing-spacing-y-50));inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:var(--si-sys-sizing-spacing-x-50)}:host(.navbar-vertical-item) .icon{margin-inline-start:var(--si-sys-sizing-spacing-x-50);padding-inline:var(--si-sys-sizing-spacing-x-10);padding-block:var(--si-sys-sizing-spacing-y-10)}:host(.navbar-vertical-item) .icon+.item-title{margin-inline-start:var(--si-sys-sizing-spacing-x-40)}:host(.navbar-vertical-item).show .badge:not(.badge-collapsed){display:none}:host(.navbar-vertical-item):not(.show) .badge+.dropdown-caret{margin-inline:0;padding-inline:0}:host(.navbar-vertical-item).active{color:var(--si-sys-color-text-accent-active);background:var(--si-sys-color-background-active)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--si-sys-color-border-accent-active)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--si-sys-color-background-hover)}:host-context(si-navbar-vertical-next-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item){margin-block-start:var(--si-sys-sizing-spacing-y-40)}:host-context(.nav-text-only si-navbar-vertical-next-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item){padding-inline-start:var(--si-sys-sizing-spacing-x-90)}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host-context(si-navbar-vertical-next-group.flat-group-active) :host(.navbar-vertical-item){padding-inline-start:calc(1lh + var(--si-sys-sizing-spacing-x-80))}:host-context(.dropdown-menu) :host(.navbar-vertical-item){padding-inline-start:0}:host-context(.dropdown-menu) :host(.navbar-vertical-item) .item-title{font-weight:400}:host-context(.nav-collapsed) .badge{position:absolute;inset-block-start:var(--si-sys-sizing-spacing-y-20);inset-inline-end:var(--si-sys-sizing-spacing-x-30);min-inline-size:.875rem;border-radius:.4375rem;font-size:var(--si-sys-typography-font-size-body-sm);line-height:.875rem;padding-block:0;padding-inline:var(--si-sys-sizing-spacing-x-20);font-family:var(--element-body-font-family);font-weight:600;text-align:center}:host-context(.nav-collapsed) .badge.badge-text-only{color:transparent;font-size:0}:host-context(.nav-collapsed) :is(.item-title,.dropdown-caret){position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:host-context(.nav-collapsed).hide-badge-collapsed .badge{display:none}.badge{margin-inline:auto 0}:host-context(.nav-flat-group-open){display:none}:host-context(si-navbar-vertical-next-group.flat-group-active){display:flex}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeColor", required: false }] }], hideBadgeWhenCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideBadgeWhenCollapsed", required: false }] }], activeOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeOverride", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 /**
@@ -523,6 +558,23 @@ class SiNavbarVerticalNextComponent {
     ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
     smallScreen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "smallScreen" }] : /* istanbul ignore next */ []));
+    mobileScreen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileScreen" }] : /* istanbul ignore next */ []));
+    /**
+     * `true` when triggering a group should open the mobile flat group
+     * instead of inline/flyout. Requires `alwaysFlyout` and a viewport width at
+     * or below {@link BOOTSTRAP_BREAKPOINTS.smMinimum}, 576px. Collapsing the
+     * drawer on mobile must not reset the open flat group, so this stays `true`
+     * regardless of `collapsed`.
+     * @internal
+     */
+    flatMode = computed(() => this.alwaysFlyout() && this.mobileScreen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flatMode" }] : /* istanbul ignore next */ []));
+    /** Id of the group currently shown as a mobile flat group.
+     * @internal
+     */
+    openFlatGroupId = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openFlatGroupId" }] : /* istanbul ignore next */ []));
     /** Chip menu sub-component; present only while the parent template renders it.
      * @internal
      */
@@ -567,7 +619,7 @@ class SiNavbarVerticalNextComponent {
     /** `true` when groups should render as flyout overlays.
      * @internal
      */
-    flyoutMode = computed(() => this.alwaysFlyout() || this.collapsed(), /* @ts-ignore */
+    flyoutMode = computed(() => !this.flatMode() && (this.alwaysFlyout() || this.collapsed()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "flyoutMode" }] : /* istanbul ignore next */ []));
     /** `true` when the chip menu overlay is open.
      * @internal
@@ -580,6 +632,11 @@ class SiNavbarVerticalNextComponent {
     hasVisibleChip = computed(() => this.chipMode() && !!this.activeItem(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasVisibleChip" }] : /* istanbul ignore next */ []));
     constructor() {
+        effect(() => {
+            if (!this.flatMode()) {
+                this.closeFlatGroup();
+            }
+        });
         this.breakpointObserver
             .observe(`(max-width: ${BOOTSTRAP_BREAKPOINTS.lgMinimum}px)`)
             .pipe(takeUntilDestroyed())
@@ -587,6 +644,10 @@ class SiNavbarVerticalNextComponent {
             this.collapsed.set(matches || this.preferCollapse);
             this.smallScreen.set(matches);
         });
+        this.breakpointObserver
+            .observe(`(max-width: ${BOOTSTRAP_BREAKPOINTS.smMinimum}px)`)
+            .pipe(takeUntilDestroyed())
+            .subscribe(({ matches }) => this.mobileScreen.set(matches));
     }
     ngOnChanges(changes) {
         if (changes.collapsed) {
@@ -642,6 +703,12 @@ class SiNavbarVerticalNextComponent {
         }
         this.saveUIState();
     }
+    /** Closes the open mobile flat group.
+     * @internal
+     */
+    closeFlatGroup() {
+        this.openFlatGroupId.set(undefined);
+    }
     saveUIState() {
         const stateId = this.stateId();
         if (!this.uiStateService || !stateId) {
@@ -660,7 +727,7 @@ class SiNavbarVerticalNextComponent {
         this.chipMenu()?.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiNavbarVerticalNextComponent, isStandalone: true, selector: "si-navbar-vertical-next", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, textOnly: { classPropertyName: "textOnly", publicName: "textOnly", isSignal: true, isRequired: false, transformFunction: null }, inlineCollapse: { classPropertyName: "inlineCollapse", publicName: "inlineCollapse", isSignal: true, isRequired: false, transformFunction: null }, alwaysFlyout: { classPropertyName: "alwaysFlyout", publicName: "alwaysFlyout", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, toggleButtonText: { classPropertyName: "toggleButtonText", publicName: "toggleButtonText", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null }, skipLinkNavigationLabel: { classPropertyName: "skipLinkNavigationLabel", publicName: "skipLinkNavigationLabel", isSignal: true, isRequired: false, transformFunction: null }, skipLinkMainContentLabel: { classPropertyName: "skipLinkMainContentLabel", publicName: "skipLinkMainContentLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class.nav-collapsed": "collapsed()", "class.nav-text-only": "textOnly()", "class.nav-inline-collapse": "inlineCollapse()", "class.has-visible-chip": "hasVisibleChip()", "class.visible": "visible()", "class.ready": "ready()" }, classAttribute: "si-layout-inner ready" }, providers: [{ provide: SI_NAVBAR_VERTICAL_NEXT, useExisting: SiNavbarVerticalNextComponent }], queries: [{ propertyName: "itemsComponent", first: true, predicate: SiNavbarVerticalNextItemsComponent, descendants: true, isSignal: true }, { propertyName: "items", predicate: SiNavbarVerticalNextItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "chipMenu", first: true, predicate: SiNavbarVerticalNextChipMenuComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (visible()) {\n  @if (smallScreen() && !collapsed()) {\n    <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleCollapse()\"></div>\n  }\n  <nav\n    tabindex=\"-1\"\n    class=\"background-1 focus-sub-inside\"\n    [class.expanded]=\"!collapsed()\"\n    [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n    [class.text-only]=\"textOnly()\"\n  >\n    <div class=\"collapse-toggle ms-auto\">\n      <div class=\"mobile-drawer focus-inside\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon toggle-button\"\n          [class.btn-ghost]=\"chipMode()\"\n          [class.btn-tertiary-ghost]=\"!chipMode()\"\n          [attr.aria-label]=\"toggleButtonText() | translate\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon class=\"flip-rtl\" [icon]=\"toggleIcon()\" />\n        </button>\n      </div>\n    </div>\n    @if (hasVisibleChip()) {\n      <si-navbar-vertical-next-chip-menu />\n    }\n    <div\n      class=\"nav-content\"\n      [attr.inert]=\"chipMode() ? '' : null\"\n      [attr.aria-hidden]=\"chipMode() ? 'true' : null\"\n    >\n      <ng-content select=\"si-navbar-vertical-next-search\" />\n      <ng-content select=\"si-navbar-vertical-next-items\" />\n      <ng-content select=\"si-navbar-vertical-next-footer-items\" />\n    </div>\n  </nav>\n  @if (inlineCollapse()) {\n    <div class=\"toggle-placeholder\" aria-hidden=\"true\"></div>\n  }\n}\n<main\n  class=\"si-layout-inner focus-none\"\n  tabindex=\"-1\"\n  [siSkipLinkTarget]=\"skipLinkMainContentLabel()\"\n>\n  <ng-content />\n</main>\n", styles: [":host{display:block;--si-layout-header-first-element-offset: 40px}:host.ready:not(.visible){padding-inline-start:0!important}:host.ready{transition:padding-inline-start calc(.5s * var(--element-animations-enabled, 1))}nav{display:flex;flex-direction:column;position:fixed;z-index:1031;inset-block-start:calc(var(--si-sys-sizing-sizing-100) + 1px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-start:0;inline-size:0;transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-collapsed) nav{z-index:1030}nav.expanded{inline-size:240px}.mobile-drawer{display:block;text-align:end;border:0;inline-size:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-50));color:var(--si-sys-color-text-primary);padding-block:var(--si-sys-sizing-spacing-y-20);padding-inline:var(--si-sys-sizing-spacing-x-40);margin-block-start:var(--si-sys-sizing-spacing-y-40);border-start-end-radius:var(--element-radius-2);border-end-end-radius:var(--element-radius-2);transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease,background-color calc(.5s * var(--element-animations-enabled, 1)) ease,box-shadow calc(.5s * var(--element-animations-enabled, 1)) ease}:host(:not(.nav-collapsed):not(.nav-inline-collapse)) .mobile-drawer{inline-size:240px}.modal-backdrop{z-index:1031;transition:opacity calc(.15s * var(--element-animations-enabled, 1)) linear;opacity:1}@starting-style{.modal-backdrop{opacity:0}}.modal-backdrop.backdrop-leave{opacity:0}:host(.nav-text-only:not(.nav-inline-collapse)).nav-collapsed .mobile-drawer{background:var(--si-sys-color-background-1);box-shadow:var(--si-sys-color-effects-shadow-1)}@media(max-width:575.98px){:host.nav-collapsed .mobile-drawer{background:var(--si-sys-color-background-1);box-shadow:var(--si-sys-color-effects-shadow-1)}}@media(min-width:576px){:host:not(.nav-text-only),:host:not(.nav-collapsed),:host(.nav-inline-collapse){--si-layout-header-first-element-offset: 0}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)){padding-inline-start:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-50))}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)) nav{inline-size:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-50))}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)) nav.expanded{inline-size:240px}}@media(min-width:992px){:host:not(.nav-collapsed){padding-inline-start:240px}}.nav-content{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}:host(.nav-inline-collapse){--si-layout-header-first-element-offset: 0;--si-navbar-parked-inline-start: var(--si-sys-sizing-spacing-x-60)}@media(min-width:768px){:host(.nav-inline-collapse){--si-navbar-parked-inline-start: var(--si-sys-sizing-spacing-x-90)}}:host(.nav-inline-collapse) nav{overflow:hidden}:host(.nav-inline-collapse) nav:before{content:\"\";position:absolute;inset:0;background:var(--si-sys-color-background-1);z-index:1;pointer-events:none}:host(.nav-inline-collapse) .nav-content{position:relative;z-index:2}:host(.nav-inline-collapse) .mobile-drawer:before{content:\"\";display:block;block-size:calc(1lh + 2 * var(--si-sys-sizing-spacing-y-40))}:host(.nav-inline-collapse) .toggle-placeholder{block-size:0;margin-block-start:0;transition:block-size calc(.5s * var(--element-animations-enabled, 1)) ease,margin-block-start calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-inline-collapse) .toggle-button{position:fixed;z-index:1031;inset-block-start:calc(calc(var(--si-sys-sizing-sizing-100) + 1px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + var(--si-sys-sizing-spacing-y-40) + var(--si-sys-sizing-spacing-y-20));inset-inline-start:calc(240px - calc(1lh + 2 * var(--si-sys-sizing-spacing-y-40)) - var(--si-sys-sizing-spacing-x-40));transition:inset-inline-start calc(.5s * var(--element-animations-enabled, 1)) ease,inset-block-start calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-inline-collapse).nav-collapsed .toggle-placeholder{block-size:calc(1lh + 2 * var(--si-sys-sizing-spacing-y-40));margin-block-start:var(--si-sys-sizing-spacing-y-60)}:host(.nav-inline-collapse).nav-collapsed .toggle-button{inset-block-start:calc(calc(var(--si-sys-sizing-sizing-100) + 1px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + var(--si-sys-sizing-spacing-y-60));inset-inline-start:var(--si-navbar-parked-inline-start)}:host(.has-visible-chip) .toggle-button{border-start-end-radius:0;border-end-end-radius:0}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiNavbarVerticalNextChipMenuComponent, selector: "si-navbar-vertical-next-chip-menu" }, { kind: "directive", type: SiSkipLinkTargetDirective, selector: "[siSkipLinkTarget]", inputs: ["siSkipLinkTarget"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiNavbarVerticalNextComponent, isStandalone: true, selector: "si-navbar-vertical-next", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, textOnly: { classPropertyName: "textOnly", publicName: "textOnly", isSignal: true, isRequired: false, transformFunction: null }, inlineCollapse: { classPropertyName: "inlineCollapse", publicName: "inlineCollapse", isSignal: true, isRequired: false, transformFunction: null }, alwaysFlyout: { classPropertyName: "alwaysFlyout", publicName: "alwaysFlyout", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, toggleButtonText: { classPropertyName: "toggleButtonText", publicName: "toggleButtonText", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null }, skipLinkNavigationLabel: { classPropertyName: "skipLinkNavigationLabel", publicName: "skipLinkNavigationLabel", isSignal: true, isRequired: false, transformFunction: null }, skipLinkMainContentLabel: { classPropertyName: "skipLinkMainContentLabel", publicName: "skipLinkMainContentLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class.nav-collapsed": "collapsed()", "class.nav-text-only": "textOnly()", "class.nav-inline-collapse": "inlineCollapse()", "class.has-visible-chip": "hasVisibleChip()", "class.visible": "visible()", "class.nav-flat-group-open": "!!openFlatGroupId()", "class.ready": "ready()" }, classAttribute: "si-layout-inner ready" }, providers: [{ provide: SI_NAVBAR_VERTICAL_NEXT, useExisting: SiNavbarVerticalNextComponent }], queries: [{ propertyName: "itemsComponent", first: true, predicate: SiNavbarVerticalNextItemsComponent, descendants: true, isSignal: true }, { propertyName: "items", predicate: SiNavbarVerticalNextItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "chipMenu", first: true, predicate: SiNavbarVerticalNextChipMenuComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (visible()) {\n  @if (smallScreen() && !collapsed()) {\n    <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleCollapse()\"></div>\n  }\n  <nav\n    tabindex=\"-1\"\n    class=\"background-1 focus-sub-inside\"\n    [class.expanded]=\"!collapsed()\"\n    [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n    [class.text-only]=\"textOnly()\"\n  >\n    <div class=\"collapse-toggle ms-auto\">\n      <div class=\"mobile-drawer focus-inside\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon toggle-button\"\n          [class.btn-ghost]=\"chipMode()\"\n          [class.btn-tertiary-ghost]=\"!chipMode()\"\n          [attr.aria-label]=\"toggleButtonText() | translate\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon class=\"flip-rtl\" [icon]=\"toggleIcon()\" />\n        </button>\n      </div>\n    </div>\n    @if (hasVisibleChip()) {\n      <si-navbar-vertical-next-chip-menu />\n    }\n    <div\n      class=\"nav-content\"\n      [attr.inert]=\"chipMode() ? '' : null\"\n      [attr.aria-hidden]=\"chipMode() ? 'true' : null\"\n    >\n      <ng-content select=\"si-navbar-vertical-next-search\" />\n      <ng-content select=\"si-navbar-vertical-next-items\" />\n      <ng-content select=\"si-navbar-vertical-next-footer-items\" />\n    </div>\n  </nav>\n  @if (inlineCollapse()) {\n    <div class=\"toggle-placeholder\" aria-hidden=\"true\"></div>\n  }\n}\n<main\n  class=\"si-layout-inner focus-none\"\n  tabindex=\"-1\"\n  [siSkipLinkTarget]=\"skipLinkMainContentLabel()\"\n>\n  <ng-content />\n</main>\n", styles: [":host{display:block;--si-layout-header-first-element-offset: 40px}:host.ready:not(.visible){padding-inline-start:0!important}:host.ready{transition:padding-inline-start calc(.5s * var(--element-animations-enabled, 1))}nav{display:flex;flex-direction:column;position:fixed;z-index:1031;inset-block-start:calc(var(--si-sys-sizing-sizing-100) + 1px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-start:0;inline-size:0;transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-collapsed) nav{z-index:1030}nav.expanded{inline-size:240px}.mobile-drawer{display:block;text-align:end;border:0;inline-size:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-50));color:var(--si-sys-color-text-primary);padding-block:var(--si-sys-sizing-spacing-y-20);padding-inline:var(--si-sys-sizing-spacing-x-40);margin-block-start:var(--si-sys-sizing-spacing-y-40);border-start-end-radius:var(--element-radius-2);border-end-end-radius:var(--element-radius-2);transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease,background-color calc(.5s * var(--element-animations-enabled, 1)) ease,box-shadow calc(.5s * var(--element-animations-enabled, 1)) ease}:host(:not(.nav-collapsed):not(.nav-inline-collapse)) .mobile-drawer{inline-size:240px}.modal-backdrop{z-index:1031;transition:opacity calc(.15s * var(--element-animations-enabled, 1)) linear;opacity:1}@starting-style{.modal-backdrop{opacity:0}}.modal-backdrop.backdrop-leave{opacity:0}:host(.nav-text-only:not(.nav-inline-collapse)).nav-collapsed .mobile-drawer{background:var(--si-sys-color-background-1);box-shadow:var(--si-sys-color-effects-shadow-1)}@media(max-width:575.98px){:host.nav-collapsed .mobile-drawer{background:var(--si-sys-color-background-1);box-shadow:var(--si-sys-color-effects-shadow-1)}}@media(min-width:576px){:host:not(.nav-text-only),:host:not(.nav-collapsed),:host(.nav-inline-collapse){--si-layout-header-first-element-offset: 0}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)){padding-inline-start:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-50))}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)) nav{inline-size:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-50))}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)) nav.expanded{inline-size:240px}}@media(min-width:992px){:host:not(.nav-collapsed){padding-inline-start:240px}}.nav-content{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}:host(.nav-inline-collapse){--si-layout-header-first-element-offset: 0;--si-navbar-parked-inline-start: var(--si-sys-sizing-spacing-x-60)}@media(min-width:768px){:host(.nav-inline-collapse){--si-navbar-parked-inline-start: var(--si-sys-sizing-spacing-x-90)}}:host(.nav-inline-collapse) nav{overflow:hidden}:host(.nav-inline-collapse) nav:before{content:\"\";position:absolute;inset:0;background:var(--si-sys-color-background-1);z-index:1;pointer-events:none}:host(.nav-inline-collapse) .nav-content{position:relative;z-index:2}:host(.nav-inline-collapse) .mobile-drawer:before{content:\"\";display:block;block-size:calc(1lh + 2 * var(--si-sys-sizing-spacing-y-40))}:host(.nav-inline-collapse) .toggle-placeholder{block-size:0;margin-block-start:0;transition:block-size calc(.5s * var(--element-animations-enabled, 1)) ease,margin-block-start calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-inline-collapse) .toggle-button{position:fixed;z-index:1031;inset-block-start:calc(calc(var(--si-sys-sizing-sizing-100) + 1px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + var(--si-sys-sizing-spacing-y-40) + var(--si-sys-sizing-spacing-y-20));inset-inline-start:calc(240px - calc(1lh + 2 * var(--si-sys-sizing-spacing-y-40)) - var(--si-sys-sizing-spacing-x-40));transition:inset-inline-start calc(.5s * var(--element-animations-enabled, 1)) ease,inset-block-start calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-inline-collapse).nav-collapsed .toggle-placeholder{block-size:calc(1lh + 2 * var(--si-sys-sizing-spacing-y-40));margin-block-start:var(--si-sys-sizing-spacing-y-60)}:host(.nav-inline-collapse).nav-collapsed .toggle-button{inset-block-start:calc(calc(var(--si-sys-sizing-sizing-100) + 1px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + var(--si-sys-sizing-spacing-y-60));inset-inline-start:var(--si-navbar-parked-inline-start)}:host(.has-visible-chip) .toggle-button{border-start-end-radius:0;border-end-end-radius:0}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiNavbarVerticalNextChipMenuComponent, selector: "si-navbar-vertical-next-chip-menu" }, { kind: "directive", type: SiSkipLinkTargetDirective, selector: "[siSkipLinkTarget]", inputs: ["siSkipLinkTarget"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextComponent, decorators: [{
             type: Component,
@@ -676,6 +743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[class.nav-inline-collapse]': 'inlineCollapse()',
                         '[class.has-visible-chip]': 'hasVisibleChip()',
                         '[class.visible]': 'visible()',
+                        '[class.nav-flat-group-open]': '!!openFlatGroupId()',
                         '[class.ready]': 'ready()'
                     }, template: "@if (visible()) {\n  @if (smallScreen() && !collapsed()) {\n    <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleCollapse()\"></div>\n  }\n  <nav\n    tabindex=\"-1\"\n    class=\"background-1 focus-sub-inside\"\n    [class.expanded]=\"!collapsed()\"\n    [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n    [class.text-only]=\"textOnly()\"\n  >\n    <div class=\"collapse-toggle ms-auto\">\n      <div class=\"mobile-drawer focus-inside\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon toggle-button\"\n          [class.btn-ghost]=\"chipMode()\"\n          [class.btn-tertiary-ghost]=\"!chipMode()\"\n          [attr.aria-label]=\"toggleButtonText() | translate\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon class=\"flip-rtl\" [icon]=\"toggleIcon()\" />\n        </button>\n      </div>\n    </div>\n    @if (hasVisibleChip()) {\n      <si-navbar-vertical-next-chip-menu />\n    }\n    <div\n      class=\"nav-content\"\n      [attr.inert]=\"chipMode() ? '' : null\"\n      [attr.aria-hidden]=\"chipMode() ? 'true' : null\"\n    >\n      <ng-content select=\"si-navbar-vertical-next-search\" />\n      <ng-content select=\"si-navbar-vertical-next-items\" />\n      <ng-content select=\"si-navbar-vertical-next-footer-items\" />\n    </div>\n  </nav>\n  @if (inlineCollapse()) {\n    <div class=\"toggle-placeholder\" aria-hidden=\"true\"></div>\n  }\n}\n<main\n  class=\"si-layout-inner focus-none\"\n  tabindex=\"-1\"\n  [siSkipLinkTarget]=\"skipLinkMainContentLabel()\"\n>\n  <ng-content />\n</main>\n", styles: [":host{display:block;--si-layout-header-first-element-offset: 40px}:host.ready:not(.visible){padding-inline-start:0!important}:host.ready{transition:padding-inline-start calc(.5s * var(--element-animations-enabled, 1))}nav{display:flex;flex-direction:column;position:fixed;z-index:1031;inset-block-start:calc(var(--si-sys-sizing-sizing-100) + 1px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-start:0;inline-size:0;transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-collapsed) nav{z-index:1030}nav.expanded{inline-size:240px}.mobile-drawer{display:block;text-align:end;border:0;inline-size:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-50));color:var(--si-sys-color-text-primary);padding-block:var(--si-sys-sizing-spacing-y-20);padding-inline:var(--si-sys-sizing-spacing-x-40);margin-block-start:var(--si-sys-sizing-spacing-y-40);border-start-end-radius:var(--element-radius-2);border-end-end-radius:var(--element-radius-2);transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease,background-color calc(.5s * var(--element-animations-enabled, 1)) ease,box-shadow calc(.5s * var(--element-animations-enabled, 1)) ease}:host(:not(.nav-collapsed):not(.nav-inline-collapse)) .mobile-drawer{inline-size:240px}.modal-backdrop{z-index:1031;transition:opacity calc(.15s * var(--element-animations-enabled, 1)) linear;opacity:1}@starting-style{.modal-backdrop{opacity:0}}.modal-backdrop.backdrop-leave{opacity:0}:host(.nav-text-only:not(.nav-inline-collapse)).nav-collapsed .mobile-drawer{background:var(--si-sys-color-background-1);box-shadow:var(--si-sys-color-effects-shadow-1)}@media(max-width:575.98px){:host.nav-collapsed .mobile-drawer{background:var(--si-sys-color-background-1);box-shadow:var(--si-sys-color-effects-shadow-1)}}@media(min-width:576px){:host:not(.nav-text-only),:host:not(.nav-collapsed),:host(.nav-inline-collapse){--si-layout-header-first-element-offset: 0}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)){padding-inline-start:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-50))}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)) nav{inline-size:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-50))}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)) nav.expanded{inline-size:240px}}@media(min-width:992px){:host:not(.nav-collapsed){padding-inline-start:240px}}.nav-content{display:flex;flex-direction:column;flex:1 1 auto;min-block-size:0}:host(.nav-inline-collapse){--si-layout-header-first-element-offset: 0;--si-navbar-parked-inline-start: var(--si-sys-sizing-spacing-x-60)}@media(min-width:768px){:host(.nav-inline-collapse){--si-navbar-parked-inline-start: var(--si-sys-sizing-spacing-x-90)}}:host(.nav-inline-collapse) nav{overflow:hidden}:host(.nav-inline-collapse) nav:before{content:\"\";position:absolute;inset:0;background:var(--si-sys-color-background-1);z-index:1;pointer-events:none}:host(.nav-inline-collapse) .nav-content{position:relative;z-index:2}:host(.nav-inline-collapse) .mobile-drawer:before{content:\"\";display:block;block-size:calc(1lh + 2 * var(--si-sys-sizing-spacing-y-40))}:host(.nav-inline-collapse) .toggle-placeholder{block-size:0;margin-block-start:0;transition:block-size calc(.5s * var(--element-animations-enabled, 1)) ease,margin-block-start calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-inline-collapse) .toggle-button{position:fixed;z-index:1031;inset-block-start:calc(calc(var(--si-sys-sizing-sizing-100) + 1px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + var(--si-sys-sizing-spacing-y-40) + var(--si-sys-sizing-spacing-y-20));inset-inline-start:calc(240px - calc(1lh + 2 * var(--si-sys-sizing-spacing-y-40)) - var(--si-sys-sizing-spacing-x-40));transition:inset-inline-start calc(.5s * var(--element-animations-enabled, 1)) ease,inset-block-start calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-inline-collapse).nav-collapsed .toggle-placeholder{block-size:calc(1lh + 2 * var(--si-sys-sizing-spacing-y-40));margin-block-start:var(--si-sys-sizing-spacing-y-60)}:host(.nav-inline-collapse).nav-collapsed .toggle-button{inset-block-start:calc(calc(var(--si-sys-sizing-sizing-100) + 1px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + var(--si-sys-sizing-spacing-y-60));inset-inline-start:var(--si-navbar-parked-inline-start)}:host(.has-visible-chip) .toggle-button{border-start-end-radius:0;border-end-end-radius:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], textOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "textOnly", required: false }] }], inlineCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineCollapse", required: false }] }], alwaysFlyout: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysFlyout", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], toggleButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleButtonText", required: false }] }], stateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateId", required: false }] }], skipLinkNavigationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkNavigationLabel", required: false }] }], skipLinkMainContentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkMainContentLabel", required: false }] }], chipMenu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiNavbarVerticalNextChipMenuComponent), { isSignal: true }] }], itemsComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SiNavbarVerticalNextItemsComponent), { isSignal: true }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SiNavbarVerticalNextItemComponent), { ...{
@@ -692,11 +760,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  */
 class SiNavbarVerticalNextDividerComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SiNavbarVerticalNextDividerComponent, isStandalone: true, selector: "si-navbar-vertical-next-divider", ngImport: i0, template: '', isInline: true, styles: [":host{display:block;block-size:1px;background-color:var(--si-sys-color-border-4);margin-block:var(--si-sys-sizing-spacing-y-30);margin-inline:var(--si-sys-sizing-spacing-x-50)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SiNavbarVerticalNextDividerComponent, isStandalone: true, selector: "si-navbar-vertical-next-divider", ngImport: i0, template: '', isInline: true, styles: [":host{display:block;block-size:1px;background-color:var(--si-sys-color-border-4);margin-block:var(--si-sys-sizing-spacing-y-30);margin-inline:var(--si-sys-sizing-spacing-x-50)}:host-context(.nav-flat-group-open){display:none}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextDividerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-navbar-vertical-next-divider', template: '', styles: [":host{display:block;block-size:1px;background-color:var(--si-sys-color-border-4);margin-block:var(--si-sys-sizing-spacing-y-30);margin-inline:var(--si-sys-sizing-spacing-x-50)}\n"] }]
+            args: [{ selector: 'si-navbar-vertical-next-divider', template: '', styles: [":host{display:block;block-size:1px;background-color:var(--si-sys-color-border-4);margin-block:var(--si-sys-sizing-spacing-y-30);margin-inline:var(--si-sys-sizing-spacing-x-50)}:host-context(.nav-flat-group-open){display:none}\n"] }]
         }] });
 
 /**
@@ -711,11 +779,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  */
 class SiNavbarVerticalNextFooterItemsComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextFooterItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SiNavbarVerticalNextFooterItemsComponent, isStandalone: true, selector: "si-navbar-vertical-next-footer-items", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;overflow-x:hidden;margin-block-start:auto;padding-block-end:var(--si-sys-sizing-spacing-y-40)}:host-context(.nav-collapsed){display:none}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:block}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SiNavbarVerticalNextFooterItemsComponent, isStandalone: true, selector: "si-navbar-vertical-next-footer-items", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;overflow-x:hidden;margin-block-start:auto;padding-block-end:var(--si-sys-sizing-spacing-y-40)}:host-context(.nav-collapsed){display:none}:host-context(.nav-flat-group-open){display:none}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:block}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextFooterItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-navbar-vertical-next-footer-items', template: '<ng-content />', styles: [":host{display:block;overflow-x:hidden;margin-block-start:auto;padding-block-end:var(--si-sys-sizing-spacing-y-40)}:host-context(.nav-collapsed){display:none}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:block}}\n"] }]
+            args: [{ selector: 'si-navbar-vertical-next-footer-items', template: '<ng-content />', styles: [":host{display:block;overflow-x:hidden;margin-block-start:auto;padding-block-end:var(--si-sys-sizing-spacing-y-40)}:host-context(.nav-collapsed){display:none}:host-context(.nav-flat-group-open){display:none}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:block}}\n"] }]
         }] });
 
 /**
@@ -724,60 +792,135 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  */
 /** @experimental */
 class SiNavbarVerticalNextGroupComponent {
+    icons = addIcons({ elementLeft2 });
     navbar = inject(SI_NAVBAR_VERTICAL_NEXT);
     groupTrigger = inject(SiNavbarVerticalNextGroupTriggerDirective);
+    triggerItem = inject(SiNavbarVerticalNextItemComponent);
+    flatGroupTitleId = `${this.groupTrigger.groupId}-title`;
+    /**
+     * Back button text for flat groups.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.BACK:Back`)
+     * ```
+     */
+    ariaLabel = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.BACK:Back`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     routerLinkActive = inject(RouterLinkActive, { optional: true });
+    focusTrap = viewChild.required(CdkTrapFocus, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusTrap" }] : /* istanbul ignore next */ []));
+    wasFlatGroupActive = false;
     visible = computed(() => {
-        return this.groupTrigger.flyout() || (!this.navbar.collapsed() && this.groupTrigger.expanded());
+        return (this.groupTrigger.flyout() ||
+            this.groupTrigger.flatGroupActive() ||
+            (!this.navbar.collapsed() && !this.navbar.flatMode() && this.groupTrigger.expanded()));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     constructor() {
         this.routerLinkActive?.isActiveChange
             .pipe(takeUntilDestroyed())
             .subscribe(active => this.groupTrigger.active.set(active));
+        afterRenderEffect(() => this.updateFlatGroupFocus());
     }
     close() {
+        if (this.groupTrigger.flatGroupActive()) {
+            this.navbar.closeFlatGroup();
+            return;
+        }
         this.groupTrigger.hideFlyout();
     }
+    updateFlatGroupFocus() {
+        const isFlatGroupActive = this.groupTrigger.flatGroupActive();
+        if (isFlatGroupActive === this.wasFlatGroupActive) {
+            return;
+        }
+        this.wasFlatGroupActive = isFlatGroupActive;
+        if (isFlatGroupActive) {
+            this.focusTrap().focusTrap.focusFirstTabbableElementWhenReady();
+        }
+        else {
+            this.groupTrigger.focus();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiNavbarVerticalNextGroupComponent, isStandalone: true, selector: "si-navbar-vertical-next-group", host: { attributes: { "animate.enter": "component-enter" }, listeners: { "keydown.escape": "close()" }, properties: { "attr.role": "groupTrigger.flyout() ? 'dialog' : 'group'", "id": "groupTrigger.groupId", "attr.aria-labelledby": "groupTrigger.id" } }, ngImport: i0, template: `@if (visible()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiNavbarVerticalNextGroupComponent, isStandalone: true, selector: "si-navbar-vertical-next-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "animate.enter": "component-enter" }, listeners: { "keydown.escape": "close()" }, properties: { "attr.role": "groupTrigger.flyout() ? 'dialog' : 'group'", "id": "groupTrigger.groupId", "attr.aria-labelledby": "groupTrigger.flatGroupActive() ? flatGroupTitleId : groupTrigger.id", "class.flat-group-active": "groupTrigger.flatGroupActive()" } }, viewQueries: [{ propertyName: "focusTrap", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }], ngImport: i0, template: `@if (visible()) {
     @let flyout = groupTrigger.flyout();
+    @let flat = navbar.flatMode();
     <div
       animate.leave="group-leave"
-      [class.inline-group]="!flyout"
+      [class.inline-group]="!flyout && !flat"
       [class.dropdown-menu]="flyout"
-      [cdkTrapFocus]="flyout"
-      [cdkTrapFocusAutoCapture]="flyout"
+      [class.flat-group]="flat"
     >
-      <div [class.overflow-hidden]="!flyout">
+      @if (groupTrigger.flatGroupActive()) {
+        <div class="flat-group-header">
+          <button
+            type="button"
+            class="btn btn-icon btn-tertiary-ghost"
+            [attr.aria-label]="ariaLabel() | translate"
+            (click)="navbar.closeFlatGroup()"
+          >
+            <si-icon class="flip-rtl" [icon]="icons.elementLeft2" />
+          </button>
+          <span class="item-title text-truncate si-h5" [id]="flatGroupTitleId">
+            {{ triggerItem.label() | translate }}
+          </span>
+        </div>
+      }
+      <div
+        [class.overflow-hidden]="!flyout"
+        [cdkTrapFocus]="flyout"
+        [cdkTrapFocusAutoCapture]="flyout"
+      >
         <ng-content />
       </div>
     </div>
-  }`, isInline: true, styles: [":host.component-enter .inline-group{transition:none}.inline-group{display:grid;transition-property:grid-template-rows,opacity;transition-duration:calc(.5s * var(--element-animations-enabled, 1));transition-timing-function:ease;opacity:1;grid-template-rows:1fr;overflow:hidden}@starting-style{.inline-group{grid-template-rows:0fr;opacity:0}}.inline-group.group-leave{grid-template-rows:0fr;opacity:0}.dropdown-menu{display:block;position:static}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
+  }`, isInline: true, styles: [":host.component-enter .inline-group{transition:none}.inline-group{display:grid;transition-property:grid-template-rows,opacity;transition-duration:calc(.5s * var(--element-animations-enabled, 1));transition-timing-function:ease;opacity:1;grid-template-rows:1fr;overflow:hidden}@starting-style{.inline-group{grid-template-rows:0fr;opacity:0}}.inline-group.group-leave{grid-template-rows:0fr;opacity:0}.dropdown-menu{display:block;position:static}:host-context(.nav-flat-group-open){display:none}:host(.flat-group-active){display:block}.flat-group{opacity:1;transform:translate(0);transition:opacity calc(.25s * var(--element-animations-enabled, 1)) ease,transform calc(.25s * var(--element-animations-enabled, 1)) ease}@starting-style{.flat-group{opacity:0;transform:translate(16px)}}.flat-group.group-leave{display:none}.flat-group-header{display:flex;align-items:center;gap:var(--si-sys-sizing-spacing-x-40);padding-inline:var(--si-sys-sizing-spacing-x-50);color:var(--element-text-primary);opacity:1;transform:translateY(0);transition:opacity calc(.2s * var(--element-animations-enabled, 1)) ease,transform calc(.2s * var(--element-animations-enabled, 1)) ease}@starting-style{.flat-group-header{opacity:0;transform:translateY(-4px)}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-navbar-vertical-next-group', imports: [CdkTrapFocus], template: `@if (visible()) {
+            args: [{ selector: 'si-navbar-vertical-next-group', imports: [CdkTrapFocus, SiIconComponent, SiTranslatePipe], template: `@if (visible()) {
     @let flyout = groupTrigger.flyout();
+    @let flat = navbar.flatMode();
     <div
       animate.leave="group-leave"
-      [class.inline-group]="!flyout"
+      [class.inline-group]="!flyout && !flat"
       [class.dropdown-menu]="flyout"
-      [cdkTrapFocus]="flyout"
-      [cdkTrapFocusAutoCapture]="flyout"
+      [class.flat-group]="flat"
     >
-      <div [class.overflow-hidden]="!flyout">
+      @if (groupTrigger.flatGroupActive()) {
+        <div class="flat-group-header">
+          <button
+            type="button"
+            class="btn btn-icon btn-tertiary-ghost"
+            [attr.aria-label]="ariaLabel() | translate"
+            (click)="navbar.closeFlatGroup()"
+          >
+            <si-icon class="flip-rtl" [icon]="icons.elementLeft2" />
+          </button>
+          <span class="item-title text-truncate si-h5" [id]="flatGroupTitleId">
+            {{ triggerItem.label() | translate }}
+          </span>
+        </div>
+      }
+      <div
+        [class.overflow-hidden]="!flyout"
+        [cdkTrapFocus]="flyout"
+        [cdkTrapFocusAutoCapture]="flyout"
+      >
         <ng-content />
       </div>
     </div>
   }`, host: {
                         '[attr.role]': "groupTrigger.flyout() ? 'dialog' : 'group'",
                         '[id]': 'groupTrigger.groupId',
-                        '[attr.aria-labelledby]': 'groupTrigger.id',
+                        '[attr.aria-labelledby]': 'groupTrigger.flatGroupActive() ? flatGroupTitleId : groupTrigger.id',
                         'animate.enter': 'component-enter',
+                        '[class.flat-group-active]': 'groupTrigger.flatGroupActive()',
                         '(keydown.escape)': 'close()'
-                    }, styles: [":host.component-enter .inline-group{transition:none}.inline-group{display:grid;transition-property:grid-template-rows,opacity;transition-duration:calc(.5s * var(--element-animations-enabled, 1));transition-timing-function:ease;opacity:1;grid-template-rows:1fr;overflow:hidden}@starting-style{.inline-group{grid-template-rows:0fr;opacity:0}}.inline-group.group-leave{grid-template-rows:0fr;opacity:0}.dropdown-menu{display:block;position:static}\n"] }]
-        }], ctorParameters: () => [] });
+                    }, styles: [":host.component-enter .inline-group{transition:none}.inline-group{display:grid;transition-property:grid-template-rows,opacity;transition-duration:calc(.5s * var(--element-animations-enabled, 1));transition-timing-function:ease;opacity:1;grid-template-rows:1fr;overflow:hidden}@starting-style{.inline-group{grid-template-rows:0fr;opacity:0}}.inline-group.group-leave{grid-template-rows:0fr;opacity:0}.dropdown-menu{display:block;position:static}:host-context(.nav-flat-group-open){display:none}:host(.flat-group-active){display:block}.flat-group{opacity:1;transform:translate(0);transition:opacity calc(.25s * var(--element-animations-enabled, 1)) ease,transform calc(.25s * var(--element-animations-enabled, 1)) ease}@starting-style{.flat-group{opacity:0;transform:translate(16px)}}.flat-group.group-leave{display:none}.flat-group-header{display:flex;align-items:center;gap:var(--si-sys-sizing-spacing-x-40);padding-inline:var(--si-sys-sizing-spacing-x-50);color:var(--element-text-primary);opacity:1;transform:translateY(0);transition:opacity calc(.2s * var(--element-animations-enabled, 1)) ease,transform calc(.2s * var(--element-animations-enabled, 1)) ease}@starting-style{.flat-group-header{opacity:0;transform:translateY(-4px)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], focusTrap: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkTrapFocus), { isSignal: true }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -795,7 +938,7 @@ class SiNavbarVerticalNextHeaderComponent {
     } @else {
       <si-navbar-vertical-next-divider class="divider" animate.leave="divider-leave" />
     }
-  `, isInline: true, styles: [".divider,.title{opacity:1;transition:opacity calc(.25s * var(--element-animations-enabled, 1)) calc(.25s * var(--element-animations-enabled, 1)) ease-out}@starting-style{.divider,.title{opacity:0}}:host{display:flex;align-items:center;block-size:calc(1lh + 2 * var(--si-sys-sizing-spacing-y-50));transition:block-size calc(.5s * var(--element-animations-enabled, 1)) ease-out}:host.collapsed{block-size:13px}:host.component-enter{transition:none}:host.component-enter .title,:host.component-enter .divider{transition:none}.title.title-leave{opacity:0;transition:opacity calc(.25s * var(--element-animations-enabled, 1)) ease-in}:host.chip-mode .title{transition:none}.divider{flex:1;margin-block:0}.divider.divider-leave{opacity:0;transition-delay:0s}\n"], dependencies: [{ kind: "component", type: SiNavbarVerticalNextDividerComponent, selector: "si-navbar-vertical-next-divider" }] });
+  `, isInline: true, styles: [".divider,.title{opacity:1;transition:opacity calc(.25s * var(--element-animations-enabled, 1)) calc(.25s * var(--element-animations-enabled, 1)) ease-out}@starting-style{.divider,.title{opacity:0}}:host{display:flex;align-items:center;block-size:calc(1lh + 2 * var(--si-sys-sizing-spacing-y-50));transition:block-size calc(.5s * var(--element-animations-enabled, 1)) ease-out}:host.collapsed{block-size:13px}:host.component-enter{transition:none}:host.component-enter .title,:host.component-enter .divider{transition:none}.title.title-leave{opacity:0;transition:opacity calc(.25s * var(--element-animations-enabled, 1)) ease-in}:host.chip-mode .title{transition:none}.divider{flex:1;margin-block:0}.divider.divider-leave{opacity:0;transition-delay:0s}:host-context(.nav-flat-group-open){display:none}\n"], dependencies: [{ kind: "component", type: SiNavbarVerticalNextDividerComponent, selector: "si-navbar-vertical-next-divider" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextHeaderComponent, decorators: [{
             type: Component,
@@ -811,7 +954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[class.collapsed]': 'navbar.collapsed() && !navbar.chipMenuOpen()',
                         '[class.chip-mode]': 'navbar.chipMode()',
                         'animate.enter': 'component-enter'
-                    }, styles: [".divider,.title{opacity:1;transition:opacity calc(.25s * var(--element-animations-enabled, 1)) calc(.25s * var(--element-animations-enabled, 1)) ease-out}@starting-style{.divider,.title{opacity:0}}:host{display:flex;align-items:center;block-size:calc(1lh + 2 * var(--si-sys-sizing-spacing-y-50));transition:block-size calc(.5s * var(--element-animations-enabled, 1)) ease-out}:host.collapsed{block-size:13px}:host.component-enter{transition:none}:host.component-enter .title,:host.component-enter .divider{transition:none}.title.title-leave{opacity:0;transition:opacity calc(.25s * var(--element-animations-enabled, 1)) ease-in}:host.chip-mode .title{transition:none}.divider{flex:1;margin-block:0}.divider.divider-leave{opacity:0;transition-delay:0s}\n"] }]
+                    }, styles: [".divider,.title{opacity:1;transition:opacity calc(.25s * var(--element-animations-enabled, 1)) calc(.25s * var(--element-animations-enabled, 1)) ease-out}@starting-style{.divider,.title{opacity:0}}:host{display:flex;align-items:center;block-size:calc(1lh + 2 * var(--si-sys-sizing-spacing-y-50));transition:block-size calc(.5s * var(--element-animations-enabled, 1)) ease-out}:host.collapsed{block-size:13px}:host.component-enter{transition:none}:host.component-enter .title,:host.component-enter .divider{transition:none}.title.title-leave{opacity:0;transition:opacity calc(.25s * var(--element-animations-enabled, 1)) ease-in}:host.chip-mode .title{transition:none}.divider{flex:1;margin-block:0}.divider.divider-leave{opacity:0;transition-delay:0s}:host-context(.nav-flat-group-open){display:none}\n"] }]
         }] });
 
 /**
@@ -849,11 +992,11 @@ class SiNavbarVerticalNextSearchComponent {
         setTimeout(() => this.searchBar().focus());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: SiNavbarVerticalNextSearchComponent, isStandalone: true, selector: "si-navbar-vertical-next-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange" }, viewQueries: [{ propertyName: "searchBar", first: true, predicate: SiSearchBarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<si-search-bar\n  class=\"mx-4\"\n  colorVariant=\"base-0\"\n  prohibitedCharacters=\"*?\"\n  [placeholder]=\"placeholder() | translate\"\n  [debounceTime]=\"debounceTime()\"\n  [showIcon]=\"true\"\n  (searchChange)=\"searchChange.emit($event)\"\n/>\n<button\n  type=\"button\"\n  class=\"btn-search background-0 px-3 mx-4 mobile text-secondary\"\n  [attr.aria-label]=\"placeholder() | translate\"\n  (click)=\"expandForSearch()\"\n>\n  <si-icon class=\"icon\" [icon]=\"icons.elementSearch\" />\n</button>\n", styles: [":host{display:flex;align-items:center;margin-block-start:var(--si-sys-sizing-spacing-y-40);padding-block:var(--si-sys-sizing-spacing-y-20);overflow-x:hidden}:host-context(.nav-collapsed){display:none}:host-context(.nav-collapsed) si-search-bar{display:none}si-search-bar{inline-size:100%}.btn-search{display:none;border:0;border-radius:var(--element-radius-2);block-size:var(--si-sys-sizing-sizing-80);inline-size:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-20));text-align:start}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:flex}.btn-search{display:none}:host-context(.nav-collapsed) .btn-search{display:block}}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "value", "readonly", "colorVariant", "disabled", "maxlength", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: SiNavbarVerticalNextSearchComponent, isStandalone: true, selector: "si-navbar-vertical-next-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange" }, viewQueries: [{ propertyName: "searchBar", first: true, predicate: SiSearchBarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<si-search-bar\n  class=\"mx-4\"\n  colorVariant=\"base-0\"\n  prohibitedCharacters=\"*?\"\n  [placeholder]=\"placeholder() | translate\"\n  [debounceTime]=\"debounceTime()\"\n  [showIcon]=\"true\"\n  (searchChange)=\"searchChange.emit($event)\"\n/>\n<button\n  type=\"button\"\n  class=\"btn-search background-0 px-3 mx-4 mobile text-secondary\"\n  [attr.aria-label]=\"placeholder() | translate\"\n  (click)=\"expandForSearch()\"\n>\n  <si-icon class=\"icon\" [icon]=\"icons.elementSearch\" />\n</button>\n", styles: [":host{display:flex;align-items:center;margin-block-start:var(--si-sys-sizing-spacing-y-40);padding-block:var(--si-sys-sizing-spacing-y-20);overflow-x:hidden}:host-context(.nav-collapsed){display:none}:host-context(.nav-collapsed) si-search-bar{display:none}:host-context(.nav-flat-group-open){display:none}si-search-bar{inline-size:100%}.btn-search{display:none;border:0;border-radius:var(--element-radius-2);block-size:var(--si-sys-sizing-sizing-80);inline-size:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-20));text-align:start}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:flex}.btn-search{display:none}:host-context(.nav-collapsed) .btn-search{display:block}}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "value", "readonly", "colorVariant", "disabled", "maxlength", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiNavbarVerticalNextSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-navbar-vertical-next-search', imports: [SiIconComponent, SiSearchBarComponent, SiTranslatePipe], template: "<si-search-bar\n  class=\"mx-4\"\n  colorVariant=\"base-0\"\n  prohibitedCharacters=\"*?\"\n  [placeholder]=\"placeholder() | translate\"\n  [debounceTime]=\"debounceTime()\"\n  [showIcon]=\"true\"\n  (searchChange)=\"searchChange.emit($event)\"\n/>\n<button\n  type=\"button\"\n  class=\"btn-search background-0 px-3 mx-4 mobile text-secondary\"\n  [attr.aria-label]=\"placeholder() | translate\"\n  (click)=\"expandForSearch()\"\n>\n  <si-icon class=\"icon\" [icon]=\"icons.elementSearch\" />\n</button>\n", styles: [":host{display:flex;align-items:center;margin-block-start:var(--si-sys-sizing-spacing-y-40);padding-block:var(--si-sys-sizing-spacing-y-20);overflow-x:hidden}:host-context(.nav-collapsed){display:none}:host-context(.nav-collapsed) si-search-bar{display:none}si-search-bar{inline-size:100%}.btn-search{display:none;border:0;border-radius:var(--element-radius-2);block-size:var(--si-sys-sizing-sizing-80);inline-size:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-20));text-align:start}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:flex}.btn-search{display:none}:host-context(.nav-collapsed) .btn-search{display:block}}\n"] }]
+            args: [{ selector: 'si-navbar-vertical-next-search', imports: [SiIconComponent, SiSearchBarComponent, SiTranslatePipe], template: "<si-search-bar\n  class=\"mx-4\"\n  colorVariant=\"base-0\"\n  prohibitedCharacters=\"*?\"\n  [placeholder]=\"placeholder() | translate\"\n  [debounceTime]=\"debounceTime()\"\n  [showIcon]=\"true\"\n  (searchChange)=\"searchChange.emit($event)\"\n/>\n<button\n  type=\"button\"\n  class=\"btn-search background-0 px-3 mx-4 mobile text-secondary\"\n  [attr.aria-label]=\"placeholder() | translate\"\n  (click)=\"expandForSearch()\"\n>\n  <si-icon class=\"icon\" [icon]=\"icons.elementSearch\" />\n</button>\n", styles: [":host{display:flex;align-items:center;margin-block-start:var(--si-sys-sizing-spacing-y-40);padding-block:var(--si-sys-sizing-spacing-y-20);overflow-x:hidden}:host-context(.nav-collapsed){display:none}:host-context(.nav-collapsed) si-search-bar{display:none}:host-context(.nav-flat-group-open){display:none}si-search-bar{inline-size:100%}.btn-search{display:none;border:0;border-radius:var(--element-radius-2);block-size:var(--si-sys-sizing-sizing-80);inline-size:calc(1.5rem + 2 * var(--si-sys-sizing-spacing-x-20));text-align:start}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:flex}.btn-search{display:none}:host-context(.nav-collapsed) .btn-search{display:block}}\n"] }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], searchBar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiSearchBarComponent), { isSignal: true }] }] } });
 
 /**