@siemens/element-ng 49.7.0 → 49.9.0

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

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, InjectionToken, model, input, booleanAttribute, inject, signal, linkedSignal, ViewContainerRef, Injector, computed, effect, untracked, Directive, output, viewChild, NgModule } from '@angular/core';
+import { ChangeDetectionStrategy, Component, InjectionToken, model, input, booleanAttribute, inject, Injector, signal, afterNextRender, linkedSignal, untracked, computed, ViewContainerRef, effect, Directive, output, viewChild, NgModule } from '@angular/core';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { elementDoubleRight, elementDoubleLeft, elementDown2, elementSearch } from '@siemens/element-icons';
+import { elementDoubleRight, elementDoubleLeft, elementRight2, elementDown2, elementSearch } from '@siemens/element-icons';
 import { SI_UI_STATE_SERVICE } from '@siemens/element-ng/common';
 import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
@@ -59,6 +59,14 @@ class SiNavbarVerticalNextComponent {
      * @defaultValue false
      */
     textOnly = input(false, { ...(ngDevMode ? { debugName: "textOnly" } : {}), transform: booleanAttribute });
+    /**
+     * When `true`, item-groups always open as a transient flyout panel adjacent to the
+     * trigger, regardless of whether the navbar is collapsed or expanded.
+     * Flyouts open and close on click.
+     *
+     * @defaultValue false
+     */
+    alwaysFlyout = input(false, { ...(ngDevMode ? { debugName: "alwaysFlyout" } : {}), transform: booleanAttribute });
     /**
      * List of vertical navigation items
      *
@@ -69,23 +77,15 @@ class SiNavbarVerticalNextComponent {
      */
     visible = input(true, { ...(ngDevMode ? { debugName: "visible" } : {}), transform: booleanAttribute });
     /**
-     * Text for the navbar expand button. Required for a11y
+     * Text for the navbar toggle button used as `aria-label`.
+     * The expanded state is communicated via `aria-expanded`.
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.EXPAND:Expand`)
+     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.TOGGLE:Toggle`)
      * ```
      */
-    navbarExpandButtonText = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.EXPAND:Expand`), ...(ngDevMode ? [{ debugName: "navbarExpandButtonText" }] : []));
-    /**
-     * Text for the navbar collapse button. Required for a11y
-     *
-     * @defaultValue
-     * ```
-     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.COLLAPSE:Collapse`)
-     * ```
-     */
-    navbarCollapseButtonText = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.COLLAPSE:Collapse`), ...(ngDevMode ? [{ debugName: "navbarCollapseButtonText" }] : []));
+    toggleButtonText = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.TOGGLE:Toggle`), ...(ngDevMode ? [{ debugName: "toggleButtonText" }] : []));
     /**
      * An optional stateId to uniquely identify a component instance.
      * Required for persistence of ui state.
@@ -111,6 +111,8 @@ class SiNavbarVerticalNextComponent {
     skipLinkMainContentLabel = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.SKIP_LINK.MAIN_LABEL:Main content`), ...(ngDevMode ? [{ debugName: "skipLinkMainContentLabel" }] : []));
     uiStateService = inject(SI_UI_STATE_SERVICE, { optional: true });
     breakpointObserver = inject(BreakpointObserver);
+    injector = inject(Injector);
+    ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : []));
     smallScreen = signal(false, ...(ngDevMode ? [{ debugName: "smallScreen" }] : []));
     /**
      * @defaultValue
@@ -146,8 +148,12 @@ class SiNavbarVerticalNextComponent {
                         this.uiStateExpandedItems.set(uiState.expandedItems);
                     }
                 }
+                afterNextRender(() => this.ready.set(true), { injector: this.injector });
             });
         }
+        else {
+            this.ready.set(true);
+        }
     }
     toggleCollapse() {
         if (this.collapsed()) {
@@ -197,7 +203,7 @@ class SiNavbarVerticalNextComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, navbarExpandButtonText: { classPropertyName: "navbarExpandButtonText", publicName: "navbarExpandButtonText", isSignal: true, isRequired: false, transformFunction: null }, navbarCollapseButtonText: { classPropertyName: "navbarCollapseButtonText", publicName: "navbarCollapseButtonText", 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.visible": "visible()" }, classAttribute: "si-layout-inner ready" }, providers: [{ provide: SI_NAVBAR_VERTICAL_NEXT, useExisting: SiNavbarVerticalNextComponent }], 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=\"bg-base-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 navbar-vertical-no-collapse\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-ghost\"\n          [attr.aria-label]=\"\n            (collapsed() ? navbarExpandButtonText() : navbarCollapseButtonText()) | translate\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon\n            class=\"flip-rtl\"\n            [icon]=\"collapsed() ? icons.elementDoubleRight : icons.elementDoubleLeft\"\n          />\n        </button>\n      </div>\n    </div>\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  </nav>\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;transition:padding-inline-start calc(.5s * var(--element-animations-enabled, 1));--si-layout-header-first-element-offset: 40px}:host.ready:not(.visible){padding-inline-start:0!important}nav{display:flex;flex-direction:column;position:fixed;z-index:1031;inset-block-start:calc(1.5rem + 25px + 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 + 24px);color:var(--element-text-primary);padding-block:4px;padding-inline:8px;margin-block-start:8px;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)) .mobile-drawer{inline-size:240px}:host.nav-collapsed .mobile-drawer{border:0;color:var(--element-text-primary);background:var(--element-base-1);text-align:end;box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}.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}@media(min-width:576px){:host:not(.nav-text-only),:host:not(.nav-collapsed){--si-layout-header-first-element-offset: 0}:host:not(.nav-text-only){padding-inline-start:calc(1.5rem + 24px)}:host:not(.nav-text-only) .mobile-drawer{background:transparent;box-shadow:none}:host:not(.nav-text-only) nav{inline-size:calc(1.5rem + 24px)}:host:not(.nav-text-only) nav.expanded{inline-size:240px}}@media(min-width:992px){:host:not(.nav-collapsed){padding-inline-start:240px}}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiSkipLinkTargetDirective, selector: "[siSkipLinkTarget]", inputs: ["siSkipLinkTarget"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 }, 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.visible": "visible()", "class.ready": "ready()" }, classAttribute: "si-layout-inner ready" }, providers: [{ provide: SI_NAVBAR_VERTICAL_NEXT, useExisting: SiNavbarVerticalNextComponent }], 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=\"bg-base-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 navbar-vertical-no-collapse\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-tertiary-ghost\"\n          [attr.aria-label]=\"toggleButtonText() | translate\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon\n            class=\"flip-rtl\"\n            [icon]=\"collapsed() ? icons.elementDoubleRight : icons.elementDoubleLeft\"\n          />\n        </button>\n      </div>\n    </div>\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  </nav>\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(1.5rem + 25px + 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 + 24px);color:var(--element-text-primary);padding-block:4px;padding-inline:8px;margin-block-start:8px;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)) .mobile-drawer{inline-size:240px}:host.nav-collapsed .mobile-drawer{border:0;color:var(--element-text-primary);background:var(--element-base-1);text-align:end;box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}.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}@media(min-width:576px){:host:not(.nav-text-only),:host:not(.nav-collapsed){--si-layout-header-first-element-offset: 0}:host:not(.nav-text-only){padding-inline-start:calc(1.5rem + 24px)}:host:not(.nav-text-only) .mobile-drawer{background:transparent;box-shadow:none}:host:not(.nav-text-only) nav{inline-size:calc(1.5rem + 24px)}:host:not(.nav-text-only) nav.expanded{inline-size:240px}}@media(min-width:992px){:host:not(.nav-collapsed){padding-inline-start:240px}}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiSkipLinkTargetDirective, selector: "[siSkipLinkTarget]", inputs: ["siSkipLinkTarget"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextComponent, decorators: [{
             type: Component,
@@ -205,9 +211,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         class: 'si-layout-inner ready',
                         '[class.nav-collapsed]': 'collapsed()',
                         '[class.nav-text-only]': 'textOnly()',
-                        '[class.visible]': 'visible()'
-                    }, 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=\"bg-base-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 navbar-vertical-no-collapse\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-ghost\"\n          [attr.aria-label]=\"\n            (collapsed() ? navbarExpandButtonText() : navbarCollapseButtonText()) | translate\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon\n            class=\"flip-rtl\"\n            [icon]=\"collapsed() ? icons.elementDoubleRight : icons.elementDoubleLeft\"\n          />\n        </button>\n      </div>\n    </div>\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  </nav>\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;transition:padding-inline-start calc(.5s * var(--element-animations-enabled, 1));--si-layout-header-first-element-offset: 40px}:host.ready:not(.visible){padding-inline-start:0!important}nav{display:flex;flex-direction:column;position:fixed;z-index:1031;inset-block-start:calc(1.5rem + 25px + 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 + 24px);color:var(--element-text-primary);padding-block:4px;padding-inline:8px;margin-block-start:8px;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)) .mobile-drawer{inline-size:240px}:host.nav-collapsed .mobile-drawer{border:0;color:var(--element-text-primary);background:var(--element-base-1);text-align:end;box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}.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}@media(min-width:576px){:host:not(.nav-text-only),:host:not(.nav-collapsed){--si-layout-header-first-element-offset: 0}:host:not(.nav-text-only){padding-inline-start:calc(1.5rem + 24px)}:host:not(.nav-text-only) .mobile-drawer{background:transparent;box-shadow:none}:host:not(.nav-text-only) nav{inline-size:calc(1.5rem + 24px)}:host:not(.nav-text-only) nav.expanded{inline-size:240px}}@media(min-width:992px){:host:not(.nav-collapsed){padding-inline-start:240px}}\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 }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], navbarExpandButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarExpandButtonText", required: false }] }], navbarCollapseButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarCollapseButtonText", 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 }] }] } });
+                        '[class.visible]': 'visible()',
+                        '[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=\"bg-base-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 navbar-vertical-no-collapse\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-tertiary-ghost\"\n          [attr.aria-label]=\"toggleButtonText() | translate\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon\n            class=\"flip-rtl\"\n            [icon]=\"collapsed() ? icons.elementDoubleRight : icons.elementDoubleLeft\"\n          />\n        </button>\n      </div>\n    </div>\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  </nav>\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(1.5rem + 25px + 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 + 24px);color:var(--element-text-primary);padding-block:4px;padding-inline:8px;margin-block-start:8px;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)) .mobile-drawer{inline-size:240px}:host.nav-collapsed .mobile-drawer{border:0;color:var(--element-text-primary);background:var(--element-base-1);text-align:end;box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}.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}@media(min-width:576px){:host:not(.nav-text-only),:host:not(.nav-collapsed){--si-layout-header-first-element-offset: 0}:host:not(.nav-text-only){padding-inline-start:calc(1.5rem + 24px)}:host:not(.nav-text-only) .mobile-drawer{background:transparent;box-shadow:none}:host:not(.nav-text-only) nav{inline-size:calc(1.5rem + 24px)}:host:not(.nav-text-only) nav.expanded{inline-size:240px}}@media(min-width:992px){:host:not(.nav-collapsed){padding-inline-start:240px}}\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 }] }], 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 }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -280,17 +287,42 @@ class SiNavbarVerticalNextGroupTriggerDirective {
     /** @defaultValue false */
     expanded = linkedSignal({ ...(ngDevMode ? { debugName: "expanded" } : {}), source: () => {
             const stateId = this.stateId();
-            if (!stateId) {
-                return undefined;
-            }
-            return this.navbar.uiStateExpandedItems()[stateId];
+            return {
+                uiState: stateId ? this.navbar.uiStateExpandedItems()[stateId] : undefined,
+                alwaysFlyout: this.navbar.alwaysFlyout()
+            };
         },
-        computation: source => source ?? false });
-    /** @internal */
-    flyout = signal(false, ...(ngDevMode ? [{ debugName: "flyout" }] : []));
-    /** @internal */
-    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+        computation: (source, previous) => {
+            // `alwaysFlyout` toggled: reset expansion. When switching back to inline,
+            // surface the group that owns the active route.
+            if (previous && source.alwaysFlyout !== previous.source.alwaysFlyout) {
+                return !source.alwaysFlyout && untracked(() => this.active());
+            }
+            // First run or UIState (re)loaded: honor the persisted value when present,
+            // otherwise keep the user's current expansion.
+            if (source.uiState !== undefined) {
+                return source.uiState;
+            }
+            return previous?.value ?? false;
+        } });
+    /**
+     * Whether the group is currently rendered as a transient flyout overlay
+     * (true) or inline within the navbar (false). Automatically resets to
+     * `false` whenever the rendering mode changes.
+     * @internal
+     */
+    flyout = linkedSignal({ ...(ngDevMode ? { debugName: "flyout" } : {}), source: () => this.flyoutMode(),
+        computation: () => false });
+    /**
+     * Whether the open flyout overlay currently contains the active route.
+     * Reset together with `flyout` so it never lingers across mode changes.
+     * @internal
+     */
+    active = linkedSignal({ ...(ngDevMode ? { debugName: "active" } : {}), source: () => this.flyout(),
+        computation: (open, previous) => (open ? (previous?.value ?? false) : false) });
     navbar = inject(SI_NAVBAR_VERTICAL_NEXT);
+    /** @internal */
+    flyoutMode = computed(() => this.navbar.alwaysFlyout() || this.navbar.collapsed(), ...(ngDevMode ? [{ debugName: "flyoutMode" }] : []));
     flyoutOutsideClickSubscription;
     viewContainer = inject(ViewContainerRef);
     overlay = inject(Overlay);
@@ -308,33 +340,27 @@ class SiNavbarVerticalNextGroupTriggerDirective {
     flyoutAnchorComponentRef;
     templatePortal = computed(() => new TemplatePortal(this.groupTemplate(), this.viewContainer, undefined, this.injector), ...(ngDevMode ? [{ debugName: "templatePortal" }] : []));
     constructor() {
-        // Sync expanded state from navbar UIState when it loads
+        // Manage the rendering of the inline projection / flyout overlay in
+        // response to mode changes. Only side effects belong here; the related
+        // signal state is propagated by `flyout` / `expanded` linked signals.
         effect(() => {
-            const stateId = this.stateId();
-            if (!stateId)
-                return;
-            const state = this.navbar.uiStateExpandedItems()[stateId];
-            if (state !== undefined) {
-                untracked(() => this.expanded.set(state));
-            }
+            this.flyoutMode();
+            untracked(() => {
+                this.detachFlyout();
+                this.attachInline();
+            });
         });
     }
-    ngOnInit() {
-        this.attachInline();
-    }
     /** @internal */
     hideFlyout() {
-        if (this.flyout()) {
-            this.flyout.set(false);
-            this.active.set(false);
-            this.flyoutAnchorComponentRef?.destroy();
-            this.flyoutAnchorComponentRef = undefined;
-            this.attachInline();
-            this.flyoutOutsideClickSubscription?.unsubscribe();
-        }
+        if (!this.flyout())
+            return;
+        this.flyout.set(false);
+        this.detachFlyout();
+        this.attachInline();
     }
     triggered() {
-        if (this.navbar.collapsed()) {
+        if (this.flyoutMode()) {
             this.toggleFlyout();
         }
         else {
@@ -353,13 +379,13 @@ class SiNavbarVerticalNextGroupTriggerDirective {
     }
     attachInline() {
         this.overlayRef.detach();
-        this.groupView?.destroy(); // we need ?. for first attachment
+        this.groupView?.destroy();
         this.groupView = this.viewContainer.createEmbeddedView(this.groupTemplate(), undefined, {
             injector: this.injector
         });
     }
     attachFlyout() {
-        this.groupView.destroy();
+        this.groupView?.destroy();
         this.groupView = this.overlayRef.attach(this.templatePortal());
         this.flyoutAnchorComponentRef = this.viewContainer.createComponent(SiNavbarFlyoutAnchorComponent);
         this.flyoutAnchorComponentRef.setInput('groupId', this.groupId);
@@ -367,6 +393,12 @@ class SiNavbarVerticalNextGroupTriggerDirective {
             .outsidePointerEvents()
             .subscribe(() => this.hideFlyout());
     }
+    detachFlyout() {
+        this.flyoutAnchorComponentRef?.destroy();
+        this.flyoutAnchorComponentRef = undefined;
+        this.flyoutOutsideClickSubscription?.unsubscribe();
+        this.flyoutOutsideClickSubscription = undefined;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.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": "expanded()", "attr.aria-controls": "groupId", "attr.aria-expanded": "expanded()" }, classAttribute: "dropdown-toggle" }, ngImport: i0 });
 }
@@ -394,10 +426,8 @@ class SiNavbarVerticalNextGroupComponent {
     navbar = inject(SI_NAVBAR_VERTICAL_NEXT);
     groupTrigger = inject(SiNavbarVerticalNextGroupTriggerDirective);
     routerLinkActive = inject(RouterLinkActive, { optional: true });
-    // Store initial value, as the mode for an instance never changes.
-    flyout = this.groupTrigger.flyout();
     visible = computed(() => {
-        return this.flyout || (!this.navbar.collapsed() && this.groupTrigger.expanded());
+        return this.groupTrigger.flyout() || (!this.navbar.collapsed() && this.groupTrigger.expanded());
     }, ...(ngDevMode ? [{ debugName: "visible" }] : []));
     constructor() {
         this.routerLinkActive?.isActiveChange
@@ -409,6 +439,7 @@ class SiNavbarVerticalNextGroupComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarVerticalNextGroupComponent, isStandalone: true, selector: "si-navbar-vertical-next-group", host: { attributes: { "role": "group", "animate.enter": "component-enter" }, listeners: { "keydown.escape": "close()" }, properties: { "id": "groupTrigger.groupId", "attr.aria-labelledby": "groupTrigger.id" } }, ngImport: i0, template: `@if (visible()) {
+    @let flyout = groupTrigger.flyout();
     <div
       animate.leave="group-leave"
       [class.inline-group]="!flyout"
@@ -425,6 +456,7 @@ class SiNavbarVerticalNextGroupComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-navbar-vertical-next-group', imports: [CdkTrapFocus], template: `@if (visible()) {
+    @let flyout = groupTrigger.flyout();
     <div
       animate.leave="group-leave"
       [class.inline-group]="!flyout"
@@ -461,7 +493,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:40px;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}.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 + 24px);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}.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextHeaderComponent, decorators: [{
             type: Component,
@@ -476,7 +508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
   `, host: {
                         '[class.collapsed]': 'navbar.collapsed()',
                         '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:40px;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}.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 + 24px);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}.divider{flex:1;margin-block:0}.divider.divider-leave{opacity:0;transition-delay:0s}\n"] }]
         }] });
 
 /**
@@ -485,7 +517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  */
 /** @experimental */
 class SiNavbarVerticalNextItemComponent {
-    icons = addIcons({ elementDown2 });
+    icons = addIcons({ elementDown2, elementRight2 });
     /** Optional icon to render before the label. */
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
     /** Badge value to display. */
@@ -531,6 +563,7 @@ class SiNavbarVerticalNextItemComponent {
         }
         return badge.toString();
     }, ...(ngDevMode ? [{ debugName: "formattedBadge" }] : []));
+    isDropdownItem = computed(() => !this.navbar.alwaysFlyout() && !!this.parent?.group?.flyout(), ...(ngDevMode ? [{ debugName: "isDropdownItem" }] : []));
     ngOnInit() {
         if (this.group && this.active) {
             this.group.expanded.set(true);
@@ -550,18 +583,18 @@ class SiNavbarVerticalNextItemComponent {
             false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 } }, host: { listeners: { "click": "triggered()" }, properties: { "class.dropdown-item": "this.parent?.group?.flyout()", "class.navbar-vertical-item": "!this.parent?.group?.flyout()", "class.active": "active", "class.hide-badge-collapsed": "hideBadgeWhenCollapsed()" }, classAttribute: "focus-inside" }, ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon class=\"icon-lg\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">\n  <ng-content />\n</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 aria-hidden=\"true\" class=\"dropdown-caret me-0 text-body\" [icon]=\"icons.elementDown2\" />\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--element-text-primary);background:none;border:0;font-size:.875rem;padding-block:8px;padding-inline:0 12px;min-inline-size:0;min-block-size:40px;inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg+.item-title{margin-inline-start:8px}: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(--element-action-primary-hover);background:var(--element-base-1-selected)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--element-action-primary-hover)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--element-base-1-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:8px}: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:32px}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) .badge{position:absolute;inset-block-start:4px;inset-inline-end:6px;min-inline-size:.875rem;border-radius:.4375rem;font-size:.75rem;line-height:.875rem;padding-block:0;padding-inline:4px;font-family:var(--element-body-font-family);font-weight:600}: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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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 } }, host: { listeners: { "click": "triggered()" }, properties: { "class.dropdown-item": "isDropdownItem()", "class.navbar-vertical-item": "!isDropdownItem()", "class.active": "active", "class.hide-badge-collapsed": "hideBadgeWhenCollapsed()" }, classAttribute: "focus-inside" }, ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon class=\"icon-lg\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">\n  <ng-content />\n</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-body\"\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(--element-text-primary);background:none;border:0;font-size:.875rem;padding-block:8px;padding-inline:0 12px;min-inline-size:0;min-block-size:calc(1lh + 24px);inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg+.item-title{margin-inline-start:8px}: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(--element-action-primary-hover);background:var(--element-base-1-selected)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--element-action-primary-hover)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--element-base-1-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:8px}: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:32px}: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(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) .badge{position:absolute;inset-block-start:4px;inset-inline-end:6px;min-inline-size:.875rem;border-radius:.4375rem;font-size:.75rem;line-height:.875rem;padding-block:0;padding-inline:4px;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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a[si-navbar-vertical-next-item], button[si-navbar-vertical-next-item]', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'focus-inside',
-                        '[class.dropdown-item]': 'this.parent?.group?.flyout()',
-                        '[class.navbar-vertical-item]': '!this.parent?.group?.flyout()',
+                        '[class.dropdown-item]': 'isDropdownItem()',
+                        '[class.navbar-vertical-item]': '!isDropdownItem()',
                         '[class.active]': 'active',
                         '[class.hide-badge-collapsed]': 'hideBadgeWhenCollapsed()',
                         '(click)': 'triggered()'
-                    }, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon class=\"icon-lg\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">\n  <ng-content />\n</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 aria-hidden=\"true\" class=\"dropdown-caret me-0 text-body\" [icon]=\"icons.elementDown2\" />\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--element-text-primary);background:none;border:0;font-size:.875rem;padding-block:8px;padding-inline:0 12px;min-inline-size:0;min-block-size:40px;inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg+.item-title{margin-inline-start:8px}: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(--element-action-primary-hover);background:var(--element-base-1-selected)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--element-action-primary-hover)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--element-base-1-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:8px}: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:32px}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) .badge{position:absolute;inset-block-start:4px;inset-inline-end:6px;min-inline-size:.875rem;border-radius:.4375rem;font-size:.75rem;line-height:.875rem;padding-block:0;padding-inline:4px;font-family:var(--element-body-font-family);font-weight:600}: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-lg\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">\n  <ng-content />\n</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-body\"\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(--element-text-primary);background:none;border:0;font-size:.875rem;padding-block:8px;padding-inline:0 12px;min-inline-size:0;min-block-size:calc(1lh + 24px);inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg+.item-title{margin-inline-start:8px}: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(--element-action-primary-hover);background:var(--element-base-1-selected)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--element-action-primary-hover)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--element-base-1-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:8px}: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:32px}: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(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) .badge{position:absolute;inset-block-start:4px;inset-inline-end:6px;min-inline-size:.875rem;border-radius:.4375rem;font-size:.75rem;line-height:.875rem;padding-block:0;padding-inline:4px;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"] }]
         }], 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 }] }] } });
 
 /**
@@ -596,11 +629,11 @@ class SiNavbarVerticalNextSearchComponent {
         setTimeout(() => this.searchBar().focus());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.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 bg-base-0 p-3 mx-4 mobile navbar-vertical-no-collapse 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;block-size:40px;margin-block-start:8px;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)}@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", "tabbable", "value", "readonly", "colorVariant", "disabled", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.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 bg-base-0 px-3 mx-4 mobile navbar-vertical-no-collapse 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:8px;padding-block:4px;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:calc(1lh + 16px);inline-size:calc(1.5rem + 8px);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", "tabbable", "value", "readonly", "colorVariant", "disabled", "maxlength", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-navbar-vertical-next-search', imports: [SiIconComponent, SiSearchBarComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, 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 bg-base-0 p-3 mx-4 mobile navbar-vertical-no-collapse 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;block-size:40px;margin-block-start:8px;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)}@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], changeDetection: ChangeDetectionStrategy.OnPush, 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 bg-base-0 px-3 mx-4 mobile navbar-vertical-no-collapse 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:8px;padding-block:4px;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:calc(1lh + 16px);inline-size:calc(1.5rem + 8px);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 }] }] } });
 
 /**