@infineon/infineon-design-system-stencil 32.1.3--canary.1732.ff567db738403bfab315bf3a9dfc834b2dbbee94.0 → 32.1.3--canary.1732.2bc029849272d81bd448a751c8e07d74d3a481c1.0

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

@@ -148,7 +148,7 @@ export class Pagination {
         this.initPagination(paginationElement);
     }
     render() {
-        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' }))))));
+        return (h("div", { key: '53dba8a48752bd5d92abac975c8e4c3db65ae40a', "aria-label": 'a pagination', "aria-value": this.currentPage, class: "container" }, h("div", { key: '8a1658996dc6672b7e1678a728bf5764a31e1b57', class: 'items__per-page-wrapper' }, h("div", { key: '5b2c09164b394d79a54dbb47d137755bb550720a', class: 'items__per-page-label' }, "Results per Page"), h("div", { key: 'f6267cbc5e1e3083a2dea30435259e2f340e527d', class: 'items__per-page-field' }, h("ifx-select", { key: '784ca9e3226720ad9e2c895527dcc876a27a2d07', 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: 'ce02a2a122a15939498ad3a9795b85e5ef56c02d', class: 'items__total-wrapper' }, h("div", { key: 'bd19a037778a3fd8a4026df5b495f42a17083392', class: 'page__numbers-wrapper' }, h("div", { key: '4c7616b926a2b3da40e629246b48d6b61992c9b1', class: "pagination" }, h("ifx-icon-button", { key: 'ac2eee7d5b4fc00122486a87b677d8364e8eb6df', variant: 'secondary', class: "prev", color: 'primary', icon: 'arrow-left-24' }), h("ol", { key: '3fe0b33cbc563154e5805a6141bfb611d7ade194' }, this.numberOfPages.map((item) => h("li", { class: `${this.internalPage === item ? 'active' : ""}` }, h("a", { href: undefined }, item)))), h("ifx-icon-button", { key: '39dd308535225eb7b5a376af4b8c6f904e100fc1', 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: '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}%`))));
+        return (h("div", { key: '3f68729d3447897fb8b0d6ac8e5cfa4b4d1bbd0e', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '86abff96eb8a1260c96e6736f90fe4e79e2a5a03', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '55d35acd3cc70a2b0a1f9058569f1a0a7751990e', 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: 'c1a4d78f1bb621ec6d1e8d567db7a3ffca495350', 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: 'a6392cc1165e474ad66d171ab72a29a6b2975044', class: `radioButton__wrapper 
+        return (h("div", { key: 'd77cdd158994c94969dca737cb524625e36a3178', 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: 'd3057ff92826d2b482bb24f813d938d239e04c96', class: `radioButton__wrapper 
             ${this.internalChecked ? 'checked' : ''} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: 'f63fbcb2b9f939523a33e1a47fad83f832440b6e', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: 'a26b60d3dd68091e354ad9fce6cde03bf753f60f', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'db9a37d4b079cb5da768776529ad434ea7b41e3d' }))), h("input", { key: '983a166c562ad72ee022a78e88466dbd90e68997', 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: '9bf957a824cc53794df205c719772d14a8727137', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '38b619b9b9eba2d9ff59b22b0dac7afc14df170e', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'af664f76c38c0a6b5e0a74209e93da583c2e292b' }))), h("input", { key: '04b94bf5849d08d28cda7cefba44c42a10dd1b17', 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/radio-button.stories.js

@@ -77,6 +77,7 @@ export default {
         },
         ifxChange: {
             description: 'Custom event emitted when radio button checked and unchecked.',
+            action: 'ifxChange',
             table: {
                 category: 'custom events',
                 type: {
@@ -84,7 +85,17 @@ export default {
                     detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
                 },
             },
-            action: 'ifxChange',
+        },
+        ifxError: {
+            description: 'Custom event emitted when radio button is in error state.',
+            action: 'ifxError',
+            table: {
+                category: 'custom events',
+                type: {
+                    summary: 'Framework integration',
+                    detail: 'React: onIfxError={handleError}\nVue:@ifxError="handleError"\nAngular:(ifxError)="handleError()"\nVanillaJs:.addEventListener("ifxError", (event) => {//handle error});',
+                },
+            },
         }
     },
 };
@@ -102,6 +113,7 @@ const DefaultTemplate = args => {
     element.appendChild(document.createTextNode(args.label));
     // Add the event listener
     element.addEventListener('ifxChange', action('ifxChange'));
+    element.addEventListener('ifxError', action('ifxError'));
     // Return the element
     return element;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Radio Button',\n  // tags: ['autodocs'],\n\n  args: {\n    label: 'Text',\n    error: false,\n    disabled: false,\n    checked: false,\n    size: 's',\n    name: 'radio-button',\n    value: 'radio',\n  },\n  argTypes: {\n    error: {\n      description: 'Indicates whether the radio button is in an error state.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the radio button.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    checked: {\n      description: 'Determines whether the radio button is selected by default.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    label: {\n      name: 'Label of Radio Button',\n      description: 'Set the label displayed next to *<ifx-radio-button>*.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    size: {\n      description: 'Specifies the size of the radio button. Options: s (20px) and m (24px).',\n      control: 'radio',\n      options: ['s', 'm'],\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: 's'\n        },\n        type: {\n          summary: 's | m'\n        }\n      }\n    },\n    name: {\n      description: 'Name of the element, that is used as reference when a form is submitted.',\n      table: {\n        category: 'ifx-radio-button props'\n      }\n    },\n    value: {\n      description: 'The value that gets submitted, when the radio button is checked.',\n      table: {\n        category: 'ifx-radio-button props'\n      }\n    },\n    ifxChange: {\n      description: 'Custom event emitted when radio button checked and unchecked.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n        },\n      },\n\n      action: 'ifxChange',\n    }\n  },\n};\n\nconst DefaultTemplate = args => {\n  // Create the radio button element\n  const element = document.createElement('ifx-radio-button');\n\n  // Set the attributes\n  element.setAttribute('error', args.error);\n  element.setAttribute('disabled', args.disabled);\n  element.setAttribute('checked', args.checked);\n  element.setAttribute('size', args.size);\n  element.setAttribute('name', args.name);\n  element.setAttribute('value', args.value);\n\n  // Add the label as a text node\n  element.appendChild(document.createTextNode(args.label));\n\n  // Add the event listener\n  element.addEventListener('ifxChange', action('ifxChange'));\n\n  // Return the element\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Radio Button',\n  // tags: ['autodocs'],\n\n  args: {\n    label: 'Text',\n    error: false,\n    disabled: false,\n    checked: false,\n    size: 's',\n    name: 'radio-button',\n    value: 'radio',\n  },\n  argTypes: {\n    error: {\n      description: 'Indicates whether the radio button is in an error state.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the radio button.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    checked: {\n      description: 'Determines whether the radio button is selected by default.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    label: {\n      name: 'Label of Radio Button',\n      description: 'Set the label displayed next to *<ifx-radio-button>*.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    size: {\n      description: 'Specifies the size of the radio button. Options: s (20px) and m (24px).',\n      control: 'radio',\n      options: ['s', 'm'],\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: 's'\n        },\n        type: {\n          summary: 's | m'\n        }\n      }\n    },\n    name: {\n      description: 'Name of the element, that is used as reference when a form is submitted.',\n      table: {\n        category: 'ifx-radio-button props'\n      }\n    },\n    value: {\n      description: 'The value that gets submitted, when the radio button is checked.',\n      table: {\n        category: 'ifx-radio-button props'\n      }\n    },\n    ifxChange: {\n      description: 'Custom event emitted when radio button checked and unchecked.',\n      action: 'ifxChange',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n        },\n      },\n    },\n    ifxError: {\n      description: 'Custom event emitted when radio button is in error state.',\n      action: 'ifxError',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxError={handleError}\\nVue:@ifxError=\"handleError\"\\nAngular:(ifxError)=\"handleError()\"\\nVanillaJs:.addEventListener(\"ifxError\", (event) => {//handle error});',\n        },\n      },\n    }\n  },\n};\n\nconst DefaultTemplate = args => {\n  // Create the radio button element\n  const element = document.createElement('ifx-radio-button');\n\n  // Set the attributes\n  element.setAttribute('error', args.error);\n  element.setAttribute('disabled', args.disabled);\n  element.setAttribute('checked', args.checked);\n  element.setAttribute('size', args.size);\n  element.setAttribute('name', args.name);\n  element.setAttribute('value', args.value);\n\n  // Add the label as a text node\n  element.appendChild(document.createTextNode(args.label));\n\n  // Add the event listener\n  element.addEventListener('ifxChange', action('ifxChange'));\n  element.addEventListener('ifxError', action('ifxError'));\n\n  // Return the element\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

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: 'e9c42096ac6db5957388636ba18d289cde561a54', class: 'radio-button-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: '95f5a1644f8780d7721ebe539b04d60898e34dc5', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '94a278c73773b60156cdc0d30d856426181a8af9', 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: '0c359fed41079b31dae0c28ace5192cdd43cc076', class: 'radio-button-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: '735ec208d1aee30020ccd60621f90690c765c8bb', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '1d42c5173fc75d43c3497a2ed602fc781e98271b', 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

@@ -29,7 +29,7 @@ export class SearchBar {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: '6b1233aa51e61ff28d90ccbb54b01742c5ff0231', "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: 'c313e088c8320ea5ba602f5da512624edaf44c36', "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: '74fd7b8beb33b30b3e05d02ea921c52e7f4dae39', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '2616b4e80beb40226179c4690cc3746e4fadb60e', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '2876766c1659917a44e082ab9199f85dbd2c2c71', icon: "search-16", class: "search-icon" }), h("input", { key: '6ac5b6d692be544307012e761be138fd36f37966', 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: '403a2f56ce9b8d71dbb9cc14bc85fd5d404958ea', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '0533ff88e0efe32a9bf5f1cb58d543d5ad40ab4a', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, h("ifx-icon", { key: '8e3a8ddc88e737019dc4b168b8af0649772a5fac', icon: "search-16", class: "search-icon" }), h("input", { key: 'e01caa6b37d268995ed385e3ffb7121f15342ad1', 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: '316acecd8e676dbcd6f55010bb791d0746cf4937', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '86adc66b777780630ebe3e4157244c2c81ceb5d2', icon: this.icon }), " ", h("slot", { key: '72319efb1d2b4cde4a922957d71ad388b35d276c' })));
+        return (h("div", { key: '2faaac48b77184cbd62852220903045cbf815a67', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: 'a69957b7ff87a6a4f717371b9227ddf3885e3878', icon: this.icon }), " ", h("slot", { key: 'ae2b9b7a9d2a2bce3b0b28f907df5755e32dcc4f' })));
     }
     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: 'f1db16681b45767ea6de4148d7ad8668fba35498', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: '70980b04bcb50110612196979b44e2d61a7bc4c8', class: 'group__label' }, this.label.trim()), h("div", { key: '0dd8dc01db812585c2a58132d4ceb6447a16ddff', class: 'group__controls' }, h("slot", { key: 'e7f95a3c415312fe790e2288391e43e4f68d3279' })), this.caption.trim() &&
-            h("div", { key: '72784a7d56a2e39cc22b329c609828be2944e6ea', class: 'group__caption' }, h("ifx-icon", { key: 'dbb21f0562a130d57defcf648c12c6e00346a0dc', icon: 'cinfo16' }), " ", this.caption.trim())));
+        return (h("div", { key: 'f16a4862c4630a165c0af78ab548c543f361c8a1', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: '0fedee3b59c3bad5f2d456cb8d9c1e93bdaa7983', class: 'group__label' }, this.label.trim()), h("div", { key: 'a194d05342ac05dbbe14f60a4cbffcff3876dd81', class: 'group__controls' }, h("slot", { key: '3c14e9cdd5aec6283dff6d61ee4fef59cef54b18' })), this.caption.trim() &&
+            h("div", { key: '76d3c32b1670d7c4690ddd235a19b5f11bcd8be8', class: 'group__caption' }, h("ifx-icon", { key: '7418495c943d83788a2a1b2dac6131041dc049d6', 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: '40ae2ee9e22586ab4119c044708dea062f978db6', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: '87143d41c3c0513eada166b11052c55e3d993b62', class: `${choicesWrapperClass} 
+        return (h("div", { key: 'fea26b0d75050a64b85be4a9d60c5353e64c28a6', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: '122cdbeb12cd1c268a274971a0d0619d95fcc0a2', class: `${choicesWrapperClass} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: '2019a42f8e730061cfb502531f5991d2d5e07afe', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '6fc0ac048ab143a933ba79c48ed86960197ca9ed', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: '46e95d4cfb9c38283028b92d35b14a1430586e81', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: '8e8ae26a55428afd386d940815c6414ae58a1f37', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: 'ac1990b97fe0787a8186f27c4258eb9d0f847858', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: 'd6284be7bb197eaff05397f7246e5b6cd20e1a9c', 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: 'c138c46ae14722f0629b89649824a6414e19fcaf', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '3999f9e02015fecc4758b269c43d2f0c3ba2ba69', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: 'd91f27712ff0febb0a6186b0dec1f41eff67c5d4', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: '580986c3a71f9210c1a48caa6ee5f02d46531aa3', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '002e77d28f1e5c75c7e6df46680120a7e7061727', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: '0cf642c93a5daed04a01e7229573c06c45ab843d', 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: '37d979ae4fab76379eba0afe72a0b1cff75ba6fb', class: "ifx-slider" }, this.leftText && (h("span", { key: '54364e238b205ff9b8906b4f7a84f39e8924806b', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '898c22fc7020ce494ab199b0ae1a53f19538879d', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
+        return (h("div", { key: '8cd3872e29ca5a7c35ef9991db8f74b2dfb1562d', class: "ifx-slider" }, this.leftText && (h("span", { key: 'af9eb0dd16d9936d18be75eef0c6b2ea8a6617a4', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '265016e5326dfadd3ca9080384bd1ab863e4a4c7', 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: 'dcd74689d748a499bf7e4a1f291808ca09e91be5', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: '46943c6f10919c7822b998c5fc99392d5bbf581b', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '333d2a8578ceeeb6c4b9d8e12ba90ac5bf96ebd6', 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: '6ce6262cb945e24e813f59137fb3e4eb999937d0', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: 'be785686c57bb4fd19a333bd45616bb90e947e33', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: 'dfbad6ac5e8965642419846f7b85501ea98823e5', 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: '036b7ba57d3d4612adf02dc4af7bb10ab44525bc', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: '57506cdc9b93523472a2dd9730ad63fe0747edc3', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && h("div", { key: '9e9d6e55e1fb021dea19d07b640e36b6c2aeda8d', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '742486b0d84452b2603aaf397c0f09f01a2cb7f0', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'fc459287dbaee14447dc150ac01a52dad8ce6add', id: "spinner/conductor" }, h("path", { key: '842b3d6a1f256a1de213a205e9eeec563bd9c8c7', 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: 'cf978839be28932d5660441d1b37152d44a1219c', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: 'dc5fe14851c4e74310e23bb0197815cbd099c26d', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && h("div", { key: 'db1d3e27d6f4eb42064fe9483de7add1b51be33c', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: 'ac0243c8ef637e9a6895555ce04a94c331b33f9b', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '5fc5de05b44ebbde3cd88f57a92ae2e82dad7396', id: "spinner/conductor" }, h("path", { key: '9dd49a642049559ed3b56d6f8e4697de6763fd47', 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: '0537cea5ff8d9b92bf309e601d32657de3a3d81c', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: '0afda2ddc5bf64ac2b6c09317ceb4d73cfb39cf8', class: `dot ${effectiveColor}` }), h("p", { key: 'bb64b4b6595ae980d98d74ea9116c4c040e72ff5', class: "text" }, this.label)));
+        return (h("div", { key: '5584af4d19e2ed3e4c43937254b6496ac3498bab', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: 'd6ea110d9b65e05257f2a58220c78833af2e61c5', class: `dot ${effectiveColor}` }), h("p", { key: '4593faaff5f1a430d7c1ef77dd182ffac5dcdfe1', 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: 'a286ec01fede1f1887f7c0b4796805618c8f5ecc', "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: '89bf8ebdda8d27e4d64eb115375f101e6bd63a47', "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: 'd8230818a17da9e6a84a140c3b2b912313884967', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '4d8c49a1ee892eedd31aa645da8f57aa655b7a65', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            h("div", { key: 'a6263bf57f9ce8bc615e8d611b0128e075d148b9', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '17ecbfc2a12141e58e2481efc54bd86683f5e995', icon: 'check16' }), this.active && h("span", { key: 'd0139442be7227f075c6ab065cffc991a87296c9', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '867418f5a3f7e5958521cde8634ed03e68f43921', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && h("span", { key: 'a97d98c73df0e64937dd10fca6b456e19000a509', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
+                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: '7d132907a091474aab641783df974ef713d2e082', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: 'addc3091c2c1bff1f15bff47b688b41503ac0170', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
+            h("div", { key: '36ea1c2447f4d1315c67c1d7c55c008ada016eb7', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '7f9cd53a08acdb8a91c636a033d4728159857533', icon: 'check16' }), this.active && h("span", { key: 'fd7461691611746decffa1f53a6d7c5d3401e267', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '47b3af98bab586eb434a8161fe1b3954268aa7ab', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && h("span", { key: '1e67448a5a81c2dfb049ac20f0dd353dd83e3ab6', 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: 'dc6560632dc1edbaa8ebdec515717a26064a2d8d', 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: '3ef384da05179cc06434b7ab707b12352f292cfe' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '6368938443c139f025aa0e37295f6a4002aab7d0' }))));
+            h("div", { key: 'fc375ac7341cdae182d5cdb32e03a7ca93dd10aa', 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: '40fc3dfa9690e41aa522857c67e07765f68251dc' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '5d43cd127b2a67b63d976084ef8265d048c27b2a' }))));
     }
     ;
     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: 'ae5ee9d781797a4c1a501a407875f34e8e5d52ed', "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: '719914f95d3ad6cdd1a691e850a87eb071bd8cce', "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: 'e9b93653f41f8c147ea0e1ab9b9b378982bb7ac6', class: 'stepper-progress' }, h("div", { key: '801055fddd1117838e8632dd5b6c4737f7333848', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '524ddcf264251bd8d232eed88f9e6fe5bb70127c', class: `stepper-wrapper` }, h("slot", { key: '8a4272a508f426430b11b2f650989b5989157071' }))));
+            h("div", { key: 'c4ebfb6dc14d0d80c1b5ad564fedacab324773d7', class: 'stepper-progress' }, h("div", { key: 'dffd68985729abdcd767270d85232eb83422fa2c', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '1b5016a54756a1d000449c185c1ee116dcf0acf2', class: `stepper-wrapper` }, h("slot", { key: '923375c6e3929b63796198d1956e702ee7cc456e' }))));
     }
     ;
     componentDidRender() {

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

@@ -63,7 +63,7 @@ export class Switch {
         this.internals.setFormValue(null);
     }
     render() {
-        return (h("div", { key: '6b56f571bf38be441aed96967afad78b5a8c1218', 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: '54c0602b247bacae3bc8112515ac348e723c2d4a', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: 'ea15edde0e7f03cc58d5ccf1b57d5bf10670f467', class: "switch__checkbox-wrapper" }, h("input", { key: 'c072e35bceda6b9288cea93af77f10c5462831a4', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '0278ce31ef374e478cae26befe6fbd95be087ded', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: 'e8de289b1b12ea9de9d7b5b076c9e258eeeba733', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '335b0fca0d94f0ac43dee1571a4866d4f75fb70b', htmlFor: "switch" }, h("slot", { key: 'd34f2450a877604ab63b6a6d2125810f2a877965', onSlotchange: () => this.toggleLabelGap() })))));
+        return (h("div", { key: '360fc8c66c42ca0abe29a8a1c7f719d7584ff84f', 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: '13f5e32ddc32582010d9e1c27f4c030b86e36712', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '0f931031b5d338598f95dad4ce43a5fca6a0d8a3', class: "switch__checkbox-wrapper" }, h("input", { key: '86731f8df0ad982510263794f1c498066f89e3f9', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '2c26fa3bbc7b2a095b51dc89088906c7fa069fb9', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '1136f618847607a27671e4a6ddf98a6506bafcbb', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'bec0ca4982b7d978f54633341464820f18015603', htmlFor: "switch" }, h("slot", { key: '83948bfbeec352d2666d96299302a9ba01d3c7d2', 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: '150adcecb6da42b75fa6d5b9a53122d6d1d92726' }, h("div", { key: 'ff408ac26d1fb4d2454c8a8f023d64028a508487', class: "search-container" }, h("slot", { key: '49fadce7b168de4ce2b76e0630447826edfb539b', name: "filter-search" }), " "), h("div", { key: 'de8e046c486a42f3f785cc291534014621a1f851', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: '01136f8065227590752f3afb2e56b1a76f44c707', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: 'b3c1e2e833430de4a2714668af47a8dd956ec836', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '6e610c72889281cff09669bc3bb8a8220f1a32e1', icon: "filter-16" }), "More filters"))))));
+        return (h(Host, { key: 'c6fdcfa11cab84b18739fbc15b4b78ed242f5972' }, h("div", { key: '6587f6f5a38fb55a015424d6154a41dae5f6fd6d', class: "search-container" }, h("slot", { key: '8b3cd1b76255a1e75aaffa66e55555c851fe6414', name: "filter-search" }), " "), h("div", { key: '46931e75d7d3b059eff8754108423feec39492c1', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: 'ee978ec30727f3e2b0bc01b7b4521f4959b54b65', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '9bfa04e24e285d6a4bab017a8c8586b7cf30b2bf', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '7214adb2f93ed14ba561645e221de94bc72f120d', 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: '3b673a1346ddd3e5a4725de6fc14d42a722c42da', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'd12d1ceba9cd0a4d8eb98c2f352cffd7350de2dc', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: 'f29133a7f7dd67535632ab410d507fee422a6f57', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '9659b5a7f4957e3466d68bd20097fc5c86441839', class: "text" }, h("span", { key: '27ee74ba15e002f4515e06b577874cf38176d030' }, this.filterGroupName), h("ifx-number-indicator", { key: 'c863e14a3786b5760581bd67738324d99d5269fd' }, this.count)), h("ifx-icon", { key: '18c3af713e2fb900498dc12d4293e7dc7d631abb', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: '8899694fb8955f9917f965ba15d0a97843e3d56d', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
-            h("div", { key: '2b4070a714df749d3d1a518dbc62ef14740f709c', class: "filter-accordion-container" }, h("slot", { key: 'cd7c175fa97a521d3e86cbcfc827768f8af6820b', name: "list" }))));
+        return (h("div", { key: 'c5c8b3d3c8ff3f7b0c4ae3e546bc5415e0fc4b4b', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'd57861aa32f87723622a7fe468c71918fcd0f27c', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: 'c5df602ee0cbf3f5a5011be319bdf302c8936a1c', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '12b00627cbacaf3ba72a96d59a74062527b32b62', class: "text" }, h("span", { key: 'edb0beaab7ffb4b189215ff046c0175b83e621b4' }, this.filterGroupName), h("ifx-number-indicator", { key: 'd4409330033dea5d5396bf04ef3120f6b14b55be' }, this.count)), h("ifx-icon", { key: 'e1354590dfad3ba22ebd3e4b9fe078e072450825', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: 'cbda8600f59f8565ec746c7674dbd2ddde91efa4', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
+            h("div", { key: 'f0f0e00542fb7a4211b47159e293a8e7a32184b5', class: "filter-accordion-container" }, h("slot", { key: '4a29c3fc53881c41eda0264dcf86e7ccfad525d9', 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: 'd260a94c8b1d8953ce77d0998f30588a12565212', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: 'd59e49ed679ffbdf15bba75564a28e99ae7e03fd', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: 'c27b106ee925b3fb49d4d2079ea3af5e7276d041', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
+        return (h("div", { key: '606ae49fb29904d1b0314c03be066a7a10b9c0aa', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: '6cf90ea2d9b24b72744d04f9da3c57107e16583a', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: 'fe0fa6af047dcd027e2817dbcd6ae4828088cb87', 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: '74b9439f764d77979468627fe8a1fa7d559d1b46' }, h("div", { key: '7585a9ca7a2954e5ed8d77e24acd5bf907d6a900', class: "filter-type-group" }, h("slot", { key: '62382b5b17b99abade8296c0f7e30db5726eef80', name: "filter-search" }), h("slot", { key: '09db9f420ec54d6e3defbda1297d254bea92bbb6', name: "filter-accordion" }))));
+        return (h(Host, { key: '3f1e289d082b3fcca29d54c4fea6db177f991f7a' }, h("div", { key: '3774c57ae1329cdbb4ef34f2340342452c7869df', class: "filter-type-group" }, h("slot", { key: 'f885e9495ae9669cedfbb74bd934ba9921fef8db', name: "filter-search" }), h("slot", { key: '17936baa7a2ebc717414f7a25c56fe54d5cfc07f', 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: '8e7ded517c620a3794931e518c765f3c10099565', 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: '5d7a6f49c9fef7859a343c3b182d606595b0d5b6', 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: 'c627e6b4cdfe422a9a22951c55559c8211b9f0e2' }, h("div", { key: 'a17e6119540a54231423bb692416843875139809', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '31cddd9f670e81a0bea14509623660eec40819de', class: "sidebar-btn" }, h("ifx-button", { key: '681e1e3322f3b5809967da25a381e09bbcae1de5', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '7cd6d160dd507fbf3e5163df9358a34a768b3f04', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '0739bdbe36dff5c853e7fa6dd2877e8b0813af76', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '5ae0ba03d0b84abe6405b4ae467c03f9c38a7629', class: "sidebar-container" }, h("div", { key: '75b53b2dd1adbc2df228834559378d77a000e836', class: "filters-title-container" }, h("span", { key: '69519979d1dd7ccdd8770855dbd98abb4d7f7f9d', class: "filters-title" }, "Filters")), h("div", { key: 'cd301d4ef561a62cbc84efe9cc900151d4c20e06', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '2d17e663f4c4cd32f4ba32d43528b266aa194304', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '7ee05a23c7b97755eee231f87cb6a826ec678687', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '6839faf226e307066b1e7e5483776bd931f107a6', name: "topbar-filter" })))), h("div", { key: '83a73a230c5aebccdc2b09623df1ff4cfc02877f', class: "table-pagination-wrapper" }, h("div", { key: '0284a5944f1e7eb044460a7c514518cf0938deb2', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
+        return (h(Host, { key: 'ca27d66579b36a35943b42f26c152355337fd7e0' }, h("div", { key: 'a8441afd7cc158dcb845ef0e08e92a6f253295d4', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '4562d5b52546a66bb44ed20d141770b82babe011', class: "sidebar-btn" }, h("ifx-button", { key: '2b1ca677c2d8534ef7e0019d9c0fee6a4c7ebeb2', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '4edc158cec10a16b3fdcec3389cbb726247219cc', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'd82c1a1d8d7c25f0c5d4301e552a1f07febc345c', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '5000c0f4b4c342ce863d0c63042c41c7b10e71d0', class: "sidebar-container" }, h("div", { key: '971fa35458bbe4391b2bca5673bb4395db9ffb5c', class: "filters-title-container" }, h("span", { key: '71be790bc93bdefe9df3087de7d5f40f37a51b71', class: "filters-title" }, "Filters")), h("div", { key: 'e6e11f96cfdc23dd1e10441c5a68583f9f5e61a6', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '6fcc1e285a543c59c0c1d2b542ff10d28700af5d', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '2ee1540762249a77400aa3cb509742ec12443eaa', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '33e466bc340c5de4be400dcf4d7a0afd3ed3f323', name: "topbar-filter" })))), h("div", { key: 'f9d150eb60941ffa62cfd1fc31d302078da8e4a4', class: "table-pagination-wrapper" }, h("div", { key: '984fe856aa3e3df884c0adbe0a7aef7b218af0d5', 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: '2911c9c2d002b6d2a20f3c74700b32c5e23ef6b6', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: '540073573af36c1dfed465afe0dce1289e054bd8', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: 'f3314d8879e35b69da07e676d9ec0f6acd9c86c3', class: "matching-results-container" }, h("span", { key: '5236eae7043e7cc53f2847ca3ecda820da464e01', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: 'f6d7b849edb5e05e1ca517c1029d2f790fc4a882', class: "matching-results-text" }, "matching results"))), h("div", { key: 'f3f25d93a715bf3ad581a3818572a0cf8bc76f55', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '7703f7f97e31147de6de96643aeadf6a22cf91d4', 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: '15ddf1b9ec292abcdeef5df58e1915bcb1c0cbc7', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: '2a61e609ae85ee9a9cf7b58fc980377285172c6e', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: 'b6e47ae8fdf63b9c290892007365fc8d016c48f2', class: "matching-results-container" }, h("span", { key: '6d446c83abea3b3975666b590beee51676deb99b', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '6dfee4e96e729a799a63f567631eacbaf8ccc6db', class: "matching-results-text" }, "matching results"))), h("div", { key: '06ae73e8b0f9ee655d7e85b8a87e0b6f96bd1173', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '22a918d161d6b827030d2c7a41f43586fea5de0b', 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: '1d910fc1a45de4623d64480b6ebf7fbc4a3f0915' }, h("div", { key: 'c10cceb9acedf081c6ae1bd8d951be4463c6c54a', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: 'ad4a2da518eb3783ba682bb1672018053e00c239', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: '629cd77c309556fc715712db84c821037e46747f' }, h("div", { key: '1d12078a4676f7e0134d156bfaf12f8595d2f61d', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '5be6d680c91b3e378881858274d0cfdee760e698', 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: '3f3568c625f064beb9e5911ea61f1f65f9d168a6' });
+        return h("slot", { key: '37043a27bd989be177366265767fcd7a9ed21e87' });
     }
     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: '9769492731965486ef137d7cd608fc93f5b035d0', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '32c22cdb57314fccb9e85439d1d02805bdd26cf7', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (h("div", { key: 'f2663abe44d99b51791ae20c24fd6d8255bf80b5', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '0b949be9e67da9496346bf619af9c322236c8fd3', 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: 'f0e57c02187b3dca86e3f8f80ae6c0901fe2e000', class: "active-border" })), h("div", { key: 'ebaf0baf4c0d5d021a7908be3ec417e77652f9ec', 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: '2caa33a941a3aaa5b6a9d2e6f748f7880f1037cf', class: "active-border" })), h("div", { key: '9dc32106ee0e5dda07ed4e33c829a67772463c9d', 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: 'c57a3b790f8b1baaa7bce8d9e4d645cd60aaae23', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: '0c2f9a8dfd9bd368a771681cd44ff55f7b3e5cd1', icon: this.icon })), h("a", { key: '33510241f8f7472d520ae8449489881932e94a11', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: '45e9f1c2fdd345c3c3f7c2d9983afe601950369f', class: "label" }, h("slot", { key: 'f4f9b734e69537de9b5ae714175294d49f17895d' })))));
+        return (h("div", { key: '77c20a8047f83ad313438cefde30e0bc5b6551ef', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: 'd13d992176898e60faf045c1ebec0967e44d0825', icon: this.icon })), h("a", { key: '2507414c6bb49499c9f9c0361575b6df1fbb55f6', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: '946daf5532025ce4da084044bb14e1cbd7032ad0', class: "label" }, h("slot", { key: 'fe49bdfd098c349cfdcbfa414717a34dc28ef617' })))));
     }
     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: 'ae369792f4b8a64e727d7c62cec7877ef3866318' }, this.isTemplatePage
+        return (h("div", { key: 'b71800de1c161e43063aeeb49c1e5d4f3a742a2c' }, 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: 'b737ea67c4af14995d07d8c0843b2cae553f74ba', class: 'templates__container' }, h("div", { key: '3cf98be4ca65810802329b9a6fa7904c4149240e', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '47f87c266bc628a90e6436178922fbd38ee342b4', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '77a4f676d8acf4337c30ba922e69c23dc60d272e', class: "alert__wrapper" }, h("ifx-alert", { key: '85402b05d5dd23e9a6d483a333bc52c019e35e8e', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), h("h2", { key: '17a4171cdc85b4c8cd0cf72faad43bab272f259a', class: "templates__title" }, "Choose your template"), h("div", { key: '0c16ba839a65520132c70c08dbd271107c8f1508', class: "templates__wrapper" }, h("ifx-template", { key: '51b962bbd46d480a10ed6bd53effbd9ed8b6acd5', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '68788742b3514cd36c0530bd48a48b5b0d319c2d', name: 'template-02', thumbnail: this.wizardTemplate }))));
+        return (h("div", { key: 'bf4c5ead310d88f7fe5c9bc213e40267bf429cb8', class: 'templates__container' }, h("div", { key: 'e248745b8db68d2b1512202fa134d042edeb010e', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: 'f10c5d5b37071427b674f11a4debd5a80df1af5e', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: 'e5960d85b1e46f37580a3b62547164d0356cf575', class: "alert__wrapper" }, h("ifx-alert", { key: 'ea1ce75c12f68e79f688e5bca76f40cf25fd72f9', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-24" }, "All fields are mandatory"))), h("h2", { key: '8bbfa839ab5da993bc89ff3371e8bc64460f1c68', class: "templates__title" }, "Choose your template"), h("div", { key: '9f30ea639383bde71678215f0b80ee7111c4c5b1', class: "templates__wrapper" }, h("ifx-template", { key: '06d4725d8707904e4af6c4e302fbd00900cb0d9b', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '755c2d29318c854be38e364d6c971b9931da19c6', 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: '9fa2f5f55506d71628f60e4dd9e6d5fd99858b4c', "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: 'a4ba691bc10bd596c27b9971aa0369cad9f48144', class: "textInput__top-wrapper" }, h("label", { key: 'a4ee448f393c4d2619d3451ab9d4eb56048137d3', htmlFor: "text-field" }, h("slot", { key: '0bab9b9c54e96a9dadf6d0aab8dae0746ac080e8' }), 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: '7d982d3a66628c7401885dc7f266c5cb96fa8c71', class: "textInput__bottom-wrapper" }, h("div", { key: 'a8bb20edcaf3107351da59949a122a859695b1a5', class: "input-container" }, this.icon && (h("ifx-icon", { key: '122114cb91e26d7681e53501d1f417f3abad30e1', class: 'input-icon', icon: this.icon })), h("input", { key: '0bf855e4f373a0ee8b060feed604a8afafe16962', 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: '12a53a8c847f15a3fff0a294f93160186730633d', "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: 'c6b8e09d2f52fbd4d2d508f0a805ed3ba2c50ead', class: "textInput__top-wrapper" }, h("label", { key: '2d35c0176a2933da076db9cb4167816a6c866a11', htmlFor: "text-field" }, h("slot", { key: 'dbb3947e407d0db8917407c0bd5264ec8e33e4e0' }), 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: '0ad0a1e7626c6bc071389538b6c16e4fe0ef9bec', class: "textInput__bottom-wrapper" }, h("div", { key: 'ea1ec3e191180ebae21195f652020a893bd126cf', class: "input-container" }, this.icon && (h("ifx-icon", { key: 'f009d76f1c699a484a719dce27890ecba361b46a', class: 'input-icon', icon: this.icon })), h("input", { key: '503e6d9c709c0e722d22edf74a917b775efd0da0', 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: '705ba8d623ff1279edb392709caf8bc4dffa9239', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
-            h("div", { key: 'b7eba477a90d5bbef26a21c5a132dd33964147be', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
-            h("div", { key: '3acbde335088938f94a7174794dad57dd92f99be', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
+              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: 'fafe1d0613d54b47ae8899412a70e654b7141ec2', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
+            h("div", { key: '3da6b9848cdd149eafd1180dd3220e09602a4ed1', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
+            h("div", { key: 'c8fba8ec0503ef2daed7aaf2725cc0a8f7b31d04', 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: '518ad3c1cc1ff2650025953cfde72fe0642502a4', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '072edb66bd59e6313594b28ef7d9944c8eee9553', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: '413d0d9874d345c9de1813cd14565c5c5e9bdcc5', class: 'wrapper__textarea' }, h("textarea", { key: '93eb5a2e5310acdc0d1d462b0fd5e2997dad25c1', "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: 'f26e904e2923baa12a39e4356b1d4a265039e4c6', class: 'wrapper__caption' }, this.caption.trim()))));
+        return (h(Host, { key: '146538196346541c8b375878f2f2160375acd65a', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '04ef3fae2b80fff2a201cc9525794fa9eaaf3e24', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: '385249e168003aa04ad324959849f48efecfbab5', class: 'wrapper__textarea' }, h("textarea", { key: 'f4a39d7c68dae8ea6dde67c1d11a7d5c94d41487', "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: 'b6d6d4127b5db04d80031fda02a4a34ccc61c439', class: 'wrapper__caption' }, this.caption.trim()))));
     }
     static get is() { return "ifx-textarea"; }
     static get encapsulation() { return "shadow"; }