@siemens/ix 5.2.0 → 5.2.1

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

@@ -187,8 +187,8 @@ export class DatePicker extends Mixin(...DefaultMixins) {
     tempMonth = 0;
     yearDropdownButtonRef = makeRef();
     yearMonthSelectionDropdownRef = makeRef();
-    dayNames;
-    monthNames;
+    dayNames = [];
+    monthNames = [];
     focusedDay = 1;
     isDayFocus = false;
     monthChangedFromFocus = false;
@@ -657,7 +657,11 @@ export class DatePicker extends Mixin(...DefaultMixins) {
         });
     }
     async intersect(entries) {
-        const container = await this.yearDropdownButtonRef.current.getDropdownReference();
+        const yearDropdownButton = this.yearDropdownButtonRef.current;
+        if (!yearDropdownButton) {
+            return;
+        }
+        const container = await yearDropdownButton.getDropdownReference();
         entries.forEach((entry) => {
             const target = entry.target;
             if (entry.isIntersecting) {
@@ -681,21 +685,21 @@ export class DatePicker extends Mixin(...DefaultMixins) {
     intersectStart = new IntersectionObserver((entries) => this.intersect(entries), { threshold: 0.5 });
     intersectEnd = new IntersectionObserver((entries) => this.intersect(entries), { threshold: 0.5 });
     render() {
-        return (h(Host, { key: '7de4a5edbe8988dcae7cd6f640ca4d5db58515f5', onKeyDown: (event) => this.onKeyDown(event), onFocusin: () => {
+        return (h(Host, { key: 'd3069d1895021eafcdbf31b1e3efb3fc9c9bd45c', onKeyDown: (event) => this.onKeyDown(event), onFocusin: () => {
                 if (hasKeyboardMode()) {
                     this.changeFocusedDay();
                 }
-            } }, h("ix-date-time-card", { key: 'efae993810b8c99e7093d99afff4585ad157f09d', corners: this.corners, embedded: this.embedded }, h("div", { key: 'b242490e8a186d2891c9f03d167ced3814af2be3', class: "header", slot: "header" }, h("ix-icon-button", { key: '23980a73c3296a4346d545c6ef6d34759a228f9f', onClick: () => this.changeCalendarView(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), h("div", { key: 'ef74172fffd395ae5dd84b926b6ad6ecd07bfc18', class: "selector" }, h("ix-dropdown-button", { key: '40c5bd62bf2600880a003d90b889c9fd9e54e146', class: "month-selector", focusCheckedItem: true, "aria-label": this.ariaLabelMonthSelection, variant: "tertiary", label: null, onShowChanged: (event) => {
+            } }, h("ix-date-time-card", { key: '565f344168f3cd6d5ec6cf52c995986069b8b283', corners: this.corners, embedded: this.embedded }, h("div", { key: '0736fee99626beb804c8cc12029fe54e7d548e2b', class: "header", slot: "header" }, h("ix-icon-button", { key: 'f7a6a2cf70bcc64d3c302b7030b6d3d6576e0f2a', onClick: () => this.changeCalendarView(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), h("div", { key: '74181a640e8fc12a42b5e781a7c34e181cf1eb8a', class: "selector" }, h("ix-dropdown-button", { key: '4cf5f39ae313b65da3e2ac5a5fa52ccb82122e6d', class: "month-selector", focusCheckedItem: true, "aria-label": this.ariaLabelMonthSelection, variant: "tertiary", label: null, onShowChanged: (event) => {
                 // Need to stop event propagation to trigger initial focus handling of the calendar days
                 event.stopPropagation();
-            } }, h("ix-typography", { key: 'f1a415a1bef4f302de05582bf053c052bad0505a', bold: true, class: "capitalize", slot: "button-label" }, this.monthNames[this.selectedMonth]), this.renderMonths()), h("ix-dropdown-button", { key: 'ce5a5b993fd02564d0104e13764418682a77acc4', class: "year-selector", focusCheckedItem: true, "aria-label": this.ariaLabelYearSelection, ref: this.yearDropdownButtonRef, variant: "tertiary", label: null, onShowChanged: (event) => {
+            } }, h("ix-typography", { key: 'b2faf7ed035bbb6fdd6340b670293c8e0ca1621b', bold: true, class: "capitalize", slot: "button-label" }, this.monthNames[this.selectedMonth]), this.renderMonths()), h("ix-dropdown-button", { key: '4dbdfb735fb5f515968e631575c92e1163a25e1b', class: "year-selector", focusCheckedItem: true, "aria-label": this.ariaLabelYearSelection, ref: this.yearDropdownButtonRef, variant: "tertiary", label: null, onShowChanged: (event) => {
                 // Need to stop event propagation to trigger initial focus handling of the calendar days
                 event.stopPropagation();
                 if (event.detail) {
                     requestAnimationFrameNoNgZone(() => {
                         this.intersectStart.observe(this.hostElement.shadowRoot.querySelector('[data-sentinel="top"]'));
                         this.intersectEnd.observe(this.hostElement.shadowRoot.querySelector('[data-sentinel="bottom"]'));
-                        const selectedYearItem = this.yearDropdownButtonRef.current.querySelector('ix-dropdown-item[checked]');
+                        const selectedYearItem = this.yearDropdownButtonRef.current?.querySelector('ix-dropdown-item[checked]');
                         if (!selectedYearItem) {
                             return;
                         }
@@ -710,10 +714,10 @@ export class DatePicker extends Mixin(...DefaultMixins) {
                     this.intersectStart.disconnect();
                     this.intersectEnd.disconnect();
                 }
-            } }, h("div", { key: 'd7d93c944877c170728b0aa41085a0ebdf657eac', class: "infinite-scrolling-spacer" }, h("div", { key: '9bdd838a9750150065141302e1e4a5aeaf8b58cc', class: "sentinel", "data-sentinel": "top" })), h("ix-typography", { key: 'f7adff586df01462d4e164d14f95f85dedb0e63d', bold: true, class: "capitalize", slot: "button-label" }, this.selectedYear), this.renderYears(), h("div", { key: '1b0db1dd2e77538f2a052272afc10bee207d35b9', class: "infinite-scrolling-spacer" }, h("div", { key: '1a324d048c46a7b7a1320f76255c6f251fa7ffe6', class: "sentinel", "data-sentinel": "bottom" })))), h("ix-icon-button", { key: '622614d0cf6eea4b960a69d40fbaee1558c457e7', onClick: () => this.changeCalendarView(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), h("div", { key: '468b8b1a645c376fee7a33f153fc01c24174a048', role: "grid", class: {
+            } }, h("div", { key: '6bff1627c2ae988c2cec43c0fab19301afe0d4b2', class: "infinite-scrolling-spacer" }, h("div", { key: '65649d41658fea52c472ae4a7be9b2049324012a', class: "sentinel", "data-sentinel": "top" })), h("ix-typography", { key: '845eaf9a759948f682bea5ac32cbff69a7911db9', bold: true, class: "capitalize", slot: "button-label" }, this.selectedYear), this.renderYears(), h("div", { key: '4b8886f3383301fce14c4c82a36a322a16bab48d', class: "infinite-scrolling-spacer" }, h("div", { key: '2ed935b2f11cb117b6ed10f4458ecc4d7b3466aa', class: "sentinel", "data-sentinel": "bottom" })))), h("ix-icon-button", { key: '6744bb35c08d528c1455c737823443f786739b87', onClick: () => this.changeCalendarView(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), h("div", { key: '65e864e3df6b3f4c725337c13c302ae4f4d29904', role: "grid", class: {
                 grid: true,
                 'grid--show-week-numbers': this.showWeekNumbers,
-            } }, h("div", { key: '1aef3ab46c009c831c0a46663490dcac49b3f857', role: "row" }, this.showWeekNumbers && (h("div", { key: '179664fef0ad9939184a6b9247931cb311f2cc8f', class: "calendar-item week-day", role: "columnheader" })), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day", role: "columnheader" }, h("div", { class: "overflow" }, name.slice(0, 3)))))), this.calendar.map((week) => {
+            } }, h("div", { key: '061afbad3742cbeba3564b06667414ac05c37461', role: "row" }, this.showWeekNumbers && (h("div", { key: '9f223211778fcef3281a0fc11ab2ddfb40c66670', class: "calendar-item week-day", role: "columnheader" })), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day", role: "columnheader" }, h("div", { class: "overflow" }, name.slice(0, 3)))))), this.calendar.map((week) => {
             return (h("div", { role: "row" }, this.showWeekNumbers && (h("div", { class: "calendar-item week-number", role: "rowheader" }, week.weekNumber)), week.dayNumbers.map((day) => {
                 return day ? (h("div", { role: "gridcell", "aria-selected": this.getUtilitiesBasedOnDay(day).isSelected()
                         ? 'true'
@@ -728,10 +732,10 @@ export class DatePicker extends Mixin(...DefaultMixins) {
                         }
                     }, tabIndex: day === this.focusedDay ? 0 : -1, autofocus: this.getUtilitiesBasedOnDay(day).isToday(), onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur(), "aria-label": `${day} ${Info.months()[this.selectedMonth]} ${this.selectedYear}` }, day)) : (h("div", { role: "gridcell" }));
             })));
-        })), h("div", { key: '64236c8cacbf0c467b6da51e9540e966076f1d46', class: {
+        })), h("div", { key: 'f4e2619893fdf4d3c4a6ba2b514a03285a9a145f', class: {
                 button: true,
                 hidden: this.singleSelection || this.embedded,
-            } }, h("ix-button", { key: 'd0bd805434cbb01e8dbbed9fb539ee647b87ead4', hidden: this.singleSelection || this.embedded, onClick: () => this.onDone() }, this.i18nDone)))));
+            } }, h("ix-button", { key: 'a907377384cc521a7302a4adc7a4076a9befbc38', hidden: this.singleSelection || this.embedded, onClick: () => this.onDone() }, this.i18nDone)))));
     }
     static get is() { return "ix-date-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown.js

@@ -396,7 +396,9 @@ export class Dropdown extends Mixin(...DefaultMixins) {
         }, {
             threshold: [0, 0.5, 1],
         });
-        this.intersectObserverTrigger.observe(this.anchorElement);
+        if (this.anchorElement) {
+            this.intersectObserverTrigger.observe(this.anchorElement);
+        }
     }
     createFallbackPlacement(side) {
         const alignment = this.placement.endsWith('-end') ? 'end' : 'start';
@@ -643,11 +645,15 @@ export class Dropdown extends Mixin(...DefaultMixins) {
         if (submenuIds.length === 0) {
             return;
         }
+        const dropdown = dropdownController.getDropdownById(submenuIds[0]);
+        if (!dropdown) {
+            return;
+        }
         event.detail.activeElement.classList.add('ix-dropdown-submenu-trigger-active');
-        dropdownController.present(dropdownController.getDropdownById(submenuIds[0]));
-        this.forwardQueryElement = dropdownController.getDropdownById(submenuIds[0]).hostElement;
+        dropdownController.present(dropdown);
+        this.forwardQueryElement = dropdown.hostElement;
         requestAnimationFrameNoNgZone(() => {
-            focusFirstDescendant(dropdownController.getDropdownById(submenuIds[0]).hostElement);
+            focusFirstDescendant(dropdown.hostElement);
         });
     }
     closeSubmenu() {
@@ -681,7 +687,7 @@ export class Dropdown extends Mixin(...DefaultMixins) {
         else if (this.hostRole) {
             ariaAttributes['role'] = this.hostRole;
         }
-        return (h(Host, { key: 'eebc7297596d43ef67c3461ae0a74fbf9e5c3917', ...ariaAttributes, "aria-modal": "true", "data-ix-dropdown": this.dropdownElementId, "data-ix-focus-trap": true, class: {
+        return (h(Host, { key: '6f04440b82a4d0f62e2f15932a30a68107b988ec', ...ariaAttributes, "aria-modal": "true", "data-ix-dropdown": this.dropdownElementId, "data-ix-focus-trap": true, class: {
                 'dropdown-menu': true,
                 show: this.show,
                 // overflow handling not needed when using top-layer

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

@@ -59,119 +59,65 @@
   --ix-dropdown-button-primary-color-disabled: var(
     --theme-btn-primary--color--disabled
   );
-  --ix-dropdown-button-primary-background-active: var(
-    --theme-btn-primary--background--active
-  );
   --ix-dropdown-button-primary-color-active: var(
     --theme-btn-primary--color--active
   );
-  --ix-dropdown-button-primary-border-color-active: var(
-    --theme-btn-primary--border-color--active
-  );
   --ix-dropdown-button-secondary-color: var(--theme-btn-secondary--color);
   --ix-dropdown-button-secondary-color-disabled: var(
     --theme-btn-secondary--color--disabled
   );
-  --ix-dropdown-button-secondary-background-active: var(
-    --theme-btn-secondary--background--active
-  );
   --ix-dropdown-button-secondary-color-active: var(
     --theme-btn-secondary--color--active
   );
-  --ix-dropdown-button-secondary-border-color-active: var(
-    --theme-btn-secondary--border-color--active
-  );
   --ix-dropdown-button-tertiary-color: var(--theme-btn-tertiary--color);
   --ix-dropdown-button-tertiary-color-disabled: var(
     --theme-btn-tertiary--color--disabled
   );
-  --ix-dropdown-button-tertiary-background-active: var(
-    --theme-btn-tertiary--background--active
-  );
   --ix-dropdown-button-tertiary-color-active: var(
     --theme-btn-tertiary--color--active
   );
-  --ix-dropdown-button-tertiary-border-color-active: var(
-    --theme-btn-tertiary--border-color--active
-  );
   --ix-dropdown-button-subtle-primary-color: var(--theme-btn-subtle-primary--color);
   --ix-dropdown-button-subtle-primary-color-disabled: var(
     --theme-btn-subtle-primary--color--disabled
   );
-  --ix-dropdown-button-subtle-primary-background-active: var(
-    --theme-btn-subtle-primary--background--active
-  );
   --ix-dropdown-button-subtle-primary-color-active: var(
     --theme-btn-subtle-primary--color--active
   );
-  --ix-dropdown-button-subtle-primary-border-color-active: var(
-    --theme-btn-subtle-primary--border-color--active
-  );
   --ix-dropdown-button-subtle-secondary-color: var(--theme-btn-subtle-secondary--color);
   --ix-dropdown-button-subtle-secondary-color-disabled: var(
     --theme-btn-subtle-secondary--color--disabled
   );
-  --ix-dropdown-button-subtle-secondary-background-active: var(
-    --theme-btn-subtle-secondary--background--active
-  );
   --ix-dropdown-button-subtle-secondary-color-active: var(
     --theme-btn-subtle-secondary--color--active
   );
-  --ix-dropdown-button-subtle-secondary-border-color-active: var(
-    --theme-btn-subtle-secondary--border-color--active
-  );
   --ix-dropdown-button-subtle-tertiary-color: var(--theme-btn-subtle-tertiary--color);
   --ix-dropdown-button-subtle-tertiary-color-disabled: var(
     --theme-btn-subtle-tertiary--color--disabled
   );
-  --ix-dropdown-button-subtle-tertiary-background-active: var(
-    --theme-btn-subtle-tertiary--background--active
-  );
   --ix-dropdown-button-subtle-tertiary-color-active: var(
     --theme-btn-subtle-tertiary--color--active
   );
-  --ix-dropdown-button-subtle-tertiary-border-color-active: var(
-    --theme-btn-subtle-tertiary--border-color--active
-  );
   --ix-dropdown-button-danger-primary-color: var(--theme-btn-danger-primary--color);
   --ix-dropdown-button-danger-primary-color-disabled: var(
     --theme-btn-danger-primary--color--disabled
   );
-  --ix-dropdown-button-danger-primary-background-active: var(
-    --theme-btn-danger-primary--background--active
-  );
   --ix-dropdown-button-danger-primary-color-active: var(
     --theme-btn-danger-primary--color--active
   );
-  --ix-dropdown-button-danger-primary-border-color-active: var(
-    --theme-btn-danger-primary--border-color--active
-  );
   --ix-dropdown-button-danger-secondary-color: var(--theme-btn-danger-secondary--color);
   --ix-dropdown-button-danger-secondary-color-disabled: var(
     --theme-btn-danger-secondary--color--disabled
   );
-  --ix-dropdown-button-danger-secondary-background-active: var(
-    --theme-btn-danger-secondary--background--active
-  );
   --ix-dropdown-button-danger-secondary-color-active: var(
     --theme-btn-danger-secondary--color--active
   );
-  --ix-dropdown-button-danger-secondary-border-color-active: var(
-    --theme-btn-danger-secondary--border-color--active
-  );
   --ix-dropdown-button-danger-tertiary-color: var(--theme-btn-danger-tertiary--color);
   --ix-dropdown-button-danger-tertiary-color-disabled: var(
     --theme-btn-danger-tertiary--color--disabled
   );
-  --ix-dropdown-button-danger-tertiary-background-active: var(
-    --theme-btn-danger-tertiary--background--active
-  );
   --ix-dropdown-button-danger-tertiary-color-active: var(
     --theme-btn-danger-tertiary--color--active
   );
-  --ix-dropdown-button-danger-tertiary-border-color-active: var(
-    --theme-btn-danger-tertiary--border-color--active
-  );
 }
 
 :host {
@@ -358,150 +304,33 @@
 }
 
 :host([aria-expanded=true]) {
-  --theme-btn-primary--background: var(
-    --ix-dropdown-button-primary-background-active
-  );
-  --theme-btn-primary--background--hover: var(
-    --ix-dropdown-button-primary-background-active
-  );
-  --theme-btn-primary--color: var(--ix-dropdown-button-primary-color-active);
-  --theme-btn-primary--color--hover: var(
+  --ix-dropdown-button-primary-color: var(
     --ix-dropdown-button-primary-color-active
   );
-  --theme-btn-primary--border-color: var(
-    --ix-dropdown-button-primary-border-color-active
-  );
-  --theme-btn-primary--border-color--hover: var(
-    --ix-dropdown-button-primary-border-color-active
-  );
-  --theme-btn-secondary--background: var(
-    --ix-dropdown-button-secondary-background-active
-  );
-  --theme-btn-secondary--background--hover: var(
-    --ix-dropdown-button-secondary-background-active
-  );
-  --theme-btn-secondary--color: var(--ix-dropdown-button-secondary-color-active);
-  --theme-btn-secondary--color--hover: var(
+  --ix-dropdown-button-secondary-color: var(
     --ix-dropdown-button-secondary-color-active
   );
-  --theme-btn-secondary--border-color: var(
-    --ix-dropdown-button-secondary-border-color-active
-  );
-  --theme-btn-secondary--border-color--hover: var(
-    --ix-dropdown-button-secondary-border-color-active
-  );
-  --theme-btn-tertiary--background: var(
-    --ix-dropdown-button-tertiary-background-active
-  );
-  --theme-btn-tertiary--background--hover: var(
-    --ix-dropdown-button-tertiary-background-active
-  );
-  --theme-btn-tertiary--color: var(--ix-dropdown-button-tertiary-color-active);
-  --theme-btn-tertiary--color--hover: var(
+  --ix-dropdown-button-tertiary-color: var(
     --ix-dropdown-button-tertiary-color-active
   );
-  --theme-btn-tertiary--border-color: var(
-    --ix-dropdown-button-tertiary-border-color-active
-  );
-  --theme-btn-tertiary--border-color--hover: var(
-    --ix-dropdown-button-tertiary-border-color-active
-  );
-  --theme-btn-subtle-primary--background: var(
-    --ix-dropdown-button-subtle-primary-background-active
-  );
-  --theme-btn-subtle-primary--background--hover: var(
-    --ix-dropdown-button-subtle-primary-background-active
-  );
-  --theme-btn-subtle-primary--color: var(--ix-dropdown-button-subtle-primary-color-active);
-  --theme-btn-subtle-primary--color--hover: var(
+  --ix-dropdown-button-subtle-primary-color: var(
     --ix-dropdown-button-subtle-primary-color-active
   );
-  --theme-btn-subtle-primary--border-color: var(
-    --ix-dropdown-button-subtle-primary-border-color-active
-  );
-  --theme-btn-subtle-primary--border-color--hover: var(
-    --ix-dropdown-button-subtle-primary-border-color-active
-  );
-  --theme-btn-subtle-secondary--background: var(
-    --ix-dropdown-button-subtle-secondary-background-active
-  );
-  --theme-btn-subtle-secondary--background--hover: var(
-    --ix-dropdown-button-subtle-secondary-background-active
-  );
-  --theme-btn-subtle-secondary--color: var(--ix-dropdown-button-subtle-secondary-color-active);
-  --theme-btn-subtle-secondary--color--hover: var(
+  --ix-dropdown-button-subtle-secondary-color: var(
     --ix-dropdown-button-subtle-secondary-color-active
   );
-  --theme-btn-subtle-secondary--border-color: var(
-    --ix-dropdown-button-subtle-secondary-border-color-active
-  );
-  --theme-btn-subtle-secondary--border-color--hover: var(
-    --ix-dropdown-button-subtle-secondary-border-color-active
-  );
-  --theme-btn-subtle-tertiary--background: var(
-    --ix-dropdown-button-subtle-tertiary-background-active
-  );
-  --theme-btn-subtle-tertiary--background--hover: var(
-    --ix-dropdown-button-subtle-tertiary-background-active
-  );
-  --theme-btn-subtle-tertiary--color: var(--ix-dropdown-button-subtle-tertiary-color-active);
-  --theme-btn-subtle-tertiary--color--hover: var(
+  --ix-dropdown-button-subtle-tertiary-color: var(
     --ix-dropdown-button-subtle-tertiary-color-active
   );
-  --theme-btn-subtle-tertiary--border-color: var(
-    --ix-dropdown-button-subtle-tertiary-border-color-active
-  );
-  --theme-btn-subtle-tertiary--border-color--hover: var(
-    --ix-dropdown-button-subtle-tertiary-border-color-active
-  );
-  --theme-btn-danger-primary--background: var(
-    --ix-dropdown-button-danger-primary-background-active
-  );
-  --theme-btn-danger-primary--background--hover: var(
-    --ix-dropdown-button-danger-primary-background-active
-  );
-  --theme-btn-danger-primary--color: var(--ix-dropdown-button-danger-primary-color-active);
-  --theme-btn-danger-primary--color--hover: var(
+  --ix-dropdown-button-danger-primary-color: var(
     --ix-dropdown-button-danger-primary-color-active
   );
-  --theme-btn-danger-primary--border-color: var(
-    --ix-dropdown-button-danger-primary-border-color-active
-  );
-  --theme-btn-danger-primary--border-color--hover: var(
-    --ix-dropdown-button-danger-primary-border-color-active
-  );
-  --theme-btn-danger-secondary--background: var(
-    --ix-dropdown-button-danger-secondary-background-active
-  );
-  --theme-btn-danger-secondary--background--hover: var(
-    --ix-dropdown-button-danger-secondary-background-active
-  );
-  --theme-btn-danger-secondary--color: var(--ix-dropdown-button-danger-secondary-color-active);
-  --theme-btn-danger-secondary--color--hover: var(
+  --ix-dropdown-button-danger-secondary-color: var(
     --ix-dropdown-button-danger-secondary-color-active
   );
-  --theme-btn-danger-secondary--border-color: var(
-    --ix-dropdown-button-danger-secondary-border-color-active
-  );
-  --theme-btn-danger-secondary--border-color--hover: var(
-    --ix-dropdown-button-danger-secondary-border-color-active
-  );
-  --theme-btn-danger-tertiary--background: var(
-    --ix-dropdown-button-danger-tertiary-background-active
-  );
-  --theme-btn-danger-tertiary--background--hover: var(
-    --ix-dropdown-button-danger-tertiary-background-active
-  );
-  --theme-btn-danger-tertiary--color: var(--ix-dropdown-button-danger-tertiary-color-active);
-  --theme-btn-danger-tertiary--color--hover: var(
+  --ix-dropdown-button-danger-tertiary-color: var(
     --ix-dropdown-button-danger-tertiary-color-active
   );
-  --theme-btn-danger-tertiary--border-color: var(
-    --ix-dropdown-button-danger-tertiary-border-color-active
-  );
-  --theme-btn-danger-tertiary--border-color--hover: var(
-    --ix-dropdown-button-danger-tertiary-border-color-active
-  );
 }
 
 :host([aria-expanded=true]:focus-visible) {

package/dist/collection/components/dropdown-button/dropdown-button.js

@@ -160,11 +160,14 @@ export class DropdownButton extends Mixin(...DefaultMixins, ComponentIdMixin, Ar
                 'host-context-breadcrumb': !!this.hostContext?.breadcrumb,
                 'host-context-date-picker': !!this.hostContext?.datePicker,
                 'host-context-tabs': !!this.hostContext?.tabs,
-            }, ref: this.dropdownAnchor, tabIndex: this.disabled ? -1 : 0, ...ariaAttributes }, h("div", { key: '09be27cd7b565ebcc71c37983c6300afa1a95802', class: "dropdown-button" }, this.label || this.label === null ? (h("ix-button", { ...commonProperties, class: 'internal-button', alignment: "start", ref: (ref) => forceTabIndex(ref, -1), ariaLabelButton: this.ariaLabelDropdownButton ??
+            }, ref: this.dropdownAnchor, tabIndex: this.disabled ? -1 : 0, ...ariaAttributes }, h("div", { key: '09be27cd7b565ebcc71c37983c6300afa1a95802', class: "dropdown-button" }, this.label || this.label === null ? (h("ix-button", { ...commonProperties, class: {
+                'internal-button': true,
+                active: this.dropdownShow,
+            }, alignment: "start", ref: (ref) => forceTabIndex(ref, -1), ariaLabelButton: this.ariaLabelDropdownButton ??
                 (this.dropdownShow ? 'Close dropdown' : 'Open dropdown') }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("slot", { name: "button-label" }), !hideChevron && (h("ix-icon", { "aria-hidden": "true", name: this.dropdownShow
                 ? iconChevronUpSmall
-                : iconChevronDownSmall, size: "24" }))))) : (h("div", null, h("ix-icon-button", { ...commonProperties, icon: this.icon, ref: (ref) => forceTabIndex(ref, -1), "aria-label": this.ariaLabelDropdownButton ??
-                (this.dropdownShow ? 'Close dropdown' : 'Open dropdown') }), !hideChevron && this.getTriangle()))), h("ix-dropdown", { key: 'a71d02c22bd6d0f79d8f4dbfa0b7bfe77e339e8f', role: "menu", ref: this.dropdownRef, id: `dropdown-button-menu-${this.dropdownButtonId}`, "aria-labelledby": `dropdown-button-${this.dropdownButtonId}`, trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior, enableTopLayer: this.enableTopLayer, disableFocusTrap: true, focusCheckedItem: this.focusCheckedItem, onShowChanged: (event) => this.onDropdownShowChanged(event), onScroll: (event) => {
+                : iconChevronDownSmall, size: "24" }))))) : (h("div", null, h("ix-icon-button", { ...commonProperties, class: { active: this.dropdownShow }, icon: this.icon, ref: (ref) => forceTabIndex(ref, -1), "aria-label": this.ariaLabelDropdownButton ??
+                (this.dropdownShow ? 'Close dropdown' : 'Open dropdown') }), !hideChevron && this.getTriangle()))), h("ix-dropdown", { key: '4a3236943eb96d8c96c57457c3565dbf038da4a2', role: "menu", ref: this.dropdownRef, id: `dropdown-button-menu-${this.dropdownButtonId}`, "aria-labelledby": `dropdown-button-${this.dropdownButtonId}`, trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior, enableTopLayer: this.enableTopLayer, disableFocusTrap: true, focusCheckedItem: this.focusCheckedItem, onShowChanged: (event) => this.onDropdownShowChanged(event), onScroll: (event) => {
                 // Need to dispatch the event again to handle infinite scroll of ix-date-picker,
                 // as the scroll event does not bubble beyond the shadow root
                 const scrollEvent = new CustomEvent('scroll', {
@@ -173,7 +176,7 @@ export class DropdownButton extends Mixin(...DefaultMixins, ComponentIdMixin, Ar
                     detail: event.detail,
                 });
                 this.hostElement.dispatchEvent(scrollEvent);
-            } }, h("slot", { key: '330b19b734d3ed649967f7360f5d1424fed3d665' }))));
+            } }, h("slot", { key: 'ad330d9330a8d6d56be634ef6270d7a42327d78e' }))));
     }
     static get is() { return "ix-dropdown-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/event-list/event-list.js

@@ -96,6 +96,10 @@ export class EventList {
             if (!listElement) {
                 return resolve();
             }
+            if (!listElement) {
+                resolve();
+                return;
+            }
             animate(listElement, {
                 opacity: [{ opacity: 1, easing: 'easeInSine' }, { opacity: 0 }],
                 duration: EventList.fadeOutDuration,
@@ -135,11 +139,11 @@ export class EventList {
         });
     }
     render() {
-        return (h(Host, { key: 'a8a45d70a13452c6beb7c214ce91e853a38b8552', class: {
+        return (h(Host, { key: '4a355c1cdb34b5c13f05a3abb0fabd1205733371', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, h("div", { key: 'dacba6d4f41062ef6a7cd6a1792d792c9279655e', role: "list" }, h("slot", { key: '6193e925c292452afb5d8889120fefd21ebe9351' }))));
+            } }, h("div", { key: '5963f8ed3d7c534701bbc717f85b69cb42240300', role: "list" }, h("slot", { key: '8ddf236842628e767cd5428a56f10dddc532b892' }))));
     }
     static get is() { return "ix-event-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/group/group.js

@@ -64,7 +64,7 @@ export class Group {
     footerVisible = false;
     showExpandCollapsedIcon = false;
     hasDropdown = false;
-    observer = null;
+    observer;
     selectedChanged(newSelected) {
         if (newSelected === false) {
             this.changeItemIndex();
@@ -166,26 +166,26 @@ export class Group {
         }
     }
     render() {
-        return (h(Host, { key: '1793ac3e26d91c376e82c74d31b30d32f1e9cd2a' }, h("div", { key: 'ad7d3167ee6823f4835ee4b5002af0bcec586a07', class: {
+        return (h(Host, { key: 'c13fd65df4bb7ae59e242214a037dbb403264879' }, h("div", { key: '2c9daf5ca7335038e771aadafab3d11648739a8e', class: {
                 'group-header': true,
                 expand: this.expanded,
                 selected: this.selected,
-            }, tabindex: "0" }, h("div", { key: '5a56cffe47d4e3a9b9a88eaa402f00fe5f9788a3', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: 'e7cfb2b5d583e2c057624c4a1568e85dc5e4badc', class: {
+            }, tabindex: "0" }, h("div", { key: 'b5d1a6e9a478478909e2cd27bb8fe07ce5ae455f', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '0304ea3dc12318458f710aa0c8e6747a5a945d7d', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), h("div", { key: '01597689aabccdfb0910941815980ed2cb7ded18', class: "btn-expand-header" }, h("ix-icon", { key: 'f7317874a7830a08f4eaf4f899c2bb9c6b9f1b17', "data-testid": "expand-collapsed-icon", class: {
+            } }), h("div", { key: 'f414bf98c9d8f68217714476411286322005c984', class: "btn-expand-header" }, h("ix-icon", { key: '2c998a5aa350830b9ed3043aacfa236b1693197c', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), h("div", { key: 'ac24f6cd5d8d37185ea2f863c22c8b3a6ca7250b', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '5790b072f91964ac542ae058e9764a46ee9462d6', name: "header" }))), this.hasDropdown && (h("ix-group-context-menu", { key: '3451bc23ed72ae8ccced159708176593bb13cfc5' }, h("slot", { key: '3d2e98dbaa2016707dd904d352df9a1cfc62faa3', name: "dropdown" })))), h("div", { key: 'a65bc2d61c25bd2758efac9470362f9d6c461f44', class: {
+            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), h("div", { key: '2787b0ed7d584400662f9794b8cfba82adec5837', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '03e99048ceabea07f229349919c0392df581f9e1', name: "header" }))), this.hasDropdown && (h("ix-group-context-menu", { key: '0ba467c1ad8b9eb4a0406ac897a6cf84635721de' }, h("slot", { key: 'b4dd2adc6c70c6b521abcceee495f323564cc371', name: "dropdown" })))), h("div", { key: '1d14d7a4a6dc617088282c0af07d6c95483878c8', class: {
                 'group-content': true,
-            } }, h("div", { key: '2aacc03d7a9c9e7f922f02a76b951fba83127d57', style: {
+            } }, h("div", { key: 'cbf1f34edc7dac18cc5b63ef640ad2b720c267bb', style: {
                 display: this.expanded ? 'contents' : 'none',
-            } }, h("slot", { key: '2d1efdfc125553264095f9fbedbedf18f23bd61b', onSlotchange: () => {
+            } }, h("slot", { key: '98ea6459c1c434e5afcb8c420ef124f331bf0ff3', onSlotchange: () => {
                 const slot = this.hostElement.shadowRoot?.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = hasSlottedElements(slot);
-            } }), h("ix-group-item", { key: '87d5d74df393611c8681d5d3aec6393b3d439323', class: {
+            } }), h("ix-group-item", { key: '55e1c11df531834d2b48b742b8081e669672d5fd', class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            }, groupFooter: true, suppressSelection: true }, h("slot", { key: 'f3f126f527efb02af78b884439c35eee1aa35afc', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            }, groupFooter: true, suppressSelection: true }, h("slot", { key: '1c1176b3a0e054e31db9999cce99bbc7e904ab33', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     static get is() { return "ix-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -361,6 +361,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;
 }
@@ -423,6 +429,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;
 }
@@ -485,6 +497,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;
 }
@@ -547,6 +565,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;
 }
@@ -609,6 +633,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;
 }
@@ -671,6 +701,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;
 }
@@ -733,6 +769,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;
 }
@@ -795,6 +837,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;
 }
@@ -857,6 +905,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;
 }