@siemens/ix 2.1.2-beta.0 → 2.1.2

package/dist/cjs/ix-playground-internal.cjs.entry.js

@@ -12,7 +12,7 @@ const PlaygroundInternal = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h(index.Host, { key: '3915db9ac2de375515704818abb979e9aef1dbb7' });
+        return index.h(index.Host, { key: '2c7023915b61491ec4626431974c787778741459' });
     }
 };
 PlaygroundInternal.style = IxPlaygroundInternalStyle0;

package/dist/cjs/ix-push-card.cjs.entry.js

@@ -22,7 +22,7 @@ const PushCard = class {
         const color = this.variant === 'insight' || this.variant === 'notification'
             ? 'std'
             : undefined;
-        return (index.h(index.Host, { key: '96529a9ec926a30bf0ff5609a215a50df3a77b8d' }, index.h("ix-card", { key: '5bd737a3a82658bfb9a778dd6202ddecd0a754b2', variant: this.variant }, index.h("ix-card-content", { key: '829626941478481b805a287f5ae56541556e7207' }, index.h("ix-card-title", { key: '30e966156649d54adabce3883ed182fe9ff0e42b' }, this.icon ? (index.h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, index.h("span", { key: 'b09cc036a7b0b4aaf647cd432dfae8c6793ec91a', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), index.h("slot", { key: '9f85511858f444cdb6629515c428a5454fe94525', name: "title-action" })), index.h("ix-typography", { key: '425a782ad84de4af28876cd268a7162b983830a0', color: color, format: "h4" }, this.heading), index.h("ix-typography", { key: '4da2386c51ae909c824c16215ffdd4daa6524225', color: color }, this.subheading)), index.h("ix-card-accordion", { key: 'ac3701b2ab1caade4ca1ab810e1a47ac11c4e963', collapse: this.collapse }, index.h("slot", { key: '6ed725b03baaa16fbdc9ff42e8e8fd26be683013' })))));
+        return (index.h(index.Host, { key: 'e24565973d07f9e229c36913ca3ac89a50fa203a' }, index.h("ix-card", { key: '44282cb66fe975ec987c732564b1a1b2f157fb5b', variant: this.variant }, index.h("ix-card-content", { key: 'a81102518c997300dd706eaaf9be2c409dc2cb57' }, index.h("ix-card-title", { key: 'cfe94c332de47b3457f713e601d5528da88eb9d6' }, this.icon ? (index.h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, index.h("span", { key: '70ae6659d04f30ba68a58f8cdf0fde3f33c3de01', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), index.h("slot", { key: 'b16c8760f377f9f5118cf2d6b09f0ed831c4d7bd', name: "title-action" })), index.h("ix-typography", { key: '861cc81ab636b168fbd6f931095d5128a2a4732b', color: color, format: "h4" }, this.heading), index.h("ix-typography", { key: '310464f9afd7994ccc5c51a8154387e59205b2bb', color: color }, this.subheading)), index.h("ix-card-accordion", { key: 'e070cee2f6ded1b56b92d3fc1ed5028cfe2d0d5d', collapse: this.collapse }, index.h("slot", { key: 'd8b198392bd09b45d2f0c6f6579e333c5f4d96e0' })))));
     }
 };
 PushCard.style = IxPushCardStyle0;

package/dist/cjs/ix-select.cjs.entry.js

@@ -309,7 +309,7 @@ const Select = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '2a59659f35973f2297d3b34cb0ae84c3e5d80c04' }, index.h("div", { key: 'cca889f2ba4c3db6e74a65fd21d9ca7428e9dc52', class: {
+        return (index.h(index.Host, { key: 'a1ff9238e7bd384371924fc1a6c84dbf2c2b2026' }, index.h("div", { key: '4f022e97659a4ccd2787ba5b753b53e15ef9da6b', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
@@ -317,13 +317,13 @@ const Select = class {
                 this.dropdownAnchor = ref;
                 if (!this.editable)
                     this.dropdownWrapperRef = ref;
-            } }, index.h("div", { key: '98ca1de8783cd95db76d969bade2aa2078c8224f', class: "input-container" }, index.h("div", { key: '4d4ac31033855345467e355f168a5ce7e47ce8c6', class: "chips" }, this.isMultipleMode
+            } }, index.h("div", { key: '68fd990dca31dcd85ce40c7976d1e6841f6916c3', class: "input-container" }, index.h("div", { key: '7ca63a0aeb267e042bf0699d51316af5ad9f87c5', class: "chips" }, this.isMultipleMode
             ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (index.h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.itemClick(item.value);
                 } }, item.label)))
-            : '', index.h("div", { key: 'd50bab808cbf2bd146c39052f7f008f94ad93f70', class: "trigger" }, index.h("input", { key: '1b91bbc00aed4ec69543d3e4c3fe1eff00c87c90', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
+            : '', index.h("div", { key: '0ff312e92b3235e17daac6e861a6dac456f96bfd', class: "trigger" }, index.h("input", { key: '0f56fd65161c8b08a937d936e674cdbde529205f', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
             }, placeholder: this.placeholderValue(), value: this.inputValue, ref: (ref) => (this.inputRef = ref), onBlur: (e) => this.onInputBlur(e), onFocus: () => {
                 this.navigationItem = undefined;
@@ -335,16 +335,16 @@ const Select = class {
             } })) : null, this.disabled || this.readonly ? null : (index.h("ix-icon-button", { "data-select-dropdown": true, class: { 'dropdown-visible': this.dropdownShow }, icon: "chevron-down-small", ghost: true, ref: (ref) => {
                 if (this.editable)
                     this.dropdownWrapperRef = ref;
-            } })))))), index.h("ix-dropdown", { key: '3feb553427991c96b45b49aecce64de203846902', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            } })))))), index.h("ix-dropdown", { key: '64f52cfed09c28955ea648b7a409a921c8601401', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'd-none': this.disabled || this.readonly,
             }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
                 return {
                     minWidth: `${this.hostElement.clientWidth}px`,
                 };
-            } }, index.h("div", { key: '3c07355d8c3ebcc3a5f180ac8acf57297f9768ac', class: {
+            } }, index.h("div", { key: 'b66559fa7650a544ff8d02dd18881c7a5c83bc7a', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), index.h("slot", { key: '2bb33255f9a58b647d0897e8ff1b38fa6aba888b' }), index.h("div", { key: '2e9bcf50f2a45e292103e4a201d421ad904becd2', ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (index.h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
+            }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), index.h("slot", { key: 'c0a36530172388d4785fbfff89555435a9af94d0' }), index.h("div", { key: 'a7bdc5c18377a6359c0665b986429a96fb88aab2', ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (index.h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();

package/dist/cjs/ix-slider.cjs.entry.js

@@ -122,12 +122,12 @@ const Slider = class {
             traceStart = valueInPercentage;
             traceEnd = traceReferenceInPercentage;
         }
-        return (index.h(index.Host, { key: '8c85501e96b06c0978e105a3c385ff0824c65a8f', class: {
+        return (index.h(index.Host, { key: 'fc1ccd48aeefe6a53f7299db447b5c5e6fb6b13d', class: {
                 disabled: this.disabled,
                 error: !!this.error,
-            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, index.h("div", { key: 'd55ef7538ee1c4ddc5cbce9084f942100e3c973d', class: "slider" }, index.h("div", { key: 'ca12a0723b0413045b159fb0ff7c0e86492ec7dd', class: "track" }, index.h("div", { key: '14ac930b5473b74eb429723fee183c92c3fafdfb', class: "thumb", style: {
+            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, index.h("div", { key: '4e3d3b0d5e1b2a2882ce0073336e4cd13ac1a4b8', class: "slider" }, index.h("div", { key: 'f8457c6d8efad8d172abe49f9037cb71f9ba226f', class: "track" }, index.h("div", { key: 'cf141d91936a74657f8788f5f7c688e37ebf7a16', class: "thumb", style: {
                 left: `calc(${valueInPercentage} * 100% - 8px)`,
-            } }), index.h("div", { key: '3e44ab3c48f5d3225a2bef007c33f1637daed6a1', class: "ticks" }, this.marker
+            } }), index.h("div", { key: 'b54ae34bda82b7f0277ae361c5139845830dc85d', class: "ticks" }, this.marker
             ? this.marker.map((markerValue) => {
                 if (markerValue > this.max || markerValue < this.min) {
                     return;
@@ -140,7 +140,7 @@ const Slider = class {
                         '--tick-value': `${left}`,
                     } }));
             })
-            : null)), index.h("input", Object.assign({ key: '723d37e2970d33e4707b3f6749d87e24a4abaf82', id: "slider", type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), style: {
+            : null)), index.h("input", Object.assign({ key: '219884ecfc35a76f0722782af2607c64b19a57aa', id: "slider", type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), style: {
                 '--value': `${valueInPercentage}`,
                 '--trace-reference': `${traceReferenceInPercentage}`,
                 '--trace-start': `${traceStart}`,
@@ -151,9 +151,9 @@ const Slider = class {
                 this.showTooltip = true;
             }, onBlur: () => {
                 this.showTooltip = false;
-            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), index.h("ix-tooltip", { key: '24fda111d2fb0582b41a43f621534984cfa0b851', class: {
+            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), index.h("ix-tooltip", { key: '387dc09d28b3c45f08470ba651c659e8c528a44d', class: {
                 'hide-tooltip': !this.showTooltip,
-            }, animationFrame: true }, this.rangeInput)), index.h("div", { key: '3f048b282a1b5bce1a30710eaaeaa4a14d19ee32', class: "label" }, index.h("div", { key: '08e62143c2ea733010a59031e7eb2fa261b47de6', class: "label-start" }, index.h("slot", { key: 'e2902262ac37d93cd57b08230697735c5fdd95ed', name: "label-start" })), index.h("div", { key: 'fe84bba24a5a9673f4b4d86a6463381b84ef5069', class: "label-end" }, index.h("slot", { key: '9bfb718f207f3efac2c3d45f424264d45c293065', name: "label-end" }))), this.error ? (index.h("ix-typography", { class: 'label-error', color: "alarm" }, this.error)) : null));
+            }, animationFrame: true }, this.rangeInput)), index.h("div", { key: 'f8fdb048411a622870b4b0698c7124f7e175dedf', class: "label" }, index.h("div", { key: '2bbb6c7418953b907b1ef604a8d775c1e69d6626', class: "label-start" }, index.h("slot", { key: 'ce4a5aedbfafe7b5b71d47421bae0ab385548920', name: "label-start" })), index.h("div", { key: '98b40f2b68164592307f7f9817c913dffcb08139', class: "label-end" }, index.h("slot", { key: 'bcd3497745bf949da88cd373ecf8cd3f74488ffe', name: "label-end" }))), this.error ? (index.h("ix-typography", { class: 'label-error', color: "alarm" }, this.error)) : null));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-split-button-item.cjs.entry.js

@@ -21,7 +21,7 @@ const SplitButtonItem = class {
         return this.wrapperRef.waitForCurrent();
     }
     render() {
-        return (index.h(index.Host, { key: 'f25e1e6cb9b54071058b126718b0892bec07e9dc' }, index.h("ix-dropdown-item", { key: '0dd8665d736ab6d19e694de3eb72f32c4222d100', ref: this.wrapperRef, suppressChecked: true, icon: this.icon, label: this.label, onItemClick: (e) => {
+        return (index.h(index.Host, { key: '2857acae0de3f6e738276080924f3e1b937546c6' }, index.h("ix-dropdown-item", { key: 'ca37a4f42b3a673bb80890e43229711a45b378b9', ref: this.wrapperRef, suppressChecked: true, icon: this.icon, label: this.label, onItemClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
             }, onClick: (e) => this.itemClick.emit(e) })));

package/dist/cjs/ix-split-button.cjs.entry.js

@@ -39,7 +39,7 @@ const SplitButton = class {
                 'left-button-border': !this.outline,
             },
         };
-        return (index.h(index.Host, { key: '52639556f15c57d83cb4cbb3d19435c6ebce416d' }, index.h("div", { key: 'ff929c04cd4935613587b66084b7aeda65df7ead', class: { 'btn-group': true, 'middle-gap': !this.outline } }, this.label ? (index.h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }), this.label)) : (index.h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }))), index.h("ix-icon-button", Object.assign({ key: '6f3c9437734bcf6e1ae42c8f3ef6e122931aa551' }, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: this.splitIcon }))), index.h("ix-dropdown", { key: '4424f23d71b89cb94351e12b469e7cd8a9747a35', ref: (r) => (this.dropdownElement = r) }, index.h("slot", { key: 'f026677e93b0b182f15b1b7bf114254ee6279684' }))));
+        return (index.h(index.Host, { key: '72cef252b92343974f54030d735d9add93a1ce50' }, index.h("div", { key: 'e3b90f79ffc667a96f14ce5f32f91844acba8503', class: { 'btn-group': true, 'middle-gap': !this.outline } }, this.label ? (index.h("ix-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }), this.label)) : (index.h("ix-icon-button", Object.assign({}, buttonAttributes, { icon: this.icon, onClick: (e) => this.buttonClick.emit(e) }))), index.h("ix-icon-button", Object.assign({ key: '02d9964f46c960e19045135e63212cba857c99df' }, buttonAttributes, { ref: (r) => (this.triggerElement = r), class: 'anchor', icon: this.splitIcon }))), index.h("ix-dropdown", { key: '62f7410479325fa1f20b08baef68d0b83f41e03a', ref: (r) => (this.dropdownElement = r) }, index.h("slot", { key: 'dbf07a44f0596567676905abc4bc156560ddcd1d' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-tab-item_2.cjs.entry.js

@@ -33,7 +33,7 @@ const TabItem = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '62eea432a4d9c19db812f736ec3d08e03d411b48', class: this.tabItemClasses({
+        return (index.h(index.Host, { key: '77688f6b83f53ba0de891d2ed529c7b82941930a', class: this.tabItemClasses({
                 selected: this.selected,
                 disabled: this.disabled,
                 small: this.small,
@@ -48,12 +48,12 @@ const TabItem = class {
                 if (clientEvent.defaultPrevented) {
                     event.stopPropagation();
                 }
-            } }, index.h("div", { key: '31f7dd998cfe6b2f72a57a4738d87d70b4e13383', class: {
+            } }, index.h("div", { key: 'd1790baee81972038f8a09c0e7a0ee3124e828a6', class: {
                 circle: this.rounded,
                 text: !this.rounded,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, index.h("slot", { key: '591b96b26a84f459d81d46645aa1db78748725bb' })), index.h("div", { key: '70ddcd21e4f76f4549e6c830640acdb7e33e3150', class: {
+            } }, index.h("slot", { key: '7dcd5bcd496e9955b45f00b570fb935a0e9a8969' })), index.h("div", { key: '435deec3155b879b5f8a397124bf9a198283c2bd', class: {
                 counter: true,
                 selected: this.selected,
                 hidden: !(this.rounded && this.counter !== undefined),
@@ -281,13 +281,13 @@ const Tabs = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '44c009492a3faabd3dc4266f6a4070037f590caa' }, index.h("div", { key: 'c002c0b7c606bf6dd37738f2c8b233ed0556ae24', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, index.h("ix-icon", { key: '30291a5baf33ad74ca4d4cdd52aa3de6fdaac6f5', name: 'chevron-left-small' })), index.h("div", { key: 'fd0842c04c463afb21e29bfb64a32189550204f0', class: {
+        return (index.h(index.Host, { key: 'f98d2ee11257c6e5879f25404379e8be5a535d31' }, index.h("div", { key: 'a1230a4cac929390e9415fcfe25362c029a0e22a', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, index.h("ix-icon", { key: 'f34a2391bd3bd96c11251df77b379958be1411bf', name: 'chevron-left-small' })), index.h("div", { key: '66ce38113880297fac297678a05d6abf3d01a28e', class: {
                 'tab-items': true,
                 'overflow-shadow': true,
                 'shadow-left': this.showPreviousArrow(),
                 'shadow-right': this.showNextArrow(),
                 'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
-            } }, index.h("div", { key: 'b62dda398149a5eef215992b4a9ce5e297fa803f', class: "items-content" }, index.h("slot", { key: '0383abae773ba6f7f5b4ebd9e76b4a20c9a18732' }))), index.h("div", { key: '7ef4269bac60f31a97ae5affa4574bbab4ba2726', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, index.h("ix-icon", { key: '9071de44d99c4650f6ad432b40ca6592e4fa9045', name: 'chevron-right-small' }))));
+            } }, index.h("div", { key: '7f11e3d666b5a80a7faef2a0bf80b6a00e14c3e8', class: "items-content" }, index.h("slot", { key: '5e5d4c50d3c0fa30527f02a32dab998ad2d7aa5b' }))), index.h("div", { key: 'fbcfce76ec9d1fb48beb35ba7e62a7cc4cac7946', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, index.h("ix-icon", { key: '7f7a80642127bff14a1c182468bec101152218ae', name: 'chevron-right-small' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-tile.cjs.entry.js

@@ -21,17 +21,17 @@ const Tile = class {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (index.h(index.Host, { key: '65e1277cf4b5ccc449dabc26c7216b13dd2c2aa3', class: {
+        return (index.h(index.Host, { key: 'c18f9b86f07ad9ce056d22c0ebcdce4ce0a4195f', class: {
                 'tile-small': this.size === 'small',
                 'tile-medium': this.size === 'medium',
                 'tile-big': this.size === 'big',
-            } }, index.h("div", { key: '69f1d82f28fb8d345bbaae2624114298c3c1c879', class: {
+            } }, index.h("div", { key: '34808bb57f813224b7f0f4bb289de56aef170864', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, index.h("slot", { key: '9f0cd992a9ea408da4cc7756f8d9ce0c61a0fd8c', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), index.h("div", { key: 'da541a2a3ba69eeba1a4421915f75d700050c5f8', class: "tile-subheader" }, index.h("slot", { key: 'a498169a21e53e3abf332461e2b1ef8eaad4910b', name: "subheader" })), index.h("div", { key: '4caacfbc6cad0e7432f8c53be2f2785c4d76cc5d', class: "tile-content" }, index.h("slot", { key: '59e81a46d10307f93e1bb50735a9b05f106d7dd6' })), index.h("div", { key: '1455303a22aff7c91392946de8f3b87d0d401b45', class: {
+            } }, index.h("slot", { key: 'a5755136d26d7ca1c1fb087cd16ceadffbcad9bc', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), index.h("div", { key: '6082482ecbfc4a332b85451aa1661df7ff8a5425', class: "tile-subheader" }, index.h("slot", { key: 'bd43456069f9f0117f66194a2be6ae2913325abc', name: "subheader" })), index.h("div", { key: '3c37eb01ade7f131f33204c7f1f927a3b1341c03', class: "tile-content" }, index.h("slot", { key: '7e359cb0720e7ce0eefba2e3d25f5cf31f92fc49' })), index.h("div", { key: 'df1ae76b5b7d5df128b5baac00171f8906c01301', class: {
                 'tile-footer': true,
                 'has-content': this.hasFooterSlot,
-            } }, index.h("slot", { key: 'e498be21e2041b2689ebe5689e846668a556bb1e', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+            } }, index.h("slot", { key: 'cd340f4ab95913bd6bc4d6d40ee4c6712992f964', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-time-picker.cjs.entry.js

@@ -113,7 +113,7 @@ const TimePicker = class {
             },
         ];
         timepickerInformation = timepickerInformation.filter((item) => !item.hidden);
-        return (index.h(index.Host, { key: '0d12688a996f942f3677fb42eb2e03adc043e8fd' }, index.h("ix-date-time-card", { key: '5409847c27d8f5e39bcccc755b81127ad625a2f9', standaloneAppearance: this.standaloneAppearance, corners: this.corners }, index.h("div", { key: 'a9aeee356d8a240cfec0113ffcc5fcfc18fb6f5d', class: "header", slot: "header" }, index.h("ix-typography", { key: '24eee442d20dc1e5c7ef309e20104f4076029b2a', variant: "default-title" }, this.textTime || 'Time')), index.h("div", { key: '0125ffbdab047f9244c3df14365f87694efbe8c0', class: "clock" }, timepickerInformation.map((descriptor, index$1) => (index.h("div", { class: "flex" }, index.h("div", { class: { columns: true, hidden: descriptor.hidden } }, index.h("ix-icon-button", { size: "16", onClick: () => (this._time = this._time.plus({
+        return (index.h(index.Host, { key: 'c09337ff6d0366929f77fe9bbdd89eb43bcc71ea' }, index.h("ix-date-time-card", { key: '80c29872490f5968979a802b92113377ec9df678', standaloneAppearance: this.standaloneAppearance, corners: this.corners }, index.h("div", { key: '35981c4cde62451368ee30fc4bcc19f894939cda', class: "header", slot: "header" }, index.h("ix-typography", { key: 'cd88a3f06e8907419acc45cd71d9954b7365096c', variant: "default-title" }, this.textTime || 'Time')), index.h("div", { key: 'fd5d74523fd649fedac87ac0887fb643fd9795ce', class: "clock" }, timepickerInformation.map((descriptor, index$1) => (index.h("div", { class: "flex" }, index.h("div", { class: { columns: true, hidden: descriptor.hidden } }, index.h("ix-icon-button", { size: "16", onClick: () => (this._time = this._time.plus({
                 [descriptor.unit]: 1,
             })), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), index.h("input", { class: "form-control", name: descriptor.unit, type: "number", placeholder: descriptor.placeholder, value: this._formattedTime
                 ? this._formattedTime[descriptor.unit]
@@ -133,11 +133,11 @@ const TimePicker = class {
             })), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), index$1 !== timepickerInformation.length - 1 && (index.h("div", { class: {
                 'column-seperator': true,
                 hidden: descriptor.hidden,
-            } }, ":"))))), index.h("div", { key: '62554ab71c93c34c73a7d780d510676f4c0dee36', class: {
+            } }, ":"))))), index.h("div", { key: '819d9ce8cdfc94e7c4a1d2f7190587f052a9d246', class: {
                 columns: true,
                 'default-space': true,
                 hidden: this._timeRef === undefined,
-            } }, index.h("ix-icon-button", { key: 'c0f1734a51bc44ae8ff98c3f16843a3a6420dcaa', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), index.h("div", { key: 'c01c49b66efda970fb800134e2bc949d9f7f6c9b', class: "time-reference" }, this._timeRef), index.h("ix-icon-button", { key: '83c58978b8442e6b87ea88897a75419882509d5c', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" }))), index.h("div", { key: '2d00b5a7fde2f34f31621f5ad03441ac05978931', class: { button: true, hidden: !this.standaloneAppearance } }, index.h("ix-button", { key: '88464d3ff7ebc64bd5d8c6933fcc5013c0870706', onClick: () => {
+            } }, index.h("ix-icon-button", { key: '6ec3654d6a81bb2420695dd3292677395bd6adc2', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), index.h("div", { key: '09b1dd7076112d4dc5168a968ed0ebebaa67e69f', class: "time-reference" }, this._timeRef), index.h("ix-icon-button", { key: 'ff24cdad6df286cc2da51958c2b51fe43f1e4fea', size: "16", onClick: () => this.changeTimeReference(), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" }))), index.h("div", { key: '82602709c4107324d9498426cb30959fe81bacc4', class: { button: true, hidden: !this.standaloneAppearance } }, index.h("ix-button", { key: '64da9baed02906baad694bbe066bc355197d293e', onClick: () => {
                 this.timeSelect.emit(this._time.toFormat(this.format));
                 this.done.emit(this._time.toFormat(this.format));
             } }, this.textSelectTime)))));

package/dist/cjs/ix-toast-container.cjs.entry.js

@@ -78,7 +78,7 @@ const ToastContainer = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '60af7515a7ed4f464d8d7b3e38ab5552c27f3af6', class: {
+        return (index.h(index.Host, { key: '2f5cc3b256ff81ebb2dadd0c774f89ddc59caffb', class: {
                 'toast-container--bottom-right': this.position === 'bottom-right',
                 'toast-container--top-right': this.position === 'top-right',
             } }));

package/dist/cjs/ix-toast.cjs.entry.js

@@ -53,11 +53,11 @@ const Toast = class {
             animationPlayState: this.touched ? 'paused' : 'running',
         };
         progressBarClass.push('toast-progress-bar--animated');
-        return (index.h(index.Host, { key: 'fc536c407da22e873ddd6b0c57ff1a33f031fff3', class: "animate__animated animate__fadeIn" }, index.h("div", { key: '364d9a603523b34526abbf60b79fc28b4861f551', class: "toast-body", onPointerLeave: () => {
+        return (index.h(index.Host, { key: '064ab233924479a92456900e282fe87e98ff2074', class: "animate__animated animate__fadeIn" }, index.h("div", { key: 'e66b0034a2d43eb475d79127eda95d7af81dc77c', class: "toast-body", onPointerLeave: () => {
                 this.touched = false;
             }, onPointerEnter: () => {
                 this.touched = true;
-            } }, this.type || this.icon ? (index.h("div", { class: "toast-icon" }, this.getIcon())) : null, index.h("div", { key: 'a428a1d86aade38d43d14c7a6045ec0132346f1d', class: "toast-content" }, this.toastTitle ? (index.h("div", { class: "toast-title" }, this.toastTitle)) : null, index.h("div", { key: 'ba2928faa70dc5deb313f5e5bda49c7413be0c1d', class: "toast-message" }, index.h("slot", { key: '5af45c142c3812239d9874448b584bd8364b50ec' }))), index.h("div", { key: 'cf9b6eb78786400f372c473cd3e6e6d168dd07c3', class: "toast-close" }, index.h("ix-icon-button", { key: '7adbc3c276e209a906f1e1a224cba994fbaacbad', icon: 'close', size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (index.h("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
+            } }, this.type || this.icon ? (index.h("div", { class: "toast-icon" }, this.getIcon())) : null, index.h("div", { key: '122302506aff7076b6e5d6df66e4409ca86fde31', class: "toast-content" }, this.toastTitle ? (index.h("div", { class: "toast-title" }, this.toastTitle)) : null, index.h("div", { key: '22f349d326b604cd7c5734ebd09280a1263423e4', class: "toast-message" }, index.h("slot", { key: '78e822dd9ac08ab00b2b789dd95a7fd9ef0ddf70' }))), index.h("div", { key: 'f67bf3768af2d77c5619cced98976d9f92a57a68', class: "toast-close" }, index.h("ix-icon-button", { key: '81fceaa64577ab118ff9c59efc3098bec235a7b3', icon: 'close', size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (index.h("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
                 this.close();
             }, onTransitionEnd: () => {
                 if (this.progress === 0) {

package/dist/cjs/ix-toggle-button.cjs.entry.js

@@ -61,9 +61,9 @@ const ToggleButton = class {
                 'aria-pressed': a11y.a11yBoolean(this.pressed),
             },
         };
-        return (index.h(index.Host, { key: 'f8633f71b51df3509bc679922b432bd5c530d580', class: {
+        return (index.h(index.Host, { key: 'dfcef75c0ea69b53af7afc1df02915a869b6ef3b', class: {
                 disabled: this.disabled || this.loading,
-            } }, index.h(baseButton.BaseButton, Object.assign({ key: '005a4497d2d37783c6dcf2824c471b56515396ed' }, baseButtonProps), index.h("slot", { key: '9cafada091aa59fd6b447a2821f58ebd504875cd' }))));
+            } }, index.h(baseButton.BaseButton, Object.assign({ key: 'ea0fbe743f0c3371fb71925be47fc566e5dee37d' }, baseButtonProps), index.h("slot", { key: '2e6d2c6169978fc567974220437f2a7aa05c62ac' }))));
     }
     static get watchers() { return {
         "variant": ["onVariantChange"],

package/dist/cjs/ix-toggle.cjs.entry.js

@@ -28,9 +28,9 @@ const Toggle = class {
         this.checkedChange.emit(this.checked);
     }
     render() {
-        return (index.h(index.Host, { key: 'ffc42b6828208dcf6483abfda90ae88dd43ee408', class: {
+        return (index.h(index.Host, { key: '4ba9c673e94ffceedf28fbf04a7d136720db55f4', class: {
                 disabled: this.disabled,
-            }, onClick: () => this.onCheckedChange(!this.checked) }, index.h("input", { key: '35954eafdb6301bb6e7063a8978f2bfcc7076de0', disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, role: "switch", tabindex: 0, type: "checkbox", "aria-checked": a11y.a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), index.h("label", { key: '0aed058713bc742c3408accee2e3551313a1ad31', class: "switch", tabIndex: -1 }, index.h("span", { key: '62fbfca9e3adb625006e981f4ae655d2989d9aef', class: "slider" })), !this.hideText ? (index.h(index.Fragment, null, !this.indeterminate ? (index.h("span", { class: 'toggle-text', "aria-hidden": a11y.a11yBoolean(true) }, this.checked ? this.textOn : this.textOff)) : (index.h("span", { class: 'toggle-text', "aria-hidden": a11y.a11yBoolean(true) }, this.textIndeterminate)))) : null));
+            }, onClick: () => this.onCheckedChange(!this.checked) }, index.h("input", { key: '38b9f9e4577c54c1f930e93db5958f828e5fe789', disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, role: "switch", tabindex: 0, type: "checkbox", "aria-checked": a11y.a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), index.h("label", { key: '0ec0fa498dde12fc557ab02fc785ef291a803dcd', class: "switch", tabIndex: -1 }, index.h("span", { key: '8101166f958219372a1ea6e509233b63c0d05ede', class: "slider" })), !this.hideText ? (index.h(index.Fragment, null, !this.indeterminate ? (index.h("span", { class: 'toggle-text', "aria-hidden": a11y.a11yBoolean(true) }, this.checked ? this.textOn : this.textOff)) : (index.h("span", { class: 'toggle-text', "aria-hidden": a11y.a11yBoolean(true) }, this.textIndeterminate)))) : null));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-tooltip.cjs.entry.js

@@ -193,9 +193,9 @@ const Tooltip = class {
         const tooltipContentClass = {
             'tooltip-content': true,
         };
-        return (index.h(index.Host, { key: '8f85f75338cc78b38c6090fb75c9623123894a19', class: {
+        return (index.h(index.Host, { key: 'c297ba0961f7dc7ad8823f4f9a5022cb10ed7a77', class: {
                 visible: this.visible,
-            }, role: "tooltip" }, index.h("div", { key: '875b514167bfe9f7186c86d2a746e16c4425d833', class: 'tooltip-title' }, index.h("slot", { key: '0cd77bf05e8dfd1a37d71b44f66eed1847743856', name: "title-icon" }), index.h("ix-typography", { key: '50db3d851852796ba8bd247eefd10d7c9d3920a3', variant: "default-title" }, this.titleContent, index.h("slot", { key: '5b26a7a70f46036fc7f041b7d2f8a6742dc92cf4', name: "title-content" }))), index.h("div", { key: '6b161d389cae7f6e30ee047d78cfb90bd6f70b4e', class: tooltipContentClass }, index.h("slot", { key: '3c1b118a9ee09de941547d5171d8201f1d76e739' })), index.h("div", { key: '269cb211d6c4005e17eb2710f999e8390cd91236', class: "arrow" })));
+            }, role: "tooltip" }, index.h("div", { key: '21bf5211c142329a9475ef37fb5d2b5f5e4f5f19', class: 'tooltip-title' }, index.h("slot", { key: '8e4b3e91a0a161efa871a717a3d4871cb08224d2', name: "title-icon" }), index.h("ix-typography", { key: '7715a464de0154206a72f3a9ed97247eb5e4954c', variant: "default-title" }, this.titleContent, index.h("slot", { key: '16cc59a0d2a7aa11ab584be7738084b811d2320d', name: "title-content" }))), index.h("div", { key: '4390c36d7d326a7a0ffd8e0a7f2308c6bdacd02b', class: tooltipContentClass }, index.h("slot", { key: 'b21343921ee51073ad3c7e26f1ace94f46ec29e3' })), index.h("div", { key: '4e578ce3e101c8b479a7c334a81dafde3dc105a5', class: "arrow" })));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-tree-item.cjs.entry.js

@@ -18,16 +18,16 @@ const TreeItem = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: 'ba0c464b633cb3ca1ed0c5690245c1a69612e7fb', class: {
+        return (index.h(index.Host, { key: 'c40a13c3395d6f3a785e7f17ed8887d0f54642c6', class: {
                 selected: (_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected,
-            } }, index.h("div", { key: 'b94962dfd5d8be52ae6dab6b209d7f235dc2fc97', class: "icon-toggle-container", onClick: (e) => {
+            } }, index.h("div", { key: '47264231c4f5b919b4f4480a409b4b2047c46fc0', class: "icon-toggle-container", onClick: (e) => {
                 e.preventDefault();
                 this.toggle.emit();
             } }, this.hasChildren ? (index.h("ix-icon", { name: 'chevron-right', size: "16", class: {
                 ['icon-toggle-down']: (_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded,
-            }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}` })) : null), index.h("div", { key: 'ec90acd5573bbb23978666fc9e43e4c107d35ce1', class: "tree-node-container", onClick: () => {
+            }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}` })) : null), index.h("div", { key: '5ab2e0dc8ac4b4aa5a6b6851b70980d7e04d02ea', class: "tree-node-container", onClick: () => {
                 this.itemClick.emit();
-            } }, this.text, index.h("slot", { key: 'd70e947ceceeb7ecef901da3bc48ba58f898d419' }))));
+            } }, this.text, index.h("slot", { key: '93f195d06fb13641e330028d460e2a077736c5be' }))));
     }
 };
 TreeItem.style = IxTreeItemStyle0;

package/dist/cjs/ix-tree.cjs.entry.js

@@ -692,7 +692,7 @@ const Tree = class {
         this.hyperlist = new Hyperlist(this.hostElement, config);
     }
     render() {
-        return (index.h(index.Host, { key: '5e3f0e8bbd14073590ed9ae548fa51abb50bd52b' }, index.h("slot", { key: '9e05d42472878f4791cce2033271e1918d40c38f' })));
+        return (index.h(index.Host, { key: 'fa198f954c529db834099df3f599ecaf65223365' }, index.h("slot", { key: '54e63253af180cdd5e1c2c5048bf495475db36de' })));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-typography.cjs.entry.js

@@ -53,10 +53,10 @@ const IxTypography = class {
         }
         if (this.textColor) {
             style = {
-                color: `var(--theme-color-${this.color}-text)`,
+                color: `var(--theme-color-${this.textColor}-text)`,
             };
         }
-        return (index.h(index.Host, { key: '5cd439405dd73273b8ae61c910dabbbbce42e3f8', class: typographyClass, style: style }, index.h("slot", { key: 'c6e6b842a915995847564e953cd17a8bd4972c9e' })));
+        return (index.h(index.Host, { key: 'e39b379997d1e278e600c69fcfcce98e80d5cb2c', class: typographyClass, style: style }, index.h("slot", { key: '25d5d4bdd1bc16158a7bea5ee137bac6e3ce3882' })));
     }
 };
 IxTypography.style = IxTypographyStyle0;

package/dist/cjs/ix-typography.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-typography.entry.cjs.js","mappings":";;;;;;AAsBO,MAAM,eAAe,GAAuC;IACjE,SAAS,EAAE,SAAS;IACpB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,cAAc;IACvB,gBAAgB,EAAE,qBAAqB;IACvC,OAAO,EAAE,cAAc;IACvB,gBAAgB,EAAE,qBAAqB;IACvC,KAAK,EAAE,QAAQ;IACf,cAAc,EAAE,eAAe;IAC/B,EAAE,EAAE,SAAS;IACb,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,oBAAoB;IACrC,sBAAsB,EAAE,2BAA2B;CACpD;;ACnCD,MAAM,aAAa,GAAG,2rbAA2rb,CAAC;AACltb,2BAAe,aAAa;;MCmEf,YAAY;;;;;;;oBA8BR,KAAK;8BAKqB,MAAM;;IAE/C,MAAM;;QACJ,IAAI,eAAe,GAAG,EAAE,CAAC;QAEzB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,eAAe,CAAC,eAAe,CAAC,MAAA,IAAI,CAAC,OAAO,mCAAI,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC;SACpE;aAAM;YACL,eAAe,CAAC,cAAc,MAAA,IAAI,CAAC,MAAM,mCAAI,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;SAC/D;QAED,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE;YAClC,eAAe,CAAC,yBAAyB,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,IAAI,CAAC;SACxE;QAED,eAAe,CAAC,wBAAwB,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;QAEtD,IAAI,KAAK,GAAG,EAAE,CAAC;QAEf,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,KAAK,QAAQ;aAC/C,CAAC;SACH;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,KAAK,QAAQ;aAC/C,CAAC;SACH;QAED,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,IACxCD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/typography/type-mapping.ts","src/components/typography/typography.scss?tag=ix-typography&encapsulation=shadow","src/components/typography/typography.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport type TypographyVariants =\n  | 'x-small'\n  | 'small'\n  | 'caption'\n  | 'caption-single'\n  | 'default'\n  | 'default-single'\n  | 'default-title'\n  | 'default-title-single'\n  | 'large'\n  | 'large-single'\n  | 'h2'\n  | 'display-large';\n\nexport const VariantsMapping: Record<TypographyVariants, string> = {\n  'x-small': 'text-xs',\n  small: 'text-s',\n  caption: 'text-caption',\n  'caption-single': 'text-caption-single',\n  default: 'text-default',\n  'default-single': 'text-default-single',\n  large: 'text-l',\n  'large-single': 'text-l-single',\n  h2: 'text-h2',\n  'display-large': 'text-xl',\n  'default-title': 'text-default-title',\n  'default-title-single': 'text-default-title-single',\n};\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n@import 'components/fonts';\n@import 'mixins/fonts';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n}\n\n:host(.text-xs) {\n  @include text-xs;\n}\n\n:host(.text-s) {\n  @include text-s;\n}\n\n:host(.text-caption) {\n  @include text-caption;\n}\n\n:host(.text-caption-single) {\n  @include text-caption-single;\n}\n\n:host(.text-default) {\n  @include text-default;\n}\n\n:host(.text-default-single) {\n  @include text-default-single;\n}\n\n:host(.text-default-title) {\n  @include text-default-title;\n}\n\n:host(.text-default-title-single) {\n  @include text-default-title-single;\n}\n\n:host(.text-l) {\n  @include text-l;\n}\n\n:host(.text-l-single) {\n  @include text-l-single;\n}\n\n:host(.text-l-title) {\n  @include text-l-title;\n}\n\n:host(.text-l-title-single) {\n  @include text-l-title-single;\n}\n\n:host(.text-h2) {\n  @include text-h2;\n}\n\n:host(.text-xl) {\n  @include text-xl;\n}\n\n$typography-formats: label, label-xs, label-sm, label-lg, body, body-xs, body-sm,\n  body-lg, display, display-xs, display-sm, display-lg, display-xl, display-xxl,\n  h6, h5, h4, h3, h2, h1, code, code-sm, code-lg;\n\n@each $format in $typography-formats {\n  :host(.typography-#{$format}) {\n    @extend .typography-#{$format};\n  }\n}\n\n$typography-decoration: none, underline, line-through;\n@each $decoration in $typography-decoration {\n  :host(.typography-decoration-#{$decoration}) {\n    @extend .typography-decoration-#{$decoration};\n  }\n}\n\n:host(.typography-weight-bold) {\n  @extend .typography-weight-bold;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { VariantsMapping } from './type-mapping';\n\nexport type TypographyVariants =\n  | 'x-small'\n  | 'small'\n  | 'caption'\n  | 'caption-single'\n  | 'default'\n  | 'default-single'\n  | 'default-title'\n  | 'default-title-single'\n  | 'large'\n  | 'large-single'\n  | 'large-title'\n  | 'large-title-single'\n  | 'h2'\n  | 'display-large';\n\nexport type TypographyColors =\n  | 'contrast'\n  | 'std'\n  | 'soft'\n  | 'weak'\n  | 'inv-contrast'\n  | 'inv-std'\n  | 'inv-soft'\n  | 'inv-weak'\n  | 'alarm';\n\ntype TypographyFormatLabel = 'label' | 'label-xs' | 'label-sm' | 'label-lg';\ntype TypographyFormatBody = 'body' | 'body-xs' | 'body-sm' | 'body-lg';\ntype TypographyFormatDisplay =\n  | 'display'\n  | 'display-xs'\n  | 'display-sm'\n  | 'display-lg'\n  | 'display-xl'\n  | 'display-xxl';\ntype TypographyFormatHeading = 'h6' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1';\ntype TypographyFormatCode = 'code' | 'code-sm' | 'code-lg';\n\nexport type TypographyFormat =\n  | TypographyFormatLabel\n  | TypographyFormatBody\n  | TypographyFormatDisplay\n  | TypographyFormatHeading\n  | TypographyFormatCode;\n\nexport type TextDecoration = 'none' | 'underline' | 'line-through';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-typography',\n  styleUrl: 'typography.scss',\n  shadow: true,\n})\nexport class IxTypography {\n  /**\n   * Font variant based on theme variables\n   *\n   * @deprecated Use `format` property\n   * @internal\n   */\n  @Prop() variant: TypographyVariants;\n\n  /**\n   * Text format\n   */\n  @Prop() format: TypographyFormat;\n\n  /**\n   * Text color based on theme variables\n   *\n   * @deprecated since 2.1.0 use property `text-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: TypographyColors;\n\n  /**\n   * Text color based on theme variables\n   */\n  @Prop() textColor: TypographyColors;\n\n  /**\n   * Display text bold\n   */\n  @Prop() bold = false;\n\n  /**\n   * Text decoration\n   */\n  @Prop() textDecoration: TextDecoration = 'none';\n\n  render() {\n    let typographyClass = {};\n\n    if (this.variant) {\n      typographyClass[VariantsMapping[this.variant ?? 'default']] = true;\n    } else {\n      typographyClass[`typography-${this.format ?? 'body'}`] = true;\n    }\n\n    if (this.textDecoration !== 'none') {\n      typographyClass[`typography-decoration-${this.textDecoration}`] = true;\n    }\n\n    typographyClass['typography-weight-bold'] = this.bold;\n\n    let style = {};\n\n    if (this.color) {\n      style = {\n        color: `var(--theme-color-${this.color}-text)`,\n      };\n    }\n\n    if (this.textColor) {\n      style = {\n        color: `var(--theme-color-${this.color}-text)`,\n      };\n    }\n\n    return (\n      <Host class={typographyClass} style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-typography.entry.cjs.js","mappings":";;;;;;AAsBO,MAAM,eAAe,GAAuC;IACjE,SAAS,EAAE,SAAS;IACpB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,cAAc;IACvB,gBAAgB,EAAE,qBAAqB;IACvC,OAAO,EAAE,cAAc;IACvB,gBAAgB,EAAE,qBAAqB;IACvC,KAAK,EAAE,QAAQ;IACf,cAAc,EAAE,eAAe;IAC/B,EAAE,EAAE,SAAS;IACb,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,oBAAoB;IACrC,sBAAsB,EAAE,2BAA2B;CACpD;;ACnCD,MAAM,aAAa,GAAG,2rbAA2rb,CAAC;AACltb,2BAAe,aAAa;;MCmEf,YAAY;;;;;;;oBA8BR,KAAK;8BAKqB,MAAM;;IAE/C,MAAM;;QACJ,IAAI,eAAe,GAAG,EAAE,CAAC;QAEzB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,eAAe,CAAC,eAAe,CAAC,MAAA,IAAI,CAAC,OAAO,mCAAI,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC;SACpE;aAAM;YACL,eAAe,CAAC,cAAc,MAAA,IAAI,CAAC,MAAM,mCAAI,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;SAC/D;QAED,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE;YAClC,eAAe,CAAC,yBAAyB,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,IAAI,CAAC;SACxE;QAED,eAAe,CAAC,wBAAwB,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;QAEtD,IAAI,KAAK,GAAG,EAAE,CAAC;QAEf,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,KAAK,QAAQ;aAC/C,CAAC;SACH;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,SAAS,QAAQ;aACnD,CAAC;SACH;QAED,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,IACxCD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/typography/type-mapping.ts","src/components/typography/typography.scss?tag=ix-typography&encapsulation=shadow","src/components/typography/typography.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport type TypographyVariants =\n  | 'x-small'\n  | 'small'\n  | 'caption'\n  | 'caption-single'\n  | 'default'\n  | 'default-single'\n  | 'default-title'\n  | 'default-title-single'\n  | 'large'\n  | 'large-single'\n  | 'h2'\n  | 'display-large';\n\nexport const VariantsMapping: Record<TypographyVariants, string> = {\n  'x-small': 'text-xs',\n  small: 'text-s',\n  caption: 'text-caption',\n  'caption-single': 'text-caption-single',\n  default: 'text-default',\n  'default-single': 'text-default-single',\n  large: 'text-l',\n  'large-single': 'text-l-single',\n  h2: 'text-h2',\n  'display-large': 'text-xl',\n  'default-title': 'text-default-title',\n  'default-title-single': 'text-default-title-single',\n};\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n@import 'components/fonts';\n@import 'mixins/fonts';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n}\n\n:host(.text-xs) {\n  @include text-xs;\n}\n\n:host(.text-s) {\n  @include text-s;\n}\n\n:host(.text-caption) {\n  @include text-caption;\n}\n\n:host(.text-caption-single) {\n  @include text-caption-single;\n}\n\n:host(.text-default) {\n  @include text-default;\n}\n\n:host(.text-default-single) {\n  @include text-default-single;\n}\n\n:host(.text-default-title) {\n  @include text-default-title;\n}\n\n:host(.text-default-title-single) {\n  @include text-default-title-single;\n}\n\n:host(.text-l) {\n  @include text-l;\n}\n\n:host(.text-l-single) {\n  @include text-l-single;\n}\n\n:host(.text-l-title) {\n  @include text-l-title;\n}\n\n:host(.text-l-title-single) {\n  @include text-l-title-single;\n}\n\n:host(.text-h2) {\n  @include text-h2;\n}\n\n:host(.text-xl) {\n  @include text-xl;\n}\n\n$typography-formats: label, label-xs, label-sm, label-lg, body, body-xs, body-sm,\n  body-lg, display, display-xs, display-sm, display-lg, display-xl, display-xxl,\n  h6, h5, h4, h3, h2, h1, code, code-sm, code-lg;\n\n@each $format in $typography-formats {\n  :host(.typography-#{$format}) {\n    @extend .typography-#{$format};\n  }\n}\n\n$typography-decoration: none, underline, line-through;\n@each $decoration in $typography-decoration {\n  :host(.typography-decoration-#{$decoration}) {\n    @extend .typography-decoration-#{$decoration};\n  }\n}\n\n:host(.typography-weight-bold) {\n  @extend .typography-weight-bold;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { VariantsMapping } from './type-mapping';\n\nexport type TypographyVariants =\n  | 'x-small'\n  | 'small'\n  | 'caption'\n  | 'caption-single'\n  | 'default'\n  | 'default-single'\n  | 'default-title'\n  | 'default-title-single'\n  | 'large'\n  | 'large-single'\n  | 'large-title'\n  | 'large-title-single'\n  | 'h2'\n  | 'display-large';\n\nexport type TypographyColors =\n  | 'contrast'\n  | 'std'\n  | 'soft'\n  | 'weak'\n  | 'inv-contrast'\n  | 'inv-std'\n  | 'inv-soft'\n  | 'inv-weak'\n  | 'alarm';\n\ntype TypographyFormatLabel = 'label' | 'label-xs' | 'label-sm' | 'label-lg';\ntype TypographyFormatBody = 'body' | 'body-xs' | 'body-sm' | 'body-lg';\ntype TypographyFormatDisplay =\n  | 'display'\n  | 'display-xs'\n  | 'display-sm'\n  | 'display-lg'\n  | 'display-xl'\n  | 'display-xxl';\ntype TypographyFormatHeading = 'h6' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1';\ntype TypographyFormatCode = 'code' | 'code-sm' | 'code-lg';\n\nexport type TypographyFormat =\n  | TypographyFormatLabel\n  | TypographyFormatBody\n  | TypographyFormatDisplay\n  | TypographyFormatHeading\n  | TypographyFormatCode;\n\nexport type TextDecoration = 'none' | 'underline' | 'line-through';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-typography',\n  styleUrl: 'typography.scss',\n  shadow: true,\n})\nexport class IxTypography {\n  /**\n   * Font variant based on theme variables\n   *\n   * @deprecated Use `format` property\n   * @internal\n   */\n  @Prop() variant: TypographyVariants;\n\n  /**\n   * Text format\n   */\n  @Prop() format: TypographyFormat;\n\n  /**\n   * Text color based on theme variables\n   *\n   * @deprecated since 2.1.0 use property `text-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: TypographyColors;\n\n  /**\n   * Text color based on theme variables\n   */\n  @Prop() textColor: TypographyColors;\n\n  /**\n   * Display text bold\n   */\n  @Prop() bold = false;\n\n  /**\n   * Text decoration\n   */\n  @Prop() textDecoration: TextDecoration = 'none';\n\n  render() {\n    let typographyClass = {};\n\n    if (this.variant) {\n      typographyClass[VariantsMapping[this.variant ?? 'default']] = true;\n    } else {\n      typographyClass[`typography-${this.format ?? 'body'}`] = true;\n    }\n\n    if (this.textDecoration !== 'none') {\n      typographyClass[`typography-decoration-${this.textDecoration}`] = true;\n    }\n\n    typographyClass['typography-weight-bold'] = this.bold;\n\n    let style = {};\n\n    if (this.color) {\n      style = {\n        color: `var(--theme-color-${this.color}-text)`,\n      };\n    }\n\n    if (this.textColor) {\n      style = {\n        color: `var(--theme-color-${this.textColor}-text)`,\n      };\n    }\n\n    return (\n      <Host class={typographyClass} style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-upload.cjs.entry.js

@@ -87,7 +87,7 @@ const Upload = class {
         this.filesToUpload = obj;
     }
     render() {
-        return (index.h(index.Host, { key: 'c13c30ad2fa2a251ad872d7b0461f625798a3d2a' }, index.h("div", { key: '572bf6899630cdc1fdff1518750415270792a368', class: {
+        return (index.h(index.Host, { key: '24415b4716bc4e6e575668cb5b09f978ebd387d4' }, index.h("div", { key: '877e983ae775fa95ffd5254b3bb7697db4cd2720', class: {
                 'file-upload-area': true,
                 'file-over': this.state !== uploadFileState.UploadFileState.LOADING && this.isFileOver,
                 checking: this.state === uploadFileState.UploadFileState.LOADING,
@@ -97,9 +97,9 @@ const Upload = class {
                 if (this.state !== uploadFileState.UploadFileState.LOADING) {
                     this.fileDropped(e);
                 }
-            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), index.h("div", { key: '5c48357676e704f0e285e510059593c526ca47fc' }, index.h("input", { key: '5ed9faca22b46db4962c64ff3822c59d3e44cf95', multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
+            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), index.h("div", { key: '6828b521609b8698f3ebc78ed83256a4fbb3cfea' }, index.h("input", { key: 'e825ce2834b93d3ef09100d29d127573eb812cfa', multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
                 this.fileChangeEvent(e);
-            }, accept: this.accept }), index.h("ix-button", { key: '6e5bcfec5d982c8674e6bf38bbf1e0d805b1af0f', tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: this.disabled || this.state === uploadFileState.UploadFileState.LOADING }, this.i18nUploadFile)))));
+            }, accept: this.accept }), index.h("ix-button", { key: '117dd488e465ec542381b38b90d9d6a2ac5afb35', tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: this.disabled || this.state === uploadFileState.UploadFileState.LOADING }, this.i18nUploadFile)))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-validation-tooltip.cjs.entry.js

@@ -133,13 +133,13 @@ const ValidationTooltip = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '2adabc09b27adab332a05e06f95f778e635db7cf' }, index.h("slot", { key: '9737aa1f46813f88404c5a80eaf0b8e1c6b166c4' }), index.h("div", { key: '6be2cd8f7c24bd7c3ddc42218ca0b70d3c56dc0a', role: "tooltip", style: {
+        return (index.h(index.Host, { key: '67aacf7f22d2d165674ab78c2f590c54abe33420' }, index.h("slot", { key: 'e0c33f6e04e6ce11caeb8dba4318214699de0f4c' }), index.h("div", { key: '3c5d508386e333a2ca50dc5bfe6ab59375c60e37', role: "tooltip", style: {
                 display: 'none',
                 position: 'fixed',
                 top: '0',
                 left: '0',
                 transform: `translate(${Math.round(((_a = this.tooltipPosition) === null || _a === void 0 ? void 0 : _a.x) || 0)}px,${Math.round(((_b = this.tooltipPosition) === null || _b === void 0 ? void 0 : _b.y) || 0)}px)`,
-            }, class: "validation-tooltip text-default" }, this.message, index.h("slot", { key: '228c539e4447ce9a4c89ffe584f9b712ccaa1924', name: "tooltip-message" }), index.h("div", { key: 'cdbaf18c6c2033b9b03e33b4e5826309f504df14', id: "arrow" }))));
+            }, class: "validation-tooltip text-default" }, this.message, index.h("slot", { key: '8e87f49c00ea3916fd83a3b7e69b996311197dcb', name: "tooltip-message" }), index.h("div", { key: '1bd0d2d368cb7cb0fa113605522fff53831f2c35', id: "arrow" }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-workflow-step.cjs.entry.js

@@ -72,18 +72,18 @@ const WorkflowStep = class {
     }
     render() {
         const icons = !this.customIconSlot ? (index.h(index.Fragment, null, index.h("ix-icon", { color: "color-1", name: this.iconName === 'warning' ? 'triangle-filled' : 'circle-filled', class: "absolute", size: "24" }), index.h("ix-icon", { color: this.iconColor, name: this.iconName, class: "absolute", size: "24" }))) : null;
-        return (index.h(index.Host, { key: 'e6da26c63019f1efd788ac0e6d64e8c669f711b3', onClick: () => this.onStepClick() }, index.h("div", { key: '607ad21e42070abc412fd4a5313e207f7908d765', tabIndex: 0, class: {
+        return (index.h(index.Host, { key: '358b9e3e25d832467c9b2abbdf9f48a270a4a340', onClick: () => this.onStepClick() }, index.h("div", { key: 'e5206e9a7ba4f3a3c63f82199d434f4f66e1f1dc', tabIndex: 0, class: {
                 step: true,
                 selected: this.selected,
                 vertical: this.vertical,
                 disabled: this.disabled,
                 clickable: this.clickable && !this.disabled,
-            } }, index.h("div", { key: 'a55397363ac7fdb3579751903e98e4840314a2c7', class: "wrapper" }, index.h("div", { key: 'b4044cabf368cdb5632727baf1a9040a2ba59296', class: {
+            } }, index.h("div", { key: '26fc906525c73bbfb79053ccfa0c4f7f0a2ececd', class: "wrapper" }, index.h("div", { key: '3990d45cdf8241bd53a849d11313e877ef82c974', class: {
                 line: true,
                 selected: this.selected,
                 [this.status]: true,
                 [this.position]: true,
-            } }), index.h("div", { key: 'da4cbb5b0755dea7c8ff4c45676a5c7da33e0caf', class: "iconWrapper" }, icons, index.h("slot", { key: '3059dcda912a1fd2d7225dd7c97cf6c7f640b875', name: "custom-icon" }))), index.h("div", { key: '316a8dbb4b5e8845cca3635b3f2c1bb5ef3ebefd', class: "text" }, index.h("slot", { key: '9cc1127aa169fb7096b671720160da4a3ab7efc7' })))));
+            } }), index.h("div", { key: '9d509a30ef4c514c8d71048e9cf29bfe954659ff', class: "iconWrapper" }, icons, index.h("slot", { key: '61edba63ba2d2f812837fb50f55f8ce184c5821d', name: "custom-icon" }))), index.h("div", { key: '1e0f1c991dcd3d9d6ca9368ffef196c3133f78ba', class: "text" }, index.h("slot", { key: 'b758245d47b573e20a6cae6e8d28b1aa030f5b65' })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-workflow-steps.cjs.entry.js

@@ -71,7 +71,7 @@ const WorkflowSteps = class {
         this.updateSteps();
     }
     render() {
-        return (index.h(index.Host, { key: '0df56c84cde310027e181c8fd5d8c9dd4f5c9451' }, index.h("div", { key: '2f82dfc3689d431ac06586f673895b9c36799847', class: { steps: true, vertical: this.vertical } }, index.h("slot", { key: 'c22421b7917f1d61bc2624979bee8b8804cc8aa3' }))));
+        return (index.h(index.Host, { key: 'f142d00b7e556dc24442861edded53c090d3a2bb' }, index.h("div", { key: 'c5681d900c92023bff93b1d102fb5002da1d7a04', class: { steps: true, vertical: this.vertical } }, index.h("slot", { key: '866edb3dbeba5853bb4fdf1b764ff6f689002b5e' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/{menu-tabs-fc-b6a9af97.js → menu-tabs-fc-30a1b06b.js}

@@ -61,7 +61,7 @@ const MenuSettings = class {
         index.forceUpdate(this.el);
     }
     render() {
-        return index.h(MenuTabs, { key: 'a2691ce375c764745c7b364ac8d09e280869c86d', context: this });
+        return index.h(MenuTabs, { key: '81cb8883f4cdcf08c1d6005c634cfe9d44fde8e2', context: this });
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -102,4 +102,4 @@ exports.MenuTabs = MenuTabs;
 exports.initialize = initialize;
 exports.setTab = setTab;
 
-//# sourceMappingURL=menu-tabs-fc-b6a9af97.js.map
+//# sourceMappingURL=menu-tabs-fc-30a1b06b.js.map

package/dist/cjs/{menu-tabs-fc-b6a9af97.js.map → menu-tabs-fc-30a1b06b.js.map}

@@ -1 +1 @@
-{"file":"menu-tabs-fc-b6a9af97.js","mappings":"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","names":["forceUpdate","h","Host"],"sources":["src/components/utils/menu-tabs/menu-tabs-utils.ts","src/components/menu-settings/menu-settings.scss?tag=ix-menu-settings&encapsulation=shadow","src/components/menu-settings/menu-settings.tsx","src/components/utils/menu-tabs/menu-tabs-fc.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { MenuAbout } from 'src/components/menu-about/menu-about';\nimport { MenuSettings } from 'src/components/menu-settings/menu-settings';\n\nfunction getItems(\n  context: MenuSettings | MenuAbout\n): HTMLIxMenuSettingsItemElement[] | HTMLIxMenuAboutItemElement[] {\n  return Array.from(\n    context.el.querySelectorAll(\n      context instanceof MenuSettings\n        ? 'ix-menu-settings-item'\n        : 'ix-menu-about-item'\n    )\n  );\n}\n\nexport function setTab(context: MenuSettings | MenuAbout, label: string) {\n  context.activeTabLabel = label;\n  context.items.forEach((i) => {\n    i.style.display = 'none';\n    if (i.label === context.activeTabLabel) {\n      i.style.display = 'block';\n    }\n  });\n}\n\nexport function initialize(context: MenuSettings | MenuAbout) {\n  context.items = getItems(context);\n\n  if (context.items.length) {\n    setTab(context, context.activeTabLabel || context.items[0].label);\n  }\n\n  context.items.forEach((item) => {\n    item.addEventListener('labelChange', (e: CustomEvent) => {\n      context.items = getItems(context);\n\n      if (e.detail.oldLabel === context.activeTabLabel) {\n        context.activeTabLabel = e.detail.newLabel;\n      }\n    });\n  });\n}\n\nexport interface CustomLabelChangeEvent {\n  name: string;\n  oldLabel: string;\n  newLabel: string;\n}\n\nexport interface CustomCloseEvent {\n  nativeEvent: MouseEvent;\n  name: string;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/fonts';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: $medium-space $default-space $default-space $x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .settings-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: $x-large-space;\n    margin-bottom: $small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 1rem;\n    }\n  }\n\n  ix-tabs {\n    margin-bottom: 1.5rem;\n  }\n\n  .settings-tabs {\n    margin-bottom: $large-space;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n  CustomCloseEvent,\n  initialize,\n  setTab,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  shadow: true,\n})\nexport class MenuSettings {\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'Settings';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  /**\n   * Popover closed\n   */\n  @Event() close: EventEmitter<CustomCloseEvent>;\n\n  @State() items: HTMLIxMenuSettingsItemElement[];\n\n  @Watch('activeTabLabel')\n  updateTab(label: string) {\n    setTab(this, label);\n  }\n\n  componentWillLoad() {\n    initialize(this);\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  render() {\n    return <MenuTabs context={this} />;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { FunctionalComponent, h, Host } from '@stencil/core';\nimport { MenuAbout } from 'src/components/menu-about/menu-about';\nimport { MenuSettings } from 'src/components/menu-settings/menu-settings';\nimport { setTab } from './menu-tabs-utils';\n\ninterface MenuTabsProps {\n  context: MenuSettings | MenuAbout;\n}\n\nconst getTabItems = (context: MenuSettings | MenuAbout) => {\n  return context.items.map(({ label }) => {\n    return (\n      <ix-tab-item\n        selected={label === context.activeTabLabel}\n        onClick={() => setTab(context, label)}\n      >\n        {label}\n      </ix-tab-item>\n    );\n  });\n};\n\nexport const MenuTabs: FunctionalComponent<MenuTabsProps> = ({ context }) => (\n  <Host\n    slot={\n      context instanceof MenuSettings ? 'ix-menu-settings' : 'ix-menu-about'\n    }\n    class={{\n      show: context.show,\n    }}\n  >\n    <div\n      class={\n        context instanceof MenuSettings ? 'settings-header' : 'about-header'\n      }\n    >\n      <h2 class=\"text-h2\">{context.label}</h2>\n      <ix-icon-button\n        ghost\n        size=\"24\"\n        icon={'close'}\n        onClick={(e) =>\n          context.close.emit({\n            name:\n              context instanceof MenuSettings\n                ? 'ix-menu-settings'\n                : 'ix-menu-about',\n            nativeEvent: e,\n          })\n        }\n      ></ix-icon-button>\n    </div>\n    <ix-tabs>{getTabItems(context)}</ix-tabs>\n    <slot></slot>\n  </Host>\n);\n"],"version":3}
+{"file":"menu-tabs-fc-30a1b06b.js","mappings":"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","names":["forceUpdate","h","Host"],"sources":["src/components/utils/menu-tabs/menu-tabs-utils.ts","src/components/menu-settings/menu-settings.scss?tag=ix-menu-settings&encapsulation=shadow","src/components/menu-settings/menu-settings.tsx","src/components/utils/menu-tabs/menu-tabs-fc.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { MenuAbout } from 'src/components/menu-about/menu-about';\nimport { MenuSettings } from 'src/components/menu-settings/menu-settings';\n\nfunction getItems(\n  context: MenuSettings | MenuAbout\n): HTMLIxMenuSettingsItemElement[] | HTMLIxMenuAboutItemElement[] {\n  return Array.from(\n    context.el.querySelectorAll(\n      context instanceof MenuSettings\n        ? 'ix-menu-settings-item'\n        : 'ix-menu-about-item'\n    )\n  );\n}\n\nexport function setTab(context: MenuSettings | MenuAbout, label: string) {\n  context.activeTabLabel = label;\n  context.items.forEach((i) => {\n    i.style.display = 'none';\n    if (i.label === context.activeTabLabel) {\n      i.style.display = 'block';\n    }\n  });\n}\n\nexport function initialize(context: MenuSettings | MenuAbout) {\n  context.items = getItems(context);\n\n  if (context.items.length) {\n    setTab(context, context.activeTabLabel || context.items[0].label);\n  }\n\n  context.items.forEach((item) => {\n    item.addEventListener('labelChange', (e: CustomEvent) => {\n      context.items = getItems(context);\n\n      if (e.detail.oldLabel === context.activeTabLabel) {\n        context.activeTabLabel = e.detail.newLabel;\n      }\n    });\n  });\n}\n\nexport interface CustomLabelChangeEvent {\n  name: string;\n  oldLabel: string;\n  newLabel: string;\n}\n\nexport interface CustomCloseEvent {\n  nativeEvent: MouseEvent;\n  name: string;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/fonts';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: $medium-space $default-space $default-space $x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .settings-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: $x-large-space;\n    margin-bottom: $small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 1rem;\n    }\n  }\n\n  ix-tabs {\n    margin-bottom: 1.5rem;\n  }\n\n  .settings-tabs {\n    margin-bottom: $large-space;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n  CustomCloseEvent,\n  initialize,\n  setTab,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  shadow: true,\n})\nexport class MenuSettings {\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'Settings';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  /**\n   * Popover closed\n   */\n  @Event() close: EventEmitter<CustomCloseEvent>;\n\n  @State() items: HTMLIxMenuSettingsItemElement[];\n\n  @Watch('activeTabLabel')\n  updateTab(label: string) {\n    setTab(this, label);\n  }\n\n  componentWillLoad() {\n    initialize(this);\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  render() {\n    return <MenuTabs context={this} />;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { FunctionalComponent, h, Host } from '@stencil/core';\nimport { MenuAbout } from 'src/components/menu-about/menu-about';\nimport { MenuSettings } from 'src/components/menu-settings/menu-settings';\nimport { setTab } from './menu-tabs-utils';\n\ninterface MenuTabsProps {\n  context: MenuSettings | MenuAbout;\n}\n\nconst getTabItems = (context: MenuSettings | MenuAbout) => {\n  return context.items.map(({ label }) => {\n    return (\n      <ix-tab-item\n        selected={label === context.activeTabLabel}\n        onClick={() => setTab(context, label)}\n      >\n        {label}\n      </ix-tab-item>\n    );\n  });\n};\n\nexport const MenuTabs: FunctionalComponent<MenuTabsProps> = ({ context }) => (\n  <Host\n    slot={\n      context instanceof MenuSettings ? 'ix-menu-settings' : 'ix-menu-about'\n    }\n    class={{\n      show: context.show,\n    }}\n  >\n    <div\n      class={\n        context instanceof MenuSettings ? 'settings-header' : 'about-header'\n      }\n    >\n      <h2 class=\"text-h2\">{context.label}</h2>\n      <ix-icon-button\n        ghost\n        size=\"24\"\n        icon={'close'}\n        onClick={(e) =>\n          context.close.emit({\n            name:\n              context instanceof MenuSettings\n                ? 'ix-menu-settings'\n                : 'ix-menu-about',\n            nativeEvent: e,\n          })\n        }\n      ></ix-icon-button>\n    </div>\n    <ix-tabs>{getTabItems(context)}</ix-tabs>\n    <slot></slot>\n  </Host>\n);\n"],"version":3}

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

@@ -93,12 +93,12 @@ export class Application {
         });
     }
     render() {
-        return (h(Host, { key: '5611ad541df7672a749f3042f7accf1bc0f4fea3', "data-role": "", class: {
+        return (h(Host, { key: 'c617c1c5634cc4e151ad45bfec3be602619df7bb', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, h("slot", { key: 'b8600e40c99555bae7055b6a4894df57a7d49026', name: "application-header" }), h("div", { key: 'ad71a6e9d05034a173b16075b4343b5244c40e98', class: "application" }, h("slot", { key: '6ae1d4a193cc858529efbb0a06421ecf5437224a', name: "menu" }), h("aside", { key: '06a2517aae4b8e0edc4ede14f03b87e9960a39a3', class: {
+            } }, h("slot", { key: '7dd298629e5d825957cc5caf15be3726e0487374', name: "application-header" }), h("div", { key: '41da1f0707c6f6723e33a50f4c45cda28bed9e77', class: "application" }, h("slot", { key: '7d2b838c6193af2fc357befb1c15cd6870d85841', name: "menu" }), h("aside", { key: '73ce757bc32176170b51cf95013b13f5594c0eb2', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, h("slot", { key: '77d253b74578d2392718dcb26ed16c52a60e93ae', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("main", { key: '34861c56227c6adce9503099d2b1a7a66bfbafa6', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '55b324f84d53c0a8a2a49cdcf49b940131ec7ea9' })))));
+            }, onClick: () => this.onContentClick() }, h("slot", { key: '8361978e6d5cdccae60544290253175e27e00b54', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("main", { key: 'cbce05cd33d05f8f6a4e7cf7e7f8582e560da0d6', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'd3a7f19add2a6cf2f976c9be1b8688fa5e997e48' })))));
     }
     static get is() { return "ix-application"; }
     static get encapsulation() { return "shadow"; }

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

@@ -95,12 +95,12 @@ export class ApplicationHeader {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'b572496c016318e8a9d6e6e8db7b9de61abb3861', class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' && this.suppressResponsive === false && (h("ix-burger-menu", { onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
+        return (h(Host, { key: '5434362f681c6d6d67b1eaf5e5ebc993e578f8e9', class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' && this.suppressResponsive === false && (h("ix-burger-menu", { onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
             this.breakpoint !== 'sm' &&
-            this.suppressResponsive === false && (h("ix-icon-button", { onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), h("div", { key: '6882fe0ae0d6653ef42c0e58dc65fb92d03ab4ea', class: "logo" }, h("slot", { key: '77d7b96f98d629e08dc5bc3e4338b703bbe1e2a6', name: "logo" })), h("div", { key: '84e0f79f501266f0d0b220f87aaa4a7aab8dc659', class: "name" }, this.name), h("div", { key: '2fae6ae95a4696765a3421ccc002e3e9efa6fbd6', class: "content" }, this.breakpoint === 'sm' ? (h(Fragment, null, h("ix-icon-button", { class: {
+            this.suppressResponsive === false && (h("ix-icon-button", { onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), h("div", { key: '2a40f871e8359d2ad378546773c8ec1b583d1684', class: "logo" }, h("slot", { key: 'd53fb161f6accdbdd92c7455e0a81faab242054d', name: "logo" })), h("div", { key: '1244da8ee7ddbec82df90f6204948939dc67079c', class: "name" }, this.name), h("div", { key: '7a1256fba0480dba4e42da20f55c268b88422a99', class: "content" }, this.breakpoint === 'sm' ? (h(Fragment, null, h("ix-icon-button", { class: {
                 ['context-menu']: true,
                 ['context-menu-visible']: this.hasSlottedElements,
-            }, "data-context-menu": true, icon: "more-menu", ghost: true }), h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, h("div", { class: "dropdown-content" }, h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), h("slot", { key: 'd9f22375761d77beb0fc038195c06d0e23297d31', name: "ix-application-header-avatar" }))));
+            }, "data-context-menu": true, icon: "more-menu", ghost: true }), h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, h("div", { class: "dropdown-content" }, h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), h("slot", { key: '6732e9899c977bdd6301b75efce7687ca5a0bf4c', name: "ix-application-header-avatar" }))));
     }
     static get is() { return "ix-application-header"; }
     static get encapsulation() { return "shadow"; }