@siemens/ix 5.1.0 → 5.1.1

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

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 import { a11yBoolean, getFallbackLabelFromIconName } from "../utils/a11y";
 /**
- * @slot - Place additional non-interactive content inside the card. Avoid interactive elements (links, buttons, inputs) as the card itself is rendered as a single button.
+ * @slot default - Place additional non-interactive content inside the card. Avoid interactive elements (links, buttons, inputs) as the card itself is rendered as a single button.
  */
 export class IxActionCard {
     /**
@@ -57,8 +57,8 @@ export class IxActionCard {
         const ariaLabelledBy = !this.ariaLabelCard && this.heading
             ? 'ix-action-card-heading'
             : undefined;
-        return (h(Host, { key: 'b56ab72218bf3b098acb7d1f7bbbc967dc7851c9' }, h("button", { key: '87ef305e4149a4f883f52b9d2d26cc3080073082', type: "button", disabled: this.passive, "aria-label": this.ariaLabelCard, "aria-labelledby": ariaLabelledBy }, h("ix-card", { key: '5064b548f6434036d5c46e9162e4bad1f06f3a40', selected: this.selected, variant: this.variant, passive: this.passive, class: this.passive ? undefined : 'pointer' }, h("ix-card-content", { key: 'dbfb7bcda7ae018721e8e1d06f85b2fadd8330d0' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon ||
-                getFallbackLabelFromIconName(this.icon) })) : null, h("div", { key: '51a82f1f462f9638980f7f2b18a4cfd54db24cf6' }, this.heading ? (h("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, h("slot", { key: 'c8ae09e93db05dab6f0a1820c0022c9142b6cc54' })))))));
+        return (h(Host, { key: '13c017461553dde76509473679c2c0942f0536ef' }, h("button", { key: 'b0a154fff6809c67e595a90137ba46eaab2654ed', type: "button", disabled: this.passive, "aria-label": this.ariaLabelCard, "aria-labelledby": ariaLabelledBy }, h("ix-card", { key: '1718627fa2718bf42b19d8b967ea556fa0b7bc09', selected: this.selected, variant: this.variant, passive: this.passive, class: this.passive ? undefined : 'pointer' }, h("ix-card-content", { key: 'fa854f2be562cd938122504d2f531f4f9bac52e9' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon ||
+                getFallbackLabelFromIconName(this.icon) })) : null, h("div", { key: 'bcf7099102118877945d25a908b988e6bfccf00f' }, this.heading ? (h("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, h("slot", { key: 'd77220fa34088b62378d3c095c50f87e4442a002' })))))));
     }
     static get is() { return "ix-action-card"; }
     static get encapsulation() { return "shadow"; }

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;
     /**
@@ -118,12 +125,12 @@ export class Application {
         });
     }
     render() {
-        return (h(Host, { key: 'b580ca5dbbd164b45beb5b6863fc3f6ffd830f08', "data-role": "", class: {
+        return (h(Host, { key: 'cf020f40f480159fd1949387d82bb4f9def90ec0', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, h("slot", { key: '6055d2a286d3b90e4aca43bee094e509ab4780fd', name: "application-header" }), h("div", { key: '6418c3369dc0525d99c29015d5717a791a2ddd4c', class: "application" }, h("slot", { key: 'a6adda421cf6294d34da129a5dd3bc366f6384ca', name: "menu" }), h("aside", { key: '3f359f1ef65e8fa1f35f4001b23ec10d32a7d5be', 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: '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" }))))));
+            }, 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"; }

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: '65415a8abe50d9b368d9c71001a0968cf2264fb8', class: {
+        return (h(Host, { key: 'e748601f8379536c62fe20edf48634ec7373fdbe', class: {
                 [`breakpoint-${this.breakpoint}`]: true,
                 'hide-bottom-border': this.hideBottomBorder,
-            }, slot: "application-header", role: "banner" }, h("div", { key: '79849e061e06d01eba6f4d802f48d226480857b2', class: "left-side" }, this.appIcon && this.breakpoint !== 'sm' && (h("div", { key: 'b5c6140d263e7ff6ffe3937a4341bcd2b9935104', 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: '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: {
+            } }, 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: '8c2dc3e31111a04c5e7aecabd11b458dc1c6b199', class: "logo" }, h("img", { key: '0594b3e00eb190ac2beef24df3c6987668c1fd69', src: this.companyLogo, alt: this.companyLogoAlt }))), h("div", { key: 'b51ceb91b1079d363999026e560874b0c2a1e390', 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: '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: {
+            } }, 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: '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: {
+            }, "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: '6a8c8df87ce24ca24cee6738e16cae3150370573', name: "secondary", onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), this.breakpoint === 'sm' && (h("div", { key: 'ffb74288c8b2f71941c9f9c4d710c4fe44c9996a', 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: '4d7d25254108d0297137f624a4ed248a4b8e8a7f', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), h("div", { key: '188ccce5cc9eddf0bdadc92716a98f82491c3fcf', class: {
+            } }, h("slot", { key: '1ba46d784afe0ec5cdc13dee3a428b78c8d8ad45', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), h("div", { key: '426357c44559b9f8e262d327f3f9e9293c3dfdee', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasOverflowSlotElements,
-            } }, h("slot", { key: 'f5c7c0c2efec69700a7f44c90a89f56aec34ac85', name: "overflow", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })))), h("slot", { key: '002c29f2656a44471f7990d50354bf2767ca2021', 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/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.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: '013b57ee3c249c67c3ec35bc94924b08a0828723', class: {
+        return (h(Host, { key: 'd4d3073ce0e5bb301ab3eafdfd3baa9bbfd35b4a', class: {
                 [`blind-${this.variant}`]: true,
-            } }, h("div", { key: 'a03bf76f5ff8628de0958f3f12ae69bfadf68010', class: 'blind-header-wrapper' }, h("button", { key: '48e9d20e1bce06e2b305b856e3c7ec52d882c197', 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: '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'
+            }, 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: '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-${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: '10d8459ac5f41b8a09848e3182f68d641d369541', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: 'f39a05f57e022918dd7cbce8454f9f0aa60d2a79', 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: '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
+        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: '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) => {
+        }))), 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.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();

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: 'b7cda25da56fae5d7bb3afd89867d7d64e66da9d', class: {
+        return (h(Host, { key: 'f03127d68ad6d11da72bcc3fd2b35c7f2f45c390', class: {
                 selected: this.selected,
                 [`card-${this.variant}`]: true,
                 passive: this.passive,
-            } }, 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" }))));
+            } }, 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: 'cdd4feba2b9ae022141114a75d9ae13910c35915', slot: "card-accordion", class: {
+        return (h(Host, { key: '5895eac0bfacb903c7c0d4b8119fa1c5740d0a38', slot: "card-accordion", class: {
                 [`variant-${this.variant}`]: true,
-            } }, 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: {
+            } }, 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: '57ddf6374b94637e674e1c061344cec87a20addc', class: {
+            } })), h("div", { key: '38259672ff7307ab14d1f90216950aace14bfe1b', class: {
                 'expand-content': true,
                 show: this.expandContent,
-            } }, 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" })))));
+            } }, 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: '918473b60dc96e14c935bd7d46022b7a9c0abf46' }, h("div", { key: '4e5593a246b22c0d04f777ff89bbc8a936d05db3', class: "content-wrapper" }, h("slot", { key: '7a89cac6011e0446fe3a0cfd45036967af53ab79' }))));
+        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.js

@@ -13,6 +13,9 @@ function CardListTitle(props) {
         ? ` (${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: '4cb1bcba15f7877fc6d6fda2989a321cff75b21e' }, h(CardListTitle, { key: 'e8dd21fcc2faf773fc00b78704743e689674cf1a', 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: '36fd2e7fb75fd0e4e7ebaadd6f19aa2e26edbc10', 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: '24a16d383eb1af5a329c417a868524d8c55fbc0c', 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: '9c07172b248331bbf093808e2873ca56daca17aa', 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: 'e9eaf85f867d2f86338ef00978b70186aa045b72' }, h("slot", { key: '8bbdbd5a707b20d794dbac5e3e3186a954c6d1e0' }), h("div", { key: '767409c623fa8b77edd53c51a9640c41cd76625e', class: "title-actions" }, h("slot", { key: 'c9a81e18169fbafa8797f5f9d0ec2dd8926e0259', 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"; }

package/dist/collection/components/checkbox/checkbox.js

@@ -23,6 +23,7 @@ import { makeRef } from "../utils/make-ref";
 import { hasSlottedContent } from "../utils/shadow-dom";
 /**
  * @form-ready
+ * @slot default - Checkbox label.
  */
 export class Checkbox {
     hostElement;
@@ -125,14 +126,14 @@ export class Checkbox {
         return (h("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, this.indeterminate && (h(Fragment, null, h("rect", { width: "18", height: "18", fill: "transparent" }), h("rect", { x: "3", y: "8", width: "12", height: "2", fill: "var(--ix-checkbox-check-color)" }))), this.checked && (h("path", { d: "M3.65625 8.15625L8.4375 12.9375L14.625 3.9375", stroke: "var(--ix-checkbox-check-color)", "stroke-width": "2" }))));
     }
     render() {
-        return (h(Host, { key: '9c353db29458af8bf9fff3a1433791dcaedb9e76', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "checkbox", class: {
+        return (h(Host, { key: '35812b8dead64c244b7a52eb16928bad8d7ab3ac', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "checkbox", class: {
                 disabled: this.disabled,
                 checked: this.checked,
                 indeterminate: this.indeterminate,
                 'label-less': this.isLabelLess,
-            }, onFocus: () => (this.touched = true), onBlur: () => this.ixBlur.emit() }, h("label", { key: 'd0ed641122caa2175facad671e038b5f6f61926a' }, h("input", { key: 'ce50b07c238ecf34096c4294d7795f585b896836', "aria-checked": a11yBoolean(this.checked), required: this.required, disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "checkbox", onChange: () => this.setCheckedState(!this.checked) }), h("div", { key: '81b24e66445a7a79dbf0ee2cfd129b70d74f9b74', class: "checkbox-button" }, h("button", { key: '180a94cca8a27191d0853356e814e94af7d1edc5', disabled: this.disabled, class: {
+            }, onFocus: () => (this.touched = true), onBlur: () => this.ixBlur.emit() }, h("label", { key: '95d7ed9fcd59474b6978819a9b7c97ba80ba26fd' }, h("input", { key: 'cf9c3545c17df102d35900d5243c1f1c50f18c6f', "aria-checked": a11yBoolean(this.checked), required: this.required, disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "checkbox", onChange: () => this.setCheckedState(!this.checked) }), h("div", { key: 'bd5a04e233b741022ee5398b13d60db12a5fd128', class: "checkbox-button" }, h("button", { key: 'ab34c031e430e2f867288961d6e2aad70bd0efff', disabled: this.disabled, class: {
                 checked: this.checked,
-            }, onClick: () => this.setCheckedState(!this.checked) }, this.renderCheckmark())), h("ix-typography", { key: 'c2eef4e975fcb6fde8a381818896d74af3e6d5a3', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: 'c3b38ea2eba94a7093fa9d9394cfd197144cdec9', onSlotchange: () => this.updateDefaultSlotElements(), ref: (element) => (this.defaultSlotElement = element) })))));
+            }, onClick: () => this.setCheckedState(!this.checked) }, this.renderCheckmark())), h("ix-typography", { key: '1de00db72c4eb6c2d259eead82e76e07ec10922b', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '781bb2d36b1e5b006fea618ad39b0af0a2000b21', onSlotchange: () => this.updateDefaultSlotElements(), ref: (element) => (this.defaultSlotElement = element) })))));
     }
     static get is() { return "ix-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,6 +13,7 @@ import { HookValidationLifecycle, } from "../utils/input";
 import { makeRef } from "../utils/make-ref";
 /**
  * @form-ready
+ * @slot default - Checkboxes displayed in the group.
  */
 export class CheckboxGroup {
     hostElement;
@@ -102,10 +103,10 @@ export class CheckboxGroup {
         return Promise.resolve(this.checkboxElements.some((checkbox) => checkbox.checked));
     }
     render() {
-        return (h(Host, { key: 'c4fc534271973ace749f101e65f59286d9ac2155', ref: this.groupRef, onIxBlur: () => (this.touched = true) }, h("ix-field-wrapper", { key: '2bd30dc064e6f611b8ae14c3d11f108f91dfb8d7', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, validText: this.validText, warningText: this.warningText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isInfo: this.isInfo, isValid: this.isValid, isWarning: this.isWarning, controlRef: this.groupRef }, h("div", { key: '86a167bd0b683913f7cba7250f64bd93f6c319a5', class: {
+        return (h(Host, { key: 'd6718d48f2596083126ff7d697c1defea55d5a03', ref: this.groupRef, onIxBlur: () => (this.touched = true) }, h("ix-field-wrapper", { key: 'dc0cdf907e3aed04ba33dd10802af6cad2621d58', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, validText: this.validText, warningText: this.warningText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isInfo: this.isInfo, isValid: this.isValid, isWarning: this.isWarning, controlRef: this.groupRef }, h("div", { key: '95782aa76994a8867fa31a7f4ba3a5c5fa8811bb', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: 'a46e693b49c0f23214fb8dbd5c089e42652b746f' })))));
+            } }, h("slot", { key: 'f0c035b2293f104bdd57bcebb392c2d9fdca9c56' })))));
     }
     static get is() { return "ix-checkbox-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip/chip.js

@@ -13,6 +13,9 @@ import { DefaultMixins } from "../utils/internal/component";
 import { InheritAriaAttributesMixin, } from "../utils/internal/mixins/accessibility/inherit-aria-attributes.mixin";
 import { makeRef } from "../utils/make-ref";
 import { CHIP_VARIANTS } from "./chip.types";
+/**
+ * @slot default - Chip label.
+ */
 export class Chip extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
     constructor() {
         super();
@@ -152,14 +155,14 @@ export class Chip extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
             !!this.inheritAriaAttributes['aria-labelledby']?.trim();
         const hasTooltip = !!this.tooltipText || this.hostElement.hasAttribute('tooltip-text');
         const needsGroupRole = hasAccessibleName && (showClose || hasTooltip);
-        return (h(Host, { key: '9f724c90d7b7b50436fd53dac1c9e473b568f8f6', role: this.getHostRole(needsGroupRole), class: {
+        return (h(Host, { key: '074e1b8df0edfe5db620b313070c952d94fb6764', role: this.getHostRole(needsGroupRole), class: {
                 inactive: this.inactive,
-            } }, h("div", { key: '5fe02566c2d6b0a5ef6c6bc5c75aa8a1c9eae41c', ref: this.containerElementRef, class: wrapClasses, style: customWrapStyle }, h("button", { key: '9fe4c5a27535af0dc8bff42cc2d4e7277e91e7bd', type: "button", class: "chip-main", ...this.inheritAriaAttributes, disabled: this.inactive, style: customMainStyle }, h("div", { key: 'fa78760c9912d9642d95b60e401f599de00bc26c', class: "content-wrapper" }, this.icon && (h("ix-icon", { key: '34307f0a33c01af655f4d37498a6fc98dfc499c5', class: {
+            } }, h("div", { key: '4f3be99387f137357324a14e4b66c60c61e95c36', ref: this.containerElementRef, class: wrapClasses, style: customWrapStyle }, h("button", { key: '37c9d95256b2d0b1567cb6d9679cfedc319ae32a', type: "button", class: "chip-main", ...this.inheritAriaAttributes, disabled: this.inactive, style: customMainStyle }, h("div", { key: '44b27264ee46a492016c92085f2ca13370ba311f', class: "content-wrapper" }, this.icon && (h("ix-icon", { key: '05c6d7f19b9132c120e99110c76181557cb82c64', class: {
                 'with-icon': true,
-            }, name: this.icon, size: '24', "aria-label": this.ariaLabelIcon, "aria-hidden": a11yBoolean(iconIsDecorative), style: this.getIconStyle(variant) })), h("span", { key: 'c2093240153933547f8c1e6e5cbe80d664c5aafa', class: "slot-container" }, h("slot", { key: 'c08bf6660d91b77e9d640583a9e2eb5cc4de7365' })))), showClose && (h("button", { key: '233aaa96d9650b9b357b7bae028f9baafd312517', type: "button", class: "chip-close", "aria-label": this.ariaLabelCloseButton, onClick: (event) => {
+            }, name: this.icon, size: '24', "aria-label": this.ariaLabelIcon, "aria-hidden": a11yBoolean(iconIsDecorative), style: this.getIconStyle(variant) })), h("span", { key: '303f4abb9ae0bff1d823d9a8960767df237282a6', class: "slot-container" }, h("slot", { key: '8918f352f8e7e73e8b9c1276025b9a440058173f' })))), showClose && (h("button", { key: '56f34dccef82fc49349dd0b323cd84f25ab3c401', type: "button", class: "chip-close", "aria-label": this.ariaLabelCloseButton, onClick: (event) => {
                 this.closeChip.emit(event);
                 event.stopPropagation();
-            } }, h("ix-icon", { key: 'f095e50123273af0a21f3321e6b81358f1cfe8b3', class: "chip-close__icon", name: iconCloseSmall, size: "16", "aria-hidden": "true" })))), this.getTooltip()));
+            } }, h("ix-icon", { key: '6bc6e05f59525c5819b95805fd95be372af1ec65', class: "chip-close__icon", name: iconCloseSmall, size: "16", "aria-hidden": "true" })))), this.getTooltip()));
     }
     static get is() { return "ix-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/col/col.js

@@ -8,6 +8,9 @@
  */
 import { forceUpdate, h, Host } from "@stencil/core";
 import { matchBreakpoint } from "../utils/breakpoints";
+/**
+ * @slot default - Column content.
+ */
 export class Col {
     static Breakpoints = ['', 'sm', 'md', 'lg'];
     /**
@@ -77,9 +80,9 @@ export class Col {
         };
     }
     render() {
-        return (h(Host, { key: '8f9bb67a9721a22dab39e140b0e180a868839416', style: {
+        return (h(Host, { key: '6cb1bfd2e52e79b9904cbed20b2e6f8ba09b5945', style: {
                 ...this.getColumnSizeStyling(),
-            } }, h("slot", { key: '2d34daa2051b168c8b4dd61233d80195be90f3d5' })));
+            } }, h("slot", { key: 'd3bcb1164a364e62f23200fc06d49e8f2a5c72ae' })));
     }
     static get is() { return "ix-col"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,6 +10,7 @@ import { h, Host } from "@stencil/core";
 import { hasSlottedElements } from "../utils/shadow-dom";
 /**
  * @slot header - Display content at the top of the content page
+ * @slot default - Main page content.
  */
 export class Content {
     hostElement;
@@ -18,12 +19,12 @@ export class Content {
         return this.hostElement.shadowRoot.querySelector('.content-header slot');
     }
     render() {
-        return (h(Host, { key: '2cb8428708f3a1e815704254035676f742cd6f30' }, h("div", { key: '4e275d8af38da243e29b46bb8e5dcc9e9d23b1da', class: {
+        return (h(Host, { key: '94c6e2d97d8194e53a2084003dc128037795da39' }, h("div", { key: '3bca63790f8f524bc807b7745effcfe6091efec4', class: {
                 'content-header': true,
                 slotted: this.isContentHeaderSlotted,
-            } }, h("slot", { key: '3e4a6609305c444deaacbf29a60514f300f65301', name: "header", onSlotchange: () => {
+            } }, h("slot", { key: 'b362b15e253b4e714b1d6f8c631e00d6a01f5668', name: "header", onSlotchange: () => {
                 this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
-            } })), h("div", { key: '893989653b3beaf7bc406e7870db8d8f7d0deba4', class: "content" }, h("slot", { key: '25b54aafbde16ab4d87a0cdbc4a8222dabacb226' }))));
+            } })), h("div", { key: '9e774c3fa07536e14f377d3188632e9fbb548d29', class: "content" }, h("slot", { key: '48301d9bc95492ee103a7a3d4767009147888994' }))));
     }
     static get is() { return "ix-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ import { iconArrowLeft } from "@siemens/ix-icons/icons";
 import { h, Host } from "@stencil/core";
 /**
  * @slot header - Content to be placed in the header area next to the title
- * @slot - Default slot for action buttons or other content
+ * @slot default - Default slot for action buttons or other content
  */
 export class ContentHeader {
     /**
@@ -34,13 +34,13 @@ export class ContentHeader {
      */
     backButtonClick;
     render() {
-        return (h(Host, { key: 'a81bf466bf10e9e7a0794253b246c340a9b92999' }, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() })) : null, h("div", { key: '7b81cb2b7c5d48fdd75b631e9ef2b5da9224f455', class: "titleGroup" }, h("div", { key: '59d28222f4bbfd83a94490f10bb67b944e44c79f', class: "headerTitleRow" }, h("ix-typography", { key: 'f6b3985a6b8e2420e4d63a7032b1ff1f12f93679', format: this.variant === 'secondary' ? 'h4' : 'h3', class: {
+        return (h(Host, { key: '7aff9412995ceff09f9e01cbe258702fd102ea75' }, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "tertiary", icon: iconArrowLeft, onClick: () => this.backButtonClick.emit() })) : null, h("div", { key: 'ee525ee229cdb39d8095189634bdd98c97a71a55', class: "titleGroup" }, h("div", { key: '15262bbc2565c60fbccf52284c926e3d71147337', class: "headerTitleRow" }, h("ix-typography", { key: 'e3c3a23df25528b96f22c4144a8a3e1d5cfea603', format: this.variant === 'secondary' ? 'h4' : 'h3', class: {
                 secondary: this.variant === 'secondary',
                 titleOverflow: true,
-            } }, this.headerTitle), h("div", { key: '9b1a9f865955f4b02a23a528d61e54959a8992d1', class: "headerSlot" }, h("slot", { key: '8d7d21906e9042de89123de9489b2cd8d8db25b5', name: "header" }))), !!this.headerSubtitle && (h("ix-typography", { key: '2b29f3ebde503fa328c10bad48ba5b98455d8a31', format: 'h6', "text-color": 'soft', class: {
+            } }, this.headerTitle), h("div", { key: '0faeabfcaa745ad3ae69ea1643767d5ba07f3ac9', class: "headerSlot" }, h("slot", { key: '569da58b7ae972574bb52b4a201d8a8f9e89bfc4', name: "header" }))), !!this.headerSubtitle && (h("ix-typography", { key: '38ce3d985ce6ac069ee1a47dcf999b9f7c1ec6af', format: 'h6', "text-color": 'soft', class: {
                 subtitle: this.variant === 'secondary',
                 titleOverflow: true,
-            }, title: this.headerSubtitle }, this.headerSubtitle))), h("div", { key: '0a558d5e3c40ab3e5ebd77c1ff8e0e316e263658', class: "buttons" }, h("slot", { key: 'f54687cd38db7f152f3495beec362f0dc82e2bef' }))));
+            }, title: this.headerSubtitle }, this.headerSubtitle))), h("div", { key: 'b792938f171aa505945a8da026303ebef1ba9837', class: "buttons" }, h("slot", { key: '68eb9f74a2120f9b62742b34735792cdf67530aa' }))));
     }
     static get is() { return "ix-content-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/css-grid/css-grid-item.js

@@ -9,6 +9,7 @@
 import { h, Host } from "@stencil/core";
 /**
  * @internal
+ * @slot default - Grid item content.
  */
 export class CssGridItem {
     /**
@@ -18,7 +19,7 @@ export class CssGridItem {
     render() {
         const style = {};
         style['grid-area'] = this.itemName;
-        return (h(Host, { key: 'af7e2134d1e6a448e96a0a414c3766f51088fb54', style: style }, h("slot", { key: 'a20d56f4601d818ff1d2e7cad497a0facd09c44e' })));
+        return (h(Host, { key: '0bc3ae81663d5b1993c95f06958bcd77e24180a7', style: style }, h("slot", { key: '62c78222da5bfa19d981cb30394f6e1d093b322b' })));
     }
     static get is() { return "ix-css-grid-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/css-grid/css-grid.js

@@ -18,6 +18,7 @@ const mediaQueryCollection = [
 ];
 /**
  * @internal
+ * @slot default - Grid items arranged by the configured template.
  */
 export class CssGrid {
     /**
@@ -79,7 +80,7 @@ export class CssGrid {
         if (this.currentTemplate && this.currentTemplate.length !== 0) {
             style['grid-template-areas'] = templateBuilder(this.currentTemplate);
         }
-        return (h(Host, { key: '491581fede3e8163cdf43cca11f597b98c5bfe32', style: style }, h("slot", { key: 'ddd975c6bfea2c4abfc3b69d8d0d895a69823756' })));
+        return (h(Host, { key: 'f528bf6c3a8915c642c42fb56aa230a95234770c', style: style }, h("slot", { key: 'd9520b70898f2c51bf5c3527d709cb109b403cf5' })));
     }
     static get is() { return "ix-css-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/custom-field/custom-field.js

@@ -18,6 +18,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Host, h } from "@stencil/core";
 import { HookValidationLifecycle, } from "../utils/input";
+/**
+ * @slot default - The form control.
+ */
 export class CustomField {
     hostElement;
     /**
@@ -63,7 +66,7 @@ export class CustomField {
         this.isWarning = isWarning;
     }
     render() {
-        return (h(Host, { key: '4194f7081c66e42f9376cf0c8004a705bc053f0b' }, h("ix-field-wrapper", { key: '55a70e2a6500a6945f819004c9b910d7d7decd2b', label: this.label, helperText: this.helperText, infoText: this.infoText, warningText: this.warningText, invalidText: this.invalidText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, required: this.required }, h("slot", { key: '8a54f90dc2db37f9a21f2c52f7b4721dbb7acc67' }))));
+        return (h(Host, { key: '4e412bdb503dd54f56dcf6039c98ef6b1d90fc99' }, h("ix-field-wrapper", { key: '948a67bba4457bc92b497ec2a9f8354a46d88928', label: this.label, helperText: this.helperText, infoText: this.infoText, warningText: this.warningText, invalidText: this.invalidText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, required: this.required }, h("slot", { key: '32074e9825ad42e3ca9d991775e9093db97b5ef7' }))));
     }
     static get is() { return "ix-custom-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-input/date-input.css

@@ -516,6 +516,7 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
 :host(.disabled) input,
 :host(.disabled) textarea {
   pointer-events: none;
+  color: var(--theme-input--color--disabled);
 }
 
 :host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input {