@siemens/ix 5.0.0 → 5.1.1

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

@@ -13,6 +13,13 @@ import { useContextProvider } from "../utils/context";
 import { menuController } from "../utils/menu-service/menu-service";
 import { hasSlottedElements } from "../utils/shadow-dom";
 import { themeSwitcher } from "../utils/theme-switcher";
+/**
+ * @slot application-header - Header displayed at the top of the application.
+ * @slot menu - Main application navigation.
+ * @slot application-sidebar - Sidebar displayed next to the main content.
+ * @slot default - Main application content.
+ * @slot bottom - Footer displayed below the main content.
+ */
 export class Application {
     hostElement;
     /**
@@ -29,9 +36,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 +54,7 @@ export class Application {
      */
     breakpoints = ['sm', 'md', 'lg'];
     onBreakpointsChange(breakpoints) {
-        applicationLayoutService.setBreakpoints(breakpoints);
+        this.setBreakpoints(breakpoints);
     }
     /**
      * Define application switch configuration
@@ -64,20 +76,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 +125,12 @@ export class Application {
         });
     }
     render() {
-        return (h(Host, { key: '9621e446a9532a740dcdef516a51d326c59587a7', "data-role": "", class: {
+        return (h(Host, { key: 'cf020f40f480159fd1949387d82bb4f9def90ec0', "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: 'a2f00e2aeca45e27c775b3ff98bdc71a45b9462d', name: "application-header" }), h("div", { key: '24def38eb1881d5aa3204a9c0ebb4ac18a79cf52', class: "application" }, h("slot", { key: '16fbf3b5ced61520056cfbf540bc2653b67e1b63', name: "menu" }), h("aside", { key: '8f7fca6b4c7ec5fd13af2c0aac292e32a0fd6744', 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: '10ddd10b40d68daacae0766af6fd35970a2e6792', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: '9174218df39d64bf2259041e113f42ecdde223b5', class: "content-area" }, h("main", { key: '38e2510f631cb1e65fa407c8a5d763baf085a49e', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'c6217838be3d5367c530e5a4301e9571ff823304' })), h("footer", { key: 'c6b419361dddd826a03bb74563d7ce3ac0d1ec10', class: "footer" }, h("slot", { key: '51674410bb529c5733d665ef99213d25fc000dd0', name: "bottom" }))))));
     }
     static get is() { return "ix-application"; }
     static get encapsulation() { return "shadow"; }
@@ -262,6 +281,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

@@ -21,6 +21,7 @@ import { hasSlottedElements } from "../utils/shadow-dom";
  * @slot secondary - Place additional items inside the header. They will appear after logo and name. If the screen size is small, the items will be shown inside a dropdown.
  * @slot overflow - Use this slot to display additional items that do not fit in the default or secondary slot.
  * @slot logo - Place a company logo inside the header. Alternatively the companyLogo property can be set.
+ * @slot ix-application-header-avatar - Place an avatar at the end of the header.
  */
 export class ApplicationHeader {
     hostElement;
@@ -234,31 +235,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: 'e748601f8379536c62fe20edf48634ec7373fdbe', 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: '0153872edf217449e8b7ac4eaad0b7304e44f171', class: "left-side" }, this.appIcon && this.breakpoint !== 'sm' && (h("div", { key: '4934436922dca879c5ecbd8fd19379000fcea7be', 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: 'c253d49a3a37507daace6db886c33e899c3de9be', src: this.appIcon, alt: this.appIconAlt }))), (this.showMenu || showMenuByApplicationFrame) && (h("ix-menu-expand-icon", { key: 'e4bcdb607e5f50873f0f90bc6a1bad167d8b6cbf', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (h("ix-icon-button", { key: '6de3d4401ecd71c97b0008bb8bf4142ee68aa3ac', 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: '549e18052627c090a6ac795276cbb5ca3d44d3a4', class: "logo" }, h("img", { key: '89a662b47ae47e1e2a59065bf67f9abae02aa337', src: this.companyLogo, alt: this.companyLogoAlt }))), h("div", { key: 'a1f5332a2abc48f3e33fff59d3b1d512b1babab7', 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: 'd7961a13bcd1939607fc164f38b8a037838c3546', name: "logo", onSlotchange: () => (this.hasSlottedLogo = this.checkLogoSlot()) })), h("div", { key: 'd8824ebba9f3e8c938581d8bc4e822383a014cd4', class: "name" }, h("ix-typography", { key: 'e9add4d68d6fb7748d3f660cafea9651512c06b0', format: "body-lg", class: "application-name" }, this.name), this.nameSuffix && this.breakpoint !== 'sm' && (h("ix-typography", { key: 'a4ff0de3510e4466b03818f4cf486e2cf6cf81fa', format: "body-xs", class: "application-name-suffix" }, this.nameSuffix)))), h("div", { key: 'bace1c6516c55779fb03b24fa17f951d5fbd3380', class: { 'right-side': true, sm: this.breakpoint === 'sm' } }, this.breakpoint !== 'sm' && (h("div", { key: 'a16cd7e3894c90e3914f1914b4f01b755f86e8f2', class: "secondary" }, h("slot", { key: '46dab9c71d01179bab155b26d74318f5aeac914d', name: "secondary" }))), h("div", { key: '5bb2ff0dc16081eb95ad3d2261215b9c91c44591', class: "content" }, this.breakpoint !== 'sm' && h("slot", { key: '652934ebe4966258b5574275f130c8ff3c108320' }), h("ix-icon-button", { key: 'e43e93204884512375a5e3aa58f8942d5ffadabd', 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: '40504c3b1da650adfac72d3b599dc76826f87db3', "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton(), "aria-hidden": a11yBoolean(!this.hasOverflowContextMenu), enableTopLayer: this.enableTopLayer }, h("div", { key: '32354b88745e7d3abc82092508d7e239dc7cdd08', class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, this.breakpoint === 'sm' && (h("div", { key: 'fbb40a8a3fc271d790e777e14bd0d761a2ffa9c2', 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: '8810899a0a8af80c84cbd9ea850571f851133dd1', name: "secondary", onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), this.breakpoint === 'sm' && (h("div", { key: '29ab95c0abfae49bfcef966e8d886989c5913667', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasDefaultSlotElements,
-            } }, h("slot", { key: '607ce94ee9c05f07281b921ef9da3c3417b8c99b', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), h("div", { key: '223851bee394e67075ad931e54980b0c2691c98e', class: {
+            } }, h("slot", { key: '1ba46d784afe0ec5cdc13dee3a428b78c8d8ad45', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), h("div", { key: '426357c44559b9f8e262d327f3f9e9293c3dfdee', 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: 'caa7b3ba3108478d3b50c2a67d33f844f66b9891', name: "overflow", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })))), h("slot", { key: '3816f891d0c7980680d61acd9828e90e01b84e33', 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/avatar/avatar.js

@@ -28,6 +28,9 @@ function AvatarImage(props) {
 function UserInfo(props) {
     return (h(Fragment, null, h("div", { class: "user-info", onClick: (event) => event.preventDefault() }, h(AvatarImage, { image: props.image, initials: props.initials, ariaLabel: props.ariaLabel }), h("div", { class: "user" }, h("div", { class: "username" }, props.userName), props.extra && (h("ix-typography", { class: "extra", "text-color": 'soft' }, props.extra))))));
 }
+/**
+ * @slot default - Custom content displayed inside the avatar dropdown when placed inside header.
+ */
 export class Avatar extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActiveDescendantMixin) {
     constructor() {
         super();

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

@@ -12,6 +12,11 @@ import { a11yBoolean } from "../utils/a11y";
 import { iconChevronDownSmall } from "@siemens/ix-icons/icons";
 import Animation from "../utils/animation";
 let sequentialInstanceId = 0;
+/**
+ * @slot custom-header - Custom content inside blind header.
+ * @slot header-actions - Actions displayed at the end of the header.
+ * @slot default - Expandable blind content.
+ */
 export class Blind {
     /**
      * Collapsed state
@@ -87,17 +92,17 @@ export class Blind {
         });
     }
     render() {
-        return (h(Host, { key: '08686a07866cce941b0d3fee3c59acda57fd9697', class: {
+        return (h(Host, { key: 'd4d3073ce0e5bb301ab3eafdfd3baa9bbfd35b4a', class: {
                 [`blind-${this.variant}`]: true,
-            } }, h("div", { key: '37c3d29dfa4113fa51971c8487158c30dcac0cf6', class: 'blind-header-wrapper' }, h("button", { key: '1a725a4d9991ef417fdcd06d83565a994d20bc10', class: {
+            } }, h("div", { key: 'b600604d30b5b8a3fb47891ac650a204a5180e58', class: 'blind-header-wrapper' }, h("button", { key: '52441c0c6c80dea2691f26363b491940dc6fde57', 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: 'a1ac571e4c4d2b14e83cb224a6da95bae3a7b323', name: "custom-header" })), h("div", { key: 'f5af85350a88c131c99bd8cbb7884c9bc92edb7e', class: 'blind-header-content' }, h("ix-icon", { key: 'd45b602a0bfcf9e7feacbd0caea0d9f2824e3b35', 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: 'bc102437864da77d85a0994fcc6fad9a64953d34', 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: '28f47c54f5845c27d505b90bc1c018897dd16bcb', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: 'c91ee84a868f13f7ce48ba075a85d123debb6500', class: {
                 'blind-content': true,
                 hide: this.collapsed,
             } }, !this.collapsed ? h("slot", null) : null))));

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

@@ -11,6 +11,9 @@ import { h, Host, Mixin, } from "@stencil/core";
 import { a11yHostAttributes } from "../utils/a11y";
 import { DefaultMixins } from "../utils/internal/component";
 import { createMutationObserver } from "../utils/mutation-observer";
+/**
+ * @slot default - Breadcrumb items.
+ */
 export class Breadcrumb extends Mixin(...DefaultMixins) {
     constructor() {
         super();
@@ -109,7 +112,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: 'c63417821c2568df84e4baac933ae48adebb9eaa', ...this.inheritAriaAttributes, role: "navigation" }, this.items?.length > this.visibleItemCount && (h("ix-dropdown-button", { key: '48cb02774fdb31022f0937c21e4bedf0b05d355c', "aria-label": this.ariaLabelPreviousButton, label: "...", variant: "tertiary", class: "previous-button", enableTopLayer: this.enableTopLayer }, h("ix-icon", { key: 'b71d928673dcd5e2499bc053df3778f0ef479f74', 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 +122,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: '28b88b7ea6fd07b602029e84d5ffb25fcc1a9c9d', class: "crumb-items" }, h("slot", { key: '377355ec37213169ce75c9a9114ed5111624890c' })), this.shouldRenderNextDropdown && (h("ix-dropdown-button", { key: '911d84229dce59da156efa9ea9878e86bd9849aa', label: labelLastItem.label ?? labelLastItem.innerText, class: "next-button", variant: "tertiary", enableTopLayer: this.enableTopLayer, "aria-current": "page" }, h("ix-icon", { key: '20982db434ac5647b57b29e9287ac9bcfa5ccf7b', 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

@@ -11,6 +11,9 @@ import { BaseButton } from "../button/base-button";
 import { iconChevronRightSmall } from "@siemens/ix-icons/icons";
 import { DefaultMixins } from "../utils/internal/component";
 import { InheritAriaAttributesMixin, } from "../utils/internal/mixins/accessibility/inherit-aria-attributes.mixin";
+/**
+ * @slot default - Breadcrumb item label.
+ */
 export class BreadcrumbItem extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor() {
         super();
@@ -80,7 +83,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/button/button.js

@@ -10,6 +10,9 @@ import { h, Host, Mixin, } from "@stencil/core";
 import { BaseButton } from "./base-button";
 import { DefaultMixins } from "../utils/internal/component";
 import { InheritAriaAttributesMixin, } from "../utils/internal/mixins/accessibility/inherit-aria-attributes.mixin";
+/**
+ * @slot default - Button label.
+ */
 export class Button extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor() {
         super();
@@ -140,9 +143,9 @@ export class Button extends Mixin(...DefaultMixins, InheritAriaAttributesMixin)
             target: this.target,
             rel: this.rel,
         };
-        return (h(Host, { key: 'd1e348cdda5394f93ae75079322849917e1e040e', class: {
+        return (h(Host, { key: '0eb555f606e1fb774004c7ab8d950076baaa0284', class: {
                 disabled: this.disabled || this.loading,
-            }, tabIndex: this.disabled || this.loading ? -1 : 0 }, h(BaseButton, { key: 'eee6a0b44c096b102d9884e17113559e1f1efb8f', ...baseButtonProps }, h("slot", { key: 'c67238c777a2eb84d72739f7b7c7274dffc1ca22' }))));
+            }, tabIndex: this.disabled || this.loading ? -1 : 0 }, h(BaseButton, { key: 'a9ead157a199a3575627f4af70a0355687d4e990', ...baseButtonProps }, h("slot", { key: 'de07260fc4785b2c30e6fdace31005435f273a93' }))));
     }
     static get is() { return "ix-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,8 @@
 import { h, Host } from "@stencil/core";
+/**
+ * @slot default - Main card content.
+ * @slot card-accordion - Accordion displayed in the card footer.
+ */
 export class Card {
     hostElement;
     /**
@@ -14,11 +18,11 @@ export class Card {
      */
     passive = false;
     render() {
-        return (h(Host, { key: '2028efc4ea15150b5e3190d550a50b3a4521a0e5', class: {
+        return (h(Host, { key: 'f03127d68ad6d11da72bcc3fd2b35c7f2f45c390', 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: 'd509b3f44bd4a18fcb681d5c0679f1ee878d6a12', class: "card-content" }, h("slot", { key: 'f3517a1efda8bcf1a5ee9652450effdd04a01ea9' })), h("div", { key: '7e188b0dff328111f405b3c24b17cdf5ffe98c8d', class: "card-footer" }, h("slot", { key: '249d1d75a93c74866a112efc6cd8a1918740e4f2', name: "card-accordion" }))));
     }
     static get is() { return "ix-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,6 +4,9 @@ let accordionControlId = 0;
 const getAriaControlsId = (prefix = 'expand-content') => {
     return [prefix, accordionControlId++].join('-');
 };
+/**
+ * @slot default - Accordion content.
+ */
 export class CardAccordion {
     /**
      * ARIA label for the card's expand button.
@@ -60,15 +63,15 @@ export class CardAccordion {
         this.onInitialExpandChange();
     }
     render() {
-        return (h(Host, { key: '99d74bce00deda78eec3e658c6315074bcc6f838', slot: "card-accordion", class: {
+        return (h(Host, { key: '5895eac0bfacb903c7c0d4b8119fa1c5740d0a38', 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: '269999da5591350946e1f2cf9f767617f0afbeec', 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: '566dd098a706b8a6f3e6d92d00f05d768fe429c3', name: iconChevronDownSmall, class: {
                 'expand-icon': true,
                 show: this.expandContent,
-            } })), h("div", { key: '55d278b4ff6fff66a0d1daee213c558bc5fa95cc', class: {
+            } })), h("div", { key: '38259672ff7307ab14d1f90216950aace14bfe1b', 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: 'a9c79af5f2beea7bc3cc5f9f5c182438c363e220', class: "expand-content-inner" }, h("div", { key: 'a460bd87f4f7e1eb40072a756f9f1ffcd23451eb', class: "expand-content-body" }, h("slot", { key: '916a58024ec98a54b9e348de6544d48981824e5f' })), h("div", { key: '9f45502dfb26f863e4a010e237bc7db3de534f45', 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,10 @@
 import { h, Host } from "@stencil/core";
+/**
+ * @slot default - Card body content.
+ */
 export class CardContent {
     render() {
-        return (h(Host, { key: '397c2774e53fbd7419f4295a299f16eaafb7413c' }, h("div", { key: 'd9500640a9a0ba2e508993fe8619fe0c534bea0e', class: "content-wrapper" }, h("slot", { key: '90aeec19d833b538bbcb4d44208f95b50d7f10c6' }))));
+        return (h(Host, { key: '1198efe8d8ff7651bf7388ef59a441dacb56893d' }, h("div", { key: 'af4efb9e309955fd6ec9e07e32d477655a6db7c3', class: "content-wrapper" }, h("slot", { key: '661b91d70973f16ae60a9eacb1f58a8b7e3cdc98' }))));
     }
     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,18 +1,21 @@
 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)
         ? ` (${props.showAllCounter})`
         : null)))))));
 }
+/**
+ * @slot default - Cards displayed in the list.
+ */
 export class CardList {
     /**
      * ARIA label for the card's expand button.
@@ -202,16 +205,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: '8bcf64535742038e957dfc635c73ed0ed47279ec' }, h(CardListTitle, { key: 'b8f10c342836f5dc40cac1c4146302292638e36b', 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: '5b58a1b417432b173720024ab2cb5a1987e8b6d6', class: {
                 CardList__Overflow: true,
-            }, style: this.computeMaskLayer() }, h("div", { key: '504f496228535e8cae45ed92631c33b8be7ba2cc', class: {
+            }, style: this.computeMaskLayer() }, h("div", { key: 'c29a2167cd3cfafec0201e5b94991f315d4fbf63', 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: '3507c68ab7bbd51d0fb0f3757ff81b6fe9ca5059', onSlotchange: () => {
                 this.changeVisibilityOfSlotChildren();
             } }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
                 Show__All__Card: true,

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

@@ -1,10 +1,11 @@
 import { h, Host } from "@stencil/core";
 /**
+ * @slot default - Card title.
  * @slot title-actions - Place additional actions inside title
  */
 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: 'c50fb67ce42087c697968348b95fb02101b15b86' }, h("slot", { key: '0c245caa0f0e71ba88966b1e11eac12d598b2d9d' }), h("div", { key: '90ff563a14756a276e6188ebee294fb484c18a77', class: "title-actions" }, h("slot", { key: '1da997f39903021f1edb96508982fb699cc8b3a6', name: "title-actions" }))));
     }
     static get is() { return "ix-card-title"; }
     static get encapsulation() { return "shadow"; }