@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/workflow-step/workflow-step.js

@@ -9,36 +9,40 @@
 import { iconCircle, iconCircleDot, iconCircleFilled, iconError, iconSuccess, iconTriangleFilled, iconWarning, } from "@siemens/ix-icons/icons";
 import { Fragment, h, Host, } from "@stencil/core";
 export class WorkflowStep {
-    constructor() {
-        /**
-         * Select orientation
-         */
-        this.vertical = false;
-        /**
-         * Set disabled
-         */
-        this.disabled = false;
-        /**
-         * Set status
-         */
-        this.status = 'open';
-        /**
-         * Activate navigation click
-         */
-        this.clickable = false;
-        /**
-         * Set selected
-         */
-        this.selected = false;
-        /**
-         * Activate navigation click
-         *
-         * @internal
-         */
-        this.position = 'undefined';
-        this.iconColor = 'workflow-step-icon-default--color';
-        this.customIconSlot = false;
-    }
+    hostElement;
+    /**
+     * Select orientation
+     */
+    vertical = false;
+    /**
+     * Set disabled
+     */
+    disabled = false;
+    /**
+     * Set status
+     */
+    status = 'open';
+    /**
+     * Activate navigation click
+     */
+    clickable = false;
+    /**
+     * Set selected
+     */
+    selected = false;
+    /**
+     * Activate navigation click
+     *
+     * @internal
+     */
+    position = 'undefined';
+    iconName;
+    iconColor = 'workflow-step-icon-default--color';
+    /**
+     * @internal
+     */
+    selectedChanged;
+    customIconSlot = false;
     selectedHandler() {
         this.setWorkflowStepStyles();
     }
@@ -109,18 +113,18 @@ export class WorkflowStep {
     }
     render() {
         const icons = !this.customIconSlot ? (h(Fragment, null, h("ix-icon", { color: "color-1", name: this.status === 'warning' ? iconTriangleFilled : iconCircleFilled, class: "absolute", size: "24" }), h("ix-icon", { color: this.iconColor, name: this.iconName, class: "absolute", size: "24", "aria-label": this.getIconAriaLabel() }))) : null;
-        return (h(Host, { key: 'ba277a277df82498b071d6b63e07177f33b39747', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, h("div", { key: '254f15dc98882c3ccf425806ebcb798cf4ca2067', tabIndex: 0, class: {
+        return (h(Host, { key: '9ce5d93c28b5faeab001bd9210a022b32d2635c3', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, h("div", { key: 'd3e4dc4bfd15f93461193fd1cc88bd666103160f', tabIndex: 0, class: {
                 step: true,
                 selected: this.selected,
                 vertical: this.vertical,
                 disabled: this.disabled,
                 clickable: this.clickable && !this.disabled,
-            } }, h("div", { key: '52277952fefb15636c4c769cae8b1b31681747b0', class: "wrapper" }, h("div", { key: '172e5dbd849ff5f1c398b9dd2269a1a5289d7e13', class: {
+            } }, h("div", { key: 'd9e7ed59ca4a16c28ad973c85b09a19044954f08', class: "wrapper" }, h("div", { key: '89d015629ccebbdb8a94d8c9ee276f3abb8c876f', class: {
                 line: true,
                 selected: this.selected,
                 [this.status]: true,
                 [this.position]: true,
-            } }), h("div", { key: 'd14473e894db0490d0846b991bd11ea96d1d0940', class: "iconWrapper" }, icons, h("slot", { key: 'fd034c7d06df4e52aa704e7032acc93afe1bb5fc', name: "custom-icon" }))), h("div", { key: 'c4f2915aaa75d26fcfbbd9bf5786f2786da58b9c', class: "text" }, h("slot", { key: '08b316f4c683aa9be7a5edac8b64977538683ba4' })))));
+            } }), h("div", { key: '56abb531bee9339a25c540019faef59a406a542a', class: "iconWrapper" }, icons, h("slot", { key: 'e903779416603e31faf8cacd15cc85c751e6376a', name: "custom-icon" }))), h("div", { key: '5c93afc3352897a7480e27251590cbb3dce86e9a', class: "text" }, h("slot", { key: '6594f25dccef5bd78bf255839487a9e8fdc7d3ca' })))));
     }
     static get is() { return "ix-workflow-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/workflow-steps/workflow-steps.js

@@ -9,20 +9,23 @@
 import { h, Host, } from "@stencil/core";
 import { createMutationObserver } from "../utils/mutation-observer";
 export class WorkflowSteps {
-    constructor() {
-        /**
-         * Select orientation
-         */
-        this.vertical = false;
-        /**
-         * Activate navigation click
-         */
-        this.clickable = false;
-        /**
-         * Activate navigation click
-         */
-        this.selectedIndex = 0;
-    }
+    hostElement;
+    /**
+     * Select orientation
+     */
+    vertical = false;
+    /**
+     * Activate navigation click
+     */
+    clickable = false;
+    /**
+     * Activate navigation click
+     */
+    selectedIndex = 0;
+    /**
+     * On step selected event
+     */
+    stepSelected;
     getSteps() {
         return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));
     }
@@ -47,6 +50,7 @@ export class WorkflowSteps {
             }
         });
     }
+    observer;
     onStepSelectionChanged(event) {
         const eventTarget = event.detail;
         const steps = this.getSteps();
@@ -81,7 +85,7 @@ export class WorkflowSteps {
         this.updateSteps();
     }
     render() {
-        return (h(Host, { key: 'ed6d9907f43ca79688b00201d2432287444f30e6' }, h("div", { key: 'f116d280b59c16a79aa4867329f36035ca14d919', class: { steps: true, vertical: this.vertical } }, h("slot", { key: '378f336873295a70620117d939d587b8ff407739' }))));
+        return (h(Host, { key: 'a1ad0dc5f6ab4753831f1b476c6ad585db6fdb96' }, h("div", { key: '7837c226c1450e022380817676adf4b96ff2ab78', class: { steps: true, vertical: this.vertical } }, h("slot", { key: '96b38116fa2b9c8fbd9d3595393d7514b1bed984' }))));
     }
     static get is() { return "ix-workflow-steps"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/public-api.js

@@ -9,10 +9,14 @@
 export * from './components/category-filter/filter-state';
 export * from './components/category-filter/input-state';
 export * from './components/category-filter/logical-filter-operator';
+export * from './components/date-input/date-input.types';
+export * from './components/datetime-input/datetime-input.types';
+export * from './components/time-input/time-input.types';
 export * from './components/toast/toast-utils';
 export * from './components/tree-item/default-tree-item';
 export * from './components/tree/tree-model';
 export * from './components/tree/tree.types';
+export * from './components/breadcrumb/breadcrumb.types';
 export * from './components/upload/upload-file-state';
 export * from './components/utils/delegate';
 export * from './components/utils/modal';

package/dist/collection/tests/utils/test/page.js

@@ -6,14 +6,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { test as testBase, expect, } from "@playwright/test";
 import AxeBuilder from "@axe-core/playwright";
+import { expect as baseExpect, test as testBase, } from "@playwright/test";
 async function extendPageFixture(page, testInfo) {
-    var _a, _b, _c, _d;
     const originalGoto = page.goto.bind(page);
     const originalScreenshot = page.screenshot.bind(page);
-    const dataIxTheme = (_b = (_a = testInfo.project.metadata) === null || _a === void 0 ? void 0 : _a['data-ix-theme']) !== null && _b !== void 0 ? _b : 'classic';
-    const dataIxColorSchema = (_d = (_c = testInfo.project.metadata) === null || _c === void 0 ? void 0 : _c['data-ix-color-schema']) !== null && _d !== void 0 ? _d : 'dark';
+    const dataIxTheme = testInfo.project.metadata?.['data-ix-theme'] ?? 'classic';
+    const dataIxColorSchema = testInfo.project.metadata?.['data-ix-color-schema'] ?? 'dark';
     testInfo.annotations.push({
         type: `${dataIxTheme} ${dataIxColorSchema}`,
     });
@@ -33,7 +32,7 @@ async function extendPageFixture(page, testInfo) {
 }
 async function mountComponent(page, selector, config) {
     return page.evaluateHandle(async ({ componentSelector, config }) => {
-        if (config === null || config === void 0 ? void 0 : config.headTags) {
+        if (config?.headTags) {
             config.headTags.forEach((tag) => {
                 const head = document.querySelector('head');
                 if (!head) {
@@ -42,7 +41,7 @@ async function mountComponent(page, selector, config) {
                 head.innerHTML += tag;
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.icons) {
+        if (config?.icons) {
             const moduleImport = await import(
             //@ts-expect-error - Only existing on runtime
             '/www/node_modules/@siemens/ix-icons/dist/index.js');
@@ -98,10 +97,9 @@ export const regressionTest = testBase.extend({
         }));
     },
     mount: async ({ page }, use, testInfo) => {
-        var _a, _b, _c, _d;
         testInfo.componentTest = true;
-        const dataIxTheme = (_b = (_a = testInfo.project.metadata) === null || _a === void 0 ? void 0 : _a['data-ix-theme']) !== null && _b !== void 0 ? _b : 'classic';
-        const dataIxColorSchema = (_d = (_c = testInfo.project.metadata) === null || _c === void 0 ? void 0 : _c['data-ix-color-schema']) !== null && _d !== void 0 ? _d : 'dark';
+        const dataIxTheme = testInfo.project.metadata?.['data-ix-theme'] ?? 'classic';
+        const dataIxColorSchema = testInfo.project.metadata?.['data-ix-color-schema'] ?? 'dark';
         testInfo.annotations.push({
             type: `${dataIxTheme} ${dataIxColorSchema}`,
         });
@@ -109,4 +107,31 @@ export const regressionTest = testBase.extend({
         await use((selector, config) => mountComponent(page, selector, config));
     },
 });
+export const expect = baseExpect.extend({
+    async toHaveVisibleFocus(locator, activeDescendantElementLocator) {
+        let pass = true;
+        const errors = [];
+        try {
+            await baseExpect(locator).toHaveClass(/ix-focused/);
+        }
+        catch (e) {
+            pass = false;
+            errors.push(e.message);
+        }
+        if (activeDescendantElementLocator) {
+            try {
+                const activeDescendantId = await activeDescendantElementLocator.evaluate((el) => el.getAttribute('aria-activedescendant'));
+                await baseExpect(activeDescendantElementLocator).toHaveAttribute('aria-activedescendant', activeDescendantId);
+            }
+            catch (e) {
+                pass = false;
+                errors.push(e.message);
+            }
+        }
+        return {
+            pass,
+            message: () => errors.join('\n') || 'Expected element to have visible focus',
+        };
+    },
+});
 export const test = regressionTest;

package/dist/esm/{a11y-DAzBNVe7.js → a11y-C21npbUc.js}

@@ -77,11 +77,10 @@ const getFallbackLabelFromIconName = (iconName) => {
 const a11yHostAttributes = (hostElement, ignoreAttributes = []) => {
     const attributeObject = {};
     a11yAttributes.forEach((attr) => {
-        var _a;
         if (hostElement.hasAttribute(attr)) {
             const value = hostElement.getAttribute(attr);
             if (value !== null && !ignoreAttributes.includes(attr)) {
-                attributeObject[attr] = (_a = hostElement.getAttribute(attr)) !== null && _a !== void 0 ? _a : '';
+                attributeObject[attr] = hostElement.getAttribute(attr) ?? '';
                 hostElement.removeAttribute(attr);
             }
         }
@@ -141,5 +140,14 @@ 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.
+ */
+const forceTabIndex = (element, tabIndex) => {
+    if (element) {
+        element.tabIndex = tabIndex;
+    }
+};
 
-export { a11yBoolean as a, a11yHostAttributes as b, getFallbackLabelFromIconName as g };
+export { a11yBoolean as a, a11yHostAttributes as b, forceTabIndex as f, getFallbackLabelFromIconName as g };

package/dist/esm/animation-DNIQ2C1K.js

@@ -0,0 +1,79 @@
+class Animation {
+    static #FALLBACKS = {
+        short: 0,
+        default: 150,
+        medium: 300,
+        slow: 500,
+        xslow: 1000,
+    };
+    static #cache = null;
+    static parseTime(raw, fallback) {
+        const value = raw.trim();
+        if (value.length === 0)
+            return fallback;
+        const match = value.match(/^(-?\d*\.?\d+)(ms|s)?$/);
+        if (!match)
+            return fallback;
+        const [, amount, unit = 'ms'] = match;
+        const parsed = Number(amount);
+        if (!Number.isFinite(parsed))
+            return fallback;
+        return unit === 's' ? parsed * 1000 : parsed;
+    }
+    static ensureCache() {
+        if (this.#cache !== null)
+            return;
+        if (typeof window === 'undefined') {
+            // SSR only
+            this.#cache = { ...this.#FALLBACKS };
+            return;
+        }
+        const root = document.documentElement || document.body;
+        const styles = window.getComputedStyle(root);
+        const read = (varName, fallback) => {
+            const raw = styles.getPropertyValue(varName)?.trim();
+            if (!raw)
+                return fallback;
+            return this.parseTime(raw, fallback);
+        };
+        this.#cache = {
+            short: read('--theme-short-time', this.#FALLBACKS.short),
+            default: read('--theme-default-time', this.#FALLBACKS.default),
+            medium: read('--theme-medium-time', this.#FALLBACKS.medium),
+            slow: read('--theme-slow-time', this.#FALLBACKS.slow),
+            xslow: read('--theme-x-slow-time', this.#FALLBACKS.xslow),
+        };
+    }
+    static prefersReducedMotion() {
+        if (typeof window === 'undefined' || !window.matchMedia)
+            return false;
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+    static get shortTime() {
+        this.ensureCache();
+        const t = this.#cache.short;
+        return this.prefersReducedMotion() ? 0 : t;
+    }
+    static get defaultTime() {
+        this.ensureCache();
+        const t = this.#cache.default;
+        return this.prefersReducedMotion() ? 0 : t;
+    }
+    static get mediumTime() {
+        this.ensureCache();
+        const t = this.#cache.medium;
+        return this.prefersReducedMotion() ? 0 : t;
+    }
+    static get slowTime() {
+        this.ensureCache();
+        const t = this.#cache.slow;
+        return this.prefersReducedMotion() ? 0 : t;
+    }
+    static get xSlowTime() {
+        this.ensureCache();
+        const t = this.#cache.xslow;
+        return this.prefersReducedMotion() ? 0 : t;
+    }
+}
+
+export { Animation as A };

package/dist/esm/app-globals-DQuL1Twl.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };

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-DZdtpLxn.js}

@@ -1,4 +1,5 @@
-import { h } from './index-BEPo7U1W.js';
+import { h } from './index-EBgS4zhE.js';
+import { a as a11yBoolean } from './a11y-C21npbUc.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), disabled: props.disabled || props.loading, 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-DufFLJC-.js}

@@ -1,5 +1,5 @@
-import { h } from './index-BEPo7U1W.js';
-import { B as BaseButton } from './base-button-CV0w47z9.js';
+import { h } from './index-EBgS4zhE.js';
+import { B as BaseButton } from './base-button-DZdtpLxn.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-DqJSHc3A.js

@@ -0,0 +1,139 @@
+import { F as FOCUS_KEYS, I as IX_FOCUS_VISIBLE_ACTIVE, a as IX_FOCUS_VISIBLE } from './focus-utilities-6ZxKp7Jn.js';
+import { g as getComposedPath } from './shadow-dom-BClJdFQP.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();