@scion/components 22.2.0 → 22.4.0

package/fesm2022/scion-components-menu.mjs

@@ -0,0 +1,3277 @@
+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, afterRenderEffect, Directive } from '@angular/core';
+import * as i1$1 from '@scion/components/common';
+import { coerceSignal, createDestroyableInjector, SciComponentOutletDirective, SciAttributesDirective, 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 { subscribeIn, observeIn } from '@scion/toolkit/operators';
+import { coerceElement } from '@angular/cdk/coercion';
+import { takeUntilDestroyed, toObservable } 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 { dimension } from '@scion/components/dimension';
+import { UUID } from '@scion/toolkit/uuid';
+
+/*
+ * 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
+ */
+/**
+ * Translates the given {@link Translatable}.
+ */
+function translate(translatable) {
+    return translatable !== undefined ? untracked(() => text(translatable)) : undefined;
+}
+
+/*
+ * 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
+ */
+/**
+ * Injects the context for menu locations and contributions based on the current injection context.
+ *
+ * Must be called within an injection context, or an explicit {@link Injector} passed.
+ *
+ * @see provideMenuContextProvider
+ * @docs-private Not public API. For internal use only.
+ */
+function injectMenuContext(options) {
+    const injector = options?.injector ?? inject(Injector);
+    const providers = injector.get(SCI_MENU_CONTEXT_PROVIDERS, [], { optional: true });
+    // Get contexts available in the current injection context.
+    const contexts = providers.map(providerFn => coerceSignal(providerFn(injector)));
+    // Merge contexts.
+    return computed(() => new Map(contexts.flatMap(context => [...context?.() ?? new Map()])), { equal: Objects.isEqual });
+}
+/**
+ * Injects dependency injection providers of the given menu context based on the current injection context.
+ *
+ * Must be called within an injection context, or an explicit {@link Injector} passed.
+ *
+ * @see provideMenuInjectionContextProvider
+ * @docs-private Not public API. Used by frameworks integrating the SCION Menu API. Applications should not use this function.
+ */
+function injectMenuInjectionContextProviders(menuContext, options) {
+    const injector = options?.injector ?? inject(Injector);
+    const providers = injector.get(SCI_MENU_INJECTION_CONTEXT_PROVIDERS, [], { optional: true });
+    return providers.flatMap(providerFn => providerFn(menuContext));
+}
+/**
+ * Injects accelerator targets for menu locations based on the current injection context.
+ *
+ * Must be called within an injection context, or an explicit {@link Injector} passed.
+ *
+ * @see provideMenuAcceleratorTargetProvider
+ * @docs-private Not public API. For internal use only.
+ */
+function injectMenuAcceleratorTargets(options) {
+    const injector = options?.injector ?? inject(Injector);
+    const providers = injector.get(SCI_MENU_ACCELERATOR_TARGET_PROVIDERS, [], { optional: true });
+    // Get accelerator targets available in the current injection context.
+    const acceleratorTargets = providers.map(providerFn => coerceSignal(providerFn(injector)));
+    // Concat accelerator targets.
+    return computed(() => acceleratorTargets.flatMap(acceleratorTarget => Arrays.coerce(acceleratorTarget?.())).map(coerceElement), { equal: Objects.isEqual });
+}
+/**
+ * Multi-DI token for registering a {@link SciMenuContextProviderFn} in a specific environment.
+ *
+ * @see provideMenuContextProvider
+ */
+const SCI_MENU_CONTEXT_PROVIDER = new InjectionToken('SCI_MENU_CONTEXT_PROVIDER');
+/**
+ * DI token to inject {@link SciMenuContextProviderFn} functions provided in the current and parent injectors.
+ *
+ * @see injectMenuContext
+ */
+const SCI_MENU_CONTEXT_PROVIDERS = new InjectionToken('SCI_MENU_CONTEXT_PROVIDERS');
+/**
+ * Multi-DI token for registering a {@link SciMenuInjectionContextProviderFn} in a specific environment.
+ *
+ * @see provideMenuInjectionContextProvider
+ */
+const SCI_MENU_INJECTION_CONTEXT_PROVIDER = new InjectionToken('SCI_MENU_INJECTION_CONTEXT_PROVIDER');
+/**
+ * DI token to inject {@link SciMenuInjectionContextProviderFn} functions provided in the current and parent injectors.
+ *
+ * @see injectMenuInjectionContextProviders
+ */
+const SCI_MENU_INJECTION_CONTEXT_PROVIDERS = new InjectionToken('SCI_MENU_INJECTION_CONTEXT_PROVIDERS');
+/**
+ * Multi-DI token for registering a {@link SciMenuAcceleratorTargetProviderFn} in a specific environment.
+ *
+ * @see provideMenuAcceleratorTargetProvider
+ */
+const SCI_MENU_ACCELERATOR_TARGET_PROVIDER = new InjectionToken('SCI_MENU_ACCELERATOR_TARGET_PROVIDER');
+/**
+ * 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');
+
+/*
+ * 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
+ */
+/**
+ * Installs accelerators for menu items contributed to the given location matching the specified context.
+ *
+ * An accelerator maps a physical key combination (key combined with modifiers such as `Ctrl`, `Shift`, or `Alt`) to an application action,
+ * enabling users to trigger an action without using a pointer device.
+ *
+ * Context and accelerator targets are inherited from the current injector hierarchy, but can be overridden via {@link SciMenuAcceleratorOptions.context} and {@link SciMenuAcceleratorOptions.target} options.
+ *
+ * This function must be called within an injection context, or an explicit {@link Injector} passed. Destroying the injection context uninstalls the accelerators.
+ *
+ * @param location - Specifies the menu, toolbar, or menubar for which to install accelerators.
+ * @param options - Controls the installation of accelerators.
+ * @returns Handle to uninstall the accelerators.
+ *
+ * @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) });
+    return runInInjectionContext(injector, () => {
+        const environmentContext = injectMenuContext();
+        const environmentTargets = injectMenuAcceleratorTargets();
+        const context = computed(() => new Map([...environmentContext(), ...options?.context ?? new Map()]), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+        const menuItems = inject(ɵSciMenuService).menuItems(location, context, { metadata: options?.metadata });
+        effect(onCleanup => {
+            const tracked = {
+                menuItems: menuItems(),
+                environmentTargets: environmentTargets(),
+            };
+            untracked(() => {
+                const accelerators = ɵinstallMenuAccelerators(tracked.menuItems, {
+                    targets: options?.target,
+                    environmentTargets: tracked.environmentTargets,
+                    injector,
+                });
+                onCleanup(() => accelerators.dispose());
+            });
+        });
+        return {
+            dispose: () => injector.destroy(),
+        };
+    });
+}
+/**
+ * Installs accelerators for given menu items, recursively for menu items in submenus and groups.
+ */
+function ɵinstallMenuAccelerators(menuItems, options) {
+    assertNotInReactiveContext(installMenuAccelerators, 'Call installMenuAccelerators() in a non-reactive (non-tracking) context, such as within the untracked() function.');
+    const menuItemsWithAccelerator = collectMenuItemsWithAccelerator(menuItems);
+    if (!menuItemsWithAccelerator.length) {
+        return { dispose: noop };
+    }
+    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?.());
+    merge(...targets.map(target => fromEvent(target, 'keydown')))
+        .pipe(subscribeIn(fn => zone.runOutsideAngular(fn)), takeUntilDestroyed(injector.get(DestroyRef)))
+        .subscribe(event => {
+        // Skip if only pressing a modifier key.
+        switch (event.key) {
+            case 'Control':
+            case 'Shift':
+            case 'Alt':
+            case 'AltGraph':
+                return;
+            // UNDOCUMENTED: `event.key` can be `undefined`, for example, when selecting an option from an input element's datalist.
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            case undefined:
+                return;
+        }
+        // Skip if not pressing a modifier key. Accelerators must have a modifier key.
+        if (!event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey && !allowedSingleKeys.has(event.key.toLowerCase())) {
+            return;
+        }
+        const matchingMenuItems = menuItemsWithAccelerator.filter(menuItem => !menuItem.disabled?.() && matchesAccelerator(event, menuItem.accelerator));
+        if (!matchingMenuItems.length) {
+            return;
+        }
+        // Invoke menu item handler.
+        event.preventDefault();
+        event.stopPropagation();
+        zone.run(() => matchingMenuItems.forEach(menuItem => onSelectFn(menuItem)));
+    });
+    return {
+        dispose: () => injector.destroy(),
+    };
+}
+/**
+ * Returns given native elements, or `undefined` if empty.
+ */
+function coerceElements(targets) {
+    const elements = Arrays.coerce(targets).map(coerceElement);
+    return elements.length ? elements : undefined;
+}
+/**
+ * Returns a flat list of all menu items that have an accelerator.
+ */
+function collectMenuItemsWithAccelerator(menuItemLikes) {
+    return menuItemLikes.reduce((menuItems, menuItemLike) => {
+        switch (menuItemLike.type) {
+            case 'menu-item': {
+                return menuItems
+                    .concat(menuItemLike.accelerator ? menuItemLike : [])
+                    .concat(collectMenuItemsWithAccelerator(menuItemLike.actions ?? []))
+                    .concat(collectMenuItemsWithAccelerator(menuItemLike.menu?.children ?? []));
+            }
+            case 'group': {
+                return menuItems
+                    .concat(collectMenuItemsWithAccelerator(menuItemLike.children))
+                    .concat(collectMenuItemsWithAccelerator(menuItemLike.actions ?? []));
+            }
+        }
+    }, new Array());
+}
+/**
+ * Validates the passed menu accelerator to have a modifier, unless a function key, 'Delete', or 'Escape'.
+ */
+function validateMenuAccelerator(accelerator) {
+    if (!accelerator) {
+        return undefined;
+    }
+    if (!accelerator.ctrl && !accelerator.alt && !accelerator.shift && !allowedSingleKeys.has(accelerator.key.toLowerCase())) {
+        console.warn(`[MenuDefinitionError] Illegal menu accelerator. The key '${accelerator.key}' requires a modifier such as 'Ctrl', 'Shift', or 'Alt'. Only function keys F1-F12 and 'Delete' are allowed without a modifier. Examples: ['ctrl', 's'], ['F5'].`);
+        return undefined;
+    }
+    return accelerator;
+}
+/**
+ * Tests if the given keyboard event matches the specified accelerator.
+ */
+function matchesAccelerator(event, accelerator) {
+    // Fallback to code if key does not match to support diacritics like umlauts and accents.
+    const keyMatches = accelerator.key.toLowerCase() === event.key.toLowerCase() || `Key${accelerator.key.toUpperCase()}` === event.code;
+    if (!keyMatches) {
+        return false;
+    }
+    // Handle Meta key as the Control key as on Apple devices the Command (⌘) key is used instead of the Control (Ctrl) key.
+    if ((accelerator.ctrl ?? false) !== (event.ctrlKey || event.metaKey)) {
+        return false;
+    }
+    if ((accelerator.shift ?? false) !== event.shiftKey) {
+        return false;
+    }
+    if ((accelerator.alt ?? false) !== event.altKey) {
+        return false;
+    }
+    if (accelerator.location === 'left' && event.location !== 1) {
+        return false;
+    }
+    if (accelerator.location === 'right' && event.location !== 2) {
+        return false;
+    }
+    if (accelerator.location === 'numpad' && event.location !== 3) {
+        return false;
+    }
+    return true;
+}
+/**
+ * Keys that can be used without a modifier (ctrl, alt, shift).
+ */
+const allowedSingleKeys = new Set([
+    ...Array.from(Array(20).keys()).map(i => `f${i + 1}`), // F1 - F20
+    'delete',
+]);
+
+/*
+ * 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
+ */
+/**
+ * Translation note: Texts are translated when added (not lazily when rendered) to simplify filtering.
+ *
+ * @inheritDoc
+ */
+class ɵSciToolbarFactory {
+    menuItems = [];
+    /** @inheritDoc */
+    addToolbarButton(descriptor) {
+        this.menuItems.push(prune({
+            type: 'menu-item',
+            name: descriptor.name,
+            labelText: translate(getLabelIfText$1(descriptor.label)),
+            labelComponent: getLabelIfComponent$1(descriptor.label),
+            iconLigature: coerceSignal(getIconIfLigature$1(descriptor.icon)),
+            iconComponent: getIconIfComponent$1(descriptor.icon),
+            checked: coerceSignal(descriptor.checked),
+            tooltip: translate(descriptor.tooltip),
+            accelerator: validateMenuAccelerator(descriptor.accelerator),
+            disabled: coerceSignal(descriptor.disabled),
+            visible: coerceSignal(descriptor.visible),
+            cssClass: Arrays.coerce(descriptor.cssClass),
+            attributes: descriptor.attributes,
+            onSelect: async () => await descriptor.onSelect() ?? descriptor.checked === undefined, // Returning `true` will close the popover. Non-checkable items close by default.
+        }));
+        return this;
+    }
+    /** @inheritDoc */
+    addToolbarSplitButton(descriptor, menuFactoryFn) {
+        this.menuItems.push(prune({
+            type: 'menu-item',
+            name: descriptor.name,
+            labelText: translate(getLabelIfText$1(descriptor.label)),
+            labelComponent: getLabelIfComponent$1(descriptor.label),
+            iconLigature: coerceSignal(getIconIfLigature$1(descriptor.icon)),
+            iconComponent: getIconIfComponent$1(descriptor.icon),
+            checked: coerceSignal(descriptor.checked),
+            tooltip: translate(descriptor.tooltip),
+            accelerator: validateMenuAccelerator(descriptor.accelerator),
+            disabled: coerceSignal(descriptor.disabled),
+            visible: coerceSignal(descriptor.visible),
+            cssClass: Arrays.coerce(descriptor.cssClass),
+            attributes: descriptor.attributes,
+            menu: constructMenu(menuFactoryFn, descriptor.menu),
+            onSelect: async () => await descriptor.onSelect() ?? descriptor.checked === undefined, // Returning `true` will close the popover. Non-checkable items close by default.
+        }));
+        return this;
+    }
+    /** @inheritDoc */
+    addToolbarMenu(descriptor, menuFactoryFn) {
+        this.menuItems.push(prune({
+            type: 'menu-item',
+            name: descriptor.name,
+            labelText: translate(getLabelIfText$1(descriptor.label)),
+            labelComponent: getLabelIfComponent$1(descriptor.label),
+            iconLigature: coerceSignal(getIconIfLigature$1(descriptor.icon)),
+            iconComponent: getIconIfComponent$1(descriptor.icon),
+            tooltip: translate(descriptor.tooltip),
+            disabled: coerceSignal(descriptor.disabled),
+            visible: coerceSignal(descriptor.visible),
+            visualMenuIndicator: descriptor.visualMenuIndicator,
+            cssClass: Arrays.coerce(descriptor.cssClass),
+            attributes: descriptor.attributes,
+            menu: constructMenu(menuFactoryFn, descriptor.menu),
+        }));
+        return this;
+    }
+    /** @inheritDoc */
+    addToolbarControl(descriptor) {
+        this.menuItems.push(prune({
+            type: 'menu-item',
+            name: descriptor.name,
+            control: prune({
+                component: descriptor.component,
+                bindings: descriptor.bindings,
+                injector: descriptor.injector,
+                providers: descriptor.providers,
+            }),
+            tooltip: translate(descriptor.tooltip),
+            visible: coerceSignal(descriptor.visible),
+            cssClass: Arrays.coerce(descriptor.cssClass),
+            attributes: descriptor.attributes,
+        }));
+        return this;
+    }
+    /** @inheritDoc */
+    addToolbarSplitControl(descriptor, menuFactoryFn) {
+        this.menuItems.push(prune({
+            type: 'menu-item',
+            name: descriptor.name,
+            control: prune({
+                component: descriptor.component,
+                bindings: descriptor.bindings,
+                injector: descriptor.injector,
+                providers: descriptor.providers,
+            }),
+            tooltip: translate(descriptor.tooltip),
+            visible: coerceSignal(descriptor.visible),
+            cssClass: Arrays.coerce(descriptor.cssClass),
+            attributes: descriptor.attributes,
+            menu: constructMenu(menuFactoryFn, descriptor.menu),
+        }));
+        return this;
+    }
+    addGroup(factoryOrDescriptor, factoryIfDescriptor) {
+        const [descriptor, groupFactoryFn] = typeof factoryOrDescriptor === 'function' ? [{}, factoryOrDescriptor] : [factoryOrDescriptor, factoryIfDescriptor];
+        // Construct group.
+        const groupFactory = new ɵSciToolbarFactory();
+        groupFactoryFn?.(groupFactory);
+        // Add group.
+        this.menuItems.push(prune({
+            type: 'group',
+            name: descriptor.name,
+            disabled: coerceSignal(descriptor.disabled),
+            visible: coerceSignal(descriptor.visible),
+            children: groupFactory.menuItems,
+            cssClass: Arrays.coerce(descriptor.cssClass),
+        }));
+        return this;
+    }
+}
+function getLabelIfText$1(label) {
+    if (typeof label === 'string' || isSignal(label)) {
+        return label;
+    }
+    return undefined;
+}
+function getLabelIfComponent$1(label) {
+    if (typeof label === 'function' && !isSignal(label)) {
+        return { component: label };
+    }
+    else if (typeof label === 'object') {
+        return label;
+    }
+    return undefined;
+}
+function getIconIfLigature$1(icon) {
+    if (typeof icon === 'string' || isSignal(icon)) {
+        return icon;
+    }
+    return undefined;
+}
+function getIconIfComponent$1(icon) {
+    if (typeof icon === 'function' && !isSignal(icon)) {
+        return { component: icon };
+    }
+    else if (typeof icon === 'object') {
+        return icon;
+    }
+    return undefined;
+}
+
+/*
+ * 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
+ */
+/**
+ * Translation note: Texts are translated when added (not lazily when rendered) to simplify filtering.
+ */
+class ɵSciMenuFactory {
+    menuItems = [];
+    /** @inheritDoc */
+    addMenuItem(descriptor) {
+        // Construct action toolbar.
+        const actionsFactory = new ɵSciToolbarFactory();
+        descriptor.actions?.(actionsFactory);
+        // Add menu item.
+        this.menuItems.push(prune({
+            type: 'menu-item',
+            name: descriptor.name,
+            labelText: translate(getLabelIfText(descriptor.label)),
+            labelComponent: getLabelIfComponent(descriptor.label),
+            iconLigature: coerceSignal(getIconIfLigature(descriptor.icon)),
+            iconComponent: getIconIfComponent(descriptor.icon),
+            checked: coerceSignal(descriptor.checked),
+            active: coerceSignal(descriptor.active),
+            tooltip: translate(descriptor.tooltip),
+            accelerator: validateMenuAccelerator(descriptor.accelerator),
+            disabled: coerceSignal(descriptor.disabled),
+            visible: coerceSignal(descriptor.visible),
+            actions: actionsFactory.menuItems,
+            matchesFilter: descriptor.onFilter,
+            cssClass: Arrays.coerce(descriptor.cssClass),
+            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 */
+    addMenu(descriptor, menuFactoryFn) {
+        this.menuItems.push(prune({
+            type: 'menu-item',
+            name: descriptor.name,
+            labelText: translate(getLabelIfText(descriptor.label)),
+            labelComponent: getLabelIfComponent(descriptor.label),
+            iconLigature: coerceSignal(getIconIfLigature(descriptor.icon)),
+            iconComponent: getIconIfComponent(descriptor.icon),
+            disabled: coerceSignal(descriptor.disabled),
+            visible: coerceSignal(descriptor.visible),
+            cssClass: Arrays.coerce(descriptor.cssClass),
+            attributes: descriptor.attributes,
+            menu: constructMenu(menuFactoryFn, descriptor.menu),
+        }));
+        return this;
+    }
+    addGroup(factoryOrDescriptor, factoryIfDescriptor) {
+        const [descriptor, groupFactoryFn] = typeof factoryOrDescriptor === 'function' ? [{}, factoryOrDescriptor] : [factoryOrDescriptor, factoryIfDescriptor];
+        // Construct group.
+        const groupFactory = new ɵSciMenuFactory();
+        groupFactoryFn?.(groupFactory);
+        // Construct action toolbar.
+        const actionsFactory = new ɵSciToolbarFactory();
+        descriptor.actions?.(actionsFactory);
+        // Add group.
+        this.menuItems.push(prune({
+            type: 'group',
+            name: descriptor.name,
+            label: translate(descriptor.label),
+            collapsible: coerceCollapsibleGroupConfig(descriptor),
+            glyphArea: descriptor.glyphArea,
+            disabled: coerceSignal(descriptor.disabled),
+            visible: coerceSignal(descriptor.visible),
+            actions: actionsFactory.menuItems,
+            children: groupFactory.menuItems,
+            cssClass: Arrays.coerce(descriptor.cssClass),
+        }));
+        return this;
+    }
+}
+function getLabelIfText(label) {
+    if (typeof label === 'string' || isSignal(label)) {
+        return label;
+    }
+    return undefined;
+}
+function getLabelIfComponent(label) {
+    if (typeof label === 'function' && !isSignal(label)) {
+        return { component: label };
+    }
+    else if (typeof label === 'object') {
+        return label;
+    }
+    return undefined;
+}
+function getIconIfLigature(icon) {
+    if (typeof icon === 'string' || isSignal(icon)) {
+        return icon;
+    }
+    return undefined;
+}
+function getIconIfComponent(icon) {
+    if (typeof icon === 'function' && !isSignal(icon)) {
+        return { component: icon };
+    }
+    else if (typeof icon === 'object') {
+        return icon;
+    }
+    return undefined;
+}
+function coerceCollapsibleGroupConfig(groupDescriptor) {
+    const collapsible = groupDescriptor.collapsible;
+    if (typeof collapsible === 'object') {
+        return collapsible;
+    }
+    return collapsible === true ? { collapsed: false } : undefined;
+}
+function constructMenu(menuFactoryFn, menuDescriptor) {
+    const menuFactory = new ɵSciMenuFactory();
+    menuFactoryFn?.(menuFactory);
+    return prune({
+        name: menuDescriptor?.name,
+        children: menuFactory.menuItems,
+        width: menuDescriptor?.width,
+        minWidth: menuDescriptor?.minWidth,
+        maxWidth: menuDescriptor?.maxWidth,
+        maxHeight: menuDescriptor?.maxHeight,
+        filter: coerceFilterConfig(menuDescriptor),
+    });
+    function coerceFilterConfig(menuDescriptor) {
+        const filter = menuDescriptor?.filter;
+        if (typeof filter === 'object') {
+            return prune({
+                placeholder: coerceSignal(filter.placeholder),
+                notFoundMessage: coerceSignal(filter.notFoundMessage),
+                focus: filter.focus,
+            }, { pruneIfEmpty: true });
+        }
+        return filter === true ? {} : undefined;
+    }
+}
+
+/*
+ * 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
+ */
+/**
+ * Sorts passed menu items based on its preferred {@link SciMenuItemLike.position}.
+ *
+ * This function is not recursive, not sorting menu items in submenus or groups.
+ */
+function sortMenuItems(menuItems) {
+    // Note: The standard JavaScript sorting algorithms cannot be used as it requires strict weak element ordering (transitivity), not given for elements positioned relative to each other.
+    const sorted = [];
+    const queue = new Set(menuItems);
+    // Add contributions which do not declare an insertion point or a non-existent insertion point.
+    queue.forEach(menuItem => {
+        // Add contribution if not declaring an insertion point.
+        if (!menuItem.position) {
+            sorted.push(menuItem);
+            queue.delete(menuItem);
+        }
+        // Add contribution if declaring a non-existent "before" insertion point.
+        else if (menuItem.position.before && !menuItems.some(it => it.name === menuItem.position.before)) {
+            sorted.push(menuItem);
+            queue.delete(menuItem);
+        }
+        // Add contribution if declaring a non-existent "after" insertion point.
+        else if (menuItem.position.after && !menuItems.some(it => it.name === menuItem.position.after)) {
+            sorted.push(menuItem);
+            queue.delete(menuItem);
+        }
+    });
+    // Add contributions at the start or end.
+    queue.forEach(menuItem => {
+        if (menuItem.position?.position === 'start') {
+            sorted.unshift(menuItem);
+            queue.delete(menuItem);
+        }
+        else if (menuItem.position?.position === 'end') {
+            sorted.push(menuItem);
+            queue.delete(menuItem);
+        }
+    });
+    // Add contributions declaring an insertion point. Multiple iterations may be required.
+    while (queue.size) {
+        const queueSize = queue.size;
+        for (const menuItem of queue) {
+            // Add contributions declaring a "before" insertion point.
+            if (menuItem.position?.before) {
+                const index = sorted.findIndex(candidate => candidate.name === menuItem.position.before);
+                if (index !== -1) {
+                    sorted.splice(index, 0, menuItem);
+                    queue.delete(menuItem);
+                }
+            }
+            // Add contributions declaring an "after" insertion point.
+            else if (menuItem.position?.after) {
+                const index = sorted.findIndex(candidate => candidate.name === menuItem.position.after);
+                if (index !== -1) {
+                    sorted.splice(index + 1, 0, menuItem);
+                    queue.delete(menuItem);
+                }
+            }
+        }
+        if (queue.size === queueSize) {
+            // TODO [menu] Better message, Algo error
+            console.warn('[@scion/components] Menu contributions reference non-existent menu items.', queue);
+            sorted.push(...queue);
+            queue.clear();
+        }
+    }
+    return sorted;
+}
+
+/*
+ * 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 registration instants for contributions.
+ *
+ * Two consecutive calls always have different instants, in ascending order.
+ */
+class SciMenuContributionInstantProvider {
+    _instant = 0;
+    /**
+     * Provides the next instant.
+     */
+    next() {
+        return ++this._instant;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuContributionInstantProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuContributionInstantProvider, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuContributionInstantProvider, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/*
+ * 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
+ */
+/**
+ * Formats a keyboard accelerator for display.
+ *
+ * If `tooltip` is specified, appends the accelerator in parentheses.
+ */
+class SciFormatAcceleratorPipe {
+    transform(accelerator, tooltip) {
+        if (!accelerator) {
+            return tooltip;
+        }
+        const modifiers = [];
+        if (accelerator.ctrl) {
+            modifiers.push(ctrlKeySymbol);
+        }
+        if (accelerator.shift) {
+            modifiers.push('Shift');
+        }
+        if (accelerator.alt) {
+            modifiers.push('Alt');
+        }
+        const key = formatKey(accelerator);
+        const formattedAccelerator = `${accelerator.location === 'numpad' ? `NumPad ` : ''}${modifiers.concat(key).join('+')}`;
+        return tooltip ? `${tooltip} (${formattedAccelerator})` : formattedAccelerator;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciFormatAcceleratorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: SciFormatAcceleratorPipe, isStandalone: true, name: "sciFormatAccelerator" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciFormatAcceleratorPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'sciFormatAccelerator' }]
+        }] });
+function formatKey(accelerator) {
+    switch (accelerator.key.toLowerCase()) {
+        case ' ':
+            return 'Space';
+        case 'arrowdown':
+            return 'Down';
+        case 'arrowup':
+            return 'Up';
+        case 'arrowleft':
+            return 'Left';
+        case 'arrowright':
+            return 'Right';
+        default:
+            return accelerator.key[0].toUpperCase() + accelerator.key.substring(1);
+    }
+}
+/**
+ * Platform-specific name for the Control modifier key.
+ *
+ * Resolves to `⌘` on macOS and `Ctrl` on other operating systems.
+ */
+const ctrlKeySymbol = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl';
+
+/*
+ * 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
+ */
+/**
+ * Alias for {@link SciMenuComponent} with `sci-menu-group` as tag name.
+ */
+class SciMenuGroupComponent {
+    group = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+    glyphArea = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "glyphArea" }] : /* istanbul ignore next */ []));
+    disabled = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
+    cssClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "cssClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const menuComponent = createComponent(SciMenuComponent, {
+            elementInjector: inject(Injector),
+            environmentInjector: inject(EnvironmentInjector),
+            hostElement: inject(ElementRef).nativeElement,
+            bindings: [
+                inputBinding('menuItems', computed(() => this.group().children)),
+                inputBinding('disabled', this.disabled),
+                inputBinding('cssClass', this.cssClass),
+                inputBinding('glyphArea', this.glyphArea),
+                inputBinding('group', computed(() => ({
+                    label: this.group().label?.(),
+                    collapsible: !!this.group().collapsible,
+                    collapsed: this.group().collapsible?.collapsed ?? false,
+                    hideGlyphArea: this.group().glyphArea === false,
+                    actions: this.group().actions ?? [],
+                }))),
+            ],
+            directives: [
+                provideMenuComponentRole('group'),
+            ],
+        });
+        // Attach component to Angular component tree for change detection.
+        inject(ApplicationRef).attachView(menuComponent.hostView);
+        // Destroy component when host is destroyed.
+        inject(DestroyRef).onDestroy(() => menuComponent.destroy());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SciMenuGroupComponent, isStandalone: true, selector: "sci-menu-group", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, glyphArea: { classPropertyName: "glyphArea", publicName: "glyphArea", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sci-menu-group',
+                    template: '', // Template provided by `SciMenuComponent`.
+                }]
+        }], ctorParameters: () => [], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], glyphArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyphArea", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }] } });
+
+/*
+ * 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
+ */
+class SciMenuFilterComponent {
+    placeholder = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    text = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    _inputField = viewChild.required('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_inputField" }] : /* istanbul ignore next */ []));
+    focus() {
+        this._inputField().nativeElement.focus();
+    }
+    onClear() {
+        this.text.set('');
+        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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-menu-filter', imports: [
+                        FormsModule,
+                        SciTextPipe,
+                        SciIconComponent,
+                    ], 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"] }]
+        }], 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 }] }] } });
+
+/*
+ * 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
+ */
+/**
+ * Filters menu items based on the passed filter text.
+ *
+ * Filtering is hierarchical; submenus and groups inherit the filter of their parent menus.
+ * A menu item matches only if matching its menu filter and all parent menu filters.
+ *
+ * Can be injected into {@link SciMenuComponent}.
+ */
+class MenuFilter {
+    _parentMenuFilter;
+    _filterText = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_filterText" }] : /* istanbul ignore next */ []));
+    /**
+     * Indicates whether filtering is active.
+     */
+    active = computed(() => {
+        return !!this._filterText() || !!this._parentMenuFilter?.active();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    constructor(_parentMenuFilter) {
+        this._parentMenuFilter = _parentMenuFilter;
+    }
+    /**
+     * Sets the filter for filtering menu items.
+     */
+    setFilterText(filterText) {
+        this._filterText.set(filterText || null); // eslint-disable-line @typescript-eslint/prefer-nullish-coalescing
+    }
+    /**
+     * Tests whether the given menu item matches the filter.
+     */
+    matches(menuItem) {
+        return computed(() => {
+            const filterText = this._filterText();
+            // Test if the menu item matches the filter using its filter function, if any.
+            if (filterText && menuItem.matchesFilter && !menuItem.matchesFilter(filterText)) {
+                return false;
+            }
+            // Test if the display text of the menu item matches the filter.
+            if (filterText && !menuItem.matchesFilter && menuItem.labelText && !menuItem.labelText().toLowerCase().includes(filterText.toLowerCase())) {
+                return false;
+            }
+            // Test if the menu item matches the parent filter, if any.
+            if (this._parentMenuFilter && !this._parentMenuFilter.matches(menuItem)()) {
+                return false;
+            }
+            return true;
+        });
+    }
+}
+
+/*
+ * 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
+ */
+/**
+ * Represents a semantic element for a toolbar control provided as slotted content.
+ */
+class SciToolbarControlComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciToolbarControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SciToolbarControlComponent, isStandalone: true, selector: "sci-toolbar-control", ngImport: i0, template: '<ng-content/>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciToolbarControlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sci-toolbar-control',
+                    template: '<ng-content/>',
+                }]
+        }] });
+
+/*
+ * 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
+ */
+/**
+ * Represents a semantic element for a toolbar split button provided as slotted content.
+ */
+class SciToolbarSplitButtonComponent {
+    host = inject(ElementRef).nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciToolbarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SciToolbarSplitButtonComponent, isStandalone: true, selector: "sci-toolbar-split-button", ngImport: i0, template: '<ng-content/>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciToolbarSplitButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sci-toolbar-split-button',
+                    template: '<ng-content/>',
+                }]
+        }] });
+
+/*
+ * 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
+ */
+/**
+ * Represents a semantic element for the icon of a toolbar item provided as slotted content.
+ */
+class SciToolbarIconComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciToolbarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SciToolbarIconComponent, isStandalone: true, selector: "sci-toolbar-icon", ngImport: i0, template: '<ng-content/>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciToolbarIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sci-toolbar-icon',
+                    template: '<ng-content/>',
+                }]
+        }] });
+
+/*
+ * 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
+ */
+/**
+ * Represents a semantic element for the label of a toolbar item provided as slotted content.
+ */
+class SciToolbarLabelComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciToolbarLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SciToolbarLabelComponent, isStandalone: true, selector: "sci-toolbar-label", ngImport: i0, template: '<ng-content/>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciToolbarLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sci-toolbar-label',
+                    template: '<ng-content/>',
+                }]
+        }] });
+
+/*
+ * 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 a reference to the menu's popover element and child popover, if any.
+ *
+ * A child popover can be a submenu or a menu opened from a menu item's action toolbar.
+ *
+ * Can be injected into {@link SciMenuComponent}.
+ */
+class PopoverRef {
+    _element = inject(ElementRef).nativeElement;
+    _parentPopover = inject(PopoverRef, { skipSelf: true, optional: true });
+    /**
+     * Reference to the child popover, if any. Can be a submenu or a menu opened from a menu item's action toolbar.
+     */
+    childPopover = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "childPopover" }] : /* istanbul ignore next */ []));
+    /**
+     * Indicates if this is a submenu popover, i.e., not a top-level menu nor a menu opened from a menu item's action toolbar.
+     */
+    isSubmenu;
+    constructor(options) {
+        this.isSubmenu = options.isSubmenu;
+        this.registerPopover();
+        this.registerPopoverInParentPopover();
+    }
+    /**
+     * Registers this popover in {@link POPOVER_REFS}.
+     */
+    registerPopover() {
+        const popovers = inject(POPOVER_REFS);
+        // Register this popover.
+        popovers.update(popovers => new Set(popovers).add(this));
+        // Unregister popover when destroyed.
+        inject(DestroyRef).onDestroy(() => popovers.update(popovers => {
+            const copy = new Set(popovers);
+            copy.delete(this);
+            return copy;
+        }));
+    }
+    /**
+     * Registers this popover as child popover in the parent {@link PopoverRef}, if any.
+     */
+    registerPopoverInParentPopover() {
+        const parentPopover = this._parentPopover;
+        if (!parentPopover) {
+            return;
+        }
+        parentPopover.childPopover.set(this);
+        // Unregister popover when destroyed.
+        inject(DestroyRef).onDestroy(() => parentPopover.childPopover.update(childPopover => childPopover == this ? undefined : childPopover));
+    }
+    /**
+     * Closes this popover, and parent popovers if specified.
+     *
+     * Defaults to not closing parent popovers.
+     */
+    close(options) {
+        this._element.hidePopover();
+        if (options?.closeParents) {
+            this._parentPopover?.close(options);
+        }
+    }
+}
+/**
+ * DI token to inject currently open menu popovers.
+ */
+const POPOVER_REFS = new InjectionToken('POPOVER_REFS', {
+    providedIn: 'root',
+    factory: () => signal(new Set()),
+});
+
+/*
+ * 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
+ */
+/**
+ * Represents a visually separated group of related items within a toolbar.
+ */
+class SciToolbarGroupComponent {
+    /**
+     * Specifies the toolbar items to display in this group.
+     */
+    menuItems = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the orientation of the items in this group.
+     */
+    orientation = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Controls whether to disable the items in this group.
+     */
+    disabled = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Controls where to attach popovers in the DOM.
+     */
+    popoverViewContainerRef = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popoverViewContainerRef" }] : /* istanbul ignore next */ []));
+    /**
+     * Indicates whether any menu within this toolbar group is currently open.
+     */
+    menuOpen = this.computeMenuOpen();
+    _childToolbarGroups = viewChildren(SciToolbarGroupComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_childToolbarGroups" }] : /* istanbul ignore next */ []));
+    /** Reference to the popover. Only set if displayed in a menu (menu item action toolbar). */
+    _popoverRef = inject(PopoverRef, { optional: true });
+    activeMenuItem = linkedSignal({ ...(ngDevMode ? { debugName: "activeMenuItem" } : /* istanbul ignore next */ {}), source: this.menuItems, // Unset when menu items change.
+        computation: () => null });
+    constructor() {
+        this.installMenuOpener();
+    }
+    /**
+     * Method invoked when clicking on a toolbar button.
+     */
+    async onSelect(menuItem) {
+        if (await menuItem.onSelect()) {
+            this._popoverRef?.close();
+        }
+    }
+    /**
+     * Method invoked when clicking on a menu button.
+     */
+    onToolbarMenuButtonClick(menuItem, element) {
+        this.activeMenuItem.update(activeMenuItem => activeMenuItem?.menuItem === menuItem ? null : { menuItem, element });
+    }
+    /**
+     * Method invoked before clicking on a menu button.
+     *
+     * When clicking on the active menu button, mark it as closing to prevent immediate re-opening race condition on subsequent click event.
+     */
+    onToolbarMenuButtonMouseDown(menuItem) {
+        const activeMenuItem = this.activeMenuItem();
+        if (activeMenuItem?.menuItem === menuItem) {
+            activeMenuItem.closing = true;
+        }
+    }
+    /**
+     * Method invoked when moving the pointer out of a menu button.
+     *
+     * Clean up closing state set by {@link onToolbarMenuButtonMouseDown}, if any.
+     */
+    onToolbarMenuButtonMouseLeave(menuItem) {
+        const activeMenuItem = this.activeMenuItem();
+        if (activeMenuItem?.menuItem !== menuItem) {
+            return;
+        }
+        if (activeMenuItem.closing === 'prevented') {
+            this.activeMenuItem.set(null); // unset active menu
+        }
+        else if (activeMenuItem.closing) {
+            delete activeMenuItem.closing; // unset closing state
+        }
+    }
+    /**
+     * Opens a menu based on {@link activeMenuItem}.
+     */
+    installMenuOpener() {
+        const menuService = inject(ɵSciMenuService);
+        effect(onCleanup => {
+            if (!this.activeMenuItem()) {
+                return;
+            }
+            const { menuItem, element } = this.activeMenuItem();
+            const menu = menuItem.menu;
+            const align = this.orientation() === 'horizontal' ? 'vertical' : 'horizontal';
+            untracked(() => {
+                const menuRef = menuService.open(menu.children, {
+                    anchor: element,
+                    viewContainerRef: this.popoverViewContainerRef(),
+                    filter: menu.filter,
+                    width: menu.width,
+                    minWidth: menu.minWidth,
+                    maxWidth: menu.maxWidth,
+                    maxHeight: menu.maxHeight,
+                    cssClass: menuItem.cssClass,
+                    attributes: menuItem.attributes,
+                    offset: {
+                        x: align === 'horizontal' ? 1 : 0,
+                        y: align === 'vertical' ? 1 : 0,
+                    },
+                    align,
+                });
+                // Close when opening another menu.
+                onCleanup(() => menuRef.close());
+                // Unset when closing menu.
+                menuRef.onClose(() => {
+                    const activeMenuItem = this.activeMenuItem();
+                    // Do not unset if another menu was opened in the meantime.
+                    if (activeMenuItem?.menuItem !== menuItem) {
+                        return;
+                    }
+                    // Prevent immediate re-opening race condition when toolbar button is clicked to close.
+                    if (activeMenuItem.closing) {
+                        activeMenuItem.closing = 'prevented';
+                        return;
+                    }
+                    this.activeMenuItem.set(null);
+                });
+            });
+        });
+    }
+    /**
+     * Computes whether any menu within this toolbar group is currently open.
+     */
+    computeMenuOpen() {
+        // Do not return `computed` signal to prevent illegal access to required component inputs until Angular has completed the initialization of this component,
+        // happening when reading the signal from the parent component's template, e.g., via reference variable.
+        const menuOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            menuOpen.set(!!this.activeMenuItem() || this._childToolbarGroups().some(childGroup => childGroup.menuOpen()));
+        });
+        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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciToolbarGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-toolbar-group', imports: [
+                        SciComponentOutletDirective,
+                        SciAttributesDirective,
+                        SciIconComponent,
+                        SciFormatAcceleratorPipe,
+                        SciToolbarSplitButtonComponent,
+                        SciToolbarControlComponent,
+                        SciToolbarIconComponent,
+                        SciToolbarLabelComponent,
+                        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"] }]
+        }], 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 }] }] } });
+
+/*
+ * 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
+ */
+/**
+ * Represents a semantic element for the label of a menu group provided as slotted content.
+ */
+class SciMenuGroupLabelComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuGroupLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SciMenuGroupLabelComponent, isStandalone: true, selector: "sci-menu-group-label", ngImport: i0, template: '<ng-content/>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuGroupLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sci-menu-group-label',
+                    template: '<ng-content/>',
+                }]
+        }] });
+
+/*
+ * 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
+ */
+/**
+ * Represents a semantic element for the label of a menu item provided as slotted content.
+ */
+class SciMenuItemLabelComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuItemLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SciMenuItemLabelComponent, isStandalone: true, selector: "sci-menu-item-label", ngImport: i0, template: '<ng-content/>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuItemLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sci-menu-item-label',
+                    template: '<ng-content/>',
+                }]
+        }] });
+
+/*
+ * 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
+ */
+/**
+ * Represents a semantic element for the icon of a menu item provided as slotted content.
+ */
+class SciMenuItemIconComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuItemIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: SciMenuItemIconComponent, isStandalone: true, selector: "sci-menu-item-icon", ngImport: i0, template: '<ng-content/>', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuItemIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sci-menu-item-icon',
+                    template: '<ng-content/>',
+                }]
+        }] });
+
+/*
+ * 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
+ */
+/**
+ * Represents a menu or a group of menu items.
+ */
+class SciMenuComponent {
+    /**
+     * Specifies the menu items to display in this menu or group.
+     */
+    menuItems = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []));
+    /**
+     * Controls whether to disable menu items in this menu or group.
+     */
+    disabled = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Enables and configures filtering of this menu.
+     *
+     * Has no effect if a menu group.
+     */
+    filter = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "filter" }] : /* istanbul ignore next */ []));
+    /**
+     * Configures features of this group.
+     *
+     * Has no effect if a menu or submenu
+     */
+    group = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "group" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the preferred menu width.
+     *
+     * Has no effect if a menu group.
+     */
+    width = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the preferred minimum menu width.
+     *
+     * Defaults to the `--sci-menu-min-width` or `--sci-menu-submenu-min-width` CSS variables.
+     *
+     * If {@link anchorWidth} is specified (e.g., for toolbar menus), the effective minimum width evaluates to `max(anchorWidth, minWidth)`.
+     *
+     * Has no effect if a menu group.
+     */
+    minWidth = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the maximum menu width.
+     *
+     * Has no effect if a menu group.
+     */
+    maxWidth = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the maximum menu height.
+     *
+     * Has no effect if a menu group.
+     */
+    maxHeight = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Controls whether to display the glyph area.
+     *
+     * The glyph area is the leftmost column for displaying icons and checkmarks.
+     */
+    glyphArea = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "glyphArea" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the width of the popover anchor.
+     *
+     * Used to compute the minimum width of the menu.
+     */
+    anchorWidth = input(undefined, { ...(ngDevMode ? { debugName: "anchorWidth" } : /* istanbul ignore next */ {}), transform: (width) => width ? `${width}px` : undefined });
+    /**
+     * Specifies CSS classes to associate with the menu, submenu, or group.
+     */
+    cssClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "cssClass" }] : /* istanbul ignore next */ []));
+    _menuService = inject(ɵSciMenuService);
+    _menuFilter = inject(MenuFilter);
+    _popoverRef = inject(PopoverRef);
+    _filterField = viewChild(SciMenuFilterComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_filterField" }] : /* istanbul ignore next */ []));
+    _viewport = viewChild(SciViewportComponent, /* @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 */ []));
+    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 });
+    role = inject(SCI_MENU_COMPONENT_ROLE);
+    isGroupExpanded = this.computeGroupExpanded();
+    popoverHidden = this.computePopoverHidden();
+    menuSize = this.computeMenuSize();
+    constructor() {
+        this.installSubmenuOpener();
+        this.installAccelerators();
+        this.lockInitialMenuWidth();
+        this.closeChildPopoverOnComponentReuse();
+        this.requestInitialFocus();
+        this.focusFilterFieldOnKeyDown();
+        this.stopKeyDownEventPropagation();
+    }
+    /**
+     * Method invoked when clicking on a menu item.
+     */
+    async onSelect(menuItem) {
+        if (await menuItem.onSelect()) {
+            this._popoverRef.close({ closeParents: true });
+        }
+    }
+    /**
+     * Method invoked when clicking on the group header of a collapsible group.
+     */
+    onGroupHeaderButtonClick() {
+        this.isGroupExpanded.update(expanded => !expanded);
+    }
+    /**
+     * Method invoked when moving the pointer over a menu item.
+     */
+    onMenuItemMouseEnter(menuItem) {
+        const disabled = this.disabled() || menuItem?.disabled?.(); // eslint-disable-line @typescript-eslint/prefer-nullish-coalescing
+        if (disabled) {
+            return;
+        }
+        this.activeSubmenuItem.set(null);
+        // Close submenu of other groups.
+        if (this._popoverRef.childPopover()?.isSubmenu) {
+            this._popoverRef.childPopover().close();
+        }
+    }
+    /**
+     * Method invoked when moving the pointer over a submenu item.
+     */
+    onSubmenuItemMouseEnter(menuItem) {
+        this.onSubmenuItemClick(menuItem);
+    }
+    /**
+     * Method invoked when clicking on a submenu item.
+     */
+    onSubmenuItemClick(menuItem) {
+        const disabled = this.disabled() || menuItem.menuItem.disabled?.(); // eslint-disable-line @typescript-eslint/prefer-nullish-coalescing
+        if (disabled) {
+            return;
+        }
+        this.activeSubmenuItem.set(menuItem);
+    }
+    /**
+     * Method invoked when setting a menu filter.
+     */
+    onFilterChange(filter) {
+        this._menuFilter.setFilterText(filter);
+    }
+    /**
+     * Opens a submenu based on {@link activeSubmenuItem}.
+     */
+    installSubmenuOpener() {
+        effect(onCleanup => {
+            if (!this.activeSubmenuItem()) {
+                return;
+            }
+            const { menuItem, element } = this.activeSubmenuItem();
+            const menu = menuItem.menu;
+            untracked(() => {
+                const menuRef = this._menuService.open(menu.children, {
+                    anchor: element,
+                    viewContainerRef: this.popoverViewContainerRef(),
+                    filter: menu.filter,
+                    width: menu.width,
+                    minWidth: menu.minWidth,
+                    maxWidth: menu.maxWidth,
+                    maxHeight: menu.maxHeight,
+                    cssClass: menuItem.cssClass,
+                    attributes: menuItem.attributes,
+                    submenu: true,
+                    align: 'horizontal',
+                    offset: { x: 1 },
+                });
+                // Close when opening another submenu.
+                onCleanup(() => menuRef.close());
+                // Unset when closing submenu.
+                menuRef.onClose(() => {
+                    const activeSubmenuItem = this.activeSubmenuItem();
+                    // Do not unset if another submenu was opened in the meantime.
+                    if (activeSubmenuItem?.menuItem !== menuItem) {
+                        return;
+                    }
+                    this.activeSubmenuItem.set(null);
+                });
+            });
+        });
+    }
+    /**
+     * Installs accelerators of menu items in this menu, recursively for menu items in submenus and groups.
+     *
+     * Has no effect if a submenu or menu group.
+     */
+    installAccelerators() {
+        if (this.role !== 'menu') {
+            return;
+        }
+        const host = inject(ElementRef).nativeElement;
+        const injector = inject(Injector);
+        effect(onCleanup => {
+            const menuItems = this.menuItems();
+            untracked(() => {
+                const accelerators = ɵinstallMenuAccelerators(menuItems, {
+                    targets: host,
+                    onSelect: menuItem => void this.onSelect(menuItem),
+                    injector,
+                });
+                onCleanup(() => accelerators.dispose());
+            });
+        });
+    }
+    /**
+     * Locks the initial menu width to maintain a stable width when expanding/collapsing groups or hovering menu items with a toolbar.
+     *
+     * Has no effect if a menu group.
+     */
+    lockInitialMenuWidth() {
+        if (this.role === 'group') {
+            return;
+        }
+        const host = inject(ElementRef).nativeElement;
+        // Wait until menu items are available, maximal until idle; may initially be empty due to asynchronous menu contributions.
+        toObservable(this.menuItems)
+            .pipe(filter(menuItems => !!menuItems.length), observeOn(animationFrameScheduler), // Wait until next render cycle to capture menu width.
+        raceWith(new Promise(resolve => {
+            if (typeof requestIdleCallback === 'function') {
+                requestIdleCallback(resolve, { timeout: 250 });
+            }
+            else {
+                setTimeout(resolve, 250); // Fallback if browser does not support `requestIdleCallback`, e.g., Safari
+            }
+        })), take(1), takeUntilDestroyed())
+            .subscribe(() => {
+            this.menuSize.update(size => ({ ...size, width: `${host.getBoundingClientRect().width}px` }));
+        });
+    }
+    /**
+     * Closes a child popover (submenu or action menu) when this component is reused.
+     */
+    closeChildPopoverOnComponentReuse() {
+        effect(() => {
+            // Track menu items.
+            this.menuItems();
+            // Close child popover, if any.
+            untracked(() => this._popoverRef.childPopover()?.close());
+        });
+    }
+    /**
+     * Focuses the popover or filter field based on {@link filter.focus} option.
+     *
+     * The popover must receive focus to enable light dismiss (closing via Escape or clicking outside it) when opened from microfrontends.
+     */
+    requestInitialFocus() {
+        const host = inject(ElementRef).nativeElement;
+        const effectRef = afterRenderEffect(() => {
+            if (this.popoverHidden()) {
+                return; // cannot be focused until visible
+            }
+            untracked(() => {
+                if (this.filter()?.focus) {
+                    this._filterField()?.focus();
+                }
+                else if (this.role === 'menu') {
+                    host.focus();
+                }
+                effectRef.destroy();
+            });
+        });
+    }
+    /**
+     * Focuses the filter field when the user starts typing.
+     *
+     * Has no effect if filtering is not supported.
+     */
+    focusFilterFieldOnKeyDown() {
+        const host = inject(ElementRef).nativeElement;
+        const zone = inject(NgZone);
+        toObservable(this._filterField)
+            .pipe(switchMap(filterField => filterField ? fromEvent(host, 'keydown') : EMPTY), 
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        filter(event => !event.ctrlKey && !event.altKey && !event.metaKey && event.key?.trim().length === 1), // UNDOCUMENTED: `event.key` can be `undefined`, for example, when selecting an option from an input element's datalist.
+        subscribeIn(fn => zone.runOutsideAngular(fn)), observeIn(fn => zone.run(fn)), takeUntilDestroyed())
+            .subscribe(event => {
+            this._filterField().focus();
+            event.stopPropagation(); // prevent parent filter field from receiving focus.
+        });
+    }
+    /**
+     * Stops keydown event propagation to prevent side effects, such as closing an overlay on `Escape` or other keystrokes from triggering.
+     *
+     * Has no effect if a submenu or menu group.
+     */
+    stopKeyDownEventPropagation() {
+        if (this.role !== 'menu') {
+            return;
+        }
+        const host = inject(ElementRef).nativeElement;
+        const zone = inject(NgZone);
+        fromEvent(host, 'keydown')
+            .pipe(subscribeIn(fn => zone.runOutsideAngular(fn)), takeUntilDestroyed())
+            .subscribe(event => {
+            event.stopPropagation();
+        });
+    }
+    /**
+     * Computes whether the popover is hidden.
+     *
+     * The popover must be hidden until the initial width is computed. Otherwise, dynamic anchor positioning based on `--ɵsci-menu-width` causes flickering.
+     * See `menu-opener.service.ts` for more details.
+     */
+    computePopoverHidden() {
+        return computed(() => this.role === 'menu' && !this.menuSize().width);
+    }
+    /**
+     * Computes whether menu items are visible.
+     */
+    computeGroupExpanded() {
+        return linkedSignal(() => {
+            const group = this.group();
+            return !group || !group.collapsible || !group.collapsed || this._menuFilter.active();
+        });
+    }
+    /**
+     * Computes the menu size based on configured size constraints.
+     */
+    computeMenuSize() {
+        return linkedSignal(() => {
+            if (this.role === 'group') {
+                return {};
+            }
+            // Compute only once; otherwise, the popover would hide since the initial width is only computed initially.
+            return untracked(() => {
+                const defaultMinWidth = this.role === 'submenu' ? 'var(--sci-menu-submenu-min-width)' : 'var(--sci-menu-min-width)';
+                const preferredMinWidth = this.minWidth() ?? defaultMinWidth;
+                return {
+                    width: this.width(),
+                    minWidth: this.anchorWidth() ? `max(${preferredMinWidth}, ${this.anchorWidth()})` : preferredMinWidth,
+                    maxWidth: this.maxWidth() ?? this.width(),
+                    maxHeight: this.maxHeight(),
+                };
+            });
+        });
+    }
+    /**
+     * Evaluates whether the given menu item (or any of its child menu items) match the active filter.
+     */
+    matchesFilter(menuItem) {
+        return computed(() => {
+            if (!this._menuFilter.active()) {
+                return true;
+            }
+            switch (menuItem.type) {
+                case 'menu-item':
+                    return menuItem.menu ? menuItem.menu.children.some(menuItem => this.matchesFilter(menuItem)()) : this._menuFilter.matches(menuItem)();
+                case 'group':
+                    return menuItem.children.some(menuItem => this.matchesFilter(menuItem)());
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-menu', imports: [
+                        SciMenuGroupComponent,
+                        SciMenuFilterComponent,
+                        SciToolbarGroupComponent,
+                        SciViewportComponent,
+                        SciTextPipe,
+                        SciComponentOutletDirective,
+                        SciAttributesDirective,
+                        SciIconComponent,
+                        SciMenuGroupLabelComponent,
+                        SciMenuItemLabelComponent,
+                        SciMenuItemIconComponent,
+                        SciFormatAcceleratorPipe,
+                        NgTemplateOutlet,
+                    ], providers: [
+                        providePopoverRef(),
+                        provideMenuFilter(),
+                    ], host: {
+                        '[style.--ɵsci-menu-width]': 'menuSize().width',
+                        '[style.--ɵsci-menu-min-width]': 'menuSize().minWidth',
+                        '[style.--ɵsci-menu-max-width]': 'menuSize().maxWidth',
+                        '[style.--ɵsci-menu-max-height]': 'menuSize().maxHeight',
+                        '[style.--ɵsci-menu-scrolling]': 'scrolling() ? `true` : null',
+                        '[attr.data-glyph-area]': 'hasGlyphArea() ? null : `none`',
+                        // Hide popover until computed the initial width to prevent flickering caused by dynamic anchor positioning based on `--ɵsci-menu-width`. See `menu-opener.service.ts` for more details.
+                        '[style.visibility]': 'popoverHidden() ? `hidden` : null',
+                        '[attr.tabindex]': 'role === `menu` ? `-1` : null', // enable programmatic focus of popover
+                        '[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 }] }] } });
+/**
+ * Evaluates whether the given menu items (or any child groups) require a glyph area for displaying icons and checkmarks.
+ */
+function requiresGlyphArea(menuItems) {
+    return menuItems.some(menuItem => {
+        switch (menuItem.type) {
+            case 'menu-item':
+                return !!menuItem.iconLigature || !!menuItem.iconComponent || !!menuItem.checked;
+            case 'group':
+                return !!menuItem.collapsible || requiresGlyphArea(menuItem.children);
+        }
+    });
+}
+/**
+ * Provides {@link SCI_MENU_COMPONENT_ROLE} for injection.
+ *
+ * Returns a host directive instead of a static provider to support component creation via {@link ViewContainerRef.createComponent}.
+ */
+function provideMenuComponentRole(role) {
+    class RoleProvider {
+        static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RoleProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+        static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: RoleProvider, isStandalone: true, providers: [{ provide: SCI_MENU_COMPONENT_ROLE, useValue: role }], ngImport: i0 });
+    }
+    i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: RoleProvider, decorators: [{
+                type: Directive,
+                args: [{ providers: [{ provide: SCI_MENU_COMPONENT_ROLE, useValue: role }] }]
+            }] });
+    return RoleProvider;
+}
+/**
+ * Provides {@link PopoverRef} for injection.
+ */
+function providePopoverRef() {
+    return {
+        provide: PopoverRef,
+        useFactory: () => {
+            switch (inject(SCI_MENU_COMPONENT_ROLE)) {
+                case 'menu':
+                    return new PopoverRef({ isSubmenu: false }); // top-level menu or menu in action toolbar
+                case 'submenu':
+                    return new PopoverRef({ isSubmenu: true });
+                case 'group':
+                    return inject(PopoverRef, { skipSelf: true });
+            }
+        },
+    };
+}
+/**
+ * Provides {@link MenuFilter} for injection.
+ */
+function provideMenuFilter() {
+    return {
+        provide: MenuFilter,
+        useFactory: () => {
+            switch (inject(SCI_MENU_COMPONENT_ROLE)) {
+                case 'menu':
+                    return new MenuFilter(null); // top-level menu or menu in action toolbar
+                case 'submenu':
+                    return new MenuFilter(inject(MenuFilter, { skipSelf: true }));
+                case 'group':
+                    return inject(MenuFilter, { skipSelf: true });
+            }
+        },
+    };
+}
+/**
+ * Indicates whether {@link SciMenuComponent} is acting as a menu, submenu, or group.
+ */
+const SCI_MENU_COMPONENT_ROLE = new InjectionToken('SCI_MENU_COMPONENT_ROLE');
+
+/*
+ * 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
+ */
+class SciMenuOpener {
+    _injector = inject(Injector);
+    /**
+     * Opens the specified menu at the specified position.
+     */
+    openMenu(menu, options) {
+        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.
+            const anchorElement = options.anchor instanceof ElementRef || options.anchor instanceof HTMLElement ? coerceElement(options.anchor) : this.createVirtualAnchor(options.anchor, { viewContainerRef: options.viewContainerRef });
+            // Create menu popover.
+            const componentRef = this.createMenuPopover(menuItems, anchorElement, options);
+            componentRef.onDestroy(() => injector.destroy());
+            return {
+                close: () => componentRef.destroy(),
+                onClose: onClose => componentRef.hostView.destroyed ? onClose() : componentRef.onDestroy(onClose), // Call callback immediately if already destroyed.
+            };
+        });
+    }
+    /**
+     * Creates a menu popover displaying the specified menu items.
+     */
+    createMenuPopover(menuItems, anchorElement, options) {
+        const anchorSize = dimension(anchorElement);
+        const align = options.align ?? 'vertical';
+        const bindings = [
+            inputBinding('menuItems', menuItems),
+            inputBinding('filter', () => coerceFilterConfig(options.filter)),
+            inputBinding('width', () => options.width),
+            inputBinding('minWidth', () => options.minWidth),
+            inputBinding('maxWidth', () => options.maxWidth),
+            inputBinding('maxHeight', () => options.maxHeight),
+            inputBinding('anchorWidth', () => align === 'vertical' ? anchorSize().offsetWidth : undefined),
+            inputBinding('cssClass', () => Arrays.coerce(options.cssClass)),
+            inputBinding('attributes', () => options.attributes),
+        ];
+        // Create menu component and attach it to the DOM.
+        const componentRef = (() => {
+            const role = options.submenu ? 'submenu' : 'menu';
+            if (options.viewContainerRef) {
+                return options.viewContainerRef.createComponent(SciMenuComponent, {
+                    directives: [provideMenuComponentRole(role)],
+                    bindings,
+                });
+            }
+            else {
+                const componentRef = createComponent(SciMenuComponent, {
+                    environmentInjector: inject(EnvironmentInjector),
+                    directives: [provideMenuComponentRole(role)],
+                    bindings,
+                });
+                // Insert popover after the anchor node.
+                anchorElement.after(componentRef.location.nativeElement);
+                // Attach component to Angular component tree for change detection.
+                inject(ApplicationRef).attachView(componentRef.hostView);
+                return componentRef;
+            }
+        })();
+        // Bind popover to anchor.
+        const popoverElement = componentRef.location.nativeElement;
+        this.bindPopoverToAnchor({ popoverElement, anchorElement, align, offset: options.offset });
+        // Destroy component when closing the popover.
+        popoverElement.addEventListener('toggle', (event) => {
+            if (event.newState === 'closed') {
+                componentRef.destroy();
+            }
+        });
+        // Run change detection.
+        componentRef.changeDetectorRef.detectChanges();
+        // Show popover.
+        popoverElement.showPopover();
+        return componentRef;
+    }
+    /**
+     * Positions the popover relative to the anchor element.
+     */
+    bindPopoverToAnchor(binding) {
+        const { popoverElement, anchorElement, align } = binding;
+        const popoverId = `scimenu-${UUID.randomUUID().substring(0, 8)}`;
+        // Connect anchor to popover.
+        setAttributes(anchorElement, {
+            'popovertarget': popoverId,
+            'popovertargetaction': 'show',
+        });
+        setStyles(anchorElement, {
+            'anchor-name': `--${popoverId}`,
+        });
+        // Connect popover to anchor.
+        setAttributes(popoverElement, {
+            'id': popoverId,
+            'popover': 'auto',
+        });
+        // Position popover relative to anchor.
+        if (align === 'horizontal') {
+            setStyles(popoverElement, {
+                'position-anchor': `--${popoverId}`,
+                'position-try-fallbacks': 'flip-inline, flip-block, flip-inline flip-block',
+                'top': `calc(anchor(top) - var(--ɵsci-menu-padding-block) + ${binding.offset?.y ?? 0}px)`,
+                'left': `calc(anchor(right) + ${binding.offset?.x ?? 0}px)`,
+            });
+        }
+        else {
+            setStyles(popoverElement, {
+                'position-anchor': `--${popoverId}`,
+                'position-try-fallbacks': 'flip-block',
+                'top': `calc(anchor(bottom) + ${binding.offset?.y ?? 0}px)`,
+                'left': `min(calc(anchor(left) + ${binding.offset?.x ?? 0}px), calc(100% - var(--ɵsci-menu-width)))`, // `calc(100% - var(--ɵsci-menu-width))` prevents pushing the popover out of the page viewport on the right
+            });
+        }
+        // Mark the anchor as open to support opening the menu from a toolbar button, not a toolbar menu button, e.g., to support opening a menu via accelerator.
+        if (anchorElement.classList.contains('toolbar-button')) {
+            anchorElement.classList.add('menu-open');
+        }
+        // Remove attributes and styles from the anchor element when the popover is closed, but only if not displaying another popover in the meantime.
+        // No cleanup is required for the popover element because it is destroyed when closed.
+        inject(DestroyRef).onDestroy(() => {
+            if (anchorElement.getAttribute('popovertarget') !== popoverId) {
+                return;
+            }
+            setAttributes(anchorElement, {
+                'popovertarget': null,
+                'popovertargetaction': null,
+            });
+            setStyles(anchorElement, {
+                'anchor-name': null,
+            });
+            if (anchorElement.classList.contains('toolbar-button')) {
+                anchorElement.classList.remove('menu-open');
+            }
+        });
+    }
+    /**
+     * Creates a DOM element at the given pointer position or coordinate, optionally with a given dimension.
+     */
+    createVirtualAnchor(anchor, options) {
+        // Coerce coordinates.
+        const { x, y, width, height } = anchor instanceof MouseEvent ? ({ x: anchor.x, y: anchor.y }) : anchor;
+        // Create virtual anchor element at anchor bounds.
+        const virtualAnchorElement = inject(DOCUMENT).createElement('div');
+        inject(DestroyRef).onDestroy(() => virtualAnchorElement.remove());
+        // Position the anchor element.
+        setStyles(virtualAnchorElement, {
+            'position': 'fixed',
+            'left': `${x}px`,
+            'top': `${y}px`,
+            'width': width ? `${width}px` : '0',
+            'height': height ? `${height}px` : '0',
+            'pointer-events': 'none',
+        });
+        // Attach the anchor element to the DOM.
+        if (options.viewContainerRef) {
+            options.viewContainerRef.element.nativeElement.after(virtualAnchorElement);
+        }
+        else {
+            inject(DOCUMENT).body.appendChild(virtualAnchorElement);
+        }
+        return virtualAnchorElement;
+    }
+    /**
+     * Provides a reference to {@link ɵSciMenuService}.
+     *
+     * Note:
+     * - {@link ɵSciMenuService} cannot be injected during construction as this would lead to an injection cycle.
+     * - Do not use {@link SciMenuRegistry} directly to proxy calls through the adapter chain.
+     */
+    get menuService() {
+        return this._injector.get(ɵSciMenuService);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuOpener, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuOpener, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuOpener, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Sets the specified attributes on the given element. Passing `null` for an attribute removes it.
+ */
+function setAttributes(element, attributes) {
+    Object.entries(attributes).forEach(([name, value]) => {
+        if (value === null) {
+            element.removeAttribute(name);
+        }
+        else {
+            element.setAttribute(name, value);
+        }
+    });
+}
+/**
+ * Sets the specified styles on the given element. Passing `null` for a style removes it.
+ */
+function setStyles(element, styles) {
+    Object.entries(styles).forEach(([name, value]) => {
+        if (value === null) {
+            element.style.removeProperty(name);
+        }
+        else {
+            element.style.setProperty(name, value);
+        }
+    });
+}
+/**
+ * Coerces passed filter into a {@link SciMenuFilterConfig}, or `undefined` if a menu without filtering.
+ */
+function coerceFilterConfig(filter) {
+    if (typeof filter === 'object') {
+        return {
+            placeholder: coerceSignal(filter.placeholder),
+            notFoundMessage: coerceSignal(filter.notFoundMessage),
+            focus: filter.focus,
+        };
+    }
+    return filter === true ? {} : undefined;
+}
+
+/*
+ * 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
+ */
+/**
+ * Translation note: Texts are translated when added (not lazily when rendered) to simplify filtering.
+ */
+class ɵSciMenubarFactory {
+    menuItems = [];
+    /** @inheritDoc */
+    addMenu(descriptor, menuFactoryFn) {
+        this.menuItems.push(prune({
+            type: 'menu-item',
+            name: descriptor.name,
+            labelText: translate(descriptor.label),
+            visible: coerceSignal(descriptor.visible),
+            cssClass: Arrays.coerce(descriptor.cssClass),
+            attributes: descriptor.attributes,
+            menu: constructMenu(menuFactoryFn, descriptor.menu),
+        }));
+        return this;
+    }
+}
+
+/*
+ * 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
+ */
+class ɵSciMenuRegistry {
+    _contributions = new Map();
+    _menuItemsCache = new MenuItemsCache();
+    _contributionInstantProvider = inject(SciMenuContributionInstantProvider);
+    _menuOpener = inject(SciMenuOpener);
+    _menuPopovers = inject(POPOVER_REFS);
+    _injector = inject(Injector);
+    /** @inheritDoc */
+    contributeMenu(locationLike, factoryFn, options) {
+        const { location, before, after, position } = locationLike;
+        const contribution = {
+            type: parseMenuLocationType(location),
+            factoryFn: factoryFn,
+            position: prune({ before, after, position }, { pruneIfEmpty: true }),
+            requiredContext: prune(options.requiredContext) ?? new Map(), // prune cleared context values
+            contributionInstant: options.contributionInstant ?? this._contributionInstantProvider.next(),
+            metadata: options.metadata ?? {},
+        };
+        if (this._contributions.has(location)) {
+            this._contributions.get(location).update(contributions => contributions.concat(contribution));
+        }
+        else {
+            this._contributions.set(location, signal([contribution]));
+        }
+        return {
+            dispose: () => {
+                // Retain the signal in the contribution map even if empty. Consumers may hold a reference and expect updates
+                // when a new contribution is registered for this location.
+                this._contributions.get(location).update(contributions => contributions.filter(it => it !== contribution));
+                this._menuItemsCache.remove(contribution);
+            },
+        };
+    }
+    /** @inheritDoc */
+    menuContributions(location, context, options) {
+        assertNotInReactiveContext(this.menuContributions, 'Call menuContributions() in a non-reactive (non-tracking) context, such as within the untracked() function.');
+        return computed(() => {
+            // Ensure signal is registered in the contribution map to get notified when a contribution is added to this location.
+            if (!this._contributions.has(location())) {
+                this._contributions.set(location(), signal([]));
+            }
+            const contributions = this._contributions.get(location())();
+            const callingContext = prune(context()); // prune cleared context values
+            return untracked(() => contributions
+                // Filter contributions not matching the calling context.
+                .filter(contribution => {
+                const requiredContext = contribution.requiredContext;
+                for (const [requiredContextName, requiredContextValue] of requiredContext.entries()) {
+                    // Do not match contribution if required entry is missing.
+                    if (requiredContextValue === '*' && !callingContext.has(requiredContextName)) {
+                        return false;
+                    }
+                    // Do not match contribution if required value is different.
+                    if (requiredContextValue !== '*' && !Objects.isEqual(callingContext.get(requiredContextName), requiredContextValue, { ignoreArrayOrder: true })) {
+                        return false;
+                    }
+                }
+                return true;
+            })
+                // Sort by contribution instant to maintain a stable order when contributions are replaced.
+                .sort((a, b) => a.contributionInstant - b.contributionInstant));
+        }, { equal: (a, b) => Objects.isEqual(a, b) });
+    }
+    /** @inheritDoc */
+    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.');
+        }
+        const callingContextInjector = options.injector ?? inject(Injector);
+        const menuService = this.menuService;
+        const menuItemsCache = this._menuItemsCache;
+        // Get contributions matching the location.
+        const menuContributions = menuService.menuContributions(location, context, options); // Do not invoke method directly to go through the adapter chain.
+        // Get menu items of contributions.
+        return computed(() => {
+            if (!menuContributions().length) {
+                return [];
+            }
+            const callingContext = prune(context()); // prune cleared context values
+            const menuItems = menuContributions()
+                // Instantiate contribution, recursively (submenus and menus in action toolbars).
+                .flatMap(menuContribution => untracked(() => computeMenuItems(menuContribution, callingContext))())
+                // Remove invisible menu items, recursively.
+                .flatMap(filterInvisibleMenuItems)
+                // Federate menu items, recursively.
+                .map(menuItem => federateMenuItems(menuItem, callingContext, { metadata: options.metadata }))
+                // Remove empty groups and submenus, recursively. Filtering must be after federation to not remove named placeholder groups or submenus.
+                .flatMap(filterEmptyMenuItems);
+            return sortMenuItems(menuItems);
+        });
+        /**
+         * Gets the menu items of the given contribution used in the given context.
+         */
+        function computeMenuItems(menuContribution, context) {
+            assertNotInReactiveContext(computeMenuItems, 'Call computeMenuItems() in a non-reactive (non-tracking) context, such as within the untracked() function.');
+            // Instantiate the contribution if absent, recursively (submenus and menus in action toolbars).
+            return menuItemsCache.computeIfAbsent(menuContribution, context, () => {
+                // 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 });
+                return computed(() => {
+                    const menuItems = (() => {
+                        switch (menuContribution.type) {
+                            case 'menu': {
+                                const menuFactory = new ɵSciMenuFactory();
+                                const menuFactoryFn = menuContribution.factoryFn;
+                                runInInjectionContext(menuEnvironmentInjectionContext, () => menuFactoryFn(menuFactory, context));
+                                return menuFactory.menuItems;
+                            }
+                            case 'toolbar': {
+                                const toolbarFactory = new ɵSciToolbarFactory();
+                                const toolbarFactoryFn = menuContribution.factoryFn;
+                                runInInjectionContext(menuEnvironmentInjectionContext, () => toolbarFactoryFn(toolbarFactory, context));
+                                return toolbarFactory.menuItems;
+                            }
+                            case 'menubar': {
+                                const menubarFactory = new ɵSciMenubarFactory();
+                                const menubarFactoryFn = menuContribution.factoryFn;
+                                runInInjectionContext(menuEnvironmentInjectionContext, () => menubarFactoryFn(menubarFactory, context));
+                                return menubarFactory.menuItems;
+                            }
+                        }
+                    })();
+                    return menuItems
+                        // Add contribution's position to top-level menu items.
+                        .map(menuItem => ({ ...menuItem, position: menuContribution.position }))
+                        // Add providers to components (label, icon, control), recursively.
+                        .map(menuItem => provideProviders(menuItem, menuEnvironmentInjectionContextProviders));
+                });
+            }, { injector: callingContextInjector });
+        }
+        /**
+         * Federates passed menu or group with contributions based on its name. Federation is recursive.
+         */
+        function federateMenuItems(menuItem, context, options) {
+            const federatedItem = { ...menuItem };
+            // Federate actions.
+            if (federatedItem.actions?.length) {
+                federatedItem.actions = sortMenuItems(federatedItem.actions.map(action => federateMenuItems(action, context, options)));
+            }
+            // Federate group.
+            if (federatedItem.type === 'group') {
+                const contributions = federatedItem.name ? untracked(() => menuService.menuItems(federatedItem.name, context, { injector: callingContextInjector, metadata: options?.metadata }))() : [];
+                federatedItem.children = sortMenuItems([
+                    ...federatedItem.children.map(child => federateMenuItems(child, context, options)),
+                    ...contributions,
+                ]);
+            }
+            // Federate submenu.
+            if (federatedItem.type === 'menu-item' && federatedItem.menu) {
+                const contributions = federatedItem.menu.name ? untracked(() => menuService.menuItems(federatedItem.menu.name, context, { injector: callingContextInjector, metadata: options?.metadata }))() : [];
+                federatedItem.menu = {
+                    ...federatedItem.menu,
+                    children: sortMenuItems([
+                        ...federatedItem.menu.children.map(child => federateMenuItems(child, context, options)),
+                        ...contributions,
+                    ]),
+                };
+            }
+            return federatedItem;
+        }
+        /**
+         * Registers given providers in components (label, icon, control) of the menu item, recursively.
+         */
+        function provideProviders(menuItem, providers) {
+            switch (menuItem.type) {
+                case 'menu-item': {
+                    return {
+                        ...menuItem,
+                        iconComponent: menuItem.iconComponent && {
+                            ...menuItem.iconComponent,
+                            providers: providers.concat(menuItem.iconComponent.providers ?? []),
+                        },
+                        labelComponent: menuItem.labelComponent && {
+                            ...menuItem.labelComponent,
+                            providers: providers.concat(menuItem.labelComponent.providers ?? []),
+                        },
+                        control: menuItem.control && {
+                            ...menuItem.control,
+                            providers: providers.concat(menuItem.control.providers ?? []),
+                        },
+                        actions: menuItem.actions?.map(menuItem => provideProviders(menuItem, providers)),
+                        menu: menuItem.menu && {
+                            ...menuItem.menu,
+                            children: menuItem.menu.children.map(menuItem => provideProviders(menuItem, providers)),
+                        },
+                    };
+                }
+                case 'group': {
+                    return {
+                        ...menuItem,
+                        children: menuItem.children.map(menuItem => provideProviders(menuItem, providers)),
+                        actions: menuItem.actions?.map(menuItem => provideProviders(menuItem, providers)),
+                    };
+                }
+            }
+        }
+    }
+    /** @inheritDoc */
+    openMenu(menu, options) {
+        return this._menuOpener.openMenu(menu, options);
+    }
+    /** @inheritDoc */
+    closeMenus() {
+        this._menuPopovers().forEach(popover => popover.close());
+    }
+    /** @inheritDoc */
+    accelerators(context) {
+        return this._menuItemsCache.accelerators(context);
+    }
+    /**
+     * Reference to the menu service.
+     *
+     * Use to call methods like {@link ɵSciMenuService.menuContributions} or {@link ɵSciMenuService.menuItems} through the adapter chain.
+     */
+    get menuService() {
+        return this._injector.get(ɵSciMenuService);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ɵSciMenuRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ɵSciMenuRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ɵSciMenuRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Recursively removes groups and submenus that contain no menu items.
+ *
+ * Returns a single-entry array containing the filtered menu item, or an empty array if it has no children, enabling usage in `flatMap`.
+ */
+function filterEmptyMenuItems(menuItem) {
+    switch (menuItem.type) {
+        case 'menu-item': {
+            const children = menuItem.menu?.children.flatMap(filterEmptyMenuItems) ?? [];
+            const actions = menuItem.actions?.flatMap(filterEmptyMenuItems);
+            return children.length || menuItem.onSelect || menuItem.control ? [{ ...menuItem, actions, menu: menuItem.menu && { ...menuItem.menu, children } }] : [];
+        }
+        case 'group': {
+            const children = menuItem.children.flatMap(filterEmptyMenuItems);
+            const actions = menuItem.actions?.flatMap(filterEmptyMenuItems);
+            return children.length ? [{ ...menuItem, actions, children }] : [];
+        }
+    }
+}
+/**
+ * Recursively removes invisible groups and submenus.
+ *
+ * Returns a single-entry array containing the filtered menu item, or an empty array if not visible, enabling usage in `flatMap`.
+ */
+function filterInvisibleMenuItems(menuItem) {
+    if (!(menuItem.visible?.() ?? true)) {
+        return [];
+    }
+    switch (menuItem.type) {
+        case 'menu-item': {
+            const children = menuItem.menu?.children.flatMap(filterInvisibleMenuItems) ?? [];
+            const actions = menuItem.actions?.flatMap(filterInvisibleMenuItems);
+            return [{ ...menuItem, actions, menu: menuItem.menu && { ...menuItem.menu, children } }];
+        }
+        case 'group': {
+            const actions = menuItem.actions?.flatMap(filterInvisibleMenuItems);
+            const children = menuItem.children.flatMap(filterInvisibleMenuItems);
+            return [{ ...menuItem, actions, children }];
+        }
+    }
+}
+/**
+ * Parses the type of given location. One of `menu`, `toolbar`,`menubar`.
+ */
+function parseMenuLocationType(location) {
+    return /^(?<type>(menu|toolbar|menubar)):(?<name>.+)$/.exec(location).groups['type'];
+}
+/**
+ * Cache for instantiated contributions in a specific context.
+ */
+class MenuItemsCache {
+    _cache = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_cache" }] : /* istanbul ignore next */ []));
+    _cacheByContribution = computed(() => {
+        return Array.from(this._cache()).reduce((map, cacheEntry) => Maps.addListValue(map, cacheEntry.contribution, cacheEntry), new Map());
+    }, /* @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).
+     *
+     * Menu items are cached. 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.
+     */
+    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 cacheEntry = {
+                injector: cacheEntryInjector,
+                contribution,
+                menuItems: runInInjectionContext(cacheEntryInjector, computeFn),
+                context,
+                refCount: 0,
+                dispose: () => cacheEntryInjector.destroy(),
+            };
+            this._cache.update(cache => new Set(cache).add(cacheEntry));
+            return cacheEntry;
+        })();
+        cacheEntry.refCount++;
+        // Decrement reference count when tracked injector is destroyed.
+        options.injector.get(DestroyRef).onDestroy(() => {
+            if (--cacheEntry.refCount === 0) {
+                // Dispose when no longer used.
+                cacheEntry.dispose();
+                this._cache.update(cache => {
+                    const cacheCopy = new Set(cache);
+                    cacheCopy.delete(cacheEntry);
+                    return cacheCopy;
+                });
+            }
+        });
+        return cacheEntry.menuItems;
+    }
+    /**
+     * Removes menu items of the given contribution from the cache.
+     */
+    remove(contribution) {
+        assertNotInReactiveContext(this.remove, 'Call remove() in a non-reactive (non-tracking) context, such as within the untracked() function.');
+        const cacheEntriesToRemove = this._cacheByContribution().get(contribution) ?? [];
+        this._cache.update(cache => {
+            const cacheCopy = new Set(cache);
+            cacheEntriesToRemove.forEach(cacheEntry => {
+                cacheEntry.dispose();
+                cacheCopy.delete(cacheEntry);
+            });
+            return cacheCopy;
+        });
+    }
+    /**
+     * Gets installed keyboard accelerators for menu items that match the given context.
+     *
+     * A match does not require an identical context. All common context keys must have identical context values.
+     */
+    accelerators(context) {
+        return computed(() => {
+            const accelerators = Array.from(this._cache().values())
+                .filter(cacheEntry => {
+                for (const [name, value] of prune(context().entries())) { // prune cleared context values
+                    // Do not match contribution if required entry is missing.
+                    if (value === '*' && !cacheEntry.context.has(name)) {
+                        return false;
+                    }
+                    // Do not match if context key maps to a different value.
+                    if (value !== '*' && cacheEntry.context.has(name) && !Objects.isEqual(cacheEntry.context.get(name), value, { ignoreArrayOrder: true })) {
+                        return false;
+                    }
+                }
+                return true;
+            })
+                .flatMap(cacheEntry => collectMenuItemsWithAccelerator(cacheEntry.menuItems()))
+                .filter(menuItem => !menuItem.disabled?.() && (menuItem.visible?.() ?? true))
+                .map(menuItem => menuItem.accelerator);
+            // Remove duplicate accelerators.
+            return Arrays.distinct(accelerators, accelerator => `${accelerator.shift}/${accelerator.ctrl}/${accelerator.alt}/${accelerator.key.toLowerCase()}/${accelerator.location}`);
+        }, { equal: (a, b) => Objects.isEqual(a, b, { ignoreArrayOrder: true }) });
+    }
+}
+
+// TODO [menu] documentation
+class SciMenuRegistry {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuRegistry, providedIn: 'root', useExisting: ɵSciMenuRegistry });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root', useExisting: ɵSciMenuRegistry }]
+        }] });
+
+/*
+ * 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
+ */
+/**
+ * Enables integrators to intercept the registration and retrieval of menu contributions and to control where menu popovers open.
+ *
+ * Adapters can handle or augment calls. Multiple adapters form a chain and are called one by one in registration order.
+ *
+ * Calling 'next' passes the call to the next adapter, or to the registry if it is the last adapter in the chain.
+ *
+ * TODO [menu] documentation
+ *
+ * @experimental since 22.3.0; API and behavior may change in any version without notice.
+ */
+class SciMenuAdapter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuAdapter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuAdapter, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * // TODO [menu] documentation
+ *
+ * @docs-private Not public API. Used by frameworks integrating the SCION Menu API. Applications should not use this service.
+ */
+class ɵSciMenuService {
+    _menuRegistry = interceptMenuRegistry(inject(SciMenuRegistry));
+    _environmentContext = injectMenuContext();
+    /** @inheritDoc */
+    open(menu, options) {
+        const context = new Map([...this._environmentContext(), ...options.context ?? new Map()]);
+        // Prevent user agent defaults when opening context menu.
+        if (options.anchor instanceof MouseEvent && options.anchor.type === 'contextmenu') {
+            options.anchor.preventDefault();
+            options.anchor.stopPropagation();
+        }
+        return this._menuRegistry.openMenu(menu, { ...options, context });
+    }
+    /** @inheritDoc */
+    closeAll() {
+        this._menuRegistry.closeMenus();
+    }
+    /**
+     * The function:
+     * - Must be called within an injection context, or an explicit {@link Injector} passed.
+     * - Must be called in a non-reactive (non-tracking) context.
+     *
+     * @docs-private Not public API. Used by frameworks integrating the SCION Menu API. Applications should not use this method.
+     */
+    menuItems(location, context, options) {
+        return this._menuRegistry.menuItems(coerceSignal(location), coerceSignal(context), options ?? {});
+    }
+    /** @docs-private Not public API. Used by frameworks integrating the SCION Menu API. Applications should not use this method. */
+    menuContributions(location, context, options) {
+        return this._menuRegistry.menuContributions(coerceSignal(location), coerceSignal(context), options ?? {});
+    }
+    /** @docs-private Not public API. Used by frameworks integrating the SCION Menu API. Applications should not use this method. */
+    contributeMenu(location, factoryFn, options) {
+        return this._menuRegistry.contributeMenu(location, factoryFn, options ?? {});
+    }
+    /**
+     * Gets installed keyboard accelerators for menu items that match the given context.
+     *
+     * A match does not require an identical context. All common context keys must have identical context values.
+     *
+     * Inherits the context from the current injector hierarchy, but can be overridden via `context` options. See {@link provideMenuContextProvider}.
+     *
+     * @docs-private Not public API. Used by frameworks integrating the SCION Menu API. Applications should not use this method.
+     */
+    accelerators(options) {
+        const context = computed(() => new Map([...this._environmentContext(), ...coerceSignal(options?.context)?.() ?? new Map()]), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
+        return this._menuRegistry.accelerators(context);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ɵSciMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ɵSciMenuService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ɵSciMenuService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Intercepts calls to the menu registry by chaining registered menu adapters.
+ *
+ * Each adapter can handle the call, modify it, or pass it to the next.
+ */
+function interceptMenuRegistry(menuRegistry) {
+    // TODO [Angular 22] Remove cast when Angular supports type safety for multi-injection with abstract class DI tokens. See https://github.com/angular/angular/issues/55555
+    const menuAdapters = inject(SciMenuAdapter, { optional: true }) ?? [];
+    return menuAdapters.reduceRight((next, adapter) => ({
+        contributeMenu: (location, factoryFn, options) => adapter.contributeMenu ? adapter.contributeMenu(location, factoryFn, options, next) : next.contributeMenu(location, factoryFn, options),
+        menuContributions: (location, context, options) => adapter.menuContributions ? adapter.menuContributions(location, context, options, next) : next.menuContributions(location, context, options),
+        menuItems: (location, context, options) => adapter.menuItems ? adapter.menuItems(location, context, options, next) : next.menuItems(location, context, options),
+        openMenu: (menu, options) => adapter.openMenu ? adapter.openMenu(menu, options, next) : next.openMenu(menu, options),
+        closeMenus: () => adapter.closeMenus ? adapter.closeMenus(next) : next.closeMenus(),
+        accelerators: context => adapter.accelerators ? adapter.accelerators(context, next) : next.accelerators(context),
+    }), menuRegistry);
+}
+
+/*
+ * 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
+ */
+/**
+ * Opens a menu with items contributed via {@link contributeMenu}.
+ *
+ * A menu displays a list of related items in a popover, organized into groups and submenus.
+ * It closes when a menu item is selected or on an outside click. Menu items can define a keyboard accelerator for quick access.
+ *
+ * ## Menu Item Size
+ * The menu item size is based on the `--sci-menu-item-size` CSS variable and defaults to `16px`. It determines the icon size and is used to compute the font size and padding.
+ *
+ * A custom size can be defined globally using the `:root` selector:
+ *
+ * ```css
+ * sci-menu {
+ *   --sci-menu-item-size: 18px;
+ * }
+ * ```
+ *
+ * Instead of computing the font size based on `--sci-menu-item-size`, an explicit font size can be defined using the `--sci-menu-font-size` CSS variable:
+ *
+ * ```css
+ * sci-menu {
+ *   --sci-menu-item-size: 14px;
+ * }
+ * ```
+ *
+ * ## Custom Styling
+ * The appearance of the menu can be customized using the following CSS variables:
+ *
+ *  - `--sci-menu-font-size`: Font size of menu items.
+ *  - `--sci-menu-border-radius`: Border radius of a menu popover.
+ *  - `--sci-menu-min-width`: Minimum width of a menu popover.
+ *  - `--sci-menu-submenu-min-width`: Minimum width of a submenu popover.
+ *  - `--sci-menu-item-size`: Size of menu items; used as the menu item icon size and to compute font size and padding.
+ *  - `--sci-menu-item-cursor`: Cursor style when hovering over a menu item.
+ *  - `--sci-menu-item-text-color`: Text and icon color of menu items.
+ *  - `--sci-menu-item-text-color-disabled`: Text and icon color of disabled menu items.
+ *  - `--sci-menu-item-background-color-hover`: Background color of a menu item when hovered.
+ *  - `--sci-menu-item-background-color-active`: Background color of a menu item when pressed.
+ *  - `--sci-menu-item-border-radius`: Border radius of menu items.
+ *  - `--sci-menu-item-outline-width`: Outline width of menu items when focused.
+ *  - `--sci-menu-item-accelerator-text-color`: Text color of menu item accelerators.
+ *  - `--sci-menu-item-active-indicator-size`: Size of the visual indicator for active menu items.
+ *  - `--sci-menu-item-active-indicator-background-color`: Background color of the visual indicator for active menu items.
+ *  - `--sci-menu-item-active-indicator-border-radius`: Border radius of the visual indicator for active menu items.
+ *  - `--sci-menu-group-header-font-family`: Font family for group headers.
+ *  - `--sci-menu-group-header-font-size`: Font size for group headers.
+ *  - `--sci-menu-group-header-font-weight`: Font weight for group headers.
+ *  - `--sci-menu-group-header-text-color`: Text color for group headers.
+ *  - `--sci-menu-filter-outline-width`: Outline width of the filter field.
+ *  - `--sci-menu-filter-outline-radius`: Outline radius of the filter field.
+ *
+ * @experimental since 22.3.0; API and behavior may change in any version without notice.
+ */
+class SciMenuService {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuService, providedIn: 'root', useExisting: ɵSciMenuService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenuService, decorators: [{
+            type: Injectable,
+            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
+ */
+/** @internal */
+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.');
+    }
+    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 });
+    const contributionContext = computed(() => new Map([...environmentContext(), ...options?.requiredContext ?? new Map()]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contributionContext" }] : /* istanbul ignore next */ []));
+    // Each contribution is assigned an instant to maintain a stable order when the contribution context changes.
+    const contributionInstant = options?.contributionInstant ?? injector.get(SciMenuContributionInstantProvider).next();
+    effect(onCleanup => {
+        const requiredContext = contributionContext();
+        untracked(() => {
+            const contributionRef = menuService.contributeMenu(location, factoryFn, { ...options, requiredContext, contributionInstant });
+            onCleanup(() => contributionRef.dispose());
+        });
+    }, { injector });
+    return {
+        dispose: () => injector.destroy(),
+    };
+}
+
+/*
+ * 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
+ */
+/**
+ * Displays items contributed via the {@link contributeMenu} function matching the toolbar's name.
+ *
+ * A toolbar is a horizontal or vertical container providing quick access to context-related tools.
+ * It contains buttons, toggles, menus, and other controls, with related items grouped together.
+ *
+ * The toolbar must be assigned a name, used as the location when contributing to the toolbar.
+ * The name must start with the `toolbar:` prefix.
+ *
+ * ```html
+ * <sci-toolbar name="toolbar:main"/>
+ * ```
+ *
+ * Use the {@link contributeMenu} function to contribute to the toolbar by passing the toolbar name and a factory function.
+ * The toolbar calls the factory function with a {@link SciToolbarFactory}, providing methods for populating the toolbar.
+ *
+ * ```ts
+ * import {contributeMenu} from '@scion/components/menu';
+ *
+ * contributeMenu('toolbar:main', toolbar => toolbar
+ *   .addToolbarButton({icon: 'undo', accelerator: {ctrl: true, key: 'Z'}, tooltip: 'Undo', onSelect: () => console.log('Undo')})
+ *   .addToolbarButton({icon: 'redo', accelerator: {ctrl: true, key: 'Y'}, tooltip: 'Redo', onSelect: () => console.log('Redo')})
+ *   .addGroup(group => group
+ *     .addToolbarButton({icon: 'content_copy', accelerator: {ctrl: true, key: 'C'}, tooltip: 'Copy', onSelect: () => console.log('Copy')})
+ *     .addToolbarButton({icon: 'content_paste', accelerator: {ctrl: true, key: 'V'}, tooltip: 'Paste', onSelect: () => console.log('Paste')}),
+ *   )
+ *   .addToolbarMenu({icon: 'folder', tooltip: 'File'}, menu => menu
+ *     .addMenuItem({icon: 'save', label: 'Save', accelerator: {ctrl: true, key: 'S'}, onSelect: () => console.log('Save')})
+ *     .addMenuItem({icon: 'print', label: 'Print', accelerator: {ctrl: true, key: 'P'}, onSelect: () => console.log('Print')})
+ *     .addMenu({icon: 'file_download', label: 'Export As...'}, menu => menu
+ *       .addMenuItem({icon: 'picture_as_pdf', label: 'PDF Document', onSelect: () => console.log('PDF Document')})
+ *       .addMenuItem({icon: 'table_view', label: 'Excel Spreadsheet', onSelect: () => console.log('Excel Spreadsheet')}),
+ *     ),
+ *   ),
+ * );
+ * ```
+ *
+ * Multiple contributions to the same toolbar can populate it from different places in the application. Passing a {@link SciToolbarContributionLocation}
+ * gives exact control over contribution placement within the toolbar. By default, toolbar items are added in contribution order.
+ *
+ * Menus and groups can be named to allow extension from other contributions.
+ *
+ * ## Context
+ * A toolbar can have a context, a key/value map that describes its environment. Contributions can declare a minimal required context and read the toolbar context.
+ *
+ * A context can be set on the toolbar with the `context` input:
+ *
+ * ```html
+ * <sci-toolbar name="toolbar:main" [context]="..."/>
+ * ```
+ *
+ * ## Accelerator Target
+ * Tools can have an accelerator for quick access using a keyboard shortcut. By default, the toolbar uses the {@link Document} as the accelerator target.
+ *
+ * The accelerator target can be changed via the `acceleratorTarget` input:
+ *
+ * ```html
+ * <sci-toolbar name="toolbar:main" [acceleratorTarget]="..."/>
+ * ```
+ *
+ * ## Toolbar Size
+ * The toolbar size is based on the `--sci-toolbar-item-size` CSS variable and defaults to 16px. It determines the icon size and is used to compute the font size and padding.
+ *
+ * A custom size can be defined globally using the `:root` selector or scoped to a specific toolbar.
+ *
+ * ```css
+ * sci-toolbar {
+ *   --sci-toolbar-item-size: 18px;
+ * }
+ * ```
+ *
+ * Instead of computing the font size based on `--sci-toolbar-item-size`, an explicit font size can be defined using the `--sci-toolbar-font-size` CSS variable, either globally or at the toolbar level.
+ *
+ * ```css
+ * sci-toolbar {
+ *   --sci-toolbar-font-size: 14px;
+ * }
+ * ```
+ *
+ * ## Hiding an Empty Toolbar
+ * If the toolbar has no tools, it can be hidden using the CSS `:empty` pseudo-class:
+ *
+ * ```css
+ * sci-toolbar:empty {
+ *   display: none;
+ * }
+ * ```
+ *
+ * ## Custom Styling
+ * The appearance of the toolbar can be customized using the following CSS variables, either globally in the `:root` or on the toolbar level.
+ *
+ * - `--sci-toolbar-font-size`: Font size of toolbar items.
+ * - `--sci-toolbar-item-size`: Size of toolbar items; used as the toolbar item icon size and to compute font size and padding.
+ * - `--sci-toolbar-item-cursor`: Cursor style when hovering over a toolbar item.
+ * - `--sci-toolbar-item-text-color`: Text and icon color of toolbar items.
+ * - `--sci-toolbar-item-text-color-disabled`: Text and icon color of disabled toolbar items.
+ * - `--sci-toolbar-item-background-color`: Background color of toolbar items.
+ * - `--sci-toolbar-item-background-color-hover`: Background color of a toolbar item when hovered.
+ * - `--sci-toolbar-item-background-color-active`: Background color of a toolbar item when pressed.
+ * - `--sci-toolbar-item-background-color-checked`: Background color of toggled toolbar items.
+ * - `--sci-toolbar-item-border-radius`: Border radius of toolbar items.
+ * - `--sci-toolbar-item-border-color-hover`: Border color of toolbar items when hovered.
+ * - `--sci-toolbar-item-border-color-checked`: Border color of toggled toolbar items.
+ * - `--sci-toolbar-item-outline-width`: Outline width of toolbar items when focused.
+ * - `--sci-toolbar-item-menu-indicator-color`: Color of the menu indicator for toolbar items without a label.
+ * - `--sci-toolbar-item-menu-indicator-color-disabled`: Color of the menu indicator if disabled.
+ * - `--sci-toolbar-item-menu-indicator-size`: Size of the menu indicator.
+ *
+ * @experimental since 22.3.0; API and behavior may change in any version without notice.
+ */
+class SciToolbarComponent {
+    /**
+     * Defines the name of the toolbar. The name must start with the `toolbar:` prefix.
+     *
+     * Use this name to contribute tools to the toolbar using the {@link contributeMenu} function.
+     */
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the orientation of the toolbar. Defaults to `horizontal`.
+     */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies a context to describe the environment of the toolbar.
+     *
+     * Toolbar contributions may declare a required context. Only contributions matching this context are used.
+     *
+     * A context can also be provided at the injector level using {@link provideMenuContextProvider}, for example, at the component, route, or application level,
+     * and is available to toolbars used in the scope of this injector. The inherited context can be overridden or extended. Setting a context entry to `undefined` clears it.
+     *
+     * ```ts
+     * import {provideMenuContextProvider} from '@scion/components/menu';
+     *
+     * providers: [
+     *   provideMenuContextProvider(() => new Map().set('key', 'value')),
+     * ];
+     * ```
+     *
+     * @see provideMenuContextProvider
+     */
+    context = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "context" }] : /* istanbul ignore next */ []));
+    /**
+     * Specifies the accelerator targets for the toolbar. Defaults to {@link Document}.
+     *
+     * Alternatively, accelerator targets can be provided at the injector level using {@link provideMenuAcceleratorTargetProvider}, for example, at the component, route, or application level,
+     * and are available to toolbars used in the scope of this injector. Inherited targets can be overridden.
+     *
+     * ```ts
+     * import {provideMenuAcceleratorTargetProvider} from '@scion/components/menu';
+     * import {ElementRef, inject} from '@angular/core';
+     *
+     * providers: [
+     *   provideMenuAcceleratorTargetProvider(() => inject(ElementRef)),
+     * ];
+     * ```
+     */
+    acceleratorTarget = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "acceleratorTarget" }] : /* istanbul ignore next */ []));
+    /**
+     * Controls where to attach menu popovers in the DOM. By default, popovers are added as a direct sibling of the toolbar.
+     */
+    popoverViewContainerRef = input(inject(ViewContainerRef), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popoverViewContainerRef" }] : /* istanbul ignore next */ []));
+    /**
+     * Indicates whether any menu within the toolbar is currently open.
+     *
+     * TODO [dwi][API] How to name that metod? Cannot be internal because used by table.
+     */
+    menuOpen = computed(() => this._virtualToolbarGroupComponent.menuOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+    _environmentContext = injectMenuContext();
+    _context = computed(() => new Map([...this._environmentContext(), ...this.context() ?? new Map()]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_context" }] : /* istanbul ignore next */ []));
+    _virtualToolbarGroupComponent;
+    menuItems = inject(ɵSciMenuService).menuItems(this.name, this._context);
+    constructor() {
+        this._virtualToolbarGroupComponent = this.attachVirtualToolbarGroup();
+        this.installAccelerators();
+    }
+    /**
+     * Creates and attaches a {@link SciToolbarGroupComponent} using this component as host,
+     * rendering top-level toolbar items and groups as direct children inside `<sci-toolbar/>`.
+     */
+    attachVirtualToolbarGroup() {
+        const componentRef = createComponent(SciToolbarGroupComponent, {
+            elementInjector: inject(Injector),
+            environmentInjector: inject(EnvironmentInjector),
+            hostElement: inject(ElementRef).nativeElement,
+            bindings: [
+                inputBinding('menuItems', this.menuItems),
+                inputBinding('orientation', this.orientation),
+                inputBinding('popoverViewContainerRef', this.popoverViewContainerRef),
+            ],
+        });
+        // Attach component to Angular component tree for change detection.
+        inject(ApplicationRef).attachView(componentRef.hostView);
+        // Destroy component when host is destroyed.
+        inject(DestroyRef).onDestroy(() => componentRef.destroy());
+        return componentRef.instance;
+    }
+    /**
+     * Installs accelerators of menu items in this toolbar, recursively for menu items in submenus and groups.
+     */
+    installAccelerators() {
+        const injector = inject(Injector);
+        const environmentTargets = injectMenuAcceleratorTargets();
+        effect(onCleanup => {
+            const menuItems = this.menuItems();
+            const options = {
+                targets: this.acceleratorTarget(),
+                environmentTargets: environmentTargets(),
+                injector,
+            };
+            untracked(() => {
+                const accelerators = ɵinstallMenuAccelerators(menuItems, options);
+                onCleanup(() => accelerators.dispose());
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SciToolbarComponent, isStandalone: true, selector: "sci-toolbar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, acceleratorTarget: { classPropertyName: "acceleratorTarget", publicName: "acceleratorTarget", isSignal: true, isRequired: false, transformFunction: null }, popoverViewContainerRef: { classPropertyName: "popoverViewContainerRef", publicName: "popoverViewContainerRef", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.name": "name()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sci-toolbar',
+                    template: '', // Template provided by `SciToolbarGroupComponent`; see `attachVirtualToolbarGroup()`.
+                    host: {
+                        '[attr.name]': 'name()', // Public API: Enables selecting the toolbar by name in CSS (also if the toolbar has a dynamic name input binding)
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], acceleratorTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceleratorTarget", required: false }] }], popoverViewContainerRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverViewContainerRef", required: false }] }] } });
+
+/*
+ * 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
+ */
+
+/*
+ * 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
+ */
+/**
+ * TODO [menu]: Explain how to size the menubar. (height can be set)
+ *
+ * @experimental since 22.3.0; API and behavior may change in any version without notice.
+ */
+class SciMenubarComponent {
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    context = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "context" }] : /* istanbul ignore next */ []));
+    acceleratorTarget = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "acceleratorTarget" }] : /* istanbul ignore next */ []));
+    viewContainerRef = input(inject(ViewContainerRef), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewContainerRef" }] : /* istanbul ignore next */ []));
+    _environmentContext = injectMenuContext();
+    _context = computed(() => new Map([...this._environmentContext(), ...this.context() ?? new Map()]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_context" }] : /* istanbul ignore next */ []));
+    menuItems = inject(ɵSciMenuService).menuItems(this.name, this._context);
+    activeMenuItem = linkedSignal({ ...(ngDevMode ? { debugName: "activeMenuItem" } : /* istanbul ignore next */ {}), source: this.menuItems, // Unset when menu items change.
+        computation: () => null,
+        equal: (a, b) => a?.menuItem === b?.menuItem });
+    constructor() {
+        this.installMenuOpener();
+        this.installAccelerators();
+    }
+    /**
+     * Method invoked when clicking on a menu item.
+     */
+    onMenuItemClick(menuItem, element) {
+        this.activeMenuItem.update(activeMenuItem => activeMenuItem?.menuItem === menuItem ? null : { menuItem, element });
+    }
+    /**
+     * Method invoked before clicking on a menu item.
+     *
+     * When clicking on the active menu item, mark it as closing to prevent immediate re-opening race condition on subsequent click event.
+     */
+    onMenuItemMouseDown(menuItem) {
+        const activeMenuItem = this.activeMenuItem();
+        if (activeMenuItem?.menuItem === menuItem) {
+            activeMenuItem.closing = true;
+        }
+    }
+    /**
+     * Method invoked when moving the pointer over a menu item.
+     */
+    onMenuItemMouseEnter(menuItem, element) {
+        this.activeMenuItem.update(activeMenuItem => activeMenuItem ? { menuItem, element } : null);
+    }
+    /**
+     * Method invoked when moving the pointer out of a menu item.
+     */
+    onMenuItemMouseLeave(menuItem) {
+        const activeMenuItem = this.activeMenuItem();
+        if (activeMenuItem?.menuItem !== menuItem) {
+            return;
+        }
+        if (activeMenuItem.closing === 'prevented') {
+            this.activeMenuItem.set(null); // unset active menu
+        }
+        else if (activeMenuItem.closing) {
+            delete activeMenuItem.closing; // unset closing state
+        }
+    }
+    /**
+     * Opens a menu based on {@link activeMenuItem}.
+     */
+    installMenuOpener() {
+        const menuService = inject(ɵSciMenuService);
+        effect(onCleanup => {
+            if (!this.activeMenuItem()) {
+                return;
+            }
+            const { menuItem, element } = this.activeMenuItem();
+            const menu = menuItem.menu;
+            untracked(() => {
+                const menuRef = menuService.open(menu.children, {
+                    anchor: element,
+                    viewContainerRef: this.viewContainerRef(),
+                    filter: menu.filter,
+                    width: menu.width,
+                    minWidth: menu.minWidth,
+                    maxWidth: menu.maxWidth,
+                    maxHeight: menu.maxHeight,
+                    cssClass: menuItem.cssClass,
+                    attributes: menuItem.attributes,
+                    align: 'vertical',
+                    offset: { y: 1 },
+                });
+                // Close when opening another menu.
+                onCleanup(() => menuRef.close());
+                // Unset when closing menu.
+                menuRef.onClose(() => {
+                    const activeMenuItem = this.activeMenuItem();
+                    // Do not unset if another menu was opened in the meantime.
+                    if (activeMenuItem?.menuItem !== menuItem) {
+                        return;
+                    }
+                    // Prevent immediate re-opening race condition when toolbar button is clicked to close.
+                    if (activeMenuItem.closing) {
+                        activeMenuItem.closing = 'prevented';
+                        return;
+                    }
+                    this.activeMenuItem.set(null);
+                });
+            });
+        });
+    }
+    /**
+     * Installs accelerators of menu items in this menubar, recursively for menu items in submenus and groups.
+     */
+    installAccelerators() {
+        const injector = inject(Injector);
+        const environmentTargets = injectMenuAcceleratorTargets();
+        effect(onCleanup => {
+            const menuItems = this.menuItems();
+            const options = {
+                targets: this.acceleratorTarget(),
+                environmentTargets: environmentTargets(),
+                injector,
+            };
+            untracked(() => {
+                const accelerators = ɵinstallMenuAccelerators(menuItems, options);
+                onCleanup(() => accelerators.dispose());
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenubarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciMenubarComponent, isStandalone: true, selector: "sci-menubar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, acceleratorTarget: { classPropertyName: "acceleratorTarget", publicName: "acceleratorTarget", isSignal: true, isRequired: false, transformFunction: null }, viewContainerRef: { classPropertyName: "viewContainerRef", publicName: "viewContainerRef", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.name": "name()" } }, ngImport: i0, template: "@for (menuItem of menuItems(); track $index) {\r\n  <button [class.open]=\"activeMenuItem()?.menuItem === menuItem\"\r\n          [class]=\"menuItem.cssClass\" class=\"menu-item e2e-menu-item\"\r\n          [sciAttributes]=\"menuItem.attributes\"\r\n          (mousedown)=\"onMenuItemMouseDown(menuItem)\"\r\n          (click)=\"onMenuItemClick(menuItem, element)\"\r\n          (mouseenter)=\"onMenuItemMouseEnter(menuItem, element)\"\r\n          (mouseleave)=\"onMenuItemMouseLeave(menuItem)\"\r\n          #element>\r\n    {{menuItem.labelText!()}}\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--\\275sci-menubar-item-padding-inline: calc(.5 * var(--sci-menubar-item-size));--\\275sci-menubar-item-padding-block: calc(.25 * var(--sci-menubar-item-size));--\\275sci-menubar-font-size: calc(.8125 * var(--sci-menubar-item-size));font-size:var(--sci-menubar-font-size, var(--\\275sci-menubar-font-size));display:flex}:host>button:is(.menu-item,#sci-reset){all:unset;display:inline-flex;align-items:center;text-wrap:nowrap;padding-block:var(--\\275sci-menubar-item-padding-block);padding-inline:var(--\\275sci-menubar-item-padding-inline);border-radius:var(--sci-menubar-item-border-radius);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-menubar-item-cursor)}:host>button:is(.menu-item,#sci-reset):hover{background-color:var(--sci-menubar-item-background-color-hover)}:host>button:is(.menu-item,#sci-reset):active{background-color:var(--sci-menubar-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-menubar-item-outline-width) solid var(--sci-color-accent)}:host>button:is(.menu-item,#sci-reset).open{background-color:var(--sci-menubar-item-background-color-hover)}\n"], dependencies: [{ kind: "directive", type: SciAttributesDirective, selector: "[sciAttributes]", inputs: ["sciAttributes"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciMenubarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sci-menubar', imports: [
+                        SciAttributesDirective,
+                    ], host: {
+                        '[attr.name]': 'name()', // Public API: Enables selecting the menubar by name in CSS (also if the menubar has a dynamic name input binding)
+                    }, template: "@for (menuItem of menuItems(); track $index) {\r\n  <button [class.open]=\"activeMenuItem()?.menuItem === menuItem\"\r\n          [class]=\"menuItem.cssClass\" class=\"menu-item e2e-menu-item\"\r\n          [sciAttributes]=\"menuItem.attributes\"\r\n          (mousedown)=\"onMenuItemMouseDown(menuItem)\"\r\n          (click)=\"onMenuItemClick(menuItem, element)\"\r\n          (mouseenter)=\"onMenuItemMouseEnter(menuItem, element)\"\r\n          (mouseleave)=\"onMenuItemMouseLeave(menuItem)\"\r\n          #element>\r\n    {{menuItem.labelText!()}}\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--\\275sci-menubar-item-padding-inline: calc(.5 * var(--sci-menubar-item-size));--\\275sci-menubar-item-padding-block: calc(.25 * var(--sci-menubar-item-size));--\\275sci-menubar-font-size: calc(.8125 * var(--sci-menubar-item-size));font-size:var(--sci-menubar-font-size, var(--\\275sci-menubar-font-size));display:flex}:host>button:is(.menu-item,#sci-reset){all:unset;display:inline-flex;align-items:center;text-wrap:nowrap;padding-block:var(--\\275sci-menubar-item-padding-block);padding-inline:var(--\\275sci-menubar-item-padding-inline);border-radius:var(--sci-menubar-item-border-radius);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-menubar-item-cursor)}:host>button:is(.menu-item,#sci-reset):hover{background-color:var(--sci-menubar-item-background-color-hover)}:host>button:is(.menu-item,#sci-reset):active{background-color:var(--sci-menubar-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-menubar-item-outline-width) solid var(--sci-color-accent)}:host>button:is(.menu-item,#sci-reset).open{background-color:var(--sci-menubar-item-background-color-hover)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], acceleratorTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceleratorTarget", required: false }] }], viewContainerRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewContainerRef", required: false }] }] } });
+
+/*
+ * 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
+ */
+
+/*
+ * 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
+ */
+
+/*
+ * 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
+ *
+ * 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
+ */
+/**
+ * Registers a {@link SciMenuContextProviderFn} to provide context to menu locations and contributions.
+ *
+ * Provided context is applied to menu locations and contributions in the scope of the injector providing this function.
+ * Individual locations and contributions can extend or override the provided context.
+ *
+ * Multiple providers can be registered. Providers at different injector tree levels form a hierarchy.
+ *
+ * @see SciMenuContextProviderFn
+ */
+function provideMenuContextProvider(providerFn) {
+    return [
+        {
+            provide: SCI_MENU_CONTEXT_PROVIDER,
+            useValue: providerFn,
+            multi: true,
+        },
+        {
+            provide: SCI_MENU_CONTEXT_PROVIDERS,
+            useFactory: () => {
+                const injector = inject(Injector);
+                return [
+                    // Collect providers registered in parent injectors.
+                    ...inject(SCI_MENU_CONTEXT_PROVIDERS, { skipSelf: true, optional: true }) ?? [],
+                    // Collect providers registered in this injector.
+                    // Wrap function to execute in the injector of this injector, not in the calling context.
+                    ...inject(SCI_MENU_CONTEXT_PROVIDER).map(fn => (callingInjector) => runInInjectionContext(injector, () => fn(callingInjector))),
+                ];
+            },
+        },
+        // Provide `MenuService` to inherit provided menu context when opening a menu or looking up installed accelerators.
+        provideMenuService(),
+    ];
+}
+/**
+ * Registers a {@link SciMenuInjectionContextProviderFn} to provide dependency injection tokens for a given menu context.
+ *
+ * Provided tokens are available for dependency injection for contributions registered in the scope of the injector providing this function.
+ * Tokens can be injected in the factory passed to {@link contributeMenu}.
+ *
+ * Multiple providers can be registered. Providers at different injector tree levels form a hierarchy.
+ *
+ * @see SciMenuInjectionContextProviderFn
+ */
+function provideMenuInjectionContextProvider(providerFn) {
+    return [
+        {
+            provide: SCI_MENU_INJECTION_CONTEXT_PROVIDER,
+            useValue: providerFn,
+            multi: true,
+        },
+        {
+            provide: SCI_MENU_INJECTION_CONTEXT_PROVIDERS,
+            useFactory: () => {
+                const injector = inject(Injector);
+                return [
+                    // Collect providers registered in parent injectors.
+                    ...inject(SCI_MENU_INJECTION_CONTEXT_PROVIDERS, { skipSelf: true, optional: true }) ?? [],
+                    // Collect providers registered in this injector.
+                    // Wrap function to execute in the injector of this injector, not in the calling context.
+                    ...inject(SCI_MENU_INJECTION_CONTEXT_PROVIDER).map(fn => (context) => runInInjectionContext(injector, () => fn(context))),
+                ];
+            },
+        },
+    ];
+}
+/**
+ * Registers a {@link SciMenuAcceleratorTargetProviderFn} to provide accelerator targets to menu locations.
+ *
+ * Provided accelerator targets are available to menu locations in the scope of the injector providing this function.
+ * Individual locations can override the provided targets.
+ *
+ * Multiple providers can be registered. Providers at different injector tree levels form a hierarchy.
+ *
+ * @see SciMenuAcceleratorTargetProviderFn
+ */
+function provideMenuAcceleratorTargetProvider(providerFn) {
+    return [
+        {
+            provide: SCI_MENU_ACCELERATOR_TARGET_PROVIDER,
+            useValue: providerFn,
+            multi: true,
+        },
+        {
+            provide: SCI_MENU_ACCELERATOR_TARGET_PROVIDERS,
+            useFactory: () => {
+                // Collect providers registered in current and parent injectors.
+                // Wrap function to execute in the injector where the function is provided, not in the injector of the consumer.
+                const injector = inject(Injector);
+                return [
+                    // Collect providers registered in parent injectors.
+                    ...inject(SCI_MENU_ACCELERATOR_TARGET_PROVIDERS, { skipSelf: true, optional: true }) ?? [],
+                    // Collect providers registered in this injector.
+                    // Wrap function to execute in the injector of this injector, not in the calling context.
+                    ...inject(SCI_MENU_ACCELERATOR_TARGET_PROVIDER).map(fn => (callingInjector) => runInInjectionContext(injector, () => fn(callingInjector))),
+                ];
+            },
+        },
+    ];
+}
+
+/*
+ * 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
+ */
+
+/*
+ * 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
+ */
+/*
+ * Secondary entrypoint: '@scion/components/menu'
+ *
+ * @see https://github.com/ng-packagr/ng-packagr/blob/master/docs/secondary-entrypoints.md
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SciMenuAdapter, SciMenuService, SciMenubarComponent, SciToolbarComponent, contributeMenu, installMenuAccelerators, provideMenuAcceleratorTargetProvider, provideMenuContextProvider, provideMenuInjectionContextProvider, ɵSciMenuService, injectMenuInjectionContextProviders as ɵinjectMenuInjectionContextProviders };
+//# sourceMappingURL=scion-components-menu.mjs.map