@siemens/element-ng 48.9.0 → 49.0.0-rc.1

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

@@ -1,6 +1,6 @@
 import { trigger, state, transition, style, animate, query, group, animateChild } from '@angular/animations';
 import { BreakpointObserver } from '@angular/cdk/layout';
-import { NgClass, NgTemplateOutlet } from '@angular/common';
+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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -22,10 +22,10 @@ import { SiLinkDirective } from '@siemens/element-ng/link';
  */
 // We need a component to attach the stylesheet
 class SiNavbarVerticalDividerComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SiNavbarVerticalDividerComponent, isStandalone: true, selector: "si-navbar-vertical-divider", ngImport: i0, template: '', isInline: true, styles: [":host{display:block;block-size:1px;background-color:var(--element-ui-4);margin-block:6px;margin-inline:12px}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiNavbarVerticalDividerComponent, isStandalone: true, selector: "si-navbar-vertical-divider", ngImport: i0, template: '', isInline: true, styles: [":host{display:block;block-size:1px;background-color:var(--element-ui-4);margin-block:6px;margin-inline:12px}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalDividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalDividerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-navbar-vertical-divider', template: '', styles: [":host{display:block;block-size:1px;background-color:var(--element-ui-4);margin-block:6px;margin-inline:12px}\n"] }]
         }] });
@@ -47,33 +47,31 @@ const SI_NAVBAR_VERTICAL = new InjectionToken('SI_NAVBAR_VERTICAL');
  * as chrome will include the flyout children in the a11y label of the trigger.
  */
 class SiNavbarFlyoutAnchorComponent {
-    groupId = input();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarFlyoutAnchorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SiNavbarFlyoutAnchorComponent, isStandalone: true, selector: "si-navbar-flyout-anchor", inputs: { groupId: { classPropertyName: "groupId", publicName: "groupId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-owns": "groupId()" } }, ngImport: i0, template: '', isInline: true });
+    groupId = input(...(ngDevMode ? [undefined, { debugName: "groupId" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarFlyoutAnchorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.8", type: SiNavbarFlyoutAnchorComponent, isStandalone: true, selector: "si-navbar-flyout-anchor", inputs: { groupId: { classPropertyName: "groupId", publicName: "groupId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-owns": "groupId()" } }, ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarFlyoutAnchorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarFlyoutAnchorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'si-navbar-flyout-anchor',
                     template: '',
                     host: { '[attr.aria-owns]': 'groupId()' }
                 }]
-        }] });
+        }], propDecorators: { groupId: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupId", required: false }] }] } });
 class SiNavbarVerticalGroupTriggerDirective {
     static idCounter = 0;
     /** @internal */
     groupId = `si-navbar-vertical-group-${SiNavbarVerticalGroupTriggerDirective.idCounter++}`;
     id = `${this.groupId}-trigger`;
-    groupTemplate = input.required({
-        alias: 'siNavbarVerticalGroupTriggerFor'
-    });
-    groupData = input();
-    stateId = input();
-    expanded = model.required();
+    groupTemplate = input.required({ ...(ngDevMode ? { debugName: "groupTemplate" } : {}), alias: 'siNavbarVerticalGroupTriggerFor' });
+    groupData = input(...(ngDevMode ? [undefined, { debugName: "groupData" }] : []));
+    stateId = input(...(ngDevMode ? [undefined, { debugName: "stateId" }] : []));
+    expanded = model.required(...(ngDevMode ? [{ debugName: "expanded" }] : []));
     /** @internal */
-    flyout = signal(false);
+    flyout = signal(false, ...(ngDevMode ? [{ debugName: "flyout" }] : []));
     /** @internal */
-    active = signal(false);
+    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
     navbar = inject(SI_NAVBAR_VERTICAL);
     flyoutOutsideClickSubscription;
     viewContainer = inject(ViewContainerRef);
@@ -90,7 +88,7 @@ class SiNavbarVerticalGroupTriggerDirective {
     });
     groupView;
     flyoutAnchorComponentRef;
-    templatePortal = computed(() => new TemplatePortal(this.groupTemplate(), this.viewContainer, this.groupData(), this.injector));
+    templatePortal = computed(() => new TemplatePortal(this.groupTemplate(), this.viewContainer, this.groupData(), this.injector), ...(ngDevMode ? [{ debugName: "templatePortal" }] : []));
     ngOnInit() {
         this.attachInline();
     }
@@ -138,10 +136,10 @@ class SiNavbarVerticalGroupTriggerDirective {
             .outsidePointerEvents()
             .subscribe(() => this.hideFlyout());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalGroupTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: SiNavbarVerticalGroupTriggerDirective, isStandalone: true, selector: "button[siNavbarVerticalGroupTriggerFor]", inputs: { groupTemplate: { classPropertyName: "groupTemplate", publicName: "siNavbarVerticalGroupTriggerFor", 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalGroupTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiNavbarVerticalGroupTriggerDirective, isStandalone: true, selector: "button[siNavbarVerticalGroupTriggerFor]", inputs: { groupTemplate: { classPropertyName: "groupTemplate", publicName: "siNavbarVerticalGroupTriggerFor", 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalGroupTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalGroupTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[siNavbarVerticalGroupTriggerFor]',
@@ -153,7 +151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         '[attr.aria-expanded]': 'expanded()'
                     }
                 }]
-        }], propDecorators: { triggered: [{
+        }], propDecorators: { groupTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "siNavbarVerticalGroupTriggerFor", 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']
             }] } });
@@ -164,10 +162,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  */
 class SiNavbarVerticalItemComponent {
     icons = addIcons({ elementDown2 });
-    item = input.required({
-        alias: 'si-navbar-vertical-item'
-    });
-    activeOverride = input();
+    item = input.required({ ...(ngDevMode ? { debugName: "item" } : {}), alias: 'si-navbar-vertical-item' });
+    activeOverride = input(...(ngDevMode ? [undefined, { debugName: "activeOverride" }] : []));
     navbar = inject(SI_NAVBAR_VERTICAL);
     parent = inject(SiNavbarVerticalItemComponent, {
         skipSelf: true,
@@ -191,7 +187,7 @@ class SiNavbarVerticalItemComponent {
             return badge > 99 ? '+99' : badge.toString();
         }
         return badge.toString();
-    });
+    }, ...(ngDevMode ? [{ debugName: "formattedBadge" }] : []));
     ngOnInit() {
         if (this.group && this.active) {
             this.group.expanded.set(true);
@@ -216,18 +212,18 @@ class SiNavbarVerticalItemComponent {
             false);
         /* eslint-disable-enable @typescript-eslint/prefer-nullish-coalescing */
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiNavbarVerticalItemComponent, isStandalone: true, selector: "a[si-navbar-vertical-item], button[si-navbar-vertical-item]", inputs: { item: { classPropertyName: "item", publicName: "si-navbar-vertical-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" }, classAttribute: "focus-inside" }, ngImport: i0, template: "@let icon = item().icon;\n@if (icon) {\n  <si-icon class=\"icon me-n2\" [icon]=\"icon\" />\n}\n@if (icon && formattedBadge()) {\n  <div class=\"w-100 h-100 position-absolute\">\n    <span class=\"badge-text\">{{ formattedBadge() }}</span>\n  </div>\n}\n<div\n  class=\"item-title text-truncate si-h5\"\n  [class.visually-hidden]=\"!this.parent && this.navbar.collapsed()\"\n>\n  <ng-content />\n</div>\n@if (formattedBadge()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + item().badgeColor\">\n    {{ formattedBadge() }}\n  </span>\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{margin-inline-start:12px}:host(.navbar-vertical-item) .icon+.item-title{margin-inline-start:12px}:host(.navbar-vertical-item).active{color:var(--element-text-active);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-ui-0)}: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-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-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item){padding-inline-start:32px}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) :is(.badge,.dropdown-caret){display:none}:host-context(si-navbar-vertical:not(.nav-collapsed)) .badge-text{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{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{display:block}:host-context(.nav-collapsed .link-with-items)>:host(a){display:none}.badge{margin-inline:auto 0}.badge-text{position:absolute;inset-block-start:4px;inset-inline-end:6px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarVerticalItemComponent, isStandalone: true, selector: "a[si-navbar-vertical-item], button[si-navbar-vertical-item]", inputs: { item: { classPropertyName: "item", publicName: "si-navbar-vertical-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" }, classAttribute: "focus-inside" }, ngImport: i0, template: "@let icon = item().icon;\n@if (icon) {\n  <si-icon class=\"icon me-n2\" [icon]=\"icon\" />\n}\n@if (icon && formattedBadge()) {\n  <div class=\"w-100 h-100 position-absolute\">\n    <span class=\"badge-text\">{{ formattedBadge() }}</span>\n  </div>\n}\n<div\n  class=\"item-title text-truncate si-h5\"\n  [class.visually-hidden]=\"!this.parent && this.navbar.collapsed()\"\n>\n  <ng-content />\n</div>\n@if (formattedBadge()) {\n  <span [class]=\"['badge', item().badgeColor ? `bg-${item().badgeColor}` : '']\">\n    {{ formattedBadge() }}\n  </span>\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{margin-inline-start:12px}:host(.navbar-vertical-item) .icon+.item-title{margin-inline-start:12px}:host(.navbar-vertical-item).active{color:var(--element-text-active);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-ui-0)}: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-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-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item){padding-inline-start:32px}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) :is(.badge,.dropdown-caret){display:none}:host-context(si-navbar-vertical:not(.nav-collapsed)) .badge-text{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{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{display:block}:host-context(.nav-collapsed .link-with-items)>:host(a){display:none}.badge{margin-inline:auto 0}.badge-text{position:absolute;inset-block-start:4px;inset-inline-end:6px}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'a[si-navbar-vertical-item], button[si-navbar-vertical-item]', imports: [NgClass, SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'a[si-navbar-vertical-item], button[si-navbar-vertical-item]', imports: [SiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'focus-inside',
                         '[class.dropdown-item]': 'this.parent?.group?.flyout()',
                         '[class.navbar-vertical-item]': '!this.parent?.group?.flyout()',
                         '[class.active]': 'active'
-                    }, template: "@let icon = item().icon;\n@if (icon) {\n  <si-icon class=\"icon me-n2\" [icon]=\"icon\" />\n}\n@if (icon && formattedBadge()) {\n  <div class=\"w-100 h-100 position-absolute\">\n    <span class=\"badge-text\">{{ formattedBadge() }}</span>\n  </div>\n}\n<div\n  class=\"item-title text-truncate si-h5\"\n  [class.visually-hidden]=\"!this.parent && this.navbar.collapsed()\"\n>\n  <ng-content />\n</div>\n@if (formattedBadge()) {\n  <span class=\"badge\" [ngClass]=\"'bg-' + item().badgeColor\">\n    {{ formattedBadge() }}\n  </span>\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{margin-inline-start:12px}:host(.navbar-vertical-item) .icon+.item-title{margin-inline-start:12px}:host(.navbar-vertical-item).active{color:var(--element-text-active);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-ui-0)}: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-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-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item){padding-inline-start:32px}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) :is(.badge,.dropdown-caret){display:none}:host-context(si-navbar-vertical:not(.nav-collapsed)) .badge-text{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{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{display:block}:host-context(.nav-collapsed .link-with-items)>:host(a){display:none}.badge{margin-inline:auto 0}.badge-text{position:absolute;inset-block-start:4px;inset-inline-end:6px}\n"] }]
-        }], propDecorators: { triggered: [{
+                    }, template: "@let icon = item().icon;\n@if (icon) {\n  <si-icon class=\"icon me-n2\" [icon]=\"icon\" />\n}\n@if (icon && formattedBadge()) {\n  <div class=\"w-100 h-100 position-absolute\">\n    <span class=\"badge-text\">{{ formattedBadge() }}</span>\n  </div>\n}\n<div\n  class=\"item-title text-truncate si-h5\"\n  [class.visually-hidden]=\"!this.parent && this.navbar.collapsed()\"\n>\n  <ng-content />\n</div>\n@if (formattedBadge()) {\n  <span [class]=\"['badge', item().badgeColor ? `bg-${item().badgeColor}` : '']\">\n    {{ formattedBadge() }}\n  </span>\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{margin-inline-start:12px}:host(.navbar-vertical-item) .icon+.item-title{margin-inline-start:12px}:host(.navbar-vertical-item).active{color:var(--element-text-active);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-ui-0)}: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-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-group) .item-title{margin-inline-start:0}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item){padding-inline-start:32px}:host-context(si-navbar-vertical-group) :host(.navbar-vertical-item) .item-title{font-weight:400}:host(.dropdown-item) .item-title{font-weight:400}:host-context(.nav-collapsed) :is(.badge,.dropdown-caret){display:none}:host-context(si-navbar-vertical:not(.nav-collapsed)) .badge-text{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{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{display:block}:host-context(.nav-collapsed .link-with-items)>:host(a){display:none}.badge{margin-inline:auto 0}.badge-text{position:absolute;inset-block-start:4px;inset-inline-end:6px}\n"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "si-navbar-vertical-item", required: true }] }], activeOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeOverride", required: false }] }], triggered: [{
                 type: HostListener,
                 args: ['click']
             }] } });
@@ -246,7 +242,7 @@ class SiNavbarVerticalGroupComponent {
     flyout = this.groupTrigger.flyout();
     visible = computed(() => {
         return this.flyout || (!this.navbar.collapsed() && this.groupTrigger.expanded());
-    });
+    }, ...(ngDevMode ? [{ debugName: "visible" }] : []));
     state = computed(() => {
         if (this.flyout) {
             return 'flyout';
@@ -255,7 +251,7 @@ class SiNavbarVerticalGroupComponent {
             return 'expanded';
         }
         return 'collapsed';
-    });
+    }, ...(ngDevMode ? [{ debugName: "state" }] : []));
     constructor() {
         this.routerLinkActive?.isActiveChange
             .pipe(takeUntilDestroyed())
@@ -264,8 +260,8 @@ class SiNavbarVerticalGroupComponent {
     close() {
         this.groupTrigger.hideFlyout();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: SiNavbarVerticalGroupComponent, isStandalone: true, selector: "si-navbar-vertical-group", host: { attributes: { "role": "group" }, listeners: { "keydown.escape": "close()" }, properties: { "id": "groupTrigger.groupId", "attr.aria-labelledby": "groupTrigger.id", "class.dropdown-menu": "flyout", "@collapse": "state() ?? \"collapsed\"" } }, ngImport: i0, template: `<div [cdkTrapFocus]="flyout" [cdkTrapFocusAutoCapture]="flyout">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: SiNavbarVerticalGroupComponent, isStandalone: true, selector: "si-navbar-vertical-group", host: { attributes: { "role": "group" }, listeners: { "keydown.escape": "close()" }, properties: { "id": "groupTrigger.groupId", "attr.aria-labelledby": "groupTrigger.id", "class.dropdown-menu": "flyout", "@collapse": "state() ?? \"collapsed\"" } }, ngImport: i0, template: `<div [cdkTrapFocus]="flyout" [cdkTrapFocusAutoCapture]="flyout">
     <ng-content />
   </div>`, isInline: true, styles: [":host{display:block;overflow:hidden;position:static}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [
             trigger('collapse', [
@@ -280,7 +276,7 @@ class SiNavbarVerticalGroupComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-navbar-vertical-group', imports: [CdkTrapFocus], template: `<div [cdkTrapFocus]="flyout" [cdkTrapFocusAutoCapture]="flyout">
     <ng-content />
@@ -313,8 +309,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  */
 class SiNavbarVerticalHeaderComponent {
     navbar = inject(SI_NAVBAR_VERTICAL);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiNavbarVerticalHeaderComponent, isStandalone: true, selector: "si-navbar-vertical-header", host: { properties: { "@headerCollapse": "navbar.collapsed()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarVerticalHeaderComponent, isStandalone: true, selector: "si-navbar-vertical-header", host: { properties: { "@headerCollapse": "navbar.collapsed()" } }, ngImport: i0, template: `
     @if (!navbar.collapsed()) {
       <div class="si-h5 text-secondary p-5">
         <ng-content />
@@ -339,7 +335,7 @@ class SiNavbarVerticalHeaderComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-navbar-vertical-header', imports: [SiNavbarVerticalDividerComponent], template: `
     @if (!navbar.collapsed()) {
@@ -372,10 +368,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiNavbarVerticalItemLegacyComponent {
-    item = input.required();
-    navbarExpandButtonText = input.required();
-    navbarCollapseButtonText = input.required();
-    expanded = model.required();
+    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;
@@ -386,23 +382,23 @@ class SiNavbarVerticalItemLegacyComponent {
                 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());
-    siLinks = viewChildren(SiLinkDirective);
-    itemActive = computed(() => (this.navbar.collapsed() || !this.expanded()) && this.siLinks().some(link => link.active()));
+            : 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);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalItemLegacyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiNavbarVerticalItemLegacyComponent, isStandalone: true, selector: "si-navbar-vertical-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-header>\n    {{ item().title | translate }}\n  </si-navbar-vertical-header>\n} @else if (isLink() && !item().items) {\n  <a [si-navbar-vertical-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-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-item]=\"item()\"\n      [siNavbarVerticalGroupTriggerFor]=\"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-item]=\"item()\"\n    [siNavbarVerticalGroupTriggerFor]=\"group\"\n    [activeOverride]=\"itemActive()\"\n    [(expanded)]=\"expanded\"\n  >\n    {{ item().title | translate }}\n  </button>\n}\n\n<ng-template #group>\n  <si-navbar-vertical-group>\n    @for (subitem of flyoutItems(); track $index) {\n      <a activeClass=\"active\" [si-navbar-vertical-item]=\"subitem\" [siLink]=\"subitem\">\n        {{ subitem.title | translate }}\n      </a>\n    }\n  </si-navbar-vertical-group>\n</ng-template>\n", styles: [".link-with-items{display:grid;grid-template-columns:1fr auto;grid-template-areas:\"- -\" \"items items\"}si-navbar-vertical-group{grid-area:items}\n"], dependencies: [{ kind: "directive", type: SiLinkDirective, selector: "[siLink]", inputs: ["siLink", "siLinkDefaultTarget", "actionParam", "activeClass", "exactMatch", "ariaCurrent"], outputs: ["activeChange"], exportAs: ["siLink"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }, { kind: "component", type: SiNavbarVerticalItemComponent, selector: "a[si-navbar-vertical-item], button[si-navbar-vertical-item]", inputs: ["si-navbar-vertical-item", "activeOverride"] }, { kind: "directive", type: SiNavbarVerticalGroupTriggerDirective, selector: "button[siNavbarVerticalGroupTriggerFor]", inputs: ["siNavbarVerticalGroupTriggerFor", "groupData", "stateId", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: SiNavbarVerticalGroupComponent, selector: "si-navbar-vertical-group" }, { kind: "component", type: SiNavbarVerticalHeaderComponent, selector: "si-navbar-vertical-header" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalItemLegacyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarVerticalItemLegacyComponent, isStandalone: true, selector: "si-navbar-vertical-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-header>\n    {{ item().title | translate }}\n  </si-navbar-vertical-header>\n} @else if (isLink() && !item().items) {\n  <a [si-navbar-vertical-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-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-item]=\"item()\"\n      [siNavbarVerticalGroupTriggerFor]=\"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-item]=\"item()\"\n    [siNavbarVerticalGroupTriggerFor]=\"group\"\n    [activeOverride]=\"itemActive()\"\n    [(expanded)]=\"expanded\"\n  >\n    {{ item().title | translate }}\n  </button>\n}\n\n<ng-template #group>\n  <si-navbar-vertical-group>\n    @for (subitem of flyoutItems(); track $index) {\n      <a activeClass=\"active\" [si-navbar-vertical-item]=\"subitem\" [siLink]=\"subitem\">\n        {{ subitem.title | translate }}\n      </a>\n    }\n  </si-navbar-vertical-group>\n</ng-template>\n", styles: [".link-with-items{display:grid;grid-template-columns:1fr auto;grid-template-areas:\"- -\" \"items items\"}si-navbar-vertical-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: SiNavbarVerticalItemComponent, selector: "a[si-navbar-vertical-item], button[si-navbar-vertical-item]", inputs: ["si-navbar-vertical-item", "activeOverride"] }, { kind: "directive", type: SiNavbarVerticalGroupTriggerDirective, selector: "button[siNavbarVerticalGroupTriggerFor]", inputs: ["siNavbarVerticalGroupTriggerFor", "groupData", "stateId", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: SiNavbarVerticalGroupComponent, selector: "si-navbar-vertical-group" }, { kind: "component", type: SiNavbarVerticalHeaderComponent, selector: "si-navbar-vertical-header" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalItemLegacyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalItemLegacyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-navbar-vertical-item-legacy', imports: [
                         SiLinkDirective,
@@ -414,7 +410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     ], host: {
                         'class': 'd-block mb-4'
                     }, template: "<!-- section header -->\n@if (!isLink() && !item().items) {\n  <si-navbar-vertical-header>\n    {{ item().title | translate }}\n  </si-navbar-vertical-header>\n} @else if (isLink() && !item().items) {\n  <a [si-navbar-vertical-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-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-item]=\"item()\"\n      [siNavbarVerticalGroupTriggerFor]=\"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-item]=\"item()\"\n    [siNavbarVerticalGroupTriggerFor]=\"group\"\n    [activeOverride]=\"itemActive()\"\n    [(expanded)]=\"expanded\"\n  >\n    {{ item().title | translate }}\n  </button>\n}\n\n<ng-template #group>\n  <si-navbar-vertical-group>\n    @for (subitem of flyoutItems(); track $index) {\n      <a activeClass=\"active\" [si-navbar-vertical-item]=\"subitem\" [siLink]=\"subitem\">\n        {{ subitem.title | translate }}\n      </a>\n    }\n  </si-navbar-vertical-group>\n</ng-template>\n", styles: [".link-with-items{display:grid;grid-template-columns:1fr auto;grid-template-areas:\"- -\" \"items items\"}si-navbar-vertical-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 }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
@@ -425,10 +421,10 @@ class SiNavbarVerticalItemGuardDirective {
     static ngTemplateContextGuard(dir, ctx) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalItemGuardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.6", type: SiNavbarVerticalItemGuardDirective, isStandalone: true, selector: "[siNavbarVerticalItemGuard]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalItemGuardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.8", type: SiNavbarVerticalItemGuardDirective, isStandalone: true, selector: "[siNavbarVerticalItemGuard]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalItemGuardDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalItemGuardDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[siNavbarVerticalItemGuard]' }]
         }] });
@@ -439,13 +435,13 @@ class SiNavbarVerticalComponent {
      *
      * @defaultValue false
      */
-    collapsed = model(false);
+    collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
     /**
      * Toggles search bar
      *
      * @defaultValue false
      */
-    searchable = input(false, { transform: booleanAttribute });
+    searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : {}), transform: booleanAttribute });
     /**
      * Placeholder text for search
      *
@@ -454,13 +450,13 @@ class SiNavbarVerticalComponent {
      * t(() => $localize`:@@SI_NAVBAR_VERTICAL.SEARCH_PLACEHOLDER:Search ...`)
      * ```
      */
-    searchPlaceholder = input(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([]);
+    items = model([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     /**
      * Set to `true` if there are no icons
      *
@@ -471,7 +467,7 @@ class SiNavbarVerticalComponent {
      *
      * @defaultValue false
      */
-    textOnly = input(false, { transform: booleanAttribute });
+    textOnly = input(false, { ...(ngDevMode ? { debugName: "textOnly" } : {}), transform: booleanAttribute });
     /**
      * Set to false to hide the vertical navbar
      *
@@ -482,7 +478,7 @@ class SiNavbarVerticalComponent {
      *
      * @defaultValue true
      */
-    visible = input(true, { transform: booleanAttribute });
+    visible = input(true, { ...(ngDevMode ? { debugName: "visible" } : {}), transform: booleanAttribute });
     /**
      * Text for the navbar expand button. Required for a11y
      *
@@ -491,7 +487,7 @@ class SiNavbarVerticalComponent {
      * t(() => $localize`:@@SI_NAVBAR_VERTICAL.EXPAND:Expand`)
      * ```
      */
-    navbarExpandButtonText = input(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
      *
@@ -500,12 +496,12 @@ class SiNavbarVerticalComponent {
      * t(() => $localize`:@@SI_NAVBAR_VERTICAL.COLLAPSE:Collapse`)
      * ```
      */
-    navbarCollapseButtonText = input(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();
+    stateId = input(...(ngDevMode ? [undefined, { debugName: "stateId" }] : []));
     /**
      * Label for the skip link to the vertical navbar
      *
@@ -514,7 +510,7 @@ class SiNavbarVerticalComponent {
      * t(() => $localize`:@@SI_NAVBAR_VERTICAL.SKIP_LINK.NAVIGATION_LABEL:Navigation`)
      * ```
      */
-    skipLinkNavigationLabel = input(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
      *
@@ -523,7 +519,7 @@ class SiNavbarVerticalComponent {
      * t(() => $localize`:@@SI_NAVBAR_VERTICAL.SKIP_LINK.MAIN_LABEL:Main content`)
      * ```
      */
-    skipLinkMainContentLabel = input(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" }] : []));
     /**
      * Output for search bar input
      */
@@ -535,14 +531,14 @@ class SiNavbarVerticalComponent {
     searchInputDelay = 400;
     uiStateService = inject(SI_UI_STATE_SERVICE, { optional: true });
     breakpointObserver = inject(BreakpointObserver);
-    navbarItems = viewChildren(SiNavbarVerticalItemComponent);
-    navbarItemsLegacy = viewChildren(SiNavbarVerticalItemLegacyComponent);
+    navbarItems = viewChildren(SiNavbarVerticalItemComponent, ...(ngDevMode ? [{ debugName: "navbarItems" }] : []));
+    navbarItemsLegacy = viewChildren(SiNavbarVerticalItemLegacyComponent, ...(ngDevMode ? [{ debugName: "navbarItemsLegacy" }] : []));
     itemsToComponents = computed(() => new Map([...this.navbarItems(), ...this.navbarItemsLegacy()].map(component => [
         component.item(), // to have a broader key type allowed
         component
-    ])));
-    smallScreen = signal(false);
-    uiStateExpandedItems = signal({});
+    ])), ...(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() {
@@ -652,8 +648,8 @@ class SiNavbarVerticalComponent {
     isLegacyStyle(item) {
         return !('type' in item && item.type !== 'check' && item.type !== 'radio');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiNavbarVerticalComponent, isStandalone: true, selector: "si-navbar-vertical", 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 } }, 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, useExisting: SiNavbarVerticalComponent }], viewQueries: [{ propertyName: "searchBar", first: true, predicate: SiSearchBarComponent, descendants: true, isSignal: true }, { propertyName: "navbarItems", predicate: SiNavbarVerticalItemComponent, descendants: true, isSignal: true }, { propertyName: "navbarItemsLegacy", predicate: SiNavbarVerticalItemLegacyComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (visible()) {\n  @if (smallScreen() && !collapsed()) {\n    <div\n      class=\"modal-backdrop\"\n      [@backdrop]=\"smallScreen() && !collapsed() ? 'show' : 'hide'\"\n      (click)=\"toggleCollapse()\"\n    ></div>\n  }\n  <nav\n    tabindex=\"-1\"\n    class=\"bg-base-1 focus-sub-inside\"\n    [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n    [@collapse]=\"collapsed() ? 'collapsed' : 'expanded'\"\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-circle btn-sm 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]=\"searchInputDelay\"\n          [showIcon]=\"true\"\n          (searchChange)=\"doSearch($event)\"\n        />\n        <button\n          type=\"button\"\n          class=\"btn-search bg-base-0 p-2 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-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\" siNavbarVerticalItemGuard>\n  @switch (item.type) {\n    @case ('group') {\n      <button\n        type=\"button\"\n        [si-navbar-vertical-item]=\"item\"\n        [stateId]=\"item.id\"\n        [siNavbarVerticalGroupTriggerFor]=\"group\"\n        [groupData]=\"{ group: item }\"\n        [expanded]=\"\n          (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n        \"\n      >\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('action') {\n      <button type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('router-link') {\n      <a\n        routerLinkActive\n        [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n        [si-navbar-vertical-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 ('link') {\n      <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('divider') {\n      <si-navbar-vertical-divider />\n    }\n    @case ('header') {\n      <si-navbar-vertical-header>\n        {{ item.label | translate }}\n      </si-navbar-vertical-header>\n    }\n  }\n</ng-template>\n\n<ng-template #group let-group=\"group\" siNavbarVerticalItemGuard>\n  <si-navbar-vertical-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-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 type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n            {{ item.label | translate }}\n          </button>\n        }\n        @case ('link') {\n          <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n            {{ item.label | translate }}\n          </a>\n        }\n      }\n    }\n  </si-navbar-vertical-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}:host(.nav-collapsed) nav{z-index:1030}.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)}.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;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}}@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: SiNavbarVerticalDividerComponent, selector: "si-navbar-vertical-divider" }, { kind: "component", type: SiNavbarVerticalGroupComponent, selector: "si-navbar-vertical-group" }, { kind: "directive", type: SiNavbarVerticalGroupTriggerDirective, selector: "button[siNavbarVerticalGroupTriggerFor]", inputs: ["siNavbarVerticalGroupTriggerFor", "groupData", "stateId", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: SiNavbarVerticalHeaderComponent, selector: "si-navbar-vertical-header" }, { kind: "component", type: SiNavbarVerticalItemComponent, selector: "a[si-navbar-vertical-item], button[si-navbar-vertical-item]", inputs: ["si-navbar-vertical-item", "activeOverride"] }, { kind: "directive", type: SiNavbarVerticalItemGuardDirective, selector: "[siNavbarVerticalItemGuard]" }, { kind: "component", type: SiNavbarVerticalItemLegacyComponent, selector: "si-navbar-vertical-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: "pipe", type: SiTranslatePipe, name: "translate" }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiNavbarVerticalComponent, isStandalone: true, selector: "si-navbar-vertical", 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 } }, 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, useExisting: SiNavbarVerticalComponent }], viewQueries: [{ propertyName: "searchBar", first: true, predicate: SiSearchBarComponent, descendants: true, isSignal: true }, { propertyName: "navbarItems", predicate: SiNavbarVerticalItemComponent, descendants: true, isSignal: true }, { propertyName: "navbarItemsLegacy", predicate: SiNavbarVerticalItemLegacyComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (visible()) {\n  @if (smallScreen() && !collapsed()) {\n    <div\n      class=\"modal-backdrop\"\n      [@backdrop]=\"smallScreen() && !collapsed() ? 'show' : 'hide'\"\n      (click)=\"toggleCollapse()\"\n    ></div>\n  }\n  <nav\n    tabindex=\"-1\"\n    class=\"bg-base-1 focus-sub-inside\"\n    [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n    [@collapse]=\"collapsed() ? 'collapsed' : 'expanded'\"\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-circle btn-sm 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]=\"searchInputDelay\"\n          [showIcon]=\"true\"\n          (searchChange)=\"doSearch($event)\"\n        />\n        <button\n          type=\"button\"\n          class=\"btn-search bg-base-0 p-2 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-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\" siNavbarVerticalItemGuard>\n  @switch (item.type) {\n    @case ('group') {\n      <button\n        type=\"button\"\n        [si-navbar-vertical-item]=\"item\"\n        [stateId]=\"item.id\"\n        [siNavbarVerticalGroupTriggerFor]=\"group\"\n        [groupData]=\"{ group: item }\"\n        [expanded]=\"\n          (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n        \"\n      >\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('action') {\n      <button type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('router-link') {\n      <a\n        routerLinkActive\n        [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n        [si-navbar-vertical-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 ('link') {\n      <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('divider') {\n      <si-navbar-vertical-divider />\n    }\n    @case ('header') {\n      <si-navbar-vertical-header>\n        {{ item.label | translate }}\n      </si-navbar-vertical-header>\n    }\n  }\n</ng-template>\n\n<ng-template #group let-group=\"group\" siNavbarVerticalItemGuard>\n  <si-navbar-vertical-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-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 type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n            {{ item.label | translate }}\n          </button>\n        }\n        @case ('link') {\n          <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n            {{ item.label | translate }}\n          </a>\n        }\n      }\n    }\n  </si-navbar-vertical-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}:host(.nav-collapsed) nav{z-index:1030}.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)}.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;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}}@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: SiNavbarVerticalDividerComponent, selector: "si-navbar-vertical-divider" }, { kind: "component", type: SiNavbarVerticalGroupComponent, selector: "si-navbar-vertical-group" }, { kind: "directive", type: SiNavbarVerticalGroupTriggerDirective, selector: "button[siNavbarVerticalGroupTriggerFor]", inputs: ["siNavbarVerticalGroupTriggerFor", "groupData", "stateId", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: SiNavbarVerticalHeaderComponent, selector: "si-navbar-vertical-header" }, { kind: "component", type: SiNavbarVerticalItemComponent, selector: "a[si-navbar-vertical-item], button[si-navbar-vertical-item]", inputs: ["si-navbar-vertical-item", "activeOverride"] }, { kind: "directive", type: SiNavbarVerticalItemGuardDirective, selector: "[siNavbarVerticalItemGuard]" }, { kind: "component", type: SiNavbarVerticalItemLegacyComponent, selector: "si-navbar-vertical-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: "pipe", type: SiTranslatePipe, name: "translate" }], animations: [
             trigger('collapse', [
                 state('expanded', style({ 'inline-size': '240px' })),
                 state('collapsed', style({ 'inline-size': '*' })),
@@ -697,7 +693,7 @@ class SiNavbarVerticalComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-navbar-vertical', imports: [
                         NgTemplateOutlet,
@@ -761,22 +757,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                             state('hide', style({ 'opacity': '0' })),
                             transition('* <=> *', [animate('0.15s linear')])
                         ])
-                    ], template: "@if (visible()) {\n  @if (smallScreen() && !collapsed()) {\n    <div\n      class=\"modal-backdrop\"\n      [@backdrop]=\"smallScreen() && !collapsed() ? 'show' : 'hide'\"\n      (click)=\"toggleCollapse()\"\n    ></div>\n  }\n  <nav\n    tabindex=\"-1\"\n    class=\"bg-base-1 focus-sub-inside\"\n    [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n    [@collapse]=\"collapsed() ? 'collapsed' : 'expanded'\"\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-circle btn-sm 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]=\"searchInputDelay\"\n          [showIcon]=\"true\"\n          (searchChange)=\"doSearch($event)\"\n        />\n        <button\n          type=\"button\"\n          class=\"btn-search bg-base-0 p-2 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-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\" siNavbarVerticalItemGuard>\n  @switch (item.type) {\n    @case ('group') {\n      <button\n        type=\"button\"\n        [si-navbar-vertical-item]=\"item\"\n        [stateId]=\"item.id\"\n        [siNavbarVerticalGroupTriggerFor]=\"group\"\n        [groupData]=\"{ group: item }\"\n        [expanded]=\"\n          (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n        \"\n      >\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('action') {\n      <button type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('router-link') {\n      <a\n        routerLinkActive\n        [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n        [si-navbar-vertical-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 ('link') {\n      <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('divider') {\n      <si-navbar-vertical-divider />\n    }\n    @case ('header') {\n      <si-navbar-vertical-header>\n        {{ item.label | translate }}\n      </si-navbar-vertical-header>\n    }\n  }\n</ng-template>\n\n<ng-template #group let-group=\"group\" siNavbarVerticalItemGuard>\n  <si-navbar-vertical-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-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 type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n            {{ item.label | translate }}\n          </button>\n        }\n        @case ('link') {\n          <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n            {{ item.label | translate }}\n          </a>\n        }\n      }\n    }\n  </si-navbar-vertical-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}:host(.nav-collapsed) nav{z-index:1030}.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)}.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;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}}@media (min-width: 992px){:host:not(.nav-collapsed){padding-inline-start:240px}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { ready: [{
+                    ], template: "@if (visible()) {\n  @if (smallScreen() && !collapsed()) {\n    <div\n      class=\"modal-backdrop\"\n      [@backdrop]=\"smallScreen() && !collapsed() ? 'show' : 'hide'\"\n      (click)=\"toggleCollapse()\"\n    ></div>\n  }\n  <nav\n    tabindex=\"-1\"\n    class=\"bg-base-1 focus-sub-inside\"\n    [siSkipLinkTarget]=\"skipLinkNavigationLabel()\"\n    [@collapse]=\"collapsed() ? 'collapsed' : 'expanded'\"\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-circle btn-sm 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]=\"searchInputDelay\"\n          [showIcon]=\"true\"\n          (searchChange)=\"doSearch($event)\"\n        />\n        <button\n          type=\"button\"\n          class=\"btn-search bg-base-0 p-2 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-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\" siNavbarVerticalItemGuard>\n  @switch (item.type) {\n    @case ('group') {\n      <button\n        type=\"button\"\n        [si-navbar-vertical-item]=\"item\"\n        [stateId]=\"item.id\"\n        [siNavbarVerticalGroupTriggerFor]=\"group\"\n        [groupData]=\"{ group: item }\"\n        [expanded]=\"\n          (item.id ? uiStateExpandedItems()[item.id] : undefined) ?? item.expanded ?? false\n        \"\n      >\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('action') {\n      <button type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n        {{ item.label | translate }}\n      </button>\n    }\n    @case ('router-link') {\n      <a\n        routerLinkActive\n        [routerLinkActiveOptions]=\"item.activeMatchOptions ?? { exact: false }\"\n        [si-navbar-vertical-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 ('link') {\n      <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n        {{ item.label | translate }}\n      </a>\n    }\n    @case ('divider') {\n      <si-navbar-vertical-divider />\n    }\n    @case ('header') {\n      <si-navbar-vertical-header>\n        {{ item.label | translate }}\n      </si-navbar-vertical-header>\n    }\n  }\n</ng-template>\n\n<ng-template #group let-group=\"group\" siNavbarVerticalItemGuard>\n  <si-navbar-vertical-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-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 type=\"button\" [si-navbar-vertical-item]=\"item\" [activeOverride]=\"item.active\">\n            {{ item.label | translate }}\n          </button>\n        }\n        @case ('link') {\n          <a [si-navbar-vertical-item]=\"item\" [href]=\"item.href\" [target]=\"item.target\">\n            {{ item.label | translate }}\n          </a>\n        }\n      }\n    }\n  </si-navbar-vertical-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}:host(.nav-collapsed) nav{z-index:1030}.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)}.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;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}}@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 }] }], 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(() => SiNavbarVerticalItemComponent), { isSignal: true }] }], navbarItemsLegacy: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiNavbarVerticalItemLegacyComponent), { isSignal: true }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
 class SiNavbarVerticalModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalModule, imports: [SiNavbarVerticalComponent], exports: [SiNavbarVerticalComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalModule, imports: [SiNavbarVerticalComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalModule, imports: [SiNavbarVerticalComponent], exports: [SiNavbarVerticalComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalModule, imports: [SiNavbarVerticalComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiNavbarVerticalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiNavbarVerticalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SiNavbarVerticalComponent],