@scion/components 22.5.0 → 22.6.0

package/fesm2022/scion-components-menu.mjs

@@ -1,19 +1,19 @@
 import * as i0 from '@angular/core';
 import { untracked, inject, Injector, InjectionToken, computed, runInInjectionContext, effect, assertNotInReactiveContext, NgZone, DOCUMENT, DestroyRef, isSignal, Injectable, Pipe, input, createComponent, inputBinding, ElementRef, EnvironmentInjector, ApplicationRef, Component, model, viewChild, signal, viewChildren, linkedSignal, ViewContainerRef, onIdle, afterRenderEffect, Directive } from '@angular/core';
 import * as i1$1 from '@scion/components/common';
-import { coerceSignal, createDestroyableInjector, SciComponentOutletDirective, SciAttributesDirective, assertInInjectionContext } from '@scion/components/common';
+import { coerceSignal, ɵcreateDestroyableInjector as _createDestroyableInjector, SciComponentOutletDirective, SciAttributesDirective, ɵassertInInjectionContext as _assertInInjectionContext } from '@scion/components/common';
 import { Objects, Arrays, prune, Maps } from '@scion/toolkit/util';
 import { text, SciTextPipe } from '@scion/components/text';
-import { noop, merge, fromEvent, animationFrameScheduler, EMPTY } from 'rxjs';
+import { noop, merge, fromEvent, animationFrameScheduler, EMPTY, concat, of, timer } from 'rxjs';
 import { subscribeIn, observeIn } from '@scion/toolkit/operators';
 import { coerceElement } from '@angular/cdk/coercion';
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toObservable, rxResource } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { SciIconComponent } from '@scion/components/icon';
 import { NgTemplateOutlet } from '@angular/common';
-import { SciViewportComponent } from '@scion/components/viewport';
-import { filter, observeOn, raceWith, take, switchMap } from 'rxjs/operators';
+import { SciScrollbarComponent } from '@scion/components/viewport';
+import { filter, observeOn, raceWith, take, switchMap, map, startWith } from 'rxjs/operators';
 import { dimension } from '@scion/components/dimension';
 import { UUID } from '@scion/toolkit/uuid';
 
@@ -120,7 +120,6 @@ const SCI_MENU_ACCELERATOR_TARGET_PROVIDER = new InjectionToken('SCI_MENU_ACCELE
 /**
  * DI token to inject {@link SciMenuAcceleratorTargetProviderFn} functions provided in the current and parent injectors.
  *
- *
  * @see injectMenuAcceleratorTargets
  */
 const SCI_MENU_ACCELERATOR_TARGET_PROVIDERS = new InjectionToken('SCI_MENU_ACCELERATOR_TARGET_PROVIDERS');
@@ -151,7 +150,7 @@ const SCI_MENU_ACCELERATOR_TARGET_PROVIDERS = new InjectionToken('SCI_MENU_ACCEL
  * @experimental since 22.3.0; API and behavior may change in any version without notice.
  */
 function installMenuAccelerators(location, options) {
-    const injector = createDestroyableInjector({ parent: options?.injector ?? inject(Injector) });
+    const injector = _createDestroyableInjector({ parent: options?.injector ?? inject(Injector) });
     return runInInjectionContext(injector, () => {
         const environmentContext = injectMenuContext();
         const environmentTargets = injectMenuAcceleratorTargets();
@@ -186,7 +185,7 @@ function ɵinstallMenuAccelerators(menuItems, options) {
     if (!menuItemsWithAccelerator.length) {
         return { dispose: noop };
     }
-    const injector = createDestroyableInjector({ parent: options?.injector ?? inject(Injector) });
+    const injector = _createDestroyableInjector({ parent: options?.injector ?? inject(Injector) });
     const zone = injector.get(NgZone);
     const targets = coerceElements(options?.targets) ?? coerceElements(options?.environmentTargets) ?? [injector.get(DOCUMENT)];
     const onSelectFn = options?.onSelect ?? (menuItem => menuItem.onSelect?.());
@@ -500,9 +499,6 @@ class ɵSciMenuFactory {
             attributes: descriptor.attributes,
             onSelect: async () => await descriptor.onSelect() ?? descriptor.checked === undefined, // Returning `true` will close the popover. Non-checkable items close by default.
         }));
-        if (descriptor.checked && descriptor.icon) {
-            throw Error('[MenuDefinitionError] Cannot use `checked` and `icon` together.');
-        }
         return this;
     }
     /** @inheritDoc */
@@ -862,7 +858,7 @@ class SciMenuFilterComponent {
         this.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SciMenuFilterComponent, isStandalone: true, selector: "sci-menu-filter", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange" }, host: { listeners: { "focus": "focus()" }, properties: { "attr.tabindex": "-1" } }, viewQueries: [{ propertyName: "_inputField", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<input type=\"text\" autocomplete=\"off\" class=\"e2e-menu-filter-input\" [attr.placeholder]=\"placeholder()\" [(ngModel)]=\"text\" #input>\r\n<button class=\"clear\" (click)=\"onClear()\" [title]=\"('%scion.components.clear.tooltip' | sciText)()\" tabindex=\"-1\">\r\n  <sci-icon>scion.clear</sci-icon>\r\n</button>\r\n", styles: [":host{display:flex}:host>input{all:unset;flex:1 1 0;appearance:auto;width:0;min-width:0}:host>input::placeholder{color:var(--sci-color-gray-400)}:host>input:placeholder-shown+button:is(.clear,#sci-reset){visibility:hidden}:host>button:is(.clear,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-button-border-radius);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-button-cursor);--sci-icon-size: var(--sci-button-icon-size)}:host>button:is(.clear,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>button:is(.clear,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>button:is(.clear,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(.clear,#sci-reset):focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>button:is(.clear,#sci-reset):disabled{color:var(--sci-button-text-color-disabled)}:host>button:is(.clear,#sci-reset){padding:1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "pipe", type: SciTextPipe, name: "sciText" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.7", type: SciMenuFilterComponent, isStandalone: true, selector: "sci-menu-filter", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange" }, host: { listeners: { "focus": "focus()" }, properties: { "attr.tabindex": "-1" } }, viewQueries: [{ propertyName: "_inputField", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<input type=\"text\" autocomplete=\"off\" class=\"e2e-menu-filter-input\" [attr.placeholder]=\"placeholder()\" [(ngModel)]=\"text\" #input>\r\n<button class=\"clear\" (click)=\"onClear()\" [title]=\"('%scion:components:clear.tooltip' | sciText)()\" tabindex=\"-1\">\r\n  <sci-icon>scion:clear</sci-icon>\r\n</button>\r\n", styles: [":host{display:flex}:host>input{all:unset;flex:1 1 0;appearance:auto;width:0;min-width:0}:host>input::placeholder{color:var(--sci-color-gray-400)}:host>input:placeholder-shown+button:is(.clear,#sci-reset){visibility:hidden}:host>button:is(.clear,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-button-border-radius);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-button-cursor);--sci-icon-size: var(--sci-button-icon-size)}:host>button:is(.clear,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>button:is(.clear,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>button:is(.clear,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(.clear,#sci-reset):focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>button:is(.clear,#sci-reset):disabled{color:var(--sci-button-text-color-disabled)}:host>button:is(.clear,#sci-reset){padding:1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "pipe", type: SciTextPipe, name: "sciText" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuFilterComponent, decorators: [{
             type: Component,
@@ -873,7 +869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     ], host: {
                         '[attr.tabindex]': '-1', // enable delegation of programmatic focus requests
                         '(focus)': 'focus()',
-                    }, template: "<input type=\"text\" autocomplete=\"off\" class=\"e2e-menu-filter-input\" [attr.placeholder]=\"placeholder()\" [(ngModel)]=\"text\" #input>\r\n<button class=\"clear\" (click)=\"onClear()\" [title]=\"('%scion.components.clear.tooltip' | sciText)()\" tabindex=\"-1\">\r\n  <sci-icon>scion.clear</sci-icon>\r\n</button>\r\n", styles: [":host{display:flex}:host>input{all:unset;flex:1 1 0;appearance:auto;width:0;min-width:0}:host>input::placeholder{color:var(--sci-color-gray-400)}:host>input:placeholder-shown+button:is(.clear,#sci-reset){visibility:hidden}:host>button:is(.clear,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-button-border-radius);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-button-cursor);--sci-icon-size: var(--sci-button-icon-size)}:host>button:is(.clear,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>button:is(.clear,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>button:is(.clear,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(.clear,#sci-reset):focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>button:is(.clear,#sci-reset):disabled{color:var(--sci-button-text-color-disabled)}:host>button:is(.clear,#sci-reset){padding:1px}\n"] }]
+                    }, template: "<input type=\"text\" autocomplete=\"off\" class=\"e2e-menu-filter-input\" [attr.placeholder]=\"placeholder()\" [(ngModel)]=\"text\" #input>\r\n<button class=\"clear\" (click)=\"onClear()\" [title]=\"('%scion:components:clear.tooltip' | sciText)()\" tabindex=\"-1\">\r\n  <sci-icon>scion:clear</sci-icon>\r\n</button>\r\n", styles: [":host{display:flex}:host>input{all:unset;flex:1 1 0;appearance:auto;width:0;min-width:0}:host>input::placeholder{color:var(--sci-color-gray-400)}:host>input:placeholder-shown+button:is(.clear,#sci-reset){visibility:hidden}:host>button:is(.clear,#sci-reset){all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-button-border-radius);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-button-cursor);--sci-icon-size: var(--sci-button-icon-size)}:host>button:is(.clear,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>button:is(.clear,#sci-reset):active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>button:is(.clear,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(.clear,#sci-reset):focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>button:is(.clear,#sci-reset):disabled{color:var(--sci-button-text-color-disabled)}:host>button:is(.clear,#sci-reset){padding:1px}\n"] }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }, { type: i0.Output, args: ["textChange"] }], _inputField: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
 
 /*
@@ -1262,7 +1258,7 @@ class SciToolbarGroupComponent {
         return menuOpen;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciToolbarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciToolbarGroupComponent, isStandalone: true, selector: "sci-toolbar-group", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, popoverViewContainerRef: { classPropertyName: "popoverViewContainerRef", publicName: "popoverViewContainerRef", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-orientation": "orientation()" } }, viewQueries: [{ propertyName: "_childToolbarGroups", predicate: SciToolbarGroupComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@for (menuItem of menuItems(); track $index) {\r\n  @let disabled = this.disabled() || menuItem.disabled?.() || false;\r\n  @switch (menuItem.type) {\r\n    <!-- Toolbar Item -->\r\n    @case ('menu-item') {\r\n      @let isSplitButton = (menuItem.onSelect || menuItem.control) && menuItem.menu?.children?.length;\r\n\r\n      @if (isSplitButton) {\r\n        <sci-toolbar-split-button [class]=\"menuItem.cssClass\" #split_button_element>\r\n          <ng-container *ngTemplateOutlet=\"menu_item_template; context: {anchor: split_button_element.host}\"/>\r\n        </sci-toolbar-split-button>\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"menu_item_template\"/>\r\n      }\r\n\r\n      <!-- Template for rendering the content of a toolbar item. -->\r\n      <ng-template #menu_item_template let-anchor=\"anchor\">\r\n        <!-- Render push or toggle button. -->\r\n        @if (menuItem.onSelect) {\r\n          <button [attr.disabled]=\"disabled || null\"\r\n                  [attr.title]=\"menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()\"\r\n                  [class.checked]=\"menuItem.checked?.()\"\r\n                  [class]=\"menuItem.cssClass\" class=\"menu-item toolbar-button e2e-menu-item\"\r\n                  [sciAttributes]=\"menuItem.attributes\"\r\n                  (click)=\"onSelect(menuItem)\">\r\n            <!-- Render icon, if any. -->\r\n            <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n            <!-- Render label, if any. -->\r\n            <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n          </button>\r\n        } @else if (menuItem.control) {\r\n          <!-- Render custom control. -->\r\n          <sci-toolbar-control [attr.title]=\"menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()\"\r\n                               [class]=\"menuItem.cssClass\" class=\"e2e-menu-item\"\r\n                               [sciAttributes]=\"menuItem.attributes\">\r\n            <ng-container *sciComponentOutlet=\"menuItem.control\"/>\r\n          </sci-toolbar-control>\r\n        }\r\n\r\n        <!-- Render menu button. -->\r\n        @if (menuItem.menu?.children?.length) {\r\n          @let hasLabel = menuItem.labelText || menuItem.labelComponent;\r\n          @let hasIcon = menuItem.iconLigature || menuItem.iconComponent;\r\n          @let hasVisualMenuIndicator = menuItem.visualMenuIndicator ?? true;\r\n          @let hasIconChevron = hasVisualMenuIndicator && !isSplitButton && hasIcon && !hasLabel;\r\n          @let hasChevron = hasVisualMenuIndicator && (isSplitButton || !hasIconChevron);\r\n\r\n          <button [attr.disabled]=\"disabled || null\"\r\n                  [attr.title]=\"menuItem.tooltip?.()\"\r\n                  [class.menu-open]=\"activeMenuItem()?.menuItem === menuItem\"\r\n                  [class.menu-indicator]=\"hasIconChevron\"\r\n                  [class]=\"menuItem.cssClass\" class=\"menu-item e2e-menu-item\"\r\n                  [sciAttributes]=\"menuItem.attributes\"\r\n                  (click)=\"onToolbarMenuButtonClick(menuItem, anchor ?? menu_button)\"\r\n                  (mousedown)=\"onToolbarMenuButtonMouseDown(menuItem)\"\r\n                  (mouseleave)=\"onToolbarMenuButtonMouseLeave(menuItem)\"\r\n                  #menu_button>\r\n            @if (!isSplitButton) {\r\n              <!-- Render icon, if any. -->\r\n              <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              <!-- Render label, if any. -->\r\n              <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n            }\r\n            <!-- Render chevron to indicate dropdown. -->\r\n            @if (hasChevron) {\r\n              <sci-icon class=\"chevron\">scion.chevron_down</sci-icon>\r\n            }\r\n          </button>\r\n        }\r\n      </ng-template>\r\n    }\r\n    <!-- Toolbar Group -->\r\n    @case ('group') {\r\n      <sci-toolbar-group [menuItems]=\"menuItem.children\"\r\n                         [orientation]=\"orientation()\"\r\n                         [disabled]=\"disabled\"\r\n                         [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                         [class]=\"menuItem.cssClass\"/>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- Renders the icon of a menu item, if any. -->\r\n<ng-template #icon_template let-menuItem>\r\n  @if (menuItem.iconLigature) {\r\n    <sci-icon>\r\n      {{menuItem.iconLigature()}}\r\n    </sci-icon>\r\n  } @else if (menuItem.iconComponent) {\r\n    <sci-toolbar-icon>\r\n      <ng-container *sciComponentOutlet=\"menuItem.iconComponent\"/>\r\n    </sci-toolbar-icon>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Renders the label of a menu item, if any. -->\r\n<ng-template #label_template let-menuItem>\r\n  @if (menuItem.labelText) {\r\n    <sci-toolbar-label>\r\n      {{menuItem.labelText()}}\r\n    </sci-toolbar-label>\r\n  } @else if (menuItem.labelComponent) {\r\n    <sci-toolbar-label>\r\n      <ng-container *sciComponentOutlet=\"menuItem.labelComponent\"/>\r\n    </sci-toolbar-label>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--sci-icon-size: var(--sci-toolbar-item-size);--\\275sci-toolbar-item-padding-inline: calc(.5 * var(--sci-toolbar-item-size));--\\275sci-toolbar-item-padding-block: calc(.125 * var(--sci-toolbar-item-size));--\\275sci-toolbar-font-size: calc(.8125 * var(--sci-toolbar-item-size));--\\275sci-toolbar-item-border-size: 1px;font-size:var(--sci-toolbar-font-size, var(--\\275sci-toolbar-font-size));display:flex;gap:2px}:host[name]{min-height:calc(var(--sci-toolbar-item-size) + 2 * var(--\\275sci-toolbar-item-padding-block) + 2 * var(--\\275sci-toolbar-item-border-size));box-sizing:content-box}:host[data-orientation=vertical]{flex-direction:column}:host>sci-toolbar-group:not(:first-child):not(:has(>sci-toolbar-group:first-child)):before{content:\"\";background-color:var(--sci-color-border);margin:2px}:host>sci-toolbar-group:not(:first-child):not(:has(>sci-toolbar-group:first-child))[data-orientation=horizontal]:before{width:1px}:host>sci-toolbar-group:not(:first-child):not(:has(>sci-toolbar-group:first-child))[data-orientation=vertical]:before{height:1px}:host>sci-toolbar-group:not(:last-child):not(:has(+sci-toolbar-group)):after{content:\"\";background-color:var(--sci-color-border);margin:2px}:host>sci-toolbar-group:not(:last-child):not(:has(+sci-toolbar-group))[data-orientation=horizontal]:after{width:1px}:host>sci-toolbar-group:not(:last-child):not(:has(+sci-toolbar-group))[data-orientation=vertical]:after{height:1px}:host>sci-toolbar-split-button{display:flex;--\\275sci-toolbar-split-button: true}:host>sci-toolbar-split-button:has(>button:first-child.checked){--\\275sci-toolbar-split-button-checked: true}:host>sci-toolbar-split-button:has(>button:last-child.menu-open){--sci-toolbar-split-button-menu-open: true}:host>sci-toolbar-split-button:hover{--sci-toolbar-split-button-hover: true}:host>sci-toolbar-split-button:where(:hover,:has(>button:last-child.menu-open),:has(>button:first-child.checked),:has(>sci-toolbar-control:focus-within)):not(:has(>button:first-child:disabled)){--sci-toolbar-split-button-outline-visible: true}:host>sci-toolbar-split-button:focus-within{--sci-toolbar-split-button-focus-within: true}:host>sci-toolbar-split-button>sci-toolbar-control{border:var(--\\275sci-toolbar-item-border-size) solid var(--sci-color-border);border-radius:var(--sci-toolbar-item-border-radius);overflow:hidden}@container style(--sci-toolbar-split-button-outline-visible: true){@container not style(--sci-toolbar-item-border-color-hover: transparent){:host>sci-toolbar-split-button>sci-toolbar-control{border-color:var(--sci-toolbar-item-border-color-hover)}}:host>sci-toolbar-split-button>sci-toolbar-control{border-top-right-radius:0;border-bottom-right-radius:0}}:host button:is(.menu-item,#sci-reset){all:unset;display:inline-flex;gap:.3em;place-content:center;align-items:center;text-wrap:nowrap;padding:var(--\\275sci-toolbar-item-padding-block) var(--\\275sci-toolbar-item-padding-inline);border-radius:var(--sci-toolbar-item-border-radius);border:var(--\\275sci-toolbar-item-border-size) solid transparent;color:var(--sci-toolbar-item-text-color);background-color:var(--sci-toolbar-item-background-color);-webkit-user-select:none;user-select:none;cursor:var(--sci-toolbar-item-cursor)}:host button:is(.menu-item,#sci-reset):not(:has(>sci-toolbar-label)){--\\275sci-toolbar-item-padding-inline: var(--\\275sci-toolbar-item-padding-block)}@container style(--\\275sci-toolbar-split-button: true){:host button:is(.menu-item,#sci-reset):first-child{border-top-right-radius:0;border-bottom-right-radius:0}@container style(--sci-toolbar-split-button-menu-open: true) or (style(--\\275sci-toolbar-split-button-checked: true) and (not style(--sci-toolbar-split-button-hover: true))){:host button:is(.menu-item,#sci-reset):first-child{border-right:0;padding-right:calc(var(--\\275sci-toolbar-item-padding-inline) + 1px)}}:host button:is(.menu-item,#sci-reset):last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;padding:0 .125em}@container style(--sci-toolbar-split-button-outline-visible: true){:host button:is(.menu-item,#sci-reset){border-color:var(--sci-color-border)}@container not style(--sci-toolbar-item-border-color-hover: transparent){:host button:is(.menu-item,#sci-reset){border-color:var(--sci-toolbar-item-border-color-hover)}}}@container style(--\\275sci-toolbar-split-button-checked: true){:host button:is(.menu-item,#sci-reset){border-color:var(--sci-toolbar-item-border-color-checked)}:host button:is(.menu-item,#sci-reset):not(:disabled){background-color:var(--sci-toolbar-item-background-color-checked)}}:host button:is(.menu-item,#sci-reset):focus-visible{border-radius:var(--sci-toolbar-item-border-radius);position:relative}}:host button:is(.menu-item,#sci-reset)>sci-toolbar-icon{display:inline-grid;height:var(--sci-toolbar-item-size);width:var(--sci-toolbar-item-size);overflow:hidden}:host button:is(.menu-item,#sci-reset):has(>sci-toolbar-label)>sci-icon.chevron{margin-left:calc(var(--\\275sci-toolbar-item-padding-inline) / 2)}:host button:is(.menu-item,#sci-reset)>sci-icon.chevron{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,#sci-reset).menu-indicator{position:relative}:host button:is(.menu-item,#sci-reset).menu-indicator:after{content:\"\";position:absolute;box-sizing:border-box;width:var(--sci-toolbar-item-menu-indicator-size);height:var(--sci-toolbar-item-menu-indicator-size);border:var(--sci-toolbar-item-menu-indicator-size) solid transparent;border-right-color:var(--sci-toolbar-item-menu-indicator-color);border-bottom-color:var(--sci-toolbar-item-menu-indicator-color);bottom:calc(var(--sci-corner) / 4);right:calc(var(--sci-corner) / 4)}:host button:is(.menu-item,#sci-reset).menu-indicator:disabled:after{border-right-color:var(--sci-toolbar-item-menu-indicator-color-disabled);border-bottom-color:var(--sci-toolbar-item-menu-indicator-color-disabled)}@container not style(--\\275sci-toolbar-split-button: true){:host button:is(.menu-item,#sci-reset).checked{border-color:var(--sci-toolbar-item-border-color-checked)}:host button:is(.menu-item,#sci-reset).checked:not(:disabled){background-color:var(--sci-toolbar-item-background-color-checked)}@container not style(--sci-toolbar-item-border-color-hover: transparent){:host button:is(.menu-item,#sci-reset):hover{border-color:var(--sci-toolbar-item-border-color-hover)}}}:host button:is(.menu-item,#sci-reset):disabled{color:var(--sci-toolbar-item-text-color-disabled)}:host button:is(.menu-item,#sci-reset):hover:not(:disabled){background-color:var(--sci-toolbar-item-background-color-hover)}:host button:is(.menu-item,#sci-reset):active:not(:disabled){background-color:var(--sci-toolbar-item-background-color-active)}:host button:is(.menu-item,#sci-reset):focus:not(:focus-visible){outline:none}:host button:is(.menu-item,#sci-reset):focus-visible{outline:var(--sci-toolbar-item-outline-width) solid var(--sci-color-accent)}:host button:is(.menu-item,#sci-reset).menu-open{background-color:var(--sci-toolbar-item-background-color-hover)}@container style(--sci-toolbar-split-button-menu-open: true){:host button:is(.menu-item,#sci-reset){background-color:var(--sci-toolbar-item-background-color-hover)}}\n"], dependencies: [{ kind: "component", type: SciToolbarGroupComponent, selector: "sci-toolbar-group", inputs: ["menuItems", "orientation", "disabled", "popoverViewContainerRef"] }, { kind: "directive", type: SciComponentOutletDirective, selector: "ng-template[sciComponentOutlet]", inputs: ["sciComponentOutlet"] }, { kind: "directive", type: SciAttributesDirective, selector: "[sciAttributes]", inputs: ["sciAttributes"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "component", type: SciToolbarSplitButtonComponent, selector: "sci-toolbar-split-button" }, { kind: "component", type: SciToolbarControlComponent, selector: "sci-toolbar-control" }, { kind: "component", type: SciToolbarIconComponent, selector: "sci-toolbar-icon" }, { kind: "component", type: SciToolbarLabelComponent, selector: "sci-toolbar-label" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SciFormatAcceleratorPipe, name: "sciFormatAccelerator" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciToolbarGroupComponent, isStandalone: true, selector: "sci-toolbar-group", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, popoverViewContainerRef: { classPropertyName: "popoverViewContainerRef", publicName: "popoverViewContainerRef", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-orientation": "orientation()" } }, viewQueries: [{ propertyName: "_childToolbarGroups", predicate: SciToolbarGroupComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@for (menuItem of menuItems(); track $index) {\r\n  @let disabled = this.disabled() || menuItem.disabled?.() || false;\r\n  @switch (menuItem.type) {\r\n    <!-- Toolbar Item -->\r\n    @case ('menu-item') {\r\n      @let isSplitButton = (menuItem.onSelect || menuItem.control) && menuItem.menu?.children?.length;\r\n\r\n      @if (isSplitButton) {\r\n        <sci-toolbar-split-button [class]=\"menuItem.cssClass\" #split_button_element>\r\n          <ng-container *ngTemplateOutlet=\"menu_item_template; context: {anchor: split_button_element.host}\"/>\r\n        </sci-toolbar-split-button>\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"menu_item_template\"/>\r\n      }\r\n\r\n      <!-- Template for rendering the content of a toolbar item. -->\r\n      <ng-template #menu_item_template let-anchor=\"anchor\">\r\n        <!-- Render push or toggle button. -->\r\n        @if (menuItem.onSelect) {\r\n          <button [attr.disabled]=\"disabled || null\"\r\n                  [attr.title]=\"menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()\"\r\n                  [class.checked]=\"menuItem.checked?.()\"\r\n                  [class]=\"menuItem.cssClass\" class=\"menu-item toolbar-button e2e-menu-item\"\r\n                  [sciAttributes]=\"menuItem.attributes\"\r\n                  (click)=\"onSelect(menuItem)\">\r\n            <!-- Render icon, if any. -->\r\n            <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n            <!-- Render label, if any. -->\r\n            <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n          </button>\r\n        } @else if (menuItem.control) {\r\n          <!-- Render custom control. -->\r\n          <sci-toolbar-control [attr.title]=\"menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()\"\r\n                               [class]=\"menuItem.cssClass\" class=\"e2e-menu-item\"\r\n                               [sciAttributes]=\"menuItem.attributes\">\r\n            <ng-container *sciComponentOutlet=\"menuItem.control\"/>\r\n          </sci-toolbar-control>\r\n        }\r\n\r\n        <!-- Render menu button. -->\r\n        @if (menuItem.menu?.children?.length) {\r\n          @let hasLabel = menuItem.labelText || menuItem.labelComponent;\r\n          @let hasIcon = menuItem.iconLigature || menuItem.iconComponent;\r\n          @let hasVisualMenuIndicator = menuItem.visualMenuIndicator ?? true;\r\n          @let hasIconChevron = hasVisualMenuIndicator && !isSplitButton && hasIcon && !hasLabel;\r\n          @let hasChevron = hasVisualMenuIndicator && (isSplitButton || !hasIconChevron);\r\n\r\n          <button [attr.disabled]=\"disabled || null\"\r\n                  [attr.title]=\"menuItem.tooltip?.()\"\r\n                  [class.menu-open]=\"activeMenuItem()?.menuItem === menuItem\"\r\n                  [class.menu-indicator]=\"hasIconChevron\"\r\n                  [class]=\"menuItem.cssClass\" class=\"menu-item e2e-menu-item\"\r\n                  [sciAttributes]=\"menuItem.attributes\"\r\n                  (click)=\"onToolbarMenuButtonClick(menuItem, anchor ?? menu_button)\"\r\n                  (mousedown)=\"onToolbarMenuButtonMouseDown(menuItem)\"\r\n                  (mouseleave)=\"onToolbarMenuButtonMouseLeave(menuItem)\"\r\n                  #menu_button>\r\n            @if (!isSplitButton) {\r\n              <!-- Render icon, if any. -->\r\n              <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              <!-- Render label, if any. -->\r\n              <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n            }\r\n            <!-- Render chevron to indicate dropdown. -->\r\n            @if (hasChevron) {\r\n              <sci-icon class=\"chevron\">scion:chevron_down</sci-icon>\r\n            }\r\n          </button>\r\n        }\r\n      </ng-template>\r\n    }\r\n    <!-- Toolbar Group -->\r\n    @case ('group') {\r\n      <sci-toolbar-group [menuItems]=\"menuItem.children\"\r\n                         [orientation]=\"orientation()\"\r\n                         [disabled]=\"disabled\"\r\n                         [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                         [class]=\"menuItem.cssClass\"/>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- Renders the icon of a menu item, if any. -->\r\n<ng-template #icon_template let-menuItem>\r\n  @if (menuItem.iconLigature) {\r\n    <sci-icon>\r\n      {{menuItem.iconLigature()}}\r\n    </sci-icon>\r\n  } @else if (menuItem.iconComponent) {\r\n    <sci-toolbar-icon>\r\n      <ng-container *sciComponentOutlet=\"menuItem.iconComponent\"/>\r\n    </sci-toolbar-icon>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Renders the label of a menu item, if any. -->\r\n<ng-template #label_template let-menuItem>\r\n  @if (menuItem.labelText) {\r\n    <sci-toolbar-label>\r\n      {{menuItem.labelText()}}\r\n    </sci-toolbar-label>\r\n  } @else if (menuItem.labelComponent) {\r\n    <sci-toolbar-label>\r\n      <ng-container *sciComponentOutlet=\"menuItem.labelComponent\"/>\r\n    </sci-toolbar-label>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--sci-icon-size: var(--sci-toolbar-item-size);--\\275sci-toolbar-item-padding-inline: calc(.5 * var(--sci-toolbar-item-size));--\\275sci-toolbar-item-padding-block: calc(.125 * var(--sci-toolbar-item-size));--\\275sci-toolbar-font-size: calc(.8125 * var(--sci-toolbar-item-size));--\\275sci-toolbar-item-border-size: 1px;font-size:var(--sci-toolbar-font-size, var(--\\275sci-toolbar-font-size));display:flex;gap:2px}:host[name]{min-height:calc(var(--sci-toolbar-item-size) + 2 * var(--\\275sci-toolbar-item-padding-block) + 2 * var(--\\275sci-toolbar-item-border-size));box-sizing:content-box}:host[data-orientation=vertical]{flex-direction:column}:host>sci-toolbar-group:not(:first-child):not(:has(>sci-toolbar-group:first-child)):before{content:\"\";background-color:var(--sci-color-border);margin:2px}:host>sci-toolbar-group:not(:first-child):not(:has(>sci-toolbar-group:first-child))[data-orientation=horizontal]:before{width:1px}:host>sci-toolbar-group:not(:first-child):not(:has(>sci-toolbar-group:first-child))[data-orientation=vertical]:before{height:1px}:host>sci-toolbar-group:not(:last-child):not(:has(+sci-toolbar-group)):after{content:\"\";background-color:var(--sci-color-border);margin:2px}:host>sci-toolbar-group:not(:last-child):not(:has(+sci-toolbar-group))[data-orientation=horizontal]:after{width:1px}:host>sci-toolbar-group:not(:last-child):not(:has(+sci-toolbar-group))[data-orientation=vertical]:after{height:1px}:host>sci-toolbar-split-button{display:flex;--\\275sci-toolbar-split-button: true}:host>sci-toolbar-split-button:has(>button:first-child.checked){--\\275sci-toolbar-split-button-checked: true}:host>sci-toolbar-split-button:has(>button:last-child.menu-open){--sci-toolbar-split-button-menu-open: true}:host>sci-toolbar-split-button:hover{--sci-toolbar-split-button-hover: true}:host>sci-toolbar-split-button:where(:hover,:has(>button:last-child.menu-open),:has(>button:first-child.checked),:has(>sci-toolbar-control:focus-within)):not(:has(>button:first-child:disabled)){--sci-toolbar-split-button-outline-visible: true}:host>sci-toolbar-split-button:focus-within{--sci-toolbar-split-button-focus-within: true}:host>sci-toolbar-split-button>sci-toolbar-control{border:var(--\\275sci-toolbar-item-border-size) solid var(--sci-color-border);border-radius:var(--sci-toolbar-item-border-radius);overflow:hidden}@container style(--sci-toolbar-split-button-outline-visible: true){@container not style(--sci-toolbar-item-border-color-hover: transparent){:host>sci-toolbar-split-button>sci-toolbar-control{border-color:var(--sci-toolbar-item-border-color-hover)}}:host>sci-toolbar-split-button>sci-toolbar-control{border-top-right-radius:0;border-bottom-right-radius:0}}:host button:is(.menu-item,#sci-reset){all:unset;display:inline-flex;gap:.3em;place-content:center;align-items:center;text-wrap:nowrap;padding:var(--\\275sci-toolbar-item-padding-block) var(--\\275sci-toolbar-item-padding-inline);border-radius:var(--sci-toolbar-item-border-radius);border:var(--\\275sci-toolbar-item-border-size) solid transparent;color:var(--sci-toolbar-item-text-color);background-color:var(--sci-toolbar-item-background-color);-webkit-user-select:none;user-select:none;cursor:var(--sci-toolbar-item-cursor)}:host button:is(.menu-item,#sci-reset):not(:has(>sci-toolbar-label)){--\\275sci-toolbar-item-padding-inline: var(--\\275sci-toolbar-item-padding-block)}@container style(--\\275sci-toolbar-split-button: true){:host button:is(.menu-item,#sci-reset):first-child{border-top-right-radius:0;border-bottom-right-radius:0}@container style(--sci-toolbar-split-button-menu-open: true) or (style(--\\275sci-toolbar-split-button-checked: true) and (not style(--sci-toolbar-split-button-hover: true))){:host button:is(.menu-item,#sci-reset):first-child{border-right:0;padding-right:calc(var(--\\275sci-toolbar-item-padding-inline) + 1px)}}:host button:is(.menu-item,#sci-reset):last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;padding:0 .125em}@container style(--sci-toolbar-split-button-outline-visible: true){:host button:is(.menu-item,#sci-reset){border-color:var(--sci-color-border)}@container not style(--sci-toolbar-item-border-color-hover: transparent){:host button:is(.menu-item,#sci-reset){border-color:var(--sci-toolbar-item-border-color-hover)}}}@container style(--\\275sci-toolbar-split-button-checked: true){:host button:is(.menu-item,#sci-reset){border-color:var(--sci-toolbar-item-border-color-checked)}:host button:is(.menu-item,#sci-reset):not(:disabled){background-color:var(--sci-toolbar-item-background-color-checked)}}:host button:is(.menu-item,#sci-reset):focus-visible{border-radius:var(--sci-toolbar-item-border-radius);position:relative}}:host button:is(.menu-item,#sci-reset)>sci-toolbar-icon{display:inline-grid;height:var(--sci-toolbar-item-size);width:var(--sci-toolbar-item-size);overflow:hidden}:host button:is(.menu-item,#sci-reset):has(>sci-toolbar-label)>sci-icon.chevron{margin-left:calc(var(--\\275sci-toolbar-item-padding-inline) / 2)}:host button:is(.menu-item,#sci-reset)>sci-icon.chevron{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,#sci-reset).menu-indicator{position:relative}:host button:is(.menu-item,#sci-reset).menu-indicator:after{content:\"\";position:absolute;box-sizing:border-box;width:var(--sci-toolbar-item-menu-indicator-size);height:var(--sci-toolbar-item-menu-indicator-size);border:var(--sci-toolbar-item-menu-indicator-size) solid transparent;border-right-color:var(--sci-toolbar-item-menu-indicator-color);border-bottom-color:var(--sci-toolbar-item-menu-indicator-color);bottom:calc(var(--sci-corner) / 4);right:calc(var(--sci-corner) / 4)}:host button:is(.menu-item,#sci-reset).menu-indicator:disabled:after{border-right-color:var(--sci-toolbar-item-menu-indicator-color-disabled);border-bottom-color:var(--sci-toolbar-item-menu-indicator-color-disabled)}@container not style(--\\275sci-toolbar-split-button: true){:host button:is(.menu-item,#sci-reset).checked{border-color:var(--sci-toolbar-item-border-color-checked)}:host button:is(.menu-item,#sci-reset).checked:not(:disabled){background-color:var(--sci-toolbar-item-background-color-checked)}@container not style(--sci-toolbar-item-border-color-hover: transparent){:host button:is(.menu-item,#sci-reset):hover{border-color:var(--sci-toolbar-item-border-color-hover)}}}:host button:is(.menu-item,#sci-reset):disabled{color:var(--sci-toolbar-item-text-color-disabled)}:host button:is(.menu-item,#sci-reset):hover:not(:disabled){background-color:var(--sci-toolbar-item-background-color-hover)}:host button:is(.menu-item,#sci-reset):active:not(:disabled){background-color:var(--sci-toolbar-item-background-color-active)}:host button:is(.menu-item,#sci-reset):focus:not(:focus-visible){outline:none}:host button:is(.menu-item,#sci-reset):focus-visible{outline:var(--sci-toolbar-item-outline-width) solid var(--sci-color-accent)}:host button:is(.menu-item,#sci-reset).menu-open{background-color:var(--sci-toolbar-item-background-color-hover)}@container style(--sci-toolbar-split-button-menu-open: true){:host button:is(.menu-item,#sci-reset){background-color:var(--sci-toolbar-item-background-color-hover)}}\n"], dependencies: [{ kind: "component", type: SciToolbarGroupComponent, selector: "sci-toolbar-group", inputs: ["menuItems", "orientation", "disabled", "popoverViewContainerRef"] }, { kind: "directive", type: SciComponentOutletDirective, selector: "ng-template[sciComponentOutlet]", inputs: ["sciComponentOutlet"] }, { kind: "directive", type: SciAttributesDirective, selector: "[sciAttributes]", inputs: ["sciAttributes"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "component", type: SciToolbarSplitButtonComponent, selector: "sci-toolbar-split-button" }, { kind: "component", type: SciToolbarControlComponent, selector: "sci-toolbar-control" }, { kind: "component", type: SciToolbarIconComponent, selector: "sci-toolbar-icon" }, { kind: "component", type: SciToolbarLabelComponent, selector: "sci-toolbar-label" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SciFormatAcceleratorPipe, name: "sciFormatAccelerator" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciToolbarGroupComponent, decorators: [{
             type: Component,
@@ -1278,7 +1274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         NgTemplateOutlet,
                     ], host: {
                         '[attr.data-orientation]': 'orientation()',
-                    }, template: "@for (menuItem of menuItems(); track $index) {\r\n  @let disabled = this.disabled() || menuItem.disabled?.() || false;\r\n  @switch (menuItem.type) {\r\n    <!-- Toolbar Item -->\r\n    @case ('menu-item') {\r\n      @let isSplitButton = (menuItem.onSelect || menuItem.control) && menuItem.menu?.children?.length;\r\n\r\n      @if (isSplitButton) {\r\n        <sci-toolbar-split-button [class]=\"menuItem.cssClass\" #split_button_element>\r\n          <ng-container *ngTemplateOutlet=\"menu_item_template; context: {anchor: split_button_element.host}\"/>\r\n        </sci-toolbar-split-button>\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"menu_item_template\"/>\r\n      }\r\n\r\n      <!-- Template for rendering the content of a toolbar item. -->\r\n      <ng-template #menu_item_template let-anchor=\"anchor\">\r\n        <!-- Render push or toggle button. -->\r\n        @if (menuItem.onSelect) {\r\n          <button [attr.disabled]=\"disabled || null\"\r\n                  [attr.title]=\"menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()\"\r\n                  [class.checked]=\"menuItem.checked?.()\"\r\n                  [class]=\"menuItem.cssClass\" class=\"menu-item toolbar-button e2e-menu-item\"\r\n                  [sciAttributes]=\"menuItem.attributes\"\r\n                  (click)=\"onSelect(menuItem)\">\r\n            <!-- Render icon, if any. -->\r\n            <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n            <!-- Render label, if any. -->\r\n            <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n          </button>\r\n        } @else if (menuItem.control) {\r\n          <!-- Render custom control. -->\r\n          <sci-toolbar-control [attr.title]=\"menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()\"\r\n                               [class]=\"menuItem.cssClass\" class=\"e2e-menu-item\"\r\n                               [sciAttributes]=\"menuItem.attributes\">\r\n            <ng-container *sciComponentOutlet=\"menuItem.control\"/>\r\n          </sci-toolbar-control>\r\n        }\r\n\r\n        <!-- Render menu button. -->\r\n        @if (menuItem.menu?.children?.length) {\r\n          @let hasLabel = menuItem.labelText || menuItem.labelComponent;\r\n          @let hasIcon = menuItem.iconLigature || menuItem.iconComponent;\r\n          @let hasVisualMenuIndicator = menuItem.visualMenuIndicator ?? true;\r\n          @let hasIconChevron = hasVisualMenuIndicator && !isSplitButton && hasIcon && !hasLabel;\r\n          @let hasChevron = hasVisualMenuIndicator && (isSplitButton || !hasIconChevron);\r\n\r\n          <button [attr.disabled]=\"disabled || null\"\r\n                  [attr.title]=\"menuItem.tooltip?.()\"\r\n                  [class.menu-open]=\"activeMenuItem()?.menuItem === menuItem\"\r\n                  [class.menu-indicator]=\"hasIconChevron\"\r\n                  [class]=\"menuItem.cssClass\" class=\"menu-item e2e-menu-item\"\r\n                  [sciAttributes]=\"menuItem.attributes\"\r\n                  (click)=\"onToolbarMenuButtonClick(menuItem, anchor ?? menu_button)\"\r\n                  (mousedown)=\"onToolbarMenuButtonMouseDown(menuItem)\"\r\n                  (mouseleave)=\"onToolbarMenuButtonMouseLeave(menuItem)\"\r\n                  #menu_button>\r\n            @if (!isSplitButton) {\r\n              <!-- Render icon, if any. -->\r\n              <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              <!-- Render label, if any. -->\r\n              <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n            }\r\n            <!-- Render chevron to indicate dropdown. -->\r\n            @if (hasChevron) {\r\n              <sci-icon class=\"chevron\">scion.chevron_down</sci-icon>\r\n            }\r\n          </button>\r\n        }\r\n      </ng-template>\r\n    }\r\n    <!-- Toolbar Group -->\r\n    @case ('group') {\r\n      <sci-toolbar-group [menuItems]=\"menuItem.children\"\r\n                         [orientation]=\"orientation()\"\r\n                         [disabled]=\"disabled\"\r\n                         [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                         [class]=\"menuItem.cssClass\"/>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- Renders the icon of a menu item, if any. -->\r\n<ng-template #icon_template let-menuItem>\r\n  @if (menuItem.iconLigature) {\r\n    <sci-icon>\r\n      {{menuItem.iconLigature()}}\r\n    </sci-icon>\r\n  } @else if (menuItem.iconComponent) {\r\n    <sci-toolbar-icon>\r\n      <ng-container *sciComponentOutlet=\"menuItem.iconComponent\"/>\r\n    </sci-toolbar-icon>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Renders the label of a menu item, if any. -->\r\n<ng-template #label_template let-menuItem>\r\n  @if (menuItem.labelText) {\r\n    <sci-toolbar-label>\r\n      {{menuItem.labelText()}}\r\n    </sci-toolbar-label>\r\n  } @else if (menuItem.labelComponent) {\r\n    <sci-toolbar-label>\r\n      <ng-container *sciComponentOutlet=\"menuItem.labelComponent\"/>\r\n    </sci-toolbar-label>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--sci-icon-size: var(--sci-toolbar-item-size);--\\275sci-toolbar-item-padding-inline: calc(.5 * var(--sci-toolbar-item-size));--\\275sci-toolbar-item-padding-block: calc(.125 * var(--sci-toolbar-item-size));--\\275sci-toolbar-font-size: calc(.8125 * var(--sci-toolbar-item-size));--\\275sci-toolbar-item-border-size: 1px;font-size:var(--sci-toolbar-font-size, var(--\\275sci-toolbar-font-size));display:flex;gap:2px}:host[name]{min-height:calc(var(--sci-toolbar-item-size) + 2 * var(--\\275sci-toolbar-item-padding-block) + 2 * var(--\\275sci-toolbar-item-border-size));box-sizing:content-box}:host[data-orientation=vertical]{flex-direction:column}:host>sci-toolbar-group:not(:first-child):not(:has(>sci-toolbar-group:first-child)):before{content:\"\";background-color:var(--sci-color-border);margin:2px}:host>sci-toolbar-group:not(:first-child):not(:has(>sci-toolbar-group:first-child))[data-orientation=horizontal]:before{width:1px}:host>sci-toolbar-group:not(:first-child):not(:has(>sci-toolbar-group:first-child))[data-orientation=vertical]:before{height:1px}:host>sci-toolbar-group:not(:last-child):not(:has(+sci-toolbar-group)):after{content:\"\";background-color:var(--sci-color-border);margin:2px}:host>sci-toolbar-group:not(:last-child):not(:has(+sci-toolbar-group))[data-orientation=horizontal]:after{width:1px}:host>sci-toolbar-group:not(:last-child):not(:has(+sci-toolbar-group))[data-orientation=vertical]:after{height:1px}:host>sci-toolbar-split-button{display:flex;--\\275sci-toolbar-split-button: true}:host>sci-toolbar-split-button:has(>button:first-child.checked){--\\275sci-toolbar-split-button-checked: true}:host>sci-toolbar-split-button:has(>button:last-child.menu-open){--sci-toolbar-split-button-menu-open: true}:host>sci-toolbar-split-button:hover{--sci-toolbar-split-button-hover: true}:host>sci-toolbar-split-button:where(:hover,:has(>button:last-child.menu-open),:has(>button:first-child.checked),:has(>sci-toolbar-control:focus-within)):not(:has(>button:first-child:disabled)){--sci-toolbar-split-button-outline-visible: true}:host>sci-toolbar-split-button:focus-within{--sci-toolbar-split-button-focus-within: true}:host>sci-toolbar-split-button>sci-toolbar-control{border:var(--\\275sci-toolbar-item-border-size) solid var(--sci-color-border);border-radius:var(--sci-toolbar-item-border-radius);overflow:hidden}@container style(--sci-toolbar-split-button-outline-visible: true){@container not style(--sci-toolbar-item-border-color-hover: transparent){:host>sci-toolbar-split-button>sci-toolbar-control{border-color:var(--sci-toolbar-item-border-color-hover)}}:host>sci-toolbar-split-button>sci-toolbar-control{border-top-right-radius:0;border-bottom-right-radius:0}}:host button:is(.menu-item,#sci-reset){all:unset;display:inline-flex;gap:.3em;place-content:center;align-items:center;text-wrap:nowrap;padding:var(--\\275sci-toolbar-item-padding-block) var(--\\275sci-toolbar-item-padding-inline);border-radius:var(--sci-toolbar-item-border-radius);border:var(--\\275sci-toolbar-item-border-size) solid transparent;color:var(--sci-toolbar-item-text-color);background-color:var(--sci-toolbar-item-background-color);-webkit-user-select:none;user-select:none;cursor:var(--sci-toolbar-item-cursor)}:host button:is(.menu-item,#sci-reset):not(:has(>sci-toolbar-label)){--\\275sci-toolbar-item-padding-inline: var(--\\275sci-toolbar-item-padding-block)}@container style(--\\275sci-toolbar-split-button: true){:host button:is(.menu-item,#sci-reset):first-child{border-top-right-radius:0;border-bottom-right-radius:0}@container style(--sci-toolbar-split-button-menu-open: true) or (style(--\\275sci-toolbar-split-button-checked: true) and (not style(--sci-toolbar-split-button-hover: true))){:host button:is(.menu-item,#sci-reset):first-child{border-right:0;padding-right:calc(var(--\\275sci-toolbar-item-padding-inline) + 1px)}}:host button:is(.menu-item,#sci-reset):last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;padding:0 .125em}@container style(--sci-toolbar-split-button-outline-visible: true){:host button:is(.menu-item,#sci-reset){border-color:var(--sci-color-border)}@container not style(--sci-toolbar-item-border-color-hover: transparent){:host button:is(.menu-item,#sci-reset){border-color:var(--sci-toolbar-item-border-color-hover)}}}@container style(--\\275sci-toolbar-split-button-checked: true){:host button:is(.menu-item,#sci-reset){border-color:var(--sci-toolbar-item-border-color-checked)}:host button:is(.menu-item,#sci-reset):not(:disabled){background-color:var(--sci-toolbar-item-background-color-checked)}}:host button:is(.menu-item,#sci-reset):focus-visible{border-radius:var(--sci-toolbar-item-border-radius);position:relative}}:host button:is(.menu-item,#sci-reset)>sci-toolbar-icon{display:inline-grid;height:var(--sci-toolbar-item-size);width:var(--sci-toolbar-item-size);overflow:hidden}:host button:is(.menu-item,#sci-reset):has(>sci-toolbar-label)>sci-icon.chevron{margin-left:calc(var(--\\275sci-toolbar-item-padding-inline) / 2)}:host button:is(.menu-item,#sci-reset)>sci-icon.chevron{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,#sci-reset).menu-indicator{position:relative}:host button:is(.menu-item,#sci-reset).menu-indicator:after{content:\"\";position:absolute;box-sizing:border-box;width:var(--sci-toolbar-item-menu-indicator-size);height:var(--sci-toolbar-item-menu-indicator-size);border:var(--sci-toolbar-item-menu-indicator-size) solid transparent;border-right-color:var(--sci-toolbar-item-menu-indicator-color);border-bottom-color:var(--sci-toolbar-item-menu-indicator-color);bottom:calc(var(--sci-corner) / 4);right:calc(var(--sci-corner) / 4)}:host button:is(.menu-item,#sci-reset).menu-indicator:disabled:after{border-right-color:var(--sci-toolbar-item-menu-indicator-color-disabled);border-bottom-color:var(--sci-toolbar-item-menu-indicator-color-disabled)}@container not style(--\\275sci-toolbar-split-button: true){:host button:is(.menu-item,#sci-reset).checked{border-color:var(--sci-toolbar-item-border-color-checked)}:host button:is(.menu-item,#sci-reset).checked:not(:disabled){background-color:var(--sci-toolbar-item-background-color-checked)}@container not style(--sci-toolbar-item-border-color-hover: transparent){:host button:is(.menu-item,#sci-reset):hover{border-color:var(--sci-toolbar-item-border-color-hover)}}}:host button:is(.menu-item,#sci-reset):disabled{color:var(--sci-toolbar-item-text-color-disabled)}:host button:is(.menu-item,#sci-reset):hover:not(:disabled){background-color:var(--sci-toolbar-item-background-color-hover)}:host button:is(.menu-item,#sci-reset):active:not(:disabled){background-color:var(--sci-toolbar-item-background-color-active)}:host button:is(.menu-item,#sci-reset):focus:not(:focus-visible){outline:none}:host button:is(.menu-item,#sci-reset):focus-visible{outline:var(--sci-toolbar-item-outline-width) solid var(--sci-color-accent)}:host button:is(.menu-item,#sci-reset).menu-open{background-color:var(--sci-toolbar-item-background-color-hover)}@container style(--sci-toolbar-split-button-menu-open: true){:host button:is(.menu-item,#sci-reset){background-color:var(--sci-toolbar-item-background-color-hover)}}\n"] }]
+                    }, template: "@for (menuItem of menuItems(); track $index) {\r\n  @let disabled = this.disabled() || menuItem.disabled?.() || false;\r\n  @switch (menuItem.type) {\r\n    <!-- Toolbar Item -->\r\n    @case ('menu-item') {\r\n      @let isSplitButton = (menuItem.onSelect || menuItem.control) && menuItem.menu?.children?.length;\r\n\r\n      @if (isSplitButton) {\r\n        <sci-toolbar-split-button [class]=\"menuItem.cssClass\" #split_button_element>\r\n          <ng-container *ngTemplateOutlet=\"menu_item_template; context: {anchor: split_button_element.host}\"/>\r\n        </sci-toolbar-split-button>\r\n      } @else {\r\n        <ng-container *ngTemplateOutlet=\"menu_item_template\"/>\r\n      }\r\n\r\n      <!-- Template for rendering the content of a toolbar item. -->\r\n      <ng-template #menu_item_template let-anchor=\"anchor\">\r\n        <!-- Render push or toggle button. -->\r\n        @if (menuItem.onSelect) {\r\n          <button [attr.disabled]=\"disabled || null\"\r\n                  [attr.title]=\"menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()\"\r\n                  [class.checked]=\"menuItem.checked?.()\"\r\n                  [class]=\"menuItem.cssClass\" class=\"menu-item toolbar-button e2e-menu-item\"\r\n                  [sciAttributes]=\"menuItem.attributes\"\r\n                  (click)=\"onSelect(menuItem)\">\r\n            <!-- Render icon, if any. -->\r\n            <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n            <!-- Render label, if any. -->\r\n            <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n          </button>\r\n        } @else if (menuItem.control) {\r\n          <!-- Render custom control. -->\r\n          <sci-toolbar-control [attr.title]=\"menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()\"\r\n                               [class]=\"menuItem.cssClass\" class=\"e2e-menu-item\"\r\n                               [sciAttributes]=\"menuItem.attributes\">\r\n            <ng-container *sciComponentOutlet=\"menuItem.control\"/>\r\n          </sci-toolbar-control>\r\n        }\r\n\r\n        <!-- Render menu button. -->\r\n        @if (menuItem.menu?.children?.length) {\r\n          @let hasLabel = menuItem.labelText || menuItem.labelComponent;\r\n          @let hasIcon = menuItem.iconLigature || menuItem.iconComponent;\r\n          @let hasVisualMenuIndicator = menuItem.visualMenuIndicator ?? true;\r\n          @let hasIconChevron = hasVisualMenuIndicator && !isSplitButton && hasIcon && !hasLabel;\r\n          @let hasChevron = hasVisualMenuIndicator && (isSplitButton || !hasIconChevron);\r\n\r\n          <button [attr.disabled]=\"disabled || null\"\r\n                  [attr.title]=\"menuItem.tooltip?.()\"\r\n                  [class.menu-open]=\"activeMenuItem()?.menuItem === menuItem\"\r\n                  [class.menu-indicator]=\"hasIconChevron\"\r\n                  [class]=\"menuItem.cssClass\" class=\"menu-item e2e-menu-item\"\r\n                  [sciAttributes]=\"menuItem.attributes\"\r\n                  (click)=\"onToolbarMenuButtonClick(menuItem, anchor ?? menu_button)\"\r\n                  (mousedown)=\"onToolbarMenuButtonMouseDown(menuItem)\"\r\n                  (mouseleave)=\"onToolbarMenuButtonMouseLeave(menuItem)\"\r\n                  #menu_button>\r\n            @if (!isSplitButton) {\r\n              <!-- Render icon, if any. -->\r\n              <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              <!-- Render label, if any. -->\r\n              <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n            }\r\n            <!-- Render chevron to indicate dropdown. -->\r\n            @if (hasChevron) {\r\n              <sci-icon class=\"chevron\">scion:chevron_down</sci-icon>\r\n            }\r\n          </button>\r\n        }\r\n      </ng-template>\r\n    }\r\n    <!-- Toolbar Group -->\r\n    @case ('group') {\r\n      <sci-toolbar-group [menuItems]=\"menuItem.children\"\r\n                         [orientation]=\"orientation()\"\r\n                         [disabled]=\"disabled\"\r\n                         [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                         [class]=\"menuItem.cssClass\"/>\r\n    }\r\n  }\r\n}\r\n\r\n<!-- Renders the icon of a menu item, if any. -->\r\n<ng-template #icon_template let-menuItem>\r\n  @if (menuItem.iconLigature) {\r\n    <sci-icon>\r\n      {{menuItem.iconLigature()}}\r\n    </sci-icon>\r\n  } @else if (menuItem.iconComponent) {\r\n    <sci-toolbar-icon>\r\n      <ng-container *sciComponentOutlet=\"menuItem.iconComponent\"/>\r\n    </sci-toolbar-icon>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Renders the label of a menu item, if any. -->\r\n<ng-template #label_template let-menuItem>\r\n  @if (menuItem.labelText) {\r\n    <sci-toolbar-label>\r\n      {{menuItem.labelText()}}\r\n    </sci-toolbar-label>\r\n  } @else if (menuItem.labelComponent) {\r\n    <sci-toolbar-label>\r\n      <ng-container *sciComponentOutlet=\"menuItem.labelComponent\"/>\r\n    </sci-toolbar-label>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--sci-icon-size: var(--sci-toolbar-item-size);--\\275sci-toolbar-item-padding-inline: calc(.5 * var(--sci-toolbar-item-size));--\\275sci-toolbar-item-padding-block: calc(.125 * var(--sci-toolbar-item-size));--\\275sci-toolbar-font-size: calc(.8125 * var(--sci-toolbar-item-size));--\\275sci-toolbar-item-border-size: 1px;font-size:var(--sci-toolbar-font-size, var(--\\275sci-toolbar-font-size));display:flex;gap:2px}:host[name]{min-height:calc(var(--sci-toolbar-item-size) + 2 * var(--\\275sci-toolbar-item-padding-block) + 2 * var(--\\275sci-toolbar-item-border-size));box-sizing:content-box}:host[data-orientation=vertical]{flex-direction:column}:host>sci-toolbar-group:not(:first-child):not(:has(>sci-toolbar-group:first-child)):before{content:\"\";background-color:var(--sci-color-border);margin:2px}:host>sci-toolbar-group:not(:first-child):not(:has(>sci-toolbar-group:first-child))[data-orientation=horizontal]:before{width:1px}:host>sci-toolbar-group:not(:first-child):not(:has(>sci-toolbar-group:first-child))[data-orientation=vertical]:before{height:1px}:host>sci-toolbar-group:not(:last-child):not(:has(+sci-toolbar-group)):after{content:\"\";background-color:var(--sci-color-border);margin:2px}:host>sci-toolbar-group:not(:last-child):not(:has(+sci-toolbar-group))[data-orientation=horizontal]:after{width:1px}:host>sci-toolbar-group:not(:last-child):not(:has(+sci-toolbar-group))[data-orientation=vertical]:after{height:1px}:host>sci-toolbar-split-button{display:flex;--\\275sci-toolbar-split-button: true}:host>sci-toolbar-split-button:has(>button:first-child.checked){--\\275sci-toolbar-split-button-checked: true}:host>sci-toolbar-split-button:has(>button:last-child.menu-open){--sci-toolbar-split-button-menu-open: true}:host>sci-toolbar-split-button:hover{--sci-toolbar-split-button-hover: true}:host>sci-toolbar-split-button:where(:hover,:has(>button:last-child.menu-open),:has(>button:first-child.checked),:has(>sci-toolbar-control:focus-within)):not(:has(>button:first-child:disabled)){--sci-toolbar-split-button-outline-visible: true}:host>sci-toolbar-split-button:focus-within{--sci-toolbar-split-button-focus-within: true}:host>sci-toolbar-split-button>sci-toolbar-control{border:var(--\\275sci-toolbar-item-border-size) solid var(--sci-color-border);border-radius:var(--sci-toolbar-item-border-radius);overflow:hidden}@container style(--sci-toolbar-split-button-outline-visible: true){@container not style(--sci-toolbar-item-border-color-hover: transparent){:host>sci-toolbar-split-button>sci-toolbar-control{border-color:var(--sci-toolbar-item-border-color-hover)}}:host>sci-toolbar-split-button>sci-toolbar-control{border-top-right-radius:0;border-bottom-right-radius:0}}:host button:is(.menu-item,#sci-reset){all:unset;display:inline-flex;gap:.3em;place-content:center;align-items:center;text-wrap:nowrap;padding:var(--\\275sci-toolbar-item-padding-block) var(--\\275sci-toolbar-item-padding-inline);border-radius:var(--sci-toolbar-item-border-radius);border:var(--\\275sci-toolbar-item-border-size) solid transparent;color:var(--sci-toolbar-item-text-color);background-color:var(--sci-toolbar-item-background-color);-webkit-user-select:none;user-select:none;cursor:var(--sci-toolbar-item-cursor)}:host button:is(.menu-item,#sci-reset):not(:has(>sci-toolbar-label)){--\\275sci-toolbar-item-padding-inline: var(--\\275sci-toolbar-item-padding-block)}@container style(--\\275sci-toolbar-split-button: true){:host button:is(.menu-item,#sci-reset):first-child{border-top-right-radius:0;border-bottom-right-radius:0}@container style(--sci-toolbar-split-button-menu-open: true) or (style(--\\275sci-toolbar-split-button-checked: true) and (not style(--sci-toolbar-split-button-hover: true))){:host button:is(.menu-item,#sci-reset):first-child{border-right:0;padding-right:calc(var(--\\275sci-toolbar-item-padding-inline) + 1px)}}:host button:is(.menu-item,#sci-reset):last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0;padding:0 .125em}@container style(--sci-toolbar-split-button-outline-visible: true){:host button:is(.menu-item,#sci-reset){border-color:var(--sci-color-border)}@container not style(--sci-toolbar-item-border-color-hover: transparent){:host button:is(.menu-item,#sci-reset){border-color:var(--sci-toolbar-item-border-color-hover)}}}@container style(--\\275sci-toolbar-split-button-checked: true){:host button:is(.menu-item,#sci-reset){border-color:var(--sci-toolbar-item-border-color-checked)}:host button:is(.menu-item,#sci-reset):not(:disabled){background-color:var(--sci-toolbar-item-background-color-checked)}}:host button:is(.menu-item,#sci-reset):focus-visible{border-radius:var(--sci-toolbar-item-border-radius);position:relative}}:host button:is(.menu-item,#sci-reset)>sci-toolbar-icon{display:inline-grid;height:var(--sci-toolbar-item-size);width:var(--sci-toolbar-item-size);overflow:hidden}:host button:is(.menu-item,#sci-reset):has(>sci-toolbar-label)>sci-icon.chevron{margin-left:calc(var(--\\275sci-toolbar-item-padding-inline) / 2)}:host button:is(.menu-item,#sci-reset)>sci-icon.chevron{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,#sci-reset).menu-indicator{position:relative}:host button:is(.menu-item,#sci-reset).menu-indicator:after{content:\"\";position:absolute;box-sizing:border-box;width:var(--sci-toolbar-item-menu-indicator-size);height:var(--sci-toolbar-item-menu-indicator-size);border:var(--sci-toolbar-item-menu-indicator-size) solid transparent;border-right-color:var(--sci-toolbar-item-menu-indicator-color);border-bottom-color:var(--sci-toolbar-item-menu-indicator-color);bottom:calc(var(--sci-corner) / 4);right:calc(var(--sci-corner) / 4)}:host button:is(.menu-item,#sci-reset).menu-indicator:disabled:after{border-right-color:var(--sci-toolbar-item-menu-indicator-color-disabled);border-bottom-color:var(--sci-toolbar-item-menu-indicator-color-disabled)}@container not style(--\\275sci-toolbar-split-button: true){:host button:is(.menu-item,#sci-reset).checked{border-color:var(--sci-toolbar-item-border-color-checked)}:host button:is(.menu-item,#sci-reset).checked:not(:disabled){background-color:var(--sci-toolbar-item-background-color-checked)}@container not style(--sci-toolbar-item-border-color-hover: transparent){:host button:is(.menu-item,#sci-reset):hover{border-color:var(--sci-toolbar-item-border-color-hover)}}}:host button:is(.menu-item,#sci-reset):disabled{color:var(--sci-toolbar-item-text-color-disabled)}:host button:is(.menu-item,#sci-reset):hover:not(:disabled){background-color:var(--sci-toolbar-item-background-color-hover)}:host button:is(.menu-item,#sci-reset):active:not(:disabled){background-color:var(--sci-toolbar-item-background-color-active)}:host button:is(.menu-item,#sci-reset):focus:not(:focus-visible){outline:none}:host button:is(.menu-item,#sci-reset):focus-visible{outline:var(--sci-toolbar-item-outline-width) solid var(--sci-color-accent)}:host button:is(.menu-item,#sci-reset).menu-open{background-color:var(--sci-toolbar-item-background-color-hover)}@container style(--sci-toolbar-split-button-menu-open: true){:host button:is(.menu-item,#sci-reset){background-color:var(--sci-toolbar-item-background-color-hover)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], popoverViewContainerRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverViewContainerRef", required: true }] }], _childToolbarGroups: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SciToolbarGroupComponent), { isSignal: true }] }] } });
 
 /*
@@ -1445,15 +1441,14 @@ class SciMenuComponent {
     _popoverRef = inject(PopoverRef);
     _filterField = viewChild(SciMenuFilterComponent, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_filterField" }] : /* istanbul ignore next */ []));
-    _viewport = viewChild(SciViewportComponent, /* @ts-ignore */
+    _viewport = viewChild('viewport', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_viewport" }] : /* istanbul ignore next */ []));
     hasGlyphArea = computed(() => this.glyphArea() ?? requiresGlyphArea(this.menuItems()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasGlyphArea" }] : /* istanbul ignore next */ []));
     menuItemsFiltered = computed(() => this.menuItems().filter(menuItem => this.matchesFilter(menuItem)()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "menuItemsFiltered" }] : /* istanbul ignore next */ []));
     popoverViewContainerRef = viewChild.required('popover_view_container_ref', { ...(ngDevMode ? { debugName: "popoverViewContainerRef" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
-    scrolling = computed(() => this._viewport()?.scrolling(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "scrolling" }] : /* istanbul ignore next */ []));
+    scrolling = this.computeScrolling();
     activeSubmenuItem = linkedSignal({ ...(ngDevMode ? { debugName: "activeSubmenuItem" } : /* istanbul ignore next */ {}), source: this.menuItemsFiltered, // Unset when filtered menu items change. Otherwise, popopver may lose anchor and render left-top of the page viewport.
         computation: () => null,
         equal: (a, b) => a?.menuItem === b?.menuItem });
@@ -1708,6 +1703,18 @@ class SciMenuComponent {
             });
         });
     }
+    /**
+     * Tracks whether currently scrolling the viewport.
+     */
+    computeScrolling() {
+        const zone = inject(NgZone);
+        return rxResource({
+            defaultValue: false,
+            params: () => this._viewport()?.nativeElement,
+            stream: ({ params: viewport }) => fromEvent(viewport, 'scroll', { passive: true })
+                .pipe(switchMap(() => concat(of(true), timer(150).pipe(map(() => false)))), startWith(false), subscribeIn(fn => zone.runOutsideAngular(fn))),
+        }).value;
+    }
     /**
      * Evaluates whether the given menu item (or any of its child menu items) match the active filter.
      */
@@ -1728,7 +1735,7 @@ class SciMenuComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciMenuComponent, isStandalone: true, selector: "sci-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, glyphArea: { classPropertyName: "glyphArea", publicName: "glyphArea", isSignal: true, isRequired: false, transformFunction: null }, anchorWidth: { classPropertyName: "anchorWidth", publicName: "anchorWidth", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--\u0275sci-menu-width": "menuSize().width", "style.--\u0275sci-menu-min-width": "menuSize().minWidth", "style.--\u0275sci-menu-max-width": "menuSize().maxWidth", "style.--\u0275sci-menu-max-height": "menuSize().maxHeight", "style.--\u0275sci-menu-scrolling": "scrolling() ? `true` : null", "attr.data-glyph-area": "hasGlyphArea() ? null : `none`", "style.visibility": "popoverHidden() ? `hidden` : null", "attr.tabindex": "role === `menu` ? `-1` : null", "class": "cssClass()" } }, providers: [
             providePopoverRef(),
             provideMenuFilter(),
-        ], viewQueries: [{ propertyName: "_filterField", first: true, predicate: SciMenuFilterComponent, descendants: true, isSignal: true }, { propertyName: "_viewport", first: true, predicate: SciViewportComponent, descendants: true, isSignal: true }, { propertyName: "popoverViewContainerRef", first: true, predicate: ["popover_view_container_ref"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1$1.SciAttributesDirective, inputs: ["sciAttributes", "attributes"] }], ngImport: i0, template: "<!-- Filter Field -->\r\n@let filter = this.filter();\r\n@if (filter) {\r\n  <div class=\"filter e2e-filter\">\r\n    <sci-icon>scion.search</sci-icon>\r\n    @let message = filter.placeholder?.() ?? '%scion.components.type_to_filter.action';\r\n    <sci-menu-filter (textChange)=\"onFilterChange($event)\" [placeholder]=\"(message | sciText)()\"/>\r\n  </div>\r\n  <hr>\r\n}\r\n\r\n<!-- Group Header -->\r\n@if (group(); as group) {\r\n  @if (group.collapsible) {\r\n    <button class=\"group-header e2e-group-header\" (click)=\"onGroupHeaderButtonClick()\" (mouseenter)=\"onMenuItemMouseEnter(null)\">\r\n      <sci-icon>{{isGroupExpanded() ? 'scion.chevron_down' : 'scion.chevron_right'}}</sci-icon>\r\n\r\n      <div class=\"content\">\r\n        <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n      </div>\r\n    </button>\r\n  } @else if (group.label) {\r\n    <header class=\"group-header e2e-group-header\">\r\n      <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n    </header>\r\n  }\r\n\r\n  <!-- Template for rendering group header. -->\r\n  <ng-template #group_header_template>\r\n    <sci-menu-group-label>{{group.label}}</sci-menu-group-label>\r\n\r\n    @if (group.actions.length && !this.disabled()) {\r\n      <sci-toolbar-group [menuItems]=\"group.actions\"\r\n                         [orientation]=\"'horizontal'\"\r\n                         [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                         (click)=\"$event.stopPropagation()\"\r\n                         class=\"actions e2e-actions\"/>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Menu Items -->\r\n@if (isGroupExpanded()) {\r\n  @if (maxHeight()) {\r\n    <sci-viewport>\r\n      <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n    </sci-viewport>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n  }\r\n\r\n  <!-- Renders menu items. -->\r\n  <ng-template #menu_items_template>\r\n    @for (menuItem of menuItemsFiltered(); track $index) {\r\n      @let disabled = this.disabled() || menuItem.disabled?.() || false;\r\n\r\n      @switch (menuItem.type) {\r\n        @case ('menu-item') {\r\n          <!-- Menu Item -->\r\n          @if (!menuItem.menu) {\r\n            @let hasActionToolbar = !disabled && menuItem.actions?.length;\r\n            @let showAcceleratorInTooltip = menuItem.accelerator && hasActionToolbar;\r\n\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"showAcceleratorInTooltip ? (menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()) : menuItem.tooltip?.()\"\r\n                    [class.checked]=\"menuItem.checked?.()\"\r\n                    [class.active]=\"menuItem.active?.()\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu-item e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onMenuItemMouseEnter(menuItem)\"\r\n                    (click)=\"onSelect(menuItem)\">\r\n              <!-- Render icon if glyph area. -->\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <!-- Render label, accelerator and action toolbar. -->\r\n              <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n\r\n                @if (menuItem.accelerator) {\r\n                  <span class=\"accelerator\">{{menuItem.accelerator | sciFormatAccelerator}}</span>\r\n                }\r\n\r\n                @if (hasActionToolbar) {\r\n                  <sci-toolbar-group [menuItems]=\"menuItem.actions!\"\r\n                                     [orientation]=\"'horizontal'\"\r\n                                     [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                                     [class.menu-open]=\"actions_toolbar.menuOpen()\"\r\n                                     class=\"actions e2e-actions\"\r\n                                     (click)=\"$event.stopPropagation()\"\r\n                                     #actions_toolbar/>\r\n                }\r\n              </div>\r\n            </button>\r\n          }\r\n\r\n          <!-- Submenu Item -->\r\n          @if (menuItem.menu) {\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"menuItem.tooltip?.()\"\r\n                    [class.open]=\"activeSubmenuItem()?.menuItem === menuItem\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onSubmenuItemMouseEnter({menuItem, element})\"\r\n                    (click)=\"onSubmenuItemClick({menuItem, element})\"\r\n                    #element>\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <!-- Render icon if glyph area. -->\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <!-- Render label. -->\r\n              <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n                <sci-icon class=\"chevron\">scion.chevron_right</sci-icon>\r\n              </div>\r\n            </button>\r\n          }\r\n        }\r\n        @case ('group') {\r\n          <sci-menu-group [group]=\"menuItem\"\r\n                          [glyphArea]=\"hasGlyphArea()\"\r\n                          [disabled]=\"disabled\"\r\n                          [cssClass]=\"menuItem.cssClass ?? []\"/>\r\n        }\r\n      }\r\n    } @empty {\r\n      <!-- TODO [Angular 23] Replace with optional chaining operator once the Angular compiler no longer logs the NG8107 false-positive warning. -->\r\n      <!-- @let message = filter?.notFoundMessage?.() ?? '%scion.components.no_items.message'; -->\r\n      @let message = (filter && filter.notFoundMessage?.()) ?? '%scion.components.no_items.message';\r\n      <div class=\"message no-items e2e-no-items\">{{(message | sciText)()}}</div>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Location where to insert the menu popover. Must not be a child of the menu item button to prevent hovering the menu item when hovering menu items in the popover. -->\r\n<ng-container #popover_view_container_ref/>\r\n\r\n<!-- Renders the icon of the passed menu item. -->\r\n<ng-template #icon_template let-menuItem>\r\n  @if (menuItem.checked !== undefined) {\r\n    <sci-icon>{{menuItem.checked() ? 'scion.checkmark' : undefined}}</sci-icon>\r\n  } @else if (menuItem.iconLigature) {\r\n    <sci-icon>{{menuItem.iconLigature()}}</sci-icon>\r\n  } @else if (menuItem.iconComponent) {\r\n    <sci-menu-item-icon>\r\n      <ng-container *sciComponentOutlet=\"menuItem.iconComponent\"/>\r\n    </sci-menu-item-icon>\r\n  } @else {\r\n    <sci-menu-item-icon/>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Renders the label of the passed menu item. -->\r\n<ng-template #label_template let-menuItem>\r\n  @if (menuItem.labelText) {\r\n    <sci-menu-item-label>\r\n      {{menuItem.labelText()}}\r\n    </sci-menu-item-label>\r\n  } @else if (menuItem.labelComponent) {\r\n    <sci-menu-item-label>\r\n      <ng-container *sciComponentOutlet=\"menuItem.labelComponent\"/>\r\n    </sci-menu-item-label>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--sci-icon-size: var(--sci-menu-item-size);--\\275sci-menu-item-padding-inline: calc(.5 * var(--sci-menu-item-size));--\\275sci-menu-item-padding-block: calc(.225 * var(--sci-menu-item-size));--\\275sci-menu-item-min-height: calc(var(--sci-menu-item-size) + 2px);--\\275sci-menu-item-gap-inline: calc(.75 * var(--sci-menu-item-size));--\\275sci-menu-item-gap-block: calc(.125 * var(--sci-menu-item-size));--\\275sci-menu-padding-inline: .4em;--\\275sci-menu-padding-block: .3em;--\\275sci-menu-glyph-area: true;--\\275sci-menu-action-background-color-hover: color-mix(in srgb, var(--sci-menu-item-background-color-hover) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-action-background-color-active: color-mix(in srgb, var(--sci-menu-item-background-color-active) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-item-chevron-x-offset: calc(var(--sci-menu-item-size) / 4);--\\275sci-menu-font-size: var(--sci-menu-font-size, calc(.8125 * var(--sci-menu-item-size)));--\\275sci-menu-width: max-content;--\\275sci-menu-min-width: initial;--\\275sci-menu-max-width: initial;--\\275sci-menu-max-height: initial;--\\275sci-menu-scrolling: false;display:grid;gap:var(--\\275sci-menu-item-gap-block) var(--\\275sci-menu-item-gap-inline);align-items:center;font-size:var(--\\275sci-menu-font-size);border:1px solid var(--sci-color-border);border-radius:var(--sci-menu-border-radius);background-color:var(--sci-color-background-elevation);padding:var(--\\275sci-menu-padding-block) var(--\\275sci-menu-padding-inline);outline:none;box-sizing:border-box;width:var(--\\275sci-menu-width);min-width:var(--\\275sci-menu-min-width);max-width:var(--\\275sci-menu-max-width);-webkit-user-select:none;user-select:none;grid-template-columns:var(--sci-menu-item-size) minmax(0,1fr)}:host[data-glyph-area=none]{--\\275sci-menu-glyph-area: false;grid-template-columns:minmax(0,1fr)}:host[popover]{position:fixed;margin:unset;inset:unset;height:auto}:host[popover]:not(:popover-open){display:none}:host:not([popover]){grid-column:1/-1;grid-template-columns:subgrid;border:unset;border-radius:unset;color:inherit;padding:unset;background-color:inherit}:host>header.group-header{grid-column:1/-1;display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>header.group-header>sci-menu-group-label{flex:auto;color:var(--sci-menu-group-header-text-color);font-family:var(--sci-menu-group-header-font-family),sans-serif;font-weight:var(--sci-menu-group-header-font-weight);font-size:var(--sci-menu-group-header-font-size);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>header.group-header>sci-toolbar-group.actions{flex:none;align-self:center}:host>button:is(.group-header,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host>button:is(.group-header,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host>button:is(.group-header,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host>button:is(.group-header,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(.group-header,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host>button:is(.group-header,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host>button:is(.group-header,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center}:host>button:is(.group-header,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host>button:is(.group-header,#sci-reset)>sci-icon{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host>button:is(.group-header,#sci-reset)>div.content{display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center}:host>button:is(.group-header,#sci-reset)>div.content>sci-menu-group-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}:host:has(>sci-viewport){padding:var(--\\275sci-menu-padding-block) 0}:host:has(>sci-viewport)>header.group-header,:host:has(>sci-viewport)>button.group-header,:host:has(>sci-viewport)>div.filter,:host:has(>sci-viewport)>hr{margin:0 var(--\\275sci-menu-padding-inline)}:host>sci-viewport{grid-column:1/-1;max-height:var(--\\275sci-menu-max-height);box-sizing:border-box}:host>sci-viewport::part(content){grid-column:1/-1;display:grid;gap:var(--\\275sci-menu-item-gap-block) var(--\\275sci-menu-item-gap-inline);grid-template-columns:var(--sci-menu-item-size) minmax(0,1fr);padding:2px var(--\\275sci-menu-padding-inline)}@container style(--\\275sci-menu-glyph-area: false){:host>sci-viewport::part(content){grid-template-columns:minmax(0,1fr)}}:host>div.filter{grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-filter-outline-radius);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>div.filter:focus-within{outline:var(--sci-menu-filter-outline-width) solid var(--sci-color-accent)}@container style(--\\275sci-menu-glyph-area: false){:host>div.filter{display:flex;gap:var(--\\275sci-menu-item-gap-inline)}:host>div.filter>sci-icon{flex:none}:host>div.filter>sci-menu-filter{flex:auto}}:host>hr{all:unset;grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host div.message.no-items{grid-column:1/-1;justify-self:center;color:var(--sci-color-text-subtlest);padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline)}:host *:not(hr)+sci-menu-group:not(:has(>sci-menu-group:first-child)):before{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host sci-menu-group:not(:last-child):not(:has(+sci-menu-group,+sci-menu:last-child)):after{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host button:is(.menu-item,.menu,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host button:is(.menu-item,.menu,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host button:is(.menu-item,.menu,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host button:is(.menu-item,.menu,#sci-reset):focus:not(:focus-visible){outline:none}:host button:is(.menu-item,.menu,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host button:is(.menu-item,.menu,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host button:is(.menu-item,.menu,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;position:relative}:host button:is(.menu-item,.menu,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host button:is(.menu-item,.menu,#sci-reset).checked{--\\275sci-menu-item-checked: true}:host button:is(.menu-item,.menu,#sci-reset).active{--\\275sci-menu-item-active: true}:host button:is(.menu-item,.menu,#sci-reset):has(sci-toolbar-group.actions.menu-open){--\\275sci-menu-item-actions-menu-open: true}:host button:is(.menu-item,.menu,#sci-reset):not(:disabled):is(:hover,.active,:has(sci-toolbar-group.actions.menu-open)){--\\275sci-action-toolbar-visible: true}:host button:is(.menu-item,.menu,#sci-reset).menu-item.active:before{position:absolute;content:\"\";box-sizing:border-box;height:calc(100% - var(--sci-menu-item-active-indicator-border-radius));width:var(--sci-menu-item-active-indicator-size);left:calc(-1 * var(--\\275sci-menu-padding-inline) + 1px);border-radius:var(--sci-menu-item-active-indicator-border-radius);background-color:var(--sci-menu-item-active-indicator-background-color)}:host button:is(.menu-item,.menu,#sci-reset).menu.open{background-color:var(--sci-menu-item-background-color-hover)}:host button:is(.menu-item,.menu,#sci-reset).menu>div.content>sci-icon.chevron{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset).menu-item.checked>sci-icon:first-child{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset)>sci-menu-item-icon{display:inline-grid;place-content:center;height:var(--sci-menu-item-size);width:var(--sci-menu-item-size);overflow:hidden}:host button:is(.menu-item,.menu,#sci-reset)>div.content{display:flex;align-items:center;gap:var(--\\275sci-menu-item-gap-inline)}:host button:is(.menu-item,.menu,#sci-reset)>div.content:first-child{grid-column:1/-1}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-menu-item-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator{flex:none;color:var(--sci-menu-item-accelerator-text-color);font-size:.9em}@container style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator:has(+sci-toolbar-group.actions){display:none}}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}@container not style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{display:none}}@container style(--\\275sci-menu-scrolling: true) and (not style(--\\275sci-menu-item-active: true)) and (not style(--\\275sci-menu-item-actions-menu-open: true)){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{visibility:hidden}}:host sci-toolbar-group.actions{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-toolbar-item-size: var(--sci-menu-item-size);--\\275sci-toolbar-item-padding-block: 0}\n"], dependencies: [{ kind: "component", type: SciMenuGroupComponent, selector: "sci-menu-group", inputs: ["group", "glyphArea", "disabled", "cssClass"] }, { kind: "component", type: SciMenuFilterComponent, selector: "sci-menu-filter", inputs: ["placeholder", "text"], outputs: ["textChange"] }, { kind: "component", type: SciToolbarGroupComponent, selector: "sci-toolbar-group", inputs: ["menuItems", "orientation", "disabled", "popoverViewContainerRef"] }, { kind: "component", type: SciViewportComponent, selector: "sci-viewport", inputs: ["scrollbarStyle"], outputs: ["scroll"] }, { kind: "directive", type: SciComponentOutletDirective, selector: "ng-template[sciComponentOutlet]", inputs: ["sciComponentOutlet"] }, { kind: "directive", type: SciAttributesDirective, selector: "[sciAttributes]", inputs: ["sciAttributes"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "component", type: SciMenuGroupLabelComponent, selector: "sci-menu-group-label" }, { kind: "component", type: SciMenuItemLabelComponent, selector: "sci-menu-item-label" }, { kind: "component", type: SciMenuItemIconComponent, selector: "sci-menu-item-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SciTextPipe, name: "sciText" }, { kind: "pipe", type: SciFormatAcceleratorPipe, name: "sciFormatAccelerator" }] });
+        ], viewQueries: [{ propertyName: "_filterField", first: true, predicate: SciMenuFilterComponent, descendants: true, isSignal: true }, { propertyName: "_viewport", first: true, predicate: ["viewport"], descendants: true, isSignal: true }, { propertyName: "popoverViewContainerRef", first: true, predicate: ["popover_view_container_ref"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1$1.SciAttributesDirective, inputs: ["sciAttributes", "attributes"] }], ngImport: i0, template: "<!-- Filter Field -->\r\n@let filter = this.filter();\r\n@if (filter) {\r\n  <div class=\"filter e2e-filter\">\r\n    <sci-icon>scion:search</sci-icon>\r\n    @let message = filter.placeholder?.() ?? '%scion:components:type_to_filter.action';\r\n    <sci-menu-filter (textChange)=\"onFilterChange($event)\" [placeholder]=\"(message | sciText)()\"/>\r\n  </div>\r\n  <hr>\r\n}\r\n\r\n<!-- Group Header -->\r\n@if (group(); as group) {\r\n  @if (group.collapsible) {\r\n    <button class=\"group-header e2e-group-header\" (click)=\"onGroupHeaderButtonClick()\" (mouseenter)=\"onMenuItemMouseEnter(null)\">\r\n      <sci-icon>{{isGroupExpanded() ? 'scion:chevron_down' : 'scion:chevron_right'}}</sci-icon>\r\n\r\n      <div class=\"content\">\r\n        <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n      </div>\r\n    </button>\r\n  } @else if (group.label) {\r\n    <header class=\"group-header e2e-group-header\">\r\n      <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n    </header>\r\n  }\r\n\r\n  <!-- Template for rendering group header. -->\r\n  <ng-template #group_header_template>\r\n    <sci-menu-group-label>{{group.label}}</sci-menu-group-label>\r\n\r\n    @if (group.actions.length && !this.disabled()) {\r\n      <sci-toolbar-group [menuItems]=\"group.actions\"\r\n                         [orientation]=\"'horizontal'\"\r\n                         [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                         (click)=\"$event.stopPropagation()\"\r\n                         class=\"actions e2e-actions\"/>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Menu Items -->\r\n@if (isGroupExpanded()) {\r\n  @if (maxHeight()) {\r\n    <!-- TODO [#384] Replace with sci-viewport -->\r\n    <div class=\"viewport e2e-viewport\" #viewport>\r\n      <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n    </div>\r\n    <sci-scrollbar direction=\"vscroll\" [viewport]=\"viewport\"/>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n  }\r\n\r\n  <!-- Renders menu items. -->\r\n  <ng-template #menu_items_template>\r\n    @for (menuItem of menuItemsFiltered(); track $index) {\r\n      @let disabled = this.disabled() || menuItem.disabled?.() || false;\r\n\r\n      @switch (menuItem.type) {\r\n        @case ('menu-item') {\r\n          <!-- Menu Item -->\r\n          @if (!menuItem.menu) {\r\n            @let hasActionToolbar = !disabled && menuItem.actions?.length;\r\n            @let showAcceleratorInTooltip = menuItem.accelerator && hasActionToolbar;\r\n\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"showAcceleratorInTooltip ? (menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()) : menuItem.tooltip?.()\"\r\n                    [class.checked]=\"menuItem.checked?.()\"\r\n                    [class.active]=\"menuItem.active?.()\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu-item e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onMenuItemMouseEnter(menuItem)\"\r\n                    (click)=\"onSelect(menuItem)\">\r\n              <!-- Render icon if glyph area. -->\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <div class=\"content\">\r\n                <!-- Render icon inline if checkable. -->\r\n                @if (menuItem.iconLigature && menuItem.checked) {\r\n                  <sci-icon>{{menuItem.iconLigature()}}</sci-icon>\r\n                }\r\n\r\n                <!-- Render icon component inline if checkable. -->\r\n                @if (menuItem.iconComponent && menuItem.checked) {\r\n                  <sci-menu-item-icon>\r\n                    <ng-container *sciComponentOutlet=\"menuItem.iconComponent\"/>\r\n                  </sci-menu-item-icon>\r\n                }\r\n\r\n                <!-- Render label. -->\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n\r\n                <!-- Render accelerator. -->\r\n                @if (menuItem.accelerator) {\r\n                  <span class=\"accelerator\">{{menuItem.accelerator | sciFormatAccelerator}}</span>\r\n                }\r\n\r\n                <!-- Render actions. -->\r\n                @if (hasActionToolbar) {\r\n                  <sci-toolbar-group [menuItems]=\"menuItem.actions!\"\r\n                                     [orientation]=\"'horizontal'\"\r\n                                     [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                                     [class.menu-open]=\"actions_toolbar.menuOpen()\"\r\n                                     class=\"actions e2e-actions\"\r\n                                     (click)=\"$event.stopPropagation()\"\r\n                                     #actions_toolbar/>\r\n                }\r\n              </div>\r\n            </button>\r\n          }\r\n\r\n          <!-- Submenu Item -->\r\n          @if (menuItem.menu) {\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"menuItem.tooltip?.()\"\r\n                    [class.open]=\"activeSubmenuItem()?.menuItem === menuItem\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onSubmenuItemMouseEnter({menuItem, element})\"\r\n                    (click)=\"onSubmenuItemClick({menuItem, element})\"\r\n                    #element>\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <!-- Render icon if glyph area. -->\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <!-- Render label. -->\r\n              <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n                <sci-icon class=\"chevron\">scion:chevron_right</sci-icon>\r\n              </div>\r\n            </button>\r\n          }\r\n        }\r\n        @case ('group') {\r\n          <sci-menu-group [group]=\"menuItem\"\r\n                          [glyphArea]=\"hasGlyphArea()\"\r\n                          [disabled]=\"disabled\"\r\n                          [cssClass]=\"menuItem.cssClass ?? []\"/>\r\n        }\r\n      }\r\n    } @empty {\r\n      <!-- TODO [Angular 23] Replace with optional chaining operator once the Angular compiler no longer logs the NG8107 false-positive warning. -->\r\n        <!-- @let message = filter?.notFoundMessage?.() ?? '%scion:components:no_items.message'; -->\r\n      @let message = (filter && filter.notFoundMessage?.()) ?? '%scion:components:no_items.message';\r\n      <div class=\"message no-items e2e-no-items\">{{(message | sciText)()}}</div>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Location where to insert the menu popover. Must not be a child of the menu item button to prevent hovering the menu item when hovering menu items in the popover. -->\r\n<ng-container #popover_view_container_ref/>\r\n\r\n<!-- Renders the icon of the passed menu item. -->\r\n<ng-template #icon_template let-menuItem>\r\n  @if (menuItem.checked !== undefined) {\r\n    <sci-icon data-checkmark>{{menuItem.checked() ? 'scion:checkmark' : undefined}}</sci-icon>\r\n  } @else if (menuItem.iconLigature) {\r\n    <sci-icon>{{menuItem.iconLigature()}}</sci-icon>\r\n  } @else if (menuItem.iconComponent) {\r\n    <sci-menu-item-icon>\r\n      <ng-container *sciComponentOutlet=\"menuItem.iconComponent\"/>\r\n    </sci-menu-item-icon>\r\n  } @else {\r\n    <sci-menu-item-icon/>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Renders the label of the passed menu item. -->\r\n<ng-template #label_template let-menuItem>\r\n  @if (menuItem.labelText) {\r\n    <sci-menu-item-label>\r\n      {{menuItem.labelText()}}\r\n    </sci-menu-item-label>\r\n  } @else if (menuItem.labelComponent) {\r\n    <sci-menu-item-label>\r\n      <ng-container *sciComponentOutlet=\"menuItem.labelComponent\"/>\r\n    </sci-menu-item-label>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--sci-icon-size: var(--sci-menu-item-size);--\\275sci-menu-item-padding-inline: calc(.5 * var(--sci-menu-item-size));--\\275sci-menu-item-padding-block: calc(.225 * var(--sci-menu-item-size));--\\275sci-menu-item-min-height: calc(var(--sci-menu-item-size) + 2px);--\\275sci-menu-item-gap-inline: calc(.75 * var(--sci-menu-item-size));--\\275sci-menu-item-gap-block: calc(.125 * var(--sci-menu-item-size));--\\275sci-menu-padding-inline: .4em;--\\275sci-menu-padding-block: .3em;--\\275sci-menu-glyph-area: true;--\\275sci-menu-action-background-color-hover: color-mix(in srgb, var(--sci-menu-item-background-color-hover) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-action-background-color-active: color-mix(in srgb, var(--sci-menu-item-background-color-active) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-item-chevron-x-offset: calc(var(--sci-menu-item-size) / 4);--\\275sci-menu-font-size: var(--sci-menu-font-size, calc(.8125 * var(--sci-menu-item-size)));--\\275sci-menu-width: max-content;--\\275sci-menu-min-width: initial;--\\275sci-menu-max-width: initial;--\\275sci-menu-max-height: initial;--\\275sci-menu-scrolling: false;display:grid;gap:var(--\\275sci-menu-item-gap-block) var(--\\275sci-menu-item-gap-inline);align-items:center;font-size:var(--\\275sci-menu-font-size);border:1px solid var(--sci-color-border);border-radius:var(--sci-menu-border-radius);background-color:var(--sci-color-background-elevation);padding:var(--\\275sci-menu-padding-block) var(--\\275sci-menu-padding-inline);outline:none;box-sizing:border-box;width:var(--\\275sci-menu-width);min-width:var(--\\275sci-menu-min-width);max-width:var(--\\275sci-menu-max-width);-webkit-user-select:none;user-select:none;grid-template-columns:var(--sci-menu-item-size) minmax(0,1fr)}:host[data-glyph-area=none]{--\\275sci-menu-glyph-area: false;grid-template-columns:minmax(0,1fr)}:host[popover]{position:fixed;margin:unset;inset:unset;height:auto}:host[popover]:not(:popover-open){display:none}:host:not([popover]){grid-column:1/-1;grid-template-columns:subgrid;border:unset;border-radius:unset;color:inherit;padding:unset;background-color:inherit}:host>header.group-header{grid-column:1/-1;display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>header.group-header>sci-menu-group-label{flex:auto;color:var(--sci-menu-group-header-text-color);font-family:var(--sci-menu-group-header-font-family),sans-serif;font-weight:var(--sci-menu-group-header-font-weight);font-size:var(--sci-menu-group-header-font-size);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>header.group-header>sci-toolbar-group.actions{flex:none;align-self:center}:host>button:is(.group-header,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host>button:is(.group-header,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host>button:is(.group-header,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host>button:is(.group-header,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(.group-header,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host>button:is(.group-header,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host>button:is(.group-header,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center}:host>button:is(.group-header,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host>button:is(.group-header,#sci-reset)>sci-icon{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host>button:is(.group-header,#sci-reset)>div.content{display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center}:host>button:is(.group-header,#sci-reset)>div.content>sci-menu-group-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}:host>div.viewport{grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;overflow:auto;scrollbar-width:none;max-height:var(--\\275sci-menu-max-height);box-sizing:border-box;margin-block:calc(-1 * var(--sci-button-outline-width));padding-block:var(--sci-button-outline-width);margin-inline:calc(-1 * var(--\\275sci-menu-padding-inline));padding-inline:var(--\\275sci-menu-padding-inline);anchor-name:--sci-menu-viewport}:host>div.viewport:not(:hover)+sci-scrollbar{opacity:0}:host>div.viewport+sci-scrollbar{position:absolute;top:calc(anchor(--sci-menu-viewport top) + var(--sci-button-outline-width));right:anchor(--sci-menu-viewport right);bottom:calc(anchor(--sci-menu-viewport bottom) + var(--sci-button-outline-width))}:host>div.filter{grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-filter-outline-radius);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>div.filter:focus-within{outline:var(--sci-menu-filter-outline-width) solid var(--sci-color-accent)}@container style(--\\275sci-menu-glyph-area: false){:host>div.filter{display:flex;gap:var(--\\275sci-menu-item-gap-inline)}:host>div.filter>sci-icon{flex:none}:host>div.filter>sci-menu-filter{flex:auto}}:host>hr{all:unset;grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host div.message.no-items{grid-column:1/-1;justify-self:center;color:var(--sci-color-text-subtlest);padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline)}:host *:not(hr)+sci-menu-group:not(:has(>sci-menu-group:first-child)):before{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host sci-menu-group:not(:last-child):not(:has(+sci-menu-group,+sci-menu:last-child)):after{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host button:is(.menu-item,.menu,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host button:is(.menu-item,.menu,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host button:is(.menu-item,.menu,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host button:is(.menu-item,.menu,#sci-reset):focus:not(:focus-visible){outline:none}:host button:is(.menu-item,.menu,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host button:is(.menu-item,.menu,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host button:is(.menu-item,.menu,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;position:relative}:host button:is(.menu-item,.menu,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host button:is(.menu-item,.menu,#sci-reset).checked{--\\275sci-menu-item-checked: true}:host button:is(.menu-item,.menu,#sci-reset).active{--\\275sci-menu-item-active: true}:host button:is(.menu-item,.menu,#sci-reset):has(sci-toolbar-group.actions.menu-open){--\\275sci-menu-item-actions-menu-open: true}:host button:is(.menu-item,.menu,#sci-reset):not(:disabled):is(:hover,.active,:has(sci-toolbar-group.actions.menu-open)){--\\275sci-action-toolbar-visible: true}:host button:is(.menu-item,.menu,#sci-reset).menu-item.active:before{position:absolute;content:\"\";box-sizing:border-box;height:calc(100% - var(--sci-menu-item-active-indicator-border-radius));width:var(--sci-menu-item-active-indicator-size);left:calc(-1 * var(--\\275sci-menu-padding-inline) + 1px);border-radius:var(--sci-menu-item-active-indicator-border-radius);background-color:var(--sci-menu-item-active-indicator-background-color)}:host button:is(.menu-item,.menu,#sci-reset).menu.open{background-color:var(--sci-menu-item-background-color-hover)}:host button:is(.menu-item,.menu,#sci-reset).menu>div.content>sci-icon.chevron{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset).menu-item.checked>sci-icon:first-child{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset)>sci-menu-item-icon{display:inline-grid;place-content:center;height:var(--sci-menu-item-size);width:var(--sci-menu-item-size);overflow:hidden}:host button:is(.menu-item,.menu,#sci-reset)>div.content{display:flex;align-items:center;gap:var(--\\275sci-menu-item-gap-inline)}:host button:is(.menu-item,.menu,#sci-reset)>div.content:first-child{grid-column:1/-1}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-menu-item-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator{flex:none;color:var(--sci-menu-item-accelerator-text-color);font-size:.9em}@container style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator:has(+sci-toolbar-group.actions){display:none}}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}@container not style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{display:none}}@container style(--\\275sci-menu-scrolling: true) and (not style(--\\275sci-menu-item-active: true)) and (not style(--\\275sci-menu-item-actions-menu-open: true)){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{visibility:hidden}}:host sci-toolbar-group.actions{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-toolbar-item-size: var(--sci-menu-item-size);--\\275sci-toolbar-item-padding-block: 0}\n"], dependencies: [{ kind: "component", type: SciMenuGroupComponent, selector: "sci-menu-group", inputs: ["group", "glyphArea", "disabled", "cssClass"] }, { kind: "component", type: SciMenuFilterComponent, selector: "sci-menu-filter", inputs: ["placeholder", "text"], outputs: ["textChange"] }, { kind: "component", type: SciToolbarGroupComponent, selector: "sci-toolbar-group", inputs: ["menuItems", "orientation", "disabled", "popoverViewContainerRef"] }, { kind: "directive", type: SciComponentOutletDirective, selector: "ng-template[sciComponentOutlet]", inputs: ["sciComponentOutlet"] }, { kind: "directive", type: SciAttributesDirective, selector: "[sciAttributes]", inputs: ["sciAttributes"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "component", type: SciMenuGroupLabelComponent, selector: "sci-menu-group-label" }, { kind: "component", type: SciMenuItemLabelComponent, selector: "sci-menu-item-label" }, { kind: "component", type: SciMenuItemIconComponent, selector: "sci-menu-item-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }, { kind: "pipe", type: SciTextPipe, name: "sciText" }, { kind: "pipe", type: SciFormatAcceleratorPipe, name: "sciFormatAccelerator" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuComponent, decorators: [{
             type: Component,
@@ -1736,7 +1743,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         SciMenuGroupComponent,
                         SciMenuFilterComponent,
                         SciToolbarGroupComponent,
-                        SciViewportComponent,
                         SciTextPipe,
                         SciComponentOutletDirective,
                         SciAttributesDirective,
@@ -1746,6 +1752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         SciMenuItemIconComponent,
                         SciFormatAcceleratorPipe,
                         NgTemplateOutlet,
+                        SciScrollbarComponent,
                     ], providers: [
                         providePopoverRef(),
                         provideMenuFilter(),
@@ -1762,8 +1769,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[class]': 'cssClass()',
                     }, hostDirectives: [
                         { directive: SciAttributesDirective, inputs: ['sciAttributes: attributes'] },
-                    ], template: "<!-- Filter Field -->\r\n@let filter = this.filter();\r\n@if (filter) {\r\n  <div class=\"filter e2e-filter\">\r\n    <sci-icon>scion.search</sci-icon>\r\n    @let message = filter.placeholder?.() ?? '%scion.components.type_to_filter.action';\r\n    <sci-menu-filter (textChange)=\"onFilterChange($event)\" [placeholder]=\"(message | sciText)()\"/>\r\n  </div>\r\n  <hr>\r\n}\r\n\r\n<!-- Group Header -->\r\n@if (group(); as group) {\r\n  @if (group.collapsible) {\r\n    <button class=\"group-header e2e-group-header\" (click)=\"onGroupHeaderButtonClick()\" (mouseenter)=\"onMenuItemMouseEnter(null)\">\r\n      <sci-icon>{{isGroupExpanded() ? 'scion.chevron_down' : 'scion.chevron_right'}}</sci-icon>\r\n\r\n      <div class=\"content\">\r\n        <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n      </div>\r\n    </button>\r\n  } @else if (group.label) {\r\n    <header class=\"group-header e2e-group-header\">\r\n      <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n    </header>\r\n  }\r\n\r\n  <!-- Template for rendering group header. -->\r\n  <ng-template #group_header_template>\r\n    <sci-menu-group-label>{{group.label}}</sci-menu-group-label>\r\n\r\n    @if (group.actions.length && !this.disabled()) {\r\n      <sci-toolbar-group [menuItems]=\"group.actions\"\r\n                         [orientation]=\"'horizontal'\"\r\n                         [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                         (click)=\"$event.stopPropagation()\"\r\n                         class=\"actions e2e-actions\"/>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Menu Items -->\r\n@if (isGroupExpanded()) {\r\n  @if (maxHeight()) {\r\n    <sci-viewport>\r\n      <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n    </sci-viewport>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n  }\r\n\r\n  <!-- Renders menu items. -->\r\n  <ng-template #menu_items_template>\r\n    @for (menuItem of menuItemsFiltered(); track $index) {\r\n      @let disabled = this.disabled() || menuItem.disabled?.() || false;\r\n\r\n      @switch (menuItem.type) {\r\n        @case ('menu-item') {\r\n          <!-- Menu Item -->\r\n          @if (!menuItem.menu) {\r\n            @let hasActionToolbar = !disabled && menuItem.actions?.length;\r\n            @let showAcceleratorInTooltip = menuItem.accelerator && hasActionToolbar;\r\n\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"showAcceleratorInTooltip ? (menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()) : menuItem.tooltip?.()\"\r\n                    [class.checked]=\"menuItem.checked?.()\"\r\n                    [class.active]=\"menuItem.active?.()\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu-item e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onMenuItemMouseEnter(menuItem)\"\r\n                    (click)=\"onSelect(menuItem)\">\r\n              <!-- Render icon if glyph area. -->\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <!-- Render label, accelerator and action toolbar. -->\r\n              <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n\r\n                @if (menuItem.accelerator) {\r\n                  <span class=\"accelerator\">{{menuItem.accelerator | sciFormatAccelerator}}</span>\r\n                }\r\n\r\n                @if (hasActionToolbar) {\r\n                  <sci-toolbar-group [menuItems]=\"menuItem.actions!\"\r\n                                     [orientation]=\"'horizontal'\"\r\n                                     [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                                     [class.menu-open]=\"actions_toolbar.menuOpen()\"\r\n                                     class=\"actions e2e-actions\"\r\n                                     (click)=\"$event.stopPropagation()\"\r\n                                     #actions_toolbar/>\r\n                }\r\n              </div>\r\n            </button>\r\n          }\r\n\r\n          <!-- Submenu Item -->\r\n          @if (menuItem.menu) {\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"menuItem.tooltip?.()\"\r\n                    [class.open]=\"activeSubmenuItem()?.menuItem === menuItem\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onSubmenuItemMouseEnter({menuItem, element})\"\r\n                    (click)=\"onSubmenuItemClick({menuItem, element})\"\r\n                    #element>\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <!-- Render icon if glyph area. -->\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <!-- Render label. -->\r\n              <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n                <sci-icon class=\"chevron\">scion.chevron_right</sci-icon>\r\n              </div>\r\n            </button>\r\n          }\r\n        }\r\n        @case ('group') {\r\n          <sci-menu-group [group]=\"menuItem\"\r\n                          [glyphArea]=\"hasGlyphArea()\"\r\n                          [disabled]=\"disabled\"\r\n                          [cssClass]=\"menuItem.cssClass ?? []\"/>\r\n        }\r\n      }\r\n    } @empty {\r\n      <!-- TODO [Angular 23] Replace with optional chaining operator once the Angular compiler no longer logs the NG8107 false-positive warning. -->\r\n      <!-- @let message = filter?.notFoundMessage?.() ?? '%scion.components.no_items.message'; -->\r\n      @let message = (filter && filter.notFoundMessage?.()) ?? '%scion.components.no_items.message';\r\n      <div class=\"message no-items e2e-no-items\">{{(message | sciText)()}}</div>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Location where to insert the menu popover. Must not be a child of the menu item button to prevent hovering the menu item when hovering menu items in the popover. -->\r\n<ng-container #popover_view_container_ref/>\r\n\r\n<!-- Renders the icon of the passed menu item. -->\r\n<ng-template #icon_template let-menuItem>\r\n  @if (menuItem.checked !== undefined) {\r\n    <sci-icon>{{menuItem.checked() ? 'scion.checkmark' : undefined}}</sci-icon>\r\n  } @else if (menuItem.iconLigature) {\r\n    <sci-icon>{{menuItem.iconLigature()}}</sci-icon>\r\n  } @else if (menuItem.iconComponent) {\r\n    <sci-menu-item-icon>\r\n      <ng-container *sciComponentOutlet=\"menuItem.iconComponent\"/>\r\n    </sci-menu-item-icon>\r\n  } @else {\r\n    <sci-menu-item-icon/>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Renders the label of the passed menu item. -->\r\n<ng-template #label_template let-menuItem>\r\n  @if (menuItem.labelText) {\r\n    <sci-menu-item-label>\r\n      {{menuItem.labelText()}}\r\n    </sci-menu-item-label>\r\n  } @else if (menuItem.labelComponent) {\r\n    <sci-menu-item-label>\r\n      <ng-container *sciComponentOutlet=\"menuItem.labelComponent\"/>\r\n    </sci-menu-item-label>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--sci-icon-size: var(--sci-menu-item-size);--\\275sci-menu-item-padding-inline: calc(.5 * var(--sci-menu-item-size));--\\275sci-menu-item-padding-block: calc(.225 * var(--sci-menu-item-size));--\\275sci-menu-item-min-height: calc(var(--sci-menu-item-size) + 2px);--\\275sci-menu-item-gap-inline: calc(.75 * var(--sci-menu-item-size));--\\275sci-menu-item-gap-block: calc(.125 * var(--sci-menu-item-size));--\\275sci-menu-padding-inline: .4em;--\\275sci-menu-padding-block: .3em;--\\275sci-menu-glyph-area: true;--\\275sci-menu-action-background-color-hover: color-mix(in srgb, var(--sci-menu-item-background-color-hover) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-action-background-color-active: color-mix(in srgb, var(--sci-menu-item-background-color-active) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-item-chevron-x-offset: calc(var(--sci-menu-item-size) / 4);--\\275sci-menu-font-size: var(--sci-menu-font-size, calc(.8125 * var(--sci-menu-item-size)));--\\275sci-menu-width: max-content;--\\275sci-menu-min-width: initial;--\\275sci-menu-max-width: initial;--\\275sci-menu-max-height: initial;--\\275sci-menu-scrolling: false;display:grid;gap:var(--\\275sci-menu-item-gap-block) var(--\\275sci-menu-item-gap-inline);align-items:center;font-size:var(--\\275sci-menu-font-size);border:1px solid var(--sci-color-border);border-radius:var(--sci-menu-border-radius);background-color:var(--sci-color-background-elevation);padding:var(--\\275sci-menu-padding-block) var(--\\275sci-menu-padding-inline);outline:none;box-sizing:border-box;width:var(--\\275sci-menu-width);min-width:var(--\\275sci-menu-min-width);max-width:var(--\\275sci-menu-max-width);-webkit-user-select:none;user-select:none;grid-template-columns:var(--sci-menu-item-size) minmax(0,1fr)}:host[data-glyph-area=none]{--\\275sci-menu-glyph-area: false;grid-template-columns:minmax(0,1fr)}:host[popover]{position:fixed;margin:unset;inset:unset;height:auto}:host[popover]:not(:popover-open){display:none}:host:not([popover]){grid-column:1/-1;grid-template-columns:subgrid;border:unset;border-radius:unset;color:inherit;padding:unset;background-color:inherit}:host>header.group-header{grid-column:1/-1;display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>header.group-header>sci-menu-group-label{flex:auto;color:var(--sci-menu-group-header-text-color);font-family:var(--sci-menu-group-header-font-family),sans-serif;font-weight:var(--sci-menu-group-header-font-weight);font-size:var(--sci-menu-group-header-font-size);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>header.group-header>sci-toolbar-group.actions{flex:none;align-self:center}:host>button:is(.group-header,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host>button:is(.group-header,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host>button:is(.group-header,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host>button:is(.group-header,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(.group-header,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host>button:is(.group-header,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host>button:is(.group-header,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center}:host>button:is(.group-header,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host>button:is(.group-header,#sci-reset)>sci-icon{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host>button:is(.group-header,#sci-reset)>div.content{display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center}:host>button:is(.group-header,#sci-reset)>div.content>sci-menu-group-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}:host:has(>sci-viewport){padding:var(--\\275sci-menu-padding-block) 0}:host:has(>sci-viewport)>header.group-header,:host:has(>sci-viewport)>button.group-header,:host:has(>sci-viewport)>div.filter,:host:has(>sci-viewport)>hr{margin:0 var(--\\275sci-menu-padding-inline)}:host>sci-viewport{grid-column:1/-1;max-height:var(--\\275sci-menu-max-height);box-sizing:border-box}:host>sci-viewport::part(content){grid-column:1/-1;display:grid;gap:var(--\\275sci-menu-item-gap-block) var(--\\275sci-menu-item-gap-inline);grid-template-columns:var(--sci-menu-item-size) minmax(0,1fr);padding:2px var(--\\275sci-menu-padding-inline)}@container style(--\\275sci-menu-glyph-area: false){:host>sci-viewport::part(content){grid-template-columns:minmax(0,1fr)}}:host>div.filter{grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-filter-outline-radius);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>div.filter:focus-within{outline:var(--sci-menu-filter-outline-width) solid var(--sci-color-accent)}@container style(--\\275sci-menu-glyph-area: false){:host>div.filter{display:flex;gap:var(--\\275sci-menu-item-gap-inline)}:host>div.filter>sci-icon{flex:none}:host>div.filter>sci-menu-filter{flex:auto}}:host>hr{all:unset;grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host div.message.no-items{grid-column:1/-1;justify-self:center;color:var(--sci-color-text-subtlest);padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline)}:host *:not(hr)+sci-menu-group:not(:has(>sci-menu-group:first-child)):before{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host sci-menu-group:not(:last-child):not(:has(+sci-menu-group,+sci-menu:last-child)):after{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host button:is(.menu-item,.menu,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host button:is(.menu-item,.menu,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host button:is(.menu-item,.menu,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host button:is(.menu-item,.menu,#sci-reset):focus:not(:focus-visible){outline:none}:host button:is(.menu-item,.menu,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host button:is(.menu-item,.menu,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host button:is(.menu-item,.menu,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;position:relative}:host button:is(.menu-item,.menu,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host button:is(.menu-item,.menu,#sci-reset).checked{--\\275sci-menu-item-checked: true}:host button:is(.menu-item,.menu,#sci-reset).active{--\\275sci-menu-item-active: true}:host button:is(.menu-item,.menu,#sci-reset):has(sci-toolbar-group.actions.menu-open){--\\275sci-menu-item-actions-menu-open: true}:host button:is(.menu-item,.menu,#sci-reset):not(:disabled):is(:hover,.active,:has(sci-toolbar-group.actions.menu-open)){--\\275sci-action-toolbar-visible: true}:host button:is(.menu-item,.menu,#sci-reset).menu-item.active:before{position:absolute;content:\"\";box-sizing:border-box;height:calc(100% - var(--sci-menu-item-active-indicator-border-radius));width:var(--sci-menu-item-active-indicator-size);left:calc(-1 * var(--\\275sci-menu-padding-inline) + 1px);border-radius:var(--sci-menu-item-active-indicator-border-radius);background-color:var(--sci-menu-item-active-indicator-background-color)}:host button:is(.menu-item,.menu,#sci-reset).menu.open{background-color:var(--sci-menu-item-background-color-hover)}:host button:is(.menu-item,.menu,#sci-reset).menu>div.content>sci-icon.chevron{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset).menu-item.checked>sci-icon:first-child{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset)>sci-menu-item-icon{display:inline-grid;place-content:center;height:var(--sci-menu-item-size);width:var(--sci-menu-item-size);overflow:hidden}:host button:is(.menu-item,.menu,#sci-reset)>div.content{display:flex;align-items:center;gap:var(--\\275sci-menu-item-gap-inline)}:host button:is(.menu-item,.menu,#sci-reset)>div.content:first-child{grid-column:1/-1}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-menu-item-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator{flex:none;color:var(--sci-menu-item-accelerator-text-color);font-size:.9em}@container style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator:has(+sci-toolbar-group.actions){display:none}}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}@container not style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{display:none}}@container style(--\\275sci-menu-scrolling: true) and (not style(--\\275sci-menu-item-active: true)) and (not style(--\\275sci-menu-item-actions-menu-open: true)){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{visibility:hidden}}:host sci-toolbar-group.actions{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-toolbar-item-size: var(--sci-menu-item-size);--\\275sci-toolbar-item-padding-block: 0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], glyphArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyphArea", required: false }] }], anchorWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorWidth", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], _filterField: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciMenuFilterComponent), { isSignal: true }] }], _viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciViewportComponent), { isSignal: true }] }], popoverViewContainerRef: [{ type: i0.ViewChild, args: ['popover_view_container_ref', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+                    ], template: "<!-- Filter Field -->\r\n@let filter = this.filter();\r\n@if (filter) {\r\n  <div class=\"filter e2e-filter\">\r\n    <sci-icon>scion:search</sci-icon>\r\n    @let message = filter.placeholder?.() ?? '%scion:components:type_to_filter.action';\r\n    <sci-menu-filter (textChange)=\"onFilterChange($event)\" [placeholder]=\"(message | sciText)()\"/>\r\n  </div>\r\n  <hr>\r\n}\r\n\r\n<!-- Group Header -->\r\n@if (group(); as group) {\r\n  @if (group.collapsible) {\r\n    <button class=\"group-header e2e-group-header\" (click)=\"onGroupHeaderButtonClick()\" (mouseenter)=\"onMenuItemMouseEnter(null)\">\r\n      <sci-icon>{{isGroupExpanded() ? 'scion:chevron_down' : 'scion:chevron_right'}}</sci-icon>\r\n\r\n      <div class=\"content\">\r\n        <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n      </div>\r\n    </button>\r\n  } @else if (group.label) {\r\n    <header class=\"group-header e2e-group-header\">\r\n      <ng-container *ngTemplateOutlet=\"group_header_template\"/>\r\n    </header>\r\n  }\r\n\r\n  <!-- Template for rendering group header. -->\r\n  <ng-template #group_header_template>\r\n    <sci-menu-group-label>{{group.label}}</sci-menu-group-label>\r\n\r\n    @if (group.actions.length && !this.disabled()) {\r\n      <sci-toolbar-group [menuItems]=\"group.actions\"\r\n                         [orientation]=\"'horizontal'\"\r\n                         [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                         (click)=\"$event.stopPropagation()\"\r\n                         class=\"actions e2e-actions\"/>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Menu Items -->\r\n@if (isGroupExpanded()) {\r\n  @if (maxHeight()) {\r\n    <!-- TODO [#384] Replace with sci-viewport -->\r\n    <div class=\"viewport e2e-viewport\" #viewport>\r\n      <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n    </div>\r\n    <sci-scrollbar direction=\"vscroll\" [viewport]=\"viewport\"/>\r\n  } @else {\r\n    <ng-container *ngTemplateOutlet=\"menu_items_template\"/>\r\n  }\r\n\r\n  <!-- Renders menu items. -->\r\n  <ng-template #menu_items_template>\r\n    @for (menuItem of menuItemsFiltered(); track $index) {\r\n      @let disabled = this.disabled() || menuItem.disabled?.() || false;\r\n\r\n      @switch (menuItem.type) {\r\n        @case ('menu-item') {\r\n          <!-- Menu Item -->\r\n          @if (!menuItem.menu) {\r\n            @let hasActionToolbar = !disabled && menuItem.actions?.length;\r\n            @let showAcceleratorInTooltip = menuItem.accelerator && hasActionToolbar;\r\n\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"showAcceleratorInTooltip ? (menuItem.accelerator | sciFormatAccelerator:menuItem.tooltip?.()) : menuItem.tooltip?.()\"\r\n                    [class.checked]=\"menuItem.checked?.()\"\r\n                    [class.active]=\"menuItem.active?.()\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu-item e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onMenuItemMouseEnter(menuItem)\"\r\n                    (click)=\"onSelect(menuItem)\">\r\n              <!-- Render icon if glyph area. -->\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <div class=\"content\">\r\n                <!-- Render icon inline if checkable. -->\r\n                @if (menuItem.iconLigature && menuItem.checked) {\r\n                  <sci-icon>{{menuItem.iconLigature()}}</sci-icon>\r\n                }\r\n\r\n                <!-- Render icon component inline if checkable. -->\r\n                @if (menuItem.iconComponent && menuItem.checked) {\r\n                  <sci-menu-item-icon>\r\n                    <ng-container *sciComponentOutlet=\"menuItem.iconComponent\"/>\r\n                  </sci-menu-item-icon>\r\n                }\r\n\r\n                <!-- Render label. -->\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n\r\n                <!-- Render accelerator. -->\r\n                @if (menuItem.accelerator) {\r\n                  <span class=\"accelerator\">{{menuItem.accelerator | sciFormatAccelerator}}</span>\r\n                }\r\n\r\n                <!-- Render actions. -->\r\n                @if (hasActionToolbar) {\r\n                  <sci-toolbar-group [menuItems]=\"menuItem.actions!\"\r\n                                     [orientation]=\"'horizontal'\"\r\n                                     [popoverViewContainerRef]=\"popoverViewContainerRef()\"\r\n                                     [class.menu-open]=\"actions_toolbar.menuOpen()\"\r\n                                     class=\"actions e2e-actions\"\r\n                                     (click)=\"$event.stopPropagation()\"\r\n                                     #actions_toolbar/>\r\n                }\r\n              </div>\r\n            </button>\r\n          }\r\n\r\n          <!-- Submenu Item -->\r\n          @if (menuItem.menu) {\r\n            <button [attr.disabled]=\"disabled || null\"\r\n                    [attr.title]=\"menuItem.tooltip?.()\"\r\n                    [class.open]=\"activeSubmenuItem()?.menuItem === menuItem\"\r\n                    [class]=\"menuItem.cssClass\" class=\"menu e2e-menu-item\"\r\n                    [sciAttributes]=\"menuItem.attributes\"\r\n                    (mouseenter)=\"onSubmenuItemMouseEnter({menuItem, element})\"\r\n                    (click)=\"onSubmenuItemClick({menuItem, element})\"\r\n                    #element>\r\n              @if (hasGlyphArea() && !group()?.hideGlyphArea) {\r\n                <!-- Render icon if glyph area. -->\r\n                <ng-container *ngTemplateOutlet=\"icon_template; context: {$implicit: menuItem}\"/>\r\n              }\r\n\r\n              <!-- Render label. -->\r\n              <div class=\"content\">\r\n                <ng-container *ngTemplateOutlet=\"label_template; context: {$implicit: menuItem}\"/>\r\n                <sci-icon class=\"chevron\">scion:chevron_right</sci-icon>\r\n              </div>\r\n            </button>\r\n          }\r\n        }\r\n        @case ('group') {\r\n          <sci-menu-group [group]=\"menuItem\"\r\n                          [glyphArea]=\"hasGlyphArea()\"\r\n                          [disabled]=\"disabled\"\r\n                          [cssClass]=\"menuItem.cssClass ?? []\"/>\r\n        }\r\n      }\r\n    } @empty {\r\n      <!-- TODO [Angular 23] Replace with optional chaining operator once the Angular compiler no longer logs the NG8107 false-positive warning. -->\r\n        <!-- @let message = filter?.notFoundMessage?.() ?? '%scion:components:no_items.message'; -->\r\n      @let message = (filter && filter.notFoundMessage?.()) ?? '%scion:components:no_items.message';\r\n      <div class=\"message no-items e2e-no-items\">{{(message | sciText)()}}</div>\r\n    }\r\n  </ng-template>\r\n}\r\n\r\n<!-- Location where to insert the menu popover. Must not be a child of the menu item button to prevent hovering the menu item when hovering menu items in the popover. -->\r\n<ng-container #popover_view_container_ref/>\r\n\r\n<!-- Renders the icon of the passed menu item. -->\r\n<ng-template #icon_template let-menuItem>\r\n  @if (menuItem.checked !== undefined) {\r\n    <sci-icon data-checkmark>{{menuItem.checked() ? 'scion:checkmark' : undefined}}</sci-icon>\r\n  } @else if (menuItem.iconLigature) {\r\n    <sci-icon>{{menuItem.iconLigature()}}</sci-icon>\r\n  } @else if (menuItem.iconComponent) {\r\n    <sci-menu-item-icon>\r\n      <ng-container *sciComponentOutlet=\"menuItem.iconComponent\"/>\r\n    </sci-menu-item-icon>\r\n  } @else {\r\n    <sci-menu-item-icon/>\r\n  }\r\n</ng-template>\r\n\r\n<!-- Renders the label of the passed menu item. -->\r\n<ng-template #label_template let-menuItem>\r\n  @if (menuItem.labelText) {\r\n    <sci-menu-item-label>\r\n      {{menuItem.labelText()}}\r\n    </sci-menu-item-label>\r\n  } @else if (menuItem.labelComponent) {\r\n    <sci-menu-item-label>\r\n      <ng-container *sciComponentOutlet=\"menuItem.labelComponent\"/>\r\n    </sci-menu-item-label>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--sci-icon-size: var(--sci-menu-item-size);--\\275sci-menu-item-padding-inline: calc(.5 * var(--sci-menu-item-size));--\\275sci-menu-item-padding-block: calc(.225 * var(--sci-menu-item-size));--\\275sci-menu-item-min-height: calc(var(--sci-menu-item-size) + 2px);--\\275sci-menu-item-gap-inline: calc(.75 * var(--sci-menu-item-size));--\\275sci-menu-item-gap-block: calc(.125 * var(--sci-menu-item-size));--\\275sci-menu-padding-inline: .4em;--\\275sci-menu-padding-block: .3em;--\\275sci-menu-glyph-area: true;--\\275sci-menu-action-background-color-hover: color-mix(in srgb, var(--sci-menu-item-background-color-hover) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-action-background-color-active: color-mix(in srgb, var(--sci-menu-item-background-color-active) 90%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--\\275sci-menu-item-chevron-x-offset: calc(var(--sci-menu-item-size) / 4);--\\275sci-menu-font-size: var(--sci-menu-font-size, calc(.8125 * var(--sci-menu-item-size)));--\\275sci-menu-width: max-content;--\\275sci-menu-min-width: initial;--\\275sci-menu-max-width: initial;--\\275sci-menu-max-height: initial;--\\275sci-menu-scrolling: false;display:grid;gap:var(--\\275sci-menu-item-gap-block) var(--\\275sci-menu-item-gap-inline);align-items:center;font-size:var(--\\275sci-menu-font-size);border:1px solid var(--sci-color-border);border-radius:var(--sci-menu-border-radius);background-color:var(--sci-color-background-elevation);padding:var(--\\275sci-menu-padding-block) var(--\\275sci-menu-padding-inline);outline:none;box-sizing:border-box;width:var(--\\275sci-menu-width);min-width:var(--\\275sci-menu-min-width);max-width:var(--\\275sci-menu-max-width);-webkit-user-select:none;user-select:none;grid-template-columns:var(--sci-menu-item-size) minmax(0,1fr)}:host[data-glyph-area=none]{--\\275sci-menu-glyph-area: false;grid-template-columns:minmax(0,1fr)}:host[popover]{position:fixed;margin:unset;inset:unset;height:auto}:host[popover]:not(:popover-open){display:none}:host:not([popover]){grid-column:1/-1;grid-template-columns:subgrid;border:unset;border-radius:unset;color:inherit;padding:unset;background-color:inherit}:host>header.group-header{grid-column:1/-1;display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>header.group-header>sci-menu-group-label{flex:auto;color:var(--sci-menu-group-header-text-color);font-family:var(--sci-menu-group-header-font-family),sans-serif;font-weight:var(--sci-menu-group-header-font-weight);font-size:var(--sci-menu-group-header-font-size);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>header.group-header>sci-toolbar-group.actions{flex:none;align-self:center}:host>button:is(.group-header,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host>button:is(.group-header,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host>button:is(.group-header,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host>button:is(.group-header,#sci-reset):focus:not(:focus-visible){outline:none}:host>button:is(.group-header,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host>button:is(.group-header,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host>button:is(.group-header,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center}:host>button:is(.group-header,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host>button:is(.group-header,#sci-reset)>sci-icon{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host>button:is(.group-header,#sci-reset)>div.content{display:flex;gap:var(--\\275sci-menu-item-gap-inline);justify-content:space-between;align-items:center}:host>button:is(.group-header,#sci-reset)>div.content>sci-menu-group-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host>button:is(.group-header,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}:host>div.viewport{grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;overflow:auto;scrollbar-width:none;max-height:var(--\\275sci-menu-max-height);box-sizing:border-box;margin-block:calc(-1 * var(--sci-button-outline-width));padding-block:var(--sci-button-outline-width);margin-inline:calc(-1 * var(--\\275sci-menu-padding-inline));padding-inline:var(--\\275sci-menu-padding-inline);anchor-name:--sci-menu-viewport}:host>div.viewport:not(:hover)+sci-scrollbar{opacity:0}:host>div.viewport+sci-scrollbar{position:absolute;top:calc(anchor(--sci-menu-viewport top) + var(--sci-button-outline-width));right:anchor(--sci-menu-viewport right);bottom:calc(anchor(--sci-menu-viewport bottom) + var(--sci-button-outline-width))}:host>div.filter{grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-filter-outline-radius);box-sizing:content-box;min-height:var(--\\275sci-menu-item-min-height)}:host>div.filter:focus-within{outline:var(--sci-menu-filter-outline-width) solid var(--sci-color-accent)}@container style(--\\275sci-menu-glyph-area: false){:host>div.filter{display:flex;gap:var(--\\275sci-menu-item-gap-inline)}:host>div.filter>sci-icon{flex:none}:host>div.filter>sci-menu-filter{flex:auto}}:host>hr{all:unset;grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host div.message.no-items{grid-column:1/-1;justify-self:center;color:var(--sci-color-text-subtlest);padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline)}:host *:not(hr)+sci-menu-group:not(:has(>sci-menu-group:first-child)):before{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host sci-menu-group:not(:last-child):not(:has(+sci-menu-group,+sci-menu:last-child)):after{content:\"\";grid-column:1/-1;height:1px;background-color:var(--sci-color-border)}:host button:is(.menu-item,.menu,#sci-reset){all:unset;text-wrap:nowrap;padding:var(--\\275sci-menu-item-padding-block) var(--\\275sci-menu-item-padding-inline);border-radius:var(--sci-menu-item-border-radius);-webkit-user-select:none;user-select:none;cursor:var(--sci-menu-item-cursor);color:var(--sci-menu-item-text-color);min-height:var(--\\275sci-menu-item-min-height);box-sizing:content-box}@container not style(--\\275sci-menu-scrolling: true){:host button:is(.menu-item,.menu,#sci-reset):hover:where(:not(:disabled)){background-color:var(--sci-menu-item-background-color-hover)}}:host button:is(.menu-item,.menu,#sci-reset):active:where(:not(:disabled)):focus{background-color:var(--sci-menu-item-background-color-active)}:host button:is(.menu-item,.menu,#sci-reset):focus:not(:focus-visible){outline:none}:host button:is(.menu-item,.menu,#sci-reset):focus-visible{outline:var(--sci-menu-item-outline-width) solid var(--sci-color-accent)}:host button:is(.menu-item,.menu,#sci-reset):disabled{color:var(--sci-menu-item-text-color-disabled)}:host button:is(.menu-item,.menu,#sci-reset){grid-column:1/-1;display:inline-grid;grid-template-columns:subgrid;align-items:center;position:relative}:host button:is(.menu-item,.menu,#sci-reset):hover{--\\275sci-menu-item-hover: true}:host button:is(.menu-item,.menu,#sci-reset).checked{--\\275sci-menu-item-checked: true}:host button:is(.menu-item,.menu,#sci-reset).active{--\\275sci-menu-item-active: true}:host button:is(.menu-item,.menu,#sci-reset):has(sci-toolbar-group.actions.menu-open){--\\275sci-menu-item-actions-menu-open: true}:host button:is(.menu-item,.menu,#sci-reset):not(:disabled):is(:hover,.active,:has(sci-toolbar-group.actions.menu-open)){--\\275sci-action-toolbar-visible: true}:host button:is(.menu-item,.menu,#sci-reset).menu-item.active:before{position:absolute;content:\"\";box-sizing:border-box;height:calc(100% - var(--sci-menu-item-active-indicator-border-radius));width:var(--sci-menu-item-active-indicator-size);left:calc(-1 * var(--\\275sci-menu-padding-inline) + 1px);border-radius:var(--sci-menu-item-active-indicator-border-radius);background-color:var(--sci-menu-item-active-indicator-background-color)}:host button:is(.menu-item,.menu,#sci-reset).menu.open{background-color:var(--sci-menu-item-background-color-hover)}:host button:is(.menu-item,.menu,#sci-reset).menu>div.content>sci-icon.chevron{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset).menu-item.checked>sci-icon:first-child{--sci-icon-size: calc(.875 * var(--sci-icon-size))}:host button:is(.menu-item,.menu,#sci-reset)>sci-menu-item-icon{display:inline-grid;place-content:center;height:var(--sci-menu-item-size);width:var(--sci-menu-item-size);overflow:hidden}:host button:is(.menu-item,.menu,#sci-reset)>div.content{display:flex;align-items:center;gap:var(--\\275sci-menu-item-gap-inline)}:host button:is(.menu-item,.menu,#sci-reset)>div.content:first-child{grid-column:1/-1}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-menu-item-label{flex:auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator{flex:none;color:var(--sci-menu-item-accelerator-text-color);font-size:.9em}@container style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>span.accelerator:has(+sci-toolbar-group.actions){display:none}}:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{flex:none;align-self:center}@container style(--\\275sci-menu-item-hover: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{--sci-toolbar-item-background-color-hover: var(--\\275sci-menu-action-background-color-hover);--sci-toolbar-item-background-color-active: var(--\\275sci-menu-action-background-color-active)}}@container not style(--\\275sci-action-toolbar-visible: true){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{display:none}}@container style(--\\275sci-menu-scrolling: true) and (not style(--\\275sci-menu-item-active: true)) and (not style(--\\275sci-menu-item-actions-menu-open: true)){:host button:is(.menu-item,.menu,#sci-reset)>div.content>sci-toolbar-group.actions{visibility:hidden}}:host sci-toolbar-group.actions{transform:translate(var(--\\275sci-menu-item-chevron-x-offset));--sci-toolbar-item-size: var(--sci-menu-item-size);--\\275sci-toolbar-item-padding-block: 0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], glyphArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyphArea", required: false }] }], anchorWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorWidth", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], _filterField: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciMenuFilterComponent), { isSignal: true }] }], _viewport: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }], popoverViewContainerRef: [{ type: i0.ViewChild, args: ['popover_view_container_ref', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 /**
  * Evaluates whether the given menu items (or any child groups) require a glyph area for displaying icons and checkmarks.
  */
@@ -1849,7 +1856,7 @@ class SciMenuOpener {
      * Opens the specified menu at the specified position.
      */
     openMenu(menu, options) {
-        const injector = createDestroyableInjector({ parent: this._injector });
+        const injector = _createDestroyableInjector({ parent: this._injector });
         const menuItems = Array.isArray(menu) ? signal(menu) : this.menuService.menuItems(menu, options.context ?? new Map(), { injector, metadata: options.metadata });
         return runInInjectionContext(injector, () => {
             // Get or create anchor at specified origin.
@@ -2164,7 +2171,7 @@ class ɵSciMenuRegistry {
     menuItems(location, context, options) {
         assertNotInReactiveContext(this.menuItems, 'Call menuItems() in a non-reactive (non-tracking) context, such as within the untracked() function.');
         if (!options.injector) {
-            assertInInjectionContext(this.menuItems, 'Call menuItems() in an injection context. It may allocate resources that are not released until the injection context is destroyed.');
+            _assertInInjectionContext(this.menuItems, 'Call menuItems() in an injection context. It may allocate resources that are not released until the injection context is destroyed.');
         }
         const callingContextInjector = options.injector ?? inject(Injector);
         const menuService = this.menuService;
@@ -2198,7 +2205,7 @@ class ɵSciMenuRegistry {
                 // Note: Function invoked in root injection context, which is destroyed when the last consumer (location) is disposed.
                 // Inject dependency injection providers for the given menu context.
                 const menuEnvironmentInjectionContextProviders = injectMenuInjectionContextProviders(context, { injector: callingContextInjector });
-                const menuEnvironmentInjectionContext = createDestroyableInjector({ parent: inject(Injector), providers: menuEnvironmentInjectionContextProviders });
+                const menuEnvironmentInjectionContext = _createDestroyableInjector({ parent: inject(Injector), providers: menuEnvironmentInjectionContextProviders });
                 return computed(() => {
                     const menuItems = (() => {
                         switch (menuContribution.type) {
@@ -2382,18 +2389,18 @@ class MenuItemsCache {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_cacheByContribution" }] : /* istanbul ignore next */ []));
     /**
-     * Gets the menu items of the given contribution used in the given context. Menu items are constructed via the passed factory function if absent (on cache miss).
+     * Gets the menu items of the given contribution used in the given context. Menu items are constructed via the passed computation function if absent (on cache miss).
      *
-     * Menu items are cached. Cached menu items are evicted when no longer used, tracked via a reference count based on the provided injector;
+     * Cached menu items are evicted when no longer used, tracked via a reference count based on the provided injector;
      * once all tracked injectors for a cache entry are destroyed, the cache entry is evicted.
      *
-     * The factory function is invoked in the root injection context. The injection context is destroyed when the last consumer (location) is disposed.
+     * The computation function is invoked in the root injection context. The injection context is destroyed when the last consumer (location) is disposed.
      */
     computeIfAbsent(contribution, context, computeFn, options) {
         assertNotInReactiveContext(this.computeIfAbsent, 'Call computeIfAbsent() in a non-reactive (non-tracking) context, such as within the untracked() function.');
         const cacheEntry = this._cacheByContribution().get(contribution)?.find(cacheEntry => Objects.isEqual(cacheEntry.context, context)) ?? (() => {
             const rootInjector = options.injector.get(ApplicationRef).injector;
-            const cacheEntryInjector = createDestroyableInjector({ parent: rootInjector });
+            const cacheEntryInjector = _createDestroyableInjector({ parent: rootInjector });
             const cacheEntry = {
                 injector: cacheEntryInjector,
                 contribution,
@@ -2653,6 +2660,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             args: [{ providedIn: 'root', useExisting: ɵSciMenuService }]
         }] });
 
+/*
+ * Copyright (c) 2018-2026 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Provides {@link SciMenuService} for dependency injection.
+ */
+function provideMenuService() {
+    return [
+        ɵSciMenuService,
+        { provide: SciMenuService, useExisting: ɵSciMenuService },
+    ];
+}
+
 /*
  * Copyright (c) 2018-2026 Swiss Federal Railways
  *
@@ -2666,9 +2692,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 function contributeMenu(locationLike, factoryFn, options) {
     assertNotInReactiveContext(contributeMenu, 'Call contributeMenu in a non-reactive (non-tracking) context, such as within the untracked() function.');
     if (!options?.injector) {
-        assertInInjectionContext(contributeMenu, 'Must be called within an injection context, or an explicit `Injector` passed via options. Disposes the contribution when the injection context is destroyed.');
+        _assertInInjectionContext(contributeMenu, 'Must be called within an injection context, or an explicit `Injector` passed via options. Disposes the contribution when the injection context is destroyed.');
     }
-    const injector = createDestroyableInjector({ parent: options?.injector ?? inject(Injector) });
+    const injector = _createDestroyableInjector({ parent: options?.injector ?? inject(Injector) });
     const location = typeof locationLike === 'string' ? { location: locationLike } : locationLike;
     const menuService = injector.get(ɵSciMenuService);
     const environmentContext = injectMenuContext({ injector });
@@ -3109,25 +3135,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  *  SPDX-License-Identifier: EPL-2.0
  */
 
-/*
- * Copyright (c) 2018-2026 Swiss Federal Railways
- *
- * This program and the accompanying materials are made
- * available under the terms of the Eclipse Public License 2.0
- * which is available at https://www.eclipse.org/legal/epl-2.0/
- *
- * SPDX-License-Identifier: EPL-2.0
- */
-/**
- * Provides {@link SciMenuService} for dependency injection.
- */
-function provideMenuService() {
-    return [
-        ɵSciMenuService,
-        { provide: SciMenuService, useExisting: ɵSciMenuService },
-    ];
-}
-
 /*
  * Copyright (c) 2018-2026 Swiss Federal Railways
  *
@@ -3267,5 +3274,5 @@ function provideMenuAcceleratorTargetProvider(providerFn) {
  * Generated bundle index. Do not edit.
  */
 
-export { SciMenuAdapter, SciMenuService, SciMenubarComponent, SciToolbarComponent, contributeMenu, installMenuAccelerators, provideMenuAcceleratorTargetProvider, provideMenuContextProvider, provideMenuInjectionContextProvider, ɵSciMenuService, injectMenuInjectionContextProviders as ɵinjectMenuInjectionContextProviders };
+export { SciMenuAdapter, SciMenuService, SciMenubarComponent, SciToolbarComponent, contributeMenu, installMenuAccelerators, provideMenuAcceleratorTargetProvider, provideMenuContextProvider, provideMenuInjectionContextProvider, provideMenuService, ɵSciMenuService, injectMenuInjectionContextProviders as ɵinjectMenuInjectionContextProviders };
 //# sourceMappingURL=scion-components-menu.mjs.map