@infineon/infineon-design-system-stencil 32.0.0 → 32.1.0--canary.1681.8e7428ed830ca5c1505633fc0cd69c8ff7a84007.0

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

@@ -148,7 +148,7 @@ export class Pagination {
         this.initPagination(paginationElement);
     }
     render() {
-        return (h("div", { key: '1bd59dde0b13dac78e980ac0a9193c0d5af3ff89', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: '7247216dab77b5cf3169ffc8e04d383a0ae4af67', class: 'items__per-page-wrapper' }, h("div", { key: '86933ae8c8c59cd77b10aba607f21972c52da5e6', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: '7a0a99aec75d33e415302ff49289f00b4a257f84', class: 'items__per-page-field' }, h("ifx-select", { key: '81459335e55aa7f3921aea828181a139f64bd274', 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: 'a56b25a0fa5b0642174b41741c703ca94ebbd739', class: 'items__total-wrapper' }, h("div", { key: '12860a45aef15bd96120750358ba7609f0ba4f2b', class: 'page__numbers-wrapper' }, h("div", { key: '37ca1d128259779bcaf9e04d7e7350ea15148108', class: "pagination" }, h("ifx-icon-button", { key: '6f5a2cf42665322f5cb2bf41d83a433207e1e278', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '0868301196cf85da110fa30641ca92ecbb3c9628' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: 'd6ba13113a8427c6a37bf3715f744cded4603f36', class: "next", variant: 'secondary', color: 'primary', icon: 'arrow-right-24' }))))));
+        return (h("div", { key: '20357dde8f0ba56b682ff31588053338e38c3218', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: 'dd1dc66c932352ee8050f429510743848dd29c97', class: 'items__per-page-wrapper' }, h("div", { key: 'd268ee42ada05f972a8b963b2dd9686bb5e64270', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: 'e5d79d9452b3cd620492c36c99b102c361faeca3', class: 'items__per-page-field' }, h("ifx-select", { key: '0a760ee3e0a092c828b42f9d4570e3d5b75e9aa2', 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: '7eb4e9629e04b42911aac866021e167a07cb58e3', class: 'items__total-wrapper' }, h("div", { key: 'fb43a909f1ab9185ded1db0192b17a427d5b32a1', class: 'page__numbers-wrapper' }, h("div", { key: 'dd8eca06bac07cf2eeb8f9e5d66bc92357d5bc19', class: "pagination" }, h("ifx-icon-button", { key: 'd5b224dfe8001cfd533093290f4bd295df329f1d', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '94f1429b479b96c630c1198038d1cbabb4280de5' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '4b03d03277d03cd6732fd4cc4fd4577edd3206fc', 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: 'e4ba3d7984ad1444c1e07edbfb7623a5471c059e', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '995d64992f539dae4deae9dfcdc04a93f9c3b255', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: 'f7cc21c3da249ef83d26d43fac35aa6efe69a425', class: "label" }, `${this.internalValue}%`))));
+        return (h("div", { key: '9a1fc68c768dc22c5926f0eae299862f2d2de371', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '6e847900044f4bc04eacbcc194ffac8bf6b83e0a', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '8e6fa2713fbcd0b956b8f27b873816adc0c3cb7f', 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

@@ -82,10 +82,10 @@ export class RadioButton {
         }
     }
     render() {
-        return (h("div", { key: 'fae53d7eafb00b6e7a1f58145af14c6eb2ab05df', 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: '74ca30fb71544197ca732c626a9afd04ba6de059', class: `radioButton__wrapper 
+        return (h("div", { key: '4a69126345effabdb522d209b4fb867ae55373bb', 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: '66c27180f8f00aff7599a09368e740a8654917bd', class: `radioButton__wrapper 
             ${this.internalChecked ? 'checked' : ''} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: 'cd925eb77b85631c617b809b5d232e54c10009f2', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '2343f841254057810313be262f74076a40398913', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '501a334c5b09cc21cc5c528cd1bdf1ff465011d9' }))), h("input", { key: 'e1c0bc279da1c379d552ab5bc25f274654514f62', 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: '9012278070740bc5bfe976b66e1ca5098ca21bdc', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '4a82098a237a794405ac69ec8a7898ca1ca3f41b', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '805092a6667be8a22cead7a830dc483a8e53d42a' }))), h("input", { key: 'a9efb84dc6d54d9df3e704235702e7c1ea9587e0', 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/search-bar/search-bar.js

@@ -29,7 +29,7 @@ export class SearchBar {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: '8d79e2302e0e1d0f457a5ce94740966b8f7a6095', "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", { 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: '9a6033dd56aecd4444cf7b5bee7916ce8d534760', "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", { 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

@@ -45,7 +45,7 @@ export class SearchField {
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (h("div", { key: 'dee8f8a10987683421db49a63c7e2f7a66ce1b64', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'e6cc99edb05791bb80be7c2262088c668d6424b7', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '50cf96f238932cf46b1f0186bcb3b8a96a207889', icon: "search-16", class: "search-icon" }), h("input", { key: '358c300cc7c03ef61f1725b4c2380180eb7c26f2', ref: (el) => (this.inputElement = el), type: "text", 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: 'dd5d16c933ec70acb8950279f4642ac93ab8b801', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '92159e695d65890de079c49c25dba47a0243e56b', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '27c96d542775740161ea3630851b0b19d90a177f', icon: "search-16", class: "search-icon" }), h("input", { key: 'df87749e87af361855083fc54ff76826d2ca12b2', ref: (el) => (this.inputElement = el), type: "text", 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: 'ba16c44bcff74ca96370132c7e191ad8659312e0', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '1746bfc0ea5acfcee7e39832613beb3a65ec3b74', icon: this.icon }), " ", h("slot", { key: '978c5dd19baeb0bdc7029a381891bf858c4a7806' })));
+        return (h("div", { key: '82774e43f27d8995c36d7d356780bbe14b76f70c', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '58ea805311f071bf39562bb043a4ea4e77b6cd57', icon: this.icon }), " ", h("slot", { key: '659727a8768c1988b251d795c9a7ae5b9554b1f0' })));
     }
     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: '107dc81c1511f43afe458598f531dba52c291e32', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: '879f0a9e7969f6dee38992352af1c5abb0ff1844', class: 'group__label' }, this.label.trim()), h("div", { key: '114496531e8455b9b109d62d882b943920b8f925', class: 'group__controls' }, h("slot", { key: '2199416c1ffee2e0ca7b6f158da9cc697f1ae290' })), this.caption.trim() &&
-            h("div", { key: '78c776417c479c9ac008d0a5e249f11300d0f9e8', class: 'group__caption' }, h("ifx-icon", { key: '4e275a5017e078c8eda524151fec0e1a7129e807', icon: 'cinfo16' }), " ", this.caption.trim())));
+        return (h("div", { key: '9fb656fefd8b61e7c563ac77a20a303d40c6f146', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: 'de4f8bf1f2404f106ff180167bf4c79abd2b165b', class: 'group__label' }, this.label.trim()), h("div", { key: 'e110c6c98b981142df08e7dda574b2d3e102a19d', class: 'group__controls' }, h("slot", { key: '3dd13439a68201c2f42104c4853b371c669e18df' })), this.caption.trim() &&
+            h("div", { key: '946fe774c7cf3f9642447b9a8cb0e258d3f9d493', class: 'group__caption' }, h("ifx-icon", { key: '39f21a9eae4961da05f38d6930bcc373671e9794', icon: 'cinfo16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();

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

@@ -209,9 +209,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: '56b4f3729b61745ba48a7d73b431ee327490a1d0', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: 'd9b2690e71fcffb51f2b9521030b56c832504401', class: `${choicesWrapperClass} 
+        return (h("div", { key: '9f22a991b500016c41a63d7aa46fff087227f90b', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: '259b6f62d0e5c60ea8fa11734fda41f969555a96', class: `${choicesWrapperClass} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: 'f6a3b0f9f8237102ee80c7307dd1af4178628e83', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '74814a6824d7da1afa510ad7e399d9443c2876e3', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: '5b24471c46f85b9effcf75a9c22e39a1da8162cb', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: '225d88540e641b7dbda3f2197a9cbcd1d82d4bdb', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '066855967421b0796aaf674b7c563c0728105e03', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: '7908ba5b0c29d8e5773ee27417a1e7baee80a4b3', 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 : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: '9358b42323bf7828676c6423c89fb5179b8e4651', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: 'f1d7ce031e84ca4c55c1b2228c7cf2501cf8c78d', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: '3e72d6ecf1d7a5649baa99131ac76a1287678293', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: '7e0e78337c13e780c3c3ee80b5252fd35dd103e0', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '8037dfe8733b35760da9fba0d63886c5086819b9', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: 'd3d78aec55206c83b2cf81c5d43a6bf8f4a3c37f', 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: '4fdcc386679f8d0bc627c36ee2847e72577da844', class: "ifx-slider" }, this.leftText && (h("span", { key: '5523880c46e467acd326d34efeae3f84072e931a', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: 'a6191c056b723dc639ecdf14da488fd4af29b1fc', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
+        return (h("div", { key: '3a43035d99bb5ae166d215994ba35dcc0a72f800', class: "ifx-slider" }, this.leftText && (h("span", { key: 'b5b672dd97b5fbe71f4e23ac0f35311fb4014112', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '1b167231afc1aba9165c7b0e340ba692ffb3ec04', 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: '05d09fab9f697a5b4f59a4848fb968c4327165dd', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: '22c867720cdc51aa5ee335324e6702784acef861', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '6d1f39ccac1208b0eddf072db7d7661da3b2afbf', 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: '7b199e3e1024289bfde3e200c3b03b1a7600f7fd', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: 'a77ecafe2e47167c7014fdf5aa710d59cfc18659', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '344dd484214e0a5cbd4a530cfaec229f90dc7e7a', 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: '6db48f54c2484025c92300c3c63698d4f16965ff', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: '85f604c1cae6f9e290f5a07cdab730cb4ce445c1', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && h("div", { key: '6a3132d2ebb933fbd4007dbf9cfb2943078939ed', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '22f7f2edd61e25e6c73c2fa18738f4c2f9c67e44', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '4d72092059485d2bb662cc2451f20953afcf5200', id: "spinner/conductor" }, h("path", { key: '9cbec7c69604cd24de46bd63b336f224a386c23b', 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: 'd81d2a7692cb71c15f4aa895abcdf0d4441d2b3a', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: '7813885c276e55354c47f2ff735a16f498b1e39f', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && h("div", { key: 'c4163967c2a5f58795ac974716cc4e831ec6264b', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '0feafe9cdf7cfa8138a1d104824c8e5dff1b3caf', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'ca3cdd02b91de714c12e1d2d6ad800fee938ac03', id: "spinner/conductor" }, h("path", { key: 'aedaa84532c0c51f8e0a7a8683fb7c24379b73a8', 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: '47ae575c6a7d0ec7ef235e8e26057770d4d57a26', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: '07d4064a8edab77890485507da16e90d3144c86e', class: `dot ${effectiveColor}` }), h("p", { key: 'e279c797130698ddd4157924caf0498b7b5ae171', class: "text" }, this.label)));
+        return (h("div", { key: 'd6594837b2884bfcb3aa73a47f335a240c6567b2', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: 'ebb8c7eaeb4a951ade8568b5fa08ba479e2f614d', class: `dot ${effectiveColor}` }), h("p", { key: '3061c0fa17b6f1f4895f43e627496c3469976191', 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: '9bec08d1c4384419d833dce0c8d569da151c1c99', "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: 'cbee70d7f0f5c76a09d48423566bc3d485cd929a', "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: '8e7ac36b9befc86925d246c82fd0a3fc6b2d610a', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '0f45ee02f78561bacab88156f7e722ae77865a5d', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            h("div", { key: '72cf042174bee53e234c401ee01b987ccd104365', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: 'dd5fea2b7e02ccb0d00c0d411eb193a18a2a3119', icon: 'check16' }), this.active && h("span", { key: 'b3e67ff3e974d853d0aaa05cc227fa57dce06d3b', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '14cfb2b3b0c1fada1fa5e9817ede6c9de161df4f', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && h("span", { key: 'ba1cc86995aa9461e58fcaac9e40ec1c2fc8d811', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
+                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: 'fee2738c8478680320ec50c53a92d6e7b92a86e3', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '96aa1a741cd013b6ae17f32de2725c368ea51618', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
+            h("div", { key: 'c9c696ac8898befd165fed334c36e7f77c91aa4f', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '98ff6e603c94aa1a57c5f8491dcf2a17cd4a4864', icon: 'check16' }), this.active && h("span", { key: '2fc5ce8a43ef62ecae07fbf25688af0b629b8e6d', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '72db4eb91a114022e470d14e035c1ff4364f6f00', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && h("span", { key: '0a215fa7c2df964b4743f0fb0b16652b92003bfa', 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: 'cb433be92c598a228898ce55645c9da91d063935', 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: '30802380d8e7bd7c7fb7aa478c06660bc6047d27' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '11f41e62813e9dc4a8c52a9805d000fc88da29fa' }))));
+            h("div", { key: '9b77faa804a42714b79535bfe530854c68ca6372', 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: 'a84af39da90db9e59e3b614f63de9802161a0e51' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'bdfaff2aed9faf5503fb89b7e2105c48d721dbe2' }))));
     }
     ;
     static get is() { return "ifx-step"; }

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

@@ -116,10 +116,10 @@ export class Stepper {
         this.syncIfxSteps();
     }
     render() {
-        return (h("div", { key: '126ad20b9d0522b3904ccdefa7f0e54a0bd68e41', "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: 'c7e51b5fe17beb80cac38fe0da1600f44b4ca111', "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: '6b19ef3f8d03c267269c3a1ae50534df4b35f44c', class: 'stepper-progress' }, h("div", { key: '4a3b106590ff11ed82bc50df48f8018f8e83caba', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '7e27ac45d89e00f080e298bc0681b64cb33c1039', class: `stepper-wrapper` }, h("slot", { key: '1f168942e091e9cbe96466deda03b6949b6ff015' }))));
+            h("div", { key: '233c1234510997adab316ffb47e341c575036b95', class: 'stepper-progress' }, h("div", { key: '45c775b8727bac00e4c57a6e6e6129fe320e5a5b', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '35ad66a86c1b1f6d008a232ae33944a3d7e122a6', class: `stepper-wrapper` }, h("slot", { key: '671a05ed6ce3927369e202f2a9218944bb6bb7cf' }))));
     }
     ;
     componentDidRender() {

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

@@ -63,7 +63,7 @@ export class Switch {
         this.internals.setFormValue(null);
     }
     render() {
-        return (h("div", { key: '7e20607f16e9fcd47e30f1b851d5dddbaf90514a', 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: '1154186734d042176d5d5843650b0cde4890be4c', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: 'b495c8cd62b3bd6a577f9942ddb88f7dbbc7ae29', class: "switch__checkbox-wrapper" }, h("input", { key: 'ba68653e86a3f801a77766625c2f303ba7098c9f', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '925e50cb39c9cdbef596db82a3f079471c7ef4fb', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '724eb84c9b3994d60339162392fe7df7a5dee5fe', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '81b1b498725340c17cf069502fa4befcc8a3697b', htmlFor: "switch" }, h("slot", { key: '3b3800a830e33c76a86adac325ba2cf6e57ecd44', onSlotchange: () => this.toggleLabelGap() })))));
+        return (h("div", { key: '0481403a878470cdb42c03be663b88f19fe59c58', 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: 'c84f8e06349d1ffa03efb077e64881b12c4ac640', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '533ca85af87c3edff93c76aaa0860f997b107e67', class: "switch__checkbox-wrapper" }, h("input", { key: 'fd9a8c6442c321a81161645c7e84f1d03cae3002', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: 'ad951898b5b38de29aff0be91f734d443399f050', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '14219d030661fed97b8210d67ec3794147884225', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '3892d20ad28a1f1823e8302e9820973df938ee70', htmlFor: "switch" }, h("slot", { key: 'e350367180975d30978ec7c7d026b34e86c79741', 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: 'af9e6eb798cff6746bbeac12a81401113facdc22' }, h("div", { key: '369dda1556c97cce7d5be0a6c54a3541733a1d56', class: "search-container" }, h("slot", { key: 'f1f83778e1d12d00a2b7ab263f10659218e49909', name: "filter-search" }), " "), h("div", { key: 'a423b9b5242764fe878b7f050f348ceaaf1c403e', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: 'b165c290a11781ac9d7fb0b602ff3c7af39d8d32', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: 'c235cb9f2f29ad3a1e3398eb5b1147a5a51c24ed', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: 'e1789ccb9f87b6efac40e0ad76e32dde8e7644da', icon: "filter-16" }), "More filters"))))));
+        return (h(Host, { key: 'd5aad85edc16369a3487a18f3e3f24a5b914e820' }, h("div", { key: '7f49a493bd5bafec1286794e89ae67adea9e1967', class: "search-container" }, h("slot", { key: '9d7ab3a3294ac64f7cc47ae33b1839871d06df94', name: "filter-search" }), " "), h("div", { key: '9bf93a1030392d67940228df88b11b52685b757f', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: 'fc4c6c9e15cf96fc1c129638688fdf2a27f91dc7', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '8f26ef634ef3e27d893e1998167f07a4315cb59a', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '23cece990fc63afda2e9864887865467bec55e6f', 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: 'a516541ef3dc49acfe900213815c8d17c5ff0f7b', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '2502af32b8322a440282f18a95508777bd70602b', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '661853e99db03cace8f273d8e447effd06f31baa', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '9f2c658782ed1ca845f85a361ea5fced99bb41da', class: "text" }, h("span", { key: 'a2bc905dbcb739acab31b39c85360414a8dcaed8' }, this.filterGroupName), h("ifx-number-indicator", { key: 'c64226f2ff8d651f8febf99a99a65f3e8e1fae68' }, this.count)), h("ifx-icon", { key: 'c00346c7bf984b49d28af20363803ba7f081ac17', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: '480dbf4cb9844bfa8660844451ced3c1d798c39c', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
-            h("div", { key: '48de4905ba421e86c4e13a72287edf0b1281a149', class: "filter-accordion-container" }, h("slot", { key: '15fc58422854c0e1403fd2d85be09008dc6be4a3', name: "list" }))));
+        return (h("div", { key: 'b5be6a4c8e2b8406e20b4139461d75d1acc5e88c', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '88ce1afb0ab07d2b3b1351d698632d24521f6870', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '2c850d5b01d985473ba69ca347fbfcfa076670b5', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'b50240640314ca9d971f1db017d8f2bf4fae5cc1', class: "text" }, h("span", { key: '12a6ef3c45f33540669af8dc60f2d8c104e07953' }, this.filterGroupName), h("ifx-number-indicator", { key: '049ecf530b429920f6f977e240de3913fbd0c013' }, this.count)), h("ifx-icon", { key: 'fee323359acf051fb4bd0040c0eb1bea7a9696fe', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: 'f7b60e6232b404bc5f4345dd9db80e513c4a6dcd', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
+            h("div", { key: 'f802a7ec2ff47ecf22b3f69ec5b4adbcdb599522', class: "filter-accordion-container" }, h("slot", { key: '5877962924effa0e52163d9ec5a2d436ac8a3ac7', 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: '6a51c11ebb7ef44a420b4c9775877960530752f9', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: 'ac67262dfe2ba3f4b51a892377013bea52ec66e8', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: 'b43473fa4afbfc2fd62c27a4ef2f94d4fcd955ec', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
+        return (h("div", { key: '7b5ee1b95e95e19d2fc959c2a9ed59fa1d90a4e6', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: 'c7dfdabe9e9eb6dcea53361df02a2a5e4325f43f', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: '5a396959e4ab983a06796203a3efbcc608f1a16c', 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: 'a8195eb2d535ce15c760e9391b797de4e8b5cec0' }, h("div", { key: '69ba55a9a775881f00064fadccabfd94979ef8e6', class: "filter-type-group" }, h("slot", { key: '18360386fa18b1b55f6a2c0ba19623029649189b', name: "filter-search" }), h("slot", { key: '34d295aa182142abc7215fd5def1f0b0a11477e4', name: "filter-accordion" }))));
+        return (h(Host, { key: 'd794c0d53d4cdf1d9e7a233dc36da89b7407bc57' }, h("div", { key: 'f59f81f2402e974ce04c937c620907fc553b3752', class: "filter-type-group" }, h("slot", { key: '35b06d9b7d04566fce7497c81a641a76bcf987e4', name: "filter-search" }), h("slot", { key: '86614c6a09e9d42392cef57017965abd337582e4', 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: '7c3d09e5c8d18387b4b2111050522b8862275ae3', 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: 'd79aed51b0aa9c96e3b99450af4a67fe9c9cd9c1', 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: '0f5161792669d260a795fc5b5af0a2d62b25e015' }, h("div", { key: '1b047ffba32d2b1161a9e4827ea0ba35e1039ea2', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '602654f9a4a1d0bf7d085e6cbc73db36ac8a8936', class: "sidebar-btn" }, h("ifx-button", { key: 'ec54a9a7cc3fc375ce3be6ac2331d7a050dc3e77', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'ef1be17736c4f54345172941d4e0c06dacb2d45b', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '53e2c21c149cfff4df87592d6b3dc63f640767af', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: 'c2fb4c3a9749a5dd3cc480af92595bf38ae44f93', class: "sidebar-container" }, h("div", { key: '991e810f5875347cf3260a9cef1ae643038ed850', class: "filters-title-container" }, h("span", { key: '9043c614276d0b17730a6e844534994df191c274', class: "filters-title" }, "Filters")), h("div", { key: '7cfdb1e15eeb3848da5c9415d966e9eccf45a64a', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '19be35ca4d56deff54af054fddd93abf6b093b3c', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '6c5bb6e23277d966c00961138c4faf93ba04b5a6', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'da76a9dc53096223c5b55357da935aaa68a57809', name: "topbar-filter" })))), h("div", { key: '80f2990257cf6e8535ab805d71a3bcd94cf9c0a2', class: "table-pagination-wrapper" }, h("div", { key: '505479d1f73fd6d1b12e74149a8fb7ccaf4138cb', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
+        return (h(Host, { key: 'ef6d50ee7b08b86a5534feed83df514f7de1ca6d' }, h("div", { key: 'c3d3184293fe3b7bb34ca87126f56acc5abe2812', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: 'f0cd79a6d7a912f629a170998f53575c047529df', class: "sidebar-btn" }, h("ifx-button", { key: 'd4ac7961a437f6e18628693e3dee32ff357326c0', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'a46b1fc02a4a7888ed02aa7b7599f2687bb43291', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '6f76f786bb6d06f02cbd54735bf042adbf892ae8', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: 'bc5966d2c801c7a660949ede006c3b9e81d228dc', class: "sidebar-container" }, h("div", { key: '646d3a6b689bedac78db621b50ba49b3f235f590', class: "filters-title-container" }, h("span", { key: '75420b67f11bd70a7bf88f6733a960b3b12a0877', class: "filters-title" }, "Filters")), h("div", { key: '4a26a7e37038cc124c5602871e9ae3efd03ece38', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'b57db55a41c57f5421c5a1cf1f41e1a895d70752', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: 'd44dd84651cd5a88736adb2ee3b93105569ea621', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '75cd86d074b880b9227df048222e6e1f71444c5c', name: "topbar-filter" })))), h("div", { key: '22ce3434d5073daac916a81975347c2635ebface', class: "table-pagination-wrapper" }, h("div", { key: '9986934e5c38ef7801523ba32edc9bc96d28cf91', 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: 'dd5ddff34324a9862ec266b69dff815088130ab1', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: 'c94bb876bf336c7fec3b8fe0321c1d1b20f7cf6c', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: 'ff9fe63f9801b645c92d98c777b2c664be144265', class: "matching-results-container" }, h("span", { key: '1ab39b442e88b8717e60b876d5e590abc49ea015', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '5e7dee60f2df77e57966506766464a7cc166f83d', class: "matching-results-text" }, "matching results"))), h("div", { key: '1ea9a03eb36ecbb42bb6f660b984bde302f8e0dd', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: 'c3885e21c36be6413ae2b1e87ded9ce6ba2f183c', 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: 'c4bfcc611183bac5a09d0b4abc50e072e22c8bad', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: 'a0a23f693e59bb22d4d6d70d3a7fe37c4da70c87', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: '2d8e228d37046165d08054ba76cd3888224e2567', class: "matching-results-container" }, h("span", { key: 'fa68665c33fa576c64fd3def0eb0d1a2be287458', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '6ce30960e908bc45f4d9d61f008174035ebd0f73', class: "matching-results-text" }, "matching results"))), h("div", { key: 'e888428f6e43473ccc1b18ee0a75f49c750ec70e', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: 'c01494f8e3648908326f65d914c91a3a071f8c8d', 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: 'aad9914fcf873da2a71ed7bbfa7db2be5dec54a5' }, h("div", { key: 'bc436824ba11ec68a0dca3fc0381993dc66ff593', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '9c290e9797c50dae868ab333ad613035715e1518', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: '56d342732bf6d49e668f0fc3e2f34f604ecc50fc' }, h("div", { key: '672ef798fa5d47b3c219a772c5256cc0a670f180', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '66c21033cebeb0df7a41d7ffe7f6b66fadd6be96', 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: '68fdfaa881c7619f208c32bf8f1ec579997fc7cf' });
+        return h("slot", { key: '845e795d2a758c1612b8601ea2eafab0385f02dc' });
     }
     static get is() { return "ifx-tab"; }
     static get originalStyleUrls() {

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

@@ -193,9 +193,9 @@ export class IfxTabs {
     }
     render() {
         var _a;
-        return (h("div", { key: '5aad10898d04249d8f6d8ebbec663409e937ad8e', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: 'f4651912a63389fe4263867a2e43fbd76c35d1e3', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (h("div", { key: 'd4e05ff054e60c53638ed293d85986b20a831f9c', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '6815e7449952ed21744ffe024d356bbd1e1ebc8a', 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: '2fa5337ec103789d238efc7e34340435d1589cc9', class: "active-border" })), h("div", { key: '15936a72562679e7e3b21adb031ddbefcd309a07', 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: '77b59e1fca18afe592610a35a26569538851b2b1', class: "active-border" })), h("div", { key: '89c6c472aee1a525e8be3a7d19008b372300b06c', 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: '41331d90004cb31b76563b71e0614e11635badca', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: 'a05f1a5ab32772e4ab2b0571def479a48fdcf35f', icon: this.icon })), h("a", { key: 'e5f810e31d7650a90dcecd657d5a9955c41b1fbf', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: '526a2ea2b178bc583f0ab93351df949fc5c8e667', class: "label" }, h("slot", { key: '384383d1bd6f44f9f7bc409858eb54356c48bd51' })))));
+        return (h("div", { key: 'ebe5d8e2f3bc59ad1bdef92eb7e4fbc7a07f9c4c', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: 'accc8280c6248bb81a2d139e85da8a048329e917', icon: this.icon })), h("a", { key: '1282f2372cc961db61fefee89e2a21bf1a998537', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: '76534734832475e44606e0fed6d3577802525d2f', class: "label" }, h("slot", { key: '6d422addc814889fc71d851bc2dc3ab65a7cb3e6' })))));
     }
     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: 'b0774ebe1c3e3144ef40770c6ca8169c1f518c00' }, this.isTemplatePage
+        return (h("div", { key: '8bbad6a5aed64cdf08d55d949307d1f6e6833dad' }, 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: '0836cefbd6e9760badefacd6fcdc5dec7e3bc5fb', class: 'templates__container' }, h("div", { key: '3cddf53fe880bafa5d41e296530810ea26a9bc88', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '756b35df3419e8d92363307866047818c271f868', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: 'f990f29dac2c7ca78f2f652894fc2fe994ae759c', class: "alert__wrapper" }, h("ifx-alert", { key: '2553f88d9af2fbcdd29bf796a76acee7da3cf74c', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), h("h2", { key: '7dc3b09d76864c415446b6fed4ca46dcb0f216cb', class: "templates__title" }, "Choose your template"), h("div", { key: '6bbd867fbc390f0cfbd8fb823046adff02d25239', class: "templates__wrapper" }, h("ifx-template", { key: 'b7afc320afed39824056ca067c4366264c2095eb', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: 'eabb40da6e08a54d40f50d81350d8dad0041b40f', name: 'template-02', thumbnail: this.wizardTemplate }))));
+        return (h("div", { key: '23e25649965f489853cb1ba784a53479e53847fb', class: 'templates__container' }, h("div", { key: '2eac1a1cba9d1f33fde04c0ea2589758efcafbd2', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '7244dba86edf6f82f77e621e412ccce4f2af38c2', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '58045bb50dbcc65ce2320277983f81a0f429f735', class: "alert__wrapper" }, h("ifx-alert", { key: '591a2adff63451c789490bfa086156099abce152', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), h("h2", { key: 'f655cc87e64cfdc7a66b44e3e145a35ae594f66c', class: "templates__title" }, "Choose your template"), h("div", { key: '81019e69e74c00df6425ed113d0b3f9c657b96ef', class: "templates__wrapper" }, h("ifx-template", { key: '458caa648b5cfc03d821f1614659e10a17350eaa', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '33401929cfc91de74dc2f9c2a083c7c230c3b9c4', 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

@@ -38,12 +38,12 @@ export class TextField {
         this.internals.setFormValue("");
     }
     render() {
-        return (h("div", { key: '6c1d37820601366febde1472171e21643616f0a2', "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: 'b447456a1f37fc2721240d255c8ed0a5152d4a4c', class: "textInput__top-wrapper" }, h("label", { key: '88368a2a8a6c981950698c4b2735d7c1be8f865d', htmlFor: "text-field" }, h("slot", { key: 'd022625c2476227a398f518dac47dbf41b4e965c' }), 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: '85830b03ae0476ef5082086a65d4d679cd719b29', class: "textInput__bottom-wrapper" }, h("div", { key: '7572d87e0e2d023332f1c44ba26f6754960fc7fa', class: "input-container" }, this.icon && (h("ifx-icon", { key: '60dab8ca9db0462b4bb96d3029bfcd50c3189df3', class: 'input-icon', icon: this.icon })), h("input", { key: '57d7f5afd1839f8d8e680b178a3a5a4de14e55b2', ref: (el) => (this.inputElement = el), disabled: this.disabled, type: "text", id: 'text-field', value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
+        return (h("div", { key: '3569c6a5a0a23d5a04c2f87488bbc70b8d65b7e9', "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: '4a82c26a9a3ef86efa6d00bf903b121559844575', class: "textInput__top-wrapper" }, h("label", { key: 'cd5b5c574b857dfd4729db81a2c50ec3893398aa', htmlFor: "text-field" }, h("slot", { key: '5752e421626ad179a3f7562c5e99d549cd4b2a48' }), 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: '007dccc58661b185896b08ac896faf49848de347', class: "textInput__bottom-wrapper" }, h("div", { key: '87137bf9fc7d33242c15be5ce687e029e5a25e07', class: "input-container" }, this.icon && (h("ifx-icon", { key: 'cf3edf3e3b344a40a14d104c93270f4d08842281', class: 'input-icon', icon: this.icon })), h("input", { key: '930c56a46d53e729c034e6bbaf5cc72aadfaf655', ref: (el) => (this.inputElement = el), disabled: this.disabled, type: "text", 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: '1b1828c2ef25fd5a8010a78484efb7783c445a45', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
-            h("div", { key: 'ab245df20620f9b9dd3a2f1a38ffa77109277b23', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
-            h("div", { key: '70b3e872ad79ac6868f25f7a1e2acf2a5737c375', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
+              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: 'b850a3fdb13eab973c97cbfb59a029c5fdbe7ed3', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
+            h("div", { key: '384215f67bc0393452dd1fa0fba91bd48ebc7e2a', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
+            h("div", { key: 'ebe4a71136aa5e282ffae576aa191d5099383a34', 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: 'a7304cebfe559ded62cee964452f88a18f78bc16', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '167baaa954c6ab656c134e3467158bcf1fc87322', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: 'd58c71e350ddd3be36d864e19e3cb8478e3e4ef4', class: 'wrapper__textarea' }, h("textarea", { key: 'ea720b738bf064ee3f8b12a01a6bf72fc3b5b1ce', "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: '5ad456153a75b793d9e41d3b9c557a125b5251d6', class: 'wrapper__caption' }, this.caption.trim()))));
+        return (h(Host, { key: 'f6dad1fd412d07775ede50165eee294a1bb527c7', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'd9e433cf857369d09e9dc7b4439e4186f5c71dfa', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: '9230ede30b10f47dc2868784e1bd5e41f6b1980c', class: 'wrapper__textarea' }, h("textarea", { key: '4499888b439a4f0d3e460e17ef6fb816178b6aeb', "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: '0a57adb212132a9afd51d60286c61d7df6707eb3', 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: '67592390577cafdb6ad45d27f47eea035999d640', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'a0ae8a96706f3db0574ce812ffccd1f49c36220b' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: 'e17202aa1972d9fd34e0c77787ecb4fbbaea98b4', class: tooltipDismissible }, h("button", { key: '0615905578854fac3883150b1fcf152197309590', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: 'bd666d2c194e43332ea9e88665270a7c93cafd2c', icon: "cross16" })), h("div", { key: '644a0eb26e5cf2079583833781ac7edc5a81c03c', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'df5187e7dc01f3b80bf16d63405007cc8682f4a4', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'b6ad47a684c9dee2a742858344978cb58122d463', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '0b48983abeafd2752f17dfec7d95630d4dd77fbb', 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: 'e215933b3946f9edea6650dbe33197f85f22acc4', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
-            h("div", { key: 'c00bb7bdedf396716823c2871723cfa4f77c2790', class: tooltipCompact }, this.text, h("svg", { key: '435578db71002abaf36b1f9de0e4f1b6716d51b3', 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: '0ed8848c93eb71aeaf982137f649927fd30133ce', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
-            h("div", { key: '5609d977720fb9c4802389a2e95c452c5663cb70', class: tooltipExtended }, h("slot", { key: '9efb3039dff747a056d5fc71cae614f13406f6a8', 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: 'abdaf70a8f20e56fbd5bfe24822eb3a271216232', class: "tooltip-extended-content" }, this.header && h("div", { key: '8e679ad36c77ac682fcc5cadcb7a405c06c0bf1b', class: "tooltip-extended-header" }, this.header), h("div", { key: 'ea718a8f5918c74bf5718c3c0662415f4392b667', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'eb0b3075f9eab3f30f2ba011e08730233fd257cd', 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: '67a2226d192146ff087ffaa7aa3aafe091d72035', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
+        return (h("div", { key: 'd1011613a465b3f6283965385fa58c0757d37b72', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: '8ecdc7cfd8ace95c5201e5aef989fd5a2d690fb6' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '4d855121ef44f72e920dafbe165fbbb28757e2fd', class: tooltipDismissible }, h("button", { key: '0e5459e6f90c3e966303e72c261002e8aae19e31', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: 'a7cee4fab2cfca1c88f8c5e5bdb55f10dbc77aa2', icon: "cross16" })), h("div", { key: '8d3c651b0fd3c9d74ce22edfe3dc7b21f065da54', class: "tooltip-dismissible-content" }, this.header && h("div", { key: '835731e8d02674197ed4e0ff479b0493fc4a89b4', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'ad5d1d9d66a05af968aadce2c85e0f51a54d19fc', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: 'ddd6f30d4e4e70e7eb00aaa8af172d00bd5a2000', 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: '9afaa9623221b73dbfc84197763ccf74a3f55044', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
+            h("div", { key: 'dce5e22d5cb05d2333cf5846f2c16f51a463423d', class: tooltipCompact }, this.text, h("svg", { key: 'd6cd8374b050b4c907aa9ab83fcf9e6b64468f3b', 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: 'c3ae17c174a63d918614154ce424cb27a130fa7f', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
+            h("div", { key: '4c6b1a492d7950cb3441babbe74e2111bdbccb61', class: tooltipExtended }, h("slot", { key: '463bb3a005dba221542b3ba7ccd8c2a2e0ce8cd4', 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: '8b513f1bb9d4a661570f00d8419a054827c81e2d', class: "tooltip-extended-content" }, this.header && h("div", { key: '13df155ca7f7182c5a4975f54e20bdee6845cc67', class: "tooltip-extended-header" }, this.header), h("div", { key: '20ff208b9337416c20561e9aff96b1ab54e69d9b', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'ba54cfd306135108839d9d8406fc7a2bde0f36ef', 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: 'be0b68a7e3ccc70a0ab110bd2b847394c458bc23', 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: 'acaf20b84efcde976ffc00a357f4d8c959dbb340', class: 'container' }, h("ifx-accordion", { key: '4db43607c7d6dee1be9e5f0ee6b0990001a28a82' }, h("ifx-accordion-item", { key: 'd2130688217d7c5834889dc8c1fc58f13646a93f', 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: 'af27a0f821df405ca31c5e86367f22b763401fc8', 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: '57ca0aad426d840018e0088e49e5193540a80208', 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: 'cdbf0709aa82f614518c0b645712c42f665c0dc4', 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: '49d1949339d51007bf24358decfc08eb8f24e80f', 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: '5e3eb715d12496d0288610c8c22d460a6865dca0', class: 'container' }, h("ifx-accordion", { key: '55c2ea07edb5e85598a00cac7f4fdc2c25ef592b' }, h("ifx-accordion-item", { key: '587331cfee2c73d088590212ac0f076a26ecd16a', 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: '15c8b37bc083d8cc43d92da87b641c3d7c2b61d5', 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: 'cec5345d56df3449f1ae80fd739abda63f2a2402', 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: '4fe1e9b0308ee6b5e626e5d8daa24c4ef39b45bc', 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: '0b7393eb8404fa4a306efaa6d5c45755102e0774', 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-9ef57ec1.js';
+import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-dbf6be15.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-3cbe73f9.js';
+import { A as Alert, d as defineCustomElement$1 } from './p-5fe24279.js';
 
 const IfxAlert = Alert;
 const defineCustomElement = defineCustomElement$1;

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: 'aad9914fcf873da2a71ed7bbfa7db2be5dec54a5' }, h("div", { key: 'bc436824ba11ec68a0dca3fc0381993dc66ff593', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '9c290e9797c50dae868ab333ad613035715e1518', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: '56d342732bf6d49e668f0fc3e2f34f604ecc50fc' }, h("div", { key: '672ef798fa5d47b3c219a772c5256cc0a670f180', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '66c21033cebeb0df7a41d7ffe7f6b66fadd6be96', 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-breadcrumb-item-label.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-e27586b6.js';
-import { d as defineCustomElement$2 } from './p-dd2f84a3.js';
+import { d as defineCustomElement$2 } from './p-4cd3a589.js';
 
 const breadcrumbItemLabelCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, 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;

package/dist/components/ifx-checkbox-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IfxCheckboxGroup extends Components.IfxCheckboxGroup, HTMLElement {}
+export const IfxCheckboxGroup: {
+    prototype: IfxCheckboxGroup;
+    new (): IfxCheckboxGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;