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

package/dist/cjs/ifx-alert_2.cjs.entry.js

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

package/dist/cjs/ifx-basic-table.cjs.entry.js

@@ -182,7 +182,7 @@ const Table = class {
         return {};
     }
     render() {
-        return (index.h(index.Host, { key: '56d342732bf6d49e668f0fc3e2f34f604ecc50fc' }, index.h("div", { key: '672ef798fa5d47b3c219a772c5256cc0a670f180', id: "table-wrapper", class: this.getClassNames() }, index.h("div", { key: '66c21033cebeb0df7a41d7ffe7f6b66fadd6be96', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (index.h(index.Host, { key: '1d910fc1a45de4623d64480b6ebf7fbc4a3f0915' }, index.h("div", { key: 'c10cceb9acedf081c6ae1bd8d951be4463c6c54a', id: "table-wrapper", class: this.getClassNames() }, index.h("div", { key: 'ad4a2da518eb3783ba682bb1672018053e00c239', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/ifx-faq.cjs.entry.js

@@ -12,7 +12,7 @@ const Faq = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '5e3eb715d12496d0288610c8c22d460a6865dca0', class: 'container' }, index.h("ifx-accordion", { key: '55c2ea07edb5e85598a00cac7f4fdc2c25ef592b' }, index.h("ifx-accordion-item", { key: '587331cfee2c73d088590212ac0f076a26ecd16a', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), index.h("ifx-accordion-item", { key: '15c8b37bc083d8cc43d92da87b641c3d7c2b61d5', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), index.h("ifx-accordion-item", { key: 'cec5345d56df3449f1ae80fd739abda63f2a2402', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), index.h("ifx-accordion-item", { key: '4fe1e9b0308ee6b5e626e5d8daa24c4ef39b45bc', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), index.h("ifx-accordion-item", { key: '0b7393eb8404fa4a306efaa6d5c45755102e0774', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+        return (index.h("div", { key: 'ed2b964d8b6d86428a4082f5e8dbffa0cc206c32', class: 'container' }, index.h("ifx-accordion", { key: '05776795e60612b86c642c9409a2054ac5a93c65' }, index.h("ifx-accordion-item", { key: 'ee3cd70a0bb1c2bf91d88c418c6b8ea009e8779f', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), index.h("ifx-accordion-item", { key: 'f5b06ede165b9e00a9a46a0ce5bc6cb604968420', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), index.h("ifx-accordion-item", { key: '238f19788c3d9a3846fec9414f50c8ae88e71dce', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), index.h("ifx-accordion-item", { key: '0025520755db27597711d03507e0dbe4939c8619', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), index.h("ifx-accordion-item", { key: '9ec6e66ee9454d2d0cd8b28d7234caa7fe28b61a', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
     }
 };
 Faq.style = IfxFaqStyle0;

package/dist/cjs/ifx-filter-accordion.cjs.entry.js

@@ -53,8 +53,8 @@ const FilterAccordion = class {
         this.el.removeEventListener('ifxListUpdate', this.handleCheckedChange);
     }
     render() {
-        return (index.h("div", { key: 'b5be6a4c8e2b8406e20b4139461d75d1acc5e88c', class: `accordion ${this.expanded ? 'expanded' : ''}` }, index.h("div", { key: '88ce1afb0ab07d2b3b1351d698632d24521f6870', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, index.h("div", { key: '2c850d5b01d985473ba69ca347fbfcfa076670b5', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, index.h("div", { key: 'b50240640314ca9d971f1db017d8f2bf4fae5cc1', class: "text" }, index.h("span", { key: '12a6ef3c45f33540669af8dc60f2d8c104e07953' }, this.filterGroupName), index.h("ifx-number-indicator", { key: '049ecf530b429920f6f977e240de3913fbd0c013' }, this.count)), index.h("ifx-icon", { key: 'fee323359acf051fb4bd0040c0eb1bea7a9696fe', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), index.h("ifx-icon", { key: 'f7b60e6232b404bc5f4345dd9db80e513c4a6dcd', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
-            index.h("div", { key: 'f802a7ec2ff47ecf22b3f69ec5b4adbcdb599522', class: "filter-accordion-container" }, index.h("slot", { key: '5877962924effa0e52163d9ec5a2d436ac8a3ac7', name: "list" }))));
+        return (index.h("div", { key: '3b673a1346ddd3e5a4725de6fc14d42a722c42da', class: `accordion ${this.expanded ? 'expanded' : ''}` }, index.h("div", { key: 'd12d1ceba9cd0a4d8eb98c2f352cffd7350de2dc', class: `header ${this.expanded ? 'expanded' : ''}`, onClick: this.toggleAccordion }, index.h("div", { key: 'f29133a7f7dd67535632ab410d507fee422a6f57', class: `text-and-icon ${this.expanded ? 'expanded' : ''}` }, index.h("div", { key: '9659b5a7f4957e3466d68bd20097fc5c86441839', class: "text" }, index.h("span", { key: '27ee74ba15e002f4515e06b577874cf38176d030' }, this.filterGroupName), index.h("ifx-number-indicator", { key: 'c863e14a3786b5760581bd67738324d99d5269fd' }, this.count)), index.h("ifx-icon", { key: '18c3af713e2fb900498dc12d4293e7dc7d631abb', class: this.expanded ? '' : 'hidden', icon: "minus-16", onClick: this.toggleAccordion }), index.h("ifx-icon", { key: '8899694fb8955f9917f965ba15d0a97843e3d56d', class: this.expanded ? 'hidden' : '', icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded &&
+            index.h("div", { key: '2b4070a714df749d3d1a518dbc62ef14740f709c', class: "filter-accordion-container" }, index.h("slot", { key: 'cd7c175fa97a521d3e86cbcfc827768f8af6820b', name: "list" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-filter-bar.cjs.entry.js

@@ -97,7 +97,7 @@ const FilterBar = class {
         // Calculate slotsToShow safely
         const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);
         const slots = Array.from({ length: slotsToShow }, (_, i) => (index.h("div", { class: "filter-slot-wrapper" }, index.h("slot", { name: `filter-component-${i + 1}` }))));
-        return (index.h(index.Host, { key: 'd5aad85edc16369a3487a18f3e3f24a5b914e820' }, index.h("div", { key: '7f49a493bd5bafec1286794e89ae67adea9e1967', class: "search-container" }, index.h("slot", { key: '9d7ab3a3294ac64f7cc47ae33b1839871d06df94', name: "filter-search" }), " "), index.h("div", { key: '9bf93a1030392d67940228df88b11b52685b757f', class: "components-container" }, slots.length > 0 ? slots : index.h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (index.h("div", { key: 'fc4c6c9e15cf96fc1c129638688fdf2a27f91dc7', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, index.h("ifx-button", { key: '8f26ef634ef3e27d893e1998167f07a4315cb59a', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, index.h("ifx-icon", { key: '23cece990fc63afda2e9864887865467bec55e6f', icon: "filter-16" }), "More filters"))))));
+        return (index.h(index.Host, { key: '150adcecb6da42b75fa6d5b9a53122d6d1d92726' }, index.h("div", { key: 'ff408ac26d1fb4d2454c8a8f023d64028a508487', class: "search-container" }, index.h("slot", { key: '49fadce7b168de4ce2b76e0630447826edfb539b', name: "filter-search" }), " "), index.h("div", { key: 'de8e046c486a42f3f785cc291534014621a1f851', class: "components-container" }, slots.length > 0 ? slots : index.h("slot", { name: "filter-component" }), this.showMoreFiltersButton && !this.showAllFilters && (index.h("div", { key: '01136f8065227590752f3afb2e56b1a76f44c707', class: "more-filters-wrapper", onClick: this.handleMoreFiltersClick }, index.h("ifx-button", { key: 'b3c1e2e833430de4a2714668af47a8dd956ec836', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, index.h("ifx-icon", { key: '6e610c72889281cff09669bc3bb8a8220f1a32e1', icon: "filter-16" }), "More filters"))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-filter-search.cjs.entry.js

@@ -33,7 +33,7 @@ const FilterSearch = class {
         this.ifxFilterSearchChange.emit({ filterName: this.filterName, filterValue: this.filterValue, filterKey: this.filterKey }); // Emitting filterKey along with other properties
     }
     render() {
-        return (index.h("div", { key: '7b5ee1b95e95e19d2fc959c2a9ed59fa1d90a4e6', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, index.h("div", { key: 'c7dfdabe9e9eb6dcea53361df02a2a5e4325f43f', class: "filter-name" }, this.filterName), index.h("ifx-search-field", { key: '5a396959e4ab983a06796203a3efbcc608f1a16c', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
+        return (index.h("div", { key: 'd260a94c8b1d8953ce77d0998f30588a12565212', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, index.h("div", { key: 'd59e49ed679ffbdf15bba75564a28e99ae7e03fd', class: "filter-name" }, this.filterName), index.h("ifx-search-field", { key: 'c27b106ee925b3fb49d4d2079ea3af5e7276d041', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-filter-type-group.cjs.entry.js

@@ -129,7 +129,7 @@ const IfxFilterTypeGroup = class {
         window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);
     }
     render() {
-        return (index.h(index.Host, { key: 'd794c0d53d4cdf1d9e7a233dc36da89b7407bc57' }, index.h("div", { key: 'f59f81f2402e974ce04c937c620907fc553b3752', class: "filter-type-group" }, index.h("slot", { key: '35b06d9b7d04566fce7497c81a641a76bcf987e4', name: "filter-search" }), index.h("slot", { key: '86614c6a09e9d42392cef57017965abd337582e4', name: "filter-accordion" }))));
+        return (index.h(index.Host, { key: '74b9439f764d77979468627fe8a1fa7d559d1b46' }, index.h("div", { key: '7585a9ca7a2954e5ed8d77e24acd5bf907d6a900', class: "filter-type-group" }, index.h("slot", { key: '62382b5b17b99abade8296c0f7e30db5726eef80', name: "filter-search" }), index.h("slot", { key: '09db9f420ec54d6e3defbda1297d254bea92bbb6', name: "filter-accordion" }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-list-entry.cjs.entry.js

@@ -25,7 +25,7 @@ const ListEntry = class {
         this.ifxListEntryChange.emit({ label: this.label, value: this.value, type: this.type });
     }
     render() {
-        return (index.h("div", { key: 'd79aed51b0aa9c96e3b99450af4a67fe9c9cd9c1', class: "wrapper" }, this.type === 'checkbox' ? (index.h("div", { class: "list-entry" }, index.h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (index.h("div", { class: "list-entry" }, index.h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
+        return (index.h("div", { key: '8e7ded517c620a3794931e518c765f3c10099565', class: "wrapper" }, this.type === 'checkbox' ? (index.h("div", { class: "list-entry" }, index.h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (index.h("div", { class: "list-entry" }, index.h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-radio-button-group.cjs.entry.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1ce5aae1.js');
+
+const radioButtonGroupCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.radio-button-group-container{display:flex;flex-direction:column}.radio-button-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.radio-button-group.horizontal{flex-direction:row;column-gap:12px}.radio-button-group.vertical{flex-direction:column;row-gap:12px}.group-label{font:400 0.75rem/1rem \"Source Sans 3\";margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font:400 0.75rem/1rem \"Source Sans 3\";flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{align-self:flex-start;display:block}";
+const IfxRadioButtonGroupStyle0 = radioButtonGroupCss;
+
+const RadioButtonGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.errorStates = new Map();
+        this.alignment = 'vertical';
+        this.groupLabelText = 'Group Label Text';
+        this.hasErrors = false;
+        this.handleSlotChange = () => {
+            this.initializeState();
+        };
+    }
+    handleRadioButtonError(event) {
+        const radioButton = event.target;
+        if (radioButton.tagName === 'ifx-radio-button') {
+            this.errorStates.set(radioButton, event.detail);
+            this.updateHasErrors();
+        }
+    }
+    // Method to set the error state of all radio-butttons in the group
+    async setGroupError(error) {
+        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));
+        radioButtons.forEach((radioButton) => {
+            radioButton.error = error;
+        });
+    }
+    componentWillLoad() {
+        this.initializeState();
+    }
+    initializeState() {
+        this.errorStates.clear();
+        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));
+        radioButtons.forEach((radioButton) => {
+            if (!this.errorStates.has(radioButton)) {
+                this.errorStates.set(radioButton, radioButton.error || false);
+            }
+        });
+        this.updateHasErrors();
+    }
+    updateHasErrors() {
+        this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
+    }
+    render() {
+        return (index.h("div", { key: 'e9c42096ac6db5957388636ba18d289cde561a54', class: 'radio-button-group-container' }, this.showGroupLabel ? index.h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', index.h("div", { key: '95f5a1644f8780d7721ebe539b04d60898e34dc5', class: `radio-button-group ${this.alignment} ${this.size}` }, index.h("slot", { key: '94a278c73773b60156cdc0d30d856426181a8af9', onSlotchange: this.handleSlotChange })), this.showCaption ? (index.h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? index.h("div", { class: 'caption-icon' }, index.h("ifx-icon", { icon: "c-info-16" })) : '', index.h("div", { class: 'caption-text' }, this.captionText))) : ''));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+};
+RadioButtonGroup.style = IfxRadioButtonGroupStyle0;
+
+exports.ifx_radio_button_group = RadioButtonGroup;
+
+//# sourceMappingURL=ifx-radio-button-group.cjs.entry.js.map

package/dist/cjs/ifx-radio-button-group.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-radio-button-group.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,+2BAA+2B,CAAC;AAC54B,kCAAe,mBAAmB;;MCQrB,gBAAgB;IAP7B;;QAQY,gBAAW,GAA8B,IAAI,GAAG,EAAE,CAAC;QAGnD,cAAS,GAA8B,UAAU,CAAC;QAGlD,mBAAc,GAAW,kBAAkB,CAAC;QAI3C,cAAS,GAAY,KAAK,CAAC;QAwBpC,qBAAgB,GAAG;YACf,IAAI,CAAC,eAAe,EAAE,CAAC;SAC1B,CAAC;KAiCL;IAxDG,sBAAsB,CAAC,KAAkB;QACrC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB,CAAC;QAChD,IAAI,WAAW,CAAC,OAAO,KAAK,kBAAkB,EAAE;YAC5C,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAChD,IAAI,CAAC,eAAe,EAAE,CAAC;SAC1B;KACJ;;IAIC,MAAM,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;YAC9B,WAAmB,CAAC,KAAK,GAAG,KAAK,CAAC;SACpC,CAAC,CAAC;KACJ;IAEH,iBAAiB;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;KAC1B;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;YAC7B,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;gBACpC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAG,WAAmB,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;aAC1E;SACJ,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;KAC1B;IAEO,eAAe;QACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;KACjF;IAED,MAAM;QACF,QACIA,kEAAK,KAAK,EAAC,8BAA8B,IACpC,IAAI,CAAC,cAAc,GAAGA,iBAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,cAAc,OAAS,GAAG,EAAE,EAClFA,kEAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE,IAC3DA,mEAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAU,CACjD,EACL,IAAI,CAAC,WAAW,IACbA,iBAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAE,IACxD,IAAI,CAAC,eAAe,GAAGA,iBAAK,KAAK,EAAC,cAAc,IAACA,sBAAU,IAAI,EAAC,WAAW,GACjE,CAAM,GAAG,EAAE,EACtBA,iBAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAO,CAChD,IAAI,EAAE,CACd,EACR;KACL;;;;;;;;","names":["h"],"sources":["src/components/radio-button-group/radio-button-group.scss?tag=ifx-radio-button-group&encapsulation=shadow","src/components/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.radio-button-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.radio-button-group {\n    display: flex;\n    font-family: var(--ifx-font-family);\n    gap: tokens.$ifxSpace100;\n\n    &.horizontal {\n        flex-direction: row;\n        column-gap: tokens.$ifxSpace150;\n    }\n\n    &.vertical {\n        flex-direction: column;\n        row-gap: tokens.$ifxSpace150;\n    }\n}\n\n.group-label {\n    font: tokens.$ifxBodyBody05;\n    margin-bottom: tokens.$ifxSpace100;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption {\n    margin-top: tokens.$ifxSpace100;\n    align-self: flex-start;\n    display: flex;\n    width: 100%;\n    column-gap: tokens.$ifxSpace100;\n    justify-content: space-between;\n\n    &.default {\n        color: tokens.$ifxColorBaseBlack;\n    }\n\n    &.error {\n        color: tokens.$ifxColorRed500;\n    }\n}\n\n.caption-text {\n    font: tokens.$ifxBodyBody05;\n    flex: 1;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n    align-self: flex-start;\n    display: block;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\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    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}

package/dist/cjs/ifx-radio-button.cjs.entry.js

@@ -4,13 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1ce5aae1.js');
 
-const radioButtonCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex;--_ifx-fallback-display:none !important}._ifx-radiobutton-fallback{display:var(--_ifx-fallback-display);position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}";
+const radioButtonCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex;--_ifx-fallback-display:none !important}._ifx-radiobutton-fallback{display:var(--_ifx-fallback-display);position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family)}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper:focus{outline:none}.radioButton__container .radioButton__wrapper:focus::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.error::after{border-color:#CD002F;background-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}";
 const IfxRadioButtonStyle0 = radioButtonCss;
 
 const RadioButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ifxChange = index.createEvent(this, "ifxChange", 7);
+        this.ifxError = index.createEvent(this, "ifxError", 7);
         this.disabled = false;
         this.error = false;
         this.size = "s";
@@ -61,6 +62,11 @@ const RadioButton = class {
         this.fallbackInput.value = this.value;
         this.fallbackInput.disabled = this.disabled;
     }
+    errorChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.ifxError.emit(newValue);
+        }
+    }
     handleRadioButtonClick(event) {
         if (this.disabled) {
             event.stopPropagation();
@@ -92,16 +98,17 @@ const RadioButton = class {
         }
     }
     render() {
-        return (index.h("div", { key: '4a69126345effabdb522d209b4fb867ae55373bb', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, index.h("div", { key: '66c27180f8f00aff7599a09368e740a8654917bd', class: `radioButton__wrapper 
+        return (index.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 }, index.h("div", { key: 'a6392cc1165e474ad66d171ab72a29a6b2975044', class: `radioButton__wrapper 
             ${this.internalChecked ? 'checked' : ''} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}` }, this.internalChecked && index.h("div", { key: '9012278070740bc5bfe976b66e1ca5098ca21bdc', class: "radioButton__wrapper-mark" })), this.hasSlot && (index.h("div", { key: '4a82098a237a794405ac69ec8a7898ca1ca3f41b', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, index.h("slot", { key: '805092a6667be8a22cead7a830dc483a8e53d42a' }))), index.h("input", { key: 'a9efb84dc6d54d9df3e704235702e7c1ea9587e0', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
+            ${this.error ? 'error' : ''}` }, this.internalChecked && index.h("div", { key: 'f63fbcb2b9f939523a33e1a47fad83f832440b6e', class: "radioButton__wrapper-mark" })), this.hasSlot && (index.h("div", { key: 'a26b60d3dd68091e354ad9fce6cde03bf753f60f', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, index.h("slot", { key: 'db9a37d4b079cb5da768776529ad434ea7b41e3d' }))), index.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() })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "checked": ["handleCheckedChange"],
-        "internalChecked": ["updateFormValue"]
+        "internalChecked": ["updateFormValue"],
+        "error": ["errorChanged"]
     }; }
 };
 RadioButton.style = IfxRadioButtonStyle0;

package/dist/cjs/ifx-radio-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-radio-button.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-flex;\n    --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n    display: var(--_ifx-fallback-display);\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0,0,0,0) !important;\n    border: 0 !important;\n  }\n\n.radioButton__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    cursor: pointer;\n    font-family: var(--ifx-font-family);\n\n    &.m .radioButton__wrapper {\n        width: tokens.$ifxSize300;\n        height: tokens.$ifxSize300;\n    }\n\n    .radioButton__wrapper {\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        position: relative;\n        display: block;\n        border-radius: 50%;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n\n        &:focus {\n            outline: none;\n\n            &::before {\n                content: '';\n                position: absolute;\n                width: calc(100% + 4px);\n                height: calc(100% + 4px);\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                border: 2px solid tokens.$ifxColorOcean500;\n                border-radius: 50%;\n            }\n        }\n\n        .radioButton__wrapper-mark {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: #0A8276;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-color: tokens.$ifxColorBaseTransparent;\n        }\n\n        &:hover {\n            background-color: tokens.$ifxColorEngineering200;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n\n            &.error {\n\n                &:hover,\n                &:focus-visible {\n                    border-color: #CD002F;\n                }\n            }\n        }\n\n        &.checked {\n            border-color: #0A8276;\n\n            &::after {\n                content: \"\";\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                width: 10px;\n                height: 10px;\n                background-color: #0A8276;\n                border-radius: 50%;\n            }\n\n            &.disabled::after {\n                background-color: #BFBBBB;\n            }\n\n\n            &:hover {\n                border-color: tokens.$ifxColorOcean600;\n\n                & .radioButton__wrapper-mark {\n                    background-color: tokens.$ifxColorOcean600;\n                }\n            }\n\n            &.disabled {\n                background-color: tokens.$ifxColorBaseWhite;\n                border-color: #BFBBBB;\n\n                &.disabled::after {\n                    background-color: #BFBBBB;\n                }\n\n                & .radioButton__wrapper-mark {\n                    background-color: #BFBBBB;\n                }\n            }\n        }\n\n        &.error:not(.disabled) {\n            border-color: #CD002F;\n\n            &:hover,\n            &:focus-visible {\n                border-color: #CD002F;\n            }\n        }\n    }\n\n    .label {\n        display: flex;\n        align-items: center;\n        height: tokens.$ifxSize250;\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n\n        &.label-m {\n            height: tokens.$ifxSize300;\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n\n\n\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}\n\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class RadioButton {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n  @Prop({ reflect: true }) name: string;\n  @Prop({ mutable: true }) checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = false;\n\n  private inputElement: HTMLInputElement;\n  private internals: ElementInternals;\n  private fallbackInput: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n  componentWillLoad() {\n    // Fallback for form association\n    this.fallbackInput = document.createElement('input');\n    this.fallbackInput.type = 'radio';\n    this.fallbackInput.hidden = true;\n    this.fallbackInput.className = '_ifx-radiobutton-fallback';\n    this.fallbackInput.style.cssText = `\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;\n    this.fallbackInput.setAttribute('aria-hidden', 'true');\n    this.fallbackInput.tabIndex = -1;\n    this.el.appendChild(this.fallbackInput);\n\n    // Initialize ElementInternals if supported\n    if ('attachInternals' in HTMLElement.prototype) {\n      try {\n        this.internals = this.el.attachInternals();\n      } catch (e) {\n        console.warn('ElementInternals not supported');\n      }\n    }\n\n    // Initial state\n    this.internalChecked = this.checked || false;\n    this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n  }\n\n  @Watch('checked')\n  handleCheckedChange(newValue: boolean) {\n    this.internalChecked = newValue;\n  }\n\n  @Watch('internalChecked')\n  updateFormValue() {\n    // Update both ElementInternals and fallback input\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(this.internalChecked ? this.value : null);\n    }\n    this.fallbackInput.checked = this.internalChecked;\n    this.fallbackInput.name = this.name;\n    this.fallbackInput.value = this.value;\n    this.fallbackInput.disabled = this.disabled;\n  }\n\n  handleRadioButtonClick(event: Event) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.checked = this.internalChecked;\n    this.ifxChange.emit(this.internalChecked);\n\n    const changeEvent = new CustomEvent('change', {\n      bubbles: true,\n      composed: true,\n      detail: { checked: this.internalChecked }\n    });\n    this.el.dispatchEvent(changeEvent);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(ev.key)) {\n      ev.preventDefault();\n      this.handleRadioButtonClick(new PointerEvent('click'));\n    }\n  }\n\n  @Listen('change', { target: 'document' })\n  handleExternalChange(event: Event) {\n    const target = event.target as HTMLElement;\n    if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n    \n    if (target.getAttribute('name') === this.name) {\n      this.internalChecked = false;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        role=\"radio\"\n        aria-checked={String(this.internalChecked)}\n        aria-disabled={String(this.disabled)}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={(e) => this.handleRadioButtonClick(e)}\n        tabindex={this.disabled ? -1 : 0}\n      >\n        <div\n          class={`radioButton__wrapper \n            ${this.internalChecked ? 'checked' : ''} \n            ${this.disabled ? 'disabled' : ''} \n            ${this.error ? 'error' : ''}`}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n\n        <input\n          type=\"radio\"\n          hidden\n          ref={el => this.inputElement = el}\n          name={this.name}\n          value={this.value}\n          checked={this.internalChecked}\n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-radio-button.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/radio-button/radio-button.scss?tag=ifx-radio-button&encapsulation=shadow","src/components/radio-button/radio-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-flex;\n    --_ifx-fallback-display: none !important;\n}\n\n._ifx-radiobutton-fallback {\n    display: var(--_ifx-fallback-display);\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0,0,0,0) !important;\n    border: 0 !important;\n  }\n\n.radioButton__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    cursor: pointer;\n    font-family: var(--ifx-font-family);\n\n    &.m .radioButton__wrapper {\n        width: tokens.$ifxSize300;\n        height: tokens.$ifxSize300;\n    }\n\n    .radioButton__wrapper {\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        position: relative;\n        display: block;\n        border-radius: 50%;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n\n        &:focus {\n            outline: none;\n\n            &::before {\n                content: '';\n                position: absolute;\n                width: calc(100% + 4px);\n                height: calc(100% + 4px);\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                border: 2px solid tokens.$ifxColorOcean500;\n                border-radius: 50%;\n            }\n        }\n\n        .radioButton__wrapper-mark {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: #0A8276;\n            border-radius: 50%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-color: tokens.$ifxColorBaseTransparent;\n        }\n\n        &:hover {\n            background-color: tokens.$ifxColorEngineering200;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n\n            &.error {\n\n                &:hover,\n                &:focus-visible {\n                    border-color: #CD002F;\n                }\n            }\n        }\n\n        &.checked {\n            border-color: #0A8276;\n\n            &::after {\n                content: \"\";\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n                width: 10px;\n                height: 10px;\n                background-color: #0A8276;\n                border-radius: 50%;\n            }\n\n            &.disabled::after {\n                background-color: #BFBBBB;\n            }\n\n\n            &:hover {\n                border-color: tokens.$ifxColorOcean600;\n\n                & .radioButton__wrapper-mark {\n                    background-color: tokens.$ifxColorOcean600;\n                }\n            }\n\n            &.disabled {\n                background-color: tokens.$ifxColorBaseWhite;\n                border-color: #BFBBBB;\n\n                &.disabled::after {\n                    background-color: #BFBBBB;\n                }\n\n                & .radioButton__wrapper-mark {\n                    background-color: #BFBBBB;\n                }\n            }\n            &.error::after {\n                border-color: #CD002F;\n                background-color: #CD002F;\n            }\n        }\n\n        &.error:not(.disabled) {\n            border-color: #CD002F;\n\n            &:hover,\n            &:focus-visible {\n                border-color: #CD002F;\n            }\n        }\n    }\n\n    .label {\n        display: flex;\n        align-items: center;\n        height: tokens.$ifxSize250;\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        flex: none;\n        order: 1;\n        flex-grow: 0;\n\n        &.label-m {\n            height: tokens.$ifxSize300;\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n\n\n\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}\n\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class RadioButton {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n  @Prop({ reflect: true }) name: string;\n  @Prop({ mutable: true }) checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = false;\n\n  private inputElement: HTMLInputElement;\n  private internals: ElementInternals;\n  private fallbackInput: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n  @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n  componentWillLoad() {\n    // Fallback for form association\n    this.fallbackInput = document.createElement('input');\n    this.fallbackInput.type = 'radio';\n    this.fallbackInput.hidden = true;\n    this.fallbackInput.className = '_ifx-radiobutton-fallback';\n    this.fallbackInput.style.cssText = `\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;\n    this.fallbackInput.setAttribute('aria-hidden', 'true');\n    this.fallbackInput.tabIndex = -1;\n    this.el.appendChild(this.fallbackInput);\n\n    // Initialize ElementInternals if supported\n    if ('attachInternals' in HTMLElement.prototype) {\n      try {\n        this.internals = this.el.attachInternals();\n      } catch (e) {\n        console.warn('ElementInternals not supported');\n      }\n    }\n\n    // Initial state\n    this.internalChecked = this.checked || false;\n    this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n  }\n\n  @Watch('checked')\n  handleCheckedChange(newValue: boolean) {\n    this.internalChecked = newValue;\n  }\n\n  @Watch('internalChecked')\n  updateFormValue() {\n    // Update both ElementInternals and fallback input\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(this.internalChecked ? this.value : null);\n    }\n    this.fallbackInput.checked = this.internalChecked;\n    this.fallbackInput.name = this.name;\n    this.fallbackInput.value = this.value;\n    this.fallbackInput.disabled = this.disabled;\n  }\n\n  @Watch('error')\n    errorChanged(newValue: boolean, oldValue: boolean) {\n      if (newValue !== oldValue) {\n        this.ifxError.emit(newValue);\n      }\n    }\n\n  handleRadioButtonClick(event: Event) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.checked = this.internalChecked;\n    this.ifxChange.emit(this.internalChecked);\n\n    const changeEvent = new CustomEvent('change', {\n      bubbles: true,\n      composed: true,\n      detail: { checked: this.internalChecked }\n    });\n    this.el.dispatchEvent(changeEvent);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(ev.key)) {\n      ev.preventDefault();\n      this.handleRadioButtonClick(new PointerEvent('click'));\n    }\n  }\n\n  @Listen('change', { target: 'document' })\n  handleExternalChange(event: Event) {\n    const target = event.target as HTMLElement;\n    if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n    \n    if (target.getAttribute('name') === this.name) {\n      this.internalChecked = false;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        role=\"radio\"\n        aria-checked={String(this.internalChecked)}\n        aria-disabled={String(this.disabled)}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={(e) => this.handleRadioButtonClick(e)}\n        tabindex={this.disabled ? -1 : 0}\n      >\n        <div\n          class={`radioButton__wrapper \n            ${this.internalChecked ? 'checked' : ''} \n            ${this.disabled ? 'disabled' : ''} \n            ${this.error ? 'error' : ''}`}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n\n        <input\n          type=\"radio\"\n          hidden\n          ref={el => this.inputElement = el}\n          name={this.name}\n          value={this.value}\n          checked={this.internalChecked}\n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/cjs/ifx-search-bar.cjs.entry.js

@@ -40,7 +40,7 @@ const SearchBar = class {
         this.value = event.detail;
     }
     render() {
-        return (index.h("div", { key: '9a6033dd56aecd4444cf7b5bee7916ce8d534760', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (index.h("div", { class: "search-bar-wrapper" }, index.h("ifx-search-field", { disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, index.h("ifx-icon", { icon: "search-16", slot: "search-icon" })), index.h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (index.h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, index.h("ifx-icon", { icon: "search-16" })))));
+        return (index.h("div", { key: '6b1233aa51e61ff28d90ccbb54b01742c5ff0231', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (index.h("div", { class: "search-bar-wrapper" }, index.h("ifx-search-field", { disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, index.h("ifx-icon", { icon: "search-16", slot: "search-icon" })), index.h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (index.h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, index.h("ifx-icon", { icon: "search-16" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-search-field.cjs.entry.js

@@ -55,7 +55,7 @@ const SearchField = class {
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (index.h("div", { key: 'dd5d16c933ec70acb8950279f4642ac93ab8b801', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, index.h("div", { key: '92159e695d65890de079c49c25dba47a0243e56b', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, index.h("ifx-icon", { key: '27c96d542775740161ea3630851b0b19d90a177f', icon: "search-16", class: "search-icon" }), index.h("input", { key: 'df87749e87af361855083fc54ff76826d2ca12b2', ref: (el) => (this.inputElement = el), type: "text", onInput: () => this.handleInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value }), this.showDeleteIcon && this.showDeleteIconInternalState ? (index.h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
+        return (index.h("div", { key: '74fd7b8beb33b30b3e05d02ea921c52e7f4dae39', "aria-label": "a search field for user input", "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, index.h("div", { key: '2616b4e80beb40226179c4690cc3746e4fadb60e', class: this.getWrapperClassNames(), tabindex: 1, onFocus: () => this.focusInput(), onClick: () => this.focusInput() }, index.h("ifx-icon", { key: '2876766c1659917a44e082ab9199f85dbd2c2c71', icon: "search-16", class: "search-icon" }), index.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 ? (index.h("ifx-icon", { icon: "cremove16", class: "delete-icon", onClick: this.handleDelete })) : null)));
     }
     getSizeClass() {
         return `${this.size}` === "s"

package/dist/cjs/ifx-segment.cjs.entry.js

@@ -28,7 +28,7 @@ const Segment = class {
         }
     }
     render() {
-        return (index.h("div", { key: '82774e43f27d8995c36d7d356780bbe14b76f70c', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, index.h("ifx-icon", { key: '58ea805311f071bf39562bb043a4ea4e77b6cd57', icon: this.icon }), " ", index.h("slot", { key: '659727a8768c1988b251d795c9a7ae5b9554b1f0' })));
+        return (index.h("div", { key: '316acecd8e676dbcd6f55010bb791d0746cf4937', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, index.h("ifx-icon", { key: '86adc66b777780630ebe3e4157244c2c81ceb5d2', icon: this.icon }), " ", index.h("slot", { key: '72319efb1d2b4cde4a922957d71ad388b35d276c' })));
     }
 };
 Segment.style = IfxSegmentStyle0;

package/dist/cjs/ifx-segmented-control.cjs.entry.js

@@ -72,8 +72,8 @@ const SegmentedControl = class {
         this.setActiveSegment();
     }
     render() {
-        return (index.h("div", { key: '9fb656fefd8b61e7c563ac77a20a303d40c6f146', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, index.h("div", { key: 'de4f8bf1f2404f106ff180167bf4c79abd2b165b', class: 'group__label' }, this.label.trim()), index.h("div", { key: 'e110c6c98b981142df08e7dda574b2d3e102a19d', class: 'group__controls' }, index.h("slot", { key: '3dd13439a68201c2f42104c4853b371c669e18df' })), this.caption.trim() &&
-            index.h("div", { key: '946fe774c7cf3f9642447b9a8cb0e258d3f9d493', class: 'group__caption' }, index.h("ifx-icon", { key: '39f21a9eae4961da05f38d6930bcc373671e9794', icon: 'cinfo16' }), " ", this.caption.trim())));
+        return (index.h("div", { key: 'f1db16681b45767ea6de4148d7ad8668fba35498', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, index.h("div", { key: '70980b04bcb50110612196979b44e2d61a7bc4c8', class: 'group__label' }, this.label.trim()), index.h("div", { key: '0dd8dc01db812585c2a58132d4ceb6447a16ddff', class: 'group__controls' }, index.h("slot", { key: 'e7f95a3c415312fe790e2288391e43e4f68d3279' })), this.caption.trim() &&
+            index.h("div", { key: '72784a7d56a2e39cc22b329c609828be2944e6ea', class: 'group__caption' }, index.h("ifx-icon", { key: 'dbb21f0562a130d57defcf648c12c6e00346a0dc', icon: 'cinfo16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();

package/dist/cjs/ifx-select.cjs.entry.js

@@ -7048,9 +7048,9 @@ const Choices = class {
         // destroy choices element to restore previous dom structure
         // so vdom can replace the element correctly
         this.destroy();
-        return (index.h("div", { key: '9f22a991b500016c41a63d7aa46fff087227f90b', class: `ifx-select-container` }, this.label ? (index.h("div", { class: "ifx-label-wrapper" }, index.h("span", null, this.label))) : null, index.h("div", { key: '259b6f62d0e5c60ea8fa11734fda41f969555a96', class: `${choicesWrapperClass} 
+        return (index.h("div", { key: '40ae2ee9e22586ab4119c044708dea062f978db6', class: `ifx-select-container` }, this.label ? (index.h("div", { class: "ifx-label-wrapper" }, index.h("span", null, this.label))) : null, index.h("div", { key: '87143d41c3c0513eada166b11052c55e3d993b62', class: `${choicesWrapperClass} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, index.h("select", Object.assign({ key: '9358b42323bf7828676c6423c89fb5179b8e4651', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), index.h("div", { key: 'f1d7ce031e84ca4c55c1b2228c7cf2501cf8c78d', class: "single__select-icon-container" }, this.optionIsSelected && (index.h("div", { key: '3e72d6ecf1d7a5649baa99131ac76a1287678293', class: "ifx-choices__icon-wrapper-delete" }, index.h("ifx-icon", { key: '7e0e78337c13e780c3c3ee80b5252fd35dd103e0', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), index.h("div", { key: '8037dfe8733b35760da9fba0d63886c5086819b9', class: "ifx-choices__icon-wrapper-up" }, index.h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), index.h("div", { key: 'd3d78aec55206c83b2cf81c5d43a6bf8f4a3c37f', class: "ifx-choices__icon-wrapper-down" }, index.h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (index.h("div", { class: "ifx-error-message-wrapper" }, index.h("span", null, this.errorMessage))) : null));
+            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, index.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)), index.h("div", { key: '6fc0ac048ab143a933ba79c48ed86960197ca9ed', class: "single__select-icon-container" }, this.optionIsSelected && (index.h("div", { key: '46e95d4cfb9c38283028b92d35b14a1430586e81', class: "ifx-choices__icon-wrapper-delete" }, index.h("ifx-icon", { key: '8e8ae26a55428afd386d940815c6414ae58a1f37', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), index.h("div", { key: 'ac1990b97fe0787a8186f27c4258eb9d0f847858', class: "ifx-choices__icon-wrapper-up" }, index.h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), index.h("div", { key: 'd6284be7bb197eaff05397f7246e5b6cd20e1a9c', class: "ifx-choices__icon-wrapper-down" }, index.h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (index.h("div", { class: "ifx-error-message-wrapper" }, index.h("span", null, this.errorMessage))) : null));
     }
     toggleDropdown() {
         const div = this.root.querySelector('.ifx-choices__wrapper');

package/dist/cjs/ifx-slider.cjs.entry.js

@@ -146,10 +146,10 @@ const IfxSlider = class {
         this.updateValuePercent();
     }
     render() {
-        return (index.h("div", { key: '3a43035d99bb5ae166d215994ba35dcc0a72f800', class: "ifx-slider" }, this.leftText && (index.h("span", { key: 'b5b672dd97b5fbe71f4e23ac0f35311fb4014112', class: `left-text` }, this.leftText)), this.leftIcon && (index.h("ifx-icon", { key: '1b167231afc1aba9165c7b0e340ba692ffb3ec04', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
+        return (index.h("div", { key: '37d979ae4fab76379eba0afe72a0b1cff75ba6fb', class: "ifx-slider" }, this.leftText && (index.h("span", { key: '54364e238b205ff9b8906b4f7a84f39e8924806b', class: `left-text` }, this.leftText)), this.leftIcon && (index.h("ifx-icon", { key: '898c22fc7020ce494ab199b0ae1a53f19538879d', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
             index.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 })
             :
-                index.h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, index.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) }), index.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 && (index.h("ifx-icon", { key: '7b199e3e1024289bfde3e200c3b03b1a7600f7fd', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (index.h("span", { key: 'a77ecafe2e47167c7014fdf5aa710d59cfc18659', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (index.h("span", { key: '344dd484214e0a5cbd4a530cfaec229f90dc7e7a', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
+                index.h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, index.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) }), index.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 && (index.h("ifx-icon", { key: 'dcd74689d748a499bf7e4a1f291808ca09e91be5', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (index.h("span", { key: '46943c6f10919c7822b998c5fc99392d5bbf581b', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (index.h("span", { key: '333d2a8578ceeeb6c4b9d8e12ba90ac5bf96ebd6', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-spinner_2.cjs.entry.js

@@ -14,8 +14,8 @@ const Spinner = class {
         this.inverted = false;
     }
     render() {
-        return (index.h("div", { key: 'd81d2a7692cb71c15f4aa895abcdf0d4441d2b3a', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, index.h("div", { key: '7813885c276e55354c47f2ff735a16f498b1e39f', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && index.h("div", { key: 'c4163967c2a5f58795ac974716cc4e831ec6264b', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, index.h("svg", { key: '0feafe9cdf7cfa8138a1d104824c8e5dff1b3caf', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: 'ca3cdd02b91de714c12e1d2d6ad800fee938ac03', id: "spinner/conductor" }, index.h("path", { key: 'aedaa84532c0c51f8e0a7a8683fb7c24379b73a8', id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z" }))))));
+        return (index.h("div", { key: '036b7ba57d3d4612adf02dc4af7bb10ab44525bc', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, index.h("div", { key: '57506cdc9b93523472a2dd9730ad63fe0747edc3', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && index.h("div", { key: '9e9d6e55e1fb021dea19d07b640e36b6c2aeda8d', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, index.h("svg", { key: '742486b0d84452b2603aaf397c0f09f01a2cb7f0', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: 'fc459287dbaee14447dc150ac01a52dad8ce6add', id: "spinner/conductor" }, index.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" }))))));
     }
     getSizeClass() {
         return `${this.size}` === "s"
@@ -79,12 +79,12 @@ const TextField = class {
         this.internals.setFormValue("");
     }
     render() {
-        return (index.h("div", { key: '3569c6a5a0a23d5a04c2f87488bbc70b8d65b7e9', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, index.h("div", { key: '4a82c26a9a3ef86efa6d00bf903b121559844575', class: "textInput__top-wrapper" }, index.h("label", { key: 'cd5b5c574b857dfd4729db81a2c50ec3893398aa', htmlFor: "text-field" }, index.h("slot", { key: '5752e421626ad179a3f7562c5e99d549cd4b2a48' }), this.optional && this.required ? (index.h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (index.h("span", { class: "optional" }, "(optional)")) : this.required ? (index.h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), index.h("div", { key: '007dccc58661b185896b08ac896faf49848de347', class: "textInput__bottom-wrapper" }, index.h("div", { key: '87137bf9fc7d33242c15be5ce687e029e5a25e07', class: "input-container" }, this.icon && (index.h("ifx-icon", { key: 'cf3edf3e3b344a40a14d104c93270f4d08842281', class: 'input-icon', icon: this.icon })), index.h("input", { key: '930c56a46d53e729c034e6bbaf5cc72aadfaf655', ref: (el) => (this.inputElement = el), disabled: this.disabled, type: "text", id: 'text-field', value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
+        return (index.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' : ""}` }, index.h("div", { key: 'a4ba691bc10bd596c27b9971aa0369cad9f48144', class: "textInput__top-wrapper" }, index.h("label", { key: 'a4ee448f393c4d2619d3451ab9d4eb56048137d3', htmlFor: "text-field" }, index.h("slot", { key: '0bab9b9c54e96a9dadf6d0aab8dae0746ac080e8' }), this.optional && this.required ? (index.h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (index.h("span", { class: "optional" }, "(optional)")) : this.required ? (index.h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), index.h("div", { key: '7d982d3a66628c7401885dc7f266c5cb96fa8c71', class: "textInput__bottom-wrapper" }, index.h("div", { key: 'a8bb20edcaf3107351da59949a122a859695b1a5', class: "input-container" }, this.icon && (index.h("ifx-icon", { key: '122114cb91e26d7681e53501d1f417f3abad30e1', class: 'input-icon', icon: this.icon })), index.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' : ""}
                 ${this.error ? 'error' : ""} 
               ${this.size === "s" ? "input-s" : ""}
-              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (index.h("ifx-icon", { key: 'b850a3fdb13eab973c97cbfb59a029c5fdbe7ed3', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
-            index.h("div", { key: '384215f67bc0393452dd1fa0fba91bd48ebc7e2a', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
-            index.h("div", { key: 'ebe4a71136aa5e282ffae576aa191d5099383a34', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
+              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (index.h("ifx-icon", { key: '705ba8d623ff1279edb392709caf8bc4dffa9239', class: "delete-icon", icon: "cremove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
+            index.h("div", { key: 'b7eba477a90d5bbef26a21c5a132dd33964147be', class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
+            index.h("div", { key: '3acbde335088938f94a7174794dad57dd92f99be', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ifx-status.cjs.entry.js

@@ -17,7 +17,7 @@ const Status = class {
         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 (index.h("div", { key: 'd6594837b2884bfcb3aa73a47f335a240c6567b2', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, index.h("span", { key: 'ebb8c7eaeb4a951ade8568b5fa08ba479e2f614d', class: `dot ${effectiveColor}` }), index.h("p", { key: '3061c0fa17b6f1f4895f43e627496c3469976191', class: "text" }, this.label)));
+        return (index.h("div", { key: '0537cea5ff8d9b92bf309e601d32657de3a3d81c', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, index.h("span", { key: '0afda2ddc5bf64ac2b6c09317ceb4d73cfb39cf8', class: `dot ${effectiveColor}` }), index.h("p", { key: 'bb64b4b6595ae980d98d74ea9116c4c040e72ff5', class: "text" }, this.label)));
     }
 };
 Status.style = IfxStatusStyle0;

package/dist/cjs/ifx-step.cjs.entry.js

@@ -51,7 +51,7 @@ const Step = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'cbee70d7f0f5c76a09d48423566bc3d485cd929a', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''} 
+        return (index.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' : ''} 
                         ${this.error ? 'error' : ''}
                         ${this.stepperState.variant}
                         ${this.complete ? 'complete' : ''}
@@ -59,11 +59,11 @@ const Step = class {
                         indicator-${this.stepperState.indicatorPosition}
                         ${this.active ? 'active' : ''}
                         ${this.clickable ? 'clickable' : ''}
-                        ${this.disabled ? 'disabled' : ''}` }, index.h("div", { key: 'fee2738c8478680320ec50c53a92d6e7b92a86e3', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && index.h("span", { key: '96aa1a741cd013b6ae17f32de2725c368ea51618', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            index.h("div", { key: 'c9c696ac8898befd165fed334c36e7f77c91aa4f', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && index.h("ifx-icon", { key: '98ff6e603c94aa1a57c5f8491dcf2a17cd4a4864', icon: 'check16' }), this.active && index.h("span", { key: '2fc5ce8a43ef62ecae07fbf25688af0b629b8e6d', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && index.h("ifx-icon", { key: '72db4eb91a114022e470d14e035c1ff4364f6f00', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && index.h("span", { key: '0a215fa7c2df964b4743f0fb0b16652b92003bfa', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
+                        ${this.disabled ? 'disabled' : ''}` }, index.h("div", { key: 'd8230818a17da9e6a84a140c3b2b912313884967', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && index.h("span", { key: '4d8c49a1ee892eedd31aa645da8f57aa655b7a65', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
+            index.h("div", { key: 'a6263bf57f9ce8bc615e8d611b0128e075d148b9', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && index.h("ifx-icon", { key: '17ecbfc2a12141e58e2481efc54bd86683f5e995', icon: 'check16' }), this.active && index.h("span", { key: 'd0139442be7227f075c6ab065cffc991a87296c9', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && index.h("ifx-icon", { key: '867418f5a3f7e5958521cde8634ed03e68f43921', icon: 'warningf24' }), this.stepperState.variant !== 'compact' && index.h("span", { key: 'a97d98c73df0e64937dd10fca6b456e19000a509', 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))) &&
-            index.h("div", { key: '9b77faa804a42714b79535bfe530854c68ca6372', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && index.h("slot", { key: 'a84af39da90db9e59e3b614f63de9802161a0e51' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && index.h("slot", { key: 'bdfaff2aed9faf5503fb89b7e2105c48d721dbe2' }))));
+            index.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') && index.h("slot", { key: '3ef384da05179cc06434b7ab707b12352f292cfe' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && index.h("slot", { key: '6368938443c139f025aa0e37295f6a4002aab7d0' }))));
     }
     ;
     static get watchers() { return {

package/dist/cjs/ifx-stepper.cjs.entry.js

@@ -126,10 +126,10 @@ const Stepper = class {
         this.syncIfxSteps();
     }
     render() {
-        return (index.h("div", { key: 'c7e51b5fe17beb80cac38fe0da1600f44b4ca111', "aria-label": 'a stepper', role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` }, 
+        return (index.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 : ''}` }, 
         /* Progress bar for compact variant. */
         (this.variant === 'compact') &&
-            index.h("div", { key: '233c1234510997adab316ffb47e341c575036b95', class: 'stepper-progress' }, index.h("div", { key: '45c775b8727bac00e4c57a6e6e6129fe320e5a5b', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), index.h("div", { key: '35ad66a86c1b1f6d008a232ae33944a3d7e122a6', class: `stepper-wrapper` }, index.h("slot", { key: '671a05ed6ce3927369e202f2a9218944bb6bb7cf' }))));
+            index.h("div", { key: 'e9b93653f41f8c147ea0e1ab9b9b378982bb7ac6', class: 'stepper-progress' }, index.h("div", { key: '801055fddd1117838e8632dd5b6c4737f7333848', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), index.h("div", { key: '524ddcf264251bd8d232eed88f9e6fe5bb70127c', class: `stepper-wrapper` }, index.h("slot", { key: '8a4272a508f426430b11b2f650989b5989157071' }))));
     }
     ;
     componentDidRender() {

package/dist/cjs/ifx-switch.cjs.entry.js

@@ -80,7 +80,7 @@ const Switch = class {
         this.internals.setFormValue(null);
     }
     render() {
-        return (index.h("div", { key: '0481403a878470cdb42c03be663b88f19fe59c58', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, index.h("div", { key: 'c84f8e06349d1ffa03efb077e64881b12c4ac640', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, index.h("div", { key: '533ca85af87c3edff93c76aaa0860f997b107e67', class: "switch__checkbox-wrapper" }, index.h("input", { key: 'fd9a8c6442c321a81161645c7e84f1d03cae3002', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), index.h("div", { key: 'ad951898b5b38de29aff0be91f734d443399f050', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), index.h("div", { key: '14219d030661fed97b8210d67ec3794147884225', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, index.h("label", { key: '3892d20ad28a1f1823e8302e9820973df938ee70', htmlFor: "switch" }, index.h("slot", { key: 'e350367180975d30978ec7c7d026b34e86c79741', onSlotchange: () => this.toggleLabelGap() })))));
+        return (index.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) }, index.h("div", { key: '54c0602b247bacae3bc8112515ac348e723c2d4a', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, index.h("div", { key: 'ea15edde0e7f03cc58d5ccf1b57d5bf10670f467', class: "switch__checkbox-wrapper" }, index.h("input", { key: 'c072e35bceda6b9288cea93af77f10c5462831a4', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), index.h("div", { key: '0278ce31ef374e478cae26befe6fbd95be087ded', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), index.h("div", { key: 'e8de289b1b12ea9de9d7b5b076c9e258eeeba733', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, index.h("label", { key: '335b0fca0d94f0ac43dee1571a4866d4f75fb70b', htmlFor: "switch" }, index.h("slot", { key: 'd34f2450a877604ab63b6a6d2125810f2a877965', onSlotchange: () => this.toggleLabelGap() })))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ifx-tab.cjs.entry.js

@@ -18,7 +18,7 @@ const IfxTab = class {
         this.tabHeaderChange.emit(this.header);
     }
     render() {
-        return index.h("slot", { key: '845e795d2a758c1612b8601ea2eafab0385f02dc' });
+        return index.h("slot", { key: '3f3568c625f064beb9e5911ea61f1f65f9d168a6' });
     }
     get el() { return index.getElement(this); }
 };