@eui/eds-wc 22.0.0-alpha.38 → 22.0.0-alpha.40

package/eds-menu/eds-wc-menu.js

@@ -1,933 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, css, nothing } from 'lit';
-import { customElement, property, state, query } from 'lit/decorators.js';
-import { EdsBaseElement } from '../shared/eds-base.js';
-/**
- * `<eds-wc-menu>` — EDS navigation Menu Web Component.
- *
- * A data-driven hierarchical navigation menu with expand/collapse, optional icons,
- * markers, badges, action icons, an optional search filter, collapsed (icon-only) mode
- * and full WAI-ARIA `tree`/`treeitem` keyboard navigation (roving tabindex, Arrow keys,
- * Home, End, Enter, Space).
- *
- * Projected from the Angular `eds-menu` + `eds-menu-item` components. The `eds-menu-item`
- * Angular sub-component is not a separately-consumable element here — its structure is
- * rendered internally by this element so every ARIA relationship stays in one shadow root
- * (Rule A1).
- *
- * @example
- * ```html
- * <eds-wc-menu has-icons></eds-wc-menu>
- * <script>
- *   document.querySelector('eds-wc-menu').items = [
- *     { label: 'Home', url: '/home', icon: 'house' },
- *     { label: 'Reports', icon: 'chart-bar', children: [
- *       { label: 'Monthly', url: '/reports/monthly' },
- *     ]},
- *   ];
- * </script>
- * ```
- *
- * @fires is-click - `detail: { value: boolean }` — emitted (true) when any menu item is clicked.
- * @fires item-click - `detail: { item: EdsWcMenuItem }` — the clicked menu item.
- * @fires expand-toggle - `detail: { item: EdsWcMenuItem }` — a menu item's expand state was toggled.
- * @fires filter-change - `detail: { value: string }` — the search filter value changed.
- */
-let EdsWcMenu = class EdsWcMenu extends EdsBaseElement {
-    constructor() {
-        super(...arguments);
-        /** Hierarchical array of menu items to display. */
-        this.items = [];
-        /** Label for the search filter input. */
-        this.searchFilterLabel = 'Search filter';
-        /** Current filter value for programmatic filtering. */
-        this.filterValue = '';
-        /** Collapses the menu to icon-only state. */
-        this.isCollapsed = false;
-        /** Shows initials when collapsed (instead of icons). */
-        this.hasCollapsedInitials = false;
-        /** Enables the search filter input. */
-        this.hasFilter = false;
-        /** Shows icons for menu items. */
-        this.hasIcons = false;
-        /** Shows labels underneath icons in collapsed mode. */
-        this.hasIconsLabels = false;
-        /** Alias for hasIconsLabels — shows labels underneath icons in collapsed mode. */
-        this.hasCollapsedLabels = false;
-        /** Enables tooltips on menu items (shown in collapsed mode). */
-        this.hasTooltip = true;
-        /** Shows tooltips even when menu is expanded. */
-        this.hasTooltipOnExpanded = false;
-        /** Only shows tooltip from the tooltip property (not auto-generated from label) when expanded. */
-        this.hasTooltipOnlyOnExpanded = false;
-        /** Expands all items that do not have an explicit expanded property. */
-        this.expandAllItems = false;
-        /** Applies flat styling without hierarchical indentation. */
-        this.isFlat = false;
-        /** Automatically scrolls to the active menu item on route changes. */
-        this.hasScrollToItem = false;
-        /** Applies bold font weight to root-level menu items. */
-        this.hasBoldRootLevel = false;
-        /** Internal configured items with parent refs, visibility, and filtering applied. */
-        this._internalItems = [];
-        /** Whether expand icons should be shown (hidden during filter). */
-        this._hasExpandIcon = true;
-        /** id of the item currently holding the roving tabindex focus. */
-        this._activeId = null;
-    }
-    static { this.styles = css `
-        :host,
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        :host {
-            display: block;
-            width: 100%;
-        }
-
-        .eds-menu__list {
-            display: flex;
-            flex-direction: column;
-            gap: 0;
-            list-style: none;
-            margin: 0;
-            padding: 0;
-            width: 100%;
-        }
-
-        .eds-menu__list:focus-visible {
-            outline: 2px solid var(--eds-c-border-focus);
-            outline-offset: -2px;
-        }
-
-        .eds-menu__sublist {
-            padding-left: var(--eds-sp-m);
-        }
-
-        :host([is-collapsed]) .eds-menu__sublist {
-            padding-left: var(--eds-sp-xs);
-        }
-
-        :host([is-flat]) .eds-menu__sublist {
-            padding-left: 0;
-        }
-
-        /* Filter */
-        .eds-menu-filter {
-            display: flex;
-            padding: var(--eds-sp-s) var(--eds-sp-m);
-            width: 100%;
-        }
-
-        .eds-menu-filter--collapsed,
-        :host([is-collapsed]) .eds-menu-filter {
-            padding: 0;
-            height: 0;
-            overflow: hidden;
-            visibility: hidden;
-        }
-
-        .eds-menu-filter__input-wrapper {
-            display: flex;
-            align-items: center;
-            gap: var(--eds-sp-xs);
-            width: 100%;
-            padding: var(--eds-sp-xs) var(--eds-sp-s);
-            border: 1px solid var(--eds-c-border-divider);
-            border-radius: var(--eds-br-s);
-            background: var(--eds-c-surface-default);
-        }
-
-        .eds-menu-filter__icon {
-            flex-shrink: 0;
-            color: var(--eds-c-foreground-subtler);
-            display: inline-flex;
-        }
-
-        .eds-menu-filter__icon svg {
-            width: var(--eds-is-s);
-            height: var(--eds-is-s);
-            fill: currentColor;
-        }
-
-        .eds-menu-filter__input {
-            border: none;
-            outline: none;
-            background: transparent;
-            font: var(--eds-f-paragraph-s);
-            color: var(--eds-c-foreground-default);
-            width: 100%;
-        }
-
-        .eds-menu-filter__input::placeholder {
-            color: var(--eds-c-foreground-subtler);
-        }
-
-        /* Menu item */
-        .eds-menu-item {
-            display: block;
-            width: 100%;
-        }
-
-        .eds-menu-item:focus-visible {
-            outline: 2px solid var(--eds-c-border-focus);
-            outline-offset: -2px;
-        }
-
-        .eds-menu-item__content {
-            display: flex;
-            flex-direction: column;
-            position: relative;
-            width: 100%;
-        }
-
-        .eds-menu-item__link {
-            display: flex;
-            align-items: center;
-            gap: var(--eds-sp-xs);
-            padding: var(--eds-sp-xs) var(--eds-sp-l);
-            font: var(--eds-f-paragraph-s);
-            color: var(--eds-c-foreground-default);
-            text-decoration: none;
-            cursor: pointer;
-            border: none;
-            background: none;
-            width: 100%;
-            min-height: 40px;
-            border-left: 3px solid transparent;
-            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
-        }
-
-        .eds-menu-item__link:hover:not(.eds-menu-item__link--disabled):not(.eds-menu-item__link--category) {
-            background: var(--eds-c-surface-elevation-sunken);
-            color: var(--eds-c-foreground-primary);
-        }
-
-        .eds-menu-item__link--active:not(.eds-menu-item--disabled) {
-            background: var(--eds-c-surface-primary-subtle);
-            color: var(--eds-c-foreground-primary);
-            font-weight: var(--eds-f-w-semibold);
-            border-left-color: var(--eds-c-border-primary);
-        }
-
-        .eds-menu-item__link--disabled {
-            opacity: var(--eds-op-40);
-            pointer-events: none;
-        }
-
-        .eds-menu-item__link--category {
-            cursor: default;
-            font: var(--eds-f-label-s-semibold);
-            color: var(--eds-c-foreground-subtler);
-            text-transform: uppercase;
-            letter-spacing: 0.02em;
-            padding: var(--eds-sp-m) var(--eds-sp-l) var(--eds-sp-xs);
-            min-height: auto;
-            border-left-color: transparent;
-        }
-
-        .eds-menu-item__link--category:hover {
-            background: none;
-        }
-
-        .eds-menu-item__link-start-block {
-            display: flex;
-            align-items: center;
-            gap: var(--eds-sp-xs);
-            flex-shrink: 0;
-            position: relative;
-        }
-
-        .eds-menu-item__link-start-block:empty {
-            display: none;
-        }
-
-        .eds-menu-item__link-content-block {
-            display: flex;
-            align-items: center;
-            gap: var(--eds-sp-xs);
-            flex: 1;
-            min-width: 0;
-        }
-
-        .eds-menu-item__link-label {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .eds-menu-item__link-label--category {
-            font: var(--eds-f-label-s-semibold);
-            color: var(--eds-c-foreground-subtler);
-        }
-
-        .eds-menu-item__link-end-block {
-            display: flex;
-            align-items: center;
-            gap: var(--eds-sp-xs);
-            flex-shrink: 0;
-            margin-left: auto;
-        }
-
-        .eds-menu-item__link-external-icon {
-            flex-shrink: 0;
-            color: var(--eds-c-foreground-subtler);
-            display: inline-flex;
-        }
-
-        .eds-menu-item__icon {
-            flex-shrink: 0;
-            display: inline-flex;
-        }
-
-        .eds-menu-item__icon svg {
-            width: var(--eds-is-s);
-            height: var(--eds-is-s);
-            fill: currentColor;
-        }
-
-        .eds-menu-item__link-external-icon svg {
-            width: var(--eds-is-xs);
-            height: var(--eds-is-xs);
-            fill: currentColor;
-        }
-
-        /* Status/marker dot rendered as a proper CSS disc. */
-        .eds-menu-item__marker {
-            flex-shrink: 0;
-            width: var(--eds-sp-xs);
-            height: var(--eds-sp-xs);
-            border-radius: 50%;
-            background: currentColor;
-        }
-
-        .eds-menu-item__initials {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font: var(--eds-f-label-m-semibold);
-            width: 32px;
-            height: 32px;
-            border-radius: var(--eds-br-s);
-            background: var(--eds-c-surface-elevation-sunken);
-            border: 1px solid var(--eds-c-border-divider);
-            flex-shrink: 0;
-        }
-
-        .eds-menu-item__icon-label {
-            font: var(--eds-f-microcopy-2xs);
-            color: var(--eds-c-foreground-subtler);
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            max-width: 100%;
-            text-align: center;
-        }
-
-        .eds-menu-item__badge {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            font: var(--eds-f-microcopy-xs);
-            padding: 0 var(--eds-sp-2xs);
-            border-radius: var(--eds-br-full);
-            background: var(--eds-c-surface-neutral-subtle);
-            color: var(--eds-c-foreground-default);
-        }
-
-        .eds-menu-item__badge--dot {
-            position: absolute;
-            top: -2px;
-            right: -2px;
-            width: var(--eds-sp-xs);
-            height: var(--eds-sp-xs);
-            padding: 0;
-            border-radius: 50%;
-            pointer-events: none;
-        }
-
-        .eds-menu-item__badge--info { background: var(--eds-c-surface-info); }
-        .eds-menu-item__badge--success { background: var(--eds-c-surface-success); }
-        .eds-menu-item__badge--warning { background: var(--eds-c-surface-warning); }
-        .eds-menu-item__badge--critical { background: var(--eds-c-surface-critical); }
-
-        .eds-menu-item__action-icon,
-        .eds-menu-item__expand-toggle {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 24px;
-            height: 24px;
-            border: none;
-            background: transparent;
-            cursor: pointer;
-            border-radius: var(--eds-br-s);
-            color: var(--eds-c-foreground-subtle);
-            flex-shrink: 0;
-            font-family: inherit;
-        }
-
-        .eds-menu-item__expand-toggle {
-            border-radius: var(--eds-br-full);
-        }
-
-        .eds-menu-item__action-icon:hover,
-        .eds-menu-item__expand-toggle:hover {
-            background: var(--eds-c-surface-neutral-subtle);
-        }
-
-        .eds-menu-item__action-icon:focus-visible,
-        .eds-menu-item__expand-toggle:focus-visible {
-            outline: 2px solid var(--eds-c-border-focus);
-            outline-offset: -2px;
-        }
-
-        .eds-menu-item__action-icon svg,
-        .eds-menu-item__expand-toggle svg {
-            width: var(--eds-is-xs);
-            height: var(--eds-is-xs);
-            fill: currentColor;
-        }
-
-        .eds-menu-item__action-icon {
-            opacity: 0;
-            transition: opacity 0.15s ease;
-        }
-
-        .eds-menu-item__content:hover .eds-menu-item__action-icon {
-            opacity: 1;
-        }
-
-        .eds-menu-item--disabled {
-            opacity: var(--eds-op-40);
-            pointer-events: none;
-        }
-
-        .eds-menu-item--expanded > .eds-menu-item__link {
-            font-weight: var(--eds-f-w-medium);
-        }
-
-        .eds-menu-item--active > .eds-menu-item__link {
-            background: var(--eds-c-surface-primary-subtle);
-            color: var(--eds-c-foreground-primary);
-            font-weight: var(--eds-f-w-semibold);
-            border-left-color: var(--eds-c-border-primary);
-        }
-
-        /* Bold root level */
-        .eds-menu-item--bold > .eds-menu-item__content > .eds-menu-item__link {
-            font-weight: var(--eds-f-w-semibold);
-        }
-
-        /* Icon-label mode (collapsed with labels under icons) */
-        .eds-menu-item--icon-label .eds-menu-item__link {
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: var(--eds-sp-xs);
-            gap: var(--eds-sp-4xs);
-            border-left: none;
-            border-radius: var(--eds-br-s);
-        }
-
-        .eds-menu-item--icon-label .eds-menu-item__link-content-block,
-        .eds-menu-item--icon-label .eds-menu-item__link-end-block {
-            display: none;
-        }
-
-        /* Collapsed host-level adjustments */
-        :host([is-collapsed]) .eds-menu-item__link {
-            justify-content: center;
-            padding: var(--eds-sp-xs) var(--eds-sp-s);
-            border-left: none;
-            border-radius: var(--eds-br-s);
-            margin: var(--eds-sp-4xs) 0;
-        }
-
-        :host([is-collapsed]) .eds-menu-item__link-content-block,
-        :host([is-collapsed]) .eds-menu-item__link-end-block {
-            display: none;
-        }
-    `; }
-    willUpdate(changed) {
-        if (changed.has('items') || changed.has('expandAllItems') || changed.has('hasCollapsedInitials')) {
-            const configured = this._configureItems([...(this.items ?? [])], undefined, this.expandAllItems);
-            this._internalItems = configured;
-            this._hasExpandIcon = true;
-        }
-        if (changed.has('filterValue')) {
-            if (this.hasFilter && this.filterValue) {
-                this._applyFilter(this.filterValue);
-            }
-        }
-    }
-    updated() {
-        // Ensure a single roving tab stop exists.
-        if (!this._activeId) {
-            const first = this._flatVisible()[0];
-            if (first?.id) {
-                this._activeId = first.id;
-            }
-        }
-    }
-    render() {
-        return html `
-            ${this.hasFilter
-            ? html `
-                    <div class="eds-menu-filter ${this.isCollapsed ? 'eds-menu-filter--collapsed' : ''}"
-                         @click="${this._onFilterClick}">
-                        <div class="eds-menu-filter__input-wrapper">
-                            <span class="eds-menu-filter__icon">
-                                <svg aria-hidden="true"><use href="${this._icon('magnifying-glass', 'core')}"></use></svg>
-                            </span>
-                            <input
-                                class="eds-menu-filter__input"
-                                type="text"
-                                @input="${this._onFilter}"
-                                placeholder="${this.searchFilterLabel}"
-                                aria-label="${this.searchFilterLabel}"
-                                .value="${this.filterValue}" />
-                        </div>
-                    </div>`
-            : nothing}
-
-            <ul class="eds-menu__list"
-                role="tree"
-                aria-orientation="vertical"
-                tabindex="0"
-                @keydown="${this._onKeydown}">
-                ${this._internalItems.map(item => this._renderItem(item, 0))}
-            </ul>
-        `;
-    }
-    // ---- rendering -------------------------------------------------------
-    _renderItem(item, level) {
-        if (!(item.visible && item.filtered)) {
-            return nothing;
-        }
-        const isLabelItem = this._isLabelItem(item);
-        const hasChildren = !!item.children?.length;
-        const isActiveTab = this._activeId === item.id;
-        const disabled = !!item.disabled;
-        const isBold = !item.parent && this.hasBoldRootLevel;
-        const iconLabelMode = this.isCollapsed && (this.hasIconsLabels || this.hasCollapsedLabels);
-        const wrapperClasses = [
-            'eds-menu-item',
-            iconLabelMode ? 'eds-menu-item--icon-label' : '',
-            isBold ? 'eds-menu-item--bold' : '',
-        ].filter(Boolean).join(' ');
-        const contentClasses = [
-            'eds-menu-item__content',
-            isLabelItem ? 'eds-menu-item__content--category' : '',
-            disabled ? 'eds-menu-item--disabled' : '',
-            item.expanded ? 'eds-menu-item--expanded' : '',
-            item.active ? 'eds-menu-item--active' : '',
-        ].filter(Boolean).join(' ');
-        const linkClasses = [
-            'eds-menu-item__link',
-            isLabelItem ? 'eds-menu-item__link--category' : '',
-            item.active ? 'eds-menu-item__link--active' : '',
-            disabled ? 'eds-menu-item__link--disabled' : '',
-            hasChildren ? 'eds-menu-item__link--has-sub' : '',
-        ].filter(Boolean).join(' ');
-        const tooltip = this._tooltipText(item);
-        return html `
-            <li class="${wrapperClasses}"
-                role="treeitem"
-                data-item-id="${item.id ?? nothing}"
-                data-e2e="${item.e2eAttr ?? 'eds-menu-item'}"
-                tabindex="${isActiveTab ? '0' : '-1'}"
-                aria-haspopup="${hasChildren ? 'true' : nothing}"
-                aria-expanded="${hasChildren ? String(!!item.expanded) : nothing}"
-                aria-disabled="${disabled ? 'true' : nothing}"
-                aria-current="${item.active ? 'page' : nothing}"
-                aria-label="${item.label ?? nothing}"
-                @click="${(e) => this._onItemActivate(e, item)}">
-                <div class="${contentClasses}" title="${tooltip ?? nothing}">
-                    <span class="${linkClasses}">
-                        <span class="eds-menu-item__link-start-block">
-                            ${this._renderIconBlock(item)}
-                        </span>
-                        <span class="eds-menu-item__link-content-block">
-                            <span class="eds-menu-item__link-label">${item.label ?? ''}</span>
-                            ${!isLabelItem && item.urlExternal && item.urlExternalTarget === '_blank'
-            ? html `<span class="eds-menu-item__link-external-icon">
-                                    <svg aria-hidden="true"><use href="${this._icon('arrow-square-out', 'core')}"></use></svg>
-                                  </span>`
-            : nothing}
-                        </span>
-                        ${!isLabelItem
-            ? html `<span class="eds-menu-item__link-end-block">
-                                ${item.tagLabel && !this.isCollapsed
-                ? html `<span class="eds-menu-item__badge ${this._badgeColorClass(item.tagTypeClass)}">${item.tagLabel}</span>`
-                : nothing}
-                                ${item.actionIcon
-                ? html `<button class="eds-menu-item__action-icon"
-                                            type="button"
-                                            aria-label="${item.actionIcon.label || 'Action'}"
-                                            @click="${(e) => this._onActionIconClick(e, item)}">
-                                            <svg aria-hidden="true"><use href="${this._icon(item.actionIcon.icon)}"></use></svg>
-                                        </button>`
-                : nothing}
-                                ${this._hasExpandIcon && hasChildren
-                ? html `<button class="eds-menu-item__expand-toggle"
-                                            type="button"
-                                            aria-label="${item.expanded ? 'Collapse' : 'Expand'}"
-                                            @click="${(e) => this._onExpandClick(e, item)}">
-                                            <svg aria-hidden="true"><use href="${this._icon(item.expanded ? 'caret-up' : 'caret-down', 'core')}"></use></svg>
-                                        </button>`
-                : nothing}
-                              </span>`
-            : nothing}
-                    </span>
-                    ${this._shouldRenderChild(item)
-            ? html `<ul class="eds-menu__list eds-menu__sublist" role="group" aria-label="${item.label ?? nothing}">
-                            ${item.children.map(child => this._renderItem(child, level + 1))}
-                          </ul>`
-            : nothing}
-                </div>
-            </li>
-        `;
-    }
-    _renderIconBlock(item) {
-        const markerColor = `var(--eds-c-foreground-${item.markerTypeClass || 'primary'})`;
-        if (!this.isCollapsed) {
-            if (this.hasIcons) {
-                if (item.icon) {
-                    return html `<span class="eds-menu-item__icon"><svg aria-hidden="true"><use href="${this._icon(item.icon)}"></use></svg></span>`;
-                }
-                if (item.hasMarker) {
-                    return html `<span class="eds-menu-item__marker" style="color:${markerColor}"></span>`;
-                }
-                return nothing;
-            }
-            if (item.hasMarker) {
-                return html `<span class="eds-menu-item__marker" style="color:${markerColor}"></span>`;
-            }
-            return nothing;
-        }
-        // Collapsed mode
-        const badgeDot = item.tagLabel
-            ? html `<span class="eds-menu-item__badge eds-menu-item__badge--dot ${this._badgeColorClass(item.tagTypeClass)}"></span>`
-            : nothing;
-        if (this.hasCollapsedInitials && item.initials) {
-            return html `<span class="eds-menu-item__initials">${item.initials}</span>${badgeDot}`;
-        }
-        if (this.hasIcons && item.icon) {
-            return html `<span class="eds-menu-item__icon"><svg aria-hidden="true"><use href="${this._icon(item.icon)}"></use></svg></span>${badgeDot}`;
-        }
-        if (item.hasMarker) {
-            return html `<span class="eds-menu-item__marker" style="color:${markerColor}"></span>${badgeDot}`;
-        }
-        return html `<span class="eds-menu-item__initials">${item.label?.charAt(0) ?? ''}</span>${badgeDot}`;
-    }
-    // ---- icon / badge helpers -------------------------------------------
-    _icon(name, defaultSet = 'regular') {
-        const baseUrl = EdsBaseElement.assetsBaseUrl;
-        const [iconName, set] = name.includes(':') ? name.split(':') : [name, defaultSet];
-        return `${baseUrl}/eds/icons/sprites/${set}.svg#${iconName}`;
-    }
-    _badgeColorClass(tagTypeClass) {
-        return tagTypeClass ? `eds-menu-item__badge--${tagTypeClass}` : '';
-    }
-    // ---- item type predicates -------------------------------------------
-    _isLabelItem(item) {
-        return !item.url && !item.urlExternal && !item.command && !item.children && !item.link;
-    }
-    _tooltipText(item) {
-        if (!this.hasTooltip) {
-            return null;
-        }
-        if (this.isCollapsed) {
-            return item.tooltip || item.label || null;
-        }
-        if (this.hasTooltipOnExpanded) {
-            return item.tooltip || item.label || null;
-        }
-        return null;
-    }
-    _shouldRenderChild(item) {
-        return !!(item?.children && (item.expanded || (this.hasFilter && item.filtered && this._isFilterActive())));
-    }
-    // ---- interaction -----------------------------------------------------
-    _onItemActivate(event, item) {
-        event.preventDefault();
-        event.stopPropagation();
-        this._activeId = item.id ?? this._activeId;
-        this._activate(item);
-    }
-    _activate(item) {
-        if (!item.disabled) {
-            if (item.urlExternal) {
-                window.open(item.urlExternal, item.urlExternalTarget || '_blank');
-            }
-            else if (item.url) {
-                // No Angular router in the WC — dispatch item-click so the consumer navigates.
-            }
-            else if (typeof item.command === 'function') {
-                item.command();
-            }
-            else {
-                this._toggleExpand(item);
-            }
-        }
-        this.dispatchEvent(new CustomEvent('is-click', { bubbles: true, composed: true, detail: { value: true } }));
-        this.dispatchEvent(new CustomEvent('item-click', { bubbles: true, composed: true, detail: { item } }));
-    }
-    _onExpandClick(event, item) {
-        event.preventDefault();
-        event.stopPropagation();
-        this._toggleExpand(item);
-    }
-    _toggleExpand(item) {
-        if (item.children) {
-            item.expanded = !item.expanded;
-            this.dispatchEvent(new CustomEvent('expand-toggle', { bubbles: true, composed: true, detail: { item } }));
-            this._internalItems = [...this._internalItems];
-        }
-    }
-    _onActionIconClick(event, item) {
-        event.preventDefault();
-        event.stopPropagation();
-        item.actionIcon?.action?.(event);
-    }
-    _onFilterClick(event) {
-        event.stopPropagation();
-    }
-    _onFilter(event) {
-        const value = event.target.value;
-        this.filterValue = value;
-        this._applyFilter(value);
-        this.dispatchEvent(new CustomEvent('filter-change', { bubbles: true, composed: true, detail: { value } }));
-    }
-    _applyFilter(value) {
-        const items = this._filterMenuItems(this._internalItems, value);
-        this._hasExpandIcon = !value;
-        this._internalItems = [...items];
-    }
-    _isFilterActive() {
-        return (this._filterInput?.value?.length ?? this.filterValue.length ?? 0) > 0;
-    }
-    _filterMenuItems(items, filterValue) {
-        return items?.map((item) => {
-            const found = (item.label?.toLowerCase().indexOf(filterValue.toLowerCase()) ?? -1) !== -1;
-            if (item.children) {
-                item.children = this._filterMenuItems(item.children, filterValue);
-                item.filtered = item.children.some(child => child.filtered);
-            }
-            else {
-                item.filtered = found;
-            }
-            return item;
-        }) || [];
-    }
-    // ---- keyboard (WAI-ARIA tree pattern, roving tabindex) ---------------
-    _onKeydown(event) {
-        const flat = this._flatVisible();
-        if (!flat.length) {
-            return;
-        }
-        let index = flat.findIndex(i => i.id === this._activeId);
-        if (index < 0) {
-            index = 0;
-        }
-        const active = flat[index];
-        switch (event.key) {
-            case 'Enter':
-            case ' ': {
-                if (active && !active.disabled) {
-                    this._activate(active);
-                    event.preventDefault();
-                }
-                break;
-            }
-            case 'ArrowRight': {
-                if (active?.children?.length) {
-                    if (!active.expanded) {
-                        this._toggleExpand(active);
-                    }
-                    else {
-                        const firstChild = active.children[0];
-                        if (firstChild?.id) {
-                            this._focusItem(firstChild.id);
-                        }
-                    }
-                    event.preventDefault();
-                }
-                break;
-            }
-            case 'ArrowLeft': {
-                if (active?.children?.length && active.expanded) {
-                    this._toggleExpand(active);
-                    event.preventDefault();
-                }
-                else if (active?.parent?.id) {
-                    this._focusItem(active.parent.id);
-                    event.preventDefault();
-                }
-                break;
-            }
-            case 'ArrowDown': {
-                event.preventDefault();
-                this._moveFocus(flat, index, 1);
-                break;
-            }
-            case 'ArrowUp': {
-                event.preventDefault();
-                this._moveFocus(flat, index, -1);
-                break;
-            }
-            case 'Home': {
-                event.preventDefault();
-                if (flat[0]?.id) {
-                    this._focusItem(flat[0].id);
-                }
-                break;
-            }
-            case 'End': {
-                event.preventDefault();
-                const last = flat[flat.length - 1];
-                if (last?.id) {
-                    this._focusItem(last.id);
-                }
-                break;
-            }
-            default:
-                break;
-        }
-    }
-    /** Move focus with wrap-around (matches Angular FocusKeyManager.withWrap()). */
-    _moveFocus(flat, from, delta) {
-        const len = flat.length;
-        const next = (from + delta + len) % len;
-        if (flat[next]?.id) {
-            this._focusItem(flat[next].id);
-        }
-    }
-    _focusItem(id) {
-        this._activeId = id;
-        this.updateComplete.then(() => {
-            const el = this.renderRoot.querySelector(`li[data-item-id="${id}"]`);
-            el?.focus();
-        });
-    }
-    /** Flattened list of currently-rendered (visible + expanded) items, in DOM order. */
-    _flatVisible() {
-        const out = [];
-        const walk = (items) => {
-            for (const item of items) {
-                if (!(item.visible && item.filtered)) {
-                    continue;
-                }
-                out.push(item);
-                if (item.children && this._shouldRenderChild(item)) {
-                    walk(item.children);
-                }
-            }
-        };
-        walk(this._internalItems);
-        return out;
-    }
-    // ---- item configuration ---------------------------------------------
-    _configureItems(items, parent, expandAll) {
-        return items?.map((item) => {
-            if (item.children) {
-                item.children = this._configureItems(item.children, item, expandAll);
-                if (expandAll && item.expanded === undefined) {
-                    item.expanded = true;
-                }
-            }
-            if (parent) {
-                item.parent = parent;
-            }
-            if (!item.id) {
-                item.id = (globalThis.crypto?.randomUUID?.() ?? `eds-menu-item-${Math.random().toString(36).slice(2)}`);
-            }
-            if (item.label && this.hasCollapsedInitials) {
-                const words = item.label.split(' ');
-                item.initials = words.length > 1
-                    ? `${words[0].charAt(0)}${words[1].charAt(0)}`
-                    : item.label.substring(0, 2);
-            }
-            item.visible = item.visible ?? true;
-            item.filtered = item.filtered ?? true;
-            return item;
-        }) || [];
-    }
-};
-__decorate([
-    property({ type: Array })
-], EdsWcMenu.prototype, "items", void 0);
-__decorate([
-    property({ type: String, attribute: 'search-filter-label' })
-], EdsWcMenu.prototype, "searchFilterLabel", void 0);
-__decorate([
-    property({ type: String, attribute: 'fragment-id' })
-], EdsWcMenu.prototype, "fragmentId", void 0);
-__decorate([
-    property({ type: String, attribute: 'filter-value' })
-], EdsWcMenu.prototype, "filterValue", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'is-collapsed' })
-], EdsWcMenu.prototype, "isCollapsed", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-collapsed-initials' })
-], EdsWcMenu.prototype, "hasCollapsedInitials", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-filter' })
-], EdsWcMenu.prototype, "hasFilter", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-icons' })
-], EdsWcMenu.prototype, "hasIcons", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-icons-labels' })
-], EdsWcMenu.prototype, "hasIconsLabels", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-collapsed-labels' })
-], EdsWcMenu.prototype, "hasCollapsedLabels", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-tooltip' })
-], EdsWcMenu.prototype, "hasTooltip", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-tooltip-on-expanded' })
-], EdsWcMenu.prototype, "hasTooltipOnExpanded", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-tooltip-only-on-expanded' })
-], EdsWcMenu.prototype, "hasTooltipOnlyOnExpanded", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'expand-all-items' })
-], EdsWcMenu.prototype, "expandAllItems", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'is-flat' })
-], EdsWcMenu.prototype, "isFlat", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-scroll-to-item' })
-], EdsWcMenu.prototype, "hasScrollToItem", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-bold-root-level' })
-], EdsWcMenu.prototype, "hasBoldRootLevel", void 0);
-__decorate([
-    state()
-], EdsWcMenu.prototype, "_internalItems", void 0);
-__decorate([
-    state()
-], EdsWcMenu.prototype, "_hasExpandIcon", void 0);
-__decorate([
-    state()
-], EdsWcMenu.prototype, "_activeId", void 0);
-__decorate([
-    query('.eds-menu-filter__input')
-], EdsWcMenu.prototype, "_filterInput", void 0);
-EdsWcMenu = __decorate([
-    customElement('eds-wc-menu')
-], EdsWcMenu);
-export { EdsWcMenu };
-//# sourceMappingURL=eds-wc-menu.js.map