cerxos-ui 0.0.5 → 0.0.6

package/fesm2022/cerxos-ui.mjs

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, Directive, ContentChildren, ViewChild, HostListener, ElementRef, ViewChildren } from '@angular/core';
+import { Component, EventEmitter, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, Directive, ContentChildren, ViewChild, HostListener, ElementRef, ViewChildren, ContentChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgTemplateOutlet, NgIf } from '@angular/common';
+import * as i1 from '@angular/common';
+import { NgTemplateOutlet, CommonModule, 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 });
@@ -22,7 +23,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 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$7 = {
+const VARIANT_CLASSES$8 = {
     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)] ' +
@@ -47,7 +48,7 @@ class CxsAlertComponent {
     closed = new EventEmitter();
     isVisible = true;
     get alertClass() {
-        return [BASE_CLASSES$a, VARIANT_CLASSES$7[this.variant]].join(' ');
+        return [BASE_CLASSES$a, VARIANT_CLASSES$8[this.variant]].join(' ');
     }
     get titleClass() {
         return [TITLE_BASE, TITLE_VARIANT[this.variant]].join(' ');
@@ -174,7 +175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 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$6 = {
+const VARIANT_CLASSES$7 = {
     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)] ' +
@@ -190,7 +191,7 @@ class CxsBadgeComponent {
     variant = 'primary';
     size = 'md';
     get badgeClass() {
-        return [BASE_CLASSES$8, VARIANT_CLASSES$6[this.variant], SIZE_CLASSES$7[this.size]].join(' ');
+        return [BASE_CLASSES$8, VARIANT_CLASSES$7[this.variant], SIZE_CLASSES$7[this.size]].join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsBadgeComponent, isStandalone: true, selector: "cxs-badge", inputs: { variant: "variant", size: "size" }, ngImport: i0, template: "<span [class]=\"badgeClass\">\r\n  <ng-content></ng-content>\r\n</span>\r\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -399,7 +400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 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$5 = {
+const VARIANT_CLASSES$6 = {
     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)] ' +
@@ -425,7 +426,7 @@ class CxsButtonComponent {
         return this.disabled || this.loading;
     }
     get buttonClass() {
-        return [BASE_CLASSES$5, SIZE_CLASSES$4[this.size], VARIANT_CLASSES$5[this.variant], this.hostClass]
+        return [BASE_CLASSES$5, SIZE_CLASSES$4[this.size], VARIANT_CLASSES$6[this.variant], this.hostClass]
             .filter(Boolean)
             .join(' ');
     }
@@ -452,7 +453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 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$4 = {
+const VARIANT_CLASSES$5 = {
     surface: 'bg-[var(--cxs-color-surface)]',
     muted: 'bg-[var(--cxs-color-surface-hover)]',
     outline: 'bg-transparent'
@@ -471,7 +472,7 @@ class CxsCardComponent {
     get cardClass() {
         return [
             BASE_CLASSES$4,
-            VARIANT_CLASSES$4[this.variant],
+            VARIANT_CLASSES$5[this.variant],
             SIZE_CLASSES$3[this.size],
             this.elevated ? 'shadow-[var(--cxs-shadow-sm)]' : ''
         ]
@@ -501,7 +502,7 @@ const WRAPPER_ENABLED$1 = 'cursor-pointer';
 const WRAPPER_DISABLED$1 = 'cursor-not-allowed opacity-60';
 const LABEL_BASE$1 = 'text-[var(--cxs-color-on-surface)]';
 const LABEL_DISABLED$1 = 'text-[var(--cxs-color-on-surface-muted)]';
-const LABEL_SIZE_CLASSES$1 = {
+const LABEL_SIZE_CLASSES$5 = {
     sm: 'text-sm',
     md: 'text-sm',
     lg: 'text-base'
@@ -517,7 +518,7 @@ const CONTROL_BASE$1 = "relative flex shrink-0 items-center justify-center round
     'peer-indeterminate:before:opacity-100 peer-indeterminate:after:opacity-0 ' +
     'peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 ' +
     'peer-focus-visible:outline-[var(--cxs-color-focus)]';
-const CONTROL_SIZE_CLASSES$1 = {
+const CONTROL_SIZE_CLASSES$2 = {
     sm: 'h-4 w-4',
     md: 'h-5 w-5',
     lg: 'h-6 w-6'
@@ -555,7 +556,7 @@ class CxsCheckboxComponent {
     get labelClass() {
         return [
             LABEL_BASE$1,
-            LABEL_SIZE_CLASSES$1[this.size],
+            LABEL_SIZE_CLASSES$5[this.size],
             this.isDisabled ? LABEL_DISABLED$1 : ''
         ]
             .filter(Boolean)
@@ -564,7 +565,7 @@ class CxsCheckboxComponent {
     get controlClass() {
         return [
             CONTROL_BASE$1,
-            CONTROL_SIZE_CLASSES$1[this.size],
+            CONTROL_SIZE_CLASSES$2[this.size],
             MARK_SIZE_CLASSES[this.size]
         ].join(' ');
     }
@@ -837,8 +838,15 @@ const TOOLBAR_INPUT_CLASSES = 'w-full rounded-[var(--cxs-radius-md)] border bord
     '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_INPUT_INLINE_CLASSES = 'w-full sm:w-64 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 TITLE_BAR_CLASSES = 'mb-3 flex flex-wrap items-start justify-between gap-3';
+const TITLE_TEXT_CLASSES = 'text-base font-semibold text-(--cxs-color-on-surface)';
+const SUBTITLE_TEXT_CLASSES = 'text-sm text-(--cxs-color-on-surface-muted)';
 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';
@@ -847,6 +855,8 @@ class CxsDataTableComponent {
     columns = [];
     data = [];
     caption;
+    title;
+    subtitle;
     ariaLabel = 'Data table';
     striped = false;
     bordered = false;
@@ -961,9 +971,21 @@ class CxsDataTableComponent {
     get toolbarInputClass() {
         return TOOLBAR_INPUT_CLASSES;
     }
+    get toolbarInputInlineClass() {
+        return TOOLBAR_INPUT_INLINE_CLASSES;
+    }
     get toolbarButtonClass() {
         return TOOLBAR_BUTTON_CLASSES;
     }
+    get titleBarClass() {
+        return TITLE_BAR_CLASSES;
+    }
+    get titleTextClass() {
+        return TITLE_TEXT_CLASSES;
+    }
+    get subtitleTextClass() {
+        return SUBTITLE_TEXT_CLASSES;
+    }
     get bulkBarClass() {
         return BULK_BAR_CLASSES;
     }
@@ -1000,6 +1022,9 @@ class CxsDataTableComponent {
     get selectedCount() {
         return this.selectedKeys.length;
     }
+    get hasTitleBlock() {
+        return Boolean(this.title || this.subtitle);
+    }
     get allVisibleSelected() {
         if (!this.displayRows.length) {
             return false;
@@ -1310,11 +1335,11 @@ class CxsDataTableComponent {
         return value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDataTableComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsDataTableComponent, isStandalone: true, selector: "cxs-data-table", inputs: { columns: "columns", data: "data", caption: "caption", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsDataTableComponent, isStandalone: true, selector: "cxs-data-table", inputs: { columns: "columns", data: "data", caption: "caption", title: "title", subtitle: "subtitle", ariaLabel: "ariaLabel", striped: "striped", bordered: "bordered", compact: "compact", loading: "loading", emptyMessage: "emptyMessage", emptyCell: "emptyCell", pageSize: "pageSize", pageIndex: "pageIndex", pageSizeOptions: "pageSizeOptions", showPagination: "showPagination", showPageSize: "showPageSize", manualPagination: "manualPagination", total: "total", sortKey: "sortKey", sortDirection: "sortDirection", manualSort: "manualSort", showToolbar: "showToolbar", showFilters: "showFilters", showColumnVisibility: "showColumnVisibility", showGlobalSearch: "showGlobalSearch", manualFilter: "manualFilter", selectable: "selectable", rowKey: "rowKey", selectedKeys: "selectedKeys", bulkActions: "bulkActions" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", filterChange: "filterChange", selectionChange: "selectionChange", bulkAction: "bulkAction" }, queries: [{ propertyName: "cellTemplates", predicate: CxsDataTableCellDirective }], usesOnChanges: true, ngImport: i0, template: "@if (hasTitleBlock) {\n  <div [class]=\"titleBarClass\">\n    <div class=\"min-w-0\">\n      @if (title) {\n        <div [class]=\"titleTextClass\">{{ title }}</div>\n      }\n      @if (subtitle) {\n        <div [class]=\"subtitleTextClass\">{{ subtitle }}</div>\n      }\n    </div>\n    @if (showToolbar) {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        @if (showGlobalSearch) {\n          <input\n            type=\"search\"\n            [class]=\"toolbarInputInlineClass\"\n            placeholder=\"Search\"\n            [value]=\"globalFilter\"\n            (input)=\"onGlobalFilterChange($any($event.target).value)\"\n          />\n        }\n        @if (showFilters) {\n          <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n            Filters\n          </button>\n        }\n        @if (showColumnVisibility) {\n          <details class=\"relative\">\n            <summary [class]=\"toolbarButtonClass\">Columns</summary>\n            <div\n              class=\"absolute right-0 mt-2 w-48 rounded-(--cxs-radius-md) border border-(--cxs-color-border) bg-(--cxs-color-surface) p-2 shadow-(--cxs-shadow-sm)\"\n            >\n              @for (column of columns; track column) {\n                <label class=\"flex items-center gap-2 px-2 py-1 text-sm\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"columnVisibility[column.key]\"\n                    (change)=\"toggleColumnVisibility(column.key)\"\n                  />\n                  <span>{{ column.label }}</span>\n                </label>\n              }\n            </div>\n          </details>\n        }\n      </div>\n    }\n  </div>\n} @else if (showToolbar) {\n  <div [class]=\"toolbarClass\">\n    <div [class]=\"toolbarGroupClass\">\n      @if (showGlobalSearch) {\n        <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 text-left\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"allVisibleSelected\"\n              [indeterminate]=\"someVisibleSelected\"\n              (change)=\"toggleSelectAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </th>\n        }\n        @for (column of visibleColumns; track column) {\n          <th\n            class=\"relative\"\n            [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n            [style.width]=\"columnWidth(column)\"\n            [style.minWidth]=\"columnMinWidth(column)\"\n            [style.left]=\"pinnedLeft(column)\"\n            [style.right]=\"pinnedRight(column)\"\n            scope=\"col\"\n            [attr.aria-sort]=\"ariaSort(column)\"\n          >\n            @if (column.sortable) {\n              <button\n                type=\"button\"\n                [class]=\"headerButtonClass()\"\n                (click)=\"onSort(column)\"\n              >\n                <span>{{ column.label }}</span>\n                @if (sortKey === column.key) {\n                  @if (sortDirection === 'asc') {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18\"\n                      />\n                    </svg>\n                  } @else {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3\"\n                      />\n                    </svg>\n                  }\n                }\n              </button>\n            } @else {\n              {{ column.label }}\n            }\n            @if (column.resizable !== false) {\n              <span\n                [class]=\"resizeHandleClass\"\n                (mousedown)=\"onResizeStart($event, column)\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n      @if (showFilters && filtersOpen) {\n        <tr [class]=\"headerRowClass\">\n          @if (selectable) {\n            <th class=\"px-3 py-2 text-left\"></th>\n          }\n          @for (column of visibleColumns; track column) {\n            <th\n              [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n              [style.left]=\"pinnedLeft(column)\"\n              [style.right]=\"pinnedRight(column)\"\n            >\n              @if (column.filterable) {\n                @if (column.filterType === 'select') {\n                  <select\n                    [class]=\"headerFilterInputClass()\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (change)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  >\n                    <option value=\"\">All</option>\n                    @for (option of column.filterOptions ?? []; track option) {\n                      <option [value]=\"option.value\">{{ option.label }}</option>\n                    }\n                  </select>\n                } @else {\n                  <input\n                    [class]=\"headerFilterInputClass()\"\n                    [attr.type]=\"column.filterType === 'number' ? 'number' : 'text'\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (input)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  />\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n    <tbody>\n      @if (loading) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">Loading...</span>\n          </td>\n        </tr>\n      } @else if (displayRows.length === 0) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">{{ emptyMessage }}</span>\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayRows; track row) {\n          <tr [class]=\"bodyRowClass\">\n            @if (selectable) {\n              <td class=\"px-3 py-2\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isSelected(row)\"\n                  (change)=\"toggleRowSelection(row)\"\n                  aria-label=\"Select row\"\n                />\n              </td>\n            }\n            @for (column of visibleColumns; track column) {\n              <td\n                [class]=\"bodyCellClass(column) + ' ' + pinnedClass(column)\"\n                [style.left]=\"pinnedLeft(column)\"\n                [style.right]=\"pinnedRight(column)\"\n              >\n                @if (cellTemplate(column.key); as template) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, value: row[column.key], column }\"\n                  ></ng-container>\n                } @else {\n                  {{ cellValue(row, column) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (showPagination) {\n  <div [class]=\"paginationClass\">\n    <div class=\"flex items-center gap-2\">\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage <= 1\"\n        (click)=\"previousPage()\"\n      >\n        Previous\n      </button>\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage >= totalPages\"\n        (click)=\"nextPage()\"\n      >\n        Next\n      </button>\n      <span class=\"text-(--cxs-color-on-surface-muted)\">{{ pageLabel }}</span>\n    </div>\n    @if (showPageSize) {\n      <label class=\"flex items-center gap-2 text-(--cxs-color-on-surface-muted)\">\n        <span>Rows</span>\n        <select\n          #pageSizeSelect\n          [class]=\"pageSelectClass\"\n          [value]=\"currentPageSize\"\n          (change)=\"onPageSizeChange(pageSizeSelect.value)\"\n        >\n          @for (size of pageSizeOptions; track size) {\n            <option [value]=\"size\">{{ size }}</option>\n          }\n        </select>\n      </label>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDataTableComponent, decorators: [{
             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" }]
+            args: [{ selector: 'cxs-data-table', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (hasTitleBlock) {\n  <div [class]=\"titleBarClass\">\n    <div class=\"min-w-0\">\n      @if (title) {\n        <div [class]=\"titleTextClass\">{{ title }}</div>\n      }\n      @if (subtitle) {\n        <div [class]=\"subtitleTextClass\">{{ subtitle }}</div>\n      }\n    </div>\n    @if (showToolbar) {\n      <div class=\"flex flex-wrap items-center gap-2\">\n        @if (showGlobalSearch) {\n          <input\n            type=\"search\"\n            [class]=\"toolbarInputInlineClass\"\n            placeholder=\"Search\"\n            [value]=\"globalFilter\"\n            (input)=\"onGlobalFilterChange($any($event.target).value)\"\n          />\n        }\n        @if (showFilters) {\n          <button type=\"button\" [class]=\"toolbarButtonClass\" (click)=\"filtersOpen = !filtersOpen\">\n            Filters\n          </button>\n        }\n        @if (showColumnVisibility) {\n          <details class=\"relative\">\n            <summary [class]=\"toolbarButtonClass\">Columns</summary>\n            <div\n              class=\"absolute right-0 mt-2 w-48 rounded-(--cxs-radius-md) border border-(--cxs-color-border) bg-(--cxs-color-surface) p-2 shadow-(--cxs-shadow-sm)\"\n            >\n              @for (column of columns; track column) {\n                <label class=\"flex items-center gap-2 px-2 py-1 text-sm\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"columnVisibility[column.key]\"\n                    (change)=\"toggleColumnVisibility(column.key)\"\n                  />\n                  <span>{{ column.label }}</span>\n                </label>\n              }\n            </div>\n          </details>\n        }\n      </div>\n    }\n  </div>\n} @else if (showToolbar) {\n  <div [class]=\"toolbarClass\">\n    <div [class]=\"toolbarGroupClass\">\n      @if (showGlobalSearch) {\n        <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 text-left\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"allVisibleSelected\"\n              [indeterminate]=\"someVisibleSelected\"\n              (change)=\"toggleSelectAll()\"\n              aria-label=\"Select all rows\"\n            />\n          </th>\n        }\n        @for (column of visibleColumns; track column) {\n          <th\n            class=\"relative\"\n            [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n            [style.width]=\"columnWidth(column)\"\n            [style.minWidth]=\"columnMinWidth(column)\"\n            [style.left]=\"pinnedLeft(column)\"\n            [style.right]=\"pinnedRight(column)\"\n            scope=\"col\"\n            [attr.aria-sort]=\"ariaSort(column)\"\n          >\n            @if (column.sortable) {\n              <button\n                type=\"button\"\n                [class]=\"headerButtonClass()\"\n                (click)=\"onSort(column)\"\n              >\n                <span>{{ column.label }}</span>\n                @if (sortKey === column.key) {\n                  @if (sortDirection === 'asc') {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18\"\n                      />\n                    </svg>\n                  } @else {\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke-width=\"1.5\"\n                      stroke=\"currentColor\"\n                      class=\"h-4 w-4 text-(--cxs-color-on-surface-muted)\"\n                      aria-hidden=\"true\"\n                    >\n                      <path\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                        d=\"M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3\"\n                      />\n                    </svg>\n                  }\n                }\n              </button>\n            } @else {\n              {{ column.label }}\n            }\n            @if (column.resizable !== false) {\n              <span\n                [class]=\"resizeHandleClass\"\n                (mousedown)=\"onResizeStart($event, column)\"\n              ></span>\n            }\n          </th>\n        }\n      </tr>\n      @if (showFilters && filtersOpen) {\n        <tr [class]=\"headerRowClass\">\n          @if (selectable) {\n            <th class=\"px-3 py-2 text-left\"></th>\n          }\n          @for (column of visibleColumns; track column) {\n            <th\n              [class]=\"headerCellClass(column) + ' ' + pinnedClass(column)\"\n              [style.left]=\"pinnedLeft(column)\"\n              [style.right]=\"pinnedRight(column)\"\n            >\n              @if (column.filterable) {\n                @if (column.filterType === 'select') {\n                  <select\n                    [class]=\"headerFilterInputClass()\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (change)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  >\n                    <option value=\"\">All</option>\n                    @for (option of column.filterOptions ?? []; track option) {\n                      <option [value]=\"option.value\">{{ option.label }}</option>\n                    }\n                  </select>\n                } @else {\n                  <input\n                    [class]=\"headerFilterInputClass()\"\n                    [attr.type]=\"column.filterType === 'number' ? 'number' : 'text'\"\n                    [value]=\"columnFilterValue(column.key)\"\n                    (input)=\"onColumnFilterChange(column.key, $any($event.target).value)\"\n                  />\n                }\n              }\n            </th>\n          }\n        </tr>\n      }\n    </thead>\n    <tbody>\n      @if (loading) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">Loading...</span>\n          </td>\n        </tr>\n      } @else if (displayRows.length === 0) {\n        <tr [class]=\"bodyRowClass\">\n          <td [class]=\"bodyCellClass({ key: '', label: '' })\" [attr.colspan]=\"colSpan\">\n            <span [class]=\"emptyRowClass\">{{ emptyMessage }}</span>\n          </td>\n        </tr>\n      } @else {\n        @for (row of displayRows; track row) {\n          <tr [class]=\"bodyRowClass\">\n            @if (selectable) {\n              <td class=\"px-3 py-2\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isSelected(row)\"\n                  (change)=\"toggleRowSelection(row)\"\n                  aria-label=\"Select row\"\n                />\n              </td>\n            }\n            @for (column of visibleColumns; track column) {\n              <td\n                [class]=\"bodyCellClass(column) + ' ' + pinnedClass(column)\"\n                [style.left]=\"pinnedLeft(column)\"\n                [style.right]=\"pinnedRight(column)\"\n              >\n                @if (cellTemplate(column.key); as template) {\n                  <ng-container\n                    [ngTemplateOutlet]=\"template\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, value: row[column.key], column }\"\n                  ></ng-container>\n                } @else {\n                  {{ cellValue(row, column) }}\n                }\n              </td>\n            }\n          </tr>\n        }\n      }\n    </tbody>\n  </table>\n</div>\n\n@if (showPagination) {\n  <div [class]=\"paginationClass\">\n    <div class=\"flex items-center gap-2\">\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage <= 1\"\n        (click)=\"previousPage()\"\n      >\n        Previous\n      </button>\n      <button\n        type=\"button\"\n        [class]=\"pageButtonClass\"\n        [disabled]=\"currentPage >= totalPages\"\n        (click)=\"nextPage()\"\n      >\n        Next\n      </button>\n      <span class=\"text-(--cxs-color-on-surface-muted)\">{{ pageLabel }}</span>\n    </div>\n    @if (showPageSize) {\n      <label class=\"flex items-center gap-2 text-(--cxs-color-on-surface-muted)\">\n        <span>Rows</span>\n        <select\n          #pageSizeSelect\n          [class]=\"pageSelectClass\"\n          [value]=\"currentPageSize\"\n          (change)=\"onPageSizeChange(pageSizeSelect.value)\"\n        >\n          @for (size of pageSizeOptions; track size) {\n            <option [value]=\"size\">{{ size }}</option>\n          }\n        </select>\n      </label>\n    }\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['class']
@@ -1324,6 +1349,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], caption: [{
                 type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
             }], ariaLabel: [{
                 type: Input
             }], striped: [{
@@ -1496,11 +1525,11 @@ class CxsDialogComponent {
         });
     }
     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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsDialogComponent, isStandalone: true, selector: "cxs-dialog", inputs: { open: "open", title: "title", description: "description", ariaLabel: "ariaLabel", size: "size", dismissible: "dismissible", closeOnBackdrop: "closeOnBackdrop", closeOnEscape: "closeOnEscape" }, outputs: { openChange: "openChange", closed: "closed" }, viewQueries: [{ propertyName: "dialogPanel", first: true, predicate: ["dialogPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (open) {\n  <div [class]=\"overlayClass\" (click)=\"onBackdropClick($event)\">\n    <div\n      #dialogPanel\n      [class]=\"panelClass\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"title ? titleId : null\"\n      [attr.aria-describedby]=\"description ? descriptionId : null\"\n      [attr.aria-label]=\"ariaLabelValue\"\n      tabindex=\"-1\"\n      (keydown)=\"onKeydown($event)\"\n    >\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-1\">\n          @if (title) {\n            <h2 [id]=\"titleId\" [class]=\"titleClass\">{{ title }}</h2>\n          }\n          @if (description) {\n            <p [id]=\"descriptionId\" [class]=\"descriptionClass\">{{ description }}</p>\n          }\n        </div>\n        @if (dismissible) {\n          <button\n            type=\"button\"\n            [class]=\"closeButtonClass\"\n            aria-label=\"Close dialog\"\n            (click)=\"requestClose('dismiss')\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        }\n      </div>\n\n      <div [class]=\"bodyClass\">\n        <ng-content></ng-content>\n      </div>\n\n      <div [class]=\"actionsClass\">\n        <ng-content select=\"[cxsDialogActions]\"></ng-content>\n      </div>\n    </div>\n  </div>\n}\n", 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" }]
+            args: [{ selector: 'cxs-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open) {\n  <div [class]=\"overlayClass\" (click)=\"onBackdropClick($event)\">\n    <div\n      #dialogPanel\n      [class]=\"panelClass\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"title ? titleId : null\"\n      [attr.aria-describedby]=\"description ? descriptionId : null\"\n      [attr.aria-label]=\"ariaLabelValue\"\n      tabindex=\"-1\"\n      (keydown)=\"onKeydown($event)\"\n    >\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-1\">\n          @if (title) {\n            <h2 [id]=\"titleId\" [class]=\"titleClass\">{{ title }}</h2>\n          }\n          @if (description) {\n            <p [id]=\"descriptionId\" [class]=\"descriptionClass\">{{ description }}</p>\n          }\n        </div>\n        @if (dismissible) {\n          <button\n            type=\"button\"\n            [class]=\"closeButtonClass\"\n            aria-label=\"Close dialog\"\n            (click)=\"requestClose('dismiss')\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        }\n      </div>\n\n      <div [class]=\"bodyClass\">\n        <ng-content></ng-content>\n      </div>\n\n      <div [class]=\"actionsClass\">\n        <ng-content select=\"[cxsDialogActions]\"></ng-content>\n      </div>\n    </div>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['class']
@@ -1535,7 +1564,10 @@ const BASE_CLASSES$3 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var
     '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 = {
+const WRAPPER_CLASSES$6 = 'flex w-full flex-col gap-1';
+const LABEL_BASE_CLASSES$4 = 'font-medium text-(--cxs-color-on-surface)';
+const LABEL_DISABLED_CLASSES$4 = 'text-[var(--cxs-color-on-surface-muted)]';
+const VARIANT_CLASSES$4 = {
     outline: 'bg-[var(--cxs-color-surface)]',
     filled: 'bg-[var(--cxs-color-surface-hover)]'
 };
@@ -1544,7 +1576,12 @@ const SIZE_CLASSES$2 = {
     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)] ' +
+const LABEL_SIZE_CLASSES$4 = {
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-base'
+};
+const INVALID_CLASSES$4 = '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)]';
@@ -1564,6 +1601,7 @@ 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 {
+    static nextId = 0;
     value = '';
     variant = 'outline';
     size = 'md';
@@ -1573,6 +1611,7 @@ class CxsDatepickerComponent {
     required = false;
     invalid = false;
     autofocus = false;
+    label;
     id;
     name;
     min;
@@ -1581,8 +1620,7 @@ class CxsDatepickerComponent {
     ariaLabel;
     ariaDescribedby;
     valueChange = new EventEmitter();
-    static nextId = 0;
-    fallbackId = `cxs-datepicker-panel-${CxsDatepickerComponent.nextId++}`;
+    instanceId = `cxs-datepicker-${CxsDatepickerComponent.nextId++}`;
     disabledFromControl = false;
     onChange = () => { };
     onTouched = () => { };
@@ -1598,18 +1636,48 @@ class CxsDatepickerComponent {
         return this.disabled || this.disabledFromControl;
     }
     get panelId() {
-        return this.id ? `${this.id}-panel` : this.fallbackId;
+        return `${this.inputId ?? this.instanceId}-panel`;
     }
     get inputClass() {
         return [
             BASE_CLASSES$3,
             SIZE_CLASSES$2[this.size],
-            VARIANT_CLASSES$3[this.variant],
-            this.invalid ? INVALID_CLASSES$3 : ''
+            VARIANT_CLASSES$4[this.variant],
+            this.invalid ? INVALID_CLASSES$4 : ''
         ]
             .filter(Boolean)
             .join(' ');
     }
+    get wrapperClass() {
+        return WRAPPER_CLASSES$6;
+    }
+    get labelClass() {
+        return [
+            LABEL_BASE_CLASSES$4,
+            LABEL_SIZE_CLASSES$4[this.size],
+            this.isDisabled ? LABEL_DISABLED_CLASSES$4 : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get inputId() {
+        if (this.id) {
+            return this.id;
+        }
+        return this.label ? this.instanceId : null;
+    }
+    get labelId() {
+        if (!this.label) {
+            return null;
+        }
+        return `${this.inputId}-label`;
+    }
+    get ariaLabelValue() {
+        if (this.label) {
+            return null;
+        }
+        return this.ariaLabel ?? null;
+    }
     get popoverClass() {
         return POPOVER_CLASSES;
     }
@@ -1785,13 +1853,13 @@ class CxsDatepickerComponent {
         return new Date(date.getFullYear(), date.getMonth(), date.getDate());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsDatepickerComponent, isStandalone: true, selector: "cxs-datepicker", inputs: { value: "value", variant: "variant", size: "size", useNative: "useNative", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", autofocus: "autofocus", id: "id", name: "name", min: "min", max: "max", placeholder: "placeholder", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsDatepickerComponent, isStandalone: true, selector: "cxs-datepicker", inputs: { value: "value", variant: "variant", size: "size", useNative: "useNative", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", autofocus: "autofocus", label: "label", id: "id", name: "name", min: "min", max: "max", placeholder: "placeholder", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CxsDatepickerComponent),
                 multi: true
             }
-        ], 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 });
+        ], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  @if (label) {\n    <label [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"inputId\">\n      {{ label }}\n    </label>\n  }\n  @if (useNative) {\n    <input\n      type=\"date\"\n      [class]=\"inputClass\"\n      [attr.id]=\"inputId\"\n      [attr.name]=\"name\"\n      [attr.min]=\"min\"\n      [attr.max]=\"max\"\n      [attr.placeholder]=\"placeholder\"\n      [attr.aria-label]=\"ariaLabelValue\"\n      [attr.aria-labelledby]=\"labelId\"\n      [attr.aria-describedby]=\"ariaDescribedby\"\n      [attr.autofocus]=\"autofocus ? true : null\"\n      [value]=\"value\"\n      [disabled]=\"isDisabled\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n  } @else {\n    <div class=\"relative w-full\">\n      <input\n        type=\"text\"\n        [class]=\"inputClass\"\n        [attr.id]=\"inputId\"\n        [attr.name]=\"name\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"ariaLabelValue\"\n        [attr.aria-labelledby]=\"labelId\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-expanded]=\"isOpen ? 'true' : 'false'\"\n        [attr.aria-controls]=\"panelId\"\n        [attr.autofocus]=\"autofocus ? true : null\"\n        [attr.data-cxs-datepicker]=\"panelId\"\n        [value]=\"value\"\n        [disabled]=\"isDisabled\"\n        [readonly]=\"true\"\n        [required]=\"required\"\n        (click)=\"open()\"\n        (focus)=\"open()\"\n        (blur)=\"onBlur()\"\n      />\n      @if (isOpen) {\n        <div [class]=\"popoverClass\" [attr.id]=\"panelId\" role=\"dialog\" aria-label=\"Choose date\">\n          <div class=\"flex items-center justify-between\">\n            <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Previous month\" (click)=\"prevMonth()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-3\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\" />\n              </svg>\n            </button>\n            <div class=\"flex items-center gap-2\">\n              <select\n                [class]=\"selectClass\"\n                [disabled]=\"isDisabled\"\n                [value]=\"displayMonth.getMonth()\"\n                aria-label=\"Month\"\n                (change)=\"onMonthChange($event)\"\n              >\n                @for (month of monthOptions; track month.value) {\n                  <option [value]=\"month.value\">{{ month.label }}</option>\n                }\n              </select>\n              <select\n                [class]=\"selectClass\"\n                [disabled]=\"isDisabled\"\n                [value]=\"displayMonth.getFullYear()\"\n                aria-label=\"Year\"\n                (change)=\"onYearChange($event)\"\n              >\n                @for (year of yearOptions; track year) {\n                  <option [value]=\"year\">{{ year }}</option>\n                }\n              </select>\n            </div>\n            <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Next month\" (click)=\"nextMonth()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-3\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" />\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"mt-3 grid grid-cols-7 gap-1 text-center text-xs text-(--cxs-color-on-surface-muted)\">\n            @for (label of weekDayLabels; track label) {\n              <div>{{ label }}</div>\n            }\n          </div>\n\n          <div class=\"mt-2 grid grid-cols-7 gap-1\" role=\"grid\">\n            @for (day of calendarDays; track day.key) {\n              <button\n                type=\"button\"\n                [class]=\"dayButtonClass(day)\"\n                [disabled]=\"day.disabled\"\n                [attr.data-date]=\"day.key\"\n                [attr.aria-selected]=\"day.key === value ? 'true' : 'false'\"\n                [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                (click)=\"onDateSelect(day)\"\n              >\n                {{ day.label }}\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDatepickerComponent, decorators: [{
             type: Component,
@@ -1801,7 +1869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => CxsDatepickerComponent),
                             multi: true
                         }
-                    ], 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" }]
+                    ], template: "<div [class]=\"wrapperClass\">\n  @if (label) {\n    <label [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"inputId\">\n      {{ label }}\n    </label>\n  }\n  @if (useNative) {\n    <input\n      type=\"date\"\n      [class]=\"inputClass\"\n      [attr.id]=\"inputId\"\n      [attr.name]=\"name\"\n      [attr.min]=\"min\"\n      [attr.max]=\"max\"\n      [attr.placeholder]=\"placeholder\"\n      [attr.aria-label]=\"ariaLabelValue\"\n      [attr.aria-labelledby]=\"labelId\"\n      [attr.aria-describedby]=\"ariaDescribedby\"\n      [attr.autofocus]=\"autofocus ? true : null\"\n      [value]=\"value\"\n      [disabled]=\"isDisabled\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n  } @else {\n    <div class=\"relative w-full\">\n      <input\n        type=\"text\"\n        [class]=\"inputClass\"\n        [attr.id]=\"inputId\"\n        [attr.name]=\"name\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"ariaLabelValue\"\n        [attr.aria-labelledby]=\"labelId\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-expanded]=\"isOpen ? 'true' : 'false'\"\n        [attr.aria-controls]=\"panelId\"\n        [attr.autofocus]=\"autofocus ? true : null\"\n        [attr.data-cxs-datepicker]=\"panelId\"\n        [value]=\"value\"\n        [disabled]=\"isDisabled\"\n        [readonly]=\"true\"\n        [required]=\"required\"\n        (click)=\"open()\"\n        (focus)=\"open()\"\n        (blur)=\"onBlur()\"\n      />\n      @if (isOpen) {\n        <div [class]=\"popoverClass\" [attr.id]=\"panelId\" role=\"dialog\" aria-label=\"Choose date\">\n          <div class=\"flex items-center justify-between\">\n            <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Previous month\" (click)=\"prevMonth()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-3\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 19.5 8.25 12l7.5-7.5\" />\n              </svg>\n            </button>\n            <div class=\"flex items-center gap-2\">\n              <select\n                [class]=\"selectClass\"\n                [disabled]=\"isDisabled\"\n                [value]=\"displayMonth.getMonth()\"\n                aria-label=\"Month\"\n                (change)=\"onMonthChange($event)\"\n              >\n                @for (month of monthOptions; track month.value) {\n                  <option [value]=\"month.value\">{{ month.label }}</option>\n                }\n              </select>\n              <select\n                [class]=\"selectClass\"\n                [disabled]=\"isDisabled\"\n                [value]=\"displayMonth.getFullYear()\"\n                aria-label=\"Year\"\n                (change)=\"onYearChange($event)\"\n              >\n                @for (year of yearOptions; track year) {\n                  <option [value]=\"year\">{{ year }}</option>\n                }\n              </select>\n            </div>\n            <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Next month\" (click)=\"nextMonth()\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-3\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\" />\n              </svg>\n            </button>\n          </div>\n\n          <div class=\"mt-3 grid grid-cols-7 gap-1 text-center text-xs text-(--cxs-color-on-surface-muted)\">\n            @for (label of weekDayLabels; track label) {\n              <div>{{ label }}</div>\n            }\n          </div>\n\n          <div class=\"mt-2 grid grid-cols-7 gap-1\" role=\"grid\">\n            @for (day of calendarDays; track day.key) {\n              <button\n                type=\"button\"\n                [class]=\"dayButtonClass(day)\"\n                [disabled]=\"day.disabled\"\n                [attr.data-date]=\"day.key\"\n                [attr.aria-selected]=\"day.key === value ? 'true' : 'false'\"\n                [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                (click)=\"onDateSelect(day)\"\n              >\n                {{ day.label }}\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }], variant: [{
@@ -1820,6 +1888,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], autofocus: [{
                 type: Input
+            }], label: [{
+                type: Input
             }], id: [{
                 type: Input
             }], name: [{
@@ -1850,7 +1920,11 @@ const BASE_CLASSES$2 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var
     '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 = {
+const WRAPPER_CLASSES$5 = 'flex w-full flex-col gap-1';
+const LABEL_BASE_CLASSES$3 = 'font-medium text-(--cxs-color-on-surface)';
+const LABEL_DISABLED_CLASSES$3 = 'text-[var(--cxs-color-on-surface-muted)]';
+const ERROR_BASE_CLASSES = 'text-[var(--cxs-color-danger)]';
+const VARIANT_CLASSES$3 = {
     outline: 'bg-[var(--cxs-color-surface)]',
     filled: 'bg-[var(--cxs-color-surface-hover)]'
 };
@@ -1859,9 +1933,20 @@ const SIZE_CLASSES$1 = {
     md: 'h-10 px-3 text-sm',
     lg: 'h-12 px-4 text-base'
 };
-const INVALID_CLASSES$2 = 'border-[var(--cxs-color-danger)] focus-visible:border-[var(--cxs-color-danger)] ' +
+const LABEL_SIZE_CLASSES$3 = {
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-base'
+};
+const ERROR_SIZE_CLASSES = {
+    sm: 'text-xs',
+    md: 'text-xs',
+    lg: 'text-sm'
+};
+const INVALID_CLASSES$3 = 'border-[var(--cxs-color-danger)] focus-visible:border-[var(--cxs-color-danger)] ' +
     'focus-visible:outline-[var(--cxs-color-danger)]';
 class CxsInputComponent {
+    static nextId = 0;
     value = '';
     type = 'text';
     variant = 'outline';
@@ -1871,6 +1956,7 @@ class CxsInputComponent {
     required = false;
     invalid = false;
     autofocus = false;
+    label;
     id;
     name;
     placeholder;
@@ -1880,6 +1966,7 @@ class CxsInputComponent {
     ariaLabel;
     ariaDescribedby;
     valueChange = new EventEmitter();
+    instanceId = `cxs-input-${CxsInputComponent.nextId++}`;
     disabledFromControl = false;
     onChange = () => { };
     onTouched = () => { };
@@ -1890,12 +1977,55 @@ class CxsInputComponent {
         return [
             BASE_CLASSES$2,
             SIZE_CLASSES$1[this.size],
-            VARIANT_CLASSES$2[this.variant],
-            this.invalid ? INVALID_CLASSES$2 : ''
+            VARIANT_CLASSES$3[this.variant],
+            this.invalid ? INVALID_CLASSES$3 : ''
         ]
             .filter(Boolean)
             .join(' ');
     }
+    get wrapperClass() {
+        return WRAPPER_CLASSES$5;
+    }
+    get labelClass() {
+        return [
+            LABEL_BASE_CLASSES$3,
+            LABEL_SIZE_CLASSES$3[this.size],
+            this.isDisabled ? LABEL_DISABLED_CLASSES$3 : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get inputId() {
+        if (this.id) {
+            return this.id;
+        }
+        return this.label ? this.instanceId : null;
+    }
+    get labelId() {
+        if (!this.label) {
+            return null;
+        }
+        return `${this.inputId}-label`;
+    }
+    get errorId() {
+        return `${this.instanceId}-error`;
+    }
+    get ariaLabelValue() {
+        if (this.label) {
+            return null;
+        }
+        return this.ariaLabel ?? null;
+    }
+    get ariaDescribedbyValue() {
+        const tokens = [this.ariaDescribedby].filter(Boolean);
+        if (this.invalid) {
+            tokens.push(this.errorId);
+        }
+        return tokens.length > 0 ? tokens.join(' ') : null;
+    }
+    get errorClass() {
+        return [ERROR_BASE_CLASSES, ERROR_SIZE_CLASSES[this.size]].join(' ');
+    }
     writeValue(value) {
         this.value = value ?? '';
     }
@@ -1919,23 +2049,23 @@ class CxsInputComponent {
         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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsInputComponent, isStandalone: true, selector: "cxs-input", inputs: { value: "value", type: "type", variant: "variant", size: "size", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", autofocus: "autofocus", label: "label", id: "id", name: "name", placeholder: "placeholder", autocomplete: "autocomplete", inputmode: "inputmode", spellcheck: "spellcheck", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 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 });
+        ], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  @if (label) {\n    <label [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"inputId\">\n      {{ label }}\n    </label>\n  }\n  <input\n    [class]=\"inputClass\"\n    [attr.id]=\"inputId\"\n    [attr.name]=\"name\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.inputmode]=\"inputmode\"\n    [attr.spellcheck]=\"spellcheck === null ? null : spellcheck\"\n    [attr.aria-label]=\"ariaLabelValue\"\n    [attr.aria-labelledby]=\"labelId\"\n    [attr.aria-describedby]=\"ariaDescribedbyValue\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n    [disabled]=\"isDisabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  @if (invalid) {\n    <div [class]=\"errorClass\" [attr.id]=\"errorId\" aria-live=\"polite\">\n      <ng-content select=\"[cxsInputError]\"></ng-content>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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: [
+            args: [{ selector: 'cxs-input', standalone: true, imports: [CommonModule], 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" }]
+                    ], template: "<div [class]=\"wrapperClass\">\n  @if (label) {\n    <label [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"inputId\">\n      {{ label }}\n    </label>\n  }\n  <input\n    [class]=\"inputClass\"\n    [attr.id]=\"inputId\"\n    [attr.name]=\"name\"\n    [attr.type]=\"type\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.autocomplete]=\"autocomplete\"\n    [attr.inputmode]=\"inputmode\"\n    [attr.spellcheck]=\"spellcheck === null ? null : spellcheck\"\n    [attr.aria-label]=\"ariaLabelValue\"\n    [attr.aria-labelledby]=\"labelId\"\n    [attr.aria-describedby]=\"ariaDescribedbyValue\"\n    [attr.aria-invalid]=\"invalid ? 'true' : null\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n    [disabled]=\"isDisabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  @if (invalid) {\n    <div [class]=\"errorClass\" [attr.id]=\"errorId\" aria-live=\"polite\">\n      <ng-content select=\"[cxsInputError]\"></ng-content>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }], type: [{
@@ -1954,6 +2084,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], autofocus: [{
                 type: Input
+            }], label: [{
+                type: Input
             }], id: [{
                 type: Input
             }], name: [{
@@ -2115,12 +2247,467 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['menuItem', { read: ElementRef }]
             }] } });
 
+const WRAPPER_CLASSES$4 = 'flex w-full flex-col gap-1';
+const LABEL_BASE_CLASSES$2 = 'font-medium text-(--cxs-color-on-surface)';
+const LABEL_DISABLED_CLASSES$2 = 'text-[var(--cxs-color-on-surface-muted)]';
+const CONTROL_BASE_CLASSES = 'flex w-full flex-wrap items-center gap-2 rounded-[var(--cxs-radius-md)] border ' +
+    'border-[var(--cxs-color-border)] transition-colors ' +
+    'focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 ' +
+    'focus-within:outline-[var(--cxs-color-focus)] focus-within:border-[var(--cxs-color-focus)]';
+const CONTROL_DISABLED_CLASSES = 'pointer-events-none cursor-not-allowed opacity-60';
+const VARIANT_CLASSES$2 = {
+    outline: 'bg-[var(--cxs-color-surface)]',
+    filled: 'bg-[var(--cxs-color-surface-hover)]'
+};
+const CONTROL_SIZE_CLASSES$1 = {
+    sm: 'min-h-8 px-2 py-1 text-sm',
+    md: 'min-h-10 px-3 py-1.5 text-sm',
+    lg: 'min-h-12 px-4 py-2 text-base'
+};
+const LABEL_SIZE_CLASSES$2 = {
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-base'
+};
+const INPUT_CLASSES = 'flex-1 min-w-[6rem] bg-transparent outline-none placeholder:text-[var(--cxs-color-on-surface-muted)]';
+const CHIP_BASE_CLASSES = 'inline-flex items-center gap-1 rounded-[var(--cxs-radius-sm)] ' +
+    'bg-[var(--cxs-color-surface-hover)] text-[var(--cxs-color-on-surface)]';
+const CHIP_SIZE_CLASSES = {
+    sm: 'px-2 py-0.5 text-xs',
+    md: 'px-2 py-0.5 text-xs',
+    lg: 'px-2.5 py-1 text-sm'
+};
+const CHIP_REMOVE_CLASSES = 'inline-flex h-4 w-4 items-center justify-center rounded-full ' +
+    'text-[var(--cxs-color-on-surface-muted)] hover:text-[var(--cxs-color-on-surface)]';
+const PANEL_CLASSES$1 = '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-1 shadow-[var(--cxs-shadow-sm)]';
+const OPTION_BASE_CLASSES = 'flex w-full items-center justify-between rounded-[var(--cxs-radius-sm)] px-3 py-2 text-left ' +
+    'text-sm text-[var(--cxs-color-on-surface)] transition-colors hover:bg-[var(--cxs-color-surface-hover)]';
+const OPTION_DISABLED_CLASSES = 'cursor-not-allowed opacity-50 hover:bg-transparent';
+const EMPTY_STATE_CLASSES = 'px-3 py-2 text-sm text-[var(--cxs-color-on-surface-muted)]';
+const INVALID_CLASSES$2 = 'border-[var(--cxs-color-danger)] focus-within:border-[var(--cxs-color-danger)] ' +
+    'focus-within:outline-[var(--cxs-color-danger)]';
+class CxsMultiSelectComponent {
+    elementRef;
+    static nextId = 0;
+    options = [];
+    value = [];
+    variant = 'outline';
+    size = 'md';
+    disabled = false;
+    readonly = false;
+    invalid = false;
+    placeholder;
+    label;
+    maxSelections;
+    id;
+    name;
+    ariaLabel;
+    ariaDescribedby;
+    valueChange = new EventEmitter();
+    inputEl;
+    instanceId = `cxs-multi-select-${CxsMultiSelectComponent.nextId++}`;
+    listId = `${this.instanceId}-list`;
+    query = '';
+    isOpen = false;
+    disabledFromControl = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    get isDisabled() {
+        return this.disabled || this.disabledFromControl;
+    }
+    get isAtMax() {
+        return this.maxSelections !== undefined &&
+            this.maxSelections !== null &&
+            this.value.length >= this.maxSelections;
+    }
+    get wrapperClass() {
+        return WRAPPER_CLASSES$4;
+    }
+    get labelClass() {
+        return [
+            LABEL_BASE_CLASSES$2,
+            LABEL_SIZE_CLASSES$2[this.size],
+            this.isDisabled ? LABEL_DISABLED_CLASSES$2 : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get controlClass() {
+        return [
+            CONTROL_BASE_CLASSES,
+            CONTROL_SIZE_CLASSES$1[this.size],
+            VARIANT_CLASSES$2[this.variant],
+            this.invalid ? INVALID_CLASSES$2 : '',
+            this.isDisabled ? CONTROL_DISABLED_CLASSES : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get inputClass() {
+        return INPUT_CLASSES;
+    }
+    get chipClass() {
+        return [CHIP_BASE_CLASSES, CHIP_SIZE_CLASSES[this.size]].join(' ');
+    }
+    get chipRemoveClass() {
+        return CHIP_REMOVE_CLASSES;
+    }
+    get panelClass() {
+        return PANEL_CLASSES$1;
+    }
+    get optionClass() {
+        return OPTION_BASE_CLASSES;
+    }
+    get optionDisabledClass() {
+        return OPTION_DISABLED_CLASSES;
+    }
+    get emptyStateClass() {
+        return EMPTY_STATE_CLASSES;
+    }
+    get inputId() {
+        if (this.id) {
+            return this.id;
+        }
+        return this.label ? this.instanceId : null;
+    }
+    get labelId() {
+        if (!this.label) {
+            return null;
+        }
+        return `${this.inputId}-label`;
+    }
+    get ariaLabelValue() {
+        if (this.label) {
+            return null;
+        }
+        return this.ariaLabel ?? null;
+    }
+    get selectedOptions() {
+        const optionsByValue = new Map(this.options.map((option) => [option.value, option]));
+        return this.value.map((val) => optionsByValue.get(val) ?? { label: val, value: val });
+    }
+    get filteredOptions() {
+        const selected = new Set(this.value);
+        const query = this.query.trim().toLowerCase();
+        return this.options.filter((option) => {
+            if (selected.has(option.value)) {
+                return false;
+            }
+            if (!query) {
+                return true;
+            }
+            return option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query);
+        });
+    }
+    writeValue(value) {
+        this.value = value ? [...value] : [];
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromControl = isDisabled;
+    }
+    focusInput() {
+        if (this.isDisabled || this.readonly) {
+            return;
+        }
+        this.inputEl?.nativeElement.focus();
+    }
+    open() {
+        if (this.isDisabled || this.readonly) {
+            return;
+        }
+        this.isOpen = true;
+    }
+    close() {
+        this.isOpen = false;
+    }
+    onQueryInput(event) {
+        const target = event.target;
+        this.query = target.value;
+        this.open();
+    }
+    onKeydown(event) {
+        if (event.key === 'Backspace' && !this.query && this.value.length > 0) {
+            this.removeValue(this.value[this.value.length - 1]);
+        }
+    }
+    selectOption(option) {
+        if (this.isDisabled || this.readonly || this.isAtMax) {
+            return;
+        }
+        if (this.value.includes(option.value)) {
+            return;
+        }
+        const nextValue = [...this.value, option.value];
+        this.updateValue(nextValue);
+        this.query = '';
+        this.open();
+        this.focusInput();
+    }
+    removeValue(value) {
+        if (this.isDisabled || this.readonly) {
+            return;
+        }
+        const nextValue = this.value.filter((item) => item !== value);
+        this.updateValue(nextValue);
+    }
+    onOptionMouseDown(event) {
+        event.preventDefault();
+    }
+    onChipMouseDown(event) {
+        event.preventDefault();
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    updateValue(nextValue) {
+        this.value = [...nextValue];
+        this.onChange(this.value);
+        this.valueChange.emit(this.value);
+    }
+    onDocumentClick(event) {
+        if (!this.isOpen) {
+            return;
+        }
+        const target = event.target;
+        if (target && !this.elementRef.nativeElement.contains(target)) {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsMultiSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsMultiSelectComponent, isStandalone: true, selector: "cxs-multi-select", inputs: { options: "options", value: "value", variant: "variant", size: "size", disabled: "disabled", readonly: "readonly", invalid: "invalid", placeholder: "placeholder", label: "label", maxSelections: "maxSelections", id: "id", name: "name", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CxsMultiSelectComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  @if (label) {\n    <label [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"inputId\">\n      {{ label }}\n    </label>\n  }\n  <div class=\"relative\">\n    <div [class]=\"controlClass\" (click)=\"focusInput()\">\n      @for (chip of selectedOptions; track chip.value) {\n        <span [class]=\"chipClass\">\n          <span>{{ chip.label }}</span>\n          <button\n            type=\"button\"\n            [class]=\"chipRemoveClass\"\n            [attr.aria-label]=\"'Remove ' + chip.label\"\n            (mousedown)=\"onChipMouseDown($event)\"\n            (click)=\"removeValue(chip.value)\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n                 stroke=\"currentColor\" class=\"size-3\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n          </button>\n        </span>\n      }\n      <input\n        #inputEl\n        type=\"text\"\n        [class]=\"inputClass\"\n        [attr.id]=\"inputId\"\n        [attr.name]=\"name\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"ariaLabelValue\"\n        [attr.aria-labelledby]=\"labelId\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-expanded]=\"isOpen ? 'true' : 'false'\"\n        [attr.aria-controls]=\"listId\"\n        [attr.aria-invalid]=\"invalid ? 'true' : null\"\n        [disabled]=\"isDisabled\"\n        [readonly]=\"readonly || isAtMax\"\n        [value]=\"query\"\n        (input)=\"onQueryInput($event)\"\n        (focus)=\"open()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeydown($event)\"\n      />\n    </div>\n    @if (isOpen) {\n      <div [class]=\"panelClass\" [attr.id]=\"listId\" role=\"listbox\">\n        @if (filteredOptions.length === 0) {\n          <div [class]=\"emptyStateClass\">\n            No matches\n          </div>\n        } @else {\n          @for (option of filteredOptions; track option.value) {\n            <button\n              type=\"button\"\n              [class]=\"optionClass + (isAtMax || readonly ? ' ' + optionDisabledClass : '')\"\n              [disabled]=\"isAtMax || readonly\"\n              role=\"option\"\n              (mousedown)=\"onOptionMouseDown($event)\"\n              (click)=\"selectOption(option)\"\n            >\n              <span>{{ option.label }}</span>\n            </button>\n          }\n        }\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-multi-select', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CxsMultiSelectComponent),
+                            multi: true
+                        }
+                    ], template: "<div [class]=\"wrapperClass\">\n  @if (label) {\n    <label [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"inputId\">\n      {{ label }}\n    </label>\n  }\n  <div class=\"relative\">\n    <div [class]=\"controlClass\" (click)=\"focusInput()\">\n      @for (chip of selectedOptions; track chip.value) {\n        <span [class]=\"chipClass\">\n          <span>{{ chip.label }}</span>\n          <button\n            type=\"button\"\n            [class]=\"chipRemoveClass\"\n            [attr.aria-label]=\"'Remove ' + chip.label\"\n            (mousedown)=\"onChipMouseDown($event)\"\n            (click)=\"removeValue(chip.value)\"\n          >\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\"\n                 stroke=\"currentColor\" class=\"size-3\">\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"/>\n</svg>\n          </button>\n        </span>\n      }\n      <input\n        #inputEl\n        type=\"text\"\n        [class]=\"inputClass\"\n        [attr.id]=\"inputId\"\n        [attr.name]=\"name\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"ariaLabelValue\"\n        [attr.aria-labelledby]=\"labelId\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-expanded]=\"isOpen ? 'true' : 'false'\"\n        [attr.aria-controls]=\"listId\"\n        [attr.aria-invalid]=\"invalid ? 'true' : null\"\n        [disabled]=\"isDisabled\"\n        [readonly]=\"readonly || isAtMax\"\n        [value]=\"query\"\n        (input)=\"onQueryInput($event)\"\n        (focus)=\"open()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeydown($event)\"\n      />\n    </div>\n    @if (isOpen) {\n      <div [class]=\"panelClass\" [attr.id]=\"listId\" role=\"listbox\">\n        @if (filteredOptions.length === 0) {\n          <div [class]=\"emptyStateClass\">\n            No matches\n          </div>\n        } @else {\n          @for (option of filteredOptions; track option.value) {\n            <button\n              type=\"button\"\n              [class]=\"optionClass + (isAtMax || readonly ? ' ' + optionDisabledClass : '')\"\n              [disabled]=\"isAtMax || readonly\"\n              role=\"option\"\n              (mousedown)=\"onOptionMouseDown($event)\"\n              (click)=\"selectOption(option)\"\n            >\n              <span>{{ option.label }}</span>\n            </button>\n          }\n        }\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], maxSelections: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaDescribedby: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], inputEl: [{
+                type: ViewChild,
+                args: ['inputEl']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class CxsTabLabelDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTabLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: CxsTabLabelDirective, isStandalone: true, selector: "[cxsTabLabel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTabLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cxsTabLabel]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class CxsTabPanelComponent {
+    static nextId = 0;
+    id;
+    label;
+    disabled = false;
+    labelTemplate;
+    templateRef;
+    instanceId = `cxs-tab-${CxsTabPanelComponent.nextId++}`;
+    get resolvedId() {
+        return this.id ?? this.instanceId;
+    }
+    get tabId() {
+        return `${this.resolvedId}-tab`;
+    }
+    get panelId() {
+        return `${this.resolvedId}-panel`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTabPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsTabPanelComponent, isStandalone: true, selector: "cxs-tab-panel", inputs: { id: "id", label: "label", disabled: "disabled" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: CxsTabLabelDirective, descendants: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTabPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-tab-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], labelTemplate: [{
+                type: ContentChild,
+                args: [CxsTabLabelDirective]
+            }], templateRef: [{
+                type: ViewChild,
+                args: ['content', { static: true }]
+            }] } });
+
+const WRAPPER_CLASSES$3 = 'w-full';
+const TAB_LIST_CLASSES = 'flex flex-wrap items-center gap-6 border-b border-[var(--cxs-color-border)]';
+const TAB_BUTTON_BASE_CLASSES = 'inline-flex items-center gap-2 border-b-2 pb-3 text-sm font-medium transition-colors';
+const TAB_BUTTON_INACTIVE_CLASSES = 'border-transparent text-[var(--cxs-color-on-surface-muted)] hover:text-[var(--cxs-color-on-surface)]';
+const TAB_BUTTON_ACTIVE_CLASSES = 'border-[var(--cxs-color-primary)] text-[var(--cxs-color-primary)]';
+const TAB_BUTTON_DISABLED_CLASSES = 'cursor-not-allowed opacity-50';
+const PANEL_WRAPPER_CLASSES = 'pt-4';
+const PANEL_CLASSES = 'rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+    'bg-[var(--cxs-color-surface)] p-4 text-sm text-[var(--cxs-color-on-surface)]';
+class CxsTabsComponent {
+    ariaLabel = 'Tabs';
+    activeId;
+    activeIdChange = new EventEmitter();
+    panels;
+    get wrapperClass() {
+        return WRAPPER_CLASSES$3;
+    }
+    get tabListClass() {
+        return TAB_LIST_CLASSES;
+    }
+    get tabButtonBaseClass() {
+        return TAB_BUTTON_BASE_CLASSES;
+    }
+    get tabButtonInactiveClass() {
+        return TAB_BUTTON_INACTIVE_CLASSES;
+    }
+    get tabButtonActiveClass() {
+        return TAB_BUTTON_ACTIVE_CLASSES;
+    }
+    get tabButtonDisabledClass() {
+        return TAB_BUTTON_DISABLED_CLASSES;
+    }
+    get panelWrapperClass() {
+        return PANEL_WRAPPER_CLASSES;
+    }
+    get panelClass() {
+        return PANEL_CLASSES;
+    }
+    get panelList() {
+        return this.panels?.toArray() ?? [];
+    }
+    get activePanel() {
+        return this.resolveActivePanel();
+    }
+    ngAfterContentInit() {
+        this.ensureActiveTab();
+        this.panels?.changes.subscribe(() => this.ensureActiveTab());
+    }
+    isActive(panel) {
+        return this.activeId === panel.resolvedId;
+    }
+    tabButtonClass(panel) {
+        return [
+            TAB_BUTTON_BASE_CLASSES,
+            this.isActive(panel) ? TAB_BUTTON_ACTIVE_CLASSES : TAB_BUTTON_INACTIVE_CLASSES,
+            panel.disabled ? TAB_BUTTON_DISABLED_CLASSES : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    selectTab(panel) {
+        if (panel.disabled) {
+            return;
+        }
+        this.activeId = panel.resolvedId;
+        this.activeIdChange.emit(panel.resolvedId);
+    }
+    panelLabel(panel) {
+        return panel.label ?? panel.resolvedId;
+    }
+    ensureActiveTab() {
+        const nextActive = this.resolveActivePanel();
+        if (!nextActive) {
+            return;
+        }
+        if (this.activeId !== nextActive.resolvedId) {
+            this.activeId = nextActive.resolvedId;
+            this.activeIdChange.emit(nextActive.resolvedId);
+        }
+    }
+    resolveActivePanel() {
+        const panels = this.panelList;
+        if (!panels.length) {
+            return null;
+        }
+        if (this.activeId) {
+            const active = panels.find((panel) => panel.resolvedId === this.activeId);
+            if (active && !active.disabled) {
+                return active;
+            }
+        }
+        return panels.find((panel) => !panel.disabled) ?? panels[0];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsTabsComponent, isStandalone: true, selector: "cxs-tabs", inputs: { ariaLabel: "ariaLabel", activeId: "activeId" }, outputs: { activeIdChange: "activeIdChange" }, queries: [{ propertyName: "panels", predicate: CxsTabPanelComponent }], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  <div [class]=\"tabListClass\" role=\"tablist\" [attr.aria-label]=\"ariaLabel\">\n    @for (panel of panelList; track panel.resolvedId) {\n      <button\n        type=\"button\"\n        [class]=\"tabButtonClass(panel)\"\n        role=\"tab\"\n        [attr.id]=\"panel.tabId\"\n        [attr.aria-controls]=\"panel.panelId\"\n        [attr.aria-selected]=\"isActive(panel) ? 'true' : 'false'\"\n        [disabled]=\"panel.disabled\"\n        (click)=\"selectTab(panel)\"\n      >\n        @if (panel.labelTemplate) {\n          <ng-container [ngTemplateOutlet]=\"panel.labelTemplate.templateRef\"></ng-container>\n        } @else {\n          <span>{{ panelLabel(panel) }}</span>\n        }\n      </button>\n    }\n  </div>\n\n  @if (activePanel) {\n    <div [class]=\"panelWrapperClass\">\n      <div\n        [class]=\"panelClass\"\n        role=\"tabpanel\"\n        [attr.id]=\"activePanel.panelId\"\n        [attr.aria-labelledby]=\"activePanel.tabId\"\n      >\n        <ng-container [ngTemplateOutlet]=\"activePanel.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-tabs', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClass\">\n  <div [class]=\"tabListClass\" role=\"tablist\" [attr.aria-label]=\"ariaLabel\">\n    @for (panel of panelList; track panel.resolvedId) {\n      <button\n        type=\"button\"\n        [class]=\"tabButtonClass(panel)\"\n        role=\"tab\"\n        [attr.id]=\"panel.tabId\"\n        [attr.aria-controls]=\"panel.panelId\"\n        [attr.aria-selected]=\"isActive(panel) ? 'true' : 'false'\"\n        [disabled]=\"panel.disabled\"\n        (click)=\"selectTab(panel)\"\n      >\n        @if (panel.labelTemplate) {\n          <ng-container [ngTemplateOutlet]=\"panel.labelTemplate.templateRef\"></ng-container>\n        } @else {\n          <span>{{ panelLabel(panel) }}</span>\n        }\n      </button>\n    }\n  </div>\n\n  @if (activePanel) {\n    <div [class]=\"panelWrapperClass\">\n      <div\n        [class]=\"panelClass\"\n        role=\"tabpanel\"\n        [attr.id]=\"activePanel.panelId\"\n        [attr.aria-labelledby]=\"activePanel.tabId\"\n      >\n        <ng-container [ngTemplateOutlet]=\"activePanel.templateRef\"></ng-container>\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], activeId: [{
+                type: Input
+            }], activeIdChange: [{
+                type: Output
+            }], panels: [{
+                type: ContentChildren,
+                args: [CxsTabPanelComponent]
+            }] } });
+
 const WRAPPER_BASE = 'inline-flex items-center gap-2 select-none';
 const WRAPPER_ENABLED = 'cursor-pointer';
 const WRAPPER_DISABLED = 'cursor-not-allowed opacity-60';
 const LABEL_BASE = 'text-[var(--cxs-color-on-surface)]';
 const LABEL_DISABLED = 'text-[var(--cxs-color-on-surface-muted)]';
-const LABEL_SIZE_CLASSES = {
+const LABEL_SIZE_CLASSES$1 = {
     sm: 'text-sm',
     md: 'text-sm',
     lg: 'text-base'
@@ -2179,7 +2766,7 @@ class CxsRadioComponent {
     get labelClass() {
         return [
             LABEL_BASE,
-            LABEL_SIZE_CLASSES[this.size],
+            LABEL_SIZE_CLASSES$1[this.size],
             this.isDisabled ? LABEL_DISABLED : ''
         ]
             .filter(Boolean)
@@ -2270,6 +2857,9 @@ const BASE_CLASSES$1 = 'w-full appearance-none rounded-[var(--cxs-radius-md)] bo
     '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 WRAPPER_CLASSES$2 = 'flex w-full flex-col gap-1';
+const LABEL_BASE_CLASSES$1 = 'font-medium text-(--cxs-color-on-surface)';
+const LABEL_DISABLED_CLASSES$1 = 'text-[var(--cxs-color-on-surface-muted)]';
 const VARIANT_CLASSES$1 = {
     outline: 'bg-[var(--cxs-color-surface)]',
     filled: 'bg-[var(--cxs-color-surface-hover)]'
@@ -2279,15 +2869,22 @@ const SIZE_CLASSES = {
     md: 'h-10 pl-3 pr-9 text-sm',
     lg: 'h-12 pl-4 pr-10 text-base'
 };
+const LABEL_SIZE_CLASSES = {
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-base'
+};
 const INVALID_CLASSES = 'border-[var(--cxs-color-danger)] focus-visible:border-[var(--cxs-color-danger)] ' +
     'focus-visible:outline-[var(--cxs-color-danger)]';
 class CxsSelectComponent {
+    static nextId = 0;
     value = '';
     variant = 'outline';
     size = 'md';
     disabled = false;
     required = false;
     invalid = false;
+    label;
     placeholder;
     placeholderValue = '';
     id;
@@ -2295,6 +2892,7 @@ class CxsSelectComponent {
     ariaLabel;
     ariaDescribedby;
     valueChange = new EventEmitter();
+    instanceId = `cxs-select-${CxsSelectComponent.nextId++}`;
     disabledFromControl = false;
     onChange = () => { };
     onTouched = () => { };
@@ -2311,6 +2909,36 @@ class CxsSelectComponent {
             .filter(Boolean)
             .join(' ');
     }
+    get wrapperClass() {
+        return WRAPPER_CLASSES$2;
+    }
+    get labelClass() {
+        return [
+            LABEL_BASE_CLASSES$1,
+            LABEL_SIZE_CLASSES[this.size],
+            this.isDisabled ? LABEL_DISABLED_CLASSES$1 : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get selectId() {
+        if (this.id) {
+            return this.id;
+        }
+        return this.label ? this.instanceId : null;
+    }
+    get labelId() {
+        if (!this.label) {
+            return null;
+        }
+        return `${this.selectId}-label`;
+    }
+    get ariaLabelValue() {
+        if (this.label) {
+            return null;
+        }
+        return this.ariaLabel ?? null;
+    }
     get selectValue() {
         if (this.placeholder && this.value === '') {
             return this.placeholderValue;
@@ -2340,13 +2968,13 @@ class CxsSelectComponent {
         this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsSelectComponent, isStandalone: true, selector: "cxs-select", inputs: { value: "value", variant: "variant", size: "size", disabled: "disabled", required: "required", invalid: "invalid", placeholder: "placeholder", placeholderValue: "placeholderValue", id: "id", name: "name", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsSelectComponent, isStandalone: true, selector: "cxs-select", inputs: { value: "value", variant: "variant", size: "size", disabled: "disabled", required: "required", invalid: "invalid", label: "label", placeholder: "placeholder", placeholderValue: "placeholderValue", id: "id", name: "name", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CxsSelectComponent),
                 multi: true
             }
-        ], 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 });
+        ], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  <label *ngIf=\"label\" [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"selectId\">\n    {{ label }}\n  </label>\n  <div class=\"relative\">\n    <select\n      [class]=\"selectClass\"\n      [attr.id]=\"selectId\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"ariaLabelValue\"\n      [attr.aria-labelledby]=\"labelId\"\n      [attr.aria-describedby]=\"ariaDescribedby\"\n      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n      [disabled]=\"isDisabled\"\n      [required]=\"required\"\n      [value]=\"selectValue\"\n      (change)=\"onSelectChange($event)\"\n      (blur)=\"onBlur()\"\n    >\n      <option *ngIf=\"placeholder\" [value]=\"placeholderValue\" disabled>\n        {{ placeholder }}\n      </option>\n      <ng-content></ng-content>\n    </select>\n    <span\n      class=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--cxs-color-on-surface-muted)]\"\n      aria-hidden=\"true\"\n    >\n      <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"h-4 w-4\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </span>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsSelectComponent, decorators: [{
             type: Component,
@@ -2356,7 +2984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => CxsSelectComponent),
                             multi: true
                         }
-                    ], 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" }]
+                    ], template: "<div [class]=\"wrapperClass\">\n  <label *ngIf=\"label\" [class]=\"labelClass\" [attr.id]=\"labelId\" [attr.for]=\"selectId\">\n    {{ label }}\n  </label>\n  <div class=\"relative\">\n    <select\n      [class]=\"selectClass\"\n      [attr.id]=\"selectId\"\n      [attr.name]=\"name\"\n      [attr.aria-label]=\"ariaLabelValue\"\n      [attr.aria-labelledby]=\"labelId\"\n      [attr.aria-describedby]=\"ariaDescribedby\"\n      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n      [disabled]=\"isDisabled\"\n      [required]=\"required\"\n      [value]=\"selectValue\"\n      (change)=\"onSelectChange($event)\"\n      (blur)=\"onBlur()\"\n    >\n      <option *ngIf=\"placeholder\" [value]=\"placeholderValue\" disabled>\n        {{ placeholder }}\n      </option>\n      <ng-content></ng-content>\n    </select>\n    <span\n      class=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--cxs-color-on-surface-muted)]\"\n      aria-hidden=\"true\"\n    >\n      <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"h-4 w-4\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M5.23 7.21a.75.75 0 0 1 1.06.02L10 10.94l3.71-3.71a.75.75 0 1 1 1.06 1.06l-4.24 4.25a.75.75 0 0 1-1.06 0L5.21 8.29a.75.75 0 0 1 .02-1.08Z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </span>\n  </div>\n</div>\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }], variant: [{
@@ -2369,6 +2997,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], invalid: [{
                 type: Input
+            }], label: [{
+                type: Input
             }], placeholder: [{
                 type: Input
             }], placeholderValue: [{
@@ -2509,25 +3139,25 @@ const TRACK_BASE_CLASSES = 'relative inline-flex items-center rounded-full borde
     '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',
+    sm: 'h-6 w-11 p-0.5',
     md: 'h-6 w-11 p-0.5',
-    lg: 'h-8 w-14 p-0.5'
+    lg: 'h-6 w-11 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)]'
+    off: 'bg-[var(--cxs-color-surface-hover)] 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_BASE_CLASSES = 'absolute left-0.5 top-1/2 -translate-y-1/2 rounded-full transition-transform duration-200 ease-out';
 const THUMB_SIZE_CLASSES = {
-    sm: 'h-4 w-4',
+    sm: 'h-5 w-5',
     md: 'h-5 w-5',
-    lg: 'h-7 w-7'
+    lg: 'h-5 w-5'
 };
 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)]'
+        sm: 'translate-x-[20px] bg-[var(--cxs-color-on-primary)]',
+        md: 'translate-x-[20px] bg-[var(--cxs-color-on-primary)]',
+        lg: 'translate-x-[20px] bg-[var(--cxs-color-on-primary)]'
     },
     off: 'translate-x-0 bg-[var(--cxs-color-surface)]'
 };
@@ -2710,11 +3340,11 @@ class CxsToastComponent {
         }
     }
     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 });
+    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          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n          </svg>\n\n        </button>\n      }\n    </div>\n  </div>\n}\n", 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" }]
+            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          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n          </svg>\n\n        </button>\n      }\n    </div>\n  </div>\n}\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['class']
@@ -2932,5 +3562,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsDataTableCellDirective, CxsDataTableComponent, CxsDatepickerComponent, CxsDialogComponent, CxsInputComponent, CxsMenubarComponent, CxsMultiSelectComponent, CxsRadioComponent, CxsSelectComponent, CxsTabLabelDirective, CxsTabPanelComponent, CxsTableComponent, CxsTabsComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent };
 //# sourceMappingURL=cerxos-ui.mjs.map