@juligc99/loro-ui 0.0.14 → 0.0.15

package/fesm2022/juligc99-loro-ui.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, input, computed, output, inject, Injectable, signal, model, viewChild, effect } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, output, computed, inject, Injectable, signal, model, viewChild, effect } from '@angular/core';
+import { LoroIcon as LoroIcon$1, LORO_ICON_PATHS as LORO_ICON_PATHS$1, LORO_ICON_LEGACY_NAMES as LORO_ICON_LEGACY_NAMES$1 } from '@loro-ui/components/resources/loro-icon';
 import { Toolbar, ToolbarWidget } from '@angular/aria/toolbar';
 import { DOCUMENT, DecimalPipe } from '@angular/common';
 import { Capacitor } from '@capacitor/core';
@@ -8,37 +9,26 @@ 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"] }]
         }] });
 
+class LoroAccordion {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    icon = input('help', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    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()\">\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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAccordion, decorators: [{
+            type: Component,
+            args: [{ selector: 'loro-accordion', standalone: true, imports: [LoroIcon$1], 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"] }] } });
+
 /* This file is generated by projects/loro-ui/scripts/generate-asset-manifest.mjs. */
 const LORO_ICON_ASSETS = [
     {
@@ -1007,136 +997,6 @@ const LORO_IMAGE_LEGACY_NAMES = {
     "loro-despensa": "image-loro-despensa"
 };
 
-const LORO_ICON_COLOR_TOKENS = {
-    default: 'currentColor',
-    primary: 'var(--loro-primary-500)',
-    'primary-strong': 'var(--loro-primary-700)',
-    'primary-deep': 'var(--loro-primary-900)',
-    text: 'var(--loro-text)',
-    muted: 'var(--loro-muted)',
-    success: '#1f9d55',
-    danger: 'var(--loro-danger-text)',
-    warning: 'var(--loro-warning)',
-    inverse: 'var(--loro-text-inverse)',
-};
-class LoroIcon {
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    size = input(48, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
-    decorative = input(false, ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
-    color = input('default', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    renderMode = input('mask', ...(ngDevMode ? [{ debugName: "renderMode" }] : /* istanbul ignore next */ []));
-    assetName = computed(() => {
-        const name = this.name();
-        return (name in LORO_ICON_PATHS
-            ? name
-            : LORO_ICON_LEGACY_NAMES[name]);
-    }, ...(ngDevMode ? [{ debugName: "assetName" }] : /* istanbul ignore next */ []));
-    src = computed(() => LORO_ICON_PATHS[this.assetName()], ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
-    altText = computed(() => (this.decorative() ? '' : this.alt() || this.name()), ...(ngDevMode ? [{ debugName: "altText" }] : /* istanbul ignore next */ []));
-    resolvedSize = computed(() => {
-        const size = this.size();
-        return typeof size === 'number' ? `${size}px` : size;
-    }, ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
-    resolvedColor = computed(() => {
-        const color = this.color();
-        return color in LORO_ICON_COLOR_TOKENS
-            ? LORO_ICON_COLOR_TOKENS[color]
-            : 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 });
-}
-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"] }]
-        }], 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 {
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    icon = input('help', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    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 });
-}
-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"] }]
-        }], 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 {
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
@@ -1155,31 +1015,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 +1082,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 */ []));
@@ -1339,11 +1288,11 @@ class LoroButton {
         return value === 'none' || value === 'with-icon' || value === 'only-icon';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroButton, isStandalone: true, selector: "loro-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconContent: { classPropertyName: "iconContent", publicName: "iconContent", isSignal: true, isRequired: false, transformFunction: null }, iconMode: { classPropertyName: "iconMode", publicName: "iconMode", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconButtonSize: { classPropertyName: "iconButtonSize", publicName: "iconButtonSize", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, socialMobileCompact: { classPropertyName: "socialMobileCompact", publicName: "socialMobileCompact", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, typeButton: { classPropertyName: "typeButton", publicName: "typeButton", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, buttonWidth: { classPropertyName: "buttonWidth", publicName: "buttonWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescription: { classPropertyName: "ariaDescription", publicName: "ariaDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", change: "change", sanChange: "sanChange" }, host: { properties: { "class.loro-button-host--full": "resolvedButtonWidth() === 'full'" } }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [attr.form]=\"formId() || null\"\n  class=\"loro-button\"\n  [class]=\"'loro-button loro-button--' + resolvedTypeButton()\"\n  [class.loro-button--outline]=\"variant() === 'outline'\"\n  [class.loro-button--ghost]=\"variant() === 'ghost'\"\n  [class.loro-button--soft]=\"variant() === 'soft'\"\n  [class.loro-button--social]=\"variant() === 'social'\"\n  [class.loro-button--action]=\"variant() === 'action'\"\n  [class.loro-button--navigation]=\"variant() === 'navigation'\"\n  [class.loro-button--danger]=\"variant() === 'danger'\"\n  [class.loro-button--secondary-color]=\"resolvedColor() === 'secondary'\"\n  [class.loro-button--tertiary-color]=\"resolvedColor() === 'tertiary'\"\n  [class.loro-button--danger-color]=\"resolvedColor() === 'danger'\"\n  [class.loro-button--sm]=\"size() === 'sm'\"\n  [class.loro-button--lg]=\"size() === 'lg'\"\n  [class.loro-button--full]=\"resolvedButtonWidth() === 'full'\"\n  [class.loro-button--icon-only]=\"resolvedIconMode() === 'only-icon'\"\n  [class.loro-button--social-mobile-compact]=\"socialMobileCompact()\"\n  [class.loro-button--selected]=\"selected()\"\n  [class.loro-button--loading]=\"loading()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-description]=\"ariaDescription() || null\"\n  [attr.aria-busy]=\"loading()\"\n  [style.--loro-button-icon-size]=\"resolvedIconButtonSize()\"\n  (click)=\"emitChange()\"\n>\n  @if (showIcon()) {\n    <loro-icon\n      [name]=\"resolvedIcon()!\"\n      [size]=\"iconSize()\"\n      [alt]=\"resolvedText()\"\n      [color]=\"resolvedIconColor()\"\n      [renderMode]=\"resolvedIconRenderMode()\"\n    />\n  }\n\n  @if (showSpinner()) {\n    <span class=\"loro-button__spinner\" aria-hidden=\"true\"></span>\n    <span class=\"loro-button__sr-status\" aria-live=\"polite\">{{ loadingAriaLabel() }}</span>\n  }\n\n  @if (resolvedIconMode() !== 'only-icon') {\n    <span class=\"loro-button__label\">{{ resolvedText() }}</span>\n  }\n</button>\n", styles: [":host{display:inline-flex;width:fit-content;font-family:var(--loro-font-brand)}:host(.loro-button-host--full){display:block;width:100%}.loro-button{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-width:0;min-height:var(--loro-button-min-height, 3.25rem);padding:var(--loro-button-padding, .85rem 1.25rem);border:1px solid transparent;border-radius:var(--loro-button-radius, .9rem);background:var(--loro-button-background, var(--loro-surface-muted));color:var(--loro-text-strong);box-shadow:var(--loro-button-shadow, none);font:inherit;font-size:var(--loro-button-font-size, 1rem);font-weight:900;line-height:1.1;white-space:normal;overflow-wrap:anywhere;word-break:break-word;text-align:center;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease}.loro-button__label{min-width:0}.loro-button__spinner{width:1rem;height:1rem;flex:0 0 auto;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:loro-button-spin .7s linear infinite}.loro-button__sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loro-button:hover:not(:disabled){transform:translateY(-1px)}.loro-button--full{width:100%}.loro-button--primary,.loro-button--primary.loro-button--primary-color{background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff}.loro-button--secondary,.loro-button--outline{border-color:var(--loro-primary-500);background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary,.loro-button--ghost{background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary{min-height:auto;padding:0;border-radius:.55rem;box-shadow:none}.loro-button--tertiary:hover:not(:disabled){transform:none}.loro-button--tertiary:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-primary-500) 28%,transparent);outline-offset:2px}.loro-button--soft{background:color-mix(in srgb,var(--loro-primary-500) 8%,transparent);color:var(--loro-primary-700)}.loro-button--social{border-color:var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text)}.loro-button--action{min-height:var(--loro-button-min-height, 2.75rem);padding:var(--loro-button-padding, 0);border:0;border-radius:var(--loro-button-radius, 50%);background:var(--loro-button-background, transparent);color:var(--loro-button-color, var(--loro-primary-700));box-shadow:var(--loro-button-shadow, none)}.loro-button--action:hover:not(:disabled){background:var(--loro-button-hover-background, color-mix(in srgb, var(--loro-primary) 8%, transparent));transform:translateY(-1px)}.loro-button--action:active:not(:disabled){transform:translateY(1px)}.loro-button--action:focus-visible{outline:3px solid var(--loro-button-focus-ring, color-mix(in srgb, var(--loro-primary) 36%, transparent));outline-offset:3px}.loro-button--social:hover:not(:disabled),.loro-button--social:focus-visible{border-color: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-button--navigation{justify-content:flex-start;gap:1rem;padding:.5rem;border-color:var(--loro-button-border-color, transparent);border-radius:var(--loro-button-radius, 1rem);color:var(--loro-home-avatar-color);text-align:left}.loro-button--navigation .loro-button__label{flex:1;text-align:left}.loro-button--navigation:hover:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected),.loro-button--navigation:focus-visible:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected){background:var(--loro-home-avatar-bg);transform:translateY(-.24rem) scale(1.01)}.loro-button--selected{border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))))}.loro-button--navigation.loro-button--selected:hover:not(:disabled),.loro-button--navigation.loro-button--selected:focus-visible:not(:disabled){transform:none;border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))));outline:none}.loro-button--danger,.loro-button--danger-color{border-color:color-mix(in srgb,var(--loro-danger-text) 24%,transparent);background:var(--loro-danger-surface);color:var(--loro-danger-text)}.loro-button--navigation.loro-button--danger-color{border-color:var(--loro-button-border-color, transparent);background:var(--loro-button-background, var(--loro-danger-surface));color:var(--loro-button-color, var(--loro-danger-text))}.loro-button--secondary-color.loro-button--primary{background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-900));color:#fff}.loro-button--tertiary-color.loro-button--primary{background:linear-gradient(135deg,color-mix(in srgb,var(--loro-primary-500) 82%,white),var(--loro-primary-700));color:#fff}.loro-button--sm{min-height:var(--loro-button-min-height, 2.35rem);border-radius:var(--loro-button-radius, .65rem);font-size:var(--loro-button-font-size, .82rem)}.loro-button--lg{min-height:var(--loro-button-min-height, 3.65rem);padding:var(--loro-button-padding, .95rem 1.35rem);border-radius:var(--loro-button-radius, 1rem);font-size:var(--loro-button-font-size, 1.08rem)}.loro-button--icon-only{width:var(--loro-button-icon-size, 3rem);min-width:var(--loro-button-icon-size, 3rem);padding:0;aspect-ratio:1}.loro-button:disabled{cursor:not-allowed;opacity:1;transform:none;border-color:var(--loro-button-disabled-border, var(--loro-disabled-border));background:var(--loro-button-disabled-bg, var(--loro-disabled-surface));color:var(--loro-button-disabled-text, var(--loro-disabled-text));box-shadow:var(--loro-button-disabled-shadow, none)}.loro-button--primary:disabled,.loro-button--primary-color:disabled{background:var(--loro-button-disabled-bg, var(--loro-disabled-primary-surface, var(--loro-disabled-surface)));color:var(--loro-button-disabled-text, var(--loro-disabled-primary-text, var(--loro-disabled-text)))}.loro-button--social:disabled{border-color:var(--loro-social-disabled-border, var(--loro-button-disabled-border, var(--loro-disabled-border)));background:var(--loro-social-disabled-surface, var(--loro-button-disabled-bg, var(--loro-disabled-surface)));color:var(--loro-social-disabled-text, var(--loro-button-disabled-text, var(--loro-disabled-text)));box-shadow:var(--loro-social-disabled-shadow, none)}.loro-button:disabled loro-icon,.loro-button:disabled ::ng-deep .loro-icon,.loro-button:disabled ::ng-deep svg{opacity:var(--loro-button-disabled-icon-opacity, .72)!important}.loro-button--loading:disabled{cursor:progress}.loro-button--loading{cursor:progress}@keyframes loro-button-spin{to{transform:rotate(360deg)}}@media(max-width:767.88px){.loro-button--social.loro-button--social-mobile-compact{width:var(--loro-button-icon-size, 3rem);min-width:var(--loro-button-icon-size, 3rem);min-height:var(--loro-button-icon-size, 3rem);margin-inline:auto;padding:0;aspect-ratio:1}.loro-button--social.loro-button--social-mobile-compact .loro-button__label{display:none}}@media(prefers-reduced-motion:reduce){.loro-button{transition:none}.loro-button__spinner{animation-duration:1.4s}}\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: LoroButton, isStandalone: true, selector: "loro-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconContent: { classPropertyName: "iconContent", publicName: "iconContent", isSignal: true, isRequired: false, transformFunction: null }, iconMode: { classPropertyName: "iconMode", publicName: "iconMode", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, iconButtonSize: { classPropertyName: "iconButtonSize", publicName: "iconButtonSize", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, socialMobileCompact: { classPropertyName: "socialMobileCompact", publicName: "socialMobileCompact", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, typeButton: { classPropertyName: "typeButton", publicName: "typeButton", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, buttonWidth: { classPropertyName: "buttonWidth", publicName: "buttonWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescription: { classPropertyName: "ariaDescription", publicName: "ariaDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick", change: "change", sanChange: "sanChange" }, host: { properties: { "class.loro-button-host--full": "resolvedButtonWidth() === 'full'" } }, ngImport: i0, template: "<button\n  [type]=\"type()\"\n  [attr.form]=\"formId() || null\"\n  class=\"loro-button\"\n  [class]=\"'loro-button loro-button--' + resolvedTypeButton()\"\n  [class.loro-button--outline]=\"variant() === 'outline'\"\n  [class.loro-button--ghost]=\"variant() === 'ghost'\"\n  [class.loro-button--soft]=\"variant() === 'soft'\"\n  [class.loro-button--social]=\"variant() === 'social'\"\n  [class.loro-button--action]=\"variant() === 'action'\"\n  [class.loro-button--navigation]=\"variant() === 'navigation'\"\n  [class.loro-button--danger]=\"variant() === 'danger'\"\n  [class.loro-button--secondary-color]=\"resolvedColor() === 'secondary'\"\n  [class.loro-button--tertiary-color]=\"resolvedColor() === 'tertiary'\"\n  [class.loro-button--danger-color]=\"resolvedColor() === 'danger'\"\n  [class.loro-button--sm]=\"size() === 'sm'\"\n  [class.loro-button--lg]=\"size() === 'lg'\"\n  [class.loro-button--full]=\"resolvedButtonWidth() === 'full'\"\n  [class.loro-button--icon-only]=\"resolvedIconMode() === 'only-icon'\"\n  [class.loro-button--social-mobile-compact]=\"socialMobileCompact()\"\n  [class.loro-button--selected]=\"selected()\"\n  [class.loro-button--loading]=\"loading()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-description]=\"ariaDescription() || null\"\n  [attr.aria-busy]=\"loading()\"\n  [style.--loro-button-icon-size]=\"resolvedIconButtonSize()\"\n  (click)=\"emitChange()\"\n>\n  @if (showIcon()) {\n    <loro-icon\n      [name]=\"resolvedIcon()!\"\n      [size]=\"iconSize()\"\n      [alt]=\"resolvedText()\"\n      [color]=\"resolvedIconColor()\"\n      [renderMode]=\"resolvedIconRenderMode()\"\n    />\n  }\n\n  @if (showSpinner()) {\n    <span class=\"loro-button__spinner\" aria-hidden=\"true\"></span>\n    <span class=\"loro-button__sr-status\" aria-live=\"polite\">{{ loadingAriaLabel() }}</span>\n  }\n\n  @if (resolvedIconMode() !== 'only-icon') {\n    <span class=\"loro-button__label\">{{ resolvedText() }}</span>\n  }\n</button>\n", styles: [":host{display:inline-flex;width:fit-content;font-family:var(--loro-font-brand)}:host(.loro-button-host--full){display:block;width:100%}.loro-button{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-width:0;min-height:var(--loro-button-min-height, 3.25rem);padding:var(--loro-button-padding, .85rem 1.25rem);border:1px solid transparent;border-radius:var(--loro-button-radius, .9rem);background:var(--loro-button-background, var(--loro-surface-muted));color:var(--loro-text-strong);box-shadow:var(--loro-button-shadow, none);font:inherit;font-size:var(--loro-button-font-size, 1rem);font-weight:900;line-height:1.1;white-space:normal;overflow-wrap:anywhere;word-break:break-word;text-align:center;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease}.loro-button__label{min-width:0}.loro-button__spinner{width:1rem;height:1rem;flex:0 0 auto;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:loro-button-spin .7s linear infinite}.loro-button__sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loro-button:hover:not(:disabled){transform:translateY(-1px)}.loro-button--full{width:100%}.loro-button--primary,.loro-button--primary.loro-button--primary-color{background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff}.loro-button--secondary,.loro-button--outline{border-color:var(--loro-primary-500);background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary,.loro-button--ghost{background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary{min-height:auto;padding:0;border-radius:.55rem;box-shadow:none}.loro-button--tertiary:hover:not(:disabled){transform:none}.loro-button--tertiary:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-primary-500) 28%,transparent);outline-offset:2px}.loro-button--soft{background:color-mix(in srgb,var(--loro-primary-500) 8%,transparent);color:var(--loro-primary-700)}.loro-button--social{border-color:var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text)}.loro-button--action{min-height:var(--loro-button-min-height, 2.75rem);padding:var(--loro-button-padding, 0);border:0;border-radius:var(--loro-button-radius, 50%);background:var(--loro-button-background, transparent);color:var(--loro-button-color, var(--loro-primary-700));box-shadow:var(--loro-button-shadow, none)}.loro-button--action:hover:not(:disabled){background:var(--loro-button-hover-background, color-mix(in srgb, var(--loro-primary) 8%, transparent));transform:translateY(-1px)}.loro-button--action:active:not(:disabled){transform:translateY(1px)}.loro-button--action:focus-visible{outline:3px solid var(--loro-button-focus-ring, color-mix(in srgb, var(--loro-primary) 36%, transparent));outline-offset:3px}.loro-button--social:hover:not(:disabled),.loro-button--social:focus-visible{border-color: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-button--navigation{justify-content:flex-start;gap:1rem;padding:.5rem;border-color:var(--loro-button-border-color, transparent);border-radius:var(--loro-button-radius, 1rem);color:var(--loro-home-avatar-color);text-align:left}.loro-button--navigation .loro-button__label{flex:1;text-align:left}.loro-button--navigation:hover:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected),.loro-button--navigation:focus-visible:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected){background:var(--loro-home-avatar-bg);transform:translateY(-.24rem) scale(1.01)}.loro-button--selected{border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))))}.loro-button--navigation.loro-button--selected:hover:not(:disabled),.loro-button--navigation.loro-button--selected:focus-visible:not(:disabled){transform:none;border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))));outline:none}.loro-button--danger,.loro-button--danger-color{border-color:color-mix(in srgb,var(--loro-danger-text) 24%,transparent);background:var(--loro-danger-surface);color:var(--loro-danger-text)}.loro-button--navigation.loro-button--danger-color{border-color:var(--loro-button-border-color, transparent);background:var(--loro-button-background, var(--loro-danger-surface));color:var(--loro-button-color, var(--loro-danger-text))}.loro-button--secondary-color.loro-button--primary{background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-900));color:#fff}.loro-button--tertiary-color.loro-button--primary{background:linear-gradient(135deg,color-mix(in srgb,var(--loro-primary-500) 82%,white),var(--loro-primary-700));color:#fff}.loro-button--sm{min-height:var(--loro-button-min-height, 2.35rem);border-radius:var(--loro-button-radius, .65rem);font-size:var(--loro-button-font-size, .82rem)}.loro-button--lg{min-height:var(--loro-button-min-height, 3.65rem);padding:var(--loro-button-padding, .95rem 1.35rem);border-radius:var(--loro-button-radius, 1rem);font-size:var(--loro-button-font-size, 1.08rem)}.loro-button--icon-only{width:var(--loro-button-icon-size, 3rem);min-width:var(--loro-button-icon-size, 3rem);padding:0;aspect-ratio:1}.loro-button:disabled{cursor:not-allowed;opacity:1;transform:none;border-color:var(--loro-button-disabled-border, var(--loro-disabled-border));background:var(--loro-button-disabled-bg, var(--loro-disabled-surface));color:var(--loro-button-disabled-text, var(--loro-disabled-text));box-shadow:var(--loro-button-disabled-shadow, none)}.loro-button--primary:disabled,.loro-button--primary-color:disabled{background:var(--loro-button-disabled-bg, var(--loro-disabled-primary-surface, var(--loro-disabled-surface)));color:var(--loro-button-disabled-text, var(--loro-disabled-primary-text, var(--loro-disabled-text)))}.loro-button--social:disabled{border-color:var(--loro-social-disabled-border, var(--loro-button-disabled-border, var(--loro-disabled-border)));background:var(--loro-social-disabled-surface, var(--loro-button-disabled-bg, var(--loro-disabled-surface)));color:var(--loro-social-disabled-text, var(--loro-button-disabled-text, var(--loro-disabled-text)));box-shadow:var(--loro-social-disabled-shadow, none)}.loro-button:disabled loro-icon,.loro-button:disabled ::ng-deep .loro-icon,.loro-button:disabled ::ng-deep svg{opacity:var(--loro-button-disabled-icon-opacity, .72)!important}.loro-button--loading:disabled{cursor:progress}.loro-button--loading{cursor:progress}@keyframes loro-button-spin{to{transform:rotate(360deg)}}@media(max-width:767.88px){.loro-button--social.loro-button--social-mobile-compact{width:var(--loro-button-icon-size, 3rem);min-width:var(--loro-button-icon-size, 3rem);min-height:var(--loro-button-icon-size, 3rem);margin-inline:auto;padding:0;aspect-ratio:1}.loro-button--social.loro-button--social-mobile-compact .loro-button__label{display:none}}@media(prefers-reduced-motion:reduce){.loro-button{transition:none}.loro-button__spinner{animation-duration:1.4s}}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroButton, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-button', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'loro-button', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.loro-button-host--full]': "resolvedButtonWidth() === 'full'",
                     }, template: "<button\n  [type]=\"type()\"\n  [attr.form]=\"formId() || null\"\n  class=\"loro-button\"\n  [class]=\"'loro-button loro-button--' + resolvedTypeButton()\"\n  [class.loro-button--outline]=\"variant() === 'outline'\"\n  [class.loro-button--ghost]=\"variant() === 'ghost'\"\n  [class.loro-button--soft]=\"variant() === 'soft'\"\n  [class.loro-button--social]=\"variant() === 'social'\"\n  [class.loro-button--action]=\"variant() === 'action'\"\n  [class.loro-button--navigation]=\"variant() === 'navigation'\"\n  [class.loro-button--danger]=\"variant() === 'danger'\"\n  [class.loro-button--secondary-color]=\"resolvedColor() === 'secondary'\"\n  [class.loro-button--tertiary-color]=\"resolvedColor() === 'tertiary'\"\n  [class.loro-button--danger-color]=\"resolvedColor() === 'danger'\"\n  [class.loro-button--sm]=\"size() === 'sm'\"\n  [class.loro-button--lg]=\"size() === 'lg'\"\n  [class.loro-button--full]=\"resolvedButtonWidth() === 'full'\"\n  [class.loro-button--icon-only]=\"resolvedIconMode() === 'only-icon'\"\n  [class.loro-button--social-mobile-compact]=\"socialMobileCompact()\"\n  [class.loro-button--selected]=\"selected()\"\n  [class.loro-button--loading]=\"loading()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-description]=\"ariaDescription() || null\"\n  [attr.aria-busy]=\"loading()\"\n  [style.--loro-button-icon-size]=\"resolvedIconButtonSize()\"\n  (click)=\"emitChange()\"\n>\n  @if (showIcon()) {\n    <loro-icon\n      [name]=\"resolvedIcon()!\"\n      [size]=\"iconSize()\"\n      [alt]=\"resolvedText()\"\n      [color]=\"resolvedIconColor()\"\n      [renderMode]=\"resolvedIconRenderMode()\"\n    />\n  }\n\n  @if (showSpinner()) {\n    <span class=\"loro-button__spinner\" aria-hidden=\"true\"></span>\n    <span class=\"loro-button__sr-status\" aria-live=\"polite\">{{ loadingAriaLabel() }}</span>\n  }\n\n  @if (resolvedIconMode() !== 'only-icon') {\n    <span class=\"loro-button__label\">{{ resolvedText() }}</span>\n  }\n</button>\n", styles: [":host{display:inline-flex;width:fit-content;font-family:var(--loro-font-brand)}:host(.loro-button-host--full){display:block;width:100%}.loro-button{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-width:0;min-height:var(--loro-button-min-height, 3.25rem);padding:var(--loro-button-padding, .85rem 1.25rem);border:1px solid transparent;border-radius:var(--loro-button-radius, .9rem);background:var(--loro-button-background, var(--loro-surface-muted));color:var(--loro-text-strong);box-shadow:var(--loro-button-shadow, none);font:inherit;font-size:var(--loro-button-font-size, 1rem);font-weight:900;line-height:1.1;white-space:normal;overflow-wrap:anywhere;word-break:break-word;text-align:center;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease,color .15s ease}.loro-button__label{min-width:0}.loro-button__spinner{width:1rem;height:1rem;flex:0 0 auto;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:loro-button-spin .7s linear infinite}.loro-button__sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loro-button:hover:not(:disabled){transform:translateY(-1px)}.loro-button--full{width:100%}.loro-button--primary,.loro-button--primary.loro-button--primary-color{background:linear-gradient(135deg,var(--loro-primary-500),var(--loro-primary-700));color:#fff}.loro-button--secondary,.loro-button--outline{border-color:var(--loro-primary-500);background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary,.loro-button--ghost{background:transparent;color:var(--loro-primary-700)}.loro-button--tertiary{min-height:auto;padding:0;border-radius:.55rem;box-shadow:none}.loro-button--tertiary:hover:not(:disabled){transform:none}.loro-button--tertiary:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-primary-500) 28%,transparent);outline-offset:2px}.loro-button--soft{background:color-mix(in srgb,var(--loro-primary-500) 8%,transparent);color:var(--loro-primary-700)}.loro-button--social{border-color:var(--loro-border-subtle);background:var(--loro-surface);color:var(--loro-text)}.loro-button--action{min-height:var(--loro-button-min-height, 2.75rem);padding:var(--loro-button-padding, 0);border:0;border-radius:var(--loro-button-radius, 50%);background:var(--loro-button-background, transparent);color:var(--loro-button-color, var(--loro-primary-700));box-shadow:var(--loro-button-shadow, none)}.loro-button--action:hover:not(:disabled){background:var(--loro-button-hover-background, color-mix(in srgb, var(--loro-primary) 8%, transparent));transform:translateY(-1px)}.loro-button--action:active:not(:disabled){transform:translateY(1px)}.loro-button--action:focus-visible{outline:3px solid var(--loro-button-focus-ring, color-mix(in srgb, var(--loro-primary) 36%, transparent));outline-offset:3px}.loro-button--social:hover:not(:disabled),.loro-button--social:focus-visible{border-color: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-button--navigation{justify-content:flex-start;gap:1rem;padding:.5rem;border-color:var(--loro-button-border-color, transparent);border-radius:var(--loro-button-radius, 1rem);color:var(--loro-home-avatar-color);text-align:left}.loro-button--navigation .loro-button__label{flex:1;text-align:left}.loro-button--navigation:hover:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected),.loro-button--navigation:focus-visible:not(:disabled):not(.loro-button--danger-color):not(.loro-button--selected){background:var(--loro-home-avatar-bg);transform:translateY(-.24rem) scale(1.01)}.loro-button--selected{border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))))}.loro-button--navigation.loro-button--selected:hover:not(:disabled),.loro-button--navigation.loro-button--selected:focus-visible:not(:disabled){transform:none;border-color:var(--loro-button-selected-border-color, var(--loro-button-border-color, transparent));background:var(--loro-button-selected-background, var(--loro-button-background, transparent));color:var(--loro-button-selected-color, var(--loro-button-color, var(--loro-nav-button-text, var(--loro-text-strong))));outline:none}.loro-button--danger,.loro-button--danger-color{border-color:color-mix(in srgb,var(--loro-danger-text) 24%,transparent);background:var(--loro-danger-surface);color:var(--loro-danger-text)}.loro-button--navigation.loro-button--danger-color{border-color:var(--loro-button-border-color, transparent);background:var(--loro-button-background, var(--loro-danger-surface));color:var(--loro-button-color, var(--loro-danger-text))}.loro-button--secondary-color.loro-button--primary{background:linear-gradient(135deg,var(--loro-primary-700),var(--loro-primary-900));color:#fff}.loro-button--tertiary-color.loro-button--primary{background:linear-gradient(135deg,color-mix(in srgb,var(--loro-primary-500) 82%,white),var(--loro-primary-700));color:#fff}.loro-button--sm{min-height:var(--loro-button-min-height, 2.35rem);border-radius:var(--loro-button-radius, .65rem);font-size:var(--loro-button-font-size, .82rem)}.loro-button--lg{min-height:var(--loro-button-min-height, 3.65rem);padding:var(--loro-button-padding, .95rem 1.35rem);border-radius:var(--loro-button-radius, 1rem);font-size:var(--loro-button-font-size, 1.08rem)}.loro-button--icon-only{width:var(--loro-button-icon-size, 3rem);min-width:var(--loro-button-icon-size, 3rem);padding:0;aspect-ratio:1}.loro-button:disabled{cursor:not-allowed;opacity:1;transform:none;border-color:var(--loro-button-disabled-border, var(--loro-disabled-border));background:var(--loro-button-disabled-bg, var(--loro-disabled-surface));color:var(--loro-button-disabled-text, var(--loro-disabled-text));box-shadow:var(--loro-button-disabled-shadow, none)}.loro-button--primary:disabled,.loro-button--primary-color:disabled{background:var(--loro-button-disabled-bg, var(--loro-disabled-primary-surface, var(--loro-disabled-surface)));color:var(--loro-button-disabled-text, var(--loro-disabled-primary-text, var(--loro-disabled-text)))}.loro-button--social:disabled{border-color:var(--loro-social-disabled-border, var(--loro-button-disabled-border, var(--loro-disabled-border)));background:var(--loro-social-disabled-surface, var(--loro-button-disabled-bg, var(--loro-disabled-surface)));color:var(--loro-social-disabled-text, var(--loro-button-disabled-text, var(--loro-disabled-text)));box-shadow:var(--loro-social-disabled-shadow, none)}.loro-button:disabled loro-icon,.loro-button:disabled ::ng-deep .loro-icon,.loro-button:disabled ::ng-deep svg{opacity:var(--loro-button-disabled-icon-opacity, .72)!important}.loro-button--loading:disabled{cursor:progress}.loro-button--loading{cursor:progress}@keyframes loro-button-spin{to{transform:rotate(360deg)}}@media(max-width:767.88px){.loro-button--social.loro-button--social-mobile-compact{width:var(--loro-button-icon-size, 3rem);min-width:var(--loro-button-icon-size, 3rem);min-height:var(--loro-button-icon-size, 3rem);margin-inline:auto;padding:0;aspect-ratio:1}.loro-button--social.loro-button--social-mobile-compact .loro-button__label{display:none}}@media(prefers-reduced-motion:reduce){.loro-button{transition:none}.loro-button__spinner{animation-duration:1.4s}}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconContent", required: false }] }], iconMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconMode", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], iconButtonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconButtonSize", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], socialMobileCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "socialMobileCompact", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], typeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeButton", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], buttonWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formId: [{ type: i0.Input, args: [{ isSignal: true, alias: "formId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescription", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }], change: [{ type: i0.Output, args: ["change"] }], sanChange: [{ type: i0.Output, args: ["sanChange"] }] } });
@@ -1518,11 +1467,11 @@ class LoroAppNav {
         this.mobilePointerActive.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAppNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAppNav, isStandalone: true, selector: "loro-app-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, utilityItems: { classPropertyName: "utilityItems", publicName: "utilityItems", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showUtilityItems: { classPropertyName: "showUtilityItems", publicName: "showUtilityItems", isSignal: true, isRequired: false, transformFunction: null }, compactDesktop: { classPropertyName: "compactDesktop", publicName: "compactDesktop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", utilityItemClick: "utilityItemClick", navItemClick: "navItemClick" }, ngImport: i0, template: "<aside class=\"loro-app-nav\">\n  <div class=\"loro-app-nav__desktop\">\n    <div class=\"loro-app-nav__surface\" [class.loro-app-nav__surface--compact]=\"compactDesktop()\">\n      <div class=\"loro-app-nav__brand\">\n        <loro-image\n          class=\"loro-app-nav__brand-image\"\n          name=\"image-loro-apaisado\"\n          alt=\"AlLoro\"\n          width=\"10rem\"\n          height=\"auto\"\n        />\n      </div>\n\n      <nav class=\"loro-app-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n        @for (item of desktopItems(); track item.id) {\n          <loro-button\n            class=\"loro-app-nav__item\"\n            [class.loro-app-nav__item--active]=\"item.active\"\n            [class.loro-app-nav__item--disabled]=\"item.disabled\"\n            [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"item.label\"\n            [icon]=\"item.icon\"\n            iconMode=\"with-icon\"\n            iconColor=\"default\"\n            variant=\"navigation\"\n            [selected]=\"!!item.active\"\n            [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n            type=\"button\"\n            [fullWidth]=\"true\"\n            [ariaLabel]=\"item.label\"\n            [disabled]=\"!!item.disabled\"\n            (buttonClick)=\"onMainItemClick(item)\"\n          >\n            @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n              <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n            }\n          </loro-button>\n        }\n      </nav>\n\n      <div class=\"loro-app-nav__spacer\"></div>\n\n      @if (showUtilityItems() && utilityItems().length > 0) {\n        <div class=\"loro-app-nav__divider\" aria-hidden=\"true\"></div>\n\n        <nav\n          class=\"loro-app-nav__nav loro-app-nav__nav--utility\"\n          aria-label=\"Navegaci\u00F3n secundaria\"\n        >\n          @for (item of utilityItems(); track item.id) {\n            <loro-button\n              class=\"loro-app-nav__item\"\n              [class.loro-app-nav__item--active]=\"item.active\"\n              [class.loro-app-nav__item--disabled]=\"item.disabled\"\n              [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n              [text]=\"item.label\"\n              [icon]=\"item.icon\"\n              iconMode=\"with-icon\"\n              iconColor=\"default\"\n              variant=\"navigation\"\n              [selected]=\"!!item.active\"\n              [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n              type=\"button\"\n              [fullWidth]=\"true\"\n              [ariaLabel]=\"item.label\"\n              [disabled]=\"!!item.disabled\"\n              (buttonClick)=\"onUtilityItemClick(item)\"\n            >\n              @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n                <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n              }\n            </loro-button>\n          }\n        </nav>\n      }\n    </div>\n  </div>\n\n  <nav\n    ngToolbar\n    class=\"loro-app-nav__mobile\"\n    data-horizontal-gesture\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n    [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n    [class.loro-app-nav__mobile--with-labels]=\"true\"\n    [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n    [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n    (pointerdown)=\"onMobilePointerDown($event)\"\n    (pointermove)=\"onMobilePointerMove($event)\"\n    (pointerup)=\"onMobilePointerUp($event)\"\n    (pointercancel)=\"onMobilePointerCancel($event)\"\n  >\n    <span\n      class=\"loro-app-nav__mobile-slider\"\n      [class.loro-app-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan'\"\n      aria-hidden=\"true\"></span>\n\n    @for (item of mobileItems(); track item.id; let index = $index) {\n      <button\n        ngToolbarWidget\n        type=\"button\"\n        class=\"loro-app-nav__mobile-item\"\n        [style.grid-column]=\"mobileItemGridColumn(index)\"\n        [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n        [attr.aria-label]=\"item.label\"\n        [attr.aria-current]=\"item.active ? 'page' : null\"\n        [value]=\"item.id\"\n        [disabled]=\"!!item.disabled\"\n        (click)=\"onMobileItemClick(item)\"\n      >\n        <loro-icon\n          class=\"loro-app-nav__mobile-icon\"\n          [name]=\"item.icon\"\n          [size]=\"24\"\n          color=\"default\"\n          [alt]=\"item.label\"\n        />\n        <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n      </button>\n    }\n  </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:1}.loro-app-nav__item--disabled{--loro-button-disabled-bg: var(--loro-disabled-surface);--loro-button-disabled-border: var(--loro-disabled-border);--loro-button-disabled-text: var(--loro-disabled-text)}.loro-app-nav__mobile-item--disabled{color:var(--loro-disabled-text)}.loro-app-nav__label,.loro-app-nav__mobile-label{color:inherit}.loro-app-nav__label{font-size:.98rem;font-weight:700;color:inherit}.loro-app-nav__badge{margin-left:auto;min-width:1.5rem;padding:.125rem .5rem;border-radius:999px;background:#ffffff24;color:inherit;font-size:.75rem;font-weight:700;text-align:center;box-shadow:inset 0 1px #ffffff14}.loro-app-nav__spacer{flex:1}.loro-app-nav__divider{height:1px;margin:.65rem 0 .9rem;background:var(--loro-nav-divider)}.loro-app-nav__nav--utility{margin-top:auto}.loro-app-nav__mobile{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom,0px) * .28);z-index:70;display:grid;grid-template-columns:repeat(var(--loro-mobile-visual-slot-count, 4),minmax(0,1fr));width:min(76vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),19rem);gap:0;margin:0;transform:translate(-50%);padding:0;overflow:hidden;border:1px solid var(--loro-nav-mobile-border, rgba(43, 35, 80, .08));border-radius:999px;isolation:isolate;background:var(--loro-nav-mobile-glass-surface, rgba(255, 255, 255, .68));box-shadow:var(--loro-nav-mobile-surface-shadow, 0 8px 24px rgba(28, 32, 48, .1));backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);-webkit-backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);touch-action:pan-y;contain:layout paint;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}.loro-app-nav__mobile-item{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3.58rem;gap:.18rem;padding:.35rem .15rem;border:0;border-radius:999px;outline:0;background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text));cursor:pointer;appearance:none;-webkit-appearance:none;opacity:1;visibility:visible;transition:transform .22s cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent}.loro-app-nav__mobile-item:hover:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:active:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:focus:not(.loro-app-nav__mobile-item--active){background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item--active{background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item:focus-visible{outline:2px solid var(--loro-focus-ring);outline-offset:-4px}.loro-app-nav__mobile-item:disabled{cursor:not-allowed;opacity:1;color:var(--loro-disabled-text)}.loro-app-nav__mobile-icon{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none;mix-blend-mode:normal;transform:scale(.94);transform-origin:center}.loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile-item ::ng-deep svg{display:block!important;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none!important}.loro-app-nav__mobile-item ::ng-deep .loro-icon__mask{background-color:currentColor!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-item ::ng-deep svg [fill]:not([fill=none]){fill:currentColor!important}.loro-app-nav__mobile-item ::ng-deep svg [stroke]:not([stroke=none]){stroke:currentColor!important}.loro-app-nav__mobile-slider{position:absolute;inset-block:0;left:0;z-index:1;width:calc(100% / var(--loro-mobile-visual-slot-count, 4));border:0;border-radius:999px;background:var(--loro-nav-mobile-indicator, linear-gradient(180deg, rgba(227, 229, 233, .96) 0%, rgba(214, 217, 223, .92) 100%));box-shadow:var(--loro-nav-mobile-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 5px rgba(21, 28, 42, .06));transform:translate3d(calc(var(--loro-mobile-slider-position, 0) * 100%),0,0);will-change:transform;transition:transform .26s cubic-bezier(.22,1,.36,1);pointer-events:none}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-slider{transition:transform 1ms linear}.loro-app-nav__mobile-slider--scan{background:var(--loro-nav-mobile-scan-indicator, linear-gradient(180deg, rgba(132, 83, 255, .98) 0%, rgba(94, 47, 224, .96) 100%));box-shadow:var(--loro-nav-mobile-scan-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .38), 0 .85rem 1.65rem rgba(108, 60, 255, .28))}.loro-app-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff)!important}.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):hover,.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):active{color:var(--loro-nav-mobile-icon, var(--loro-text))!important}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active),.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep svg{color:var(--loro-nav-mobile-icon, var(--loro-text))!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-label{display:block;max-width:100%;overflow:hidden;color:inherit;font-size:.625rem;font-weight:700;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(.08rem);transition:opacity .18s ease,transform .18s ease}.loro-app-nav__mobile--with-labels{width:min(92vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),24rem)}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-item{min-height:4.4rem;padding-top:.7rem}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-label{opacity:1;transform:translateY(0)}@media(max-width:479.99px)and (orientation:portrait){:host{height:auto}.loro-app-nav{height:auto;padding:0}.loro-app-nav__desktop{height:auto}}@media(min-width:1024px){:host,.loro-app-nav,.loro-app-nav__desktop{height:100%}.loro-app-nav__desktop{display:block}.loro-app-nav__mobile{display:none}}@media(prefers-reduced-motion:reduce){.loro-app-nav__mobile-slider,.loro-app-nav__mobile-item,.loro-app-nav__mobile-item ::ng-deep .loro-icon{transition-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: Toolbar, selector: "[ngToolbar]", inputs: ["orientation", "softDisabled", "disabled", "wrap", "values"], outputs: ["valuesChange"], exportAs: ["ngToolbar"] }, { kind: "directive", type: ToolbarWidget, selector: "[ngToolbarWidget]", inputs: ["id", "disabled", "value"], exportAs: ["ngToolbarWidget"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { 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: LoroAppNav, isStandalone: true, selector: "loro-app-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, utilityItems: { classPropertyName: "utilityItems", publicName: "utilityItems", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showUtilityItems: { classPropertyName: "showUtilityItems", publicName: "showUtilityItems", isSignal: true, isRequired: false, transformFunction: null }, compactDesktop: { classPropertyName: "compactDesktop", publicName: "compactDesktop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", utilityItemClick: "utilityItemClick", navItemClick: "navItemClick" }, ngImport: i0, template: "<aside class=\"loro-app-nav\">\n  <div class=\"loro-app-nav__desktop\">\n    <div class=\"loro-app-nav__surface\" [class.loro-app-nav__surface--compact]=\"compactDesktop()\">\n      <div class=\"loro-app-nav__brand\">\n        <loro-image\n          class=\"loro-app-nav__brand-image\"\n          name=\"image-loro-apaisado\"\n          alt=\"AlLoro\"\n          width=\"10rem\"\n          height=\"auto\"\n        />\n      </div>\n\n      <nav class=\"loro-app-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n        @for (item of desktopItems(); track item.id) {\n          <loro-button\n            class=\"loro-app-nav__item\"\n            [class.loro-app-nav__item--active]=\"item.active\"\n            [class.loro-app-nav__item--disabled]=\"item.disabled\"\n            [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"item.label\"\n            [icon]=\"item.icon\"\n            iconMode=\"with-icon\"\n            iconColor=\"default\"\n            variant=\"navigation\"\n            [selected]=\"!!item.active\"\n            [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n            type=\"button\"\n            [fullWidth]=\"true\"\n            [ariaLabel]=\"item.label\"\n            [disabled]=\"!!item.disabled\"\n            (buttonClick)=\"onMainItemClick(item)\"\n          >\n            @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n              <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n            }\n          </loro-button>\n        }\n      </nav>\n\n      <div class=\"loro-app-nav__spacer\"></div>\n\n      @if (showUtilityItems() && utilityItems().length > 0) {\n        <div class=\"loro-app-nav__divider\" aria-hidden=\"true\"></div>\n\n        <nav\n          class=\"loro-app-nav__nav loro-app-nav__nav--utility\"\n          aria-label=\"Navegaci\u00F3n secundaria\"\n        >\n          @for (item of utilityItems(); track item.id) {\n            <loro-button\n              class=\"loro-app-nav__item\"\n              [class.loro-app-nav__item--active]=\"item.active\"\n              [class.loro-app-nav__item--disabled]=\"item.disabled\"\n              [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n              [text]=\"item.label\"\n              [icon]=\"item.icon\"\n              iconMode=\"with-icon\"\n              iconColor=\"default\"\n              variant=\"navigation\"\n              [selected]=\"!!item.active\"\n              [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n              type=\"button\"\n              [fullWidth]=\"true\"\n              [ariaLabel]=\"item.label\"\n              [disabled]=\"!!item.disabled\"\n              (buttonClick)=\"onUtilityItemClick(item)\"\n            >\n              @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n                <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n              }\n            </loro-button>\n          }\n        </nav>\n      }\n    </div>\n  </div>\n\n  <nav\n    ngToolbar\n    class=\"loro-app-nav__mobile\"\n    data-horizontal-gesture\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n    [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n    [class.loro-app-nav__mobile--with-labels]=\"true\"\n    [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n    [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n    (pointerdown)=\"onMobilePointerDown($event)\"\n    (pointermove)=\"onMobilePointerMove($event)\"\n    (pointerup)=\"onMobilePointerUp($event)\"\n    (pointercancel)=\"onMobilePointerCancel($event)\"\n  >\n    <span\n      class=\"loro-app-nav__mobile-slider\"\n      [class.loro-app-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan'\"\n      aria-hidden=\"true\"></span>\n\n    @for (item of mobileItems(); track item.id; let index = $index) {\n      <button\n        ngToolbarWidget\n        type=\"button\"\n        class=\"loro-app-nav__mobile-item\"\n        [style.grid-column]=\"mobileItemGridColumn(index)\"\n        [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n        [attr.aria-label]=\"item.label\"\n        [attr.aria-current]=\"item.active ? 'page' : null\"\n        [value]=\"item.id\"\n        [disabled]=\"!!item.disabled\"\n        (click)=\"onMobileItemClick(item)\"\n      >\n        <loro-icon\n          class=\"loro-app-nav__mobile-icon\"\n          [name]=\"item.icon\"\n          [size]=\"24\"\n          color=\"default\"\n          [alt]=\"item.label\"\n        />\n        <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n      </button>\n    }\n  </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:1}.loro-app-nav__item--disabled{--loro-button-disabled-bg: var(--loro-disabled-surface);--loro-button-disabled-border: var(--loro-disabled-border);--loro-button-disabled-text: var(--loro-disabled-text)}.loro-app-nav__mobile-item--disabled{color:var(--loro-disabled-text)}.loro-app-nav__label,.loro-app-nav__mobile-label{color:inherit}.loro-app-nav__label{font-size:.98rem;font-weight:700;color:inherit}.loro-app-nav__badge{margin-left:auto;min-width:1.5rem;padding:.125rem .5rem;border-radius:999px;background:#ffffff24;color:inherit;font-size:.75rem;font-weight:700;text-align:center;box-shadow:inset 0 1px #ffffff14}.loro-app-nav__spacer{flex:1}.loro-app-nav__divider{height:1px;margin:.65rem 0 .9rem;background:var(--loro-nav-divider)}.loro-app-nav__nav--utility{margin-top:auto}.loro-app-nav__mobile{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom,0px) * .28);z-index:70;display:grid;grid-template-columns:repeat(var(--loro-mobile-visual-slot-count, 4),minmax(0,1fr));width:min(76vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),19rem);gap:0;margin:0;transform:translate(-50%);padding:0;overflow:hidden;border:1px solid var(--loro-nav-mobile-border, rgba(43, 35, 80, .08));border-radius:999px;isolation:isolate;background:var(--loro-nav-mobile-glass-surface, rgba(255, 255, 255, .68));box-shadow:var(--loro-nav-mobile-surface-shadow, 0 8px 24px rgba(28, 32, 48, .1));backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);-webkit-backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);touch-action:pan-y;contain:layout paint;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}.loro-app-nav__mobile-item{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3.58rem;gap:.18rem;padding:.35rem .15rem;border:0;border-radius:999px;outline:0;background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text));cursor:pointer;appearance:none;-webkit-appearance:none;opacity:1;visibility:visible;transition:transform .22s cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent}.loro-app-nav__mobile-item:hover:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:active:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:focus:not(.loro-app-nav__mobile-item--active){background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item--active{background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item:focus-visible{outline:2px solid var(--loro-focus-ring);outline-offset:-4px}.loro-app-nav__mobile-item:disabled{cursor:not-allowed;opacity:1;color:var(--loro-disabled-text)}.loro-app-nav__mobile-icon{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none;mix-blend-mode:normal;transform:scale(.94);transform-origin:center}.loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile-item ::ng-deep svg{display:block!important;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none!important}.loro-app-nav__mobile-item ::ng-deep .loro-icon__mask{background-color:currentColor!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-item ::ng-deep svg [fill]:not([fill=none]){fill:currentColor!important}.loro-app-nav__mobile-item ::ng-deep svg [stroke]:not([stroke=none]){stroke:currentColor!important}.loro-app-nav__mobile-slider{position:absolute;inset-block:0;left:0;z-index:1;width:calc(100% / var(--loro-mobile-visual-slot-count, 4));border:0;border-radius:999px;background:var(--loro-nav-mobile-indicator, linear-gradient(180deg, rgba(227, 229, 233, .96) 0%, rgba(214, 217, 223, .92) 100%));box-shadow:var(--loro-nav-mobile-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 5px rgba(21, 28, 42, .06));transform:translate3d(calc(var(--loro-mobile-slider-position, 0) * 100%),0,0);will-change:transform;transition:transform .26s cubic-bezier(.22,1,.36,1);pointer-events:none}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-slider{transition:transform 1ms linear}.loro-app-nav__mobile-slider--scan{background:var(--loro-nav-mobile-scan-indicator, linear-gradient(180deg, rgba(132, 83, 255, .98) 0%, rgba(94, 47, 224, .96) 100%));box-shadow:var(--loro-nav-mobile-scan-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .38), 0 .85rem 1.65rem rgba(108, 60, 255, .28))}.loro-app-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff)!important}.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):hover,.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):active{color:var(--loro-nav-mobile-icon, var(--loro-text))!important}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active),.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep svg{color:var(--loro-nav-mobile-icon, var(--loro-text))!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-label{display:block;max-width:100%;overflow:hidden;color:inherit;font-size:.625rem;font-weight:700;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(.08rem);transition:opacity .18s ease,transform .18s ease}.loro-app-nav__mobile--with-labels{width:min(92vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),24rem)}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-item{min-height:4.4rem;padding-top:.7rem}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-label{opacity:1;transform:translateY(0)}@media(max-width:479.99px)and (orientation:portrait){:host{height:auto}.loro-app-nav{height:auto;padding:0}.loro-app-nav__desktop{height:auto}}@media(min-width:1024px){:host,.loro-app-nav,.loro-app-nav__desktop{height:100%}.loro-app-nav__desktop{display:block}.loro-app-nav__mobile{display:none}}@media(prefers-reduced-motion:reduce){.loro-app-nav__mobile-slider,.loro-app-nav__mobile-item,.loro-app-nav__mobile-item ::ng-deep .loro-icon{transition-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: Toolbar, selector: "[ngToolbar]", inputs: ["orientation", "softDisabled", "disabled", "wrap", "values"], outputs: ["valuesChange"], exportAs: ["ngToolbar"] }, { kind: "directive", type: ToolbarWidget, selector: "[ngToolbarWidget]", inputs: ["id", "disabled", "value"], exportAs: ["ngToolbarWidget"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { 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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAppNav, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-app-nav', standalone: true, imports: [Toolbar, ToolbarWidget, LoroImage, LoroButton, LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"loro-app-nav\">\n  <div class=\"loro-app-nav__desktop\">\n    <div class=\"loro-app-nav__surface\" [class.loro-app-nav__surface--compact]=\"compactDesktop()\">\n      <div class=\"loro-app-nav__brand\">\n        <loro-image\n          class=\"loro-app-nav__brand-image\"\n          name=\"image-loro-apaisado\"\n          alt=\"AlLoro\"\n          width=\"10rem\"\n          height=\"auto\"\n        />\n      </div>\n\n      <nav class=\"loro-app-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n        @for (item of desktopItems(); track item.id) {\n          <loro-button\n            class=\"loro-app-nav__item\"\n            [class.loro-app-nav__item--active]=\"item.active\"\n            [class.loro-app-nav__item--disabled]=\"item.disabled\"\n            [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"item.label\"\n            [icon]=\"item.icon\"\n            iconMode=\"with-icon\"\n            iconColor=\"default\"\n            variant=\"navigation\"\n            [selected]=\"!!item.active\"\n            [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n            type=\"button\"\n            [fullWidth]=\"true\"\n            [ariaLabel]=\"item.label\"\n            [disabled]=\"!!item.disabled\"\n            (buttonClick)=\"onMainItemClick(item)\"\n          >\n            @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n              <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n            }\n          </loro-button>\n        }\n      </nav>\n\n      <div class=\"loro-app-nav__spacer\"></div>\n\n      @if (showUtilityItems() && utilityItems().length > 0) {\n        <div class=\"loro-app-nav__divider\" aria-hidden=\"true\"></div>\n\n        <nav\n          class=\"loro-app-nav__nav loro-app-nav__nav--utility\"\n          aria-label=\"Navegaci\u00F3n secundaria\"\n        >\n          @for (item of utilityItems(); track item.id) {\n            <loro-button\n              class=\"loro-app-nav__item\"\n              [class.loro-app-nav__item--active]=\"item.active\"\n              [class.loro-app-nav__item--disabled]=\"item.disabled\"\n              [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n              [text]=\"item.label\"\n              [icon]=\"item.icon\"\n              iconMode=\"with-icon\"\n              iconColor=\"default\"\n              variant=\"navigation\"\n              [selected]=\"!!item.active\"\n              [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n              type=\"button\"\n              [fullWidth]=\"true\"\n              [ariaLabel]=\"item.label\"\n              [disabled]=\"!!item.disabled\"\n              (buttonClick)=\"onUtilityItemClick(item)\"\n            >\n              @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n                <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n              }\n            </loro-button>\n          }\n        </nav>\n      }\n    </div>\n  </div>\n\n  <nav\n    ngToolbar\n    class=\"loro-app-nav__mobile\"\n    data-horizontal-gesture\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n    [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n    [class.loro-app-nav__mobile--with-labels]=\"true\"\n    [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n    [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n    (pointerdown)=\"onMobilePointerDown($event)\"\n    (pointermove)=\"onMobilePointerMove($event)\"\n    (pointerup)=\"onMobilePointerUp($event)\"\n    (pointercancel)=\"onMobilePointerCancel($event)\"\n  >\n    <span\n      class=\"loro-app-nav__mobile-slider\"\n      [class.loro-app-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan'\"\n      aria-hidden=\"true\"></span>\n\n    @for (item of mobileItems(); track item.id; let index = $index) {\n      <button\n        ngToolbarWidget\n        type=\"button\"\n        class=\"loro-app-nav__mobile-item\"\n        [style.grid-column]=\"mobileItemGridColumn(index)\"\n        [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n        [attr.aria-label]=\"item.label\"\n        [attr.aria-current]=\"item.active ? 'page' : null\"\n        [value]=\"item.id\"\n        [disabled]=\"!!item.disabled\"\n        (click)=\"onMobileItemClick(item)\"\n      >\n        <loro-icon\n          class=\"loro-app-nav__mobile-icon\"\n          [name]=\"item.icon\"\n          [size]=\"24\"\n          color=\"default\"\n          [alt]=\"item.label\"\n        />\n        <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n      </button>\n    }\n  </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:1}.loro-app-nav__item--disabled{--loro-button-disabled-bg: var(--loro-disabled-surface);--loro-button-disabled-border: var(--loro-disabled-border);--loro-button-disabled-text: var(--loro-disabled-text)}.loro-app-nav__mobile-item--disabled{color:var(--loro-disabled-text)}.loro-app-nav__label,.loro-app-nav__mobile-label{color:inherit}.loro-app-nav__label{font-size:.98rem;font-weight:700;color:inherit}.loro-app-nav__badge{margin-left:auto;min-width:1.5rem;padding:.125rem .5rem;border-radius:999px;background:#ffffff24;color:inherit;font-size:.75rem;font-weight:700;text-align:center;box-shadow:inset 0 1px #ffffff14}.loro-app-nav__spacer{flex:1}.loro-app-nav__divider{height:1px;margin:.65rem 0 .9rem;background:var(--loro-nav-divider)}.loro-app-nav__nav--utility{margin-top:auto}.loro-app-nav__mobile{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom,0px) * .28);z-index:70;display:grid;grid-template-columns:repeat(var(--loro-mobile-visual-slot-count, 4),minmax(0,1fr));width:min(76vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),19rem);gap:0;margin:0;transform:translate(-50%);padding:0;overflow:hidden;border:1px solid var(--loro-nav-mobile-border, rgba(43, 35, 80, .08));border-radius:999px;isolation:isolate;background:var(--loro-nav-mobile-glass-surface, rgba(255, 255, 255, .68));box-shadow:var(--loro-nav-mobile-surface-shadow, 0 8px 24px rgba(28, 32, 48, .1));backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);-webkit-backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);touch-action:pan-y;contain:layout paint;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}.loro-app-nav__mobile-item{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3.58rem;gap:.18rem;padding:.35rem .15rem;border:0;border-radius:999px;outline:0;background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text));cursor:pointer;appearance:none;-webkit-appearance:none;opacity:1;visibility:visible;transition:transform .22s cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent}.loro-app-nav__mobile-item:hover:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:active:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:focus:not(.loro-app-nav__mobile-item--active){background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item--active{background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item:focus-visible{outline:2px solid var(--loro-focus-ring);outline-offset:-4px}.loro-app-nav__mobile-item:disabled{cursor:not-allowed;opacity:1;color:var(--loro-disabled-text)}.loro-app-nav__mobile-icon{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none;mix-blend-mode:normal;transform:scale(.94);transform-origin:center}.loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile-item ::ng-deep svg{display:block!important;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none!important}.loro-app-nav__mobile-item ::ng-deep .loro-icon__mask{background-color:currentColor!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-item ::ng-deep svg [fill]:not([fill=none]){fill:currentColor!important}.loro-app-nav__mobile-item ::ng-deep svg [stroke]:not([stroke=none]){stroke:currentColor!important}.loro-app-nav__mobile-slider{position:absolute;inset-block:0;left:0;z-index:1;width:calc(100% / var(--loro-mobile-visual-slot-count, 4));border:0;border-radius:999px;background:var(--loro-nav-mobile-indicator, linear-gradient(180deg, rgba(227, 229, 233, .96) 0%, rgba(214, 217, 223, .92) 100%));box-shadow:var(--loro-nav-mobile-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 5px rgba(21, 28, 42, .06));transform:translate3d(calc(var(--loro-mobile-slider-position, 0) * 100%),0,0);will-change:transform;transition:transform .26s cubic-bezier(.22,1,.36,1);pointer-events:none}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-slider{transition:transform 1ms linear}.loro-app-nav__mobile-slider--scan{background:var(--loro-nav-mobile-scan-indicator, linear-gradient(180deg, rgba(132, 83, 255, .98) 0%, rgba(94, 47, 224, .96) 100%));box-shadow:var(--loro-nav-mobile-scan-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .38), 0 .85rem 1.65rem rgba(108, 60, 255, .28))}.loro-app-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff)!important}.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):hover,.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):active{color:var(--loro-nav-mobile-icon, var(--loro-text))!important}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active),.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep svg{color:var(--loro-nav-mobile-icon, var(--loro-text))!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-label{display:block;max-width:100%;overflow:hidden;color:inherit;font-size:.625rem;font-weight:700;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(.08rem);transition:opacity .18s ease,transform .18s ease}.loro-app-nav__mobile--with-labels{width:min(92vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),24rem)}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-item{min-height:4.4rem;padding-top:.7rem}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-label{opacity:1;transform:translateY(0)}@media(max-width:479.99px)and (orientation:portrait){:host{height:auto}.loro-app-nav{height:auto;padding:0}.loro-app-nav__desktop{height:auto}}@media(min-width:1024px){:host,.loro-app-nav,.loro-app-nav__desktop{height:100%}.loro-app-nav__desktop{display:block}.loro-app-nav__mobile{display:none}}@media(prefers-reduced-motion:reduce){.loro-app-nav__mobile-slider,.loro-app-nav__mobile-item,.loro-app-nav__mobile-item ::ng-deep .loro-icon{transition-duration:1ms}}\n"] }]
+            args: [{ selector: 'loro-app-nav', standalone: true, imports: [Toolbar, ToolbarWidget, LoroImage, LoroButton, LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"loro-app-nav\">\n  <div class=\"loro-app-nav__desktop\">\n    <div class=\"loro-app-nav__surface\" [class.loro-app-nav__surface--compact]=\"compactDesktop()\">\n      <div class=\"loro-app-nav__brand\">\n        <loro-image\n          class=\"loro-app-nav__brand-image\"\n          name=\"image-loro-apaisado\"\n          alt=\"AlLoro\"\n          width=\"10rem\"\n          height=\"auto\"\n        />\n      </div>\n\n      <nav class=\"loro-app-nav__nav\" [attr.aria-label]=\"ariaLabel()\">\n        @for (item of desktopItems(); track item.id) {\n          <loro-button\n            class=\"loro-app-nav__item\"\n            [class.loro-app-nav__item--active]=\"item.active\"\n            [class.loro-app-nav__item--disabled]=\"item.disabled\"\n            [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n            [text]=\"item.label\"\n            [icon]=\"item.icon\"\n            iconMode=\"with-icon\"\n            iconColor=\"default\"\n            variant=\"navigation\"\n            [selected]=\"!!item.active\"\n            [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n            type=\"button\"\n            [fullWidth]=\"true\"\n            [ariaLabel]=\"item.label\"\n            [disabled]=\"!!item.disabled\"\n            (buttonClick)=\"onMainItemClick(item)\"\n          >\n            @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n              <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n            }\n          </loro-button>\n        }\n      </nav>\n\n      <div class=\"loro-app-nav__spacer\"></div>\n\n      @if (showUtilityItems() && utilityItems().length > 0) {\n        <div class=\"loro-app-nav__divider\" aria-hidden=\"true\"></div>\n\n        <nav\n          class=\"loro-app-nav__nav loro-app-nav__nav--utility\"\n          aria-label=\"Navegaci\u00F3n secundaria\"\n        >\n          @for (item of utilityItems(); track item.id) {\n            <loro-button\n              class=\"loro-app-nav__item\"\n              [class.loro-app-nav__item--active]=\"item.active\"\n              [class.loro-app-nav__item--disabled]=\"item.disabled\"\n              [class.loro-app-nav__item--logout]=\"item.id === 'logout'\"\n              [text]=\"item.label\"\n              [icon]=\"item.icon\"\n              iconMode=\"with-icon\"\n              iconColor=\"default\"\n              variant=\"navigation\"\n              [selected]=\"!!item.active\"\n              [color]=\"item.id === 'logout' ? 'danger' : 'primary'\"\n              type=\"button\"\n              [fullWidth]=\"true\"\n              [ariaLabel]=\"item.label\"\n              [disabled]=\"!!item.disabled\"\n              (buttonClick)=\"onUtilityItemClick(item)\"\n            >\n              @if (item.badge !== null && item.badge !== undefined && item.badge !== '') {\n                <span class=\"loro-app-nav__badge\">{{ item.badge }}</span>\n              }\n            </loro-button>\n          }\n        </nav>\n      }\n    </div>\n  </div>\n\n  <nav\n    ngToolbar\n    class=\"loro-app-nav__mobile\"\n    data-horizontal-gesture\n    [attr.aria-label]=\"ariaLabel()\"\n    [style.--loro-mobile-slider-position]=\"mobileSliderPosition()\"\n    [class.loro-app-nav__mobile--dragging]=\"isMobileDragging()\"\n    [class.loro-app-nav__mobile--with-labels]=\"true\"\n    [style.--loro-mobile-item-count]=\"mobileItemCount()\"\n    [style.--loro-mobile-visual-slot-count]=\"mobileVisualSlotCount()\"\n    (pointerdown)=\"onMobilePointerDown($event)\"\n    (pointermove)=\"onMobilePointerMove($event)\"\n    (pointerup)=\"onMobilePointerUp($event)\"\n    (pointercancel)=\"onMobilePointerCancel($event)\"\n  >\n    <span\n      class=\"loro-app-nav__mobile-slider\"\n      [class.loro-app-nav__mobile-slider--scan]=\"selectedMobileItemId() === 'scan'\"\n      aria-hidden=\"true\"></span>\n\n    @for (item of mobileItems(); track item.id; let index = $index) {\n      <button\n        ngToolbarWidget\n        type=\"button\"\n        class=\"loro-app-nav__mobile-item\"\n        [style.grid-column]=\"mobileItemGridColumn(index)\"\n        [class.loro-app-nav__mobile-item--active]=\"isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--scan-active]=\"item.id === 'scan' && isMobileItemVisualActive(index)\"\n        [class.loro-app-nav__mobile-item--disabled]=\"item.disabled\"\n        [attr.aria-label]=\"item.label\"\n        [attr.aria-current]=\"item.active ? 'page' : null\"\n        [value]=\"item.id\"\n        [disabled]=\"!!item.disabled\"\n        (click)=\"onMobileItemClick(item)\"\n      >\n        <loro-icon\n          class=\"loro-app-nav__mobile-icon\"\n          [name]=\"item.icon\"\n          [size]=\"24\"\n          color=\"default\"\n          [alt]=\"item.label\"\n        />\n        <span class=\"loro-app-nav__mobile-label\">{{ item.label }}</span>\n      </button>\n    }\n  </nav>\n</aside>\n", styles: [":host{display:block;width:100%;height:100%}.loro-app-nav{width:100%;height:100%}.loro-app-nav__desktop{display:none;height:100%}.loro-app-nav__surface{width:100%;max-width:none;display:flex;height:100%;flex-direction:column;gap:1.1rem;padding:1.75rem 1.35rem 1.5rem;background:var(--loro-nav-desktop-surface, var(--loro-shell-header-surface));border:1px solid var(--loro-nav-desktop-border, var(--loro-border-soft))}html[data-theme=dark] .loro-app-nav__surface{background:var(--loro-nav-desktop-surface, rgba(24, 28, 32, .78));border-color:var(--loro-nav-desktop-border, rgba(255, 255, 255, .08));box-shadow:var(--loro-nav-desktop-shadow, none)}.loro-app-nav__surface--compact{gap:.9rem;padding:1.25rem 1rem 1.15rem}.loro-app-nav__surface--compact .loro-app-nav__brand{min-height:3.65rem;padding-bottom:1.2rem}.loro-app-nav__surface--compact .loro-app-nav__item{--loro-button-min-height: 3.75rem}.loro-app-nav__brand{display:flex;align-items:center;min-height:4.25rem;padding:.35rem .55rem .85rem}.loro-app-nav__brand-image{display:block}.loro-app-nav__nav{display:flex;flex-direction:column;gap:.75rem}.loro-app-nav__item{--loro-button-min-height: 4.25rem;--loro-button-padding: 1rem 1.2rem;--loro-button-radius: 1rem;--loro-button-font-size: 1rem;--loro-button-background: var(--loro-nav-button-background, transparent);--loro-button-border-color: var(--loro-nav-button-border, transparent);--loro-button-color: var(--loro-nav-button-text, var(--loro-text-strong));--loro-button-hover-background: var(--loro-nav-button-hover-bg, var(--loro-nav-hover-bg));--loro-button-hover-border-color: var(--loro-nav-button-hover-border, transparent);--loro-button-hover-color: var(--loro-nav-button-hover-text, var(--loro-nav-button-text, var(--loro-text-strong)));--loro-button-hover-shadow: var(--loro-nav-button-hover-shadow, none);display:block;width:100%;color:var(--loro-nav-button-text, var(--loro-text-strong))}.loro-app-nav__item--active{--loro-button-selected-background: var(--loro-nav-button-active-bg, var(--loro-nav-active-bg));--loro-button-selected-border-color: var(--loro-nav-button-active-border, var(--loro-nav-active-border));--loro-button-selected-color: var(--loro-nav-button-active-text, var(--loro-primary-500));--loro-button-selected-shadow: var(--loro-nav-button-active-shadow, inset .35rem 0 0 var(--loro-primary-500))}.loro-app-nav__item--logout{--loro-button-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-hover-background: var(--loro-nav-button-danger-bg, var(--loro-danger-surface));--loro-button-hover-border-color: var(--loro-nav-button-danger-border, transparent);--loro-button-hover-color: var(--loro-nav-button-danger-text, var(--loro-danger-text));--loro-button-shadow: none;--loro-button-hover-shadow: none}.loro-app-nav__item--disabled,.loro-app-nav__mobile-item--disabled{cursor:not-allowed;opacity:1}.loro-app-nav__item--disabled{--loro-button-disabled-bg: var(--loro-disabled-surface);--loro-button-disabled-border: var(--loro-disabled-border);--loro-button-disabled-text: var(--loro-disabled-text)}.loro-app-nav__mobile-item--disabled{color:var(--loro-disabled-text)}.loro-app-nav__label,.loro-app-nav__mobile-label{color:inherit}.loro-app-nav__label{font-size:.98rem;font-weight:700;color:inherit}.loro-app-nav__badge{margin-left:auto;min-width:1.5rem;padding:.125rem .5rem;border-radius:999px;background:#ffffff24;color:inherit;font-size:.75rem;font-weight:700;text-align:center;box-shadow:inset 0 1px #ffffff14}.loro-app-nav__spacer{flex:1}.loro-app-nav__divider{height:1px;margin:.65rem 0 .9rem;background:var(--loro-nav-divider)}.loro-app-nav__nav--utility{margin-top:auto}.loro-app-nav__mobile{position:fixed;left:50%;bottom:max(1.25rem,env(safe-area-inset-bottom,0px) * .28);z-index:70;display:grid;grid-template-columns:repeat(var(--loro-mobile-visual-slot-count, 4),minmax(0,1fr));width:min(76vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),19rem);gap:0;margin:0;transform:translate(-50%);padding:0;overflow:hidden;border:1px solid var(--loro-nav-mobile-border, rgba(43, 35, 80, .08));border-radius:999px;isolation:isolate;background:var(--loro-nav-mobile-glass-surface, rgba(255, 255, 255, .68));box-shadow:var(--loro-nav-mobile-surface-shadow, 0 8px 24px rgba(28, 32, 48, .1));backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);-webkit-backdrop-filter:blur(var(--loro-nav-mobile-glass-blur, 24px)) saturate(1.32);touch-action:pan-y;contain:layout paint;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease}.loro-app-nav__mobile-item{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3.58rem;gap:.18rem;padding:.35rem .15rem;border:0;border-radius:999px;outline:0;background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text));cursor:pointer;appearance:none;-webkit-appearance:none;opacity:1;visibility:visible;transition:transform .22s cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent}.loro-app-nav__mobile-item:hover:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:active:not(.loro-app-nav__mobile-item--active),.loro-app-nav__mobile-item:focus:not(.loro-app-nav__mobile-item--active){background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item--active{background:transparent;color:var(--loro-nav-mobile-icon, var(--loro-text))}.loro-app-nav__mobile-item:focus-visible{outline:2px solid var(--loro-focus-ring);outline-offset:-4px}.loro-app-nav__mobile-item:disabled{cursor:not-allowed;opacity:1;color:var(--loro-disabled-text)}.loro-app-nav__mobile-icon{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none;mix-blend-mode:normal;transform:scale(.94);transform-origin:center}.loro-app-nav__mobile-item ::ng-deep .loro-icon,.loro-app-nav__mobile-item ::ng-deep svg{display:block!important;color:inherit!important;opacity:1!important;visibility:visible!important;pointer-events:none!important}.loro-app-nav__mobile-item ::ng-deep .loro-icon__mask{background-color:currentColor!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-item ::ng-deep svg [fill]:not([fill=none]){fill:currentColor!important}.loro-app-nav__mobile-item ::ng-deep svg [stroke]:not([stroke=none]){stroke:currentColor!important}.loro-app-nav__mobile-slider{position:absolute;inset-block:0;left:0;z-index:1;width:calc(100% / var(--loro-mobile-visual-slot-count, 4));border:0;border-radius:999px;background:var(--loro-nav-mobile-indicator, linear-gradient(180deg, rgba(227, 229, 233, .96) 0%, rgba(214, 217, 223, .92) 100%));box-shadow:var(--loro-nav-mobile-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 5px rgba(21, 28, 42, .06));transform:translate3d(calc(var(--loro-mobile-slider-position, 0) * 100%),0,0);will-change:transform;transition:transform .26s cubic-bezier(.22,1,.36,1);pointer-events:none}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-slider{transition:transform 1ms linear}.loro-app-nav__mobile-slider--scan{background:var(--loro-nav-mobile-scan-indicator, linear-gradient(180deg, rgba(132, 83, 255, .98) 0%, rgba(94, 47, 224, .96) 100%));box-shadow:var(--loro-nav-mobile-scan-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, .38), 0 .85rem 1.65rem rgba(108, 60, 255, .28))}.loro-app-nav__mobile-item--scan-active{color:var(--loro-nav-mobile-scan-active-color, #fff)!important}.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):hover,.loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active):active{color:var(--loro-nav-mobile-icon, var(--loro-text))!important}.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active),.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) .loro-app-nav__mobile-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep .loro-icon,.loro-app-nav__mobile--dragging .loro-app-nav__mobile-item:not(.loro-app-nav__mobile-item--scan-active) ::ng-deep svg{color:var(--loro-nav-mobile-icon, var(--loro-text))!important;opacity:1!important;visibility:visible!important}.loro-app-nav__mobile-label{display:block;max-width:100%;overflow:hidden;color:inherit;font-size:.625rem;font-weight:700;line-height:1.1;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:0;transform:translateY(.08rem);transition:opacity .18s ease,transform .18s ease}.loro-app-nav__mobile--with-labels{width:min(92vw - max(1rem,var(--app-shell-mobile-gutter, 1rem) * .75),24rem)}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-item{min-height:4.4rem;padding-top:.7rem}.loro-app-nav__mobile--with-labels .loro-app-nav__mobile-label{opacity:1;transform:translateY(0)}@media(max-width:479.99px)and (orientation:portrait){:host{height:auto}.loro-app-nav{height:auto;padding:0}.loro-app-nav__desktop{height:auto}}@media(min-width:1024px){:host,.loro-app-nav,.loro-app-nav__desktop{height:100%}.loro-app-nav__desktop{display:block}.loro-app-nav__mobile{display:none}}@media(prefers-reduced-motion:reduce){.loro-app-nav__mobile-slider,.loro-app-nav__mobile-item,.loro-app-nav__mobile-item ::ng-deep .loro-icon{transition-duration:1ms}}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], utilityItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "utilityItems", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showUtilityItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUtilityItems", required: false }] }], compactDesktop: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactDesktop", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], utilityItemClick: [{ type: i0.Output, args: ["utilityItemClick"] }], navItemClick: [{ type: i0.Output, args: ["navItemClick"] }] } });
 
 class LoroAssistantCard {
@@ -1535,55 +1484,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$1, 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$1, 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) {
@@ -1600,7 +1505,7 @@ class LoroAuthSocialButton {
         if (!isNativeSocialIcon(icon)) {
             return '';
         }
-        return LORO_ICON_PATHS[LORO_ICON_LEGACY_NAMES[icon]];
+        return LORO_ICON_PATHS$1[LORO_ICON_LEGACY_NAMES$1[icon]];
     }, ...(ngDevMode ? [{ debugName: "nativeIconSrc" }] : /* istanbul ignore next */ []));
     releaseFocus(event) {
         const target = event.currentTarget;
@@ -1609,66 +1514,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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: 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$1], 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 +1561,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$1, 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$1, 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 +1576,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 +1602,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 +1643,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$1, 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$1, 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 {
@@ -2122,11 +1665,11 @@ class LoroDashboardCard {
         this.haptics.impact('light');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDashboardCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroDashboardCard, isStandalone: true, selector: "loro-dashboard-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, illustration: { classPropertyName: "illustration", publicName: "illustration", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, arrowSize: { classPropertyName: "arrowSize", publicName: "arrowSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a\n  class=\"loro-dashboard-card\"\n  [class.loro-dashboard-card--home]=\"variant() === 'home'\"\n  data-touch-hover\n  [routerLink]=\"link()\"\n  (click)=\"onCardClick()\"\n>\n  <div class=\"loro-dashboard-card__media\" aria-hidden=\"true\">\n    @if (illustration()) {\n      <loro-image\n        [name]=\"illustration()!\"\n        [alt]=\"title()\"\n        width=\"100%\"\n      />\n    } @else if (icon()) {\n      <loro-icon\n        [name]=\"icon()!\"\n        [size]=\"iconSize()\"\n        [alt]=\"title()\"\n      />\n    }\n  </div>\n\n  <div class=\"loro-dashboard-card__content\">\n    <h3>{{ title() }}</h3>\n\n    @if (description()) {\n      <p>{{ description() }}</p>\n    }\n  </div>\n\n  @if (showArrow()) {\n    <div class=\"loro-dashboard-card__arrow\" aria-hidden=\"true\">\n      <loro-icon name=\"arrow-right\" [size]=\"arrowSize()\" alt=\"Ir\" />\n    </div>\n  }\n</a>\n", styles: [":host{display:block;width:100%;min-width:0;height:100%;container-type:inline-size}.loro-dashboard-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--loro-dashboard-card-media-size, 5rem) minmax(var(--loro-dashboard-card-content-min-height, 5.25rem),auto);align-content:center;align-items:start;justify-items:center;gap:var(--loro-dashboard-card-gap, 1rem);width:100%;min-width:0;height:100%;min-height:var(--loro-dashboard-card-min-height, 14.5rem);overflow:hidden;border:1px solid var(--loro-dashboard-card-border, var(--loro-border-subtle));border-radius:var(--loro-dashboard-card-radius, var(--loro-radius-card));background:var(--loro-surface-soft);padding:var(--loro-dashboard-card-padding, 1.625rem 1.25rem);box-shadow:var(--loro-dashboard-card-shadow, var(--loro-shadow-soft));color:inherit;font-family:var(--loro-font-brand);text-align:center;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.loro-dashboard-card:hover,.loro-dashboard-card.is-touch-hover{transform:translateY(-.125rem);border-color:var(--loro-dashboard-card-hover-border, var(--loro-border-strong));box-shadow:var(--loro-dashboard-card-hover-shadow, var(--loro-shadow-panel))}.loro-dashboard-card:active{transform:translateY(0)}.loro-dashboard-card:focus-visible{outline:.1875rem solid var(--loro-focus-ring);outline-offset:.1875rem}.loro-dashboard-card__media{display:grid;width:var(--loro-dashboard-card-media-size, 5rem);height:var(--loro-dashboard-card-media-size, 5rem);place-items:center;min-width:0;color:var(--loro-dashboard-card-icon-color, var(--loro-primary-500));line-height:0}.loro-dashboard-card__media loro-icon,.loro-dashboard-card__media loro-image{display:block;max-width:100%;max-height:100%}.loro-dashboard-card__content{display:grid;grid-template-rows:minmax(var(--loro-dashboard-card-title-min-height, 1.375rem),auto) minmax(var(--loro-dashboard-card-description-min-height, 3.25rem),auto);align-content:start;gap:var(--loro-dashboard-card-content-gap, .5rem);min-width:0;min-height:var(--loro-dashboard-card-content-min-height, 5.25rem);justify-items:center}.loro-dashboard-card__content h3{display:flex;align-items:end;justify-content:center;min-height:var(--loro-dashboard-card-title-min-height, 1.375rem);margin:0;max-width:100%;color:var(--loro-dashboard-card-title-color, var(--loro-primary-900));font-size:var(--loro-dashboard-card-title-size, clamp(1rem, 4.8cqi, 1.25rem));font-weight:var(--loro-dashboard-card-title-weight, 800);line-height:1.1;letter-spacing:-.035em;text-align:center;overflow-wrap:anywhere}.loro-dashboard-card__content p{margin:0;max-width:var(--loro-dashboard-card-description-width, 13.5rem);min-height:var(--loro-dashboard-card-description-min-height, 3.25rem);color:var(--loro-dashboard-card-description-color, var(--loro-muted));font-size:var(--loro-dashboard-card-description-size, clamp(.8125rem, 3.8cqi, .975rem));font-weight:500;line-height:1.35;text-align:center;overflow-wrap:anywhere}.loro-dashboard-card__arrow{display:none;color:var(--loro-dashboard-card-arrow-color, var(--loro-primary-500));line-height:0}.loro-dashboard-card--home{grid-template-rows:var(--loro-dashboard-card-home-media-size, 3rem) minmax(0,1fr) auto;align-content:start;justify-items:stretch;gap:.9rem;min-height:9.75rem;isolation:isolate;border-color:var(--loro-home-card-border);border-radius:1.45rem;background:var(--loro-surface-soft);padding:1rem;text-align:left}.loro-dashboard-card--home .loro-dashboard-card__media{position:relative;width:var(--loro-dashboard-card-home-media-size, 3rem);height:var(--loro-dashboard-card-home-media-size, 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-dashboard-card--home .loro-dashboard-card__content{grid-template-rows:auto auto;justify-items:start;gap:.4rem;min-height:0}.loro-dashboard-card--home .loro-dashboard-card__content h3,.loro-dashboard-card--home .loro-dashboard-card__content p{text-align:left}.loro-dashboard-card--home .loro-dashboard-card__content h3{color:var(--loro-home-card-title);font-size:1.16rem;font-weight:800;letter-spacing:-.02em}.loro-dashboard-card--home .loro-dashboard-card__content p{max-width:none;min-height:0;color:var(--loro-home-card-description);font-size:.9rem;line-height:1.45}.loro-dashboard-card--home .loro-dashboard-card__arrow{display:inline-flex;justify-self:end;color:var(--loro-home-card-arrow-color)}.loro-dashboard-card--home:hover,.loro-dashboard-card--home.is-touch-hover{transform:translateY(-.24rem) scale(1.01);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow)}.loro-dashboard-card--home:before,.loro-dashboard-card--home:after{position:absolute;inset:0;content:\"\";pointer-events:none}.loro-dashboard-card--home>*{position:relative;z-index:1}@container (min-width: 18rem){.loro-dashboard-card{grid-template-columns:var(--loro-dashboard-card-desktop-media-size, 5.25rem) minmax(0,1fr) auto;grid-template-rows:auto;align-content:center;align-items:center;justify-items:start;gap:var(--loro-dashboard-card-desktop-gap, 1.5rem);min-height:var(--loro-dashboard-card-row-min-height, 6.75rem);padding:var(--loro-dashboard-card-desktop-padding, 1.25rem 1.5rem);border-radius:var(--loro-dashboard-card-desktop-radius, 1rem);text-align:left}.loro-dashboard-card__media{width:var(--loro-dashboard-card-desktop-media-size, 5.25rem);height:var(--loro-dashboard-card-desktop-media-size, 5.25rem);justify-self:start}.loro-dashboard-card__content{grid-template-rows:auto auto;gap:var(--loro-dashboard-card-desktop-content-gap, .5rem);min-height:0;justify-items:start}.loro-dashboard-card__content h3,.loro-dashboard-card__content p{min-height:0;text-align:left}.loro-dashboard-card__content h3{font-size:var(--loro-dashboard-card-desktop-title-size, 1rem)}.loro-dashboard-card__content p{max-width:var(--loro-dashboard-card-desktop-description-width, 18rem);font-size:var(--loro-dashboard-card-desktop-description-size, .8125rem)}.loro-dashboard-card__arrow{display:flex;align-items:center;justify-content:flex-end;justify-self:end;margin-top:auto}.loro-dashboard-card--home{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--loro-dashboard-card-home-media-size, 3rem) minmax(0,1fr) auto;align-items:start;justify-items:stretch;gap:.9rem;min-height:9.75rem;padding:1rem}.loro-dashboard-card--home .loro-dashboard-card__media{justify-self:start;width:var(--loro-dashboard-card-home-media-size, 3rem);height:var(--loro-dashboard-card-home-media-size, 3rem)}.loro-dashboard-card--home .loro-dashboard-card__content{justify-items:start}.loro-dashboard-card--home .loro-dashboard-card__arrow{display:inline-flex}}\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: LoroDashboardCard, isStandalone: true, selector: "loro-dashboard-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, illustration: { classPropertyName: "illustration", publicName: "illustration", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, arrowSize: { classPropertyName: "arrowSize", publicName: "arrowSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a\n  class=\"loro-dashboard-card\"\n  [class.loro-dashboard-card--home]=\"variant() === 'home'\"\n  data-touch-hover\n  [routerLink]=\"link()\"\n  (click)=\"onCardClick()\"\n>\n  <div class=\"loro-dashboard-card__media\" aria-hidden=\"true\">\n    @if (illustration()) {\n      <loro-image\n        [name]=\"illustration()!\"\n        [alt]=\"title()\"\n        width=\"100%\"\n      />\n    } @else if (icon()) {\n      <loro-icon\n        [name]=\"icon()!\"\n        [size]=\"iconSize()\"\n        [alt]=\"title()\"\n      />\n    }\n  </div>\n\n  <div class=\"loro-dashboard-card__content\">\n    <h3>{{ title() }}</h3>\n\n    @if (description()) {\n      <p>{{ description() }}</p>\n    }\n  </div>\n\n  @if (showArrow()) {\n    <div class=\"loro-dashboard-card__arrow\" aria-hidden=\"true\">\n      <loro-icon name=\"arrow-right\" [size]=\"arrowSize()\" alt=\"Ir\" />\n    </div>\n  }\n</a>\n", styles: [":host{display:block;width:100%;min-width:0;height:100%;container-type:inline-size}.loro-dashboard-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--loro-dashboard-card-media-size, 5rem) minmax(var(--loro-dashboard-card-content-min-height, 5.25rem),auto);align-content:center;align-items:start;justify-items:center;gap:var(--loro-dashboard-card-gap, 1rem);width:100%;min-width:0;height:100%;min-height:var(--loro-dashboard-card-min-height, 14.5rem);overflow:hidden;border:1px solid var(--loro-dashboard-card-border, var(--loro-border-subtle));border-radius:var(--loro-dashboard-card-radius, var(--loro-radius-card));background:var(--loro-surface-soft);padding:var(--loro-dashboard-card-padding, 1.625rem 1.25rem);box-shadow:var(--loro-dashboard-card-shadow, var(--loro-shadow-soft));color:inherit;font-family:var(--loro-font-brand);text-align:center;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.loro-dashboard-card:hover,.loro-dashboard-card.is-touch-hover{transform:translateY(-.125rem);border-color:var(--loro-dashboard-card-hover-border, var(--loro-border-strong));box-shadow:var(--loro-dashboard-card-hover-shadow, var(--loro-shadow-panel))}.loro-dashboard-card:active{transform:translateY(0)}.loro-dashboard-card:focus-visible{outline:.1875rem solid var(--loro-focus-ring);outline-offset:.1875rem}.loro-dashboard-card__media{display:grid;width:var(--loro-dashboard-card-media-size, 5rem);height:var(--loro-dashboard-card-media-size, 5rem);place-items:center;min-width:0;color:var(--loro-dashboard-card-icon-color, var(--loro-primary-500));line-height:0}.loro-dashboard-card__media loro-icon,.loro-dashboard-card__media loro-image{display:block;max-width:100%;max-height:100%}.loro-dashboard-card__content{display:grid;grid-template-rows:minmax(var(--loro-dashboard-card-title-min-height, 1.375rem),auto) minmax(var(--loro-dashboard-card-description-min-height, 3.25rem),auto);align-content:start;gap:var(--loro-dashboard-card-content-gap, .5rem);min-width:0;min-height:var(--loro-dashboard-card-content-min-height, 5.25rem);justify-items:center}.loro-dashboard-card__content h3{display:flex;align-items:end;justify-content:center;min-height:var(--loro-dashboard-card-title-min-height, 1.375rem);margin:0;max-width:100%;color:var(--loro-dashboard-card-title-color, var(--loro-primary-900));font-size:var(--loro-dashboard-card-title-size, clamp(1rem, 4.8cqi, 1.25rem));font-weight:var(--loro-dashboard-card-title-weight, 800);line-height:1.1;letter-spacing:-.035em;text-align:center;overflow-wrap:anywhere}.loro-dashboard-card__content p{margin:0;max-width:var(--loro-dashboard-card-description-width, 13.5rem);min-height:var(--loro-dashboard-card-description-min-height, 3.25rem);color:var(--loro-dashboard-card-description-color, var(--loro-muted));font-size:var(--loro-dashboard-card-description-size, clamp(.8125rem, 3.8cqi, .975rem));font-weight:500;line-height:1.35;text-align:center;overflow-wrap:anywhere}.loro-dashboard-card__arrow{display:none;color:var(--loro-dashboard-card-arrow-color, var(--loro-primary-500));line-height:0}.loro-dashboard-card--home{grid-template-rows:var(--loro-dashboard-card-home-media-size, 3rem) minmax(0,1fr) auto;align-content:start;justify-items:stretch;gap:.9rem;min-height:9.75rem;isolation:isolate;border-color:var(--loro-home-card-border);border-radius:1.45rem;background:var(--loro-surface-soft);padding:1rem;text-align:left}.loro-dashboard-card--home .loro-dashboard-card__media{position:relative;width:var(--loro-dashboard-card-home-media-size, 3rem);height:var(--loro-dashboard-card-home-media-size, 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-dashboard-card--home .loro-dashboard-card__content{grid-template-rows:auto auto;justify-items:start;gap:.4rem;min-height:0}.loro-dashboard-card--home .loro-dashboard-card__content h3,.loro-dashboard-card--home .loro-dashboard-card__content p{text-align:left}.loro-dashboard-card--home .loro-dashboard-card__content h3{color:var(--loro-home-card-title);font-size:1.16rem;font-weight:800;letter-spacing:-.02em}.loro-dashboard-card--home .loro-dashboard-card__content p{max-width:none;min-height:0;color:var(--loro-home-card-description);font-size:.9rem;line-height:1.45}.loro-dashboard-card--home .loro-dashboard-card__arrow{display:inline-flex;justify-self:end;color:var(--loro-home-card-arrow-color)}.loro-dashboard-card--home:hover,.loro-dashboard-card--home.is-touch-hover{transform:translateY(-.24rem) scale(1.01);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow)}.loro-dashboard-card--home:before,.loro-dashboard-card--home:after{position:absolute;inset:0;content:\"\";pointer-events:none}.loro-dashboard-card--home>*{position:relative;z-index:1}@container (min-width: 18rem){.loro-dashboard-card{grid-template-columns:var(--loro-dashboard-card-desktop-media-size, 5.25rem) minmax(0,1fr) auto;grid-template-rows:auto;align-content:center;align-items:center;justify-items:start;gap:var(--loro-dashboard-card-desktop-gap, 1.5rem);min-height:var(--loro-dashboard-card-row-min-height, 6.75rem);padding:var(--loro-dashboard-card-desktop-padding, 1.25rem 1.5rem);border-radius:var(--loro-dashboard-card-desktop-radius, 1rem);text-align:left}.loro-dashboard-card__media{width:var(--loro-dashboard-card-desktop-media-size, 5.25rem);height:var(--loro-dashboard-card-desktop-media-size, 5.25rem);justify-self:start}.loro-dashboard-card__content{grid-template-rows:auto auto;gap:var(--loro-dashboard-card-desktop-content-gap, .5rem);min-height:0;justify-items:start}.loro-dashboard-card__content h3,.loro-dashboard-card__content p{min-height:0;text-align:left}.loro-dashboard-card__content h3{font-size:var(--loro-dashboard-card-desktop-title-size, 1rem)}.loro-dashboard-card__content p{max-width:var(--loro-dashboard-card-desktop-description-width, 18rem);font-size:var(--loro-dashboard-card-desktop-description-size, .8125rem)}.loro-dashboard-card__arrow{display:flex;align-items:center;justify-content:flex-end;justify-self:end;margin-top:auto}.loro-dashboard-card--home{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--loro-dashboard-card-home-media-size, 3rem) minmax(0,1fr) auto;align-items:start;justify-items:stretch;gap:.9rem;min-height:9.75rem;padding:1rem}.loro-dashboard-card--home .loro-dashboard-card__media{justify-self:start;width:var(--loro-dashboard-card-home-media-size, 3rem);height:var(--loro-dashboard-card-home-media-size, 3rem)}.loro-dashboard-card--home .loro-dashboard-card__content{justify-items:start}.loro-dashboard-card--home .loro-dashboard-card__arrow{display:inline-flex}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LoroIcon$1, 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: LoroDashboardCard, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-dashboard-card', standalone: true, imports: [RouterLink, LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"loro-dashboard-card\"\n  [class.loro-dashboard-card--home]=\"variant() === 'home'\"\n  data-touch-hover\n  [routerLink]=\"link()\"\n  (click)=\"onCardClick()\"\n>\n  <div class=\"loro-dashboard-card__media\" aria-hidden=\"true\">\n    @if (illustration()) {\n      <loro-image\n        [name]=\"illustration()!\"\n        [alt]=\"title()\"\n        width=\"100%\"\n      />\n    } @else if (icon()) {\n      <loro-icon\n        [name]=\"icon()!\"\n        [size]=\"iconSize()\"\n        [alt]=\"title()\"\n      />\n    }\n  </div>\n\n  <div class=\"loro-dashboard-card__content\">\n    <h3>{{ title() }}</h3>\n\n    @if (description()) {\n      <p>{{ description() }}</p>\n    }\n  </div>\n\n  @if (showArrow()) {\n    <div class=\"loro-dashboard-card__arrow\" aria-hidden=\"true\">\n      <loro-icon name=\"arrow-right\" [size]=\"arrowSize()\" alt=\"Ir\" />\n    </div>\n  }\n</a>\n", styles: [":host{display:block;width:100%;min-width:0;height:100%;container-type:inline-size}.loro-dashboard-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--loro-dashboard-card-media-size, 5rem) minmax(var(--loro-dashboard-card-content-min-height, 5.25rem),auto);align-content:center;align-items:start;justify-items:center;gap:var(--loro-dashboard-card-gap, 1rem);width:100%;min-width:0;height:100%;min-height:var(--loro-dashboard-card-min-height, 14.5rem);overflow:hidden;border:1px solid var(--loro-dashboard-card-border, var(--loro-border-subtle));border-radius:var(--loro-dashboard-card-radius, var(--loro-radius-card));background:var(--loro-surface-soft);padding:var(--loro-dashboard-card-padding, 1.625rem 1.25rem);box-shadow:var(--loro-dashboard-card-shadow, var(--loro-shadow-soft));color:inherit;font-family:var(--loro-font-brand);text-align:center;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.loro-dashboard-card:hover,.loro-dashboard-card.is-touch-hover{transform:translateY(-.125rem);border-color:var(--loro-dashboard-card-hover-border, var(--loro-border-strong));box-shadow:var(--loro-dashboard-card-hover-shadow, var(--loro-shadow-panel))}.loro-dashboard-card:active{transform:translateY(0)}.loro-dashboard-card:focus-visible{outline:.1875rem solid var(--loro-focus-ring);outline-offset:.1875rem}.loro-dashboard-card__media{display:grid;width:var(--loro-dashboard-card-media-size, 5rem);height:var(--loro-dashboard-card-media-size, 5rem);place-items:center;min-width:0;color:var(--loro-dashboard-card-icon-color, var(--loro-primary-500));line-height:0}.loro-dashboard-card__media loro-icon,.loro-dashboard-card__media loro-image{display:block;max-width:100%;max-height:100%}.loro-dashboard-card__content{display:grid;grid-template-rows:minmax(var(--loro-dashboard-card-title-min-height, 1.375rem),auto) minmax(var(--loro-dashboard-card-description-min-height, 3.25rem),auto);align-content:start;gap:var(--loro-dashboard-card-content-gap, .5rem);min-width:0;min-height:var(--loro-dashboard-card-content-min-height, 5.25rem);justify-items:center}.loro-dashboard-card__content h3{display:flex;align-items:end;justify-content:center;min-height:var(--loro-dashboard-card-title-min-height, 1.375rem);margin:0;max-width:100%;color:var(--loro-dashboard-card-title-color, var(--loro-primary-900));font-size:var(--loro-dashboard-card-title-size, clamp(1rem, 4.8cqi, 1.25rem));font-weight:var(--loro-dashboard-card-title-weight, 800);line-height:1.1;letter-spacing:-.035em;text-align:center;overflow-wrap:anywhere}.loro-dashboard-card__content p{margin:0;max-width:var(--loro-dashboard-card-description-width, 13.5rem);min-height:var(--loro-dashboard-card-description-min-height, 3.25rem);color:var(--loro-dashboard-card-description-color, var(--loro-muted));font-size:var(--loro-dashboard-card-description-size, clamp(.8125rem, 3.8cqi, .975rem));font-weight:500;line-height:1.35;text-align:center;overflow-wrap:anywhere}.loro-dashboard-card__arrow{display:none;color:var(--loro-dashboard-card-arrow-color, var(--loro-primary-500));line-height:0}.loro-dashboard-card--home{grid-template-rows:var(--loro-dashboard-card-home-media-size, 3rem) minmax(0,1fr) auto;align-content:start;justify-items:stretch;gap:.9rem;min-height:9.75rem;isolation:isolate;border-color:var(--loro-home-card-border);border-radius:1.45rem;background:var(--loro-surface-soft);padding:1rem;text-align:left}.loro-dashboard-card--home .loro-dashboard-card__media{position:relative;width:var(--loro-dashboard-card-home-media-size, 3rem);height:var(--loro-dashboard-card-home-media-size, 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-dashboard-card--home .loro-dashboard-card__content{grid-template-rows:auto auto;justify-items:start;gap:.4rem;min-height:0}.loro-dashboard-card--home .loro-dashboard-card__content h3,.loro-dashboard-card--home .loro-dashboard-card__content p{text-align:left}.loro-dashboard-card--home .loro-dashboard-card__content h3{color:var(--loro-home-card-title);font-size:1.16rem;font-weight:800;letter-spacing:-.02em}.loro-dashboard-card--home .loro-dashboard-card__content p{max-width:none;min-height:0;color:var(--loro-home-card-description);font-size:.9rem;line-height:1.45}.loro-dashboard-card--home .loro-dashboard-card__arrow{display:inline-flex;justify-self:end;color:var(--loro-home-card-arrow-color)}.loro-dashboard-card--home:hover,.loro-dashboard-card--home.is-touch-hover{transform:translateY(-.24rem) scale(1.01);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow)}.loro-dashboard-card--home:before,.loro-dashboard-card--home:after{position:absolute;inset:0;content:\"\";pointer-events:none}.loro-dashboard-card--home>*{position:relative;z-index:1}@container (min-width: 18rem){.loro-dashboard-card{grid-template-columns:var(--loro-dashboard-card-desktop-media-size, 5.25rem) minmax(0,1fr) auto;grid-template-rows:auto;align-content:center;align-items:center;justify-items:start;gap:var(--loro-dashboard-card-desktop-gap, 1.5rem);min-height:var(--loro-dashboard-card-row-min-height, 6.75rem);padding:var(--loro-dashboard-card-desktop-padding, 1.25rem 1.5rem);border-radius:var(--loro-dashboard-card-desktop-radius, 1rem);text-align:left}.loro-dashboard-card__media{width:var(--loro-dashboard-card-desktop-media-size, 5.25rem);height:var(--loro-dashboard-card-desktop-media-size, 5.25rem);justify-self:start}.loro-dashboard-card__content{grid-template-rows:auto auto;gap:var(--loro-dashboard-card-desktop-content-gap, .5rem);min-height:0;justify-items:start}.loro-dashboard-card__content h3,.loro-dashboard-card__content p{min-height:0;text-align:left}.loro-dashboard-card__content h3{font-size:var(--loro-dashboard-card-desktop-title-size, 1rem)}.loro-dashboard-card__content p{max-width:var(--loro-dashboard-card-desktop-description-width, 18rem);font-size:var(--loro-dashboard-card-desktop-description-size, .8125rem)}.loro-dashboard-card__arrow{display:flex;align-items:center;justify-content:flex-end;justify-self:end;margin-top:auto}.loro-dashboard-card--home{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--loro-dashboard-card-home-media-size, 3rem) minmax(0,1fr) auto;align-items:start;justify-items:stretch;gap:.9rem;min-height:9.75rem;padding:1rem}.loro-dashboard-card--home .loro-dashboard-card__media{justify-self:start;width:var(--loro-dashboard-card-home-media-size, 3rem);height:var(--loro-dashboard-card-home-media-size, 3rem)}.loro-dashboard-card--home .loro-dashboard-card__content{justify-items:start}.loro-dashboard-card--home .loro-dashboard-card__arrow{display:inline-flex}}\n"] }]
+            args: [{ selector: 'loro-dashboard-card', standalone: true, imports: [RouterLink, LoroIcon$1, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"loro-dashboard-card\"\n  [class.loro-dashboard-card--home]=\"variant() === 'home'\"\n  data-touch-hover\n  [routerLink]=\"link()\"\n  (click)=\"onCardClick()\"\n>\n  <div class=\"loro-dashboard-card__media\" aria-hidden=\"true\">\n    @if (illustration()) {\n      <loro-image\n        [name]=\"illustration()!\"\n        [alt]=\"title()\"\n        width=\"100%\"\n      />\n    } @else if (icon()) {\n      <loro-icon\n        [name]=\"icon()!\"\n        [size]=\"iconSize()\"\n        [alt]=\"title()\"\n      />\n    }\n  </div>\n\n  <div class=\"loro-dashboard-card__content\">\n    <h3>{{ title() }}</h3>\n\n    @if (description()) {\n      <p>{{ description() }}</p>\n    }\n  </div>\n\n  @if (showArrow()) {\n    <div class=\"loro-dashboard-card__arrow\" aria-hidden=\"true\">\n      <loro-icon name=\"arrow-right\" [size]=\"arrowSize()\" alt=\"Ir\" />\n    </div>\n  }\n</a>\n", styles: [":host{display:block;width:100%;min-width:0;height:100%;container-type:inline-size}.loro-dashboard-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--loro-dashboard-card-media-size, 5rem) minmax(var(--loro-dashboard-card-content-min-height, 5.25rem),auto);align-content:center;align-items:start;justify-items:center;gap:var(--loro-dashboard-card-gap, 1rem);width:100%;min-width:0;height:100%;min-height:var(--loro-dashboard-card-min-height, 14.5rem);overflow:hidden;border:1px solid var(--loro-dashboard-card-border, var(--loro-border-subtle));border-radius:var(--loro-dashboard-card-radius, var(--loro-radius-card));background:var(--loro-surface-soft);padding:var(--loro-dashboard-card-padding, 1.625rem 1.25rem);box-shadow:var(--loro-dashboard-card-shadow, var(--loro-shadow-soft));color:inherit;font-family:var(--loro-font-brand);text-align:center;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.loro-dashboard-card:hover,.loro-dashboard-card.is-touch-hover{transform:translateY(-.125rem);border-color:var(--loro-dashboard-card-hover-border, var(--loro-border-strong));box-shadow:var(--loro-dashboard-card-hover-shadow, var(--loro-shadow-panel))}.loro-dashboard-card:active{transform:translateY(0)}.loro-dashboard-card:focus-visible{outline:.1875rem solid var(--loro-focus-ring);outline-offset:.1875rem}.loro-dashboard-card__media{display:grid;width:var(--loro-dashboard-card-media-size, 5rem);height:var(--loro-dashboard-card-media-size, 5rem);place-items:center;min-width:0;color:var(--loro-dashboard-card-icon-color, var(--loro-primary-500));line-height:0}.loro-dashboard-card__media loro-icon,.loro-dashboard-card__media loro-image{display:block;max-width:100%;max-height:100%}.loro-dashboard-card__content{display:grid;grid-template-rows:minmax(var(--loro-dashboard-card-title-min-height, 1.375rem),auto) minmax(var(--loro-dashboard-card-description-min-height, 3.25rem),auto);align-content:start;gap:var(--loro-dashboard-card-content-gap, .5rem);min-width:0;min-height:var(--loro-dashboard-card-content-min-height, 5.25rem);justify-items:center}.loro-dashboard-card__content h3{display:flex;align-items:end;justify-content:center;min-height:var(--loro-dashboard-card-title-min-height, 1.375rem);margin:0;max-width:100%;color:var(--loro-dashboard-card-title-color, var(--loro-primary-900));font-size:var(--loro-dashboard-card-title-size, clamp(1rem, 4.8cqi, 1.25rem));font-weight:var(--loro-dashboard-card-title-weight, 800);line-height:1.1;letter-spacing:-.035em;text-align:center;overflow-wrap:anywhere}.loro-dashboard-card__content p{margin:0;max-width:var(--loro-dashboard-card-description-width, 13.5rem);min-height:var(--loro-dashboard-card-description-min-height, 3.25rem);color:var(--loro-dashboard-card-description-color, var(--loro-muted));font-size:var(--loro-dashboard-card-description-size, clamp(.8125rem, 3.8cqi, .975rem));font-weight:500;line-height:1.35;text-align:center;overflow-wrap:anywhere}.loro-dashboard-card__arrow{display:none;color:var(--loro-dashboard-card-arrow-color, var(--loro-primary-500));line-height:0}.loro-dashboard-card--home{grid-template-rows:var(--loro-dashboard-card-home-media-size, 3rem) minmax(0,1fr) auto;align-content:start;justify-items:stretch;gap:.9rem;min-height:9.75rem;isolation:isolate;border-color:var(--loro-home-card-border);border-radius:1.45rem;background:var(--loro-surface-soft);padding:1rem;text-align:left}.loro-dashboard-card--home .loro-dashboard-card__media{position:relative;width:var(--loro-dashboard-card-home-media-size, 3rem);height:var(--loro-dashboard-card-home-media-size, 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-dashboard-card--home .loro-dashboard-card__content{grid-template-rows:auto auto;justify-items:start;gap:.4rem;min-height:0}.loro-dashboard-card--home .loro-dashboard-card__content h3,.loro-dashboard-card--home .loro-dashboard-card__content p{text-align:left}.loro-dashboard-card--home .loro-dashboard-card__content h3{color:var(--loro-home-card-title);font-size:1.16rem;font-weight:800;letter-spacing:-.02em}.loro-dashboard-card--home .loro-dashboard-card__content p{max-width:none;min-height:0;color:var(--loro-home-card-description);font-size:.9rem;line-height:1.45}.loro-dashboard-card--home .loro-dashboard-card__arrow{display:inline-flex;justify-self:end;color:var(--loro-home-card-arrow-color)}.loro-dashboard-card--home:hover,.loro-dashboard-card--home.is-touch-hover{transform:translateY(-.24rem) scale(1.01);border-color:var(--loro-home-card-hover-border);box-shadow:var(--loro-home-card-hover-shadow)}.loro-dashboard-card--home:before,.loro-dashboard-card--home:after{position:absolute;inset:0;content:\"\";pointer-events:none}.loro-dashboard-card--home>*{position:relative;z-index:1}@container (min-width: 18rem){.loro-dashboard-card{grid-template-columns:var(--loro-dashboard-card-desktop-media-size, 5.25rem) minmax(0,1fr) auto;grid-template-rows:auto;align-content:center;align-items:center;justify-items:start;gap:var(--loro-dashboard-card-desktop-gap, 1.5rem);min-height:var(--loro-dashboard-card-row-min-height, 6.75rem);padding:var(--loro-dashboard-card-desktop-padding, 1.25rem 1.5rem);border-radius:var(--loro-dashboard-card-desktop-radius, 1rem);text-align:left}.loro-dashboard-card__media{width:var(--loro-dashboard-card-desktop-media-size, 5.25rem);height:var(--loro-dashboard-card-desktop-media-size, 5.25rem);justify-self:start}.loro-dashboard-card__content{grid-template-rows:auto auto;gap:var(--loro-dashboard-card-desktop-content-gap, .5rem);min-height:0;justify-items:start}.loro-dashboard-card__content h3,.loro-dashboard-card__content p{min-height:0;text-align:left}.loro-dashboard-card__content h3{font-size:var(--loro-dashboard-card-desktop-title-size, 1rem)}.loro-dashboard-card__content p{max-width:var(--loro-dashboard-card-desktop-description-width, 18rem);font-size:var(--loro-dashboard-card-desktop-description-size, .8125rem)}.loro-dashboard-card__arrow{display:flex;align-items:center;justify-content:flex-end;justify-self:end;margin-top:auto}.loro-dashboard-card--home{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--loro-dashboard-card-home-media-size, 3rem) minmax(0,1fr) auto;align-items:start;justify-items:stretch;gap:.9rem;min-height:9.75rem;padding:1rem}.loro-dashboard-card--home .loro-dashboard-card__media{justify-self:start;width:var(--loro-dashboard-card-home-media-size, 3rem);height:var(--loro-dashboard-card-home-media-size, 3rem)}.loro-dashboard-card--home .loro-dashboard-card__content{justify-items:start}.loro-dashboard-card--home .loro-dashboard-card__arrow{display:inline-flex}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], illustration: [{ type: i0.Input, args: [{ isSignal: true, alias: "illustration", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], arrowSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowSize", required: false }] }] } });
 
 class LoroDivider {
@@ -2293,273 +1836,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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: 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$1], 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;
@@ -2780,11 +2061,11 @@ class LoroProductRow {
         return target instanceof HTMLElement && !!target.closest('button, input, textarea, select, loro-input, a');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroProductRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroProductRow, isStandalone: true, selector: "loro-product-row", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, imageName: { classPropertyName: "imageName", publicName: "imageName", isSignal: true, isRequired: false, transformFunction: null }, quantityLabel: { classPropertyName: "quantityLabel", publicName: "quantityLabel", isSignal: true, isRequired: false, transformFunction: null }, quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, prices: { classPropertyName: "prices", publicName: "prices", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange", quantityChange: "quantityChange", increment: "increment", decrement: "decrement", rowRemove: "rowRemove" }, ngImport: i0, template: "<article\n  class=\"loro-product-row\"\n  [class.loro-product-row--basket]=\"variant() === 'basket'\"\n  [class.loro-product-row--pantry]=\"variant() === 'pantry'\"\n  [class.loro-product-row--compare]=\"variant() === 'compare'\"\n  [class.loro-product-row--divider]=\"divider()\"\n  [class.loro-product-row--checked]=\"checked()\"\n  [class.loro-product-row--dragging]=\"swipeDragging()\"\n  [class.loro-product-row--swipe-armed]=\"swipeArmed()\"\n  [class.loro-product-row--removing]=\"swipeRemoving()\"\n  [class.loro-product-row--swipe-removable]=\"isSwipeRemovable()\"\n  [class.loro-product-row--no-image]=\"!imageName()\"\n  [style.transform]=\"swipeTransform()\"\n  (touchstart)=\"onRowTouchStart($event)\"\n  (touchmove)=\"onRowTouchMove($event)\"\n  (touchend)=\"onRowTouchEnd($event)\"\n  (touchcancel)=\"onRowTouchCancel()\"\n  (click)=\"onBasketClick($event)\">\n  @if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__check\"\n      [class.loro-product-row__check--checked]=\"checked()\"\n      [attr.aria-label]=\"'Marcar ' + name()\"\n      (click)=\"checkedChange.emit(!checked())\">\n      @if (checked()) {\n        <loro-icon name=\"check\" [size]=\"18\" alt=\"Comprado\" color=\"inverse\" />\n      }\n    </button>\n    <span class=\"loro-product-row__selected-mark\" aria-hidden=\"true\">\n      <loro-icon name=\"tick-circle\" [size]=\"16\" alt=\"Seleccionado\" color=\"primary\" />\n    </span>\n  }\n\n  @if (imageName()) {\n    <span class=\"loro-product-row__image\">\n      <loro-image [name]=\"imageName()!\" [alt]=\"name()\" width=\"100%\" />\n    </span>\n  }\n\n  <span class=\"loro-product-row__copy\">\n    <strong>{{ name() }}</strong>\n    @if (variant() !== 'basket') {\n      <small>{{ meta() }}</small>\n    }\n  </span>\n\n  @if (variant() === 'basket') {\n    <loro-input\n      class=\"loro-product-row__stepper\"\n      variant=\"stepper\"\n      [label]=\"'Cantidad de ' + name()\"\n      [value]=\"quantityValue()\"\n      [unit]=\"unit()\"\n      [step]=\"unit() === 'kg' ? 0.5 : 1\"\n      [min]=\"unit() === 'kg' ? 0.5 : 1\"\n      [max]=\"100\"\n      (valueChange)=\"updateQuantity($event)\" />\n  }\n\n  @if (variant() === 'compare') {\n    <span class=\"loro-product-row__prices\">\n      @for (price of prices(); track price.store) {\n        <span [class.loro-product-row__price--best]=\"price.best\" class=\"loro-product-row__price\">\n          @if (price.logoName) {\n            <loro-image [name]=\"price.logoName\" [alt]=\"price.store\" width=\"100%\" height=\"100%\" fit=\"contain\" />\n          } @else {\n            <b>{{ price.store }}</b>\n          }\n          <span>{{ formatCurrency(price.value) }} \u20AC</span>\n        </span>\n      }\n    </span>\n  } @else if (variant() === 'basket') {\n    <span class=\"loro-product-row__total-stack\">\n      <small class=\"loro-product-row__unit-price\">{{ meta() }}</small>\n      <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n    </span>\n  } @else {\n    <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n  }\n\n  @if (variant() === 'pantry') {\n    <span\n      class=\"loro-product-row__status\"\n      [class.loro-product-row__status--warning]=\"status() === 'warning'\"\n      [class.loro-product-row__status--expiring]=\"status() === 'expiring'\">\n      <loro-icon\n        [name]=\"status() === 'ok' ? 'check' : 'warning'\"\n        [size]=\"status() === 'ok' ? 15 : 12\"\n        [alt]=\"status()\"\n        [color]=\"status() === 'ok' ? 'success' : status() === 'expiring' ? 'warning' : 'danger'\" />\n    </span>\n  } @else if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__delete-button\"\n      data-touch-hover\n      [attr.aria-label]=\"'Eliminar ' + name()\"\n      (click)=\"rowRemove.emit()\">\n      <loro-icon name=\"trash\" [size]=\"18\" alt=\"\" [decorative]=\"true\" color=\"danger\" />\n    </button>\n  }\n</article>\n@if (isSwipeRemovable()) {\n  <span class=\"loro-product-row__delete-action\" aria-hidden=\"true\" [style.transform]=\"deleteActionTransform()\">\n    <loro-icon name=\"trash-white\" [size]=\"24\" alt=\"Eliminar\" color=\"inverse\" />\n    <span>Eliminar</span>\n  </span>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;font-family:var(--loro-font-brand);--loro-product-row-selected-bg: #f4f0ff;--loro-product-row-selected-shadow: 0 .75rem 1.8rem rgba(77, 45, 183, .08)}:host-context([data-theme=dark]){--loro-product-row-selected-bg: color-mix(in srgb, var(--loro-primary-500) 18%, var(--loro-surface) 82%)}.loro-product-row{position:relative;z-index:1;display:grid;grid-template-columns:2.6rem 5.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem;align-items:center;gap:1.2rem;min-width:0;min-height:5.35rem;padding:.55rem 1rem;background:var(--loro-surface-soft);color:var(--loro-text);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;touch-action:pan-y;-webkit-user-select:none;user-select:none}.loro-product-row--dragging{transition:none}.loro-product-row--removing{opacity:.18;pointer-events:none;transform:translate3d(calc(-100% - 2rem),0,0)!important}.loro-product-row__delete-action{display:none}.loro-product-row--divider:after{position:absolute;right:0;bottom:0;left:0;height:1px;background:var(--loro-border-subtle);content:\"\"}.loro-product-row--pantry{grid-template-columns:4.6rem minmax(0,1fr) auto auto;gap:.9rem}.loro-product-row--compare{grid-template-columns:5.2rem minmax(8rem,1fr) minmax(14rem,2fr);border:1px solid var(--loro-border-subtle);border-radius:1rem;box-shadow:var(--loro-shadow-soft)}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem}.loro-product-row--pantry.loro-product-row--no-image{grid-template-columns:minmax(0,1fr) auto auto}.loro-product-row--compare.loro-product-row--no-image{grid-template-columns:minmax(8rem,1fr) minmax(14rem,2fr)}.loro-product-row__check{display:grid;width:1.9rem;height:1.9rem;place-items:center;border:2px solid rgba(98,88,130,.45);border-radius:.45rem;background:var(--loro-surface);cursor:pointer}.loro-product-row__check--checked{border-color:transparent;background:var(--loro-primary-500)}.loro-product-row__selected-mark{display:none}.loro-product-row__image{display:grid;width:5.2rem;height:3.6rem;place-items:center;overflow:hidden;border-radius:.65rem;background:color-mix(in srgb,var(--loro-primary-500) 4%,var(--loro-surface-soft) 96%)}.loro-product-row__copy{display:grid;gap:.18rem;min-width:0;align-content:center}strong{color:var(--loro-text-strong);line-height:1.1;overflow-wrap:anywhere;font-weight:950}small{color:var(--loro-muted);line-height:1.2;font-weight:750}.loro-product-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;align-self:center;border:0;border-radius:.7rem;background:transparent;color:var(--loro-danger-text);font:inherit;font-weight:950;cursor:pointer;opacity:.64;transition:opacity .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}.loro-product-row__delete-button:hover,.loro-product-row__delete-button.is-touch-hover,.loro-product-row__delete-button:focus-visible{opacity:1;background:color-mix(in srgb,var(--loro-danger-text) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-danger-text) 14%,transparent);transform:translateY(-1px)}.loro-product-row__delete-button:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-danger-text) 22%,transparent);outline-offset:2px}.loro-product-row__delete-button:active{transform:translateY(0)}.loro-product-row__total{color:var(--loro-primary-700);font-size:1.2rem;text-align:right;white-space:nowrap;min-width:0}.loro-product-row__total-stack{display:grid;justify-items:end;gap:.08rem;min-width:0;align-content:center;text-align:right}.loro-product-row__unit-price{color:var(--loro-muted-strong);font-size:.78rem;line-height:1;white-space:nowrap;font-weight:850}.loro-product-row__prices{display:grid;grid-template-columns:repeat(3,minmax(4.5rem,1fr));gap:.5rem;align-items:center;justify-items:stretch}.loro-product-row__price{display:grid;justify-items:center;gap:.2rem;color:var(--loro-primary-700);min-width:0;text-align:center;font-weight:850}.loro-product-row__price loro-image{display:block;width:2.25rem;height:1.5rem}.loro-product-row__price ::ng-deep img{width:100%;height:100%;object-fit:contain}.loro-product-row__price span{overflow-wrap:anywhere;font-size:clamp(1rem,2vw,1.1rem);line-height:1.1}.loro-product-row__price--best span{padding:.25rem .85rem;border-radius:var(--loro-radius-pill);background:color-mix(in srgb,#15803d 12%,var(--loro-surface-soft) 88%);color:#15803d}.loro-product-row__status{display:grid;width:1.55rem;height:1.55rem;place-items:center;border:1.5px solid rgba(31,157,85,.42);border-radius:50%}.loro-product-row__status--warning{border-color:#dc262661}.loro-product-row__status--expiring{border-color:color-mix(in srgb,var(--loro-warning) 58%,transparent);background:color-mix(in srgb,var(--loro-warning) 7%,transparent)}@media(min-width:1024px){.loro-product-row--basket{border:1px solid transparent;cursor:pointer}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button,.loro-product-row--basket .loro-product-row__stepper{cursor:auto}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button{cursor:pointer}}@media(max-width:479.99px)and (orientation:portrait){.loro-product-row{grid-template-columns:2.4rem 6rem minmax(8rem,1fr) minmax(8.8rem,auto) minmax(4.9rem,auto) 1.8rem;gap:.9rem;min-height:4.8rem;padding:.55rem .85rem}.loro-product-row__image{width:5.4rem;height:3.65rem}.loro-product-row--basket{grid-template-columns:2.4rem 5.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem;grid-template-rows:auto auto;column-gap:.75rem;row-gap:.38rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__selected-mark{grid-column:1;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:5.4rem;height:3.65rem}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%);max-width:100%}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{grid-column:5;grid-row:1/span 2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__delete-button{grid-column:4}.loro-product-row--pantry{grid-template-columns:4.5rem minmax(0,1fr) auto auto}.loro-product-row--compare{grid-template-columns:4.5rem minmax(6rem,1fr) minmax(10rem,1.6fr)}.loro-product-row__stepper{min-width:8rem;width:8rem}.loro-product-row__total{font-size:1.25rem}}@media(max-width:640px){.loro-product-row{grid-template-columns:2.1rem 4.45rem minmax(5.6rem,1fr) minmax(8rem,auto) minmax(4.2rem,auto);gap:.65rem;min-height:4.8rem;padding:.55rem}.loro-product-row--basket{grid-template-columns:2.1rem 4.45rem minmax(0,1fr) minmax(4.2rem,auto);grid-template-rows:auto auto;border:1px solid var(--loro-surface);border-radius:.85rem;background:var(--loro-surface);overflow:hidden}.loro-product-row--basket .loro-product-row__check{display:grid;grid-column:1;grid-row:1/span 2;align-self:center;justify-self:center;width:1.8rem;height:1.8rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__selected-mark{display:none}.loro-product-row--basket .loro-product-row__image,.loro-product-row--basket .loro-product-row__copy,.loro-product-row--basket .loro-product-row__stepper,.loro-product-row--basket .loro-product-row__total-stack{grid-area:auto}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.1rem minmax(0,1fr) minmax(4.2rem,auto)}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{display:none}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket.loro-product-row--dragging{box-shadow:0 1rem 2.2rem #4d2db71f}.loro-product-row__delete-action{position:absolute;inset:0 0 0 auto;z-index:0;display:grid;width:10rem;align-content:center;justify-items:center;gap:.35rem;place-items:center;padding-inline-start:1.75rem;border-radius:0 .85rem .85rem 0;background:linear-gradient(135deg,#ff4d5f,#dc2626);color:#fff;font-size:.82rem;font-weight:900;opacity:0;transition:opacity .16s ease,transform .16s ease}.loro-product-row__delete-action span{color:inherit;line-height:1}.loro-product-row--dragging+.loro-product-row__delete-action,.loro-product-row--swipe-armed+.loro-product-row__delete-action,.loro-product-row--removing+.loro-product-row__delete-action{opacity:1}.loro-product-row__image{width:4.45rem;height:3.35rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.45rem minmax(3.15rem,1fr) 1.45rem;min-height:2.05rem;border-radius:.72rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;overflow:hidden;gap:.14rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.75rem;max-width:2.35rem;overflow:hidden;text-overflow:clip;white-space:nowrap}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:2.05rem;max-width:2.35rem}.loro-product-row__total{align-self:center;font-size:clamp(.92rem,3.4vw,1.05rem);letter-spacing:0}.loro-product-row__unit-price{font-size:clamp(.62rem,2.4vw,.72rem)}.loro-product-row--basket .loro-product-row__copy strong{overflow-wrap:normal;word-break:normal;font-size:clamp(.82rem,3.6vw,.95rem);line-height:1.05}.loro-product-row--basket .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.82rem);line-height:1.05}.loro-product-row--pantry{grid-template-columns:4.8rem minmax(0,1fr) auto auto;gap:.7rem;min-height:5.8rem}.loro-product-row--pantry .loro-product-row__image{width:4.8rem;height:3.5rem}.loro-product-row--pantry .loro-product-row__copy strong{font-size:.96rem}.loro-product-row--pantry .loro-product-row__copy small{font-size:.82rem}.loro-product-row--pantry .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4.35rem minmax(6.2rem,1fr) minmax(9rem,1.55fr);gap:.6rem;min-height:5.8rem;padding:.75rem .8rem}.loro-product-row--compare .loro-product-row__image{width:4.35rem;height:3.35rem;border-radius:.8rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.88rem,3.6vw,1rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.74rem,2.9vw,.84rem)}.loro-product-row--compare .loro-product-row__prices{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;align-self:stretch;align-items:center}.loro-product-row--compare .loro-product-row__price{gap:.15rem;align-content:center}.loro-product-row--compare .loro-product-row__price loro-image{width:2rem;height:1.2rem}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.78rem,3.2vw,.92rem)}.loro-product-row--compare .loro-product-row__price--best span{padding:.22rem .5rem}}@media(max-width:430px){.loro-product-row--basket{grid-template-columns:1.9rem 3.3rem minmax(0,1fr) minmax(3.35rem,auto);gap:.45rem;min-height:4.3rem;padding:.45rem}.loro-product-row--basket .loro-product-row__check{width:1.6rem;height:1.6rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.9rem minmax(0,1fr) minmax(3.35rem,auto)}.loro-product-row--basket .loro-product-row__image{width:3.3rem;height:2.75rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.28rem minmax(3.05rem,1fr) 1.28rem;min-height:2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;gap:.1rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.65rem;max-width:2.2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:1.95rem;max-width:2.2rem}.loro-product-row--basket .loro-product-row__copy strong{font-size:.78rem}.loro-product-row--basket .loro-product-row__copy small{font-size:.68rem}.loro-product-row--basket .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4rem minmax(5.2rem,1fr) minmax(8.1rem,1.45fr);gap:.5rem;padding:.7rem}.loro-product-row--compare .loro-product-row__image{width:4rem;height:3.1rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.82rem,3.8vw,.94rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.8rem)}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.74rem,3.2vw,.86rem)}.loro-product-row--compare .loro-product-row__price loro-image{width:1.9rem;height:1.1rem}}@media(max-width:380px){.loro-product-row--basket{grid-template-columns:1.85rem 3.15rem minmax(0,1fr) minmax(3.25rem,auto);grid-template-rows:auto auto;column-gap:.32rem;row-gap:.28rem;min-height:4.75rem;padding:.5rem}.loro-product-row--basket .loro-product-row__check{grid-column:1;grid-row:1/span 2;align-self:center;width:1.55rem;height:1.55rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.85rem minmax(0,1fr) minmax(3.25rem,auto)}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy,.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:3.15rem;height:2.65rem}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end;padding-inline-end:.25rem}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%)}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.35rem minmax(3.25rem,1fr) 1.35rem;min-height:1.85rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.55rem;max-width:2rem;font-size:.82rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value span{min-width:.95rem;font-size:.78rem}}\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"] }, { kind: "component", type: LoroInput, selector: "loro-input", inputs: ["label", "placeholder", "helperText", "value", "type", "name", "autocomplete", "inputmode", "icon", "iconSize", "trailingIcon", "trailingIconSize", "trailingAriaLabel", "variant", "state", "errorMessage", "errors", "invalid", "disabled", "readonly", "required", "touched", "unit", "step", "min", "max"], outputs: ["valueChange", "touchedChange", "trailingClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroProductRow, isStandalone: true, selector: "loro-product-row", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, imageName: { classPropertyName: "imageName", publicName: "imageName", isSignal: true, isRequired: false, transformFunction: null }, quantityLabel: { classPropertyName: "quantityLabel", publicName: "quantityLabel", isSignal: true, isRequired: false, transformFunction: null }, quantity: { classPropertyName: "quantity", publicName: "quantity", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, prices: { classPropertyName: "prices", publicName: "prices", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange", quantityChange: "quantityChange", increment: "increment", decrement: "decrement", rowRemove: "rowRemove" }, ngImport: i0, template: "<article\n  class=\"loro-product-row\"\n  [class.loro-product-row--basket]=\"variant() === 'basket'\"\n  [class.loro-product-row--pantry]=\"variant() === 'pantry'\"\n  [class.loro-product-row--compare]=\"variant() === 'compare'\"\n  [class.loro-product-row--divider]=\"divider()\"\n  [class.loro-product-row--checked]=\"checked()\"\n  [class.loro-product-row--dragging]=\"swipeDragging()\"\n  [class.loro-product-row--swipe-armed]=\"swipeArmed()\"\n  [class.loro-product-row--removing]=\"swipeRemoving()\"\n  [class.loro-product-row--swipe-removable]=\"isSwipeRemovable()\"\n  [class.loro-product-row--no-image]=\"!imageName()\"\n  [style.transform]=\"swipeTransform()\"\n  (touchstart)=\"onRowTouchStart($event)\"\n  (touchmove)=\"onRowTouchMove($event)\"\n  (touchend)=\"onRowTouchEnd($event)\"\n  (touchcancel)=\"onRowTouchCancel()\"\n  (click)=\"onBasketClick($event)\">\n  @if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__check\"\n      [class.loro-product-row__check--checked]=\"checked()\"\n      [attr.aria-label]=\"'Marcar ' + name()\"\n      (click)=\"checkedChange.emit(!checked())\">\n      @if (checked()) {\n        <loro-icon name=\"check\" [size]=\"18\" alt=\"Comprado\" color=\"inverse\" />\n      }\n    </button>\n    <span class=\"loro-product-row__selected-mark\" aria-hidden=\"true\">\n      <loro-icon name=\"tick-circle\" [size]=\"16\" alt=\"Seleccionado\" color=\"primary\" />\n    </span>\n  }\n\n  @if (imageName()) {\n    <span class=\"loro-product-row__image\">\n      <loro-image [name]=\"imageName()!\" [alt]=\"name()\" width=\"100%\" />\n    </span>\n  }\n\n  <span class=\"loro-product-row__copy\">\n    <strong>{{ name() }}</strong>\n    @if (variant() !== 'basket') {\n      <small>{{ meta() }}</small>\n    }\n  </span>\n\n  @if (variant() === 'basket') {\n    <loro-input\n      class=\"loro-product-row__stepper\"\n      variant=\"stepper\"\n      [label]=\"'Cantidad de ' + name()\"\n      [value]=\"quantityValue()\"\n      [unit]=\"unit()\"\n      [step]=\"unit() === 'kg' ? 0.5 : 1\"\n      [min]=\"unit() === 'kg' ? 0.5 : 1\"\n      [max]=\"100\"\n      (valueChange)=\"updateQuantity($event)\" />\n  }\n\n  @if (variant() === 'compare') {\n    <span class=\"loro-product-row__prices\">\n      @for (price of prices(); track price.store) {\n        <span [class.loro-product-row__price--best]=\"price.best\" class=\"loro-product-row__price\">\n          @if (price.logoName) {\n            <loro-image [name]=\"price.logoName\" [alt]=\"price.store\" width=\"100%\" height=\"100%\" fit=\"contain\" />\n          } @else {\n            <b>{{ price.store }}</b>\n          }\n          <span>{{ formatCurrency(price.value) }} \u20AC</span>\n        </span>\n      }\n    </span>\n  } @else if (variant() === 'basket') {\n    <span class=\"loro-product-row__total-stack\">\n      <small class=\"loro-product-row__unit-price\">{{ meta() }}</small>\n      <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n    </span>\n  } @else {\n    <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n  }\n\n  @if (variant() === 'pantry') {\n    <span\n      class=\"loro-product-row__status\"\n      [class.loro-product-row__status--warning]=\"status() === 'warning'\"\n      [class.loro-product-row__status--expiring]=\"status() === 'expiring'\">\n      <loro-icon\n        [name]=\"status() === 'ok' ? 'check' : 'warning'\"\n        [size]=\"status() === 'ok' ? 15 : 12\"\n        [alt]=\"status()\"\n        [color]=\"status() === 'ok' ? 'success' : status() === 'expiring' ? 'warning' : 'danger'\" />\n    </span>\n  } @else if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__delete-button\"\n      data-touch-hover\n      [attr.aria-label]=\"'Eliminar ' + name()\"\n      (click)=\"rowRemove.emit()\">\n      <loro-icon name=\"trash\" [size]=\"18\" alt=\"\" [decorative]=\"true\" color=\"danger\" />\n    </button>\n  }\n</article>\n@if (isSwipeRemovable()) {\n  <span class=\"loro-product-row__delete-action\" aria-hidden=\"true\" [style.transform]=\"deleteActionTransform()\">\n    <loro-icon name=\"trash-white\" [size]=\"24\" alt=\"Eliminar\" color=\"inverse\" />\n    <span>Eliminar</span>\n  </span>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;font-family:var(--loro-font-brand);--loro-product-row-selected-bg: #f4f0ff;--loro-product-row-selected-shadow: 0 .75rem 1.8rem rgba(77, 45, 183, .08)}:host-context([data-theme=dark]){--loro-product-row-selected-bg: color-mix(in srgb, var(--loro-primary-500) 18%, var(--loro-surface) 82%)}.loro-product-row{position:relative;z-index:1;display:grid;grid-template-columns:2.6rem 5.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem;align-items:center;gap:1.2rem;min-width:0;min-height:5.35rem;padding:.55rem 1rem;background:var(--loro-surface-soft);color:var(--loro-text);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;touch-action:pan-y;-webkit-user-select:none;user-select:none}.loro-product-row--dragging{transition:none}.loro-product-row--removing{opacity:.18;pointer-events:none;transform:translate3d(calc(-100% - 2rem),0,0)!important}.loro-product-row__delete-action{display:none}.loro-product-row--divider:after{position:absolute;right:0;bottom:0;left:0;height:1px;background:var(--loro-border-subtle);content:\"\"}.loro-product-row--pantry{grid-template-columns:4.6rem minmax(0,1fr) auto auto;gap:.9rem}.loro-product-row--compare{grid-template-columns:5.2rem minmax(8rem,1fr) minmax(14rem,2fr);border:1px solid var(--loro-border-subtle);border-radius:1rem;box-shadow:var(--loro-shadow-soft)}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem}.loro-product-row--pantry.loro-product-row--no-image{grid-template-columns:minmax(0,1fr) auto auto}.loro-product-row--compare.loro-product-row--no-image{grid-template-columns:minmax(8rem,1fr) minmax(14rem,2fr)}.loro-product-row__check{display:grid;width:1.9rem;height:1.9rem;place-items:center;border:2px solid rgba(98,88,130,.45);border-radius:.45rem;background:var(--loro-surface);cursor:pointer}.loro-product-row__check--checked{border-color:transparent;background:var(--loro-primary-500)}.loro-product-row__selected-mark{display:none}.loro-product-row__image{display:grid;width:5.2rem;height:3.6rem;place-items:center;overflow:hidden;border-radius:.65rem;background:color-mix(in srgb,var(--loro-primary-500) 4%,var(--loro-surface-soft) 96%)}.loro-product-row__copy{display:grid;gap:.18rem;min-width:0;align-content:center}strong{color:var(--loro-text-strong);line-height:1.1;overflow-wrap:anywhere;font-weight:950}small{color:var(--loro-muted);line-height:1.2;font-weight:750}.loro-product-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;align-self:center;border:0;border-radius:.7rem;background:transparent;color:var(--loro-danger-text);font:inherit;font-weight:950;cursor:pointer;opacity:.64;transition:opacity .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}.loro-product-row__delete-button:hover,.loro-product-row__delete-button.is-touch-hover,.loro-product-row__delete-button:focus-visible{opacity:1;background:color-mix(in srgb,var(--loro-danger-text) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-danger-text) 14%,transparent);transform:translateY(-1px)}.loro-product-row__delete-button:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-danger-text) 22%,transparent);outline-offset:2px}.loro-product-row__delete-button:active{transform:translateY(0)}.loro-product-row__total{color:var(--loro-primary-700);font-size:1.2rem;text-align:right;white-space:nowrap;min-width:0}.loro-product-row__total-stack{display:grid;justify-items:end;gap:.08rem;min-width:0;align-content:center;text-align:right}.loro-product-row__unit-price{color:var(--loro-muted-strong);font-size:.78rem;line-height:1;white-space:nowrap;font-weight:850}.loro-product-row__prices{display:grid;grid-template-columns:repeat(3,minmax(4.5rem,1fr));gap:.5rem;align-items:center;justify-items:stretch}.loro-product-row__price{display:grid;justify-items:center;gap:.2rem;color:var(--loro-primary-700);min-width:0;text-align:center;font-weight:850}.loro-product-row__price loro-image{display:block;width:2.25rem;height:1.5rem}.loro-product-row__price ::ng-deep img{width:100%;height:100%;object-fit:contain}.loro-product-row__price span{overflow-wrap:anywhere;font-size:clamp(1rem,2vw,1.1rem);line-height:1.1}.loro-product-row__price--best span{padding:.25rem .85rem;border-radius:var(--loro-radius-pill);background:color-mix(in srgb,#15803d 12%,var(--loro-surface-soft) 88%);color:#15803d}.loro-product-row__status{display:grid;width:1.55rem;height:1.55rem;place-items:center;border:1.5px solid rgba(31,157,85,.42);border-radius:50%}.loro-product-row__status--warning{border-color:#dc262661}.loro-product-row__status--expiring{border-color:color-mix(in srgb,var(--loro-warning) 58%,transparent);background:color-mix(in srgb,var(--loro-warning) 7%,transparent)}@media(min-width:1024px){.loro-product-row--basket{border:1px solid transparent;cursor:pointer}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button,.loro-product-row--basket .loro-product-row__stepper{cursor:auto}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button{cursor:pointer}}@media(max-width:479.99px)and (orientation:portrait){.loro-product-row{grid-template-columns:2.4rem 6rem minmax(8rem,1fr) minmax(8.8rem,auto) minmax(4.9rem,auto) 1.8rem;gap:.9rem;min-height:4.8rem;padding:.55rem .85rem}.loro-product-row__image{width:5.4rem;height:3.65rem}.loro-product-row--basket{grid-template-columns:2.4rem 5.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem;grid-template-rows:auto auto;column-gap:.75rem;row-gap:.38rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__selected-mark{grid-column:1;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:5.4rem;height:3.65rem}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%);max-width:100%}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{grid-column:5;grid-row:1/span 2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__delete-button{grid-column:4}.loro-product-row--pantry{grid-template-columns:4.5rem minmax(0,1fr) auto auto}.loro-product-row--compare{grid-template-columns:4.5rem minmax(6rem,1fr) minmax(10rem,1.6fr)}.loro-product-row__stepper{min-width:8rem;width:8rem}.loro-product-row__total{font-size:1.25rem}}@media(max-width:640px){.loro-product-row{grid-template-columns:2.1rem 4.45rem minmax(5.6rem,1fr) minmax(8rem,auto) minmax(4.2rem,auto);gap:.65rem;min-height:4.8rem;padding:.55rem}.loro-product-row--basket{grid-template-columns:2.1rem 4.45rem minmax(0,1fr) minmax(4.2rem,auto);grid-template-rows:auto auto;border:1px solid var(--loro-surface);border-radius:.85rem;background:var(--loro-surface);overflow:hidden}.loro-product-row--basket .loro-product-row__check{display:grid;grid-column:1;grid-row:1/span 2;align-self:center;justify-self:center;width:1.8rem;height:1.8rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__selected-mark{display:none}.loro-product-row--basket .loro-product-row__image,.loro-product-row--basket .loro-product-row__copy,.loro-product-row--basket .loro-product-row__stepper,.loro-product-row--basket .loro-product-row__total-stack{grid-area:auto}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.1rem minmax(0,1fr) minmax(4.2rem,auto)}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{display:none}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket.loro-product-row--dragging{box-shadow:0 1rem 2.2rem #4d2db71f}.loro-product-row__delete-action{position:absolute;inset:0 0 0 auto;z-index:0;display:grid;width:10rem;align-content:center;justify-items:center;gap:.35rem;place-items:center;padding-inline-start:1.75rem;border-radius:0 .85rem .85rem 0;background:linear-gradient(135deg,#ff4d5f,#dc2626);color:#fff;font-size:.82rem;font-weight:900;opacity:0;transition:opacity .16s ease,transform .16s ease}.loro-product-row__delete-action span{color:inherit;line-height:1}.loro-product-row--dragging+.loro-product-row__delete-action,.loro-product-row--swipe-armed+.loro-product-row__delete-action,.loro-product-row--removing+.loro-product-row__delete-action{opacity:1}.loro-product-row__image{width:4.45rem;height:3.35rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.45rem minmax(3.15rem,1fr) 1.45rem;min-height:2.05rem;border-radius:.72rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;overflow:hidden;gap:.14rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.75rem;max-width:2.35rem;overflow:hidden;text-overflow:clip;white-space:nowrap}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:2.05rem;max-width:2.35rem}.loro-product-row__total{align-self:center;font-size:clamp(.92rem,3.4vw,1.05rem);letter-spacing:0}.loro-product-row__unit-price{font-size:clamp(.62rem,2.4vw,.72rem)}.loro-product-row--basket .loro-product-row__copy strong{overflow-wrap:normal;word-break:normal;font-size:clamp(.82rem,3.6vw,.95rem);line-height:1.05}.loro-product-row--basket .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.82rem);line-height:1.05}.loro-product-row--pantry{grid-template-columns:4.8rem minmax(0,1fr) auto auto;gap:.7rem;min-height:5.8rem}.loro-product-row--pantry .loro-product-row__image{width:4.8rem;height:3.5rem}.loro-product-row--pantry .loro-product-row__copy strong{font-size:.96rem}.loro-product-row--pantry .loro-product-row__copy small{font-size:.82rem}.loro-product-row--pantry .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4.35rem minmax(6.2rem,1fr) minmax(9rem,1.55fr);gap:.6rem;min-height:5.8rem;padding:.75rem .8rem}.loro-product-row--compare .loro-product-row__image{width:4.35rem;height:3.35rem;border-radius:.8rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.88rem,3.6vw,1rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.74rem,2.9vw,.84rem)}.loro-product-row--compare .loro-product-row__prices{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;align-self:stretch;align-items:center}.loro-product-row--compare .loro-product-row__price{gap:.15rem;align-content:center}.loro-product-row--compare .loro-product-row__price loro-image{width:2rem;height:1.2rem}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.78rem,3.2vw,.92rem)}.loro-product-row--compare .loro-product-row__price--best span{padding:.22rem .5rem}}@media(max-width:430px){.loro-product-row--basket{grid-template-columns:1.9rem 3.3rem minmax(0,1fr) minmax(3.35rem,auto);gap:.45rem;min-height:4.3rem;padding:.45rem}.loro-product-row--basket .loro-product-row__check{width:1.6rem;height:1.6rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.9rem minmax(0,1fr) minmax(3.35rem,auto)}.loro-product-row--basket .loro-product-row__image{width:3.3rem;height:2.75rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.28rem minmax(3.05rem,1fr) 1.28rem;min-height:2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;gap:.1rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.65rem;max-width:2.2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:1.95rem;max-width:2.2rem}.loro-product-row--basket .loro-product-row__copy strong{font-size:.78rem}.loro-product-row--basket .loro-product-row__copy small{font-size:.68rem}.loro-product-row--basket .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4rem minmax(5.2rem,1fr) minmax(8.1rem,1.45fr);gap:.5rem;padding:.7rem}.loro-product-row--compare .loro-product-row__image{width:4rem;height:3.1rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.82rem,3.8vw,.94rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.8rem)}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.74rem,3.2vw,.86rem)}.loro-product-row--compare .loro-product-row__price loro-image{width:1.9rem;height:1.1rem}}@media(max-width:380px){.loro-product-row--basket{grid-template-columns:1.85rem 3.15rem minmax(0,1fr) minmax(3.25rem,auto);grid-template-rows:auto auto;column-gap:.32rem;row-gap:.28rem;min-height:4.75rem;padding:.5rem}.loro-product-row--basket .loro-product-row__check{grid-column:1;grid-row:1/span 2;align-self:center;width:1.55rem;height:1.55rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.85rem minmax(0,1fr) minmax(3.25rem,auto)}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy,.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:3.15rem;height:2.65rem}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end;padding-inline-end:.25rem}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%)}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.35rem minmax(3.25rem,1fr) 1.35rem;min-height:1.85rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.55rem;max-width:2rem;font-size:.82rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value span{min-width:.95rem;font-size:.78rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }, { kind: "component", type: LoroImage, selector: "loro-image", inputs: ["name", "alt", "size", "width", "height", "fit"] }, { kind: "component", type: LoroInput, selector: "loro-input", inputs: ["label", "placeholder", "helperText", "value", "type", "name", "autocomplete", "inputmode", "icon", "iconSize", "trailingIcon", "trailingIconSize", "trailingAriaLabel", "variant", "state", "errorMessage", "errors", "invalid", "disabled", "readonly", "required", "touched", "unit", "step", "min", "max"], outputs: ["valueChange", "touchedChange", "trailingClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroProductRow, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-product-row', standalone: true, imports: [LoroIcon, LoroImage, LoroInput], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n  class=\"loro-product-row\"\n  [class.loro-product-row--basket]=\"variant() === 'basket'\"\n  [class.loro-product-row--pantry]=\"variant() === 'pantry'\"\n  [class.loro-product-row--compare]=\"variant() === 'compare'\"\n  [class.loro-product-row--divider]=\"divider()\"\n  [class.loro-product-row--checked]=\"checked()\"\n  [class.loro-product-row--dragging]=\"swipeDragging()\"\n  [class.loro-product-row--swipe-armed]=\"swipeArmed()\"\n  [class.loro-product-row--removing]=\"swipeRemoving()\"\n  [class.loro-product-row--swipe-removable]=\"isSwipeRemovable()\"\n  [class.loro-product-row--no-image]=\"!imageName()\"\n  [style.transform]=\"swipeTransform()\"\n  (touchstart)=\"onRowTouchStart($event)\"\n  (touchmove)=\"onRowTouchMove($event)\"\n  (touchend)=\"onRowTouchEnd($event)\"\n  (touchcancel)=\"onRowTouchCancel()\"\n  (click)=\"onBasketClick($event)\">\n  @if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__check\"\n      [class.loro-product-row__check--checked]=\"checked()\"\n      [attr.aria-label]=\"'Marcar ' + name()\"\n      (click)=\"checkedChange.emit(!checked())\">\n      @if (checked()) {\n        <loro-icon name=\"check\" [size]=\"18\" alt=\"Comprado\" color=\"inverse\" />\n      }\n    </button>\n    <span class=\"loro-product-row__selected-mark\" aria-hidden=\"true\">\n      <loro-icon name=\"tick-circle\" [size]=\"16\" alt=\"Seleccionado\" color=\"primary\" />\n    </span>\n  }\n\n  @if (imageName()) {\n    <span class=\"loro-product-row__image\">\n      <loro-image [name]=\"imageName()!\" [alt]=\"name()\" width=\"100%\" />\n    </span>\n  }\n\n  <span class=\"loro-product-row__copy\">\n    <strong>{{ name() }}</strong>\n    @if (variant() !== 'basket') {\n      <small>{{ meta() }}</small>\n    }\n  </span>\n\n  @if (variant() === 'basket') {\n    <loro-input\n      class=\"loro-product-row__stepper\"\n      variant=\"stepper\"\n      [label]=\"'Cantidad de ' + name()\"\n      [value]=\"quantityValue()\"\n      [unit]=\"unit()\"\n      [step]=\"unit() === 'kg' ? 0.5 : 1\"\n      [min]=\"unit() === 'kg' ? 0.5 : 1\"\n      [max]=\"100\"\n      (valueChange)=\"updateQuantity($event)\" />\n  }\n\n  @if (variant() === 'compare') {\n    <span class=\"loro-product-row__prices\">\n      @for (price of prices(); track price.store) {\n        <span [class.loro-product-row__price--best]=\"price.best\" class=\"loro-product-row__price\">\n          @if (price.logoName) {\n            <loro-image [name]=\"price.logoName\" [alt]=\"price.store\" width=\"100%\" height=\"100%\" fit=\"contain\" />\n          } @else {\n            <b>{{ price.store }}</b>\n          }\n          <span>{{ formatCurrency(price.value) }} \u20AC</span>\n        </span>\n      }\n    </span>\n  } @else if (variant() === 'basket') {\n    <span class=\"loro-product-row__total-stack\">\n      <small class=\"loro-product-row__unit-price\">{{ meta() }}</small>\n      <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n    </span>\n  } @else {\n    <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n  }\n\n  @if (variant() === 'pantry') {\n    <span\n      class=\"loro-product-row__status\"\n      [class.loro-product-row__status--warning]=\"status() === 'warning'\"\n      [class.loro-product-row__status--expiring]=\"status() === 'expiring'\">\n      <loro-icon\n        [name]=\"status() === 'ok' ? 'check' : 'warning'\"\n        [size]=\"status() === 'ok' ? 15 : 12\"\n        [alt]=\"status()\"\n        [color]=\"status() === 'ok' ? 'success' : status() === 'expiring' ? 'warning' : 'danger'\" />\n    </span>\n  } @else if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__delete-button\"\n      data-touch-hover\n      [attr.aria-label]=\"'Eliminar ' + name()\"\n      (click)=\"rowRemove.emit()\">\n      <loro-icon name=\"trash\" [size]=\"18\" alt=\"\" [decorative]=\"true\" color=\"danger\" />\n    </button>\n  }\n</article>\n@if (isSwipeRemovable()) {\n  <span class=\"loro-product-row__delete-action\" aria-hidden=\"true\" [style.transform]=\"deleteActionTransform()\">\n    <loro-icon name=\"trash-white\" [size]=\"24\" alt=\"Eliminar\" color=\"inverse\" />\n    <span>Eliminar</span>\n  </span>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;font-family:var(--loro-font-brand);--loro-product-row-selected-bg: #f4f0ff;--loro-product-row-selected-shadow: 0 .75rem 1.8rem rgba(77, 45, 183, .08)}:host-context([data-theme=dark]){--loro-product-row-selected-bg: color-mix(in srgb, var(--loro-primary-500) 18%, var(--loro-surface) 82%)}.loro-product-row{position:relative;z-index:1;display:grid;grid-template-columns:2.6rem 5.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem;align-items:center;gap:1.2rem;min-width:0;min-height:5.35rem;padding:.55rem 1rem;background:var(--loro-surface-soft);color:var(--loro-text);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;touch-action:pan-y;-webkit-user-select:none;user-select:none}.loro-product-row--dragging{transition:none}.loro-product-row--removing{opacity:.18;pointer-events:none;transform:translate3d(calc(-100% - 2rem),0,0)!important}.loro-product-row__delete-action{display:none}.loro-product-row--divider:after{position:absolute;right:0;bottom:0;left:0;height:1px;background:var(--loro-border-subtle);content:\"\"}.loro-product-row--pantry{grid-template-columns:4.6rem minmax(0,1fr) auto auto;gap:.9rem}.loro-product-row--compare{grid-template-columns:5.2rem minmax(8rem,1fr) minmax(14rem,2fr);border:1px solid var(--loro-border-subtle);border-radius:1rem;box-shadow:var(--loro-shadow-soft)}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem}.loro-product-row--pantry.loro-product-row--no-image{grid-template-columns:minmax(0,1fr) auto auto}.loro-product-row--compare.loro-product-row--no-image{grid-template-columns:minmax(8rem,1fr) minmax(14rem,2fr)}.loro-product-row__check{display:grid;width:1.9rem;height:1.9rem;place-items:center;border:2px solid rgba(98,88,130,.45);border-radius:.45rem;background:var(--loro-surface);cursor:pointer}.loro-product-row__check--checked{border-color:transparent;background:var(--loro-primary-500)}.loro-product-row__selected-mark{display:none}.loro-product-row__image{display:grid;width:5.2rem;height:3.6rem;place-items:center;overflow:hidden;border-radius:.65rem;background:color-mix(in srgb,var(--loro-primary-500) 4%,var(--loro-surface-soft) 96%)}.loro-product-row__copy{display:grid;gap:.18rem;min-width:0;align-content:center}strong{color:var(--loro-text-strong);line-height:1.1;overflow-wrap:anywhere;font-weight:950}small{color:var(--loro-muted);line-height:1.2;font-weight:750}.loro-product-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;align-self:center;border:0;border-radius:.7rem;background:transparent;color:var(--loro-danger-text);font:inherit;font-weight:950;cursor:pointer;opacity:.64;transition:opacity .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}.loro-product-row__delete-button:hover,.loro-product-row__delete-button.is-touch-hover,.loro-product-row__delete-button:focus-visible{opacity:1;background:color-mix(in srgb,var(--loro-danger-text) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-danger-text) 14%,transparent);transform:translateY(-1px)}.loro-product-row__delete-button:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-danger-text) 22%,transparent);outline-offset:2px}.loro-product-row__delete-button:active{transform:translateY(0)}.loro-product-row__total{color:var(--loro-primary-700);font-size:1.2rem;text-align:right;white-space:nowrap;min-width:0}.loro-product-row__total-stack{display:grid;justify-items:end;gap:.08rem;min-width:0;align-content:center;text-align:right}.loro-product-row__unit-price{color:var(--loro-muted-strong);font-size:.78rem;line-height:1;white-space:nowrap;font-weight:850}.loro-product-row__prices{display:grid;grid-template-columns:repeat(3,minmax(4.5rem,1fr));gap:.5rem;align-items:center;justify-items:stretch}.loro-product-row__price{display:grid;justify-items:center;gap:.2rem;color:var(--loro-primary-700);min-width:0;text-align:center;font-weight:850}.loro-product-row__price loro-image{display:block;width:2.25rem;height:1.5rem}.loro-product-row__price ::ng-deep img{width:100%;height:100%;object-fit:contain}.loro-product-row__price span{overflow-wrap:anywhere;font-size:clamp(1rem,2vw,1.1rem);line-height:1.1}.loro-product-row__price--best span{padding:.25rem .85rem;border-radius:var(--loro-radius-pill);background:color-mix(in srgb,#15803d 12%,var(--loro-surface-soft) 88%);color:#15803d}.loro-product-row__status{display:grid;width:1.55rem;height:1.55rem;place-items:center;border:1.5px solid rgba(31,157,85,.42);border-radius:50%}.loro-product-row__status--warning{border-color:#dc262661}.loro-product-row__status--expiring{border-color:color-mix(in srgb,var(--loro-warning) 58%,transparent);background:color-mix(in srgb,var(--loro-warning) 7%,transparent)}@media(min-width:1024px){.loro-product-row--basket{border:1px solid transparent;cursor:pointer}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button,.loro-product-row--basket .loro-product-row__stepper{cursor:auto}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button{cursor:pointer}}@media(max-width:479.99px)and (orientation:portrait){.loro-product-row{grid-template-columns:2.4rem 6rem minmax(8rem,1fr) minmax(8.8rem,auto) minmax(4.9rem,auto) 1.8rem;gap:.9rem;min-height:4.8rem;padding:.55rem .85rem}.loro-product-row__image{width:5.4rem;height:3.65rem}.loro-product-row--basket{grid-template-columns:2.4rem 5.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem;grid-template-rows:auto auto;column-gap:.75rem;row-gap:.38rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__selected-mark{grid-column:1;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:5.4rem;height:3.65rem}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%);max-width:100%}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{grid-column:5;grid-row:1/span 2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__delete-button{grid-column:4}.loro-product-row--pantry{grid-template-columns:4.5rem minmax(0,1fr) auto auto}.loro-product-row--compare{grid-template-columns:4.5rem minmax(6rem,1fr) minmax(10rem,1.6fr)}.loro-product-row__stepper{min-width:8rem;width:8rem}.loro-product-row__total{font-size:1.25rem}}@media(max-width:640px){.loro-product-row{grid-template-columns:2.1rem 4.45rem minmax(5.6rem,1fr) minmax(8rem,auto) minmax(4.2rem,auto);gap:.65rem;min-height:4.8rem;padding:.55rem}.loro-product-row--basket{grid-template-columns:2.1rem 4.45rem minmax(0,1fr) minmax(4.2rem,auto);grid-template-rows:auto auto;border:1px solid var(--loro-surface);border-radius:.85rem;background:var(--loro-surface);overflow:hidden}.loro-product-row--basket .loro-product-row__check{display:grid;grid-column:1;grid-row:1/span 2;align-self:center;justify-self:center;width:1.8rem;height:1.8rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__selected-mark{display:none}.loro-product-row--basket .loro-product-row__image,.loro-product-row--basket .loro-product-row__copy,.loro-product-row--basket .loro-product-row__stepper,.loro-product-row--basket .loro-product-row__total-stack{grid-area:auto}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.1rem minmax(0,1fr) minmax(4.2rem,auto)}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{display:none}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket.loro-product-row--dragging{box-shadow:0 1rem 2.2rem #4d2db71f}.loro-product-row__delete-action{position:absolute;inset:0 0 0 auto;z-index:0;display:grid;width:10rem;align-content:center;justify-items:center;gap:.35rem;place-items:center;padding-inline-start:1.75rem;border-radius:0 .85rem .85rem 0;background:linear-gradient(135deg,#ff4d5f,#dc2626);color:#fff;font-size:.82rem;font-weight:900;opacity:0;transition:opacity .16s ease,transform .16s ease}.loro-product-row__delete-action span{color:inherit;line-height:1}.loro-product-row--dragging+.loro-product-row__delete-action,.loro-product-row--swipe-armed+.loro-product-row__delete-action,.loro-product-row--removing+.loro-product-row__delete-action{opacity:1}.loro-product-row__image{width:4.45rem;height:3.35rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.45rem minmax(3.15rem,1fr) 1.45rem;min-height:2.05rem;border-radius:.72rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;overflow:hidden;gap:.14rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.75rem;max-width:2.35rem;overflow:hidden;text-overflow:clip;white-space:nowrap}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:2.05rem;max-width:2.35rem}.loro-product-row__total{align-self:center;font-size:clamp(.92rem,3.4vw,1.05rem);letter-spacing:0}.loro-product-row__unit-price{font-size:clamp(.62rem,2.4vw,.72rem)}.loro-product-row--basket .loro-product-row__copy strong{overflow-wrap:normal;word-break:normal;font-size:clamp(.82rem,3.6vw,.95rem);line-height:1.05}.loro-product-row--basket .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.82rem);line-height:1.05}.loro-product-row--pantry{grid-template-columns:4.8rem minmax(0,1fr) auto auto;gap:.7rem;min-height:5.8rem}.loro-product-row--pantry .loro-product-row__image{width:4.8rem;height:3.5rem}.loro-product-row--pantry .loro-product-row__copy strong{font-size:.96rem}.loro-product-row--pantry .loro-product-row__copy small{font-size:.82rem}.loro-product-row--pantry .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4.35rem minmax(6.2rem,1fr) minmax(9rem,1.55fr);gap:.6rem;min-height:5.8rem;padding:.75rem .8rem}.loro-product-row--compare .loro-product-row__image{width:4.35rem;height:3.35rem;border-radius:.8rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.88rem,3.6vw,1rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.74rem,2.9vw,.84rem)}.loro-product-row--compare .loro-product-row__prices{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;align-self:stretch;align-items:center}.loro-product-row--compare .loro-product-row__price{gap:.15rem;align-content:center}.loro-product-row--compare .loro-product-row__price loro-image{width:2rem;height:1.2rem}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.78rem,3.2vw,.92rem)}.loro-product-row--compare .loro-product-row__price--best span{padding:.22rem .5rem}}@media(max-width:430px){.loro-product-row--basket{grid-template-columns:1.9rem 3.3rem minmax(0,1fr) minmax(3.35rem,auto);gap:.45rem;min-height:4.3rem;padding:.45rem}.loro-product-row--basket .loro-product-row__check{width:1.6rem;height:1.6rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.9rem minmax(0,1fr) minmax(3.35rem,auto)}.loro-product-row--basket .loro-product-row__image{width:3.3rem;height:2.75rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.28rem minmax(3.05rem,1fr) 1.28rem;min-height:2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;gap:.1rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.65rem;max-width:2.2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:1.95rem;max-width:2.2rem}.loro-product-row--basket .loro-product-row__copy strong{font-size:.78rem}.loro-product-row--basket .loro-product-row__copy small{font-size:.68rem}.loro-product-row--basket .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4rem minmax(5.2rem,1fr) minmax(8.1rem,1.45fr);gap:.5rem;padding:.7rem}.loro-product-row--compare .loro-product-row__image{width:4rem;height:3.1rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.82rem,3.8vw,.94rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.8rem)}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.74rem,3.2vw,.86rem)}.loro-product-row--compare .loro-product-row__price loro-image{width:1.9rem;height:1.1rem}}@media(max-width:380px){.loro-product-row--basket{grid-template-columns:1.85rem 3.15rem minmax(0,1fr) minmax(3.25rem,auto);grid-template-rows:auto auto;column-gap:.32rem;row-gap:.28rem;min-height:4.75rem;padding:.5rem}.loro-product-row--basket .loro-product-row__check{grid-column:1;grid-row:1/span 2;align-self:center;width:1.55rem;height:1.55rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.85rem minmax(0,1fr) minmax(3.25rem,auto)}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy,.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:3.15rem;height:2.65rem}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end;padding-inline-end:.25rem}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%)}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.35rem minmax(3.25rem,1fr) 1.35rem;min-height:1.85rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.55rem;max-width:2rem;font-size:.82rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value span{min-width:.95rem;font-size:.78rem}}\n"] }]
+            args: [{ selector: 'loro-product-row', standalone: true, imports: [LoroIcon$1, LoroImage, LoroInput], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article\n  class=\"loro-product-row\"\n  [class.loro-product-row--basket]=\"variant() === 'basket'\"\n  [class.loro-product-row--pantry]=\"variant() === 'pantry'\"\n  [class.loro-product-row--compare]=\"variant() === 'compare'\"\n  [class.loro-product-row--divider]=\"divider()\"\n  [class.loro-product-row--checked]=\"checked()\"\n  [class.loro-product-row--dragging]=\"swipeDragging()\"\n  [class.loro-product-row--swipe-armed]=\"swipeArmed()\"\n  [class.loro-product-row--removing]=\"swipeRemoving()\"\n  [class.loro-product-row--swipe-removable]=\"isSwipeRemovable()\"\n  [class.loro-product-row--no-image]=\"!imageName()\"\n  [style.transform]=\"swipeTransform()\"\n  (touchstart)=\"onRowTouchStart($event)\"\n  (touchmove)=\"onRowTouchMove($event)\"\n  (touchend)=\"onRowTouchEnd($event)\"\n  (touchcancel)=\"onRowTouchCancel()\"\n  (click)=\"onBasketClick($event)\">\n  @if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__check\"\n      [class.loro-product-row__check--checked]=\"checked()\"\n      [attr.aria-label]=\"'Marcar ' + name()\"\n      (click)=\"checkedChange.emit(!checked())\">\n      @if (checked()) {\n        <loro-icon name=\"check\" [size]=\"18\" alt=\"Comprado\" color=\"inverse\" />\n      }\n    </button>\n    <span class=\"loro-product-row__selected-mark\" aria-hidden=\"true\">\n      <loro-icon name=\"tick-circle\" [size]=\"16\" alt=\"Seleccionado\" color=\"primary\" />\n    </span>\n  }\n\n  @if (imageName()) {\n    <span class=\"loro-product-row__image\">\n      <loro-image [name]=\"imageName()!\" [alt]=\"name()\" width=\"100%\" />\n    </span>\n  }\n\n  <span class=\"loro-product-row__copy\">\n    <strong>{{ name() }}</strong>\n    @if (variant() !== 'basket') {\n      <small>{{ meta() }}</small>\n    }\n  </span>\n\n  @if (variant() === 'basket') {\n    <loro-input\n      class=\"loro-product-row__stepper\"\n      variant=\"stepper\"\n      [label]=\"'Cantidad de ' + name()\"\n      [value]=\"quantityValue()\"\n      [unit]=\"unit()\"\n      [step]=\"unit() === 'kg' ? 0.5 : 1\"\n      [min]=\"unit() === 'kg' ? 0.5 : 1\"\n      [max]=\"100\"\n      (valueChange)=\"updateQuantity($event)\" />\n  }\n\n  @if (variant() === 'compare') {\n    <span class=\"loro-product-row__prices\">\n      @for (price of prices(); track price.store) {\n        <span [class.loro-product-row__price--best]=\"price.best\" class=\"loro-product-row__price\">\n          @if (price.logoName) {\n            <loro-image [name]=\"price.logoName\" [alt]=\"price.store\" width=\"100%\" height=\"100%\" fit=\"contain\" />\n          } @else {\n            <b>{{ price.store }}</b>\n          }\n          <span>{{ formatCurrency(price.value) }} \u20AC</span>\n        </span>\n      }\n    </span>\n  } @else if (variant() === 'basket') {\n    <span class=\"loro-product-row__total-stack\">\n      <small class=\"loro-product-row__unit-price\">{{ meta() }}</small>\n      <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n    </span>\n  } @else {\n    <strong class=\"loro-product-row__total\">{{ formatCurrency(total()) }} \u20AC</strong>\n  }\n\n  @if (variant() === 'pantry') {\n    <span\n      class=\"loro-product-row__status\"\n      [class.loro-product-row__status--warning]=\"status() === 'warning'\"\n      [class.loro-product-row__status--expiring]=\"status() === 'expiring'\">\n      <loro-icon\n        [name]=\"status() === 'ok' ? 'check' : 'warning'\"\n        [size]=\"status() === 'ok' ? 15 : 12\"\n        [alt]=\"status()\"\n        [color]=\"status() === 'ok' ? 'success' : status() === 'expiring' ? 'warning' : 'danger'\" />\n    </span>\n  } @else if (variant() === 'basket') {\n    <button\n      type=\"button\"\n      class=\"loro-product-row__delete-button\"\n      data-touch-hover\n      [attr.aria-label]=\"'Eliminar ' + name()\"\n      (click)=\"rowRemove.emit()\">\n      <loro-icon name=\"trash\" [size]=\"18\" alt=\"\" [decorative]=\"true\" color=\"danger\" />\n    </button>\n  }\n</article>\n@if (isSwipeRemovable()) {\n  <span class=\"loro-product-row__delete-action\" aria-hidden=\"true\" [style.transform]=\"deleteActionTransform()\">\n    <loro-icon name=\"trash-white\" [size]=\"24\" alt=\"Eliminar\" color=\"inverse\" />\n    <span>Eliminar</span>\n  </span>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;font-family:var(--loro-font-brand);--loro-product-row-selected-bg: #f4f0ff;--loro-product-row-selected-shadow: 0 .75rem 1.8rem rgba(77, 45, 183, .08)}:host-context([data-theme=dark]){--loro-product-row-selected-bg: color-mix(in srgb, var(--loro-primary-500) 18%, var(--loro-surface) 82%)}.loro-product-row{position:relative;z-index:1;display:grid;grid-template-columns:2.6rem 5.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem;align-items:center;gap:1.2rem;min-width:0;min-height:5.35rem;padding:.55rem 1rem;background:var(--loro-surface-soft);color:var(--loro-text);transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;touch-action:pan-y;-webkit-user-select:none;user-select:none}.loro-product-row--dragging{transition:none}.loro-product-row--removing{opacity:.18;pointer-events:none;transform:translate3d(calc(-100% - 2rem),0,0)!important}.loro-product-row__delete-action{display:none}.loro-product-row--divider:after{position:absolute;right:0;bottom:0;left:0;height:1px;background:var(--loro-border-subtle);content:\"\"}.loro-product-row--pantry{grid-template-columns:4.6rem minmax(0,1fr) auto auto;gap:.9rem}.loro-product-row--compare{grid-template-columns:5.2rem minmax(8rem,1fr) minmax(14rem,2fr);border:1px solid var(--loro-border-subtle);border-radius:1rem;box-shadow:var(--loro-shadow-soft)}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.6rem minmax(0,1fr) minmax(7.8rem,auto) minmax(4.8rem,auto) 2rem}.loro-product-row--pantry.loro-product-row--no-image{grid-template-columns:minmax(0,1fr) auto auto}.loro-product-row--compare.loro-product-row--no-image{grid-template-columns:minmax(8rem,1fr) minmax(14rem,2fr)}.loro-product-row__check{display:grid;width:1.9rem;height:1.9rem;place-items:center;border:2px solid rgba(98,88,130,.45);border-radius:.45rem;background:var(--loro-surface);cursor:pointer}.loro-product-row__check--checked{border-color:transparent;background:var(--loro-primary-500)}.loro-product-row__selected-mark{display:none}.loro-product-row__image{display:grid;width:5.2rem;height:3.6rem;place-items:center;overflow:hidden;border-radius:.65rem;background:color-mix(in srgb,var(--loro-primary-500) 4%,var(--loro-surface-soft) 96%)}.loro-product-row__copy{display:grid;gap:.18rem;min-width:0;align-content:center}strong{color:var(--loro-text-strong);line-height:1.1;overflow-wrap:anywhere;font-weight:950}small{color:var(--loro-muted);line-height:1.2;font-weight:750}.loro-product-row__delete-button{display:grid;width:2.25rem;height:2.25rem;place-items:center;align-self:center;border:0;border-radius:.7rem;background:transparent;color:var(--loro-danger-text);font:inherit;font-weight:950;cursor:pointer;opacity:.64;transition:opacity .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease}.loro-product-row__delete-button:hover,.loro-product-row__delete-button.is-touch-hover,.loro-product-row__delete-button:focus-visible{opacity:1;background:color-mix(in srgb,var(--loro-danger-text) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--loro-danger-text) 14%,transparent);transform:translateY(-1px)}.loro-product-row__delete-button:focus-visible{outline:3px solid color-mix(in srgb,var(--loro-danger-text) 22%,transparent);outline-offset:2px}.loro-product-row__delete-button:active{transform:translateY(0)}.loro-product-row__total{color:var(--loro-primary-700);font-size:1.2rem;text-align:right;white-space:nowrap;min-width:0}.loro-product-row__total-stack{display:grid;justify-items:end;gap:.08rem;min-width:0;align-content:center;text-align:right}.loro-product-row__unit-price{color:var(--loro-muted-strong);font-size:.78rem;line-height:1;white-space:nowrap;font-weight:850}.loro-product-row__prices{display:grid;grid-template-columns:repeat(3,minmax(4.5rem,1fr));gap:.5rem;align-items:center;justify-items:stretch}.loro-product-row__price{display:grid;justify-items:center;gap:.2rem;color:var(--loro-primary-700);min-width:0;text-align:center;font-weight:850}.loro-product-row__price loro-image{display:block;width:2.25rem;height:1.5rem}.loro-product-row__price ::ng-deep img{width:100%;height:100%;object-fit:contain}.loro-product-row__price span{overflow-wrap:anywhere;font-size:clamp(1rem,2vw,1.1rem);line-height:1.1}.loro-product-row__price--best span{padding:.25rem .85rem;border-radius:var(--loro-radius-pill);background:color-mix(in srgb,#15803d 12%,var(--loro-surface-soft) 88%);color:#15803d}.loro-product-row__status{display:grid;width:1.55rem;height:1.55rem;place-items:center;border:1.5px solid rgba(31,157,85,.42);border-radius:50%}.loro-product-row__status--warning{border-color:#dc262661}.loro-product-row__status--expiring{border-color:color-mix(in srgb,var(--loro-warning) 58%,transparent);background:color-mix(in srgb,var(--loro-warning) 7%,transparent)}@media(min-width:1024px){.loro-product-row--basket{border:1px solid transparent;cursor:pointer}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button,.loro-product-row--basket .loro-product-row__stepper{cursor:auto}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__delete-button{cursor:pointer}}@media(max-width:479.99px)and (orientation:portrait){.loro-product-row{grid-template-columns:2.4rem 6rem minmax(8rem,1fr) minmax(8.8rem,auto) minmax(4.9rem,auto) 1.8rem;gap:.9rem;min-height:4.8rem;padding:.55rem .85rem}.loro-product-row__image{width:5.4rem;height:3.65rem}.loro-product-row--basket{grid-template-columns:2.4rem 5.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem;grid-template-rows:auto auto;column-gap:.75rem;row-gap:.38rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.4rem minmax(0,1fr) minmax(4.9rem,auto) 1.8rem}.loro-product-row--basket .loro-product-row__check,.loro-product-row--basket .loro-product-row__selected-mark{grid-column:1;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:5.4rem;height:3.65rem}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%);max-width:100%}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{grid-column:5;grid-row:1/span 2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__delete-button{grid-column:4}.loro-product-row--pantry{grid-template-columns:4.5rem minmax(0,1fr) auto auto}.loro-product-row--compare{grid-template-columns:4.5rem minmax(6rem,1fr) minmax(10rem,1.6fr)}.loro-product-row__stepper{min-width:8rem;width:8rem}.loro-product-row__total{font-size:1.25rem}}@media(max-width:640px){.loro-product-row{grid-template-columns:2.1rem 4.45rem minmax(5.6rem,1fr) minmax(8rem,auto) minmax(4.2rem,auto);gap:.65rem;min-height:4.8rem;padding:.55rem}.loro-product-row--basket{grid-template-columns:2.1rem 4.45rem minmax(0,1fr) minmax(4.2rem,auto);grid-template-rows:auto auto;border:1px solid var(--loro-surface);border-radius:.85rem;background:var(--loro-surface);overflow:hidden}.loro-product-row--basket .loro-product-row__check{display:grid;grid-column:1;grid-row:1/span 2;align-self:center;justify-self:center;width:1.8rem;height:1.8rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__selected-mark{display:none}.loro-product-row--basket .loro-product-row__image,.loro-product-row--basket .loro-product-row__copy,.loro-product-row--basket .loro-product-row__stepper,.loro-product-row--basket .loro-product-row__total-stack{grid-area:auto}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:2.1rem minmax(0,1fr) minmax(4.2rem,auto)}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy{grid-column:2}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__delete-button{display:none}.loro-product-row--basket.loro-product-row--checked{border-color:var(--loro-primary-500);background:var(--loro-product-row-selected-bg);box-shadow:var(--loro-product-row-selected-shadow)}.loro-product-row--basket.loro-product-row--dragging{box-shadow:0 1rem 2.2rem #4d2db71f}.loro-product-row__delete-action{position:absolute;inset:0 0 0 auto;z-index:0;display:grid;width:10rem;align-content:center;justify-items:center;gap:.35rem;place-items:center;padding-inline-start:1.75rem;border-radius:0 .85rem .85rem 0;background:linear-gradient(135deg,#ff4d5f,#dc2626);color:#fff;font-size:.82rem;font-weight:900;opacity:0;transition:opacity .16s ease,transform .16s ease}.loro-product-row__delete-action span{color:inherit;line-height:1}.loro-product-row--dragging+.loro-product-row__delete-action,.loro-product-row--swipe-armed+.loro-product-row__delete-action,.loro-product-row--removing+.loro-product-row__delete-action{opacity:1}.loro-product-row__image{width:4.45rem;height:3.35rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.45rem minmax(3.15rem,1fr) 1.45rem;min-height:2.05rem;border-radius:.72rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;overflow:hidden;gap:.14rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.75rem;max-width:2.35rem;overflow:hidden;text-overflow:clip;white-space:nowrap}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:2.05rem;max-width:2.35rem}.loro-product-row__total{align-self:center;font-size:clamp(.92rem,3.4vw,1.05rem);letter-spacing:0}.loro-product-row__unit-price{font-size:clamp(.62rem,2.4vw,.72rem)}.loro-product-row--basket .loro-product-row__copy strong{overflow-wrap:normal;word-break:normal;font-size:clamp(.82rem,3.6vw,.95rem);line-height:1.05}.loro-product-row--basket .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.82rem);line-height:1.05}.loro-product-row--pantry{grid-template-columns:4.8rem minmax(0,1fr) auto auto;gap:.7rem;min-height:5.8rem}.loro-product-row--pantry .loro-product-row__image{width:4.8rem;height:3.5rem}.loro-product-row--pantry .loro-product-row__copy strong{font-size:.96rem}.loro-product-row--pantry .loro-product-row__copy small{font-size:.82rem}.loro-product-row--pantry .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4.35rem minmax(6.2rem,1fr) minmax(9rem,1.55fr);gap:.6rem;min-height:5.8rem;padding:.75rem .8rem}.loro-product-row--compare .loro-product-row__image{width:4.35rem;height:3.35rem;border-radius:.8rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.88rem,3.6vw,1rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.74rem,2.9vw,.84rem)}.loro-product-row--compare .loro-product-row__prices{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;align-self:stretch;align-items:center}.loro-product-row--compare .loro-product-row__price{gap:.15rem;align-content:center}.loro-product-row--compare .loro-product-row__price loro-image{width:2rem;height:1.2rem}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.78rem,3.2vw,.92rem)}.loro-product-row--compare .loro-product-row__price--best span{padding:.22rem .5rem}}@media(max-width:430px){.loro-product-row--basket{grid-template-columns:1.9rem 3.3rem minmax(0,1fr) minmax(3.35rem,auto);gap:.45rem;min-height:4.3rem;padding:.45rem}.loro-product-row--basket .loro-product-row__check{width:1.6rem;height:1.6rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.9rem minmax(0,1fr) minmax(3.35rem,auto)}.loro-product-row--basket .loro-product-row__image{width:3.3rem;height:2.75rem;border-radius:.55rem}.loro-product-row--basket .loro-product-row__stepper{min-width:min(10rem,100%);width:min(10rem,100%)}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.28rem minmax(3.05rem,1fr) 1.28rem;min-height:2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value{min-width:0;gap:.1rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.65rem;max-width:2.2rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper-kg input{min-width:1.95rem;max-width:2.2rem}.loro-product-row--basket .loro-product-row__copy strong{font-size:.78rem}.loro-product-row--basket .loro-product-row__copy small{font-size:.68rem}.loro-product-row--basket .loro-product-row__total{font-size:.98rem}.loro-product-row--compare{grid-template-columns:4rem minmax(5.2rem,1fr) minmax(8.1rem,1.45fr);gap:.5rem;padding:.7rem}.loro-product-row--compare .loro-product-row__image{width:4rem;height:3.1rem}.loro-product-row--compare .loro-product-row__copy strong{font-size:clamp(.82rem,3.8vw,.94rem)}.loro-product-row--compare .loro-product-row__copy small{font-size:clamp(.7rem,3vw,.8rem)}.loro-product-row--compare .loro-product-row__price span{font-size:clamp(.74rem,3.2vw,.86rem)}.loro-product-row--compare .loro-product-row__price loro-image{width:1.9rem;height:1.1rem}}@media(max-width:380px){.loro-product-row--basket{grid-template-columns:1.85rem 3.15rem minmax(0,1fr) minmax(3.25rem,auto);grid-template-rows:auto auto;column-gap:.32rem;row-gap:.28rem;min-height:4.75rem;padding:.5rem}.loro-product-row--basket .loro-product-row__check{grid-column:1;grid-row:1/span 2;align-self:center;width:1.55rem;height:1.55rem}.loro-product-row--basket.loro-product-row--no-image{grid-template-columns:1.85rem minmax(0,1fr) minmax(3.25rem,auto)}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__copy,.loro-product-row--basket.loro-product-row--no-image .loro-product-row__stepper{grid-column:2}.loro-product-row--basket.loro-product-row--no-image .loro-product-row__total-stack{grid-column:3}.loro-product-row--basket .loro-product-row__image{grid-column:2;grid-row:1/span 2;align-self:center;width:3.15rem;height:2.65rem}.loro-product-row--basket .loro-product-row__copy{grid-column:3;grid-row:1;align-self:end;padding-inline-end:.25rem}.loro-product-row--basket .loro-product-row__stepper{grid-column:3;grid-row:2;align-self:start;min-width:min(10rem,100%);width:min(10rem,100%)}.loro-product-row--basket .loro-product-row__total-stack{grid-column:4;grid-row:1/span 2;align-self:center}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input--stepper{grid-template-columns:1.35rem minmax(3.25rem,1fr) 1.35rem;min-height:1.85rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper input{min-width:1.55rem;max-width:2rem;font-size:.82rem}:host ::ng-deep .loro-product-row--basket .loro-product-row__stepper .loro-input__stepper-value span{min-width:.95rem;font-size:.78rem}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], imageName: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageName", required: false }] }], quantityLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "quantityLabel", required: false }] }], quantity: [{ type: i0.Input, args: [{ isSignal: true, alias: "quantity", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], prices: [{ type: i0.Input, args: [{ isSignal: true, alias: "prices", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], quantityChange: [{ type: i0.Output, args: ["quantityChange"] }], increment: [{ type: i0.Output, args: ["increment"] }], decrement: [{ type: i0.Output, args: ["decrement"] }], rowRemove: [{ type: i0.Output, args: ["rowRemove"] }] } });
 
 class LoroProductSection {
@@ -2799,73 +2080,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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: 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$1], 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 +2110,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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: 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$1], 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 {
@@ -2964,11 +2141,11 @@ class LoroProfileHero {
         return `${this.avatarIconSize()}px`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroProfileHero, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroProfileHero, isStandalone: true, selector: "loro-profile-hero", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, firstName: { classPropertyName: "firstName", publicName: "firstName", isSignal: true, isRequired: false, transformFunction: null }, eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null }, greeting: { classPropertyName: "greeting", publicName: "greeting", isSignal: true, isRequired: false, transformFunction: null }, profileImageSrc: { classPropertyName: "profileImageSrc", publicName: "profileImageSrc", isSignal: true, isRequired: false, transformFunction: null }, profileImageAlt: { classPropertyName: "profileImageAlt", publicName: "profileImageAlt", isSignal: true, isRequired: false, transformFunction: null }, avatarIconName: { classPropertyName: "avatarIconName", publicName: "avatarIconName", isSignal: true, isRequired: false, transformFunction: null }, avatarIconSize: { classPropertyName: "avatarIconSize", publicName: "avatarIconSize", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, avatarSize: { classPropertyName: "avatarSize", publicName: "avatarSize", isSignal: true, isRequired: false, transformFunction: null }, avatarRadius: { classPropertyName: "avatarRadius", publicName: "avatarRadius", isSignal: true, isRequired: false, transformFunction: null }, parrotImageName: { classPropertyName: "parrotImageName", publicName: "parrotImageName", isSignal: true, isRequired: false, transformFunction: null }, parrotImageAlt: { classPropertyName: "parrotImageAlt", publicName: "parrotImageAlt", isSignal: true, isRequired: false, transformFunction: null }, parrotMobileWidth: { classPropertyName: "parrotMobileWidth", publicName: "parrotMobileWidth", isSignal: true, isRequired: false, transformFunction: null }, parrotWebWidth: { classPropertyName: "parrotWebWidth", publicName: "parrotWebWidth", isSignal: true, isRequired: false, transformFunction: null }, eyebrowFontSize: { classPropertyName: "eyebrowFontSize", publicName: "eyebrowFontSize", isSignal: true, isRequired: false, transformFunction: null }, titleFontSize: { classPropertyName: "titleFontSize", publicName: "titleFontSize", isSignal: true, isRequired: false, transformFunction: null }, greetingFontSize: { classPropertyName: "greetingFontSize", publicName: "greetingFontSize", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--loro-profile-hero-eyebrow-size": "eyebrowFontSize()", "style.--loro-profile-hero-title-size": "titleFontSize()", "style.--loro-profile-hero-greeting-size": "greetingFontSize()", "style.--loro-profile-hero-avatar-size": "avatarSize()", "style.--loro-profile-hero-avatar-radius": "avatarRadius()", "style.--loro-profile-hero-avatar-icon-size": "avatarIconCssSize()", "style.--loro-profile-hero-parrot-mobile-width": "parrotMobileWidth()", "style.--loro-profile-hero-parrot-desktop-width": "parrotWebWidth()" } }, ngImport: i0, template: "<section\n  class=\"loro-profile-hero\"\n  [class.loro-profile-hero--flat]=\"!elevated()\"\n  [class.loro-profile-hero--compact]=\"variant() === 'compact'\"\n  [class.loro-profile-hero--large]=\"variant() === 'large'\"\n  [class.loro-profile-hero--support]=\"variant() === 'support'\"\n  aria-label=\"Perfil de usuario\"\n>\n  @if (variant() === 'support') {\n    <div class=\"loro-profile-hero__support-art\" aria-hidden=\"true\">\n      <loro-image [name]=\"parrotImageName()\" [alt]=\"parrotImageAlt()\" width=\"100%\" />\n    </div>\n  }\n\n  <div class=\"loro-profile-hero__content\">\n    @if (variant() !== 'support') {\n      <div class=\"loro-profile-hero__avatar\">\n        @if (profileImageSrc()) {\n          <img\n            class=\"loro-profile-hero__profile-image\"\n            [src]=\"profileImageSrc()!\"\n            [alt]=\"profileImageAlt()\"\n            loading=\"lazy\"\n          />\n        } @else {\n          <loro-icon\n            [name]=\"avatarIconName()\"\n            class=\"loro-profile-hero__avatar-icon\"\n            [size]=\"avatarIconSize()\"\n            [alt]=\"avatarAlt()\"\n          />\n        }\n      </div>\n    }\n\n    <div class=\"loro-profile-hero__copy\">\n      @if (variant() !== 'support' && eyebrow()) {\n        <p class=\"loro-profile-hero__eyebrow\">\n          {{ eyebrow() }}\n        </p>\n      }\n\n      <h1 class=\"loro-profile-hero__title\">\n        {{ firstName() }}\n      </h1>\n\n      <p class=\"loro-profile-hero__greeting\">\n        {{ greeting() }}\n      </p>\n    </div>\n  </div>\n\n  @if (variant() !== 'support') {\n    <div class=\"loro-profile-hero__art\" aria-hidden=\"true\">\n      <loro-image\n        [name]=\"parrotImageName()\"\n        [alt]=\"parrotImageAlt()\"\n        width=\"100%\"\n        height=\"100%\"\n        fit=\"contain\"\n      />\n    </div>\n  }\n</section>\n", styles: [":host{display:block;width:100%;container-type:inline-size;--loro-profile-hero-eyebrow-size: clamp(.75rem, 2.8cqi, .95rem);--loro-profile-hero-title-size: clamp(1.5rem, 6.4cqi, 2.45rem);--loro-profile-hero-greeting-size: clamp(.8rem, 3.2cqi, 1.05rem);--loro-profile-hero-avatar-size: 2.75rem;--loro-profile-hero-avatar-radius: .625rem;--loro-profile-hero-avatar-icon-size: 1.5rem;--loro-profile-hero-parrot-mobile-width: 34%;--loro-profile-hero-parrot-desktop-width: 34%}.loro-profile-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(6.5rem,var(--loro-profile-hero-parrot-mobile-width));align-items:stretch;min-height:8.5rem;overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:.875rem;background:var(--loro-surface-elevated);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);font-family:var(--loro-font-brand)}.loro-profile-hero--flat{box-shadow:none}.loro-profile-hero__content{position:relative;z-index:2;display:grid;grid-template-columns:min-content minmax(0,1fr);align-items:center;gap:.875rem;min-width:0;padding:1rem 2rem}.loro-profile-hero__avatar{display:grid;width:var(--loro-profile-hero-avatar-size);height:var(--loro-profile-hero-avatar-size);place-items:center;overflow:hidden;border-radius:var(--loro-profile-hero-avatar-radius);background:var(--loro-brand-tint-surface);box-shadow:var(--loro-shadow-soft)}.loro-profile-hero__avatar-icon{width:var(--loro-profile-hero-avatar-icon-size);height:var(--loro-profile-hero-avatar-icon-size)}.loro-profile-hero__profile-image{display:block;width:100%;height:100%;object-fit:cover}.loro-profile-hero__copy{min-width:0}.loro-profile-hero__eyebrow,.loro-profile-hero__title,.loro-profile-hero__greeting{margin:0}.loro-profile-hero__eyebrow{color:var(--loro-muted-strong);font-size:var(--loro-profile-hero-eyebrow-size);font-weight:500;line-height:1.15;letter-spacing:-.01em}.loro-profile-hero__title{max-width:100%;margin-top:.35rem;overflow-wrap:anywhere;color:var(--loro-text-strong);font-size:var(--loro-profile-hero-title-size);font-weight:800;line-height:.95;letter-spacing:-.04em}.loro-profile-hero__greeting{max-width:11rem;margin-top:.45rem;color:var(--loro-muted);font-size:var(--loro-profile-hero-greeting-size);font-weight:500;line-height:1.2;letter-spacing:-.025em}.loro-profile-hero__art{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:flex-end;min-width:0;height:100%;overflow:hidden;pointer-events:none}.loro-profile-hero__art loro-image{display:block;align-self:stretch;width:100%;height:100%;max-width:100%;max-height:100%}.loro-profile-hero__art ::ng-deep img,.loro-profile-hero__art ::ng-deep picture,.loro-profile-hero__art ::ng-deep svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:right bottom}.loro-profile-hero--compact{min-height:7.5rem}.loro-profile-hero--large{min-height:10rem}.loro-profile-hero--support{grid-template-columns:minmax(6rem,11rem) minmax(0,1fr);min-height:9rem}.loro-profile-hero--support .loro-profile-hero__content{grid-template-columns:minmax(0,1fr);padding-left:0}.loro-profile-hero--support .loro-profile-hero__greeting{max-width:none}.loro-profile-hero__support-art{display:grid;align-items:end;min-width:0;overflow:hidden;padding-left:1rem}.loro-profile-hero__support-art ::ng-deep img{width:100%;height:100%;object-fit:contain;object-position:left bottom}@container (min-width: 42rem){.loro-profile-hero{min-height:11rem;border-radius:.875rem}.loro-profile-hero__avatar{width:4.25rem;height:4.25rem;border-radius:.875rem}.loro-profile-hero__avatar-icon{width:1.875rem;height:1.875rem}.loro-profile-hero__greeting{max-width:none}.loro-profile-hero--compact{min-height:9.25rem}.loro-profile-hero--large{min-height:12.5rem}}@container (max-width: 27rem){.loro-profile-hero{grid-template-columns:minmax(0,1fr) minmax(5.75rem,32%);min-height:7.15rem}.loro-profile-hero__avatar{width:2.25rem;height:2.25rem;border-radius:.5rem}.loro-profile-hero__avatar-icon{width:1.25rem;height:1.25rem}.loro-profile-hero__title{margin-top:.25rem}.loro-profile-hero__greeting{max-width:7.4rem;margin-top:.3rem}.loro-profile-hero--compact{min-height:6.75rem}.loro-profile-hero--large{min-height:8.5rem}.loro-profile-hero--support{grid-template-columns:6.6rem minmax(0,1fr);min-height:7.75rem}.loro-profile-hero--support .loro-profile-hero__content{padding:1rem 1rem 1rem 0}}@container (max-width: 21rem){.loro-profile-hero{grid-template-columns:minmax(0,1fr) 5.5rem}.loro-profile-hero__avatar{width:2rem;height:2rem}.loro-profile-hero__greeting{max-width:6.8rem}}\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: LoroProfileHero, isStandalone: true, selector: "loro-profile-hero", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, firstName: { classPropertyName: "firstName", publicName: "firstName", isSignal: true, isRequired: false, transformFunction: null }, eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null }, greeting: { classPropertyName: "greeting", publicName: "greeting", isSignal: true, isRequired: false, transformFunction: null }, profileImageSrc: { classPropertyName: "profileImageSrc", publicName: "profileImageSrc", isSignal: true, isRequired: false, transformFunction: null }, profileImageAlt: { classPropertyName: "profileImageAlt", publicName: "profileImageAlt", isSignal: true, isRequired: false, transformFunction: null }, avatarIconName: { classPropertyName: "avatarIconName", publicName: "avatarIconName", isSignal: true, isRequired: false, transformFunction: null }, avatarIconSize: { classPropertyName: "avatarIconSize", publicName: "avatarIconSize", isSignal: true, isRequired: false, transformFunction: null }, avatarAlt: { classPropertyName: "avatarAlt", publicName: "avatarAlt", isSignal: true, isRequired: false, transformFunction: null }, avatarSize: { classPropertyName: "avatarSize", publicName: "avatarSize", isSignal: true, isRequired: false, transformFunction: null }, avatarRadius: { classPropertyName: "avatarRadius", publicName: "avatarRadius", isSignal: true, isRequired: false, transformFunction: null }, parrotImageName: { classPropertyName: "parrotImageName", publicName: "parrotImageName", isSignal: true, isRequired: false, transformFunction: null }, parrotImageAlt: { classPropertyName: "parrotImageAlt", publicName: "parrotImageAlt", isSignal: true, isRequired: false, transformFunction: null }, parrotMobileWidth: { classPropertyName: "parrotMobileWidth", publicName: "parrotMobileWidth", isSignal: true, isRequired: false, transformFunction: null }, parrotWebWidth: { classPropertyName: "parrotWebWidth", publicName: "parrotWebWidth", isSignal: true, isRequired: false, transformFunction: null }, eyebrowFontSize: { classPropertyName: "eyebrowFontSize", publicName: "eyebrowFontSize", isSignal: true, isRequired: false, transformFunction: null }, titleFontSize: { classPropertyName: "titleFontSize", publicName: "titleFontSize", isSignal: true, isRequired: false, transformFunction: null }, greetingFontSize: { classPropertyName: "greetingFontSize", publicName: "greetingFontSize", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--loro-profile-hero-eyebrow-size": "eyebrowFontSize()", "style.--loro-profile-hero-title-size": "titleFontSize()", "style.--loro-profile-hero-greeting-size": "greetingFontSize()", "style.--loro-profile-hero-avatar-size": "avatarSize()", "style.--loro-profile-hero-avatar-radius": "avatarRadius()", "style.--loro-profile-hero-avatar-icon-size": "avatarIconCssSize()", "style.--loro-profile-hero-parrot-mobile-width": "parrotMobileWidth()", "style.--loro-profile-hero-parrot-desktop-width": "parrotWebWidth()" } }, ngImport: i0, template: "<section\n  class=\"loro-profile-hero\"\n  [class.loro-profile-hero--flat]=\"!elevated()\"\n  [class.loro-profile-hero--compact]=\"variant() === 'compact'\"\n  [class.loro-profile-hero--large]=\"variant() === 'large'\"\n  [class.loro-profile-hero--support]=\"variant() === 'support'\"\n  aria-label=\"Perfil de usuario\"\n>\n  @if (variant() === 'support') {\n    <div class=\"loro-profile-hero__support-art\" aria-hidden=\"true\">\n      <loro-image [name]=\"parrotImageName()\" [alt]=\"parrotImageAlt()\" width=\"100%\" />\n    </div>\n  }\n\n  <div class=\"loro-profile-hero__content\">\n    @if (variant() !== 'support') {\n      <div class=\"loro-profile-hero__avatar\">\n        @if (profileImageSrc()) {\n          <img\n            class=\"loro-profile-hero__profile-image\"\n            [src]=\"profileImageSrc()!\"\n            [alt]=\"profileImageAlt()\"\n            loading=\"lazy\"\n          />\n        } @else {\n          <loro-icon\n            [name]=\"avatarIconName()\"\n            class=\"loro-profile-hero__avatar-icon\"\n            [size]=\"avatarIconSize()\"\n            [alt]=\"avatarAlt()\"\n          />\n        }\n      </div>\n    }\n\n    <div class=\"loro-profile-hero__copy\">\n      @if (variant() !== 'support' && eyebrow()) {\n        <p class=\"loro-profile-hero__eyebrow\">\n          {{ eyebrow() }}\n        </p>\n      }\n\n      <h1 class=\"loro-profile-hero__title\">\n        {{ firstName() }}\n      </h1>\n\n      <p class=\"loro-profile-hero__greeting\">\n        {{ greeting() }}\n      </p>\n    </div>\n  </div>\n\n  @if (variant() !== 'support') {\n    <div class=\"loro-profile-hero__art\" aria-hidden=\"true\">\n      <loro-image\n        [name]=\"parrotImageName()\"\n        [alt]=\"parrotImageAlt()\"\n        width=\"100%\"\n        height=\"100%\"\n        fit=\"contain\"\n      />\n    </div>\n  }\n</section>\n", styles: [":host{display:block;width:100%;container-type:inline-size;--loro-profile-hero-eyebrow-size: clamp(.75rem, 2.8cqi, .95rem);--loro-profile-hero-title-size: clamp(1.5rem, 6.4cqi, 2.45rem);--loro-profile-hero-greeting-size: clamp(.8rem, 3.2cqi, 1.05rem);--loro-profile-hero-avatar-size: 2.75rem;--loro-profile-hero-avatar-radius: .625rem;--loro-profile-hero-avatar-icon-size: 1.5rem;--loro-profile-hero-parrot-mobile-width: 34%;--loro-profile-hero-parrot-desktop-width: 34%}.loro-profile-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(6.5rem,var(--loro-profile-hero-parrot-mobile-width));align-items:stretch;min-height:8.5rem;overflow:hidden;border:1px solid var(--loro-border-subtle);border-radius:.875rem;background:var(--loro-surface-elevated);box-shadow:var(--loro-shadow-soft);color:var(--loro-text);font-family:var(--loro-font-brand)}.loro-profile-hero--flat{box-shadow:none}.loro-profile-hero__content{position:relative;z-index:2;display:grid;grid-template-columns:min-content minmax(0,1fr);align-items:center;gap:.875rem;min-width:0;padding:1rem 2rem}.loro-profile-hero__avatar{display:grid;width:var(--loro-profile-hero-avatar-size);height:var(--loro-profile-hero-avatar-size);place-items:center;overflow:hidden;border-radius:var(--loro-profile-hero-avatar-radius);background:var(--loro-brand-tint-surface);box-shadow:var(--loro-shadow-soft)}.loro-profile-hero__avatar-icon{width:var(--loro-profile-hero-avatar-icon-size);height:var(--loro-profile-hero-avatar-icon-size)}.loro-profile-hero__profile-image{display:block;width:100%;height:100%;object-fit:cover}.loro-profile-hero__copy{min-width:0}.loro-profile-hero__eyebrow,.loro-profile-hero__title,.loro-profile-hero__greeting{margin:0}.loro-profile-hero__eyebrow{color:var(--loro-muted-strong);font-size:var(--loro-profile-hero-eyebrow-size);font-weight:500;line-height:1.15;letter-spacing:-.01em}.loro-profile-hero__title{max-width:100%;margin-top:.35rem;overflow-wrap:anywhere;color:var(--loro-text-strong);font-size:var(--loro-profile-hero-title-size);font-weight:800;line-height:.95;letter-spacing:-.04em}.loro-profile-hero__greeting{max-width:11rem;margin-top:.45rem;color:var(--loro-muted);font-size:var(--loro-profile-hero-greeting-size);font-weight:500;line-height:1.2;letter-spacing:-.025em}.loro-profile-hero__art{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:flex-end;min-width:0;height:100%;overflow:hidden;pointer-events:none}.loro-profile-hero__art loro-image{display:block;align-self:stretch;width:100%;height:100%;max-width:100%;max-height:100%}.loro-profile-hero__art ::ng-deep img,.loro-profile-hero__art ::ng-deep picture,.loro-profile-hero__art ::ng-deep svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:right bottom}.loro-profile-hero--compact{min-height:7.5rem}.loro-profile-hero--large{min-height:10rem}.loro-profile-hero--support{grid-template-columns:minmax(6rem,11rem) minmax(0,1fr);min-height:9rem}.loro-profile-hero--support .loro-profile-hero__content{grid-template-columns:minmax(0,1fr);padding-left:0}.loro-profile-hero--support .loro-profile-hero__greeting{max-width:none}.loro-profile-hero__support-art{display:grid;align-items:end;min-width:0;overflow:hidden;padding-left:1rem}.loro-profile-hero__support-art ::ng-deep img{width:100%;height:100%;object-fit:contain;object-position:left bottom}@container (min-width: 42rem){.loro-profile-hero{min-height:11rem;border-radius:.875rem}.loro-profile-hero__avatar{width:4.25rem;height:4.25rem;border-radius:.875rem}.loro-profile-hero__avatar-icon{width:1.875rem;height:1.875rem}.loro-profile-hero__greeting{max-width:none}.loro-profile-hero--compact{min-height:9.25rem}.loro-profile-hero--large{min-height:12.5rem}}@container (max-width: 27rem){.loro-profile-hero{grid-template-columns:minmax(0,1fr) minmax(5.75rem,32%);min-height:7.15rem}.loro-profile-hero__avatar{width:2.25rem;height:2.25rem;border-radius:.5rem}.loro-profile-hero__avatar-icon{width:1.25rem;height:1.25rem}.loro-profile-hero__title{margin-top:.25rem}.loro-profile-hero__greeting{max-width:7.4rem;margin-top:.3rem}.loro-profile-hero--compact{min-height:6.75rem}.loro-profile-hero--large{min-height:8.5rem}.loro-profile-hero--support{grid-template-columns:6.6rem minmax(0,1fr);min-height:7.75rem}.loro-profile-hero--support .loro-profile-hero__content{padding:1rem 1rem 1rem 0}}@container (max-width: 21rem){.loro-profile-hero{grid-template-columns:minmax(0,1fr) 5.5rem}.loro-profile-hero__avatar{width:2rem;height:2rem}.loro-profile-hero__greeting{max-width:6.8rem}}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, 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: LoroProfileHero, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-profile-hero', standalone: true, imports: [LoroIcon, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'loro-profile-hero', standalone: true, imports: [LoroIcon$1, LoroImage], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[style.--loro-profile-hero-eyebrow-size]': 'eyebrowFontSize()',
                         '[style.--loro-profile-hero-title-size]': 'titleFontSize()',
                         '[style.--loro-profile-hero-greeting-size]': 'greetingFontSize()',
@@ -2992,79 +2169,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$1, 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$1, 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 +2185,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 +2205,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$1, 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$1, 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 +2220,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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: 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$1], 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 {
@@ -3348,11 +2289,11 @@ class LoroAlert {
             : 'polite';
     }, ...(ngDevMode ? [{ debugName: "resolvedAnnouncement" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: LoroAlert, isStandalone: true, selector: "loro-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, announcement: { classPropertyName: "announcement", publicName: "announcement", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", dismissed: "dismissed" }, host: { properties: { "attr.role": "role()", "attr.aria-live": "ariaLive()", "attr.aria-atomic": "ariaLive() ? \"true\" : null", "attr.tabindex": "focusable() ? -1 : null", "class.loro-alert--focusable": "focusable()", "attr.data-variant": "variant()" } }, ngImport: i0, template: "<aside\n  class=\"loro-alert\"\n  [class]=\"'loro-alert loro-alert--' + variant()\"\n  [attr.role]=\"role()\"\n  [attr.aria-live]=\"ariaLive()\"\n  [attr.aria-atomic]=\"role() ? 'true' : null\"\n>\n  <span class=\"loro-alert__icon\" aria-hidden=\"true\">\n    <loro-icon\n      [name]=\"resolvedIcon()\"\n      [size]=\"20\"\n      [alt]=\"''\"\n      [color]=\"resolvedIconColor()\"\n    />\n  </span>\n\n  <div class=\"loro-alert__content\">\n    @if (title()) {\n      <strong class=\"loro-alert__title\">{{ title() }}</strong>\n    }\n\n    <div class=\"loro-alert__message\">\n      @if (message()) {\n        <p>{{ message() }}</p>\n      }\n      <ng-content />\n    </div>\n\n    @if (actionLabel()) {\n      <div class=\"loro-alert__actions\">\n        <button\n          type=\"button\"\n          class=\"loro-alert__action\"\n          (click)=\"action.emit()\"\n        >\n          {{ actionLabel() }}\n        </button>\n      </div>\n    }\n\n    <ng-content select=\"[loroAlertActions]\" />\n  </div>\n\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      class=\"loro-alert__dismiss\"\n      [attr.aria-label]=\"dismissLabel()\"\n      (click)=\"dismissed.emit()\"\n    >\n      <loro-icon\n        class=\"loro-alert__dismiss-icon\"\n        name=\"plus\"\n        [size]=\"20\"\n        [alt]=\"''\"\n        [color]=\"'currentColor'\"\n        aria-hidden=\"true\"\n      />\n    </button>\n  }\n</aside>\n", styles: [":host{display:block;min-width:0;font-family:var(--loro-font-brand, system-ui, sans-serif)}.loro-alert{--alert-background: color-mix(in srgb, var(--loro-primary-500) 8%, var(--loro-surface));--alert-border: color-mix(in srgb, var(--loro-primary-500) 28%, transparent);--alert-foreground: var(--loro-text);--alert-title: var(--loro-text-strong);--alert-message: color-mix(in srgb, var(--loro-text) 92%, var(--loro-muted));--alert-focus: color-mix(in srgb, var(--loro-primary-500) 34%, transparent);--alert-hover: color-mix(in srgb, var(--alert-border) 12%, var(--loro-surface));position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:.625rem;width:100%;min-width:0;padding:.5rem;overflow-wrap:anywhere;border:1px solid var(--alert-border);border-radius:.75rem;background:var(--alert-background);color:var(--alert-foreground)}.loro-alert__accent{position:absolute;inset-block:.5rem;inset-inline-start:0;width:.25rem;border-radius:0 999px 999px 0;background:currentColor}.loro-alert__icon{display:inline-grid;width:1.5rem;min-width:1.5rem;height:1.5rem;place-items:center;margin-block-start:.0625rem;color:currentColor}.loro-alert__content{display:grid;min-width:0;gap:.25rem}.loro-alert__title{display:block;margin:0;color:var(--alert-title);font-size:1rem;font-weight:800;line-height:1.3}.loro-alert__message{min-width:0;color:var(--alert-message);font-size:1rem;font-weight:500;line-height:1.45}.loro-alert__message :where(p){margin:0}.loro-alert__message :where(a){color:currentColor;font-weight:700;text-decoration-thickness:.125em;text-underline-offset:.16em}.loro-alert__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:.5rem}.loro-alert__action,.loro-alert__dismiss{appearance:none;border:1px solid currentColor;background:transparent;color:currentColor;font:inherit;font-weight:700;cursor:pointer}.loro-alert__action{min-height:2.5rem;padding:.5rem .875rem;border-radius:.5rem}.loro-alert__dismiss{display:inline-grid;width:2.5rem;height:2.5rem;place-items:center;margin:-.5rem -.5rem -.5rem 0;padding:0;border-color:transparent;border-radius:999px}.loro-alert__dismiss-icon{transform:rotate(45deg)}.loro-alert__action:hover,.loro-alert__dismiss:hover{background:var(--alert-hover)}.loro-alert__action:focus-visible,.loro-alert__dismiss:focus-visible,.loro-alert__message :where(a):focus-visible{outline:3px solid var(--alert-focus);outline-offset:3px}.loro-alert--neutral{--alert-background: color-mix(in srgb, var(--loro-surface-muted) 72%, var(--loro-surface));--alert-border: color-mix(in srgb, var(--loro-muted) 34%, transparent);--alert-foreground: var(--loro-text);--alert-title: var(--loro-text-strong);--alert-message: color-mix(in srgb, var(--loro-text) 82%, var(--loro-muted));--alert-focus: color-mix(in srgb, var(--loro-muted-strong) 36%, transparent)}.loro-alert--info{--alert-background: color-mix(in srgb, var(--loro-primary-500) 8%, var(--loro-surface));--alert-border: color-mix(in srgb, var(--loro-primary-500) 30%, transparent);--alert-foreground: var(--loro-text);--alert-title: var(--loro-text-strong);--alert-message: color-mix(in srgb, var(--loro-text) 88%, var(--loro-muted));--alert-focus: color-mix(in srgb, var(--loro-primary-500) 34%, transparent)}.loro-alert--success{--alert-background: color-mix(in srgb, #16a34a 10%, var(--loro-surface));--alert-border: color-mix(in srgb, #16a34a 34%, transparent);--alert-foreground: #166534;--alert-title: color-mix(in srgb, #166534 80%, var(--loro-text-strong));--alert-message: color-mix(in srgb, #166534 72%, var(--loro-text));--alert-focus: color-mix(in srgb, #16a34a 34%, transparent)}.loro-alert--warning{--alert-background: color-mix(in srgb, #f59e0b 11%, var(--loro-surface));--alert-border: color-mix(in srgb, #d97706 34%, transparent);--alert-foreground: #92400e;--alert-title: color-mix(in srgb, #78350f 82%, var(--loro-text-strong));--alert-message: color-mix(in srgb, #78350f 76%, var(--loro-text));--alert-focus: color-mix(in srgb, #d97706 34%, transparent)}.loro-alert--error{--alert-background: color-mix(in srgb, var(--loro-danger-surface) 82%, var(--loro-surface));--alert-border: color-mix(in srgb, var(--loro-danger-text) 62%, transparent);--alert-foreground: var(--loro-danger-text);--alert-title: color-mix(in srgb, var(--loro-danger-text) 86%, var(--loro-text-strong));--alert-message: color-mix(in srgb, var(--loro-danger-text) 78%, var(--loro-text));--alert-focus: color-mix(in srgb, var(--loro-danger-text) 34%, transparent)}html[data-theme=dark] .loro-alert{--alert-hover: color-mix(in srgb, var(--alert-border) 14%, var(--loro-surface-elevated))}html[data-theme=dark] .loro-alert--error{--alert-background: color-mix(in srgb, var(--loro-danger-surface) 58%, var(--loro-surface));--alert-border: color-mix(in srgb, var(--loro-danger-text) 42%, var(--loro-border-subtle));--alert-title: #ffd7d7;--alert-message: color-mix(in srgb, var(--loro-danger-text) 58%, var(--loro-text))}@media(forced-colors:active){.loro-alert{border-color:CanvasText;background:Canvas;color:CanvasText;forced-color-adjust:auto}.loro-alert__accent{background:CanvasText}.loro-alert__action,.loro-alert__dismiss{border-color:ButtonText;color:ButtonText}}@media(prefers-reduced-motion:reduce){.loro-alert *,.loro-alert *:before,.loro-alert *:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}\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: LoroAlert, isStandalone: true, selector: "loro-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, announcement: { classPropertyName: "announcement", publicName: "announcement", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", dismissed: "dismissed" }, host: { properties: { "attr.role": "role()", "attr.aria-live": "ariaLive()", "attr.aria-atomic": "ariaLive() ? \"true\" : null", "attr.tabindex": "focusable() ? -1 : null", "class.loro-alert--focusable": "focusable()", "attr.data-variant": "variant()" } }, ngImport: i0, template: "<aside\n  class=\"loro-alert\"\n  [class]=\"'loro-alert loro-alert--' + variant()\"\n  [attr.role]=\"role()\"\n  [attr.aria-live]=\"ariaLive()\"\n  [attr.aria-atomic]=\"role() ? 'true' : null\"\n>\n  <span class=\"loro-alert__icon\" aria-hidden=\"true\">\n    <loro-icon\n      [name]=\"resolvedIcon()\"\n      [size]=\"20\"\n      [alt]=\"''\"\n      [color]=\"resolvedIconColor()\"\n    />\n  </span>\n\n  <div class=\"loro-alert__content\">\n    @if (title()) {\n      <strong class=\"loro-alert__title\">{{ title() }}</strong>\n    }\n\n    <div class=\"loro-alert__message\">\n      @if (message()) {\n        <p>{{ message() }}</p>\n      }\n      <ng-content />\n    </div>\n\n    @if (actionLabel()) {\n      <div class=\"loro-alert__actions\">\n        <button\n          type=\"button\"\n          class=\"loro-alert__action\"\n          (click)=\"action.emit()\"\n        >\n          {{ actionLabel() }}\n        </button>\n      </div>\n    }\n\n    <ng-content select=\"[loroAlertActions]\" />\n  </div>\n\n  @if (dismissible()) {\n    <button\n      type=\"button\"\n      class=\"loro-alert__dismiss\"\n      [attr.aria-label]=\"dismissLabel()\"\n      (click)=\"dismissed.emit()\"\n    >\n      <loro-icon\n        class=\"loro-alert__dismiss-icon\"\n        name=\"plus\"\n        [size]=\"20\"\n        [alt]=\"''\"\n        [color]=\"'currentColor'\"\n        aria-hidden=\"true\"\n      />\n    </button>\n  }\n</aside>\n", styles: [":host{display:block;min-width:0;font-family:var(--loro-font-brand, system-ui, sans-serif)}.loro-alert{--alert-background: color-mix(in srgb, var(--loro-primary-500) 8%, var(--loro-surface));--alert-border: color-mix(in srgb, var(--loro-primary-500) 28%, transparent);--alert-foreground: var(--loro-text);--alert-title: var(--loro-text-strong);--alert-message: color-mix(in srgb, var(--loro-text) 92%, var(--loro-muted));--alert-focus: color-mix(in srgb, var(--loro-primary-500) 34%, transparent);--alert-hover: color-mix(in srgb, var(--alert-border) 12%, var(--loro-surface));position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:.625rem;width:100%;min-width:0;padding:.5rem;overflow-wrap:anywhere;border:1px solid var(--alert-border);border-radius:.75rem;background:var(--alert-background);color:var(--alert-foreground)}.loro-alert__accent{position:absolute;inset-block:.5rem;inset-inline-start:0;width:.25rem;border-radius:0 999px 999px 0;background:currentColor}.loro-alert__icon{display:inline-grid;width:1.5rem;min-width:1.5rem;height:1.5rem;place-items:center;margin-block-start:.0625rem;color:currentColor}.loro-alert__content{display:grid;min-width:0;gap:.25rem}.loro-alert__title{display:block;margin:0;color:var(--alert-title);font-size:1rem;font-weight:800;line-height:1.3}.loro-alert__message{min-width:0;color:var(--alert-message);font-size:1rem;font-weight:500;line-height:1.45}.loro-alert__message :where(p){margin:0}.loro-alert__message :where(a){color:currentColor;font-weight:700;text-decoration-thickness:.125em;text-underline-offset:.16em}.loro-alert__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-start:.5rem}.loro-alert__action,.loro-alert__dismiss{appearance:none;border:1px solid currentColor;background:transparent;color:currentColor;font:inherit;font-weight:700;cursor:pointer}.loro-alert__action{min-height:2.5rem;padding:.5rem .875rem;border-radius:.5rem}.loro-alert__dismiss{display:inline-grid;width:2.5rem;height:2.5rem;place-items:center;margin:-.5rem -.5rem -.5rem 0;padding:0;border-color:transparent;border-radius:999px}.loro-alert__dismiss-icon{transform:rotate(45deg)}.loro-alert__action:hover,.loro-alert__dismiss:hover{background:var(--alert-hover)}.loro-alert__action:focus-visible,.loro-alert__dismiss:focus-visible,.loro-alert__message :where(a):focus-visible{outline:3px solid var(--alert-focus);outline-offset:3px}.loro-alert--neutral{--alert-background: color-mix(in srgb, var(--loro-surface-muted) 72%, var(--loro-surface));--alert-border: color-mix(in srgb, var(--loro-muted) 34%, transparent);--alert-foreground: var(--loro-text);--alert-title: var(--loro-text-strong);--alert-message: color-mix(in srgb, var(--loro-text) 82%, var(--loro-muted));--alert-focus: color-mix(in srgb, var(--loro-muted-strong) 36%, transparent)}.loro-alert--info{--alert-background: color-mix(in srgb, var(--loro-primary-500) 8%, var(--loro-surface));--alert-border: color-mix(in srgb, var(--loro-primary-500) 30%, transparent);--alert-foreground: var(--loro-text);--alert-title: var(--loro-text-strong);--alert-message: color-mix(in srgb, var(--loro-text) 88%, var(--loro-muted));--alert-focus: color-mix(in srgb, var(--loro-primary-500) 34%, transparent)}.loro-alert--success{--alert-background: color-mix(in srgb, #16a34a 10%, var(--loro-surface));--alert-border: color-mix(in srgb, #16a34a 34%, transparent);--alert-foreground: #166534;--alert-title: color-mix(in srgb, #166534 80%, var(--loro-text-strong));--alert-message: color-mix(in srgb, #166534 72%, var(--loro-text));--alert-focus: color-mix(in srgb, #16a34a 34%, transparent)}.loro-alert--warning{--alert-background: color-mix(in srgb, #f59e0b 11%, var(--loro-surface));--alert-border: color-mix(in srgb, #d97706 34%, transparent);--alert-foreground: #92400e;--alert-title: color-mix(in srgb, #78350f 82%, var(--loro-text-strong));--alert-message: color-mix(in srgb, #78350f 76%, var(--loro-text));--alert-focus: color-mix(in srgb, #d97706 34%, transparent)}.loro-alert--error{--alert-background: color-mix(in srgb, var(--loro-danger-surface) 82%, var(--loro-surface));--alert-border: color-mix(in srgb, var(--loro-danger-text) 62%, transparent);--alert-foreground: var(--loro-danger-text);--alert-title: color-mix(in srgb, var(--loro-danger-text) 86%, var(--loro-text-strong));--alert-message: color-mix(in srgb, var(--loro-danger-text) 78%, var(--loro-text));--alert-focus: color-mix(in srgb, var(--loro-danger-text) 34%, transparent)}html[data-theme=dark] .loro-alert{--alert-hover: color-mix(in srgb, var(--alert-border) 14%, var(--loro-surface-elevated))}html[data-theme=dark] .loro-alert--error{--alert-background: color-mix(in srgb, var(--loro-danger-surface) 58%, var(--loro-surface));--alert-border: color-mix(in srgb, var(--loro-danger-text) 42%, var(--loro-border-subtle));--alert-title: #ffd7d7;--alert-message: color-mix(in srgb, var(--loro-danger-text) 58%, var(--loro-text))}@media(forced-colors:active){.loro-alert{border-color:CanvasText;background:Canvas;color:CanvasText;forced-color-adjust:auto}.loro-alert__accent{background:CanvasText}.loro-alert__action,.loro-alert__dismiss{border-color:ButtonText;color:ButtonText}}@media(prefers-reduced-motion:reduce){.loro-alert *,.loro-alert *:before,.loro-alert *:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}\n"], dependencies: [{ kind: "component", type: LoroIcon$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroAlert, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-alert', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'loro-alert', standalone: true, imports: [LoroIcon$1], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.role]': 'role()',
                         '[attr.aria-live]': 'ariaLive()',
                         '[attr.aria-atomic]': 'ariaLive() ? "true" : null',
@@ -3380,45 +2321,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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: 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$1], 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 +2431,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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: 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$1], 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 +2465,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$1, 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$1, 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 +2520,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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroToast, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-toast', standalone: true, imports: [LoroIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'loro-toast', standalone: true, imports: [LoroIcon$1], 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 +2568,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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: 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$1], 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 +2594,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 +2621,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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: LoroDropdown, decorators: [{
             type: Component,
-            args: [{ selector: 'loro-dropdown', standalone: true, imports: [LoroIcon], 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$1], 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 +2635,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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: 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$1], 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 +2661,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 +2681,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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: 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$1], 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 +2715,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 +2731,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$1, selector: "loro-icon", inputs: ["name", "size", "alt", "decorative", "color", "renderMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: 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$1], 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 +2891,61 @@ 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"] }] } });
 
+const LORO_ICON_COLOR_TOKENS = {
+    default: 'currentColor',
+    primary: 'var(--loro-primary-500)',
+    'primary-strong': 'var(--loro-primary-700)',
+    'primary-deep': 'var(--loro-primary-900)',
+    text: 'var(--loro-text)',
+    muted: 'var(--loro-muted)',
+    success: '#1f9d55',
+    danger: 'var(--loro-danger-text)',
+    warning: 'var(--loro-warning)',
+    inverse: 'var(--loro-text-inverse)',
+};
+class LoroIcon {
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = input(48, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    decorative = input(false, ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+    color = input('default', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    renderMode = input('mask', ...(ngDevMode ? [{ debugName: "renderMode" }] : /* istanbul ignore next */ []));
+    assetName = computed(() => {
+        const name = this.name();
+        return (name in LORO_ICON_PATHS
+            ? name
+            : LORO_ICON_LEGACY_NAMES[name]);
+    }, ...(ngDevMode ? [{ debugName: "assetName" }] : /* istanbul ignore next */ []));
+    src = computed(() => LORO_ICON_PATHS[this.assetName()], ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    altText = computed(() => (this.decorative() ? '' : this.alt() || this.name()), ...(ngDevMode ? [{ debugName: "altText" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => {
+        const size = this.size();
+        return typeof size === 'number' ? `${size}px` : size;
+    }, ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedColor = computed(() => {
+        const color = this.color();
+        return color in LORO_ICON_COLOR_TOKENS
+            ? LORO_ICON_COLOR_TOKENS[color]
+            : 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\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\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 }] }] } });
+
 /**
  * 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