@siemens/ix 5.2.0 → 5.2.1

package/dist/collection/components/pagination/pagination.css

@@ -593,6 +593,12 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   color: var(--theme-btn-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-primary--border-color--active);
+  background-color: var(--theme-btn-primary--background--active);
+  color: var(--theme-btn-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -655,6 +661,12 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   color: var(--theme-btn-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-secondary--border-color--active);
+  background-color: var(--theme-btn-secondary--background--active);
+  color: var(--theme-btn-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -717,6 +729,12 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   color: var(--theme-btn-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-tertiary--border-color--active);
+  background-color: var(--theme-btn-tertiary--background--active);
+  color: var(--theme-btn-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -779,6 +797,12 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   color: var(--theme-btn-subtle-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-primary--border-color--active);
+  background-color: var(--theme-btn-subtle-primary--background--active);
+  color: var(--theme-btn-subtle-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -841,6 +865,12 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   color: var(--theme-btn-subtle-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-secondary--border-color--active);
+  background-color: var(--theme-btn-subtle-secondary--background--active);
+  color: var(--theme-btn-subtle-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -903,6 +933,12 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   color: var(--theme-btn-subtle-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-tertiary--border-color--active);
+  background-color: var(--theme-btn-subtle-tertiary--background--active);
+  color: var(--theme-btn-subtle-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -965,6 +1001,12 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   color: var(--theme-btn-danger-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-primary--border-color--active);
+  background-color: var(--theme-btn-danger-primary--background--active);
+  color: var(--theme-btn-danger-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -1027,6 +1069,12 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   color: var(--theme-btn-danger-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-secondary--border-color--active);
+  background-color: var(--theme-btn-danger-secondary--background--active);
+  color: var(--theme-btn-danger-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -1089,6 +1137,12 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   color: var(--theme-btn-danger-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-tertiary--border-color--active);
+  background-color: var(--theme-btn-danger-tertiary--background--active);
+  color: var(--theme-btn-danger-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }

package/dist/collection/components/popover/popover.js

@@ -187,6 +187,7 @@ export class Popover extends Mixin(...DefaultMixins, InheritAriaAttributesMixin,
         }
     }
     connectedCallback() {
+        super.connectedCallback();
         if (this.hasDisconnected) {
             popoverController.connected(this);
             void this.initializePopover();
@@ -208,6 +209,7 @@ export class Popover extends Mixin(...DefaultMixins, InheritAriaAttributesMixin,
         }
     }
     disconnectedCallback() {
+        super.disconnectedCallback();
         this.hasDisconnected = true;
         this.clearHideTimeout();
         this.disposeAutoUpdate?.();
@@ -670,7 +672,7 @@ export class Popover extends Mixin(...DefaultMixins, InheritAriaAttributesMixin,
         }
     }
     render() {
-        return (h(Host, { key: 'd3950e6a33913834d9ac23937918ed2a119c339e', class: { visible: this.show }, "data-ix-popover": this.popoverPanelId }, h("dialog", { key: '5c2c659d9fbd6c8c6124e48ac23d0563a6a349dd', ref: this.dialogRef, id: this.popoverPanelId, class: "dialog", popover: "manual", inert: !this.show, ...this.inheritAriaAttributes, role: this.inheritAriaAttributes['role'] ?? 'dialog', onMouseEnter: () => this.onDialogMouseEnter(), onMouseLeave: () => this.onDialogMouseLeave() }, h("div", { key: '020ab467f0f869f890e99dfae2eb8882ec6b313c', class: "popover-container" }, h("div", { key: '6d765907691e15b9f37782c0b4c64e31bae5cf22', class: "popover-body" }, h("slot", { key: 'e1f14fa9be44cc63f15dbb3d3c8e75c0019646b0' })), this.hasSpike ? h("div", { class: "spike" }) : null))));
+        return (h(Host, { key: '800528be7326703a5fca61e0a03e90b3e6231905', class: { visible: this.show }, "data-ix-popover": this.popoverPanelId }, h("dialog", { key: 'a7b501ed22173801f1820b2ae1e47edd50d3a596', ref: this.dialogRef, id: this.popoverPanelId, class: "dialog", popover: "manual", inert: !this.show, ...this.inheritAriaAttributes, role: this.inheritAriaAttributes['role'] ?? 'dialog', onMouseEnter: () => this.onDialogMouseEnter(), onMouseLeave: () => this.onDialogMouseLeave() }, h("div", { key: '804589dd5243897bd9965abee685fcf0608b3398', class: "popover-container" }, h("div", { key: '0607a218729bd1715ee8eccf06f83cdd1938db8e', class: "popover-body" }, h("slot", { key: '481b1891c9a092597f2b483d3e8237821769d583' })), this.hasSpike ? h("div", { class: "spike" }) : null))));
     }
     static get is() { return "ix-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover/test/popover.page.js

@@ -257,8 +257,9 @@ export async function expectPlacement(page, triggerSelector, popover, placement)
     await expect(async () => {
         const triggerBox = await page.locator(triggerSelector).boundingBox();
         const dialogBox = await getDialog(popover).boundingBox();
-        expect(triggerBox).not.toBeNull();
-        expect(dialogBox).not.toBeNull();
+        if (!triggerBox || !dialogBox) {
+            throw new Error('Expected trigger and popover dialog bounding boxes to exist');
+        }
         const tolerance = 24;
         if (placement === 'bottom') {
             expect(dialogBox.y).toBeGreaterThanOrEqual(triggerBox.y + triggerBox.height - tolerance);

package/dist/collection/components/select/select.js

@@ -956,7 +956,7 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
     }
     updateAriaProxyListbox() {
         const ariaActiveDescendantHelper = this.hostElement.shadowRoot?.getElementById(`${this.hostId}-proxy-listbox`);
-        if (this.focusableItems.length === 0) {
+        if (this.focusableItems.length === 0 || !ariaActiveDescendantHelper) {
             return;
         }
         updateFocusProxyList(ariaActiveDescendantHelper, this.focusableItems, (item, proxyElement) => {
@@ -987,18 +987,18 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
         });
     }
     render() {
-        return (h(Host, { key: '12f066e4fcda30b4df4420847adfed06fa6eb51e', id: this.getHostElementId(), class: {
+        return (h(Host, { key: 'a2ce9b8b0ae76c6d88cb59f34a6846370f835484', id: this.getHostElementId(), class: {
                 readonly: this.readonly,
                 disabled: this.disabled,
                 'show-focus-outline': this.hasInputFocus && !this.dropdownItemsVisualFocused,
-            }, tabIndex: this.disabled ? -1 : 0 }, h("ix-field-wrapper", { key: 'ef30284c6d2bfe8c67bd61222aa4908b4533f6eb', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'c28253243a825e85ef9ff8cc863ce407191f462d', class: {
+            }, tabIndex: this.disabled ? -1 : 0 }, h("ix-field-wrapper", { key: 'a9ffed67c87f60a01cbc6f8524369d4b0db0a445', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '7692ac7e4522d7629e810090609fd870fa670bd7', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
             }, ref: (ref) => {
                 this.dropdownAnchorRef(ref);
                 this.dropdownWrapperRef(ref);
-            } }, h("div", { key: '841ae12c0dfbc999374644a4ec777f3de2c8e414', class: "input-container" }, h("div", { key: '46e892e8f13331dfb840f3f789dff9e0e94f7bf3', class: "chips", ref: this.chipsContainerRef }, this.isMultipleMode && this.renderMultipleModeChips(), h("div", { key: '3bf138f72a341dba37b522697ba357d8d735f0e2', class: "trigger" }, h("input", { key: '7630af0620fe089e9289794340a5a9a3571d877a', id: `${this.hostId}-input`, role: "combobox", "aria-controls": `${this.hostId}-proxy-listbox`, "aria-expanded": a11yBoolean(this.dropdownShow), "aria-autocomplete": "list", "aria-disabled": a11yBoolean(this.disabled), autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
+            } }, h("div", { key: '9ed9e05581b8079cb2c17c0d2ccc099af151b2d5', class: "input-container" }, h("div", { key: '66e7a4593c6e895e9b94704488fcac9531f6054a', class: "chips", ref: this.chipsContainerRef }, this.isMultipleMode && this.renderMultipleModeChips(), h("div", { key: 'c8a50e9f809602f22ebe950d26519e037c546068', class: "trigger" }, h("input", { key: 'beda6c6b5a4479a221a600e53c56842f0c2183ed', id: `${this.hostId}-input`, role: "combobox", "aria-controls": `${this.hostId}-proxy-listbox`, "aria-expanded": a11yBoolean(this.dropdownShow), "aria-autocomplete": "list", "aria-disabled": a11yBoolean(this.disabled), autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
                 'allow-clear': this.allowClear && !!this.selectedLabels?.length,
             }, placeholder: this.placeholderValue(), value: this.inputValue ?? '', ref: (ref) => {
                 this.inputElement = ref;
@@ -1023,7 +1023,7 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
                 element.ariaHidden = 'true';
             }, "data-select-dropdown": true, key: "dropdown", class: { 'dropdown-visible': this.dropdownShow }, icon: this.dropdownShow
                 ? iconChevronUpSmall
-                : iconChevronDownSmall, variant: "subtle-tertiary" }))))))), h("ix-dropdown", { key: '98815c0cc3ab87dea8cbba41b0285eef62ae3e50', id: `${this.hostId}-listbox`, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'], keyboardItemTriggerKeys: ['Enter'], disableFocusTrap: true, focusHost: this.hostElement, ref: this.dropdownRef, show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', hidden: this.disabled || this.readonly, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChange: (event) => {
+                : iconChevronDownSmall, variant: "subtle-tertiary" }))))))), h("ix-dropdown", { key: 'd51a5df17402acb7aa4181b2a986425868619720', id: `${this.hostId}-listbox`, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'], keyboardItemTriggerKeys: ['Enter'], disableFocusTrap: true, focusHost: this.hostElement, ref: this.dropdownRef, show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', hidden: this.disabled || this.readonly, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChange: (event) => {
                 if ((this.disabled || this.readonly) && event.detail) {
                     event.preventDefault();
                 }
@@ -1062,16 +1062,16 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
                 if (this.isSingleMode) {
                     this.dropdownShow = false;
                 }
-            } }, h("div", { key: '99bce854b460b54621001ae07fc9f36d10684df8', "aria-hidden": "true", class: {
+            } }, h("div", { key: '2d84de2ab363ca2e8148f63b482d5814fe2bcf5f', "aria-hidden": "true", class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: '49916fd0b14b1ff8a0b8f00cf2133c6f08c94a80', onSlotchange: () => {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: 'a2b0df2eaf8d74a7229f5564789aec20672ee038', onSlotchange: () => {
                 this.updateSelection();
-            } }), h(FocusProxy, { key: 'f09bdadcc1c886ef78299322f3318eaf2ca0ccd2', hostId: this.hostId, otherProps: {
+            } }), h(FocusProxy, { key: '51d97f6e697f9bfc591089bbd431a542988b80e6', hostId: this.hostId, otherProps: {
                 'aria-hidden': a11yBoolean(!this.dropdownShow),
                 'aria-multiselectable': a11yBoolean(this.isMultipleMode),
                 hidden: this.disabled || this.readonly,
-            } }), this.isDropdownEmpty && !this.editable && (h("div", { key: '70c18c30db4dc6af1c84b6a4a81fbb133cf02a1b', class: "select-list-header" }, this.i18nNoMatches))), this.isMultipleMode &&
+            } }), this.isDropdownEmpty && !this.editable && (h("div", { key: '7315bb1ce002a82d9d99c77a60b711f7430bb127', class: "select-list-header" }, this.i18nNoMatches))), this.isMultipleMode &&
             !this.shouldDisplayAllChip() &&
             this.hiddenChipValues.length > 0 &&
             this.renderOverflowDropdown()));

package/dist/collection/components/tabs/tabs.js

@@ -22,6 +22,9 @@ export class Tabs extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
         super();
     }
     hostElement;
+    getIgnoredAriaAttributes() {
+        return ['role'];
+    }
     /**
      * Set tab items to small size
      */
@@ -96,12 +99,14 @@ export class Tabs extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
         this.onComponentResize();
     }
     componentWillLoad() {
+        super.componentWillLoad();
         this.onComponentChildrenChange();
         if (this.activeTabKey) {
             this.setTabActive(this.activeTabKey);
         }
     }
     disconnectedCallback() {
+        super.disconnectedCallback();
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
         }
@@ -230,19 +235,19 @@ export class Tabs extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
         }
     }
     render() {
-        return (h(Host, { key: '59be7687531f1e2c2196232dbe2ae5a874481b3a', onTabClick: (event) => this.onTabClick(event), class: {
+        return (h(Host, { key: '5554f09b7834c47e4c1890100ed750b15d6858d8', onTabClick: (event) => this.onTabClick(event), class: {
                 small: this.small,
-            } }, h("div", { key: '55697ae33bb24e020417996ef311fe1863e87047', ref: this.tabsContainerRef, class: {
+            } }, h("div", { key: 'b076db8284d73f8659cdf2932594133c655d695d', ref: this.tabsContainerRef, class: {
                 'tabs-container': true,
                 top: this.placement === 'top',
                 bottom: this.placement === 'bottom',
-            } }, h("div", { key: '0e1296872121e4951b16df684877246fa21f6e0f', class: {
+            } }, h("div", { key: '73fa1a3e4ad9b30b6a8a47f8a74a7b44267ae328', class: {
                 'overflow-shadow-container': true,
                 'overflow-shadow': this.isTabsOverflow,
-            } }, h("div", { key: 'afd9c8c5173ac2030476892b0dd79bcccef46f57', role: "tablist", ...this.inheritAriaAttributes, ref: this.tabsRef, class: {
+            } }, h("div", { key: '2defca0131e7c714e619f70265d5775d8aebf553', role: "tablist", ...this.inheritAriaAttributes, ref: this.tabsRef, class: {
                 tabs: true,
                 'tabs-stretched': this.layout === 'stretched',
-            }, tabIndex: this.isTabsOverflow ? 0 : -1, onKeyDown: (event) => this.onTabsNavigate(event) }, h("slot", { key: '73ab7f836156f9eb8e32ef0c0ce1f153e32e2936' }))), this.isTabsOverflow && this.layout !== 'stretched' && (h("ix-dropdown-button", { key: 'cae99e1f6e20e6004d853aff98af0032e53730f3', ariaLabel: this.ariaLabelMoreTabs, icon: iconMoreMenu, class: {
+            }, tabIndex: this.isTabsOverflow ? 0 : -1, onKeyDown: (event) => this.onTabsNavigate(event) }, h("slot", { key: '3684ddc5023e0553ab0175150692256fc3109006' }))), this.isTabsOverflow && this.layout !== 'stretched' && (h("ix-dropdown-button", { key: '6827cbb9086793efd0f496f8ba81f81eba5266e9', ariaLabel: this.ariaLabelMoreTabs, icon: iconMoreMenu, class: {
                 'tabs-context-menu': true,
             }, variant: "subtle-tertiary" }, this.overflowMenuItems.map((item) => (h("ix-dropdown-item", { key: item.tabKey, checked: item.tabKey === this.activeTabKey, icon: item.icon, label: item.label, disabled: item.disabled, onClick: () => (this.activeTabKey = item.tabKey) }))))))));
     }

package/dist/collection/components/time-picker/test/expect-defined.js

@@ -0,0 +1,13 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ */
+import { expect } from "vitest";
+export function expectDefined(value) {
+    expect(value).toBeDefined();
+    if (value === null || value === undefined) {
+        throw new Error('Expected value to be defined');
+    }
+    return value;
+}

package/dist/collection/components/time-picker/time-picker.js

@@ -846,7 +846,7 @@ export class TimePicker extends Mixin(...DefaultMixins) {
     }
     render() {
         const { bounds } = this.getUnitSelectionContext();
-        return (h(Host, { key: '26fc55b40e07bde5fff6a21502925a88aa1eaf14' }, h("ix-date-time-card", { key: 'e6d72d2e2762ea0a67e69fcae8d89a49fd6bc6ec', embedded: this.embedded, timePickerAppearance: true, corners: this.corners, hasFooter: !this.dateTimePickerAppearance, hideHeader: this.hideHeader }, h("div", { key: 'de11595ccaeef7d0372d6af2c3e72ded18ed03d9', class: "header", slot: "header" }, h("ix-typography", { key: 'b001917ac3090679081c49852b2610adc381403f', format: "body" }, this.i18nHeader)), h("div", { key: '9bf75682fe81bf9a5c8bc668a533083d41776690', class: "clock" }, this.timePickerDescriptors.map((descriptor, index) => {
+        return (h(Host, { key: '843508f1f761b09aa9f804d8508f073fc4e456c2' }, h("ix-date-time-card", { key: '5bd462965737df20d1bfaafb6fe909f9072e172f', embedded: this.embedded, timePickerAppearance: true, corners: this.corners, hasFooter: !this.dateTimePickerAppearance, hideHeader: this.hideHeader }, h("div", { key: '0a4753c97c668bbea0bf08fbc6ede9be9c7fec00', class: "header", slot: "header" }, h("ix-typography", { key: 'f16526b69e956e416f7cb71192ce59f8cacf757c', format: "body" }, this.i18nHeader)), h("div", { key: '18c828b4355fd21ad48bf0fccc485437eb99bcec', class: "clock" }, this.timePickerDescriptors.map((descriptor, index) => {
             return (h("div", { class: "flex" }, h("div", { class: { columns: true, hidden: descriptor.hidden }, hidden: descriptor.hidden }, h("div", { class: "column-header", title: descriptor.header }, descriptor.header), h("div", { role: "listbox", "aria-label": descriptor.header, "data-element-list-id": descriptor.unit, class: "element-list", tabindex: -1 }, descriptor.numberArray.map((number) => {
                 const cellTabIndex = this.getUnitCellTabIndex(descriptor.unit, number);
                 const disabled = !this.canSelectUnitValue(descriptor.unit, number, bounds, this.buildCandidateBaseBeforeUnit(descriptor.unit));
@@ -862,16 +862,16 @@ export class TimePicker extends Mixin(...DefaultMixins) {
                     'column-separator': true,
                     hidden: descriptor.hidden,
                 } }, this.getColumnSeparator(index)))));
-        }), this.timeRef && (h("div", { key: '7d7a125d05231b0dc38d168308210ea6cd0aa5c9', class: "flex" }, h("div", { key: 'b3a8870552cbb4b665f63413a97bd5c4a82b1335', class: "column-separator" }), h("div", { key: '33e8cc862740c6348b7056acf33d62636136b4b4', class: "columns" }, h("div", { key: 'eb8a24da30e71e94d1a10528a2bc2e4e04529680', class: "column-header", title: "AM/PM" }), h("div", { key: '54ab57b53a21734900b856f6a98f59f8ed7ca789', role: "listbox", "aria-label": "AM/PM", class: "element-list", tabindex: -1 }, h("button", { key: '7dfd20d6f16bc1f5c2ed9c2b72589289b34b7207', role: "option", "aria-selected": this.timeRef === 'AM' ? 'true' : 'false', "data-am-pm-id": "AM", class: {
+        }), this.timeRef && (h("div", { key: '7ad04e4572dd11cc77509e5782364052811089d0', class: "flex" }, h("div", { key: 'd6b423fd2cd5c3b238504f951374d0b9b6435909', class: "column-separator" }), h("div", { key: 'f74cab2bcf22852af1b2f7a705ef8726bb779040', class: "columns" }, h("div", { key: '9e8f74e738d9dd95df814329a0e09b49633d2343', class: "column-header", title: "AM/PM" }), h("div", { key: '57cd6b520883953a66cddf6ab9ba486e0b32512a', role: "listbox", "aria-label": "AM/PM", class: "element-list", tabindex: -1 }, h("button", { key: '9486d0c81c91a235e1c9204afcbc794db7f063fe', role: "option", "aria-selected": this.timeRef === 'AM' ? 'true' : 'false', "data-am-pm-id": "AM", class: {
                 selected: this.timeRef === 'AM',
                 'element-container': true,
-            }, onClick: () => this.changeTimeReference('AM'), tabindex: "0", "aria-label": "AM" }, "AM"), h("button", { key: 'd6fee9560179caa7050fdb1add2d8b558e87d890', role: "option", "aria-selected": this.timeRef === 'PM' ? 'true' : 'false', "data-am-pm-id": "PM", class: {
+            }, onClick: () => this.changeTimeReference('AM'), tabindex: "0", "aria-label": "AM" }, "AM"), h("button", { key: '90602f7ec60c50c8d4edec394de2d205f506ed6d', role: "option", "aria-selected": this.timeRef === 'PM' ? 'true' : 'false', "data-am-pm-id": "PM", class: {
                 selected: this.timeRef === 'PM',
                 'element-container': true,
-            }, onClick: () => this.changeTimeReference('PM'), tabindex: "0", "aria-label": "PM" }, "PM")))))), h("div", { key: '4544617138a6372ac583b62113f5be2a98550f8c', class: {
+            }, onClick: () => this.changeTimeReference('PM'), tabindex: "0", "aria-label": "PM" }, "PM")))))), h("div", { key: '73907cc1c7cdf44a249ea2557d14e1a61f4f66ea', class: {
                 footer: true,
                 'footer--compact': this.timePickerDescriptors.length <= 2,
-            }, slot: "footer" }, h("ix-button", { key: '21b4ad3eb7e3ad466d1f4e8f1e7975df27bddc6e', class: "confirm-button", disabled: this.isConfirmDisabled(), onClick: () => {
+            }, slot: "footer" }, h("ix-button", { key: 'b2c32715f3a41323314f0da0f0b89c5e98f81dd4', class: "confirm-button", disabled: this.isConfirmDisabled(), onClick: () => {
                 this.timeSelect.emit(this._time?.toFormat(this.format));
             } }, this.i18nConfirmTime)))));
     }

package/dist/collection/components/toggle-button/toggle-button.css

@@ -353,6 +353,12 @@
   color: var(--theme-btn-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-primary--border-color--active);
+  background-color: var(--theme-btn-primary--background--active);
+  color: var(--theme-btn-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -415,6 +421,12 @@
   color: var(--theme-btn-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-secondary--border-color--active);
+  background-color: var(--theme-btn-secondary--background--active);
+  color: var(--theme-btn-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -477,6 +489,12 @@
   color: var(--theme-btn-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-tertiary--border-color--active);
+  background-color: var(--theme-btn-tertiary--background--active);
+  color: var(--theme-btn-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -539,6 +557,12 @@
   color: var(--theme-btn-subtle-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-primary--border-color--active);
+  background-color: var(--theme-btn-subtle-primary--background--active);
+  color: var(--theme-btn-subtle-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -601,6 +625,12 @@
   color: var(--theme-btn-subtle-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-secondary--border-color--active);
+  background-color: var(--theme-btn-subtle-secondary--background--active);
+  color: var(--theme-btn-subtle-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -663,6 +693,12 @@
   color: var(--theme-btn-subtle-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-subtle-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-subtle-tertiary--border-color--active);
+  background-color: var(--theme-btn-subtle-tertiary--background--active);
+  color: var(--theme-btn-subtle-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -725,6 +761,12 @@
   color: var(--theme-btn-danger-primary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-primary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-primary--border-color--active);
+  background-color: var(--theme-btn-danger-primary--background--active);
+  color: var(--theme-btn-danger-primary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -787,6 +829,12 @@
   color: var(--theme-btn-danger-secondary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-secondary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-secondary--border-color--active);
+  background-color: var(--theme-btn-danger-secondary--background--active);
+  color: var(--theme-btn-danger-secondary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }
@@ -849,6 +897,12 @@
   color: var(--theme-btn-danger-tertiary--color--active);
 }
 
+:host(.active:not(.disabled)) .btn-danger-tertiary:not(.disabled):not(:disabled) {
+  border-color: var(--theme-btn-danger-tertiary--border-color--active);
+  background-color: var(--theme-btn-danger-tertiary--background--active);
+  color: var(--theme-btn-danger-tertiary--color--active);
+}
+
 :host(.disabled) {
   pointer-events: none;
 }

package/dist/collection/components/tooltip/tooltip.js

@@ -101,7 +101,11 @@ export class Tooltip {
         }
     }
     computeArrowPosition({ placement, middlewareData, }) {
-        let { x, y } = middlewareData.arrow;
+        const arrow = middlewareData.arrow;
+        if (!arrow) {
+            return undefined;
+        }
+        let { x, y } = arrow;
         const resetPosition = {
             top: 'unset',
             right: 'unset',
@@ -369,7 +373,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: '59edeeb4c78daf4679cb73e1639781e2df1d57c0', role: "tooltip", class: { visible: this.visible } }, h("dialog", { key: 'c1e5d1fcddb87609654c945e42b04379a94cae79', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, h("div", { key: '3e24a73fb904b4a8861322e84a97ed72234c672c', class: "tooltip-container" }, h("div", { key: 'aa68b5bbe623e094fa5311ee19dbd96090776779', class: "content-wrapper" }, h("div", { key: 'c3304e93fc6fa38c3f31ebf3773054247bfa1c61', class: 'tooltip-title' }, h("slot", { key: '5859428cdc8a2502930760a2cb8491ba506200e0', name: "title-icon", onSlotchange: (e) => this.handleTitleIconSlotChange(e) }), h("ix-typography", { key: 'dcb18580a59c5cf0200b89d176e8ca56fca98b24', format: "h5" }, this.titleContent, h("slot", { key: 'b495bec36b40b39538f54aeee58591b3815e3cf6', name: "title-content" }))), h("slot", { key: '59970a04ae9909460aeb2c4f9a515ed1ce7b2863' }), h("div", { key: 'ff994a212b5b355ed18a002f2e8aaadaaae09b1b', class: "arrow" }))))));
+        return (h(Host, { key: 'fe826b9faedc373c7ed059d063cc0f41fbfc6178', role: "tooltip", class: { visible: this.visible } }, h("dialog", { key: '4c3615e531e598ca3bfb71f5d96d0c510d14a18f', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, h("div", { key: 'd9b77b657d7c96525f12bc0c357f37be745b0df2', class: "tooltip-container" }, h("div", { key: '3226301a8e9a91c6ca0d9e7a1268357c94885461', class: "content-wrapper" }, h("div", { key: '224fd0e67de09fc486e02bf2d1023d7ed0fce25a', class: 'tooltip-title' }, h("slot", { key: '16c48a015cd22857dbe43ff941a6a380e14b89dc', name: "title-icon", onSlotchange: (e) => this.handleTitleIconSlotChange(e) }), h("ix-typography", { key: 'ef2a7d59693e79d1a40ed44705841af6101e9949', format: "h5" }, this.titleContent, h("slot", { key: '64f1d0ab84cbbf75067447c123e6a970d2e06545', name: "title-content" }))), h("slot", { key: 'fd235ecbcd9862169fb6f825d6260f817b30d073' }), h("div", { key: 'be5d8640b05978f23a4ccab0271262dbbe712890', class: "arrow" }))))));
     }
     static get is() { return "ix-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/utils/a11y.js

@@ -57,7 +57,7 @@ export const a11yHostAttributes = (hostElement, ignoreAttributes = []) => {
     });
     return attributeObject;
 };
-const a11yAttributes = [
+export const a11yAttributes = [
     'role',
     'aria-activedescendant',
     'aria-atomic',

package/dist/collection/components/utils/animation.js

@@ -22,11 +22,11 @@ export default 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 @@ export default 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 @@ export default 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/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);
+    }
+};