@siemens/ix 5.1.1 → 5.2.1

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

@@ -52,25 +52,60 @@ export function checkFieldClasses(hostElement, includeChildren = false) {
         isWarning: classListContains(hostElement, 'ix-warning', includeChildren),
     };
 }
+/**
+ * Thrown when a form control’s native input is not available yet (or already gone).
+ */
+export class NativeInputNotFoundError extends Error {
+    constructor(message = 'Input element not found') {
+        super(message);
+        this.name = 'NativeInputNotFoundError';
+    }
+}
+function isMissingNativeInputError(error) {
+    return (error instanceof NativeInputNotFoundError ||
+        // Cross-bundle / duplicated class copies still carry the stable name.
+        (error instanceof Error && error.name === 'NativeInputNotFoundError'));
+}
 export function HookValidationLifecycle(options) {
     return (proto, methodName) => {
         let checkIfRequiredFunction;
         let classMutationObserver;
+        let checkTimeoutId = null;
         const { componentWillLoad, disconnectedCallback, connectedCallback } = proto;
         proto.connectedCallback = function () {
             const host = getElement(this);
+            if (checkTimeoutId != null) {
+                clearTimeout(checkTimeoutId);
+                checkTimeoutId = null;
+            }
             checkIfRequiredFunction = async () => {
                 const skipValidation = await shouldSuppressInternalValidation(host);
-                if (skipValidation) {
+                if (skipValidation || !host.isConnected) {
                     return;
                 }
                 if (!isIxInputFieldComponent(host)) {
                     return;
                 }
-                const validationElement = await host.getNativeInputElement?.();
+                let validationElement;
+                try {
+                    validationElement = await host.getNativeInputElement?.();
+                }
+                catch (error) {
+                    // Expected during connect/teardown when the native input is unset (e.g. ix-select).
+                    if (!isMissingNativeInputError(error)) {
+                        throw error;
+                    }
+                    validationElement = undefined;
+                }
+                if (!host.isConnected) {
+                    return;
+                }
                 if (host.hasValidValue && typeof host.hasValidValue === 'function') {
                     const hasValue = await host.hasValidValue();
                     const touched = await isTouched(host);
+                    if (!host.isConnected) {
+                        return;
+                    }
                     if (host.required) {
                         host.classList.toggle('ix-invalid--required', !hasValue && touched);
                     }
@@ -82,12 +117,18 @@ export function HookValidationLifecycle(options) {
                     typeof host.getValidityState === 'function') {
                     const validityState = await host.getValidityState();
                     const touched = await isTouched(host);
+                    if (!host.isConnected) {
+                        return;
+                    }
                     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 (!host.isConnected) {
+                            return;
+                        }
                         if (ariaHelperMessageElement) {
                             validationElement.setAttribute('aria-describedby', `${ariaHelperMessageElement.id}`);
                         }
@@ -107,7 +148,17 @@ export function HookValidationLifecycle(options) {
             host.addEventListener('checkedChange', checkIfRequiredFunction);
             host.addEventListener('valueChange', checkIfRequiredFunction);
             host.addEventListener('ixBlur', checkIfRequiredFunction);
-            setTimeout(checkIfRequiredFunction);
+            checkTimeoutId = setTimeout(() => {
+                checkTimeoutId = null;
+                if (checkIfRequiredFunction) {
+                    void checkIfRequiredFunction().catch((error) => {
+                        if (isMissingNativeInputError(error)) {
+                            return;
+                        }
+                        console.error(error);
+                    });
+                }
+            });
             return connectedCallback?.call(this);
         };
         proto.componentWillLoad = function () {
@@ -122,6 +173,10 @@ export function HookValidationLifecycle(options) {
         };
         proto.disconnectedCallback = function () {
             const host = getElement(this);
+            if (checkTimeoutId != null) {
+                clearTimeout(checkTimeoutId);
+                checkTimeoutId = null;
+            }
             if (host && classMutationObserver) {
                 classMutationObserver.destroy();
                 classMutationObserver = null;

package/dist/collection/components/utils/internal/mixins/accessibility/aria-attribute-observer.js

@@ -0,0 +1,106 @@
+/*
+ * 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 { a11yAttributes } from "./../../../a11y";
+const reportMutationError = (error) => {
+    if (typeof reportError === 'function') {
+        reportError(error);
+        return;
+    }
+    console.error(error);
+};
+// A MutationObserver can watch many direct targets and keeps only weak references
+// to them, so all IX hosts can share one observer without observing a whole subtree.
+const registrations = new WeakMap();
+const suppressedHosts = new WeakSet();
+let observer;
+let registrationCount = 0;
+const dispatchMutations = (mutations) => {
+    const changesByHandler = new Map();
+    mutations.forEach((mutation) => {
+        const hostElement = mutation.target;
+        if (suppressedHosts.has(hostElement)) {
+            return;
+        }
+        const registration = registrations.get(hostElement);
+        const attributeName = mutation.attributeName;
+        if (!registration || !attributeName) {
+            return;
+        }
+        let changedAttributes = changesByHandler.get(registration.handler);
+        if (!changedAttributes) {
+            changedAttributes = new Set();
+            changesByHandler.set(registration.handler, changedAttributes);
+        }
+        changedAttributes.add(attributeName);
+    });
+    changesByHandler.forEach((attributeNames, handler) => {
+        try {
+            handler(attributeNames);
+        }
+        catch (error) {
+            reportMutationError(error);
+        }
+    });
+};
+const getObserver = () => {
+    if (typeof MutationObserver === 'undefined') {
+        return undefined;
+    }
+    observer ??= new MutationObserver(dispatchMutations);
+    return observer;
+};
+export const observeAriaAttributes = (hostElement, handler) => {
+    const ariaObserver = getObserver();
+    if (!ariaObserver) {
+        return false;
+    }
+    if (!registrations.has(hostElement)) {
+        registrationCount++;
+    }
+    registrations.set(hostElement, { handler });
+    ariaObserver.observe(hostElement, {
+        attributeFilter: a11yAttributes,
+        attributes: true,
+    });
+    return true;
+};
+export const unobserveAriaAttributes = (hostElement) => {
+    if (!registrations.delete(hostElement)) {
+        return;
+    }
+    registrationCount--;
+    if (registrationCount === 0) {
+        observer?.disconnect();
+        observer = undefined;
+    }
+};
+export const runWithoutAriaAttributeObservation = (hostElement, callback) => {
+    const registration = registrations.get(hostElement);
+    if (!registration || !observer) {
+        return callback();
+    }
+    const activeObserver = observer;
+    dispatchMutations(activeObserver.takeRecords(), activeObserver);
+    suppressedHosts.add(hostElement);
+    try {
+        return callback();
+    }
+    finally {
+        const remainingMutations = activeObserver
+            .takeRecords()
+            .filter((mutation) => mutation.target !== hostElement);
+        suppressedHosts.delete(hostElement);
+        dispatchMutations(remainingMutations, activeObserver);
+    }
+};
+export const flushAriaAttributeMutations = () => {
+    if (observer) {
+        dispatchMutations(observer.takeRecords(), observer);
+    }
+};

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

@@ -58,7 +58,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -67,37 +67,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .step {
@@ -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);