@crowdfarming/oliva-ds 1.28.0-rc.7 → 1.28.1

package/fesm2022/crowdfarming-oliva-ds.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, Output, input, computed, output, signal, effect, forwardRef, inject, ElementRef, PLATFORM_ID, HostListener, ViewChild, Directive, viewChild, ApplicationRef, Injector, createComponent, Injectable, model, HostBinding } from '@angular/core';
+import { Input, Component, EventEmitter, Output, input, computed, output, signal, effect, forwardRef, inject, ElementRef, ViewContainerRef, ApplicationRef, PLATFORM_ID, DestroyRef, TemplateRef, ContentChild, ViewChild, HostListener, Directive, ViewEncapsulation, viewChild, Injector, createComponent, Injectable, model, HostBinding } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { CommonModule, NgClass, isPlatformBrowser, NgStyle } from '@angular/common';
+import { CommonModule, NgClass, isPlatformBrowser, NgStyle, NgTemplateOutlet } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
 import * as i1$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
+import { TemplatePortal, DomPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/portal';
 import { RouterLink } from '@angular/router';
-import { ComponentPortal } from '@angular/cdk/portal';
 import * as i1$3 from '@angular/cdk/overlay';
 
 // Auto-generated icons from Figma
@@ -2286,11 +2286,11 @@ class IconComponent {
         this.iconSvg = this.sanitizer.bypassSecurityTrustHtml(svgString);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconComponent, isStandalone: true, selector: "lib-icon", inputs: { size: "size", icon: "icon", name: "name", color: "color" }, ngImport: i0, template: "<div\n  class=\"lib-icon\"\n  [ngClass]=\"size\"\n  [innerHTML]=\"iconSvg\"\n></div>\n", styles: [":host{display:contents}.lib-icon{display:flex;pointer-events:none}.lib-icon.lg{height:1.5rem;width:1.5rem}.lib-icon.md{height:1.25rem;width:1.25rem}.lib-icon.sm{height:1rem;width:1rem}.lib-icon.xs{height:.875rem;width:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconComponent, isStandalone: true, selector: "lib-icon", inputs: { size: "size", icon: "icon", name: "name", color: "color" }, ngImport: i0, template: "<div\n  class=\"lib-icon\"\n  [ngClass]=\"size\"\n  [innerHTML]=\"iconSvg\"\n></div>\n", styles: [":host{display:contents}.lib-icon{display:flex;flex-shrink:0;pointer-events:none}.lib-icon.lg{height:1.5rem;width:1.5rem}.lib-icon.md{height:1.25rem;width:1.25rem}.lib-icon.sm{height:1rem;width:1rem}.lib-icon.xs{height:.875rem;width:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-icon', imports: [CommonModule], template: "<div\n  class=\"lib-icon\"\n  [ngClass]=\"size\"\n  [innerHTML]=\"iconSvg\"\n></div>\n", styles: [":host{display:contents}.lib-icon{display:flex;pointer-events:none}.lib-icon.lg{height:1.5rem;width:1.5rem}.lib-icon.md{height:1.25rem;width:1.25rem}.lib-icon.sm{height:1rem;width:1rem}.lib-icon.xs{height:.875rem;width:.875rem}\n"] }]
+            args: [{ selector: 'lib-icon', imports: [CommonModule], template: "<div\n  class=\"lib-icon\"\n  [ngClass]=\"size\"\n  [innerHTML]=\"iconSvg\"\n></div>\n", styles: [":host{display:contents}.lib-icon{display:flex;flex-shrink:0;pointer-events:none}.lib-icon.lg{height:1.5rem;width:1.5rem}.lib-icon.md{height:1.25rem;width:1.25rem}.lib-icon.sm{height:1rem;width:1rem}.lib-icon.xs{height:.875rem;width:.875rem}\n"] }]
         }], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { size: [{
                 type: Input
             }], icon: [{
@@ -2342,11 +2342,11 @@ class AccordionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AccordionComponent, isStandalone: true, selector: "lib-accordion", inputs: { id: "id", expanded: "expanded", size: "size", title: "title", showText: "showText", text: "text", showSlot: "showSlot", swapTemplate: "swapTemplate", mode: "mode", customIcon: "customIcon", radioName: "radioName", radioChecked: "radioChecked" }, outputs: { expandedChange: "expandedChange", toggled: "toggled", radioChange: "radioChange" }, ngImport: i0, template: "<div\n  class=\"c-accordion\"\n  [class.c-accordion--expanded]=\"expanded\"\n  [class.c-accordion--sm]=\"size==='sm'\"\n  [class.c-accordion--md]=\"size==='md'\"\n  [class.c-accordion--choice]=\"mode==='choice'\"\n>\n  <div\n    class=\"c-accordion__header\"\n    [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n    [id]=\"id + '-header'\"\n    [tabindex]=\"0\"\n    [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n    [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle()\"\n  >\n    <!-- Radio input for choice mode -->\n    <input\n      *ngIf=\"mode === 'choice'\"\n      type=\"radio\"\n      class=\"c-accordion__radio\"\n      [class.c-accordion__radio--checked]=\"radioChecked\"\n      [id]=\"id + '-radio'\"\n      [name]=\"radioName || ''\"\n      [checked]=\"radioChecked\"\n      tabindex=\"-1\"\n      (click)=\"radioChange.emit(true)\"\n    />\n\n    <span class=\"c-accordion__title\">{{ title }}</span>\n\n    <!-- Default arrow icons for accordion mode -->\n    <span class=\"c-accordion__arrow\" *ngIf=\"mode === 'accordion' && !expanded\" [class.open]=\"expanded\">\n        <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n    </span>\n    <span class=\"c-accordion__arrow\" *ngIf=\"mode === 'accordion' && expanded\" [class.open]=\"expanded\">\n        <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n    </span>\n\n    <!-- Custom icon for choice mode -->\n    <span class=\"c-accordion__custom-icon\" *ngIf=\"mode === 'choice' && customIcon\">\n        <lib-icon [name]=\"customIcon\" size=\"lg\" iconBefore />\n    </span>\n  </div>\n\n  <div\n    class=\"c-accordion__content\"\n    *ngIf=\"expanded\"\n    [id]=\"id + '-content'\"\n    [attr.role]=\"mode === 'choice' ? 'region' : 'region'\"\n    [attr.aria-labelledby]=\"mode === 'choice' ? id + '-radio' : id + '-header'\"\n  >\n    <ng-container *ngIf=\"swapTemplate; else normalContent\">\n      <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #normalContent>\n      <div class=\"c-accordion__text\" *ngIf=\"showText\">\n        {{ text }}\n      </div>\n      @if (showSlot) {\n        <ng-content></ng-content>\n      }\n    </ng-template>\n  </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft, #d6e0df)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box;gap:var(--space-component-gap-md, .5rem)}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus:not(:focus-visible){outline:none;box-shadow:none}.c-accordion__header:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:active{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-accordion__arrow{display:contents}.c-accordion__radio{margin:0 var(--space-component-gap-sm, .25rem) 0 0;cursor:pointer;appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;width:1rem;height:1rem;border:2px solid var(--color-core-border-soft, #d6e0df);border-radius:50%;background-color:var(--color-textfield-background-default, #f7f7f7);position:relative;transition:all .2s ease;flex-shrink:0}.c-accordion__radio:hover{border-color:var(--color-core-border-default, #070707)}.c-accordion__radio:focus{outline:none;box-shadow:none}.c-accordion__radio:checked,.c-accordion__radio[checked=true],.c-accordion__radio[checked],.c-accordion__radio.c-accordion__radio--checked{background-color:var(--color-action-primary-selected-background-default, #070707)!important;border-color:var(--color-action-primary-selected-background-default, #070707)!important}.c-accordion__radio:checked:after,.c-accordion__radio[checked=true]:after,.c-accordion__radio[checked]:after,.c-accordion__radio.c-accordion__radio--checked:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;background-color:var(--color-action-primary-selected-content-default, #ffffff)!important;border-radius:50%}.c-accordion__custom-icon{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AccordionComponent, isStandalone: true, selector: "lib-accordion", inputs: { id: "id", expanded: "expanded", size: "size", title: "title", showText: "showText", text: "text", showSlot: "showSlot", swapTemplate: "swapTemplate", mode: "mode", customIcon: "customIcon", radioName: "radioName", radioChecked: "radioChecked" }, outputs: { expandedChange: "expandedChange", toggled: "toggled", radioChange: "radioChange" }, ngImport: i0, template: "<div\n  class=\"c-accordion\"\n  [class.c-accordion--expanded]=\"expanded\"\n  [class.c-accordion--sm]=\"size === 'sm'\"\n  [class.c-accordion--md]=\"size === 'md'\"\n  [class.c-accordion--choice]=\"mode === 'choice'\"\n>\n  <div\n    class=\"c-accordion__header\"\n    [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n    [id]=\"id + '-header'\"\n    [tabindex]=\"0\"\n    [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n    [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle()\"\n  >\n    <span class=\"c-accordion__title\">{{ title }}</span>\n\n    <!-- Default arrow icons for accordion mode -->\n    <span\n      class=\"c-accordion__arrow\"\n      *ngIf=\"mode === 'accordion' && !expanded\"\n      [class.open]=\"expanded\"\n    >\n      <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n    </span>\n    <span\n      class=\"c-accordion__arrow\"\n      *ngIf=\"mode === 'accordion' && expanded\"\n      [class.open]=\"expanded\"\n    >\n      <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n    </span>\n\n    <!-- Custom icon for choice mode -->\n    <span\n      class=\"c-accordion__custom-icon\"\n      *ngIf=\"mode === 'choice' && customIcon\"\n    >\n      <lib-icon [name]=\"customIcon\" size=\"lg\" iconBefore />\n    </span>\n\n    <!-- Radio input for choice mode -->\n    <input\n      *ngIf=\"mode === 'choice'\"\n      type=\"radio\"\n      class=\"c-accordion__radio\"\n      [class.c-accordion__radio--checked]=\"radioChecked\"\n      [id]=\"id + '-radio'\"\n      [name]=\"radioName || ''\"\n      [checked]=\"radioChecked\"\n      tabindex=\"-1\"\n      (click)=\"radioChange.emit(true)\"\n    />\n  </div>\n\n  <div\n    class=\"c-accordion__content\"\n    *ngIf=\"expanded\"\n    [id]=\"id + '-content'\"\n    [attr.role]=\"mode === 'choice' ? 'region' : 'region'\"\n    [attr.aria-labelledby]=\"mode === 'choice' ? id + '-radio' : id + '-header'\"\n  >\n    <ng-container *ngIf=\"swapTemplate; else normalContent\">\n      <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #normalContent>\n      <div class=\"c-accordion__text\" *ngIf=\"showText\">\n        {{ text }}\n      </div>\n      @if (showSlot) {\n      <ng-content></ng-content>\n      }\n    </ng-template>\n  </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft, #d6e0df)}.c-accordion--choice .c-accordion__header{padding:var(--space-component-padding-lg, 1rem)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box;gap:var(--space-component-gap-md, .5rem)}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus:not(:focus-visible){outline:none;box-shadow:none}.c-accordion__header:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:active{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-accordion__arrow{display:contents}.c-accordion__radio{margin:0 var(--space-component-gap-sm, .25rem) 0 0;cursor:pointer;appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;width:1rem;height:1rem;border:2px solid var(--color-core-border-soft, #d6e0df);border-radius:50%;background-color:var(--color-textfield-background-default, #f7f7f7);position:relative;transition:all .2s ease;flex-shrink:0}.c-accordion__radio:hover{border-color:var(--color-core-border-default, #070707)}.c-accordion__radio:focus{outline:none;box-shadow:none}.c-accordion__radio:checked,.c-accordion__radio[checked=true],.c-accordion__radio[checked],.c-accordion__radio.c-accordion__radio--checked{background-color:var(--color-action-primary-selected-background-default, #070707)!important;border-color:var(--color-action-primary-selected-background-default, #070707)!important}.c-accordion__radio:checked:after,.c-accordion__radio[checked=true]:after,.c-accordion__radio[checked]:after,.c-accordion__radio.c-accordion__radio--checked:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;background-color:var(--color-action-primary-selected-content-default, #ffffff)!important;border-radius:50%}.c-accordion__custom-icon{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-accordion', standalone: true, imports: [CommonModule, IconComponent], template: "<div\n  class=\"c-accordion\"\n  [class.c-accordion--expanded]=\"expanded\"\n  [class.c-accordion--sm]=\"size==='sm'\"\n  [class.c-accordion--md]=\"size==='md'\"\n  [class.c-accordion--choice]=\"mode==='choice'\"\n>\n  <div\n    class=\"c-accordion__header\"\n    [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n    [id]=\"id + '-header'\"\n    [tabindex]=\"0\"\n    [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n    [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle()\"\n  >\n    <!-- Radio input for choice mode -->\n    <input\n      *ngIf=\"mode === 'choice'\"\n      type=\"radio\"\n      class=\"c-accordion__radio\"\n      [class.c-accordion__radio--checked]=\"radioChecked\"\n      [id]=\"id + '-radio'\"\n      [name]=\"radioName || ''\"\n      [checked]=\"radioChecked\"\n      tabindex=\"-1\"\n      (click)=\"radioChange.emit(true)\"\n    />\n\n    <span class=\"c-accordion__title\">{{ title }}</span>\n\n    <!-- Default arrow icons for accordion mode -->\n    <span class=\"c-accordion__arrow\" *ngIf=\"mode === 'accordion' && !expanded\" [class.open]=\"expanded\">\n        <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n    </span>\n    <span class=\"c-accordion__arrow\" *ngIf=\"mode === 'accordion' && expanded\" [class.open]=\"expanded\">\n        <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n    </span>\n\n    <!-- Custom icon for choice mode -->\n    <span class=\"c-accordion__custom-icon\" *ngIf=\"mode === 'choice' && customIcon\">\n        <lib-icon [name]=\"customIcon\" size=\"lg\" iconBefore />\n    </span>\n  </div>\n\n  <div\n    class=\"c-accordion__content\"\n    *ngIf=\"expanded\"\n    [id]=\"id + '-content'\"\n    [attr.role]=\"mode === 'choice' ? 'region' : 'region'\"\n    [attr.aria-labelledby]=\"mode === 'choice' ? id + '-radio' : id + '-header'\"\n  >\n    <ng-container *ngIf=\"swapTemplate; else normalContent\">\n      <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #normalContent>\n      <div class=\"c-accordion__text\" *ngIf=\"showText\">\n        {{ text }}\n      </div>\n      @if (showSlot) {\n        <ng-content></ng-content>\n      }\n    </ng-template>\n  </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft, #d6e0df)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box;gap:var(--space-component-gap-md, .5rem)}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus:not(:focus-visible){outline:none;box-shadow:none}.c-accordion__header:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:active{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-accordion__arrow{display:contents}.c-accordion__radio{margin:0 var(--space-component-gap-sm, .25rem) 0 0;cursor:pointer;appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;width:1rem;height:1rem;border:2px solid var(--color-core-border-soft, #d6e0df);border-radius:50%;background-color:var(--color-textfield-background-default, #f7f7f7);position:relative;transition:all .2s ease;flex-shrink:0}.c-accordion__radio:hover{border-color:var(--color-core-border-default, #070707)}.c-accordion__radio:focus{outline:none;box-shadow:none}.c-accordion__radio:checked,.c-accordion__radio[checked=true],.c-accordion__radio[checked],.c-accordion__radio.c-accordion__radio--checked{background-color:var(--color-action-primary-selected-background-default, #070707)!important;border-color:var(--color-action-primary-selected-background-default, #070707)!important}.c-accordion__radio:checked:after,.c-accordion__radio[checked=true]:after,.c-accordion__radio[checked]:after,.c-accordion__radio.c-accordion__radio--checked:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;background-color:var(--color-action-primary-selected-content-default, #ffffff)!important;border-radius:50%}.c-accordion__custom-icon{display:contents}\n"] }]
+            args: [{ selector: 'lib-accordion', standalone: true, imports: [CommonModule, IconComponent], template: "<div\n  class=\"c-accordion\"\n  [class.c-accordion--expanded]=\"expanded\"\n  [class.c-accordion--sm]=\"size === 'sm'\"\n  [class.c-accordion--md]=\"size === 'md'\"\n  [class.c-accordion--choice]=\"mode === 'choice'\"\n>\n  <div\n    class=\"c-accordion__header\"\n    [attr.role]=\"mode === 'choice' ? 'none' : 'button'\"\n    [id]=\"id + '-header'\"\n    [tabindex]=\"0\"\n    [attr.aria-expanded]=\"mode === 'choice' ? null : expanded\"\n    [attr.aria-controls]=\"mode === 'choice' ? null : id + '-content'\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"toggle()\"\n    (keydown.space)=\"toggle()\"\n  >\n    <span class=\"c-accordion__title\">{{ title }}</span>\n\n    <!-- Default arrow icons for accordion mode -->\n    <span\n      class=\"c-accordion__arrow\"\n      *ngIf=\"mode === 'accordion' && !expanded\"\n      [class.open]=\"expanded\"\n    >\n      <lib-icon name=\"caretdown-regular\" size=\"lg\" iconBefore />\n    </span>\n    <span\n      class=\"c-accordion__arrow\"\n      *ngIf=\"mode === 'accordion' && expanded\"\n      [class.open]=\"expanded\"\n    >\n      <lib-icon name=\"caretup-regular\" size=\"lg\" iconBefore />\n    </span>\n\n    <!-- Custom icon for choice mode -->\n    <span\n      class=\"c-accordion__custom-icon\"\n      *ngIf=\"mode === 'choice' && customIcon\"\n    >\n      <lib-icon [name]=\"customIcon\" size=\"lg\" iconBefore />\n    </span>\n\n    <!-- Radio input for choice mode -->\n    <input\n      *ngIf=\"mode === 'choice'\"\n      type=\"radio\"\n      class=\"c-accordion__radio\"\n      [class.c-accordion__radio--checked]=\"radioChecked\"\n      [id]=\"id + '-radio'\"\n      [name]=\"radioName || ''\"\n      [checked]=\"radioChecked\"\n      tabindex=\"-1\"\n      (click)=\"radioChange.emit(true)\"\n    />\n  </div>\n\n  <div\n    class=\"c-accordion__content\"\n    *ngIf=\"expanded\"\n    [id]=\"id + '-content'\"\n    [attr.role]=\"mode === 'choice' ? 'region' : 'region'\"\n    [attr.aria-labelledby]=\"mode === 'choice' ? id + '-radio' : id + '-header'\"\n  >\n    <ng-container *ngIf=\"swapTemplate; else normalContent\">\n      <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #normalContent>\n      <div class=\"c-accordion__text\" *ngIf=\"showText\">\n        {{ text }}\n      </div>\n      @if (showSlot) {\n      <ng-content></ng-content>\n      }\n    </ng-template>\n  </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft, #d6e0df)}.c-accordion--choice .c-accordion__header{padding:var(--space-component-padding-lg, 1rem)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box;gap:var(--space-component-gap-md, .5rem)}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus:not(:focus-visible){outline:none;box-shadow:none}.c-accordion__header:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:active{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-accordion__arrow{display:contents}.c-accordion__radio{margin:0 var(--space-component-gap-sm, .25rem) 0 0;cursor:pointer;appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;width:1rem;height:1rem;border:2px solid var(--color-core-border-soft, #d6e0df);border-radius:50%;background-color:var(--color-textfield-background-default, #f7f7f7);position:relative;transition:all .2s ease;flex-shrink:0}.c-accordion__radio:hover{border-color:var(--color-core-border-default, #070707)}.c-accordion__radio:focus{outline:none;box-shadow:none}.c-accordion__radio:checked,.c-accordion__radio[checked=true],.c-accordion__radio[checked],.c-accordion__radio.c-accordion__radio--checked{background-color:var(--color-action-primary-selected-background-default, #070707)!important;border-color:var(--color-action-primary-selected-background-default, #070707)!important}.c-accordion__radio:checked:after,.c-accordion__radio[checked=true]:after,.c-accordion__radio[checked]:after,.c-accordion__radio.c-accordion__radio--checked:after{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;background-color:var(--color-action-primary-selected-content-default, #ffffff)!important;border-radius:50%}.c-accordion__custom-icon{display:contents}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], expanded: [{
@@ -2957,7 +2957,7 @@ class CheckboxComponent {
                 useExisting: forwardRef(() => CheckboxComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n  <div class=\"c-checkbox__input-wrapper\">\n    <input\n      type=\"checkbox\"\n      [id]=\"name()\"\n      [ngClass]=\"inputClasses()\"\n      [checked]=\"isChecked()\"\n      [indeterminate]=\"isIndeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      (change)=\"handleChange($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n    />\n  </div>\n  @if(isSkeleton()) {\n  <div class=\"c-checkbox__label__skeleton\">\n    <span></span>\n  </div>\n  } @else { @if(label() || innerHTML()) {\n  <lib-input-label\n    size=\"md\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [required]=\"true\"\n    [for]=\"name()\"\n    [innerHTML]=\"innerHTML()\"\n  ></lib-input-label>\n  } }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }] });
+        ], ngImport: i0, template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n  <div class=\"c-checkbox__input-wrapper\">\n    <input\n      type=\"checkbox\"\n      [id]=\"name()\"\n      [ngClass]=\"inputClasses()\"\n      [checked]=\"isChecked()\"\n      [indeterminate]=\"isIndeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      (change)=\"handleChange($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n    />\n  </div>\n  @if(isSkeleton()) {\n  <div class=\"c-checkbox__label__skeleton\">\n    <span></span>\n  </div>\n  } @else { @if(label()) {\n  <lib-input-label\n    size=\"md\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [required]=\"true\"\n    [for]=\"name()\"\n    [innerHTML]=\"innerHTML()\"\n  ></lib-input-label>\n  } }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -2967,7 +2967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n  <div class=\"c-checkbox__input-wrapper\">\n    <input\n      type=\"checkbox\"\n      [id]=\"name()\"\n      [ngClass]=\"inputClasses()\"\n      [checked]=\"isChecked()\"\n      [indeterminate]=\"isIndeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      (change)=\"handleChange($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n    />\n  </div>\n  @if(isSkeleton()) {\n  <div class=\"c-checkbox__label__skeleton\">\n    <span></span>\n  </div>\n  } @else { @if(label() || innerHTML()) {\n  <lib-input-label\n    size=\"md\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [required]=\"true\"\n    [for]=\"name()\"\n    [innerHTML]=\"innerHTML()\"\n  ></lib-input-label>\n  } }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"] }]
+                    ], template: "<div [ngClass]=\"classes()\" class=\"c-checkbox\">\n  <div class=\"c-checkbox__input-wrapper\">\n    <input\n      type=\"checkbox\"\n      [id]=\"name()\"\n      [ngClass]=\"inputClasses()\"\n      [checked]=\"isChecked()\"\n      [indeterminate]=\"isIndeterminate()\"\n      [disabled]=\"isDisabled()\"\n      [name]=\"name()\"\n      [value]=\"value()\"\n      [attr.aria-label]=\"computedAriaLabel()\"\n      [attr.aria-checked]=\"ariaChecked()\"\n      (change)=\"handleChange($event)\"\n      (keydown)=\"handleKeyDown($event)\"\n    />\n  </div>\n  @if(isSkeleton()) {\n  <div class=\"c-checkbox__label__skeleton\">\n    <span></span>\n  </div>\n  } @else { @if(label()) {\n  <lib-input-label\n    size=\"md\"\n    [text]=\"label()\"\n    [disabled]=\"disabled()\"\n    [required]=\"true\"\n    [for]=\"name()\"\n    [innerHTML]=\"innerHTML()\"\n  ></lib-input-label>\n  } }\n</div>\n", styles: [".c-checkbox{display:flex;align-items:flex-start;gap:var(--space-component-gap-sm)}.c-checkbox__input-wrapper{height:var(--typography-label-md-default-line-height);display:flex;align-items:center}.c-checkbox__label{cursor:pointer}.c-checkbox__label__skeleton{width:64px;height:24px;display:flex;align-items:center}.c-checkbox__label__skeleton span{width:100%;height:8px;background-color:var(--color-effect-skeleton-default);border-radius:var(--size-border-radius-sm, 4px)}.c-checkbox--skeleton .c-checkbox__label{cursor:default;pointer-events:none}.c-checkbox input[type=checkbox]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929a99);background-color:var(--color-textfield-background-default);border-radius:var(--size-border-radius-sm, 4px);display:grid;place-content:center;cursor:pointer}.c-checkbox input[type=checkbox]:hover{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-hover, #7d8483)}.c-checkbox input[type=checkbox]:not(:disabled):not(.c-checkbox__input--skeleton):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-checkbox input[type=checkbox].c-checkbox__input--error{border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox].c-checkbox__input--error:checked,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate,.c-checkbox input[type=checkbox].c-checkbox__input--error:checked:hover,.c-checkbox input[type=checkbox].c-checkbox__input--error:indeterminate:hover{background-color:var(--color-feedback-danger-default, #ba2f1e);border-color:var(--color-feedback-danger-default, #ba2f1e)}.c-checkbox input[type=checkbox]:checked,.c-checkbox input[type=checkbox]:indeterminate{border-color:var(--color-action-primary-selected-background-default, #217870);background-color:var(--color-action-primary-selected-background-default, #217870)}.c-checkbox input[type=checkbox]:checked:hover,.c-checkbox input[type=checkbox]:indeterminate:hover{background-color:var(--color-action-primary-selected-background-hover, #19625b);border-color:var(--color-action-primary-selected-background-hover, #19625b)}.c-checkbox input[type=checkbox]:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:disabled+.c-checkbox__label{pointer-events:none;cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:disabled,.c-checkbox input[type=checkbox]:indeterminate:disabled{border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-disabled, #a6b0af);background:var(--color-textfield-background-disabled, rgba(0, 0, 0, .02));cursor:not-allowed}.c-checkbox input[type=checkbox]:checked:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}.c-checkbox input[type=checkbox]:indeterminate:before{content:\"\";width:10px;height:10px;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;clip-path:polygon(0% 38%,100% 38%,100% 62%,0 62%)}.c-checkbox input[type=checkbox]:checked:disabled:before,.c-checkbox input[type=checkbox]:indeterminate:disabled:before{box-shadow:inset 1em 1em #7d8483}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton{border-color:var(--color-effect-skeleton-soft);background-color:var(--color-textfield-background-disabled);cursor:not-allowed;pointer-events:none}.c-checkbox input[type=checkbox].c-checkbox__input--skeleton:before{content:none!important}.c-checkbox ::ng-deep lib-input-label span{cursor:pointer}\n"] }]
         }], ctorParameters: () => [] });
 
 class HelperTextComponent {
@@ -3145,7 +3145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }] });
 
 class OverlayComponent {
-    // Constants for positioning calculations
+    // Constants
     static MOBILE_BREAKPOINT = 768;
     static DROPDOWN_HEIGHT = 320;
     static DROPDOWN_GAP = 2;
@@ -3159,20 +3159,31 @@ class OverlayComponent {
     // Outputs
     opened = output();
     closed = output();
-    // Private signals
+    // Signals
     _isOpen = signal(false);
     _isClosing = signal(false);
     _isMobile = signal(false);
-    _needsFixedPosition = signal(false);
     _menuPosition = signal({
         top: 0,
         left: 0,
         width: OverlayComponent.DEFAULT_MENU_WIDTH,
     });
-    // Public computed signals
+    // Computed
     isOpen = this._isOpen.asReadonly();
     isClosing = this._isClosing.asReadonly();
-    // Computed class methods
+    getMenuClasses = computed(() => ['c-overlay__menu', `c-overlay__menu--${this.position()}`].join(' '));
+    getMenuStyles = computed(() => {
+        // On mobile we don't apply position styles, it's handled with CSS
+        if (this._isMobile()) {
+            return {};
+        }
+        const pos = this._menuPosition();
+        return {
+            width: `${pos.width}px`,
+            top: `${pos.top}px`,
+            left: `${pos.left}px`,
+        };
+    });
     getClasses = computed(() => {
         const classes = ['c-overlay'];
         if (this.isOpen()) {
@@ -3187,236 +3198,257 @@ class OverlayComponent {
         }
         return classes.join(' ');
     });
-    getMenuClasses = computed(() => {
-        const classes = ['c-overlay__menu'];
-        classes.push(`c-overlay__menu--${this.position()}`);
-        if (this._needsFixedPosition()) {
-            classes.push('c-overlay__menu--fixed');
-        }
-        return classes.join(' ');
-    });
-    getMenuStyles = computed(() => {
-        const position = this._menuPosition();
-        return {
-            width: this._needsFixedPosition()
-                ? `${position.width || OverlayComponent.DEFAULT_MENU_WIDTH}px`
-                : this._isMobile()
-                    ? '100%'
-                    : this.width(),
-            // When using fixed positioning, set explicit top/left values
-            // When using normal positioning, let CSS handle the positioning (undefined = no style applied)
-            top: this._needsFixedPosition() ? `${position.top}px` : undefined,
-            left: this._needsFixedPosition() ? `${position.left}px` : undefined,
-        };
-    });
-    // Element references
+    // Element refs
     elementRef = inject(ElementRef);
-    triggerButtonRef;
+    viewContainerRef = inject(ViewContainerRef);
+    applicationRef = inject(ApplicationRef);
     platformId = inject(PLATFORM_ID);
-    overlayMenu;
+    destroyRef = inject(DestroyRef);
+    triggerButtonRef;
+    portal;
+    portalOutlet;
+    portalContainer;
+    originalBodyOverflow;
+    menuTemplate;
+    contentTemplate;
+    footerTemplate;
     constructor() {
-        // Initialize mobile detection
         this.updateMobileDetection();
-        // Only add resize listener if running in browser (not in SSR)
         if (isPlatformBrowser(this.platformId)) {
             window.addEventListener('resize', () => this.updateMobileDetection());
         }
-        // Emit events when overlay state changes
         effect(() => {
-            if (this.isOpen()) {
+            if (this.isOpen())
                 this.opened.emit();
-            }
-            else if (!this.isOpen() && !this.isClosing()) {
+            else if (!this.isOpen() && !this.isClosing())
                 this.closed.emit();
+        });
+        // Cleanup when component is destroyed
+        this.destroyRef.onDestroy(() => {
+            if (this.isOpen() && this._isMobile()) {
+                this.unblockBodyScroll();
             }
         });
     }
-    // Mobile detection method
     updateMobileDetection() {
-        // Check if running in browser (not in SSR)
-        if (isPlatformBrowser(this.platformId)) {
-            this._isMobile.set(window.innerWidth <= OverlayComponent.MOBILE_BREAKPOINT);
-        }
-        else {
-            // Default to desktop view during SSR
-            this._isMobile.set(false);
-        }
+        this._isMobile.set(isPlatformBrowser(this.platformId)
+            ? window.innerWidth <= OverlayComponent.MOBILE_BREAKPOINT
+            : false);
     }
-    // Public methods for trigger directive
     setTriggerButton(element) {
         this.triggerButtonRef = element;
     }
     toggleOverlay() {
-        if (this.disabled()) {
+        if (this.disabled())
             return;
-        }
-        if (this.isOpen() && !this.isClosing()) {
+        if (this.isOpen() && !this.isClosing())
             this.closeOverlay();
-        }
-        else if (!this.isOpen() && !this.isClosing()) {
+        else if (!this.isOpen() && !this.isClosing())
             this.openOverlay();
-        }
+    }
+    onBackdropClick() {
+        this.closeOverlay();
+    }
+    onEscapeKey() {
+        this.closeOverlay();
     }
     openOverlay() {
         this._isClosing.set(false);
-        this.detectOverflowAndCalculatePosition();
+        this.updateMobileDetection();
+        // Calculate position only on desktop, but always create portal
+        if (!this._isMobile()) {
+            this.calculatePosition();
+        }
+        // Always create portal (both desktop and mobile)
+        this.createPortal();
+        // Block body scroll on mobile
+        if (this._isMobile()) {
+            this.blockBodyScroll();
+        }
         this._isOpen.set(true);
         this.addResizeListener();
     }
     closeOverlay() {
         this._isClosing.set(true);
         this.removeResizeListener();
+        // Unblock body scroll on mobile
+        if (this._isMobile()) {
+            this.unblockBodyScroll();
+        }
+        // Always destroy portal (both desktop and mobile)
+        this.destroyPortal();
         setTimeout(() => {
             this._isOpen.set(false);
             this._isClosing.set(false);
-        }, OverlayComponent.ANIMATION_DURATION); // Match animation duration
+        }, OverlayComponent.ANIMATION_DURATION);
     }
-    // Backdrop and keyboard handlers
-    onBackdropClick() {
+    onPortalClick = (event) => {
+        if (!this.isOpen() || this.isClosing())
+            return;
+        const target = event.target;
+        // Check if click is on the trigger button
+        const onTrigger = this.triggerButtonRef?.contains(target);
+        if (onTrigger) {
+            return; // Don't close if clicking on trigger
+        }
+        // Check if click is inside the menu
+        const menuEl = this.portalContainer?.querySelector('.c-overlay__menu');
+        const insideMenu = menuEl?.contains(target);
+        if (insideMenu) {
+            return; // Don't close if clicking inside menu
+        }
+        // If we get here, click is outside both trigger and menu
         this.closeOverlay();
+    };
+    calculatePosition() {
+        if (!this.triggerButtonRef)
+            return;
+        const rect = this.triggerButtonRef.getBoundingClientRect();
+        const menuWidth = this.parseWidth(rect.width);
+        const menuHeight = OverlayComponent.DROPDOWN_HEIGHT;
+        const gap = OverlayComponent.DROPDOWN_GAP;
+        let top = rect.bottom + gap;
+        if (window.innerHeight - rect.bottom < menuHeight &&
+            rect.top > rect.bottom) {
+            top = rect.top - menuHeight - gap;
+        }
+        let left = rect.left;
+        if (this.position() === 'right')
+            left = rect.right - menuWidth;
+        else if (this.position() === 'center')
+            left = rect.left + (rect.width - menuWidth) / 2;
+        // Clamp to viewport
+        top = Math.max(OverlayComponent.VIEWPORT_MARGIN, Math.min(top, window.innerHeight - menuHeight - OverlayComponent.VIEWPORT_MARGIN));
+        left = Math.max(OverlayComponent.VIEWPORT_MARGIN, Math.min(left, window.innerWidth - menuWidth - OverlayComponent.VIEWPORT_MARGIN));
+        this._menuPosition.set({ top, left, width: menuWidth });
+    }
+    parseWidth(triggerWidth) {
+        if (this.width() === 'stretch')
+            return triggerWidth;
+        const w = parseFloat(this.width());
+        return isNaN(w) ? OverlayComponent.DEFAULT_MENU_WIDTH : w;
     }
-    onEscapeKey() {
-        this.closeOverlay();
+    addResizeListener() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        window.addEventListener('resize', this.resizeHandler);
     }
-    // Host listeners
-    onClickOutside(event) {
-        if (this.isOpen() && !this.isClosing()) {
-            const clickedElement = event.target;
-            const isClickInsideOverlay = this.elementRef.nativeElement.contains(clickedElement);
-            const isClickOnTrigger = this.triggerButtonRef?.contains(clickedElement);
-            if (!isClickInsideOverlay && !isClickOnTrigger) {
-                this.closeOverlay();
-            }
-        }
+    removeResizeListener() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        window.removeEventListener('resize', this.resizeHandler);
     }
-    detectOverflowAndCalculatePosition() {
-        if (!this.triggerButtonRef || this._isMobile()) {
-            this._needsFixedPosition.set(false);
+    resizeHandler = () => {
+        if (!this.isOpen())
             return;
+        const wasMobile = this._isMobile();
+        this.updateMobileDetection();
+        const isNowMobile = this._isMobile();
+        // If mobile state changed, re-render the overlay
+        if (wasMobile !== isNowMobile) {
+            // Destroy and recreate portal to apply correct styles
+            this.destroyPortal();
+            this.createPortal();
+            // Recalculate position if now on desktop
+            if (!isNowMobile && this.triggerButtonRef) {
+                this.calculatePosition();
+            }
         }
-        const triggerRect = this.triggerButtonRef.getBoundingClientRect();
-        if (this.shouldUseFixedPositionForContainer(triggerRect)) {
-            this._needsFixedPosition.set(true);
-            this.calculateFixedPosition(triggerRect);
-            return;
+        else if (!isNowMobile && this.triggerButtonRef) {
+            // If still on desktop, just recalculate position
+            this.calculatePosition();
         }
-        if (this.shouldUseFixedPositionForViewport(triggerRect)) {
-            this._needsFixedPosition.set(true);
-            this.calculateFixedPosition(triggerRect);
+    };
+    createPortal() {
+        if (!this.menuTemplate || !this.contentTemplate)
             return;
-        }
-        this._needsFixedPosition.set(false);
-    }
-    shouldUseFixedPositionForContainer(triggerRect) {
-        if (!this.triggerButtonRef)
-            return false;
-        const container = this.findOverflowContainer(this.triggerButtonRef);
-        if (!container)
-            return false;
-        const containerRect = container.getBoundingClientRect();
-        const spaceBelow = containerRect.bottom - triggerRect.bottom;
-        const spaceAbove = triggerRect.top - containerRect.top;
-        return (spaceBelow < OverlayComponent.DEFAULT_MENU_WIDTH &&
-            spaceAbove < OverlayComponent.DEFAULT_MENU_WIDTH);
-    }
-    shouldUseFixedPositionForViewport(triggerRect) {
-        const spaceBelowViewport = window.innerHeight - triggerRect.bottom;
-        return spaceBelowViewport < OverlayComponent.DEFAULT_MENU_WIDTH;
-    }
-    findOverflowContainer(element) {
-        let parent = element.parentElement;
-        while (parent && parent !== document.body) {
-            const style = window.getComputedStyle(parent);
-            const overflow = style.overflow + style.overflowY + style.overflowX;
-            if (overflow.includes('hidden') ||
-                overflow.includes('scroll') ||
-                overflow.includes('auto')) {
-                return parent;
+        this.portal = new TemplatePortal(this.menuTemplate, this.viewContainerRef);
+        // Create portal container
+        this.portalContainer = document.createElement('div');
+        this.portalContainer.style.position = 'fixed';
+        this.portalContainer.style.top = '0';
+        this.portalContainer.style.left = '0';
+        this.portalContainer.style.width = '100%';
+        this.portalContainer.style.height = '100%';
+        this.portalContainer.style.zIndex = '1000';
+        this.portalContainer.style.pointerEvents = 'auto'; // Enable clicks to capture outside clicks
+        document.body.appendChild(this.portalContainer);
+        // Add click listener to portal container
+        this.portalContainer.addEventListener('click', this.onPortalClick.bind(this));
+        // Create outlet
+        this.portalOutlet = new DomPortalOutlet(this.portalContainer, null, this.applicationRef, this.viewContainerRef.injector);
+        this.portalOutlet.attach(this.portal);
+        // Apply position to menu only on desktop
+        const menuEl = this.portalContainer.querySelector('.c-overlay__menu');
+        if (menuEl) {
+            menuEl.style.pointerEvents = 'auto'; // Re-enable clicks on menu
+            // Apply styles based on current mobile state
+            if (!this._isMobile()) {
+                // Desktop: apply calculated position
+                const pos = this._menuPosition();
+                menuEl.style.position = 'fixed';
+                menuEl.style.top = `${pos.top}px`;
+                menuEl.style.left = `${pos.left}px`;
+                menuEl.style.width = `${pos.width}px`;
+            }
+            else {
+                // Mobile: clear desktop positioning styles
+                menuEl.style.position = '';
+                menuEl.style.top = '';
+                menuEl.style.left = '';
+                menuEl.style.width = '';
             }
-            parent = parent.parentElement;
-        }
-        return null;
-    }
-    calculateFixedPosition(triggerRect) {
-        const menuWidth = triggerRect.width;
-        const menuHeight = OverlayComponent.DROPDOWN_HEIGHT;
-        const gap = OverlayComponent.DROPDOWN_GAP;
-        const top = this.calculateVerticalPosition(triggerRect, menuHeight, gap);
-        const left = this.calculateHorizontalPosition(triggerRect, menuWidth);
-        const adjustedPosition = this.adjustPositionForViewport(top, left, menuWidth, menuHeight);
-        this._menuPosition.set(adjustedPosition);
-    }
-    calculateVerticalPosition(triggerRect, menuHeight, gap) {
-        const spaceBelow = window.innerHeight - triggerRect.bottom;
-        const spaceAbove = triggerRect.top;
-        // Decide whether to open above or below the trigger
-        if (spaceBelow < menuHeight && spaceAbove > spaceBelow) {
-            // Open above the trigger
-            return triggerRect.top - menuHeight - gap;
-        }
-        else {
-            // Open below the trigger (default)
-            return triggerRect.bottom + gap;
         }
     }
-    calculateHorizontalPosition(triggerRect, menuWidth) {
-        // Always align with the left edge of the trigger for perfect alignment
-        let left = triggerRect.left;
-        // Adjust horizontal position based on position input
-        if (this.position() === 'right') {
-            left = triggerRect.right - menuWidth;
+    destroyPortal() {
+        if (this.portalOutlet) {
+            this.portalOutlet.detach();
+            this.portalOutlet.dispose();
+            this.portalOutlet = undefined;
+            this.portal = undefined;
         }
-        else if (this.position() === 'center') {
-            left = triggerRect.left + (triggerRect.width - menuWidth) / 2;
+        if (this.portalContainer && this.portalContainer.parentNode) {
+            // Remove event listener before removing from DOM
+            this.portalContainer.removeEventListener('click', this.onPortalClick);
+            this.portalContainer.parentNode.removeChild(this.portalContainer);
         }
-        return left;
+        this.portalContainer = undefined;
     }
-    adjustPositionForViewport(top, left, menuWidth, menuHeight) {
-        // Ensure dropdown doesn't go off screen horizontally
-        if (left + menuWidth > window.innerWidth) {
-            left = window.innerWidth - menuWidth - OverlayComponent.VIEWPORT_MARGIN;
-        }
-        if (left < OverlayComponent.VIEWPORT_MARGIN) {
-            left = OverlayComponent.VIEWPORT_MARGIN;
-        }
-        // Ensure dropdown doesn't go off screen vertically
-        if (top < OverlayComponent.VIEWPORT_MARGIN) {
-            top = OverlayComponent.VIEWPORT_MARGIN;
-        }
-        if (top + menuHeight > window.innerHeight) {
-            top = window.innerHeight - menuHeight - OverlayComponent.VIEWPORT_MARGIN;
-        }
-        return { top, left, width: menuWidth };
+    blockBodyScroll() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        // Save original body overflow
+        this.originalBodyOverflow = document.body.style.overflow;
+        // Block body scroll
+        document.body.style.overflow = 'hidden';
     }
-    resizeListener;
-    addResizeListener() {
-        if (this.platformId === 'browser') {
-            this.resizeListener = () => {
-                if (this.isOpen() && this.triggerButtonRef) {
-                    this.detectOverflowAndCalculatePosition();
-                }
-            };
-            window.addEventListener('resize', this.resizeListener);
+    unblockBodyScroll() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        // Restore original body overflow
+        if (this.originalBodyOverflow !== undefined) {
+            document.body.style.overflow = this.originalBodyOverflow;
         }
-    }
-    removeResizeListener() {
-        if (this.resizeListener && this.platformId === 'browser') {
-            window.removeEventListener('resize', this.resizeListener);
-            this.resizeListener = undefined;
+        else {
+            document.body.style.overflow = '';
         }
+        this.originalBodyOverflow = undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: OverlayComponent, isStandalone: true, selector: "lib-overlay", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "overlayMenu", first: true, predicate: ["overlayMenu"], descendants: true }], ngImport: i0, template: "<div class=\"c-overlay\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop for mobile -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-overlay__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close overlay\"\n  ></div>\n  }\n\n  <!-- Overlay Menu -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-overlay__menu\"\n    [ngClass]=\"getMenuClasses()\"\n    [ngStyle]=\"getMenuStyles()\"\n    #overlayMenu\n  >\n    <div class=\"c-overlay__content\">\n      <!-- Main content projection -->\n      <ng-content></ng-content>\n    </div>\n    \n    <!-- Footer slot for mobile action buttons -->\n    <div class=\"c-overlay__footer\">\n      <ng-content select=\"[slot=footer]\"></ng-content>\n    </div>\n  </div>\n  }\n</div>", styles: [".c-overlay{position:relative}.c-overlay__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-overlay__backdrop--open{opacity:1}.c-overlay__menu{position:absolute;margin-top:2px;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:overlay-enter .2s ease-out forwards;transform-origin:top center}.c-overlay__menu--fixed{position:fixed;min-width:0}.c-overlay__menu--right{left:0;right:auto}.c-overlay__menu--left{left:auto;right:0}.c-overlay__menu--center{left:50%;right:auto;transform:translate(-50%) scale(.95);animation:overlay-enter-center .2s ease-out forwards}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none;height:27px}.c-overlay__footer:not(:empty){display:flex}@keyframes overlay-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes overlay-enter-center{0%{opacity:0;transform:translate(-50%) scale(.95)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes overlay-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-overlay__backdrop{display:block;z-index:999}.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 27px);width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay__footer{flex-shrink:0;padding:var(--space-container-padding-sm);background-color:var(--color-core-background-surface-raised);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);display:flex;justify-content:space-between;align-items:center;height:60px}.c-overlay__footer:empty{display:none}.c-overlay--open .c-overlay__menu{transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: OverlayComponent, isStandalone: true, selector: "lib-overlay", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, static: true }], viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, static: true }], ngImport: i0, template: "\n\n\n<!-- Portal template for both desktop and mobile -->\n<ng-template #menuTemplate>\n  <div class=\"c-overlay\" [ngClass]=\"getClasses()\">\n    <!-- Backdrop for mobile -->\n    @if (_isMobile() && (isOpen() || isClosing())) {\n    <div\n      class=\"c-overlay__backdrop\"\n      [ngClass]=\"getBackdropClasses()\"\n      (click)=\"onBackdropClick()\"\n      (keydown.escape)=\"onEscapeKey()\"\n      tabindex=\"0\"\n      role=\"button\"\n      aria-label=\"Close overlay\"\n    ></div>\n    }\n\n    <!-- Overlay Menu -->\n    @if (isOpen() || isClosing()) {\n    <div\n      class=\"c-overlay__menu\"\n      [ngClass]=\"getMenuClasses()\"\n      [ngStyle]=\"getMenuStyles()\"\n      #overlayMenu\n    >\n      <div class=\"c-overlay__content\">\n        <!-- Main content projection -->\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n      </div>\n      \n      <!-- Footer slot for mobile action buttons -->\n      @if (_isMobile() && footerTemplate) {\n      <div class=\"c-overlay__footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</ng-template>", styles: [".c-overlay{position:relative}.c-overlay__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-overlay__backdrop--open{opacity:1}.c-overlay__menu{position:absolute;margin-top:2px;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:overlay-enter .2s ease-out forwards;transform-origin:top center}.c-overlay__menu--fixed{position:fixed;min-width:0}.c-overlay__menu--right{left:0;right:auto}.c-overlay__menu--left{left:auto;right:0}.c-overlay__menu--center{left:50%;right:auto;transform:translate(-50%) scale(.95);animation:overlay-enter-center .2s ease-out forwards}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none}@keyframes overlay-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes overlay-enter-center{0%{opacity:0;transform:translate(-50%) scale(.95)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes overlay-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-overlay__backdrop{display:block;z-index:999}.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:100vh;width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay--open .c-overlay__menu{transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-overlay', imports: [NgClass, NgStyle], template: "<div class=\"c-overlay\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop for mobile -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-overlay__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close overlay\"\n  ></div>\n  }\n\n  <!-- Overlay Menu -->\n  @if (isOpen() || isClosing()) {\n  <div\n    class=\"c-overlay__menu\"\n    [ngClass]=\"getMenuClasses()\"\n    [ngStyle]=\"getMenuStyles()\"\n    #overlayMenu\n  >\n    <div class=\"c-overlay__content\">\n      <!-- Main content projection -->\n      <ng-content></ng-content>\n    </div>\n    \n    <!-- Footer slot for mobile action buttons -->\n    <div class=\"c-overlay__footer\">\n      <ng-content select=\"[slot=footer]\"></ng-content>\n    </div>\n  </div>\n  }\n</div>", styles: [".c-overlay{position:relative}.c-overlay__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-overlay__backdrop--open{opacity:1}.c-overlay__menu{position:absolute;margin-top:2px;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:overlay-enter .2s ease-out forwards;transform-origin:top center}.c-overlay__menu--fixed{position:fixed;min-width:0}.c-overlay__menu--right{left:0;right:auto}.c-overlay__menu--left{left:auto;right:0}.c-overlay__menu--center{left:50%;right:auto;transform:translate(-50%) scale(.95);animation:overlay-enter-center .2s ease-out forwards}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none;height:27px}.c-overlay__footer:not(:empty){display:flex}@keyframes overlay-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes overlay-enter-center{0%{opacity:0;transform:translate(-50%) scale(.95)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes overlay-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-overlay__backdrop{display:block;z-index:999}.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 27px);width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay__footer{flex-shrink:0;padding:var(--space-container-padding-sm);background-color:var(--color-core-background-surface-raised);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);display:flex;justify-content:space-between;align-items:center;height:60px}.c-overlay__footer:empty{display:none}.c-overlay--open .c-overlay__menu{transform:translateY(0)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { overlayMenu: [{
+            args: [{ selector: 'lib-overlay', imports: [NgClass, NgStyle, NgTemplateOutlet, PortalModule], template: "\n\n\n<!-- Portal template for both desktop and mobile -->\n<ng-template #menuTemplate>\n  <div class=\"c-overlay\" [ngClass]=\"getClasses()\">\n    <!-- Backdrop for mobile -->\n    @if (_isMobile() && (isOpen() || isClosing())) {\n    <div\n      class=\"c-overlay__backdrop\"\n      [ngClass]=\"getBackdropClasses()\"\n      (click)=\"onBackdropClick()\"\n      (keydown.escape)=\"onEscapeKey()\"\n      tabindex=\"0\"\n      role=\"button\"\n      aria-label=\"Close overlay\"\n    ></div>\n    }\n\n    <!-- Overlay Menu -->\n    @if (isOpen() || isClosing()) {\n    <div\n      class=\"c-overlay__menu\"\n      [ngClass]=\"getMenuClasses()\"\n      [ngStyle]=\"getMenuStyles()\"\n      #overlayMenu\n    >\n      <div class=\"c-overlay__content\">\n        <!-- Main content projection -->\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n      </div>\n      \n      <!-- Footer slot for mobile action buttons -->\n      @if (_isMobile() && footerTemplate) {\n      <div class=\"c-overlay__footer\">\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n      </div>\n      }\n    </div>\n    }\n  </div>\n</ng-template>", styles: [".c-overlay{position:relative}.c-overlay__backdrop{position:fixed;inset:0;z-index:999;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;display:none}.c-overlay__backdrop--open{opacity:1}.c-overlay__menu{position:absolute;margin-top:2px;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:scale(.95);animation:overlay-enter .2s ease-out forwards;transform-origin:top center}.c-overlay__menu--fixed{position:fixed;min-width:0}.c-overlay__menu--right{left:0;right:auto}.c-overlay__menu--left{left:auto;right:0}.c-overlay__menu--center{left:50%;right:auto;transform:translate(-50%) scale(.95);animation:overlay-enter-center .2s ease-out forwards}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none}@keyframes overlay-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes overlay-enter-center{0%{opacity:0;transform:translate(-50%) scale(.95)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes overlay-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:scale(.95)}}@media (max-width: 768px){.c-overlay__backdrop{display:block;z-index:999}.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:100vh;width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay--open .c-overlay__menu{transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menuTemplate: [{
                 type: ViewChild,
-                args: ['overlayMenu']
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
+                args: ['menuTemplate', { static: true }]
+            }], contentTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef, { static: true }]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: ['footer', { static: true }]
             }] } });
 
 class DropdownActionComponent {
@@ -3482,11 +3514,11 @@ class DropdownActionComponent {
         this._isOverlayOpen.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownActionComponent, isStandalone: true, selector: "lib-dropdown-action", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <!-- Options List -->\n  <div class=\"c-dropdown-action__options\">\n    @for (group of options(); track group.label) {\n    <!-- Option Group -->\n    <div class=\"c-dropdown-action__group\">\n      <!-- Group Label -->\n      @if (group.label) {\n      <div class=\"c-dropdown-action__group-label\">\n        {{ group.label }}\n      </div>\n      }\n      <!-- Group Options -->\n      @for (option of group.options; track option.value) {\n      <!-- Action button with icon and label -->\n      <button\n        type=\"button\"\n        class=\"c-dropdown-action__option\"\n        [disabled]=\"option.disabled\"\n        (click)=\"selectAction(option)\"\n      >\n        @if (option.icon) {\n        <lib-icon\n          [name]=\"option.icon\"\n          size=\"lg\"\n          class=\"c-dropdown-action__option-icon\"\n        >\n        </lib-icon>\n        }\n\n        <span class=\"c-dropdown-action__option-label\">\n          {{ option.label }}\n        </span>\n      </button>\n      }\n    </div>\n    }\n  </div>\n</lib-overlay>\n", styles: [".c-dropdown-action__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-action__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-action__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-action__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-action__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-action__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-action__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-action__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-action__option-label{flex:1;min-width:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["position", "disabled", "width"], outputs: ["opened", "closed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownActionComponent, isStandalone: true, selector: "lib-dropdown-action", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <ng-template>\n    <!-- Options List -->\n    <div class=\"c-dropdown-action__options\">\n      @for (group of options(); track group.label) {\n      <!-- Option Group -->\n      <div class=\"c-dropdown-action__group\">\n        <!-- Group Label -->\n        @if (group.label) {\n        <div class=\"c-dropdown-action__group-label\">\n          {{ group.label }}\n        </div>\n        }\n        <!-- Group Options -->\n        @for (option of group.options; track option.value) {\n        <!-- Action button with icon and label -->\n        <button\n          type=\"button\"\n          class=\"c-dropdown-action__option\"\n          [disabled]=\"option.disabled\"\n          (click)=\"selectAction(option)\"\n        >\n          @if (option.icon) {\n          <lib-icon\n            [name]=\"option.icon\"\n            size=\"lg\"\n            class=\"c-dropdown-action__option-icon\"\n          >\n          </lib-icon>\n          }\n\n          <span class=\"c-dropdown-action__option-label\">\n            {{ option.label }}\n          </span>\n        </button>\n        }\n      </div>\n      }\n    </div>\n  </ng-template>\n</lib-overlay>\n", styles: [".c-dropdown-action__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-action__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-action__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-action__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-action__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-action__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-action__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-action__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-action__option-label{flex:1;min-width:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["position", "disabled", "width"], outputs: ["opened", "closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dropdown-action', imports: [IconComponent, OverlayComponent], template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <!-- Options List -->\n  <div class=\"c-dropdown-action__options\">\n    @for (group of options(); track group.label) {\n    <!-- Option Group -->\n    <div class=\"c-dropdown-action__group\">\n      <!-- Group Label -->\n      @if (group.label) {\n      <div class=\"c-dropdown-action__group-label\">\n        {{ group.label }}\n      </div>\n      }\n      <!-- Group Options -->\n      @for (option of group.options; track option.value) {\n      <!-- Action button with icon and label -->\n      <button\n        type=\"button\"\n        class=\"c-dropdown-action__option\"\n        [disabled]=\"option.disabled\"\n        (click)=\"selectAction(option)\"\n      >\n        @if (option.icon) {\n        <lib-icon\n          [name]=\"option.icon\"\n          size=\"lg\"\n          class=\"c-dropdown-action__option-icon\"\n        >\n        </lib-icon>\n        }\n\n        <span class=\"c-dropdown-action__option-label\">\n          {{ option.label }}\n        </span>\n      </button>\n      }\n    </div>\n    }\n  </div>\n</lib-overlay>\n", styles: [".c-dropdown-action__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-action__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-action__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-action__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-action__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-action__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-action__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-action__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-action__option-label{flex:1;min-width:0}\n"] }]
+            args: [{ selector: 'lib-dropdown-action', imports: [IconComponent, OverlayComponent], template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <ng-template>\n    <!-- Options List -->\n    <div class=\"c-dropdown-action__options\">\n      @for (group of options(); track group.label) {\n      <!-- Option Group -->\n      <div class=\"c-dropdown-action__group\">\n        <!-- Group Label -->\n        @if (group.label) {\n        <div class=\"c-dropdown-action__group-label\">\n          {{ group.label }}\n        </div>\n        }\n        <!-- Group Options -->\n        @for (option of group.options; track option.value) {\n        <!-- Action button with icon and label -->\n        <button\n          type=\"button\"\n          class=\"c-dropdown-action__option\"\n          [disabled]=\"option.disabled\"\n          (click)=\"selectAction(option)\"\n        >\n          @if (option.icon) {\n          <lib-icon\n            [name]=\"option.icon\"\n            size=\"lg\"\n            class=\"c-dropdown-action__option-icon\"\n          >\n          </lib-icon>\n          }\n\n          <span class=\"c-dropdown-action__option-label\">\n            {{ option.label }}\n          </span>\n        </button>\n        }\n      </div>\n      }\n    </div>\n  </ng-template>\n</lib-overlay>\n", styles: [".c-dropdown-action__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-action__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-action__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-action__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-action__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-action__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-action__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-action__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-action__option-label{flex:1;min-width:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { overlay: [{
                 type: ViewChild,
                 args: [OverlayComponent]
@@ -4041,18 +4073,19 @@ class DropdownSelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownSelectComponent, isStandalone: true, selector: "lib-dropdown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <!-- Search Input (if enabled and not multiselect) -->\n  @if (showSearchBar()) {\n  <div class=\"c-dropdown-select__search\">\n    <lib-input-search\n      [placeholder]=\"searchPlaceholder()\"\n      [formControl]=\"searchControl\"\n      size=\"lg\"\n      [fullWidth]=\"true\"\n    ></lib-input-search>\n  </div>\n  }\n\n  <!-- Options List -->\n  <div class=\"c-dropdown-select__options\">\n    @for (group of filteredOptions(); track group.label) {\n    <!-- Option Group -->\n    <div class=\"c-dropdown-select__group\">\n      <!-- Group Label -->\n      @if (group.label) {\n      <div class=\"c-dropdown-select__group-label\">\n        {{ group.label }}\n      </div>\n      }\n      <!-- Group Options -->\n      @for (option of group.options; track option.value) { @if (isMultiSelect())\n      {\n      <!-- For multiselect: use full checkbox component with label -->\n      <div\n        class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n      >\n        <lib-checkbox\n          [label]=\"option.label\"\n          [name]=\"'option-' + option.value\"\n          [value]=\"option.value\"\n          [ariaLabel]=\"'Select ' + option.label\"\n          [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n          [disabled]=\"option.disabled || false\"\n          (changed)=\"onCheckboxChange(option, $event.checked)\"\n        ></lib-checkbox>\n      </div>\n      } @else {\n      <!-- For single select: use button with icon and label -->\n      <button\n        type=\"button\"\n        class=\"c-dropdown-select__option\"\n        [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n        [disabled]=\"option.disabled\"\n        (click)=\"selectOption(option)\"\n      >\n        @if (option.icon) {\n        <lib-icon\n          [name]=\"option.icon\"\n          size=\"lg\"\n          class=\"c-dropdown-select__option-icon\"\n        >\n        </lib-icon>\n        }\n\n        <span class=\"c-dropdown-select__option-label\">\n          {{ option.label }}\n        </span>\n\n        <!-- Check icon for selected option in single select -->\n        @if (isSelected(option)) {\n        <lib-icon\n          name=\"checkcircle-fill\"\n          size=\"lg\"\n          color=\"action-primary-selected-background-default\"\n        >\n        </lib-icon>\n        }\n      </button>\n      } }\n    </div>\n    }\n  </div>\n\n  <!-- Mobile Action Buttons in footer slot -->\n  @if (showMobileActions()) {\n  <div slot=\"footer\" class=\"c-dropdown-select__mobile-actions\">\n    <lib-link-action\n      [text]=\"cancelButtonText()\"\n      variant=\"neutral\"\n      size=\"md\"\n      weight=\"bold\"\n      (clicked)=\"onCancelClick()\"\n    ></lib-link-action>\n    <lib-link-action\n      [text]=\"acceptButtonText()\"\n      variant=\"primary\"\n      size=\"md\"\n      weight=\"bold\"\n      (clicked)=\"onAcceptClick()\"\n    ></lib-link-action>\n  </div>\n  }\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-content-selected);-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["position", "disabled", "width"], outputs: ["opened", "closed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownSelectComponent, isStandalone: true, selector: "lib-dropdown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <ng-template>\n    <!-- Search Input (if enabled and not multiselect) -->\n    @if (showSearchBar()) {\n    <div class=\"c-dropdown-select__search\">\n      <lib-input-search\n        [placeholder]=\"searchPlaceholder()\"\n        [formControl]=\"searchControl\"\n        size=\"lg\"\n        [fullWidth]=\"true\"\n      ></lib-input-search>\n    </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"c-dropdown-select__options\" [ngClass]=\"{ 'c-dropdown-select__options--with-mobile-actions': showMobileActions() }\">\n      @for (group of filteredOptions(); track group.label) {\n      <!-- Option Group -->\n      <div class=\"c-dropdown-select__group\">\n        <!-- Group Label -->\n        @if (group.label) {\n        <div class=\"c-dropdown-select__group-label\">\n          {{ group.label }}\n        </div>\n        }\n        <!-- Group Options -->\n        @for (option of group.options; track option.value) { @if (isMultiSelect())\n        {\n        <!-- For multiselect: use full checkbox component with label -->\n        <div\n          class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n        >\n          <lib-checkbox\n            [label]=\"option.label\"\n            [name]=\"'option-' + option.value\"\n            [value]=\"option.value\"\n            [ariaLabel]=\"'Select ' + option.label\"\n            [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n            [disabled]=\"option.disabled || false\"\n            (changed)=\"onCheckboxChange(option, $event.checked)\"\n          ></lib-checkbox>\n        </div>\n        } @else {\n        <!-- For single select: use button with icon and label -->\n        <button\n          type=\"button\"\n          class=\"c-dropdown-select__option\"\n          [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n          [disabled]=\"option.disabled\"\n          (click)=\"selectOption(option)\"\n        >\n          @if (option.icon) {\n          <lib-icon\n            [name]=\"option.icon\"\n            size=\"lg\"\n            class=\"c-dropdown-select__option-icon\"\n          >\n          </lib-icon>\n          }\n\n          <span class=\"c-dropdown-select__option-label\">\n            {{ option.label }}\n          </span>\n\n          <!-- Check icon for selected option in single select -->\n          @if (isSelected(option)) {\n          <lib-icon\n            name=\"checkcircle-fill\"\n            size=\"lg\"\n            color=\"action-primary-selected-background-default\"\n          >\n          </lib-icon>\n          }\n        </button>\n        } }\n      </div>\n      }\n    </div>\n\n    <!-- Mobile Action Buttons in footer slot -->\n    @if (showMobileActions()) {\n    <div class=\"c-dropdown-select__mobile-actions\">\n      <lib-link-action\n        [text]=\"cancelButtonText()\"\n        variant=\"neutral\"\n        size=\"md\"\n        weight=\"bold\"\n        (clicked)=\"onCancelClick()\"\n      ></lib-link-action>\n      <lib-link-action\n        [text]=\"acceptButtonText()\"\n        variant=\"primary\"\n        size=\"md\"\n        weight=\"bold\"\n        (clicked)=\"onAcceptClick()\"\n      ></lib-link-action>\n    </div>\n    }\n  </ng-template>\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-content-selected);-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__options--with-mobile-actions{margin-bottom:85px}.c-dropdown-select__mobile-actions{display:none}@media (max-width: 768px){.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%;position:fixed;bottom:0;height:60px;background-color:var(--color-core-background-surface-raised);padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["position", "disabled", "width"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-dropdown-select', imports: [
                         ReactiveFormsModule,
+                        NgClass,
                         IconComponent,
                         CheckboxComponent,
                         InputSearchComponent,
                         LinkActionComponent,
                         OverlayComponent,
-                    ], template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <!-- Search Input (if enabled and not multiselect) -->\n  @if (showSearchBar()) {\n  <div class=\"c-dropdown-select__search\">\n    <lib-input-search\n      [placeholder]=\"searchPlaceholder()\"\n      [formControl]=\"searchControl\"\n      size=\"lg\"\n      [fullWidth]=\"true\"\n    ></lib-input-search>\n  </div>\n  }\n\n  <!-- Options List -->\n  <div class=\"c-dropdown-select__options\">\n    @for (group of filteredOptions(); track group.label) {\n    <!-- Option Group -->\n    <div class=\"c-dropdown-select__group\">\n      <!-- Group Label -->\n      @if (group.label) {\n      <div class=\"c-dropdown-select__group-label\">\n        {{ group.label }}\n      </div>\n      }\n      <!-- Group Options -->\n      @for (option of group.options; track option.value) { @if (isMultiSelect())\n      {\n      <!-- For multiselect: use full checkbox component with label -->\n      <div\n        class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n      >\n        <lib-checkbox\n          [label]=\"option.label\"\n          [name]=\"'option-' + option.value\"\n          [value]=\"option.value\"\n          [ariaLabel]=\"'Select ' + option.label\"\n          [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n          [disabled]=\"option.disabled || false\"\n          (changed)=\"onCheckboxChange(option, $event.checked)\"\n        ></lib-checkbox>\n      </div>\n      } @else {\n      <!-- For single select: use button with icon and label -->\n      <button\n        type=\"button\"\n        class=\"c-dropdown-select__option\"\n        [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n        [disabled]=\"option.disabled\"\n        (click)=\"selectOption(option)\"\n      >\n        @if (option.icon) {\n        <lib-icon\n          [name]=\"option.icon\"\n          size=\"lg\"\n          class=\"c-dropdown-select__option-icon\"\n        >\n        </lib-icon>\n        }\n\n        <span class=\"c-dropdown-select__option-label\">\n          {{ option.label }}\n        </span>\n\n        <!-- Check icon for selected option in single select -->\n        @if (isSelected(option)) {\n        <lib-icon\n          name=\"checkcircle-fill\"\n          size=\"lg\"\n          color=\"action-primary-selected-background-default\"\n        >\n        </lib-icon>\n        }\n      </button>\n      } }\n    </div>\n    }\n  </div>\n\n  <!-- Mobile Action Buttons in footer slot -->\n  @if (showMobileActions()) {\n  <div slot=\"footer\" class=\"c-dropdown-select__mobile-actions\">\n    <lib-link-action\n      [text]=\"cancelButtonText()\"\n      variant=\"neutral\"\n      size=\"md\"\n      weight=\"bold\"\n      (clicked)=\"onCancelClick()\"\n    ></lib-link-action>\n    <lib-link-action\n      [text]=\"acceptButtonText()\"\n      variant=\"primary\"\n      size=\"md\"\n      weight=\"bold\"\n      (clicked)=\"onAcceptClick()\"\n    ></lib-link-action>\n  </div>\n  }\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-content-selected);-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<lib-overlay\n  [position]=\"position()\"\n  [disabled]=\"disabled()\"\n  (opened)=\"onOverlayOpened()\"\n  (closed)=\"onOverlayClosed()\"\n  [width]=\"width()\"\n>\n  <ng-template>\n    <!-- Search Input (if enabled and not multiselect) -->\n    @if (showSearchBar()) {\n    <div class=\"c-dropdown-select__search\">\n      <lib-input-search\n        [placeholder]=\"searchPlaceholder()\"\n        [formControl]=\"searchControl\"\n        size=\"lg\"\n        [fullWidth]=\"true\"\n      ></lib-input-search>\n    </div>\n    }\n\n    <!-- Options List -->\n    <div class=\"c-dropdown-select__options\" [ngClass]=\"{ 'c-dropdown-select__options--with-mobile-actions': showMobileActions() }\">\n      @for (group of filteredOptions(); track group.label) {\n      <!-- Option Group -->\n      <div class=\"c-dropdown-select__group\">\n        <!-- Group Label -->\n        @if (group.label) {\n        <div class=\"c-dropdown-select__group-label\">\n          {{ group.label }}\n        </div>\n        }\n        <!-- Group Options -->\n        @for (option of group.options; track option.value) { @if (isMultiSelect())\n        {\n        <!-- For multiselect: use full checkbox component with label -->\n        <div\n          class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n        >\n          <lib-checkbox\n            [label]=\"option.label\"\n            [name]=\"'option-' + option.value\"\n            [value]=\"option.value\"\n            [ariaLabel]=\"'Select ' + option.label\"\n            [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n            [disabled]=\"option.disabled || false\"\n            (changed)=\"onCheckboxChange(option, $event.checked)\"\n          ></lib-checkbox>\n        </div>\n        } @else {\n        <!-- For single select: use button with icon and label -->\n        <button\n          type=\"button\"\n          class=\"c-dropdown-select__option\"\n          [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n          [disabled]=\"option.disabled\"\n          (click)=\"selectOption(option)\"\n        >\n          @if (option.icon) {\n          <lib-icon\n            [name]=\"option.icon\"\n            size=\"lg\"\n            class=\"c-dropdown-select__option-icon\"\n          >\n          </lib-icon>\n          }\n\n          <span class=\"c-dropdown-select__option-label\">\n            {{ option.label }}\n          </span>\n\n          <!-- Check icon for selected option in single select -->\n          @if (isSelected(option)) {\n          <lib-icon\n            name=\"checkcircle-fill\"\n            size=\"lg\"\n            color=\"action-primary-selected-background-default\"\n          >\n          </lib-icon>\n          }\n        </button>\n        } }\n      </div>\n      }\n    </div>\n\n    <!-- Mobile Action Buttons in footer slot -->\n    @if (showMobileActions()) {\n    <div class=\"c-dropdown-select__mobile-actions\">\n      <lib-link-action\n        [text]=\"cancelButtonText()\"\n        variant=\"neutral\"\n        size=\"md\"\n        weight=\"bold\"\n        (clicked)=\"onCancelClick()\"\n      ></lib-link-action>\n      <lib-link-action\n        [text]=\"acceptButtonText()\"\n        variant=\"primary\"\n        size=\"md\"\n        weight=\"bold\"\n        (clicked)=\"onAcceptClick()\"\n      ></lib-link-action>\n    </div>\n    }\n  </ng-template>\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-content-selected);-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__options--with-mobile-actions{margin-bottom:85px}.c-dropdown-select__mobile-actions{display:none}@media (max-width: 768px){.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%;position:fixed;bottom:0;height:60px;background-color:var(--color-core-background-surface-raised);padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { overlay: [{
                 type: ViewChild,
                 args: [OverlayComponent]
@@ -4815,11 +4848,11 @@ class MenuItemComponent {
         return 'action-neutral-content-default';
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: MenuItemComponent, isStandalone: true, selector: "lib-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, showArrowIcon: { classPropertyName: "showArrowIcon", publicName: "showArrowIcon", isSignal: true, isRequired: false, transformFunction: null }, tagLabel: { classPropertyName: "tagLabel", publicName: "tagLabel", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"c-menu-item__container\">\n  <button\n    [ngClass]=\"[\n      'c-menu-item',\n      selected() ? 'c-menu-item--selected' : '',\n      disabled() ? 'c-menu-item--disabled' : '',\n      hasChildren() ? 'c-menu-item--has-children' : '',\n      hasChildren() ? 'c-menu-item--expanded' : ''\n    ]\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-selected]=\"selected()\"\n    [attr.aria-expanded]=\"hasChildren() ? true : null\"\n    (click)=\"handleClick()\"\n  >\n    <span class=\"c-menu-item__icon\">\n      <lib-icon\n        [name]=\"computedIcon()\"\n        [size]=\"'md'\"\n        [color]=\"iconColor()\"\n      ></lib-icon>\n    </span>\n    @if (label()) {\n    <span class=\"c-menu-item__label\">{{ label() }}</span>\n    } @if (hasTag()) {\n    <span class=\"c-menu-item__tag-container\">\n      <lib-tag\n        [text]=\"tagLabel()\"\n        [closeActive]=\"false\"\n        [showBadge]=\"false\"\n        class=\"c-menu-item__tag\"\n      ></lib-tag>\n    </span>\n    } @if (showArrowIcon()) {\n    <span class=\"c-menu-item__expand-icon\">\n      <lib-icon\n        name=\"caretright-regular\"\n        [size]=\"'md'\"\n        [color]=\"iconColor()\"\n      ></lib-icon>\n    </span>\n    }\n  </button>\n\n  @if (hasChildren()) {\n  <div class=\"c-menu-item__children\">\n    <div class=\"c-menu-item__children-items\">\n      @for (child of children(); track child.label) {\n      <lib-menu-child-item\n        [label]=\"child.label\"\n        [disabled]=\"child.disabled || false\"\n        [selected]=\"child.selected || false\"\n        (clicked)=\"handleChildClick(child)\"\n      >\n      </lib-menu-child-item>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [".c-menu-item{display:flex;align-items:center;gap:var(--space-component-gap-md, .5rem);width:100%;min-height:40px;padding:var(--space-component-padding-none) var(--space-component-padding-sm);border:none;border-radius:var(--size-border-radius-md);background:var(--color-menu-item-background-default);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);text-align:left;color:var(--color-action-neutral-content-default)}.c-menu-item__container,.c-menu-item__children{display:flex;flex-direction:column;width:100%}.c-menu-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-item:disabled{cursor:not-allowed}.c-menu-item:hover:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-hover);color:var(--color-action-neutral-content-hover)}.c-menu-item:active:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-pressed);color:var(--color-action-neutral-content-pressed)}.c-menu-item.c-menu-item--selected{background-color:var(--color-menu-item-parent-background-active);color:var(--color-action-primary-selected-content-default)}.c-menu-item.c-menu-item--selected:hover:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-hover);color:var(--color-action-primary-selected-content-hover)}.c-menu-item.c-menu-item--selected:active:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-pressed);color:var(--color-action-primary-selected-content-pressed)}.c-menu-item.c-menu-item--disabled{color:var(--color-action-neutral-content-disabled);background-color:var(--color-action-neutral-background-disabled)}.c-menu-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.c-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-menu-item__expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--space-component-gap-sm);transition:transform var(--transition-base-duration) var(--transition-base-easing)}.c-menu-item__tag-container{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-component-gap-sm)}.c-menu-item__tag{flex-shrink:0}.c-menu-item__children{padding-left:var(--size-spacing-4);margin-top:var(--size-spacing-1)}.c-menu-item__children-label{font-size:var(--size-font-sm);font-weight:var(--size-font-weight-medium);color:var(--color-action-neutral-content-default);padding:var(--size-spacing-2) var(--size-spacing-3);margin-bottom:var(--size-spacing-1)}.c-menu-item__children-items{display:flex;flex-direction:column;gap:var(--size-spacing-1)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: MenuChildItemComponent, selector: "lib-menu-child-item", inputs: ["label", "icon", "disabled", "selected"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: MenuItemComponent, isStandalone: true, selector: "lib-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, showArrowIcon: { classPropertyName: "showArrowIcon", publicName: "showArrowIcon", isSignal: true, isRequired: false, transformFunction: null }, tagLabel: { classPropertyName: "tagLabel", publicName: "tagLabel", isSignal: true, isRequired: false, transformFunction: null }, children: { classPropertyName: "children", publicName: "children", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"c-menu-item__container\">\n  <button\n    [ngClass]=\"[\n      'c-menu-item',\n      selected() ? 'c-menu-item--selected' : '',\n      disabled() ? 'c-menu-item--disabled' : '',\n      hasChildren() ? 'c-menu-item--has-children' : '',\n      hasChildren() ? 'c-menu-item--expanded' : ''\n    ]\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-selected]=\"selected()\"\n    [attr.aria-expanded]=\"hasChildren() ? true : null\"\n    (click)=\"handleClick()\"\n  >\n    @if (icon()) {\n      <span class=\"c-menu-item__icon\">\n        <lib-icon\n          [name]=\"computedIcon()\"\n          [size]=\"'md'\"\n          [color]=\"iconColor()\"\n        ></lib-icon>\n      </span>\n    }\n    @if (label()) {\n      <span class=\"c-menu-item__label\">{{ label() }}</span>\n    }\n    @if (hasTag()) {\n      <span class=\"c-menu-item__tag-container\">\n        <lib-tag\n          [text]=\"tagLabel()\"\n          [closeActive]=\"false\"\n          [showBadge]=\"false\"\n          class=\"c-menu-item__tag\"\n        ></lib-tag>\n      </span>\n    }\n    @if (showArrowIcon()) {\n      <span class=\"c-menu-item__expand-icon\">\n        <lib-icon\n          name=\"caretright-regular\"\n          [size]=\"'md'\"\n          [color]=\"iconColor()\"\n        ></lib-icon>\n      </span>\n    }\n  </button>\n\n  @if (hasChildren()) {\n  <div class=\"c-menu-item__children\">\n    <div class=\"c-menu-item__children-items\">\n      @for (child of children(); track child.label) {\n      <lib-menu-child-item\n        [label]=\"child.label\"\n        [disabled]=\"child.disabled || false\"\n        [selected]=\"child.selected || false\"\n        (clicked)=\"handleChildClick(child)\"\n      >\n      </lib-menu-child-item>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [".c-menu-item{display:flex;align-items:center;gap:var(--space-component-gap-md, .5rem);width:100%;min-height:40px;padding:var(--space-component-padding-none) var(--space-component-padding-sm);border:none;border-radius:var(--size-border-radius-md);background:var(--color-menu-item-background-default);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);text-align:left;color:var(--color-action-neutral-content-default)}.c-menu-item__container,.c-menu-item__children{display:flex;flex-direction:column;width:100%}.c-menu-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-item:disabled{cursor:not-allowed}.c-menu-item:hover:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-hover);color:var(--color-action-neutral-content-hover)}.c-menu-item:active:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-pressed);color:var(--color-action-neutral-content-pressed)}.c-menu-item.c-menu-item--selected{background-color:var(--color-menu-item-parent-background-active);color:var(--color-action-primary-selected-content-default)}.c-menu-item.c-menu-item--selected:hover:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-hover);color:var(--color-action-primary-selected-content-hover)}.c-menu-item.c-menu-item--selected:active:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-pressed);color:var(--color-action-primary-selected-content-pressed)}.c-menu-item.c-menu-item--disabled{color:var(--color-action-neutral-content-disabled);background-color:var(--color-action-neutral-background-disabled)}.c-menu-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.c-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-menu-item__expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--space-component-gap-sm);transition:transform var(--transition-base-duration) var(--transition-base-easing)}.c-menu-item__tag-container{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-component-gap-sm)}.c-menu-item__tag{flex-shrink:0}.c-menu-item__children{padding-left:var(--size-spacing-4);margin-top:var(--size-spacing-1)}.c-menu-item__children-label{font-size:var(--size-font-sm);font-weight:var(--size-font-weight-medium);color:var(--color-action-neutral-content-default);padding:var(--size-spacing-2) var(--size-spacing-3);margin-bottom:var(--size-spacing-1)}.c-menu-item__children-items{display:flex;flex-direction:column;gap:var(--size-spacing-1)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: MenuChildItemComponent, selector: "lib-menu-child-item", inputs: ["label", "icon", "disabled", "selected"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-menu-item', imports: [NgClass, IconComponent, MenuChildItemComponent, TagComponent], template: "<div class=\"c-menu-item__container\">\n  <button\n    [ngClass]=\"[\n      'c-menu-item',\n      selected() ? 'c-menu-item--selected' : '',\n      disabled() ? 'c-menu-item--disabled' : '',\n      hasChildren() ? 'c-menu-item--has-children' : '',\n      hasChildren() ? 'c-menu-item--expanded' : ''\n    ]\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-selected]=\"selected()\"\n    [attr.aria-expanded]=\"hasChildren() ? true : null\"\n    (click)=\"handleClick()\"\n  >\n    <span class=\"c-menu-item__icon\">\n      <lib-icon\n        [name]=\"computedIcon()\"\n        [size]=\"'md'\"\n        [color]=\"iconColor()\"\n      ></lib-icon>\n    </span>\n    @if (label()) {\n    <span class=\"c-menu-item__label\">{{ label() }}</span>\n    } @if (hasTag()) {\n    <span class=\"c-menu-item__tag-container\">\n      <lib-tag\n        [text]=\"tagLabel()\"\n        [closeActive]=\"false\"\n        [showBadge]=\"false\"\n        class=\"c-menu-item__tag\"\n      ></lib-tag>\n    </span>\n    } @if (showArrowIcon()) {\n    <span class=\"c-menu-item__expand-icon\">\n      <lib-icon\n        name=\"caretright-regular\"\n        [size]=\"'md'\"\n        [color]=\"iconColor()\"\n      ></lib-icon>\n    </span>\n    }\n  </button>\n\n  @if (hasChildren()) {\n  <div class=\"c-menu-item__children\">\n    <div class=\"c-menu-item__children-items\">\n      @for (child of children(); track child.label) {\n      <lib-menu-child-item\n        [label]=\"child.label\"\n        [disabled]=\"child.disabled || false\"\n        [selected]=\"child.selected || false\"\n        (clicked)=\"handleChildClick(child)\"\n      >\n      </lib-menu-child-item>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [".c-menu-item{display:flex;align-items:center;gap:var(--space-component-gap-md, .5rem);width:100%;min-height:40px;padding:var(--space-component-padding-none) var(--space-component-padding-sm);border:none;border-radius:var(--size-border-radius-md);background:var(--color-menu-item-background-default);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);text-align:left;color:var(--color-action-neutral-content-default)}.c-menu-item__container,.c-menu-item__children{display:flex;flex-direction:column;width:100%}.c-menu-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-item:disabled{cursor:not-allowed}.c-menu-item:hover:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-hover);color:var(--color-action-neutral-content-hover)}.c-menu-item:active:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-pressed);color:var(--color-action-neutral-content-pressed)}.c-menu-item.c-menu-item--selected{background-color:var(--color-menu-item-parent-background-active);color:var(--color-action-primary-selected-content-default)}.c-menu-item.c-menu-item--selected:hover:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-hover);color:var(--color-action-primary-selected-content-hover)}.c-menu-item.c-menu-item--selected:active:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-pressed);color:var(--color-action-primary-selected-content-pressed)}.c-menu-item.c-menu-item--disabled{color:var(--color-action-neutral-content-disabled);background-color:var(--color-action-neutral-background-disabled)}.c-menu-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.c-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-menu-item__expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--space-component-gap-sm);transition:transform var(--transition-base-duration) var(--transition-base-easing)}.c-menu-item__tag-container{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-component-gap-sm)}.c-menu-item__tag{flex-shrink:0}.c-menu-item__children{padding-left:var(--size-spacing-4);margin-top:var(--size-spacing-1)}.c-menu-item__children-label{font-size:var(--size-font-sm);font-weight:var(--size-font-weight-medium);color:var(--color-action-neutral-content-default);padding:var(--size-spacing-2) var(--size-spacing-3);margin-bottom:var(--size-spacing-1)}.c-menu-item__children-items{display:flex;flex-direction:column;gap:var(--size-spacing-1)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+            args: [{ selector: 'lib-menu-item', imports: [NgClass, IconComponent, MenuChildItemComponent, TagComponent], template: "<div class=\"c-menu-item__container\">\n  <button\n    [ngClass]=\"[\n      'c-menu-item',\n      selected() ? 'c-menu-item--selected' : '',\n      disabled() ? 'c-menu-item--disabled' : '',\n      hasChildren() ? 'c-menu-item--has-children' : '',\n      hasChildren() ? 'c-menu-item--expanded' : ''\n    ]\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"label()\"\n    [attr.aria-selected]=\"selected()\"\n    [attr.aria-expanded]=\"hasChildren() ? true : null\"\n    (click)=\"handleClick()\"\n  >\n    @if (icon()) {\n      <span class=\"c-menu-item__icon\">\n        <lib-icon\n          [name]=\"computedIcon()\"\n          [size]=\"'md'\"\n          [color]=\"iconColor()\"\n        ></lib-icon>\n      </span>\n    }\n    @if (label()) {\n      <span class=\"c-menu-item__label\">{{ label() }}</span>\n    }\n    @if (hasTag()) {\n      <span class=\"c-menu-item__tag-container\">\n        <lib-tag\n          [text]=\"tagLabel()\"\n          [closeActive]=\"false\"\n          [showBadge]=\"false\"\n          class=\"c-menu-item__tag\"\n        ></lib-tag>\n      </span>\n    }\n    @if (showArrowIcon()) {\n      <span class=\"c-menu-item__expand-icon\">\n        <lib-icon\n          name=\"caretright-regular\"\n          [size]=\"'md'\"\n          [color]=\"iconColor()\"\n        ></lib-icon>\n      </span>\n    }\n  </button>\n\n  @if (hasChildren()) {\n  <div class=\"c-menu-item__children\">\n    <div class=\"c-menu-item__children-items\">\n      @for (child of children(); track child.label) {\n      <lib-menu-child-item\n        [label]=\"child.label\"\n        [disabled]=\"child.disabled || false\"\n        [selected]=\"child.selected || false\"\n        (clicked)=\"handleChildClick(child)\"\n      >\n      </lib-menu-child-item>\n      }\n    </div>\n  </div>\n  }\n</div>\n", styles: [".c-menu-item{display:flex;align-items:center;gap:var(--space-component-gap-md, .5rem);width:100%;min-height:40px;padding:var(--space-component-padding-none) var(--space-component-padding-sm);border:none;border-radius:var(--size-border-radius-md);background:var(--color-menu-item-background-default);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);text-align:left;color:var(--color-action-neutral-content-default)}.c-menu-item__container,.c-menu-item__children{display:flex;flex-direction:column;width:100%}.c-menu-item:focus-visible{box-shadow:var(--focus-inset);outline:0}.c-menu-item:disabled{cursor:not-allowed}.c-menu-item:hover:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-hover);color:var(--color-action-neutral-content-hover)}.c-menu-item:active:not(.c-menu-item--disabled){background-color:var(--color-action-neutral-background-pressed);color:var(--color-action-neutral-content-pressed)}.c-menu-item.c-menu-item--selected{background-color:var(--color-menu-item-parent-background-active);color:var(--color-action-primary-selected-content-default)}.c-menu-item.c-menu-item--selected:hover:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-hover);color:var(--color-action-primary-selected-content-hover)}.c-menu-item.c-menu-item--selected:active:not(.c-menu-item--disabled){background-color:var(--color-action-primary-selected-background-pressed);color:var(--color-action-primary-selected-content-pressed)}.c-menu-item.c-menu-item--disabled{color:var(--color-action-neutral-content-disabled);background-color:var(--color-action-neutral-background-disabled)}.c-menu-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.c-menu-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.c-menu-item__expand-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:var(--space-component-gap-sm);transition:transform var(--transition-base-duration) var(--transition-base-easing)}.c-menu-item__tag-container{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--space-component-gap-sm)}.c-menu-item__tag{flex-shrink:0}.c-menu-item__children{padding-left:var(--size-spacing-4);margin-top:var(--size-spacing-1)}.c-menu-item__children-label{font-size:var(--size-font-sm);font-weight:var(--size-font-weight-medium);color:var(--color-action-neutral-content-default);padding:var(--size-spacing-2) var(--size-spacing-3);margin-bottom:var(--size-spacing-1)}.c-menu-item__children-items{display:flex;flex-direction:column;gap:var(--size-spacing-1)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
         }] });
 
 class ModalComponent {
@@ -4989,11 +5022,11 @@ class ModalComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-modal__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close modal\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    class=\"c-modal__content\"\n    [ngClass]=\"getContentClasses()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n    [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n  >\n    <!-- Header -->\n    @if (getTitle() || getShowCloseButton()) {\n    <div class=\"c-modal__content__header\">\n      <div class=\"c-modal__content__header__left\">\n        @if (getTitle()) {\n        <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n          {{ getTitle() }}\n        </p>\n        }\n      </div>\n      @if (getShowCloseButton()) {\n      <div class=\"c-modal__content__header__right\">\n        <lib-button-icon\n          iconName=\"x-regular\"\n          size=\"sm\"\n          variant=\"neutral\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        ></lib-button-icon>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Description -->\n    <div class=\"c-modal__content__body\">\n      @if (getDescription()) {\n      <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n        <p>{{ getDescription() }}</p>\n      </div>\n      }\n\n      <!-- Body Content -->\n      <div #modalContent class=\"c-modal__content__body__content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n\n    <!-- Footer with Buttons -->\n    @if (getPrimaryButton() || getSecondaryButton()) {\n    <div class=\"c-modal__content__footer\">\n      @if (getSecondaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button secondary\"\n        [text]=\"getSecondaryButton()!.text\"\n        [variant]=\"getSecondaryButton()!.variant\"\n        [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n        [loading]=\"getSecondaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n      ></lib-button>\n      } @if (getPrimaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button primary\"\n        [text]=\"getPrimaryButton()!.text\"\n        [variant]=\"getPrimaryButton()!.variant\"\n        [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n        [loading]=\"getPrimaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onPrimaryButtonClick()\"\n      ></lib-button>\n      }\n    </div>\n    }\n  </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:0 var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto;margin:-2px;padding:2px}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0)}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter", "type"], outputs: ["clicked"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-modal__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close modal\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    class=\"c-modal__content\"\n    [ngClass]=\"getContentClasses()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n    [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n  >\n    <!-- Header -->\n    @if (getTitle() || getShowCloseButton()) {\n    <div class=\"c-modal__content__header\">\n      <div class=\"c-modal__content__header__left\">\n        @if (getTitle()) {\n        <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n          {{ getTitle() }}\n        </p>\n        }\n      </div>\n      @if (getShowCloseButton()) {\n      <div class=\"c-modal__content__header__right\">\n        <lib-button-icon\n          iconName=\"x-regular\"\n          size=\"sm\"\n          variant=\"neutral\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        ></lib-button-icon>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Description -->\n    <div class=\"c-modal__content__body\">\n      @if (getDescription()) {\n      <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n        <p>{{ getDescription() }}</p>\n      </div>\n      }\n\n      <!-- Body Content -->\n      <div #modalContent class=\"c-modal__content__body__content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n\n    <!-- Footer with Buttons -->\n    @if (getPrimaryButton() || getSecondaryButton()) {\n    <div class=\"c-modal__content__footer\">\n      @if (getSecondaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button secondary\"\n        [text]=\"getSecondaryButton()!.text\"\n        [variant]=\"getSecondaryButton()!.variant\"\n        [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n        [loading]=\"getSecondaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n      ></lib-button>\n      } @if (getPrimaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button primary\"\n        [text]=\"getPrimaryButton()!.text\"\n        [variant]=\"getPrimaryButton()!.variant\"\n        [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n        [loading]=\"getPrimaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onPrimaryButtonClick()\"\n      ></lib-button>\n      }\n    </div>\n    }\n  </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:0 var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto;margin:-2px;padding:2px}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:none;perspective:none;contain:none}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter", "type"], outputs: ["clicked"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-modal', imports: [NgClass, ButtonComponent, ButtonIconComponent], template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-modal__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close modal\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    class=\"c-modal__content\"\n    [ngClass]=\"getContentClasses()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n    [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n  >\n    <!-- Header -->\n    @if (getTitle() || getShowCloseButton()) {\n    <div class=\"c-modal__content__header\">\n      <div class=\"c-modal__content__header__left\">\n        @if (getTitle()) {\n        <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n          {{ getTitle() }}\n        </p>\n        }\n      </div>\n      @if (getShowCloseButton()) {\n      <div class=\"c-modal__content__header__right\">\n        <lib-button-icon\n          iconName=\"x-regular\"\n          size=\"sm\"\n          variant=\"neutral\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        ></lib-button-icon>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Description -->\n    <div class=\"c-modal__content__body\">\n      @if (getDescription()) {\n      <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n        <p>{{ getDescription() }}</p>\n      </div>\n      }\n\n      <!-- Body Content -->\n      <div #modalContent class=\"c-modal__content__body__content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n\n    <!-- Footer with Buttons -->\n    @if (getPrimaryButton() || getSecondaryButton()) {\n    <div class=\"c-modal__content__footer\">\n      @if (getSecondaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button secondary\"\n        [text]=\"getSecondaryButton()!.text\"\n        [variant]=\"getSecondaryButton()!.variant\"\n        [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n        [loading]=\"getSecondaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n      ></lib-button>\n      } @if (getPrimaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button primary\"\n        [text]=\"getPrimaryButton()!.text\"\n        [variant]=\"getPrimaryButton()!.variant\"\n        [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n        [loading]=\"getPrimaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onPrimaryButtonClick()\"\n      ></lib-button>\n      }\n    </div>\n    }\n  </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:0 var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto;margin:-2px;padding:2px}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0)}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"] }]
+            args: [{ selector: 'lib-modal', imports: [NgClass, ButtonComponent, ButtonIconComponent], template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-modal__backdrop\"\n    [ngClass]=\"getBackdropClasses()\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close modal\"\n  ></div>\n\n  <!-- Modal Content -->\n  <div\n    class=\"c-modal__content\"\n    [ngClass]=\"getContentClasses()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n    [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n    [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n  >\n    <!-- Header -->\n    @if (getTitle() || getShowCloseButton()) {\n    <div class=\"c-modal__content__header\">\n      <div class=\"c-modal__content__header__left\">\n        @if (getTitle()) {\n        <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n          {{ getTitle() }}\n        </p>\n        }\n      </div>\n      @if (getShowCloseButton()) {\n      <div class=\"c-modal__content__header__right\">\n        <lib-button-icon\n          iconName=\"x-regular\"\n          size=\"sm\"\n          variant=\"neutral\"\n          (click)=\"onCloseButtonClick()\"\n          aria-label=\"Close modal\"\n        ></lib-button-icon>\n      </div>\n      }\n    </div>\n    }\n\n    <!-- Description -->\n    <div class=\"c-modal__content__body\">\n      @if (getDescription()) {\n      <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n        <p>{{ getDescription() }}</p>\n      </div>\n      }\n\n      <!-- Body Content -->\n      <div #modalContent class=\"c-modal__content__body__content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n\n    <!-- Footer with Buttons -->\n    @if (getPrimaryButton() || getSecondaryButton()) {\n    <div class=\"c-modal__content__footer\">\n      @if (getSecondaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button secondary\"\n        [text]=\"getSecondaryButton()!.text\"\n        [variant]=\"getSecondaryButton()!.variant\"\n        [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n        [loading]=\"getSecondaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onSecondaryButtonClick()\"\n      ></lib-button>\n      } @if (getPrimaryButton()) {\n      <lib-button\n        class=\"c-modal__content__footer__button primary\"\n        [text]=\"getPrimaryButton()!.text\"\n        [variant]=\"getPrimaryButton()!.variant\"\n        [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n        [loading]=\"getPrimaryButton()!.loading ?? false\"\n        [fullWidth]=\"true\"\n        (clicked)=\"onPrimaryButtonClick()\"\n      ></lib-button>\n      }\n    </div>\n    }\n  </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);padding:0 var(--space-container-padding-sm)}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{overflow-y:auto;margin:-2px;padding:2px}.c-modal__content--sm .c-modal__content__body__content{max-height:200px}.c-modal__content--md .c-modal__content__body__content{min-height:200px;max-height:600px}.c-modal__content--lg .c-modal__content__body__content{min-height:600px;max-height:800px}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}}.c-modal__content__footer__button.primary{order:2}.c-modal__content__footer__button.secondary{order:1}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:none;perspective:none;contain:none}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"] }]
         }], ctorParameters: () => [] });
 
 class ModalService {
@@ -5905,11 +5938,11 @@ class SidebarComponent {
         // This method is overridden by the content component
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", ngImport: i0, template: "<div class=\"c-sidebar\" [ngClass]=\"'c-sidebar--' + state() + (visible() ? ' c-sidebar--visible' : ' c-sidebar--hide')\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-sidebar__backdrop\"\n    [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close sidebar\"\n  ></div>\n\n  <!-- Sidebar Content -->\n  <aside\n    class=\"c-sidebar__content\"\n    [ngClass]=\"'c-sidebar__content--' + state()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    (keydown.arrowup)=\"onArrowKeyNavigation('up')\"\n    (keydown.arrowdown)=\"onArrowKeyNavigation('down')\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <!-- Header -->\n    <header class=\"c-sidebar__header\">\n      <div class=\"c-sidebar__header-content\">\n        @if (state() === 'default') {\n          @if (hasSlotHeader()) {\n            <ng-content select=\"[slot=header]\"></ng-content>\n          } @else if (title()) {\n            <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n          }\n        }\n        @if (state() === 'navigation') {\n          <div class=\"c-sidebar__header-navigation\">\n            <lib-button-icon \n              iconName=\"caretleft-regular\" \n              variant=\"neutral\" \n              size=\"sm\"\n              ariaLabel=\"Back\"\n              (clicked)=\"onBackNavigation()\">\n            </lib-button-icon>\n            <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n          </div>\n        }\n      </div>\n      <lib-button-icon \n        iconName=\"x-regular\" \n        variant=\"neutral\" \n        size=\"sm\"\n        ariaLabel=\"Close\"\n        (clicked)=\"onCloseButtonClick()\">\n      </lib-button-icon>\n    </header>\n    \n    <!-- Body Content -->\n    <div class=\"c-sidebar__body\">\n      <ng-content></ng-content>\n    </div>\n    \n    <!-- Footer Content -->\n    <footer class=\"c-sidebar__footer\" [ngClass]=\"{'c-sidebar__footer--hidden': !hasSlotFooter()}\">\n      <div class=\"c-sidebar__footer-content\">\n        <ng-content select=\"[slot=footer]\"></ng-content>\n      </div>\n    </footer>\n  </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__header{padding:var(--space-component-padding-lg) var(--space-container-padding-md);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-default);display:flex;align-items:center;justify-content:space-between;gap:var(--space-container-gap-sm)}.c-sidebar__header-content{height:2rem;display:flex;align-items:center;flex:1}.c-sidebar__header-title{flex:1;color:var(--color-core-content-default);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-default-size);font-style:normal;font-weight:var(--typography-label-lg-default-weight);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing)}.c-sidebar__header-navigation{display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-sidebar__body{padding:var(--space-component-padding-lg) var(--space-component-padding-md);flex:1;overflow-y:auto}.c-sidebar__footer{padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);flex-shrink:0}.c-sidebar__footer--hidden{display:none}.c-sidebar__footer-content{display:flex;flex-direction:column;gap:var(--space-component-gap-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", ngImport: i0, template: "<div class=\"c-sidebar\" [ngClass]=\"'c-sidebar--' + state() + (visible() ? ' c-sidebar--visible' : ' c-sidebar--hide')\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-sidebar__backdrop\"\n    [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close sidebar\"\n  ></div>\n\n  <!-- Sidebar Content -->\n  <aside\n    class=\"c-sidebar__content\"\n    [ngClass]=\"'c-sidebar__content--' + state()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    (keydown.arrowup)=\"onArrowKeyNavigation('up')\"\n    (keydown.arrowdown)=\"onArrowKeyNavigation('down')\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <!-- Header -->\n    <header class=\"c-sidebar__header\">\n      <div class=\"c-sidebar__header-content\">\n        @if (state() === 'default') {\n          @if (hasSlotHeader()) {\n            <ng-content select=\"[slot=header]\"></ng-content>\n          } @else if (title()) {\n            <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n          }\n        }\n        @if (state() === 'navigation') {\n          <div class=\"c-sidebar__header-navigation\">\n            <lib-button-icon \n              iconName=\"caretleft-regular\" \n              variant=\"neutral\" \n              size=\"sm\"\n              ariaLabel=\"Back\"\n              (clicked)=\"onBackNavigation()\">\n            </lib-button-icon>\n            <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n          </div>\n        }\n      </div>\n      <lib-button-icon \n        iconName=\"x-regular\" \n        variant=\"neutral\" \n        size=\"sm\"\n        ariaLabel=\"Close\"\n        (clicked)=\"onCloseButtonClick()\">\n      </lib-button-icon>\n    </header>\n    \n    <!-- Body Content -->\n    <div class=\"c-sidebar__body\">\n      <ng-content></ng-content>\n    </div>\n    \n    <!-- Footer Content -->\n    <footer class=\"c-sidebar__footer\" [ngClass]=\"{'c-sidebar__footer--hidden': !hasSlotFooter()}\">\n      <div class=\"c-sidebar__footer-content\">\n        <ng-content select=\"[slot=footer]\"></ng-content>\n      </div>\n    </footer>\n  </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__header{padding:var(--space-component-padding-lg) var(--space-container-padding-md);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-default);display:flex;align-items:center;justify-content:space-between;gap:var(--space-container-gap-sm)}.c-sidebar__header-content{height:2rem;display:flex;align-items:center;flex:1}.c-sidebar__header-title{flex:1;color:var(--color-core-content-default);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-default-size);font-style:normal;font-weight:var(--typography-label-lg-default-weight);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing)}.c-sidebar__header-navigation{display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-sidebar__body{padding:var(--space-component-padding-sm);flex:1;overflow-y:auto}@media (min-width: 768px){.c-sidebar__body{padding:var(--space-component-padding-lg) var(--space-component-padding-md)}}.c-sidebar__footer{padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);flex-shrink:0}.c-sidebar__footer--hidden{display:none}.c-sidebar__footer-content{display:flex;flex-direction:column;gap:var(--space-component-gap-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-sidebar', imports: [CommonModule, ButtonIconComponent, NgClass], template: "<div class=\"c-sidebar\" [ngClass]=\"'c-sidebar--' + state() + (visible() ? ' c-sidebar--visible' : ' c-sidebar--hide')\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-sidebar__backdrop\"\n    [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close sidebar\"\n  ></div>\n\n  <!-- Sidebar Content -->\n  <aside\n    class=\"c-sidebar__content\"\n    [ngClass]=\"'c-sidebar__content--' + state()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    (keydown.arrowup)=\"onArrowKeyNavigation('up')\"\n    (keydown.arrowdown)=\"onArrowKeyNavigation('down')\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <!-- Header -->\n    <header class=\"c-sidebar__header\">\n      <div class=\"c-sidebar__header-content\">\n        @if (state() === 'default') {\n          @if (hasSlotHeader()) {\n            <ng-content select=\"[slot=header]\"></ng-content>\n          } @else if (title()) {\n            <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n          }\n        }\n        @if (state() === 'navigation') {\n          <div class=\"c-sidebar__header-navigation\">\n            <lib-button-icon \n              iconName=\"caretleft-regular\" \n              variant=\"neutral\" \n              size=\"sm\"\n              ariaLabel=\"Back\"\n              (clicked)=\"onBackNavigation()\">\n            </lib-button-icon>\n            <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n          </div>\n        }\n      </div>\n      <lib-button-icon \n        iconName=\"x-regular\" \n        variant=\"neutral\" \n        size=\"sm\"\n        ariaLabel=\"Close\"\n        (clicked)=\"onCloseButtonClick()\">\n      </lib-button-icon>\n    </header>\n    \n    <!-- Body Content -->\n    <div class=\"c-sidebar__body\">\n      <ng-content></ng-content>\n    </div>\n    \n    <!-- Footer Content -->\n    <footer class=\"c-sidebar__footer\" [ngClass]=\"{'c-sidebar__footer--hidden': !hasSlotFooter()}\">\n      <div class=\"c-sidebar__footer-content\">\n        <ng-content select=\"[slot=footer]\"></ng-content>\n      </div>\n    </footer>\n  </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__header{padding:var(--space-component-padding-lg) var(--space-container-padding-md);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-default);display:flex;align-items:center;justify-content:space-between;gap:var(--space-container-gap-sm)}.c-sidebar__header-content{height:2rem;display:flex;align-items:center;flex:1}.c-sidebar__header-title{flex:1;color:var(--color-core-content-default);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-default-size);font-style:normal;font-weight:var(--typography-label-lg-default-weight);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing)}.c-sidebar__header-navigation{display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-sidebar__body{padding:var(--space-component-padding-lg) var(--space-component-padding-md);flex:1;overflow-y:auto}.c-sidebar__footer{padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);flex-shrink:0}.c-sidebar__footer--hidden{display:none}.c-sidebar__footer-content{display:flex;flex-direction:column;gap:var(--space-component-gap-xs)}\n"] }]
+            args: [{ selector: 'lib-sidebar', imports: [CommonModule, ButtonIconComponent, NgClass], template: "<div class=\"c-sidebar\" [ngClass]=\"'c-sidebar--' + state() + (visible() ? ' c-sidebar--visible' : ' c-sidebar--hide')\">\n  <!-- Backdrop -->\n  <div\n    class=\"c-sidebar__backdrop\"\n    [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n    (click)=\"onBackdropClick()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Close sidebar\"\n  ></div>\n\n  <!-- Sidebar Content -->\n  <aside\n    class=\"c-sidebar__content\"\n    [ngClass]=\"'c-sidebar__content--' + state()\"\n    (keydown.escape)=\"onEscapeKey()\"\n    (keydown.arrowup)=\"onArrowKeyNavigation('up')\"\n    (keydown.arrowdown)=\"onArrowKeyNavigation('down')\"\n    role=\"dialog\"\n    tabindex=\"-1\"\n  >\n    <!-- Header -->\n    <header class=\"c-sidebar__header\">\n      <div class=\"c-sidebar__header-content\">\n        @if (state() === 'default') {\n          @if (hasSlotHeader()) {\n            <ng-content select=\"[slot=header]\"></ng-content>\n          } @else if (title()) {\n            <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n          }\n        }\n        @if (state() === 'navigation') {\n          <div class=\"c-sidebar__header-navigation\">\n            <lib-button-icon \n              iconName=\"caretleft-regular\" \n              variant=\"neutral\" \n              size=\"sm\"\n              ariaLabel=\"Back\"\n              (clicked)=\"onBackNavigation()\">\n            </lib-button-icon>\n            <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n          </div>\n        }\n      </div>\n      <lib-button-icon \n        iconName=\"x-regular\" \n        variant=\"neutral\" \n        size=\"sm\"\n        ariaLabel=\"Close\"\n        (clicked)=\"onCloseButtonClick()\">\n      </lib-button-icon>\n    </header>\n    \n    <!-- Body Content -->\n    <div class=\"c-sidebar__body\">\n      <ng-content></ng-content>\n    </div>\n    \n    <!-- Footer Content -->\n    <footer class=\"c-sidebar__footer\" [ngClass]=\"{'c-sidebar__footer--hidden': !hasSlotFooter()}\">\n      <div class=\"c-sidebar__footer-content\">\n        <ng-content select=\"[slot=footer]\"></ng-content>\n      </div>\n    </footer>\n  </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__header{padding:var(--space-component-padding-lg) var(--space-container-padding-md);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-default);display:flex;align-items:center;justify-content:space-between;gap:var(--space-container-gap-sm)}.c-sidebar__header-content{height:2rem;display:flex;align-items:center;flex:1}.c-sidebar__header-title{flex:1;color:var(--color-core-content-default);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-default-size);font-style:normal;font-weight:var(--typography-label-lg-default-weight);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing)}.c-sidebar__header-navigation{display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-sidebar__body{padding:var(--space-component-padding-sm);flex:1;overflow-y:auto}@media (min-width: 768px){.c-sidebar__body{padding:var(--space-component-padding-lg) var(--space-component-padding-md)}}.c-sidebar__footer{padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);flex-shrink:0}.c-sidebar__footer--hidden{display:none}.c-sidebar__footer-content{display:flex;flex-direction:column;gap:var(--space-component-gap-xs)}\n"] }]
         }] });
 
 class SidebarService {