@infineon/infineon-design-system-stencil 33.4.1--canary.1855.9072f261ae1648f3cac7f0ecf35a72e7d31be400.0 → 33.4.1--canary.1855.420b7862d699aa915f9b73ca7df50510dc35789a.0

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

@@ -121,7 +121,7 @@ export class Pagination {
         this.initPagination();
     }
     render() {
-        return (h("div", { key: 'f698a31b53410da1c2e13fcf96b86369033c4342', class: "container" }, h("div", { key: '71542655e2e76337e866c2266ca32fd56fa041af', class: "items__per-page-wrapper" }, h("div", { key: 'b71fc0a3945051dfa321fe56bdf74424d0f4032e', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '75afae25208d194f1f8ebcc9b0f462115ccb21ba', class: "items__per-page-field" }, h("ifx-select", { key: '21524346259b19f24ab3daef379acecd519cfd28', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("div", { key: '076eb08f4117de8b8fca19c809778e247b4dae18', class: "items__total-wrapper" }, h("div", { key: '0e13cab91e2dcbc84643a405ae34fdbe6c5ae35b', class: "pagination" }, h("ifx-icon-button", { key: '1e898b6189eac137ea9e420d4a5982afcfb35cac', class: "prev", icon: "arrow-left-24", onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: 'c336abf1b7d28c83f9b0176468da44f36b902daf' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: '7e8ad73143c1b4c2c5ccd9cfc60a2549291467b8', class: "next", icon: "arrow-right-24", onClick: () => this.changePage(this.internalPage + 1) })))));
+        return (h("div", { key: '2db22cea600f9d93a048dbfa6748f6c0a12aa5f5', class: "container" }, h("div", { key: '33a7bf4cc2178bd8777264177411ba19cf944a78', class: "items__per-page-wrapper" }, h("div", { key: '9d6bcb6005180b6cd06c6b619317283d047b2f68', class: "items__per-page-label" }, "Results per Page"), h("div", { key: 'd468243b87792d9543481022c7a4f0c5b3fdd805', class: "items__per-page-field" }, h("ifx-select", { key: '48b87e0a1dbfcff4b9468b134f0f3a609c7b2aca', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("div", { key: '11c0559524ac4239d4239e97088c7b8f7dee813e', class: "items__total-wrapper" }, h("div", { key: 'a0c52f73524aec6c33b4af18010e8783e1cea524', class: "pagination" }, h("ifx-icon-button", { key: '40a755dce92de2dd8d14846bcf2269a0e74ff6db', class: "prev", icon: "arrow-left-24", onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: '24cd5cb3dfc5b33d809099efd1b979c24e19d676' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: '4c8276b66ff84a6280543066c48e6eb88310de83', class: "next", icon: "arrow-right-24", onClick: () => this.changePage(this.internalPage + 1) })))));
     }
     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: '6da18ec09a92335028266274fabb0341e66e7684', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '0c69f74132b25256e18106226c43c716deff36ff', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '605abc300375e1beae1e2d7bb196b20c919d274f', class: "label" }, `${this.internalValue}%`))));
+        return (h("div", { key: '2eca6f70ca084387ee586e7758ef9d9658c52c1b', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: 'ba8a2378b6b0d16ed5c5423f76dc2c7073e7943d', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: 'd3a93894eeed65e5e9211e007ecb812a5992319a', 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: '2c8673c9ca3c2010ae527fd6809776726a50d89e', 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: '3e59716b61bfd3e48d774ddd105a7886e09cc47b', class: `radioButton__wrapper 
+        return (h("div", { key: 'cb8013aba3a9cf425b0248db8a7128888444566e', 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: '5a49ef6b37fdcc7c890aa537e1c0a655d015d94c', class: `radioButton__wrapper 
             ${this.internalChecked ? 'checked' : ''} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: 'b661375c0b0beef23eee4820d6aa8e40106183d6', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '88b416fe3453d8488ea5e863815b35c9336568d7', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '6561e5e8629b0a25373f14c406ce3d50b245f1a2' }))), h("input", { key: '4fb75fa4de6bdc722390503ca6d7333dd50bb074', 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: '378453dd15442d1f8eccf902a5782b3b2bedf014', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: 'c75daf157328dc01f9b3c5dd902dfadad4a42429', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'a775312d6de569972bafa22faa3eca5f28d5488e' }))), h("input", { key: '3e7e5a463cba5f66ce9309cf538d37f5831d150d', 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: '46dcbbe9dec0247e4536e13c87cb69b6fc1b48f4', class: 'radio-button-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: 'd48717d8473583c91c7704b3f0d54c106f79152d', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '195f0d7989054318bf12aa4cfc5f59a91cb52e89', 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: 'c7e22711c0ad382ae5bf80d1c19d228c44c51aec', class: 'radio-button-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: 'ea26c8ec314cc3a2e75af3b2f234f2510179b4f2', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '7f502f9c5600697003675c1be854213c83792b98', 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: 'e8ddb4d12c62a04f624d89b8ebe945ccce3578af', "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: '751e06cbb3de13b0abce4cda3419a35b9fc8ddda', "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: '3e0e6d6a5488e87de12e20f4db82457923e48832', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '2703ba47c7cf088baa3fec9260f08a94ba6f5010', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '2330ded6b0dce2861a0103cf8ba449dd9d270bb2', icon: "search-16", class: "search-icon" }), h("input", { key: 'e5a37f1b246f2a8e488b979aaca1e6c0dcd9b442', 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: 'ab26f0cfe5f6ac53e721556b8c5541da19fb1795', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '36c3dd4d8c104c5ff50468e2af722e2a3518b014', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '5c39c1ef5966879ec8943500acf2eed059048f4f', icon: "search-16", class: "search-icon" }), h("input", { key: '0d960e2d3f9724583337d772fc0d941e05df1449', 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: 'eaa13fcb360a470cd96b764a1f28538fdb91053f', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '406a6e834db3705083875b31e2f3ab83b07e28df', icon: this.icon }), " ", h("slot", { key: '1b6779910d5415c1c92b8fc2adc56191ebfc9703' })));
+        return (h("div", { key: '20488abc8976a2bf516b4e27f212832c438003fe', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '5bdef8744a3cace9e42b9a8e38e093e93f380ebf', icon: this.icon }), " ", h("slot", { key: 'd7372a9c9d68d6b7aebec07e62014d8afcdd0788' })));
     }
     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: '290aff95bfb6edb7e080b9809e80122c823cda82', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: '1a0d5955b7f0244fddd36387ec5e2fe5eb2c8ae3', class: 'group__label' }, this.label.trim()), h("div", { key: '01ca3d147d9ae4eaf6d17280fbc3675c3a175186', class: 'group__controls' }, h("slot", { key: '7a82a1cc1666663cbdd22dcf79c706e467fb5ae2' })), this.caption.trim() &&
-            h("div", { key: '246cc338229e42f1ff1935127c9158bcf7cc030b', class: 'group__caption' }, h("ifx-icon", { key: '02ce0fd86abbf4b67c23faf8742aebcf82cc6708', icon: 'cinfo16' }), " ", this.caption.trim())));
+        return (h("div", { key: '21003bb4954c9faa1677e53ab2426c1874e556f3', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: 'ef74f35f636afbdf91fb2610041aa4afee681d8f', class: 'group__label' }, this.label.trim()), h("div", { key: 'cd7bf96516061338ed4bc70ea3ae2ceef116a46a', class: 'group__controls' }, h("slot", { key: '0f62b33ed5bd4266ef42cbbb48c134e47cc89336' })), this.caption.trim() &&
+            h("div", { key: '13dd77cedf5ac8a0dadbacb5d7a6ffb7c09fe2f8', class: 'group__caption' }, h("ifx-icon", { key: 'bf86855390812aa58b9e1a8ca3b89612f33d06fd', icon: 'cinfo16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();

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

@@ -219,9 +219,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: '6234aaf4f44a90879706bb6fb91e6a389739fca7', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: '6e6b33f4a563b940b77ede289a115415f303da2f', class: `${choicesWrapperClass} 
+        return (h("div", { key: '567e0b578cba133bde34d862abeb39d0dd8c05b7', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: 'b77fc0c1d24954801862c66daccd642d76fe10ec', 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: 'f585c6d7b8d54cc2c1f7df9ccbfdd8487a5bcde0', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '4c42d1324917c48de7674edf69d2938cda81eab8', class: 'single__select-icon-container' }, this.optionIsSelected && (h("div", { key: '679db91089208e423b7f42f7f1dd43bcf4886646', class: `ifx-choices__icon-wrapper-delete ${!this.showClearButton ? 'hide' : ''}` }, h("ifx-icon", { key: '9d23a85b79b98803d6bc1e9f0bedac5509a99cf8', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '35bb81ecc7a0015f20a7794c8cb2397e614b879f', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: 'cb2a5dbadf2d62ef9a23a061e650e83316d36e61', 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: '600f4bb07e626c53cb8cebdbd74dcc23c9113521', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: 'cf6651956906c10cf55ed1fc0015160173b25afa', class: 'single__select-icon-container' }, this.optionIsSelected && (h("div", { key: '42d1609ecfff0547e4a18506ec169523f14eee83', class: `ifx-choices__icon-wrapper-delete ${!this.showClearButton ? 'hide' : ''}` }, h("ifx-icon", { key: '9b4d6852021449749147b4b3ad9e03452427639a', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '0d92ad067db38b86fc94f8d3c8e693c68a08e699', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: 'a36f5013e0dcc89b207f59a9f0e65e2fd8982e75', 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: '9d462640d2c8fd59397eb36c7c587e8b6a589053', class: "ifx-slider" }, this.leftText && (h("span", { key: '5d791c9781ab01bf88c5813b2714e8fe2ed16c8d', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '71f75e195f34a0b1151cbca50daed5c6f5dc58f8', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
+        return (h("div", { key: 'e60141906839675d8d7cef233343436877740bc6', class: "ifx-slider" }, this.leftText && (h("span", { key: 'ae49153179044da460d12571410e24f3a0de5442', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: 'ee863f5430218cac488a0558257b7d2678936b9e', 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: '63aedc94b51ae31dd94eb77e9e4966021413801b', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: '3dc356e52370c95391a2c9c6debbbe12e6d990a5', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '122a67881d636026df5583a76268eda9e703883a', 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: 'd68f775f4dbf8e51e5ab8a89dd17236c26770f60', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: 'a25c202715c0758ad3881262db1f9ecd452161b0', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '3253969f836a3b311f0645d4e10c4fd89d13f91d', 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: 'b948585482d47d1bb313f4dd4d1690d32e3575f2', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: '7f8ea30f3fea0bde1ceeffdb2986843bbb3624e9', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && h("div", { key: 'fffc99fb58e98c4abdba3f70b9c14723dd243324', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '8373b17d691f5632b45d292cb0d816abf64903ee', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '421ec93ecbc6cc3d1b6ce4d089f00b00f527b236', id: "spinner/conductor" }, h("path", { key: '0170c636c10df928341720132679475dd9bc1e1b', 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: 'cfbff2813b981725dae76ed251f6563010d64d80', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: 'e6a6ca1b543a3aeb1b02226fdb40e0be12aeba34', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && h("div", { key: 'f34ec6a5f1c48482e79a4a440d771409ae3cc0e2', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '2b09b17e99618ed8464251116d4c256b05c4a0e5', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '370a105dbf227bb1c19d9fce65b636e7c9b85c4f', id: "spinner/conductor" }, h("path", { key: 'b9aa2d8a68857c9c013950680af81c231f43cfd6', 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: '016caada90b8a8639b0a7184c21548682bd30605', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: 'dcda29c247595e2905999148230c46c3ae50380d', class: `dot ${effectiveColor}` }), h("p", { key: '9d2c67e12d5be39b39bee6636c59cfd5b56471ed', class: "text" }, this.label)));
+        return (h("div", { key: '8c47a8a489d446e7f901eeec4909c1034a838311', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: '0426cac15e805d0766b123c724775d122bac513c', class: `dot ${effectiveColor}` }), h("p", { key: 'ae8a2fda55fd873d8d7d3bf85f61fc0da6b73ddb', 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: 'f7d4bcdd926b93ffbf818526e56c6ff4624b454a', "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: '603484dd098009af351637b23ed898a9930fec18', "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: 'f5925fa95451cdfba4338ae2407766ff63662216', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '1f07c0dfc36c59dd1b09ead67eff12b56b77b548', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            h("div", { key: 'dd6283f07f7a444ea3a210ff00547322163bc4f2', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: 'e1405fbd29222e5b3c3a67a4f362022e65b12e67', icon: 'check16' }), this.active && h("span", { key: 'd9f91edee3154a60b0b00af942a6cca1f7285b7f', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '2c55646b793c29587b9c0280610a1206ba8c1e16', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && h("span", { key: '5bc6166c06505ef74a7215d6aaa4e186350795be', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
+                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: '0732df62ab68c7ee42d0a14e1ebc72a1d280a36b', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '44054e9fa675579a92b0744f824692c108743ee9', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
+            h("div", { key: 'e337ececf801eb0ecc3ef3bdb85e3b590f7d51e5', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: 'a4f3ba01913d0320084a1a245634dd1a3ce38140', icon: 'check16' }), this.active && h("span", { key: '5cf8536ff33b38b99bf6e516abed2cb71d005e30', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'a82d3210924625dc11019e9fcc594096f4877ccf', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && h("span", { key: '52f2e8e74ee106e526e9c0823bf4c9c611c4db81', 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: '1131831a229b214c48cd8b0e01ad9e2b7edabab8', 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: '0d323958c86810be38cb75cc4a748cf949fc3fbe' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '50bdaecc5f036e4dd90fe5688331f74c54de243d' }))));
+            h("div", { key: '901cea7f3cd2793003198ce63fa95df151965f77', 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: '220cce65e6113c6fd68826cbc4abb0b2d38b9f69' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'd7fe0384cc4da72a2374345cc72ec71250b156ea' }))));
     }
     ;
     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: '8d7c53aafb1242df506633704f4a98bfe5d0d706', "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: 'cd36c24f161657c163e0541e8d20a0478f45833c', "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: '0461356a428bb5c79c9f480bc3400a12c38527a7', class: 'stepper-progress' }, h("div", { key: '63753e66a590b498022eccd93bd4dcfe81aad289', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '3dd5c6f7f5d8bad3bb965e03913ead987a2b106c', class: `stepper-wrapper` }, h("slot", { key: '1143e55348303a60fc20f58d82afab9065fd2a88' }))));
+            h("div", { key: '21fc70f72e0a5ac55b54e0b6a0dee37ecc82e61a', class: 'stepper-progress' }, h("div", { key: '89f1650fad1ad5505c47c658a5a1ddf88045a80a', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: 'dc59b08b648ba12feb1dac02a1ee232740f2a70e', class: `stepper-wrapper` }, h("slot", { key: '029b06604176b74e6f78d6d615562110f22346c5' }))));
     }
     ;
     componentDidRender() {

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

@@ -63,7 +63,7 @@ export class Switch {
         this.internals.setFormValue(null);
     }
     render() {
-        return (h("div", { key: '45dd28992dfa6ece91649ee16d62d334e34d30b0', 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: '9116b1e930ff88545e22a668c13ec8fbdcdb8cd1', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '589fc74a8db3af5aff870ea9fd0f09f3a9f8b0ec', class: "switch__checkbox-wrapper" }, h("input", { key: '8e14e74348b2fe1716d465548b42a7356aee314e', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '139a898172b6d56a5fd8f19853bfa57cc10a209f', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '9897cd9770dd35c4bacc004b16f6a552ba1153fe', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'a83b592a73dcef83baa5163c7df00a7f83d5feae', htmlFor: "switch" }, h("slot", { key: 'e719548c1bb9de8ee591645ed7b5c72c4f1fe8ef', onSlotchange: () => this.toggleLabelGap() })))));
+        return (h("div", { key: 'e41a1059782c6485344cc7660b89703f7ee42d90', 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: '90f3a17558c5082ae3f68d7449591a02780476c3', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: 'eb59db3a9260ff32effb2992e3c5c976f85f71f0', class: "switch__checkbox-wrapper" }, h("input", { key: 'fcda04c7515a56501f10454f2f089dff301f28b0', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '92f68f613c4f495d43805bcac42e26586af2d2f3', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '50a714eeb67312ac01f28ec2658f9b917ca0a0bd', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '18be81fb8bbf22dceeda37b2dfc9a4d50adba91e', htmlFor: "switch" }, h("slot", { key: '4426b83fb8da2f491b6276ded4d638da3205ff6e', 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: 'a447d53eeaf73f83b974d3c566fe5ffb831abee3' }, h("div", { key: 'bdb768e7b19ae93ec0a956a5a2840821f0b74f6a', class: "search-container" }, h("slot", { key: 'b2676b12dc2f7dd8219be10b9140456a207843ff', name: "filter-search" }), " "), h("div", { key: '3078cfc01556b6770aa22a1640258b31b3e0af1a', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: 'b5fd45a6f66e3cc6f635aca166a3478dcc2c0a4f', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '17634cca9ccb69f930edebd712dd56984ed828e4', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '82bd9b8f762954a6d5b0bcec88d7c31b51d7ca0a', icon: "filter-16" }), "More filters"))))));
+        return (h(Host, { key: '6b6f43a15e34306b15e594b3a73dbcab0ebe881e' }, h("div", { key: 'a444719b8ca1599f2416c3bd9d690731562a7fe4', class: "search-container" }, h("slot", { key: '4d8f9bee4ec182e3c17ebd1714c5ea903bc5e538', name: "filter-search" }), " "), h("div", { key: '4d3755201694ddefe9b4d9d1b7a3ad65036e91b2', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: '5ab036d16a8d8441a586770258b40c8bf6d06a40', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '82fa6ad85af9e6dd5b42d5b9087ab0cd15cefa44', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '23085121e53980f58471af19fd9322f618c58313', 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: 'd68b7f2047e0dedb960fb9e581da4417896b83c6', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '4187dd7f6ab834b8a1ed1bba8e0a8e10d1d10c27', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: 'fa3bdc5a96abcce9218100f9cb58242afd3f6f01', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'f4ea099595b0629efec1387b5c3ba02a04e4ef6c', class: "text" }, h("span", { key: '67b8840480ff24d79953d4b667985814ed2e60ad' }, this.filterGroupName), h("ifx-number-indicator", { key: '4a524a4c8e4befbf539e3268c2173c953a106f3b' }, this.count)), h("ifx-icon", { key: '9b9db64b50fb763586296cf70e622383ac25944b', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: '2f9fd5b2328dc1d95be1d7e3968bcd8f517a50c1', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
-            h("div", { key: 'b3c7b59d03ab9df172010ca20c13aa72b93c8414', class: "filter-accordion-container" }, h("slot", { key: 'cb28e3a31605f5ccb7a4a27de9f0ceb1ff4c3509', name: "list" }))));
+        return (h("div", { key: 'dcee8e0efc95236f519e28d19819ec4ff308f5b6', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '53b7dae8f8a2798408ace40dcf18c602946c1b1f', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '1e8047d0e9808475d8bfaad216fa7d0a1024b696', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '8ca900b6cd9539106789327caef0e26120ecf795', class: "text" }, h("span", { key: '6da0944b9bfca9ad62ef0000da328a4a7ad7c972' }, this.filterGroupName), h("ifx-number-indicator", { key: 'f30c44cd8d704bb030be5fe9992d61bd9274435a' }, this.count)), h("ifx-icon", { key: '212e9e442d4e4a0da39985ec4ed57e804fbd5a90', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: 'bcc8e05d06158818f63f5d10fa505ac85a754f33', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
+            h("div", { key: 'd1756b49a90159e1d24397354e839a01abe534a2', class: "filter-accordion-container" }, h("slot", { key: '4020258a7ed72253cfa34cc53c15b8fe186d1d43', 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: 'b90f631370de6b3933cf7cb5667a453c03512cad', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: 'ee151cc83d0229d1f30bd4d8ed3a614e0cf97d61', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: '8f3dc1c7bab8fdd9aa2f3e4da9dd7a13c2cef03d', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
+        return (h("div", { key: '5580e31d167e1559594e3e1f4580dc6d19dc9968', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: '7eac96b49e4e281c6daf1c74bacd957ec86d01ca', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: '827596a91c60c83ac1831427947305105952fe73', 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: 'bde8198584d6d8af63f5767e374726adc237bba5' }, h("div", { key: '9b88c6a48bd0651d462bca9ed19d19ff58d39e9e', class: "filter-type-group" }, h("slot", { key: 'f2988ba81081de314c92bec5579af4950119f702', name: "filter-search" }), h("slot", { key: '29ba6a86451ba52175b6062741b020756a8c0a9a', name: "filter-accordion" }))));
+        return (h(Host, { key: '88595f680a4453f9d514a0f2f15ccd659b9a9ea3' }, h("div", { key: '71eade5ef05a39413fa51619ca731adc0cc846f6', class: "filter-type-group" }, h("slot", { key: '63021a6178acdb0534ba2dc940a3eb806e4751ce', name: "filter-search" }), h("slot", { key: '90726fa79bcc88dccd96cd0f53d2b17f506897e7', 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: '23908d63232564e0ce19af80f86cd6ec78248b77', 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: 'd3e8cf091f71dc4e2fb56230a807712bc6012dc3', 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

@@ -355,12 +355,12 @@ export class Table {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';
-        return (h(Host, { key: 'ac0963dc55b861b90cc9ef9f28509d6bbbf8bdfb' }, h("div", { key: 'ae73a3b4bd97842d9304896e16a1e8c31d30f823', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: 'afe52955eaac07571d8c1dfe80440b55b8d6476a', class: "sidebar-btn" }, h("ifx-button", { key: '9431a8221cd654ef41af5cf78ffb95f9a3c71d24', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '7baad19f5b1bce6e72909f0a39b651a28fa45c9a', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'f16401e7a7a4aed8b388177ff4d1d49f0df8c734', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '31449e98e45dd4674f8937d7db950d7571dd74e2', class: "sidebar-container" }, h("div", { key: 'e0343d2faae7b3697ee7a6aac248daa18f55f553', class: "filters-title-container" }, h("span", { key: '3560e8d21ee2f1b7578112a54944995a86ddfc8e', class: "filters-title" }, "Filters")), h("div", { key: '77b158ffa4eb2d3f28d3445e86ea2129c611f161', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'ece5b18e737244dd397d6e59b68c150b51fede65', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '8c85b811089139a8600fd720d59b98ee8cedca0f', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '05a6f4ad7f990bc641cd2188a99b16c490251f00', name: "topbar-filter" })))), h("div", { key: '320f62102b6da588c5180700340884db05849cbb', class: "table-pagination-wrapper" }, h("div", { key: '613170963b9b7c4ef150caaa2f1f4c0cabc86dc0', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
+        return (h(Host, { key: '1f9602b1e458ff23e4661c4f6f9e866494694eed' }, h("div", { key: '18fa3c57d04eebd43156c8cefff5b7058a2dd070', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: 'e3976677ee902dfbc4c89335b179bb55d85d01ae', class: "sidebar-btn" }, h("ifx-button", { key: 'f60ac282ed5cf969489dd6fda04be7122ab12468', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '41be23acee02da11f0ed01a50f26acd4af604076', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'f43fbc75fb3e58f146e65e58a825ea41446c3ac5', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '9e1d212949947ccd3fac0586e87c407f1c9023a9', class: "sidebar-container" }, h("div", { key: '0d58c949e5e4cba25ae496d5a8eb180ef3ca04c4', class: "filters-title-container" }, h("span", { key: '659a22e030f5fe01d95ea9775088e833ec436497', class: "filters-title" }, "Filters")), h("div", { key: '5d4bd970d9cef3e8d2bff208efd3aeb283f21392', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '3458deab62dddb25662f106948c58a101ef45826', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '759e808e57dfbc1e80aae2de85dcd27b610edcdb', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'ed2cb556faa84c49c2913d3057d46add4f7dd03b', name: "topbar-filter" })))), h("div", { key: 'ebf34d31be5f73e2a8d77f55ea6eedbb2c22ad46', class: "table-pagination-wrapper" }, h("div", { key: '94f80f4eb9285b2c72679d7babee51b45a41c5bb', 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: '43bf85e75b79b1bc9089742e65f58b4809033c36', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: '61814daf15b830eee87843b8716f24d092823d9b', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: '6f7b50b18912f5879065ec1f0cb5745f4eb65768', class: "matching-results-container" }, h("span", { key: 'ebadfaef09771d779d3ae47915d9ee9d98fd0deb', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '92f97508bbe24429817736de4a031c2251c7822c', class: "matching-results-text" }, "matching results"))), h("div", { key: '51d6942b20705530e42855a6a2695fa06400c172', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '10ec882d54d1b8e3db5b0d8cc4f5dbb176d65dce', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": '[{"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: '0f2dd6082349cfee3a226fa50d8bef71daee35ec', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: 'b3eb80a1e175dcfcbd3aae5ba6d9a00d0209efd4', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: '8f6ef0913da55411c8434b3f434b2d77a0a137d7', class: "matching-results-container" }, h("span", { key: '6d1307a05230729dbcf9d9606833bba8878bbfab', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '832d4800eda22965b05f33895a7efd45dde7673d', class: "matching-results-text" }, "matching results"))), h("div", { key: '3ddbff28a9ccc70346723387f8e78db6f737eb17', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: 'b01f265fdd053f341a4037d8c9211ad2750facb4', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": '[{"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

@@ -144,7 +144,7 @@ export class Table {
         return {};
     }
     render() {
-        return (h(Host, { key: '5142758a2db73f270378e480ad4866b884cc5b14' }, h("div", { key: 'e0e8f0644f34ac4ba61644ecd449f5e926e786b0', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: 'e938e3410c348bbc226d75e07b70a3580486b726', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: 'bb4f66d3a409a2b06cb72f7fdc445df10358c591' }, h("div", { key: '873b1fa7aa2086cc4de9763c001dbcabc649d68f', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: 'a0cfe32c9f60f075234b4e29cbdd56c867699417', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, 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: 'e52aed707a99319c9ad18c84e62e0c4b39d1128e' });
+        return h("slot", { key: 'e5fd073419a55c43e5fd2b845ed721fc5d7e16f2' });
     }
     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: '2532579b64f6c0793930fe2ca74f3f82ea893cb8', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: 'd37add262b53067e493ff9bed2f179aa8e839f30', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (h("div", { key: '4803a10882b336d2786eefa1d66615199c773f91', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: 'f94c1351e56f02a85ae5c51b348398153e90898e', 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: '990d3c7305c176e13991411bf1a5b8dc00eedd1c', class: "active-border" })), h("div", { key: '157857598d040ce424bdf7080f732304a7be6338', 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: 'f425c517053e3ccbc9930385e113682eaef68649', class: "active-border" })), h("div", { key: 'ee8f42e6f2048e7763b8c07323d8d4621b94ea0c', 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: '6d1cee01cfc0afbc8c901c60b8c5e9b63df08841', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: '97052773358fb977de6ab7c79e3dd117cb20137f', icon: this.icon })), h("a", { key: '08ab59105a558ae8cdebd127225855c27f8bfa74', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: 'dd94aa7bdbe9fa78fb0ff94612bab116940ce51b', class: "label" }, h("slot", { key: '18bc9acee526ae3176f04777608ed8df1ac9bd64' })))));
+        return (h("div", { key: '9272e9be4226830193ca2c7c578b8ff6b4d8b64b', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: 'ce9ff797949b26a0100b0a2c345f909b38de2150', icon: this.icon })), h("a", { key: '0b9aca0d27015b25569b597bdf0b6d1c99bc1c8a', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: '32da674af0c5c76dae49c7b425386a035225e560', class: "label" }, h("slot", { key: '5e46712a76752014560351349a937e4bf2561d89' })))));
     }
     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: 'be6f91bdcf65d990045ce7beb573e18a5d25b96c' }, this.isTemplatePage
+        return (h("div", { key: '168d0844f5ce2d89964476d312579e1771c35886' }, 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: 'aa20ee95ed12fbb343fa789a6f0dc419b42d5bef', class: 'templates__container' }, h("div", { key: '425ee9db0e920f0695001e77df30b16ce4559ecf', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: 'c603bf6c9332fcee1a28bd7e2b86fcfd0f7ea82c', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '139b1f664d755f40704ee52a480dc865b338d4ea', class: "alert__wrapper" }, h("ifx-alert", { key: 'b158d48a14a4d04ea6f8a01fc61ee99acd5c51d1', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), h("h2", { key: '4eaefb4224777f59964d20aaaa5643d9eb6f9275', class: "templates__title" }, "Choose your template"), h("div", { key: '8f0ec6ce10235c850a9801140b08da95295ed072', class: "templates__wrapper" }, h("ifx-template", { key: '5ba5ea1e79f0db151e65466c609f305e9d78ed70', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '66e3cca77f82189d2104b6b84434864055513d29', name: 'template-02', thumbnail: this.wizardTemplate }))));
+        return (h("div", { key: 'dc69ec5ae88df9781d1b2d8deae6f63e9230ae94', class: 'templates__container' }, h("div", { key: '23e3cf121644963d2e9fb4f8ee6412567d324281', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '87c39a2a5e879e4257ef8785d740a4ded69bdd38', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '4403c1ec6974adb7b97fb050799a5899411fcd23', class: "alert__wrapper" }, h("ifx-alert", { key: 'edfb5324a6f5d74060a9517bf78bd680b1f0b02b', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), h("h2", { key: '83730e8f99c814b03e912d228d2a580727a6fbbb', class: "templates__title" }, "Choose your template"), h("div", { key: 'edc2d51d615b9c27c32643c07cf48c567be5f35a', class: "templates__wrapper" }, h("ifx-template", { key: 'ab9f760b656e245e2c9e1f20a99ef2f4876a7cd2', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '17c5ee462dc6d332e1d4cb70a34f91675fe09462', 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

@@ -47,12 +47,12 @@ export class TextField {
         this.handleTypeProp();
     }
     render() {
-        return (h("div", { key: '03422690b4102382e3a474e2e1c6ac4f73659df7', "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: '42210a8b17f096ace6b0e81496e32ab7089f3dde', class: "textInput__top-wrapper" }, h("label", { key: 'd6b3f5c3d6fb38e2a1c9802df7c969199733b0e8', htmlFor: this.internalId }, h("slot", { key: 'b24ded0f298be4688a72bb45377d8c275e1cb674' }), 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: '55d2177fd007e49ee365ac62b18b53251d285e7a', class: "textInput__bottom-wrapper" }, h("div", { key: '8bc12c6ef40bfc1dd7a8ad063358cca5e730e8bf', class: "input-container" }, this.icon && (h("ifx-icon", { key: 'c45b234e066f02565d036a03ae10c52b848de180', class: 'input-icon', icon: this.icon })), h("input", { key: 'fd2e04e42ff1135a842432832ac7f85e64e70751', 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 (h("div", { key: 'a7e11de99939dfedbc4048fdaacb3a543a7c199a', "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: 'f06e2fa62b60a9e7b1fc5ad043ec82b0e70a91bd', class: "textInput__top-wrapper" }, h("label", { key: 'ccb61bfdf7249d091a315ba44e2172f1bbe6a567', htmlFor: this.internalId }, h("slot", { key: '935be543d95be08188600ec85e363af902587f58' }), 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: 'a810ad0bcdd3b503df1c17e805bec11de84a142f', class: "textInput__bottom-wrapper" }, h("div", { key: '80a1ea5f90796c5284018e875aadcbd7f49177eb', class: "input-container" }, this.icon && (h("ifx-icon", { key: 'f5ee155afa4d624ba7ebcb9308f76fc1071393db', class: 'input-icon', icon: this.icon })), h("input", { key: '7d927675d0e33cdc265ac5fe9909ccb2228cb15a', 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) && (h("ifx-icon", { key: 'f23549b129cc8f32fec302b5821b4817ee2857ff', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
-            h("div", { key: 'e4a5b4352aa595db65cf2615c657600d8a16e25c', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
-            h("div", { key: '401d4d1402dbd7484ed1e4e0cf49141a9ce850af', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
+              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: '6214dd96307b46c8fa2b921f5f4f91284006b697', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
+            h("div", { key: '957a563bc1f8b70347afb0c56f7e886f5c9d66a2', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
+            h("div", { key: '0cd0a783e3e53c4d5041ce05f508bdfdebefc991', 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: 'b569c17543ef28f9b56646371e33577372e99431', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '0598759077be5ba3eb85cd5ceb1936b710354425', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: 'dac4ecf5a90e4c167e31f56cf64cb3efecaf408a', class: 'wrapper__textarea' }, h("textarea", { key: '34081f1d6114c7a2a09c11d9b14ae87d22e47d20', "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: '6abc9c71a7aebf1443f51becce7cf5f3e20c7d9f', class: 'wrapper__caption' }, this.caption.trim()))));
+        return (h(Host, { key: '64c9244eff4ee5017ca4ef879e291b63c5aec7fe', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '938b88db73d07f0e0061f669f71db66f7e00ad55', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: '18bfcd453ecf46e2932b9700d8275d803187d101', class: 'wrapper__textarea' }, h("textarea", { key: 'b2a247800bd43ca25b4ef56f1d182e6e68183306', "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: '88b34d8e1b8c2be14379bc4419db5d2488a0e5e2', 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: 'e85700ad1779ef33be27c010d46723cb75d25711', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: '858467414bf5260c3d3fe8695ca0043b0852c2f2' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: 'db99efbb0ad72acd7461ed4035f0c90daf340ad2', class: tooltipDismissible }, h("button", { key: 'b59039fc6fd6cd5b3599df79ecc9adace675a911', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '21a366729fc7488a4ee70e052e05e06d547856ce', icon: "cross16" })), h("div", { key: '5e3cfb19fa702ca1d4cfc43908011fe3aad19fa9', class: "tooltip-dismissible-content" }, this.header && h("div", { key: '8a0efab63e9c0ef801825dbfb8fee71885ae235b', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'dc14f833761ecd8337122ab3db26e98f25a4f974', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '67247cb6a9e70f6bde47f1ebc5385ceecc2ce854', 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: '10773d4df998e92167dc77c8d0b95341341b455b', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
-            h("div", { key: '9249ebc0bbe96dd88b3886d153cfc488a75e757c', class: tooltipCompact }, this.text, h("svg", { key: '5d75892bc6e0f4676d5bc06d6300b9885d49eca8', 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: '740def19e029fe20d3b85aea7529880c791c1f14', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
-            h("div", { key: '73e6c95646621f4f75b02e9e2392b20708b0cd57', class: tooltipExtended }, h("slot", { key: '247c42521f535af143555c66395f8b992e01f19d', 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: 'dc29063ef34ff17796e79f27cef284ad3a05f6e3', class: "tooltip-extended-content" }, this.header && h("div", { key: 'd2d495cc928dc296e5242d33f456d9f6dc8fbd24', class: "tooltip-extended-header" }, this.header), h("div", { key: '74ba8b61d211d090d859fb86bcc1ecf97ec9291b', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '7d3ff3882855f6f0c0e8423c8830c097eaafb764', 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: '34faa585f279f8f3b678d338e54b2abfb9973650', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
+        return (h("div", { key: 'daa627116984981dc14e96ea82124a51c037f462', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: '5420bba8986124f9f98fd9cfdc292204f5c36e48' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '98b81e4922aa7ee75e4c80245c94e2b7812e1aac', class: tooltipDismissible }, h("button", { key: 'dc04d7505a836daef4d68a276adc24b633b248d3', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '529a97d651c722d122e4bfb41fbb509d583a4b4c', icon: "cross16" })), h("div", { key: '591567481908744da5e98064e71df412e5bb108f', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'e9ec4755e06aa5286a69e1e17bb849212758b0c0', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'dfede7a6ba71bd281f23ee4f3cabf946fe8840d2', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: 'cc573ab64241f46ce5e9eaf4f5afb649cf7f2dbe', 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: '68fcaf98ecf9895a251ba8e2f8c507bd99274b95', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
+            h("div", { key: '10aec4a1f9a8a563f8dd53fff13581dd224fd3f2', class: tooltipCompact }, this.text, h("svg", { key: '3abe8f3db2d54d4849c29545590b9dcf33482d4d', 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: 'e199dd80db021401165cf6ab9f3fcbbdea46f47a', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
+            h("div", { key: '5a901c348d0aa6af0e9594bd3f34cddea7d88d0d', class: tooltipExtended }, h("slot", { key: 'af3927f25697bac2d71dad2784e82e9870afe0ae', 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: '735af9617a2a1af20f52229dc776e6caab954e58', class: "tooltip-extended-content" }, this.header && h("div", { key: '631bb91915890c719f0f95747fa3246eaa7724b5', class: "tooltip-extended-header" }, this.header), h("div", { key: 'aaec776614f79e253ca7ec9b85bf6deb5c5fafca', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'ccf07468578d20303f2d157a885faceeb5bd583f', 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: '8af5050fef5d90db67031d7520619f06257c30b6', 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: '1ef10be917644b56a0c61d123335a3b9807dc21e', class: 'container' }, h("ifx-accordion", { key: 'bb4bed20180007bd358dd62c5632e9bf64ced8aa' }, h("ifx-accordion-item", { key: '22f0b7e0a99560027f3b104c5aff5d4df497f08a', 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: '93af0d9eb81169d4295de96c2ad8a38c98f7472d', 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: '513af2390df5b2c92103623b6ac468b58a951d5b', 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: 'd198d32f2d537bc7c860aaa46f299188d07c3537', 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: '43ab4602486cb02854c8d76b3a2a0c2b7774be24', 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: '4e761e2d958ce9c5fea599b01b12fca554835a0e', class: 'container' }, h("ifx-accordion", { key: 'f304b4deedb45cab9d852ed07b80dd967c820382' }, h("ifx-accordion-item", { key: 'a36e8eadc373b7afd6371dfde1058d483f279cab', 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: 'e603437b41806c870030d8e63b88ec985ae3e46d', 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: '77593944637daecd4a1eacc72e6472e0c865c95c', 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: 'be834115e1e4e3c231d141858c31685bb9d7ecc8', 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: '7b2def3eaf82ac3959ebebcbdae34bbf50b730fe', 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-accordion-item.js

@@ -1,4 +1,4 @@
-import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-5d0763d9.js';
+import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-f7a8339d.js';
 
 const IfxAccordionItem = IfxAccordionItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-alert.js

@@ -1,4 +1,4 @@
-import { A as Alert, d as defineCustomElement$1 } from './p-0b2bb8ad.js';
+import { A as Alert, d as defineCustomElement$1 } from './p-ca6c8507.js';
 
 const IfxAlert = Alert;
 const defineCustomElement = defineCustomElement$1;

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

@@ -180,7 +180,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
         return {};
     }
     render() {
-        return (h(Host, { key: '5142758a2db73f270378e480ad4866b884cc5b14' }, h("div", { key: 'e0e8f0644f34ac4ba61644ecd449f5e926e786b0', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: 'e938e3410c348bbc226d75e07b70a3580486b726', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: 'bb4f66d3a409a2b06cb72f7fdc445df10358c591' }, h("div", { key: '873b1fa7aa2086cc4de9763c001dbcabc649d68f', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: 'a0cfe32c9f60f075234b4e29cbdd56c867699417', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     get host() { return this; }
     static get style() { return IfxBasicTableStyle0; }

package/dist/components/ifx-breadcrumb-item-label.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-2cc378b8.js';
-import { d as defineCustomElement$2 } from './p-7f0af813.js';
+import { d as defineCustomElement$2 } from './p-2a46b223.js';
 
 const breadcrumbItemLabelCss = ":root{font-family:\"Source Sans 3\", sans-serif}.breadcrumb-item-label-container{display:flex;align-items:center;gap:8px;text-decoration:none;color:#1D1D1D}.breadcrumb-item-label-container.margin{margin-left:16px}.breadcrumb-item-label-container ifx-icon:empty{display:none}.breadcrumb-item-label-container .label-icon-wrapper{display:inline-flex}.breadcrumb-item-label-container .menu-icon-wrapper{display:flex;justify-content:center;align-items:center;width:16px;height:16px}.breadcrumb-item-label-container .menu-icon-wrapper.hide{display:none}.breadcrumb-item-label-container .menu-icon-wrapper ifx-icon{transition:0.3s}.breadcrumb-item-label-container .menu-icon-wrapper.show ifx-icon{transition:0.3s;transform:rotate(180deg)}";
 const IfxBreadcrumbItemLabelStyle0 = breadcrumbItemLabelCss;