@lesterarte/sefin-ui 0.0.59 → 0.0.61

package/fesm2022/lesterarte-sefin-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, forwardRef, ViewChild, HostListener, signal, computed, ContentChild, ViewEncapsulation } from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, HostBinding, forwardRef, ViewChild, HostListener, signal, computed, ContentChild, ViewEncapsulation } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/platform-browser';
@@ -144,17 +144,19 @@ var spacing = /*#__PURE__*/Object.freeze({
 
 /**
  * Component and icon size design tokens
- * Based on 8px grid system for consistency across SEFIN UI
+ * Single reference scale (sm/md/lg) aligned with TextField/FormField across the platform
  */
-const COMPONENT_HEIGHT_TOKENS = {
-    sm: '32px', // Button, Select, IconButton, Tab sm
-    md: '40px', // Button, Select, IconButton, Tab md
-    lg: '48px', // Button, Select, IconButton, Tab lg
-};
+// Reference heights: used by TextField, FormField, Select, Autocomplete, Button, etc.
 const INPUT_HEIGHT_TOKENS = {
-    sm: '40px', // Textfield, FormField sm (dense)
-    md: '48px', // Textfield, FormField md (Material min touch target)
-    lg: '56px', // Textfield, FormField lg
+    sm: '34px',
+    md: '40px',
+    lg: '44px',
+};
+// Same as INPUT_HEIGHT_TOKENS so all controls share the same sm/md/lg sizes
+const COMPONENT_HEIGHT_TOKENS = {
+    sm: INPUT_HEIGHT_TOKENS.sm,
+    md: INPUT_HEIGHT_TOKENS.md,
+    lg: INPUT_HEIGHT_TOKENS.lg,
 };
 const CHIP_HEIGHT_TOKENS = {
     sm: '24px',
@@ -467,6 +469,22 @@ class ThemeLoader {
         Object.entries(shadowTokens).forEach(([key, value]) => {
             root.style.setProperty(`--sefin-shadow-${key}`, value);
         });
+        // Apply component/input height and size tokens (for Storybook and apps using ThemeLoader)
+        Object.entries(COMPONENT_HEIGHT_TOKENS).forEach(([key, value]) => {
+            root.style.setProperty(`--sefin-component-height-${key}`, value);
+        });
+        Object.entries(INPUT_HEIGHT_TOKENS).forEach(([key, value]) => {
+            root.style.setProperty(`--sefin-input-height-${key}`, value);
+        });
+        Object.entries(CHIP_HEIGHT_TOKENS).forEach(([key, value]) => {
+            root.style.setProperty(`--sefin-chip-height-${key}`, value);
+        });
+        Object.entries(CONTROL_SIZE_TOKENS).forEach(([key, value]) => {
+            root.style.setProperty(`--sefin-control-size-${key}`, value);
+        });
+        Object.entries(ICON_SIZE_TOKENS).forEach(([key, value]) => {
+            root.style.setProperty(`--sefin-icon-size-${key}`, value);
+        });
         // Set theme attribute for CSS selectors
         let themeAttribute;
         if (typeof themeName === 'string') {
@@ -583,6 +601,22 @@ class ThemeLoader {
         Object.entries(shadowTokens).forEach(([key, value]) => {
             css += `  --sefin-shadow-${key}: ${value};\n`;
         });
+        // Component/input height and size tokens
+        Object.entries(COMPONENT_HEIGHT_TOKENS).forEach(([key, value]) => {
+            css += `  --sefin-component-height-${key}: ${value};\n`;
+        });
+        Object.entries(INPUT_HEIGHT_TOKENS).forEach(([key, value]) => {
+            css += `  --sefin-input-height-${key}: ${value};\n`;
+        });
+        Object.entries(CHIP_HEIGHT_TOKENS).forEach(([key, value]) => {
+            css += `  --sefin-chip-height-${key}: ${value};\n`;
+        });
+        Object.entries(CONTROL_SIZE_TOKENS).forEach(([key, value]) => {
+            css += `  --sefin-control-size-${key}: ${value};\n`;
+        });
+        Object.entries(ICON_SIZE_TOKENS).forEach(([key, value]) => {
+            css += `  --sefin-icon-size-${key}: ${value};\n`;
+        });
         css += '}\n';
         return css;
     }
@@ -1419,11 +1453,13 @@ class StackComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: StackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: StackComponent, isStandalone: true, selector: "sefin-stack", inputs: { direction: "direction", spacing: "spacing", align: "align", justify: "justify", wrap: "wrap", class: "class" }, ngImport: i0, template: "<div [class]=\"stackClasses\" [ngStyle]=\"stackStyles\">\n  <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-stack{display:flex!important;gap:0}.sefin-stack--column{flex-direction:column}.sefin-stack--row{flex-direction:row}.sefin-stack--wrap{flex-wrap:wrap}.sefin-stack--spacing-xs{gap:var(--sefin-spacing-xs, 4px)!important}.sefin-stack--spacing-sm{gap:var(--sefin-spacing-sm, 8px)!important}.sefin-stack--spacing-md{gap:var(--sefin-spacing-md, 16px)!important}.sefin-stack--spacing-lg{gap:var(--sefin-spacing-lg, 24px)!important}.sefin-stack--spacing-xl{gap:var(--sefin-spacing-xl, 32px)!important}.sefin-stack--spacing-2xl{gap:var(--sefin-spacing-2xl, 48px)!important}.sefin-stack--align-start{align-items:flex-start}.sefin-stack--align-center{align-items:center}.sefin-stack--align-end{align-items:flex-end}.sefin-stack--align-stretch{align-items:stretch}.sefin-stack--justify-start{justify-content:flex-start}.sefin-stack--justify-center{justify-content:center}.sefin-stack--justify-end{justify-content:flex-end}.sefin-stack--justify-space-between{justify-content:space-between}.sefin-stack--justify-space-around{justify-content:space-around}.sefin-stack--justify-space-evenly{justify-content:space-evenly}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: StackComponent, isStandalone: true, selector: "sefin-stack", inputs: { direction: "direction", spacing: "spacing", align: "align", justify: "justify", wrap: "wrap", class: "class" }, host: { styleAttribute: "display: block; width: 100%;" }, ngImport: i0, template: "<div [class]=\"stackClasses\" [ngStyle]=\"stackStyles\">\n  <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-stack{display:flex!important;gap:0}.sefin-stack--column{flex-direction:column}.sefin-stack--row{flex-direction:row}.sefin-stack--wrap{flex-wrap:wrap}.sefin-stack--spacing-xs{gap:var(--sefin-spacing-xs, 4px)!important}.sefin-stack--spacing-sm{gap:var(--sefin-spacing-sm, 8px)!important}.sefin-stack--spacing-md{gap:var(--sefin-spacing-md, 16px)!important}.sefin-stack--spacing-lg{gap:var(--sefin-spacing-lg, 24px)!important}.sefin-stack--spacing-xl{gap:var(--sefin-spacing-xl, 32px)!important}.sefin-stack--spacing-2xl{gap:var(--sefin-spacing-2xl, 48px)!important}.sefin-stack--align-start{align-items:flex-start}.sefin-stack--align-center{align-items:center}.sefin-stack--align-end{align-items:flex-end}.sefin-stack--align-stretch{align-items:stretch}.sefin-stack--justify-start{justify-content:flex-start}.sefin-stack--justify-center{justify-content:center}.sefin-stack--justify-end{justify-content:flex-end}.sefin-stack--justify-space-between{justify-content:space-between}.sefin-stack--justify-space-around{justify-content:space-around}.sefin-stack--justify-space-evenly{justify-content:space-evenly}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: StackComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sefin-stack', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"stackClasses\" [ngStyle]=\"stackStyles\">\n  <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-stack{display:flex!important;gap:0}.sefin-stack--column{flex-direction:column}.sefin-stack--row{flex-direction:row}.sefin-stack--wrap{flex-wrap:wrap}.sefin-stack--spacing-xs{gap:var(--sefin-spacing-xs, 4px)!important}.sefin-stack--spacing-sm{gap:var(--sefin-spacing-sm, 8px)!important}.sefin-stack--spacing-md{gap:var(--sefin-spacing-md, 16px)!important}.sefin-stack--spacing-lg{gap:var(--sefin-spacing-lg, 24px)!important}.sefin-stack--spacing-xl{gap:var(--sefin-spacing-xl, 32px)!important}.sefin-stack--spacing-2xl{gap:var(--sefin-spacing-2xl, 48px)!important}.sefin-stack--align-start{align-items:flex-start}.sefin-stack--align-center{align-items:center}.sefin-stack--align-end{align-items:flex-end}.sefin-stack--align-stretch{align-items:stretch}.sefin-stack--justify-start{justify-content:flex-start}.sefin-stack--justify-center{justify-content:center}.sefin-stack--justify-end{justify-content:flex-end}.sefin-stack--justify-space-between{justify-content:space-between}.sefin-stack--justify-space-around{justify-content:space-around}.sefin-stack--justify-space-evenly{justify-content:space-evenly}\n"] }]
+            args: [{ selector: 'sefin-stack', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.Default, host: {
+                        style: 'display: block; width: 100%;',
+                    }, template: "<div [class]=\"stackClasses\" [ngStyle]=\"stackStyles\">\n  <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-stack{display:flex!important;gap:0}.sefin-stack--column{flex-direction:column}.sefin-stack--row{flex-direction:row}.sefin-stack--wrap{flex-wrap:wrap}.sefin-stack--spacing-xs{gap:var(--sefin-spacing-xs, 4px)!important}.sefin-stack--spacing-sm{gap:var(--sefin-spacing-sm, 8px)!important}.sefin-stack--spacing-md{gap:var(--sefin-spacing-md, 16px)!important}.sefin-stack--spacing-lg{gap:var(--sefin-spacing-lg, 24px)!important}.sefin-stack--spacing-xl{gap:var(--sefin-spacing-xl, 32px)!important}.sefin-stack--spacing-2xl{gap:var(--sefin-spacing-2xl, 48px)!important}.sefin-stack--align-start{align-items:flex-start}.sefin-stack--align-center{align-items:center}.sefin-stack--align-end{align-items:flex-end}.sefin-stack--align-stretch{align-items:stretch}.sefin-stack--justify-start{justify-content:flex-start}.sefin-stack--justify-center{justify-content:center}.sefin-stack--justify-end{justify-content:flex-end}.sefin-stack--justify-space-between{justify-content:space-between}.sefin-stack--justify-space-around{justify-content:space-around}.sefin-stack--justify-space-evenly{justify-content:space-evenly}\n"] }]
         }], propDecorators: { direction: [{
                 type: Input
             }], spacing: [{
@@ -1438,6 +1474,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 type: Input
             }] } });
 
+const CONTAINER_MAX_WIDTH = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    full: '100%',
+};
 class ContainerComponent {
     /** Container size. Options: 'sm' | 'md' | 'lg' | 'xl' | 'full' */
     size = 'md';
@@ -1445,8 +1488,18 @@ class ContainerComponent {
     variant = 'default';
     /** Whether the container has padding */
     padding = true;
+    /** Optional custom max-width (e.g. '500px', '50rem'). When set, overrides size max-width. */
+    maxWidth;
     /** Additional CSS classes */
     class = '';
+    hostDisplay = 'block';
+    hostWidth = '100%';
+    get hostMaxWidth() {
+        return this.maxWidth ?? CONTAINER_MAX_WIDTH[this.size];
+    }
+    hostMarginLeft = 'auto';
+    hostMarginRight = 'auto';
+    hostBoxSizing = 'border-box';
     get containerClasses() {
         return [
             'sefin-container',
@@ -1459,7 +1512,7 @@ class ContainerComponent {
             .join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ContainerComponent, isStandalone: true, selector: "sefin-container", inputs: { size: "size", variant: "variant", padding: "padding", class: "class" }, ngImport: i0, template: "<div [class]=\"containerClasses\">\n  <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-container{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}.sefin-container--fluid{max-width:100%;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-container--sm{max-width:640px}.sefin-container--md{max-width:768px}.sefin-container--lg{max-width:1024px}.sefin-container--xl{max-width:1280px}.sefin-container--full{max-width:100%}.sefin-container--padded{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}@media(min-width:640px){.sefin-container--padded{padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}}@media(min-width:1024px){.sefin-container--padded{padding-left:var(--sefin-spacing-xl, 32px);padding-right:var(--sefin-spacing-xl, 32px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: ContainerComponent, isStandalone: true, selector: "sefin-container", inputs: { size: "size", variant: "variant", padding: "padding", maxWidth: "maxWidth", class: "class" }, host: { properties: { "style.display": "this.hostDisplay", "style.width": "this.hostWidth", "style.max-width": "this.hostMaxWidth", "style.margin-left": "this.hostMarginLeft", "style.margin-right": "this.hostMarginRight", "style.box-sizing": "this.hostBoxSizing" } }, ngImport: i0, template: "<div [class]=\"containerClasses\">\n  <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-container{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}.sefin-container--fluid{max-width:100%;padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-container--sm{max-width:640px}.sefin-container--md{max-width:768px}.sefin-container--lg{max-width:1024px}.sefin-container--xl{max-width:1280px}.sefin-container--full{max-width:100%}.sefin-container--padded{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}@media(min-width:640px){.sefin-container--padded{padding-left:var(--sefin-spacing-lg, 24px);padding-right:var(--sefin-spacing-lg, 24px)}}@media(min-width:1024px){.sefin-container--padded{padding-left:var(--sefin-spacing-xl, 32px);padding-right:var(--sefin-spacing-xl, 32px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ContainerComponent, decorators: [{
             type: Component,
@@ -1470,8 +1523,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 type: Input
             }], padding: [{
                 type: Input
+            }], maxWidth: [{
+                type: Input
             }], class: [{
                 type: Input
+            }], hostDisplay: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], hostWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], hostMaxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width']
+            }], hostMarginLeft: [{
+                type: HostBinding,
+                args: ['style.margin-left']
+            }], hostMarginRight: [{
+                type: HostBinding,
+                args: ['style.margin-right']
+            }], hostBoxSizing: [{
+                type: HostBinding,
+                args: ['style.box-sizing']
             }] } });
 
 class CheckboxComponent {
@@ -1949,7 +2022,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "buttonRef", first: true, predicate: ["buttonRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n  <button\n    #buttonRef\n    type=\"button\"\n    [class]=\"buttonClasses\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeyDown($event)\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-invalid]=\"hasErrorState\"\n    [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n    aria-label=\"Select option\"\n  >\n    <span class=\"sefin-select__value\" [class.sefin-select__value--placeholder]=\"!getSelectedLabel()\">\n      {{ getSelectedLabel() || placeholder }}\n    </span>\n    <div class=\"sefin-select__arrow\" [class.sefin-select__arrow--open]=\"isOpen\">\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M4 6L8 10L12 6\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </button>\n  <div\n    *ngIf=\"isOpen && options && options.length > 0\"\n    #dropdownRef\n    class=\"sefin-select__dropdown\"\n    role=\"listbox\"\n  >\n    <ul class=\"sefin-select__list\">\n      <li\n        *ngFor=\"let option of options; let i = index\"\n        [attr.data-index]=\"i\"\n        [class.sefin-select__option]=\"true\"\n        [class.sefin-select__option--selected]=\"i === selectedIndex\"\n        [class.sefin-select__option--disabled]=\"option.disabled\"\n        [class.sefin-select__option--active]=\"option.value === value\"\n        (click)=\"selectOption(option)\"\n        [attr.aria-selected]=\"option.value === value\"\n        role=\"option\"\n      >\n        {{ option.label }}\n      </li>\n    </ul>\n  </div>\n  <div\n    *ngIf=\"isOpen && (!options || options.length === 0)\"\n    class=\"sefin-select__dropdown sefin-select__dropdown--empty\"\n  >\n    <div class=\"sefin-select__no-options\">\n      No hay opciones disponibles\n    </div>\n  </div>\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint\"\n    [id]=\"internalId + '-helper'\"\n    class=\"sefin-select__helper\"\n    [class.sefin-select__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-select__error-message\">\n      {{ errorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-select__hint\">\n      {{ hint }}\n    </span>\n  </div>\n</div>\n\n", styles: [".sefin-select{position:relative;width:100%}.sefin-select__button{width:100%;display:flex;align-items:center;justify-content:space-between;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none;cursor:pointer;text-align:left;gap:var(--sefin-spacing-sm);box-sizing:border-box}.sefin-select__button:focus-visible{border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-select__button:hover:not(.sefin-select__button--disabled){border-color:var(--sefin-color-border-focus)}.sefin-select__button--disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-select__button--open{border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-select__button--error{border-color:var(--sefin-color-error)}.sefin-select__button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-select__button--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-select__button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sefin-color-text)}.sefin-select__value--placeholder{color:var(--sefin-color-text-secondary)}.sefin-select__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-select__arrow svg{width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm)}.sefin-select__arrow--open{transform:rotate(180deg)}.sefin-select__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-select__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-select__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-select__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-select__option:hover:not(.sefin-select__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-select__option--selected,.sefin-select__option--active{background-color:var(--sefin-color-primary-light, var(--sefin-color-surface-hover));color:var(--sefin-color-text);font-weight:var(--sefin-font-weight-medium)}.sefin-select__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-select__no-options{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-select--open .sefin-select__button{border-color:var(--sefin-color-border-focus)}.sefin-select__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-select__hint{color:var(--sefin-color-text-secondary)}.sefin-select__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+        ], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "buttonRef", first: true, predicate: ["buttonRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n  <button\n    #buttonRef\n    type=\"button\"\n    [class]=\"buttonClasses\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeyDown($event)\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-invalid]=\"hasErrorState\"\n    [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n    aria-label=\"Select option\"\n  >\n    <span class=\"sefin-select__value\" [class.sefin-select__value--placeholder]=\"!getSelectedLabel()\">\n      {{ getSelectedLabel() || placeholder }}\n    </span>\n    <div class=\"sefin-select__arrow\" [class.sefin-select__arrow--open]=\"isOpen\">\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M4 6L8 10L12 6\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </button>\n  <div\n    *ngIf=\"isOpen && options && options.length > 0\"\n    #dropdownRef\n    class=\"sefin-select__dropdown\"\n    role=\"listbox\"\n  >\n    <ul class=\"sefin-select__list\">\n      <li\n        *ngFor=\"let option of options; let i = index\"\n        [attr.data-index]=\"i\"\n        [class.sefin-select__option]=\"true\"\n        [class.sefin-select__option--selected]=\"i === selectedIndex\"\n        [class.sefin-select__option--disabled]=\"option.disabled\"\n        [class.sefin-select__option--active]=\"option.value === value\"\n        (click)=\"selectOption(option)\"\n        [attr.aria-selected]=\"option.value === value\"\n        role=\"option\"\n      >\n        {{ option.label }}\n      </li>\n    </ul>\n  </div>\n  <div\n    *ngIf=\"isOpen && (!options || options.length === 0)\"\n    class=\"sefin-select__dropdown sefin-select__dropdown--empty\"\n  >\n    <div class=\"sefin-select__no-options\">\n      No hay opciones disponibles\n    </div>\n  </div>\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint\"\n    [id]=\"internalId + '-helper'\"\n    class=\"sefin-select__helper\"\n    [class.sefin-select__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-select__error-message\">\n      {{ errorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-select__hint\">\n      {{ hint }}\n    </span>\n  </div>\n</div>\n\n", styles: [".sefin-select{position:relative;width:100%}.sefin-select__button{width:100%;display:flex;align-items:center;justify-content:space-between;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);transition:all .2s ease-in-out;outline:none;cursor:pointer;text-align:left;gap:var(--sefin-spacing-sm);box-sizing:border-box}.sefin-select__button:focus-visible{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-select__button--disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-select__button--open{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-select__button--error{border-color:var(--sefin-color-error)}.sefin-select__button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-select__button--md{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-select__button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sefin-color-text)}.sefin-select__value--placeholder{color:var(--sefin-color-text-secondary)}.sefin-select__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-select__arrow svg{width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm)}.sefin-select__arrow--open{transform:rotate(180deg)}.sefin-select__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-select__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-select__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-select__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-select__option:hover:not(.sefin-select__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-select__option--selected,.sefin-select__option--active{background-color:var(--sefin-color-primary-light, var(--sefin-color-surface-hover));color:var(--sefin-color-text);font-weight:var(--sefin-font-weight-medium)}.sefin-select__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-select__no-options{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-select--open .sefin-select__button{border-color:var(--sefin-color-border-focus)}.sefin-select__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-select__hint{color:var(--sefin-color-text-secondary)}.sefin-select__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -1959,7 +2032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
-                    ], template: "<div [class]=\"containerClasses\" #containerRef>\n  <button\n    #buttonRef\n    type=\"button\"\n    [class]=\"buttonClasses\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeyDown($event)\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-invalid]=\"hasErrorState\"\n    [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n    aria-label=\"Select option\"\n  >\n    <span class=\"sefin-select__value\" [class.sefin-select__value--placeholder]=\"!getSelectedLabel()\">\n      {{ getSelectedLabel() || placeholder }}\n    </span>\n    <div class=\"sefin-select__arrow\" [class.sefin-select__arrow--open]=\"isOpen\">\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M4 6L8 10L12 6\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </button>\n  <div\n    *ngIf=\"isOpen && options && options.length > 0\"\n    #dropdownRef\n    class=\"sefin-select__dropdown\"\n    role=\"listbox\"\n  >\n    <ul class=\"sefin-select__list\">\n      <li\n        *ngFor=\"let option of options; let i = index\"\n        [attr.data-index]=\"i\"\n        [class.sefin-select__option]=\"true\"\n        [class.sefin-select__option--selected]=\"i === selectedIndex\"\n        [class.sefin-select__option--disabled]=\"option.disabled\"\n        [class.sefin-select__option--active]=\"option.value === value\"\n        (click)=\"selectOption(option)\"\n        [attr.aria-selected]=\"option.value === value\"\n        role=\"option\"\n      >\n        {{ option.label }}\n      </li>\n    </ul>\n  </div>\n  <div\n    *ngIf=\"isOpen && (!options || options.length === 0)\"\n    class=\"sefin-select__dropdown sefin-select__dropdown--empty\"\n  >\n    <div class=\"sefin-select__no-options\">\n      No hay opciones disponibles\n    </div>\n  </div>\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint\"\n    [id]=\"internalId + '-helper'\"\n    class=\"sefin-select__helper\"\n    [class.sefin-select__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-select__error-message\">\n      {{ errorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-select__hint\">\n      {{ hint }}\n    </span>\n  </div>\n</div>\n\n", styles: [".sefin-select{position:relative;width:100%}.sefin-select__button{width:100%;display:flex;align-items:center;justify-content:space-between;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none;cursor:pointer;text-align:left;gap:var(--sefin-spacing-sm);box-sizing:border-box}.sefin-select__button:focus-visible{border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-select__button:hover:not(.sefin-select__button--disabled){border-color:var(--sefin-color-border-focus)}.sefin-select__button--disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-select__button--open{border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-select__button--error{border-color:var(--sefin-color-error)}.sefin-select__button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-select__button--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-select__button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sefin-color-text)}.sefin-select__value--placeholder{color:var(--sefin-color-text-secondary)}.sefin-select__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-select__arrow svg{width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm)}.sefin-select__arrow--open{transform:rotate(180deg)}.sefin-select__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-select__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-select__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-select__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-select__option:hover:not(.sefin-select__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-select__option--selected,.sefin-select__option--active{background-color:var(--sefin-color-primary-light, var(--sefin-color-surface-hover));color:var(--sefin-color-text);font-weight:var(--sefin-font-weight-medium)}.sefin-select__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-select__no-options{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-select--open .sefin-select__button{border-color:var(--sefin-color-border-focus)}.sefin-select__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-select__hint{color:var(--sefin-color-text-secondary)}.sefin-select__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\n"] }]
+                    ], template: "<div [class]=\"containerClasses\" #containerRef>\n  <button\n    #buttonRef\n    type=\"button\"\n    [class]=\"buttonClasses\"\n    [disabled]=\"disabled\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeyDown($event)\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-invalid]=\"hasErrorState\"\n    [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n    aria-label=\"Select option\"\n  >\n    <span class=\"sefin-select__value\" [class.sefin-select__value--placeholder]=\"!getSelectedLabel()\">\n      {{ getSelectedLabel() || placeholder }}\n    </span>\n    <div class=\"sefin-select__arrow\" [class.sefin-select__arrow--open]=\"isOpen\">\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M4 6L8 10L12 6\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n  </button>\n  <div\n    *ngIf=\"isOpen && options && options.length > 0\"\n    #dropdownRef\n    class=\"sefin-select__dropdown\"\n    role=\"listbox\"\n  >\n    <ul class=\"sefin-select__list\">\n      <li\n        *ngFor=\"let option of options; let i = index\"\n        [attr.data-index]=\"i\"\n        [class.sefin-select__option]=\"true\"\n        [class.sefin-select__option--selected]=\"i === selectedIndex\"\n        [class.sefin-select__option--disabled]=\"option.disabled\"\n        [class.sefin-select__option--active]=\"option.value === value\"\n        (click)=\"selectOption(option)\"\n        [attr.aria-selected]=\"option.value === value\"\n        role=\"option\"\n      >\n        {{ option.label }}\n      </li>\n    </ul>\n  </div>\n  <div\n    *ngIf=\"isOpen && (!options || options.length === 0)\"\n    class=\"sefin-select__dropdown sefin-select__dropdown--empty\"\n  >\n    <div class=\"sefin-select__no-options\">\n      No hay opciones disponibles\n    </div>\n  </div>\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint\"\n    [id]=\"internalId + '-helper'\"\n    class=\"sefin-select__helper\"\n    [class.sefin-select__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-select__error-message\">\n      {{ errorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-select__hint\">\n      {{ hint }}\n    </span>\n  </div>\n</div>\n\n", styles: [".sefin-select{position:relative;width:100%}.sefin-select__button{width:100%;display:flex;align-items:center;justify-content:space-between;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);transition:all .2s ease-in-out;outline:none;cursor:pointer;text-align:left;gap:var(--sefin-spacing-sm);box-sizing:border-box}.sefin-select__button:focus-visible{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-select__button--disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-select__button--open{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-select__button--error{border-color:var(--sefin-color-error)}.sefin-select__button--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-select__button--md{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-select__button--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-select__value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sefin-color-text)}.sefin-select__value--placeholder{color:var(--sefin-color-text-secondary)}.sefin-select__arrow{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-select__arrow svg{width:var(--sefin-icon-size-sm);height:var(--sefin-icon-size-sm)}.sefin-select__arrow--open{transform:rotate(180deg)}.sefin-select__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-select__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-select__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-select__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-select__option:hover:not(.sefin-select__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-select__option--selected,.sefin-select__option--active{background-color:var(--sefin-color-primary-light, var(--sefin-color-surface-hover));color:var(--sefin-color-text);font-weight:var(--sefin-font-weight-medium)}.sefin-select__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-select__no-options{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-select--open .sefin-select__button{border-color:var(--sefin-color-border-focus)}.sefin-select__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-select__hint{color:var(--sefin-color-text-secondary)}.sefin-select__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\n"] }]
         }], propDecorators: { containerRef: [{
                 type: ViewChild,
                 args: ['containerRef', { static: false }]
@@ -2965,7 +3038,7 @@ class TextFieldComponent {
                 useExisting: forwardRef(() => TextFieldComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"textFieldClasses\">\n  <!-- Input Container -->\n  <div class=\"sefin-textfield__input-container\">\n    <!-- Leading Icon -->\n    <div *ngIf=\"leadingIcon\" class=\"sefin-textfield__leading-icon\">\n      <sefin-icon\n        [name]=\"leadingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Input Wrapper -->\n    <div class=\"sefin-textfield__input-wrapper\">\n      <!-- Input -->\n      <input\n        #inputRef\n        [id]=\"id\"\n        [name]=\"name\"\n        [type]=\"type\"\n        [value]=\"value\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [pattern]=\"pattern\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-label]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"hasErrorState\"\n        [attr.aria-describedby]=\"\n          displayError || hint || showCounter ? id + '-helper' : null\n        \"\n        [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n        class=\"sefin-textfield__input\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- Trailing Icon -->\n    <div\n      *ngIf=\"trailingIcon\"\n      class=\"sefin-textfield__trailing-icon\"\n      (click)=\"onTrailingIconClick($event)\"\n      [attr.aria-label]=\"'Trailing icon'\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <sefin-icon\n        [name]=\"trailingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Outline/Filled border -->\n    <div class=\"sefin-textfield__border\"></div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint || showCounter\"\n    [id]=\"id + '-helper'\"\n    class=\"sefin-textfield__helper\"\n    [class.sefin-textfield__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-textfield__error-message\">\n      {{ displayErrorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-textfield__hint\">\n      {{ hint }}\n    </span>\n    <span\n      *ngIf=\"showCounter && !displayError\"\n      class=\"sefin-textfield__counter\"\n      [class.sefin-textfield__counter--warning]=\"\n        maxLength && characterCount > maxLength * 0.8\n      \"\n    >\n      {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n    </span>\n  </div>\n</div>\n", styles: [".sefin-textfield{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textfield__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-textfield__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible}.sefin-textfield__label{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text-secondary, #666);transition:all .2s cubic-bezier(.4,0,.2,1);transform-origin:top left;white-space:nowrap;overflow:visible;text-overflow:ellipsis;max-width:calc(100% - var(--sefin-spacing-xl));z-index:1}.sefin-textfield__label--floating{top:0;transform:translateY(-50%) scale(.75);font-weight:var(--sefin-font-weight-medium, 500);background-color:transparent;padding:4px var(--sefin-spacing-xs, 4px);margin-left:calc(var(--sefin-spacing-xs, 4px) * -1);z-index:3;color:var(--sefin-color-primary, #1976d2);overflow:visible}.sefin-textfield__label--floating:before{content:\"\";position:absolute;top:0;left:calc(var(--sefin-spacing-xs, 4px) * -1);right:calc(var(--sefin-spacing-xs, 4px) * -1);height:2px;transform:translateY(-50%);z-index:-1;pointer-events:none;background-color:var(--sefin-color-surface, #ffffff);box-sizing:border-box}.sefin-textfield__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336)}.sefin-textfield__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5}.sefin-textfield__input::placeholder{color:var(--sefin-color-text-disabled)!important;opacity:0;transition:opacity .2s ease-in-out}.sefin-textfield__label--floating~.sefin-textfield__input::placeholder{opacity:0}.sefin-textfield__label--floating~.sefin-textfield__input:focus::placeholder{opacity:1}.sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input:focus::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input:disabled,.sefin-textfield__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textfield__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-textfield__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-ms-reveal,.sefin-textfield__input[type=password]::-ms-clear,.sefin-textfield__input[data-password-field=true]::-ms-reveal,.sefin-textfield__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-moz-focus-inner,.sefin-textfield__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-textfield--no-label .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield--no-label .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield--no-label .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield--no-label .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__label:not(.sefin-textfield__label--floating)~.sefin-textfield__input::placeholder{opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textfield__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-textfield__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-sm);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon{color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-textfield__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textfield__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textfield__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textfield__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textfield__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textfield--outlined .sefin-textfield__input-container{border:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md, 8px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textfield--outlined:not(.sefin-textfield--error):not(.sefin-textfield--focused):hover .sefin-textfield__input-container{border-color:var(--sefin-color-text)}.sefin-textfield--outlined .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__label--floating{background-color:transparent}.sefin-textfield--outlined .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--outlined .sefin-textfield__border{display:none}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 1px var(--sefin-color-primary-light, rgba(25, 118, 210, .1))}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--focused.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 1px var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--filled .sefin-textfield__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textfield--filled:not(.sefin-textfield--error):not(.sefin-textfield--focused):hover .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-text)}.sefin-textfield--filled .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface-hover, #f5f5f5);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--filled .sefin-textfield__border{display:none}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__label{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textfield--standard .sefin-textfield__label{left:0}.sefin-textfield--standard .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff)}.sefin-textfield--standard .sefin-textfield__input-wrapper{padding-left:0;padding-right:0}.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper,.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-textfield--standard .sefin-textfield__border{height:1px;transition:background-color .2s ease-in-out}.sefin-textfield--standard:not(.sefin-textfield--error):not(.sefin-textfield--focused):hover .sefin-textfield__border{background-color:var(--sefin-color-text)}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--sm .sefin-textfield__input-container{min-height:var(--sefin-input-height-sm)}.sefin-textfield--sm .sefin-textfield__input,.sefin-textfield--sm .sefin-textfield__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textfield--md .sefin-textfield__input-container{min-height:var(--sefin-input-height-md)}.sefin-textfield--lg .sefin-textfield__input-container{min-height:var(--sefin-input-height-lg)}.sefin-textfield--lg .sefin-textfield__input,.sefin-textfield--lg .sefin-textfield__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--disabled{cursor:not-allowed;opacity:.6}.sefin-textfield--readonly .sefin-textfield__input{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"textFieldClasses\">\n  <!-- Input Container -->\n  <div class=\"sefin-textfield__input-container\">\n    <!-- Leading Icon -->\n    <div *ngIf=\"leadingIcon\" class=\"sefin-textfield__leading-icon\">\n      <sefin-icon\n        [name]=\"leadingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Input Wrapper -->\n    <div class=\"sefin-textfield__input-wrapper\">\n      <!-- Input -->\n      <input\n        #inputRef\n        [id]=\"id\"\n        [name]=\"name\"\n        [type]=\"type\"\n        [value]=\"value\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [pattern]=\"pattern\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-label]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"hasErrorState\"\n        [attr.aria-describedby]=\"\n          displayError || hint || showCounter ? id + '-helper' : null\n        \"\n        [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n        class=\"sefin-textfield__input\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- Trailing Icon -->\n    <div\n      *ngIf=\"trailingIcon\"\n      class=\"sefin-textfield__trailing-icon\"\n      (click)=\"onTrailingIconClick($event)\"\n      [attr.aria-label]=\"'Trailing icon'\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <sefin-icon\n        [name]=\"trailingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Outline/Filled border -->\n    <div class=\"sefin-textfield__border\"></div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint || showCounter\"\n    [id]=\"id + '-helper'\"\n    class=\"sefin-textfield__helper\"\n    [class.sefin-textfield__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-textfield__error-message\">\n      {{ displayErrorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-textfield__hint\">\n      {{ hint }}\n    </span>\n    <span\n      *ngIf=\"showCounter && !displayError\"\n      class=\"sefin-textfield__counter\"\n      [class.sefin-textfield__counter--warning]=\"\n        maxLength && characterCount > maxLength * 0.8\n      \"\n    >\n      {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n    </span>\n  </div>\n</div>\n", styles: [".sefin-textfield{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textfield__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-textfield__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible}.sefin-textfield__label{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text-secondary, #666);transition:all .2s cubic-bezier(.4,0,.2,1);transform-origin:top left;white-space:nowrap;overflow:visible;text-overflow:ellipsis;max-width:calc(100% - var(--sefin-spacing-xl));z-index:1}.sefin-textfield__label--floating{top:0;transform:translateY(-50%) scale(.75);font-weight:var(--sefin-font-weight-medium, 500);background-color:transparent;padding:4px var(--sefin-spacing-xs, 4px);margin-left:calc(var(--sefin-spacing-xs, 4px) * -1);z-index:3;color:var(--sefin-color-primary, #1976d2);overflow:visible}.sefin-textfield__label--floating:before{content:\"\";position:absolute;top:0;left:calc(var(--sefin-spacing-xs, 4px) * -1);right:calc(var(--sefin-spacing-xs, 4px) * -1);height:2px;transform:translateY(-50%);z-index:-1;pointer-events:none;background-color:var(--sefin-color-surface, #ffffff);box-sizing:border-box}.sefin-textfield__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336)}.sefin-textfield__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5}.sefin-textfield__input::placeholder{color:var(--sefin-color-text-disabled)!important;opacity:0;transition:opacity .2s ease-in-out}.sefin-textfield__label--floating~.sefin-textfield__input::placeholder{opacity:0}.sefin-textfield__label--floating~.sefin-textfield__input:focus::placeholder{opacity:1}.sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input:focus::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input:disabled,.sefin-textfield__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textfield__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-textfield__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-ms-reveal,.sefin-textfield__input[type=password]::-ms-clear,.sefin-textfield__input[data-password-field=true]::-ms-reveal,.sefin-textfield__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-moz-focus-inner,.sefin-textfield__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-textfield--no-label .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield--no-label .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield--no-label .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield--no-label .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__label:not(.sefin-textfield__label--floating)~.sefin-textfield__input::placeholder{opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textfield__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-textfield__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon{color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-textfield__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textfield__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textfield__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textfield__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textfield__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textfield--outlined .sefin-textfield__input-container{border:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textfield--outlined .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__label--floating{background-color:transparent}.sefin-textfield--outlined .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--outlined .sefin-textfield__border{display:none}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--focused.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--filled .sefin-textfield__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px) var(--sefin-radius-xl, 16px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textfield--filled .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface-hover, #f5f5f5);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--filled .sefin-textfield__border{display:none}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textfield--standard .sefin-textfield__label{left:0}.sefin-textfield--standard .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff)}.sefin-textfield--standard .sefin-textfield__input-wrapper{padding-left:0;padding-right:0}.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper,.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-textfield--standard .sefin-textfield__border{height:1px;transition:background-color .2s ease-in-out}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--sm .sefin-textfield__input-container{min-height:var(--sefin-input-height-sm)}.sefin-textfield--sm .sefin-textfield__input,.sefin-textfield--sm .sefin-textfield__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textfield--md .sefin-textfield__input-container{min-height:var(--sefin-input-height-md)}.sefin-textfield--lg .sefin-textfield__input-container{min-height:var(--sefin-input-height-lg)}.sefin-textfield--lg .sefin-textfield__input,.sefin-textfield--lg .sefin-textfield__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--disabled{cursor:not-allowed;opacity:.6}.sefin-textfield--readonly .sefin-textfield__input{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
@@ -2980,7 +3053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             useExisting: forwardRef(() => TextFieldComponent),
                             multi: true,
                         },
-                    ], template: "<div [class]=\"textFieldClasses\">\n  <!-- Input Container -->\n  <div class=\"sefin-textfield__input-container\">\n    <!-- Leading Icon -->\n    <div *ngIf=\"leadingIcon\" class=\"sefin-textfield__leading-icon\">\n      <sefin-icon\n        [name]=\"leadingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Input Wrapper -->\n    <div class=\"sefin-textfield__input-wrapper\">\n      <!-- Input -->\n      <input\n        #inputRef\n        [id]=\"id\"\n        [name]=\"name\"\n        [type]=\"type\"\n        [value]=\"value\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [pattern]=\"pattern\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-label]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"hasErrorState\"\n        [attr.aria-describedby]=\"\n          displayError || hint || showCounter ? id + '-helper' : null\n        \"\n        [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n        class=\"sefin-textfield__input\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- Trailing Icon -->\n    <div\n      *ngIf=\"trailingIcon\"\n      class=\"sefin-textfield__trailing-icon\"\n      (click)=\"onTrailingIconClick($event)\"\n      [attr.aria-label]=\"'Trailing icon'\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <sefin-icon\n        [name]=\"trailingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Outline/Filled border -->\n    <div class=\"sefin-textfield__border\"></div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint || showCounter\"\n    [id]=\"id + '-helper'\"\n    class=\"sefin-textfield__helper\"\n    [class.sefin-textfield__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-textfield__error-message\">\n      {{ displayErrorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-textfield__hint\">\n      {{ hint }}\n    </span>\n    <span\n      *ngIf=\"showCounter && !displayError\"\n      class=\"sefin-textfield__counter\"\n      [class.sefin-textfield__counter--warning]=\"\n        maxLength && characterCount > maxLength * 0.8\n      \"\n    >\n      {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n    </span>\n  </div>\n</div>\n", styles: [".sefin-textfield{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textfield__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-textfield__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible}.sefin-textfield__label{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text-secondary, #666);transition:all .2s cubic-bezier(.4,0,.2,1);transform-origin:top left;white-space:nowrap;overflow:visible;text-overflow:ellipsis;max-width:calc(100% - var(--sefin-spacing-xl));z-index:1}.sefin-textfield__label--floating{top:0;transform:translateY(-50%) scale(.75);font-weight:var(--sefin-font-weight-medium, 500);background-color:transparent;padding:4px var(--sefin-spacing-xs, 4px);margin-left:calc(var(--sefin-spacing-xs, 4px) * -1);z-index:3;color:var(--sefin-color-primary, #1976d2);overflow:visible}.sefin-textfield__label--floating:before{content:\"\";position:absolute;top:0;left:calc(var(--sefin-spacing-xs, 4px) * -1);right:calc(var(--sefin-spacing-xs, 4px) * -1);height:2px;transform:translateY(-50%);z-index:-1;pointer-events:none;background-color:var(--sefin-color-surface, #ffffff);box-sizing:border-box}.sefin-textfield__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336)}.sefin-textfield__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5}.sefin-textfield__input::placeholder{color:var(--sefin-color-text-disabled)!important;opacity:0;transition:opacity .2s ease-in-out}.sefin-textfield__label--floating~.sefin-textfield__input::placeholder{opacity:0}.sefin-textfield__label--floating~.sefin-textfield__input:focus::placeholder{opacity:1}.sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input:focus::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input:disabled,.sefin-textfield__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textfield__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-textfield__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-ms-reveal,.sefin-textfield__input[type=password]::-ms-clear,.sefin-textfield__input[data-password-field=true]::-ms-reveal,.sefin-textfield__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-moz-focus-inner,.sefin-textfield__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-textfield--no-label .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield--no-label .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield--no-label .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield--no-label .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__label:not(.sefin-textfield__label--floating)~.sefin-textfield__input::placeholder{opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textfield__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-textfield__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-sm);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon{color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-textfield__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textfield__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textfield__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textfield__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textfield__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textfield--outlined .sefin-textfield__input-container{border:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md, 8px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textfield--outlined:not(.sefin-textfield--error):not(.sefin-textfield--focused):hover .sefin-textfield__input-container{border-color:var(--sefin-color-text)}.sefin-textfield--outlined .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__label--floating{background-color:transparent}.sefin-textfield--outlined .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--outlined .sefin-textfield__border{display:none}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 1px var(--sefin-color-primary-light, rgba(25, 118, 210, .1))}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--focused.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 1px var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--filled .sefin-textfield__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md, 8px) var(--sefin-radius-md, 8px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textfield--filled:not(.sefin-textfield--error):not(.sefin-textfield--focused):hover .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-text)}.sefin-textfield--filled .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface-hover, #f5f5f5);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--filled .sefin-textfield__border{display:none}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__label{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textfield--standard .sefin-textfield__label{left:0}.sefin-textfield--standard .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff)}.sefin-textfield--standard .sefin-textfield__input-wrapper{padding-left:0;padding-right:0}.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper,.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-textfield--standard .sefin-textfield__border{height:1px;transition:background-color .2s ease-in-out}.sefin-textfield--standard:not(.sefin-textfield--error):not(.sefin-textfield--focused):hover .sefin-textfield__border{background-color:var(--sefin-color-text)}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--sm .sefin-textfield__input-container{min-height:var(--sefin-input-height-sm)}.sefin-textfield--sm .sefin-textfield__input,.sefin-textfield--sm .sefin-textfield__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textfield--md .sefin-textfield__input-container{min-height:var(--sefin-input-height-md)}.sefin-textfield--lg .sefin-textfield__input-container{min-height:var(--sefin-input-height-lg)}.sefin-textfield--lg .sefin-textfield__input,.sefin-textfield--lg .sefin-textfield__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--disabled{cursor:not-allowed;opacity:.6}.sefin-textfield--readonly .sefin-textfield__input{cursor:default}\n"] }]
+                    ], template: "<div [class]=\"textFieldClasses\">\n  <!-- Input Container -->\n  <div class=\"sefin-textfield__input-container\">\n    <!-- Leading Icon -->\n    <div *ngIf=\"leadingIcon\" class=\"sefin-textfield__leading-icon\">\n      <sefin-icon\n        [name]=\"leadingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Input Wrapper -->\n    <div class=\"sefin-textfield__input-wrapper\">\n      <!-- Input -->\n      <input\n        #inputRef\n        [id]=\"id\"\n        [name]=\"name\"\n        [type]=\"type\"\n        [value]=\"value\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [pattern]=\"pattern\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-label]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"hasErrorState\"\n        [attr.aria-describedby]=\"\n          displayError || hint || showCounter ? id + '-helper' : null\n        \"\n        [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n        class=\"sefin-textfield__input\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- Trailing Icon -->\n    <div\n      *ngIf=\"trailingIcon\"\n      class=\"sefin-textfield__trailing-icon\"\n      (click)=\"onTrailingIconClick($event)\"\n      [attr.aria-label]=\"'Trailing icon'\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <sefin-icon\n        [name]=\"trailingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Outline/Filled border -->\n    <div class=\"sefin-textfield__border\"></div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint || showCounter\"\n    [id]=\"id + '-helper'\"\n    class=\"sefin-textfield__helper\"\n    [class.sefin-textfield__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-textfield__error-message\">\n      {{ displayErrorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-textfield__hint\">\n      {{ hint }}\n    </span>\n    <span\n      *ngIf=\"showCounter && !displayError\"\n      class=\"sefin-textfield__counter\"\n      [class.sefin-textfield__counter--warning]=\"\n        maxLength && characterCount > maxLength * 0.8\n      \"\n    >\n      {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n    </span>\n  </div>\n</div>\n", styles: [".sefin-textfield{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textfield__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-textfield__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible}.sefin-textfield__label{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text-secondary, #666);transition:all .2s cubic-bezier(.4,0,.2,1);transform-origin:top left;white-space:nowrap;overflow:visible;text-overflow:ellipsis;max-width:calc(100% - var(--sefin-spacing-xl));z-index:1}.sefin-textfield__label--floating{top:0;transform:translateY(-50%) scale(.75);font-weight:var(--sefin-font-weight-medium, 500);background-color:transparent;padding:4px var(--sefin-spacing-xs, 4px);margin-left:calc(var(--sefin-spacing-xs, 4px) * -1);z-index:3;color:var(--sefin-color-primary, #1976d2);overflow:visible}.sefin-textfield__label--floating:before{content:\"\";position:absolute;top:0;left:calc(var(--sefin-spacing-xs, 4px) * -1);right:calc(var(--sefin-spacing-xs, 4px) * -1);height:2px;transform:translateY(-50%);z-index:-1;pointer-events:none;background-color:var(--sefin-color-surface, #ffffff);box-sizing:border-box}.sefin-textfield__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336)}.sefin-textfield__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5}.sefin-textfield__input::placeholder{color:var(--sefin-color-text-disabled)!important;opacity:0;transition:opacity .2s ease-in-out}.sefin-textfield__label--floating~.sefin-textfield__input::placeholder{opacity:0}.sefin-textfield__label--floating~.sefin-textfield__input:focus::placeholder{opacity:1}.sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input:focus::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield__input:disabled,.sefin-textfield__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textfield__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-textfield__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-ms-reveal,.sefin-textfield__input[type=password]::-ms-clear,.sefin-textfield__input[data-password-field=true]::-ms-reveal,.sefin-textfield__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-moz-focus-inner,.sefin-textfield__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-textfield--no-label .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield--no-label .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield--no-label .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield--no-label .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__label:not(.sefin-textfield__label--floating)~.sefin-textfield__input::placeholder{opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-text-disabled)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-text-disabled)!important}.sefin-textfield__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textfield__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-textfield__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon{color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-textfield__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textfield__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textfield__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textfield__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textfield__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textfield--outlined .sefin-textfield__input-container{border:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textfield--outlined .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__label--floating{background-color:transparent}.sefin-textfield--outlined .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--outlined .sefin-textfield__border{display:none}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--focused.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--filled .sefin-textfield__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px) var(--sefin-radius-xl, 16px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textfield--filled .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface-hover, #f5f5f5);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--filled .sefin-textfield__border{display:none}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textfield--standard .sefin-textfield__label{left:0}.sefin-textfield--standard .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff)}.sefin-textfield--standard .sefin-textfield__input-wrapper{padding-left:0;padding-right:0}.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper,.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-textfield--standard .sefin-textfield__border{height:1px;transition:background-color .2s ease-in-out}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--sm .sefin-textfield__input-container{min-height:var(--sefin-input-height-sm)}.sefin-textfield--sm .sefin-textfield__input,.sefin-textfield--sm .sefin-textfield__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textfield--md .sefin-textfield__input-container{min-height:var(--sefin-input-height-md)}.sefin-textfield--lg .sefin-textfield__input-container{min-height:var(--sefin-input-height-lg)}.sefin-textfield--lg .sefin-textfield__input,.sefin-textfield--lg .sefin-textfield__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--disabled{cursor:not-allowed;opacity:.6}.sefin-textfield--readonly .sefin-textfield__input{cursor:default}\n"] }]
         }], propDecorators: { inputRef: [{
                 type: ViewChild,
                 args: ['inputRef', { static: false }]
@@ -3753,11 +3826,11 @@ class AutocompleteComponent {
             .join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AutocompleteComponent, isStandalone: true, selector: "sefin-autocomplete", inputs: { options: "options", placeholder: "placeholder", hint: "hint", error: "error", errorMessage: "errorMessage", disabled: "disabled", size: "size", class: "class", id: "id", value: "value", minChars: "minChars", maxResults: "maxResults" }, outputs: { valueChange: "valueChange", optionSelected: "optionSelected", inputChange: "inputChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n  <div class=\"sefin-autocomplete__wrapper\">\n    <input\n      #inputRef\n      type=\"text\"\n      [class]=\"inputClasses\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [ngModel]=\"searchText\"\n      (ngModelChange)=\"onInputChange($event)\"\n      (focus)=\"onInputFocus()\"\n      (click)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onKeyDown($event)\"\n      [attr.aria-invalid]=\"hasErrorState\"\n      [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n      autocomplete=\"off\"\n    />\n    <div class=\"sefin-autocomplete__actions\">\n      <button\n        *ngIf=\"searchText && !disabled\"\n        type=\"button\"\n        class=\"sefin-autocomplete__clear\"\n        (click)=\"clearValue()\"\n        aria-label=\"Clear\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 4L4 12M4 4L12 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n      <div class=\"sefin-autocomplete__arrow\" [class.sefin-autocomplete__arrow--open]=\"isOpen\">\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M4 6L8 10L12 6\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n  <div\n    *ngIf=\"isOpen && filteredOptions && filteredOptions.length > 0\"\n    #dropdownRef\n    class=\"sefin-autocomplete__dropdown\"\n  >\n    <ul class=\"sefin-autocomplete__list\">\n      <li\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        [attr.data-index]=\"i\"\n        [class.sefin-autocomplete__option]=\"true\"\n        [class.sefin-autocomplete__option--selected]=\"i === selectedIndex\"\n        [class.sefin-autocomplete__option--disabled]=\"option.disabled\"\n        (mousedown)=\"onOptionMouseDown($event, option)\"\n        (click)=\"selectOption(option)\"\n        [attr.aria-selected]=\"i === selectedIndex\"\n        role=\"option\"\n      >\n        {{ option.label }}\n      </li>\n    </ul>\n  </div>\n  <div\n    *ngIf=\"\n      isOpen &&\n      filteredOptions &&\n      filteredOptions.length === 0 &&\n      searchText &&\n      searchText.length >= minChars\n    \"\n    class=\"sefin-autocomplete__dropdown sefin-autocomplete__dropdown--empty\"\n  >\n    <div class=\"sefin-autocomplete__no-results\">\n      No se encontraron resultados\n    </div>\n  </div>\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint\"\n    [id]=\"internalId + '-helper'\"\n    class=\"sefin-autocomplete__helper\"\n    [class.sefin-autocomplete__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-autocomplete__error-message\">\n      {{ errorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-autocomplete__hint\">\n      {{ hint }}\n    </span>\n  </div>\n</div>\n", styles: [".sefin-autocomplete{position:relative;width:100%}.sefin-autocomplete__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-autocomplete__input{width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none;box-sizing:border-box}.sefin-autocomplete__input::placeholder{color:var(--sefin-color-text-secondary);font-family:var(--sefin-font-family-base)}.sefin-autocomplete__input:focus{border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-autocomplete__input:disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-autocomplete__input--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);padding-right:calc(var(--sefin-spacing-md) * 2.5);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-autocomplete__input--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);padding-right:calc(var(--sefin-spacing-lg) * 2);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-autocomplete__input--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);padding-right:calc(var(--sefin-spacing-xl) * 1.75);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-autocomplete__input--disabled{cursor:not-allowed}.sefin-autocomplete__input--error{border-color:var(--sefin-color-error)}.sefin-autocomplete__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}.sefin-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out}.sefin-autocomplete__clear:hover{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-autocomplete__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-autocomplete__clear svg{width:16px;height:16px}.sefin-autocomplete__arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-autocomplete__arrow svg{width:16px;height:16px}.sefin-autocomplete__arrow--open{transform:rotate(180deg)}.sefin-autocomplete__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-autocomplete__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-autocomplete__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-autocomplete__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-autocomplete__option:hover:not(.sefin-autocomplete__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-autocomplete__option--selected{background-color:var(--sefin-color-primary-light);color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-medium)}.sefin-autocomplete__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-autocomplete__no-results{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-autocomplete--open .sefin-autocomplete__input{border-color:var(--sefin-color-border-focus)}.sefin-autocomplete__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-autocomplete__hint{color:var(--sefin-color-text-secondary)}.sefin-autocomplete__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AutocompleteComponent, isStandalone: true, selector: "sefin-autocomplete", inputs: { options: "options", placeholder: "placeholder", hint: "hint", error: "error", errorMessage: "errorMessage", disabled: "disabled", size: "size", class: "class", id: "id", value: "value", minChars: "minChars", maxResults: "maxResults" }, outputs: { valueChange: "valueChange", optionSelected: "optionSelected", inputChange: "inputChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n  <div class=\"sefin-autocomplete__wrapper\">\n    <input\n      #inputRef\n      type=\"text\"\n      [class]=\"inputClasses\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [ngModel]=\"searchText\"\n      (ngModelChange)=\"onInputChange($event)\"\n      (focus)=\"onInputFocus()\"\n      (click)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onKeyDown($event)\"\n      [attr.aria-invalid]=\"hasErrorState\"\n      [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n      autocomplete=\"off\"\n    />\n    <div class=\"sefin-autocomplete__actions\">\n      <button\n        *ngIf=\"searchText && !disabled\"\n        type=\"button\"\n        class=\"sefin-autocomplete__clear\"\n        (click)=\"clearValue()\"\n        aria-label=\"Clear\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 4L4 12M4 4L12 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n      <div class=\"sefin-autocomplete__arrow\" [class.sefin-autocomplete__arrow--open]=\"isOpen\">\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M4 6L8 10L12 6\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n  <div\n    *ngIf=\"isOpen && filteredOptions && filteredOptions.length > 0\"\n    #dropdownRef\n    class=\"sefin-autocomplete__dropdown\"\n  >\n    <ul class=\"sefin-autocomplete__list\">\n      <li\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        [attr.data-index]=\"i\"\n        [class.sefin-autocomplete__option]=\"true\"\n        [class.sefin-autocomplete__option--selected]=\"i === selectedIndex\"\n        [class.sefin-autocomplete__option--disabled]=\"option.disabled\"\n        (mousedown)=\"onOptionMouseDown($event, option)\"\n        (click)=\"selectOption(option)\"\n        [attr.aria-selected]=\"i === selectedIndex\"\n        role=\"option\"\n      >\n        {{ option.label }}\n      </li>\n    </ul>\n  </div>\n  <div\n    *ngIf=\"\n      isOpen &&\n      filteredOptions &&\n      filteredOptions.length === 0 &&\n      searchText &&\n      searchText.length >= minChars\n    \"\n    class=\"sefin-autocomplete__dropdown sefin-autocomplete__dropdown--empty\"\n  >\n    <div class=\"sefin-autocomplete__no-results\">\n      No se encontraron resultados\n    </div>\n  </div>\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint\"\n    [id]=\"internalId + '-helper'\"\n    class=\"sefin-autocomplete__helper\"\n    [class.sefin-autocomplete__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-autocomplete__error-message\">\n      {{ errorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-autocomplete__hint\">\n      {{ hint }}\n    </span>\n  </div>\n</div>\n", styles: [".sefin-autocomplete{position:relative;width:100%}.sefin-autocomplete__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-autocomplete__input{width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);transition:all .2s ease-in-out;outline:none;box-sizing:border-box}.sefin-autocomplete__input::placeholder{color:var(--sefin-color-text-secondary);font-family:var(--sefin-font-family-base)}.sefin-autocomplete__input:focus{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-autocomplete__input:disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-autocomplete__input--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);padding-right:calc(var(--sefin-spacing-md) * 2.5);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-autocomplete__input--md{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg);padding-right:calc(var(--sefin-spacing-lg) * 2);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-autocomplete__input--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);padding-right:calc(var(--sefin-spacing-xl) * 1.75);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-autocomplete__input--disabled{cursor:not-allowed}.sefin-autocomplete__input--error{border-color:var(--sefin-color-error)}.sefin-autocomplete__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}.sefin-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out}.sefin-autocomplete__clear:hover{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-autocomplete__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-autocomplete__clear svg{width:16px;height:16px}.sefin-autocomplete__arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-autocomplete__arrow svg{width:16px;height:16px}.sefin-autocomplete__arrow--open{transform:rotate(180deg)}.sefin-autocomplete__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-autocomplete__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-autocomplete__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-autocomplete__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-autocomplete__option:hover:not(.sefin-autocomplete__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-autocomplete__option--selected{background-color:var(--sefin-color-primary-light);color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-medium)}.sefin-autocomplete__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-autocomplete__no-results{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-autocomplete--open .sefin-autocomplete__input{border-color:var(--sefin-color-border-focus)}.sefin-autocomplete__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-autocomplete__hint{color:var(--sefin-color-text-secondary)}.sefin-autocomplete__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sefin-autocomplete', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"containerClasses\" #containerRef>\n  <div class=\"sefin-autocomplete__wrapper\">\n    <input\n      #inputRef\n      type=\"text\"\n      [class]=\"inputClasses\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [ngModel]=\"searchText\"\n      (ngModelChange)=\"onInputChange($event)\"\n      (focus)=\"onInputFocus()\"\n      (click)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onKeyDown($event)\"\n      [attr.aria-invalid]=\"hasErrorState\"\n      [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n      autocomplete=\"off\"\n    />\n    <div class=\"sefin-autocomplete__actions\">\n      <button\n        *ngIf=\"searchText && !disabled\"\n        type=\"button\"\n        class=\"sefin-autocomplete__clear\"\n        (click)=\"clearValue()\"\n        aria-label=\"Clear\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 4L4 12M4 4L12 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n      <div class=\"sefin-autocomplete__arrow\" [class.sefin-autocomplete__arrow--open]=\"isOpen\">\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M4 6L8 10L12 6\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n  <div\n    *ngIf=\"isOpen && filteredOptions && filteredOptions.length > 0\"\n    #dropdownRef\n    class=\"sefin-autocomplete__dropdown\"\n  >\n    <ul class=\"sefin-autocomplete__list\">\n      <li\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        [attr.data-index]=\"i\"\n        [class.sefin-autocomplete__option]=\"true\"\n        [class.sefin-autocomplete__option--selected]=\"i === selectedIndex\"\n        [class.sefin-autocomplete__option--disabled]=\"option.disabled\"\n        (mousedown)=\"onOptionMouseDown($event, option)\"\n        (click)=\"selectOption(option)\"\n        [attr.aria-selected]=\"i === selectedIndex\"\n        role=\"option\"\n      >\n        {{ option.label }}\n      </li>\n    </ul>\n  </div>\n  <div\n    *ngIf=\"\n      isOpen &&\n      filteredOptions &&\n      filteredOptions.length === 0 &&\n      searchText &&\n      searchText.length >= minChars\n    \"\n    class=\"sefin-autocomplete__dropdown sefin-autocomplete__dropdown--empty\"\n  >\n    <div class=\"sefin-autocomplete__no-results\">\n      No se encontraron resultados\n    </div>\n  </div>\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint\"\n    [id]=\"internalId + '-helper'\"\n    class=\"sefin-autocomplete__helper\"\n    [class.sefin-autocomplete__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-autocomplete__error-message\">\n      {{ errorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-autocomplete__hint\">\n      {{ hint }}\n    </span>\n  </div>\n</div>\n", styles: [".sefin-autocomplete{position:relative;width:100%}.sefin-autocomplete__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-autocomplete__input{width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none;box-sizing:border-box}.sefin-autocomplete__input::placeholder{color:var(--sefin-color-text-secondary);font-family:var(--sefin-font-family-base)}.sefin-autocomplete__input:focus{border-color:var(--sefin-color-border-focus);box-shadow:0 0 0 3px var(--sefin-color-primary-light)}.sefin-autocomplete__input:disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-autocomplete__input--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);padding-right:calc(var(--sefin-spacing-md) * 2.5);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-autocomplete__input--md{padding:var(--sefin-spacing-md) var(--sefin-spacing-lg);padding-right:calc(var(--sefin-spacing-lg) * 2);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-autocomplete__input--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);padding-right:calc(var(--sefin-spacing-xl) * 1.75);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-autocomplete__input--disabled{cursor:not-allowed}.sefin-autocomplete__input--error{border-color:var(--sefin-color-error)}.sefin-autocomplete__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}.sefin-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out}.sefin-autocomplete__clear:hover{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-autocomplete__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-autocomplete__clear svg{width:16px;height:16px}.sefin-autocomplete__arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-autocomplete__arrow svg{width:16px;height:16px}.sefin-autocomplete__arrow--open{transform:rotate(180deg)}.sefin-autocomplete__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-autocomplete__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-autocomplete__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-autocomplete__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-autocomplete__option:hover:not(.sefin-autocomplete__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-autocomplete__option--selected{background-color:var(--sefin-color-primary-light);color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-medium)}.sefin-autocomplete__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-autocomplete__no-results{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-autocomplete--open .sefin-autocomplete__input{border-color:var(--sefin-color-border-focus)}.sefin-autocomplete__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-autocomplete__hint{color:var(--sefin-color-text-secondary)}.sefin-autocomplete__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\n"] }]
+            args: [{ selector: 'sefin-autocomplete', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"containerClasses\" #containerRef>\n  <div class=\"sefin-autocomplete__wrapper\">\n    <input\n      #inputRef\n      type=\"text\"\n      [class]=\"inputClasses\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [ngModel]=\"searchText\"\n      (ngModelChange)=\"onInputChange($event)\"\n      (focus)=\"onInputFocus()\"\n      (click)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onKeyDown($event)\"\n      [attr.aria-invalid]=\"hasErrorState\"\n      [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n      autocomplete=\"off\"\n    />\n    <div class=\"sefin-autocomplete__actions\">\n      <button\n        *ngIf=\"searchText && !disabled\"\n        type=\"button\"\n        class=\"sefin-autocomplete__clear\"\n        (click)=\"clearValue()\"\n        aria-label=\"Clear\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12 4L4 12M4 4L12 12\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n      <div class=\"sefin-autocomplete__arrow\" [class.sefin-autocomplete__arrow--open]=\"isOpen\">\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M4 6L8 10L12 6\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </div>\n    </div>\n  </div>\n  <div\n    *ngIf=\"isOpen && filteredOptions && filteredOptions.length > 0\"\n    #dropdownRef\n    class=\"sefin-autocomplete__dropdown\"\n  >\n    <ul class=\"sefin-autocomplete__list\">\n      <li\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        [attr.data-index]=\"i\"\n        [class.sefin-autocomplete__option]=\"true\"\n        [class.sefin-autocomplete__option--selected]=\"i === selectedIndex\"\n        [class.sefin-autocomplete__option--disabled]=\"option.disabled\"\n        (mousedown)=\"onOptionMouseDown($event, option)\"\n        (click)=\"selectOption(option)\"\n        [attr.aria-selected]=\"i === selectedIndex\"\n        role=\"option\"\n      >\n        {{ option.label }}\n      </li>\n    </ul>\n  </div>\n  <div\n    *ngIf=\"\n      isOpen &&\n      filteredOptions &&\n      filteredOptions.length === 0 &&\n      searchText &&\n      searchText.length >= minChars\n    \"\n    class=\"sefin-autocomplete__dropdown sefin-autocomplete__dropdown--empty\"\n  >\n    <div class=\"sefin-autocomplete__no-results\">\n      No se encontraron resultados\n    </div>\n  </div>\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint\"\n    [id]=\"internalId + '-helper'\"\n    class=\"sefin-autocomplete__helper\"\n    [class.sefin-autocomplete__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-autocomplete__error-message\">\n      {{ errorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-autocomplete__hint\">\n      {{ hint }}\n    </span>\n  </div>\n</div>\n", styles: [".sefin-autocomplete{position:relative;width:100%}.sefin-autocomplete__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-autocomplete__input{width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);transition:all .2s ease-in-out;outline:none;box-sizing:border-box}.sefin-autocomplete__input::placeholder{color:var(--sefin-color-text-secondary);font-family:var(--sefin-font-family-base)}.sefin-autocomplete__input:focus{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-autocomplete__input:disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-autocomplete__input--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);padding-right:calc(var(--sefin-spacing-md) * 2.5);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-autocomplete__input--md{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg);padding-right:calc(var(--sefin-spacing-lg) * 2);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-autocomplete__input--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);padding-right:calc(var(--sefin-spacing-xl) * 1.75);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-autocomplete__input--disabled{cursor:not-allowed}.sefin-autocomplete__input--error{border-color:var(--sefin-color-error)}.sefin-autocomplete__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}.sefin-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out}.sefin-autocomplete__clear:hover{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text)}.sefin-autocomplete__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-autocomplete__clear svg{width:16px;height:16px}.sefin-autocomplete__arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-autocomplete__arrow svg{width:16px;height:16px}.sefin-autocomplete__arrow--open{transform:rotate(180deg)}.sefin-autocomplete__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-xl, 16px);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-autocomplete__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-autocomplete__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-autocomplete__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-autocomplete__option:hover:not(.sefin-autocomplete__option--disabled){background-color:var(--sefin-color-surface-hover)}.sefin-autocomplete__option--selected{background-color:var(--sefin-color-primary-light);color:var(--sefin-color-primary);font-weight:var(--sefin-font-weight-medium)}.sefin-autocomplete__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-autocomplete__no-results{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-autocomplete--open .sefin-autocomplete__input{border-color:var(--sefin-color-border-focus)}.sefin-autocomplete__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-autocomplete__hint{color:var(--sefin-color-text-secondary)}.sefin-autocomplete__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\n"] }]
         }], propDecorators: { inputRef: [{
                 type: ViewChild,
                 args: ['inputRef', { static: false }]
@@ -4051,6 +4124,8 @@ class CardComponent {
     el;
     /** Card variant style. Options: 'default' | 'elevated' | 'outlined' */
     variant = 'default';
+    /** Border radius. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' */
+    rounded = 'lg';
     /** Whether the card is clickable/interactive (enables smooth primary border on hover/focus) */
     clickable = false;
     /** Whether the card is disabled */
@@ -4074,6 +4149,7 @@ class CardComponent {
         return [
             'sefin-card',
             `sefin-card--${this.variant}`,
+            `sefin-card--rounded-${this.rounded}`,
             this.clickable ? 'sefin-card--clickable' : '',
             this.disabled ? 'sefin-card--disabled' : '',
             `sefin-card--padding-${this.padding}`,
@@ -4083,13 +4159,15 @@ class CardComponent {
             .join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: CardComponent, isStandalone: true, selector: "sefin-card", inputs: { variant: "variant", clickable: "clickable", disabled: "disabled", padding: "padding", class: "class" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div [class]=\"cardClasses\" [attr.tabindex]=\"clickable && !disabled ? 0 : null\" [attr.role]=\"clickable ? 'button' : null\">\n  <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-card{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);border:none;transition:box-shadow .3s ease-in-out,transform .3s ease-in-out;box-sizing:border-box}.sefin-card--default{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05))}.sefin-card--elevated{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--outlined{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0)}.sefin-card--padding-none{padding:0}.sefin-card--padding-sm{padding:var(--sefin-spacing-sm, 8px)}.sefin-card--padding-md{padding:var(--sefin-spacing-md, 16px)}.sefin-card--padding-lg{padding:var(--sefin-spacing-lg, 24px)}.sefin-card--clickable{cursor:pointer;outline:none}.sefin-card--clickable:hover:not(.sefin-card--disabled),.sefin-card--clickable:focus-visible:not(.sefin-card--disabled){border-color:var(--sefin-color-primary, #55C3D8);transform:translateY(-4px);box-shadow:0 12px 24px -8px #0000001f,0 4px 8px -4px #00000014,0 0 0 1px var(--sefin-color-primary-light, rgba(85, 195, 216, .15))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--default,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--default{box-shadow:0 12px 24px -8px #0000001f,0 4px 8px -4px #00000014,0 0 0 1px var(--sefin-color-primary-light, rgba(85, 195, 216, .15))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--elevated,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:0 20px 40px -12px #00000026,0 8px 16px -6px #00000014,0 0 0 1px var(--sefin-color-primary-light, rgba(85, 195, 216, .15))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--outlined,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--outlined{box-shadow:0 8px 16px -4px #00000014,0 0 0 1px var(--sefin-color-primary-light, rgba(85, 195, 216, .15))}.sefin-card--clickable:active:not(.sefin-card--disabled){transform:translateY(-2px);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-card--clickable:active:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: CardComponent, isStandalone: true, selector: "sefin-card", inputs: { variant: "variant", rounded: "rounded", clickable: "clickable", disabled: "disabled", padding: "padding", class: "class" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div [class]=\"cardClasses\" [attr.tabindex]=\"clickable && !disabled ? 0 : null\" [attr.role]=\"clickable ? 'button' : null\">\n  <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-card{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border:none;transition:box-shadow .3s ease-in-out,transform .3s ease-in-out;box-sizing:border-box}.sefin-card--rounded-xs{border-radius:var(--sefin-radius-none, 0)}.sefin-card--rounded-sm{border-radius:var(--sefin-radius-sm, 4px)}.sefin-card--rounded-md{border-radius:var(--sefin-radius-md, 8px)}.sefin-card--rounded-lg{border-radius:var(--sefin-radius-lg, 12px)}.sefin-card--rounded-xl{border-radius:var(--sefin-radius-xl, 16px)}.sefin-card--rounded-2xl{border-radius:var(--sefin-radius-2xl, 24px)}.sefin-card--default{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05))}.sefin-card--elevated{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--outlined{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0)}.sefin-card--padding-none{padding:0}.sefin-card--padding-sm{padding:var(--sefin-spacing-sm, 8px)}.sefin-card--padding-md{padding:var(--sefin-spacing-md, 16px)}.sefin-card--padding-lg{padding:var(--sefin-spacing-lg, 24px)}.sefin-card--clickable{cursor:pointer;outline:none}.sefin-card--clickable:hover:not(.sefin-card--disabled),.sefin-card--clickable:focus-visible:not(.sefin-card--disabled){transform:translateY(-4px)}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--default,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--default{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8),var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--elevated,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8),var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--outlined,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--outlined{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8)}.sefin-card--clickable:active:not(.sefin-card--disabled){transform:translateY(-2px);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-card--clickable:active:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sefin-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"cardClasses\" [attr.tabindex]=\"clickable && !disabled ? 0 : null\" [attr.role]=\"clickable ? 'button' : null\">\n  <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-card{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border-radius:var(--sefin-radius-md, 8px);border:none;transition:box-shadow .3s ease-in-out,transform .3s ease-in-out;box-sizing:border-box}.sefin-card--default{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05))}.sefin-card--elevated{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--outlined{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0)}.sefin-card--padding-none{padding:0}.sefin-card--padding-sm{padding:var(--sefin-spacing-sm, 8px)}.sefin-card--padding-md{padding:var(--sefin-spacing-md, 16px)}.sefin-card--padding-lg{padding:var(--sefin-spacing-lg, 24px)}.sefin-card--clickable{cursor:pointer;outline:none}.sefin-card--clickable:hover:not(.sefin-card--disabled),.sefin-card--clickable:focus-visible:not(.sefin-card--disabled){border-color:var(--sefin-color-primary, #55C3D8);transform:translateY(-4px);box-shadow:0 12px 24px -8px #0000001f,0 4px 8px -4px #00000014,0 0 0 1px var(--sefin-color-primary-light, rgba(85, 195, 216, .15))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--default,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--default{box-shadow:0 12px 24px -8px #0000001f,0 4px 8px -4px #00000014,0 0 0 1px var(--sefin-color-primary-light, rgba(85, 195, 216, .15))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--elevated,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:0 20px 40px -12px #00000026,0 8px 16px -6px #00000014,0 0 0 1px var(--sefin-color-primary-light, rgba(85, 195, 216, .15))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--outlined,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--outlined{box-shadow:0 8px 16px -4px #00000014,0 0 0 1px var(--sefin-color-primary-light, rgba(85, 195, 216, .15))}.sefin-card--clickable:active:not(.sefin-card--disabled){transform:translateY(-2px);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-card--clickable:active:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"] }]
+            args: [{ selector: 'sefin-card', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"cardClasses\" [attr.tabindex]=\"clickable && !disabled ? 0 : null\" [attr.role]=\"clickable ? 'button' : null\">\n  <ng-content></ng-content>\n</div>\n\n", styles: [".sefin-card{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, \"Pluto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif);background-color:var(--sefin-color-surface, #ffffff);border:none;transition:box-shadow .3s ease-in-out,transform .3s ease-in-out;box-sizing:border-box}.sefin-card--rounded-xs{border-radius:var(--sefin-radius-none, 0)}.sefin-card--rounded-sm{border-radius:var(--sefin-radius-sm, 4px)}.sefin-card--rounded-md{border-radius:var(--sefin-radius-md, 8px)}.sefin-card--rounded-lg{border-radius:var(--sefin-radius-lg, 12px)}.sefin-card--rounded-xl{border-radius:var(--sefin-radius-xl, 16px)}.sefin-card--rounded-2xl{border-radius:var(--sefin-radius-2xl, 24px)}.sefin-card--default{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05))}.sefin-card--elevated{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0),var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--outlined{background-color:var(--sefin-color-surface, #ffffff);box-shadow:0 0 0 .5px var(--sefin-color-border, #e0e0e0)}.sefin-card--padding-none{padding:0}.sefin-card--padding-sm{padding:var(--sefin-spacing-sm, 8px)}.sefin-card--padding-md{padding:var(--sefin-spacing-md, 16px)}.sefin-card--padding-lg{padding:var(--sefin-spacing-lg, 24px)}.sefin-card--clickable{cursor:pointer;outline:none}.sefin-card--clickable:hover:not(.sefin-card--disabled),.sefin-card--clickable:focus-visible:not(.sefin-card--disabled){transform:translateY(-4px)}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--default,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--default{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8),var(--sefin-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, .05))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--elevated,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8),var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--clickable:hover:not(.sefin-card--disabled).sefin-card--outlined,.sefin-card--clickable:focus-visible:not(.sefin-card--disabled).sefin-card--outlined{box-shadow:0 0 0 .5px var(--sefin-color-primary, #55C3D8)}.sefin-card--clickable:active:not(.sefin-card--disabled){transform:translateY(-2px);box-shadow:var(--sefin-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06))}.sefin-card--clickable:active:not(.sefin-card--disabled).sefin-card--elevated{box-shadow:var(--sefin-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05))}.sefin-card--disabled{opacity:.6;cursor:not-allowed;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { variant: [{
                 type: Input
+            }], rounded: [{
+                type: Input
             }], clickable: [{
                 type: Input
             }], disabled: [{
@@ -5396,7 +5474,7 @@ class FormFieldComponent {
                 useExisting: forwardRef(() => FormFieldComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"formFieldClasses\">\n  <!-- Label -->\n  <label\n    *ngIf=\"label\"\n    [id]=\"labelId\"\n    [for]=\"inputId\"\n    class=\"sefin-form-field__label\"\n    [class.sefin-form-field__label--required]=\"required\"\n  >\n    {{ label }}\n  </label>\n\n  <!-- Input Container -->\n  <div class=\"sefin-form-field__input-container\">\n    <!-- Leading Icon -->\n    <div *ngIf=\"leadingIcon\" class=\"sefin-form-field__leading-icon\">\n      <sefin-icon\n        [name]=\"leadingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Input Wrapper -->\n    <div class=\"sefin-form-field__input-wrapper\">\n      <!-- Input -->\n      <input\n        #inputRef\n        [id]=\"inputId\"\n        [name]=\"name\"\n        [type]=\"type\"\n        [value]=\"value\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [pattern]=\"pattern\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-label]=\"label || placeholder\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"hasErrorState\"\n        [attr.aria-describedby]=\"\n          displayError || hint || showCounter ? hintId : null\n        \"\n        [attr.aria-labelledby]=\"label ? labelId : null\"\n        [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n        class=\"sefin-form-field__input\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- Trailing Icon -->\n    <div\n      *ngIf=\"trailingIcon\"\n      class=\"sefin-form-field__trailing-icon\"\n      (click)=\"onTrailingIconClick($event)\"\n      [attr.aria-label]=\"'Trailing icon'\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <sefin-icon\n        [name]=\"trailingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Outline/Filled border -->\n    <div class=\"sefin-form-field__border\"></div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint || showCounter\"\n    [id]=\"hintId\"\n    class=\"sefin-form-field__helper\"\n    [class.sefin-form-field__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-form-field__error-message\">\n      {{ displayErrorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-form-field__hint\">\n      {{ hint }}\n    </span>\n    <span\n      *ngIf=\"showCounter && !displayError\"\n      class=\"sefin-form-field__counter\"\n      [class.sefin-form-field__counter--warning]=\"\n        maxLength && characterCount > maxLength * 0.8\n      \"\n    >\n      {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n    </span>\n  </div>\n</div>\n", styles: [".sefin-form-field{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-form-field__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-form-field__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible;z-index:1}.sefin-form-field__label{display:block;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 14px);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);margin-bottom:var(--sefin-spacing-xs, 4px);cursor:pointer}.sefin-form-field__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336);margin-left:2px}.sefin-form-field__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5;position:relative;z-index:1}.sefin-form-field__input::placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1;transition:opacity .2s ease-in-out}.sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:disabled,.sefin-form-field__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-form-field__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-ms-reveal,.sefin-form-field__input[type=password]::-ms-clear,.sefin-form-field__input[data-password-field=true]::-ms-reveal,.sefin-form-field__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-moz-focus-inner,.sefin-form-field__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-form-field__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-form-field__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-form-field__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-sm);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon{color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-form-field__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-form-field__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-form-field__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-form-field__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-form-field--outlined .sefin-form-field__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-form-field--outlined:not(.sefin-form-field--error):not(.sefin-form-field--focused):hover .sefin-form-field__input-container{border-color:var(--sefin-color-text)}.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--outlined .sefin-form-field__border{display:none}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 1px var(--sefin-color-primary-light, rgba(25, 118, 210, .1))}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--focused.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 1px var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--filled .sefin-form-field__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-form-field--filled:not(.sefin-form-field--error):not(.sefin-form-field--focused):hover .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-text)}.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--filled .sefin-form-field__border{display:none}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--filled.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--standard .sefin-form-field__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-form-field--standard .sefin-form-field__input-wrapper{padding-left:0;padding-right:0}.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper,.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-form-field--standard .sefin-form-field__border{height:1px;transition:background-color .2s ease-in-out}.sefin-form-field--standard:not(.sefin-form-field--error):not(.sefin-form-field--focused):hover .sefin-form-field__border{background-color:var(--sefin-color-text)}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--disabled .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--sm .sefin-form-field__input-container{min-height:var(--sefin-input-height-sm)}.sefin-form-field--sm .sefin-form-field__input,.sefin-form-field--sm .sefin-form-field__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-form-field--md .sefin-form-field__input-container{min-height:var(--sefin-input-height-md)}.sefin-form-field--lg .sefin-form-field__input-container{min-height:var(--sefin-input-height-lg)}.sefin-form-field--lg .sefin-form-field__input,.sefin-form-field--lg .sefin-form-field__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--disabled{cursor:not-allowed;opacity:.6}.sefin-form-field--disabled .sefin-form-field__label{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field--readonly .sefin-form-field__input{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"formFieldClasses\">\n  <!-- Label -->\n  <label\n    *ngIf=\"label\"\n    [id]=\"labelId\"\n    [for]=\"inputId\"\n    class=\"sefin-form-field__label\"\n    [class.sefin-form-field__label--required]=\"required\"\n  >\n    {{ label }}\n  </label>\n\n  <!-- Input Container -->\n  <div class=\"sefin-form-field__input-container\">\n    <!-- Leading Icon -->\n    <div *ngIf=\"leadingIcon\" class=\"sefin-form-field__leading-icon\">\n      <sefin-icon\n        [name]=\"leadingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Input Wrapper -->\n    <div class=\"sefin-form-field__input-wrapper\">\n      <!-- Input -->\n      <input\n        #inputRef\n        [id]=\"inputId\"\n        [name]=\"name\"\n        [type]=\"type\"\n        [value]=\"value\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [pattern]=\"pattern\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-label]=\"label || placeholder\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"hasErrorState\"\n        [attr.aria-describedby]=\"\n          displayError || hint || showCounter ? hintId : null\n        \"\n        [attr.aria-labelledby]=\"label ? labelId : null\"\n        [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n        class=\"sefin-form-field__input\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- Trailing Icon -->\n    <div\n      *ngIf=\"trailingIcon\"\n      class=\"sefin-form-field__trailing-icon\"\n      (click)=\"onTrailingIconClick($event)\"\n      [attr.aria-label]=\"'Trailing icon'\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <sefin-icon\n        [name]=\"trailingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Outline/Filled border -->\n    <div class=\"sefin-form-field__border\"></div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint || showCounter\"\n    [id]=\"hintId\"\n    class=\"sefin-form-field__helper\"\n    [class.sefin-form-field__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-form-field__error-message\">\n      {{ displayErrorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-form-field__hint\">\n      {{ hint }}\n    </span>\n    <span\n      *ngIf=\"showCounter && !displayError\"\n      class=\"sefin-form-field__counter\"\n      [class.sefin-form-field__counter--warning]=\"\n        maxLength && characterCount > maxLength * 0.8\n      \"\n    >\n      {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n    </span>\n  </div>\n</div>\n", styles: [".sefin-form-field{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;min-width:0;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-form-field__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-form-field__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible;z-index:1}.sefin-form-field__label{display:block;align-self:flex-start;text-align:left;width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 14px);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);margin-bottom:var(--sefin-spacing-xs, 4px);cursor:pointer}.sefin-form-field__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336);margin-left:2px}.sefin-form-field__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5;position:relative;z-index:1}.sefin-form-field__input::placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1;transition:opacity .2s ease-in-out}.sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:disabled,.sefin-form-field__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-form-field__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-ms-reveal,.sefin-form-field__input[type=password]::-ms-clear,.sefin-form-field__input[data-password-field=true]::-ms-reveal,.sefin-form-field__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-moz-focus-inner,.sefin-form-field__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-form-field__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-form-field__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-form-field__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon{color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-form-field__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-form-field__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-form-field__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-form-field__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-form-field--outlined .sefin-form-field__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-xl, 16px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--outlined .sefin-form-field__border{display:none}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--focused.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--filled .sefin-form-field__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-xl, 16px) var(--sefin-radius-xl, 16px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--filled .sefin-form-field__border{display:none}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--filled.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--standard .sefin-form-field__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-form-field--standard .sefin-form-field__input-wrapper{padding-left:0;padding-right:0}.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper,.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-form-field--standard .sefin-form-field__border{height:1px;transition:background-color .2s ease-in-out}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--disabled .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--sm .sefin-form-field__input-container{min-height:var(--sefin-input-height-sm)}.sefin-form-field--sm .sefin-form-field__input,.sefin-form-field--sm .sefin-form-field__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-form-field--md .sefin-form-field__input-container{min-height:var(--sefin-input-height-md)}.sefin-form-field--lg .sefin-form-field__input-container{min-height:var(--sefin-input-height-lg)}.sefin-form-field--lg .sefin-form-field__input,.sefin-form-field--lg .sefin-form-field__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--disabled{cursor:not-allowed;opacity:.6}.sefin-form-field--disabled .sefin-form-field__label{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field--readonly .sefin-form-field__input{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -5411,7 +5489,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             useExisting: forwardRef(() => FormFieldComponent),
                             multi: true,
                         },
-                    ], template: "<div [class]=\"formFieldClasses\">\n  <!-- Label -->\n  <label\n    *ngIf=\"label\"\n    [id]=\"labelId\"\n    [for]=\"inputId\"\n    class=\"sefin-form-field__label\"\n    [class.sefin-form-field__label--required]=\"required\"\n  >\n    {{ label }}\n  </label>\n\n  <!-- Input Container -->\n  <div class=\"sefin-form-field__input-container\">\n    <!-- Leading Icon -->\n    <div *ngIf=\"leadingIcon\" class=\"sefin-form-field__leading-icon\">\n      <sefin-icon\n        [name]=\"leadingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Input Wrapper -->\n    <div class=\"sefin-form-field__input-wrapper\">\n      <!-- Input -->\n      <input\n        #inputRef\n        [id]=\"inputId\"\n        [name]=\"name\"\n        [type]=\"type\"\n        [value]=\"value\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [pattern]=\"pattern\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-label]=\"label || placeholder\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"hasErrorState\"\n        [attr.aria-describedby]=\"\n          displayError || hint || showCounter ? hintId : null\n        \"\n        [attr.aria-labelledby]=\"label ? labelId : null\"\n        [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n        class=\"sefin-form-field__input\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- Trailing Icon -->\n    <div\n      *ngIf=\"trailingIcon\"\n      class=\"sefin-form-field__trailing-icon\"\n      (click)=\"onTrailingIconClick($event)\"\n      [attr.aria-label]=\"'Trailing icon'\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <sefin-icon\n        [name]=\"trailingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Outline/Filled border -->\n    <div class=\"sefin-form-field__border\"></div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint || showCounter\"\n    [id]=\"hintId\"\n    class=\"sefin-form-field__helper\"\n    [class.sefin-form-field__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-form-field__error-message\">\n      {{ displayErrorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-form-field__hint\">\n      {{ hint }}\n    </span>\n    <span\n      *ngIf=\"showCounter && !displayError\"\n      class=\"sefin-form-field__counter\"\n      [class.sefin-form-field__counter--warning]=\"\n        maxLength && characterCount > maxLength * 0.8\n      \"\n    >\n      {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n    </span>\n  </div>\n</div>\n", styles: [".sefin-form-field{position:relative;display:flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-form-field__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-form-field__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible;z-index:1}.sefin-form-field__label{display:block;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 14px);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);margin-bottom:var(--sefin-spacing-xs, 4px);cursor:pointer}.sefin-form-field__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336);margin-left:2px}.sefin-form-field__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5;position:relative;z-index:1}.sefin-form-field__input::placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1;transition:opacity .2s ease-in-out}.sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:disabled,.sefin-form-field__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-form-field__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-ms-reveal,.sefin-form-field__input[type=password]::-ms-clear,.sefin-form-field__input[data-password-field=true]::-ms-reveal,.sefin-form-field__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-moz-focus-inner,.sefin-form-field__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-form-field__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-form-field__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-form-field__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-sm);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon{color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-form-field__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-form-field__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-form-field__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-form-field__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-form-field--outlined .sefin-form-field__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-form-field--outlined:not(.sefin-form-field--error):not(.sefin-form-field--focused):hover .sefin-form-field__input-container{border-color:var(--sefin-color-text)}.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--outlined .sefin-form-field__border{display:none}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 1px var(--sefin-color-primary-light, rgba(25, 118, 210, .1))}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--focused.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 1px var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--filled .sefin-form-field__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-form-field--filled:not(.sefin-form-field--error):not(.sefin-form-field--focused):hover .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-text)}.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0;margin:0}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--filled .sefin-form-field__border{display:none}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--filled.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--standard .sefin-form-field__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-form-field--standard .sefin-form-field__input-wrapper{padding-left:0;padding-right:0}.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper,.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-form-field--standard .sefin-form-field__border{height:1px;transition:background-color .2s ease-in-out}.sefin-form-field--standard:not(.sefin-form-field--error):not(.sefin-form-field--focused):hover .sefin-form-field__border{background-color:var(--sefin-color-text)}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__leading-icon{color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--disabled .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--sm .sefin-form-field__input-container{min-height:var(--sefin-input-height-sm)}.sefin-form-field--sm .sefin-form-field__input,.sefin-form-field--sm .sefin-form-field__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-form-field--md .sefin-form-field__input-container{min-height:var(--sefin-input-height-md)}.sefin-form-field--lg .sefin-form-field__input-container{min-height:var(--sefin-input-height-lg)}.sefin-form-field--lg .sefin-form-field__input,.sefin-form-field--lg .sefin-form-field__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--disabled{cursor:not-allowed;opacity:.6}.sefin-form-field--disabled .sefin-form-field__label{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field--readonly .sefin-form-field__input{cursor:default}\n"] }]
+                    ], template: "<div [class]=\"formFieldClasses\">\n  <!-- Label -->\n  <label\n    *ngIf=\"label\"\n    [id]=\"labelId\"\n    [for]=\"inputId\"\n    class=\"sefin-form-field__label\"\n    [class.sefin-form-field__label--required]=\"required\"\n  >\n    {{ label }}\n  </label>\n\n  <!-- Input Container -->\n  <div class=\"sefin-form-field__input-container\">\n    <!-- Leading Icon -->\n    <div *ngIf=\"leadingIcon\" class=\"sefin-form-field__leading-icon\">\n      <sefin-icon\n        [name]=\"leadingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Input Wrapper -->\n    <div class=\"sefin-form-field__input-wrapper\">\n      <!-- Input -->\n      <input\n        #inputRef\n        [id]=\"inputId\"\n        [name]=\"name\"\n        [type]=\"type\"\n        [value]=\"value\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [pattern]=\"pattern\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-label]=\"label || placeholder\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"hasErrorState\"\n        [attr.aria-describedby]=\"\n          displayError || hint || showCounter ? hintId : null\n        \"\n        [attr.aria-labelledby]=\"label ? labelId : null\"\n        [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n        class=\"sefin-form-field__input\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- Trailing Icon -->\n    <div\n      *ngIf=\"trailingIcon\"\n      class=\"sefin-form-field__trailing-icon\"\n      (click)=\"onTrailingIconClick($event)\"\n      [attr.aria-label]=\"'Trailing icon'\"\n      role=\"button\"\n      tabindex=\"0\"\n    >\n      <sefin-icon\n        [name]=\"trailingIcon\"\n        [size]=\"size === 'sm' ? 'sm' : 'md'\"\n      ></sefin-icon>\n    </div>\n\n    <!-- Outline/Filled border -->\n    <div class=\"sefin-form-field__border\"></div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint || showCounter\"\n    [id]=\"hintId\"\n    class=\"sefin-form-field__helper\"\n    [class.sefin-form-field__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-form-field__error-message\">\n      {{ displayErrorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-form-field__hint\">\n      {{ hint }}\n    </span>\n    <span\n      *ngIf=\"showCounter && !displayError\"\n      class=\"sefin-form-field__counter\"\n      [class.sefin-form-field__counter--warning]=\"\n        maxLength && characterCount > maxLength * 0.8\n      \"\n    >\n      {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n    </span>\n  </div>\n</div>\n", styles: [".sefin-form-field{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;min-width:0;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-form-field__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-form-field__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible;z-index:1}.sefin-form-field__label{display:block;align-self:flex-start;text-align:left;width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 14px);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);margin-bottom:var(--sefin-spacing-xs, 4px);cursor:pointer}.sefin-form-field__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336);margin-left:2px}.sefin-form-field__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5;position:relative;z-index:1}.sefin-form-field__input::placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1;transition:opacity .2s ease-in-out}.sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-text-secondary, #999);opacity:1}.sefin-form-field__input:disabled,.sefin-form-field__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-form-field__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-ms-reveal,.sefin-form-field__input[type=password]::-ms-clear,.sefin-form-field__input[data-password-field=true]::-ms-reveal,.sefin-form-field__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-moz-focus-inner,.sefin-form-field__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-form-field__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-form-field__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-form-field__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon{color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-form-field__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-form-field__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-form-field__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-form-field__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-form-field--outlined .sefin-form-field__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-xl, 16px);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--outlined .sefin-form-field__border{display:none}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--focused.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--filled .sefin-form-field__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-xl, 16px) var(--sefin-radius-xl, 16px) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--filled .sefin-form-field__border{display:none}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--filled.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--standard .sefin-form-field__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-form-field--standard .sefin-form-field__input-wrapper{padding-left:0;padding-right:0}.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper,.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-form-field--standard .sefin-form-field__border{height:1px;transition:background-color .2s ease-in-out}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--disabled .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--sm .sefin-form-field__input-container{min-height:var(--sefin-input-height-sm)}.sefin-form-field--sm .sefin-form-field__input,.sefin-form-field--sm .sefin-form-field__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-form-field--md .sefin-form-field__input-container{min-height:var(--sefin-input-height-md)}.sefin-form-field--lg .sefin-form-field__input-container{min-height:var(--sefin-input-height-lg)}.sefin-form-field--lg .sefin-form-field__input,.sefin-form-field--lg .sefin-form-field__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--disabled{cursor:not-allowed;opacity:.6}.sefin-form-field--disabled .sefin-form-field__label{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field--readonly .sefin-form-field__input{cursor:default}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputRef: [{
                 type: ViewChild,
                 args: ['inputRef', { static: false }]
@@ -5946,7 +6024,7 @@ class TextareaComponent {
                 useExisting: forwardRef(() => TextareaComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"textareaClasses\">\n  <!-- Textarea Container -->\n  <div class=\"sefin-textarea__container\">\n    <!-- Textarea Wrapper -->\n    <div class=\"sefin-textarea__wrapper\">\n      <!-- Textarea -->\n      <textarea\n        #textareaRef\n        [id]=\"id\"\n        [name]=\"name\"\n        [value]=\"value\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [attr.rows]=\"rows\"\n        [attr.cols]=\"cols\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-label]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"hasErrorState\"\n        [attr.aria-describedby]=\"displayError || hint || showCounter ? id + '-helper' : null\"\n        class=\"sefin-textarea__textarea\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      ></textarea>\n    </div>\n\n    <!-- Outline/Filled border -->\n    <div class=\"sefin-textarea__border\"></div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint || showCounter\"\n    [id]=\"id + '-helper'\"\n    class=\"sefin-textarea__helper\"\n    [class.sefin-textarea__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-textarea__error-message\">\n      {{ displayErrorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-textarea__hint\">\n      {{ hint }}\n    </span>\n    <span\n      *ngIf=\"showCounter && !displayError\"\n      class=\"sefin-textarea__counter\"\n      [class.sefin-textarea__counter--warning]=\"maxLength && characterCount > maxLength * 0.8\"\n    >\n      {{ characterCount }}{{ maxLength ? ' / ' + maxLength : '' }}\n    </span>\n  </div>\n</div>\n\n", styles: [".sefin-textarea{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textarea__container{position:relative;display:flex;flex-direction:column;width:100%;min-height:120px;overflow:visible;z-index:0}.sefin-textarea__wrapper{position:relative;flex:1;display:flex;flex-direction:column;height:100%;min-height:0;overflow:visible}.sefin-textarea__textarea{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;resize:vertical;overflow-y:auto}.sefin-textarea__textarea::placeholder{color:#e0e0e0!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-textarea__textarea::-webkit-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea::-moz-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textarea__textarea:-ms-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea:focus::placeholder{opacity:1;color:#e0e0e0!important}.sefin-textarea__textarea:disabled,.sefin-textarea__textarea:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textarea--auto-resize .sefin-textarea__textarea{resize:none;overflow-y:hidden}.sefin-textarea__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textarea__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textarea__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textarea__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textarea__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textarea__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textarea--outlined .sefin-textarea__container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textarea--outlined .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--outlined .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--outlined .sefin-textarea__border{display:none}.sefin-textarea--outlined.sefin-textarea--focused .sefin-textarea__container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 1px var(--sefin-color-primary-light, rgba(25, 118, 210, .1))}.sefin-textarea--outlined.sefin-textarea--error .sefin-textarea__container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-textarea--outlined.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--filled .sefin-textarea__container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--filled .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--filled .sefin-textarea__border{display:none}.sefin-textarea--filled.sefin-textarea--focused .sefin-textarea__container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--error .sefin-textarea__container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--standard .sefin-textarea__container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textarea--standard .sefin-textarea__wrapper{padding:0}.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textarea--standard .sefin-textarea__border{height:1px}.sefin-textarea--standard.sefin-textarea--focused .sefin-textarea__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textarea--standard.sefin-textarea--error .sefin-textarea__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textarea--standard.sefin-textarea--disabled .sefin-textarea__container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--sm .sefin-textarea__container{min-height:80px}.sefin-textarea--sm .sefin-textarea__textarea{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textarea--sm.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--sm.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-sm, 8px)}.sefin-textarea--sm.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textarea--md .sefin-textarea__container{min-height:120px}.sefin-textarea--lg .sefin-textarea__container{min-height:160px}.sefin-textarea--lg .sefin-textarea__textarea{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textarea--lg.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--lg.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--lg.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textarea--disabled{cursor:not-allowed;opacity:.6}.sefin-textarea--readonly .sefin-textarea__textarea{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+        ], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textareaRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"textareaClasses\">\n  <!-- Textarea Container -->\n  <div class=\"sefin-textarea__container\">\n    <!-- Textarea Wrapper -->\n    <div class=\"sefin-textarea__wrapper\">\n      <!-- Textarea -->\n      <textarea\n        #textareaRef\n        [id]=\"id\"\n        [name]=\"name\"\n        [value]=\"value\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [attr.rows]=\"rows\"\n        [attr.cols]=\"cols\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-label]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"hasErrorState\"\n        [attr.aria-describedby]=\"displayError || hint || showCounter ? id + '-helper' : null\"\n        class=\"sefin-textarea__textarea\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      ></textarea>\n    </div>\n\n    <!-- Outline/Filled border -->\n    <div class=\"sefin-textarea__border\"></div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint || showCounter\"\n    [id]=\"id + '-helper'\"\n    class=\"sefin-textarea__helper\"\n    [class.sefin-textarea__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-textarea__error-message\">\n      {{ displayErrorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-textarea__hint\">\n      {{ hint }}\n    </span>\n    <span\n      *ngIf=\"showCounter && !displayError\"\n      class=\"sefin-textarea__counter\"\n      [class.sefin-textarea__counter--warning]=\"maxLength && characterCount > maxLength * 0.8\"\n    >\n      {{ characterCount }}{{ maxLength ? ' / ' + maxLength : '' }}\n    </span>\n  </div>\n</div>\n\n", styles: [".sefin-textarea{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textarea__container{position:relative;display:flex;flex-direction:column;width:100%;min-height:120px;overflow:visible;z-index:0}.sefin-textarea__wrapper{position:relative;flex:1;display:flex;flex-direction:column;height:100%;min-height:0;overflow:visible}.sefin-textarea__textarea{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;resize:vertical;overflow-y:auto}.sefin-textarea__textarea::placeholder{color:#e0e0e0!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-textarea__textarea::-webkit-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea::-moz-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textarea__textarea:-ms-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea:focus::placeholder{opacity:1;color:#e0e0e0!important}.sefin-textarea__textarea:disabled,.sefin-textarea__textarea:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textarea--auto-resize .sefin-textarea__textarea{resize:none;overflow-y:hidden}.sefin-textarea__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textarea__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textarea__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textarea__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textarea__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textarea__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textarea--outlined .sefin-textarea__container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textarea--outlined .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--outlined .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--outlined .sefin-textarea__border{display:none}.sefin-textarea--outlined.sefin-textarea--focused .sefin-textarea__container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textarea--outlined.sefin-textarea--error .sefin-textarea__container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-textarea--outlined.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--filled .sefin-textarea__container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--filled .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--filled .sefin-textarea__border{display:none}.sefin-textarea--filled.sefin-textarea--focused .sefin-textarea__container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--error .sefin-textarea__container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--standard .sefin-textarea__container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textarea--standard .sefin-textarea__wrapper{padding:0}.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textarea--standard .sefin-textarea__border{height:1px}.sefin-textarea--standard.sefin-textarea--focused .sefin-textarea__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textarea--standard.sefin-textarea--error .sefin-textarea__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textarea--standard.sefin-textarea--disabled .sefin-textarea__container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--sm .sefin-textarea__container{min-height:80px}.sefin-textarea--sm .sefin-textarea__textarea{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textarea--sm.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--sm.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-sm, 8px)}.sefin-textarea--sm.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textarea--md .sefin-textarea__container{min-height:120px}.sefin-textarea--lg .sefin-textarea__container{min-height:160px}.sefin-textarea--lg .sefin-textarea__textarea{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textarea--lg.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--lg.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--lg.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textarea--disabled{cursor:not-allowed;opacity:.6}.sefin-textarea--readonly .sefin-textarea__textarea{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
@@ -5961,7 +6039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                             useExisting: forwardRef(() => TextareaComponent),
                             multi: true,
                         },
-                    ], template: "<div [class]=\"textareaClasses\">\n  <!-- Textarea Container -->\n  <div class=\"sefin-textarea__container\">\n    <!-- Textarea Wrapper -->\n    <div class=\"sefin-textarea__wrapper\">\n      <!-- Textarea -->\n      <textarea\n        #textareaRef\n        [id]=\"id\"\n        [name]=\"name\"\n        [value]=\"value\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [attr.rows]=\"rows\"\n        [attr.cols]=\"cols\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-label]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"hasErrorState\"\n        [attr.aria-describedby]=\"displayError || hint || showCounter ? id + '-helper' : null\"\n        class=\"sefin-textarea__textarea\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      ></textarea>\n    </div>\n\n    <!-- Outline/Filled border -->\n    <div class=\"sefin-textarea__border\"></div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint || showCounter\"\n    [id]=\"id + '-helper'\"\n    class=\"sefin-textarea__helper\"\n    [class.sefin-textarea__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-textarea__error-message\">\n      {{ displayErrorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-textarea__hint\">\n      {{ hint }}\n    </span>\n    <span\n      *ngIf=\"showCounter && !displayError\"\n      class=\"sefin-textarea__counter\"\n      [class.sefin-textarea__counter--warning]=\"maxLength && characterCount > maxLength * 0.8\"\n    >\n      {{ characterCount }}{{ maxLength ? ' / ' + maxLength : '' }}\n    </span>\n  </div>\n</div>\n\n", styles: [".sefin-textarea{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textarea__container{position:relative;display:flex;flex-direction:column;width:100%;min-height:120px;overflow:visible;z-index:0}.sefin-textarea__wrapper{position:relative;flex:1;display:flex;flex-direction:column;height:100%;min-height:0;overflow:visible}.sefin-textarea__textarea{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;resize:vertical;overflow-y:auto}.sefin-textarea__textarea::placeholder{color:#e0e0e0!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-textarea__textarea::-webkit-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea::-moz-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textarea__textarea:-ms-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea:focus::placeholder{opacity:1;color:#e0e0e0!important}.sefin-textarea__textarea:disabled,.sefin-textarea__textarea:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textarea--auto-resize .sefin-textarea__textarea{resize:none;overflow-y:hidden}.sefin-textarea__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textarea__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textarea__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textarea__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textarea__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textarea__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textarea--outlined .sefin-textarea__container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textarea--outlined .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--outlined .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--outlined .sefin-textarea__border{display:none}.sefin-textarea--outlined.sefin-textarea--focused .sefin-textarea__container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 1px var(--sefin-color-primary-light, rgba(25, 118, 210, .1))}.sefin-textarea--outlined.sefin-textarea--error .sefin-textarea__container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-textarea--outlined.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--filled .sefin-textarea__container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--filled .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--filled .sefin-textarea__border{display:none}.sefin-textarea--filled.sefin-textarea--focused .sefin-textarea__container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--error .sefin-textarea__container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--standard .sefin-textarea__container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textarea--standard .sefin-textarea__wrapper{padding:0}.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textarea--standard .sefin-textarea__border{height:1px}.sefin-textarea--standard.sefin-textarea--focused .sefin-textarea__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textarea--standard.sefin-textarea--error .sefin-textarea__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textarea--standard.sefin-textarea--disabled .sefin-textarea__container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--sm .sefin-textarea__container{min-height:80px}.sefin-textarea--sm .sefin-textarea__textarea{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textarea--sm.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--sm.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-sm, 8px)}.sefin-textarea--sm.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textarea--md .sefin-textarea__container{min-height:120px}.sefin-textarea--lg .sefin-textarea__container{min-height:160px}.sefin-textarea--lg .sefin-textarea__textarea{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textarea--lg.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--lg.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--lg.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textarea--disabled{cursor:not-allowed;opacity:.6}.sefin-textarea--readonly .sefin-textarea__textarea{cursor:default}\n"] }]
+                    ], template: "<div [class]=\"textareaClasses\">\n  <!-- Textarea Container -->\n  <div class=\"sefin-textarea__container\">\n    <!-- Textarea Wrapper -->\n    <div class=\"sefin-textarea__wrapper\">\n      <!-- Textarea -->\n      <textarea\n        #textareaRef\n        [id]=\"id\"\n        [name]=\"name\"\n        [value]=\"value\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        [required]=\"required\"\n        [attr.rows]=\"rows\"\n        [attr.cols]=\"cols\"\n        [attr.maxlength]=\"maxLength\"\n        [attr.minlength]=\"minLength\"\n        [autocomplete]=\"autocomplete\"\n        [attr.aria-label]=\"placeholder\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"hasErrorState\"\n        [attr.aria-describedby]=\"displayError || hint || showCounter ? id + '-helper' : null\"\n        class=\"sefin-textarea__textarea\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      ></textarea>\n    </div>\n\n    <!-- Outline/Filled border -->\n    <div class=\"sefin-textarea__border\"></div>\n  </div>\n\n  <!-- Helper Text / Error Message -->\n  <div\n    *ngIf=\"displayError || hint || showCounter\"\n    [id]=\"id + '-helper'\"\n    class=\"sefin-textarea__helper\"\n    [class.sefin-textarea__helper--error]=\"displayError\"\n  >\n    <span *ngIf=\"displayError\" class=\"sefin-textarea__error-message\">\n      {{ displayErrorMessage }}\n    </span>\n    <span *ngIf=\"!displayError && hint\" class=\"sefin-textarea__hint\">\n      {{ hint }}\n    </span>\n    <span\n      *ngIf=\"showCounter && !displayError\"\n      class=\"sefin-textarea__counter\"\n      [class.sefin-textarea__counter--warning]=\"maxLength && characterCount > maxLength * 0.8\"\n    >\n      {{ characterCount }}{{ maxLength ? ' / ' + maxLength : '' }}\n    </span>\n  </div>\n</div>\n\n", styles: [".sefin-textarea{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textarea__container{position:relative;display:flex;flex-direction:column;width:100%;min-height:120px;overflow:visible;z-index:0}.sefin-textarea__wrapper{position:relative;flex:1;display:flex;flex-direction:column;height:100%;min-height:0;overflow:visible}.sefin-textarea__textarea{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;resize:vertical;overflow-y:auto}.sefin-textarea__textarea::placeholder{color:#e0e0e0!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-textarea__textarea::-webkit-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea::-moz-placeholder{color:#e0e0e0!important;opacity:1}.sefin-textarea__textarea:-ms-input-placeholder{color:#e0e0e0!important}.sefin-textarea__textarea:focus::placeholder{opacity:1;color:#e0e0e0!important}.sefin-textarea__textarea:disabled,.sefin-textarea__textarea:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textarea--auto-resize .sefin-textarea__textarea{resize:none;overflow-y:hidden}.sefin-textarea__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textarea__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textarea__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textarea__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textarea__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textarea__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textarea--outlined .sefin-textarea__container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textarea--outlined .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--outlined .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--outlined .sefin-textarea__border{display:none}.sefin-textarea--outlined.sefin-textarea--focused .sefin-textarea__container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textarea--outlined.sefin-textarea--error .sefin-textarea__container{border-color:var(--sefin-color-error, #f44336);border-width:.5px}.sefin-textarea--outlined.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--filled .sefin-textarea__container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--filled .sefin-textarea__textarea{padding:0;margin:0}.sefin-textarea--filled .sefin-textarea__border{display:none}.sefin-textarea--filled.sefin-textarea--focused .sefin-textarea__container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--error .sefin-textarea__container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textarea--filled.sefin-textarea--disabled .sefin-textarea__container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--standard .sefin-textarea__container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textarea--standard .sefin-textarea__wrapper{padding:0}.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textarea--standard .sefin-textarea__border{height:1px}.sefin-textarea--standard.sefin-textarea--focused .sefin-textarea__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textarea--standard.sefin-textarea--error .sefin-textarea__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textarea--standard.sefin-textarea--disabled .sefin-textarea__container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-textarea--sm .sefin-textarea__container{min-height:80px}.sefin-textarea--sm .sefin-textarea__textarea{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textarea--sm.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--sm.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-sm, 8px)}.sefin-textarea--sm.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textarea--md .sefin-textarea__container{min-height:120px}.sefin-textarea--lg .sefin-textarea__container{min-height:160px}.sefin-textarea--lg .sefin-textarea__textarea{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textarea--lg.sefin-textarea--outlined .sefin-textarea__wrapper,.sefin-textarea--lg.sefin-textarea--filled .sefin-textarea__wrapper{padding:var(--sefin-spacing-md, 16px)}.sefin-textarea--lg.sefin-textarea--standard .sefin-textarea__textarea{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textarea--disabled{cursor:not-allowed;opacity:.6}.sefin-textarea--readonly .sefin-textarea__textarea{cursor:default}\n"] }]
         }], propDecorators: { textareaRef: [{
                 type: ViewChild,
                 args: ['textareaRef', { static: false }]