@siemens/ix 5.0.0 → 5.1.0

package/dist/collection/components/application/application.js

@@ -29,9 +29,14 @@ export class Application {
      * Change the responsive layout of the menu structure
      */
     forceBreakpoint;
+    onForceBreakpointChange(forceBreakpoint) {
+        this.setBreakpoints(this.breakpoints);
+        this.forceLayoutChange(forceBreakpoint);
+    }
     forceLayoutChange(newMode) {
         if (!newMode) {
             applicationLayoutService.enableBreakpointDetection();
+            applicationLayoutService.debouncedOnResize();
             return;
         }
         applicationLayoutService.disableBreakpointDetection();
@@ -42,7 +47,7 @@ export class Application {
      */
     breakpoints = ['sm', 'md', 'lg'];
     onBreakpointsChange(breakpoints) {
-        applicationLayoutService.setBreakpoints(breakpoints);
+        this.setBreakpoints(breakpoints);
     }
     /**
      * Define application switch configuration
@@ -64,20 +69,27 @@ export class Application {
         }
         this.menu?.toggleMenu(false);
     }
+    setBreakpoints(breakpoints) {
+        if (this.forceBreakpoint) {
+            applicationLayoutService.setBreakpoints([this.forceBreakpoint]);
+        }
+        else {
+            applicationLayoutService.setBreakpoints(breakpoints);
+        }
+    }
     componentWillLoad() {
-        applicationLayoutService.setBreakpoints(this.breakpoints);
+        this.setBreakpoints(this.breakpoints);
         this.contextProvider = useContextProvider(this.hostElement, ApplicationLayoutContext, {
             hideHeader: false,
             sidebar: this.applicationSidebarSlotted,
             appSwitchConfig: this.appSwitchConfig,
         });
         this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
-            this.breakpoint = mode;
+            this.breakpoint = this.forceBreakpoint || mode;
         });
-        this.breakpoint = applicationLayoutService.breakpoint;
-        if (this.forceBreakpoint) {
-            this.forceLayoutChange(this.forceBreakpoint);
-        }
+        this.breakpoint =
+            this.forceBreakpoint || applicationLayoutService.breakpoint;
+        this.forceLayoutChange(this.forceBreakpoint);
     }
     disconnectedCallback() {
         this.modeDisposable?.dispose();
@@ -106,12 +118,12 @@ export class Application {
         });
     }
     render() {
-        return (h(Host, { key: '9621e446a9532a740dcdef516a51d326c59587a7', "data-role": "", class: {
+        return (h(Host, { key: 'b580ca5dbbd164b45beb5b6863fc3f6ffd830f08', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, h("slot", { key: '0061a139b7fa722e97da65fbcaf2853bdd185466', name: "application-header" }), h("div", { key: 'b2da184f99ab27ce576be02221497bb24462bb69', class: "application" }, h("slot", { key: '8e5895c10cb495320f251c9c44949700629be9ee', name: "menu" }), h("aside", { key: '60a6cd879294682b56061f4b0fd9bb2342fce229', class: {
+            } }, h("slot", { key: '6055d2a286d3b90e4aca43bee094e509ab4780fd', name: "application-header" }), h("div", { key: '6418c3369dc0525d99c29015d5717a791a2ddd4c', class: "application" }, h("slot", { key: 'a6adda421cf6294d34da129a5dd3bc366f6384ca', name: "menu" }), h("aside", { key: '3f359f1ef65e8fa1f35f4001b23ec10d32a7d5be', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, h("slot", { key: '19416cec696ff2b7ae2818ebe375b98892df3116', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: 'd6bd6479222c1b19c6e45f68e6993c534ce5afd2', class: "content-area" }, h("main", { key: 'ac7117c1a192eadf913e8ab474019dcdd5c81025', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'bac13c155b023321b111f3ea89603840c6b73fe0' })), h("footer", { key: '5acded667f8360c952516a0a55ca5b0936834add', class: "footer" }, h("slot", { key: '34be70c1aa056e735aa52c17d4a8c469a68611ed', name: "bottom" }))))));
+            }, onClick: () => this.onContentClick() }, h("slot", { key: 'f335892f90b7d9f9020bbeb5b9a732404bfcde00', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: '93333ea8c99802b366971d1c9717418262fc649d', class: "content-area" }, h("main", { key: '79fe70895b7725377b679b98c04784f6fd7ff789', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '22d8f248280108d31903f67e7678804cf78dc658' })), h("footer", { key: '9e541aa388f2aaf44d8f41987ded1bcd863a22f6', class: "footer" }, h("slot", { key: '9b87eb43ced974fca634e1f4c1282669be3135b4', name: "bottom" }))))));
     }
     static get is() { return "ix-application"; }
     static get encapsulation() { return "shadow"; }
@@ -262,6 +274,9 @@ export class Application {
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
+                "propName": "forceBreakpoint",
+                "methodName": "onForceBreakpointChange"
+            }, {
                 "propName": "breakpoints",
                 "methodName": "onBreakpointsChange"
             }, {

package/dist/collection/components/application-header/application-header.js

@@ -234,31 +234,31 @@ export class ApplicationHeader {
             this.breakpoint !== 'sm' &&
             this.suppressResponsive === false;
         const showCompanyLogoByProperty = this.breakpoint !== 'sm' && !!this.companyLogo;
-        return (h(Host, { key: '8fed428b8e6079dff2a3c69ad5a97e7b1da48a7d', class: {
+        return (h(Host, { key: '65415a8abe50d9b368d9c71001a0968cf2264fb8', class: {
                 [`breakpoint-${this.breakpoint}`]: true,
                 'hide-bottom-border': this.hideBottomBorder,
-            }, slot: "application-header", role: "banner" }, h("div", { key: 'c9931f63a7ce2f8c06180fef6cd76564f5e84bc3', class: "left-side" }, this.appIcon && this.breakpoint !== 'sm' && (h("div", { key: 'e4e7f62ff603a160a74009edbe46d85da8b8df24', class: {
+            }, slot: "application-header", role: "banner" }, h("div", { key: '79849e061e06d01eba6f4d802f48d226480857b2', class: "left-side" }, this.appIcon && this.breakpoint !== 'sm' && (h("div", { key: 'b5c6140d263e7ff6ffe3937a4341bcd2b9935104', class: {
                 'app-icon': true,
                 'app-icon-outline': this.appIconOutline,
-            } }, h("img", { key: 'a7b010a88ea8b93fbea38641f35e75214046b6a4', src: this.appIcon, alt: this.appIconAlt }))), (this.showMenu || showMenuByApplicationFrame) && (h("ix-menu-expand-icon", { key: '3e43c1b426241634fbcec29977cd5ba2c5c1cd22', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (h("ix-icon-button", { key: 'f4eac3d8a42b9a23b5e5cff11a7f161d9e70f862', onClick: () => this.showAppSwitch(), icon: iconApps, variant: "subtle-tertiary", class: {
+            } }, h("img", { key: '00fb44e36f25856a0e2ad2c333d2a5a5014415d3', src: this.appIcon, alt: this.appIconAlt }))), (this.showMenu || showMenuByApplicationFrame) && (h("ix-menu-expand-icon", { key: '2d123f6cfbc21a61680328b3a81638ba49413c8f', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (h("ix-icon-button", { key: '5b887225419c66e36ef5dfd369647d41c4f3ca41', onClick: () => this.showAppSwitch(), icon: iconApps, variant: "subtle-tertiary", class: {
                 'app-switch': true,
                 'without-app-icon': !this.appIcon,
-            }, "aria-label": this.ariaLabelAppSwitchIconButton })), showCompanyLogoByProperty && (h("div", { key: '0175e0f1262be29c5d5f65e183f9b0a9e21725e8', class: "logo" }, h("img", { key: '9e129c84639dafc6cec3c793b5f48e4fb7b620b7', src: this.companyLogo, alt: this.companyLogoAlt }))), h("div", { key: 'b37ed29a5e8e377792398fb3ef0c3f125b119466', class: {
+            }, "aria-label": this.ariaLabelAppSwitchIconButton })), showCompanyLogoByProperty && (h("div", { key: '8c2dc3e31111a04c5e7aecabd11b458dc1c6b199', class: "logo" }, h("img", { key: '0594b3e00eb190ac2beef24df3c6987668c1fd69', src: this.companyLogo, alt: this.companyLogoAlt }))), h("div", { key: 'b51ceb91b1079d363999026e560874b0c2a1e390', class: {
                 logo: true,
                 'hide-logo': !this.hasSlottedLogo,
-            } }, h("slot", { key: '1e7a3194f242698d72387b48d62ecb36bee69fb4', name: "logo", onSlotchange: () => (this.hasSlottedLogo = this.checkLogoSlot()) })), h("div", { key: '3a1ae9c9d1a16cb9cc9e51769111bcd99aefcbfd', class: "name" }, h("ix-typography", { key: '97b6a6ff93405c7a58fed3e2d394b5036195b436', format: "body-lg", class: "application-name" }, this.name), this.nameSuffix && this.breakpoint !== 'sm' && (h("ix-typography", { key: '2107bc8e68ac9eca564a17751f1cd81bbb7a1ad7', format: "body-xs", class: "application-name-suffix" }, this.nameSuffix)))), h("div", { key: 'f05c6406ac65df92028fe176d90d31009417208f', class: { 'right-side': true, sm: this.breakpoint === 'sm' } }, this.breakpoint !== 'sm' && (h("div", { key: '6d8b477d4cb2fc869dd77feef82547ad7fca1d23', class: "secondary" }, h("slot", { key: '73f83d5dfbe63846383b6dacccbf9c22df63e035', name: "secondary" }))), h("div", { key: '8fa09abb2a3e3082c753735b1b3766299edf62f0', class: "content" }, this.breakpoint !== 'sm' && h("slot", { key: '4283447039f8f2bc64aa6b6ede2d5cbed6b15dee' }), h("ix-icon-button", { key: 'cf681acd5e2135ce899ee755346218157e69f27e', class: {
+            } }, h("slot", { key: '2659560a89277665227c8169cd1f40493ca50957', name: "logo", onSlotchange: () => (this.hasSlottedLogo = this.checkLogoSlot()) })), h("div", { key: '80f65852355d615792c0a923d174095aac094fea', class: "name" }, h("ix-typography", { key: 'ab984e7163d972ada42958f53a0ce58e9236cf34', format: "body-lg", class: "application-name" }, this.name), this.nameSuffix && this.breakpoint !== 'sm' && (h("ix-typography", { key: '9cd307c5ec49d7988084918d2f7e741669e501c9', format: "body-xs", class: "application-name-suffix" }, this.nameSuffix)))), h("div", { key: '9336ed1416b6e532a92d266809296f8509f35490', class: { 'right-side': true, sm: this.breakpoint === 'sm' } }, this.breakpoint !== 'sm' && (h("div", { key: 'daad8a4304d6276f4b4ac9c5e00ec939f3121a8c', class: "secondary" }, h("slot", { key: '2c6948ba05eb8fad24ef6a7fdddef62edd7b6f3b', name: "secondary" }))), h("div", { key: '49d1396f97cb218001107b8b189a66f9b6e1cc4a', class: "content" }, this.breakpoint !== 'sm' && h("slot", { key: 'a261e8552476f9d8b90101a4e471575a1787b076' }), h("ix-icon-button", { key: '0cd13b5d1bcc3d9aeb2a16465529833595af57d6', class: {
                 'context-menu': true,
                 'context-menu-visible': this.hasOverflowContextMenu,
-            }, "data-context-menu": true, "data-testid": "show-more", icon: iconMoreMenu, variant: "subtle-tertiary", "aria-label": this.ariaLabelMoreMenuIconButton, "aria-hidden": a11yBoolean(!this.hasOverflowContextMenu) }), h("ix-dropdown", { key: 'a0acad2315685ae3adb6b76e889976ff841c2590', "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton(), "aria-hidden": a11yBoolean(!this.hasOverflowContextMenu), enableTopLayer: this.enableTopLayer }, h("div", { key: '1c028bdf68db43d9001dba949852c25281938e48', class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, this.breakpoint === 'sm' && (h("div", { key: '7366d4bfa3d68280fa24fbeeed4ba21be1b598cc', class: {
+            }, "data-context-menu": true, "data-testid": "show-more", icon: iconMoreMenu, variant: "subtle-tertiary", "aria-label": this.ariaLabelMoreMenuIconButton, "aria-hidden": a11yBoolean(!this.hasOverflowContextMenu) }), h("ix-dropdown", { key: '2340aec42fc9d4a23d3fc257dabd24b44789c60f', "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton(), "aria-hidden": a11yBoolean(!this.hasOverflowContextMenu), enableTopLayer: this.enableTopLayer }, h("div", { key: 'ba14593b7d8365c205f61792a71f1f83190a3683', class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, this.breakpoint === 'sm' && (h("div", { key: '612c535b854e7254ebcad06edf9f41ad745babcb', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasSecondarySlotElements,
-            } }, h("slot", { key: '19dfaf11bac37b1130122cfd7289b51112c7796d', name: "secondary", onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), this.breakpoint === 'sm' && (h("div", { key: '70fc852947963fc76d28ff07737d95ecc2751474', class: {
+            } }, h("slot", { key: '6a8c8df87ce24ca24cee6738e16cae3150370573', name: "secondary", onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), this.breakpoint === 'sm' && (h("div", { key: 'ffb74288c8b2f71941c9f9c4d710c4fe44c9996a', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasDefaultSlotElements,
-            } }, h("slot", { key: '607ce94ee9c05f07281b921ef9da3c3417b8c99b', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), h("div", { key: '223851bee394e67075ad931e54980b0c2691c98e', class: {
+            } }, h("slot", { key: '4d7d25254108d0297137f624a4ed248a4b8e8a7f', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), h("div", { key: '188ccce5cc9eddf0bdadc92716a98f82491c3fcf', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasOverflowSlotElements,
-            } }, h("slot", { key: '88e925666de5a68e6fca694cc0682954de30cd79', name: "overflow", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })))), h("slot", { key: '2806aac9e05a0d3b7fa423db8d19048950a936c5', name: "ix-application-header-avatar" })))));
+            } }, h("slot", { key: 'f5c7c0c2efec69700a7f44c90a89f56aec34ac85', name: "overflow", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })))), h("slot", { key: '002c29f2656a44471f7990d50354bf2767ca2021', name: "ix-application-header-avatar" })))));
     }
     static get is() { return "ix-application-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/application-header/application-switch-modal/application-switch-modal.css

@@ -108,14 +108,14 @@
   flex-direction: row;
   align-items: center;
   gap: 1rem;
-  padding: 0.5rem;
+  padding: 0.4375rem;
+  padding-inline-end: 0.9375rem;
   flex: 1 1 45%;
   cursor: pointer;
   border: 0.0625rem solid transparent;
 }
 :host .AppEntry.Selected {
   background-color: var(--theme-color-ghost--selected);
-  border: var(--theme-dynamic-bdr-1);
 }
 :host .AppEntry:not(.disabled):not(:disabled).hover, :host .AppEntry:not(.disabled):not(:disabled):hover {
   background-color: var(--theme-ghost--background--hover);

package/dist/collection/components/application-header/application-switch-modal/application-switch-modal.js

@@ -30,7 +30,7 @@ function ApplicationItem(props) {
         }, onClick: () => {
             dismissModal(props.host);
             window.open(props.url, props.target);
-        } }, h("div", null, h("img", { class: "AppIcon", src: props.iconSrc })), h("div", { class: "AppName" }, h("ix-typography", { format: "h4" }, props.name, isExternal(props.target) && (h("ix-icon", { size: "12", name: iconOpenExternal, color: "color-soft-text" }))), h("ix-typography", { format: "label-sm", textColor: "soft" }, props.description))));
+        } }, h("img", { class: "AppIcon", src: props.iconSrc, alt: "" }), h("div", { class: "AppName" }, h("ix-typography", { format: "h4" }, props.name, isExternal(props.target) && (h("ix-icon", { size: "12", name: iconOpenExternal, color: "color-soft-text" }))), h("ix-typography", { format: "label-sm", textColor: "soft" }, props.description))));
 }
 /** @internal */
 export class ApplicationSwitchModal {
@@ -43,7 +43,7 @@ export class ApplicationSwitchModal {
         }
     }
     render() {
-        return (h(Host, { key: '16262d6c110470be996a5db506a9a610c51ef0d6' }, h("ix-modal-header", { key: '5386a2b3ce91ad901f270ccb25c3b32c28de5cc0', icon: iconApps }, this.config?.i18nAppSwitch || 'Switch to application'), h("ix-modal-content", { key: '65666bad6b09fd3af20b9266d7f30b232da01a31', class: "content" }, h("div", { key: '1622ad7361a15518bdf367e13a6d20159495d15e', class: "content-apps" }, (!this.config || this.config?.apps.length === 0) && (h("div", { key: '778d2f8110c1f79b1a65a1765c393c922de4a1bb', class: "loading" }, h("ix-spinner", { key: 'c80583bc15238aac1ec59ddd0cf6638217667fa5', size: "medium", variant: "primary" }), h("span", { key: 'ac4257820259ae71b62e9703e730e7367c463bcf' }, this.config?.i18nLoadingApps ||
+        return (h(Host, { key: 'd5f90b59051a81a5c9157cf76f181d0dbf3db288' }, h("ix-modal-header", { key: 'a56ca3229b08765f10b792b0aaa850e15ab6a233', icon: iconApps }, this.config?.i18nAppSwitch || 'Switch to application'), h("ix-modal-content", { key: '4ed63c67ea9a17355d010cd74eb80f9e3d15d26a', class: "content" }, h("div", { key: '1a9cadf4e12af46758b21d3074a97b10e9a00e6c', class: "content-apps" }, (!this.config || this.config?.apps.length === 0) && (h("div", { key: 'c0dbbd963ecc7afa860b2dc18cd93c8f93ce228a', class: "loading" }, h("ix-spinner", { key: '9da41df87f43a42f2c62019ba48f2eda65c25205', size: "medium", variant: "primary" }), h("span", { key: '1865e305014310653486c4115dca075f8ffc4a92' }, this.config?.i18nLoadingApps ||
             'Loading available applications...'))), this.config?.apps.map((appEntry) => (h(ApplicationItem, { host: this.hostElement, name: appEntry.name, description: appEntry.description, iconSrc: appEntry.iconSrc, target: appEntry.target, url: appEntry.url, selected: appEntry.id === this.config?.currentAppId })))))));
     }
     static get is() { return "ix-application-switch-modal"; }

package/dist/collection/components/avatar/avatar.css

@@ -225,7 +225,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host(.avatar-button) button {
   padding: 0px;

package/dist/collection/components/blind/blind.css

@@ -247,6 +247,9 @@
 :host(.blind-alarm) .blind-header-title-sublabel {
   color: var(--theme-color-alarm--contrast);
 }
+:host(.blind-alarm) .header-actions {
+  --ix-icon-button-color: var(--theme-color-alarm--contrast);
+}
 :host(.blind-alarm) {
   background-color: var(--theme-blind-base--background);
 }
@@ -270,6 +273,9 @@
 :host(.blind-critical) .blind-header-title-sublabel {
   color: var(--theme-color-critical--contrast);
 }
+:host(.blind-critical) .header-actions {
+  --ix-icon-button-color: var(--theme-color-critical--contrast);
+}
 :host(.blind-critical) {
   background-color: var(--theme-blind-base--background);
 }
@@ -293,6 +299,9 @@
 :host(.blind-info) .blind-header-title-sublabel {
   color: var(--theme-color-info--contrast);
 }
+:host(.blind-info) .header-actions {
+  --ix-icon-button-color: var(--theme-color-info--contrast);
+}
 :host(.blind-info) {
   background-color: var(--theme-blind-base--background);
 }
@@ -316,6 +325,9 @@
 :host(.blind-neutral) .blind-header-title-sublabel {
   color: var(--theme-color-neutral--contrast);
 }
+:host(.blind-neutral) .header-actions {
+  --ix-icon-button-color: var(--theme-color-neutral--contrast);
+}
 :host(.blind-neutral) {
   background-color: var(--theme-blind-base--background);
 }
@@ -335,6 +347,9 @@
 :host(.blind-filled) .blind-header-title-sublabel {
   color: var(--theme-color-soft-text);
 }
+:host(.blind-filled) .header-actions {
+  --ix-icon-button-color: var(--theme-color-primary);
+}
 :host(.blind-filled) {
   background-color: var(--theme-blind-base--background);
 }
@@ -358,6 +373,9 @@
 :host(.blind-success) .blind-header-title-sublabel {
   color: var(--theme-color-success--contrast);
 }
+:host(.blind-success) .header-actions {
+  --ix-icon-button-color: var(--theme-color-success--contrast);
+}
 :host(.blind-success) {
   background-color: var(--theme-blind-base--background);
 }
@@ -381,6 +399,9 @@
 :host(.blind-warning) .blind-header-title-sublabel {
   color: var(--theme-color-warning--contrast);
 }
+:host(.blind-warning) .header-actions {
+  --ix-icon-button-color: var(--theme-color-warning--contrast);
+}
 :host(.blind-warning) {
   background-color: var(--theme-blind-base--background);
 }
@@ -404,6 +425,9 @@
 :host(.blind-primary) .blind-header-title-sublabel {
   color: var(--theme-color-primary--contrast);
 }
+:host(.blind-primary) .header-actions {
+  --ix-icon-button-color: var(--theme-color-primary--contrast);
+}
 :host(.blind-primary) {
   background-color: var(--theme-blind-base--background);
 }
@@ -426,6 +450,9 @@
 :host(.blind-outline) .blind-header-title-sublabel {
   color: var(--theme-color-soft-text);
 }
+:host(.blind-outline) .header-actions {
+  --ix-icon-button-color: var(--theme-color-primary);
+}
 :host(.blind-outline) {
   border-color: var(--theme-color-soft-bdr);
 }

package/dist/collection/components/blind/blind.js

@@ -87,17 +87,17 @@ export class Blind {
         });
     }
     render() {
-        return (h(Host, { key: '08686a07866cce941b0d3fee3c59acda57fd9697', class: {
+        return (h(Host, { key: '013b57ee3c249c67c3ec35bc94924b08a0828723', class: {
                 [`blind-${this.variant}`]: true,
-            } }, h("div", { key: '37c3d29dfa4113fa51971c8487158c30dcac0cf6', class: 'blind-header-wrapper' }, h("button", { key: '1a725a4d9991ef417fdcd06d83565a994d20bc10', class: {
+            } }, h("div", { key: 'a03bf76f5ff8628de0958f3f12ae69bfadf68010', class: 'blind-header-wrapper' }, h("button", { key: '48e9d20e1bce06e2b305b856e3c7ec52d882c197', class: {
                 'blind-header': true,
                 [`blind-${this.variant}`]: true,
                 closed: this.collapsed,
-            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: 'acae9cd5182dcfb6003a18713709ef5c5f5ba5c9', name: "custom-header" })), h("div", { key: 'c183148b712d24ce5416f704496af3982c5f063c', class: 'blind-header-content' }, h("ix-icon", { key: '679080e49ed99d10528d6b44f483349794880e9f', class: "collapse-icon", name: iconChevronDownSmall, color: this.variant === 'filled' || this.variant === 'outline'
+            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: '127096b27d461351848650ce43de9016585f8ba2', name: "custom-header" })), h("div", { key: '30976417c051c06aebd99af776d06d8d12289e3a', class: 'blind-header-content' }, h("ix-icon", { key: '4ad41bafea4f5c85625897dd5ac53e8199c0c824', class: "collapse-icon", name: iconChevronDownSmall, color: this.variant === 'filled' || this.variant === 'outline'
                 ? 'color-std-text'
-                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: '790921a5077d08519a86e53da114615c62ab3520', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'filled' || this.variant === 'outline'
+                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { key: '5aaa92535b30579eecaf2d5af312fe03b7acd6bd', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h(Fragment, null, this.icon && (h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'filled' || this.variant === 'outline'
                 ? 'color-std-text'
-                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null))), h("section", { key: 'e009be22aca2af68a71115cd828695ab6f16d230', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: '482ac28924b2edd0b5b6a751a07434764fcb64f8', class: {
+                : `color-${this.variant}--contrast` })), h("div", { class: 'blind-header-title-row' }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))) : null))), h("section", { key: '10d8459ac5f41b8a09848e3182f68d641d369541', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: 'f39a05f57e022918dd7cbce8454f9f0aa60d2a79', class: {
                 'blind-content': true,
                 hide: this.collapsed,
             } }, !this.collapsed ? h("slot", null) : null))));

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -109,7 +109,7 @@ export class Breadcrumb extends Mixin(...DefaultMixins) {
         const labelLastItem = this.items?.[this.items.length - 1];
         this.inheritAriaAttributes['aria-label'] =
             this.inheritAriaAttributes['aria-label'] ?? 'Breadcrumbs';
-        return (h(Host, { key: '063930e1d24291c3134f24ab3375873640478350', ...this.inheritAriaAttributes, role: "navigation" }, this.items?.length > this.visibleItemCount && (h("ix-dropdown-button", { key: '70ac97d2a811f0233eb4fd90af37b67dd878bd44', "aria-label": this.ariaLabelPreviousButton, label: "...", variant: "tertiary", class: "previous-button", enableTopLayer: this.enableTopLayer }, h("ix-icon", { key: 'b472c12e89554e61fa1a31eb10381c5d0e967d1c', slot: "button-label", name: iconChevronRightSmall, size: "16", class: 'chevron' }), this.items
+        return (h(Host, { key: 'c8cfb22b370122dea413928ceed2fb8630b53075', ...this.inheritAriaAttributes, role: "navigation" }, this.items?.length > this.visibleItemCount && (h("ix-dropdown-button", { key: 'c2a90ef26e2969d1e755e6acf328263f4bfbb0b5', "aria-label": this.ariaLabelPreviousButton, label: "...", variant: "tertiary", class: "previous-button", enableTopLayer: this.enableTopLayer }, h("ix-icon", { key: 'f0b32d17e31d0023a413a2e16787c2f81091020f', slot: "button-label", name: iconChevronRightSmall, size: "16", class: 'chevron' }), this.items
             .slice(0, this.items.length - this.visibleItemCount)
             .map((item) => {
             const label = item.label ?? item.innerText;
@@ -119,7 +119,7 @@ export class Breadcrumb extends Mixin(...DefaultMixins) {
                         label,
                     });
                 }, onItemClick: (event) => event.stopPropagation() }));
-        }))), h("div", { key: '038b3647e975049385db65b8e074eec506499845', class: "crumb-items" }, h("slot", { key: '50d0835f4de60f07bd637be7c61b51bcfc3c7f02' })), this.shouldRenderNextDropdown && (h("ix-dropdown-button", { key: 'f9e3b86fca769167ff38837820e929d724b96702', label: labelLastItem.label ?? labelLastItem.innerText, class: "next-button", variant: "tertiary", enableTopLayer: this.enableTopLayer, "aria-current": "page" }, h("ix-icon", { key: '0ae0b05b6f8928a12a45b4d9a9e6d6d1e17daee2', slot: "button-label", name: iconChevronRightSmall, size: "16", class: 'chevron' }), this.nextItems?.map((item) => (h("ix-dropdown-item", { label: item.label, onClick: (e) => {
+        }))), h("div", { key: 'a52404709581c50965d8ede10819f213eb8b9a91', class: "crumb-items" }, h("slot", { key: '92b3de8dc3ca5c2b2a089d5cca602f3c0c8b540a' })), this.shouldRenderNextDropdown && (h("ix-dropdown-button", { key: '1fe42187695d0d4e4e77eae43a92b4821e85e4d5', label: labelLastItem.label ?? labelLastItem.innerText, class: "next-button", variant: "tertiary", enableTopLayer: this.enableTopLayer, "aria-current": "page" }, h("ix-icon", { key: '843588a9497997a6de921b8a6c775d9fa2f02aa5', slot: "button-label", name: iconChevronRightSmall, size: "16", class: 'chevron' }), this.nextItems?.map((item) => (h("ix-dropdown-item", { label: item.label, onClick: (e) => {
                 this.nextClick.emit({
                     event: e,
                     item,

package/dist/collection/components/breadcrumb-item/breadcrumb-item.css

@@ -155,7 +155,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;
@@ -266,7 +266,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;
@@ -939,7 +939,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;

package/dist/collection/components/breadcrumb-item/breadcrumb-item.js

@@ -80,7 +80,7 @@ export class BreadcrumbItem extends Mixin(...DefaultMixins, InheritAriaAttribute
             ...(this.isCurrentPage ? { 'aria-current': 'page' } : {}),
         };
         const props = {
-            variant: this.subtle ? 'subtle-primary' : 'tertiary',
+            variant: !this.hideChevron && this.subtle ? 'subtle-primary' : 'tertiary',
             iconOnly: false,
             iconOval: false,
             disabled: false,

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

@@ -73,5 +73,5 @@ export const BaseButton = (props, children) => {
         return (h("a", { ...commonAttributes, "aria-disabled": a11yBoolean(props.disabled), href: props.disabled ? undefined : props.href, target: props.target, role: "button", rel: props.rel, onClick: (e) => handleOnClick(e, props) }, buttonContent));
     }
     // Otherwise, render as a button
-    return (h("button", { ...commonAttributes, "aria-disabled": a11yBoolean(props.disabled), onClick: (e) => handleOnClick(e, props), type: props.type }, buttonContent));
+    return (h("button", { ...commonAttributes, "aria-disabled": a11yBoolean(props.disabled), disabled: props.disabled || props.loading, onClick: (e) => handleOnClick(e, props), type: props.type }, buttonContent));
 };

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

@@ -139,7 +139,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;
@@ -250,7 +250,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;

package/dist/collection/components/card/card.js

@@ -14,11 +14,11 @@ export class Card {
      */
     passive = false;
     render() {
-        return (h(Host, { key: '2028efc4ea15150b5e3190d550a50b3a4521a0e5', class: {
+        return (h(Host, { key: 'b7cda25da56fae5d7bb3afd89867d7d64e66da9d', class: {
                 selected: this.selected,
                 [`card-${this.variant}`]: true,
                 passive: this.passive,
-            } }, h("div", { key: 'abbcfc97a8244890aae5b905e3990d50ae4e1c13', class: "card-content" }, h("slot", { key: '6685a346bc26a43cd0696cce72626c7a662c5e07' })), h("div", { key: '3f811f0405dbb76d1b40d23baf28d4b0b9db1fae', class: "card-footer" }, h("slot", { key: 'c7473599d68a24457a8156c52c5cfe24e5e73bbb', name: "card-accordion" }))));
+            } }, h("div", { key: '7bc1c062f62d8f053c17af8993fac55611ef6ef2', class: "card-content" }, h("slot", { key: '2ea9c6d84ef11db4fe662c22005b09cdb0b9a227' })), h("div", { key: '157ff1e9785bae0e572f37e3529f224bb4e925fd', class: "card-footer" }, h("slot", { key: '171e9b6c82b90b7cb1e5b9ca5f45dbcb2cacd26b', name: "card-accordion" }))));
     }
     static get is() { return "ix-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-accordion/card-accordion.js

@@ -60,15 +60,15 @@ export class CardAccordion {
         this.onInitialExpandChange();
     }
     render() {
-        return (h(Host, { key: '99d74bce00deda78eec3e658c6315074bcc6f838', slot: "card-accordion", class: {
+        return (h(Host, { key: 'cdd4feba2b9ae022141114a75d9ae13910c35915', slot: "card-accordion", class: {
                 [`variant-${this.variant}`]: true,
-            } }, h("button", { key: '0388734d427625db6a28c89cd3f854258060924b', 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: '30cfd29665e01c6f717546b498a093dfd505c18a', name: iconChevronDownSmall, class: {
+            } }, h("button", { key: '9357ac651cef1c1d1f570faf906ba08e403652ff', 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: '9d55b5013a6f4aff50d9f904e4e0730713c8dcf4', name: iconChevronDownSmall, class: {
                 'expand-icon': true,
                 show: this.expandContent,
-            } })), h("div", { key: '55d278b4ff6fff66a0d1daee213c558bc5fa95cc', class: {
+            } })), h("div", { key: '57ddf6374b94637e674e1c061344cec87a20addc', class: {
                 'expand-content': true,
                 show: this.expandContent,
-            } }, h("div", { key: '580b4d462ddab11dabc62222d88b9af585e9ae2e', class: "expand-content-inner" }, h("div", { key: 'd5b05b3b7fa03a773d8c6c8256e100a723700be4', class: "expand-content-body" }, h("slot", { key: 'baf8f14174f1a79e626ce3e9dc8cb149f6f0cc59' })), h("div", { key: '1be55e44df3a61bf32942fabcdd738d0738f091a', class: "expand-content-footer" })))));
+            } }, h("div", { key: 'bfacd0c7e4202aeba7058bc563b79357dd2d589e', class: "expand-content-inner" }, h("div", { key: 'ed870153b656930325a35b0921e8f23f7dcee97e', class: "expand-content-body" }, h("slot", { key: '893b6669078807112cf23c6b17f94eab7697fa34' })), h("div", { key: 'd41b94230091bcfedb81305656eb0101e7afb952', class: "expand-content-footer" })))));
     }
     static get is() { return "ix-card-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-content/card-content.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class CardContent {
     render() {
-        return (h(Host, { key: '397c2774e53fbd7419f4295a299f16eaafb7413c' }, h("div", { key: 'd9500640a9a0ba2e508993fe8619fe0c534bea0e', class: "content-wrapper" }, h("slot", { key: '90aeec19d833b538bbcb4d44208f95b50d7f10c6' }))));
+        return (h(Host, { key: '918473b60dc96e14c935bd7d46022b7a9c0abf46' }, h("div", { key: '4e5593a246b22c0d04f777ff89bbc8a936d05db3', class: "content-wrapper" }, h("slot", { key: '7a89cac6011e0446fe3a0cfd45036967af53ab79' }))));
     }
     static get is() { return "ix-card-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-list/card-list.css

@@ -94,7 +94,7 @@
   transition: var(--theme-default-time) transform ease-in-out;
 }
 :host .CardList__Title__Button__Collapsed {
-  transform: rotate(-90deg);
+  transform: rotate(-180deg);
 }
 :host .CardList__Title__Show__All {
   align-self: center;

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

@@ -1,12 +1,12 @@
 import { Fragment, h, Host, } from "@stencil/core";
 import { createMutationObserver } from "../utils/mutation-observer";
-import { iconChevronDown, iconMoreMenu } from "@siemens/ix-icons/icons";
+import { iconChevronUp, iconMoreMenu } from "@siemens/ix-icons/icons";
 import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
 function CardListTitle(props) {
     if (!props.label) {
         return null;
     }
-    return (h("div", { class: "CardList_Title" }, h("ix-icon-button", { variant: "tertiary", icon: iconChevronDown, onClick: props.onClick, iconColor: "color-primary", class: {
+    return (h("div", { class: "CardList_Title" }, h("ix-icon-button", { variant: "subtle-tertiary", icon: iconChevronUp, onClick: props.onClick, iconColor: "color-std-text", class: {
             CardList__Title__Button: true,
             CardList__Title__Button__Collapsed: props.isCollapsed,
         }, "aria-label": props.ariaLabelExpandButton }), h("ix-typography", { class: "CardList_Title__Label", format: "body-lg" }, props.label), !props.hideShowAll && (h("ix-button", { class: "CardList__Title__Show__All", variant: "tertiary", onClick: props.onShowAllClick }, props.showLess ? (props.labelShowLess) : (h(Fragment, null, h("span", null, props.showAllLabel), h("span", null, !isNaN(props.showAllCounter)
@@ -202,16 +202,16 @@ export class CardList {
         }
     }
     render() {
-        return (h(Host, { key: '72dc154668f2a7ff123cc3ebf874cf40858cca51' }, h(CardListTitle, { key: '841d5b5fca34c925707d161de1e70b32d089841c', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+        return (h(Host, { key: '4cb1bcba15f7877fc6d6fda2989a321cff75b21e' }, h(CardListTitle, { key: 'e8dd21fcc2faf773fc00b78704743e689674cf1a', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
                 ? this.numberOfAllChildElements
-                : this.showAllCount, showLess: this.isShowingAll, labelShowLess: this.i18nShowLess, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '8f0c772fd5282eac63078c8f7c5873ccf81c08c2', class: {
+                : this.showAllCount, showLess: this.isShowingAll, labelShowLess: this.i18nShowLess, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '36fd2e7fb75fd0e4e7ebaadd6f19aa2e26edbc10', class: {
                 CardList__Overflow: true,
-            }, style: this.computeMaskLayer() }, h("div", { key: '504f496228535e8cae45ed92631c33b8be7ba2cc', class: {
+            }, style: this.computeMaskLayer() }, h("div", { key: '24a16d383eb1af5a329c417a868524d8c55fbc0c', class: {
                 CardList__Content: true,
                 CardList__Content__Collapsed: this.collapse,
                 CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',
                 CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',
-            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: 'f95b698b9662865eabed3adc1ebed999efe342d2', onSlotchange: () => {
+            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: '9c07172b248331bbf093808e2873ca56daca17aa', onSlotchange: () => {
                 this.changeVisibilityOfSlotChildren();
             } }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
                 Show__All__Card: true,

package/dist/collection/components/card-title/card-title.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class CardHeader {
     render() {
-        return (h(Host, { key: '118fc1fabc92827855d151206ee45226d23cd269' }, h("slot", { key: '0b2536768b4509e294d98d117c9a28f3cc5b7a12' }), h("div", { key: '5611dca0fe3debc9c0fbe5ae96e4c221187cc12a', class: "title-actions" }, h("slot", { key: 'ffa0ad8bd01bc19cd39ccaf08b67d2d6a7cb5a1c', name: "title-actions" }))));
+        return (h(Host, { key: 'e9eaf85f867d2f86338ef00978b70186aa045b72' }, h("slot", { key: '8bbdbd5a707b20d794dbac5e3e3186a954c6d1e0' }), h("div", { key: '767409c623fa8b77edd53c51a9640c41cd76625e', class: "title-actions" }, h("slot", { key: 'c9a81e18169fbafa8797f5f9d0ec2dd8926e0259', name: "title-actions" }))));
     }
     static get is() { return "ix-card-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -155,7 +155,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;
@@ -266,7 +266,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;

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

@@ -578,19 +578,19 @@ export class CategoryFilter {
         return 'color-primary';
     }
     render() {
-        return (h(Host, { key: 'c73d0e566104b724e94d5126d32d6d3dd9020723' }, h("form", { key: 'c0ca80946c151d79cc1e7133c6d81722e4edc443', ref: (el) => (this.formElement = el) }, h("div", { key: 'e3279f329d8d75d6927e237927d45b12c61ba902', "read-only": this.readonly, class: {
+        return (h(Host, { key: '85dbdb78b8e91f24bd024a7f807981c1be021949' }, h("form", { key: 'c7bbb49d432f280a07decbe120f73d6c797d8cc7', ref: (el) => (this.formElement = el) }, h("div", { key: '0564d4922c264f58cdbd27da56913b09fc7ab9a5', "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: '1a674e8c6c2d3a2422007281d3bde814018778d3', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: this.icon ?? iconSearch, size: "16" }), h("div", { key: '31860c9a24615800bfef45f36cafeefef9ceca3e', class: "token-container" }, h("div", { key: 'a049e7e8b4efdb7ea0e4aa9faa57c95e8d6efe41', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { key: value.toString(), class: {
+            } }, h("ix-icon", { key: '3807f9bee30d44bcca3a8aefda6889958f5fa781', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: this.icon ?? iconSearch, size: "16" }), h("div", { key: 'eee8f5b467efe653a186361cd6db76a6a92bdb15', class: "token-container" }, h("div", { key: 'd82c1963974f8213fab1b90473d8f0c883306281', 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: 'b27adcc9da01d9a20064c8166d35d66107ba28ac', class: {
+            } }, this.categories[this.category]?.label)), h("input", { key: 'bb6d42b5691fa761ed9f8196edce521e5e5e04aa', 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/checkbox/checkbox.css

@@ -74,6 +74,14 @@
 :host ::-webkit-scrollbar-corner {
   display: none;
 }
+:host .checkbox-button {
+  height: 1.5rem;
+  width: 1.5rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 :host button {
   all: unset;
   display: inline-flex;
@@ -86,7 +94,6 @@
   height: 1.125rem;
   min-height: 1.125rem;
   max-height: 1.125rem;
-  margin-right: 0.5rem;
 }
 :host button:disabled {
   background-color: var(--theme-checkbox-unchecked--background--disabled);
@@ -102,13 +109,15 @@
 :host label {
   display: flex;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
+  gap: var(--theme-space-0);
   width: 100%;
   height: 100%;
   cursor: pointer;
 }
-:host ix-typography {
-  margin-top: 0.125rem;
+
+:host(.label-less) ix-typography {
+  display: none;
 }
 
 :host button {