@infineon/infineon-design-system-stencil 32.8.3--canary.1801.9e100fbdf7acebdfe2817708727a43d1a0b9be13.0 → 32.9.0--canary.1690.ef94902073425116647c9c7d684cb0b9cb0173a2.0

package/dist/collection/components/pagination/pagination.js

@@ -148,7 +148,7 @@ export class Pagination {
         this.initPagination(paginationElement);
     }
     render() {
-        return (h("div", { key: 'b8dda1714435952c7adf00e9b480e06f0d0a4b00', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: '448d3ebb3b41a20a345a61c2d335052097824deb', class: 'items__per-page-wrapper' }, h("div", { key: '5c33123d7d66094eeb631bd965c036c350bb2ca2', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '020d543b8159f37b2e69dacb5a56b6841f25f2eb', class: 'items__per-page-field' }, h("ifx-select", { key: 'a75df9c097738daca9b930843b600469f1946722', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: this.filteredItemsPerPage }))), h("div", { key: '01b00c516332ad10de30dd92e059fec58e9357cf', class: 'items__total-wrapper' }, h("div", { key: '70e50c9b90608c2bf697c3e897190522e08757be', class: 'page__numbers-wrapper' }, h("div", { key: '549dd32dd6b84482cf2ae43be43c055a8970c10b', class: "pagination" }, h("ifx-icon-button", { key: 'b1d80538b4698c75579baedc9f88ec0694d9ccb5', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: 'cace7369c96e6b0bb9813c5ce6d8a92fd9b2a355' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '132ab46a2a3a37a7489cd1190bc0d255b70bdf83', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
+        return (h("div", { key: '28020981686b2a32bf9b401bb33335254046b6af', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'f01128bd9ac5ae78e0e81f457031e853d5775283', class: 'items__per-page-wrapper' }, h("div", { key: '7a7a46f6377886af8dbaa48a50cbf45b0c31ec45', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '0dbe7da930e8b694cc10e3ccd971721bd2099c74', class: 'items__per-page-field' }, h("ifx-select", { key: '594c244d8e3007c982cce28cdb2a140ff84fa98a', value: 'undefined', size: 's', placeholder: 'false', "show-search": 'false', "search-placeholder-value": 'Search...', disabled: false, error: false, "error-message": 'Error', label: '', "placeholder-value": 'Placeholder', options: this.filteredItemsPerPage }))), h("div", { key: '41e29a9570a38ad84639bfaccdbae35e63369e82', class: 'items__total-wrapper' }, h("div", { key: 'ea0de6169ec9bf2f52b188cb08ad9c30acbe40af', class: 'page__numbers-wrapper' }, h("div", { key: 'ef97f91d487cb04157ac259c38b586a14f7b298b', class: "pagination" }, h("ifx-icon-button", { key: 'c5f7049f4e0b7b2e1f11166b7e72ca165878a4dc', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '1825c56cd64c3e8688352ca1ecc031d60264adbc' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '7cc205cc4d5f5c8ee8d8f0917c5634670daba0fe', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
     }
     static get is() { return "ifx-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class ProgressBar {
         this.internalValue = this.value;
     }
     render() {
-        return (h("div", { key: 'dbca8c4b413f06cffe00828250b904b7f012e3e2', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '7b5ca791c98572bbf870b35e84ae75886a6a8f21', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '6b30d72565bbcd61addcc1e4ff96a311c681dd28', class: "label" }, `${this.internalValue}%`))));
+        return (h("div", { key: '35f55b670cd2e086fbc44f05c98e616453bd407f', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '43e8ef3422aa2f73ea3edaed7beaec41a19ba7a0', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '4af5e3572e58c6567ddd5ab98c84bc11c8a7be58', class: "label" }, `${this.internalValue}%`))));
     }
     static get is() { return "ifx-progress-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -87,10 +87,10 @@ export class RadioButton {
         }
     }
     render() {
-        return (h("div", { key: '50f91a7e62f42eca90c3a5b0e5be2305fc724993', 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 }, h("div", { key: 'bc8584815a87f47e01e5fe13d299ae76dfa9ad41', class: `radioButton__wrapper 
+        return (h("div", { key: '462e0469ee1c7fa77b9b28b8f2aadc856a24d587', 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 }, h("div", { key: '7a325bc66c710d70a0f67cf312818b7b0d6e86e0', class: `radioButton__wrapper 
             ${this.internalChecked ? 'checked' : ''} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: '5ded48e0ad8f94e7069d7fd7d134521c87f5bb80', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '4e54b2170790de0b6a0819634db1223804000522', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'ae995e898c7c811b32e0226577fdb11e72914961' }))), h("input", { key: '76d3c452563072034296964feaf90c406a7b89de', 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 && h("div", { key: 'd90a5d666ad260efffdb213164a6ac3aaa537dbc', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '8a691a50bdc558ec2758033caf39432a3673a034', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '6d468dd75e5f964290349ab509af28a0c8bebb14' }))), h("input", { key: '90e7432e4a4bfb09dcaa65a29441bc6b38385d9b', 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 is() { return "ifx-radio-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,7 +40,7 @@ export class RadioButtonGroup {
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (h("div", { key: '8316d55cd2188e39adc39b4ae2cff2a6a00645d7', class: 'radio-button-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: '2d173aa92a70454f51e5cc51832a6c6dee190bca', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '5d0743555c2c7f8575bdfde588b8e60fa705103c', 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: 'b1d28133968f11f1dd607c8718b3ac78b81a30ce', class: 'radio-button-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: 'aabf1ce17c5a30806b57d146f9fb28456501f778', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '75e5714f78f22f04a0f994e2051b995635d8d799', 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))) : ''));
     }
     static get is() { return "ifx-radio-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,7 +30,7 @@ export class SearchBar {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: '833ac768dc2ce63caa5826c96c451ca3e33da8a5', "aria-label": 'a search bar', "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", { tabindex: "-1", 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: '4cef8e7a043f1e0f47211da11f53c4142a465665', "aria-label": 'a search bar', "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", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
     }
     static get is() { return "ifx-search-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,7 +46,7 @@ export class SearchField {
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (h("div", { key: 'eb418cec54df93f23623038a45fa860c1d29b86e', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '3f8fbf4058553a636d970f4cb8e1740a089672fc', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '7b7c0894d05a2eeca97f6bb25019f2ca55ededa9', icon: "search-16", class: "search-icon" }), h("input", { key: '5141683d9335d5b6f81d1d9a1ba56d908e26ce54', 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 ? (h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
+        return (h("div", { key: '650ce5bb84569121de76a2903ee0a9f631d5d657', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '6ed9b4c8e90f1e249e3ee453990cc33e6c5f42fd', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: 'dd2d019028006749b18b04ec8e1343f4b3580867', icon: "search-16", class: "search-icon" }), h("input", { key: 'c5d915f98c769073b357b1471333f5904ea34f78', 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 ? (h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
     }
     getSizeClass() {
         return `${this.size}` === "s"

package/dist/collection/components/segmented-control/segment/segment.js

@@ -18,7 +18,7 @@ export class Segment {
         }
     }
     render() {
-        return (h("div", { key: 'e99e1a35e80b8d05a075416b97264c79feb1c43d', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '5575b532732b647992d3cae14fe7ef82e91f9557', icon: this.icon }), " ", h("slot", { key: '479048280a0c85b6581eb6640190719508900f55' })));
+        return (h("div", { key: '24e29962777967caa13ca6fd67acef50bd35688f', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '5b617d48bb3fb9a987f3c8c69b44e47203bd39d4', icon: this.icon }), " ", h("slot", { key: '3439ea0ed1b6c0afc18313c65da94a13eabffd39' })));
     }
     static get is() { return "ifx-segment"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,8 +62,8 @@ export class SegmentedControl {
         this.setActiveSegment();
     }
     render() {
-        return (h("div", { key: 'a88cbd45c79867e92a6f521e37ec07b603783925', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: '59d4a06dcf05290714f6debe80ff8b723f49b1ad', class: 'group__label' }, this.label.trim()), h("div", { key: 'ab2ea99cbb68237acadb0cb02397025aa8065686', class: 'group__controls' }, h("slot", { key: 'f029e1999e4102adef822c334fa5de6045ec15ae' })), this.caption.trim() &&
-            h("div", { key: '0cd3c610e7fc38c664b47467547ec0b954a97e96', class: 'group__caption' }, h("ifx-icon", { key: '3608411e811c84bd601d8d5fdf5f1175c2fb15fa', icon: 'cinfo16' }), " ", this.caption.trim())));
+        return (h("div", { key: '44570e77a5bb69b2445f25210802bebef7ea4b16', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: '27df3d151a81f9c51573e7cda1213dc46fb3c996', class: 'group__label' }, this.label.trim()), h("div", { key: '54b3be7f83adcce926a32cd1b48bd060dec07911', class: 'group__controls' }, h("slot", { key: '1176e2079339ea84e448b94ccbcca7c46e188c41' })), this.caption.trim() &&
+            h("div", { key: '098012b21d8ddef63c8d2899f72d895d95ac672e', class: 'group__caption' }, h("ifx-icon", { key: 'cd65f60cc1be162739d9f9561dee9f8fe779d180', icon: 'cinfo16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();

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

@@ -218,9 +218,9 @@ export class Choices {
         // destroy choices element to restore previous dom structure
         // so vdom can replace the element correctly
         this.destroy();
-        return (h("div", { key: 'fce293f1ff2c009c3631603d3b8c66caadeb000a', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: '41fa85fdf18dea08032f14aff381df5cd0831821', class: `${choicesWrapperClass} 
+        return (h("div", { key: 'f87d4513426e72959d9ed91c5f8d8d4bdb059d25', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: '5f7dd5010be9c22815d95c01809441d007480f7d', class: `${choicesWrapperClass} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : (e) => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: '33355e294c1ebed416bff5c751fcfcb8e9d68ae2', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: 'c25f4f64df3ef1ce7bd4f91eb6513ba04b59e263', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: '5de712066d407fca84f9b7ae7d9ecb42b4c8e202', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: 'ec8262141948c88776ac4e08df22297e0d984160', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: 'd8720b8094fa6a44fbbf4bc3bc53e6b52019ae83', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: '42d4fda1ee88172c937fda698443a180ddf41e18', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage))) : null));
+            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : (e) => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: '1a910f6bac2fa8d8bad78f9ae196b43b61ba4577', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '86126e90e8fbc5490bbf28775633e446b78ae35d', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: 'f55402448b7297f97f600c31f8500c7423d6ae01', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: '1f5a06d7cb2b79a2fe9cd33309617b0cd3e077b2', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '89522c702d60f1be3c5539bd0bea216ad2849789', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: '88fdd1490b70a25dd610d1cd82919e9b5f887c42', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage))) : null));
     }
     toggleDropdown() {
         const div = this.root.querySelector('.ifx-choices__wrapper');

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

@@ -136,10 +136,10 @@ export class IfxSlider {
         this.updateValuePercent();
     }
     render() {
-        return (h("div", { key: '69946c370ab91e7f6c079bd843b32e1be44985bb', class: "ifx-slider" }, this.leftText && (h("span", { key: '20d1ec4c8689c9aa64817d33be5731636262d514', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '691b4f00af0cf47b2886a0553b7d3ee39a432092', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
+        return (h("div", { key: '0b3500d219fa3e3928d75493577f375f2c33d1c8', class: "ifx-slider" }, this.leftText && (h("span", { key: 'a56271cdbfd488eee15fa50e3a7187fbbb41f47c', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '8ee97fd4178a2382f5f9c660ef6082ba060864bf', 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: '61f8eb88af993d11b384ed562f08fc1c00dbf2c8', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: '01ddb91c8989f5c069671e411ffa1d2e788c9cd5', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: 'aecbab66dd57a9b716862a9c4a957ba35eb0856e', 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: '281f1fc2711241144a4c112713dd75709be8876d', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: 'c68dee426bc3e48ee02f3c00d6fc11f01c3095ad', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '4a28abfc9b711a0269d1e2007dfcaa2507b54eed', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
     }
     static get is() { return "ifx-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,8 +5,8 @@ export class Spinner {
         this.inverted = false;
     }
     render() {
-        return (h("div", { key: '029e1fc94f4abd0fc3f938a29b37c872889ec5d9', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: 'b648bc1a06b2a92d61a75fd99a4fc0884d10b882', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && h("div", { key: 'f949d5f4d477d440b2ca44121e72e6d94c49b984', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '76e04a2c9290f71b4628e977087f6cce3a09bdb9', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '3927589002256e8f9e721a009864787cc61410a5', id: "spinner/conductor" }, h("path", { key: '50cfe42b648991f1957ab51dc78d6cb20849048b', 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 (h("div", { key: '0c54d7c330a5744b6b8ab86f7b0634380a9a7639', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: '1754f90f07172c7aaaad8473a70813455cd0ecf7', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && h("div", { key: 'ce8b76456e437680990da2c0bf0fddba4b9a297a', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: 'f5c40e79581dc76514d5054357f21126abfe1f12', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '430cab7ff3fffd07f0ec7c9f0799182abe3811f1', id: "spinner/conductor" }, h("path", { key: '14bd48e715761fa9161bb4c8d28fa3e4f779d04a', 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"

package/dist/collection/components/status/status.js

@@ -8,7 +8,7 @@ export class Status {
         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: '32138b75cf2a9197b92a5ee30d99ac81e4bc30bd', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: 'd7c16c274e33806d57ec7e0d869dada97a215816', class: `dot ${effectiveColor}` }), h("p", { key: 'db0fd997c2c6b5d6a07432f6284dce118beb2dd5', class: "text" }, this.label)));
+        return (h("div", { key: '49f15d024a1b074cf429cbd6fcece03f2638f030', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: '35d87db46e92d283f9a579deee40277703d0cf46', class: `dot ${effectiveColor}` }), h("p", { key: 'e9e5e431d26af9d54ac865a2abef34bee778e480', class: "text" }, this.label)));
     }
     static get is() { return "ifx-status"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stepper/step/step.js

@@ -42,7 +42,7 @@ export class Step {
         }
     }
     render() {
-        return (h("div", { key: '925e6b06172fc6b6576d7b8b7306d9de36ea4560', "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: '83625c8ac09c90b3b1dcdf3ba2a8895a24edee2d', "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' : ''}
@@ -50,11 +50,11 @@ export class Step {
                         indicator-${this.stepperState.indicatorPosition}
                         ${this.active ? 'active' : ''}
                         ${this.clickable ? 'clickable' : ''}
-                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: '2dc7d44a955791c966a55c6d670f76bacdb775da', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '5058cf86d85cadb0d095fe11b0064c2ccff9c8c8', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            h("div", { key: '00f6e392d71882be03be90041d8dd2b9d7f40ca9', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '09ba89006b6d827d6979884bd6103946519a1faf', icon: 'check16' }), this.active && h("span", { key: 'd6c39396f50e4c0823a1ef2768445e1a14c14e14', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '6da9cf7c09fa7c7fcfd9e126cbf4874e5f40a2e2', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && h("span", { key: 'adeb9666136b01922591bbc8d4650b683f9bb5b6', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
+                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: '9fae5aa155473b25469d15d2fc42acdd20b4cba4', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: 'a6882ef33898927e56295f569c1ccad141d6e14d', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
+            h("div", { key: '7658a779c447037d99fbfa03e13950ab73825da7', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: 'cf34eec3375552270357f0254fdc5fc43dfd934d', icon: 'check16' }), this.active && h("span", { key: 'db9ded65bad4c621cc1754a7c693421fd07e9748', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '7797bbef426c2a4ec0767623cb9ea706ad7dae86', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && h("span", { key: '7f28feb1ef0b579e6aee9c718e9432dc392f4d91', 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: 'ddc5d16dad728d310aa8a8fe2079c43f18422982', 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: '0f8d96f76f768883e890670daba9dd63d2a536de' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '3cd6ca35c9bb4acddcc047bbec353d82749efb9d' }))));
+            h("div", { key: 'f2d2c5b537d44cdff090a73accd82c03fa640bde', 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: 'f15a1c53cdf08a5c73dda35db5c3175059ecc0fc' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '553adaf01a95905408ba846361ab757f2d281280' }))));
     }
     ;
     static get is() { return "ifx-step"; }

package/dist/collection/components/stepper/stepper.js

@@ -118,10 +118,10 @@ export class Stepper {
         this.syncIfxSteps();
     }
     render() {
-        return (h("div", { key: 'c58b6ea1f46c59c7210bc97d0839052924ac58d6', "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: 'e34b9fb2761f7c4a06320b1554c4301c70708018', "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: 'b31a74b397056e93cf1cd8f8bdad36e56f5b5d94', class: 'stepper-progress' }, h("div", { key: '22bb92c7c60ba685a631ac139109e13789095abd', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '10bc8ec56ae8b480b5eda67abc2f51cbaae17881', class: `stepper-wrapper` }, h("slot", { key: 'd757e9a08b0e78f8f291d1df28770231fbb88395' }))));
+            h("div", { key: '84b0c55f95c480b8b412439e7f310106543649fd', class: 'stepper-progress' }, h("div", { key: '57fd2cf3637d1c6299fb0b7af2a4a922a0076b13', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '0dcb9c3e62f301419859f32783a6e3c6762352e8', class: `stepper-wrapper` }, h("slot", { key: '59b1db2d183821acdda67c4cc3279e0882c13b8f' }))));
     }
     ;
     componentDidRender() {

package/dist/collection/components/switch/switch.js

@@ -63,7 +63,7 @@ export class Switch {
         this.internals.setFormValue(null);
     }
     render() {
-        return (h("div", { key: '6cd5f28243669bd65d9f668ff61b9659b5056b73', 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: '086ca771434f6a254392cf92dd5b6323c153c826', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '28ee4d3a82dd61cb7f4fa4e7ae01f728f888d9d4', class: "switch__checkbox-wrapper" }, h("input", { key: '72fed887bf909b14323117bb7fa7d9e3e7323eaa', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: 'f85c72e732dc1dca7fbedc5884307d786c17b7c4', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '4a9744ee98f93381c1c4aaa29c45a5b5784f2685', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '02a972e28a3626076cf6abcdad84369ce8a95da5', htmlFor: "switch" }, h("slot", { key: '64caeedd8735bb149bd0c30212c62b4023a123f0', onSlotchange: () => this.toggleLabelGap() })))));
+        return (h("div", { key: 'cbddeccd43fef5e18d0491b4a1ba4ef2cd4a638e', 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: 'a062194ef6d77a7a26680fbcbcc5df636791891a', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '7165c7a00ef359de33627b4710b79accb602683b', class: "switch__checkbox-wrapper" }, h("input", { key: '8ed145f9f52edca0bb3b1eee6d27974156e3a27a', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: 'e8c9510d1fa762c0116c013e387f730ee3c34c07', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: 'da7f645a6dfc0c72c254f9a0947c7ff8c735e744', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '898e5e1fbb6c7ab6cc38397d82c3a6b70ec69a6a', htmlFor: "switch" }, h("slot", { key: '08a1e09c7a84348b5c830fb2b03c5ed019db8953', onSlotchange: () => this.toggleLabelGap() })))));
     }
     static get is() { return "ifx-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-advanced-version/filter-bar/filter-bar.js

@@ -88,7 +88,7 @@ export class FilterBar {
         // Calculate slotsToShow safely
         const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);
         const slots = Array.from({ length: slotsToShow }, (_, i) => (h("div", { class: "filter-slot-wrapper" }, h("slot", { name: `filter-component-${i + 1}` }))));
-        return (h(Host, { key: 'b117a185a20cbc45e153b9752a887c3bb6d17429' }, h("div", { key: 'f8796d66e265e9b5875c8809d2a71938031d951a', class: "search-container" }, h("slot", { key: 'b6855372f8dce7052467a7473078d625244c3740', name: "filter-search" }), " "), h("div", { key: '938aee9e626ccfb80d4f3f75b30f3e9112323f28', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: '484f7bcf983e77d6d47b2dfceb33d6dd036a47d4', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: 'd587fe0e1d05f5a7a70ae8e61022bbf35376faed', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '5ca035998b3246b0e0a5aad7612c63b063a5022f', icon: "filter-16" }), "More filters"))))));
+        return (h(Host, { key: 'e431941014bc2484b77548561545d55a2b1fe531' }, h("div", { key: 'ecba3ad88721cd21d85dbb21d5ce240f4a73882d', class: "search-container" }, h("slot", { key: '8fd8b15b99b2751ca46244eab417117cad8aadce', name: "filter-search" }), " "), h("div", { key: '9b05f4dc5ff393349db76fa9dd0980c42a0d29dd', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: '8359fd986fc5501acf4f22b4c463f7fa44a4e50d', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '7d9665eeb20da87890ae5883d62bb805d26a4014', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '3b79eaf99d0386aa4342261c1349f795a32af827', icon: "filter-16" }), "More filters"))))));
     }
     static get is() { return "ifx-filter-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-advanced-version/filter-type-group/filter-accordion/filter-accordion.js

@@ -31,8 +31,8 @@ export class FilterAccordion {
         this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);
     }
     render() {
-        return (h("div", { key: '7754d7c36bb9eea79371f037410ca75afcb54664', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'ec826e4dee812a75e9c87bc62a1dcdcb7e38a58b', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '145fbd10d3c65cfcbec9ecca6c3de349819f79b6', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '863846a7a948d511c1e034066b72eea93183095b', class: "text" }, h("span", { key: 'a17db14df54f36ee59208780312e0c57f5021702' }, this.filterGroupName), h("ifx-number-indicator", { key: '4b1ef57b8b17bdd69987174dad5c9d4582ae2337' }, this.count)), h("ifx-icon", { key: '6622d432718cf216b66070ed8c1f64c28c36a359', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: 'b7d50585c32cabafc9a492b04fc471bb9ac59aad', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
-            h("div", { key: '41416437fa435de25ddddf25782ec09543a30082', class: "filter-accordion-container" }, h("slot", { key: 'e9ad9abd5453da697f27196fd7795f1fad25adf2', name: "list" }))));
+        return (h("div", { key: '629ff7cd290839013e522e6051375a3c0c0d6adc', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'bbecee7853dd8b29ba2fdf996d733c1b8ee88122', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '24b75a1554874f9075496604dbdf53c6da4bf39c', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '0350a1f14bf769cb24f0380d126e83a8e28d56e6', class: "text" }, h("span", { key: 'ee8511c00fbc73b0ed799d91b569e7b273f79e93' }, this.filterGroupName), h("ifx-number-indicator", { key: 'e6e729cf9a4aa2232c4769f7c0aa81eedd83d6f0' }, this.count)), h("ifx-icon", { key: 'c11cb1d518cbc9862249d6826fa2e43259546a8f', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: '2ce76a3a593d990467f69586e19ccbd13f8c0633', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
+            h("div", { key: 'f03e2083a7b76145674896766df67c533f5e50d1', class: "filter-accordion-container" }, h("slot", { key: 'aaa6d9c51658d77c67426ab72d9923f2bb47da61', name: "list" }))));
     }
     static get is() { return "ifx-filter-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-advanced-version/filter-type-group/filter-search/filter-search.js

@@ -23,7 +23,7 @@ export class FilterSearch {
         this.ifxFilterSearchChange.emit({ filterName: this.filterName, filterValue: this.filterValue, filterKey: this.filterKey }); // Emitting filterKey along with other properties
     }
     render() {
-        return (h("div", { key: 'cfe7b2a12467e7c3495a24abb05d89accde5e860', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: '89db35bb808e482336fcb4c717fec5a28bf9c6fb', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: 'be38824cd344272f3802b072e66951774163a127', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
+        return (h("div", { key: '25e3682646f9df4b98f4dfa443094a0a67e057c9', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: '2c100373f6d18a202fb8773a5043da8c5bf7aef8', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: '79dfefc58eb7c9358c30b4efb228972259f54cd1', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
     }
     static get is() { return "ifx-filter-search"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-advanced-version/filter-type-group/filter-type-group.js

@@ -119,7 +119,7 @@ export class IfxFilterTypeGroup {
         window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);
     }
     render() {
-        return (h(Host, { key: 'edbac51db6b5ae00d8e7a9ba1a53962ebb84b87b' }, h("div", { key: '5592b17c7366491ca728386c533f2adfaa34cf4e', class: "filter-type-group" }, h("slot", { key: 'eb61d5f7b0456407b7a34ce9eb9bdbdeee453030', name: "filter-search" }), h("slot", { key: '0d7dea3702039baac775d7567179806aa7e12be8', name: "filter-accordion" }))));
+        return (h(Host, { key: '916b3a7829bad23ceedfd337babba88ac0edb439' }, h("div", { key: 'fd5c72ecc58cf511d172d6626637899b784d3595', class: "filter-type-group" }, h("slot", { key: '92a3764d6c22f1a04bc5c733cde51e19f372ad1c', name: "filter-search" }), h("slot", { key: '6531bf319095ffeda45fb01a1647ec67cd4d76fd', name: "filter-accordion" }))));
     }
     static get is() { return "ifx-filter-type-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-advanced-version/list/list-entry/list-entry.js

@@ -13,7 +13,7 @@ export class ListEntry {
         this.ifxListEntryChange.emit({ label: this.label, value: this.value, type: this.type });
     }
     render() {
-        return (h("div", { key: '09f64beb713acdba449f1f48573220b17d45ec54', class: "wrapper" }, this.type === 'checkbox' ? (h("div", { class: "list-entry" }, h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (h("div", { class: "list-entry" }, h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
+        return (h("div", { key: 'e70b6254a413c53beeb3d50f2309ef546b99747d', class: "wrapper" }, this.type === 'checkbox' ? (h("div", { class: "list-entry" }, h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (h("div", { class: "list-entry" }, h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
     }
     static get is() { return "ifx-list-entry"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-advanced-version/table.js

@@ -354,12 +354,12 @@ export class Table {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';
-        return (h(Host, { key: '6f260fea85a12b7b260cc1ceefe09254cfd1917a' }, h("div", { key: 'bfcbcee601d89d38c9a38172d62182893fd97865', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '202b73c02cc3a95d98320dadf5b2e4592b14f9a1', class: "sidebar-btn" }, h("ifx-button", { key: 'b2b854568661fa9ce40945c44249233415aa52fa', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'bfec6fc8bac8fb7e13941413270bb57154ca3189', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'd9f1f522730746436d1196db24a230b00082f020', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '62b21b69dd689f34b2e8c9f5ec4c7ba65184a14d', class: "sidebar-container" }, h("div", { key: '37889001862bf4a1e68087c2106755017791ec09', class: "filters-title-container" }, h("span", { key: '1fee3e3d1377bb20347fe478c29d130f412ed443', class: "filters-title" }, "Filters")), h("div", { key: '0380ff42c66254c0f0181db2409d4881d696a64e', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '7a1a9daa6d018bb1925f0639166a1732566f39b1', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '90199deb0c1a079249a7a0c00cd46d699c7c0c29', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'dfe4575a69423c3b4c4cd3905fc60ffd6fe71533', name: "topbar-filter" })))), h("div", { key: 'e2209ef5304c97368d9671ca0ab02eb385754b91', class: "table-pagination-wrapper" }, h("div", { key: '0dc5845eb702c5da15239f3e54ad17db58fd436f', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
+        return (h(Host, { key: 'f52cedb5536c5c76b9c13b87bc7e037ea1e57429' }, h("div", { key: 'c75dcacbb20da8b395b3054264c90d6571faae9c', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '5dc68aaa74e81a6bb83262cc71ea89143650138f', class: "sidebar-btn" }, h("ifx-button", { key: 'b47af364bbcbdbcb846ae0f3ace19dd123f520a5', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '4b64e1a1744320a0f7f90ce4961d874cec5ed15a', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '606121283dad0974e17dca8e09ad160132bdcbd5', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: 'cb4d84685b6664a72e361e792ebcbe9b0504eb52', class: "sidebar-container" }, h("div", { key: '99ddeb1e990916d43568dd890169c6a6ba5676ac', class: "filters-title-container" }, h("span", { key: '6f7cdcfb9ff0d53d6200027e79dff8e80da16d0a', class: "filters-title" }, "Filters")), h("div", { key: '72d69db1172d8ef64881ecb276d8112fb688aadb', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '586b2c92ecbc1c576a1084f1a2f12d20d8299841', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '631bf50e06033bed8dc82e1c312e20e3d46067fd', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '36e8bce9cee982a3e90318ff88b0ea5e951a1be1', name: "topbar-filter" })))), h("div", { key: 'c72b84450c1a1f38c1d6f21dac3fcb2989e069b5', class: "table-pagination-wrapper" }, h("div", { key: 'cd5a8f61e035686d343ee47fbb1808e2aa78c77e', 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: 'e62ffd51cc0b859a2f98fdc28ba70758b77411b8', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: '58359d5ba1d961cad9de5fba52398b770dd94e7f', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: 'a2bea9f689011cc2801eae67515b2ddb36119ea1', class: "matching-results-container" }, h("span", { key: '44d576a5cc8b9f368d38b6447c23c203d4daa3cb', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: 'fa17a37bd55c2d5bc2a57ac13a30bf39fe86e939', class: "matching-results-text" }, "matching results"))), h("div", { key: '65acff67c72a91c63029c5395b85581d2f749378', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '612d20948b224215e093cab8aed4262d7afa988e', id: `ifxTable-${this.uniqueKey}`, class: 'ifx-ag-grid', style: style, ref: (el) => this.container = el })), this.pagination ? 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 && (h("ifx-button", { key: 'f1df6822abee9af6d7ed6c36b0935773c08b7661', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: '871d0cd91ea691127b02ca25ba7c4e69f2fe9b46', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: 'b2aff28769651943a46d80124138e84ec8b607db', class: "matching-results-container" }, h("span", { key: '6894e6025a35c432696f34cf281a718bdd0c8ea9', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '46fda43c32c00853c836424e3d9a88161fae18ee', class: "matching-results-text" }, "matching results"))), h("div", { key: '8b4a6ccd339952cc5dbd051819d273644cf4212a', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: 'd5aa8bba250f41da62ea9fd87afbcaef496d4c1a', id: `ifxTable-${this.uniqueKey}`, class: 'ifx-ag-grid', style: style, ref: (el) => this.container = el })), this.pagination ? 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/collection/components/table-basic-version/table.js

@@ -143,7 +143,7 @@ export class Table {
         return {};
     }
     render() {
-        return (h(Host, { key: '50fb2ca2aa8f4761d78a1f5512ee6993696731e7' }, h("div", { key: '0b38c17440f92272d55662b9c689c220206038af', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '4c801f8c7bb383c18ca87ed67428b97cf96232ec', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: 'f9d1f9c00a9f0ba18b4ca0a68bd8d3fe41f2838a' }, h("div", { key: '635616c2f57c75673b8dd37275d75d8a3fd769c6', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '9aaa22474835b8f84fef538f2488d7fd9f2dfc69', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     static get is() { return "ifx-basic-table"; }
     static get originalStyleUrls() {

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

@@ -8,7 +8,7 @@ export class IfxTab {
         this.tabHeaderChange.emit(this.header);
     }
     render() {
-        return h("slot", { key: 'fce1579da851555ddb9787dc6624dc31b15ec8ec' });
+        return h("slot", { key: '79995022d7fbf77ed5ff5fd1e30fbbf6fe1ece03' });
     }
     static get is() { return "ifx-tab"; }
     static get originalStyleUrls() {

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

@@ -198,9 +198,9 @@ export class IfxTabs {
     }
     render() {
         var _a;
-        return (h("div", { key: 'c56317602ab79d473ba563081bd49e36a9021777', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '9030e79e35bdcb506d94a855ec0b78c2d7b19180', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (h("div", { key: '9934354f1666e6b771cb0ac542818cf0df698441', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: 'b906e331627c99ca6d69d6794e1898611786544c', 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: '14319bf812d826ffe8de27360f40b374a55799ed', class: "active-border" })), h("div", { key: '859599837007f4644dddc7ece388b635cf90b62d', 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: '3461724f72dc2e18f00b41cea138ac6865c78494', class: "active-border" })), h("div", { key: '56987efca5638597a7d1107a8b47b3de1cfcd650', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
     }
     static get is() { return "ifx-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tag/tag.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Tag {
     render() {
-        return (h("div", { key: '209fdb856f30f922cb4253afb4ef4d7b70f6149f', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: 'fa7d3dbb497aba70804c37ef9f09219677e5cbd1', icon: this.icon })), h("a", { key: 'ebed1ae83eba47bb254e6fa7f85d49c717e34b98', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: 'ea857f77b32f30833ee3899ee4147f910e9cf5ad', class: "label" }, h("slot", { key: 'fa2c754f7ae1d078529ae9cfae7f3ed3ec623573' })))));
+        return (h("div", { key: '694509b72889371a08b2b7be6e01fab05c0a33ae', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: 'ebadfd5e47defa3435ee4be99f5bf606fb8cf667', icon: this.icon })), h("a", { key: '7754a9467fbd485590f87ef0d16256cf8e6eac13', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: 'e41ec8eb9b49b44547cae7434f3504423ad0a75c', class: "label" }, h("slot", { key: '5738677f27d87ea21ac65828884a37afbfaca56f' })))));
     }
     static get is() { return "ifx-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/templates/template/template.js

@@ -128,7 +128,7 @@ export class Template {
         }
     }
     render() {
-        return (h("div", { key: '1718c08bf77e39ea233584ffd8820f00a1d17f3c' }, this.isTemplatePage
+        return (h("div", { key: '669f84cad2fce5845e79f7556a64e9a566bd8918' }, this.isTemplatePage
             ?
                 h("div", { class: "template__page-wrapper" }, !this.repoUrl && !this.repoError &&
                     h("div", null, h("h3", null, "Your repository is getting ready.."), h("p", null, "This will only take a minute.")), this.isLoading && !this.repoError && h("div", null, h("ifx-spinner", { variant: 'default', size: 's' })), this.repoUrl && h("ifx-link", { href: this.repoUrl, target: "_parent", size: "m", variant: "underlined" }, "Your repository"), this.repoError && h("div", null, this.repoError))

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

@@ -40,7 +40,7 @@ export class TemplatesUI {
         alertWrapper.classList.remove('show');
     }
     render() {
-        return (h("div", { key: '7f313f223e75698fb23569c5f1b638e2be7ed628', class: 'templates__container' }, h("div", { key: '60687101dda3ccc1074377f4ebb15ce17d00cdae', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '6709aa534550a3df90a5ebd7709e7c339268372d', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '0046b65d5ec12ca8541dd335fc08547738658017', class: "alert__wrapper" }, h("ifx-alert", { key: '9abff4236fc894cfd62ceaff8c31ede82cf619fd', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), h("h2", { key: '92dae5ac00d3b350681cd38c1d1ae2b537fc2210', class: "templates__title" }, "Choose your template"), h("div", { key: '8742b6c129cbc0bcd4ce267d7b05520c0eddfda7', class: "templates__wrapper" }, h("ifx-template", { key: 'acdac4204ab3916114534e7941d2477257d03912', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: 'a7e72c71310b5d8207ca1bf9ea27168215b0d5f9', name: 'template-02', thumbnail: this.wizardTemplate }))));
+        return (h("div", { key: '529052af159ca7cda55846cde6fd5c25a925aa9c', class: 'templates__container' }, h("div", { key: '47130a5357c4181e9b2bdf49ec57d378f8912bc3', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '825e7c1b650599c1be481d4155631fec72de32e3', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '901a999bf3ddd2ba95d06ba280f6483746601a67', class: "alert__wrapper" }, h("ifx-alert", { key: '8cc4870725b704b533414f35a2c69600e2fbde8a', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), h("h2", { key: 'c4ffc447b64c939eabc261029378ec12783bb3a1', class: "templates__title" }, "Choose your template"), h("div", { key: 'd92d19ee098e75fbcae7c060e3b7e27236e9c949', class: "templates__wrapper" }, h("ifx-template", { key: '9797789aed9b2a2b90cc24d4c44ef9dce47f0c1d', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '488b0e53721ef44cca4afb5748aa19ff187964db', name: 'template-02', thumbnail: this.wizardTemplate }))));
     }
     static get is() { return "ifx-templates-ui"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,12 +46,12 @@ export class TextField {
         this.handleTypeProp();
     }
     render() {
-        return (h("div", { key: '76e7f216e8361a53384a492bd6e4c39c6f9f75f5', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: '1472ad88e2fc12d5830723c09586447d39f2a00a', class: "textInput__top-wrapper" }, h("label", { key: '675a7ac96f39ef9c465dced8cbba0c2982906d17', htmlFor: "text-field" }, h("slot", { key: '65d3ffb13fa238a3b6aebe82c5f74ef25284e170' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: '32d33f32a95575be9e0b30aadbb2951a4c247a6a', class: "textInput__bottom-wrapper" }, h("div", { key: '925fa9009aa711182ae3712d7813ab9a1ec7fdef', class: "input-container" }, this.icon && (h("ifx-icon", { key: 'c81cda31dfaf074abbb1e5897acb9c57e1f15d81', class: 'input-icon', icon: this.icon })), h("input", { key: 'e905b444d14735de350722b358a2610031f64940', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: 'text-field', value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
+        return (h("div", { key: '3599ec524609f1704b13a3cc1ad2be21d1a0a893', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: 'be8d47908ef9a92b6b50d2d211d8298913df8fe7', class: "textInput__top-wrapper" }, h("label", { key: '66c9ae0bff40234eca2bf153ce915ff0be3c1039', htmlFor: "text-field" }, h("slot", { key: 'e689cc64ce3f58812de50ea4fca2e6289d219d42' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: '96a036107787dc11f9b2afa0e32e51a84e189e7b', class: "textInput__bottom-wrapper" }, h("div", { key: 'a62d8f712f252a909ebc91b102f3faff21e5fd53', class: "input-container" }, this.icon && (h("ifx-icon", { key: 'd9d0cb0cb996129093079e8f2f72770142acf5ba', class: 'input-icon', icon: this.icon })), h("input", { key: '94ab4fc5664e07cca0d63da0cf1c6a806e22f4a8', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: 'text-field', 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) && (h("ifx-icon", { key: 'a3341fa525ed4d88104d82276bdda0c056366e60', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
-            h("div", { key: '7281eb13daa85796390315f4ea48f7dbc33d6d66', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
-            h("div", { key: '04ca69e3b1d44f1988384000c8812f9b19117a0e', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
+              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: 'ecdf09f80b352bc554f22c3fa3bf335471c974af', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
+            h("div", { key: 'e62b4045c2ce5cd0b185d622ccd9872af4f43631', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
+            h("div", { key: '3c6aba4b9f718967998e9aeec9e134c9be4cbebd', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
     }
     static get is() { return "ifx-text-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.js

@@ -44,7 +44,7 @@ export class TextArea {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '0f5bf5d56ed26002f15ecc9582ee5a23b9f7c4c6', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '560e1678ddd02cb1bf0229ffa17a61ffa0c039b3', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: '4e66c7c6a52428ef33dee14d4346ce9f9076e3c7', class: 'wrapper__textarea' }, h("textarea", { key: '9346dad809f595081723e77d18fd0b26c1653267', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '8946de96db794c98a5e004da191e8ca38921d403', class: 'wrapper__caption' }, this.caption.trim()))));
+        return (h(Host, { key: '8d8bf94b02d890cbeda65f235359dcd37c76db66', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '3b31a2e6438cd6a19baf98078b320faabddcf127', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: 'eaec09275bc995c7fe306dadb3e6e19862eac48e', class: 'wrapper__textarea' }, h("textarea", { key: 'dcbcaeaf196f124cbe59308e6eabd544aa3a3d05', "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: 'c3704e46d9d28bca7a7a00ce7e81cb1b8af6ef3b', class: 'wrapper__caption' }, this.caption.trim()))));
     }
     static get is() { return "ifx-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -148,10 +148,10 @@ export class Tooltip {
             'tooltip-extended': true,
             'visible': this.tooltipVisible,
         };
-        return (h("div", { key: '795261177635c90ede6d1995541ce8268f2e5262', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: '29726682709195c97888e62b36d43f6244d22a2c' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '54c229be4a0171c4b9e186f7628fce4ab3aeb5b9', class: tooltipDismissible }, h("button", { key: '374d309c74630b3f3e9f80294c0f363562ce65a9', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '02efd77155cc94b6ecb367fcb375cbf600e234b0', icon: "cross16" })), h("div", { key: '3b96437efad72d370939ed08d70b84d404380874', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'fe62bcecd51d532b08568099bf96946b4eb9f611', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '36579a2f1d9dd9c7c90c3dca8315e29dc5211437', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '0044d3c563e9626f499b1907952e1815f27ca703', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd21890a5123322e1a7624490911b2a1004d64b8f', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
-            h("div", { key: 'efee60a0cfe549c815acdd34cbfd06f181531c1c', class: tooltipCompact }, this.text, h("svg", { key: '0d992bbf5a4afc6f81769a00b8fcfff07eea54e1', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f029785003cf5b9ab72c9c97fa9288d27e6b1ac6', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
-            h("div", { key: '095a979593f3ea948f92a191b316955d65e79871', class: tooltipExtended }, h("slot", { key: '8cd096bf58bf84f36eade7821029847553e52ab5', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
-                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '6839331b2b82599e8fffef8e1faab2c071f7eb3d', class: "tooltip-extended-content" }, this.header && h("div", { key: 'ab6e181488ed0f2b382b867d789a0a8824d306f1', class: "tooltip-extended-header" }, this.header), h("div", { key: '74c3fcb2d270f4d20d383434990667aa09f35894', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '94616a0710484992a1289501d3d744ce6dc89020', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a261fb73ff98c22d389575ec8dd991aebbaaba90', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
+        return (h("div", { key: 'c733742aac15e3df1d68c8216cb9393f78576b7f', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: '4e0859599b72562cc0de01b9b04370c9811af01d' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '176a0a91c92c1ac76ba252e396a08a468e58efb9', class: tooltipDismissible }, h("button", { key: '144c678961d7dc4732c55e58df1e84dc31a2554b', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '11cbfc406a3b61ef9f0d9fb41fc3b8d1dba32d16', icon: "cross16" })), h("div", { key: '0e4a414924ee7561e3663cecf84b17abe7da0ea0', class: "tooltip-dismissible-content" }, this.header && h("div", { key: '848d50adf71e813ca93ce2dafe0c94bd731c0323', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '48427dda9bf556a6ed61397f6aa96b6264105f92', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '28551a856ab20718eefae0c2790e2d18b76d5ae4', 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: 'a42ed89cbb70853e9c34e834a7d26d30d3d6a66f', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
+            h("div", { key: 'd903fe5ea87921e698769304f0d6123a57ab5ed6', class: tooltipCompact }, this.text, h("svg", { key: '99cee8ed96fb24171ef0b57ad82889d6cc68297b', 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: '6a120c31b6452939b4d5c3662a465cd98ca5417e', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
+            h("div", { key: 'f0ee16e7c5a647feef0f6fc0db1f7590ea0929ce', class: tooltipExtended }, h("slot", { key: '0fab2a03e19a2e700cfedfed0aa48d866911ee85', 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: '537f27b2a930181e5889118910a5abdce2f29d73', class: "tooltip-extended-content" }, this.header && h("div", { key: '8e8ba83133b817b550467d64e94270426681e8f5', class: "tooltip-extended-header" }, this.header), h("div", { key: '75e760fb14a0ebb3228ff74e4649aa303166cbf4', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'b019e41475b7e6c54b184ce7eca57507ba78ab01', 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: '27e7af7de9a14174a75f16d0a0ffbc2d169616bf', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
     }
     static get is() { return "ifx-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/stories/setup-and-installation/faq/faq.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Faq {
     render() {
-        return (h("div", { key: '11e1c3b24c2b609d92aaa8385c87d8e9bf0e86e5', class: 'container' }, h("ifx-accordion", { key: 'bedcf9c8f32b81ea27ee4b78d710e81648d54ff2' }, h("ifx-accordion-item", { key: '835aa2ce26635726c9d81bfe7dde6e1788396b03', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: '94055bdd97f878689cbe4dc83eb997279190e6b3', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: '37aa59d4c8994be76df7c306a8b888e2ed70188d', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: 'bd09cfcb30cf3ae2c0bd36e5d0429616cfbba6ac', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: '84912ca7474077e065c7b12e3427d79e52256be7', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+        return (h("div", { key: '78016d6f4d656ee4ec78fab13e87a019e2ab0c10', class: 'container' }, h("ifx-accordion", { key: 'b61e69ee66a8efa42cff9905c00ac0b72e7572cb' }, h("ifx-accordion-item", { key: '07ed56f1848af52590aa7252aff7061da1238133', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: '0125d6de01394e383781659288201b1f01ec6287', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: '6276e2194088fea270dd0241379bdd5384dc4776', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: 'bd06c5d5ef5022ff7b6776d7681a9fd2081b32a5', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: 'add48d505711028c2be543f9c0a56737d6cea41a', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
     }
     static get is() { return "ifx-faq"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/ifx-basic-table.js

@@ -179,7 +179,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
         return {};
     }
     render() {
-        return (h(Host, { key: '50fb2ca2aa8f4761d78a1f5512ee6993696731e7' }, h("div", { key: '0b38c17440f92272d55662b9c689c220206038af', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '4c801f8c7bb383c18ca87ed67428b97cf96232ec', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: 'f9d1f9c00a9f0ba18b4ca0a68bd8d3fe41f2838a' }, h("div", { key: '635616c2f57c75673b8dd37275d75d8a3fd769c6', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '9aaa22474835b8f84fef538f2488d7fd9f2dfc69', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     get host() { return this; }
     static get style() { return IfxBasicTableStyle0; }

package/dist/components/ifx-chip.js

@@ -1,4 +1,4 @@
-import { C as Chip, d as defineCustomElement$1 } from './p-650841dc.js';
+import { C as Chip, d as defineCustomElement$1 } from './p-b654ca64.js';
 
 const IfxChip = Chip;
 const defineCustomElement = defineCustomElement$1;