@eagami/ui 0.1.0 → 0.3.0

package/fesm2022/eagami-ui.mjs

@@ -1,28 +1,397 @@
 import { NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, computed, ChangeDetectionStrategy, Component, ViewEncapsulation, model, signal, forwardRef, viewChild, effect, HostListener, inject } from '@angular/core';
+import { viewChild, input, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, model, forwardRef, effect, HostListener, inject, Injectable, ElementRef, Renderer2, Directive } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
+class AvatarEditorComponent {
+    canvasEl = viewChild('canvasEl', ...(ngDevMode ? [{ debugName: "canvasEl" }] : /* istanbul ignore next */ []));
+    fileInputEl = viewChild('fileInputEl', ...(ngDevMode ? [{ debugName: "fileInputEl" }] : /* istanbul ignore next */ []));
+    shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    canvasSize = input(200, ...(ngDevMode ? [{ debugName: "canvasSize" }] : /* istanbul ignore next */ []));
+    currentSrc = input(undefined, ...(ngDevMode ? [{ debugName: "currentSrc" }] : /* istanbul ignore next */ []));
+    accept = input('image/*', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    maxFileSize = input(5 * 1024 * 1024, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ [])); // 5 MB
+    minZoom = input(1, ...(ngDevMode ? [{ debugName: "minZoom" }] : /* istanbul ignore next */ []));
+    maxZoom = input(3, ...(ngDevMode ? [{ debugName: "maxZoom" }] : /* istanbul ignore next */ []));
+    exportQuality = input(0.92, ...(ngDevMode ? [{ debugName: "exportQuality" }] : /* istanbul ignore next */ []));
+    exportType = input('image/png', ...(ngDevMode ? [{ debugName: "exportType" }] : /* istanbul ignore next */ []));
+    cropped = output();
+    fileError = output();
+    hasImage = signal(false, ...(ngDevMode ? [{ debugName: "hasImage" }] : /* istanbul ignore next */ []));
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
+    zoom = signal(1, ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    image = null;
+    offsetX = 0;
+    offsetY = 0;
+    dragStartX = 0;
+    dragStartY = 0;
+    isDragging = false;
+    initialOffsetX = 0;
+    initialOffsetY = 0;
+    hostClasses = computed(() => ({
+        [`ea-avatar-editor--${this.shape()}`]: true,
+        'ea-avatar-editor--has-image': this.hasImage(),
+        'ea-avatar-editor--drag-over': this.isDragOver(),
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    boundWheel = (e) => this.onWheel(e);
+    ngOnDestroy() {
+        const canvas = this.canvasEl()?.nativeElement;
+        canvas?.removeEventListener('wheel', this.boundWheel);
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(true);
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+        const file = event.dataTransfer?.files[0];
+        if (file)
+            this.loadFile(file);
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        if (file)
+            this.loadFile(file);
+        input.value = '';
+    }
+    openFilePicker() {
+        this.fileInputEl()?.nativeElement.click();
+    }
+    onMouseDown(event) {
+        if (!this.hasImage())
+            return;
+        event.preventDefault();
+        this.isDragging = true;
+        this.dragStartX = event.clientX;
+        this.dragStartY = event.clientY;
+        this.initialOffsetX = this.offsetX;
+        this.initialOffsetY = this.offsetY;
+        document.addEventListener('mousemove', this.onMouseMoveBound);
+        document.addEventListener('mouseup', this.onMouseUpBound);
+    }
+    onTouchStart(event) {
+        if (!this.hasImage() || event.touches.length !== 1)
+            return;
+        const touch = event.touches[0];
+        this.isDragging = true;
+        this.dragStartX = touch.clientX;
+        this.dragStartY = touch.clientY;
+        this.initialOffsetX = this.offsetX;
+        this.initialOffsetY = this.offsetY;
+        document.addEventListener('touchmove', this.onTouchMoveBound, { passive: false });
+        document.addEventListener('touchend', this.onTouchEndBound);
+    }
+    onMouseMoveBound = (e) => this.onMouseMove(e);
+    onMouseUpBound = () => this.onMouseUp();
+    onTouchMoveBound = (e) => this.onTouchMove(e);
+    onTouchEndBound = () => this.onTouchEnd();
+    onMouseMove(event) {
+        if (!this.isDragging)
+            return;
+        const dx = event.clientX - this.dragStartX;
+        const dy = event.clientY - this.dragStartY;
+        this.offsetX = this.initialOffsetX + dx;
+        this.offsetY = this.initialOffsetY + dy;
+        this.clampOffset();
+        this.draw();
+    }
+    onMouseUp() {
+        this.isDragging = false;
+        document.removeEventListener('mousemove', this.onMouseMoveBound);
+        document.removeEventListener('mouseup', this.onMouseUpBound);
+    }
+    onTouchMove(event) {
+        if (!this.isDragging || event.touches.length !== 1)
+            return;
+        event.preventDefault();
+        const touch = event.touches[0];
+        const dx = touch.clientX - this.dragStartX;
+        const dy = touch.clientY - this.dragStartY;
+        this.offsetX = this.initialOffsetX + dx;
+        this.offsetY = this.initialOffsetY + dy;
+        this.clampOffset();
+        this.draw();
+    }
+    onTouchEnd() {
+        this.isDragging = false;
+        document.removeEventListener('touchmove', this.onTouchMoveBound);
+        document.removeEventListener('touchend', this.onTouchEndBound);
+    }
+    onWheel(event) {
+        if (!this.hasImage())
+            return;
+        event.preventDefault();
+        const delta = event.deltaY > 0 ? -0.1 : 0.1;
+        this.setZoom(this.zoom() + delta);
+    }
+    setZoom(value) {
+        const clamped = Math.min(this.maxZoom(), Math.max(this.minZoom(), value));
+        this.zoom.set(Math.round(clamped * 100) / 100);
+        this.clampOffset();
+        this.draw();
+    }
+    onZoomInput(event) {
+        const value = parseFloat(event.target.value);
+        this.setZoom(value);
+    }
+    removeImage() {
+        this.image = null;
+        this.hasImage.set(false);
+        this.zoom.set(1);
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.clearCanvas();
+    }
+    exportCrop() {
+        if (!this.image)
+            return;
+        const size = this.canvasSize();
+        const offscreen = document.createElement('canvas');
+        offscreen.width = size;
+        offscreen.height = size;
+        const ctx = offscreen.getContext('2d');
+        if (this.shape() === 'circle') {
+            ctx.beginPath();
+            ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
+            ctx.closePath();
+            ctx.clip();
+        }
+        const { drawX, drawY, drawW, drawH } = this.getDrawParams();
+        ctx.drawImage(this.image, drawX, drawY, drawW, drawH);
+        offscreen.toBlob(blob => {
+            if (blob) {
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    this.cropped.emit({ blob, dataUrl: reader.result });
+                };
+                reader.readAsDataURL(blob);
+            }
+        }, this.exportType(), this.exportQuality());
+    }
+    loadFile(file) {
+        if (!file.type.startsWith('image/')) {
+            this.fileError.emit('File must be an image');
+            return;
+        }
+        if (file.size > this.maxFileSize()) {
+            const maxMb = Math.round(this.maxFileSize() / (1024 * 1024));
+            this.fileError.emit(`File exceeds ${maxMb} MB limit`);
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = e => {
+            const img = new Image();
+            img.onload = () => {
+                this.image = img;
+                this.hasImage.set(true);
+                this.zoom.set(1);
+                this.centerImage();
+                // Defer draw until Angular has rendered the canvas (@if block)
+                requestAnimationFrame(() => {
+                    this.draw();
+                    const canvas = this.canvasEl()?.nativeElement;
+                    canvas?.removeEventListener('wheel', this.boundWheel);
+                    canvas?.addEventListener('wheel', this.boundWheel, { passive: false });
+                });
+            };
+            img.src = e.target?.result;
+        };
+        reader.readAsDataURL(file);
+    }
+    centerImage() {
+        if (!this.image)
+            return;
+        const size = this.canvasSize();
+        const scale = this.getScale();
+        const drawW = this.image.width * scale;
+        const drawH = this.image.height * scale;
+        this.offsetX = (size - drawW) / 2;
+        this.offsetY = (size - drawH) / 2;
+    }
+    getScale() {
+        if (!this.image)
+            return 1;
+        const size = this.canvasSize();
+        const baseScale = Math.max(size / this.image.width, size / this.image.height);
+        return baseScale * this.zoom();
+    }
+    getDrawParams() {
+        if (!this.image)
+            return { drawX: 0, drawY: 0, drawW: 0, drawH: 0 };
+        const scale = this.getScale();
+        return {
+            drawX: this.offsetX,
+            drawY: this.offsetY,
+            drawW: this.image.width * scale,
+            drawH: this.image.height * scale,
+        };
+    }
+    clampOffset() {
+        if (!this.image)
+            return;
+        const size = this.canvasSize();
+        const { drawW, drawH } = this.getDrawParams();
+        this.offsetX = Math.min(0, Math.max(size - drawW, this.offsetX));
+        this.offsetY = Math.min(0, Math.max(size - drawH, this.offsetY));
+    }
+    draw() {
+        const canvas = this.canvasEl()?.nativeElement;
+        if (!canvas || !this.image)
+            return;
+        const ctx = canvas.getContext('2d');
+        const size = this.canvasSize();
+        canvas.width = size;
+        canvas.height = size;
+        ctx.clearRect(0, 0, size, size);
+        const { drawX, drawY, drawW, drawH } = this.getDrawParams();
+        ctx.drawImage(this.image, drawX, drawY, drawW, drawH);
+        // Draw overlay mask
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+        ctx.fillRect(0, 0, size, size);
+        ctx.globalCompositeOperation = 'destination-out';
+        if (this.shape() === 'circle') {
+            ctx.beginPath();
+            ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        else {
+            ctx.fillRect(0, 0, size, size);
+        }
+        ctx.globalCompositeOperation = 'destination-over';
+        ctx.drawImage(this.image, drawX, drawY, drawW, drawH);
+        ctx.globalCompositeOperation = 'source-over';
+    }
+    clearCanvas() {
+        const canvas = this.canvasEl()?.nativeElement;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AvatarEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AvatarEditorComponent, isStandalone: true, selector: "ea-avatar-editor", inputs: { shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, canvasSize: { classPropertyName: "canvasSize", publicName: "canvasSize", isSignal: true, isRequired: false, transformFunction: null }, currentSrc: { classPropertyName: "currentSrc", publicName: "currentSrc", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, exportQuality: { classPropertyName: "exportQuality", publicName: "exportQuality", isSignal: true, isRequired: false, transformFunction: null }, exportType: { classPropertyName: "exportType", publicName: "exportType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropped: "cropped", fileError: "fileError" }, viewQueries: [{ propertyName: "canvasEl", first: true, predicate: ["canvasEl"], descendants: true, isSignal: true }, { propertyName: "fileInputEl", first: true, predicate: ["fileInputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ea-avatar-editor\"\n  [ngClass]=\"hostClasses()\">\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-avatar-editor__file-input\"\n    [accept]=\"accept()\"\n    (change)=\"onFileSelected($event)\" />\n\n  @if (!hasImage()) {\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__dropzone\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (click)=\"openFilePicker()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <svg\n        class=\"ea-avatar-editor__upload-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"32\"\n        height=\"32\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\">\n        <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n        <polyline points=\"17 8 12 3 7 8\" />\n        <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n      </svg>\n      <span class=\"ea-avatar-editor__dropzone-text\">\n        Drop image or click to upload\n      </span>\n    </button>\n  }\n\n  @if (hasImage()) {\n    <div class=\"ea-avatar-editor__preview\">\n      <canvas\n        #canvasEl\n        class=\"ea-avatar-editor__canvas\"\n        [width]=\"canvasSize()\"\n        [height]=\"canvasSize()\"\n        (mousedown)=\"onMouseDown($event)\"\n        (touchstart)=\"onTouchStart($event)\"></canvas>\n\n      <div class=\"ea-avatar-editor__controls\">\n        <button\n          type=\"button\"\n          class=\"ea-avatar-editor__zoom-btn\"\n          aria-label=\"Zoom out\"\n          [disabled]=\"zoom() <= minZoom()\"\n          (click)=\"setZoom(zoom() - 0.1)\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n          </svg>\n        </button>\n\n        <input\n          type=\"range\"\n          class=\"ea-avatar-editor__zoom-slider\"\n          [min]=\"minZoom()\"\n          [max]=\"maxZoom()\"\n          step=\"0.01\"\n          [value]=\"zoom()\"\n          aria-label=\"Zoom\"\n          (input)=\"onZoomInput($event)\" />\n\n        <button\n          type=\"button\"\n          class=\"ea-avatar-editor__zoom-btn\"\n          aria-label=\"Zoom in\"\n          [disabled]=\"zoom() >= maxZoom()\"\n          (click)=\"setZoom(zoom() + 0.1)\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n            <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"ea-avatar-editor__actions\">\n        <button\n          type=\"button\"\n          class=\"ea-avatar-editor__action-btn ea-avatar-editor__action-btn--secondary\"\n          (click)=\"openFilePicker()\">\n          Change\n        </button>\n        <button\n          type=\"button\"\n          class=\"ea-avatar-editor__action-btn ea-avatar-editor__action-btn--secondary\"\n          (click)=\"removeImage()\">\n          Remove\n        </button>\n        <button\n          type=\"button\"\n          class=\"ea-avatar-editor__action-btn ea-avatar-editor__action-btn--primary\"\n          (click)=\"exportCrop()\">\n          Apply\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor__preview{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.ea-avatar-editor__canvas{border-radius:var(--radius-lg);cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor--circle .ea-avatar-editor__canvas{border-radius:var(--radius-full)}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__zoom-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__zoom-btn:hover:not(:disabled){border-color:var(--color-border-focus);color:var(--color-text-primary)}.ea-avatar-editor__zoom-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__zoom-btn:disabled{opacity:.4;cursor:not-allowed}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__actions{display:flex;gap:var(--space-2)}.ea-avatar-editor__action-btn{padding:var(--space-1-5) var(--space-3);font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border:var(--border-width-thin) solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__action-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__action-btn--primary{background-color:var(--color-primary-600);color:var(--color-neutral-0)}.ea-avatar-editor__action-btn--primary:hover{background-color:var(--color-primary-700)}.ea-avatar-editor__action-btn--secondary{border-color:var(--color-border-default);background-color:var(--color-bg-base);color:var(--color-text-secondary)}.ea-avatar-editor__action-btn--secondary:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-muted);color:var(--color-text-primary)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AvatarEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ea-avatar-editor', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-avatar-editor\"\n  [ngClass]=\"hostClasses()\">\n\n  <input\n    #fileInputEl\n    type=\"file\"\n    class=\"ea-avatar-editor__file-input\"\n    [accept]=\"accept()\"\n    (change)=\"onFileSelected($event)\" />\n\n  @if (!hasImage()) {\n    <button\n      type=\"button\"\n      class=\"ea-avatar-editor__dropzone\"\n      [style.width.px]=\"canvasSize()\"\n      [style.height.px]=\"canvasSize()\"\n      (click)=\"openFilePicker()\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n      (drop)=\"onDrop($event)\">\n      <svg\n        class=\"ea-avatar-editor__upload-icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"32\"\n        height=\"32\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\">\n        <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n        <polyline points=\"17 8 12 3 7 8\" />\n        <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n      </svg>\n      <span class=\"ea-avatar-editor__dropzone-text\">\n        Drop image or click to upload\n      </span>\n    </button>\n  }\n\n  @if (hasImage()) {\n    <div class=\"ea-avatar-editor__preview\">\n      <canvas\n        #canvasEl\n        class=\"ea-avatar-editor__canvas\"\n        [width]=\"canvasSize()\"\n        [height]=\"canvasSize()\"\n        (mousedown)=\"onMouseDown($event)\"\n        (touchstart)=\"onTouchStart($event)\"></canvas>\n\n      <div class=\"ea-avatar-editor__controls\">\n        <button\n          type=\"button\"\n          class=\"ea-avatar-editor__zoom-btn\"\n          aria-label=\"Zoom out\"\n          [disabled]=\"zoom() <= minZoom()\"\n          (click)=\"setZoom(zoom() - 0.1)\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n          </svg>\n        </button>\n\n        <input\n          type=\"range\"\n          class=\"ea-avatar-editor__zoom-slider\"\n          [min]=\"minZoom()\"\n          [max]=\"maxZoom()\"\n          step=\"0.01\"\n          [value]=\"zoom()\"\n          aria-label=\"Zoom\"\n          (input)=\"onZoomInput($event)\" />\n\n        <button\n          type=\"button\"\n          class=\"ea-avatar-editor__zoom-btn\"\n          aria-label=\"Zoom in\"\n          [disabled]=\"zoom() >= maxZoom()\"\n          (click)=\"setZoom(zoom() + 0.1)\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n            <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"ea-avatar-editor__actions\">\n        <button\n          type=\"button\"\n          class=\"ea-avatar-editor__action-btn ea-avatar-editor__action-btn--secondary\"\n          (click)=\"openFilePicker()\">\n          Change\n        </button>\n        <button\n          type=\"button\"\n          class=\"ea-avatar-editor__action-btn ea-avatar-editor__action-btn--secondary\"\n          (click)=\"removeImage()\">\n          Remove\n        </button>\n        <button\n          type=\"button\"\n          class=\"ea-avatar-editor__action-btn ea-avatar-editor__action-btn--primary\"\n          (click)=\"exportCrop()\">\n          Apply\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".ea-avatar-editor{display:inline-flex;flex-direction:column;gap:var(--space-3);font-family:var(--font-family-sans)}.ea-avatar-editor__file-input{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;border:0;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.ea-avatar-editor__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);border:2px dashed var(--color-border-default);border-radius:var(--radius-lg);background-color:var(--color-bg-subtle);color:var(--color-text-tertiary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__dropzone:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-avatar-editor__dropzone:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor--drag-over .ea-avatar-editor__dropzone{border-color:var(--color-primary-500);background-color:var(--color-primary-50);color:var(--color-primary-600)}.ea-avatar-editor--circle .ea-avatar-editor__dropzone{border-radius:var(--radius-full)}.ea-avatar-editor__upload-icon{opacity:.6}.ea-avatar-editor__dropzone-text{text-align:center}.ea-avatar-editor__preview{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.ea-avatar-editor__canvas{border-radius:var(--radius-lg);cursor:grab}.ea-avatar-editor__canvas:active{cursor:grabbing}.ea-avatar-editor--circle .ea-avatar-editor__canvas{border-radius:var(--radius-full)}.ea-avatar-editor__controls{display:flex;align-items:center;gap:var(--space-2)}.ea-avatar-editor__zoom-btn{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__zoom-btn:hover:not(:disabled){border-color:var(--color-border-focus);color:var(--color-text-primary)}.ea-avatar-editor__zoom-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__zoom-btn:disabled{opacity:.4;cursor:not-allowed}.ea-avatar-editor__zoom-slider{width:7rem;height:4px;border-radius:var(--radius-full);background:var(--color-neutral-200);appearance:none;cursor:pointer}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);appearance:none;cursor:grab}.ea-avatar-editor__zoom-slider::-webkit-slider-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider::-moz-range-thumb{width:1rem;height:1rem;border:2px solid var(--color-primary-500);border-radius:var(--radius-full);background:var(--color-bg-base);cursor:grab}.ea-avatar-editor__zoom-slider::-moz-range-thumb:active{cursor:grabbing}.ea-avatar-editor__zoom-slider:focus-visible{outline:none}.ea-avatar-editor__zoom-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__actions{display:flex;gap:var(--space-2)}.ea-avatar-editor__action-btn{padding:var(--space-1-5) var(--space-3);font-family:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border:var(--border-width-thin) solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-colors)}.ea-avatar-editor__action-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-avatar-editor__action-btn--primary{background-color:var(--color-primary-600);color:var(--color-neutral-0)}.ea-avatar-editor__action-btn--primary:hover{background-color:var(--color-primary-700)}.ea-avatar-editor__action-btn--secondary{border-color:var(--color-border-default);background-color:var(--color-bg-base);color:var(--color-text-secondary)}.ea-avatar-editor__action-btn--secondary:hover{border-color:var(--color-border-focus);background-color:var(--color-bg-muted);color:var(--color-text-primary)}\n"] }]
+        }], propDecorators: { canvasEl: [{ type: i0.ViewChild, args: ['canvasEl', { isSignal: true }] }], fileInputEl: [{ type: i0.ViewChild, args: ['fileInputEl', { isSignal: true }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], canvasSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "canvasSize", required: false }] }], currentSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSrc", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], minZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "minZoom", required: false }] }], maxZoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxZoom", required: false }] }], exportQuality: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportQuality", required: false }] }], exportType: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportType", required: false }] }], cropped: [{ type: i0.Output, args: ["cropped"] }], fileError: [{ type: i0.Output, args: ["fileError"] }] } });
+
+class UserIconComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UserIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: UserIconComponent, isStandalone: true, selector: "ea-icon-user", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+      <circle
+        cx="12"
+        cy="7"
+        r="4" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UserIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ea-icon-user',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: inline-flex;' },
+                    template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+      <circle
+        cx="12"
+        cy="7"
+        r="4" />
+    </svg>
+  `,
+                }]
+        }] });
+
+class AvatarComponent {
+    src = input(undefined, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    initials = input(undefined, ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => ({
+        [`ea-avatar--${this.size()}`]: true,
+        [`ea-avatar--${this.shape()}`]: true,
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    showImage = computed(() => !!this.src(), ...(ngDevMode ? [{ debugName: "showImage" }] : /* istanbul ignore next */ []));
+    showInitials = computed(() => !this.src() && !!this.initials(), ...(ngDevMode ? [{ debugName: "showInitials" }] : /* istanbul ignore next */ []));
+    showFallback = computed(() => !this.src() && !this.initials(), ...(ngDevMode ? [{ debugName: "showFallback" }] : /* istanbul ignore next */ []));
+    handleImageError(event) {
+        event.target.style.display = 'none';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AvatarComponent, isStandalone: true, selector: "ea-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-avatar\"\n  [ngClass]=\"hostClasses()\"\n  [attr.aria-label]=\"alt() || null\"\n  role=\"img\">\n  @if (showImage()) {\n    <img\n      class=\"ea-avatar__image\"\n      [src]=\"src()\"\n      [alt]=\"alt()\"\n      (error)=\"handleImageError($event)\" />\n  }\n  @if (showInitials()) {\n    <span class=\"ea-avatar__initials\">{{ initials() }}</span>\n  }\n  @if (showFallback()) {\n    <ea-icon-user class=\"ea-avatar__fallback\" />\n  }\n</div>\n", styles: [".ea-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background-color:var(--color-bg-muted);color:var(--color-text-secondary);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium)}.ea-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}.ea-avatar--sm{width:2rem;height:2rem;font-size:var(--font-size-sm)}.ea-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--font-size-md)}.ea-avatar--lg{width:3rem;height:3rem;font-size:var(--font-size-lg)}.ea-avatar--xl{width:4rem;height:4rem;font-size:var(--font-size-xl)}.ea-avatar--circle{border-radius:var(--radius-full)}.ea-avatar--square{border-radius:var(--radius-md)}.ea-avatar__image{width:100%;height:100%;object-fit:cover}.ea-avatar__initials{text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-none)}.ea-avatar__fallback{width:60%;height:60%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UserIconComponent, selector: "ea-icon-user" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ea-avatar', imports: [NgClass, UserIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-avatar\"\n  [ngClass]=\"hostClasses()\"\n  [attr.aria-label]=\"alt() || null\"\n  role=\"img\">\n  @if (showImage()) {\n    <img\n      class=\"ea-avatar__image\"\n      [src]=\"src()\"\n      [alt]=\"alt()\"\n      (error)=\"handleImageError($event)\" />\n  }\n  @if (showInitials()) {\n    <span class=\"ea-avatar__initials\">{{ initials() }}</span>\n  }\n  @if (showFallback()) {\n    <ea-icon-user class=\"ea-avatar__fallback\" />\n  }\n</div>\n", styles: [".ea-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background-color:var(--color-bg-muted);color:var(--color-text-secondary);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium)}.ea-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--font-size-xs)}.ea-avatar--sm{width:2rem;height:2rem;font-size:var(--font-size-sm)}.ea-avatar--md{width:2.5rem;height:2.5rem;font-size:var(--font-size-md)}.ea-avatar--lg{width:3rem;height:3rem;font-size:var(--font-size-lg)}.ea-avatar--xl{width:4rem;height:4rem;font-size:var(--font-size-xl)}.ea-avatar--circle{border-radius:var(--radius-full)}.ea-avatar--square{border-radius:var(--radius-md)}.ea-avatar__image{width:100%;height:100%;object-fit:cover}.ea-avatar__initials{text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);line-height:var(--line-height-none)}.ea-avatar__fallback{width:60%;height:60%}\n"] }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }] } });
+
+class BadgeComponent {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => ({
+        [`ea-badge--${this.variant()}`]: true,
+        [`ea-badge--${this.size()}`]: true,
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: BadgeComponent, isStandalone: true, selector: "ea-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n  class=\"ea-badge\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n</span>\n", styles: [".ea-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;border-radius:var(--radius-full)}.ea-badge--sm{padding:var(--space-0-5) var(--space-2);font-size:var(--font-size-xs)}.ea-badge--md{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-xs)}.ea-badge--lg{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm)}.ea-badge--default{background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-badge--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-badge--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-badge--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-badge--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ea-badge', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span\n  class=\"ea-badge\"\n  [ngClass]=\"hostClasses()\">\n  <ng-content />\n</span>\n", styles: [".ea-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;border-radius:var(--radius-full)}.ea-badge--sm{padding:var(--space-0-5) var(--space-2);font-size:var(--font-size-xs)}.ea-badge--md{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-xs)}.ea-badge--lg{padding:var(--space-1) var(--space-3);font-size:var(--font-size-sm)}.ea-badge--default{background-color:var(--color-bg-muted);color:var(--color-text-secondary)}.ea-badge--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-badge--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-badge--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-badge--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
 class ButtonComponent {
     // Inputs
-    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
-    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     // Output
     clicked = output();
     // Derived
-    isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-button--${this.variant()}`]: true,
         [`ea-button--${this.size()}`]: true,
         'ea-button--full-width': this.fullWidth(),
         'ea-button--loading': this.loading(),
         'ea-button--disabled': this.isDisabled(),
-    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     handleClick(event) {
         if (this.isDisabled()) {
             event.preventDefault();
@@ -30,55 +399,58 @@ class ButtonComponent {
         }
         this.clicked.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ButtonComponent, isStandalone: true, selector: "ea-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-busy]=\"loading() || null\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n", styles: [".ea-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--inline-xs);position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-sm);min-height:2rem}.ea-button--md{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);min-height:2.5rem}.ea-button--lg{padding:var(--space-2-5) var(--space-6);font-size:var(--font-size-md);min-height:3rem}.ea-button--primary{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--color-brand-hover);border-color:var(--color-brand-hover)}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--color-brand-active);border-color:var(--color-brand-active)}.ea-button--secondary{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-primary)}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted);border-color:var(--color-neutral-500)}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--ghost{background-color:transparent;border-color:transparent;color:var(--color-text-primary)}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted)}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--danger{background-color:var(--color-error-default);border-color:var(--color-error-default);color:var(--color-text-inverse)}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700);filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:var(--inline-xs)}.ea-button__content--hidden{visibility:hidden}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ButtonComponent, isStandalone: true, selector: "ea-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.ea-button--full-width": "fullWidth()" } }, ngImport: i0, template: "<button\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-busy]=\"loading() || null\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n", styles: [".ea-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--inline-xs);position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2rem}.ea-button--md{padding:var(--space-2) var(--space-4);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2.5rem}.ea-button--lg{padding:var(--space-2-5) var(--space-6);font-size:var(--ea-button-font-size, var(--font-size-md));min-height:3rem}.ea-button--primary{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--color-brand-hover);border-color:var(--color-brand-hover)}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--color-brand-active);border-color:var(--color-brand-active)}.ea-button--secondary{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-primary)}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted);border-color:var(--color-neutral-500)}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--ghost{background-color:transparent;border-color:transparent;color:var(--color-text-primary)}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted)}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--danger{background-color:var(--color-error-default);border-color:var(--color-error-default);color:var(--color-text-inverse)}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700);filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:var(--inline-xs)}.ea-button__content--hidden{visibility:hidden}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-button', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-busy]=\"loading() || null\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n", styles: [".ea-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--inline-xs);position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-sm);min-height:2rem}.ea-button--md{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);min-height:2.5rem}.ea-button--lg{padding:var(--space-2-5) var(--space-6);font-size:var(--font-size-md);min-height:3rem}.ea-button--primary{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--color-brand-hover);border-color:var(--color-brand-hover)}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--color-brand-active);border-color:var(--color-brand-active)}.ea-button--secondary{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-primary)}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted);border-color:var(--color-neutral-500)}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--ghost{background-color:transparent;border-color:transparent;color:var(--color-text-primary)}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted)}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--danger{background-color:var(--color-error-default);border-color:var(--color-error-default);color:var(--color-text-inverse)}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700);filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:var(--inline-xs)}.ea-button__content--hidden{visibility:hidden}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'ea-button', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.ea-button--full-width]': 'fullWidth()',
+                    }, template: "<button\n  class=\"ea-button\"\n  [ngClass]=\"hostClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-busy]=\"loading() || null\"\n  [attr.aria-disabled]=\"isDisabled() || null\"\n  (click)=\"handleClick($event)\">\n  @if (loading()) {\n    <span\n      class=\"ea-button__spinner\"\n      aria-hidden=\"true\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"31.4\"\n          stroke-dashoffset=\"10\" />\n      </svg>\n    </span>\n  }\n\n  <span\n    class=\"ea-button__content\"\n    [class.ea-button__content--hidden]=\"loading()\">\n    <ng-content select=\"[slot=prefix]\" />\n    <span class=\"ea-button__label\">\n      <ng-content />\n    </span>\n    <ng-content select=\"[slot=suffix]\" />\n  </span>\n</button>\n", styles: [".ea-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--inline-xs);position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--ea-button-font-weight, var(--font-weight-medium));letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2rem}.ea-button--md{padding:var(--space-2) var(--space-4);font-size:var(--ea-button-font-size, var(--font-size-sm));min-height:2.5rem}.ea-button--lg{padding:var(--space-2-5) var(--space-6);font-size:var(--ea-button-font-size, var(--font-size-md));min-height:3rem}.ea-button--primary{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--color-brand-hover);border-color:var(--color-brand-hover)}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--color-brand-active);border-color:var(--color-brand-active)}.ea-button--secondary{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-primary)}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted);border-color:var(--color-neutral-500)}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--ghost{background-color:transparent;border-color:transparent;color:var(--color-text-primary)}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted)}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--danger{background-color:var(--color-error-default);border-color:var(--color-error-default);color:var(--color-text-inverse)}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700);filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:var(--inline-xs)}.ea-button__content--hidden{visibility:hidden}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}:host(.ea-button--full-width){display:block;width:100%}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 class CardComponent {
     // Inputs
-    variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : []));
-    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
+    variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    headerAlign = input('center', ...(ngDevMode ? [{ debugName: "headerAlign" }] : /* istanbul ignore next */ []));
     // Computed
     hostClasses = computed(() => ({
         [`ea-card--${this.variant()}`]: true,
         [`ea-card--padding-${this.padding()}`]: true,
         'ea-card--full-width': this.fullWidth(),
-    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: CardComponent, isStandalone: true, selector: "ea-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-card\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-card__header\">\n    <ng-content select=\"[slot=header]\" />\n  </div>\n\n  <div class=\"ea-card__body\">\n    <ng-content />\n  </div>\n\n  <div class=\"ea-card__footer\">\n    <ng-content select=\"[slot=footer]\" />\n  </div>\n</div>\n", styles: [".ea-card{display:flex;flex-direction:column;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary);overflow:hidden}.ea-card--elevated{background-color:var(--color-bg-base);box-shadow:var(--shadow-md)}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none .ea-card__header,.ea-card--padding-none .ea-card__body,.ea-card--padding-none .ea-card__footer{padding:0}.ea-card--padding-sm .ea-card__header,.ea-card--padding-sm .ea-card__body,.ea-card--padding-sm .ea-card__footer{padding:var(--space-3)}.ea-card--padding-md .ea-card__header,.ea-card--padding-md .ea-card__body,.ea-card--padding-md .ea-card__footer{padding:var(--space-4)}.ea-card--padding-lg .ea-card__header,.ea-card--padding-lg .ea-card__body,.ea-card--padding-lg .ea-card__footer{padding:var(--space-6)}.ea-card--full-width{width:100%}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: CardComponent, isStandalone: true, selector: "ea-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-card\"\n  [ngClass]=\"hostClasses()\">\n  <div\n    class=\"ea-card__header\"\n    [style.text-align]=\"headerAlign()\">\n    <ng-content select=\"[eaCardHeader]\" />\n  </div>\n\n  <div class=\"ea-card__body\">\n    <ng-content />\n  </div>\n\n  <div class=\"ea-card__footer\">\n    <ng-content select=\"[eaCardFooter]\" />\n  </div>\n</div>\n", styles: [".ea-card{display:flex;flex-direction:column;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary);overflow:hidden}.ea-card--elevated{background-color:var(--color-bg-base);box-shadow:var(--ea-card-shadow, var(--shadow-md))}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none .ea-card__header,.ea-card--padding-none .ea-card__body,.ea-card--padding-none .ea-card__footer{padding:0}.ea-card--padding-sm .ea-card__header{padding:var(--space-3) var(--space-3) 0}.ea-card--padding-sm .ea-card__body{padding:var(--space-3)}.ea-card--padding-sm .ea-card__footer{padding:0 var(--space-3) var(--space-3)}.ea-card--padding-md .ea-card__header{padding:var(--space-4) var(--space-4) 0}.ea-card--padding-md .ea-card__body{padding:var(--space-4)}.ea-card--padding-md .ea-card__footer{padding:0 var(--space-4) var(--space-4)}.ea-card--padding-lg .ea-card__header{padding:var(--space-6) var(--space-6) 0}.ea-card--padding-lg .ea-card__body{padding:var(--space-6)}.ea-card--padding-lg .ea-card__footer{padding:0 var(--space-6) var(--space-6)}.ea-card--padding-xl .ea-card__header{padding:var(--space-8) var(--space-8) 0}.ea-card--padding-xl .ea-card__body{padding:var(--space-8)}.ea-card--padding-xl .ea-card__footer{padding:0 var(--space-8) var(--space-8)}.ea-card--full-width{width:100%}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-card', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-card\"\n  [ngClass]=\"hostClasses()\">\n  <div class=\"ea-card__header\">\n    <ng-content select=\"[slot=header]\" />\n  </div>\n\n  <div class=\"ea-card__body\">\n    <ng-content />\n  </div>\n\n  <div class=\"ea-card__footer\">\n    <ng-content select=\"[slot=footer]\" />\n  </div>\n</div>\n", styles: [".ea-card{display:flex;flex-direction:column;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary);overflow:hidden}.ea-card--elevated{background-color:var(--color-bg-base);box-shadow:var(--shadow-md)}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none .ea-card__header,.ea-card--padding-none .ea-card__body,.ea-card--padding-none .ea-card__footer{padding:0}.ea-card--padding-sm .ea-card__header,.ea-card--padding-sm .ea-card__body,.ea-card--padding-sm .ea-card__footer{padding:var(--space-3)}.ea-card--padding-md .ea-card__header,.ea-card--padding-md .ea-card__body,.ea-card--padding-md .ea-card__footer{padding:var(--space-4)}.ea-card--padding-lg .ea-card__header,.ea-card--padding-lg .ea-card__body,.ea-card--padding-lg .ea-card__footer{padding:var(--space-6)}.ea-card--full-width{width:100%}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
+            args: [{ selector: 'ea-card', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-card\"\n  [ngClass]=\"hostClasses()\">\n  <div\n    class=\"ea-card__header\"\n    [style.text-align]=\"headerAlign()\">\n    <ng-content select=\"[eaCardHeader]\" />\n  </div>\n\n  <div class=\"ea-card__body\">\n    <ng-content />\n  </div>\n\n  <div class=\"ea-card__footer\">\n    <ng-content select=\"[eaCardFooter]\" />\n  </div>\n</div>\n", styles: [".ea-card{display:flex;flex-direction:column;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary);overflow:hidden}.ea-card--elevated{background-color:var(--color-bg-base);box-shadow:var(--ea-card-shadow, var(--shadow-md))}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none .ea-card__header,.ea-card--padding-none .ea-card__body,.ea-card--padding-none .ea-card__footer{padding:0}.ea-card--padding-sm .ea-card__header{padding:var(--space-3) var(--space-3) 0}.ea-card--padding-sm .ea-card__body{padding:var(--space-3)}.ea-card--padding-sm .ea-card__footer{padding:0 var(--space-3) var(--space-3)}.ea-card--padding-md .ea-card__header{padding:var(--space-4) var(--space-4) 0}.ea-card--padding-md .ea-card__body{padding:var(--space-4)}.ea-card--padding-md .ea-card__footer{padding:0 var(--space-4) var(--space-4)}.ea-card--padding-lg .ea-card__header{padding:var(--space-6) var(--space-6) 0}.ea-card--padding-lg .ea-card__body{padding:var(--space-6)}.ea-card--padding-lg .ea-card__footer{padding:0 var(--space-6) var(--space-6)}.ea-card--padding-xl .ea-card__header{padding:var(--space-8) var(--space-8) 0}.ea-card--padding-xl .ea-card__body{padding:var(--space-8)}.ea-card--padding-xl .ea-card__footer{padding:0 var(--space-8) var(--space-8)}.ea-card--full-width{width:100%}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], headerAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAlign", required: false }] }] } });
 
 class CheckboxComponent {
     // Inputs
-    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
-    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
-    id = input(`ea-checkbox-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    id = input(`ea-checkbox-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     // Two-way checked binding
-    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
     // Outputs
     changed = output();
     // Internal state
-    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     // Computed
-    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-checkbox--${this.size()}`]: true,
         'ea-checkbox--disabled': this.isDisabled(),
         'ea-checkbox--checked': this.checked(),
         'ea-checkbox--indeterminate': this.indeterminate(),
-    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     // ControlValueAccessor callbacks
     onChange = () => { };
     onTouched = () => { };
@@ -105,8 +477,8 @@ class CheckboxComponent {
         this.onTouched();
         this.changed.emit(newValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: CheckboxComponent, isStandalone: true, selector: "ea-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: CheckboxComponent, isStandalone: true, selector: "ea-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CheckboxComponent),
@@ -114,7 +486,7 @@ class CheckboxComponent {
             },
         ], ngImport: i0, template: "<label\n  class=\"ea-checkbox\"\n  [ngClass]=\"hostClasses()\"\n  [for]=\"id()\">\n  <input\n    #inputEl\n    type=\"checkbox\"\n    class=\"ea-checkbox__input\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [indeterminate]=\"indeterminate()\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n    (change)=\"handleChange()\" />\n\n  <span\n    class=\"ea-checkbox__box\"\n    aria-hidden=\"true\">\n    @if (indeterminate()) {\n      <svg\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M4 8h8\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\" />\n      </svg>\n    } @else if (checked()) {\n      <svg\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    }\n  </span>\n\n  @if (label()) {\n    <span class=\"ea-checkbox__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".ea-checkbox{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-checkbox--sm .ea-checkbox__box{width:1rem;height:1rem;border-radius:var(--radius-sm)}.ea-checkbox--sm .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1rem}.ea-checkbox--md .ea-checkbox__box{width:1.25rem;height:1.25rem;border-radius:var(--radius-sm)}.ea-checkbox--md .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-checkbox--lg .ea-checkbox__box{width:1.5rem;height:1.5rem;border-radius:var(--radius-sm)}.ea-checkbox--lg .ea-checkbox__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ea-checkbox', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -126,22 +498,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 class DialogComponent {
-    dialogEl = viewChild('dialogEl', ...(ngDevMode ? [{ debugName: "dialogEl" }] : []));
+    dialogEl = viewChild('dialogEl', ...(ngDevMode ? [{ debugName: "dialogEl" }] : /* istanbul ignore next */ []));
     // Inputs
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    closeOnBackdrop = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : []));
-    closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
-    showClose = input(true, ...(ngDevMode ? [{ debugName: "showClose" }] : []));
-    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    closeOnBackdrop = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : /* istanbul ignore next */ []));
+    closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+    showClose = input(true, ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     // Two-way open binding
-    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     // Outputs
     opened = output();
     closed = output();
     // Computed
     panelClasses = computed(() => ({
         [`ea-dialog__panel--${this.size()}`]: true,
-    }), ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
+    }), ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const dialogRef = this.dialogEl()?.nativeElement;
@@ -179,52 +551,67 @@ class DialogComponent {
         }
         this.handleClose();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        aria-label=\"Close dialog\"\n        (click)=\"handleClose()\">\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          aria-hidden=\"true\">\n          <path\n            d=\"M4 4l8 8M12 4l-8 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\" />\n        </svg>\n      </button>\n    }\n\n    <div class=\"ea-dialog__header\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-base);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        aria-label=\"Close dialog\"\n        (click)=\"handleClose()\">\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          aria-hidden=\"true\">\n          <path\n            d=\"M4 4l8 8M12 4l-8 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\" />\n        </svg>\n      </button>\n    }\n\n    <div class=\"ea-dialog__header\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-base);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ea-dialog', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n  #dialogEl\n  class=\"ea-dialog\"\n  [attr.aria-label]=\"ariaLabel()\"\n  (click)=\"handleBackdropClick($event)\"\n  (cancel)=\"handleCancel($event)\">\n  <div\n    class=\"ea-dialog__panel\"\n    [ngClass]=\"panelClasses()\">\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"ea-dialog__close\"\n        aria-label=\"Close dialog\"\n        (click)=\"handleClose()\">\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          aria-hidden=\"true\">\n          <path\n            d=\"M4 4l8 8M12 4l-8 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\" />\n        </svg>\n      </button>\n    }\n\n    <div class=\"ea-dialog__header\">\n      <ng-content select=\"[slot=header]\" />\n    </div>\n\n    <div class=\"ea-dialog__body\">\n      <ng-content />\n    </div>\n\n    <div class=\"ea-dialog__footer\">\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-base);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dialogEl: [{ type: i0.ViewChild, args: ['dialogEl', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
+class DividerComponent {
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => ({
+        [`ea-divider--${this.orientation()}`]: true,
+        'ea-divider--with-label': !!this.label(),
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DividerComponent, isStandalone: true, selector: "ea-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-divider\"\n  [ngClass]=\"hostClasses()\"\n  [attr.role]=\"'separator'\"\n  [attr.aria-orientation]=\"orientation()\">\n  @if (label()) {\n    <span class=\"ea-divider__label\">{{ label() }}</span>\n  }\n</div>\n", styles: [".ea-divider{flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:1px;background-color:var(--color-border-default)}.ea-divider--vertical{display:inline-block;width:1px;height:100%;min-height:1rem;background-color:var(--color-border-default)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:1px;background-color:var(--color-border-default)}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ea-divider', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-divider\"\n  [ngClass]=\"hostClasses()\"\n  [attr.role]=\"'separator'\"\n  [attr.aria-orientation]=\"orientation()\">\n  @if (label()) {\n    <span class=\"ea-divider__label\">{{ label() }}</span>\n  }\n</div>\n", styles: [".ea-divider{flex-shrink:0;border:0;font-family:var(--font-family-sans)}.ea-divider--horizontal{display:flex;align-items:center;width:100%;height:1px;background-color:var(--color-border-default)}.ea-divider--vertical{display:inline-block;width:1px;height:100%;min-height:1rem;background-color:var(--color-border-default)}.ea-divider--with-label{height:auto;background-color:transparent;gap:var(--space-3)}.ea-divider--with-label:before,.ea-divider--with-label:after{content:\"\";flex:1;height:1px;background-color:var(--color-border-default)}.ea-divider__label{flex-shrink:0;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary);white-space:nowrap}\n"] }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
 class DropdownComponent {
-    elRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "elRef" }] : []));
+    elRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "elRef" }] : /* istanbul ignore next */ []));
     // Inputs
-    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
-    placeholder = input('Select…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
-    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : []));
-    errorMsg = input(undefined, { ...(ngDevMode ? { debugName: "errorMsg" } : {}), alias: 'error' });
-    id = input(`ea-dropdown-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('Select…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    errorMsg = input(undefined, { ...(ngDevMode ? { debugName: "errorMsg" } : /* istanbul ignore next */ {}), alias: 'error' });
+    id = input(`ea-dropdown-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     // Two-way value binding
-    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // Outputs
     changed = output();
     // Internal state
-    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
-    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     // ControlValueAccessor callbacks
     onChange = () => { };
     onTouched = () => { };
     // Computed
-    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-    resolvedStatus = computed(() => (this.errorMsg() ? 'error' : 'default'), ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : []));
-    showError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "showError" }] : []));
-    showHint = computed(() => !!this.hint() && !this.showError(), ...(ngDevMode ? [{ debugName: "showHint" }] : []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    resolvedStatus = computed(() => (this.errorMsg() ? 'error' : 'default'), ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
+    showError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    showHint = computed(() => !!this.hint() && !this.showError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
     selectedLabel = computed(() => {
         const opt = this.options().find(o => o.value === this.value());
         return opt?.label ?? '';
-    }, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
     triggerClasses = computed(() => ({
         [`ea-dropdown__trigger--${this.size()}`]: true,
         [`ea-dropdown__trigger--${this.resolvedStatus()}`]: true,
         'ea-dropdown__trigger--open': this.isOpen(),
         'ea-dropdown__trigger--disabled': this.isDisabled(),
-    }), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
+    }), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
     // ControlValueAccessor
     writeValue(val) {
         this.value.set(val ?? '');
@@ -323,8 +710,8 @@ class DropdownComponent {
             this.onTouched();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DropdownComponent, isStandalone: true, selector: "ea-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: DropdownComponent, isStandalone: true, selector: "ea-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DropdownComponent),
@@ -332,7 +719,7 @@ class DropdownComponent {
             },
         ], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-field\">\n  @if (label()) {\n    <label\n      class=\"ea-dropdown-field__label\"\n      [for]=\"id()\"\n      [class.ea-dropdown-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"ea-dropdown\">\n    <button\n      #triggerEl\n      type=\"button\"\n      class=\"ea-dropdown__trigger\"\n      [ngClass]=\"triggerClasses()\"\n      [id]=\"id()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-labelledby]=\"label() ? id() : null\"\n      (click)=\"toggle()\"\n      (keydown)=\"handleKeydown($event)\">\n      <span\n        class=\"ea-dropdown__value\"\n        [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n        {{ selectedLabel() || placeholder() }}\n      </span>\n      <svg\n        class=\"ea-dropdown__chevron\"\n        [class.ea-dropdown__chevron--open]=\"isOpen()\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        aria-hidden=\"true\">\n        <path\n          d=\"M4 6l4 4 4-4\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    @if (isOpen()) {\n      <ul\n        class=\"ea-dropdown__menu\"\n        role=\"listbox\"\n        [attr.aria-activedescendant]=\"\n          focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n        \">\n        @for (option of options(); track option.value; let i = $index) {\n          <li\n            class=\"ea-dropdown__option\"\n            [class.ea-dropdown__option--selected]=\"option.value === value()\"\n            [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n            [class.ea-dropdown__option--disabled]=\"option.disabled\"\n            [id]=\"id() + '-option-' + i\"\n            role=\"option\"\n            [attr.aria-selected]=\"option.value === value()\"\n            [attr.aria-disabled]=\"option.disabled || null\"\n            (click)=\"select(option)\"\n            (mouseenter)=\"focusedIndex.set(i)\">\n            {{ option.label }}\n          </li>\n        }\n      </ul>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-dropdown-field__message ea-dropdown-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-dropdown-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-dropdown-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-dropdown-field__message--hint{color:var(--color-text-secondary)}.ea-dropdown-field__message--error{color:var(--color-error-default)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:0 0 0 3px #ef444459}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{position:absolute;top:calc(100% + var(--space-1));left:0;right:0;z-index:var(--z-index-dropdown);max-height:15rem;overflow-y:auto;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;margin:0;list-style:none}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-bg-muted)}.ea-dropdown__option--selected{color:var(--color-brand-default);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ea-dropdown', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -346,25 +733,497 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
+class AlertCircleIconComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AlertCircleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: AlertCircleIconComponent, isStandalone: true, selector: "ea-icon-alert-circle", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <path
+        d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 4a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-1.5 0V5zm.75 6.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AlertCircleIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ea-icon-alert-circle',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: inline-flex;' },
+                    template: `
+    <svg
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <path
+        d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 4a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-1.5 0V5zm.75 6.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
+    </svg>
+  `,
+                }]
+        }] });
+
+class CheckIconComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CheckIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: CheckIconComponent, isStandalone: true, selector: "ea-icon-check", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CheckIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ea-icon-check',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: inline-flex;' },
+                    template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  `,
+                }]
+        }] });
+
+class EyeOffIconComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EyeOffIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: EyeOffIconComponent, isStandalone: true, selector: "ea-icon-eye-off", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <path
+        d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+      <line
+        x1="1"
+        y1="1"
+        x2="23"
+        y2="23" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EyeOffIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ea-icon-eye-off',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: inline-flex;' },
+                    template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <path
+        d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+      <line
+        x1="1"
+        y1="1"
+        x2="23"
+        y2="23" />
+    </svg>
+  `,
+                }]
+        }] });
+
+class EyeIconComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EyeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: EyeIconComponent, isStandalone: true, selector: "ea-icon-eye", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z" />
+      <circle
+        cx="12"
+        cy="12"
+        r="3" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: EyeIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ea-icon-eye',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: inline-flex;' },
+                    template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z" />
+      <circle
+        cx="12"
+        cy="12"
+        r="3" />
+    </svg>
+  `,
+                }]
+        }] });
+
+class GoogleIconComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GoogleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: GoogleIconComponent, isStandalone: true, selector: "ea-icon-google", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
+        fill="#4285F4" />
+      <path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill="#34A853" />
+      <path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z"
+        fill="#FBBC05" />
+      <path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill="#EA4335" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GoogleIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ea-icon-google',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: inline-flex;' },
+                    template: `
+    <svg
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <path
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
+        fill="#4285F4" />
+      <path
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        fill="#34A853" />
+      <path
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z"
+        fill="#FBBC05" />
+      <path
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        fill="#EA4335" />
+    </svg>
+  `,
+                }]
+        }] });
+
+class InfoIconComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InfoIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: InfoIconComponent, isStandalone: true, selector: "ea-icon-info", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <circle
+        cx="12"
+        cy="12"
+        r="10" />
+      <line
+        x1="12"
+        y1="16"
+        x2="12"
+        y2="12" />
+      <line
+        x1="12"
+        y1="8"
+        x2="12.01"
+        y2="8" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InfoIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ea-icon-info',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: inline-flex;' },
+                    template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <circle
+        cx="12"
+        cy="12"
+        r="10" />
+      <line
+        x1="12"
+        y1="16"
+        x2="12"
+        y2="12" />
+      <line
+        x1="12"
+        y1="8"
+        x2="12.01"
+        y2="8" />
+    </svg>
+  `,
+                }]
+        }] });
+
+class LoaderIconComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoaderIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: LoaderIconComponent, isStandalone: true, selector: "ea-icon-loader", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <line
+        x1="12"
+        y1="2"
+        x2="12"
+        y2="6" />
+      <line
+        x1="12"
+        y1="18"
+        x2="12"
+        y2="22" />
+      <line
+        x1="4.93"
+        y1="4.93"
+        x2="7.76"
+        y2="7.76" />
+      <line
+        x1="16.24"
+        y1="16.24"
+        x2="19.07"
+        y2="19.07" />
+      <line
+        x1="2"
+        y1="12"
+        x2="6"
+        y2="12" />
+      <line
+        x1="18"
+        y1="12"
+        x2="22"
+        y2="12" />
+      <line
+        x1="4.93"
+        y1="19.07"
+        x2="7.76"
+        y2="16.24" />
+      <line
+        x1="16.24"
+        y1="7.76"
+        x2="19.07"
+        y2="4.93" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoaderIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ea-icon-loader',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: inline-flex;' },
+                    template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <line
+        x1="12"
+        y1="2"
+        x2="12"
+        y2="6" />
+      <line
+        x1="12"
+        y1="18"
+        x2="12"
+        y2="22" />
+      <line
+        x1="4.93"
+        y1="4.93"
+        x2="7.76"
+        y2="7.76" />
+      <line
+        x1="16.24"
+        y1="16.24"
+        x2="19.07"
+        y2="19.07" />
+      <line
+        x1="2"
+        y1="12"
+        x2="6"
+        y2="12" />
+      <line
+        x1="18"
+        y1="12"
+        x2="22"
+        y2="12" />
+      <line
+        x1="4.93"
+        y1="19.07"
+        x2="7.76"
+        y2="16.24" />
+      <line
+        x1="16.24"
+        y1="7.76"
+        x2="19.07"
+        y2="4.93" />
+    </svg>
+  `,
+                }]
+        }] });
+
+class XIconComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: XIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.5", type: XIconComponent, isStandalone: true, selector: "ea-icon-x", host: { styleAttribute: "display: inline-flex;" }, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <line
+        x1="18"
+        y1="6"
+        x2="6"
+        y2="18" />
+      <line
+        x1="6"
+        y1="6"
+        x2="18"
+        y2="18" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: XIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ea-icon-x',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: inline-flex;' },
+                    template: `
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      width="100%"
+      height="100%">
+      <line
+        x1="18"
+        y1="6"
+        x2="6"
+        y2="18" />
+      <line
+        x1="6"
+        y1="6"
+        x2="18"
+        y2="18" />
+    </svg>
+  `,
+                }]
+        }] });
+
 class InputComponent {
-    inputEl = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputEl" }] : []));
+    inputEl = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
     // Inputs
-    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
-    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
-    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : []));
-    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : []));
-    errorMsg = input(undefined, { ...(ngDevMode ? { debugName: "errorMsg" } : {}), alias: 'error' });
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
-    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
-    id = input(`ea-input-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    errorMsg = input(undefined, { ...(ngDevMode ? { debugName: "errorMsg" } : /* istanbul ignore next */ {}), alias: 'error' });
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : /* istanbul ignore next */ []));
+    showPasswordToggle = input(true, ...(ngDevMode ? [{ debugName: "showPasswordToggle" }] : /* istanbul ignore next */ []));
+    id = input(`ea-input-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     // Two-way value binding
-    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // Internal state
-    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
-    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     // Outputs
     inputFocused = output();
     inputBlurred = output();
@@ -372,18 +1231,23 @@ class InputComponent {
     onChange = () => { };
     onTouched = () => { };
     // Computed
-    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-    resolvedStatus = computed(() => this.errorMsg() ? 'error' : this.status(), ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : []));
-    showError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "showError" }] : []));
-    showHint = computed(() => !!this.hint() && !this.showError(), ...(ngDevMode ? [{ debugName: "showHint" }] : []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    effectiveType = computed(() => this.type() === 'password' && this.passwordVisible() ? 'text' : this.type(), ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
+    resolvedStatus = computed(() => this.errorMsg() ? 'error' : this.status(), ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
+    showError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    showHint = computed(() => !!this.hint() && !this.showError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
     wrapperClasses = computed(() => ({
         [`ea-input-wrapper--${this.size()}`]: true,
         [`ea-input-wrapper--${this.resolvedStatus()}`]: true,
         'ea-input-wrapper--focused': this.focused(),
         'ea-input-wrapper--disabled': this.isDisabled(),
         'ea-input-wrapper--readonly': this.readonly(),
-    }), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
-    // ControlValueAccessor
+    }), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        if (this.autofocus()) {
+            setTimeout(() => this.inputEl()?.nativeElement.focus());
+        }
+    }
     writeValue(val) {
         this.value.set(val ?? '');
     }
@@ -398,9 +1262,9 @@ class InputComponent {
     }
     // Handlers
     handleInput(event) {
-        const val = event.target.value;
-        this.value.set(val);
-        this.onChange(val);
+        const value = event.target.value;
+        this.value.set(value);
+        this.onChange(value);
     }
     handleFocus(event) {
         this.focused.set(true);
@@ -411,44 +1275,47 @@ class InputComponent {
         this.onTouched();
         this.inputBlurred.emit(event);
     }
+    togglePasswordVisibility() {
+        this.passwordVisible.update(value => !value);
+    }
     focus() {
         this.inputEl()?.nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: InputComponent, isStandalone: true, selector: "ea-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputFocused: "inputFocused", inputBlurred: "inputBlurred" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: InputComponent, isStandalone: true, selector: "ea-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, showPasswordToggle: { classPropertyName: "showPasswordToggle", publicName: "showPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputFocused: "inputFocused", inputBlurred: "inputBlurred" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-input-field__label\"\n      [for]=\"id()\"\n      [class.ea-input-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <!-- Prefix slot (icon or text) -->\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      [id]=\"id()\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <!-- Suffix slot (icon, clear button, etc.) -->\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <svg\n        class=\"ea-input-field__message-icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\">\n        <path\n          d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 4a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-1.5 0V5zm.75 6.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z\" />\n      </svg>\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:var(--color-text-secondary)}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-sm);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-md);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:0 0 0 3px #ef444459}.ea-input-wrapper--success{border-color:var(--color-success-default)}.ea-input-wrapper--success.ea-input-wrapper--focused{box-shadow:0 0 0 3px #22c55e59}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:var(--color-text-secondary)}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary)}.ea-input:disabled{cursor:not-allowed}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-input-field__label\"\n      [for]=\"id()\"\n      [class.ea-input-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <!-- Prefix slot (icon or text) -->\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <!-- Suffix slot (icon, clear button, etc.) -->\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    <!-- Built-in password visibility toggle -->\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\"\n        tabindex=\"-1\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-input-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:inherit}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-md);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-lg);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:0 0 0 3px #ef444459}.ea-input-wrapper--success{border-color:var(--color-success-default)}.ea-input-wrapper--success.ea-input-wrapper--focused{box-shadow:0 0 0 3px #22c55e59}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:inherit;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary)}.ea-input:disabled{cursor:not-allowed}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EyeIconComponent, selector: "ea-icon-eye" }, { kind: "component", type: EyeOffIconComponent, selector: "ea-icon-eye-off" }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ea-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], providers: [
+            args: [{ selector: 'ea-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, EyeIconComponent, EyeOffIconComponent, AlertCircleIconComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"ea-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-input-field__label\"\n      [for]=\"id()\"\n      [class.ea-input-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <!-- Prefix slot (icon or text) -->\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      [id]=\"id()\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <!-- Suffix slot (icon, clear button, etc.) -->\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <svg\n        class=\"ea-input-field__message-icon\"\n        viewBox=\"0 0 16 16\"\n        fill=\"currentColor\"\n        aria-hidden=\"true\">\n        <path\n          d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 4a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-1.5 0V5zm.75 6.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z\" />\n      </svg>\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:var(--color-text-secondary)}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-sm);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-md);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:0 0 0 3px #ef444459}.ea-input-wrapper--success{border-color:var(--color-success-default)}.ea-input-wrapper--success.ea-input-wrapper--focused{box-shadow:0 0 0 3px #22c55e59}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:var(--color-text-secondary)}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary)}.ea-input:disabled{cursor:not-allowed}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"] }]
-        }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputFocused: [{ type: i0.Output, args: ["inputFocused"] }], inputBlurred: [{ type: i0.Output, args: ["inputBlurred"] }] } });
+                    ], template: "<div class=\"ea-input-field\">\n  @if (label()) {\n    <label\n      class=\"ea-input-field__label\"\n      [for]=\"id()\"\n      [class.ea-input-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-input-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <!-- Prefix slot (icon or text) -->\n    <span class=\"ea-input-wrapper__prefix\">\n      <ng-content select=\"[slot=prefix]\" />\n    </span>\n\n    <input\n      #inputEl\n      class=\"ea-input\"\n      [id]=\"id()\"\n      [type]=\"effectiveType()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [value]=\"value()\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\" />\n\n    <!-- Suffix slot (icon, clear button, etc.) -->\n    <span class=\"ea-input-wrapper__suffix\">\n      <ng-content select=\"[slot=suffix]\" />\n    </span>\n\n    <!-- Built-in password visibility toggle -->\n    @if (type() === 'password' && showPasswordToggle()) {\n      <button\n        type=\"button\"\n        class=\"ea-input-wrapper__password-toggle\"\n        [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\n        [attr.aria-pressed]=\"passwordVisible()\"\n        (click)=\"togglePasswordVisibility()\"\n        tabindex=\"-1\">\n        @if (passwordVisible()) {\n          <ea-icon-eye-off />\n        } @else {\n          <ea-icon-eye />\n        }\n      </button>\n    }\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-input-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-input-field__message ea-input-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:inherit}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);color:var(--color-text-secondary);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-md);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-lg);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:0 0 0 3px #ef444459}.ea-input-wrapper--success{border-color:var(--color-success-default)}.ea-input-wrapper--success.ea-input-wrapper--focused{box-shadow:0 0 0 3px #22c55e59}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:inherit}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input-wrapper__password-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;width:1.25rem;height:1.25rem;background:none;border:none;cursor:pointer;color:inherit;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-input-wrapper__password-toggle:hover{color:var(--color-text-primary)}.ea-input-wrapper__password-toggle ea-icon-eye,.ea-input-wrapper__password-toggle ea-icon-eye-off{width:1rem;height:1rem;pointer-events:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary)}.ea-input:disabled{cursor:not-allowed}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"] }]
+        }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], showPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPasswordToggle", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputFocused: [{ type: i0.Output, args: ["inputFocused"] }], inputBlurred: [{ type: i0.Output, args: ["inputBlurred"] }] } });
 
 class RadioGroupComponent {
     // Inputs
-    name = input(`ea-radio-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
+    name = input(`ea-radio-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     // Two-way value binding
-    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // Output
     changed = output();
     // Internal state
-    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
     // Computed
-    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     // ControlValueAccessor callbacks
     onChange = () => { };
     onTouched = () => { };
@@ -473,8 +1340,8 @@ class RadioGroupComponent {
         this.onTouched();
         this.changed.emit(val);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: RadioGroupComponent, isStandalone: true, selector: "ea-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: RadioGroupComponent, isStandalone: true, selector: "ea-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RadioGroupComponent),
@@ -482,7 +1349,7 @@ class RadioGroupComponent {
             },
         ], ngImport: i0, template: "<div\n  class=\"ea-radio-group\"\n  [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n  [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"ariaLabel()\">\n  <ng-content />\n</div>\n", styles: [".ea-radio-group{display:flex}.ea-radio-group--vertical{flex-direction:column;gap:var(--space-2)}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RadioGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RadioGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ea-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -496,33 +1363,317 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 class RadioComponent {
     group = inject(RadioGroupComponent);
     // Inputs
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    id = input(`ea-radio-opt-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    id = input(`ea-radio-opt-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     // Computed
-    isChecked = computed(() => this.group.value() === this.value(), ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
-    isDisabled = computed(() => this.disabled() || this.group.isDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-    name = computed(() => this.group.name(), ...(ngDevMode ? [{ debugName: "name" }] : []));
-    size = computed(() => this.group.size(), ...(ngDevMode ? [{ debugName: "size" }] : []));
+    isChecked = computed(() => this.group.value() === this.value(), ...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.group.isDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    name = computed(() => this.group.name(), ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = computed(() => this.group.size(), ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => ({
         [`ea-radio--${this.size()}`]: true,
         'ea-radio--disabled': this.isDisabled(),
         'ea-radio--checked': this.isChecked(),
-    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
     handleChange() {
         if (this.isDisabled())
             return;
         this.group.select(this.value());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: RadioComponent, isStandalone: true, selector: "ea-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\n  class=\"ea-radio\"\n  [ngClass]=\"hostClasses()\"\n  [for]=\"id()\">\n  <input\n    type=\"radio\"\n    class=\"ea-radio__input\"\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"handleChange()\" />\n\n  <span\n    class=\"ea-radio__circle\"\n    aria-hidden=\"true\"></span>\n\n  @if (label()) {\n    <span class=\"ea-radio__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".ea-radio{display:inline-flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-radio--sm .ea-radio__circle{width:1rem;height:1rem}.ea-radio--sm .ea-radio__label{font-size:var(--font-size-sm);line-height:1rem}.ea-radio--md .ea-radio__circle{width:1.25rem;height:1.25rem}.ea-radio--md .ea-radio__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-radio--lg .ea-radio__circle{width:1.5rem;height:1.5rem}.ea-radio--lg .ea-radio__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-radio--disabled{opacity:.45;cursor:not-allowed}.ea-radio--checked .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio--checked .ea-radio__circle:after{transform:scale(1)}.ea-radio:hover:not(.ea-radio--disabled) .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-radio__input:focus-visible+.ea-radio__circle{box-shadow:var(--shadow-focus-ring)}.ea-radio__circle{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-bg-base);border:var(--border-width-medium) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-radio__circle:after{content:\"\";display:block;width:45%;height:45%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transform:scale(0);transition:var(--transition-transform)}.ea-radio__label{font-weight:var(--font-weight-regular)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: RadioComponent, isStandalone: true, selector: "ea-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\n  class=\"ea-radio\"\n  [ngClass]=\"hostClasses()\"\n  [for]=\"id()\">\n  <input\n    type=\"radio\"\n    class=\"ea-radio__input\"\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"handleChange()\" />\n\n  <span\n    class=\"ea-radio__circle\"\n    aria-hidden=\"true\"></span>\n\n  @if (label()) {\n    <span class=\"ea-radio__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".ea-radio{display:inline-flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-radio--sm .ea-radio__circle{width:1rem;height:1rem}.ea-radio--sm .ea-radio__label{font-size:var(--font-size-sm);line-height:1rem}.ea-radio--md .ea-radio__circle{width:1.25rem;height:1.25rem}.ea-radio--md .ea-radio__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-radio--lg .ea-radio__circle{width:1.5rem;height:1.5rem}.ea-radio--lg .ea-radio__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-radio--disabled{opacity:.45;cursor:not-allowed}.ea-radio--checked .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio--checked .ea-radio__circle:after{transform:scale(1)}.ea-radio:hover:not(.ea-radio--disabled) .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-radio__input:focus-visible+.ea-radio__circle{box-shadow:var(--shadow-focus-ring)}.ea-radio__circle{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-bg-base);border:var(--border-width-medium) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-radio__circle:after{content:\"\";display:block;width:45%;height:45%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transform:scale(0);transition:var(--transition-transform)}.ea-radio__label{font-weight:var(--font-weight-regular)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ea-radio', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<label\n  class=\"ea-radio\"\n  [ngClass]=\"hostClasses()\"\n  [for]=\"id()\">\n  <input\n    type=\"radio\"\n    class=\"ea-radio__input\"\n    [id]=\"id()\"\n    [name]=\"name()\"\n    [value]=\"value()\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"isDisabled()\"\n    (change)=\"handleChange()\" />\n\n  <span\n    class=\"ea-radio__circle\"\n    aria-hidden=\"true\"></span>\n\n  @if (label()) {\n    <span class=\"ea-radio__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".ea-radio{display:inline-flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-radio--sm .ea-radio__circle{width:1rem;height:1rem}.ea-radio--sm .ea-radio__label{font-size:var(--font-size-sm);line-height:1rem}.ea-radio--md .ea-radio__circle{width:1.25rem;height:1.25rem}.ea-radio--md .ea-radio__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-radio--lg .ea-radio__circle{width:1.5rem;height:1.5rem}.ea-radio--lg .ea-radio__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-radio--disabled{opacity:.45;cursor:not-allowed}.ea-radio--checked .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio--checked .ea-radio__circle:after{transform:scale(1)}.ea-radio:hover:not(.ea-radio--disabled) .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-radio__input:focus-visible+.ea-radio__circle{box-shadow:var(--shadow-focus-ring)}.ea-radio__circle{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-bg-base);border:var(--border-width-medium) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-radio__circle:after{content:\"\";display:block;width:45%;height:45%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transform:scale(0);transition:var(--transition-transform)}.ea-radio__label{font-weight:var(--font-weight-regular)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
+class SpinnerComponent {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    label = input('Loading', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => ({
+        [`ea-spinner--${this.size()}`]: true,
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.5", type: SpinnerComponent, isStandalone: true, selector: "ea-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ label() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-brand-default)}.ea-spinner--sm .ea-spinner__circle{width:1rem;height:1rem}.ea-spinner--sm .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--md .ea-spinner__circle{width:1.5rem;height:1.5rem}.ea-spinner--md .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--lg .ea-spinner__circle{width:2rem;height:2rem}.ea-spinner--lg .ea-spinner__label{font-size:var(--font-size-md)}.ea-spinner__circle{animation:ea-spin .75s linear infinite}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ea-spinner', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"ea-spinner\"\n  [ngClass]=\"hostClasses()\"\n  role=\"status\">\n  <svg\n    class=\"ea-spinner__circle\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    aria-hidden=\"true\">\n    <circle\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      opacity=\"0.25\" />\n    <path\n      d=\"M12 2a10 10 0 0 1 10 10\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\" />\n  </svg>\n  <span class=\"ea-spinner__label\">{{ label() }}</span>\n</div>\n", styles: [".ea-spinner{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-brand-default)}.ea-spinner--sm .ea-spinner__circle{width:1rem;height:1rem}.ea-spinner--sm .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--md .ea-spinner__circle{width:1.5rem;height:1.5rem}.ea-spinner--md .ea-spinner__label{font-size:var(--font-size-sm)}.ea-spinner--lg .ea-spinner__circle{width:2rem;height:2rem}.ea-spinner--lg .ea-spinner__label{font-size:var(--font-size-md)}.ea-spinner__circle{animation:ea-spin .75s linear infinite}.ea-spinner__label{font-family:var(--font-family-sans);color:var(--color-text-secondary);line-height:var(--line-height-normal)}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+class SwitchComponent {
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    id = input(`ea-switch-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    changed = output();
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => ({
+        [`ea-switch--${this.size()}`]: true,
+        'ea-switch--checked': this.checked(),
+        'ea-switch--disabled': this.isDisabled(),
+    }), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    writeValue(val) {
+        this.checked.set(!!val);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    handleChange() {
+        if (this.isDisabled())
+            return;
+        const newValue = !this.checked();
+        this.checked.set(newValue);
+        this.onChange(newValue);
+        this.onTouched();
+        this.changed.emit(newValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SwitchComponent, isStandalone: true, selector: "ea-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SwitchComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<label\n  class=\"ea-switch\"\n  [ngClass]=\"hostClasses()\">\n  <input\n    class=\"ea-switch__input\"\n    type=\"checkbox\"\n    role=\"switch\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-checked]=\"checked()\"\n    (change)=\"handleChange()\" />\n  <span class=\"ea-switch__track\">\n    <span class=\"ea-switch__thumb\"></span>\n  </span>\n  @if (label()) {\n    <span class=\"ea-switch__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".ea-switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--sm .ea-switch__track{width:1.75rem;height:1rem}.ea-switch--sm .ea-switch__thumb{width:.75rem;height:.75rem}.ea-switch--sm .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--md .ea-switch__track{width:2.25rem;height:1.25rem}.ea-switch--md .ea-switch__thumb{width:1rem;height:1rem}.ea-switch--md .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--lg .ea-switch__track{width:2.75rem;height:1.5rem}.ea-switch--lg .ea-switch__thumb{width:1.25rem;height:1.25rem}.ea-switch--lg .ea-switch__label{font-size:var(--font-size-md)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}.ea-switch--checked .ea-switch__thumb{transform:translate(100%)}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;padding:.125rem;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-strong);border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ea-switch', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SwitchComponent),
+                            multi: true,
+                        },
+                    ], template: "<label\n  class=\"ea-switch\"\n  [ngClass]=\"hostClasses()\">\n  <input\n    class=\"ea-switch__input\"\n    type=\"checkbox\"\n    role=\"switch\"\n    [id]=\"id()\"\n    [checked]=\"checked()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-checked]=\"checked()\"\n    (change)=\"handleChange()\" />\n  <span class=\"ea-switch__track\">\n    <span class=\"ea-switch__thumb\"></span>\n  </span>\n  @if (label()) {\n    <span class=\"ea-switch__label\">{{ label() }}</span>\n  }\n</label>\n", styles: [".ea-switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans)}.ea-switch--sm .ea-switch__track{width:1.75rem;height:1rem}.ea-switch--sm .ea-switch__thumb{width:.75rem;height:.75rem}.ea-switch--sm .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--md .ea-switch__track{width:2.25rem;height:1.25rem}.ea-switch--md .ea-switch__thumb{width:1rem;height:1rem}.ea-switch--md .ea-switch__label{font-size:var(--font-size-sm)}.ea-switch--lg .ea-switch__track{width:2.75rem;height:1.5rem}.ea-switch--lg .ea-switch__thumb{width:1.25rem;height:1.25rem}.ea-switch--lg .ea-switch__label{font-size:var(--font-size-md)}.ea-switch--checked .ea-switch__track{background-color:var(--color-brand-default);border-color:var(--color-brand-default)}.ea-switch--checked .ea-switch__thumb{transform:translate(100%)}.ea-switch--disabled{opacity:.45;cursor:not-allowed}.ea-switch:hover:not(.ea-switch--disabled) .ea-switch__track{border-color:var(--color-brand-default)}.ea-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-switch__input:focus-visible+.ea-switch__track{box-shadow:var(--shadow-focus-ring)}.ea-switch__track{position:relative;display:flex;align-items:center;flex-shrink:0;padding:.125rem;background-color:var(--color-bg-muted);border:var(--border-width-thin) solid var(--color-border-strong);border-radius:var(--radius-full);transition:var(--transition-colors)}.ea-switch__thumb{display:block;background-color:var(--color-neutral-0);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.ea-switch__label{font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text-primary)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+class TextareaComponent {
+    textareaEl = viewChild('textareaEl', ...(ngDevMode ? [{ debugName: "textareaEl" }] : /* istanbul ignore next */ []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    errorMsg = input(undefined, { ...(ngDevMode ? { debugName: "errorMsg" } : /* istanbul ignore next */ {}), alias: 'error' });
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    resize = input('vertical', ...(ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []));
+    maxlength = input(undefined, ...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
+    id = input(`ea-textarea-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    textareaFocused = output();
+    textareaBlurred = output();
+    onChange = () => { };
+    onTouched = () => { };
+    isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    resolvedStatus = computed(() => this.errorMsg() ? 'error' : this.status(), ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
+    showError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    showHint = computed(() => !!this.hint() && !this.showError(), ...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
+    wrapperClasses = computed(() => ({
+        [`ea-textarea-wrapper--${this.size()}`]: true,
+        [`ea-textarea-wrapper--${this.resolvedStatus()}`]: true,
+        'ea-textarea-wrapper--focused': this.focused(),
+        'ea-textarea-wrapper--disabled': this.isDisabled(),
+        'ea-textarea-wrapper--readonly': this.readonly(),
+    }), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    writeValue(val) {
+        this.value.set(val ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._formDisabled.set(isDisabled);
+    }
+    handleInput(event) {
+        const value = event.target.value;
+        this.value.set(value);
+        this.onChange(value);
+    }
+    handleFocus(event) {
+        this.focused.set(true);
+        this.textareaFocused.emit(event);
+    }
+    handleBlur(event) {
+        this.focused.set(false);
+        this.onTouched();
+        this.textareaBlurred.emit(event);
+    }
+    focus() {
+        this.textareaEl()?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: TextareaComponent, isStandalone: true, selector: "ea-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", textareaFocused: "textareaFocused", textareaBlurred: "textareaBlurred" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextareaComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "textareaEl", first: true, predicate: ["textareaEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-textarea-field\">\n  @if (label()) {\n    <label\n      class=\"ea-textarea-field__label\"\n      [for]=\"id()\"\n      [class.ea-textarea-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [rows]=\"rows()\"\n      [value]=\"value()\"\n      [style.resize]=\"resize()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-textarea-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-textarea-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-textarea-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-textarea-field__message--hint{color:inherit}.ea-textarea-field__message--error{color:var(--color-error-default)}.ea-textarea-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-textarea-wrapper{display:flex;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--sm .ea-textarea{padding:var(--space-2);font-size:var(--font-size-sm)}.ea-textarea-wrapper--md .ea-textarea{padding:var(--space-3);font-size:var(--font-size-md)}.ea-textarea-wrapper--lg .ea-textarea{padding:var(--space-4);font-size:var(--font-size-lg)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:0 0 0 3px #ef444459}.ea-textarea-wrapper--success{border-color:var(--color-success-default)}.ea-textarea-wrapper--success.ea-textarea-wrapper--focused{box-shadow:0 0 0 3px #22c55e59}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;min-height:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ea-textarea', imports: [NgClass, AlertCircleIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextareaComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"ea-textarea-field\">\n  @if (label()) {\n    <label\n      class=\"ea-textarea-field__label\"\n      [for]=\"id()\"\n      [class.ea-textarea-field__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div\n    class=\"ea-textarea-wrapper\"\n    [ngClass]=\"wrapperClasses()\">\n    <textarea\n      #textareaEl\n      class=\"ea-textarea\"\n      [id]=\"id()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"readonly()\"\n      [required]=\"required()\"\n      [rows]=\"rows()\"\n      [value]=\"value()\"\n      [style.resize]=\"resize()\"\n      [attr.maxlength]=\"maxlength() ?? null\"\n      [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n      [attr.aria-describedby]=\"\n        showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n      \"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus($event)\"\n      (blur)=\"handleBlur($event)\"></textarea>\n  </div>\n\n  @if (showError()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--error\"\n      [id]=\"id() + '-error'\"\n      role=\"alert\">\n      <ea-icon-alert-circle class=\"ea-textarea-field__message-icon\" />\n      {{ errorMsg() }}\n    </p>\n  }\n\n  @if (showHint()) {\n    <p\n      class=\"ea-textarea-field__message ea-textarea-field__message--hint\"\n      [id]=\"id() + '-hint'\">\n      {{ hint() }}\n    </p>\n  }\n</div>\n", styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:var(--space-1-5);color:var(--color-text-secondary)}.ea-textarea-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-textarea-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-textarea-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-textarea-field__message--hint{color:inherit}.ea-textarea-field__message--error{color:var(--color-error-default)}.ea-textarea-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-textarea-wrapper{display:flex;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-textarea-wrapper--sm .ea-textarea{padding:var(--space-2);font-size:var(--font-size-sm)}.ea-textarea-wrapper--md .ea-textarea{padding:var(--space-3);font-size:var(--font-size-md)}.ea-textarea-wrapper--lg .ea-textarea{padding:var(--space-4);font-size:var(--font-size-lg)}.ea-textarea-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{box-shadow:0 0 0 3px #ef444459}.ea-textarea-wrapper--success{border-color:var(--color-success-default)}.ea-textarea-wrapper--success.ea-textarea-wrapper--focused{box-shadow:0 0 0 3px #22c55e59}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:not-allowed}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea{flex:1;width:100%;min-width:0;min-height:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{color:var(--color-text-tertiary)}.ea-textarea:disabled{cursor:not-allowed}\n"] }]
+        }], propDecorators: { textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], textareaFocused: [{ type: i0.Output, args: ["textareaFocused"] }], textareaBlurred: [{ type: i0.Output, args: ["textareaBlurred"] }] } });
+
+class ToastService {
+    nextId = 0;
+    toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
+    show(message, options = {}) {
+        const id = this.nextId++;
+        const toast = {
+            id,
+            message,
+            variant: options.variant ?? 'default',
+            duration: options.duration ?? 4000,
+        };
+        this.toasts.update(list => [...list, toast]);
+        if (toast.duration > 0) {
+            setTimeout(() => this.dismiss(id), toast.duration);
+        }
+        return id;
+    }
+    success(message, duration) {
+        return this.show(message, { variant: 'success', duration });
+    }
+    error(message, duration) {
+        return this.show(message, { variant: 'error', duration });
+    }
+    warning(message, duration) {
+        return this.show(message, { variant: 'warning', duration });
+    }
+    info(message, duration) {
+        return this.show(message, { variant: 'info', duration });
+    }
+    dismiss(id) {
+        this.toasts.update(list => list.filter(t => t.id !== id));
+    }
+    clear() {
+        this.toasts.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ToastComponent {
+    toastService = inject(ToastService);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ToastComponent, isStandalone: true, selector: "ea-toast", ngImport: i0, template: "@if (toastService.toasts().length) {\n  <div class=\"ea-toast-container\" aria-live=\"polite\" aria-atomic=\"false\">\n    @for (toast of toastService.toasts(); track toast.id) {\n      <div\n        class=\"ea-toast ea-toast--{{ toast.variant }}\"\n        role=\"status\">\n        <span class=\"ea-toast__message\">{{ toast.message }}</span>\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n          </svg>\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-toast--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-toast--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-toast--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-toast__close:hover{opacity:1}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ea-toast', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (toastService.toasts().length) {\n  <div class=\"ea-toast-container\" aria-live=\"polite\" aria-atomic=\"false\">\n    @for (toast of toastService.toasts(); track toast.id) {\n      <div\n        class=\"ea-toast ea-toast--{{ toast.variant }}\"\n        role=\"status\">\n        <span class=\"ea-toast__message\">{{ toast.message }}</span>\n        <button\n          class=\"ea-toast__close\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          (click)=\"toastService.dismiss(toast.id)\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n          </svg>\n        </button>\n      </div>\n    }\n  </div>\n}\n", styles: [".ea-toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);left:var(--space-6);z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);pointer-events:none}@media(min-width:640px){.ea-toast-container{left:auto;max-width:24rem}}.ea-toast{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-family-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--color-success-subtle);color:var(--color-success-700)}.ea-toast--warning{background-color:var(--color-warning-subtle);color:var(--color-warning-700)}.ea-toast--error{background-color:var(--color-error-subtle);color:var(--color-error-700)}.ea-toast--info{background-color:var(--color-info-subtle);color:var(--color-info-700)}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:inherit;opacity:.7;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-colors)}.ea-toast__close:hover{opacity:1}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}\n"] }]
+        }] });
+
+class TooltipDirective {
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    eaTooltip = input.required(...(ngDevMode ? [{ debugName: "eaTooltip" }] : /* istanbul ignore next */ []));
+    tooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+    tooltipEl = null;
+    showHandler = () => this.show();
+    hideHandler = () => this.hide();
+    constructor() {
+        const native = this.el.nativeElement;
+        native.addEventListener('mouseenter', this.showHandler);
+        native.addEventListener('mouseleave', this.hideHandler);
+        native.addEventListener('focus', this.showHandler);
+        native.addEventListener('blur', this.hideHandler);
+    }
+    ngOnDestroy() {
+        const native = this.el.nativeElement;
+        native.removeEventListener('mouseenter', this.showHandler);
+        native.removeEventListener('mouseleave', this.hideHandler);
+        native.removeEventListener('focus', this.showHandler);
+        native.removeEventListener('blur', this.hideHandler);
+        this.hide();
+    }
+    show() {
+        if (this.tooltipEl || !this.eaTooltip())
+            return;
+        this.tooltipEl = this.renderer.createElement('div');
+        this.renderer.addClass(this.tooltipEl, 'ea-tooltip');
+        this.renderer.addClass(this.tooltipEl, `ea-tooltip--${this.tooltipPosition()}`);
+        this.tooltipEl.textContent = this.eaTooltip();
+        this.renderer.appendChild(document.body, this.tooltipEl);
+        this.positionTooltip();
+    }
+    hide() {
+        if (this.tooltipEl) {
+            this.tooltipEl.remove();
+            this.tooltipEl = null;
+        }
+    }
+    positionTooltip() {
+        if (!this.tooltipEl)
+            return;
+        const hostRect = this.el.nativeElement.getBoundingClientRect();
+        const tooltipRect = this.tooltipEl.getBoundingClientRect();
+        const gap = 8;
+        let top;
+        let left;
+        switch (this.tooltipPosition()) {
+            case 'top':
+                top = hostRect.top - tooltipRect.height - gap;
+                left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
+                break;
+            case 'bottom':
+                top = hostRect.bottom + gap;
+                left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
+                break;
+            case 'left':
+                top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
+                left = hostRect.left - tooltipRect.width - gap;
+                break;
+            case 'right':
+                top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
+                left = hostRect.right + gap;
+                break;
+        }
+        this.renderer.setStyle(this.tooltipEl, 'top', `${top + window.scrollY}px`);
+        this.renderer.setStyle(this.tooltipEl, 'left', `${left + window.scrollX}px`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: TooltipDirective, isStandalone: true, selector: "[eaTooltip]", inputs: { eaTooltip: { classPropertyName: "eaTooltip", publicName: "eaTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eaTooltip]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { eaTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "eaTooltip", required: true }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }] } });
+
 // =============================================================================
 // EAGAMI UI — Public API
 // =============================================================================
@@ -532,5 +1683,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CardComponent, CheckboxComponent, DialogComponent, DropdownComponent, InputComponent, RadioComponent, RadioGroupComponent };
+export { AlertCircleIconComponent, AvatarComponent, AvatarEditorComponent, BadgeComponent, ButtonComponent, CardComponent, CheckIconComponent, CheckboxComponent, DialogComponent, DividerComponent, DropdownComponent, EyeIconComponent, EyeOffIconComponent, GoogleIconComponent, InfoIconComponent, InputComponent, LoaderIconComponent, RadioComponent, RadioGroupComponent, SpinnerComponent, SwitchComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective, UserIconComponent, XIconComponent };
 //# sourceMappingURL=eagami-ui.mjs.map