@juligc99/loro-ui 0.0.14 → 0.0.16

package/fesm2022/juligc99-loro-ui.mjs

@@ -8,35 +8,11 @@ import { RouterLink, Router } from '@angular/router';
 
 class Footer {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Footer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: Footer, isStandalone: true, selector: "loro-footer", ngImport: i0, template: `
-    <footer class="loro-footer">
-      <div class="loro-footer__meta">
-        <span class="loro-footer__dot"></span>
-        <p>© 2026 Al Loro App. Todos los derechos reservados.</p>
-      </div>
-      <div class="loro-footer__links">
-        <a href="#">Términos</a>
-        <a href="#">Privacidad</a>
-        <a href="#">Soporte</a>
-      </div>
-    </footer>
-  `, isInline: true, styles: [".loro-footer{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.75rem;padding-block:1.25rem;border-top:1px solid var(--loro-border-subtle);color:var(--loro-muted);font-size:.75rem}.loro-footer__meta,.loro-footer__links{display:flex;align-items:center;gap:.75rem}.loro-footer__meta{justify-content:center;text-align:center}.loro-footer__dot{width:.375rem;height:.375rem;flex:0 0 auto;border-radius:999px;background:var(--loro-primary-500)}.loro-footer__links{flex-wrap:wrap;justify-content:center;font-weight:600}.loro-footer__links a{color:inherit;text-decoration:none;transition:color .18s ease}.loro-footer__links a:hover{color:var(--loro-primary-500)}.loro-footer p{margin:0}@media(min-width:640px){.loro-footer{flex-direction:row}.loro-footer__meta{text-align:left}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: Footer, isStandalone: true, selector: "loro-footer", ngImport: i0, template: "<footer class=\"loro-footer\">\n      <div class=\"loro-footer__meta\">\n        <span class=\"loro-footer__dot\"></span>\n        <p>\u00A9 2026 Al Loro App. Todos los derechos reservados.</p>\n      </div>\n      <div class=\"loro-footer__links\">\n        <a href=\"#\">T\u00E9rminos</a>\n        <a href=\"#\">Privacidad</a>\n        <a href=\"#\">Soporte</a>\n      </div>\n    </footer>", styles: [".loro-footer{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.75rem;padding-block:1.25rem;border-top:1px solid var(--loro-border-subtle);color:var(--loro-muted);font-size:.75rem}.loro-footer__meta,.loro-footer__links{display:flex;align-items:center;gap:.75rem}.loro-footer__meta{justify-content:center;text-align:center}.loro-footer__dot{width:.375rem;height:.375rem;flex:0 0 auto;border-radius:999px;background:var(--loro-primary-500)}.loro-footer__links{flex-wrap:wrap;justify-content:center;font-weight:600}.loro-footer__links a{color:inherit;text-decoration:none;transition:color .18s ease}.loro-footer__links a:hover{color:var(--loro-primary-500)}.loro-footer p{margin:0}@media(min-width:640px){.loro-footer{flex-direction:row}.loro-footer__meta{text-align:left}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: Footer, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-footer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <footer class="loro-footer">
-      <div class="loro-footer__meta">
-        <span class="loro-footer__dot"></span>
-        <p>© 2026 Al Loro App. Todos los derechos reservados.</p>
-      </div>
-      <div class="loro-footer__links">
-        <a href="#">Términos</a>
-        <a href="#">Privacidad</a>
-        <a href="#">Soporte</a>
-      </div>
-    </footer>
-  `, styles: [".loro-footer{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.75rem;padding-block:1.25rem;border-top:1px solid var(--loro-border-subtle);color:var(--loro-muted);font-size:.75rem}.loro-footer__meta,.loro-footer__links{display:flex;align-items:center;gap:.75rem}.loro-footer__meta{justify-content:center;text-align:center}.loro-footer__dot{width:.375rem;height:.375rem;flex:0 0 auto;border-radius:999px;background:var(--loro-primary-500)}.loro-footer__links{flex-wrap:wrap;justify-content:center;font-weight:600}.loro-footer__links a{color:inherit;text-decoration:none;transition:color .18s ease}.loro-footer__links a:hover{color:var(--loro-primary-500)}.loro-footer p{margin:0}@media(min-width:640px){.loro-footer{flex-direction:row}.loro-footer__meta{text-align:left}}\n"] }]
+            args: [{ selector: 'loro-footer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer class=\"loro-footer\">\n      <div class=\"loro-footer__meta\">\n        <span class=\"loro-footer__dot\"></span>\n        <p>\u00A9 2026 Al Loro App. Todos los derechos reservados.</p>\n      </div>\n      <div class=\"loro-footer__links\">\n        <a href=\"#\">T\u00E9rminos</a>\n        <a href=\"#\">Privacidad</a>\n        <a href=\"#\">Soporte</a>\n      </div>\n    </footer>", styles: [".loro-footer{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.75rem;padding-block:1.25rem;border-top:1px solid var(--loro-border-subtle);color:var(--loro-muted);font-size:.75rem}.loro-footer__meta,.loro-footer__links{display:flex;align-items:center;gap:.75rem}.loro-footer__meta{justify-content:center;text-align:center}.loro-footer__dot{width:.375rem;height:.375rem;flex:0 0 auto;border-radius:999px;background:var(--loro-primary-500)}.loro-footer__links{flex-wrap:wrap;justify-content:center;font-weight:600}.loro-footer__links a{color:inherit;text-decoration:none;transition:color .18s ease}.loro-footer__links a:hover{color:var(--loro-primary-500)}.loro-footer p{margin:0}@media(min-width:640px){.loro-footer{flex-direction:row}.loro-footer__meta{text-align:left}}\n"] }]
         }] });
 
 /* This file is generated by projects/loro-ui/scripts/generate-asset-manifest.mjs. */
@@ -1045,49 +1021,11 @@ class LoroIcon {
             : color;
     }, ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroIcon, isStandalone: true, selector: "loro-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <span
-      class="loro-icon"
-      role="img"
-      [attr.aria-label]="decorative() ? null : altText()"
-      [attr.aria-hidden]="decorative() ? 'true' : null"
-      [style.width]="resolvedSize()"
-      [style.height]="resolvedSize()"
-    >
-      @if (renderMode() === 'origin') {
-        <img class="loro-icon__origin" [src]="src()" alt="" aria-hidden="true" />
-      } @else {
-        <span
-          class="loro-icon__mask"
-          [style.--loro-icon-mask]="'url(' + src() + ')'"
-          [style.--loro-icon-color]="resolvedColor()"
-        ></span>
-      }
-    </span>
-  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:0 0 auto}.loro-icon{display:inline-flex;width:100%;height:100%}.loro-icon__origin,.loro-icon__mask{display:block;width:100%;height:100%}.loro-icon__origin{object-fit:contain}.loro-icon__mask{background-color:var(--loro-icon-color);mask-image:var(--loro-icon-mask);mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-image:var(--loro-icon-mask);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroIcon, isStandalone: true, selector: "loro-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, renderMode: { classPropertyName: "renderMode", publicName: "renderMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n      class=\"loro-icon\"\n      role=\"img\"\n      [attr.aria-label]=\"decorative() ? null : altText()\"\n      [attr.aria-hidden]=\"decorative() ? 'true' : null\"\n      [style.width]=\"resolvedSize()\"\n      [style.height]=\"resolvedSize()\"\n    >\n      @if (renderMode() === 'origin') {\n        <img class=\"loro-icon__origin\" [src]=\"src()\" alt=\"\" aria-hidden=\"true\" />\n      } @else {\n        <span\n          class=\"loro-icon__mask\"\n          [style.--loro-icon-mask]=\"'url(' + src() + ')'\"\n          [style.--loro-icon-color]=\"resolvedColor()\"\n        ></span>\n      }\n    </span>", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:0 0 auto}.loro-icon{display:inline-flex;width:100%;height:100%}.loro-icon__origin,.loro-icon__mask{display:block;width:100%;height:100%}.loro-icon__origin{object-fit:contain}.loro-icon__mask{background-color:var(--loro-icon-color);mask-image:var(--loro-icon-mask);mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-image:var(--loro-icon-mask);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroIcon, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <span
-      class="loro-icon"
-      role="img"
-      [attr.aria-label]="decorative() ? null : altText()"
-      [attr.aria-hidden]="decorative() ? 'true' : null"
-      [style.width]="resolvedSize()"
-      [style.height]="resolvedSize()"
-    >
-      @if (renderMode() === 'origin') {
-        <img class="loro-icon__origin" [src]="src()" alt="" aria-hidden="true" />
-      } @else {
-        <span
-          class="loro-icon__mask"
-          [style.--loro-icon-mask]="'url(' + src() + ')'"
-          [style.--loro-icon-color]="resolvedColor()"
-        ></span>
-      }
-    </span>
-  `, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:0 0 auto}.loro-icon{display:inline-flex;width:100%;height:100%}.loro-icon__origin,.loro-icon__mask{display:block;width:100%;height:100%}.loro-icon__origin{object-fit:contain}.loro-icon__mask{background-color:var(--loro-icon-color);mask-image:var(--loro-icon-mask);mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-image:var(--loro-icon-mask);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}\n"] }]
+            args: [{ selector: 'loro-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n      class=\"loro-icon\"\n      role=\"img\"\n      [attr.aria-label]=\"decorative() ? null : altText()\"\n      [attr.aria-hidden]=\"decorative() ? 'true' : null\"\n      [style.width]=\"resolvedSize()\"\n      [style.height]=\"resolvedSize()\"\n    >\n      @if (renderMode() === 'origin') {\n        <img class=\"loro-icon__origin\" [src]=\"src()\" alt=\"\" aria-hidden=\"true\" />\n      } @else {\n        <span\n          class=\"loro-icon__mask\"\n          [style.--loro-icon-mask]=\"'url(' + src() + ')'\"\n          [style.--loro-icon-color]=\"resolvedColor()\"\n        ></span>\n      }\n    </span>", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:0 0 auto}.loro-icon{display:inline-flex;width:100%;height:100%}.loro-icon__origin,.loro-icon__mask{display:block;width:100%;height:100%}.loro-icon__origin{object-fit:contain}.loro-icon__mask{background-color:var(--loro-icon-color);mask-image:var(--loro-icon-mask);mask-repeat:no-repeat;mask-position:center;mask-size:contain;-webkit-mask-image:var(--loro-icon-mask);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], renderMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderMode", required: false }] }] } });
 
 class LoroAccordion {
@@ -1096,45 +1034,11 @@ class LoroAccordion {
     expanded = input(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
     expandedChange = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAccordion, isStandalone: true, selector: "loro-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: `
-    <article class="loro-accordion" [class.loro-accordion--open]="expanded()">
-      <button type="button" class="loro-accordion__header" (click)="expandedChange.emit(!expanded())">
-        @if (icon()) {
-          <span class="loro-accordion__icon">
-            <loro-icon [name]="icon()!" [size]="24" [alt]="title()" color="primary" />
-          </span>
-        }
-        <span class="loro-accordion__title">{{ title() }}</span>
-        <loro-icon [name]="expanded() ? 'chevron-up' : 'chevron-down'" [size]="22" alt="Expandir" color="primary" />
-      </button>
-      @if (expanded()) {
-        <div class="loro-accordion__body">
-          <ng-content />
-        </div>
-      }
-    </article>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-accordion{overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-soft)}.loro-accordion--open{border-color:#6c3cff57}.loro-accordion__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;width:100%;min-height:4.3rem;padding:0 1.1rem;border:0;background:transparent;color:var(--loro-text-strong);font:inherit;text-align:left;cursor:pointer}.loro-accordion__icon{display:grid;width:2.6rem;height:2.6rem;place-items:center;border-radius:50%;background:var(--loro-brand-tint-surface)}.loro-accordion__title{font-size:1rem;font-weight:900;line-height:1.25}.loro-accordion__body{padding:0 1.35rem 1.35rem;color:var(--loro-muted-strong);font-size:.94rem;font-weight:600;line-height:1.65}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAccordion, isStandalone: true, selector: "loro-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<article class=\"loro-accordion\" [class.loro-accordion--open]=\"expanded()\">\n      <button type=\"button\" class=\"loro-accordion__header\" (click)=\"expandedChange.emit(!expanded())\">\n        @if (icon()) {\n          <span class=\"loro-accordion__icon\">\n            <loro-icon [name]=\"icon()!\" [size]=\"24\" [alt]=\"title()\" color=\"primary\" />\n          </span>\n        }\n        <span class=\"loro-accordion__title\">{{ title() }}</span>\n        <loro-icon [name]=\"expanded() ? 'chevron-up' : 'chevron-down'\" [size]=\"22\" alt=\"Expandir\" color=\"primary\" />\n      </button>\n      @if (expanded()) {\n        <div class=\"loro-accordion__body\">\n          <ng-content />\n        </div>\n      }\n    </article>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-accordion{overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-soft)}.loro-accordion--open{border-color:#6c3cff57}.loro-accordion__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;width:100%;min-height:4.3rem;padding:0 1.1rem;border:0;background:transparent;color:var(--loro-text-strong);font:inherit;text-align:left;cursor:pointer}.loro-accordion__icon{display:grid;width:2.6rem;height:2.6rem;place-items:center;border-radius:50%;background:var(--loro-brand-tint-surface)}.loro-accordion__title{font-size:1rem;font-weight:900;line-height:1.25}.loro-accordion__body{padding:0 1.35rem 1.35rem;color:var(--loro-muted-strong);font-size:.94rem;font-weight:600;line-height:1.65}\n"], dependencies: [{ kind: "component", type: LoroIcon, 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: LoroAccordion, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-accordion', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <article class="loro-accordion" [class.loro-accordion--open]="expanded()">
-      <button type="button" class="loro-accordion__header" (click)="expandedChange.emit(!expanded())">
-        @if (icon()) {
-          <span class="loro-accordion__icon">
-            <loro-icon [name]="icon()!" [size]="24" [alt]="title()" color="primary" />
-          </span>
-        }
-        <span class="loro-accordion__title">{{ title() }}</span>
-        <loro-icon [name]="expanded() ? 'chevron-up' : 'chevron-down'" [size]="22" alt="Expandir" color="primary" />
-      </button>
-      @if (expanded()) {
-        <div class="loro-accordion__body">
-          <ng-content />
-        </div>
-      }
-    </article>
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-accordion{overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-soft)}.loro-accordion--open{border-color:#6c3cff57}.loro-accordion__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;width:100%;min-height:4.3rem;padding:0 1.1rem;border:0;background:transparent;color:var(--loro-text-strong);font:inherit;text-align:left;cursor:pointer}.loro-accordion__icon{display:grid;width:2.6rem;height:2.6rem;place-items:center;border-radius:50%;background:var(--loro-brand-tint-surface)}.loro-accordion__title{font-size:1rem;font-weight:900;line-height:1.25}.loro-accordion__body{padding:0 1.35rem 1.35rem;color:var(--loro-muted-strong);font-size:.94rem;font-weight:600;line-height:1.65}\n"] }]
+            args: [{ selector: 'loro-accordion', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"loro-accordion\" [class.loro-accordion--open]=\"expanded()\">\n      <button type=\"button\" class=\"loro-accordion__header\" (click)=\"expandedChange.emit(!expanded())\">\n        @if (icon()) {\n          <span class=\"loro-accordion__icon\">\n            <loro-icon [name]=\"icon()!\" [size]=\"24\" [alt]=\"title()\" color=\"primary\" />\n          </span>\n        }\n        <span class=\"loro-accordion__title\">{{ title() }}</span>\n        <loro-icon [name]=\"expanded() ? 'chevron-up' : 'chevron-down'\" [size]=\"22\" alt=\"Expandir\" color=\"primary\" />\n      </button>\n      @if (expanded()) {\n        <div class=\"loro-accordion__body\">\n          <ng-content />\n        </div>\n      }\n    </article>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-accordion{overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-soft)}.loro-accordion--open{border-color:#6c3cff57}.loro-accordion__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.9rem;width:100%;min-height:4.3rem;padding:0 1.1rem;border:0;background:transparent;color:var(--loro-text-strong);font:inherit;text-align:left;cursor:pointer}.loro-accordion__icon{display:grid;width:2.6rem;height:2.6rem;place-items:center;border-radius:50%;background:var(--loro-brand-tint-surface)}.loro-accordion__title{font-size:1rem;font-weight:900;line-height:1.25}.loro-accordion__body{padding:0 1.35rem 1.35rem;color:var(--loro-muted-strong);font-size:.94rem;font-weight:600;line-height:1.65}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
 class LoroImage {
@@ -1155,31 +1059,11 @@ class LoroImage {
     resolvedWidth = computed(() => this.size() || this.width(), ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []));
     resolvedHeight = computed(() => this.size() || this.height(), ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: LoroImage, isStandalone: true, selector: "loro-image", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <img
-      class="loro-image"
-      [src]="src()"
-      [alt]="altText()"
-      [style.width]="resolvedWidth()"
-      [style.height]="resolvedHeight()"
-      [style.object-fit]="fit()"
-      [style.display]="'block'"
-    />
-  `, isInline: true, styles: [":host{display:block}.loro-image{max-width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: LoroImage, isStandalone: true, selector: "loro-image", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<img\n      class=\"loro-image\"\n      [src]=\"src()\"\n      [alt]=\"altText()\"\n      [style.width]=\"resolvedWidth()\"\n      [style.height]=\"resolvedHeight()\"\n      [style.object-fit]=\"fit()\"\n      [style.display]=\"'block'\"\n    />", styles: [":host{display:block}.loro-image{max-width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroImage, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-image', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <img
-      class="loro-image"
-      [src]="src()"
-      [alt]="altText()"
-      [style.width]="resolvedWidth()"
-      [style.height]="resolvedHeight()"
-      [style.object-fit]="fit()"
-      [style.display]="'block'"
-    />
-  `, styles: [":host{display:block}.loro-image{max-width:100%}\n"] }]
+            args: [{ selector: 'loro-image', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n      class=\"loro-image\"\n      [src]=\"src()\"\n      [alt]=\"altText()\"\n      [style.width]=\"resolvedWidth()\"\n      [style.height]=\"resolvedHeight()\"\n      [style.object-fit]=\"fit()\"\n      [style.display]=\"'block'\"\n    />", styles: [":host{display:block}.loro-image{max-width:100%}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }] } });
 
 class LoroHapticsService {
@@ -1242,6 +1126,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * LoroButton Constants
+ *
+ * Default values, valid options, and configuration constants for the LoroButton component.
+ * Update these to maintain consistency across all button usage.
+ */
+/**
+ * Default input values for LoroButton
+ */
+const LORO_BUTTON_DEFAULTS = {
+    text: '',
+    label: '',
+    variant: 'primary',
+    type: 'primary',
+    color: 'primary',
+    size: 'md',
+    fullWidth: false,
+    buttonWidth: 'fit-content',
+    disabled: false,
+    loading: false,
+    selected: false,
+    htmlType: 'button',
+    iconMode: 'none',
+    socialMobileCompact: true,
+    iconSize: 23,
+    iconButtonSize: null,
+    iconColor: '',
+};
+/**
+ * Valid options for button variants
+ */
+const LORO_BUTTON_VARIANTS = [
+    'primary',
+    'outline',
+    'ghost',
+    'danger',
+    'soft',
+    'social',
+    'action',
+    'navigation',
+];
+/**
+ * Valid options for button types
+ */
+const LORO_BUTTON_TYPES = ['primary', 'secondary', 'tertiary'];
+/**
+ * Valid options for button colors
+ */
+const LORO_BUTTON_COLORS = ['primary', 'secondary', 'tertiary', 'danger'];
+/**
+ * Valid options for button sizes
+ */
+const LORO_BUTTON_SIZES = ['sm', 'md', 'lg'];
+/**
+ * Valid options for button widths
+ */
+const LORO_BUTTON_WIDTHS = ['fit-content', 'full'];
+/**
+ * Valid options for icon modes
+ */
+const LORO_BUTTON_ICON_MODES = ['none', 'with-icon', 'only-icon'];
+/**
+ * Valid options for HTML button types
+ */
+const LORO_BUTTON_HTML_TYPES = ['button', 'submit', 'reset'];
+/**
+ * CSS class names used by LoroButton (BEM notation)
+ */
+const LORO_BUTTON_CLASSES = {
+    container: 'loro-button',
+    variant: (variant) => `loro-button--${variant}`,
+    size: (size) => `loro-button--${size}`,
+    color: (color) => `loro-button--${color}-color`,
+    width: (width) => width === 'full' ? 'loro-button--full' : undefined,
+    state: {
+        disabled: 'loro-button--disabled',
+        loading: 'loro-button--loading',
+        selected: 'loro-button--selected',
+    },
+    elements: {
+        label: 'loro-button__label',
+        spinner: 'loro-button__spinner',
+        srStatus: 'loro-button__sr-status',
+    },
+};
+/**
+ * Accessible labels for button states
+ */
+const LORO_BUTTON_ARIA_LABELS = {
+    loading: 'Loading',
+    disabled: 'Button is disabled',
+};
+
+/**
+ * LoroButton Component
+ *
+ * A versatile, accessible button component with multiple variants, sizes, and states.
+ * Follows Angular 21 best practices with signals, OnPush change detection, and semantic HTML.
+ *
+ * @example
+ * ```html
+ * <loro-button
+ *   [text]="'Click me'"
+ *   variant="primary"
+ *   size="md"
+ *   (change)="onButtonClick()"
+ * />
+ * ```
+ */
 class LoroButton {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
@@ -1535,55 +1528,11 @@ class LoroAssistantCard {
     actionVariant = input('primary', ...(ngDevMode ? [{ debugName: "actionVariant" }] : /* istanbul ignore next */ []));
     action = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAssistantCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAssistantCard, isStandalone: true, selector: "loro-assistant-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, imageName: { classPropertyName: "imageName", publicName: "imageName", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: true, isRequired: false, transformFunction: null }, actionVariant: { classPropertyName: "actionVariant", publicName: "actionVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: `
-    <section class="loro-assistant-card">
-      <div class="loro-assistant-card__media">
-        @if (imageName()) {
-          <loro-image [name]="imageName()!" [alt]="title()" width="100%" />
-        } @else {
-          <loro-icon [name]="icon()" [size]="56" [alt]="title()" color="primary" />
-        }
-      </div>
-      <div class="loro-assistant-card__copy">
-        <h2>{{ title() }}</h2>
-        <p>{{ description() }}</p>
-      </div>
-      @if (actionLabel()) {
-        <loro-button
-          [label]="actionLabel()"
-          [icon]="actionIcon()"
-          [variant]="actionVariant()"
-          [fullWidth]="true"
-          (buttonClick)="action.emit()" />
-      }
-    </section>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-assistant-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(12rem,auto);align-items:center;gap:1.5rem;padding:1.35rem 1.5rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-assistant-card__media{display:grid;width:6rem;height:5rem;place-items:center;overflow:hidden}.loro-assistant-card__copy{min-width:0}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:1.2rem;font-weight:900;line-height:1.2}p{margin-top:.35rem;color:var(--loro-muted);font-weight:650;line-height:1.45}@media(max-width:680px){.loro-assistant-card{grid-template-columns:auto minmax(0,1fr)}loro-button{grid-column:1 / -1}}\n"], dependencies: [{ kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAssistantCard, isStandalone: true, selector: "loro-assistant-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: true, transformFunction: null }, imageName: { classPropertyName: "imageName", publicName: "imageName", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: true, isRequired: false, transformFunction: null }, actionVariant: { classPropertyName: "actionVariant", publicName: "actionVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: "<section class=\"loro-assistant-card\">\n      <div class=\"loro-assistant-card__media\">\n        @if (imageName()) {\n          <loro-image [name]=\"imageName()!\" [alt]=\"title()\" width=\"100%\" />\n        } @else {\n          <loro-icon [name]=\"icon()\" [size]=\"56\" [alt]=\"title()\" color=\"primary\" />\n        }\n      </div>\n      <div class=\"loro-assistant-card__copy\">\n        <h2>{{ title() }}</h2>\n        <p>{{ description() }}</p>\n      </div>\n      @if (actionLabel()) {\n        <loro-button\n          [label]=\"actionLabel()\"\n          [icon]=\"actionIcon()\"\n          [variant]=\"actionVariant()\"\n          [fullWidth]=\"true\"\n          (buttonClick)=\"action.emit()\" />\n      }\n    </section>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-assistant-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(12rem,auto);align-items:center;gap:1.5rem;padding:1.35rem 1.5rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-assistant-card__media{display:grid;width:6rem;height:5rem;place-items:center;overflow:hidden}.loro-assistant-card__copy{min-width:0}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:1.2rem;font-weight:900;line-height:1.2}p{margin-top:.35rem;color:var(--loro-muted);font-weight:650;line-height:1.45}@media(max-width:680px){.loro-assistant-card{grid-template-columns:auto minmax(0,1fr)}loro-button{grid-column:1/-1}}\n"], dependencies: [{ kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAssistantCard, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-assistant-card', standalone: true, imports: [LoroButton, LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <section class="loro-assistant-card">
-      <div class="loro-assistant-card__media">
-        @if (imageName()) {
-          <loro-image [name]="imageName()!" [alt]="title()" width="100%" />
-        } @else {
-          <loro-icon [name]="icon()" [size]="56" [alt]="title()" color="primary" />
-        }
-      </div>
-      <div class="loro-assistant-card__copy">
-        <h2>{{ title() }}</h2>
-        <p>{{ description() }}</p>
-      </div>
-      @if (actionLabel()) {
-        <loro-button
-          [label]="actionLabel()"
-          [icon]="actionIcon()"
-          [variant]="actionVariant()"
-          [fullWidth]="true"
-          (buttonClick)="action.emit()" />
-      }
-    </section>
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-assistant-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(12rem,auto);align-items:center;gap:1.5rem;padding:1.35rem 1.5rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-assistant-card__media{display:grid;width:6rem;height:5rem;place-items:center;overflow:hidden}.loro-assistant-card__copy{min-width:0}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:1.2rem;font-weight:900;line-height:1.2}p{margin-top:.35rem;color:var(--loro-muted);font-weight:650;line-height:1.45}@media(max-width:680px){.loro-assistant-card{grid-template-columns:auto minmax(0,1fr)}loro-button{grid-column:1 / -1}}\n"] }]
+            args: [{ selector: 'loro-assistant-card', standalone: true, imports: [LoroButton, LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"loro-assistant-card\">\n      <div class=\"loro-assistant-card__media\">\n        @if (imageName()) {\n          <loro-image [name]=\"imageName()!\" [alt]=\"title()\" width=\"100%\" />\n        } @else {\n          <loro-icon [name]=\"icon()\" [size]=\"56\" [alt]=\"title()\" color=\"primary\" />\n        }\n      </div>\n      <div class=\"loro-assistant-card__copy\">\n        <h2>{{ title() }}</h2>\n        <p>{{ description() }}</p>\n      </div>\n      @if (actionLabel()) {\n        <loro-button\n          [label]=\"actionLabel()\"\n          [icon]=\"actionIcon()\"\n          [variant]=\"actionVariant()\"\n          [fullWidth]=\"true\"\n          (buttonClick)=\"action.emit()\" />\n      }\n    </section>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-assistant-card{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(12rem,auto);align-items:center;gap:1.5rem;padding:1.35rem 1.5rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-assistant-card__media{display:grid;width:6rem;height:5rem;place-items:center;overflow:hidden}.loro-assistant-card__copy{min-width:0}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:1.2rem;font-weight:900;line-height:1.2}p{margin-top:.35rem;color:var(--loro-muted);font-weight:650;line-height:1.45}@media(max-width:680px){.loro-assistant-card{grid-template-columns:auto minmax(0,1fr)}loro-button{grid-column:1/-1}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: true }] }], imageName: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageName", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionIcon", required: false }] }], actionVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionVariant", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
 function isNativeSocialIcon(icon) {
@@ -1609,66 +1558,22 @@ class LoroAuthSocialButton {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAuthSocialButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAuthSocialButton, isStandalone: true, selector: "loro-auth-social-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <button
-      type="button"
-      class="loro-auth-social-button"
-      [class.loro-auth-social-button--outline]="outline()"
-      [class.loro-auth-social-button--selected]="selected()"
-      (click)="releaseFocus($event)"
-    >
-      @if (nativeIconSrc()) {
-        <img
-          class="loro-auth-social-button__native-icon"
-          [src]="nativeIconSrc()"
-          alt=""
-          aria-hidden="true"
-          [style.width.px]="iconSize()"
-          [style.height.px]="iconSize()"
-        />
-      } @else {
-        <loro-icon [name]="icon()" [size]="iconSize()" [alt]="label()" />
-      }
-      <span>{{ label() }}</span>
-    </button>
-  `, isInline: true, styles: [":host{display:block}.loro-auth-social-button{display:flex;width:100%;align-items:center;justify-content:center;gap:.8rem;border:1px solid var(--loro-border-subtle);border-radius:.9rem;background:var(--loro-surface);min-height:3.25rem;padding:.78rem 1rem;box-shadow:var(--loro-shadow-soft);color:var(--loro-text);font:inherit;font-family:var(--loro-font-brand);font-size:.92rem;font-weight:800;cursor:pointer;text-align:center;transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease,background .12s ease}.loro-auth-social-button:hover,.loro-auth-social-button:focus-visible{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-social-button:active{background:color-mix(in srgb,var(--loro-primary-500) 6%,var(--loro-surface));transform:scale(.985)}.loro-auth-social-button loro-icon{transform:scale(.82)}.loro-auth-social-button__native-icon{flex:0 0 auto;object-fit:contain}.loro-auth-social-button--outline{border:2px solid var(--loro-primary-500);box-shadow:none;color:var(--loro-primary-500);background:transparent}.loro-auth-social-button--outline:hover,.loro-auth-social-button--outline:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-auth-social-button--outline:active{background:color-mix(in srgb,var(--loro-primary-500) 8%,transparent)}@media(min-width:1024px){.loro-auth-social-button{min-height:3rem;padding:.65rem 1rem;font-size:.86rem}.loro-auth-social-button--outline{font-size:.92rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAuthSocialButton, isStandalone: true, selector: "loro-auth-social-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n      type=\"button\"\n      class=\"loro-auth-social-button\"\n      [class.loro-auth-social-button--outline]=\"outline()\"\n      [class.loro-auth-social-button--selected]=\"selected()\"\n      (click)=\"releaseFocus($event)\"\n    >\n      @if (nativeIconSrc()) {\n        <img\n          class=\"loro-auth-social-button__native-icon\"\n          [src]=\"nativeIconSrc()\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n        />\n      } @else {\n        <loro-icon [name]=\"icon()\" [size]=\"iconSize()\" [alt]=\"label()\" />\n      }\n      <span>{{ label() }}</span>\n    </button>", styles: [":host{display:block}.loro-auth-social-button{display:flex;width:100%;align-items:center;justify-content:center;gap:.8rem;border:1px solid var(--loro-border-subtle);border-radius:.9rem;background:var(--loro-surface);min-height:3.25rem;padding:.78rem 1rem;box-shadow:var(--loro-shadow-soft);color:var(--loro-text);font:inherit;font-family:var(--loro-font-brand);font-size:.92rem;font-weight:800;cursor:pointer;text-align:center;transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease,background .12s ease}.loro-auth-social-button:hover,.loro-auth-social-button:focus-visible{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-social-button:active{background:color-mix(in srgb,var(--loro-primary-500) 6%,var(--loro-surface));transform:scale(.985)}.loro-auth-social-button loro-icon{transform:scale(.82)}.loro-auth-social-button__native-icon{flex:0 0 auto;object-fit:contain}.loro-auth-social-button--outline{border:2px solid var(--loro-primary-500);box-shadow:none;color:var(--loro-primary-500);background:transparent}.loro-auth-social-button--outline:hover,.loro-auth-social-button--outline:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-auth-social-button--outline:active{background:color-mix(in srgb,var(--loro-primary-500) 8%,transparent)}@media(min-width:1024px){.loro-auth-social-button{min-height:3rem;padding:.65rem 1rem;font-size:.86rem}.loro-auth-social-button--outline{font-size:.92rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon, 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: LoroAuthSocialButton, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-auth-social-button', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <button
-      type="button"
-      class="loro-auth-social-button"
-      [class.loro-auth-social-button--outline]="outline()"
-      [class.loro-auth-social-button--selected]="selected()"
-      (click)="releaseFocus($event)"
-    >
-      @if (nativeIconSrc()) {
-        <img
-          class="loro-auth-social-button__native-icon"
-          [src]="nativeIconSrc()"
-          alt=""
-          aria-hidden="true"
-          [style.width.px]="iconSize()"
-          [style.height.px]="iconSize()"
-        />
-      } @else {
-        <loro-icon [name]="icon()" [size]="iconSize()" [alt]="label()" />
-      }
-      <span>{{ label() }}</span>
-    </button>
-  `, styles: [":host{display:block}.loro-auth-social-button{display:flex;width:100%;align-items:center;justify-content:center;gap:.8rem;border:1px solid var(--loro-border-subtle);border-radius:.9rem;background:var(--loro-surface);min-height:3.25rem;padding:.78rem 1rem;box-shadow:var(--loro-shadow-soft);color:var(--loro-text);font:inherit;font-family:var(--loro-font-brand);font-size:.92rem;font-weight:800;cursor:pointer;text-align:center;transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease,background .12s ease}.loro-auth-social-button:hover,.loro-auth-social-button:focus-visible{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-social-button:active{background:color-mix(in srgb,var(--loro-primary-500) 6%,var(--loro-surface));transform:scale(.985)}.loro-auth-social-button loro-icon{transform:scale(.82)}.loro-auth-social-button__native-icon{flex:0 0 auto;object-fit:contain}.loro-auth-social-button--outline{border:2px solid var(--loro-primary-500);box-shadow:none;color:var(--loro-primary-500);background:transparent}.loro-auth-social-button--outline:hover,.loro-auth-social-button--outline:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-auth-social-button--outline:active{background:color-mix(in srgb,var(--loro-primary-500) 8%,transparent)}@media(min-width:1024px){.loro-auth-social-button{min-height:3rem;padding:.65rem 1rem;font-size:.86rem}.loro-auth-social-button--outline{font-size:.92rem}}\n"] }]
+            args: [{ selector: 'loro-auth-social-button', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n      type=\"button\"\n      class=\"loro-auth-social-button\"\n      [class.loro-auth-social-button--outline]=\"outline()\"\n      [class.loro-auth-social-button--selected]=\"selected()\"\n      (click)=\"releaseFocus($event)\"\n    >\n      @if (nativeIconSrc()) {\n        <img\n          class=\"loro-auth-social-button__native-icon\"\n          [src]=\"nativeIconSrc()\"\n          alt=\"\"\n          aria-hidden=\"true\"\n          [style.width.px]=\"iconSize()\"\n          [style.height.px]=\"iconSize()\"\n        />\n      } @else {\n        <loro-icon [name]=\"icon()\" [size]=\"iconSize()\" [alt]=\"label()\" />\n      }\n      <span>{{ label() }}</span>\n    </button>", styles: [":host{display:block}.loro-auth-social-button{display:flex;width:100%;align-items:center;justify-content:center;gap:.8rem;border:1px solid var(--loro-border-subtle);border-radius:.9rem;background:var(--loro-surface);min-height:3.25rem;padding:.78rem 1rem;box-shadow:var(--loro-shadow-soft);color:var(--loro-text);font:inherit;font-family:var(--loro-font-brand);font-size:.92rem;font-weight:800;cursor:pointer;text-align:center;transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease,background .12s ease}.loro-auth-social-button:hover,.loro-auth-social-button:focus-visible{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-social-button:active{background:color-mix(in srgb,var(--loro-primary-500) 6%,var(--loro-surface));transform:scale(.985)}.loro-auth-social-button loro-icon{transform:scale(.82)}.loro-auth-social-button__native-icon{flex:0 0 auto;object-fit:contain}.loro-auth-social-button--outline{border:2px solid var(--loro-primary-500);box-shadow:none;color:var(--loro-primary-500);background:transparent}.loro-auth-social-button--outline:hover,.loro-auth-social-button--outline:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 14%,transparent)}.loro-auth-social-button--outline:active{background:color-mix(in srgb,var(--loro-primary-500) 8%,transparent)}@media(min-width:1024px){.loro-auth-social-button{min-height:3rem;padding:.65rem 1rem;font-size:.86rem}.loro-auth-social-button--outline{font-size:.92rem}}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }] } });
 
 class LoroBadge {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: LoroBadge, isStandalone: true, selector: "loro-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<span class="loro-badge" [class]="'loro-badge loro-badge--' + variant()">{{ label() }}</span>`, isInline: true, styles: [":host{display:inline-flex;min-width:0;font-family:var(--loro-font-brand)}.loro-badge{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:1.75rem;padding:.25rem .7rem;border:1px solid transparent;border-radius:var(--loro-radius-pill);font-size:.82rem;font-weight:800;line-height:1.1;white-space:nowrap}.loro-badge--success{border-color:#1f9d5533;background:#1f9d551f;color:#1f9d55}.loro-badge--error{border-color:#dc26262e;background:#dc26261a;color:#dc2626}.loro-badge--info{border-color:#6c3cff2e;background:#6c3cff1a;color:var(--loro-primary-700)}.loro-badge--warning{border-color:#f5a80038;background:#f5a8001f;color:#986c00}.loro-badge--neutral{border-color:var(--loro-border-soft);background:var(--loro-surface-muted);color:var(--loro-muted-strong)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: LoroBadge, isStandalone: true, selector: "loro-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"loro-badge\" [class]=\"'loro-badge loro-badge--' + variant()\">{{ label() }}</span>", styles: [":host{display:inline-flex;min-width:0;font-family:var(--loro-font-brand)}.loro-badge{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:1.75rem;padding:.25rem .7rem;border:1px solid transparent;border-radius:var(--loro-radius-pill);font-size:.82rem;font-weight:800;line-height:1.1;white-space:nowrap}.loro-badge--success{border-color:#1f9d5533;background:#1f9d551f;color:#1f9d55}.loro-badge--error{border-color:#dc26262e;background:#dc26261a;color:#dc2626}.loro-badge--info{border-color:#6c3cff2e;background:#6c3cff1a;color:var(--loro-primary-700)}.loro-badge--warning{border-color:#f5a80038;background:#f5a8001f;color:#986c00}.loro-badge--neutral{border-color:var(--loro-border-soft);background:var(--loro-surface-muted);color:var(--loro-muted-strong)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroBadge, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<span class="loro-badge" [class]="'loro-badge loro-badge--' + variant()">{{ label() }}</span>`, styles: [":host{display:inline-flex;min-width:0;font-family:var(--loro-font-brand)}.loro-badge{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:1.75rem;padding:.25rem .7rem;border:1px solid transparent;border-radius:var(--loro-radius-pill);font-size:.82rem;font-weight:800;line-height:1.1;white-space:nowrap}.loro-badge--success{border-color:#1f9d5533;background:#1f9d551f;color:#1f9d55}.loro-badge--error{border-color:#dc26262e;background:#dc26261a;color:#dc2626}.loro-badge--info{border-color:#6c3cff2e;background:#6c3cff1a;color:var(--loro-primary-700)}.loro-badge--warning{border-color:#f5a80038;background:#f5a8001f;color:#986c00}.loro-badge--neutral{border-color:var(--loro-border-soft);background:var(--loro-surface-muted);color:var(--loro-muted-strong)}\n"] }]
+            args: [{ selector: 'loro-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"loro-badge\" [class]=\"'loro-badge loro-badge--' + variant()\">{{ label() }}</span>", styles: [":host{display:inline-flex;min-width:0;font-family:var(--loro-font-brand)}.loro-badge{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:1.75rem;padding:.25rem .7rem;border:1px solid transparent;border-radius:var(--loro-radius-pill);font-size:.82rem;font-weight:800;line-height:1.1;white-space:nowrap}.loro-badge--success{border-color:#1f9d5533;background:#1f9d551f;color:#1f9d55}.loro-badge--error{border-color:#dc26262e;background:#dc26261a;color:#dc2626}.loro-badge--info{border-color:#6c3cff2e;background:#6c3cff1a;color:var(--loro-primary-700)}.loro-badge--warning{border-color:#f5a80038;background:#f5a8001f;color:#986c00}.loro-badge--neutral{border-color:var(--loro-border-soft);background:var(--loro-surface-muted);color:var(--loro-muted-strong)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 class LoroCard {
@@ -1700,165 +1605,11 @@ class LoroCard {
             : normalizedSize;
     }, ...(ngDevMode ? [{ debugName: "resolvedIconSize" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroCard, isStandalone: true, selector: "loro-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, mobileJustify: { classPropertyName: "mobileJustify", publicName: "mobileJustify", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, arrowSize: { classPropertyName: "arrowSize", publicName: "arrowSize", isSignal: true, isRequired: false, transformFunction: null }, heroGreeting: { classPropertyName: "heroGreeting", publicName: "heroGreeting", isSignal: true, isRequired: false, transformFunction: null }, heroSubtitle: { classPropertyName: "heroSubtitle", publicName: "heroSubtitle", isSignal: true, isRequired: false, transformFunction: null }, heroAvatarSrc: { classPropertyName: "heroAvatarSrc", publicName: "heroAvatarSrc", isSignal: true, isRequired: false, transformFunction: null }, heroAvatarAlt: { classPropertyName: "heroAvatarAlt", publicName: "heroAvatarAlt", isSignal: true, isRequired: false, transformFunction: null }, heroAvatarIcon: { classPropertyName: "heroAvatarIcon", publicName: "heroAvatarIcon", isSignal: true, isRequired: false, transformFunction: null }, heroAvatarIconSize: { classPropertyName: "heroAvatarIconSize", publicName: "heroAvatarIconSize", isSignal: true, isRequired: false, transformFunction: null }, heroVisualImage: { classPropertyName: "heroVisualImage", publicName: "heroVisualImage", isSignal: true, isRequired: false, transformFunction: null }, heroVisualAlt: { classPropertyName: "heroVisualAlt", publicName: "heroVisualAlt", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <a
-      class="loro-card"
-      [routerLink]="link() || null"
-      [class.loro-card--tinted]="variant() === 'tinted'"
-      [class.loro-card--danger]="variant() === 'danger'"
-      [class.loro-card--selectable]="variant() === 'selectable'"
-      [class.loro-card--benefit]="variant() === 'benefit'"
-      [class.loro-card--benefit-showcase]="variant() === 'benefit-showcase'"
-      [class.loro-card--home-hero]="variant() === 'home-hero'"
-      [class.loro-card--home-primary]="variant() === 'home-primary'"
-      [class.loro-card--home-secondary]="variant() === 'home-secondary'"
-      [class.loro-card--interactive]="!!link()"
-      [class.loro-card--justify-start]="justify() === 'start'"
-      [class.loro-card--justify-center]="justify() === 'center'"
-      [class.loro-card--justify-end]="justify() === 'end'"
-      [class.loro-card--mobile-justify-start]="mobileJustify() === 'start'"
-      [class.loro-card--mobile-justify-center]="mobileJustify() === 'center'"
-      [class.loro-card--mobile-justify-end]="mobileJustify() === 'end'"
-      [class.loro-card--selected]="selected()">
-      @if (variant() === 'home-hero') {
-        <div class="loro-card__hero-main">
-          <div class="loro-card__hero-avatar" aria-hidden="true">
-            @if (heroAvatarSrc()) {
-              <img [src]="heroAvatarSrc()!" [alt]="heroAvatarAlt()" />
-            } @else {
-              <loro-icon [name]="heroAvatarIcon()" [size]="heroAvatarIconSize()" [alt]="heroAvatarAlt()" />
-            }
-          </div>
-
-          <div class="loro-card__hero-copy">
-            @if (heroGreeting()) {
-              <p>{{ heroGreeting() }}</p>
-            }
-            @if (heroSubtitle()) {
-              <span>{{ heroSubtitle() }}</span>
-            }
-          </div>
-        </div>
-
-        @if (heroVisualImage()) {
-          <div class="loro-card__hero-visual" aria-hidden="true">
-            <loro-image [name]="heroVisualImage()!" [alt]="heroVisualAlt()" width="100%" />
-          </div>
-        }
-      }
-
-      @if ((title() || icon()) && variant() !== 'home-hero') {
-        <header class="loro-card__header">
-          @if (icon()) {
-            <span class="loro-card__icon">
-              <loro-icon
-                [name]="icon()!"
-                [size]="resolvedIconSize()"
-                [alt]="title() || icon()!"
-                [color]="iconColor()"
-                [decorative]="true"
-              />
-            </span>
-          }
-          <div class="loro-card__copy">
-            @if (title()) {
-              <h2 class="loro-card__title">{{ title() }}</h2>
-            }
-            @if (description()) {
-              <p class="loro-card__description">{{ description() }}</p>
-            }
-          </div>
-        </header>
-      }
-      <ng-content />
-      @if (showArrow()) {
-        <span class="loro-card__arrow" aria-hidden="true">
-          <loro-icon name="arrow-right" [size]="arrowSize()" alt="Ir" />
-        </span>
-      }
-    </a>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand);container-type:inline-size}.loro-card{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,1.75rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.loro-card--interactive{cursor:pointer}.loro-card--interactive:hover,.loro-card--interactive:focus-visible{transform:translateY(-1px);border-color:var(--loro-border-strong);outline:none}.loro-card--tinted{background:var(--loro-surface-tinted)}.loro-card--danger{border-color:#dc262638;background:#dc26260f}.loro-card--selectable{cursor:pointer}.loro-card--selected{border-color:var(--loro-primary-500);background:#6c3cff0d;box-shadow:0 0 0 1px #6c3cff33,var(--loro-shadow-soft)}.loro-card--benefit,.loro-card--benefit-showcase{gap:var(--loro-card-benefit-gap, .7rem);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transition:none}.loro-card__header{display:flex;align-items:center;gap:1rem;min-width:0}.loro-card__icon{display:grid;width:3.5rem;height:3.5rem;flex:0 0 auto;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface);margin-block-end:.5rem}.loro-card--benefit .loro-card__header,.loro-card--benefit-showcase .loro-card__header{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--loro-card-benefit-header-gap, .75rem);min-width:0}.loro-card--benefit .loro-card__icon,.loro-card--benefit-showcase .loro-card__icon{width:var(--loro-card-benefit-icon-width, var(--loro-card-benefit-icon-size, 2.25rem));height:var(--loro-card-benefit-icon-height, var(--loro-card-benefit-icon-size, 2.25rem));border-radius:999px;background:var(--loro-card-benefit-icon-bg, var(--loro-primary-500));color:#fff}.loro-card__copy{min-width:0}.loro-card__title,.loro-card__description{margin:0}.loro-card__title{color:var(--loro-text-strong);font-size:clamp(1.15rem,2vw,1.45rem);font-weight:900;line-height:1.15}.loro-card__description{margin-top:.35rem;color:var(--loro-muted);font-size:.95rem;line-height:1.45}.loro-card__arrow{display:none;align-items:center;justify-content:center;justify-self:end;width:2.2rem;height:2.2rem;border-radius:999px;line-height:0}.loro-card--benefit .loro-card__title,.loro-card--benefit-showcase .loro-card__title{color:var(--loro-text-strong);font-size:var(--loro-card-benefit-title-font-size, 1rem);font-weight:900;line-height:var(--loro-card-benefit-title-line-height, 1.15);overflow-wrap:anywhere}.loro-card--benefit .loro-card__description,.loro-card--benefit-showcase .loro-card__description{margin-top:.12rem;color:var(--loro-muted);font-size:var(--loro-card-benefit-description-font-size, .82rem);font-weight:var(--loro-card-benefit-description-font-weight, 750);line-height:var(--loro-card-benefit-description-line-height, 1.25);overflow-wrap:anywhere}.loro-card--benefit .loro-card__copy,.loro-card--benefit-showcase .loro-card__copy{min-width:0;width:100%;flex:1 1 auto}.loro-card--benefit-showcase{width:100%;min-width:0}.loro-card--benefit.loro-card--justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-start .loro-card__header{justify-content:flex-start;text-align:left}.loro-card--benefit.loro-card--justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-center .loro-card__header{justify-content:center;text-align:center}.loro-card--benefit.loro-card--justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-end .loro-card__header{justify-content:flex-end;text-align:right}.loro-card--home-primary,.loro-card--home-secondary{position:relative;display:flex;flex-direction:column;align-items:stretch;height:100%;gap:0;min-height:10.5rem;padding:1rem;overflow:hidden;isolation:isolate;border-color:var(--loro-home-card-border);border-radius:1.45rem;background:var(--loro-surface-soft);text-align:left}.loro-card--home-primary:before,.loro-card--home-primary:after,.loro-card--home-secondary:before,.loro-card--home-secondary:after{position:absolute;inset:0;content:\"\";pointer-events:none}.loro-card--home-primary>*,.loro-card--home-secondary>*{position:relative;z-index:1}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block;flex:1 1 auto;text-align:left}.loro-card--home-primary .loro-card__icon,.loro-card--home-secondary .loro-card__icon{position:relative;width:3rem;height:3rem;border:1px solid rgba(255,255,255,.2);border-radius:1.15rem;background:var(--loro-home-card-icon-bg);box-shadow:var(--loro-home-card-icon-shadow);color:var(--loro-home-card-icon-color)}.loro-card--home-primary .loro-card__copy,.loro-card--home-secondary .loro-card__copy{min-width:0;display:grid;grid-template-rows:auto auto;justify-items:start;gap:.4rem;min-height:0}.loro-card--home-primary .loro-card__title,.loro-card--home-secondary .loro-card__title{color:var(--loro-home-card-title);font-size:1.16rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;text-align:left}.loro-card--home-primary .loro-card__description,.loro-card--home-secondary .loro-card__description{max-width:none;min-height:0;margin-top:0;color:var(--loro-home-card-description);font-size:.9rem;line-height:1.45;text-align:left}.loro-card--home-primary .loro-card__arrow,.loro-card--home-secondary .loro-card__arrow{display:inline-flex;color:var(--loro-home-card-arrow-color);align-items:center;justify-content:center;align-self:flex-end;margin-top:auto}.loro-card--home-secondary .loro-card__title{font-size:1.08rem}.loro-card--home-secondary .loro-card__description{font-size:.85rem}.loro-card--home-primary:hover,.loro-card--home-primary:focus-visible,.loro-card--home-secondary:hover,.loro-card--home-secondary:focus-visible{transform:translateY(-.24rem) scale(1.01);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow)}.loro-card--home-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;min-height:6.25rem;overflow:hidden;border-color:var(--loro-home-hero-border);border-radius:1.1rem;background:var(--loro-home-hero-bg);padding:.875rem 1rem;color:var(--loro-home-hero-text)}.loro-card--home-hero .loro-card__header,.loro-card--home-hero .loro-card__copy,.loro-card--home-hero .loro-card__icon{display:none}.loro-card__hero-main{display:flex;align-items:center;gap:.75rem;min-width:0}.loro-card__hero-avatar{display:grid;width:3rem;height:3rem;flex:0 0 3rem;place-items:center;overflow:hidden;border-radius:.95rem;background:var(--loro-home-avatar-bg);color:var(--loro-home-avatar-color)}.loro-card__hero-avatar img{width:100%;height:100%;object-fit:cover}.loro-card__hero-copy{display:grid;gap:.18rem;min-width:0}.loro-card__hero-copy p,.loro-card__hero-copy span{margin:0}.loro-card__hero-copy p{font-size:1rem;font-weight:800;line-height:1.2}.loro-card__hero-copy span{color:var(--loro-home-hero-subtitle);font-size:.875rem;line-height:1.35}.loro-card__hero-visual{width:clamp(4.5rem,24vw,5.75rem);align-self:end}.loro-card--home-hero:hover,.loro-card--home-hero:focus-visible{transform:none;border-color:var(--loro-home-hero-border);box-shadow:var(--loro-shadow-soft)}@media(max-width:1023.88px){.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{text-align:left}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{text-align:center;justify-self:center;width:fit-content;max-width:100%;margin-inline:auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{text-align:right}.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{grid-template-columns:auto minmax(0,1fr)}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{grid-template-columns:auto auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{grid-template-columns:auto minmax(0,1fr)}}@container (min-width: 18rem){.loro-card--home-primary,.loro-card--home-secondary{min-height:9.75rem}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block}.loro-card--home-hero{min-height:7.25rem;padding:1rem 1.25rem}.loro-card__hero-visual{width:clamp(5.25rem,20vw,7rem)}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroCard, isStandalone: true, selector: "loro-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, mobileJustify: { classPropertyName: "mobileJustify", publicName: "mobileJustify", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, arrowSize: { classPropertyName: "arrowSize", publicName: "arrowSize", isSignal: true, isRequired: false, transformFunction: null }, heroGreeting: { classPropertyName: "heroGreeting", publicName: "heroGreeting", isSignal: true, isRequired: false, transformFunction: null }, heroSubtitle: { classPropertyName: "heroSubtitle", publicName: "heroSubtitle", isSignal: true, isRequired: false, transformFunction: null }, heroAvatarSrc: { classPropertyName: "heroAvatarSrc", publicName: "heroAvatarSrc", isSignal: true, isRequired: false, transformFunction: null }, heroAvatarAlt: { classPropertyName: "heroAvatarAlt", publicName: "heroAvatarAlt", isSignal: true, isRequired: false, transformFunction: null }, heroAvatarIcon: { classPropertyName: "heroAvatarIcon", publicName: "heroAvatarIcon", isSignal: true, isRequired: false, transformFunction: null }, heroAvatarIconSize: { classPropertyName: "heroAvatarIconSize", publicName: "heroAvatarIconSize", isSignal: true, isRequired: false, transformFunction: null }, heroVisualImage: { classPropertyName: "heroVisualImage", publicName: "heroVisualImage", isSignal: true, isRequired: false, transformFunction: null }, heroVisualAlt: { classPropertyName: "heroVisualAlt", publicName: "heroVisualAlt", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a\n      class=\"loro-card\"\n      [routerLink]=\"link() || null\"\n      [class.loro-card--tinted]=\"variant() === 'tinted'\"\n      [class.loro-card--danger]=\"variant() === 'danger'\"\n      [class.loro-card--selectable]=\"variant() === 'selectable'\"\n      [class.loro-card--benefit]=\"variant() === 'benefit'\"\n      [class.loro-card--benefit-showcase]=\"variant() === 'benefit-showcase'\"\n      [class.loro-card--home-hero]=\"variant() === 'home-hero'\"\n      [class.loro-card--home-primary]=\"variant() === 'home-primary'\"\n      [class.loro-card--home-secondary]=\"variant() === 'home-secondary'\"\n      [class.loro-card--interactive]=\"!!link()\"\n      [class.loro-card--justify-start]=\"justify() === 'start'\"\n      [class.loro-card--justify-center]=\"justify() === 'center'\"\n      [class.loro-card--justify-end]=\"justify() === 'end'\"\n      [class.loro-card--mobile-justify-start]=\"mobileJustify() === 'start'\"\n      [class.loro-card--mobile-justify-center]=\"mobileJustify() === 'center'\"\n      [class.loro-card--mobile-justify-end]=\"mobileJustify() === 'end'\"\n      [class.loro-card--selected]=\"selected()\">\n      @if (variant() === 'home-hero') {\n        <div class=\"loro-card__hero-main\">\n          <div class=\"loro-card__hero-avatar\" aria-hidden=\"true\">\n            @if (heroAvatarSrc()) {\n              <img [src]=\"heroAvatarSrc()!\" [alt]=\"heroAvatarAlt()\" />\n            } @else {\n              <loro-icon [name]=\"heroAvatarIcon()\" [size]=\"heroAvatarIconSize()\" [alt]=\"heroAvatarAlt()\" />\n            }\n          </div>\n\n          <div class=\"loro-card__hero-copy\">\n            @if (heroGreeting()) {\n              <p>{{ heroGreeting() }}</p>\n            }\n            @if (heroSubtitle()) {\n              <span>{{ heroSubtitle() }}</span>\n            }\n          </div>\n        </div>\n\n        @if (heroVisualImage()) {\n          <div class=\"loro-card__hero-visual\" aria-hidden=\"true\">\n            <loro-image [name]=\"heroVisualImage()!\" [alt]=\"heroVisualAlt()\" width=\"100%\" />\n          </div>\n        }\n      }\n\n      @if ((title() || icon()) && variant() !== 'home-hero') {\n        <header class=\"loro-card__header\">\n          @if (icon()) {\n            <span class=\"loro-card__icon\">\n              <loro-icon\n                [name]=\"icon()!\"\n                [size]=\"resolvedIconSize()\"\n                [alt]=\"title() || icon()!\"\n                [color]=\"iconColor()\"\n                [decorative]=\"true\"\n              />\n            </span>\n          }\n          <div class=\"loro-card__copy\">\n            @if (title()) {\n              <h2 class=\"loro-card__title\">{{ title() }}</h2>\n            }\n            @if (description()) {\n              <p class=\"loro-card__description\">{{ description() }}</p>\n            }\n          </div>\n        </header>\n      }\n      <ng-content />\n      @if (showArrow()) {\n        <span class=\"loro-card__arrow\" aria-hidden=\"true\">\n          <loro-icon name=\"arrow-right\" [size]=\"arrowSize()\" alt=\"Ir\" />\n        </span>\n      }\n    </a>", styles: [":host{display:block;font-family:var(--loro-font-brand);container-type:inline-size}.loro-card{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,1.75rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.loro-card--interactive{cursor:pointer}.loro-card--interactive:hover,.loro-card--interactive:focus-visible{transform:translateY(-1px);border-color:var(--loro-border-strong);outline:none}.loro-card--tinted{background:var(--loro-surface-tinted)}.loro-card--danger{border-color:#dc262638;background:#dc26260f}.loro-card--selectable{cursor:pointer}.loro-card--selected{border-color:var(--loro-primary-500);background:#6c3cff0d;box-shadow:0 0 0 1px #6c3cff33,var(--loro-shadow-soft)}.loro-card--benefit,.loro-card--benefit-showcase{gap:var(--loro-card-benefit-gap, .7rem);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transition:none}.loro-card__header{display:flex;align-items:center;gap:1rem;min-width:0}.loro-card__icon{display:grid;width:3.5rem;height:3.5rem;flex:0 0 auto;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface);margin-block-end:.5rem}.loro-card--benefit .loro-card__header,.loro-card--benefit-showcase .loro-card__header{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--loro-card-benefit-header-gap, .75rem);min-width:0}.loro-card--benefit .loro-card__icon,.loro-card--benefit-showcase .loro-card__icon{width:var(--loro-card-benefit-icon-width, var(--loro-card-benefit-icon-size, 2.25rem));height:var(--loro-card-benefit-icon-height, var(--loro-card-benefit-icon-size, 2.25rem));border-radius:999px;background:var(--loro-card-benefit-icon-bg, var(--loro-primary-500));color:#fff}.loro-card__copy{min-width:0}.loro-card__title,.loro-card__description{margin:0}.loro-card__title{color:var(--loro-text-strong);font-size:clamp(1.15rem,2vw,1.45rem);font-weight:900;line-height:1.15}.loro-card__description{margin-top:.35rem;color:var(--loro-muted);font-size:.95rem;line-height:1.45}.loro-card__arrow{display:none;align-items:center;justify-content:center;justify-self:end;width:2.2rem;height:2.2rem;border-radius:999px;line-height:0}.loro-card--benefit .loro-card__title,.loro-card--benefit-showcase .loro-card__title{color:var(--loro-text-strong);font-size:var(--loro-card-benefit-title-font-size, 1rem);font-weight:900;line-height:var(--loro-card-benefit-title-line-height, 1.15);overflow-wrap:anywhere}.loro-card--benefit .loro-card__description,.loro-card--benefit-showcase .loro-card__description{margin-top:.12rem;color:var(--loro-muted);font-size:var(--loro-card-benefit-description-font-size, .82rem);font-weight:var(--loro-card-benefit-description-font-weight, 750);line-height:var(--loro-card-benefit-description-line-height, 1.25);overflow-wrap:anywhere}.loro-card--benefit .loro-card__copy,.loro-card--benefit-showcase .loro-card__copy{min-width:0;width:100%;flex:1 1 auto}.loro-card--benefit-showcase{width:100%;min-width:0}.loro-card--benefit.loro-card--justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-start .loro-card__header{justify-content:flex-start;text-align:left}.loro-card--benefit.loro-card--justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-center .loro-card__header{justify-content:center;text-align:center}.loro-card--benefit.loro-card--justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-end .loro-card__header{justify-content:flex-end;text-align:right}.loro-card--home-primary,.loro-card--home-secondary{position:relative;display:flex;flex-direction:column;align-items:stretch;height:100%;gap:0;min-height:10.5rem;padding:1rem;overflow:hidden;isolation:isolate;border-color:var(--loro-home-card-border);border-radius:1.45rem;background:var(--loro-surface-soft);text-align:left}.loro-card--home-primary:before,.loro-card--home-primary:after,.loro-card--home-secondary:before,.loro-card--home-secondary:after{position:absolute;inset:0;content:\"\";pointer-events:none}.loro-card--home-primary>*,.loro-card--home-secondary>*{position:relative;z-index:1}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block;flex:1 1 auto;text-align:left}.loro-card--home-primary .loro-card__icon,.loro-card--home-secondary .loro-card__icon{position:relative;width:3rem;height:3rem;border:1px solid rgba(255,255,255,.2);border-radius:1.15rem;background:var(--loro-home-card-icon-bg);box-shadow:var(--loro-home-card-icon-shadow);color:var(--loro-home-card-icon-color)}.loro-card--home-primary .loro-card__copy,.loro-card--home-secondary .loro-card__copy{min-width:0;display:grid;grid-template-rows:auto auto;justify-items:start;gap:.4rem;min-height:0}.loro-card--home-primary .loro-card__title,.loro-card--home-secondary .loro-card__title{color:var(--loro-home-card-title);font-size:1.16rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;text-align:left}.loro-card--home-primary .loro-card__description,.loro-card--home-secondary .loro-card__description{max-width:none;min-height:0;margin-top:0;color:var(--loro-home-card-description);font-size:.9rem;line-height:1.45;text-align:left}.loro-card--home-primary .loro-card__arrow,.loro-card--home-secondary .loro-card__arrow{display:inline-flex;color:var(--loro-home-card-arrow-color);align-items:center;justify-content:center;align-self:flex-end;margin-top:auto}.loro-card--home-secondary .loro-card__title{font-size:1.08rem}.loro-card--home-secondary .loro-card__description{font-size:.85rem}.loro-card--home-primary:hover,.loro-card--home-primary:focus-visible,.loro-card--home-secondary:hover,.loro-card--home-secondary:focus-visible{transform:translateY(-.24rem) scale(1.01);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow)}.loro-card--home-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;min-height:6.25rem;overflow:hidden;border-color:var(--loro-home-hero-border);border-radius:1.1rem;background:var(--loro-home-hero-bg);padding:.875rem 1rem;color:var(--loro-home-hero-text)}.loro-card--home-hero .loro-card__header,.loro-card--home-hero .loro-card__copy,.loro-card--home-hero .loro-card__icon{display:none}.loro-card__hero-main{display:flex;align-items:center;gap:.75rem;min-width:0}.loro-card__hero-avatar{display:grid;width:3rem;height:3rem;flex:0 0 3rem;place-items:center;overflow:hidden;border-radius:.95rem;background:var(--loro-home-avatar-bg);color:var(--loro-home-avatar-color)}.loro-card__hero-avatar img{width:100%;height:100%;object-fit:cover}.loro-card__hero-copy{display:grid;gap:.18rem;min-width:0}.loro-card__hero-copy p,.loro-card__hero-copy span{margin:0}.loro-card__hero-copy p{font-size:1rem;font-weight:800;line-height:1.2}.loro-card__hero-copy span{color:var(--loro-home-hero-subtitle);font-size:.875rem;line-height:1.35}.loro-card__hero-visual{width:clamp(4.5rem,24vw,5.75rem);align-self:end}.loro-card--home-hero:hover,.loro-card--home-hero:focus-visible{transform:none;border-color:var(--loro-home-hero-border);box-shadow:var(--loro-shadow-soft)}@media(max-width:1023.88px){.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{text-align:left}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{text-align:center;justify-self:center;width:fit-content;max-width:100%;margin-inline:auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{text-align:right}.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{grid-template-columns:auto minmax(0,1fr)}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{grid-template-columns:auto auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{grid-template-columns:auto minmax(0,1fr)}}@container (min-width: 18rem){.loro-card--home-primary,.loro-card--home-secondary{min-height:9.75rem}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block}.loro-card--home-hero{min-height:7.25rem;padding:1rem 1.25rem}.loro-card__hero-visual{width:clamp(5.25rem,20vw,7rem)}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCard, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-card', standalone: true, imports: [RouterLink, LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <a
-      class="loro-card"
-      [routerLink]="link() || null"
-      [class.loro-card--tinted]="variant() === 'tinted'"
-      [class.loro-card--danger]="variant() === 'danger'"
-      [class.loro-card--selectable]="variant() === 'selectable'"
-      [class.loro-card--benefit]="variant() === 'benefit'"
-      [class.loro-card--benefit-showcase]="variant() === 'benefit-showcase'"
-      [class.loro-card--home-hero]="variant() === 'home-hero'"
-      [class.loro-card--home-primary]="variant() === 'home-primary'"
-      [class.loro-card--home-secondary]="variant() === 'home-secondary'"
-      [class.loro-card--interactive]="!!link()"
-      [class.loro-card--justify-start]="justify() === 'start'"
-      [class.loro-card--justify-center]="justify() === 'center'"
-      [class.loro-card--justify-end]="justify() === 'end'"
-      [class.loro-card--mobile-justify-start]="mobileJustify() === 'start'"
-      [class.loro-card--mobile-justify-center]="mobileJustify() === 'center'"
-      [class.loro-card--mobile-justify-end]="mobileJustify() === 'end'"
-      [class.loro-card--selected]="selected()">
-      @if (variant() === 'home-hero') {
-        <div class="loro-card__hero-main">
-          <div class="loro-card__hero-avatar" aria-hidden="true">
-            @if (heroAvatarSrc()) {
-              <img [src]="heroAvatarSrc()!" [alt]="heroAvatarAlt()" />
-            } @else {
-              <loro-icon [name]="heroAvatarIcon()" [size]="heroAvatarIconSize()" [alt]="heroAvatarAlt()" />
-            }
-          </div>
-
-          <div class="loro-card__hero-copy">
-            @if (heroGreeting()) {
-              <p>{{ heroGreeting() }}</p>
-            }
-            @if (heroSubtitle()) {
-              <span>{{ heroSubtitle() }}</span>
-            }
-          </div>
-        </div>
-
-        @if (heroVisualImage()) {
-          <div class="loro-card__hero-visual" aria-hidden="true">
-            <loro-image [name]="heroVisualImage()!" [alt]="heroVisualAlt()" width="100%" />
-          </div>
-        }
-      }
-
-      @if ((title() || icon()) && variant() !== 'home-hero') {
-        <header class="loro-card__header">
-          @if (icon()) {
-            <span class="loro-card__icon">
-              <loro-icon
-                [name]="icon()!"
-                [size]="resolvedIconSize()"
-                [alt]="title() || icon()!"
-                [color]="iconColor()"
-                [decorative]="true"
-              />
-            </span>
-          }
-          <div class="loro-card__copy">
-            @if (title()) {
-              <h2 class="loro-card__title">{{ title() }}</h2>
-            }
-            @if (description()) {
-              <p class="loro-card__description">{{ description() }}</p>
-            }
-          </div>
-        </header>
-      }
-      <ng-content />
-      @if (showArrow()) {
-        <span class="loro-card__arrow" aria-hidden="true">
-          <loro-icon name="arrow-right" [size]="arrowSize()" alt="Ir" />
-        </span>
-      }
-    </a>
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand);container-type:inline-size}.loro-card{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,1.75rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.loro-card--interactive{cursor:pointer}.loro-card--interactive:hover,.loro-card--interactive:focus-visible{transform:translateY(-1px);border-color:var(--loro-border-strong);outline:none}.loro-card--tinted{background:var(--loro-surface-tinted)}.loro-card--danger{border-color:#dc262638;background:#dc26260f}.loro-card--selectable{cursor:pointer}.loro-card--selected{border-color:var(--loro-primary-500);background:#6c3cff0d;box-shadow:0 0 0 1px #6c3cff33,var(--loro-shadow-soft)}.loro-card--benefit,.loro-card--benefit-showcase{gap:var(--loro-card-benefit-gap, .7rem);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transition:none}.loro-card__header{display:flex;align-items:center;gap:1rem;min-width:0}.loro-card__icon{display:grid;width:3.5rem;height:3.5rem;flex:0 0 auto;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface);margin-block-end:.5rem}.loro-card--benefit .loro-card__header,.loro-card--benefit-showcase .loro-card__header{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--loro-card-benefit-header-gap, .75rem);min-width:0}.loro-card--benefit .loro-card__icon,.loro-card--benefit-showcase .loro-card__icon{width:var(--loro-card-benefit-icon-width, var(--loro-card-benefit-icon-size, 2.25rem));height:var(--loro-card-benefit-icon-height, var(--loro-card-benefit-icon-size, 2.25rem));border-radius:999px;background:var(--loro-card-benefit-icon-bg, var(--loro-primary-500));color:#fff}.loro-card__copy{min-width:0}.loro-card__title,.loro-card__description{margin:0}.loro-card__title{color:var(--loro-text-strong);font-size:clamp(1.15rem,2vw,1.45rem);font-weight:900;line-height:1.15}.loro-card__description{margin-top:.35rem;color:var(--loro-muted);font-size:.95rem;line-height:1.45}.loro-card__arrow{display:none;align-items:center;justify-content:center;justify-self:end;width:2.2rem;height:2.2rem;border-radius:999px;line-height:0}.loro-card--benefit .loro-card__title,.loro-card--benefit-showcase .loro-card__title{color:var(--loro-text-strong);font-size:var(--loro-card-benefit-title-font-size, 1rem);font-weight:900;line-height:var(--loro-card-benefit-title-line-height, 1.15);overflow-wrap:anywhere}.loro-card--benefit .loro-card__description,.loro-card--benefit-showcase .loro-card__description{margin-top:.12rem;color:var(--loro-muted);font-size:var(--loro-card-benefit-description-font-size, .82rem);font-weight:var(--loro-card-benefit-description-font-weight, 750);line-height:var(--loro-card-benefit-description-line-height, 1.25);overflow-wrap:anywhere}.loro-card--benefit .loro-card__copy,.loro-card--benefit-showcase .loro-card__copy{min-width:0;width:100%;flex:1 1 auto}.loro-card--benefit-showcase{width:100%;min-width:0}.loro-card--benefit.loro-card--justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-start .loro-card__header{justify-content:flex-start;text-align:left}.loro-card--benefit.loro-card--justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-center .loro-card__header{justify-content:center;text-align:center}.loro-card--benefit.loro-card--justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-end .loro-card__header{justify-content:flex-end;text-align:right}.loro-card--home-primary,.loro-card--home-secondary{position:relative;display:flex;flex-direction:column;align-items:stretch;height:100%;gap:0;min-height:10.5rem;padding:1rem;overflow:hidden;isolation:isolate;border-color:var(--loro-home-card-border);border-radius:1.45rem;background:var(--loro-surface-soft);text-align:left}.loro-card--home-primary:before,.loro-card--home-primary:after,.loro-card--home-secondary:before,.loro-card--home-secondary:after{position:absolute;inset:0;content:\"\";pointer-events:none}.loro-card--home-primary>*,.loro-card--home-secondary>*{position:relative;z-index:1}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block;flex:1 1 auto;text-align:left}.loro-card--home-primary .loro-card__icon,.loro-card--home-secondary .loro-card__icon{position:relative;width:3rem;height:3rem;border:1px solid rgba(255,255,255,.2);border-radius:1.15rem;background:var(--loro-home-card-icon-bg);box-shadow:var(--loro-home-card-icon-shadow);color:var(--loro-home-card-icon-color)}.loro-card--home-primary .loro-card__copy,.loro-card--home-secondary .loro-card__copy{min-width:0;display:grid;grid-template-rows:auto auto;justify-items:start;gap:.4rem;min-height:0}.loro-card--home-primary .loro-card__title,.loro-card--home-secondary .loro-card__title{color:var(--loro-home-card-title);font-size:1.16rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;text-align:left}.loro-card--home-primary .loro-card__description,.loro-card--home-secondary .loro-card__description{max-width:none;min-height:0;margin-top:0;color:var(--loro-home-card-description);font-size:.9rem;line-height:1.45;text-align:left}.loro-card--home-primary .loro-card__arrow,.loro-card--home-secondary .loro-card__arrow{display:inline-flex;color:var(--loro-home-card-arrow-color);align-items:center;justify-content:center;align-self:flex-end;margin-top:auto}.loro-card--home-secondary .loro-card__title{font-size:1.08rem}.loro-card--home-secondary .loro-card__description{font-size:.85rem}.loro-card--home-primary:hover,.loro-card--home-primary:focus-visible,.loro-card--home-secondary:hover,.loro-card--home-secondary:focus-visible{transform:translateY(-.24rem) scale(1.01);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow)}.loro-card--home-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;min-height:6.25rem;overflow:hidden;border-color:var(--loro-home-hero-border);border-radius:1.1rem;background:var(--loro-home-hero-bg);padding:.875rem 1rem;color:var(--loro-home-hero-text)}.loro-card--home-hero .loro-card__header,.loro-card--home-hero .loro-card__copy,.loro-card--home-hero .loro-card__icon{display:none}.loro-card__hero-main{display:flex;align-items:center;gap:.75rem;min-width:0}.loro-card__hero-avatar{display:grid;width:3rem;height:3rem;flex:0 0 3rem;place-items:center;overflow:hidden;border-radius:.95rem;background:var(--loro-home-avatar-bg);color:var(--loro-home-avatar-color)}.loro-card__hero-avatar img{width:100%;height:100%;object-fit:cover}.loro-card__hero-copy{display:grid;gap:.18rem;min-width:0}.loro-card__hero-copy p,.loro-card__hero-copy span{margin:0}.loro-card__hero-copy p{font-size:1rem;font-weight:800;line-height:1.2}.loro-card__hero-copy span{color:var(--loro-home-hero-subtitle);font-size:.875rem;line-height:1.35}.loro-card__hero-visual{width:clamp(4.5rem,24vw,5.75rem);align-self:end}.loro-card--home-hero:hover,.loro-card--home-hero:focus-visible{transform:none;border-color:var(--loro-home-hero-border);box-shadow:var(--loro-shadow-soft)}@media(max-width:1023.88px){.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{text-align:left}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{text-align:center;justify-self:center;width:fit-content;max-width:100%;margin-inline:auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{text-align:right}.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{grid-template-columns:auto minmax(0,1fr)}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{grid-template-columns:auto auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{grid-template-columns:auto minmax(0,1fr)}}@container (min-width: 18rem){.loro-card--home-primary,.loro-card--home-secondary{min-height:9.75rem}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block}.loro-card--home-hero{min-height:7.25rem;padding:1rem 1.25rem}.loro-card__hero-visual{width:clamp(5.25rem,20vw,7rem)}}\n"] }]
+            args: [{ selector: 'loro-card', standalone: true, imports: [RouterLink, LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n      class=\"loro-card\"\n      [routerLink]=\"link() || null\"\n      [class.loro-card--tinted]=\"variant() === 'tinted'\"\n      [class.loro-card--danger]=\"variant() === 'danger'\"\n      [class.loro-card--selectable]=\"variant() === 'selectable'\"\n      [class.loro-card--benefit]=\"variant() === 'benefit'\"\n      [class.loro-card--benefit-showcase]=\"variant() === 'benefit-showcase'\"\n      [class.loro-card--home-hero]=\"variant() === 'home-hero'\"\n      [class.loro-card--home-primary]=\"variant() === 'home-primary'\"\n      [class.loro-card--home-secondary]=\"variant() === 'home-secondary'\"\n      [class.loro-card--interactive]=\"!!link()\"\n      [class.loro-card--justify-start]=\"justify() === 'start'\"\n      [class.loro-card--justify-center]=\"justify() === 'center'\"\n      [class.loro-card--justify-end]=\"justify() === 'end'\"\n      [class.loro-card--mobile-justify-start]=\"mobileJustify() === 'start'\"\n      [class.loro-card--mobile-justify-center]=\"mobileJustify() === 'center'\"\n      [class.loro-card--mobile-justify-end]=\"mobileJustify() === 'end'\"\n      [class.loro-card--selected]=\"selected()\">\n      @if (variant() === 'home-hero') {\n        <div class=\"loro-card__hero-main\">\n          <div class=\"loro-card__hero-avatar\" aria-hidden=\"true\">\n            @if (heroAvatarSrc()) {\n              <img [src]=\"heroAvatarSrc()!\" [alt]=\"heroAvatarAlt()\" />\n            } @else {\n              <loro-icon [name]=\"heroAvatarIcon()\" [size]=\"heroAvatarIconSize()\" [alt]=\"heroAvatarAlt()\" />\n            }\n          </div>\n\n          <div class=\"loro-card__hero-copy\">\n            @if (heroGreeting()) {\n              <p>{{ heroGreeting() }}</p>\n            }\n            @if (heroSubtitle()) {\n              <span>{{ heroSubtitle() }}</span>\n            }\n          </div>\n        </div>\n\n        @if (heroVisualImage()) {\n          <div class=\"loro-card__hero-visual\" aria-hidden=\"true\">\n            <loro-image [name]=\"heroVisualImage()!\" [alt]=\"heroVisualAlt()\" width=\"100%\" />\n          </div>\n        }\n      }\n\n      @if ((title() || icon()) && variant() !== 'home-hero') {\n        <header class=\"loro-card__header\">\n          @if (icon()) {\n            <span class=\"loro-card__icon\">\n              <loro-icon\n                [name]=\"icon()!\"\n                [size]=\"resolvedIconSize()\"\n                [alt]=\"title() || icon()!\"\n                [color]=\"iconColor()\"\n                [decorative]=\"true\"\n              />\n            </span>\n          }\n          <div class=\"loro-card__copy\">\n            @if (title()) {\n              <h2 class=\"loro-card__title\">{{ title() }}</h2>\n            }\n            @if (description()) {\n              <p class=\"loro-card__description\">{{ description() }}</p>\n            }\n          </div>\n        </header>\n      }\n      <ng-content />\n      @if (showArrow()) {\n        <span class=\"loro-card__arrow\" aria-hidden=\"true\">\n          <loro-icon name=\"arrow-right\" [size]=\"arrowSize()\" alt=\"Ir\" />\n        </span>\n      }\n    </a>", styles: [":host{display:block;font-family:var(--loro-font-brand);container-type:inline-size}.loro-card{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,1.75rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.loro-card--interactive{cursor:pointer}.loro-card--interactive:hover,.loro-card--interactive:focus-visible{transform:translateY(-1px);border-color:var(--loro-border-strong);outline:none}.loro-card--tinted{background:var(--loro-surface-tinted)}.loro-card--danger{border-color:#dc262638;background:#dc26260f}.loro-card--selectable{cursor:pointer}.loro-card--selected{border-color:var(--loro-primary-500);background:#6c3cff0d;box-shadow:0 0 0 1px #6c3cff33,var(--loro-shadow-soft)}.loro-card--benefit,.loro-card--benefit-showcase{gap:var(--loro-card-benefit-gap, .7rem);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transition:none}.loro-card__header{display:flex;align-items:center;gap:1rem;min-width:0}.loro-card__icon{display:grid;width:3.5rem;height:3.5rem;flex:0 0 auto;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface);margin-block-end:.5rem}.loro-card--benefit .loro-card__header,.loro-card--benefit-showcase .loro-card__header{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--loro-card-benefit-header-gap, .75rem);min-width:0}.loro-card--benefit .loro-card__icon,.loro-card--benefit-showcase .loro-card__icon{width:var(--loro-card-benefit-icon-width, var(--loro-card-benefit-icon-size, 2.25rem));height:var(--loro-card-benefit-icon-height, var(--loro-card-benefit-icon-size, 2.25rem));border-radius:999px;background:var(--loro-card-benefit-icon-bg, var(--loro-primary-500));color:#fff}.loro-card__copy{min-width:0}.loro-card__title,.loro-card__description{margin:0}.loro-card__title{color:var(--loro-text-strong);font-size:clamp(1.15rem,2vw,1.45rem);font-weight:900;line-height:1.15}.loro-card__description{margin-top:.35rem;color:var(--loro-muted);font-size:.95rem;line-height:1.45}.loro-card__arrow{display:none;align-items:center;justify-content:center;justify-self:end;width:2.2rem;height:2.2rem;border-radius:999px;line-height:0}.loro-card--benefit .loro-card__title,.loro-card--benefit-showcase .loro-card__title{color:var(--loro-text-strong);font-size:var(--loro-card-benefit-title-font-size, 1rem);font-weight:900;line-height:var(--loro-card-benefit-title-line-height, 1.15);overflow-wrap:anywhere}.loro-card--benefit .loro-card__description,.loro-card--benefit-showcase .loro-card__description{margin-top:.12rem;color:var(--loro-muted);font-size:var(--loro-card-benefit-description-font-size, .82rem);font-weight:var(--loro-card-benefit-description-font-weight, 750);line-height:var(--loro-card-benefit-description-line-height, 1.25);overflow-wrap:anywhere}.loro-card--benefit .loro-card__copy,.loro-card--benefit-showcase .loro-card__copy{min-width:0;width:100%;flex:1 1 auto}.loro-card--benefit-showcase{width:100%;min-width:0}.loro-card--benefit.loro-card--justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-start .loro-card__header{justify-content:flex-start;text-align:left}.loro-card--benefit.loro-card--justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-center .loro-card__header{justify-content:center;text-align:center}.loro-card--benefit.loro-card--justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--justify-end .loro-card__header{justify-content:flex-end;text-align:right}.loro-card--home-primary,.loro-card--home-secondary{position:relative;display:flex;flex-direction:column;align-items:stretch;height:100%;gap:0;min-height:10.5rem;padding:1rem;overflow:hidden;isolation:isolate;border-color:var(--loro-home-card-border);border-radius:1.45rem;background:var(--loro-surface-soft);text-align:left}.loro-card--home-primary:before,.loro-card--home-primary:after,.loro-card--home-secondary:before,.loro-card--home-secondary:after{position:absolute;inset:0;content:\"\";pointer-events:none}.loro-card--home-primary>*,.loro-card--home-secondary>*{position:relative;z-index:1}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block;flex:1 1 auto;text-align:left}.loro-card--home-primary .loro-card__icon,.loro-card--home-secondary .loro-card__icon{position:relative;width:3rem;height:3rem;border:1px solid rgba(255,255,255,.2);border-radius:1.15rem;background:var(--loro-home-card-icon-bg);box-shadow:var(--loro-home-card-icon-shadow);color:var(--loro-home-card-icon-color)}.loro-card--home-primary .loro-card__copy,.loro-card--home-secondary .loro-card__copy{min-width:0;display:grid;grid-template-rows:auto auto;justify-items:start;gap:.4rem;min-height:0}.loro-card--home-primary .loro-card__title,.loro-card--home-secondary .loro-card__title{color:var(--loro-home-card-title);font-size:1.16rem;font-weight:800;line-height:1.15;letter-spacing:-.02em;text-align:left}.loro-card--home-primary .loro-card__description,.loro-card--home-secondary .loro-card__description{max-width:none;min-height:0;margin-top:0;color:var(--loro-home-card-description);font-size:.9rem;line-height:1.45;text-align:left}.loro-card--home-primary .loro-card__arrow,.loro-card--home-secondary .loro-card__arrow{display:inline-flex;color:var(--loro-home-card-arrow-color);align-items:center;justify-content:center;align-self:flex-end;margin-top:auto}.loro-card--home-secondary .loro-card__title{font-size:1.08rem}.loro-card--home-secondary .loro-card__description{font-size:.85rem}.loro-card--home-primary:hover,.loro-card--home-primary:focus-visible,.loro-card--home-secondary:hover,.loro-card--home-secondary:focus-visible{transform:translateY(-.24rem) scale(1.01);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow)}.loro-card--home-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;min-height:6.25rem;overflow:hidden;border-color:var(--loro-home-hero-border);border-radius:1.1rem;background:var(--loro-home-hero-bg);padding:.875rem 1rem;color:var(--loro-home-hero-text)}.loro-card--home-hero .loro-card__header,.loro-card--home-hero .loro-card__copy,.loro-card--home-hero .loro-card__icon{display:none}.loro-card__hero-main{display:flex;align-items:center;gap:.75rem;min-width:0}.loro-card__hero-avatar{display:grid;width:3rem;height:3rem;flex:0 0 3rem;place-items:center;overflow:hidden;border-radius:.95rem;background:var(--loro-home-avatar-bg);color:var(--loro-home-avatar-color)}.loro-card__hero-avatar img{width:100%;height:100%;object-fit:cover}.loro-card__hero-copy{display:grid;gap:.18rem;min-width:0}.loro-card__hero-copy p,.loro-card__hero-copy span{margin:0}.loro-card__hero-copy p{font-size:1rem;font-weight:800;line-height:1.2}.loro-card__hero-copy span{color:var(--loro-home-hero-subtitle);font-size:.875rem;line-height:1.35}.loro-card__hero-visual{width:clamp(4.5rem,24vw,5.75rem);align-self:end}.loro-card--home-hero:hover,.loro-card--home-hero:focus-visible{transform:none;border-color:var(--loro-home-hero-border);box-shadow:var(--loro-shadow-soft)}@media(max-width:1023.88px){.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{text-align:left}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{text-align:center;justify-self:center;width:fit-content;max-width:100%;margin-inline:auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{text-align:right}.loro-card--benefit.loro-card--mobile-justify-start .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-start .loro-card__header{grid-template-columns:auto minmax(0,1fr)}.loro-card--benefit.loro-card--mobile-justify-center .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-center .loro-card__header{grid-template-columns:auto auto}.loro-card--benefit.loro-card--mobile-justify-end .loro-card__header,.loro-card--benefit-showcase.loro-card--mobile-justify-end .loro-card__header{grid-template-columns:auto minmax(0,1fr)}}@container (min-width: 18rem){.loro-card--home-primary,.loro-card--home-secondary{min-height:9.75rem}.loro-card--home-primary .loro-card__header,.loro-card--home-secondary .loro-card__header{display:block}.loro-card--home-hero{min-height:7.25rem;padding:1rem 1.25rem}.loro-card__hero-visual{width:clamp(5.25rem,20vw,7rem)}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], mobileJustify: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileJustify", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], arrowSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowSize", required: false }] }], heroGreeting: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroGreeting", required: false }] }], heroSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroSubtitle", required: false }] }], heroAvatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroAvatarSrc", required: false }] }], heroAvatarAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroAvatarAlt", required: false }] }], heroAvatarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroAvatarIcon", required: false }] }], heroAvatarIconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroAvatarIconSize", required: false }] }], heroVisualImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroVisualImage", required: false }] }], heroVisualAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "heroVisualAlt", required: false }] }] } });
 
 class LoroRadio {
@@ -1869,53 +1620,11 @@ class LoroRadio {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     selected = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroRadio, isStandalone: true, selector: "loro-radio", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: `
-    <button
-      type="button"
-      class="loro-radio"
-      [class.loro-radio--row]="variant() === 'row'"
-      [class.loro-radio--checked]="checked()"
-      [attr.aria-pressed]="checked()"
-      (click)="selected.emit(value())">
-      @if (variant() !== 'row') {
-        <span class="loro-radio__mark"></span>
-      }
-      <span class="loro-radio__copy">
-        <span class="loro-radio__label">{{ label() }}</span>
-        @if (description()) {
-          <span class="loro-radio__description">{{ description() }}</span>
-        }
-      </span>
-      @if (variant() === 'row') {
-        <span class="loro-radio__mark"></span>
-      }
-    </button>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-radio{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;width:100%;min-height:3rem;border:0;background:transparent;color:var(--loro-text-strong);font:inherit;text-align:left;cursor:pointer}.loro-radio--row{grid-template-columns:minmax(0,1fr) auto;min-height:4.35rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);background:var(--loro-surface)}.loro-radio__mark{position:relative;width:1.35rem;height:1.35rem;border:2px solid var(--loro-muted);border-radius:50%}.loro-radio__mark:after{position:absolute;inset:.24rem;border-radius:50%;background:var(--loro-primary-500);opacity:0;content:\"\"}.loro-radio--checked .loro-radio__mark{border-color:var(--loro-primary-500)}.loro-radio--checked .loro-radio__mark:after{opacity:1}.loro-radio__copy{display:grid;gap:.18rem;min-width:0}.loro-radio__label{font-size:1rem;font-weight:900;line-height:1.2}.loro-radio__description{color:var(--loro-muted);font-size:.88rem;font-weight:600;line-height:1.35}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroRadio, isStandalone: true, selector: "loro-radio", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<button\n      type=\"button\"\n      class=\"loro-radio\"\n      [class.loro-radio--row]=\"variant() === 'row'\"\n      [class.loro-radio--checked]=\"checked()\"\n      [attr.aria-pressed]=\"checked()\"\n      (click)=\"selected.emit(value())\">\n      @if (variant() !== 'row') {\n        <span class=\"loro-radio__mark\"></span>\n      }\n      <span class=\"loro-radio__copy\">\n        <span class=\"loro-radio__label\">{{ label() }}</span>\n        @if (description()) {\n          <span class=\"loro-radio__description\">{{ description() }}</span>\n        }\n      </span>\n      @if (variant() === 'row') {\n        <span class=\"loro-radio__mark\"></span>\n      }\n    </button>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-radio{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;width:100%;min-height:3rem;border:0;background:transparent;color:var(--loro-text-strong);font:inherit;text-align:left;cursor:pointer}.loro-radio--row{grid-template-columns:minmax(0,1fr) auto;min-height:4.35rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);background:var(--loro-surface)}.loro-radio__mark{position:relative;width:1.35rem;height:1.35rem;border:2px solid var(--loro-muted);border-radius:50%}.loro-radio__mark:after{position:absolute;inset:.24rem;border-radius:50%;background:var(--loro-primary-500);opacity:0;content:\"\"}.loro-radio--checked .loro-radio__mark{border-color:var(--loro-primary-500)}.loro-radio--checked .loro-radio__mark:after{opacity:1}.loro-radio__copy{display:grid;gap:.18rem;min-width:0}.loro-radio__label{font-size:1rem;font-weight:900;line-height:1.2}.loro-radio__description{color:var(--loro-muted);font-size:.88rem;font-weight:600;line-height:1.35}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroRadio, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-radio', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <button
-      type="button"
-      class="loro-radio"
-      [class.loro-radio--row]="variant() === 'row'"
-      [class.loro-radio--checked]="checked()"
-      [attr.aria-pressed]="checked()"
-      (click)="selected.emit(value())">
-      @if (variant() !== 'row') {
-        <span class="loro-radio__mark"></span>
-      }
-      <span class="loro-radio__copy">
-        <span class="loro-radio__label">{{ label() }}</span>
-        @if (description()) {
-          <span class="loro-radio__description">{{ description() }}</span>
-        }
-      </span>
-      @if (variant() === 'row') {
-        <span class="loro-radio__mark"></span>
-      }
-    </button>
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-radio{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;width:100%;min-height:3rem;border:0;background:transparent;color:var(--loro-text-strong);font:inherit;text-align:left;cursor:pointer}.loro-radio--row{grid-template-columns:minmax(0,1fr) auto;min-height:4.35rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);background:var(--loro-surface)}.loro-radio__mark{position:relative;width:1.35rem;height:1.35rem;border:2px solid var(--loro-muted);border-radius:50%}.loro-radio__mark:after{position:absolute;inset:.24rem;border-radius:50%;background:var(--loro-primary-500);opacity:0;content:\"\"}.loro-radio--checked .loro-radio__mark{border-color:var(--loro-primary-500)}.loro-radio--checked .loro-radio__mark:after{opacity:1}.loro-radio__copy{display:grid;gap:.18rem;min-width:0}.loro-radio__label{font-size:1rem;font-weight:900;line-height:1.2}.loro-radio__description{color:var(--loro-muted);font-size:.88rem;font-weight:600;line-height:1.35}\n"] }]
+            args: [{ selector: 'loro-radio', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n      type=\"button\"\n      class=\"loro-radio\"\n      [class.loro-radio--row]=\"variant() === 'row'\"\n      [class.loro-radio--checked]=\"checked()\"\n      [attr.aria-pressed]=\"checked()\"\n      (click)=\"selected.emit(value())\">\n      @if (variant() !== 'row') {\n        <span class=\"loro-radio__mark\"></span>\n      }\n      <span class=\"loro-radio__copy\">\n        <span class=\"loro-radio__label\">{{ label() }}</span>\n        @if (description()) {\n          <span class=\"loro-radio__description\">{{ description() }}</span>\n        }\n      </span>\n      @if (variant() === 'row') {\n        <span class=\"loro-radio__mark\"></span>\n      }\n    </button>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-radio{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;width:100%;min-height:3rem;border:0;background:transparent;color:var(--loro-text-strong);font:inherit;text-align:left;cursor:pointer}.loro-radio--row{grid-template-columns:minmax(0,1fr) auto;min-height:4.35rem;padding:0 1rem;border:1px solid var(--loro-border-subtle);background:var(--loro-surface)}.loro-radio__mark{position:relative;width:1.35rem;height:1.35rem;border:2px solid var(--loro-muted);border-radius:50%}.loro-radio__mark:after{position:absolute;inset:.24rem;border-radius:50%;background:var(--loro-primary-500);opacity:0;content:\"\"}.loro-radio--checked .loro-radio__mark{border-color:var(--loro-primary-500)}.loro-radio--checked .loro-radio__mark:after{opacity:1}.loro-radio__copy{display:grid;gap:.18rem;min-width:0}.loro-radio__label{font-size:1rem;font-weight:900;line-height:1.2}.loro-radio__description{color:var(--loro-muted);font-size:.88rem;font-weight:600;line-height:1.35}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 class LoroToggle {
@@ -1937,33 +1646,11 @@ class LoroToggle {
         this.checkedChange.emit(nextChecked);
     }
     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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange", checkedChange: "checkedChange" }, ngImport: i0, template: `
-    <button
-      type="button"
-      class="loro-toggle"
-      [class.loro-toggle--checked]="checked()"
-      [disabled]="disabled()"
-      [attr.aria-label]="ariaLabel()"
-      [attr.aria-pressed]="checked()"
-      (click)="toggle()">
-      <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 });
+    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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange", checkedChange: "checkedChange" }, ngImport: i0, template: "<button\n      type=\"button\"\n      class=\"loro-toggle\"\n      [class.loro-toggle--checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-pressed]=\"checked()\"\n      (click)=\"toggle()\">\n      <span class=\"loro-toggle__thumb\"></span>\n    </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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroToggle, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <button
-      type="button"
-      class="loro-toggle"
-      [class.loro-toggle--checked]="checked()"
-      [disabled]="disabled()"
-      [attr.aria-label]="ariaLabel()"
-      [attr.aria-pressed]="checked()"
-      (click)="toggle()">
-      <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"] }]
+            args: [{ selector: 'loro-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n      type=\"button\"\n      class=\"loro-toggle\"\n      [class.loro-toggle--checked]=\"checked()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-pressed]=\"checked()\"\n      (click)=\"toggle()\">\n      <span class=\"loro-toggle__thumb\"></span>\n    </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 }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", 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 }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }] } });
 
 class LoroCardNav {
@@ -2000,111 +1687,11 @@ class LoroCardNav {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCardNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroCardNav, isStandalone: true, selector: "loro-card-nav", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, trailing: { classPropertyName: "trailing", publicName: "trailing", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", checkedChange: "checkedChange", selectedChange: "selectedChange" }, ngImport: i0, template: `
-    <button
-      type="button"
-      class="loro-card-nav"
-      [class.loro-card-nav--danger]="variant() === 'danger'"
-      [class.loro-card-nav--soft]="variant() === 'soft'"
-      [class.loro-card-nav--selected]="selected()"
-      (click)="activate()">
-      @if (icon()) {
-        <span class="loro-card-nav__icon">
-          <loro-icon
-            [name]="icon()!"
-            [size]="iconSize()"
-            [alt]="title()"
-            [color]="variant() === 'danger' ? 'danger' : iconColor()" />
-        </span>
-      }
-
-      <span class="loro-card-nav__copy">
-        <span class="loro-card-nav__title">{{ title() }}</span>
-        @if (description()) {
-          <span class="loro-card-nav__description">{{ description() }}</span>
-        }
-      </span>
-
-      <span class="loro-card-nav__trailing" (click)="$event.stopPropagation()">
-        @switch (trailing()) {
-          @case ('toggle') {
-            <loro-toggle [checked]="checked()" [ariaLabel]="title()" (checkedChange)="checkedChange.emit($event)" />
-          }
-          @case ('radio') {
-            <loro-radio [label]="''" [value]="value()" [checked]="selected()" (selected)="selectedChange.emit($event)" />
-          }
-          @case ('text') {
-            <span class="loro-card-nav__value">{{ value() }}</span>
-          }
-          @case ('badge') {
-            <loro-badge [label]="badgeLabel() || value()" [variant]="badgeVariant()" />
-          }
-          @case ('arrow') {
-            <loro-icon
-              class="loro-card-nav__arrow"
-              name="chevron-right"
-              [size]="22"
-              alt="Abrir"
-              [color]="variant() === 'danger' ? 'danger' : 'primary'" />
-          }
-        }
-      </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, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroRadio, selector: "loro-radio", inputs: ["label", "value", "description", "checked", "variant"], outputs: ["selected"] }, { kind: "component", type: LoroToggle, selector: "loro-toggle", inputs: ["checked", "disabled", "required", "invalid", "errors", "touched", "ariaLabel"], outputs: ["checkedChange", "touchedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroCardNav, isStandalone: true, selector: "loro-card-nav", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, trailing: { classPropertyName: "trailing", publicName: "trailing", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, badgeLabel: { classPropertyName: "badgeLabel", publicName: "badgeLabel", isSignal: true, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", checkedChange: "checkedChange", selectedChange: "selectedChange" }, ngImport: i0, template: "<button\n      type=\"button\"\n      class=\"loro-card-nav\"\n      [class.loro-card-nav--danger]=\"variant() === 'danger'\"\n      [class.loro-card-nav--soft]=\"variant() === 'soft'\"\n      [class.loro-card-nav--selected]=\"selected()\"\n      (click)=\"activate()\">\n      @if (icon()) {\n        <span class=\"loro-card-nav__icon\">\n          <loro-icon\n            [name]=\"icon()!\"\n            [size]=\"iconSize()\"\n            [alt]=\"title()\"\n            [color]=\"variant() === 'danger' ? 'danger' : iconColor()\" />\n        </span>\n      }\n\n      <span class=\"loro-card-nav__copy\">\n        <span class=\"loro-card-nav__title\">{{ title() }}</span>\n        @if (description()) {\n          <span class=\"loro-card-nav__description\">{{ description() }}</span>\n        }\n      </span>\n\n      <span class=\"loro-card-nav__trailing\" (click)=\"$event.stopPropagation()\">\n        @switch (trailing()) {\n          @case ('toggle') {\n            <loro-toggle [checked]=\"checked()\" [ariaLabel]=\"title()\" (checkedChange)=\"checkedChange.emit($event)\" />\n          }\n          @case ('radio') {\n            <loro-radio [label]=\"''\" [value]=\"value()\" [checked]=\"selected()\" (selected)=\"selectedChange.emit($event)\" />\n          }\n          @case ('text') {\n            <span class=\"loro-card-nav__value\">{{ value() }}</span>\n          }\n          @case ('badge') {\n            <loro-badge [label]=\"badgeLabel() || value()\" [variant]=\"badgeVariant()\" />\n          }\n          @case ('arrow') {\n            <loro-icon\n              class=\"loro-card-nav__arrow\"\n              name=\"chevron-right\"\n              [size]=\"22\"\n              alt=\"Abrir\"\n              [color]=\"variant() === 'danger' ? 'danger' : 'primary'\" />\n          }\n        }\n      </span>\n    </button>", 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, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroRadio, selector: "loro-radio", inputs: ["label", "value", "description", "checked", "variant"], outputs: ["selected"] }, { kind: "component", type: LoroToggle, selector: "loro-toggle", inputs: ["checked", "disabled", "required", "invalid", "errors", "touched", "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,
-            args: [{ selector: 'loro-card-nav', standalone: true, imports: [LoroBadge, LoroIcon, LoroRadio, LoroToggle], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <button
-      type="button"
-      class="loro-card-nav"
-      [class.loro-card-nav--danger]="variant() === 'danger'"
-      [class.loro-card-nav--soft]="variant() === 'soft'"
-      [class.loro-card-nav--selected]="selected()"
-      (click)="activate()">
-      @if (icon()) {
-        <span class="loro-card-nav__icon">
-          <loro-icon
-            [name]="icon()!"
-            [size]="iconSize()"
-            [alt]="title()"
-            [color]="variant() === 'danger' ? 'danger' : iconColor()" />
-        </span>
-      }
-
-      <span class="loro-card-nav__copy">
-        <span class="loro-card-nav__title">{{ title() }}</span>
-        @if (description()) {
-          <span class="loro-card-nav__description">{{ description() }}</span>
-        }
-      </span>
-
-      <span class="loro-card-nav__trailing" (click)="$event.stopPropagation()">
-        @switch (trailing()) {
-          @case ('toggle') {
-            <loro-toggle [checked]="checked()" [ariaLabel]="title()" (checkedChange)="checkedChange.emit($event)" />
-          }
-          @case ('radio') {
-            <loro-radio [label]="''" [value]="value()" [checked]="selected()" (selected)="selectedChange.emit($event)" />
-          }
-          @case ('text') {
-            <span class="loro-card-nav__value">{{ value() }}</span>
-          }
-          @case ('badge') {
-            <loro-badge [label]="badgeLabel() || value()" [variant]="badgeVariant()" />
-          }
-          @case ('arrow') {
-            <loro-icon
-              class="loro-card-nav__arrow"
-              name="chevron-right"
-              [size]="22"
-              alt="Abrir"
-              [color]="variant() === 'danger' ? 'danger' : 'primary'" />
-          }
-        }
-      </span>
-    </button>
-  `, 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"] }]
+            args: [{ selector: 'loro-card-nav', standalone: true, imports: [LoroBadge, LoroIcon, LoroRadio, LoroToggle], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n      type=\"button\"\n      class=\"loro-card-nav\"\n      [class.loro-card-nav--danger]=\"variant() === 'danger'\"\n      [class.loro-card-nav--soft]=\"variant() === 'soft'\"\n      [class.loro-card-nav--selected]=\"selected()\"\n      (click)=\"activate()\">\n      @if (icon()) {\n        <span class=\"loro-card-nav__icon\">\n          <loro-icon\n            [name]=\"icon()!\"\n            [size]=\"iconSize()\"\n            [alt]=\"title()\"\n            [color]=\"variant() === 'danger' ? 'danger' : iconColor()\" />\n        </span>\n      }\n\n      <span class=\"loro-card-nav__copy\">\n        <span class=\"loro-card-nav__title\">{{ title() }}</span>\n        @if (description()) {\n          <span class=\"loro-card-nav__description\">{{ description() }}</span>\n        }\n      </span>\n\n      <span class=\"loro-card-nav__trailing\" (click)=\"$event.stopPropagation()\">\n        @switch (trailing()) {\n          @case ('toggle') {\n            <loro-toggle [checked]=\"checked()\" [ariaLabel]=\"title()\" (checkedChange)=\"checkedChange.emit($event)\" />\n          }\n          @case ('radio') {\n            <loro-radio [label]=\"''\" [value]=\"value()\" [checked]=\"selected()\" (selected)=\"selectedChange.emit($event)\" />\n          }\n          @case ('text') {\n            <span class=\"loro-card-nav__value\">{{ value() }}</span>\n          }\n          @case ('badge') {\n            <loro-badge [label]=\"badgeLabel() || value()\" [variant]=\"badgeVariant()\" />\n          }\n          @case ('arrow') {\n            <loro-icon\n              class=\"loro-card-nav__arrow\"\n              name=\"chevron-right\"\n              [size]=\"22\"\n              alt=\"Abrir\"\n              [color]=\"variant() === 'danger' ? 'danger' : 'primary'\" />\n          }\n        }\n      </span>\n    </button>", 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"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], trailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailing", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], badgeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeLabel", required: false }] }], badgeVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeVariant", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
 
 class LoroDashboardCard {
@@ -2293,273 +1880,11 @@ class LoroInput {
         return normalized.includes(',') ? `${nextInteger},${nextDecimal}` : nextInteger.slice(0, 3);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroInput, isStandalone: true, selector: "loro-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIconSize: { classPropertyName: "trailingIconSize", publicName: "trailingIconSize", isSignal: true, isRequired: false, transformFunction: null }, trailingAriaLabel: { classPropertyName: "trailingAriaLabel", publicName: "trailingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", trailingClick: "trailingClick" }, viewQueries: [{ propertyName: "control", first: true, predicate: ["control"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    @if (variant() === 'stepper') {
-      <span
-        class="loro-input loro-input--stepper-field"
-        [class.loro-input--error]="hasError()"
-        [class.loro-input--success]="hasSuccess()">
-        @if (label()) {
-          <span class="loro-input__label">{{ label() }}</span>
-        }
-        <span
-          class="loro-input--stepper"
-          [class.loro-input--stepper-kg]="normalizedUnit() === 'kg'"
-          [class.loro-input--stepper-ud]="normalizedUnit() === 'ud'"
-          role="group"
-          [attr.aria-label]="label() || 'Cantidad'"
-        >
-          <button type="button" aria-label="Restar" [disabled]="disabled()" (click)="adjust(-step())">-</button>
-          <span class="loro-input__stepper-value">
-            <input
-              #control
-              [attr.inputmode]="normalizedUnit() === 'kg' ? 'decimal' : 'numeric'"
-              [attr.size]="stepperInputSize()"
-              [attr.maxlength]="stepperInputMaxLength()"
-              [attr.max]="max()"
-              [attr.min]="min()"
-              [value]="value()"
-              [disabled]="disabled()"
-              [readonly]="readonly()"
-              [required]="required()"
-              [attr.aria-label]="label() || 'Cantidad'"
-              [attr.aria-invalid]="hasError() ? 'true' : null"
-              [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
-              (keydown.enter)="$any($event.target).blur()"
-              (input)="sanitizeStepperInput($event)"
-              (blur)="markAsTouched(); normalizeValue(($any($event.target).value ?? '').toString())"
-            />
-            <span>{{ normalizedUnit() }}</span>
-          </span>
-          <button type="button" aria-label="Sumar" [disabled]="disabled()" (click)="adjust(step())">+</button>
-        </span>
-        @if (hasError() && errorText()) {
-          <span class="loro-input__error" [id]="errorId">
-            <loro-icon name="shield-alert" [size]="16" color="danger" [decorative]="true" />
-            <span>{{ errorText() }}</span>
-          </span>
-        } @else if (hasLoading() && helperText()) {
-          <span class="loro-input__loading" aria-live="polite">
-            <span>{{ helperText() }}</span>
-          </span>
-        } @else if (hasSuccess() && helperText()) {
-          <span class="loro-input__success">
-            <loro-icon name="check" [size]="16" color="success" [decorative]="true" />
-            <span>{{ helperText() }}</span>
-          </span>
-        } @else if (helperText()) {
-          <span class="loro-input__helper">{{ helperText() }}</span>
-        }
-      </span>
-    } @else {
-      <label
-        class="loro-input"
-        [class.loro-input--has-icon]="icon() || variant() === 'search'"
-        [class.loro-input--error]="hasError()"
-        [class.loro-input--success]="hasSuccess()"
-        [class.loro-input--loading]="hasLoading()"
-      >
-        @if (label()) {
-          <span class="loro-input__label">{{ label() }}</span>
-        }
-        <span class="loro-input__control">
-          @if (icon() || variant() === 'search') {
-            <loro-icon
-              [name]="icon() || 'search'"
-              [size]="iconSize()"
-              [alt]="label() || placeholder()"
-              [color]="resolvedLeadingIconColor()"
-            />
-          }
-          <input
-            #control
-            [type]="type()"
-            [attr.name]="name() || null"
-            [placeholder]="placeholder()"
-            [value]="value()"
-            [disabled]="disabled()"
-            [readonly]="readonly()"
-            [required]="required()"
-            [attr.autocomplete]="autocomplete() || null"
-            [attr.inputmode]="inputmode() || null"
-            [attr.aria-invalid]="hasError() ? 'true' : null"
-            [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
-            (input)="updateValue(($any($event.target).value ?? '').toString())"
-            (blur)="markAsTouched()"
-          />
-          @if (trailingIcon()) {
-            <button
-              type="button"
-              class="loro-input__trailing-button"
-              [attr.aria-label]="trailingAriaLabel() || null"
-              (click)="trailingClick.emit()"
-            >
-              <loro-icon
-                [name]="trailingIcon()!"
-                [size]="trailingIconSize()"
-                alt=""
-                [decorative]="true"
-                [color]="resolvedTrailingIconColor()"
-              />
-            </button>
-          }
-        </span>
-        @if (hasError() && errorText()) {
-          <span class="loro-input__error" [id]="errorId">
-            <loro-icon name="shield-alert" [size]="16" color="danger" [decorative]="true" />
-            <span>{{ errorText() }}</span>
-          </span>
-        } @else if (hasLoading() && helperText()) {
-          <span class="loro-input__loading" aria-live="polite">
-            <span class="loro-input__loader" aria-hidden="true"></span>
-            <span>{{ helperText() }}</span>
-          </span>
-        } @else if (hasSuccess() && helperText()) {
-          <span class="loro-input__success">
-            <loro-icon name="check" [size]="16" color="success" [decorative]="true" />
-            <span>{{ helperText() }}</span>
-          </span>
-        } @else if (helperText()) {
-          <span class="loro-input__helper">{{ helperText() }}</span>
-        }
-      </label>
-    }
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-input{display:grid;gap:.55rem;color:var(--loro-text)}.loro-input__label{color:var(--loro-muted-strong);font-size:var(--loro-input-label-font-size, .95rem);font-weight:var(--loro-input-label-font-weight, 800);line-height:var(--loro-input-label-line-height, 1.2)}.loro-input__control{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;min-height:var(--loro-input-control-min-height, 3.4rem);padding:var(--loro-input-control-padding, 0 1rem);border:1px solid var(--loro-input-control-border-color, var(--loro-border-subtle));border-radius:var(--loro-input-control-radius, var(--loro-radius-input));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:var(--loro-input-control-shadow, none);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.loro-input--has-icon .loro-input__control{grid-template-columns:auto minmax(0,1fr);gap:var(--loro-input-control-gap, .8rem)}.loro-input--has-icon:has(.loro-input__trailing-button) .loro-input__control{grid-template-columns:auto minmax(0,1fr) auto}.loro-input__control input{font-size:var(--loro-input-field-font-size, 1rem);line-height:var(--loro-input-field-line-height, 1.2)}input{width:100%;border:0;outline:0;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:var(--loro-input-field-font-weight, 700)}input::placeholder{color:var(--loro-muted);font-weight:var(--loro-input-placeholder-font-weight, 600);opacity:var(--loro-input-placeholder-opacity, 1)}.loro-input__trailing-button{display:grid;width:2.5rem;height:2.5rem;place-items:center;margin-right:-.55rem;border:0;border-radius:50%;color:var(--loro-muted);background:transparent;cursor:pointer;transition:background .15s ease,color .15s ease}.loro-input__trailing-button:hover,.loro-input__trailing-button:focus-visible{color:var(--loro-primary-700);background:color-mix(in srgb,var(--loro-primary-500) 10%,transparent);outline:none}.loro-input--error .loro-input__control{border-color:color-mix(in srgb,var(--loro-danger-text) 28%,var(--loro-border-subtle));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-input--error .loro-input--stepper{border-color:color-mix(in srgb,var(--loro-danger-text) 28%,var(--loro-border-subtle));background:var(--loro-surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-input--error .loro-input__label{color:color-mix(in srgb,var(--loro-danger-text) 68%,var(--loro-muted-strong))}.loro-input--success .loro-input__control{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 34%,var(--loro-border-subtle));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-input--success .loro-input--stepper{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 34%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-input--success .loro-input__label{color:color-mix(in srgb,var(--loro-success, #1f9d55) 72%,var(--loro-muted-strong))}.loro-input--loading .loro-input__control{border-color:color-mix(in srgb,var(--loro-primary-500) 22%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 8%,transparent)}.loro-input__control:focus-within{border-color:var(--loro-input-control-focus-border-color, var(--loro-primary-500));box-shadow:var(--loro-input-control-focus-shadow, 0 0 0 3px color-mix(in srgb, var(--loro-primary-500) 16%, transparent))}.loro-input__error{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-danger-text);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__helper{display:inline-block;color:var(--loro-muted);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__success{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-success, #1f9d55);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loading{display:flex;align-items:center;gap:.35rem;color:var(--loro-primary-700);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loader{width:1rem;height:1rem;border:2px solid color-mix(in srgb,var(--loro-primary-500) 18%,transparent);border-top-color:var(--loro-primary-500);border-radius:50%;animation:loro-input-spin .75s linear infinite}.loro-input--stepper{display:grid;grid-template-columns:1.85rem minmax(3.9rem,1fr) 1.85rem;align-items:center;min-width:0;min-height:2.25rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--loro-primary-500) 12%,var(--loro-border-subtle) 88%);border-radius:.65rem;background:var(--loro-surface);color:var(--loro-text-strong);font-weight:900;text-align:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-surface) 70%,transparent)}.loro-input--stepper button{height:100%;min-width:0;border:0;background:transparent;color:var(--loro-primary-700);font:inherit;font-weight:950;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease}.loro-input--stepper button:active{background:color-mix(in srgb,var(--loro-primary-500) 10%,var(--loro-surface) 90%)}.loro-input__stepper-value{display:inline-grid;grid-template-columns:minmax(1.55rem,max-content) auto;align-items:center;justify-content:center;gap:.18rem;min-width:0;overflow:hidden;padding-inline:.1rem;white-space:nowrap}.loro-input--stepper input{width:auto;min-width:1.55rem;max-width:2.75rem;overflow:hidden;padding:0;text-align:right;text-overflow:clip;white-space:nowrap;font-weight:900;font-size:clamp(.85rem,2.4vw,.98rem);letter-spacing:-.02em}.loro-input__stepper-value span{min-width:1.05rem;color:var(--loro-text-strong);font-size:clamp(.8rem,2.2vw,.92rem);font-weight:950;line-height:1}.loro-input--stepper-kg input{min-width:2.1rem;max-width:2.35rem}@media(max-width:1023.88px){.loro-input__control input{font-size:16px}.loro-input--stepper{grid-template-columns:1.65rem minmax(3.65rem,1fr) 1.65rem;min-height:2.2rem}.loro-input__stepper-value{gap:.16rem}}@keyframes loro-input-spin{to{transform:rotate(360deg)}}@keyframes loro-input-dot-blink{0%,20%{opacity:.25}50%{opacity:1}to{opacity:.25}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroInput, isStandalone: true, selector: "loro-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIconSize: { classPropertyName: "trailingIconSize", publicName: "trailingIconSize", isSignal: true, isRequired: false, transformFunction: null }, trailingAriaLabel: { classPropertyName: "trailingAriaLabel", publicName: "trailingAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", trailingClick: "trailingClick" }, viewQueries: [{ propertyName: "control", first: true, predicate: ["control"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (variant() === 'stepper') {\n      <span\n        class=\"loro-input loro-input--stepper-field\"\n        [class.loro-input--error]=\"hasError()\"\n        [class.loro-input--success]=\"hasSuccess()\">\n        @if (label()) {\n          <span class=\"loro-input__label\">{{ label() }}</span>\n        }\n        <span\n          class=\"loro-input--stepper\"\n          [class.loro-input--stepper-kg]=\"normalizedUnit() === 'kg'\"\n          [class.loro-input--stepper-ud]=\"normalizedUnit() === 'ud'\"\n          role=\"group\"\n          [attr.aria-label]=\"label() || 'Cantidad'\"\n        >\n          <button type=\"button\" aria-label=\"Restar\" [disabled]=\"disabled()\" (click)=\"adjust(-step())\">-</button>\n          <span class=\"loro-input__stepper-value\">\n            <input\n              #control\n              [attr.inputmode]=\"normalizedUnit() === 'kg' ? 'decimal' : 'numeric'\"\n              [attr.size]=\"stepperInputSize()\"\n              [attr.maxlength]=\"stepperInputMaxLength()\"\n              [attr.max]=\"max()\"\n              [attr.min]=\"min()\"\n              [value]=\"value()\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              [required]=\"required()\"\n              [attr.aria-label]=\"label() || 'Cantidad'\"\n              [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n              [attr.aria-describedby]=\"hasError() && errorText() ? errorId : null\"\n              (keydown.enter)=\"$any($event.target).blur()\"\n              (input)=\"sanitizeStepperInput($event)\"\n              (blur)=\"markAsTouched(); normalizeValue(($any($event.target).value ?? '').toString())\"\n            />\n            <span>{{ normalizedUnit() }}</span>\n          </span>\n          <button type=\"button\" aria-label=\"Sumar\" [disabled]=\"disabled()\" (click)=\"adjust(step())\">+</button>\n        </span>\n        @if (hasError() && errorText()) {\n          <span class=\"loro-input__error\" [id]=\"errorId\">\n            <loro-icon name=\"shield-alert\" [size]=\"16\" color=\"danger\" [decorative]=\"true\" />\n            <span>{{ errorText() }}</span>\n          </span>\n        } @else if (hasLoading() && helperText()) {\n          <span class=\"loro-input__loading\" aria-live=\"polite\">\n            <span>{{ helperText() }}</span>\n          </span>\n        } @else if (hasSuccess() && helperText()) {\n          <span class=\"loro-input__success\">\n            <loro-icon name=\"check\" [size]=\"16\" color=\"success\" [decorative]=\"true\" />\n            <span>{{ helperText() }}</span>\n          </span>\n        } @else if (helperText()) {\n          <span class=\"loro-input__helper\">{{ helperText() }}</span>\n        }\n      </span>\n    } @else {\n      <label\n        class=\"loro-input\"\n        [class.loro-input--has-icon]=\"icon() || variant() === 'search'\"\n        [class.loro-input--error]=\"hasError()\"\n        [class.loro-input--success]=\"hasSuccess()\"\n        [class.loro-input--loading]=\"hasLoading()\"\n      >\n        @if (label()) {\n          <span class=\"loro-input__label\">{{ label() }}</span>\n        }\n        <span class=\"loro-input__control\">\n          @if (icon() || variant() === 'search') {\n            <loro-icon\n              [name]=\"icon() || 'search'\"\n              [size]=\"iconSize()\"\n              [alt]=\"label() || placeholder()\"\n              [color]=\"resolvedLeadingIconColor()\"\n            />\n          }\n          <input\n            #control\n            [type]=\"type()\"\n            [attr.name]=\"name() || null\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"value()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [required]=\"required()\"\n            [attr.autocomplete]=\"autocomplete() || null\"\n            [attr.inputmode]=\"inputmode() || null\"\n            [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n            [attr.aria-describedby]=\"hasError() && errorText() ? errorId : null\"\n            (input)=\"updateValue(($any($event.target).value ?? '').toString())\"\n            (blur)=\"markAsTouched()\"\n          />\n          @if (trailingIcon()) {\n            <button\n              type=\"button\"\n              class=\"loro-input__trailing-button\"\n              [attr.aria-label]=\"trailingAriaLabel() || null\"\n              (click)=\"trailingClick.emit()\"\n            >\n              <loro-icon\n                [name]=\"trailingIcon()!\"\n                [size]=\"trailingIconSize()\"\n                alt=\"\"\n                [decorative]=\"true\"\n                [color]=\"resolvedTrailingIconColor()\"\n              />\n            </button>\n          }\n        </span>\n        @if (hasError() && errorText()) {\n          <span class=\"loro-input__error\" [id]=\"errorId\">\n            <loro-icon name=\"shield-alert\" [size]=\"16\" color=\"danger\" [decorative]=\"true\" />\n            <span>{{ errorText() }}</span>\n          </span>\n        } @else if (hasLoading() && helperText()) {\n          <span class=\"loro-input__loading\" aria-live=\"polite\">\n            <span class=\"loro-input__loader\" aria-hidden=\"true\"></span>\n            <span>{{ helperText() }}</span>\n          </span>\n        } @else if (hasSuccess() && helperText()) {\n          <span class=\"loro-input__success\">\n            <loro-icon name=\"check\" [size]=\"16\" color=\"success\" [decorative]=\"true\" />\n            <span>{{ helperText() }}</span>\n          </span>\n        } @else if (helperText()) {\n          <span class=\"loro-input__helper\">{{ helperText() }}</span>\n        }\n      </label>\n    }", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-input{display:grid;gap:.55rem;color:var(--loro-text)}.loro-input__label{color:var(--loro-muted-strong);font-size:var(--loro-input-label-font-size, .95rem);font-weight:var(--loro-input-label-font-weight, 800);line-height:var(--loro-input-label-line-height, 1.2)}.loro-input__control{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;min-height:var(--loro-input-control-min-height, 3.4rem);padding:var(--loro-input-control-padding, 0 1rem);border:1px solid var(--loro-input-control-border-color, var(--loro-border-subtle));border-radius:var(--loro-input-control-radius, var(--loro-radius-input));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:var(--loro-input-control-shadow, none);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.loro-input--has-icon .loro-input__control{grid-template-columns:auto minmax(0,1fr);gap:var(--loro-input-control-gap, .8rem)}.loro-input--has-icon:has(.loro-input__trailing-button) .loro-input__control{grid-template-columns:auto minmax(0,1fr) auto}.loro-input__control input{font-size:var(--loro-input-field-font-size, 1rem);line-height:var(--loro-input-field-line-height, 1.2)}input{width:100%;border:0;outline:0;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:var(--loro-input-field-font-weight, 700)}input::placeholder{color:var(--loro-muted);font-weight:var(--loro-input-placeholder-font-weight, 600);opacity:var(--loro-input-placeholder-opacity, 1)}.loro-input__trailing-button{display:grid;width:2.5rem;height:2.5rem;place-items:center;margin-right:-.55rem;border:0;border-radius:50%;color:var(--loro-muted);background:transparent;cursor:pointer;transition:background .15s ease,color .15s ease}.loro-input__trailing-button:hover,.loro-input__trailing-button:focus-visible{color:var(--loro-primary-700);background:color-mix(in srgb,var(--loro-primary-500) 10%,transparent);outline:none}.loro-input--error .loro-input__control{border-color:color-mix(in srgb,var(--loro-danger-text) 28%,var(--loro-border-subtle));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-input--error .loro-input--stepper{border-color:color-mix(in srgb,var(--loro-danger-text) 28%,var(--loro-border-subtle));background:var(--loro-surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-input--error .loro-input__label{color:color-mix(in srgb,var(--loro-danger-text) 68%,var(--loro-muted-strong))}.loro-input--success .loro-input__control{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 34%,var(--loro-border-subtle));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-input--success .loro-input--stepper{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 34%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-input--success .loro-input__label{color:color-mix(in srgb,var(--loro-success, #1f9d55) 72%,var(--loro-muted-strong))}.loro-input--loading .loro-input__control{border-color:color-mix(in srgb,var(--loro-primary-500) 22%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 8%,transparent)}.loro-input__control:focus-within{border-color:var(--loro-input-control-focus-border-color, var(--loro-primary-500));box-shadow:var(--loro-input-control-focus-shadow, 0 0 0 3px color-mix(in srgb, var(--loro-primary-500) 16%, transparent))}.loro-input__error{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-danger-text);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__helper{display:inline-block;color:var(--loro-muted);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__success{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-success, #1f9d55);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loading{display:flex;align-items:center;gap:.35rem;color:var(--loro-primary-700);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loader{width:1rem;height:1rem;border:2px solid color-mix(in srgb,var(--loro-primary-500) 18%,transparent);border-top-color:var(--loro-primary-500);border-radius:50%;animation:loro-input-spin .75s linear infinite}.loro-input--stepper{display:grid;grid-template-columns:1.85rem minmax(3.9rem,1fr) 1.85rem;align-items:center;min-width:0;min-height:2.25rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--loro-primary-500) 12%,var(--loro-border-subtle) 88%);border-radius:.65rem;background:var(--loro-surface);color:var(--loro-text-strong);font-weight:900;text-align:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-surface) 70%,transparent)}.loro-input--stepper button{height:100%;min-width:0;border:0;background:transparent;color:var(--loro-primary-700);font:inherit;font-weight:950;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease}.loro-input--stepper button:active{background:color-mix(in srgb,var(--loro-primary-500) 10%,var(--loro-surface) 90%)}.loro-input__stepper-value{display:inline-grid;grid-template-columns:minmax(1.55rem,max-content) auto;align-items:center;justify-content:center;gap:.18rem;min-width:0;overflow:hidden;padding-inline:.1rem;white-space:nowrap}.loro-input--stepper input{width:auto;min-width:1.55rem;max-width:2.75rem;overflow:hidden;padding:0;text-align:right;text-overflow:clip;white-space:nowrap;font-weight:900;font-size:clamp(.85rem,2.4vw,.98rem);letter-spacing:-.02em}.loro-input__stepper-value span{min-width:1.05rem;color:var(--loro-text-strong);font-size:clamp(.8rem,2.2vw,.92rem);font-weight:950;line-height:1}.loro-input--stepper-kg input{min-width:2.1rem;max-width:2.35rem}@media(max-width:1023.88px){.loro-input__control input{font-size:16px}.loro-input--stepper{grid-template-columns:1.65rem minmax(3.65rem,1fr) 1.65rem;min-height:2.2rem}.loro-input__stepper-value{gap:.16rem}}@keyframes loro-input-spin{to{transform:rotate(360deg)}}@keyframes loro-input-dot-blink{0%,20%{opacity:.25}50%{opacity:1}to{opacity:.25}}\n"], dependencies: [{ kind: "component", type: LoroIcon, 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: LoroInput, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-input', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (variant() === 'stepper') {
-      <span
-        class="loro-input loro-input--stepper-field"
-        [class.loro-input--error]="hasError()"
-        [class.loro-input--success]="hasSuccess()">
-        @if (label()) {
-          <span class="loro-input__label">{{ label() }}</span>
-        }
-        <span
-          class="loro-input--stepper"
-          [class.loro-input--stepper-kg]="normalizedUnit() === 'kg'"
-          [class.loro-input--stepper-ud]="normalizedUnit() === 'ud'"
-          role="group"
-          [attr.aria-label]="label() || 'Cantidad'"
-        >
-          <button type="button" aria-label="Restar" [disabled]="disabled()" (click)="adjust(-step())">-</button>
-          <span class="loro-input__stepper-value">
-            <input
-              #control
-              [attr.inputmode]="normalizedUnit() === 'kg' ? 'decimal' : 'numeric'"
-              [attr.size]="stepperInputSize()"
-              [attr.maxlength]="stepperInputMaxLength()"
-              [attr.max]="max()"
-              [attr.min]="min()"
-              [value]="value()"
-              [disabled]="disabled()"
-              [readonly]="readonly()"
-              [required]="required()"
-              [attr.aria-label]="label() || 'Cantidad'"
-              [attr.aria-invalid]="hasError() ? 'true' : null"
-              [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
-              (keydown.enter)="$any($event.target).blur()"
-              (input)="sanitizeStepperInput($event)"
-              (blur)="markAsTouched(); normalizeValue(($any($event.target).value ?? '').toString())"
-            />
-            <span>{{ normalizedUnit() }}</span>
-          </span>
-          <button type="button" aria-label="Sumar" [disabled]="disabled()" (click)="adjust(step())">+</button>
-        </span>
-        @if (hasError() && errorText()) {
-          <span class="loro-input__error" [id]="errorId">
-            <loro-icon name="shield-alert" [size]="16" color="danger" [decorative]="true" />
-            <span>{{ errorText() }}</span>
-          </span>
-        } @else if (hasLoading() && helperText()) {
-          <span class="loro-input__loading" aria-live="polite">
-            <span>{{ helperText() }}</span>
-          </span>
-        } @else if (hasSuccess() && helperText()) {
-          <span class="loro-input__success">
-            <loro-icon name="check" [size]="16" color="success" [decorative]="true" />
-            <span>{{ helperText() }}</span>
-          </span>
-        } @else if (helperText()) {
-          <span class="loro-input__helper">{{ helperText() }}</span>
-        }
-      </span>
-    } @else {
-      <label
-        class="loro-input"
-        [class.loro-input--has-icon]="icon() || variant() === 'search'"
-        [class.loro-input--error]="hasError()"
-        [class.loro-input--success]="hasSuccess()"
-        [class.loro-input--loading]="hasLoading()"
-      >
-        @if (label()) {
-          <span class="loro-input__label">{{ label() }}</span>
-        }
-        <span class="loro-input__control">
-          @if (icon() || variant() === 'search') {
-            <loro-icon
-              [name]="icon() || 'search'"
-              [size]="iconSize()"
-              [alt]="label() || placeholder()"
-              [color]="resolvedLeadingIconColor()"
-            />
-          }
-          <input
-            #control
-            [type]="type()"
-            [attr.name]="name() || null"
-            [placeholder]="placeholder()"
-            [value]="value()"
-            [disabled]="disabled()"
-            [readonly]="readonly()"
-            [required]="required()"
-            [attr.autocomplete]="autocomplete() || null"
-            [attr.inputmode]="inputmode() || null"
-            [attr.aria-invalid]="hasError() ? 'true' : null"
-            [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
-            (input)="updateValue(($any($event.target).value ?? '').toString())"
-            (blur)="markAsTouched()"
-          />
-          @if (trailingIcon()) {
-            <button
-              type="button"
-              class="loro-input__trailing-button"
-              [attr.aria-label]="trailingAriaLabel() || null"
-              (click)="trailingClick.emit()"
-            >
-              <loro-icon
-                [name]="trailingIcon()!"
-                [size]="trailingIconSize()"
-                alt=""
-                [decorative]="true"
-                [color]="resolvedTrailingIconColor()"
-              />
-            </button>
-          }
-        </span>
-        @if (hasError() && errorText()) {
-          <span class="loro-input__error" [id]="errorId">
-            <loro-icon name="shield-alert" [size]="16" color="danger" [decorative]="true" />
-            <span>{{ errorText() }}</span>
-          </span>
-        } @else if (hasLoading() && helperText()) {
-          <span class="loro-input__loading" aria-live="polite">
-            <span class="loro-input__loader" aria-hidden="true"></span>
-            <span>{{ helperText() }}</span>
-          </span>
-        } @else if (hasSuccess() && helperText()) {
-          <span class="loro-input__success">
-            <loro-icon name="check" [size]="16" color="success" [decorative]="true" />
-            <span>{{ helperText() }}</span>
-          </span>
-        } @else if (helperText()) {
-          <span class="loro-input__helper">{{ helperText() }}</span>
-        }
-      </label>
-    }
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-input{display:grid;gap:.55rem;color:var(--loro-text)}.loro-input__label{color:var(--loro-muted-strong);font-size:var(--loro-input-label-font-size, .95rem);font-weight:var(--loro-input-label-font-weight, 800);line-height:var(--loro-input-label-line-height, 1.2)}.loro-input__control{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;min-height:var(--loro-input-control-min-height, 3.4rem);padding:var(--loro-input-control-padding, 0 1rem);border:1px solid var(--loro-input-control-border-color, var(--loro-border-subtle));border-radius:var(--loro-input-control-radius, var(--loro-radius-input));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:var(--loro-input-control-shadow, none);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.loro-input--has-icon .loro-input__control{grid-template-columns:auto minmax(0,1fr);gap:var(--loro-input-control-gap, .8rem)}.loro-input--has-icon:has(.loro-input__trailing-button) .loro-input__control{grid-template-columns:auto minmax(0,1fr) auto}.loro-input__control input{font-size:var(--loro-input-field-font-size, 1rem);line-height:var(--loro-input-field-line-height, 1.2)}input{width:100%;border:0;outline:0;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:var(--loro-input-field-font-weight, 700)}input::placeholder{color:var(--loro-muted);font-weight:var(--loro-input-placeholder-font-weight, 600);opacity:var(--loro-input-placeholder-opacity, 1)}.loro-input__trailing-button{display:grid;width:2.5rem;height:2.5rem;place-items:center;margin-right:-.55rem;border:0;border-radius:50%;color:var(--loro-muted);background:transparent;cursor:pointer;transition:background .15s ease,color .15s ease}.loro-input__trailing-button:hover,.loro-input__trailing-button:focus-visible{color:var(--loro-primary-700);background:color-mix(in srgb,var(--loro-primary-500) 10%,transparent);outline:none}.loro-input--error .loro-input__control{border-color:color-mix(in srgb,var(--loro-danger-text) 28%,var(--loro-border-subtle));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-input--error .loro-input--stepper{border-color:color-mix(in srgb,var(--loro-danger-text) 28%,var(--loro-border-subtle));background:var(--loro-surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-input--error .loro-input__label{color:color-mix(in srgb,var(--loro-danger-text) 68%,var(--loro-muted-strong))}.loro-input--success .loro-input__control{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 34%,var(--loro-border-subtle));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-input--success .loro-input--stepper{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 34%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-input--success .loro-input__label{color:color-mix(in srgb,var(--loro-success, #1f9d55) 72%,var(--loro-muted-strong))}.loro-input--loading .loro-input__control{border-color:color-mix(in srgb,var(--loro-primary-500) 22%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 8%,transparent)}.loro-input__control:focus-within{border-color:var(--loro-input-control-focus-border-color, var(--loro-primary-500));box-shadow:var(--loro-input-control-focus-shadow, 0 0 0 3px color-mix(in srgb, var(--loro-primary-500) 16%, transparent))}.loro-input__error{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-danger-text);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__helper{display:inline-block;color:var(--loro-muted);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__success{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-success, #1f9d55);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loading{display:flex;align-items:center;gap:.35rem;color:var(--loro-primary-700);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loader{width:1rem;height:1rem;border:2px solid color-mix(in srgb,var(--loro-primary-500) 18%,transparent);border-top-color:var(--loro-primary-500);border-radius:50%;animation:loro-input-spin .75s linear infinite}.loro-input--stepper{display:grid;grid-template-columns:1.85rem minmax(3.9rem,1fr) 1.85rem;align-items:center;min-width:0;min-height:2.25rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--loro-primary-500) 12%,var(--loro-border-subtle) 88%);border-radius:.65rem;background:var(--loro-surface);color:var(--loro-text-strong);font-weight:900;text-align:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-surface) 70%,transparent)}.loro-input--stepper button{height:100%;min-width:0;border:0;background:transparent;color:var(--loro-primary-700);font:inherit;font-weight:950;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease}.loro-input--stepper button:active{background:color-mix(in srgb,var(--loro-primary-500) 10%,var(--loro-surface) 90%)}.loro-input__stepper-value{display:inline-grid;grid-template-columns:minmax(1.55rem,max-content) auto;align-items:center;justify-content:center;gap:.18rem;min-width:0;overflow:hidden;padding-inline:.1rem;white-space:nowrap}.loro-input--stepper input{width:auto;min-width:1.55rem;max-width:2.75rem;overflow:hidden;padding:0;text-align:right;text-overflow:clip;white-space:nowrap;font-weight:900;font-size:clamp(.85rem,2.4vw,.98rem);letter-spacing:-.02em}.loro-input__stepper-value span{min-width:1.05rem;color:var(--loro-text-strong);font-size:clamp(.8rem,2.2vw,.92rem);font-weight:950;line-height:1}.loro-input--stepper-kg input{min-width:2.1rem;max-width:2.35rem}@media(max-width:1023.88px){.loro-input__control input{font-size:16px}.loro-input--stepper{grid-template-columns:1.65rem minmax(3.65rem,1fr) 1.65rem;min-height:2.2rem}.loro-input__stepper-value{gap:.16rem}}@keyframes loro-input-spin{to{transform:rotate(360deg)}}@keyframes loro-input-dot-blink{0%,20%{opacity:.25}50%{opacity:1}to{opacity:.25}}\n"] }]
+            args: [{ selector: 'loro-input', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (variant() === 'stepper') {\n      <span\n        class=\"loro-input loro-input--stepper-field\"\n        [class.loro-input--error]=\"hasError()\"\n        [class.loro-input--success]=\"hasSuccess()\">\n        @if (label()) {\n          <span class=\"loro-input__label\">{{ label() }}</span>\n        }\n        <span\n          class=\"loro-input--stepper\"\n          [class.loro-input--stepper-kg]=\"normalizedUnit() === 'kg'\"\n          [class.loro-input--stepper-ud]=\"normalizedUnit() === 'ud'\"\n          role=\"group\"\n          [attr.aria-label]=\"label() || 'Cantidad'\"\n        >\n          <button type=\"button\" aria-label=\"Restar\" [disabled]=\"disabled()\" (click)=\"adjust(-step())\">-</button>\n          <span class=\"loro-input__stepper-value\">\n            <input\n              #control\n              [attr.inputmode]=\"normalizedUnit() === 'kg' ? 'decimal' : 'numeric'\"\n              [attr.size]=\"stepperInputSize()\"\n              [attr.maxlength]=\"stepperInputMaxLength()\"\n              [attr.max]=\"max()\"\n              [attr.min]=\"min()\"\n              [value]=\"value()\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              [required]=\"required()\"\n              [attr.aria-label]=\"label() || 'Cantidad'\"\n              [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n              [attr.aria-describedby]=\"hasError() && errorText() ? errorId : null\"\n              (keydown.enter)=\"$any($event.target).blur()\"\n              (input)=\"sanitizeStepperInput($event)\"\n              (blur)=\"markAsTouched(); normalizeValue(($any($event.target).value ?? '').toString())\"\n            />\n            <span>{{ normalizedUnit() }}</span>\n          </span>\n          <button type=\"button\" aria-label=\"Sumar\" [disabled]=\"disabled()\" (click)=\"adjust(step())\">+</button>\n        </span>\n        @if (hasError() && errorText()) {\n          <span class=\"loro-input__error\" [id]=\"errorId\">\n            <loro-icon name=\"shield-alert\" [size]=\"16\" color=\"danger\" [decorative]=\"true\" />\n            <span>{{ errorText() }}</span>\n          </span>\n        } @else if (hasLoading() && helperText()) {\n          <span class=\"loro-input__loading\" aria-live=\"polite\">\n            <span>{{ helperText() }}</span>\n          </span>\n        } @else if (hasSuccess() && helperText()) {\n          <span class=\"loro-input__success\">\n            <loro-icon name=\"check\" [size]=\"16\" color=\"success\" [decorative]=\"true\" />\n            <span>{{ helperText() }}</span>\n          </span>\n        } @else if (helperText()) {\n          <span class=\"loro-input__helper\">{{ helperText() }}</span>\n        }\n      </span>\n    } @else {\n      <label\n        class=\"loro-input\"\n        [class.loro-input--has-icon]=\"icon() || variant() === 'search'\"\n        [class.loro-input--error]=\"hasError()\"\n        [class.loro-input--success]=\"hasSuccess()\"\n        [class.loro-input--loading]=\"hasLoading()\"\n      >\n        @if (label()) {\n          <span class=\"loro-input__label\">{{ label() }}</span>\n        }\n        <span class=\"loro-input__control\">\n          @if (icon() || variant() === 'search') {\n            <loro-icon\n              [name]=\"icon() || 'search'\"\n              [size]=\"iconSize()\"\n              [alt]=\"label() || placeholder()\"\n              [color]=\"resolvedLeadingIconColor()\"\n            />\n          }\n          <input\n            #control\n            [type]=\"type()\"\n            [attr.name]=\"name() || null\"\n            [placeholder]=\"placeholder()\"\n            [value]=\"value()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [required]=\"required()\"\n            [attr.autocomplete]=\"autocomplete() || null\"\n            [attr.inputmode]=\"inputmode() || null\"\n            [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n            [attr.aria-describedby]=\"hasError() && errorText() ? errorId : null\"\n            (input)=\"updateValue(($any($event.target).value ?? '').toString())\"\n            (blur)=\"markAsTouched()\"\n          />\n          @if (trailingIcon()) {\n            <button\n              type=\"button\"\n              class=\"loro-input__trailing-button\"\n              [attr.aria-label]=\"trailingAriaLabel() || null\"\n              (click)=\"trailingClick.emit()\"\n            >\n              <loro-icon\n                [name]=\"trailingIcon()!\"\n                [size]=\"trailingIconSize()\"\n                alt=\"\"\n                [decorative]=\"true\"\n                [color]=\"resolvedTrailingIconColor()\"\n              />\n            </button>\n          }\n        </span>\n        @if (hasError() && errorText()) {\n          <span class=\"loro-input__error\" [id]=\"errorId\">\n            <loro-icon name=\"shield-alert\" [size]=\"16\" color=\"danger\" [decorative]=\"true\" />\n            <span>{{ errorText() }}</span>\n          </span>\n        } @else if (hasLoading() && helperText()) {\n          <span class=\"loro-input__loading\" aria-live=\"polite\">\n            <span class=\"loro-input__loader\" aria-hidden=\"true\"></span>\n            <span>{{ helperText() }}</span>\n          </span>\n        } @else if (hasSuccess() && helperText()) {\n          <span class=\"loro-input__success\">\n            <loro-icon name=\"check\" [size]=\"16\" color=\"success\" [decorative]=\"true\" />\n            <span>{{ helperText() }}</span>\n          </span>\n        } @else if (helperText()) {\n          <span class=\"loro-input__helper\">{{ helperText() }}</span>\n        }\n      </label>\n    }", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-input{display:grid;gap:.55rem;color:var(--loro-text)}.loro-input__label{color:var(--loro-muted-strong);font-size:var(--loro-input-label-font-size, .95rem);font-weight:var(--loro-input-label-font-weight, 800);line-height:var(--loro-input-label-line-height, 1.2)}.loro-input__control{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;min-height:var(--loro-input-control-min-height, 3.4rem);padding:var(--loro-input-control-padding, 0 1rem);border:1px solid var(--loro-input-control-border-color, var(--loro-border-subtle));border-radius:var(--loro-input-control-radius, var(--loro-radius-input));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:var(--loro-input-control-shadow, none);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.loro-input--has-icon .loro-input__control{grid-template-columns:auto minmax(0,1fr);gap:var(--loro-input-control-gap, .8rem)}.loro-input--has-icon:has(.loro-input__trailing-button) .loro-input__control{grid-template-columns:auto minmax(0,1fr) auto}.loro-input__control input{font-size:var(--loro-input-field-font-size, 1rem);line-height:var(--loro-input-field-line-height, 1.2)}input{width:100%;border:0;outline:0;background:transparent;color:var(--loro-text-strong);font:inherit;font-weight:var(--loro-input-field-font-weight, 700)}input::placeholder{color:var(--loro-muted);font-weight:var(--loro-input-placeholder-font-weight, 600);opacity:var(--loro-input-placeholder-opacity, 1)}.loro-input__trailing-button{display:grid;width:2.5rem;height:2.5rem;place-items:center;margin-right:-.55rem;border:0;border-radius:50%;color:var(--loro-muted);background:transparent;cursor:pointer;transition:background .15s ease,color .15s ease}.loro-input__trailing-button:hover,.loro-input__trailing-button:focus-visible{color:var(--loro-primary-700);background:color-mix(in srgb,var(--loro-primary-500) 10%,transparent);outline:none}.loro-input--error .loro-input__control{border-color:color-mix(in srgb,var(--loro-danger-text) 28%,var(--loro-border-subtle));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-input--error .loro-input--stepper{border-color:color-mix(in srgb,var(--loro-danger-text) 28%,var(--loro-border-subtle));background:var(--loro-surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-danger-text) 7%,transparent)}.loro-input--error .loro-input__label{color:color-mix(in srgb,var(--loro-danger-text) 68%,var(--loro-muted-strong))}.loro-input--success .loro-input__control{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 34%,var(--loro-border-subtle));background:var(--loro-input-control-background, var(--loro-surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-input--success .loro-input--stepper{border-color:color-mix(in srgb,var(--loro-success, #1f9d55) 34%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-success, #1f9d55) 10%,transparent)}.loro-input--success .loro-input__label{color:color-mix(in srgb,var(--loro-success, #1f9d55) 72%,var(--loro-muted-strong))}.loro-input--loading .loro-input__control{border-color:color-mix(in srgb,var(--loro-primary-500) 22%,var(--loro-border-subtle));box-shadow:0 0 0 3px color-mix(in srgb,var(--loro-primary-500) 8%,transparent)}.loro-input__control:focus-within{border-color:var(--loro-input-control-focus-border-color, var(--loro-primary-500));box-shadow:var(--loro-input-control-focus-shadow, 0 0 0 3px color-mix(in srgb, var(--loro-primary-500) 16%, transparent))}.loro-input__error{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-danger-text);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__helper{display:inline-block;color:var(--loro-muted);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__success{display:inline-grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.4rem;color:var(--loro-success, #1f9d55);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loading{display:flex;align-items:center;gap:.35rem;color:var(--loro-primary-700);font-size:var(--loro-input-support-font-size, .82rem);font-weight:var(--loro-input-support-font-weight, 750);line-height:var(--loro-input-support-line-height, 1.35)}.loro-input__loader{width:1rem;height:1rem;border:2px solid color-mix(in srgb,var(--loro-primary-500) 18%,transparent);border-top-color:var(--loro-primary-500);border-radius:50%;animation:loro-input-spin .75s linear infinite}.loro-input--stepper{display:grid;grid-template-columns:1.85rem minmax(3.9rem,1fr) 1.85rem;align-items:center;min-width:0;min-height:2.25rem;overflow:hidden;border:1px solid color-mix(in srgb,var(--loro-primary-500) 12%,var(--loro-border-subtle) 88%);border-radius:.65rem;background:var(--loro-surface);color:var(--loro-text-strong);font-weight:900;text-align:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-surface) 70%,transparent)}.loro-input--stepper button{height:100%;min-width:0;border:0;background:transparent;color:var(--loro-primary-700);font:inherit;font-weight:950;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease}.loro-input--stepper button:active{background:color-mix(in srgb,var(--loro-primary-500) 10%,var(--loro-surface) 90%)}.loro-input__stepper-value{display:inline-grid;grid-template-columns:minmax(1.55rem,max-content) auto;align-items:center;justify-content:center;gap:.18rem;min-width:0;overflow:hidden;padding-inline:.1rem;white-space:nowrap}.loro-input--stepper input{width:auto;min-width:1.55rem;max-width:2.75rem;overflow:hidden;padding:0;text-align:right;text-overflow:clip;white-space:nowrap;font-weight:900;font-size:clamp(.85rem,2.4vw,.98rem);letter-spacing:-.02em}.loro-input__stepper-value span{min-width:1.05rem;color:var(--loro-text-strong);font-size:clamp(.8rem,2.2vw,.92rem);font-weight:950;line-height:1}.loro-input--stepper-kg input{min-width:2.1rem;max-width:2.35rem}@media(max-width:1023.88px){.loro-input__control input{font-size:16px}.loro-input--stepper{grid-template-columns:1.65rem minmax(3.65rem,1fr) 1.65rem;min-height:2.2rem}.loro-input__stepper-value{gap:.16rem}}@keyframes loro-input-spin{to{transform:rotate(360deg)}}@keyframes loro-input-dot-blink{0%,20%{opacity:.25}50%{opacity:1}to{opacity:.25}}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], 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 }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], trailingIconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIconSize", required: false }] }], trailingAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingAriaLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", 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 }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], trailingClick: [{ type: i0.Output, args: ["trailingClick"] }], control: [{ type: i0.ViewChild, args: ['control', { isSignal: true }] }] } });
 
 const TOUCH_TAP_TOLERANCE_PX = 10;
@@ -2799,73 +2124,11 @@ class LoroProductSection {
         this.expanded.update((expanded) => !expanded);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroProductSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroProductSection, isStandalone: true, selector: "loro-product-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <section class="loro-product-section">
-      <header
-        class="loro-product-section__header"
-        [class.loro-product-section__header--collapsible]="collapsible()"
-        [attr.role]="collapsible() ? 'button' : null"
-        [attr.tabindex]="collapsible() ? 0 : null"
-        [attr.aria-expanded]="collapsible() ? expanded() : null"
-        (click)="toggle()"
-        (keydown.enter)="toggle()"
-        (keydown.space)="toggle()">
-        <span class="loro-product-section__icon">
-          <loro-icon [name]="icon()" [size]="18" [alt]="title()" color="inverse" />
-        </span>
-        <h2>{{ title() }}</h2>
-        @if (collapsible()) {
-          <span class="loro-product-section__toggle" aria-hidden="true">
-            <loro-icon
-              [name]="expanded() ? 'chevron-up' : 'chevron-down'"
-              [size]="18"
-              [alt]="expanded() ? 'Contraer' : 'Expandir'"
-              color="primary-strong" />
-          </span>
-        }
-      </header>
-      @if (!collapsible() || expanded()) {
-        <div class="loro-product-section__body">
-          <ng-content />
-        </div>
-      }
-    </section>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-product-section{display:grid;gap:.7rem}.loro-product-section__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;margin-inline:-.35rem;padding:.25rem .35rem;border-radius:.75rem;color:var(--loro-text-strong);transition:background .15s ease,transform .15s ease}.loro-product-section__header--collapsible{cursor:pointer;-webkit-tap-highlight-color:transparent}.loro-product-section__header--collapsible:hover{background:#6c3cff0e}.loro-product-section__header--collapsible:focus-visible{outline:2px solid rgba(108,60,255,.32);outline-offset:2px}.loro-product-section__header--collapsible:active{transform:scale(.995);background:#6c3cff14}.loro-product-section__icon{display:grid;width:2.1rem;height:2.1rem;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700))}h2{margin:0;font-size:1.12rem;font-weight:950;line-height:1.2}.loro-product-section__toggle{display:grid;width:2.25rem;height:2.25rem;place-items:center;border-radius:50%}.loro-product-section__body{overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:.8rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}@media(max-width:640px){.loro-product-section{gap:.25rem}.loro-product-section__header{grid-template-columns:1.2rem minmax(0,1fr) 1.35rem;gap:.35rem;margin-inline:0;padding:.08rem 0}.loro-product-section__icon{width:1.2rem;height:1.2rem}.loro-product-section__icon loro-icon,.loro-product-section__toggle loro-icon{transform:scale(.72)}h2{font-size:.72rem;line-height:1.05}.loro-product-section__toggle{display:grid;width:1.35rem;height:1.35rem;place-items:center;border:1px solid color-mix(in srgb,var(--loro-primary-500) 18%,transparent);background:color-mix(in srgb,var(--loro-primary-500) 6%,transparent)}.loro-product-section__body{border-radius:.58rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroProductSection, isStandalone: true, selector: "loro-product-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"loro-product-section\">\n      <header\n        class=\"loro-product-section__header\"\n        [class.loro-product-section__header--collapsible]=\"collapsible()\"\n        [attr.role]=\"collapsible() ? 'button' : null\"\n        [attr.tabindex]=\"collapsible() ? 0 : null\"\n        [attr.aria-expanded]=\"collapsible() ? expanded() : null\"\n        (click)=\"toggle()\"\n        (keydown.enter)=\"toggle()\"\n        (keydown.space)=\"toggle()\">\n        <span class=\"loro-product-section__icon\">\n          <loro-icon [name]=\"icon()\" [size]=\"18\" [alt]=\"title()\" color=\"inverse\" />\n        </span>\n        <h2>{{ title() }}</h2>\n        @if (collapsible()) {\n          <span class=\"loro-product-section__toggle\" aria-hidden=\"true\">\n            <loro-icon\n              [name]=\"expanded() ? 'chevron-up' : 'chevron-down'\"\n              [size]=\"18\"\n              [alt]=\"expanded() ? 'Contraer' : 'Expandir'\"\n              color=\"primary-strong\" />\n          </span>\n        }\n      </header>\n      @if (!collapsible() || expanded()) {\n        <div class=\"loro-product-section__body\">\n          <ng-content />\n        </div>\n      }\n    </section>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-product-section{display:grid;gap:.7rem}.loro-product-section__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;margin-inline:-.35rem;padding:.25rem .35rem;border-radius:.75rem;color:var(--loro-text-strong);transition:background .15s ease,transform .15s ease}.loro-product-section__header--collapsible{cursor:pointer;-webkit-tap-highlight-color:transparent}.loro-product-section__header--collapsible:hover{background:#6c3cff0e}.loro-product-section__header--collapsible:focus-visible{outline:2px solid rgba(108,60,255,.32);outline-offset:2px}.loro-product-section__header--collapsible:active{transform:scale(.995);background:#6c3cff14}.loro-product-section__icon{display:grid;width:2.1rem;height:2.1rem;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700))}h2{margin:0;font-size:1.12rem;font-weight:950;line-height:1.2}.loro-product-section__toggle{display:grid;width:2.25rem;height:2.25rem;place-items:center;border-radius:50%}.loro-product-section__body{overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:.8rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}@media(max-width:640px){.loro-product-section{gap:.25rem}.loro-product-section__header{grid-template-columns:1.2rem minmax(0,1fr) 1.35rem;gap:.35rem;margin-inline:0;padding:.08rem 0}.loro-product-section__icon{width:1.2rem;height:1.2rem}.loro-product-section__icon loro-icon,.loro-product-section__toggle loro-icon{transform:scale(.72)}h2{font-size:.72rem;line-height:1.05}.loro-product-section__toggle{display:grid;width:1.35rem;height:1.35rem;place-items:center;border:1px solid color-mix(in srgb,var(--loro-primary-500) 18%,transparent);background:color-mix(in srgb,var(--loro-primary-500) 6%,transparent)}.loro-product-section__body{border-radius:.58rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon, 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: LoroProductSection, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-product-section', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <section class="loro-product-section">
-      <header
-        class="loro-product-section__header"
-        [class.loro-product-section__header--collapsible]="collapsible()"
-        [attr.role]="collapsible() ? 'button' : null"
-        [attr.tabindex]="collapsible() ? 0 : null"
-        [attr.aria-expanded]="collapsible() ? expanded() : null"
-        (click)="toggle()"
-        (keydown.enter)="toggle()"
-        (keydown.space)="toggle()">
-        <span class="loro-product-section__icon">
-          <loro-icon [name]="icon()" [size]="18" [alt]="title()" color="inverse" />
-        </span>
-        <h2>{{ title() }}</h2>
-        @if (collapsible()) {
-          <span class="loro-product-section__toggle" aria-hidden="true">
-            <loro-icon
-              [name]="expanded() ? 'chevron-up' : 'chevron-down'"
-              [size]="18"
-              [alt]="expanded() ? 'Contraer' : 'Expandir'"
-              color="primary-strong" />
-          </span>
-        }
-      </header>
-      @if (!collapsible() || expanded()) {
-        <div class="loro-product-section__body">
-          <ng-content />
-        </div>
-      }
-    </section>
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-product-section{display:grid;gap:.7rem}.loro-product-section__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;margin-inline:-.35rem;padding:.25rem .35rem;border-radius:.75rem;color:var(--loro-text-strong);transition:background .15s ease,transform .15s ease}.loro-product-section__header--collapsible{cursor:pointer;-webkit-tap-highlight-color:transparent}.loro-product-section__header--collapsible:hover{background:#6c3cff0e}.loro-product-section__header--collapsible:focus-visible{outline:2px solid rgba(108,60,255,.32);outline-offset:2px}.loro-product-section__header--collapsible:active{transform:scale(.995);background:#6c3cff14}.loro-product-section__icon{display:grid;width:2.1rem;height:2.1rem;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700))}h2{margin:0;font-size:1.12rem;font-weight:950;line-height:1.2}.loro-product-section__toggle{display:grid;width:2.25rem;height:2.25rem;place-items:center;border-radius:50%}.loro-product-section__body{overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:.8rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}@media(max-width:640px){.loro-product-section{gap:.25rem}.loro-product-section__header{grid-template-columns:1.2rem minmax(0,1fr) 1.35rem;gap:.35rem;margin-inline:0;padding:.08rem 0}.loro-product-section__icon{width:1.2rem;height:1.2rem}.loro-product-section__icon loro-icon,.loro-product-section__toggle loro-icon{transform:scale(.72)}h2{font-size:.72rem;line-height:1.05}.loro-product-section__toggle{display:grid;width:1.35rem;height:1.35rem;place-items:center;border:1px solid color-mix(in srgb,var(--loro-primary-500) 18%,transparent);background:color-mix(in srgb,var(--loro-primary-500) 6%,transparent)}.loro-product-section__body{border-radius:.58rem}}\n"] }]
+            args: [{ selector: 'loro-product-section', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"loro-product-section\">\n      <header\n        class=\"loro-product-section__header\"\n        [class.loro-product-section__header--collapsible]=\"collapsible()\"\n        [attr.role]=\"collapsible() ? 'button' : null\"\n        [attr.tabindex]=\"collapsible() ? 0 : null\"\n        [attr.aria-expanded]=\"collapsible() ? expanded() : null\"\n        (click)=\"toggle()\"\n        (keydown.enter)=\"toggle()\"\n        (keydown.space)=\"toggle()\">\n        <span class=\"loro-product-section__icon\">\n          <loro-icon [name]=\"icon()\" [size]=\"18\" [alt]=\"title()\" color=\"inverse\" />\n        </span>\n        <h2>{{ title() }}</h2>\n        @if (collapsible()) {\n          <span class=\"loro-product-section__toggle\" aria-hidden=\"true\">\n            <loro-icon\n              [name]=\"expanded() ? 'chevron-up' : 'chevron-down'\"\n              [size]=\"18\"\n              [alt]=\"expanded() ? 'Contraer' : 'Expandir'\"\n              color=\"primary-strong\" />\n          </span>\n        }\n      </header>\n      @if (!collapsible() || expanded()) {\n        <div class=\"loro-product-section__body\">\n          <ng-content />\n        </div>\n      }\n    </section>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-product-section{display:grid;gap:.7rem}.loro-product-section__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;margin-inline:-.35rem;padding:.25rem .35rem;border-radius:.75rem;color:var(--loro-text-strong);transition:background .15s ease,transform .15s ease}.loro-product-section__header--collapsible{cursor:pointer;-webkit-tap-highlight-color:transparent}.loro-product-section__header--collapsible:hover{background:#6c3cff0e}.loro-product-section__header--collapsible:focus-visible{outline:2px solid rgba(108,60,255,.32);outline-offset:2px}.loro-product-section__header--collapsible:active{transform:scale(.995);background:#6c3cff14}.loro-product-section__icon{display:grid;width:2.1rem;height:2.1rem;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700))}h2{margin:0;font-size:1.12rem;font-weight:950;line-height:1.2}.loro-product-section__toggle{display:grid;width:2.25rem;height:2.25rem;place-items:center;border-radius:50%}.loro-product-section__body{overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:.8rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}@media(max-width:640px){.loro-product-section{gap:.25rem}.loro-product-section__header{grid-template-columns:1.2rem minmax(0,1fr) 1.35rem;gap:.35rem;margin-inline:0;padding:.08rem 0}.loro-product-section__icon{width:1.2rem;height:1.2rem}.loro-product-section__icon loro-icon,.loro-product-section__toggle loro-icon{transform:scale(.72)}h2{font-size:.72rem;line-height:1.05}.loro-product-section__toggle{display:grid;width:1.35rem;height:1.35rem;place-items:center;border:1px solid color-mix(in srgb,var(--loro-primary-500) 18%,transparent);background:color-mix(in srgb,var(--loro-primary-500) 6%,transparent)}.loro-product-section__body{border-radius:.58rem}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }] } });
 
 class LoroProfileCard {
@@ -2891,53 +2154,11 @@ class LoroProfileCard {
         this.imageFailed.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroProfileCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroProfileCard, isStandalone: true, selector: "loro-profile-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: true, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, changePhotoLabel: { classPropertyName: "changePhotoLabel", publicName: "changePhotoLabel", isSignal: true, isRequired: false, transformFunction: null }, changePhotoLoadingLabel: { classPropertyName: "changePhotoLoadingLabel", publicName: "changePhotoLoadingLabel", isSignal: true, isRequired: false, transformFunction: null }, changePhotoLoading: { classPropertyName: "changePhotoLoading", publicName: "changePhotoLoading", isSignal: true, isRequired: false, transformFunction: null }, changePhotoDisabled: { classPropertyName: "changePhotoDisabled", publicName: "changePhotoDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changePhotoClick: "changePhotoClick" }, ngImport: i0, template: `
-    <section class="loro-profile-card">
-      <div class="loro-profile-card__avatar">
-        @if (resolvedImageSrc()) {
-          <img [src]="resolvedImageSrc()!" [alt]="name()" (error)="onImageError()" />
-        } @else {
-          <loro-icon name="user" [size]="72" [alt]="name()" color="primary" />
-        }
-      </div>
-      <div class="loro-profile-card__copy">
-        <h2>{{ name() }}</h2>
-        <p>{{ email() }}</p>
-        <loro-button
-          [label]="changePhotoLoading() ? changePhotoLoadingLabel() : changePhotoLabel()"
-          icon="camera"
-          variant="outline"
-          [disabled]="changePhotoDisabled() || changePhotoLoading()"
-          [loading]="changePhotoLoading()"
-          (buttonClick)="changePhotoClick.emit()" />
-      </div>
-    </section>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-profile-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.5rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-profile-card__avatar{display:grid;width:clamp(7rem,16vw,9.5rem);aspect-ratio:1;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(180deg,#6c3cff24,#6c3cff0a)}img{width:100%;height:100%;object-fit:cover}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:clamp(2rem,4vw,2.7rem);font-weight:900;line-height:1}p{margin:.4rem 0 1rem;color:var(--loro-muted);font-size:1.05rem;font-weight:650}@media(max-width:520px){.loro-profile-card{grid-template-columns:max-content minmax(0,1fr);gap:1rem}}\n"], dependencies: [{ kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroProfileCard, isStandalone: true, selector: "loro-profile-card", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: true, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, changePhotoLabel: { classPropertyName: "changePhotoLabel", publicName: "changePhotoLabel", isSignal: true, isRequired: false, transformFunction: null }, changePhotoLoadingLabel: { classPropertyName: "changePhotoLoadingLabel", publicName: "changePhotoLoadingLabel", isSignal: true, isRequired: false, transformFunction: null }, changePhotoLoading: { classPropertyName: "changePhotoLoading", publicName: "changePhotoLoading", isSignal: true, isRequired: false, transformFunction: null }, changePhotoDisabled: { classPropertyName: "changePhotoDisabled", publicName: "changePhotoDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changePhotoClick: "changePhotoClick" }, ngImport: i0, template: "<section class=\"loro-profile-card\">\n      <div class=\"loro-profile-card__avatar\">\n        @if (resolvedImageSrc()) {\n          <img [src]=\"resolvedImageSrc()!\" [alt]=\"name()\" (error)=\"onImageError()\" />\n        } @else {\n          <loro-icon name=\"user\" [size]=\"72\" [alt]=\"name()\" color=\"primary\" />\n        }\n      </div>\n      <div class=\"loro-profile-card__copy\">\n        <h2>{{ name() }}</h2>\n        <p>{{ email() }}</p>\n        <loro-button\n          [label]=\"changePhotoLoading() ? changePhotoLoadingLabel() : changePhotoLabel()\"\n          icon=\"camera\"\n          variant=\"outline\"\n          [disabled]=\"changePhotoDisabled() || changePhotoLoading()\"\n          [loading]=\"changePhotoLoading()\"\n          (buttonClick)=\"changePhotoClick.emit()\" />\n      </div>\n    </section>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-profile-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.5rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-profile-card__avatar{display:grid;width:clamp(7rem,16vw,9.5rem);aspect-ratio:1;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(180deg,#6c3cff24,#6c3cff0a)}img{width:100%;height:100%;object-fit:cover}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:clamp(2rem,4vw,2.7rem);font-weight:900;line-height:1}p{margin:.4rem 0 1rem;color:var(--loro-muted);font-size:1.05rem;font-weight:650}@media(max-width:520px){.loro-profile-card{grid-template-columns:max-content minmax(0,1fr);gap:1rem}}\n"], dependencies: [{ kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, 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: LoroProfileCard, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-profile-card', standalone: true, imports: [LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <section class="loro-profile-card">
-      <div class="loro-profile-card__avatar">
-        @if (resolvedImageSrc()) {
-          <img [src]="resolvedImageSrc()!" [alt]="name()" (error)="onImageError()" />
-        } @else {
-          <loro-icon name="user" [size]="72" [alt]="name()" color="primary" />
-        }
-      </div>
-      <div class="loro-profile-card__copy">
-        <h2>{{ name() }}</h2>
-        <p>{{ email() }}</p>
-        <loro-button
-          [label]="changePhotoLoading() ? changePhotoLoadingLabel() : changePhotoLabel()"
-          icon="camera"
-          variant="outline"
-          [disabled]="changePhotoDisabled() || changePhotoLoading()"
-          [loading]="changePhotoLoading()"
-          (buttonClick)="changePhotoClick.emit()" />
-      </div>
-    </section>
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-profile-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.5rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-profile-card__avatar{display:grid;width:clamp(7rem,16vw,9.5rem);aspect-ratio:1;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(180deg,#6c3cff24,#6c3cff0a)}img{width:100%;height:100%;object-fit:cover}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:clamp(2rem,4vw,2.7rem);font-weight:900;line-height:1}p{margin:.4rem 0 1rem;color:var(--loro-muted);font-size:1.05rem;font-weight:650}@media(max-width:520px){.loro-profile-card{grid-template-columns:max-content minmax(0,1fr);gap:1rem}}\n"] }]
+            args: [{ selector: 'loro-profile-card', standalone: true, imports: [LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"loro-profile-card\">\n      <div class=\"loro-profile-card__avatar\">\n        @if (resolvedImageSrc()) {\n          <img [src]=\"resolvedImageSrc()!\" [alt]=\"name()\" (error)=\"onImageError()\" />\n        } @else {\n          <loro-icon name=\"user\" [size]=\"72\" [alt]=\"name()\" color=\"primary\" />\n        }\n      </div>\n      <div class=\"loro-profile-card__copy\">\n        <h2>{{ name() }}</h2>\n        <p>{{ email() }}</p>\n        <loro-button\n          [label]=\"changePhotoLoading() ? changePhotoLoadingLabel() : changePhotoLabel()\"\n          icon=\"camera\"\n          variant=\"outline\"\n          [disabled]=\"changePhotoDisabled() || changePhotoLoading()\"\n          [loading]=\"changePhotoLoading()\"\n          (buttonClick)=\"changePhotoClick.emit()\" />\n      </div>\n    </section>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-profile-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.5rem;padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft)}.loro-profile-card__avatar{display:grid;width:clamp(7rem,16vw,9.5rem);aspect-ratio:1;place-items:center;overflow:hidden;border-radius:50%;background:linear-gradient(180deg,#6c3cff24,#6c3cff0a)}img{width:100%;height:100%;object-fit:cover}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:clamp(2rem,4vw,2.7rem);font-weight:900;line-height:1}p{margin:.4rem 0 1rem;color:var(--loro-muted);font-size:1.05rem;font-weight:650}@media(max-width:520px){.loro-profile-card{grid-template-columns:max-content minmax(0,1fr);gap:1rem}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], email: [{ type: i0.Input, args: [{ isSignal: true, alias: "email", required: true }] }], imageSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageSrc", required: false }] }], changePhotoLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "changePhotoLabel", required: false }] }], changePhotoLoadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "changePhotoLoadingLabel", required: false }] }], changePhotoLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "changePhotoLoading", required: false }] }], changePhotoDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "changePhotoDisabled", required: false }] }], changePhotoClick: [{ type: i0.Output, args: ["changePhotoClick"] }] } });
 
 class LoroProfileHero {
@@ -2992,79 +2213,11 @@ class LoroStatCard {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     total = input(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroStatCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroStatCard, isStandalone: true, selector: "loro-stat-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, topImage: { classPropertyName: "topImage", publicName: "topImage", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-  @if (variant() === 'image-corner' || variant() === 'card-basket') {
-      <loro-image class="loro-stat-card__top-image" [name]="topImage() || 'loro-despensa'" [alt]="title()" width="6rem" />
-    }
-    <article class="loro-stat-card" [class]="'loro-stat-card loro-stat-card--' + variant()">
-      @if (icon()) {
-        <span class="loro-stat-card__icon">
-          <loro-icon [name]="icon()!" [size]="iconSize()" [alt]="title()" [color]="variant() === 'danger' ? 'danger' : 'primary'" />
-        </span>
-      }
-      <div class="loro-stat-card__copy">
-        @if (eyebrow() || variant() === 'image-corner') {
-          <p class="loro-stat-card__eyebrow">{{ eyebrow() || title() }}</p>
-          <h2>{{ value() || title() }}</h2>
-        }
-
-        @if (value() && variant() !== 'image-corner') {
-          <p class="loro-stat-card__title">{{ title() }}</p>
-        }
-        @if (description()) {
-          <p class="loro-stat-card__description">{{ description() }}</p>
-        }
-      </div>
-      @if (variant() === 'card-basket') {
-        <div class="shopping-summary-card__total">
-          <small>Total estimado</small>
-          <strong>{{ total().toLocaleString('es-ES', { minimumFractionDigits: 2 }) }} €</strong>
-        </div>
-      }
-      @if (image()) {
-        <loro-image class="loro-stat-card__image" [name]="image()!" [alt]="title()" width="5.8rem" />
-      }
-    </article>
-
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-stat-card__top-image{display:flex;justify-content:center;pointer-events:none}.loro-stat-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;min-height:6.8rem;padding:1.1rem 1.25rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);isolation:isolate}.loro-stat-card--tinted{background:var(--loro-surface-tinted)}.loro-stat-card--danger{background:#dc26260f}.loro-stat-card--compare-summary{grid-template-columns:3.85rem minmax(0,1fr);gap:.95rem;min-height:6rem;padding:.95rem 1.1rem;border-radius:1.35rem;background:var(--loro-surface)}.loro-stat-card--compare-inline{grid-template-columns:2.5rem minmax(0,1fr);gap:.65rem;min-height:3.7rem;padding:.7rem .9rem;border-radius:1rem;background:var(--loro-surface);box-shadow:none}.loro-stat-card--image-corner{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.85rem;min-height:11.5rem;padding:1.2rem 6.9rem 1.2rem 1.2rem;border-radius:1.35rem;background:color-mix(in srgb,var(--loro-primary-500) 4%,var(--loro-surface))}.loro-stat-card__icon{position:relative;z-index:1;display:grid;width:3.7rem;height:3.7rem;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface)}.loro-stat-card--danger .loro-stat-card__icon{background:#dc262617}.loro-stat-card--compare-summary .loro-stat-card__icon{width:3.55rem;height:3.55rem;border-radius:1rem}.loro-stat-card--compare-inline .loro-stat-card__icon{width:2.5rem;height:2.5rem;border-radius:.85rem}.loro-stat-card--image-corner .loro-stat-card__icon{width:3rem;height:3rem;border-radius:50%}.loro-stat-card__copy{position:relative;z-index:1;display:grid;align-content:center;min-width:0}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:clamp(1.45rem,4vw,2.15rem);font-weight:950;line-height:1.05;overflow-wrap:anywhere}.loro-stat-card__title{color:var(--loro-text-strong);font-size:1rem;font-weight:900}.loro-stat-card--compare-summary h2{font-size:clamp(1.25rem,4.8vw,1.75rem);line-height:.98}.loro-stat-card--compare-summary .loro-stat-card__title{font-size:clamp(.95rem,3.6vw,1.1rem);line-height:1.05}.loro-stat-card--compare-inline h2{font-size:clamp(.95rem,1.7vw,1.15rem);line-height:1}.loro-stat-card--compare-inline .loro-stat-card__title{color:var(--loro-muted-strong);font-size:.78rem;font-weight:850;line-height:1.05}.loro-stat-card--image-corner h2{font-size:clamp(1.45rem,3vw,2.1rem);line-height:1.02}.loro-stat-card--image-corner .loro-stat-card__title,.loro-stat-card--image-corner .loro-stat-card__eyebrow{color:var(--loro-text-strong);font-size:1.05rem;font-weight:900;line-height:1.12}.loro-stat-card__description,.loro-stat-card__eyebrow{margin-top:.35rem;color:var(--loro-muted);font-weight:700;line-height:1.35}.loro-stat-card__image{align-self:end}.loro-stat-card--image-corner .loro-stat-card__copy{align-content:start;gap:.5rem}.loro-stat-card--image-corner .loro-stat-card__eyebrow{margin-top:.15rem}.loro-stat-card--image-corner .loro-stat-card__description{margin-top:0;white-space:pre-line;max-width:18ch}.loro-stat-card--image-corner .loro-stat-card__image{position:absolute;top:1.55rem;right:1.2rem;align-self:start;width:4.95rem;pointer-events:none}.shopping-summary-card__total{display:grid;justify-items:end;color:var(--loro-muted);font-weight:750}.shopping-summary-card__total strong{color:var(--loro-primary-700);font-size:2rem;font-weight:950}@media(max-width:640px){.loro-stat-card{gap:.8rem;min-height:5.5rem;padding:.9rem 1rem}.loro-stat-card__icon{width:3rem;height:3rem;border-radius:.85rem}h2{font-size:clamp(1.2rem,5vw,1.55rem);line-height:1}.loro-stat-card__title{font-size:clamp(.84rem,3vw,.95rem);line-height:1.15}.loro-stat-card--compare-summary{grid-template-columns:3.1rem minmax(0,1fr);gap:.75rem;min-height:5.35rem;padding:.8rem .9rem;border-radius:1.2rem}.loro-stat-card--compare-summary .loro-stat-card__icon{width:3rem;height:3rem}.loro-stat-card--compare-summary h2{font-size:clamp(1.1rem,5vw,1.45rem)}.loro-stat-card--compare-summary .loro-stat-card__title{font-size:clamp(.88rem,3.4vw,1rem)}.loro-stat-card--compare-inline{grid-template-columns:2.2rem minmax(0,1fr);gap:.55rem;min-height:3.3rem;padding:.55rem .75rem}.loro-stat-card--compare-inline .loro-stat-card__icon{width:2.2rem;height:2.2rem;border-radius:.75rem}.loro-stat-card--compare-inline h2{font-size:1rem}.loro-stat-card--compare-inline .loro-stat-card__title{font-size:.74rem}.loro-stat-card--image-corner{min-height:8.25rem;gap:.65rem;padding:.95rem 4.6rem .95rem .95rem;border-radius:1.15rem}.loro-stat-card--image-corner .loro-stat-card__icon{width:2.45rem;height:2.45rem}.loro-stat-card--image-corner h2{font-size:clamp(1.05rem,4.8vw,1.65rem);line-height:1}.loro-stat-card--image-corner .loro-stat-card__title,.loro-stat-card--image-corner .loro-stat-card__eyebrow{font-size:.88rem;line-height:1.05}.loro-stat-card--image-corner .loro-stat-card__description{font-size:.78rem;line-height:1.16;max-width:16ch}.loro-stat-card--image-corner .loro-stat-card__image{top:1.15rem;right:.9rem;width:3.55rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroStatCard, isStandalone: true, selector: "loro-stat-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, topImage: { classPropertyName: "topImage", publicName: "topImage", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (variant() === 'image-corner' || variant() === 'card-basket') {\n      <loro-image class=\"loro-stat-card__top-image\" [name]=\"topImage() || 'loro-despensa'\" [alt]=\"title()\" width=\"6rem\" />\n    }\n    <article class=\"loro-stat-card\" [class]=\"'loro-stat-card loro-stat-card--' + variant()\">\n      @if (icon()) {\n        <span class=\"loro-stat-card__icon\">\n          <loro-icon [name]=\"icon()!\" [size]=\"iconSize()\" [alt]=\"title()\" [color]=\"variant() === 'danger' ? 'danger' : 'primary'\" />\n        </span>\n      }\n      <div class=\"loro-stat-card__copy\">\n        @if (eyebrow() || variant() === 'image-corner') {\n          <p class=\"loro-stat-card__eyebrow\">{{ eyebrow() || title() }}</p>\n          <h2>{{ value() || title() }}</h2>\n        }\n\n        @if (value() && variant() !== 'image-corner') {\n          <p class=\"loro-stat-card__title\">{{ title() }}</p>\n        }\n        @if (description()) {\n          <p class=\"loro-stat-card__description\">{{ description() }}</p>\n        }\n      </div>\n      @if (variant() === 'card-basket') {\n        <div class=\"shopping-summary-card__total\">\n          <small>Total estimado</small>\n          <strong>{{ total().toLocaleString('es-ES', { minimumFractionDigits: 2 }) }} \u20AC</strong>\n        </div>\n      }\n      @if (image()) {\n        <loro-image class=\"loro-stat-card__image\" [name]=\"image()!\" [alt]=\"title()\" width=\"5.8rem\" />\n      }\n    </article>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-stat-card__top-image{display:flex;justify-content:center;pointer-events:none}.loro-stat-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;min-height:6.8rem;padding:1.1rem 1.25rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);isolation:isolate}.loro-stat-card--tinted{background:var(--loro-surface-tinted)}.loro-stat-card--danger{background:#dc26260f}.loro-stat-card--compare-summary{grid-template-columns:3.85rem minmax(0,1fr);gap:.95rem;min-height:6rem;padding:.95rem 1.1rem;border-radius:1.35rem;background:var(--loro-surface)}.loro-stat-card--compare-inline{grid-template-columns:2.5rem minmax(0,1fr);gap:.65rem;min-height:3.7rem;padding:.7rem .9rem;border-radius:1rem;background:var(--loro-surface);box-shadow:none}.loro-stat-card--image-corner{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.85rem;min-height:11.5rem;padding:1.2rem 6.9rem 1.2rem 1.2rem;border-radius:1.35rem;background:color-mix(in srgb,var(--loro-primary-500) 4%,var(--loro-surface))}.loro-stat-card__icon{position:relative;z-index:1;display:grid;width:3.7rem;height:3.7rem;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface)}.loro-stat-card--danger .loro-stat-card__icon{background:#dc262617}.loro-stat-card--compare-summary .loro-stat-card__icon{width:3.55rem;height:3.55rem;border-radius:1rem}.loro-stat-card--compare-inline .loro-stat-card__icon{width:2.5rem;height:2.5rem;border-radius:.85rem}.loro-stat-card--image-corner .loro-stat-card__icon{width:3rem;height:3rem;border-radius:50%}.loro-stat-card__copy{position:relative;z-index:1;display:grid;align-content:center;min-width:0}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:clamp(1.45rem,4vw,2.15rem);font-weight:950;line-height:1.05;overflow-wrap:anywhere}.loro-stat-card__title{color:var(--loro-text-strong);font-size:1rem;font-weight:900}.loro-stat-card--compare-summary h2{font-size:clamp(1.25rem,4.8vw,1.75rem);line-height:.98}.loro-stat-card--compare-summary .loro-stat-card__title{font-size:clamp(.95rem,3.6vw,1.1rem);line-height:1.05}.loro-stat-card--compare-inline h2{font-size:clamp(.95rem,1.7vw,1.15rem);line-height:1}.loro-stat-card--compare-inline .loro-stat-card__title{color:var(--loro-muted-strong);font-size:.78rem;font-weight:850;line-height:1.05}.loro-stat-card--image-corner h2{font-size:clamp(1.45rem,3vw,2.1rem);line-height:1.02}.loro-stat-card--image-corner .loro-stat-card__title,.loro-stat-card--image-corner .loro-stat-card__eyebrow{color:var(--loro-text-strong);font-size:1.05rem;font-weight:900;line-height:1.12}.loro-stat-card__description,.loro-stat-card__eyebrow{margin-top:.35rem;color:var(--loro-muted);font-weight:700;line-height:1.35}.loro-stat-card__image{align-self:end}.loro-stat-card--image-corner .loro-stat-card__copy{align-content:start;gap:.5rem}.loro-stat-card--image-corner .loro-stat-card__eyebrow{margin-top:.15rem}.loro-stat-card--image-corner .loro-stat-card__description{margin-top:0;white-space:pre-line;max-width:18ch}.loro-stat-card--image-corner .loro-stat-card__image{position:absolute;top:1.55rem;right:1.2rem;align-self:start;width:4.95rem;pointer-events:none}.shopping-summary-card__total{display:grid;justify-items:end;color:var(--loro-muted);font-weight:750}.shopping-summary-card__total strong{color:var(--loro-primary-700);font-size:2rem;font-weight:950}@media(max-width:640px){.loro-stat-card{gap:.8rem;min-height:5.5rem;padding:.9rem 1rem}.loro-stat-card__icon{width:3rem;height:3rem;border-radius:.85rem}h2{font-size:clamp(1.2rem,5vw,1.55rem);line-height:1}.loro-stat-card__title{font-size:clamp(.84rem,3vw,.95rem);line-height:1.15}.loro-stat-card--compare-summary{grid-template-columns:3.1rem minmax(0,1fr);gap:.75rem;min-height:5.35rem;padding:.8rem .9rem;border-radius:1.2rem}.loro-stat-card--compare-summary .loro-stat-card__icon{width:3rem;height:3rem}.loro-stat-card--compare-summary h2{font-size:clamp(1.1rem,5vw,1.45rem)}.loro-stat-card--compare-summary .loro-stat-card__title{font-size:clamp(.88rem,3.4vw,1rem)}.loro-stat-card--compare-inline{grid-template-columns:2.2rem minmax(0,1fr);gap:.55rem;min-height:3.3rem;padding:.55rem .75rem}.loro-stat-card--compare-inline .loro-stat-card__icon{width:2.2rem;height:2.2rem;border-radius:.75rem}.loro-stat-card--compare-inline h2{font-size:1rem}.loro-stat-card--compare-inline .loro-stat-card__title{font-size:.74rem}.loro-stat-card--image-corner{min-height:8.25rem;gap:.65rem;padding:.95rem 4.6rem .95rem .95rem;border-radius:1.15rem}.loro-stat-card--image-corner .loro-stat-card__icon{width:2.45rem;height:2.45rem}.loro-stat-card--image-corner h2{font-size:clamp(1.05rem,4.8vw,1.65rem);line-height:1}.loro-stat-card--image-corner .loro-stat-card__title,.loro-stat-card--image-corner .loro-stat-card__eyebrow{font-size:.88rem;line-height:1.05}.loro-stat-card--image-corner .loro-stat-card__description{font-size:.78rem;line-height:1.16;max-width:16ch}.loro-stat-card--image-corner .loro-stat-card__image{top:1.15rem;right:.9rem;width:3.55rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroStatCard, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-stat-card', standalone: true, imports: [LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-  @if (variant() === 'image-corner' || variant() === 'card-basket') {
-      <loro-image class="loro-stat-card__top-image" [name]="topImage() || 'loro-despensa'" [alt]="title()" width="6rem" />
-    }
-    <article class="loro-stat-card" [class]="'loro-stat-card loro-stat-card--' + variant()">
-      @if (icon()) {
-        <span class="loro-stat-card__icon">
-          <loro-icon [name]="icon()!" [size]="iconSize()" [alt]="title()" [color]="variant() === 'danger' ? 'danger' : 'primary'" />
-        </span>
-      }
-      <div class="loro-stat-card__copy">
-        @if (eyebrow() || variant() === 'image-corner') {
-          <p class="loro-stat-card__eyebrow">{{ eyebrow() || title() }}</p>
-          <h2>{{ value() || title() }}</h2>
-        }
-
-        @if (value() && variant() !== 'image-corner') {
-          <p class="loro-stat-card__title">{{ title() }}</p>
-        }
-        @if (description()) {
-          <p class="loro-stat-card__description">{{ description() }}</p>
-        }
-      </div>
-      @if (variant() === 'card-basket') {
-        <div class="shopping-summary-card__total">
-          <small>Total estimado</small>
-          <strong>{{ total().toLocaleString('es-ES', { minimumFractionDigits: 2 }) }} €</strong>
-        </div>
-      }
-      @if (image()) {
-        <loro-image class="loro-stat-card__image" [name]="image()!" [alt]="title()" width="5.8rem" />
-      }
-    </article>
-
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-stat-card__top-image{display:flex;justify-content:center;pointer-events:none}.loro-stat-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;min-height:6.8rem;padding:1.1rem 1.25rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);isolation:isolate}.loro-stat-card--tinted{background:var(--loro-surface-tinted)}.loro-stat-card--danger{background:#dc26260f}.loro-stat-card--compare-summary{grid-template-columns:3.85rem minmax(0,1fr);gap:.95rem;min-height:6rem;padding:.95rem 1.1rem;border-radius:1.35rem;background:var(--loro-surface)}.loro-stat-card--compare-inline{grid-template-columns:2.5rem minmax(0,1fr);gap:.65rem;min-height:3.7rem;padding:.7rem .9rem;border-radius:1rem;background:var(--loro-surface);box-shadow:none}.loro-stat-card--image-corner{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.85rem;min-height:11.5rem;padding:1.2rem 6.9rem 1.2rem 1.2rem;border-radius:1.35rem;background:color-mix(in srgb,var(--loro-primary-500) 4%,var(--loro-surface))}.loro-stat-card__icon{position:relative;z-index:1;display:grid;width:3.7rem;height:3.7rem;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface)}.loro-stat-card--danger .loro-stat-card__icon{background:#dc262617}.loro-stat-card--compare-summary .loro-stat-card__icon{width:3.55rem;height:3.55rem;border-radius:1rem}.loro-stat-card--compare-inline .loro-stat-card__icon{width:2.5rem;height:2.5rem;border-radius:.85rem}.loro-stat-card--image-corner .loro-stat-card__icon{width:3rem;height:3rem;border-radius:50%}.loro-stat-card__copy{position:relative;z-index:1;display:grid;align-content:center;min-width:0}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:clamp(1.45rem,4vw,2.15rem);font-weight:950;line-height:1.05;overflow-wrap:anywhere}.loro-stat-card__title{color:var(--loro-text-strong);font-size:1rem;font-weight:900}.loro-stat-card--compare-summary h2{font-size:clamp(1.25rem,4.8vw,1.75rem);line-height:.98}.loro-stat-card--compare-summary .loro-stat-card__title{font-size:clamp(.95rem,3.6vw,1.1rem);line-height:1.05}.loro-stat-card--compare-inline h2{font-size:clamp(.95rem,1.7vw,1.15rem);line-height:1}.loro-stat-card--compare-inline .loro-stat-card__title{color:var(--loro-muted-strong);font-size:.78rem;font-weight:850;line-height:1.05}.loro-stat-card--image-corner h2{font-size:clamp(1.45rem,3vw,2.1rem);line-height:1.02}.loro-stat-card--image-corner .loro-stat-card__title,.loro-stat-card--image-corner .loro-stat-card__eyebrow{color:var(--loro-text-strong);font-size:1.05rem;font-weight:900;line-height:1.12}.loro-stat-card__description,.loro-stat-card__eyebrow{margin-top:.35rem;color:var(--loro-muted);font-weight:700;line-height:1.35}.loro-stat-card__image{align-self:end}.loro-stat-card--image-corner .loro-stat-card__copy{align-content:start;gap:.5rem}.loro-stat-card--image-corner .loro-stat-card__eyebrow{margin-top:.15rem}.loro-stat-card--image-corner .loro-stat-card__description{margin-top:0;white-space:pre-line;max-width:18ch}.loro-stat-card--image-corner .loro-stat-card__image{position:absolute;top:1.55rem;right:1.2rem;align-self:start;width:4.95rem;pointer-events:none}.shopping-summary-card__total{display:grid;justify-items:end;color:var(--loro-muted);font-weight:750}.shopping-summary-card__total strong{color:var(--loro-primary-700);font-size:2rem;font-weight:950}@media(max-width:640px){.loro-stat-card{gap:.8rem;min-height:5.5rem;padding:.9rem 1rem}.loro-stat-card__icon{width:3rem;height:3rem;border-radius:.85rem}h2{font-size:clamp(1.2rem,5vw,1.55rem);line-height:1}.loro-stat-card__title{font-size:clamp(.84rem,3vw,.95rem);line-height:1.15}.loro-stat-card--compare-summary{grid-template-columns:3.1rem minmax(0,1fr);gap:.75rem;min-height:5.35rem;padding:.8rem .9rem;border-radius:1.2rem}.loro-stat-card--compare-summary .loro-stat-card__icon{width:3rem;height:3rem}.loro-stat-card--compare-summary h2{font-size:clamp(1.1rem,5vw,1.45rem)}.loro-stat-card--compare-summary .loro-stat-card__title{font-size:clamp(.88rem,3.4vw,1rem)}.loro-stat-card--compare-inline{grid-template-columns:2.2rem minmax(0,1fr);gap:.55rem;min-height:3.3rem;padding:.55rem .75rem}.loro-stat-card--compare-inline .loro-stat-card__icon{width:2.2rem;height:2.2rem;border-radius:.75rem}.loro-stat-card--compare-inline h2{font-size:1rem}.loro-stat-card--compare-inline .loro-stat-card__title{font-size:.74rem}.loro-stat-card--image-corner{min-height:8.25rem;gap:.65rem;padding:.95rem 4.6rem .95rem .95rem;border-radius:1.15rem}.loro-stat-card--image-corner .loro-stat-card__icon{width:2.45rem;height:2.45rem}.loro-stat-card--image-corner h2{font-size:clamp(1.05rem,4.8vw,1.65rem);line-height:1}.loro-stat-card--image-corner .loro-stat-card__title,.loro-stat-card--image-corner .loro-stat-card__eyebrow{font-size:.88rem;line-height:1.05}.loro-stat-card--image-corner .loro-stat-card__description{font-size:.78rem;line-height:1.16;max-width:16ch}.loro-stat-card--image-corner .loro-stat-card__image{top:1.15rem;right:.9rem;width:3.55rem}}\n"] }]
+            args: [{ selector: 'loro-stat-card', standalone: true, imports: [LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (variant() === 'image-corner' || variant() === 'card-basket') {\n      <loro-image class=\"loro-stat-card__top-image\" [name]=\"topImage() || 'loro-despensa'\" [alt]=\"title()\" width=\"6rem\" />\n    }\n    <article class=\"loro-stat-card\" [class]=\"'loro-stat-card loro-stat-card--' + variant()\">\n      @if (icon()) {\n        <span class=\"loro-stat-card__icon\">\n          <loro-icon [name]=\"icon()!\" [size]=\"iconSize()\" [alt]=\"title()\" [color]=\"variant() === 'danger' ? 'danger' : 'primary'\" />\n        </span>\n      }\n      <div class=\"loro-stat-card__copy\">\n        @if (eyebrow() || variant() === 'image-corner') {\n          <p class=\"loro-stat-card__eyebrow\">{{ eyebrow() || title() }}</p>\n          <h2>{{ value() || title() }}</h2>\n        }\n\n        @if (value() && variant() !== 'image-corner') {\n          <p class=\"loro-stat-card__title\">{{ title() }}</p>\n        }\n        @if (description()) {\n          <p class=\"loro-stat-card__description\">{{ description() }}</p>\n        }\n      </div>\n      @if (variant() === 'card-basket') {\n        <div class=\"shopping-summary-card__total\">\n          <small>Total estimado</small>\n          <strong>{{ total().toLocaleString('es-ES', { minimumFractionDigits: 2 }) }} \u20AC</strong>\n        </div>\n      }\n      @if (image()) {\n        <loro-image class=\"loro-stat-card__image\" [name]=\"image()!\" [alt]=\"title()\" width=\"5.8rem\" />\n      }\n    </article>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-stat-card__top-image{display:flex;justify-content:center;pointer-events:none}.loro-stat-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;min-height:6.8rem;padding:1.1rem 1.25rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-card);background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);isolation:isolate}.loro-stat-card--tinted{background:var(--loro-surface-tinted)}.loro-stat-card--danger{background:#dc26260f}.loro-stat-card--compare-summary{grid-template-columns:3.85rem minmax(0,1fr);gap:.95rem;min-height:6rem;padding:.95rem 1.1rem;border-radius:1.35rem;background:var(--loro-surface)}.loro-stat-card--compare-inline{grid-template-columns:2.5rem minmax(0,1fr);gap:.65rem;min-height:3.7rem;padding:.7rem .9rem;border-radius:1rem;background:var(--loro-surface);box-shadow:none}.loro-stat-card--image-corner{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.85rem;min-height:11.5rem;padding:1.2rem 6.9rem 1.2rem 1.2rem;border-radius:1.35rem;background:color-mix(in srgb,var(--loro-primary-500) 4%,var(--loro-surface))}.loro-stat-card__icon{position:relative;z-index:1;display:grid;width:3.7rem;height:3.7rem;place-items:center;border-radius:1rem;background:var(--loro-brand-tint-surface)}.loro-stat-card--danger .loro-stat-card__icon{background:#dc262617}.loro-stat-card--compare-summary .loro-stat-card__icon{width:3.55rem;height:3.55rem;border-radius:1rem}.loro-stat-card--compare-inline .loro-stat-card__icon{width:2.5rem;height:2.5rem;border-radius:.85rem}.loro-stat-card--image-corner .loro-stat-card__icon{width:3rem;height:3rem;border-radius:50%}.loro-stat-card__copy{position:relative;z-index:1;display:grid;align-content:center;min-width:0}h2,p{margin:0}h2{color:var(--loro-text-strong);font-size:clamp(1.45rem,4vw,2.15rem);font-weight:950;line-height:1.05;overflow-wrap:anywhere}.loro-stat-card__title{color:var(--loro-text-strong);font-size:1rem;font-weight:900}.loro-stat-card--compare-summary h2{font-size:clamp(1.25rem,4.8vw,1.75rem);line-height:.98}.loro-stat-card--compare-summary .loro-stat-card__title{font-size:clamp(.95rem,3.6vw,1.1rem);line-height:1.05}.loro-stat-card--compare-inline h2{font-size:clamp(.95rem,1.7vw,1.15rem);line-height:1}.loro-stat-card--compare-inline .loro-stat-card__title{color:var(--loro-muted-strong);font-size:.78rem;font-weight:850;line-height:1.05}.loro-stat-card--image-corner h2{font-size:clamp(1.45rem,3vw,2.1rem);line-height:1.02}.loro-stat-card--image-corner .loro-stat-card__title,.loro-stat-card--image-corner .loro-stat-card__eyebrow{color:var(--loro-text-strong);font-size:1.05rem;font-weight:900;line-height:1.12}.loro-stat-card__description,.loro-stat-card__eyebrow{margin-top:.35rem;color:var(--loro-muted);font-weight:700;line-height:1.35}.loro-stat-card__image{align-self:end}.loro-stat-card--image-corner .loro-stat-card__copy{align-content:start;gap:.5rem}.loro-stat-card--image-corner .loro-stat-card__eyebrow{margin-top:.15rem}.loro-stat-card--image-corner .loro-stat-card__description{margin-top:0;white-space:pre-line;max-width:18ch}.loro-stat-card--image-corner .loro-stat-card__image{position:absolute;top:1.55rem;right:1.2rem;align-self:start;width:4.95rem;pointer-events:none}.shopping-summary-card__total{display:grid;justify-items:end;color:var(--loro-muted);font-weight:750}.shopping-summary-card__total strong{color:var(--loro-primary-700);font-size:2rem;font-weight:950}@media(max-width:640px){.loro-stat-card{gap:.8rem;min-height:5.5rem;padding:.9rem 1rem}.loro-stat-card__icon{width:3rem;height:3rem;border-radius:.85rem}h2{font-size:clamp(1.2rem,5vw,1.55rem);line-height:1}.loro-stat-card__title{font-size:clamp(.84rem,3vw,.95rem);line-height:1.15}.loro-stat-card--compare-summary{grid-template-columns:3.1rem minmax(0,1fr);gap:.75rem;min-height:5.35rem;padding:.8rem .9rem;border-radius:1.2rem}.loro-stat-card--compare-summary .loro-stat-card__icon{width:3rem;height:3rem}.loro-stat-card--compare-summary h2{font-size:clamp(1.1rem,5vw,1.45rem)}.loro-stat-card--compare-summary .loro-stat-card__title{font-size:clamp(.88rem,3.4vw,1rem)}.loro-stat-card--compare-inline{grid-template-columns:2.2rem minmax(0,1fr);gap:.55rem;min-height:3.3rem;padding:.55rem .75rem}.loro-stat-card--compare-inline .loro-stat-card__icon{width:2.2rem;height:2.2rem;border-radius:.75rem}.loro-stat-card--compare-inline h2{font-size:1rem}.loro-stat-card--compare-inline .loro-stat-card__title{font-size:.74rem}.loro-stat-card--image-corner{min-height:8.25rem;gap:.65rem;padding:.95rem 4.6rem .95rem .95rem;border-radius:1.15rem}.loro-stat-card--image-corner .loro-stat-card__icon{width:2.45rem;height:2.45rem}.loro-stat-card--image-corner h2{font-size:clamp(1.05rem,4.8vw,1.65rem);line-height:1}.loro-stat-card--image-corner .loro-stat-card__title,.loro-stat-card--image-corner .loro-stat-card__eyebrow{font-size:.88rem;line-height:1.05}.loro-stat-card--image-corner .loro-stat-card__description{font-size:.78rem;line-height:1.16;max-width:16ch}.loro-stat-card--image-corner .loro-stat-card__image{top:1.15rem;right:.9rem;width:3.55rem}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], eyebrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyebrow", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], topImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "topImage", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }] } });
 
 class LoroStoreRankCard {
@@ -3076,53 +2229,11 @@ class LoroStoreRankCard {
     best = input(false, ...(ngDevMode ? [{ debugName: "best" }] : /* istanbul ignore next */ []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroStoreRankCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroStoreRankCard, isStandalone: true, selector: "loro-store-rank-card", inputs: { rank: { classPropertyName: "rank", publicName: "rank", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: true, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, logoName: { classPropertyName: "logoName", publicName: "logoName", isSignal: true, isRequired: false, transformFunction: null }, best: { classPropertyName: "best", publicName: "best", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <article
-      class="loro-store-rank-card"
-      [class.loro-store-rank-card--best]="best()"
-      [class.loro-store-rank-card--compact]="variant() === 'compact'">
-      @if (variant() !== 'compact') {
-        <span class="loro-store-rank-card__rank">{{ rank() }}</span>
-      }
-      @if (logoName()) {
-        <loro-image class="loro-store-rank-card__logo" [name]="logoName()!" [alt]="name()" width="100%" height="100%" fit="contain" />
-      } @else {
-        <span class="loro-store-rank-card__mark">{{ name().slice(0, 3) }}</span>
-      }
-      @if (variant() !== 'compact') {
-        <h3>{{ name() }}</h3>
-      }
-      <strong>{{ price() | number: '1.2-2' }} €</strong>
-      @if (variant() !== 'compact') {
-        <loro-badge [label]="best() ? 'Mejor precio' : '+' + (delta() | number: '1.2-2') + ' €'" [variant]="best() ? 'success' : 'info'" />
-      }
-    </article>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-store-rank-card{position:relative;display:grid;justify-items:center;align-content:center;gap:.45rem;min-height:10.8rem;padding:1.4rem 1rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);text-align:center}.loro-store-rank-card--compact{gap:.25rem;min-height:4.9rem;padding:.7rem .8rem;border-radius:.95rem;box-shadow:none}.loro-store-rank-card__rank{position:absolute;top:.85rem;left:.85rem;display:grid;width:2rem;height:2rem;place-items:center;border-radius:50%;background:var(--loro-surface-muted);color:var(--loro-primary-700);font-weight:950}.loro-store-rank-card--best .loro-store-rank-card__rank{background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff}.loro-store-rank-card__logo{display:block;width:4.5rem;height:2.6rem}.loro-store-rank-card--compact .loro-store-rank-card__logo{width:3rem;height:1.8rem}.loro-store-rank-card__logo ::ng-deep img{width:100%;height:100%;object-fit:contain}.loro-store-rank-card__mark{color:var(--loro-primary-700);font-size:1.5rem;font-weight:950}h3,strong{margin:0;color:var(--loro-text-strong)}h3{font-size:1.05rem;font-weight:900;line-height:1.12;overflow-wrap:anywhere}strong{color:var(--loro-primary-700);font-size:clamp(1.35rem,3vw,1.8rem);font-weight:950;line-height:1;white-space:nowrap}.loro-store-rank-card--compact strong{font-size:clamp(1rem,2.1vw,1.2rem);line-height:1}@media(max-width:640px){.loro-store-rank-card{gap:.35rem;min-height:8.9rem;padding:1rem .65rem .85rem;border-radius:.9rem}.loro-store-rank-card__rank{top:.6rem;left:.6rem;width:1.75rem;height:1.75rem;font-size:.95rem}.loro-store-rank-card__logo{width:3.25rem;height:2rem}.loro-store-rank-card--compact{min-height:4.55rem;padding:.55rem .65rem}.loro-store-rank-card--compact .loro-store-rank-card__logo{width:2.7rem;height:1.6rem}.loro-store-rank-card--compact strong{font-size:clamp(.92rem,3.8vw,1.08rem)}h3{font-size:clamp(.9rem,3.6vw,1rem)}strong{font-size:clamp(1.15rem,5vw,1.55rem)}}\n"], dependencies: [{ kind: "component", type: LoroBadge, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroStoreRankCard, isStandalone: true, selector: "loro-store-rank-card", inputs: { rank: { classPropertyName: "rank", publicName: "rank", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, price: { classPropertyName: "price", publicName: "price", isSignal: true, isRequired: true, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, logoName: { classPropertyName: "logoName", publicName: "logoName", isSignal: true, isRequired: false, transformFunction: null }, best: { classPropertyName: "best", publicName: "best", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n      class=\"loro-store-rank-card\"\n      [class.loro-store-rank-card--best]=\"best()\"\n      [class.loro-store-rank-card--compact]=\"variant() === 'compact'\">\n      @if (variant() !== 'compact') {\n        <span class=\"loro-store-rank-card__rank\">{{ rank() }}</span>\n      }\n      @if (logoName()) {\n        <loro-image class=\"loro-store-rank-card__logo\" [name]=\"logoName()!\" [alt]=\"name()\" width=\"100%\" height=\"100%\" fit=\"contain\" />\n      } @else {\n        <span class=\"loro-store-rank-card__mark\">{{ name().slice(0, 3) }}</span>\n      }\n      @if (variant() !== 'compact') {\n        <h3>{{ name() }}</h3>\n      }\n      <strong>{{ price() | number: '1.2-2' }} \u20AC</strong>\n      @if (variant() !== 'compact') {\n        <loro-badge [label]=\"best() ? 'Mejor precio' : '+' + (delta() | number: '1.2-2') + ' \u20AC'\" [variant]=\"best() ? 'success' : 'info'\" />\n      }\n    </article>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-store-rank-card{position:relative;display:grid;justify-items:center;align-content:center;gap:.45rem;min-height:10.8rem;padding:1.4rem 1rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);text-align:center}.loro-store-rank-card--compact{gap:.25rem;min-height:4.9rem;padding:.7rem .8rem;border-radius:.95rem;box-shadow:none}.loro-store-rank-card__rank{position:absolute;top:.85rem;left:.85rem;display:grid;width:2rem;height:2rem;place-items:center;border-radius:50%;background:var(--loro-surface-muted);color:var(--loro-primary-700);font-weight:950}.loro-store-rank-card--best .loro-store-rank-card__rank{background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff}.loro-store-rank-card__logo{display:block;width:4.5rem;height:2.6rem}.loro-store-rank-card--compact .loro-store-rank-card__logo{width:3rem;height:1.8rem}.loro-store-rank-card__logo ::ng-deep img{width:100%;height:100%;object-fit:contain}.loro-store-rank-card__mark{color:var(--loro-primary-700);font-size:1.5rem;font-weight:950}h3,strong{margin:0;color:var(--loro-text-strong)}h3{font-size:1.05rem;font-weight:900;line-height:1.12;overflow-wrap:anywhere}strong{color:var(--loro-primary-700);font-size:clamp(1.35rem,3vw,1.8rem);font-weight:950;line-height:1;white-space:nowrap}.loro-store-rank-card--compact strong{font-size:clamp(1rem,2.1vw,1.2rem);line-height:1}@media(max-width:640px){.loro-store-rank-card{gap:.35rem;min-height:8.9rem;padding:1rem .65rem .85rem;border-radius:.9rem}.loro-store-rank-card__rank{top:.6rem;left:.6rem;width:1.75rem;height:1.75rem;font-size:.95rem}.loro-store-rank-card__logo{width:3.25rem;height:2rem}.loro-store-rank-card--compact{min-height:4.55rem;padding:.55rem .65rem}.loro-store-rank-card--compact .loro-store-rank-card__logo{width:2.7rem;height:1.6rem}.loro-store-rank-card--compact strong{font-size:clamp(.92rem,3.8vw,1.08rem)}h3{font-size:clamp(.9rem,3.6vw,1rem)}strong{font-size:clamp(1.15rem,5vw,1.55rem)}}\n"], dependencies: [{ kind: "component", type: LoroBadge, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroStoreRankCard, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-store-rank-card', standalone: true, imports: [DecimalPipe, LoroBadge, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <article
-      class="loro-store-rank-card"
-      [class.loro-store-rank-card--best]="best()"
-      [class.loro-store-rank-card--compact]="variant() === 'compact'">
-      @if (variant() !== 'compact') {
-        <span class="loro-store-rank-card__rank">{{ rank() }}</span>
-      }
-      @if (logoName()) {
-        <loro-image class="loro-store-rank-card__logo" [name]="logoName()!" [alt]="name()" width="100%" height="100%" fit="contain" />
-      } @else {
-        <span class="loro-store-rank-card__mark">{{ name().slice(0, 3) }}</span>
-      }
-      @if (variant() !== 'compact') {
-        <h3>{{ name() }}</h3>
-      }
-      <strong>{{ price() | number: '1.2-2' }} €</strong>
-      @if (variant() !== 'compact') {
-        <loro-badge [label]="best() ? 'Mejor precio' : '+' + (delta() | number: '1.2-2') + ' €'" [variant]="best() ? 'success' : 'info'" />
-      }
-    </article>
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-store-rank-card{position:relative;display:grid;justify-items:center;align-content:center;gap:.45rem;min-height:10.8rem;padding:1.4rem 1rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);text-align:center}.loro-store-rank-card--compact{gap:.25rem;min-height:4.9rem;padding:.7rem .8rem;border-radius:.95rem;box-shadow:none}.loro-store-rank-card__rank{position:absolute;top:.85rem;left:.85rem;display:grid;width:2rem;height:2rem;place-items:center;border-radius:50%;background:var(--loro-surface-muted);color:var(--loro-primary-700);font-weight:950}.loro-store-rank-card--best .loro-store-rank-card__rank{background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff}.loro-store-rank-card__logo{display:block;width:4.5rem;height:2.6rem}.loro-store-rank-card--compact .loro-store-rank-card__logo{width:3rem;height:1.8rem}.loro-store-rank-card__logo ::ng-deep img{width:100%;height:100%;object-fit:contain}.loro-store-rank-card__mark{color:var(--loro-primary-700);font-size:1.5rem;font-weight:950}h3,strong{margin:0;color:var(--loro-text-strong)}h3{font-size:1.05rem;font-weight:900;line-height:1.12;overflow-wrap:anywhere}strong{color:var(--loro-primary-700);font-size:clamp(1.35rem,3vw,1.8rem);font-weight:950;line-height:1;white-space:nowrap}.loro-store-rank-card--compact strong{font-size:clamp(1rem,2.1vw,1.2rem);line-height:1}@media(max-width:640px){.loro-store-rank-card{gap:.35rem;min-height:8.9rem;padding:1rem .65rem .85rem;border-radius:.9rem}.loro-store-rank-card__rank{top:.6rem;left:.6rem;width:1.75rem;height:1.75rem;font-size:.95rem}.loro-store-rank-card__logo{width:3.25rem;height:2rem}.loro-store-rank-card--compact{min-height:4.55rem;padding:.55rem .65rem}.loro-store-rank-card--compact .loro-store-rank-card__logo{width:2.7rem;height:1.6rem}.loro-store-rank-card--compact strong{font-size:clamp(.92rem,3.8vw,1.08rem)}h3{font-size:clamp(.9rem,3.6vw,1rem)}strong{font-size:clamp(1.15rem,5vw,1.55rem)}}\n"] }]
+            args: [{ selector: 'loro-store-rank-card', standalone: true, imports: [DecimalPipe, LoroBadge, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n      class=\"loro-store-rank-card\"\n      [class.loro-store-rank-card--best]=\"best()\"\n      [class.loro-store-rank-card--compact]=\"variant() === 'compact'\">\n      @if (variant() !== 'compact') {\n        <span class=\"loro-store-rank-card__rank\">{{ rank() }}</span>\n      }\n      @if (logoName()) {\n        <loro-image class=\"loro-store-rank-card__logo\" [name]=\"logoName()!\" [alt]=\"name()\" width=\"100%\" height=\"100%\" fit=\"contain\" />\n      } @else {\n        <span class=\"loro-store-rank-card__mark\">{{ name().slice(0, 3) }}</span>\n      }\n      @if (variant() !== 'compact') {\n        <h3>{{ name() }}</h3>\n      }\n      <strong>{{ price() | number: '1.2-2' }} \u20AC</strong>\n      @if (variant() !== 'compact') {\n        <loro-badge [label]=\"best() ? 'Mejor precio' : '+' + (delta() | number: '1.2-2') + ' \u20AC'\" [variant]=\"best() ? 'success' : 'info'\" />\n      }\n    </article>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-store-rank-card{position:relative;display:grid;justify-items:center;align-content:center;gap:.45rem;min-height:10.8rem;padding:1.4rem 1rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-soft);text-align:center}.loro-store-rank-card--compact{gap:.25rem;min-height:4.9rem;padding:.7rem .8rem;border-radius:.95rem;box-shadow:none}.loro-store-rank-card__rank{position:absolute;top:.85rem;left:.85rem;display:grid;width:2rem;height:2rem;place-items:center;border-radius:50%;background:var(--loro-surface-muted);color:var(--loro-primary-700);font-weight:950}.loro-store-rank-card--best .loro-store-rank-card__rank{background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff}.loro-store-rank-card__logo{display:block;width:4.5rem;height:2.6rem}.loro-store-rank-card--compact .loro-store-rank-card__logo{width:3rem;height:1.8rem}.loro-store-rank-card__logo ::ng-deep img{width:100%;height:100%;object-fit:contain}.loro-store-rank-card__mark{color:var(--loro-primary-700);font-size:1.5rem;font-weight:950}h3,strong{margin:0;color:var(--loro-text-strong)}h3{font-size:1.05rem;font-weight:900;line-height:1.12;overflow-wrap:anywhere}strong{color:var(--loro-primary-700);font-size:clamp(1.35rem,3vw,1.8rem);font-weight:950;line-height:1;white-space:nowrap}.loro-store-rank-card--compact strong{font-size:clamp(1rem,2.1vw,1.2rem);line-height:1}@media(max-width:640px){.loro-store-rank-card{gap:.35rem;min-height:8.9rem;padding:1rem .65rem .85rem;border-radius:.9rem}.loro-store-rank-card__rank{top:.6rem;left:.6rem;width:1.75rem;height:1.75rem;font-size:.95rem}.loro-store-rank-card__logo{width:3.25rem;height:2rem}.loro-store-rank-card--compact{min-height:4.55rem;padding:.55rem .65rem}.loro-store-rank-card--compact .loro-store-rank-card__logo{width:2.7rem;height:1.6rem}.loro-store-rank-card--compact strong{font-size:clamp(.92rem,3.8vw,1.08rem)}h3{font-size:clamp(.9rem,3.6vw,1rem)}strong{font-size:clamp(1.15rem,5vw,1.55rem)}}\n"] }]
         }], propDecorators: { rank: [{ type: i0.Input, args: [{ isSignal: true, alias: "rank", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], price: [{ type: i0.Input, args: [{ isSignal: true, alias: "price", required: true }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], logoName: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoName", required: false }] }], best: [{ type: i0.Input, args: [{ isSignal: true, alias: "best", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 class LoroSummaryBar {
@@ -3138,77 +2249,11 @@ class LoroSummaryBar {
     primaryAction = output();
     secondaryAction = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSummaryBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroSummaryBar, isStandalone: true, selector: "loro-summary-bar", inputs: { totalLabel: { classPropertyName: "totalLabel", publicName: "totalLabel", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, primaryLabel: { classPropertyName: "primaryLabel", publicName: "primaryLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryLabel: { classPropertyName: "secondaryLabel", publicName: "secondaryLabel", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, leftImage: { classPropertyName: "leftImage", publicName: "leftImage", isSignal: true, isRequired: false, transformFunction: null }, rightImage: { classPropertyName: "rightImage", publicName: "rightImage", isSignal: true, isRequired: false, transformFunction: null }, primaryDisabled: { classPropertyName: "primaryDisabled", publicName: "primaryDisabled", isSignal: true, isRequired: false, transformFunction: null }, secondaryDisabled: { classPropertyName: "secondaryDisabled", publicName: "secondaryDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, ngImport: i0, template: `
-    <aside class="loro-summary-bar">
-      <div class="loro-summary-bar__total">
-        <small>{{ totalLabel() }}</small>
-        <strong>{{ total().toLocaleString('es-ES', { minimumFractionDigits: 2 }) }} €</strong>
-        @if (secondaryLabel()) {
-          <loro-button
-            [label]="secondaryLabel()"
-            icon="tag"
-            [iconSize]="20"
-            variant="outline"
-            [disabled]="secondaryDisabled()"
-            (buttonClick)="secondaryAction.emit()" />
-        }
-      </div>
-      <div class="loro-summary-bar__flow" aria-hidden="true">
-        <loro-image [name]="leftImage()" alt="" width="5.9rem" />
-        <loro-icon name="arrow-right" [size]="34" alt="" color="primary" />
-        <loro-image [name]="rightImage()" alt="" width="5.25rem" />
-      </div>
-      <div class="loro-summary-bar__action">
-        <loro-button
-          [label]="primaryLabel()"
-          icon="check"
-          [iconSize]="21"
-          [fullWidth]="true"
-          [disabled]="primaryDisabled()"
-          (buttonClick)="primaryAction.emit()" />
-        @if (helper()) {
-          <small>{{ helper() }}</small>
-        }
-      </div>
-    </aside>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-summary-bar{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:1.45rem;width:100%;min-width:0;min-height:6.75rem;padding:.75rem 1.9rem;box-sizing:border-box;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-panel)}.loro-summary-bar__total{display:grid;grid-template-columns:minmax(7rem,auto) minmax(9.5rem,auto);align-items:end;justify-content:start;gap:.25rem 1.6rem;min-width:0}.loro-summary-bar__total loro-button{grid-row:1 / span 2;grid-column:2;align-self:center;--loro-summary-button-min-height: 2.9rem;--loro-summary-button-padding: .65rem 1rem;--loro-summary-button-font-size: 1rem}.loro-summary-bar__action{display:grid;justify-items:stretch;gap:.45rem;min-width:0;max-width:100%;overflow:hidden}small{color:var(--loro-muted);font-size:.92rem;font-weight:750;line-height:1.3}strong{color:var(--loro-primary-700);font-size:2.15rem;font-weight:950;line-height:1;white-space:nowrap}.loro-summary-bar__flow{display:inline-grid;grid-template-columns:auto auto auto;align-items:center;justify-content:center;gap:clamp(.55rem,1vw,1rem);min-width:0;padding-inline:clamp(.75rem,1.8vw,2.1rem);border-left:1px solid var(--loro-border-subtle);color:var(--loro-primary-700);font-size:2rem;font-weight:900}.loro-summary-bar__action loro-button{min-width:0;--loro-summary-button-min-height: 2.65rem;--loro-summary-button-padding: .62rem 1rem;--loro-summary-button-font-size: 1rem}.loro-summary-bar loro-button{--loro-button-min-height: var(--loro-summary-button-min-height);--loro-button-padding: var(--loro-summary-button-padding);--loro-button-radius: .55rem;--loro-button-font-size: var(--loro-summary-button-font-size)}:host ::ng-deep .loro-summary-bar loro-button .loro-button{max-width:100%;min-width:0}:host ::ng-deep .loro-summary-bar loro-button .loro-button span{min-width:0;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .loro-summary-bar__action loro-button,:host ::ng-deep .loro-summary-bar__action loro-button .loro-button{width:100%}.loro-summary-bar__action small{min-width:0;max-width:100%;overflow-wrap:anywhere;text-align:center}@media(max-width:1023.88px){.loro-summary-bar{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-areas:\"total flow\" \"total action\";align-items:center;gap:.55rem .8rem;min-height:0;padding:.85rem .95rem;border-radius:1.15rem}.loro-summary-bar__total{grid-area:total;grid-template-columns:1fr;align-content:center;justify-items:start;gap:.36rem;min-width:0;height:100%;padding-right:.65rem;border-right:1px solid var(--loro-border-subtle)}.loro-summary-bar__total loro-button{grid-row:auto;grid-column:auto;width:100%;max-width:9.6rem;--loro-summary-button-min-height: 2.2rem;--loro-summary-button-padding: .48rem .6rem;--loro-summary-button-font-size: .82rem}.loro-summary-bar__flow{grid-area:flow;display:inline-grid;justify-self:center;width:100%;max-width:10.75rem;gap:.32rem;padding-inline:0;border-left:0}.loro-summary-bar__flow loro-image:first-child{width:4.35rem}.loro-summary-bar__flow loro-image:last-child{width:3.85rem}.loro-summary-bar__action{grid-area:action;justify-items:stretch;gap:.28rem;min-width:0;width:100%}.loro-summary-bar__action loro-button{display:block;width:100%;min-width:0;--loro-summary-button-min-height: 2.35rem;--loro-summary-button-padding: .5rem .55rem;--loro-summary-button-font-size: .82rem}small{font-size:.82rem}strong{font-size:clamp(1.45rem,5.6vw,1.9rem)}}@media(max-width:640px){.loro-summary-bar{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:.48rem .62rem;padding:.78rem .82rem}.loro-summary-bar__total loro-button{max-width:8.9rem;--loro-summary-button-min-height: 2.1rem;--loro-summary-button-padding: .44rem .52rem;--loro-summary-button-font-size: .74rem}.loro-summary-bar__flow loro-image:first-child{width:3.45rem}.loro-summary-bar__flow loro-image:last-child{width:3.2rem}.loro-summary-bar__flow{max-width:8.45rem;gap:.2rem}.loro-summary-bar__flow loro-icon{transform:scale(.78)}.loro-summary-bar__action loro-button{--loro-summary-button-min-height: 2.2rem;--loro-summary-button-padding: .48rem .44rem;--loro-summary-button-font-size: .74rem}small{font-size:.72rem}strong{font-size:clamp(1.28rem,7vw,1.6rem)}}@media(max-width:430px){.loro-summary-bar{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);padding:.72rem}.loro-summary-bar__total{padding-right:.5rem}.loro-summary-bar__total loro-button{max-width:7.8rem;--loro-summary-button-font-size: .68rem}.loro-summary-bar__action loro-button{--loro-summary-button-font-size: .68rem}.loro-summary-bar__flow{max-width:7.6rem}.loro-summary-bar__flow loro-image:first-child{width:3rem}.loro-summary-bar__flow loro-image:last-child{width:2.85rem}}\n"], dependencies: [{ kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroSummaryBar, isStandalone: true, selector: "loro-summary-bar", inputs: { totalLabel: { classPropertyName: "totalLabel", publicName: "totalLabel", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, primaryLabel: { classPropertyName: "primaryLabel", publicName: "primaryLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryLabel: { classPropertyName: "secondaryLabel", publicName: "secondaryLabel", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", isSignal: true, isRequired: false, transformFunction: null }, leftImage: { classPropertyName: "leftImage", publicName: "leftImage", isSignal: true, isRequired: false, transformFunction: null }, rightImage: { classPropertyName: "rightImage", publicName: "rightImage", isSignal: true, isRequired: false, transformFunction: null }, primaryDisabled: { classPropertyName: "primaryDisabled", publicName: "primaryDisabled", isSignal: true, isRequired: false, transformFunction: null }, secondaryDisabled: { classPropertyName: "secondaryDisabled", publicName: "secondaryDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, ngImport: i0, template: "<aside class=\"loro-summary-bar\">\n      <div class=\"loro-summary-bar__total\">\n        <small>{{ totalLabel() }}</small>\n        <strong>{{ total().toLocaleString('es-ES', { minimumFractionDigits: 2 }) }} \u20AC</strong>\n        @if (secondaryLabel()) {\n          <loro-button\n            [label]=\"secondaryLabel()\"\n            icon=\"tag\"\n            [iconSize]=\"20\"\n            variant=\"outline\"\n            [disabled]=\"secondaryDisabled()\"\n            (buttonClick)=\"secondaryAction.emit()\" />\n        }\n      </div>\n      <div class=\"loro-summary-bar__flow\" aria-hidden=\"true\">\n        <loro-image [name]=\"leftImage()\" alt=\"\" width=\"5.9rem\" />\n        <loro-icon name=\"arrow-right\" [size]=\"34\" alt=\"\" color=\"primary\" />\n        <loro-image [name]=\"rightImage()\" alt=\"\" width=\"5.25rem\" />\n      </div>\n      <div class=\"loro-summary-bar__action\">\n        <loro-button\n          [label]=\"primaryLabel()\"\n          icon=\"check\"\n          [iconSize]=\"21\"\n          [fullWidth]=\"true\"\n          [disabled]=\"primaryDisabled()\"\n          (buttonClick)=\"primaryAction.emit()\" />\n        @if (helper()) {\n          <small>{{ helper() }}</small>\n        }\n      </div>\n    </aside>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-summary-bar{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:1.45rem;width:100%;min-width:0;min-height:6.75rem;padding:.75rem 1.9rem;box-sizing:border-box;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-panel)}.loro-summary-bar__total{display:grid;grid-template-columns:minmax(7rem,auto) minmax(9.5rem,auto);align-items:end;justify-content:start;gap:.25rem 1.6rem;min-width:0}.loro-summary-bar__total loro-button{grid-row:1/span 2;grid-column:2;align-self:center;--loro-summary-button-min-height: 2.9rem;--loro-summary-button-padding: .65rem 1rem;--loro-summary-button-font-size: 1rem}.loro-summary-bar__action{display:grid;justify-items:stretch;gap:.45rem;min-width:0;max-width:100%;overflow:hidden}small{color:var(--loro-muted);font-size:.92rem;font-weight:750;line-height:1.3}strong{color:var(--loro-primary-700);font-size:2.15rem;font-weight:950;line-height:1;white-space:nowrap}.loro-summary-bar__flow{display:inline-grid;grid-template-columns:auto auto auto;align-items:center;justify-content:center;gap:clamp(.55rem,1vw,1rem);min-width:0;padding-inline:clamp(.75rem,1.8vw,2.1rem);border-left:1px solid var(--loro-border-subtle);color:var(--loro-primary-700);font-size:2rem;font-weight:900}.loro-summary-bar__action loro-button{min-width:0;--loro-summary-button-min-height: 2.65rem;--loro-summary-button-padding: .62rem 1rem;--loro-summary-button-font-size: 1rem}.loro-summary-bar loro-button{--loro-button-min-height: var(--loro-summary-button-min-height);--loro-button-padding: var(--loro-summary-button-padding);--loro-button-radius: .55rem;--loro-button-font-size: var(--loro-summary-button-font-size)}:host ::ng-deep .loro-summary-bar loro-button .loro-button{max-width:100%;min-width:0}:host ::ng-deep .loro-summary-bar loro-button .loro-button span{min-width:0;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .loro-summary-bar__action loro-button,:host ::ng-deep .loro-summary-bar__action loro-button .loro-button{width:100%}.loro-summary-bar__action small{min-width:0;max-width:100%;overflow-wrap:anywhere;text-align:center}@media(max-width:1023.88px){.loro-summary-bar{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-areas:\"total flow\" \"total action\";align-items:center;gap:.55rem .8rem;min-height:0;padding:.85rem .95rem;border-radius:1.15rem}.loro-summary-bar__total{grid-area:total;grid-template-columns:1fr;align-content:center;justify-items:start;gap:.36rem;min-width:0;height:100%;padding-right:.65rem;border-right:1px solid var(--loro-border-subtle)}.loro-summary-bar__total loro-button{grid-row:auto;grid-column:auto;width:100%;max-width:9.6rem;--loro-summary-button-min-height: 2.2rem;--loro-summary-button-padding: .48rem .6rem;--loro-summary-button-font-size: .82rem}.loro-summary-bar__flow{grid-area:flow;display:inline-grid;justify-self:center;width:100%;max-width:10.75rem;gap:.32rem;padding-inline:0;border-left:0}.loro-summary-bar__flow loro-image:first-child{width:4.35rem}.loro-summary-bar__flow loro-image:last-child{width:3.85rem}.loro-summary-bar__action{grid-area:action;justify-items:stretch;gap:.28rem;min-width:0;width:100%}.loro-summary-bar__action loro-button{display:block;width:100%;min-width:0;--loro-summary-button-min-height: 2.35rem;--loro-summary-button-padding: .5rem .55rem;--loro-summary-button-font-size: .82rem}small{font-size:.82rem}strong{font-size:clamp(1.45rem,5.6vw,1.9rem)}}@media(max-width:640px){.loro-summary-bar{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:.48rem .62rem;padding:.78rem .82rem}.loro-summary-bar__total loro-button{max-width:8.9rem;--loro-summary-button-min-height: 2.1rem;--loro-summary-button-padding: .44rem .52rem;--loro-summary-button-font-size: .74rem}.loro-summary-bar__flow loro-image:first-child{width:3.45rem}.loro-summary-bar__flow loro-image:last-child{width:3.2rem}.loro-summary-bar__flow{max-width:8.45rem;gap:.2rem}.loro-summary-bar__flow loro-icon{transform:scale(.78)}.loro-summary-bar__action loro-button{--loro-summary-button-min-height: 2.2rem;--loro-summary-button-padding: .48rem .44rem;--loro-summary-button-font-size: .74rem}small{font-size:.72rem}strong{font-size:clamp(1.28rem,7vw,1.6rem)}}@media(max-width:430px){.loro-summary-bar{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);padding:.72rem}.loro-summary-bar__total{padding-right:.5rem}.loro-summary-bar__total loro-button{max-width:7.8rem;--loro-summary-button-font-size: .68rem}.loro-summary-bar__action loro-button{--loro-summary-button-font-size: .68rem}.loro-summary-bar__flow{max-width:7.6rem}.loro-summary-bar__flow loro-image:first-child{width:3rem}.loro-summary-bar__flow loro-image:last-child{width:2.85rem}}\n"], dependencies: [{ kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSummaryBar, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-summary-bar', standalone: true, imports: [LoroButton, LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <aside class="loro-summary-bar">
-      <div class="loro-summary-bar__total">
-        <small>{{ totalLabel() }}</small>
-        <strong>{{ total().toLocaleString('es-ES', { minimumFractionDigits: 2 }) }} €</strong>
-        @if (secondaryLabel()) {
-          <loro-button
-            [label]="secondaryLabel()"
-            icon="tag"
-            [iconSize]="20"
-            variant="outline"
-            [disabled]="secondaryDisabled()"
-            (buttonClick)="secondaryAction.emit()" />
-        }
-      </div>
-      <div class="loro-summary-bar__flow" aria-hidden="true">
-        <loro-image [name]="leftImage()" alt="" width="5.9rem" />
-        <loro-icon name="arrow-right" [size]="34" alt="" color="primary" />
-        <loro-image [name]="rightImage()" alt="" width="5.25rem" />
-      </div>
-      <div class="loro-summary-bar__action">
-        <loro-button
-          [label]="primaryLabel()"
-          icon="check"
-          [iconSize]="21"
-          [fullWidth]="true"
-          [disabled]="primaryDisabled()"
-          (buttonClick)="primaryAction.emit()" />
-        @if (helper()) {
-          <small>{{ helper() }}</small>
-        }
-      </div>
-    </aside>
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-summary-bar{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:1.45rem;width:100%;min-width:0;min-height:6.75rem;padding:.75rem 1.9rem;box-sizing:border-box;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-panel)}.loro-summary-bar__total{display:grid;grid-template-columns:minmax(7rem,auto) minmax(9.5rem,auto);align-items:end;justify-content:start;gap:.25rem 1.6rem;min-width:0}.loro-summary-bar__total loro-button{grid-row:1 / span 2;grid-column:2;align-self:center;--loro-summary-button-min-height: 2.9rem;--loro-summary-button-padding: .65rem 1rem;--loro-summary-button-font-size: 1rem}.loro-summary-bar__action{display:grid;justify-items:stretch;gap:.45rem;min-width:0;max-width:100%;overflow:hidden}small{color:var(--loro-muted);font-size:.92rem;font-weight:750;line-height:1.3}strong{color:var(--loro-primary-700);font-size:2.15rem;font-weight:950;line-height:1;white-space:nowrap}.loro-summary-bar__flow{display:inline-grid;grid-template-columns:auto auto auto;align-items:center;justify-content:center;gap:clamp(.55rem,1vw,1rem);min-width:0;padding-inline:clamp(.75rem,1.8vw,2.1rem);border-left:1px solid var(--loro-border-subtle);color:var(--loro-primary-700);font-size:2rem;font-weight:900}.loro-summary-bar__action loro-button{min-width:0;--loro-summary-button-min-height: 2.65rem;--loro-summary-button-padding: .62rem 1rem;--loro-summary-button-font-size: 1rem}.loro-summary-bar loro-button{--loro-button-min-height: var(--loro-summary-button-min-height);--loro-button-padding: var(--loro-summary-button-padding);--loro-button-radius: .55rem;--loro-button-font-size: var(--loro-summary-button-font-size)}:host ::ng-deep .loro-summary-bar loro-button .loro-button{max-width:100%;min-width:0}:host ::ng-deep .loro-summary-bar loro-button .loro-button span{min-width:0;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .loro-summary-bar__action loro-button,:host ::ng-deep .loro-summary-bar__action loro-button .loro-button{width:100%}.loro-summary-bar__action small{min-width:0;max-width:100%;overflow-wrap:anywhere;text-align:center}@media(max-width:1023.88px){.loro-summary-bar{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-areas:\"total flow\" \"total action\";align-items:center;gap:.55rem .8rem;min-height:0;padding:.85rem .95rem;border-radius:1.15rem}.loro-summary-bar__total{grid-area:total;grid-template-columns:1fr;align-content:center;justify-items:start;gap:.36rem;min-width:0;height:100%;padding-right:.65rem;border-right:1px solid var(--loro-border-subtle)}.loro-summary-bar__total loro-button{grid-row:auto;grid-column:auto;width:100%;max-width:9.6rem;--loro-summary-button-min-height: 2.2rem;--loro-summary-button-padding: .48rem .6rem;--loro-summary-button-font-size: .82rem}.loro-summary-bar__flow{grid-area:flow;display:inline-grid;justify-self:center;width:100%;max-width:10.75rem;gap:.32rem;padding-inline:0;border-left:0}.loro-summary-bar__flow loro-image:first-child{width:4.35rem}.loro-summary-bar__flow loro-image:last-child{width:3.85rem}.loro-summary-bar__action{grid-area:action;justify-items:stretch;gap:.28rem;min-width:0;width:100%}.loro-summary-bar__action loro-button{display:block;width:100%;min-width:0;--loro-summary-button-min-height: 2.35rem;--loro-summary-button-padding: .5rem .55rem;--loro-summary-button-font-size: .82rem}small{font-size:.82rem}strong{font-size:clamp(1.45rem,5.6vw,1.9rem)}}@media(max-width:640px){.loro-summary-bar{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:.48rem .62rem;padding:.78rem .82rem}.loro-summary-bar__total loro-button{max-width:8.9rem;--loro-summary-button-min-height: 2.1rem;--loro-summary-button-padding: .44rem .52rem;--loro-summary-button-font-size: .74rem}.loro-summary-bar__flow loro-image:first-child{width:3.45rem}.loro-summary-bar__flow loro-image:last-child{width:3.2rem}.loro-summary-bar__flow{max-width:8.45rem;gap:.2rem}.loro-summary-bar__flow loro-icon{transform:scale(.78)}.loro-summary-bar__action loro-button{--loro-summary-button-min-height: 2.2rem;--loro-summary-button-padding: .48rem .44rem;--loro-summary-button-font-size: .74rem}small{font-size:.72rem}strong{font-size:clamp(1.28rem,7vw,1.6rem)}}@media(max-width:430px){.loro-summary-bar{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);padding:.72rem}.loro-summary-bar__total{padding-right:.5rem}.loro-summary-bar__total loro-button{max-width:7.8rem;--loro-summary-button-font-size: .68rem}.loro-summary-bar__action loro-button{--loro-summary-button-font-size: .68rem}.loro-summary-bar__flow{max-width:7.6rem}.loro-summary-bar__flow loro-image:first-child{width:3rem}.loro-summary-bar__flow loro-image:last-child{width:2.85rem}}\n"] }]
+            args: [{ selector: 'loro-summary-bar', standalone: true, imports: [LoroButton, LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"loro-summary-bar\">\n      <div class=\"loro-summary-bar__total\">\n        <small>{{ totalLabel() }}</small>\n        <strong>{{ total().toLocaleString('es-ES', { minimumFractionDigits: 2 }) }} \u20AC</strong>\n        @if (secondaryLabel()) {\n          <loro-button\n            [label]=\"secondaryLabel()\"\n            icon=\"tag\"\n            [iconSize]=\"20\"\n            variant=\"outline\"\n            [disabled]=\"secondaryDisabled()\"\n            (buttonClick)=\"secondaryAction.emit()\" />\n        }\n      </div>\n      <div class=\"loro-summary-bar__flow\" aria-hidden=\"true\">\n        <loro-image [name]=\"leftImage()\" alt=\"\" width=\"5.9rem\" />\n        <loro-icon name=\"arrow-right\" [size]=\"34\" alt=\"\" color=\"primary\" />\n        <loro-image [name]=\"rightImage()\" alt=\"\" width=\"5.25rem\" />\n      </div>\n      <div class=\"loro-summary-bar__action\">\n        <loro-button\n          [label]=\"primaryLabel()\"\n          icon=\"check\"\n          [iconSize]=\"21\"\n          [fullWidth]=\"true\"\n          [disabled]=\"primaryDisabled()\"\n          (buttonClick)=\"primaryAction.emit()\" />\n        @if (helper()) {\n          <small>{{ helper() }}</small>\n        }\n      </div>\n    </aside>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-summary-bar{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:1.45rem;width:100%;min-width:0;min-height:6.75rem;padding:.75rem 1.9rem;box-sizing:border-box;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface-soft);box-shadow:var(--loro-shadow-panel)}.loro-summary-bar__total{display:grid;grid-template-columns:minmax(7rem,auto) minmax(9.5rem,auto);align-items:end;justify-content:start;gap:.25rem 1.6rem;min-width:0}.loro-summary-bar__total loro-button{grid-row:1/span 2;grid-column:2;align-self:center;--loro-summary-button-min-height: 2.9rem;--loro-summary-button-padding: .65rem 1rem;--loro-summary-button-font-size: 1rem}.loro-summary-bar__action{display:grid;justify-items:stretch;gap:.45rem;min-width:0;max-width:100%;overflow:hidden}small{color:var(--loro-muted);font-size:.92rem;font-weight:750;line-height:1.3}strong{color:var(--loro-primary-700);font-size:2.15rem;font-weight:950;line-height:1;white-space:nowrap}.loro-summary-bar__flow{display:inline-grid;grid-template-columns:auto auto auto;align-items:center;justify-content:center;gap:clamp(.55rem,1vw,1rem);min-width:0;padding-inline:clamp(.75rem,1.8vw,2.1rem);border-left:1px solid var(--loro-border-subtle);color:var(--loro-primary-700);font-size:2rem;font-weight:900}.loro-summary-bar__action loro-button{min-width:0;--loro-summary-button-min-height: 2.65rem;--loro-summary-button-padding: .62rem 1rem;--loro-summary-button-font-size: 1rem}.loro-summary-bar loro-button{--loro-button-min-height: var(--loro-summary-button-min-height);--loro-button-padding: var(--loro-summary-button-padding);--loro-button-radius: .55rem;--loro-button-font-size: var(--loro-summary-button-font-size)}:host ::ng-deep .loro-summary-bar loro-button .loro-button{max-width:100%;min-width:0}:host ::ng-deep .loro-summary-bar loro-button .loro-button span{min-width:0;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .loro-summary-bar__action loro-button,:host ::ng-deep .loro-summary-bar__action loro-button .loro-button{width:100%}.loro-summary-bar__action small{min-width:0;max-width:100%;overflow-wrap:anywhere;text-align:center}@media(max-width:1023.88px){.loro-summary-bar{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-areas:\"total flow\" \"total action\";align-items:center;gap:.55rem .8rem;min-height:0;padding:.85rem .95rem;border-radius:1.15rem}.loro-summary-bar__total{grid-area:total;grid-template-columns:1fr;align-content:center;justify-items:start;gap:.36rem;min-width:0;height:100%;padding-right:.65rem;border-right:1px solid var(--loro-border-subtle)}.loro-summary-bar__total loro-button{grid-row:auto;grid-column:auto;width:100%;max-width:9.6rem;--loro-summary-button-min-height: 2.2rem;--loro-summary-button-padding: .48rem .6rem;--loro-summary-button-font-size: .82rem}.loro-summary-bar__flow{grid-area:flow;display:inline-grid;justify-self:center;width:100%;max-width:10.75rem;gap:.32rem;padding-inline:0;border-left:0}.loro-summary-bar__flow loro-image:first-child{width:4.35rem}.loro-summary-bar__flow loro-image:last-child{width:3.85rem}.loro-summary-bar__action{grid-area:action;justify-items:stretch;gap:.28rem;min-width:0;width:100%}.loro-summary-bar__action loro-button{display:block;width:100%;min-width:0;--loro-summary-button-min-height: 2.35rem;--loro-summary-button-padding: .5rem .55rem;--loro-summary-button-font-size: .82rem}small{font-size:.82rem}strong{font-size:clamp(1.45rem,5.6vw,1.9rem)}}@media(max-width:640px){.loro-summary-bar{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:.48rem .62rem;padding:.78rem .82rem}.loro-summary-bar__total loro-button{max-width:8.9rem;--loro-summary-button-min-height: 2.1rem;--loro-summary-button-padding: .44rem .52rem;--loro-summary-button-font-size: .74rem}.loro-summary-bar__flow loro-image:first-child{width:3.45rem}.loro-summary-bar__flow loro-image:last-child{width:3.2rem}.loro-summary-bar__flow{max-width:8.45rem;gap:.2rem}.loro-summary-bar__flow loro-icon{transform:scale(.78)}.loro-summary-bar__action loro-button{--loro-summary-button-min-height: 2.2rem;--loro-summary-button-padding: .48rem .44rem;--loro-summary-button-font-size: .74rem}small{font-size:.72rem}strong{font-size:clamp(1.28rem,7vw,1.6rem)}}@media(max-width:430px){.loro-summary-bar{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);padding:.72rem}.loro-summary-bar__total{padding-right:.5rem}.loro-summary-bar__total loro-button{max-width:7.8rem;--loro-summary-button-font-size: .68rem}.loro-summary-bar__action loro-button{--loro-summary-button-font-size: .68rem}.loro-summary-bar__flow{max-width:7.6rem}.loro-summary-bar__flow loro-image:first-child{width:3rem}.loro-summary-bar__flow loro-image:last-child{width:2.85rem}}\n"] }]
         }], propDecorators: { totalLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalLabel", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], primaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryLabel", required: false }] }], secondaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryLabel", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], leftImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftImage", required: false }] }], rightImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightImage", required: false }] }], primaryDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryDisabled", required: false }] }], secondaryDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryDisabled", required: false }] }], primaryAction: [{ type: i0.Output, args: ["primaryAction"] }], secondaryAction: [{ type: i0.Output, args: ["secondaryAction"] }] } });
 
 class LoroTab {
@@ -3219,73 +2264,13 @@ class LoroTab {
     iconSize = input(18, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
     change = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroTab, isStandalone: true, selector: "loro-tab", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "style.--loro-tab-count": "options().length" } }, ngImport: i0, template: `
-    <div
-      class="loro-tab"
-      role="tablist"
-      [attr.aria-label]="ariaLabel() || null"
-      [class.loro-tab--block]="align() === 'block'"
-    >
-      @for (option of options(); track option.value) {
-        <button
-          type="button"
-          role="tab"
-          class="loro-tab__button"
-          [class.loro-tab__button--active]="value() === option.value"
-          [attr.aria-selected]="value() === option.value"
-          [attr.aria-label]="option.ariaLabel || option.label"
-          (click)="change.emit(option.value)"
-        >
-          @if (option.icon) {
-            <loro-icon
-              [name]="option.icon"
-              [size]="iconSize()"
-              [alt]="option.label"
-              [decorative]="true"
-              [color]="value() === option.value ? 'primary' : 'muted'"
-            />
-          }
-          <span>{{ option.label }}</span>
-        </button>
-      }
-    </div>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-tab{display:grid;grid-template-columns:repeat(var(--loro-tab-count, 2),minmax(0,1fr));min-height:var(--loro-tab-min-height, 2.8rem);overflow:hidden;border-bottom:1px solid var(--loro-border-subtle);background:transparent}.loro-tab__button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:0;min-height:100%;padding:var(--loro-tab-button-padding, .58rem .95rem .72rem);border:0;border-bottom:2px solid transparent;color:var(--loro-muted-strong);font:inherit;font-size:var(--loro-tab-font-size, .95rem);font-weight:900;line-height:var(--loro-tab-line-height, 1.15);background:transparent;cursor:pointer;transition:color .14s ease,border-color .14s ease,background .14s ease}.loro-tab--block .loro-tab__button{flex-direction:column;gap:.35rem}.loro-tab__button--active{border-bottom-color:var(--loro-primary-500);color:var(--loro-primary-500)}.loro-tab__button:hover{background:color-mix(in srgb,var(--loro-primary-500) 4%,transparent)}.loro-tab__button:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-primary-500) 28%,transparent);outline-offset:-2px;border-radius:.35rem}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroTab, isStandalone: true, selector: "loro-tab", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { properties: { "style.--loro-tab-count": "options().length" } }, ngImport: i0, template: "<div\n      class=\"loro-tab\"\n      role=\"tablist\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [class.loro-tab--block]=\"align() === 'block'\"\n    >\n      @for (option of options(); track option.value) {\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"loro-tab__button\"\n          [class.loro-tab__button--active]=\"value() === option.value\"\n          [attr.aria-selected]=\"value() === option.value\"\n          [attr.aria-label]=\"option.ariaLabel || option.label\"\n          (click)=\"change.emit(option.value)\"\n        >\n          @if (option.icon) {\n            <loro-icon\n              [name]=\"option.icon\"\n              [size]=\"iconSize()\"\n              [alt]=\"option.label\"\n              [decorative]=\"true\"\n              [color]=\"value() === option.value ? 'primary' : 'muted'\"\n            />\n          }\n          <span>{{ option.label }}</span>\n        </button>\n      }\n    </div>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-tab{display:grid;grid-template-columns:repeat(var(--loro-tab-count, 2),minmax(0,1fr));min-height:var(--loro-tab-min-height, 2.8rem);overflow:hidden;border-bottom:1px solid var(--loro-border-subtle);background:transparent}.loro-tab__button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:0;min-height:100%;padding:var(--loro-tab-button-padding, .58rem .95rem .72rem);border:0;border-bottom:2px solid transparent;color:var(--loro-muted-strong);font:inherit;font-size:var(--loro-tab-font-size, .95rem);font-weight:900;line-height:var(--loro-tab-line-height, 1.15);background:transparent;cursor:pointer;transition:color .14s ease,border-color .14s ease,background .14s ease}.loro-tab--block .loro-tab__button{flex-direction:column;gap:.35rem}.loro-tab__button--active{border-bottom-color:var(--loro-primary-500);color:var(--loro-primary-500)}.loro-tab__button:hover{background:color-mix(in srgb,var(--loro-primary-500) 4%,transparent)}.loro-tab__button:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-primary-500) 28%,transparent);outline-offset:-2px;border-radius:.35rem}\n"], dependencies: [{ kind: "component", type: LoroIcon, 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: LoroTab, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-tab', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div
-      class="loro-tab"
-      role="tablist"
-      [attr.aria-label]="ariaLabel() || null"
-      [class.loro-tab--block]="align() === 'block'"
-    >
-      @for (option of options(); track option.value) {
-        <button
-          type="button"
-          role="tab"
-          class="loro-tab__button"
-          [class.loro-tab__button--active]="value() === option.value"
-          [attr.aria-selected]="value() === option.value"
-          [attr.aria-label]="option.ariaLabel || option.label"
-          (click)="change.emit(option.value)"
-        >
-          @if (option.icon) {
-            <loro-icon
-              [name]="option.icon"
-              [size]="iconSize()"
-              [alt]="option.label"
-              [decorative]="true"
-              [color]="value() === option.value ? 'primary' : 'muted'"
-            />
-          }
-          <span>{{ option.label }}</span>
-        </button>
-      }
-    </div>
-  `, host: {
+            args: [{ selector: 'loro-tab', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.--loro-tab-count]': 'options().length',
-                    }, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-tab{display:grid;grid-template-columns:repeat(var(--loro-tab-count, 2),minmax(0,1fr));min-height:var(--loro-tab-min-height, 2.8rem);overflow:hidden;border-bottom:1px solid var(--loro-border-subtle);background:transparent}.loro-tab__button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:0;min-height:100%;padding:var(--loro-tab-button-padding, .58rem .95rem .72rem);border:0;border-bottom:2px solid transparent;color:var(--loro-muted-strong);font:inherit;font-size:var(--loro-tab-font-size, .95rem);font-weight:900;line-height:var(--loro-tab-line-height, 1.15);background:transparent;cursor:pointer;transition:color .14s ease,border-color .14s ease,background .14s ease}.loro-tab--block .loro-tab__button{flex-direction:column;gap:.35rem}.loro-tab__button--active{border-bottom-color:var(--loro-primary-500);color:var(--loro-primary-500)}.loro-tab__button:hover{background:color-mix(in srgb,var(--loro-primary-500) 4%,transparent)}.loro-tab__button:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-primary-500) 28%,transparent);outline-offset:-2px;border-radius:.35rem}\n"] }]
+                    }, template: "<div\n      class=\"loro-tab\"\n      role=\"tablist\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [class.loro-tab--block]=\"align() === 'block'\"\n    >\n      @for (option of options(); track option.value) {\n        <button\n          type=\"button\"\n          role=\"tab\"\n          class=\"loro-tab__button\"\n          [class.loro-tab__button--active]=\"value() === option.value\"\n          [attr.aria-selected]=\"value() === option.value\"\n          [attr.aria-label]=\"option.ariaLabel || option.label\"\n          (click)=\"change.emit(option.value)\"\n        >\n          @if (option.icon) {\n            <loro-icon\n              [name]=\"option.icon\"\n              [size]=\"iconSize()\"\n              [alt]=\"option.label\"\n              [decorative]=\"true\"\n              [color]=\"value() === option.value ? 'primary' : 'muted'\"\n            />\n          }\n          <span>{{ option.label }}</span>\n        </button>\n      }\n    </div>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-tab{display:grid;grid-template-columns:repeat(var(--loro-tab-count, 2),minmax(0,1fr));min-height:var(--loro-tab-min-height, 2.8rem);overflow:hidden;border-bottom:1px solid var(--loro-border-subtle);background:transparent}.loro-tab__button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:0;min-height:100%;padding:var(--loro-tab-button-padding, .58rem .95rem .72rem);border:0;border-bottom:2px solid transparent;color:var(--loro-muted-strong);font:inherit;font-size:var(--loro-tab-font-size, .95rem);font-weight:900;line-height:var(--loro-tab-line-height, 1.15);background:transparent;cursor:pointer;transition:color .14s ease,border-color .14s ease,background .14s ease}.loro-tab--block .loro-tab__button{flex-direction:column;gap:.35rem}.loro-tab__button--active{border-bottom-color:var(--loro-primary-500);color:var(--loro-primary-500)}.loro-tab__button:hover{background:color-mix(in srgb,var(--loro-primary-500) 4%,transparent)}.loro-tab__button:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-primary-500) 28%,transparent);outline-offset:-2px;border-radius:.35rem}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
 
 class LoroAlert {
@@ -3380,45 +2365,11 @@ class LoroNotification {
     }, ...(ngDevMode ? [{ debugName: "badgeLabel" }] : /* istanbul ignore next */ []));
     badgeAriaLabel = computed(() => `${this.badgeLabel()} unread notifications`, ...(ngDevMode ? [{ debugName: "badgeAriaLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotification, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroNotification, isStandalone: true, selector: "loro-notification", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, maxCount: { classPropertyName: "maxCount", publicName: "maxCount", isSignal: true, isRequired: false, transformFunction: null }, showZero: { classPropertyName: "showZero", publicName: "showZero", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", 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 }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notificationClick: "notificationClick" }, ngImport: i0, template: `
-    <button
-      type="button"
-      class="loro-notification"
-      [class.loro-notification--active]="active()"
-      [class.loro-notification--disabled]="disabled()"
-      [disabled]="disabled()"
-      [attr.aria-label]="ariaLabel()"
-      [attr.aria-expanded]="expanded()"
-      (click)="notificationClick.emit()">
-      <loro-icon name="bell" [size]="iconSize()" alt="" [decorative]="true" color="primary" />
-      @if (showBadge()) {
-        <span class="loro-notification__badge" [attr.aria-label]="badgeAriaLabel()">
-          {{ badgeLabel() }}
-        </span>
-      }
-    </button>
-  `, isInline: true, styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-notification{position:relative;display:grid;width:var(--loro-notification-size, 2.75rem);height:var(--loro-notification-size, 2.75rem);place-items:center;border:0;border-radius:50%;background:transparent;color:var(--loro-primary-700);cursor:pointer;transition:background .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}.loro-notification:hover,.loro-notification--active{background:transparent}.loro-notification:focus-visible{outline:2px solid rgba(108,60,255,.35);outline-offset:2px}.loro-notification:active{transform:scale(.97)}.loro-notification--disabled{cursor:not-allowed;opacity:.55;transform:none}.loro-notification__badge{position:absolute;top:.18rem;right:.1rem;display:grid;min-width:1.15rem;height:1.15rem;place-items:center;padding-inline:.25rem;border:2px solid var(--loro-surface);border-radius:999px;background:var(--loro-primary-500);color:#fff;font-size:.68rem;font-weight:950;line-height:1;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroNotification, isStandalone: true, selector: "loro-notification", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, maxCount: { classPropertyName: "maxCount", publicName: "maxCount", isSignal: true, isRequired: false, transformFunction: null }, showZero: { classPropertyName: "showZero", publicName: "showZero", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", 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 }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notificationClick: "notificationClick" }, ngImport: i0, template: "<button\n      type=\"button\"\n      class=\"loro-notification\"\n      [class.loro-notification--active]=\"active()\"\n      [class.loro-notification--disabled]=\"disabled()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-expanded]=\"expanded()\"\n      (click)=\"notificationClick.emit()\">\n      <loro-icon name=\"bell\" [size]=\"iconSize()\" alt=\"\" [decorative]=\"true\" color=\"primary\" />\n      @if (showBadge()) {\n        <span class=\"loro-notification__badge\" [attr.aria-label]=\"badgeAriaLabel()\">\n          {{ badgeLabel() }}\n        </span>\n      }\n    </button>", styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-notification{position:relative;display:grid;width:var(--loro-notification-size, 2.75rem);height:var(--loro-notification-size, 2.75rem);place-items:center;border:0;border-radius:50%;background:transparent;color:var(--loro-primary-700);cursor:pointer;transition:background .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}.loro-notification:hover,.loro-notification--active{background:transparent}.loro-notification:focus-visible{outline:2px solid rgba(108,60,255,.35);outline-offset:2px}.loro-notification:active{transform:scale(.97)}.loro-notification--disabled{cursor:not-allowed;opacity:.55;transform:none}.loro-notification__badge{position:absolute;top:.18rem;right:.1rem;display:grid;min-width:1.15rem;height:1.15rem;place-items:center;padding-inline:.25rem;border:2px solid var(--loro-surface);border-radius:999px;background:var(--loro-primary-500);color:#fff;font-size:.68rem;font-weight:950;line-height:1;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: LoroIcon, 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: LoroNotification, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-notification', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <button
-      type="button"
-      class="loro-notification"
-      [class.loro-notification--active]="active()"
-      [class.loro-notification--disabled]="disabled()"
-      [disabled]="disabled()"
-      [attr.aria-label]="ariaLabel()"
-      [attr.aria-expanded]="expanded()"
-      (click)="notificationClick.emit()">
-      <loro-icon name="bell" [size]="iconSize()" alt="" [decorative]="true" color="primary" />
-      @if (showBadge()) {
-        <span class="loro-notification__badge" [attr.aria-label]="badgeAriaLabel()">
-          {{ badgeLabel() }}
-        </span>
-      }
-    </button>
-  `, styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-notification{position:relative;display:grid;width:var(--loro-notification-size, 2.75rem);height:var(--loro-notification-size, 2.75rem);place-items:center;border:0;border-radius:50%;background:transparent;color:var(--loro-primary-700);cursor:pointer;transition:background .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}.loro-notification:hover,.loro-notification--active{background:transparent}.loro-notification:focus-visible{outline:2px solid rgba(108,60,255,.35);outline-offset:2px}.loro-notification:active{transform:scale(.97)}.loro-notification--disabled{cursor:not-allowed;opacity:.55;transform:none}.loro-notification__badge{position:absolute;top:.18rem;right:.1rem;display:grid;min-width:1.15rem;height:1.15rem;place-items:center;padding-inline:.25rem;border:2px solid var(--loro-surface);border-radius:999px;background:var(--loro-primary-500);color:#fff;font-size:.68rem;font-weight:950;line-height:1;box-sizing:border-box}\n"] }]
+            args: [{ selector: 'loro-notification', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n      type=\"button\"\n      class=\"loro-notification\"\n      [class.loro-notification--active]=\"active()\"\n      [class.loro-notification--disabled]=\"disabled()\"\n      [disabled]=\"disabled()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-expanded]=\"expanded()\"\n      (click)=\"notificationClick.emit()\">\n      <loro-icon name=\"bell\" [size]=\"iconSize()\" alt=\"\" [decorative]=\"true\" color=\"primary\" />\n      @if (showBadge()) {\n        <span class=\"loro-notification__badge\" [attr.aria-label]=\"badgeAriaLabel()\">\n          {{ badgeLabel() }}\n        </span>\n      }\n    </button>", styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-notification{position:relative;display:grid;width:var(--loro-notification-size, 2.75rem);height:var(--loro-notification-size, 2.75rem);place-items:center;border:0;border-radius:50%;background:transparent;color:var(--loro-primary-700);cursor:pointer;transition:background .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}.loro-notification:hover,.loro-notification--active{background:transparent}.loro-notification:focus-visible{outline:2px solid rgba(108,60,255,.35);outline-offset:2px}.loro-notification:active{transform:scale(.97)}.loro-notification--disabled{cursor:not-allowed;opacity:.55;transform:none}.loro-notification__badge{position:absolute;top:.18rem;right:.1rem;display:grid;min-width:1.15rem;height:1.15rem;place-items:center;padding-inline:.25rem;border:2px solid var(--loro-surface);border-radius:999px;background:var(--loro-primary-500);color:#fff;font-size:.68rem;font-weight:950;line-height:1;box-sizing:border-box}\n"] }]
         }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], maxCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCount", required: false }] }], showZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZero", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], notificationClick: [{ type: i0.Output, args: ["notificationClick"] }] } });
 
 class LoroNotificationRow {
@@ -3524,119 +2475,11 @@ class LoroNotificationRow {
         window.setTimeout(() => this.rowRemove.emit(), 180);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotificationRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroNotificationRow, isStandalone: true, selector: "loro-notification-row", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, unread: { classPropertyName: "unread", publicName: "unread", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowRemove: "rowRemove" }, ngImport: i0, template: `
-    <div
-      class="loro-notification-row-shell"
-      data-horizontal-gesture
-      [class.loro-notification-row-shell--dragging]="dragging()"
-      [class.loro-notification-row-shell--armed]="armed()"
-      [class.loro-notification-row-shell--removing]="removing()"
-      (touchstart)="onTouchStart($event)"
-      (touchmove)="onTouchMove($event)"
-      (touchend)="onTouchEnd()"
-      (touchcancel)="resetDrag()">
-      <button
-        type="button"
-        class="loro-notification-row-shell__delete"
-        aria-label="Eliminar notificacion"
-        (pointerdown)="$event.stopPropagation()"
-        (touchstart)="$event.stopPropagation()"
-        (click)="onDeleteClick($event)">
-        <loro-icon name="trash-white" [size]="22" alt="" [decorative]="true" color="inverse" />
-        <span>Eliminar</span>
-      </button>
-      <article
-        role="button"
-        tabindex="0"
-        class="loro-notification-row"
-        [class.loro-notification-row--unread]="unread()"
-        [style.transform]="'translate3d(' + dragX() + 'px, 0, 0)'"
-        (click)="onRowClick()"
-        (keydown.enter)="onRowKeydown($event)"
-        (keydown.space)="onRowKeydown($event)">
-        <span class="loro-notification-row__icon">
-          <loro-icon [name]="icon()" [size]="26" [alt]="title()" color="primary" />
-        </span>
-        <span class="loro-notification-row__content">
-          <span class="loro-notification-row__meta">
-            <strong>{{ title() }}</strong>
-            @if (time()) {
-              <small>{{ time() }}</small>
-            }
-          </span>
-          <span class="loro-notification-row__message">{{ message() }}</span>
-        </span>
-        @if (unread()) {
-          <span class="loro-notification-row__dot" aria-label="Unread"></span>
-        }
-        <button
-          type="button"
-          class="loro-notification-row__delete-button"
-          aria-label="Eliminar notificacion"
-          (click)="onDeleteClick($event)">
-          <loro-icon name="trash" [size]="18" alt="" [decorative]="true" color="danger" />
-        </button>
-      </article>
-    </div>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-notification-row-shell{position:relative;overflow:hidden;background:transparent;touch-action:pan-y}.loro-notification-row-shell__delete{position:absolute;inset:0 0 0 auto;display:grid;width:8.75rem;align-content:center;justify-items:center;gap:.45rem;border:0;background:#ef4444;color:var(--loro-text-inverse);font:inherit;font-weight:850;cursor:pointer;opacity:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .18s ease,transform .18s ease}.loro-notification-row-shell--dragging .loro-notification-row-shell__delete,.loro-notification-row-shell--armed .loro-notification-row-shell__delete,.loro-notification-row-shell--removing .loro-notification-row-shell__delete{opacity:1}.loro-notification-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.85rem;width:100%;padding:.82rem .95rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text);text-align:left;cursor:pointer;will-change:transform;transition:background .15s ease,transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease}.loro-notification-row-shell--dragging .loro-notification-row{transition:background .15s ease}.loro-notification-row-shell--removing .loro-notification-row{opacity:.18;transform:translate3d(-100%,0,0)!important}:host:last-child .loro-notification-row{border-bottom-color:transparent}.loro-notification-row:hover{background:var(--loro-surface)}.loro-notification-row:focus-visible{position:relative;z-index:1;outline:2px solid rgba(108,60,255,.32);outline-offset:-2px}.loro-notification-row__icon{display:grid;width:2.5rem;height:2.5rem;place-items:center;border-radius:.8rem;background:transparent}.loro-notification-row__content{display:grid;gap:.2rem;min-width:0}.loro-notification-row__meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.75rem}strong{overflow:hidden;color:var(--loro-text-strong);font-size:.92rem;font-weight:950;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}small,.loro-notification-row__message{color:var(--loro-muted);font-size:.82rem;font-weight:700;line-height:1.35}.loro-notification-row__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--loro-primary-500)}.loro-notification-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:.7rem;background:color-mix(in srgb,var(--loro-danger-text) 8%,transparent);cursor:pointer;opacity:0;transition:background .15s ease,opacity .15s ease,transform .15s ease}.loro-notification-row:hover .loro-notification-row__delete-button,.loro-notification-row:focus-visible .loro-notification-row__delete-button,.loro-notification-row__delete-button:focus-visible{opacity:1}.loro-notification-row__delete-button:hover,.loro-notification-row__delete-button:focus-visible{background:color-mix(in srgb,var(--loro-danger-text) 14%,transparent);outline:0;transform:translateY(-1px)}@media(max-width:1023.88px){.loro-notification-row{grid-template-columns:auto minmax(0,1fr) auto;padding:.82rem .8rem}.loro-notification-row__delete-button{display:none}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroNotificationRow, isStandalone: true, selector: "loro-notification-row", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, unread: { classPropertyName: "unread", publicName: "unread", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowRemove: "rowRemove" }, ngImport: i0, template: "<div\n      class=\"loro-notification-row-shell\"\n      data-horizontal-gesture\n      [class.loro-notification-row-shell--dragging]=\"dragging()\"\n      [class.loro-notification-row-shell--armed]=\"armed()\"\n      [class.loro-notification-row-shell--removing]=\"removing()\"\n      (touchstart)=\"onTouchStart($event)\"\n      (touchmove)=\"onTouchMove($event)\"\n      (touchend)=\"onTouchEnd()\"\n      (touchcancel)=\"resetDrag()\">\n      <button\n        type=\"button\"\n        class=\"loro-notification-row-shell__delete\"\n        aria-label=\"Eliminar notificacion\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (touchstart)=\"$event.stopPropagation()\"\n        (click)=\"onDeleteClick($event)\">\n        <loro-icon name=\"trash-white\" [size]=\"22\" alt=\"\" [decorative]=\"true\" color=\"inverse\" />\n        <span>Eliminar</span>\n      </button>\n      <article\n        role=\"button\"\n        tabindex=\"0\"\n        class=\"loro-notification-row\"\n        [class.loro-notification-row--unread]=\"unread()\"\n        [style.transform]=\"'translate3d(' + dragX() + 'px, 0, 0)'\"\n        (click)=\"onRowClick()\"\n        (keydown.enter)=\"onRowKeydown($event)\"\n        (keydown.space)=\"onRowKeydown($event)\">\n        <span class=\"loro-notification-row__icon\">\n          <loro-icon [name]=\"icon()\" [size]=\"26\" [alt]=\"title()\" color=\"primary\" />\n        </span>\n        <span class=\"loro-notification-row__content\">\n          <span class=\"loro-notification-row__meta\">\n            <strong>{{ title() }}</strong>\n            @if (time()) {\n              <small>{{ time() }}</small>\n            }\n          </span>\n          <span class=\"loro-notification-row__message\">{{ message() }}</span>\n        </span>\n        @if (unread()) {\n          <span class=\"loro-notification-row__dot\" aria-label=\"Unread\"></span>\n        }\n        <button\n          type=\"button\"\n          class=\"loro-notification-row__delete-button\"\n          aria-label=\"Eliminar notificacion\"\n          (click)=\"onDeleteClick($event)\">\n          <loro-icon name=\"trash\" [size]=\"18\" alt=\"\" [decorative]=\"true\" color=\"danger\" />\n        </button>\n      </article>\n    </div>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-notification-row-shell{position:relative;overflow:hidden;background:transparent;touch-action:pan-y}.loro-notification-row-shell__delete{position:absolute;inset:0 0 0 auto;display:grid;width:8.75rem;align-content:center;justify-items:center;gap:.45rem;border:0;background:#ef4444;color:var(--loro-text-inverse);font:inherit;font-weight:850;cursor:pointer;opacity:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .18s ease,transform .18s ease}.loro-notification-row-shell--dragging .loro-notification-row-shell__delete,.loro-notification-row-shell--armed .loro-notification-row-shell__delete,.loro-notification-row-shell--removing .loro-notification-row-shell__delete{opacity:1}.loro-notification-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.85rem;width:100%;padding:.82rem .95rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text);text-align:left;cursor:pointer;will-change:transform;transition:background .15s ease,transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease}.loro-notification-row-shell--dragging .loro-notification-row{transition:background .15s ease}.loro-notification-row-shell--removing .loro-notification-row{opacity:.18;transform:translate3d(-100%,0,0)!important}:host:last-child .loro-notification-row{border-bottom-color:transparent}.loro-notification-row:hover{background:var(--loro-surface)}.loro-notification-row:focus-visible{position:relative;z-index:1;outline:2px solid rgba(108,60,255,.32);outline-offset:-2px}.loro-notification-row__icon{display:grid;width:2.5rem;height:2.5rem;place-items:center;border-radius:.8rem;background:transparent}.loro-notification-row__content{display:grid;gap:.2rem;min-width:0}.loro-notification-row__meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.75rem}strong{overflow:hidden;color:var(--loro-text-strong);font-size:.92rem;font-weight:950;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}small,.loro-notification-row__message{color:var(--loro-muted);font-size:.82rem;font-weight:700;line-height:1.35}.loro-notification-row__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--loro-primary-500)}.loro-notification-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:.7rem;background:color-mix(in srgb,var(--loro-danger-text) 8%,transparent);cursor:pointer;opacity:0;transition:background .15s ease,opacity .15s ease,transform .15s ease}.loro-notification-row:hover .loro-notification-row__delete-button,.loro-notification-row:focus-visible .loro-notification-row__delete-button,.loro-notification-row__delete-button:focus-visible{opacity:1}.loro-notification-row__delete-button:hover,.loro-notification-row__delete-button:focus-visible{background:color-mix(in srgb,var(--loro-danger-text) 14%,transparent);outline:0;transform:translateY(-1px)}@media(max-width:1023.88px){.loro-notification-row{grid-template-columns:auto minmax(0,1fr) auto;padding:.82rem .8rem}.loro-notification-row__delete-button{display:none}}\n"], dependencies: [{ kind: "component", type: LoroIcon, 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: LoroNotificationRow, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-notification-row', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div
-      class="loro-notification-row-shell"
-      data-horizontal-gesture
-      [class.loro-notification-row-shell--dragging]="dragging()"
-      [class.loro-notification-row-shell--armed]="armed()"
-      [class.loro-notification-row-shell--removing]="removing()"
-      (touchstart)="onTouchStart($event)"
-      (touchmove)="onTouchMove($event)"
-      (touchend)="onTouchEnd()"
-      (touchcancel)="resetDrag()">
-      <button
-        type="button"
-        class="loro-notification-row-shell__delete"
-        aria-label="Eliminar notificacion"
-        (pointerdown)="$event.stopPropagation()"
-        (touchstart)="$event.stopPropagation()"
-        (click)="onDeleteClick($event)">
-        <loro-icon name="trash-white" [size]="22" alt="" [decorative]="true" color="inverse" />
-        <span>Eliminar</span>
-      </button>
-      <article
-        role="button"
-        tabindex="0"
-        class="loro-notification-row"
-        [class.loro-notification-row--unread]="unread()"
-        [style.transform]="'translate3d(' + dragX() + 'px, 0, 0)'"
-        (click)="onRowClick()"
-        (keydown.enter)="onRowKeydown($event)"
-        (keydown.space)="onRowKeydown($event)">
-        <span class="loro-notification-row__icon">
-          <loro-icon [name]="icon()" [size]="26" [alt]="title()" color="primary" />
-        </span>
-        <span class="loro-notification-row__content">
-          <span class="loro-notification-row__meta">
-            <strong>{{ title() }}</strong>
-            @if (time()) {
-              <small>{{ time() }}</small>
-            }
-          </span>
-          <span class="loro-notification-row__message">{{ message() }}</span>
-        </span>
-        @if (unread()) {
-          <span class="loro-notification-row__dot" aria-label="Unread"></span>
-        }
-        <button
-          type="button"
-          class="loro-notification-row__delete-button"
-          aria-label="Eliminar notificacion"
-          (click)="onDeleteClick($event)">
-          <loro-icon name="trash" [size]="18" alt="" [decorative]="true" color="danger" />
-        </button>
-      </article>
-    </div>
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-notification-row-shell{position:relative;overflow:hidden;background:transparent;touch-action:pan-y}.loro-notification-row-shell__delete{position:absolute;inset:0 0 0 auto;display:grid;width:8.75rem;align-content:center;justify-items:center;gap:.45rem;border:0;background:#ef4444;color:var(--loro-text-inverse);font:inherit;font-weight:850;cursor:pointer;opacity:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .18s ease,transform .18s ease}.loro-notification-row-shell--dragging .loro-notification-row-shell__delete,.loro-notification-row-shell--armed .loro-notification-row-shell__delete,.loro-notification-row-shell--removing .loro-notification-row-shell__delete{opacity:1}.loro-notification-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.85rem;width:100%;padding:.82rem .95rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text);text-align:left;cursor:pointer;will-change:transform;transition:background .15s ease,transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease}.loro-notification-row-shell--dragging .loro-notification-row{transition:background .15s ease}.loro-notification-row-shell--removing .loro-notification-row{opacity:.18;transform:translate3d(-100%,0,0)!important}:host:last-child .loro-notification-row{border-bottom-color:transparent}.loro-notification-row:hover{background:var(--loro-surface)}.loro-notification-row:focus-visible{position:relative;z-index:1;outline:2px solid rgba(108,60,255,.32);outline-offset:-2px}.loro-notification-row__icon{display:grid;width:2.5rem;height:2.5rem;place-items:center;border-radius:.8rem;background:transparent}.loro-notification-row__content{display:grid;gap:.2rem;min-width:0}.loro-notification-row__meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.75rem}strong{overflow:hidden;color:var(--loro-text-strong);font-size:.92rem;font-weight:950;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}small,.loro-notification-row__message{color:var(--loro-muted);font-size:.82rem;font-weight:700;line-height:1.35}.loro-notification-row__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--loro-primary-500)}.loro-notification-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:.7rem;background:color-mix(in srgb,var(--loro-danger-text) 8%,transparent);cursor:pointer;opacity:0;transition:background .15s ease,opacity .15s ease,transform .15s ease}.loro-notification-row:hover .loro-notification-row__delete-button,.loro-notification-row:focus-visible .loro-notification-row__delete-button,.loro-notification-row__delete-button:focus-visible{opacity:1}.loro-notification-row__delete-button:hover,.loro-notification-row__delete-button:focus-visible{background:color-mix(in srgb,var(--loro-danger-text) 14%,transparent);outline:0;transform:translateY(-1px)}@media(max-width:1023.88px){.loro-notification-row{grid-template-columns:auto minmax(0,1fr) auto;padding:.82rem .8rem}.loro-notification-row__delete-button{display:none}}\n"] }]
+            args: [{ selector: 'loro-notification-row', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n      class=\"loro-notification-row-shell\"\n      data-horizontal-gesture\n      [class.loro-notification-row-shell--dragging]=\"dragging()\"\n      [class.loro-notification-row-shell--armed]=\"armed()\"\n      [class.loro-notification-row-shell--removing]=\"removing()\"\n      (touchstart)=\"onTouchStart($event)\"\n      (touchmove)=\"onTouchMove($event)\"\n      (touchend)=\"onTouchEnd()\"\n      (touchcancel)=\"resetDrag()\">\n      <button\n        type=\"button\"\n        class=\"loro-notification-row-shell__delete\"\n        aria-label=\"Eliminar notificacion\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (touchstart)=\"$event.stopPropagation()\"\n        (click)=\"onDeleteClick($event)\">\n        <loro-icon name=\"trash-white\" [size]=\"22\" alt=\"\" [decorative]=\"true\" color=\"inverse\" />\n        <span>Eliminar</span>\n      </button>\n      <article\n        role=\"button\"\n        tabindex=\"0\"\n        class=\"loro-notification-row\"\n        [class.loro-notification-row--unread]=\"unread()\"\n        [style.transform]=\"'translate3d(' + dragX() + 'px, 0, 0)'\"\n        (click)=\"onRowClick()\"\n        (keydown.enter)=\"onRowKeydown($event)\"\n        (keydown.space)=\"onRowKeydown($event)\">\n        <span class=\"loro-notification-row__icon\">\n          <loro-icon [name]=\"icon()\" [size]=\"26\" [alt]=\"title()\" color=\"primary\" />\n        </span>\n        <span class=\"loro-notification-row__content\">\n          <span class=\"loro-notification-row__meta\">\n            <strong>{{ title() }}</strong>\n            @if (time()) {\n              <small>{{ time() }}</small>\n            }\n          </span>\n          <span class=\"loro-notification-row__message\">{{ message() }}</span>\n        </span>\n        @if (unread()) {\n          <span class=\"loro-notification-row__dot\" aria-label=\"Unread\"></span>\n        }\n        <button\n          type=\"button\"\n          class=\"loro-notification-row__delete-button\"\n          aria-label=\"Eliminar notificacion\"\n          (click)=\"onDeleteClick($event)\">\n          <loro-icon name=\"trash\" [size]=\"18\" alt=\"\" [decorative]=\"true\" color=\"danger\" />\n        </button>\n      </article>\n    </div>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-notification-row-shell{position:relative;overflow:hidden;background:transparent;touch-action:pan-y}.loro-notification-row-shell__delete{position:absolute;inset:0 0 0 auto;display:grid;width:8.75rem;align-content:center;justify-items:center;gap:.45rem;border:0;background:#ef4444;color:var(--loro-text-inverse);font:inherit;font-weight:850;cursor:pointer;opacity:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:opacity .18s ease,transform .18s ease}.loro-notification-row-shell--dragging .loro-notification-row-shell__delete,.loro-notification-row-shell--armed .loro-notification-row-shell__delete,.loro-notification-row-shell--removing .loro-notification-row-shell__delete{opacity:1}.loro-notification-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.85rem;width:100%;padding:.82rem .95rem;border:0;border-bottom:1px solid var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text);text-align:left;cursor:pointer;will-change:transform;transition:background .15s ease,transform .22s cubic-bezier(.2,.8,.2,1),opacity .18s ease}.loro-notification-row-shell--dragging .loro-notification-row{transition:background .15s ease}.loro-notification-row-shell--removing .loro-notification-row{opacity:.18;transform:translate3d(-100%,0,0)!important}:host:last-child .loro-notification-row{border-bottom-color:transparent}.loro-notification-row:hover{background:var(--loro-surface)}.loro-notification-row:focus-visible{position:relative;z-index:1;outline:2px solid rgba(108,60,255,.32);outline-offset:-2px}.loro-notification-row__icon{display:grid;width:2.5rem;height:2.5rem;place-items:center;border-radius:.8rem;background:transparent}.loro-notification-row__content{display:grid;gap:.2rem;min-width:0}.loro-notification-row__meta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.75rem}strong{overflow:hidden;color:var(--loro-text-strong);font-size:.92rem;font-weight:950;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}small,.loro-notification-row__message{color:var(--loro-muted);font-size:.82rem;font-weight:700;line-height:1.35}.loro-notification-row__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--loro-primary-500)}.loro-notification-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:.7rem;background:color-mix(in srgb,var(--loro-danger-text) 8%,transparent);cursor:pointer;opacity:0;transition:background .15s ease,opacity .15s ease,transform .15s ease}.loro-notification-row:hover .loro-notification-row__delete-button,.loro-notification-row:focus-visible .loro-notification-row__delete-button,.loro-notification-row__delete-button:focus-visible{opacity:1}.loro-notification-row__delete-button:hover,.loro-notification-row__delete-button:focus-visible{background:color-mix(in srgb,var(--loro-danger-text) 14%,transparent);outline:0;transform:translateY(-1px)}@media(max-width:1023.88px){.loro-notification-row{grid-template-columns:auto minmax(0,1fr) auto;padding:.82rem .8rem}.loro-notification-row__delete-button{display:none}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], time: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], unread: [{ type: i0.Input, args: [{ isSignal: true, alias: "unread", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowRemove: [{ type: i0.Output, args: ["rowRemove"] }] } });
 
 class LoroNotificationPanel {
@@ -3666,117 +2509,11 @@ class LoroNotificationPanel {
         this.clearAll.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotificationPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroNotificationPanel, isStandalone: true, selector: "loro-notification-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, presentation: { classPropertyName: "presentation", publicName: "presentation", isSignal: true, isRequired: false, transformFunction: null }, showMarkAll: { classPropertyName: "showMarkAll", publicName: "showMarkAll", isSignal: true, isRequired: false, transformFunction: null }, markAllLabel: { classPropertyName: "markAllLabel", publicName: "markAllLabel", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemRemove: "itemRemove", markAllRead: "markAllRead", clearAll: "clearAll" }, ngImport: i0, template: `
-    <section
-      class="loro-notification-panel"
-      [class.loro-notification-panel--sheet]="presentation() === 'sheet'"
-      [class.loro-notification-panel--empty]="items().length === 0">
-      @if (presentation() === 'sheet') {
-        <span class="loro-notification-panel__handle" aria-hidden="true"></span>
-      }
-      <header class="loro-notification-panel__header">
-        <h2>{{ title() }}</h2>
-        @if (items().length > 0) {
-          <div class="loro-notification-panel__actions">
-            @if (showMarkAll() && hasUnread()) {
-              <button
-                type="button"
-                (pointerdown)="$event.stopPropagation()"
-                (touchstart)="$event.stopPropagation()"
-                (click)="onMarkAllReadClick($event)">{{ markAllLabel() }}</button>
-            }
-            @if (showClearAll()) {
-              <button
-                type="button"
-                (pointerdown)="$event.stopPropagation()"
-                (touchstart)="$event.stopPropagation()"
-                (click)="onClearAllClick($event)">{{ clearAllLabel() }}</button>
-            }
-          </div>
-        }
-      </header>
-
-      @if (items().length > 0) {
-        <div class="loro-notification-panel__list">
-          @for (item of items(); track item.id) {
-            <loro-notification-row
-              [title]="item.title"
-              [message]="item.message"
-              [time]="item.time || ''"
-              [icon]="item.icon || 'info'"
-              [unread]="!!item.unread"
-              (rowClick)="itemClick.emit(item)"
-              (rowRemove)="itemRemove.emit(item)" />
-          }
-        </div>
-      } @else {
-        <div class="loro-notification-panel__empty">
-          <span class="loro-notification-panel__empty-icon">
-            <loro-icon [name]="emptyIcon()" [size]="64" [alt]="emptyTitle()" color="primary" />
-          </span>
-          <strong>{{ emptyTitle() }}</strong>
-          <p>{{ emptyMessage() }}</p>
-        </div>
-      }
-    </section>
-  `, isInline: true, styles: [":host{display:block;width:min(100%,24rem);min-height:0;font-family:var(--loro-font-brand)}.loro-notification-panel{overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;min-height:0;isolation:isolate;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text)}.loro-notification-panel__handle{display:none}.loro-notification-panel__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--loro-border-subtle)}.loro-notification-panel__actions{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.75rem}h2{margin:0;color:var(--loro-text-strong);font-size:1rem;font-weight:950}button{min-height:2.2rem;border:0;border-radius:.65rem;background:transparent;color:var(--loro-primary-700);font:inherit;font-size:.82rem;font-weight:850;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:hover,button:focus-visible{background:color-mix(in srgb,var(--loro-primary-500) 9%,transparent);outline:none}.loro-notification-panel__list{display:grid;align-content:start;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface)}.loro-notification-panel__empty{display:grid;min-height:18rem;place-items:center;align-content:center;gap:.75rem;padding:2rem;text-align:center;background:var(--loro-surface)}.loro-notification-panel__empty-icon{display:grid;width:6rem;height:6rem;place-items:center;border-radius:50%;background:#6c3cff0f}.loro-notification-panel__empty strong{color:var(--loro-text-strong);font-weight:950}.loro-notification-panel__empty p{max-width:16rem;margin:0;color:var(--loro-muted);font-weight:700;line-height:1.45}@media(min-width:1024px){.loro-notification-panel__list{max-height:min(28rem,60vh)}}@media(max-width:1023.88px){:host{display:grid;width:100%;height:100%;min-height:0}.loro-notification-panel,.loro-notification-panel--sheet{width:100%;height:100%;min-height:0;border-radius:1.15rem 1.15rem 0 0;background:var(--loro-surface)}.loro-notification-panel--sheet{display:grid;min-height:0;grid-template-rows:auto auto minmax(0,1fr)}.loro-notification-panel--sheet .loro-notification-panel__list{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface);touch-action:pan-y}.loro-notification-panel--sheet .loro-notification-panel__header{position:sticky;top:0;z-index:2;background:var(--loro-surface);align-items:center;grid-template-columns:minmax(0,1fr) auto;gap:.65rem}.loro-notification-panel--sheet.loro-notification-panel--empty .loro-notification-panel__header{border-bottom:0}.loro-notification-panel--sheet .loro-notification-panel__empty{min-height:0;height:100%;place-items:center;align-content:center;padding:1rem 1.15rem 1.4rem;background:var(--loro-surface)}.loro-notification-panel--sheet .loro-notification-panel__handle{display:block;width:3rem;height:.25rem;margin:.5rem auto .2rem;border-radius:999px;background:#62588259}.loro-notification-panel--sheet .loro-notification-panel__header{padding:.7rem .95rem}.loro-notification-panel__actions{display:inline-flex;width:auto;justify-content:flex-end;gap:.35rem}.loro-notification-panel__actions button{white-space:nowrap}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroNotificationRow, selector: "loro-notification-row", inputs: ["title", "message", "time", "icon", "unread"], outputs: ["rowClick", "rowRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroNotificationPanel, isStandalone: true, selector: "loro-notification-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, presentation: { classPropertyName: "presentation", publicName: "presentation", isSignal: true, isRequired: false, transformFunction: null }, showMarkAll: { classPropertyName: "showMarkAll", publicName: "showMarkAll", isSignal: true, isRequired: false, transformFunction: null }, markAllLabel: { classPropertyName: "markAllLabel", publicName: "markAllLabel", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, clearAllLabel: { classPropertyName: "clearAllLabel", publicName: "clearAllLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemRemove: "itemRemove", markAllRead: "markAllRead", clearAll: "clearAll" }, ngImport: i0, template: "<section\n      class=\"loro-notification-panel\"\n      [class.loro-notification-panel--sheet]=\"presentation() === 'sheet'\"\n      [class.loro-notification-panel--empty]=\"items().length === 0\"\n    >\n      @if (presentation() === 'sheet') {\n        <span class=\"loro-notification-panel__handle\" aria-hidden=\"true\"></span>\n      }\n      <header class=\"loro-notification-panel__header\">\n        <h2>{{ title() }}</h2>\n        @if (items().length > 0) {\n          <div class=\"loro-notification-panel__actions\">\n            @if (showMarkAll() && hasUnread()) {\n              <button\n                type=\"button\"\n                (pointerdown)=\"$event.stopPropagation()\"\n                (touchstart)=\"$event.stopPropagation()\"\n                (click)=\"onMarkAllReadClick($event)\"\n              >\n                {{ markAllLabel() }}\n              </button>\n            } @else if (showClearAll()) {\n              <button\n                type=\"button\"\n                (pointerdown)=\"$event.stopPropagation()\"\n                (touchstart)=\"$event.stopPropagation()\"\n                (click)=\"onClearAllClick($event)\"\n              >\n                {{ clearAllLabel() }}\n              </button>\n            }\n          </div>\n        }\n      </header>\n\n      @if (items().length > 0) {\n        <div class=\"loro-notification-panel__list\">\n          @for (item of items(); track item.id) {\n            <loro-notification-row\n              [title]=\"item.title\"\n              [message]=\"item.message\"\n              [time]=\"item.time || ''\"\n              [icon]=\"item.icon || 'info'\"\n              [unread]=\"!!item.unread\"\n              (rowClick)=\"itemClick.emit(item)\"\n              (rowRemove)=\"itemRemove.emit(item)\"\n            />\n          }\n        </div>\n      } @else {\n        <div class=\"loro-notification-panel__empty\">\n          <span class=\"loro-notification-panel__empty-icon\">\n            <loro-icon [name]=\"emptyIcon()\" [size]=\"64\" [alt]=\"emptyTitle()\" color=\"primary\" />\n          </span>\n          <strong>{{ emptyTitle() }}</strong>\n          <p>{{ emptyMessage() }}</p>\n        </div>\n      }\n    </section>", styles: [":host{display:block;width:min(100%,24rem);min-height:0;font-family:var(--loro-font-brand)}.loro-notification-panel{overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;min-height:0;isolation:isolate;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text)}.loro-notification-panel__handle{display:none}.loro-notification-panel__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--loro-border-subtle)}.loro-notification-panel__actions{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.75rem}h2{margin:0;color:var(--loro-text-strong);font-size:1rem;font-weight:950}button{min-height:2.2rem;border:0;border-radius:.65rem;background:transparent;color:var(--loro-primary-700);font:inherit;font-size:.82rem;font-weight:850;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:hover,button:focus-visible{background:color-mix(in srgb,var(--loro-primary-500) 9%,transparent);outline:none}.loro-notification-panel__list{display:grid;align-content:start;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface)}.loro-notification-panel__empty{display:grid;min-height:18rem;place-items:center;align-content:center;gap:.75rem;padding:2rem;text-align:center;background:var(--loro-surface)}.loro-notification-panel__empty-icon{display:grid;width:6rem;height:6rem;place-items:center;border-radius:50%;background:#6c3cff0f}.loro-notification-panel__empty strong{color:var(--loro-text-strong);font-weight:950}.loro-notification-panel__empty p{max-width:16rem;margin:0;color:var(--loro-muted);font-weight:700;line-height:1.45}@media(min-width:1024px){.loro-notification-panel__list{max-height:min(28rem,60vh)}}@media(max-width:1023.88px){:host{display:grid;width:100%;height:100%;min-height:0}.loro-notification-panel,.loro-notification-panel--sheet{width:100%;height:100%;min-height:0;border-radius:1.15rem 1.15rem 0 0;background:var(--loro-surface)}.loro-notification-panel--sheet{display:grid;min-height:0;grid-template-rows:auto auto minmax(0,1fr)}.loro-notification-panel--sheet .loro-notification-panel__list{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface);touch-action:pan-y}.loro-notification-panel--sheet .loro-notification-panel__header{position:sticky;top:0;z-index:2;background:var(--loro-surface);align-items:center;grid-template-columns:minmax(0,1fr) auto;gap:.65rem}.loro-notification-panel--sheet.loro-notification-panel--empty .loro-notification-panel__header{border-bottom:0}.loro-notification-panel--sheet .loro-notification-panel__empty{min-height:0;height:100%;place-items:center;align-content:center;padding:1rem 1.15rem 1.4rem;background:var(--loro-surface)}.loro-notification-panel--sheet .loro-notification-panel__handle{display:block;width:3rem;height:.25rem;margin:.5rem auto .2rem;border-radius:999px;background:#62588259}.loro-notification-panel--sheet .loro-notification-panel__header{padding:.7rem .95rem}.loro-notification-panel__actions{display:inline-flex;width:auto;justify-content:flex-end;gap:.35rem}.loro-notification-panel__actions button{white-space:nowrap}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroNotificationRow, selector: "loro-notification-row", inputs: ["title", "message", "time", "icon", "unread"], outputs: ["rowClick", "rowRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroNotificationPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-notification-panel', standalone: true, imports: [LoroIcon, LoroNotificationRow], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <section
-      class="loro-notification-panel"
-      [class.loro-notification-panel--sheet]="presentation() === 'sheet'"
-      [class.loro-notification-panel--empty]="items().length === 0">
-      @if (presentation() === 'sheet') {
-        <span class="loro-notification-panel__handle" aria-hidden="true"></span>
-      }
-      <header class="loro-notification-panel__header">
-        <h2>{{ title() }}</h2>
-        @if (items().length > 0) {
-          <div class="loro-notification-panel__actions">
-            @if (showMarkAll() && hasUnread()) {
-              <button
-                type="button"
-                (pointerdown)="$event.stopPropagation()"
-                (touchstart)="$event.stopPropagation()"
-                (click)="onMarkAllReadClick($event)">{{ markAllLabel() }}</button>
-            }
-            @if (showClearAll()) {
-              <button
-                type="button"
-                (pointerdown)="$event.stopPropagation()"
-                (touchstart)="$event.stopPropagation()"
-                (click)="onClearAllClick($event)">{{ clearAllLabel() }}</button>
-            }
-          </div>
-        }
-      </header>
-
-      @if (items().length > 0) {
-        <div class="loro-notification-panel__list">
-          @for (item of items(); track item.id) {
-            <loro-notification-row
-              [title]="item.title"
-              [message]="item.message"
-              [time]="item.time || ''"
-              [icon]="item.icon || 'info'"
-              [unread]="!!item.unread"
-              (rowClick)="itemClick.emit(item)"
-              (rowRemove)="itemRemove.emit(item)" />
-          }
-        </div>
-      } @else {
-        <div class="loro-notification-panel__empty">
-          <span class="loro-notification-panel__empty-icon">
-            <loro-icon [name]="emptyIcon()" [size]="64" [alt]="emptyTitle()" color="primary" />
-          </span>
-          <strong>{{ emptyTitle() }}</strong>
-          <p>{{ emptyMessage() }}</p>
-        </div>
-      }
-    </section>
-  `, styles: [":host{display:block;width:min(100%,24rem);min-height:0;font-family:var(--loro-font-brand)}.loro-notification-panel{overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;min-height:0;isolation:isolate;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text)}.loro-notification-panel__handle{display:none}.loro-notification-panel__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--loro-border-subtle)}.loro-notification-panel__actions{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.75rem}h2{margin:0;color:var(--loro-text-strong);font-size:1rem;font-weight:950}button{min-height:2.2rem;border:0;border-radius:.65rem;background:transparent;color:var(--loro-primary-700);font:inherit;font-size:.82rem;font-weight:850;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:hover,button:focus-visible{background:color-mix(in srgb,var(--loro-primary-500) 9%,transparent);outline:none}.loro-notification-panel__list{display:grid;align-content:start;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface)}.loro-notification-panel__empty{display:grid;min-height:18rem;place-items:center;align-content:center;gap:.75rem;padding:2rem;text-align:center;background:var(--loro-surface)}.loro-notification-panel__empty-icon{display:grid;width:6rem;height:6rem;place-items:center;border-radius:50%;background:#6c3cff0f}.loro-notification-panel__empty strong{color:var(--loro-text-strong);font-weight:950}.loro-notification-panel__empty p{max-width:16rem;margin:0;color:var(--loro-muted);font-weight:700;line-height:1.45}@media(min-width:1024px){.loro-notification-panel__list{max-height:min(28rem,60vh)}}@media(max-width:1023.88px){:host{display:grid;width:100%;height:100%;min-height:0}.loro-notification-panel,.loro-notification-panel--sheet{width:100%;height:100%;min-height:0;border-radius:1.15rem 1.15rem 0 0;background:var(--loro-surface)}.loro-notification-panel--sheet{display:grid;min-height:0;grid-template-rows:auto auto minmax(0,1fr)}.loro-notification-panel--sheet .loro-notification-panel__list{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface);touch-action:pan-y}.loro-notification-panel--sheet .loro-notification-panel__header{position:sticky;top:0;z-index:2;background:var(--loro-surface);align-items:center;grid-template-columns:minmax(0,1fr) auto;gap:.65rem}.loro-notification-panel--sheet.loro-notification-panel--empty .loro-notification-panel__header{border-bottom:0}.loro-notification-panel--sheet .loro-notification-panel__empty{min-height:0;height:100%;place-items:center;align-content:center;padding:1rem 1.15rem 1.4rem;background:var(--loro-surface)}.loro-notification-panel--sheet .loro-notification-panel__handle{display:block;width:3rem;height:.25rem;margin:.5rem auto .2rem;border-radius:999px;background:#62588259}.loro-notification-panel--sheet .loro-notification-panel__header{padding:.7rem .95rem}.loro-notification-panel__actions{display:inline-flex;width:auto;justify-content:flex-end;gap:.35rem}.loro-notification-panel__actions button{white-space:nowrap}}\n"] }]
+            args: [{ selector: 'loro-notification-panel', standalone: true, imports: [LoroIcon, LoroNotificationRow], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n      class=\"loro-notification-panel\"\n      [class.loro-notification-panel--sheet]=\"presentation() === 'sheet'\"\n      [class.loro-notification-panel--empty]=\"items().length === 0\"\n    >\n      @if (presentation() === 'sheet') {\n        <span class=\"loro-notification-panel__handle\" aria-hidden=\"true\"></span>\n      }\n      <header class=\"loro-notification-panel__header\">\n        <h2>{{ title() }}</h2>\n        @if (items().length > 0) {\n          <div class=\"loro-notification-panel__actions\">\n            @if (showMarkAll() && hasUnread()) {\n              <button\n                type=\"button\"\n                (pointerdown)=\"$event.stopPropagation()\"\n                (touchstart)=\"$event.stopPropagation()\"\n                (click)=\"onMarkAllReadClick($event)\"\n              >\n                {{ markAllLabel() }}\n              </button>\n            } @else if (showClearAll()) {\n              <button\n                type=\"button\"\n                (pointerdown)=\"$event.stopPropagation()\"\n                (touchstart)=\"$event.stopPropagation()\"\n                (click)=\"onClearAllClick($event)\"\n              >\n                {{ clearAllLabel() }}\n              </button>\n            }\n          </div>\n        }\n      </header>\n\n      @if (items().length > 0) {\n        <div class=\"loro-notification-panel__list\">\n          @for (item of items(); track item.id) {\n            <loro-notification-row\n              [title]=\"item.title\"\n              [message]=\"item.message\"\n              [time]=\"item.time || ''\"\n              [icon]=\"item.icon || 'info'\"\n              [unread]=\"!!item.unread\"\n              (rowClick)=\"itemClick.emit(item)\"\n              (rowRemove)=\"itemRemove.emit(item)\"\n            />\n          }\n        </div>\n      } @else {\n        <div class=\"loro-notification-panel__empty\">\n          <span class=\"loro-notification-panel__empty-icon\">\n            <loro-icon [name]=\"emptyIcon()\" [size]=\"64\" [alt]=\"emptyTitle()\" color=\"primary\" />\n          </span>\n          <strong>{{ emptyTitle() }}</strong>\n          <p>{{ emptyMessage() }}</p>\n        </div>\n      }\n    </section>", styles: [":host{display:block;width:min(100%,24rem);min-height:0;font-family:var(--loro-font-brand)}.loro-notification-panel{overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;height:100%;min-height:0;isolation:isolate;border:1px solid var(--loro-border-subtle);border-radius:1rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text)}.loro-notification-panel__handle{display:none}.loro-notification-panel__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--loro-border-subtle)}.loro-notification-panel__actions{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:.75rem}h2{margin:0;color:var(--loro-text-strong);font-size:1rem;font-weight:950}button{min-height:2.2rem;border:0;border-radius:.65rem;background:transparent;color:var(--loro-primary-700);font:inherit;font-size:.82rem;font-weight:850;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:hover,button:focus-visible{background:color-mix(in srgb,var(--loro-primary-500) 9%,transparent);outline:none}.loro-notification-panel__list{display:grid;align-content:start;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface)}.loro-notification-panel__empty{display:grid;min-height:18rem;place-items:center;align-content:center;gap:.75rem;padding:2rem;text-align:center;background:var(--loro-surface)}.loro-notification-panel__empty-icon{display:grid;width:6rem;height:6rem;place-items:center;border-radius:50%;background:#6c3cff0f}.loro-notification-panel__empty strong{color:var(--loro-text-strong);font-weight:950}.loro-notification-panel__empty p{max-width:16rem;margin:0;color:var(--loro-muted);font-weight:700;line-height:1.45}@media(min-width:1024px){.loro-notification-panel__list{max-height:min(28rem,60vh)}}@media(max-width:1023.88px){:host{display:grid;width:100%;height:100%;min-height:0}.loro-notification-panel,.loro-notification-panel--sheet{width:100%;height:100%;min-height:0;border-radius:1.15rem 1.15rem 0 0;background:var(--loro-surface)}.loro-notification-panel--sheet{display:grid;min-height:0;grid-template-rows:auto auto minmax(0,1fr)}.loro-notification-panel--sheet .loro-notification-panel__list{min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;background:var(--loro-surface);touch-action:pan-y}.loro-notification-panel--sheet .loro-notification-panel__header{position:sticky;top:0;z-index:2;background:var(--loro-surface);align-items:center;grid-template-columns:minmax(0,1fr) auto;gap:.65rem}.loro-notification-panel--sheet.loro-notification-panel--empty .loro-notification-panel__header{border-bottom:0}.loro-notification-panel--sheet .loro-notification-panel__empty{min-height:0;height:100%;place-items:center;align-content:center;padding:1rem 1.15rem 1.4rem;background:var(--loro-surface)}.loro-notification-panel--sheet .loro-notification-panel__handle{display:block;width:3rem;height:.25rem;margin:.5rem auto .2rem;border-radius:999px;background:#62588259}.loro-notification-panel--sheet .loro-notification-panel__header{padding:.7rem .95rem}.loro-notification-panel__actions{display:inline-flex;width:auto;justify-content:flex-end;gap:.35rem}.loro-notification-panel__actions button{white-space:nowrap}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], presentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "presentation", required: false }] }], showMarkAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMarkAll", required: false }] }], markAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "markAllLabel", required: false }] }], showClearAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearAll", required: false }] }], clearAllLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAllLabel", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemRemove: [{ type: i0.Output, args: ["itemRemove"] }], markAllRead: [{ type: i0.Output, args: ["markAllRead"] }], clearAll: [{ type: i0.Output, args: ["clearAll"] }] } });
 
 class LoroSpinner {
@@ -3827,51 +2564,13 @@ class LoroToast {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroToast, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroToast, isStandalone: true, selector: "loro-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { properties: { "class.loro-toast-host--inline": "position() === 'inline'" } }, ngImport: i0, template: `
-    @if (visible()) {
-      <aside
-        class="loro-toast"
-        [class]="'loro-toast loro-toast--' + variant() + ' loro-toast--' + position()"
-        [attr.role]="variant() === 'error' ? 'alert' : 'status'">
-        <span class="loro-toast__icon">
-          @if (variant() === 'loading') {
-            <span class="loro-toast__spinner" aria-hidden="true"></span>
-          } @else {
-            <loro-icon [name]="resolvedIcon()" [size]="24" [alt]="message()" [color]="iconColor()" />
-          }
-        </span>
-        <span>{{ message() }}</span>
-        @if (dismissible()) {
-          <button type="button" (click)="dismiss.emit()" aria-label="Dismiss notification">x</button>
-        }
-      </aside>
-    }
-  `, isInline: true, styles: [":host{z-index:1000;display:block;font-family:var(--loro-font-brand);pointer-events:none}:host(.loro-toast-host--inline){width:100%}.loro-toast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;width:min(24rem,calc(100vw - 2rem));min-height:3.6rem;padding:.85rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:.8rem;background:var(--loro-surface);color:var(--loro-text-strong);box-shadow:var(--loro-shadow-panel);font-weight:800;pointer-events:auto}.loro-toast--top-right{position:fixed;top:1rem;right:1rem}.loro-toast--bottom-right{position:fixed;right:1rem;bottom:1rem}.loro-toast--bottom-center{position:fixed;bottom:1rem;left:50%;transform:translate(-50%)}.loro-toast--inline{position:static;width:100%;transform:none}.loro-toast__icon{display:grid;width:1.8rem;height:1.8rem;place-items:center}.loro-toast__spinner{width:1.35rem;height:1.35rem;border:2px solid rgba(108,60,255,.18);border-top-color:var(--loro-primary-500);border-radius:50%;animation:loro-toast-spin .85s linear infinite}button{border:0;background:transparent;color:var(--loro-muted);font:inherit;cursor:pointer}@keyframes loro-toast-spin{to{transform:rotate(360deg)}}@media(max-width:1023.88px){.loro-toast:not(.loro-toast--inline){right:1rem;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);left:1rem;width:auto;transform:none}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroToast, isStandalone: true, selector: "loro-toast", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { properties: { "class.loro-toast-host--inline": "position() === 'inline'" } }, ngImport: i0, template: "@if (visible()) {\n      <aside\n        class=\"loro-toast\"\n        [class]=\"'loro-toast loro-toast--' + variant() + ' loro-toast--' + position()\"\n        [attr.role]=\"variant() === 'error' ? 'alert' : 'status'\">\n        <span class=\"loro-toast__icon\">\n          @if (variant() === 'loading') {\n            <span class=\"loro-toast__spinner\" aria-hidden=\"true\"></span>\n          } @else {\n            <loro-icon [name]=\"resolvedIcon()\" [size]=\"24\" [alt]=\"message()\" [color]=\"iconColor()\" />\n          }\n        </span>\n        <span>{{ message() }}</span>\n        @if (dismissible()) {\n          <button type=\"button\" (click)=\"dismiss.emit()\" aria-label=\"Dismiss notification\">x</button>\n        }\n      </aside>\n    }", styles: [":host{z-index:1000;display:block;font-family:var(--loro-font-brand);pointer-events:none}:host(.loro-toast-host--inline){width:100%}.loro-toast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;width:min(24rem,100vw - 2rem);min-height:3.6rem;padding:.85rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:.8rem;background:var(--loro-surface);color:var(--loro-text-strong);box-shadow:var(--loro-shadow-panel);font-weight:800;pointer-events:auto}.loro-toast--top-right{position:fixed;top:1rem;right:1rem}.loro-toast--bottom-right{position:fixed;right:1rem;bottom:1rem}.loro-toast--bottom-center{position:fixed;bottom:1rem;left:50%;transform:translate(-50%)}.loro-toast--inline{position:static;width:100%;transform:none}.loro-toast__icon{display:grid;width:1.8rem;height:1.8rem;place-items:center}.loro-toast__spinner{width:1.35rem;height:1.35rem;border:2px solid rgba(108,60,255,.18);border-top-color:var(--loro-primary-500);border-radius:50%;animation:loro-toast-spin .85s linear infinite}button{border:0;background:transparent;color:var(--loro-muted);font:inherit;cursor:pointer}@keyframes loro-toast-spin{to{transform:rotate(360deg)}}@media(max-width:1023.88px){.loro-toast:not(.loro-toast--inline){right:1rem;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);left:1rem;width:auto;transform:none}}\n"], dependencies: [{ kind: "component", type: LoroIcon, 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: LoroToast, decorators: [{
             type: Component,
             args: [{ selector: 'loro-toast', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.loro-toast-host--inline]': "position() === 'inline'",
-                    }, template: `
-    @if (visible()) {
-      <aside
-        class="loro-toast"
-        [class]="'loro-toast loro-toast--' + variant() + ' loro-toast--' + position()"
-        [attr.role]="variant() === 'error' ? 'alert' : 'status'">
-        <span class="loro-toast__icon">
-          @if (variant() === 'loading') {
-            <span class="loro-toast__spinner" aria-hidden="true"></span>
-          } @else {
-            <loro-icon [name]="resolvedIcon()" [size]="24" [alt]="message()" [color]="iconColor()" />
-          }
-        </span>
-        <span>{{ message() }}</span>
-        @if (dismissible()) {
-          <button type="button" (click)="dismiss.emit()" aria-label="Dismiss notification">x</button>
-        }
-      </aside>
-    }
-  `, styles: [":host{z-index:1000;display:block;font-family:var(--loro-font-brand);pointer-events:none}:host(.loro-toast-host--inline){width:100%}.loro-toast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;width:min(24rem,calc(100vw - 2rem));min-height:3.6rem;padding:.85rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:.8rem;background:var(--loro-surface);color:var(--loro-text-strong);box-shadow:var(--loro-shadow-panel);font-weight:800;pointer-events:auto}.loro-toast--top-right{position:fixed;top:1rem;right:1rem}.loro-toast--bottom-right{position:fixed;right:1rem;bottom:1rem}.loro-toast--bottom-center{position:fixed;bottom:1rem;left:50%;transform:translate(-50%)}.loro-toast--inline{position:static;width:100%;transform:none}.loro-toast__icon{display:grid;width:1.8rem;height:1.8rem;place-items:center}.loro-toast__spinner{width:1.35rem;height:1.35rem;border:2px solid rgba(108,60,255,.18);border-top-color:var(--loro-primary-500);border-radius:50%;animation:loro-toast-spin .85s linear infinite}button{border:0;background:transparent;color:var(--loro-muted);font:inherit;cursor:pointer}@keyframes loro-toast-spin{to{transform:rotate(360deg)}}@media(max-width:1023.88px){.loro-toast:not(.loro-toast--inline){right:1rem;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);left:1rem;width:auto;transform:none}}\n"] }]
+                    }, template: "@if (visible()) {\n      <aside\n        class=\"loro-toast\"\n        [class]=\"'loro-toast loro-toast--' + variant() + ' loro-toast--' + position()\"\n        [attr.role]=\"variant() === 'error' ? 'alert' : 'status'\">\n        <span class=\"loro-toast__icon\">\n          @if (variant() === 'loading') {\n            <span class=\"loro-toast__spinner\" aria-hidden=\"true\"></span>\n          } @else {\n            <loro-icon [name]=\"resolvedIcon()\" [size]=\"24\" [alt]=\"message()\" [color]=\"iconColor()\" />\n          }\n        </span>\n        <span>{{ message() }}</span>\n        @if (dismissible()) {\n          <button type=\"button\" (click)=\"dismiss.emit()\" aria-label=\"Dismiss notification\">x</button>\n        }\n      </aside>\n    }", styles: [":host{z-index:1000;display:block;font-family:var(--loro-font-brand);pointer-events:none}:host(.loro-toast-host--inline){width:100%}.loro-toast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;width:min(24rem,100vw - 2rem);min-height:3.6rem;padding:.85rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:.8rem;background:var(--loro-surface);color:var(--loro-text-strong);box-shadow:var(--loro-shadow-panel);font-weight:800;pointer-events:auto}.loro-toast--top-right{position:fixed;top:1rem;right:1rem}.loro-toast--bottom-right{position:fixed;right:1rem;bottom:1rem}.loro-toast--bottom-center{position:fixed;bottom:1rem;left:50%;transform:translate(-50%)}.loro-toast--inline{position:static;width:100%;transform:none}.loro-toast__icon{display:grid;width:1.8rem;height:1.8rem;place-items:center}.loro-toast__spinner{width:1.35rem;height:1.35rem;border:2px solid rgba(108,60,255,.18);border-top-color:var(--loro-primary-500);border-radius:50%;animation:loro-toast-spin .85s linear infinite}button{border:0;background:transparent;color:var(--loro-muted);font:inherit;cursor:pointer}@keyframes loro-toast-spin{to{transform:rotate(360deg)}}@media(max-width:1023.88px){.loro-toast:not(.loro-toast--inline){right:1rem;bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);left:1rem;width:auto;transform:none}}\n"] }]
         }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
 
 let nextLoroAuthFieldId = 0;
@@ -3913,93 +2612,11 @@ 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 }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", valueChange: "valueChange" }, ngImport: i0, template: `
-    <label
-      class="loro-auth-field"
-      [class.loro-auth-field--selected]="selected()"
-      [class.loro-auth-field--error]="hasError()"
-    >
-      <span class="sr-only">{{ label() }}</span>
-      <span class="loro-auth-field__icon">
-        <loro-icon [name]="icon()" [size]="28" [alt]="label()" />
-      </span>
-      <input
-        class="loro-auth-field__input"
-        [type]="resolvedType()"
-        [attr.autocomplete]="autocomplete()"
-        [placeholder]="placeholder()"
-        [value]="value()"
-        [attr.aria-invalid]="hasError() ? 'true' : null"
-        [disabled]="disabled()"
-        [readonly]="readonly()"
-        [required]="required()"
-        [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
-        (input)="updateValue(($any($event.target).value ?? '').toString())"
-        (blur)="markAsTouched()"
-      />
-      @if (showToggle()) {
-        <button
-          type="button"
-          class="loro-auth-field__toggle"
-          (click)="toggleVisibility()"
-          [attr.aria-label]="passwordVisible() ? 'Ocultar contenido' : 'Mostrar contenido'"
-        >
-          <loro-icon name="eye" [size]="26" alt="Mostrar contenido" />
-        </button>
-      }
-    </label>
-    @if (hasError() && errorText()) {
-      <span class="loro-auth-field__error" [id]="errorId">
-        <loro-icon name="shield-alert" [size]="15" color="danger" [decorative]="true" />
-        <span>{{ errorText() }}</span>
-      </span>
-    }
-  `, isInline: true, 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"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", 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 }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", valueChange: "valueChange" }, ngImport: i0, template: "<label\n      class=\"loro-auth-field\"\n      [class.loro-auth-field--selected]=\"selected()\"\n      [class.loro-auth-field--error]=\"hasError()\"\n    >\n      <span class=\"sr-only\">{{ label() }}</span>\n      <span class=\"loro-auth-field__icon\">\n        <loro-icon [name]=\"icon()\" [size]=\"28\" [alt]=\"label()\" />\n      </span>\n      <input\n        class=\"loro-auth-field__input\"\n        [type]=\"resolvedType()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"value()\"\n        [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [required]=\"required()\"\n        [attr.aria-describedby]=\"hasError() && errorText() ? errorId : null\"\n        (input)=\"updateValue(($any($event.target).value ?? '').toString())\"\n        (blur)=\"markAsTouched()\"\n      />\n      @if (showToggle()) {\n        <button\n          type=\"button\"\n          class=\"loro-auth-field__toggle\"\n          (click)=\"toggleVisibility()\"\n          [attr.aria-label]=\"passwordVisible() ? 'Ocultar contenido' : 'Mostrar contenido'\"\n        >\n          <loro-icon name=\"eye\" [size]=\"26\" alt=\"Mostrar contenido\" />\n        </button>\n      }\n    </label>\n    @if (hasError() && errorText()) {\n      <span class=\"loro-auth-field__error\" [id]=\"errorId\">\n        <loro-icon name=\"shield-alert\" [size]=\"15\" color=\"danger\" [decorative]=\"true\" />\n        <span>{{ errorText() }}</span>\n      </span>\n    }", 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"], dependencies: [{ kind: "component", type: LoroIcon, 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: LoroAuthField, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-auth-field', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <label
-      class="loro-auth-field"
-      [class.loro-auth-field--selected]="selected()"
-      [class.loro-auth-field--error]="hasError()"
-    >
-      <span class="sr-only">{{ label() }}</span>
-      <span class="loro-auth-field__icon">
-        <loro-icon [name]="icon()" [size]="28" [alt]="label()" />
-      </span>
-      <input
-        class="loro-auth-field__input"
-        [type]="resolvedType()"
-        [attr.autocomplete]="autocomplete()"
-        [placeholder]="placeholder()"
-        [value]="value()"
-        [attr.aria-invalid]="hasError() ? 'true' : null"
-        [disabled]="disabled()"
-        [readonly]="readonly()"
-        [required]="required()"
-        [attr.aria-describedby]="hasError() && errorText() ? errorId : null"
-        (input)="updateValue(($any($event.target).value ?? '').toString())"
-        (blur)="markAsTouched()"
-      />
-      @if (showToggle()) {
-        <button
-          type="button"
-          class="loro-auth-field__toggle"
-          (click)="toggleVisibility()"
-          [attr.aria-label]="passwordVisible() ? 'Ocultar contenido' : 'Mostrar contenido'"
-        >
-          <loro-icon name="eye" [size]="26" alt="Mostrar contenido" />
-        </button>
-      }
-    </label>
-    @if (hasError() && errorText()) {
-      <span class="loro-auth-field__error" [id]="errorId">
-        <loro-icon name="shield-alert" [size]="15" color="danger" [decorative]="true" />
-        <span>{{ errorText() }}</span>
-      </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"] }]
+            args: [{ selector: 'loro-auth-field', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n      class=\"loro-auth-field\"\n      [class.loro-auth-field--selected]=\"selected()\"\n      [class.loro-auth-field--error]=\"hasError()\"\n    >\n      <span class=\"sr-only\">{{ label() }}</span>\n      <span class=\"loro-auth-field__icon\">\n        <loro-icon [name]=\"icon()\" [size]=\"28\" [alt]=\"label()\" />\n      </span>\n      <input\n        class=\"loro-auth-field__input\"\n        [type]=\"resolvedType()\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [placeholder]=\"placeholder()\"\n        [value]=\"value()\"\n        [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly()\"\n        [required]=\"required()\"\n        [attr.aria-describedby]=\"hasError() && errorText() ? errorId : null\"\n        (input)=\"updateValue(($any($event.target).value ?? '').toString())\"\n        (blur)=\"markAsTouched()\"\n      />\n      @if (showToggle()) {\n        <button\n          type=\"button\"\n          class=\"loro-auth-field__toggle\"\n          (click)=\"toggleVisibility()\"\n          [attr.aria-label]=\"passwordVisible() ? 'Ocultar contenido' : 'Mostrar contenido'\"\n        >\n          <loro-icon name=\"eye\" [size]=\"26\" alt=\"Mostrar contenido\" />\n        </button>\n      }\n    </label>\n    @if (hasError() && errorText()) {\n      <span class=\"loro-auth-field__error\" [id]=\"errorId\">\n        <loro-icon name=\"shield-alert\" [size]=\"15\" color=\"danger\" [decorative]=\"true\" />\n        <span>{{ errorText() }}</span>\n      </span>\n    }", 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: 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 }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", 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 }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class LoroCheckbox {
@@ -4021,77 +2638,11 @@ class LoroCheckbox {
         this.checked.set(checked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroCheckbox, isStandalone: true, selector: "loro-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", 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 }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, ngImport: i0, template: `
-    <label
-      class="loro-checkbox"
-      [class.loro-checkbox--checked]="checked()"
-      [class.loro-checkbox--invalid]="showError()"
-      [class.loro-checkbox--disabled]="disabled()"
-    >
-      <input
-        type="checkbox"
-        class="loro-checkbox__native"
-        [checked]="checked()"
-        [disabled]="disabled()"
-        [required]="required()"
-        [readonly]="readonly()"
-        (change)="toggle(($any($event.target).checked))"
-        (blur)="touched.set(true)"
-      />
-      <span class="loro-checkbox__box" aria-hidden="true"></span>
-      <span class="loro-checkbox__content">
-        <span class="loro-checkbox__label">
-          @if (text()) {
-            {{ text() }}
-          } @else {
-            <ng-content></ng-content>
-          }
-        </span>
-        @if (errorText()) {
-          <span class="loro-checkbox__error">{{ errorText() }}</span>
-        } @else if (helperText()) {
-          <span class="loro-checkbox__helper">{{ helperText() }}</span>
-        }
-      </span>
-    </label>
-  `, isInline: true, 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroCheckbox, isStandalone: true, selector: "loro-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", 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 }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touched: "touchedChange" }, ngImport: i0, template: "<label\n      class=\"loro-checkbox\"\n      [class.loro-checkbox--checked]=\"checked()\"\n      [class.loro-checkbox--invalid]=\"showError()\"\n      [class.loro-checkbox--disabled]=\"disabled()\"\n    >\n      <input\n        type=\"checkbox\"\n        class=\"loro-checkbox__native\"\n        [checked]=\"checked()\"\n        [disabled]=\"disabled()\"\n        [required]=\"required()\"\n        [readonly]=\"readonly()\"\n        (change)=\"toggle(($any($event.target).checked))\"\n        (blur)=\"touched.set(true)\"\n      />\n      <span class=\"loro-checkbox__box\" aria-hidden=\"true\"></span>\n      <span class=\"loro-checkbox__content\">\n        <span class=\"loro-checkbox__label\">\n          @if (text()) {\n            {{ text() }}\n          } @else {\n            <ng-content></ng-content>\n          }\n        </span>\n        @if (errorText()) {\n          <span class=\"loro-checkbox__error\">{{ errorText() }}</span>\n        } @else if (helperText()) {\n          <span class=\"loro-checkbox__helper\">{{ helperText() }}</span>\n        }\n      </span>\n    </label>", styles: ["@charset \"UTF-8\";: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"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroCheckbox, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <label
-      class="loro-checkbox"
-      [class.loro-checkbox--checked]="checked()"
-      [class.loro-checkbox--invalid]="showError()"
-      [class.loro-checkbox--disabled]="disabled()"
-    >
-      <input
-        type="checkbox"
-        class="loro-checkbox__native"
-        [checked]="checked()"
-        [disabled]="disabled()"
-        [required]="required()"
-        [readonly]="readonly()"
-        (change)="toggle(($any($event.target).checked))"
-        (blur)="touched.set(true)"
-      />
-      <span class="loro-checkbox__box" aria-hidden="true"></span>
-      <span class="loro-checkbox__content">
-        <span class="loro-checkbox__label">
-          @if (text()) {
-            {{ text() }}
-          } @else {
-            <ng-content></ng-content>
-          }
-        </span>
-        @if (errorText()) {
-          <span class="loro-checkbox__error">{{ errorText() }}</span>
-        } @else if (helperText()) {
-          <span class="loro-checkbox__helper">{{ helperText() }}</span>
-        }
-      </span>
-    </label>
-  `, 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"] }]
+            args: [{ selector: 'loro-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n      class=\"loro-checkbox\"\n      [class.loro-checkbox--checked]=\"checked()\"\n      [class.loro-checkbox--invalid]=\"showError()\"\n      [class.loro-checkbox--disabled]=\"disabled()\"\n    >\n      <input\n        type=\"checkbox\"\n        class=\"loro-checkbox__native\"\n        [checked]=\"checked()\"\n        [disabled]=\"disabled()\"\n        [required]=\"required()\"\n        [readonly]=\"readonly()\"\n        (change)=\"toggle(($any($event.target).checked))\"\n        (blur)=\"touched.set(true)\"\n      />\n      <span class=\"loro-checkbox__box\" aria-hidden=\"true\"></span>\n      <span class=\"loro-checkbox__content\">\n        <span class=\"loro-checkbox__label\">\n          @if (text()) {\n            {{ text() }}\n          } @else {\n            <ng-content></ng-content>\n          }\n        </span>\n        @if (errorText()) {\n          <span class=\"loro-checkbox__error\">{{ errorText() }}</span>\n        } @else if (helperText()) {\n          <span class=\"loro-checkbox__helper\">{{ helperText() }}</span>\n        }\n      </span>\n    </label>", styles: ["@charset \"UTF-8\";: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 }] }] } });
 
 class LoroDropdown {
@@ -4114,45 +2665,11 @@ class LoroDropdown {
         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 }, 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 }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", valueChange: "valueChange" }, ngImport: i0, template: `
-    <label class="loro-dropdown">
-      @if (label()) {
-        <span class="loro-dropdown__label">{{ label() }}</span>
-      }
-      <span class="loro-dropdown__control">
-        <select [value]="value()" [disabled]="disabled() || readonly()" [required]="required()" (change)="updateValue(($any($event.target).value ?? '').toString())" (blur)="markAsTouched()">
-          @if (placeholder()) {
-            <option value="" disabled>{{ placeholder() }}</option>
-          }
-          @for (option of options(); track option.value) {
-            <option [value]="option.value">{{ option.label }}</option>
-          }
-        </select>
-        <loro-icon name="chevron-down" [size]="22" alt="Abrir opciones" color="primary" />
-      </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, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", valueChange: "valueChange" }, ngImport: i0, template: "<label class=\"loro-dropdown\">\n      @if (label()) {\n        <span class=\"loro-dropdown__label\">{{ label() }}</span>\n      }\n      <span class=\"loro-dropdown__control\">\n        <select [value]=\"value()\" [disabled]=\"disabled() || readonly()\" [required]=\"required()\" (change)=\"updateValue(($any($event.target).value ?? '').toString())\" (blur)=\"markAsTouched()\">\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n          }\n        </select>\n        <loro-icon name=\"chevron-down\" [size]=\"22\" alt=\"Abrir opciones\" color=\"primary\" />\n      </span>\n    </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"], dependencies: [{ kind: "component", type: LoroIcon, 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], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <label class="loro-dropdown">
-      @if (label()) {
-        <span class="loro-dropdown__label">{{ label() }}</span>
-      }
-      <span class="loro-dropdown__control">
-        <select [value]="value()" [disabled]="disabled() || readonly()" [required]="required()" (change)="updateValue(($any($event.target).value ?? '').toString())" (blur)="markAsTouched()">
-          @if (placeholder()) {
-            <option value="" disabled>{{ placeholder() }}</option>
-          }
-          @for (option of options(); track option.value) {
-            <option [value]="option.value">{{ option.label }}</option>
-          }
-        </select>
-        <loro-icon name="chevron-down" [size]="22" alt="Abrir opciones" color="primary" />
-      </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"] }]
+            args: [{ selector: 'loro-dropdown', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"loro-dropdown\">\n      @if (label()) {\n        <span class=\"loro-dropdown__label\">{{ label() }}</span>\n      }\n      <span class=\"loro-dropdown__control\">\n        <select [value]=\"value()\" [disabled]=\"disabled() || readonly()\" [required]=\"required()\" (change)=\"updateValue(($any($event.target).value ?? '').toString())\" (blur)=\"markAsTouched()\">\n          @if (placeholder()) {\n            <option value=\"\" disabled>{{ placeholder() }}</option>\n          }\n          @for (option of options(); track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n          }\n        </select>\n        <loro-icon name=\"chevron-down\" [size]=\"22\" alt=\"Abrir opciones\" color=\"primary\" />\n      </span>\n    </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 }] }, { 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 }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class LoroFilterChip {
@@ -4162,25 +2679,11 @@ class LoroFilterChip {
     active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     selected = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroFilterChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroFilterChip, isStandalone: true, selector: "loro-filter-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: `
-    <button type="button" class="loro-filter-chip" [class.loro-filter-chip--active]="active()" (click)="selected.emit(value())">
-      @if (icon()) {
-        <loro-icon [name]="icon()!" [size]="20" [alt]="label()" [color]="active() ? 'inverse' : 'primary'" />
-      }
-      <span>{{ label() }}</span>
-    </button>
-  `, isInline: true, styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-filter-chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.55rem;padding:.55rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface);color:var(--loro-muted-strong);font:inherit;font-size:.9rem;font-weight:850;cursor:pointer;white-space:nowrap}.loro-filter-chip--active{border-color:transparent;background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff;box-shadow:var(--loro-shadow-button)}@media(max-width:640px){.loro-filter-chip{gap:.4rem;min-height:2.3rem;padding:.48rem .78rem;font-size:clamp(.78rem,2.9vw,.9rem)}}@media(max-width:430px){.loro-filter-chip{gap:.34rem;min-height:2.2rem;padding:.42rem .7rem;font-size:clamp(.74rem,2.8vw,.84rem)}}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroFilterChip, isStandalone: true, selector: "loro-filter-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<button type=\"button\" class=\"loro-filter-chip\" [class.loro-filter-chip--active]=\"active()\" (click)=\"selected.emit(value())\">\n      @if (icon()) {\n        <loro-icon [name]=\"icon()!\" [size]=\"20\" [alt]=\"label()\" [color]=\"active() ? 'inverse' : 'primary'\" />\n      }\n      <span>{{ label() }}</span>\n    </button>", styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-filter-chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.55rem;padding:.55rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface);color:var(--loro-muted-strong);font:inherit;font-size:.9rem;font-weight:850;cursor:pointer;white-space:nowrap}.loro-filter-chip--active{border-color:transparent;background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff;box-shadow:var(--loro-shadow-button)}@media(max-width:640px){.loro-filter-chip{gap:.4rem;min-height:2.3rem;padding:.48rem .78rem;font-size:clamp(.78rem,2.9vw,.9rem)}}@media(max-width:430px){.loro-filter-chip{gap:.34rem;min-height:2.2rem;padding:.42rem .7rem;font-size:clamp(.74rem,2.8vw,.84rem)}}\n"], dependencies: [{ kind: "component", type: LoroIcon, 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: LoroFilterChip, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-filter-chip', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <button type="button" class="loro-filter-chip" [class.loro-filter-chip--active]="active()" (click)="selected.emit(value())">
-      @if (icon()) {
-        <loro-icon [name]="icon()!" [size]="20" [alt]="label()" [color]="active() ? 'inverse' : 'primary'" />
-      }
-      <span>{{ label() }}</span>
-    </button>
-  `, styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-filter-chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.55rem;padding:.55rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface);color:var(--loro-muted-strong);font:inherit;font-size:.9rem;font-weight:850;cursor:pointer;white-space:nowrap}.loro-filter-chip--active{border-color:transparent;background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff;box-shadow:var(--loro-shadow-button)}@media(max-width:640px){.loro-filter-chip{gap:.4rem;min-height:2.3rem;padding:.48rem .78rem;font-size:clamp(.78rem,2.9vw,.9rem)}}@media(max-width:430px){.loro-filter-chip{gap:.34rem;min-height:2.2rem;padding:.42rem .7rem;font-size:clamp(.74rem,2.8vw,.84rem)}}\n"] }]
+            args: [{ selector: 'loro-filter-chip', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" class=\"loro-filter-chip\" [class.loro-filter-chip--active]=\"active()\" (click)=\"selected.emit(value())\">\n      @if (icon()) {\n        <loro-icon [name]=\"icon()!\" [size]=\"20\" [alt]=\"label()\" [color]=\"active() ? 'inverse' : 'primary'\" />\n      }\n      <span>{{ label() }}</span>\n    </button>", styles: [":host{display:inline-flex;font-family:var(--loro-font-brand)}.loro-filter-chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.55rem;padding:.55rem 1rem;border:1px solid var(--loro-border-subtle);border-radius:var(--loro-radius-pill);background:var(--loro-surface);color:var(--loro-muted-strong);font:inherit;font-size:.9rem;font-weight:850;cursor:pointer;white-space:nowrap}.loro-filter-chip--active{border-color:transparent;background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff;box-shadow:var(--loro-shadow-button)}@media(max-width:640px){.loro-filter-chip{gap:.4rem;min-height:2.3rem;padding:.48rem .78rem;font-size:clamp(.78rem,2.9vw,.9rem)}}@media(max-width:430px){.loro-filter-chip{gap:.34rem;min-height:2.2rem;padding:.42rem .7rem;font-size:clamp(.74rem,2.8vw,.84rem)}}\n"] }]
         }], 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"] }] } });
 
 class LoroSegmentedControl {
@@ -4202,43 +2705,13 @@ class LoroSegmentedControl {
         this.valueChange.emit(value);
     }
     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: 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 }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", valueChange: "valueChange" }, host: { properties: { "style.--loro-segmented-count": "options().length" } }, ngImport: i0, template: `
-    <div class="loro-segmented-control" role="tablist">
-      @for (option of options(); track option.value) {
-        <button
-          type="button"
-          role="tab"
-          [attr.aria-selected]="value() === option.value"
-          [class.loro-segmented-control__button--active]="value() === option.value"
-          class="loro-segmented-control__button"
-          [disabled]="disabled() || readonly()"
-          (click)="selectValue(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 });
+    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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", valueChange: "valueChange" }, host: { properties: { "style.--loro-segmented-count": "options().length" } }, ngImport: i0, template: "<div class=\"loro-segmented-control\" role=\"tablist\">\n      @for (option of options(); track option.value) {\n        <button\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"value() === option.value\"\n          [class.loro-segmented-control__button--active]=\"value() === option.value\"\n          class=\"loro-segmented-control__button\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"selectValue(option.value)\">\n          {{ option.label }}\n        </button>\n      }\n    </div>", 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 });
 }
 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">
-      @for (option of options(); track option.value) {
-        <button
-          type="button"
-          role="tab"
-          [attr.aria-selected]="value() === option.value"
-          [class.loro-segmented-control__button--active]="value() === option.value"
-          class="loro-segmented-control__button"
-          [disabled]="disabled() || readonly()"
-          (click)="selectValue(option.value)">
-          {{ option.label }}
-        </button>
-      }
-    </div>
-  `, host: {
+            args: [{ selector: 'loro-segmented-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+                    }, template: "<div class=\"loro-segmented-control\" role=\"tablist\">\n      @for (option of options(); track option.value) {\n        <button\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"value() === option.value\"\n          [class.loro-segmented-control__button--active]=\"value() === option.value\"\n          class=\"loro-segmented-control__button\"\n          [disabled]=\"disabled() || readonly()\"\n          (click)=\"selectValue(option.value)\">\n          {{ option.label }}\n        </button>\n      }\n    </div>", 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: 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 }] }], 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 }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class LoroSelect {
@@ -4252,49 +2725,11 @@ class LoroSelect {
     actionLabel = input('', ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
     action = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroSelect, isStandalone: true, selector: "loro-select", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: `
-    <article class="loro-select" [class.loro-select--selected]="selected()">
-      <span class="loro-select__icon">
-        <loro-icon [name]="icon()" [size]="44" [alt]="title()" color="primary-deep" />
-      </span>
-      <div class="loro-select__copy">
-        <h3>{{ title() }} @if (badge()) {<loro-badge [label]="badge()" variant="info" />}</h3>
-        <p>{{ subtitle() }}</p>
-        <small>{{ meta() }}</small>
-      </div>
-      <div class="loro-select__side">
-        @if (status()) {
-          <span class="loro-select__status">{{ status() }}</span>
-        }
-        @if (actionLabel()) {
-          <loro-button [label]="actionLabel()" variant="outline" (buttonClick)="action.emit()" />
-        }
-      </div>
-    </article>
-  `, isInline: true, 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"], dependencies: [{ kind: "component", type: LoroBadge, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroSelect, isStandalone: true, selector: "loro-select", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: "<article class=\"loro-select\" [class.loro-select--selected]=\"selected()\">\n      <span class=\"loro-select__icon\">\n        <loro-icon [name]=\"icon()\" [size]=\"44\" [alt]=\"title()\" color=\"primary-deep\" />\n      </span>\n      <div class=\"loro-select__copy\">\n        <h3>{{ title() }} @if (badge()) {<loro-badge [label]=\"badge()\" variant=\"info\" />}</h3>\n        <p>{{ subtitle() }}</p>\n        <small>{{ meta() }}</small>\n      </div>\n      <div class=\"loro-select__side\">\n        @if (status()) {\n          <span class=\"loro-select__status\">{{ status() }}</span>\n        }\n        @if (actionLabel()) {\n          <loro-button [label]=\"actionLabel()\" variant=\"outline\" (buttonClick)=\"action.emit()\" />\n        }\n      </div>\n    </article>", 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"], dependencies: [{ kind: "component", type: LoroBadge, selector: "loro-badge", inputs: ["label", "variant"] }, { kind: "component", type: LoroButton, selector: "loro-button", inputs: ["label", "text", "icon", "iconContent", "iconMode", "iconSize", "iconButtonSize", "iconColor", "socialMobileCompact", "selected", "variant", "typeButton", "color", "size", "fullWidth", "buttonWidth", "disabled", "loading", "type", "formId", "ariaLabel", "ariaDescription"], outputs: ["buttonClick", "change", "sanChange"] }, { kind: "component", type: LoroIcon, 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: LoroSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-select', standalone: true, imports: [LoroBadge, LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <article class="loro-select" [class.loro-select--selected]="selected()">
-      <span class="loro-select__icon">
-        <loro-icon [name]="icon()" [size]="44" [alt]="title()" color="primary-deep" />
-      </span>
-      <div class="loro-select__copy">
-        <h3>{{ title() }} @if (badge()) {<loro-badge [label]="badge()" variant="info" />}</h3>
-        <p>{{ subtitle() }}</p>
-        <small>{{ meta() }}</small>
-      </div>
-      <div class="loro-select__side">
-        @if (status()) {
-          <span class="loro-select__status">{{ status() }}</span>
-        }
-        @if (actionLabel()) {
-          <loro-button [label]="actionLabel()" variant="outline" (buttonClick)="action.emit()" />
-        }
-      </div>
-    </article>
-  `, 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"] }]
+            args: [{ selector: 'loro-select', standalone: true, imports: [LoroBadge, LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"loro-select\" [class.loro-select--selected]=\"selected()\">\n      <span class=\"loro-select__icon\">\n        <loro-icon [name]=\"icon()\" [size]=\"44\" [alt]=\"title()\" color=\"primary-deep\" />\n      </span>\n      <div class=\"loro-select__copy\">\n        <h3>{{ title() }} @if (badge()) {<loro-badge [label]=\"badge()\" variant=\"info\" />}</h3>\n        <p>{{ subtitle() }}</p>\n        <small>{{ meta() }}</small>\n      </div>\n      <div class=\"loro-select__side\">\n        @if (status()) {\n          <span class=\"loro-select__status\">{{ status() }}</span>\n        }\n        @if (actionLabel()) {\n          <loro-button [label]=\"actionLabel()\" variant=\"outline\" (buttonClick)=\"action.emit()\" />\n        }\n      </div>\n    </article>", 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"] }] } });
 
 function optionalNumberAttribute(value) {
@@ -4324,51 +2759,11 @@ class LoroTextArea {
         this.touched.set(true);
     }
     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 }, 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 }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", valueChange: "valueChange" }, ngImport: i0, template: `
-    <label class="loro-text-area">
-      @if (label()) {
-        <span class="loro-text-area__label">{{ label() }}</span>
-      }
-      <span class="loro-text-area__control">
-        <textarea
-          [placeholder]="placeholder()"
-          [value]="value()"
-          [disabled]="disabled()"
-          [readonly]="readonly()"
-          [required]="required()"
-          [attr.maxlength]="maxLength()"
-          (input)="updateValue(($any($event.target).value ?? '').toString())"
-          (blur)="markAsTouched()"></textarea>
-        @if (maxLength()) {
-          <span class="loro-text-area__counter">{{ value().length }}/{{ maxLength() }}</span>
-        }
-      </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 });
+    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 }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", valueChange: "valueChange" }, ngImport: i0, template: "<label class=\"loro-text-area\">\n      @if (label()) {\n        <span class=\"loro-text-area__label\">{{ label() }}</span>\n      }\n      <span class=\"loro-text-area__control\">\n        <textarea\n          [placeholder]=\"placeholder()\"\n          [value]=\"value()\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          [required]=\"required()\"\n          [attr.maxlength]=\"maxLength()\"\n          (input)=\"updateValue(($any($event.target).value ?? '').toString())\"\n          (blur)=\"markAsTouched()\"></textarea>\n        @if (maxLength()) {\n          <span class=\"loro-text-area__counter\">{{ value().length }}/{{ maxLength() }}</span>\n        }\n      </span>\n    </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"], 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">
-      @if (label()) {
-        <span class="loro-text-area__label">{{ label() }}</span>
-      }
-      <span class="loro-text-area__control">
-        <textarea
-          [placeholder]="placeholder()"
-          [value]="value()"
-          [disabled]="disabled()"
-          [readonly]="readonly()"
-          [required]="required()"
-          [attr.maxlength]="maxLength()"
-          (input)="updateValue(($any($event.target).value ?? '').toString())"
-          (blur)="markAsTouched()"></textarea>
-        @if (maxLength()) {
-          <span class="loro-text-area__counter">{{ value().length }}/{{ maxLength() }}</span>
-        }
-      </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"] }]
+            args: [{ selector: 'loro-text-area', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"loro-text-area\">\n      @if (label()) {\n        <span class=\"loro-text-area__label\">{{ label() }}</span>\n      }\n      <span class=\"loro-text-area__control\">\n        <textarea\n          [placeholder]=\"placeholder()\"\n          [value]=\"value()\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          [required]=\"required()\"\n          [attr.maxlength]=\"maxLength()\"\n          (input)=\"updateValue(($any($event.target).value ?? '').toString())\"\n          (blur)=\"markAsTouched()\"></textarea>\n        @if (maxLength()) {\n          <span class=\"loro-text-area__counter\">{{ value().length }}/{{ maxLength() }}</span>\n        }\n      </span>\n    </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 }] }, { 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 }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class LoroUpload {
@@ -4380,49 +2775,11 @@ class LoroUpload {
     compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
     fileSelected = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroUpload, isStandalone: true, selector: "loro-upload", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected" }, ngImport: i0, template: `
-    <label class="loro-upload" [class.loro-upload--compact]="compact()">
-      @if (label()) {
-        <span class="loro-upload__label">{{ label() }} @if (optional()) {<small>Opcional</small>}</span>
-      }
-      <span class="loro-upload__drop">
-        <loro-icon name="paperclip" [size]="28" alt="Adjuntar archivo" color="primary" />
-        <span class="loro-upload__copy">
-          <span>{{ title() }}</span>
-          @if (description()) {
-            <small>{{ description() }}</small>
-          }
-        </span>
-        @if (compact()) {
-          <loro-icon name="chevron-right" [size]="22" alt="Seleccionar" color="primary" />
-        }
-        <input type="file" [accept]="accept()" (change)="fileSelected.emit($any($event.target).files?.[0] ?? null)" />
-      </span>
-    </label>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-upload{display:grid;gap:.7rem}.loro-upload__label{display:flex;gap:.75rem;color:var(--loro-text-strong);font-weight:900}.loro-upload__label small{color:var(--loro-muted);font-weight:700}.loro-upload__drop{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;min-height:4.4rem;padding:1rem;border:1px dashed var(--loro-border-strong);border-radius:var(--loro-radius-input);background:var(--loro-surface);color:var(--loro-muted-strong);cursor:pointer}.loro-upload--compact .loro-upload__drop{grid-template-columns:auto minmax(0,1fr) auto;border-style:solid}.loro-upload__copy{display:grid;gap:.15rem;font-weight:800;line-height:1.25}.loro-upload__copy small{color:var(--loro-muted);font-weight:650}input{position:absolute;inset:0;opacity:0;cursor:pointer}\n"], dependencies: [{ kind: "component", type: LoroIcon, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroUpload, isStandalone: true, selector: "loro-upload", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected" }, ngImport: i0, template: "<label class=\"loro-upload\" [class.loro-upload--compact]=\"compact()\">\n      @if (label()) {\n        <span class=\"loro-upload__label\">{{ label() }} @if (optional()) {<small>Opcional</small>}</span>\n      }\n      <span class=\"loro-upload__drop\">\n        <loro-icon name=\"paperclip\" [size]=\"28\" alt=\"Adjuntar archivo\" color=\"primary\" />\n        <span class=\"loro-upload__copy\">\n          <span>{{ title() }}</span>\n          @if (description()) {\n            <small>{{ description() }}</small>\n          }\n        </span>\n        @if (compact()) {\n          <loro-icon name=\"chevron-right\" [size]=\"22\" alt=\"Seleccionar\" color=\"primary\" />\n        }\n        <input type=\"file\" [accept]=\"accept()\" (change)=\"fileSelected.emit($any($event.target).files?.[0] ?? null)\" />\n      </span>\n    </label>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-upload{display:grid;gap:.7rem}.loro-upload__label{display:flex;gap:.75rem;color:var(--loro-text-strong);font-weight:900}.loro-upload__label small{color:var(--loro-muted);font-weight:700}.loro-upload__drop{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;min-height:4.4rem;padding:1rem;border:1px dashed var(--loro-border-strong);border-radius:var(--loro-radius-input);background:var(--loro-surface);color:var(--loro-muted-strong);cursor:pointer}.loro-upload--compact .loro-upload__drop{grid-template-columns:auto minmax(0,1fr) auto;border-style:solid}.loro-upload__copy{display:grid;gap:.15rem;font-weight:800;line-height:1.25}.loro-upload__copy small{color:var(--loro-muted);font-weight:650}input{position:absolute;inset:0;opacity:0;cursor:pointer}\n"], dependencies: [{ kind: "component", type: LoroIcon, 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: LoroUpload, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-upload', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <label class="loro-upload" [class.loro-upload--compact]="compact()">
-      @if (label()) {
-        <span class="loro-upload__label">{{ label() }} @if (optional()) {<small>Opcional</small>}</span>
-      }
-      <span class="loro-upload__drop">
-        <loro-icon name="paperclip" [size]="28" alt="Adjuntar archivo" color="primary" />
-        <span class="loro-upload__copy">
-          <span>{{ title() }}</span>
-          @if (description()) {
-            <small>{{ description() }}</small>
-          }
-        </span>
-        @if (compact()) {
-          <loro-icon name="chevron-right" [size]="22" alt="Seleccionar" color="primary" />
-        }
-        <input type="file" [accept]="accept()" (change)="fileSelected.emit($any($event.target).files?.[0] ?? null)" />
-      </span>
-    </label>
-  `, styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-upload{display:grid;gap:.7rem}.loro-upload__label{display:flex;gap:.75rem;color:var(--loro-text-strong);font-weight:900}.loro-upload__label small{color:var(--loro-muted);font-weight:700}.loro-upload__drop{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;min-height:4.4rem;padding:1rem;border:1px dashed var(--loro-border-strong);border-radius:var(--loro-radius-input);background:var(--loro-surface);color:var(--loro-muted-strong);cursor:pointer}.loro-upload--compact .loro-upload__drop{grid-template-columns:auto minmax(0,1fr) auto;border-style:solid}.loro-upload__copy{display:grid;gap:.15rem;font-weight:800;line-height:1.25}.loro-upload__copy small{color:var(--loro-muted);font-weight:650}input{position:absolute;inset:0;opacity:0;cursor:pointer}\n"] }]
+            args: [{ selector: 'loro-upload', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"loro-upload\" [class.loro-upload--compact]=\"compact()\">\n      @if (label()) {\n        <span class=\"loro-upload__label\">{{ label() }} @if (optional()) {<small>Opcional</small>}</span>\n      }\n      <span class=\"loro-upload__drop\">\n        <loro-icon name=\"paperclip\" [size]=\"28\" alt=\"Adjuntar archivo\" color=\"primary\" />\n        <span class=\"loro-upload__copy\">\n          <span>{{ title() }}</span>\n          @if (description()) {\n            <small>{{ description() }}</small>\n          }\n        </span>\n        @if (compact()) {\n          <loro-icon name=\"chevron-right\" [size]=\"22\" alt=\"Seleccionar\" color=\"primary\" />\n        }\n        <input type=\"file\" [accept]=\"accept()\" (change)=\"fileSelected.emit($any($event.target).files?.[0] ?? null)\" />\n      </span>\n    </label>", styles: [":host{display:block;font-family:var(--loro-font-brand)}.loro-upload{display:grid;gap:.7rem}.loro-upload__label{display:flex;gap:.75rem;color:var(--loro-text-strong);font-weight:900}.loro-upload__label small{color:var(--loro-muted);font-weight:700}.loro-upload__drop{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.85rem;min-height:4.4rem;padding:1rem;border:1px dashed var(--loro-border-strong);border-radius:var(--loro-radius-input);background:var(--loro-surface);color:var(--loro-muted-strong);cursor:pointer}.loro-upload--compact .loro-upload__drop{grid-template-columns:auto minmax(0,1fr) auto;border-style:solid}.loro-upload__copy{display:grid;gap:.15rem;font-weight:800;line-height:1.25}.loro-upload__copy small{color:var(--loro-muted);font-weight:650}input{position:absolute;inset:0;opacity:0;cursor:pointer}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }] } });
 
 class LoroModal {
@@ -4578,124 +2935,16 @@ class LoroModal {
         return touch.clientY - dialogTop <= 52;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroModal, isStandalone: true, selector: "loro-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, sheetDragToClose: { classPropertyName: "sheetDragToClose", publicName: "sheetDragToClose", isSignal: true, isRequired: false, transformFunction: null }, sheetRestTop: { classPropertyName: "sheetRestTop", publicName: "sheetRestTop", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalClose: "modalClose" }, ngImport: i0, template: `
-    @if (open()) {
-      <div class="loro-modal" [class]="'loro-modal loro-modal--' + placement()" role="presentation">
-        @if (showBackdrop()) {
-          <button
-            type="button"
-            class="loro-modal__backdrop"
-            aria-label="Close modal"
-            [style.opacity]="backdropOpacity()"
-            (click)="closeOnBackdrop() && requestClose()"></button>
-        }
-        <section
-          #dialog
-          class="loro-modal__dialog"
-          [class]="'loro-modal__dialog loro-modal__dialog--' + size()"
-          [class.loro-modal__dialog--dragging]="sheetDragging()"
-          [style.--loro-modal-sheet-drag-y]="sheetDragOffsetCss()"
-          [style.--loro-modal-sheet-rest-top]="sheetRestTop() || sheetRestTopCss()"
-          role="dialog"
-          aria-modal="true"
-          [attr.aria-label]="ariaLabel() || title()"
-          (touchstart)="onSheetTouchStart($event, dialog)"
-          (touchmove)="onSheetTouchMove($event)"
-          (touchend)="onSheetTouchEnd()"
-          (touchcancel)="onSheetTouchEnd()">
-          @if (title() || dismissible()) {
-            <header class="loro-modal__header">
-              @if (title()) {
-                <h2>{{ title() }}</h2>
-              }
-              @if (dismissible()) {
-                <button
-                  type="button"
-                  class="loro-modal__close"
-                  aria-label="Cerrar modal"
-                  (pointerdown)="$event.stopPropagation()"
-                  (touchstart)="$event.stopPropagation()"
-                  (click)="onCloseClick($event)">
-                  X
-                </button>
-              }
-            </header>
-          }
-
-          <div
-            class="loro-modal__content"
-            [class.loro-modal__content--flush]="placement() === 'sheet' && !title()">
-            <ng-content />
-          </div>
-
-          <ng-content select="[loro-modal-actions]" />
-        </section>
-      </div>
-    }
-  `, isInline: true, styles: [":host{display:contents;font-family:var(--loro-font-brand)}.loro-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;width:100vw;height:100vh;height:var(--app-fill-height, var(--app-viewport-height, 100dvh));padding:1.25rem;isolation:isolate}.loro-modal__backdrop{position:absolute;inset:0;border:0;background:#140e276b;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);cursor:pointer}.loro-modal__dialog{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(100%,32rem);max-height:min(42rem,calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 2.5rem));overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:1.25rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text);transition:transform .22s cubic-bezier(.22,1,.36,1)}.loro-modal__dialog--sm{width:min(100%,24rem)}.loro-modal__dialog--lg{width:min(100%,44rem)}.loro-modal__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1rem 1.15rem;border-bottom:1px solid var(--loro-border-subtle)}h2{margin:0;color:var(--loro-text-strong);font-size:1.08rem;font-weight:950;line-height:1.2}.loro-modal__close{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:50%;background:#6c3cff14;color:var(--loro-text-strong);font:inherit;font-weight:950;cursor:pointer}.loro-modal__content{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1.15rem}::ng-deep [loro-modal-actions]{display:flex;justify-content:flex-end;gap:.75rem;padding:.9rem 1.15rem 1.15rem;border-top:1px solid var(--loro-border-subtle)}@media(max-width:1023.88px){.loro-modal{align-items:end;padding:0}.loro-modal--sheet{place-items:end stretch}.loro-modal__dialog,.loro-modal__dialog--sm,.loro-modal__dialog--md,.loro-modal__dialog--lg{width:100%;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 1rem);border-radius:1.75rem 1.75rem 0 0}.loro-modal--sheet .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog--sm,.loro-modal--sheet .loro-modal__dialog--md,.loro-modal--sheet .loro-modal__dialog--lg{--loro-modal-sheet-rest-top: max( calc(var(--app-fill-height, 100dvh) * .3), calc(env(safe-area-inset-top, 0px) + .65rem) );position:fixed;inset:auto 0 0;width:100%;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - max(var(--loro-modal-sheet-rest-top),calc(env(safe-area-inset-top,0px) + .65rem)));grid-template-rows:auto minmax(0,auto) auto;background:var(--loro-surface);overscroll-behavior-y:contain;transform:translate3d(0,var(--loro-modal-sheet-drag-y, 0px),0)}.loro-modal--sheet .loro-modal__dialog--dragging{transition:none}.loro-modal--sheet .loro-modal__content{display:block;height:auto;min-height:0;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - max(var(--loro-modal-sheet-rest-top),calc(env(safe-area-inset-top,0px) + .65rem)) - 4rem);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:.85rem;background:var(--loro-surface);touch-action:pan-y}.loro-modal--sheet .loro-modal__content--flush{padding:0}.loro-modal--center{align-items:center;padding:1rem}.loro-modal--center .loro-modal__dialog{border-radius:1.15rem}::ng-deep [loro-modal-actions]{flex-direction:column-reverse;padding:.7rem .9rem max(.85rem,env(safe-area-inset-bottom,0px));background:var(--loro-surface)}}@media(min-width:1024px){.loro-modal{place-items:center;padding:2rem}.loro-modal__backdrop{background:#070a129e;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.loro-modal--center .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog{position:relative;inset:auto;max-height:min(46rem,calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 4rem));border-radius:1.5rem}.loro-modal__dialog--sm{width:min(100%,28rem)}.loro-modal__dialog--md{width:min(100%,36rem)}.loro-modal__dialog--lg{width:min(100%,60rem)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroModal, isStandalone: true, selector: "loro-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, sheetDragToClose: { classPropertyName: "sheetDragToClose", publicName: "sheetDragToClose", isSignal: true, isRequired: false, transformFunction: null }, sheetRestTop: { classPropertyName: "sheetRestTop", publicName: "sheetRestTop", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modalClose: "modalClose" }, ngImport: i0, template: "@if (open()) {\n      <div class=\"loro-modal\" [class]=\"'loro-modal loro-modal--' + placement()\" role=\"presentation\">\n        @if (showBackdrop()) {\n          <button\n            type=\"button\"\n            class=\"loro-modal__backdrop\"\n            aria-label=\"Close modal\"\n            [style.opacity]=\"backdropOpacity()\"\n            (click)=\"closeOnBackdrop() && requestClose()\"></button>\n        }\n        <section\n          #dialog\n          class=\"loro-modal__dialog\"\n          [class]=\"'loro-modal__dialog loro-modal__dialog--' + size()\"\n          [class.loro-modal__dialog--dragging]=\"sheetDragging()\"\n          [style.--loro-modal-sheet-drag-y]=\"sheetDragOffsetCss()\"\n          [style.--loro-modal-sheet-rest-top]=\"sheetRestTop() || sheetRestTopCss()\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          [attr.aria-label]=\"ariaLabel() || title()\"\n          (touchstart)=\"onSheetTouchStart($event, dialog)\"\n          (touchmove)=\"onSheetTouchMove($event)\"\n          (touchend)=\"onSheetTouchEnd()\"\n          (touchcancel)=\"onSheetTouchEnd()\">\n          @if (title() || dismissible()) {\n            <header class=\"loro-modal__header\">\n              @if (title()) {\n                <h2>{{ title() }}</h2>\n              }\n              @if (dismissible()) {\n                <button\n                  type=\"button\"\n                  class=\"loro-modal__close\"\n                  aria-label=\"Cerrar modal\"\n                  (pointerdown)=\"$event.stopPropagation()\"\n                  (touchstart)=\"$event.stopPropagation()\"\n                  (click)=\"onCloseClick($event)\">\n                  X\n                </button>\n              }\n            </header>\n          }\n\n          <div\n            class=\"loro-modal__content\"\n            [class.loro-modal__content--flush]=\"placement() === 'sheet' && !title()\">\n            <ng-content />\n          </div>\n\n          <ng-content select=\"[loro-modal-actions]\" />\n        </section>\n      </div>\n    }", styles: [":host{display:contents;font-family:var(--loro-font-brand)}.loro-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;width:100vw;height:100vh;height:var(--app-fill-height, var(--app-viewport-height, 100dvh));padding:1.25rem;isolation:isolate}.loro-modal__backdrop{position:absolute;inset:0;border:0;background:#140e276b;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);cursor:pointer}.loro-modal__dialog{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(100%,32rem);max-height:min(42rem,var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 2.5rem);overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:1.25rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text);transition:transform .22s cubic-bezier(.22,1,.36,1)}.loro-modal__dialog--sm{width:min(100%,24rem)}.loro-modal__dialog--lg{width:min(100%,44rem)}.loro-modal__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1rem 1.15rem;border-bottom:1px solid var(--loro-border-subtle)}h2{margin:0;color:var(--loro-text-strong);font-size:1.08rem;font-weight:950;line-height:1.2}.loro-modal__close{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:50%;background:#6c3cff14;color:var(--loro-text-strong);font:inherit;font-weight:950;cursor:pointer}.loro-modal__content{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1.15rem}::ng-deep [loro-modal-actions]{display:flex;justify-content:flex-end;gap:.75rem;padding:.9rem 1.15rem 1.15rem;border-top:1px solid var(--loro-border-subtle)}@media(max-width:1023.88px){.loro-modal{align-items:end;padding:0}.loro-modal--sheet{place-items:end stretch}.loro-modal__dialog,.loro-modal__dialog--sm,.loro-modal__dialog--md,.loro-modal__dialog--lg{width:100%;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 1rem);border-radius:1.75rem 1.75rem 0 0}.loro-modal--sheet .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog--sm,.loro-modal--sheet .loro-modal__dialog--md,.loro-modal--sheet .loro-modal__dialog--lg{--loro-modal-sheet-rest-top: max( calc(var(--app-fill-height, 100dvh) * .3), calc(env(safe-area-inset-top, 0px) + .65rem) );position:fixed;inset:auto 0 0;width:100%;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - max(var(--loro-modal-sheet-rest-top),env(safe-area-inset-top,0px) + .65rem));grid-template-rows:auto minmax(0,auto) auto;background:var(--loro-surface);overscroll-behavior-y:contain;transform:translate3d(0,var(--loro-modal-sheet-drag-y, 0px),0)}.loro-modal--sheet .loro-modal__dialog--dragging{transition:none}.loro-modal--sheet .loro-modal__content{display:block;height:auto;min-height:0;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - max(var(--loro-modal-sheet-rest-top),env(safe-area-inset-top,0px) + .65rem) - 4rem);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:.85rem;background:var(--loro-surface);touch-action:pan-y}.loro-modal--sheet .loro-modal__content--flush{padding:0}.loro-modal--center{align-items:center;padding:1rem}.loro-modal--center .loro-modal__dialog{border-radius:1.15rem}::ng-deep [loro-modal-actions]{flex-direction:column-reverse;padding:.7rem .9rem max(.85rem,env(safe-area-inset-bottom,0px));background:var(--loro-surface)}}@media(min-width:1024px){.loro-modal{place-items:center;padding:2rem}.loro-modal__backdrop{background:#070a129e;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.loro-modal--center .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog{position:relative;inset:auto;max-height:min(46rem,var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 4rem);border-radius:1.5rem}.loro-modal__dialog--sm{width:min(100%,28rem)}.loro-modal__dialog--md{width:min(100%,36rem)}.loro-modal__dialog--lg{width:min(100%,60rem)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroModal, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (open()) {
-      <div class="loro-modal" [class]="'loro-modal loro-modal--' + placement()" role="presentation">
-        @if (showBackdrop()) {
-          <button
-            type="button"
-            class="loro-modal__backdrop"
-            aria-label="Close modal"
-            [style.opacity]="backdropOpacity()"
-            (click)="closeOnBackdrop() && requestClose()"></button>
-        }
-        <section
-          #dialog
-          class="loro-modal__dialog"
-          [class]="'loro-modal__dialog loro-modal__dialog--' + size()"
-          [class.loro-modal__dialog--dragging]="sheetDragging()"
-          [style.--loro-modal-sheet-drag-y]="sheetDragOffsetCss()"
-          [style.--loro-modal-sheet-rest-top]="sheetRestTop() || sheetRestTopCss()"
-          role="dialog"
-          aria-modal="true"
-          [attr.aria-label]="ariaLabel() || title()"
-          (touchstart)="onSheetTouchStart($event, dialog)"
-          (touchmove)="onSheetTouchMove($event)"
-          (touchend)="onSheetTouchEnd()"
-          (touchcancel)="onSheetTouchEnd()">
-          @if (title() || dismissible()) {
-            <header class="loro-modal__header">
-              @if (title()) {
-                <h2>{{ title() }}</h2>
-              }
-              @if (dismissible()) {
-                <button
-                  type="button"
-                  class="loro-modal__close"
-                  aria-label="Cerrar modal"
-                  (pointerdown)="$event.stopPropagation()"
-                  (touchstart)="$event.stopPropagation()"
-                  (click)="onCloseClick($event)">
-                  X
-                </button>
-              }
-            </header>
-          }
-
-          <div
-            class="loro-modal__content"
-            [class.loro-modal__content--flush]="placement() === 'sheet' && !title()">
-            <ng-content />
-          </div>
-
-          <ng-content select="[loro-modal-actions]" />
-        </section>
-      </div>
-    }
-  `, styles: [":host{display:contents;font-family:var(--loro-font-brand)}.loro-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;width:100vw;height:100vh;height:var(--app-fill-height, var(--app-viewport-height, 100dvh));padding:1.25rem;isolation:isolate}.loro-modal__backdrop{position:absolute;inset:0;border:0;background:#140e276b;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);cursor:pointer}.loro-modal__dialog{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(100%,32rem);max-height:min(42rem,calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 2.5rem));overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:1.25rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text);transition:transform .22s cubic-bezier(.22,1,.36,1)}.loro-modal__dialog--sm{width:min(100%,24rem)}.loro-modal__dialog--lg{width:min(100%,44rem)}.loro-modal__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1rem 1.15rem;border-bottom:1px solid var(--loro-border-subtle)}h2{margin:0;color:var(--loro-text-strong);font-size:1.08rem;font-weight:950;line-height:1.2}.loro-modal__close{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:50%;background:#6c3cff14;color:var(--loro-text-strong);font:inherit;font-weight:950;cursor:pointer}.loro-modal__content{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1.15rem}::ng-deep [loro-modal-actions]{display:flex;justify-content:flex-end;gap:.75rem;padding:.9rem 1.15rem 1.15rem;border-top:1px solid var(--loro-border-subtle)}@media(max-width:1023.88px){.loro-modal{align-items:end;padding:0}.loro-modal--sheet{place-items:end stretch}.loro-modal__dialog,.loro-modal__dialog--sm,.loro-modal__dialog--md,.loro-modal__dialog--lg{width:100%;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 1rem);border-radius:1.75rem 1.75rem 0 0}.loro-modal--sheet .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog--sm,.loro-modal--sheet .loro-modal__dialog--md,.loro-modal--sheet .loro-modal__dialog--lg{--loro-modal-sheet-rest-top: max( calc(var(--app-fill-height, 100dvh) * .3), calc(env(safe-area-inset-top, 0px) + .65rem) );position:fixed;inset:auto 0 0;width:100%;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - max(var(--loro-modal-sheet-rest-top),calc(env(safe-area-inset-top,0px) + .65rem)));grid-template-rows:auto minmax(0,auto) auto;background:var(--loro-surface);overscroll-behavior-y:contain;transform:translate3d(0,var(--loro-modal-sheet-drag-y, 0px),0)}.loro-modal--sheet .loro-modal__dialog--dragging{transition:none}.loro-modal--sheet .loro-modal__content{display:block;height:auto;min-height:0;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - max(var(--loro-modal-sheet-rest-top),calc(env(safe-area-inset-top,0px) + .65rem)) - 4rem);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:.85rem;background:var(--loro-surface);touch-action:pan-y}.loro-modal--sheet .loro-modal__content--flush{padding:0}.loro-modal--center{align-items:center;padding:1rem}.loro-modal--center .loro-modal__dialog{border-radius:1.15rem}::ng-deep [loro-modal-actions]{flex-direction:column-reverse;padding:.7rem .9rem max(.85rem,env(safe-area-inset-bottom,0px));background:var(--loro-surface)}}@media(min-width:1024px){.loro-modal{place-items:center;padding:2rem}.loro-modal__backdrop{background:#070a129e;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.loro-modal--center .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog{position:relative;inset:auto;max-height:min(46rem,calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 4rem));border-radius:1.5rem}.loro-modal__dialog--sm{width:min(100%,28rem)}.loro-modal__dialog--md{width:min(100%,36rem)}.loro-modal__dialog--lg{width:min(100%,60rem)}}\n"] }]
+            args: [{ selector: 'loro-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (open()) {\n      <div class=\"loro-modal\" [class]=\"'loro-modal loro-modal--' + placement()\" role=\"presentation\">\n        @if (showBackdrop()) {\n          <button\n            type=\"button\"\n            class=\"loro-modal__backdrop\"\n            aria-label=\"Close modal\"\n            [style.opacity]=\"backdropOpacity()\"\n            (click)=\"closeOnBackdrop() && requestClose()\"></button>\n        }\n        <section\n          #dialog\n          class=\"loro-modal__dialog\"\n          [class]=\"'loro-modal__dialog loro-modal__dialog--' + size()\"\n          [class.loro-modal__dialog--dragging]=\"sheetDragging()\"\n          [style.--loro-modal-sheet-drag-y]=\"sheetDragOffsetCss()\"\n          [style.--loro-modal-sheet-rest-top]=\"sheetRestTop() || sheetRestTopCss()\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          [attr.aria-label]=\"ariaLabel() || title()\"\n          (touchstart)=\"onSheetTouchStart($event, dialog)\"\n          (touchmove)=\"onSheetTouchMove($event)\"\n          (touchend)=\"onSheetTouchEnd()\"\n          (touchcancel)=\"onSheetTouchEnd()\">\n          @if (title() || dismissible()) {\n            <header class=\"loro-modal__header\">\n              @if (title()) {\n                <h2>{{ title() }}</h2>\n              }\n              @if (dismissible()) {\n                <button\n                  type=\"button\"\n                  class=\"loro-modal__close\"\n                  aria-label=\"Cerrar modal\"\n                  (pointerdown)=\"$event.stopPropagation()\"\n                  (touchstart)=\"$event.stopPropagation()\"\n                  (click)=\"onCloseClick($event)\">\n                  X\n                </button>\n              }\n            </header>\n          }\n\n          <div\n            class=\"loro-modal__content\"\n            [class.loro-modal__content--flush]=\"placement() === 'sheet' && !title()\">\n            <ng-content />\n          </div>\n\n          <ng-content select=\"[loro-modal-actions]\" />\n        </section>\n      </div>\n    }", styles: [":host{display:contents;font-family:var(--loro-font-brand)}.loro-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;width:100vw;height:100vh;height:var(--app-fill-height, var(--app-viewport-height, 100dvh));padding:1.25rem;isolation:isolate}.loro-modal__backdrop{position:absolute;inset:0;border:0;background:#140e276b;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);cursor:pointer}.loro-modal__dialog{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(100%,32rem);max-height:min(42rem,var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 2.5rem);overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:1.25rem;background:var(--loro-surface);box-shadow:var(--loro-shadow-panel);color:var(--loro-text);transition:transform .22s cubic-bezier(.22,1,.36,1)}.loro-modal__dialog--sm{width:min(100%,24rem)}.loro-modal__dialog--lg{width:min(100%,44rem)}.loro-modal__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1rem 1.15rem;border-bottom:1px solid var(--loro-border-subtle)}h2{margin:0;color:var(--loro-text-strong);font-size:1.08rem;font-weight:950;line-height:1.2}.loro-modal__close{display:grid;width:2.25rem;height:2.25rem;place-items:center;border:0;border-radius:50%;background:#6c3cff14;color:var(--loro-text-strong);font:inherit;font-weight:950;cursor:pointer}.loro-modal__content{min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1.15rem}::ng-deep [loro-modal-actions]{display:flex;justify-content:flex-end;gap:.75rem;padding:.9rem 1.15rem 1.15rem;border-top:1px solid var(--loro-border-subtle)}@media(max-width:1023.88px){.loro-modal{align-items:end;padding:0}.loro-modal--sheet{place-items:end stretch}.loro-modal__dialog,.loro-modal__dialog--sm,.loro-modal__dialog--md,.loro-modal__dialog--lg{width:100%;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 1rem);border-radius:1.75rem 1.75rem 0 0}.loro-modal--sheet .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog--sm,.loro-modal--sheet .loro-modal__dialog--md,.loro-modal--sheet .loro-modal__dialog--lg{--loro-modal-sheet-rest-top: max( calc(var(--app-fill-height, 100dvh) * .3), calc(env(safe-area-inset-top, 0px) + .65rem) );position:fixed;inset:auto 0 0;width:100%;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - max(var(--loro-modal-sheet-rest-top),env(safe-area-inset-top,0px) + .65rem));grid-template-rows:auto minmax(0,auto) auto;background:var(--loro-surface);overscroll-behavior-y:contain;transform:translate3d(0,var(--loro-modal-sheet-drag-y, 0px),0)}.loro-modal--sheet .loro-modal__dialog--dragging{transition:none}.loro-modal--sheet .loro-modal__content{display:block;height:auto;min-height:0;max-height:calc(var(--app-fill-height, var(--app-viewport-height, 100dvh)) - max(var(--loro-modal-sheet-rest-top),env(safe-area-inset-top,0px) + .65rem) - 4rem);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding:.85rem;background:var(--loro-surface);touch-action:pan-y}.loro-modal--sheet .loro-modal__content--flush{padding:0}.loro-modal--center{align-items:center;padding:1rem}.loro-modal--center .loro-modal__dialog{border-radius:1.15rem}::ng-deep [loro-modal-actions]{flex-direction:column-reverse;padding:.7rem .9rem max(.85rem,env(safe-area-inset-bottom,0px));background:var(--loro-surface)}}@media(min-width:1024px){.loro-modal{place-items:center;padding:2rem}.loro-modal__backdrop{background:#070a129e;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.loro-modal--center .loro-modal__dialog,.loro-modal--sheet .loro-modal__dialog{position:relative;inset:auto;max-height:min(46rem,var(--app-fill-height, var(--app-viewport-height, 100dvh)) - 4rem);border-radius:1.5rem}.loro-modal__dialog--sm{width:min(100%,28rem)}.loro-modal__dialog--md{width:min(100%,36rem)}.loro-modal__dialog--lg{width:min(100%,60rem)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], sheetDragToClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "sheetDragToClose", required: false }] }], sheetRestTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "sheetRestTop", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], modalClose: [{ type: i0.Output, args: ["modalClose"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Footer, LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS, LoroAccordion, LoroAlert, LoroAppNav, LoroAssistantCard, LoroAuthField, LoroAuthSocialButton, LoroBadge, LoroButton, LoroCard, LoroCardNav, LoroCheckbox, LoroDashboardCard, LoroDivider, LoroDropdown, LoroFilterChip, LoroHapticsService, LoroIcon, LoroImage, LoroInput, LoroModal, LoroNotification, LoroNotificationPanel, LoroNotificationRow, LoroProductRow, LoroProductSection, LoroProfileCard, LoroProfileHero, LoroRadio, LoroSegmentedControl, LoroSelect, LoroSpinner, LoroStatCard, LoroStoreRankCard, LoroSummaryBar, LoroTab, LoroTextArea, LoroToast, LoroToggle, LoroUpload };
+export { Footer, LORO_BUTTON_CLASSES, LORO_BUTTON_COLORS, LORO_BUTTON_DEFAULTS, LORO_BUTTON_ICON_MODES, LORO_BUTTON_SIZES, LORO_BUTTON_TYPES, LORO_BUTTON_VARIANTS, LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS, LoroAccordion, LoroAlert, LoroAppNav, LoroAssistantCard, LoroAuthField, LoroAuthSocialButton, LoroBadge, LoroButton, LoroCard, LoroCardNav, LoroCheckbox, LoroDashboardCard, LoroDivider, LoroDropdown, LoroFilterChip, LoroHapticsService, LoroIcon, LoroImage, LoroInput, LoroModal, LoroNotification, LoroNotificationPanel, LoroNotificationRow, LoroProductRow, LoroProductSection, LoroProfileCard, LoroProfileHero, LoroRadio, LoroSegmentedControl, LoroSelect, LoroSpinner, LoroStatCard, LoroStoreRankCard, LoroSummaryBar, LoroTab, LoroTextArea, LoroToast, LoroToggle, LoroUpload };
 //# sourceMappingURL=juligc99-loro-ui.mjs.map