@siemens/ix 5.0.0 → 5.1.0

package/dist/collection/components/typography/typography.js

@@ -43,7 +43,7 @@ export class IxTypography {
                 color: IxTypography.getTextColor(this.textColor),
             };
         }
-        return (h(Host, { key: 'ea3cece07f28bc8d2b3e833285d2349f660b6509', class: typographyClass, style: style }, h("slot", { key: '07537b8f6e487024123ef007e7d1b44883b0a991' })));
+        return (h(Host, { key: '618a929c958412cf860566ff38de557af16b4df1', class: typographyClass, style: style }, h("slot", { key: 'a766532919f0d8aa5e844b5501c724c5a149b2c0' })));
     }
     static get is() { return "ix-typography"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/upload/upload.js

@@ -175,7 +175,7 @@ export class Upload {
             ? 'Upload folder'
             : 'Upload files';
         const { 'aria-label': ariaLabel = defaultAriaLabel, ...a11y } = this.a11y;
-        return (h(Host, { key: '00802250d19d55f8d8740cb853a922eed4c2e4e7', ...a11y, "aria-disabled": disabled }, h("div", { key: '9e6c52a58f0fc474f719b3c383ec36fa5257b7b8', class: {
+        return (h(Host, { key: '9a21dd00faf48cd80ae13e84af47e09135f35ff8', ...a11y, "aria-disabled": disabled }, h("div", { key: 'd94f8f4756bc8fc6484adde5928020dd0d024b41', class: {
                 'file-upload-area': true,
                 'file-over': this.state !== UploadFileState.LOADING && this.isFileOver,
                 checking: this.state === UploadFileState.LOADING,
@@ -185,9 +185,9 @@ export class Upload {
                 if (this.state !== UploadFileState.LOADING) {
                     this.fileDropped(e);
                 }
-            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave() }, this.renderUploadState(), h("div", { key: '4bde0596c742870e3dd2d4e118b564da18fceafd' }, h("input", { key: '6c83ac9e99dbe18bc7b54b5c57c6bef2760f31b0', "aria-label": ariaLabel, "aria-disabled": disabled, multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", ...directoryAttributes, tabindex: "-1", onChange: (e) => {
+            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave() }, this.renderUploadState(), h("div", { key: '9e3ca61924cca20b05afe9a9839be43ff4d4df0c' }, h("input", { key: '5a237001c511dbfd0b7fb21a6b5986e07fab0915', "aria-label": ariaLabel, "aria-disabled": disabled, multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", ...directoryAttributes, tabindex: "-1", onChange: (e) => {
                 this.fileChangeEvent(e);
-            }, accept: this.accept, disabled: disabled }), h("ix-button", { key: '0d92396264d64dcc3edfde432051aa4dfc2420de', variant: "secondary", "aria-disabled": disabled, onClick: () => this.inputElement.click(), disabled: disabled }, this.i18nUploadFile ??
+            }, accept: this.accept, disabled: disabled }), h("ix-button", { key: '0e597ad0b6dbadad5097258e6e5ebf8cca4cd409', variant: "secondary", "aria-disabled": disabled, onClick: () => this.inputElement.click(), disabled: disabled }, this.i18nUploadFile ??
             (this.directoryUpload ? 'Upload folder…' : 'Upload file…'))))));
     }
     static get is() { return "ix-upload"; }

package/dist/collection/components/utils/a11y.js

@@ -110,3 +110,12 @@ const a11yAttributes = [
     'aria-valuenow',
     'aria-valuetext',
 ];
+/**
+ * Usually called by ref={(ref) => forceTabIndex(ref, -1)} to workaround an issue
+ * where the tabIndex is not applied to the element after re-render.
+ */
+export const forceTabIndex = (element, tabIndex) => {
+    if (element) {
+        element.tabIndex = tabIndex;
+    }
+};

package/dist/collection/components/utils/focus/focus-proxy.js

@@ -19,14 +19,15 @@ export const PROXY_LIST_ID_SUFFIX = 'proxy-listbox';
 export const PROXY_LISTITEM_ID_SUFFIX = 'proxy-listbox-item';
 export const updateFocusProxyList = (proxyListElement, items, modifyProxyElement) => {
     if (proxyListElement && items.length > 0) {
-        const top = items[0].getBoundingClientRect().top -
-            items[0].getBoundingClientRect().height +
-            8;
+        const itemRect = items[0].getBoundingClientRect();
+        const containerRect = (proxyListElement.offsetParent ?? proxyListElement.parentElement)?.getBoundingClientRect();
+        const top = containerRect
+            ? Math.max(0, itemRect.top - containerRect.top - itemRect.height + 8)
+            : 0;
         proxyListElement.innerHTML = '';
         proxyListElement.style.top = top + 'px';
         proxyListElement.style.padding = '0px';
         proxyListElement.style.margin = '0px';
-        proxyListElement.innerHTML = '';
         items.forEach((item) => {
             const li = document.createElement('li');
             li.id = item.id + '-' + PROXY_LISTITEM_ID_SUFFIX;

package/dist/collection/components/utils/focus/focus-trap.js

@@ -7,91 +7,308 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { isMakeRef } from "../make-ref";
-import { focusableQueryString, queryElements } from "./focus-utilities";
+import { focusableQueryString, focusElementInContext, queryElements, tryFocusElement, } from "./focus-utilities";
 export const TRAP_FOCUS_EXCLUDE_ATTRIBUTE = 'data-ix-focus-trap-exclude';
 export const TRAP_FOCUS_INCLUDE_ATTRIBUTE = 'data-ix-focus-trap-include';
-export const addFocusTrap = async (element, options) => {
-    let ref = element;
-    if (options?.targetElement) {
-        if (options.targetElement instanceof HTMLElement) {
-            ref = options.targetElement;
+const POPOVER_TAG = 'IX-POPOVER';
+const POPOVER_HEADER_TAG = 'IX-POPOVER-HEADER';
+const focusTrapQuery = `${focusableQueryString}, [${TRAP_FOCUS_INCLUDE_ATTRIBUTE}]`;
+const mergeUniqueInDocumentOrder = (...lists) => {
+    const unique = [];
+    const seen = new Set();
+    for (const list of lists) {
+        for (const element of list) {
+            if (!seen.has(element)) {
+                seen.add(element);
+                unique.push(element);
+            }
         }
-        else if (isMakeRef(options.targetElement)) {
-            ref = await options.targetElement.waitForCurrent();
+    }
+    return unique.sort((a, b) => {
+        const position = a.compareDocumentPosition(b);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+            return -1;
         }
+        if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+            return 1;
+        }
+        return 0;
+    });
+};
+export const getDeepActiveElement = () => {
+    let active = document.activeElement;
+    while (active) {
+        if (active instanceof HTMLElement && active.shadowRoot?.activeElement) {
+            const shadowActive = active.shadowRoot.activeElement;
+            if (shadowActive !== active) {
+                active = shadowActive;
+                continue;
+            }
+        }
+        const root = active.getRootNode();
+        if (root instanceof ShadowRoot &&
+            root.activeElement &&
+            root.activeElement !== active) {
+            active = root.activeElement;
+            continue;
+        }
+        break;
     }
-    const onKeydown = (event) => {
-        const keyboardEvent = event;
-        if (keyboardEvent.key === 'Tab') {
-            const focusTrapRoot = options?.trapFocusInShadowDom
-                ? ref.shadowRoot
-                : ref;
-            const focusableElements = queryElements(focusTrapRoot, `${focusableQueryString}, [${TRAP_FOCUS_INCLUDE_ATTRIBUTE}]`);
-            for (let index = 0; index < focusableElements.length; index++) {
-                const includeElement = focusableElements[index];
-                if (!includeElement.hasAttribute(TRAP_FOCUS_INCLUDE_ATTRIBUTE)) {
-                    continue;
-                }
-                const includedFocusableElements = queryElements(options?.trapFocusInShadowDom && includeElement.shadowRoot
-                    ? includeElement.shadowRoot
-                    : includeElement, focusableQueryString).filter((element) => element !== includeElement);
-                for (const includedElement of includedFocusableElements) {
-                    const duplicateIndex = focusableElements.indexOf(includedElement);
-                    if (duplicateIndex !== -1) {
-                        focusableElements.splice(duplicateIndex, 1);
-                        if (duplicateIndex < index) {
-                            index--;
-                        }
-                    }
+    return active;
+};
+const resolveFocusTrapActiveElement = (trapHost, focusableElements) => {
+    let activeElement = getDeepActiveElement();
+    if (findActiveFocusableIndex(activeElement, focusableElements) !== -1) {
+        if (activeElement instanceof HTMLElement &&
+            activeElement.hasAttribute(TRAP_FOCUS_INCLUDE_ATTRIBUTE) &&
+            activeElement.shadowRoot?.activeElement) {
+            const includedActive = activeElement.shadowRoot.activeElement;
+            if (findActiveFocusableIndex(includedActive, focusableElements) !== -1) {
+                return includedActive;
+            }
+        }
+        return activeElement;
+    }
+    const shadowActive = trapHost.shadowRoot?.activeElement;
+    if (shadowActive instanceof HTMLElement &&
+        findActiveFocusableIndex(shadowActive, focusableElements) !== -1) {
+        return shadowActive;
+    }
+    return activeElement;
+};
+export function findActiveFocusableIndex(active, focusableElements) {
+    if (!(active instanceof HTMLElement)) {
+        return -1;
+    }
+    const directIndex = focusableElements.indexOf(active);
+    if (directIndex !== -1) {
+        return directIndex;
+    }
+    for (let index = 0; index < focusableElements.length; index++) {
+        const candidate = focusableElements[index];
+        if (candidate.shadowRoot?.contains(active)) {
+            return index;
+        }
+        const activeRoot = active.getRootNode();
+        if (activeRoot instanceof ShadowRoot && activeRoot.host === candidate) {
+            return index;
+        }
+        if (candidate.contains(active)) {
+            return index;
+        }
+    }
+    return -1;
+}
+export function isFocusWithinTrapHost(element, trapHost) {
+    let current = element;
+    while (current) {
+        if (current === trapHost) {
+            return true;
+        }
+        const root = current.getRootNode();
+        if (root instanceof ShadowRoot) {
+            current = root.host;
+            continue;
+        }
+        current = current.parentElement;
+    }
+    return false;
+}
+const isOpenPopoverHost = (host) => {
+    if (host.classList.contains('visible')) {
+        return true;
+    }
+    const dialog = host.shadowRoot?.querySelector('dialog');
+    return dialog?.matches(':popover-open') ?? false;
+};
+const isNestedOpenPopoverLayer = (element, trapHost) => {
+    const ownerPopover = getPopoverHostForElement(element);
+    return (ownerPopover !== undefined &&
+        ownerPopover !== trapHost &&
+        isOpenPopoverHost(ownerPopover));
+};
+export function getPopoverHostForElement(element) {
+    let current = element;
+    while (current) {
+        if (current instanceof HTMLElement && current.tagName === POPOVER_TAG) {
+            return current;
+        }
+        const root = current.getRootNode();
+        if (root instanceof ShadowRoot) {
+            current = root.host;
+            continue;
+        }
+        current = current.parentElement;
+    }
+    return undefined;
+}
+export function isWithinInertSubtree(element) {
+    let current = element;
+    while (current) {
+        if (current instanceof HTMLElement && current.inert) {
+            return true;
+        }
+        if (current instanceof ShadowRoot) {
+            current = current.host;
+            continue;
+        }
+        current = current.parentNode;
+    }
+    return false;
+}
+function shouldExcludeFromFocusTrap(element, trapHost) {
+    if (isWithinInertSubtree(element)) {
+        return true;
+    }
+    const ownerPopover = getPopoverHostForElement(element);
+    if (!ownerPopover || ownerPopover === trapHost) {
+        return false;
+    }
+    return true;
+}
+/** CSS-hidden controls can match the focusable query but are not in tab order. */
+function isHiddenFromTabOrder(element) {
+    const { display, visibility } = getComputedStyle(element);
+    return display === 'none' || visibility === 'hidden';
+}
+/** Drops focusables inside closed or nested child popovers (not tabbable in the active layer). */
+export function filterFocusTrapFocusables(focusableElements, trapHost) {
+    return focusableElements.filter((element) => !shouldExcludeFromFocusTrap(element, trapHost));
+}
+function expandFocusTrapIncludes(focusableElements, options) {
+    const useBoth = options?.trapFocusInShadowDom === 'both';
+    for (let index = 0; index < focusableElements.length; index++) {
+        const includeElement = focusableElements[index];
+        if (!includeElement.hasAttribute(TRAP_FOCUS_INCLUDE_ATTRIBUTE)) {
+            continue;
+        }
+        const includedFocusableElements = queryElements(useBoth ||
+            (options?.trapFocusInShadowDom === true && includeElement.shadowRoot)
+            ? (includeElement.shadowRoot ?? includeElement)
+            : includeElement, focusableQueryString, useBoth).filter((element) => element !== includeElement && !isHiddenFromTabOrder(element));
+        for (const includedElement of includedFocusableElements) {
+            const duplicateIndex = focusableElements.indexOf(includedElement);
+            if (duplicateIndex !== -1) {
+                focusableElements.splice(duplicateIndex, 1);
+                if (duplicateIndex < index) {
+                    index--;
                 }
-                focusableElements.splice(index, 1, ...includedFocusableElements);
-                index += includedFocusableElements.length - 1;
             }
-            if (focusableElements.length === 0) {
+        }
+        focusableElements.splice(index, 1, ...includedFocusableElements);
+        index += includedFocusableElements.length - 1;
+    }
+}
+export function getFocusTrapFocusables(ref, options) {
+    const useBoth = options?.trapFocusInShadowDom === 'both';
+    let focusableElements;
+    if (useBoth) {
+        const fromShadow = ref.shadowRoot
+            ? queryElements(ref.shadowRoot, focusTrapQuery, false)
+            : [];
+        const fromLight = queryElements(ref, focusTrapQuery, false);
+        focusableElements = mergeUniqueInDocumentOrder(fromShadow, fromLight);
+    }
+    else {
+        const focusTrapRoot = options?.trapFocusInShadowDom === true ? ref.shadowRoot : ref;
+        focusableElements = queryElements(focusTrapRoot, focusTrapQuery, useBoth);
+    }
+    expandFocusTrapIncludes(focusableElements, options);
+    const filtered = filterFocusTrapFocusables(focusableElements, ref).filter((element) => !isHiddenFromTabOrder(element));
+    if (!options?.excludeElements) {
+        return filtered;
+    }
+    return filtered.filter((element) => !element.hasAttribute(TRAP_FOCUS_EXCLUDE_ATTRIBUTE));
+}
+function isHeaderFocusable(element, trapHost) {
+    let current = element;
+    while (current && current !== trapHost) {
+        if (current instanceof HTMLElement &&
+            current.tagName === POPOVER_HEADER_TAG) {
+            return true;
+        }
+        const root = current.getRootNode();
+        if (root instanceof ShadowRoot) {
+            current = root.host;
+            continue;
+        }
+        current = current.parentElement;
+    }
+    return false;
+}
+/** Focus the first content control; falls back to the header close when content has none. */
+export function focusFirstFocusTrapElement(ref, options, focusOptions) {
+    const focusableElements = getFocusTrapFocusables(ref, options);
+    const contentFirst = focusableElements.find((element) => !isHeaderFocusable(element, ref));
+    const target = contentFirst ?? focusableElements[0];
+    focusElementInContext(target ?? null, ref, focusOptions);
+}
+const resolveFocusTrapElement = async (target) => {
+    if (target instanceof HTMLElement) {
+        return target;
+    }
+    if (isMakeRef(target)) {
+        return target.waitForCurrent();
+    }
+    throw new Error('Invalid focus trap element reference');
+};
+export const addFocusTrap = async (element, options) => {
+    const trapHost = options?.targetElement
+        ? await resolveFocusTrapElement(options.targetElement)
+        : element;
+    let listenerTarget = element;
+    if (options?.listenOnDocument) {
+        listenerTarget = document;
+    }
+    else if (options?.targetElement) {
+        listenerTarget = trapHost;
+    }
+    const onKeydown = (event) => {
+        const keyboardEvent = event;
+        if (keyboardEvent.key !== 'Tab') {
+            return;
+        }
+        if (options?.listenOnDocument) {
+            if (options.shouldDeferTabTrap?.(trapHost)) {
                 return;
             }
-            if (options?.excludeElements) {
-                focusableElements.forEach((element) => {
-                    if (element.hasAttribute(TRAP_FOCUS_EXCLUDE_ATTRIBUTE)) {
-                        const index = focusableElements.indexOf(element);
-                        if (index !== -1) {
-                            focusableElements.splice(index, 1);
-                        }
-                    }
-                });
-            }
-            if (focusableElements.length === 0) {
+            const deepActive = getDeepActiveElement();
+            if (deepActive instanceof HTMLElement &&
+                isNestedOpenPopoverLayer(deepActive, trapHost)) {
                 return;
             }
-            const firstElement = focusableElements[0];
-            const lastElement = focusableElements[focusableElements.length - 1];
-            let activeElement = document.activeElement;
-            if (ref instanceof HTMLElement && ref.shadowRoot) {
-                activeElement = ref.shadowRoot.activeElement || activeElement;
-            }
-            if (activeElement?.hasAttribute(TRAP_FOCUS_INCLUDE_ATTRIBUTE) &&
-                activeElement?.shadowRoot &&
-                activeElement.shadowRoot.activeElement) {
-                activeElement = activeElement.shadowRoot.activeElement;
-            }
-            if (keyboardEvent.shiftKey) {
-                if (activeElement === firstElement) {
-                    keyboardEvent.preventDefault();
-                    lastElement.focus();
-                }
-            }
-            else {
-                if (activeElement === lastElement) {
-                    keyboardEvent.preventDefault();
-                    firstElement.focus();
-                }
+        }
+        const focusableElements = getFocusTrapFocusables(trapHost, options);
+        if (focusableElements.length === 0) {
+            return;
+        }
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        const activeElement = resolveFocusTrapActiveElement(trapHost, focusableElements);
+        const activeIndex = findActiveFocusableIndex(activeElement, focusableElements);
+        let handled = false;
+        if (activeIndex === -1) {
+            return;
+        }
+        if (keyboardEvent.shiftKey) {
+            if (activeIndex === 0) {
+                keyboardEvent.preventDefault();
+                tryFocusElement(lastElement);
+                handled = true;
             }
+        }
+        else if (activeIndex === focusableElements.length - 1) {
+            keyboardEvent.preventDefault();
+            tryFocusElement(firstElement);
+            handled = true;
+        }
+        if (handled) {
             event.stopImmediatePropagation();
         }
     };
-    ref.addEventListener('keydown', onKeydown);
+    listenerTarget.addEventListener('keydown', onKeydown);
     const destroy = () => {
-        ref.removeEventListener('keydown', onKeydown);
+        listenerTarget.removeEventListener('keydown', onKeydown);
     };
     return {
         destroy,

package/dist/collection/components/utils/focus/focus-utilities.js

@@ -26,28 +26,53 @@ export const FOCUS_KEYS = new Set([
     'Home',
     'End',
 ]);
-export function queryElements(dropdownElement, query) {
+const getQueryRoot = (dropdownElement, includeShadowDom) => includeShadowDom && dropdownElement instanceof HTMLElement
+    ? (dropdownElement.shadowRoot ?? dropdownElement)
+    : dropdownElement;
+const collectSlotMatches = (slot, query) => {
+    const slotted = [];
+    for (const assigned of slot.assignedElements({
+        flatten: true,
+    })) {
+        if (assigned.matches(query)) {
+            slotted.push(assigned);
+            continue;
+        }
+        slotted.push(...Array.from(assigned.querySelectorAll(query)));
+    }
+    return slotted;
+};
+const findInsertIndex = (slot, elements) => {
+    for (let i = 0; i < elements.length; i++) {
+        if (slot.compareDocumentPosition(elements[i]) &
+            Node.DOCUMENT_POSITION_FOLLOWING) {
+            return i;
+        }
+    }
+    return elements.length;
+};
+export function queryElements(dropdownElement, query, includeShadowDom = false) {
     if (!dropdownElement) {
         return [];
     }
-    let items = [];
-    // Collect items from slots if they exist
-    if (dropdownElement.querySelectorAll('slot').length > 0) {
-        const slotElements = Array.from(dropdownElement.querySelectorAll('slot'));
-        items = slotElements.flatMap((slot) => Array.from(slot.assignedElements({ flatten: true })).flatMap((el) => {
-            // Check if the assigned element itself matches the query
-            if (el?.matches(query)) {
-                return [el];
-            }
-            // Otherwise, query its children
-            return Array.from(el.querySelectorAll(query));
-        }));
+    const root = getQueryRoot(dropdownElement, includeShadowDom);
+    const fromRoot = Array.from(root.querySelectorAll(query));
+    const slots = Array.from(root.querySelectorAll('slot'));
+    if (slots.length === 0) {
+        return fromRoot;
+    }
+    const result = [...fromRoot];
+    // Process slots from last to first so that earlier splice indices stay valid.
+    for (let i = slots.length - 1; i >= 0; i--) {
+        const slot = slots[i];
+        const slotted = collectSlotMatches(slot, query);
+        if (slotted.length === 0) {
+            continue;
+        }
+        const insertAt = findInsertIndex(slot, result);
+        result.splice(insertAt, 0, ...slotted);
     }
-    items = [
-        ...items,
-        ...Array.from(dropdownElement.querySelectorAll(query)),
-    ];
-    return items;
+    return result;
 }
 export function tryFocusElement(element, options) {
     if (!(element instanceof HTMLElement)) {
@@ -87,7 +112,7 @@ export const getHostElement = (element) => {
     }
     return element;
 };
-export const focusElementInContext = (hostToFocus, fallbackElement) => {
+export const focusElementInContext = (hostToFocus, fallbackElement, options) => {
     let elementToFocus = hostToFocus;
     const shadowRoot = hostToFocus?.shadowRoot;
     if (shadowRoot) {
@@ -96,10 +121,10 @@ export const focusElementInContext = (hostToFocus, fallbackElement) => {
                 hostToFocus;
     }
     if (elementToFocus) {
-        focusElement(elementToFocus);
+        tryFocusElement(elementToFocus, options);
     }
     else {
-        focusElement(fallbackElement);
+        tryFocusElement(fallbackElement, options);
     }
 };
 export const focusElement = (element, options) => {
@@ -110,8 +135,25 @@ export const focusElement = (element, options) => {
 };
 const focusableBase = ':not([tabindex^="-"]):not([hidden]):not([disabled])';
 const customTags = ['ix-dropdown-item', 'ix-select-item'];
+const focusableNativeHtml = [
+    'button',
+    'a[href]',
+    'area[href]',
+    'audio',
+    'input',
+    'select',
+    'textarea',
+    'iframe',
+    'object',
+    'embed',
+    'video',
+    '[contenteditable]',
+];
 const buildCustom = (additionalSelector) => customTags
     .map((tag) => `${tag}${focusableBase}${additionalSelector}`)
     .join(', ');
-export const focusableQueryString = `[tabindex]${focusableBase}, ${buildCustom('')}`;
-export const buildFocusableQueryString = (additionalSelector = '') => `[tabindex]${focusableBase}${additionalSelector}, ${buildCustom(additionalSelector)}`;
+const buildNative = (additionalSelector) => focusableNativeHtml
+    .map((tag) => `${tag}${focusableBase}${additionalSelector}`)
+    .join(', ');
+export const focusableQueryString = `[tabindex]${focusableBase}, ${buildCustom('')}, ${buildNative('')}`;
+export const buildFocusableQueryString = (additionalSelector = '') => `[tabindex]${focusableBase}${additionalSelector}, ${buildCustom(additionalSelector)}, ${buildNative(additionalSelector)}`;

package/dist/collection/components/utils/menu-service/menu-service.js

@@ -11,15 +11,26 @@ class MenuService {
     #menuElement = null;
     #menuExpandChange = new TypedEvent();
     #isPinned = false;
+    #expandChangeListener = null;
     register(menuElement) {
         if (this.#menuElement) {
             console.warn('Menu already defined');
             return;
         }
         this.#menuElement = menuElement;
-        this.#menuElement.addEventListener('expandChange', (event) => {
+        this.#expandChangeListener = (event) => {
             this.#menuExpandChange.emit(event.detail);
-        });
+        };
+        this.#menuElement.addEventListener('expandChange', this.#expandChangeListener);
+    }
+    unregister(menuElement) {
+        if (this.#menuElement === menuElement) {
+            if (this.#expandChangeListener) {
+                menuElement.removeEventListener('expandChange', this.#expandChangeListener);
+            }
+            this.#expandChangeListener = null;
+            this.#menuElement = null;
+        }
     }
     setIsPinned(pinned) {
         this.#isPinned = pinned;

package/dist/collection/components/utils/nested-overlay/hierarchy.js

@@ -0,0 +1,44 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export function buildComposedPath(id, childIdsByParent, path = new Set()) {
+    if (childIdsByParent[id]) {
+        path.add(id);
+    }
+    for (const parentId of Object.keys(childIdsByParent)) {
+        if (childIdsByParent[parentId].includes(id)) {
+            buildComposedPath(parentId, childIdsByParent, path).forEach((key) => path.add(key));
+        }
+    }
+    return path;
+}
+export function buildPathIncluding(id, childIdsByParent) {
+    const path = buildComposedPath(id, childIdsByParent, new Set());
+    path.add(id);
+    return path;
+}
+export function removeIdFromHierarchy(id, childIdsByParent, registeredIds) {
+    for (const registeredId of registeredIds) {
+        const childIds = childIdsByParent[registeredId];
+        if (childIds) {
+            const index = childIds.indexOf(id);
+            if (index > -1) {
+                childIds.splice(index, 1);
+            }
+        }
+    }
+    delete childIdsByParent[id];
+}
+export function getParentId(childId, childIdsByParent) {
+    for (const parentId of Object.keys(childIdsByParent)) {
+        if (childIdsByParent[parentId].includes(childId)) {
+            return parentId;
+        }
+    }
+    return undefined;
+}

package/dist/collection/components/utils/nested-overlay/index.js

@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { buildComposedPath, buildPathIncluding, getParentId, removeIdFromHierarchy, } from './hierarchy';
+export { NestedOverlayStack } from './nested-overlay-stack';
+export { pathIncludesTrigger } from './path-utils';