@siemens/ix 5.2.0 → 5.2.1

package/dist/collection/components/breadcrumb-item/breadcrumb-item.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;
 }
@@ -1034,6 +1088,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;
 }
@@ -1096,6 +1156,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;
 }
@@ -1158,6 +1224,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;
 }
@@ -1220,6 +1292,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;
 }
@@ -1282,6 +1360,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;
 }
@@ -1344,6 +1428,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;
 }
@@ -1406,6 +1496,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;
 }
@@ -1468,6 +1564,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;
 }
@@ -1530,6 +1632,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/button/button.css

@@ -345,6 +345,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;
 }
@@ -407,6 +413,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;
 }
@@ -469,6 +481,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;
 }
@@ -531,6 +549,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;
 }
@@ -593,6 +617,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;
 }
@@ -655,6 +685,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;
 }
@@ -717,6 +753,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;
 }
@@ -779,6 +821,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;
 }
@@ -841,6 +889,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/card-accordion/card-accordion.js

@@ -51,6 +51,9 @@ export class CardAccordion {
     }
     scrollExpandedContentIntoView() {
         setTimeout(() => {
+            if (!this.expandedContent) {
+                return;
+            }
             const rect = this.expandedContent.getBoundingClientRect();
             if (rect.bottom > window.innerHeight) {
                 this.hostElement
@@ -63,15 +66,15 @@ export class CardAccordion {
         this.onInitialExpandChange();
     }
     render() {
-        return (h(Host, { key: '6361eab1c229a6678e6035e76e8865d9421d923f', slot: "card-accordion", class: {
+        return (h(Host, { key: '6ab37d107ccca9e0d342653a80b4ebb05f838bf6', slot: "card-accordion", class: {
                 [`variant-${this.variant}`]: true,
-            } }, h("button", { key: 'b143080712778b43494af1198e842b16cda59e89', tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId(), "aria-label": this.ariaLabelExpandButton }, h("ix-icon", { key: '8b2d846cc40a3c73f6a98d7a35038057dda89ba6', name: iconChevronDownSmall, class: {
+            } }, h("button", { key: 'c2d9f8703cd03d006a1f0a10488c65df7f25d07d', tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId(), "aria-label": this.ariaLabelExpandButton }, h("ix-icon", { key: 'e52734bc0d748eb648737af3ecff9c809ec5f7eb', name: iconChevronDownSmall, class: {
                 'expand-icon': true,
                 show: this.expandContent,
-            } })), h("div", { key: 'a7585909e6ce429ba8594e333e2798c72f59f27d', class: {
+            } })), h("div", { key: '0f000ebd3e93623fe4c0cf9c3c322f98bc79c23d', class: {
                 'expand-content': true,
                 show: this.expandContent,
-            } }, h("div", { key: '05e7b8a29ab1e24fe78e315b68511618fd5a05ac', class: "expand-content-inner" }, h("div", { key: 'f9a706418df216d90cf804c5e010a051592b5a2e', class: "expand-content-body" }, h("slot", { key: '23bd688f38b3601b5ebd3e229e6dc432d6f132d8' })), h("div", { key: 'f5a090a4d4df185bf75737584f7385d79808f1e0', class: "expand-content-footer" })))));
+            } }, h("div", { key: '1bdc7c69f1c256e509a4b6c55e99eeb1c2959f40', class: "expand-content-inner" }, h("div", { key: 'c9d502bdbb504f220a2c89831ef102916cd2dbcc', class: "expand-content-body" }, h("slot", { key: '647904aa76abd086e3ff80970cdee286c8fb1cf9' })), h("div", { key: '5fdbf86a8769e2cca9f2174eafd4e7e80e6058a3', class: "expand-content-footer" })))));
     }
     static get is() { return "ix-card-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/category-filter/category-filter.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;
 }

package/dist/collection/components/category-filter/category-filter.js

@@ -566,7 +566,7 @@ export class CategoryFilter {
         return (h("ix-icon-button", { onClick: (e) => this.resetFilter(e), class: {
                 'reset-button': true,
                 'hide-reset-button': !this.filterTokens.length && this.category === '',
-            }, variant: "tertiary", oval: true, icon: iconClear, iconColor: "color-soft-text", size: "16", "aria-label": this.ariaLabelResetButton }));
+            }, variant: "tertiary", icon: iconClear, iconColor: "color-soft-text", size: "16", "aria-label": this.ariaLabelResetButton }));
     }
     getIconColor() {
         if (this.disabled) {
@@ -578,19 +578,19 @@ export class CategoryFilter {
         return 'color-primary';
     }
     render() {
-        return (h(Host, { key: '6ae51946907b11bab602d5ffd6da9bbdbc07747c' }, h("form", { key: 'e0a2200a1a6779b8317269384e9e075bdb6769eb', ref: (el) => (this.formElement = el) }, h("div", { key: '3889ea9b0cc83ec856105984732fcb0ca0919d57', "read-only": this.readonly, class: {
+        return (h(Host, { key: '213c9455760e956792f5d8852799e1329c2aee2c' }, h("form", { key: 'fe985e2330a24b77ad5345c6e7667b7be24df66e', ref: (el) => (this.formElement = el) }, h("div", { key: '2c453e7d5d7d216942b6f389e97b348030c5a099', "read-only": this.readonly, class: {
                 'input-container': true,
                 disabled: this.disabled,
                 focus: this.hasFocus,
                 readonly: this.readonly,
                 'no-icon': this.hideIcon,
-            } }, h("ix-icon", { key: '0529e9e8f8b0bd23ecf205f0cc4ac3a42d72adf6', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: this.icon ?? iconSearch, size: "16" }), h("div", { key: 'c7dc47f6e906b9a0cd245fbd7468b61fed49e0e0', class: "token-container" }, h("div", { key: 'df8071f216314251b9f6c58ca115591734548ff9', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { key: value.toString(), class: {
+            } }, h("ix-icon", { key: '30946f69374b99e3593b9cbe89ff9dd43a6e83af', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: this.icon ?? iconSearch, size: "16" }), h("div", { key: 'c6da3b3838ac0f8d5ee2e80235b3f9670d34e9b4', class: "token-container" }, h("div", { key: '9748e927c040ccb216dea26abaa48f3aa2535f64', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { key: value.toString(), class: {
                 animate__animated: true,
                 animate__fadein: true,
             } }, h("ix-filter-chip", { disabled: this.disabled, readonly: this.readonly, onClick: (e) => e.stopPropagation(), onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (h("span", { class: {
                 'category-preview': true,
                 'display-none': this.category === '',
-            } }, this.categories[this.category]?.label)), h("input", { key: '5a27624a1f2e967caa57b18fdf7145da9dfbf4f9', class: {
+            } }, this.categories[this.category]?.label)), h("input", { key: 'e01a1f24f7cd7c514b641532ce25e754e03837fd', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly || this.disabled || this.category !== '',
             }, autocomplete: "off", name: "category-filter-input", disabled: this.disabled, readonly: this.readonly, ref: this.textInput, type: "text", placeholder: this.placeholder, ...this.a11yAttributes, "aria-label": this.ariaLabelFilterInput }))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (h("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: this.textInput?.waitForCurrent(), trigger: this.hostElement, header: this.getDropdownHeader(), enableTopLayer: this.enableTopLayer }, this.renderDropdownContent()))));

package/dist/collection/components/chat-input/chat-input.js

@@ -128,25 +128,25 @@ export class ChatInput extends Mixin(...DefaultMixins, ComponentIdMixin) {
     attachmentMutationObserver;
     isAttachmentScrollbarUpdateQueued = false;
     componentWillLoad() {
-        super.componentWillLoad();
+        super.componentWillLoad?.();
         this.updateFormInternalValue(this.value);
         this.initialValue = this.value;
         this.updateHasFollowUp();
     }
     componentDidLoad() {
-        super.componentDidLoad();
+        super.componentDidLoad?.();
         this.updateHasFollowUp();
         this.initAttachmentMutationObserver();
         this.scheduleAttachmentScrollbarUpdate();
         this.updateTextareaHeight();
     }
     componentDidRender() {
-        super.componentDidRender();
+        super.componentDidRender?.();
         this.scheduleAttachmentScrollbarUpdate();
         this.updateTextareaHeight();
     }
     disconnectedCallback() {
-        super.disconnectedCallback();
+        super.disconnectedCallback?.();
         this.attachmentResizeObserver?.disconnect();
         this.attachmentMutationObserver?.disconnect();
     }
@@ -364,16 +364,16 @@ export class ChatInput extends Mixin(...DefaultMixins, ComponentIdMixin) {
         const submitButtonIcon = isProcessing
             ? iconCircleStop
             : iconSendRightFilled;
-        return (h(Host, { key: '72c1e2139cdf152b32d84a4f8e5292361e63489c', class: {
+        return (h(Host, { key: '57119b34ddaf318358f64fe9272ab935d5cce4d6', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
                 'has-follow-up': this.hasFollowUp,
-            } }, h("div", { key: '88a8ccbdafceda33f39bc1266f50966af22fa830', class: "follow-up-prompts" }, h("slot", { key: '10cbddca520c0eaed028f05f9d6c14977e8043db', name: "follow-up", onSlotchange: (event) => this.handleFollowUpSlotChange(event) })), h("div", { key: '65235d296b9d6e452332746229300bdb9a766aec', class: "chat-input" }, h("div", { key: '856ae3152ac0c5665e8a83f250cfd7ad53a9d778', ref: this.attachmentsRef, class: {
+            } }, h("div", { key: '3c599716bfe45293597bcebd909f85538cbd7ace', class: "follow-up-prompts" }, h("slot", { key: '5ced96c5e38f66a6cba6e484fb7463866123554c', name: "follow-up", onSlotchange: (event) => this.handleFollowUpSlotChange(event) })), h("div", { key: '62632e005d9092fa70f20ffc6db6f46f703a6b62', class: "chat-input" }, h("div", { key: 'b0b0260bc9299c099173d935d785f907538f0bb3', ref: this.attachmentsRef, class: {
                 attachments: true,
                 'attachments--scroll': true,
                 'has-attachment-scrollbar': this.hasAttachmentScrollbar,
                 'has-attachments': this.hasAttachments,
-            } }, h("slot", { key: 'c8c108ef47848cfaee5074c545ff9f9b7000a71d', name: "attachments", onSlotchange: (event) => this.handleAttachmentsSlotChange(event) })), h("textarea", { key: '55cb475c3ea359f198f26f04b0c89d6a972e1799', id: this.getHostElementId() + '-textarea', ref: this.textareaRef, readOnly: this.readonly, disabled: this.disabled, maxLength: this.getCharacterLimit(), rows: this.minRows, value: this.value, placeholder: this.placeholder, "aria-label": this.textareaLabel, onFocus: () => {
+            } }, h("slot", { key: 'fd918353d878939ec84226f289b001309e351d5b', name: "attachments", onSlotchange: (event) => this.handleAttachmentsSlotChange(event) })), h("textarea", { key: 'bd5f1e802b0c3345c2c89a94000b4eca14d70aae', id: this.getHostElementId() + '-textarea', ref: this.textareaRef, readOnly: this.readonly, disabled: this.disabled, maxLength: this.getCharacterLimit(), rows: this.minRows, value: this.value, placeholder: this.placeholder, "aria-label": this.textareaLabel, onFocus: () => {
                 this.initialValue = this.value;
             }, onInput: (event) => {
                 const textarea = event.target;
@@ -383,7 +383,7 @@ export class ChatInput extends Mixin(...DefaultMixins, ComponentIdMixin) {
             }, onKeyDown: (event) => this.handleKeyDown(event), onBlur: () => {
                 this.ixBlur.emit();
                 this.emitIxChangeIfNeeded();
-            } }), this.renderCharacterLimit(), h("div", { key: '64844f6f38de39980e9ac250ea6edfad8599cb61', class: "action-row" }, h("div", { key: 'ae3d9b5bbc4828610f6d3ba27135eb0595325e2f', class: "left-actions" }, h("slot", { key: '36bd038c725a205671fdba70298c39899e7e35ac', name: "start" })), h("div", { key: '5d27e8d2dd186d73c7f2677f73221b5106159a9a', class: "right-actions" }, h("slot", { key: '54757427353728d8462137a645a1cc6c4133ebcc', name: "end" }), h("ix-icon-button", { key: 'ac42d94d4999731a1b76a1163083781258f82573', "aria-label": isProcessing ? 'Stop processing' : 'Submit prompt', class: "submit-button", disabled: disabledSubmitButton, icon: submitButtonIcon, size: "24", variant: "tertiary", onClick: () => this.submitPrompt() })))), this.disclaimer && (h("ix-typography", { key: '572264e22f9d76d980299b163a961e2a6bf9deed', class: "disclaimer", format: "body-sm", textColor: "soft" }, this.disclaimer))));
+            } }), this.renderCharacterLimit(), h("div", { key: '411a6b251d2da6adf2f9eb54169989473a657969', class: "action-row" }, h("div", { key: '02ddf0d61f37b2c4676efd0e3a36cec2474656e7', class: "left-actions" }, h("slot", { key: 'f11e87a608ffd5bc637b01fd5728af4bbfb8fe51', name: "start" })), h("div", { key: 'd3541a9bc599a26619a45bbc33c989f3f735645e', class: "right-actions" }, h("slot", { key: '7958f8473300159cbd52635226f0ae08ff0375ec', name: "end" }), h("ix-icon-button", { key: '07927dbf863b949f92239cfb07bb118cdd2b8963', "aria-label": isProcessing ? 'Stop processing' : 'Submit prompt', class: "submit-button", disabled: disabledSubmitButton, icon: submitButtonIcon, size: "24", variant: "tertiary", onClick: () => this.submitPrompt() })))), this.disclaimer && (h("ix-typography", { key: 'da911e4010e69b0fb026301b5df1c2369b68bc5d', class: "disclaimer", format: "body-sm", textColor: "soft" }, this.disclaimer))));
     }
     static get is() { return "ix-chat-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox-group/checkbox-group.css

@@ -29,7 +29,7 @@
 :host .checkbox-container {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.5rem;
   margin: 0.375rem 0;
   flex-wrap: wrap;
 }

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

@@ -237,7 +237,7 @@ export class DateDropdown extends Mixin(...DefaultMixins) {
                     return;
                 }
                 this.closeDropdown();
-            }, role: "presentation" }, h("ix-button", { key: 'a457c4586b7d426cb3177b13ada395cd142c554c', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ...this.inheritAriaAttributes, "aria-haspopup": "true", "aria-expanded": a11yBoolean(this.show), "aria-controls": "date-dropdown", "aria-label": ariaLabel, [TRAP_FOCUS_EXCLUDE_ATTRIBUTE]: true }, this.getButtonLabel()), h("ix-dropdown", { key: '4843647a409bf919d4221187eeb4fb9285a53f0e', focusTrapOptions: {
+            }, role: "presentation" }, h("ix-button", { key: '9de1225750e827a48370d77b643accbf717b5c90', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, class: { active: this.show }, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ...this.inheritAriaAttributes, "aria-haspopup": "true", "aria-expanded": a11yBoolean(this.show), "aria-controls": "date-dropdown", "aria-label": ariaLabel, [TRAP_FOCUS_EXCLUDE_ATTRIBUTE]: true }, this.getButtonLabel()), h("ix-dropdown", { key: '5adea2a62d0f2936c7f414d07e4b215fa46013c7', focusTrapOptions: {
                 excludeElements: true,
                 trapFocusInShadowDom: true,
             }, focusHost: this.hostElement, id: "date-dropdown", "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, onShowChanged: async ({ detail: show }) => {
@@ -251,18 +251,18 @@ export class DateDropdown extends Mixin(...DefaultMixins) {
                         datePicker?.focus();
                     });
                 }
-            } }, h("div", { key: 'b56022ada38073e8f0eb41e45fe77ff9e7266619', class: "container" }, this.dateRangeOptions?.length > 1 && (h("div", { key: '08899447b48dbb8e0a9afd9869611694f859de8c', class: {
+            } }, h("div", { key: '529789401a81e427362891c8067dceef2d792ccd', class: "container" }, this.dateRangeOptions?.length > 1 && (h("div", { key: '37357e44ca576b728da92a56b168441660298ad3', class: {
                 'quick-selection': true,
                 'border-right': this.selectedDateRangeId === 'custom',
             } }, this.dateRangeOptions.map((dateRangeOption) => (h(BaseButton, { disabled: false, iconOnly: false, iconOval: false, selected: false, loading: false, type: "button", variant: "subtle-tertiary", onClick: () => this.onRangeListSelect(dateRangeOption.id), ariaAttributes: {
                 'aria-label': `${dateRangeOption.label}: ${dateRangeOption.from} to ${dateRangeOption.to}`,
-            } }, dateRangeOption.label))))), h("div", { key: '8c61f1698346dcbd76f6ac011c54c0034b19db70', class: "picker-wrapper" }, h("ix-date-picker", { key: 'd9f6d28e64a07aedd2f66a5edbb8c470e908b87e', ref: this.datePickerRef, embedded: true, locale: this.locale, onDateChange: (e) => {
+            } }, dateRangeOption.label))))), h("div", { key: '78ba6a786dd6c0f4eab6158c44bca11d8ee3b8a5', class: "picker-wrapper" }, h("ix-date-picker", { key: '17bd8255602531babe2f71e2db5ffac8bb2b7b2f', ref: this.datePickerRef, embedded: true, locale: this.locale, onDateChange: (e) => {
                 e.stopPropagation();
                 this.currentRangeValue = {
                     ...e.detail,
                     id: 'custom',
                 };
-            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, singleSelection: this.singleSelection, from: this.from || this.currentRangeValue?.from, to: this.to || this.currentRangeValue?.to, minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), h("div", { key: '1dc08213a7637d97a129484b84206f9c030448fd', class: "pull-right" }, h("ix-button", { key: 'fcdcc6e21a4aad47466ce6354d75286eed642081', onClick: () => {
+            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, singleSelection: this.singleSelection, from: this.from || this.currentRangeValue?.from, to: this.to || this.currentRangeValue?.to, minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), h("div", { key: 'bedbd4ed054f58030718054a601b0ba9215ded11', class: "pull-right" }, h("ix-button", { key: '05cb78d1a4e407390c00abad740a4516b6fd10fb', onClick: () => {
                 if (this.currentRangeValue) {
                     this.onDateSelect(this.currentRangeValue);
                     this.closeDropdown();