cerxos-ui 0.0.12 → 0.0.13

package/fesm2022/cerxos-ui.mjs

@@ -2,17 +2,17 @@ import * as i0 from '@angular/core';
 import { Component, EventEmitter, ElementRef, HostListener, ViewChildren, ViewChild, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, Directive, ContentChildren, ContentChild, HostBinding } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@angular/common';
-import { NgTemplateOutlet, CommonModule, NgIf } from '@angular/common';
+import { NgTemplateOutlet, CommonModule } from '@angular/common';
 
 class CerxosUi {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CerxosUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CerxosUi, isStandalone: true, selector: "cxs-cerxos-ui", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CerxosUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CerxosUi, isStandalone: true, selector: "cxs-cerxos-ui", ngImport: i0, template: `
     <p>
       cerxos-ui works!
     </p>
   `, isInline: true, styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CerxosUi, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CerxosUi, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-cerxos-ui', imports: [], template: `
     <p>
@@ -235,10 +235,10 @@ class CxsActionMenuComponent {
             .map((item) => item.nativeElement)
             .filter((item) => !item.hasAttribute('disabled') && !item.hasAttribute('data-disabled'));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsActionMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsActionMenuComponent, isStandalone: true, selector: "cxs-action-menu", inputs: { items: "items", align: "align", ariaLabel: "ariaLabel", menuLabel: "menuLabel", disabled: "disabled", floating: "floating" }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: ["menuItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"relative inline-flex\">\n  <button\n    #trigger\n    type=\"button\"\n    [class]=\"triggerClass\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"ariaLabel\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <svg class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <circle cx=\"4\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"10\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"16\" cy=\"10\" r=\"1.5\"></circle>\n    </svg>\n  </button>\n\n  @if (isOpen) {\n    <div\n      #menu\n      [class]=\"menuClass\"\n      [attr.id]=\"menuId\"\n      role=\"menu\"\n      [attr.aria-label]=\"menuLabel\"\n      [style.top.px]=\"menuPosition?.top\"\n      [style.left.px]=\"menuPosition?.left\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @if (items.length) {\n        @for (item of items; track item.value) {\n          <button\n            #menuItem\n            type=\"button\"\n            role=\"menuitem\"\n            [class]=\"getItemClass(item)\"\n            [attr.data-disabled]=\"isItemDisabled(item) ? '' : null\"\n            [attr.aria-disabled]=\"isItemDisabled(item) ? 'true' : null\"\n            [disabled]=\"isItemDisabled(item)\"\n            (click)=\"onItemClick(item)\"\n          >\n            {{ item.label }}\n          </button>\n        }\n      } @else {\n        <span [class]=\"emptyStateClass\">No actions</span>\n      }\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsActionMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsActionMenuComponent, isStandalone: true, selector: "cxs-action-menu", inputs: { items: "items", align: "align", ariaLabel: "ariaLabel", menuLabel: "menuLabel", disabled: "disabled", floating: "floating" }, outputs: { itemSelected: "itemSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: ["menuItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"relative inline-flex\">\n  <button\n    #trigger\n    type=\"button\"\n    [class]=\"triggerClass\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"ariaLabel\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <svg class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <circle cx=\"4\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"10\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"16\" cy=\"10\" r=\"1.5\"></circle>\n    </svg>\n  </button>\n\n  @if (isOpen) {\n    <div\n      #menu\n      [class]=\"menuClass\"\n      [attr.id]=\"menuId\"\n      role=\"menu\"\n      [attr.aria-label]=\"menuLabel\"\n      [style.top.px]=\"menuPosition?.top\"\n      [style.left.px]=\"menuPosition?.left\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @if (items.length) {\n        @for (item of items; track item.value) {\n          <button\n            #menuItem\n            type=\"button\"\n            role=\"menuitem\"\n            [class]=\"getItemClass(item)\"\n            [attr.data-disabled]=\"isItemDisabled(item) ? '' : null\"\n            [attr.aria-disabled]=\"isItemDisabled(item) ? 'true' : null\"\n            [disabled]=\"isItemDisabled(item)\"\n            (click)=\"onItemClick(item)\"\n          >\n            {{ item.label }}\n          </button>\n        }\n      } @else {\n        <span [class]=\"emptyStateClass\">No actions</span>\n      }\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsActionMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsActionMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-action-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative inline-flex\">\n  <button\n    #trigger\n    type=\"button\"\n    [class]=\"triggerClass\"\n    aria-haspopup=\"menu\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-controls]=\"menuId\"\n    [attr.aria-label]=\"ariaLabel\"\n    (click)=\"toggle()\"\n    (keydown)=\"onTriggerKeydown($event)\"\n  >\n    <svg class=\"h-4 w-4\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <circle cx=\"4\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"10\" cy=\"10\" r=\"1.5\"></circle>\n      <circle cx=\"16\" cy=\"10\" r=\"1.5\"></circle>\n    </svg>\n  </button>\n\n  @if (isOpen) {\n    <div\n      #menu\n      [class]=\"menuClass\"\n      [attr.id]=\"menuId\"\n      role=\"menu\"\n      [attr.aria-label]=\"menuLabel\"\n      [style.top.px]=\"menuPosition?.top\"\n      [style.left.px]=\"menuPosition?.left\"\n      (keydown)=\"onMenuKeydown($event)\"\n    >\n      @if (items.length) {\n        @for (item of items; track item.value) {\n          <button\n            #menuItem\n            type=\"button\"\n            role=\"menuitem\"\n            [class]=\"getItemClass(item)\"\n            [attr.data-disabled]=\"isItemDisabled(item) ? '' : null\"\n            [attr.aria-disabled]=\"isItemDisabled(item) ? 'true' : null\"\n            [disabled]=\"isItemDisabled(item)\"\n            (click)=\"onItemClick(item)\"\n          >\n            {{ item.label }}\n          </button>\n        }\n      } @else {\n        <span [class]=\"emptyStateClass\">No actions</span>\n      }\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { items: [{
@@ -311,10 +311,10 @@ class CxsAlertComponent {
         this.isVisible = false;
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsAlertComponent, isStandalone: true, selector: "cxs-alert", inputs: { variant: "variant", title: "title", dismissible: "dismissible" }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isVisible) {\n  <div [class]=\"alertClass\" role=\"status\" aria-live=\"polite\">\n    <div class=\"flex flex-col gap-1\">\n      @if (title) {\n        <div [class]=\"titleClass\">{{ title }}</div>\n      }\n      <div class=\"text-[var(--cxs-color-on-surface)]\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    @if (dismissible) {\n      <button\n        type=\"button\"\n        [class]=\"closeButtonClass\"\n        aria-label=\"Dismiss alert\"\n        (click)=\"onClose()\"\n      >\n        x\n      </button>\n    }\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsAlertComponent, isStandalone: true, selector: "cxs-alert", inputs: { variant: "variant", title: "title", dismissible: "dismissible" }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isVisible) {\n  <div [class]=\"alertClass\" role=\"status\" aria-live=\"polite\">\n    <div class=\"flex flex-col gap-1\">\n      @if (title) {\n        <div [class]=\"titleClass\">{{ title }}</div>\n      }\n      <div class=\"text-[var(--cxs-color-on-surface)]\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    @if (dismissible) {\n      <button\n        type=\"button\"\n        [class]=\"closeButtonClass\"\n        aria-label=\"Dismiss alert\"\n        (click)=\"onClose()\"\n      >\n        x\n      </button>\n    }\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-alert', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isVisible) {\n  <div [class]=\"alertClass\" role=\"status\" aria-live=\"polite\">\n    <div class=\"flex flex-col gap-1\">\n      @if (title) {\n        <div [class]=\"titleClass\">{{ title }}</div>\n      }\n      <div class=\"text-[var(--cxs-color-on-surface)]\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    @if (dismissible) {\n      <button\n        type=\"button\"\n        [class]=\"closeButtonClass\"\n        aria-label=\"Dismiss alert\"\n        (click)=\"onClose()\"\n      >\n        x\n      </button>\n    }\n  </div>\n}\n" }]
         }], propDecorators: { variant: [{
@@ -338,10 +338,10 @@ class CxsAccordionComponent {
     get accordionClass() {
         return [BASE_CLASSES$9, SPACING_CLASSES[this.spacing]].join(' ');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsAccordionComponent, isStandalone: true, selector: "cxs-accordion", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div [class]=\"accordionClass\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CxsAccordionComponent, isStandalone: true, selector: "cxs-accordion", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div [class]=\"accordionClass\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsAccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-accordion', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"accordionClass\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { spacing: [{
@@ -406,10 +406,10 @@ class CxsAccordionItemComponent {
         this.expanded = !this.expanded;
         this.expandedChange.emit(this.expanded);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsAccordionItemComponent, isStandalone: true, selector: "cxs-accordion-item", inputs: { title: "title", expanded: "expanded", disabled: "disabled", size: "size" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<div [class]=\"itemClass\">\n  <button\n    type=\"button\"\n    [class]=\"headerClass\"\n    [id]=\"buttonId\"\n    [disabled]=\"disabled\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-controls]=\"contentId\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"flex min-w-0 flex-1 items-center gap-2\">\n      <ng-content select=\"[cxsAccordionTitle]\"></ng-content>\n      @if (title) {\n        <span class=\"truncate\">{{ title }}</span>\n      }\n    </span>\n    <svg aria-hidden=\"true\" [class]=\"iconClass\" viewBox=\"0 0 20 20\">\n      <path\n        d=\"M5 7l5 5 5-5\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"1.5\"\n      ></path>\n    </svg>\n  </button>\n\n  <div\n    [id]=\"contentId\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"buttonId\"\n    [class]=\"contentClass\"\n    [hidden]=\"!expanded\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsAccordionItemComponent, isStandalone: true, selector: "cxs-accordion-item", inputs: { title: "title", expanded: "expanded", disabled: "disabled", size: "size" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<div [class]=\"itemClass\">\n  <button\n    type=\"button\"\n    [class]=\"headerClass\"\n    [id]=\"buttonId\"\n    [disabled]=\"disabled\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-controls]=\"contentId\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"flex min-w-0 flex-1 items-center gap-2\">\n      <ng-content select=\"[cxsAccordionTitle]\"></ng-content>\n      @if (title) {\n        <span class=\"truncate\">{{ title }}</span>\n      }\n    </span>\n    <svg aria-hidden=\"true\" [class]=\"iconClass\" viewBox=\"0 0 20 20\">\n      <path\n        d=\"M5 7l5 5 5-5\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"1.5\"\n      ></path>\n    </svg>\n  </button>\n\n  <div\n    [id]=\"contentId\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"buttonId\"\n    [class]=\"contentClass\"\n    [hidden]=\"!expanded\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsAccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsAccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-accordion-item', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"itemClass\">\n  <button\n    type=\"button\"\n    [class]=\"headerClass\"\n    [id]=\"buttonId\"\n    [disabled]=\"disabled\"\n    [attr.aria-expanded]=\"expanded\"\n    [attr.aria-controls]=\"contentId\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"flex min-w-0 flex-1 items-center gap-2\">\n      <ng-content select=\"[cxsAccordionTitle]\"></ng-content>\n      @if (title) {\n        <span class=\"truncate\">{{ title }}</span>\n      }\n    </span>\n    <svg aria-hidden=\"true\" [class]=\"iconClass\" viewBox=\"0 0 20 20\">\n      <path\n        d=\"M5 7l5 5 5-5\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"1.5\"\n      ></path>\n    </svg>\n  </button>\n\n  <div\n    [id]=\"contentId\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"buttonId\"\n    [class]=\"contentClass\"\n    [hidden]=\"!expanded\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], propDecorators: { title: [{
@@ -444,10 +444,10 @@ class CxsBadgeComponent {
     get badgeClass() {
         return [BASE_CLASSES$8, VARIANT_CLASSES$7[this.variant], SIZE_CLASSES$7[this.size]].join(' ');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsBadgeComponent, isStandalone: true, selector: "cxs-badge", inputs: { variant: "variant", size: "size" }, ngImport: i0, template: "<span [class]=\"badgeClass\">\n  <ng-content></ng-content>\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CxsBadgeComponent, isStandalone: true, selector: "cxs-badge", inputs: { variant: "variant", size: "size" }, ngImport: i0, template: "<span [class]=\"badgeClass\">\n  <ng-content></ng-content>\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"badgeClass\">\n  <ng-content></ng-content>\n</span>\n" }]
         }], propDecorators: { variant: [{
@@ -538,10 +538,10 @@ class CxsAvatarComponent {
         const word = parts[0] ?? '';
         return word.slice(0, 2).toUpperCase() || '?';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsAvatarComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsAvatarComponent, isStandalone: true, selector: "cxs-avatar", inputs: { src: "src", name: "name", alt: "alt", size: "size", shape: "shape" }, ngImport: i0, template: "<div\n  [class]=\"avatarClass\"\n  [attr.role]=\"showImage ? null : 'img'\"\n  [attr.aria-label]=\"showImage ? null : fallbackLabel\"\n>\n  @if (showImage) {\n    <img\n      [attr.src]=\"src\"\n      [attr.alt]=\"altText\"\n      class=\"h-full w-full object-cover\"\n      (error)=\"onImageError()\"\n    />\n  } @else {\n    <span [class]=\"fallbackClass\" aria-hidden=\"true\">{{ fallbackText }}</span>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsAvatarComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsAvatarComponent, isStandalone: true, selector: "cxs-avatar", inputs: { src: "src", name: "name", alt: "alt", size: "size", shape: "shape" }, ngImport: i0, template: "<div\n  [class]=\"avatarClass\"\n  [attr.role]=\"showImage ? null : 'img'\"\n  [attr.aria-label]=\"showImage ? null : fallbackLabel\"\n>\n  @if (showImage) {\n    <img\n      [attr.src]=\"src\"\n      [attr.alt]=\"altText\"\n      class=\"h-full w-full object-cover\"\n      (error)=\"onImageError()\"\n    />\n  } @else {\n    <span [class]=\"fallbackClass\" aria-hidden=\"true\">{{ fallbackText }}</span>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-avatar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"avatarClass\"\n  [attr.role]=\"showImage ? null : 'img'\"\n  [attr.aria-label]=\"showImage ? null : fallbackLabel\"\n>\n  @if (showImage) {\n    <img\n      [attr.src]=\"src\"\n      [attr.alt]=\"altText\"\n      class=\"h-full w-full object-cover\"\n      (error)=\"onImageError()\"\n    />\n  } @else {\n    <span [class]=\"fallbackClass\" aria-hidden=\"true\">{{ fallbackText }}</span>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -628,10 +628,10 @@ class CxsBreadcrumbComponent {
         }
         return item.rel ?? null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsBreadcrumbComponent, isStandalone: true, selector: "cxs-breadcrumb", inputs: { items: "items", separator: "separator", ariaLabel: "ariaLabel", size: "size", variant: "variant", disabled: "disabled" }, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel\">\n  <ol [class]=\"listClass\">\n    @for (item of items; track item; let last = $last) {\n      <li [class]=\"itemClass\">\n      @if (isLink(item, last)) {\n        <a\n          [class]=\"getLinkClass(item)\"\n          [attr.href]=\"item.href\"\n          [attr.target]=\"item.target ?? null\"\n          [attr.rel]=\"getItemRel(item)\"\n          [attr.aria-label]=\"item.ariaLabel ?? null\"\n        >\n          {{ item.label }}\n        </a>\n      } @else {\n        <span\n          [class]=\"getLabelClass(item, last)\"\n          [attr.aria-current]=\"last ? 'page' : null\"\n        >\n          {{ item.label }}\n        </span>\n      }\n      @if (!last && separator) {\n        <span [class]=\"separatorClass\" aria-hidden=\"true\">{{ separator }}</span>\n      }\n      </li>\n    }\n  </ol>\n</nav>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsBreadcrumbComponent, isStandalone: true, selector: "cxs-breadcrumb", inputs: { items: "items", separator: "separator", ariaLabel: "ariaLabel", size: "size", variant: "variant", disabled: "disabled" }, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel\">\n  <ol [class]=\"listClass\">\n    @for (item of items; track item; let last = $last) {\n      <li [class]=\"itemClass\">\n      @if (isLink(item, last)) {\n        <a\n          [class]=\"getLinkClass(item)\"\n          [attr.href]=\"item.href\"\n          [attr.target]=\"item.target ?? null\"\n          [attr.rel]=\"getItemRel(item)\"\n          [attr.aria-label]=\"item.ariaLabel ?? null\"\n        >\n          {{ item.label }}\n        </a>\n      } @else {\n        <span\n          [class]=\"getLabelClass(item, last)\"\n          [attr.aria-current]=\"last ? 'page' : null\"\n        >\n          {{ item.label }}\n        </span>\n      }\n      @if (!last && separator) {\n        <span [class]=\"separatorClass\" aria-hidden=\"true\">{{ separator }}</span>\n      }\n      </li>\n    }\n  </ol>\n</nav>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-breadcrumb', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [attr.aria-label]=\"ariaLabel\">\n  <ol [class]=\"listClass\">\n    @for (item of items; track item; let last = $last) {\n      <li [class]=\"itemClass\">\n      @if (isLink(item, last)) {\n        <a\n          [class]=\"getLinkClass(item)\"\n          [attr.href]=\"item.href\"\n          [attr.target]=\"item.target ?? null\"\n          [attr.rel]=\"getItemRel(item)\"\n          [attr.aria-label]=\"item.ariaLabel ?? null\"\n        >\n          {{ item.label }}\n        </a>\n      } @else {\n        <span\n          [class]=\"getLabelClass(item, last)\"\n          [attr.aria-current]=\"last ? 'page' : null\"\n        >\n          {{ item.label }}\n        </span>\n      }\n      @if (!last && separator) {\n        <span [class]=\"separatorClass\" aria-hidden=\"true\">{{ separator }}</span>\n      }\n      </li>\n    }\n  </ol>\n</nav>\n" }]
         }], propDecorators: { items: [{
@@ -681,10 +681,10 @@ class CxsButtonComponent {
             .filter(Boolean)
             .join(' ');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsButtonComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsButtonComponent, isStandalone: true, selector: "cxs-button", inputs: { variant: "variant", size: "size", disabled: "disabled", loading: "loading", type: "type" }, ngImport: i0, template: "<button\n  [class]=\"buttonClass\"\n  [attr.type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n  @if (loading) {\n    <span\n      class=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n  <ng-content select=\"[cxsButtonIcon]\"></ng-content>\n  <span class=\"truncate\">\n    <ng-content></ng-content>\n  </span>\n</button>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsButtonComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsButtonComponent, isStandalone: true, selector: "cxs-button", inputs: { variant: "variant", size: "size", disabled: "disabled", loading: "loading", type: "type" }, ngImport: i0, template: "<button\n  [class]=\"buttonClass\"\n  [attr.type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n  @if (loading) {\n    <span\n      class=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n  <ng-content select=\"[cxsButtonIcon]\"></ng-content>\n  <span class=\"truncate\">\n    <ng-content></ng-content>\n  </span>\n</button>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [class]=\"buttonClass\"\n  [attr.type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n  @if (loading) {\n    <span\n      class=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n  <ng-content select=\"[cxsButtonIcon]\"></ng-content>\n  <span class=\"truncate\">\n    <ng-content></ng-content>\n  </span>\n</button>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -730,10 +730,10 @@ class CxsCardComponent {
             .filter(Boolean)
             .join(' ');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsCardComponent, isStandalone: true, selector: "cxs-card", inputs: { variant: "variant", size: "size", elevated: "elevated", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby" }, ngImport: i0, template: "<section\n  [class]=\"cardClass\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledby\"\n>\n  <ng-content></ng-content>\n</section>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CxsCardComponent, isStandalone: true, selector: "cxs-card", inputs: { variant: "variant", size: "size", elevated: "elevated", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby" }, ngImport: i0, template: "<section\n  [class]=\"cardClass\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledby\"\n>\n  <ng-content></ng-content>\n</section>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  [class]=\"cardClass\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledby\"\n>\n  <ng-content></ng-content>\n</section>\n" }]
         }], propDecorators: { variant: [{
@@ -846,8 +846,8 @@ class CxsCheckboxComponent {
     onBlur() {
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsCheckboxComponent, isStandalone: true, selector: "cxs-checkbox", inputs: { checked: "checked", indeterminate: "indeterminate", disabled: "disabled", label: "label", size: "size", id: "id", name: "name", required: "required", autofocus: "autofocus", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsCheckboxComponent, isStandalone: true, selector: "cxs-checkbox", inputs: { checked: "checked", indeterminate: "indeterminate", disabled: "disabled", label: "label", size: "size", id: "id", name: "name", required: "required", autofocus: "autofocus", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CxsCheckboxComponent),
@@ -855,7 +855,7 @@ class CxsCheckboxComponent {
             }
         ], ngImport: i0, template: "<label [class]=\"wrapperClass\">\n  <input\n    class=\"peer sr-only\"\n    type=\"checkbox\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    [attr.aria-checked]=\"ariaChecked\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n    [checked]=\"checked\"\n    [indeterminate]=\"indeterminate\"\n    [disabled]=\"isDisabled\"\n    [required]=\"required\"\n    (change)=\"onCheckboxChange($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <span [class]=\"controlClass\" aria-hidden=\"true\"></span>\n  @if (label) {\n    <span [class]=\"labelClass\">{{ label }}</span>\n  } @else {\n    <span [class]=\"labelClass\">\n      <ng-content></ng-content>\n    </span>\n  }\n</label>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1003,10 +1003,10 @@ class CxsCarouselComponent {
             this.timerId = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCarouselComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsCarouselComponent, isStandalone: true, selector: "cxs-carousel", inputs: { items: "items", activeIndex: "activeIndex", autoplay: "autoplay", interval: "interval", loop: "loop", showControls: "showControls", showIndicators: "showIndicators", ariaLabel: "ariaLabel" }, outputs: { activeIndexChange: "activeIndexChange" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"wrapperClass\" [attr.aria-label]=\"ariaLabel\">\n  <div [class]=\"trackClass\" [style.transform]=\"trackStyle\">\n    @for (item of items; track item) {\n      <div [class]=\"slideClass\">\n        @if (item.image) {\n          <img\n            [class]=\"imageClass\"\n            [attr.src]=\"item.image\"\n            [attr.alt]=\"item.alt ?? item.title ?? 'Carousel image'\"\n          />\n        }\n        @if (item.title || item.description) {\n          <div [class]=\"contentClass\">\n            @if (item.title) {\n              <div class=\"text-base font-semibold\">{{ item.title }}</div>\n            }\n            @if (item.description) {\n              <div class=\"text-sm text-white/80\">{{ item.description }}</div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showControls && items.length > 1) {\n    <button\n      type=\"button\"\n      [class]=\"controlClass\"\n      style=\"left: 12px\"\n      aria-label=\"Previous slide\"\n      (click)=\"previous()\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-3\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\" />\n      </svg>\n    </button>\n    <button\n      type=\"button\"\n      [class]=\"controlClass\"\n      style=\"right: 12px\"\n      aria-label=\"Next slide\"\n      (click)=\"next()\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-3\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" />\n      </svg>\n\n    </button>\n  }\n\n  @if (showIndicators && items.length > 1) {\n    <div [class]=\"indicatorContainerClass\">\n      @for (item of items; track item; let index = $index) {\n        <button\n          type=\"button\"\n          [class]=\"indicatorClass(index === activeIndex)\"\n          [attr.aria-label]=\"'Go to slide ' + (index + 1)\"\n          (click)=\"goTo(index)\"\n        ></button>\n      }\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsCarouselComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsCarouselComponent, isStandalone: true, selector: "cxs-carousel", inputs: { items: "items", activeIndex: "activeIndex", autoplay: "autoplay", interval: "interval", loop: "loop", showControls: "showControls", showIndicators: "showIndicators", ariaLabel: "ariaLabel" }, outputs: { activeIndexChange: "activeIndexChange" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"wrapperClass\" [attr.aria-label]=\"ariaLabel\">\n  <div [class]=\"trackClass\" [style.transform]=\"trackStyle\">\n    @for (item of items; track item) {\n      <div [class]=\"slideClass\">\n        @if (item.image) {\n          <img\n            [class]=\"imageClass\"\n            [attr.src]=\"item.image\"\n            [attr.alt]=\"item.alt ?? item.title ?? 'Carousel image'\"\n          />\n        }\n        @if (item.title || item.description) {\n          <div [class]=\"contentClass\">\n            @if (item.title) {\n              <div class=\"text-base font-semibold\">{{ item.title }}</div>\n            }\n            @if (item.description) {\n              <div class=\"text-sm text-white/80\">{{ item.description }}</div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showControls && items.length > 1) {\n    <button\n      type=\"button\"\n      [class]=\"controlClass\"\n      style=\"left: 12px\"\n      aria-label=\"Previous slide\"\n      (click)=\"previous()\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-3\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\" />\n      </svg>\n    </button>\n    <button\n      type=\"button\"\n      [class]=\"controlClass\"\n      style=\"right: 12px\"\n      aria-label=\"Next slide\"\n      (click)=\"next()\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-3\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" />\n      </svg>\n\n    </button>\n  }\n\n  @if (showIndicators && items.length > 1) {\n    <div [class]=\"indicatorContainerClass\">\n      @for (item of items; track item; let index = $index) {\n        <button\n          type=\"button\"\n          [class]=\"indicatorClass(index === activeIndex)\"\n          [attr.aria-label]=\"'Go to slide ' + (index + 1)\"\n          (click)=\"goTo(index)\"\n        ></button>\n      }\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsCarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-carousel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClass\" [attr.aria-label]=\"ariaLabel\">\n  <div [class]=\"trackClass\" [style.transform]=\"trackStyle\">\n    @for (item of items; track item) {\n      <div [class]=\"slideClass\">\n        @if (item.image) {\n          <img\n            [class]=\"imageClass\"\n            [attr.src]=\"item.image\"\n            [attr.alt]=\"item.alt ?? item.title ?? 'Carousel image'\"\n          />\n        }\n        @if (item.title || item.description) {\n          <div [class]=\"contentClass\">\n            @if (item.title) {\n              <div class=\"text-base font-semibold\">{{ item.title }}</div>\n            }\n            @if (item.description) {\n              <div class=\"text-sm text-white/80\">{{ item.description }}</div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  @if (showControls && items.length > 1) {\n    <button\n      type=\"button\"\n      [class]=\"controlClass\"\n      style=\"left: 12px\"\n      aria-label=\"Previous slide\"\n      (click)=\"previous()\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-3\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\" />\n      </svg>\n    </button>\n    <button\n      type=\"button\"\n      [class]=\"controlClass\"\n      style=\"right: 12px\"\n      aria-label=\"Next slide\"\n      (click)=\"next()\"\n    >\n      <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-3\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" />\n      </svg>\n\n    </button>\n  }\n\n  @if (showIndicators && items.length > 1) {\n    <div [class]=\"indicatorContainerClass\">\n      @for (item of items; track item; let index = $index) {\n        <button\n          type=\"button\"\n          [class]=\"indicatorClass(index === activeIndex)\"\n          [attr.aria-label]=\"'Go to slide ' + (index + 1)\"\n          (click)=\"goTo(index)\"\n        ></button>\n      }\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -1038,10 +1038,10 @@ class CxsDataTableCellDirective {
     constructor(template) {
         this.template = template;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDataTableCellDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: CxsDataTableCellDirective, isStandalone: true, selector: "[cxsDataTableCell]", inputs: { columnKey: ["cxsDataTableCell", "columnKey"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsDataTableCellDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: CxsDataTableCellDirective, isStandalone: true, selector: "[cxsDataTableCell]", inputs: { columnKey: ["cxsDataTableCell", "columnKey"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDataTableCellDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsDataTableCellDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cxsDataTableCell]',
@@ -1601,10 +1601,10 @@ class CxsDataTableComponent {
         }
         return value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDataTableComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsDataTableComponent, isStandalone: true, selector: "cxs-data-table", inputs: { columns: "columns", data: "data", caption: "caption", title: "title", subtitle: "subtitle", ariaLabel: "ariaLabel", striped: "striped", bordered: "bordered", compact: "compact", loading: "loading", emptyMessage: "emptyMessage", emptyCell: "emptyCell", allowOverflow: "allowOverflow", columnBorders: "columnBorders", pageSize: "pageSize", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions", showPagination: "showPagination", showPageSize: "showPageSize", manualPagination: "manualPagination", total: "total", sortKey: "sortKey", sortDirection: "sortDirection", manualSort: "manualSort", showToolbar: "showToolbar", showFilters: "showFilters", showColumnVisibility: "showColumnVisibility", showGlobalSearch: "showGlobalSearch", manualFilter: "manualFilter", selectable: "selectable", rowKey: "rowKey", selectedKeys: "selectedKeys", bulkActions: "bulkActions" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", filterChange: "filterChange", selectionChange: "selectionChange", bulkAction: "bulkAction" }, queries: [{ propertyName: "cellTemplates", predicate: CxsDataTableCellDirective }], usesOnChanges: true, ngImport: i0, template: "@if (hasTitleBlock) {\n  <div [class]=\"titleBarClass\">\n    <div class=\"min-w-0\">\n      @if (title) {\n        <div [class]=\"titleTextClass\">{{ title }}</div>\n      }\n      @if (subtitle) {\n        <div [class]=\"subtitleTextClass\">{{ subtitle }}</div>\n      }\n    </div>\n    @if (showToolbar) {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        @if (showGlobalSearch) {\n          <div [class]=\"toolbarInputWrapperClass\">\n            <svg\n              [class]=\"toolbarInputIconClass\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              aria-hidden=\"true\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"m21 21-4.35-4.35m1.85-5.65a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z\"\n              />\n            </svg>\n            <input\n              type=\"search\"\n              [class]=\"toolbarInputInlineClass\"\n              placeholder=\"Search...\"\n              [value]=\"globalFilter\"\n              (input)=\"onGlobalFilterChange($any($event.target).value)\"\n            />\n          </div>\n        }\n        @if (showFilters) {\n          <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n            Filters\n          </button>\n        }\n        @if (showColumnVisibility) {\n          <details class=\"relative\">\n            <summary [class]=\"toolbarButtonClass\">Columns</summary>\n            <div\n              class=\"absolute right-0 mt-2 w-48 rounded-(--cxs-radius-md) border border-(--cxs-color-border) bg-(--cxs-color-surface) p-2 shadow-(--cxs-shadow-sm)\"\n            >\n              @for (column of columns; track column) {\n                <label class=\"flex items-center gap-2 px-2 py-1 text-sm\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"columnVisibility[column.key]\"\n                    (change)=\"toggleColumnVisibility(column.key)\"\n                  />\n                  <span>{{ column.label }}</span>\n                </label>\n              }\n            </div>\n          </details>\n        }\n      </div>\n    }\n  </div>\n} @else if (showToolbar) {\n  <div [class]=\"toolbarClass\">\n    <div [class]=\"toolbarGroupClass\">\n      @if (showGlobalSearch) {\n        <div [class]=\"toolbarInputWrapperClass\">\n          <svg\n            [class]=\"toolbarInputIconClass\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"m21 21-4.35-4.35m1.85-5.65a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z\"\n            />\n          </svg>\n          <input\n            type=\"search\"\n            [class]=\"toolbarInputClass\"\n            placeholder=\"Search...\"\n            [value]=\"globalFilter\"\n            (input)=\"onGlobalFilterChange($any($event.target).value)\"\n          />\n        </div>\n      }\n    </div>\n    <div [class]=\"toolbarGroupClass\">\n      @if (showFilters) {\n        <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n          Filters\n        </button>\n      }\n      @if (showColumnVisibility) {\n        <details class=\"relative\">\n          <summary [class]=\"toolbarButtonClass\">Columns</summary>\n          <div\n            class=\"absolute right-0 mt-2 w-48 rounded-(--cxs-radius-md) border border-(--cxs-color-border) bg-(--cxs-color-surface) p-2 shadow-(--cxs-shadow-sm)\"\n          >\n            @for (column of columns; track column) {\n              <label class=\"flex items-center gap-2 px-2 py-1 text-sm\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"columnVisibility[column.key]\"\n                  (change)=\"toggleColumnVisibility(column.key)\"\n                />\n                <span>{{ column.label }}</span>\n              </label>\n            }\n          </div>\n        </details>\n      }\n    </div>\n  </div>\n}\n\n@if (selectable && selectedCount > 0 && bulkActions.length > 0) {\n  <div [class]=\"bulkBarClass\">\n    <span>{{ selectedCount }} selected</span>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @for (action of bulkActions; track action) {\n        <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"runBulkAction(action.id)\">\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  </div>\n}\n\n<div [class]=\"wrapperClass\">\n  <table [class]=\"tableClass\" [attr.aria-label]=\"ariaLabel\">\n    @if (caption) {\n      <caption class=\"sr-only\">{{ caption }}</caption>\n    }\n    <thead>\n      <tr [class]=\"headerRowClass\">\n        @if (selectable) {\n          <th class=\"px-3 py-2 text-left\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"allVisibleSelected\"\n              [indeterminate]=\"someVisibleSelected\"\n              (change)=\"toggleSelectAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </th>\n        }\n        @for (column of visibleColumns; track column) {\n          <th\n            class=\"relative\"\n            [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n            [style.width]=\"columnWidth(column)\"\n            [style.minWidth]=\"columnMinWidth(column)\"\n            [style.left]=\"pinnedLeft(column)\"\n            [style.right]=\"pinnedRight(column)\"\n            scope=\"col\"\n            [attr.aria-sort]=\"ariaSort(column)\"\n          >\n            @if (column.sortable) {\n              <button\n                type=\"button\"\n                [class]=\"headerButtonClass()\"\n                (click)=\"onSort(column)\"\n              >\n                <span>{{ column.label }}</span>\n                @if (sortKey === column.key) {\n                  @if (sortDirection === 'asc') {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18\"\n                      />\n                    </svg>\n                  } @else {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3\"\n                      />\n                    </svg>\n                  }\n                }\n              </button>\n            } @else {\n              {{ column.label }}\n            }\n            @if (column.resizable !== false) {\n              <span\n                [class]=\"resizeHandleClass\"\n                (mousedown)=\"onResizeStart($event, column)\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n      @if (showFilters && filtersOpen) {\n        <tr [class]=\"headerRowClass\">\n          @if (selectable) {\n            <th class=\"px-3 py-2 text-left\"></th>\n          }\n          @for (column of visibleColumns; track column) {\n            <th\n              [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n              [style.left]=\"pinnedLeft(column)\"\n              [style.right]=\"pinnedRight(column)\"\n            >\n              @if (column.filterable) {\n                @if (column.filterType === 'select') {\n                  <select\n                    [class]=\"headerFilterInputClass()\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (change)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  >\n                    <option value=\"\">All</option>\n                    @for (option of column.filterOptions ?? []; track option) {\n                      <option [value]=\"option.value\">{{ option.label }}</option>\n                    }\n                  </select>\n                } @else {\n                  <input\n                    [class]=\"headerFilterInputClass()\"\n                    [attr.type]=\"column.filterType === 'number' ? 'number' : 'text'\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (input)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  />\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n    <tbody>\n      @if (loading) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">Loading...</span>\n          </td>\n        </tr>\n      } @else if (displayRows.length === 0) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">{{ emptyMessage }}</span>\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayRows; track row) {\n          <tr [class]=\"bodyRowClass\">\n            @if (selectable) {\n              <td class=\"px-3 py-2\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isSelected(row)\"\n                  (change)=\"toggleRowSelection(row)\"\n                  aria-label=\"Select row\"\n                />\n              </td>\n            }\n            @for (column of visibleColumns; track column) {\n              <td\n                [class]=\"bodyCellClass(column) + ' ' + pinnedClass(column)\"\n                [style.left]=\"pinnedLeft(column)\"\n                [style.right]=\"pinnedRight(column)\"\n              >\n                @if (cellTemplate(column.key); as template) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, value: row[column.key], column }\"\n                  ></ng-container>\n                } @else {\n                  {{ cellValue(row, column) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (showPagination) {\n  <div [class]=\"paginationClass\">\n    <div class=\"flex items-center gap-2\">\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage <= 1\"\n        (click)=\"previousPage()\"\n      >\n        Previous\n      </button>\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage >= totalPages\"\n        (click)=\"nextPage()\"\n      >\n        Next\n      </button>\n      <span class=\"text-(--cxs-color-on-surface-muted)\">{{ pageLabel }}</span>\n    </div>\n    @if (showPageSize) {\n      <label class=\"flex items-center gap-2 text-(--cxs-color-on-surface-muted)\">\n        <span>Rows</span>\n        <select\n          #pageSizeSelect\n          [class]=\"pageSelectClass\"\n          [value]=\"currentPageSize\"\n          (change)=\"onPageSizeChange(pageSizeSelect.value)\"\n        >\n          @for (size of pageSizeOptions; track size) {\n            <option [value]=\"size\">{{ size }}</option>\n          }\n        </select>\n      </label>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsDataTableComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsDataTableComponent, isStandalone: true, selector: "cxs-data-table", inputs: { columns: "columns", data: "data", caption: "caption", title: "title", subtitle: "subtitle", ariaLabel: "ariaLabel", striped: "striped", bordered: "bordered", compact: "compact", loading: "loading", emptyMessage: "emptyMessage", emptyCell: "emptyCell", allowOverflow: "allowOverflow", columnBorders: "columnBorders", pageSize: "pageSize", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions", showPagination: "showPagination", showPageSize: "showPageSize", manualPagination: "manualPagination", total: "total", sortKey: "sortKey", sortDirection: "sortDirection", manualSort: "manualSort", showToolbar: "showToolbar", showFilters: "showFilters", showColumnVisibility: "showColumnVisibility", showGlobalSearch: "showGlobalSearch", manualFilter: "manualFilter", selectable: "selectable", rowKey: "rowKey", selectedKeys: "selectedKeys", bulkActions: "bulkActions" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", filterChange: "filterChange", selectionChange: "selectionChange", bulkAction: "bulkAction" }, queries: [{ propertyName: "cellTemplates", predicate: CxsDataTableCellDirective }], usesOnChanges: true, ngImport: i0, template: "@if (hasTitleBlock) {\n  <div [class]=\"titleBarClass\">\n    <div class=\"min-w-0\">\n      @if (title) {\n        <div [class]=\"titleTextClass\">{{ title }}</div>\n      }\n      @if (subtitle) {\n        <div [class]=\"subtitleTextClass\">{{ subtitle }}</div>\n      }\n    </div>\n    @if (showToolbar) {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        @if (showGlobalSearch) {\n          <div [class]=\"toolbarInputWrapperClass\">\n            <svg\n              [class]=\"toolbarInputIconClass\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              aria-hidden=\"true\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"m21 21-4.35-4.35m1.85-5.65a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z\"\n              />\n            </svg>\n            <input\n              type=\"search\"\n              [class]=\"toolbarInputInlineClass\"\n              placeholder=\"Search...\"\n              [value]=\"globalFilter\"\n              (input)=\"onGlobalFilterChange($any($event.target).value)\"\n            />\n          </div>\n        }\n        @if (showFilters) {\n          <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n            Filters\n          </button>\n        }\n        @if (showColumnVisibility) {\n          <details class=\"relative\">\n            <summary [class]=\"toolbarButtonClass\">Columns</summary>\n            <div\n              class=\"absolute right-0 mt-2 w-48 rounded-(--cxs-radius-md) border border-(--cxs-color-border) bg-(--cxs-color-surface) p-2 shadow-(--cxs-shadow-sm)\"\n            >\n              @for (column of columns; track column) {\n                <label class=\"flex items-center gap-2 px-2 py-1 text-sm\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"columnVisibility[column.key]\"\n                    (change)=\"toggleColumnVisibility(column.key)\"\n                  />\n                  <span>{{ column.label }}</span>\n                </label>\n              }\n            </div>\n          </details>\n        }\n      </div>\n    }\n  </div>\n} @else if (showToolbar) {\n  <div [class]=\"toolbarClass\">\n    <div [class]=\"toolbarGroupClass\">\n      @if (showGlobalSearch) {\n        <div [class]=\"toolbarInputWrapperClass\">\n          <svg\n            [class]=\"toolbarInputIconClass\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"m21 21-4.35-4.35m1.85-5.65a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z\"\n            />\n          </svg>\n          <input\n            type=\"search\"\n            [class]=\"toolbarInputClass\"\n            placeholder=\"Search...\"\n            [value]=\"globalFilter\"\n            (input)=\"onGlobalFilterChange($any($event.target).value)\"\n          />\n        </div>\n      }\n    </div>\n    <div [class]=\"toolbarGroupClass\">\n      @if (showFilters) {\n        <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n          Filters\n        </button>\n      }\n      @if (showColumnVisibility) {\n        <details class=\"relative\">\n          <summary [class]=\"toolbarButtonClass\">Columns</summary>\n          <div\n            class=\"absolute right-0 mt-2 w-48 rounded-(--cxs-radius-md) border border-(--cxs-color-border) bg-(--cxs-color-surface) p-2 shadow-(--cxs-shadow-sm)\"\n          >\n            @for (column of columns; track column) {\n              <label class=\"flex items-center gap-2 px-2 py-1 text-sm\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"columnVisibility[column.key]\"\n                  (change)=\"toggleColumnVisibility(column.key)\"\n                />\n                <span>{{ column.label }}</span>\n              </label>\n            }\n          </div>\n        </details>\n      }\n    </div>\n  </div>\n}\n\n@if (selectable && selectedCount > 0 && bulkActions.length > 0) {\n  <div [class]=\"bulkBarClass\">\n    <span>{{ selectedCount }} selected</span>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @for (action of bulkActions; track action) {\n        <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"runBulkAction(action.id)\">\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  </div>\n}\n\n<div [class]=\"wrapperClass\">\n  <table [class]=\"tableClass\" [attr.aria-label]=\"ariaLabel\">\n    @if (caption) {\n      <caption class=\"sr-only\">{{ caption }}</caption>\n    }\n    <thead>\n      <tr [class]=\"headerRowClass\">\n        @if (selectable) {\n          <th class=\"px-3 py-2 text-left\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"allVisibleSelected\"\n              [indeterminate]=\"someVisibleSelected\"\n              (change)=\"toggleSelectAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </th>\n        }\n        @for (column of visibleColumns; track column) {\n          <th\n            class=\"relative\"\n            [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n            [style.width]=\"columnWidth(column)\"\n            [style.minWidth]=\"columnMinWidth(column)\"\n            [style.left]=\"pinnedLeft(column)\"\n            [style.right]=\"pinnedRight(column)\"\n            scope=\"col\"\n            [attr.aria-sort]=\"ariaSort(column)\"\n          >\n            @if (column.sortable) {\n              <button\n                type=\"button\"\n                [class]=\"headerButtonClass()\"\n                (click)=\"onSort(column)\"\n              >\n                <span>{{ column.label }}</span>\n                @if (sortKey === column.key) {\n                  @if (sortDirection === 'asc') {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18\"\n                      />\n                    </svg>\n                  } @else {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3\"\n                      />\n                    </svg>\n                  }\n                }\n              </button>\n            } @else {\n              {{ column.label }}\n            }\n            @if (column.resizable !== false) {\n              <span\n                [class]=\"resizeHandleClass\"\n                (mousedown)=\"onResizeStart($event, column)\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n      @if (showFilters && filtersOpen) {\n        <tr [class]=\"headerRowClass\">\n          @if (selectable) {\n            <th class=\"px-3 py-2 text-left\"></th>\n          }\n          @for (column of visibleColumns; track column) {\n            <th\n              [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n              [style.left]=\"pinnedLeft(column)\"\n              [style.right]=\"pinnedRight(column)\"\n            >\n              @if (column.filterable) {\n                @if (column.filterType === 'select') {\n                  <select\n                    [class]=\"headerFilterInputClass()\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (change)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  >\n                    <option value=\"\">All</option>\n                    @for (option of column.filterOptions ?? []; track option) {\n                      <option [value]=\"option.value\">{{ option.label }}</option>\n                    }\n                  </select>\n                } @else {\n                  <input\n                    [class]=\"headerFilterInputClass()\"\n                    [attr.type]=\"column.filterType === 'number' ? 'number' : 'text'\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (input)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  />\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n    <tbody>\n      @if (loading) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">Loading...</span>\n          </td>\n        </tr>\n      } @else if (displayRows.length === 0) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">{{ emptyMessage }}</span>\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayRows; track row) {\n          <tr [class]=\"bodyRowClass\">\n            @if (selectable) {\n              <td class=\"px-3 py-2\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isSelected(row)\"\n                  (change)=\"toggleRowSelection(row)\"\n                  aria-label=\"Select row\"\n                />\n              </td>\n            }\n            @for (column of visibleColumns; track column) {\n              <td\n                [class]=\"bodyCellClass(column) + ' ' + pinnedClass(column)\"\n                [style.left]=\"pinnedLeft(column)\"\n                [style.right]=\"pinnedRight(column)\"\n              >\n                @if (cellTemplate(column.key); as template) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, value: row[column.key], column }\"\n                  ></ng-container>\n                } @else {\n                  {{ cellValue(row, column) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (showPagination) {\n  <div [class]=\"paginationClass\">\n    <div class=\"flex items-center gap-2\">\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage <= 1\"\n        (click)=\"previousPage()\"\n      >\n        Previous\n      </button>\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage >= totalPages\"\n        (click)=\"nextPage()\"\n      >\n        Next\n      </button>\n      <span class=\"text-(--cxs-color-on-surface-muted)\">{{ pageLabel }}</span>\n    </div>\n    @if (showPageSize) {\n      <label class=\"flex items-center gap-2 text-(--cxs-color-on-surface-muted)\">\n        <span>Rows</span>\n        <select\n          #pageSizeSelect\n          [class]=\"pageSelectClass\"\n          [value]=\"currentPageSize\"\n          (change)=\"onPageSizeChange(pageSizeSelect.value)\"\n        >\n          @for (size of pageSizeOptions; track size) {\n            <option [value]=\"size\">{{ size }}</option>\n          }\n        </select>\n      </label>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDataTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsDataTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-data-table', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasTitleBlock) {\n  <div [class]=\"titleBarClass\">\n    <div class=\"min-w-0\">\n      @if (title) {\n        <div [class]=\"titleTextClass\">{{ title }}</div>\n      }\n      @if (subtitle) {\n        <div [class]=\"subtitleTextClass\">{{ subtitle }}</div>\n      }\n    </div>\n    @if (showToolbar) {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        @if (showGlobalSearch) {\n          <div [class]=\"toolbarInputWrapperClass\">\n            <svg\n              [class]=\"toolbarInputIconClass\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              aria-hidden=\"true\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"m21 21-4.35-4.35m1.85-5.65a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z\"\n              />\n            </svg>\n            <input\n              type=\"search\"\n              [class]=\"toolbarInputInlineClass\"\n              placeholder=\"Search...\"\n              [value]=\"globalFilter\"\n              (input)=\"onGlobalFilterChange($any($event.target).value)\"\n            />\n          </div>\n        }\n        @if (showFilters) {\n          <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n            Filters\n          </button>\n        }\n        @if (showColumnVisibility) {\n          <details class=\"relative\">\n            <summary [class]=\"toolbarButtonClass\">Columns</summary>\n            <div\n              class=\"absolute right-0 mt-2 w-48 rounded-(--cxs-radius-md) border border-(--cxs-color-border) bg-(--cxs-color-surface) p-2 shadow-(--cxs-shadow-sm)\"\n            >\n              @for (column of columns; track column) {\n                <label class=\"flex items-center gap-2 px-2 py-1 text-sm\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"columnVisibility[column.key]\"\n                    (change)=\"toggleColumnVisibility(column.key)\"\n                  />\n                  <span>{{ column.label }}</span>\n                </label>\n              }\n            </div>\n          </details>\n        }\n      </div>\n    }\n  </div>\n} @else if (showToolbar) {\n  <div [class]=\"toolbarClass\">\n    <div [class]=\"toolbarGroupClass\">\n      @if (showGlobalSearch) {\n        <div [class]=\"toolbarInputWrapperClass\">\n          <svg\n            [class]=\"toolbarInputIconClass\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            aria-hidden=\"true\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              d=\"m21 21-4.35-4.35m1.85-5.65a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z\"\n            />\n          </svg>\n          <input\n            type=\"search\"\n            [class]=\"toolbarInputClass\"\n            placeholder=\"Search...\"\n            [value]=\"globalFilter\"\n            (input)=\"onGlobalFilterChange($any($event.target).value)\"\n          />\n        </div>\n      }\n    </div>\n    <div [class]=\"toolbarGroupClass\">\n      @if (showFilters) {\n        <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n          Filters\n        </button>\n      }\n      @if (showColumnVisibility) {\n        <details class=\"relative\">\n          <summary [class]=\"toolbarButtonClass\">Columns</summary>\n          <div\n            class=\"absolute right-0 mt-2 w-48 rounded-(--cxs-radius-md) border border-(--cxs-color-border) bg-(--cxs-color-surface) p-2 shadow-(--cxs-shadow-sm)\"\n          >\n            @for (column of columns; track column) {\n              <label class=\"flex items-center gap-2 px-2 py-1 text-sm\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"columnVisibility[column.key]\"\n                  (change)=\"toggleColumnVisibility(column.key)\"\n                />\n                <span>{{ column.label }}</span>\n              </label>\n            }\n          </div>\n        </details>\n      }\n    </div>\n  </div>\n}\n\n@if (selectable && selectedCount > 0 && bulkActions.length > 0) {\n  <div [class]=\"bulkBarClass\">\n    <span>{{ selectedCount }} selected</span>\n    <div class=\"flex flex-wrap items-center gap-2\">\n      @for (action of bulkActions; track action) {\n        <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"runBulkAction(action.id)\">\n          {{ action.label }}\n        </button>\n      }\n    </div>\n  </div>\n}\n\n<div [class]=\"wrapperClass\">\n  <table [class]=\"tableClass\" [attr.aria-label]=\"ariaLabel\">\n    @if (caption) {\n      <caption class=\"sr-only\">{{ caption }}</caption>\n    }\n    <thead>\n      <tr [class]=\"headerRowClass\">\n        @if (selectable) {\n          <th class=\"px-3 py-2 text-left\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"allVisibleSelected\"\n              [indeterminate]=\"someVisibleSelected\"\n              (change)=\"toggleSelectAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </th>\n        }\n        @for (column of visibleColumns; track column) {\n          <th\n            class=\"relative\"\n            [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n            [style.width]=\"columnWidth(column)\"\n            [style.minWidth]=\"columnMinWidth(column)\"\n            [style.left]=\"pinnedLeft(column)\"\n            [style.right]=\"pinnedRight(column)\"\n            scope=\"col\"\n            [attr.aria-sort]=\"ariaSort(column)\"\n          >\n            @if (column.sortable) {\n              <button\n                type=\"button\"\n                [class]=\"headerButtonClass()\"\n                (click)=\"onSort(column)\"\n              >\n                <span>{{ column.label }}</span>\n                @if (sortKey === column.key) {\n                  @if (sortDirection === 'asc') {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18\"\n                      />\n                    </svg>\n                  } @else {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3\"\n                      />\n                    </svg>\n                  }\n                }\n              </button>\n            } @else {\n              {{ column.label }}\n            }\n            @if (column.resizable !== false) {\n              <span\n                [class]=\"resizeHandleClass\"\n                (mousedown)=\"onResizeStart($event, column)\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n      @if (showFilters && filtersOpen) {\n        <tr [class]=\"headerRowClass\">\n          @if (selectable) {\n            <th class=\"px-3 py-2 text-left\"></th>\n          }\n          @for (column of visibleColumns; track column) {\n            <th\n              [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n              [style.left]=\"pinnedLeft(column)\"\n              [style.right]=\"pinnedRight(column)\"\n            >\n              @if (column.filterable) {\n                @if (column.filterType === 'select') {\n                  <select\n                    [class]=\"headerFilterInputClass()\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (change)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  >\n                    <option value=\"\">All</option>\n                    @for (option of column.filterOptions ?? []; track option) {\n                      <option [value]=\"option.value\">{{ option.label }}</option>\n                    }\n                  </select>\n                } @else {\n                  <input\n                    [class]=\"headerFilterInputClass()\"\n                    [attr.type]=\"column.filterType === 'number' ? 'number' : 'text'\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (input)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  />\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n    <tbody>\n      @if (loading) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">Loading...</span>\n          </td>\n        </tr>\n      } @else if (displayRows.length === 0) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">{{ emptyMessage }}</span>\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayRows; track row) {\n          <tr [class]=\"bodyRowClass\">\n            @if (selectable) {\n              <td class=\"px-3 py-2\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isSelected(row)\"\n                  (change)=\"toggleRowSelection(row)\"\n                  aria-label=\"Select row\"\n                />\n              </td>\n            }\n            @for (column of visibleColumns; track column) {\n              <td\n                [class]=\"bodyCellClass(column) + ' ' + pinnedClass(column)\"\n                [style.left]=\"pinnedLeft(column)\"\n                [style.right]=\"pinnedRight(column)\"\n              >\n                @if (cellTemplate(column.key); as template) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, value: row[column.key], column }\"\n                  ></ng-container>\n                } @else {\n                  {{ cellValue(row, column) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (showPagination) {\n  <div [class]=\"paginationClass\">\n    <div class=\"flex items-center gap-2\">\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage <= 1\"\n        (click)=\"previousPage()\"\n      >\n        Previous\n      </button>\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage >= totalPages\"\n        (click)=\"nextPage()\"\n      >\n        Next\n      </button>\n      <span class=\"text-(--cxs-color-on-surface-muted)\">{{ pageLabel }}</span>\n    </div>\n    @if (showPageSize) {\n      <label class=\"flex items-center gap-2 text-(--cxs-color-on-surface-muted)\">\n        <span>Rows</span>\n        <select\n          #pageSizeSelect\n          [class]=\"pageSelectClass\"\n          [value]=\"currentPageSize\"\n          (change)=\"onPageSizeChange(pageSizeSelect.value)\"\n        >\n          @for (size of pageSizeOptions; track size) {\n            <option [value]=\"size\">{{ size }}</option>\n          }\n        </select>\n      </label>\n    }\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -1795,12 +1795,12 @@ class CxsDialogComponent {
             this.dialogPanel?.nativeElement.focus();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDialogComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsDialogComponent, isStandalone: true, selector: "cxs-dialog", inputs: { open: "open", title: "title", description: "description", ariaLabel: "ariaLabel", size: "size", dismissible: "dismissible", closeOnBackdrop: "closeOnBackdrop", closeOnEscape: "closeOnEscape" }, outputs: { openChange: "openChange", closed: "closed" }, viewQueries: [{ propertyName: "dialogPanel", first: true, predicate: ["dialogPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (open) {\n  <div [class]=\"overlayClass\" (click)=\"onBackdropClick($event)\">\n    <div\n      #dialogPanel\n      [class]=\"panelClass\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"title ? titleId : null\"\n      [attr.aria-describedby]=\"description ? descriptionId : null\"\n      [attr.aria-label]=\"ariaLabelValue\"\n      tabindex=\"-1\"\n      (keydown)=\"onKeydown($event)\"\n    >\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-1\">\n          @if (title) {\n            <h2 [id]=\"titleId\" [class]=\"titleClass\">{{ title }}</h2>\n          }\n          @if (description) {\n            <p [id]=\"descriptionId\" [class]=\"descriptionClass\">{{ description }}</p>\n          }\n        </div>\n        @if (dismissible) {\n          <button\n            type=\"button\"\n            [class]=\"closeButtonClass\"\n            aria-label=\"Close dialog\"\n            (click)=\"requestClose('dismiss')\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        }\n      </div>\n\n      <div [class]=\"bodyClass\">\n        <ng-content></ng-content>\n      </div>\n\n      <div [class]=\"actionsClass\">\n        <ng-content select=\"[cxsDialogActions]\"></ng-content>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.cxs-dialog-overlay{animation:cxs-dialog-overlay-appear .22s ease-out}.cxs-dialog-panel{animation:cxs-dialog-panel-appear .26s cubic-bezier(.16,1,.3,1);transform-origin:center;will-change:opacity,transform}@keyframes cxs-dialog-overlay-appear{0%{opacity:0}to{opacity:1}}@keyframes cxs-dialog-panel-appear{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.cxs-dialog-overlay,.cxs-dialog-panel{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsDialogComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsDialogComponent, isStandalone: true, selector: "cxs-dialog", inputs: { open: "open", title: "title", description: "description", ariaLabel: "ariaLabel", size: "size", dismissible: "dismissible", closeOnBackdrop: "closeOnBackdrop", closeOnEscape: "closeOnEscape" }, outputs: { openChange: "openChange", closed: "closed" }, viewQueries: [{ propertyName: "dialogPanel", first: true, predicate: ["dialogPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (open) {\n  <div [class]=\"overlayClass\" (click)=\"onBackdropClick($event)\">\n    <div\n      #dialogPanel\n      [class]=\"panelClass\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"title ? titleId : null\"\n      [attr.aria-describedby]=\"description ? descriptionId : null\"\n      [attr.aria-label]=\"ariaLabelValue\"\n      tabindex=\"-1\"\n      (keydown)=\"onKeydown($event)\"\n    >\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-1\">\n          @if (title) {\n            <h2 [id]=\"titleId\" [class]=\"titleClass\">{{ title }}</h2>\n          }\n          @if (description) {\n            <p [id]=\"descriptionId\" [class]=\"descriptionClass\">{{ description }}</p>\n          }\n        </div>\n        @if (dismissible) {\n          <button\n            type=\"button\"\n            [class]=\"closeButtonClass\"\n            aria-label=\"Close dialog\"\n            (click)=\"requestClose('dismiss')\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        }\n      </div>\n\n      <div [class]=\"bodyClass\">\n        <ng-content></ng-content>\n      </div>\n\n      <div [class]=\"actionsClass\">\n        <ng-content select=\"[cxsDialogActions]\"></ng-content>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.cxs-dialog-overlay{animation:cxs-dialog-overlay-appear .22s ease-out}.cxs-dialog-panel{animation:cxs-dialog-panel-appear .26s cubic-bezier(.16,1,.3,1);transform-origin:center;will-change:opacity,transform}@keyframes cxs-dialog-overlay-appear{0%{opacity:0}to{opacity:1}}@keyframes cxs-dialog-panel-appear{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.cxs-dialog-overlay,.cxs-dialog-panel{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cxs-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\n  <div [class]=\"overlayClass\" (click)=\"onBackdropClick($event)\">\n    <div\n      #dialogPanel\n      [class]=\"panelClass\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"title ? titleId : null\"\n      [attr.aria-describedby]=\"description ? descriptionId : null\"\n      [attr.aria-label]=\"ariaLabelValue\"\n      tabindex=\"-1\"\n      (keydown)=\"onKeydown($event)\"\n    >\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-1\">\n          @if (title) {\n            <h2 [id]=\"titleId\" [class]=\"titleClass\">{{ title }}</h2>\n          }\n          @if (description) {\n            <p [id]=\"descriptionId\" [class]=\"descriptionClass\">{{ description }}</p>\n          }\n        </div>\n        @if (dismissible) {\n          <button\n            type=\"button\"\n            [class]=\"closeButtonClass\"\n            aria-label=\"Close dialog\"\n            (click)=\"requestClose('dismiss')\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        }\n      </div>\n\n      <div [class]=\"bodyClass\">\n        <ng-content></ng-content>\n      </div>\n\n      <div [class]=\"actionsClass\">\n        <ng-content select=\"[cxsDialogActions]\"></ng-content>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.cxs-dialog-overlay{animation:cxs-dialog-overlay-appear .22s ease-out}.cxs-dialog-panel{animation:cxs-dialog-panel-appear .26s cubic-bezier(.16,1,.3,1);transform-origin:center;will-change:opacity,transform}@keyframes cxs-dialog-overlay-appear{0%{opacity:0}to{opacity:1}}@keyframes cxs-dialog-panel-appear{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.cxs-dialog-overlay,.cxs-dialog-panel{animation:none}}\n"] }]
+            args: [{ selector: 'cxs-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\n  <div [class]=\"overlayClass\" (click)=\"onBackdropClick($event)\">\n    <div\n      #dialogPanel\n      [class]=\"panelClass\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"title ? titleId : null\"\n      [attr.aria-describedby]=\"description ? descriptionId : null\"\n      [attr.aria-label]=\"ariaLabelValue\"\n      tabindex=\"-1\"\n      (keydown)=\"onKeydown($event)\"\n    >\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-1\">\n          @if (title) {\n            <h2 [id]=\"titleId\" [class]=\"titleClass\">{{ title }}</h2>\n          }\n          @if (description) {\n            <p [id]=\"descriptionId\" [class]=\"descriptionClass\">{{ description }}</p>\n          }\n        </div>\n        @if (dismissible) {\n          <button\n            type=\"button\"\n            [class]=\"closeButtonClass\"\n            aria-label=\"Close dialog\"\n            (click)=\"requestClose('dismiss')\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        }\n      </div>\n\n      <div [class]=\"bodyClass\">\n        <ng-content></ng-content>\n      </div>\n\n      <div [class]=\"actionsClass\">\n        <ng-content select=\"[cxsDialogActions]\"></ng-content>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.cxs-dialog-overlay{animation:cxs-dialog-overlay-appear .22s ease-out}.cxs-dialog-panel{animation:cxs-dialog-panel-appear .26s cubic-bezier(.16,1,.3,1);transform-origin:center;will-change:opacity,transform}@keyframes cxs-dialog-overlay-appear{0%{opacity:0}to{opacity:1}}@keyframes cxs-dialog-panel-appear{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.cxs-dialog-overlay,.cxs-dialog-panel{animation:none}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['class']
@@ -2123,8 +2123,8 @@ class CxsDatepickerComponent {
     stripTime(date) {
         return new Date(date.getFullYear(), date.getMonth(), date.getDate());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsDatepickerComponent, isStandalone: true, selector: "cxs-datepicker", inputs: { value: "value", variant: "variant", size: "size", useNative: "useNative", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", autofocus: "autofocus", label: "label", id: "id", name: "name", min: "min", max: "max", placeholder: "placeholder", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsDatepickerComponent, isStandalone: true, selector: "cxs-datepicker", inputs: { value: "value", variant: "variant", size: "size", useNative: "useNative", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", autofocus: "autofocus", label: "label", id: "id", name: "name", min: "min", max: "max", placeholder: "placeholder", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CxsDatepickerComponent),
@@ -2132,7 +2132,7 @@ class CxsDatepickerComponent {
             }
         ], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  @if (label) {\n    <label [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"inputId\">\n      {{ label }}\n    </label>\n  }\n  @if (useNative) {\n    <input\n      type=\"date\"\n      [class]=\"inputClass\"\n      [attr.id]=\"inputId\"\n      [attr.name]=\"name\"\n      [attr.min]=\"min\"\n      [attr.max]=\"max\"\n      [attr.placeholder]=\"placeholder\"\n      [attr.aria-label]=\"ariaLabelValue\"\n      [attr.aria-labelledby]=\"labelId\"\n      [attr.aria-describedby]=\"ariaDescribedby\"\n      [attr.autofocus]=\"autofocus ? true : null\"\n      [value]=\"value\"\n      [disabled]=\"isDisabled\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n  } @else {\n    <div class=\"relative w-full\">\n      <input\n        type=\"text\"\n        [class]=\"inputClass\"\n        [attr.id]=\"inputId\"\n        [attr.name]=\"name\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"ariaLabelValue\"\n        [attr.aria-labelledby]=\"labelId\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-expanded]=\"isOpen ? 'true' : 'false'\"\n        [attr.aria-controls]=\"panelId\"\n        [attr.autofocus]=\"autofocus ? true : null\"\n        [attr.data-cxs-datepicker]=\"panelId\"\n        [value]=\"value\"\n        [disabled]=\"isDisabled\"\n        [readonly]=\"true\"\n        [required]=\"required\"\n        (click)=\"open()\"\n        (focus)=\"open()\"\n        (blur)=\"onBlur()\"\n      />\n      @if (isOpen) {\n        <div [class]=\"popoverClass\" [attr.id]=\"panelId\" role=\"dialog\" aria-label=\"Choose date\">\n          <div class=\"flex items-center justify-between\">\n            <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Previous month\" (click)=\"prevMonth()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-3\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\" />\n              </svg>\n            </button>\n            <div class=\"flex items-center gap-2\">\n              <select\n                [class]=\"selectClass\"\n                [disabled]=\"isDisabled\"\n                [value]=\"displayMonth.getMonth()\"\n                aria-label=\"Month\"\n                (change)=\"onMonthChange($event)\"\n              >\n                @for (month of monthOptions; track month.value) {\n                  <option [value]=\"month.value\">{{ month.label }}</option>\n                }\n              </select>\n              <select\n                [class]=\"selectClass\"\n                [disabled]=\"isDisabled\"\n                [value]=\"displayMonth.getFullYear()\"\n                aria-label=\"Year\"\n                (change)=\"onYearChange($event)\"\n              >\n                @for (year of yearOptions; track year) {\n                  <option [value]=\"year\">{{ year }}</option>\n                }\n              </select>\n            </div>\n            <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Next month\" (click)=\"nextMonth()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-3\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" />\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"mt-3 grid grid-cols-7 gap-1 text-center text-xs text-(--cxs-color-on-surface-muted)\">\n            @for (label of weekDayLabels; track label) {\n              <div>{{ label }}</div>\n            }\n          </div>\n\n          <div class=\"mt-2 grid grid-cols-7 gap-1\" role=\"grid\">\n            @for (day of calendarDays; track day.key) {\n              <button\n                type=\"button\"\n                [class]=\"dayButtonClass(day)\"\n                [disabled]=\"day.disabled\"\n                [attr.data-date]=\"day.key\"\n                [attr.aria-selected]=\"day.key === value ? 'true' : 'false'\"\n                [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                (click)=\"onDateSelect(day)\"\n              >\n                {{ day.label }}\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-datepicker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -2319,18 +2319,18 @@ class CxsInputComponent {
     onBlur() {
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsInputComponent, isStandalone: true, selector: "cxs-input", inputs: { value: "value", type: "type", variant: "variant", size: "size", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", autofocus: "autofocus", label: "label", id: "id", name: "name", placeholder: "placeholder", autocomplete: "autocomplete", inputmode: "inputmode", spellcheck: "spellcheck", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsInputComponent, isStandalone: true, selector: "cxs-input", inputs: { value: "value", type: "type", variant: "variant", size: "size", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", autofocus: "autofocus", label: "label", id: "id", name: "name", placeholder: "placeholder", autocomplete: "autocomplete", inputmode: "inputmode", spellcheck: "spellcheck", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CxsInputComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  @if (label) {\n    <label [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"inputId\">\n      {{ label }}\n    </label>\n  }\n  <input\n    [class]=\"inputClass\"\n    [attr.id]=\"inputId\"\n    [attr.name]=\"name\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.inputmode]=\"inputmode\"\n    [attr.spellcheck]=\"spellcheck === null ? null : spellcheck\"\n    [attr.aria-label]=\"ariaLabelValue\"\n    [attr.aria-labelledby]=\"labelId\"\n    [attr.aria-describedby]=\"ariaDescribedbyValue\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n    [disabled]=\"isDisabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  @if (invalid) {\n    <div [class]=\"errorClass\" [attr.id]=\"errorId\" aria-live=\"polite\">\n      <ng-content select=\"[cxsInputError]\"></ng-content>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  @if (label) {\n    <label [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"inputId\">\n      {{ label }}\n    </label>\n  }\n  <input\n    [class]=\"inputClass\"\n    [attr.id]=\"inputId\"\n    [attr.name]=\"name\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.inputmode]=\"inputmode\"\n    [attr.spellcheck]=\"spellcheck === null ? null : spellcheck\"\n    [attr.aria-label]=\"ariaLabelValue\"\n    [attr.aria-labelledby]=\"labelId\"\n    [attr.aria-describedby]=\"ariaDescribedbyValue\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n    [disabled]=\"isDisabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  @if (invalid) {\n    <div [class]=\"errorClass\" [attr.id]=\"errorId\" aria-live=\"polite\">\n      <ng-content select=\"[cxsInputError]\"></ng-content>\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cxs-input', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'cxs-input', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CxsInputComponent),
@@ -2492,10 +2492,10 @@ class CxsMenubarComponent {
             .map((item) => item.nativeElement)
             .filter((item) => !item.hasAttribute('data-disabled'));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsMenubarComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsMenubarComponent, isStandalone: true, selector: "cxs-menubar", inputs: { items: "items", ariaLabel: "ariaLabel", size: "size", variant: "variant", disabled: "disabled" }, outputs: { itemSelected: "itemSelected" }, viewQueries: [{ propertyName: "menuItems", predicate: ["menuItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel\">\n  <ul [class]=\"menubarClass\" role=\"menubar\" (keydown)=\"onKeydown($event)\">\n    @for (item of items; track item) {\n      <li>\n        @if (item.href) {\n          <a\n            #menuItem\n            role=\"menuitem\"\n            [class]=\"getItemClass(item)\"\n            [attr.href]=\"getItemHref(item)\"\n            [attr.target]=\"item.target ?? null\"\n            [attr.rel]=\"getItemRel(item)\"\n            [attr.aria-label]=\"item.ariaLabel ?? null\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [attr.aria-disabled]=\"isItemDisabled(item) ? 'true' : null\"\n            [attr.tabindex]=\"isItemDisabled(item) ? -1 : null\"\n            [attr.data-disabled]=\"isItemDisabled(item) ? '' : null\"\n            (click)=\"onItemClick(item, $event)\"\n          >\n            {{ item.label }}\n          </a>\n        } @else {\n          <button\n            #menuItem\n            type=\"button\"\n            role=\"menuitem\"\n            [class]=\"getItemClass(item)\"\n            [disabled]=\"isItemDisabled(item)\"\n            [attr.aria-label]=\"item.ariaLabel ?? null\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [attr.data-disabled]=\"isItemDisabled(item) ? '' : null\"\n            (click)=\"onItemClick(item, $event)\"\n          >\n            {{ item.label }}\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</nav>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsMenubarComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsMenubarComponent, isStandalone: true, selector: "cxs-menubar", inputs: { items: "items", ariaLabel: "ariaLabel", size: "size", variant: "variant", disabled: "disabled" }, outputs: { itemSelected: "itemSelected" }, viewQueries: [{ propertyName: "menuItems", predicate: ["menuItem"], descendants: true, read: ElementRef }], ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel\">\n  <ul [class]=\"menubarClass\" role=\"menubar\" (keydown)=\"onKeydown($event)\">\n    @for (item of items; track item) {\n      <li>\n        @if (item.href) {\n          <a\n            #menuItem\n            role=\"menuitem\"\n            [class]=\"getItemClass(item)\"\n            [attr.href]=\"getItemHref(item)\"\n            [attr.target]=\"item.target ?? null\"\n            [attr.rel]=\"getItemRel(item)\"\n            [attr.aria-label]=\"item.ariaLabel ?? null\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [attr.aria-disabled]=\"isItemDisabled(item) ? 'true' : null\"\n            [attr.tabindex]=\"isItemDisabled(item) ? -1 : null\"\n            [attr.data-disabled]=\"isItemDisabled(item) ? '' : null\"\n            (click)=\"onItemClick(item, $event)\"\n          >\n            {{ item.label }}\n          </a>\n        } @else {\n          <button\n            #menuItem\n            type=\"button\"\n            role=\"menuitem\"\n            [class]=\"getItemClass(item)\"\n            [disabled]=\"isItemDisabled(item)\"\n            [attr.aria-label]=\"item.ariaLabel ?? null\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [attr.data-disabled]=\"isItemDisabled(item) ? '' : null\"\n            (click)=\"onItemClick(item, $event)\"\n          >\n            {{ item.label }}\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</nav>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsMenubarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsMenubarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-menubar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [attr.aria-label]=\"ariaLabel\">\n  <ul [class]=\"menubarClass\" role=\"menubar\" (keydown)=\"onKeydown($event)\">\n    @for (item of items; track item) {\n      <li>\n        @if (item.href) {\n          <a\n            #menuItem\n            role=\"menuitem\"\n            [class]=\"getItemClass(item)\"\n            [attr.href]=\"getItemHref(item)\"\n            [attr.target]=\"item.target ?? null\"\n            [attr.rel]=\"getItemRel(item)\"\n            [attr.aria-label]=\"item.ariaLabel ?? null\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [attr.aria-disabled]=\"isItemDisabled(item) ? 'true' : null\"\n            [attr.tabindex]=\"isItemDisabled(item) ? -1 : null\"\n            [attr.data-disabled]=\"isItemDisabled(item) ? '' : null\"\n            (click)=\"onItemClick(item, $event)\"\n          >\n            {{ item.label }}\n          </a>\n        } @else {\n          <button\n            #menuItem\n            type=\"button\"\n            role=\"menuitem\"\n            [class]=\"getItemClass(item)\"\n            [disabled]=\"isItemDisabled(item)\"\n            [attr.aria-label]=\"item.ariaLabel ?? null\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [attr.data-disabled]=\"isItemDisabled(item) ? '' : null\"\n            (click)=\"onItemClick(item, $event)\"\n          >\n            {{ item.label }}\n          </button>\n        }\n      </li>\n    }\n  </ul>\n</nav>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -2754,18 +2754,18 @@ class CxsMultiSelectComponent {
             this.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsMultiSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsMultiSelectComponent, isStandalone: true, selector: "cxs-multi-select", inputs: { options: "options", value: "value", variant: "variant", size: "size", disabled: "disabled", readonly: "readonly", invalid: "invalid", placeholder: "placeholder", label: "label", maxSelections: "maxSelections", id: "id", name: "name", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsMultiSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsMultiSelectComponent, isStandalone: true, selector: "cxs-multi-select", inputs: { options: "options", value: "value", variant: "variant", size: "size", disabled: "disabled", readonly: "readonly", invalid: "invalid", placeholder: "placeholder", label: "label", maxSelections: "maxSelections", id: "id", name: "name", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CxsMultiSelectComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  @if (label) {\n    <label [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"inputId\">\n      {{ label }}\n    </label>\n  }\n  <div class=\"relative\">\n    <div [class]=\"controlClass\" (click)=\"focusInput()\">\n      @for (chip of selectedOptions; track chip.value) {\n        <span [class]=\"chipClass\">\n          <span>{{ chip.label }}</span>\n          <button\n            type=\"button\"\n            [class]=\"chipRemoveClass\"\n            [attr.aria-label]=\"'Remove ' + chip.label\"\n            (mousedown)=\"onChipMouseDown($event)\"\n            (click)=\"removeValue(chip.value)\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n                 stroke=\"currentColor\" class=\"size-3\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n          </button>\n        </span>\n      }\n      <input\n        #inputEl\n        type=\"text\"\n        [class]=\"inputClass\"\n        [attr.id]=\"inputId\"\n        [attr.name]=\"name\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"ariaLabelValue\"\n        [attr.aria-labelledby]=\"labelId\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-expanded]=\"isOpen ? 'true' : 'false'\"\n        [attr.aria-controls]=\"listId\"\n        [attr.aria-invalid]=\"invalid ? 'true' : null\"\n        [disabled]=\"isDisabled\"\n        [readonly]=\"readonly || isAtMax\"\n        [value]=\"query\"\n        (input)=\"onQueryInput($event)\"\n        (focus)=\"open()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeydown($event)\"\n      />\n    </div>\n    @if (isOpen) {\n      <div [class]=\"panelClass\" [attr.id]=\"listId\" role=\"listbox\">\n        @if (filteredOptions.length === 0) {\n          <div [class]=\"emptyStateClass\">\n            No matches\n          </div>\n        } @else {\n          @for (option of filteredOptions; track option.value) {\n            <button\n              type=\"button\"\n              [class]=\"optionClass + (isAtMax || readonly ? ' ' + optionDisabledClass : '')\"\n              [disabled]=\"isAtMax || readonly\"\n              role=\"option\"\n              (mousedown)=\"onOptionMouseDown($event)\"\n              (click)=\"selectOption(option)\"\n            >\n              <span>{{ option.label }}</span>\n            </button>\n          }\n        }\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  @if (label) {\n    <label [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"inputId\">\n      {{ label }}\n    </label>\n  }\n  <div class=\"relative\">\n    <div [class]=\"controlClass\" (click)=\"focusInput()\">\n      @for (chip of selectedOptions; track chip.value) {\n        <span [class]=\"chipClass\">\n          <span>{{ chip.label }}</span>\n          <button\n            type=\"button\"\n            [class]=\"chipRemoveClass\"\n            [attr.aria-label]=\"'Remove ' + chip.label\"\n            (mousedown)=\"onChipMouseDown($event)\"\n            (click)=\"removeValue(chip.value)\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n                 stroke=\"currentColor\" class=\"size-3\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n          </button>\n        </span>\n      }\n      <input\n        #inputEl\n        type=\"text\"\n        [class]=\"inputClass\"\n        [attr.id]=\"inputId\"\n        [attr.name]=\"name\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"ariaLabelValue\"\n        [attr.aria-labelledby]=\"labelId\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-expanded]=\"isOpen ? 'true' : 'false'\"\n        [attr.aria-controls]=\"listId\"\n        [attr.aria-invalid]=\"invalid ? 'true' : null\"\n        [disabled]=\"isDisabled\"\n        [readonly]=\"readonly || isAtMax\"\n        [value]=\"query\"\n        (input)=\"onQueryInput($event)\"\n        (focus)=\"open()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeydown($event)\"\n      />\n    </div>\n    @if (isOpen) {\n      <div [class]=\"panelClass\" [attr.id]=\"listId\" role=\"listbox\">\n        @if (filteredOptions.length === 0) {\n          <div [class]=\"emptyStateClass\">\n            No matches\n          </div>\n        } @else {\n          @for (option of filteredOptions; track option.value) {\n            <button\n              type=\"button\"\n              [class]=\"optionClass + (isAtMax || readonly ? ' ' + optionDisabledClass : '')\"\n              [disabled]=\"isAtMax || readonly\"\n              role=\"option\"\n              (mousedown)=\"onOptionMouseDown($event)\"\n              (click)=\"selectOption(option)\"\n            >\n              <span>{{ option.label }}</span>\n            </button>\n          }\n        }\n      </div>\n    }\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsMultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cxs-multi-select', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'cxs-multi-select', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CxsMultiSelectComponent),
@@ -2815,10 +2815,10 @@ class CxsTabLabelDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTabLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: CxsTabLabelDirective, isStandalone: true, selector: "[cxsTabLabel]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsTabLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: CxsTabLabelDirective, isStandalone: true, selector: "[cxsTabLabel]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTabLabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsTabLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cxsTabLabel]',
@@ -2843,10 +2843,10 @@ class CxsTabPanelComponent {
     get panelId() {
         return `${this.resolvedId}-panel`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTabPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsTabPanelComponent, isStandalone: true, selector: "cxs-tab-panel", inputs: { id: "id", label: "label", disabled: "disabled" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: CxsTabLabelDirective, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsTabPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CxsTabPanelComponent, isStandalone: true, selector: "cxs-tab-panel", inputs: { id: "id", label: "label", disabled: "disabled" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: CxsTabLabelDirective, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTabPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsTabPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-tab-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { id: [{
@@ -2956,10 +2956,10 @@ class CxsTabsComponent {
         }
         return panels.find((panel) => !panel.disabled) ?? panels[0];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsTabsComponent, isStandalone: true, selector: "cxs-tabs", inputs: { ariaLabel: "ariaLabel", activeId: "activeId" }, outputs: { activeIdChange: "activeIdChange" }, queries: [{ propertyName: "panels", predicate: CxsTabPanelComponent }], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  <div [class]=\"tabListClass\" role=\"tablist\" [attr.aria-label]=\"ariaLabel\">\n    @for (panel of panelList; track panel.resolvedId) {\n      <button\n        type=\"button\"\n        [class]=\"tabButtonClass(panel)\"\n        role=\"tab\"\n        [attr.id]=\"panel.tabId\"\n        [attr.aria-controls]=\"panel.panelId\"\n        [attr.aria-selected]=\"isActive(panel) ? 'true' : 'false'\"\n        [disabled]=\"panel.disabled\"\n        (click)=\"selectTab(panel)\"\n      >\n        @if (panel.labelTemplate) {\n          <ng-container [ngTemplateOutlet]=\"panel.labelTemplate.templateRef\"></ng-container>\n        } @else {\n          <span>{{ panelLabel(panel) }}</span>\n        }\n      </button>\n    }\n  </div>\n\n  @if (activePanel) {\n    <div [class]=\"panelWrapperClass\">\n      <div\n        [class]=\"panelClass\"\n        role=\"tabpanel\"\n        [attr.id]=\"activePanel.panelId\"\n        [attr.aria-labelledby]=\"activePanel.tabId\"\n      >\n        <ng-container [ngTemplateOutlet]=\"activePanel.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsTabsComponent, isStandalone: true, selector: "cxs-tabs", inputs: { ariaLabel: "ariaLabel", activeId: "activeId" }, outputs: { activeIdChange: "activeIdChange" }, queries: [{ propertyName: "panels", predicate: CxsTabPanelComponent }], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  <div [class]=\"tabListClass\" role=\"tablist\" [attr.aria-label]=\"ariaLabel\">\n    @for (panel of panelList; track panel.resolvedId) {\n      <button\n        type=\"button\"\n        [class]=\"tabButtonClass(panel)\"\n        role=\"tab\"\n        [attr.id]=\"panel.tabId\"\n        [attr.aria-controls]=\"panel.panelId\"\n        [attr.aria-selected]=\"isActive(panel) ? 'true' : 'false'\"\n        [disabled]=\"panel.disabled\"\n        (click)=\"selectTab(panel)\"\n      >\n        @if (panel.labelTemplate) {\n          <ng-container [ngTemplateOutlet]=\"panel.labelTemplate.templateRef\"></ng-container>\n        } @else {\n          <span>{{ panelLabel(panel) }}</span>\n        }\n      </button>\n    }\n  </div>\n\n  @if (activePanel) {\n    <div [class]=\"panelWrapperClass\">\n      <div\n        [class]=\"panelClass\"\n        role=\"tabpanel\"\n        [attr.id]=\"activePanel.panelId\"\n        [attr.aria-labelledby]=\"activePanel.tabId\"\n      >\n        <ng-container [ngTemplateOutlet]=\"activePanel.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-tabs', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClass\">\n  <div [class]=\"tabListClass\" role=\"tablist\" [attr.aria-label]=\"ariaLabel\">\n    @for (panel of panelList; track panel.resolvedId) {\n      <button\n        type=\"button\"\n        [class]=\"tabButtonClass(panel)\"\n        role=\"tab\"\n        [attr.id]=\"panel.tabId\"\n        [attr.aria-controls]=\"panel.panelId\"\n        [attr.aria-selected]=\"isActive(panel) ? 'true' : 'false'\"\n        [disabled]=\"panel.disabled\"\n        (click)=\"selectTab(panel)\"\n      >\n        @if (panel.labelTemplate) {\n          <ng-container [ngTemplateOutlet]=\"panel.labelTemplate.templateRef\"></ng-container>\n        } @else {\n          <span>{{ panelLabel(panel) }}</span>\n        }\n      </button>\n    }\n  </div>\n\n  @if (activePanel) {\n    <div [class]=\"panelWrapperClass\">\n      <div\n        [class]=\"panelClass\"\n        role=\"tabpanel\"\n        [attr.id]=\"activePanel.panelId\"\n        [attr.aria-labelledby]=\"activePanel.tabId\"\n      >\n        <ng-container [ngTemplateOutlet]=\"activePanel.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { ariaLabel: [{
@@ -3078,8 +3078,8 @@ class CxsRadioComponent {
     onBlur() {
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsRadioComponent, isStandalone: true, selector: "cxs-radio", inputs: { value: "value", name: "name", variant: "variant", size: "size", disabled: "disabled", required: "required", invalid: "invalid", autofocus: "autofocus", id: "id", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CxsRadioComponent, isStandalone: true, selector: "cxs-radio", inputs: { value: "value", name: "name", variant: "variant", size: "size", disabled: "disabled", required: "required", invalid: "invalid", autofocus: "autofocus", id: "id", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CxsRadioComponent),
@@ -3087,7 +3087,7 @@ class CxsRadioComponent {
             }
         ], ngImport: i0, template: "<label [class]=\"wrapperClass\">\n  <input\n    class=\"peer sr-only\"\n    type=\"radio\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n    [checked]=\"isChecked\"\n    [disabled]=\"isDisabled\"\n    [required]=\"required\"\n    (change)=\"onRadioChange($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <span [class]=\"controlClass\" aria-hidden=\"true\"></span>\n  <span [class]=\"labelClass\">\n    <ng-content></ng-content>\n  </span>\n</label>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsRadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-radio', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -3238,24 +3238,24 @@ class CxsSelectComponent {
     onBlur() {
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsSelectComponent, isStandalone: true, selector: "cxs-select", inputs: { value: "value", variant: "variant", size: "size", disabled: "disabled", required: "required", invalid: "invalid", label: "label", placeholder: "placeholder", placeholderValue: "placeholderValue", id: "id", name: "name", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsSelectComponent, isStandalone: true, selector: "cxs-select", inputs: { value: "value", variant: "variant", size: "size", disabled: "disabled", required: "required", invalid: "invalid", label: "label", placeholder: "placeholder", placeholderValue: "placeholderValue", id: "id", name: "name", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CxsSelectComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  <label *ngIf=\"label\" [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"selectId\">\n    {{ label }}\n  </label>\n  <div class=\"relative\">\n    <select\n      [class]=\"selectClass\"\n      [attr.id]=\"selectId\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"ariaLabelValue\"\n      [attr.aria-labelledby]=\"labelId\"\n      [attr.aria-describedby]=\"ariaDescribedby\"\n      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n      [disabled]=\"isDisabled\"\n      [required]=\"required\"\n      [value]=\"selectValue\"\n      (change)=\"onSelectChange($event)\"\n      (blur)=\"onBlur()\"\n    >\n      <option *ngIf=\"placeholder\" [value]=\"placeholderValue\" disabled>\n        {{ placeholder }}\n      </option>\n      <ng-content></ng-content>\n    </select>\n    <span\n      class=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--cxs-color-on-surface-muted)]\"\n      aria-hidden=\"true\"\n    >\n      <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"h-4 w-4\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </span>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  @if (label) {\n    <label [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"selectId\">\n      {{ label }}\n    </label>\n  }\n  <div class=\"relative\">\n    <select\n      [class]=\"selectClass\"\n      [attr.id]=\"selectId\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"ariaLabelValue\"\n      [attr.aria-labelledby]=\"labelId\"\n      [attr.aria-describedby]=\"ariaDescribedby\"\n      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n      [disabled]=\"isDisabled\"\n      [required]=\"required\"\n      [value]=\"selectValue\"\n      (change)=\"onSelectChange($event)\"\n      (blur)=\"onBlur()\"\n      >\n      @if (placeholder) {\n        <option [value]=\"placeholderValue\" disabled>\n          {{ placeholder }}\n        </option>\n      }\n      <ng-content></ng-content>\n    </select>\n    <span\n      class=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--cxs-color-on-surface-muted)]\"\n      aria-hidden=\"true\"\n      >\n      <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"h-4 w-4\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08Z\"\n          clip-rule=\"evenodd\"\n          />\n      </svg>\n    </span>\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cxs-select', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'cxs-select', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CxsSelectComponent),
                             multi: true
                         }
-                    ], template: "<div [class]=\"wrapperClass\">\n  <label *ngIf=\"label\" [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"selectId\">\n    {{ label }}\n  </label>\n  <div class=\"relative\">\n    <select\n      [class]=\"selectClass\"\n      [attr.id]=\"selectId\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"ariaLabelValue\"\n      [attr.aria-labelledby]=\"labelId\"\n      [attr.aria-describedby]=\"ariaDescribedby\"\n      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n      [disabled]=\"isDisabled\"\n      [required]=\"required\"\n      [value]=\"selectValue\"\n      (change)=\"onSelectChange($event)\"\n      (blur)=\"onBlur()\"\n    >\n      <option *ngIf=\"placeholder\" [value]=\"placeholderValue\" disabled>\n        {{ placeholder }}\n      </option>\n      <ng-content></ng-content>\n    </select>\n    <span\n      class=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--cxs-color-on-surface-muted)]\"\n      aria-hidden=\"true\"\n    >\n      <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"h-4 w-4\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </span>\n  </div>\n</div>\n" }]
+                    ], template: "<div [class]=\"wrapperClass\">\n  @if (label) {\n    <label [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"selectId\">\n      {{ label }}\n    </label>\n  }\n  <div class=\"relative\">\n    <select\n      [class]=\"selectClass\"\n      [attr.id]=\"selectId\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"ariaLabelValue\"\n      [attr.aria-labelledby]=\"labelId\"\n      [attr.aria-describedby]=\"ariaDescribedby\"\n      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n      [disabled]=\"isDisabled\"\n      [required]=\"required\"\n      [value]=\"selectValue\"\n      (change)=\"onSelectChange($event)\"\n      (blur)=\"onBlur()\"\n      >\n      @if (placeholder) {\n        <option [value]=\"placeholderValue\" disabled>\n          {{ placeholder }}\n        </option>\n      }\n      <ng-content></ng-content>\n    </select>\n    <span\n      class=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--cxs-color-on-surface-muted)]\"\n      aria-hidden=\"true\"\n      >\n      <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"h-4 w-4\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08Z\"\n          clip-rule=\"evenodd\"\n          />\n      </svg>\n    </span>\n  </div>\n</div>\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }], variant: [{
@@ -3374,10 +3374,10 @@ class CxsTableComponent {
         }
         return String(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTableComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsTableComponent, isStandalone: true, selector: "cxs-table", inputs: { columns: "columns", data: "data", caption: "caption", ariaLabel: "ariaLabel", striped: "striped", bordered: "bordered", compact: "compact", emptyMessage: "emptyMessage", emptyCell: "emptyCell" }, ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  <table [class]=\"tableClass\" [attr.aria-label]=\"ariaLabel\">\n    @if (caption) {\n      <caption class=\"sr-only\">{{ caption }}</caption>\n    }\n    <thead>\n      <tr [class]=\"headerRowClass\">\n        @for (column of columns; track column) {\n          <th\n            [class]=\"headerCellClass(column)\"\n            [style.width]=\"column.width ?? null\"\n            scope=\"col\"\n          >\n            {{ column.label }}\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (data.length === 0) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">{{ emptyMessage }}</span>\n          </td>\n        </tr>\n      } @else {\n        @for (row of data; track row; let rowIndex = $index) {\n          <tr [class]=\"bodyRowClass\">\n            @for (column of columns; track column) {\n              <td [class]=\"bodyCellClass(column)\">\n                {{ cellValue(row, column) }}\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsTableComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsTableComponent, isStandalone: true, selector: "cxs-table", inputs: { columns: "columns", data: "data", caption: "caption", ariaLabel: "ariaLabel", striped: "striped", bordered: "bordered", compact: "compact", emptyMessage: "emptyMessage", emptyCell: "emptyCell" }, ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  <table [class]=\"tableClass\" [attr.aria-label]=\"ariaLabel\">\n    @if (caption) {\n      <caption class=\"sr-only\">{{ caption }}</caption>\n    }\n    <thead>\n      <tr [class]=\"headerRowClass\">\n        @for (column of columns; track column) {\n          <th\n            [class]=\"headerCellClass(column)\"\n            [style.width]=\"column.width ?? null\"\n            scope=\"col\"\n          >\n            {{ column.label }}\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (data.length === 0) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">{{ emptyMessage }}</span>\n          </td>\n        </tr>\n      } @else {\n        @for (row of data; track row; let rowIndex = $index) {\n          <tr [class]=\"bodyRowClass\">\n            @for (column of columns; track column) {\n              <td [class]=\"bodyCellClass(column)\">\n                {{ cellValue(row, column) }}\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClass\">\n  <table [class]=\"tableClass\" [attr.aria-label]=\"ariaLabel\">\n    @if (caption) {\n      <caption class=\"sr-only\">{{ caption }}</caption>\n    }\n    <thead>\n      <tr [class]=\"headerRowClass\">\n        @for (column of columns; track column) {\n          <th\n            [class]=\"headerCellClass(column)\"\n            [style.width]=\"column.width ?? null\"\n            scope=\"col\"\n          >\n            {{ column.label }}\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @if (data.length === 0) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">{{ emptyMessage }}</span>\n          </td>\n        </tr>\n      } @else {\n        @for (row of data; track row; let rowIndex = $index) {\n          <tr [class]=\"bodyRowClass\">\n            @for (column of columns; track column) {\n              <td [class]=\"bodyCellClass(column)\">\n                {{ cellValue(row, column) }}\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -3474,10 +3474,10 @@ class CxsToggleComponent {
         }
         this.checkedChange.emit(!this.checked);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsToggleComponent, isStandalone: true, selector: "cxs-toggle", inputs: { checked: "checked", disabled: "disabled", size: "size", label: "label", ariaLabel: "ariaLabel" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  <button\n    type=\"button\"\n    [class]=\"trackClass\"\n    role=\"switch\"\n    [disabled]=\"disabled\"\n    [attr.aria-checked]=\"checked ? 'true' : 'false'\"\n    [attr.aria-labelledby]=\"label ? labelId : null\"\n    [attr.aria-label]=\"ariaLabelValue\"\n    (click)=\"toggle()\"\n  >\n    <span [class]=\"thumbClass\" aria-hidden=\"true\"></span>\n  </button>\n  @if (label) {\n    <span [id]=\"labelId\" [class]=\"labelClass\">{{ label }}</span>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsToggleComponent, isStandalone: true, selector: "cxs-toggle", inputs: { checked: "checked", disabled: "disabled", size: "size", label: "label", ariaLabel: "ariaLabel" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  <button\n    type=\"button\"\n    [class]=\"trackClass\"\n    role=\"switch\"\n    [disabled]=\"disabled\"\n    [attr.aria-checked]=\"checked ? 'true' : 'false'\"\n    [attr.aria-labelledby]=\"label ? labelId : null\"\n    [attr.aria-label]=\"ariaLabelValue\"\n    (click)=\"toggle()\"\n  >\n    <span [class]=\"thumbClass\" aria-hidden=\"true\"></span>\n  </button>\n  @if (label) {\n    <span [id]=\"labelId\" [class]=\"labelClass\">{{ label }}</span>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClass\">\n  <button\n    type=\"button\"\n    [class]=\"trackClass\"\n    role=\"switch\"\n    [disabled]=\"disabled\"\n    [attr.aria-checked]=\"checked ? 'true' : 'false'\"\n    [attr.aria-labelledby]=\"label ? labelId : null\"\n    [attr.aria-label]=\"ariaLabelValue\"\n    (click)=\"toggle()\"\n  >\n    <span [class]=\"thumbClass\" aria-hidden=\"true\"></span>\n  </button>\n  @if (label) {\n    <span [id]=\"labelId\" [class]=\"labelClass\">{{ label }}</span>\n  }\n</div>\n" }]
         }], propDecorators: { checked: [{
@@ -3657,12 +3657,12 @@ class CxsToastComponent {
             this.exitTimeoutId = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsToastComponent, deps: [{ token: 'class', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsToastComponent, isStandalone: true, selector: "cxs-toast", inputs: { open: "open", title: "title", message: "message", ariaLabel: "ariaLabel", variant: "variant", dismissible: "dismissible", duration: "duration", position: "position", maxWidth: "maxWidth" }, outputs: { openChange: "openChange", dismissed: "dismissed" }, host: { properties: { "attr.data-cxs-toast-position": "this.positionAttribute" } }, usesOnChanges: true, ngImport: i0, template: "@if (rendered) {\n  <div [class]=\"hostClassName\">\n    <div\n      [class]=\"toastClass\"\n      [attr.role]=\"role\"\n      [attr.aria-live]=\"ariaLive\"\n      [attr.aria-label]=\"ariaLabelValue\"\n    >\n      <div class=\"flex-1\">\n        @if (title) {\n          <p [class]=\"titleClass\">{{ title }}</p>\n        }\n        @if (message) {\n          <p [class]=\"messageClass\">{{ message }}</p>\n        }\n        <ng-content></ng-content>\n        <div [class]=\"actionsClass\">\n          <ng-content select=\"[cxsToastAction]\"></ng-content>\n        </div>\n      </div>\n      @if (dismissible) {\n        <button\n          type=\"button\"\n          [class]=\"closeButtonClass\"\n          aria-label=\"Dismiss notification\"\n          (click)=\"requestClose('dismiss')\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n          </svg>\n\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.cxs-toast-panel{animation:cxs-toast-enter .24s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.cxs-toast-panel-exit{animation:cxs-toast-exit .22s ease-in forwards}:host([data-cxs-toast-position=\"bottom-right\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"right\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"top-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: 0}:host([data-cxs-toast-position=\"bottom-left\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"left\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"top-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: 0}:host([data-cxs-toast-position=\"bottom\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"top\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"bottom-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"bottom-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"top-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"top-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"center\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: 1rem}@keyframes cxs-toast-enter{0%{opacity:0;transform:translate3d(var(--cxs-toast-enter-x, 120%),var(--cxs-toast-enter-y, 120%),0)}to{opacity:1;transform:translateZ(0)}}@keyframes cxs-toast-exit{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(var(--cxs-toast-enter-x, 120%),var(--cxs-toast-enter-y, 120%),0)}}@media (prefers-reduced-motion: reduce){.cxs-toast-panel,.cxs-toast-panel-exit{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsToastComponent, deps: [{ token: 'class', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsToastComponent, isStandalone: true, selector: "cxs-toast", inputs: { open: "open", title: "title", message: "message", ariaLabel: "ariaLabel", variant: "variant", dismissible: "dismissible", duration: "duration", position: "position", maxWidth: "maxWidth" }, outputs: { openChange: "openChange", dismissed: "dismissed" }, host: { properties: { "attr.data-cxs-toast-position": "this.positionAttribute" } }, usesOnChanges: true, ngImport: i0, template: "@if (rendered) {\n  <div [class]=\"hostClassName\">\n    <div\n      [class]=\"toastClass\"\n      [attr.role]=\"role\"\n      [attr.aria-live]=\"ariaLive\"\n      [attr.aria-label]=\"ariaLabelValue\"\n    >\n      <div class=\"flex-1\">\n        @if (title) {\n          <p [class]=\"titleClass\">{{ title }}</p>\n        }\n        @if (message) {\n          <p [class]=\"messageClass\">{{ message }}</p>\n        }\n        <ng-content></ng-content>\n        <div [class]=\"actionsClass\">\n          <ng-content select=\"[cxsToastAction]\"></ng-content>\n        </div>\n      </div>\n      @if (dismissible) {\n        <button\n          type=\"button\"\n          [class]=\"closeButtonClass\"\n          aria-label=\"Dismiss notification\"\n          (click)=\"requestClose('dismiss')\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n          </svg>\n\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.cxs-toast-panel{animation:cxs-toast-enter .24s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.cxs-toast-panel-exit{animation:cxs-toast-exit .22s ease-in forwards}:host([data-cxs-toast-position=\"bottom-right\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"right\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"top-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: 0}:host([data-cxs-toast-position=\"bottom-left\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"left\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"top-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: 0}:host([data-cxs-toast-position=\"bottom\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"top\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"bottom-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"bottom-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"top-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"top-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"center\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: 1rem}@keyframes cxs-toast-enter{0%{opacity:0;transform:translate3d(var(--cxs-toast-enter-x, 120%),var(--cxs-toast-enter-y, 120%),0)}to{opacity:1;transform:translateZ(0)}}@keyframes cxs-toast-exit{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(var(--cxs-toast-enter-x, 120%),var(--cxs-toast-enter-y, 120%),0)}}@media(prefers-reduced-motion:reduce){.cxs-toast-panel,.cxs-toast-panel-exit{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cxs-toast', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (rendered) {\n  <div [class]=\"hostClassName\">\n    <div\n      [class]=\"toastClass\"\n      [attr.role]=\"role\"\n      [attr.aria-live]=\"ariaLive\"\n      [attr.aria-label]=\"ariaLabelValue\"\n    >\n      <div class=\"flex-1\">\n        @if (title) {\n          <p [class]=\"titleClass\">{{ title }}</p>\n        }\n        @if (message) {\n          <p [class]=\"messageClass\">{{ message }}</p>\n        }\n        <ng-content></ng-content>\n        <div [class]=\"actionsClass\">\n          <ng-content select=\"[cxsToastAction]\"></ng-content>\n        </div>\n      </div>\n      @if (dismissible) {\n        <button\n          type=\"button\"\n          [class]=\"closeButtonClass\"\n          aria-label=\"Dismiss notification\"\n          (click)=\"requestClose('dismiss')\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n          </svg>\n\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.cxs-toast-panel{animation:cxs-toast-enter .24s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.cxs-toast-panel-exit{animation:cxs-toast-exit .22s ease-in forwards}:host([data-cxs-toast-position=\"bottom-right\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"right\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"top-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: 0}:host([data-cxs-toast-position=\"bottom-left\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"left\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"top-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: 0}:host([data-cxs-toast-position=\"bottom\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"top\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"bottom-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"bottom-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"top-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"top-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"center\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: 1rem}@keyframes cxs-toast-enter{0%{opacity:0;transform:translate3d(var(--cxs-toast-enter-x, 120%),var(--cxs-toast-enter-y, 120%),0)}to{opacity:1;transform:translateZ(0)}}@keyframes cxs-toast-exit{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(var(--cxs-toast-enter-x, 120%),var(--cxs-toast-enter-y, 120%),0)}}@media (prefers-reduced-motion: reduce){.cxs-toast-panel,.cxs-toast-panel-exit{animation:none}}\n"] }]
+            args: [{ selector: 'cxs-toast', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (rendered) {\n  <div [class]=\"hostClassName\">\n    <div\n      [class]=\"toastClass\"\n      [attr.role]=\"role\"\n      [attr.aria-live]=\"ariaLive\"\n      [attr.aria-label]=\"ariaLabelValue\"\n    >\n      <div class=\"flex-1\">\n        @if (title) {\n          <p [class]=\"titleClass\">{{ title }}</p>\n        }\n        @if (message) {\n          <p [class]=\"messageClass\">{{ message }}</p>\n        }\n        <ng-content></ng-content>\n        <div [class]=\"actionsClass\">\n          <ng-content select=\"[cxsToastAction]\"></ng-content>\n        </div>\n      </div>\n      @if (dismissible) {\n        <button\n          type=\"button\"\n          [class]=\"closeButtonClass\"\n          aria-label=\"Dismiss notification\"\n          (click)=\"requestClose('dismiss')\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n          </svg>\n\n        </button>\n      }\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.cxs-toast-panel{animation:cxs-toast-enter .24s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.cxs-toast-panel-exit{animation:cxs-toast-exit .22s ease-in forwards}:host([data-cxs-toast-position=\"bottom-right\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"right\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"top-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: 0}:host([data-cxs-toast-position=\"bottom-left\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"left\"]) .cxs-toast-panel,:host([data-cxs-toast-position=\"top-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: 0}:host([data-cxs-toast-position=\"bottom\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"top\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"bottom-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"bottom-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: 120%}:host([data-cxs-toast-position=\"top-right\"]) .cxs-toast-panel{--cxs-toast-enter-x: 120%;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"top-left\"]) .cxs-toast-panel{--cxs-toast-enter-x: -120%;--cxs-toast-enter-y: -120%}:host([data-cxs-toast-position=\"center\"]) .cxs-toast-panel{--cxs-toast-enter-x: 0;--cxs-toast-enter-y: 1rem}@keyframes cxs-toast-enter{0%{opacity:0;transform:translate3d(var(--cxs-toast-enter-x, 120%),var(--cxs-toast-enter-y, 120%),0)}to{opacity:1;transform:translateZ(0)}}@keyframes cxs-toast-exit{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(var(--cxs-toast-enter-x, 120%),var(--cxs-toast-enter-y, 120%),0)}}@media(prefers-reduced-motion:reduce){.cxs-toast-panel,.cxs-toast-panel-exit{animation:none}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['class']
@@ -3747,10 +3747,10 @@ class CxsTooltipComponent {
             this.hide();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsTooltipComponent, isStandalone: true, selector: "cxs-tooltip", inputs: { text: "text", position: "position", disabled: "disabled" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<span [class]=\"wrapperClass\">\n  <span [attr.aria-describedby]=\"describedBy\">\n    <ng-content></ng-content>\n  </span>\n  @if (open) {\n    <span [id]=\"tooltipId\" role=\"tooltip\" [class]=\"tooltipClass\">\n      {{ text }}\n    </span>\n  }\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsTooltipComponent, isStandalone: true, selector: "cxs-tooltip", inputs: { text: "text", position: "position", disabled: "disabled" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<span [class]=\"wrapperClass\">\n  <span [attr.aria-describedby]=\"describedBy\">\n    <ng-content></ng-content>\n  </span>\n  @if (open) {\n    <span [id]=\"tooltipId\" role=\"tooltip\" [class]=\"tooltipClass\">\n      {{ text }}\n    </span>\n  }\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cxs-tooltip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"wrapperClass\">\n  <span [attr.aria-describedby]=\"describedBy\">\n    <ng-content></ng-content>\n  </span>\n  @if (open) {\n    <span [id]=\"tooltipId\" role=\"tooltip\" [class]=\"tooltipClass\">\n      {{ text }}\n    </span>\n  }\n</span>\n" }]
         }], propDecorators: { text: [{
@@ -3860,10 +3860,10 @@ class CxsThemeDirective {
         }
         this.mediaListener = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsThemeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: CxsThemeDirective, isStandalone: true, selector: "[cxsTheme]", inputs: { cxsTheme: "cxsTheme", cxsThemeDarkClass: "cxsThemeDarkClass" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsThemeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: CxsThemeDirective, isStandalone: true, selector: "[cxsTheme]", inputs: { cxsTheme: "cxsTheme", cxsThemeDarkClass: "cxsThemeDarkClass" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsThemeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsThemeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cxsTheme]',