cerxos-ui 0.0.3 → 0.0.5

package/fesm2022/cerxos-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, HostListener, Directive } from '@angular/core';
+import { Component, EventEmitter, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, Directive, ContentChildren, ViewChild, HostListener, ElementRef, ViewChildren } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgIf } from '@angular/common';
+import { NgTemplateOutlet, NgIf } 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 });
@@ -20,9 +20,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   ` }]
         }] });
 
-const BASE_CLASSES$7 = 'relative flex w-full gap-3 rounded-[var(--cxs-radius-md)] border border-l-4 px-4 py-3 text-sm ' +
+const BASE_CLASSES$a = 'relative flex w-full gap-3 rounded-[var(--cxs-radius-md)] border border-l-4 px-4 py-3 text-sm ' +
     'text-[var(--cxs-color-on-surface)]';
-const VARIANT_CLASSES$6 = {
+const VARIANT_CLASSES$7 = {
     info: 'border-[var(--cxs-color-primary)] border-l-[var(--cxs-color-primary)] ' +
         'bg-[var(--cxs-color-primary-ghost)]',
     neutral: 'border-[var(--cxs-color-border)] border-l-[var(--cxs-color-border)] ' +
@@ -36,7 +36,7 @@ const TITLE_VARIANT = {
     neutral: 'text-[var(--cxs-color-on-surface)]',
     danger: 'text-[var(--cxs-color-danger)]'
 };
-const CLOSE_BUTTON_CLASSES = 'ml-auto inline-flex h-8 w-8 items-center justify-center rounded-[var(--cxs-radius-md)] ' +
+const CLOSE_BUTTON_CLASSES$2 = 'ml-auto inline-flex h-8 w-8 items-center justify-center rounded-[var(--cxs-radius-md)] ' +
     'text-[var(--cxs-color-on-surface)] transition-colors hover:bg-[var(--cxs-color-surface-hover)] ' +
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
     'focus-visible:outline-[var(--cxs-color-focus)]';
@@ -47,24 +47,24 @@ class CxsAlertComponent {
     closed = new EventEmitter();
     isVisible = true;
     get alertClass() {
-        return [BASE_CLASSES$7, VARIANT_CLASSES$6[this.variant]].join(' ');
+        return [BASE_CLASSES$a, VARIANT_CLASSES$7[this.variant]].join(' ');
     }
     get titleClass() {
         return [TITLE_BASE, TITLE_VARIANT[this.variant]].join(' ');
     }
     get closeButtonClass() {
-        return CLOSE_BUTTON_CLASSES;
+        return CLOSE_BUTTON_CLASSES$2;
     }
     onClose() {
         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 ɵ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) {\r\n  <div [class]=\"alertClass\" role=\"status\" aria-live=\"polite\">\r\n    <div class=\"flex flex-col gap-1\">\r\n      @if (title) {\r\n        <div [class]=\"titleClass\">{{ title }}</div>\r\n      }\r\n      <div class=\"text-[var(--cxs-color-on-surface)]\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n    @if (dismissible) {\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"closeButtonClass\"\r\n        aria-label=\"Dismiss alert\"\r\n        (click)=\"onClose()\"\r\n      >\r\n        x\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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" }]
+            args: [{ selector: 'cxs-alert', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isVisible) {\r\n  <div [class]=\"alertClass\" role=\"status\" aria-live=\"polite\">\r\n    <div class=\"flex flex-col gap-1\">\r\n      @if (title) {\r\n        <div [class]=\"titleClass\">{{ title }}</div>\r\n      }\r\n      <div class=\"text-[var(--cxs-color-on-surface)]\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n    </div>\r\n    @if (dismissible) {\r\n      <button\r\n        type=\"button\"\r\n        [class]=\"closeButtonClass\"\r\n        aria-label=\"Dismiss alert\"\r\n        (click)=\"onClose()\"\r\n      >\r\n        x\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n" }]
         }], propDecorators: { variant: [{
                 type: Input
             }], title: [{
@@ -75,9 +75,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
-const BASE_CLASSES$6 = 'inline-flex items-center gap-1 rounded-[var(--cxs-radius-md)] border px-2.5 py-0.5 text-xs font-medium ' +
+const BASE_CLASSES$9 = 'grid';
+const SPACING_CLASSES = {
+    sm: 'gap-2',
+    md: 'gap-3',
+    lg: 'gap-4'
+};
+class CxsAccordionComponent {
+    spacing = 'md';
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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: [{
+                type: Input
+            }] } });
+
+const ITEM_BASE = 'rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+    'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)]';
+const ITEM_DISABLED = 'opacity-60';
+const HEADER_BASE = 'flex w-full items-center justify-between gap-3 text-left font-medium transition-colors ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)]';
+const HEADER_HOVER = 'hover:bg-[var(--cxs-color-surface-hover)]';
+const HEADER_DISABLED = 'cursor-not-allowed';
+const CONTENT_BASE = 'text-(--cxs-color-on-surface-muted)';
+const SIZE_HEADER_CLASSES = {
+    sm: 'px-3 py-2 text-sm',
+    md: 'px-4 py-3 text-sm',
+    lg: 'px-5 py-4 text-base'
+};
+const SIZE_CONTENT_CLASSES = {
+    sm: 'px-3 pb-3 text-sm',
+    md: 'px-4 pb-4 text-sm',
+    lg: 'px-5 pb-5 text-base'
+};
+class CxsAccordionItemComponent {
+    static nextId = 0;
+    title;
+    expanded = false;
+    disabled = false;
+    size = 'md';
+    expandedChange = new EventEmitter();
+    buttonId = `cxs-accordion-button-${++CxsAccordionItemComponent.nextId}`;
+    contentId = `cxs-accordion-panel-${CxsAccordionItemComponent.nextId}`;
+    get itemClass() {
+        return [ITEM_BASE, this.disabled ? ITEM_DISABLED : ''].filter(Boolean).join(' ');
+    }
+    get headerClass() {
+        return [
+            HEADER_BASE,
+            SIZE_HEADER_CLASSES[this.size],
+            this.disabled ? HEADER_DISABLED : HEADER_HOVER
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get contentClass() {
+        return [CONTENT_BASE, SIZE_CONTENT_CLASSES[this.size]].join(' ');
+    }
+    get iconClass() {
+        return [
+            'h-4 w-4 shrink-0 text-(--cxs-color-on-surface-muted) transition-transform',
+            this.expanded ? 'rotate-180' : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    toggle() {
+        if (this.disabled) {
+            return;
+        }
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], expandedChange: [{
+                type: Output
+            }] } });
+
+const BASE_CLASSES$8 = 'inline-flex items-center gap-1 rounded-[var(--cxs-radius-md)] border px-2.5 py-0.5 text-xs font-medium ' +
     'leading-none';
-const VARIANT_CLASSES$5 = {
+const VARIANT_CLASSES$6 = {
     primary: 'border-[var(--cxs-color-primary)] bg-[var(--cxs-color-primary-ghost)] ' +
         'text-[var(--cxs-color-primary)]',
     neutral: 'border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] ' +
@@ -85,7 +182,7 @@ const VARIANT_CLASSES$5 = {
     danger: 'border-[var(--cxs-color-danger)] bg-[var(--cxs-color-surface)] ' +
         'text-[var(--cxs-color-danger)]'
 };
-const SIZE_CLASSES$6 = {
+const SIZE_CLASSES$7 = {
     sm: 'text-[11px]',
     md: 'text-xs'
 };
@@ -93,21 +190,124 @@ class CxsBadgeComponent {
     variant = 'primary';
     size = 'md';
     get badgeClass() {
-        return [BASE_CLASSES$6, VARIANT_CLASSES$5[this.variant], SIZE_CLASSES$6[this.size]].join(' ');
+        return [BASE_CLASSES$8, VARIANT_CLASSES$6[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 ɵ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\">\r\n  <ng-content></ng-content>\r\n</span>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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" }]
+            args: [{ selector: 'cxs-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"badgeClass\">\r\n  <ng-content></ng-content>\r\n</span>\r\n" }]
         }], propDecorators: { variant: [{
                 type: Input
             }], size: [{
                 type: Input
             }] } });
 
-const BASE_CLASSES$5 = 'flex flex-wrap items-center gap-x-1 gap-y-1';
+const BASE_CLASSES$7 = 'inline-flex items-center justify-center overflow-hidden border border-[var(--cxs-color-border)] ' +
+    'bg-[var(--cxs-color-primary-ghost)] text-[var(--cxs-color-primary)] font-semibold uppercase ' +
+    'select-none';
+const SIZE_CLASSES$6 = {
+    sm: 'h-8 w-8 text-[11px]',
+    md: 'h-10 w-10 text-xs',
+    lg: 'h-14 w-14 text-sm'
+};
+const SHAPE_CLASSES = {
+    circle: 'rounded-full',
+    square: 'rounded-[var(--cxs-radius-md)]'
+};
+const FALLBACK_CLASSES = 'leading-none';
+class CxsAvatarComponent {
+    hostClass;
+    _src;
+    set src(value) {
+        if (value !== this._src) {
+            this._src = value;
+            this.imageError = false;
+        }
+    }
+    get src() {
+        return this._src;
+    }
+    name;
+    alt;
+    size = 'md';
+    shape = 'circle';
+    imageError = false;
+    constructor(hostClass) {
+        this.hostClass = hostClass;
+    }
+    get avatarClass() {
+        return [BASE_CLASSES$7, SIZE_CLASSES$6[this.size], SHAPE_CLASSES[this.shape], this.hostClass]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get fallbackClass() {
+        return FALLBACK_CLASSES;
+    }
+    get altText() {
+        if (this.alt !== undefined) {
+            return this.alt;
+        }
+        if (this.name) {
+            return this.name;
+        }
+        return 'Avatar';
+    }
+    get fallbackLabel() {
+        if (this.name) {
+            return this.name;
+        }
+        if (this.alt && this.alt.trim().length > 0) {
+            return this.alt;
+        }
+        return 'Avatar';
+    }
+    get fallbackText() {
+        if (!this.name) {
+            return '?';
+        }
+        return this.getInitials(this.name);
+    }
+    get showImage() {
+        return !!this.src && !this.imageError;
+    }
+    onImageError() {
+        this.imageError = true;
+    }
+    getInitials(value) {
+        const parts = value
+            .trim()
+            .split(/\s+/)
+            .filter(Boolean);
+        if (parts.length >= 2) {
+            return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+        }
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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: [{
+                    type: Attribute,
+                    args: ['class']
+                }] }], propDecorators: { src: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], alt: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], shape: [{
+                type: Input
+            }] } });
+
+const BASE_CLASSES$6 = 'flex flex-wrap items-center gap-x-1 gap-y-1';
 const ITEM_CLASSES = 'flex items-center gap-1';
 const LINK_BASE_CLASSES = 'rounded-[var(--cxs-radius-md)] transition-colors focus-visible:outline focus-visible:outline-2 ' +
     'focus-visible:outline-offset-2 focus-visible:outline-[var(--cxs-color-focus)]';
@@ -135,7 +335,7 @@ class CxsBreadcrumbComponent {
     variant = 'default';
     disabled = false;
     get listClass() {
-        return [BASE_CLASSES$5, SIZE_CLASSES$5[this.size], this.disabled ? 'opacity-60' : '']
+        return [BASE_CLASSES$6, SIZE_CLASSES$5[this.size], this.disabled ? 'opacity-60' : '']
             .filter(Boolean)
             .join(' ');
     }
@@ -177,11 +377,11 @@ 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 ɵ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\">\r\n  <ol [class]=\"listClass\">\r\n    @for (item of items; track item; let last = $last) {\r\n      <li [class]=\"itemClass\">\r\n      @if (isLink(item, last)) {\r\n        <a\r\n          [class]=\"getLinkClass(item)\"\r\n          [attr.href]=\"item.href\"\r\n          [attr.target]=\"item.target ?? null\"\r\n          [attr.rel]=\"getItemRel(item)\"\r\n          [attr.aria-label]=\"item.ariaLabel ?? null\"\r\n        >\r\n          {{ item.label }}\r\n        </a>\r\n      } @else {\r\n        <span\r\n          [class]=\"getLabelClass(item, last)\"\r\n          [attr.aria-current]=\"last ? 'page' : null\"\r\n        >\r\n          {{ item.label }}\r\n        </span>\r\n      }\r\n      @if (!last && separator) {\r\n        <span [class]=\"separatorClass\" aria-hidden=\"true\">{{ separator }}</span>\r\n      }\r\n      </li>\r\n    }\r\n  </ol>\r\n</nav>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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" }]
+            args: [{ selector: 'cxs-breadcrumb', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [attr.aria-label]=\"ariaLabel\">\r\n  <ol [class]=\"listClass\">\r\n    @for (item of items; track item; let last = $last) {\r\n      <li [class]=\"itemClass\">\r\n      @if (isLink(item, last)) {\r\n        <a\r\n          [class]=\"getLinkClass(item)\"\r\n          [attr.href]=\"item.href\"\r\n          [attr.target]=\"item.target ?? null\"\r\n          [attr.rel]=\"getItemRel(item)\"\r\n          [attr.aria-label]=\"item.ariaLabel ?? null\"\r\n        >\r\n          {{ item.label }}\r\n        </a>\r\n      } @else {\r\n        <span\r\n          [class]=\"getLabelClass(item, last)\"\r\n          [attr.aria-current]=\"last ? 'page' : null\"\r\n        >\r\n          {{ item.label }}\r\n        </span>\r\n      }\r\n      @if (!last && separator) {\r\n        <span [class]=\"separatorClass\" aria-hidden=\"true\">{{ separator }}</span>\r\n      }\r\n      </li>\r\n    }\r\n  </ol>\r\n</nav>\r\n" }]
         }], propDecorators: { items: [{
                 type: Input
             }], separator: [{
@@ -196,10 +396,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
-const BASE_CLASSES$4 = 'relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors ' +
+const BASE_CLASSES$5 = 'relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors ' +
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
     'focus-visible:outline-[var(--cxs-color-focus)] disabled:pointer-events-none disabled:opacity-50';
-const VARIANT_CLASSES$4 = {
+const VARIANT_CLASSES$5 = {
     primary: 'bg-[var(--cxs-color-primary)] text-[var(--cxs-color-on-primary)] ' +
         'hover:bg-[var(--cxs-color-primary-hover)] shadow-[var(--cxs-shadow-sm)]',
     secondary: 'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
@@ -225,16 +425,16 @@ class CxsButtonComponent {
         return this.disabled || this.loading;
     }
     get buttonClass() {
-        return [BASE_CLASSES$4, SIZE_CLASSES$4[this.size], VARIANT_CLASSES$4[this.variant], this.hostClass]
+        return [BASE_CLASSES$5, SIZE_CLASSES$4[this.size], VARIANT_CLASSES$5[this.variant], this.hostClass]
             .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  <span class=\"truncate\">\n    <ng-content></ng-content>\n  </span>\n</button>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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\r\n  [class]=\"buttonClass\"\r\n  [attr.type]=\"type\"\r\n  [disabled]=\"isDisabled\"\r\n  [attr.aria-busy]=\"loading ? 'true' : null\"\r\n>\r\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: [{
             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  <span class=\"truncate\">\n    <ng-content></ng-content>\n  </span>\n</button>\n" }]
+            args: [{ selector: 'cxs-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\r\n  [class]=\"buttonClass\"\r\n  [attr.type]=\"type\"\r\n  [disabled]=\"isDisabled\"\r\n  [attr.aria-busy]=\"loading ? 'true' : null\"\r\n>\r\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: [{
                     type: Attribute,
                     args: ['class']
@@ -250,9 +450,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
-const BASE_CLASSES$3 = 'rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+const BASE_CLASSES$4 = 'rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)]';
-const VARIANT_CLASSES$3 = {
+const VARIANT_CLASSES$4 = {
     surface: 'bg-[var(--cxs-color-surface)]',
     muted: 'bg-[var(--cxs-color-surface-hover)]',
     outline: 'bg-transparent'
@@ -270,8 +470,8 @@ class CxsCardComponent {
     ariaLabelledby;
     get cardClass() {
         return [
-            BASE_CLASSES$3,
-            VARIANT_CLASSES$3[this.variant],
+            BASE_CLASSES$4,
+            VARIANT_CLASSES$4[this.variant],
             SIZE_CLASSES$3[this.size],
             this.elevated ? 'shadow-[var(--cxs-shadow-sm)]' : ''
         ]
@@ -279,11 +479,11 @@ class CxsCardComponent {
             .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 ɵ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\r\n  [class]=\"cardClass\"\r\n  [attr.aria-label]=\"ariaLabel\"\r\n  [attr.aria-labelledby]=\"ariaLabelledby\"\r\n>\r\n  <ng-content></ng-content>\r\n</section>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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" }]
+            args: [{ selector: 'cxs-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\r\n  [class]=\"cardClass\"\r\n  [attr.aria-label]=\"ariaLabel\"\r\n  [attr.aria-labelledby]=\"ariaLabelledby\"\r\n>\r\n  <ng-content></ng-content>\r\n</section>\r\n" }]
         }], propDecorators: { variant: [{
                 type: Input
             }], size: [{
@@ -401,7 +601,7 @@ class CxsCheckboxComponent {
                 useExisting: forwardRef(() => CxsCheckboxComponent),
                 multi: true
             }
-        ], 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 });
+        ], ngImport: i0, template: "<label [class]=\"wrapperClass\">\r\n  <input\r\n    class=\"peer sr-only\"\r\n    type=\"checkbox\"\r\n    [attr.id]=\"id\"\r\n    [attr.name]=\"name\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-describedby]=\"ariaDescribedby\"\r\n    [attr.aria-checked]=\"ariaChecked\"\r\n    [attr.autofocus]=\"autofocus ? true : null\"\r\n    [checked]=\"checked\"\r\n    [indeterminate]=\"indeterminate\"\r\n    [disabled]=\"isDisabled\"\r\n    [required]=\"required\"\r\n    (change)=\"onCheckboxChange($event)\"\r\n    (blur)=\"onBlur()\"\r\n  />\r\n  <span [class]=\"controlClass\" aria-hidden=\"true\"></span>\r\n  @if (label) {\r\n    <span [class]=\"labelClass\">{{ label }}</span>\r\n  } @else {\r\n    <span [class]=\"labelClass\">\r\n      <ng-content></ng-content>\r\n    </span>\r\n  }\r\n</label>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCheckboxComponent, decorators: [{
             type: Component,
@@ -411,7 +611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => CxsCheckboxComponent),
                             multi: true
                         }
-                    ], 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" }]
+                    ], template: "<label [class]=\"wrapperClass\">\r\n  <input\r\n    class=\"peer sr-only\"\r\n    type=\"checkbox\"\r\n    [attr.id]=\"id\"\r\n    [attr.name]=\"name\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-describedby]=\"ariaDescribedby\"\r\n    [attr.aria-checked]=\"ariaChecked\"\r\n    [attr.autofocus]=\"autofocus ? true : null\"\r\n    [checked]=\"checked\"\r\n    [indeterminate]=\"indeterminate\"\r\n    [disabled]=\"isDisabled\"\r\n    [required]=\"required\"\r\n    (change)=\"onCheckboxChange($event)\"\r\n    (blur)=\"onBlur()\"\r\n  />\r\n  <span [class]=\"controlClass\" aria-hidden=\"true\"></span>\r\n  @if (label) {\r\n    <span [class]=\"labelClass\">{{ label }}</span>\r\n  } @else {\r\n    <span [class]=\"labelClass\">\r\n      <ng-content></ng-content>\r\n    </span>\r\n  }\r\n</label>\r\n" }]
         }], propDecorators: { checked: [{
                 type: Input
             }], indeterminate: [{
@@ -438,175 +638,1103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
-const BASE_CLASSES$2 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
-    'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
-    'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
-    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
-    'focus-visible:outline-[var(--cxs-color-focus)] focus-visible:border-[var(--cxs-color-focus)] ' +
-    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60';
-const VARIANT_CLASSES$2 = {
-    outline: 'bg-[var(--cxs-color-surface)]',
-    filled: 'bg-[var(--cxs-color-surface-hover)]'
-};
-const SIZE_CLASSES$2 = {
-    sm: 'h-8 px-3 text-sm',
-    md: 'h-10 px-3 text-sm',
-    lg: 'h-12 px-4 text-base'
-};
-const INVALID_CLASSES$3 = 'border-[var(--cxs-color-danger)] focus-visible:border-[var(--cxs-color-danger)] ' +
-    'focus-visible:outline-[var(--cxs-color-danger)]';
-const POPOVER_CLASSES = 'absolute left-0 top-full z-10 mt-2 w-full rounded-[var(--cxs-radius-md)] border ' +
-    'border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] p-3 shadow-[var(--cxs-shadow-sm)]';
-const NAV_BUTTON_CLASSES = 'inline-flex h-8 w-8 items-center justify-center rounded-[var(--cxs-radius-md)] ' +
-    'text-[var(--cxs-color-on-surface)] transition-colors hover:bg-[var(--cxs-color-surface-hover)] ' +
+const WRAPPER_BASE_CLASSES$2 = 'relative overflow-hidden rounded-[var(--cxs-radius-md)]';
+const TRACK_CLASSES = 'flex transition-transform duration-500 ease-out';
+const SLIDE_BASE_CLASSES = 'w-full flex-shrink-0';
+const IMAGE_CLASSES = 'h-56 w-full object-cover';
+const CONTENT_CLASSES = 'absolute inset-x-0 bottom-0 bg-[rgba(15,23,42,0.6)] px-4 py-3 text-sm text-white';
+const CONTROL_CLASSES = 'absolute top-1/2 -translate-y-1/2 inline-flex h-9 w-9 items-center justify-center rounded-full ' +
+    'bg-[rgba(15,23,42,0.7)] text-white transition hover:bg-[rgba(15,23,42,0.85)] ' +
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
     'focus-visible:outline-[var(--cxs-color-focus)]';
-const DAY_BUTTON_BASE = 'flex h-8 w-8 items-center justify-center rounded-[var(--cxs-radius-md)] text-xs ' +
-    'transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
-    'focus-visible:outline-[var(--cxs-color-focus)] disabled:cursor-not-allowed disabled:opacity-40';
-const DAY_OUTSIDE_MONTH = 'text-[var(--cxs-color-on-surface-muted)]';
-const DAY_TODAY = 'border border-[var(--cxs-color-primary)]';
-const DAY_SELECTED = 'bg-[var(--cxs-color-primary)] text-[var(--cxs-color-on-primary)]';
-const DAY_HOVER = 'hover:bg-[var(--cxs-color-surface-hover)]';
-class CxsDatepickerComponent {
-    value = '';
-    variant = 'outline';
-    size = 'md';
-    useNative = true;
-    disabled = false;
-    readonly = false;
-    required = false;
-    invalid = false;
-    autofocus = false;
-    id;
-    name;
-    min;
-    max;
-    placeholder;
-    ariaLabel;
-    ariaDescribedby;
-    valueChange = new EventEmitter();
-    static nextId = 0;
-    fallbackId = `cxs-datepicker-panel-${CxsDatepickerComponent.nextId++}`;
-    disabledFromControl = false;
-    onChange = () => { };
-    onTouched = () => { };
-    isOpen = false;
-    displayMonth = new Date();
-    calendarDays = [];
-    weekDayLabels = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-    get isDisabled() {
-        return this.disabled || this.disabledFromControl;
-    }
-    get panelId() {
-        return this.id ? `${this.id}-panel` : this.fallbackId;
-    }
-    get inputClass() {
-        return [
-            BASE_CLASSES$2,
-            SIZE_CLASSES$2[this.size],
-            VARIANT_CLASSES$2[this.variant],
-            this.invalid ? INVALID_CLASSES$3 : ''
-        ]
-            .filter(Boolean)
-            .join(' ');
+const INDICATOR_CONTAINER_CLASSES = 'absolute bottom-3 left-1/2 flex -translate-x-1/2 items-center gap-2';
+const INDICATOR_BASE_CLASSES = 'h-2 w-2 rounded-full bg-white/50 transition-colors';
+const INDICATOR_ACTIVE_CLASSES = 'bg-white';
+class CxsCarouselComponent {
+    hostClass;
+    items = [];
+    activeIndex = 0;
+    autoplay = false;
+    interval = 4000;
+    loop = true;
+    showControls = true;
+    showIndicators = true;
+    ariaLabel = 'Carousel';
+    activeIndexChange = new EventEmitter();
+    timerId = null;
+    constructor(hostClass) {
+        this.hostClass = hostClass;
     }
-    get popoverClass() {
-        return POPOVER_CLASSES;
+    ngOnChanges(changes) {
+        if (changes['items'] || changes['autoplay'] || changes['interval']) {
+            this.resetAutoplay();
+        }
+        if (changes['activeIndex']) {
+            this.activeIndex = this.clampIndex(this.activeIndex);
+        }
     }
-    get navButtonClass() {
-        return NAV_BUTTON_CLASSES;
+    ngAfterViewInit() {
+        this.resetAutoplay();
     }
-    get displayMonthLabel() {
-        return this.displayMonth.toLocaleString('en-US', { month: 'long', year: 'numeric' });
+    ngOnDestroy() {
+        this.clearAutoplay();
     }
-    writeValue(value) {
-        this.value = value ?? '';
-        this.syncDisplayMonthWithValue();
+    get wrapperClass() {
+        return [WRAPPER_BASE_CLASSES$2, this.hostClass].filter(Boolean).join(' ');
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    get trackStyle() {
+        return `translateX(-${this.activeIndex * 100}%)`;
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    get trackClass() {
+        return TRACK_CLASSES;
     }
-    setDisabledState(isDisabled) {
-        this.disabledFromControl = isDisabled;
+    get slideClass() {
+        return SLIDE_BASE_CLASSES;
     }
-    onInput(event) {
-        const target = event.target;
-        const nextValue = target.value;
-        this.value = nextValue;
-        this.onChange(nextValue);
-        this.valueChange.emit(nextValue);
+    get imageClass() {
+        return IMAGE_CLASSES;
     }
-    onDateSelect(day) {
-        if (day.disabled || this.isDisabled) {
-            return;
-        }
-        const nextValue = this.formatDate(day.date);
-        this.value = nextValue;
-        this.onChange(nextValue);
-        this.valueChange.emit(nextValue);
-        this.isOpen = false;
+    get contentClass() {
+        return CONTENT_CLASSES;
     }
-    onBlur() {
-        this.onTouched();
+    get controlClass() {
+        return CONTROL_CLASSES;
     }
-    open() {
-        if (this.isDisabled || this.useNative) {
-            return;
-        }
-        this.isOpen = true;
-        this.syncDisplayMonthWithValue();
+    get indicatorContainerClass() {
+        return INDICATOR_CONTAINER_CLASSES;
     }
-    toggle() {
-        if (this.isOpen) {
-            this.isOpen = false;
-            return;
-        }
-        this.open();
+    indicatorClass(isActive) {
+        return [INDICATOR_BASE_CLASSES, isActive ? INDICATOR_ACTIVE_CLASSES : '']
+            .filter(Boolean)
+            .join(' ');
     }
-    prevMonth() {
-        this.displayMonth = new Date(this.displayMonth.getFullYear(), this.displayMonth.getMonth() - 1, 1);
-        this.updateCalendar();
+    previous() {
+        this.goTo(this.activeIndex - 1);
     }
-    nextMonth() {
-        this.displayMonth = new Date(this.displayMonth.getFullYear(), this.displayMonth.getMonth() + 1, 1);
-        this.updateCalendar();
+    next() {
+        this.goTo(this.activeIndex + 1);
     }
-    dayButtonClass(day) {
-        return [
-            DAY_BUTTON_BASE,
-            day.inMonth ? '' : DAY_OUTSIDE_MONTH,
-            day.isToday ? DAY_TODAY : '',
-            this.isSelected(day.date) ? DAY_SELECTED : DAY_HOVER
-        ]
-            .filter(Boolean)
-            .join(' ');
+    goTo(index) {
+        const nextIndex = this.normalizeIndex(index);
+        this.activeIndex = nextIndex;
+        this.activeIndexChange.emit(nextIndex);
     }
-    onDocumentClick(event) {
-        if (this.useNative || !this.isOpen) {
-            return;
+    normalizeIndex(index) {
+        if (!this.items.length) {
+            return 0;
         }
-        const target = event.target;
-        if (target && !target.closest(`#${this.panelId}`) && !target.closest(`[data-cxs-datepicker="${this.panelId}"]`)) {
-            this.isOpen = false;
+        if (this.loop) {
+            const total = this.items.length;
+            return (index + total) % total;
         }
+        return this.clampIndex(index);
     }
-    onEscape() {
-        if (this.useNative || !this.isOpen) {
-            return;
+    clampIndex(index) {
+        if (!this.items.length) {
+            return 0;
         }
-        this.isOpen = false;
+        return Math.min(Math.max(0, index), this.items.length - 1);
     }
-    syncDisplayMonthWithValue() {
-        const selected = this.parseDate(this.value);
-        this.displayMonth = selected ?? new Date();
-        this.updateCalendar();
+    resetAutoplay() {
+        this.clearAutoplay();
+        if (!this.autoplay || this.items.length <= 1) {
+            return;
+        }
+        const intervalMs = Math.max(1000, this.interval);
+        this.timerId = setInterval(() => {
+            this.next();
+        }, intervalMs);
+    }
+    clearAutoplay() {
+        if (this.timerId) {
+            clearInterval(this.timerId);
+            this.timerId = null;
+        }
     }
-    updateCalendar() {
-        const year = this.displayMonth.getFullYear();
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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: [{
+                    type: Attribute,
+                    args: ['class']
+                }] }], propDecorators: { items: [{
+                type: Input
+            }], activeIndex: [{
+                type: Input
+            }], autoplay: [{
+                type: Input
+            }], interval: [{
+                type: Input
+            }], loop: [{
+                type: Input
+            }], showControls: [{
+                type: Input
+            }], showIndicators: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], activeIndexChange: [{
+                type: Output
+            }] } });
+
+class CxsDataTableCellDirective {
+    template;
+    columnKey = '';
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDataTableCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cxsDataTableCell]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { columnKey: [{
+                type: Input,
+                args: ['cxsDataTableCell']
+            }] } });
+
+const WRAPPER_BASE_CLASSES$1 = 'w-full overflow-hidden';
+const WRAPPER_BORDERED_CLASSES$1 = 'rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)]';
+const TABLE_BASE_CLASSES$1 = 'w-full border-collapse text-sm text-[var(--cxs-color-on-surface)]';
+const TABLE_COMPACT_CLASSES$1 = 'text-xs';
+const HEADER_ROW_CLASSES$1 = 'border-b border-[var(--cxs-color-border)] text-xs font-semibold ' +
+    'text-[var(--cxs-color-on-surface-muted)]';
+const HEADER_CELL_BASE_CLASSES$1 = 'px-3 py-2 text-left';
+const HEADER_BUTTON_CLASSES = 'inline-flex items-center gap-2 rounded-[var(--cxs-radius-md)] px-2 py-1 ' +
+    'transition-colors hover:bg-[var(--cxs-color-surface-hover)] ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)]';
+const HEADER_FILTER_INPUT_CLASSES = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+    'bg-[var(--cxs-color-surface)] px-2 py-1 text-xs text-[var(--cxs-color-on-surface)] ' +
+    'placeholder:text-[var(--cxs-color-on-surface-muted)] focus-visible:outline focus-visible:outline-2 ' +
+    'focus-visible:outline-offset-2 focus-visible:outline-[var(--cxs-color-focus)]';
+const BODY_ROW_BASE_CLASSES$1 = 'border-b border-[var(--cxs-color-border)] last:border-b-0';
+const BODY_ROW_STRIPED_CLASSES$1 = 'odd:bg-[var(--cxs-color-surface)] even:bg-[var(--cxs-color-surface-hover)]';
+const BODY_CELL_BASE_CLASSES$1 = 'px-3 py-2 align-top';
+const BODY_CELL_COMPACT_CLASSES$1 = 'px-2 py-1.5';
+const ALIGN_CLASSES$1 = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right'
+};
+const EMPTY_ROW_CLASSES$1 = 'text-sm text-[var(--cxs-color-on-surface-muted)]';
+const PAGINATION_CLASSES = 'mt-4 flex flex-wrap items-center justify-between gap-3 text-sm text-[var(--cxs-color-on-surface)]';
+const PAGE_BUTTON_CLASSES = 'inline-flex items-center justify-center rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+    'px-3 py-1.5 text-sm transition-colors hover:bg-[var(--cxs-color-surface-hover)] ' +
+    'disabled:cursor-not-allowed disabled:opacity-60';
+const PAGE_SELECT_CLASSES = 'rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] ' +
+    'px-2 py-1 text-sm';
+const TOOLBAR_CLASSES = 'mb-3 flex flex-wrap items-center justify-between gap-3 text-sm text-[var(--cxs-color-on-surface)]';
+const TOOLBAR_GROUP_CLASSES = 'flex flex-wrap items-center gap-2';
+const TOOLBAR_INPUT_CLASSES = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+    'bg-[var(--cxs-color-surface)] px-3 py-2 text-sm text-[var(--cxs-color-on-surface)] ' +
+    'placeholder:text-[var(--cxs-color-on-surface-muted)] focus-visible:outline focus-visible:outline-2 ' +
+    'focus-visible:outline-offset-2 focus-visible:outline-[var(--cxs-color-focus)]';
+const TOOLBAR_BUTTON_CLASSES = 'inline-flex items-center justify-center rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+    'px-3 py-2 text-sm transition-colors hover:bg-[var(--cxs-color-surface-hover)]';
+const BULK_BAR_CLASSES = 'mb-3 flex flex-wrap items-center justify-between gap-3 rounded-[var(--cxs-radius-md)] ' +
+    'border border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] px-3 py-2 text-sm';
+const RESIZE_HANDLE_CLASSES = 'absolute right-0 top-0 h-full w-2 cursor-col-resize touch-none';
+class CxsDataTableComponent {
+    hostClass;
+    columns = [];
+    data = [];
+    caption;
+    ariaLabel = 'Data table';
+    striped = false;
+    bordered = false;
+    compact = false;
+    loading = false;
+    emptyMessage = 'No data available';
+    emptyCell = '—';
+    pageSize = 10;
+    pageIndex = 1;
+    pageSizeOptions = [10, 20, 50];
+    showPagination = true;
+    showPageSize = true;
+    manualPagination = false;
+    total;
+    sortKey;
+    sortDirection = 'asc';
+    manualSort = false;
+    showToolbar = true;
+    showFilters = true;
+    showColumnVisibility = true;
+    showGlobalSearch = true;
+    manualFilter = false;
+    selectable = false;
+    rowKey = 'id';
+    selectedKeys = [];
+    bulkActions = [];
+    pageChange = new EventEmitter();
+    pageSizeChange = new EventEmitter();
+    sortChange = new EventEmitter();
+    filterChange = new EventEmitter();
+    selectionChange = new EventEmitter();
+    bulkAction = new EventEmitter();
+    cellTemplates;
+    currentPage = 1;
+    currentPageSize = 10;
+    globalFilter = '';
+    columnFilters = {};
+    columnVisibility = {};
+    columnWidths = {};
+    isResizing = false;
+    resizingColumn;
+    pinnedOffsetsLeft = {};
+    pinnedOffsetsRight = {};
+    filtersOpen = true;
+    resizeStartX = 0;
+    resizeStartWidth = 0;
+    constructor(hostClass) {
+        this.hostClass = hostClass;
+    }
+    ngOnChanges(changes) {
+        if (changes['pageIndex']) {
+            this.currentPage = Math.max(1, this.pageIndex);
+        }
+        if (changes['pageSize']) {
+            this.currentPageSize = Math.max(1, this.pageSize);
+        }
+        if (changes['columns']) {
+            this.initializeVisibility();
+            this.initializeWidths();
+            this.updatePinnedOffsets();
+        }
+        if (changes['showFilters']) {
+            this.filtersOpen = this.showFilters;
+        }
+        if (changes['selectedKeys']) {
+            this.selectedKeys = [...this.selectedKeys];
+        }
+    }
+    get wrapperClass() {
+        return [
+            WRAPPER_BASE_CLASSES$1,
+            this.bordered ? WRAPPER_BORDERED_CLASSES$1 : '',
+            this.hostClass
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get tableClass() {
+        return [TABLE_BASE_CLASSES$1, this.compact ? TABLE_COMPACT_CLASSES$1 : '']
+            .filter(Boolean)
+            .join(' ');
+    }
+    get headerRowClass() {
+        return HEADER_ROW_CLASSES$1;
+    }
+    get bodyRowClass() {
+        return [
+            BODY_ROW_BASE_CLASSES$1,
+            this.striped ? BODY_ROW_STRIPED_CLASSES$1 : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get emptyRowClass() {
+        return EMPTY_ROW_CLASSES$1;
+    }
+    get paginationClass() {
+        return PAGINATION_CLASSES;
+    }
+    get pageButtonClass() {
+        return PAGE_BUTTON_CLASSES;
+    }
+    get pageSelectClass() {
+        return PAGE_SELECT_CLASSES;
+    }
+    get toolbarClass() {
+        return TOOLBAR_CLASSES;
+    }
+    get toolbarGroupClass() {
+        return TOOLBAR_GROUP_CLASSES;
+    }
+    get toolbarInputClass() {
+        return TOOLBAR_INPUT_CLASSES;
+    }
+    get toolbarButtonClass() {
+        return TOOLBAR_BUTTON_CLASSES;
+    }
+    get bulkBarClass() {
+        return BULK_BAR_CLASSES;
+    }
+    get resizeHandleClass() {
+        return RESIZE_HANDLE_CLASSES;
+    }
+    get colSpan() {
+        return Math.max(this.visibleColumns.length + (this.selectable ? 1 : 0), 1);
+    }
+    get totalItems() {
+        if (this.manualPagination && this.total !== undefined) {
+            return this.total;
+        }
+        return this.data.length;
+    }
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.totalItems / this.currentPageSize));
+    }
+    get pageLabel() {
+        return `Page ${this.currentPage} of ${this.totalPages}`;
+    }
+    get displayRows() {
+        const filtered = this.manualFilter ? this.data : this.getFilteredData(this.data);
+        const sorted = this.manualSort ? filtered : this.getSortedData(filtered);
+        if (this.manualPagination) {
+            return sorted;
+        }
+        const start = (this.currentPage - 1) * this.currentPageSize;
+        return sorted.slice(start, start + this.currentPageSize);
+    }
+    get visibleColumns() {
+        return this.columns.filter((column) => this.columnVisibility[column.key] !== false);
+    }
+    get selectedCount() {
+        return this.selectedKeys.length;
+    }
+    get allVisibleSelected() {
+        if (!this.displayRows.length) {
+            return false;
+        }
+        return this.displayRows.every((row) => this.isSelected(row));
+    }
+    get someVisibleSelected() {
+        return this.displayRows.some((row) => this.isSelected(row)) && !this.allVisibleSelected;
+    }
+    headerCellClass(column) {
+        return [
+            HEADER_CELL_BASE_CLASSES$1,
+            ALIGN_CLASSES$1[column.align ?? 'left'],
+            column.headerClass ?? ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    headerButtonClass() {
+        return HEADER_BUTTON_CLASSES;
+    }
+    headerFilterInputClass() {
+        return HEADER_FILTER_INPUT_CLASSES;
+    }
+    bodyCellClass(column) {
+        return [
+            BODY_CELL_BASE_CLASSES$1,
+            this.compact ? BODY_CELL_COMPACT_CLASSES$1 : '',
+            ALIGN_CLASSES$1[column.align ?? 'left'],
+            column.cellClass ?? ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    cellTemplate(columnKey) {
+        if (!this.cellTemplates) {
+            return null;
+        }
+        return this.cellTemplates.find((template) => template.columnKey === columnKey)?.template ?? null;
+    }
+    cellValue(row, column) {
+        const value = row[column.key];
+        if (column.formatter) {
+            return column.formatter(value, row);
+        }
+        if (value === null || value === undefined || value === '') {
+            return this.emptyCell;
+        }
+        return String(value);
+    }
+    columnWidth(column) {
+        return this.columnWidths[column.key] ?? column.width ?? null;
+    }
+    columnMinWidth(column) {
+        if (column.minWidth) {
+            return `${column.minWidth}px`;
+        }
+        return null;
+    }
+    pinnedStyle(column) {
+        if (!column.pinned) {
+            return null;
+        }
+        if (column.pinned === 'left') {
+            return { left: `${this.pinnedOffsetsLeft[column.key] ?? 0}px` };
+        }
+        return { right: `${this.pinnedOffsetsRight[column.key] ?? 0}px` };
+    }
+    pinnedLeft(column) {
+        const style = this.pinnedStyle(column);
+        return style ? style['left'] ?? null : null;
+    }
+    pinnedRight(column) {
+        const style = this.pinnedStyle(column);
+        return style ? style['right'] ?? null : null;
+    }
+    pinnedClass(column) {
+        if (!column.pinned) {
+            return '';
+        }
+        return 'sticky z-10';
+    }
+    ariaSort(column) {
+        if (!column.sortable) {
+            return null;
+        }
+        if (this.sortKey !== column.key) {
+            return 'none';
+        }
+        return this.sortDirection === 'asc' ? 'ascending' : 'descending';
+    }
+    onSort(column) {
+        if (!column.sortable) {
+            return;
+        }
+        if (this.sortKey === column.key) {
+            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.sortKey = column.key;
+            this.sortDirection = 'asc';
+        }
+        this.sortChange.emit({
+            key: this.sortKey,
+            direction: this.sortDirection
+        });
+    }
+    goToPage(page) {
+        const nextPage = Math.min(Math.max(1, page), this.totalPages);
+        this.currentPage = nextPage;
+        this.pageChange.emit(nextPage);
+    }
+    nextPage() {
+        this.goToPage(this.currentPage + 1);
+    }
+    previousPage() {
+        this.goToPage(this.currentPage - 1);
+    }
+    onPageSizeChange(value) {
+        const nextSize = Number(value);
+        if (!Number.isFinite(nextSize) || nextSize <= 0) {
+            return;
+        }
+        this.currentPageSize = nextSize;
+        this.pageSizeChange.emit(nextSize);
+        this.goToPage(1);
+    }
+    onGlobalFilterChange(value) {
+        this.globalFilter = value;
+        this.emitFilterChange();
+        this.goToPage(1);
+    }
+    onColumnFilterChange(columnKey, value) {
+        this.columnFilters[columnKey] = value;
+        this.emitFilterChange();
+        this.goToPage(1);
+    }
+    columnFilterValue(columnKey) {
+        return this.columnFilters[columnKey] || '';
+    }
+    toggleColumnVisibility(columnKey) {
+        this.columnVisibility[columnKey] = !this.columnVisibility[columnKey];
+        this.updatePinnedOffsets();
+    }
+    toggleSelectAll() {
+        if (this.allVisibleSelected) {
+            this.selectedKeys = this.selectedKeys.filter((key) => !this.displayRows.some((row) => this.rowIdentifier(row) === key));
+        }
+        else {
+            const keysToAdd = this.displayRows
+                .map((row) => this.rowIdentifier(row))
+                .filter((key) => !this.selectedKeys.includes(key));
+            this.selectedKeys = [...this.selectedKeys, ...keysToAdd];
+        }
+        this.selectionChange.emit([...this.selectedKeys]);
+    }
+    toggleRowSelection(row) {
+        const key = this.rowIdentifier(row);
+        if (this.selectedKeys.includes(key)) {
+            this.selectedKeys = this.selectedKeys.filter((id) => id !== key);
+        }
+        else {
+            this.selectedKeys = [...this.selectedKeys, key];
+        }
+        this.selectionChange.emit([...this.selectedKeys]);
+    }
+    isSelected(row) {
+        return this.selectedKeys.includes(this.rowIdentifier(row));
+    }
+    runBulkAction(actionId) {
+        this.bulkAction.emit({
+            id: actionId,
+            selected: this.data.filter((row) => this.selectedKeys.includes(this.rowIdentifier(row)))
+        });
+    }
+    onResizeStart(event, column) {
+        if (column.resizable === false) {
+            return;
+        }
+        event.preventDefault();
+        const header = event.target.closest('th');
+        if (!header) {
+            return;
+        }
+        this.isResizing = true;
+        this.resizingColumn = column.key;
+        this.resizeStartX = event.clientX;
+        this.resizeStartWidth = header.getBoundingClientRect().width;
+        const onMove = (moveEvent) => {
+            if (!this.isResizing || !this.resizingColumn) {
+                return;
+            }
+            const delta = moveEvent.clientX - this.resizeStartX;
+            const minWidth = column.minWidth ?? 80;
+            const nextWidth = Math.max(minWidth, this.resizeStartWidth + delta);
+            this.columnWidths[this.resizingColumn] = `${Math.round(nextWidth)}px`;
+            this.updatePinnedOffsets();
+        };
+        const onUp = () => {
+            this.isResizing = false;
+            this.resizingColumn = undefined;
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('mouseup', onUp);
+        };
+        window.addEventListener('mousemove', onMove);
+        window.addEventListener('mouseup', onUp);
+    }
+    getSortedData(rows) {
+        if (!this.sortKey) {
+            return rows;
+        }
+        const direction = this.sortDirection === 'asc' ? 1 : -1;
+        return [...rows].sort((a, b) => {
+            const valueA = a[this.sortKey ?? ''];
+            const valueB = b[this.sortKey ?? ''];
+            const normalizedA = valueA === null || valueA === undefined ? '' : String(valueA);
+            const normalizedB = valueB === null || valueB === undefined ? '' : String(valueB);
+            return normalizedA.localeCompare(normalizedB, undefined, { numeric: true }) * direction;
+        });
+    }
+    getFilteredData(rows) {
+        const global = this.globalFilter.trim().toLowerCase();
+        const filters = this.columnFilters;
+        return rows.filter((row) => {
+            if (global) {
+                const matchesGlobal = this.visibleColumns.some((column) => {
+                    const value = row[column.key];
+                    return String(value ?? '').toLowerCase().includes(global);
+                });
+                if (!matchesGlobal) {
+                    return false;
+                }
+            }
+            return this.visibleColumns.every((column) => {
+                if (!column.filterable) {
+                    return true;
+                }
+                const filterValue = (filters[column.key] ?? '').trim().toLowerCase();
+                if (!filterValue) {
+                    return true;
+                }
+                const raw = row[column.key];
+                const normalized = String(raw ?? '').toLowerCase();
+                if (column.filterType === 'select') {
+                    return normalized === filterValue;
+                }
+                return normalized.includes(filterValue);
+            });
+        });
+    }
+    emitFilterChange() {
+        this.filterChange.emit({
+            global: this.globalFilter,
+            columns: { ...this.columnFilters }
+        });
+    }
+    initializeVisibility() {
+        this.columnVisibility = this.columns.reduce((acc, column) => {
+            acc[column.key] = column.visible !== false;
+            return acc;
+        }, {});
+    }
+    initializeWidths() {
+        this.columnWidths = this.columns.reduce((acc, column) => {
+            if (column.width) {
+                acc[column.key] = column.width;
+            }
+            return acc;
+        }, {});
+    }
+    updatePinnedOffsets() {
+        const leftOffsets = {};
+        const rightOffsets = {};
+        let left = 0;
+        let right = 0;
+        const columns = this.visibleColumns;
+        columns.forEach((column) => {
+            if (column.pinned === 'left') {
+                leftOffsets[column.key] = left;
+                left += this.getWidthValue(column);
+            }
+        });
+        [...columns].reverse().forEach((column) => {
+            if (column.pinned === 'right') {
+                rightOffsets[column.key] = right;
+                right += this.getWidthValue(column);
+            }
+        });
+        this.pinnedOffsetsLeft = leftOffsets;
+        this.pinnedOffsetsRight = rightOffsets;
+    }
+    getWidthValue(column) {
+        const width = this.columnWidths[column.key] ?? column.width;
+        if (!width) {
+            return 160;
+        }
+        const match = width.match(/(\d+)(px)?/);
+        if (match) {
+            return Number(match[1]);
+        }
+        return 160;
+    }
+    rowIdentifier(row) {
+        const value = row[this.rowKey];
+        if (value === undefined || value === null) {
+            return JSON.stringify(row);
+        }
+        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", ariaLabel: "ariaLabel", striped: "striped", bordered: "bordered", compact: "compact", loading: "loading", emptyMessage: "emptyMessage", emptyCell: "emptyCell", 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 (showToolbar) {\n  <div [class]=\"toolbarClass\">\n    <div [class]=\"toolbarGroupClass\">\n      @if (showGlobalSearch) {\n        <input\n          type=\"search\"\n          [class]=\"toolbarInputClass\"\n          placeholder=\"Search\"\n          [value]=\"globalFilter\"\n          (input)=\"onGlobalFilterChange($any($event.target).value)\"\n        />\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\">\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\"></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                    placeholder=\"Filter\"\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: [{
+            type: Component,
+            args: [{ selector: 'cxs-data-table', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showToolbar) {\n  <div [class]=\"toolbarClass\">\n    <div [class]=\"toolbarGroupClass\">\n      @if (showGlobalSearch) {\n        <input\n          type=\"search\"\n          [class]=\"toolbarInputClass\"\n          placeholder=\"Search\"\n          [value]=\"globalFilter\"\n          (input)=\"onGlobalFilterChange($any($event.target).value)\"\n        />\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\">\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\"></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                    placeholder=\"Filter\"\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: [{
+                    type: Attribute,
+                    args: ['class']
+                }] }], propDecorators: { columns: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], caption: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], striped: [{
+                type: Input
+            }], bordered: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], emptyCell: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], pageIndex: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], showPagination: [{
+                type: Input
+            }], showPageSize: [{
+                type: Input
+            }], manualPagination: [{
+                type: Input
+            }], total: [{
+                type: Input
+            }], sortKey: [{
+                type: Input
+            }], sortDirection: [{
+                type: Input
+            }], manualSort: [{
+                type: Input
+            }], showToolbar: [{
+                type: Input
+            }], showFilters: [{
+                type: Input
+            }], showColumnVisibility: [{
+                type: Input
+            }], showGlobalSearch: [{
+                type: Input
+            }], manualFilter: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], rowKey: [{
+                type: Input
+            }], selectedKeys: [{
+                type: Input
+            }], bulkActions: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], pageSizeChange: [{
+                type: Output
+            }], sortChange: [{
+                type: Output
+            }], filterChange: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], bulkAction: [{
+                type: Output
+            }], cellTemplates: [{
+                type: ContentChildren,
+                args: [CxsDataTableCellDirective]
+            }] } });
+
+const OVERLAY_CLASSES = 'fixed inset-0 z-50 flex items-center justify-center bg-[rgba(15,23,42,0.45)] p-4';
+const PANEL_BASE_CLASSES = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+    'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] shadow-[var(--cxs-shadow-sm)] ' +
+    'p-6 outline-none';
+const PANEL_SIZE_CLASSES = {
+    sm: 'max-w-sm',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl'
+};
+const TITLE_CLASSES$1 = 'text-lg font-semibold';
+const DESCRIPTION_CLASSES = 'mt-1 text-sm text-[var(--cxs-color-on-surface-muted)]';
+const BODY_CLASSES = 'mt-4 text-sm text-[var(--cxs-color-on-surface)]';
+const ACTIONS_CLASSES$1 = 'mt-6 flex flex-wrap items-center justify-end gap-2 ' +
+    '[&>*]:flex [&>*]:flex-wrap [&>*]:items-center [&>*]:justify-end [&>*]:gap-2';
+const CLOSE_BUTTON_CLASSES$1 = 'inline-flex h-8 w-8 items-center justify-center rounded-[var(--cxs-radius-md)] ' +
+    'text-[var(--cxs-color-on-surface)] transition-colors hover:bg-[var(--cxs-color-surface-hover)] ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)]';
+class CxsDialogComponent {
+    hostClass;
+    static nextId = 0;
+    open = false;
+    title;
+    description;
+    ariaLabel = 'Dialog';
+    size = 'md';
+    dismissible = true;
+    closeOnBackdrop = true;
+    closeOnEscape = true;
+    openChange = new EventEmitter();
+    closed = new EventEmitter();
+    dialogPanel;
+    titleId = `cxs-dialog-title-${CxsDialogComponent.nextId++}`;
+    descriptionId = `cxs-dialog-description-${CxsDialogComponent.nextId++}`;
+    constructor(hostClass) {
+        this.hostClass = hostClass;
+    }
+    ngOnChanges(changes) {
+        if (changes['open']?.currentValue) {
+            this.focusPanelSoon();
+        }
+    }
+    ngAfterViewInit() {
+        if (this.open) {
+            this.focusPanelSoon();
+        }
+    }
+    get overlayClass() {
+        return OVERLAY_CLASSES;
+    }
+    get panelClass() {
+        return [PANEL_BASE_CLASSES, PANEL_SIZE_CLASSES[this.size], this.hostClass]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get titleClass() {
+        return TITLE_CLASSES$1;
+    }
+    get descriptionClass() {
+        return DESCRIPTION_CLASSES;
+    }
+    get bodyClass() {
+        return BODY_CLASSES;
+    }
+    get actionsClass() {
+        return ACTIONS_CLASSES$1;
+    }
+    get closeButtonClass() {
+        return CLOSE_BUTTON_CLASSES$1;
+    }
+    get ariaLabelValue() {
+        if (this.title) {
+            return null;
+        }
+        return this.ariaLabel;
+    }
+    requestClose(reason) {
+        this.openChange.emit(false);
+        this.closed.emit(reason);
+    }
+    onBackdropClick(event) {
+        if (!this.closeOnBackdrop || !this.open) {
+            return;
+        }
+        if (event.target === event.currentTarget) {
+            this.requestClose('backdrop');
+        }
+    }
+    onKeydown(event) {
+        if (!this.closeOnEscape || !this.open) {
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.requestClose('escape');
+        }
+    }
+    focusPanelSoon() {
+        queueMicrotask(() => {
+            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            X\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", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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            X\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" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['class']
+                }] }], propDecorators: { open: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], dismissible: [{
+                type: Input
+            }], closeOnBackdrop: [{
+                type: Input
+            }], closeOnEscape: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }], dialogPanel: [{
+                type: ViewChild,
+                args: ['dialogPanel']
+            }] } });
+
+const BASE_CLASSES$3 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+    'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
+    'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)] focus-visible:border-[var(--cxs-color-focus)] ' +
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60';
+const VARIANT_CLASSES$3 = {
+    outline: 'bg-[var(--cxs-color-surface)]',
+    filled: 'bg-[var(--cxs-color-surface-hover)]'
+};
+const SIZE_CLASSES$2 = {
+    sm: 'h-8 px-3 text-sm',
+    md: 'h-10 px-3 text-sm',
+    lg: 'h-12 px-4 text-base'
+};
+const INVALID_CLASSES$3 = 'border-[var(--cxs-color-danger)] focus-visible:border-[var(--cxs-color-danger)] ' +
+    'focus-visible:outline-[var(--cxs-color-danger)]';
+const POPOVER_CLASSES = 'absolute left-0 top-full z-10 mt-2 w-full rounded-[var(--cxs-radius-md)] border ' +
+    'border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] p-3 shadow-[var(--cxs-shadow-sm)]';
+const NAV_BUTTON_CLASSES = 'inline-flex h-8 w-8 items-center justify-center rounded-[var(--cxs-radius-md)] ' +
+    'text-[var(--cxs-color-on-surface)] transition-colors hover:bg-[var(--cxs-color-surface-hover)] ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)]';
+const SELECT_CLASSES = 'h-8 rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+    'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] text-xs px-2 ' +
+    'transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)]';
+const DAY_BUTTON_BASE = 'flex h-8 w-8 items-center justify-center rounded-[var(--cxs-radius-md)] text-xs ' +
+    'transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)] disabled:cursor-not-allowed disabled:opacity-40';
+const DAY_OUTSIDE_MONTH = 'text-[var(--cxs-color-on-surface-muted)]';
+const DAY_TODAY = 'border border-[var(--cxs-color-primary)]';
+const DAY_SELECTED = 'bg-[var(--cxs-color-primary)] text-[var(--cxs-color-on-primary)]';
+const DAY_HOVER = 'hover:bg-[var(--cxs-color-surface-hover)]';
+class CxsDatepickerComponent {
+    value = '';
+    variant = 'outline';
+    size = 'md';
+    useNative = true;
+    disabled = false;
+    readonly = false;
+    required = false;
+    invalid = false;
+    autofocus = false;
+    id;
+    name;
+    min;
+    max;
+    placeholder;
+    ariaLabel;
+    ariaDescribedby;
+    valueChange = new EventEmitter();
+    static nextId = 0;
+    fallbackId = `cxs-datepicker-panel-${CxsDatepickerComponent.nextId++}`;
+    disabledFromControl = false;
+    onChange = () => { };
+    onTouched = () => { };
+    isOpen = false;
+    displayMonth = new Date();
+    calendarDays = [];
+    weekDayLabels = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    monthOptions = Array.from({ length: 12 }, (_, index) => ({
+        value: index,
+        label: new Date(2020, index, 1).toLocaleString('en-US', { month: 'short' })
+    }));
+    get isDisabled() {
+        return this.disabled || this.disabledFromControl;
+    }
+    get panelId() {
+        return this.id ? `${this.id}-panel` : this.fallbackId;
+    }
+    get inputClass() {
+        return [
+            BASE_CLASSES$3,
+            SIZE_CLASSES$2[this.size],
+            VARIANT_CLASSES$3[this.variant],
+            this.invalid ? INVALID_CLASSES$3 : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get popoverClass() {
+        return POPOVER_CLASSES;
+    }
+    get navButtonClass() {
+        return NAV_BUTTON_CLASSES;
+    }
+    get selectClass() {
+        return SELECT_CLASSES;
+    }
+    get displayMonthLabel() {
+        return this.displayMonth.toLocaleString('en-US', { month: 'long', year: 'numeric' });
+    }
+    get yearOptions() {
+        const baseYear = this.displayMonth.getFullYear();
+        const minYear = this.parseDate(this.min)?.getFullYear() ?? baseYear - 10;
+        const maxYear = this.parseDate(this.max)?.getFullYear() ?? baseYear + 10;
+        const start = Math.min(minYear, maxYear);
+        const end = Math.max(minYear, maxYear);
+        return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+    }
+    writeValue(value) {
+        this.value = value ?? '';
+        this.syncDisplayMonthWithValue();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromControl = isDisabled;
+    }
+    onInput(event) {
+        const target = event.target;
+        const nextValue = target.value;
+        this.value = nextValue;
+        this.onChange(nextValue);
+        this.valueChange.emit(nextValue);
+    }
+    onDateSelect(day) {
+        if (day.disabled || this.isDisabled) {
+            return;
+        }
+        const nextValue = this.formatDate(day.date);
+        this.value = nextValue;
+        this.onChange(nextValue);
+        this.valueChange.emit(nextValue);
+        this.isOpen = false;
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    open() {
+        if (this.isDisabled || this.useNative) {
+            return;
+        }
+        this.isOpen = true;
+        this.syncDisplayMonthWithValue();
+    }
+    toggle() {
+        if (this.isOpen) {
+            this.isOpen = false;
+            return;
+        }
+        this.open();
+    }
+    prevMonth() {
+        this.displayMonth = new Date(this.displayMonth.getFullYear(), this.displayMonth.getMonth() - 1, 1);
+        this.updateCalendar();
+    }
+    nextMonth() {
+        this.displayMonth = new Date(this.displayMonth.getFullYear(), this.displayMonth.getMonth() + 1, 1);
+        this.updateCalendar();
+    }
+    onMonthChange(event) {
+        const target = event.target;
+        const nextMonth = Number(target.value);
+        if (Number.isNaN(nextMonth)) {
+            return;
+        }
+        this.displayMonth = new Date(this.displayMonth.getFullYear(), nextMonth, 1);
+        this.updateCalendar();
+    }
+    onYearChange(event) {
+        const target = event.target;
+        const nextYear = Number(target.value);
+        if (Number.isNaN(nextYear)) {
+            return;
+        }
+        this.displayMonth = new Date(nextYear, this.displayMonth.getMonth(), 1);
+        this.updateCalendar();
+    }
+    dayButtonClass(day) {
+        return [
+            DAY_BUTTON_BASE,
+            day.inMonth ? '' : DAY_OUTSIDE_MONTH,
+            day.isToday ? DAY_TODAY : '',
+            this.isSelected(day.date) ? DAY_SELECTED : DAY_HOVER
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    onDocumentClick(event) {
+        if (this.useNative || !this.isOpen) {
+            return;
+        }
+        const target = event.target;
+        if (target && !target.closest(`#${this.panelId}`) && !target.closest(`[data-cxs-datepicker="${this.panelId}"]`)) {
+            this.isOpen = false;
+        }
+    }
+    onEscape() {
+        if (this.useNative || !this.isOpen) {
+            return;
+        }
+        this.isOpen = false;
+    }
+    syncDisplayMonthWithValue() {
+        const selected = this.parseDate(this.value);
+        this.displayMonth = selected ?? new Date();
+        this.updateCalendar();
+    }
+    updateCalendar() {
+        const year = this.displayMonth.getFullYear();
         const month = this.displayMonth.getMonth();
         const startOfMonth = new Date(year, month, 1);
         const startDay = startOfMonth.getDay();
@@ -663,7 +1791,7 @@ class CxsDatepickerComponent {
                 useExisting: forwardRef(() => CxsDatepickerComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "@if (useNative) {\n  <input\n    type=\"date\"\n    [class]=\"inputClass\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-label]=\"ariaLabel\"\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]=\"id\"\n      [attr.name]=\"name\"\n      [attr.placeholder]=\"placeholder\"\n      [attr.aria-label]=\"ariaLabel\"\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            <\n          </button>\n          <div class=\"text-sm font-semibold text-[var(--cxs-color-on-surface)]\">\n            {{ displayMonthLabel }}\n          </div>\n          <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Next month\" (click)=\"nextMonth()\">\n            >\n          </button>\n        </div>\n\n        <div class=\"mt-3 grid grid-cols-7 gap-1 text-center text-xs text-[var(--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", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "@if (useNative) {\r\n  <input\r\n    type=\"date\"\r\n    [class]=\"inputClass\"\r\n    [attr.id]=\"id\"\r\n    [attr.name]=\"name\"\r\n    [attr.min]=\"min\"\r\n    [attr.max]=\"max\"\r\n    [attr.placeholder]=\"placeholder\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-describedby]=\"ariaDescribedby\"\r\n    [attr.autofocus]=\"autofocus ? true : null\"\r\n    [value]=\"value\"\r\n    [disabled]=\"isDisabled\"\r\n    [readonly]=\"readonly\"\r\n    [required]=\"required\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n  />\r\n} @else {\r\n  <div class=\"relative w-full\">\r\n    <input\r\n      type=\"text\"\r\n      [class]=\"inputClass\"\r\n      [attr.id]=\"id\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [attr.aria-label]=\"ariaLabel\"\r\n      [attr.aria-describedby]=\"ariaDescribedby\"\r\n      [attr.aria-expanded]=\"isOpen ? 'true' : 'false'\"\r\n      [attr.aria-controls]=\"panelId\"\r\n      [attr.autofocus]=\"autofocus ? true : null\"\r\n      [attr.data-cxs-datepicker]=\"panelId\"\r\n      [value]=\"value\"\r\n      [disabled]=\"isDisabled\"\r\n      [readonly]=\"true\"\r\n      [required]=\"required\"\r\n      (click)=\"open()\"\r\n      (focus)=\"open()\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    @if (isOpen) {\r\n      <div [class]=\"popoverClass\" [attr.id]=\"panelId\" role=\"dialog\" aria-label=\"Choose date\">\r\n        <div class=\"flex items-center justify-between\">\r\n          <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Previous month\" (click)=\"prevMonth()\">\r\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\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\" />\r\n            </svg>\r\n          </button>\r\n          <div class=\"flex items-center gap-2\">\r\n            <select\r\n              [class]=\"selectClass\"\r\n              [disabled]=\"isDisabled\"\r\n              [value]=\"displayMonth.getMonth()\"\r\n              aria-label=\"Month\"\r\n              (change)=\"onMonthChange($event)\"\r\n            >\r\n              @for (month of monthOptions; track month.value) {\r\n                <option [value]=\"month.value\">{{ month.label }}</option>\r\n              }\r\n            </select>\r\n            <select\r\n              [class]=\"selectClass\"\r\n              [disabled]=\"isDisabled\"\r\n              [value]=\"displayMonth.getFullYear()\"\r\n              aria-label=\"Year\"\r\n              (change)=\"onYearChange($event)\"\r\n            >\r\n              @for (year of yearOptions; track year) {\r\n                <option [value]=\"year\">{{ year }}</option>\r\n              }\r\n            </select>\r\n          </div>\r\n          <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Next month\" (click)=\"nextMonth()\">\r\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\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"mt-3 grid grid-cols-7 gap-1 text-center text-xs text-(--cxs-color-on-surface-muted)\">\r\n          @for (label of weekDayLabels; track label) {\r\n            <div>{{ label }}</div>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"mt-2 grid grid-cols-7 gap-1\" role=\"grid\">\r\n          @for (day of calendarDays; track day.key) {\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"dayButtonClass(day)\"\r\n              [disabled]=\"day.disabled\"\r\n              [attr.data-date]=\"day.key\"\r\n              [attr.aria-selected]=\"day.key === value ? 'true' : 'false'\"\r\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\r\n              (click)=\"onDateSelect(day)\"\r\n            >\r\n              {{ day.label }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDatepickerComponent, decorators: [{
             type: Component,
@@ -673,7 +1801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => CxsDatepickerComponent),
                             multi: true
                         }
-                    ], template: "@if (useNative) {\n  <input\n    type=\"date\"\n    [class]=\"inputClass\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-label]=\"ariaLabel\"\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]=\"id\"\n      [attr.name]=\"name\"\n      [attr.placeholder]=\"placeholder\"\n      [attr.aria-label]=\"ariaLabel\"\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            <\n          </button>\n          <div class=\"text-sm font-semibold text-[var(--cxs-color-on-surface)]\">\n            {{ displayMonthLabel }}\n          </div>\n          <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Next month\" (click)=\"nextMonth()\">\n            >\n          </button>\n        </div>\n\n        <div class=\"mt-3 grid grid-cols-7 gap-1 text-center text-xs text-[var(--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" }]
+                    ], template: "@if (useNative) {\r\n  <input\r\n    type=\"date\"\r\n    [class]=\"inputClass\"\r\n    [attr.id]=\"id\"\r\n    [attr.name]=\"name\"\r\n    [attr.min]=\"min\"\r\n    [attr.max]=\"max\"\r\n    [attr.placeholder]=\"placeholder\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-describedby]=\"ariaDescribedby\"\r\n    [attr.autofocus]=\"autofocus ? true : null\"\r\n    [value]=\"value\"\r\n    [disabled]=\"isDisabled\"\r\n    [readonly]=\"readonly\"\r\n    [required]=\"required\"\r\n    (input)=\"onInput($event)\"\r\n    (blur)=\"onBlur()\"\r\n  />\r\n} @else {\r\n  <div class=\"relative w-full\">\r\n    <input\r\n      type=\"text\"\r\n      [class]=\"inputClass\"\r\n      [attr.id]=\"id\"\r\n      [attr.name]=\"name\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [attr.aria-label]=\"ariaLabel\"\r\n      [attr.aria-describedby]=\"ariaDescribedby\"\r\n      [attr.aria-expanded]=\"isOpen ? 'true' : 'false'\"\r\n      [attr.aria-controls]=\"panelId\"\r\n      [attr.autofocus]=\"autofocus ? true : null\"\r\n      [attr.data-cxs-datepicker]=\"panelId\"\r\n      [value]=\"value\"\r\n      [disabled]=\"isDisabled\"\r\n      [readonly]=\"true\"\r\n      [required]=\"required\"\r\n      (click)=\"open()\"\r\n      (focus)=\"open()\"\r\n      (blur)=\"onBlur()\"\r\n    />\r\n    @if (isOpen) {\r\n      <div [class]=\"popoverClass\" [attr.id]=\"panelId\" role=\"dialog\" aria-label=\"Choose date\">\r\n        <div class=\"flex items-center justify-between\">\r\n          <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Previous month\" (click)=\"prevMonth()\">\r\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\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\" />\r\n            </svg>\r\n          </button>\r\n          <div class=\"flex items-center gap-2\">\r\n            <select\r\n              [class]=\"selectClass\"\r\n              [disabled]=\"isDisabled\"\r\n              [value]=\"displayMonth.getMonth()\"\r\n              aria-label=\"Month\"\r\n              (change)=\"onMonthChange($event)\"\r\n            >\r\n              @for (month of monthOptions; track month.value) {\r\n                <option [value]=\"month.value\">{{ month.label }}</option>\r\n              }\r\n            </select>\r\n            <select\r\n              [class]=\"selectClass\"\r\n              [disabled]=\"isDisabled\"\r\n              [value]=\"displayMonth.getFullYear()\"\r\n              aria-label=\"Year\"\r\n              (change)=\"onYearChange($event)\"\r\n            >\r\n              @for (year of yearOptions; track year) {\r\n                <option [value]=\"year\">{{ year }}</option>\r\n              }\r\n            </select>\r\n          </div>\r\n          <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Next month\" (click)=\"nextMonth()\">\r\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\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"mt-3 grid grid-cols-7 gap-1 text-center text-xs text-(--cxs-color-on-surface-muted)\">\r\n          @for (label of weekDayLabels; track label) {\r\n            <div>{{ label }}</div>\r\n          }\r\n        </div>\r\n\r\n        <div class=\"mt-2 grid grid-cols-7 gap-1\" role=\"grid\">\r\n          @for (day of calendarDays; track day.key) {\r\n            <button\r\n              type=\"button\"\r\n              [class]=\"dayButtonClass(day)\"\r\n              [disabled]=\"day.disabled\"\r\n              [attr.data-date]=\"day.key\"\r\n              [attr.aria-selected]=\"day.key === value ? 'true' : 'false'\"\r\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\r\n              (click)=\"onDateSelect(day)\"\r\n            >\r\n              {{ day.label }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }], variant: [{
@@ -716,13 +1844,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['document:keydown.escape']
             }] } });
 
-const BASE_CLASSES$1 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+const BASE_CLASSES$2 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
     'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
     'focus-visible:outline-[var(--cxs-color-focus)] focus-visible:border-[var(--cxs-color-focus)] ' +
     'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60';
-const VARIANT_CLASSES$1 = {
+const VARIANT_CLASSES$2 = {
     outline: 'bg-[var(--cxs-color-surface)]',
     filled: 'bg-[var(--cxs-color-surface-hover)]'
 };
@@ -760,9 +1888,9 @@ class CxsInputComponent {
     }
     get inputClass() {
         return [
-            BASE_CLASSES$1,
+            BASE_CLASSES$2,
             SIZE_CLASSES$1[this.size],
-            VARIANT_CLASSES$1[this.variant],
+            VARIANT_CLASSES$2[this.variant],
             this.invalid ? INVALID_CLASSES$2 : ''
         ]
             .filter(Boolean)
@@ -787,63 +1915,204 @@ class CxsInputComponent {
         this.onChange(nextValue);
         this.valueChange.emit(nextValue);
     }
-    onBlur() {
-        this.onTouched();
+    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: "14.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", 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: "<input\r\n  [class]=\"inputClass\"\r\n  [attr.id]=\"id\"\r\n  [attr.name]=\"name\"\r\n  [attr.type]=\"type\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  [attr.autocomplete]=\"autocomplete\"\r\n  [attr.inputmode]=\"inputmode\"\r\n  [attr.spellcheck]=\"spellcheck === null ? null : spellcheck\"\r\n  [attr.aria-label]=\"ariaLabel\"\r\n  [attr.aria-describedby]=\"ariaDescribedby\"\r\n  [attr.aria-invalid]=\"invalid ? 'true' : null\"\r\n  [attr.autofocus]=\"autofocus ? true : null\"\r\n  [disabled]=\"isDisabled\"\r\n  [readonly]=\"readonly\"\r\n  [required]=\"required\"\r\n  [value]=\"value\"\r\n  (input)=\"onInput($event)\"\r\n  (blur)=\"onBlur()\"\r\n/>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CxsInputComponent),
+                            multi: true
+                        }
+                    ], template: "<input\r\n  [class]=\"inputClass\"\r\n  [attr.id]=\"id\"\r\n  [attr.name]=\"name\"\r\n  [attr.type]=\"type\"\r\n  [attr.placeholder]=\"placeholder\"\r\n  [attr.autocomplete]=\"autocomplete\"\r\n  [attr.inputmode]=\"inputmode\"\r\n  [attr.spellcheck]=\"spellcheck === null ? null : spellcheck\"\r\n  [attr.aria-label]=\"ariaLabel\"\r\n  [attr.aria-describedby]=\"ariaDescribedby\"\r\n  [attr.aria-invalid]=\"invalid ? 'true' : null\"\r\n  [attr.autofocus]=\"autofocus ? true : null\"\r\n  [disabled]=\"isDisabled\"\r\n  [readonly]=\"readonly\"\r\n  [required]=\"required\"\r\n  [value]=\"value\"\r\n  (input)=\"onInput($event)\"\r\n  (blur)=\"onBlur()\"\r\n/>\r\n" }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], inputmode: [{
+                type: Input
+            }], spellcheck: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaDescribedby: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+const BAR_BASE_CLASSES = 'm-0 flex list-none flex-wrap items-center gap-1 rounded-[var(--cxs-radius-md)] border border-transparent p-1';
+const BAR_SIZE_CLASSES = {
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base'
+};
+const BAR_VARIANT_CLASSES = {
+    default: 'bg-transparent',
+    surface: 'bg-[var(--cxs-color-surface)] border-[var(--cxs-color-border)] shadow-[var(--cxs-shadow-sm)]'
+};
+const ITEM_BASE_CLASSES = 'inline-flex items-center gap-2 rounded-[var(--cxs-radius-md)] px-3 py-1.5 font-medium ' +
+    'transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)]';
+const ITEM_SIZE_CLASSES = {
+    sm: 'px-2.5 py-1 text-xs',
+    md: 'px-3 py-1.5 text-sm',
+    lg: 'px-4 py-2 text-base'
+};
+const ITEM_ACTIVE_CLASSES = 'bg-[var(--cxs-color-primary-ghost)] text-[var(--cxs-color-primary)]';
+const ITEM_INACTIVE_CLASSES = 'text-[var(--cxs-color-on-surface)] hover:bg-[var(--cxs-color-surface-hover)]';
+const ITEM_DISABLED_CLASSES = 'text-[var(--cxs-color-on-surface-muted)] opacity-60 pointer-events-none';
+class CxsMenubarComponent {
+    hostClass;
+    items = [];
+    ariaLabel = 'Menubar';
+    size = 'md';
+    variant = 'default';
+    disabled = false;
+    itemSelected = new EventEmitter();
+    menuItems;
+    constructor(hostClass) {
+        this.hostClass = hostClass;
+    }
+    get menubarClass() {
+        return [
+            BAR_BASE_CLASSES,
+            BAR_SIZE_CLASSES[this.size],
+            BAR_VARIANT_CLASSES[this.variant],
+            this.hostClass
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    isItemDisabled(item) {
+        return this.disabled || !!item.disabled;
+    }
+    getItemClass(item) {
+        return [
+            ITEM_BASE_CLASSES,
+            ITEM_SIZE_CLASSES[this.size],
+            item.active ? ITEM_ACTIVE_CLASSES : ITEM_INACTIVE_CLASSES,
+            this.isItemDisabled(item) ? ITEM_DISABLED_CLASSES : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    getItemHref(item) {
+        if (item.href && !this.isItemDisabled(item)) {
+            return item.href;
+        }
+        return null;
+    }
+    getItemRel(item) {
+        if (item.target === '_blank') {
+            return item.rel ?? 'noopener noreferrer';
+        }
+        return item.rel ?? null;
+    }
+    onItemClick(item, event) {
+        if (this.isItemDisabled(item)) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.itemSelected.emit(item);
+    }
+    onKeydown(event) {
+        if (this.disabled) {
+            return;
+        }
+        if (typeof document === 'undefined') {
+            return;
+        }
+        const keys = ['ArrowRight', 'ArrowLeft', 'Home', 'End'];
+        if (!keys.includes(event.key)) {
+            return;
+        }
+        const items = this.getFocusableItems();
+        if (!items.length) {
+            return;
+        }
+        const currentIndex = items.findIndex((item) => item === document.activeElement);
+        let nextIndex = 0;
+        switch (event.key) {
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = items.length - 1;
+                break;
+            case 'ArrowRight':
+                nextIndex = currentIndex >= 0 ? (currentIndex + 1) % items.length : 0;
+                break;
+            case 'ArrowLeft':
+                nextIndex = currentIndex >= 0 ? (currentIndex - 1 + items.length) % items.length : items.length - 1;
+                break;
+        }
+        items[nextIndex]?.focus();
+        event.preventDefault();
+    }
+    getFocusableItems() {
+        return (this.menuItems?.toArray() ?? [])
+            .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: CxsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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", 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: "<input\n  [class]=\"inputClass\"\n  [attr.id]=\"id\"\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]=\"ariaLabel\"\n  [attr.aria-describedby]=\"ariaDescribedby\"\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/>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsMenubarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cxs-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => CxsInputComponent),
-                            multi: true
-                        }
-                    ], template: "<input\n  [class]=\"inputClass\"\n  [attr.id]=\"id\"\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]=\"ariaLabel\"\n  [attr.aria-describedby]=\"ariaDescribedby\"\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/>\r\n" }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], type: [{
+            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: [{
+                    type: Attribute,
+                    args: ['class']
+                }] }], propDecorators: { items: [{
                 type: Input
-            }], variant: [{
+            }], ariaLabel: [{
                 type: Input
             }], size: [{
                 type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], autofocus: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }], inputmode: [{
-                type: Input
-            }], spellcheck: [{
-                type: Input
-            }], ariaLabel: [{
+            }], variant: [{
                 type: Input
-            }], ariaDescribedby: [{
+            }], disabled: [{
                 type: Input
-            }], valueChange: [{
+            }], itemSelected: [{
                 type: Output
+            }], menuItems: [{
+                type: ViewChildren,
+                args: ['menuItem', { read: ElementRef }]
             }] } });
 
 const WRAPPER_BASE = 'inline-flex items-center gap-2 select-none';
@@ -958,7 +2227,7 @@ class CxsRadioComponent {
                 useExisting: forwardRef(() => CxsRadioComponent),
                 multi: true
             }
-        ], 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 });
+        ], ngImport: i0, template: "<label [class]=\"wrapperClass\">\r\n  <input\r\n    class=\"peer sr-only\"\r\n    type=\"radio\"\r\n    [attr.id]=\"id\"\r\n    [attr.name]=\"name\"\r\n    [attr.value]=\"value\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-describedby]=\"ariaDescribedby\"\r\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\r\n    [attr.autofocus]=\"autofocus ? true : null\"\r\n    [checked]=\"isChecked\"\r\n    [disabled]=\"isDisabled\"\r\n    [required]=\"required\"\r\n    (change)=\"onRadioChange($event)\"\r\n    (blur)=\"onBlur()\"\r\n  />\r\n  <span [class]=\"controlClass\" aria-hidden=\"true\"></span>\r\n  <span [class]=\"labelClass\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</label>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsRadioComponent, decorators: [{
             type: Component,
@@ -968,7 +2237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => CxsRadioComponent),
                             multi: true
                         }
-                    ], 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" }]
+                    ], template: "<label [class]=\"wrapperClass\">\r\n  <input\r\n    class=\"peer sr-only\"\r\n    type=\"radio\"\r\n    [attr.id]=\"id\"\r\n    [attr.name]=\"name\"\r\n    [attr.value]=\"value\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-describedby]=\"ariaDescribedby\"\r\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\r\n    [attr.autofocus]=\"autofocus ? true : null\"\r\n    [checked]=\"isChecked\"\r\n    [disabled]=\"isDisabled\"\r\n    [required]=\"required\"\r\n    (change)=\"onRadioChange($event)\"\r\n    (blur)=\"onBlur()\"\r\n  />\r\n  <span [class]=\"controlClass\" aria-hidden=\"true\"></span>\r\n  <span [class]=\"labelClass\">\r\n    <ng-content></ng-content>\r\n  </span>\r\n</label>\r\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }], name: [{
@@ -995,13 +2264,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
-const BASE_CLASSES = 'w-full appearance-none rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+const BASE_CLASSES$1 = 'w-full appearance-none rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
     'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
     'focus-visible:outline-[var(--cxs-color-focus)] focus-visible:border-[var(--cxs-color-focus)] ' +
     'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60';
-const VARIANT_CLASSES = {
+const VARIANT_CLASSES$1 = {
     outline: 'bg-[var(--cxs-color-surface)]',
     filled: 'bg-[var(--cxs-color-surface-hover)]'
 };
@@ -1034,9 +2303,9 @@ class CxsSelectComponent {
     }
     get selectClass() {
         return [
-            BASE_CLASSES,
+            BASE_CLASSES$1,
             SIZE_CLASSES[this.size],
-            VARIANT_CLASSES[this.variant],
+            VARIANT_CLASSES$1[this.variant],
             this.invalid ? INVALID_CLASSES : ''
         ]
             .filter(Boolean)
@@ -1077,7 +2346,7 @@ class CxsSelectComponent {
                 useExisting: forwardRef(() => CxsSelectComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"relative\">\n  <select\n    [class]=\"selectClass\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"ariaLabel\"\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>\r\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"relative\">\r\n  <select\r\n    [class]=\"selectClass\"\r\n    [attr.id]=\"id\"\r\n    [attr.name]=\"name\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-describedby]=\"ariaDescribedby\"\r\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\r\n    [disabled]=\"isDisabled\"\r\n    [required]=\"required\"\r\n    [value]=\"selectValue\"\r\n    (change)=\"onSelectChange($event)\"\r\n    (blur)=\"onBlur()\"\r\n  >\r\n    <option *ngIf=\"placeholder\" [value]=\"placeholderValue\" disabled>\r\n      {{ placeholder }}\r\n    </option>\r\n    <ng-content></ng-content>\r\n  </select>\r\n  <span\r\n    class=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--cxs-color-on-surface-muted)]\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"h-4 w-4\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\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\"\r\n        clip-rule=\"evenodd\"\r\n      />\r\n    </svg>\r\n  </span>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsSelectComponent, decorators: [{
             type: Component,
@@ -1087,7 +2356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => CxsSelectComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"relative\">\n  <select\n    [class]=\"selectClass\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"ariaLabel\"\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>\r\n" }]
+                    ], template: "<div class=\"relative\">\r\n  <select\r\n    [class]=\"selectClass\"\r\n    [attr.id]=\"id\"\r\n    [attr.name]=\"name\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-describedby]=\"ariaDescribedby\"\r\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\r\n    [disabled]=\"isDisabled\"\r\n    [required]=\"required\"\r\n    [value]=\"selectValue\"\r\n    (change)=\"onSelectChange($event)\"\r\n    (blur)=\"onBlur()\"\r\n  >\r\n    <option *ngIf=\"placeholder\" [value]=\"placeholderValue\" disabled>\r\n      {{ placeholder }}\r\n    </option>\r\n    <ng-content></ng-content>\r\n  </select>\r\n  <span\r\n    class=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--cxs-color-on-surface-muted)]\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"h-4 w-4\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\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\"\r\n        clip-rule=\"evenodd\"\r\n      />\r\n    </svg>\r\n  </span>\r\n</div>\r\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }], variant: [{
@@ -1116,6 +2385,446 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+const WRAPPER_BASE_CLASSES = 'w-full overflow-hidden';
+const WRAPPER_BORDERED_CLASSES = 'rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)]';
+const TABLE_BASE_CLASSES = 'w-full border-collapse text-sm text-[var(--cxs-color-on-surface)]';
+const TABLE_COMPACT_CLASSES = 'text-xs';
+const HEADER_ROW_CLASSES = 'border-b border-[var(--cxs-color-border)] text-xs uppercase tracking-[0.2em] ' +
+    'text-[var(--cxs-color-on-surface-muted)]';
+const HEADER_CELL_BASE_CLASSES = 'px-3 py-2 text-left font-semibold';
+const BODY_ROW_BASE_CLASSES = 'border-b border-[var(--cxs-color-border)] last:border-b-0';
+const BODY_ROW_STRIPED_CLASSES = 'odd:bg-[var(--cxs-color-surface)] even:bg-[var(--cxs-color-surface-hover)]';
+const BODY_CELL_BASE_CLASSES = 'px-3 py-2 align-top';
+const BODY_CELL_COMPACT_CLASSES = 'px-2 py-1.5';
+const ALIGN_CLASSES = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right'
+};
+const EMPTY_ROW_CLASSES = 'text-sm text-[var(--cxs-color-on-surface-muted)]';
+class CxsTableComponent {
+    hostClass;
+    columns = [];
+    data = [];
+    caption;
+    ariaLabel = 'Table';
+    striped = false;
+    bordered = false;
+    compact = false;
+    emptyMessage = 'No data available';
+    emptyCell = '—';
+    constructor(hostClass) {
+        this.hostClass = hostClass;
+    }
+    get wrapperClass() {
+        return [
+            WRAPPER_BASE_CLASSES,
+            this.bordered ? WRAPPER_BORDERED_CLASSES : '',
+            this.hostClass
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get tableClass() {
+        return [TABLE_BASE_CLASSES, this.compact ? TABLE_COMPACT_CLASSES : '']
+            .filter(Boolean)
+            .join(' ');
+    }
+    get headerRowClass() {
+        return HEADER_ROW_CLASSES;
+    }
+    get bodyRowClass() {
+        return [
+            BODY_ROW_BASE_CLASSES,
+            this.striped ? BODY_ROW_STRIPED_CLASSES : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get emptyRowClass() {
+        return EMPTY_ROW_CLASSES;
+    }
+    get colSpan() {
+        return Math.max(this.columns.length, 1);
+    }
+    headerCellClass(column) {
+        return [
+            HEADER_CELL_BASE_CLASSES,
+            ALIGN_CLASSES[column.align ?? 'left'],
+            column.headerClass ?? ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    bodyCellClass(column) {
+        return [
+            BODY_CELL_BASE_CLASSES,
+            this.compact ? BODY_CELL_COMPACT_CLASSES : '',
+            ALIGN_CLASSES[column.align ?? 'left'],
+            column.cellClass ?? ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    cellValue(row, column) {
+        const value = row[column.key];
+        if (value === null || value === undefined || value === '') {
+            return this.emptyCell;
+        }
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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: [{
+                    type: Attribute,
+                    args: ['class']
+                }] }], propDecorators: { columns: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], caption: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], striped: [{
+                type: Input
+            }], bordered: [{
+                type: Input
+            }], compact: [{
+                type: Input
+            }], emptyMessage: [{
+                type: Input
+            }], emptyCell: [{
+                type: Input
+            }] } });
+
+const WRAPPER_CLASSES$1 = 'inline-flex items-center gap-2';
+const LABEL_BASE_CLASSES = 'text-sm text-[var(--cxs-color-on-surface)] select-none';
+const LABEL_DISABLED_CLASSES = 'text-[var(--cxs-color-on-surface-muted)]';
+const TRACK_BASE_CLASSES = 'relative inline-flex items-center rounded-full border transition-colors ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)] disabled:pointer-events-none disabled:opacity-60';
+const TRACK_SIZE_CLASSES = {
+    sm: 'h-5 w-9 p-0.5',
+    md: 'h-6 w-11 p-0.5',
+    lg: 'h-8 w-14 p-0.5'
+};
+const TRACK_STATE_CLASSES = {
+    on: 'bg-[var(--cxs-color-primary)] border-[var(--cxs-color-primary)]',
+    off: 'bg-[var(--cxs-color-surface)] border-[var(--cxs-color-border)]'
+};
+const THUMB_BASE_CLASSES = 'absolute left-0.5 top-0.5 rounded-full transition-transform duration-200 ease-out';
+const THUMB_SIZE_CLASSES = {
+    sm: 'h-4 w-4',
+    md: 'h-5 w-5',
+    lg: 'h-7 w-7'
+};
+const THUMB_STATE_CLASSES = {
+    on: {
+        sm: 'translate-x-[18px] bg-[var(--cxs-color-on-primary)]',
+        md: 'translate-x-[22px] bg-[var(--cxs-color-on-primary)]',
+        lg: 'translate-x-[26px] bg-[var(--cxs-color-on-primary)]'
+    },
+    off: 'translate-x-0 bg-[var(--cxs-color-surface)]'
+};
+class CxsToggleComponent {
+    static nextId = 0;
+    checked = false;
+    disabled = false;
+    size = 'md';
+    label;
+    ariaLabel = 'Toggle';
+    checkedChange = new EventEmitter();
+    labelId = `cxs-toggle-label-${CxsToggleComponent.nextId++}`;
+    get wrapperClass() {
+        return WRAPPER_CLASSES$1;
+    }
+    get labelClass() {
+        return [LABEL_BASE_CLASSES, this.disabled ? LABEL_DISABLED_CLASSES : '']
+            .filter(Boolean)
+            .join(' ');
+    }
+    get trackClass() {
+        return [
+            TRACK_BASE_CLASSES,
+            TRACK_SIZE_CLASSES[this.size],
+            this.checked ? TRACK_STATE_CLASSES.on : TRACK_STATE_CLASSES.off
+        ].join(' ');
+    }
+    get thumbClass() {
+        const thumbState = this.checked
+            ? THUMB_STATE_CLASSES.on[this.size]
+            : THUMB_STATE_CLASSES.off;
+        return [THUMB_BASE_CLASSES, THUMB_SIZE_CLASSES[this.size], thumbState].join(' ');
+    }
+    get ariaLabelValue() {
+        if (this.label) {
+            return null;
+        }
+        return this.ariaLabel;
+    }
+    toggle() {
+        if (this.disabled) {
+            return;
+        }
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], checkedChange: [{
+                type: Output
+            }] } });
+
+const HOST_BASE_CLASSES = 'pointer-events-none';
+const POSITION_CLASSES = {
+    'bottom-right': 'fixed bottom-6 right-6 items-end',
+    bottom: 'fixed bottom-6 left-1/2 -translate-x-1/2 items-end',
+    'bottom-left': 'fixed bottom-6 left-6 items-start',
+    'top-right': 'fixed top-6 right-6 items-end',
+    top: 'fixed top-6 left-1/2 -translate-x-1/2 items-start',
+    'top-left': 'fixed top-6 left-6 items-start',
+    right: 'fixed right-6 top-1/2 -translate-y-1/2 items-end',
+    left: 'fixed left-6 top-1/2 -translate-y-1/2 items-start',
+    center: 'fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 items-center'
+};
+const BASE_CLASSES = 'pointer-events-auto flex w-full items-start gap-3 rounded-[var(--cxs-radius-md)] ' +
+    'border px-4 py-3 shadow-[var(--cxs-shadow-sm)]';
+const WIDTH_CLASSES = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    none: 'max-w-none'
+};
+const VARIANT_CLASSES = {
+    info: 'border-[var(--cxs-color-primary)] bg-[var(--cxs-color-primary-ghost)] ' +
+        'text-[var(--cxs-color-on-surface)]',
+    neutral: 'border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] ' +
+        'text-[var(--cxs-color-on-surface)]',
+    danger: 'border-[var(--cxs-color-danger)] bg-[var(--cxs-color-surface)] ' +
+        'text-[var(--cxs-color-on-surface)]'
+};
+const TITLE_CLASSES = 'text-sm font-semibold';
+const MESSAGE_CLASSES = 'mt-1 text-sm text-[var(--cxs-color-on-surface-muted)]';
+const ACTIONS_CLASSES = 'mt-3 flex flex-wrap items-center gap-2 empty:hidden';
+const CLOSE_BUTTON_CLASSES = 'inline-flex h-8 w-8 items-center justify-center rounded-[var(--cxs-radius-md)] ' +
+    'text-[var(--cxs-color-on-surface)] transition-colors hover:bg-[var(--cxs-color-surface-hover)] ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)]';
+class CxsToastComponent {
+    hostClass;
+    open = false;
+    title;
+    message;
+    ariaLabel = 'Notification';
+    variant = 'info';
+    dismissible = true;
+    duration = 0;
+    position = 'bottom-right';
+    maxWidth = 'sm';
+    openChange = new EventEmitter();
+    dismissed = new EventEmitter();
+    timeoutId = null;
+    constructor(hostClass) {
+        this.hostClass = hostClass;
+    }
+    ngOnChanges(changes) {
+        if (changes['open'] || changes['duration']) {
+            this.resetTimer();
+        }
+    }
+    ngOnDestroy() {
+        this.clearTimer();
+    }
+    get hostClassName() {
+        return [HOST_BASE_CLASSES, POSITION_CLASSES[this.position]].join(' ');
+    }
+    get toastClass() {
+        return [
+            BASE_CLASSES,
+            WIDTH_CLASSES[this.maxWidth],
+            VARIANT_CLASSES[this.variant],
+            this.hostClass
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get titleClass() {
+        return TITLE_CLASSES;
+    }
+    get messageClass() {
+        return MESSAGE_CLASSES;
+    }
+    get actionsClass() {
+        return ACTIONS_CLASSES;
+    }
+    get closeButtonClass() {
+        return CLOSE_BUTTON_CLASSES;
+    }
+    get role() {
+        return this.variant === 'danger' ? 'alert' : 'status';
+    }
+    get ariaLive() {
+        return this.variant === 'danger' ? 'assertive' : 'polite';
+    }
+    get ariaLabelValue() {
+        if (this.title) {
+            return null;
+        }
+        return this.ariaLabel;
+    }
+    requestClose(reason) {
+        this.openChange.emit(false);
+        this.dismissed.emit(reason);
+    }
+    resetTimer() {
+        this.clearTimer();
+        if (this.open && this.duration > 0) {
+            this.timeoutId = setTimeout(() => {
+                this.requestClose('timeout');
+            }, this.duration);
+        }
+    }
+    clearTimer() {
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsToastComponent, deps: [{ token: 'class', attribute: true }], 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" }, usesOnChanges: true, ngImport: i0, template: "@if (open) {\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          X\n        </button>\n      }\n    </div>\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-toast', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\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          X\n        </button>\n      }\n    </div>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['class']
+                }] }], propDecorators: { open: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], dismissible: [{
+                type: Input
+            }], duration: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], dismissed: [{
+                type: Output
+            }] } });
+
+const WRAPPER_CLASSES = 'relative inline-flex';
+const TOOLTIP_BASE_CLASSES = 'pointer-events-none absolute z-50 max-w-xs rounded-[var(--cxs-radius-md)] px-2 py-1 text-xs ' +
+    'text-[var(--cxs-color-on-primary)] bg-[var(--cxs-color-on-surface)] shadow-[var(--cxs-shadow-sm)]';
+const TOOLTIP_POSITION_CLASSES = {
+    top: 'bottom-full left-1/2 mb-2 -translate-x-1/2',
+    right: 'left-full top-1/2 ml-2 -translate-y-1/2',
+    bottom: 'top-full left-1/2 mt-2 -translate-x-1/2',
+    left: 'right-full top-1/2 mr-2 -translate-y-1/2'
+};
+class CxsTooltipComponent {
+    static nextId = 0;
+    text = '';
+    position = 'top';
+    disabled = false;
+    open = false;
+    tooltipId = `cxs-tooltip-${CxsTooltipComponent.nextId++}`;
+    get wrapperClass() {
+        return WRAPPER_CLASSES;
+    }
+    get tooltipClass() {
+        return [TOOLTIP_BASE_CLASSES, TOOLTIP_POSITION_CLASSES[this.position]].join(' ');
+    }
+    get describedBy() {
+        if (!this.text || this.disabled) {
+            return null;
+        }
+        return this.tooltipId;
+    }
+    show() {
+        if (this.disabled || !this.text) {
+            return;
+        }
+        this.open = true;
+    }
+    hide() {
+        this.open = false;
+    }
+    onMouseEnter() {
+        this.show();
+    }
+    onMouseLeave() {
+        this.hide();
+    }
+    onFocusIn() {
+        this.show();
+    }
+    onFocusOut() {
+        this.hide();
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin']
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
 const DEFAULT_DARK_CLASS = 'cxs-theme-dark';
 class CxsThemeDirective {
     host;
@@ -1223,5 +2932,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CerxosUi, CxsAlertComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCheckboxComponent, CxsDatepickerComponent, CxsInputComponent, CxsRadioComponent, CxsSelectComponent, CxsThemeDirective };
+export { CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsDataTableCellDirective, CxsDataTableComponent, CxsDatepickerComponent, CxsDialogComponent, CxsInputComponent, CxsMenubarComponent, CxsRadioComponent, CxsSelectComponent, CxsTableComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent };
 //# sourceMappingURL=cerxos-ui.mjs.map