@infineon/infineon-design-system-stencil 37.13.0--canary.1964.4c0dbe58a38ebf64252c372b89ceb2ea2b5b3aeb.0 → 37.13.0--canary.1964.46dfc755d615c2e9457c944038d41653343e16b0.0

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

@@ -158,7 +158,7 @@ export class Pagination {
         this.initPagination();
     }
     render() {
-        return (h("div", { key: '14f71cd0291d0b01d3b9da91ecec8d3908796107', class: "container" }, h("div", { key: 'd28f3b1a05cd937eec0efa30b661c1e5671542d3', class: "items__per-page-wrapper" }, h("div", { key: '504286b0c1d4d1a77e283612389e2f0a98f76ce3', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '61fb210192777dc3ebf7810f0d311eae2abd3dc3', class: "items__per-page-field" }, h("ifx-select", { key: 'a576ef3d2ee4feb8d9f04550fa08e0a75fdafc07', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("div", { key: '72e40aa84cb9ba69cb4fcbe8d057cf8c6067ac13', class: "items__total-wrapper" }, h("div", { key: 'bf3777a0d9c82cda57125b8bab4a1cdb49f1cfb2', class: "pagination" }, h("ifx-icon-button", { key: 'bcda07cf867ee60e5896d853709b244d2cf4d3ad', class: "prev", icon: "arrow-left-16", onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: 'b3b9929e2a05c15aae434b3749dc748a46491cb4' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: '719da5df49fe092465e856c43e72d187fc7231a5', class: "next", icon: "arrow-right-16", onClick: () => this.changePage(this.internalPage + 1) })))));
+        return (h("div", { key: '724b3d84f8dc469898c4126b76637c77567f195d', class: "container" }, h("div", { key: '171579231fc284e71acfe1df372e6750742a2973', class: "items__per-page-wrapper" }, h("div", { key: '916428fde974123aa1b805f4815eae6dc2a64097', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '88e7827159c37eee23109dd956863bdc1335f043', class: "items__per-page-field" }, h("ifx-select", { key: '08fc2626e633d33dfa0565074464adc4533072f2', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("div", { key: '1e0299c9b3ba3bbe229039cfe0f298a821b90aea', class: "items__total-wrapper" }, h("div", { key: 'f8c507a16e070b199a75b30138829528ee434ccd', class: "pagination" }, h("ifx-icon-button", { key: 'c6fd48710f97119a71745ff0909b7072aa645e21', class: "prev", icon: "arrow-left-16", onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: '860a2420df4b9cdfbed1df0630e8227531b61276' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: 'c3645817a9dbc92185d0eef3c71c2231246b3d90', class: "next", icon: "arrow-right-16", onClick: () => this.changePage(this.internalPage + 1) })))));
     }
     static get is() { return "ifx-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,7 +22,7 @@ export class ProgressBar {
         }
     }
     render() {
-        return (h("div", { key: 'ae14994774c95eca7dddebcef8896eab31e3784e', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '160d93a72e857e49ca953939eb433a24e80f5c75', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '87952d6c604aa81019dcb2701d923d0279144599', class: "label" }, `${this.internalValue}%`))));
+        return (h("div", { key: '8b85b9583b257c2bb08471502ec81eaf18240299', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '4d4ab3b145e47f2ef34b9515d85916bb27d7b2ce', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '43ea3c707df2f815321e7d6a757cb164fbe11500', 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

@@ -96,10 +96,10 @@ export class RadioButton {
         }
     }
     render() {
-        return (h("div", { key: 'dff8c4d9020b1f126930910e9d9319574c6002b5', 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: '4f16ae3a8febd02a1d490fce0ceda6d25c9937d9', class: `radioButton__wrapper 
+        return (h("div", { key: '5e75df7a30c2cea9175e7bfdf2338bf308585240', 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: '851d2e376d626c4f92dd4167198bf9426bc85584', class: `radioButton__wrapper 
             ${this.internalChecked ? 'checked' : ''} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: '1e5989189f34b56d73facf431e222401fc8efdc1', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: 'bc6de8675f5682cd867faf26363da025606bf25d', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '3517baf1ff4751af0c0fc3b50a0130b619758dd7' }))), h("input", { key: '676bb357209466062e8d6f50d4d7abb8a725b832', 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: '53727679b0639b150fff43622e506a45e7de112a', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: 'e9567cca513c3bab43ce080e63496c7c21bec0ab', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '51684282fdd8f6a559967773a193e1b02e014965' }))), h("input", { key: '876adfe24bba9510cf06e09cd8b116df326bbe91', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
     }
     static get is() { return "ifx-radio-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,13 +25,20 @@
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 400;
-  font-family: "Source Sans 3";
   margin-bottom: 8px;
   text-align: left;
   text-underline-position: from-font;
   text-decoration-skip-ink: none;
 }
 
+.group-label .required {
+  margin: 4px;
+}
+
+.group-label .required.error {
+  color: #CD002F;
+}
+
 .caption {
   margin-top: 8px;
   align-self: flex-start;
@@ -51,7 +58,6 @@
 .caption-text {
   font-size: 0.75rem;
   line-height: 1rem;
-  font-family: "Source Sans 3";
   flex: 1;
   text-align: left;
   text-underline-position: from-font;

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

@@ -7,6 +7,7 @@ export class RadioButtonGroup {
         this.errorStates = new Map();
         this.alignment = 'vertical';
         this.groupLabelText = 'Group Label Text';
+        this.required = false;
         this.hasErrors = false;
         this.handleSlotChange = () => {
             this.initializeState();
@@ -49,7 +50,7 @@ export class RadioButtonGroup {
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (h("div", { key: '110dd90eedde21f29a02bf7844c046cc1b5de641', class: 'radio-button-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: '891bd69906ffeefeb2641e72f4d468c100f43b90', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '32b754f9b0b47fb53bdaeb825740114b7b6fe737', 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: 'ca42b9470187fb67619fad0e62c0c7aec3f5fb62', class: 'radio-button-group-container' }, this.showGroupLabel && (h("div", { key: 'b89340bfcabb087301338bdedf04215d87a3e661', class: "group-label" }, this.groupLabelText, this.required && h("span", { key: '6b851812a7f1cdbe3b0a8450bd8cb1569f3f893a', class: `required ${this.hasErrors ? 'error' : ''}` }, "*"))), h("div", { key: 'd46fc6be13198ccb04b50fa499c8d4680ae064b3', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '89f23313cb670cb1d18060cb38f7ece2d5401d7d', 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"; }
@@ -200,6 +201,26 @@ export class RadioButtonGroup {
                 "setter": false,
                 "attribute": "show-caption-icon",
                 "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button-group.js","sourceRoot":"","sources":["../../../src/components/radio-button-group/radio-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n    tag: 'ifx-radio-button-group',\n    styleUrl: 'radio-button-group.scss',\n    shadow: true,\n    formAssociated: true\n})\n\nexport class RadioButtonGroup {\n    private errorStates: Map<HTMLElement, boolean> = new Map();\n\n    @Element() el: HTMLElement;\n    @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n    @Prop() size: string;\n    @Prop() showGroupLabel: boolean;\n    @Prop() groupLabelText: string = 'Group Label Text';\n    @Prop() showCaption: boolean;\n    @Prop() captionText: string;\n    @Prop() showCaptionIcon: boolean;\n    @State() hasErrors: boolean = false;\n    \n    @Listen('ifxError')\n    handleRadioButtonError(event: CustomEvent) {\n        const radioButton = event.target as HTMLElement;\n        if (radioButton.tagName === 'ifx-radio-button') {\n            this.errorStates.set(radioButton, event.detail);\n            this.updateHasErrors();\n        }\n    }\n\n     // Method to set the error state of all radio-butttons in the group\n      @Method()\n      async setGroupError(error: boolean) {\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n          (radioButton as any).error = error;\n        });\n      }\n\n    componentWillLoad() {\n        this.initializeState();\n    }\n\n    async componentDidLoad() { \n        if(!isNestedInIfxComponent(this.el)) { \n            const framework = detectFramework();\n            trackComponent('ifx-radio-button-group', await framework)\n        }\n    }\n\n    handleSlotChange = () => {\n        this.initializeState();\n    };\n\n    private initializeState() {\n        this.errorStates.clear();\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n            if (!this.errorStates.has(radioButton)) {\n                this.errorStates.set(radioButton, (radioButton as any).error || false);\n            }\n        });\n        this.updateHasErrors();\n    }\n\n    private updateHasErrors() {\n        this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n    }\n\n    render() {\n        return (\n            <div class='radio-button-group-container'>\n                {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n                <div class={`radio-button-group ${this.alignment} ${this.size}`}>\n                    <slot onSlotchange={this.handleSlotChange} ></slot>\n                </div>\n                {this.showCaption ? (\n                    <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n                        {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n                        </ifx-icon></div> : ''}\n                        <div class='caption-text'>{this.captionText}</div>\n                    </div>) : ''}\n            </div>\n        );\n    }\n}"]}
+{"version":3,"file":"radio-button-group.js","sourceRoot":"","sources":["../../../src/components/radio-button-group/radio-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AASzE,MAAM,OAAO,gBAAgB;IAP7B;QAQY,gBAAW,GAA8B,IAAI,GAAG,EAAE,CAAC;QAGnD,cAAS,GAA8B,UAAU,CAAC;QAGlD,mBAAc,GAAW,kBAAkB,CAAC;QAI5C,aAAQ,GAAY,KAAK,CAAC;QACzB,cAAS,GAAY,KAAK,CAAC;QA+BpC,qBAAgB,GAAG,GAAG,EAAE;YACpB,IAAI,CAAC,eAAe,EAAE,CAAC;QAC3B,CAAC,CAAC;KAsCL;IApEG,sBAAsB,CAAC,KAAkB;QACrC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB,CAAC;QAChD,IAAI,WAAW,CAAC,OAAO,KAAK,kBAAkB,EAAE,CAAC;YAC7C,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAChD,IAAI,CAAC,eAAe,EAAE,CAAC;QAC3B,CAAC;IACL,CAAC;IAEA,mEAAmE;IAElE,KAAK,CAAC,aAAa,CAAC,KAAc;QAChC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAC9E,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE;YAClC,WAAmB,CAAC,KAAK,GAAG,KAAK,CAAC;QACrC,CAAC,CAAC,CAAC;IACL,CAAC;IAEH,iBAAiB;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3B,CAAC;IAED,KAAK,CAAC,gBAAgB;QAClB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YAClC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,wBAAwB,EAAE,MAAM,SAAS,CAAC,CAAA;QAC7D,CAAC;IACL,CAAC;IAMO,eAAe;QACnB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAC9E,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE;YACjC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;gBACrC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAG,WAAmB,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;YAC3E,CAAC;QACL,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3B,CAAC;IAEO,eAAe;QACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;IAClF,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAC,8BAA8B;YACpC,IAAI,CAAC,cAAc,IAAI,CACpB,4DAAK,KAAK,EAAC,aAAa;gBACnB,IAAI,CAAC,cAAc;gBACnB,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAE,YAAY,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,QAAU,CAClF,CACT;YACD,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE;gBAC3D,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAU,CACjD;YACL,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE;gBACxD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,cAAc;oBAAC,gBAAU,IAAI,EAAC,WAAW,GACjE,CAAM,CAAC,CAAC,CAAC,EAAE;gBACtB,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAO,CAChD,CAAC,CAAC,CAAC,CAAC,EAAE,CACd,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n    tag: 'ifx-radio-button-group',\n    styleUrl: 'radio-button-group.scss',\n    shadow: true,\n    formAssociated: true\n})\n\nexport class RadioButtonGroup {\n    private errorStates: Map<HTMLElement, boolean> = new Map();\n\n    @Element() el: HTMLElement;\n    @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n    @Prop() size: string;\n    @Prop() showGroupLabel: boolean;\n    @Prop() groupLabelText: string = 'Group Label Text';\n    @Prop() showCaption: boolean;\n    @Prop() captionText: string;\n    @Prop() showCaptionIcon: boolean;\n    @Prop() required: boolean = false;\n    @State() hasErrors: boolean = false;\n    \n    @Listen('ifxError')\n    handleRadioButtonError(event: CustomEvent) {\n        const radioButton = event.target as HTMLElement;\n        if (radioButton.tagName === 'ifx-radio-button') {\n            this.errorStates.set(radioButton, event.detail);\n            this.updateHasErrors();\n        }\n    }\n\n     // Method to set the error state of all radio-butttons in the group\n      @Method()\n      async setGroupError(error: boolean) {\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n          (radioButton as any).error = error;\n        });\n      }\n\n    componentWillLoad() {\n        this.initializeState();\n    }\n\n    async componentDidLoad() { \n        if(!isNestedInIfxComponent(this.el)) { \n            const framework = detectFramework();\n            trackComponent('ifx-radio-button-group', await framework)\n        }\n    }\n\n    handleSlotChange = () => {\n        this.initializeState();\n    };\n\n    private initializeState() {\n        this.errorStates.clear();\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n            if (!this.errorStates.has(radioButton)) {\n                this.errorStates.set(radioButton, (radioButton as any).error || false);\n            }\n        });\n        this.updateHasErrors();\n    }\n\n    private updateHasErrors() {\n        this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n    }\n\n    render() {\n        return (\n            <div class='radio-button-group-container'>\n                {this.showGroupLabel && (\n                    <div class=\"group-label\">\n                        {this.groupLabelText}\n                        {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\n                    </div>\n                )}\n                <div class={`radio-button-group ${this.alignment} ${this.size}`}>\n                    <slot onSlotchange={this.handleSlotChange} ></slot>\n                </div>\n                {this.showCaption ? (\n                    <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n                        {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n                        </ifx-icon></div> : ''}\n                        <div class='caption-text'>{this.captionText}</div>\n                    </div>) : ''}\n            </div>\n        );\n    }\n}"]}

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

@@ -13,6 +13,7 @@ export default {
         showCaption: false,
         captionText: 'Caption text, description, error notification',
         showCaptionIcon: false,
+        required: false,
     },
     argTypes: {
         amountOfItems: {
@@ -110,6 +111,14 @@ export default {
                 defaultValue: { summary: 'false' }
             }
         },
+        required: {
+            description: 'Marks the radio-button-group as required.',
+            control: { type: 'boolean' },
+            table: {
+                category: 'ifx-radio-button-group props',
+                defaultValue: { summary: 'false' }
+            }
+        },
         setGroupError: {
             action: 'setGroupError',
             description: 'Method to set the error state of all checkboxes in the group.',
@@ -134,7 +143,7 @@ const Template = args => {
         }
     }
     const template = `
-        <ifx-radio-button-group alignment="${args.alignment}" show-group-label="${args.showGroupLabel}" group-label-text="${args.groupLabelText}" show-caption="${args.showCaption}" caption-text="${args.captionText}" show-caption-icon="${args.showCaptionIcon}">
+        <ifx-radio-button-group alignment="${args.alignment}" show-group-label="${args.showGroupLabel}" group-label-text="${args.groupLabelText}" show-caption="${args.showCaption}" caption-text="${args.captionText}" show-caption-icon="${args.showCaptionIcon}" required="${args.required}">
             ${radioButtons}
         </ifx-radio-button-group>`;
     return template;

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button-group.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button-group/radio-button-group.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n    title: 'Components/Radio Button Group',\n    tags: ['autodocs'],\n    args: {\n        amountOfItems: 3,\n        alignment: 'vertical',\n        size: 'm',\n        checked: false,\n        disabled: false,\n        error: false,\n        showGroupLabel: false,\n        groupLabelText: 'Group Label',\n        showCaption: false,\n        captionText: 'Caption text, description, error notification',\n        showCaptionIcon: false,\n    },\n    argTypes: {\n        amountOfItems: {\n            categpry: 'story controls',\n            name: 'Amount of Items',\n            description: 'Set the amount of radio buttons.',\n            control: { type: 'number' },\n            table: {\n                category: 'story controls',\n                defaultValue: { summary: 3 }\n            }\n        },\n        alignment: {\n            description: 'Set the orientation of the radio button group.',\n            options: ['vertical', 'horizontal'],\n            control: { type: 'radio' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'vertical' }\n            }\n        },\n        size: {\n            description: 'Size options for the radio button.',\n            options: ['s', 'm'],\n            control: { type: 'radio' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 's' },\n                type: {\n                    summary: 's | m'\n                }\n            }\n        },\n        checked: {\n            description: 'Set the checked state.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        disabled: {\n            description: 'Disable the radio button.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        error: {\n            description: 'Set the error state.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        showGroupLabel: {\n            description: 'Show the group label.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        groupLabelText: {\n            description: 'Set the group label text.',\n            control: { type: 'text' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: '' }\n            }\n        },\n        showCaption: {\n            description: 'Show the caption.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        captionText: {\n            description: 'Set the caption text.',\n            control: { type: 'text' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: '' }\n            }\n        },\n        showCaptionIcon: {\n            description: 'Show the caption icon.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        setGroupError: {\n            action: 'setGroupError',\n            description: 'Method to set the error state of all checkboxes in the group.',\n            table: {\n                category: 'ifx-radio-buttton-group methods',\n                type: {\n                    summary: 'error : boolean',\n                    detail: 'RadioButttonGroup.setGroupError(error)'\n                }\n            }\n        }\n    },\n};\n\nconst Template = args => {\n    let radioButtons = '';\n    for (let i = 0; i < args.amountOfItems; i++) {\n        if (i === 0) {\n            radioButtons += `<ifx-radio-button value=\"${i}\" disabled=\"${args.disabled}\" checked=\"${args.checked}\" error=\"${args.error}\" size=\"${args.size}\">Option ${i}</ifx-radio-button>`;\n        }\n        else {\n            radioButtons += `<ifx-radio-button value=\"${i}\" size=\"${args.size}\">Option ${i}</ifx-radio-button>`;\n        }\n    }\n    const template = `\n        <ifx-radio-button-group alignment=\"${args.alignment}\" show-group-label=\"${args.showGroupLabel}\" group-label-text=\"${args.groupLabelText}\" show-caption=\"${args.showCaption}\" caption-text=\"${args.captionText}\" show-caption-icon=\"${args.showCaptionIcon}\">\n            ${radioButtons}\n        </ifx-radio-button-group>`;\n\n    return template;\n}\n\nexport const Default = Template.bind({});"]}
+{"version":3,"file":"radio-button-group.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button-group/radio-button-group.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n    title: 'Components/Radio Button Group',\n    tags: ['autodocs'],\n    args: {\n        amountOfItems: 3,\n        alignment: 'vertical',\n        size: 'm',\n        checked: false,\n        disabled: false,\n        error: false,\n        showGroupLabel: false,\n        groupLabelText: 'Group Label',\n        showCaption: false,\n        captionText: 'Caption text, description, error notification',\n        showCaptionIcon: false,\n        required: false,\n    },\n    argTypes: {\n        amountOfItems: {\n            categpry: 'story controls',\n            name: 'Amount of Items',\n            description: 'Set the amount of radio buttons.',\n            control: { type: 'number' },\n            table: {\n                category: 'story controls',\n                defaultValue: { summary: 3 }\n            }\n        },\n        alignment: {\n            description: 'Set the orientation of the radio button group.',\n            options: ['vertical', 'horizontal'],\n            control: { type: 'radio' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'vertical' }\n            }\n        },\n        size: {\n            description: 'Size options for the radio button.',\n            options: ['s', 'm'],\n            control: { type: 'radio' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 's' },\n                type: {\n                    summary: 's | m'\n                }\n            }\n        },\n        checked: {\n            description: 'Set the checked state.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        disabled: {\n            description: 'Disable the radio button.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        error: {\n            description: 'Set the error state.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        showGroupLabel: {\n            description: 'Show the group label.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        groupLabelText: {\n            description: 'Set the group label text.',\n            control: { type: 'text' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: '' }\n            }\n        },\n        showCaption: {\n            description: 'Show the caption.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        captionText: {\n            description: 'Set the caption text.',\n            control: { type: 'text' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: '' }\n            }\n        },\n        showCaptionIcon: {\n            description: 'Show the caption icon.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        required: {\n            description: 'Marks the radio-button-group as required.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        setGroupError: {\n            action: 'setGroupError',\n            description: 'Method to set the error state of all checkboxes in the group.',\n            table: {\n                category: 'ifx-radio-buttton-group methods',\n                type: {\n                    summary: 'error : boolean',\n                    detail: 'RadioButttonGroup.setGroupError(error)'\n                }\n            }\n        }\n    },\n};\n\nconst Template = args => {\n    let radioButtons = '';\n    for (let i = 0; i < args.amountOfItems; i++) {\n        if (i === 0) {\n            radioButtons += `<ifx-radio-button value=\"${i}\" disabled=\"${args.disabled}\" checked=\"${args.checked}\" error=\"${args.error}\" size=\"${args.size}\">Option ${i}</ifx-radio-button>`;\n        }\n        else {\n            radioButtons += `<ifx-radio-button value=\"${i}\" size=\"${args.size}\">Option ${i}</ifx-radio-button>`;\n        }\n    }\n    const template = `\n        <ifx-radio-button-group alignment=\"${args.alignment}\" show-group-label=\"${args.showGroupLabel}\" group-label-text=\"${args.groupLabelText}\" show-caption=\"${args.showCaption}\" caption-text=\"${args.captionText}\" show-caption-icon=\"${args.showCaptionIcon}\" required=\"${args.required}\">\n            ${radioButtons}\n        </ifx-radio-button-group>`;\n\n    return template;\n}\n\nexport const Default = Template.bind({});"]}

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

@@ -39,7 +39,7 @@ export class SearchBar {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: '09974ec9adab8f6dfa54364c8ba4665574cdebe9', role: "search", "aria-label": "a search field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { "aria-label": "Close button", 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: '7d45f985d7fd0b65e714f7cb129aa85dc1cc5a8b', role: "search", "aria-label": "a search field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { "aria-label": "Close button", 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

@@ -370,12 +370,12 @@ export class SearchField {
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (h("div", { key: '201261cf73c2a0f83cd7352fb1e0965ccab7cfc6', "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: '2a95ebe76d455c7b14c918b863ed42783a5813ca', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, h("ifx-icon", { key: '15c294637c518f0cea3d91e29e11312a58eae793', icon: "search-16", class: "search-icon" }), h("input", { key: '7e0d131ffcb8a758a08091db037665a1dcfa9a86', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, role: "combobox", "aria-expanded": this.showDropdown, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-owns": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-activedescendant": this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
+        return (h("div", { key: 'a6fe006071336b17df2d2e8b96aada2034f30184', "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'f81679a9d8eb21fdb4d28f7ab69252b3c413a973', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, h("ifx-icon", { key: 'a0c749f1be98576e3ab3601d5b3093a10b0d3642', icon: "search-16", class: "search-icon" }), h("input", { key: '954ca76a9e319f4e950366aa5305067a67a253f3', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, role: "combobox", "aria-expanded": this.showDropdown, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-owns": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-activedescendant": this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
                     this.handleDelete();
                 }
-            } })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (h("div", { key: '4f7687e6455021fc06e23adcca2ac445b0736960', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: 'd18828c1b4ce64e595c25c5ee7dc9289e01a9f4d', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index) => (h("div", { key: suggestion.id, id: `suggestion-${index}`, class: this.getSuggestionClassNames(index), role: "option", "aria-selected": index === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.selectedSuggestionIndex = index }, h("div", { class: "suggestion-content" }, suggestion.type === 'history' && (h("ifx-icon", { icon: "history-16", class: "suggestion-icon suggestion-icon--history" })), suggestion.type === 'suggestion' && (h("ifx-icon", { icon: "search-16", class: "suggestion-icon suggestion-icon--suggestion" })), h("span", { class: "suggestion-text" }, h("span", { class: "suggestion-main-text" }, this.renderHighlightedText(suggestion.text, this.value)), suggestion.scope && (h("span", { class: "suggestion-scope" }, "\u2013 ", suggestion.scope))), suggestion.resultCount !== undefined && suggestion.scope && (h("span", { class: "suggestion-count" }, suggestion.resultCount)), suggestion.type === 'history' && (h("ifx-icon", { icon: "cross16", class: "suggestion-delete-icon", role: "button", tabindex: "0", "aria-label": `${this.historyDeleteAriaLabel}: ${suggestion.text}`, onClick: (event) => this.handleHistoryDelete(event, suggestion.text), onKeyDown: (event) => {
+            } })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (h("div", { key: 'ffba07215a0f982c99dbf6adc862b9408ffb869e', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: 'ee117e0a17d0499054df4189fedd59047d4826d9', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index) => (h("div", { key: suggestion.id, id: `suggestion-${index}`, class: this.getSuggestionClassNames(index), role: "option", "aria-selected": index === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.selectedSuggestionIndex = index }, h("div", { class: "suggestion-content" }, suggestion.type === 'history' && (h("ifx-icon", { icon: "history-16", class: "suggestion-icon suggestion-icon--history" })), suggestion.type === 'suggestion' && (h("ifx-icon", { icon: "search-16", class: "suggestion-icon suggestion-icon--suggestion" })), h("span", { class: "suggestion-text" }, h("span", { class: "suggestion-main-text" }, this.renderHighlightedText(suggestion.text, this.value)), suggestion.scope && (h("span", { class: "suggestion-scope" }, "\u2013 ", suggestion.scope))), suggestion.resultCount !== undefined && suggestion.scope && (h("span", { class: "suggestion-count" }, suggestion.resultCount)), suggestion.type === 'history' && (h("ifx-icon", { icon: "cross16", class: "suggestion-delete-icon", role: "button", tabindex: "0", "aria-label": `${this.historyDeleteAriaLabel}: ${suggestion.text}`, onClick: (event) => this.handleHistoryDelete(event, suggestion.text), onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
                     this.handleHistoryDelete(event, suggestion.text);

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

@@ -18,7 +18,7 @@ export class Segment {
         }
     }
     render() {
-        return (h("div", { key: 'aa7a0f08979ebf918ec4c92ed6978642c2f9ffd7', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '21cc4c0f63dd0325e3349e371b10b49a0338ab25', icon: this.icon }), " ", h("slot", { key: '07ab61eb2f47ccd2cf51d84f3b443bf0c6ab47b6' })));
+        return (h("div", { key: 'a76781c607aad619d279d69346755e5d24e419f2', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '1f0e9e14400d9f78c8c849e9073ae89b191d041e', icon: this.icon }), " ", h("slot", { key: '201ac1267f6a0930cd4baa0721c5010fa82de700' })));
     }
     static get is() { return "ifx-segment"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,6 @@
   font-size: 1rem;
   line-height: 1.5rem;
   font-weight: 400;
-  font-family: "Source Sans 3";
 }
 .group__label:empty {
   display: none;
@@ -44,7 +43,6 @@
   font-size: 0.75rem;
   line-height: 1rem;
   color: #1D1D1D;
-  font-family: "Source Sans 3";
 }
 .group__caption.error {
   color: #CD002F;

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

@@ -67,8 +67,8 @@ export class SegmentedControl {
         this.setActiveSegment();
     }
     render() {
-        return (h("div", { key: '6d8c987f534974c576c1af95df23f93a121cd2bc', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: "group" }, h("div", { key: '90e5ed0aa1896c6641007b156fa11c18d2bbe51e', class: 'group__label' }, this.label.trim(), this.required && h("span", { key: '4ee174ef04055642eda78f6d8a4acfb967ad7e79', class: `required ${this.error ? 'error' : ''}` }, " * ")), h("div", { key: '7ff6aba58cbcc25d6d8193b6db124eaf617fb94a', class: 'group__controls' }, h("slot", { key: 'b5c4bfe47377a36f68fa147250e68b9931632f9d' })), this.caption.trim() &&
-            h("div", { key: '17ac2cece6749b3ab0e6f1f590b97b2157e45cd4', class: `group__caption ${this.error ? 'error' : ''}` }, h("ifx-icon", { key: '2094921f25ad602d2c3ef73d6c3797a7378c9837', icon: 'c-info-16' }), " ", this.caption.trim())));
+        return (h("div", { key: '89adf4eb1c9da0bdacac4d7d0a26bf0c4d01666d', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: "group" }, h("div", { key: '5ed77f418047838589851b36d90d1a12eeb9b664', class: 'group__label' }, this.label.trim(), this.required && h("span", { key: '745973fd74bcbdadb4651a8148aa584c45a6999a', class: `required ${this.error ? 'error' : ''}` }, "*")), h("div", { key: '02a611e12d25901cd6657774d3e6dbebaeb2686d', class: 'group__controls' }, h("slot", { key: '601f72992d94bc5cefc1de872edd4ba1567c4564' })), this.caption.trim() &&
+            h("div", { key: 'b6e5ac307a1d908a5054ce225acc9a41db235618', class: `group__caption ${this.error ? 'error' : ''}` }, h("ifx-icon", { key: '3d44e4a1a64e608948d807fe6ec014c4adc45c6a', icon: 'c-info-16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();

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

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component ({\n    tag: 'ifx-segmented-control',\n    styleUrl: 'segmented-control.scss',\n    shadow: true\n})\n\nexport class SegmentedControl {\n    @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n    @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n    @Prop() caption: string = '';\n    @Prop() label: string = '';\n    @Prop() size: 'regular' | 'small' = 'regular';\n    @Prop() required: boolean = false;\n    @Prop() error: boolean = false;\n\n\n    @Listen('segmentSelect')\n    onSegmentSelect(event: CustomEvent) {\n        const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n        this.selectedValue = selectedValue;\n        this.ifxChange.emit({ previousValue, selectedValue });\n    }\n\n    private selectedValue: string = '';\n\n    unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n        let previousValue: string;\n        let selectedValue: string;\n\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            if (control.selected) {\n                if (control.segmentIndex !== newSelectedIndex) {\n                    control.selected = false;\n                    previousValue = control.value;\n                } else {\n                    selectedValue = control.value;\n                }\n            }\n        })\n\n        return { previousValue, selectedValue };\n    }\n\n    getSegments(): NodeList {\n        return this.SegmentedControl.querySelectorAll('ifx-segment');\n    }\n\n    setActiveSegment(): void {\n        const segments: NodeList = this.getSegments();\n        let activeSegmentedControlFound = false;\n        segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n            control.segmentIndex = idx;\n            if (activeSegmentedControlFound) {\n                if (control.selected) control.selected = false;\n            } else {\n                if (control.selected) {\n                    activeSegmentedControlFound = true;\n                    this.selectedValue = control.value;\n                }\n            }\n        });\n    }\n\n    setSegmentSize(): void {\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n        });\n    }\n\n    async componentDidLoad() {\n        if(!isNestedInIfxComponent(this.SegmentedControl)) { \n            const framework = detectFramework();\n            trackComponent('ifx-segmented-control', await framework)\n        }\n        this.setActiveSegment();\n    }\n\n    render() {\n        return (\n            <div aria-value={this.selectedValue} aria-label='segmented control' class=\"group\">\n                <div class='group__label'>\n                    { this.label.trim() }\n                    { this.required && <span class={`required ${this.error ? 'error' : ''}`}> * </span> }\n                </div>\n                \n                <div class='group__controls'>\n                    <slot />\n                </div>\n                \n                {\n                    this.caption.trim() &&\n                    <div class={`group__caption ${this.error ? 'error' : ''}`}>\n                        <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    componentDidRender() {\n        this.setSegmentSize();\n    }\n}"]}
+{"version":3,"file":"segmented-control.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component ({\n    tag: 'ifx-segmented-control',\n    styleUrl: 'segmented-control.scss',\n    shadow: true\n})\n\nexport class SegmentedControl {\n    @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n    @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n    @Prop() caption: string = '';\n    @Prop() label: string = '';\n    @Prop() size: 'regular' | 'small' = 'regular';\n    @Prop() required: boolean = false;\n    @Prop() error: boolean = false;\n\n\n    @Listen('segmentSelect')\n    onSegmentSelect(event: CustomEvent) {\n        const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n        this.selectedValue = selectedValue;\n        this.ifxChange.emit({ previousValue, selectedValue });\n    }\n\n    private selectedValue: string = '';\n\n    unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n        let previousValue: string;\n        let selectedValue: string;\n\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            if (control.selected) {\n                if (control.segmentIndex !== newSelectedIndex) {\n                    control.selected = false;\n                    previousValue = control.value;\n                } else {\n                    selectedValue = control.value;\n                }\n            }\n        })\n\n        return { previousValue, selectedValue };\n    }\n\n    getSegments(): NodeList {\n        return this.SegmentedControl.querySelectorAll('ifx-segment');\n    }\n\n    setActiveSegment(): void {\n        const segments: NodeList = this.getSegments();\n        let activeSegmentedControlFound = false;\n        segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n            control.segmentIndex = idx;\n            if (activeSegmentedControlFound) {\n                if (control.selected) control.selected = false;\n            } else {\n                if (control.selected) {\n                    activeSegmentedControlFound = true;\n                    this.selectedValue = control.value;\n                }\n            }\n        });\n    }\n\n    setSegmentSize(): void {\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n        });\n    }\n\n    async componentDidLoad() {\n        if(!isNestedInIfxComponent(this.SegmentedControl)) { \n            const framework = detectFramework();\n            trackComponent('ifx-segmented-control', await framework)\n        }\n        this.setActiveSegment();\n    }\n\n    render() {\n        return (\n            <div aria-value={this.selectedValue} aria-label='segmented control' class=\"group\">\n                <div class='group__label'>\n                    { this.label.trim() }\n                    { this.required && <span class={`required ${this.error ? 'error' : ''}`}>*</span> }\n                </div>\n                \n                <div class='group__controls'>\n                    <slot />\n                </div>\n                \n                {\n                    this.caption.trim() &&\n                    <div class={`group__caption ${this.error ? 'error' : ''}`}>\n                        <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    componentDidRender() {\n        this.setSegmentSize();\n    }\n}"]}

package/dist/collection/components/select/multi-select/multiselect-option.js

@@ -360,25 +360,25 @@ export class MultiselectOption {
         const additionalPadding = this.hasChildren ? 0 : 28;
         let totalPadding = basePadding + additionalPadding;
         const optionItemStyle = isFlatMultiselect ? undefined : { paddingLeft: `${totalPadding}px` };
-        return (h(Host, { key: '6eb80e0601bfa9b2c5e30cb90cb2f88725053aef' }, h("div", { key: 'be2e2a862fa39182488f7c96d5717e604d48752d', class: {
+        return (h(Host, { key: 'bb8e548f32f1437bf90887848ba4920c5410e2ef' }, h("div", { key: 'de3cd2b3d7a37d7fbad176130d7be8435217f72f', class: {
                 'option': true,
                 'option--has-children': this.hasChildren,
                 'option--expanded': this.isExpanded,
                 'option--disabled': this.disabled,
                 'option--selected': this.selected,
-            }, role: "option", "aria-expanded": this.hasChildren ? (this.isExpanded ? 'true' : 'false') : undefined, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "data-level": this.depth, "data-value": this.value }, h("div", { key: 'ebc879c61f3063283d0f361d57eb183a9639b674', class: "option-item", style: optionItemStyle }, h("div", { key: 'c63f75c15440d48b83a768862fdb432b1274f6d4', class: "chevron-wrapper", tabIndex: this.hasChildren ? 0 : -1, role: this.hasChildren ? "button" : undefined, "aria-label": this.hasChildren ? (this.isExpanded ? "Collapse" : "Expand") : undefined, onClick: (e) => { e.stopPropagation(); this.toggleExpansion(); }, onKeyDown: (e) => {
+            }, role: "option", "aria-expanded": this.hasChildren ? (this.isExpanded ? 'true' : 'false') : undefined, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "data-level": this.depth, "data-value": this.value }, h("div", { key: 'e044ecb428356e6ebdda2ef68897ae76193295f7', class: "option-item", style: optionItemStyle }, h("div", { key: '8adc3faf7fdcef383b70af280380f54eb61eeafd', class: "chevron-wrapper", tabIndex: this.hasChildren ? 0 : -1, role: this.hasChildren ? "button" : undefined, "aria-label": this.hasChildren ? (this.isExpanded ? "Collapse" : "Expand") : undefined, onClick: (e) => { e.stopPropagation(); this.toggleExpansion(); }, onKeyDown: (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     e.stopPropagation();
                     this.toggleExpansion();
                 }
-            } }, this.hasChildren && (h("ifx-icon", { key: '3ead818a1b92026b6192b455412508117738f2a2', class: `chevron ${this.isExpanded ? 'chevron--expanded' : 'chevron--collapsed'}`, icon: "chevron-right-16" }))), h("div", { key: '024fbb3e8fc005ab8c660103a21077ecf8c968b6', class: "checkbox-wrapper", onClick: (e) => e.stopPropagation() }, h("ifx-checkbox", { key: '27fdae8da6acd68071a2d9defa0a8d9fb4b802e7', size: 's', checked: (this.isSearchActive && this.isSearchDisabled) ? false : (this.indeterminate ? false : this.selected), indeterminate: (this.isSearchActive && this.isSearchDisabled) ? false : this.indeterminate, onClick: this.handleCheckboxClick, disabled: this.disabled || (this.isSearchActive && this.isSearchDisabled), onKeyDown: (e) => {
+            } }, this.hasChildren && (h("ifx-icon", { key: '52efbb8cd112aa0eeee29343ac0ec10ba1bc9205', class: `chevron ${this.isExpanded ? 'chevron--expanded' : 'chevron--collapsed'}`, icon: "chevron-right-16" }))), h("div", { key: '44bd32728a3ea912a8ef8093d2cac6bfc694b68f', class: "checkbox-wrapper", onClick: (e) => e.stopPropagation() }, h("ifx-checkbox", { key: 'a98c32908bb424bc1e288bcc1bf4efe3d82c3630', size: 's', checked: (this.isSearchActive && this.isSearchDisabled) ? false : (this.indeterminate ? false : this.selected), indeterminate: (this.isSearchActive && this.isSearchDisabled) ? false : this.indeterminate, onClick: this.handleCheckboxClick, disabled: this.disabled || (this.isSearchActive && this.isSearchDisabled), onKeyDown: (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     e.stopPropagation();
                     this.handleCheckboxClick(e);
                 }
-            } })), h("div", { key: '28f4a65d22efce35aa6ed42df5127bf2b62d54d6', class: "option-label", onClick: this.handleHeaderClick, tabIndex: -1 }, h("slot", { key: 'd876a519bd1610d7f788b8c5e24d52a17f6ca711' }))), this.isExpanded && h("div", { key: '44508a6db055262bb4afa1d28893084694b78ce7', class: "option-children" }, h("slot", { key: '4ce36cb09a99bda59e7c2b0cd284fc56e4b2190d', name: "children" })))));
+            } })), h("div", { key: '7d237a5ca48f9dc65172b8ef618b84ed2e7b17d6', class: "option-label", onClick: this.handleHeaderClick, tabIndex: -1 }, h("slot", { key: '2373e7bb5fab0adfbf5b2ad168ef35e0862180cc' }))), this.isExpanded && h("div", { key: 'f94abd9c2fdd8db52030c4987859e11cc2fb47fd', class: "option-children" }, h("slot", { key: '9ed879225d6ad7dba8b13e690c3b89e2fbbbba0c', name: "children" })))));
     }
     static get is() { return "ifx-multiselect-option"; }
     static get encapsulation() { return "shadow"; }

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

@@ -226,9 +226,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: 'ea3a799734c271b4ad8e60393390c1c311faeabb', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: '1242b62affa923fe28c85e8e277e952c26fe1d91', class: `${choicesWrapperClass} 
+        return (h("div", { key: 'c1a5427095a8a5f2f6cfab06f16a1248bca029cb', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: 'efd9ab19aa2431dcc465efa5c74b2afc505e7da0', class: `${choicesWrapperClass} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : (e) => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: 'ae30cbb147298c422c372c3879e14f6e73ee63f4', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '66fbbad610b191cd0ace492bb2a9292596b3da44', class: 'single__select-icon-container' }, this.optionIsSelected && (h("div", { key: '843194e3f828e5f62194c6a639c2fc3e7f80e527', class: `ifx-choices__icon-wrapper-delete ${!this.showClearButton ? 'hide' : ''}` }, h("ifx-icon", { key: 'c4836454b564e7a80f873de4aab055947389b232', icon: "cRemove16", onClick: () => this.clearSelection() }))), h("div", { key: 'f2c323ab7a512bafd18760b36a879034ef072dd8', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), h("div", { key: '1a9f218702cac99e65d3581b89427394f4d1ca68', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage))) : null));
+            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : (e) => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: 'd1a1077bba9553055053576dd5a0e85d7366c586', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '9feae8ed8967e4c04d94d0a08f0c5edb04581684', class: 'single__select-icon-container' }, this.optionIsSelected && (h("div", { key: 'e5c2e2534aec4f84ea527faf6009c05c2a81eb9f', class: `ifx-choices__icon-wrapper-delete ${!this.showClearButton ? 'hide' : ''}` }, h("ifx-icon", { key: '644bf229f62220e9743ea216b7d4fc3ad71c3925', icon: "cRemove16", onClick: () => this.clearSelection() }))), h("div", { key: '90291db32f89cba5733a818cfb1f84f39704634d', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), h("div", { key: 'e8b9868ae10850ee62c76ea358efd877815886de', 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

@@ -143,10 +143,10 @@ export class IfxSlider {
         this.updateValuePercent();
     }
     render() {
-        return (h("div", { key: '945628f18f5a2f8b1f6f7a9db306e1fe1fac50e0', class: "ifx-slider" }, this.leftText && (h("span", { key: '8c2f371ce46af2465ed0d223a18c9e392a343071', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '727ce92c2347a09f59c65ea72458ae5a04b28fef', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
+        return (h("div", { key: 'd80fe9a957d3dc99db0ab0a38f09db3ff01e3412', class: "ifx-slider" }, this.leftText && (h("span", { key: 'a0346b20c2cde3684333ec410e2dc5c423fc1d22', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: 'da2345fd1065d5c501b69f59c43744ed86d4859e', 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: '6dc25faafdfaaeb8eaf23afef4fcbb370eceb20b', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: '4035e2f1d7e2ba7c4580d18cf9ac0a3a1776fe4d', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '6b896bfe05144bd20e3204a402b73d630ac2f83a', 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: '222408d757f2c8cb46a93db8118af07a828e35d6', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: '711630abb3168b0c75aba4daf3196c1c70b06aa5', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: 'b2886304b3873a7eeff00510636470986b204f0f', 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

@@ -14,8 +14,8 @@ export class Spinner {
         }
     }
     render() {
-        return (h("div", { key: '18d2d1ce1c863d1c8cfcb6888621ab2ef5f0769f', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: 'cd4d27b27c2a3544b746fa6631f5b90ac2140269', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && h("div", { key: '5964648d2c5a48ba8992662d7bb5b0fc51379df9', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '7f618989815dfed9b44180454a0b8f9f20cd1ebb', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '4580aaad4463dc35af5ca5b02aade71c4f0cb9c9', id: "spinner/conductor" }, h("path", { key: '9d26db625dc6bca17a789e2ca44cec8342171f65', 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: '9a7e261848cb2ab5d281ed0a5dd3ca09fc201c9f', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: 'ae308cd0ef91308abe568147004773f6f3deb373', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && h("div", { key: 'd0f09cd6fa589a472218a5923a0ddc3e0bf7db89', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: 'fba863429a88d6acd2bc0175b55ea2a3f1cbb9fd', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'cab2e25423d28fb0a0fcf3f8151754ac05104399', id: "spinner/conductor" }, h("path", { key: '9b299e9ad04bb013cd4f6950a3a1c136cdbb8246', 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

@@ -17,7 +17,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: '840f8bb8b5364cc695e226f1c7df7d46ad02cf5b', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: 'ba8a420652b21eb0a06c14b9fa22086137314c14', class: `dot ${effectiveColor}` }), h("p", { key: '8344de5c726d09b47123423608ba409219e67ad7', class: "text" }, this.label)));
+        return (h("div", { key: 'df0bd64479b85637198e0dc8715afc705d52a756', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: 'a1ca252388cb2f707b40b7b4e792c5004b9ab5e9', class: `dot ${effectiveColor}` }), h("p", { key: '6b91b2724502837bffff721ec51e98e6a9ee3bc6', 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: '4a8d15886081c51ea4135747fedb213425aab963', "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: '16eb71f0ad6bd16c0a9ca629b426803d55b7eedd', "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: '95f58c046757d15630ccda6616216fb2c9389e07', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '3a474ac0d35bf26be0a8ba1bf5f5fdd90705333c', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            h("div", { key: 'b5e33a62def866dc4871f28d92ef2bff70f39451', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '7d255ccad1f21176959e3a29300a6db2418b4c24', icon: 'check16' }), this.active && h("span", { key: '94181c79a85445e5192ffad3043e5413b5cdf905', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'd0e31d946d568154be1a4a1ffcd186c56ae99efa', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: '7994b0fa27ea1111e7afbe8f44c872d2c60c394a', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
+                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: '4ffd3c627c44a652814fb2b28b8a57ede5572d2a', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: 'f198e558160f837f3553804ec8b6447fe5ca19bc', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
+            h("div", { key: 'b9729e46a5bba23cd0de106af3d1f3d50280d41c', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: 'b86eea4d66ee542d41c49ce6c1669f1d55b285a6', icon: 'check16' }), this.active && h("span", { key: '491566173caea0ef800c9540c287645dadac823f', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'afa67edf1c8b61ec276b73238ac2264d48d6350a', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: 'f0cd06d1fc4f50bc38b9a64a2c283cf429e6d099', 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: 'a9ebb2eca0ca4583dcc9bae0b717c02695a905d4', 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: '3c0ee4aa25d7cee50c0791df6c86688829471ca9' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'a516dd9e34bc039d67330286c09f149daaf46e92' }))));
+            h("div", { key: 'ea152255764c891ce43c89c4f55b28057809ed7e', 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: '7405313a5c724511ab13f4618bcbc0fe4bb09ad8' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '491baf5f8c458e8ca028343e7008f10fd5659adf' }))));
     }
     ;
     static get is() { return "ifx-step"; }

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

@@ -125,10 +125,10 @@ export class Stepper {
         this.syncIfxSteps();
     }
     render() {
-        return (h("div", { key: '955ea7d43dbc07c660b21282c689a583557f6c1c', "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: '072b8e14d99551292137f832f0c1b10086ae709c', "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: '93d41ab56bd2f538fb3763f6761c3c55a05741a2', class: 'stepper-progress' }, h("div", { key: '0b434725ba4137d4fef08865fb9f6e9419b35700', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: 'dde90f73f80945b27825aaddf8bce3cc8bfa2bbe', class: `stepper-wrapper` }, h("slot", { key: '7db6f827437c35c12b1632357c423ca9631b0b0f' }))));
+            h("div", { key: 'f91c8ecdd38d2f4e4f1d8a9e93af9894a45668d7', class: 'stepper-progress' }, h("div", { key: '4541cad0c38c02c2586e1557fe2aff571d4f09d4', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '9b7a8a0f1a3b0bfb8b2a399f2365289af5ea5628', class: `stepper-wrapper` }, h("slot", { key: 'ac33e01c765ef7307e74cad6bbdbec94141864b4' }))));
     }
     ;
     componentDidRender() {

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

@@ -70,7 +70,7 @@ export class Switch {
         this.internals.setFormValue(null);
     }
     render() {
-        return (h("div", { key: 'd6b80857d7878a78b420813f6a419a9a092036e4', 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: '136df23d2eecaa7324886f9ac05116d72468aaf6', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '1161568b517a97529845079a65456dfeddd12be2', class: "switch__checkbox-wrapper" }, h("input", { key: '1e02be240b0b2ff41dad5f7f150448f000417dc9', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '8abf80b7a191770483580f110f2a480b86dedf28', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: 'e9b787c6387950e4991bb9e1e3fd93f5251482a9', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '4a917c2b8168da8c777f5e848da1fffe426df972', htmlFor: "switch" }, h("slot", { key: '6e0e1dda889a291768dcd5adbefe45602550c0ca', onSlotchange: () => this.toggleLabelGap() })))));
+        return (h("div", { key: '6f4503de2b4cec113f5c207e4be88971859cdf23', 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: '0fed4fa174031f277e855ea9e31c74d7360a0dca', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '937b74b9e710c9b292371497e22c64bccdf3d171', class: "switch__checkbox-wrapper" }, h("input", { key: '24b4c04eee28a9640260836a00a847b0a6744617', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '5f17e47a97120c6832ce701056bafa5f83edbf6f', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '571c55c5aa8bd119b9ee32a5083198335bfb28f6', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '902b816c123bd9e5d1d1b0357bcfa9819b66fbed', htmlFor: "switch" }, h("slot", { key: '6c7e98eb86b493e3bdd0fd7596c3d3ada901c3aa', 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: '5791461e82194270073af430175ed7d4aafe6215' }, h("div", { key: 'b6eb5e44a37ecccfc046cbd5333f4a54abd224b1', class: "search-container" }, h("slot", { key: '5c8d49e57f21199cf489ca5165c06852356247cc', name: "filter-search" }), " "), h("div", { key: 'c1b08e32502417f53663a366253685b136d186a6', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: 'cb768598159b2652dc3bd18d98bb28131ca3c472', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: '8e6d0d833c2a43a1521eaf2d08ff64fb4595840b', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '3b3ca3d11c1fa1e9f2aa246294c3451e8ebbc814', icon: "filter-16" }), "More filters"))))));
+        return (h(Host, { key: 'a5c38e939f37e01b4b9bd531adcd8bfc0fa103f3' }, h("div", { key: 'ff58d5e75619a978c32b94ffe9b3f25e7297836b', class: "search-container" }, h("slot", { key: '4204f7c0f50cddde29bbae89f46695ca1b538b11', name: "filter-search" }), " "), h("div", { key: 'a46e94e9d62778ba54130c171905115107b384f0', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (h("div", { key: 'ec47849a35717d93d92356c4790162ef21a7ccd4', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, h("ifx-button", { key: 'd1db69ebf2315b34cf379fd564157ac15835fb3d', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: '76e8f0e91441159180ea4345f2ba1b00d5e43119', 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: '1f9605f9104017c963f2a9c2907e5d463b10b1e2', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'bfa0a9b9a56ff283e56cb04ed0bed29b69aa5b33', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '1e4c79419a6fcfaf04aa64344f5f6c628de4b5d4', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'fa5b1f3d1ec7a4ecc5ffb0ef5573bfa91fb5c6cc', class: "text" }, h("span", { key: '6f92eaa2bd4adde69dd1f9ea15c7941ab55f112e' }, this.filterGroupName), h("ifx-indicator", { key: 'd57066926862cddc29e454e6dc598069866c4ff9', variant: 'number', number: this.count })), h("ifx-icon", { key: '3704c3895cd54fcde61487c0ee47d351d7fa102a', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: 'e86a2deee2bc4baa64cbecdadfe72a319d81248f', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
-            h("div", { key: '61a41de4260972e351990205afe77e9cb5998abb', class: "filter-accordion-container" }, h("slot", { key: 'b580a502b5ae5d8823e5a4e311b1fef7a160664f', name: "list" }))));
+        return (h("div", { key: '46767a8bf8b1c2e248803ed7aff84a4a75a0f0d6', class: `accordion ${this.expanded ? 'expanded' : ''}` }, h("div", { key: '15596622e87ceb57b6ab3906e660ca4bd03fcdca', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, h("div", { key: '48bb60deef0cb1e4a88577594b0831da08ce8ed6', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, h("div", { key: 'c9ef133f89e7a9b923b6ab40f7e209be5bb0e46e', class: "text" }, h("span", { key: 'bbc8a8f2a83bcb05b93dd79b6151c8e05f4745e1' }, this.filterGroupName), h("ifx-indicator", { key: '029bf08d5c277b9f7cda7e9322c401175085a4c4', variant: 'number', number: this.count })), h("ifx-icon", { key: 'f17acd86893720d55a57df867ebc1288da4fce82', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: 'b5275b81470645a1249c4a1fa03af65ea798c0e3', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
+            h("div", { key: '149d6ded99a0992ff3773f3f966c24dd838bc1b2', class: "filter-accordion-container" }, h("slot", { key: 'a9f2600b9d3f73926ad88e7fdbac66afdeb53c00', name: "list" }))));
     }
     static get is() { return "ifx-filter-accordion"; }
     static get encapsulation() { return "shadow"; }