@siemens/ix 2.1.2-beta.0 → 2.1.2

package/dist/collection/components/pill/pill.js

@@ -26,13 +26,13 @@ export class Pill {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: '8cdaa8d8b2c429a046db4bc3ecf05fab8c8dd43d', style: this.variant === 'custom'
+        return (h(Host, { key: '564411b5f68232e91613cd49b790f8ccff034868', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.pillColor) !== null && _b !== void 0 ? _b : this.color,
                 }
                 : {}, title: this.el.textContent, class: {
                 'align-left': this.alignLeft,
-            } }, h("div", { key: '2be689c5f608c39f13969c80680f2a482d0e33bb', style: Object.assign({}, customStyle), class: {
+            } }, h("div", { key: '249644ab34859bf451ed47e64fc51e7858a0ab06', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -46,10 +46,10 @@ export class Pill {
                 custom: this.variant === 'custom',
                 closable: false,
                 icon: !!this.icon,
-            } }, h("ix-icon", { key: '3695a57e5de1e243a9b453df6ea1fc9e6a8a37a4', class: {
+            } }, h("ix-icon", { key: 'f5eeee5bc7b218055775ac7f3dbae95cf697d810', class: {
                 'with-icon': true,
                 hidden: this.icon === undefined || this.icon === '',
-            }, name: this.icon, size: '16' }), h("span", { key: '999f7e18df2ae7e0626714d85f4abcca0a0e8bce', class: "slot-container" }, h("slot", { key: 'bcc766b78fa8cf6a2b044b0356296225862765c9' })))));
+            }, name: this.icon, size: '16' }), h("span", { key: '14644dee7a8aae4b0f9fd3dd0a6fe51dc8586da6', class: "slot-container" }, h("slot", { key: '33553ee2ba967003bad9f7c52e78d2c383df1c08' })))));
     }
     static get is() { return "ix-pill"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/playground/example-modal.js

@@ -16,7 +16,7 @@ export class ModalExample {
         closeModal(this.host, 'Done!');
     }
     render() {
-        return (h(Host, { key: '85333f30e3940babe00480e30095861fa379f123' }, h("div", { key: '9805d492738ea84091a7bcf3f50192afc6e76344' }, h("div", { key: '5af465ed1d115c884c6f3c88119e4622f1ca18e5', class: "modal-header" }, "Message headline", h("ix-icon-button", { key: '08a1f2c1b74ff92701ec759d7820852116f2be39', "data-close-button": true, ghost: true, icon: 'close', onClick: () => this.dismiss() })), h("div", { key: '82d08e54b5bd9b6d61540b29ee4ceca1865dbad0', class: "modal-body" }, "Message text lorem ipsum"), h("div", { key: '0ea9fcb2af82f857e57ff0824bc8d57810d476b1', class: "modal-footer" }, h("ix-button", { key: '5848a921f72c98aa1357f9be22aaf59b5f0f731f', outline: true, onClick: () => this.dismiss() }, "Cancel"), h("ix-button", { key: 'c8c59ada2bb35d46add0b0c1333ec0c28ab6e83d', onClick: () => this.close() }, "OK")))));
+        return (h(Host, { key: '4621916acefb534c958613badbc9755946e55531' }, h("div", { key: '37996e6d6f79746c5c4fe85357311adac32a04e2' }, h("div", { key: '4012ad9a3f9283f952f03011a93b7a9d99037142', class: "modal-header" }, "Message headline", h("ix-icon-button", { key: '16416236c4232b078d9169a679ab364957d38023', "data-close-button": true, ghost: true, icon: 'close', onClick: () => this.dismiss() })), h("div", { key: '223b73f590629a6e88c7085d947154c13a0b32c4', class: "modal-body" }, "Message text lorem ipsum"), h("div", { key: '83c670e30fcc9e579f41d83873996768a38348d3', class: "modal-footer" }, h("ix-button", { key: '57f16306d1dab23a7562616e42caadf9a3c135fa', outline: true, onClick: () => this.dismiss() }, "Cancel"), h("ix-button", { key: '5e6b2408a088aea8a879f34560a86c089a88b5b9', onClick: () => this.close() }, "OK")))));
     }
     static get is() { return "ix-modal-example"; }
     static get elementRef() { return "host"; }

package/dist/collection/components/playground/playground.js

@@ -10,7 +10,7 @@ import { h, Host } from "@stencil/core";
 /** @internal */
 export class PlaygroundInternal {
     render() {
-        return h(Host, { key: '3915db9ac2de375515704818abb979e9aef1dbb7' });
+        return h(Host, { key: '2c7023915b61491ec4626431974c787778741459' });
     }
     static get is() { return "ix-playground-internal"; }
     static get encapsulation() { return "scoped"; }

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

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

package/dist/collection/components/row/row.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Row {
     render() {
-        return (h(Host, { key: 'ae640297aa02dba7d4ca3f43f929ba9149889a3d' }, h("slot", { key: '38c1e1ee0c51c93c79e1f1a8e8c6a95e08760f24' })));
+        return (h(Host, { key: '2770cfaea562d4645313f6a45760f6a815008845' }, h("slot", { key: '6eeb8750c92b167909e7f0031decf80aef40662c' })));
     }
     static get is() { return "ix-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.js

@@ -296,7 +296,7 @@ export class Select {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '2a59659f35973f2297d3b34cb0ae84c3e5d80c04' }, h("div", { key: 'cca889f2ba4c3db6e74a65fd21d9ca7428e9dc52', class: {
+        return (h(Host, { key: 'a1ff9238e7bd384371924fc1a6c84dbf2c2b2026' }, h("div", { key: '4f022e97659a4ccd2787ba5b753b53e15ef9da6b', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
@@ -304,13 +304,13 @@ export class Select {
                 this.dropdownAnchor = ref;
                 if (!this.editable)
                     this.dropdownWrapperRef = ref;
-            } }, h("div", { key: '98ca1de8783cd95db76d969bade2aa2078c8224f', class: "input-container" }, h("div", { key: '4d4ac31033855345467e355f168a5ce7e47ce8c6', class: "chips" }, this.isMultipleMode
+            } }, h("div", { key: '68fd990dca31dcd85ce40c7976d1e6841f6916c3', class: "input-container" }, h("div", { key: '7ca63a0aeb267e042bf0699d51316af5ad9f87c5', class: "chips" }, this.isMultipleMode
             ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.itemClick(item.value);
                 } }, item.label)))
-            : '', h("div", { key: 'd50bab808cbf2bd146c39052f7f008f94ad93f70', class: "trigger" }, h("input", { key: '1b91bbc00aed4ec69543d3e4c3fe1eff00c87c90', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
+            : '', h("div", { key: '0ff312e92b3235e17daac6e861a6dac456f96bfd', class: "trigger" }, 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;
@@ -322,16 +322,16 @@ export class Select {
             } })) : null, this.disabled || this.readonly ? null : (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;
-            } })))))), h("ix-dropdown", { key: '3feb553427991c96b45b49aecce64de203846902', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            } })))))), 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`,
                 };
-            } }, h("div", { key: '3c07355d8c3ebcc3a5f180ac8acf57297f9768ac', class: {
+            } }, h("div", { key: 'b66559fa7650a544ff8d02dd18881c7a5c83bc7a', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", { key: '2bb33255f9a58b647d0897e8ff1b38fa6aba888b' }), h("div", { key: '2e9bcf50f2a45e292103e4a201d421ad904becd2', ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
+            }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", { key: 'c0a36530172388d4785fbfff89555435a9af94d0' }), h("div", { key: 'a7bdc5c18377a6359c0665b986429a96fb88aab2', ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();

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

@@ -13,6 +13,9 @@
 :host > ix-dropdown-item {
   width: 100%;
 }
+:host ix-dropdown-item {
+  color: var(--theme-color-std-text);
+}
 :host .select-item-checked {
   background-color: var(--theme-select-list-item--background--selected);
   --ix-dropdown-item-checked-color: var(--theme-color-std-text);

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

@@ -36,7 +36,7 @@ export class SelectItem {
         }));
     }
     render() {
-        return (h(Host, { key: 'c56aa1ee5e174f9de7905bcaef381e0a8fd212a2' }, h("ix-dropdown-item", { key: '00ec7a1e52a6b17cf94ce702239fef06df0cb936', class: {
+        return (h(Host, { key: '3d43f9c4cc86b5820ebe0fe15c3ccd2a6a4f0f95' }, h("ix-dropdown-item", { key: 'a169c7bf3533f5203ad557b6ef52edd6ddf9c547', class: {
                 'select-item-checked': this.selected,
             }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
     }

package/dist/collection/components/slider/slider.js

@@ -118,12 +118,12 @@ export class Slider {
             traceStart = valueInPercentage;
             traceEnd = traceReferenceInPercentage;
         }
-        return (h(Host, { key: '8c85501e96b06c0978e105a3c385ff0824c65a8f', class: {
+        return (h(Host, { key: 'fc1ccd48aeefe6a53f7299db447b5c5e6fb6b13d', class: {
                 disabled: this.disabled,
                 error: !!this.error,
-            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("div", { key: 'd55ef7538ee1c4ddc5cbce9084f942100e3c973d', class: "slider" }, h("div", { key: 'ca12a0723b0413045b159fb0ff7c0e86492ec7dd', class: "track" }, h("div", { key: '14ac930b5473b74eb429723fee183c92c3fafdfb', class: "thumb", style: {
+            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, h("div", { key: '4e3d3b0d5e1b2a2882ce0073336e4cd13ac1a4b8', class: "slider" }, h("div", { key: 'f8457c6d8efad8d172abe49f9037cb71f9ba226f', class: "track" }, h("div", { key: 'cf141d91936a74657f8788f5f7c688e37ebf7a16', class: "thumb", style: {
                 left: `calc(${valueInPercentage} * 100% - 8px)`,
-            } }), h("div", { key: '3e44ab3c48f5d3225a2bef007c33f1637daed6a1', class: "ticks" }, this.marker
+            } }), h("div", { key: 'b54ae34bda82b7f0277ae361c5139845830dc85d', class: "ticks" }, this.marker
             ? this.marker.map((markerValue) => {
                 if (markerValue > this.max || markerValue < this.min) {
                     return;
@@ -136,7 +136,7 @@ export class Slider {
                         '--tick-value': `${left}`,
                     } }));
             })
-            : null)), 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)), 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}`,
@@ -147,9 +147,9 @@ export class Slider {
                 this.showTooltip = true;
             }, onBlur: () => {
                 this.showTooltip = false;
-            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), h("ix-tooltip", { key: '24fda111d2fb0582b41a43f621534984cfa0b851', class: {
+            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), h("ix-tooltip", { key: '387dc09d28b3c45f08470ba651c659e8c528a44d', class: {
                 'hide-tooltip': !this.showTooltip,
-            }, animationFrame: true }, this.rangeInput)), h("div", { key: '3f048b282a1b5bce1a30710eaaeaa4a14d19ee32', class: "label" }, h("div", { key: '08e62143c2ea733010a59031e7eb2fa261b47de6', class: "label-start" }, h("slot", { key: 'e2902262ac37d93cd57b08230697735c5fdd95ed', name: "label-start" })), h("div", { key: 'fe84bba24a5a9673f4b4d86a6463381b84ef5069', class: "label-end" }, h("slot", { key: '9bfb718f207f3efac2c3d45f424264d45c293065', name: "label-end" }))), this.error ? (h("ix-typography", { class: 'label-error', color: "alarm" }, this.error)) : null));
+            }, animationFrame: true }, this.rangeInput)), h("div", { key: 'f8fdb048411a622870b4b0698c7124f7e175dedf', class: "label" }, h("div", { key: '2bbb6c7418953b907b1ef604a8d775c1e69d6626', class: "label-start" }, h("slot", { key: 'ce4a5aedbfafe7b5b71d47421bae0ab385548920', name: "label-start" })), h("div", { key: '98b40f2b68164592307f7f9817c913dffcb08139', class: "label-end" }, h("slot", { key: 'bcd3497745bf949da88cd373ecf8cd3f74488ffe', name: "label-end" }))), this.error ? (h("ix-typography", { class: 'label-error', color: "alarm" }, this.error)) : null));
     }
     static get is() { return "ix-slider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -14,7 +14,7 @@ export class Spinner {
         this.hideTrack = false;
     }
     render() {
-        return (h(Host, { key: '764ff87a7fd663a12419610e551a54778bd7700a', class: {
+        return (h(Host, { key: 'fce135db438427cf948004c96dcee4c044cd1a98', class: {
                 primary: this.variant === 'primary',
                 'xx-small': this.size === 'xx-small',
                 'x-small': this.size === 'x-small',

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

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

package/dist/collection/components/split-button-item/split-button-item.js

@@ -22,7 +22,7 @@ export class SplitButtonItem {
         return this.wrapperRef.waitForCurrent();
     }
     render() {
-        return (h(Host, { key: 'f25e1e6cb9b54071058b126718b0892bec07e9dc' }, h("ix-dropdown-item", { key: '0dd8665d736ab6d19e694de3eb72f32c4222d100', ref: this.wrapperRef, suppressChecked: true, icon: this.icon, label: this.label, onItemClick: (e) => {
+        return (h(Host, { key: '2857acae0de3f6e738276080924f3e1b937546c6' }, 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/collection/components/tab-item/tab-item.js

@@ -31,7 +31,7 @@ export class TabItem {
         };
     }
     render() {
-        return (h(Host, { key: '62eea432a4d9c19db812f736ec3d08e03d411b48', class: this.tabItemClasses({
+        return (h(Host, { key: '77688f6b83f53ba0de891d2ed529c7b82941930a', class: this.tabItemClasses({
                 selected: this.selected,
                 disabled: this.disabled,
                 small: this.small,
@@ -46,12 +46,12 @@ export class TabItem {
                 if (clientEvent.defaultPrevented) {
                     event.stopPropagation();
                 }
-            } }, h("div", { key: '31f7dd998cfe6b2f72a57a4738d87d70b4e13383', class: {
+            } }, h("div", { key: 'd1790baee81972038f8a09c0e7a0ee3124e828a6', class: {
                 circle: this.rounded,
                 text: !this.rounded,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, h("slot", { key: '591b96b26a84f459d81d46645aa1db78748725bb' })), h("div", { key: '70ddcd21e4f76f4549e6c830640acdb7e33e3150', class: {
+            } }, h("slot", { key: '7dcd5bcd496e9955b45f00b570fb935a0e9a8969' })), h("div", { key: '435deec3155b879b5f8a397124bf9a198283c2bd', class: {
                 counter: true,
                 selected: this.selected,
                 hidden: !(this.rounded && this.counter !== undefined),

package/dist/collection/components/tabs/tabs.js

@@ -197,13 +197,13 @@ export class Tabs {
         });
     }
     render() {
-        return (h(Host, { key: '44c009492a3faabd3dc4266f6a4070037f590caa' }, h("div", { key: 'c002c0b7c606bf6dd37738f2c8b233ed0556ae24', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { key: '30291a5baf33ad74ca4d4cdd52aa3de6fdaac6f5', name: 'chevron-left-small' })), h("div", { key: 'fd0842c04c463afb21e29bfb64a32189550204f0', class: {
+        return (h(Host, { key: 'f98d2ee11257c6e5879f25404379e8be5a535d31' }, h("div", { key: 'a1230a4cac929390e9415fcfe25362c029a0e22a', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { key: 'f34a2391bd3bd96c11251df77b379958be1411bf', name: 'chevron-left-small' })), 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(),
-            } }, h("div", { key: 'b62dda398149a5eef215992b4a9ce5e297fa803f', class: "items-content" }, h("slot", { key: '0383abae773ba6f7f5b4ebd9e76b4a20c9a18732' }))), h("div", { key: '7ef4269bac60f31a97ae5affa4574bbab4ba2726', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { key: '9071de44d99c4650f6ad432b40ca6592e4fa9045', name: 'chevron-right-small' }))));
+            } }, h("div", { key: '7f11e3d666b5a80a7faef2a0bf80b6a00e14c3e8', class: "items-content" }, h("slot", { key: '5e5d4c50d3c0fa30527f02a32dab998ad2d7aa5b' }))), h("div", { key: 'fbcfce76ec9d1fb48beb35ba7e62a7cc4cac7946', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { key: '7f7a80642127bff14a1c182468bec101152218ae', name: 'chevron-right-small' }))));
     }
     static get is() { return "ix-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tile/tile.js

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

package/dist/collection/components/time-picker/time-picker.js

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

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

package/dist/collection/components/toast/toast.js

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

package/dist/collection/components/toggle/toggle.js

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

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

@@ -62,9 +62,9 @@ export class ToggleButton {
                 'aria-pressed': a11yBoolean(this.pressed),
             },
         };
-        return (h(Host, { key: 'f8633f71b51df3509bc679922b432bd5c530d580', class: {
+        return (h(Host, { key: 'dfcef75c0ea69b53af7afc1df02915a869b6ef3b', class: {
                 disabled: this.disabled || this.loading,
-            } }, h(BaseButton, Object.assign({ key: '005a4497d2d37783c6dcf2824c471b56515396ed' }, baseButtonProps), h("slot", { key: '9cafada091aa59fd6b447a2821f58ebd504875cd' }))));
+            } }, h(BaseButton, Object.assign({ key: 'ea0fbe743f0c3371fb71925be47fc566e5dee37d' }, baseButtonProps), h("slot", { key: '2e6d2c6169978fc567974220437f2a7aa05c62ac' }))));
     }
     static get is() { return "ix-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

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

package/dist/collection/components/tree/tree.js

@@ -183,7 +183,7 @@ export class Tree {
         this.hyperlist = new Hyperlist(this.hostElement, config);
     }
     render() {
-        return (h(Host, { key: '5e3f0e8bbd14073590ed9ae548fa51abb50bd52b' }, h("slot", { key: '9e05d42472878f4791cce2033271e1918d40c38f' })));
+        return (h(Host, { key: 'fa198f954c529db834099df3f599ecaf65223365' }, h("slot", { key: '54e63253af180cdd5e1c2c5048bf495475db36de' })));
     }
     static get is() { return "ix-tree"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,16 +15,16 @@ export class TreeItem {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'ba0c464b633cb3ca1ed0c5690245c1a69612e7fb', class: {
+        return (h(Host, { key: 'c40a13c3395d6f3a785e7f17ed8887d0f54642c6', class: {
                 selected: (_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected,
-            } }, h("div", { key: 'b94962dfd5d8be52ae6dab6b209d7f235dc2fc97', class: "icon-toggle-container", onClick: (e) => {
+            } }, h("div", { key: '47264231c4f5b919b4f4480a409b4b2047c46fc0', class: "icon-toggle-container", onClick: (e) => {
                 e.preventDefault();
                 this.toggle.emit();
             } }, this.hasChildren ? (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), 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), h("div", { key: '5ab2e0dc8ac4b4aa5a6b6851b70980d7e04d02ea', class: "tree-node-container", onClick: () => {
                 this.itemClick.emit();
-            } }, this.text, h("slot", { key: 'd70e947ceceeb7ecef901da3bc48ba58f898d419' }))));
+            } }, this.text, h("slot", { key: '93f195d06fb13641e330028d460e2a077736c5be' }))));
     }
     static get is() { return "ix-tree-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/typography/typography.js

@@ -41,10 +41,10 @@ export class IxTypography {
         }
         if (this.textColor) {
             style = {
-                color: `var(--theme-color-${this.color}-text)`,
+                color: `var(--theme-color-${this.textColor}-text)`,
             };
         }
-        return (h(Host, { key: '5cd439405dd73273b8ae61c910dabbbbce42e3f8', class: typographyClass, style: style }, h("slot", { key: 'c6e6b842a915995847564e953cd17a8bd4972c9e' })));
+        return (h(Host, { key: 'e39b379997d1e278e600c69fcfcce98e80d5cb2c', class: typographyClass, style: style }, h("slot", { key: '25d5d4bdd1bc16158a7bea5ee137bac6e3ce3882' })));
     }
     static get is() { return "ix-typography"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAkDjD;;GAEG;AAMH,MAAM,OAAO,YAAY;;;;;;oBA8BR,KAAK;8BAKqB,MAAM;;IAE/C,MAAM;;QACJ,IAAI,eAAe,GAAG,EAAE,CAAC;QAEzB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,eAAe,CAAC,eAAe,CAAC,MAAA,IAAI,CAAC,OAAO,mCAAI,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC;QACrE,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,cAAc,MAAA,IAAI,CAAC,MAAM,mCAAI,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;QAChE,CAAC;QAED,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE,CAAC;YACnC,eAAe,CAAC,yBAAyB,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,IAAI,CAAC;QACzE,CAAC;QAED,eAAe,CAAC,wBAAwB,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;QAEtD,IAAI,KAAK,GAAG,EAAE,CAAC;QAEf,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,KAAK,QAAQ;aAC/C,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,KAAK,QAAQ;aAC/C,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK;YACxC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 { 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":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAkDjD;;GAEG;AAMH,MAAM,OAAO,YAAY;;;;;;oBA8BR,KAAK;8BAKqB,MAAM;;IAE/C,MAAM;;QACJ,IAAI,eAAe,GAAG,EAAE,CAAC;QAEzB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,eAAe,CAAC,eAAe,CAAC,MAAA,IAAI,CAAC,OAAO,mCAAI,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC;QACrE,CAAC;aAAM,CAAC;YACN,eAAe,CAAC,cAAc,MAAA,IAAI,CAAC,MAAM,mCAAI,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;QAChE,CAAC;QAED,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE,CAAC;YACnC,eAAe,CAAC,yBAAyB,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,IAAI,CAAC;QACzE,CAAC;QAED,eAAe,CAAC,wBAAwB,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;QAEtD,IAAI,KAAK,GAAG,EAAE,CAAC;QAEf,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,KAAK,QAAQ;aAC/C,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,KAAK,GAAG;gBACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,SAAS,QAAQ;aACnD,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK;YACxC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 { 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"]}

package/dist/collection/components/upload/upload.js

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

package/dist/collection/components/validation-tooltip/validation-tooltip.js

@@ -135,13 +135,13 @@ export class ValidationTooltip {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '2adabc09b27adab332a05e06f95f778e635db7cf' }, h("slot", { key: '9737aa1f46813f88404c5a80eaf0b8e1c6b166c4' }), h("div", { key: '6be2cd8f7c24bd7c3ddc42218ca0b70d3c56dc0a', role: "tooltip", style: {
+        return (h(Host, { key: '67aacf7f22d2d165674ab78c2f590c54abe33420' }, h("slot", { key: 'e0c33f6e04e6ce11caeb8dba4318214699de0f4c' }), 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, h("slot", { key: '228c539e4447ce9a4c89ffe584f9b712ccaa1924', name: "tooltip-message" }), h("div", { key: 'cdbaf18c6c2033b9b03e33b4e5826309f504df14', id: "arrow" }))));
+            }, class: "validation-tooltip text-default" }, this.message, h("slot", { key: '8e87f49c00ea3916fd83a3b7e69b996311197dcb', name: "tooltip-message" }), h("div", { key: '1bd0d2d368cb7cb0fa113605522fff53831f2c35', id: "arrow" }))));
     }
     static get is() { return "ix-validation-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/workflow-step/workflow-step.js

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

package/dist/collection/components/workflow-steps/workflow-steps.js

@@ -69,7 +69,7 @@ export class WorkflowSteps {
         this.updateSteps();
     }
     render() {
-        return (h(Host, { key: '0df56c84cde310027e181c8fd5d8c9dd4f5c9451' }, h("div", { key: '2f82dfc3689d431ac06586f673895b9c36799847', class: { steps: true, vertical: this.vertical } }, h("slot", { key: 'c22421b7917f1d61bc2624979bee8b8804cc8aa3' }))));
+        return (h(Host, { key: 'f142d00b7e556dc24442861edded53c090d3a2bb' }, h("div", { key: 'c5681d900c92023bff93b1d102fb5002da1d7a04', class: { steps: true, vertical: this.vertical } }, h("slot", { key: '866edb3dbeba5853bb4fdf1b764ff6f689002b5e' }))));
     }
     static get is() { return "ix-workflow-steps"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/tests/date-dropdown/date-dropdown.e2e.js

@@ -17,5 +17,27 @@ regressionTest.describe('date dropdown', () => {
         await expect(dropdown).toHaveClass(/show/);
         await expect(page).toHaveScreenshot();
     });
+    regressionTest('range options', async ({ page }) => {
+        await page.goto('date-dropdown/range-options');
+        const dateDropdown = page.locator('ix-date-dropdown');
+        dateDropdown.evaluate((dateDropdown) => {
+            dateDropdown.dateRangeId = 'last-7';
+        });
+        await dateDropdown.click();
+        const dropdown = dateDropdown.locator('ix-dropdown[data-date-dropdown]');
+        await expect(dropdown).toHaveClass(/show/);
+        await expect(page).toHaveScreenshot();
+    });
+    regressionTest('range options - custom', async ({ page }) => {
+        await page.goto('date-dropdown/range-options');
+        const dateDropdown = page.locator('ix-date-dropdown');
+        dateDropdown.evaluate((dateDropdown) => {
+            dateDropdown.dateRangeId = 'custom';
+        });
+        await dateDropdown.click();
+        const dropdown = dateDropdown.locator('ix-dropdown[data-date-dropdown]');
+        await expect(dropdown).toHaveClass(/show/);
+        await expect(page).toHaveScreenshot();
+    });
 });
 //# sourceMappingURL=date-dropdown.e2e.js.map