cerxos-ui 0.0.14 → 0.0.15

package/fesm2022/cerxos-ui.mjs

@@ -272,9 +272,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: ['window:resize']
             }] } });
 
-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 ' +
+const BASE_CLASSES$c = '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$8 = {
+const VARIANT_CLASSES$9 = {
     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)] ' +
@@ -299,7 +299,7 @@ class CxsAlertComponent {
     closed = new EventEmitter();
     isVisible = true;
     get alertClass() {
-        return [BASE_CLASSES$a, VARIANT_CLASSES$8[this.variant]].join(' ');
+        return [BASE_CLASSES$c, VARIANT_CLASSES$9[this.variant]].join(' ');
     }
     get titleClass() {
         return [TITLE_BASE, TITLE_VARIANT[this.variant]].join(' ');
@@ -327,7 +327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Output
             }] } });
 
-const BASE_CLASSES$9 = 'grid';
+const BASE_CLASSES$b = 'grid';
 const SPACING_CLASSES = {
     sm: 'gap-2',
     md: 'gap-3',
@@ -336,7 +336,7 @@ const SPACING_CLASSES = {
 class CxsAccordionComponent {
     spacing = 'md';
     get accordionClass() {
-        return [BASE_CLASSES$9, SPACING_CLASSES[this.spacing]].join(' ');
+        return [BASE_CLASSES$b, SPACING_CLASSES[this.spacing]].join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CxsAccordionComponent, isStandalone: true, selector: "cxs-accordion", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div [class]=\"accordionClass\">\n  <ng-content></ng-content>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -424,9 +424,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Output
             }] } });
 
-const BASE_CLASSES$8 = 'inline-flex items-center gap-1 rounded-[var(--cxs-radius-md)] border px-2.5 py-0.5 text-xs font-medium ' +
+const BASE_CLASSES$a = '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$7 = {
+const VARIANT_CLASSES$8 = {
     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)] ' +
@@ -434,7 +434,7 @@ const VARIANT_CLASSES$7 = {
     danger: 'border-[var(--cxs-color-danger)] bg-[var(--cxs-color-surface)] ' +
         'text-[var(--cxs-color-danger)]'
 };
-const SIZE_CLASSES$7 = {
+const SIZE_CLASSES$8 = {
     sm: 'text-[11px]',
     md: 'text-xs'
 };
@@ -442,7 +442,7 @@ class CxsBadgeComponent {
     variant = 'primary';
     size = 'md';
     get badgeClass() {
-        return [BASE_CLASSES$8, VARIANT_CLASSES$7[this.variant], SIZE_CLASSES$7[this.size]].join(' ');
+        return [BASE_CLASSES$a, VARIANT_CLASSES$8[this.variant], SIZE_CLASSES$8[this.size]].join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CxsBadgeComponent, isStandalone: true, selector: "cxs-badge", inputs: { variant: "variant", size: "size" }, ngImport: i0, template: "<span [class]=\"badgeClass\">\n  <ng-content></ng-content>\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -456,10 +456,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }] } });
 
-const BASE_CLASSES$7 = 'inline-flex items-center justify-center overflow-hidden border border-[var(--cxs-color-border)] ' +
+const BASE_CLASSES$9 = 'inline-flex items-center justify-center overflow-hidden border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-primary-ghost)] text-[var(--cxs-color-primary)] font-semibold uppercase ' +
     'select-none';
-const SIZE_CLASSES$6 = {
+const SIZE_CLASSES$7 = {
     sm: 'h-8 w-8 text-[11px]',
     md: 'h-10 w-10 text-xs',
     lg: 'h-14 w-14 text-sm'
@@ -490,7 +490,7 @@ class CxsAvatarComponent {
         this.hostClass = hostClass;
     }
     get avatarClass() {
-        return [BASE_CLASSES$7, SIZE_CLASSES$6[this.size], SHAPE_CLASSES[this.shape], this.hostClass]
+        return [BASE_CLASSES$9, SIZE_CLASSES$7[this.size], SHAPE_CLASSES[this.shape], this.hostClass]
             .filter(Boolean)
             .join(' ');
     }
@@ -559,14 +559,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }] } });
 
-const BASE_CLASSES$6 = 'flex flex-wrap items-center gap-x-1 gap-y-1';
+const BASE_CLASSES$8 = 'flex flex-wrap items-center gap-x-1 gap-y-1';
 const ITEM_CLASSES = 'flex items-center gap-1';
 const LINK_BASE_CLASSES = 'rounded-[var(--cxs-radius-md)] transition-colors focus-visible:outline focus-visible:outline-2 ' +
     'focus-visible:outline-offset-2 focus-visible:outline-[var(--cxs-color-focus)]';
 const NON_LINK_CLASSES = 'text-[var(--cxs-color-on-surface-muted)]';
 const SEPARATOR_CLASSES = 'text-[var(--cxs-color-on-surface-muted)] select-none';
 const DISABLED_CLASSES = 'text-[var(--cxs-color-on-surface-muted)] opacity-60';
-const SIZE_CLASSES$5 = {
+const SIZE_CLASSES$6 = {
     sm: 'text-xs',
     md: 'text-sm',
     lg: 'text-base'
@@ -587,7 +587,7 @@ class CxsBreadcrumbComponent {
     variant = 'default';
     disabled = false;
     get listClass() {
-        return [BASE_CLASSES$6, SIZE_CLASSES$5[this.size], this.disabled ? 'opacity-60' : '']
+        return [BASE_CLASSES$8, SIZE_CLASSES$6[this.size], this.disabled ? 'opacity-60' : '']
             .filter(Boolean)
             .join(' ');
     }
@@ -648,14 +648,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }] } });
 
-const BASE_CLASSES$5 = 'relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors ' +
+const BASE_CLASSES$7 = 'inline-block shrink-0';
+const SIZE_CLASSES$5 = {
+    sm: 'h-4 w-4',
+    md: 'h-5 w-5',
+    lg: 'h-6 w-6'
+};
+const ICONS = {
+    bell: {
+        viewBox: '0 0 24 24',
+        paths: [
+            'M15 17h5l-1.4-1.4A2 2 0 0 1 18 14.2V11a6 6 0 1 0-12 0v3.2a2 2 0 0 1-.6 1.4L4 17h5',
+            'M10.3 20a2 2 0 0 0 3.4 0'
+        ]
+    },
+    'chevron-down': {
+        viewBox: '0 0 24 24',
+        paths: ['m6 9 6 6 6-6']
+    },
+    'chevron-left': {
+        viewBox: '0 0 24 24',
+        paths: ['m15 18-6-6 6-6']
+    },
+    'chevron-right': {
+        viewBox: '0 0 24 24',
+        paths: ['m9 18 6-6-6-6']
+    },
+    'chevron-up': {
+        viewBox: '0 0 24 24',
+        paths: ['m18 15-6-6-6 6']
+    },
+    plus: {
+        viewBox: '0 0 24 24',
+        paths: ['M12 5v14', 'M5 12h14']
+    },
+    search: {
+        viewBox: '0 0 24 24',
+        paths: ['m21 21-4.34-4.34', 'M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z']
+    },
+    user: {
+        viewBox: '0 0 24 24',
+        paths: [
+            'M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2',
+            'M10 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8'
+        ]
+    },
+    x: {
+        viewBox: '0 0 24 24',
+        paths: ['M18 6 6 18', 'M6 6l12 12']
+    }
+};
+class CxsIconComponent {
+    hostClass;
+    static nextId = 0;
+    name;
+    size = 'md';
+    label;
+    instanceId = ++CxsIconComponent.nextId;
+    constructor(hostClass) {
+        this.hostClass = hostClass;
+    }
+    get icon() {
+        const icon = ICONS[this.name];
+        if (!icon) {
+            throw new Error(`Unsupported cxs icon: ${this.name}`);
+        }
+        return icon;
+    }
+    get iconClass() {
+        return [BASE_CLASSES$7, SIZE_CLASSES$5[this.size], this.hostClass].filter(Boolean).join(' ');
+    }
+    get titleId() {
+        return this.label ? `cxs-icon-title-${this.instanceId}` : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsIconComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsIconComponent, isStandalone: true, selector: "cxs-icon", inputs: { name: "name", size: "size", label: "label" }, host: { classAttribute: "inline-flex shrink-0" }, ngImport: i0, template: "<svg\n  [attr.viewBox]=\"icon.viewBox\"\n  [class]=\"iconClass\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  [attr.role]=\"label ? 'img' : null\"\n  [attr.aria-hidden]=\"label ? null : 'true'\"\n  [attr.aria-labelledby]=\"titleId\"\n>\n  @if (titleId) {\n    <title [id]=\"titleId\">{{ label }}</title>\n  }\n\n  @for (path of icon.paths; track path) {\n    <path [attr.d]=\"path\" stroke-width=\"1.75\"></path>\n  }\n</svg>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-icon', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'inline-flex shrink-0'
+                    }, template: "<svg\n  [attr.viewBox]=\"icon.viewBox\"\n  [class]=\"iconClass\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  [attr.role]=\"label ? 'img' : null\"\n  [attr.aria-hidden]=\"label ? null : 'true'\"\n  [attr.aria-labelledby]=\"titleId\"\n>\n  @if (titleId) {\n    <title [id]=\"titleId\">{{ label }}</title>\n  }\n\n  @for (path of icon.paths; track path) {\n    <path [attr.d]=\"path\" stroke-width=\"1.75\"></path>\n  }\n</svg>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['class']
+                }] }], propDecorators: { name: [{
+                type: Input,
+                args: [{ required: true }]
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+
+const BASE_CLASSES$6 = '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$6 = {
+const VARIANT_CLASSES$7 = {
     primary: 'bg-[var(--cxs-color-primary)] text-[var(--cxs-color-on-primary)] ' +
         'hover:bg-[var(--cxs-color-primary-hover)] shadow-[var(--cxs-shadow-sm)]',
+    danger: 'bg-[var(--cxs-color-danger-surface)] text-[var(--cxs-color-danger)] ' +
+        'hover:bg-[var(--cxs-color-danger-surface-hover)] shadow-[var(--cxs-shadow-sm)]',
     secondary: 'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
         'border border-[var(--cxs-color-border)] hover:bg-[var(--cxs-color-surface-hover)]',
+    outline: 'border border-[var(--cxs-color-border)] bg-transparent text-[var(--cxs-color-primary)] ' +
+        'hover:bg-[var(--cxs-color-primary-ghost)]',
     ghost: 'bg-transparent text-[var(--cxs-color-primary)] hover:bg-[var(--cxs-color-primary-ghost)]'
 };
 const SIZE_CLASSES$4 = {
@@ -663,6 +760,11 @@ const SIZE_CLASSES$4 = {
     md: 'h-10 px-4 text-sm rounded-[var(--cxs-radius-md)]',
     lg: 'h-12 px-5 text-base rounded-[var(--cxs-radius-md)]'
 };
+const ICON_ONLY_SIZE_CLASSES = {
+    sm: 'h-8 w-8 rounded-full p-0',
+    md: 'h-10 w-10 rounded-full p-0',
+    lg: 'h-12 w-12 rounded-full p-0'
+};
 class CxsButtonComponent {
     hostClass;
     variant = 'primary';
@@ -670,23 +772,54 @@ class CxsButtonComponent {
     disabled = false;
     loading = false;
     type = 'button';
+    icon;
+    iconPosition = 'start';
+    iconOnly = false;
+    ariaLabel;
     constructor(hostClass) {
         this.hostClass = hostClass;
     }
     get isDisabled() {
         return this.disabled || this.loading;
     }
+    get leadingIconName() {
+        if (this.loading || !this.icon || this.iconPosition !== 'start') {
+            return null;
+        }
+        return this.icon;
+    }
+    get trailingIconName() {
+        if (this.loading || !this.icon || this.iconPosition !== 'end') {
+            return null;
+        }
+        return this.icon;
+    }
+    get ariaLabelValue() {
+        if (!this.iconOnly) {
+            return this.ariaLabel?.trim() || null;
+        }
+        if (!this.ariaLabel?.trim()) {
+            throw new Error('cxs-button with iconOnly=true requires ariaLabel.');
+        }
+        return this.ariaLabel.trim();
+    }
     get buttonClass() {
-        return [BASE_CLASSES$5, SIZE_CLASSES$4[this.size], VARIANT_CLASSES$6[this.variant], this.hostClass]
+        return [
+            BASE_CLASSES$6,
+            this.iconOnly ? ICON_ONLY_SIZE_CLASSES[this.size] : SIZE_CLASSES$4[this.size],
+            VARIANT_CLASSES$7[this.variant],
+            this.iconOnly ? 'gap-0' : '',
+            this.hostClass
+        ]
             .filter(Boolean)
             .join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsButtonComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsButtonComponent, isStandalone: true, selector: "cxs-button", inputs: { variant: "variant", size: "size", disabled: "disabled", loading: "loading", type: "type" }, ngImport: i0, template: "<button\n  [class]=\"buttonClass\"\n  [attr.type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n  @if (loading) {\n    <span\n      class=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n  <ng-content select=\"[cxsButtonIcon]\"></ng-content>\n  <span class=\"truncate\">\n    <ng-content></ng-content>\n  </span>\n</button>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsButtonComponent, isStandalone: true, selector: "cxs-button", inputs: { variant: "variant", size: "size", disabled: "disabled", loading: "loading", type: "type", icon: "icon", iconPosition: "iconPosition", iconOnly: "iconOnly", ariaLabel: "ariaLabel" }, ngImport: i0, template: "<button\n  [class]=\"buttonClass\"\n  [attr.type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading ? 'true' : null\"\n  [attr.aria-label]=\"ariaLabelValue\"\n>\n  @if (loading) {\n    <span\n      class=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n\n  @if (leadingIconName; as iconName) {\n    <cxs-icon [name]=\"iconName\" [size]=\"size\"></cxs-icon>\n  }\n\n  <ng-content select=\"[cxsButtonIcon]\"></ng-content>\n\n  @if (!iconOnly) {\n    <span class=\"truncate\">\n      <ng-content></ng-content>\n    </span>\n  }\n\n  @if (trailingIconName; as iconName) {\n    <cxs-icon [name]=\"iconName\" [size]=\"size\"></cxs-icon>\n  }\n</button>\n", dependencies: [{ kind: "component", type: CxsIconComponent, selector: "cxs-icon", inputs: ["name", "size", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cxs-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [class]=\"buttonClass\"\n  [attr.type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n  @if (loading) {\n    <span\n      class=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n  <ng-content select=\"[cxsButtonIcon]\"></ng-content>\n  <span class=\"truncate\">\n    <ng-content></ng-content>\n  </span>\n</button>\n" }]
+            args: [{ selector: 'cxs-button', standalone: true, imports: [CxsIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [class]=\"buttonClass\"\n  [attr.type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading ? 'true' : null\"\n  [attr.aria-label]=\"ariaLabelValue\"\n>\n  @if (loading) {\n    <span\n      class=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n\n  @if (leadingIconName; as iconName) {\n    <cxs-icon [name]=\"iconName\" [size]=\"size\"></cxs-icon>\n  }\n\n  <ng-content select=\"[cxsButtonIcon]\"></ng-content>\n\n  @if (!iconOnly) {\n    <span class=\"truncate\">\n      <ng-content></ng-content>\n    </span>\n  }\n\n  @if (trailingIconName; as iconName) {\n    <cxs-icon [name]=\"iconName\" [size]=\"size\"></cxs-icon>\n  }\n</button>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Attribute,
                     args: ['class']
@@ -700,11 +833,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Input
             }], type: [{
                 type: Input
+            }], icon: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }], iconOnly: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
             }] } });
 
-const BASE_CLASSES$4 = 'rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+const BASE_CLASSES$5 = '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$5 = {
+const VARIANT_CLASSES$6 = {
     surface: 'bg-[var(--cxs-color-surface)]',
     muted: 'bg-[var(--cxs-color-surface-hover)]',
     outline: 'bg-transparent'
@@ -722,8 +863,8 @@ class CxsCardComponent {
     ariaLabelledby;
     get cardClass() {
         return [
-            BASE_CLASSES$4,
-            VARIANT_CLASSES$5[this.variant],
+            BASE_CLASSES$5,
+            VARIANT_CLASSES$6[this.variant],
             SIZE_CLASSES$3[this.size],
             this.elevated ? 'shadow-[var(--cxs-shadow-sm)]' : ''
         ]
@@ -753,7 +894,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$5 = {
+const LABEL_SIZE_CLASSES$6 = {
     sm: 'text-sm',
     md: 'text-sm',
     lg: 'text-base'
@@ -807,7 +948,7 @@ class CxsCheckboxComponent {
     get labelClass() {
         return [
             LABEL_BASE$1,
-            LABEL_SIZE_CLASSES$5[this.size],
+            LABEL_SIZE_CLASSES$6[this.size],
             this.isDisabled ? LABEL_DISABLED$1 : ''
         ]
             .filter(Boolean)
@@ -1829,16 +1970,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: ['dialogPanel']
             }] } });
 
-const BASE_CLASSES$3 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+const BASE_CLASSES$4 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
     'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
     'focus-visible:outline-[var(--cxs-color-focus)] focus-visible:border-[var(--cxs-color-focus)] ' +
     'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60';
-const 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 = {
+const WRAPPER_CLASSES$8 = 'flex w-full flex-col gap-1';
+const LABEL_BASE_CLASSES$5 = 'font-medium text-(--cxs-color-on-surface)';
+const LABEL_DISABLED_CLASSES$5 = 'text-[var(--cxs-color-on-surface-muted)]';
+const VARIANT_CLASSES$5 = {
     outline: 'bg-[var(--cxs-color-surface)]',
     filled: 'bg-[var(--cxs-color-surface-hover)]'
 };
@@ -1847,7 +1988,7 @@ const SIZE_CLASSES$2 = {
     md: 'h-10 px-3 text-sm',
     lg: 'h-12 px-4 text-base'
 };
-const LABEL_SIZE_CLASSES$4 = {
+const LABEL_SIZE_CLASSES$5 = {
     sm: 'text-sm',
     md: 'text-sm',
     lg: 'text-base'
@@ -1911,22 +2052,22 @@ class CxsDatepickerComponent {
     }
     get inputClass() {
         return [
-            BASE_CLASSES$3,
+            BASE_CLASSES$4,
             SIZE_CLASSES$2[this.size],
-            VARIANT_CLASSES$4[this.variant],
+            VARIANT_CLASSES$5[this.variant],
             this.invalid ? INVALID_CLASSES$4 : ''
         ]
             .filter(Boolean)
             .join(' ');
     }
     get wrapperClass() {
-        return WRAPPER_CLASSES$6;
+        return WRAPPER_CLASSES$8;
     }
     get labelClass() {
         return [
-            LABEL_BASE_CLASSES$4,
-            LABEL_SIZE_CLASSES$4[this.size],
-            this.isDisabled ? LABEL_DISABLED_CLASSES$4 : ''
+            LABEL_BASE_CLASSES$5,
+            LABEL_SIZE_CLASSES$5[this.size],
+            this.isDisabled ? LABEL_DISABLED_CLASSES$5 : ''
         ]
             .filter(Boolean)
             .join(' ');
@@ -2185,17 +2326,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: ['document:keydown.escape']
             }] } });
 
-const BASE_CLASSES$2 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+const BASE_CLASSES$3 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
     'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
     'focus-visible:outline-[var(--cxs-color-focus)] focus-visible:border-[var(--cxs-color-focus)] ' +
     'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60';
-const 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 WRAPPER_CLASSES$7 = '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 ERROR_BASE_CLASSES = 'text-[var(--cxs-color-danger)]';
-const VARIANT_CLASSES$3 = {
+const VARIANT_CLASSES$4 = {
     outline: 'bg-[var(--cxs-color-surface)]',
     filled: 'bg-[var(--cxs-color-surface-hover)]'
 };
@@ -2204,7 +2345,7 @@ const SIZE_CLASSES$1 = {
     md: 'h-10 px-3 text-sm',
     lg: 'h-12 px-4 text-base'
 };
-const LABEL_SIZE_CLASSES$3 = {
+const LABEL_SIZE_CLASSES$4 = {
     sm: 'text-sm',
     md: 'text-sm',
     lg: 'text-base'
@@ -2246,22 +2387,22 @@ class CxsInputComponent {
     }
     get inputClass() {
         return [
-            BASE_CLASSES$2,
+            BASE_CLASSES$3,
             SIZE_CLASSES$1[this.size],
-            VARIANT_CLASSES$3[this.variant],
+            VARIANT_CLASSES$4[this.variant],
             this.invalid ? INVALID_CLASSES$3 : ''
         ]
             .filter(Boolean)
             .join(' ');
     }
     get wrapperClass() {
-        return WRAPPER_CLASSES$5;
+        return WRAPPER_CLASSES$7;
     }
     get labelClass() {
         return [
-            LABEL_BASE_CLASSES$3,
-            LABEL_SIZE_CLASSES$3[this.size],
-            this.isDisabled ? LABEL_DISABLED_CLASSES$3 : ''
+            LABEL_BASE_CLASSES$4,
+            LABEL_SIZE_CLASSES$4[this.size],
+            this.isDisabled ? LABEL_DISABLED_CLASSES$4 : ''
         ]
             .filter(Boolean)
             .join(' ');
@@ -2518,15 +2659,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", 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 WRAPPER_CLASSES$6 = '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 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 = {
+const VARIANT_CLASSES$3 = {
     outline: 'bg-[var(--cxs-color-surface)]',
     filled: 'bg-[var(--cxs-color-surface-hover)]'
 };
@@ -2535,7 +2676,7 @@ const CONTROL_SIZE_CLASSES$1 = {
     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 = {
+const LABEL_SIZE_CLASSES$3 = {
     sm: 'text-sm',
     md: 'text-sm',
     lg: 'text-base'
@@ -2596,13 +2737,13 @@ class CxsMultiSelectComponent {
             this.value.length >= this.maxSelections;
     }
     get wrapperClass() {
-        return WRAPPER_CLASSES$4;
+        return WRAPPER_CLASSES$6;
     }
     get labelClass() {
         return [
-            LABEL_BASE_CLASSES$2,
-            LABEL_SIZE_CLASSES$2[this.size],
-            this.isDisabled ? LABEL_DISABLED_CLASSES$2 : ''
+            LABEL_BASE_CLASSES$3,
+            LABEL_SIZE_CLASSES$3[this.size],
+            this.isDisabled ? LABEL_DISABLED_CLASSES$3 : ''
         ]
             .filter(Boolean)
             .join(' ');
@@ -2611,7 +2752,7 @@ class CxsMultiSelectComponent {
         return [
             CONTROL_BASE_CLASSES,
             CONTROL_SIZE_CLASSES$1[this.size],
-            VARIANT_CLASSES$2[this.variant],
+            VARIANT_CLASSES$3[this.variant],
             this.invalid ? INVALID_CLASSES$2 : '',
             this.isDisabled ? CONTROL_DISABLED_CLASSES : ''
         ]
@@ -2810,6 +2951,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+const WRAPPER_CLASSES$5 = 'flex w-full flex-col gap-1.5';
+const HEADER_CLASSES$1 = 'flex items-center justify-between gap-3';
+const LABEL_CLASSES = 'text-sm font-medium text-[var(--cxs-color-on-surface)]';
+const VALUE_CLASSES$1 = 'text-sm text-[var(--cxs-color-on-surface-muted)]';
+const TRACK_BASE_CLASSES$1 = 'relative w-full overflow-hidden rounded-full bg-[var(--cxs-color-surface-hover)]';
+const TRACK_SIZE_CLASSES$1 = {
+    sm: 'h-2',
+    md: 'h-3',
+    lg: 'h-4'
+};
+const FILL_BASE_CLASSES = 'h-full rounded-full transition-[width] duration-300 ease-out';
+const INDETERMINATE_FILL_CLASSES = 'absolute inset-y-0 left-0 w-2/5 rounded-full animate-[cxs-progress-indeterminate_1.4s_ease-in-out_infinite]';
+const FILL_VARIANT_CLASSES = {
+    primary: 'bg-[var(--cxs-color-primary)]',
+    neutral: 'bg-[var(--cxs-color-on-surface-muted)]',
+    danger: 'bg-[var(--cxs-color-danger)]'
+};
+class CxsProgressBarComponent {
+    static nextId = 0;
+    value = 0;
+    max = 100;
+    variant = 'primary';
+    size = 'md';
+    label;
+    showValue = false;
+    indeterminate = false;
+    ariaLabel = 'Progress';
+    labelId = `cxs-progress-bar-label-${++CxsProgressBarComponent.nextId}`;
+    get wrapperClass() {
+        return WRAPPER_CLASSES$5;
+    }
+    get headerClass() {
+        return HEADER_CLASSES$1;
+    }
+    get labelClass() {
+        return LABEL_CLASSES;
+    }
+    get valueClass() {
+        return VALUE_CLASSES$1;
+    }
+    get trackClass() {
+        return [TRACK_BASE_CLASSES$1, TRACK_SIZE_CLASSES$1[this.size]].join(' ');
+    }
+    get fillClass() {
+        return [FILL_BASE_CLASSES, FILL_VARIANT_CLASSES[this.variant]].join(' ');
+    }
+    get indeterminateFillClass() {
+        return [INDETERMINATE_FILL_CLASSES, FILL_VARIANT_CLASSES[this.variant]].join(' ');
+    }
+    get normalizedMax() {
+        return Number.isFinite(this.max) && this.max > 0 ? this.max : 100;
+    }
+    get clampedValue() {
+        if (!Number.isFinite(this.value)) {
+            return 0;
+        }
+        return Math.min(Math.max(this.value, 0), this.normalizedMax);
+    }
+    get progressPercent() {
+        return (this.clampedValue / this.normalizedMax) * 100;
+    }
+    get progressText() {
+        return `${Math.round(this.progressPercent)}%`;
+    }
+    get statusText() {
+        return this.indeterminate ? 'Loading' : this.progressText;
+    }
+    get ariaLabelValue() {
+        return this.label ? null : this.ariaLabel;
+    }
+    get ariaValueNow() {
+        return this.indeterminate ? null : this.clampedValue;
+    }
+    get ariaValueText() {
+        return this.indeterminate ? 'Loading' : this.showValue ? this.progressText : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsProgressBarComponent, isStandalone: true, selector: "cxs-progress-bar", inputs: { value: "value", max: "max", variant: "variant", size: "size", label: "label", showValue: "showValue", indeterminate: "indeterminate", ariaLabel: "ariaLabel" }, ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  @if (label || showValue) {\n    <div [class]=\"headerClass\">\n      @if (label) {\n        <span [id]=\"labelId\" [class]=\"labelClass\">{{ label }}</span>\n      }\n\n      @if (showValue) {\n        <span [class]=\"valueClass\">{{ statusText }}</span>\n      }\n    </div>\n  }\n\n  <div\n    [class]=\"trackClass\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"ariaLabelValue\"\n    [attr.aria-labelledby]=\"label ? labelId : null\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"normalizedMax\"\n    [attr.aria-valuenow]=\"ariaValueNow\"\n    [attr.aria-valuetext]=\"ariaValueText\"\n  >\n    @if (indeterminate) {\n      <div [class]=\"indeterminateFillClass\" aria-hidden=\"true\"></div>\n    } @else {\n      <div [class]=\"fillClass\" [style.width.%]=\"progressPercent\"></div>\n    }\n  </div>\n</div>\n", styles: ["@keyframes cxs-progress-indeterminate{0%{transform:translate(-100%)}50%{transform:translate(60%)}to{transform:translate(250%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-progress-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"wrapperClass\">\n  @if (label || showValue) {\n    <div [class]=\"headerClass\">\n      @if (label) {\n        <span [id]=\"labelId\" [class]=\"labelClass\">{{ label }}</span>\n      }\n\n      @if (showValue) {\n        <span [class]=\"valueClass\">{{ statusText }}</span>\n      }\n    </div>\n  }\n\n  <div\n    [class]=\"trackClass\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"ariaLabelValue\"\n    [attr.aria-labelledby]=\"label ? labelId : null\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"normalizedMax\"\n    [attr.aria-valuenow]=\"ariaValueNow\"\n    [attr.aria-valuetext]=\"ariaValueText\"\n  >\n    @if (indeterminate) {\n      <div [class]=\"indeterminateFillClass\" aria-hidden=\"true\"></div>\n    } @else {\n      <div [class]=\"fillClass\" [style.width.%]=\"progressPercent\"></div>\n    }\n  </div>\n</div>\n", styles: ["@keyframes cxs-progress-indeterminate{0%{transform:translate(-100%)}50%{transform:translate(60%)}to{transform:translate(250%)}}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], showValue: [{
+                type: Input
+            }], indeterminate: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }] } });
+
 class CxsTabLabelDirective {
     templateRef;
     constructor(templateRef) {
@@ -2863,7 +3104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 args: ['content', { static: true }]
             }] } });
 
-const WRAPPER_CLASSES$3 = 'w-full';
+const WRAPPER_CLASSES$4 = '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)]';
@@ -2878,7 +3119,7 @@ class CxsTabsComponent {
     activeIdChange = new EventEmitter();
     panels;
     get wrapperClass() {
-        return WRAPPER_CLASSES$3;
+        return WRAPPER_CLASSES$4;
     }
     get tabListClass() {
         return TAB_LIST_CLASSES;
@@ -2978,7 +3219,7 @@ 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$1 = {
+const LABEL_SIZE_CLASSES$2 = {
     sm: 'text-sm',
     md: 'text-sm',
     lg: 'text-base'
@@ -3037,7 +3278,7 @@ class CxsRadioComponent {
     get labelClass() {
         return [
             LABEL_BASE,
-            LABEL_SIZE_CLASSES$1[this.size],
+            LABEL_SIZE_CLASSES$2[this.size],
             this.isDisabled ? LABEL_DISABLED : ''
         ]
             .filter(Boolean)
@@ -3122,16 +3363,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Output
             }] } });
 
-const BASE_CLASSES$1 = 'w-full appearance-none rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+const BASE_CLASSES$2 = 'w-full appearance-none rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
     'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
     'focus-visible:outline-[var(--cxs-color-focus)] focus-visible:border-[var(--cxs-color-focus)] ' +
     'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60';
-const 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 = {
+const WRAPPER_CLASSES$3 = '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 VARIANT_CLASSES$2 = {
     outline: 'bg-[var(--cxs-color-surface)]',
     filled: 'bg-[var(--cxs-color-surface-hover)]'
 };
@@ -3140,7 +3381,7 @@ 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 = {
+const LABEL_SIZE_CLASSES$1 = {
     sm: 'text-sm',
     md: 'text-sm',
     lg: 'text-base'
@@ -3172,22 +3413,22 @@ class CxsSelectComponent {
     }
     get selectClass() {
         return [
-            BASE_CLASSES$1,
+            BASE_CLASSES$2,
             SIZE_CLASSES[this.size],
-            VARIANT_CLASSES$1[this.variant],
+            VARIANT_CLASSES$2[this.variant],
             this.invalid ? INVALID_CLASSES : ''
         ]
             .filter(Boolean)
             .join(' ');
     }
     get wrapperClass() {
-        return WRAPPER_CLASSES$2;
+        return WRAPPER_CLASSES$3;
     }
     get labelClass() {
         return [
-            LABEL_BASE_CLASSES$1,
-            LABEL_SIZE_CLASSES[this.size],
-            this.isDisabled ? LABEL_DISABLED_CLASSES$1 : ''
+            LABEL_BASE_CLASSES$2,
+            LABEL_SIZE_CLASSES$1[this.size],
+            this.isDisabled ? LABEL_DISABLED_CLASSES$2 : ''
         ]
             .filter(Boolean)
             .join(' ');
@@ -3286,6 +3527,274 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Output
             }] } });
 
+const BASE_CLASSES$1 = 'cxs-skeleton block overflow-hidden bg-[var(--cxs-color-skeleton-base)]';
+const VARIANT_CLASSES$1 = {
+    line: 'rounded-[var(--cxs-radius-md)]',
+    block: 'rounded-[var(--cxs-radius-md)]',
+    circle: 'rounded-full'
+};
+const SIZE_DIMENSIONS = {
+    line: {
+        sm: { width: '100%', height: '0.75rem' },
+        md: { width: '100%', height: '1rem' },
+        lg: { width: '100%', height: '1.25rem' }
+    },
+    block: {
+        sm: { width: '100%', height: '3rem' },
+        md: { width: '100%', height: '4rem' },
+        lg: { width: '100%', height: '5rem' }
+    },
+    circle: {
+        sm: { width: '2rem', height: '2rem' },
+        md: { width: '3rem', height: '3rem' },
+        lg: { width: '4rem', height: '4rem' }
+    }
+};
+class CxsSkeletonComponent {
+    hostClass;
+    variant = 'line';
+    size = 'md';
+    animated = true;
+    width;
+    height;
+    ariaLabel;
+    constructor(hostClass) {
+        this.hostClass = hostClass;
+    }
+    get skeletonClass() {
+        return [
+            BASE_CLASSES$1,
+            VARIANT_CLASSES$1[this.variant],
+            this.animated ? 'cxs-skeleton--animated' : '',
+            this.hostClass
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get resolvedWidth() {
+        return this.width ?? SIZE_DIMENSIONS[this.variant][this.size].width;
+    }
+    get resolvedHeight() {
+        return this.height ?? SIZE_DIMENSIONS[this.variant][this.size].height;
+    }
+    get role() {
+        return this.ariaLabel ? 'status' : null;
+    }
+    get ariaLabelValue() {
+        return this.ariaLabel ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsSkeletonComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CxsSkeletonComponent, isStandalone: true, selector: "cxs-skeleton", inputs: { variant: "variant", size: "size", animated: "animated", width: "width", height: "height", ariaLabel: "ariaLabel" }, ngImport: i0, template: "<div\n  [class]=\"skeletonClass\"\n  [attr.role]=\"role\"\n  [attr.aria-label]=\"ariaLabelValue\"\n  [attr.aria-live]=\"role ? 'polite' : null\"\n  [attr.aria-hidden]=\"role ? null : 'true'\"\n  [style.width]=\"resolvedWidth\"\n  [style.height]=\"resolvedHeight\"\n></div>\n", styles: [":host{display:block}.cxs-skeleton{position:relative}.cxs-skeleton--animated:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,var(--cxs-color-skeleton-highlight),transparent);animation:cxs-skeleton-shimmer 1.5s ease-in-out infinite}@keyframes cxs-skeleton-shimmer{to{transform:translate(100%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsSkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"skeletonClass\"\n  [attr.role]=\"role\"\n  [attr.aria-label]=\"ariaLabelValue\"\n  [attr.aria-live]=\"role ? 'polite' : null\"\n  [attr.aria-hidden]=\"role ? null : 'true'\"\n  [style.width]=\"resolvedWidth\"\n  [style.height]=\"resolvedHeight\"\n></div>\n", styles: [":host{display:block}.cxs-skeleton{position:relative}.cxs-skeleton--animated:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,var(--cxs-color-skeleton-highlight),transparent);animation:cxs-skeleton-shimmer 1.5s ease-in-out infinite}@keyframes cxs-skeleton-shimmer{to{transform:translate(100%)}}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['class']
+                }] }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], animated: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }] } });
+
+const WRAPPER_CLASSES$2 = 'flex w-full flex-col gap-1.5';
+const HEADER_CLASSES = 'flex items-center justify-between gap-3';
+const LABEL_BASE_CLASSES$1 = 'font-medium text-[var(--cxs-color-on-surface)]';
+const LABEL_DISABLED_CLASSES$1 = 'text-[var(--cxs-color-on-surface-muted)]';
+const VALUE_CLASSES = 'text-sm text-[var(--cxs-color-on-surface-muted)]';
+const LABEL_SIZE_CLASSES = {
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-base'
+};
+const INPUT_BASE_CLASSES = 'cxs-slider block w-full appearance-none bg-transparent focus:outline-none ' +
+    'disabled:cursor-not-allowed disabled:opacity-60';
+const INPUT_SIZE_CLASSES = {
+    sm: 'cxs-slider--sm',
+    md: 'cxs-slider--md',
+    lg: 'cxs-slider--lg'
+};
+const INPUT_VARIANT_CLASSES = {
+    primary: 'cxs-slider--primary',
+    danger: 'cxs-slider--danger'
+};
+class CxsSliderComponent {
+    static nextId = 0;
+    value = 0;
+    min = 0;
+    max = 100;
+    step = 1;
+    variant = 'primary';
+    size = 'md';
+    disabled = false;
+    required = false;
+    showValue = false;
+    label;
+    id;
+    name;
+    ariaLabel = 'Slider';
+    ariaDescribedby;
+    valueChange = new EventEmitter();
+    instanceId = `cxs-slider-${CxsSliderComponent.nextId++}`;
+    disabledFromControl = false;
+    onChange = () => { };
+    onTouched = () => { };
+    get isDisabled() {
+        return this.disabled || this.disabledFromControl;
+    }
+    get normalizedMin() {
+        return Number.isFinite(this.min) ? this.min : 0;
+    }
+    get normalizedMax() {
+        if (!Number.isFinite(this.max) || this.max <= this.normalizedMin) {
+            return this.normalizedMin + 100;
+        }
+        return this.max;
+    }
+    get normalizedStep() {
+        return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;
+    }
+    get clampedValue() {
+        if (!Number.isFinite(this.value)) {
+            return this.normalizedMin;
+        }
+        return Math.min(Math.max(this.value, this.normalizedMin), this.normalizedMax);
+    }
+    get progressPercent() {
+        return (((this.clampedValue - this.normalizedMin) / (this.normalizedMax - this.normalizedMin)) *
+            100);
+    }
+    get sliderClass() {
+        return [
+            INPUT_BASE_CLASSES,
+            INPUT_SIZE_CLASSES[this.size],
+            INPUT_VARIANT_CLASSES[this.variant]
+        ].join(' ');
+    }
+    get wrapperClass() {
+        return WRAPPER_CLASSES$2;
+    }
+    get headerClass() {
+        return HEADER_CLASSES;
+    }
+    get labelClass() {
+        return [
+            LABEL_BASE_CLASSES$1,
+            LABEL_SIZE_CLASSES[this.size],
+            this.isDisabled ? LABEL_DISABLED_CLASSES$1 : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get valueClass() {
+        return VALUE_CLASSES;
+    }
+    get inputId() {
+        return this.id ?? this.instanceId;
+    }
+    get labelId() {
+        return this.label ? `${this.inputId}-label` : null;
+    }
+    get ariaLabelValue() {
+        return this.label ? null : this.ariaLabel;
+    }
+    get ariaDescribedbyValue() {
+        const tokens = [this.ariaDescribedby].filter(Boolean);
+        return tokens.length > 0 ? tokens.join(' ') : null;
+    }
+    get valueText() {
+        const displayValue = Number.isInteger(this.clampedValue)
+            ? `${this.clampedValue}`
+            : `${this.clampedValue}`;
+        return displayValue;
+    }
+    get fillColor() {
+        return this.variant === 'danger'
+            ? 'var(--cxs-color-danger)'
+            : 'var(--cxs-color-primary)';
+    }
+    writeValue(value) {
+        this.value = value ?? this.normalizedMin;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromControl = isDisabled;
+    }
+    onInput(event) {
+        const target = event.target;
+        const nextValue = Number.parseFloat(target.value);
+        const value = Number.isFinite(nextValue) ? nextValue : this.normalizedMin;
+        this.value = value;
+        this.onChange(value);
+        this.valueChange.emit(value);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsSliderComponent, isStandalone: true, selector: "cxs-slider", inputs: { value: "value", min: "min", max: "max", step: "step", variant: "variant", size: "size", disabled: "disabled", required: "required", showValue: "showValue", label: "label", id: "id", name: "name", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CxsSliderComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div [class]=\"wrapperClass\">\n  @if (label || showValue) {\n    <div [class]=\"headerClass\">\n      @if (label) {\n        <label [for]=\"inputId\" [id]=\"labelId\" [class]=\"labelClass\">{{ label }}</label>\n      }\n\n      @if (showValue) {\n        <span [class]=\"valueClass\">{{ valueText }}</span>\n      }\n    </div>\n  }\n\n  <input\n    type=\"range\"\n    [class]=\"sliderClass\"\n    [id]=\"inputId\"\n    [name]=\"name || null\"\n    [disabled]=\"isDisabled\"\n    [required]=\"required\"\n    [value]=\"clampedValue\"\n    [attr.min]=\"normalizedMin\"\n    [attr.max]=\"normalizedMax\"\n    [attr.step]=\"normalizedStep\"\n    [attr.aria-label]=\"ariaLabelValue\"\n    [attr.aria-labelledby]=\"labelId\"\n    [attr.aria-describedby]=\"ariaDescribedbyValue\"\n    [attr.aria-valuetext]=\"valueText\"\n    [style.--cxs-slider-percent]=\"progressPercent + '%'\"\n    [style.--cxs-slider-fill]=\"fillColor\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n</div>\n", styles: [".cxs-slider{--cxs-slider-track-color: var(--cxs-color-surface-hover);--cxs-slider-thumb-color: var(--cxs-color-surface);cursor:pointer}.cxs-slider--sm{--cxs-slider-track-height: .375rem;--cxs-slider-thumb-size: 1rem}.cxs-slider--md{--cxs-slider-track-height: .5rem;--cxs-slider-thumb-size: 1.125rem}.cxs-slider--lg{--cxs-slider-track-height: .625rem;--cxs-slider-thumb-size: 1.25rem}.cxs-slider::-webkit-slider-runnable-track{height:var(--cxs-slider-track-height);border-radius:9999px;background:linear-gradient(to right,var(--cxs-slider-fill) 0%,var(--cxs-slider-fill) var(--cxs-slider-percent),var(--cxs-slider-track-color) var(--cxs-slider-percent),var(--cxs-slider-track-color) 100%)}.cxs-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--cxs-slider-thumb-size);height:var(--cxs-slider-thumb-size);margin-top:calc((var(--cxs-slider-track-height) - var(--cxs-slider-thumb-size)) / 2);border:2px solid var(--cxs-slider-fill);border-radius:9999px;background:var(--cxs-slider-thumb-color);box-shadow:var(--cxs-shadow-sm)}.cxs-slider::-moz-range-track{height:var(--cxs-slider-track-height);border:0;border-radius:9999px;background:var(--cxs-slider-track-color)}.cxs-slider::-moz-range-progress{height:var(--cxs-slider-track-height);border-radius:9999px;background:var(--cxs-slider-fill)}.cxs-slider::-moz-range-thumb{width:var(--cxs-slider-thumb-size);height:var(--cxs-slider-thumb-size);border:2px solid var(--cxs-slider-fill);border-radius:9999px;background:var(--cxs-slider-thumb-color);box-shadow:var(--cxs-shadow-sm)}.cxs-slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--cxs-color-focus);outline-offset:2px}.cxs-slider:focus-visible::-moz-range-thumb{outline:2px solid var(--cxs-color-focus);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsSliderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-slider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CxsSliderComponent),
+                            multi: true
+                        }
+                    ], template: "<div [class]=\"wrapperClass\">\n  @if (label || showValue) {\n    <div [class]=\"headerClass\">\n      @if (label) {\n        <label [for]=\"inputId\" [id]=\"labelId\" [class]=\"labelClass\">{{ label }}</label>\n      }\n\n      @if (showValue) {\n        <span [class]=\"valueClass\">{{ valueText }}</span>\n      }\n    </div>\n  }\n\n  <input\n    type=\"range\"\n    [class]=\"sliderClass\"\n    [id]=\"inputId\"\n    [name]=\"name || null\"\n    [disabled]=\"isDisabled\"\n    [required]=\"required\"\n    [value]=\"clampedValue\"\n    [attr.min]=\"normalizedMin\"\n    [attr.max]=\"normalizedMax\"\n    [attr.step]=\"normalizedStep\"\n    [attr.aria-label]=\"ariaLabelValue\"\n    [attr.aria-labelledby]=\"labelId\"\n    [attr.aria-describedby]=\"ariaDescribedbyValue\"\n    [attr.aria-valuetext]=\"valueText\"\n    [style.--cxs-slider-percent]=\"progressPercent + '%'\"\n    [style.--cxs-slider-fill]=\"fillColor\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n</div>\n", styles: [".cxs-slider{--cxs-slider-track-color: var(--cxs-color-surface-hover);--cxs-slider-thumb-color: var(--cxs-color-surface);cursor:pointer}.cxs-slider--sm{--cxs-slider-track-height: .375rem;--cxs-slider-thumb-size: 1rem}.cxs-slider--md{--cxs-slider-track-height: .5rem;--cxs-slider-thumb-size: 1.125rem}.cxs-slider--lg{--cxs-slider-track-height: .625rem;--cxs-slider-thumb-size: 1.25rem}.cxs-slider::-webkit-slider-runnable-track{height:var(--cxs-slider-track-height);border-radius:9999px;background:linear-gradient(to right,var(--cxs-slider-fill) 0%,var(--cxs-slider-fill) var(--cxs-slider-percent),var(--cxs-slider-track-color) var(--cxs-slider-percent),var(--cxs-slider-track-color) 100%)}.cxs-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--cxs-slider-thumb-size);height:var(--cxs-slider-thumb-size);margin-top:calc((var(--cxs-slider-track-height) - var(--cxs-slider-thumb-size)) / 2);border:2px solid var(--cxs-slider-fill);border-radius:9999px;background:var(--cxs-slider-thumb-color);box-shadow:var(--cxs-shadow-sm)}.cxs-slider::-moz-range-track{height:var(--cxs-slider-track-height);border:0;border-radius:9999px;background:var(--cxs-slider-track-color)}.cxs-slider::-moz-range-progress{height:var(--cxs-slider-track-height);border-radius:9999px;background:var(--cxs-slider-fill)}.cxs-slider::-moz-range-thumb{width:var(--cxs-slider-thumb-size);height:var(--cxs-slider-thumb-size);border:2px solid var(--cxs-slider-fill);border-radius:9999px;background:var(--cxs-slider-thumb-color);box-shadow:var(--cxs-shadow-sm)}.cxs-slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--cxs-color-focus);outline-offset:2px}.cxs-slider:focus-visible::-moz-range-thumb{outline:2px solid var(--cxs-color-focus);outline-offset:2px}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], showValue: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaDescribedby: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 const WRAPPER_BASE_CLASSES = 'w-full overflow-hidden';
 const WRAPPER_BORDERED_CLASSES = 'rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)]';
 const TABLE_BASE_CLASSES = 'w-full border-collapse text-sm text-[var(--cxs-color-on-surface)]';
@@ -3883,5 +4392,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsActionMenuComponent, 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 };
+export { CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsActionMenuComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsDataTableCellDirective, CxsDataTableComponent, CxsDatepickerComponent, CxsDialogComponent, CxsIconComponent, CxsInputComponent, CxsMenubarComponent, CxsMultiSelectComponent, CxsProgressBarComponent, CxsRadioComponent, CxsSelectComponent, CxsSkeletonComponent, CxsSliderComponent, CxsTabLabelDirective, CxsTabPanelComponent, CxsTableComponent, CxsTabsComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent };
 //# sourceMappingURL=cerxos-ui.mjs.map