@infineon/infineon-design-system-stencil 37.14.1--canary.1992.3e71b7856771af2263a4087bfd658e85cd1c7c03.0 → 37.14.1--canary.2005.0b8acf50350a42e6e5d4cdfbd4812c690c1c2ced.0

package/dist/components/ifx-pagination.js

@@ -1,4 +1,4 @@
-import { P as Pagination, d as defineCustomElement$1 } from './p-CSpaQFX2.js';
+import { P as Pagination, d as defineCustomElement$1 } from './p-BK6jtaez.js';
 
 const IfxPagination = Pagination;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-progress-bar.js

@@ -1,4 +1,4 @@
-import { P as ProgressBar, d as defineCustomElement$1 } from './p-D4E8VwPm.js';
+import { P as ProgressBar, d as defineCustomElement$1 } from './p-COBB2gby.js';
 
 const IfxProgressBar = ProgressBar;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-radio-button-group.js

@@ -55,7 +55,7 @@ const RadioButtonGroup = /*@__PURE__*/ proxyCustomElement(class RadioButtonGroup
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (h("div", { key: '416d11e4307ea28f72bc9440fe75698a0fa99c60', class: 'radio-button-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: '1783a24bc28ffda9e369633504b8a7f8043beccc', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '122ac8e7dea94b9804be20eb902bfcbc776ecc05', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
+        return (h("div", { key: '954a7ba0058a82a507cccb564935b43737990a73', class: 'radio-button-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: '7874bd7b2b6d34a1431a93f469f18e9c3e4d0445', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: 'f1f3075d2196c831ecd2bbccd5d61581c51e0eee', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
     }
     get el() { return this; }
     static get style() { return radioButtonGroupCss; }

package/dist/components/ifx-radio-button.js

@@ -1,4 +1,4 @@
-import { R as RadioButton, d as defineCustomElement$1 } from './p-CW1EYr_B.js';
+import { R as RadioButton, d as defineCustomElement$1 } from './p-D0FTDBJi.js';
 
 const IfxRadioButton = RadioButton;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-search-bar.js

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { d as detectFramework, t as trackComponent } from './p-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './p-Bw2fh5LT.js';
 import { d as defineCustomElement$3 } from './p-Bq-GdSe7.js';
-import { d as defineCustomElement$2 } from './p-CFMrihYb.js';
+import { d as defineCustomElement$2 } from './p-Dt9X9aqI.js';
 
 const searchBarCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper a:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}";
 
@@ -48,7 +48,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends H {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: '0e6a3ebaf25533324d81eaab8147ecd44decda64', role: "search", "aria-label": "a search field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { "aria-label": "Close button", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar_icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
+        return (h("div", { key: '09974ec9adab8f6dfa54364c8ba4665574cdebe9', role: "search", "aria-label": "a search field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { "aria-label": "Close button", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar_icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ifx-search-field.js

@@ -1,4 +1,4 @@
-import { S as SearchField, d as defineCustomElement$1 } from './p-CFMrihYb.js';
+import { S as SearchField, d as defineCustomElement$1 } from './p-Dt9X9aqI.js';
 
 const IfxSearchField = SearchField;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-segment.js

@@ -26,7 +26,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends H {
         }
     }
     render() {
-        return (h("div", { key: 'ad583bfc4687ff01f37c4855cbb1208e083e12e8', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: 'c439c8e46e5cb5307fdf7ca834a991a7130336cd', icon: this.icon }), " ", h("slot", { key: 'd604df6e5fad2fb9ef3671ac8bb0174b99c3ce5a' })));
+        return (h("div", { key: 'cd801960a7ce5e8112b0d544a0122ded889cfc1f', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: 'c81cddf4a652f00324cbc0b8a31c3598c1b62a08', icon: this.icon }), " ", h("slot", { key: '7b9786b4b20e69eaf30b5a6d140decff95e04423' })));
     }
     static get style() { return segmentCss; }
 }, [257, "ifx-segment", {

package/dist/components/ifx-segmented-control.js

@@ -72,8 +72,8 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
         this.setActiveSegment();
     }
     render() {
-        return (h("div", { key: '736ba9f070e0e476d6818b4803b870ca932273c3', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: 'c1615f5fd6b1569cef19cd627955f9e0180e6e59', class: 'group__label' }, this.label.trim()), h("div", { key: '0c9ffc3a3c1fcb515cc9d5731ea7e1d61af03cbe', class: 'group__controls' }, h("slot", { key: '6abcc914da42eb8b400aa3bde6b6d7bbd8cfe6c0' })), this.caption.trim() &&
-            h("div", { key: 'e7a38c546402e9403d9692d700fffc425a453bcc', class: 'group__caption' }, h("ifx-icon", { key: 'e64b062c4a53e402c58cadf77462fc606e737eb3', icon: 'c-info-16' }), " ", this.caption.trim())));
+        return (h("div", { key: '7c7d870d32000a823ae2d365fb8b864d800ec9fe', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: '66e95707b6616e370e35cd98e4c3b89853b8501f', class: 'group__label' }, this.label.trim()), h("div", { key: 'ab8c969a145fa9e1071ee12426a641034ff8be4d', class: 'group__controls' }, h("slot", { key: '849c4bdf76a0951d829820620813258553b8a6df' })), this.caption.trim() &&
+            h("div", { key: '905c964392ca304634aba610f96c43a4e5b95eb9', class: 'group__caption' }, h("ifx-icon", { key: '42fb13f0a7170a7b36ea2a9c8afb1d3ba9d579c9', icon: 'c-info-16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();

package/dist/components/ifx-select.js

@@ -1,4 +1,4 @@
-import { C as Choices, d as defineCustomElement$1 } from './p-Coa3oQEK.js';
+import { C as Choices, d as defineCustomElement$1 } from './p-DBHwLTn9.js';
 
 const IfxSelect = Choices;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-set-filter.js

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { d as defineCustomElement$8 } from './p-DL0DaOdR.js';
+import { d as defineCustomElement$8 } from './p-BdxNbvkX.js';
 import { d as defineCustomElement$7 } from './p-Bq-GdSe7.js';
-import { d as defineCustomElement$6 } from './p-BZbKc4N2.js';
-import { d as defineCustomElement$5 } from './p-H7UrXx90.js';
-import { d as defineCustomElement$4 } from './p-CFMrihYb.js';
-import { d as defineCustomElement$3 } from './p-Coa3oQEK.js';
-import { d as defineCustomElement$2 } from './p-B_2EeLyJ.js';
+import { d as defineCustomElement$6 } from './p-wf80ST1n.js';
+import { d as defineCustomElement$5 } from './p-B1lfea8R.js';
+import { d as defineCustomElement$4 } from './p-Dt9X9aqI.js';
+import { d as defineCustomElement$3 } from './p-DBHwLTn9.js';
+import { d as defineCustomElement$2 } from './p-jpHS2EcW.js';
 
 const setFilterCss = "";
 

package/dist/components/ifx-slider.js

@@ -150,10 +150,10 @@ const IfxSlider$1 = /*@__PURE__*/ proxyCustomElement(class IfxSlider extends H {
         this.updateValuePercent();
     }
     render() {
-        return (h("div", { key: '2157a80dcdb4231f45b02da6c59b761927c14de0', class: "ifx-slider" }, this.leftText && (h("span", { key: '3f0cb2fafafd7eb2bb40733f99e94b0b11ae7f76', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '4366f93239d8ef4eb76b0cc7d3f7430b53c5297a', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
+        return (h("div", { key: 'f50db92ae153374193063f21b595c89e71c16717', class: "ifx-slider" }, this.leftText && (h("span", { key: 'b87e007049aae171a9b21afc0f801c3ecfd3437a', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '3b10b6dbbd2bea5354f53a8b641ef231baed35b8', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
             h("input", { type: "range", min: this.min, max: this.max, step: this.step, value: this.internalValue, disabled: this.disabled, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event), "aria-label": 'a slider', "aria-value": this.value, "aria-disabled": this.disabled })
             :
-                h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, h("input", { id: 'min-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMinValue, disabled: this.disabled, ref: (el) => (this.minInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) }), h("input", { id: 'max-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMaxValue, disabled: this.disabled, ref: (el) => (this.maxInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) })), this.rightIcon && (h("ifx-icon", { key: '0e549fb22c30b7e22a8bbb948c13cb41dec5f084', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: '0329a6c3c917f6beddbfde63ba4eca875d0235b3', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '45d29e469bae4237d5962cb90b337fb53a73cff3', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
+                h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, h("input", { id: 'min-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMinValue, disabled: this.disabled, ref: (el) => (this.minInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) }), h("input", { id: 'max-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMaxValue, disabled: this.disabled, ref: (el) => (this.maxInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) })), this.rightIcon && (h("ifx-icon", { key: '5ee39c4bc8254baf12500bf6290faa875a2b611e', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: '5b0a375e14fc77aade85eb2c5f5818a636e63fdb', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '4022b50efed9fe53c17ce0e93ddffafd89ec0200', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ifx-spinner.js

@@ -1,4 +1,4 @@
-import { S as Spinner, d as defineCustomElement$1 } from './p-C7jhiUEX.js';
+import { S as Spinner, d as defineCustomElement$1 } from './p-AfeIKrPd.js';
 
 const IfxSpinner = Spinner;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-status.js

@@ -22,7 +22,7 @@ const Status = /*@__PURE__*/ proxyCustomElement(class Status extends H {
         var _a;
         const effectiveColor = ((_a = this.color) === null || _a === void 0 ? void 0 : _a.trim()) ? this.color : 'orange-500';
         const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';
-        return (h("div", { key: '5c05fea02c5edc5cdebaa0a08c21e4e12cbf4139', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: 'c546e86e37c2692f017bda9938d53436caf771c0', class: `dot ${effectiveColor}` }), h("p", { key: '98b767f5a97332da894a987c0bd203f377d72db9', class: "text" }, this.label)));
+        return (h("div", { key: 'e6a8cc7c3cbaf31a53b35af85e1f3bd2930cf01a', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: '2c3a3ff9072807640150f9ae56687aa7faba85db', class: `dot ${effectiveColor}` }), h("p", { key: '3e197c73fd1834fd4dd4e17d886d90094acea1f5', class: "text" }, this.label)));
     }
     get el() { return this; }
     static get style() { return statusCss; }

package/dist/components/ifx-step.js

@@ -49,7 +49,7 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {
         }
     }
     render() {
-        return (h("div", { key: 'b2ecec640e24f22126224764a7e4d1c7a7dac3ba', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''} 
+        return (h("div", { key: 'dd6c17bea0cd62475732ea2c577cd102f77df8ba', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''} 
                         ${this.error ? 'error' : ''}
                         ${this.stepperState.variant}
                         ${this.complete ? 'complete' : ''}
@@ -57,11 +57,11 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {
                         indicator-${this.stepperState.indicatorPosition}
                         ${this.active ? 'active' : ''}
                         ${this.clickable ? 'clickable' : ''}
-                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: '5dbbdc125c8cdcc4d6de860bbbfdb013e80e644a', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '4148afe26904aef359e8a8845b5396b4d6ba677a', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            h("div", { key: 'bc8db67f548a9fddf566eaf362603b2345a79a42', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '2863d3b3635f51c4d1e11e94ffebf69daf3d7c8c', icon: 'check16' }), this.active && h("span", { key: '980494be3dd4b3da9ef0b097ff35f2574eae9c5d', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '6a70f401d995a158aa7640a6069fd62fc3e87331', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: 'e36043a53330c6cda9be71e284e10716615b4be6', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
+                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: 'd923bfda8089c8b2199d45acaaf6ac8c9fdeec5d', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '13aac7c30b1dcd6ff7df11a4c58f4f9f156c01fc', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
+            h("div", { key: '35da868f3749271c369959b782e980dc95c3c92f', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '4813fe9d028d7e1a25e7058cce5a79a76cba76f1', icon: 'check16' }), this.active && h("span", { key: 'd0c1dbfed346671ca777606ffe5f3efe2016a170', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'd5e56742186a732d1cf95069b8a61d59b8a68073', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: '188cb1e005c83ad4abc3b05a0c8833968588628e', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
         /* Step labels */
         (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep + 1))) &&
-            h("div", { key: '26bf1d17d85b8a37cf881dfdbfdbb0d1e78c3642', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && h("slot", { key: 'd48ab802c4d9e17035cd92eaf49b0399cfa4fdbf' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '5dfc63c25d1d2039244cfb5d23b3686c95932dd6' }))));
+            h("div", { key: '4a60050301d4666815c6eb64d85d6a85459fb272', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && h("slot", { key: 'cbd47999729966cc8858b41bb54608eab8aa30c7' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'acb8a199531960f67d7c9c78238c9510118d79ab' }))));
     }
     ;
     static get watchers() { return {

package/dist/components/ifx-stepper.js

@@ -131,10 +131,10 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends H {
         this.syncIfxSteps();
     }
     render() {
-        return (h("div", { key: '6d7e72296372e4eb85bf159ff8a9cb9d586f5394', "aria-label": 'a stepper', role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` }, 
+        return (h("div", { key: 'b9409efa6bcc40d8d71c555251de93090cf26832', "aria-label": 'a stepper', role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` }, 
         /* Progress bar for compact variant. */
         (this.variant === 'compact') &&
-            h("div", { key: '8a6f584379edabb3ca08a9510a1881bd336046d6', class: 'stepper-progress' }, h("div", { key: 'be140e0af85e4a1d3e939423a8fab9b73394198e', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '7b52918d9ecc8c537201a6c42c771d5a34333fd8', class: `stepper-wrapper` }, h("slot", { key: 'c2ab16b8731e0fd0ce22c42ba36ec0e7d6822cb2' }))));
+            h("div", { key: 'f5b60e07ea7ac6069e27811077692d6de26427a1', class: 'stepper-progress' }, h("div", { key: 'ee8197961a261d53fc76a5f3ee6fdd8a3968bca9', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '5a7a371e9a65f38a203f871a917703caa2ba2a99', class: `stepper-wrapper` }, h("slot", { key: '0c572f5be961109cb14d33e0e62cfd8892ca3492' }))));
     }
     ;
     componentDidRender() {

package/dist/components/ifx-switch.js

@@ -48,17 +48,6 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends H {
         if (this.disabled)
             return;
         this.internalChecked = !this.internalChecked;
-        if (this.internalChecked) {
-            if (this.value !== undefined) {
-                this.internals.setFormValue(this.value);
-            }
-            else {
-                this.internals.setFormValue("on");
-            }
-        }
-        else {
-            this.internals.setFormValue(null);
-        }
         this.ifxChange.emit(this.internalChecked);
     }
     handleKeyDown(event) {
@@ -73,11 +62,11 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends H {
      * Callback for form association.
      * Called whenever the form is reset.
      */
-    formResetCallback() {
-        this.internals.setFormValue(null);
-    }
+    // formResetCallback() {
+    //   this.internals.setFormValue(null);
+    // }
     render() {
-        return (h("div", { key: 'c2e31c8e96286186aaafe2dc528fc2991dc2b43e', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: 'c48160af61c6b09ef9347db1c17a77d031951ba6', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: 'b0d03071ae99294732bd65279326fa00d7de829e', class: "switch__checkbox-wrapper" }, h("input", { key: 'd86670efd142c8ff83986e78b6a87694e5e38fb7', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: 'd4b5f84e660d2ee5654757409f01b136edc2f0e1', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: 'd81666c87c3017e476b7ba69fb26dc2077ab9fe9', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '229220f914d0b9ea071640ab6b9e8af99df82c23', htmlFor: "switch" }, h("slot", { key: 'f0399d3efd2b99b43c94f0ec5651f2e91617003e', onSlotchange: () => this.toggleLabelGap() })))));
+        return (h("div", { key: '305eeaf2fe5904134c21a5abe556303366b65ae6', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: 'bd115571fc983d6c79f05cc4e04956354f6f18f3', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: 'cd26894c8d3329d5b3f97460fe25e6dcb9713865', class: "switch__checkbox-wrapper" }, h("input", { key: 'e1785eb1b9d77b4d5043dbf52bd8892b5c8d33a6', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '212d207114a8c783c2019e962585c7aca3f2a6ab', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '5dc8dde1aa40fe6e889a52bc63866b1c3a753e24', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '6e61b7f75aeac9db0d497b2c8843e22ca5a0c590', htmlFor: "switch" }, h("slot", { key: '4692e1b1dab2874fc52c6d2828a1daf4962fa549', onSlotchange: () => this.toggleLabelGap() })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ifx-switch.js.map

@@ -1 +1 @@
-{"file":"ifx-switch.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,ygDAAygD;;MCY9gD,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,GAAA;;;;;;AAOU,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AACxB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAExB,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AA+G1C;AAtGC,IAAA,MAAM,SAAS,GAAA;QACb,OAAO,IAAI,CAAC,eAAe;;IAG7B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO;;IAIrC,cAAc,GAAA;AACZ,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC;AACrD,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC;AAChE,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,EAAE;AAC/B,YAAA,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;;aACzB;AACL,YAAA,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC;;;AAIrC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,YAAY,EAAE,MAAM,SAAS,CAAC;;QAE/C,IAAI,CAAC,cAAc,EAAE;;IAIvB,YAAY,CAAC,QAAiB,EAAE,QAAiB,EAAA;AAC/C,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,YAAA,IAAI,CAAC,eAAe,GAAG,QAAQ;;;IAInC,YAAY,GAAA;QACV,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe;AAE5C,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACxB,YAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;gBAC5B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;;iBAClC;AACL,gBAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC;;;aAE9B;AACL,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC;;QAGnC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;;AAG3C,IAAA,aAAa,CAAC,KAAoB,EAAA;QAChC,IAAI,IAAI,CAAC,QAAQ;YAAE;;AAEnB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,IAAI,CAAC,YAAY,EAAE;;;AAIvB;;;AAGG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC;;IAGnC,MAAM,GAAA;AACJ,QAAA,QACE,4DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,QAAQ,EACC,cAAA,EAAA,IAAI,CAAC,eAAe,GAAG,MAAM,GAAG,OAAO,EAAA,YAAA,EACzC,IAAI,CAAC,IAAI,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,EAClC,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAA,EAG/C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAA8B,2BAAA,EAAA,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAC/G,QAAQ,EAAC,GAAG,EAAA,EAEZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,IAAI,EAAC,UAAU,EAAC,MAAM,EAAA,IAAA,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,KAAK,CAAA,CAAE,EAAI,CAAA,EAC5B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,eAAe,GAAG,SAAS,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAA,CAAI,CAChG,CACD,EAGP,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,yBAAyB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAAA,EACpE,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,QAAQ,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EAAI,CAAA,CAC7C,CACJ,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n  display: inline-block;\n  user-select: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  &.gap {\n    gap: tokens.$ifxSpace200;\n  }\n}\n\n\n.switch__checkbox-container {\n  padding: tokens.$ifxSpace50;\n  display: flex;\n  align-items: center;\n  position: relative;\n  // Subtracting padding size from both height and width\n  width: (tokens.$ifxSpace500)-8px;\n  height: 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering500;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  outline: none;\n\n  &:focus {\n    outline: 4px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &.disabled {\n    cursor: default;\n    border-color: tokens.$ifxColorEngineering300;\n  }\n\n\n}\n\n\n.switch__label-wrapper {\n\n  & label { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n\n.switch__checkbox-wrapper {\n\n  .switch {\n    // position: absolute;\n    width: tokens.$ifxSpace200;\n    height: tokens.$ifxSpace200;\n    background-color: tokens.$ifxColorEngineering500;\n    border-radius: 50%;\n    transition: transform 0.3s ease, background-color 0.3s ease;\n\n    &.disabled {\n      background-color: tokens.$ifxColorEngineering300;\n      border-color: tokens.$ifxColorEngineering300;\n      cursor: default;\n    }\n  }\n\n  .switch.checked {\n    transform: translateX(16px);\n    background-color: tokens.$ifxColorBaseWhite;\n\n    &.disabled {\n      cursor: default;\n    }\n\n  }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n  background-color: tokens.$ifxColorOcean500;\n  border-color: tokens.$ifxColorOcean500;\n\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    border-color: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-switch',\n  styleUrl: 'switch.scss',\n  shadow: true,\n  // formAssociated: true\n})\nexport class Switch {\n  @Prop() checked: boolean = false;\n  @Prop() name: string = '';\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Element() el: HTMLIfxSwitchElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n  }\n  \n\n  toggleLabelGap() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const container = this.el.shadowRoot.querySelector('.container');\n    if (slot.assignedNodes().length) {\n      container.classList.add('gap')\n    } else { \n      container.classList.remove('gap')\n    }\n  }\n  \n  async componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-switch', await framework)\n    }\n    this.toggleLabelGap();\n  }\n    \n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  toggleSwitch() {\n    if (this.disabled) return;\n    this.internalChecked = !this.internalChecked;\n\n    if (this.internalChecked) {\n      if (this.value !== undefined) {\n        this.internals.setFormValue(this.value);\n      } else {\n        this.internals.setFormValue(\"on\")\n      }\n    } else {\n      this.internals.setFormValue(null)\n    }\n\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    // If the pressed key is either 'Enter' or 'Space' \n    if (event.key === 'Enter' || event.key === ' ') {\n      this.toggleSwitch();\n    }\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div\n        class=\"container\"\n        role=\"switch\"\n        aria-checked={this.internalChecked ? 'true' : 'false'}\n        aria-label={this.name}\n        onClick={() => this.toggleSwitch()}\n        onKeyDown={(event) => this.handleKeyDown(event)}\n        >\n        {/* Checkbox */}\n        <div \n          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n          tabindex=\"0\"\n        >\n          <div class=\"switch__checkbox-wrapper\">\n            <input type=\"checkbox\" hidden\n              name={this.name}\n              disabled={this.disabled}\n              checked={this.internalChecked}\n              value={`${this.value}`} />\n            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n          </div>\n        </div >\n\n        {/* Label */}\n        <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n          <label htmlFor=\"switch\">\n            <slot onSlotchange={() => this.toggleLabelGap()} />\n          </label>\n        </div>\n      </div>\n    )\n\n  }\n}\n"],"version":3}
+{"file":"ifx-switch.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n  display: inline-block;\n  user-select: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  &.gap {\n    gap: tokens.$ifxSpace200;\n  }\n}\n\n\n.switch__checkbox-container {\n  padding: tokens.$ifxSpace50;\n  display: flex;\n  align-items: center;\n  position: relative;\n  // Subtracting padding size from both height and width\n  width: (tokens.$ifxSpace500)-8px;\n  height: 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering500;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  outline: none;\n\n  &:focus {\n    outline: 4px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &.disabled {\n    cursor: default;\n    border-color: tokens.$ifxColorEngineering300;\n  }\n\n\n}\n\n\n.switch__label-wrapper {\n\n  & label { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n\n.switch__checkbox-wrapper {\n\n  .switch {\n    // position: absolute;\n    width: tokens.$ifxSpace200;\n    height: tokens.$ifxSpace200;\n    background-color: tokens.$ifxColorEngineering500;\n    border-radius: 50%;\n    transition: transform 0.3s ease, background-color 0.3s ease;\n\n    &.disabled {\n      background-color: tokens.$ifxColorEngineering300;\n      border-color: tokens.$ifxColorEngineering300;\n      cursor: default;\n    }\n  }\n\n  .switch.checked {\n    transform: translateX(16px);\n    background-color: tokens.$ifxColorBaseWhite;\n\n    &.disabled {\n      cursor: default;\n    }\n\n  }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n  background-color: tokens.$ifxColorOcean500;\n  border-color: tokens.$ifxColorOcean500;\n\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    border-color: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-switch',\n  styleUrl: 'switch.scss',\n  shadow: true,\n  // formAssociated: true\n})\nexport class Switch {\n  @Prop() checked: boolean = false;\n  @Prop() name: string = '';\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Element() el: HTMLIfxSwitchElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n  }\n  \n\n  toggleLabelGap() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const container = this.el.shadowRoot.querySelector('.container');\n    if (slot.assignedNodes().length) {\n      container.classList.add('gap')\n    } else { \n      container.classList.remove('gap')\n    }\n  }\n  \n  async componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-switch', await framework)\n    }\n    this.toggleLabelGap();\n  }\n    \n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  toggleSwitch() {\n    if (this.disabled) return;\n    this.internalChecked = !this.internalChecked;\n\n    if (this.internalChecked) {\n      if (this.value !== undefined) {\n        //this.internals.setFormValue(this.value);\n      } else {\n        //this.internals.setFormValue(\"on\")\n      }\n    } else {\n      //this.internals.setFormValue(null)\n    }\n\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    // If the pressed key is either 'Enter' or 'Space' \n    if (event.key === 'Enter' || event.key === ' ') {\n      this.toggleSwitch();\n    }\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  // formResetCallback() {\n  //   this.internals.setFormValue(null);\n  // }\n\n  render() {\n    return (\n      <div\n        class=\"container\"\n        role=\"switch\"\n        aria-checked={this.internalChecked ? 'true' : 'false'}\n        aria-label={this.name}\n        onClick={() => this.toggleSwitch()}\n        onKeyDown={(event) => this.handleKeyDown(event)}\n        >\n        {/* Checkbox */}\n        <div \n          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n          tabindex=\"0\"\n        >\n          <div class=\"switch__checkbox-wrapper\">\n            <input type=\"checkbox\" hidden\n              name={this.name}\n              disabled={this.disabled}\n              checked={this.internalChecked}\n              value={`${this.value}`} />\n            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n          </div>\n        </div >\n\n        {/* Label */}\n        <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n          <label htmlFor=\"switch\">\n            <slot onSlotchange={() => this.toggleLabelGap()} />\n          </label>\n        </div>\n      </div>\n    )\n\n  }\n}\n"],"version":3}

package/dist/components/ifx-tab.js

@@ -14,7 +14,7 @@ const IfxTab$1 = /*@__PURE__*/ proxyCustomElement(class IfxTab extends H {
         this.tabHeaderChange.emit(this.header);
     }
     render() {
-        return h("slot", { key: '3c785942607a81fc11a58d86b911b30bdab528ce' });
+        return h("slot", { key: 'c7a8823e3823036920aef997ea359efee1cd8cc8' });
     }
     get el() { return this; }
     static get style() { return tabCss; }

package/dist/components/ifx-table.js

@@ -4,14 +4,14 @@ import { d as detectFramework, t as trackComponent } from './p-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './p-Bw2fh5LT.js';
 import { c as createGrid } from './p-9UDg_bQZ.js';
 import { d as defineCustomElement$a } from './p-CSFUrFeR.js';
-import { d as defineCustomElement$9 } from './p-DL0DaOdR.js';
+import { d as defineCustomElement$9 } from './p-BdxNbvkX.js';
 import { d as defineCustomElement$8 } from './p-C0tC8p0l.js';
-import { d as defineCustomElement$7 } from './p-Bsg4XNJ8.js';
+import { d as defineCustomElement$7 } from './p-dFnoI9Z9.js';
 import { d as defineCustomElement$6 } from './p-Bq-GdSe7.js';
 import { d as defineCustomElement$5 } from './p-r7hBylnC.js';
 import { d as defineCustomElement$4 } from './p-CLgcoxeD.js';
-import { d as defineCustomElement$3 } from './p-CSpaQFX2.js';
-import { d as defineCustomElement$2 } from './p-Coa3oQEK.js';
+import { d as defineCustomElement$3 } from './p-BK6jtaez.js';
+import { d as defineCustomElement$2 } from './p-DBHwLTn9.js';
 
 class ButtonCellRenderer {
     init(params) {
@@ -530,12 +530,12 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';
-        return (h(Host, { key: 'ddc39ecc6b15beb0d862dde61df72506d8cdb778' }, h("div", { key: '92dfb30c256fa95aa2724598a5a871c89b551ca8', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '9fbf035334727b7fbb75f1a27058b69b2b40342d', class: "sidebar-btn" }, h("ifx-button", { key: '4478585415cb65ced7aaeac26a666b11bf731d08', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'f2f78deefb4e88aedd1336091e95cf7c1d2e7659', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'b8b436407246dacfdad9c2c39cfbe19d1d63af09', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '69c73b3d31d199d718ccd5b3626e494d6f327139', class: "sidebar-container" }, h("div", { key: '4cdf8135057c4f3613b9b1d84138885072973414', class: "filters-title-container" }, h("span", { key: 'f00d3bc7e055a8fd3740a2e3ff51a96a165b4591', class: "filters-title" }, "Filters")), h("div", { key: 'a00ee73a8e44a96db59eade80bb30571dc562d86', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'e34751892851931b6562253b7a2dd36ce312a252', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '933961586b3ca174b132c01eeabeaf4686396393', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'c180d8cfd86559488e2c74078d57b8c84b637f4a', name: "topbar-filter" })))), h("div", { key: '793c6da866b2db4464378410ca1ff817f22f45fb', class: "table-pagination-wrapper" }, h("div", { key: '5a091c27bdbee25f5f1aaf172ead318c0d35a089', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
+        return (h(Host, { key: '57d58d8d22bb387b9c43534dd3a401177d93f398' }, h("div", { key: '078da88d6909477b0e9d6f05e5ef43f7f11dccd6', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '3631ac354f20a7f2d8ca37a778fbbdacdaf3a7dc', class: "sidebar-btn" }, h("ifx-button", { key: 'da620be61a292844364371a9d216823a506250df', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'a691538e44adada86749955c3492a74140023973', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '6f2f19292c24e976d50e2dddbd89e10f37419505', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '202f8bccf72625c7f82d1a4fb2afebad813d3da5', class: "sidebar-container" }, h("div", { key: '6f86580fea19787e0fa79c8b63a1ff20bb4f7c5f', class: "filters-title-container" }, h("span", { key: '5df891cbef09a691e8a39444d480789cb17eb1cb', class: "filters-title" }, "Filters")), h("div", { key: '72cc704fa2c0b029657958d2e523733cb37e6c7d', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '5e81b3b2d8e54add2612b0d4263630740ef43b1f', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '2ed6b7d3d36dcb79368af9a103595350967779ac', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '80411817924fe75c67dce87f01fbfdacd7743f51', name: "topbar-filter" })))), h("div", { key: '0989b64e4cc8d5b2ac03b7dabc5bf57647b040f4', class: "table-pagination-wrapper" }, h("div", { key: '7c1b71032d9220d44f55cd83cc9b45ba0957fcf3', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
             const filter = this.currentFilters[name];
             const filterValues = filter.filterValues;
             const isMultiSelect = filter.type !== 'text';
             return filterValues.length > 0 ? (h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? "multi" : "single", readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (h("ifx-chip-item", { value: filterValue, selected: true, key: filterValue }, filterValue))))) : null;
-        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: 'bd919255bd5566f1dfe249a3cafa102a966a2e36', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: '25ebdf6cfb5cd3a3d8e6bb69c1c7bcd359b6bd60', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: '84f0e4f7f7d6aa03587490db6e9dc85c30490a03', class: "matching-results-container" }, h("span", { key: 'ff8f82475e07730e23c1364f1d6a0dc17460c702', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '49902e92b5b610dc6b257ed2ee278a8d6ff125d2', class: "matching-results-text" }, "matching results"))), h("div", { key: '5b8648bba6f8d8b072debb4a3a03880dcecd6250', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '4e1d71aa7e520b7761f72b2ecb1647bc68425195', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage }) : null)))));
+        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: 'f359cc77668bfe2659ab4e957e5f829e37a696e5', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: 'c4b80ec2a98d8a7fb898964d91c5af0e111b9336', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: 'aa467b350336adb839975dbdb1e4c74573e420f8', class: "matching-results-container" }, h("span", { key: 'cff3d87ce4d72557d085ee95f4b44392dcc11c74', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '608425fb602084d62dca782bc411b5ea499319a1', class: "matching-results-text" }, "matching results"))), h("div", { key: '715e5b6525452071148539e812c54da89cab4cf8', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '998c1175e1dacfa339c86efbec38976d7c367447', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage }) : null)))));
     }
     hasButtonCol() {
         return this.getColData().some(column => column.field === 'button');

package/dist/components/ifx-tabs.js

@@ -210,9 +210,9 @@ const IfxTabs$1 = /*@__PURE__*/ proxyCustomElement(class IfxTabs extends H {
     }
     render() {
         var _a;
-        return (h("div", { key: '38c7909405df6043c7081416261c7e1d944709c8', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '87f4fb331f271d2e0440139765b28242279c3507', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (h("div", { key: '8f3a8648448229fad10b8f318fb936a6da6377af', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: 'b4150af5a4acc16fd8900273fea4848b71662fd4', 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: '2587b74846e4447bca5ff3951a2aa4697f0ecb6b', class: "active-border" })), h("div", { key: 'c9020ce911c51c70655082c0592da3c9b6930bea', 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: '35af33210885982907746c650c9b1e94f521fa7c', class: "active-border" })), h("div", { key: '1fb4dcc61193e1806d581b3ca5190f2c7b953c0a', 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 this; }
     static get watchers() { return {

package/dist/components/ifx-tag.js

@@ -18,7 +18,7 @@ const Tag = /*@__PURE__*/ proxyCustomElement(class Tag extends H {
         }
     }
     render() {
-        return (h("div", { key: '54860515082dafc6cf6af5d5d2c7314218a4a9fa', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: 'c6423bb9430162278c60f1099830f197c90cc734', icon: this.icon })), h("a", { key: '606425f798b31c72f8d3e9b75aabbaa379d9ed46', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: '1f477544ff7f6710e960baccc83dc51a5c50ed3e', class: "label" }, h("slot", { key: 'ecdf86e97e59525a33c0b3ff106440eb60036d33' })))));
+        return (h("div", { key: 'a7cfd57c1e6f6f73d3caa1daba46d18e44cd9fbe', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: 'e74bd36b9663cdd3a2399a7d717e219dafc1b548', icon: this.icon })), h("a", { key: '7c4d5b73b7dcf6d60a744ee8f21ec9594ca82ddc', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: '7f72062a2ed212ff5c8653cfb928334cb874ae25', class: "label" }, h("slot", { key: '1e880f088a852f4a566e4adbdf5d5457d75bfa62' })))));
     }
     get el() { return this; }
     static get style() { return tagCss; }

package/dist/components/ifx-template.js

@@ -1,4 +1,4 @@
-import { T as Template, d as defineCustomElement$1 } from './p-BRAYMYpA.js';
+import { T as Template, d as defineCustomElement$1 } from './p-DVfM92xI.js';
 
 const IfxTemplate = Template;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-templates-ui.js

@@ -4,9 +4,9 @@ import { d as defineCustomElement$8 } from './p-CSFUrFeR.js';
 import { d as defineCustomElement$7 } from './p-Bq-GdSe7.js';
 import { d as defineCustomElement$6 } from './p-r7hBylnC.js';
 import { d as defineCustomElement$5 } from './p-DEGJaJSs.js';
-import { d as defineCustomElement$4 } from './p-C7jhiUEX.js';
-import { d as defineCustomElement$3 } from './p-BRAYMYpA.js';
-import { d as defineCustomElement$2 } from './p-B_2EeLyJ.js';
+import { d as defineCustomElement$4 } from './p-AfeIKrPd.js';
+import { d as defineCustomElement$3 } from './p-DVfM92xI.js';
+import { d as defineCustomElement$2 } from './p-jpHS2EcW.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}";
 
@@ -54,7 +54,7 @@ const TemplatesUI = /*@__PURE__*/ proxyCustomElement(class TemplatesUI extends H
         alertWrapper.classList.remove('show');
     }
     render() {
-        return (h("div", { key: 'c34596386a391c421389f7d0715e01de0581de2e', class: 'templates__container' }, h("div", { key: 'd36800e04daa98ba555b0e8e4f58957960d296f6', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '0909aef53ac7b933839afa61bce5916e6e1dbb6f', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '8c4928e1224963db801779c5a5557a3fef979d2d', class: "alert__wrapper" }, h("ifx-alert", { key: '4cd3381649bd441959b55796fc7908507d1019ca', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), h("h2", { key: '5e4c952723938f8d8c07e75d52da443dfd57cf42', class: "templates__title" }, "Choose your template"), h("div", { key: 'fea5647d0a300fb3b84c06a09dd12c0bd16b5630', class: "templates__wrapper" }, h("ifx-template", { key: 'b23fed97f867be22c33cf24fd5f8cb273c1c408e', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '84798da9a0339349072f0df1e882ab8aed922068', name: 'template-02', thumbnail: this.wizardTemplate }))));
+        return (h("div", { key: '8bbe0f997f5be0ba57c7ebfc925569e07bcb8647', class: 'templates__container' }, h("div", { key: '9665ad8d5a715c5805bf84d34ebe44cf8ff9bf2b', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: 'c7d6576bf8f57dcf789022fd9585b94990b49fd9', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '9ba6925d962140954d3d4bafed5852375c6c0f26', class: "alert__wrapper" }, h("ifx-alert", { key: 'fea6fdfde3f746600383aba693fe5df9213e7e6a', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), h("h2", { key: '05d896790656b9fc4ff3fb0525ad1724d81ad508', class: "templates__title" }, "Choose your template"), h("div", { key: 'cb376198a1e87f9d50a3cf880a39bbdbd6df8c6e', class: "templates__wrapper" }, h("ifx-template", { key: '276793af1c820e057e7ad54d4eeea793fde803d9', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '6bdc0169f614ad628aa85888a8b4b5b805056e19', name: 'template-02', thumbnail: this.wizardTemplate }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/ifx-text-field.js

@@ -1,4 +1,4 @@
-import { T as TextField, d as defineCustomElement$1 } from './p-B_2EeLyJ.js';
+import { T as TextField, d as defineCustomElement$1 } from './p-jpHS2EcW.js';
 
 const IfxTextField = TextField;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-textarea.js

@@ -38,21 +38,21 @@ const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends H {
     }
     formResetCallback() {
         this.resetTextarea();
-        this.internals.setFormValue("");
+        //this.internals.setFormValue("");
     }
     handleOnInput(e) {
         this.value = e.target.value;
-        this.internals.setFormValue(this.value);
+        //this.internals.setFormValue(this.value);
         this.ifxInput.emit(this.value);
     }
     resetTextarea() {
         this.value = '';
-        this.internals.setValidity({});
-        this.internals.setFormValue('');
-    }
-    componentWillLoad() {
-        this.internals.setFormValue(this.value);
+        //this.internals.setValidity({});
+        //this.internals.setFormValue('');
     }
+    // componentWillLoad() {
+    // 	this.internals.setFormValue(this.value);
+    // }
     async componentDidLoad() {
         if (!isNestedInIfxComponent(this.el)) {
             const framework = detectFramework();
@@ -61,8 +61,8 @@ const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends H {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '811b4e60cf085e0262f80976e9727b3abb5858fb', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '070ef72d0ea28b4a48881bda2a76cb861da5f76b', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.trim(), this.required && (h("span", { key: '48967a96014637c723a05df6c3413de4f93537e8', class: `required ${this.error ? 'error' : ""}` }, "*"))), h("div", { key: 'ccee61800483bdb50a2ed64c1c1421a2d559cf6f', class: 'wrapper__textarea' }, h("textarea", { key: '2ff4c4a5310c7e2e8a2ceefd6b1ca71ceb0c5b11', "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: '359c515cbc1ae3157736177548ac62cfda81c236', class: 'wrapper__caption' }, this.caption.trim()))));
+        return (h(Host, { key: 'ee0de67957ed930e680e97e81636b1a418cd07eb', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'b8bba382fb5283af07023094489905b834e608fb', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.trim(), this.required && (h("span", { key: '5aaab42f9ff1f39eda2e8128a9f13f52d5201084', class: `required ${this.error ? 'error' : ""}` }, "*"))), h("div", { key: '6f6fdf2a46aae7e2176a531035220a82b11e65e7', class: 'wrapper__textarea' }, h("textarea", { key: 'dc778e4a9fa29f19aed2322ed5842b72a256696b', "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: '3cf5e5c1f0d7a4fc9e82e4879374114bc172a756', class: 'wrapper__caption' }, this.caption.trim()))));
     }
     get el() { return this; }
     static get style() { return textareaCss; }

package/dist/components/ifx-textarea.js.map

@@ -1 +1 @@
-{"file":"ifx-textarea.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,irCAAirC;;MCYxrC,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AAPrB,IAAA,WAAA,GAAA;;;;;;AASS,QAAA,IAAA,CAAA,OAAO,GAAW,gBAAgB,EAAE,UAAU,EAAE;AAQhD,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AAKtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAM,CAAA,MAAA,GAAgD,MAAM;AAG5D,QAAA,IAAI,CAAA,IAAA,GAA4B,MAAM;AACrB,QAAA,IAAS,CAAA,SAAA,GAAW,OAAO;AAwFpD;AArFA,IAAA,MAAM,KAAK,GAAA;QACV,IAAI,CAAC,aAAa,EAAE;;IAGrB,oBAAoB,GAAA;AACnB,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC;QAC9E,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,KAAK,MAAM;QAE3D,IAAI,WAAW,EAAE;AAChB,YAAA,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC;;aACpC,IAAI,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;AAC3D,YAAA,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC;;;IAI/C,kBAAkB,GAAA;QACjB,IAAI,CAAC,oBAAoB,EAAE;;IAG5B,iBAAiB,GAAA;QAChB,IAAI,CAAC,aAAa,EAAE;AACpB,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC;;AAGhC,IAAA,aAAa,CAAC,CAAa,EAAA;QAC1B,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA8B,CAAC,KAAK;QACpD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;QACvC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG/B,aAAa,GAAA;AACZ,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE;AACf,QAAA,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;AAC9B,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC;;IAGhC,iBAAiB,GAAA;QAChB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;;AAGvC,IAAA,MAAM,gBAAgB,GAAA;QACtB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,cAAc,EAAE,MAAM,SAAS,CAAC;;;IAIjD,MAAM,GAAA;;AACL,QAAA,QACC,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,CAAA,SAAA,EAAY,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAAA,EAC/F,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EACjD,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA;YAAE,EAAA,CAAA,IAAI,EAAE,EAClB,IAAI,CAAC,QAAQ,KACb,6DAAM,KAAK,EAAE,CAAA,SAAA,EAAY,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,CAAE,CAAA,EAAU,EAAA,GAAA,CAAA,CAC9D,CACM,EAER,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC7B,CACY,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,YAAY,gBACX,IAAI,CAAC,KAAK,EACP,eAAA,EAAA,IAAI,CAAC,QAAQ,EAC5B,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,EAC1C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAA,CACpC,CACG,EAEL,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,EAAE,MACpB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAC3B,EAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CACf,CACN,CACK;;;;;;;;;;;;;;;;;;;;;;AAKV,IAAI,UAAU,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/textarea/textarea.scss?tag=ifx-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.wrapper__label {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    & .required {\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n}\n:host(.wrapper--disabled) .wrapper__label {\n    color: tokens.$ifxColorEngineering500;\n}\n\n.wrapper__textarea {\n    width: 100%;\n    &.fullWidth { \n        width: 100%;\n        & textarea { \n            width: 100%;\n            box-sizing: border-box; \n        }\n    }\n}\n\n.wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxSpace12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    \n    transition: all 100ms ease;\n    transition-property: border-color;\n\n    &:hover {\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n    \n    &:focus-within {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n}\n\n:host(.wrapper--error) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering500;\n\n    background-color: tokens.$ifxColorEngineering200;\n}\n\n.wrapper__caption {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n}\n:host(.wrapper--error) .wrapper__caption {\n    color: tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__caption {\n    color: tokens.$ifxColorEngineering500;\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop, Element } from \"@stencil/core\"\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n\t// formAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() required: boolean = false;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' | 'soft' | 'off' = 'soft';\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\n\thandleComponentWidth() {\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\n\n\t\tif (isFullWidth) {\n\t\t\ttextareaWrapper.classList.add('fullWidth')\n\t\t} else if (textareaWrapper.classList.contains('fullWidth')) {\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\n\t\t}\n\t}\n\n\tcomponentDidRender() {\n\t\tthis.handleComponentWidth()\n\t}\n\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\tthis.internals.setFormValue(\"\");\n\t}\n\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\tthis.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\tthis.internals.setValidity({});\n\t\tthis.internals.setFormValue('');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.internals.setFormValue(this.value);\n\t}\n\n\t\tasync componentDidLoad() { \n\t\tif(!isNestedInIfxComponent(this.el)) { \n\t\t\tconst framework = detectFramework();\n\t\t\ttrackComponent('ifx-textarea', await framework)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={this.inputId}>\n\t\t\t\t\t{this.label?.trim()}\n\t\t\t\t\t{this.required && (\n\t\t\t\t\t\t<span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n\t\t\t\t\t)}\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={this.value}\n\t\t\t\t\t\taria-disabled={this.disabled}\n\t\t\t\t\t\tid={this.inputId}\n\t\t\t\t\t\tstyle={{ resize: this.resize }}\n\t\t\t\t\t\tname={this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={this.cols}\n\t\t\t\t\t\trows={this.rows}\n\t\t\t\t\t\tmaxlength={this.maxlength}\n\t\t\t\t\t\twrap={this.wrap}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\treadonly={this.readOnly}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tonInput={(e) => this.handleOnInput(e)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{this.caption.trim()}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"],"version":3}
+{"file":"ifx-textarea.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/textarea/textarea.scss?tag=ifx-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.wrapper__label {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    & .required {\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n}\n:host(.wrapper--disabled) .wrapper__label {\n    color: tokens.$ifxColorEngineering500;\n}\n\n.wrapper__textarea {\n    width: 100%;\n    &.fullWidth { \n        width: 100%;\n        & textarea { \n            width: 100%;\n            box-sizing: border-box; \n        }\n    }\n}\n\n.wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxSpace12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    \n    transition: all 100ms ease;\n    transition-property: border-color;\n\n    &:hover {\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n    \n    &:focus-within {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n}\n\n:host(.wrapper--error) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering500;\n\n    background-color: tokens.$ifxColorEngineering200;\n}\n\n.wrapper__caption {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n}\n:host(.wrapper--error) .wrapper__caption {\n    color: tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__caption {\n    color: tokens.$ifxColorEngineering500;\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop, Element } from \"@stencil/core\"\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n\t// formAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() required: boolean = false;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' | 'soft' | 'off' = 'soft';\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\n\thandleComponentWidth() {\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\n\n\t\tif (isFullWidth) {\n\t\t\ttextareaWrapper.classList.add('fullWidth')\n\t\t} else if (textareaWrapper.classList.contains('fullWidth')) {\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\n\t\t}\n\t}\n\n\tcomponentDidRender() {\n\t\tthis.handleComponentWidth()\n\t}\n\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\t//this.internals.setFormValue(\"\");\n\t}\n\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\t//this.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\t//this.internals.setValidity({});\n\t\t//this.internals.setFormValue('');\n\t}\n\n\t// componentWillLoad() {\n\t// \tthis.internals.setFormValue(this.value);\n\t// }\n\n\t\tasync componentDidLoad() { \n\t\tif(!isNestedInIfxComponent(this.el)) { \n\t\t\tconst framework = detectFramework();\n\t\t\ttrackComponent('ifx-textarea', await framework)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={this.inputId}>\n\t\t\t\t\t{this.label?.trim()}\n\t\t\t\t\t{this.required && (\n\t\t\t\t\t\t<span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n\t\t\t\t\t)}\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={this.value}\n\t\t\t\t\t\taria-disabled={this.disabled}\n\t\t\t\t\t\tid={this.inputId}\n\t\t\t\t\t\tstyle={{ resize: this.resize }}\n\t\t\t\t\t\tname={this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={this.cols}\n\t\t\t\t\t\trows={this.rows}\n\t\t\t\t\t\tmaxlength={this.maxlength}\n\t\t\t\t\t\twrap={this.wrap}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\treadonly={this.readOnly}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tonInput={(e) => this.handleOnInput(e)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{this.caption.trim()}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"],"version":3}

package/dist/components/ifx-tooltip.js

@@ -160,10 +160,10 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends H {
             'tooltip-extended': true,
             'visible': this.tooltipVisible,
         };
-        return (h("div", { key: '5e5cc1fa5c9ec49849fa5f78c220a3d3afd5fa84', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'c6486b1a9b2f4147a4b359669f77bc9678c44404' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '663db61ef18dba05ecc87dc2d3404ccd5a423917', class: tooltipDismissible }, h("button", { key: '39d0d47ed02b8f49363cab4b6f366b6730888e2c', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '653a22f87da21ada807da35347caf7e8aff6878e', icon: "cross16" })), h("div", { key: '35ee339b148fb0157d6a08df1ca38314c12dd636', class: "tooltip-dismissible-content" }, this.header && h("div", { key: '42bb380bce7839a4263e82b91f7f577716087277', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'e0436f7e5a65a0354a82338c34ab62d4e3656c0a', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '4867c44982b76a53e24e3efff7838e603cb28d27', 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: 'ed9c304285de92d64444c4faf07f2f76582f2fe4', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
-            h("div", { key: '4bb8e1ca55e2ca3077615727f50c35de5a014957', class: tooltipCompact }, this.text, h("svg", { key: '382a5bcae87e6652d57ac03e1bee26ae5494ce54', 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: '33ca23e4ed5dfc332e62d8f5a34b4f39c2e388e6', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
-            h("div", { key: '4553fe35ce9a37eab707eab180dbd04247a91f91', class: tooltipExtended }, h("slot", { key: 'bd11143759af71f7e045ecf7640cef44f6b6f338', 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: '46446e956bb9f1cbcaf86f6dafdfafda1f447a41', class: "tooltip-extended-content" }, this.header && h("div", { key: '0724a40073e23f359c2759ed9854242b357c2d2c', class: "tooltip-extended-header" }, this.header), h("div", { key: 'b54da3ac4901f19dd9ae9b88d6e79ff36cd16cb2', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'e0caa4063f3d5c5f0323843b20b9b8cbf4439c66', 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: '46c01df81886f71356204957edc651a3cbc0b27d', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
+        return (h("div", { key: '079e144b7d8cf6312e5e165ec776f52e15417307', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'f5e242eabb2fa73b80c0bc182735b17bb7fa8ceb' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '288354bac7953b5a0e6c3d464c96cd3ee7994386', class: tooltipDismissible }, h("button", { key: 'dc13ab57c1fdbcd11ac7f8754902e5f864c3004d', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '783cfe7a879c05e69e3473661b36d17e2c565935', icon: "cross16" })), h("div", { key: '1642b238ba748d58ab44d63d71d757fab656bd8b', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'b4c26f058431a5955cbd386c3426fe34f3de0a7f', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '79c24e30da4957adc55a2a7ac32989e9425d35ce', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '9ae17ee987acc122ed58d49106bf98b26945c30d', 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: '4afd9b10d830241784a1d5f83c776dda35fe705b', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
+            h("div", { key: '051255636a8ae3afefbec6ebfd55fb678fe13309', class: tooltipCompact }, this.text, h("svg", { key: '03c160fd88050c1d020e421277dbeb2a695e2e67', 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: '08116653175441e46944a40b2ac4e5fcac2eaab4', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
+            h("div", { key: 'f90f9969f922c74ce1ee47ed514a69c9174a771e', class: tooltipExtended }, h("slot", { key: '54f4f4e0891b8bdb69ec92c824faa0f9b72adcb1', 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: '68dae1e20d9b332b9172834d661d2c284bcf7e19', class: "tooltip-extended-content" }, this.header && h("div", { key: '1d3d19a91d848673cad09e6ed69b6a020a7d7971', class: "tooltip-extended-header" }, this.header), h("div", { key: '1b2ddfc31755b92a7222e24db4d1ba09922f0799', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'c03ab4f480dc50c2b53b99796e6eb570348f0eb8', 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: '1f54bbdd47b72111f8f563ca394f20330ea29544', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
     }
     get el() { return this; }
     static get watchers() { return {