@infineon/infineon-design-system-stencil 32.4.0--canary.1747.df525c53ce5926a0a4f401c77dfc4c9426f11772.0 → 32.4.0--canary.1745.3f2afbb2e7f8c07bd24343750581aca875f0c1d3.0

package/dist/esm/ifx-tabs.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5ee763b8.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-b4eaf00e.js';
 
 const tabsCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex}.tabs{display:flex;font-family:var(--ifx-font-family);width:100%}.tabs.horizontal{flex-direction:column}.tabs.vertical{flex-direction:row}.tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list:focus-within .active-border{display:none}.active-border{content:\"\";position:absolute;transition:left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0A8276}.tabs.vertical .tabs-list{flex-direction:column;border-bottom:none}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px}.tabs:not(.vertical) .tab-item.full-width{flex:1}.tab-item{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;cursor:pointer;position:relative}.tab-item.icon__right{flex-direction:row-reverse;justify-content:flex-end}.tab-item:hover{color:#0A8276}.tab-item:active,.tab-item.active{color:#0A8276}.tab-item:focus,.tab-item.focus{outline:none;border-radius:1px;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item.disabled{color:#BFBBBB;pointer-events:none}.tabs.vertical .tab-item{border-right:2px solid transparent;min-width:7em}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0A8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}";
 const IfxTabsStyle0 = tabsCss;
@@ -197,9 +197,9 @@ const IfxTabs = class {
     }
     render() {
         var _a;
-        return (h("div", { key: 'f2663abe44d99b51791ae20c24fd6d8255bf80b5', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '0b949be9e67da9496346bf619af9c322236c8fd3', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (h("div", { key: 'a63cc0fbd0ced13fbb445f4d6288ae92f4ee4442', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: 'f3e97288122fdc14114326a99c705cd33d43dfe5', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
             _a.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, (tab === null || tab === void 0 ? void 0 : tab.icon) ? h("ifx-icon", { icon: tab.icon }) : '', tab === null || tab === void 0 ? void 0 :
-                tab.header))), h("div", { key: '2caa33a941a3aaa5b6a9d2e6f748f7880f1037cf', class: "active-border" })), h("div", { key: '9dc32106ee0e5dda07ed4e33c829a67772463c9d', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
+                tab.header))), h("div", { key: '9d7a76b0b34a1c6c07380511b459dab211435ba5', class: "active-border" })), h("div", { key: '02b94f297069608a6bfa0e5b62624101744181a4', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ifx-tag.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-5ee763b8.js';
+import { r as registerInstance, h } from './index-b4eaf00e.js';
 
 const tagCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.container{display:inline-flex;align-items:center;padding:4px 16px;border:1px solid #BFBBBB;border-radius:9999px;background-color:#FFFFFF;gap:8px;font-family:var(--ifx-font-family)}.container:hover{cursor:pointer;border-color:#8D8786}.container:active,.container.active{border-color:#1D1D1D}.container:focus:not(:active,.active){outline:none;border-color:#1D1D1D}.container .label-wrapper{text-decoration:none}.container .label-wrapper .label{margin:0;font-weight:400;font-size:1rem;line-height:20px;color:#1D1D1D}";
 const IfxTagStyle0 = tagCss;
@@ -8,7 +8,7 @@ const Tag = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '77c20a8047f83ad313438cefde30e0bc5b6551ef', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: 'd13d992176898e60faf045c1ebec0967e44d0825', icon: this.icon })), h("a", { key: '2507414c6bb49499c9f9c0361575b6df1fbb55f6', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: '946daf5532025ce4da084044bb14e1cbd7032ad0', class: "label" }, h("slot", { key: 'fe49bdfd098c349cfdcbfa414717a34dc28ef617' })))));
+        return (h("div", { key: '209fdb856f30f922cb4253afb4ef4d7b70f6149f', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: 'fa7d3dbb497aba70804c37ef9f09219677e5cbd1', icon: this.icon })), h("a", { key: 'ebed1ae83eba47bb254e6fa7f85d49c717e34b98', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: 'ea857f77b32f30833ee3899ee4147f910e9cf5ad', class: "label" }, h("slot", { key: 'fa2c754f7ae1d078529ae9cfae7f3ed3ec623573' })))));
     }
 };
 Tag.style = IfxTagStyle0;

package/dist/esm/ifx-templates-ui.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as getAssetPath, h, g as getElement } from './index-5ee763b8.js';
+import { r as registerInstance, d as getAssetPath, h, g as getElement } from './index-b4eaf00e.js';
 
 const templatesUiCss = "*{padding:0;margin:0}.templates__container{display:flex;flex-direction:column;align-items:center}.templates__container .back__btn-wrapper{display:none}.templates__container .back__btn-wrapper.show{display:flex;justify-content:space-between;width:100%}.templates__container .back__btn-wrapper .alert__wrapper{display:none}.templates__container .back__btn-wrapper .alert__wrapper.show{display:block}.templates__container .templates__wrapper{display:flex;padding:20px 0px;gap:20px;flex-wrap:wrap}.templates__container .templates__title.hide{display:none}";
 const IfxTemplatesUiStyle0 = templatesUiCss;
@@ -45,7 +45,7 @@ const TemplatesUI = class {
         alertWrapper.classList.remove('show');
     }
     render() {
-        return (h("div", { key: 'bf4c5ead310d88f7fe5c9bc213e40267bf429cb8', class: 'templates__container' }, h("div", { key: 'e248745b8db68d2b1512202fa134d042edeb010e', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: 'f10c5d5b37071427b674f11a4debd5a80df1af5e', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: 'e5960d85b1e46f37580a3b62547164d0356cf575', class: "alert__wrapper" }, h("ifx-alert", { key: 'ea1ce75c12f68e79f688e5bca76f40cf25fd72f9', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), h("h2", { key: '8bbfa839ab5da993bc89ff3371e8bc64460f1c68', class: "templates__title" }, "Choose your template"), h("div", { key: '9f30ea639383bde71678215f0b80ee7111c4c5b1', class: "templates__wrapper" }, h("ifx-template", { key: '06d4725d8707904e4af6c4e302fbd00900cb0d9b', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '755c2d29318c854be38e364d6c971b9931da19c6', name: 'template-02', thumbnail: this.wizardTemplate }))));
+        return (h("div", { key: '7f313f223e75698fb23569c5f1b638e2be7ed628', class: 'templates__container' }, h("div", { key: '60687101dda3ccc1074377f4ebb15ce17d00cdae', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '6709aa534550a3df90a5ebd7709e7c339268372d', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '0046b65d5ec12ca8541dd335fc08547738658017', class: "alert__wrapper" }, h("ifx-alert", { key: '9abff4236fc894cfd62ceaff8c31ede82cf619fd', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), h("h2", { key: '92dae5ac00d3b350681cd38c1d1ae2b537fc2210', class: "templates__title" }, "Choose your template"), h("div", { key: '8742b6c129cbc0bcd4ce267d7b05520c0eddfda7', class: "templates__wrapper" }, h("ifx-template", { key: 'acdac4204ab3916114534e7941d2477257d03912', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: 'a7e72c71310b5d8207ca1bf9ea27168215b0d5f9', name: 'template-02', thumbnail: this.wizardTemplate }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }

package/dist/esm/ifx-textarea.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-5ee763b8.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-b4eaf00e.js';
 
 const textareaCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:flex;flex-direction:column;width:100%}.wrapper__label{color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\"}:host(.wrapper--disabled) .wrapper__label{color:#575352}.wrapper__textarea{width:100%}.wrapper__textarea.fullWidth{width:100%}.wrapper__textarea.fullWidth textarea{width:100%;box-sizing:border-box}.wrapper__textarea textarea{border:1px solid #8D8786;border-radius:1px;padding:8px 16px;background-color:#FFFFFF;color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\";transition:all 100ms ease;transition-property:border-color}.wrapper__textarea textarea:hover{border:1px solid #575352}.wrapper__textarea textarea:focus-within{outline:none;border:1px solid #0A8276}:host(.wrapper--error) .wrapper__textarea textarea{border:1px solid #CD002F}:host(.wrapper--disabled) .wrapper__textarea textarea{border:1px solid #575352;background-color:#EEEDED}.wrapper__caption{color:#1D1D1D;font:400 0.75rem/1rem \"Source Sans 3\"}:host(.wrapper--error) .wrapper__caption{color:#CD002F}:host(.wrapper--disabled) .wrapper__caption{color:#575352}";
 const IfxTextareaStyle0 = textareaCss;
@@ -57,7 +57,7 @@ const TextArea = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '146538196346541c8b375878f2f2160375acd65a', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '04ef3fae2b80fff2a201cc9525794fa9eaaf3e24', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: '385249e168003aa04ad324959849f48efecfbab5', class: 'wrapper__textarea' }, h("textarea", { key: 'f4a39d7c68dae8ea6dde67c1d11a7d5c94d41487', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'b6d6d4127b5db04d80031fda02a4a34ccc61c439', class: 'wrapper__caption' }, this.caption.trim()))));
+        return (h(Host, { key: '0f5bf5d56ed26002f15ecc9582ee5a23b9f7c4c6', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '560e1678ddd02cb1bf0229ffa17a61ffa0c039b3', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: '4e66c7c6a52428ef33dee14d4346ce9f9076e3c7', class: 'wrapper__textarea' }, h("textarea", { key: '9346dad809f595081723e77d18fd0b26c1653267', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '8946de96db794c98a5e004da191e8ca38921d403', class: 'wrapper__caption' }, this.caption.trim()))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/ifx-tooltip.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-5ee763b8.js';
+import { r as registerInstance, h, g as getElement } from './index-b4eaf00e.js';
 import { c as createPopper } from './popper-1604923e.js';
 
 const tooltipCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:absolute;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF;width:max-content;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:start}.tooltip-dismissible .close-button{all:unset;cursor:pointer;position:relative;order:2;margin-top:12px;margin-right:12px;line-height:0px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}.tooltip-compact{min-width:28px !important;max-width:145px !important}.tooltip-dismissible{min-width:145px !important;max-width:310px !important}.tooltip-extended{min-width:145px !important;max-width:310px !important}";
@@ -152,10 +152,10 @@ const Tooltip = class {
             'tooltip-extended': true,
             'visible': this.tooltipVisible,
         };
-        return (h("div", { key: '506af35d3cc603e10da9e7e876b0cbb8f178848f', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'b9e4ba99abe1e3a8f6b565bdc7e0d474aea87978' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: 'c456b23ba375682d6034372ac7b6bf4f7859c043', class: tooltipDismissible }, h("button", { key: '65a84189cbdad93b6089e272f9e13338eb0108b4', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '3955b9bfb5df89fc6c66d711fa4656150611a7f1', icon: "cross16" })), h("div", { key: '03258c50dbb13154e924243871ffbccb6928dc38', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'ba48e4e73733a42793612ebbca4b06c84d3956c7', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '46bdcbb01fb37b5891d3aa0c488a6c92e07541d2', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '7aa9ebdb6c80cd5bab576416049f6c3b81973502', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7556ea74cff95938870d45dc451034d7446cc229', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
-            h("div", { key: '1352f2d81b04fb79aa5bb4c280839a819264f00c', class: tooltipCompact }, this.text, h("svg", { key: '386e78fbd87ddd0b69a5689bc6fee904a4600326', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '84b1f1ff3fd5087f4a324846d0709aebb8f26a94', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
-            h("div", { key: 'ede68a870e45f4f643d7eac689e88a9d20d1d758', class: tooltipExtended }, h("slot", { key: '1243ab83fc3c6290e7f27c0246d5e1e71e1c4264', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
-                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '58c82f5021968d4a92c2009d0ba6f4049b50681f', class: "tooltip-extended-content" }, this.header && h("div", { key: '455b7a234ae4516b452a0b95c318a18ef8f7f3ec', class: "tooltip-extended-header" }, this.header), h("div", { key: '8fb07ece39017c45e43becf4754055356fb506fb', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '1b72fb690cdcfd11c33df69539b54daf0944c607', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f2f6f5b41a8bb22821a89f9cdb62873c5323f1a9', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
+        return (h("div", { key: '795261177635c90ede6d1995541ce8268f2e5262', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: '29726682709195c97888e62b36d43f6244d22a2c' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '54c229be4a0171c4b9e186f7628fce4ab3aeb5b9', class: tooltipDismissible }, h("button", { key: '374d309c74630b3f3e9f80294c0f363562ce65a9', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '02efd77155cc94b6ecb367fcb375cbf600e234b0', icon: "cross16" })), h("div", { key: '3b96437efad72d370939ed08d70b84d404380874', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'fe62bcecd51d532b08568099bf96946b4eb9f611', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '36579a2f1d9dd9c7c90c3dca8315e29dc5211437', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '0044d3c563e9626f499b1907952e1815f27ca703', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd21890a5123322e1a7624490911b2a1004d64b8f', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
+            h("div", { key: 'efee60a0cfe549c815acdd34cbfd06f181531c1c', class: tooltipCompact }, this.text, h("svg", { key: '0d992bbf5a4afc6f81769a00b8fcfff07eea54e1', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f029785003cf5b9ab72c9c97fa9288d27e6b1ac6', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
+            h("div", { key: '095a979593f3ea948f92a191b316955d65e79871', class: tooltipExtended }, h("slot", { key: '8cd096bf58bf84f36eade7821029847553e52ab5', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
+                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '6839331b2b82599e8fffef8e1faab2c071f7eb3d', class: "tooltip-extended-content" }, this.header && h("div", { key: 'ab6e181488ed0f2b382b867d789a0a8824d306f1', class: "tooltip-extended-header" }, this.header), h("div", { key: '74c3fcb2d270f4d20d383434990667aa09f35894', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '94616a0710484992a1289501d3d744ce6dc89020', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a261fb73ff98c22d389575ec8dd991aebbaaba90', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {