@siemens/ix 5.1.0 → 5.2.0

package/dist/collection/components/menu-settings/menu-settings.css

@@ -215,7 +215,7 @@ a {
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -224,37 +224,37 @@ a {
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .settings-header {

package/dist/collection/components/menu-settings/menu-settings.js

@@ -8,6 +8,9 @@
  */
 import { iconClose } from "@siemens/ix-icons/icons";
 import { forceUpdate, h, Host, } from "@stencil/core";
+/**
+ * @slot default - Settings overlay content.
+ */
 export class MenuSettings {
     hostElement;
     /**
@@ -76,10 +79,10 @@ export class MenuSettings {
         forceUpdate(this);
     }
     render() {
-        return (h(Host, { key: '05f98cf864c61b155446992713cd31408c3182fa', slot: 'ix-menu-settings', class: {
+        return (h(Host, { key: '41ccd73336c9313b9a5c4aa47715541e2fb1d9de', slot: 'ix-menu-settings', class: {
                 show: this.show,
                 ['legacy-tabs']: !this.suppressLegacyTabs,
-            } }, h("div", { key: 'a119043ecdf9710d73186650b91ee67677000e5b', class: 'settings-header' }, h("h2", { key: '289bef2c46bf0856677dd810b589048db3a4161c', class: "text-h2" }, this.label), h("ix-icon-button", { key: '9c38c31c8f46b777de1dba7a48e27e03870c11bb', variant: "tertiary", size: "24", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseButton, onClick: (e) => this.close.emit({
+            } }, h("div", { key: 'c42d560569ed349e61c7be56b4489ac6c0cb3547', class: 'settings-header' }, h("h2", { key: '795f068e78d63e780e1aea8e989996f4b9806758', class: "text-h2" }, this.label), h("ix-icon-button", { key: '0fc5b175f9ca2b9bc5d9ebf022144c9aef29d9c3', variant: "tertiary", size: "24", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseButton, onClick: (e) => this.close.emit({
                 name: 'ix-menu-settings',
                 nativeEvent: e,
             }) })), !this.suppressLegacyTabs ? (h("ix-tab-set", null, h("ix-tabs", { activeTabKey: this.activeTabKey }, this.items.map(({ label, tabKey }) => (h("ix-tab-item", { tabKey: tabKey, selected: tabKey === this.activeTabKey, label: label })))), h("slot", null))) : (h("slot", null))));

package/dist/collection/components/menu-settings-item/menu-settings-item.js

@@ -10,6 +10,7 @@ import { h, Host, Mixin, } from "@stencil/core";
 import { BaseTabMixin } from "../tab-item/tab.mixin";
 /**
  * @deprecated since 5.0.0, use ix-tab-item instead of ix-menu-settings-item
+ * @slot default - Settings menu item content.
  */
 export class MenuSettingsItem extends Mixin(BaseTabMixin) {
     constructor() {
@@ -31,7 +32,7 @@ export class MenuSettingsItem extends Mixin(BaseTabMixin) {
         });
     }
     render() {
-        return (h(Host, { key: '48c4f2a2e07a0dc0006d6cac683869439b06faa0' }, h("ix-tab-panel", { key: '04e2fb1c063f897c6c3982645fc977eb1ce7ea82', tabKey: this.tabKey }, h("slot", { key: '34874508577ce1773af32ee09c73b2b9219a2d1e' }))));
+        return (h(Host, { key: '33f90f8f00fe5643ef89d4a9697a6f734ce94c96' }, h("ix-tab-panel", { key: '2e895bd3ca7c83a27a6c25039e2a0fa2be9b283b', tabKey: this.tabKey }, h("slot", { key: 'f04938cdd7b5d06cb7e20027e4aade76d83a2a07' }))));
     }
     static get is() { return "ix-menu-settings-item"; }
     static get properties() {

package/dist/collection/components/message-bar/message-bar.css

@@ -41,7 +41,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -50,37 +50,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .message-container {

package/dist/collection/components/message-bar/message-bar.js

@@ -9,6 +9,9 @@
 import { h, Host, } from "@stencil/core";
 import { animate } from "animejs";
 import { iconClose, iconError, iconInfo, iconNotification, iconSuccess, iconWarning, iconWarningRhomb, } from "@siemens/ix-icons/icons";
+/**
+ * @slot default - Message content.
+ */
 export class MessageBar {
     /**
      * Specifies the type of the alert.
@@ -62,7 +65,7 @@ export class MessageBar {
         }
     }
     render() {
-        return (h(Host, { key: '958c28d0bae524a1041a8118d9313972139f1f4a' }, h("div", { key: '8e619088864f0475559795ac309e1fbfc8bc1bb3', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: 'e21c8715adb8ec071aebb393896b20ae41f0cab5', color: this.color, name: this.icon }), h("div", { key: '060da1ce54e588666ec3c8be27b322bef8cbc85d', class: "message-content" }, h("slot", { key: '0d7485fcf2b06989e6a385050622236ad71d96e3' })), !this.persistent && (h("ix-icon-button", { key: 'dab714f06d4f20c379c661f638bffe809778d1d8', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
+        return (h(Host, { key: '312932d1de69b7048eae7e62330e83bdf8865f89' }, h("div", { key: '54a175ca6cde144af7e6b9f5bca577091eb55937', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '13b07a77ebe1cf2aa6c22ddb4171a2a1e1ea7474', color: this.color, name: this.icon }), h("div", { key: '4456d0637f40b5731aa40819cd7c75b258e8662d', class: "message-content" }, h("slot", { key: '5b8ee0df1bfc1d87a9cbf75c0972165108287be1' })), !this.persistent && (h("ix-icon-button", { key: 'fd5837a3df5df0c5642c5ad6190f83dbfbbe06be', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
                 if (this.divElement) {
                     this.closeAlert(this.divElement);
                 }

package/dist/collection/components/modal/modal.js

@@ -13,6 +13,9 @@ import Animation from "../utils/animation";
 import { tryFocusElement } from "../utils/focus/focus-utilities";
 import { IX_MODAL_AUTOFOCUS_SELECTOR } from "../utils/modal/modal";
 import { waitForElement } from "../utils/waitForElement";
+/**
+ * @slot default - Modal sections and content.
+ */
 export class Modal {
     ariaAttributes = {};
     isMouseDownInsideDialog = false;
@@ -197,12 +200,12 @@ export class Modal {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: 'b40ae3d2505764659681551aaab811b4c8bfcc6f', class: {
+        return (h(Host, { key: '1b9c4c03e9fad75ac84ab6854f51c4ff9cbf752a', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.hideBackdrop,
                 'align-center': this.centered,
                 'non-blocking': this.isNonBlocking,
-            } }, h("div", { key: '5985f073d9b74b75838b3e592fe5254dfec3ea11', class: "dialog-backdrop" }, h("dialog", { key: '372dd029f7d41622559568d99fe28608e1806cab', "aria-modal": a11yBoolean(!this.isNonBlocking), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, h("div", { key: 'd5f089500fae809e0080a262d5a4d54101fee727', class: "dialog-backdrop" }, h("dialog", { key: '1a124dda3c4961c8cdc0c81a5698f5f932145f22', "aria-modal": a11yBoolean(!this.isNonBlocking), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
                 modal: true,
                 [`modal-size-${this.size}`]: true,
             }, onClose: () => this.dismissModal(), onMouseDown: (event) => this.onMouseDown(event), onMouseUp: (event) => this.onMouseUp(event), onKeyDown: (e) => {
@@ -214,7 +217,7 @@ export class Modal {
             }, onCancel: (e) => {
                 e.preventDefault();
                 void this.dismissModal();
-            } }, h("slot", { key: '405cfdcead12f17c5bc3534d9d160fddd69106a7' })))));
+            } }, h("slot", { key: 'd24dd84c8f50b1542b4c992af079b0cdfbc50e15' })))));
     }
     static get is() { return "ix-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-content/modal-content.css

@@ -33,7 +33,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -42,36 +42,36 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }

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

@@ -7,9 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from "@stencil/core";
+/**
+ * @slot default - Modal body content.
+ */
 export class ModalContent {
     render() {
-        return (h(Host, { key: 'bdcc31e92318ad5f9b10a5ece22fc01f2506e200' }, h("slot", { key: 'a7af3070d7d9766ea450e4a75417b4ae0f1137d3' })));
+        return (h(Host, { key: 'b9b13e4b94006023e1c4cb72f8750a0d3115fe83' }, h("slot", { key: 'ab56f72939eeb96ebf29990d00894c14be058f9a' })));
     }
     static get is() { return "ix-modal-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-footer/modal-footer.css

@@ -35,7 +35,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -44,36 +44,36 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }

package/dist/collection/components/modal-footer/modal-footer.js

@@ -7,9 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from "@stencil/core";
+/**
+ * @slot default - Modal footer actions.
+ */
 export class ModalFooter {
     render() {
-        return (h(Host, { key: '6d10985e1922b6bffbc82d758fc2c5d64e0af761' }, h("slot", { key: '438d07e19d688048e331c64ca62f08c67b7ce0ae' })));
+        return (h(Host, { key: 'd81ff27bbb7129f0b51464ce6d411deef7ccbb36' }, h("slot", { key: 'df7c48b616671aae6408d1045c0311cd83944492' })));
     }
     static get is() { return "ix-modal-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,7 +33,7 @@
 :host *::before {
   box-sizing: border-box;
 }
-:host ::-webkit-scrollbar-button {
+:host *::-webkit-scrollbar-button {
   display: none;
 }
 @-moz-document url-prefix() {
@@ -42,37 +42,37 @@
     scrollbar-width: thin;
   }
 }
-:host {
+:host * {
   /* width */
 }
-:host ::-webkit-scrollbar {
+:host *::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-:host {
+:host * {
   /* Track */
 }
-:host ::-webkit-scrollbar-track {
+:host *::-webkit-scrollbar-track {
   border-radius: 5px;
   background: var(--theme-scrollbar-track--background);
 }
-:host ::-webkit-scrollbar-track:hover {
+:host *::-webkit-scrollbar-track:hover {
   background: var(--theme-scrollbar-track--background--hover);
 }
-:host {
+:host * {
   /* Handle */
 }
-:host ::-webkit-scrollbar-thumb {
+:host *::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: var(--theme-scrollbar-thumb--background);
 }
-:host {
+:host * {
   /* Handle on hover */
 }
-:host ::-webkit-scrollbar-thumb:hover {
+:host *::-webkit-scrollbar-thumb:hover {
   background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host ::-webkit-scrollbar-corner {
+:host *::-webkit-scrollbar-corner {
   display: none;
 }
 :host .modal-title {

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

@@ -9,6 +9,9 @@
 import { h, Host, } from "@stencil/core";
 import { closestPassShadow } from "../utils/shadow-dom";
 import { iconClose } from "@siemens/ix-icons/icons";
+/**
+ * @slot default - Modal header content.
+ */
 export class ModalHeader {
     hostElement;
     /**
@@ -62,7 +65,7 @@ export class ModalHeader {
         this.parentDialog.dismissModal();
     }
     render() {
-        return (h(Host, { key: '2840ba385c7ad659786f48564bf307c2290049ca' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: '5e6ce56e0e76e527a3e71e66ea2a4ec2d22a2ed7', class: "modal-title" }, h("ix-typography", { key: 'cd8c3d8cdfbdfed8a1ab2285328c88985843a8b5', format: "h5" }, h("slot", { key: '1de70c68751fb8ece53890adf94b95c2bfcbd66d' }))), !this.hideClose ? (h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
+        return (h(Host, { key: '507ee77667cf755dd2c36c02437b8c345bd9dffb' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: 'e525b0e45c254793c69263f6f910255b96b99909', class: "modal-title" }, h("ix-typography", { key: 'bff18e37ae4ff51bdbac61adb7e16e13f8be7612', format: "h5" }, h("slot", { key: '2081bf8ae9df7f5b3d6c74e8cd4c2842202696f4' }))), !this.hideClose ? (h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
     }
     static get is() { return "ix-modal-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal-loading/modal-loading.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalLoading {
     render() {
-        return (h(Host, { key: 'dc1f6ceb8a80533b033c8a942ad226a827797f5e' }, h("ix-spinner", { key: 'cba70b4acd7faac7076ccab3505ba3bf77b43294', variant: "primary" }), h("span", { key: '7e391743781992496039e4d71e2344c79bc134df', class: 'loading-text' }, h("slot", { key: '5c08f0076249ca3d16b80e2d107cf2fb975e7e5b' }))));
+        return (h(Host, { key: '80ca2b65f89cf55d1084594e06639391e2320c0a' }, h("ix-spinner", { key: '9aca415c30e8450db9c17458f3486e1f4abcbf5f', variant: "primary" }), h("span", { key: '5579c6694b9b3b7eb4e7188cb67ac99d14658ffb', class: 'loading-text' }, h("slot", { key: 'be9b2fdd084a96f88db388bd7a0b7a98d6088ac6' }))));
     }
     static get is() { return "ix-modal-loading"; }
     static get encapsulation() { return "shadow"; }