@siemens/ix 4.4.0 → 5.0.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,40 @@
+/*
+ * 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 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);
+        });
+    }
+};

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

@@ -0,0 +1,99 @@
+/*
+ * 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, queryElements } 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;
+        }
+        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,
+    };
+};

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

@@ -0,0 +1,117 @@
+/*
+ * 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',
+]);
+export function queryElements(dropdownElement, query) {
+    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));
+        }));
+    }
+    items = [
+        ...items,
+        ...Array.from(dropdownElement.querySelectorAll(query)),
+    ];
+    return items;
+}
+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) => {
+    let elementToFocus = hostToFocus;
+    const shadowRoot = hostToFocus?.shadowRoot;
+    if (shadowRoot) {
+        elementToFocus =
+            shadowRoot.querySelector(focusableQueryString) ||
+                hostToFocus;
+    }
+    if (elementToFocus) {
+        focusElement(elementToFocus);
+    }
+    else {
+        focusElement(fallbackElement);
+    }
+};
+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 buildCustom = (additionalSelector) => customTags
+    .map((tag) => `${tag}${focusableBase}${additionalSelector}`)
+    .join(', ');
+export const focusableQueryString = `[tabindex]${focusableBase}, ${buildCustom('')}`;
+export const buildFocusableQueryString = (additionalSelector = '') => `[tabindex]${focusableBase}${additionalSelector}, ${buildCustom(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');
+}

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

@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { getElement } from "@stencil/core";
+import { isIxInputFieldComponent, } from ".";
 export async function isTouched(host) {
     if (typeof host.isTouched === 'function') {
         return host.isTouched();
@@ -26,8 +27,8 @@ export async function shouldSuppressInternalValidation(host) {
 export function createClassMutationObserver(element, callback, options) {
     const observer = new MutationObserver(callback);
     observer.observe(element, {
-        subtree: options === null || options === void 0 ? void 0 : options.includeChildren,
-        childList: options === null || options === void 0 ? void 0 : options.includeChildren,
+        subtree: options?.includeChildren,
+        childList: options?.includeChildren,
         attributes: true,
         attributeFilter: ['class'],
     });
@@ -63,6 +64,10 @@ export function HookValidationLifecycle(options) {
                 if (skipValidation) {
                     return;
                 }
+                if (!isIxInputFieldComponent(host)) {
+                    return;
+                }
+                const validationElement = await host.getNativeInputElement?.();
                 if (host.hasValidValue && typeof host.hasValidValue === 'function') {
                     const hasValue = await host.hasValidValue();
                     const touched = await isTouched(host);
@@ -79,23 +84,41 @@ export function HookValidationLifecycle(options) {
                     const touched = await isTouched(host);
                     host.classList.toggle(`ix-invalid--validity-patternMismatch`, validityState.patternMismatch);
                     host.classList.toggle('ix-invalid--validity-invalid', !validityState.valid && touched);
+                    const fieldWrapper = host.shadowRoot?.querySelector('ix-field-wrapper');
+                    if (validationElement && fieldWrapper) {
+                        const ariaErrorMessageElement = await fieldWrapper.getAriaErrorMessageElement();
+                        const ariaHelperMessageElement = await fieldWrapper.getAriaHelperMessageElement();
+                        if (ariaHelperMessageElement) {
+                            validationElement.setAttribute('aria-describedby', `${ariaHelperMessageElement.id}`);
+                        }
+                        if (!validityState.valid) {
+                            validationElement?.setAttribute('aria-invalid', 'true');
+                            if (ariaErrorMessageElement && !validityState.valid) {
+                                validationElement.setAttribute('aria-errormessage', `${ariaErrorMessageElement.id}`);
+                                validationElement.setAttribute('aria-describedby', `${ariaErrorMessageElement.id}`);
+                            }
+                        }
+                        else {
+                            validationElement?.removeAttribute('aria-invalid');
+                        }
+                    }
                 }
             };
             host.addEventListener('checkedChange', checkIfRequiredFunction);
             host.addEventListener('valueChange', checkIfRequiredFunction);
             host.addEventListener('ixBlur', checkIfRequiredFunction);
             setTimeout(checkIfRequiredFunction);
-            return connectedCallback === null || connectedCallback === void 0 ? void 0 : connectedCallback.call(this);
+            return connectedCallback?.call(this);
         };
         proto.componentWillLoad = function () {
             const host = getElement(this);
             classMutationObserver = createClassMutationObserver(host, () => {
-                const result = checkFieldClasses(host, options === null || options === void 0 ? void 0 : options.includeChildren);
+                const result = checkFieldClasses(host, options?.includeChildren);
                 proto[methodName].call(this, result);
             }, options);
-            const result = checkFieldClasses(host, options === null || options === void 0 ? void 0 : options.includeChildren);
+            const result = checkFieldClasses(host, options?.includeChildren);
             proto[methodName].call(this, result);
-            return componentWillLoad === null || componentWillLoad === void 0 ? void 0 : componentWillLoad.call(this);
+            return componentWillLoad?.call(this);
         };
         proto.disconnectedCallback = function () {
             const host = getElement(this);
@@ -109,13 +132,13 @@ export function HookValidationLifecycle(options) {
                 host.removeEventListener('ixBlur', checkIfRequiredFunction);
                 checkIfRequiredFunction = null;
             }
-            return disconnectedCallback === null || disconnectedCallback === void 0 ? void 0 : disconnectedCallback.call(this);
+            return disconnectedCallback?.call(this);
         };
     };
 }
 export function getValidationText(isInputInvalid, customInvalidText, i18nFallbackText) {
     if (isInputInvalid) {
-        return customInvalidText !== null && customInvalidText !== void 0 ? customInvalidText : i18nFallbackText;
+        return customInvalidText ?? i18nFallbackText;
     }
     return customInvalidText;
 }

package/dist/collection/components/utils/internal/component.js

@@ -1 +1,2 @@
-export {};
+import { SetupMixin } from "./mixins/setup.mixin";
+export const DefaultMixins = [SetupMixin];

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

@@ -1 +1 @@
-export {};
+export { SetupMixin } from './mixins/setup.mixin';

package/dist/collection/components/utils/internal/mixins/accessibility/aria-activedescendant.mixin.js

@@ -0,0 +1,84 @@
+/*
+ * 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 { Build } from "@stencil/core";
+export 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) {
+                    Build.isDev &&
+                        console.warn('aria-activedescendant item has no id', item);
+                    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;
+};