@siemens/ix 4.4.0 → 5.0.0

package/dist/esm/aria-activedescendant.mixin-CM-NUHTW.js

@@ -0,0 +1,83 @@
+/*
+ * 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.
+ */
+const AriaActiveDescendantMixin = (Base) => {
+    class AriaActiveDescendantMixinCtor extends Base {
+        constructor() {
+            super();
+        }
+        suppressAriaActiveDescendant = false;
+        isAriaActiveDescendantActive() {
+            return false;
+        }
+        getControllingAriaElement() {
+            return null;
+        }
+        getAriaActiveDescendantProxyItemId() {
+            return false;
+        }
+        async clearActiveDescendant() {
+            if (this.suppressAriaActiveDescendant) {
+                return;
+            }
+            const controllingElement = await this.getControllingAriaElement();
+            if (!controllingElement) {
+                return;
+            }
+            if ('ariaActiveDescendantElement' in Element.prototype) {
+                //@ts-ignore
+                controllingElement.ariaActiveDescendantElement = null;
+            }
+            controllingElement.removeAttribute('aria-activedescendant');
+        }
+        async $internal_onActiveDescendantChange(event) {
+            if (this.suppressAriaActiveDescendant) {
+                return;
+            }
+            if (!this.isAriaActiveDescendantActive()) {
+                this.clearActiveDescendant();
+                return;
+            }
+            const controllingElement = await this.getControllingAriaElement();
+            if (!controllingElement) {
+                return;
+            }
+            if (event.detail.currentFocus.length > 0) {
+                const item = event.detail.currentFocus[event.detail.currentFocus.length - 1];
+                if (!item.id) {
+                    return;
+                }
+                if ('ariaActiveDescendantElement' in Element.prototype) {
+                    //@ts-ignore
+                    controllingElement.ariaActiveDescendantElement = item;
+                }
+                const proxyId = this.getAriaActiveDescendantProxyItemId();
+                if (typeof proxyId === 'string' && proxyId) {
+                    controllingElement.setAttribute('aria-activedescendant', item.id + '-' + proxyId);
+                }
+                else {
+                    controllingElement.setAttribute('aria-activedescendant', item.id);
+                }
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        }
+        static get listeners() {
+            return [{
+                    "name": "ixFocusVisibleChange",
+                    "method": "$internal_onActiveDescendantChange",
+                    "target": "document",
+                    "capture": false,
+                    "passive": false
+                }];
+        }
+    }
+    return AriaActiveDescendantMixinCtor;
+};
+
+export { AriaActiveDescendantMixin as A };

package/dist/esm/{base-button-CV0w47z9.js → base-button-hppF0uUM.js}

@@ -1,4 +1,5 @@
-import { h } from './index-BEPo7U1W.js';
+import { h } from './index-Ca5WUunf.js';
+import { a as a11yBoolean } from './a11y-B5k8YVR0.js';
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
@@ -47,14 +48,17 @@ const isIconDecorative = (ariaAttributes, children) => {
     return hasTextContent || hasAriaLabel;
 };
 const BaseButton = (props, children) => {
-    var _a, _b, _c;
-    const extraClasses = (_a = props.extraClasses) !== null && _a !== void 0 ? _a : {};
-    const ariaAttributes = (_b = props.ariaAttributes) !== null && _b !== void 0 ? _b : {};
-    if (!ariaAttributes['aria-disabled'] && props.disabled) {
-        ariaAttributes['aria-disabled'] = 'true';
-    }
+    const extraClasses = props.extraClasses ?? {};
+    const ariaAttributes = props.ariaAttributes ?? {};
     const iconIsDecorative = isIconDecorative(ariaAttributes, children);
-    const commonAttributes = Object.assign(Object.assign({}, ariaAttributes), { tabindex: props.disabled ? -1 : ((_c = props.tabIndex) !== null && _c !== void 0 ? _c : 0), class: Object.assign(Object.assign({}, getButtonClasses(props.variant, props.iconOnly, props.iconOval, props.selected, props.disabled || props.loading)), extraClasses) });
+    const commonAttributes = {
+        ...ariaAttributes,
+        tabindex: props.disabled ? -1 : (props.tabIndex ?? 0),
+        class: {
+            ...getButtonClasses(props.variant, props.iconOnly, props.iconOval, props.selected, props.disabled || props.loading),
+            ...extraClasses,
+        },
+    };
     const buttonContent = [
         props.loading ? (h("ix-spinner", { size: getSpinnerSize(props), hideTrack: true })) : null,
         props.icon && !props.loading ? (h("ix-icon", { class: "icon", name: props.icon, size: props.iconSize, color: props.iconColor, "aria-hidden": iconIsDecorative ? 'true' : undefined })) : null,
@@ -67,10 +71,10 @@ const BaseButton = (props, children) => {
     ];
     // If href is provided, render as an anchor tag
     if (props.href) {
-        return (h("a", Object.assign({}, commonAttributes, { href: props.disabled ? undefined : props.href, target: props.target, role: "button", rel: props.rel, onClick: (e) => handleOnClick(e, props) }), buttonContent));
+        return (h("a", { ...commonAttributes, "aria-disabled": a11yBoolean(props.disabled), href: props.disabled ? undefined : props.href, target: props.target, role: "button", rel: props.rel, onClick: (e) => handleOnClick(e, props) }, buttonContent));
     }
     // Otherwise, render as a button
-    return (h("button", Object.assign({}, commonAttributes, { onClick: (e) => handleOnClick(e, props), type: props.type }), buttonContent));
+    return (h("button", { ...commonAttributes, "aria-disabled": a11yBoolean(props.disabled), onClick: (e) => handleOnClick(e, props), type: props.type }, buttonContent));
 };
 
 export { BaseButton as B, getButtonClasses as g };

package/dist/esm/{base-icon-button-BuHd34qo.js → base-icon-button-_xVULsPr.js}

@@ -1,5 +1,5 @@
-import { h } from './index-BEPo7U1W.js';
-import { B as BaseButton } from './base-button-CV0w47z9.js';
+import { h } from './index-Ca5WUunf.js';
+import { B as BaseButton } from './base-button-hppF0uUM.js';
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
@@ -10,7 +10,7 @@ import { B as BaseButton } from './base-button-CV0w47z9.js';
  * LICENSE file in the root directory of this source tree.
  */
 function BaseIconButton(props) {
-    return h(BaseButton, Object.assign({}, props, { type: "button" }));
+    return h(BaseButton, { ...props, type: "button" });
 }
 
 export { BaseIconButton as B };

package/dist/esm/component-Chfbghog.js

@@ -0,0 +1,139 @@
+import { F as FOCUS_KEYS, I as IX_FOCUS_VISIBLE_ACTIVE, a as IX_FOCUS_VISIBLE } from './focus-utilities-DnaItyVQ.js';
+import { g as getComposedPath } from './shadow-dom-BIe8Nw9M.js';
+
+function detectKeyboardMode(element) {
+    let keyboardMode = false;
+    const ref = document;
+    const onKeydown = (event) => {
+        const keyboardEvent = event;
+        if (!FOCUS_KEYS.has(keyboardEvent.key)) {
+            return;
+        }
+        keyboardMode = true;
+        ref.dispatchEvent(new CustomEvent('keyboardmodechange', { detail: { keyboardMode } }));
+    };
+    const pointerDown = () => {
+        keyboardMode = false;
+        ref.dispatchEvent(new CustomEvent('keyboardmodechange', { detail: { keyboardMode } }));
+    };
+    ref.addEventListener('keydown', onKeydown);
+    ref.addEventListener('touchstart', pointerDown, {
+        passive: true,
+    });
+    ref.addEventListener('mousedown', pointerDown);
+    const destroy = () => {
+        ref.removeEventListener('keydown', onKeydown);
+        ref.removeEventListener('touchstart', pointerDown);
+        ref.removeEventListener('mousedown', pointerDown);
+    };
+    return { destroy, hasKeyboardMode: () => keyboardMode };
+}
+
+/*
+ * 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.
+ */
+let originalFocus = null;
+let globalKeyboardDetectionInitialized = false;
+let keyboardMode = null;
+function hasKeyboardMode() {
+    return keyboardMode?.hasKeyboardMode() ?? false;
+}
+let currentFocus = [];
+function removeVisibleFocus() {
+    currentFocus.forEach((el) => {
+        el.classList.remove(IX_FOCUS_VISIBLE_ACTIVE);
+        el.ixFocusVisible = false;
+    });
+}
+class IxFocusVisibleChangeEvent extends CustomEvent {
+    static eventName = 'ixFocusVisibleChange';
+    constructor(detail) {
+        super(IxFocusVisibleChangeEvent.eventName, {
+            detail,
+            bubbles: true,
+            cancelable: true,
+        });
+    }
+}
+function updateFocusState(target) {
+    const composedPath = getComposedPath(target);
+    const focusableElements = composedPath.filter((el) => el.classList.contains(IX_FOCUS_VISIBLE));
+    // Clear previous focus
+    removeVisibleFocus();
+    // Set new focus if keyboard mode is active
+    if (hasKeyboardMode()) {
+        focusableElements.forEach((el) => {
+            el.classList.add(IX_FOCUS_VISIBLE_ACTIVE);
+            el.ixFocusVisible = true;
+        });
+        currentFocus = focusableElements;
+    }
+    else {
+        currentFocus = [];
+    }
+    document.dispatchEvent(new IxFocusVisibleChangeEvent({ currentFocus }));
+}
+function applyFocusPatch() {
+    if (typeof HTMLElement !== 'undefined' && !originalFocus) {
+        originalFocus = HTMLElement.prototype.focus;
+        HTMLElement.prototype.focus = function (options) {
+            originalFocus?.call(this, options);
+            updateFocusState(this);
+        };
+        document.addEventListener('focusin', (event) => {
+            const target = event.target;
+            if (target instanceof HTMLElement) {
+                updateFocusState(target);
+            }
+        }, true);
+        document.addEventListener('keyboardmodechange', (event) => {
+            const customEvent = event;
+            const isKeyboardMode = customEvent.detail.keyboardMode;
+            if (!isKeyboardMode) {
+                removeVisibleFocus();
+                return;
+            }
+        });
+        document.addEventListener('focusout', (event) => {
+            const target = event.target;
+            if (target instanceof HTMLElement) {
+                updateFocusState(target);
+            }
+        });
+    }
+}
+/**
+ * Mixin to add global focus visible handling to a component. Mixin will be used via base class IxComponent().
+ * Not necessary to use this mixin directly in components.
+ */
+const SetupMixin = (Base) => {
+    class FocusListenerMixin extends Base {
+        componentDidLoad() {
+            if (super.componentDidLoad) {
+                super.componentDidLoad();
+            }
+            if (!originalFocus) {
+                applyFocusPatch();
+            }
+            if (!globalKeyboardDetectionInitialized) {
+                globalKeyboardDetectionInitialized = true;
+                keyboardMode = detectKeyboardMode();
+            }
+        }
+        disconnectedCallback() {
+            if (super.disconnectedCallback) {
+                super.disconnectedCallback();
+            }
+        }
+    }
+    return FocusListenerMixin;
+};
+
+const DefaultMixins = [SetupMixin];
+
+export { DefaultMixins as D, hasKeyboardMode as h, removeVisibleFocus as r };

package/dist/esm/{context-BniHpAE1.js → context-zqk3Dkv-.js}

@@ -1,4 +1,4 @@
-import { T as TypedEvent } from './typed-event-BdCnOrqW.js';
+import { T as TypedEvent } from './typed-event-CWshStHZ.js';
 
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
@@ -28,6 +28,9 @@ function createContext(name, initialValue) {
  * function to the callback which requesters can invoke to indicate they no longer wish to receive these updates.
  */
 class ContextEvent extends Event {
+    context;
+    callback;
+    subscribe;
     constructor(context, callback, subscribe) {
         super('context-request', { bubbles: true, composed: true });
         this.context = context;
@@ -55,7 +58,7 @@ function useContextProvider(hostElement, context, contextPayload) {
     const requests = new Set();
     hostElement.addEventListener('context-request', (event) => {
         const requestContextEvent = event;
-        if ((requestContextEvent === null || requestContextEvent === void 0 ? void 0 : requestContextEvent.context.name) !== context.name) {
+        if (requestContextEvent?.context.name !== context.name) {
             return;
         }
         requestContextEvent.stopPropagation();

package/dist/esm/{dropdown-controller-D3K9vmFp.js → dropdown-controller-D6Wm2E-0.js}

@@ -12,11 +12,9 @@ function hasDropdownItemWrapperImplemented(item) {
         typeof item.getDropdownItemElement === 'function');
 }
 class DropdownController {
-    constructor() {
-        this.dropdowns = new Map();
-        this.submenuIds = {};
-        this.isWindowListenerActive = false;
-    }
+    dropdowns = new Map();
+    submenuIds = {};
+    isWindowListenerActive = false;
     connected(dropdown) {
         if (!this.isWindowListenerActive) {
             this.addOverlayListeners();
@@ -52,8 +50,7 @@ class DropdownController {
         });
     }
     present(dropdown) {
-        var _a;
-        if (!dropdown.isPresent() && ((_a = dropdown.willPresent) === null || _a === void 0 ? void 0 : _a.call(dropdown))) {
+        if (!dropdown.isPresent() && dropdown.willPresent?.()) {
             this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();
             dropdown.present();
         }
@@ -68,8 +65,7 @@ class DropdownController {
         }
     }
     dismiss(dropdown) {
-        var _a;
-        if (dropdown.isPresent() && ((_a = dropdown.willDismiss) === null || _a === void 0 ? void 0 : _a.call(dropdown))) {
+        if (dropdown.isPresent() && dropdown.willDismiss?.()) {
             this.dismissChildren(dropdown.getId());
             dropdown.dismiss();
             delete this.submenuIds[dropdown.getId()];
@@ -119,6 +115,13 @@ class DropdownController {
         }
         return;
     }
+    getParentDropdownId(dropdownId) {
+        for (const ruleKey of Object.keys(this.submenuIds)) {
+            if (this.submenuIds[ruleKey].includes(dropdownId)) {
+                return ruleKey;
+            }
+        }
+    }
     pathIncludesDropdown(eventTargets) {
         return !!eventTargets.find((element) => element.tagName === 'IX-DROPDOWN');
     }

package/dist/esm/{floating-ui.dom-CAqtPJ4-.js → find-element-Bxrgt3H_.js}

@@ -1780,4 +1780,103 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-export { autoUpdate as a, arrow as b, computePosition as c, flip as f, hide as h, inline as i, offset as o, shift as s };
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+/**
+ * Will try to resolve the selector in the light dom, shadow dom or slot
+ * @param selector The selector to resolve
+ * @param hostElement The element to start the search from
+ * @returns Promise with the resolved elements or undefined if not found
+ */
+async function resolveSelector(selector, hostElement) {
+    const elements = Array.from(document.querySelectorAll(selector));
+    if (elements.length > 0) {
+        return Promise.resolve(elements);
+    }
+    if (hostElement === undefined) {
+        return Promise.resolve(undefined);
+    }
+    const shadowRoot = getRootFor(hostElement);
+    if (shadowRoot === undefined || !(shadowRoot instanceof ShadowRoot)) {
+        return Promise.resolve(undefined);
+    }
+    const elementsInShadowRoot = Array.from(shadowRoot.querySelectorAll(selector));
+    const elementsInHost = Array.from(shadowRoot.host.querySelectorAll(selector));
+    const elementsInComponent = [
+        ...elementsInHost,
+        ...elementsInShadowRoot,
+    ];
+    if (elementsInComponent.length > 0) {
+        return Promise.resolve(elementsInComponent);
+    }
+    return Promise.resolve(undefined);
+}
+/**
+ * Walk up the DOM to find the nearest shadow root
+ * @param element The element to get the root for
+ * @param parent This will determine how far up the DOM to travel to find the root
+ * @returns The root element
+ */
+function getRootFor(element, parent = document.body) {
+    if (!element.parentElement && !element.parentNode) {
+        return undefined;
+    }
+    if (element.parentNode instanceof ShadowRoot) {
+        return element.parentNode;
+    }
+    let currentNode = element.parentElement;
+    while (currentNode) {
+        if (currentNode.shadowRoot) {
+            return currentNode.shadowRoot;
+        }
+        else if (currentNode.parentNode instanceof ShadowRoot) {
+            return currentNode.parentNode;
+        }
+        currentNode = currentNode.parentElement;
+    }
+    return parent;
+}
+function waitForSelector(selector, node = document, hostElement) {
+    return new Promise((resolve) => {
+        const waitForElements = () => {
+            resolveSelector(selector, hostElement).then((elements) => {
+                if (elements && elements.length > 0) {
+                    resolve(elements[0]);
+                    observer?.disconnect();
+                }
+            });
+        };
+        waitForElements();
+        const observer = new MutationObserver(() => {
+            waitForElements();
+        });
+        observer.observe(node.body, {
+            childList: true,
+            subtree: true,
+        });
+    });
+}
+/**
+ * Find an element by ID or reference
+ * @param element The element to find
+ * @param hostElement The element to start the search from
+ * @returns A promise that will resolve to the element
+ */
+function findElement(element, hostElement) {
+    if (element instanceof Promise) {
+        return element;
+    }
+    if (typeof element === 'object') {
+        return Promise.resolve(element);
+    }
+    const selector = `#${element}`;
+    return waitForSelector(selector, document, hostElement);
+}
+
+export { autoUpdate as a, flip as b, computePosition as c, arrow as d, findElement as f, hide as h, inline as i, offset as o, resolveSelector as r, shift as s };

package/dist/esm/focus-proxy-BgLEsVE2.js

@@ -0,0 +1,43 @@
+import { h } from './index-Ca5WUunf.js';
+
+/*
+ * 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.
+ */
+/**
+ * Add a focus proxy element to the DOM to allow for better keyboard navigation and accessibility.
+ *
+ * Important: Also import the focus proxy mixin in the host component's scss file to ensure the proxy is visually hidden but still accessible to screen readers and keyboard navigation.
+ */
+const FocusProxy = (props) => {
+    return (h("ul", { class: "proxy-list", role: "listbox", id: `${props.hostId}-${PROXY_LIST_ID_SUFFIX}`, ...props.otherProps }));
+};
+const PROXY_LIST_ID_SUFFIX = 'proxy-listbox';
+const PROXY_LISTITEM_ID_SUFFIX = 'proxy-listbox-item';
+const updateFocusProxyList = (proxyListElement, items, modifyProxyElement) => {
+    if (proxyListElement && items.length > 0) {
+        const top = items[0].getBoundingClientRect().top -
+            items[0].getBoundingClientRect().height +
+            8;
+        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;
+            if (modifyProxyElement) {
+                modifyProxyElement(item, li);
+            }
+            item.ariaHidden = 'true';
+            proxyListElement.appendChild(li);
+        });
+    }
+};
+
+export { FocusProxy as F, PROXY_LISTITEM_ID_SUFFIX as P, PROXY_LIST_ID_SUFFIX as a, updateFocusProxyList as u };

package/dist/esm/focus-trap-DDLHqzV2.js

@@ -0,0 +1,102 @@
+import { i as isMakeRef } from './make-ref-Djkc69iv.js';
+import { q as queryElements, f as focusableQueryString } from './focus-utilities-DnaItyVQ.js';
+
+/*
+ * 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.
+ */
+const TRAP_FOCUS_EXCLUDE_ATTRIBUTE = 'data-ix-focus-trap-exclude';
+const TRAP_FOCUS_INCLUDE_ATTRIBUTE = 'data-ix-focus-trap-include';
+const addFocusTrap = async (element, options) => {
+    let ref = element;
+    if (options?.targetElement) {
+        if (options.targetElement instanceof HTMLElement) {
+            ref = options.targetElement;
+        }
+        else if (isMakeRef(options.targetElement)) {
+            ref = await options.targetElement.waitForCurrent();
+        }
+    }
+    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--;
+                        }
+                    }
+                }
+                focusableElements.splice(index, 1, ...includedFocusableElements);
+                index += includedFocusableElements.length - 1;
+            }
+            if (focusableElements.length === 0) {
+                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) {
+                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();
+                }
+            }
+            event.stopImmediatePropagation();
+        }
+    };
+    ref.addEventListener('keydown', onKeydown);
+    const destroy = () => {
+        ref.removeEventListener('keydown', onKeydown);
+    };
+    return {
+        destroy,
+    };
+};
+
+export { TRAP_FOCUS_EXCLUDE_ATTRIBUTE as T, TRAP_FOCUS_INCLUDE_ATTRIBUTE as a, addFocusTrap as b };