@mozaic-ds/angular 2.0.11 → 2.0.12

package/fesm2022/mozaic-ds-angular.mjs

@@ -1521,8 +1521,9 @@ class MozTabComponent {
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     routerLink = input(...(ngDevMode ? [undefined, { debugName: "routerLink" }] : []));
+    badge = input(...(ngDevMode ? [undefined, { debugName: "badge" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MozTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: MozTabComponent, isStandalone: true, selector: "moz-tab", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: MozTabComponent, isStandalone: true, selector: "moz-tab", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MozTabComponent, decorators: [{
             type: Component,
@@ -1531,7 +1532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     template: `<ng-content></ng-content>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }] } });
 
 class MozTabsComponent {
     tabs;
@@ -1601,11 +1602,11 @@ class MozTabsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MozTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MozTabsComponent, isStandalone: true, selector: "moz-tabs", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, tabsInput: { classPropertyName: "tabsInput", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedIndexChange: "selectedIndexChange" }, queries: [{ propertyName: "tabs", predicate: MozTabComponent }], ngImport: i0, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n  <ul class=\"tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n    @if (hasVirtualTabs()) { @for (tab of virtualTabs(); let index = $index; track index) {\n    <li class=\"tabs__item\" role=\"presentation\">\n      @if (tab.routerLink) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id\"\n        [class]=\"getVirtualTabClasses(index)()\"\n        [routerLink]=\"tab.routerLink\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickTab(index)\"\n      >\n        @if (tab.icon) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label }}</span>\n        </div>\n      </button>\n      } @else {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id\"\n        [class]=\"getVirtualTabClasses(index)()\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickVirtualTab(index, tab)\"\n      >\n        @if (tab.icon) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label }}</span>\n        </div>\n      </button>\n      }\n    </li>\n    } } @else { @for (tab of tabsArray(); let index = $index; track index) {\n    <li class=\"tabs__item\" role=\"presentation\">\n      @if (tab.routerLink()) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id()\"\n        [class]=\"getTabClasses(index)()\"\n        [routerLink]=\"tab.routerLink()\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickTab(index)\"\n      >\n        @if (tab.icon()) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label() }}</span>\n        </div>\n      </button>\n      } @else {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id()\"\n        [class]=\"getTabClasses(index)()\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickTab(index)\"\n      >\n        @if (tab.icon()) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label() }}</span>\n        </div>\n      </button>\n      }\n    </li>\n    } }\n  </ul>\n\n  @if (divider()) {\n  <moz-divider></moz-divider>\n  }\n</nav>\n", styles: [".mc-tabs,.tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem}.mc-tabs__list,.tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem)}.mc-tabs__tab,.tabs__tab{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--border-radius-s, .25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:.75rem;padding-right:.75rem;position:relative;text-decoration:none}.mc-tabs__tab:hover,.tabs__tab:hover{background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, .05))}.mc-tabs__tab:focus-visible,.tabs__tab:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tabs__tab--selected,.tabs__tab--selected{color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de)}.mc-tabs__tab--selected:hover,.tabs__tab--selected:hover{background-color:var(--tabs-color-background-selected-hover, #c5e39e)}.mc-tabs__tab--disabled,.tabs__tab--disabled{color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed}.mc-tabs__tab--disabled:hover,.tabs__tab--disabled:hover{background:none}.mc-tabs__label,.tabs__label{pointer-events:none}.mc-tabs__icon,.tabs__icon{fill:currentcolor;height:1.5rem;width:1.5rem}.mc-tabs--centered .mc-tabs__list,.tabs--centered .mc-tabs__list,.mc-tabs--centered .tabs__list,.tabs--centered .tabs__list{justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MozDividerComponent, selector: "moz-divider", inputs: ["orientation", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MozTabsComponent, isStandalone: true, selector: "moz-tabs", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, tabsInput: { classPropertyName: "tabsInput", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedIndexChange: "selectedIndexChange" }, queries: [{ propertyName: "tabs", predicate: MozTabComponent }], ngImport: i0, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n  <ul class=\"tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n    @if (hasVirtualTabs()) { @for (tab of virtualTabs(); let index = $index; track index) {\n    <li class=\"tabs__item\" role=\"presentation\">\n      @if (tab.routerLink) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id\"\n        [class]=\"getVirtualTabClasses(index)()\"\n        [routerLink]=\"tab.routerLink\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickTab(index)\"\n      >\n        @if (tab.icon) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label }}</span>\n        </div>\n        @if (tab.badge != null) {\n        <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge }}</span>\n        }\n      </button>\n      } @else {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id\"\n        [class]=\"getVirtualTabClasses(index)()\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickVirtualTab(index, tab)\"\n      >\n        @if (tab.icon) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label }}</span>\n        </div>\n        @if (tab.badge != null) {\n        <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge }}</span>\n        }\n      </button>\n      }\n    </li>\n    } } @else { @for (tab of tabsArray(); let index = $index; track index) {\n    <li class=\"tabs__item\" role=\"presentation\">\n      @if (tab.routerLink()) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id()\"\n        [class]=\"getTabClasses(index)()\"\n        [routerLink]=\"tab.routerLink()\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickTab(index)\"\n      >\n        @if (tab.icon()) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label() }}</span>\n        </div>\n        @if (tab.badge() != null) {\n        <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge() }}</span>\n        }\n      </button>\n      } @else {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id()\"\n        [class]=\"getTabClasses(index)()\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickTab(index)\"\n      >\n        @if (tab.icon()) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label() }}</span>\n        </div>\n        @if (tab.badge() != null) {\n        <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge() }}</span>\n        }\n      </button>\n      }\n    </li>\n    } }\n  </ul>\n\n  @if (divider()) {\n  <moz-divider></moz-divider>\n  }\n</nav>\n", styles: [".mc-tabs,.tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem}.mc-tabs__list,.tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem)}.mc-tabs__tab,.tabs__tab{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--border-radius-s, .25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:.75rem;padding-right:.75rem;position:relative;text-decoration:none}.mc-tabs__tab:hover,.tabs__tab:hover{background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, .05))}.mc-tabs__tab:focus-visible,.tabs__tab:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tabs__tab--selected,.tabs__tab--selected{color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de)}.mc-tabs__tab--selected:hover,.tabs__tab--selected:hover{background-color:var(--tabs-color-background-selected-hover, #c5e39e)}.mc-tabs__tab--disabled,.tabs__tab--disabled{color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed}.mc-tabs__tab--disabled:hover,.tabs__tab--disabled:hover{background:none}.mc-tabs__label,.tabs__label{pointer-events:none}.mc-tabs__icon,.tabs__icon{fill:currentcolor;height:1.5rem;width:1.5rem}.mc-tabs--centered .mc-tabs__list,.tabs--centered .mc-tabs__list,.mc-tabs--centered .tabs__list,.tabs--centered .tabs__list{justify-content:center}.mc-number-badge{color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:.125rem;font-size:var(--font-size-25, .625rem);border-radius:var(--border-radius-l, 1rem);font-weight:var(--font-weight-semi-bold, 600);display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1}.mc-number-badge--m{height:1.5rem;min-width:1.5rem;padding-inline:.25rem;font-size:var(--font-size-50, .75rem)}.mc-number-badge--accent{color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03)}.mc-number-badge--danger{color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112)}.mc-number-badge--inverse{color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MozDividerComponent, selector: "moz-divider", inputs: ["orientation", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MozTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'moz-tabs', imports: [NgComponentOutlet, RouterLink, MozDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n  <ul class=\"tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n    @if (hasVirtualTabs()) { @for (tab of virtualTabs(); let index = $index; track index) {\n    <li class=\"tabs__item\" role=\"presentation\">\n      @if (tab.routerLink) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id\"\n        [class]=\"getVirtualTabClasses(index)()\"\n        [routerLink]=\"tab.routerLink\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickTab(index)\"\n      >\n        @if (tab.icon) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label }}</span>\n        </div>\n      </button>\n      } @else {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id\"\n        [class]=\"getVirtualTabClasses(index)()\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickVirtualTab(index, tab)\"\n      >\n        @if (tab.icon) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label }}</span>\n        </div>\n      </button>\n      }\n    </li>\n    } } @else { @for (tab of tabsArray(); let index = $index; track index) {\n    <li class=\"tabs__item\" role=\"presentation\">\n      @if (tab.routerLink()) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id()\"\n        [class]=\"getTabClasses(index)()\"\n        [routerLink]=\"tab.routerLink()\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickTab(index)\"\n      >\n        @if (tab.icon()) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label() }}</span>\n        </div>\n      </button>\n      } @else {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id()\"\n        [class]=\"getTabClasses(index)()\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickTab(index)\"\n      >\n        @if (tab.icon()) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label() }}</span>\n        </div>\n      </button>\n      }\n    </li>\n    } }\n  </ul>\n\n  @if (divider()) {\n  <moz-divider></moz-divider>\n  }\n</nav>\n", styles: [".mc-tabs,.tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem}.mc-tabs__list,.tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem)}.mc-tabs__tab,.tabs__tab{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--border-radius-s, .25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:.75rem;padding-right:.75rem;position:relative;text-decoration:none}.mc-tabs__tab:hover,.tabs__tab:hover{background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, .05))}.mc-tabs__tab:focus-visible,.tabs__tab:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tabs__tab--selected,.tabs__tab--selected{color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de)}.mc-tabs__tab--selected:hover,.tabs__tab--selected:hover{background-color:var(--tabs-color-background-selected-hover, #c5e39e)}.mc-tabs__tab--disabled,.tabs__tab--disabled{color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed}.mc-tabs__tab--disabled:hover,.tabs__tab--disabled:hover{background:none}.mc-tabs__label,.tabs__label{pointer-events:none}.mc-tabs__icon,.tabs__icon{fill:currentcolor;height:1.5rem;width:1.5rem}.mc-tabs--centered .mc-tabs__list,.tabs--centered .mc-tabs__list,.mc-tabs--centered .tabs__list,.tabs--centered .tabs__list{justify-content:center}\n"] }]
+            args: [{ selector: 'moz-tabs', imports: [NgComponentOutlet, RouterLink, MozDividerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [class]=\"classes()\" aria-label=\"Tabs\">\n  <ul class=\"tabs__list\" role=\"tablist\" [attr.aria-label]=\"description()\">\n    @if (hasVirtualTabs()) { @for (tab of virtualTabs(); let index = $index; track index) {\n    <li class=\"tabs__item\" role=\"presentation\">\n      @if (tab.routerLink) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id\"\n        [class]=\"getVirtualTabClasses(index)()\"\n        [routerLink]=\"tab.routerLink\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickTab(index)\"\n      >\n        @if (tab.icon) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label }}</span>\n        </div>\n        @if (tab.badge != null) {\n        <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge }}</span>\n        }\n      </button>\n      } @else {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id\"\n        [class]=\"getVirtualTabClasses(index)()\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickVirtualTab(index, tab)\"\n      >\n        @if (tab.icon) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label }}</span>\n        </div>\n        @if (tab.badge != null) {\n        <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge }}</span>\n        }\n      </button>\n      }\n    </li>\n    } } @else { @for (tab of tabsArray(); let index = $index; track index) {\n    <li class=\"tabs__item\" role=\"presentation\">\n      @if (tab.routerLink()) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id()\"\n        [class]=\"getTabClasses(index)()\"\n        [routerLink]=\"tab.routerLink()\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickTab(index)\"\n      >\n        @if (tab.icon()) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label() }}</span>\n        </div>\n        @if (tab.badge() != null) {\n        <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge() }}</span>\n        }\n      </button>\n      } @else {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [id]=\"tab.id()\"\n        [class]=\"getTabClasses(index)()\"\n        [attr.aria-selected]=\"isTabSelected(index)\"\n        (click)=\"onClickTab(index)\"\n      >\n        @if (tab.icon()) {\n        <span class=\"tabs__icon\" aria-hidden=\"true\">\n          <ng-container [ngComponentOutlet]=\"tab.icon() ?? null\"></ng-container>\n        </span>\n        }\n        <div class=\"tabs__label\">\n          <span>{{ tab.label() }}</span>\n        </div>\n        @if (tab.badge() != null) {\n        <span class=\"mc-number-badge mc-tabs__badge\" [class.mc-number-badge--accent]=\"isTabSelected(index)\">{{ tab.badge() }}</span>\n        }\n      </button>\n      }\n    </li>\n    } }\n  </ul>\n\n  @if (divider()) {\n  <moz-divider></moz-divider>\n  }\n</nav>\n", styles: [".mc-tabs,.tabs{background-color:var(--tabs-color-background-default, #ffffff);position:relative;width:100%;height:3.5rem}.mc-tabs__list,.tabs__list{list-style-type:none;padding-inline-start:0;margin-block:0;display:flex;gap:.5rem;padding:var(--tabs-list-padding, .5rem .25rem)}.mc-tabs__tab,.tabs__tab{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);align-items:center;background:none;border:none;border-radius:var(--border-radius-s, .25rem);color:var(--tabs-color-text-default, #404040);cursor:pointer;display:flex;gap:.25rem;height:2.5rem;justify-content:center;outline:none;padding-left:.75rem;padding-right:.75rem;position:relative;text-decoration:none}.mc-tabs__tab:hover,.tabs__tab:hover{background-color:var(--tabs-color-background-hover, rgba(0, 0, 0, .05))}.mc-tabs__tab:focus-visible,.tabs__tab:focus-visible{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-tabs__tab--selected,.tabs__tab--selected{color:var(--tabs-color-text-selected, #006902);background-color:var(--tabs-color-background-selected, #ebf5de)}.mc-tabs__tab--selected:hover,.tabs__tab--selected:hover{background-color:var(--tabs-color-background-selected-hover, #c5e39e)}.mc-tabs__tab--disabled,.tabs__tab--disabled{color:var(--tabs-color-text-disabled, #b3b3b3);cursor:not-allowed}.mc-tabs__tab--disabled:hover,.tabs__tab--disabled:hover{background:none}.mc-tabs__label,.tabs__label{pointer-events:none}.mc-tabs__icon,.tabs__icon{fill:currentcolor;height:1.5rem;width:1.5rem}.mc-tabs--centered .mc-tabs__list,.tabs--centered .mc-tabs__list,.mc-tabs--centered .tabs__list,.tabs--centered .tabs__list{justify-content:center}.mc-number-badge{color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:.125rem;font-size:var(--font-size-25, .625rem);border-radius:var(--border-radius-l, 1rem);font-weight:var(--font-weight-semi-bold, 600);display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1}.mc-number-badge--m{height:1.5rem;min-width:1.5rem;padding-inline:.25rem;font-size:var(--font-size-50, .75rem)}.mc-number-badge--accent{color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03)}.mc-number-badge--danger{color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112)}.mc-number-badge--inverse{color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [MozTabComponent]
@@ -4797,6 +4798,8 @@ class McComboboxComponent {
     searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
     /** Show "Select all / Clear" action buttons (multiple only) */
     showActions = input(false, ...(ngDevMode ? [{ debugName: "showActions" }] : []));
+    /** Whether the component is in a loading state (e.g. async data) */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     /** Custom comparator for option values */
     compareWith = input((a, b) => a === b, ...(ngDevMode ? [{ debugName: "compareWith" }] : []));
     /** Accessible label */
@@ -4804,6 +4807,23 @@ class McComboboxComponent {
     /** Reference to an external label element */
     ariaLabelledBy = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : []));
     // -----------------------------------------------------------------------
+    // Customizable text labels (i18n)
+    // -----------------------------------------------------------------------
+    /** Placeholder shown inside the search input */
+    searchPlaceholder = input('Find an option...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
+    /** Text shown when no items match the search query */
+    noResultsText = input('No results found', ...(ngDevMode ? [{ debugName: "noResultsText" }] : []));
+    /** Label for the "Select all" action button */
+    selectAllText = input('Select all', ...(ngDevMode ? [{ debugName: "selectAllText" }] : []));
+    /** Label for the "Clear" action button */
+    clearText = input('Clear', ...(ngDevMode ? [{ debugName: "clearText" }] : []));
+    /** Suffix for the compact counter (e.g. "3 selected") */
+    selectedSuffix = input('selected', ...(ngDevMode ? [{ debugName: "selectedSuffix" }] : []));
+    /** Accessible label for the clear button */
+    clearAriaLabel = input('Clear selection', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : []));
+    /** Text shown inside the dropdown while loading */
+    loadingText = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
+    // -----------------------------------------------------------------------
     // Outputs
     // -----------------------------------------------------------------------
     opened = output();
@@ -4982,13 +5002,16 @@ class McComboboxComponent {
         }
         this._updateTriggerWidth();
         this.isOpen.set(true);
+        if (this.searchQuery() !== '') {
+            this.searchQuery.set('');
+            this.searched.emit('');
+        }
         this.opened.emit();
     }
     close() {
         if (!this.isOpen())
             return;
         this.isOpen.set(false);
-        this.searchQuery.set('');
         this.focusedIndex.set(-1);
         this.closed.emit();
         this._onTouched();
@@ -5075,6 +5098,10 @@ class McComboboxComponent {
             }
             case 'Enter':
             case ' ': {
+                // Allow space to type in the search input
+                if (event.key === ' ' && event.target.tagName === 'INPUT') {
+                    break;
+                }
                 const fi = this.focusedIndex();
                 if (fi >= 0) {
                     const item = items[fi];
@@ -5260,17 +5287,17 @@ class McComboboxComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: McComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: McComboboxComponent, isStandalone: true, selector: "moz-combobox", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed", searched: "searched" }, host: { properties: { "class.mc-combobox--open": "isOpen()", "class.mc-combobox--multiple": "multiple()", "class.mc-combobox--invalid": "invalid()", "class.mc-combobox--disabled": "isEffectivelyDisabled()", "class.mc-combobox--readonly": "readonly()", "class.mc-combobox--s": "size() === \"s\"" }, classAttribute: "mc-combobox" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: McComboboxComponent, isStandalone: true, selector: "moz-combobox", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, clearText: { classPropertyName: "clearText", publicName: "clearText", isSignal: true, isRequired: false, transformFunction: null }, selectedSuffix: { classPropertyName: "selectedSuffix", publicName: "selectedSuffix", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed", searched: "searched" }, host: { properties: { "class.mc-combobox--open": "isOpen()", "class.mc-combobox--multiple": "multiple()", "class.mc-combobox--invalid": "invalid()", "class.mc-combobox--disabled": "isEffectivelyDisabled()", "class.mc-combobox--readonly": "readonly()", "class.mc-combobox--s": "size() === \"s\"" }, classAttribute: "mc-combobox" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => McComboboxComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "viewportEl", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ====================================================================== -->\n<!-- TRIGGER                                                                -->\n<!-- ====================================================================== -->\n<div class=\"mc-combobox__input\">\n  <button\n    #triggerBtn\n    type=\"button\"\n    class=\"mc-combobox__control\"\n    role=\"combobox\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId\"\n    [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    @if (displayValue()) {\n    <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n    } @else {\n    <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n    }\n  </button>\n\n  <!-- Counter (compact + multiple) -->\n  @if (multiple() && compact() && selectedCount() > 0) {\n  <span class=\"mc-combobox__counter\" aria-live=\"polite\"> {{ selectedCount() }} selected </span>\n  }\n\n  <!-- Clear button -->\n  @if (showClear()) {\n  <button\n    type=\"button\"\n    class=\"mc-combobox__clear\"\n    aria-label=\"Clear selection\"\n    (click)=\"onClear($event)\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      height=\"24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </button>\n  }\n\n  <!-- Chevron -->\n  <button\n    type=\"button\"\n    class=\"mc-combobox__icon\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (click)=\"toggle()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\">\n      <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\" fill=\"currentColor\" />\n    </svg>\n  </button>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN                                                     -->\n<!-- ====================================================================== -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n  (backdropClick)=\"onOverlayOutsideClick()\"\n  (attach)=\"onOverlayAttached()\"\n>\n  <div\n    class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <!-- Search -->\n    @if (searchable()) {\n    <div class=\"mc-option-listbox__search mc-text-input mc-text-input--s\">\n      <svg\n        class=\"mc-text-input__icon\"\n        height=\"20\"\n        width=\"20\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"mc-text-input__control\"\n        placeholder=\"Find an option...\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"listboxId\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    </div>\n    <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Actions (multiple only) -->\n    @if (showActions() && multiple()) {\n    <div class=\"mc-option-listbox__actions\">\n      <button\n        class=\"mc-button mc-button--ghost mc-button--accent mc-button--s\"\n        type=\"button\"\n        (click)=\"selectAll()\"\n      >\n        <span class=\"mc-button__label\">Select all</span>\n      </button>\n      <button\n        class=\"mc-button mc-button--ghost mc-button--s\"\n        type=\"button\"\n        (click)=\"clearSelection()\"\n      >\n        <span class=\"mc-button__label\">Clear</span>\n      </button>\n    </div>\n    <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Listbox with virtual scroll -->\n    <div\n      #listbox\n      role=\"listbox\"\n      [id]=\"listboxId\"\n      class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n      [attr.aria-multiselectable]=\"multiple() || null\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n      [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n      tabindex=\"-1\"\n    >\n      @if (filteredItems().length === 0) {\n      <div class=\"mc-option-listbox__empty\" role=\"presentation\" aria-live=\"polite\">\n        No results found\n      </div>\n      } @else {\n      <cdk-virtual-scroll-viewport\n        #viewport\n        [itemSize]=\"itemSizePx\"\n        [style.height.px]=\"viewportHeight()\"\n        class=\"mc-combobox__viewport\"\n      >\n        <ng-container\n          *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n        >\n          <!-- Section header -->\n          @if (isFlatSection(item)) {\n          <div\n            class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n            [class.mc-option-listbox__item--selectable]=\"item.checkable && multiple()\"\n            [class.mc-option-listbox__item--selected]=\"\n              item.checkable &&\n              multiple() &&\n              (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n            \"\n            role=\"presentation\"\n            (click)=\"item.checkable && multiple() ? toggleSection(item.title) : null\"\n          >\n            <div class=\"mc-option-listbox__label\">\n              <div class=\"mc-option-listbox__content\">\n                <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n              </div>\n              <div class=\"mc-option-listbox__spacer\"></div>\n              @if (item.checkable && multiple()) {\n              <span class=\"mc-option-listbox__checkbox\">\n                <svg viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" aria-hidden=\"true\">\n                  @if (isSectionPartiallySelected(item.title)) {\n                  <path d=\"M4 10h12\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" />\n                  } @else {\n                  <path\n                    d=\"M5 10l3 3 7-7\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    fill=\"none\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  }\n                </svg>\n              </span>\n              }\n            </div>\n          </div>\n          }\n\n          <!-- Option -->\n          @if (isFlatOption(item)) {\n          <div\n            role=\"option\"\n            [id]=\"uid + '-opt-' + i\"\n            [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n            [attr.aria-disabled]=\"item.disabled || null\"\n            class=\"mc-option-listbox__item\"\n            [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n            [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n            [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n            [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n            (click)=\"!item.disabled && selectOption($any(item.value))\"\n            (mouseenter)=\"focusedIndex.set(i)\"\n          >\n            <div class=\"mc-option-listbox__label\">\n              @if (item.icon) {\n              <div class=\"mc-option-listbox__prepend\">\n                <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n              </div>\n              }\n              <div class=\"mc-option-listbox__content\">\n                <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n                @if (item.content) {\n                <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n                }\n              </div>\n              <div class=\"mc-option-listbox__spacer\"></div>\n\n              <!-- Selection indicator -->\n              @if (multiple()) {\n              <span class=\"mc-option-listbox__checkbox\">\n                <svg viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" aria-hidden=\"true\">\n                  <path\n                    d=\"M5 10l3 3 7-7\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    fill=\"none\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n              } @else {\n              <svg\n                class=\"mc-option-listbox__selection-icon\"\n                viewBox=\"0 0 24 24\"\n                width=\"24\"\n                height=\"24\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              }\n            </div>\n          </div>\n          }\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.cdk-overlay-pane .mc-combobox__listbox{position:static;visibility:visible;opacity:1;width:100%}.cdk-overlay-pane .mc-combobox__listbox.mc-listbox__content{width:100%}.mc-combobox-backdrop{background:transparent}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "viewportEl", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ====================================================================== -->\n<!-- TRIGGER                                                                -->\n<!-- ====================================================================== -->\n<div class=\"mc-combobox__input\">\n  <button\n    #triggerBtn\n    type=\"button\"\n    class=\"mc-combobox__control\"\n    role=\"combobox\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId\"\n    [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    @if (displayValue()) {\n    <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n    } @else {\n    <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n    }\n  </button>\n\n  <!-- Counter (compact + multiple) -->\n  @if (multiple() && compact() && selectedCount() > 0) {\n  <span class=\"mc-combobox__counter\" aria-live=\"polite\">\n    {{ selectedCount() }} {{ selectedSuffix() }}\n  </span>\n  }\n\n  <!-- Clear button -->\n  @if (showClear()) {\n  <button\n    type=\"button\"\n    class=\"mc-combobox__clear\"\n    [attr.aria-label]=\"clearAriaLabel()\"\n    (click)=\"onClear($event)\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      height=\"24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </button>\n  }\n\n  <!-- Trigger loader -->\n  @if (loading()) {\n  <moz-loader size=\"s\" [appearance]=\"'accent'\" class=\"mc-combobox__loader\" />\n  }\n\n  <!-- Chevron -->\n  <button\n    type=\"button\"\n    class=\"mc-combobox__icon\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (click)=\"toggle()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\">\n      <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\" fill=\"currentColor\" />\n    </svg>\n  </button>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN                                                     -->\n<!-- ====================================================================== -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n  (backdropClick)=\"onOverlayOutsideClick()\"\n  (attach)=\"onOverlayAttached()\"\n>\n  <div\n    class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <!-- Search -->\n    @if (searchable()) {\n    <div class=\"mc-option-listbox__search mc-text-input mc-text-input--s\">\n      <svg\n        class=\"mc-text-input__icon\"\n        height=\"20\"\n        width=\"20\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"mc-text-input__control\"\n        [placeholder]=\"searchPlaceholder()\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"listboxId\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    </div>\n    <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Actions (multiple only) -->\n    @if (showActions() && multiple()) {\n    <div class=\"mc-option-listbox__actions\">\n      <button\n        class=\"mc-button mc-button--ghost mc-button--accent mc-button--s\"\n        type=\"button\"\n        (click)=\"selectAll()\"\n      >\n        <span class=\"mc-button__label\">{{ selectAllText() }}</span>\n      </button>\n      <button\n        class=\"mc-button mc-button--ghost mc-button--s\"\n        type=\"button\"\n        (click)=\"clearSelection()\"\n      >\n        <span class=\"mc-button__label\">{{ clearText() }}</span>\n      </button>\n    </div>\n    <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Listbox with virtual scroll -->\n    <div\n      #listbox\n      role=\"listbox\"\n      [id]=\"listboxId\"\n      class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n      [attr.aria-multiselectable]=\"multiple() || null\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n      [attr.aria-busy]=\"loading() || null\"\n      [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n      tabindex=\"-1\"\n    >\n      @if (loading()) {\n      <div class=\"mc-combobox__loading\" role=\"status\">\n        <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n      </div>\n      } @else if (filteredItems().length === 0) {\n      <div class=\"mc-option-listbox__empty\" role=\"presentation\" aria-live=\"polite\">\n        {{ noResultsText() }}\n      </div>\n      } @else {\n      <cdk-virtual-scroll-viewport\n        #viewport\n        [itemSize]=\"itemSizePx\"\n        [style.height.px]=\"viewportHeight()\"\n        class=\"mc-combobox__viewport\"\n      >\n        <ng-container\n          *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n        >\n          <!-- Section header -->\n          @if (isFlatSection(item)) {\n          <div\n            class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n            [class.mc-option-listbox__item--selectable]=\"item.checkable && multiple()\"\n            [class.mc-option-listbox__item--selected]=\"\n              item.checkable &&\n              multiple() &&\n              (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n            \"\n            role=\"presentation\"\n            (click)=\"item.checkable && multiple() ? toggleSection(item.title) : null\"\n          >\n            <div class=\"mc-option-listbox__label\">\n              <div class=\"mc-option-listbox__content\">\n                <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n              </div>\n              <div class=\"mc-option-listbox__spacer\"></div>\n              @if (item.checkable && multiple()) {\n              <span class=\"mc-option-listbox__checkbox\">\n                <svg viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" aria-hidden=\"true\">\n                  @if (isSectionPartiallySelected(item.title)) {\n                  <path d=\"M4 10h12\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" />\n                  } @else {\n                  <path\n                    d=\"M5 10l3 3 7-7\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    fill=\"none\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  }\n                </svg>\n              </span>\n              }\n            </div>\n          </div>\n          }\n\n          <!-- Option -->\n          @if (isFlatOption(item)) {\n          <div\n            role=\"option\"\n            [id]=\"uid + '-opt-' + i\"\n            [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n            [attr.aria-disabled]=\"item.disabled || null\"\n            class=\"mc-option-listbox__item\"\n            [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n            [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n            [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n            [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n            (click)=\"!item.disabled && selectOption($any(item.value))\"\n            (mouseenter)=\"focusedIndex.set(i)\"\n          >\n            <div class=\"mc-option-listbox__label\">\n              @if (item.icon) {\n              <div class=\"mc-option-listbox__prepend\">\n                <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n              </div>\n              }\n              <div class=\"mc-option-listbox__content\">\n                <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n                @if (item.content) {\n                <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n                }\n              </div>\n              <div class=\"mc-option-listbox__spacer\"></div>\n\n              <!-- Selection indicator -->\n              @if (multiple()) {\n              <span class=\"mc-option-listbox__checkbox\">\n                <svg viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" aria-hidden=\"true\">\n                  <path\n                    d=\"M5 10l3 3 7-7\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    fill=\"none\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n              } @else {\n              <svg\n                class=\"mc-option-listbox__selection-icon\"\n                viewBox=\"0 0 24 24\"\n                width=\"24\"\n                height=\"24\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              }\n            </div>\n          </div>\n          }\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.cdk-overlay-pane .mc-combobox__listbox{position:static;visibility:visible;opacity:1;width:100%}.cdk-overlay-pane .mc-combobox__listbox.mc-listbox__content{width:100%}.mc-combobox-backdrop{background:transparent}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MozLoaderComponent, selector: "moz-loader", inputs: ["appearance", "size", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: McComboboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'moz-combobox', imports: [CdkConnectedOverlay, CdkOverlayOrigin, ScrollingModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'moz-combobox', imports: [CdkConnectedOverlay, CdkOverlayOrigin, ScrollingModule, MozLoaderComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => McComboboxComponent),
@@ -5284,8 +5311,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         '[class.mc-combobox--disabled]': 'isEffectivelyDisabled()',
                         '[class.mc-combobox--readonly]': 'readonly()',
                         '[class.mc-combobox--s]': 'size() === "s"',
-                    }, template: "<!-- ====================================================================== -->\n<!-- TRIGGER                                                                -->\n<!-- ====================================================================== -->\n<div class=\"mc-combobox__input\">\n  <button\n    #triggerBtn\n    type=\"button\"\n    class=\"mc-combobox__control\"\n    role=\"combobox\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId\"\n    [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    @if (displayValue()) {\n    <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n    } @else {\n    <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n    }\n  </button>\n\n  <!-- Counter (compact + multiple) -->\n  @if (multiple() && compact() && selectedCount() > 0) {\n  <span class=\"mc-combobox__counter\" aria-live=\"polite\"> {{ selectedCount() }} selected </span>\n  }\n\n  <!-- Clear button -->\n  @if (showClear()) {\n  <button\n    type=\"button\"\n    class=\"mc-combobox__clear\"\n    aria-label=\"Clear selection\"\n    (click)=\"onClear($event)\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      height=\"24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </button>\n  }\n\n  <!-- Chevron -->\n  <button\n    type=\"button\"\n    class=\"mc-combobox__icon\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (click)=\"toggle()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\">\n      <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\" fill=\"currentColor\" />\n    </svg>\n  </button>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN                                                     -->\n<!-- ====================================================================== -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n  (backdropClick)=\"onOverlayOutsideClick()\"\n  (attach)=\"onOverlayAttached()\"\n>\n  <div\n    class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <!-- Search -->\n    @if (searchable()) {\n    <div class=\"mc-option-listbox__search mc-text-input mc-text-input--s\">\n      <svg\n        class=\"mc-text-input__icon\"\n        height=\"20\"\n        width=\"20\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"mc-text-input__control\"\n        placeholder=\"Find an option...\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"listboxId\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    </div>\n    <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Actions (multiple only) -->\n    @if (showActions() && multiple()) {\n    <div class=\"mc-option-listbox__actions\">\n      <button\n        class=\"mc-button mc-button--ghost mc-button--accent mc-button--s\"\n        type=\"button\"\n        (click)=\"selectAll()\"\n      >\n        <span class=\"mc-button__label\">Select all</span>\n      </button>\n      <button\n        class=\"mc-button mc-button--ghost mc-button--s\"\n        type=\"button\"\n        (click)=\"clearSelection()\"\n      >\n        <span class=\"mc-button__label\">Clear</span>\n      </button>\n    </div>\n    <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Listbox with virtual scroll -->\n    <div\n      #listbox\n      role=\"listbox\"\n      [id]=\"listboxId\"\n      class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n      [attr.aria-multiselectable]=\"multiple() || null\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n      [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n      tabindex=\"-1\"\n    >\n      @if (filteredItems().length === 0) {\n      <div class=\"mc-option-listbox__empty\" role=\"presentation\" aria-live=\"polite\">\n        No results found\n      </div>\n      } @else {\n      <cdk-virtual-scroll-viewport\n        #viewport\n        [itemSize]=\"itemSizePx\"\n        [style.height.px]=\"viewportHeight()\"\n        class=\"mc-combobox__viewport\"\n      >\n        <ng-container\n          *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n        >\n          <!-- Section header -->\n          @if (isFlatSection(item)) {\n          <div\n            class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n            [class.mc-option-listbox__item--selectable]=\"item.checkable && multiple()\"\n            [class.mc-option-listbox__item--selected]=\"\n              item.checkable &&\n              multiple() &&\n              (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n            \"\n            role=\"presentation\"\n            (click)=\"item.checkable && multiple() ? toggleSection(item.title) : null\"\n          >\n            <div class=\"mc-option-listbox__label\">\n              <div class=\"mc-option-listbox__content\">\n                <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n              </div>\n              <div class=\"mc-option-listbox__spacer\"></div>\n              @if (item.checkable && multiple()) {\n              <span class=\"mc-option-listbox__checkbox\">\n                <svg viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" aria-hidden=\"true\">\n                  @if (isSectionPartiallySelected(item.title)) {\n                  <path d=\"M4 10h12\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" />\n                  } @else {\n                  <path\n                    d=\"M5 10l3 3 7-7\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    fill=\"none\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  }\n                </svg>\n              </span>\n              }\n            </div>\n          </div>\n          }\n\n          <!-- Option -->\n          @if (isFlatOption(item)) {\n          <div\n            role=\"option\"\n            [id]=\"uid + '-opt-' + i\"\n            [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n            [attr.aria-disabled]=\"item.disabled || null\"\n            class=\"mc-option-listbox__item\"\n            [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n            [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n            [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n            [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n            (click)=\"!item.disabled && selectOption($any(item.value))\"\n            (mouseenter)=\"focusedIndex.set(i)\"\n          >\n            <div class=\"mc-option-listbox__label\">\n              @if (item.icon) {\n              <div class=\"mc-option-listbox__prepend\">\n                <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n              </div>\n              }\n              <div class=\"mc-option-listbox__content\">\n                <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n                @if (item.content) {\n                <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n                }\n              </div>\n              <div class=\"mc-option-listbox__spacer\"></div>\n\n              <!-- Selection indicator -->\n              @if (multiple()) {\n              <span class=\"mc-option-listbox__checkbox\">\n                <svg viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" aria-hidden=\"true\">\n                  <path\n                    d=\"M5 10l3 3 7-7\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    fill=\"none\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n              } @else {\n              <svg\n                class=\"mc-option-listbox__selection-icon\"\n                viewBox=\"0 0 24 24\"\n                width=\"24\"\n                height=\"24\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              }\n            </div>\n          </div>\n          }\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.cdk-overlay-pane .mc-combobox__listbox{position:static;visibility:visible;opacity:1;width:100%}.cdk-overlay-pane .mc-combobox__listbox.mc-listbox__content{width:100%}.mc-combobox-backdrop{background:transparent}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerBtn', { isSignal: true }] }], searchInputEl: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], viewportEl: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }] } });
+                    }, template: "<!-- ====================================================================== -->\n<!-- TRIGGER                                                                -->\n<!-- ====================================================================== -->\n<div class=\"mc-combobox__input\">\n  <button\n    #triggerBtn\n    type=\"button\"\n    class=\"mc-combobox__control\"\n    role=\"combobox\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"listboxId\"\n    [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    @if (displayValue()) {\n    <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n    } @else {\n    <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n    }\n  </button>\n\n  <!-- Counter (compact + multiple) -->\n  @if (multiple() && compact() && selectedCount() > 0) {\n  <span class=\"mc-combobox__counter\" aria-live=\"polite\">\n    {{ selectedCount() }} {{ selectedSuffix() }}\n  </span>\n  }\n\n  <!-- Clear button -->\n  @if (showClear()) {\n  <button\n    type=\"button\"\n    class=\"mc-combobox__clear\"\n    [attr.aria-label]=\"clearAriaLabel()\"\n    (click)=\"onClear($event)\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      height=\"24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  </button>\n  }\n\n  <!-- Trigger loader -->\n  @if (loading()) {\n  <moz-loader size=\"s\" [appearance]=\"'accent'\" class=\"mc-combobox__loader\" />\n  }\n\n  <!-- Chevron -->\n  <button\n    type=\"button\"\n    class=\"mc-combobox__icon\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    (click)=\"toggle()\"\n  >\n    <svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\">\n      <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\" fill=\"currentColor\" />\n    </svg>\n  </button>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN                                                     -->\n<!-- ====================================================================== -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n  (backdropClick)=\"onOverlayOutsideClick()\"\n  (attach)=\"onOverlayAttached()\"\n>\n  <div\n    class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <!-- Search -->\n    @if (searchable()) {\n    <div class=\"mc-option-listbox__search mc-text-input mc-text-input--s\">\n      <svg\n        class=\"mc-text-input__icon\"\n        height=\"20\"\n        width=\"20\"\n        viewBox=\"0 0 24 24\"\n        aria-hidden=\"true\"\n      >\n        <path\n          d=\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"mc-text-input__control\"\n        [placeholder]=\"searchPlaceholder()\"\n        autocomplete=\"off\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"listboxId\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    </div>\n    <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Actions (multiple only) -->\n    @if (showActions() && multiple()) {\n    <div class=\"mc-option-listbox__actions\">\n      <button\n        class=\"mc-button mc-button--ghost mc-button--accent mc-button--s\"\n        type=\"button\"\n        (click)=\"selectAll()\"\n      >\n        <span class=\"mc-button__label\">{{ selectAllText() }}</span>\n      </button>\n      <button\n        class=\"mc-button mc-button--ghost mc-button--s\"\n        type=\"button\"\n        (click)=\"clearSelection()\"\n      >\n        <span class=\"mc-button__label\">{{ clearText() }}</span>\n      </button>\n    </div>\n    <hr class=\"mc-option-listbox__separator\" />\n    }\n\n    <!-- Listbox with virtual scroll -->\n    <div\n      #listbox\n      role=\"listbox\"\n      [id]=\"listboxId\"\n      class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n      [attr.aria-multiselectable]=\"multiple() || null\"\n      [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n      [attr.aria-busy]=\"loading() || null\"\n      [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? uid + '-opt-' + focusedIndex() : null\"\n      tabindex=\"-1\"\n    >\n      @if (loading()) {\n      <div class=\"mc-combobox__loading\" role=\"status\">\n        <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n      </div>\n      } @else if (filteredItems().length === 0) {\n      <div class=\"mc-option-listbox__empty\" role=\"presentation\" aria-live=\"polite\">\n        {{ noResultsText() }}\n      </div>\n      } @else {\n      <cdk-virtual-scroll-viewport\n        #viewport\n        [itemSize]=\"itemSizePx\"\n        [style.height.px]=\"viewportHeight()\"\n        class=\"mc-combobox__viewport\"\n      >\n        <ng-container\n          *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n        >\n          <!-- Section header -->\n          @if (isFlatSection(item)) {\n          <div\n            class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n            [class.mc-option-listbox__item--selectable]=\"item.checkable && multiple()\"\n            [class.mc-option-listbox__item--selected]=\"\n              item.checkable &&\n              multiple() &&\n              (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n            \"\n            role=\"presentation\"\n            (click)=\"item.checkable && multiple() ? toggleSection(item.title) : null\"\n          >\n            <div class=\"mc-option-listbox__label\">\n              <div class=\"mc-option-listbox__content\">\n                <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n              </div>\n              <div class=\"mc-option-listbox__spacer\"></div>\n              @if (item.checkable && multiple()) {\n              <span class=\"mc-option-listbox__checkbox\">\n                <svg viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" aria-hidden=\"true\">\n                  @if (isSectionPartiallySelected(item.title)) {\n                  <path d=\"M4 10h12\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" />\n                  } @else {\n                  <path\n                    d=\"M5 10l3 3 7-7\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    fill=\"none\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  }\n                </svg>\n              </span>\n              }\n            </div>\n          </div>\n          }\n\n          <!-- Option -->\n          @if (isFlatOption(item)) {\n          <div\n            role=\"option\"\n            [id]=\"uid + '-opt-' + i\"\n            [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n            [attr.aria-disabled]=\"item.disabled || null\"\n            class=\"mc-option-listbox__item\"\n            [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n            [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n            [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n            [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n            (click)=\"!item.disabled && selectOption($any(item.value))\"\n            (mouseenter)=\"focusedIndex.set(i)\"\n          >\n            <div class=\"mc-option-listbox__label\">\n              @if (item.icon) {\n              <div class=\"mc-option-listbox__prepend\">\n                <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n              </div>\n              }\n              <div class=\"mc-option-listbox__content\">\n                <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n                @if (item.content) {\n                <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n                }\n              </div>\n              <div class=\"mc-option-listbox__spacer\"></div>\n\n              <!-- Selection indicator -->\n              @if (multiple()) {\n              <span class=\"mc-option-listbox__checkbox\">\n                <svg viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" aria-hidden=\"true\">\n                  <path\n                    d=\"M5 10l3 3 7-7\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    fill=\"none\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n              } @else {\n              <svg\n                class=\"mc-option-listbox__selection-icon\"\n                viewBox=\"0 0 24 24\"\n                width=\"24\"\n                height=\"24\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              }\n            </div>\n          </div>\n          }\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.cdk-overlay-pane .mc-combobox__listbox{position:static;visibility:visible;opacity:1;width:100%}.cdk-overlay-pane .mc-combobox__listbox.mc-listbox__content{width:100%}.mc-combobox-backdrop{background:transparent}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], clearText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearText", required: false }] }], selectedSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedSuffix", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerBtn', { isSignal: true }] }], searchInputEl: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], viewportEl: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }] } });
 
 /**
  * Harness for a single option inside the combobox dropdown.