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

package/dist/collection/components/table-advanced-version/filter-type-group/filter-search/filter-search.js

@@ -23,7 +23,7 @@ export class FilterSearch {
         this.ifxFilterSearchChange.emit({ filterName: this.filterName, filterValue: this.filterValue, filterKey: this.filterKey }); // Emitting filterKey along with other properties
     }
     render() {
-        return (h("div", { key: '3d174d8364d4be950f3771a7c02d945100bb043d', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: '4d5136d61c0120163b8723f67902eb330418691e', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: '037963238cb3dfda78cfdd093313f1da923e2393', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
+        return (h("div", { key: 'ae1f3b331785c271677926b01106e79f765323d2', class: `${this.filterOrientation === 'sidebar' ? 'sidebar-filter-search-wrapper' : 'topbar-filter-search-wrapper'}` }, h("div", { key: 'ab71ab878a4f4ddc57d698665a907f3f37b238b7', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: 'c5092c6ed7c78461a53de57a1306d6f682f01b06', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
     }
     static get is() { return "ifx-filter-search"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-advanced-version/filter-type-group/filter-type-group.js

@@ -119,7 +119,7 @@ export class IfxFilterTypeGroup {
         window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);
     }
     render() {
-        return (h(Host, { key: '0cf9c28827112c3f3ff95d94f75d031025e7d534' }, h("div", { key: '231ec7ee7deb2c47de83dbd7d7fa256b5bac4271', class: "filter-type-group" }, h("slot", { key: 'f3691caebbdfa4441cc258e90ba29221424be81b', name: "filter-search" }), h("slot", { key: '8ba5f8680747590bbcbbebdb100921faadf6fac3', name: "filter-accordion" }))));
+        return (h(Host, { key: '9fc80c9169233e2d88dcf74c14930e0b0e9e3ad8' }, h("div", { key: 'e6bf9b3634a1cbfddb74b121edda60ec00e910c4', class: "filter-type-group" }, h("slot", { key: 'e9ab06f28ac47f8a62fe25b397b61c4d3bb95a1f', name: "filter-search" }), h("slot", { key: '073c91ca328461b3133bbba90530ca32e3eae42b', name: "filter-accordion" }))));
     }
     static get is() { return "ifx-filter-type-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class ListEntry {
         this.ifxListEntryChange.emit({ label: this.label, value: this.value, type: this.type });
     }
     render() {
-        return (h("div", { key: '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.css

@@ -45,7 +45,6 @@
   font-weight: 400;
   font-size: 1rem;
   line-height: 1.5rem;
-  font-family: "Source Sans 3";
   display: flex;
   align-items: center;
   color: #1D1D1D;
@@ -162,7 +161,6 @@
   font-size: 0.75rem;
   line-height: 1rem;
   color: #1D1D1D;
-  font-family: "Source Sans 3";
   flex: none;
   order: 1;
   align-self: stretch;

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;font-family:\"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;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;font-family:\"Source Sans 3\";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,66BAA66B,CAAC;AACv8B,+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    font-family: tokens.$ifxFontFamilyBody;\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    font-family: tokens.$ifxFontFamilyBody;\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"]);