@infineon/infineon-design-system-stencil 41.10.0 → 41.11.0

package/dist/cem.json

@@ -7057,6 +7057,84 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/select/multi-select/multiselect-group.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "ifx-multiselect-group",
+          "name": "IfxMultiselectGroup",
+          "description": "Visually and semantically groups multiselect options under a heading.\nUnlike a multiselect option with children, a group is not selectable or expandable.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "Whether the group is disabled.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "label",
+              "description": "Label displayed above the group's options.",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "label"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "disabled",
+              "description": "Whether the group is disabled.",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "readonly": true,
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "description": "Label displayed above the group's options.",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true,
+              "attribute": "label"
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "IfxMultiselectGroup",
+          "declaration": {
+            "name": "IfxMultiselectGroup"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ifx-multiselect-group",
+          "declaration": {
+            "name": "IfxMultiselectGroup"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/select/multi-select/multiselect-option.tsx",

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

@@ -208,7 +208,7 @@ const Template = class {
         }
     }
     render() {
-        return (index.h("div", { key: '8c9b3936ddec52fde543bc5ad1f80210abb61adc' }, this.isTemplatePage ? (index.h("div", { class: "template__page-wrapper" }, !this.repoUrl && !this.repoError && (index.h("div", null, index.h("h3", null, "Your repository is getting ready.."), index.h("p", null, "This will only take a minute."))), this.isLoading && !this.repoError && (index.h("div", null, index.h("ifx-spinner", { variant: "default", size: "s" }))), this.repoUrl && (index.h("ifx-link", { href: this.repoUrl, target: "_parent", size: "m", variant: "underlined" }, "Your repository")), this.repoError && index.h("div", null, this.repoError))) : (index.h("div", { class: "react__template-container" }, index.h("div", { class: "react__template-wrapper", onClick: (e) => this.handleCurrentTemplate(e) }, index.h("div", { class: "image__wrapper" }, index.h("img", { src: this.thumbnail }))), this.showDetails && (index.h("div", { class: "details__wrapper" }, index.h("div", { class: "selection__buttons-wrapper" }, index.h("div", { class: "selection__input" }, index.h("input", { type: "radio", id: "react", name: "chosen_framework", value: "react", onInput: (e) => this.handleUserInput(e, "framework") }), index.h("label", { htmlFor: "react" }, "React")), index.h("div", { class: "selection__input vue" }, index.h("input", { class: "vue__input", disabled: true, type: "radio", id: "vue", name: "chosen_framework", value: "vue", onInput: (e) => this.handleUserInput(e, "framework") }), index.h("label", { class: "vue__label", htmlFor: "vue" }, "Vue"), " ", "(Soon)")), index.h("div", { class: "input__fields-wrapper" }, index.h("ifx-text-field", { required: true, onInput: (e) => this.handleUserInput(e, "name"), size: "m", icon: "c-info-16", placeholder: "Your repository name" }, "Repository Name"), index.h("ifx-text-field", { required: true, size: "m", icon: "c-info-16", onInput: (e) => this.handleUserInput(e, "desc"), placeholder: "Your repository description" }, "Repository Description"), index.h("ifx-button", { fullWidth: true, onClick: () => this.submitUserData(), variant: "primary" }, "Generate template"))))))));
+        return (index.h("div", { key: 'bbdf6c77f4d9f26651eb3016337f761ef85362fb' }, this.isTemplatePage ? (index.h("div", { class: "template__page-wrapper" }, !this.repoUrl && !this.repoError && (index.h("div", null, index.h("h3", null, "Your repository is getting ready.."), index.h("p", null, "This will only take a minute."))), this.isLoading && !this.repoError && (index.h("div", null, index.h("ifx-spinner", { variant: "default", size: "s" }))), this.repoUrl && (index.h("ifx-link", { href: this.repoUrl, target: "_parent", size: "m", variant: "underlined" }, "Your repository")), this.repoError && index.h("div", null, this.repoError))) : (index.h("div", { class: "react__template-container" }, index.h("div", { class: "react__template-wrapper", onClick: (e) => this.handleCurrentTemplate(e) }, index.h("div", { class: "image__wrapper" }, index.h("img", { src: this.thumbnail }))), this.showDetails && (index.h("div", { class: "details__wrapper" }, index.h("div", { class: "selection__buttons-wrapper" }, index.h("div", { class: "selection__input" }, index.h("input", { type: "radio", id: "react", name: "chosen_framework", value: "react", onInput: (e) => this.handleUserInput(e, "framework") }), index.h("label", { htmlFor: "react" }, "React")), index.h("div", { class: "selection__input vue" }, index.h("input", { class: "vue__input", disabled: true, type: "radio", id: "vue", name: "chosen_framework", value: "vue", onInput: (e) => this.handleUserInput(e, "framework") }), index.h("label", { class: "vue__label", htmlFor: "vue" }, "Vue"), " ", "(Soon)")), index.h("div", { class: "input__fields-wrapper" }, index.h("ifx-text-field", { required: true, onInput: (e) => this.handleUserInput(e, "name"), size: "m", icon: "c-info-16", placeholder: "Your repository name" }, "Repository Name"), index.h("ifx-text-field", { required: true, size: "m", icon: "c-info-16", onInput: (e) => this.handleUserInput(e, "desc"), placeholder: "Your repository description" }, "Repository Description"), index.h("ifx-button", { fullWidth: true, onClick: () => this.submitUserData(), variant: "primary" }, "Generate template"))))))));
     }
 };
 Template.style = templateCss();

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

@@ -210,7 +210,7 @@ const Table = class {
         return {};
     }
     render() {
-        return (index.h(index.Host, { key: 'ad1f0ebbdc51970d68c09d50d317663e54bfb1ee' }, index.h("div", { key: '64c4189a10fc44a3db683d567a871062fdc25205', id: "table-wrapper", class: this.getClassNames() }, index.h("div", { key: '9adac2575b9f7fac34aba0e0470ae200c6cabc40', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === "zebra" ? "zebra" : ""} ${this.columnValuePosition === "center" ? "center" : "left"}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (index.h(index.Host, { key: 'f82dea92690d177da055ddcb41691d6f0e7441a0' }, index.h("div", { key: '01533aeeeca57df57193b522ed34efe3c3c9f70c', id: "table-wrapper", class: this.getClassNames() }, index.h("div", { key: '2dd588dd5b95fecee990c5c88b4c793dc32d258a', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === "zebra" ? "zebra" : ""} ${this.columnValuePosition === "center" ? "center" : "left"}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
 };
 Table.style = tableCss();

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

@@ -59,7 +59,7 @@ const FilterAccordion = class {
         this.expanded = !this.expanded;
     };
     render() {
-        return (index.h("div", { key: '2f11e8defcdf10065edc51d6e3b835ac10a1c866', class: `accordion ${this.expanded ? "expanded" : ""}` }, index.h("div", { key: '105cccbe0c693e10b575a4cce6b5be2f1e69d23a', class: `header ${this.expanded ? "expanded" : ""}`, onClick: this.toggleAccordion }, index.h("div", { key: 'db33c79342a1026f9ef17b35996e5ba46b13c52e', class: `text-and-icon ${this.expanded ? "expanded" : ""}` }, index.h("div", { key: '2bcbb8d89bcff781539e276052d2a75f005dd94f', class: "text" }, index.h("span", { key: '56d876571da342050eefe41f89cd777414eac773' }, this.filterGroupName), index.h("ifx-indicator", { key: '21c1f74082de3a66d4a298d28c0b03710bd6312b', variant: "number", number: this.count })), index.h("ifx-icon", { key: '7dc50ea7c1cdd5ede9e05cbe4b4e7ac7b6a9539c', class: this.expanded ? "" : "hidden", icon: "minus-16", onClick: this.toggleAccordion }), index.h("ifx-icon", { key: 'be46fa4b896dce822f6b1204cb475fdd7cd624a6', class: this.expanded ? "hidden" : "", icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded && (index.h("div", { key: 'a518fbef3add2329984cbae12a12e74d6eddbf67', class: "filter-accordion-container" }, index.h("slot", { key: 'd949f60fff283ecc0f8b86608bf0d50d89c2c02c', name: "list" })))));
+        return (index.h("div", { key: '16c2b36c5afcae7576d83e37d1ae89b54dd08558', class: `accordion ${this.expanded ? "expanded" : ""}` }, index.h("div", { key: 'f1ffd403cdc35c563a4b2c8c6419ed4c3d206dae', class: `header ${this.expanded ? "expanded" : ""}`, onClick: this.toggleAccordion }, index.h("div", { key: '762557b757d22758790db924715d880631009915', class: `text-and-icon ${this.expanded ? "expanded" : ""}` }, index.h("div", { key: '4156441a8e1de2041b1e53f5b75b31d2f4026b26', class: "text" }, index.h("span", { key: '59f19fac72ccfa6506b9308386e12a5789d2a8e9' }, this.filterGroupName), index.h("ifx-indicator", { key: 'd4a2e2fa72f4f9b03f091eca1831681b8c2d0056', variant: "number", number: this.count })), index.h("ifx-icon", { key: '1e130e0f5e10df759e3203bc6b52a80407b8ea41', class: this.expanded ? "" : "hidden", icon: "minus-16", onClick: this.toggleAccordion }), index.h("ifx-icon", { key: '548beeb37a1ff352c417311a9f0ebda0500adcd2', class: this.expanded ? "hidden" : "", icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded && (index.h("div", { key: 'dc187cb6f90f862345de8d7fc9977ca3b63d4e68', class: "filter-accordion-container" }, index.h("slot", { key: '47088c1788c976524fd7b0d5f0ae1c059b799861', name: "list" })))));
     }
 };
 FilterAccordion.style = filterAccordionCss();

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

@@ -111,7 +111,7 @@ const FilterBar = class {
         // Calculate slotsToShow safely
         const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);
         const slots = Array.from({ length: slotsToShow }, (_, i) => (index.h("div", { class: "filter-slot-wrapper" }, index.h("slot", { name: `filter-component-${i + 1}` }))));
-        return (index.h(index.Host, { key: '4be7f7c37cdce6f7c149cdc09daa7b47abe4b92c' }, index.h("div", { key: 'e42d4ad693107410f761adbd480fffd20037cce0', class: "search-container" }, index.h("slot", { key: 'c98959d1daaae4dc2020acdd450458f3017d670d', name: "filter-search" }), " "), index.h("div", { key: '1663360a7d68ec85e3f3595881646af9b256569a', class: "components-container" }, slots.length > 0 ? slots : index.h("slot", { name: "filter-component" }), this.showMoreFilters && (index.h("div", { key: '235d57f096be56882d3ccf82c2ae9ec19593fb1d', class: "filter-buttons-wrapper", onClick: () => this.handleFilterButtonsClick(!this.showAllFilters) }, index.h("ifx-button", { key: '4acf3e569b81432b447554327bf0cf04419f40b8', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, index.h("ifx-icon", { key: 'b3dbd0f5c369dce361bf37c169436b706cce5f60', icon: "filter-16" }), this.showAllFilters ? "Less filters" : "More filters"))))));
+        return (index.h(index.Host, { key: 'fbdda1a578fe87df4c80b44fd07b62a20da83387' }, index.h("div", { key: '9d489cd102877435c2d03f88204543de53d784dc', class: "search-container" }, index.h("slot", { key: '72473788101d4215c21538783e33e4277b3cd8e9', name: "filter-search" }), " "), index.h("div", { key: '7246f13e02dbc31a62a918693c5d4892fd6e0995', class: "components-container" }, slots.length > 0 ? slots : index.h("slot", { name: "filter-component" }), this.showMoreFilters && (index.h("div", { key: '4195082e13de758ac97a0dae5d296d7c204b0a3c', class: "filter-buttons-wrapper", onClick: () => this.handleFilterButtonsClick(!this.showAllFilters) }, index.h("ifx-button", { key: '93ee70d28b44e37679be84b433dfa0ba77bb845e', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, index.h("ifx-icon", { key: 'af709bfcda7e80e65d6fe57082a2187276d1e10c', icon: "filter-16" }), this.showAllFilters ? "Less filters" : "More filters"))))));
     }
 };
 FilterBar.style = filterBarCss();

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

@@ -47,9 +47,9 @@ const FilterSearch = class {
         }); // Emitting filterKey along with other properties
     }
     render() {
-        return (index.h("div", { key: '72c7e2cbebe8787b304026f91b565a9a55f32dd9', class: `${this.filterOrientation === "sidebar"
+        return (index.h("div", { key: '1721c6c72eb1a2afb0cd081f7bbf5a840b04c422', class: `${this.filterOrientation === "sidebar"
                 ? "sidebar-filter-search-wrapper"
-                : "topbar-filter-search-wrapper"}` }, index.h("div", { key: '0b2b63d909b45eb9eef326112513ca0d0125ee1a', class: "filter-name" }, this.filterName), index.h("ifx-search-field", { key: '5c0ff5c0741676b41af5be30c004255f756a46fe', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
+                : "topbar-filter-search-wrapper"}` }, index.h("div", { key: '2aead7b1c5726ced761bf0e50fcf4ef7f2a3594b', class: "filter-name" }, this.filterName), index.h("ifx-search-field", { key: '4cdc4f07da9c650c70af36ab877a98213376c685', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
     }
     static get watchers() { return {
         "value": [{

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

@@ -155,7 +155,7 @@ const IfxFilterTypeGroup = class {
         this.ifxSidebarFilterChange.emit(this.selectedOptions);
     };
     render() {
-        return (index.h(index.Host, { key: '760f5767e9628096bd0d9ed8b4feef6e6bd5576d' }, index.h("div", { key: '7df8d36da5aa7eb1c779ccea2539405803338d08', class: "filter-type-group" }, index.h("slot", { key: 'a68ec0b91cfd3906349efcaa727ef9b2d7622289', name: "filter-search" }), index.h("slot", { key: 'fb5a77e6640fe596aa9e5825e58af80a072b3619', name: "filter-accordion" }))));
+        return (index.h(index.Host, { key: '0230e86f6892cb8d4632401d1060984731a0c001' }, index.h("div", { key: 'e7f3e67996cb6921932a20e3f798c33f586b78e5', class: "filter-type-group" }, index.h("slot", { key: 'c607c9eb7783e79c834fb7a8ee9ea7b9afea5821', name: "filter-search" }), index.h("slot", { key: '899d03aa346ddece0fdb33b5c1ca5663807c1a37', name: "filter-accordion" }))));
     }
     static get watchers() { return {
         "showSidebarFiltersButton": [{

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

@@ -31,7 +31,7 @@ const ListEntry = class {
         });
     }
     render() {
-        return (index.h("div", { key: '7b946aa915d7041e3c012f35a494c7268cc1dd4c', class: "wrapper" }, this.type === "checkbox" ? (index.h("div", { class: "list-entry" }, index.h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (index.h("div", { class: "list-entry" }, index.h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
+        return (index.h("div", { key: 'ce0db5a0d6c4c961d855981097b6bc75241e43b4', class: "wrapper" }, this.type === "checkbox" ? (index.h("div", { class: "list-entry" }, index.h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (index.h("div", { class: "list-entry" }, index.h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/ifx-multiselect-group.cjs.entry.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var index = require('./index-TZ-HynXP.js');
+
+const multiselectGroupCss = () => `:host{display:block;cursor:default}:host(.empty-group){display:none}.group-heading{box-sizing:border-box;padding:8px 16px;font-family:var(--ifx-font-family);font-size:0.875rem;line-height:1.25rem;font-weight:600;color:#3c3a39}`;
+
+const MultiselectGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** Label displayed above the group's options. */
+    label;
+    /** Whether the group is disabled. */
+    disabled = false;
+    componentWillLoad() {
+        if (this.el.parentElement?.tagName !== "IFX-MULTISELECT") {
+            console.warn("ifx-multiselect-group must be a direct child of ifx-multiselect.");
+        }
+    }
+    componentDidLoad() {
+        this.updateDescendantDisabledState();
+    }
+    updateDescendantDisabledState() {
+        this.el.querySelectorAll("ifx-multiselect-option").forEach((option) => {
+            option.dispatchEvent(new CustomEvent("ifx-group-disabled-change", {
+                detail: { disabled: this.disabled },
+            }));
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: 'fe783b1d455d41c822a8da7e1bb4ec3f8ebd64b4', role: "group", "aria-label": this.label, "aria-disabled": this.disabled ? "true" : undefined }, index.h("div", { key: '0107530a33fad004816253338a61d986ae0775e5', class: "group-heading", "aria-hidden": "true" }, this.label), index.h("slot", { key: '1d4ad306b1f9bbfaad4767f740a96349d5afde1b' })));
+    }
+    static get watchers() { return {
+        "disabled": [{
+                "updateDescendantDisabledState": 0
+            }]
+    }; }
+};
+MultiselectGroup.style = multiselectGroupCss();
+
+exports.ifx_multiselect_group = MultiselectGroup;

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

@@ -105,15 +105,50 @@ const Multiselect = class {
     resizeObserver;
     measurementScheduled = false;
     internals;
+    getAllOptionElements() {
+        return Array.from(this.el.querySelectorAll("ifx-multiselect-option"));
+    }
+    getGroupElements() {
+        return Array.from(this.el.querySelectorAll("ifx-multiselect-group"));
+    }
+    isOptionVisible(option) {
+        return !option.shadowRoot?.querySelector(".option")?.classList.contains("search-hidden");
+    }
+    updateGroupVisibility(searchActive) {
+        this.getGroupElements().forEach((group) => {
+            const hasVisibleOption = Array.from(group.querySelectorAll("ifx-multiselect-option")).some((option) => this.isOptionVisible(option));
+            if (searchActive && !hasVisibleOption) {
+                group.classList.add("empty-group");
+            }
+            else {
+                group.classList.remove("empty-group");
+            }
+        });
+    }
+    getRootOptionElements() {
+        return Array.from(this.el.children).flatMap((child) => {
+            if (child.tagName === "IFX-MULTISELECT-OPTION") {
+                return [child];
+            }
+            if (child.tagName === "IFX-MULTISELECT-GROUP") {
+                return Array.from(child.children).filter((groupChild) => groupChild.tagName === "IFX-MULTISELECT-OPTION");
+            }
+            return [];
+        });
+    }
+    getLeafOptionElements() {
+        return this.getAllOptionElements().filter((option) => option.children.length === 0);
+    }
+    getEnabledLeafOptionElements() {
+        return this.getLeafOptionElements().filter((option) => !option.disabled && !option.closest("ifx-multiselect-group")?.disabled);
+    }
     parseChildOptions() {
         const options = [];
-        const childElements = Array.from(this.el.children);
+        const childElements = this.getRootOptionElements();
         childElements.forEach((child, index) => {
-            if (child.tagName === "IFX-MULTISELECT-OPTION") {
-                const option = this.parseOptionElement(child, index);
-                if (option) {
-                    options.push(option);
-                }
+            const option = this.parseOptionElement(child, index);
+            if (option) {
+                options.push(option);
             }
         });
         return options;
@@ -208,7 +243,7 @@ const Multiselect = class {
             }
         }
         requestAnimationFrame(() => {
-            const allOptions = this.el.querySelectorAll("ifx-multiselect-option");
+            const allOptions = this.getAllOptionElements();
             allOptions.forEach((option) => {
                 const searchEvent = new CustomEvent("ifx-search-filter", {
                     detail: { searchTerm, isActive: isSearchActive },
@@ -217,8 +252,9 @@ const Multiselect = class {
             });
             if (isSearchActive) {
                 setTimeout(() => {
-                    const allOptions = this.el.querySelectorAll("ifx-multiselect-option");
+                    const allOptions = this.getAllOptionElements();
                     let visibleCount = 0;
+                    this.updateGroupVisibility(true);
                     allOptions.forEach((option) => {
                         const style = window.getComputedStyle(option);
                         const rect = option.getBoundingClientRect();
@@ -241,6 +277,7 @@ const Multiselect = class {
                 }, 200);
             }
             else {
+                this.updateGroupVisibility(false);
                 const optionsContainer = this.el.shadowRoot.querySelector(".ifx-multiselect-options");
                 if (optionsContainer) {
                     optionsContainer.classList.remove("show-no-results");
@@ -275,11 +312,10 @@ const Multiselect = class {
     }
     //private pendingSelectionUpdate = false;
     updateSlotBasedSelections(emitEvent = false) {
-        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
         const selectedLeafOptions = [];
-        allOptionElements.forEach((optionEl) => {
+        this.getLeafOptionElements().forEach((optionEl) => {
             const instance = optionEl["__stencil_instance"];
-            if (instance && instance.selected && !instance.hasChildren) {
+            if (instance?.selected) {
                 selectedLeafOptions.push({
                     value: instance.value,
                     selected: true,
@@ -294,8 +330,7 @@ const Multiselect = class {
         }
     }
     updateInitialParentStates() {
-        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
-        const optionsByDepth = Array.from(allOptionElements)
+        const optionsByDepth = this.getAllOptionElements()
             .map((el) => ({
             element: el,
             instance: el["__stencil_instance"],
@@ -374,8 +409,7 @@ const Multiselect = class {
         //this.internals.setFormValue(formData);
     }
     collapseAll() {
-        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
-        allOptionElements.forEach((optionEl) => {
+        this.getAllOptionElements().forEach((optionEl) => {
             const instance = optionEl["__stencil_instance"];
             if (instance && instance.hasChildren) {
                 instance.isExpanded = false;
@@ -383,8 +417,7 @@ const Multiselect = class {
         });
     }
     expandAll() {
-        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
-        allOptionElements.forEach((optionEl) => {
+        this.getAllOptionElements().forEach((optionEl) => {
             const instance = optionEl["__stencil_instance"];
             if (instance && instance.hasChildren) {
                 instance.isExpanded = true;
@@ -393,16 +426,11 @@ const Multiselect = class {
     }
     selectAll() {
         this.resetSearch();
-        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
-        allOptionElements.forEach((optionEl) => {
+        this.expandAll();
+        this.getEnabledLeafOptionElements().forEach((optionEl) => {
             const instance = optionEl["__stencil_instance"];
             if (instance) {
-                if (instance.hasChildren) {
-                    instance.isExpanded = true;
-                }
-                else {
-                    instance.selected = true;
-                }
+                instance.selected = true;
             }
         });
         setTimeout(() => {
@@ -413,8 +441,7 @@ const Multiselect = class {
     }
     /** Clears all selected options in the multi-select and resets their state. */
     async clearSelection() {
-        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
-        allOptionElements.forEach((optionEl) => {
+        this.getAllOptionElements().forEach((optionEl) => {
             const instance = optionEl["__stencil_instance"];
             if (instance) {
                 instance.selected = false;
@@ -461,13 +488,28 @@ const Multiselect = class {
         if (optionsContainer) {
             optionsContainer.classList.remove("has-search-filter");
         }
-        const allOptions = this.el.querySelectorAll("ifx-multiselect-option");
+        const allOptions = this.getAllOptionElements();
         allOptions.forEach((option) => {
             const searchEvent = new CustomEvent("ifx-search-filter", {
                 detail: { searchTerm: "", isActive: false },
             });
             option.dispatchEvent(searchEvent);
         });
+        this.updateGroupVisibility(false);
+    }
+    clearEnabledSelection() {
+        this.getEnabledLeafOptionElements().forEach((optionEl) => {
+            const instance = optionEl["__stencil_instance"];
+            if (instance) {
+                instance.selected = false;
+                instance.indeterminate = false;
+            }
+        });
+        setTimeout(() => {
+            this.updateInitialParentStates();
+            this.updateSlotBasedSelections(false);
+            this.ifxSelect.emit(this.persistentSelectedOptions);
+        }, 0);
     }
     handleWrapperClick(event) {
         this.positionDropdown();
@@ -529,18 +571,16 @@ const Multiselect = class {
         }
     }
     renderSelectAll() {
-        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
-        const leafOptions = Array.from(allOptionElements).filter((el) => !el.hasChildren);
-        const selectedLeafOptions = Array.from(allOptionElements).filter((el) => !el.hasChildren && el.selected);
-        const allSelected = leafOptions.length > 0 &&
-            selectedLeafOptions.length === leafOptions.length;
+        const enabledLeafOptions = this.getEnabledLeafOptionElements();
+        const allSelected = enabledLeafOptions.length > 0 &&
+            enabledLeafOptions.every((option) => option.selected);
         const toggleSelectAll = (event) => {
             if (event) {
                 event.preventDefault();
                 event.stopPropagation();
             }
             if (allSelected) {
-                this.clearSelection();
+                this.clearEnabledSelection();
             }
             else {
                 this.selectAll();
@@ -634,27 +674,27 @@ const Multiselect = class {
     render() {
         const hasSelections = this.persistentSelectedOptions.length > 0;
         let isFlatMultiselect = false;
-        const allOptionElements = this.el.querySelectorAll("ifx-multiselect-option");
+        const allOptionElements = this.getAllOptionElements();
         if (allOptionElements.length > 0) {
-            isFlatMultiselect = Array.from(allOptionElements).every((option) => option.children.length === 0);
+            isFlatMultiselect = allOptionElements.every((option) => option.children.length === 0);
         }
-        return (index.h("div", { key: 'ae738e69b0c6ad499fa245f0c50aa980896a0498', class: `ifx-multiselect-container ${this.readOnly ? 'readOnly' : this.internalError ? '' : this.disabled ? 'disabled' : ''}`, ref: (el) => (this.dropdownElement = el) }, index.h("div", { key: '86f8c1231165a92417913c69644cf2b61f293304', class: "ifx-label-wrapper" }, this.label && (index.h("span", { key: '12635f902567f5ade79dedbc0ab749d6dbe1dc73', class: "wrapper-label" }, index.h("span", { key: 'ec8af951c007e6d6ef4bce787569270ce582d77e' }, this.label), this.required && (index.h("span", { key: 'cfab127b3e33529f28b75377e8733428e96afbb3', class: `required ${!this.readOnly && this.internalError ? "error" : ""}` }, "*"))))), index.h("div", { key: '0c3c286a05dab81c1a6364993e7dc0e0461456d4', class: `ifx-multiselect-wrapper
+        return (index.h("div", { key: 'f00d2b7e9ecd303b8157454814a4955e0c1b8804', class: `ifx-multiselect-container ${this.readOnly ? 'readOnly' : this.internalError ? '' : this.disabled ? 'disabled' : ''}`, ref: (el) => (this.dropdownElement = el) }, index.h("div", { key: '68fb0fff7b906e3a14e4fef4def1f0aab8f3f26c', class: "ifx-label-wrapper" }, this.label && (index.h("span", { key: '1c3308f3259da195e08d7cea3728779fdcf72b5b', class: "wrapper-label" }, index.h("span", { key: 'faec02d87d7ea4e9c6c8d00c9a76897b897ff943' }, this.label), this.required && (index.h("span", { key: 'c7c0e4d7a90caf2dbf0594867798fc418ffa10be', class: `required ${!this.readOnly && this.internalError ? "error" : ""}` }, "*"))))), index.h("div", { key: '5e2c61ef32fb0be706c34f6103f0a939924e0582', class: `ifx-multiselect-wrapper
         ${this.dropdownOpen ? "active" : ""}
         ${this.dropdownFlipped ? "is-flipped" : ""}
         ${this.readOnly ? "" : this.internalError ? "error" : this.disabled ? "disabled" : ""}`, role: "combobox", "aria-label": this.ariaMultiSelectLabel, "aria-labelledby": this.ariaMultiSelectLabelledBy || undefined, "aria-describedby": this.ariaMultiSelectDescribedBy || undefined, "aria-expanded": this.dropdownOpen, "aria-haspopup": "listbox", "aria-disabled": !this.readOnly && !this.internalError && this.disabled, tabindex: "0", onClick: (this.disabled && !this.internalError) || this.readOnly
                 ? undefined
                 : (event) => this.handleWrapperClick(event), onKeyDown: (this.disabled && !this.internalError) || this.readOnly
                 ? undefined
-                : (event) => this.handleKeyDown(event) }, index.h("div", { key: '57ee6b0b1743df597d986b48667bddc5e3e1ea5a', class: `ifx-multiselect-input
+                : (event) => this.handleKeyDown(event) }, index.h("div", { key: 'f3ab373237d09c9ba8ba91c03aeee930241520e4', class: `ifx-multiselect-input
 		  chips
           ${hasSelections ? "" : "placeholder"}
           `, onClick: (this.disabled && !this.internalError) || this.readOnly
                 ? undefined
-                : () => this.toggleDropdown() }, hasSelections ? this.renderSelectedOptions() : this.placeholder, hasSelections && this.renderSelectedOptionsMeasurement()), this.dropdownOpen && (index.h("div", { key: 'be9c0670bbba28dc988111f805693b5da006114d', class: "ifx-multiselect-dropdown-menu" }, (this.showSearch ||
+                : () => this.toggleDropdown() }, hasSelections ? this.renderSelectedOptions() : this.placeholder, hasSelections && this.renderSelectedOptionsMeasurement()), this.dropdownOpen && (index.h("div", { key: '3e064ef34d322d364c1e031460f8fa8425bc9f2c', class: "ifx-multiselect-dropdown-menu" }, (this.showSearch ||
             this.showSelectAll ||
-            (this.showExpandCollapse && !isFlatMultiselect)) && (index.h("div", { key: '678257acb336b83c9cee83ec5b55b19f0734a448', class: "ifx-multiselect-dropdown-functions", onClick: (e) => e.stopPropagation() }, this.showSearch && (index.h("div", { key: 'c7f709fd3b69876e33badc14e338d4e5cb89090c', class: "ifx-multiselect-dropdown-search" }, index.h("ifx-search-field", { key: '7b28940f92a779d6fe519f38b21c82b16b7025af', class: "search-input", placeholder: this.searchPlaceholder, size: "s", "show-delete-icon": "true", "aria-label": this.ariaSearchLabel, onKeyDown: (e) => {
+            (this.showExpandCollapse && !isFlatMultiselect)) && (index.h("div", { key: '84b394b195e48cc39590fdb52b3b50c0b1cec8c7', class: "ifx-multiselect-dropdown-functions", onClick: (e) => e.stopPropagation() }, this.showSearch && (index.h("div", { key: '5ecdcb7dc23620caf47f50b2828775db6935c3d7', class: "ifx-multiselect-dropdown-search" }, index.h("ifx-search-field", { key: 'dc332a3f15602212f5efc500f0ae076b0cf0c166', class: "search-input", placeholder: this.searchPlaceholder, size: "s", "show-delete-icon": "true", "aria-label": this.ariaSearchLabel, onKeyDown: (e) => {
                 e.stopPropagation();
-            }, onIfxInput: (event) => this.handleSearch(event.target), onFocus: () => this.handleSearchFocus(true), onBlur: () => this.handleSearchFocus(false) }))), index.h("div", { key: '84f0e116418af4efe9e167685f8d147ea549c858', class: "ifx-multiselect-dropdown-controls" }, this.showSelectAll && this.renderSelectAll(), this.showExpandCollapse && !isFlatMultiselect && (index.h("div", { key: 'a8a0761625ca42658f1546e9ac5a9ceeebad1235', class: "expand-collapse-controls" }, index.h("span", { key: '851a27272cb3673fe8cb7a395322c5ada93a4464', class: "control-item", role: "button", tabIndex: 0, "aria-label": this.ariaExpandAllLabel, onClick: (e) => {
+            }, onIfxInput: (event) => this.handleSearch(event.target), onFocus: () => this.handleSearchFocus(true), onBlur: () => this.handleSearchFocus(false) }))), index.h("div", { key: 'd5dccbcfbe1be89373d2c7839573d905103c6d88', class: "ifx-multiselect-dropdown-controls" }, this.showSelectAll && this.renderSelectAll(), this.showExpandCollapse && !isFlatMultiselect && (index.h("div", { key: 'b89d3f9a8a089e58d15b8149cbf9e8640e6307f8', class: "expand-collapse-controls" }, index.h("span", { key: '5d918ce00151723c3d7cc45250205f621f596be0', class: "control-item", role: "button", tabIndex: 0, "aria-label": this.ariaExpandAllLabel, onClick: (e) => {
                 e.stopPropagation();
                 this.expandAll();
             }, onKeyDown: (e) => {
@@ -663,7 +703,7 @@ const Multiselect = class {
                     e.stopPropagation();
                     this.expandAll();
                 }
-            } }, this.expandLabel), index.h("span", { key: 'ca141d46f83a11e34b643501d0a6b4765ade502b', class: "control-item", role: "button", tabIndex: 0, "aria-label": this.ariaCollapseAllLabel, onClick: (e) => {
+            } }, this.expandLabel), index.h("span", { key: 'a0c9a7b8bf4dabf29a79b3c3d3ba653861bb06d0', class: "control-item", role: "button", tabIndex: 0, "aria-label": this.ariaCollapseAllLabel, onClick: (e) => {
                 e.stopPropagation();
                 this.collapseAll();
             }, onKeyDown: (e) => {
@@ -672,15 +712,15 @@ const Multiselect = class {
                     e.stopPropagation();
                     this.collapseAll();
                 }
-            } }, this.collapseLabel)))))), index.h("div", { key: '2cab56ffb776256c5f14860488221c8842e55fc1', class: "ifx-multiselect-options", role: "listbox", "aria-multiselectable": "true" }, index.h("slot", { key: 'b91a107b737029348c0f3034b277a93c9eca1eb1' }), this.searchTerm &&
+            } }, this.collapseLabel)))))), index.h("div", { key: 'b9e28964bbee62c48a38dbfc9c72ecf879f9863f', class: "ifx-multiselect-options", role: "listbox", "aria-multiselectable": "true" }, index.h("slot", { key: 'e347376045f5800c04073db370a2575b50807e12' }), this.searchTerm &&
             this.showNoResultsMessage &&
-            this.renderNoResultsMessage()))), index.h("div", { key: 'b384edb3d78c5d2cec6ea1235e2e2876a5cf1f82', class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (index.h("div", { key: '23a6f80777518332f1c00db73413aabdae912df5', class: `ifx-clear-button ${!this.showClearButton ? "hide" : ""}`, onClick: this.disabled && !this.error
+            this.renderNoResultsMessage()))), index.h("div", { key: '6e2412a22366f4739c1d39693ca6492b5992a8bd', class: "ifx-multiselect-icon-container" }, this.persistentSelectedOptions.length > 0 && (index.h("div", { key: '26a3cef975753ceeb09b5a4abf1479e71c21a776', class: `ifx-clear-button ${!this.showClearButton ? "hide" : ""}`, onClick: this.disabled && !this.error
                 ? undefined
-                : this.handleClearButtonClick }, index.h("ifx-icon", { key: '789166292da57ec070cc7c0855b6695128f788f0', icon: "cRemove16" }))), index.h("div", { key: '3dac14bc9fafe0b686734906514b3de47fa0befd', class: "icon-wrapper-up", onClick: this.disabled && !this.error
+                : this.handleClearButtonClick }, index.h("ifx-icon", { key: 'b50d22e9a70915140ac1321202ce284c80ffd909', icon: "cRemove16" }))), index.h("div", { key: '251c57c1daa52ef57570232f35de5a2e70feaa42', class: "icon-wrapper-up", onClick: this.disabled && !this.error
                 ? undefined
-                : () => this.toggleDropdown() }, index.h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), index.h("div", { key: '8bd59179e4c755c6ac6590419c769f69c652078b', class: "icon-wrapper-down", onClick: this.disabled && !this.error
+                : () => this.toggleDropdown() }, index.h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), index.h("div", { key: '21523ec6ccc4cc84e6d9b15881f8e7dbf45df1ea', class: "icon-wrapper-down", onClick: this.disabled && !this.error
                 ? undefined
-                : () => this.toggleDropdown() }, index.h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.caption && (index.h("div", { key: '656537d7023097a2a423b1b740e7f9c30a6b6925', class: `multi__select-caption ${this.readOnly ? "" : this.internalError ? "error" : this.disabled ? "disabled" : ""}` }, this.caption))));
+                : () => this.toggleDropdown() }, index.h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.caption && (index.h("div", { key: '067c7c9fab1188e7475caf946f9030f977862f35', class: `multi__select-caption ${this.readOnly ? "" : this.internalError ? "error" : this.disabled ? "disabled" : ""}` }, this.caption))));
     }
     static get watchers() { return {
         "error": [{
@@ -714,9 +754,11 @@ const MultiselectOption = class {
     searchTerm = "";
     isSearchActive = false;
     isSearchDisabled = false;
+    disabledByGroup = false;
     componentWillLoad() {
         this.hasChildren = this.el.children.length > 0;
         this.depth = this.calculateDepth();
+        this.disabledByGroup = this.el.closest("ifx-multiselect-group")?.disabled ?? false;
         this.el.setAttribute("data-level", this.depth.toString());
         if (this.hasChildren) {
             const hasSelectedChildren = this.hasAnySelectedChildren();
@@ -729,9 +771,17 @@ const MultiselectOption = class {
         this.el['__stencil_instance'] = this;
         this.notifyMultiselect();
         this.el.addEventListener('ifx-search-filter', this.handleSearchFilter);
+        this.el.addEventListener('ifx-group-disabled-change', this.handleGroupDisabledChange);
     }
     disconnectedCallback() {
         this.el.removeEventListener("ifx-search-filter", this.handleSearchFilter);
+        this.el.removeEventListener("ifx-group-disabled-change", this.handleGroupDisabledChange);
+    }
+    handleGroupDisabledChange = (event) => {
+        this.disabledByGroup = event.detail.disabled;
+    };
+    isEffectivelyDisabled() {
+        return this.disabled || this.disabledByGroup;
     }
     handleSearchFilter = (event) => {
         const { searchTerm, isActive } = event.detail;
@@ -883,7 +933,7 @@ const MultiselectOption = class {
         return depth;
     }
     handleClick(event) {
-        if (this.disabled || (this.isSearchActive && this.isSearchDisabled))
+        if (this.isEffectivelyDisabled() || (this.isSearchActive && this.isSearchDisabled))
             return;
         event.stopPropagation();
         if (event.type === "click" &&
@@ -911,7 +961,7 @@ const MultiselectOption = class {
         this.notifyMultiselect();
     }
     handleKeyDown(event) {
-        if (this.disabled || (this.isSearchActive && this.isSearchDisabled))
+        if (this.isEffectivelyDisabled() || (this.isSearchActive && this.isSearchDisabled))
             return;
         const target = event.target;
         if (target.closest(".chevron-wrapper") ||
@@ -996,10 +1046,12 @@ const MultiselectOption = class {
         }
     }
     toggleExpansion() {
+        if (this.isEffectivelyDisabled())
+            return;
         this.isExpanded = !this.isExpanded;
     }
     handleCheckboxClick = (event) => {
-        if (this.disabled || (this.isSearchActive && this.isSearchDisabled))
+        if (this.isEffectivelyDisabled() || (this.isSearchActive && this.isSearchDisabled))
             return;
         event.preventDefault();
         event.stopPropagation();
@@ -1024,7 +1076,7 @@ const MultiselectOption = class {
     };
     handleHeaderClick = (event) => {
         event.stopPropagation();
-        if (!this.disabled && !(this.isSearchActive && this.isSearchDisabled)) {
+        if (!this.isEffectivelyDisabled() && !(this.isSearchActive && this.isSearchDisabled)) {
             this.handleClick(event);
         }
     };
@@ -1045,6 +1097,7 @@ const MultiselectOption = class {
         });
     }
     render() {
+        const effectivelyDisabled = this.isEffectivelyDisabled();
         let isFlatMultiselect = false;
         const parentMultiselect = this.el.closest("ifx-multiselect");
         if (parentMultiselect) {
@@ -1057,13 +1110,13 @@ const MultiselectOption = class {
         const optionItemStyle = isFlatMultiselect
             ? undefined
             : { paddingLeft: `${totalPadding}px` };
-        return (index.h(index.Host, { key: '32e25143cc32fd2ebf6abc8e1817f67cb10fea31' }, index.h("div", { key: 'cd0a4a6898b354145bd18cc02c9b551e363b96b7', class: {
+        return (index.h(index.Host, { key: 'd97998a025be93ca514e4c01ad94e8ec33b9e6cf' }, index.h("div", { key: '83841ccf6375f1475f4d8f298a4e3736eeadb01a', class: {
                 option: true,
                 "option--has-children": this.hasChildren,
                 "option--expanded": this.isExpanded,
-                "option--disabled": this.disabled,
+                "option--disabled": effectivelyDisabled,
                 "option--selected": this.selected,
-            }, role: "option", "aria-expanded": this.hasChildren ? (this.isExpanded ? "true" : "false") : undefined, "aria-selected": this.selected ? "true" : "false", "aria-disabled": this.disabled ? "true" : "false", "data-level": this.depth, "data-value": this.value }, index.h("div", { key: 'a746c193dd015cbe3f71c17ff829c13ab425c6c3', class: "option-item", style: optionItemStyle }, index.h("div", { key: 'ce6c479bec0475e931ad0e5aeb4be5032b2a521f', class: "chevron-wrapper", tabIndex: this.hasChildren ? 0 : -1, role: this.hasChildren ? "button" : undefined, "aria-label": this.hasChildren
+            }, role: "option", "aria-expanded": this.hasChildren ? (this.isExpanded ? "true" : "false") : undefined, "aria-selected": this.selected ? "true" : "false", "aria-disabled": effectivelyDisabled ? "true" : "false", "data-level": this.depth, "data-value": this.value }, index.h("div", { key: 'c3e446129deb0410a7eb24b8098e72378dfcb171', class: "option-item", style: optionItemStyle }, index.h("div", { key: 'ff701e6e5443217ce118a2b744a8ef3e9f02e1d4', class: "chevron-wrapper", tabIndex: this.hasChildren ? 0 : -1, role: this.hasChildren ? "button" : undefined, "aria-label": this.hasChildren
                 ? this.isExpanded
                     ? "Collapse"
                     : "Expand"
@@ -1076,20 +1129,20 @@ const MultiselectOption = class {
                     e.stopPropagation();
                     this.toggleExpansion();
                 }
-            } }, this.hasChildren && (index.h("ifx-icon", { key: '8ef82a90ee3404b04f49cab3e199024b899ffee8', class: `chevron ${this.isExpanded ? "chevron--expanded" : "chevron--collapsed"}`, icon: "chevron-right-16" }))), index.h("div", { key: '5de7d55dbb5e5eece6d5ebb8b4ec9801004b5c0e', class: "checkbox-wrapper", onClick: (e) => e.stopPropagation() }, index.h("ifx-checkbox", { key: '6e99c66917d242bde40a569085969e0b7ff8a293', size: "s", checked: this.isSearchActive && this.isSearchDisabled
+            } }, this.hasChildren && (index.h("ifx-icon", { key: '847f43c183b216a5cce7657db1b73d643702f416', class: `chevron ${this.isExpanded ? "chevron--expanded" : "chevron--collapsed"}`, icon: "chevron-right-16" }))), index.h("div", { key: '29f009853223a01858c89af8dde1aa995eb0bd1e', class: "checkbox-wrapper", onClick: (e) => e.stopPropagation() }, index.h("ifx-checkbox", { key: 'e9bf9743d8ea7d0e7be879ab9697a5243d1afd8c', size: "s", checked: this.isSearchActive && this.isSearchDisabled
                 ? false
                 : this.indeterminate
                     ? false
                     : this.selected, indeterminate: this.isSearchActive && this.isSearchDisabled
                 ? false
-                : this.indeterminate, onClick: this.handleCheckboxClick, disabled: this.disabled ||
+                : this.indeterminate, onClick: this.handleCheckboxClick, disabled: effectivelyDisabled ||
                 (this.isSearchActive && this.isSearchDisabled), onKeyDown: (e) => {
                 if (e.key === "Enter" || e.key === " ") {
                     e.preventDefault();
                     e.stopPropagation();
                     this.handleCheckboxClick(e);
                 }
-            } })), index.h("div", { key: '665c1a14feffb85763a3916cbe6ffe356564e1cd', class: "option-label", onClick: this.handleHeaderClick, tabIndex: -1 }, index.h("slot", { key: 'aa7d2f5f530abe03ded91e8fe23e86e073ec0699' }))), this.isExpanded && (index.h("div", { key: 'b8e0ec00a5f25230086eb3744bd82de306b4dcb2', class: "option-children" }, index.h("slot", { key: 'b67ee1ed35c21410792108cbf5233af0b558f3b3', name: "children" }))))));
+            } })), index.h("div", { key: '387bd2749a759b549fe6ad7b2e88787b3d0ab3f6', class: "option-label", onClick: this.handleHeaderClick, tabIndex: -1 }, index.h("slot", { key: 'ca673834ac84bd0d360a5743fe6278dbb4a00190' }))), this.isExpanded && (index.h("div", { key: '0c9a5e688a83b0f0b2fac2621ec154729c9e74de', class: "option-children" }, index.h("slot", { key: '4bfc5e2b25d1ef7ad27d8462c5aea0380d138396', name: "children" }))))));
     }
 };
 MultiselectOption.style = multiselectOptionCss();