npm - @infineon/infineon-design-system-stencil - Versions diffs - 33.2.1--canary.1723.b0e0253c13cf7166d5e9a69d5006845c2776873e.0 → 33.2.1--canary.1847.aa1c8b6d72cee964aa4a26dfd807f16b2dadc7df.0 - Mend

@infineon/infineon-design-system-stencil 33.2.1--canary.1723.b0e0253c13cf7166d5e9a69d5006845c2776873e.0 → 33.2.1--canary.1847.aa1c8b6d72cee964aa4a26dfd807f16b2dadc7df.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (215) hide show

package/dist/cjs/ifx-filter-search.cjs.entry.js CHANGED Viewed

@@ -33,7 +33,7 @@ const FilterSearch = class {
         this.ifxFilterSearchChange.emit({ filterName: this.filterName, filterValue: this.filterValue, filterKey: this.filterKey }); // Emitting filterKey along with other properties
     }
     render() {
-        return (index.h("div", { key: '53a34910aec55e31b40d2d2868481fea46dec401', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, index.h("div", { key: 'eb4451b33cf8815237b0543d22f0cabcc2129070', class: "filter-name" }, this.filterName), index.h("ifx-search-field", { key: '6240cf45bc67f23d9899ee67914974104801f632', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
+        return (index.h("div", { key: '3a3909fafa10d861c7ff3b1345220a99c8094fc2', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, index.h("div", { key: 'f04e9957e504129746969a67d46abf21c5bb468c', class: "filter-name" }, this.filterName), index.h("ifx-search-field", { key: '4ca35fad09d00bd2d0b7a92111f2abb1182984b3', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-filter-type-group.cjs.entry.js CHANGED Viewed

@@ -129,7 +129,7 @@ const IfxFilterTypeGroup = class {
         window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);
     }
     render() {
-        return (index.h(index.Host, { key: 'b3c13d48da96a74d05ba0af9f592fc4f4bf688fc' }, index.h("div", { key: 'd0bea155f2d083279710607bde2957fa7f2bdd41', class: "filter-type-group" }, index.h("slot", { key: '71c60c9cdc705fb1d845b93d9871f3257090b88f', name: "filter-search" }), index.h("slot", { key: 'd3ecbbd9e98a227cd2d6902e28ce13c1511bd451', name: "filter-accordion" }))));
+        return (index.h(index.Host, { key: 'f9e20ecec05c106cc7c46daf6aafdf99b46e2615' }, index.h("div", { key: '6b7e9c8efa1adb5b363c307395daa4d3dc6008a1', class: "filter-type-group" }, index.h("slot", { key: '898eaee110d211bd6d11b4004a865e53a75ebfc0', name: "filter-search" }), index.h("slot", { key: 'a4cd279b6717aea1d774a0500108f756b70644d3', name: "filter-accordion" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-list-entry.cjs.entry.js CHANGED Viewed

@@ -25,7 +25,7 @@ const ListEntry = class {
         this.ifxListEntryChange.emit({ label: this.label, value: this.value, type: this.type });
     }
     render() {
-        return (index.h("div", { key: 'e7beb5ddc5e3493eac6f47d2eaf066a6f8a09add', class: "wrapper" }, this.type === 'checkbox' ? (index.h("div", { class: "list-entry" }, index.h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (index.h("div", { class: "list-entry" }, index.h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
+        return (index.h("div", { key: 'ad65384bebf5cd37c59af70dd26071c371814d9c', class: "wrapper" }, this.type === 'checkbox' ? (index.h("div", { class: "list-entry" }, index.h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (index.h("div", { class: "list-entry" }, index.h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-progress-bar.cjs.entry.js CHANGED Viewed

@@ -22,7 +22,7 @@ const ProgressBar = class {
         this.internalValue = this.value;
     }
     render() {
-        return (index.h("div", { key: 'e1978cda672a5b004cd0520c099041172ec5e819', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, index.h("div", { key: '2e9094099e63479b88f5b832ec55f5eb51ab0d13', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && index.h("span", { key: 'd7f1ecd1109f03379ffa36626e27f50f9ef7ca72', class: "label" }, `${this.internalValue}%`))));
+        return (index.h("div", { key: '0a056197a5a987fabf6fe5ded84b00645e763570', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, index.h("div", { key: 'b652cb9f595beba037f08bf623be2a4421d4db3d', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && index.h("span", { key: '7c7ec56c39119ad47a9ce6dcf20f87790f1b342c', class: "label" }, `${this.internalValue}%`))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

package/dist/cjs/ifx-radio-button-group.cjs.entry.js CHANGED Viewed

@@ -49,7 +49,7 @@ const RadioButtonGroup = class {
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (index.h("div", { key: '81ad6c9e3c9383011b89b8c5cbc0199a82731ede', class: 'radio-button-group-container' }, this.showGroupLabel ? index.h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', index.h("div", { key: '7cff1f5f620a3d8a8b9942fa036e7da781365332', class: `radio-button-group ${this.alignment} ${this.size}` }, index.h("slot", { key: '379cb323140188aa43ad1677d05e81a6b6335b03', onSlotchange: this.handleSlotChange })), this.showCaption ? (index.h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? index.h("div", { class: 'caption-icon' }, index.h("ifx-icon", { icon: "c-info-16" })) : '', index.h("div", { class: 'caption-text' }, this.captionText))) : ''));
+        return (index.h("div", { key: 'db47c6f68f4fc71019cdb241b2cec97868253a9a', class: 'radio-button-group-container' }, this.showGroupLabel ? index.h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', index.h("div", { key: 'faabddc94a68916f090cee61eaaee086f141a334', class: `radio-button-group ${this.alignment} ${this.size}` }, index.h("slot", { key: '5139a0aec69f151e302ae57564bebcee202ef08d', onSlotchange: this.handleSlotChange })), this.showCaption ? (index.h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? index.h("div", { class: 'caption-icon' }, index.h("ifx-icon", { icon: "c-info-16" })) : '', index.h("div", { class: 'caption-text' }, this.captionText))) : ''));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ifx-radio-button.cjs.entry.js CHANGED Viewed

@@ -98,10 +98,10 @@ const RadioButton = class {
         }
     }
     render() {
-        return (index.h("div", { key: '8b8ef83f01253deda3870317ac1899ea1e6d7bca', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, index.h("div", { key: '7668fa54b0682d512ef1af676dac8aee5575f8e8', class: `radioButton__wrapper
+        return (index.h("div", { key: '0517c170a72f27da3bce7aa8dcedc792d6cc4bb1', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, index.h("div", { key: '57c9b9ac3d09c63868976fd9c2eef12d68fbf0f1', class: `radioButton__wrapper
             ${this.internalChecked ? 'checked' : ''}
             ${this.disabled ? 'disabled' : ''}
-            ${this.error ? 'error' : ''}` }, this.internalChecked && index.h("div", { key: '5bd3bd3000434c1f0811534d0239b4b119e73f34', class: "radioButton__wrapper-mark" })), this.hasSlot && (index.h("div", { key: 'a4a533b20998726877f131d75f8477e41f7205e1', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, index.h("slot", { key: '5e097bb9d5048fd13d1a8a790ec3e0af666a24b4' }))), index.h("input", { key: '52c6fb892db708d17a460df3c31ea998d2528895', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
+            ${this.error ? 'error' : ''}` }, this.internalChecked && index.h("div", { key: '298eb53745b74e9477fd4d7109af6059d7a9adb1', class: "radioButton__wrapper-mark" })), this.hasSlot && (index.h("div", { key: 'a635e823d337682073a00b2160adf94b7d3362ac', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, index.h("slot", { key: '1a302c9962dffa61bbce7a26ea7be1067c844b4f' }))), index.h("input", { key: '0d0e61739b0d63ce2ce07c29db9b7801c0afb2b6', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ifx-search-bar.cjs.entry.js CHANGED Viewed

@@ -41,7 +41,7 @@ const SearchBar = class {
         this.value = event.detail;
     }
     render() {
-        return (index.h("div", { key: 'c902f46ef9efab55d05e5f0c5bf24204e364f9f7', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (index.h("div", { class: "search-bar-wrapper" }, index.h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, index.h("ifx-icon", { icon: "search-16", slot: "search-icon" })), index.h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (index.h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, index.h("ifx-icon", { icon: "search-16" })))));
+        return (index.h("div", { key: '9995b9399f48a87b668b43aa4dbec29a752aaf9f', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (index.h("div", { class: "search-bar-wrapper" }, index.h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, index.h("ifx-icon", { icon: "search-16", slot: "search-icon" })), index.h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (index.h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, index.h("ifx-icon", { icon: "search-16" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-search-field.cjs.entry.js CHANGED Viewed

@@ -56,7 +56,7 @@ const SearchField = class {
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (index.h("div", { key: '69bfbbbb91d0d918c9d62f1023babc630325882e', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, index.h("div", { key: '0bd284139b40d1c6b2288c74fb4f65235e470ab1', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, index.h("ifx-icon", { key: 'a472e315073ad3d92fd55a5689f84e31bb57271c', icon: "search-16", class: "search-icon" }), index.h("input", { key: '0e4d8258fe7058ee1ad9b12605ccd7ba14f23ce2', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (index.h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
+        return (index.h("div", { key: 'e4c4bb53ff7d3f464de62991fd54c52d50eb5bd6', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, index.h("div", { key: '48db3ec88d4f79505a5ed413e3b7d3030f3950f6', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, index.h("ifx-icon", { key: '6aecdb48902395fc8cd80cd24cacefa3014bc470', icon: "search-16", class: "search-icon" }), index.h("input", { key: '5e6620ec20ad3f2ae223067ff9ea4fac935eda90', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (index.h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
     }
     getSizeClass() {
         return `${this.size}` === "s"

package/dist/cjs/ifx-segment.cjs.entry.js CHANGED Viewed

@@ -28,7 +28,7 @@ const Segment = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'a2a4f876b6df7d82483690ab39a8eb2957f86b98', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, index.h("ifx-icon", { key: 'ebb49e6c61e102ef1b215c7210108af449a4533f', icon: this.icon }), " ", index.h("slot", { key: 'cbbb7945b5cfe90543b0ed3ddbe64f1799f1483c' })));
+        return (index.h("div", { key: '242103eeefd5c176ebb090767290c3b209c896f7', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, index.h("ifx-icon", { key: '7a7a84efd91e773e132d137e96107465ad5cbe8b', icon: this.icon }), " ", index.h("slot", { key: 'a3aff1230d6b0f3edf4c90b6748f4c515c3c04a0' })));
     }
 };
 Segment.style = IfxSegmentStyle0;

package/dist/cjs/ifx-segmented-control.cjs.entry.js CHANGED Viewed

@@ -72,8 +72,8 @@ const SegmentedControl = class {
         this.setActiveSegment();
     }
     render() {
-        return (index.h("div", { key: '440acc93eac2fe00fb0de05708e74361b47889e3', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, index.h("div", { key: '0fbbe733af666f4da2684f7146cace877d43be18', class: 'group__label' }, this.label.trim()), index.h("div", { key: 'f4ddddb0f4870b5de51133e1d4f44b52aac091b6', class: 'group__controls' }, index.h("slot", { key: 'c89b3beba004ae66725b3fe82c588a9af2c1b645' })), this.caption.trim() &&
-            index.h("div", { key: '25e23614a9f8c980c7a96a6dff27ca9836b552ab', class: 'group__caption' }, index.h("ifx-icon", { key: '09766369503ef8aac9ea018b5eb3e547932b6121', icon: 'cinfo16' }), " ", this.caption.trim())));
+        return (index.h("div", { key: 'dab5856773fc59c5b96e96b4e63de8bd09b311e8', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, index.h("div", { key: 'ec4d89bbb8838f2bbf37d6ffeb974bb31e4bb977', class: 'group__label' }, this.label.trim()), index.h("div", { key: 'db10682b8d86a451a922f00e72f1cad6b0e0f2c6', class: 'group__controls' }, index.h("slot", { key: 'c4a9ef1b511c4b1e495af61d8096e6bf7a153c2b' })), this.caption.trim() &&
+            index.h("div", { key: '8c4158f78ad3c54ae453b7524a82121a06637087', class: 'group__caption' }, index.h("ifx-icon", { key: '41d0dbfdadf7aaec93ff80be95e91cb496b2aa55', icon: 'cinfo16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();

package/dist/cjs/ifx-select.cjs.entry.js CHANGED Viewed

@@ -7058,9 +7058,9 @@ const Choices = class {
         // destroy choices element to restore previous dom structure
         // so vdom can replace the element correctly
         this.destroy();
-        return (index.h("div", { key: 'a5ff225792f66dc57e40595a163e465739d85ee2', class: `ifx-select-container` }, this.label ? (index.h("div", { class: "ifx-label-wrapper" }, index.h("span", null, this.label))) : null, index.h("div", { key: 'fbd9661dbd4c6298b6107722ce0c630c35292c05', class: `${choicesWrapperClass}
+        return (index.h("div", { key: 'bff7fa929e66d1ec543c3af117e4bfc13346b252', class: `ifx-select-container` }, this.label ? (index.h("div", { class: "ifx-label-wrapper" }, index.h("span", null, this.label))) : null, index.h("div", { key: '1def54c7b443ffffc356d30f3a0aa0bb2608328e', class: `${choicesWrapperClass}
             ${this.disabled ? 'disabled' : ''}
-            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : (e) => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, index.h("select", Object.assign({ key: '7cf5a5c7deaa170d9a5a761901e9c5328d376285', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), index.h("div", { key: 'fce1dfb5de7596657ad10c0e830ed6c058f409f3', class: 'single__select-icon-container' }, this.optionIsSelected && (index.h("div", { key: 'd9f5613d5366fb1db8935e41b9b78baf919e1c87', class: `ifx-choices__icon-wrapper-delete ${!this.showClearButton ? 'hide' : ''}` }, index.h("ifx-icon", { key: '87ad84ac1670bd59f85c20700aab1a81c5ef4532', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), index.h("div", { key: 'd5f0ac486df576de6a0f22b60c56a1db689174d5', class: "ifx-choices__icon-wrapper-up" }, index.h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), index.h("div", { key: '0e62a39fab954be07046e9cbb7f8c5bc304fb35e', class: "ifx-choices__icon-wrapper-down" }, index.h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (index.h("div", { class: "ifx-error-message-wrapper" }, index.h("span", null, this.errorMessage))) : null));
+            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : (e) => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, index.h("select", Object.assign({ key: 'c12bc6327ffbb57a1330db8c2434e3bad24bedbd', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), index.h("div", { key: '9141b37e7a576fc7f77c222b8736dfcd8a970bab', class: 'single__select-icon-container' }, this.optionIsSelected && (index.h("div", { key: '893f8deb63389d6a7049f74d14241af9d0c075b1', class: `ifx-choices__icon-wrapper-delete ${!this.showClearButton ? 'hide' : ''}` }, index.h("ifx-icon", { key: '3e79e2491df7fad3ae00b98fb902973e6520d650', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), index.h("div", { key: 'c64f9e7810ea2b638e131a8271dfca980edbe0c5', class: "ifx-choices__icon-wrapper-up" }, index.h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), index.h("div", { key: '13e02cd81cabd42991124bf091a0ac208cafba29', class: "ifx-choices__icon-wrapper-down" }, index.h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (index.h("div", { class: "ifx-error-message-wrapper" }, index.h("span", null, this.errorMessage))) : null));
     }
     toggleDropdown() {
         const div = this.root.querySelector('.ifx-choices__wrapper');

package/dist/cjs/ifx-slider.cjs.entry.js CHANGED Viewed

@@ -146,10 +146,10 @@ const IfxSlider = class {
         this.updateValuePercent();
     }
     render() {
-        return (index.h("div", { key: '6d8a7acac67dff6fa16e5857d5d87ac1a230e708', class: "ifx-slider" }, this.leftText && (index.h("span", { key: '8fa50d852e012089fd2b918b093e87bf3c2f2c3a', class: `left-text` }, this.leftText)), this.leftIcon && (index.h("ifx-icon", { key: 'd84ba5ac7f08dd8dddca0c24143ba97bcfda374e', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
+        return (index.h("div", { key: 'a47f129ac76a02e539b02ce53ce3531e4924318b', class: "ifx-slider" }, this.leftText && (index.h("span", { key: 'f854c9c5553c8a8e62b6448828356a25cbafaa84', class: `left-text` }, this.leftText)), this.leftIcon && (index.h("ifx-icon", { key: '718b4b1a6978202e56d3380fcb88ba3174644766', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
             index.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 })
             :
-                index.h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, index.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) }), index.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 && (index.h("ifx-icon", { key: '02911017ea076f62e13a55b98e8a723f40c9c75b', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (index.h("span", { key: 'e984e2322ff0fe2f8d2a2404a8e342c393a822e7', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (index.h("span", { key: 'eb473d4ddcf6d10a3e01c474ffc76b916b0163e3', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
+                index.h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, index.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) }), index.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 && (index.h("ifx-icon", { key: '821de1c6f6e7e4c34a5bf279c49988521fabd847', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (index.h("span", { key: 'de7cd4fafdccd8bbf82886855f2b446a74139c6f', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (index.h("span", { key: 'a9a31d31982344e39ed22722d0ec57d24b4968b3', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-spinner_2.cjs.entry.js CHANGED Viewed

@@ -14,8 +14,8 @@ const Spinner = class {
         this.inverted = false;
     }
     render() {
-        return (index.h("div", { key: '652c6fe6e0a08e3cf7238af351918a0c47fed005', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, index.h("div", { key: '03c1c7e9f20a988d3be881acf2e4e392e699fab2', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && index.h("div", { key: '84486975487322399e1558b7184827e958f68f36', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, index.h("svg", { key: '75095cf14fc4379ad614d19f3f17fbcc45522893', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: 'ac75f21b37bef789cac77fb0ba7ad32d137a059a', id: "spinner/conductor" }, index.h("path", { key: 'abec474d103c502e803abb0dc2b394200b6349bc', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
+        return (index.h("div", { key: '8cd82eb8f42bfc92be2a8bf137861378ef5304fe', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, index.h("div", { key: 'a8ae208e73eee65cf847b895993ee90d5841cbdd', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && index.h("div", { key: 'de8bcb3ab51f25a6c1081d5857de63aadb342532', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, index.h("svg", { key: '7c93484e4e39bc58e4031fb9d8e500393a5f9f40', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: 'f4e0d268ada9e3c8594c906290fff2b4d0680fc2', id: "spinner/conductor" }, index.h("path", { key: '43f579e8f3b75d8429913c20e1693d2d71aeaa87', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
     }
     getSizeClass() {
         return `${this.size}` === "s"
@@ -88,12 +88,12 @@ const TextField = class {
         this.handleTypeProp();
     }
     render() {
-        return (index.h("div", { key: '582030cd80a25e8961e3bf36f78d743ae21f7cc7', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, index.h("div", { key: 'ae7d79533a7cb384c4eb42aa04c10c0df9384069', class: "textInput__top-wrapper" }, index.h("label", { key: '79e233964514cc87bca4d8f91caa1cd8570e3265', htmlFor: this.internalId }, index.h("slot", { key: '46a1155d3de1f75344a7fa00286ecc2924b0f2fb' }), this.optional && this.required ? (index.h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (index.h("span", { class: "optional" }, "(optional)")) : this.required ? (index.h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), index.h("div", { key: '69373ab3734b9bce032843336c8cea85b5b183d6', class: "textInput__bottom-wrapper" }, index.h("div", { key: '345b0f6731cd0f3ccce9b25118bf6fe95f400b4a', class: "input-container" }, this.icon && (index.h("ifx-icon", { key: 'cd4171b329389594190611b9c026ece9454dfd13', class: 'input-icon', icon: this.icon })), index.h("input", { key: '3b9cc25c0d3369bac079b681c05fe2c8fb224f0e', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
+        return (index.h("div", { key: '81ef2fbe22ad30e688fdd6891439b09de2fcbf65', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, index.h("div", { key: '44a1992e5fbcd08273f2e017a05d072680fcf33c', class: "textInput__top-wrapper" }, index.h("label", { key: 'cbac0935435ed094c204b36c024d94bfcacef510', htmlFor: this.internalId }, index.h("slot", { key: '7d4fbcaec9be70cdb97bced7d32403bb26f1b9f8' }), this.optional && this.required ? (index.h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (index.h("span", { class: "optional" }, "(optional)")) : this.required ? (index.h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), index.h("div", { key: '4d64d4b7a06be02b2233d3f3476ec5c421c10ac7', class: "textInput__bottom-wrapper" }, index.h("div", { key: '74ac0bceddc78b015d94b88ca75241d32aa2c5db', class: "input-container" }, this.icon && (index.h("ifx-icon", { key: '8553027b5d228fbb24e55fe9558fd7d89455498c', class: 'input-icon', icon: this.icon })), index.h("input", { key: 'b51b63c21d2597f3b051bc8d7fdedbd2aaff357d', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
                 ${this.error ? 'error' : ""}
               ${this.size === "s" ? "input-s" : ""}
-              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (index.h("ifx-icon", { key: '4576d8ee4dc4e78d0b6206fe0e4cbe7fa49ce557', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
-            index.h("div", { key: '07198155e906c56d4c5e52392e193bfc31ecf58e', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
-            index.h("div", { key: '59b7eb623d6e836087491f328de218267140f7b9', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
+              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (index.h("ifx-icon", { key: 'aa9d66fa212665006fb1696ddb8a9af2207ce4a0', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
+            index.h("div", { key: '5af9536c5b4766c4e53be1e4bb1d3dacbbd4c6a6', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
+            index.h("div", { key: 'f769b75fe6df50d867979af164ad4cd143285cb1', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ifx-status.cjs.entry.js CHANGED Viewed

@@ -17,7 +17,7 @@ const Status = class {
         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 (index.h("div", { key: 'f613dcda2a1cdf86cb9169937a3674b1f8d985f7', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, index.h("span", { key: '17792fd234e467d0396d00f6e244a5842d08e1ce', class: `dot ${effectiveColor}` }), index.h("p", { key: '51261dabeec924c46a9a710c74de9bb7140bf927', class: "text" }, this.label)));
+        return (index.h("div", { key: '67fb5dcfeb258518a98b4e7fec4d5336efd6ebcd', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, index.h("span", { key: 'c7a123e821b5074fe8f215f883aa9d2e59404762', class: `dot ${effectiveColor}` }), index.h("p", { key: '5798ca747692c831a55f3b2959db6c42d46cc392', class: "text" }, this.label)));
     }
 };
 Status.style = IfxStatusStyle0;

package/dist/cjs/ifx-step.cjs.entry.js CHANGED Viewed

@@ -51,7 +51,7 @@ const Step = class {
         }
     }
     render() {
-        return (index.h("div", { key: '9914ec28d308a59dae9f0f6117b2aece72ac6438', "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 (index.h("div", { key: '67813ee4b35ccb5ce5b9536760180dc99eb734f2', "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' : ''}
@@ -59,11 +59,11 @@ const Step = class {
                         indicator-${this.stepperState.indicatorPosition}
                         ${this.active ? 'active' : ''}
                         ${this.clickable ? 'clickable' : ''}
-                        ${this.disabled ? 'disabled' : ''}` }, index.h("div", { key: '6017ac474bcbc1afa7ed1ec416bf0302fdbd5cdd', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && index.h("span", { key: '0a90ed22e8b55a0a20d463347edd656ece131992', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            index.h("div", { key: 'c21888305852d7434847c329a7f7569ff2ac3b7d', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && index.h("ifx-icon", { key: '1a97cd47db4fe64eda55a1418511bb1e78bc1332', icon: 'check16' }), this.active && index.h("span", { key: '2b918fa4f3052c7e6c5597f175956802ec2f34bb', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && index.h("ifx-icon", { key: 'b515f8cab0008f14c9e1ba9a5f085792a440a2cc', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && index.h("span", { key: '772ef8271ffb3398a7bcfedb732a12e43250ae98', class: `step-connector-r ${this.active ? 'active' : ''}` })),
+                        ${this.disabled ? 'disabled' : ''}` }, index.h("div", { key: 'b65c11a9334ddc6cfa3760883280cc0929de26db', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && index.h("span", { key: '509c2da59919ebc5b730ffc1ef795be3962b4784', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
+            index.h("div", { key: '47b8eb61de8b0d9363d59d386e2ec00824994ffd', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && index.h("ifx-icon", { key: '528ab6ed4b54e207f56999eda4f204d7237e15ae', icon: 'check16' }), this.active && index.h("span", { key: '8f3c5e9b1f1faa74c91e343f024bbe86734eb9e5', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && index.h("ifx-icon", { key: '40beb5b2ac5c2b80034d935ed499955557757e9a', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && index.h("span", { key: '02330c59c8340ff48e0c98ca6c5e97d391715a05', 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))) &&
-            index.h("div", { key: 'b16463d3fb54cafc520cb7799f647884f28989f0', 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') && index.h("slot", { key: '81c8b0a1310dcb02c0c668c2ac7ed84902e31a8f' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && index.h("slot", { key: 'c20034f2bee0fea186754be2480b75552f4ea9e9' }))));
+            index.h("div", { key: '745dc346d34dee31109bb9f7f466f926b6c3ca21', 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') && index.h("slot", { key: '488e381198713ca607975f55b3f02b57e9009856' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && index.h("slot", { key: '09bc9a4e89a11cfbfb0e2f6f46f729588fea66df' }))));
     }
     ;
     static get watchers() { return {

package/dist/cjs/ifx-stepper.cjs.entry.js CHANGED Viewed

@@ -128,10 +128,10 @@ const Stepper = class {
         this.syncIfxSteps();
     }
     render() {
-        return (index.h("div", { key: '797f8d8dcc699cfedf33c1a03d73d92fa452789e', "aria-label": 'a stepper', role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` },
+        return (index.h("div", { key: 'ebb0dcfedfa5bbbfb7cd6c5abe7125b948fac551', "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') &&
-            index.h("div", { key: '809a1220c3920494be1e8ad0894d2e4eaf586823', class: 'stepper-progress' }, index.h("div", { key: 'ca02c1f0c34d24363f030b828d6d9807140687fe', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), index.h("div", { key: 'dbed479b177e2535fcdf3ef7f5b1be04b6839074', class: `stepper-wrapper` }, index.h("slot", { key: 'ad74e85e68cb12d1737066d07274e00b04db7077' }))));
+            index.h("div", { key: '82ff1eb3fe665ca2cc6690e0ec589e8c3572bf52', class: 'stepper-progress' }, index.h("div", { key: '31ee2433f257a8da7f8077ea24672fb41fd69298', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), index.h("div", { key: '49ee4b5aaa2fe97dbfcb2855fb2af51a835f7d87', class: `stepper-wrapper` }, index.h("slot", { key: '3f1ad0132e9d566fc4c54a7fe4f6b294c735325d' }))));
     }
     ;
     componentDidRender() {

package/dist/cjs/ifx-switch.cjs.entry.js CHANGED Viewed

@@ -80,7 +80,7 @@ const Switch = class {
         this.internals.setFormValue(null);
     }
     render() {
-        return (index.h("div", { key: '00275ee24707ebf446476430fa4af6939bd017bf', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, index.h("div", { key: 'e15a531e43b1ccac07b4d8df4c91b44377c09ed4', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, index.h("div", { key: 'bbbed47db3b07d7977b4ad29c08ba9d2b0bbce0a', class: "switch__checkbox-wrapper" }, index.h("input", { key: 'fd06dd4ccf3b45dc64d6d976ed2fb60dcf9134d4', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), index.h("div", { key: 'd3dc979f46b1f46cbbc3fa6df7d0b84852dddde7', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), index.h("div", { key: 'f3e47e690f6d87515f248fae689379b81fd6ff8a', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, index.h("label", { key: '4fef1d74b28e8b556f5364b6558047d1cf37eda1', htmlFor: "switch" }, index.h("slot", { key: 'acd83b37e36d11a0a2b7fd3a40bf1f0c584be42e', onSlotchange: () => this.toggleLabelGap() })))));
+        return (index.h("div", { key: 'e8b7161f772a860e04f0973a03c98759111a02e4', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, index.h("div", { key: '9c5c078eb35d96fe42662eeae2ceb6408126eedf', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, index.h("div", { key: '93dd1bf0cd4745cca77f97bc655533d9d1fc218a', class: "switch__checkbox-wrapper" }, index.h("input", { key: '1c51b7b432940b5bd835276ed20d64e26fa907c8', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), index.h("div", { key: '2cfd326305c2e14fab2ef2f795b9dc0864fffaf1', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), index.h("div", { key: 'c058972ad6cb6fca2b091304e6419109e2aa83ce', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, index.h("label", { key: 'fc24e0b5b2b2af4fef6cfb4ce6fda28204e3a0a0', htmlFor: "switch" }, index.h("slot", { key: '9f9fef34b64b9d89647acfa3d1c8d983b8581d0b', onSlotchange: () => this.toggleLabelGap() })))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ifx-tab.cjs.entry.js CHANGED Viewed

@@ -18,7 +18,7 @@ const IfxTab = class {
         this.tabHeaderChange.emit(this.header);
     }
     render() {
-        return index.h("slot", { key: '9390db47c18accefa13e357fa4cbee278b984f40' });
+        return index.h("slot", { key: 'b3cfe28ec63f71e875ceedd37084b4a8d73d4068' });
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-table.cjs.entry.js CHANGED Viewed

@@ -459,12 +459,12 @@ const Table = class {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';
-        return (index.h(index.Host, { key: 'ba124693eafcbfbc933b55c6857776f728d12aea' }, index.h("div", { key: '34a6a79fedb9a6c960c9e71c68e7fd3c3c75e09f', class: "table-container" }, this.filterOrientation === 'sidebar' && (index.h("div", { key: 'd0f90397a8cf31325d2f441dbb1c3a3bc0afa138', class: "sidebar-btn" }, index.h("ifx-button", { key: '2f2514c29a261e014facb3243a6f555007b568a4', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, index.h("ifx-icon", { key: '3c7667f3b8bc795a1e2cc1be2df0bbddc9b7bb2b', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), index.h("div", { key: '2e46ec3931c21f0c1324454337fbf3e69b1dd5a7', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (index.h("div", { key: '26d6221d0c775117d3ebcba22670244d1f195801', class: "sidebar-container" }, index.h("div", { key: 'd50b7574c3f95a23c9a23c97eabb3ccabce2037f', class: "filters-title-container" }, index.h("span", { key: '7cd24e5737008cc0846031982f0f146b4f4ad648', class: "filters-title" }, "Filters")), index.h("div", { key: '9fff6f60fc28f57ef544d770012bace4730c0835', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (index.h("slot", { key: '2000415894dc9eb83f2ad9bab01314a9cd70de65', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (index.h("div", { key: 'ca2897fe8b4fa4d9bb7e4920905f83de71361221', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (index.h("slot", { key: '4ca9c5ca5d16e62345df45a99cfb33b6e3529dc0', name: "topbar-filter" })))), index.h("div", { key: '7ae3eb37ab9eaecc2c253b4e9a888eeb679c69cd', class: "table-pagination-wrapper" }, index.h("div", { key: '38e6a77edc2ba5c0488d0f6d20e14365a8f04469', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
+        return (index.h(index.Host, { key: '3c30e6dae1c981617cd714f6865516885757ca95' }, index.h("div", { key: 'fa5de4ffbc20b07dfa9f3f873fd1244e86f408c2', class: "table-container" }, this.filterOrientation === 'sidebar' && (index.h("div", { key: 'b2ca3214ab678787c20a5d0da9cba2b25bce013f', class: "sidebar-btn" }, index.h("ifx-button", { key: 'd0c81bee43c704e9e2550ba7400a7b245068d00c', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, index.h("ifx-icon", { key: '672131c8540ac28ca9ebb479cbdb342c144e523b', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), index.h("div", { key: 'b5cc8d1d5f8eaf2e3b2f09fa843f3a0321d1e37a', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (index.h("div", { key: '139788cef4927835d1b95f43cea84ff1944e4fa8', class: "sidebar-container" }, index.h("div", { key: '5520d2c3f99fe38dddf6d3b5cc1dfb4635da44dd', class: "filters-title-container" }, index.h("span", { key: '8f95eee470a39467cbc89e0426fe9bfcf179c5c3', class: "filters-title" }, "Filters")), index.h("div", { key: 'f8c2aa07dbd579cd8b3407a269eef5fbaf1d9a1e', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (index.h("slot", { key: '5354d7e546f1e5a8c6f14e71817ef12bcbd18899', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (index.h("div", { key: '89c62b2333f9ddea4085d9eb4e76385508cfcfa4', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (index.h("slot", { key: '488777f09d1452543b17d40c82a4e7e366132c97', name: "topbar-filter" })))), index.h("div", { key: '73d78f138f52fa0659aeceb68292f0230acd22c6', class: "table-pagination-wrapper" }, index.h("div", { key: 'bf738458f274eceb313efe93ba27ed1bcb067421', 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 ? (index.h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? "multi" : "single", readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (index.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 && (index.h("ifx-button", { key: '7156897f41934f958f04a70f4d3faacdf8063b3b', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, index.h("ifx-icon", { key: 'c97a7f711c4cc107a36714e167b73d72b4d0e8d7', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (index.h("div", { key: 'd19d7904a134e930694082e2fef8925c24e3e7c9', class: "matching-results-container" }, index.h("span", { key: 'd21109ccee7b77317906b3a68d8489f558f582ca', class: "matching-results-count" }, this.matchingResultsCount), index.h("span", { key: '57cccfc367a3c6c07762d7e997e7cc8ceb1690c9', class: "matching-results-text" }, "matching results"))), index.h("div", { key: 'c47593ad6f870a314926d6b32ff07bbbcd0cad1f', id: "table-wrapper", class: this.getTableClassNames() }, index.h("div", { key: '9b73f234b9cb8e7c32f9c323b20d9a34d97ff48a', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? index.h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }) : null)))));
+        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (index.h("ifx-button", { key: '69cd2533c9124e13ca672f62a0a23fa2d385a462', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, index.h("ifx-icon", { key: '6f50122240ff541835c668400945c8a574129e8b', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (index.h("div", { key: '1e96757222d177c88ebd96ac052ffb9e1c045610', class: "matching-results-container" }, index.h("span", { key: '3e272b3271266654828c28fa874820352cf01aa5', class: "matching-results-count" }, this.matchingResultsCount), index.h("span", { key: '5a3d28910e61bb81401026f03951c0dce1cff57e', class: "matching-results-text" }, "matching results"))), index.h("div", { key: '7f3216bd78123779131e038a62c730411beae8f9', id: "table-wrapper", class: this.getTableClassNames() }, index.h("div", { key: '4cf52d739457ac1fb9f86a75173fd5a199858e66', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? index.h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }) : null)))));
     }
     hasButtonCol() {
         return this.getColData().some(column => column.field === 'button');

package/dist/cjs/ifx-tabs.cjs.entry.js CHANGED Viewed

@@ -206,9 +206,9 @@ const IfxTabs = class {
     }
     render() {
         var _a;
-        return (index.h("div", { key: '5611a3f319b0d8bd8eb135c5583e51a7ebbbdf14', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, index.h("ul", { key: 'e72b1eca9d9a9a1d74aea100b5400d8db7e0bc8d', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (index.h("div", { key: 'dca1f6498433d621018f11be1b964937219093e5', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, index.h("ul", { key: '459b025979867da69fa83b612d3165fba1bca9cd', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
             _a.map((tab, index$1) => (index.h("li", { class: this.getTabItemClass(index$1), ref: (el) => (this.tabHeaderRefs[index$1] = el), onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleClick(tab, index$1), "aria-selected": index$1 === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, (tab === null || tab === void 0 ? void 0 : tab.icon) ? index.h("ifx-icon", { icon: tab.icon }) : '', tab === null || tab === void 0 ? void 0 :
-                tab.header))), index.h("div", { key: '2fcbbe0dbfd84095cc2050e96f71b97bfd2d3571', class: "active-border" })), index.h("div", { key: 'c788afab32a3b14eb58d4c195bbca3c83ef5fe4d', class: "tab-content" }, Array.from(this.tabObjects).map((_, index$1) => (index.h("div", { style: { display: index$1 === this.internalActiveTabIndex ? 'block' : 'none' } }, index.h("slot", { name: `tab-${index$1}` })))))));
+                tab.header))), index.h("div", { key: 'bb1cfb3caa7b178687c2cafd83008e5d81b74190', class: "active-border" })), index.h("div", { key: 'a55fc0392945da08aecea2937cf5dbf47c502881', class: "tab-content" }, Array.from(this.tabObjects).map((_, index$1) => (index.h("div", { style: { display: index$1 === this.internalActiveTabIndex ? 'block' : 'none' } }, index.h("slot", { name: `tab-${index$1}` })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-tag.cjs.entry.js CHANGED Viewed

@@ -12,7 +12,7 @@ const Tag = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '226762652cca543b0a1d18e5369522b4e3f8e439', "aria-label": "a tag", class: "container" }, this.icon && (index.h("ifx-icon", { key: 'fdbc2d0f9db2230d6a5dfa0c8bce6168c84be5ed', icon: this.icon })), index.h("a", { key: '4b0b1c215663bb98233e9f4a1839c039d5a62677', href: "javascript:void(null);", class: "label-wrapper" }, index.h("p", { key: '886e29da34a796cd03db982a9a189512c4a0a953', class: "label" }, index.h("slot", { key: 'e202efd131d0acb79b9d47a4dfaa8ba865598377' })))));
+        return (index.h("div", { key: 'ba6a7ab29dc273bc85d490d5197a32828c00b773', "aria-label": "a tag", class: "container" }, this.icon && (index.h("ifx-icon", { key: '288f2bc03f55df934c660069837355af2a03d12a', icon: this.icon })), index.h("a", { key: '26cbe701f93f09b6acf8a52908a844d2b683b400', href: "javascript:void(null);", class: "label-wrapper" }, index.h("p", { key: '410e03ea48a0a7c2655ca7a97a0e2c06549494fa', class: "label" }, index.h("slot", { key: '369e2ff6d2d4f4d10518512ff129c6fcdbcb2144' })))));
     }
 };
 Tag.style = IfxTagStyle0;

package/dist/cjs/ifx-templates-ui.cjs.entry.js CHANGED Viewed

@@ -49,7 +49,7 @@ const TemplatesUI = class {
         alertWrapper.classList.remove('show');
     }
     render() {
-        return (index.h("div", { key: '2839932de12b3ac02cf1bb01c535b544c79ffaba', class: 'templates__container' }, index.h("div", { key: 'e69da2fb658fa6d1026908bc183be10fb9ab3e06', class: "back__btn-wrapper" }, index.h("ifx-icon-button", { key: '26b0ee7071c26f39b7567839249e88ed2a78d78b', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), index.h("div", { key: 'b91f587d291208f5f67a2fc5ea19c9253e393860', class: "alert__wrapper" }, index.h("ifx-alert", { key: 'd0ee2491c8e52d39b05bd4ce5b9a21ba3300f5c2', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), index.h("h2", { key: 'aaf1a750b6277f6644d05a9aefa27c3c36f7cf88', class: "templates__title" }, "Choose your template"), index.h("div", { key: 'f484bc4ba4f2f91ede04eb39f422b0a971b71113', class: "templates__wrapper" }, index.h("ifx-template", { key: '056c35bdd617a568c2dc012cb88762be7c8455c9', name: 'template-01', thumbnail: this.tableTemplate }), index.h("ifx-template", { key: 'd65ec2d5fe3f12e7a718d493abd3dbf5e22de531', name: 'template-02', thumbnail: this.wizardTemplate }))));
+        return (index.h("div", { key: 'f75693e185819705bae623f31dafbff315220c60', class: 'templates__container' }, index.h("div", { key: '8ebe1415e39feca220a2e8d7fd87f4e2a6641e71', class: "back__btn-wrapper" }, index.h("ifx-icon-button", { key: 'f5286ef00280a6d7a6cc4e6badebb6b712fcd6ab', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), index.h("div", { key: '979b3580a1c8badc0ab024f46fbd184885d58a4c', class: "alert__wrapper" }, index.h("ifx-alert", { key: 'f3f74eb9d0c94205a589e4bb96660a0c1df6ae1c', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), index.h("h2", { key: 'a01fa5cad78d573de82f144a8c18d9447b6a76fe', class: "templates__title" }, "Choose your template"), index.h("div", { key: '75fca148564ce0e1b17068001f3afa8d5d137626', class: "templates__wrapper" }, index.h("ifx-template", { key: '101dafae88c029f99d8982fc6653f32c07db5b27', name: 'template-01', thumbnail: this.tableTemplate }), index.h("ifx-template", { key: '6e308c29458a87aceb1b720217a3a2478fc4041e', name: 'template-02', thumbnail: this.wizardTemplate }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/ifx-textarea.cjs.entry.js CHANGED Viewed

@@ -61,7 +61,7 @@ const TextArea = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'c04bd9f6eb75e14607f6b81fb32065752fd814ac', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, index.h("label", { key: 'bd270704eaedbd3fb127015dd5d9993839a75135', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), index.h("div", { key: '2ff0f414ce2209a5f7bdc9400b2c7c2356da39fd', class: 'wrapper__textarea' }, index.h("textarea", { key: '65007882cbf52104ee22af96beacb9d882bbf245', "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()) && (index.h("div", { key: 'c44b21fd8eef93920228267d9baf51a12bcf08ea', class: 'wrapper__caption' }, this.caption.trim()))));
+        return (index.h(index.Host, { key: 'ad4f07a4ea16d1fd510bcb6e0cc0918a82f73bc3', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, index.h("label", { key: '041c9fb73cfff0d47bc197846ae70ec9c5ca35b4', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), index.h("div", { key: 'b5db9b815a243f6b24907281c141a0b683f1726f', class: 'wrapper__textarea' }, index.h("textarea", { key: 'bdf09d868728934ce876497b636211cd1a1eb942', "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()) && (index.h("div", { key: '42d3db3b95dfe23f296261bdbda67a95257185f6', class: 'wrapper__caption' }, this.caption.trim()))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ifx-tooltip.cjs.entry.js CHANGED Viewed

@@ -156,10 +156,10 @@ const Tooltip = class {
             'tooltip-extended': true,
             'visible': this.tooltipVisible,
         };
-        return (index.h("div", { key: '9c87ad898f047bf3fefbfeec39faa033d39e2860', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, index.h("slot", { key: 'fc4ac4d2a09ccd8c038a180aeadce7fee2ab9b90' }), this.variant.toLowerCase() === 'dismissible' && index.h("div", { key: '9627cd1efe01ffcae8227920b0a59848c85ee5b7', class: tooltipDismissible }, index.h("button", { key: '96c225756217e4f5054c8b02fe0a20b848c845f5', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, index.h("ifx-icon", { key: 'f976619fb32729deb0be068b2c813b02bce37749', icon: "cross16" })), index.h("div", { key: 'e4219ce93a82ecd3534c8985cd62049cd23cbaa7', class: "tooltip-dismissible-content" }, this.header && index.h("div", { key: 'a168b26826aa857fce0f437023e5e18a956cee3d', class: "tooltip-dismissible-header" }, this.header), index.h("div", { key: '0bdfdce23226097d1f60a3d72032bcd9d7b709fe', class: "tooltip-dismissible-body" }, this.text)), index.h("svg", { key: '6c6efed9ed056040960a7928e93d0b6ff7f83b30', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'f9de1eb1b04f276c3ca7176af1066e483a441b69', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
-            index.h("div", { key: '7cbd4ea98ec29eff71021b27cfd2696c5fa6cb68', class: tooltipCompact }, this.text, index.h("svg", { key: 'e75535c511eea6ea685cabd01f7646452699ecff', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'f3c6a9710be713cac4e3322e68700423441bc007', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
-            index.h("div", { key: 'f04a640ab90d6f957bff270b7b170699634f3ee9', class: tooltipExtended }, index.h("slot", { key: 'aaab6713c93dbf5441ed8d83b1c8111076397404', name: "icon" }, this.icon ? index.h("div", { class: "extended_icon" }, index.h("ifx-icon", { icon: this.icon })) :
-                index.h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, index.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" }), index.h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), index.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" }))), index.h("div", { key: '723034136727fa51330c9f34fbfb4931f8af857e', class: "tooltip-extended-content" }, this.header && index.h("div", { key: '8bc34fd54d3e0a7abcd2f08145556c94dbde879b', class: "tooltip-extended-header" }, this.header), index.h("div", { key: 'e607a0953671b563f49921049a69ffe71c6d962e', class: "tooltip-extended-body" }, this.text)), index.h("svg", { key: 'a1aa6e39af3ecc50a5c8ee81c3f9fa826f88a446', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '9cd2e3ec0d0e5f1d3b4c58f7f85f5a3439638eae', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
+        return (index.h("div", { key: '3b8c0a5958c6f9bd8050dabe86794fad3945a11e', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, index.h("slot", { key: 'f21eadbe48f312be595e035aeabb4518c27794ba' }), this.variant.toLowerCase() === 'dismissible' && index.h("div", { key: 'a0540f0f7d9b269ee3adec89fefc49c09b12c7bc', class: tooltipDismissible }, index.h("button", { key: '70aa5956d5e91e1867c6a781b3956e1f3a174c6a', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, index.h("ifx-icon", { key: '07f91bffdd259f18069ade3755dc5169c4f11e1e', icon: "cross16" })), index.h("div", { key: 'e5ccd4c4b59d93375441b29488ae50bdd5ea3f5b', class: "tooltip-dismissible-content" }, this.header && index.h("div", { key: 'b3c3b195688357c06c5257f80923c8bafdd62a1a', class: "tooltip-dismissible-header" }, this.header), index.h("div", { key: '27c01fef25ffe1bffbebb347c5bae43acd6b2c6b', class: "tooltip-dismissible-body" }, this.text)), index.h("svg", { key: '6199d757b56e3e365f156dccdc5c86e7ef9c4e25', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '11d4c52a83828afeebbac98031259f0b14482fec', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
+            index.h("div", { key: 'd8f6a06c2e9d84b2752013d78c5b5ab5759df617', class: tooltipCompact }, this.text, index.h("svg", { key: '3d37dc4c80e41659533bf53d63176d9cda93bdef', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'efdcc135932f3f148b107597bb4b7a8218ec2ea7', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
+            index.h("div", { key: 'bd23b388aedf1cd7fc80e6a57bb043f0eb706c00', class: tooltipExtended }, index.h("slot", { key: 'a287aab9832b2d22ac1c9c6ccd4b9a7fe1a88e1c', name: "icon" }, this.icon ? index.h("div", { class: "extended_icon" }, index.h("ifx-icon", { icon: this.icon })) :
+                index.h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, index.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" }), index.h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), index.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" }))), index.h("div", { key: '596675881c90111f1c8f4dd26f277ae647d76507', class: "tooltip-extended-content" }, this.header && index.h("div", { key: '54837eab014cc174f06980883827e6c9bb74c3e0', class: "tooltip-extended-header" }, this.header), index.h("div", { key: '6317ecd46ee6ad8d91f214f9a487511ecabda638', class: "tooltip-extended-body" }, this.text)), index.h("svg", { key: '2b6d3104824919a9ce5c9b608cae05b9cf1a6575', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '2030a14c358f513f7d7e34a65adb1ff30c4b12ce', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {