@siemens/ix 5.2.0 → 5.2.1

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

@@ -1,190 +1,199 @@
-import { a11yHostAttributes, } from "./../../../a11y";
+import { a11yAttributes, a11yHostAttributes, } from "./../../../a11y";
+import { flushAriaAttributeMutations, observeAriaAttributes, runWithoutAriaAttributeObservation, unobserveAriaAttributes, } from "./aria-attribute-observer";
 export const InheritAriaAttributesMixin = (Base) => {
     class InheritAriaAttributesMixinCtor extends Base {
+        constructor() {
+            super();
+        }
         inheritAriaAttributes = {};
-        constructor(...args) {
-            super(...args);
+        #ariaObserverInitialized = false;
+        #ariaObservationActive = false;
+        #ariaInitializationPending = false;
+        #disconnected = false;
+        #ariaAttributesBeforeDisconnect;
+        #ariaAttributesChangedWhileDisconnected = new Set();
+        #ariaAttributeRemovalPatched = false;
+        #readingAriaAttributes = false;
+        #handleAriaMutations(changedAttributes) {
+            const hostElement = this.#getHostElement();
+            const ignoredAttributes = this.getIgnoredAriaAttributes();
+            let updatedAttributes = this.inheritAriaAttributes;
+            changedAttributes.forEach((attributeName) => {
+                if (ignoredAttributes.includes(attributeName)) {
+                    return;
+                }
+                const newValue = hostElement.getAttribute(attributeName);
+                const currentValue = updatedAttributes[attributeName] ?? null;
+                if (newValue === currentValue) {
+                    return;
+                }
+                if (updatedAttributes === this.inheritAriaAttributes) {
+                    updatedAttributes = { ...updatedAttributes };
+                }
+                if (newValue === null) {
+                    delete updatedAttributes[attributeName];
+                }
+                else {
+                    updatedAttributes[attributeName] = newValue;
+                }
+            });
+            if (updatedAttributes !== this.inheritAriaAttributes) {
+                this.inheritAriaAttributes = updatedAttributes;
+            }
         }
         getIgnoredAriaAttributes() {
             return [];
         }
+        readAriaAttributesFromHost() {
+            const hostElement = this.#getHostElement();
+            return runWithoutAriaAttributeObservation(hostElement, () => {
+                this.#readingAriaAttributes = true;
+                try {
+                    return a11yHostAttributes(hostElement, this.getIgnoredAriaAttributes());
+                }
+                finally {
+                    this.#readingAriaAttributes = false;
+                }
+            });
+        }
+        #getHostElement() {
+            if (!this.hostElement) {
+                throw new Error('Host element is not defined. Make sure to apply the InheritAriaAttributesMixin to a Stencil component.');
+            }
+            return this.hostElement;
+        }
+        #getAriaAttributesFromHost() {
+            const hostElement = this.#getHostElement();
+            const attributes = new Map();
+            a11yAttributes.forEach((attributeName) => {
+                const value = hostElement.getAttribute(attributeName);
+                if (value !== null) {
+                    attributes.set(attributeName, value);
+                }
+            });
+            return attributes;
+        }
+        #patchAriaAttributeRemoval() {
+            if (this.#ariaAttributeRemovalPatched ||
+                typeof MutationObserver === 'undefined') {
+                return;
+            }
+            const hostElement = this.#getHostElement();
+            const removeAttribute = hostElement.removeAttribute.bind(hostElement);
+            // ARIA attributes are moved from the host to the internal element during
+            // initialization. When Angular later calls removeAttribute(), the host
+            // attribute is already absent, so no MutationObserver record is created.
+            // Intercept the call to also clear the forwarded internal attribute.
+            hostElement.removeAttribute = (attributeName) => {
+                removeAttribute(attributeName);
+                if (a11yAttributes.includes(attributeName)) {
+                    if (this.#readingAriaAttributes) {
+                        return;
+                    }
+                    if (!this.#ariaObservationActive) {
+                        this.#ariaAttributesChangedWhileDisconnected.add(attributeName);
+                    }
+                    this.#updateInheritedAriaAttribute(null, attributeName);
+                }
+            };
+            this.#ariaAttributeRemovalPatched = true;
+        }
+        #observeAriaAttributes() {
+            this.#ariaObservationActive = observeAriaAttributes(this.#getHostElement(), (attributeNames) => this.#handleAriaMutations(attributeNames));
+        }
+        connectedCallback() {
+            if (super.connectedCallback) {
+                super.connectedCallback();
+            }
+            this.#disconnected = false;
+            if (this.#ariaInitializationPending && !this.#ariaObserverInitialized) {
+                this.#ariaInitializationPending = false;
+                this.#initializeAriaAttributes();
+                return;
+            }
+            if (this.#ariaObserverInitialized) {
+                const hostElement = this.#getHostElement();
+                this.#observeAriaAttributes();
+                if (this.#ariaAttributesBeforeDisconnect) {
+                    const inheritedAttributes = this.readAriaAttributesFromHost();
+                    a11yAttributes.forEach((attributeName) => {
+                        const oldValue = this.#ariaAttributesBeforeDisconnect?.get(attributeName) ?? null;
+                        const newValue = inheritedAttributes[attributeName] ??
+                            hostElement.getAttribute(attributeName);
+                        if (newValue !== oldValue ||
+                            this.#ariaAttributesChangedWhileDisconnected.has(attributeName)) {
+                            this.#updateInheritedAriaAttribute(newValue ?? null, attributeName);
+                        }
+                    });
+                }
+            }
+            this.#ariaAttributesBeforeDisconnect = undefined;
+            this.#ariaAttributesChangedWhileDisconnected.clear();
+        }
         componentWillLoad() {
-            this.inheritAriaAttributes = a11yHostAttributes(this.hostElement, this.getIgnoredAriaAttributes ? this.getIgnoredAriaAttributes() : []);
+            if (super.componentWillLoad) {
+                const baseLoad = super.componentWillLoad();
+                if (baseLoad) {
+                    return baseLoad.then(() => this.#initializeAriaAttributesIfConnected());
+                }
+            }
+            this.#initializeAriaAttributesIfConnected();
+        }
+        #initializeAriaAttributesIfConnected() {
+            if (this.#disconnected) {
+                this.#ariaInitializationPending = true;
+                return;
+            }
+            this.#initializeAriaAttributes();
+        }
+        #initializeAriaAttributes() {
+            this.inheritAriaAttributes = this.readAriaAttributesFromHost();
+            this.#patchAriaAttributeRemoval();
+            this.#ariaObserverInitialized = true;
+            this.#observeAriaAttributes();
         }
-        ariaAttributeChanged(newValue, _, propName) {
+        #updateInheritedAriaAttribute(newValue, propName) {
             const ignoredAttributes = this.getIgnoredAriaAttributes();
             if (ignoredAttributes.includes(propName)) {
                 return;
             }
-            const updateAttribute = {
-                [propName]: newValue,
-            };
-            this.inheritAriaAttributes = {
+            const currentValue = this.inheritAriaAttributes[propName] ?? null;
+            if (newValue === currentValue) {
+                return;
+            }
+            const updatedAttributes = {
                 ...this.inheritAriaAttributes,
-                ...updateAttribute,
             };
+            if (newValue === null) {
+                delete updatedAttributes[propName];
+            }
+            else {
+                updatedAttributes[propName] = newValue;
+            }
+            this.inheritAriaAttributes = updatedAttributes;
+        }
+        disconnectedCallback() {
+            this.#disconnected = true;
+            this.#ariaAttributesChangedWhileDisconnected.clear();
+            if (this.#ariaObserverInitialized) {
+                flushAriaAttributeMutations();
+                this.#ariaAttributesBeforeDisconnect =
+                    this.#getAriaAttributesFromHost();
+                unobserveAriaAttributes(this.#getHostElement());
+                this.#ariaObservationActive = false;
+            }
+            else {
+                this.#ariaAttributesBeforeDisconnect = undefined;
+            }
+            if (super.disconnectedCallback) {
+                super.disconnectedCallback();
+            }
         }
         static get states() {
             return {
                 "inheritAriaAttributes": {}
             };
         }
-        static get watchers() {
-            return [{
-                    "propName": "role",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-activedescendant",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-atomic",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-autocomplete",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-braillelabel",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-brailleroledescription",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-busy",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-checked",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-colcount",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-colindex",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-colindextext",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-colspan",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-controls",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-current",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-describedby",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-description",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-details",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-disabled",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-errormessage",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-expanded",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-flowto",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-haspopup",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-hidden",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-invalid",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-keyshortcuts",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-label",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-labelledby",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-level",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-live",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-multiline",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-multiselectable",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-orientation",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-owns",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-placeholder",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-posinset",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-pressed",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-readonly",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-relevant",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-required",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-roledescription",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-rowcount",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-rowindex",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-rowindextext",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-rowspan",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-selected",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-setsize",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-sort",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-valuemax",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-valuemin",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-valuenow",
-                    "methodName": "ariaAttributeChanged"
-                }, {
-                    "propName": "aria-valuetext",
-                    "methodName": "ariaAttributeChanged"
-                }];
-        }
     }
     return InheritAriaAttributesMixinCtor;
 };

package/dist/collection/components/utils/lazy-list/lazy.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
  *

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

@@ -202,8 +202,8 @@
   background-color: var(--theme-workflow-step--background--active);
 }
 :host .step:focus-visible {
-  outline: 1px solid var(--focus--border-color);
-  border-radius: 0;
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
 }
 :host .step.selected {
   background-color: var(--theme-workflow-step--background--selected);

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

@@ -95,6 +95,12 @@ export class WorkflowStep {
             this.selectedChanged.emit(this.hostElement);
         }
     }
+    onKeyDown(event) {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.onStepClick();
+        }
+    }
     getIconAriaLabel() {
         switch (this.iconName) {
             case iconCircle:
@@ -116,19 +122,19 @@ 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: '06871acf9245821241c320810bb5febd368140ac', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, h("div", { key: '94aee385c1690f15432f2bfc27b55bc0edfaf7d9', tabIndex: 0, class: {
+        const icons = !this.customIconSlot ? (h(Fragment, null, h("ix-icon", { color: "color-1", name: this.status === 'warning' ? iconTriangleFilled : iconCircleFilled, class: "absolute", size: "24", "aria-hidden": "true" }), h("ix-icon", { color: this.iconColor, name: this.iconName, class: "absolute", size: "24", "aria-label": this.getIconAriaLabel() }))) : null;
+        return (h(Host, { key: '0b31b31bfaaff7cdaf2a3b352dff5a4895d6a8f8', class: { 'host-vertical': this.vertical } }, h("div", { key: '60fc771cc2c3025281ae93b582f768ed00e70c1d', tabIndex: this.disabled || !this.clickable ? -1 : 0, role: this.clickable ? 'button' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.selected ? 'step' : undefined, onClick: () => this.onStepClick(), onKeyDown: (e) => this.onKeyDown(e), class: {
                 step: true,
                 selected: this.selected,
                 vertical: this.vertical,
                 disabled: this.disabled,
                 clickable: this.clickable && !this.disabled,
-            } }, h("div", { key: '74a094732ab9db8f574ede36820ab6e1d34dad7d', class: "wrapper" }, h("div", { key: '681e07da1b3047d5db1b9185f094d905e08173f3', class: {
+            } }, h("div", { key: '6187e161fa1da2b660acdd1ca16f223803b32f51', class: "wrapper" }, h("div", { key: '918d1167813489e8caae3759bb104d91963d96f6', class: {
                 line: true,
                 selected: this.selected,
                 [this.status]: true,
                 [this.position]: true,
-            } }), h("div", { key: '02d69f1f4f882dfb00eba46ae1702d58eb881c44', class: "iconWrapper" }, icons, h("slot", { key: 'e6a1db6f80d2eddc1a805f20b69c1055de884240', name: "custom-icon" }))), h("div", { key: 'e1f7ae29a343cc37370200d6597597c044f10d1e', class: "text" }, h("slot", { key: '26cad775e230ebcebc042dbbefdb24a5fc55db34' })))));
+            } }), h("div", { key: '11df46fc6530a9959a675d0e66b450b2b3beff23', class: "iconWrapper" }, icons, h("slot", { key: '8e17d1c02e11aa0da20fe2301a4b06394833a89d', name: "custom-icon" }))), h("div", { key: 'a195bbb624575f3c056492f0b3afadbd6f0b028d', class: "text" }, h("slot", { key: 'fb99dccd27941723266a0f4c7ecef584cba91ef2' })))));
     }
     static get is() { return "ix-workflow-step"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,6 +121,9 @@ export const expect = baseExpect.extend({
         if (activeDescendantElementLocator) {
             try {
                 const activeDescendantId = await activeDescendantElementLocator.evaluate((el) => el.getAttribute('aria-activedescendant'));
+                if (activeDescendantId === null) {
+                    throw new Error('Active descendant element does not have an aria-activedescendant attribute.');
+                }
                 await baseExpect(activeDescendantElementLocator).toHaveAttribute('aria-activedescendant', activeDescendantId);
             }
             catch (e) {

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

@@ -150,4 +150,4 @@ const forceTabIndex = (element, tabIndex) => {
     }
 };
 
-export { a11yBoolean as a, a11yHostAttributes as b, forceTabIndex as f, getFallbackLabelFromIconName as g };
+export { a11yBoolean as a, a11yHostAttributes as b, a11yAttributes as c, forceTabIndex as f, getFallbackLabelFromIconName as g };

package/dist/esm/{animation-DNIQ2C1K.js → animation-BqeSHO6C.js}

@@ -22,11 +22,11 @@ class Animation {
     }
     static ensureCache() {
         if (this.#cache !== null)
-            return;
+            return this.#cache;
         if (typeof window === 'undefined') {
             // SSR only
             this.#cache = { ...this.#FALLBACKS };
-            return;
+            return this.#cache;
         }
         const root = document.documentElement || document.body;
         const styles = window.getComputedStyle(root);
@@ -43,6 +43,7 @@ class Animation {
             slow: read('--theme-slow-time', this.#FALLBACKS.slow),
             xslow: read('--theme-x-slow-time', this.#FALLBACKS.xslow),
         };
+        return this.#cache;
     }
     static prefersReducedMotion() {
         if (typeof window === 'undefined' || !window.matchMedia)
@@ -50,28 +51,23 @@ class Animation {
         return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     }
     static get shortTime() {
-        this.ensureCache();
-        const t = this.#cache.short;
+        const t = this.ensureCache().short;
         return this.prefersReducedMotion() ? 0 : t;
     }
     static get defaultTime() {
-        this.ensureCache();
-        const t = this.#cache.default;
+        const t = this.ensureCache().default;
         return this.prefersReducedMotion() ? 0 : t;
     }
     static get mediumTime() {
-        this.ensureCache();
-        const t = this.#cache.medium;
+        const t = this.ensureCache().medium;
         return this.prefersReducedMotion() ? 0 : t;
     }
     static get slowTime() {
-        this.ensureCache();
-        const t = this.#cache.slow;
+        const t = this.ensureCache().slow;
         return this.prefersReducedMotion() ? 0 : t;
     }
     static get xSlowTime() {
-        this.ensureCache();
-        const t = this.#cache.xslow;
+        const t = this.ensureCache().xslow;
         return this.prefersReducedMotion() ? 0 : t;
     }
 }

package/dist/esm/{base-button-DZdtpLxn.js → base-button-Oanl-VqF.js}

@@ -1,5 +1,5 @@
 import { h } from './index-EBgS4zhE.js';
-import { a as a11yBoolean } from './a11y-C21npbUc.js';
+import { a as a11yBoolean } from './a11y-DD206pTM.js';
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG

package/dist/esm/{base-icon-button-DufFLJC-.js → base-icon-button-CxmfMOOd.js}

@@ -1,5 +1,5 @@
 import { h } from './index-EBgS4zhE.js';
-import { B as BaseButton } from './base-button-DZdtpLxn.js';
+import { B as BaseButton } from './base-button-Oanl-VqF.js';
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG

package/dist/esm/{focus-visible.mixin-CaRK3Ex_.js → focus-visible.mixin-DNYMa4dY.js}

@@ -1,5 +1,5 @@
 import { r as registerInstance } from './index-EBgS4zhE.js';
-import { a as a11yBoolean } from './a11y-C21npbUc.js';
+import { a as a11yBoolean } from './a11y-DD206pTM.js';
 
 const FocusVisibleMixin = (Base) => {
     const FocusVisibleMixinCtor = class extends Base {

package/dist/esm/{helper-text-util-sQKO6RPJ.js → helper-text-util-BJ-ZMW2J.js}

@@ -1,6 +1,6 @@
 import { h } from './index-EBgS4zhE.js';
 import { b as iconError, c as iconWarning, d as iconInfo, a as iconSuccess } from './index-BeX6RWvV.js';
-import { a as a11yBoolean } from './a11y-C21npbUc.js';
+import { a as a11yBoolean } from './a11y-DD206pTM.js';
 
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG

package/dist/esm/index.js

@@ -5,7 +5,7 @@ export { d as defaultRefreshTreeOptions, r as renderDefaultItem } from './tree.t
 export { U as UploadFileState } from './upload-file-state-BGzrnl_l.js';
 import { c as createDependencyFunction, g as getCoreDelegate } from './modal-DaGSr1j4.js';
 export { b as closeModal, d as dismissModal, r as registerFrameworkDelegate, a as resolveDelegate, s as showModal } from './modal-DaGSr1j4.js';
-import { A as Animation } from './animation-DNIQ2C1K.js';
+import { A as Animation } from './animation-BqeSHO6C.js';
 import { i as iconQuestion, a as iconSuccess, b as iconError, c as iconWarning, d as iconInfo } from './index-BeX6RWvV.js';
 import { T as TypedEvent } from './typed-event-CWshStHZ.js';
 export { g as getCurrentSystemAppearance, t as themeSwitcher } from './theme-switcher-CRVG13AN.js';