@siemens/element-ng 49.6.0 → 49.8.0

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

@@ -1,21 +1,205 @@
-import { BreakpointObserver } from '@angular/cdk/layout';
-import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, InjectionToken, input, model, signal, inject, ViewContainerRef, Injector, computed, HostListener, Directive, ChangeDetectionStrategy, viewChildren, booleanAttribute, output, viewChild, HostBinding, NgModule } from '@angular/core';
+import { ChangeDetectionStrategy, Component, InjectionToken, model, input, booleanAttribute, inject, signal, linkedSignal, ViewContainerRef, Injector, computed, effect, untracked, Directive, output, viewChild, NgModule } from '@angular/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { RouterLinkActive, ActivatedRoute, RouterLink } from '@angular/router';
-import { elementDown2, elementSearch, elementDoubleRight, elementDoubleLeft } from '@siemens/element-icons';
+import { elementDoubleRight, elementDoubleLeft, elementDown2, elementSearch } from '@siemens/element-icons';
 import { SI_UI_STATE_SERVICE } from '@siemens/element-ng/common';
 import { addIcons, SiIconComponent } from '@siemens/element-ng/icon';
 import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
-import { SiSearchBarComponent } from '@siemens/element-ng/search-bar';
 import { SiSkipLinkTargetDirective } from '@siemens/element-ng/skip-links';
-import { SiTooltipDirective } from '@siemens/element-ng/tooltip';
-import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
+import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { RouterLinkActive } from '@angular/router';
 import { SiLinkDirective } from '@siemens/element-ng/link';
+import { SiSearchBarComponent } from '@siemens/element-ng/search-bar';
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Content slot for navbar items inside `si-navbar-vertical-next`.
+ * Place `<a si-navbar-vertical-next-item>` and `<button si-navbar-vertical-next-item>` elements inside this component.
+ * @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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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"] }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/** @experimental */
+const SI_NAVBAR_VERTICAL_NEXT = new InjectionToken('SI_NAVBAR_VERTICAL_NEXT');
+
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+/** @experimental */
+class SiNavbarVerticalNextComponent {
+    icons = addIcons({ elementDoubleLeft, elementDoubleRight });
+    /**
+     * Whether the navbar-vertical is collapsed.
+     *
+     * @defaultValue false
+     */
+    collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    /**
+     * Set to `true` if there are no icons
+     *
+     * @defaultValue false
+     */
+    textOnly = input(false, { ...(ngDevMode ? { debugName: "textOnly" } : {}), transform: booleanAttribute });
+    /**
+     * List of vertical navigation items
+     *
+     * @deprecated Use the template-based declarative API with content projection instead. Use `<si-navbar-vertical-next-items>` and
+     * `<a si-navbar-vertical-next-item>` / `<button si-navbar-vertical-next-item>` instead.
+     *
+     * @defaultValue true
+     */
+    visible = input(true, { ...(ngDevMode ? { debugName: "visible" } : {}), transform: booleanAttribute });
+    /**
+     * Text for the navbar toggle button used as `aria-label`.
+     * The expanded state is communicated via `aria-expanded`.
+     *
+     * @defaultValue
+     * ```
+     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.TOGGLE:Toggle`)
+     * ```
+     */
+    toggleButtonText = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.TOGGLE:Toggle`), ...(ngDevMode ? [{ debugName: "toggleButtonText" }] : []));
+    /**
+     * An optional stateId to uniquely identify a component instance.
+     * Required for persistence of ui state.
+     */
+    stateId = input(...(ngDevMode ? [undefined, { debugName: "stateId" }] : []));
+    /**
+     * Label for the skip link to the vertical navbar
+     *
+     * @defaultValue
+     * ```
+     * 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" }] : []));
+    /**
+     * Label for the skip link to main content
+     *
+     * @defaultValue
+     * ```
+     * 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" }] : []));
+    uiStateService = inject(SI_UI_STATE_SERVICE, { optional: true });
+    breakpointObserver = inject(BreakpointObserver);
+    smallScreen = signal(false, ...(ngDevMode ? [{ debugName: "smallScreen" }] : []));
+    /**
+     * @defaultValue
+     * ```
+     * {}
+     * ```
+     */
+    uiStateExpandedItems = signal({}, ...(ngDevMode ? [{ debugName: "uiStateExpandedItems" }] : []));
+    // Indicates if the user prefers a collapsed navbar. Relevant for resizing.
+    preferCollapse = false;
+    constructor() {
+        this.breakpointObserver
+            .observe(`(max-width: ${BOOTSTRAP_BREAKPOINTS.lgMinimum}px)`)
+            .pipe(takeUntilDestroyed())
+            .subscribe(({ matches }) => {
+            this.collapsed.set(matches || this.preferCollapse);
+            this.smallScreen.set(matches);
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes.collapsed) {
+            this.preferCollapse = this.collapsed();
+        }
+    }
+    ngOnInit() {
+        const stateId = this.stateId();
+        if (this.uiStateService && stateId) {
+            this.uiStateService.load(stateId).then(uiState => {
+                if (uiState) {
+                    this.preferCollapse = uiState.preferCollapse;
+                    this.collapsed.set(this.smallScreen() ? this.collapsed() : this.preferCollapse);
+                    if (uiState.expandedItems) {
+                        this.uiStateExpandedItems.set(uiState.expandedItems);
+                    }
+                }
+            });
+        }
+    }
+    toggleCollapse() {
+        if (this.collapsed()) {
+            this.expand();
+        }
+        else {
+            this.collapse();
+        }
+    }
+    /** Expands the vertical navbar. */
+    expand() {
+        this.collapsed.set(false);
+        if (!this.smallScreen()) {
+            this.preferCollapse = this.collapsed();
+        }
+        this.saveUIState();
+    }
+    /** Collapses the vertical navbar. */
+    collapse() {
+        this.collapsed.set(true);
+        if (!this.smallScreen()) {
+            this.preferCollapse = this.collapsed();
+        }
+        this.saveUIState();
+    }
+    /** @internal */
+    groupStateChanged(stateId, expanded) {
+        if (stateId) {
+            this.uiStateExpandedItems.update(items => ({ ...items, [stateId]: expanded }));
+        }
+        this.saveUIState();
+    }
+    saveUIState() {
+        const stateId = this.stateId();
+        if (!this.uiStateService || !stateId) {
+            return;
+        }
+        this.uiStateService.save(stateId, {
+            preferCollapse: this.preferCollapse,
+            expandedItems: this.uiStateExpandedItems()
+        });
+    }
+    /** @internal */
+    itemTriggered() {
+        if (this.smallScreen()) {
+            this.collapsed.set(true);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarVerticalNextComponent, isStandalone: true, selector: "si-navbar-vertical-next", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, textOnly: { classPropertyName: "textOnly", publicName: "textOnly", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, toggleButtonText: { classPropertyName: "toggleButtonText", publicName: "toggleButtonText", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null }, skipLinkNavigationLabel: { classPropertyName: "skipLinkNavigationLabel", publicName: "skipLinkNavigationLabel", isSignal: true, isRequired: false, transformFunction: null }, skipLinkMainContentLabel: { classPropertyName: "skipLinkMainContentLabel", publicName: "skipLinkMainContentLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { properties: { "class.nav-collapsed": "collapsed()", "class.nav-text-only": "textOnly()", "class.visible": "visible()" }, classAttribute: "si-layout-inner ready" }, providers: [{ provide: SI_NAVBAR_VERTICAL_NEXT, useExisting: SiNavbarVerticalNextComponent }], usesOnChanges: true, ngImport: i0, template: "@if (visible()) {\n  @if (smallScreen() && !collapsed()) {\n    <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleCollapse()\"></div>\n  }\n  <nav\n    tabindex=\"-1\"\n    class=\"bg-base-1 focus-sub-inside\"\n    [class.expanded]=\"!collapsed()\"\n    [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n    [class.text-only]=\"textOnly()\"\n  >\n    <div class=\"collapse-toggle ms-auto\">\n      <div class=\"mobile-drawer focus-inside navbar-vertical-no-collapse\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-tertiary-ghost\"\n          [attr.aria-label]=\"toggleButtonText() | translate\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon\n            class=\"flip-rtl\"\n            [icon]=\"collapsed() ? icons.elementDoubleRight : icons.elementDoubleLeft\"\n          />\n        </button>\n      </div>\n    </div>\n    <ng-content select=\"si-navbar-vertical-next-search\" />\n    <ng-content select=\"si-navbar-vertical-next-items\" />\n    <ng-content select=\"si-navbar-vertical-next-footer-items\" />\n  </nav>\n}\n<main\n  class=\"si-layout-inner focus-none\"\n  tabindex=\"-1\"\n  [siSkipLinkTarget]=\"skipLinkMainContentLabel()\"\n>\n  <ng-content />\n</main>\n", styles: [":host{display:block;transition:padding-inline-start calc(.5s * var(--element-animations-enabled, 1));--si-layout-header-first-element-offset: 40px}:host.ready:not(.visible){padding-inline-start:0!important}nav{display:flex;flex-direction:column;position:fixed;z-index:1031;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-start:0;inline-size:0;transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-collapsed) nav{z-index:1030}nav.expanded{inline-size:240px}.mobile-drawer{display:block;text-align:end;border:0;inline-size:calc(1.5rem + 24px);color:var(--element-text-primary);padding-block:4px;padding-inline:8px;margin-block-start:8px;border-start-end-radius:var(--element-radius-2);border-end-end-radius:var(--element-radius-2);transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease,background-color calc(.5s * var(--element-animations-enabled, 1)) ease,box-shadow calc(.5s * var(--element-animations-enabled, 1)) ease}:host(:not(.nav-collapsed)) .mobile-drawer{inline-size:240px}:host.nav-collapsed .mobile-drawer{border:0;color:var(--element-text-primary);background:var(--element-base-1);text-align:end;box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}.modal-backdrop{z-index:1031;transition:opacity calc(.15s * var(--element-animations-enabled, 1)) linear;opacity:1}@starting-style{.modal-backdrop{opacity:0}}.modal-backdrop.backdrop-leave{opacity:0}@media(min-width:576px){:host:not(.nav-text-only),:host:not(.nav-collapsed){--si-layout-header-first-element-offset: 0}:host:not(.nav-text-only){padding-inline-start:calc(1.5rem + 24px)}:host:not(.nav-text-only) .mobile-drawer{background:transparent;box-shadow:none}:host:not(.nav-text-only) nav{inline-size:calc(1.5rem + 24px)}:host:not(.nav-text-only) nav.expanded{inline-size:240px}}@media(min-width:992px){:host:not(.nav-collapsed){padding-inline-start:240px}}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "directive", type: SiSkipLinkTargetDirective, selector: "[siSkipLinkTarget]", inputs: ["siSkipLinkTarget"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'si-navbar-vertical-next', imports: [SiIconComponent, SiSkipLinkTargetDirective, SiTranslatePipe], providers: [{ provide: SI_NAVBAR_VERTICAL_NEXT, useExisting: SiNavbarVerticalNextComponent }], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'si-layout-inner ready',
+                        '[class.nav-collapsed]': 'collapsed()',
+                        '[class.nav-text-only]': 'textOnly()',
+                        '[class.visible]': 'visible()'
+                    }, template: "@if (visible()) {\n  @if (smallScreen() && !collapsed()) {\n    <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleCollapse()\"></div>\n  }\n  <nav\n    tabindex=\"-1\"\n    class=\"bg-base-1 focus-sub-inside\"\n    [class.expanded]=\"!collapsed()\"\n    [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n    [class.text-only]=\"textOnly()\"\n  >\n    <div class=\"collapse-toggle ms-auto\">\n      <div class=\"mobile-drawer focus-inside navbar-vertical-no-collapse\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-tertiary-ghost\"\n          [attr.aria-label]=\"toggleButtonText() | translate\"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon\n            class=\"flip-rtl\"\n            [icon]=\"collapsed() ? icons.elementDoubleRight : icons.elementDoubleLeft\"\n          />\n        </button>\n      </div>\n    </div>\n    <ng-content select=\"si-navbar-vertical-next-search\" />\n    <ng-content select=\"si-navbar-vertical-next-items\" />\n    <ng-content select=\"si-navbar-vertical-next-footer-items\" />\n  </nav>\n}\n<main\n  class=\"si-layout-inner focus-none\"\n  tabindex=\"-1\"\n  [siSkipLinkTarget]=\"skipLinkMainContentLabel()\"\n>\n  <ng-content />\n</main>\n", styles: [":host{display:block;transition:padding-inline-start calc(.5s * var(--element-animations-enabled, 1));--si-layout-header-first-element-offset: 40px}:host.ready:not(.visible){padding-inline-start:0!important}nav{display:flex;flex-direction:column;position:fixed;z-index:1031;inset-block-start:calc(1.5rem + 25px + var(--element-titlebar-spacing, 0px) + var(--element-system-banner-spacing, 0px));inset-block-end:0;inset-inline-start:0;inline-size:0;transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease}:host(.nav-collapsed) nav{z-index:1030}nav.expanded{inline-size:240px}.mobile-drawer{display:block;text-align:end;border:0;inline-size:calc(1.5rem + 24px);color:var(--element-text-primary);padding-block:4px;padding-inline:8px;margin-block-start:8px;border-start-end-radius:var(--element-radius-2);border-end-end-radius:var(--element-radius-2);transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease,background-color calc(.5s * var(--element-animations-enabled, 1)) ease,box-shadow calc(.5s * var(--element-animations-enabled, 1)) ease}:host(:not(.nav-collapsed)) .mobile-drawer{inline-size:240px}:host.nav-collapsed .mobile-drawer{border:0;color:var(--element-text-primary);background:var(--element-base-1);text-align:end;box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}.modal-backdrop{z-index:1031;transition:opacity calc(.15s * var(--element-animations-enabled, 1)) linear;opacity:1}@starting-style{.modal-backdrop{opacity:0}}.modal-backdrop.backdrop-leave{opacity:0}@media(min-width:576px){:host:not(.nav-text-only),:host:not(.nav-collapsed){--si-layout-header-first-element-offset: 0}:host:not(.nav-text-only){padding-inline-start:calc(1.5rem + 24px)}:host:not(.nav-text-only) .mobile-drawer{background:transparent;box-shadow:none}:host:not(.nav-text-only) nav{inline-size:calc(1.5rem + 24px)}:host:not(.nav-text-only) nav.expanded{inline-size:240px}}@media(min-width:992px){:host:not(.nav-collapsed){padding-inline-start:240px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], textOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "textOnly", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], toggleButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleButtonText", required: false }] }], stateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateId", required: false }] }], skipLinkNavigationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkNavigationLabel", required: false }] }], skipLinkMainContentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkMainContentLabel", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -38,8 +222,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-/** @experimental */
-const SI_NAVBAR_VERTICAL_NEXT = new InjectionToken('SI_NAVBAR_VERTICAL_NEXT');
+/**
+ * Content slot for footer items inside `si-navbar-vertical-next`.
+ * Place `<a si-navbar-vertical-next-item>` and `<button si-navbar-vertical-next-item>` elements inside this component.
+ * Footer items are pinned to the bottom of the navbar.
+ * @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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", 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"] }]
+        }] });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -50,8 +246,8 @@ const SI_NAVBAR_VERTICAL_NEXT = new InjectionToken('SI_NAVBAR_VERTICAL_NEXT');
  * Otherwise, without aria-owns, screen reader will announce the leaving of the navbar when moving to the flyout.
  * Aria-owns cannot be put directly on the trigger
  * as chrome will include the flyout children in the a11y label of the trigger.
+ * @experimental
  */
-/** @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 });
@@ -72,9 +268,16 @@ class SiNavbarVerticalNextGroupTriggerDirective {
     groupId = `si-navbar-vertical-next-group-${SiNavbarVerticalNextGroupTriggerDirective.idCounter++}`;
     id = `${this.groupId}-trigger`;
     groupTemplate = input.required({ ...(ngDevMode ? { debugName: "groupTemplate" } : {}), alias: 'siNavbarVerticalNextGroupTriggerFor' });
-    groupData = input(...(ngDevMode ? [undefined, { debugName: "groupData" }] : []));
     stateId = input(...(ngDevMode ? [undefined, { debugName: "stateId" }] : []));
-    expanded = model.required(...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    /** @defaultValue false */
+    expanded = linkedSignal({ ...(ngDevMode ? { debugName: "expanded" } : {}), source: () => {
+            const stateId = this.stateId();
+            if (!stateId) {
+                return undefined;
+            }
+            return this.navbar.uiStateExpandedItems()[stateId];
+        },
+        computation: source => source ?? false });
     /** @internal */
     flyout = signal(false, ...(ngDevMode ? [{ debugName: "flyout" }] : []));
     /** @internal */
@@ -95,7 +298,19 @@ class SiNavbarVerticalNextGroupTriggerDirective {
     });
     groupView;
     flyoutAnchorComponentRef;
-    templatePortal = computed(() => new TemplatePortal(this.groupTemplate(), this.viewContainer, this.groupData(), this.injector), ...(ngDevMode ? [{ debugName: "templatePortal" }] : []));
+    templatePortal = computed(() => new TemplatePortal(this.groupTemplate(), this.viewContainer, undefined, this.injector), ...(ngDevMode ? [{ debugName: "templatePortal" }] : []));
+    constructor() {
+        // Sync expanded state from navbar UIState when it loads
+        effect(() => {
+            const stateId = this.stateId();
+            if (!stateId)
+                return;
+            const state = this.navbar.uiStateExpandedItems()[stateId];
+            if (state !== undefined) {
+                untracked(() => this.expanded.set(state));
+            }
+        });
+    }
     ngOnInit() {
         this.attachInline();
     }
@@ -116,7 +331,7 @@ class SiNavbarVerticalNextGroupTriggerDirective {
         }
         else {
             this.expanded.set(!this.expanded());
-            this.navbar.groupTriggered();
+            this.navbar.groupStateChanged(this.stateId(), this.expanded());
         }
     }
     toggleFlyout() {
@@ -131,7 +346,7 @@ class SiNavbarVerticalNextGroupTriggerDirective {
     attachInline() {
         this.overlayRef.detach();
         this.groupView?.destroy(); // we need ?. for first attachment
-        this.groupView = this.viewContainer.createEmbeddedView(this.groupTemplate(), this.groupData(), {
+        this.groupView = this.viewContainer.createEmbeddedView(this.groupTemplate(), undefined, {
             injector: this.injector
         });
     }
@@ -145,7 +360,7 @@ class SiNavbarVerticalNextGroupTriggerDirective {
             .subscribe(() => this.hideFlyout());
     }
     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 }, groupData: { classPropertyName: "groupData", publicName: "groupData", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { listeners: { "click": "triggered()" }, properties: { "id": "id", "class.show": "expanded()", "attr.aria-controls": "groupId", "attr.aria-expanded": "expanded()" }, classAttribute: "dropdown-toggle" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiNavbarVerticalNextGroupTriggerDirective, isStandalone: true, selector: "button[siNavbarVerticalNextGroupTriggerFor]", inputs: { groupTemplate: { classPropertyName: "groupTemplate", publicName: "siNavbarVerticalNextGroupTriggerFor", isSignal: true, isRequired: true, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "triggered()" }, properties: { "id": "id", "class.show": "expanded()", "attr.aria-controls": "groupId", "attr.aria-expanded": "expanded()" }, classAttribute: "dropdown-toggle" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextGroupTriggerDirective, decorators: [{
             type: Directive,
@@ -156,13 +371,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[id]': 'id',
                         '[class.show]': 'expanded()',
                         '[attr.aria-controls]': 'groupId',
-                        '[attr.aria-expanded]': 'expanded()'
+                        '[attr.aria-expanded]': 'expanded()',
+                        '(click)': 'triggered()'
                     }
                 }]
-        }], propDecorators: { groupTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "siNavbarVerticalNextGroupTriggerFor", required: true }] }], groupData: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupData", required: false }] }], stateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateId", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: true }] }, { type: i0.Output, args: ["expandedChange"] }], triggered: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { groupTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "siNavbarVerticalNextGroupTriggerFor", required: true }] }], stateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateId", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -219,12 +432,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         role: 'group',
                         '[id]': 'groupTrigger.groupId',
                         '[attr.aria-labelledby]': 'groupTrigger.id',
-                        'animate.enter': 'component-enter'
+                        'animate.enter': 'component-enter',
+                        '(keydown.escape)': 'close()'
                     }, styles: [":host.component-enter .inline-group{transition:none}.inline-group{display:grid;transition-property:grid-template-rows,opacity;transition-duration:calc(.5s * var(--element-animations-enabled, 1));transition-timing-function:ease;opacity:1;grid-template-rows:1fr;overflow:hidden}@starting-style{.inline-group{grid-template-rows:0fr;opacity:0}}.inline-group.group-leave{grid-template-rows:0fr;opacity:0}.dropdown-menu{display:block;position:static}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { close: [{
-                type: HostListener,
-                args: ['keydown.escape']
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
@@ -267,7 +478,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 /** @experimental */
 class SiNavbarVerticalNextItemComponent {
     icons = addIcons({ elementDown2 });
-    item = input.required({ ...(ngDevMode ? { debugName: "item" } : {}), alias: 'si-navbar-vertical-next-item' });
+    /** Optional icon to render before the label. */
+    icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+    /** Badge value to display. */
+    badge = input(...(ngDevMode ? [undefined, { debugName: "badge" }] : []));
+    /** Color of the badge. */
+    badgeColor = input(...(ngDevMode ? [undefined, { debugName: "badgeColor" }] : []));
+    /**
+     * Hide the badge when the navbar is collapsed.
+     *
+     * @defaultValue false
+     */
+    hideBadgeWhenCollapsed = input(false, { ...(ngDevMode ? { debugName: "hideBadgeWhenCollapsed" } : {}), transform: booleanAttribute });
+    /** Override the active state. Useful for action items. */
     activeOverride = input(...(ngDevMode ? [undefined, { debugName: "activeOverride" }] : []));
     navbar = inject(SI_NAVBAR_VERTICAL_NEXT);
     parent = inject(SiNavbarVerticalNextItemComponent, {
@@ -280,23 +503,19 @@ class SiNavbarVerticalNextItemComponent {
     });
     routerLinkActive = inject(RouterLinkActive, { optional: true });
     siLink = inject(SiLinkDirective, { optional: true });
-    /**
-     * Hides the badge in collapsed state
-     */
-    hideBadgeCollapsed = computed(() => !!this.item().hideBadgeWhenCollapsed, ...(ngDevMode ? [{ debugName: "hideBadgeCollapsed" }] : []));
     /**
      * Determines if the badge contains text-only content (not numeric)
      */
     textOnlyBadge = computed(() => {
-        const badge = this.item().badge;
-        return badge ? typeof badge !== 'number' : false;
+        const badge = this.badge();
+        return badge != null && badge !== '' ? typeof badge !== 'number' : false;
     }, ...(ngDevMode ? [{ debugName: "textOnlyBadge" }] : []));
     /**
      * Formats badge value to limit display to "+99" for numbers greater than 99
      */
     formattedBadge = computed(() => {
-        const badge = this.item().badge;
-        if (!badge) {
+        const badge = this.badge();
+        if (badge == null || badge === '') {
             return '';
         }
         if (typeof badge === 'number') {
@@ -310,11 +529,6 @@ class SiNavbarVerticalNextItemComponent {
         }
     }
     triggered() {
-        const item = this.item();
-        if (item.type === 'action') {
-            item.action(item);
-            return;
-        }
         this.parent?.group?.hideFlyout();
         if (!this.group) {
             this.navbar.itemTriggered();
@@ -326,10 +540,9 @@ class SiNavbarVerticalNextItemComponent {
             this.siLink?.active() ||
             ((!this.group?.expanded() || this.navbar.collapsed()) && this.group?.active()) ||
             false);
-        /* eslint-disable-enable @typescript-eslint/prefer-nullish-coalescing */
     }
     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: { item: { classPropertyName: "item", publicName: "si-navbar-vertical-next-item", isSignal: true, isRequired: true, transformFunction: null }, activeOverride: { classPropertyName: "activeOverride", publicName: "activeOverride", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "triggered()" }, properties: { "class.dropdown-item": "this.parent?.group?.flyout()", "class.navbar-vertical-item": "!this.parent?.group?.flyout()", "class.active": "active", "class.hide-badge-collapsed": "hideBadgeCollapsed()" }, classAttribute: "focus-inside" }, ngImport: i0, template: "@let icon = item().icon;\n@if (icon) {\n  <si-icon class=\"icon-lg\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">\n  <ng-content />\n</div>\n@if (!navbar.textOnly() && formattedBadge()) {\n  <span\n    [class]=\"[\n      'badge',\n      item().badgeColor ? `bg-${item().badgeColor}` : 'bg-default',\n      textOnlyBadge() ? 'badge-text-only' : '',\n      navbar.collapsed() ? 'badge-collapsed' : ''\n    ]\"\n    >{{ formattedBadge() }}</span\n  >\n}\n@if (group) {\n  <si-icon aria-hidden=\"true\" class=\"dropdown-caret me-0 text-body\" [icon]=\"icons.elementDown2\" />\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--element-text-primary);background:none;border:0;font-size:.875rem;padding-block:8px;padding-inline:0 12px;min-inline-size:0;min-block-size:40px;inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg+.item-title{margin-inline-start:8px}:host(.navbar-vertical-item).show .badge:not(.badge-collapsed){display:none}:host(.navbar-vertical-item):not(.show) .badge+.dropdown-caret{margin-inline:0;padding-inline:0}:host(.navbar-vertical-item).active{color:var(--element-action-primary-hover);background:var(--element-base-1-selected)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--element-action-primary-hover)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--element-base-1-hover)}:host-context(.nav-scroll > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(.nav-scroll > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(.nav-scroll > si-navbar-flyout-anchor)+:host(.navbar-vertical-item){margin-block-start:8px}:host-context(.nav-text-only si-navbar-vertical-next-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item){padding-inline-start:32px}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) .badge{position:absolute;inset-block-start:4px;inset-inline-end:6px;block-size:14px;min-inline-size:14px;border-radius:7px;font-size:.75rem;line-height:14px;padding-block:0;padding-inline:4px;font-weight:600}:host-context(.nav-collapsed) .badge.badge-text-only{color:transparent;font-size:0}:host-context(.nav-collapsed) :is(.item-title,.dropdown-caret){position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:host-context(.nav-collapsed).hide-badge-collapsed .badge{display:none}:host-context(.link-with-items)>:host(button){padding-inline:12px}:host-context(.link-with-items)>:host(button) .item-title,:host-context(.link-with-items)>:host(button) .icon-lg{display:none}:host-context(.link-with-items)>:host(button) .dropdown-caret{padding-inline:0}:host-context(.link-with-items)>:host(button):after{display:none}:host-context(.nav-collapsed .link-with-items)>:host(button){padding-inline:0}:host-context(.nav-collapsed .link-with-items)>:host(button):after{display:block}:host-context(.nav-collapsed .link-with-items)>:host(button) .icon-lg{display:block}:host-context(.nav-collapsed .link-with-items)>:host(a){display:none}.badge{margin-inline:auto 0}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarVerticalNextItemComponent, isStandalone: true, selector: "a[si-navbar-vertical-next-item], button[si-navbar-vertical-next-item]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeColor: { classPropertyName: "badgeColor", publicName: "badgeColor", isSignal: true, isRequired: false, transformFunction: null }, hideBadgeWhenCollapsed: { classPropertyName: "hideBadgeWhenCollapsed", publicName: "hideBadgeWhenCollapsed", isSignal: true, isRequired: false, transformFunction: null }, activeOverride: { classPropertyName: "activeOverride", publicName: "activeOverride", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "triggered()" }, properties: { "class.dropdown-item": "this.parent?.group?.flyout()", "class.navbar-vertical-item": "!this.parent?.group?.flyout()", "class.active": "active", "class.hide-badge-collapsed": "hideBadgeWhenCollapsed()" }, classAttribute: "focus-inside" }, ngImport: i0, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon class=\"icon-lg\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">\n  <ng-content />\n</div>\n@if (!navbar.textOnly() && formattedBadge()) {\n  @let badgeColor = this.badgeColor();\n  <span\n    [class]=\"[\n      'badge',\n      badgeColor ? `bg-${badgeColor}` : 'bg-default',\n      textOnlyBadge() ? 'badge-text-only' : '',\n      navbar.collapsed() ? 'badge-collapsed' : ''\n    ]\"\n    >{{ formattedBadge() }}</span\n  >\n}\n@if (group) {\n  <si-icon aria-hidden=\"true\" class=\"dropdown-caret me-0 text-body\" [icon]=\"icons.elementDown2\" />\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--element-text-primary);background:none;border:0;font-size:.875rem;padding-block:8px;padding-inline:0 12px;min-inline-size:0;min-block-size:40px;inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg+.item-title{margin-inline-start:8px}:host(.navbar-vertical-item).show .badge:not(.badge-collapsed){display:none}:host(.navbar-vertical-item):not(.show) .badge+.dropdown-caret{margin-inline:0;padding-inline:0}:host(.navbar-vertical-item).active{color:var(--element-action-primary-hover);background:var(--element-base-1-selected)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--element-action-primary-hover)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--element-base-1-hover)}:host-context(si-navbar-vertical-next-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item){margin-block-start:8px}:host-context(.nav-text-only si-navbar-vertical-next-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item){padding-inline-start:32px}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) .badge{position:absolute;inset-block-start:4px;inset-inline-end:6px;min-inline-size:.875rem;border-radius:.4375rem;font-size:.75rem;line-height:.875rem;padding-block:0;padding-inline:4px;font-family:var(--element-body-font-family);font-weight:600}:host-context(.nav-collapsed) .badge.badge-text-only{color:transparent;font-size:0}:host-context(.nav-collapsed) :is(.item-title,.dropdown-caret){position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:host-context(.nav-collapsed).hide-badge-collapsed .badge{display:none}.badge{margin-inline:auto 0}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextItemComponent, decorators: [{
             type: Component,
@@ -338,338 +551,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         '[class.dropdown-item]': 'this.parent?.group?.flyout()',
                         '[class.navbar-vertical-item]': '!this.parent?.group?.flyout()',
                         '[class.active]': 'active',
-                        '[class.hide-badge-collapsed]': 'hideBadgeCollapsed()'
-                    }, template: "@let icon = item().icon;\n@if (icon) {\n  <si-icon class=\"icon-lg\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">\n  <ng-content />\n</div>\n@if (!navbar.textOnly() && formattedBadge()) {\n  <span\n    [class]=\"[\n      'badge',\n      item().badgeColor ? `bg-${item().badgeColor}` : 'bg-default',\n      textOnlyBadge() ? 'badge-text-only' : '',\n      navbar.collapsed() ? 'badge-collapsed' : ''\n    ]\"\n    >{{ formattedBadge() }}</span\n  >\n}\n@if (group) {\n  <si-icon aria-hidden=\"true\" class=\"dropdown-caret me-0 text-body\" [icon]=\"icons.elementDown2\" />\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--element-text-primary);background:none;border:0;font-size:.875rem;padding-block:8px;padding-inline:0 12px;min-inline-size:0;min-block-size:40px;inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg+.item-title{margin-inline-start:8px}:host(.navbar-vertical-item).show .badge:not(.badge-collapsed){display:none}:host(.navbar-vertical-item):not(.show) .badge+.dropdown-caret{margin-inline:0;padding-inline:0}:host(.navbar-vertical-item).active{color:var(--element-action-primary-hover);background:var(--element-base-1-selected)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--element-action-primary-hover)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--element-base-1-hover)}:host-context(.nav-scroll > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(.nav-scroll > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(.nav-scroll > si-navbar-flyout-anchor)+:host(.navbar-vertical-item){margin-block-start:8px}:host-context(.nav-text-only si-navbar-vertical-next-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item){padding-inline-start:32px}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) .badge{position:absolute;inset-block-start:4px;inset-inline-end:6px;block-size:14px;min-inline-size:14px;border-radius:7px;font-size:.75rem;line-height:14px;padding-block:0;padding-inline:4px;font-weight:600}:host-context(.nav-collapsed) .badge.badge-text-only{color:transparent;font-size:0}:host-context(.nav-collapsed) :is(.item-title,.dropdown-caret){position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:host-context(.nav-collapsed).hide-badge-collapsed .badge{display:none}:host-context(.link-with-items)>:host(button){padding-inline:12px}:host-context(.link-with-items)>:host(button) .item-title,:host-context(.link-with-items)>:host(button) .icon-lg{display:none}:host-context(.link-with-items)>:host(button) .dropdown-caret{padding-inline:0}:host-context(.link-with-items)>:host(button):after{display:none}:host-context(.nav-collapsed .link-with-items)>:host(button){padding-inline:0}:host-context(.nav-collapsed .link-with-items)>:host(button):after{display:block}:host-context(.nav-collapsed .link-with-items)>:host(button) .icon-lg{display:block}:host-context(.nav-collapsed .link-with-items)>:host(a){display:none}.badge{margin-inline:auto 0}\n"] }]
-        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "si-navbar-vertical-next-item", required: true }] }], activeOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeOverride", required: false }] }], triggered: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-/**
- * Copyright (c) Siemens 2016 - 2026
- * SPDX-License-Identifier: MIT
- */
-/** @experimental */
-class SiNavbarVerticalNextItemLegacyComponent {
-    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
-    navbarExpandButtonText = input.required(...(ngDevMode ? [{ debugName: "navbarExpandButtonText" }] : []));
-    navbarCollapseButtonText = input.required(...(ngDevMode ? [{ debugName: "navbarCollapseButtonText" }] : []));
-    expanded = model.required(...(ngDevMode ? [{ debugName: "expanded" }] : []));
-    flyoutItems = computed(() => {
-        if (!this.navbar.collapsed()) {
-            return this.item().items;
-        }
-        else {
-            return [
-                this.isLink() ? { ...this.item(), items: undefined } : [],
-                this.item().items ?? []
-            ].flat();
-        }
-    }, ...(ngDevMode ? [{ debugName: "flyoutItems" }] : []));
-    isLink = computed(() => {
-        const item = this.item();
-        return !!item.action || !!item.link || !!item.href;
-    }, ...(ngDevMode ? [{ debugName: "isLink" }] : []));
-    toggleButtonLabel = computed(() => this.navbar.collapsed()
-        ? this.navbarExpandButtonText()
-        : this.expanded()
-            ? this.navbarCollapseButtonText()
-            : this.navbarExpandButtonText(), ...(ngDevMode ? [{ debugName: "toggleButtonLabel" }] : []));
-    siLinks = viewChildren(SiLinkDirective, ...(ngDevMode ? [{ debugName: "siLinks" }] : []));
-    itemActive = computed(() => (this.navbar.collapsed() || !this.expanded()) && this.siLinks().some(link => link.active()), ...(ngDevMode ? [{ debugName: "itemActive" }] : []));
-    navbar = inject(SI_NAVBAR_VERTICAL_NEXT);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextItemLegacyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarVerticalNextItemLegacyComponent, isStandalone: true, selector: "si-navbar-vertical-next-item-legacy", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, navbarExpandButtonText: { classPropertyName: "navbarExpandButtonText", publicName: "navbarExpandButtonText", isSignal: true, isRequired: true, transformFunction: null }, navbarCollapseButtonText: { classPropertyName: "navbarCollapseButtonText", publicName: "navbarCollapseButtonText", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { classAttribute: "d-block mb-4" }, viewQueries: [{ propertyName: "siLinks", predicate: SiLinkDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- section header -->\n@if (!isLink() && !item().items) {\n  <si-navbar-vertical-next-header>\n    {{ item().title | translate }}\n  </si-navbar-vertical-next-header>\n} @else if (isLink() && !item().items) {\n  <a [si-navbar-vertical-next-item]=\"item()\" [siLink]=\"item()\">\n    {{ item().title | translate }}\n  </a>\n} @else if (isLink() && item().items) {\n  <div class=\"link-with-items\">\n    <a\n      #mainLink\n      [si-navbar-vertical-next-item]=\"item()\"\n      [siLink]=\"item()\"\n      [activeOverride]=\"itemActive()\"\n    >\n      {{ item().title | translate }}\n    </a>\n    <button\n      type=\"button\"\n      class=\"mt-0\"\n      [si-navbar-vertical-next-item]=\"item()\"\n      [siNavbarVerticalNextGroupTriggerFor]=\"group\"\n      [activeOverride]=\"mainLink.active\"\n      [attr.aria-label]=\"toggleButtonLabel() + ' ' + item().title | translate\"\n      [(expanded)]=\"expanded\"\n    >\n      {{ item().title | translate }}\n    </button>\n  </div>\n} @else if (item().items) {\n  <button\n    type=\"button\"\n    [si-navbar-vertical-next-item]=\"item()\"\n    [siNavbarVerticalNextGroupTriggerFor]=\"group\"\n    [activeOverride]=\"itemActive()\"\n    [(expanded)]=\"expanded\"\n  >\n    {{ item().title | translate }}\n  </button>\n}\n\n<ng-template #group>\n  <si-navbar-vertical-next-group>\n    @for (subitem of flyoutItems(); track $index) {\n      <a activeClass=\"active\" [si-navbar-vertical-next-item]=\"subitem\" [siLink]=\"subitem\">\n        {{ subitem.title | translate }}\n      </a>\n    }\n  </si-navbar-vertical-next-group>\n</ng-template>\n", styles: [".link-with-items{display:grid;grid-template-columns:1fr auto;grid-template-areas:\"- -\" \"items items\"}si-navbar-vertical-next-group{grid-area:items}\n"], dependencies: [{ kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "component", type: SiNavbarVerticalNextItemComponent, selector: "a[si-navbar-vertical-next-item], button[si-navbar-vertical-next-item]", inputs: ["si-navbar-vertical-next-item", "activeOverride"] }, { kind: "directive", type: SiNavbarVerticalNextGroupTriggerDirective, selector: "button[siNavbarVerticalNextGroupTriggerFor]", inputs: ["siNavbarVerticalNextGroupTriggerFor", "groupData", "stateId", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: SiNavbarVerticalNextGroupComponent, selector: "si-navbar-vertical-next-group" }, { kind: "component", type: SiNavbarVerticalNextHeaderComponent, selector: "si-navbar-vertical-next-header" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextItemLegacyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'si-navbar-vertical-next-item-legacy', imports: [
-                        SiLinkDirective,
-                        SiTranslatePipe,
-                        SiNavbarVerticalNextItemComponent,
-                        SiNavbarVerticalNextGroupTriggerDirective,
-                        SiNavbarVerticalNextGroupComponent,
-                        SiNavbarVerticalNextHeaderComponent
-                    ], host: {
-                        'class': 'd-block mb-4'
-                    }, template: "<!-- section header -->\n@if (!isLink() && !item().items) {\n  <si-navbar-vertical-next-header>\n    {{ item().title | translate }}\n  </si-navbar-vertical-next-header>\n} @else if (isLink() && !item().items) {\n  <a [si-navbar-vertical-next-item]=\"item()\" [siLink]=\"item()\">\n    {{ item().title | translate }}\n  </a>\n} @else if (isLink() && item().items) {\n  <div class=\"link-with-items\">\n    <a\n      #mainLink\n      [si-navbar-vertical-next-item]=\"item()\"\n      [siLink]=\"item()\"\n      [activeOverride]=\"itemActive()\"\n    >\n      {{ item().title | translate }}\n    </a>\n    <button\n      type=\"button\"\n      class=\"mt-0\"\n      [si-navbar-vertical-next-item]=\"item()\"\n      [siNavbarVerticalNextGroupTriggerFor]=\"group\"\n      [activeOverride]=\"mainLink.active\"\n      [attr.aria-label]=\"toggleButtonLabel() + ' ' + item().title | translate\"\n      [(expanded)]=\"expanded\"\n    >\n      {{ item().title | translate }}\n    </button>\n  </div>\n} @else if (item().items) {\n  <button\n    type=\"button\"\n    [si-navbar-vertical-next-item]=\"item()\"\n    [siNavbarVerticalNextGroupTriggerFor]=\"group\"\n    [activeOverride]=\"itemActive()\"\n    [(expanded)]=\"expanded\"\n  >\n    {{ item().title | translate }}\n  </button>\n}\n\n<ng-template #group>\n  <si-navbar-vertical-next-group>\n    @for (subitem of flyoutItems(); track $index) {\n      <a activeClass=\"active\" [si-navbar-vertical-next-item]=\"subitem\" [siLink]=\"subitem\">\n        {{ subitem.title | translate }}\n      </a>\n    }\n  </si-navbar-vertical-next-group>\n</ng-template>\n", styles: [".link-with-items{display:grid;grid-template-columns:1fr auto;grid-template-areas:\"- -\" \"items items\"}si-navbar-vertical-next-group{grid-area:items}\n"] }]
-        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], navbarExpandButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarExpandButtonText", required: true }] }], navbarCollapseButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarCollapseButtonText", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: true }] }, { type: i0.Output, args: ["expandedChange"] }], siLinks: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiLinkDirective), { isSignal: true }] }] } });
+                        '[class.hide-badge-collapsed]': 'hideBadgeWhenCollapsed()',
+                        '(click)': 'triggered()'
+                    }, template: "@let icon = this.icon();\n@if (icon) {\n  <si-icon class=\"icon-lg\" [icon]=\"icon\" />\n}\n<div class=\"item-title text-truncate si-h5\">\n  <ng-content />\n</div>\n@if (!navbar.textOnly() && formattedBadge()) {\n  @let badgeColor = this.badgeColor();\n  <span\n    [class]=\"[\n      'badge',\n      badgeColor ? `bg-${badgeColor}` : 'bg-default',\n      textOnlyBadge() ? 'badge-text-only' : '',\n      navbar.collapsed() ? 'badge-collapsed' : ''\n    ]\"\n    >{{ formattedBadge() }}</span\n  >\n}\n@if (group) {\n  <si-icon aria-hidden=\"true\" class=\"dropdown-caret me-0 text-body\" [icon]=\"icons.elementDown2\" />\n}\n", styles: [":host(.navbar-vertical-item){display:flex;align-items:center;position:relative;color:var(--element-text-primary);background:none;border:0;font-size:.875rem;padding-block:8px;padding-inline:0 12px;min-inline-size:0;min-block-size:40px;inline-size:100%;border-radius:0}:host(.navbar-vertical-item) .item-title{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg{margin-inline-start:12px}:host(.navbar-vertical-item) .icon-lg+.item-title{margin-inline-start:8px}:host(.navbar-vertical-item).show .badge:not(.badge-collapsed){display:none}:host(.navbar-vertical-item):not(.show) .badge+.dropdown-caret{margin-inline:0;padding-inline:0}:host(.navbar-vertical-item).active{color:var(--element-action-primary-hover);background:var(--element-base-1-selected)}:host(.navbar-vertical-item).active:after{content:\"\";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px;background:var(--element-action-primary-hover)}:host(.navbar-vertical-item):hover{text-decoration:none;background:var(--element-base-1-hover)}:host-context(si-navbar-vertical-next-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > .navbar-vertical-item)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-vertical-next-group)+:host(.navbar-vertical-item),:host-context(si-navbar-vertical-next-footer-items > si-navbar-flyout-anchor)+:host(.navbar-vertical-item){margin-block-start:8px}:host-context(.nav-text-only si-navbar-vertical-next-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item){padding-inline-start:32px}:host-context(si-navbar-vertical-next-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) .badge{position:absolute;inset-block-start:4px;inset-inline-end:6px;min-inline-size:.875rem;border-radius:.4375rem;font-size:.75rem;line-height:.875rem;padding-block:0;padding-inline:4px;font-family:var(--element-body-font-family);font-weight:600}:host-context(.nav-collapsed) .badge.badge-text-only{color:transparent;font-size:0}:host-context(.nav-collapsed) :is(.item-title,.dropdown-caret){position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}:host-context(.nav-collapsed).hide-badge-collapsed .badge{display:none}.badge{margin-inline:auto 0}\n"] }]
+        }], 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 }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-/**
- * Required to have compiler checks on the factory template
- * @experimental
- */
-class SiNavbarVerticalNextItemGuardDirective {
-    static ngTemplateContextGuard(dir, ctx) {
-        return true;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextItemGuardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiNavbarVerticalNextItemGuardDirective, isStandalone: true, selector: "[siNavbarVerticalNextItemGuard]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextItemGuardDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[siNavbarVerticalNextItemGuard]' }]
-        }] });
 /** @experimental */
-class SiNavbarVerticalNextComponent {
-    icons = addIcons({ elementDoubleLeft, elementDoubleRight, elementSearch });
-    /**
-     * Whether the navbar-vertical is collapsed.
-     *
-     * @defaultValue false
-     */
-    collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
-    /**
-     * Toggles search bar
-     *
-     * @defaultValue false
-     */
-    searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : {}), transform: booleanAttribute });
+class SiNavbarVerticalNextSearchComponent {
+    icons = addIcons({ elementSearch });
     /**
-     * Placeholder text for search
+     * Placeholder text for the search bar
      *
      * @defaultValue
      * ```
      * t(() => $localize`:@@SI_NAVBAR_VERTICAL.SEARCH_PLACEHOLDER:Search ...`)
      * ```
      */
-    searchPlaceholder = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.SEARCH_PLACEHOLDER:Search ...`), ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
-    /**
-     * List of vertical navigation items
-     *
-     * @defaultValue []
-     */
-    items = model([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-    /**
-     * Set to `true` if there are no icons
-     *
-     * @defaultValue false
-     */
-    /**
-     * Set to `true` if there are no icons
-     *
-     * @defaultValue false
-     */
-    textOnly = input(false, { ...(ngDevMode ? { debugName: "textOnly" } : {}), transform: booleanAttribute });
-    /**
-     * Set to false to hide the vertical navbar
-     *
-     * @defaultValue true
-     */
-    /**
-     * Set to false to hide the vertical navbar
-     *
-     * @defaultValue true
-     */
-    visible = input(true, { ...(ngDevMode ? { debugName: "visible" } : {}), transform: booleanAttribute });
-    /**
-     * Text for the navbar expand button. Required for a11y
-     *
-     * @defaultValue
-     * ```
-     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.EXPAND:Expand`)
-     * ```
-     */
-    navbarExpandButtonText = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.EXPAND:Expand`), ...(ngDevMode ? [{ debugName: "navbarExpandButtonText" }] : []));
-    /**
-     * Text for the navbar collapse button. Required for a11y
-     *
-     * @defaultValue
-     * ```
-     * t(() => $localize`:@@SI_NAVBAR_VERTICAL.COLLAPSE:Collapse`)
-     * ```
-     */
-    navbarCollapseButtonText = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.COLLAPSE:Collapse`), ...(ngDevMode ? [{ debugName: "navbarCollapseButtonText" }] : []));
-    /**
-     * An optional stateId to uniquely identify a component instance.
-     * Required for persistence of ui state.
-     */
-    stateId = input(...(ngDevMode ? [undefined, { debugName: "stateId" }] : []));
-    /**
-     * Label for the skip link to the vertical navbar
-     *
-     * @defaultValue
-     * ```
-     * 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" }] : []));
-    /**
-     * Label for the skip link to main content
-     *
-     * @defaultValue
-     * ```
-     * 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" }] : []));
+    placeholder = input(t(() => $localize `:@@SI_NAVBAR_VERTICAL.SEARCH_PLACEHOLDER:Search ...`), ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     /**
      * Debounce time for the search input
      * @defaultValue 400
      */
-    searchDebounceTime = input(400, ...(ngDevMode ? [{ debugName: "searchDebounceTime" }] : []));
+    debounceTime = input(400, ...(ngDevMode ? [{ debugName: "debounceTime" }] : []));
     /**
      * Output for search bar input
      */
-    searchEvent = output();
+    searchChange = output();
+    navbar = inject(SI_NAVBAR_VERTICAL_NEXT);
     searchBar = viewChild.required(SiSearchBarComponent);
-    activatedRoute = inject(ActivatedRoute, { optional: true });
-    // Is required to prevent the navbar from running the padding animation on creation.
-    ready = true;
-    uiStateService = inject(SI_UI_STATE_SERVICE, { optional: true });
-    breakpointObserver = inject(BreakpointObserver);
-    navbarItems = viewChildren(SiNavbarVerticalNextItemComponent, ...(ngDevMode ? [{ debugName: "navbarItems" }] : []));
-    navbarItemsLegacy = viewChildren(SiNavbarVerticalNextItemLegacyComponent, ...(ngDevMode ? [{ debugName: "navbarItemsLegacy" }] : []));
-    itemsToComponents = computed(() => new Map([...this.navbarItems(), ...this.navbarItemsLegacy()].map(component => [
-        component.item(), // to have a broader key type allowed
-        component
-    ])), ...(ngDevMode ? [{ debugName: "itemsToComponents" }] : []));
-    smallScreen = signal(false, ...(ngDevMode ? [{ debugName: "smallScreen" }] : []));
-    uiStateExpandedItems = signal({}, ...(ngDevMode ? [{ debugName: "uiStateExpandedItems" }] : []));
-    // Indicates if the user prefers a collapsed navbar. Relevant for resizing.
-    preferCollapse = false;
-    constructor() {
-        this.breakpointObserver
-            .observe(`(max-width: ${BOOTSTRAP_BREAKPOINTS.lgMinimum}px)`)
-            .pipe(takeUntilDestroyed())
-            .subscribe(({ matches }) => {
-            this.collapsed.set(matches || this.preferCollapse);
-            this.smallScreen.set(matches);
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes.collapsed) {
-            this.preferCollapse = this.collapsed();
-        }
-    }
-    ngOnInit() {
-        const stateId = this.stateId();
-        if (this.uiStateService && stateId) {
-            this.uiStateService.load(stateId).then(uiState => {
-                if (uiState) {
-                    this.preferCollapse = uiState.preferCollapse;
-                    this.collapsed.set(this.smallScreen() ? this.collapsed() : this.preferCollapse);
-                    this.uiStateExpandedItems.set(uiState.expandedItems);
-                }
-            });
-        }
-    }
-    toggleCollapse() {
-        if (this.collapsed()) {
-            this.expand();
-        }
-        else {
-            this.collapse();
-        }
-    }
-    /** Expands the vertical navbar. */
-    expand() {
-        this.collapsed.set(false);
-        if (!this.smallScreen()) {
-            this.preferCollapse = this.collapsed();
-        }
-        this.saveUIState();
-    }
-    /** Collapses the vertical navbar. */
-    collapse() {
-        this.collapsed.set(true);
-        if (!this.smallScreen()) {
-            this.preferCollapse = this.collapsed();
-        }
-        this.saveUIState();
-    }
     expandForSearch() {
-        this.expand();
+        this.navbar.expand();
         setTimeout(() => this.searchBar().focus());
     }
-    doSearch(event) {
-        this.searchEvent.emit(event);
-    }
-    /** @internal */
-    groupTriggered() {
-        this.saveUIState();
-        const itemToComponentMap = this.itemsToComponents();
-        this.items.set(this.items().map(item => {
-            const component = itemToComponentMap.get(item);
-            if (!component) {
-                return item;
-            }
-            if (component instanceof SiNavbarVerticalNextItemLegacyComponent) {
-                return {
-                    ...item,
-                    expanded: component.expanded()
-                };
-            }
-            if (component.group) {
-                return {
-                    ...item,
-                    expanded: component.group.expanded()
-                };
-            }
-            return item;
-        }));
-        this.collapsed.set(false);
-    }
-    saveUIState() {
-        const stateId = this.stateId();
-        if (!this.uiStateService || !stateId) {
-            return;
-        }
-        const expandedGroups = this.navbarItems()
-            .filter(item => item.item().id && item.group?.expanded())
-            .map(item => [item.item().id, true]);
-        const expandedGroupsLegacy = this.navbarItemsLegacy()
-            .filter(item => item.item().id && item.expanded())
-            .map(item => [item.item().id, true]);
-        this.uiStateService.save(stateId, {
-            preferCollapse: this.preferCollapse,
-            expandedItems: Object.fromEntries([...expandedGroups, ...expandedGroupsLegacy])
-        });
-    }
-    /** @internal */
-    itemTriggered() {
-        if (this.smallScreen()) {
-            this.collapsed.set(true);
-        }
-    }
-    isLegacyStyle(item) {
-        return !('type' in item && item.type !== 'check' && item.type !== 'radio');
-    }
-    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 }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, textOnly: { classPropertyName: "textOnly", publicName: "textOnly", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, navbarExpandButtonText: { classPropertyName: "navbarExpandButtonText", publicName: "navbarExpandButtonText", isSignal: true, isRequired: false, transformFunction: null }, navbarCollapseButtonText: { classPropertyName: "navbarCollapseButtonText", publicName: "navbarCollapseButtonText", isSignal: true, isRequired: false, transformFunction: null }, stateId: { classPropertyName: "stateId", publicName: "stateId", isSignal: true, isRequired: false, transformFunction: null }, skipLinkNavigationLabel: { classPropertyName: "skipLinkNavigationLabel", publicName: "skipLinkNavigationLabel", isSignal: true, isRequired: false, transformFunction: null }, skipLinkMainContentLabel: { classPropertyName: "skipLinkMainContentLabel", publicName: "skipLinkMainContentLabel", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", items: "itemsChange", searchEvent: "searchEvent" }, host: { properties: { "class.nav-collapsed": "collapsed()", "class.nav-text-only": "textOnly()", "class.visible": "visible()", "class.ready": "this.ready" }, classAttribute: "si-layout-inner" }, providers: [{ provide: SI_NAVBAR_VERTICAL_NEXT, useExisting: SiNavbarVerticalNextComponent }], viewQueries: [{ propertyName: "searchBar", first: true, predicate: SiSearchBarComponent, descendants: true, isSignal: true }, { propertyName: "navbarItems", predicate: SiNavbarVerticalNextItemComponent, descendants: true, isSignal: true }, { propertyName: "navbarItemsLegacy", predicate: SiNavbarVerticalNextItemLegacyComponent, 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 navbar-vertical-no-collapse\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-ghost\"\n          [attr.aria-label]=\"\n            (collapsed() ? navbarExpandButtonText() : navbarCollapseButtonText()) | translate\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon\n            class=\"flip-rtl\"\n            [icon]=\"collapsed() ? icons.elementDoubleRight : icons.elementDoubleLeft\"\n          />\n        </button>\n      </div>\n    </div>\n    @if (searchable()) {\n      <div class=\"nav-search\">\n        <si-search-bar\n          class=\"mx-4\"\n          colorVariant=\"base-0\"\n          prohibitedCharacters=\"*?\"\n          [placeholder]=\"searchPlaceholder() | translate\"\n          [debounceTime]=\"searchDebounceTime()\"\n          [showIcon]=\"true\"\n          (searchChange)=\"doSearch($event)\"\n        />\n        <button\n          type=\"button\"\n          class=\"btn-search bg-base-0 p-3 mx-4 mobile navbar-vertical-no-collapse text-secondary\"\n          [attr.aria-label]=\"searchPlaceholder() | translate\"\n          (click)=\"expandForSearch()\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementSearch\" />\n        </button>\n      </div>\n    }\n    <div class=\"nav-scroll\">\n      @for (item of items(); track $index) {\n        @if (isLegacyStyle(item)) {\n          <si-navbar-vertical-next-item-legacy\n            [item]=\"item\"\n            [navbarExpandButtonText]=\"navbarExpandButtonText() | translate\"\n            [navbarCollapseButtonText]=\"navbarCollapseButtonText() | translate\"\n            [expanded]=\"\n              (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n            \"\n          />\n        } @else {\n          <ng-container *ngTemplateOutlet=\"navbarItems; context: { item }\" />\n        }\n      }\n    </div>\n  </nav>\n}\n<main\n  class=\"si-layout-inner focus-none\"\n  tabindex=\"-1\"\n  [siSkipLinkTarget]=\"skipLinkMainContentLabel()\"\n>\n  <ng-content />\n</main>\n\n<ng-template #navbarItems let-item=\"item\" siNavbarVerticalNextItemGuard>\n  @switch (item.type) {\n    @case ('group') {\n      <button\n        type=\"button\"\n        placement=\"end\"\n        [si-navbar-vertical-next-item]=\"item\"\n        [stateId]=\"item.id\"\n        [siNavbarVerticalNextGroupTriggerFor]=\"group\"\n        [groupData]=\"{ group: item }\"\n        [expanded]=\"\n          (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n        \"\n        [siTooltip]=\"item.label | translate\"\n        [isDisabled]=\"!collapsed()\"\n      >\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('action') {\n      <button\n        type=\"button\"\n        placement=\"end\"\n        [si-navbar-vertical-next-item]=\"item\"\n        [activeOverride]=\"item.active\"\n        [siTooltip]=\"item.label | translate\"\n        [isDisabled]=\"!collapsed()\"\n      >\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('router-link') {\n      <a\n        routerLinkActive\n        placement=\"end\"\n        [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n        [si-navbar-vertical-next-item]=\"item\"\n        [routerLink]=\"item.routerLink\"\n        [queryParams]=\"item.extras?.queryParams\"\n        [queryParamsHandling]=\"item.extras?.queryParamsHandling\"\n        [fragment]=\"item.extras?.fragment\"\n        [state]=\"item.extras?.state\"\n        [relativeTo]=\"item.extras?.relativeTo ?? this.activatedRoute\"\n        [preserveFragment]=\"item.extras?.preserveFragment\"\n        [skipLocationChange]=\"item.extras?.skipLocationChange\"\n        [replaceUrl]=\"item.extras?.replaceUrl\"\n        [siTooltip]=\"item.label | translate\"\n        [isDisabled]=\"!collapsed()\"\n      >\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('link') {\n      <a\n        placement=\"end\"\n        [si-navbar-vertical-next-item]=\"item\"\n        [href]=\"item.href\"\n        [target]=\"item.target\"\n        [siTooltip]=\"item.label | translate\"\n        [isDisabled]=\"!collapsed()\"\n      >\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('divider') {\n      <si-navbar-vertical-next-divider />\n    }\n    @case ('header') {\n      <si-navbar-vertical-next-header>\n        {{ item.label | translate }}\n      </si-navbar-vertical-next-header>\n    }\n  }\n</ng-template>\n\n<ng-template #group let-group=\"group\" siNavbarVerticalNextItemGuard>\n  <si-navbar-vertical-next-group routerLinkActive>\n    @for (item of group.children; track $index) {\n      <!-- a copy from above, but we have to nest the items to make routerLink active work -->\n      @switch (item.type) {\n        @case ('router-link') {\n          <a\n            routerLinkActive\n            [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n            [si-navbar-vertical-next-item]=\"item\"\n            [routerLink]=\"item.routerLink\"\n            [queryParams]=\"item.extras?.queryParams\"\n            [queryParamsHandling]=\"item.extras?.queryParamsHandling\"\n            [fragment]=\"item.extras?.fragment\"\n            [state]=\"item.extras?.state\"\n            [relativeTo]=\"item.extras?.relativeTo ?? this.activatedRoute\"\n            [preserveFragment]=\"item.extras?.preserveFragment\"\n            [skipLocationChange]=\"item.extras?.skipLocationChange\"\n            [replaceUrl]=\"item.extras?.replaceUrl\"\n          >\n            {{ item.label | translate }}\n          </a>\n        }\n        @case ('action') {\n          <button\n            type=\"button\"\n            [si-navbar-vertical-next-item]=\"item\"\n            [activeOverride]=\"item.active\"\n          >\n            {{ item.label | translate }}\n          </button>\n        }\n        @case ('link') {\n          <a [si-navbar-vertical-next-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n            {{ item.label | translate }}\n          </a>\n        }\n      }\n    }\n  </si-navbar-vertical-next-group>\n</ng-template>\n", styles: [":host{display:block;transition:padding-inline-start calc(.5s * var(--element-animations-enabled, 1));--si-layout-header-first-element-offset: 40px}:host.ready:not(.visible){padding-inline-start:0!important}nav{display:flex;flex-direction:column;position:fixed;z-index:1031;inset-block-start:calc(48px + 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}.nav-scroll{overflow-x:hidden;min-block-size:0;flex:1 0 0;overflow-y:auto;margin-block-start:8px}:host(.nav-collapsed) .nav-scroll{display:none}.mobile-drawer{display:block;text-align:end;border:0;inline-size:48px;color:var(--element-text-primary);padding-block:4px;padding-inline:8px;margin-block-start:8px;border-start-end-radius:var(--element-radius-2);border-end-end-radius:var(--element-radius-2);transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease,background-color calc(.5s * var(--element-animations-enabled, 1)) ease,box-shadow calc(.5s * var(--element-animations-enabled, 1)) ease}:host(:not(.nav-collapsed)) .mobile-drawer{inline-size:240px}.nav-search{display:flex;align-items:center;block-size:40px;margin-block-start:8px;overflow-x:hidden}:host(.nav-collapsed) .nav-search{display:none}si-search-bar{inline-size:100%}.btn-search{display:none;border:0;border-radius:var(--element-radius-2)}:host.nav-collapsed .mobile-drawer{border:0;color:var(--element-text-primary);background:var(--element-base-1);text-align:end;box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}:host.nav-collapsed si-search-bar{display:none}.modal-backdrop{z-index:1031;transition:opacity calc(.15s * var(--element-animations-enabled, 1)) linear;opacity:1}@starting-style{.modal-backdrop{opacity:0}}.modal-backdrop.backdrop-leave{opacity:0}@media(min-width:576px){:host:not(.nav-text-only),:host:not(.nav-collapsed){--si-layout-header-first-element-offset: 0}:host:not(.nav-text-only){padding-inline-start:48px}:host:not(.nav-text-only) .mobile-drawer{background:transparent;box-shadow:none}:host:not(.nav-text-only).nav-collapsed .nav-scroll{display:block}:host:not(.nav-text-only).nav-collapsed .nav-search{display:flex}.btn-search{display:none}:host.nav-collapsed .btn-search{display:block}:host:not(.nav-text-only) nav{inline-size:48px}:host:not(.nav-text-only) nav.expanded{inline-size:240px}}@media(min-width:992px){:host:not(.nav-collapsed){padding-inline-start:240px}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiNavbarVerticalNextDividerComponent, selector: "si-navbar-vertical-next-divider" }, { kind: "component", type: SiNavbarVerticalNextGroupComponent, selector: "si-navbar-vertical-next-group" }, { kind: "directive", type: SiNavbarVerticalNextGroupTriggerDirective, selector: "button[siNavbarVerticalNextGroupTriggerFor]", inputs: ["siNavbarVerticalNextGroupTriggerFor", "groupData", "stateId", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: SiNavbarVerticalNextHeaderComponent, selector: "si-navbar-vertical-next-header" }, { kind: "component", type: SiNavbarVerticalNextItemComponent, selector: "a[si-navbar-vertical-next-item], button[si-navbar-vertical-next-item]", inputs: ["si-navbar-vertical-next-item", "activeOverride"] }, { kind: "directive", type: SiNavbarVerticalNextItemGuardDirective, selector: "[siNavbarVerticalNextItemGuard]" }, { kind: "component", type: SiNavbarVerticalNextItemLegacyComponent, selector: "si-navbar-vertical-next-item-legacy", inputs: ["item", "navbarExpandButtonText", "navbarCollapseButtonText", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "tabbable", "value", "readonly", "colorVariant", "disabled", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "directive", type: SiSkipLinkTargetDirective, selector: "[siSkipLinkTarget]", inputs: ["siSkipLinkTarget"] }, { kind: "directive", type: SiTooltipDirective, selector: "[siTooltip]", inputs: ["siTooltip", "placement", "isDisabled", "tooltipContext"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.8", type: SiNavbarVerticalNextSearchComponent, isStandalone: true, selector: "si-navbar-vertical-next-search", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange" }, viewQueries: [{ propertyName: "searchBar", first: true, predicate: SiSearchBarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<si-search-bar\n  class=\"mx-4\"\n  colorVariant=\"base-0\"\n  prohibitedCharacters=\"*?\"\n  [placeholder]=\"placeholder() | translate\"\n  [debounceTime]=\"debounceTime()\"\n  [showIcon]=\"true\"\n  (searchChange)=\"searchChange.emit($event)\"\n/>\n<button\n  type=\"button\"\n  class=\"btn-search bg-base-0 p-3 mx-4 mobile navbar-vertical-no-collapse text-secondary\"\n  [attr.aria-label]=\"placeholder() | translate\"\n  (click)=\"expandForSearch()\"\n>\n  <si-icon class=\"icon\" [icon]=\"icons.elementSearch\" />\n</button>\n", styles: [":host{display:flex;align-items:center;block-size:40px;margin-block-start:8px;overflow-x:hidden}:host-context(.nav-collapsed){display:none}:host-context(.nav-collapsed) si-search-bar{display:none}si-search-bar{inline-size:100%}.btn-search{display:none;border:0;border-radius:var(--element-radius-2)}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:flex}.btn-search{display:none}:host-context(.nav-collapsed) .btn-search{display:block}}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "tabbable", "value", "readonly", "colorVariant", "disabled", "maxlength", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-navbar-vertical-next', imports: [
-                        NgTemplateOutlet,
-                        RouterLink,
-                        RouterLinkActive,
-                        SiIconComponent,
-                        SiNavbarVerticalNextDividerComponent,
-                        SiNavbarVerticalNextGroupComponent,
-                        SiNavbarVerticalNextGroupTriggerDirective,
-                        SiNavbarVerticalNextHeaderComponent,
-                        SiNavbarVerticalNextItemComponent,
-                        SiNavbarVerticalNextItemGuardDirective,
-                        SiNavbarVerticalNextItemLegacyComponent,
-                        SiSearchBarComponent,
-                        SiSkipLinkTargetDirective,
-                        SiTranslatePipe,
-                        SiTooltipDirective
-                    ], providers: [{ provide: SI_NAVBAR_VERTICAL_NEXT, useExisting: SiNavbarVerticalNextComponent }], host: {
-                        class: 'si-layout-inner',
-                        '[class.nav-collapsed]': 'collapsed()',
-                        '[class.nav-text-only]': 'textOnly()',
-                        '[class.visible]': 'visible()'
-                    }, template: "@if (visible()) {\n  @if (smallScreen() && !collapsed()) {\n    <div class=\"modal-backdrop\" animate.leave=\"backdrop-leave\" (click)=\"toggleCollapse()\"></div>\n  }\n  <nav\n    tabindex=\"-1\"\n    class=\"bg-base-1 focus-sub-inside\"\n    [class.expanded]=\"!collapsed()\"\n    [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n    [class.text-only]=\"textOnly()\"\n  >\n    <div class=\"collapse-toggle ms-auto\">\n      <div class=\"mobile-drawer focus-inside navbar-vertical-no-collapse\">\n        <button\n          type=\"button\"\n          class=\"btn btn-icon btn-ghost\"\n          [attr.aria-label]=\"\n            (collapsed() ? navbarExpandButtonText() : navbarCollapseButtonText()) | translate\n          \"\n          [attr.aria-expanded]=\"!collapsed()\"\n          (click)=\"toggleCollapse()\"\n        >\n          <si-icon\n            class=\"flip-rtl\"\n            [icon]=\"collapsed() ? icons.elementDoubleRight : icons.elementDoubleLeft\"\n          />\n        </button>\n      </div>\n    </div>\n    @if (searchable()) {\n      <div class=\"nav-search\">\n        <si-search-bar\n          class=\"mx-4\"\n          colorVariant=\"base-0\"\n          prohibitedCharacters=\"*?\"\n          [placeholder]=\"searchPlaceholder() | translate\"\n          [debounceTime]=\"searchDebounceTime()\"\n          [showIcon]=\"true\"\n          (searchChange)=\"doSearch($event)\"\n        />\n        <button\n          type=\"button\"\n          class=\"btn-search bg-base-0 p-3 mx-4 mobile navbar-vertical-no-collapse text-secondary\"\n          [attr.aria-label]=\"searchPlaceholder() | translate\"\n          (click)=\"expandForSearch()\"\n        >\n          <si-icon class=\"icon\" [icon]=\"icons.elementSearch\" />\n        </button>\n      </div>\n    }\n    <div class=\"nav-scroll\">\n      @for (item of items(); track $index) {\n        @if (isLegacyStyle(item)) {\n          <si-navbar-vertical-next-item-legacy\n            [item]=\"item\"\n            [navbarExpandButtonText]=\"navbarExpandButtonText() | translate\"\n            [navbarCollapseButtonText]=\"navbarCollapseButtonText() | translate\"\n            [expanded]=\"\n              (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n            \"\n          />\n        } @else {\n          <ng-container *ngTemplateOutlet=\"navbarItems; context: { item }\" />\n        }\n      }\n    </div>\n  </nav>\n}\n<main\n  class=\"si-layout-inner focus-none\"\n  tabindex=\"-1\"\n  [siSkipLinkTarget]=\"skipLinkMainContentLabel()\"\n>\n  <ng-content />\n</main>\n\n<ng-template #navbarItems let-item=\"item\" siNavbarVerticalNextItemGuard>\n  @switch (item.type) {\n    @case ('group') {\n      <button\n        type=\"button\"\n        placement=\"end\"\n        [si-navbar-vertical-next-item]=\"item\"\n        [stateId]=\"item.id\"\n        [siNavbarVerticalNextGroupTriggerFor]=\"group\"\n        [groupData]=\"{ group: item }\"\n        [expanded]=\"\n          (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n        \"\n        [siTooltip]=\"item.label | translate\"\n        [isDisabled]=\"!collapsed()\"\n      >\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('action') {\n      <button\n        type=\"button\"\n        placement=\"end\"\n        [si-navbar-vertical-next-item]=\"item\"\n        [activeOverride]=\"item.active\"\n        [siTooltip]=\"item.label | translate\"\n        [isDisabled]=\"!collapsed()\"\n      >\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('router-link') {\n      <a\n        routerLinkActive\n        placement=\"end\"\n        [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n        [si-navbar-vertical-next-item]=\"item\"\n        [routerLink]=\"item.routerLink\"\n        [queryParams]=\"item.extras?.queryParams\"\n        [queryParamsHandling]=\"item.extras?.queryParamsHandling\"\n        [fragment]=\"item.extras?.fragment\"\n        [state]=\"item.extras?.state\"\n        [relativeTo]=\"item.extras?.relativeTo ?? this.activatedRoute\"\n        [preserveFragment]=\"item.extras?.preserveFragment\"\n        [skipLocationChange]=\"item.extras?.skipLocationChange\"\n        [replaceUrl]=\"item.extras?.replaceUrl\"\n        [siTooltip]=\"item.label | translate\"\n        [isDisabled]=\"!collapsed()\"\n      >\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('link') {\n      <a\n        placement=\"end\"\n        [si-navbar-vertical-next-item]=\"item\"\n        [href]=\"item.href\"\n        [target]=\"item.target\"\n        [siTooltip]=\"item.label | translate\"\n        [isDisabled]=\"!collapsed()\"\n      >\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('divider') {\n      <si-navbar-vertical-next-divider />\n    }\n    @case ('header') {\n      <si-navbar-vertical-next-header>\n        {{ item.label | translate }}\n      </si-navbar-vertical-next-header>\n    }\n  }\n</ng-template>\n\n<ng-template #group let-group=\"group\" siNavbarVerticalNextItemGuard>\n  <si-navbar-vertical-next-group routerLinkActive>\n    @for (item of group.children; track $index) {\n      <!-- a copy from above, but we have to nest the items to make routerLink active work -->\n      @switch (item.type) {\n        @case ('router-link') {\n          <a\n            routerLinkActive\n            [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n            [si-navbar-vertical-next-item]=\"item\"\n            [routerLink]=\"item.routerLink\"\n            [queryParams]=\"item.extras?.queryParams\"\n            [queryParamsHandling]=\"item.extras?.queryParamsHandling\"\n            [fragment]=\"item.extras?.fragment\"\n            [state]=\"item.extras?.state\"\n            [relativeTo]=\"item.extras?.relativeTo ?? this.activatedRoute\"\n            [preserveFragment]=\"item.extras?.preserveFragment\"\n            [skipLocationChange]=\"item.extras?.skipLocationChange\"\n            [replaceUrl]=\"item.extras?.replaceUrl\"\n          >\n            {{ item.label | translate }}\n          </a>\n        }\n        @case ('action') {\n          <button\n            type=\"button\"\n            [si-navbar-vertical-next-item]=\"item\"\n            [activeOverride]=\"item.active\"\n          >\n            {{ item.label | translate }}\n          </button>\n        }\n        @case ('link') {\n          <a [si-navbar-vertical-next-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n            {{ item.label | translate }}\n          </a>\n        }\n      }\n    }\n  </si-navbar-vertical-next-group>\n</ng-template>\n", styles: [":host{display:block;transition:padding-inline-start calc(.5s * var(--element-animations-enabled, 1));--si-layout-header-first-element-offset: 40px}:host.ready:not(.visible){padding-inline-start:0!important}nav{display:flex;flex-direction:column;position:fixed;z-index:1031;inset-block-start:calc(48px + 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}.nav-scroll{overflow-x:hidden;min-block-size:0;flex:1 0 0;overflow-y:auto;margin-block-start:8px}:host(.nav-collapsed) .nav-scroll{display:none}.mobile-drawer{display:block;text-align:end;border:0;inline-size:48px;color:var(--element-text-primary);padding-block:4px;padding-inline:8px;margin-block-start:8px;border-start-end-radius:var(--element-radius-2);border-end-end-radius:var(--element-radius-2);transition:inline-size calc(.5s * var(--element-animations-enabled, 1)) ease,background-color calc(.5s * var(--element-animations-enabled, 1)) ease,box-shadow calc(.5s * var(--element-animations-enabled, 1)) ease}:host(:not(.nav-collapsed)) .mobile-drawer{inline-size:240px}.nav-search{display:flex;align-items:center;block-size:40px;margin-block-start:8px;overflow-x:hidden}:host(.nav-collapsed) .nav-search{display:none}si-search-bar{inline-size:100%}.btn-search{display:none;border:0;border-radius:var(--element-radius-2)}:host.nav-collapsed .mobile-drawer{border:0;color:var(--element-text-primary);background:var(--element-base-1);text-align:end;box-shadow:0 0 4px var(--element-box-shadow-color-1),0 4px 4px var(--element-box-shadow-color-2)}:host.nav-collapsed si-search-bar{display:none}.modal-backdrop{z-index:1031;transition:opacity calc(.15s * var(--element-animations-enabled, 1)) linear;opacity:1}@starting-style{.modal-backdrop{opacity:0}}.modal-backdrop.backdrop-leave{opacity:0}@media(min-width:576px){:host:not(.nav-text-only),:host:not(.nav-collapsed){--si-layout-header-first-element-offset: 0}:host:not(.nav-text-only){padding-inline-start:48px}:host:not(.nav-text-only) .mobile-drawer{background:transparent;box-shadow:none}:host:not(.nav-text-only).nav-collapsed .nav-scroll{display:block}:host:not(.nav-text-only).nav-collapsed .nav-search{display:flex}.btn-search{display:none}:host.nav-collapsed .btn-search{display:block}:host:not(.nav-text-only) nav{inline-size:48px}:host:not(.nav-text-only) nav.expanded{inline-size:240px}}@media(min-width:992px){:host:not(.nav-collapsed){padding-inline-start:240px}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], textOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "textOnly", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], navbarExpandButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarExpandButtonText", required: false }] }], navbarCollapseButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarCollapseButtonText", required: false }] }], stateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateId", required: false }] }], skipLinkNavigationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkNavigationLabel", required: false }] }], skipLinkMainContentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkMainContentLabel", required: false }] }], searchDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceTime", required: false }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }], searchBar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiSearchBarComponent), { isSignal: true }] }], ready: [{
-                type: HostBinding,
-                args: ['class.ready']
-            }], navbarItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiNavbarVerticalNextItemComponent), { isSignal: true }] }], navbarItemsLegacy: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiNavbarVerticalNextItemLegacyComponent), { isSignal: true }] }] } });
+            args: [{ selector: 'si-navbar-vertical-next-search', imports: [SiIconComponent, SiSearchBarComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<si-search-bar\n  class=\"mx-4\"\n  colorVariant=\"base-0\"\n  prohibitedCharacters=\"*?\"\n  [placeholder]=\"placeholder() | translate\"\n  [debounceTime]=\"debounceTime()\"\n  [showIcon]=\"true\"\n  (searchChange)=\"searchChange.emit($event)\"\n/>\n<button\n  type=\"button\"\n  class=\"btn-search bg-base-0 p-3 mx-4 mobile navbar-vertical-no-collapse text-secondary\"\n  [attr.aria-label]=\"placeholder() | translate\"\n  (click)=\"expandForSearch()\"\n>\n  <si-icon class=\"icon\" [icon]=\"icons.elementSearch\" />\n</button>\n", styles: [":host{display:flex;align-items:center;block-size:40px;margin-block-start:8px;overflow-x:hidden}:host-context(.nav-collapsed){display:none}:host-context(.nav-collapsed) si-search-bar{display:none}si-search-bar{inline-size:100%}.btn-search{display:none;border:0;border-radius:var(--element-radius-2)}@media(min-width:576px){:host-context(:not(.nav-text-only).nav-collapsed){display:flex}.btn-search{display:none}:host-context(.nav-collapsed) .btn-search{display:block}}\n"] }]
+        }], 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
@@ -678,14 +602,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
 /** @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], exports: [SiNavbarVerticalNextComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalNextModule, imports: [SiNavbarVerticalNextComponent] });
+    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],
-                    exports: [SiNavbarVerticalNextComponent]
+                    imports: [
+                        SiNavbarVerticalNextComponent,
+                        SiNavbarVerticalNextDividerComponent,
+                        SiNavbarVerticalNextFooterItemsComponent,
+                        SiNavbarVerticalNextGroupComponent,
+                        SiNavbarVerticalNextGroupTriggerDirective,
+                        SiNavbarVerticalNextHeaderComponent,
+                        SiNavbarVerticalNextItemComponent,
+                        SiNavbarVerticalNextItemsComponent,
+                        SiNavbarVerticalNextSearchComponent
+                    ],
+                    exports: [
+                        SiNavbarVerticalNextComponent,
+                        SiNavbarVerticalNextDividerComponent,
+                        SiNavbarVerticalNextFooterItemsComponent,
+                        SiNavbarVerticalNextGroupComponent,
+                        SiNavbarVerticalNextGroupTriggerDirective,
+                        SiNavbarVerticalNextHeaderComponent,
+                        SiNavbarVerticalNextItemComponent,
+                        SiNavbarVerticalNextItemsComponent,
+                        SiNavbarVerticalNextSearchComponent
+                    ]
                 }]
         }] });
 
@@ -698,5 +660,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SiNavbarVerticalNextComponent, SiNavbarVerticalNextItemGuardDirective, SiNavbarVerticalNextModule };
+export { SiNavbarVerticalNextComponent, SiNavbarVerticalNextDividerComponent, SiNavbarVerticalNextFooterItemsComponent, SiNavbarVerticalNextGroupComponent, SiNavbarVerticalNextGroupTriggerDirective, SiNavbarVerticalNextHeaderComponent, SiNavbarVerticalNextItemComponent, SiNavbarVerticalNextItemsComponent, SiNavbarVerticalNextModule, SiNavbarVerticalNextSearchComponent };
 //# sourceMappingURL=siemens-element-ng-navbar-vertical-next.mjs.map