@infineon/infineon-design-system-stencil 37.13.0--canary.1964.d253442be84e3519692a852074a0a0c9de0710a9.0 → 37.13.0--canary.1964.46dfc755d615c2e9457c944038d41653343e16b0.0

package/dist/collection/components/table-advanced-version/list/list-entry/list-entry.js

@@ -13,7 +13,7 @@ export class ListEntry {
         this.ifxListEntryChange.emit({ label: this.label, value: this.value, type: this.type });
     }
     render() {
-        return (h("div", { key: '67617f1597abd817b600879ccf8a4cff56ba8f2d', class: "wrapper" }, this.type === 'checkbox' ? (h("div", { class: "list-entry" }, h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (h("div", { class: "list-entry" }, h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
+        return (h("div", { key: '79874b2cab8b22fe6599563cd45f2d038d3cf1f5', class: "wrapper" }, this.type === 'checkbox' ? (h("div", { class: "list-entry" }, h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (h("div", { class: "list-entry" }, h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
     }
     static get is() { return "ifx-list-entry"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-advanced-version/table.js

@@ -421,12 +421,12 @@ export class Table {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';
-        return (h(Host, { key: '0c650f68b70fbdf83a7bfadb01cdcaebabcf0645' }, h("div", { key: 'e3d0c41c29ececdc177200031c6dd45d75f972a3', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '762cf899600a473e5a6b57fb0676fe1994bb59a3', class: "sidebar-btn" }, h("ifx-button", { key: '3f59b62a395f48a69fc03c0f60022285dbf1d2a9', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '792f0b178594996254318018a0d0490d4a4e519a', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '6446a1f08a1ccf9a24ccf79861d50a95e101fed6', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '784d702ecab0319003f01c6455934d2cbabc780b', class: "sidebar-container" }, h("div", { key: '264d20881e6f2cd929f1900ef404e47a51b4fdd8', class: "filters-title-container" }, h("span", { key: 'ae00e980513b8272fd1debff9870fd23072395ee', class: "filters-title" }, "Filters")), h("div", { key: 'd6f99f77d98e5ea58893f07fe0fd90f44f55545b', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'fa88f37ba15271c7420a454e2b7c9a917a433e04', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '64ff99381fa7936a4760ff32f4e3df8da7f0b61c', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'a50636664ccc2e8a811c91c82bd125b1dd4ed5b6', name: "topbar-filter" })))), h("div", { key: 'ffbed19dd7bb0263d71a771e0751790d065d4d9f', class: "table-pagination-wrapper" }, h("div", { key: '281ec6bd3c4757783999d2d417207241b121a418', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
+        return (h(Host, { key: 'fb906655167ddedb80def7cfb3eec28e58ecd0d5' }, h("div", { key: 'eea988c62f6839c0519763705909e386551c63c4', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '548e6e19fd2e250eae6ccc0a8254f91ff4777640', class: "sidebar-btn" }, h("ifx-button", { key: 'b3a2a09589df2fcc79f542115f84a26321697b90', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '3c8e715c78928df34e0221b3c6d7707b91e9c55f', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'f8be6a37a02130881ffadb33a3ffdf6a5917732f', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: 'c51a22c0771e01f82e27c33dc3b8652f8bd113cc', class: "sidebar-container" }, h("div", { key: 'd5a488b075f98e65df89d52d83ed4d2f0d28f9c7', class: "filters-title-container" }, h("span", { key: '1715722349bdfcfef4e258b031a3ffaef6a04bb2', class: "filters-title" }, "Filters")), h("div", { key: '82b88eaefd81471fc3f737b1cb8d3a5c4b3d7daf', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '94c9f07686c925aca2038c5d377be13dbcca08d2', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: 'c005b97bc68994e45b72087629affc14752b98da', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'a597fe719c81a9a34a18199eaf5bc4233eefd40f', name: "topbar-filter" })))), h("div", { key: '0b0d059e7f7797cdccceb6e5972d42bb5cf0d264', class: "table-pagination-wrapper" }, h("div", { key: 'd4aeca558ea68c5a14a0df4487005348e43d16c5', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
             const filter = this.currentFilters[name];
             const filterValues = filter.filterValues;
             const isMultiSelect = filter.type !== 'text';
             return filterValues.length > 0 ? (h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? "multi" : "single", readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (h("ifx-chip-item", { value: filterValue, selected: true, key: filterValue }, filterValue))))) : null;
-        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: 'e8ba834ccf9c915e634bc5d687aabdc23b995ff0', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: 'd0bab2a2971ee459cd22dfc2ce883d909e0c2648', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: '22fab4714bd8ed40f0cc04b279b48c992a8f669b', class: "matching-results-container" }, h("span", { key: '0eee32526472608dc5291a1bbc689deeca28830f', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '49a02c252ce720d179dded874b63bdecb70739cf', class: "matching-results-text" }, "matching results"))), h("div", { key: 'e05f76d17a92dfae4a6d82471c331285e230bdb7', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: 'e9b197433bcd8631b88198cb9fd9fbdf623ebb94', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage }) : null)))));
+        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: 'b888feff25c69793865808001c15f26a3812d724', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: 'b99afab0bd7f94af80710ea46b4f607704f3c41c', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: '2664799a64bb5643b1e1ad3e6e670c28d38bf8d0', class: "matching-results-container" }, h("span", { key: 'c2a8dbb58eefe88452f2118f6a6d770622ce9351', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: 'e41adb3796ead5fad432406f562ec844145589f8', class: "matching-results-text" }, "matching results"))), h("div", { key: 'f5ba45475d3798c984f242ee157a56b0155665c7', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: 'ed0ce2dec6f58b4a9621410aa33319c552c4dcaa', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage }) : null)))));
     }
     hasButtonCol() {
         return this.getColData().some(column => column.field === 'button');

package/dist/collection/components/table-basic-version/table.js

@@ -151,7 +151,7 @@ export class Table {
         return {};
     }
     render() {
-        return (h(Host, { key: '3e9c2f94902a6396a4e12e29f9f238ffede5fbc5' }, h("div", { key: '1ace317c72c069198ca5ec3abee52de9748d4bf7', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '24d61fbc8f3f7f9f191def163590399d4a42e007', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: '3777e151f6fc16bcb131a6f9bf19b203b74f33dd' }, h("div", { key: '1546cd57c3815e81cfce47d9ea10cd65a8c07117', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '2cc987fe15736e1df750b5e4587c4aca767009e7', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     static get is() { return "ifx-basic-table"; }
     static get originalStyleUrls() {

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

@@ -8,7 +8,7 @@ export class IfxTab {
         this.tabHeaderChange.emit(this.header);
     }
     render() {
-        return h("slot", { key: 'bada6a68fb9100b7744465f11956441664345dc0' });
+        return h("slot", { key: 'bedec1035ad52a5601082ad5c1f75559384ccc7c' });
     }
     static get is() { return "ifx-tab"; }
     static get originalStyleUrls() {

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

@@ -204,9 +204,9 @@ export class IfxTabs {
     }
     render() {
         var _a;
-        return (h("div", { key: 'c09504c2d18dc0f23d9866b301b7aadee723c9d3', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '7c6f7b26146cce7d80243e1fa9a831a2ee602ee8', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (h("div", { key: '2704774f9767516a8786a3eaf9f98d743924f13b', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '95ddd99c3d54a94bcde1f3988c8b0e29c3cd59ea', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
             _a.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, (tab === null || tab === void 0 ? void 0 : tab.icon) ? h("ifx-icon", { icon: tab.icon }) : '', tab === null || tab === void 0 ? void 0 :
-                tab.header))), h("div", { key: 'a894386718f622f7c0659e0b345f1b8b94317e84', class: "active-border" })), h("div", { key: '54cdff85a6bdb6ce457fb5fea7c55d3c4cd37335', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
+                tab.header))), h("div", { key: '511b99c1418962ea2b589b16fcc05a4dd8fc3bb5', class: "active-border" })), h("div", { key: '8afd1be5a94bf685cf8fbe4e0ebfc97920b23716', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
     }
     static get is() { return "ifx-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tag/tag.js

@@ -10,7 +10,7 @@ export class Tag {
         }
     }
     render() {
-        return (h("div", { key: '97930376aca05bd6406d6c70b0fda7caa6809fed', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: '497142273876e48d985b5136b001315c845a14ec', icon: this.icon })), h("a", { key: '93c3d8fe8f79e6c3450bc41382210b2dc16aa103', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: '35973bdd372c739c585179ffd1b046f584b9d34c', class: "label" }, h("slot", { key: 'df6bca4c08bb1b5b3e13eefeea087de803aae2f1' })))));
+        return (h("div", { key: '94b0aba4203e3daab32c8702cf853e4beebbb85a', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: '0adc3b9b44bb5fe48242bf66f30b85d22f3c1cf1', icon: this.icon })), h("a", { key: '61e1a9166ef9bfc769050bfe5dcb40de37af7ece', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: '25f120e464e3a2f85f92f552859de7a8fd97df57', class: "label" }, h("slot", { key: 'bcb88558843da289a43422b91aadbffc59e13aa3' })))));
     }
     static get is() { return "ifx-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/templates/template/template.js

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

package/dist/collection/components/templates/templates-ui/templates-ui.js

@@ -40,7 +40,7 @@ export class TemplatesUI {
         alertWrapper.classList.remove('show');
     }
     render() {
-        return (h("div", { key: '644982178421a6fdd076291a4799a3086132ff58', class: 'templates__container' }, h("div", { key: '87474b32cbb5bd4eff82368bde5c57ac52c8a125', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '1823cb8f72943e82f8cb2c92b65e9df23cc54254', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '9f3cc0376841c0d3339b33767ba02587f13436f4', class: "alert__wrapper" }, h("ifx-alert", { key: '89c93f1cd43eb94f786577f2e15b595898f8b708', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), h("h2", { key: '293283d741b61597cd1a4881f981d5e6b94b9d2a', class: "templates__title" }, "Choose your template"), h("div", { key: '4fb6a4006758489861ea43f555ef08020cfab07c', class: "templates__wrapper" }, h("ifx-template", { key: 'a487b7e7bd52fd7b6d893e498daa98f4a92ff85d', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '60c2179fc2a938912b759bba2620e624864a6a54', name: 'template-02', thumbnail: this.wizardTemplate }))));
+        return (h("div", { key: '1f0f25e99b8406b1614f3b864bcd0cabd21adb98', class: 'templates__container' }, h("div", { key: '076e9c4101b309807bd44ad00f8081634846b466', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '8804706815af0837fcab030559855f4f507a8b41', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: 'a2a47da0b888883a95c12ab89d3a1aaddb36e3b2', class: "alert__wrapper" }, h("ifx-alert", { key: '5ebfe1b37e85043fa283afcf5a1e9e175178b3ba', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), h("h2", { key: '8e34c721d967f56c61030e24d68414303767c381', class: "templates__title" }, "Choose your template"), h("div", { key: 'ffb4f96e036087c879ab534c458ba541edf53065', class: "templates__wrapper" }, h("ifx-template", { key: 'a769cc353dfa0aac2dfbde9a36f77f9a4926c4b4', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '5d25e94c388febf5d9c3f558dfdbee7883deabf6', name: 'template-02', thumbnail: this.wizardTemplate }))));
     }
     static get is() { return "ifx-templates-ui"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text-field/text-field.js

@@ -56,12 +56,12 @@ export class TextField {
         }
     }
     render() {
-        return (h("div", { key: 'b3c76af41654e98bdb7fd7693a6de29900c934e3', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: '30cc8344642dd71627c8e842d53dc9e98d65a190', class: "textInput__top-wrapper" }, h("label", { key: 'e5c0f480535ce2ae35c64b725b5d22993e832bac', htmlFor: this.internalId }, h("slot", { key: 'd769bb184a3fe65b0f4e885bcdb2d0a028653d63' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: 'f8325fb215c46bfc0ca3c8ff1af0f100160dce99', class: "textInput__bottom-wrapper" }, h("div", { key: '60f7ffa56e8fee8d5f3f01b0b1522662889d987e', class: "input-container" }, this.icon && (h("ifx-icon", { key: '40bbce1bfc6652b78c5005b27c49b599b7bd8dd7', class: 'input-icon', icon: this.icon })), h("input", { key: '960d2fc2ed78171e7850df9d7770e6e8fa686ae6', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
+        return (h("div", { key: 'c07f5968945be4cfb4f6cc9b321093cfe5f67027', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { key: 'fb4986b095479b355c39cfeae41d8117a6b7e51d', class: "textInput__top-wrapper" }, h("label", { key: '2ea4d285e7482bfb08a5e533455764824775147d', htmlFor: this.internalId }, h("slot", { key: '506a6221171a568d45b6be30bfadbf148bb9cfe4' }), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: `required ${this.error ? 'error' : ""}` }, "*")) : null)), h("div", { key: 'ff0b0be8491c305416d609163378cf194ad42997', class: "textInput__bottom-wrapper" }, h("div", { key: 'b02d2a4cd03c974943381d606585681de966d123', class: "input-container" }, this.icon && (h("ifx-icon", { key: 'cb6ec08761a4af76c10ceebef161860d5995b99b', class: 'input-icon', icon: this.icon })), h("input", { key: 'feabf1a283f323938aa93069283640f5ed8f51af', ref: (el) => (this.inputElement = el), disabled: this.disabled, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ""}
                 ${this.error ? 'error' : ""} 
               ${this.size === "s" ? "input-s" : ""}
-              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: '6717894cbe25ff5ce78d52d71afabec092ce2fe9', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
-            h("div", { key: '3d608700a1af663cbe806e769334a7f4d65cee44', class: `textInput__bottom-wrapper-caption ${this.disabled ? 'disabled' : ""}` }, this.caption), this.error &&
-            h("div", { key: '25a7b2e58d3b458842a930577f3c027ede116421', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
+              ${this.success ? "success" : ""}` }), (this.showDeleteIcon && this.value) && (h("ifx-icon", { key: 'f9060e17967aa3012336482cf6564a6c247b85d6', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() }))), this.caption && !this.error &&
+            h("div", { key: '9f7547789c456a0ac940978d7dcfc5fbf7d84fc2', class: `textInput__bottom-wrapper-caption ${this.disabled ? 'disabled' : ""}` }, this.caption), this.error &&
+            h("div", { key: '8fdaf2eda2584cb55f45b3b7f2362d87441baa69', class: "textInput__bottom-wrapper-caption error" }, this.caption))));
     }
     static get is() { return "ifx-text-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.js

@@ -54,8 +54,8 @@ export class TextArea {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '1c3eb9b784aa906eb8a83745cdacab55b5fd2b95', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'c497f31cb86e799d56f081f6ac4f4cae5e1ac60d', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.trim(), this.required && (h("span", { key: '606f2469e6a401ea44d4626fad4a980a2690566a', class: `required ${this.error ? 'error' : ""}` }, "*"))), h("div", { key: '55defc50983db56da7fdee6ef79f1156573fa531', class: 'wrapper__textarea' }, h("textarea", { key: '17a466044eb67597558976b632c5b539c832e296', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '52093b5fc9517dd9ae405a6c03332a4c090c7b6e', class: 'wrapper__caption' }, this.caption.trim()))));
+        return (h(Host, { key: '3c6e9e94424bf16199c02a74b37c38e5479da515', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled' : ''}` }, h("label", { key: '523b22340786b4b80049b8a5c564156ab270ec7c', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.trim(), this.required && (h("span", { key: 'f297fabd11b18aab1f8ac32c4111ce48514c8607', class: `required ${this.error ? 'error' : ""}` }, "*"))), h("div", { key: 'd0e5f4351bf8b7b4483db55da4262898aa7e45e2', class: 'wrapper__textarea' }, h("textarea", { key: 'a3b6fe24bac13ce7360a76990ae05e2252d43962', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'a084c410f63bd7ca6dc10acc326cc0c14a951be1', class: 'wrapper__caption' }, this.caption.trim()))));
     }
     static get is() { return "ifx-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -155,10 +155,10 @@ export class Tooltip {
             'tooltip-extended': true,
             'visible': this.tooltipVisible,
         };
-        return (h("div", { key: '2760b62a9d015ef354f5557e4e3a77c235fd68b2', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'f4160de3ee03ca86582320b6391600975ce4ef95' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '8635963916a66c6f64cf681dbf07738efa7ce699', class: tooltipDismissible }, h("button", { key: '84470f75f91f7afe16aff9b5259d90b9bb9aec1c', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: 'c441f58d302b362bf6235cbd43e2e7429423b0a5', icon: "cross16" })), h("div", { key: '0fc873c5a9e5a72c925c3c524575c02b6b5fdc67', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'd3e56cb546ba41a2ce051f24f3619f2584de8b62', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '7f78e1e68cdcd29a5d469bf7d4e3c57d8ae167b3', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '0f93d30a5d3065c086de6fc6c6338617fdd0141b', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '493a72c5821d09c1f8be4c0e92b66fc417a859f6', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
-            h("div", { key: '1015d959cfc54f09b9a264dff2cf180103e91db3', class: tooltipCompact }, this.text, h("svg", { key: '72ab4e556e1341230ab1ee5c3f120f4530f8f97a', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8b6682b5537f22bfd9e4e5f7611902329d381e08', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
-            h("div", { key: 'cfb98b53f2ff5d3886a44ad8cee108f85251d1cc', class: tooltipExtended }, h("slot", { key: 'd130cddfbf178c813c475f240be392ce6def7abd', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
-                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '84d1a7ab078ba8e49a38e799d2264e40ff48e29e', class: "tooltip-extended-content" }, this.header && h("div", { key: 'c437bc440d31e61748adf2cce59ecc74fe205f23', class: "tooltip-extended-header" }, this.header), h("div", { key: 'ad291a774247680326d191fe42b70729bc6a389f', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'cd2d28851998a77adff300924f8dbaf9423ac732', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '46f6e2f1d4c3b3668b446e3259207c5aa9bbea10', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
+        return (h("div", { key: '3153b0de8f955ba1d53fd410855245c5b83346ac', "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: '9e17213b1685ddb719d1b5e1054d6058a4ee6883' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: '0a01726d528c78f665ddd375eb452c861e6834d4', class: tooltipDismissible }, h("button", { key: '8aec520727f0b555764fc6a89607f5c886375cec', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '45f9288221b598e49a1ea2647c84e37bab684cca', icon: "cross16" })), h("div", { key: '17a744951346dcc88e2d2bb04952338fbf8a6c9d', class: "tooltip-dismissible-content" }, this.header && h("div", { key: '54973c1b3ca9034220cb84d51a30855f07baa85b', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '1f124dfbcdbf0bd5b05ef347d1b8e453d9a1dae8', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: '30abeaa7d05f1763d9d461ab4eaa65c8f9e1c8f0', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4f4209dc3752a40763fd37fa2e16ad2e1c3cf33f', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
+            h("div", { key: 'ac89e86f8946ce718e8c63322afd009c55a34be2', class: tooltipCompact }, this.text, h("svg", { key: '4ddca543a94d87b954da35ba3c409938a0dc340d', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '2bbd19dc92dfa85cfc8ceab896312ed1bfcd533c', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
+            h("div", { key: 'fdea84a28417d4f6cde203f33a7a0978d466c81b', class: tooltipExtended }, h("slot", { key: 'aac6014d34993ec145a3c60453b392cd3dd36959', name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
+                h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { key: '3e552b9f5a4ae27eec6688fb47d3d89f614062a9', class: "tooltip-extended-content" }, this.header && h("div", { key: '4e1c314b046fcc6b32fc7c44a41f9b422ace2e0d', class: "tooltip-extended-header" }, this.header), h("div", { key: 'f84d89ad6724fd74de8ce72d290b23bef7b5f011', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'ac13f38631507d24581b51f5b4853ce6322ea740', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'dde248f6e0a563df8c58d642635e89982cb79497', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
     }
     static get is() { return "ifx-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tree-view/tree-view-item.js

@@ -356,12 +356,12 @@ export class TreeViewItem {
         };
     }
     render() {
-        return (h("div", { key: 'b623c3fd84cc4a30ddba8dd47585b2a659d2d3a8', class: {
+        return (h("div", { key: 'a290b75fff1437936246bc2b7435d936c23153b9', class: {
                 'tree-item': true,
                 'tree-item--expanded': this.isExpanded,
                 'tree-item--has-children': this.hasChildren,
                 'tree-item--disabled': this.disabled,
-            }, role: "treeitem", "aria-expanded": this.isExpanded ? 'true' : 'false', "data-level": this.level, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel }, h("div", { key: 'a373eae3b206b841e4d8e5821fa9c516481b9420', class: "tree-item__content" }, h("div", { key: '9fe544f0d1697b080fbdb2e345fd746bda6c41c5', class: "tree-item__checkbox-container", onClick: e => e.stopPropagation() }, h("ifx-checkbox", { key: '343f38d28181537e98afdd8be036a98a7c12e7b7', size: 's', checked: this.partialChecked ? false : this.isChecked, indeterminate: this.partialChecked, onIfxChange: this.handleCheckboxChange, disabled: this.disabled })), h("div", { key: '3ef5265aa558a58922ef4afbf3b8889e9ed93cc3', class: "tree-item__header", style: { paddingLeft: `${this.level * 24 + 10}px` }, onClick: this.handleHeaderClick, tabIndex: -1, "aria-disabled": this.disabled ? 'true' : undefined }, this.hasChildren && (h("div", { key: '7b9ddbe228d3c5aa2fc8d84db32753fdeb17d858', class: "tree-item__chevron-container", onClick: this.toggleExpand }, h("ifx-icon", { key: '4830c93cf3abea6d0fceaea1c1a4a23d6a69e20e', class: `tree-item__chevron ${this.isExpanded ? 'chevron-down' : 'chevron-right'}`, icon: "chevron-right-16" }), h("div", { key: '17eca093948d822436e20f5d3b1ee5f2836dbffd', class: "tree-item__line" }))), h("div", { key: '1a8b708487bbb6c3ccb383b8f156e8d0946856e8', class: "tree-item__label-icon-container", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown }, h("div", { key: 'f0789ab2e845f7dbe64e53599b1212ef659eefaa', class: "tree-item__icon-container" }, this.hasChildren ? (h(Fragment, null, h("ifx-icon", { class: { 'icon--hidden': this.isExpanded }, icon: "folder-16" }), h("ifx-icon", { class: { 'icon--hidden': !this.isExpanded }, icon: "folder-open-16" }))) : (h("ifx-icon", { icon: "file-16" }))), h("span", { key: '64277c6266687ae50746325b1128a6e91c4889f3', class: "tree-item__label" }, h("slot", { key: '5293ea98448cfaf87ae22bb3afe784a75e394bdb' }))))), this.isExpanded && h("div", { key: '44dafdf7ef4b82921432210630807ace3f4fdbd7', class: "tree-item__children" }, h("slot", { key: '047839e4f4adbea94cc866926651b6d5d7fdbddc', name: "children" }))));
+            }, role: "treeitem", "aria-expanded": this.isExpanded ? 'true' : 'false', "data-level": this.level, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel }, h("div", { key: 'c190c71b69acb4946e299aea6f03299b6aac9497', class: "tree-item__content" }, h("div", { key: 'eaaf691c6cfbe39f5a46fe78f6778ad85b76237b', class: "tree-item__checkbox-container", onClick: e => e.stopPropagation() }, h("ifx-checkbox", { key: '8c404dcdafc8e3b3efae1fb051165111d88a9d63', size: 's', checked: this.partialChecked ? false : this.isChecked, indeterminate: this.partialChecked, onIfxChange: this.handleCheckboxChange, disabled: this.disabled })), h("div", { key: 'baecea346031b6d955a43bb62853640f826b2de6', class: "tree-item__header", style: { paddingLeft: `${this.level * 24 + 10}px` }, onClick: this.handleHeaderClick, tabIndex: -1, "aria-disabled": this.disabled ? 'true' : undefined }, this.hasChildren && (h("div", { key: '993267959d9f16f93312d14010f2d18b8a454b68', class: "tree-item__chevron-container", onClick: this.toggleExpand }, h("ifx-icon", { key: 'a1798f11a1197f3c60167567dea0e16dd5f4fd79', class: `tree-item__chevron ${this.isExpanded ? 'chevron-down' : 'chevron-right'}`, icon: "chevron-right-16" }), h("div", { key: '579da8131946dc0826dca3a1524b9d69b3aa148a', class: "tree-item__line" }))), h("div", { key: '585bfc668a9d0842638d640701e29703ebf174e4', class: "tree-item__label-icon-container", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown }, h("div", { key: 'ea54520f9ba2ad12ce7a591f02547602cc61913c', class: "tree-item__icon-container" }, this.hasChildren ? (h(Fragment, null, h("ifx-icon", { class: { 'icon--hidden': this.isExpanded }, icon: "folder-16" }), h("ifx-icon", { class: { 'icon--hidden': !this.isExpanded }, icon: "folder-open-16" }))) : (h("ifx-icon", { icon: "file-16" }))), h("span", { key: 'f707075bd11eee73ef8cc8db0444d8c93e528c06', class: "tree-item__label" }, h("slot", { key: '2961e332d6ca1b5360c5352907347a3cf7fbc7cc' }))))), this.isExpanded && h("div", { key: '04db63360ae3205a38b4182a5f78b38d9fbb3c57', class: "tree-item__children" }, h("slot", { key: '4241a2f3f0698727d4fd92f18e555b2002bb4bba', name: "children" }))));
     }
     static get is() { return "ifx-tree-view-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tree-view/tree-view.js

@@ -36,7 +36,7 @@ export class TreeView {
         }
     }
     render() {
-        return (h("div", { key: '98d1e354ab8a2476669e03bd15e3a07a456dbef9', class: `tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`, role: "tree", "aria-label": this.ariaLabel }, this.label && this.label.trim() !== '' && h("div", { key: 'c1f330e9ea475e3ee03952d1e3559667bde2783a', class: "tree-view__label" }, this.label), h("slot", { key: 'b9ca9254545840cce52a544931c2c29316c8d24a', ref: this.handleSlotRef })));
+        return (h("div", { key: '91cbeb69981f41ca69eafddb29b051dc3ac261b7', class: `tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`, role: "tree", "aria-label": this.ariaLabel }, this.label && this.label.trim() !== '' && h("div", { key: 'e3e2357f117573fc80808e05c1267591bc83ba77', class: "tree-view__label" }, this.label), h("slot", { key: '9183d311c318b6caab5a4e873bc3946974aad3cf', ref: this.handleSlotRef })));
     }
     static get is() { return "ifx-tree-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/stories/setup-and-installation/faq/faq.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Faq {
     render() {
-        return (h("div", { key: '9b53a8cd67dfe1964c129aa5dcfc04eeb79e1b4a', class: 'container' }, h("ifx-accordion", { key: 'd16865126881a6add43eba63e8e0891cc08d59eb' }, h("ifx-accordion-item", { key: '624e38f4c347902bc6ed6c84442681d74a7e546f', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: '3853792bbb95aaf06ff653ddedc26ab35c79cd22', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: 'f0bd501f2528ac4447cba9a7b8a3e336b02dc307', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: '694188063dd6a0efb95e7d96f53c8580346e3ca2', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: '766ebb24eb255dc94626f20e1f4e6fc63819f7da', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+        return (h("div", { key: '8bbe6ef1fae2d54672a52cd7a5ad0c6dab47f038', class: 'container' }, h("ifx-accordion", { key: '89b50aae34bb9881510bedbbc6a018548634519c' }, h("ifx-accordion-item", { key: 'ab3513aa932a92bf00ea98bf1db824df0dc9e462', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: 'd444f0dd43d8b46f9f6c18d39ce6b26c6217e0a6', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: '249c285a46236b9417afdfd47d917756bf7e893b', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: 'f880c93dd48de0344d68e34cca8f173d91efb35f', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: '0a4d9e2f41746429a203ef5b7aa8aeeb81587a6f', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
     }
     static get is() { return "ifx-faq"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/ifx-accordion-item.js

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

package/dist/components/ifx-alert.js

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

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

@@ -186,7 +186,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
         return {};
     }
     render() {
-        return (h(Host, { key: '3e9c2f94902a6396a4e12e29f9f238ffede5fbc5' }, h("div", { key: '1ace317c72c069198ca5ec3abee52de9748d4bf7', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '24d61fbc8f3f7f9f191def163590399d4a42e007', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: '3777e151f6fc16bcb131a6f9bf19b203b74f33dd' }, h("div", { key: '1546cd57c3815e81cfce47d9ea10cd65a8c07117', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '2cc987fe15736e1df750b5e4587c4aca767009e7', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     get host() { return this; }
     static get style() { return IfxBasicTableStyle0; }

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

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

package/dist/components/ifx-checkbox-group.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
 import { d as detectFramework, t as trackComponent } from './p-08c92877.js';
 import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
-import { d as defineCustomElement$2 } from './p-6ca4e3f8.js';
+import { d as defineCustomElement$2 } from './p-3bb71199.js';
 
-const checkboxGroupCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.checkbox-group-container{display:flex;flex-direction:column}.checkbox-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.checkbox-group.horizontal{flex-direction:row;column-gap:12px}.checkbox-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;line-height:1.5rem;font-weight:400;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;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}";
+const checkboxGroupCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.checkbox-group-container{display:flex;flex-direction:column}.checkbox-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.checkbox-group.horizontal{flex-direction:row;column-gap:12px}.checkbox-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;line-height:1.5rem;font-weight:400;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;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}";
 const IfxCheckboxGroupStyle0 = checkboxGroupCss;
 
 const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup extends H {
@@ -14,6 +14,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
         this.errorStates = new Map();
         this.alignment = 'vertical';
         this.groupLabelText = 'Group Label Text';
+        this.required = false;
         this.hasErrors = false;
         this.handleSlotChange = () => {
             this.initializeState();
@@ -56,7 +57,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (h("div", { key: 'b3f10b860ca3a976439a7be6d24a92a4214aabbc', class: 'checkbox-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: '4d77558d3af07c48db430b3df5fa2aeeb288ee51', class: `checkbox-group ${this.alignment} ${this.size}` }, h("slot", { key: '634221dfaef08e771d56ad17e3618e6dc2e3c59e', 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: '4eb2724eba71bbddd4fb049f2cc5504f3fba4e9e', class: 'checkbox-group-container' }, this.showGroupLabel && (h("div", { key: '33284b31172ca7a6a678bea6fb1e04acdefa106e', class: "group-label" }, this.groupLabelText, this.required && h("span", { key: '2ea568944a84df07476c68577b1444c7b305d94a', class: `required ${this.hasErrors ? 'error' : ''}` }, "*"))), h("div", { key: '7cb95f33d540148358f2bafe04ed2ac6dab199ae', class: `checkbox-group ${this.alignment} ${this.size}` }, h("slot", { key: 'a2750a87a0c8b8b3ad569cc2eb5dcef1667e86b1', 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 formAssociated() { return true; }
     get el() { return this; }
@@ -69,6 +70,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
         "showCaption": [4, "show-caption"],
         "captionText": [1, "caption-text"],
         "showCaptionIcon": [4, "show-caption-icon"],
+        "required": [4],
         "hasErrors": [32],
         "setGroupError": [64]
     }, [[0, "ifxError", "handleCheckboxError"]]]);

package/dist/components/ifx-checkbox-group.js.map

@@ -1 +1 @@
-{"file":"ifx-checkbox-group.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,i3BAAi3B,CAAC;AAC34B,+BAAe,gBAAgB;;MCWlB,aAAa;IAP1B;;;;QAQU,gBAAW,GAA8B,IAAI,GAAG,EAAE,CAAC;QAGnD,cAAS,GAA8B,UAAU,CAAC;QAGlD,mBAAc,GAAW,kBAAkB,CAAC;QAI3C,cAAS,GAAY,KAAK,CAAC;QAgCpC,qBAAgB,GAAG;YACjB,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB,CAAC;KAiCH;IAhEC,mBAAmB,CAAC,KAAkB;QACpC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC7C,IAAI,QAAQ,CAAC,OAAO,KAAK,cAAc,EAAE;YACvC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAC7C,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;KACF;;IAID,MAAM,aAAa,CAAC,KAAc;QAChC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;QACxE,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ;YACzB,QAAgB,CAAC,KAAK,GAAG,KAAK,CAAC;SACjC,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KAExB;IAED,MAAM,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,oBAAoB,EAAE,MAAM,SAAS,CAAC,CAAA;SACtD;KACF;IAMO,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;QACxE,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ;YAC1B,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;gBACnC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAG,QAAgB,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;aAClE;SACF,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAEO,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;KAC/E;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,cAAc,GAAG,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,cAAc,OAAS,GAAG,EAAE,EAClF,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE,IACzD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,EACL,IAAI,CAAC,WAAW,IACf,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAE,IAC1D,IAAI,CAAC,eAAe,GAAG,WAAK,KAAK,EAAC,cAAc,IAAC,gBAAU,IAAI,EAAC,WAAW,GACjE,CAAM,GAAG,EAAE,EACtB,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAO,CAC9C,IAAI,EAAE,CACV,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.checkbox-group {\n    display: flex;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\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-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    font-weight: tokens.$ifxFontWeightRegular;\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    align-items: center;\n\n    &.default {\n        color: tokens.$ifxColorBaseBlack;\n    }\n\n    &.error {\n        color: tokens.$ifxColorRed500;\n    }\n}\n\n.caption-text {\n    font-style: normal;\n    font-weight: tokens.$ifxFontWeightRegular;\n    font-size: tokens.$ifxFontSizeXs;\n    line-height: tokens.$ifxLineHeightXs;\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    flex:0;\n    display: flex;\n}","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-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class CheckboxGroup {\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  handleCheckboxError(event: CustomEvent) {\n    const checkbox = event.target as HTMLElement;\n    if (checkbox.tagName === 'ifx-checkbox') {\n      this.errorStates.set(checkbox, event.detail);\n      this.updateHasErrors();\n    }\n  }\n\n  // Method to set the error state of all checkboxes in the group\n  @Method()\n  async setGroupError(error: boolean) {\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      (checkbox as any).error = error;\n    });\n  }\n\n  componentWillLoad() {\n    this.initializeState();\n\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-checkbox-group', await framework)\n    }\n  }\n\n  handleSlotChange = () => {\n    this.initializeState();\n  };\n\n  private initializeState() {\n    this.errorStates.clear();\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      if (!this.errorStates.has(checkbox)) {\n        this.errorStates.set(checkbox, (checkbox 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='checkbox-group-container'>\n        {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n        <div class={`checkbox-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":"ifx-checkbox-group.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,87BAA87B,CAAC;AACx9B,+BAAe,gBAAgB;;MCWlB,aAAa;IAP1B;;;;QAQU,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;QAgCpC,qBAAgB,GAAG;YACjB,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB,CAAC;KAsCH;IArEC,mBAAmB,CAAC,KAAkB;QACpC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC7C,IAAI,QAAQ,CAAC,OAAO,KAAK,cAAc,EAAE;YACvC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAC7C,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;KACF;;IAID,MAAM,aAAa,CAAC,KAAc;QAChC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;QACxE,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ;YACzB,QAAgB,CAAC,KAAK,GAAG,KAAK,CAAC;SACjC,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KAExB;IAED,MAAM,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,oBAAoB,EAAE,MAAM,SAAS,CAAC,CAAA;SACtD;KACF;IAMO,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;QACxE,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ;YAC1B,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;gBACnC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAG,QAAgB,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;aAClE;SACF,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAEO,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;KAC/E;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,cAAc,KAClB,4DAAK,KAAK,EAAC,aAAa,IACrB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAE,YAAY,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,EAAE,EAAE,QAAU,CAChF,CACP,EACD,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE,IACzD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,EACL,IAAI,CAAC,WAAW,IACf,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAE,IAC1D,IAAI,CAAC,eAAe,GAAG,WAAK,KAAK,EAAC,cAAc,IAAC,gBAAU,IAAI,EAAC,WAAW,GACjE,CAAM,GAAG,EAAE,EACtB,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAO,CAC9C,IAAI,EAAE,CACV,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.checkbox-group {\n    display: flex;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\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-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    font-weight: tokens.$ifxFontWeightRegular;\n    margin-bottom: tokens.$ifxSpace100;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.group-label .required {\n    margin: 4px;\n}\n\n.group-label .required.error {\n    color: tokens.$ifxColorRed500;\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    align-items: center;\n\n    &.default {\n        color: tokens.$ifxColorBaseBlack;\n    }\n\n    &.error {\n        color: tokens.$ifxColorRed500;\n    }\n}\n\n.caption-text {\n    font-style: normal;\n    font-weight: tokens.$ifxFontWeightRegular;\n    font-size: tokens.$ifxFontSizeXs;\n    line-height: tokens.$ifxLineHeightXs;\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    flex:0;\n    display: flex;\n}","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-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class CheckboxGroup {\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  handleCheckboxError(event: CustomEvent) {\n    const checkbox = event.target as HTMLElement;\n    if (checkbox.tagName === 'ifx-checkbox') {\n      this.errorStates.set(checkbox, event.detail);\n      this.updateHasErrors();\n    }\n  }\n\n  // Method to set the error state of all checkboxes in the group\n  @Method()\n  async setGroupError(error: boolean) {\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      (checkbox as any).error = error;\n    });\n  }\n\n  componentWillLoad() {\n    this.initializeState();\n\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-checkbox-group', await framework)\n    }\n  }\n\n  handleSlotChange = () => {\n    this.initializeState();\n  };\n\n  private initializeState() {\n    this.errorStates.clear();\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      if (!this.errorStates.has(checkbox)) {\n        this.errorStates.set(checkbox, (checkbox 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='checkbox-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={`checkbox-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/components/ifx-checkbox.js

@@ -1,4 +1,4 @@
-import { C as Checkbox, d as defineCustomElement$1 } from './p-5043151d.js';
+import { C as Checkbox, d as defineCustomElement$1 } from './p-fcb560fd.js';
 
 const IfxCheckbox = Checkbox;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-chip-item.js

@@ -1,4 +1,4 @@
-import { C as ChipItem, d as defineCustomElement$1 } from './p-6d9db6c2.js';
+import { C as ChipItem, d as defineCustomElement$1 } from './p-be4098bf.js';
 
 const IfxChipItem = ChipItem;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-chip.js

@@ -1,4 +1,4 @@
-import { C as Chip, d as defineCustomElement$1 } from './p-f5c2df5f.js';
+import { C as Chip, d as defineCustomElement$1 } from './p-ade41031.js';
 
 const IfxChip = Chip;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-content-switcher-item.js

@@ -11,7 +11,7 @@ const ContentSwitcherItem = /*@__PURE__*/ proxyCustomElement(class ContentSwitch
         this.selected = false;
     }
     render() {
-        return (h(Host, { key: 'cfee4bfa2e7b8f5ba6c88a99baf11e69f3fecc5f' }, h("button", { key: '13aa464e8f9f8b2b5cfefd3f20b5dcfdb5d04147', class: 'ifx-content-switcher-item' + (this.selected ? ' selected' : '') }, h("slot", { key: '605f9840e2888ba0249e294292a98216297bad0a' }))));
+        return (h(Host, { key: '1486856896c38eba0a316a64de8268fb4d365598' }, h("button", { key: 'd447bdc292610d7650687489333da70433998941', class: 'ifx-content-switcher-item' + (this.selected ? ' selected' : '') }, h("slot", { key: '83cd4b3886f8f712868ebb2c4df2a6e978f25438' }))));
     }
     static get style() { return IfxContentSwitcherItemStyle0; }
 }, [1, "ifx-content-switcher-item", {

package/dist/components/ifx-content-switcher.js

@@ -166,7 +166,7 @@ const ContentSwitcher = /*@__PURE__*/ proxyCustomElement(class ContentSwitcher e
         return this.items[index].getAttribute('value') || index.toLocaleString();
     }
     render() {
-        return (h(Host, { key: 'dc8ed1e40d00b2fb5b8274f3a1be386be2b7e6ff' }, h("div", { key: '12f9002e81a381891cc9c3e89b081966edc3daff', class: "ifx-content-switcher", role: "group" }, h("slot", { key: 'b2b0b7f694d08c9b04b9c0b763d32a29778871bd' }))));
+        return (h(Host, { key: 'b734443379eecdbdd17d69614ed9741bc1869757' }, h("div", { key: '72f0a22311ab1b7ad58ebedfd958dfd17de6c0eb', class: "ifx-content-switcher", role: "group" }, h("slot", { key: 'db024fa3e8cb6c9bd0253325c033d37c64cc29ca' }))));
     }
     get el() { return this; }
     static get style() { return IfxContentSwitcherStyle0; }

package/dist/components/ifx-date-picker.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
 import { d as detectFramework, t as trackComponent } from './p-08c92877.js';
 import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
-import { d as defineCustomElement$2 } from './p-6ca4e3f8.js';
+import { d as defineCustomElement$2 } from './p-3bb71199.js';
 
 const datePickerCss = ".date__picker-container{display:flex;flex-direction:column}.date__picker-container .label__wrapper{color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\"}.date__picker-container .label__wrapper .asterisk{display:none}.date__picker-container .label__wrapper .asterisk.required{display:inline;margin-left:4px}.date__picker-container .label__wrapper .asterisk.required.error{color:#CD002F}.date__picker-container.disabled .label__wrapper{color:#575352}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#575352}.date__picker-container .caption__wrapper{margin-top:4px;color:#1D1D1D;font:400 0.75rem/1rem \"Source Sans 3\"}.date__picker-input{font-family:\"Source Sans 3\";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786;height:100%}.date__picker-input.firefox__classes{padding:8px 16px;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.date__picker-input:focus:not(.error,.success){border-color:#0A8276}.date__picker-input:hover:not(:disabled,:focus,.error,.success){border-color:#575352}.date__picker-input:disabled{border-color:#575352;background-color:#EEEDED}.date__picker-input.error{border-color:#CD002F}.date__picker-input.success:not(.error){border-color:#4CA460}.date__picker-input::-webkit-datetime-edit-text{color:#8D8786;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.date__picker-input.has-value::-webkit-datetime-edit-text{color:#1D1D1D}.date__picker-input.has-value::-webkit-datetime-edit{color:#1D1D1D}::-webkit-datetime-edit{color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px}::-webkit-datetime-edit-fields-wrapper{padding:8px 16px;padding-bottom:9px;transform:translateY(1px)}::-webkit-inner-spin-button{display:none}::-webkit-calendar-picker-indicator{position:absolute;right:15px;font-size:19px;cursor:pointer;border-radius:1px}::-webkit-calendar-picker-indicator:focus-within{outline:2px solid #0A8276;outline-offset:2px}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{height:40px}.input__wrapper.small{height:36px}.input__wrapper.disabled .icon__wrapper{background-color:#EEEDED}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle}";
 const IfxDatePickerStyle0 = datePickerCss;
@@ -102,8 +102,8 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: 'f875ef689c357c95a73bb541f3ac6457d6fe564c', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '0d98faaa4319093e982a5d7eba2a4500bf8ceead', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.trim(), h("span", { key: '5b2e4e755d291daaae7c91a445f709346a6765d0', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: '6de0a53bc4d96f646845b1ee45143ec0c1d8e767', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '5fdeb8217f0949e897639079dde94c898f859ed5', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: '6461b8951ec7cfb4ef206f85d499fa787c792bc2', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: '1ad41185d7c05db70102d5c5404ef19f1758e5cd', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'b81efc9cd12231b7e3c1e942d2795a23fe5230e0', class: 'caption__wrapper' }, this.caption.trim()))));
+        return (h("div", { key: 'f62bd45256f9b6efcc76a1c3c42459e07c4747d4', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '56107a528c3355d74abfe61f3d175495b266894d', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.trim(), h("span", { key: '9af300f3c827125e9c7a77bbda4b57b59a89b3b9', class: `asterisk ${this.required ? 'required' : ""} ${this.error ? 'error' : ""}` }, "*")), h("div", { key: 'cf9c9e6f22bdc104cecee5eb3544cc84ff9d5873', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '108c416c295f273aeedf16b875fcfe07ce4f2341', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: 'c2da3d175a8c110b9eecdd9201abda4d81c2b024', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: '78da95df0ae3403c6e0711a96341bc3e0431190b', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '58e98ca1b532a8822dba9973d14935a9c370e819', class: 'caption__wrapper' }, this.caption.trim()))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/dist/components/ifx-download.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$2 } from './p-2d712043.js';
+import { d as defineCustomElement$2 } from './p-c8579213.js';
 
 const downloadCss = "";
 const IfxDownloadStyle0 = downloadCss;
@@ -19,7 +19,7 @@ const Download = /*@__PURE__*/ proxyCustomElement(class Download extends H {
         const fileName = `infineon-tokens.${this.tokens}`;
         const sourceFile = fileMap[this.tokens];
         const fileUrl = `https://raw.githubusercontent.com/Infineon/public-assets/main/ifx-tokens/${sourceFile}`;
-        return (h("ifx-link", { key: '8a05f429c2d8c9bfcb132df3fda0aa47d7109b67', onClick: (e) => {
+        return (h("ifx-link", { key: 'ed8be7f7d312a51e1785cfbcf65304198769d689', onClick: (e) => {
                 e.preventDefault();
                 fetch(fileUrl)
                     .then(res => res.blob())
@@ -29,7 +29,7 @@ const Download = /*@__PURE__*/ proxyCustomElement(class Download extends H {
                     link.download = fileName;
                     link.click();
                 });
-            }, href: fileUrl, download: fileName, class: "download__wrapper", size: "m", variant: "bold" }, h("slot", { key: '72d494771e43406d7f85122f22300f3524fd94b1' })));
+            }, href: fileUrl, download: fileName, class: "download__wrapper", size: "m", variant: "bold" }, h("slot", { key: '13ccc90254cd85a1af0b0c9b65adcab433f623eb' })));
     }
     static get style() { return IfxDownloadStyle0; }
 }, [1, "ifx-download", {

package/dist/components/ifx-dropdown-header.js

@@ -10,7 +10,7 @@ const DropdownHeader = /*@__PURE__*/ proxyCustomElement(class DropdownHeader ext
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'd93c45a63fba5ca781065e118af56370ddb340eb', class: 'dropdown-header' }, h("span", { key: 'dbcc17303d9d0cef7daf2150ac77833498f76ae7' }, h("slot", { key: 'f157de72d9b164e2492fae87d457da8227eb77ce' }))));
+        return (h("div", { key: 'e643d18af694585bee71083d703a1ddad43e7459', class: 'dropdown-header' }, h("span", { key: '4763a9ced0d27ddacdd752b64a2aae51b5c5974d' }, h("slot", { key: '3761714156a6bc990ae0d63678f6b4f5e4fb9067' }))));
     }
     static get style() { return IfxDropdownHeaderStyle0; }
 }, [1, "ifx-dropdown-header"]);

package/dist/components/ifx-dropdown-item.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-f8e6a4ef.js';
-import { d as defineCustomElement$2 } from './p-6ca4e3f8.js';
+import { d as defineCustomElement$2 } from './p-3bb71199.js';
 
 const dropdownItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.dropdown-item{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.dropdown-item:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.dropdown-item.hide{display:none}.dropdown-item span{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px;}.dropdown-item.small span{font-size:14px}.dropdown-item:hover{cursor:pointer;background-color:#EEEDED}.dropdown-item:active{background-color:#BFBBBB}.icon{margin-right:4px}";
 const IfxDropdownItemStyle0 = dropdownItemCss;
@@ -30,7 +30,7 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
         };
         if (!hasHref)
             common.tabIndex = 0;
-        return (h("a", Object.assign({ key: '8c3181f70b9263475ece29eb06e6363d8d022d1d' }, common, (hasHref ? { href: this.href, target: this.target } : {})), this.icon && h("ifx-icon", { key: '39d3b51a44e783e2ddd9cc2ecd105cd527449de9', class: "icon", icon: this.icon }), h("span", { key: 'bc073b63fc18557f41143a4e201d93fd3d024a0e' }, h("slot", { key: 'bc4e3e17a343248dc565a884af34345e191fafa9' }))));
+        return (h("a", Object.assign({ key: 'a5b2f1f960fd9bc949bd49ea5cb62f34c8c348c1' }, common, (hasHref ? { href: this.href, target: this.target } : {})), this.icon && h("ifx-icon", { key: '7d82f94d1f94fbc6cfad4beb2ea9b11d523ea42c', class: "icon", icon: this.icon }), h("span", { key: '59829d08f59d8dc0ba97d47b1850b47062676886' }, h("slot", { key: '5b80d13238dee683f2ba20710fc8d4c631e4288a' }))));
     }
     get el() { return this; }
     static get style() { return IfxDropdownItemStyle0; }

package/dist/components/ifx-dropdown-menu.js

@@ -51,10 +51,10 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends
             this.hideTopPadding = false;
     }
     render() {
-        return (h("div", { key: 'b9d6e51e53529ca6a57c45f0b9aa432afa8dd8c6', class: `dropdown-menu 
+        return (h("div", { key: '9c4512f9da5fcf061f870a1a1b820a45910a9643', class: `dropdown-menu 
       ${this.isOpen ? 'show' : ''} 
       ${this.hideTopPadding ? 'hideTopPadding' : ""}
-      ${this.size === 's' ? 'small' : ""}` }, h("slot", { key: '9d49836883d453647c6c3e146f177cdf00337ffc' })));
+      ${this.size === 's' ? 'small' : ""}` }, h("slot", { key: 'd6218583b8fc6dcb776d0f13e9c466f216508290' })));
     }
     get el() { return this; }
     static get style() { return IfxDropdownMenuStyle0; }

package/dist/components/ifx-dropdown-separator.js

@@ -10,7 +10,7 @@ const DropdownSeparator = /*@__PURE__*/ proxyCustomElement(class DropdownSeparat
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'f842407a72dcfa69c2e05b821bab2f9ec3e2702f', class: 'dropdown-separator' }));
+        return (h("div", { key: '93fd4c35d80b35d7f9fefad870471e46ed3c8896', class: 'dropdown-separator' }));
     }
     static get style() { return IfxDropdownSeparatorStyle0; }
 }, [1, "ifx-dropdown-separator"]);

package/dist/components/ifx-dropdown-trigger-button.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './p-f8e6a4ef.js';
 import { d as defineCustomElement$3 } from './p-6462dfec.js';
-import { d as defineCustomElement$2 } from './p-6ca4e3f8.js';
+import { d as defineCustomElement$2 } from './p-3bb71199.js';
 
 const dropdownTriggerButtonCss = ":host{display:inline-block}.rotate{transition:transform 0.2s ease-in-out;transform:rotate(-180deg);margin-top:0em}.icon{margin-top:0em;transition:transform 0.2s ease-in-out}";
 const IfxDropdownTriggerButtonStyle0 = dropdownTriggerButtonCss;
@@ -16,8 +16,8 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
         this.hideArrow = false;
     }
     render() {
-        return (h("ifx-button", { key: 'a039a16f7329ab9af57d92555f54d27153936aa9', variant: this.variant, theme: this.theme, size: this.size, disabled: this.disabled, class: "dropdown-trigger-button" }, h("slot", { key: '06b448d35be0c0afbedde160f92824d9df4977ea' }), !this.hideArrow &&
-            h("ifx-icon", { key: '9b10c74e101533527e30e520a48db498bebe0715', icon: "chevron-down-16", class: `icon${this.isOpen ? ' rotate' : ''}` })));
+        return (h("ifx-button", { key: 'e250c5081eed9c37309ff16a951c6abcd6208c5e', variant: this.variant, theme: this.theme, size: this.size, disabled: this.disabled, class: "dropdown-trigger-button" }, h("slot", { key: 'bd43566e1287502e361af68c8a72ca70f763a524' }), !this.hideArrow &&
+            h("ifx-icon", { key: '6227f3dd9f237eb1f8839d6c718a8a60e6085264', icon: "chevron-down-16", class: `icon${this.isOpen ? ' rotate' : ''}` })));
     }
     static get style() { return IfxDropdownTriggerButtonStyle0; }
 }, [1, "ifx-dropdown-trigger-button", {

package/dist/components/ifx-dropdown-trigger.js

@@ -11,7 +11,7 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
         this.isOpen = false;
     }
     render() {
-        return (h("slot", { key: 'ef3ea59efc3e4cd4779f4e8dc50fae826c760015' }));
+        return (h("slot", { key: '12d613ebdc15ce536e628c0c8e56330380e986b5' }));
     }
     static get style() { return IfxDropdownTriggerStyle0; }
 }, [1, "ifx-dropdown-trigger", {

package/dist/components/ifx-dropdown.js

@@ -212,7 +212,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
         }
     }
     render() {
-        return (h("div", { key: 'd86aec49c4c83d1c374ea23ec11fc9587eb04e07', "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", { key: '1e4f399b01e7992c9c9ce198150416f9ac35c727' })));
+        return (h("div", { key: '81a61850906f9ae3b89d44fceb3a9c1a693e3954', "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", { key: '427d5eeda7a0c1c94523a867c4b73f99c14cc57c' })));
     }
     get el() { return this; }
     static get watchers() { return {