@juligc99/loro-ui 0.0.1 → 0.0.6

package/README.md

@@ -41,6 +41,8 @@ Once the project is built, you can publish your library by following these steps
    npm publish
    ```
 
+4194ceb188576bc286d666413ed1d95a86034d43bb196f536a59fa97b431c32c
+
 ## Running unit tests
 
 To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

package/fesm2022/juligc99-loro-ui.mjs

@@ -806,7 +806,7 @@ class LoroCardNav {
         }
       </span>
     </button>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-card-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;width:100%;min-height:4.8rem;padding:.95rem 1.1rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:transparent;color:var(--loro-text);font:inherit;text-align:left;cursor:pointer}.loro-card-nav:last-child{border-bottom:0}.loro-card-nav--soft,.loro-card-nav--danger{border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-card-nav--danger{border-color:color-mix(in srgb,var(--loro-danger-text) 30%,transparent);background:var(--loro-danger-surface);color:var(--loro-danger-text)}.loro-card-nav--selected{border-color:#6c3cff52;background:#6c3cff0a}.loro-card-nav__icon{display:grid;width:3.15rem;height:3.15rem;place-items:center;border-radius:.9rem;background:var(--loro-brand-tint-surface)}.loro-card-nav--danger .loro-card-nav__icon{background:color-mix(in srgb,var(--loro-danger-text) 12%,transparent)}.loro-card-nav__copy{display:grid;gap:.25rem;min-width:0}.loro-card-nav__title{color:currentColor;font-size:1rem;font-weight:900;line-height:1.2}.loro-card-nav__description{color:var(--loro-muted);font-size:.9rem;font-weight:600;line-height:1.35}.loro-card-nav--danger .loro-card-nav__description{color:color-mix(in srgb,var(--loro-danger-text) 72%,var(--loro-muted))}.loro-card-nav__trailing{display:inline-flex;align-items:center;justify-content:flex-end;min-width:0}.loro-card-nav__value{color:var(--loro-muted-strong);font-weight:800;white-space:nowrap}@media(max-width:520px){.loro-card-nav{gap:.85rem;min-height:5.2rem;padding-inline:1rem}.loro-card-nav__icon{width:3rem;height:3rem}}\n"], dependencies: [{ kind: "component", type: LoroBadge$1, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroRadio$1, selector: "loro-radio", inputs: ["label", "value", "description", "checked", "variant"], outputs: ["selected"] }, { kind: "component", type: LoroToggle$1, selector: "loro-toggle", inputs: ["checked", "disabled", "ariaLabel"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-card-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;width:100%;min-height:4.8rem;padding:.95rem 1.1rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:transparent;color:var(--loro-text);font:inherit;text-align:left;cursor:pointer}.loro-card-nav:last-child{border-bottom:0}.loro-card-nav--soft,.loro-card-nav--danger{border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-card-nav--danger{border-color:color-mix(in srgb,var(--loro-danger-text) 30%,transparent);background:var(--loro-danger-surface);color:var(--loro-danger-text)}.loro-card-nav--selected{border-color:#6c3cff52;background:#6c3cff0a}.loro-card-nav__icon{display:grid;width:3.15rem;height:3.15rem;place-items:center;border-radius:.9rem;background:var(--loro-brand-tint-surface)}.loro-card-nav--danger .loro-card-nav__icon{background:color-mix(in srgb,var(--loro-danger-text) 12%,transparent)}.loro-card-nav__copy{display:grid;gap:.25rem;min-width:0}.loro-card-nav__title{color:currentColor;font-size:1rem;font-weight:900;line-height:1.2}.loro-card-nav__description{color:var(--loro-muted);font-size:.9rem;font-weight:600;line-height:1.35}.loro-card-nav--danger .loro-card-nav__description{color:color-mix(in srgb,var(--loro-danger-text) 72%,var(--loro-muted))}.loro-card-nav__trailing{display:inline-flex;align-items:center;justify-content:flex-end;min-width:0}.loro-card-nav__value{color:var(--loro-muted-strong);font-weight:800;white-space:nowrap}@media(max-width:520px){.loro-card-nav{gap:.85rem;min-height:5.2rem;padding-inline:1rem}.loro-card-nav__icon{width:3rem;height:3rem}}\n"], dependencies: [{ kind: "component", type: LoroBadge$1, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroRadio$1, selector: "loro-radio", inputs: ["label", "value", "description", "checked", "variant"], outputs: ["selected"] }, { kind: "component", type: LoroToggle$1, selector: "loro-toggle", inputs: ["checked", "disabled", "readonly", "required", "invalid", "touched", "errorMessage", "errors", "ariaLabel"], outputs: ["checkedChange", "touchedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCardNav, decorators: [{
             type: Component,
@@ -2191,16 +2191,21 @@ class LoroAuthField {
     icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input.required(...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     autocomplete = input('off', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
     selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
-    valueChange = output();
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
     errorId = `loro-auth-field-error-${++nextLoroAuthFieldId}`;
-    errorText = computed(() => this.errorMessage().trim(), ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
-    hasError = computed(() => this.state() === 'error' || this.errorText().length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => this.state() === 'error' || this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
     passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
     showToggle() {
         return this.type() === 'password';
@@ -2212,7 +2217,7 @@ class LoroAuthField {
         this.passwordVisible.update((value) => !value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAuthField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAuthField, isStandalone: true, selector: "loro-auth-field", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAuthField, isStandalone: true, selector: "loro-auth-field", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: `
     <label
       class="loro-auth-field"
       [class.loro-auth-field--selected]="selected()"
@@ -2228,9 +2233,13 @@ class LoroAuthField {
         [attr.autocomplete]="autocomplete()"
         [placeholder]="placeholder()"
         [value]="value()"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        [required]="required()"
         [attr.aria-invalid]="hasError() ? 'true' : null"
         [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
-        (input)="valueChange.emit(($any($event.target).value ?? '').toString())"
+        (input)="value.set(($any($event.target).value ?? '').toString())"
+        (blur)="touched.set(true)"
       />
       @if (showToggle()) {
         <button
@@ -2269,9 +2278,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         [attr.autocomplete]="autocomplete()"
         [placeholder]="placeholder()"
         [value]="value()"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        [required]="required()"
         [attr.aria-invalid]="hasError() ? 'true' : null"
         [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
-        (input)="valueChange.emit(($any($event.target).value ?? '').toString())"
+        (input)="value.set(($any($event.target).value ?? '').toString())"
+        (blur)="touched.set(true)"
       />
       @if (showToggle()) {
         <button
@@ -2291,7 +2304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       </span>
     }
   `, styles: [":host{display:grid;gap:.35rem}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0}.loro-auth-field{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;border:1px solid var(--loro-border-strong);border-radius:.72rem;background:var(--loro-surface);padding:.48rem .65rem;box-shadow:var(--loro-shadow-soft);color:var(--loro-text);font-family:var(--loro-font-brand);transition:border-color .18s ease,box-shadow .18s ease}.loro-auth-field:hover,.loro-auth-field:focus-within,.loro-auth-field--selected{border-color:var(--loro-auth-field-active-border, var(--loro-primary-500));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-auth-field--error{border-color:color-mix(in srgb,var(--loro-danger-text) 30%,var(--loro-border-strong));background:color-mix(in srgb,var(--loro-danger-surface) 34%,var(--loro-surface));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-auth-field--error:hover,.loro-auth-field--error:focus-within{border-color:color-mix(in srgb,var(--loro-danger-text) 44%,var(--loro-border-strong));box-shadow:var(--loro-shadow-soft),0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 10%,transparent)}.loro-auth-field__icon{display:grid;place-items:center;width:24px}.loro-auth-field__icon loro-icon{transform:scale(.62)}.loro-auth-field__input{width:100%;border:0;outline:none;background:transparent;color:var(--loro-text);font:inherit;font-size:.72rem;line-height:1.3}.loro-auth-field__input::placeholder{color:var(--loro-muted)}.loro-auth-field__toggle{border:0;background:transparent;padding:0;color:inherit;line-height:0;cursor:pointer}.loro-auth-field__toggle loro-icon{transform:scale(.62)}.loro-auth-field__error{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.35rem;color:var(--loro-danger-text);font-size:.72rem;font-weight:750;line-height:1.3}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
 
 class LoroCheckbox {
     checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
@@ -2385,20 +2398,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-checkbox{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.65rem;color:var(--loro-muted);cursor:pointer}.loro-checkbox--disabled{opacity:.62;cursor:not-allowed}.loro-checkbox__native{position:absolute;opacity:0;pointer-events:none}.loro-checkbox__box{position:relative;width:1.15rem;height:1.15rem;margin-top:.08rem;border:1.5px solid color-mix(in srgb,var(--loro-primary-500) 78%,#ffffff 22%);border-radius:.35rem;background:var(--loro-surface);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-surface) 70%,transparent);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.loro-checkbox--checked .loro-checkbox__box{background:linear-gradient(180deg,#8f6bff,#6d3dff);border-color:var(--loro-primary-500);box-shadow:inset 0 0 0 1px color-mix(in srgb,#ffffff 18%,transparent),0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 12%,transparent)}.loro-checkbox--checked .loro-checkbox__box:after{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.8rem;font-weight:900;line-height:1;content:\"\\2713\"}.loro-checkbox--invalid .loro-checkbox__box{border-color:color-mix(in srgb,var(--loro-danger-text) 44%,var(--loro-primary-500));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 10%,transparent)}.loro-checkbox__content{display:grid;gap:.22rem;min-width:0}.loro-checkbox__label{color:inherit;font-size:var(--loro-checkbox-label-font-size, .9rem);font-weight:var(--loro-checkbox-label-font-weight, 750);line-height:var(--loro-checkbox-label-line-height, 1.35)}.loro-checkbox__helper,.loro-checkbox__error{font-size:.78rem;font-weight:700;line-height:1.3}.loro-checkbox__helper{color:var(--loro-muted)}.loro-checkbox__error{color:var(--loro-danger-text)}\n"] }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
 
+let nextLoroDropdownId = 0;
 class LoroDropdown {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    valueChange = output();
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    errorId = `loro-dropdown-error-${++nextLoroDropdownId}`;
+    errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    showError = computed(() => this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    select(value) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.value.set(value);
+        this.touched.set(true);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroDropdown, isStandalone: true, selector: "loro-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
-    <label class="loro-dropdown">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroDropdown, isStandalone: true, selector: "loro-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: `
+    <label class="loro-dropdown" [class.loro-dropdown--invalid]="showError()">
       @if (label()) {
         <span class="loro-dropdown__label">{{ label() }}</span>
       }
       <span class="loro-dropdown__control">
-        <select [value]="value()" (change)="valueChange.emit(($any($event.target).value ?? '').toString())">
+        <select
+          [value]="value()"
+          [disabled]="disabled() || readonly()"
+          [required]="required()"
+          [attr.aria-invalid]="showError() ? 'true' : null"
+          [attr.aria-describedby]="showError() && errorText() ? errorId : null"
+          (change)="select(($any($event.target).value ?? '').toString())"
+          (blur)="touched.set(true)">
           @if (placeholder()) {
             <option value="" disabled>{{ placeholder() }}</option>
           }
@@ -2408,18 +2445,28 @@ class LoroDropdown {
         </select>
         <loro-icon name="chevron-down" [size]="22" alt="Abrir opciones" color="primary" />
       </span>
+      @if (showError() && errorText()) {
+        <span class="loro-dropdown__error" [id]="errorId">{{ errorText() }}</span>
+      }
     </label>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-dropdown{display:grid;gap:.55rem}.loro-dropdown__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-dropdown__control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:3.4rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface)}select{width:100%;border:0;outline:0;appearance:none;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:700}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-dropdown{display:grid;gap:.55rem}.loro-dropdown__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-dropdown__control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:3.4rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface)}select{width:100%;border:0;outline:0;appearance:none;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:700}.loro-dropdown--invalid .loro-dropdown__control{border-color:color-mix(in srgb,var(--loro-danger-text) 32%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}.loro-dropdown__error{color:var(--loro-danger-text);font-size:.82rem;font-weight:750;line-height:1.3}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDropdown, decorators: [{
             type: Component,
             args: [{ selector: 'loro-dropdown', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <label class="loro-dropdown">
+    <label class="loro-dropdown" [class.loro-dropdown--invalid]="showError()">
       @if (label()) {
         <span class="loro-dropdown__label">{{ label() }}</span>
       }
       <span class="loro-dropdown__control">
-        <select [value]="value()" (change)="valueChange.emit(($any($event.target).value ?? '').toString())">
+        <select
+          [value]="value()"
+          [disabled]="disabled() || readonly()"
+          [required]="required()"
+          [attr.aria-invalid]="showError() ? 'true' : null"
+          [attr.aria-describedby]="showError() && errorText() ? errorId : null"
+          (change)="select(($any($event.target).value ?? '').toString())"
+          (blur)="touched.set(true)">
           @if (placeholder()) {
             <option value="" disabled>{{ placeholder() }}</option>
           }
@@ -2429,9 +2476,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </select>
         <loro-icon name="chevron-down" [size]="22" alt="Abrir opciones" color="primary" />
       </span>
+      @if (showError() && errorText()) {
+        <span class="loro-dropdown__error" [id]="errorId">{{ errorText() }}</span>
+      }
     </label>
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-dropdown{display:grid;gap:.55rem}.loro-dropdown__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-dropdown__control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:3.4rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface)}select{width:100%;border:0;outline:0;appearance:none;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:700}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-dropdown{display:grid;gap:.55rem}.loro-dropdown__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-dropdown__control{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:3.4rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface)}select{width:100%;border:0;outline:0;appearance:none;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:700}.loro-dropdown--invalid .loro-dropdown__control{border-color:color-mix(in srgb,var(--loro-danger-text) 32%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}.loro-dropdown__error{color:var(--loro-danger-text);font-size:.82rem;font-weight:750;line-height:1.3}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
 
 class LoroFilterChip {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -2462,6 +2512,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 let nextLoroInputId = 0;
+function optionalNumberAttribute(value) {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+}
 class LoroInput {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -2487,8 +2544,8 @@ class LoroInput {
     touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     unit = input('ud', ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
     step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
-    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
-    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
+    max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumberAttribute });
     trailingClick = output();
     control = viewChild('control', ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
     errorId = `loro-input-error-${++nextLoroInputId}`;
@@ -2529,7 +2586,7 @@ class LoroInput {
     }
     coerceNumber(value) {
         const parsed = Number(value.replace(',', '.'));
-        return Number.isFinite(parsed) ? parsed : (this.min() ?? 0);
+        return Number.isFinite(parsed) ? parsed : this.coerceLimit(this.min(), 0);
     }
     formatValue(value) {
         if (this.normalizedUnit() === 'ud') {
@@ -2566,10 +2623,20 @@ class LoroInput {
         this.value.set(formatted);
     }
     clampValue(value) {
-        const min = this.min() ?? 0;
-        const max = this.max() ?? 100;
+        const min = this.coerceLimit(this.min(), 0);
+        const max = this.coerceLimit(this.max(), 100);
         return Math.min(max, Math.max(min, value));
     }
+    coerceLimit(value, fallback) {
+        if (typeof value === 'number') {
+            return Number.isFinite(value) ? value : fallback;
+        }
+        if (typeof value === 'string' && value.trim()) {
+            const parsed = Number(value.replace(',', '.'));
+            return Number.isFinite(parsed) ? parsed : fallback;
+        }
+        return fallback;
+    }
     sanitizeValue(value) {
         if (this.normalizedUnit() === 'ud') {
             return value.replace(/\D/g, '').slice(0, this.stepperInputMaxLength());
@@ -2909,11 +2976,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class LoroSegmentedControl {
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    valueChange = output();
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    showError = computed(() => this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    select(value) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.value.set(value);
+        this.touched.set(true);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSegmentedControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroSegmentedControl, isStandalone: true, selector: "loro-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "style.--loro-segmented-count": "options().length" } }, ngImport: i0, template: `
-    <div class="loro-segmented-control" role="tablist">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroSegmentedControl, isStandalone: true, selector: "loro-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "style.--loro-segmented-count": "options().length" } }, ngImport: i0, template: `
+    <div
+      class="loro-segmented-control"
+      role="tablist"
+      [class.loro-segmented-control--invalid]="showError()"
+      [attr.aria-invalid]="showError() ? 'true' : null">
       @for (option of options(); track option.value) {
         <button
           type="button"
@@ -2921,17 +3006,22 @@ class LoroSegmentedControl {
           [attr.aria-selected]="value() === option.value"
           [class.loro-segmented-control__button--active]="value() === option.value"
           class="loro-segmented-control__button"
-          (click)="valueChange.emit(option.value)">
+          [disabled]="disabled()"
+          (click)="select(option.value)">
           {{ option.label }}
         </button>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-segmented-control{display:grid;grid-template-columns:repeat(var(--loro-segmented-count, 2),minmax(0,1fr));min-height:3.15rem;padding:.18rem;border:1px solid var(--loro-border-subtle);border-radius:.75rem;background:var(--loro-surface-muted);box-shadow:var(--loro-shadow-soft)}.loro-segmented-control__button{border:0;border-radius:.58rem;background:transparent;color:var(--loro-muted-strong);font:inherit;font-size:clamp(.95rem,3vw,1rem);font-weight:850;line-height:1.15;text-wrap:balance;cursor:pointer}.loro-segmented-control__button--active{background:var(--loro-surface);color:var(--loro-primary-700);box-shadow:0 6px 18px #22194914}@media(max-width:640px){.loro-segmented-control{min-height:3rem}.loro-segmented-control__button{padding-inline:.6rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-segmented-control{display:grid;grid-template-columns:repeat(var(--loro-segmented-count, 2),minmax(0,1fr));min-height:3.15rem;padding:.18rem;border:1px solid var(--loro-border-subtle);border-radius:.75rem;background:var(--loro-surface-muted);box-shadow:var(--loro-shadow-soft)}.loro-segmented-control__button{border:0;border-radius:.58rem;background:transparent;color:var(--loro-muted-strong);font:inherit;font-size:clamp(.95rem,3vw,1rem);font-weight:850;line-height:1.15;text-wrap:balance;cursor:pointer}.loro-segmented-control__button--active{background:var(--loro-surface);color:var(--loro-primary-700);box-shadow:0 6px 18px #22194914}.loro-segmented-control__button:disabled{cursor:not-allowed;opacity:.58}.loro-segmented-control--invalid{border-color:color-mix(in srgb,var(--loro-danger-text) 32%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}@media(max-width:640px){.loro-segmented-control{min-height:3rem}.loro-segmented-control__button{padding-inline:.6rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSegmentedControl, decorators: [{
             type: Component,
             args: [{ selector: 'loro-segmented-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="loro-segmented-control" role="tablist">
+    <div
+      class="loro-segmented-control"
+      role="tablist"
+      [class.loro-segmented-control--invalid]="showError()"
+      [attr.aria-invalid]="showError() ? 'true' : null">
       @for (option of options(); track option.value) {
         <button
           type="button"
@@ -2939,15 +3029,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
           [attr.aria-selected]="value() === option.value"
           [class.loro-segmented-control__button--active]="value() === option.value"
           class="loro-segmented-control__button"
-          (click)="valueChange.emit(option.value)">
+          [disabled]="disabled()"
+          (click)="select(option.value)">
           {{ option.label }}
         </button>
       }
     </div>
   `, host: {
                         '[style.--loro-segmented-count]': 'options().length'
-                    }, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-segmented-control{display:grid;grid-template-columns:repeat(var(--loro-segmented-count, 2),minmax(0,1fr));min-height:3.15rem;padding:.18rem;border:1px solid var(--loro-border-subtle);border-radius:.75rem;background:var(--loro-surface-muted);box-shadow:var(--loro-shadow-soft)}.loro-segmented-control__button{border:0;border-radius:.58rem;background:transparent;color:var(--loro-muted-strong);font:inherit;font-size:clamp(.95rem,3vw,1rem);font-weight:850;line-height:1.15;text-wrap:balance;cursor:pointer}.loro-segmented-control__button--active{background:var(--loro-surface);color:var(--loro-primary-700);box-shadow:0 6px 18px #22194914}@media(max-width:640px){.loro-segmented-control{min-height:3rem}.loro-segmented-control__button{padding-inline:.6rem}}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+                    }, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-segmented-control{display:grid;grid-template-columns:repeat(var(--loro-segmented-count, 2),minmax(0,1fr));min-height:3.15rem;padding:.18rem;border:1px solid var(--loro-border-subtle);border-radius:.75rem;background:var(--loro-surface-muted);box-shadow:var(--loro-shadow-soft)}.loro-segmented-control__button{border:0;border-radius:.58rem;background:transparent;color:var(--loro-muted-strong);font:inherit;font-size:clamp(.95rem,3vw,1rem);font-weight:850;line-height:1.15;text-wrap:balance;cursor:pointer}.loro-segmented-control__button--active{background:var(--loro-surface);color:var(--loro-primary-700);box-shadow:0 6px 18px #22194914}.loro-segmented-control__button:disabled{cursor:not-allowed;opacity:.58}.loro-segmented-control--invalid{border-color:color-mix(in srgb,var(--loro-danger-text) 32%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}@media(max-width:640px){.loro-segmented-control{min-height:3rem}.loro-segmented-control__button{padding-inline:.6rem}}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
 
 class LoroSelect {
     title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -3005,15 +3096,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-select{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.25rem;padding:1rem;border-top:1px solid var(--loro-border-subtle);background:transparent}.loro-select--selected{border:1px solid rgba(108,60,255,.28);border-radius:1rem;background:#6c3cff0a}.loro-select__icon{display:grid;width:5.2rem;height:5.2rem;place-items:center;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-muted)}h3,p,small{margin:0}h3{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;color:var(--loro-text-strong);font-size:1.15rem;font-weight:900}p{margin-top:.35rem;color:var(--loro-muted-strong);font-weight:700}small,.loro-select__status{color:var(--loro-muted);font-weight:700}.loro-select__side{display:flex;align-items:center;justify-content:flex-end;gap:1rem}@media(max-width:680px){.loro-select{grid-template-columns:5rem minmax(0,1fr);border:1px solid var(--loro-border-subtle);border-radius:1rem}.loro-select__side{grid-column:2;justify-content:flex-start}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
+let nextLoroTextAreaId = 0;
 class LoroTextArea {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    maxLength = input(null, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
-    valueChange = output();
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    errorId = `loro-text-area-error-${++nextLoroTextAreaId}`;
+    errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    showError = computed(() => this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroTextArea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroTextArea, isStandalone: true, selector: "loro-text-area", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
-    <label class="loro-text-area">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroTextArea, isStandalone: true, selector: "loro-text-area", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, ngImport: i0, template: `
+    <label class="loro-text-area" [class.loro-text-area--invalid]="showError()">
       @if (label()) {
         <span class="loro-text-area__label">{{ label() }}</span>
       }
@@ -3021,19 +3122,28 @@ class LoroTextArea {
         <textarea
           [placeholder]="placeholder()"
           [value]="value()"
-          [attr.maxlength]="maxLength()"
-          (input)="valueChange.emit(($any($event.target).value ?? '').toString())"></textarea>
+          [attr.maxlength]="maxLength() ?? null"
+          [disabled]="disabled()"
+          [readonly]="readonly()"
+          [required]="required()"
+          [attr.aria-invalid]="showError() ? 'true' : null"
+          [attr.aria-describedby]="showError() && errorText() ? errorId : null"
+          (input)="value.set(($any($event.target).value ?? '').toString())"
+          (blur)="touched.set(true)"></textarea>
         @if (maxLength()) {
           <span class="loro-text-area__counter">{{ value().length }}/{{ maxLength() }}</span>
         }
       </span>
+      @if (showError() && errorText()) {
+        <span class="loro-text-area__error" [id]="errorId">{{ errorText() }}</span>
+      }
     </label>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-text-area{display:grid;gap:.55rem}.loro-text-area__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-text-area__control{display:grid;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface);overflow:hidden}textarea{width:100%;min-height:8rem;resize:vertical;border:0;outline:0;padding:1rem;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:650}textarea::placeholder{color:var(--loro-muted)}.loro-text-area__counter{justify-self:end;padding:0 1rem .75rem;color:var(--loro-muted);font-size:.85rem;font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-text-area{display:grid;gap:.55rem}.loro-text-area__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-text-area__control{display:grid;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface);overflow:hidden}textarea{width:100%;min-height:8rem;resize:vertical;border:0;outline:0;padding:1rem;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:650}textarea::placeholder{color:var(--loro-muted)}.loro-text-area__counter{justify-self:end;padding:0 1rem .75rem;color:var(--loro-muted);font-size:.85rem;font-weight:700}.loro-text-area--invalid .loro-text-area__control{border-color:color-mix(in srgb,var(--loro-danger-text) 32%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}.loro-text-area__error{color:var(--loro-danger-text);font-size:.82rem;font-weight:750;line-height:1.3}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroTextArea, decorators: [{
             type: Component,
             args: [{ selector: 'loro-text-area', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <label class="loro-text-area">
+    <label class="loro-text-area" [class.loro-text-area--invalid]="showError()">
       @if (label()) {
         <span class="loro-text-area__label">{{ label() }}</span>
       }
@@ -3041,40 +3151,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         <textarea
           [placeholder]="placeholder()"
           [value]="value()"
-          [attr.maxlength]="maxLength()"
-          (input)="valueChange.emit(($any($event.target).value ?? '').toString())"></textarea>
+          [attr.maxlength]="maxLength() ?? null"
+          [disabled]="disabled()"
+          [readonly]="readonly()"
+          [required]="required()"
+          [attr.aria-invalid]="showError() ? 'true' : null"
+          [attr.aria-describedby]="showError() && errorText() ? errorId : null"
+          (input)="value.set(($any($event.target).value ?? '').toString())"
+          (blur)="touched.set(true)"></textarea>
         @if (maxLength()) {
           <span class="loro-text-area__counter">{{ value().length }}/{{ maxLength() }}</span>
         }
       </span>
+      @if (showError() && errorText()) {
+        <span class="loro-text-area__error" [id]="errorId">{{ errorText() }}</span>
+      }
     </label>
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-text-area{display:grid;gap:.55rem}.loro-text-area__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-text-area__control{display:grid;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface);overflow:hidden}textarea{width:100%;min-height:8rem;resize:vertical;border:0;outline:0;padding:1rem;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:650}textarea::placeholder{color:var(--loro-muted)}.loro-text-area__counter{justify-self:end;padding:0 1rem .75rem;color:var(--loro-muted);font-size:.85rem;font-weight:700}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-text-area{display:grid;gap:.55rem}.loro-text-area__label{color:var(--loro-muted-strong);font-size:.95rem;font-weight:800}.loro-text-area__control{display:grid;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-input);background:var(--loro-surface);overflow:hidden}textarea{width:100%;min-height:8rem;resize:vertical;border:0;outline:0;padding:1rem;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:650}textarea::placeholder{color:var(--loro-muted)}.loro-text-area__counter{justify-self:end;padding:0 1rem .75rem;color:var(--loro-muted);font-size:.85rem;font-weight:700}.loro-text-area--invalid .loro-text-area__control{border-color:color-mix(in srgb,var(--loro-danger-text) 32%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}.loro-text-area__error{color:var(--loro-danger-text);font-size:.82rem;font-weight:750;line-height:1.3}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }] } });
 
 class LoroToggle {
-    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Cambiar estado', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    checkedChange = output();
+    errorText = computed(() => this.errorMessage().trim() || this.errors()[0]?.message?.trim() || '', ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    showError = computed(() => this.errorText().length > 0 || (this.invalid() && this.touched()), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
     toggle() {
-        if (this.disabled()) {
+        if (this.disabled() || this.readonly()) {
             return;
         }
-        this.checkedChange.emit(!this.checked());
+        this.checked.update((checked) => !checked);
+        this.touched.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: LoroToggle, isStandalone: true, selector: "loro-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: LoroToggle, isStandalone: true, selector: "loro-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, ngImport: i0, template: `
     <button
       type="button"
       class="loro-toggle"
       [class.loro-toggle--checked]="checked()"
+      [class.loro-toggle--invalid]="showError()"
       [disabled]="disabled()"
       [attr.aria-label]="ariaLabel()"
       [attr.aria-pressed]="checked()"
-      (click)="toggle()">
+      [attr.aria-invalid]="showError() ? 'true' : null"
+      (click)="toggle()"
+      (blur)="touched.set(true)">
       <span class="loro-toggle__thumb"></span>
     </button>
-  `, isInline: true, styles: [":host{display:inline-flex;flex:0 0 auto}.loro-toggle{position:relative;display:inline-flex;align-items:center;width:4rem;height:2.25rem;padding:.2rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface-muted);cursor:pointer;transition:background .16s ease,border-color .16s ease,opacity .16s ease}.loro-toggle__thumb{display:block;width:1.85rem;height:1.85rem;border-radius:50%;background:var(--loro-surface);box-shadow:0 3px 10px #2219492e;transition:transform .16s ease}.loro-toggle--checked{border-color:color-mix(in srgb,var(--loro-primary-500) 54%,transparent);background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-500))}.loro-toggle--checked .loro-toggle__thumb{transform:translate(1.75rem)}.loro-toggle:disabled{cursor:not-allowed;opacity:.7}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-flex;flex:0 0 auto}.loro-toggle{position:relative;display:inline-flex;align-items:center;width:4rem;height:2.25rem;padding:.2rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface-muted);cursor:pointer;transition:background .16s ease,border-color .16s ease,opacity .16s ease}.loro-toggle__thumb{display:block;width:1.85rem;height:1.85rem;border-radius:50%;background:var(--loro-surface);box-shadow:0 3px 10px #2219492e;transition:transform .16s ease}.loro-toggle--checked{border-color:color-mix(in srgb,var(--loro-primary-500) 54%,transparent);background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-500))}.loro-toggle--checked .loro-toggle__thumb{transform:translate(1.75rem)}.loro-toggle:disabled{cursor:not-allowed;opacity:.7}.loro-toggle--invalid{border-color:color-mix(in srgb,var(--loro-danger-text) 42%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroToggle, decorators: [{
             type: Component,
@@ -3083,14 +3213,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       type="button"
       class="loro-toggle"
       [class.loro-toggle--checked]="checked()"
+      [class.loro-toggle--invalid]="showError()"
       [disabled]="disabled()"
       [attr.aria-label]="ariaLabel()"
       [attr.aria-pressed]="checked()"
-      (click)="toggle()">
+      [attr.aria-invalid]="showError() ? 'true' : null"
+      (click)="toggle()"
+      (blur)="touched.set(true)">
       <span class="loro-toggle__thumb"></span>
     </button>
-  `, styles: [":host{display:inline-flex;flex:0 0 auto}.loro-toggle{position:relative;display:inline-flex;align-items:center;width:4rem;height:2.25rem;padding:.2rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface-muted);cursor:pointer;transition:background .16s ease,border-color .16s ease,opacity .16s ease}.loro-toggle__thumb{display:block;width:1.85rem;height:1.85rem;border-radius:50%;background:var(--loro-surface);box-shadow:0 3px 10px #2219492e;transition:transform .16s ease}.loro-toggle--checked{border-color:color-mix(in srgb,var(--loro-primary-500) 54%,transparent);background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-500))}.loro-toggle--checked .loro-toggle__thumb{transform:translate(1.75rem)}.loro-toggle:disabled{cursor:not-allowed;opacity:.7}\n"] }]
-        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
+  `, styles: [":host{display:inline-flex;flex:0 0 auto}.loro-toggle{position:relative;display:inline-flex;align-items:center;width:4rem;height:2.25rem;padding:.2rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface-muted);cursor:pointer;transition:background .16s ease,border-color .16s ease,opacity .16s ease}.loro-toggle__thumb{display:block;width:1.85rem;height:1.85rem;border-radius:50%;background:var(--loro-surface);box-shadow:0 3px 10px #2219492e;transition:transform .16s ease}.loro-toggle--checked{border-color:color-mix(in srgb,var(--loro-primary-500) 54%,transparent);background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-500))}.loro-toggle--checked .loro-toggle__thumb{transform:translate(1.75rem)}.loro-toggle:disabled{cursor:not-allowed;opacity:.7}.loro-toggle--invalid{border-color:color-mix(in srgb,var(--loro-danger-text) 42%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 8%,transparent)}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class LoroUpload {
     label = input('Adjuntar captura', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));