@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/utils/focus/detect-keyboard-mode.js

@@ -0,0 +1,28 @@
+import { FOCUS_KEYS } from "./focus-utilities";
+export function detectKeyboardMode(element) {
+    let keyboardMode = false;
+    const ref = element ?? 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 };
+}

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

@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+import { h } from "@stencil/core";
+/**
+ * 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.
+ */
+export const FocusProxy = (props) => {
+    return (h("ul", { class: "proxy-list", role: "listbox", id: `${props.hostId}-${PROXY_LIST_ID_SUFFIX}`, ...props.otherProps }));
+};
+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 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';
+        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);
+        });
+    }
+};

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

@@ -0,0 +1,316 @@
+/*
+ * 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.
+ */
+import { isMakeRef } from "../make-ref";
+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';
+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);
+            }
+        }
+    }
+    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;
+    }
+    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;
+    }
+}
+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;
+            }
+            const deepActive = getDeepActiveElement();
+            if (deepActive instanceof HTMLElement &&
+                isNestedOpenPopoverLayer(deepActive, trapHost)) {
+                return;
+            }
+        }
+        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();
+        }
+    };
+    listenerTarget.addEventListener('keydown', onKeydown);
+    const destroy = () => {
+        listenerTarget.removeEventListener('keydown', onKeydown);
+    };
+    return {
+        destroy,
+    };
+};

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

@@ -0,0 +1,159 @@
+/*
+ * SPDX-FileCopyrightText: 2025 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.
+ */
+/**
+ * Originally based on Ionic's focus-visible utility.
+ * Fork of https://github.com/ionic-team/ionic-framework/blob/c37e2a5d9e765cf48d768061c9d453a13b187e13/core/src/utils/focus-visible.ts
+ */
+export const IX_FOCUS_VISIBLE_ACTIVE = 'ix-focused';
+export const IX_FOCUS_VISIBLE = 'ix-focusable';
+export const FOCUS_KEYS = new Set([
+    'Tab',
+    'ArrowDown',
+    'Space',
+    'Escape',
+    ' ',
+    'Shift',
+    'Enter',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'Home',
+    'End',
+]);
+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 [];
+    }
+    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);
+    }
+    return result;
+}
+export function tryFocusElement(element, options) {
+    if (!(element instanceof HTMLElement)) {
+        return;
+    }
+    try {
+        element.focus(options);
+    }
+    catch { }
+}
+export const focusFirstDescendant = (ref, fallbackElement, options) => {
+    if (options?.focusCheckedItem) {
+        const checkedQueryString = buildFocusableQueryString('[checked]');
+        const checkedElements = queryElements(ref, checkedQueryString);
+        if (checkedElements.length > 0) {
+            focusElementInContext(checkedElements[0], fallbackElement ?? ref);
+            return;
+        }
+    }
+    const inputs = queryElements(ref, focusableQueryString);
+    const firstInput = inputs.length > 0 ? inputs[0] : null;
+    focusElementInContext(firstInput, fallbackElement ?? ref);
+};
+export const focusLastDescendant = (ref, fallbackElement) => {
+    const inputs = queryElements(ref, focusableQueryString);
+    const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
+    focusElementInContext(lastInput, fallbackElement ?? ref);
+};
+/**
+ * Checks if an element is part of a custom element's shadow root
+ * and returns the host element if it is, otherwise returns the element itself.
+ */
+export const getHostElement = (element) => {
+    const rootNode = element.getRootNode();
+    if (rootNode instanceof ShadowRoot && rootNode.host instanceof HTMLElement) {
+        return rootNode.host;
+    }
+    return element;
+};
+export const focusElementInContext = (hostToFocus, fallbackElement, options) => {
+    let elementToFocus = hostToFocus;
+    const shadowRoot = hostToFocus?.shadowRoot;
+    if (shadowRoot) {
+        elementToFocus =
+            shadowRoot.querySelector(focusableQueryString) ||
+                hostToFocus;
+    }
+    if (elementToFocus) {
+        tryFocusElement(elementToFocus, options);
+    }
+    else {
+        tryFocusElement(fallbackElement, options);
+    }
+};
+export const focusElement = (element, options) => {
+    if (!element) {
+        return;
+    }
+    element.focus(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(', ');
+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/focus.js

@@ -8,8 +8,12 @@
  */
 import { addDisposableEventListener } from "./disposable-event-listener";
 export class ArrowFocusController {
+    items;
+    container;
+    wrap = false;
+    callback;
+    keyListener;
     constructor(items, container, callback) {
-        this.wrap = false;
         this.items = items;
         this.container = container;
         this.callback = callback;
@@ -22,7 +26,6 @@ export class ArrowFocusController {
         return this.items.indexOf(document.activeElement);
     }
     onKeyDown(e) {
-        var _a, _b, _c, _d;
         const activeIndex = this.getActiveIndex();
         if (activeIndex < 0) {
             return;
@@ -31,22 +34,22 @@ export class ArrowFocusController {
             case 'ArrowDown':
                 if (activeIndex < this.items.length - 1) {
                     e.preventDefault();
-                    (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, activeIndex + 1);
+                    this.callback?.(activeIndex + 1);
                 }
                 else if (this.wrap) {
                     e.preventDefault();
-                    (_b = this.callback) === null || _b === void 0 ? void 0 : _b.call(this, 0);
+                    this.callback?.(0);
                 }
                 break;
             case 'ArrowUp':
                 {
                     if (activeIndex > 0) {
                         e.preventDefault();
-                        (_c = this.callback) === null || _c === void 0 ? void 0 : _c.call(this, activeIndex - 1);
+                        this.callback?.(activeIndex - 1);
                     }
                     else if (this.wrap && activeIndex === 0) {
                         e.preventDefault();
-                        (_d = this.callback) === null || _d === void 0 ? void 0 : _d.call(this, this.items.length - 1);
+                        this.callback?.(this.items.length - 1);
                     }
                 }
                 break;

package/dist/collection/components/utils/input/index.js

@@ -6,3 +6,8 @@ export function isIxInputFieldComponent(obj) {
         'getNativeInputElement' in obj &&
         typeof obj.getNativeInputElement === 'function');
 }
+export function isIxInputFieldWithPickerComponent(obj) {
+    return (isIxInputFieldComponent(obj) &&
+        'openPicker' in obj &&
+        typeof obj.openPicker === 'function');
+}