@siemens/element-ng 49.14.0 → 51.0.0-rc.5

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

@@ -1,19 +1,19 @@
+import * as i1 from '@angular/cdk/portal';
+import { DomPortal, PortalModule, TemplatePortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, InjectionToken, input, linkedSignal, untracked, signal, inject, computed, ViewContainerRef, DestroyRef, Injector, effect, Directive, booleanAttribute, ElementRef, model, viewChild, contentChildren, afterNextRender, output, NgModule } 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 { BreakpointObserver } from '@angular/cdk/layout';
-import * as i1 from '@angular/cdk/portal';
-import { TemplatePortal, DomPortal, PortalModule } from '@angular/cdk/portal';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { elementRight2, elementDown2, elementLayoutPane2Right, elementLayoutPane2, elementDoubleRight, elementDoubleLeft, elementSearch } from '@siemens/element-icons';
 import { SI_UI_STATE_SERVICE } from '@siemens/element-ng/common';
-import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
+import { SiIconComponent, addIcons } from '@siemens/element-ng/icon';
 import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
 import { SiSkipLinkTargetDirective } from '@siemens/element-ng/skip-links';
 import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { CdkOverlayOrigin, Overlay, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { RouterLinkActive } from '@angular/router';
 import { EMPTY } from 'rxjs';
-import { Overlay } from '@angular/cdk/overlay';
-import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { SiSearchBarComponent } from '@siemens/element-ng/search-bar';
 
 /**
@@ -26,12 +26,17 @@ import { SiSearchBarComponent } from '@siemens/element-ng/search-bar';
  * @experimental
  */
 class SiNavbarVerticalNextItemsComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiNavbarVerticalNextItemsComponent, isStandalone: true, selector: "si-navbar-vertical-next-items", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;overflow-x:hidden;min-block-size:0;flex:1 0 0;overflow-y:auto;margin-block-start:8px}:host-context(.nav-collapsed){display:none}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:block}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    elementRef = inject(ElementRef);
+    /** DOM portal that relocates the whole items container into the chip menu overlay.
+     * @internal
+     */
+    hostPortal = new DomPortal(this.elementRef.nativeElement);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: SiNavbarVerticalNextItemsComponent, isStandalone: true, selector: "si-navbar-vertical-next-items", ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;overflow-x:hidden;min-block-size:0;flex:1 0 0;overflow-y:auto;margin-block-start:8px}:host-context(.nav-collapsed){display:none}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:block}}:host-context(.chip-menu-panel){flex:none;margin:0;overflow:visible;min-block-size:auto}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextItemsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-navbar-vertical-next-items', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;overflow-x:hidden;min-block-size:0;flex:1 0 0;overflow-y:auto;margin-block-start:8px}: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-items', template: '<ng-content />', styles: [":host{display:block;overflow-x:hidden;min-block-size:0;flex:1 0 0;overflow-y:auto;margin-block-start:8px}:host-context(.nav-collapsed){display:none}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:block}}:host-context(.chip-menu-panel){flex:none;margin:0;overflow:visible;min-block-size:auto}\n"] }]
         }] });
 
 /**
@@ -41,6 +46,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 /** @experimental */
 const SI_NAVBAR_VERTICAL_NEXT = new InjectionToken('SI_NAVBAR_VERTICAL_NEXT');
 
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Chip button + chip menu overlay. Mounted by the navbar in inline-collapse
+ * mode when an active root item exists.
+ * @experimental
+ */
+class SiNavbarVerticalNextChipMenuComponent {
+    static menuIdCounter = 0;
+    /** Parent navbar host. */
+    navbar = inject(SI_NAVBAR_VERTICAL_NEXT);
+    chipOrigin = viewChild(CdkOverlayOrigin, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipOrigin" }] : /* istanbul ignore next */ []));
+    /** DOM id wiring the chip button's `aria-controls` to the overlay panel.
+     * @internal
+     */
+    menuId = `si-navbar-vertical-next-chip-menu-${SiNavbarVerticalNextChipMenuComponent.menuIdCounter++}`;
+    /** DOM id wiring the chip label to the overlay panel's `aria-labelledby`.
+     * @internal
+     */
+    menuLabelId = `${this.menuId}-label`;
+    /**
+     * `true` when the overlay is open.
+     *
+     * @defaultValue false
+     * @internal
+     */
+    open = linkedSignal({ ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), source: () => this.navbar.collapsed(),
+        computation: (collapsed, previous) => (collapsed ? (previous?.value ?? false) : false) });
+    /** @internal */
+    positions = [
+        { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+        { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }
+    ];
+    /** @internal */
+    scrollStrategy = inject(Overlay).scrollStrategies.reposition();
+    /** Toggles the overlay open state. */
+    toggle() {
+        this.open.update(open => !open);
+    }
+    /** Closes the overlay.
+     * @internal
+     */
+    close() {
+        this.open.set(false);
+    }
+    /** @internal */
+    onOutsideClick(event) {
+        // Chip button click is handled by toggle(); ignore here.
+        if (!this.chipOrigin()?.elementRef.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextChipMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiNavbarVerticalNextChipMenuComponent, isStandalone: true, selector: "si-navbar-vertical-next-chip-menu", viewQueries: [{ propertyName: "chipOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }], ngImport: i0, template: "@let item = navbar.activeItem();\n<button\n  #chipOrigin=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  type=\"button\"\n  class=\"chip btn btn-ghost\"\n  aria-haspopup=\"dialog\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"open() ? menuId : null\"\n  (click)=\"toggle()\"\n>\n  @if (item?.icon(); as chipIcon) {\n    <si-icon class=\"icon\" [icon]=\"chipIcon\" />\n  }\n  @if (item?.label(); as label) {\n    <span class=\"chip-label text-truncate\" [id]=\"menuLabelId\">{{ label }}</span>\n  }\n</button>\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"chipOrigin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n>\n  <div\n    class=\"chip-menu-panel dropdown-menu\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    [id]=\"menuId\"\n    [attr.aria-labelledby]=\"item?.label() ? menuLabelId : null\"\n    (keydown.escape)=\"close()\"\n  >\n    @let items = navbar.itemsComponent();\n    @if (items) {\n      <ng-container [cdkPortalOutlet]=\"items.hostPortal\" />\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:contents}.chip{position:fixed;z-index:0;inset-block-start:calc(calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 16px);inset-inline-start:calc(var(--si-navbar-parked-inline-start) + calc(1lh + 16px) + 1px);max-inline-size:calc(100vi - 2 * var(--si-navbar-parked-inline-start) - calc(1lh + 16px) - 1px);block-size:calc(1lh + 16px);min-inline-size:0;justify-content:flex-start;border-start-start-radius:0;border-end-start-radius:0;opacity:1;transition:inset-inline-start calc(.5s * var(--element-animations-enabled, 1)) ease,opacity calc(.5s * var(--element-animations-enabled, 1)) ease}@starting-style{.chip{inset-inline-start:var(--si-navbar-parked-inline-start);opacity:0}}.chip:focus-visible{z-index:1032}.chip .chip-label{font-weight:400}.chip-menu-panel{display:block;position:static;margin:0}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextChipMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-navbar-vertical-next-chip-menu', imports: [CdkConnectedOverlay, CdkOverlayOrigin, CdkTrapFocus, PortalModule, SiIconComponent], template: "@let item = navbar.activeItem();\n<button\n  #chipOrigin=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  type=\"button\"\n  class=\"chip btn btn-ghost\"\n  aria-haspopup=\"dialog\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"open() ? menuId : null\"\n  (click)=\"toggle()\"\n>\n  @if (item?.icon(); as chipIcon) {\n    <si-icon class=\"icon\" [icon]=\"chipIcon\" />\n  }\n  @if (item?.label(); as label) {\n    <span class=\"chip-label text-truncate\" [id]=\"menuLabelId\">{{ label }}</span>\n  }\n</button>\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"chipOrigin\"\n  [cdkConnectedOverlayOpen]=\"open()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n>\n  <div\n    class=\"chip-menu-panel dropdown-menu\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    cdkTrapFocus\n    cdkTrapFocusAutoCapture\n    [id]=\"menuId\"\n    [attr.aria-labelledby]=\"item?.label() ? menuLabelId : null\"\n    (keydown.escape)=\"close()\"\n  >\n    @let items = navbar.itemsComponent();\n    @if (items) {\n      <ng-container [cdkPortalOutlet]=\"items.hostPortal\" />\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:contents}.chip{position:fixed;z-index:0;inset-block-start:calc(calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 16px);inset-inline-start:calc(var(--si-navbar-parked-inline-start) + calc(1lh + 16px) + 1px);max-inline-size:calc(100vi - 2 * var(--si-navbar-parked-inline-start) - calc(1lh + 16px) - 1px);block-size:calc(1lh + 16px);min-inline-size:0;justify-content:flex-start;border-start-start-radius:0;border-end-start-radius:0;opacity:1;transition:inset-inline-start calc(.5s * var(--element-animations-enabled, 1)) ease,opacity calc(.5s * var(--element-animations-enabled, 1)) ease}@starting-style{.chip{inset-inline-start:var(--si-navbar-parked-inline-start);opacity:0}}.chip:focus-visible{z-index:1032}.chip .chip-label{font-weight:400}.chip-menu-panel{display:block;position:static;margin:0}\n"] }]
+        }], propDecorators: { chipOrigin: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { isSignal: true }] }] } });
+
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
@@ -53,16 +121,16 @@ const SI_NAVBAR_VERTICAL_NEXT = new InjectionToken('SI_NAVBAR_VERTICAL_NEXT');
  * @experimental
  */
 class SiNavbarFlyoutAnchorComponent {
-    groupId = input(...(ngDevMode ? [undefined, { debugName: "groupId" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarFlyoutAnchorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SiNavbarFlyoutAnchorComponent, isStandalone: true, selector: "si-navbar-flyout-anchor", inputs: { groupId: { classPropertyName: "groupId", publicName: "groupId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-owns": "groupId()" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    groupId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "groupId" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarFlyoutAnchorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: SiNavbarFlyoutAnchorComponent, isStandalone: true, selector: "si-navbar-flyout-anchor", inputs: { groupId: { classPropertyName: "groupId", publicName: "groupId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-owns": "groupId()" } }, ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarFlyoutAnchorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarFlyoutAnchorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'si-navbar-flyout-anchor',
                     template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { '[attr.aria-owns]': 'groupId()' }
                 }]
         }], propDecorators: { groupId: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupId", required: false }] }] } });
@@ -72,10 +140,11 @@ class SiNavbarVerticalNextGroupTriggerDirective {
     /** @internal */
     groupId = `si-navbar-vertical-next-group-${SiNavbarVerticalNextGroupTriggerDirective.idCounter++}`;
     id = `${this.groupId}-trigger`;
-    groupTemplate = input.required({ ...(ngDevMode ? { debugName: "groupTemplate" } : {}), alias: 'siNavbarVerticalNextGroupTriggerFor' });
-    stateId = input(...(ngDevMode ? [undefined, { debugName: "stateId" }] : []));
+    groupTemplate = input.required({ ...(ngDevMode ? { debugName: "groupTemplate" } : /* istanbul ignore next */ {}), alias: 'siNavbarVerticalNextGroupTriggerFor' });
+    stateId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "stateId" }] : /* istanbul ignore next */ []));
     /** @defaultValue false */
-    expanded = linkedSignal({ ...(ngDevMode ? { debugName: "expanded" } : {}), source: () => {
+    expanded = linkedSignal({ ...(ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {}), source: () => {
             const stateId = this.stateId();
             return {
                 uiState: stateId ? this.navbar.uiStateExpandedItems()[stateId] : undefined,
@@ -101,28 +170,37 @@ class SiNavbarVerticalNextGroupTriggerDirective {
      * `false` whenever the rendering mode changes.
      * @internal
      */
-    flyout = linkedSignal({ ...(ngDevMode ? { debugName: "flyout" } : {}), source: () => this.flyoutMode(),
+    flyout = linkedSignal({ ...(ngDevMode ? { debugName: "flyout" } : /* istanbul ignore next */ {}), source: () => this.flyoutMode(),
         computation: () => false });
     /** `true` when this group contains the active route. Set by the group component.
      * @internal
      */
-    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    active = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     navbar = inject(SI_NAVBAR_VERTICAL_NEXT);
     /** Signal mirror of the navbar's flyout mode. `true` when groups should render as transient overlays instead of inline.
      * @internal
      */
-    flyoutMode = computed(() => this.navbar.flyoutMode(), ...(ngDevMode ? [{ debugName: "flyoutMode" }] : []));
+    flyoutMode = computed(() => this.navbar.flyoutMode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutMode" }] : /* istanbul ignore next */ []));
     flyoutOutsideClickSubscription;
     viewContainer = inject(ViewContainerRef);
     overlay = inject(Overlay);
     destroyRef = inject(DestroyRef);
     injector = Injector.create({ parent: inject(Injector), providers: [] });
     overlayRef = this.overlay.create({
-        positionStrategy: this.buildPositionStrategy(this.navbar.chipMode())
+        positionStrategy: this.overlay
+            .position()
+            .flexibleConnectedTo(this.viewContainer.element)
+            .withPositions([
+            { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },
+            { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' }
+        ])
     });
     groupView;
     flyoutAnchorComponentRef;
-    templatePortal = computed(() => new TemplatePortal(this.groupTemplate(), this.viewContainer, undefined, this.injector), ...(ngDevMode ? [{ debugName: "templatePortal" }] : []));
+    templatePortal = computed(() => new TemplatePortal(this.groupTemplate(), this.viewContainer, undefined, this.injector), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templatePortal" }] : /* istanbul ignore next */ []));
     constructor() {
         // Manage the rendering of the inline projection / flyout overlay in
         // response to mode changes. Only side effects belong here; the related
@@ -140,22 +218,6 @@ class SiNavbarVerticalNextGroupTriggerDirective {
         });
     }
     /** @internal */
-    buildPositionStrategy(chipMode) {
-        const positions = chipMode
-            ? [
-                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
-                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' }
-            ]
-            : [
-                { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },
-                { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' }
-            ];
-        return this.overlay
-            .position()
-            .flexibleConnectedTo(this.viewContainer.element)
-            .withPositions(positions);
-    }
-    /** @internal */
     hideFlyout() {
         if (!this.flyout())
             return;
@@ -189,13 +251,9 @@ class SiNavbarVerticalNextGroupTriggerDirective {
         });
     }
     attachFlyout() {
-        this.overlayRef.updatePositionStrategy(this.buildPositionStrategy(this.navbar.chipMode()));
         this.groupView?.destroy();
         this.groupView = this.overlayRef.attach(this.templatePortal());
-        // In chip mode the trigger's DOM is outside <nav> via DomPortal; use the
-        // navbar's in-nav anchor host so aria-owns stays within the navigation landmark.
-        const anchorHost = this.navbar.flyoutAnchorHost() ?? this.viewContainer;
-        this.flyoutAnchorComponentRef = anchorHost.createComponent(SiNavbarFlyoutAnchorComponent);
+        this.flyoutAnchorComponentRef = this.viewContainer.createComponent(SiNavbarFlyoutAnchorComponent);
         this.flyoutAnchorComponentRef.setInput('groupId', this.groupId);
         this.flyoutOutsideClickSubscription = this.overlayRef
             .outsidePointerEvents()
@@ -207,17 +265,17 @@ class SiNavbarVerticalNextGroupTriggerDirective {
         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": "flyoutMode() ? flyout() : expanded()" }, classAttribute: "dropdown-toggle" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextGroupTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextGroupTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[siNavbarVerticalNextGroupTriggerFor]',
                     host: {
                         class: 'dropdown-toggle',
                         '[id]': 'id',
-                        '[class.show]': 'expanded()',
+                        '[class.show]': '!flyoutMode() && expanded()',
                         '[attr.aria-controls]': 'groupId',
                         '[attr.aria-expanded]': 'flyoutMode() ? flyout() : expanded()',
                         '(click)': 'triggered()'
@@ -233,19 +291,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 class SiNavbarVerticalNextItemComponent {
     icons = addIcons({ elementDown2, elementRight2 });
     /** Optional icon to render before the label. */
-    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
     /** Badge value to display. */
-    badge = input(...(ngDevMode ? [undefined, { debugName: "badge" }] : []));
+    badge = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "badge" }] : /* istanbul ignore next */ []));
     /** Color of the badge. */
-    badgeColor = input(...(ngDevMode ? [undefined, { debugName: "badgeColor" }] : []));
+    badgeColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "badgeColor" }] : /* istanbul ignore next */ []));
     /**
      * Hide the badge when the navbar is collapsed.
      *
      * @defaultValue false
      */
-    hideBadgeWhenCollapsed = input(false, { ...(ngDevMode ? { debugName: "hideBadgeWhenCollapsed" } : {}), transform: booleanAttribute });
+    hideBadgeWhenCollapsed = input(false, { ...(ngDevMode ? { debugName: "hideBadgeWhenCollapsed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Override the active state. Useful for action items. */
-    activeOverride = input(...(ngDevMode ? [undefined, { debugName: "activeOverride" }] : []));
+    activeOverride = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "activeOverride" }] : /* istanbul ignore next */ []));
+    /**
+     * Text label of this item.
+     * Consumed by the chip button to mirror the active item's label when collapsed.
+     */
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     navbar = inject(SI_NAVBAR_VERTICAL_NEXT);
     parent = inject(SiNavbarVerticalNextItemComponent, {
         skipSelf: true,
@@ -260,37 +328,37 @@ class SiNavbarVerticalNextItemComponent {
      * @internal
      */
     routerActive = toSignal(this.routerLinkActive?.isActiveChange ?? EMPTY, { initialValue: this.routerLinkActive?.isActive ?? false });
-    /** @internal */
-    elementRef = inject(ElementRef);
-    /** DOM portal relocated into the chip slot when collapsed.
+    /** `true` when the navbar is in chip mode (inline-collapse active and collapsed).
      * @internal
      */
-    hostPortal = new DomPortal(this.elementRef.nativeElement);
-    /** Signal mirror of the navbar's chip mode. `true` when inline-collapse is active and the navbar is collapsed.
-     * @internal
-     */
-    chipMode = computed(() => this.navbar.chipMode(), ...(ngDevMode ? [{ debugName: "chipMode" }] : []));
+    chipMode = this.navbar.chipMode;
     /**
      * Determines if the badge contains text-only content (not numeric)
      */
     textOnlyBadge = computed(() => {
         const badge = this.badge();
         return badge != null && badge !== '' ? typeof badge !== 'number' : false;
-    }, ...(ngDevMode ? [{ debugName: "textOnlyBadge" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textOnlyBadge" }] : /* istanbul ignore next */ []));
     /** `true` when the `active` CSS class should be applied to this item.
      *
-     * In chip mode, root-level items use `is-chip` styling instead of `active`, so the
-     * class is suppressed unless the item is a sub-item (`parent` is set) or it is a
-     * group trigger whose flyout is currently open.
-     * Outside chip mode the value equals `active()`.
+     * In chip mode the root-level items are hidden inside the collapsed nav until
+     * the user opens the chip menu, so their active state is suppressed to avoid
+     * flashing when the menu closes. Sub-items and open group triggers always
+     * reflect activity. While the chip menu is open, root-level active items must
+     * be highlighted so the user can locate the current page in the overlay.
      * @internal
      */
     showActive = computed(() => {
         if (this.chipMode()) {
+            if (this.navbar.chipMenuOpen()) {
+                return this.active();
+            }
             return (!!this.parent || this.group?.flyout()) && this.active();
         }
         return this.active();
-    }, ...(ngDevMode ? [{ debugName: "showActive" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showActive" }] : /* istanbul ignore next */ []));
     /**
      * Formats badge value to limit display to "+99" for numbers greater than 99
      */
@@ -303,15 +371,18 @@ class SiNavbarVerticalNextItemComponent {
             return badge > 99 ? '+99' : badge.toString();
         }
         return badge.toString();
-    }, ...(ngDevMode ? [{ debugName: "formattedBadge" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedBadge" }] : /* istanbul ignore next */ []));
     /** Active via override or router link — excludes group state.
      * @internal
      */
-    anyRouteActive = computed(() => !!this.activeOverride() || this.routerActive(), ...(ngDevMode ? [{ debugName: "anyRouteActive" }] : []));
+    anyRouteActive = computed(() => !!this.activeOverride() || this.routerActive(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anyRouteActive" }] : /* istanbul ignore next */ []));
     /** Own route is active, or a descendant route is active — includes group state, not gated on expansion.
      * @internal
      */
-    isOnActiveRoute = computed(() => this.anyRouteActive() || !!this.group?.active(), ...(ngDevMode ? [{ debugName: "isOnActiveRoute" }] : []));
+    isOnActiveRoute = computed(() => this.anyRouteActive() || !!this.group?.active(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOnActiveRoute" }] : /* istanbul ignore next */ []));
     /**
      * `true` when this item should reflect activity.
      *
@@ -323,15 +394,13 @@ class SiNavbarVerticalNextItemComponent {
      * when the active child cannot show it itself.
      */
     active = computed(() => this.anyRouteActive() ||
-        ((!this.group?.expanded() || this.navbar.collapsed()) && !!this.group?.active()), ...(ngDevMode ? [{ debugName: "active" }] : []));
+        ((!this.group?.expanded() || this.navbar.collapsed()) && !!this.group?.active()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     /** `true` when this is a root-level item on the active route (ungated, so the chip survives collapse↔expand).
      * @internal
      */
-    isActiveRootItem = computed(() => !this.parent && this.isOnActiveRoute(), ...(ngDevMode ? [{ debugName: "isActiveRootItem" }] : []));
-    /** `true` when this item is currently rendered as a chip in the inline-collapse bar.
-     * @internal
-     */
-    isChip = computed(() => this.navbar.chipPortalAttached() && this.isActiveRootItem(), ...(ngDevMode ? [{ debugName: "isChip" }] : []));
+    isActiveRootItem = computed(() => !this.parent && this.isOnActiveRoute(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isActiveRootItem" }] : /* istanbul ignore next */ []));
     ngOnInit() {
         if (this.group && this.active()) {
             this.group.expanded.set(true);
@@ -343,22 +412,18 @@ class SiNavbarVerticalNextItemComponent {
             this.navbar.itemTriggered();
         }
     }
-    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.focus-inside": "!chipMode() || !!parent", "class.navbar-vertical-item": "!isChip()", "class.active": "showActive()", "class.is-chip": "isChip()", "class.btn": "isChip()", "class.btn-primary-ghost": "isChip()", "class.hide-badge-collapsed": "hideBadgeWhenCollapsed()" } }, ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon [class]=\"isChip() ? 'icon' : 'icon-lg'\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">\n  <ng-content />\n</div>\n@if (!isChip() && !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-context(.dropdown-menu) :host(.navbar-vertical-item) .item-title{font-weight:400}:host-context(.nav-collapsed):not(.is-chip) .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):not(.is-chip) .badge.badge-text-only{color:transparent;font-size:0}:host-context(.nav-collapsed):not(.is-chip) :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):not(.is-chip).hide-badge-collapsed .badge{display:none}.badge{margin-inline:auto 0}:host(.is-chip).active:after{display:none}:host(.is-chip) .dropdown-caret{display:none}:host(.is-chip) .item-title{font-weight:400}:host-context(.chip).is-chip{border-start-start-radius:0;border-end-start-radius:0;inline-size:100%;min-inline-size:0}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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-lg\" [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-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-context(.dropdown-menu) :host(.navbar-vertical-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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", 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]': '!chipMode() || !!parent',
-                        '[class.navbar-vertical-item]': '!isChip()',
+            args: [{ selector: 'a[si-navbar-vertical-next-item], button[si-navbar-vertical-next-item]', imports: [SiIconComponent], host: {
+                        class: 'navbar-vertical-item focus-inside',
                         '[class.active]': 'showActive()',
-                        '[class.is-chip]': 'isChip()',
-                        '[class.btn]': 'isChip()',
-                        '[class.btn-primary-ghost]': 'isChip()',
                         '[class.hide-badge-collapsed]': 'hideBadgeWhenCollapsed()',
                         '(click)': 'triggered()'
-                    }, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon [class]=\"isChip() ? 'icon' : 'icon-lg'\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">\n  <ng-content />\n</div>\n@if (!isChip() && !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-context(.dropdown-menu) :host(.navbar-vertical-item) .item-title{font-weight:400}:host-context(.nav-collapsed):not(.is-chip) .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):not(.is-chip) .badge.badge-text-only{color:transparent;font-size:0}:host-context(.nav-collapsed):not(.is-chip) :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):not(.is-chip).hide-badge-collapsed .badge{display:none}.badge{margin-inline:auto 0}:host(.is-chip).active:after{display:none}:host(.is-chip) .dropdown-caret{display:none}:host(.is-chip) .item-title{font-weight:400}:host-context(.chip).is-chip{border-start-start-radius:0;border-end-start-radius:0;inline-size:100%;min-inline-size: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 }] }] } });
+                    }, 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\">{{ 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-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-context(.dropdown-menu) :host(.navbar-vertical-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 }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -377,13 +442,14 @@ class SiNavbarVerticalNextComponent {
      *
      * @defaultValue false
      */
-    collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    collapsed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     /**
      * Set to `true` if there are no icons
      *
      * @defaultValue false
      */
-    textOnly = input(false, { ...(ngDevMode ? { debugName: "textOnly" } : {}), transform: booleanAttribute });
+    textOnly = input(false, { ...(ngDevMode ? { debugName: "textOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Enables an alternative inline-collapse behavior.
      *
@@ -392,7 +458,7 @@ class SiNavbarVerticalNextComponent {
      *
      * @defaultValue false
      */
-    inlineCollapse = input(false, { ...(ngDevMode ? { debugName: "inlineCollapse" } : {}), transform: booleanAttribute });
+    inlineCollapse = input(false, { ...(ngDevMode ? { debugName: "inlineCollapse" } : /* istanbul ignore next */ {}), 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.
@@ -400,7 +466,7 @@ class SiNavbarVerticalNextComponent {
      *
      * @defaultValue false
      */
-    alwaysFlyout = input(false, { ...(ngDevMode ? { debugName: "alwaysFlyout" } : {}), transform: booleanAttribute });
+    alwaysFlyout = input(false, { ...(ngDevMode ? { debugName: "alwaysFlyout" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * List of vertical navigation items
      *
@@ -409,7 +475,7 @@ class SiNavbarVerticalNextComponent {
      *
      * @defaultValue true
      */
-    visible = input(true, { ...(ngDevMode ? { debugName: "visible" } : {}), transform: booleanAttribute });
+    visible = input(true, { ...(ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Text for the navbar toggle button used as `aria-label`.
      * The expanded state is communicated via `aria-expanded`.
@@ -419,12 +485,14 @@ class SiNavbarVerticalNextComponent {
      * t(() => $localize`:@@SI_NAVBAR_VERTICAL.TOGGLE:Toggle`)
      * ```
      */
-    toggleButtonText = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.TOGGLE:Toggle`), ...(ngDevMode ? [{ debugName: "toggleButtonText" }] : []));
+    toggleButtonText = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.TOGGLE:Toggle`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleButtonText" }] : /* istanbul ignore next */ []));
     /**
      * An optional stateId to uniquely identify a component instance.
      * Required for persistence of ui state.
      */
-    stateId = input(...(ngDevMode ? [undefined, { debugName: "stateId" }] : []));
+    stateId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "stateId" }] : /* istanbul ignore next */ []));
     /**
      * Label for the skip link to the vertical navbar
      *
@@ -433,7 +501,8 @@ class SiNavbarVerticalNextComponent {
      * t(() => $localize`:@@SI_NAVBAR_VERTICAL.SKIP_LINK.NAVIGATION_LABEL:Navigation`)
      * ```
      */
-    skipLinkNavigationLabel = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.SKIP_LINK.NAVIGATION_LABEL:Navigation`), ...(ngDevMode ? [{ debugName: "skipLinkNavigationLabel" }] : []));
+    skipLinkNavigationLabel = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.SKIP_LINK.NAVIGATION_LABEL:Navigation`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skipLinkNavigationLabel" }] : /* istanbul ignore next */ []));
     /**
      * Label for the skip link to main content
      *
@@ -442,35 +511,42 @@ class SiNavbarVerticalNextComponent {
      * t(() => $localize`:@@SI_NAVBAR_VERTICAL.SKIP_LINK.MAIN_LABEL:Main content`)
      * ```
      */
-    skipLinkMainContentLabel = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.SKIP_LINK.MAIN_LABEL:Main content`), ...(ngDevMode ? [{ debugName: "skipLinkMainContentLabel" }] : []));
+    skipLinkMainContentLabel = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.SKIP_LINK.MAIN_LABEL:Main content`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skipLinkMainContentLabel" }] : /* istanbul ignore next */ []));
     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" }] : []));
-    /** Stable ViewContainerRef inside <nav>, used to host flyout anchors when the chip DomPortal moves a trigger outside the nav.
+    ready = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    smallScreen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "smallScreen" }] : /* istanbul ignore next */ []));
+    /** Chip menu sub-component; present only while the parent template renders it.
      * @internal
      */
-    flyoutAnchorHost = viewChild('flyoutAnchorHost', { ...(ngDevMode ? { debugName: "flyoutAnchorHost" } : {}), read: ViewContainerRef });
-    /** All projected nav items, including descendants inside group templates.
+    chipMenu = viewChild(SiNavbarVerticalNextChipMenuComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipMenu" }] : /* istanbul ignore next */ []));
+    /** Projected items container; portaled into the chip menu overlay while it is open.
      * @internal
      */
-    items = contentChildren(SiNavbarVerticalNextItemComponent, { ...(ngDevMode ? { debugName: "items" } : {}), descendants: true });
-    /** The active root-level item; group triggers resolve for nested routes.
+    itemsComponent = contentChild(SiNavbarVerticalNextItemsComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemsComponent" }] : /* istanbul ignore next */ []));
+    /** All projected nav items, including descendants inside group templates.
      * @internal
      */
-    activeItem = computed(() => this.items().find(item => item.isActiveRootItem()), ...(ngDevMode ? [{ debugName: "activeItem" }] : []));
-    /** `true` when the active item's portal should occupy the chip slot.
+    items = contentChildren(SiNavbarVerticalNextItemComponent, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
+    /** The active root-level item; group triggers resolve for nested routes.
      * @internal
      */
-    chipPortalAttached = computed(() => this.inlineCollapse() && this.collapsed() && !!this.activeItem(), ...(ngDevMode ? [{ debugName: "chipPortalAttached" }] : []));
+    activeItem = linkedSignal({ ...(ngDevMode ? { debugName: "activeItem" } : /* istanbul ignore next */ {}), source: () => this.items().find(item => item.isActiveRootItem()),
+        computation: (current, previous) => current ?? previous?.value });
     /**
      * @defaultValue
      * ```
      * {}
      * ```
      */
-    uiStateExpandedItems = signal({}, ...(ngDevMode ? [{ debugName: "uiStateExpandedItems" }] : []));
+    uiStateExpandedItems = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uiStateExpandedItems" }] : /* istanbul ignore next */ []));
     // Indicates if the user prefers a collapsed navbar. Relevant for resizing.
     preferCollapse = false;
     toggleIcon = computed(() => {
@@ -478,15 +554,28 @@ class SiNavbarVerticalNextComponent {
             return this.collapsed() ? this.icons.elementLayoutPane2 : this.icons.elementLayoutPane2Right;
         }
         return this.collapsed() ? this.icons.elementDoubleRight : this.icons.elementDoubleLeft;
-    }, ...(ngDevMode ? [{ debugName: "toggleIcon" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleIcon" }] : /* istanbul ignore next */ []));
     /** `true` when inline-collapse is active and the nav is collapsed.
      * @internal
      */
-    chipMode = computed(() => this.inlineCollapse() && this.collapsed(), ...(ngDevMode ? [{ debugName: "chipMode" }] : []));
+    chipMode = computed(() => this.inlineCollapse() && this.collapsed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipMode" }] : /* istanbul ignore next */ []));
     /** `true` when groups should render as flyout overlays.
      * @internal
      */
-    flyoutMode = computed(() => this.alwaysFlyout() || this.collapsed(), ...(ngDevMode ? [{ debugName: "flyoutMode" }] : []));
+    flyoutMode = computed(() => this.alwaysFlyout() || this.collapsed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutMode" }] : /* istanbul ignore next */ []));
+    /** `true` when the chip menu overlay is open.
+     * @internal
+     */
+    chipMenuOpen = computed(() => this.chipMenu()?.open() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipMenuOpen" }] : /* istanbul ignore next */ []));
+    /** `true` when the chip is rendered and visually parked next to the toggle.
+     * @internal
+     */
+    hasVisibleChip = computed(() => this.chipMode() && !!this.activeItem(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasVisibleChip" }] : /* istanbul ignore next */ []));
     constructor() {
         this.breakpointObserver
             .observe(`(max-width: ${BOOTSTRAP_BREAKPOINTS.lgMinimum}px)`)
@@ -565,21 +654,28 @@ class SiNavbarVerticalNextComponent {
         if (this.smallScreen()) {
             this.collapsed.set(true);
         }
+        this.chipMenu()?.close();
     }
-    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 }, 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.visible": "visible()", "class.ready": "ready()" }, classAttribute: "si-layout-inner ready" }, providers: [{ provide: SI_NAVBAR_VERTICAL_NEXT, useExisting: SiNavbarVerticalNextComponent }], queries: [{ propertyName: "items", predicate: SiNavbarVerticalNextItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "flyoutAnchorHost", first: true, predicate: ["flyoutAnchorHost"], descendants: true, read: ViewContainerRef, 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=\"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\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon toggle-button\"\n          [class.btn-primary-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 (inlineCollapse() && activeItem(); as item) {\n      <div\n        class=\"chip\"\n        [class.chip-visible]=\"collapsed()\"\n        [attr.inert]=\"collapsed() ? null : ''\"\n        [attr.aria-hidden]=\"collapsed() ? null : 'true'\"\n      >\n        @if (chipPortalAttached()) {\n          <ng-container [cdkPortalOutlet]=\"item.hostPortal\" />\n        }\n      </div>\n      <ng-container #flyoutAnchorHost />\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(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):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(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}@media(max-width:575.98px){:host.nav-collapsed .mobile-drawer{background:var(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}}@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 + 24px)}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)) nav{inline-size:calc(1.5rem + 24px)}: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: 16px}@media(min-width:768px){:host(.nav-inline-collapse){--si-navbar-parked-inline-start: 32px}}:host(.nav-inline-collapse) nav{overflow:hidden}:host(.nav-inline-collapse) nav:before{content:\"\";position:absolute;inset:0;background:var(--element-base-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 + 16px)}: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(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 8px + 4px);inset-inline-start:calc(232px - (1lh + 16px));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) .chip{position:fixed;z-index:0;inset-block-start:calc(calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 16px);max-inline-size:calc(100vi - 2 * var(--si-navbar-parked-inline-start) - calc(1lh + 16px) - 1px);inset-inline-start:var(--si-navbar-parked-inline-start);opacity:0;transition:inset-inline-start calc(.5s * var(--element-animations-enabled, 1)) ease,opacity calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-inline-collapse) .chip:has(:focus-visible){z-index:1032}@starting-style{:host(.nav-inline-collapse) .chip.chip-visible{inset-inline-start:var(--si-navbar-parked-inline-start);opacity:0}}:host(.nav-inline-collapse) .chip.chip-visible{inset-inline-start:calc(var(--si-navbar-parked-inline-start) + calc(1lh + 16px) + 1px);opacity:1}:host(.nav-inline-collapse).nav-collapsed .toggle-placeholder{block-size:calc(1lh + 16px);margin-block-start:16px}:host(.nav-inline-collapse).nav-collapsed .toggle-button{inset-block-start:calc(calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 16px);inset-inline-start:var(--si-navbar-parked-inline-start)}:host(.nav-inline-collapse).nav-collapsed:has(.chip.chip-visible) .toggle-button{border-start-end-radius:0;border-end-end-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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=\"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\">\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(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):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(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}@media(max-width:575.98px){:host.nav-collapsed .mobile-drawer{background:var(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}}@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 + 24px)}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)) nav{inline-size:calc(1.5rem + 24px)}: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: 16px}@media(min-width:768px){:host(.nav-inline-collapse){--si-navbar-parked-inline-start: 32px}}:host(.nav-inline-collapse) nav{overflow:hidden}:host(.nav-inline-collapse) nav:before{content:\"\";position:absolute;inset:0;background:var(--element-base-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 + 16px)}: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(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 8px + 4px);inset-inline-start:calc(232px - (1lh + 16px));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 + 16px);margin-block-start:16px}:host(.nav-inline-collapse).nav-collapsed .toggle-button{inset-block-start:calc(calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 16px);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: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-navbar-vertical-next', imports: [PortalModule, SiIconComponent, SiSkipLinkTargetDirective, SiTranslatePipe], providers: [{ provide: SI_NAVBAR_VERTICAL_NEXT, useExisting: SiNavbarVerticalNextComponent }], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'si-navbar-vertical-next', imports: [
+                        SiIconComponent,
+                        SiNavbarVerticalNextChipMenuComponent,
+                        SiSkipLinkTargetDirective,
+                        SiTranslatePipe
+                    ], providers: [{ provide: SI_NAVBAR_VERTICAL_NEXT, useExisting: SiNavbarVerticalNextComponent }], host: {
                         class: 'si-layout-inner ready',
                         '[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()'
-                    }, 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\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon toggle-button\"\n          [class.btn-primary-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 (inlineCollapse() && activeItem(); as item) {\n      <div\n        class=\"chip\"\n        [class.chip-visible]=\"collapsed()\"\n        [attr.inert]=\"collapsed() ? null : ''\"\n        [attr.aria-hidden]=\"collapsed() ? null : 'true'\"\n      >\n        @if (chipPortalAttached()) {\n          <ng-container [cdkPortalOutlet]=\"item.hostPortal\" />\n        }\n      </div>\n      <ng-container #flyoutAnchorHost />\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(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):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(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}@media(max-width:575.98px){:host.nav-collapsed .mobile-drawer{background:var(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}}@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 + 24px)}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)) nav{inline-size:calc(1.5rem + 24px)}: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: 16px}@media(min-width:768px){:host(.nav-inline-collapse){--si-navbar-parked-inline-start: 32px}}:host(.nav-inline-collapse) nav{overflow:hidden}:host(.nav-inline-collapse) nav:before{content:\"\";position:absolute;inset:0;background:var(--element-base-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 + 16px)}: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(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 8px + 4px);inset-inline-start:calc(232px - (1lh + 16px));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) .chip{position:fixed;z-index:0;inset-block-start:calc(calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 16px);max-inline-size:calc(100vi - 2 * var(--si-navbar-parked-inline-start) - calc(1lh + 16px) - 1px);inset-inline-start:var(--si-navbar-parked-inline-start);opacity:0;transition:inset-inline-start calc(.5s * var(--element-animations-enabled, 1)) ease,opacity calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-inline-collapse) .chip:has(:focus-visible){z-index:1032}@starting-style{:host(.nav-inline-collapse) .chip.chip-visible{inset-inline-start:var(--si-navbar-parked-inline-start);opacity:0}}:host(.nav-inline-collapse) .chip.chip-visible{inset-inline-start:calc(var(--si-navbar-parked-inline-start) + calc(1lh + 16px) + 1px);opacity:1}:host(.nav-inline-collapse).nav-collapsed .toggle-placeholder{block-size:calc(1lh + 16px);margin-block-start:16px}:host(.nav-inline-collapse).nav-collapsed .toggle-button{inset-block-start:calc(calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 16px);inset-inline-start:var(--si-navbar-parked-inline-start)}:host(.nav-inline-collapse).nav-collapsed:has(.chip.chip-visible) .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 }] }], flyoutAnchorHost: [{ type: i0.ViewChild, args: ['flyoutAnchorHost', { ...{ read: ViewContainerRef }, isSignal: true }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SiNavbarVerticalNextItemComponent), { ...{
+                    }, 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\">\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(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):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(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}@media(max-width:575.98px){:host.nav-collapsed .mobile-drawer{background:var(--element-base-1);box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}}@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 + 24px)}:host:where(:not(.nav-text-only):not(.nav-inline-collapse)) nav{inline-size:calc(1.5rem + 24px)}: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: 16px}@media(min-width:768px){:host(.nav-inline-collapse){--si-navbar-parked-inline-start: 32px}}:host(.nav-inline-collapse) nav{overflow:hidden}:host(.nav-inline-collapse) nav:before{content:\"\";position:absolute;inset:0;background:var(--element-base-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 + 16px)}: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(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 8px + 4px);inset-inline-start:calc(232px - (1lh + 16px));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 + 16px);margin-block-start:16px}:host(.nav-inline-collapse).nav-collapsed .toggle-button{inset-block-start:calc(calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px)) + 16px);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), { ...{
                             descendants: true
                         }, isSignal: true }] }] } });
 
@@ -592,12 +688,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * We need a component to attach the stylesheet
  */
 class SiNavbarVerticalNextDividerComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.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(--element-ui-4);margin-block:6px;margin-inline:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", 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(--element-ui-4);margin-block:6px;margin-inline:12px}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextDividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextDividerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-navbar-vertical-next-divider', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;block-size:1px;background-color:var(--element-ui-4);margin-block:6px;margin-inline:12px}\n"] }]
+            args: [{ selector: 'si-navbar-vertical-next-divider', template: '', styles: [":host{display:block;block-size:1px;background-color:var(--element-ui-4);margin-block:6px;margin-inline:12px}\n"] }]
         }] });
 
 /**
@@ -611,12 +707,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * @experimental
  */
 class SiNavbarVerticalNextFooterItemsComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextFooterItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.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:8px}:host-context(.nav-collapsed){display:none}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:block}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextFooterItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", 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:8px}:host-context(.nav-collapsed){display:none}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:block}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextFooterItemsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextFooterItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-navbar-vertical-next-footer-items', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;overflow-x:hidden;margin-block-start:auto;padding-block-end:8px}: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:8px}:host-context(.nav-collapsed){display:none}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:block}}\n"] }]
         }] });
 
 /**
@@ -630,7 +726,8 @@ class SiNavbarVerticalNextGroupComponent {
     routerLinkActive = inject(RouterLinkActive, { optional: true });
     visible = computed(() => {
         return this.groupTrigger.flyout() || (!this.navbar.collapsed() && this.groupTrigger.expanded());
-    }, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     constructor() {
         this.routerLinkActive?.isActiveChange
             .pipe(takeUntilDestroyed())
@@ -639,8 +736,8 @@ class SiNavbarVerticalNextGroupComponent {
     close() {
         this.groupTrigger.hideFlyout();
     }
-    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()) {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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"
@@ -653,9 +750,9 @@ class SiNavbarVerticalNextGroupComponent {
         <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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  }`, 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-navbar-vertical-next-group', imports: [CdkTrapFocus], template: `@if (visible()) {
     @let flyout = groupTrigger.flyout();
@@ -670,7 +767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
         <ng-content />
       </div>
     </div>
-  }`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+  }`, host: {
                         role: 'group',
                         '[id]': 'groupTrigger.groupId',
                         '[attr.aria-labelledby]': 'groupTrigger.id',
@@ -686,31 +783,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 /** @experimental */
 class SiNavbarVerticalNextHeaderComponent {
     navbar = inject(SI_NAVBAR_VERTICAL_NEXT);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarVerticalNextHeaderComponent, isStandalone: true, selector: "si-navbar-vertical-next-header", host: { attributes: { "animate.enter": "component-enter" }, properties: { "class.collapsed": "navbar.collapsed()" } }, ngImport: i0, template: `
-    @if (!navbar.collapsed()) {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SiNavbarVerticalNextHeaderComponent, isStandalone: true, selector: "si-navbar-vertical-next-header", host: { attributes: { "animate.enter": "component-enter" }, properties: { "class.collapsed": "navbar.collapsed() && !navbar.chipMenuOpen()", "class.chip-mode": "navbar.chipMode()" } }, ngImport: i0, template: `
+    @if (!navbar.collapsed() || navbar.chipMenuOpen()) {
       <div class="title si-h5 text-secondary text-truncate p-5" animate.leave="title-leave">
         <ng-content />
       </div>
     } @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 + 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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}: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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-navbar-vertical-next-header', imports: [SiNavbarVerticalNextDividerComponent], template: `
-    @if (!navbar.collapsed()) {
+    @if (!navbar.collapsed() || navbar.chipMenuOpen()) {
       <div class="title si-h5 text-secondary text-truncate p-5" animate.leave="title-leave">
         <ng-content />
       </div>
     } @else {
       <si-navbar-vertical-next-divider class="divider" animate.leave="divider-leave" />
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.collapsed]': 'navbar.collapsed()',
+  `, host: {
+                        '[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 + 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"] }]
+                    }, 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}:host.chip-mode .title{transition:none}.divider{flex:1;margin-block:0}.divider.divider-leave{opacity:0;transition-delay:0s}\n"] }]
         }] });
 
 /**
@@ -725,89 +823,36 @@ class SiNavbarVerticalNextSearchComponent {
      *
      * @defaultValue
      * ```
-     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.SEARCH_PLACEHOLDER:Search ...`)
+     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.SEARCH_PLACEHOLDER:Search…`)
      * ```
      */
-    placeholder = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.SEARCH_PLACEHOLDER:Search ...`), ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    placeholder = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.SEARCH_PLACEHOLDER:Search…`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     /**
      * Debounce time for the search input
      * @defaultValue 400
      */
-    debounceTime = input(400, ...(ngDevMode ? [{ debugName: "debounceTime" }] : []));
+    debounceTime = input(400, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "debounceTime" }] : /* istanbul ignore next */ []));
     /**
      * Output for search bar input
      */
     searchChange = output();
     navbar = inject(SI_NAVBAR_VERTICAL_NEXT);
-    searchBar = viewChild.required(SiSearchBarComponent);
+    searchBar = viewChild.required(SiSearchBarComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchBar" }] : /* istanbul ignore next */ []));
     expandForSearch() {
         this.navbar.expand();
         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 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: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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SiNavbarVerticalNextSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", 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 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", 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 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: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"] }]
+            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 bg-base-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: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 }] }] } });
 
-/**
- * Copyright (c) Siemens 2016 - 2026
- * SPDX-License-Identifier: MIT
- */
-/** @experimental */
-class SiNavbarVerticalNextModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextModule, imports: [SiNavbarVerticalNextComponent,
-            SiNavbarVerticalNextDividerComponent,
-            SiNavbarVerticalNextFooterItemsComponent,
-            SiNavbarVerticalNextGroupComponent,
-            SiNavbarVerticalNextGroupTriggerDirective,
-            SiNavbarVerticalNextHeaderComponent,
-            SiNavbarVerticalNextItemComponent,
-            SiNavbarVerticalNextItemsComponent,
-            SiNavbarVerticalNextSearchComponent], exports: [SiNavbarVerticalNextComponent,
-            SiNavbarVerticalNextDividerComponent,
-            SiNavbarVerticalNextFooterItemsComponent,
-            SiNavbarVerticalNextGroupComponent,
-            SiNavbarVerticalNextGroupTriggerDirective,
-            SiNavbarVerticalNextHeaderComponent,
-            SiNavbarVerticalNextItemComponent,
-            SiNavbarVerticalNextItemsComponent,
-            SiNavbarVerticalNextSearchComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextModule, imports: [SiNavbarVerticalNextComponent,
-            SiNavbarVerticalNextItemComponent,
-            SiNavbarVerticalNextSearchComponent] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        SiNavbarVerticalNextComponent,
-                        SiNavbarVerticalNextDividerComponent,
-                        SiNavbarVerticalNextFooterItemsComponent,
-                        SiNavbarVerticalNextGroupComponent,
-                        SiNavbarVerticalNextGroupTriggerDirective,
-                        SiNavbarVerticalNextHeaderComponent,
-                        SiNavbarVerticalNextItemComponent,
-                        SiNavbarVerticalNextItemsComponent,
-                        SiNavbarVerticalNextSearchComponent
-                    ],
-                    exports: [
-                        SiNavbarVerticalNextComponent,
-                        SiNavbarVerticalNextDividerComponent,
-                        SiNavbarVerticalNextFooterItemsComponent,
-                        SiNavbarVerticalNextGroupComponent,
-                        SiNavbarVerticalNextGroupTriggerDirective,
-                        SiNavbarVerticalNextHeaderComponent,
-                        SiNavbarVerticalNextItemComponent,
-                        SiNavbarVerticalNextItemsComponent,
-                        SiNavbarVerticalNextSearchComponent
-                    ]
-                }]
-        }] });
-
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
@@ -817,5 +862,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SiNavbarVerticalNextComponent, SiNavbarVerticalNextDividerComponent, SiNavbarVerticalNextFooterItemsComponent, SiNavbarVerticalNextGroupComponent, SiNavbarVerticalNextGroupTriggerDirective, SiNavbarVerticalNextHeaderComponent, SiNavbarVerticalNextItemComponent, SiNavbarVerticalNextItemsComponent, SiNavbarVerticalNextModule, SiNavbarVerticalNextSearchComponent };
+export { SiNavbarVerticalNextChipMenuComponent, SiNavbarVerticalNextComponent, SiNavbarVerticalNextDividerComponent, SiNavbarVerticalNextFooterItemsComponent, SiNavbarVerticalNextGroupComponent, SiNavbarVerticalNextGroupTriggerDirective, SiNavbarVerticalNextHeaderComponent, SiNavbarVerticalNextItemComponent, SiNavbarVerticalNextItemsComponent, SiNavbarVerticalNextSearchComponent };
 //# sourceMappingURL=siemens-element-ng-navbar-vertical-next.mjs.map